From 8982e3ded58adc48dbaa86e57c190de643f36533 Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Tue, 20 Aug 2024 12:33:52 -0400
Subject: [PATCH 1/8] save overview in state

---
 .../model-comparison-operation.ts             |  2 +
 .../tera-model-comparison.vue                 | 37 +++++++++++--------
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/model-comparison/model-comparison-operation.ts b/packages/client/hmi-client/src/components/workflow/ops/model-comparison/model-comparison-operation.ts
index 4f6f99d61d..f3825975d7 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/model-comparison/model-comparison-operation.ts
+++ b/packages/client/hmi-client/src/components/workflow/ops/model-comparison/model-comparison-operation.ts
@@ -5,6 +5,7 @@ const DOCUMENTATION_URL =
 	'https://githubicom/gyorilab/mira/blob/7314765ab409ddc9647269ad2381055f1cd67706/notebooks/hackathon_2023.10/dkg_grounding_model_comparison.ipynb#L307';
 
 export interface ModelComparisonOperationState extends BaseState {
+	overview: string;
 	notebookHistory: NotebookHistory[];
 	hasCodeRun: boolean;
 	comparisonImageIds: string[];
@@ -24,6 +25,7 @@ export const ModelComparisonOperation: Operation = {
 	action: () => {},
 	initState: () => {
 		const init: ModelComparisonOperationState = {
+			overview: '',
 			notebookHistory: [],
 			hasCodeRun: false,
 			comparisonImageIds: []
diff --git a/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison.vue b/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison.vue
index e6f8dda506..de1c71335a 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison.vue
@@ -10,8 +10,10 @@
 				<section class="comparison-overview">
 					<Accordion :activeIndex="0">
 						<AccordionTab header="Overview">
-							<p v-if="llmAnswer">{{ llmAnswer }}</p>
-							<p v-else class="subdued">Analyzing models metadata to generate a detailed comparison analysis...</p>
+							<p v-if="isEmpty(node.state.overview)" class="subdued">
+								Analyzing models metadata to generate a detailed comparison analysis...
+							</p>
+							<p v-else>{{ node.state.overview }}</p>
 						</AccordionTab>
 					</Accordion>
 				</section>
@@ -137,7 +139,7 @@ import { ClientEvent, ClientEventType, TaskResponse, TaskStatus, type Model } fr
 import { WorkflowNode, WorkflowPortStatus } from '@/types/workflow';
 import { logger } from '@/utils/logger';
 import Button from 'primevue/button';
-import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 import { VAceEditor } from 'vue3-ace-editor';
 import { VAceEditorInstance } from 'vue3-ace-editor/types';
 
@@ -179,20 +181,13 @@ const fields = ref<string[]>([]);
 
 const isLoadingStructuralComparisons = ref(false);
 const structuralComparisons = ref<string[]>([]);
-const compareModelsTaskId = ref<string>('');
-const compareModelsTaskOutput = ref<string>('');
+let compareModelsTaskId = '';
+let compareModelsTaskOutput = '';
 const code = ref(props.node.state.notebookHistory?.[0]?.code ?? '');
 const llmThoughts = ref<any[]>([]);
 const isKernelReady = ref(false);
 const contextLanguage = ref<string>('python3');
 
-const llmAnswer = computed(() => {
-	if (!compareModelsTaskOutput.value) return '';
-	const str = b64DecodeUnicode(compareModelsTaskOutput.value);
-	const parsedValue = JSON.parse(str) as CompareModelsResponseType;
-	return parsedValue.response;
-});
-
 const initializeAceEditor = (editorInstance: any) => {
 	editor = editorInstance;
 };
@@ -294,16 +289,26 @@ async function buildJupyterContext() {
 
 async function processCompareModels(modelIds, workflowId?: string, nodeId?: string) {
 	const taskRes = await compareModels(modelIds, workflowId, nodeId);
-	compareModelsTaskId.value = taskRes.id;
+	compareModelsTaskId = taskRes.id;
 	if (taskRes.status === TaskStatus.Success) {
-		compareModelsTaskOutput.value = taskRes.output;
+		compareModelsTaskOutput = taskRes.output;
 	}
 }
 
+function generateOverview() {
+	if (!compareModelsTaskOutput || !isEmpty(props.node.state.overview)) return;
+	const str = b64DecodeUnicode(compareModelsTaskOutput);
+	const parsedValue = JSON.parse(str) as CompareModelsResponseType;
+	const state = cloneDeep(props.node.state);
+	state.overview = parsedValue.response;
+	emit('update-state', state);
+}
+
 useClientEvent(ClientEventType.TaskGollmCompareModel, (event: ClientEvent<TaskResponse>) => {
-	if (!event.data || event.data.id !== compareModelsTaskId.value) return;
+	if (!event.data || event.data.id !== compareModelsTaskId) return;
 	if (event.data.status !== TaskStatus.Success) return;
-	compareModelsTaskOutput.value = event.data.output;
+	compareModelsTaskOutput = event.data.output;
+	generateOverview();
 });
 
 onMounted(async () => {

From ac8b64ba8e5247882f64ac146f70ce9931c445d2 Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Tue, 20 Aug 2024 13:04:11 -0400
Subject: [PATCH 2/8] custom status update since this has no output

---
 .../model-comparison/tera-model-comparison-node.vue  | 12 +++++++++---
 .../ops/model-comparison/tera-model-comparison.vue   |  1 +
 .../src/components/workflow/tera-workflow.vue        |  3 ++-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison-node.vue b/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison-node.vue
index 292a2ca4da..0753db89d3 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison-node.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison-node.vue
@@ -9,16 +9,22 @@
 import { watch, computed } from 'vue';
 import Button from 'primevue/button';
 import TeraOperatorPlaceholder from '@/components/operator/tera-operator-placeholder.vue';
-import { WorkflowNode, WorkflowPortStatus } from '@/types/workflow';
+import { WorkflowNode, WorkflowPortStatus, OperatorStatus } from '@/types/workflow';
 import { ModelComparisonOperationState } from './model-comparison-operation';
 
-const emit = defineEmits(['append-input-port', 'open-drilldown']);
+const emit = defineEmits(['append-input-port', 'open-drilldown', 'update-status']);
 
 const props = defineProps<{
 	node: WorkflowNode<ModelComparisonOperationState>;
 }>();
 
-const hasAtLeastTwoValues = computed(() => props.node.inputs.filter((input) => input.value).length >= 2);
+const hasAtLeastTwoValues = computed(() => {
+	const flag = props.node.inputs.filter((input) => input.value).length >= 2;
+	// This is a custom way of granting a success status to the operator, since it has no output
+	if (flag) emit('update-status', OperatorStatus.SUCCESS);
+	else emit('update-status', OperatorStatus.INVALID);
+	return flag;
+});
 
 watch(
 	() => props.node.inputs,
diff --git a/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison.vue b/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison.vue
index de1c71335a..7f14cb08e5 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison.vue
@@ -296,6 +296,7 @@ async function processCompareModels(modelIds, workflowId?: string, nodeId?: stri
 }
 
 function generateOverview() {
+	// Generate if there is no overview and the comparison task has been completed
 	if (!compareModelsTaskOutput || !isEmpty(props.node.state.overview)) return;
 	const str = b64DecodeUnicode(compareModelsTaskOutput);
 	const parsedValue = JSON.parse(str) as CompareModelsResponseType;
diff --git a/packages/client/hmi-client/src/components/workflow/tera-workflow.vue b/packages/client/hmi-client/src/components/workflow/tera-workflow.vue
index 51cddf09a9..33e7d71bbb 100644
--- a/packages/client/hmi-client/src/components/workflow/tera-workflow.vue
+++ b/packages/client/hmi-client/src/components/workflow/tera-workflow.vue
@@ -88,6 +88,7 @@
 							@append-output="(event: any) => appendOutput(node, event)"
 							@append-input-port="(event: any) => appendInputPort(node, event)"
 							@update-state="(event: any) => updateWorkflowNodeState(node, event)"
+							@update-status="(status: OperatorStatus) => updateWorkflowNodeStatus(currentActiveNode, status)"
 							@open-drilldown="addOperatorToRoute(node.id)"
 						/>
 					</template>
@@ -158,7 +159,7 @@
 			:spawn-animation="drilldownSpawnAnimation"
 			@append-output="(event: any) => appendOutput(currentActiveNode, event)"
 			@update-state="(event: any) => updateWorkflowNodeState(currentActiveNode, event)"
-			@update-status="(event: any) => updateWorkflowNodeStatus(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)"

From 22dc52ea282a1ed7e88add75d27216d666191a53 Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Tue, 20 Aug 2024 13:14:18 -0400
Subject: [PATCH 3/8] fix emit

---
 .../ops/model-comparison/tera-model-comparison-node.vue       | 4 ++--
 .../hmi-client/src/components/workflow/tera-workflow.vue      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison-node.vue b/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison-node.vue
index 0753db89d3..8b1c286151 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison-node.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison-node.vue
@@ -20,8 +20,8 @@ const props = defineProps<{
 
 const hasAtLeastTwoValues = computed(() => {
 	const flag = props.node.inputs.filter((input) => input.value).length >= 2;
-	// This is a custom way of granting a success status to the operator, since it has no output
-	if (flag) emit('update-status', OperatorStatus.SUCCESS);
+	// This is a custom way of granting a default status to the operator, since it has no output
+	if (flag) emit('update-status', OperatorStatus.DEFAULT);
 	else emit('update-status', OperatorStatus.INVALID);
 	return flag;
 });
diff --git a/packages/client/hmi-client/src/components/workflow/tera-workflow.vue b/packages/client/hmi-client/src/components/workflow/tera-workflow.vue
index 33e7d71bbb..25d4110f87 100644
--- a/packages/client/hmi-client/src/components/workflow/tera-workflow.vue
+++ b/packages/client/hmi-client/src/components/workflow/tera-workflow.vue
@@ -88,7 +88,7 @@
 							@append-output="(event: any) => appendOutput(node, event)"
 							@append-input-port="(event: any) => appendInputPort(node, event)"
 							@update-state="(event: any) => updateWorkflowNodeState(node, event)"
-							@update-status="(status: OperatorStatus) => updateWorkflowNodeStatus(currentActiveNode, status)"
+							@update-status="(status: OperatorStatus) => updateWorkflowNodeStatus(node, status)"
 							@open-drilldown="addOperatorToRoute(node.id)"
 						/>
 					</template>

From f91e51f14a69b38ee2eceaef118b902786342045 Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Tue, 20 Aug 2024 13:45:01 -0400
Subject: [PATCH 4/8] markdown render compoennt

---
 packages/client/hmi-client/package.json       |  2 +
 .../tera-model-comparison.vue                 |  7 +-
 yarn.lock                                     | 82 +++++++++++++++++++
 3 files changed, 88 insertions(+), 3 deletions(-)

diff --git a/packages/client/hmi-client/package.json b/packages/client/hmi-client/package.json
index 875f8de3e6..a59176780d 100644
--- a/packages/client/hmi-client/package.json
+++ b/packages/client/hmi-client/package.json
@@ -73,6 +73,7 @@
 		"vue": "3.3.13",
 		"vue-feather": "2.0.0",
 		"vue-gtag": "2.0.1",
+		"vue-markdown-render": "^2.2.1",
 		"vue-router": "4.2.5",
 		"vue3-ace-editor": "2.2.4",
 		"vue3-draggable-resizable": "1.6.5",
@@ -84,6 +85,7 @@
 		"@rushstack/eslint-patch": "1.10.4",
 		"@types/d3": "7.4.3",
 		"@types/lodash": "4.17.7",
+		"@types/markdown-it": "^14.1.2",
 		"@types/node": "18.19.3",
 		"@vitejs/plugin-vue": "4.6.2",
 		"@vitest/coverage-c8": "0.24.5",
diff --git a/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison.vue b/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison.vue
index 7f14cb08e5..625c50a3d7 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison.vue
@@ -13,7 +13,7 @@
 							<p v-if="isEmpty(node.state.overview)" class="subdued">
 								Analyzing models metadata to generate a detailed comparison analysis...
 							</p>
-							<p v-else>{{ node.state.overview }}</p>
+							<vue-markdown v-else :source="node.state.overview" />
 						</AccordionTab>
 					</Accordion>
 				</section>
@@ -126,6 +126,7 @@
 <script setup lang="ts">
 import { isEmpty, cloneDeep } from 'lodash';
 import { v4 as uuidv4 } from 'uuid';
+import VueMarkdown from 'vue-markdown-render';
 import Accordion from 'primevue/accordion';
 import AccordionTab from 'primevue/accordiontab';
 import TeraDrilldownSection from '@/components/drilldown/tera-drilldown-section.vue';
@@ -174,6 +175,8 @@ const sampleAgentQuestions = [
 	'Compare the three models and visualize and display them.',
 	'Compare the two models and visualize and display them.'
 ];
+let compareModelsTaskId = '';
+let compareModelsTaskOutput = '';
 
 const modelsToCompare = ref<Model[]>([]);
 const modelCardsToCompare = ref<any[]>([]);
@@ -181,8 +184,6 @@ const fields = ref<string[]>([]);
 
 const isLoadingStructuralComparisons = ref(false);
 const structuralComparisons = ref<string[]>([]);
-let compareModelsTaskId = '';
-let compareModelsTaskOutput = '';
 const code = ref(props.node.state.notebookHistory?.[0]?.code ?? '');
 const llmThoughts = ref<any[]>([]);
 const isKernelReady = ref(false);
diff --git a/yarn.lock b/yarn.lock
index 6c3fd9ed66..94b7696c47 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3335,6 +3335,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/linkify-it@npm:^5":
+  version: 5.0.0
+  resolution: "@types/linkify-it@npm:5.0.0"
+  checksum: 10/c3919044d4876f9d71d037e861745cd2485c95ac8c36a4fa67b132d4e60eb1d067e123cc7965c9cf5110eea351517d767f0d306af5e9147d6d0af87bc374ddcf
+  languageName: node
+  linkType: hard
+
 "@types/lodash@npm:4.17.7":
   version: 4.17.7
   resolution: "@types/lodash@npm:4.17.7"
@@ -3342,6 +3349,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/markdown-it@npm:^14.1.2":
+  version: 14.1.2
+  resolution: "@types/markdown-it@npm:14.1.2"
+  dependencies:
+    "@types/linkify-it": "npm:^5"
+    "@types/mdurl": "npm:^2"
+  checksum: 10/ca2f239c8d59610b9f936fd40261a6ccf2fa1ae27a21816c031e5712542dcf9ee01e2fe29b31118df90716e11ade54e47d92a498e9b6488800e77ca8827255a2
+  languageName: node
+  linkType: hard
+
+"@types/mdurl@npm:^2":
+  version: 2.0.0
+  resolution: "@types/mdurl@npm:2.0.0"
+  checksum: 10/78746e96c655ceed63db06382da466fd52c7e9dc54d60b12973dfdd110cae06b9439c4b90e17bb8d4461109184b3ea9f3e9f96b3e4bf4aa9fe18b6ac35f283c8
+  languageName: node
+  linkType: hard
+
 "@types/node@npm:*":
   version: 20.12.12
   resolution: "@types/node@npm:20.12.12"
@@ -6481,6 +6505,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"entities@npm:~3.0.1":
+  version: 3.0.1
+  resolution: "entities@npm:3.0.1"
+  checksum: 10/3706e0292ea3f3679720b3d3b1ed6290b164aaeb11116691a922a3acea144503871e0de2170b47671c3b735549b8b7f4741d0d3c2987e8f985ccaa0dd3762eba
+  languageName: node
+  linkType: hard
+
 "env-paths@npm:^2.2.0":
   version: 2.2.1
   resolution: "env-paths@npm:2.2.1"
@@ -8794,6 +8825,7 @@ __metadata:
     "@rushstack/eslint-patch": "npm:1.10.4"
     "@types/d3": "npm:7.4.3"
     "@types/lodash": "npm:4.17.7"
+    "@types/markdown-it": "npm:^14.1.2"
     "@types/node": "npm:18.19.3"
     "@uncharted.software/design-tokens": "npm:1.1.0"
     "@uncharted.software/facets-core": "npm:3.2.6"
@@ -8841,6 +8873,7 @@ __metadata:
     vue: "npm:3.3.13"
     vue-feather: "npm:2.0.0"
     vue-gtag: "npm:2.0.1"
+    vue-markdown-render: "npm:^2.2.1"
     vue-router: "npm:4.2.5"
     vue-tsc: "npm:1.8.27"
     vue3-ace-editor: "npm:2.2.4"
@@ -10779,6 +10812,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"linkify-it@npm:^4.0.1":
+  version: 4.0.1
+  resolution: "linkify-it@npm:4.0.1"
+  dependencies:
+    uc.micro: "npm:^1.0.1"
+  checksum: 10/d0a786d2e3f02f46b6f4a9b466af9eb936fb68e86b7cd305933d5457b12fdc53a4d0e0b697b02dc2e7d84a51d2425d719598bb7b47af7e01911e492e07a97957
+  languageName: node
+  linkType: hard
+
 "lint-staged@npm:15.2.8":
   version: 15.2.8
   resolution: "lint-staged@npm:15.2.8"
@@ -11069,6 +11111,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"markdown-it@npm:^13.0.2":
+  version: 13.0.2
+  resolution: "markdown-it@npm:13.0.2"
+  dependencies:
+    argparse: "npm:^2.0.1"
+    entities: "npm:~3.0.1"
+    linkify-it: "npm:^4.0.1"
+    mdurl: "npm:^1.0.1"
+    uc.micro: "npm:^1.0.5"
+  bin:
+    markdown-it: bin/markdown-it.js
+  checksum: 10/4f48271bbd44d16502efd4148d7c05ca1fb4b50719a07d34c91e8d16f8d065c558fed0fafe07cd13ca5958096bfe295b37cd4f042add7ec49f73c70154e75f58
+  languageName: node
+  linkType: hard
+
 "marked@npm:^4.0.17":
   version: 4.3.0
   resolution: "marked@npm:4.3.0"
@@ -11125,6 +11182,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdurl@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "mdurl@npm:1.0.1"
+  checksum: 10/ada367d01c9e81d07328101f187d5bd8641b71f33eab075df4caed935a24fa679e625f07108801d8250a5e4a99e5cd4be7679957a11424a3aa3e740d2bb2d5cb
+  languageName: node
+  linkType: hard
+
 "memorystream@npm:^0.3.1":
   version: 0.3.1
   resolution: "memorystream@npm:0.3.1"
@@ -14480,6 +14544,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"uc.micro@npm:^1.0.1, uc.micro@npm:^1.0.5":
+  version: 1.0.6
+  resolution: "uc.micro@npm:1.0.6"
+  checksum: 10/6898bb556319a38e9cf175e3628689347bd26fec15fc6b29fa38e0045af63075ff3fea4cf1fdba9db46c9f0cbf07f2348cd8844889dd31ebd288c29fe0d27e7a
+  languageName: node
+  linkType: hard
+
 "unbox-primitive@npm:^1.0.2":
   version: 1.0.2
   resolution: "unbox-primitive@npm:1.0.2"
@@ -15434,6 +15505,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vue-markdown-render@npm:^2.2.1":
+  version: 2.2.1
+  resolution: "vue-markdown-render@npm:2.2.1"
+  dependencies:
+    markdown-it: "npm:^13.0.2"
+  peerDependencies:
+    vue: ^3.3.4
+  checksum: 10/c102693eb5893b6439c4aaf1e90508b83e9abc07bc8570be7fa45238ae0784be5946bc0321ae53ea7e839bfe941cda1ff7595eb1d6b79ab84dbab4c74c918f3e
+  languageName: node
+  linkType: hard
+
 "vue-router@npm:4.2.5":
   version: 4.2.5
   resolution: "vue-router@npm:4.2.5"

From 5e32addffd591869ad6b9019e547662738945342 Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Wed, 21 Aug 2024 13:29:00 -0400
Subject: [PATCH 5/8] save base64 text

---
 .../model-comparison-operation.ts             |  4 +--
 .../tera-model-comparison-node.vue            | 10 ++----
 .../tera-model-comparison.vue                 | 35 +++++++++++++------
 3 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/model-comparison/model-comparison-operation.ts b/packages/client/hmi-client/src/components/workflow/ops/model-comparison/model-comparison-operation.ts
index f3825975d7..3096bd717b 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/model-comparison/model-comparison-operation.ts
+++ b/packages/client/hmi-client/src/components/workflow/ops/model-comparison/model-comparison-operation.ts
@@ -5,7 +5,7 @@ const DOCUMENTATION_URL =
 	'https://githubicom/gyorilab/mira/blob/7314765ab409ddc9647269ad2381055f1cd67706/notebooks/hackathon_2023.10/dkg_grounding_model_comparison.ipynb#L307';
 
 export interface ModelComparisonOperationState extends BaseState {
-	overview: string;
+	overviewId: string | null;
 	notebookHistory: NotebookHistory[];
 	hasCodeRun: boolean;
 	comparisonImageIds: string[];
@@ -25,7 +25,7 @@ export const ModelComparisonOperation: Operation = {
 	action: () => {},
 	initState: () => {
 		const init: ModelComparisonOperationState = {
-			overview: '',
+			overviewId: null,
 			notebookHistory: [],
 			hasCodeRun: false,
 			comparisonImageIds: []
diff --git a/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison-node.vue b/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison-node.vue
index 8b1c286151..4482478632 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison-node.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison-node.vue
@@ -9,7 +9,7 @@
 import { watch, computed } from 'vue';
 import Button from 'primevue/button';
 import TeraOperatorPlaceholder from '@/components/operator/tera-operator-placeholder.vue';
-import { WorkflowNode, WorkflowPortStatus, OperatorStatus } from '@/types/workflow';
+import { WorkflowNode, WorkflowPortStatus } from '@/types/workflow';
 import { ModelComparisonOperationState } from './model-comparison-operation';
 
 const emit = defineEmits(['append-input-port', 'open-drilldown', 'update-status']);
@@ -18,13 +18,7 @@ const props = defineProps<{
 	node: WorkflowNode<ModelComparisonOperationState>;
 }>();
 
-const hasAtLeastTwoValues = computed(() => {
-	const flag = props.node.inputs.filter((input) => input.value).length >= 2;
-	// This is a custom way of granting a default status to the operator, since it has no output
-	if (flag) emit('update-status', OperatorStatus.DEFAULT);
-	else emit('update-status', OperatorStatus.INVALID);
-	return flag;
-});
+const hasAtLeastTwoValues = computed(() => props.node.inputs.filter((input) => input.value).length >= 2);
 
 watch(
 	() => props.node.inputs,
diff --git a/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison.vue b/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison.vue
index 625c50a3d7..b5d4df58b7 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison.vue
@@ -10,10 +10,10 @@
 				<section class="comparison-overview">
 					<Accordion :activeIndex="0">
 						<AccordionTab header="Overview">
-							<p v-if="isEmpty(node.state.overview)" class="subdued">
+							<p v-if="isEmpty(overview)" class="subdued">
 								Analyzing models metadata to generate a detailed comparison analysis...
 							</p>
-							<vue-markdown v-else :source="node.state.overview" />
+							<vue-markdown v-else :source="overview" />
 						</AccordionTab>
 					</Accordion>
 				</section>
@@ -137,7 +137,7 @@ import { compareModels } from '@/services/goLLM';
 import { KernelSessionManager } from '@/services/jupyter';
 import { getModel } from '@/services/model';
 import { ClientEvent, ClientEventType, TaskResponse, TaskStatus, type Model } from '@/types/Types';
-import { WorkflowNode, WorkflowPortStatus } from '@/types/workflow';
+import { OperatorStatus, WorkflowNode, WorkflowPortStatus } from '@/types/workflow';
 import { logger } from '@/utils/logger';
 import Button from 'primevue/button';
 import { onMounted, onUnmounted, ref } from 'vue';
@@ -150,18 +150,17 @@ import TeraProgressSpinner from '@/components/widgets/tera-progress-spinner.vue'
 import teraNotebookJupyterThoughtOutput from '@/components/llm/tera-notebook-jupyter-thought-output.vue';
 
 import { saveCodeToState } from '@/services/notebook';
-import { getImages, addImage, deleteImages } from '@/services/image';
+import { getImage, getImages, addImage, deleteImages } from '@/services/image';
 import TeraColumnarPanel from '@/components/widgets/tera-columnar-panel.vue';
 import { b64DecodeUnicode } from '@/utils/binary';
 import { useClientEvent } from '@/composables/useClientEvent';
-import { CompareModelsResponseType } from '@/types/common';
 import { ModelComparisonOperationState } from './model-comparison-operation';
 
 const props = defineProps<{
 	node: WorkflowNode<ModelComparisonOperationState>;
 }>();
 
-const emit = defineEmits(['update-state', 'close']);
+const emit = defineEmits(['update-state', 'update-status', 'close']);
 
 enum Tabs {
 	Wizard = 'Wizard',
@@ -183,6 +182,7 @@ const modelCardsToCompare = ref<any[]>([]);
 const fields = ref<string[]>([]);
 
 const isLoadingStructuralComparisons = ref(false);
+const overview = ref<string | null>(null);
 const structuralComparisons = ref<string[]>([]);
 const code = ref(props.node.state.notebookHistory?.[0]?.code ?? '');
 const llmThoughts = ref<any[]>([]);
@@ -296,14 +296,21 @@ async function processCompareModels(modelIds, workflowId?: string, nodeId?: stri
 	}
 }
 
-function generateOverview() {
+function assignOverview(b64overview: string) {
+	overview.value = JSON.parse(b64DecodeUnicode(b64overview)).response;
+}
+
+async function generateOverview() {
 	// Generate if there is no overview and the comparison task has been completed
-	if (!compareModelsTaskOutput || !isEmpty(props.node.state.overview)) return;
-	const str = b64DecodeUnicode(compareModelsTaskOutput);
-	const parsedValue = JSON.parse(str) as CompareModelsResponseType;
+	if (!compareModelsTaskOutput || props.node.state.overviewId) return;
+	const newOverviewId = uuidv4();
+	console.log(newOverviewId);
+	addImage(newOverviewId, `data:text/plain;base64,${compareModelsTaskOutput}`);
+	assignOverview(compareModelsTaskOutput);
 	const state = cloneDeep(props.node.state);
-	state.overview = parsedValue.response;
+	state.overviewId = newOverviewId;
 	emit('update-state', state);
+	emit('update-status', OperatorStatus.DEFAULT); // This is a custom way of granting a default status to the operator, since it has no output
 }
 
 useClientEvent(ClientEventType.TaskGollmCompareModel, (event: ClientEvent<TaskResponse>) => {
@@ -319,6 +326,12 @@ onMounted(async () => {
 		structuralComparisons.value = await getImages(props.node.state.comparisonImageIds);
 		isLoadingStructuralComparisons.value = false;
 	}
+	if (props.node.state.overviewId) {
+		const b64overview = await getImage(props.node.state.overviewId);
+		console.log('overview', props.node.state.overviewId);
+		console.log(b64overview);
+		// if (b64overview) assignOverview(b64overview.split(',').slice(1).join(','));
+	}
 
 	const modelIds: string[] = props.node.inputs
 		.filter((input) => input.status === WorkflowPortStatus.CONNECTED)

From 0c73911a737a8fd69bade2984273e6e7054deb66 Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Wed, 21 Aug 2024 13:41:47 -0400
Subject: [PATCH 6/8] dont pass status update to node

---
 .../ops/model-comparison/tera-model-comparison-node.vue         | 2 +-
 .../client/hmi-client/src/components/workflow/tera-workflow.vue | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison-node.vue b/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison-node.vue
index 4482478632..292a2ca4da 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison-node.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison-node.vue
@@ -12,7 +12,7 @@ import TeraOperatorPlaceholder from '@/components/operator/tera-operator-placeho
 import { WorkflowNode, WorkflowPortStatus } from '@/types/workflow';
 import { ModelComparisonOperationState } from './model-comparison-operation';
 
-const emit = defineEmits(['append-input-port', 'open-drilldown', 'update-status']);
+const emit = defineEmits(['append-input-port', 'open-drilldown']);
 
 const props = defineProps<{
 	node: WorkflowNode<ModelComparisonOperationState>;
diff --git a/packages/client/hmi-client/src/components/workflow/tera-workflow.vue b/packages/client/hmi-client/src/components/workflow/tera-workflow.vue
index c5aa3a1790..4bba97ec8f 100644
--- a/packages/client/hmi-client/src/components/workflow/tera-workflow.vue
+++ b/packages/client/hmi-client/src/components/workflow/tera-workflow.vue
@@ -88,7 +88,6 @@
 							@append-output="(event: any) => appendOutput(node, event)"
 							@append-input-port="(event: any) => appendInputPort(node, event)"
 							@update-state="(event: any) => updateWorkflowNodeState(node, event)"
-							@update-status="(status: OperatorStatus) => updateWorkflowNodeStatus(node, status)"
 							@open-drilldown="addOperatorToRoute(node.id)"
 						/>
 					</template>

From 8a21d6ca8eb1732134c9869d6e4659363acc87b1 Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Wed, 21 Aug 2024 14:14:45 -0400
Subject: [PATCH 7/8] worry about saving to backend later

---
 .../tera-model-comparison.vue                 | 20 +++++++------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison.vue b/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison.vue
index b5d4df58b7..916f9b19b7 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison.vue
@@ -150,7 +150,7 @@ import TeraProgressSpinner from '@/components/widgets/tera-progress-spinner.vue'
 import teraNotebookJupyterThoughtOutput from '@/components/llm/tera-notebook-jupyter-thought-output.vue';
 
 import { saveCodeToState } from '@/services/notebook';
-import { getImage, getImages, addImage, deleteImages } from '@/services/image';
+import { getImages, addImage, deleteImages } from '@/services/image';
 import TeraColumnarPanel from '@/components/widgets/tera-columnar-panel.vue';
 import { b64DecodeUnicode } from '@/utils/binary';
 import { useClientEvent } from '@/composables/useClientEvent';
@@ -303,13 +303,11 @@ function assignOverview(b64overview: string) {
 async function generateOverview() {
 	// Generate if there is no overview and the comparison task has been completed
 	if (!compareModelsTaskOutput || props.node.state.overviewId) return;
-	const newOverviewId = uuidv4();
-	console.log(newOverviewId);
-	addImage(newOverviewId, `data:text/plain;base64,${compareModelsTaskOutput}`);
+	// const newOverviewId = uuidv4(); // TODO: Save overview to S3
 	assignOverview(compareModelsTaskOutput);
-	const state = cloneDeep(props.node.state);
-	state.overviewId = newOverviewId;
-	emit('update-state', state);
+	// const state = cloneDeep(props.node.state);
+	// state.overviewId = newOverviewId;
+	// emit('update-state', state);
 	emit('update-status', OperatorStatus.DEFAULT); // This is a custom way of granting a default status to the operator, since it has no output
 }
 
@@ -326,12 +324,8 @@ onMounted(async () => {
 		structuralComparisons.value = await getImages(props.node.state.comparisonImageIds);
 		isLoadingStructuralComparisons.value = false;
 	}
-	if (props.node.state.overviewId) {
-		const b64overview = await getImage(props.node.state.overviewId);
-		console.log('overview', props.node.state.overviewId);
-		console.log(b64overview);
-		// if (b64overview) assignOverview(b64overview.split(',').slice(1).join(','));
-	}
+	// TODO: Get text from S3
+	// if (props.node.state.overviewId)
 
 	const modelIds: string[] = props.node.inputs
 		.filter((input) => input.status === WorkflowPortStatus.CONNECTED)

From 6d295c7c6a023f21530c016906d38f36aafd5612 Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Wed, 21 Aug 2024 14:52:10 -0400
Subject: [PATCH 8/8] just use markdown-it

---
 packages/client/hmi-client/package.json       |  2 +-
 .../tera-model-comparison.vue                 |  6 +-
 yarn.lock                                     | 72 ++++++++-----------
 3 files changed, 35 insertions(+), 45 deletions(-)

diff --git a/packages/client/hmi-client/package.json b/packages/client/hmi-client/package.json
index ac59c154c1..e700ffa484 100644
--- a/packages/client/hmi-client/package.json
+++ b/packages/client/hmi-client/package.json
@@ -54,6 +54,7 @@
 		"graph-scaffolder": "*",
 		"katex": "0.16.11",
 		"lodash": "4.17.21",
+		"markdown-it": "^14.1.0",
 		"mathlive": "0.89.2",
 		"mathml-to-latex": "1.2.0",
 		"oidc-spa": "4.6.2",
@@ -73,7 +74,6 @@
 		"vue": "3.3.13",
 		"vue-feather": "2.0.0",
 		"vue-gtag": "2.0.1",
-		"vue-markdown-render": "^2.2.1",
 		"vue-router": "4.2.5",
 		"vue3-ace-editor": "2.2.4",
 		"vue3-draggable-resizable": "1.6.5",
diff --git a/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison.vue b/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison.vue
index 916f9b19b7..257bd01f89 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison.vue
@@ -13,7 +13,7 @@
 							<p v-if="isEmpty(overview)" class="subdued">
 								Analyzing models metadata to generate a detailed comparison analysis...
 							</p>
-							<vue-markdown v-else :source="overview" />
+							<p v-html="overview" v-else />
 						</AccordionTab>
 					</Accordion>
 				</section>
@@ -126,7 +126,7 @@
 <script setup lang="ts">
 import { isEmpty, cloneDeep } from 'lodash';
 import { v4 as uuidv4 } from 'uuid';
-import VueMarkdown from 'vue-markdown-render';
+import markdownit from 'markdown-it';
 import Accordion from 'primevue/accordion';
 import AccordionTab from 'primevue/accordiontab';
 import TeraDrilldownSection from '@/components/drilldown/tera-drilldown-section.vue';
@@ -297,7 +297,7 @@ async function processCompareModels(modelIds, workflowId?: string, nodeId?: stri
 }
 
 function assignOverview(b64overview: string) {
-	overview.value = JSON.parse(b64DecodeUnicode(b64overview)).response;
+	overview.value = markdownit().render(JSON.parse(b64DecodeUnicode(b64overview)).response);
 }
 
 async function generateOverview() {
diff --git a/yarn.lock b/yarn.lock
index 3b2b0e3c8d..1c7bb8737c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6505,13 +6505,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"entities@npm:~3.0.1":
-  version: 3.0.1
-  resolution: "entities@npm:3.0.1"
-  checksum: 10/3706e0292ea3f3679720b3d3b1ed6290b164aaeb11116691a922a3acea144503871e0de2170b47671c3b735549b8b7f4741d0d3c2987e8f985ccaa0dd3762eba
-  languageName: node
-  linkType: hard
-
 "env-paths@npm:^2.2.0":
   version: 2.2.1
   resolution: "env-paths@npm:2.2.1"
@@ -8850,6 +8843,7 @@ __metadata:
     jsdom: "npm:24.1.1"
     katex: "npm:0.16.11"
     lodash: "npm:4.17.21"
+    markdown-it: "npm:^14.1.0"
     mathlive: "npm:0.89.2"
     mathml-to-latex: "npm:1.2.0"
     oidc-spa: "npm:4.6.2"
@@ -8873,7 +8867,6 @@ __metadata:
     vue: "npm:3.3.13"
     vue-feather: "npm:2.0.0"
     vue-gtag: "npm:2.0.1"
-    vue-markdown-render: "npm:^2.2.1"
     vue-router: "npm:4.2.5"
     vue-tsc: "npm:1.8.27"
     vue3-ace-editor: "npm:2.2.4"
@@ -10812,12 +10805,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"linkify-it@npm:^4.0.1":
-  version: 4.0.1
-  resolution: "linkify-it@npm:4.0.1"
+"linkify-it@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "linkify-it@npm:5.0.0"
   dependencies:
-    uc.micro: "npm:^1.0.1"
-  checksum: 10/d0a786d2e3f02f46b6f4a9b466af9eb936fb68e86b7cd305933d5457b12fdc53a4d0e0b697b02dc2e7d84a51d2425d719598bb7b47af7e01911e492e07a97957
+    uc.micro: "npm:^2.0.0"
+  checksum: 10/ef3b7609dda6ec0c0be8a7b879cea195f0d36387b0011660cd6711bba0ad82137f59b458b7e703ec74f11d88e7c1328e2ad9b855a8500c0ded67461a8c4519e6
   languageName: node
   linkType: hard
 
@@ -11111,18 +11104,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"markdown-it@npm:^13.0.2":
-  version: 13.0.2
-  resolution: "markdown-it@npm:13.0.2"
+"markdown-it@npm:^14.1.0":
+  version: 14.1.0
+  resolution: "markdown-it@npm:14.1.0"
   dependencies:
     argparse: "npm:^2.0.1"
-    entities: "npm:~3.0.1"
-    linkify-it: "npm:^4.0.1"
-    mdurl: "npm:^1.0.1"
-    uc.micro: "npm:^1.0.5"
+    entities: "npm:^4.4.0"
+    linkify-it: "npm:^5.0.0"
+    mdurl: "npm:^2.0.0"
+    punycode.js: "npm:^2.3.1"
+    uc.micro: "npm:^2.1.0"
   bin:
-    markdown-it: bin/markdown-it.js
-  checksum: 10/4f48271bbd44d16502efd4148d7c05ca1fb4b50719a07d34c91e8d16f8d065c558fed0fafe07cd13ca5958096bfe295b37cd4f042add7ec49f73c70154e75f58
+    markdown-it: bin/markdown-it.mjs
+  checksum: 10/f34f921be178ed0607ba9e3e27c733642be445e9bb6b1dba88da7aafe8ba1bc5d2f1c3aa8f3fc33b49a902da4e4c08c2feadfafb290b8c7dda766208bb6483a9
   languageName: node
   linkType: hard
 
@@ -11182,10 +11176,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mdurl@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "mdurl@npm:1.0.1"
-  checksum: 10/ada367d01c9e81d07328101f187d5bd8641b71f33eab075df4caed935a24fa679e625f07108801d8250a5e4a99e5cd4be7679957a11424a3aa3e740d2bb2d5cb
+"mdurl@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "mdurl@npm:2.0.0"
+  checksum: 10/1720349d4a53e401aa993241368e35c0ad13d816ad0b28388928c58ca9faa0cf755fa45f18ccbf64f4ce54a845a50ddce5c84e4016897b513096a68dac4b0158
   languageName: node
   linkType: hard
 
@@ -12547,6 +12541,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"punycode.js@npm:^2.3.1":
+  version: 2.3.1
+  resolution: "punycode.js@npm:2.3.1"
+  checksum: 10/f0e946d1edf063f9e3d30a32ca86d8ff90ed13ca40dad9c75d37510a04473340cfc98db23a905cc1e517b1e9deb0f6021dce6f422ace235c60d3c9ac47c5a16a
+  languageName: node
+  linkType: hard
+
 "punycode@npm:^1.4.1":
   version: 1.4.1
   resolution: "punycode@npm:1.4.1"
@@ -14544,10 +14545,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"uc.micro@npm:^1.0.1, uc.micro@npm:^1.0.5":
-  version: 1.0.6
-  resolution: "uc.micro@npm:1.0.6"
-  checksum: 10/6898bb556319a38e9cf175e3628689347bd26fec15fc6b29fa38e0045af63075ff3fea4cf1fdba9db46c9f0cbf07f2348cd8844889dd31ebd288c29fe0d27e7a
+"uc.micro@npm:^2.0.0, uc.micro@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "uc.micro@npm:2.1.0"
+  checksum: 10/37197358242eb9afe367502d4638ac8c5838b78792ab218eafe48287b0ed28aaca268ec0392cc5729f6c90266744de32c06ae938549aee041fc93b0f9672d6b2
   languageName: node
   linkType: hard
 
@@ -15508,17 +15509,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue-markdown-render@npm:^2.2.1":
-  version: 2.2.1
-  resolution: "vue-markdown-render@npm:2.2.1"
-  dependencies:
-    markdown-it: "npm:^13.0.2"
-  peerDependencies:
-    vue: ^3.3.4
-  checksum: 10/c102693eb5893b6439c4aaf1e90508b83e9abc07bc8570be7fa45238ae0784be5946bc0321ae53ea7e839bfe941cda1ff7595eb1d6b79ab84dbab4c74c918f3e
-  languageName: node
-  linkType: hard
-
 "vue-router@npm:4.2.5":
   version: 4.2.5
   resolution: "vue-router@npm:4.2.5"