[Feat] timeline zoom & precision controls in enlarged time filter #3232
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR adds cursor-centric zoom and precise navigation to the enlarged time filter (bottom timeline):
Related issues
Addresses timeline precision and usability gaps reported in
#743, #788, #1101, #2541, and #2991.
Closes #743, #788, #3231 .
Why
Selecting narrow time intervals in the timeline has been difficult with only range handles.
This feature improves precision and usability when exploring datasets with second-level or sub-minute events.
User-facing changes
Implementation notes
time-widget.tsxtimelineDomainstate separate from the main filter range.time-range-slider.tsxonChangeon unmount to prevent lingering timers.histogram-plot.tsxisBarInRange: bar is in range if it overlaps the active window (bar.x1 > start && bar.x0 < end), ensuring consistent highlights for zoomed domains.docs/user-guides/h-playback.md)Performance & accessibility
passive: falseonly where necessary to prevent browser zoom.Backwards compatibility
timelineDomainis purely UI state.How to test
yarn install && yarn bootstrap(root), thenyarn startoryarn start:localinexamples/demo-app.Checklist
git commit -s …)yarn lint && yarn test)docs/user-guides/h-playback.md)Screenshots / GIFs
1️⃣ Wheel zoom on active window
Show how scrolling directly over the timeline zooms in/out on the visible playback window around the cursor position.

2️⃣ Pinch or Ctrl(⌘)+wheel zoom of full timeline + Reset banner
Demonstrate pinch zoom or Ctrl(⌘)+scroll zooming the entire domain, and how the “Showing … Reset” banner appears.

Show the banner’s visibility state and how clicking Reset restores the full timeline domain.
3️⃣ Keyboard panning
Demonstrate holding Ctrl(⌘) and pressing ← / → to pan, and adding Shift for larger steps.

Notes for reviewers
All changes are isolated to UI components and documentation.
No schema or public API modifications.
Focus review on timeline interaction behavior, clamping logic, and throttling performance.