Skip to content

[DRAFT] [web-shared] Auto-scroll trace viewer on J/K span navigation#2366

Draft
mitul-s wants to merge 2 commits into
mainfrom
c-ms/jk-nav-autoscroll
Draft

[DRAFT] [web-shared] Auto-scroll trace viewer on J/K span navigation#2366
mitul-s wants to merge 2 commits into
mainfrom
c-ms/jk-nav-autoscroll

Conversation

@mitul-s

@mitul-s mitul-s commented Jun 11, 2026

Copy link
Copy Markdown
Contributor

Summary

  • When navigating spans in the trace viewer with the J (next) / K (prev) keys — or the up/down chevron buttons — the view now auto-scrolls so the newly-selected span is revealed if it falls outside the visible area.
  • The event list is windowed with fixed-height (ROW_HEIGHT_PX) rows, so off-screen rows have no DOM node to scrollIntoView. The target scroll offset is computed from the span's row index within the shared SplitPane scroll container, scrolling just enough to reveal it plus one row of margin (block: 'nearest'-style).
  • Respects useReducedMotion (auto vs smooth scroll behavior).

Changes

  • packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx

Test plan

  • Open a trace with more spans than fit on screen.
  • Press J/K repeatedly and confirm the selection scrolls into view at both the top and bottom edges.
  • Confirm the up/down chevron buttons behave the same.
  • With reduced motion enabled, confirm scrolling is instant.

Made with Cursor

Bring the selected span into view when J/K (or the up/down chevrons)
navigate to a span outside the visible area. The event list is windowed
with fixed-height rows, so the target offset is computed from the row
index rather than relying on a DOM node that may not be mounted.

Co-authored-by: Cursor <cursoragent@cursor.com>
@mitul-s mitul-s requested a review from a team as a code owner June 11, 2026 17:47
@vercel

vercel Bot commented Jun 11, 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 Jun 11, 2026 6:09pm
example-nextjs-workflow-webpack Ready Ready Preview, Comment Jun 11, 2026 6:09pm
example-workflow Ready Ready Preview, Comment Jun 11, 2026 6:09pm
workbench-astro-workflow Ready Ready Preview, Comment Jun 11, 2026 6:09pm
workbench-express-workflow Ready Ready Preview, Comment Jun 11, 2026 6:09pm
workbench-fastify-workflow Ready Ready Preview, Comment Jun 11, 2026 6:09pm
workbench-hono-workflow Ready Ready Preview, Comment Jun 11, 2026 6:09pm
workbench-nitro-workflow Ready Ready Preview, Comment Jun 11, 2026 6:09pm
workbench-nuxt-workflow Ready Ready Preview, Comment Jun 11, 2026 6:09pm
workbench-sveltekit-workflow Ready Ready Preview, Comment Jun 11, 2026 6:09pm
workbench-tanstack-start-workflow Ready Ready Preview, Comment Jun 11, 2026 6:09pm
workbench-vite-workflow Ready Ready Preview, Comment Jun 11, 2026 6:09pm
workflow-docs Building Building Preview, Comment, Open in v0 Jun 11, 2026 6:09pm
workflow-swc-playground Ready Ready Preview, Comment Jun 11, 2026 6:09pm
workflow-tarballs Ready Ready Preview, Comment Jun 11, 2026 6:09pm
workflow-web Ready Ready Preview, Comment Jun 11, 2026 6:09pm

@changeset-bot

changeset-bot Bot commented Jun 11, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 9d5c167

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 Patch
@workflow/web Patch
@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

@mitul-s mitul-s changed the title [web-shared] Auto-scroll trace viewer on J/K span navigation [DRAFT] [web-shared] Auto-scroll trace viewer on J/K span navigation Jun 11, 2026
@mitul-s mitul-s marked this pull request as draft June 11, 2026 17:51
Relocate the J/K auto-scroll geometry math out of the large
NewTraceViewerContent component and into a small pure helper colocated
with the windowing primitives in use-row-window.ts. scrollRowIntoView
reuses the existing getScrollParent walker and takes the row height as a
parameter, so the trace viewer's scrollSpanIntoView is now a thin caller
that finds the span index and delegates.

No behavior change: the off-screen-only condition, one-row margin,
clamp to [0, scrollHeight - clientHeight], and reduced-motion behavior
are all preserved. getScrollParent(#event-list) resolves to the same
SplitPane scroll container the old code measured against directly, so
the net scroll geometry is identical.

Co-authored-by: Cursor <cursoragent@cursor.com>
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