fix(Dashboard): Color inconsistency on refreshes and conflicts (#27439)

superset-frontend/src/explore/components/ExploreChartHeader/index.jsx

@@ -21,14 +21,7 @@ import { useHistory } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import { Tooltip } from 'src/components/Tooltip';
-import {
-  CategoricalColorNamespace,
-  css,
-  logging,
-  SupersetClient,
-  t,
-  tn,
-} from '@superset-ui/core';
+import { css, logging, SupersetClient, t, tn } from '@superset-ui/core';
 import { chartPropShape } from 'src/dashboard/util/propShapes';
 import AlteredSliceTag from 'src/components/AlteredSliceTag';
 import Button from 'src/components/Button';
@@ -38,6 +31,7 @@ import { sliceUpdated } from 'src/explore/actions/exploreActions';
 import { PageHeaderWithActions } from 'src/components/PageHeaderWithActions';
 import MetadataBar, { MetadataType } from 'src/components/MetadataBar';
 import { setSaveChartModalVisibility } from 'src/explore/actions/saveModalActions';
+import { applyColors, resetColors } from 'src/utils/colorScheme';
 import { useExploreAdditionalActionsMenu } from '../useExploreAdditionalActionsMenu';
 
 const propTypes = {
@@ -96,6 +90,13 @@ export const ExploreChartHeader = ({
     const dashboard =
       dashboardId && dashboards && dashboards.find(d => d.id === dashboardId);
 
+    if (!dashboard) {
+      // clean up color namespace and shared color maps
+      // to avoid colors spill outside of dashboard context
+      resetColors(metadata?.color_namespace);
+      return;
+    }
+
     if (dashboard) {
       try {
         // Dashboards from metadata don't contain the json_metadata field
@@ -106,23 +107,8 @@ export const ExploreChartHeader = ({
         const result = response?.json?.result;
 
         // setting the chart to use the dashboard custom label colors if any
-        const metadata = JSON.parse(result.json_metadata);
-        const sharedLabelColors = metadata.shared_label_colors || {};
-        const customLabelColors = metadata.label_colors || {};
-        const mergedLabelColors = {
-          ...sharedLabelColors,
-          ...customLabelColors,
-        };
-
-        const categoricalNamespace = CategoricalColorNamespace.getNamespace();
-
-        Object.keys(mergedLabelColors).forEach(label => {
-          categoricalNamespace.setColor(
-            label,
-            mergedLabelColors[label],
-            metadata.color_scheme,
-          );
-        });
+        const dashboardMetadata = JSON.parse(result.json_metadata);
+        applyColors(dashboardMetadata);
       } catch (error) {
         logging.info(t('Unable to retrieve dashboard colors'));
       }
@@ -130,7 +116,7 @@ export const ExploreChartHeader = ({
   };
 
   useEffect(() => {
-    if (dashboardId) updateCategoricalNamespace();
+    updateCategoricalNamespace();
   }, []);
 
   const openPropertiesModal = () => {