From 5d8cc2c3a742f74ff5839a20c5a9e4f9d4954e15 Mon Sep 17 00:00:00 2001
From: Yohann Paris <github@yohannparis.com>
Date: Thu, 3 Oct 2024 15:23:52 -0400
Subject: [PATCH] Bring back save for re use in model operators (#5034)

---
 .../src/components/model/tera-model.vue       | 18 ++++++--
 .../operator/tera-operator-placeholder.vue    | 15 ++++---
 .../widgets/tera-asset-enrichment.vue         |  2 +-
 .../model-edit/tera-model-edit-drilldown.vue  | 10 ++---
 .../tera-model-from-equations-drilldown.vue   | 41 +++++++++++--------
 .../ops/model/tera-model-drilldown.vue        |  2 +-
 .../stratify-mira/tera-stratify-drilldown.vue | 10 ++---
 7 files changed, 54 insertions(+), 44 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
index 73ae5b166b..7a6c978541 100644
--- a/packages/client/hmi-client/src/components/model/tera-model.vue
+++ b/packages/client/hmi-client/src/components/model/tera-model.vue
@@ -7,7 +7,7 @@
 		:is-naming-asset="isNaming"
 		:name="temporaryModel?.header.name"
 		@close-preview="emit('close-preview')"
-		show-table-of-contents
+		:show-table-of-contents="!isWorkflow"
 	>
 		<template #name-input>
 			<tera-input-text
@@ -42,13 +42,14 @@
 					:disabled="!(hasChanged && hasEditPermission)"
 				/>
 				<Button
-					v-if="!isWorkflow"
-					:label="`Save ${isWorkflow ? 'for re-use' : 'as'}`"
+					v-if="isSaveForReuse"
+					label="Save for re-use"
 					severity="secondary"
 					outlined
-					@click="onSaveAs"
+					@click="onSaveForReUse"
 					:disabled="!hasEditPermission"
 				/>
+				<Button v-else label="Save as" severity="secondary" outlined @click="onSaveAs" :disabled="!hasEditPermission" />
 				<Button label="Save" @click="onSave" :disabled="!(hasChanged && hasEditPermission)" />
 			</aside>
 		</template>
@@ -71,6 +72,7 @@
 		:asset-type="AssetType.Model"
 		:initial-name="temporaryModel?.header.name"
 		:is-visible="showSaveModal"
+		:is-updating-asset="isSaveForReuse"
 		:open-on-save="!isWorkflow"
 		@close-modal="showSaveModal = false"
 		@on-save="onModalSave"
@@ -107,6 +109,10 @@ const props = defineProps({
 	isWorkflow: {
 		type: Boolean,
 		default: false
+	},
+	isSaveForReuse: {
+		type: Boolean,
+		default: false
 	}
 });
 
@@ -145,6 +151,9 @@ function onSave() {
 function onSaveAs() {
 	showSaveModal.value = true;
 }
+function onSaveForReUse() {
+	showSaveModal.value = true;
+}
 
 // Save modal
 function onModalSave(event: any) {
@@ -152,6 +161,7 @@ function onModalSave(event: any) {
 	if (props.isWorkflow) {
 		emit('on-save', event);
 	}
+	fetchModel();
 }
 
 // User menu
diff --git a/packages/client/hmi-client/src/components/operator/tera-operator-placeholder.vue b/packages/client/hmi-client/src/components/operator/tera-operator-placeholder.vue
index 1e9ca958d1..4cdec18b32 100644
--- a/packages/client/hmi-client/src/components/operator/tera-operator-placeholder.vue
+++ b/packages/client/hmi-client/src/components/operator/tera-operator-placeholder.vue
@@ -1,8 +1,8 @@
 <template>
-	<div class="placeholder-container">
+	<aside>
 		<img :src="placeholderGraphic" alt="Plant icon" />
 		<slot />
-	</div>
+	</aside>
 </template>
 
 <script setup lang="ts">
@@ -17,21 +17,20 @@ const placeholderGraphic = props.node.imageUrl ?? plants;
 </script>
 
 <style scoped>
-.placeholder-container {
+aside {
+	color: var(--text-color-subdued);
 	display: flex;
 	flex-direction: column;
+	gap: var(--gap-6);
 	justify-content: center;
-	font-size: var(--font-caption);
-	color: var(--text-color-subdued);
+	margin-top: var(--gap-8);
 	text-align: center;
-	gap: 0.5rem;
-	padding: 0.5rem;
 }
 
 img {
 	height: 5.5rem;
-	max-height: 8rem;
 	margin: 0 auto;
+	max-height: 8rem;
 	pointer-events: none;
 }
 </style>
diff --git a/packages/client/hmi-client/src/components/widgets/tera-asset-enrichment.vue b/packages/client/hmi-client/src/components/widgets/tera-asset-enrichment.vue
index 6ba5c81af3..cc943f8a58 100644
--- a/packages/client/hmi-client/src/components/widgets/tera-asset-enrichment.vue
+++ b/packages/client/hmi-client/src/components/widgets/tera-asset-enrichment.vue
@@ -1,6 +1,6 @@
 <template>
 	<Button
-		label="Enrich metadata with AI"
+		label="Enrich metadata"
 		icon="pi pi-sparkles"
 		:loading="isLoading"
 		severity="secondary"
diff --git a/packages/client/hmi-client/src/components/workflow/ops/model-edit/tera-model-edit-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/model-edit/tera-model-edit-drilldown.vue
index 49add663f1..248a75cbd7 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/model-edit/tera-model-edit-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/model-edit/tera-model-edit-drilldown.vue
@@ -56,7 +56,7 @@
 					:value="executeResponse.value"
 					:traceback="executeResponse.traceback"
 				/>
-				<tera-model v-else-if="amr" is-workflow :assetId="amr.id" @on-save="updateNode" />
+				<tera-model v-else-if="amr" is-workflow is-save-for-reuse :assetId="amr.id" @on-save="updateNode" />
 				<tera-progress-spinner v-else-if="isUpdatingModel || !amr" is-centered :font-size="2">
 					Loading...
 				</tera-progress-spinner>
@@ -351,15 +351,11 @@ watch(
 );
 
 function updateNode(model: Model) {
-	const id = amr.value?.id;
-	if (!id || !model) return;
-
+	if (!model) return;
 	amr.value = model;
-	const outputPort = cloneDeep(props.node.outputs?.find((port) => port.value?.[0] === id));
-
+	const outputPort = cloneDeep(props.node.outputs?.find((port) => port.value?.[0] === model.id));
 	if (!outputPort) return;
 	outputPort.label = model.header.name;
-
 	emit('update-output', outputPort);
 }
 
diff --git a/packages/client/hmi-client/src/components/workflow/ops/model-from-equations/tera-model-from-equations-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/model-from-equations/tera-model-from-equations-drilldown.vue
index 77b015fd07..08bfa7f0c1 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/model-from-equations/tera-model-from-equations-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/model-from-equations/tera-model-from-equations-drilldown.vue
@@ -7,7 +7,12 @@
 		@update-state="(state: any) => emit('update-state', state)"
 	>
 		<template #sidebar>
-			<tera-slider-panel v-model:is-open="isDocViewerOpen" header="Document Viewer" content-width="100%">
+			<tera-slider-panel
+				v-if="document"
+				v-model:is-open="isDocViewerOpen"
+				header="Document Viewer"
+				content-width="100%"
+			>
 				<template #content>
 					<tera-drilldown-section :is-loading="isFetchingPDF">
 						<tera-pdf-embed ref="pdfViewer" v-if="pdfLink" :pdf-link="pdfLink" :title="document?.name || ''" />
@@ -122,8 +127,17 @@
 			<tera-slider-panel v-model:is-open="isOutputOpen" header="Output" content-width="100%">
 				<template #content>
 					<tera-drilldown-preview>
-						<tera-model v-if="selectedModel" is-workflow :assetId="selectedModel.id" @on-save="onModelSaveEvent" />
-						<tera-operator-placeholder v-else :node="node" class="h-100" />
+						<tera-model
+							v-if="selectedModel"
+							is-workflow
+							is-save-for-reuse
+							:assetId="selectedModel.id"
+							@on-save="onModelSaveEvent"
+						/>
+						<tera-operator-placeholder v-else :node="node" class="h-100">
+							<p v-if="loadingModel">Model is being created...</p>
+							<p v-else>Select equations to create a model</p>
+						</tera-operator-placeholder>
 					</tera-drilldown-preview>
 				</template>
 			</tera-slider-panel>
@@ -155,9 +169,9 @@ import TeraSliderPanel from '@/components/widgets/tera-slider-panel.vue';
 import TeraDrilldownSection from '@/components/drilldown/tera-drilldown-section.vue';
 import TeraPdfEmbed from '@/components/widgets/tera-pdf-embed.vue';
 import TeraTextEditor from '@/components/documents/tera-text-editor.vue';
-import { ModelFromEquationsOperation, ModelFromEquationsState, EquationBlock } from './model-from-equations-operation';
+import { ModelFromEquationsState, EquationBlock } from './model-from-equations-operation';
 
-const emit = defineEmits(['close', 'update-state', 'append-output', 'select-output']);
+const emit = defineEmits(['close', 'update-state', 'append-output', 'update-output', 'select-output']);
 const props = defineProps<{
 	node: WorkflowNode<ModelFromEquationsState>;
 }>();
@@ -395,17 +409,12 @@ function getEquationErrorLabel(equation) {
 	return equation.asset.extractionError ? "Couldn't extract equation" : '';
 }
 
-function onModelSaveEvent(event: any) {
-	const state = cloneDeep(props.node.state);
-	state.modelId = event.id;
-	emit('update-state', state);
-	emit('append-output', {
-		type: ModelFromEquationsOperation.outputs[0].type,
-		label: event.header.name,
-		value: [event.id],
-		state,
-		isSelected: false
-	});
+function onModelSaveEvent(model: Model) {
+	if (!model) return;
+	const outputPort = cloneDeep(props.node.outputs?.find((port) => port.value?.[0] === model.id));
+	if (!outputPort) return;
+	outputPort.label = model.header.name;
+	emit('update-output', outputPort);
 }
 
 // generates the model card and fetches the model when finished
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
index f1900d8785..05e324dc63 100644
--- 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,7 +5,7 @@
 		@update-state="(state: any) => emit('update-state', state)"
 	>
 		<tera-drilldown-section>
-			<tera-model v-if="node.state.modelId" :asset-id="node.state.modelId" :is-workflow="true" @on-save="onSaveEvent" />
+			<tera-model v-if="node.state.modelId" :asset-id="node.state.modelId" is-workflow @on-save="onSaveEvent" />
 		</tera-drilldown-section>
 	</tera-drilldown>
 </template>
diff --git a/packages/client/hmi-client/src/components/workflow/ops/stratify-mira/tera-stratify-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/stratify-mira/tera-stratify-drilldown.vue
index 665868ea2b..1da493c103 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/stratify-mira/tera-stratify-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/stratify-mira/tera-stratify-drilldown.vue
@@ -81,7 +81,7 @@
 					:value="executeResponse.value"
 					:traceback="executeResponse.traceback"
 				/>
-				<tera-model v-else-if="outputAmr" is-workflow :assetId="outputAmr.id" @on-save="updateNode" />
+				<tera-model v-else-if="outputAmr" is-workflow is-save-for-reuse :assetId="outputAmr.id" @on-save="updateNode" />
 				<template v-else>
 					<tera-progress-spinner v-if="isStratifyInProgress" is-centered :font-size="2">
 						Processing...
@@ -429,15 +429,11 @@ const hasCodeChange = () => {
 const checkForCodeChange = debounce(hasCodeChange, 100);
 
 function updateNode(model: Model) {
-	const id = outputAmr.value?.id;
-	if (!id || !model) return;
-
+	if (!model) return;
 	outputAmr.value = model;
-	const outputPort = cloneDeep(props.node.outputs?.find((port) => port.value?.[0] === id));
-
+	const outputPort = cloneDeep(props.node.outputs?.find((port) => port.value?.[0] === model.id));
 	if (!outputPort) return;
 	outputPort.label = model.header.name;
-
 	emit('update-output', outputPort);
 }