feat(explore): Upgraded viz select gallery

[suddjian]

SUMMARY

• Organizes plugins by category
• Displays chart descriptions and examples
• Adds fuzzy search by name, tags, or description
• Improves Add Chart page layout
• Upgrades superset-ui version to populate lots of new plugin metadata
• Improves the plugin context to provide metadata (along with updates to metadata i.e. dynamic plugins)
• Fixes Dynamic plugin not showing up in VizTypeControl #15174
• ✨ grid ✨

This feature branch had several PRs merged into it that were independently reviewed. Approving this should be pretty much a rubber stamp.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:

Initial Design:

After:

TESTING INSTRUCTIONS

1. Create chart -> choose a viz type
2. From explore, change viz type

ADDITIONAL INFORMATION

• Has associated issue:
• 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

[codecov]

Codecov Report

Merging #15303 (56dca6d) into master (2ebba51) will decrease coverage by 0.00%.
The diff coverage is 87.90%.

@@            Coverage Diff             @@
##           master   #15303      +/-   ##
==========================================
- Coverage   76.95%   76.94%   -0.01%     
==========================================
  Files         976      977       +1     
  Lines       51326    51852     +526     
  Branches     6912     7132     +220     
==========================================
+ Hits        39498    39899     +401     
- Misses      11607    11726     +119     
- Partials      221      227       +6     

Flag	Coverage Δ
hive	81.29% <ø> (ø)
javascript	71.48% <87.90%> (+0.07%)	⬆️
mysql	81.56% <ø> (ø)
postgres	81.58% <ø> (ø)
presto	81.28% <ø> (-0.01%)	⬇️
python	82.10% <ø> (-0.01%)	⬇️
sqlite	81.19% <ø> (ø)

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

Impacted Files	Coverage Δ
...nd/src/explore/components/ExploreViewContainer.jsx	2.15% <0.00%> (ø)
...c/visualizations/TimeTable/TimeTableChartPlugin.js	75.00% <ø> (ø)
...t-frontend/src/components/DynamicPlugins/index.tsx	37.28% <63.15%> (+18.13%)	⬆️
...plore/components/controls/VizTypeControl/index.tsx	86.04% <86.04%> (ø)
...perset-frontend/src/addSlice/AddSliceContainer.tsx	82.05% <90.00%> (+3.26%)	⬆️
...ponents/controls/VizTypeControl/VizTypeGallery.tsx	93.57% <93.57%> (ø)
superset-frontend/src/filters/components/common.ts	90.00% <0.00%> (-10.00%)	⬇️
...d/src/filters/components/Time/TimeFilterPlugin.tsx	88.88% <0.00%> (-3.42%)	⬇️
...onfigModal/FiltersConfigForm/FiltersConfigForm.tsx	72.23% <0.00%> (-1.42%)	⬇️
superset/db_engine_specs/presto.py	89.89% <0.00%> (-0.43%)	⬇️
... and 14 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 2ebba51...56dca6d. Read the comment docs.

[suddjian]

/testenv up

[github-actions]

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

[geido]

First of all, this is looking great! Congrats

I wanted to do some manual testing out of curiosity and came up with the following feedback.

Selected viz type

When changing a viz type, the modal shows the correct title and description at the bottom. However, the selection of the category is incorrect and it is not showing the currently selected type.

Inconsistent search behaviour

When clicking on the search input, the category is automatically reset to the default. However, when clearing up the search the previously selected category gets selected back again. I think the behaviour should be consistent and clearing up should bring you to the default, not the previously selected category.

Default order

Do we have a default order when searching? Should it be alphabetical?

Unnecessary scroll bar

Just a minor thing. The scroll bar for the categories is showing up even though there are no other categories.

[rusackas]

/testenv up

[github-actions]

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

[EBoisseauSierra]

Thank you for your brilliant work, it looks amazing! 🚀

Here are a some very minor details I've picked along the way:

Empty selection by default

When creating a new graph, the first chart type (here, Table) is selected by default (cf. lower half of the dialog). It would feel more natural (to me) that no chart is selected by default.

Selection not cleared when changing category

In the same spirit, I'd like to be able to “clear” the selected visualization when changing category. Currently, the last selection “sticks” in the lower half of the dialog, even if that chart type isn't part of the currently selected Category (upper half). This can cause some confusion as I can have both “BigNumber” (selected chart type) and “Correlation” (selected category) at the same time…

Charts categorization

I fully understand this is not a trivial task and that no solution might satisfy everyone. Here are just some of the chart categorisation that appeared unnatural to me:

• Move deck.gl to Map: deck.gl charts are currently in Others. This seems intentional, yet it would feel more natural to me to find them in the Map category.
• Move funnel to Flow: The funnel chart is currently listed in KPI, yet I understand that KPI charts should be more one single value, rather than the evolution of one value over a process/some given steps. In absolute terms “Evolution” would be a natural category as well, yet I understand that Funnel would contrast with the more TS-related chart that are currently in this category.
• Horizon to Evolution?: Horizon is a tricky one, but because its abscissa is time, I'd put it in “Evolution”.
• Ranking:
  • I see why WordCloud is there, but if I were to look for it, I wouldn't think it could be in the Ranking category (rather “Other”).
  • Nightingale would, for me, better fit in “Part of a whole” (if I understand that chart correctly) — or distribution.

I appreciate the ranking is coherent with D3's one (and I even voted in favour of that ranking in SIP-67)… but the categorization still feels a bit unnatural to me (i.e. if I were to look for a given chart, I'm not sure I would find it first time/I wouldn't struggle finding it — btw, the search bar is a must have, thanks!).

Browse through all charts at a glance

I am aware this defeats a large part of your work with the categorization, but something I like with D3's gallery is that I can have all chart types at a glance by scrolling through one single page. Here, when one clicks on a category, it filters out all the other charts.
Perhaps a presentation similar to Echarts gallery — where all charts are in one page, with categories as section headings and the list of categories on the left column allowing to “jump” to the right anchor (yet without “filtering out” any chart) — could help?

Add “deprecated” label

Some charts are due to be deprecated. This is detailed in their description, yet I feel this doesn't stand out enough. A grey “deprecated” tag (similar to tags in GitHub issues/PR) could help notice it more.
Introducing such tags could also serve in the future to identify “official” chart types from those developed by 3rd parties.

Chart examples thumbnails scrollbar

On Firefox DevEd 90.0b12 (64-bit), with ×150% zoom, some “non-scrollable scrollbars” appear around the chart example thumbnails area. In general, I would expect the thumbnails to be more flexible in their sizing (as it's not such an issue if they are downscaled, unlike the description text), so that they adapt to their container instead of forcing it to display scrollbars.

Related to this, the chart description and thumbnail area are 2 separate components, with independent scrollbars. It would feel more natural to me to consider both elements as one unique “scrollable” entity. (I.e. have only one scrollbar on the far right, even if it's the text that overflows.)

This would mean that “Example” become a sub-heading of the chart type (here “Heatmap”) — one could either introduce the “Description” subheading as well for the left column, or get rid of the “Example” one?

---

All this being said, it's already such a huge step forward I'm very much looking forward to using in prod; thanks a lot!

[suddjian]

Thank you both very much for the well-written feedback, paging @junlincc to get product eyes on this.

Some notes:

• The edge case of non-scrollable scrollbars is pretty unavoidable in a grid-based design like this. At some point before things disappear off the edge of the container, the scrollbar has to appear. I don't think it would be worth the unsavory css margin hacks required to tweak when that occurs. A more responsive design could reduce the impact of this, maybe that would be a good follow-up.
• The examples list in its current form is a temporary solution. Ultimately, we'd like to use a carousel or other solution. AntD has these components, but we will need to bump the version to get it working correctly.
• I think a de-selected state makes sense. I've opened a PR to add that: feat(viz): Clear viz gallery when navigating between categories #15577

[rusackas]

/testenv up

[github-actions]

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

[rusackas]

There are a lot of good ideas for iteration/improvement on the thread, but to my eyes, this thing looks like a huge improvement, and looks ready to merge!

Not for interested parties, that additional PRs in superset-ui to add metadata to the rest of the plugins, are underway right now

[rusackas]

Not for this PR, but I'll bet there are at least a few other places in Superset it would be awesome to apply this.

[rusackas]

I'm not sure how much value this DEFAULT_ORDER has anymore, but that discussion shouldn't block this PR.

[rusackas]

Nit, but this might warrant a comment to explain it's using this Fuse component for fuzzy-search here, to save folks a googling.

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.