Operator input/output label reactive

packages/client/hmi-client/src/components/operator/tera-operator-outputs.vue

@@ -57,13 +57,6 @@
 					@menu-selection="(operatorType) => emit('menu-selection', operatorType, output)"
 				/>
 			</Transition>
-			<!--TODO: We will see how to integrate port actions into this button later-->
-			<!-- <Button
-				size="small"
-				text
-				label="output.actionLabel"
-				@click.stop="console.log('Do output.action() here')"
-			/> -->
 		</li>
 	</ul>
 </template>

packages/client/hmi-client/src/composables/activeProject.ts

@@ -1,5 +1,5 @@
-import { computed, shallowRef } from 'vue';
+import { computed, ref } from 'vue';
 import type { Project } from '@/types/Types';
 
-export const activeProject = shallowRef<Project | null>(null);
+export const activeProject = ref<Project | null>(null);
 export const activeProjectId = computed<string>(() => activeProject.value?.id ?? '');

packages/client/hmi-client/src/composables/project.ts

@@ -10,7 +10,7 @@ import { activeProject, activeProjectId } from '@/composables/activeProject';
 import * as ProjectService from '@/services/project';
 import type { PermissionRelationships, Project, ProjectAsset } from '@/types/Types';
 import { AssetType } from '@/types/Types';
-import { shallowRef } from 'vue';
+import { computed, ComputedRef, shallowRef } from 'vue';
 import { useToastService } from '@/services/toast';
 
 const TIMEOUT_MS = 100;
@@ -137,8 +137,8 @@ export function useProjects() {
 	 * @param {ProjectAsset['assetId]} assetId
 	 * @returns {ProjectAsset['assetName']}
 	 */
-	function getAssetName(assetId: ProjectAsset['assetId']): ProjectAsset['assetName'] {
-		return findAsset(assetId)?.assetName ?? '';
+	function getAssetName(assetId: ProjectAsset['assetId']): ComputedRef<ProjectAsset['assetName']> {
+		return computed(() => findAsset(assetId)?.assetName ?? '');
 	}
 
 	/**

packages/client/hmi-client/src/services/workflow.ts

@@ -1,6 +1,6 @@
-import { Component } from 'vue';
+import { Component, computed } from 'vue';
 import { v4 as uuidv4 } from 'uuid';
-import _, { cloneDeep } from 'lodash';
+import _, { cloneDeep, isEmpty } from 'lodash';
 import API from '@/api/api';
 import { logger } from '@/utils/logger';
 import { EventEmitter } from '@/utils/emitter';
@@ -14,21 +14,17 @@ import type {
 	WorkflowNode,
 	WorkflowPort,
 	WorkflowOutput,
-	WorkflowAnnotation
-} from '@/types/workflow';
-import {
-	WorkflowPortStatus,
-	OperatorStatus,
-	WorkflowOperationTypes,
-	WorkflowTransformations,
+	WorkflowAnnotation,
 	Transform
 } from '@/types/workflow';
+import { OperatorStatus, WorkflowOperationTypes, WorkflowPortStatus, WorkflowTransformations } from '@/types/workflow';
 import { useProjects } from '@/composables/project';
 import useAuthStore from '@/stores/auth';
 import dagre from 'dagre';
+import { ProjectAsset } from '@/types/Types';
 
 /**
- * A wrapper class around the workflow data struture to make it easier
+ * A wrapper class around the workflow data structure to make it easier
  * to deal with CURD operations
  * */
 export class WorkflowWrapper {
@@ -42,8 +38,7 @@ export class WorkflowWrapper {
 		}
 	}
 
-	// This will replace the entire workflow, should only use for initial load
-	// as there it will not propapate reactivity
+	// This will replace the entire workflow, should only use for initial load as there it will not propagate reactivity
 	load(wf: Workflow) {
 		this.wf = _.cloneDeep(wf);
 	}
@@ -649,14 +644,20 @@ export function getOutputLabel(outputs: WorkflowOutput<any>[], id: string) {
 	const selectedOutput = outputs.find((output) => output.id === id);
 	if (!selectedOutput) return '';
 
+	let assetId: ProjectAsset['assetId'];
+
 	// multiple output types, choose first name to use as label arbitrarily
 	if (selectedOutput.type.includes('|')) {
 		const outputType = selectedOutput.type.split('|');
-		return useProjects().getAssetName(selectedOutput.value?.[0]?.[outputType?.[0]]) || selectedOutput.label;
+		assetId = selectedOutput.value?.[0]?.[outputType?.[0]];
+
+		// default use single output type
+	} else {
+		assetId = selectedOutput.value?.[0];
 	}
 
-	// default use single output type
-	return useProjects().getAssetName(selectedOutput.value?.[0]) || selectedOutput.label;
+	const label = useProjects().getAssetName(assetId).value;
+	return computed(() => (!isEmpty(label) ? label : (selectedOutput.label ?? '')));
 }
 
 // Checker for resource-operators (e.g. model, dataset) that automatically create an output