fix(explore): drag and drop indicator UX #27558

justinpark · 2024-03-18T23:11:21Z

SUMMARY

The current explore drag-and-drop (DND) indicator only highlights the drop allow zone, and users can recognize the disallowed zone when they try to drop an item there. However, this UX can be challenging when the current dragging item is not droppable in the entire zone, as there is no highlighting to indicate this.

before--dnd-feedback.mov

This lack of feedback can lead users to believe that the DND functionality is not working, until they mouse over the zone.

This commit aims to address this UX issue by implementing changes. Now, all droppable zones will be highlighted when dragging, and a different color scheme will indicate which zones are available and which are unavailable for dropping.

after--dnd-feedback.mov

Additionally, the commit also updates the drag over feedback to align with the changes made to the dashboard's DND UX(#26699). This way, users can have a consistent and improved drag-and-drop experience, with clear usability feedback.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:

before--explore-dnd-indicator.mov

After:

after--explore-dnd-indicator.mov

TESTING INSTRUCTIONS

Create a "Table" chart
Select RAW RECORDS and then drag the Metrics to check where is droppable zone

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

justinpark · 2024-03-18T23:14:48Z

cc: @kasiazjc @yousoph for UI feedback

mistercrunch · 2024-03-19T01:37:56Z

Looks great!

codecov · 2024-03-19T04:06:56Z

Codecov Report

Attention: Patch coverage is 72.41379% with 8 lines in your changes missing coverage. Please review.

Project coverage is 67.51%. Comparing base (f274c47) to head (bdfb926).
Report is 1393 commits behind head on master.

Files with missing lines	Patch %	Lines
...plore/components/controls/OptionControls/index.tsx	36.36%	1 Missing and 6 partials ⚠️
...controls/DndColumnSelectControl/DndSelectLabel.tsx	50.00%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #27558      +/-   ##
==========================================
+ Coverage   67.46%   67.51%   +0.04%     
==========================================
  Files        1910     1911       +1     
  Lines       74802    74894      +92     
  Branches     8345     8371      +26     
==========================================
+ Hits        50467    50561      +94     
+ Misses      22284    22273      -11     
- Partials     2051     2060       +9

Flag	Coverage Δ
javascript	`57.49% <72.41%> (+0.10%)`	⬆️

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

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

justinpark · 2024-03-19T04:09:29Z

/testenv up

github-actions · 2024-03-19T04:19:37Z

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

rusackas · 2024-03-19T14:59:42Z

superset-frontend/src/explore/components/controls/OptionControls/index.tsx

+    background-color: ${({ theme, canDrop }) =>
+      canDrop ? theme.colors.primary.base : theme.colors.error.light1};
+    z-index: 10;
+    opacity: 0.2;


If it makes sense for these, the Superset theme has some built-in opacity stops (which we can expand on if needed)

rusackas · 2024-03-19T15:01:09Z

superset-frontend/src/explore/components/controls/OptionControls/index.tsx

+    display: ${({ isDragging }) => (isDragging ? 'block' : 'none')};
+    background-color: ${({ theme, canDrop }) =>
+      canDrop ? theme.colors.primary.base : theme.colors.error.light1};
+    z-index: 10;


There's a z-index layer for this in the Superset theme... you can uset theme.zIndex.aboveDashboardCharts

rusackas · 2024-03-19T15:02:08Z

superset-frontend/src/explore/components/controls/OptionControls/index.tsx

+    background-color: ${({ theme }) => theme.colors.primary.base};
+    z-index: 10;
+    opacity: 0.3;
+    top: -4px;


Same for the z-index/opacity here, but also, if these positions are based on the "drop zone" having a gridUnit of space, you might want to use the gridUnit here as well for these 4px offsets. Then if someone changes the gridUnit to 6px or 2px in their theme, it'll all line up nicely :D

rusackas · 2024-03-19T15:03:51Z

This is looking awseome! Left some CSS comments about under-utilized zindex/opacity settings, which we ought to be propagating throughout code whenever we get the chance :D

justinpark · 2024-03-19T16:54:22Z

/testenv down

rusackas

Thanks for the touchups! LGTM!

mistercrunch · 2024-03-21T20:07:33Z

john-bodley · 2024-03-25T17:00:13Z

@kasiazjc do you have any inputs with regards to the design change? Note this change is inline with how droppable zones function for dashboards.

michael-s-molina

Thank you for the improvement @justinpark!

michael-s-molina · 2024-03-26T12:17:47Z

superset-frontend/src/explore/components/controls/OptionControls/index.tsx

+      isLoading || (canDrop && isOver) ? 'block' : 'none'};
+    background-color: ${({ theme, isLoading }) =>
+      isLoading ? theme.colors.grayscale.light3 : theme.colors.primary.base};
+    z-index: ${({ theme }) => theme.zIndex.dropdown};


Could you move the variables to the top? Like:

const TooltipSectionWrapper = styled.div` ${({ theme }) => css` font-size: ${theme.typography.sizes.s}px; &:not(:last-of-type) { margin-bottom: ${theme.gridUnit * 2}px; } `} `;

to avoid repeating:

${({ theme, isDragging, isLoading }) => ... };

github-actions · 2024-03-27T18:23:02Z

Ephemeral environment shutdown and build artifacts deleted.

(cherry picked from commit 7369754)

(cherry picked from commit 8b5a563)

pull-request-size bot added the size/L label Mar 18, 2024

justinpark requested review from rusackas, john-bodley, eschutho, kasiazjc and michael-s-molina March 18, 2024 23:12

rusackas requested a review from kgabryje March 19, 2024 14:52

rusackas reviewed Mar 19, 2024

View reviewed changes

rusackas approved these changes Mar 19, 2024

View reviewed changes

justinpark mentioned this pull request Mar 22, 2024

chore: Adds the 4.0 release notes #27441

Merged

9 tasks

michael-s-molina reviewed Mar 26, 2024

View reviewed changes

justinpark added 8 commits March 26, 2024 09:55

fix(explore): drag and drop indicator UX

09ed1f2

tsc

d944476

missing useDnd by ExploreContainer

f8358a2

use theme variable

9ef305f

fix unavailable sorting issue

9c26fa3

loading indicator for verifying values

9eb62d1

change loading pulse animation

acc8223

hide dropzone while loading

9d81dca

group all theme ref

bdfb926

justinpark force-pushed the fix--highlight-droppable-area branch from a24c8b9 to bdfb926 Compare March 26, 2024 17:30

michael-s-molina approved these changes Mar 26, 2024

View reviewed changes

justinpark merged commit 7369754 into apache:master Mar 27, 2024
30 checks passed

michael-s-molina added the v4.0 Label added by the release manager to track PRs to be included in the 4.0 branch label Mar 28, 2024

michael-s-molina pushed a commit that referenced this pull request Mar 28, 2024

fix(explore): drag and drop indicator UX (#27558)

a024b4a

(cherry picked from commit 7369754)

EandrewJones pushed a commit to UMD-ARLIS/superset that referenced this pull request Apr 5, 2024

fix(explore): drag and drop indicator UX (apache#27558)

ed3e357

EnxDev pushed a commit to EnxDev/superset that referenced this pull request Apr 12, 2024

fix(explore): drag and drop indicator UX (apache#27558)

7ef6740

yousoph mentioned this pull request Apr 16, 2024

Can not reorder dnd of Metrics #28013

Closed

3 tasks

mistercrunch added 🍒 4.0.0 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels labels Apr 17, 2024

qleroy pushed a commit to qleroy/superset that referenced this pull request Apr 28, 2024

fix(explore): drag and drop indicator UX (apache#27558)

6607882

mistercrunch added 🍒 4.0.1 🍒 4.0.2 labels Jul 2, 2024

irublev pushed a commit to HighviewPower/superset that referenced this pull request Oct 29, 2024

fix(explore): drag and drop indicator UX (apache#27558)

bc57e60

(cherry picked from commit 8b5a563)

vinothkumar66 pushed a commit to vinothkumar66/superset that referenced this pull request Nov 11, 2024

fix(explore): drag and drop indicator UX (apache#27558)

c743581

mistercrunch added the 🚢 4.1.0 label Nov 27, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(explore): drag and drop indicator UX #27558

fix(explore): drag and drop indicator UX #27558

justinpark commented Mar 18, 2024 •

edited

Loading

justinpark commented Mar 18, 2024

mistercrunch commented Mar 19, 2024

codecov bot commented Mar 19, 2024 •

edited

Loading

justinpark commented Mar 19, 2024

github-actions bot commented Mar 19, 2024

rusackas Mar 19, 2024

rusackas Mar 19, 2024

justinpark Mar 19, 2024

rusackas Mar 19, 2024 •

edited

Loading

rusackas commented Mar 19, 2024

justinpark commented Mar 19, 2024

rusackas left a comment

mistercrunch commented Mar 21, 2024

john-bodley commented Mar 25, 2024

michael-s-molina left a comment

michael-s-molina Mar 26, 2024

github-actions bot commented Mar 27, 2024

fix(explore): drag and drop indicator UX #27558

fix(explore): drag and drop indicator UX #27558

Conversation

justinpark commented Mar 18, 2024 • edited Loading

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

justinpark commented Mar 18, 2024

mistercrunch commented Mar 19, 2024

codecov bot commented Mar 19, 2024 • edited Loading

Codecov Report

justinpark commented Mar 19, 2024

github-actions bot commented Mar 19, 2024

rusackas Mar 19, 2024

Choose a reason for hiding this comment

rusackas Mar 19, 2024

Choose a reason for hiding this comment

justinpark Mar 19, 2024

Choose a reason for hiding this comment

rusackas Mar 19, 2024 • edited Loading

Choose a reason for hiding this comment

rusackas commented Mar 19, 2024

justinpark commented Mar 19, 2024

rusackas left a comment

Choose a reason for hiding this comment

mistercrunch commented Mar 21, 2024

john-bodley commented Mar 25, 2024

michael-s-molina left a comment

Choose a reason for hiding this comment

michael-s-molina Mar 26, 2024

Choose a reason for hiding this comment

github-actions bot commented Mar 27, 2024

justinpark commented Mar 18, 2024 •

edited

Loading

codecov bot commented Mar 19, 2024 •

edited

Loading

rusackas Mar 19, 2024 •

edited

Loading