From 4ba6b3cf919934c75c72eea039e6cc43e21d4ddd Mon Sep 17 00:00:00 2001
From: Cole Blanchard <cblanchard@Coles-MacBook-Pro.local>
Date: Fri, 14 Feb 2025 11:02:54 -0500
Subject: [PATCH 1/2] show rank charts in compare datasets node

---
 .../compare-datasets-utils.ts                 | 171 ++----------------
 .../tera-compare-datasets-drilldown.vue       | 102 ++++++-----
 .../tera-compare-datasets-node.vue            |  86 ++++++---
 .../hmi-client/src/composables/useCharts.ts   | 147 ++++++++++++++-
 .../client/hmi-client/src/services/charts.ts  |  18 +-
 5 files changed, 282 insertions(+), 242 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/compare-datasets/compare-datasets-utils.ts b/packages/client/hmi-client/src/components/workflow/ops/compare-datasets/compare-datasets-utils.ts
index f66efcb047..a50a953f0d 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/compare-datasets/compare-datasets-utils.ts
+++ b/packages/client/hmi-client/src/components/workflow/ops/compare-datasets/compare-datasets-utils.ts
@@ -1,10 +1,8 @@
-import { isEmpty, cloneDeep } from 'lodash';
-import { mean, stddev } from '@/utils/stats';
+import { isEmpty } from 'lodash';
 import { Dataset, InterventionPolicy, ModelConfiguration } from '@/types/Types';
 import { WorkflowNode, WorkflowPortStatus } from '@/types/workflow';
 import { renameFnGenerator } from '@/components/workflow/ops/calibrate-ciemss/calibrate-utils';
 import { Ref } from 'vue';
-import { createRankingInterventionsChart } from '@/services/charts';
 import { DATASET_VAR_NAME_PREFIX, getDatasetResultCSV, mergeResults, getDataset } from '@/services/dataset';
 import {
 	DataArray,
@@ -14,8 +12,8 @@ import {
 } from '@/services/models/simulation-service';
 import { getInterventionPolicyById } from '@/services/intervention-policy';
 import { getModelConfigurationById } from '@/services/model-configurations';
-import { ChartData, getInterventionColorAndScoreMaps } from '@/composables/useCharts';
-import { PlotValue, TimepointOption, RankOption, CompareDatasetsState } from './compare-datasets-operation';
+import { ChartData } from '@/composables/useCharts';
+import { PlotValue, CompareDatasetsState } from './compare-datasets-operation';
 
 interface DataResults {
 	results: DataArray[];
@@ -184,141 +182,6 @@ export function buildChartData(
 	};
 }
 
-export function generateRankingCharts(
-	rankingCriteriaCharts,
-	rankingResultsChart,
-	node: WorkflowNode<CompareDatasetsState>,
-	chartData,
-	datasets: Ref<Dataset[]>,
-	modelConfigurations,
-	interventionPolicies
-) {
-	// Reset charts
-	rankingCriteriaCharts.value = [];
-	rankingResultsChart.value = null;
-
-	const allRankedCriteriaValues: { score: number; policyName: string; configName: string }[][] = [];
-
-	const { interventionNameColorMap, interventionNameScoresMap } = getInterventionColorAndScoreMaps(
-		datasets,
-		modelConfigurations,
-		interventionPolicies
-	);
-
-	node.state.criteriaOfInterestCards.forEach((card) => {
-		if (!chartData.value || !card.selectedVariable) return;
-
-		const variableKey = `${chartData.value.pyciemssMap[card.selectedVariable]}_mean`;
-		let pointOfComparison: Record<string, number> = {};
-
-		if (card.timepoint === TimepointOption.OVERALL) {
-			const resultSummary = cloneDeep(chartData.value.resultSummary); // Must clone to avoid modifying the original data
-
-			// Note that the reduce function here only compares the variable of interest
-			// so only those key/value pairs will be relevant in the pointOfComparison object.
-			// Other keys like timepoint_id (that we aren't using) will be in pointOfComparison
-			// but they won't coincide with the value of the variable of interest.
-			pointOfComparison = resultSummary.reduce((acc, val) =>
-				Object.keys(val).reduce((acc2, key) => {
-					if (key.includes(variableKey)) {
-						acc2[key] = Math.max(acc[key], val[key]);
-					}
-					return acc2;
-				}, acc)
-			);
-		} else if (card.timepoint === TimepointOption.FIRST) {
-			pointOfComparison = chartData.value.resultSummary[0];
-		} else if (card.timepoint === TimepointOption.LAST) {
-			pointOfComparison = chartData.value.resultSummary[chartData.value.resultSummary.length - 1];
-		}
-
-		const rankingCriteriaValues: { score: number; policyName: string; configName: string }[] = [];
-
-		datasets.value.forEach((dataset, index: number) => {
-			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;
-			}
-
-			rankingCriteriaValues.push({
-				score: pointOfComparison[`${variableKey}:${index}`] ?? 0,
-				policyName,
-				configName: modelConfiguration.name
-			});
-		});
-
-		const sortedRankingCriteriaValues =
-			card.rank === RankOption.MAXIMUM
-				? rankingCriteriaValues.sort((a, b) => b.score - a.score)
-				: rankingCriteriaValues.sort((a, b) => a.score - b.score);
-
-		rankingCriteriaCharts.value.push(
-			createRankingInterventionsChart(
-				sortedRankingCriteriaValues,
-				interventionNameColorMap,
-				card.name,
-				card.selectedVariable
-			)
-		);
-		allRankedCriteriaValues.push(sortedRankingCriteriaValues);
-	});
-
-	// For each criteria
-	allRankedCriteriaValues.forEach((criteriaValues, index) => {
-		const rankMutliplier = node.state.criteriaOfInterestCards[index].rank === RankOption.MINIMUM ? -1 : 1;
-
-		// Calculate mean and stdev for this criteria
-		const values = criteriaValues.map((val) => val.score);
-		const meanValue = mean(values);
-		let stdevValue = stddev(values);
-		if (stdevValue === 0) stdevValue = 1;
-
-		// For each policy
-		Object.keys(interventionNameScoresMap).forEach((policyName) => {
-			// For each value of the criteria
-			criteriaValues.forEach((criteriaValue) => {
-				if (criteriaValue.policyName !== policyName) return; // Skip criteria values that don't belong to this policy
-				const scoredPolicyCriteria = rankMutliplier * ((criteriaValue.score - meanValue) / stdevValue);
-				interventionNameScoresMap[policyName].push(scoredPolicyCriteria);
-			});
-		});
-	});
-
-	const scoredPolicies = Object.keys(interventionNameScoresMap)
-		.map((policyName) => ({
-			score: mean(interventionNameScoresMap[policyName]),
-			policyName,
-			configName: ''
-		})) // Sort from highest to lowest value
-		.sort((a, b) => b.score - a.score);
-
-	rankingResultsChart.value = createRankingInterventionsChart(scoredPolicies, interventionNameColorMap);
-}
-
-export async function generateImpactCharts(
-	chartData,
-	datasets: Ref<Dataset[]>,
-	datasetResults,
-	baselineDatasetIndex,
-	selectedPlotType
-) {
-	chartData.value = buildChartData(
-		datasets.value,
-		datasetResults.value,
-		baselineDatasetIndex.value,
-		selectedPlotType.value
-	);
-}
-
 // TODO: this should probably be split up into smaller functions but for now it's at least not duplicated in the node and drilldown
 // TODO: Please type the function params in this file for a later pass
 export async function initialize(
@@ -333,15 +196,14 @@ export async function initialize(
 	} | null>,
 	modelConfigIdToInterventionPolicyIdMap: Ref<Record<string, string[]>>,
 	impactChartData: Ref<ChartData | null>,
-	rankingChartData,
-	baselineDatasetIndex,
-	selectedPlotType,
+	rankingChartData: Ref<ChartData | null>,
+	baselineDatasetIndex: Ref<number>,
+	selectedPlotType: Ref<PlotValue>,
 	modelConfigurations: Ref<ModelConfiguration[]>,
-	interventionPolicies: Ref<InterventionPolicy[]>,
-	rankingCriteriaCharts: Ref<any>,
-	rankingResultsChart: Ref<any>
+	interventionPolicies: Ref<InterventionPolicy[]>
 ) {
 	const { inputs } = node;
+	datasets.value = [];
 	const datasetInputs = inputs.filter(
 		(input) => input.type === 'datasetId' && input.status === WorkflowPortStatus.CONNECTED
 	);
@@ -385,7 +247,12 @@ export async function initialize(
 	datasetResults.value = await fetchDatasetResults(datasets.value);
 	isFetchingDatasets.value = false;
 
-	await generateImpactCharts(impactChartData, datasets, datasetResults, baselineDatasetIndex, selectedPlotType);
+	impactChartData.value = buildChartData(
+		datasets.value,
+		datasetResults.value,
+		baselineDatasetIndex.value,
+		selectedPlotType.value
+	);
 
 	const modelConfigurationIds = Object.keys(modelConfigIdToInterventionPolicyIdMap.value);
 	if (isEmpty(modelConfigurationIds)) return;
@@ -409,14 +276,4 @@ export async function initialize(
 		baselineDatasetIndex.value,
 		PlotValue.VALUE
 	);
-
-	generateRankingCharts(
-		rankingCriteriaCharts,
-		rankingResultsChart,
-		node,
-		rankingChartData,
-		datasets,
-		modelConfigurations,
-		interventionPolicies
-	);
 }
diff --git a/packages/client/hmi-client/src/components/workflow/ops/compare-datasets/tera-compare-datasets-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/compare-datasets/tera-compare-datasets-drilldown.vue
index a256572f5e..07d1bdbbf1 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/compare-datasets/tera-compare-datasets-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/compare-datasets/tera-compare-datasets-drilldown.vue
@@ -13,7 +13,13 @@
 			>
 				<template #content>
 					<tera-drilldown-section class="px-3">
-						<Button class="ml-auto" size="small" label="Run" @click="onRun" />
+						<Button
+							v-if="knobs.selectedCompareOption !== CompareValue.RANK"
+							class="ml-auto"
+							size="small"
+							label="Run"
+							@click="onRun"
+						/>
 						<label>What do you want to compare?</label>
 						<Dropdown
 							v-model="knobs.selectedCompareOption"
@@ -54,7 +60,7 @@
 						<div class="flex flex-column gap-2" v-else-if="knobs.selectedCompareOption === CompareValue.RANK">
 							<label>Specify criteria of interest:</label>
 							<tera-criteria-of-interest-card
-								v-for="(card, i) in node.state.criteriaOfInterestCards"
+								v-for="(card, i) in knobs.criteriaOfInterestCards"
 								:key="i"
 								:card="card"
 								:variables="variableNames"
@@ -206,11 +212,16 @@
 								the scenario outcome meets the criteria of interest more. The dark line (zero) is the mean outcome
 								across all scenarios.
 							</p>
-							<vega-chart :visualization-spec="rankingResultsChart" :are-embed-actions-visible="false" expandable />
+							<vega-chart
+								v-if="rankingCharts.rankingResultsChart"
+								:visualization-spec="rankingCharts.rankingResultsChart"
+								:are-embed-actions-visible="false"
+								expandable
+							/>
 						</AccordionTab>
 						<AccordionTab header="Ranking criteria">
 							<vega-chart
-								v-for="(rankingCriteriaChart, index) in rankingCriteriaCharts"
+								v-for="(rankingCriteriaChart, index) in rankingCharts.rankingCriteriaCharts"
 								:visualization-spec="rankingCriteriaChart"
 								:are-embed-actions-visible="false"
 								:key="index"
@@ -380,7 +391,7 @@ import { WorkflowNode } from '@/types/workflow';
 import TeraSliderPanel from '@/components/widgets/tera-slider-panel.vue';
 import TeraDrilldownSection from '@/components/drilldown/tera-drilldown-section.vue';
 import { DrilldownTabs, ChartSettingType } from '@/types/common';
-import { onMounted, ref, watch, computed } from 'vue';
+import { onMounted, ref, computed, onBeforeUnmount } from 'vue';
 import Button from 'primevue/button';
 import Accordion from 'primevue/accordion';
 import AccordionTab from 'primevue/accordiontab';
@@ -412,7 +423,7 @@ import {
 	PlotValue,
 	type CompareDatasetsMap
 } from './compare-datasets-operation';
-import { generateRankingCharts, generateImpactCharts, initialize } from './compare-datasets-utils';
+import { initialize, buildChartData } from './compare-datasets-utils';
 
 const props = defineProps<{
 	node: WorkflowNode<CompareDatasetsState>;
@@ -463,23 +474,18 @@ const isFetchingDatasets = ref(false);
 const areSimulationsFromSameModel = ref(true);
 
 const onRun = () => {
-	if (knobs.value.selectedCompareOption === CompareValue.RANK) {
-		generateRankingCharts(
-			rankingCriteriaCharts,
-			rankingResultsChart,
-			props.node,
-			rankingChartData,
-			datasets,
-			modelConfigurations,
-			interventionPolicies
-		);
-	} else if (knobs.value.selectedCompareOption === CompareValue.SCENARIO) {
+	if (knobs.value.selectedCompareOption === CompareValue.SCENARIO) {
 		constructATETable();
 	}
 };
 
 function onChangeImpactComparison() {
-	generateImpactCharts(impactChartData, datasets, datasetResults, baselineDatasetIndex, selectedPlotType);
+	impactChartData.value = buildChartData(
+		datasets.value,
+		datasetResults.value,
+		baselineDatasetIndex.value,
+		selectedPlotType.value
+	);
 }
 
 interface BasicKnobs {
@@ -533,21 +539,21 @@ const chartSize = useDrilldownChartSize(outputPanel);
 
 const impactChartData = ref<ChartData | null>(null);
 const rankingChartData = ref<ChartData | null>(null);
-const rankingResultsChart = ref<any>(null);
-const rankingCriteriaCharts = ref<any>([]);
+
+const chartData = computed(() => {
+	if (knobs.value.selectedCompareOption === CompareValue.RANK) {
+		return rankingChartData.value;
+	}
+	return impactChartData.value;
+});
 
 const variableNames = ref<string[]>([]);
 const mappingOptions = ref<Record<string, string[]>>({});
 
-const { generateAnnotation, getChartAnnotationsByChartId, useCompareDatasetCharts } = useCharts(
-	props.node.id,
-	null,
-	null,
-	impactChartData,
-	chartSize,
-	null,
-	null
-);
+const criteriaOfInterestCards = computed(() => knobs.value.criteriaOfInterestCards);
+
+const { generateAnnotation, getChartAnnotationsByChartId, useCompareDatasetCharts, useInterventionRankingCharts } =
+	useCharts(props.node.id, null, null, chartData, chartSize, null, null);
 const selectedPlotType = computed(() => knobs.value.selectedPlotType);
 const baselineDatasetIndex = computed(() =>
 	datasets.value.findIndex((dataset) => dataset.id === knobs.value.selectedBaselineDatasetId)
@@ -560,6 +566,14 @@ const variableCharts = useCompareDatasetCharts(
 	modelConfigurations,
 	interventionPolicies
 );
+
+const rankingCharts = useInterventionRankingCharts(
+	criteriaOfInterestCards,
+	datasets,
+	modelConfigurations,
+	interventionPolicies
+);
+
 const groundTruthDatasetIndex = computed(() =>
 	datasets.value.findIndex((dataset) => dataset.id === knobs.value.selectedGroundTruthDatasetId)
 );
@@ -772,9 +786,7 @@ onMounted(async () => {
 		baselineDatasetIndex,
 		selectedPlotType,
 		modelConfigurations,
-		interventionPolicies,
-		rankingCriteriaCharts,
-		rankingResultsChart
+		interventionPolicies
 	);
 
 	// Prepare variable dropdowns
@@ -817,20 +829,18 @@ onMounted(async () => {
 	constructWisTable();
 });
 
-watch(
-	() => knobs.value,
-	() => {
-		const state = cloneDeep(props.node.state);
-		state.criteriaOfInterestCards = knobs.value.criteriaOfInterestCards;
-		state.selectedCompareOption = knobs.value.selectedCompareOption;
-		state.selectedBaselineDatasetId = knobs.value.selectedBaselineDatasetId;
-		state.selectedGroundTruthDatasetId = knobs.value.selectedGroundTruthDatasetId;
-		state.selectedPlotType = knobs.value.selectedPlotType;
-		state.mapping = knobs.value.mapping;
-		emit('update-state', state);
-	},
-	{ deep: true }
-);
+onBeforeUnmount(async () => {
+	// flush changes
+	const clonedState = cloneDeep(props.node.state);
+	clonedState.criteriaOfInterestCards = knobs.value.criteriaOfInterestCards;
+	clonedState.selectedCompareOption = knobs.value.selectedCompareOption;
+	clonedState.selectedBaselineDatasetId = knobs.value.selectedBaselineDatasetId;
+	clonedState.selectedGroundTruthDatasetId = knobs.value.selectedGroundTruthDatasetId;
+	clonedState.selectedPlotType = knobs.value.selectedPlotType;
+	clonedState.mapping = knobs.value.mapping;
+
+	emit('update-state', clonedState);
+});
 </script>
 
 <style scoped>
diff --git a/packages/client/hmi-client/src/components/workflow/ops/compare-datasets/tera-compare-datasets-node.vue b/packages/client/hmi-client/src/components/workflow/ops/compare-datasets/tera-compare-datasets-node.vue
index 8858b72e1e..05149966ad 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/compare-datasets/tera-compare-datasets-node.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/compare-datasets/tera-compare-datasets-node.vue
@@ -1,12 +1,34 @@
 <template>
 	<section>
 		<tera-node-preview
+			v-if="node.state.selectedCompareOption !== CompareValue.RANK"
 			:node="node"
 			:prepared-charts="comparisonCharts"
 			:is-loading="isFetchingDatasets"
 			:chart-settings="selectedVariableSettings"
 			:placeholder="'Attach datasets/simulation outputs to compare'"
 		/>
+		<template v-else>
+			<tera-progress-spinner v-if="isFetchingDatasets" :font-size="2" is-centered style="height: 100%">
+				<div>Processing...</div>
+			</tera-progress-spinner>
+
+			<vega-chart
+				v-if="rankingCharts.rankingResultsChart"
+				expandable
+				are-embed-actions-visible
+				:visualization-spec="rankingCharts.rankingResultsChart"
+				:interactive="false"
+			/>
+			<vega-chart
+				v-for="(spec, index) in rankingCharts.rankingCriteriaCharts"
+				:key="index"
+				expandable
+				are-embed-actions-visible
+				:visualization-spec="spec"
+				:interactive="false"
+			/>
+		</template>
 		<Button v-if="hasAtLeastTwoInputs" label="Open" @click="emit('open-drilldown')" severity="secondary" outlined />
 	</section>
 </template>
@@ -21,9 +43,11 @@ import { type WorkflowNode, WorkflowPortStatus } from '@/types/workflow';
 
 import { useCharts, type ChartData } from '@/composables/useCharts';
 import { useChartSettings } from '@/composables/useChartSettings';
+import VegaChart from '@/components/widgets/VegaChart.vue';
+import TeraProgressSpinner from '@/components/widgets/tera-progress-spinner.vue';
 import TeraNodePreview from '../tera-node-preview.vue';
 
-import { CompareDatasetsState } from './compare-datasets-operation';
+import { CompareDatasetsState, CompareValue } from './compare-datasets-operation';
 
 import { initialize } from './compare-datasets-utils';
 
@@ -46,16 +70,23 @@ const datasetResults = ref<{
 const modelConfigurations = ref<ModelConfiguration[]>([]);
 const interventionPolicies = ref<InterventionPolicy[]>([]);
 const modelConfigIdToInterventionPolicyIdMap = ref<Record<string, string[]>>({});
-const chartData = ref<ChartData | null>(null);
-const rankingResultsChart = ref<any>(null);
-const rankingCriteriaCharts = ref<any>([]);
+const impactChartData = ref<ChartData | null>(null);
+const rankingChartData = ref<ChartData | null>(null);
+
+const chartData = computed(() => {
+	if (props.node.state.selectedCompareOption === CompareValue.RANK) {
+		return rankingChartData.value;
+	}
+	return impactChartData.value;
+});
 
 const selectedPlotType = computed(() => props.node.state.selectedPlotType);
 const baselineDatasetIndex = computed(() =>
 	datasets.value.findIndex((dataset) => dataset.id === props.node.state.selectedBaselineDatasetId)
 );
 
-const { useCompareDatasetCharts } = useCharts(
+const criteriaOfInterestCards = computed(() => props.node.state.criteriaOfInterestCards);
+const { useCompareDatasetCharts, useInterventionRankingCharts } = useCharts(
 	props.node.id,
 	null,
 	null,
@@ -72,14 +103,12 @@ onMounted(() => {
 		datasets,
 		datasetResults,
 		modelConfigIdToInterventionPolicyIdMap,
-		chartData,
-		null,
+		impactChartData,
+		rankingChartData,
 		baselineDatasetIndex,
 		selectedPlotType,
 		modelConfigurations,
-		interventionPolicies,
-		rankingCriteriaCharts,
-		rankingResultsChart
+		interventionPolicies
 	);
 });
 const comparisonCharts = useCompareDatasetCharts(
@@ -91,28 +120,33 @@ const comparisonCharts = useCompareDatasetCharts(
 	interventionPolicies
 );
 
+const rankingCharts = useInterventionRankingCharts(
+	criteriaOfInterestCards,
+	datasets,
+	modelConfigurations,
+	interventionPolicies
+);
+
 watch(
 	() => props.node.inputs,
 	() => {
 		if (props.node.inputs.every((input) => input.status === WorkflowPortStatus.CONNECTED)) {
 			emit('append-input-port', { type: 'datasetId', label: 'Dataset or Simulation result' });
-			initialize(
-				props.node,
-				null,
-				isFetchingDatasets,
-				datasets,
-				datasetResults,
-				modelConfigIdToInterventionPolicyIdMap,
-				chartData,
-				null,
-				baselineDatasetIndex,
-				selectedPlotType,
-				modelConfigurations,
-				interventionPolicies,
-				rankingCriteriaCharts,
-				rankingResultsChart
-			);
 		}
+		initialize(
+			props.node,
+			null,
+			isFetchingDatasets,
+			datasets,
+			datasetResults,
+			modelConfigIdToInterventionPolicyIdMap,
+			impactChartData,
+			rankingChartData,
+			baselineDatasetIndex,
+			selectedPlotType,
+			modelConfigurations,
+			interventionPolicies
+		);
 	},
 	{ deep: true }
 );
diff --git a/packages/client/hmi-client/src/composables/useCharts.ts b/packages/client/hmi-client/src/composables/useCharts.ts
index e3861eb527..e210472a0f 100644
--- a/packages/client/hmi-client/src/composables/useCharts.ts
+++ b/packages/client/hmi-client/src/composables/useCharts.ts
@@ -17,7 +17,9 @@ import {
 	ForecastChartOptions,
 	expressionFunctions,
 	GroupedDataArray,
-	createSensitivityRankingChart
+	createSensitivityRankingChart,
+	createRankingInterventionsChart,
+	BaseChartOptions
 } from '@/services/charts';
 import { flattenInterventionData } from '@/services/intervention-policy';
 import {
@@ -54,11 +56,17 @@ import {
 import { SimulateEnsembleMappingRow } from '@/components/workflow/ops/simulate-ensemble-ciemss/simulate-ensemble-ciemss-operation';
 import { getModelConfigName, getParameters } from '@/services/model-configurations';
 import { EnsembleErrorData } from '@/components/workflow/ops/calibrate-ensemble-ciemss/calibrate-ensemble-util';
-import { PlotValue } from '@/components/workflow/ops/compare-datasets/compare-datasets-operation';
+import {
+	CriteriaOfInterestCard,
+	PlotValue,
+	RankOption,
+	TimepointOption
+} from '@/components/workflow/ops/compare-datasets/compare-datasets-operation';
 import { DATASET_VAR_NAME_PREFIX } from '@/services/dataset';
 import { calculatePercentage } from '@/utils/math';
 import { DistributionType } from '@/services/distribution';
 import { pythonInstance } from '@/web-workers/python/PyodideController';
+import { mean as statsMean, stddev } from '@/utils/stats';
 import { useChartAnnotations } from './useChartAnnotations';
 
 export interface ChartData {
@@ -1349,6 +1357,138 @@ export function useCharts(
 		return computed(() => ({ data: sensitivityData.value, loading: sensitivityDataLoading.value }));
 	};
 
+	const useInterventionRankingCharts = (
+		criteriaOfInterestCards: Ref<CriteriaOfInterestCard[]>,
+		datasets: Ref<Dataset[]>,
+		modelConfigurations: Ref<ModelConfiguration[]>,
+		interventionPolicies: Ref<InterventionPolicy[]>
+	) =>
+		computed(() => {
+			// return empty if any of the required data is missing
+			if (!chartData.value || !datasets.value || !modelConfigurations.value || !interventionPolicies.value)
+				return { rankingCriteriaCharts: [], rankingResultsChart: null };
+
+			const rankingCriteriaCharts: VisualizationSpec[] = [];
+			let rankingResultsChart: VisualizationSpec | null = null;
+
+			const allRankedCriteriaValues: { score: number; policyName: string; configName: string }[][] = [];
+
+			const { interventionNameColorMap, interventionNameScoresMap } = getInterventionColorAndScoreMaps(
+				datasets,
+				modelConfigurations,
+				interventionPolicies
+			);
+
+			criteriaOfInterestCards.value.forEach((card) => {
+				if (!chartData.value || !card.selectedVariable) return;
+
+				const variableKey = `${chartData.value.pyciemssMap[card.selectedVariable]}_mean`;
+				let pointOfComparison: Record<string, number> = {};
+
+				if (card.timepoint === TimepointOption.OVERALL) {
+					const resultSummary = cloneDeep(chartData.value.resultSummary); // Must clone to avoid modifying the original data
+
+					// Note that the reduce function here only compares the variable of interest
+					// so only those key/value pairs will be relevant in the pointOfComparison object.
+					// Other keys like timepoint_id (that we aren't using) will be in pointOfComparison
+					// but they won't coincide with the value of the variable of interest.
+					pointOfComparison = resultSummary.reduce((acc, val) =>
+						Object.keys(val).reduce((acc2, key) => {
+							if (key.includes(variableKey)) {
+								acc2[key] = Math.max(acc[key], val[key]);
+							}
+							return acc2;
+						}, acc)
+					);
+				} else if (card.timepoint === TimepointOption.FIRST) {
+					pointOfComparison = chartData.value.resultSummary[0];
+				} else if (card.timepoint === TimepointOption.LAST) {
+					pointOfComparison = chartData.value.resultSummary[chartData.value.resultSummary.length - 1];
+				}
+
+				const rankingCriteriaValues: { score: number; policyName: string; configName: string }[] = [];
+
+				datasets.value.forEach((dataset, index: number) => {
+					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;
+					}
+
+					rankingCriteriaValues.push({
+						score: pointOfComparison[`${variableKey}:${index}`] ?? 0,
+						policyName,
+						configName: modelConfiguration.name
+					});
+				});
+
+				const sortedRankingCriteriaValues =
+					card.rank === RankOption.MAXIMUM
+						? rankingCriteriaValues.sort((a, b) => b.score - a.score)
+						: rankingCriteriaValues.sort((a, b) => a.score - b.score);
+
+				const options: BaseChartOptions = {
+					title: card.name,
+					width: chartSize.value.width,
+					height: chartSize.value.height,
+					xAxisTitle: 'Rank',
+					yAxisTitle: card.selectedVariable
+				};
+				rankingCriteriaCharts.push(
+					createRankingInterventionsChart(sortedRankingCriteriaValues, interventionNameColorMap, options)
+				);
+				allRankedCriteriaValues.push(sortedRankingCriteriaValues);
+			});
+
+			// For each criteria
+			allRankedCriteriaValues.forEach((criteriaValues, index) => {
+				const rankMutliplier = criteriaOfInterestCards.value[index].rank === RankOption.MINIMUM ? -1 : 1;
+
+				// Calculate mean and stdev for this criteria
+				const values = criteriaValues.map((val) => val.score);
+				const meanValue = statsMean(values);
+				let stdevValue = stddev(values);
+				if (stdevValue === 0) stdevValue = 1;
+
+				// For each policy
+				Object.keys(interventionNameScoresMap).forEach((policyName) => {
+					// For each value of the criteria
+					criteriaValues.forEach((criteriaValue) => {
+						if (criteriaValue.policyName !== policyName) return; // Skip criteria values that don't belong to this policy
+						const scoredPolicyCriteria = rankMutliplier * ((criteriaValue.score - meanValue) / stdevValue);
+						interventionNameScoresMap[policyName].push(scoredPolicyCriteria);
+					});
+				});
+			});
+
+			const scoredPolicies = Object.keys(interventionNameScoresMap)
+				.map((policyName) => ({
+					score: statsMean(interventionNameScoresMap[policyName]),
+					policyName,
+					configName: ''
+				})) // Sort from highest to lowest value
+				.sort((a, b) => b.score - a.score);
+
+			const options: BaseChartOptions = {
+				title: '',
+				width: chartSize.value.width,
+				height: chartSize.value.height,
+				xAxisTitle: 'Rank',
+				yAxisTitle: ''
+			};
+			rankingResultsChart = createRankingInterventionsChart(scoredPolicies, interventionNameColorMap, options);
+
+			return { rankingCriteriaCharts, rankingResultsChart };
+		});
+
 	return {
 		generateAnnotation,
 		getChartAnnotationsByChartId,
@@ -1361,7 +1501,8 @@ export function useCharts(
 		useParameterDistributionCharts,
 		useWeightsDistributionCharts,
 		useSimulateSensitivityCharts,
-		useEnsembleErrorCharts
+		useEnsembleErrorCharts,
+		useInterventionRankingCharts
 	};
 }
 
diff --git a/packages/client/hmi-client/src/services/charts.ts b/packages/client/hmi-client/src/services/charts.ts
index 1d0ad5014c..6f96c1ba52 100644
--- a/packages/client/hmi-client/src/services/charts.ts
+++ b/packages/client/hmi-client/src/services/charts.ts
@@ -43,7 +43,7 @@ export enum AUTOSIZE {
 	NONE = 'none'
 }
 
-interface BaseChartOptions {
+export interface BaseChartOptions {
 	title?: string;
 	width: number;
 	height: number;
@@ -2087,9 +2087,8 @@ export function createFunmanParameterCharts(
 export function createRankingInterventionsChart(
 	values: { score: number; policyName: string; configName: string }[],
 	interventionNameColorMap: Record<string, string>,
-	title: string | null = null,
-	variableName: string | null = null
-) {
+	options: BaseChartOptions
+): VisualizationSpec {
 	return {
 		$schema: VEGALITE_SCHEMA,
 		config: {
@@ -2105,7 +2104,7 @@ export function createRankingInterventionsChart(
 			}
 		},
 		title: {
-			text: title,
+			text: options.title ?? '',
 			anchor: 'start',
 			frame: 'group',
 			offset: 10,
@@ -2120,13 +2119,13 @@ export function createRankingInterventionsChart(
 				field: 'index',
 				type: 'nominal',
 				sort: null,
-				title: 'Rank'
+				title: options.xAxisTitle
 			},
 			y: {
 				field: 'score',
 				type: 'quantitative',
 				// If a specific variable is selected the score should hold its actual value
-				title: variableName || 'Score',
+				title: options.yAxisTitle || 'Score',
 				axis: {
 					gridColor: {
 						condition: { test: 'datum.value === 0', value: 'black' },
@@ -2172,11 +2171,10 @@ export function createRankingInterventionsChart(
 					dy: -20,
 					dx: 5,
 					angle: 90,
-					fill: 'black',
-					padding: 4
+					fill: 'black'
 				},
 				encoding: {
-					text: { field: 'name', type: 'nominal', color: 'black' },
+					text: { field: 'name', type: 'nominal' },
 					y: { value: 0 } // This positions the text at the top of the chart
 				}
 			}

From f4bd8a84c67e57fa5e551b844031007f1ff5a777 Mon Sep 17 00:00:00 2001
From: Cole Blanchard <cblanchard@Coles-MacBook-Pro.local>
Date: Tue, 18 Feb 2025 12:46:39 -0500
Subject: [PATCH 2/2] rm div

---
 .../ops/compare-datasets/tera-compare-datasets-node.vue         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/compare-datasets/tera-compare-datasets-node.vue b/packages/client/hmi-client/src/components/workflow/ops/compare-datasets/tera-compare-datasets-node.vue
index 05149966ad..5847f2fd70 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/compare-datasets/tera-compare-datasets-node.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/compare-datasets/tera-compare-datasets-node.vue
@@ -10,7 +10,7 @@
 		/>
 		<template v-else>
 			<tera-progress-spinner v-if="isFetchingDatasets" :font-size="2" is-centered style="height: 100%">
-				<div>Processing...</div>
+				Processing...
 			</tera-progress-spinner>
 
 			<vega-chart