feat: allow click+drag panning and zooming and horizontal scrolling o…

[karl-power]

Summary

Closes HDX-3527

• Allows zooming and panning the trace timeline viewer with the mouse by clicking and dragging (Y axis for zoom, X axis for pan).
• Allows scrolling horizontally as well as vertically.

Screenshots or video

Untitled.mov

How to test locally or on Vercel

1. Open the trace viewer and click and drag.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hyperdx-oss	Ready	Preview, Comment	Mar 5, 2026 0:48am

[changeset-bot]

⚠️ No Changeset found

Latest commit: aad9127

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

Claude finished @karl-power's task in 22s —— View job

---

PR Review

✅ No critical issues found.

A few minor observations:

• ⚠️ useDrag.ts:25 — The pointermove listener captures onDragMove at creation time via closure (e => onDragMove?.(e)), but since onDragMove comes from useStableCallback this is safe. However, onDragEnd similarly captures abortController.current at closure time — this works correctly because abort() is called on the same controller instance that was captured.

• ℹ️ useDrag.ts:13 — useRef<AbortController>(undefined) could be typed as useRef<AbortController | undefined>(undefined) for better explicitness, but this is a minor style point.

• ℹ️ TimelineChart.tsx:104 — The panning sensitivity 0.125 / scale is a magic number — a named constant would help readability, but not blocking.

• ℹ️ TimelineChart.tsx:109 — Zoom sensitivity 0.01 is also a magic number. Consider ZOOM_SENSITIVITY constant.

[github-actions]

Claude finished @karl-power's task in 1m 6s —— View job

---

PR Review

✅ No critical bugs. Two items worth addressing:

• ⚠️ useDrag.ts:27-38 — Missing pointercancel handler. If a drag is interrupted (e.g., browser takes over pointer capture), pointerup won't fire and the pointermove listener stays active indefinitely. → Add document.addEventListener('pointercancel', abortController.abort.bind(abortController), { signal: abortController.signal }) or handle pointercancel alongside pointerup. Fix this →

• ⚠️ TimelineChart.tsx:144 — The wheel event listener is registered without { passive: false }, so e.preventDefault() can't be called (and isn't called). On trackpads, horizontal scroll (deltaX) will pan the timeline and scroll the page simultaneously. → Register as { passive: false } and call e.preventDefault() when deltaX !== 0. Fix this →

[github-actions]

E2E Test Results

✅ All tests passed • 87 passed • 3 skipped • 895s

Status	Count
✅ Passed	87
❌ Failed	0
⚠️ Flaky	1
⏭️ Skipped	3

Tests ran across 4 shards in parallel.

View full report →