on-save plumbing for model operator

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

@@ -41,7 +41,13 @@
 					@click="onReset"
 					:disabled="!(hasChanged && hasEditPermission)"
 				/>
-				<Button label="Save as" severity="secondary" outlined @click="onSaveAs" :disabled="!hasEditPermission" />
+				<Button
+					:label="`Save ${isWorkflow ? 'for re-use' : 'as'}`"
+					severity="secondary"
+					outlined
+					@click="onSaveAs"
+					:disabled="!hasEditPermission"
+				/>
 				<Button label="Save" @click="onSave" :disabled="!(hasChanged && hasEditPermission)" />
 			</aside>
 		</template>
@@ -64,7 +70,7 @@
 		:asset-type="AssetType.Model"
 		:initial-name="temporaryModel?.header.name"
 		:is-visible="showSaveModal"
-		:open-on-save="true"
+		:open-on-save="isWorkflow ? false : true"
 		@close-modal="showSaveModal = false"
 		@on-save="onModalSave"
 	/>
@@ -96,10 +102,14 @@ const props = defineProps({
 	featureConfig: {
 		type: Object as PropType<FeatureConfig>,
 		default: { isPreview: false } as FeatureConfig
+	},
+	isWorkflow: {
+		type: Boolean,
+		default: false
 	}
 });
 
-const emit = defineEmits(['close-preview']);
+const emit = defineEmits(['close-preview', 'on-save']);
 
 // Listen for the task completion event
 useClientEvent(ClientEventType.TaskGollmModelCard, (event: ClientEvent<TaskResponse>) => {
@@ -136,8 +146,11 @@ function onSaveAs() {
 }
 
 // Save modal
-function onModalSave() {
+function onModalSave(event: any) {
 	showSaveModal.value = false;
+	if (props.isWorkflow) {
+		emit('on-save', event);
+	}
 }
 
 // User menu

packages/client/hmi-client/src/components/workflow/ops/model/model-operation.ts

@@ -3,7 +3,6 @@ import model from '@assets/svg/operator-images/model.svg';
 
 export interface ModelOperationState extends BaseState {
 	modelId: string | null;
-	modelConfigurationIds: string[];
 }
 
 export const ModelOperation: Operation = {
@@ -18,8 +17,7 @@ export const ModelOperation: Operation = {
 
 	initState: () => {
 		const init: ModelOperationState = {
-			modelId: null,
-			modelConfigurationIds: []
+			modelId: null
 		};
 		return init;
 	}

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

@@ -5,21 +5,35 @@
 		@update-state="(state: any) => emit('update-state', state)"
 	>
 		<tera-drilldown-section>
-			<tera-model v-if="node.state.modelId" :asset-id="node.state.modelId" />
+			<tera-model v-if="node.state.modelId" :asset-id="node.state.modelId" :is-workflow="true" @on-save="onSaveEvent" />
 		</tera-drilldown-section>
 	</tera-drilldown>
 </template>
 
 <script setup lang="ts">
+import { cloneDeep } from 'lodash';
 import { WorkflowNode } from '@/types/workflow';
 import { ModelOperationState } from '@/components/workflow/ops/model/model-operation';
 import TeraModel from '@/components/model/tera-model.vue';
 import TeraDrilldown from '@/components/drilldown/tera-drilldown.vue';
 import TeraDrilldownSection from '@/components/drilldown/tera-drilldown-section.vue';
+import operator from '@/services/operator';
 
-defineProps<{
+const props = defineProps<{
 	node: WorkflowNode<ModelOperationState>;
 }>();
 
-const emit = defineEmits(['close', 'update-state']);
+const emit = defineEmits(['close', 'update-state', 'update-output']);
+
+const onSaveEvent = (event: any) => {
+	const state = cloneDeep(props.node.state);
+	state.modelId = event.id;
+	emit('update-state', state);
+
+	// Update the output with the new model
+	const output = operator.getActiveOutput(props.node);
+	if (!output) return;
+	output.state = state;
+	emit('update-output', output);
+};
 </script>

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

@@ -12,6 +12,7 @@
 				<tera-model-diagram
 					v-if="view === ModelNodeView.Diagram"
 					:model="model"
+					:key="model.id"
 					:feature-config="{ isPreview: true }"
 				/>
 				<tera-model-equation v-else-if="view === ModelNodeView.Equation" :model="model" :is-editable="false" />
@@ -33,7 +34,7 @@
 
 <script setup lang="ts">
 import _ from 'lodash';
-import { onMounted, ref, computed } from 'vue';
+import { onMounted, ref, computed, watch } from 'vue';
 import { getModel } from '@/services/model';
 import { canPropagateResource } from '@/services/workflow';
 import Dropdown from 'primevue/dropdown';
@@ -93,6 +94,16 @@ onMounted(async () => {
 		await getModelById(state.modelId);
 	}
 });
+
+watch(
+	() => props.node.active,
+	async () => {
+		const newModelId = props.node.outputs.find((d) => d.id === props.node.active)?.value?.[0];
+		if (newModelId) {
+			model.value = await getModel(newModelId);
+		}
+	}
+);
 </script>
 
 <style scoped>

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

@@ -89,8 +89,8 @@
 							:node="node"
 							@append-output="(event: any) => appendOutput(node, event)"
 							@append-input-port="(event: any) => appendInputPort(node, event)"
-							@update-state="(event: any) => updateWorkflowNodeState(node, event)"
 							@open-drilldown="addOperatorToRoute(node.id)"
+							@update-state="(event: any) => updateWorkflowNodeState(node, event)"
 						/>
 					</template>
 				</tera-operator>
@@ -159,11 +159,11 @@
 			:downstream-operators-nav="downstreamOperatorsNav"
 			:spawn-animation="drilldownSpawnAnimation"
 			@append-output="(event: any) => appendOutput(currentActiveNode, event)"
+			@close="addOperatorToRoute(null)"
+			@select-output="(event: any) => selectOutput(currentActiveNode, event)"
+			@update-output="(event: any) => updateOutput(currentActiveNode, event)"
 			@update-state="(event: any) => updateWorkflowNodeState(currentActiveNode, event)"
 			@update-status="(status: OperatorStatus) => updateWorkflowNodeStatus(currentActiveNode, status)"
-			@select-output="(event: any) => selectOutput(currentActiveNode, event)"
-			@close="addOperatorToRoute(null)"
-			@update-output-port="(event: any) => updateOutputPort(currentActiveNode, event)"
 		/>
 	</Teleport>
 </template>
@@ -409,9 +409,9 @@ function selectOutput(node: WorkflowNode<any> | null, selectedOutputId: string)
 	saveWorkflowHandler();
 }
 
-function updateOutputPort(node: WorkflowNode<any> | null, workflowOutput: WorkflowOutput<any>) {
+function updateOutput(node: WorkflowNode<any> | null, workflowOutput: WorkflowOutput<any>) {
 	if (!node) return;
-	workflowService.updateOutputPort(node, workflowOutput);
+	workflowService.updateOutput(node, workflowOutput);
 	saveWorkflowHandler();
 }
 
@@ -780,7 +780,7 @@ const dist2 = (a: Position, b: Position) => (a.x - b.x) * (a.x - b.x) + (a.y - b
 const threshold2 = 5.0 * 5.0;
 
 /*
- * Relink edges that have become detatched
+ * Relink edges that have become detached
  *
  * [output-port](edge source => edge target)[input-port]
  *
@@ -1008,30 +1008,30 @@ onUnmounted(() => {
 
 <style scoped>
 .toolbar {
+	align-items: center;
+	background-color: var(--surface-transparent);
+	border-bottom: 1px solid var(--surface-border-light);
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
-	align-items: center;
-	padding: 0.5rem 1rem;
-	border-bottom: 1px solid var(--surface-border-light);
+	padding: var(--gap-2) var(--gap-4);
 	z-index: 900;
-	background-color: var(--surface-transparent);
 }
 
 .glass {
 	backdrop-filter: blur(10px);
 }
 
 .button-group {
-	display: flex;
 	align-items: center;
+	display: flex;
 	flex-direction: row;
-	gap: var(--gap-small);
+	gap: var(--gap-2);
 }
 
 .rename-workflow {
-	display: flex;
 	align-items: center;
+	display: flex;
 	flex-wrap: nowrap;
 }
 </style>

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

@@ -807,10 +807,11 @@ export function getActiveOutput(node: WorkflowNode<any>) {
 	return node.outputs.find((o) => o.id === node.active);
 }
 
-export function updateOutputPort(node: WorkflowNode<any>, updatedOutputPort: WorkflowOutput<any>) {
-	let outputPort = node.outputs.find((port) => port.id === updatedOutputPort.id);
-	if (!outputPort) return;
-	outputPort = Object.assign(outputPort, updatedOutputPort);
+/** Update the output of the operator */
+export function updateOutput(node: WorkflowNode<any>, updatedOutput: WorkflowOutput<any>) {
+	let output = node.outputs.find((o) => o.id === updatedOutput.id);
+	if (!output) return;
+	output = Object.assign(output, updatedOutput);
 }
 
 // Check if the current-state matches that of the output-state.