Display all assets in the ressources panel

packages/client/hmi-client/src/page/project/components/tera-resource-sidebar.vue

@@ -16,27 +16,6 @@
 					<i class="pi pi-filter"></i>
 				</span>
 			</div>
-			<!--
-			<SplitButton
-				class="new-resource-button"
-				label="New"
-				size="small"
-				severity="secondary"
-				outlined
-				@click="toggleOptionsMenu"
-				:model="optionsMenuItems"
-			/>
-			<Menu ref="optionsMenu" :model="optionsMenuItems" :popup="true">
-				<template #item="slotProps">
-					<a class="p-menuitem-link">
-						<tera-asset-icon :asset-type="slotProps.item.key as AssetType" />
-						<span class="p-menuitem-text">
-							{{ slotProps.item.label }}
-						</span>
-					</a>
-				</template>
-			</Menu>
--->
 		</header>
 		<Button
 			class="asset-button"
@@ -198,14 +177,12 @@ import { useDragEvent } from '@/services/drag-drop';
 import { ProjectPages } from '@/types/Project';
 import { AssetType } from '@/types/Types';
 import { AssetItem, AssetRoute } from '@/types/common';
-import { generateProjectAssetsMap } from '@/utils/map-project-assets';
+import { generateProjectAssetsMap, getNonNullSetOfVisibleItems } from '@/utils/map-project-assets';
 import { capitalize, isEmpty, isEqual } from 'lodash';
 import Accordion from 'primevue/accordion';
 import AccordionTab from 'primevue/accordiontab';
 import Button from 'primevue/button';
-// import SplitButton from 'primevue/splitbutton';
 import InputText from 'primevue/inputtext';
-// import Menu from 'primevue/menu';
 import Skeleton from 'primevue/skeleton';
 import { computed, ref } from 'vue';
 
@@ -225,14 +202,15 @@ const assetToDelete = ref<AssetItem | null>(null);
 const searchAsset = ref<string>('');
 const inputFocused = ref(false);
 
+const assetItemsMap = computed(() => generateProjectAssetsMap(searchAsset.value));
+const assetItemsKeysNotEmpty = computed(() => getNonNullSetOfVisibleItems(assetItemsMap.value));
 const activeAccordionTabs = ref(
 	new Set(
-		localStorage.getItem('activeResourceBarTabs')?.split(',').map(Number) ?? [0, 1, 2, 3, 4, 5, 6]
+		localStorage.getItem('activeResourceBarTabs')?.split(',').map(Number) ??
+			assetItemsKeysNotEmpty.value ?? [0, 1, 2, 3, 4, 5, 6]
 	)
 );
 
-const assetItemsMap = computed(() => generateProjectAssetsMap(searchAsset.value));
-
 function clearSearch() {
 	searchAsset.value = '';
 }
@@ -261,35 +239,6 @@ function endDrag() {
 	deleteDragData('assetNode');
 	draggedAsset.value = null;
 }
-
-// const optionsMenu = ref();
-// const optionsMenuItems = ref([
-// 	{
-// 		key: AssetType.Code,
-// 		label: 'New code',
-// 		command() {
-// 			emit('open-new-asset', AssetType.Code);
-// 		}
-// 	},
-// 	{
-// 		key: AssetType.Model,
-// 		label: 'New model',
-// 		command() {
-// 			emit('open-new-asset', AssetType.Model);
-// 		}
-// 	},
-// 	{
-// 		key: AssetType.Workflow,
-// 		label: 'New workflow',
-// 		command() {
-// 			emit('open-new-asset', AssetType.Workflow);
-// 		}
-// 	}
-// ]);
-
-// const toggleOptionsMenu = (event) => {
-// 	optionsMenu.value.toggle(event);
-// };
 </script>
 
 <style scoped>
@@ -328,36 +277,6 @@ header {
 	overflow: visible;
 }
 
-/* Split button
- * This needs to be into its own component
- */
-
-:deep(.new-resource-button) {
-	color: var(--text-color-primary);
-}
-
-:deep(.new-resource-button.p-splitbutton .p-button:first-of-type) {
-	border-top-right-radius: 0;
-	border-bottom-right-radius: 0;
-	border-right: 0 none;
-	padding-left: 0;
-	color: var(--text-color);
-}
-
-:deep(.new-resource-button.p-splitbutton .p-button:last-of-type) {
-	background-color: var(--surface-200);
-	border-top-left-radius: 0;
-	border-bottom-left-radius: 0;
-	color: var(--text-color-light);
-	padding: 0.65rem 0;
-	width: 2rem;
-
-	&:hover {
-		background-color: var(--surface-50);
-		color: var(--text-color);
-	}
-}
-
 .removeResourceButton {
 	color: var(--text-color-subdued);
 	margin-right: 0.75rem;
@@ -404,7 +323,7 @@ header {
 	overflow: hidden;
 	padding: 0;
 	border-radius: 0;
-	/* Remove the border-radius to end nitely with the border of the sidebar */
+	/* Remove the border-radius to end neatly with the border of the sidebar */
 }
 
 :deep(.asset-button.p-button > span) {

packages/client/hmi-client/src/types/Project.ts

@@ -4,5 +4,24 @@ export enum ProjectPages {
 	OVERVIEW = 'overview'
 }
 
+/**
+ * Return the list of AssetTypes that are visible in the project
+ * This takes the Types from the AssetType enum and filters out the ones that are not visible
+ */
+export const listOfVisibleAssetTypes: AssetType[] = Object.values(AssetType).filter(
+	(type) => ![AssetType.Publication, AssetType.Artifact].includes(type)
+);
+
+/**
+ * Check if the asset type is a project asset type
+ * @param type
+ */
 export const isProjectAssetTypes = (type: AssetType | string): boolean =>
 	Object.values(AssetType).includes(type.toUpperCase() as AssetType);
+
+/**
+ * Check if the asset type is a project visible asset type
+ * @param type
+ */
+export const isVisibleProjectAssetTypes = (type: AssetType | string): boolean =>
+	listOfVisibleAssetTypes.includes(type.toUpperCase() as AssetType);

packages/client/hmi-client/src/utils/map-project-assets.ts

@@ -1,20 +1,28 @@
 import _ from 'lodash';
 import { AssetItem } from '@/types/common';
 import { useProjects } from '@/composables/project';
-import { isProjectAssetTypes } from '@/types/Project';
+import { isVisibleProjectAssetTypes, listOfVisibleAssetTypes } from '@/types/Project';
 import { formatShort } from '@/utils/date';
 
+// Map of asset types to their respective asset items
 type ProjectAssetItems = Map<string, Set<AssetItem>>;
 
+/**
+ * Generate a map of all the visible asset types and their respective asset items
+ * @param searchAsset - the search term to filter the assets
+ */
 export const generateProjectAssetsMap = (searchAsset: string): ProjectAssetItems => {
-	const assetItemsMap = new Map<string, Set<AssetItem>>();
+	// Create a map of all the visible asset types
+	const assetItemsMap: ProjectAssetItems = new Map<string, Set<AssetItem>>();
+	listOfVisibleAssetTypes.forEach((type) => assetItemsMap.set(type, new Set<AssetItem>()));
 
+	// Check if the project has any assets
 	const projectAssets = useProjects().activeProject?.value?.projectAssets;
 	if (!projectAssets) return assetItemsMap;
 
 	// Run through all the assets type within the project
 	const cleanAssets = projectAssets
-		.filter((asset) => isProjectAssetTypes(asset.assetType))
+		.filter((asset) => isVisibleProjectAssetTypes(asset.assetType))
 		.map(
 			(asset) =>
 				({
@@ -32,9 +40,21 @@ export const generateProjectAssetsMap = (searchAsset: string): ProjectAssetItems
 			return asset.assetName.toLowerCase().includes(searchTermLower);
 		});
 
+	// Assign the assets to the map
 	Object.entries(_.groupBy(cleanAssets, 'pageType')).forEach(([type, assetList]) =>
 		assetItemsMap.set(type, new Set(assetList as AssetItem[]))
 	);
 
 	return assetItemsMap;
 };
+
+// Function to filter out keys with non-null sets
+export function getNonNullSetOfVisibleItems(map: ProjectAssetItems): number[] {
+	const nonNullSet: number[] = [];
+	map.forEach((value, key) => {
+		if (value !== null && value.size > 0) {
+			nonNullSet.push(listOfVisibleAssetTypes.findIndex((type) => type === key));
+		}
+	});
+	return nonNullSet;
+}

packages/client/hmi-client/src/workflow/tera-workflow.vue

@@ -525,29 +525,29 @@ const contextMenuItems: MenuItem[] = [
 		items: [
 			{
 				label: CalibrateJuliaOp.operation.displayName,
-				command: addOperatorToWorkflow(CalibrateJuliaOp, OperatorNodeSize.xlarge)
+				command: addOperatorToWorkflow(CalibrateJuliaOp)
 			},
 			{
 				label: SimulateJuliaOp.operation.displayName,
-				command: addOperatorToWorkflow(SimulateJuliaOp, OperatorNodeSize.xlarge)
+				command: addOperatorToWorkflow(SimulateJuliaOp)
 			},
 			{ separator: true },
 			{
 				label: SimulateCiemssOp.operation.displayName,
-				command: addOperatorToWorkflow(SimulateCiemssOp, OperatorNodeSize.xlarge)
+				command: addOperatorToWorkflow(SimulateCiemssOp)
 			},
 			{
 				label: CalibrateCiemssOp.operation.displayName,
-				command: addOperatorToWorkflow(CalibrateCiemssOp, OperatorNodeSize.xlarge)
+				command: addOperatorToWorkflow(CalibrateCiemssOp)
 			},
 			{ separator: true },
 			{
 				label: CalibrateEnsembleCiemssOp.operation.displayName,
-				command: addOperatorToWorkflow(CalibrateEnsembleCiemssOp, OperatorNodeSize.xlarge)
+				command: addOperatorToWorkflow(CalibrateEnsembleCiemssOp)
 			},
 			{
 				label: SimulateEnsembleCiemssOp.operation.displayName,
-				command: addOperatorToWorkflow(SimulateEnsembleCiemssOp, OperatorNodeSize.xlarge)
+				command: addOperatorToWorkflow(SimulateEnsembleCiemssOp)
 			}
 		]
 	},