Feat: Super Pill and Range Picker

[briangregoryholmes]

This PR incorporates a variety of updates related to the new Time Super Pill. It started as a refactor of the calendar picker, the original description of which can be seen below.

This implementation has been put together with the Time Control store refactor in mind, but sticks to the existing state, pulling only a few helpers or types from the new time controls file. As such, a few things that have just been copied verbatim into new locations will be simplified when integrated with the new store.

To Do:

• Add custom range selection to comparison (needs feedback)
• Resolve UI issues with narrower screens (feedback welcome)
• Ensure implementation matches Figma as close as possible
• Move subrange to Zoom button
• Consider solutions to button shifting issue (based on changing range strings)
• Update tests
• Add comparison selector to Time Series view

Out of Scope:

• Resolve inclusive/exclusive date display issues (pre-existing in app)
• Add zoom functionality from PRD (likely out of scope for this PR)

---

This PR is a feature-complete, but WIP proposal (initially started with #3824) that both updates the TimeRangeSelector and TimeComparisonSelector menus to the new ShadCN components and makes a related and technically necessary change to our date picker implementation. Additionally, there is some simplification being done in preparation for the refactor of the time control state management.

Looking for experience passes around the new UX, technical review (mostly around date handling), design input and general feedback.

• Removes the use of Litepicker
• Adds custom Month and Calendar components
• Removes the use of domain-less text fields as a secondary form of input
• Adds Select components from ShadCN
• Uses dropdown UI elements for month, day and year selection
• Adds the ability to nudge the selection by different time grains
• Fixes a critical bug that would extend the selected range by one day
• Explicitly labels the start and end dates as inclusive/exclusive

Tagging @mindspank and @jkhwu

Closes: #3808

[ericpgreen2]

As mentioned in check-in, first @mindspank will review the UX. After his green light, one of @AdityaHegde / @djbarnwal / myself will do the code review.

[ericpgreen2]

Code looks good. I see @jkhwu just finalized the Time "Superpill" PRD, so I think her UX feedback will be important.

[jkhwu]

Thanks for your patience, here are my thoughts:

1. Those little step buttons at the bottom felt a bit buggy, and they may not be necessary. Sometimes (esp after changing the dates manually), those arrow buttons only changed one of the dates, and once when I tried stepping by year it didn't work for either date. Sometimes the year stepper lets you get to a year much further in the future than the dropdown selectors allow. I'd prefer omitting those buttons for now.

2. When using the calendar layout to click on dates, I found myself frequently entering this state (where the start date was after the end date). Could we simply disallow this from ever happening so I don't trigger a bunch of errors by clicking dates? I propose that instead of entering this state, we simply assume that the earlier selected date is always the start date. Would that be possible?
   

3. Could we set the extended calendar panel to not move around? When trying to advance the months using the arrows, I kept closing the panel by accident because the arrow moves around depending on how many days are in the month. Would be nice to keep those arrows fixed in place.
   

Just a note in response to Eric's comment that this component will remain available even after we implement the time super-pill concept, so would be great to spend the time polishing its usability.

[jkhwu]

4. Another thought: this menu is getting quite long especially for people viewing on laptops. We could probably move the bottom content into the extended calendar picker pane, which would shorten the menu and also hide the apply button unless it's actually necessary.

[jkhwu]

https://www.notion.so/rilldata/UXQA-Time-superpill-d7ed5d224f4e4a829bf588eb3ee27d82?pvs=4
^ Where @ericpgreen2 and I have started listing things from experience pass

[mindspank]

Adding some comments to the same list

[mindspank]

@ericpgreen2 @briangregoryholmes Are we splitting timeseries exports into its own issue?

[djbarnwal]

Kapture.2024-05-22.at.15.22.49.mp4

The date picker does not work as expected for me. It gives me the full date range for my timezone (IST) but for other timezones, it again gives me the range according to IST.

[ericpgreen2]

UXQA –

• Given the super pill can turn on a time range comparison, I'd expect to be able to turn off a time range comparison. It feels weird to have to go somewhere else to do the inverse operation, and I initially had trouble finding how to do it. One idea – maybe we shouldn't display "vs [comparison period]" when there's no comparison, and maybe there should be explicit "add time comparison" / "remove time comparison" (icon) buttons. @jkhwu, @mindspank? (Update: I just saw the conversation in the UXQA doc. We can continue the conversation there.)

• With "All time" selected:

  • I'd expect the "Pan time range back" button to be disabled.
  • Clicking/enabling the comparison "custom period" doesn't seem to do anything meaningful