Skip to content

feat(web-shared): Alt+hover span measurement in the new trace viewer#2985

Open
mitul-s wants to merge 2 commits into
mainfrom
ms/alt-delta-2
Open

feat(web-shared): Alt+hover span measurement in the new trace viewer#2985
mitul-s wants to merge 2 commits into
mainfrom
ms/alt-delta-2

Conversation

@mitul-s

@mitul-s mitul-s commented Jul 17, 2026

Copy link
Copy Markdown
Contributor

Figma-style measurement in the new trace viewer: with a span selected, hold Alt and hover any other row to see the time delta between the two spans, drawn as a single measurement line.

CleanShot.2026-07-17.at.11.26.19.mp4

How it works

  • Selection + Alt + hover → one measurement between the selected (anchor) span and the hovered row's span: a stub + vertical guide off the anchor bar's measured edge, elbowing into a 1px line that ends at the hovered span's start, with a duration chip.
  • Delta rule: disjoint spans → gap (anchor end → later start, same semantic as the existing sibling gaps); overlapping/contained spans → start-to-start offset ("how far into the run did this step start").
  • No selection → the existing all-consecutive-gaps overlay, restyled to the same measurement-line design (the old I-beam + pill DeltaIndicator is deleted; both modes render through one DeltaMeasureLine component).
  • Edges clamped by the viewport keep the true duration in the label; if the hovered span is fully off-screen, the line stops short of the row's edge arrow.

Implementation

  • New pure computeSpanDelta() in utils.ts next to computeSpanGaps, unit-tested (disjoint both directions, overlap, containment, identical starts, zero-duration, clamping, off-screen).
  • Hovered row derived from clientY in the existing timeline mousemove handler (now a single TimelineHover {fraction, rowIndex} state) — no per-row listeners, TimelineBar memoization untouched.
  • Overlay renders in the existing absolute, pointer-events-none layer, so it works across virtualized rows.

Replaces #2976 (was opened from the wrong branch and included stale commits).

🤖 Generated with Claude Code

@mitul-s
mitul-s requested review from a team and ijjk as code owners July 17, 2026 15:37
@changeset-bot

changeset-bot Bot commented Jul 17, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 5e8c292

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 16 packages
Name Type
@workflow/web-shared Minor
@workflow/web Minor
@workflow/cli Patch
@workflow/nitro Patch
workflow Patch
@workflow/world-testing Patch
@workflow/nuxt Patch
@workflow/core Patch
@workflow/builders Patch
@workflow/next Patch
@workflow/vitest Patch
@workflow/astro Patch
@workflow/nest Patch
@workflow/rollup Patch
@workflow/sveltekit Patch
@workflow/vite Patch

Not sure what this means? Click here to learn what changesets are.

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

@vercel

vercel Bot commented Jul 17, 2026

Copy link
Copy Markdown
Contributor

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

Project Deployment Actions Updated (UTC)
example-nextjs-workflow-turbopack Ready Ready Preview, Comment Jul 17, 2026 3:41pm
example-nextjs-workflow-webpack Ready Ready Preview, Comment Jul 17, 2026 3:41pm
example-workflow Ready Ready Preview, Comment Jul 17, 2026 3:41pm
workbench-astro-workflow Ready Ready Preview, Comment Jul 17, 2026 3:41pm
workbench-express-workflow Ready Ready Preview, Comment Jul 17, 2026 3:41pm
workbench-fastify-workflow Ready Ready Preview, Comment Jul 17, 2026 3:41pm
workbench-hono-workflow Ready Ready Preview, Comment Jul 17, 2026 3:41pm
workbench-nitro-workflow Ready Ready Preview, Comment Jul 17, 2026 3:41pm
workbench-nuxt-workflow Ready Ready Preview, Comment Jul 17, 2026 3:41pm
workbench-sveltekit-workflow Ready Ready Preview, Comment Jul 17, 2026 3:41pm
workbench-tanstack-start-workflow Ready Ready Preview, Comment Jul 17, 2026 3:41pm
workbench-vite-workflow Ready Ready Preview, Comment Jul 17, 2026 3:41pm
workflow-docs Ready Ready Preview, Comment, Open in v0 Jul 17, 2026 3:41pm
workflow-swc-playground Ready Ready Preview, Comment Jul 17, 2026 3:41pm
workflow-tarballs Ready Ready Preview, Comment Jul 17, 2026 3:41pm
workflow-web Ready Ready Preview, Comment Jul 17, 2026 3:41pm

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.

1 participant