Skip to content

Timeline: show full date/time, add Today, and tidy the header and layer list - #478

Draft
sandesh-sp wants to merge 3 commits into
feature/475-timeline-scrubber-followfrom
feature/477-timeline-header-polish
Draft

sandesh-sp wants to merge 3 commits into
feature/475-timeline-scrubber-followfrom
feature/477-timeline-header-polish

Conversation

@sandesh-sp

@sandesh-sp sandesh-sp commented Sep 22, 2026

Copy link
Copy Markdown
Collaborator

Purpose

Make the timeline header always show the exact instant on the map, add a quick way back to the present, and tidy the header and layer list layout.

Stacked on feature/475-timeline-scrubber-follow (#476). Merge #476 first, then retarget this to development.

Proposed Changes

  • [CHANGE] The current time always reads to the minute in UTC, e.g. Jun 15, 2024 · 09:41 UTC, whatever the granularity.
  • [CHANGE] The date popover always offers the full picker: a day calendar with month and year fields, plus a time input. The Comparison panel shares this picker but still gets its own format and picker, so it is unchanged.
  • [CHANGE] In the day calendar, the month field is a dropdown listing all twelve months; months with no part inside the range are disabled. The month arrows carry across the year boundary (Dec → Jan of the next year and back), still stopping at the range ends.
  • [CHANGE] The day grid always spans six rows, so the popover keeps one height and the month/year controls don't move as the month changes. The Comparison panel shares this calendar and gets both calendar changes.
  • [ADD] A Today action between the date and "Compare date" moves to the current UTC minute. It is disabled when now falls outside the timeline range.
  • [ADD] Dividers split the toolbar into zoom | info | collapse. The zoom divider hides with the zoom controls when the timeline is collapsed. The zoom group no longer carries its own trailing space, so each divider sits evenly between its neighbours.
  • [CHANGE] The granularity selector is a native dropdown next to the playback controls, with the same options. This is a layout change only; what granularity drives is unchanged and will be a separate issue.
  • [CHANGE] The header groups wrap onto more rows when the panel is too narrow, with space after "Compare date" so the dropdown doesn't collide with it.
  • [CHANGE] Layer list: names are 12px and regular weight (theme tokens), the sidebar is 240px (150px on narrow screens, up from 160/100), and rows are 22px tall (up from 20). Chart rows share the row height, so names stay level with their bars.
  • [CHANGE] Range bars are at least 6px wide, up from 2px. A bar widened to the minimum is centred on its span, so an instant sits under the scrubber.

Issues

Testing

  • npx vitest run src/essence/Tools/Timeline src/essence/Tools/Comparison: 17 files, 357 tests pass. Tests cover the full readout under every granularity, Today (current minute, disabled out of range, placement), the dropdown's placement and options, the toolbar dividers, the month dropdown and year rollover, and minimum bar width and centring.
  • tsc --noEmit: no errors in the Timeline files.
  • Not yet checked in the browser: the header wrapping on a narrow panel, the dropdown's look beside the playback controls, and the calendar holding six rows (jsdom does no layout).

The header reads and picks the current time to the minute whatever the
granularity, and a Today action moves to the current minute when it falls
inside the range. The granularity becomes a dropdown beside the playback
controls, a divider follows the zoom controls, and the header groups wrap
onto further rows when the panel is too narrow.

The layer list is wider with larger, regular-weight names, and range bars
are drawn at least 6px wide, centred on their span.

Implements #477
…acing

The zoom group no longer carries its own trailing space, so each toolbar
divider sits evenly between its neighbours.
@sandesh-sp
sandesh-sp marked this pull request as draft September 22, 2026 20:37
The month field is a dropdown of all twelve months, with those outside
the range disabled, and its arrows carry across the year boundary. The
day grid always spans six rows so the month and year controls stay put
as the month changes.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant