fix: Keep color mapping up to date

CHANGELOG.md

@@ -14,6 +14,9 @@ You can also check the
 - Features
   - It's now possible to export charts as images
 - Fixes
+  - Color mapping is now correctly kept up to date in case of editing an old
+    chart and the cube has been updated in the meantime and contains new values
+    in the color dimension
   - Fixed preview via API (iframe)
 
 # [5.0.2] - 2024-11-28
@@ -25,7 +28,7 @@ You can also check the
   - Changed component id separator text to be more unique, as it was causing
     issues with some cubes that had iris ending with "-"
   - Datasets section in the sidebar is now correctly shown at all times
-  - Improved Preventation of overlapping axis titles for combo charts
+  - Improved prevention of overlapping axis titles for combo charts
 
 # [5.0.1] - 2024-11-26
 

app/configurator/components/filters.tsx

@@ -46,6 +46,7 @@ import { MaybeTooltip } from "@/components/maybe-tooltip";
 import { TooltipTitle } from "@/components/tooltip-utils";
 import {
   ChartConfig,
+  ColorMapping,
   getChartConfig,
   getFilterValue,
   isConfiguring,
@@ -77,6 +78,7 @@ import { InteractiveFilterToggle } from "@/configurator/interactive-filters/inte
 import {
   Component,
   Dimension,
+  DimensionValue,
   HierarchyValue,
   TemporalDimension,
   TemporalEntityDimension,
@@ -332,6 +334,11 @@ const MultiFilterContent = ({
     );
   }, [colorConfig?.colorMapping, dimensionId, colorComponent]);
 
+  useEnsureUpToDateColorMapping({
+    colorComponentValues: colorComponent?.values,
+    colorMapping: colorConfig?.colorMapping,
+  });
+
   const interactiveFilterProps = useInteractiveFiltersToggle("legend");
   const chartSymbol = getChartSymbol(chartConfig.chartType);
 
@@ -432,7 +439,7 @@ const MultiFilterContent = ({
                     />
                   ) : (
                     <>
-                      <Typography variant="body2" sx={{ flexGrow: 1 }}>
+                      <Typography variant="body2" style={{ flexGrow: 1 }}>
                         {label}
                       </Typography>
                       <SvgIcCheck />
@@ -460,6 +467,40 @@ const MultiFilterContent = ({
   );
 };
 
+/**
+ * Fixes situations where an old chart is being edited and the cube has changed
+ * and contains new values in the color dimension.
+ * */
+const useEnsureUpToDateColorMapping = ({
+  colorComponentValues,
+  colorMapping,
+}: {
+  colorComponentValues?: DimensionValue[];
+  colorMapping?: ColorMapping;
+}) => {
+  const [state, dispatch] = useConfiguratorState(isConfiguring);
+  const chartConfig = getChartConfig(state);
+  const { dimensionId, colorConfigPath } = useMultiFilterContext();
+  const { activeField } = chartConfig;
+
+  if (
+    activeField &&
+    colorComponentValues?.some((v) => !colorMapping?.[v.value])
+  ) {
+    dispatch({
+      type: "CHART_CONFIG_UPDATE_COLOR_MAPPING",
+      value: {
+        field: activeField,
+        dimensionId,
+        colorConfigPath,
+        colorMapping,
+        values: colorComponentValues,
+        random: false,
+      },
+    });
+  }
+};
+
 const useBreadcrumbStyles = makeStyles({
   root: {
     display: "inline",

app/configurator/components/ui-helpers.ts

@@ -7,7 +7,7 @@ import { useMemo } from "react";
 import { match } from "ts-pattern";
 
 import type { BaseChartProps } from "@/charts/shared/ChartProps";
-import { TableColumn, TableFields } from "@/config-types";
+import { ColorMapping, TableColumn, TableFields } from "@/config-types";
 import { FIELD_VALUE_NONE } from "@/configurator/constants";
 import {
   Component,
@@ -270,10 +270,12 @@ const randomComparator = () => (Math.random() > 0.5 ? 1 : -1);
 export const mapValueIrisToColor = ({
   palette,
   dimensionValues,
+  colorMapping: oldColorMapping,
   random,
 }: {
   palette: string;
   dimensionValues: DimensionValue[];
+  colorMapping?: ColorMapping;
   random?: boolean;
 }) => {
   if (!dimensionValues) {
@@ -284,6 +286,7 @@ export const mapValueIrisToColor = ({
   const colors = dimensionValues.map(
     (d, i) =>
       (palette === "dimension" && d.color) ||
+      oldColorMapping?.[`${d.value}`] ||
       paletteValues[i % paletteValues.length]
   );
   const colorScale = scaleOrdinal<string, string>()

app/configurator/configurator-state/actions.tsx

@@ -2,6 +2,7 @@ import { EncodingFieldType } from "@/charts/chart-config-ui-options";
 import {
   ChartConfig,
   ChartType,
+  ColorMapping,
   ConfiguratorState,
   DashboardFiltersConfig,
   DataSource,
@@ -178,6 +179,7 @@ export type ConfiguratorStateAction =
       value: {
         field: string;
         colorConfigPath: string | undefined;
+        colorMapping?: ColorMapping;
         dimensionId: string;
         values: DimensionValue[];
         random: boolean;

app/configurator/configurator-state/reducer.tsx

@@ -458,8 +458,14 @@ export const updateColorMapping = (
   >
 ) => {
   if (isConfiguring(draft)) {
-    const { field, colorConfigPath, dimensionId, values, random } =
-      action.value;
+    const {
+      field,
+      colorConfigPath,
+      colorMapping: oldColorMapping,
+      dimensionId,
+      values,
+      random,
+    } = action.value;
     const chartConfig = getChartConfig(draft);
     const path = colorConfigPath
       ? ["fields", field, colorConfigPath]
@@ -476,6 +482,7 @@ export const updateColorMapping = (
         colorMapping = mapValueIrisToColor({
           palette: fieldValue.palette,
           dimensionValues: values,
+          colorMapping: oldColorMapping,
           random,
         });
       }
@@ -489,6 +496,7 @@ export const updateColorMapping = (
         colorMapping = mapValueIrisToColor({
           palette: fieldValue.palette,
           dimensionValues: values,
+          colorMapping: oldColorMapping,
           random,
         });
       }