fix: Apply custom label colors in the Dashboard immediately

superset-frontend/src/chart/Chart.jsx

@@ -44,6 +44,7 @@ const propTypes = {
   // formData contains chart's own filter parameter
   // and merged with extra filter that current dashboard applying
   formData: PropTypes.object.isRequired,
+  labelColors: PropTypes.object,
   width: PropTypes.number,
   height: PropTypes.number,
   setControlValue: PropTypes.func,

superset-frontend/src/chart/ChartRenderer.jsx

@@ -29,6 +29,7 @@ const propTypes = {
   datasource: PropTypes.object,
   initialValues: PropTypes.object,
   formData: PropTypes.object.isRequired,
+  labelColors: PropTypes.object,
   height: PropTypes.number,
   width: PropTypes.number,
   setControlValue: PropTypes.func,
@@ -100,6 +101,7 @@ class ChartRenderer extends React.Component {
         nextProps.height !== this.props.height ||
         nextProps.width !== this.props.width ||
         nextProps.triggerRender ||
+        nextProps.labelColors !== this.props.labelColors ||
         nextProps.formData.color_scheme !== this.props.formData.color_scheme ||
         nextProps.cacheBusterProp !== this.props.cacheBusterProp
       );

superset-frontend/src/dashboard/actions/dashboardInfo.ts

@@ -17,13 +17,33 @@
  * under the License.
  */
 import { Dispatch } from 'redux';
-import { makeApi } from '@superset-ui/core';
+import { makeApi, CategoricalColorNamespace } from '@superset-ui/core';
+import { isString } from 'lodash';
 import { ChartConfiguration, DashboardInfo } from '../reducers/types';
 
 export const DASHBOARD_INFO_UPDATED = 'DASHBOARD_INFO_UPDATED';
 
 // updates partially changed dashboard info
 export function dashboardInfoChanged(newInfo: { metadata: any }) {
+  const { metadata } = newInfo;
+
+  if (metadata?.label_colors) {
+    const {
+      color_scheme: scheme,
+      color_namespace: namespace,
+      label_colors: labelColors,
+    } = metadata;
+    const colorMap = isString(labelColors)
+      ? JSON.parse(labelColors)
+      : labelColors;
+    Object.keys(colorMap).forEach(label => {
+      CategoricalColorNamespace.getScale(scheme, namespace).setColor(
+        label,
+        colorMap[label],
+      );
+    });
+  }
+
   return { type: DASHBOARD_INFO_UPDATED, newInfo };
 }
 export const SET_CHART_CONFIG_BEGIN = 'SET_CHART_CONFIG_BEGIN';

superset-frontend/src/dashboard/components/gridComponents/Chart.jsx

@@ -52,6 +52,7 @@ const propTypes = {
   // from redux
   chart: chartPropShape.isRequired,
   formData: PropTypes.object.isRequired,
+  labelColors: PropTypes.object,
   datasource: PropTypes.object,
   slice: slicePropShape.isRequired,
   sliceName: PropTypes.string.isRequired,
@@ -274,6 +275,7 @@ export default class Chart extends React.Component {
       editMode,
       filters,
       formData,
+      labelColors,
       updateSliceName,
       sliceName,
       toggleExpandSlice,
@@ -396,6 +398,7 @@ export default class Chart extends React.Component {
             dashboardId={dashboardId}
             initialValues={initialValues}
             formData={formData}
+            labelColors={labelColors}
             ownState={ownState}
             filterState={filterState}
             queriesResponse={chart.queriesResponse}

superset-frontend/src/dashboard/containers/Chart.jsx

@@ -61,7 +61,8 @@ function mapStateToProps(
     (chart && chart.form_data && datasources[chart.form_data.datasource]) ||
     PLACEHOLDER_DATASOURCE;
   const { colorScheme, colorNamespace } = dashboardState;
-
+  const { metadata } = dashboardInfo;
+  const labelColors = metadata?.label_colors;
   // note: this method caches filters if possible to prevent render cascades
   const formData = getFormDataWithExtraFilters({
     layout: dashboardLayout.present,
@@ -75,13 +76,15 @@ function mapStateToProps(
     sliceId: id,
     nativeFilters,
     dataMask,
+    labelColors,
   });
 
   formData.dashboardId = dashboardInfo.id;
 
   return {
     chart,
     datasource,
+    labelColors: labelColors && Object.keys(labelColors).length && labelColors,
     slice: sliceEntities.slices[id],
     timeout: dashboardInfo.common.conf.SUPERSET_WEBSERVER_TIMEOUT,
     filters: getActiveFilters() || EMPTY_OBJECT,

superset-frontend/src/dashboard/util/charts/getFormDataWithExtraFilters.ts

@@ -45,6 +45,7 @@ export interface GetFormDataWithExtraFiltersArguments {
   sliceId: number;
   dataMask: DataMaskStateWithId;
   nativeFilters: NativeFiltersState;
+  labelColors?: Record<string, string>;
 }
 
 // this function merge chart's formData with dashboard filters value,
@@ -61,11 +62,10 @@ export default function getFormDataWithExtraFilters({
   sliceId,
   layout,
   dataMask,
+  labelColors,
 }: GetFormDataWithExtraFiltersArguments) {
-  // Propagate color mapping to chart
   const scale = CategoricalColorNamespace.getScale(colorScheme, colorNamespace);
-  const labelColors = scale.getColorMap();
-
+  const scaleLabelColors = labelColors || scale.getColorMap();
   // if dashboard metadata + filters have not changed, use cache if possible
   const cachedFormData = cachedFormdataByChart[sliceId];
   if (
@@ -76,7 +76,7 @@ export default function getFormDataWithExtraFilters({
     areObjectsEqual(cachedFormData?.color_namespace, colorNamespace, {
       ignoreUndefined: true,
     }) &&
-    areObjectsEqual(cachedFormData?.label_colors, labelColors, {
+    areObjectsEqual(cachedFormData?.label_colors, scaleLabelColors, {
       ignoreUndefined: true,
     }) &&
     !!cachedFormData &&
@@ -109,11 +109,12 @@ export default function getFormDataWithExtraFilters({
 
   const formData = {
     ...chart.formData,
+    label_colors: scaleLabelColors,
     ...(colorScheme && { color_scheme: colorScheme }),
-    label_colors: labelColors,
     extra_filters: getEffectiveExtraFilters(filters),
     ...extraData,
   };
+
   cachedFiltersByChart[sliceId] = filters;
   cachedFormdataByChart[sliceId] = { ...formData, dataMask };
 

superset-frontend/src/explore/exploreUtils/index.js

@@ -103,6 +103,10 @@ export function getExploreLongUrl(
     return null;
   }
 
+  // label_colors should not pollute the URL
+  // eslint-disable-next-line no-param-reassign
+  delete formData.label_colors;
+
   const uri = new URI('/');
   const directory = getURIDirectory(endpointType);
   const search = uri.search(true);
@@ -159,6 +163,11 @@ export function getExploreUrl({
   if (!formData.datasource) {
     return null;
   }
+
+  // label_colors should not pollute the URL
+  // eslint-disable-next-line no-param-reassign
+  delete formData.label_colors;
+
   let uri = getChartDataUri({ path: '/', allowDomainSharding });
   if (curUrl) {
     uri = URI(URI(curUrl).search());