chore: Color consistency E2E tests

superset-frontend/cypress-base/cypress/integration/dashboard/utils.ts

@@ -478,3 +478,12 @@ export function addCountryNameFilter() {
  testItems.topTenChart.filterColumn,
  );
 }
+
+export function openTab(tabComponentIndex: number, tabIndex: number) {
+ return cy
+ .getBySel('dashboard-component-tabs')
+ .eq(tabComponentIndex)
+ .find('[role="tab"]')
+ .eq(tabIndex)
+ .click();
+}

superset-frontend/cypress-base/cypress/support/index.d.ts

@@ -65,6 +65,7 @@ declare namespace Cypress {
  * Get
  */
  getDashboards(): cy;
+ getDashboard(dashboardId: string | number): Record<string, any>;
  getCharts(): cy;
 
  /**
@@ -80,6 +81,11 @@ declare namespace Cypress {
  deleteDashboardByName(dashboardName: string, failOnStatusCode: boolean): cy;
  deleteChartByName(name: string, failOnStatusCode: boolean): cy;
  deleteChart(id: number, failOnStatusCode: boolean): cy;
+
+ /**
+ * Update
+ */
+ updateDashboard(dashboardId: number, body: Record<string, any>): cy;
  }
 }
 

superset-frontend/cypress-base/cypress/support/index.ts

@@ -332,6 +332,35 @@ Cypress.Commands.add('getDashboards', () =>
  .then(resp => resp.body.result),
 );
 
+Cypress.Commands.add('getDashboard', (dashboardId: string | number) =>
+ cy
+ .request({
+ method: 'GET',
+ url: `api/v1/dashboard/${dashboardId}`,
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${TokenName}`,
+ },
+ })
+ .then(resp => resp.body.result),
+);
+
+Cypress.Commands.add(
+ 'updateDashboard',
+ (dashboardId: number, body: Record<string, any>) =>
+ cy
+ .request({
+ method: 'PUT',
+ url: `api/v1/dashboard/${dashboardId}`,
+ body,
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${TokenName}`,
+ },
+ })
+ .then(resp => resp.body.result),
+);
+
 Cypress.Commands.add('deleteChart', (id: number, failOnStatusCode = false) =>
  cy
  .request({

superset-frontend/packages/superset-ui-core/src/color/CategoricalColorScale.ts

@@ -51,7 +51,7 @@ class CategoricalColorScale extends ExtensibleFunction {
  * @param {*} parentForcedColors optional parameter that comes from parent
  * (usually CategoricalColorNamespace) and supersede this.forcedColors
  */
- constructor(colors: string[], parentForcedColors?: ColorsLookup) {
+ constructor(colors: string[], parentForcedColors: ColorsLookup = {}) {
  super((value: string, sliceId?: number) => this.getColor(value, sliceId));
 
  this.originColors = colors;
@@ -67,30 +67,25 @@ class CategoricalColorScale extends ExtensibleFunction {
  const cleanedValue = stringifyAndTrim(value);
  const sharedLabelColor = getSharedLabelColor();
 
- const parentColor = this.parentForcedColors?.[cleanedValue];
- if (parentColor) {
- sharedLabelColor.addSlice(cleanedValue, parentColor, sliceId);
- return parentColor;
- }
-
- const forcedColor = this.forcedColors[cleanedValue];
- if (forcedColor) {
- sharedLabelColor.addSlice(cleanedValue, forcedColor, sliceId);
- return forcedColor;
- }
-
- if (isFeatureEnabled(FeatureFlag.USE_ANALAGOUS_COLORS)) {
- const multiple = Math.floor(
- this.domain().length / this.originColors.length,
- );
- if (multiple > this.multiple) {
- this.multiple = multiple;
- const newRange = getAnalogousColors(this.originColors, multiple);
- this.range(this.originColors.concat(newRange));
+ // priority: parentForcedColors > forcedColors > labelColors
+ let color =
+ this.parentForcedColors?.[cleanedValue] ||
+ this.forcedColors?.[cleanedValue] ||
+ sharedLabelColor.getColorMap().get(cleanedValue);
+
+ if (!color) {
+ if (isFeatureEnabled(FeatureFlag.USE_ANALAGOUS_COLORS)) {
+ const multiple = Math.floor(
+ this.domain().length / this.originColors.length,
+ );
+ if (multiple > this.multiple) {
+ this.multiple = multiple;
+ const newRange = getAnalogousColors(this.originColors, multiple);
+ this.range(this.originColors.concat(newRange));
+ }
  }
+ color = this.scale(cleanedValue);
  }
-
- const color = this.scale(cleanedValue);
  sharedLabelColor.addSlice(cleanedValue, color, sliceId);
 
  return color;

superset-frontend/packages/superset-ui-core/src/color/SharedLabelColorSingleton.ts

@@ -18,113 +18,79 @@
  */
 
 import { CategoricalColorNamespace } from '.';
-import { FeatureFlag, isFeatureEnabled, makeSingleton } from '../utils';
-import { getAnalogousColors } from './utils';
+import { makeSingleton } from '../utils';
 
+export enum SharedLabelColorSource {
+ dashboard,
+ explore,
+}
 export class SharedLabelColor {
- sliceLabelColorMap: Record<number, Record<string, string | undefined>>;
+ sliceLabelMap: Map<number, string[]>;
 
- constructor() {
- // { sliceId1: { label1: color1 }, sliceId2: { label2: color2 } }
- this.sliceLabelColorMap = {};
- }
+ colorMap: Map<string, string>;
 
- getColorMap(
- colorNamespace?: string,
- colorScheme?: string,
- updateColorScheme?: boolean,
- ) {
- if (colorScheme) {
- const categoricalNamespace =
- CategoricalColorNamespace.getNamespace(colorNamespace);
- const sharedLabels = this.getSharedLabels();
- let generatedColors: string[] = [];
- let sharedLabelMap;
+ source: SharedLabelColorSource;
 
- if (sharedLabels.length) {
- const colorScale = categoricalNamespace.getScale(colorScheme);
- const colors = colorScale.range();
- if (isFeatureEnabled(FeatureFlag.USE_ANALAGOUS_COLORS)) {
- const multiple = Math.ceil(sharedLabels.length / colors.length);
- generatedColors = getAnalogousColors(colors, multiple);
- sharedLabelMap = sharedLabels.reduce(
- (res, label, index) => ({
- ...res,
- [label.toString()]: generatedColors[index],
- }),
- {},
- );
- } else {
- // reverse colors to reduce color conflicts
- colorScale.range(colors.reverse());
- sharedLabelMap = sharedLabels.reduce(
- (res, label) => ({
- ...res,
- [label.toString()]: colorScale(label),
- }),
- {},
- );
- }
- }
+ constructor() {
+ // { sliceId1: [label1, label2, ...], sliceId2: [label1, label2, ...] }
+ this.sliceLabelMap = new Map();
+ this.colorMap = new Map();
+ this.source = SharedLabelColorSource.dashboard;
+ }
 
- const labelMap = Object.keys(this.sliceLabelColorMap).reduce(
- (res, sliceId) => {
- // get new color scale instance
- const colorScale = categoricalNamespace.getScale(colorScheme);
- return {
- ...res,
- ...Object.keys(this.sliceLabelColorMap[sliceId]).reduce(
- (res, label) => ({
- ...res,
- [label]: updateColorScheme
- ? colorScale(label)
- : this.sliceLabelColorMap[sliceId][label],
- }),
- {},
- ),
- };
- },
- {},
- );
+ updateColorMap(colorNamespace?: string, colorScheme?: string) {
+ const categoricalNamespace =
+ CategoricalColorNamespace.getNamespace(colorNamespace);
+ const newColorMap = new Map();
+ this.colorMap.clear();
+ this.sliceLabelMap.forEach(labels => {
+ const colorScale = categoricalNamespace.getScale(colorScheme);
+ labels.forEach(label => {
+ const newColor = colorScale(label);
+ newColorMap.set(label, newColor);
+ });
+ });
+ this.colorMap = newColorMap;
+ }
 
- return {
- ...labelMap,
- ...sharedLabelMap,
- };
- }
- return undefined;
+ getColorMap() {
+ return this.colorMap;
  }
 
  addSlice(label: string, color: string, sliceId?: number) {
- if (!sliceId) return;
- this.sliceLabelColorMap[sliceId] = {
- ...this.sliceLabelColorMap[sliceId],
- [label]: color,
- };
+ if (
+ this.source !== SharedLabelColorSource.dashboard ||
+ sliceId === undefined
+ )
+ return;
+ const labels = this.sliceLabelMap.get(sliceId) || [];
+ labels.push(label);
+ this.sliceLabelMap.set(sliceId, labels);
+ this.colorMap.set(label, color);
  }
 
  removeSlice(sliceId: number) {
- delete this.sliceLabelColorMap[sliceId];
+ if (this.source !== SharedLabelColorSource.dashboard) return;
+ this.sliceLabelMap.delete(sliceId);
+ const newColorMap = new Map();
+ this.sliceLabelMap.forEach(labels => {
+ labels.forEach(label => {
+ newColorMap.set(label, this.colorMap.get(label));
+ });
+ });
+ this.colorMap = newColorMap;
  }
 
- clear() {
- this.sliceLabelColorMap = {};
+ reset() {
+ const copyColorMap = new Map(this.colorMap);
+ copyColorMap.forEach((_, label) => {
+ this.colorMap.set(label, '');
+ });
  }
 
- getSharedLabels() {
- const tempLabels = new Set<string>();
- const result = new Set<string>();
- Object.keys(this.sliceLabelColorMap).forEach(sliceId => {
- const colorMap = this.sliceLabelColorMap[sliceId];
- Object.keys(colorMap).forEach(label => {
- if (tempLabels.has(label) && !result.has(label)) {
- result.add(label);
- } else {
- tempLabels.add(label);
- }
- });
- });
- return [...result];
+ clear() {
+ this.sliceLabelMap.clear();
+ this.colorMap.clear();
  }
 }
 

superset-frontend/packages/superset-ui-core/src/color/index.ts

@@ -35,6 +35,7 @@ export * from './utils';
 export {
  default as getSharedLabelColor,
  SharedLabelColor,
+ SharedLabelColorSource,
 } from './SharedLabelColorSingleton';
 
 export const BRAND_COLOR = '#00A699';