fix(compare-models): add markdown renderer and prepare for overview save

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",
@@ -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",

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 {
+	overviewId: string | null;
 	notebookHistory: NotebookHistory[];
 	hasCodeRun: boolean;
 	comparisonImageIds: string[];
@@ -24,6 +25,7 @@ export const ModelComparisonOperation: Operation = {
 	action: () => {},
 	initState: () => {
 		const init: ModelComparisonOperationState = {
+			overviewId: null,
 			notebookHistory: [],
 			hasCodeRun: false,
 			comparisonImageIds: []

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(overview)" class="subdued">
+								Analyzing models metadata to generate a detailed comparison analysis...
+							</p>
+							<p v-html="overview" v-else />
 						</AccordionTab>
 					</Accordion>
 				</section>
@@ -124,6 +126,7 @@
 <script setup lang="ts">
 import { isEmpty, cloneDeep } from 'lodash';
 import { v4 as uuidv4 } from 'uuid';
+import markdownit from 'markdown-it';
 import Accordion from 'primevue/accordion';
 import AccordionTab from 'primevue/accordiontab';
 import TeraDrilldownSection from '@/components/drilldown/tera-drilldown-section.vue';
@@ -134,10 +137,10 @@ 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 { 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';
 
@@ -151,14 +154,13 @@ 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';
-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',
@@ -172,27 +174,21 @@ 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[]>([]);
 const fields = ref<string[]>([]);
 
 const isLoadingStructuralComparisons = ref(false);
+const overview = ref<string | null>(null);
 const structuralComparisons = ref<string[]>([]);
-const compareModelsTaskId = ref<string>('');
-const compareModelsTaskOutput = ref<string>('');
 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 +290,32 @@ 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 assignOverview(b64overview: string) {
+	overview.value = markdownit().render(JSON.parse(b64DecodeUnicode(b64overview)).response);
+}
+
+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(); // TODO: Save overview to S3
+	assignOverview(compareModelsTaskOutput);
+	// 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
+}
+
 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 () => {
@@ -312,6 +324,8 @@ onMounted(async () => {
 		structuralComparisons.value = await getImages(props.node.state.comparisonImageIds);
 		isLoadingStructuralComparisons.value = false;
 	}
+	// TODO: Get text from S3
+	// if (props.node.state.overviewId)
 
 	const modelIds: string[] = props.node.inputs
 		.filter((input) => input.status === WorkflowPortStatus.CONNECTED)

packages/client/hmi-client/src/components/workflow/tera-workflow.vue

@@ -158,7 +158,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)"

yarn.lock

@@ -3335,13 +3335,37 @@ __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"
   checksum: 10/b8177f19cf962414a66989837481b13f546afc2e98e8d465bec59e6ac03a59c584eb7053ce511cde3a09c5f3096d22a5ae22cfb56b23f3b0da75b0743b6b1a44
   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"
@@ -8794,6 +8818,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"
@@ -8818,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"
@@ -10779,6 +10805,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"linkify-it@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "linkify-it@npm:5.0.0"
+  dependencies:
+    uc.micro: "npm:^2.0.0"
+  checksum: 10/ef3b7609dda6ec0c0be8a7b879cea195f0d36387b0011660cd6711bba0ad82137f59b458b7e703ec74f11d88e7c1328e2ad9b855a8500c0ded67461a8c4519e6
+  languageName: node
+  linkType: hard
+
 "lint-staged@npm:15.2.9":
   version: 15.2.9
   resolution: "lint-staged@npm:15.2.9"
@@ -11069,6 +11104,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"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:^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.mjs
+  checksum: 10/f34f921be178ed0607ba9e3e27c733642be445e9bb6b1dba88da7aafe8ba1bc5d2f1c3aa8f3fc33b49a902da4e4c08c2feadfafb290b8c7dda766208bb6483a9
+  languageName: node
+  linkType: hard
+
 "marked@npm:^4.0.17":
   version: 4.3.0
   resolution: "marked@npm:4.3.0"
@@ -11125,6 +11176,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdurl@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "mdurl@npm:2.0.0"
+  checksum: 10/1720349d4a53e401aa993241368e35c0ad13d816ad0b28388928c58ca9faa0cf755fa45f18ccbf64f4ce54a845a50ddce5c84e4016897b513096a68dac4b0158
+  languageName: node
+  linkType: hard
+
 "memorystream@npm:^0.3.1":
   version: 0.3.1
   resolution: "memorystream@npm:0.3.1"
@@ -12483,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"
@@ -14480,6 +14545,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"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
+
 "unbox-primitive@npm:^1.0.2":
   version: 1.0.2
   resolution: "unbox-primitive@npm:1.0.2"