Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(explore): Drag and drop UX improvements #13598

Merged
merged 5 commits into from
Mar 15, 2021

Conversation

kgabryje
Copy link
Member

SUMMARY

This PR adds a few UX improvements to dnd feature implemented in #13575:

  1. Display a ghost button in all DnD components to indicate that user can drop a metric or column in that component.
  2. When user starts dragging a column or a metric, display dashed border around control boxes in which the dragged element can be dropped (before - the border was displayed only when user was hovering over a control box)
  3. When user drops a saved metric in metrics control box, instead of opening a popover, the metric is created immediately.

In order to test the changes, make sure that ENABLE_EXPLORE_DRAG_AND_DROP feature flag is enabled

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Screen.Recording.2021-03-12.at.11.43.40.mov
Screen.Recording.2021-03-12.at.16.07.48.mov

TEST PLAN

ADDITIONAL INFORMATION

  • Has associated issue:
  • Changes UI
  • Requires DB Migration.
  • Confirm DB Migration upgrade and downgrade tested.
  • Introduces new feature or API
  • Removes existing feature or API

CC: @villebro @junlincc @zhaoyongjie @ktmud

@kgabryje kgabryje changed the title chore(explore): Drag and drop UX improvements feat(explore): Drag and drop UX improvements Mar 12, 2021
@kgabryje kgabryje closed this Mar 12, 2021
@kgabryje kgabryje reopened this Mar 12, 2021
@codecov
Copy link

codecov bot commented Mar 12, 2021

Codecov Report

Merging #13598 (506aaa0) into master (609c359) will decrease coverage by 4.12%.
The diff coverage is 46.15%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master   #13598      +/-   ##
==========================================
- Coverage   77.29%   73.16%   -4.13%     
==========================================
  Files         910      607     -303     
  Lines       46359    21568   -24791     
  Branches     5633     5703      +70     
==========================================
- Hits        35831    15781   -20050     
+ Misses      10392     5651    -4741     
  Partials      136      136              
Flag Coverage Δ
cypress 56.72% <21.21%> (-0.01%) ⬇️
hive ?
javascript 63.16% <46.15%> (+0.10%) ⬆️
mysql ?
postgres ?
presto ?
python ?
sqlite ?

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

Impacted Files Coverage Δ
...frontend/src/explore/components/OptionControls.tsx 67.02% <0.00%> (ø)
...ontrols/DndColumnSelectControl/DndColumnSelect.tsx 22.58% <ø> (ø)
...ontrols/DndColumnSelectControl/DndMetricSelect.tsx 10.31% <0.00%> (-0.09%) ⬇️
...ents/controls/FilterControl/AdhocFilterControl.jsx 60.00% <ø> (ø)
.../controls/FilterControl/AdhocFilterEditPopover.jsx 58.00% <ø> (ø)
...Control/AdhocFilterEditPopoverSimpleTabContent.jsx 74.83% <ø> (ø)
...terControl/AdhocFilterEditPopoverSqlTabContent.jsx 63.33% <ø> (ø)
...nents/controls/FilterControl/AdhocFilterOption.jsx 100.00% <ø> (ø)
.../controls/MetricControl/AdhocMetricEditPopover.jsx 79.54% <ø> (ø)
...nents/controls/MetricControl/AdhocMetricOption.jsx 100.00% <ø> (ø)
... and 316 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 609c359...8fc399f. Read the comment docs.

Copy link
Member

@ktmud ktmud left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. Very nice improvements!

@@ -66,7 +66,8 @@ export default function DndSelectLabel<T, O>(
<ControlHeader {...props} />
</HeaderContainer>
<DndLabelsContainer canDrop={canDrop} isOver={isOver}>
{isEmpty(props.values) ? renderPlaceHolder() : props.valuesRenderer()}
{props.valuesRenderer()}
{displayGhostButton && renderPlaceHolder()}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: can we rename renderPlaceHolder to renderGhostButton just to be consistent?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

@junlincc
Copy link
Member

junlincc commented Mar 14, 2021

This solution is only for intermediate stage. @ktmud

When most of the fields become droppable, our control panel would be twice as long to scroll.

@junlincc junlincc added the explore:drag&drop Related to drag&drop in Explore label Mar 14, 2021
Copy link
Member

@villebro villebro left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@villebro villebro merged commit ae66f5f into apache:master Mar 15, 2021
allanco91 pushed a commit to allanco91/superset that referenced this pull request May 21, 2021
* Create a metric immediately when saved metric is dropped

* Display borders around control boxes when metric or column is dragged

* Fix imports

* Display ghost button

* Rename placeholder to ghostButton
@mistercrunch mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 1.2.0 labels Mar 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels explore:drag&drop Related to drag&drop in Explore size/M 🚢 1.2.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants