41 lines
1.9 KiB
Markdown
41 lines
1.9 KiB
Markdown
# 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.
|