feat(dashboard): Add thumbnails to dashboard edit draggable chart list by codyml · Pull Request #20528 · apache/superset

codyml · 2022-06-28T22:39:35Z

SUMMARY

This PR adds thumbnails to the sidebar of draggable charts in the edit dashboard view and modifies the design of the cards with and without thumbnails enabled. Thumbnails are shown when the THUMBNAILS feature flag is enabled. If no thumbnail has been generated, the same placeholder that's used on the chart list card view is shown. Other changes include:

Layout updates for the text and the Added badge, when thumbnails are enabled and when they aren't.
Text is truncated and shows a tooltip when it's too long to fit in the layout.
The human-readable chart viz type is displayed instead of the machine-readable name.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:

Before.mov

After (thumbnails enabled):

Untitled.mov

After (thumbnails disabled):

Untitled2.mov

TESTING INSTRUCTIONS

Note: Thumbnail generation is currently broken (see #20673). In addition, there's a bug preventing the chart metadata from being downloaded (see #20684), so even if thumbnails are generated, any items in the draggable chart list with missing metadata won't show thumbnails either.

Run Superset with feature flag THUMBNAILS=False and ensure that the updated cards look and work as expected when added and not added to the dashboard.
Run Superset with THUMBNAILS=True and ensure that thumbnails appear (or at least that their placeholders do) as expected and that the updated cards look and work as expected when added and not added to the dashboard.

ADDITIONAL INFORMATION

Has associated issue:
Required feature flags: THUMBNAILS
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

codyml · 2022-06-28T22:40:07Z

@kasiazjc here's the PR!

codecov · 2022-06-28T23:27:25Z

Codecov Report

Merging #20528 (8557c7c) into master (6e6d4e3) will decrease coverage by 0.01%.
The diff coverage is 68.18%.

@@            Coverage Diff             @@
##           master   #20528      +/-   ##
==========================================
- Coverage   66.27%   66.25%   -0.02%     
==========================================
  Files        1757     1757              
  Lines       66955    67012      +57     
  Branches     7109     7132      +23     
==========================================
+ Hits        44374    44401      +27     
- Misses      20766    20785      +19     
- Partials     1815     1826      +11

Flag	Coverage Δ
javascript	`51.93% <68.18%> (-0.01%)`	⬇️

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

Impacted Files	Coverage Δ
...et-frontend/src/dashboard/actions/sliceEntities.js	`74.28% <ø> (ø)`
...dashboard/components/AddSliceCard/AddSliceCard.tsx	`67.44% <67.44%> (ø)`
...t-frontend/src/dashboard/components/SliceAdder.jsx	`62.66% <100.00%> (ø)`
...ntrols/MetricControl/AdhocMetricPopoverTrigger.tsx	`78.04% <0.00%> (-5.74%)`	⬇️
...ols/MetricControl/AdhocMetricEditPopover/index.jsx	`75.53% <0.00%> (-2.50%)`	⬇️
...ColumnSelectControl/ColumnSelectPopoverTrigger.tsx	`63.63% <0.00%> (-1.89%)`	⬇️
...ols/DndColumnSelectControl/ColumnSelectPopover.tsx	`3.26% <0.00%> (-0.49%)`	⬇️

Help us with your feedback. Take ten seconds to tell us how you rate us.

zhaoyongjie · 2022-06-29T08:21:02Z

@codyml please rebase master to fix the code coverage issue.

zhaoyongjie

looks great!

kgabryje · 2022-06-29T15:57:28Z

/testenv up FEATURE_THUMBNAILS=true

rusackas · 2022-06-29T16:04:07Z

I think we need to make some layout adjustments here... I'll ping you on a separate thread to save everyone the notification headaches :)

github-actions · 2022-06-29T16:07:20Z

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

zhaoyongjie · 2022-06-30T10:16:59Z

I can't get chart snapshot on Dashboard edit list, but gets it on Charts List.

chart.snapshot.in.Dashboard.mov

codyml · 2022-06-30T13:41:43Z

I can't get chart snapshot on Dashboard edit list, but gets it on Charts List.

chart.snapshot.in.Dashboard.mov

Ah thanks, will look into this.

codyml · 2022-07-09T03:48:59Z

I can't get chart snapshot on Dashboard edit list, but gets it on Charts List.

chart.snapshot.in.Dashboard.mov

@zhaoyongjie Finally got around to looking into this, and it's another symptom of the missing metadata bug, which I'm going to tackle separately. TBD if this is going to be the final fix, but if you comment out this line you should see all thumbnails and metadata appear.

rusackas · 2022-07-12T16:41:27Z

/testenv up FEATURE_THUMBNAILS=true

github-actions · 2022-07-12T17:05:44Z

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

zhaoyongjie · 2022-07-15T14:00:53Z

this PR should wait for merging this.

codyml · 2022-07-19T20:27:45Z

this PR should wait for merging this.

@zhaoyongjie #20673 was merged! Mind merging this if everything still looks good?

geido · 2022-07-21T15:38:11Z

/testenv up FEATURE_THUMBNAILS=true

zhaoyongjie

awesome! I have got the screenshot in the edit bar on the dashboard. leave a no-blocking suggestion, migrate to TSX in separated PR or this PR.

zhaoyongjie · 2022-07-22T07:13:53Z

Just noticed this is a JSX, we should migrate to TSX for the new component.

codyml · 2022-07-22T14:45:38Z

@geido found an issue with metadata still being missing, need to look into it:

zhaoyongjie · 2022-07-22T14:57:57Z

/testenv up FEATURE_THUMBNAILS=true

zhaoyongjie · 2022-07-22T15:09:10Z

/testenv up FEATURE_THUMBNAILS=true FEATURE_THUMBNAILS_SQLA_LISTENERS=true

github-actions · 2022-07-22T16:46:48Z

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

github-actions · 2022-07-22T16:46:49Z

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

zhaoyongjie · 2022-07-27T00:36:27Z

/testenv up FEATURE_THUMBNAILS=true FEATURE_THUMBNAILS_SQLA_LISTENERS=true

github-actions · 2022-07-27T00:41:17Z

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

zhaoyongjie · 2022-07-27T15:16:44Z

/testenv up FEATURE_THUMBNAILS=true

github-actions · 2022-07-27T16:00:47Z

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

codyml · 2022-07-27T16:37:05Z

@geido @zhaoyongjie Confirmed that missing metadata in ephemeral environment was due to ephemeral environment being spun up before PR was rebased over #20684.

rusackas

LGTM

github-actions · 2022-07-28T17:18:27Z

Ephemeral environment shutdown and build artifacts deleted.

apache#20528) * Add chart thumbnails to dashboard edit draggable charts. * Reorganize hierarchy and add tests. * Incorporate review suggestions. * Update design and add tooltips. * Fix missing thumbnails. * Fix tests. * Fix moving viz type label. * Convert AddSliceCard to TS, update hierarchy.

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

pull-request-size Bot added the size/L label Jun 28, 2022

zhaoyongjie reviewed Jun 29, 2022

View reviewed changes

Comment thread superset-frontend/src/dashboard/components/AddSliceCard/index.jsx Outdated

codyml force-pushed the codyml/sc-50980/add-thumbnails-next-to-charts-in-dashboard branch from 7107355 to 8814886 Compare June 29, 2022 13:49

zhaoyongjie approved these changes Jun 29, 2022

View reviewed changes

codyml marked this pull request as draft June 29, 2022 16:28

rusackas added the hold! On hold label Jun 29, 2022

codyml force-pushed the codyml/sc-50980/add-thumbnails-next-to-charts-in-dashboard branch 4 times, most recently from 6598979 to 8ae8e97 Compare July 8, 2022 23:07

codyml marked this pull request as ready for review July 9, 2022 03:44

rusackas removed the hold! On hold label Jul 12, 2022

codyml force-pushed the codyml/sc-50980/add-thumbnails-next-to-charts-in-dashboard branch from 3ed59af to 6255fc0 Compare July 14, 2022 17:29

zhaoyongjie self-requested a review July 15, 2022 11:56

codyml force-pushed the codyml/sc-50980/add-thumbnails-next-to-charts-in-dashboard branch from 6255fc0 to 361e406 Compare July 19, 2022 19:39

zhaoyongjie approved these changes Jul 22, 2022

View reviewed changes

codyml added 8 commits July 26, 2022 14:24

Add chart thumbnails to dashboard edit draggable charts.

f309000

Reorganize hierarchy and add tests.

2b55337

Incorporate review suggestions.

974fa97

Update design and add tooltips.

f1fe58d

Fix missing thumbnails.

eb3c111

Fix tests.

2f98bf0

Fix moving viz type label.

571eebc

Convert AddSliceCard to TS, update hierarchy.

8557c7c

codyml force-pushed the codyml/sc-50980/add-thumbnails-next-to-charts-in-dashboard branch from b4f9311 to 8557c7c Compare July 26, 2022 19:24

pull-request-size Bot added size/XL and removed size/L labels Jul 26, 2022

rusackas approved these changes Jul 28, 2022

View reviewed changes

rusackas merged commit d50784d into apache:master Jul 28, 2022

mistercrunch added the 🚢 2.1.3 First shipped in 2.1.3 label Feb 18, 2024

mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 2.1.0 First shipped in 2.1.0 and removed 🚢 2.1.3 First shipped in 2.1.3 labels Mar 13, 2024

Uh oh!

Conversation

codyml commented Jun 28, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

Uh oh!

codyml commented Jun 28, 2022

Uh oh!

codecov Bot commented Jun 28, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

zhaoyongjie commented Jun 29, 2022

Uh oh!

zhaoyongjie left a comment

Choose a reason for hiding this comment

Uh oh!

kgabryje commented Jun 29, 2022

Uh oh!

rusackas commented Jun 29, 2022

Uh oh!

github-actions Bot commented Jun 29, 2022

Uh oh!

zhaoyongjie commented Jun 30, 2022

Uh oh!

codyml commented Jun 30, 2022

Uh oh!

codyml commented Jul 9, 2022

Uh oh!

rusackas commented Jul 12, 2022

Uh oh!

github-actions Bot commented Jul 12, 2022

Uh oh!

zhaoyongjie commented Jul 15, 2022

Uh oh!

codyml commented Jul 19, 2022

Uh oh!

geido commented Jul 21, 2022

Uh oh!

zhaoyongjie left a comment

Choose a reason for hiding this comment

Uh oh!

zhaoyongjie Jul 22, 2022

Choose a reason for hiding this comment

Uh oh!

codyml commented Jul 22, 2022

Uh oh!

zhaoyongjie commented Jul 22, 2022

Uh oh!

zhaoyongjie commented Jul 22, 2022

Uh oh!

github-actions Bot commented Jul 22, 2022

Uh oh!

github-actions Bot commented Jul 22, 2022

Uh oh!

zhaoyongjie commented Jul 27, 2022

Uh oh!

github-actions Bot commented Jul 27, 2022

Uh oh!

zhaoyongjie commented Jul 27, 2022

Uh oh!

github-actions Bot commented Jul 27, 2022

Uh oh!

codyml commented Jul 27, 2022

Uh oh!

rusackas left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jul 28, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

codyml commented Jun 28, 2022 •

edited

Loading

codecov Bot commented Jun 28, 2022 •

edited

Loading