heatmap scatter switch for sensitivity-charts

packages/client/hmi-client/src/components/widgets/tera-chart-settings.vue

@@ -54,7 +54,8 @@
 				@change="
 					$emit('sensitivity-selection-change', {
 						selectedInputVariables: $event.value,
-						timepoint: sensitivityOptions.timepoint
+						timepoint: sensitivityOptions.timepoint,
+						chartType: sensitivityOptions.chartType
 					})
 				"
 			>
@@ -67,18 +68,35 @@
 			</MultiSelect>
 
 			<div class="mb-2"></div>
-			<label :class="_.isEmpty(selectedOptions) ? 'disabled' : ''">Select time slice of interest</label>
+			<label :class="{ disabled: isEmpty(selectedOptions) }">Select time slice of interest</label>
 			<tera-input-number
 				:disabled="_.isEmpty(selectedOptions)"
 				:model-value="sensitivityOptions.timepoint"
 				@update:model-value="
 					$emit('sensitivity-selection-change', {
 						selectedInputVariables: sensitivityOptions.selectedInputOptions,
-						timepoint: $event
+						timepoint: $event,
+						chartType: sensitivityOptions.chartType
 					})
 				"
 			/>
 			<div class="mb-1"></div>
+			<div v-for="option in sensitivityChartOptions" class="flex align-items-center gap-2" :key="option.value">
+				<RadioButton
+					:disabled="_.isEmpty(selectedOptions)"
+					:model-value="sensitivityOptions.chartType"
+					:value="option.value"
+					name="sensitivityChartTypes"
+					@change="
+						$emit('sensitivity-selection-change', {
+							selectedInputVariables: sensitivityOptions.selectedInputOptions,
+							timepoint: sensitivityOptions.timepoint,
+							chartType: option.value
+						})
+					"
+				/>
+				<label :class="{ disabled: isEmpty(selectedOptions) }" :for="option.value">{{ option.label }}</label>
+			</div>
 		</template>
 		<template v-if="type === ChartSettingType.VARIABLE_COMPARISON">
 			<!-- TODO: Move this part to it's own component, tera-chart-settings-item-comparison or inside tera-char-settings-item -->
@@ -118,11 +136,12 @@ import TeraCheckbox from '@/components/widgets/tera-checkbox.vue';
 import TeraChartSettingsItem from '@/components/widgets/tera-chart-settings-item.vue';
 import TeraChartControl from '@/components/workflow/tera-chart-control.vue';
 import MultiSelect from 'primevue/multiselect';
-import { ChartSetting, ChartSettingType } from '@/types/common';
+import { ChartSetting, ChartSettingType, SensitivityChartType } from '@/types/common';
 import { computed } from 'vue';
 import Button from 'primevue/button';
 import { EnsembleVariableChartSettingOption, getEnsembleChartSettingOptions } from '@/services/chart-settings';
-import _ from 'lodash';
+import _, { isEmpty } from 'lodash';
+import RadioButton from 'primevue/radiobutton';
 import TeraInputNumber from './tera-input-number.vue';
 
 const props = defineProps<{
@@ -146,6 +165,7 @@ const props = defineProps<{
 		inputOptions: string[];
 		selectedInputOptions: string[];
 		timepoint: number;
+		chartType: SensitivityChartType;
 	};
 }>();
 const emits = defineEmits([
@@ -157,6 +177,11 @@ const emits = defineEmits([
 	'comparison-selection-change'
 ]);
 
+const sensitivityChartOptions = [
+	{ label: 'Scatter', value: SensitivityChartType.SCATTER },
+	{ label: 'Heatmap', value: SensitivityChartType.HEATMAP }
+];
+
 // Settings of the same type that we want to interact with.
 const targetSettings = computed(() => props.settings.filter((s) => s.type === props.type));
 

packages/client/hmi-client/src/components/workflow/ops/simulate-ciemss/tera-simulate-ciemss-drilldown.vue

@@ -400,14 +400,16 @@
 							:sensitivity-options="{
 								inputOptions: Object.keys(pyciemssMap).filter((c) => ['parameter'].includes(modelPartTypesMap[c])),
 								selectedInputOptions: selectedSensitivityChartSettings[0]?.selectedInputVariables ?? [],
-								timepoint: selectedSensitivityChartSettings[0]?.timepoint ?? lastTimepoint
+								timepoint: selectedSensitivityChartSettings[0]?.timepoint ?? lastTimepoint,
+								chartType: selectedSensitivityChartSettings[0]?.chartType ?? SensitivityChartType.SCATTER
 							}"
 							@selection-change="
 								(e) =>
 									updateSensitivityChartSettings({
 										selectedVariables: e,
 										selectedInputVariables: selectedSensitivityChartSettings[0]?.selectedInputVariables ?? [],
-										timepoint: selectedSensitivityChartSettings[0]?.timepoint ?? lastTimepoint
+										timepoint: selectedSensitivityChartSettings[0]?.timepoint ?? lastTimepoint,
+										chartType: selectedSensitivityChartSettings[0]?.chartType ?? SensitivityChartType.SCATTER
 									})
 							"
 							@sensitivity-selection-change="
@@ -474,7 +476,7 @@ import {
 	CiemssMethodOptions
 } from '@/services/models/simulation-service';
 import { logger } from '@/utils/logger';
-import { ChartSettingType, CiemssPresetTypes, DrilldownTabs } from '@/types/common';
+import { ChartSettingType, CiemssPresetTypes, DrilldownTabs, SensitivityChartType } from '@/types/common';
 import VegaChart from '@/components/widgets/VegaChart.vue';
 import { KernelSessionManager } from '@/services/jupyter';
 import TeraChartSettings from '@/components/widgets/tera-chart-settings.vue';

packages/client/hmi-client/src/components/workflow/ops/simulate-ciemss/tera-simulate-node-ciemss.vue

@@ -116,7 +116,8 @@ const processResult = async () => {
 		state.chartSettings = updateSensitivityChartSettingOption(state.chartSettings as ChartSettingSensitivity[], {
 			selectedVariables: selectedSensitivityVariables,
 			selectedInputVariables: firstSensitiveSetting!.selectedInputVariables,
-			timepoint: lastTimepoint
+			timepoint: lastTimepoint,
+			chartType: firstSensitiveSetting!.chartType
 		});
 	}
 

packages/client/hmi-client/src/components/workflow/scenario-templates/sensitivity-analysis/sensitivity-analysis-scenario.ts

@@ -10,7 +10,13 @@ import {
 	setParameterDistributions
 } from '@/services/model-configurations';
 import _ from 'lodash';
-import { ChartSetting, ChartSettingSensitivity, ChartSettingType, CiemssPresetTypes } from '@/types/common';
+import {
+	ChartSetting,
+	ChartSettingSensitivity,
+	ChartSettingType,
+	CiemssPresetTypes,
+	SensitivityChartType
+} from '@/types/common';
 import { updateChartSettingsBySelectedVariables, updateSensitivityChartSettingOption } from '@/services/chart-settings';
 import { AssetType, ParameterSemantic } from '@/types/Types';
 import { useProjects } from '@/composables/project';
@@ -194,7 +200,8 @@ export class SensitivityAnalysisScenario extends BaseScenario {
 		simulateChartSettings = updateSensitivityChartSettingOption(simulateChartSettings as ChartSettingSensitivity[], {
 			selectedVariables: this.simulateSpec.ids,
 			selectedInputVariables: this.parameters.map((parameter) => parameter!.referenceId),
-			timepoint: this.simulateSpec.endTime
+			timepoint: this.simulateSpec.endTime,
+			chartType: SensitivityChartType.SCATTER
 		});
 
 		wf.updateNode(simulateNode, {

packages/client/hmi-client/src/composables/useChartSettings.ts

@@ -5,7 +5,8 @@ import {
 	ChartSettingComparison,
 	ChartSettingEnsembleVariable,
 	ChartSettingSensitivity,
-	ChartSettingType
+	ChartSettingType,
+	SensitivityChartType
 } from '@/types/common';
 import {
 	EnsembleVariableChartSettingOption,
@@ -143,6 +144,7 @@ export function useChartSettings(
 		selectedVariables: string[];
 		selectedInputVariables: string[];
 		timepoint: number;
+		chartType: SensitivityChartType;
 	}) => {
 		emit('update-state', {
 			...props.node.state,

packages/client/hmi-client/src/composables/useCharts.ts

@@ -1171,6 +1171,7 @@ export function useCharts(
 
 		const fetchSensitivityData = async () => {
 			// pick the first setting's timepoint for now
+			const chartType = chartSettings.value[0].chartType;
 			const { result } = chartData.value as ChartData;
 			const sliceData = result.filter((d) => d.timepoint_id === timepoint.value);
 			// Translate names ahead of time, because we can't seem to customize titles
@@ -1280,7 +1281,8 @@ export function useCharts(
 						xAxisTitle: '',
 						yAxisTitle: '',
 						bins,
-						colorscheme: SENSITIVITY_COLOUR_SCHEME
+						colorscheme: SENSITIVITY_COLOUR_SCHEME,
+						chartType
 					}
 				);
 

packages/client/hmi-client/src/services/chart-settings.ts

@@ -6,7 +6,8 @@ import {
 	ChartSettingEnsembleVariableOptions,
 	ChartSettingComparison,
 	ChartSettingSensitivity,
-	ChartSettingType
+	ChartSettingType,
+	SensitivityChartType
 } from '@/types/common';
 import { v4 as uuidv4 } from 'uuid';
 import { b64DecodeUnicode } from '@/utils/binary';
@@ -164,7 +165,12 @@ export function updateChartSettingsBySelectedVariables(
 
 export function updateSensitivityChartSettingOption(
 	settings: ChartSettingSensitivity[],
-	options: { selectedVariables: string[]; selectedInputVariables: string[]; timepoint: number }
+	options: {
+		selectedVariables: string[];
+		selectedInputVariables: string[];
+		timepoint: number;
+		chartType: SensitivityChartType;
+	}
 ) {
 	// previous settings without the settings of the given type
 	const previousSettings = settings.filter((setting) => setting.type !== ChartSettingType.SENSITIVITY);
@@ -176,11 +182,13 @@ export function updateSensitivityChartSettingOption(
 		if (found) {
 			found.selectedInputVariables = options.selectedInputVariables;
 			found.timepoint = options.timepoint;
+			found.chartType = options.chartType;
 			return found;
 		}
 		return createNewChartSetting(variable, ChartSettingType.SENSITIVITY, [variable], {
 			selectedInputVariables: options.selectedInputVariables,
-			timepoint: options.timepoint
+			timepoint: options.timepoint,
+			chartType: options.chartType
 		});
 	});
 

packages/client/hmi-client/src/services/charts.ts

@@ -4,7 +4,7 @@ import { percentile } from '@/utils/math';
 import { VisualizationSpec } from 'vega-embed';
 import { v4 as uuidv4 } from 'uuid';
 import type { ChartAnnotation, FunmanInterval } from '@/types/Types';
-import { CalendarDateType } from '@/types/common';
+import { CalendarDateType, SensitivityChartType } from '@/types/common';
 import { countDigits, fixPrecisionError } from '@/utils/number';
 import { format } from 'd3';
 import { flattenInterventionData } from './intervention-policy';
@@ -66,6 +66,10 @@ export interface ForecastChartOptions extends BaseChartOptions {
 	yExtent?: [number, number];
 }
 
+export interface SensitivityChartOptions extends ForecastChartOptions {
+	chartType: SensitivityChartType;
+}
+
 export interface ForecastChartLayer {
 	data: Record<string, any>[] | { name: string } | { url: string };
 	variables: string[];
@@ -1270,7 +1274,10 @@ export function createQuantilesForecastChart(
  * FIXME: The design calls for combinations of different types of charts
  * in the grid, which we don't know how to achieve currently with vegalite
  * */
-export function createSimulateSensitivityScatter(samplingLayer: SensitivityChartLayer, options: ForecastChartOptions) {
+export function createSimulateSensitivityScatter(
+	samplingLayer: SensitivityChartLayer,
+	options: SensitivityChartOptions
+) {
 	// Start building
 	let calculateExpr = '';
 	options.bins?.forEach((sampleIds, quantile) => {
@@ -1334,6 +1341,12 @@ export function createSimulateSensitivityScatter(samplingLayer: SensitivityChart
 		}
 	};
 
+	if (options.chartType === SensitivityChartType.HEATMAP) {
+		spec.spec.mark = 'rect';
+		spec.spec.encoding.x.bin = { maxbins: 8 };
+		spec.spec.encoding.y.bin = { maxbins: 8 };
+	}
+
 	return spec;
 }
 

packages/client/hmi-client/src/types/common.ts

@@ -217,6 +217,12 @@ export interface ChartSettingEnsembleVariableOptions {
 export interface ChartSettingSensitivityOptions {
 	selectedInputVariables: string[];
 	timepoint: number;
+	chartType: SensitivityChartType;
+}
+
+export enum SensitivityChartType {
+	SCATTER = 'scatter',
+	HEATMAP = 'heatmap'
 }
 
 export interface ChartSettingBase {