From 60631c7711d3167be47b7e7dd83fe1b2213f6d65 Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Wed, 7 Aug 2024 09:56:20 -0400
Subject: [PATCH 01/10] read only config view

---
 .../model-parts/tera-model-part-entry.vue     | 21 ++++-
 .../model/model-parts/tera-parameters.vue     |  9 +-
 .../model-config/model-config-operation.ts    |  3 +-
 .../tera-model-config-drilldown.vue           | 89 ++++++++++++++-----
 .../ops/model-config/tera-petrinet-tables.vue |  0
 packages/client/hmi-client/src/types/Model.ts |  4 +-
 6 files changed, 96 insertions(+), 30 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/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..7285945d35 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
@@ -62,6 +62,11 @@
 				@update:model-value="$emit('update-item', { key: 'description', value: $event })"
 			/>
 		</span>
+		<template v-if="item.distribution">
+			<span class="type"><label>Type</label> {{ item.distribution.type }}</span>
+			<span class="mean"><label>Mean</label> {{ item.distribution.parameters.mean }}</span>
+			<span class="std"> <label>STD</label> {{ item.distribution.parameters.stddev }}</span>
+		</template>
 	</section>
 </template>
 
@@ -106,7 +111,8 @@ section {
 	grid-template-areas:
 		'symbol name unit . concept'
 		'expression expression expression expression expression'
-		'description description description description description';
+		'description description description description description'
+		'type mean std . .';
 	grid-template-columns: max-content max-content max-content auto max-content;
 	gap: var(--gap-2);
 	align-items: center;
@@ -137,6 +143,7 @@ h6 {
 
 .description {
 	grid-area: description;
+	color: var(--text-color-subdued);
 }
 
 .unit {
@@ -158,6 +165,18 @@ h6 {
 	gap: var(--gap-1);
 }
 
+.type {
+	grid-area: type;
+}
+
+.mean {
+	grid-area: mean;
+}
+
+.std {
+	grid-area: std;
+}
+
 :deep(.p-autocomplete-input) {
 	padding: var(--gap-1) var(--gap-2);
 }
diff --git a/packages/client/hmi-client/src/components/model/model-parts/tera-parameters.vue b/packages/client/hmi-client/src/components/model/model-parts/tera-parameters.vue
index 790fa6d788..4fce0376b0 100644
--- a/packages/client/hmi-client/src/components/model/model-parts/tera-parameters.vue
+++ b/packages/client/hmi-client/src/components/model/model-parts/tera-parameters.vue
@@ -22,7 +22,7 @@
 import { ref, computed } from 'vue';
 import { StratifiedMatrix } from '@/types/Model';
 import type { ModelPartItem } from '@/types/Model';
-import { Model } from '@/types/Types';
+import { Model, InferredParameterSemantic } from '@/types/Types';
 import { MiraModel, MiraTemplateParams } from '@/model-representation/mira/mira-common';
 import { getParameters } from '@/model-representation/service';
 import { collapseParameters } from '@/model-representation/mira/mira';
@@ -35,6 +35,7 @@ const props = defineProps<{
 	mmt: MiraModel;
 	mmtParams: MiraTemplateParams;
 	featureConfig: FeatureConfig;
+	inferredParameters?: InferredParameterSemantic[];
 }>();
 
 const emit = defineEmits(['update-parameter']);
@@ -60,7 +61,8 @@ const parameterList = computed<
 					name: p.name,
 					description: p.description,
 					grounding: p.grounding,
-					unitExpression: p.units?.expression
+					unitExpression: p.units?.expression,
+					distribution: props.inferredParameters?.find((i) => i.referenceId === childId)?.distribution
 				};
 			})
 			.filter(Boolean) as ModelPartItem[];
@@ -74,7 +76,8 @@ const parameterList = computed<
 						name: baseParameter.name,
 						description: baseParameter.description,
 						grounding: baseParameter.grounding,
-						unitExpression: baseParameter.units?.expression
+						unitExpression: baseParameter.units?.expression,
+						distribution: props.inferredParameters?.find((i) => i.referenceId === id)?.distribution
 					};
 
 		return { base, children, isParent };
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..6ab5561aae 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
@@ -97,30 +97,61 @@
 					<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>
+				<!--Calibrated config (read only)-->
+				<template v-if="!isEmpty(knobs.transientModelConfig.inferredParameterList)">
+					<Accordion multiple :active-index="[0, 1]">
+						<AccordionTab>
+							<template #header>
+								State variables<span class="artifact-amount">({{ Object.keys(mmt.initials).length }})</span>
+							</template>
+							<tera-states
+								v-if="!isEmpty(mmt.initials)"
+								:model="model"
+								:mmt="mmt"
+								:feature-config="{ isPreview: true }"
+						/></AccordionTab>
+						<AccordionTab
+							><template #header>
+								Parameters<span class="artifact-amount">({{ Object.keys(mmt.parameters).length }})</span>
+							</template>
+							<tera-parameters
+								v-if="!isEmpty(mmt.parameters)"
+								:model="model"
+								:mmt="mmt"
+								:mmt-params="mmtParams"
+								:inferred-parameters="knobs.transientModelConfig.inferredParameterList"
+								:feature-config="{ isPreview: true }"
+						/></AccordionTab>
+					</Accordion>
+				</template>
+				<!--Regular config-->
+				<template v-else>
+					<tera-initial-table
+						v-if="!isEmpty(knobs.transientModelConfig) && !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(knobs.transientModelConfig) && !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)"
+					/>
+				</template>
+			</template>
 		</tera-drilldown-section>
 		<tera-columnar-panel :tabName="ConfigTabs.Notebook">
 			<tera-drilldown-section id="notebook-section">
@@ -251,6 +282,8 @@ import TeraSliderPanel from '@/components/widgets/tera-slider-panel.vue';
 import { useConfirm } from 'primevue/useconfirm';
 import Dropdown from 'primevue/dropdown';
 import TeraToggleableEdit from '@/components/widgets/tera-toggleable-edit.vue';
+import TeraStates from '@/components/model/model-parts/tera-states.vue';
+import TeraParameters from '@/components/model/model-parts/tera-parameters.vue';
 import TeraModelConfigurationItem from './tera-model-configuration-item.vue';
 import { ModelConfigOperation, ModelConfigOperationState, blankModelConfig } from './model-config-operation';
 
@@ -569,6 +602,7 @@ const onSelectConfiguration = (config: ModelConfiguration) => {
 const applyConfigValues = (config: ModelConfiguration) => {
 	const state = cloneDeep(props.node.state);
 	knobs.value.transientModelConfig = cloneDeep(config);
+	console.log(config);
 
 	// Update output port:
 	if (!config.id) {
@@ -675,6 +709,13 @@ onUnmounted(() => {
 	background-color: var(--surface-0) !important;
 }
 
+.artifact-amount {
+	font-size: var(--font-caption);
+	color: var(--text-color-subdued);
+	margin-left: var(--gap-1);
+	margin-right: auto;
+}
+
 #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
diff --git a/packages/client/hmi-client/src/types/Model.ts b/packages/client/hmi-client/src/types/Model.ts
index c490d595a3..8a7e8e9ba5 100644
--- a/packages/client/hmi-client/src/types/Model.ts
+++ b/packages/client/hmi-client/src/types/Model.ts
@@ -1,4 +1,4 @@
-import { ModelGrounding } from '@/types/Types';
+import { ModelGrounding, ModelDistribution } from '@/types/Types';
 import { CONCEPT_FACETS_DISPLAY_NAME, CONCEPT_FACETS_FIELD } from './Concept';
 import { Filters } from './Filter';
 
@@ -22,6 +22,8 @@ export type ModelPartItem = {
 	templateId?: string;
 	input?: string;
 	output?: string;
+	// Calibrated config
+	distribution?: ModelDistribution;
 };
 
 export enum StratifiedMatrix {

From 57221d82dadf4482e2b49c99be00e55b86e8fb8c Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Wed, 7 Aug 2024 11:51:55 -0400
Subject: [PATCH 02/10] use whats already here

---
 .../model-parts/tera-model-part-entry.vue     |   8 +-
 .../model/model-parts/tera-parameters.vue     |   9 +-
 .../model/petrinet/tera-initial-entry.vue     |  43 +++---
 .../model/petrinet/tera-initial-table.vue     |   2 +-
 .../model/petrinet/tera-parameter-entry.vue   | 129 +++++++++++-------
 .../model/petrinet/tera-parameter-table.vue   |   4 +-
 .../tera-model-config-drilldown.vue           |  77 ++++-------
 7 files changed, 135 insertions(+), 137 deletions(-)

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 7285945d35..da57a5869c 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
@@ -62,11 +62,6 @@
 				@update:model-value="$emit('update-item', { key: 'description', value: $event })"
 			/>
 		</span>
-		<template v-if="item.distribution">
-			<span class="type"><label>Type</label> {{ item.distribution.type }}</span>
-			<span class="mean"><label>Mean</label> {{ item.distribution.parameters.mean }}</span>
-			<span class="std"> <label>STD</label> {{ item.distribution.parameters.stddev }}</span>
-		</template>
 	</section>
 </template>
 
@@ -111,8 +106,7 @@ section {
 	grid-template-areas:
 		'symbol name unit . concept'
 		'expression expression expression expression expression'
-		'description description description description description'
-		'type mean std . .';
+		'description description description description description';
 	grid-template-columns: max-content max-content max-content auto max-content;
 	gap: var(--gap-2);
 	align-items: center;
diff --git a/packages/client/hmi-client/src/components/model/model-parts/tera-parameters.vue b/packages/client/hmi-client/src/components/model/model-parts/tera-parameters.vue
index 4fce0376b0..790fa6d788 100644
--- a/packages/client/hmi-client/src/components/model/model-parts/tera-parameters.vue
+++ b/packages/client/hmi-client/src/components/model/model-parts/tera-parameters.vue
@@ -22,7 +22,7 @@
 import { ref, computed } from 'vue';
 import { StratifiedMatrix } from '@/types/Model';
 import type { ModelPartItem } from '@/types/Model';
-import { Model, InferredParameterSemantic } from '@/types/Types';
+import { Model } from '@/types/Types';
 import { MiraModel, MiraTemplateParams } from '@/model-representation/mira/mira-common';
 import { getParameters } from '@/model-representation/service';
 import { collapseParameters } from '@/model-representation/mira/mira';
@@ -35,7 +35,6 @@ const props = defineProps<{
 	mmt: MiraModel;
 	mmtParams: MiraTemplateParams;
 	featureConfig: FeatureConfig;
-	inferredParameters?: InferredParameterSemantic[];
 }>();
 
 const emit = defineEmits(['update-parameter']);
@@ -61,8 +60,7 @@ const parameterList = computed<
 					name: p.name,
 					description: p.description,
 					grounding: p.grounding,
-					unitExpression: p.units?.expression,
-					distribution: props.inferredParameters?.find((i) => i.referenceId === childId)?.distribution
+					unitExpression: p.units?.expression
 				};
 			})
 			.filter(Boolean) as ModelPartItem[];
@@ -76,8 +74,7 @@ const parameterList = computed<
 						name: baseParameter.name,
 						description: baseParameter.description,
 						grounding: baseParameter.grounding,
-						unitExpression: baseParameter.units?.expression,
-						distribution: props.inferredParameters?.find((i) => i.referenceId === id)?.distribution
+						unitExpression: baseParameter.units?.expression
 					};
 
 		return { base, children, isParent };
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..656270cd3e 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
@@ -9,26 +9,28 @@
 					<span class="ml-1">{{ unit }}</span>
 				</template>
 			</div>
-			<span v-if="description" class="ml-4">{{ description }}</span>
+			<span v-if="description" class="description">{{ description }}</span>
 		</header>
-		<main>
-			<span class="expression">
+		<template v-if="isEmpty(modelConfiguration.inferredParameterList)">
+			<main>
+				<span class="expression">
+					<tera-input-text
+						label="Expression"
+						:model-value="getInitialExpression(modelConfiguration, initialId)"
+						@update:model-value="emit('update-expression', { id: initialId, value: $event })"
+					/>
+				</span>
+				<Button :label="getSourceLabel(initialId)" text size="small" @click="sourceOpen = !sourceOpen" />
+				<Button :label="getOtherValuesLabel" text size="small" @click="showOtherConfigValueModal = true" />
+			</main>
+			<footer v-if="sourceOpen">
 				<tera-input-text
-					label="Expression"
-					:model-value="getInitialExpression(modelConfiguration, initialId)"
-					@update:model-value="emit('update-expression', { id: initialId, value: $event })"
+					placeholder="Add a source"
+					:model-value="getInitialSource(modelConfiguration, initialId)"
+					@update:model-value="emit('update-source', { id: initialId, value: $event })"
 				/>
-			</span>
-			<Button :label="getSourceLabel(initialId)" text size="small" @click="sourceOpen = !sourceOpen" />
-			<Button :label="getOtherValuesLabel" text size="small" @click="showOtherConfigValueModal = true" />
-		</main>
-		<footer v-if="sourceOpen">
-			<tera-input-text
-				placeholder="Add a source"
-				:model-value="getInitialSource(modelConfiguration, initialId)"
-				@update:model-value="emit('update-source', { id: initialId, value: $event })"
-			/>
-		</footer>
+			</footer>
+		</template>
 	</div>
 	<tera-initial-other-value-modal
 		v-if="showOtherConfigValueModal"
@@ -44,6 +46,7 @@
 </template>
 
 <script setup lang="ts">
+import { isEmpty } from 'lodash';
 import { DistributionType } from '@/services/distribution';
 import { Model, ModelConfiguration } from '@/types/Types';
 import { getInitialExpression, getInitialSource, getOtherValues } from '@/services/model-configurations';
@@ -86,7 +89,11 @@ const getOtherValuesLabel = computed(() => `Other Values(${otherValueList.value?
 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..b36a552156 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
@@ -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="
+		<template v-if="isEmpty(modelConfiguration.inferredParameterList)">
+			<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>
+					<!-- 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 v-else-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>
-			<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>
+			<span class="std">
+				<label>STD</label> {{ displayNumber(inferredDistribution?.parameters?.stddev.toString()) }}
+			</span>
+		</div>
 	</div>
 	<tera-parameter-other-value-modal
 		v-if="showOtherConfigValueModal"
@@ -93,6 +104,7 @@
 </template>
 
 <script setup lang="ts">
+import { isEmpty } from 'lodash';
 import { Model, ModelConfiguration } from '@/types/Types';
 import { getParameterSource, getParameterDistribution, getOtherValues } from '@/services/model-configurations';
 import TeraInputText from '@/components/widgets/tera-input-text.vue';
@@ -103,6 +115,7 @@ 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';
 
 const props = defineProps<{
 	model: Model;
@@ -117,6 +130,9 @@ 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 = props.modelConfiguration.inferredParameterList?.find(
+	(param) => param.referenceId === props.parameterId
+)?.distribution;
 
 const isSourceOpen = ref(false);
 const showOtherConfigValueModal = ref(false);
@@ -167,6 +183,10 @@ main {
 	padding-bottom: var(--gap-small);
 }
 
+.description {
+	color: var(--text-color-subdued);
+}
+
 :deep(.p-dropdown-label) {
 	min-width: 10rem;
 }
@@ -174,4 +194,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/tera-model-config-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-config-drilldown.vue
index 6ab5561aae..96a99a1ca0 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
@@ -101,56 +101,27 @@
 				<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>
-				<!--Calibrated config (read only)-->
-				<template v-if="!isEmpty(knobs.transientModelConfig.inferredParameterList)">
-					<Accordion multiple :active-index="[0, 1]">
-						<AccordionTab>
-							<template #header>
-								State variables<span class="artifact-amount">({{ Object.keys(mmt.initials).length }})</span>
-							</template>
-							<tera-states
-								v-if="!isEmpty(mmt.initials)"
-								:model="model"
-								:mmt="mmt"
-								:feature-config="{ isPreview: true }"
-						/></AccordionTab>
-						<AccordionTab
-							><template #header>
-								Parameters<span class="artifact-amount">({{ Object.keys(mmt.parameters).length }})</span>
-							</template>
-							<tera-parameters
-								v-if="!isEmpty(mmt.parameters)"
-								:model="model"
-								:mmt="mmt"
-								:mmt-params="mmtParams"
-								:inferred-parameters="knobs.transientModelConfig.inferredParameterList"
-								:feature-config="{ isPreview: true }"
-						/></AccordionTab>
-					</Accordion>
-				</template>
-				<!--Regular config-->
-				<template v-else>
-					<tera-initial-table
-						v-if="!isEmpty(knobs.transientModelConfig) && !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(knobs.transientModelConfig) && !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)"
-					/>
-				</template>
+				<tera-initial-table
+					v-if="!isEmpty(knobs.transientModelConfig) && !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(knobs.transientModelConfig) && !isEmpty(mmt.parameters)"
+					:model="model"
+					:model-configuration="knobs.transientModelConfig"
+					:modelConfigurations="filteredModelConfigurations"
+					:mmt="mmt"
+					:mmt-params="mmtParams"
+					:feature-config="{ isPreview: true }"
+					@update-parameters="setParameterDistributions(knobs.transientModelConfig, $event)"
+					@update-source="setParameterSource(knobs.transientModelConfig, $event.id, $event.value)"
+				/>
 			</template>
 		</tera-drilldown-section>
 		<tera-columnar-panel :tabName="ConfigTabs.Notebook">
@@ -282,8 +253,6 @@ import TeraSliderPanel from '@/components/widgets/tera-slider-panel.vue';
 import { useConfirm } from 'primevue/useconfirm';
 import Dropdown from 'primevue/dropdown';
 import TeraToggleableEdit from '@/components/widgets/tera-toggleable-edit.vue';
-import TeraStates from '@/components/model/model-parts/tera-states.vue';
-import TeraParameters from '@/components/model/model-parts/tera-parameters.vue';
 import TeraModelConfigurationItem from './tera-model-configuration-item.vue';
 import { ModelConfigOperation, ModelConfigOperationState, blankModelConfig } from './model-config-operation';
 
@@ -709,6 +678,10 @@ onUnmounted(() => {
 	background-color: var(--surface-0) !important;
 }
 
+:deep(.p-accordion-content) {
+	padding-bottom: var(--gap-2);
+}
+
 .artifact-amount {
 	font-size: var(--font-caption);
 	color: var(--text-color-subdued);

From 190871adedfa31362c4631d56dfe01e7574e9702 Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Wed, 7 Aug 2024 11:53:23 -0400
Subject: [PATCH 03/10] revert

---
 .../model/model-parts/tera-model-part-entry.vue      | 12 ------------
 packages/client/hmi-client/src/types/Model.ts        |  4 +---
 2 files changed, 1 insertion(+), 15 deletions(-)

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 da57a5869c..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
@@ -159,18 +159,6 @@ h6 {
 	gap: var(--gap-1);
 }
 
-.type {
-	grid-area: type;
-}
-
-.mean {
-	grid-area: mean;
-}
-
-.std {
-	grid-area: std;
-}
-
 :deep(.p-autocomplete-input) {
 	padding: var(--gap-1) var(--gap-2);
 }
diff --git a/packages/client/hmi-client/src/types/Model.ts b/packages/client/hmi-client/src/types/Model.ts
index 8a7e8e9ba5..c490d595a3 100644
--- a/packages/client/hmi-client/src/types/Model.ts
+++ b/packages/client/hmi-client/src/types/Model.ts
@@ -1,4 +1,4 @@
-import { ModelGrounding, ModelDistribution } from '@/types/Types';
+import { ModelGrounding } from '@/types/Types';
 import { CONCEPT_FACETS_DISPLAY_NAME, CONCEPT_FACETS_FIELD } from './Concept';
 import { Filters } from './Filter';
 
@@ -22,8 +22,6 @@ export type ModelPartItem = {
 	templateId?: string;
 	input?: string;
 	output?: string;
-	// Calibrated config
-	distribution?: ModelDistribution;
 };
 
 export enum StratifiedMatrix {

From 8766460529c6fc400a3d5703cad48086b66a1958 Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Wed, 7 Aug 2024 11:55:46 -0400
Subject: [PATCH 04/10] rm log

---
 .../ops/model-config/tera-model-config-drilldown.vue      | 8 --------
 1 file changed, 8 deletions(-)

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 96a99a1ca0..3a417a279d 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
@@ -571,7 +571,6 @@ const onSelectConfiguration = (config: ModelConfiguration) => {
 const applyConfigValues = (config: ModelConfiguration) => {
 	const state = cloneDeep(props.node.state);
 	knobs.value.transientModelConfig = cloneDeep(config);
-	console.log(config);
 
 	// Update output port:
 	if (!config.id) {
@@ -682,13 +681,6 @@ onUnmounted(() => {
 	padding-bottom: var(--gap-2);
 }
 
-.artifact-amount {
-	font-size: var(--font-caption);
-	color: var(--text-color-subdued);
-	margin-left: var(--gap-1);
-	margin-right: auto;
-}
-
 #notebook-section:deep(main) {
 	gap: var(--gap-small);
 	position: relative;

From b37e280350ec6a7d5add323818ed38835c999dc5 Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Wed, 7 Aug 2024 13:08:10 -0400
Subject: [PATCH 05/10] add concepts

---
 .../model/petrinet/tera-initial-entry.vue     | 19 +++++++++++++++----
 .../model/petrinet/tera-parameter-entry.vue   | 12 +++++++++---
 2 files changed, 24 insertions(+), 7 deletions(-)

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 656270cd3e..ca51f25166 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,13 +1,17 @@
 <template>
 	<div>
 		<header>
-			<div>
+			<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>
+				<span class="ml-auto">
+					<label>Concept</label>
+					<span class="ml-1">{{ concept }}</span>
+				</span>
 			</div>
 			<span v-if="description" class="description">{{ description }}</span>
 		</header>
@@ -47,14 +51,15 @@
 
 <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';
 
 const props = defineProps<{
 	model: Model;
@@ -73,16 +78,22 @@ 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>
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 b36a552156..6da0696ab6 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">
@@ -105,17 +105,18 @@
 
 <script setup lang="ts">
 import { isEmpty } from 'lodash';
+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;
@@ -129,11 +130,11 @@ 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 = props.modelConfiguration.inferredParameterList?.find(
 	(param) => param.referenceId === props.parameterId
 )?.distribution;
 
+const concept = ref('');
 const isSourceOpen = ref(false);
 const showOtherConfigValueModal = ref(false);
 
@@ -168,6 +169,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>

From 924937039c5a84728a06d328a61e8f22bc60a240 Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Wed, 7 Aug 2024 13:17:53 -0400
Subject: [PATCH 06/10] show concept if it exists

---
 .../src/components/model/petrinet/tera-initial-entry.vue    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

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 ca51f25166..0caa3514ae 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
@@ -8,10 +8,10 @@
 					<label class="ml-2">Unit</label>
 					<span class="ml-1">{{ unit }}</span>
 				</template>
-				<span class="ml-auto">
-					<label>Concept</label>
+				<template v-if="concept">
+					<label class="ml-auto">Concept</label>
 					<span class="ml-1">{{ concept }}</span>
-				</span>
+				</template>
 			</div>
 			<span v-if="description" class="description">{{ description }}</span>
 		</header>

From ea802e31ef20503c4d50b03cd17c3afeadca97cd Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Wed, 7 Aug 2024 14:00:08 -0400
Subject: [PATCH 07/10] padding

---
 .../src/components/drilldown/tera-drilldown-header.vue          | 2 +-
 .../workflow/ops/model-config/tera-model-config-drilldown.vue   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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/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 3a417a279d..39dd12886f 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
@@ -65,7 +65,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"

From ccf9f0aade26b3060d3e1163430caa3d637becba Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Wed, 7 Aug 2024 16:44:32 -0400
Subject: [PATCH 08/10] stddev

---
 .../src/components/model/petrinet/tera-parameter-entry.vue      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 6da0696ab6..7ee16a5b11 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
@@ -88,7 +88,7 @@
 				<label>Mean</label> {{ displayNumber(inferredDistribution?.parameters?.mean.toString()) }}
 			</span>
 			<span class="std">
-				<label>STD</label> {{ displayNumber(inferredDistribution?.parameters?.stddev.toString()) }}
+				<label>STDDEV</label> {{ displayNumber(inferredDistribution?.parameters?.stddev.toString()) }}
 			</span>
 		</div>
 	</div>

From 52a1f421cbdd42346fa2129e49cb68948533d285 Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Fri, 9 Aug 2024 12:27:21 -0400
Subject: [PATCH 09/10] initials and observables

---
 .../model/petrinet/tera-initial-entry.vue     | 75 ++++++++++---------
 .../model/petrinet/tera-parameter-entry.vue   | 29 +++----
 .../tera-model-config-drilldown.vue           | 67 +++++++++++------
 3 files changed, 100 insertions(+), 71 deletions(-)

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 0caa3514ae..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,41 +1,45 @@
 <template>
-	<div>
-		<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
-						label="Expression"
-						:model-value="getInitialExpression(modelConfiguration, initialId)"
-						@update:model-value="emit('update-expression', { id: initialId, value: $event })"
-					/>
-				</span>
-				<Button :label="getSourceLabel(initialId)" text size="small" @click="sourceOpen = !sourceOpen" />
-				<Button :label="getOtherValuesLabel" text size="small" @click="showOtherConfigValueModal = true" />
-			</main>
-			<footer v-if="sourceOpen">
+	<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
-					placeholder="Add a source"
-					:model-value="getInitialSource(modelConfiguration, initialId)"
-					@update:model-value="emit('update-source', { id: initialId, value: $event })"
+					label="Expression"
+					:model-value="getInitialExpression(modelConfiguration, initialId)"
+					@update:model-value="emit('update-expression', { id: initialId, value: $event })"
 				/>
-			</footer>
-		</template>
-	</div>
+			</span>
+			<Button :label="getSourceLabel(initialId)" text size="small" @click="sourceOpen = !sourceOpen" />
+			<Button :label="getOtherValuesLabel" text size="small" @click="showOtherConfigValueModal = true" />
+		</main>
+		<footer v-if="sourceOpen">
+			<tera-input-text
+				placeholder="Add a source"
+				:model-value="getInitialSource(modelConfiguration, initialId)"
+				@update:model-value="emit('update-source', { id: initialId, value: $event })"
+			/>
+		</footer>
+	</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"
@@ -60,6 +64,7 @@ import TeraInitialOtherValueModal from '@/components/model/petrinet/tera-initial
 import Button from 'primevue/button';
 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;
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 7ee16a5b11..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
@@ -17,7 +17,16 @@
 
 			<span class="description" v-if="description">{{ description }}</span>
 		</header>
-		<template v-if="isEmpty(modelConfiguration.inferredParameterList)">
+		<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
@@ -82,15 +91,6 @@
 				/>
 			</footer>
 		</template>
-		<div v-else-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>
 	</div>
 	<tera-parameter-other-value-modal
 		v-if="showOtherConfigValueModal"
@@ -104,7 +104,6 @@
 </template>
 
 <script setup lang="ts">
-import { isEmpty } from 'lodash';
 import { computed, ref, onMounted } from 'vue';
 import { Model, ModelConfiguration } from '@/types/Types';
 import { getParameterSource, getParameterDistribution, getOtherValues } from '@/services/model-configurations';
@@ -130,9 +129,11 @@ 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 inferredDistribution = props.modelConfiguration.inferredParameterList?.find(
-	(param) => param.referenceId === props.parameterId
-)?.distribution;
+const inferredDistribution = computed(
+	() =>
+		props.modelConfiguration.inferredParameterList?.find((param) => param.referenceId === props.parameterId)
+			?.distribution
+);
 
 const concept = ref('');
 const isSourceOpen = ref(false);
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 39dd12886f..f26c6b2ad1 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
@@ -101,27 +101,40 @@
 				<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>
-				<tera-initial-table
-					v-if="!isEmpty(knobs.transientModelConfig) && !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(knobs.transientModelConfig) && !isEmpty(mmt.parameters)"
-					:model="model"
-					:model-configuration="knobs.transientModelConfig"
-					:modelConfigurations="filteredModelConfigurations"
-					:mmt="mmt"
-					:mmt-params="mmtParams"
-					:feature-config="{ isPreview: true }"
-					@update-parameters="setParameterDistributions(knobs.transientModelConfig, $event)"
-					@update-source="setParameterSource(knobs.transientModelConfig, $event.id, $event.value)"
-				/>
+				<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"
+						:feature-config="{ isPreview: true }"
+						@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">
@@ -223,6 +236,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';
@@ -242,7 +256,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';
@@ -290,6 +304,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 === '');
 

From 29a12e3f3a029158f310ecf6cfd75f7222fdd910 Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Fri, 9 Aug 2024 13:22:51 -0400
Subject: [PATCH 10/10] props warnings

---
 .../ops/model-config/tera-model-config-drilldown.vue         | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

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 f26c6b2ad1..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>
@@ -119,7 +117,6 @@
 						:modelConfigurations="filteredModelConfigurations"
 						:mmt="mmt"
 						:mmt-params="mmtParams"
-						:feature-config="{ isPreview: true }"
 						@update-parameters="setParameterDistributions(knobs.transientModelConfig, $event)"
 						@update-source="setParameterSource(knobs.transientModelConfig, $event.id, $event.value)"
 					/>