feat(color): color consistency enhancements (WIP)

[stephenLYZ]

SUMMARY

In the current world, we have this problem: • SharedLabelColors are calculated when the dashboard loads, but only for the visible tab(s) • SharedLabelColors are only "reserved" if the label is used twice or more in the VISIBLE charts at load time. • This means if a label is used once at load time, and then used by another chart when a hidden tab is loaded, the color will be inconsistent.

Current solution by @rusackas and @geido : • When loading the initial dashboard, make ALL labels use reserved colors... not just those that are used more than once. In other words, assume that ALL colors will be shared/reused. • Then, when you change tabs, any labels that are used the second time (or more) will already be in the SharedLabelColors • When loading/exposing a hidden tab, you might see a new series/label for the first time. These should also be added to SharedLabelColors, in case a third or subsequent tab uses those.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

• [ ] Has associated issue:
• [ ] Required feature flags:
• [ ] Changes UI
• [ ] Includes DB Migration (follow approval process in SIP-59)
  • [ ] Migration is atomic, supports rollback & is backwards-compatible
  • [ ] Confirm DB migration upgrade and downgrade tested
  • [ ] Runtime estimates and downtime expectations provided
• [ ] Introduces new feature or API
• [ ] Removes existing feature or API

[geido]

/testenv up

[github-actions[bot]]

@geido Ephemeral environment spinning up at http://35.85.63.230:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[geido]

@stephenLYZ thanks for this!

• I tested it and I found that when setting up custom label colors, they only work for the first tab now, but not the other one. Have a look at the screenshots. I forced Michael to be yellow in the metadata

• There is a similar problem with removing a custom label color. When you remove it, only the charts that are currently visible in the current tab will get updated. If you switch tab the charts will keep the custom color label as if it wasn't deleted.

[stephenLYZ]

@stephenLYZ thanks for this!

I tested it and I found that when setting up custom label colors, they only work for the first tab now, but not the other one. Have a look at the screenshots. I forced Michael to be yellow in the metadata

Good catch! This is a case that I have missed, I only dealt with the case of changing the color scheme.

[codecov[bot]]

Codecov Report

Merging #21507 (d20665a) into master (8f61e3c) will decrease coverage by 0.01%. The diff coverage is 76.19%.

@@            Coverage Diff             @@
##           master   #21507      +/-   ##
==========================================
- Coverage   66.86%   66.84%   -0.02%     
==========================================
  Files        1803     1805       +2     
  Lines       68996    69052      +56     
  Branches     7349     7369      +20     
==========================================
+ Hits        46132    46158      +26     
- Misses      20971    20996      +25     
- Partials     1893     1898       +5     

Flag	Coverage Δ
hive	52.92% <ø> (-0.01%)	:arrow_down:
javascript	53.19% <76.19%> (-0.01%)	:arrow_down:
mysql	78.24% <ø> (-0.01%)	:arrow_down:
postgres	78.30% <ø> (-0.01%)	:arrow_down:
presto	52.82% <ø> (-0.01%)	:arrow_down:
python	81.45% <ø> (-0.01%)	:arrow_down:
sqlite	76.79% <ø> (-0.01%)	:arrow_down:
unit	51.06% <ø> (+0.01%)	:arrow_up:

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...ntend/packages/superset-ui-core/src/color/index.ts	100.00% <ø> (ø)
...t-frontend/src/dashboard/actions/dashboardState.js	37.09% <ø> (+0.04%)	:arrow_up:
.../src/dashboard/components/gridComponents/Chart.jsx	53.57% <0.00%> (-1.48%)	:arrow_down:
...ashboard/components/gridComponents/ChartHolder.tsx	91.30% <ø> (+2.41%)	:arrow_up:
...nd/src/dashboard/containers/DashboardComponent.jsx	85.00% <ø> (ø)
...ntend/src/dashboard/containers/DashboardHeader.jsx	66.66% <ø> (ø)
...rontend/src/dashboard/containers/DashboardPage.tsx	7.14% <0.00%> (-0.12%)	:arrow_down:
...-frontend/src/dashboard/reducers/dashboardState.js	76.08% <ø> (-0.51%)	:arrow_down:
superset-frontend/src/explore/ExplorePage.tsx	0.00% <0.00%> (ø)
superset/config.py	91.63% <ø> (ø)
... and 25 more

:mega: We’re building smart automated test selection to slash your CI/CD build times. Learn more

[rusackas]

/testenv up

[github-actions[bot]]

@rusackas Ephemeral environment spinning up at http://35.160.87.160:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[geido]

@stephenLYZ as I work on the E2E I report here any issue that I encounter.

I just found an issue with already rendered charts under a hidden tab. If you first visit the tab and let the chart load, then move away to another tab, add a custom label color and go back to the tab with the chart, you will see that the custom label color isn't applied.

https://user-images.githubusercontent.com/60598000/192529879-db758eff-e290-4973-a39e-e4edc9365da2.mp4

Same thing happens with changing the color scheme

https://user-images.githubusercontent.com/60598000/192530373-a55553ce-6289-4887-8947-26de4be503ca.mp4

[geido]

@stephenLYZ the above happens also for main tabs. If you go to tab B, then go to tab A, change scheme, go back to tab B and you will see the color scheme isn't applied.

I also found an even weirder bug where if you change the color scheme from tab B, it picks different colors than if you did change it from tab A.

https://user-images.githubusercontent.com/60598000/192590753-ba7fde60-79c0-4f6d-8500-1934975c711f.mp4

[geido]

@stephenLYZ not sure if this is all about the same issue, but when changing color scheme, it works for a nested tab in the initial dashboard tab, but it is not applied correctly to the second tab. As you can see the label colors for "Anthony" are different

https://user-images.githubusercontent.com/60598000/192785479-c6bd1910-22cc-485e-b536-8ce06b5caa84.mp4

[stephenLYZ]

@geido It looks like I can't reproduce in my local. I actually fixed this issue in the 'Chart.jsx' file:

https://user-images.githubusercontent.com/11830681/193212693-da333241-40a3-412a-85b9-db9f686532e1.mov

[geido]

@geido It looks like I can't reproduce in my local. I actually fixed this issue in the 'Chart.jsx' file:

2022-09-30.3.11.25.mov

@stephenLYZ I can reproduce this pretty consistently with the "Tabbed Dashboard" that is available as a sample dashboard in the E2E testing env. I suggest that you try your changes using my E2E tests PR https://github.com/apache/superset/pull/21622 where the above issues should be apparent immediately.

[geido]

Adding @jinghua-qa for an upmost confirmation from QA. Let's hold for her feedback before merging

[jinghua-qa]

/testenv up

[github-actions[bot]]

@jinghua-qa Ephemeral environment spinning up at http://54.200.28.129:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[jinghua-qa]

I found an issue that if a series in different charts in the same dashboard, then it is not consistent for the color on that series here how i reproduce this issue: step 1: Run this sql query and create dataset: SELECT * FROM (SELECT 'a' as color, 1 as val UNION SELECT 'b', 1 UNION SELECT 'c', 1 UNION SELECT 'd', 1 UNION SELECT 'e', 1 UNION SELECT 'f', 1 UNION SELECT 'g', 1 UNION SELECT 'h', 1 UNION SELECT 'i', 1 UNION SELECT 'j', 1 UNION SELECT 'k', 1 UNION SELECT 'l', 1 UNION SELECT 'm', 1 UNION SELECT 'n', 1 UNION SELECT 'o', 1 UNION SELECT 'p', 1 UNION SELECT 'q', 1 UNION SELECT 'r', 1 UNION SELECT 's', 1 UNION SELECT 't', 1 UNION SELECT 'u', 1 UNION SELECT 'v', 1 UNION SELECT 'w', 1 UNION SELECT 'x', 1 UNION SELECT 'y', 1 UNION SELECT 'z', 1 ) as _view ORDER BY COLOR step2: create 3 charts using the same dataset: chart 1: metrics: count(), dimension: color chart 2:metrics: count(), dimension: color, filter: color in a, b, c chart 3:metrics: count(*), dimension: color, filter: color in d, e, f add 3 charts to same dashboard step 3: create native filter for color name, then apply filter with color name a, e

Expect: chart 1: a, e show different color chart 2, a show same color with chart 1, series a chart 3, e show same color with chart 1 series ec

Actual: chart 2 series a show same color as series e

[stephenLYZ]

@jinghua-qa Thanks for reporting this issue. This is a bug once we enter the dashboard from explore. I have fixed it and maybe we can add some e2e tests for the native filter scene in the future. cc @geido

[stephenLYZ]

/testenv up

[github-actions[bot]]

@stephenLYZ Ephemeral environment spinning up at http://35.89.74.57:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[stephenLYZ]

@geido The problem may have existed before. I will fix this in this PR.

[stephenLYZ]

/testenv up

[github-actions[bot]]

@stephenLYZ Ephemeral environment spinning up at http://52.36.247.190:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[github-actions[bot]]

Ephemeral environment shutdown and build artifacts deleted.