feat(explore): make dnd controls clickable #16119

kgabryje · 2021-08-06T15:52:02Z

SUMMARY

Changes:

Clickable ghost button for metrics and filters controls. Clicking a ghost button opens a popover without any fields pre-filled, which means user opts out of UX improvements introduced with drag and drop. Dnd works exactly as before.
A new popover for columns control, similar to a popover for metrics and filters. Contains 2 tabs - "Saved" with a select button for choosing calculated columns and "Simple" with a button for selecting normal columns.
Clickable ghost button and clickable labels in columns control. Clicking a ghost button opens an empty popover in which user can select a column. Clicking a label opens a popover prefilled with that label. Dnd works as before - column is added without using popover. Dnd is the preferred way of adding columns as it requires much less user input - 1 drag versus 4 clicks (open popover, click select button, select column, click save).

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Screen.Recording.2021-08-06.at.17.49.02.mov

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

CC @junlincc @mistercrunch

codecov · 2021-08-06T16:19:19Z

Codecov Report

Merging #16119 (36a6be8) into master (9876c36) will decrease coverage by 0.21%.
The diff coverage is 78.94%.

@@            Coverage Diff             @@
##           master   #16119      +/-   ##
==========================================
- Coverage   76.71%   76.49%   -0.22%     
==========================================
  Files         997      997              
  Lines       53248    53248              
  Branches     6779     6779              
==========================================
- Hits        40849    40733     -116     
- Misses      12169    12285     +116     
  Partials      230      230

Flag	Coverage Δ
hive	`?`
mysql	`81.56% <ø> (-0.05%)`	⬇️
postgres	`81.62% <ø> (ø)`
presto	`?`
python	`81.71% <ø> (-0.43%)`	⬇️
sqlite	`81.23% <ø> (-0.05%)`	⬇️

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

Impacted Files	Coverage Δ
superset/config.py	`91.30% <ø> (ø)`
...ontrols/DndColumnSelectControl/DndMetricSelect.tsx	`41.21% <57.14%> (ø)`
...ontrols/DndColumnSelectControl/DndFilterSelect.tsx	`45.07% <66.66%> (ø)`
...ontrols/DndColumnSelectControl/DndColumnSelect.tsx	`46.42% <100.00%> (ø)`
...controls/DndColumnSelectControl/DndSelectLabel.tsx	`77.27% <100.00%> (ø)`
superset/db_engines/hive.py	`0.00% <0.00%> (-82.15%)`	⬇️
superset/db_engine_specs/hive.py	`69.80% <0.00%> (-16.87%)`	⬇️
superset/db_engine_specs/presto.py	`83.47% <0.00%> (-6.49%)`	⬇️
superset/views/database/mixins.py	`81.03% <0.00%> (-1.73%)`	⬇️
superset/connectors/sqla/models.py	`88.04% <0.00%> (-1.66%)`	⬇️
... and 7 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 9876c36...36a6be8. Read the comment docs.

villebro

Minor first pass comments, will look more closely after I have the chance to test properly

...rset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.tsx

junlincc · 2021-08-06T19:48:13Z

❤️ it as it's solid good work! as an OSS project, inclusiveness, flexibility and extensibility are always more important than chasing after perfect UX for a certain group of user regardless its size. :) I will help testing

villebro

Code LGTM, tested to work properly and I really like the functionality vs how it was previously. Looking forward to getting this merged!

kgabryje · 2021-08-09T16:17:27Z

CC @michellethomas

kgabryje · 2021-08-09T16:31:53Z

/testenv up FEATURE_ENABLE_EXPLORE_DRAG_AND_DROP=true

github-actions · 2021-08-09T16:34:55Z

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

michellethomas · 2021-08-10T00:18:11Z

Seems like a good improvement to me 👍 I tested this a bit and didn't see any issues but I only tested with a couple of datasources so I can look around a bit more later. cc: @ktmud you also looked around at drag and drop, not sure if you have any thoughts about this change.

ktmud · 2021-08-10T18:06:18Z

Didn't have time to look at the code but this change is a big + from me!

We might want to change the copy on the ghost button as well. E.g. "Click or drag a metric/column here to add" like used in SIP-62.

kgabryje · 2021-08-11T10:06:52Z

/testenv up FEATURE_ENABLE_EXPLORE_DRAG_AND_DROP=true FEATURE_ENABLE_DND_WITH_CLICK_UX=true

github-actions · 2021-08-11T10:11:19Z

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

kgabryje · 2021-08-11T10:15:17Z

I've hidden the new features behind a new feature flag ENABLE_DND_WITH_CLICK_UX.

@ktmud We recently added a suffix "here" to the ghost buttons

However, if there are more votes for a longer text "Click or drag a metric/column here to add" I can change that.

@junlincc WDYT?

villebro · 2021-08-11T13:10:13Z

I would prefer "Click or drag a metric/column here" because:

"to add" feels obvious in this context (I'm not sure what else the user could expect to happen by clicking or dragging a column/metric into the control)
The string is already long, and in some other language it is more likely to overflow if we add more words.

junlincc · 2021-08-11T20:12:57Z

It depends on which direction we want to guide user to be on.
Here's my concern. With the + sign visual indication and the "Click or drop a metric/column here" placeholder, I am almost 100% sure first time users will click, instead of visit the left data panel first as their first interaction with this popover.
Once user start on one path, and find it sufficient enough, it's very likely they stick with the more familiar path and reluctant to try the other, which may slowdown the adoption of dnd.
The fact that DND offers a much fast time to chart, compared to click-to-select, I do want to intentionally guide user to start with this path, and promote this path.

I prefer to keep it simple"Drop a metric/column here" as the "+" is a loud enough call to action for clicking.
If we have to explicitly indicate again, "Click or drop a metric/column here" makes more sense to me, definitely not to use "drag" in the wording.

Also, recently we do identify some sever regressions in the control panel due to increasing complexity of the product by adding too many FF and having multiple environments. I can't emphasize enough that maintaining both and making sure both work well together and individually can be costly and messy.
I would push much harder keeping DND only and try to resolve all the existing concerns, bottlenecks by improving this one solution if I am working on a close source/design heavy product. However, Superset has its unique OSS DNA which should be preserved and respected.

To whomever approve and support this hybrid solution, please do assess the code, and test this PR throughout, and consider the risk, the complexity for long term. @ktmud @villebro

ktmud · 2021-08-11T22:01:48Z

Maybe promote DnD before click: "Drop a column/metric here or click"?

junlincc

Product sign-off. will do throughout testing next week behind FF

rusackas · 2021-08-13T22:49:16Z

...rset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.tsx

+import { ColumnMeta } from '@superset-ui/chart-controls';
+
+const StyledSelect = styled(Select)`
+  .metric-option {


Is this styling something we'd anticipate reusing anywhere? If so, maybe it should be styled via a prop on the Select component itself.

@kgabryje @rusackas This code is not using the new Select component. It's using the Ant Design directly. We shouldn't use the Ant Design component directly anymore because the behavior of the select is different, like sorting the selected options, pagination, and lazy loading. To customize the options of the new Select you can just pass the element in the label prop of the values.

These PRs contain an example of customized options:
#16200
#16252

I don't think this style should be a prop of the Select component because it's something specific to the customized label. We have many different customized labels throughout the application as you can see in the PRs above.

ktmud · 2021-08-13T23:39:25Z

...rset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.tsx

+            </StyledSelect>
+          </FormItem>
+        </Tabs.TabPane>
+        <Tabs.TabPane key="simple" tab={t('Simple')}>


SIMPLE makes sense in the context of metrics because it's a "simple" way of configuring adhoc metrics. But for columns, there is nothing to configure so the "simplicity" of selecting a calculated column and an original column is the same.

I wonder whether we can just display a popover without tabs but render "Columns" and "Calculated columns" as options groups. Then add the two tabs "SIMPLE" and "Custom SQL" when we add support for adhoc calculated columns.

Ping @michael-s-molina about proposal to add support for Option Groups to the Select component.

michael-s-molina

Code LGTM. I added the ColumnSelectPopover to our list of components that need to be migrated to the new Select.

kgabryje · 2021-08-17T11:21:17Z

@ktmud @junlincc @villebro I changed the ghost button texts to "Drop columns/metrics here or click" (and similar for singular version and columns only version)

github-actions · 2021-08-17T12:57:00Z

Ephemeral environment shutdown and build artifacts deleted.

henryyeh · 2021-08-18T22:58:31Z

🏷️ 2021.31

* Make ghost buttons clickable * Popover for column control * Make column dnd ghost button clickable * Prefill operator only if column is defined * Remove data-tests * lint fix * Hide new features behind a feature flag * Change ghost button texts * Remove caret for non clickable columns (cherry picked from commit 203c311)

mdeshmu · 2021-09-25T12:07:09Z

💯 I really appreciate that this is being added.

* Make ghost buttons clickable * Popover for column control * Make column dnd ghost button clickable * Prefill operator only if column is defined * Remove data-tests * lint fix * Hide new features behind a feature flag * Change ghost button texts * Remove caret for non clickable columns

kgabryje requested a review from villebro August 6, 2021 15:52

pull-request-size bot added the size/L label Aug 6, 2021

kgabryje force-pushed the feat/dnd-plus-click branch from 76dd647 to 702bbf4 Compare August 6, 2021 16:00

junlincc added #bug:blocking! Blocking issues with high priority and removed #bug:blocking! Blocking issues with high priority labels Aug 6, 2021

villebro reviewed Aug 6, 2021

View reviewed changes

villebro force-pushed the feat/dnd-plus-click branch from 22152ce to 702bbf4 Compare August 9, 2021 09:10

kgabryje force-pushed the feat/dnd-plus-click branch from 702bbf4 to ebe574d Compare August 9, 2021 09:58

villebro approved these changes Aug 9, 2021

View reviewed changes

kgabryje force-pushed the feat/dnd-plus-click branch from ebe574d to dc0514d Compare August 9, 2021 16:04

kgabryje mentioned this pull request Aug 10, 2021

chore(core): add ENABLE_DND_WITH_CLICK_UX ff apache-superset/superset-ui#1297

Merged

kgabryje force-pushed the feat/dnd-plus-click branch from f1cbd14 to 754bdc5 Compare August 11, 2021 09:40

junlincc added hold:testing! On hold for testing hold:in-discussion labels Aug 11, 2021

junlincc removed hold:testing! On hold for testing hold:in-discussion labels Aug 13, 2021

junlincc approved these changes Aug 13, 2021

View reviewed changes

rusackas requested a review from ktmud August 13, 2021 22:46

rusackas reviewed Aug 13, 2021

View reviewed changes

ktmud reviewed Aug 13, 2021

View reviewed changes

michael-s-molina approved these changes Aug 16, 2021

View reviewed changes

kgabryje added 8 commits August 17, 2021 12:54

Make ghost buttons clickable

a23e6b6

Popover for column control

cefbe5c

Make column dnd ghost button clickable

a13b0a7

Prefill operator only if column is defined

8a2d053

Remove data-tests

b0a4691

lint fix

7c86bba

Hide new features behind a feature flag

ea09b28

Change ghost button texts

a91b025

kgabryje force-pushed the feat/dnd-plus-click branch from 754bdc5 to a91b025 Compare August 17, 2021 11:20

pull-request-size bot added size/XL and removed size/L labels Aug 17, 2021

Remove caret for non clickable columns

36a6be8

kgabryje merged commit 203c311 into apache:master Aug 17, 2021

superset-github-bot bot added the preset:2021.31 label Aug 18, 2021

siegfriedweber mentioned this pull request Feb 9, 2022

Add Superset 1.4.1 stackabletech/docker-images#47

Closed

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(explore): make dnd controls clickable #16119

feat(explore): make dnd controls clickable #16119

kgabryje commented Aug 6, 2021 •

edited

Loading

codecov bot commented Aug 6, 2021 •

edited

Loading

villebro left a comment

junlincc commented Aug 6, 2021 •

edited

Loading

villebro left a comment

kgabryje commented Aug 9, 2021

kgabryje commented Aug 9, 2021

github-actions bot commented Aug 9, 2021

michellethomas commented Aug 10, 2021

ktmud commented Aug 10, 2021

kgabryje commented Aug 11, 2021

github-actions bot commented Aug 11, 2021

kgabryje commented Aug 11, 2021

villebro commented Aug 11, 2021

junlincc commented Aug 11, 2021 •

edited

Loading

ktmud commented Aug 11, 2021

junlincc left a comment

rusackas Aug 13, 2021

michael-s-molina Aug 16, 2021

ktmud Aug 13, 2021 •

edited

Loading

villebro Aug 16, 2021

michael-s-molina left a comment

kgabryje commented Aug 17, 2021

github-actions bot commented Aug 17, 2021

henryyeh commented Aug 18, 2021

mdeshmu commented Sep 25, 2021

feat(explore): make dnd controls clickable #16119

feat(explore): make dnd controls clickable #16119

Conversation

kgabryje commented Aug 6, 2021 • edited Loading

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

codecov bot commented Aug 6, 2021 • edited Loading

Codecov Report

villebro left a comment

Choose a reason for hiding this comment

junlincc commented Aug 6, 2021 • edited Loading

villebro left a comment

Choose a reason for hiding this comment

kgabryje commented Aug 9, 2021

kgabryje commented Aug 9, 2021

github-actions bot commented Aug 9, 2021

michellethomas commented Aug 10, 2021

ktmud commented Aug 10, 2021

kgabryje commented Aug 11, 2021

github-actions bot commented Aug 11, 2021

kgabryje commented Aug 11, 2021

villebro commented Aug 11, 2021

junlincc commented Aug 11, 2021 • edited Loading

ktmud commented Aug 11, 2021

junlincc left a comment

Choose a reason for hiding this comment

rusackas Aug 13, 2021

Choose a reason for hiding this comment

michael-s-molina Aug 16, 2021

Choose a reason for hiding this comment

ktmud Aug 13, 2021 • edited Loading

Choose a reason for hiding this comment

villebro Aug 16, 2021

Choose a reason for hiding this comment

michael-s-molina left a comment

Choose a reason for hiding this comment

kgabryje commented Aug 17, 2021

github-actions bot commented Aug 17, 2021

henryyeh commented Aug 18, 2021

mdeshmu commented Sep 25, 2021

kgabryje commented Aug 6, 2021 •

edited

Loading

codecov bot commented Aug 6, 2021 •

edited

Loading

junlincc commented Aug 6, 2021 •

edited

Loading

junlincc commented Aug 11, 2021 •

edited

Loading

ktmud Aug 13, 2021 •

edited

Loading