Add hour range time picking UI

[MadLittleMods]

Add hour range time picking UI

Related to https://github.com/matrix-org/matrix-public-archive/issues/3

Probably just something simple like the Gitter UI:

/<community>/<room>/archives/2021/02/09/0-1

Problems

How can we deal with a massive amount of messages? An hour chunk could easily contain 100, 500 messages which reaches our limit. Do we keep scaling the time increment down until we fit in the message limit?

How do we scale the UI when there are 500 messages per each second? How does the URL scale/represented at those small time increments? Perhaps we give up at a certain increment.

Perhaps a nice sliding window to scrub along the timeline of a day. The window size is based on what we could render on the current page which can be moved anywhere else in the day. If the density of messages changes on the next page, then the window size will adjust for them to continue. We can always truncate the window short to what fits on the page.

Potential solution

URL structure: /r/test-room1:my.synapse.server/date/2022/11/11T12:05

• Similar to new Date().toISOString() -> 2022-11-14T22:41:14.721Z

This will show messages from that time backwards until we reach the message limit.

We can show UI like this to pick a time in UTC and have them easily compare to their local timezone.

https://dribbble.com/shots/14590546-Time-Zone-Translate

Design exploration

• Timeline scrubbing
• Time range selection
• Time series navigator
• Time slice
• Sliding window of time
• Time drilldown

---

Jaeger tracing UI:

https://dribbble.com/shots/5502990-Time-Scrubber

https://dribbble.com/shots/14590546-Time-Zone-Translate

https://dribbble.com/shots/4777436-Time-zone-translate

https://ux.stackexchange.com/a/122023/19575

https://codepen.io/thebabydino/pen/qByGqOm

https://codepen.io/nicolasjesenberger/pen/KKGJgWr

• https://ux.stackexchange.com/questions/113819/best-design-for-time-range-filter
• https://ux.stackexchange.com/questions/82634/date-time-picker-for-small-ranges
• https://ux.stackexchange.com/questions/122017/what-do-you-call-the-date-range-slider-bar-underneath-a-time-series-chart

[MadLittleMods]

Another interesting resource: https://open-ui.org/components/datepicker.research/ (mostly date picker vs time picker stuff though)