on-save plumbing for model operator (#4962)

Co-authored-by: Yohann Paris <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
DARPA-ASKEM · Oct 1, 2024 · 2f759b2 · 2f759b2
1 parent 8e2c4d5
commit 2f759b2
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 12 deletions.
diff --git a/packages/client/hmi-client/src/components/model/tera-model.vue b/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

diff --git a/packages/client/hmi-client/src/components/workflow/ops/model/model-operation.ts b/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;
 	}

diff --git a/packages/client/hmi-client/src/components/workflow/ops/model/tera-model-drilldown.vue b/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 { ModelOperation, 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';
 
-defineProps<{
+const props = defineProps<{
 	node: WorkflowNode<ModelOperationState>;
 }>();
 
-const emit = defineEmits(['close', 'update-state']);
+const emit = defineEmits(['close', 'update-state', 'append-output']);
+
+const onSaveEvent = (event: any) => {
+	const state = cloneDeep(props.node.state);
+	state.modelId = event.id;
+	emit('update-state', state);
+	emit('append-output', {
+		type: ModelOperation.outputs[0].type,
+		label: event.header.name,
+		value: [event.id],
+		state,
+		isSelected: false
+	});
+};
 </script>
diff --git a/packages/client/hmi-client/src/components/workflow/ops/model/tera-model-node.vue b/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>