feat: New time range label #22317

kgabryje · 2022-12-02T15:33:51Z

SUMMARY

This PR implements the new design for time range pill. Functionality wise it works the same as before, except that I added additional tooltip when the label is truncated.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Screen.Recording.2022-12-02.at.16.28.07.mov

TESTING INSTRUCTIONS

Test the new time range pill in native filters (horizontal and vertical), in native filters config modal and in Explore adhoc filters.

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

superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx

codecov · 2022-12-02T16:24:06Z

Codecov Report

Merging #22317 (de426c3) into master (7bc5f04) will decrease coverage by 0.01%.
The diff coverage is 57.14%.

@@            Coverage Diff             @@
##           master   #22317      +/-   ##
==========================================
- Coverage   66.89%   66.87%   -0.02%     
==========================================
  Files        1847     1847              
  Lines       70333    70422      +89     
  Branches     7702     7726      +24     
==========================================
+ Hits        47047    47093      +46     
- Misses      21288    21327      +39     
- Partials     1998     2002       +4

Flag	Coverage Δ
javascript	`53.80% <57.14%> (-0.01%)`	⬇️

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

Impacted Files	Coverage Δ
...d/src/filters/components/Time/TimeFilterPlugin.tsx	`0.00% <0.00%> (ø)`
...nts/controls/DateFilterControl/DateFilterLabel.tsx	`55.31% <33.33%> (-2.83%)`	⬇️
...ontrols/DateFilterControl/components/DateLabel.tsx	`100.00% <100.00%> (ø)`
...eModal/DatabaseConnectionForm/CommonParameters.tsx	`76.92% <0.00%> (-8.80%)`	⬇️
...t-frontend/src/dashboard/reducers/nativeFilters.ts	`40.74% <0.00%> (-3.26%)`	⬇️
...rontend/src/components/DropdownContainer/index.tsx	`72.83% <0.00%> (-2.17%)`	⬇️
...ilters/FilterBar/FilterControls/FilterControls.tsx	`68.62% <0.00%> (-1.59%)`	⬇️
...c/views/CRUD/data/database/DatabaseModal/index.tsx	`41.27% <0.00%> (-0.72%)`	⬇️
...d/components/DashboardBuilder/DashboardBuilder.tsx	`73.58% <0.00%> (-0.71%)`	⬇️
...t-frontend/src/dashboard/actions/dashboardState.js	`52.45% <0.00%> (-0.50%)`	⬇️
... and 32 more

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

michael-s-molina · 2022-12-02T16:27:52Z

superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx

        } else {
+          const tooltipTitle = labelIsTruncated ? (
+            <>


Is this fragment necessary?

Nope! Removed

michael-s-molina · 2022-12-02T16:30:18Z

superset-frontend/src/explore/components/controls/DateFilterControl/components/DateLabel.tsx

+};
+
+// This is the color that antd components (such as Select or Input) use on hover
+// TODO: use theme.colors.primary.base here and in antd components


Can we just set it as the primary color already?

I did initially, but when this component is placed next to antd components (which is the case in the filter bar), you can see the color difference when you hover. We could override antd's border colors on hover, but I'd rather we do it as a separate task since we'd need to take care of many antd components

Makes sense. Thanks for the context!

michael-s-molina · 2022-12-02T16:42:14Z

There's no red border indicating a validation error.

Screen.Recording.2022-12-02.at.11.40.02.AM.mov

villebro · 2022-12-02T17:16:45Z

I love the new design! ❤️ I will look more closely later today/the weekend if this isn't merged before then.

kgabryje · 2022-12-02T18:29:02Z

Well spotted @michael-s-molina! Fixed + I cleaned up some old css

kgabryje · 2022-12-02T18:29:30Z

@eric-briscoe could you review as well please?

codyml

LGTM! I opened a PR to help with a tooltip bug caused by the useCSSTextTruncation hook that shows up in this PR, but it's not related to this PR's code so no need to include here. I also noticed the same thing as in a previous PR about popovers for filters in the overflow dropdown, where clicking Cancel or Apply closes the overflow dropdown preemptively, but we already talked about fixing that in a separate PR.

zhaoyongjie

Leave some comments about the style and design. The new Date Label is better than before. Thanks for the improvement!

zhaoyongjie · 2022-12-03T09:06:52Z

superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx

-      setTooltipTitle(NO_TIME_RANGE);
+      setTooltipTitle(null);


NO_TIME_RANGE represents a time filter constant, which means No filter in the time filter, so I think the original tooltip title should be kept.

We want tooltip to display the label text if label is truncated + the actual time range of it's different than human readable label.
In the case of no filter both the label and the tooltip said "No filter" which was redundant.

zhaoyongjie · 2022-12-03T09:25:39Z

superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx

        } else {
+          const tooltipTitle = labelIsTruncated ? (


Here, the tooltip title is either HRT(human-readable text) or ADR(actual date time range). I know the design goal is when the value is truncated, the untruncated value should be displayed in the tooltip title. In practice, the effect is weird, --- there are multiple lines but I don't know which one is HRT, and which one is ADR.

BTW, the width of the tooltips seems too narrow.

Yeah in the case from your screenshot it looks weird. However, when ADR is difficult to read (like DATEADD expressions) and the HRT is cut, I think adding HRT to the tooltip is useful for the user. I'll increase the spacing between HRT and ADR in the tooltip to make it easier to read

kgabryje · 2022-12-05T12:07:57Z

/testenv up FEATURE_HORIZONTAL_FILTER_BAR=true

github-actions · 2022-12-05T12:10:48Z

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

villebro · 2022-12-05T14:33:25Z

When I create a "Last Year" filter, the popover shows the actual range ("...< col < ...")

However, hovering doesn't show the actual range:

But when I do a filter that overflows, it shows the tooltip with the actual range, twice:

I assume it should work as follows:

the tooltip should always show the actual range
The duplicate tooltip should probably be disabled

kgabryje · 2022-12-05T14:43:12Z

@villebro Thanks for review!
I don't think we display a tooltip for "Last year" in the current date pill either. Moreover, there's a bug which causes the tooltip related to previous selection to appear.

Screen.Recording.2022-12-05.at.15.41.27.mov

As for the "double" tooltip... that looks like html title. I'll try to remove it

kgabryje · 2022-12-05T15:22:07Z

@villebro Added tooltip with actual range for Last/Previous frames

Unfortunately the double tooltip is a Safari "feature" - Safari adds it automatically for truncated texts :(

villebro

LGTM!

github-actions · 2022-12-05T18:46:36Z

Ephemeral environment shutdown and build artifacts deleted.

kgabryje added 2 commits December 2, 2022 15:51

feat: Implement new time range label

4ba0271

Add tooltip when label is truncated

945c606

kgabryje requested review from zhaoyongjie, villebro, geido and michael-s-molina December 2, 2022 15:33

pull-request-size bot added the size/L label Dec 2, 2022

zhaoyongjie reviewed Dec 2, 2022

View reviewed changes

superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx Outdated Show resolved Hide resolved

Fix import

c1d9250

michael-s-molina reviewed Dec 2, 2022

View reviewed changes

Remove unnecessary Fragment

edc5b05

Add error border

95e473e

codyml mentioned this pull request Dec 3, 2022

fix: Broken effect in useCSSTextTruncation hook #22324

Merged

9 tasks

codyml approved these changes Dec 3, 2022

View reviewed changes

zhaoyongjie self-requested a review December 3, 2022 09:31

zhaoyongjie reviewed Dec 3, 2022

View reviewed changes

Add spacing in tooltip

d80edd2

apache deleted a comment from villebro Dec 5, 2022

Added actual range tooltip to Last/Previous frames

de426c3

villebro approved these changes Dec 5, 2022

View reviewed changes

kgabryje merged commit 2d30e9c into apache:master Dec 5, 2022

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: New time range label #22317

feat: New time range label #22317

kgabryje commented Dec 2, 2022

codecov bot commented Dec 2, 2022 •

edited

Loading

michael-s-molina Dec 2, 2022

kgabryje Dec 2, 2022

michael-s-molina Dec 2, 2022

kgabryje Dec 2, 2022

michael-s-molina Dec 2, 2022

michael-s-molina commented Dec 2, 2022

villebro commented Dec 2, 2022

kgabryje commented Dec 2, 2022

kgabryje commented Dec 2, 2022

codyml left a comment

zhaoyongjie left a comment •

edited

Loading

zhaoyongjie Dec 3, 2022

kgabryje Dec 3, 2022

zhaoyongjie Dec 3, 2022

kgabryje Dec 3, 2022 •

edited

Loading

kgabryje commented Dec 5, 2022

github-actions bot commented Dec 5, 2022

villebro commented Dec 5, 2022

kgabryje commented Dec 5, 2022

kgabryje commented Dec 5, 2022

villebro left a comment

github-actions bot commented Dec 5, 2022

feat: New time range label #22317

feat: New time range label #22317

Conversation

kgabryje commented Dec 2, 2022

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

codecov bot commented Dec 2, 2022 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

michael-s-molina commented Dec 2, 2022

villebro commented Dec 2, 2022

kgabryje commented Dec 2, 2022

kgabryje commented Dec 2, 2022

codyml left a comment

Choose a reason for hiding this comment

zhaoyongjie left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kgabryje Dec 3, 2022 • edited Loading

Choose a reason for hiding this comment

kgabryje commented Dec 5, 2022

github-actions bot commented Dec 5, 2022

villebro commented Dec 5, 2022

kgabryje commented Dec 5, 2022

kgabryje commented Dec 5, 2022

villebro left a comment

Choose a reason for hiding this comment

github-actions bot commented Dec 5, 2022

codecov bot commented Dec 2, 2022 •

edited

Loading

zhaoyongjie left a comment •

edited

Loading

kgabryje Dec 3, 2022 •

edited

Loading