Bug description

I've created a dashboard with the color scheme set as Superset Colors. But every time I hit refresh, the colors of the dashboard change, however the color scheme does not change in the dashboard properties.

How to reproduce the bug

  1. Click on 'edit dashboard' on any existing dashboard
  2. Change color scheme to 'Superset Colors'
  3. Save dashboard
  4. reload the page

Screenshots/recordings

No response

Superset version

4.0.2

Python version

3.9

Node version

16

Browser

Chrome

Additional context

No response

Checklist

  • [X] I have searched Superset docs and Slack and didn't find a solution to my problem.
  • [X] I have searched the GitHub issue tracker and didn't find a similar bug report.
  • [X] I have checked Superset's logs for errors and if I found a relevant Python stacktrace, I included it here as text in the "additional context" section.

Comment From: dosubot[bot]

To prevent the dashboard colors from changing on every refresh when the color scheme is set to "Superset Colors" in Superset version 4.0.2, ensure that the color_scheme and label_colors are consistently defined in the dashboard's json_metadata.

Here is an example configuration for json_metadata:

{
  "color_scheme": "supersetColors",
  "label_colors": {
    "0": "#FCC700",
    "1": "#A868B7",
    "15": "#3CCCCB",
    "30": "#A38F79",
    "45": "#8FD3E4",
    "age": "#1FA8C9",
    "Yes,": "#1FA8C9",
    "Female": "#454E7C",
    "Prefer": "#5AC189",
    "No,": "#FF7F44",
    "Male": "#666666",
    "Prefer not to say": "#E04355",
    "Ph.D.": "#FCC700",
    "associate's degree": "#A868B7",
    "bachelor's degree": "#3CCCCB",
    "high school diploma or equivalent (GED)": "#A38F79",
    "master's degree (non-professional)": "#8FD3E4",
    "no high school (secondary school)": "#A1A6BD",
    "professional degree (MBA, MD, JD, etc.)": "#ACE1C4",
    "some college credit, no degree": "#FEC0A1",
    "some high school": "#B2B2B2",
    "trade, technical, or vocational training": "#EFA1AA",
    "No, not an ethnic minority": "#1FA8C9",
    "Yes, an ethnic minority": "#454E7C",
    "<NULL>": "#5AC189",
    "Yes": "#FF7F44",
    "No": "#666666",
    "last_yr_income": "#E04355",
    "More": "#A1A6BD",
    "Less": "#ACE1C4",
    "I": "#FEC0A1",
    "expected_earn": "#B2B2B2",
    "Yes: Willing To": "#EFA1AA",
    "No: Not Willing to": "#FDE380",
    "No Answer": "#D3B3DA",
    "In an Office (with Other Developers)": "#9EE5E5",
    "No Preference": "#D1C6BC",
    "From Home": "#1FA8C9"
  }
}

Ensure this configuration is saved and not overwritten on each refresh. If the colors are still changing, check for any scripts or settings that might dynamically alter these values on refresh.

Additionally, you can use the updateDashboardLabelsColor function to ensure the color scheme and label colors are correctly applied and synchronized. This function updates the dashboard metadata with the correct color settings and ensures the color scheme is applied consistently [1][2][3].

To continue talking to Dosu, mention @dosu.

Comment From: gladwincogoport

@dosu my labels are dynamic in nature. I'm unable to define the entire list of labels

Comment From: dosubot[bot]

To ensure the color scheme remains consistent in Superset version 4.0.2 despite having dynamic labels, you can use the ColorSchemeControl component and the updateDashboardLabelsColor function. These tools help manage and apply color schemes effectively, even with dynamic labels.

Using ColorSchemeControl

Here's an example of how to use the ColorSchemeControl component:

import React from 'react';
import { ColorSchemeControl } from 'src/explore/components/controls/ColorSchemeControl';

const colorSchemeProps = {
  hasCustomLabelsColor: true,
  dashboardId: 1, // Your dashboard ID
  label: 'Color scheme',
  name: 'color_scheme',
  onChange: (value: string) => {
    console.log('Color scheme changed to:', value);
  },
  value: 'supersetColors',
  clearable: true,
  defaultScheme: 'SUPERSET_DEFAULT',
  choices: [
    ['supersetColors', 'Superset Colors'],
    // Add more color scheme choices if needed
  ],
  schemes: {
    supersetColors: { id: 'supersetColors', label: 'Superset Colors', colors: ['#FF5733', '#33FF57', '#3357FF'] },
    // Define your color schemes here
  },
  isLinear: false,
};

const MyDashboard = () => (
  <div>
    <ColorSchemeControl {...colorSchemeProps} />
  </div>
);

export default MyDashboard;

Using updateDashboardLabelsColor

To ensure the color scheme and labels color map are synchronized, use the updateDashboardLabelsColor function. This function updates the dashboard metadata with the correct color scheme and applies the colors to the labels:

import { updateDashboardLabelsColor } from 'src/dashboard/actions/dashboardState';

const syncColorScheme = async (dispatch, getState) => {
  const {
    dashboardInfo: { id, metadata },
  } = getState();
  const categoricalSchemes = getCategoricalSchemeRegistry();
  const colorScheme = metadata?.color_scheme;
  const colorSchemeRegistry = categoricalSchemes.get(
    metadata?.color_scheme,
    true,
  );
  const defaultScheme = categoricalSchemes.defaultKey;
  const fallbackScheme = defaultScheme?.toString() || 'supersetColors';
  const colorSchemeDomain = metadata?.color_scheme_domain || [];

  try {
    const updatedMetadata = { ...metadata };
    let updatedScheme = metadata?.color_scheme;

    if (colorScheme && !colorSchemeRegistry) {
      updatedScheme = fallbackScheme;
      updatedMetadata.color_scheme = updatedScheme;
      updatedMetadata.color_scheme_domain = getColorSchemeDomain(colorScheme);

      dispatch(setColorScheme(updatedScheme));
      applyColors(updatedMetadata, true);
    }

    const isMapSynced = isLabelsColorMapSynced(metadata);
    if (!isMapSynced) {
      applyColors(updatedMetadata, true);
      updatedMetadata.shared_label_colors = getLabelsColorMapEntries();
    }

    await updateDashboardMetadata(id, updatedMetadata, dispatch);
  } catch (error) {
    console.error('Error updating dashboard labels color:', error);
  }
};

By following these steps and utilizing the provided functions, you can ensure that the color scheme remains consistent across your Superset dashboard, even with dynamic labels [1][2].

To continue talking to Dosu, mention @dosu.

Comment From: rusackas

CC @geido

Comment From: geido

@gladwincogoport Do you have a video showing the issue? it would help. Thank you

Comment From: oriabyi

Hello @geido, I have the same problem on version 4.0.2

https://github.com/user-attachments/assets/ea726d8d-dc76-4545-9473-711195943bab

Comment From: persistanceTube

I have the same problem, how can i stop it from changing color. Thank you

Comment From: geido

I have the same problem, how can i stop it from changing color. Thank you

What is your Superset version?

Comment From: persistanceTube

I have the same problem, how can i stop it from changing color. Thank you

What is your Superset version?

my Superset version is 4.0.2，Will upgrading to 4.1.0 solve this?

Comment From: geido

@persistanceTube there has been a lot of work around color consistency issues. You can try with 4.1.2

Comment From: rusackas

This has been silent for a long while now. I'd recommend trying 4.1.3 or 5.0.0 at this point if you're still facing this, but I'll assume it's resolved and/or you've moved on, and close this as not-planned. Happy to reopen it if it's still an issue on newer versions (or master) and/or someone wants to contribute a fix.