Skip to content

feat(timeline): add keyboard and scroll panning support#777

Open
TimeToBuildBob wants to merge 1 commit intoActivityWatch:masterfrom
TimeToBuildBob:feat/timeline-keyboard-panning
Open

feat(timeline): add keyboard and scroll panning support#777
TimeToBuildBob wants to merge 1 commit intoActivityWatch:masterfrom
TimeToBuildBob:feat/timeline-keyboard-panning

Conversation

@TimeToBuildBob
Copy link
Contributor

@TimeToBuildBob TimeToBuildBob commented Feb 27, 2026

Summary

  • Enable horizontal scroll/swipe panning via horizontalScroll: true
  • Add keyboard navigation (arrow keys to pan, +/- to zoom) via keyboard: { enabled: true }
  • Update hint text to reflect new controls
  • Vertical scroll still zooms as before (no modifier key required)

All features use vis-timeline's built-in options — no custom event handling needed.

Supersedes #535 (which only adds horizontalScroll; this PR also adds keyboard navigation).

Closes #629

Test plan

  • Verify horizontal scroll/swipe pans the timeline
  • Verify vertical scroll still zooms in/out
  • Click on the timeline to focus it, then verify arrow keys pan left/right
  • Verify +/- keys zoom in/out when timeline is focused
  • Verify drag-to-pan still works
  • Verify hint text updated

Copy link
Contributor

@ellipsis-dev ellipsis-dev bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Important

Looks good to me! 👍

Reviewed everything up to 34f6a74 in 20 seconds. Click for details.
  • Reviewed 31 lines of code in 2 files
  • Skipped 0 files when reviewing.
  • Skipped posting 0 draft comments. View those below.
  • Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

Workflow ID: wflow_9EkIOUlmTfFf0nlr

You can customize Ellipsis by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.

Enable horizontal scroll/swipe panning and keyboard navigation
(arrow keys to pan, +/- to zoom) using vis-timeline's built-in options.
Vertical scroll still zooms as before. Supersedes ActivityWatch#535.

Closes ActivityWatch#629
@TimeToBuildBob TimeToBuildBob force-pushed the feat/timeline-keyboard-panning branch from 34f6a74 to 3164ae0 Compare February 27, 2026 22:19
@greptile-apps
Copy link
Contributor

greptile-apps bot commented Feb 27, 2026

Greptile Summary

Enhanced timeline navigation by enabling vis-timeline's built-in keyboard and scroll features. Changes the default scroll behavior from zoom to horizontal pan (zoom now requires Ctrl+scroll), adds arrow key panning, and +/- zoom shortcuts.

  • Enabled horizontalScroll: true for mouse wheel horizontal panning
  • Set zoomKey: 'ctrlKey' to require Ctrl+scroll for zooming
  • Enabled keyboard navigation with keyboard: { enabled: true } for arrow keys and +/- zoom
  • Updated hint text to reflect new controls: "Scroll to pan, Ctrl+scroll to zoom, arrow keys to navigate"

Clean implementation using native vis-timeline options (v7.5.0) with no custom event handling needed. Addresses issue #629.

Confidence Score: 5/5

  • This PR is safe to merge with minimal risk
  • Clean implementation using vis-timeline's built-in configuration options with no custom logic, minimal code changes (2 files, ~10 lines), and proper documentation updates. No syntax errors, security concerns, or logical issues identified.
  • No files require special attention

Important Files Changed

Filename Overview
src/views/Timeline.vue Updated hint text to accurately reflect new scroll/keyboard controls
src/visualizations/VisTimeline.vue Added vis-timeline built-in options for horizontal scrolling, Ctrl+zoom, and keyboard navigation

Last reviewed commit: 3164ae0

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

2 files reviewed, no comments

Edit Code Review Agent Settings | Greptile

@codecov
Copy link

codecov bot commented Feb 27, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 25.71%. Comparing base (1db85aa) to head (3164ae0).

Additional details and impacted files
@@           Coverage Diff           @@
##           master     #777   +/-   ##
=======================================
  Coverage   25.71%   25.71%           
=======================================
  Files          30       30           
  Lines        1750     1750           
  Branches      307      320   +13     
=======================================
  Hits          450      450           
+ Misses       1278     1234   -44     
- Partials       22       66   +44     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

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.

Support quicker timeline panning

1 participant