From c09cff7a4183a1fd80fc591256086731aa19c6a0 Mon Sep 17 00:00:00 2001
From: Yohann Paris <github@yohannparis.com>
Date: Mon, 30 Sep 2024 14:08:03 -0400
Subject: [PATCH 1/2] cleaning up

---
 .../tera-model-from-equations-drilldown.vue   | 69 +++++++------------
 1 file changed, 25 insertions(+), 44 deletions(-)

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 4320709210..f8e6fd90d3 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,6 +7,7 @@
 		@update-state="(state: any) => emit('update-state', state)"
 	>
 		<template #sidebar>
+			<!-- Document Viewer -->
 			<tera-slider-panel v-model:is-open="isDocViewerOpen" header="Document Viewer" content-width="100%">
 				<template #content>
 					<tera-drilldown-section :is-loading="isFetchingPDF">
@@ -15,7 +16,7 @@
 					</tera-drilldown-section>
 				</template>
 			</tera-slider-panel>
-
+			<!-- Input -->
 			<tera-slider-panel v-model:is-open="isInputOpen" header="Input" content-width="100%">
 				<template #content>
 					<header class="pb-2">
@@ -50,7 +51,7 @@
 										:is-toggleable="false"
 										:is-permitted="false"
 										:use-default-style="false"
-										:class="selectedItem === equation.name ? 'currenly-selected' : 'asset-panel'"
+										:class="selectedItem === equation.name ? 'currently-selected' : 'asset-panel'"
 									>
 										<section>
 											<Checkbox
@@ -90,7 +91,7 @@
 										:is-toggleable="false"
 										:is-permitted="false"
 										:use-default-style="false"
-										:class="selectedItem === equation.name ? 'currenly-selected' : 'asset-panel'"
+										:class="selectedItem === equation.name ? 'currently-selected' : 'asset-panel'"
 									>
 										<section>
 											<Checkbox
@@ -122,22 +123,11 @@
 					</Accordion>
 				</template>
 			</tera-slider-panel>
-
+			<!-- Output -->
 			<tera-slider-panel v-model:is-open="isOutputOpen" header="Output" content-width="100%">
 				<template #content>
-					<header class="flex align-items-center p-3">
-						<h4>Equation conversions</h4>
-						<Button
-							v-if="selectedModel"
-							label="Save for re-use"
-							outlined
-							severity="secondary"
-							class="ml-auto"
-							@click="showSaveModelModal = true"
-						/>
-					</header>
 					<tera-drilldown-preview>
-						<tera-model-description v-if="selectedModel" :model="selectedModel" :generating-card="isGeneratingCard" />
+						<tera-model v-if="selectedModel" :assetId="selectedModel.id" />
 						<tera-operator-placeholder v-else :node="node" style="height: 100%" />
 					</tera-drilldown-preview>
 				</template>
@@ -154,33 +144,32 @@
 </template>
 
 <script setup lang="ts">
+import { cloneDeep, isEmpty } from 'lodash';
+import { computed, onMounted, ref, watch } from 'vue';
 import Accordion from 'primevue/accordion';
 import AccordionTab from 'primevue/accordiontab';
-import { AssetBlock, WorkflowNode } from '@/types/workflow';
+import Button from 'primevue/button';
 import Checkbox from 'primevue/checkbox';
+import Textarea from 'primevue/textarea';
+import TeraAssetBlock from '@/components/widgets/tera-asset-block.vue';
 import TeraDrilldown from '@/components/drilldown/tera-drilldown.vue';
 import TeraDrilldownPreview from '@/components/drilldown/tera-drilldown-preview.vue';
-import TeraAssetBlock from '@/components/widgets/tera-asset-block.vue';
-import { computed, onMounted, ref, watch } from 'vue';
-import { downloadDocumentAsset, getDocumentAsset, getDocumentFileAsText } from '@/services/document-assets';
-import type { Card, DocumentAsset, DocumentExtraction, Model } from '@/types/Types';
-import { cloneDeep, isEmpty } from 'lodash';
-import { equationsToAMR, type EquationsToAMRRequest } from '@/services/knowledge';
-import Button from 'primevue/button';
-import { getModel, updateModel } from '@/services/model';
-import TeraOperatorPlaceholder from '@/components/operator/tera-operator-placeholder.vue';
-import { useProjects } from '@/composables/project';
-import TeraMathEditor from '@/components/mathml/tera-math-editor.vue';
-import Textarea from 'primevue/textarea';
+import TeraDrilldownSection from '@/components/drilldown/tera-drilldown-section.vue';
 import TeraInputText from '@/components/widgets/tera-input-text.vue';
+import TeraMathEditor from '@/components/mathml/tera-math-editor.vue';
+import TeraModel from '@/components/model/tera-model.vue';
+import TeraOperatorPlaceholder from '@/components/operator/tera-operator-placeholder.vue';
+import TeraPdfEmbed from '@/components/widgets/tera-pdf-embed.vue';
 import TeraSaveAssetModal from '@/components/project/tera-save-asset-modal.vue';
-import TeraModelDescription from '@/components/model/petrinet/tera-model-description.vue';
-import { modelCard } from '@/services/goLLM';
 import TeraSliderPanel from '@/components/widgets/tera-slider-panel.vue';
-
-import TeraPdfEmbed from '@/components/widgets/tera-pdf-embed.vue';
 import TeraTextEditor from '@/components/documents/tera-text-editor.vue';
-import TeraDrilldownSection from '@/components/drilldown/tera-drilldown-section.vue';
+import { AssetBlock, WorkflowNode } from '@/types/workflow';
+import type { Card, DocumentAsset, DocumentExtraction, Model } from '@/types/Types';
+import { equationsToAMR, type EquationsToAMRRequest } from '@/services/knowledge';
+import { downloadDocumentAsset, getDocumentAsset, getDocumentFileAsText } from '@/services/document-assets';
+import { modelCard } from '@/services/goLLM';
+import { getModel, updateModel } from '@/services/model';
+import { useProjects } from '@/composables/project';
 import { ModelFromEquationsState, EquationBlock } from './model-from-equations-operation';
 
 const emit = defineEmits(['close', 'update-state', 'append-output', 'select-output', 'update-output-port']);
@@ -188,20 +177,12 @@ const props = defineProps<{
 	node: WorkflowNode<ModelFromEquationsState>;
 }>();
 
-enum ModelFramework {
-	PetriNet = 'petrinet',
-	RegNet = 'regnet',
-	Decapode = 'decapode',
-	GeneralizedAMR = 'gamr',
-	MathExpressionTree = 'met'
-}
-
 const selectedOutputId = ref<string>('');
 
 const clonedState = ref<ModelFromEquationsState>({
 	equations: [],
 	text: '',
-	modelFramework: ModelFramework.PetriNet,
+	modelFramework: 'petrinet',
 	modelId: null
 });
 
@@ -450,7 +431,7 @@ watch(
 	border-radius: var(--border-radius-small);
 }
 
-.currenly-selected {
+.currently-selected {
 	padding-top: var(--gap-3);
 	border-radius: var(--border-radius-medium);
 	border: 1px solid var(--surface-border-light);

From 759e5722156b223de9d89d83626707399181a7d0 Mon Sep 17 00:00:00 2001
From: Yohann Paris <github@yohannparis.com>
Date: Mon, 30 Sep 2024 14:11:53 -0400
Subject: [PATCH 2/2] Update the output on model save

---
 .../tera-model-from-equations-drilldown.vue     | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

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 f8e6fd90d3..6a02187ee5 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
@@ -127,7 +127,7 @@
 			<tera-slider-panel v-model:is-open="isOutputOpen" header="Output" content-width="100%">
 				<template #content>
 					<tera-drilldown-preview>
-						<tera-model v-if="selectedModel" :assetId="selectedModel.id" />
+						<tera-model v-if="selectedModel" :assetId="selectedModel.id" @on-save="onModelSaveEvent" />
 						<tera-operator-placeholder v-else :node="node" style="height: 100%" />
 					</tera-drilldown-preview>
 				</template>
@@ -170,7 +170,7 @@ import { downloadDocumentAsset, getDocumentAsset, getDocumentFileAsText } from '
 import { modelCard } from '@/services/goLLM';
 import { getModel, updateModel } from '@/services/model';
 import { useProjects } from '@/composables/project';
-import { ModelFromEquationsState, EquationBlock } from './model-from-equations-operation';
+import { ModelFromEquationsOperation, ModelFromEquationsState, EquationBlock } from './model-from-equations-operation';
 
 const emit = defineEmits(['close', 'update-state', 'append-output', 'select-output', 'update-output-port']);
 const props = defineProps<{
@@ -383,6 +383,19 @@ 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
+	});
+}
+
 // generates the model card and fetches the model when finished
 async function generateCard(modelId: string, docId: string) {
 	isGeneratingCard.value = true;