Add timeline start/end markers, cursor hover, and live drag readout (ticket 031)

LogTimeline now always shows the first/last bucket's index and timestamp,
a hover readout that tracks the cursor with the bucket at/before it, and
a live-updating start/end readout while dragging a selection.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XFUNZwCvz3kcod3352ZR2o
This commit is contained in:
Hugh Kaznowski
2026-09-05 16:20:18 +01:00
co-authored by Claude Sonnet 5
parent b8a55b3caa
commit 1d1b0eee01
2 changed files with 51 additions and 43 deletions
-40
View File
@@ -1,40 +0,0 @@
# 031 — Timeline start/end markers, cursor hover, and live drag readout
## Summary
`LogTimeline` (`webapp/src/components/LogTimeline.tsx`) shows a bar per
bucket with only a per-bar `title` tooltip on native hover, and a drag
selection that's silent until `handleMouseUp` fires `onSelectRange`. Add
always-visible start/end labels, a hover readout that tracks the cursor, and
a live-updating readout while dragging.
## Scope
- **Start/end markers**: render the sequence index and timestamp of the
first and last visible bucket at the two ends of the timeline (using
`domainStart`/`domainEnd`, already computed at
`LogTimeline.tsx:52-53`), always visible, not hover-only.
- **Cursor hover readout**: on `onMouseMove` (already wired for drag at
`handleMouseMove`, `LogTimeline.tsx:65`), when not dragging, compute the
bucket at or immediately before the cursor via `xToMs` and show its
timestamp/count in a readout near the cursor — replacing reliance on the
native per-bar `title` attribute (`LogTimeline.tsx:135`).
- **Live drag readout**: while `dragging` is true (`LogTimeline.tsx:78`), show
the resolved start/end (`xToMs(dragStartX)`/`xToMs(dragCurrentX)`) updating
on every `handleMouseMove`, not just after `handleMouseUp` resolves the
final range — the drag rectangle already updates live (`selRect`,
`LogTimeline.tsx:79-84`); this adds the numeric readout next to it.
## Acceptance criteria
- The timeline always shows the sequence/timestamp of its first and last
bucket, without needing to hover.
- Moving the mouse over the timeline (not dragging) shows the timestamp/count
of the bucket under (or just before) the cursor, updating as the mouse
moves.
- While dragging, the displayed start/end timestamps update continuously as
the drag extends, matching the already-live selection rectangle.
## Depends on
None — builds on the existing `LogTimeline` drag/hover plumbing.