DARPA-ASKEM · YohannParis · Dec 17, 2024 · Dec 6, 2024 · Dec 6, 2024 · Dec 6, 2024
@@ -44,6 +44,7 @@ services:
 #      TERARIUM_MQ_PASSWORD: "terarium123"
 #      TERARIUM_MQ_USERNAME: "terarium"
 #      TERARIUM_TASKRUNNER_REQUEST_TYPE: "mira"
+#      MIRA_REST_URL: "http://mira-epi-dkg-lb-dc1e19b273dedaa2.elb.us-east-1.amazonaws.com/"
 #    depends_on:
 #      rabbitmq:
 #        condition: service_healthy

diff --git a/packages/client/hmi-client/package.json b/packages/client/hmi-client/package.json
@@ -56,6 +56,7 @@
 		"mathlive": "0.89.2",
 		"mathml-to-latex": "1.2.0",
 		"oidc-spa": "4.6.2",
+		"papaparse": "5.4.1",
 		"path-browserify": "1.0.1",
 		"pinia": "2.1.7",
 		"pixi-viewport": "4.37.0",
@@ -85,6 +86,7 @@
 		"@types/lodash": "4.17.13",
 		"@types/markdown-it": "14.1.2",
 		"@types/node": "18.19.3",
+		"@types/papaparse": "^5",
 		"@vitejs/plugin-vue": "4.6.2",
 		"@vitest/coverage-c8": "0.24.5",
 		"jsdom": "24.1.3",

@@ -0,0 +1,93 @@
+<template>
+	<p v-if="isLoading">Loading CSV...</p>
+	<p v-else-if="error">Error loading CSV: {{ error }}</p>
+	<DataTable
+		v-else
+		:size="'small'"
+		showGridlines
+		stripedRows
+		removableSort
+		:value="csvData"
+		:globalFilter="true"
+		:sortMode="'multiple'"
+	>
+		<Column
+			v-for="col in columns"
+			:key="col.field as string"
+			:field="col.field"
+			:header="col.header"
+			:sortable="true"
+		/>
+	</DataTable>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { isEmpty } from 'lodash';
+import DataTable from 'primevue/datatable';
+import Column, { ColumnProps } from 'primevue/column';
+import Papa from 'papaparse';
+
+// Define props for the component
+const props = defineProps({
+	csvText: {
+		type: String,
+		required: true
+	}
+});
+
+const csvData = ref([]);
+const columns = ref<ColumnProps[]>([]);
+const isLoading = ref(true);
+const error = ref(null);
+
+function rowReplaceEmptyKey(row: any) {
+	Object.keys(row).forEach((key) => {
+		if (isEmpty(key)) {
+			row.empty = row[key];
+			delete row[key];
+		}
+	});
+	return row;
+}
+
+function onComplete(results: any) {
+	// If the CSV has an empty header, just use 'empty' as the field name
+	columns.value = results.meta.fields.map((field: string) => ({
+		field: isEmpty(field) ? 'empty' : field,
+		header: field
+	}));
+	csvData.value = results.data.map(rowReplaceEmptyKey);
+	isLoading.value = false;
+}
+
+function onError(err: any) {
+	error.value = err.message;
+	isLoading.value = false;
+}
+
+// Configuration for PapaParse
+// https://www.papaparse.com/docs#config
+const config = {
+	header: true,
+	dynamicTyping: true,
+	skipEmptyLines: true,
+	complete: onComplete,
+	error: onError
+};
+
+// Load CSV when component is mounted
+onMounted(() => {
+	try {
+		Papa.parse(props.csvText, config);
+	} catch (fetchError) {
+		onError(fetchError);
+	}
+});
+</script>
+
+<style scoped>
+.p-datatable {
+	border: 1px solid var(--surface-border);
+}
+</style>
@@ -28,7 +28,7 @@ p.inline {
 }
 
 p:not(.inline) {
-	margin-top: var(--gap-2);
+	margin-top: var(--gap-4);
 }
 
 .center {
@@ -37,6 +37,12 @@ p:not(.inline) {
 	justify-content: center;
 	align-items: center;
 	flex-direction: column;
+	margin-left: auto;
+	margin-right: auto;
+
+	p {
+		text-align: center;
+	}
 }
 
 i {

@@ -1,6 +1,6 @@
 import { ModelComparisonOperation as operation } from './model-comparison-operation';
 import node from './tera-model-comparison-node.vue';
-import drilldown from './tera-model-comparison.vue';
+import drilldown from './tera-model-comparison-drilldown.vue';
 
 const name = operation.name;
 

@@ -8,7 +8,7 @@
 			<tera-drilldown-section>
 				<!-- LLM generated overview -->
 				<section class="comparison-overview">
-					<Accordion multiple :activeIndex="currentActiveIndicies">
+					<Accordion multiple :activeIndex="currentActiveIndices">
 						<AccordionTab header="Overview">
 							<template #header>
 								<div class="flex align-items-start gap-2 ml-4 w-full">
@@ -85,6 +85,32 @@
 						</tbody>
 					</table>
 				</div>
+				<!-- Comparison context -->
+				<Accordion
+					v-if="!isConceptComparisonEmpty && !isConceptComparisonLoading"
+					:activeIndex="comparisonContextActiveIndexes"
+					class="comparison-context"
+					multiple
+				>
+					<AccordionTab header="Concept context comparison" v-if="!isContextComparisonEmpty">
+						<tera-csv-table :csv-text="conceptComparison.concept_context_comparison!" />
+					</AccordionTab>
+					<AccordionTab header="Tabular concept comparison" v-if="!isTabularComparisonEmpty">
+						<template v-for="(value, pair) in conceptComparison.tabular_comparison" :key="pair">
+							<h6>Tabular comparison {{ pair }}</h6>
+							<tera-csv-table :csv-text="value" />
+						</template>
+					</AccordionTab>
+					<AccordionTab header="Concept graph comparison" v-if="!isGraphComparisonEmpty">
+						<template v-for="(value, pair) in conceptComparison.concept_graph_comparison" :key="pair">
+							<h6>Concept comparison {{ pair }}</h6>
+							<img :src="`data:image/png;base64,${value}`" :alt="`Concept comparison ${pair}`" />
+						</template>
+					</AccordionTab>
+				</Accordion>
+				<tera-progress-spinner v-if="isConceptComparisonLoading" is-centered :font-size="3" class="max-w-25rem">
+					Creating a context, tabular, and graph concept comparison between the {{ modelIds.length }} models...
+				</tera-progress-spinner>
 			</tera-drilldown-section>
 		</div>
 		<tera-columnar-panel :tabName="Tabs.Notebook">
@@ -178,6 +204,9 @@ import TeraColumnarPanel from '@/components/widgets/tera-columnar-panel.vue';
 import { b64DecodeUnicode } from '@/utils/binary';
 import { useClientEvent } from '@/composables/useClientEvent';
 import Textarea from 'primevue/textarea';
+import { CompareModelsConceptsResponse, getCompareModelConcepts } from '@/services/concept';
+import TeraCsvTable from '@/components/widgets/tera-csv-table.vue';
+import TeraProgressSpinner from '@/components/widgets/tera-progress-spinner.vue';
 import { ModelComparisonOperationState } from './model-comparison-operation';
 
 const props = defineProps<{
@@ -207,7 +236,7 @@ const sampleAgentQuestions = [
 ];
 let compareModelsTaskId = '';
 
-const currentActiveIndicies = ref([0]);
+const currentActiveIndices = ref([0]);
 const modelsToCompare = ref<Model[]>([]);
 const modelCardsToCompare = ref<any[]>([]);
 const fields = ref<string[]>([]);
@@ -269,6 +298,7 @@ function resetNotebook() {
 	emptyImages();
 	updateCodeState();
 }
+
 function onUpdateGoalQuery(goal: string) {
 	const state = cloneDeep(props.node.state);
 	goalQuery.value = goal;
@@ -525,6 +555,36 @@ const processCompareModels = async () => {
 	isProcessingComparison.value = false;
 };
 
+/* Concept comparison */
+
+const conceptComparison = ref<CompareModelsConceptsResponse>({});
+const isConceptComparisonLoading = ref(false);
+const isContextComparisonEmpty = computed(() => isEmpty(conceptComparison.value.concept_context_comparison));
+const isTabularComparisonEmpty = computed(() => isEmpty(conceptComparison.value.tabular_comparison));
+const isGraphComparisonEmpty = computed(() => isEmpty(conceptComparison.value.concept_graph_comparison));
+const isConceptComparisonEmpty = computed(
+	() => isContextComparisonEmpty.value && isTabularComparisonEmpty.value && isGraphComparisonEmpty.value
+);
+const comparisonContextActiveIndexes = ref([0, 1, 2]);
+
+function processConceptComparison() {
+	if (isEmpty(modelIds.value)) return;
+	isConceptComparisonLoading.value = true;
+	conceptComparison.value = {};
+	getCompareModelConcepts(modelIds.value, props.node.workflowId, props.node.id)
+		.then((response) => {
+			if (response) conceptComparison.value = response;
+		})
+		.catch((error) => {
+			logger.error(`Error comparing concepts: ${error}`);
+		})
+		.finally(() => {
+			isConceptComparisonLoading.value = false;
+		});
+}
+
+/* End of concept comparison */
+
 // Listen for the task completion event
 useClientEvent(ClientEventType.TaskGollmCompareModel, (event: ClientEvent<TaskResponse>) => {
 	if (!event.data || event.data.id !== compareModelsTaskId) return;
@@ -544,6 +604,9 @@ onMounted(async () => {
 		processCompareModels();
 	}
 
+	// Run asynchronously the concept comparison of the models
+	processConceptComparison();
+
 	if (!isEmpty(props.node.state.comparisonImageIds)) {
 		isLoadingStructuralComparisons.value = true;
 		structuralComparisons.value = await getImages(props.node.state.comparisonImageIds);
@@ -645,11 +708,26 @@ ul {
 	align-items: center;
 }
 
-.comparison-overview {
+.comparison-overview,
+.comparison-context {
 	border: 1px solid var(--surface-border-light);
 	border-radius: var(--border-radius-medium);
 	padding: var(--gap-2);
-	margin: var(--gap-4);
+	margin: var(--gap-12) var(--gap-4);
+
+	& + & {
+		margin-top: var(--gap-4);
+	}
+}
+
+.comparison-context h6 {
+	&:not(:first-of-type) {
+		margin-top: var(--gap-8);
+	}
+
+	& + * {
+		margin-top: var(--gap-4);
+	}
 }
 
 .subdued {

@@ -3,11 +3,12 @@
  */
 
 import API from '@/api/api';
-import type { Curies, DatasetColumn, DKG, EntitySimilarityResult, State } from '@/types/Types';
+import type { Curies, DatasetColumn, DKG, EntitySimilarityResult, State, Model } from '@/types/Types';
 import { logger } from '@/utils/logger';
 import { isEmpty } from 'lodash';
 import { CalibrateMap } from '@/services/calibrate-workflow';
 import { FIFOCache } from '@/utils/FifoCache';
+import { Workflow, WorkflowNode } from '@/types/workflow';
 
 interface Entity {
 	id: string;
@@ -289,6 +290,32 @@ const autoModelMapping = async (modelOneOptions: State[], modelTwoOptions: State
 	return result;
 };
 
+/**
+ * Compare multiple models and return the concepts that are common between them
+ * @param modelIds - List of model ids to compare
+ * @returns
+ */
+interface CompareModelsConceptsRequest {
+	modelIds: Array<Model['id']>;
+	workflowId?: Workflow['id'];
+	nodeId?: WorkflowNode<any>['id'];
+}
+interface CompareModelsConceptsResponse {
+	concept_context_comparison?: string;
+	tabular_comparison?: { [key: string]: string };
+	concept_graph_comparison?: { [key: string]: string };
+}
+async function getCompareModelConcepts(
+	modelIds: Array<Model['id']>,
+	workflowId?: Workflow['id'],
+	nodeId?: WorkflowNode<any>['id']
+) {
+	const request: CompareModelsConceptsRequest = { modelIds, workflowId, nodeId };
+	const response = await API.post('/mira/compare-models-concepts', request);
+	if (response?.status !== 200) return null;
+	return (response?.data.response as CompareModelsConceptsResponse) ?? null;
+}
+
 export {
 	getCuriesEntities,
 	getEntitySimilarity,
@@ -298,5 +325,7 @@ export {
 	parseCurie,
 	autoModelMapping,
 	autoCalibrationMapping,
-	autoEntityMapping
+	autoEntityMapping,
+	getCompareModelConcepts,
+	type CompareModelsConceptsResponse
 };
diff --git a/packages/client/hmi-client/src/types/Types.ts b/packages/client/hmi-client/src/types/Types.ts
@@ -1113,6 +1113,7 @@ export enum ClientEventType {
     TaskGollmModelCard = "TASK_GOLLM_MODEL_CARD",
     TaskMiraAmrToMmt = "TASK_MIRA_AMR_TO_MMT",
     TaskMiraGenerateModelLatex = "TASK_MIRA_GENERATE_MODEL_LATEX",
+    TaskMiraCompareModelsConcepts = "TASK_MIRA_COMPARE_MODELS_CONCEPTS",
     TaskUndefinedEvent = "TASK_UNDEFINED_EVENT",
     WorkflowDelete = "WORKFLOW_DELETE",
     WorkflowUpdate = "WORKFLOW_UPDATE",