From 24fa3041dd6c62c5d9a60cd448d3ac3e9b5cffc8 Mon Sep 17 00:00:00 2001 From: mloppie Date: Fri, 31 Jan 2025 12:07:54 -0500 Subject: [PATCH 1/5] colour comparison chartshare intervention colourng with ranking charts --- .../compare-datasets-utils.ts | 22 +++--- .../tera-compare-datasets-drilldown.vue | 8 ++- .../tera-compare-datasets-node.vue | 8 ++- .../hmi-client/src/composables/useCharts.ts | 69 +++++++++++++++++-- 4 files changed, 85 insertions(+), 22 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 722dc2bc41..a3de44ed51 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 @@ -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, 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 963592d5be..7d0760caa9 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 @@ -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) { 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 490e39e6ee..7ca5664d7e 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 @@ -82,7 +82,13 @@ onMounted(() => { rankingResultsChart ); }); -const comparisonCharts = useCompareDatasetCharts(selectedVariableSettings, selectedPlotType, baselineDatasetIndex); +const comparisonCharts = useCompareDatasetCharts( + selectedVariableSettings, + selectedPlotType, + datasets, + modelConfigurations, + interventionPolicies +); watch( () => props.node.inputs, diff --git a/packages/client/hmi-client/src/composables/useCharts.ts b/packages/client/hmi-client/src/composables/useCharts.ts index 98eb82afdc..9818f6154a 100644 --- a/packages/client/hmi-client/src/composables/useCharts.ts +++ b/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, selectedPlotType: ComputedRef, - baselineIndex: ComputedRef + // baselineIndex: ComputedRef, + datasets: Ref, + modelConfigurations, + interventionPolicies ) => { const compareDatasetCharts = computed(() => { const charts: Record = {}; if (!isChartReadyToBuild.value) return charts; - // Make baseline black - const colorScheme = cloneDeep(CATEGORICAL_SCHEME); - colorScheme.splice(baselineIndex.value, 0, 'black'); + const interventionNameColorMap: Record = {}; + const interventionNameScoreMap: Record = {}; + 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++; + } + } + }); +} From 93f1086b4d0c60a9beb8a097e90338f4ed44ff09 Mon Sep 17 00:00:00 2001 From: mloppie Date: Fri, 31 Jan 2025 14:27:02 -0500 Subject: [PATCH 2/5] pr feedback, fix missing ranking chart --- .../compare-datasets-utils.ts | 35 ++++++++------- .../tera-compare-datasets-drilldown.vue | 2 +- .../hmi-client/src/composables/useCharts.ts | 44 +++++++++++-------- 3 files changed, 44 insertions(+), 37 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 a3de44ed51..6ec306ce83 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 @@ -16,7 +16,7 @@ import { import { getInterventionPolicyById } from '@/services/intervention-policy'; import { getModelConfigurationById } from '@/services/model-configurations'; -import { ChartData, setInterventionColorAndScoreMaps } from '@/composables/useCharts'; +import { ChartData, getInterventionColorAndScoreMaps } from '@/composables/useCharts'; import { PlotValue, TimepointOption, RankOption, CompareDatasetsState } from './compare-datasets-operation'; @@ -195,8 +195,12 @@ export function generateRankingCharts( rankingResultsChart.value = null; const allRankedCriteriaValues: { score: number; policyName: string; configName: string }[][] = []; - const interventionNameColorMap: Record = {}; - const interventionNameScoresMap: Record = {}; + + const { interventionNameColorMap, interventionNameScoresMap } = getInterventionColorAndScoreMaps( + datasets, + modelConfigurations, + interventionPolicies + ); node.state.criteriaOfInterestCards.forEach((card) => { if (!chartData.value || !card.selectedVariable) return; @@ -227,13 +231,6 @@ export function generateRankingCharts( const rankingCriteriaValues: { score: number; policyName: string; configName: string }[] = []; - setInterventionColorAndScoreMaps( - datasets, - modelConfigurations, - interventionPolicies, - interventionNameColorMap, - interventionNameScoresMap - ); datasets.value.forEach((dataset, index: number) => { const { metadata } = dataset; const modelConfiguration: ModelConfiguration = modelConfigurations.value.find( @@ -326,16 +323,20 @@ export async function initialize( knobs: Ref | null, isFetchingDatasets: Ref, datasets: Ref, - datasetResults, - modelConfigIdToInterventionPolicyIdMap, - impactChartData, + datasetResults: Ref<{ + results: DataArray[]; + summaryResults: DataArray[]; + datasetResults: DataArray[]; + } | null>, + modelConfigIdToInterventionPolicyIdMap: Ref>, + impactChartData: Ref, rankingChartData, baselineDatasetIndex, selectedPlotType, - modelConfigurations, - interventionPolicies, - rankingCriteriaCharts, - rankingResultsChart + modelConfigurations: Ref, + interventionPolicies: Ref, + rankingCriteriaCharts: Ref, + rankingResultsChart: Ref ) { const { inputs } = node; const datasetInputs = inputs.filter( 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 7d0760caa9..ee1375a441 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 @@ -81,7 +81,7 @@
-