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:
co-authored by
Claude Sonnet 5
parent
b8a55b3caa
commit
1d1b0eee01
@@ -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.
|
||||
Reference in New Issue
Block a user