Skip to content

Conversation

@jmalmo
Copy link

@jmalmo jmalmo commented Oct 31, 2025

Summary

This PR adds cursor-centric zoom and precise navigation to the enlarged time filter (bottom timeline):

  • Wheel → zoom active window around cursor.
  • Pinch / hold Ctrl ( on Mac) + wheel → zoom entire timeline domain (shows a “Showing … Reset” banner with one-click reset).
  • Keyboard panCtrl/ + / (hold Shift for larger steps).
  • Window and animation stay clamped to the full data domain; updates are throttled to minimize Redux churn.

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

  • New zoom/pan interactions in the enlarged time filter only (no change to the compact side-panel slider).
  • A small “Showing … Reset” banner appears whenever the visible domain is narrowed.

Implementation notes

  • time-widget.tsx
    • Centralizes cursor-driven interactions.
    • Adds local timelineDomain state separate from the main filter range.
    • Implements wheel & pinch zoom, keyboard panning, domain/window clamping, and throttled updates (40 ms).
    • Adds “Showing … Reset” status bar with reset button.
  • time-range-slider.tsx
    • Cancels throttled onChange on unmount to prevent lingering timers.
  • histogram-plot.tsx
    • Simplifies isBarInRange: bar is in range if it overlaps the active window (bar.x1 > start && bar.x0 < end), ensuring consistent highlights for zoomed domains.
  • Docs (docs/user-guides/h-playback.md)
    • Adds a new “Zoom & precision controls” section describing wheel/pinch zoom, reset banner, and keyboard panning.

Performance & accessibility

  • Wheel/pinch events are throttled and use passive: false only where necessary to prevent browser zoom.
  • Keyboard navigation (Ctrl/ + arrow keys, Shift for larger steps) improves accessibility.
  • All logic is isolated to the enlarged widget; no impact on saved configs or GPU filtering.

Backwards compatibility

  • No schema or API changes.
  • timelineDomain is purely UI state.
  • Saved maps load without modification.

How to test

  1. yarn install && yarn bootstrap (root), then yarn start or yarn start:local in examples/demo-app.
  2. Load a dataset with a timestamp column (e.g., second-level events).
  3. Add a Time filter, click Enlarge (bottom timeline).
  4. Try:
    • 🖱️ Wheel to zoom the window.
    • 🤏 Pinch or hold Ctrl/ + wheel to zoom the timeline domain.
    • ⌨️ Ctrl/ + / to pan (hold Shift for larger steps).
    • Click Reset to restore the full domain.
  5. Verify histogram highlights and playback behavior remain consistent.

Checklist

  • DCO sign-off on all commits (git commit -s …)
  • Lint & tests pass (yarn lint && yarn test)
  • Docs updated (docs/user-guides/h-playback.md)
  • Manual QA with dense, second-level datasets
  • No breaking changes

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.
kepler-scroll-gif

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.
kepler-gif-zoom

3️⃣ Keyboard panning

Demonstrate holding Ctrl(⌘) and pressing ← / → to pan, and adding Shift for larger steps.
kepler-gif-arrow-panning


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.

support wheel zoom on the selected window, pinch/Ctrl+scroll zoom on the full timeline, and Ctrl/Cmd + arrow key panning
show a lightweight “Showing … Reset” indicator whenever the timeline is narrowed, keeping animation and selection in sync
retain histogram styling while aligning bar highlights with the chosen range
document the streamlined zoom, reset, and keyboard controls in the playback guide

Signed-off-by: Jakob Malmo <[email protected]>
@igorDykhta igorDykhta self-requested a review October 31, 2025 00:24
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