From 2d9aed5dd045171c319b0023fee4acc2b4ec2a0d Mon Sep 17 00:00:00 2001
From: Tom Szendrey <T.Szendrey@hotmail.com>
Date: Wed, 28 Aug 2024 09:21:22 -0400
Subject: [PATCH] Model Edit append output on run (#4603)

---
 .../ops/model-edit/tera-model-edit-node.vue   | 16 +++++++---
 .../ops/model-edit/tera-model-edit.vue        | 32 +++++++------------
 2 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/model-edit/tera-model-edit-node.vue b/packages/client/hmi-client/src/components/workflow/ops/model-edit/tera-model-edit-node.vue
index ba4acd76bc..b02297bbc7 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/model-edit/tera-model-edit-node.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/model-edit/tera-model-edit-node.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUpdated, ref } from 'vue';
+import { ref, watch } from 'vue';
 import Button from 'primevue/button';
 import { WorkflowNode } from '@/types/workflow';
 import { ModelEditOperationState } from '@/components/workflow/ops/model-edit/model-edit-operation';
@@ -28,12 +28,20 @@ const props = defineProps<{
 }>();
 
 const model = ref<Model | null>(null);
-const updateModel = async () => {
+
+const fetchModel = async () => {
 	const modelId = operator.getActiveOutput(props.node)?.value?.[0];
 	if (modelId && modelId !== model?.value?.id) {
 		model.value = await getModel(modelId);
 	}
 };
-onMounted(updateModel);
-onUpdated(updateModel);
+
+// Updates output selection
+watch(
+	() => props.node.active,
+	async () => {
+		fetchModel();
+	},
+	{ immediate: true }
+);
 </script>
diff --git a/packages/client/hmi-client/src/components/workflow/ops/model-edit/tera-model-edit.vue b/packages/client/hmi-client/src/components/workflow/ops/model-edit/tera-model-edit.vue
index eb3541c3b2..2f1bb9363f 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/model-edit/tera-model-edit.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/model-edit/tera-model-edit.vue
@@ -5,7 +5,7 @@
 		:node="node"
 		:menu-items="menuItems"
 		@update:selection="onSelection"
-		@on-close-clicked="onDrilldownClose"
+		@on-close-clicked="emit('close')"
 		@update-state="(state: any) => emit('update-state', state)"
 		@update-output-port="(output: any) => emit('update-output-port', output)"
 	>
@@ -84,7 +84,6 @@ import Button from 'primevue/button';
 import { VAceEditor } from 'vue3-ace-editor';
 import { VAceEditorInstance } from 'vue3-ace-editor/types';
 import '@/ace-config';
-import { v4 as uuidv4 } from 'uuid';
 import type { Model } from '@/types/Types';
 import { AssetType } from '@/types/Types';
 import { createModel, getModel } from '@/services/model';
@@ -104,7 +103,8 @@ import { getModelIdFromModelConfigurationId } from '@/services/model-configurati
 import TeraSaveAssetModal from '@/components/project/tera-save-asset-modal.vue';
 import { saveCodeToState } from '@/services/notebook';
 import { DrilldownTabs } from '@/types/common';
-import { ModelEditOperationState } from './model-edit-operation';
+import { nodeOutputLabel } from '@/components/workflow/util';
+import { ModelEditOperationState, ModelEditOperation } from './model-edit-operation';
 
 const props = defineProps<{
 	node: WorkflowNode<ModelEditOperationState>;
@@ -135,7 +135,6 @@ const kernelManager = new KernelSessionManager();
 const amr = ref<Model | null>(null);
 let activeModelId: string | null = null;
 const showSaveModelModal = ref(false);
-let isDraft = false;
 
 let editor: VAceEditorInstance['_editor'] | null;
 const sampleAgentQuestions = [
@@ -202,7 +201,7 @@ const syncWithMiraModel = (data: any) => {
 	}
 	updatedModel.id = activeModelId;
 	amr.value = updatedModel;
-	isDraft = true;
+	createOutput(amr.value as Model);
 };
 
 // Reset model, then execute the code
@@ -261,7 +260,6 @@ const resetModel = () => {
 		.sendMessage('reset_request', {})
 		.register('reset_response', handleResetResponse)
 		.register('model_preview', syncWithMiraModel);
-	isDraft = false;
 };
 
 const handleResetResponse = (data: any) => {
@@ -286,27 +284,21 @@ function updateCodeState(code: string = codeText.value, hasCodeRun: boolean = tr
 	emit('update-state', state);
 }
 
-function onDrilldownClose() {
-	if (isDraft) {
-		// TODO: Prompt user to save draft
-	}
-	emit('close');
-}
-
 const createOutput = async (modelToSave: Model) => {
 	// If it's the original model, use that otherwise create a new one
 	const modelData = isReadyToCreateDefaultOutput.value ? modelToSave : await createModel(modelToSave);
 	if (!modelData) return;
 
+	const modelLabel = isReadyToCreateDefaultOutput.value
+		? (modelData.name as string)
+		: nodeOutputLabel(props.node, 'Output'); // Just label the original model with its name
+
 	emit('append-output', {
-		id: uuidv4(),
-		label: isReadyToCreateDefaultOutput.value ? modelData.name : `Output ${Date.now()}`, // Just label the original model with its name
-		type: 'modelId',
+		label: modelLabel,
+		type: ModelEditOperation.outputs[0].type,
 		state: cloneDeep(props.node.state),
 		value: [modelData.id]
 	});
-
-	isDraft = false;
 };
 
 const buildJupyterContext = () => {
@@ -353,13 +345,13 @@ const onSelection = (id: string) => {
 
 // Updates output selection
 watch(
-	() => [props.node.active],
+	() => props.node.active,
 	async () => {
 		// Update selected output
 		if (props.node.active) {
 			selectedOutputId.value = props.node.active;
 			activeOutput.value = props.node.outputs.find((d) => d.id === selectedOutputId.value) ?? null;
-			await handleOutputChange();
+			handleOutputChange();
 		}
 	},
 	{ immediate: true }