From 412a24f7b5fc14d98dde66d72e21d3de111d6bde Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Fri, 9 Aug 2024 13:28:18 -0400
Subject: [PATCH] feat: calibrated configruration view (#4377)

---
 .../drilldown/tera-drilldown-header.vue       |   2 +-
 .../model-parts/tera-model-part-entry.vue     |   1 +
 .../model/petrinet/tera-initial-entry.vue     |  57 ++++---
 .../model/petrinet/tera-initial-table.vue     |   2 +-
 .../model/petrinet/tera-parameter-entry.vue   | 144 +++++++++++-------
 .../model/petrinet/tera-parameter-table.vue   |   4 +-
 .../model-config/model-config-operation.ts    |   3 +-
 .../tera-model-config-drilldown.vue           |  84 ++++++----
 .../ops/model-config/tera-petrinet-tables.vue |   0
 9 files changed, 191 insertions(+), 106 deletions(-)
 delete mode 100644 packages/client/hmi-client/src/components/workflow/ops/model-config/tera-petrinet-tables.vue

diff --git a/packages/client/hmi-client/src/components/drilldown/tera-drilldown-header.vue b/packages/client/hmi-client/src/components/drilldown/tera-drilldown-header.vue
index 7b40c1b2ee..7f48f52fd7 100644
--- a/packages/client/hmi-client/src/components/drilldown/tera-drilldown-header.vue
+++ b/packages/client/hmi-client/src/components/drilldown/tera-drilldown-header.vue
@@ -74,7 +74,7 @@ header .title {
 header .tabs-row {
 	justify-content: space-between;
 	align-items: end;
-	gap: var(--gap);
+	gap: var(--gap-1);
 }
 
 header .tabs-row:deep(.p-tabview .p-tabview-panels) {
diff --git a/packages/client/hmi-client/src/components/model/model-parts/tera-model-part-entry.vue b/packages/client/hmi-client/src/components/model/model-parts/tera-model-part-entry.vue
index 90cdd689db..3f0f373a36 100644
--- a/packages/client/hmi-client/src/components/model/model-parts/tera-model-part-entry.vue
+++ b/packages/client/hmi-client/src/components/model/model-parts/tera-model-part-entry.vue
@@ -137,6 +137,7 @@ h6 {
 
 .description {
 	grid-area: description;
+	color: var(--text-color-subdued);
 }
 
 .unit {
diff --git a/packages/client/hmi-client/src/components/model/petrinet/tera-initial-entry.vue b/packages/client/hmi-client/src/components/model/petrinet/tera-initial-entry.vue
index 1d18e3a803..6a42aca96b 100644
--- a/packages/client/hmi-client/src/components/model/petrinet/tera-initial-entry.vue
+++ b/packages/client/hmi-client/src/components/model/petrinet/tera-initial-entry.vue
@@ -1,16 +1,20 @@
 <template>
-	<div>
-		<header>
-			<div>
-				<strong>{{ initialId }}</strong>
-				<span v-if="name" class="ml-1">{{ '| ' + name }}</span>
-				<template v-if="unit">
-					<label class="ml-2">Unit</label>
-					<span class="ml-1">{{ unit }}</span>
-				</template>
-			</div>
-			<span v-if="description" class="ml-4">{{ description }}</span>
-		</header>
+	<header>
+		<div class="flex">
+			<strong>{{ initialId }}</strong>
+			<span v-if="name" class="ml-1">{{ '| ' + name }}</span>
+			<template v-if="unit">
+				<label class="ml-2">Unit</label>
+				<span class="ml-1">{{ unit }}</span>
+			</template>
+			<template v-if="concept">
+				<label class="ml-auto">Concept</label>
+				<span class="ml-1">{{ concept }}</span>
+			</template>
+		</div>
+		<span v-if="description" class="description">{{ description }}</span>
+	</header>
+	<template v-if="isEmpty(modelConfiguration.inferredParameterList)">
 		<main>
 			<span class="expression">
 				<tera-input-text
@@ -29,7 +33,13 @@
 				@update:model-value="emit('update-source', { id: initialId, value: $event })"
 			/>
 		</footer>
-	</div>
+	</template>
+	<katex-element
+		v-else
+		class="expression"
+		:expression="stringToLatexExpression(getInitialExpression(modelConfiguration, initialId))"
+		:throw-on-error="false"
+	/>
 	<tera-initial-other-value-modal
 		v-if="showOtherConfigValueModal"
 		:id="initialId"
@@ -44,14 +54,17 @@
 </template>
 
 <script setup lang="ts">
+import { isEmpty } from 'lodash';
+import { computed, ref, onMounted } from 'vue';
 import { DistributionType } from '@/services/distribution';
 import { Model, ModelConfiguration } from '@/types/Types';
 import { getInitialExpression, getInitialSource, getOtherValues } from '@/services/model-configurations';
 import TeraInputText from '@/components/widgets/tera-input-text.vue';
 import TeraInitialOtherValueModal from '@/components/model/petrinet/tera-initial-other-value-modal.vue';
-import { computed, ref } from 'vue';
 import Button from 'primevue/button';
-import { getInitialDescription, getInitialName, getInitialUnits } from '@/model-representation/service';
+import { getInitialDescription, getInitialName, getInitialUnits, getStates } from '@/model-representation/service';
+import { getCurieFromGroundingIdentifier, getNameOfCurieCached } from '@/services/concept';
+import { stringToLatexExpression } from '@/services/model';
 
 const props = defineProps<{
 	model: Model;
@@ -70,23 +83,33 @@ const name = getInitialName(props.model, props.initialId);
 const unit = getInitialUnits(props.model, props.initialId);
 const description = getInitialDescription(props.model, props.initialId);
 
+const concept = ref('');
 const sourceOpen = ref(false);
 const showOtherConfigValueModal = ref(false);
 
+const getOtherValuesLabel = computed(() => `Other Values(${otherValueList.value?.length})`);
+
 function getSourceLabel(initialId) {
 	if (sourceOpen.value) return 'Hide source';
 	if (!getInitialSource(props.modelConfiguration, initialId)) return 'Add source';
 	return 'Show source';
 }
 
-const getOtherValuesLabel = computed(() => `Other Values(${otherValueList.value?.length})`);
+onMounted(async () => {
+	const identifiers = getStates(props.model).find((state) => state.id === props.initialId)?.grounding?.identifiers;
+	if (identifiers) concept.value = await getNameOfCurieCached(getCurieFromGroundingIdentifier(identifiers));
+});
 </script>
 
 <style scoped>
 header {
 	display: flex;
 	flex-direction: column;
-	padding-bottom: var(--gap-small);
+	padding-bottom: var(--gap-2);
+	gap: var(--gap-2);
+}
+.description {
+	color: var(--text-color-subdued);
 }
 .expression {
 	flex-grow: 1;
diff --git a/packages/client/hmi-client/src/components/model/petrinet/tera-initial-table.vue b/packages/client/hmi-client/src/components/model/petrinet/tera-initial-table.vue
index c6585ea833..b6cc10eaa4 100644
--- a/packages/client/hmi-client/src/components/model/petrinet/tera-initial-table.vue
+++ b/packages/client/hmi-client/src/components/model/petrinet/tera-initial-table.vue
@@ -6,7 +6,7 @@
 				<tera-input-text v-model="filterText" placeholder="Filter" />
 			</template>
 
-			<ul>
+			<ul class="pl-4">
 				<li v-for="{ baseInitial, childInitials, isVirtual } in initialList" :key="baseInitial">
 					<!-- Stratified -->
 					<Accordion v-if="isVirtual" multiple>
diff --git a/packages/client/hmi-client/src/components/model/petrinet/tera-parameter-entry.vue b/packages/client/hmi-client/src/components/model/petrinet/tera-parameter-entry.vue
index d025505b77..799dabf08c 100644
--- a/packages/client/hmi-client/src/components/model/petrinet/tera-parameter-entry.vue
+++ b/packages/client/hmi-client/src/components/model/petrinet/tera-parameter-entry.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="flex flex-column flex-1">
 		<header>
-			<div>
+			<div class="flex">
 				<strong>{{ parameterId }}</strong>
 				<span v-if="name" class="ml-1">{{ '| ' + name }}</span>
 				<template v-if="units">
@@ -15,71 +15,82 @@
 				</template>
 			</div>
 
-			<span v-if="description">{{ description }}</span>
+			<span class="description" v-if="description">{{ description }}</span>
 		</header>
-		<main>
-			<span class="flex gap-2">
-				<Dropdown
-					:model-value="getParameterDistribution(modelConfiguration, parameterId).type"
-					@change="
-						emit('update-parameter', {
-							id: parameterId,
-							distribution: formatPayloadFromTypeChange($event.value)
-						})
-					"
-					option-label="name"
-					option-value="value"
-					:options="distributionTypeOptions()"
-				/>
-
-				<!-- Constant -->
-				<tera-input-number
-					v-if="getParameterDistribution(modelConfiguration, parameterId).type === DistributionType.Constant"
-					label="Constant"
-					:model-value="getParameterDistribution(modelConfiguration, parameterId)?.parameters.value"
-					@update:model-value="
-						emit('update-parameter', {
-							id: parameterId,
-							distribution: formatPayloadFromParameterChange({ value: $event })
-						})
-					"
-				/>
-				<!-- Uniform Distribution -->
-				<template v-if="getParameterDistribution(modelConfiguration, parameterId).type === DistributionType.Uniform">
-					<tera-input-number
-						label="Min"
-						:model-value="getParameterDistribution(modelConfiguration, parameterId)?.parameters.minimum"
-						@update:model-value="
+		<div v-if="inferredDistribution" class="inferred-parameter">
+			<span class="type"><label>Type</label> {{ inferredDistribution.type }}</span>
+			<span class="mean">
+				<label>Mean</label> {{ displayNumber(inferredDistribution?.parameters?.mean.toString()) }}
+			</span>
+			<span class="std">
+				<label>STDDEV</label> {{ displayNumber(inferredDistribution?.parameters?.stddev.toString()) }}
+			</span>
+		</div>
+		<template v-else>
+			<main>
+				<span class="flex gap-2">
+					<Dropdown
+						:model-value="getParameterDistribution(modelConfiguration, parameterId).type"
+						@change="
 							emit('update-parameter', {
 								id: parameterId,
-								distribution: formatPayloadFromParameterChange({ minimum: $event })
+								distribution: formatPayloadFromTypeChange($event.value)
 							})
 						"
+						option-label="name"
+						option-value="value"
+						:options="distributionTypeOptions()"
 					/>
+
+					<!-- Constant -->
 					<tera-input-number
-						label="Max"
-						:model-value="getParameterDistribution(modelConfiguration, parameterId)?.parameters.maximum"
+						v-if="getParameterDistribution(modelConfiguration, parameterId).type === DistributionType.Constant"
+						label="Constant"
+						:model-value="getParameterDistribution(modelConfiguration, parameterId)?.parameters.value"
 						@update:model-value="
 							emit('update-parameter', {
 								id: parameterId,
-								distribution: formatPayloadFromParameterChange({ maximum: $event })
+								distribution: formatPayloadFromParameterChange({ value: $event })
 							})
 						"
 					/>
-				</template>
-			</span>
-			<section>
-				<Button :label="getSourceLabel(parameterId)" text size="small" @click="isSourceOpen = !isSourceOpen" />
-				<Button :label="getOtherValuesLabel" text size="small" @click="showOtherConfigValueModal = true" />
-			</section>
-		</main>
-		<footer v-if="isSourceOpen" class="mb-2">
-			<tera-input-text
-				placeholder="Add a source"
-				:model-value="getParameterSource(modelConfiguration, parameterId)"
-				@update:model-value="emit('update-source', { id: parameterId, value: $event })"
-			/>
-		</footer>
+					<!-- Uniform Distribution -->
+					<template v-if="getParameterDistribution(modelConfiguration, parameterId).type === DistributionType.Uniform">
+						<tera-input-number
+							label="Min"
+							:model-value="getParameterDistribution(modelConfiguration, parameterId)?.parameters.minimum"
+							@update:model-value="
+								emit('update-parameter', {
+									id: parameterId,
+									distribution: formatPayloadFromParameterChange({ minimum: $event })
+								})
+							"
+						/>
+						<tera-input-number
+							label="Max"
+							:model-value="getParameterDistribution(modelConfiguration, parameterId)?.parameters.maximum"
+							@update:model-value="
+								emit('update-parameter', {
+									id: parameterId,
+									distribution: formatPayloadFromParameterChange({ maximum: $event })
+								})
+							"
+						/>
+					</template>
+				</span>
+				<section>
+					<Button :label="getSourceLabel(parameterId)" text size="small" @click="isSourceOpen = !isSourceOpen" />
+					<Button :label="getOtherValuesLabel" text size="small" @click="showOtherConfigValueModal = true" />
+				</section>
+			</main>
+			<footer v-if="isSourceOpen" class="mb-2">
+				<tera-input-text
+					placeholder="Add a source"
+					:model-value="getParameterSource(modelConfiguration, parameterId)"
+					@update:model-value="emit('update-source', { id: parameterId, value: $event })"
+				/>
+			</footer>
+		</template>
 	</div>
 	<tera-parameter-other-value-modal
 		v-if="showOtherConfigValueModal"
@@ -93,16 +104,18 @@
 </template>
 
 <script setup lang="ts">
+import { computed, ref, onMounted } from 'vue';
 import { Model, ModelConfiguration } from '@/types/Types';
 import { getParameterSource, getParameterDistribution, getOtherValues } from '@/services/model-configurations';
 import TeraInputText from '@/components/widgets/tera-input-text.vue';
 import TeraInputNumber from '@/components/widgets/tera-input-number.vue';
-import { computed, ref } from 'vue';
 import Button from 'primevue/button';
 import Dropdown from 'primevue/dropdown';
 import { DistributionType, distributionTypeOptions } from '@/services/distribution';
 import { getParameter } from '@/model-representation/service';
 import TeraParameterOtherValueModal from '@/components/model/petrinet/tera-parameter-other-value-modal.vue';
+import { displayNumber } from '@/utils/number';
+import { getCurieFromGroundingIdentifier, getNameOfCurieCached } from '@/services/concept';
 
 const props = defineProps<{
 	model: Model;
@@ -116,8 +129,13 @@ const emit = defineEmits(['update-parameter', 'update-source']);
 const name = getParameter(props.model, props.parameterId)?.name;
 const units = getParameter(props.model, props.parameterId)?.units?.expression;
 const description = getParameter(props.model, props.parameterId)?.description;
-const concept = getParameter(props.model, props.parameterId)?.grounding?.identifiers[0];
+const inferredDistribution = computed(
+	() =>
+		props.modelConfiguration.inferredParameterList?.find((param) => param.referenceId === props.parameterId)
+			?.distribution
+);
 
+const concept = ref('');
 const isSourceOpen = ref(false);
 const showOtherConfigValueModal = ref(false);
 
@@ -152,6 +170,11 @@ function formatPayloadFromTypeChange(type: DistributionType) {
 }
 
 const getOtherValuesLabel = computed(() => `Other Values(${otherValueList.value?.length})`);
+
+onMounted(async () => {
+	const identifiers = getParameter(props.model, props.parameterId)?.grounding?.identifiers;
+	if (identifiers) concept.value = await getNameOfCurieCached(getCurieFromGroundingIdentifier(identifiers));
+});
 </script>
 
 <style scoped>
@@ -167,6 +190,10 @@ main {
 	padding-bottom: var(--gap-small);
 }
 
+.description {
+	color: var(--text-color-subdued);
+}
+
 :deep(.p-dropdown-label) {
 	min-width: 10rem;
 }
@@ -174,4 +201,11 @@ main {
 label {
 	color: var(--text-color-subdued);
 }
+
+.inferred-parameter {
+	display: flex;
+	& > span {
+		width: 20%;
+	}
+}
 </style>
diff --git a/packages/client/hmi-client/src/components/model/petrinet/tera-parameter-table.vue b/packages/client/hmi-client/src/components/model/petrinet/tera-parameter-table.vue
index 8e6996b5dd..10baeaef92 100644
--- a/packages/client/hmi-client/src/components/model/petrinet/tera-parameter-table.vue
+++ b/packages/client/hmi-client/src/components/model/petrinet/tera-parameter-table.vue
@@ -41,7 +41,7 @@
 				<Button text small icon="pi pi-times" @click="isAddingUncertainty = false" />
 			</span>
 
-			<ul>
+			<ul class="pl-4">
 				<li v-for="{ baseParameter, childParameters, isVirtual } in parameterList" :key="baseParameter">
 					<!-- Stratified -->
 					<Accordion v-if="isVirtual" multiple>
@@ -80,7 +80,7 @@
 						</AccordionTab>
 					</Accordion>
 					<!-- Unstratified -->
-					<div v-else class="flex gap-4 pl-5">
+					<div v-else class="flex gap-4">
 						<Checkbox
 							v-if="
 								isAddingUncertainty &&
diff --git a/packages/client/hmi-client/src/components/workflow/ops/model-config/model-config-operation.ts b/packages/client/hmi-client/src/components/workflow/ops/model-config/model-config-operation.ts
index b7ecdcb7c4..3cd33d48fb 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/model-config/model-config-operation.ts
+++ b/packages/client/hmi-client/src/components/workflow/ops/model-config/model-config-operation.ts
@@ -24,7 +24,8 @@ export const blankModelConfig: ModelConfiguration = {
 	simulationId: '',
 	observableSemanticList: [],
 	parameterSemanticList: [],
-	initialSemanticList: []
+	initialSemanticList: [],
+	inferredParameterList: []
 };
 
 export const ModelConfigOperation: Operation = {
diff --git a/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-config-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-config-drilldown.vue
index c3f3194a37..5a1c84a511 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-config-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-config-drilldown.vue
@@ -1,14 +1,12 @@
 <template>
 	<tera-drilldown
+		v-bind="$attrs"
 		:node="node"
 		:menu-items="menuItems"
 		@on-close-clicked="emit('close')"
 		@update-state="(state: any) => emit('update-state', state)"
 		@update:selection="onSelection"
 	>
-		<template #header-actions>
-			<tera-operator-annotation :state="node.state" @update-state="(state: any) => emit('update-state', state)" />
-		</template>
 		<template #sidebar>
 			<tera-slider-panel v-model:is-open="isSidebarOpen" header="Configurations" content-width="360px">
 				<template #content>
@@ -65,7 +63,7 @@
 			</tera-slider-panel>
 		</template>
 
-		<tera-drilldown-section :tabName="ConfigTabs.Wizard" class="px-3">
+		<tera-drilldown-section :tabName="ConfigTabs.Wizard" class="pl-3">
 			<template #header-controls-left>
 				<tera-toggleable-edit
 					v-if="knobs.transientModelConfig.name"
@@ -97,30 +95,44 @@
 					<tera-model-diagram v-if="model" :model="model" />
 				</AccordionTab>
 			</Accordion>
-			<Message v-if="model && isModelMissingMetadata(model)" class="m-2">
-				Some metadata is missing from these values. This information can be added manually to the attached model.
-			</Message>
-
-			<tera-initial-table
-				v-if="!isEmpty(knobs.transientModelConfig) && !isEmpty(mmt.initials) && model"
-				:model="model"
-				:model-configuration="knobs.transientModelConfig"
-				:modelConfigurations="filteredModelConfigurations"
-				:mmt="mmt"
-				:mmt-params="mmtParams"
-				@update-expression="setInitialExpression(knobs.transientModelConfig, $event.id, $event.value)"
-				@update-source="setInitialSource(knobs.transientModelConfig, $event.id, $event.value)"
-			/>
-			<tera-parameter-table
-				v-if="!isEmpty(knobs.transientModelConfig) && !isEmpty(mmt.parameters) && model"
-				:model="model"
-				:model-configuration="knobs.transientModelConfig"
-				:modelConfigurations="filteredModelConfigurations"
-				:mmt="mmt"
-				:mmt-params="mmtParams"
-				@update-parameters="setParameterDistributions(knobs.transientModelConfig, $event)"
-				@update-source="setParameterSource(knobs.transientModelConfig, $event.id, $event.value)"
-			/>
+			<template v-if="model">
+				<Message v-if="isModelMissingMetadata(model)" class="m-2">
+					Some metadata is missing from these values. This information can be added manually to the attached model.
+				</Message>
+				<template v-if="!isEmpty(knobs.transientModelConfig)">
+					<tera-initial-table
+						v-if="!isEmpty(mmt.initials)"
+						:model="model"
+						:model-configuration="knobs.transientModelConfig"
+						:modelConfigurations="filteredModelConfigurations"
+						:mmt="mmt"
+						:mmt-params="mmtParams"
+						@update-expression="setInitialExpression(knobs.transientModelConfig, $event.id, $event.value)"
+						@update-source="setInitialSource(knobs.transientModelConfig, $event.id, $event.value)"
+					/>
+					<tera-parameter-table
+						v-if="!isEmpty(mmt.parameters)"
+						:model="model"
+						:model-configuration="knobs.transientModelConfig"
+						:modelConfigurations="filteredModelConfigurations"
+						:mmt="mmt"
+						:mmt-params="mmtParams"
+						@update-parameters="setParameterDistributions(knobs.transientModelConfig, $event)"
+						@update-source="setParameterSource(knobs.transientModelConfig, $event.id, $event.value)"
+					/>
+					<Accordion :active-index="0" v-if="!isEmpty(calibratedConfigObservables)">
+						<AccordionTab header="Observables">
+							<tera-observables
+								class="pl-4"
+								:model="model"
+								:mmt="mmt"
+								:observables="calibratedConfigObservables"
+								:feature-config="{ isPreview: true }"
+							/>
+						</AccordionTab>
+					</Accordion>
+				</template>
+			</template>
 		</tera-drilldown-section>
 		<tera-columnar-panel :tabName="ConfigTabs.Notebook">
 			<tera-drilldown-section id="notebook-section">
@@ -221,6 +233,7 @@ import TeraNotebookError from '@/components/drilldown/tera-notebook-error.vue';
 import TeraNotebookJupyterInput from '@/components/llm/tera-notebook-jupyter-input.vue';
 import TeraModelDiagram from '@/components/model/petrinet/model-diagrams/tera-model-diagram.vue';
 import TeraModelParts from '@/components/model/tera-model-parts.vue';
+import TeraObservables from '@/components/model/model-parts/tera-observables.vue';
 import TeraModal from '@/components/widgets/tera-modal.vue';
 import teraNotebookJupyterThoughtOutput from '@/components/llm/tera-notebook-jupyter-thought-output.vue';
 import TeraInitialTable from '@/components/model/petrinet/tera-initial-table.vue';
@@ -240,7 +253,7 @@ import {
 } from '@/services/model-configurations';
 import { useToastService } from '@/services/toast';
 import type { Model, ModelConfiguration, TaskResponse, ClientEvent } from '@/types/Types';
-import { ClientEventType, TaskStatus } from '@/types/Types';
+import { ClientEventType, Observable, TaskStatus } from '@/types/Types';
 import type { WorkflowNode } from '@/types/workflow';
 import { OperatorStatus } from '@/types/workflow';
 import { logger } from '@/utils/logger';
@@ -288,6 +301,15 @@ const knobs = ref<BasicKnobs>({
 	transientModelConfig: blankModelConfig
 });
 
+const calibratedConfigObservables = computed<Observable[]>(() =>
+	knobs.value.transientModelConfig.observableSemanticList.map(({ referenceId, states, expression }) => ({
+		id: referenceId,
+		name: referenceId,
+		states,
+		expression
+	}))
+);
+
 const sanityCheckErrors = ref<string[]>([]);
 const isSaveDisabled = computed(() => knobs.value.transientModelConfig.name === '');
 
@@ -675,6 +697,10 @@ onUnmounted(() => {
 	background-color: var(--surface-0) !important;
 }
 
+:deep(.p-accordion-content) {
+	padding-bottom: var(--gap-2);
+}
+
 #notebook-section:deep(main) {
 	gap: var(--gap-small);
 	position: relative;
diff --git a/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-petrinet-tables.vue b/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-petrinet-tables.vue
deleted file mode 100644
index e69de29bb2..0000000000