backport: Support both name & field ref-based column keys in viz settings on...

backport: Support both name & field ref-based column keys in viz settings on read and upgrade on write (#46383) (#48243)

Fixes #48046

Manual backport of d3a51585 to fix customer escalation in

  Not renamed fields in a same table join inherit the renamed name in exports #48046.

Conflicts:
	e2e/test/scenarios/dashboard-filters/temporal-unit-parameters.cy.spec.js
	frontend/src/metabase/static-viz/lib/settings.ts
	frontend/src/metabase/visualizations/lib/settings/column.js
	frontend/src/metabase/visualizations/lib/utils.js
	frontend/src/metabase/visualizations/shared/settings/column.ts
	frontend/src/metabase/visualizations/visualizations/Table.unit.spec.js
	src/metabase/query_processor/streaming/xlsx.clj

frontend/src/metabase-lib/v1/queries/utils/get-column-key.ts → frontend/src/metabase-lib/v1/queries/utils/column-key.ts

@@ -8,11 +8,19 @@ import {
   isFieldReference,
   isValidDimensionReference,
 } from "metabase-lib/v1/references";
-import type { DatasetColumn } from "metabase-types/api";
+import type {
+  ColumnSettings,
+  DatasetColumn,
+  VisualizationSettings,
+} from "metabase-types/api";
 
-export const getColumnKey = (
-  column: Pick<DatasetColumn, "name" | "field_ref">,
-) => {
+export type DatasetColumnReference = Pick<DatasetColumn, "name" | "field_ref">;
+
+export const getColumnKey = (column: DatasetColumnReference) => {
+  return JSON.stringify(["name", column.name]);
+};
+
+export const getLegacyColumnKey = (column: DatasetColumnReference) => {
   let fieldRef = column.field_ref;
 
   if (!fieldRef) {
@@ -42,3 +50,32 @@ export const getColumnKey = (
     isLegacyRef ? ["name", column.name] : ["ref", fieldRef],
   );
 };
+
+export const getColumnNameFromKey = (key: string) => {
+  try {
+    const [tag, name] = JSON.parse(key);
+    return tag === "name" ? name : undefined;
+  } catch {
+    return undefined;
+  }
+};
+
+export const getColumnSettings = (
+  settings: VisualizationSettings | null | undefined,
+  column: DatasetColumnReference,
+) => {
+  return getObjectColumnSettings(settings?.column_settings, column);
+};
+
+// Gets the corresponding viz settings for the column. We check for both
+// legacy and modern keys because not all viz settings have been migrated.
+// To be extra safe and maintain backward compatibility, we check for the
+// legacy key first.
+export const getObjectColumnSettings = (
+  settings: Record<string, ColumnSettings> | null | undefined,
+  column: DatasetColumnReference,
+) => {
+  return (
+    settings?.[getLegacyColumnKey(column)] ?? settings?.[getColumnKey(column)]
+  );
+};

frontend/src/metabase-lib/v1/queries/utils/column-key.unit.spec.ts

+import {
+  getColumnKey,
+  getColumnNameFromKey,
+  getColumnSettings,
+  getLegacyColumnKey,
+  getObjectColumnSettings,
+} from "metabase-lib/v1/queries/utils/column-key";
+import type { DatasetColumn } from "metabase-types/api";
+import {
+  createMockColumn,
+  createMockVisualizationSettings,
+} from "metabase-types/api/mocks";
+
+type TestCase = {
+  title: string;
+  column: DatasetColumn;
+  expectedKey: string;
+};
+
+describe("getColumnKey", () => {
+  it.each<TestCase>([
+    {
+      title: "id-based field ref",
+      column: createMockColumn({ name: "foo", field_ref: ["field", 1, null] }),
+      expectedKey: JSON.stringify(["name", "foo"]),
+    },
+    {
+      title: "name-based field ref",
+      column: createMockColumn({
+        name: "foo",
+        field_ref: ["field", "foo", { "base-type": "type/Text" }],
+      }),
+      expectedKey: JSON.stringify(["name", "foo"]),
+    },
+  ])("should create a name-based key: $title", ({ column, expectedKey }) => {
+    expect(getColumnKey(column)).toEqual(expectedKey);
+  });
+});
+
+describe("getLegacyColumnKey", () => {
+  it.each<TestCase>([
+    {
+      title: "id-based field ref",
+      column: createMockColumn({ name: "foo", field_ref: ["field", 1, null] }),
+      expectedKey: JSON.stringify(["ref", ["field", 1, null]]),
+    },
+    {
+      title: "explicitly joined column",
+      column: createMockColumn({
+        name: "foo",
+        field_ref: ["field", 1, { "join-alias": "x" }],
+      }),
+      expectedKey: JSON.stringify(["ref", ["field", 1, { "join-alias": "x" }]]),
+    },
+    {
+      title: "implicitly joined column",
+      column: createMockColumn({
+        name: "foo",
+        field_ref: ["field", 1, { "source-field": 2 }],
+      }),
+      expectedKey: JSON.stringify(["ref", ["field", 1, { "source-field": 2 }]]),
+    },
+    {
+      title: "temporal-unit is removed from the key",
+      column: createMockColumn({
+        name: "foo",
+        field_ref: ["field", 1, { "temporal-unit": "minute" }],
+      }),
+      expectedKey: JSON.stringify(["ref", ["field", 1, null]]),
+    },
+    {
+      title: "binning is removed from key",
+      column: createMockColumn({
+        name: "foo",
+        field_ref: [
+          "field",
+          1,
+          {
+            "base-type": "type/Integer",
+            binning: { strategy: "num-bins", "num-bins": 10 },
+          },
+        ],
+      }),
+      expectedKey: JSON.stringify([
+        "ref",
+        ["field", 1, { "base-type": "type/Integer" }],
+      ]),
+    },
+    {
+      title: "expression",
+      column: createMockColumn({
+        name: "foo",
+        field_ref: ["expression", "foo"],
+      }),
+      expectedKey: JSON.stringify(["ref", ["expression", "foo"]]),
+    },
+  ])("should create a ref-based key: $title", ({ column, expectedKey }) => {
+    expect(getLegacyColumnKey(column)).toEqual(expectedKey);
+  });
+
+  it.each<TestCase>([
+    {
+      title: "name-based field ref",
+      column: createMockColumn({
+        name: "foo",
+        field_ref: ["field", "foo", { "base-type": "type/Text" }],
+      }),
+      expectedKey: JSON.stringify(["name", "foo"]),
+    },
+    {
+      title: "aggregation",
+      column: createMockColumn({
+        name: "count",
+        field_ref: ["aggregation", 0],
+      }),
+      expectedKey: JSON.stringify(["name", "count"]),
+    },
+  ])("should create a name-based key: $title", ({ column, expectedKey }) => {
+    expect(getLegacyColumnKey(column)).toEqual(expectedKey);
+  });
+});
+
+describe("getColumnNameFromKey", () => {
+  it("should return the name from a name-based key", () => {
+    expect(getColumnNameFromKey(JSON.stringify(["name", "foo"]))).toBe("foo");
+  });
+
+  it("should ignore a field ref-based key", () => {
+    expect(
+      getColumnNameFromKey(JSON.stringify(["ref", ["field", 1, null]])),
+    ).toBeUndefined();
+  });
+
+  it("should ignore invalid json", () => {
+    expect(getColumnNameFromKey("not a json string")).toBeUndefined();
+  });
+});
+
+describe("getColumnSettings", () => {
+  const column = createMockColumn({
+    name: "foo",
+    field_ref: ["field", 1, { "temporal-unit": "minute" }],
+  });
+
+  it("should ignore missing settings", () => {
+    expect(getColumnSettings(null, column)).toBeUndefined();
+  });
+
+  it("should ignore missing column_settings", () => {
+    const settings = createMockVisualizationSettings({
+      column_settings: undefined,
+    });
+    expect(getColumnSettings(settings, column)).toBeUndefined();
+  });
+
+  it("should prefer legacy keys over new keys", () => {
+    const settings = createMockVisualizationSettings({
+      column_settings: {
+        [getLegacyColumnKey(column)]: { column_title: "A" },
+        [getColumnKey(column)]: { column_title: "B" },
+      },
+    });
+    expect(getColumnSettings(settings, column)).toEqual({
+      column_title: "A",
+    });
+  });
+
+  it("should use new keys if old keys are not available", () => {
+    const settings = createMockVisualizationSettings({
+      column_settings: {
+        [getColumnKey(column)]: { column_title: "B" },
+      },
+    });
+    expect(getColumnSettings(settings, column)).toEqual({
+      column_title: "B",
+    });
+  });
+});
+
+describe("getObjectColumnSettings", () => {
+  const column = createMockColumn({
+    name: "foo",
+    field_ref: ["field", 1, { "temporal-unit": "minute" }],
+  });
+
+  it("should ignore missing settings", () => {
+    expect(getObjectColumnSettings(null, column)).toBeUndefined();
+  });
+
+  it("should prefer legacy keys over new keys", () => {
+    const settings = {
+      [getLegacyColumnKey(column)]: { column_title: "A" },
+      [getColumnKey(column)]: { column_title: "B" },
+    };
+    expect(getObjectColumnSettings(settings, column)).toEqual({
+      column_title: "A",
+    });
+  });
+
+  it("should use new keys if old keys are not available", () => {
+    const settings = {
+      [getColumnKey(column)]: { column_title: "B" },
+    };
+    expect(getObjectColumnSettings(settings, column)).toEqual({
+      column_title: "B",
+    });
+  });
+});

frontend/src/metabase-lib/v1/queries/utils/dataset.ts

-import type {
-  DatasetColumn,
-  DatasetData,
-  TableColumnOrderSetting,
-} from "metabase-types/api";
+import type { DatasetData, TableColumnOrderSetting } from "metabase-types/api";
+
+import type { DatasetColumnReference } from "./column-key";
 
 export const datasetContainsNoResults = (data: DatasetData) =>
   data.rows == null || data.rows.length === 0;
 
 export function findColumnIndexesForColumnSettings(
-  columns: Pick<DatasetColumn, "name" | "field_ref">[],
+  columns: DatasetColumnReference[],
   columnSettings: TableColumnOrderSetting[],
 ) {
   const columnIndexByKey = new Map(
@@ -20,7 +18,7 @@ export function findColumnIndexesForColumnSettings(
 }
 
 export function findColumnSettingIndexesForColumns(
-  columns: Pick<DatasetColumn, "name" | "field_ref">[],
+  columns: DatasetColumnReference[],
   columnSettings: TableColumnOrderSetting[],
 ) {
   const columnSettingIndexByKey = new Map(

frontend/src/metabase-lib/v1/queries/utils/get-column-key.unit.spec.js

-import { getColumnKey } from "metabase-lib/v1/queries/utils/get-column-key";
-
-describe("getColumnKey", () => {
-  // NOTE: run legacy tests with and without a field_ref. without is disabled in latest since it now always uses
-  // field_ref, leaving test code in place to compare against older versions
-  for (const fieldRefEnabled of [/*false,*/ true]) {
-    describe(fieldRefEnabled ? "with field_ref" : "without field_ref", () => {
-      it("should return [ref [field ...]] for field", () => {
-        expect(
-          getColumnKey({
-            name: "foo",
-            id: 1,
-            field_ref: fieldRefEnabled ? ["field", 1, null] : undefined,
-          }),
-        ).toEqual(JSON.stringify(["ref", ["field", 1, null]]));
-      });
-      it("should return [ref [field ...]] for foreign field", () => {
-        expect(
-          getColumnKey({
-            name: "foo",
-            id: 1,
-            fk_field_id: 2,
-            field_ref: fieldRefEnabled
-              ? ["field", 1, { "source-field": 2 }]
-              : undefined,
-          }),
-        ).toEqual(JSON.stringify(["ref", ["field", 1, { "source-field": 2 }]]));
-      });
-      it("should return [ref [expression ...]] for expression", () => {
-        expect(
-          getColumnKey({
-            name: "foo",
-            expression_name: "foo",
-            field_ref: fieldRefEnabled ? ["expression", "foo"] : undefined,
-          }),
-        ).toEqual(JSON.stringify(["ref", ["expression", "foo"]]));
-      });
-      it("should return [name ...] for aggregation", () => {
-        const col = {
-          name: "foo",
-          source: "aggregation",
-          field_ref: fieldRefEnabled ? ["aggregation", 0] : undefined,
-        };
-        expect(getColumnKey(col, [col])).toEqual(
-          // NOTE: not ideal, matches existing behavior, but should be ["aggregation", 0]
-          JSON.stringify(["name", "foo"]),
-        );
-      });
-      it("should return [name ...] for aggregation on field literal", () => {
-        const col = {
-          name: "foo",
-          id: ["field", "foo", { "base-type": "type/Integer" }],
-          field_ref: fieldRefEnabled
-            ? ["field", "foo", { "base-type": "type/Integer" }]
-            : undefined,
-        };
-        expect(getColumnKey(col, [col])).toEqual(
-          // NOTE: not ideal, matches existing behavior, but should be ["field", "foo", {"base-type": "type/Integer"}]
-          JSON.stringify(["name", "foo"]),
-        );
-      });
-      it("should return [field ...] for native query column", () => {
-        expect(
-          getColumnKey({
-            name: "foo",
-            field_ref: fieldRefEnabled
-              ? ["field", "foo", { "base-type": "type/Integer" }]
-              : undefined,
-          }),
-        ).toEqual(
-          // NOTE: not ideal, matches existing behavior, but should be ["field", "foo", {"base-type": "type/Integer"}]
-          JSON.stringify(["name", "foo"]),
-        );
-      });
-    });
-  }
-
-  describe("with field_ref", () => {
-    it("should return [ref [field ...]] for joined field", () => {
-      const col = {
-        name: "foo",
-        id: 1,
-        field_ref: ["field", 1, { "join-alias": "x" }],
-      };
-      expect(getColumnKey(col)).toEqual(
-        JSON.stringify(["ref", ["field", 1, { "join-alias": "x" }]]),
-      );
-    });
-  });
-});

frontend/src/metabase-types/api/card.ts

@@ -125,6 +125,15 @@ export type XAxisScale = "ordinal" | "histogram" | "timeseries" | NumericScale;
 
 export type YAxisScale = NumericScale;
 
+export interface ColumnSettings {
+  column_title?: string;
+  number_separators?: string;
+  currency?: string;
+
+  // some options are untyped
+  [key: string]: any;
+}
+
 export type VisualizationSettings = {
   "graph.show_values"?: boolean;
   "stackable.stack_type"?: StackType;
@@ -132,6 +141,9 @@ export type VisualizationSettings = {
 
   // Table
   "table.columns"?: TableColumnOrderSetting[];
+  // Keys here can be modern (returned by `getColumnKey`) or legacy (`getLegacyColumnKey`).
+  // Use `getColumnSettings` which checks for both keys.
+  column_settings?: Record<string, ColumnSettings>;
 
   // X-axis
   "graph.x_axis.title_text"?: string;

frontend/src/metabase/admin/datamodel/components/filters/pickers/DefaultPicker/DefaultPicker.tsx

@@ -12,7 +12,7 @@ import {
   isFuzzyOperator,
 } from "metabase-lib/v1/operators/utils";
 import type Filter from "metabase-lib/v1/queries/structured/Filter";
-import { getColumnKey } from "metabase-lib/v1/queries/utils/get-column-key";
+import { getColumnSettings } from "metabase-lib/v1/queries/utils/column-key";
 import { isCurrency } from "metabase-lib/v1/types/utils/isa";
 import type { DatasetColumn, FieldId, RowValue } from "metabase-types/api";
 
@@ -81,11 +81,9 @@ export function DefaultPicker({
     ?.question()
     ?.settings();
 
-  const key = dimension?.column?.()
-    ? getColumnKey(dimension.column() as DatasetColumn)
-    : "";
-
-  const columnSettings = visualizationSettings?.column_settings?.[key];
+  const column = dimension?.column?.();
+  const columnSettings =
+    column && getColumnSettings(visualizationSettings, column as DatasetColumn);
 
   const fieldMetadata = field?.metadata?.fields[field?.id as FieldId];
   const fieldSettings = {

frontend/src/metabase/dashboard/components/ClickBehaviorSidebar/ClickBehaviorSidebar.tsx

@@ -10,7 +10,7 @@ import {
   canSaveClickBehavior,
   clickBehaviorIsValid,
 } from "metabase-lib/v1/parameters/utils/click-behavior";
-import { getColumnKey } from "metabase-lib/v1/queries/utils/get-column-key";
+import { getColumnKey } from "metabase-lib/v1/queries/utils/column-key";
 import type {
   CardId,
   ClickBehavior,

frontend/src/metabase/dashboard/components/ClickBehaviorSidebar/utils.ts

-import { getIn } from "icepick";
-
 import type { IconName } from "metabase/ui";
-import { getColumnKey } from "metabase-lib/v1/queries/utils/get-column-key";
+import { getColumnSettings } from "metabase-lib/v1/queries/utils/column-key";
 import type {
   ClickBehaviorType,
   DatasetColumn,
@@ -23,10 +21,11 @@ export function getClickBehaviorForColumn(
   dashcard: QuestionDashboardCard,
   column: DatasetColumn,
 ) {
-  return getIn(dashcard, [
-    "visualization_settings",
-    "column_settings",
-    getColumnKey(column),
-    "click_behavior",
-  ]);
+  if (dashcard.visualization_settings) {
+    const columnSettings = getColumnSettings(
+      dashcard.visualization_settings,
+      column,
+    );
+    return columnSettings?.click_behavior;
+  }
 }

frontend/src/metabase/querying/utils/viz-settings/sync-viz-settings.ts

 import * as Lib from "metabase-lib";
+import {
+  getColumnKey,
+  getColumnNameFromKey,
+} from "metabase-lib/v1/queries/utils/column-key";
 import type {
+  ColumnSettings,
   Series,
   SingleSeries,
   VisualizationSettings,
@@ -53,6 +58,7 @@ export function syncVizSettings(
 ): VisualizationSettings {
   let nextSettings = settings;
   nextSettings = syncTableColumns(nextSettings, newColumns, oldColumns);
+  nextSettings = syncColumnSettings(nextSettings, newColumns, oldColumns);
   nextSettings = syncGraphMetrics(nextSettings, newColumns, oldColumns);
   return nextSettings;
 }
@@ -90,7 +96,7 @@ type SyncColumnNamesOpts<T> = {
   settings: T[];
   newColumns: ColumnInfo[];
   oldColumns: ColumnInfo[];
-  getColumnName: (setting: T) => string;
+  getColumnName: (setting: T) => string | undefined;
   setColumnName: (setting: T, newName: string) => T;
   createSetting: (column: ColumnInfo) => T;
   shouldCreateSetting: (column: ColumnInfo) => boolean | undefined;
@@ -115,8 +121,9 @@ function syncColumns<T>({
     oldColumns.map(column => [column.key, column.name]),
   );
   const remappedSettings = settings.reduce((settings: T[], setting) => {
-    const oldKey = oldKeyByName[getColumnName(setting)];
-    const newName = newNameByKey[oldKey];
+    const oldName = getColumnName(setting);
+    const oldKey = oldName && oldKeyByName[oldName];
+    const newName = oldKey && newNameByKey[oldKey];
     if (!oldKey) {
       settings.push(setting);
     } else if (newName) {
@@ -156,6 +163,32 @@ function syncTableColumns(
   };
 }
 
+function syncColumnSettings(
+  settings: VisualizationSettings,
+  newColumns: ColumnInfo[],
+  oldColumns: ColumnInfo[],
+): VisualizationSettings {
+  const columnSettings = settings["column_settings"];
+  if (!columnSettings) {
+    return settings;
+  }
+
+  const columnEntries = syncColumns<[string, ColumnSettings]>({
+    settings: Object.entries(columnSettings),
+    newColumns,
+    oldColumns,
+    getColumnName: ([key]) => getColumnNameFromKey(key),
+    setColumnName: ([_, setting], name) => [getColumnKey({ name }), setting],
+    createSetting: column => [getColumnKey(column), {}],
+    shouldCreateSetting: () => false,
+  });
+
+  return {
+    ...settings,
+    column_settings: Object.fromEntries(columnEntries),
+  };
+}
+
 function syncGraphMetrics(
   settings: VisualizationSettings,
   newColumns: ColumnInfo[],

frontend/src/metabase/querying/utils/viz-settings/sync-viz-settings.unit.spec.tsx

@@ -157,6 +157,35 @@ describe("syncVizSettings", () => {
     });
   });
 
+  describe("column_settings", () => {
+    it("should handle adding new columns with column.name changes", () => {
+      const oldColumns: ColumnInfo[] = [
+        { name: "ID", key: "ID" },
+        { name: "ID_2", key: "PEOPLE__ID" },
+      ];
+      const newColumns: ColumnInfo[] = [
+        { name: "ID", key: "ID" },
+        { name: "ID_2", key: "PRODUCTS__ID" },
+        { name: "ID_3", key: "PEOPLE__ID" },
+      ];
+
+      const oldSettings = createMockVisualizationSettings({
+        column_settings: {
+          '["name","ID"]': { column_title: "@ID" },
+          '["name","ID_2"]': { column_title: "ID@" },
+        },
+      });
+
+      const newSettings = syncVizSettings(oldSettings, newColumns, oldColumns);
+      expect(newSettings).toEqual({
+        column_settings: {
+          '["name","ID"]': { column_title: "@ID" },
+          '["name","ID_3"]': { column_title: "ID@" },
+        },
+      });
+    });
+  });
+
   describe("graph.metrics", () => {
     it("should not update the setting if the order of columns has changed", () => {
       const oldColumns: ColumnInfo[] = [

frontend/src/metabase/static-viz/lib/format.ts

@@ -19,7 +19,7 @@ import type {
 } from "metabase/visualizations/shared/types/format";
 import { getLabelsMetricColumn } from "metabase/visualizations/shared/utils/series";
 import type { RemappingHydratedDatasetColumn } from "metabase/visualizations/types";
-import { getColumnKey } from "metabase-lib/v1/queries/utils/get-column-key";
+import { getColumnSettings } from "metabase-lib/v1/queries/utils/column-key";
 import { rangeForValue } from "metabase-lib/v1/queries/utils/range-for-value";
 import {
   isBoolean,
@@ -109,7 +109,7 @@ export const getStaticFormatters = (
 ): ChartTicksFormatters => {
   const yTickFormatter = (value: StringLike) => {
     const column = chartColumns.dimension.column;
-    const columnSettings = settings.column_settings?.[getColumnKey(column)];
+    const columnSettings = getColumnSettings(settings, column);
     const valueToFormat = getRemappedValue(value, column);
 
     const options = getFormattingOptionsWithoutScaling({
@@ -125,8 +125,10 @@ export const getStaticFormatters = (
 
   const percentXTicksFormatter = (percent: NumberLike) => {
     const column = metricColumn.column;
-    const number_separators =
-      settings.column_settings?.[getColumnKey(column)]?.number_separators;
+    const number_separators = getColumnSettings(
+      settings,
+      column,
+    )?.number_separators;
 
     const options = getFormattingOptionsWithoutScaling({
       column,
@@ -141,7 +143,7 @@ export const getStaticFormatters = (
 
   const xTickFormatter = (value: NumberLike) => {
     const column = metricColumn.column;
-    const columnSettings = settings.column_settings?.[getColumnKey(column)];
+    const columnSettings = getColumnSettings(settings, column);
     const valueToFormat = getRemappedValue(value, column);
 
     const options = getFormattingOptionsWithoutScaling({
@@ -168,7 +170,7 @@ export const getLabelsStaticFormatter = (
   settings: VisualizationSettings,
 ): ValueFormatter => {
   const column = getLabelsMetricColumn(chartColumns).column;
-  const columnSettings = settings.column_settings?.[getColumnKey(column)];
+  const columnSettings = getColumnSettings(settings, column);
   const options = getFormattingOptionsWithoutScaling({
     column,
     ...columnSettings,

frontend/src/metabase/static-viz/lib/settings.ts

@@ -2,8 +2,7 @@ import type {
   ComputedVisualizationSettings,
   RemappingHydratedDatasetColumn,
 } from "metabase/visualizations/types";
-import { getColumnKey } from "metabase-lib/v1/queries/utils/get-column-key";
-import { normalize } from "metabase-lib/v1/queries/utils/normalize";
+import { getObjectColumnSettings } from "metabase-lib/v1/queries/utils/column-key";
 import type {
   DatasetColumn,
   RawSeries,
@@ -14,16 +13,12 @@ const getColumnSettings = (
   column: DatasetColumn,
   settings: VisualizationSettings,
 ): Record<string, unknown> => {
-  const columnKey = Object.keys(settings.column_settings ?? {}).find(
-    possiblyDenormalizedFieldRef =>
-      normalize(possiblyDenormalizedFieldRef) === getColumnKey(column),
+  const storedSettings = getObjectColumnSettings(
+    settings.column_settings,
+    column,
   );
-
-  if (!columnKey) {
-    return { column };
-  }
-
-  return { column, ...settings.column_settings?.[columnKey] };
+  const columnSettings = { column, ...column.settings, ...storedSettings };
+  return columnSettings;
 };
 
 export const getCommonStaticVizSettings = (rawSeries: RawSeries) => {

frontend/src/metabase/visualizations/click-actions/actions/ColumnFormattingAction/ColumnFormattingAction.tsx

@@ -8,7 +8,7 @@ import type {
   LegacyDrill,
 } from "metabase/visualizations/types";
 import * as Lib from "metabase-lib";
-import { getColumnKey } from "metabase-lib/v1/queries/utils/get-column-key";
+import { getColumnKey } from "metabase-lib/v1/queries/utils/column-key";
 import type { VisualizationSettings } from "metabase-types/api";
 
 import { PopoverRoot } from "./ColumnFormattingAction.styled";

frontend/src/metabase/visualizations/components/ChartSettings.jsx

@@ -24,7 +24,7 @@ import {
 import { getSettingDefinitionsForColumn } from "metabase/visualizations/lib/settings/column";
 import { keyForSingleSeries } from "metabase/visualizations/lib/settings/series";
 import { getSettingsWidgetsForSeries } from "metabase/visualizations/lib/settings/visualization";
-import { getColumnKey } from "metabase-lib/v1/queries/utils/get-column-key";
+import { getColumnKey } from "metabase-lib/v1/queries/utils/column-key";
 
 import {
   ChartSettingsFooterRoot,

frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.jsx

@@ -3,7 +3,7 @@ import { t } from "ttag";
 import _ from "underscore";
 
 import { keyForSingleSeries } from "metabase/visualizations/lib/settings/series";
-import { getColumnKey } from "metabase-lib/v1/queries/utils/get-column-key";
+import { getColumnKey } from "metabase-lib/v1/queries/utils/column-key";
 
 import {
   ChartSettingFieldPickerRoot,

frontend/src/metabase/visualizations/components/settings/ChartSettingFieldsPartition.jsx

@@ -9,7 +9,7 @@ import _ from "underscore";
 import Label from "metabase/components/type/Label";
 import { DragDropContext } from "metabase/core/components/DragDropContext";
 import CS from "metabase/css/core/index.css";
-import { getColumnKey } from "metabase-lib/v1/queries/utils/get-column-key";
+import { getColumnKey } from "metabase-lib/v1/queries/utils/column-key";
 
 import {
   DroppableContainer,

frontend/src/metabase/visualizations/components/settings/ChartSettingNestedSettings.jsx

@@ -11,7 +11,7 @@ import ChartSettingsWidget from "../ChartSettingsWidget";
  * @deprecated HOCs are deprecated
  */
 const chartSettingNestedSettings =
-  ({ getObjectKey, getSettingsWidgetsForObject }) =>
+  ({ getObjectKey, getObjectSettings, getSettingsWidgetsForObject }) =>
   ComposedComponent =>
     class extends Component {
       constructor(props) {
@@ -55,15 +55,23 @@ const chartSettingNestedSettings =
         }
       };
 
-      handleChangeSettingsForObjectKey = (objectKey, changedSettings) => {
-        const { onChange } = this.props;
-        const objectsSettings = this.props.value || {};
-        const objectSettings = objectsSettings[objectKey] || {};
-        const newSettings = updateSettings(objectSettings, changedSettings);
-        onChange({
-          ...objectsSettings,
-          [objectKey]: newSettings,
-        });
+      handleChangeSettingsForObjectKey = (changedKey, changedSettings) => {
+        const { objects, onChange } = this.props;
+        const oldSettings = this.props.value || {};
+        const newSettings = objects.reduce((newSettings, object) => {
+          const currentKey = getObjectKey(object);
+          const objectSettings = getObjectSettings(oldSettings, object);
+          if (currentKey === changedKey) {
+            newSettings[currentKey] = updateSettings(
+              objectSettings,
+              changedSettings,
+            );
+          } else {
+            newSettings[currentKey] = objectSettings;
+          }
+          return newSettings;
+        }, {});
+        onChange(newSettings);
       };
 
       render() {
@@ -76,7 +84,8 @@ const chartSettingNestedSettings =
           );
           if (editingObject) {
             const objectsSettings = this.props.value || {};
-            const objectSettings = objectsSettings[editingObjectKey] || {};
+            const objectSettings =
+              getObjectSettings(objectsSettings, editingObject) ?? {};
             const objectSettingsWidgets = getSettingsWidgetsForObject(
               series,
               editingObject,

frontend/src/metabase/visualizations/components/settings/ChartSettingTableColumns/TableColumnPanel/utils.ts

 import type { IconName } from "metabase/ui";
 import { getIconForField } from "metabase-lib/v1/metadata/utils/fields";
+import { getColumnKey } from "metabase-lib/v1/queries/utils/column-key";
 import { findColumnIndexesForColumnSettings } from "metabase-lib/v1/queries/utils/dataset";
-import { getColumnKey } from "metabase-lib/v1/queries/utils/get-column-key";
 import type {
   DatasetColumn,
   TableColumnOrderSetting,

frontend/src/metabase/visualizations/components/settings/ChartSettingsListColumns/ChartSettingsListColumns.tsx

@@ -5,7 +5,7 @@ import _ from "underscore";
 
 import Button from "metabase/core/components/Button";
 import type Question from "metabase-lib/v1/Question";
-import { getColumnKey } from "metabase-lib/v1/queries/utils/get-column-key";
+import { getColumnKey } from "metabase-lib/v1/queries/utils/column-key";
 import type {
   ConcreteFieldReference,
   DatasetColumn,

frontend/src/metabase/visualizations/echarts/cartesian/model/util.ts

@@ -3,7 +3,7 @@ import type {
   ComputedVisualizationSettings,
   RemappingHydratedDatasetColumn,
 } from "metabase/visualizations/types";
-import { getColumnKey } from "metabase-lib/v1/queries/utils/get-column-key";
+import { getColumnSettings } from "metabase-lib/v1/queries/utils/column-key";
 
 import {
   NEGATIVE_BAR_DATA_LABEL_KEY_SUFFIX,
@@ -28,8 +28,7 @@ export function getColumnScaling(
   settings: ComputedVisualizationSettings,
 ) {
   const columnSettings =
-    settings.column?.(column) ??
-    settings.column_settings?.[getColumnKey(column)];
+    settings.column?.(column) ?? getColumnSettings(settings, column);
   const scale = columnSettings?.scale;
   return Number.isFinite(scale) ? (scale as number) : 1;
 }