feat(explore): time picker enhancement

[zhaoyongjie]

SUMMARY

This PR introduces the new Explore Time Picker input modal that allows quick selection of various time ranges and granularities. It is an enhancement of the existing time picker in Explore, including preservation of the current library dateutil.parse, parsedatetime and adding new libraries pyparsing, python-holidays. User now can easily set any time range by either selecting a pre-defined range(e.g. Last 24 hours, Previous Calendar Month)or creating a date range formula for more specific range definition (e.g. from HOLIDAY("Christmas", dateadd(datetime("2019"), 1, year)) to DATEADD(DATETIME("TODAY"), -13, DAY))

Miro link: https://miro.com/app/board/o9J_kiQxGIU=/

Roadmap item: apache-superset/superset-roadmap#34

Features include

• Predefined Time Range Select - Last
• Predefined Time Range Select - Previous
• Relative Time Range Select
• Specific Time Range Select
• Advanced modal - support mini-language syntax(e.g. today, last week, last month); and advanced custom DateTime expression that returns Python DateTime object. parse DateTime expression syntax using pyparsing

1. Datetime([string])
   DATETIME("2020-03-01 12:00:00")
   DATETIME("now")
   DATETIME("last year")
2. Moves the given set of dates by a specified interval.
   Dateadd([datetime], [integer], [dateunit])
   dateunit = (YEAR | QUARTER | MONTH | WEEK | DAY | HOUR | MINUTE | SECOND)
   DATEADD(DATETIME("TODAY"), -13, DAY)
   DATEADD(DATETIME("2020-03-01"), 2, DAY)
3. Truncates the specified date to the accuracy specified by the date unit.
   Datetrunc([datetime], [dateunit])
4. Get the last date by the date unit
   Lastday([datetime], [dateunit])
   dateunit = (YEAR | MONTH | WEEK)
5. Holiday([string], , )
   Python-holidays library（https://github.com/dr-prodigy/python-holidays）
   HOLIDAY("new year")
   HOLIDAY("christmas", datetime("2019"))
   HOLIDAY("christmas", dateadd(datetime("2019"), 1, year))
   HOLIDAY("christmas", datetime("2 years ago"))
   HOLIDAY("Easter Monday", datetime("2019"), "UK")

• Anchor time to NOW
• Anchor time to Mid-night
• Actual Time Range display
• Actual Time Range validation
• Syntax Error message

Last Modal

Previous Modal

Custom Modal

Advanced Modal

1. dateadd function

2. datetrunc function

3. lastday function

4. holiday function

TEST PLAN

adding unit test for this function

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

[codecov-io]

Codecov Report

Merging #11418 (6e82c0b) into master (92fdf54) will decrease coverage by 3.68%.
The diff coverage is 47.61%.

@@            Coverage Diff             @@
##           master   #11418      +/-   ##
==========================================
- Coverage   66.71%   63.02%   -3.69%     
==========================================
  Files         967      970       +3     
  Lines       47543    47937     +394     
  Branches     4650     4736      +86     
==========================================
- Hits        31716    30212    -1504     
- Misses      15706    17538    +1832     
- Partials      121      187      +66     

Flag	Coverage Δ
cypress	?
javascript	62.11% <22.64%> (-0.64%)	⬇️
python	63.58% <94.15%> (-0.45%)	⬇️

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

Impacted Files	Coverage Δ
superset-frontend/src/common/components/index.tsx	100.00% <ø> (ø)
...-frontend/src/explore/components/controls/index.js	100.00% <ø> (ø)
...s/controls/DateFilterControl/DateFilterControl.tsx	15.64% <15.64%> (ø)
...ore/components/controls/DateFilterControl/types.ts	80.00% <80.00%> (ø)
superset/views/api.py	70.90% <83.33%> (+6.04%)	⬆️
superset/utils/core.py	89.85% <95.58%> (+0.59%)	⬆️
...components/controls/DateFilterControl/constants.ts	100.00% <100.00%> (ø)
superset-frontend/src/explore/dateFilterUtils.ts	100.00% <100.00%> (ø)
superset-frontend/src/SqlLab/App.jsx	0.00% <0.00%> (-100.00%)	⬇️
superset-frontend/src/explore/App.jsx	0.00% <0.00%> (-100.00%)	⬇️
... and 166 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 92fdf54...6e82c0b. Read the comment docs.

[mistercrunch]

Is this changing the behavior of the current function? We have to be mindful of the thousands of charts out there that have been built based on the current behavior.

[junlincc]

Tested it today, this feature enhancement is so AWESOME!! MANY MANY THANKS @zhaoyongjie
this is by far the best community individual collaboration!
We will update the description in a couple of days, and tune the design a bit more!

[junlincc]

many thanks to @kristw @ktmud @graceguo-supercat for reviewing this PR! 🙏🙏

[ktmud]

Yeah, CI is green! Merging with the understanding that these followups have been planned:

1. Break down control to child components
2. Extract frontend utilities to a separate module and add unit tests
3. Change modal to popover (potentially)
4. Improve typescript typing
5. Remove the validate button
6. Extract Python helpers to a separate file

Again, thanks for the great work!

[ktmud]

@zhaoyongjie Could you also confirm whether this new control work well with existing charts (i.e. any charts with existing custom time range filters)? I hope we have some test cases for them, but it's not obvious by just looking at the PR.

[zhaoyongjie]

hi @ktmud, This new control is fully compatible with the original time range string. I'll test it manually right now, on every chart

[zhaoyongjie]

@ktmud,

1. I have tested all charts manually, all can use the new time picker without problems.
2. tested all generated by load_examples -t command charts, no problems too.
3. original custom time range can mapping to "time range string" split by separator, It will be parsed by the new time range control.

[mistercrunch]