From eccd02a8f61f6c0c4770c021b596705444585a45 Mon Sep 17 00:00:00 2001
From: Jaehwan Ryu <jryu@uncharted.software>
Date: Mon, 12 Aug 2024 16:36:38 -0400
Subject: [PATCH] 4276 parameter distribution charts (#4414)

---
 .../src/components/widgets/VegaChart.vue      |   6 +
 .../calibrate-ciemss/calibrate-operation.ts   |   6 +-
 .../tera-calibrate-ciemss-drilldown.vue       | 184 ++++++++++++++----
 .../tera-calibrate-node-ciemss.vue            |  25 +--
 .../src/services/calibrate-workflow.ts        |   7 +-
 .../client/hmi-client/src/services/charts.ts  |   5 +-
 .../client/hmi-client/src/services/model.ts   |  14 ++
 7 files changed, 188 insertions(+), 59 deletions(-)

diff --git a/packages/client/hmi-client/src/components/widgets/VegaChart.vue b/packages/client/hmi-client/src/components/widgets/VegaChart.vue
index 89c0baed99..b07de08841 100644
--- a/packages/client/hmi-client/src/components/widgets/VegaChart.vue
+++ b/packages/client/hmi-client/src/components/widgets/VegaChart.vue
@@ -4,6 +4,9 @@
 			{{ renderErrorMessage }}
 		</p>
 		<div ref="vegaContainer"></div>
+		<footer>
+			<slot name="footer" />
+		</footer>
 	</div>
 </template>
 
@@ -128,6 +131,9 @@ watch([vegaContainer, () => props.visualizationSpec], () => {
 	border: 1px solid var(--surface-border-light);
 	margin-bottom: var(--gap-4);
 	padding-top: var(--gap-2);
+	footer {
+		padding: var(--gap-3);
+	}
 }
 
 /* adjust style, position and rotation of action button */
diff --git a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/calibrate-operation.ts b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/calibrate-operation.ts
index 06fb47ff64..8838b9b228 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/calibrate-operation.ts
+++ b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/calibrate-operation.ts
@@ -6,7 +6,8 @@ const DOCUMENTATION_URL = 'https://github.com/ciemss/pyciemss/blob/main/pyciemss
 
 export interface CalibrationOperationStateCiemss extends BaseState {
 	method: string;
-	chartConfigs: string[][];
+	selectedParameters: string[];
+	selectedVariables: string[];
 	mapping: CalibrateMap[];
 	simulationsInProgress: string[];
 
@@ -51,7 +52,8 @@ export const CalibrationOperationCiemss: Operation = {
 	initState: () => {
 		const init: CalibrationOperationStateCiemss = {
 			method: 'dopri5',
-			chartConfigs: [],
+			selectedParameters: [],
+			selectedVariables: [],
 			mapping: [{ modelVariable: '', datasetVariable: '' }],
 			simulationsInProgress: [],
 			currentProgress: 0,
diff --git a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
index 11bb04d78a..16badab001 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
@@ -153,20 +153,56 @@
 
 				<!-- Variable charts -->
 				<div v-if="!showSpinner" class="form-section">
-					<h5>Variables</h5>
 					<section v-if="modelConfig && csvAsset" ref="outputPanel">
-						<template v-for="(cfg, index) of node.state.chartConfigs" :key="index">
-							<tera-chart-control
-								:chart-config="{ selectedRun: 'fixme', selectedVariable: cfg }"
-								:multi-select="false"
-								:show-remove-button="true"
-								:variables="Object.keys(pyciemssMap)"
-								@configuration-change="chartProxy.configurationChange(index, $event)"
-								@remove="chartProxy.removeChart(index)"
-							/>
-							<vega-chart :are-embed-actions-visible="true" :visualization-spec="preparedCharts[index]" />
+						<h5>Parameters</h5>
+						<tera-chart-control
+							:chart-config="{ selectedRun: 'fixme', selectedVariable: selectedParameters }"
+							:multi-select="true"
+							:show-remove-button="false"
+							:variables="Object.keys(pyciemssMap).filter((c) => modelPartTypesMap[c] === 'parameter')"
+							@configuration-change="updateSelectedParameters"
+						/>
+						<template v-for="param of node.state.selectedParameters" :key="param">
+							<vega-chart
+								:are-embed-actions-visible="true"
+								:visualization-spec="preparedDistributionCharts[param].histogram"
+							>
+								<template v-slot:footer>
+									<table class="distribution-table">
+										<thead>
+											<tr>
+												<th scope="col"></th>
+												<th scope="col">{{ preparedDistributionCharts[param].stat.header[0] }}</th>
+												<th scope="col">{{ preparedDistributionCharts[param].stat.header[1] }}</th>
+											</tr>
+										</thead>
+										<tbody>
+											<tr>
+												<th scope="row">Mean</th>
+												<td>{{ preparedDistributionCharts[param].stat.mean[0] }}</td>
+												<td>{{ preparedDistributionCharts[param].stat.mean[1] }}</td>
+											</tr>
+											<tr>
+												<th scope="row">Variance</th>
+												<td>{{ preparedDistributionCharts[param].stat.variance[0] }}</td>
+												<td>{{ preparedDistributionCharts[param].stat.variance[1] }}</td>
+											</tr>
+										</tbody>
+									</table>
+								</template>
+							</vega-chart>
+						</template>
+						<h5>Variables</h5>
+						<tera-chart-control
+							:chart-config="{ selectedRun: 'fixme', selectedVariable: selectedVariables }"
+							:multi-select="true"
+							:show-remove-button="false"
+							:variables="Object.keys(pyciemssMap).filter((c) => modelPartTypesMap[c] !== 'parameter')"
+							@configuration-change="updateSelectedVariables"
+						/>
+						<template v-for="variable of node.state.selectedVariables" :key="variable">
+							<vega-chart :are-embed-actions-visible="true" :visualization-spec="preparedCharts[variable]" />
 						</template>
-						<Button size="small" text @click="chartProxy.addChart()" label="Add chart" icon="pi pi-plus" />
 					</section>
 					<section v-else-if="!modelConfig" class="emptyState">
 						<img src="@assets/svg/seed.svg" alt="" draggable="false" />
@@ -187,7 +223,7 @@
 
 <script setup lang="ts">
 import _ from 'lodash';
-import { csvParse, autoType } from 'd3';
+import { csvParse, autoType, mean, variance } from 'd3';
 import { computed, onMounted, ref, shallowRef, watch } from 'vue';
 import Button from 'primevue/button';
 import DataTable from 'primevue/datatable';
@@ -210,7 +246,7 @@ import {
 	DatasetColumn,
 	ModelConfiguration
 } from '@/types/Types';
-import { getTimespan, chartActionsProxy, drilldownChartSize, nodeMetadata } from '@/components/workflow/util';
+import { getTimespan, drilldownChartSize, nodeMetadata } from '@/components/workflow/util';
 import { useToastService } from '@/services/toast';
 import { autoCalibrationMapping } from '@/services/concept';
 import {
@@ -225,11 +261,12 @@ import {
 } from '@/services/models/simulation-service';
 
 import type { WorkflowNode } from '@/types/workflow';
-import { createForecastChart } from '@/services/charts';
+import { createForecastChart, createHistogramChart } from '@/services/charts';
 import VegaChart from '@/components/widgets/VegaChart.vue';
 import TeraChartControl from '@/components/workflow/tera-chart-control.vue';
 import { CiemssPresetTypes, DrilldownTabs } from '@/types/common';
 import TeraInputText from '@/components/widgets/tera-input-text.vue';
+import { displayNumber } from '@/utils/number';
 import type { CalibrationOperationStateCiemss } from './calibrate-operation';
 import { renameFnGenerator, mergeResults } from './calibrate-utils';
 
@@ -283,6 +320,7 @@ const csvAsset = shallowRef<CsvAsset | undefined>(undefined);
 const modelConfig = ref<ModelConfiguration>();
 
 const modelVarUnits = ref<{ [key: string]: string }>({});
+const modelPartTypesMap = ref<{ [key: string]: string }>({});
 
 const modelConfigId = computed<string | undefined>(() => props.node.inputs[0]?.value?.[0]);
 const datasetId = computed<string | undefined>(() => props.node.inputs[1]?.value?.[0]);
@@ -361,12 +399,17 @@ const disableRunButton = computed(
 );
 
 const selectedOutputId = ref<string>();
+const outputPanel = ref(null);
+const chartSize = computed(() => drilldownChartSize(outputPanel.value));
+
+const selectedParameters = ref<string[]>(props.node.state.selectedParameters);
+const selectedVariables = ref<string[]>(props.node.state.selectedVariables);
 
 let pyciemssMap: Record<string, string> = {};
-const preparedCharts = computed(() => {
+const preparedChartInputs = computed(() => {
 	const state = props.node.state;
 
-	if (!state.calibrationId) return [];
+	if (!state.calibrationId) return null;
 
 	// Merge before/after for chart
 	const { result, resultSummary } = mergeResults(
@@ -385,6 +428,17 @@ const preparedCharts = computed(() => {
 	state.mapping.forEach((mapObj) => {
 		reverseMap[mapObj.datasetVariable] = 'Observations';
 	});
+	return {
+		result,
+		resultSummary,
+		reverseMap
+	};
+});
+
+const preparedCharts = computed(() => {
+	if (!preparedChartInputs.value) return [];
+	const { result, resultSummary, reverseMap } = preparedChartInputs.value;
+	const state = props.node.state;
 
 	// FIXME: Hacky re-parse CSV with correct data types
 	let groundTruth: DataArray = [];
@@ -397,25 +451,23 @@ const preparedCharts = computed(() => {
 	// Need to get the dataset's time field
 	const datasetTimeField = state.mapping.find((d) => d.modelVariable === 'timestamp')?.datasetVariable;
 
-	return state.chartConfigs.map((config) => {
+	const charts = {};
+	state.selectedVariables.forEach((variable) => {
 		const datasetVariables: string[] = [];
-		config.forEach((variableName) => {
-			const mapObj = state.mapping.find((d) => d.modelVariable === variableName);
-			if (mapObj) {
-				datasetVariables.push(mapObj.datasetVariable);
-			}
-		});
-
-		return createForecastChart(
+		const mapObj = state.mapping.find((d) => d.modelVariable === variable);
+		if (mapObj) {
+			datasetVariables.push(mapObj.datasetVariable);
+		}
+		charts[variable] = createForecastChart(
 			{
 				dataset: result,
-				variables: [...config.map((d) => `${pyciemssMap[d]}:pre`), ...config.map((d) => pyciemssMap[d])],
+				variables: [`${pyciemssMap[variable]}:pre`, pyciemssMap[variable]],
 				timeField: 'timepoint_id',
 				groupField: 'sample_id'
 			},
 			{
 				dataset: resultSummary,
-				variables: [...config.map((d) => `${pyciemssMap[d]}_mean:pre`), ...config.map((d) => `${pyciemssMap[d]}_mean`)],
+				variables: [`${pyciemssMap[variable]}_mean:pre`, `${pyciemssMap[variable]}_mean`],
 				timeField: 'timepoint_id'
 			},
 			{
@@ -425,24 +477,53 @@ const preparedCharts = computed(() => {
 				groupField: 'sample_id'
 			},
 			{
-				title: '',
+				title: variable,
 				width: chartSize.value.width,
 				height: chartSize.value.height,
 				legend: true,
 				translationMap: reverseMap,
 				xAxisTitle: modelVarUnits.value._time || 'Time',
-				yAxisTitle: _.uniq(config.map((v) => modelVarUnits.value[v]).filter((v) => !!v)).join(',') || '',
+				yAxisTitle: modelVarUnits.value[variable] || '',
 				colorscheme: ['#AAB3C6', '#1B8073']
 			}
 		);
 	});
+	return charts;
 });
 
-const outputPanel = ref(null);
-const chartSize = computed(() => drilldownChartSize(outputPanel.value));
-
-const chartProxy = chartActionsProxy(props.node, (state: CalibrationOperationStateCiemss) => {
-	emit('update-state', state);
+const preparedDistributionCharts = computed(() => {
+	if (!preparedChartInputs.value) return [];
+	const { result } = preparedChartInputs.value;
+	const state = props.node.state;
+	const labelBefore = 'Before calibration';
+	const labelAfter = 'After calibration';
+	const charts = {};
+	state.selectedParameters.forEach((param) => {
+		const fieldName = pyciemssMap[param];
+		const beforeFieldName = `${fieldName}:pre`;
+		const histogram = createHistogramChart(result, {
+			title: `${param}`,
+			width: chartSize.value.width,
+			height: chartSize.value.height,
+			xAxisTitle: `${param}`,
+			yAxisTitle: 'Count',
+			maxBins: 10,
+			variables: [
+				{ field: beforeFieldName, label: labelBefore, width: 54, color: '#AAB3C6' },
+				{ field: fieldName, label: labelAfter, width: 24, color: '#1B8073' }
+			]
+		});
+		const toDisplayNumber = (num?: number) => (num ? displayNumber(num.toString()) : '');
+		const stat = {
+			header: [labelBefore, labelAfter],
+			mean: [mean(result, (d) => d[beforeFieldName]), mean(result, (d) => d[fieldName])].map(toDisplayNumber),
+			variance: [variance(result, (d) => d[beforeFieldName]), variance(result, (d) => d[fieldName])].map(
+				toDisplayNumber
+			)
+		};
+		charts[param] = { histogram, stat };
+	});
+	return charts;
 });
 
 const runCalibrate = async () => {
@@ -510,6 +591,14 @@ const onSelection = (id: string) => {
 	emit('select-output', id);
 };
 
+function updateSelectedParameters(event) {
+	emit('update-state', { ...props.node.state, selectedParameters: event.selectedVariable });
+}
+
+function updateSelectedVariables(event) {
+	emit('update-state', { ...props.node.state, selectedVariables: event.selectedVariable });
+}
+
 // Used from button to add new entry to the mapping object
 function addMapping() {
 	mapping.value.push({
@@ -562,10 +651,13 @@ onMounted(async () => {
 	}
 
 	// Model configuration input
-	const { modelConfiguration, modelOptions, modelVariableUnits } = await setupModelInput(modelConfigId.value);
+	const { modelConfiguration, modelOptions, modelPartUnits, modelPartTypes } = await setupModelInput(
+		modelConfigId.value
+	);
 	modelConfig.value = modelConfiguration;
 	modelStateOptions.value = modelOptions;
-	modelVarUnits.value = modelVariableUnits ?? {};
+	modelVarUnits.value = modelPartUnits ?? {};
+	modelPartTypesMap.value = modelPartTypes ?? {};
 
 	// dataset input
 	const { filename, csv, datasetOptions } = await setupDatasetInput(datasetId.value);
@@ -720,4 +812,22 @@ img {
 	border: 1px solid var(--surface-border-light);
 	border-radius: var(--border-radius-medium);
 }
+
+.distribution-table {
+	width: 100%;
+	border-collapse: collapse;
+	thead {
+		background-color: var(--surface-200);
+	}
+	tr {
+		height: 1.75rem;
+	}
+	tbody tr {
+		border-bottom: 1px solid var(--surface-border-light);
+	}
+	td,
+	th {
+		text-align: center;
+	}
+}
 </style>
diff --git a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue
index 4c6fbeaad3..8753d07ec4 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-node-ciemss.vue
@@ -2,11 +2,11 @@
 	<main>
 		<template
 			v-if="
-				!inProgressCalibrationId && runResult && csvAsset && runResultPre && props.node.state.chartConfigs[0]?.length
+				!inProgressCalibrationId && runResult && csvAsset && runResultPre && props.node.state.selectedVariables?.length
 			"
 		>
 			<vega-chart
-				v-for="(_config, index) of props.node.state.chartConfigs"
+				v-for="(_var, index) of props.node.state.selectedVariables"
 				:key="index"
 				:are-embed-actions-visible="false"
 				:visualization-spec="preparedCharts[index]"
@@ -144,25 +144,23 @@ const preparedCharts = computed(() => {
 	// Need to get the dataset's time field
 	const datasetTimeField = state.mapping.find((d) => d.modelVariable === 'timestamp')?.datasetVariable;
 
-	return state.chartConfigs.map((config) => {
+	return state.selectedVariables.map((variable) => {
 		const datasetVariables: string[] = [];
-		config.forEach((variableName) => {
-			const mapObj = state.mapping.find((d) => d.modelVariable === variableName);
-			if (mapObj) {
-				datasetVariables.push(mapObj.datasetVariable);
-			}
-		});
+		const mapObj = state.mapping.find((d) => d.modelVariable === variable);
+		if (mapObj) {
+			datasetVariables.push(mapObj.datasetVariable);
+		}
 
 		return createForecastChart(
 			{
 				dataset: result,
-				variables: [...config.map((d) => `${pyciemssMap[d]}:pre`), ...config.map((d) => pyciemssMap[d])],
+				variables: [`${pyciemssMap[variable]}:pre`, pyciemssMap[variable]],
 				timeField: 'timepoint_id',
 				groupField: 'sample_id'
 			},
 			{
 				dataset: resultSummary,
-				variables: [...config.map((d) => `${pyciemssMap[d]}_mean:pre`), ...config.map((d) => `${pyciemssMap[d]}_mean`)],
+				variables: [`${pyciemssMap[variable]}_mean:pre`, `${pyciemssMap[variable]}_mean`],
 				timeField: 'timepoint_id'
 			},
 			{
@@ -177,7 +175,7 @@ const preparedCharts = computed(() => {
 				legend: true,
 				translationMap: reverseMap,
 				xAxisTitle: modelVarUnits.value._time || 'Time',
-				yAxisTitle: _.uniq(config.map((v) => modelVarUnits.value[v]).filter((v) => !!v)).join(',') || '',
+				yAxisTitle: modelVarUnits.value[variable] || '',
 				colorscheme: ['#AAB3C6', '#1B8073']
 			}
 		);
@@ -311,9 +309,6 @@ watch(
 
 		if (doneProcess) {
 			const state = _.cloneDeep(props.node.state);
-			if (state.chartConfigs.length === 0) {
-				state.chartConfigs = [[]];
-			}
 			state.forecastId = state.inProgressForecastId;
 			state.preForecastId = state.inProgressPreForecastId;
 
diff --git a/packages/client/hmi-client/src/services/calibrate-workflow.ts b/packages/client/hmi-client/src/services/calibrate-workflow.ts
index 59bf78c198..0570063ffd 100644
--- a/packages/client/hmi-client/src/services/calibrate-workflow.ts
+++ b/packages/client/hmi-client/src/services/calibrate-workflow.ts
@@ -3,7 +3,7 @@ import * as d3 from 'd3';
 import type { Dataset, CsvAsset } from '@/types/Types';
 import { getModelConfigurationById, getObservables } from '@/services/model-configurations';
 import { downloadRawFile, getDataset } from '@/services/dataset';
-import { getUnitsFromModelParts, getModelByModelConfigurationId } from '@/services/model';
+import { getUnitsFromModelParts, getModelByModelConfigurationId, getTypesFromModelParts } from '@/services/model';
 
 export interface CalibrateMap {
 	modelVariable: string;
@@ -19,7 +19,8 @@ export const setupModelInput = async (modelConfigId: string | undefined) => {
 			getModelByModelConfigurationId(modelConfigId)
 		]);
 
-		const modelVariableUnits = !model ? {} : getUnitsFromModelParts(model);
+		const modelPartUnits = !model ? {} : getUnitsFromModelParts(model);
+		const modelPartTypes = !model ? {} : getTypesFromModelParts(model);
 
 		const modelOptions: any[] = model?.model.states;
 
@@ -29,7 +30,7 @@ export const setupModelInput = async (modelConfigId: string | undefined) => {
 
 		modelOptions.push({ id: 'timestamp' });
 
-		return { modelConfiguration, modelOptions, modelVariableUnits };
+		return { modelConfiguration, modelOptions, modelPartUnits, modelPartTypes };
 	}
 	return {};
 };
diff --git a/packages/client/hmi-client/src/services/charts.ts b/packages/client/hmi-client/src/services/charts.ts
index e3e9e6f26e..48f2db9516 100644
--- a/packages/client/hmi-client/src/services/charts.ts
+++ b/packages/client/hmi-client/src/services/charts.ts
@@ -2,6 +2,7 @@ import API from '@/api/api';
 import { b64DecodeUnicode } from '@/utils/binary';
 import { percentile } from '@/utils/math';
 import { isEmpty } from 'lodash';
+import { VisualizationSpec } from 'vega-embed';
 import { v4 as uuidv4 } from 'uuid';
 
 const VEGALITE_SCHEMA = 'https://vega.github.io/schema/vega-lite/v5.json';
@@ -287,9 +288,9 @@ export function createHistogramChart(dataset: Record<string, any>[], options: Hi
 		}));
 	};
 
-	const spec = {
+	const spec: VisualizationSpec = {
 		$schema: VEGALITE_SCHEMA,
-		title: titleObj,
+		title: titleObj as any,
 		width: options.width,
 		height: options.height,
 		autosize: { type: 'fit' },
diff --git a/packages/client/hmi-client/src/services/model.ts b/packages/client/hmi-client/src/services/model.ts
index 49e88477d1..7aaefcfea0 100644
--- a/packages/client/hmi-client/src/services/model.ts
+++ b/packages/client/hmi-client/src/services/model.ts
@@ -189,6 +189,20 @@ export const getUnitsFromModelParts = (model: Model) => {
 	return unitMapping;
 };
 
+export const getTypesFromModelParts = (model: Model) => {
+	const typeMapping: { [key: string]: string } = {};
+	[...(model.model.states ?? [])].forEach((v) => {
+		typeMapping[v.id] = 'state';
+	});
+	[...(model.semantics?.ode?.parameters ?? [])].forEach((v) => {
+		typeMapping[v.id] = 'parameter';
+	});
+	(model.semantics?.ode?.observables || []).forEach((o) => {
+		typeMapping[o.id] = 'observable';
+	});
+	return typeMapping;
+};
+
 export function isInitial(obj: Initial | ModelParameter | null): obj is Initial {
 	return obj !== null && 'target' in obj && 'expression' in obj && 'expression_mathml' in obj;
 }