fix: refresh model node

packages/client/hmi-client/src/components/models/tera-model-configuration.vue

@@ -282,6 +282,8 @@ const props = defineProps<{
 	calibrationConfig?: boolean;
 }>();
 
+const emit = defineEmits(['new-model-configuration', 'update-model-configuration']);
+
 const modelConfigInputValue = ref<string>('');
 const modelConfigurations = ref<ModelConfiguration[]>([]);
 const cellEditStates = ref<any[]>([]);
@@ -332,6 +334,7 @@ async function addModelConfiguration(config: ModelConfiguration) {
 		config.configuration
 	);
 	setTimeout(() => {
+		emit('new-model-configuration');
 		initializeConfigSpace();
 	}, 800);
 }
@@ -482,6 +485,9 @@ function updateModelConfig(configIndex: number = modalVal.value.configIndex) {
 	const configToUpdate = modelConfigurations.value[configIndex];
 	updateModelConfiguration(configToUpdate);
 	openValueConfig.value = false;
+	setTimeout(() => {
+		emit('update-model-configuration');
+	}, 800);
 }
 
 function getParameterValue(parameter, valueName, timeseries) {

packages/client/hmi-client/src/components/models/tera-model.vue

@@ -477,8 +477,14 @@
 						v-if="model.semantics?.span"
 						:model="model"
 						:feature-config="featureConfig"
+						@new-model-configuration="emit('new-model-configuration')"
+					/>
+					<tera-model-configuration
+						v-else
+						:model="model"
+						:feature-config="featureConfig"
+						@new-model-configuration="emit('new-model-configuration')"
 					/>
-					<tera-model-configuration v-else :model="model" :feature-config="featureConfig" />
 				</AccordionTab>
 				<AccordionTab v-if="!isEmpty(relatedTerariumArtifacts)" header="Associated resources">
 					<DataTable :value="relatedTerariumModels">
@@ -596,7 +602,12 @@ enum ModelView {
 }
 
 // TODO - Get rid of these emits
-const emit = defineEmits(['close-preview', 'asset-loaded', 'close-current-tab']);
+const emit = defineEmits([
+	'close-preview',
+	'asset-loaded',
+	'close-current-tab',
+	'new-model-configuration'
+]);
 
 const props = defineProps({
 	project: {

packages/client/hmi-client/src/components/models/tera-stratified-model-configuration.vue

@@ -149,6 +149,8 @@ const props = defineProps<{
 	calibrationConfig?: boolean;
 }>();
 
+const emit = defineEmits(['new-model-configuration', 'update-model-configuration']);
+
 const modelConfigInputValue = ref<string>('');
 const modelConfigurations = ref<ModelConfiguration[]>([]);
 const cellEditStates = ref<any[]>([]);
@@ -186,6 +188,9 @@ const vFocus = {
 function updateModelConfigName(configIndex: number) {
 	modelConfigurations.value[configIndex].name = modelConfigInputValue.value;
 	updateModelConfiguration(modelConfigurations.value[configIndex]);
+	setTimeout(() => {
+		emit('update-model-configuration');
+	}, 800);
 }
 
 async function addModelConfiguration(config: ModelConfiguration) {
@@ -196,6 +201,7 @@ async function addModelConfiguration(config: ModelConfiguration) {
 		config.configuration
 	);
 	setTimeout(() => {
+		emit('new-model-configuration');
 		initializeConfigSpace();
 	}, 800);
 }

packages/client/hmi-client/src/components/workflow/tera-model-workflow-wrapper.vue

@@ -1,5 +1,10 @@
 <template>
-	<tera-model :project="props.project" :asset-id="props.node.state.modelId" />
+	<tera-model
+		:project="props.project"
+		:asset-id="props.node.state.modelId"
+		@new-model-configuration="refreshModelNode"
+		@update-model-configuration="refreshModelNode"
+	/>
 </template>
 
 <script setup lang="ts">
@@ -8,9 +13,18 @@
 import { IProject } from '@/types/Project';
 import { WorkflowNode } from '@/types/workflow';
 import TeraModel from '@/components/models/tera-model.vue';
+import { workflowEventBus } from '@/services/workflow';
 
 const props = defineProps<{
 	node: WorkflowNode;
 	project: IProject;
 }>();
+
+// Send refresh event onto the eventBus
+const refreshModelNode = () => {
+	workflowEventBus.emitNodeRefresh({
+		workflowId: props.node.workflowId,
+		nodeId: props.node.id
+	});
+};
 </script>

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

@@ -205,7 +205,6 @@
 
 <script setup lang="ts">
 import { isArray, cloneDeep, isEqual } from 'lodash';
-import { v4 as uuidv4 } from 'uuid';
 import { ref, onMounted, onUnmounted, computed, watch } from 'vue';
 import { getModelConfigurations } from '@/services/model';
 import TeraInfiniteCanvas from '@/components/widgets/tera-infinite-canvas.vue';
@@ -344,25 +343,31 @@ const testOperation: Operation = {
 const models = computed<Model[]>(() => props.project.assets?.models ?? []);
 const datasets = computed<Dataset[]>(() => props.project.assets?.datasets ?? []);
 
-async function selectModel(node: WorkflowNode, data: { id: string }) {
-	droppedAssetId.value = null;
-	node.state.modelId = data.id;
-
+const refreshModelNode = async (node: WorkflowNode) => {
 	// FIXME: Need additional design to work out exactly what to show. June 2023
-	const configurationList = await getModelConfigurations(data.id);
-	node.outputs = [];
+	const configurationList = await getModelConfigurations(node.state.modelId);
 	configurationList.forEach((configuration) => {
 		// Only add new configurations
-		if (node.outputs.find((d) => isEqual(d.value, [configuration.id]))) return;
+		const existingConfig = node.outputs.find((port) => isEqual(port.value, [configuration.id]));
+		if (existingConfig) {
+			existingConfig.label = configuration.name;
+			return;
+		}
 
 		node.outputs.push({
-			id: uuidv4(),
+			id: crypto.randomUUID(),
 			type: 'modelConfigId',
 			label: configuration.name,
 			value: [configuration.id],
 			status: WorkflowPortStatus.NOT_CONNECTED
 		});
 	});
+};
+
+async function selectModel(node: WorkflowNode, data: { id: string }) {
+	droppedAssetId.value = null;
+	node.state.modelId = data.id;
+	await refreshModelNode(node);
 }
 
 async function updateWorkflowName() {
@@ -379,7 +384,7 @@ async function selectDataset(node: WorkflowNode, data: { id: string; name: strin
 	node.state.datasetId = data.id;
 	node.outputs = [
 		{
-			id: uuidv4(),
+			id: crypto.randomUUID(),
 			type: 'datasetId',
 			label: data.name,
 			value: [data.id],
@@ -390,7 +395,7 @@ async function selectDataset(node: WorkflowNode, data: { id: string; name: strin
 
 function appendOutputPort(node: WorkflowNode, port: { type: string; label?: string; value: any }) {
 	node.outputs.push({
-		id: uuidv4(),
+		id: crypto.randomUUID(),
 		type: port.type,
 		label: port.label,
 		value: isArray(port.value) ? port.value : [port.value],
@@ -439,6 +444,22 @@ workflowEventBus.on('node-state-change', (payload: any) => {
 	workflowDirty = true;
 });
 
+workflowEventBus.on('node-refresh', (payload: { workflowId: string; nodeId: string }) => {
+	if (wf.value.id !== payload.workflowId) return;
+	const node = wf.value.nodes.find((n) => n.id === payload.nodeId);
+	if (!node) return;
+
+	if (node.operationType === WorkflowOperationTypes.MODEL) {
+		// This part is a bit hacky and slow. Because we allow multiple instances of the
+		// same model across many nodes in a workflow, they ALL need to be updated. However
+		// this multi-models setup is also somewhat uncommon so I don't want to go out of the way
+		// to communicate "model change" instead of "node change", the former seemingly out of
+		// place when using the WorkflowEventBus mechanism. DC - Aug 2023
+		const nodesToRefresh = wf.value.nodes.filter((n) => n.state.modelId === node.state.modelId);
+		nodesToRefresh.forEach(refreshModelNode);
+	}
+});
+
 workflowEventBus.on(
 	'add-node',
 	(payload: { id: string; operation: Operation; position: Position; state: any }) => {

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

@@ -259,6 +259,10 @@ class EventEmitter {
 	emitNodeStateChange(payload: { workflowId: string; nodeId: string; state: any }) {
 		this.emit('node-state-change', payload);
 	}
+
+	emitNodeRefresh(payload: { workflowId: string; nodeId: string }) {
+		this.emit('node-refresh', payload);
+	}
 }
 
 export const workflowEventBus = new EventEmitter();