chore: Add tags to the new viz gallery #15734

zhaoyongjie · 2021-07-16T09:10:07Z

SUMMARY

Added tags list in the chart description
tags-selection to the Gallery
The default tag value populate to Highly-used in the viz gallery
rename Popular and Popularity to Highly-used for charts

closes: #15720

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

After

TESTING INSTRUCTIONS

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 · 2021-07-16T11:04:25Z

Codecov Report

Merging #15734 (c89eeb5) into master (069d5cb) will increase coverage by 0.00%.
The diff coverage is 78.94%.

@@           Coverage Diff           @@
##           master   #15734   +/-   ##
=======================================
  Coverage   76.69%   76.70%           
=======================================
  Files         983      983           
  Lines       51609    51641   +32     
  Branches     6988     6996    +8     
=======================================
+ Hits        39580    39609   +29     
- Misses      11806    11808    +2     
- Partials      223      224    +1

Flag	Coverage Δ
javascript	`71.39% <78.94%> (+0.02%)`	⬆️

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

Impacted Files	Coverage Δ
...ponents/controls/VizTypeControl/VizTypeGallery.tsx	`94.26% <78.94%> (+0.69%)`	⬆️
...d/src/explore/components/DatasourcePanel/index.tsx	`80.72% <0.00%> (-0.62%)`	⬇️
...ponents/controls/DndColumnSelectControl/Option.tsx	`100.00% <0.00%> (ø)`
...ontrols/DndColumnSelectControl/DndColumnSelect.tsx	`64.58% <0.00%> (+0.13%)`	⬆️
.../controls/DndColumnSelectControl/OptionWrapper.tsx	`85.29% <0.00%> (+0.44%)`	⬆️

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 069d5cb...c89eeb5. Read the comment docs.

geido · 2021-07-16T11:46:16Z

/testenv up

github-actions · 2021-07-16T11:48:02Z

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

geido · 2021-07-16T12:05:21Z

Hey @zhaoyongjie. Thanks for the PR.

I think we should not set Popular as default. When opening the modal with an existing viz type, only the footer is showing the right type information now. I would expect to see the selected viz type and related category as well.

zhaoyongjie · 2021-07-16T12:25:25Z

Hey @zhaoyongjie. Thanks for the PR.

I think we should not set Popular as default. When opening the modal with an existing viz type, only the footer is showing the right type information now. I would expect to see the selected viz type and related category as well.

Hi, @geido. This behavior is by product design. please check here https://github.com/apache/superset/projects/30
I also wonder, why there is a chart here without the popular tag.

If this change is approved by @junlincc. I will continue to tweak the search logic.

geido · 2021-07-16T12:39:14Z

It is very confusing to be honest. You see the information of the selected viz type at the bottom, a search value that you didn't search for and some viz types but not the actual one that was selected.

This is the second time that I end up thinking this is a bug.

CC @junlincc

stephenLYZ

@zhaoyongjie leave some CSS suggestions to make tags look better

stephenLYZ · 2021-07-16T13:51:14Z

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

+  grid-area: viz-tags;
+  width: ${({ theme }) => theme.gridUnit * 120}px;
+  padding-right: ${({ theme }) => theme.gridUnit * 14}px;
+`;


Add: padding-bottom: ${({ theme }) => theme.gridUnit * 2}px;

stephenLYZ · 2021-07-16T13:51:29Z

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

@@ -206,6 +209,7 @@ const DetailsPopulated = (theme: SupersetTheme) => css`
  grid-template-rows: auto 1fr;


Modified: grid-template-rows: auto auto 1fr;

stephenLYZ · 2021-07-16T14:02:23Z

Maybe I think popular only needs to be set to default if you are creating a chart instead of opening a chart.

zhaoyongjie · 2021-07-16T17:51:24Z

Hi @stephenLYZ, @geido, and @suddjian, I have updated the tags filter. please review again

ktmud · 2021-07-16T18:09:07Z

An unrelated design question, does anyone else find the position of the search input weird? It looks like a search for the viz category list, not the viz types.

In the original design (#14474), it is a fullwidth search bar at the top, which makes much more sense visually.

junlincc · 2021-07-16T20:42:14Z

depends on the entry point, @ktmud

Screen.Recording.2021-07-16.at.1.41.25.PM.mov

junlincc · 2021-07-16T20:47:31Z

Order for searchable/clickable tags in Gallery

Change “Popular” to “Highly-used”
Highly-used, ECharts, Geo, Advanced-Analytics, Report, Experimental, Tabular, Relational, Proportional, Progressive, Sequential, Circular, Predictive, Statistical, Transformable, Description, Comparison, Popularity, Distribution, Aesthetic, 2D, 3D
Keep all tags in one row, click or scroll to view more

Please also make sure the clickable tags are in the gallery modal from the main entry point, which is from the "+" icon

suddjian · 2021-07-16T20:58:57Z

/testenv up

suddjian · 2021-07-16T21:02:41Z

@ktmud I somewhat agree on the search bar, I'll take a look at tweaking that in a separate branch.

github-actions · 2021-07-16T21:03:21Z

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

suddjian · 2021-07-16T21:18:03Z

@junlincc I think if we have too many clickable top-level tags there will be confusion between tags and categories. It seems they are kind of becoming the same thing. We should discuss what the actual user stories are here to make sure we arrive at a design that addresses them effectively. Perhaps it would be better to do away with "categories", and just have tags instead.

Separate note: It might help to make the tags for individual charts clickable as well.

xiezhongfu · 2021-07-17T08:24:16Z

Perhaps it's worth making viztype-selector list have the ability to scroll.
When Search-Input value is Popular, hope the Popular tag in the RightPane is selected.

rusackas · 2021-07-18T07:52:02Z

An unrelated design question, does anyone else find the position of the search input weird? It looks like a search for the viz category list, not the viz types.

Not to me, really... it's easy to point at other successful UIs that do this, e.g. the Mac App Store:

or other apps (Spotify, Notion, in this case) that at least put the affordance in that area.

ktmud · 2021-07-19T06:49:40Z

An unrelated design question, does anyone else find the position of the search input weird? It looks like a search for the viz category list, not the viz types.

Not to me, really... it's easy to point at other successful UIs that do this, e.g. the Mac App Store:

or other apps (Spotify, Notion, in this case) that at least put the affordance in that area.

Except these examples do not evoke reminiscence of a regular autocomplete combobox. It's not just about the layout, but also the visual feels.

Maybe it'd solve my OCD if there are less categories and they all have icons (so they look more like tabs instead of menu items under a searchbox).

junlincc · 2021-07-19T17:28:07Z

@ktmud @suddjian @rusackas all UI/UX comments are accepted, thank you for your suggestion!

Based on your input, below mockup will be implemented in next iteration.

To relocate the search bar to main section
Search to take up the entire row
Stack tags above category list, only display 3-4 tags in the list
Click to expand and show all tags as an option

Many thanks to a freelance product designer for contributing this design❣️

cc @kgabryje

kgabryje

The code looks good to me! Let's merge and improve the design in the next iteration 👍

github-actions · 2021-07-20T10:03:30Z

Ephemeral environment shutdown and build artifacts deleted.

kgabryje · 2021-07-20T12:09:55Z

Many thanks to a freelance product designer for contributing this design❣️

Special thanks and credit goes to @kicaak 🎉 ❤️

zhaoyongjie · 2021-07-20T12:19:52Z

This design is awesome! thanks, @kicaak.

kasiazjc · 2021-07-20T12:25:27Z

Thanks! 💓 Here you can find figma file with the design. You can find general requirements and some things to consider here, check out the comments I added too (the design is not perfect as I wasn't sure about the spacings, design rules etc., it's more of an initial guide that you can build on).
cc: @junlincc

stephenLYZ · 2021-07-20T12:47:04Z

@kicaak Thanks for providing the design file, it will be helpful for the next iteration.😆

stephenLYZ · 2021-07-20T14:24:50Z

Click to expand and show all tags as an option

@kicaak btw, as @junlincc said the fourth point, I'm not sure if there is an "all tags" button to collapse and expand all tags.

junlincc · 2021-07-21T19:05:25Z

@stephenLYZ we do have a "all tags and categories" to expand. but in this case, it should be "all tags" only

@kicaak i think we will need an icon or something,,, to collapse the long tag list as well. do you mind providing it?

* chore: add tags to gallery * fix UT * fix lint * redesign tags filter * chore: change to Highly-used and fix some css * fix UT Co-authored-by: stephenLYZ <750188453@qq.com>

#15856) * style: Rough draft of email report modal (#15666) * clears errors when closing out of modal (#15623) * add test + fix types * fix lint errors * Building ReportModal component * Continued ReportModal creation * Visual details updated * CronError style * Very basic testing added Co-authored-by: AAfghahi <48933336+AAfghahi@users.noreply.github.com> * feat: toggle the ReportModal Icon based on user permissions (#15780) * style: Rough draft of email report modal (#15666) * clears errors when closing out of modal (#15623) * fix: avoid fetching favorite status for anonymous user (#15590) * avoid fetching favorite status for anonymous user * add test + fix types * fix lint errors * Building ReportModal component * Continued ReportModal creation * Visual details updated * CronError style * Very basic testing added Co-authored-by: AAfghahi <48933336+AAfghahi@users.noreply.github.com> Co-authored-by: aspedrosa <aspedrosa@ua.pt> * first draft * added testing props * cleaned up rebase * changed name and type Co-authored-by: Lyndsi Kay Williams <55605634+lyndsiWilliams@users.noreply.github.com> Co-authored-by: aspedrosa <aspedrosa@ua.pt> * feat: Begin incorporation of email report modal to Charts (#15793) * Add email report modal to Charts * Fix px themes * feat: fetch UI specific reports (#15785) * style: Rough draft of email report modal (#15666) * clears errors when closing out of modal (#15623) * fix: avoid fetching favorite status for anonymous user (#15590) * avoid fetching favorite status for anonymous user * add test + fix types * fix lint errors * Building ReportModal component * Continued ReportModal creation * Visual details updated * CronError style * Very basic testing added Co-authored-by: AAfghahi <48933336+AAfghahi@users.noreply.github.com> Co-authored-by: aspedrosa <aspedrosa@ua.pt> * first draft * created Api call * added click logic * made the fetch report into a action/reducer * abstracted report action * revision * added reportState to reducer * reports conditions * revisions * revisions Co-authored-by: Lyndsi Kay Williams <55605634+lyndsiWilliams@users.noreply.github.com> Co-authored-by: aspedrosa <aspedrosa@ua.pt> * fix: Edit physical dataset from the Edit Dataset modal (#15770) * Remove unnecessary onChange * Remove confliciting onChange * Revert unnecessary change * Enhance and fix tests * feat: add show columns to Reports model (#15712) * added logic for creation_method * revisions * added index * Update superset/migrations/versions/3317e9248280_add_creation_method_to_reports_model.py * filters * search columns updated * fix: margin right on warning icon to 8px (#15715) * changed margin right on warning icon to 8px * fixed to grid units from pixels * feat: adding Progress Bar to Benchmark script (#15719) * rough draft of benchmark script * revisions * revisions * rough draft of benchmark script * revisions * Update requirements/development.in Co-authored-by: Beto Dealmeida <roberto@dealmeida.net> * Update superset/utils/mock_data.py Co-authored-by: Beto Dealmeida <roberto@dealmeida.net> * more revisions Co-authored-by: Beto Dealmeida <roberto@dealmeida.net> * fix: migration downgrade references wrong column (#15791) * fix(dashboard): Add resize handles to right and bottom of component (#15778) * fix(dashboard): Add resize handles to right and bottom of component * Fix test * chore: Add tags to the new viz gallery (#15734) * chore: add tags to gallery * fix UT * fix lint * redesign tags filter * chore: change to Highly-used and fix some css * fix UT Co-authored-by: stephenLYZ <750188453@qq.com> * chore: bump 0.17.70 (#15795) * docs: Adding Sunbird to users list (#15794) * chore: Improves the Select component UI/UX - iteration 4 (#15480) * Add z-index only on maximize (#15800) * chore: remove `retry` dependency in favor of `backoff` (#15788) * chore: remove retry dep in favor of backoff * Fix lint * fix: create fk model in benchmark script (#15804) * style: Rough draft of email report modal (#15666) * clears errors when closing out of modal (#15623) * fix: avoid fetching favorite status for anonymous user (#15590) * avoid fetching favorite status for anonymous user * add test + fix types * fix lint errors * Building ReportModal component * Continued ReportModal creation * Visual details updated * CronError style * Very basic testing added Co-authored-by: AAfghahi <48933336+AAfghahi@users.noreply.github.com> Co-authored-by: aspedrosa <aspedrosa@ua.pt> * Working on onSave functionality * style: Rough draft of email report modal (#15666) * clears errors when closing out of modal (#15623) * add test + fix types * fix lint errors * Building ReportModal component * Continued ReportModal creation * Visual details updated * CronError style * Very basic testing added Co-authored-by: AAfghahi <48933336+AAfghahi@users.noreply.github.com> * feat: toggle the ReportModal Icon based on user permissions (#15780) * style: Rough draft of email report modal (#15666) * clears errors when closing out of modal (#15623) * fix: avoid fetching favorite status for anonymous user (#15590) * avoid fetching favorite status for anonymous user * add test + fix types * fix lint errors * Building ReportModal component * Continued ReportModal creation * Visual details updated * CronError style * Very basic testing added Co-authored-by: AAfghahi <48933336+AAfghahi@users.noreply.github.com> Co-authored-by: aspedrosa <aspedrosa@ua.pt> * first draft * added testing props * cleaned up rebase * changed name and type Co-authored-by: Lyndsi Kay Williams <55605634+lyndsiWilliams@users.noreply.github.com> Co-authored-by: aspedrosa <aspedrosa@ua.pt> * feat: fetch UI specific reports (#15785) * style: Rough draft of email report modal (#15666) * clears errors when closing out of modal (#15623) * fix: avoid fetching favorite status for anonymous user (#15590) * avoid fetching favorite status for anonymous user * add test + fix types * fix lint errors * Building ReportModal component * Continued ReportModal creation * Visual details updated * CronError style * Very basic testing added Co-authored-by: AAfghahi <48933336+AAfghahi@users.noreply.github.com> Co-authored-by: aspedrosa <aspedrosa@ua.pt> * first draft * created Api call * added click logic * made the fetch report into a action/reducer * abstracted report action * revision * added reportState to reducer * reports conditions * revisions * revisions Co-authored-by: Lyndsi Kay Williams <55605634+lyndsiWilliams@users.noreply.github.com> Co-authored-by: aspedrosa <aspedrosa@ua.pt> * Dashboard onSave progress * More onSave/create progress * Dashboard POST working! * Dashboard POST relocated to redux * POST now also working in Charts * making linter happy * linter again Co-authored-by: AAfghahi <48933336+AAfghahi@users.noreply.github.com> Co-authored-by: aspedrosa <aspedrosa@ua.pt> Co-authored-by: Geido <60598000+geido@users.noreply.github.com> Co-authored-by: stellalc7 <stellalc7@gmail.com> Co-authored-by: Beto Dealmeida <roberto@dealmeida.net> Co-authored-by: Kamil Gabryjelski <kamil.gabryjelski@gmail.com> Co-authored-by: Yongjie Zhao <yongjie.zhao@gmail.com> Co-authored-by: stephenLYZ <750188453@qq.com> Co-authored-by: Kumar <kumarks1122@gmail.com> Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

* chore: add tags to gallery * fix UT * fix lint * redesign tags filter * chore: change to Highly-used and fix some css * fix UT Co-authored-by: stephenLYZ <750188453@qq.com>

zhaoyongjie requested review from rusackas, suddjian and junlincc July 16, 2021 09:10

stephenLYZ reviewed Jul 16, 2021

View reviewed changes

zhaoyongjie changed the title ~~chore: Add tags to gallery(iteration 1)~~ chore: Add tags to the new viz gallery(iteration 1) Jul 16, 2021

junlincc added the viz:gallery label Jul 16, 2021

rusackas mentioned this pull request Jul 18, 2021

chore: change popular to Highly-used apache-superset/superset-ui#1227

Merged

zhaoyongjie and others added 6 commits July 19, 2021 02:01

chore: add tags to gallery

5146acf

fix UT

fcd4d10

fix lint

f42ba60

redesign tags filter

dcc4cd6

chore: change to Highly-used and fix some css

36f5bbf

fix UT

c89eeb5

zhaoyongjie force-pushed the add_tags_to_gallery branch from 45cf61f to c89eeb5 Compare July 18, 2021 18:01

zhaoyongjie changed the title ~~chore: Add tags to the new viz gallery(iteration 1)~~ chore: Add tags to the new viz gallery Jul 19, 2021

kgabryje approved these changes Jul 20, 2021

View reviewed changes

zhaoyongjie merged commit 3b74416 into apache:master Jul 20, 2021

stephenLYZ mentioned this pull request Jul 23, 2021

chore: implement new mockup to the new viz gallery (2nd iteration) #15868

Merged

8 tasks

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: Add tags to the new viz gallery #15734

chore: Add tags to the new viz gallery #15734

zhaoyongjie commented Jul 16, 2021 •

edited

Loading

codecov bot commented Jul 16, 2021 •

edited

Loading

geido commented Jul 16, 2021

github-actions bot commented Jul 16, 2021

geido commented Jul 16, 2021

zhaoyongjie commented Jul 16, 2021 •

edited

Loading

geido commented Jul 16, 2021 •

edited

Loading

stephenLYZ left a comment

stephenLYZ Jul 16, 2021 •

edited

Loading

stephenLYZ Jul 16, 2021 •

edited

Loading

stephenLYZ commented Jul 16, 2021 •

edited

Loading

zhaoyongjie commented Jul 16, 2021

ktmud commented Jul 16, 2021

junlincc commented Jul 16, 2021 •

edited

Loading

junlincc commented Jul 16, 2021 •

edited

Loading

suddjian commented Jul 16, 2021

suddjian commented Jul 16, 2021

github-actions bot commented Jul 16, 2021

suddjian commented Jul 16, 2021

xiezhongfu commented Jul 17, 2021 •

edited

Loading

rusackas commented Jul 18, 2021

ktmud commented Jul 19, 2021 •

edited

Loading

junlincc commented Jul 19, 2021 •

edited

Loading

kgabryje left a comment

github-actions bot commented Jul 20, 2021

kgabryje commented Jul 20, 2021

zhaoyongjie commented Jul 20, 2021

kasiazjc commented Jul 20, 2021

stephenLYZ commented Jul 20, 2021

stephenLYZ commented Jul 20, 2021

junlincc commented Jul 21, 2021

		@@ -206,6 +209,7 @@ const DetailsPopulated = (theme: SupersetTheme) => css`
		grid-template-rows: auto 1fr;

chore: Add tags to the new viz gallery #15734

chore: Add tags to the new viz gallery #15734

Conversation

zhaoyongjie commented Jul 16, 2021 • edited Loading

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

After

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

codecov bot commented Jul 16, 2021 • edited Loading

Codecov Report

geido commented Jul 16, 2021

github-actions bot commented Jul 16, 2021

geido commented Jul 16, 2021

zhaoyongjie commented Jul 16, 2021 • edited Loading

geido commented Jul 16, 2021 • edited Loading

stephenLYZ left a comment

Choose a reason for hiding this comment

stephenLYZ Jul 16, 2021 • edited Loading

Choose a reason for hiding this comment

stephenLYZ Jul 16, 2021 • edited Loading

Choose a reason for hiding this comment

stephenLYZ commented Jul 16, 2021 • edited Loading

zhaoyongjie commented Jul 16, 2021

ktmud commented Jul 16, 2021

junlincc commented Jul 16, 2021 • edited Loading

junlincc commented Jul 16, 2021 • edited Loading

suddjian commented Jul 16, 2021

suddjian commented Jul 16, 2021

github-actions bot commented Jul 16, 2021

suddjian commented Jul 16, 2021

xiezhongfu commented Jul 17, 2021 • edited Loading

rusackas commented Jul 18, 2021

ktmud commented Jul 19, 2021 • edited Loading

junlincc commented Jul 19, 2021 • edited Loading

kgabryje left a comment

Choose a reason for hiding this comment

github-actions bot commented Jul 20, 2021

kgabryje commented Jul 20, 2021

zhaoyongjie commented Jul 20, 2021

kasiazjc commented Jul 20, 2021

stephenLYZ commented Jul 20, 2021

stephenLYZ commented Jul 20, 2021

junlincc commented Jul 21, 2021

zhaoyongjie commented Jul 16, 2021 •

edited

Loading

codecov bot commented Jul 16, 2021 •

edited

Loading

zhaoyongjie commented Jul 16, 2021 •

edited

Loading

geido commented Jul 16, 2021 •

edited

Loading

stephenLYZ Jul 16, 2021 •

edited

Loading

stephenLYZ Jul 16, 2021 •

edited

Loading

stephenLYZ commented Jul 16, 2021 •

edited

Loading

junlincc commented Jul 16, 2021 •

edited

Loading

junlincc commented Jul 16, 2021 •

edited

Loading

xiezhongfu commented Jul 17, 2021 •

edited

Loading

ktmud commented Jul 19, 2021 •

edited

Loading

junlincc commented Jul 19, 2021 •

edited

Loading