Compare scenario chart share intervention colouring with ranking charts

packages/client/hmi-client/src/components/workflow/ops/compare-datasets/compare-datasets-utils.ts

@@ -5,7 +5,7 @@ import { WorkflowNode, WorkflowPortStatus } from '@/types/workflow';
 import { renameFnGenerator } from '@/components/workflow/ops/calibrate-ciemss/calibrate-utils';
 import { Ref } from 'vue';
 
-import { createRankingInterventionsChart, CATEGORICAL_SCHEME } from '@/services/charts';
+import { createRankingInterventionsChart } from '@/services/charts';
 import { DATASET_VAR_NAME_PREFIX, getDatasetResultCSV, mergeResults, getDataset } from '@/services/dataset';
 import {
 	DataArray,
@@ -16,7 +16,7 @@ import {
 import { getInterventionPolicyById } from '@/services/intervention-policy';
 import { getModelConfigurationById } from '@/services/model-configurations';
 
-import { ChartData } from '@/composables/useCharts';
+import { ChartData, setInterventionColorAndScoreMaps } from '@/composables/useCharts';
 
 import { PlotValue, TimepointOption, RankOption, CompareDatasetsState } from './compare-datasets-operation';
 
@@ -227,7 +227,13 @@ export function generateRankingCharts(
 
 		const rankingCriteriaValues: { score: number; policyName: string; configName: string }[] = [];
 
-		let colorIndex = 0;
+		setInterventionColorAndScoreMaps(
+			datasets,
+			modelConfigurations,
+			interventionPolicies,
+			interventionNameColorMap,
+			interventionNameScoresMap
+		);
 		datasets.value.forEach((dataset, index: number) => {
 			const { metadata } = dataset;
 			const modelConfiguration: ModelConfiguration = modelConfigurations.value.find(
@@ -243,16 +249,6 @@ export function generateRankingCharts(
 				return;
 			}
 
-			if (!interventionNameColorMap[policyName]) {
-				interventionNameScoresMap[policyName] = [];
-				if (!policy?.name) {
-					interventionNameColorMap[policyName] = 'black';
-				} else {
-					interventionNameColorMap[policyName] = CATEGORICAL_SCHEME[colorIndex];
-					colorIndex++;
-				}
-			}
-
 			rankingCriteriaValues.push({
 				score: pointOfComparison[`${variableKey}:${index}`] ?? 0,
 				policyName,

packages/client/hmi-client/src/components/workflow/ops/compare-datasets/tera-compare-datasets-drilldown.vue

@@ -374,7 +374,13 @@ const selectedPlotType = computed(() => knobs.value.selectedPlotType);
 const baselineDatasetIndex = computed(() =>
 	datasets.value.findIndex((dataset) => dataset.id === knobs.value.selectedBaselineDatasetId)
 );
-const variableCharts = useCompareDatasetCharts(selectedVariableSettings, selectedPlotType, baselineDatasetIndex);
+const variableCharts = useCompareDatasetCharts(
+	selectedVariableSettings,
+	selectedPlotType,
+	datasets,
+	modelConfigurations,
+	interventionPolicies
+);
 
 function outputPanelBehavior() {
 	if (knobs.value.selectedCompareOption === CompareValue.RANK) {

packages/client/hmi-client/src/components/workflow/ops/compare-datasets/tera-compare-datasets-node.vue

@@ -82,7 +82,13 @@ onMounted(() => {
 		rankingResultsChart
 	);
 });
-const comparisonCharts = useCompareDatasetCharts(selectedVariableSettings, selectedPlotType, baselineDatasetIndex);
+const comparisonCharts = useCompareDatasetCharts(
+	selectedVariableSettings,
+	selectedPlotType,
+	datasets,
+	modelConfigurations,
+	interventionPolicies
+);
 
 watch(
 	() => props.node.inputs,

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

@@ -1,4 +1,4 @@
-import _, { capitalize, cloneDeep } from 'lodash';
+import _, { capitalize } from 'lodash';
 import { mean, variance } from 'd3';
 import { computed, ComputedRef, Ref } from 'vue';
 import { VisualizationSpec } from 'vega-embed';
@@ -27,7 +27,7 @@ import {
 	ChartSettingSensitivity,
 	ChartSettingType
 } from '@/types/common';
-import { ChartAnnotation, Intervention, Model, ModelConfiguration } from '@/types/Types';
+import { ChartAnnotation, Dataset, Intervention, InterventionPolicy, Model, ModelConfiguration } from '@/types/Types';
 import { displayNumber } from '@/utils/number';
 import { getStateVariableStrataEntries, getUnitsFromModelParts, getVegaDateOptions } from '@/services/model';
 import { CalibrateMap, isCalibrateMap } from '@/services/calibrate-workflow';
@@ -540,22 +540,42 @@ export function useCharts(
 	const useCompareDatasetCharts = (
 		chartSettings: ComputedRef<ChartSetting[]>,
 		selectedPlotType: ComputedRef<PlotValue>,
-		baselineIndex: ComputedRef<number>
+		// baselineIndex: ComputedRef<number>,
+		datasets: Ref<Dataset[]>,
+		modelConfigurations,
+		interventionPolicies
 	) => {
 		const compareDatasetCharts = computed(() => {
 			const charts: Record<string, VisualizationSpec> = {};
 			if (!isChartReadyToBuild.value) return charts;
 
-			// Make baseline black
-			const colorScheme = cloneDeep(CATEGORICAL_SCHEME);
-			colorScheme.splice(baselineIndex.value, 0, 'black');
+			const interventionNameColorMap: Record<string, string> = {};
+			const interventionNameScoreMap: Record<string, string> = {};
+			setInterventionColorAndScoreMaps(
+				datasets,
+				modelConfigurations,
+				interventionPolicies,
+				interventionNameColorMap,
+				interventionNameScoreMap
+			);
+
+			const variableColorMap = datasets.value.map(({ name }) => {
+				const interventionName = name?.match(/\(([^)]+)\)/);
+				if (interventionName?.length) {
+					if (interventionNameColorMap[interventionName[1]]) {
+						return interventionNameColorMap[interventionName[1]];
+					}
+				}
+				return 'black';
+			});
 
 			chartSettings.value.forEach((settings) => {
 				const varName = settings.selectedVariables[0];
 				const { statLayerVariables, sampleLayerVariables, options } = createForecastChartOptions(settings);
 				options.title = varName;
 				options.yAxisTitle = capitalize(selectedPlotType.value);
-				options.colorscheme = colorScheme;
+
+				options.colorscheme = variableColorMap;
 
 				const annotations = getChartAnnotationsByChartId(settings.id);
 				const chart = !settings.showQuantiles
@@ -1230,3 +1250,38 @@ export function useCharts(
 		useEnsembleErrorCharts
 	};
 }
+
+export function setInterventionColorAndScoreMaps(
+	datasets,
+	modelConfigurations,
+	interventionPolicies,
+	interventionNameColorMap,
+	interventionNameScoresMap
+) {
+	let colorIndex = 0;
+	datasets.value.forEach((dataset) => {
+		const { metadata } = dataset;
+		const modelConfiguration: ModelConfiguration = modelConfigurations.value.find(
+			({ id }) => id === metadata.simulationAttributes?.modelConfigurationId
+		);
+		const policy: InterventionPolicy = interventionPolicies.value.find(
+			({ id }) => id === metadata.simulationAttributes?.interventionPolicyId
+		);
+
+		const policyName = policy?.name ?? 'no policy';
+
+		if (!modelConfiguration?.name) {
+			return;
+		}
+
+		if (!interventionNameColorMap[policyName]) {
+			interventionNameScoresMap[policyName] = [];
+			if (!policy?.name) {
+				interventionNameColorMap[policyName] = 'black';
+			} else {
+				interventionNameColorMap[policyName] = CATEGORICAL_SCHEME[colorIndex];
+				colorIndex++;
+			}
+		}
+	});
+}