feat(explore): Implement viz switcher redesign #20248

kgabryje · 2022-06-02T17:32:20Z

SUMMARY

This PR implements the redesign of viz switcher. Now user can quickly change viz type to 1 of 6 featured charts without opening the viz gallery modal.
Active chart is represented by an icon and chart name. If chart's name is truncated, then tooltip appears on hover.
The rest of the featured charts are represented only by a clickable icon. Chart's name appears in a tooltip on hover. Clicking the icon switches the viz type.
User can open the viz gallery modal by clicking "View all charts". When user selects a chart that is not "featured", it's represented by a magnifying glass icon and chart's name. It's placed first on the quick viz switcher list.
When a non-featured chart is currently rendered, it's displayed at the start of the list.
Currently rendered chart has a tooltip "Currently rendered: "

Featured charts are:

Echarts Line Chart
Table
Big Number
Pie Chart
Echarts Bar Chart
Echarts Area Chart

Side note - this feature will work even better when Yongjie's standardized form data PR is merged 🙂

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Screen.Recording.2022-06-07.at.13.19.46.mov

TESTING INSTRUCTIONS

Open explore with 1 of the featured charts
Verify that there are 6 icons in viz switcher, the active viz is highlighted and its name is visible
Click on any other icon, verify that the control panel now displays controls of currently active chart. Click Update Chart and verify that everything works as expected
Click "View all charts", change to a non-featured chart
Verify that now there are 7 items in viz switcher list and active non-featured chart is 1st on the list. Repeat step 3.

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

CC @kasiazjc

kgabryje · 2022-06-02T18:11:37Z

/testenv up

github-actions · 2022-06-02T18:13:51Z

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

codecov · 2022-06-02T18:27:35Z

Codecov Report

Merging #20248 (f2ce49e) into master (2a45be3) will decrease coverage by 0.02%.
The diff coverage is 87.03%.

@@            Coverage Diff             @@
##           master   #20248      +/-   ##
==========================================
- Coverage   66.65%   66.62%   -0.03%     
==========================================
  Files        1729     1734       +5     
  Lines       64910    64997      +87     
  Branches     6842     6871      +29     
==========================================
+ Hits        43267    43306      +39     
- Misses      19894    19933      +39     
- Partials     1749     1758       +9

Flag	Coverage Δ
javascript	`51.56% <87.03%> (-0.02%)`	⬇️

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

Impacted Files	Coverage Δ
superset-frontend/src/components/Icons/index.tsx	`100.00% <ø> (ø)`
.../src/explore/components/ControlPanelsContainer.tsx	`79.80% <ø> (ø)`
...et-frontend/src/explore/controlPanels/sections.tsx	`100.00% <ø> (ø)`
...plore/components/controls/VizTypeControl/index.tsx	`73.07% <66.66%> (-6.93%)`	⬇️
...onents/controls/VizTypeControl/FastVizSwitcher.tsx	`89.58% <89.58%> (ø)`
...d/src/SqlLab/components/SaveDatasetModal/index.tsx	`34.66% <0.00%> (-36.77%)`	⬇️
...erset-ui-chart-controls/src/utils/columnChoices.ts	`80.00% <0.00%> (-20.00%)`	⬇️
...n-chart-handlebars/src/plugin/controls/orderBy.tsx	`40.00% <0.00%> (-10.00%)`	⬇️
...chart-controls/src/shared-controls/dndControls.tsx	`26.92% <0.00%> (-8.98%)`	⬇️
...nd/plugins/plugin-chart-table/src/controlPanel.tsx	`43.47% <0.00%> (-7.27%)`	⬇️
... and 23 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 2a45be3...f2ce49e. Read the comment docs.

kgabryje · 2022-06-03T13:11:40Z

/testenv up

github-actions · 2022-06-03T13:16:26Z

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

kasiazjc · 2022-06-03T14:23:49Z

Looks good to me!

One thing about the charts: we chose time-series (line, bar) as they will be becoming the default after the generic x-axis will be introduced for everyone. They have also similar statistics in terms of how much they are used (time series vs not).

Question: do we want to leave time-series charts, go back to simple line/bar OR add a logic which for example shows time-series ones if you have feature flag enabled and for others it shows basic line/bar? All of those are in Tier 1, so I think we need a product decision here. Thoughts @rusackas @lauderbaugh?

jinghua-qa · 2022-06-03T19:42:34Z

I like the new feature, the only thing is when i open a non-feature chart, then select the viz switcher, my old chart viz will be gone and i need to go to "View all charts" to get my old chart viz back but then i have redo everything for my old chart. Can we have a better flow for undo selecting the viz switcher?

viz.switcher.mov

zhaoyongjie · 2022-06-07T09:57:36Z

/testenv up

github-actions · 2022-06-07T10:18:06Z

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

kgabryje · 2022-06-07T11:25:38Z

I like the new feature, the only thing is when i open a non-feature chart, then select the viz switcher, my old chart viz will be gone and i need to go to "View all charts" to get my old chart viz back but then i have redo everything for my old chart. Can we have a better flow for undo selecting the viz switcher?

Thanks for testing Jinghua! Now the currently rendered chart's icon stays visible at the start of the list when you switch between charts.
As for preventing the loss of control values when user switches chart, that's a part of Standardized Form Data project, implemented by @zhaoyongjie. Currently only a few charts support the feature of not losing data when viz type changes, but in the following weeks we'll implement it in most charts

kgabryje · 2022-06-07T13:26:53Z

/testenv up

github-actions · 2022-06-07T15:00:43Z

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

zhaoyongjie

Looks cool! I love this feature.

zhaoyongjie · 2022-06-08T09:05:22Z

superset-frontend/src/explore/components/controls/VizTypeControl/FastVizSwitcher.tsx

+import { Tooltip } from 'src/components/Tooltip';
+import Icons from 'src/components/Icons';
+import { useSelector } from 'react-redux';
+import { ExplorePageState } from '../../../reducers/getInitialState';


nit:

import { ExplorePageState } from 'src/explore/reducers/getInitialState';

Oops! I wish auto-import would use those absolute paths by default...

lauderbaugh · 2022-06-09T17:25:49Z

Looks good to me!

One thing about the charts: we chose time-series (line, bar) as they will be becoming the default after the generic x-axis will be introduced for everyone. They have also similar statistics in terms of how much they are used (time series vs not).

Question: do we want to leave time-series charts, go back to simple line/bar OR add a logic which for example shows time-series ones if you have feature flag enabled and for others it shows basic line/bar? All of those are in Tier 1, so I think we need a product decision here. Thoughts @rusackas @lauderbaugh?

github-actions · 2022-06-14T13:24:05Z

Ephemeral environment shutdown and build artifacts deleted.

kgabryje added the need:qa-review Requires QA review label Jun 2, 2022

kgabryje requested review from zhaoyongjie, geido, michael-s-molina and jinghua-qa June 2, 2022 17:32

superset-github-bot bot added the preset-io label Jun 2, 2022

pull-request-size bot added the size/XL label Jun 2, 2022

kgabryje added 10 commits June 7, 2022 11:50

add icons

45a8c6b

Implement fast viz switcher component

cc61ced

Remove unnecessary keys from ControlsPanelContainer

7fc6ffc

Rename icons

1d64e20

Add unit tests

1b202f8

Add licenses

ca7b754

Fix test

f71f53c

Change BigNumberWithTrendline to BigNumber

8138616

fix test

a055f2a

fix test

ad3d4e4

kgabryje force-pushed the feat/viz-switcher branch from d3c0f23 to 4ea9ace Compare June 7, 2022 10:51

kgabryje added 2 commits June 7, 2022 12:52

Add currently rendered viz tile

9c94297

Move View all charts to the right side

c8bb67b

kgabryje force-pushed the feat/viz-switcher branch from 4ea9ace to c8bb67b Compare June 7, 2022 11:17

Add license

29c692d

zhaoyongjie approved these changes Jun 8, 2022

View reviewed changes

kgabryje added 2 commits June 8, 2022 14:08

Fix imports

8adc8be

Fix e2e test

f2ce49e

kgabryje merged commit 86f146e into apache:master Jun 14, 2022

mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 2.0.0 labels Mar 13, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(explore): Implement viz switcher redesign #20248

feat(explore): Implement viz switcher redesign #20248

kgabryje commented Jun 2, 2022 •

edited

Loading

kgabryje commented Jun 2, 2022

github-actions bot commented Jun 2, 2022

codecov bot commented Jun 2, 2022 •

edited

Loading

kgabryje commented Jun 3, 2022

github-actions bot commented Jun 3, 2022

kasiazjc commented Jun 3, 2022 •

edited

Loading

jinghua-qa commented Jun 3, 2022

zhaoyongjie commented Jun 7, 2022

github-actions bot commented Jun 7, 2022

kgabryje commented Jun 7, 2022

kgabryje commented Jun 7, 2022

github-actions bot commented Jun 7, 2022

zhaoyongjie left a comment

zhaoyongjie Jun 8, 2022

kgabryje Jun 8, 2022

lauderbaugh commented Jun 9, 2022

github-actions bot commented Jun 14, 2022

feat(explore): Implement viz switcher redesign #20248

feat(explore): Implement viz switcher redesign #20248

Conversation

kgabryje commented Jun 2, 2022 • edited Loading

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

kgabryje commented Jun 2, 2022

github-actions bot commented Jun 2, 2022

codecov bot commented Jun 2, 2022 • edited Loading

Codecov Report

kgabryje commented Jun 3, 2022

github-actions bot commented Jun 3, 2022

kasiazjc commented Jun 3, 2022 • edited Loading

jinghua-qa commented Jun 3, 2022

zhaoyongjie commented Jun 7, 2022

github-actions bot commented Jun 7, 2022

kgabryje commented Jun 7, 2022

kgabryje commented Jun 7, 2022

github-actions bot commented Jun 7, 2022

zhaoyongjie left a comment

Choose a reason for hiding this comment

zhaoyongjie Jun 8, 2022

Choose a reason for hiding this comment

kgabryje Jun 8, 2022

Choose a reason for hiding this comment

lauderbaugh commented Jun 9, 2022

github-actions bot commented Jun 14, 2022

kgabryje commented Jun 2, 2022 •

edited

Loading

codecov bot commented Jun 2, 2022 •

edited

Loading

kasiazjc commented Jun 3, 2022 •

edited

Loading