feat(native-filters): Adjust filter components for horizontal mode #22273

kgabryje · 2022-11-30T14:02:56Z

SUMMARY

This PR adjusts native filter components for horizontal filter bar.
Noteworthy changes:

Value filter:
a) Introduce a oneLine mode to Select component - if enabled, only 1 tag will be displayed at once and the rest of selected tags will be collapsed to an overflow tag. When user opens the dropdown, only the overflow tag is displayed. All tags are always displayed in a single line.
b) If tag is truncated, display a tooltip with full name
c) Customize maxTagPlaceholder, so that the overflow tag doesn't display 3 dots at the end, which takes precious space
(e.g. instead of the default + 1 ... we show +1 when 1 item is overflowing)
Range filter:
a) Adjust the top and bottom margin to make sure that the slider is centered in horizontal mode
b) Decrease font weight and line height so that the marks fit well in the horizontal filter bar
Time range filter: add styling to make sure that the pill is centered in horizontal mode

Known issues:

The time range pill's width is dynamic depending on selected time range ("No filter" pill is smaller than "2022-01-01 : 2022-12-01" pill). However, the filter component itself always has a fixed width, which means that if the pill is short, there might be some empty space between the time range filter and the filter next to it. We are planning to replace it soon with a new component, stay tuned!

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

Enable HORIZONTAL_FILTER_BAR ff
Set horizontal mode for the native filters bar
Add various types of filters
Make sure that nothing breaks

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

CC @codyml for review

codecov · 2022-11-30T14:52:53Z

Codecov Report

Merging #22273 (4f76d87) into master (2bdf22b) will increase coverage by 0.00%.
The diff coverage is 68.57%.

❗ Current head 4f76d87 differs from pull request most recent head 1d38d63. Consider uploading reports for the commit 1d38d63 to get more accurate results

@@           Coverage Diff           @@
##           master   #22273   +/-   ##
=======================================
  Coverage   55.69%   55.70%           
=======================================
  Files        1846     1847    +1     
  Lines       70302    70330   +28     
  Branches     7689     7701   +12     
=======================================
+ Hits        39157    39177   +20     
- Misses      29151    29155    +4     
- Partials     1994     1998    +4

Flag	Coverage Δ
javascript	`53.81% <68.57%> (+0.01%)`	⬆️

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

Impacted Files	Coverage Δ
...Filters/FilterBar/FilterControls/FilterControl.tsx	`29.03% <0.00%> (ø)`
...veFilters/FilterBar/FilterControls/FilterValue.tsx	`6.31% <0.00%> (ø)`
...end/src/filters/components/Range/transformProps.ts	`100.00% <ø> (ø)`
...nd/src/filters/components/Select/transformProps.ts	`91.66% <ø> (ø)`
...et-frontend/src/filters/components/Select/types.ts	`100.00% <ø> (ø)`
...d/src/filters/components/Time/TimeFilterPlugin.tsx	`0.00% <ø> (ø)`
...tend/src/filters/components/Time/transformProps.ts	`0.00% <ø> (ø)`
...src/filters/components/Range/RangeFilterPlugin.tsx	`68.80% <40.00%> (-1.95%)`	⬇️
...erset-frontend/src/components/Select/CustomTag.tsx	`64.28% <64.28%> (ø)`
...es/superset-ui-core/src/chart/models/ChartProps.ts	`100.00% <100.00%> (ø)`
... and 3 more

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

geido · 2022-11-30T16:57:54Z

/testenv up FEATURE_HORIZONTAL_FILTER_BAR=true

github-actions · 2022-11-30T16:59:56Z

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

geido

Just two nits from a first look at the code

superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx

superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx

kgabryje · 2022-12-01T14:15:33Z

@michael-s-molina @geido @codyml I implemented the Select changes based on our yesterday discussion. Can you take a look?

michael-s-molina

Thanks for the PR @kgabryje. I left a couple of comments.

michael-s-molina · 2022-12-01T14:34:09Z

superset-frontend/src/components/Select/styles.tsx

+    ${
+      oneLine &&
+      `
+      .ant-select-selection-overflow {
+        flex-wrap: nowrap;
+      }
+
+      .ant-select-selection-overflow-item:not(.ant-select-selection-overflow-item-rest):not(.ant-select-selection-overflow-item-suffix) {
+        flex-shrink: 1;
+        min-width: ${theme.gridUnit * 13}px;
+      }
+
+      .ant-select-selection-overflow-item-suffix {
+        flex: unset;
+        min-width: 0px;
+      }
+    `
+    }


Suggested change

${

oneLine &&

`

.ant-select-selection-overflow {

flex-wrap: nowrap;

}

.ant-select-selection-overflow-item:not(.ant-select-selection-overflow-item-rest):not(.ant-select-selection-overflow-item-suffix) {

flex-shrink: 1;

min-width: ${theme.gridUnit * 13}px;

}

.ant-select-selection-overflow-item-suffix {

flex: unset;

min-width: 0px;

}

`

}

${

oneLine &&

`

.ant-select-selection-overflow {

flex-wrap: nowrap;

}

.ant-select-selection-overflow-item:not(.ant-select-selection-overflow-item-rest):not(.ant-select-selection-overflow-item-suffix) {

flex-shrink: 1;

min-width: ${theme.gridUnit * 13}px;

}

.ant-select-selection-overflow-item-suffix {

flex: unset;

min-width: 0px;

}

`

}

michael-s-molina · 2022-12-01T15:13:52Z

superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx

+}
+
+// TODO: use antd Tag props instead of any. Currently it's causing a typescript error
+const Tag = (props: any) => {


It seems the custom render is necessary to make oneLine work correctly so we need to move this code to the Select component.

geido · 2022-12-01T17:15:55Z

/testenv up FEATURE_HORIZONTAL_FILTER_BAR=true

github-actions · 2022-12-01T17:19:59Z

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

kgabryje · 2022-12-01T17:58:47Z

/testenv up FEATURE_HORIZONTAL_FILTER_BAR=true

github-actions · 2022-12-01T18:02:46Z

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

codyml

LGTM! One thing I noticed that can probably wait for a future PR (or left as-is) is that if there's a time filter in the overflow dropdown, clicking either of the popover buttons also closes the dropdown, which is probably not what we want:

Screen.Recording.2022-12-01.at.1.00.25.PM.mov

michael-s-molina

LGTM. Thanks for the PR!

@kgabryje Let's open a follow-up to add the same behavior for the async version 😉

michael-s-molina · 2022-12-01T20:41:05Z

LGTM! One thing I noticed that can probably wait for a future PR (or left as-is) is that if there's a time filter in the overflow dropdown, clicking either of the popover buttons also closes the dropdown, which is probably not what we want:

Good point @codyml. Let's handle that in a follow-up.

github-actions · 2022-12-01T20:41:40Z

Ephemeral environment shutdown and build artifacts deleted.

kgabryje requested review from geido and michael-s-molina November 30, 2022 14:02

pull-request-size bot added the size/M label Nov 30, 2022

kgabryje changed the title ~~Feat/horizontal native filters~~ feat(native-filters): Adjust filter components for horizontal mode Nov 30, 2022

geido reviewed Nov 30, 2022

View reviewed changes

superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx Outdated Show resolved Hide resolved

superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx Outdated Show resolved Hide resolved

kgabryje force-pushed the feat/horizontal-native-filters branch from 46808da to 3b00821 Compare December 1, 2022 14:10

kgabryje requested a review from ktmud as a code owner December 1, 2022 14:10

pull-request-size bot added size/L and removed size/M labels Dec 1, 2022

michael-s-molina reviewed Dec 1, 2022

View reviewed changes

kgabryje added 8 commits December 1, 2022 18:06

feat(native-filters): Adjust filters to horizontal mode

e943342

Bug fixes

35ac857

Change naming

8f58d36

Change font size and line height of range filter marks

b0af79c

Improve Select component with oneLine mode

9fcd4e9

Use a styled Tag component with Tooltip

7e006ce

Move custom tag logic to Select component

362848c

Fix Select's dropdown closing unexpectedly

7f114aa

kgabryje force-pushed the feat/horizontal-native-filters branch from 3b00821 to 7f114aa Compare December 1, 2022 17:06

kgabryje added 2 commits December 1, 2022 18:10

Fix indentation

441e3f8

Add license

1d38d63

codyml approved these changes Dec 1, 2022

View reviewed changes

michael-s-molina approved these changes Dec 1, 2022

View reviewed changes

michael-s-molina merged commit eb6045a into apache:master Dec 1, 2022

kgabryje mentioned this pull request Dec 9, 2022

feat: Add oneLine mode to AsyncSelect #22379

Merged

9 tasks

mistercrunch added the 🚢 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 and removed 🚢 2.1.3 labels Mar 13, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(native-filters): Adjust filter components for horizontal mode #22273

feat(native-filters): Adjust filter components for horizontal mode #22273

kgabryje commented Nov 30, 2022 •

edited

Loading

codecov bot commented Nov 30, 2022 •

edited

Loading

geido commented Nov 30, 2022

github-actions bot commented Nov 30, 2022

geido left a comment

kgabryje commented Dec 1, 2022

michael-s-molina left a comment

michael-s-molina Dec 1, 2022

kgabryje Dec 1, 2022

michael-s-molina Dec 1, 2022

kgabryje Dec 1, 2022

geido commented Dec 1, 2022

github-actions bot commented Dec 1, 2022

kgabryje commented Dec 1, 2022

github-actions bot commented Dec 1, 2022

codyml left a comment

michael-s-molina left a comment

michael-s-molina commented Dec 1, 2022

github-actions bot commented Dec 1, 2022

feat(native-filters): Adjust filter components for horizontal mode #22273

feat(native-filters): Adjust filter components for horizontal mode #22273

Conversation

kgabryje commented Nov 30, 2022 • edited Loading

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

codecov bot commented Nov 30, 2022 • edited Loading

Codecov Report

geido commented Nov 30, 2022

github-actions bot commented Nov 30, 2022

geido left a comment

Choose a reason for hiding this comment

kgabryje commented Dec 1, 2022

michael-s-molina left a comment

Choose a reason for hiding this comment

michael-s-molina Dec 1, 2022

Choose a reason for hiding this comment

kgabryje Dec 1, 2022

Choose a reason for hiding this comment

michael-s-molina Dec 1, 2022

Choose a reason for hiding this comment

kgabryje Dec 1, 2022

Choose a reason for hiding this comment

geido commented Dec 1, 2022

github-actions bot commented Dec 1, 2022

kgabryje commented Dec 1, 2022

github-actions bot commented Dec 1, 2022

codyml left a comment

Choose a reason for hiding this comment

michael-s-molina left a comment

Choose a reason for hiding this comment

michael-s-molina commented Dec 1, 2022

github-actions bot commented Dec 1, 2022

kgabryje commented Nov 30, 2022 •

edited

Loading

codecov bot commented Nov 30, 2022 •

edited

Loading