feat(preprod): Add SnapshotListView virtualized list component by NicoHinderling · Pull Request #113992 · getsentry/sentry

NicoHinderling · 2026-04-24T21:42:20Z

Introduces the new snapshot viewer's list view as a self-contained component, plus one supporting option on the d3-zoom hook the list needs. Not wired into any existing UI. Integration lives in the follow-up PR.

New file: snapshotListView.tsx (~1300 lines)

A grouped, virtualized list of snapshot cards using @tanstack/react-virtual. Renders PairCard for diff items and ImageCard for solo / added / removed. Each card has a status badge, a copy-link button, a metadata tooltip, and a body that switches between split / wipe / onion depending on diffMode. Split-pair bodies share zoom/pan via useSyncedD3Zoom.

The component takes SidebarItem[] plus image URL bases and exposes buildSnapshotLink, GroupHeader, CardHeader, DarkAware, and a few styled helpers for callers that want to render pieces of the list layout outside the virtualized container.

Supporting change: useD3Zoom.ts (+8 lines)

Adds an optional wheelRequiresModifier flag (default false) so the list view can require ctrl/meta/shift on wheel events. Without it, scrolling over the list would always be hijacked by zoom. Preserves existing behavior for all current callers.

What lands alongside:

No callers yet — the file compiles but is not imported anywhere. knip will still be happy because SnapshotListView is exported and TSC treats it as a top-level module.

3/N in the series slicing up #113958.

NicoHinderling · 2026-04-24T21:53:05Z

This stack of pull requests is managed by Graphite. Learn more about stacking.

Introduce the new snapshot viewer's list view as a self-contained component. Not wired into the UI yet; follow-up PR integrates it behind a view mode toggle. The list view renders grouped snapshot cards with its own virtualization (via @tanstack/react-virtual), synced d3-zoom panes per card, status badges, and diff/wipe/onion body variants. It operates directly on SidebarItem data without any additional state plumbing, so callers can render it by supplying items + image URLs. Supporting change: useSyncedD3Zoom / useD3Zoom gain an optional `wheelRequiresModifier` flag that the list view turns on so wheel events without ctrl/meta/shift pass through to page scroll rather than being captured for zoom.

…lute positioning ZoomControls already renders with position: absolute internally, so the extra wrapper collapsed to 0×0 and misplaced the controls.

- Preserve existing query params in buildSnapshotLink so copied links retain the user's current filters and view mode - Use max of base/head image heights for pair card estimates to avoid layout shift when base is taller than head - Store virtualizer in a ref so the keydown listener registers once instead of re-attaching on every render during scroll Co-Authored-By: Claude <noreply@anthropic.com>

RowPositioner adds padding-bottom: theme.space.xl (16px) that was not accounted for in estimatedHeight, causing cumulative scroll-position jumps as measureElement corrected the underestimates. Co-Authored-By: Claude <noreply@anthropic.com>

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit aaf17be. Configure here.}

rbro112 · 2026-04-29T04:46:55Z

+}
+
+// >= 1% shows 1 decimal ("93.5"); < 1% shows up to 4 without trailing zeros ("0.0227")
+function formatDiffPercent(diff: number): string {


Would recommend using import {formatPercentage} from 'sentry/utils/number/formatPercentage'; if possible, no need for a new function if we can use existing

rbro112 · 2026-04-29T04:47:56Z

+        if (e.key === 'Enter') {
+          e.preventDefault();
+          onSelect();
+        } else if (e.key === ' ') {


Not quite following what the space key is for here? The comment doesn't really make sense to me

It will recenter the card in the list view if you hit it, but i had some key conflict and had to add this preventDefault logic unfortunately

It works nicely in the final demo

rbro112 · 2026-04-29T04:49:33Z

+  border-bottom: 1px solid ${p => p.theme.tokens.border.secondary};
+`;
+
+const MetadataJson = styled('pre')`


Not sure what this looks like but might be better to use https://sentry.sentry.io/stories/core/codeblock/ to render code

rbro112 · 2026-04-29T04:50:43Z

+  );
+});
+
+const ImageEl = styled('img')`


What is ImageEl, specifically the El short for? Not sure I'm a fan of this naming

github-actions Bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Apr 24, 2026

vercel Bot deployed to Preview April 24, 2026 21:43 View deployment

This was referenced Apr 24, 2026

feat(preprod): Add view mode toggle between single and list views #113993

Open

ref(preprod): Use transparent color sentinel for overlay visibility #113987

Merged

This was referenced Apr 24, 2026

ref(preprod): Replace sidebar disclosure sections with status filter pills #113988

Merged

feat(preprod): Complete the new snapshot viewer toolbar and controls #113994

Open

NicoHinderling force-pushed the 04-24-ref_preprod_sidebar_filter_pills branch from 492b207 to 73d9ab0 Compare April 28, 2026 18:32

NicoHinderling force-pushed the 04-24-feat_preprod_add_snapshot_list_view branch from da939be to 47b847f Compare April 28, 2026 18:32

vercel Bot deployed to Preview April 28, 2026 18:34 View deployment

NicoHinderling force-pushed the 04-24-feat_preprod_add_snapshot_list_view branch from 47b847f to 5f96cbb Compare April 28, 2026 18:54

NicoHinderling force-pushed the 04-24-ref_preprod_sidebar_filter_pills branch from 73d9ab0 to 33ebe4d Compare April 28, 2026 18:54

vercel Bot deployed to Preview April 28, 2026 18:55 View deployment

NicoHinderling mentioned this pull request Apr 28, 2026

feat(preprod): Update snapshot header with approval actions #113959

Open

NicoHinderling force-pushed the 04-24-feat_preprod_add_snapshot_list_view branch from 5f96cbb to f2c43b9 Compare April 28, 2026 19:08

NicoHinderling force-pushed the 04-24-ref_preprod_sidebar_filter_pills branch from 33ebe4d to ef57ed8 Compare April 28, 2026 19:08

vercel Bot deployed to Preview April 28, 2026 19:10 View deployment

NicoHinderling mentioned this pull request Apr 28, 2026

ref(snapshots): Final UI tweaks #114232

Open

NicoHinderling force-pushed the 04-24-ref_preprod_sidebar_filter_pills branch from ef57ed8 to 613e534 Compare April 28, 2026 22:33

NicoHinderling force-pushed the 04-24-feat_preprod_add_snapshot_list_view branch from f2c43b9 to 13c039f Compare April 28, 2026 22:33

NicoHinderling marked this pull request as ready for review April 28, 2026 22:33

NicoHinderling requested a review from a team as a code owner April 28, 2026 22:33

vercel Bot deployed to Preview April 28, 2026 22:35 View deployment

sentry Bot reviewed Apr 28, 2026

View reviewed changes

Comment thread static/app/views/preprod/snapshots/main/snapshotListView.tsx

Comment thread static/app/views/preprod/snapshots/main/snapshotListView.tsx

cursor Bot reviewed Apr 28, 2026

View reviewed changes

Comment thread static/app/views/preprod/snapshots/main/snapshotDiffBodies.tsx Outdated

Comment thread static/app/views/preprod/snapshots/main/snapshotDiffBodies.tsx

NicoHinderling force-pushed the 04-24-ref_preprod_sidebar_filter_pills branch from 66de93f to cd8bb13 Compare April 28, 2026 22:49

NicoHinderling force-pushed the 04-24-feat_preprod_add_snapshot_list_view branch from 13c039f to f1e64ed Compare April 28, 2026 22:49

vercel Bot deployed to Preview April 28, 2026 22:52 View deployment

cursor Bot reviewed Apr 28, 2026

View reviewed changes

Comment thread static/app/views/preprod/snapshots/main/snapshotListView.tsx Outdated

Comment thread static/app/views/preprod/snapshots/main/snapshotListView.tsx

NicoHinderling force-pushed the 04-24-ref_preprod_sidebar_filter_pills branch from cd8bb13 to 19f405d Compare April 28, 2026 23:16

NicoHinderling force-pushed the 04-24-feat_preprod_add_snapshot_list_view branch from f1e64ed to 6b5e8b4 Compare April 28, 2026 23:16

vercel Bot deployed to Preview April 28, 2026 23:18 View deployment

sentry Bot reviewed Apr 28, 2026

View reviewed changes

Comment thread static/app/views/preprod/snapshots/main/snapshotListView.tsx

cursor Bot reviewed Apr 28, 2026

View reviewed changes

Comment thread static/app/views/preprod/snapshots/main/snapshotListView.tsx Outdated

NicoHinderling force-pushed the 04-24-feat_preprod_add_snapshot_list_view branch from 6b5e8b4 to 126773c Compare April 28, 2026 23:44

NicoHinderling force-pushed the 04-24-ref_preprod_sidebar_filter_pills branch from c9fa4cf to 84281ac Compare April 28, 2026 23:44

vercel Bot deployed to Preview April 28, 2026 23:46 View deployment

cursor Bot reviewed Apr 28, 2026

View reviewed changes

Comment thread static/app/views/preprod/snapshots/main/snapshotListView.tsx

vercel Bot deployed to Preview April 29, 2026 00:03 View deployment

NicoHinderling force-pushed the 04-24-feat_preprod_add_snapshot_list_view branch from 093db44 to 49b03b5 Compare April 29, 2026 00:10

NicoHinderling force-pushed the 04-24-ref_preprod_sidebar_filter_pills branch from 84281ac to 6a042b9 Compare April 29, 2026 00:10

vercel Bot deployed to Preview April 29, 2026 00:13 View deployment

Base automatically changed from 04-24-ref_preprod_sidebar_filter_pills to master April 29, 2026 00:23

NicoHinderling and others added 5 commits April 28, 2026 17:24

break apart

ac908b6

fix(preprod): Remove FloatingZoomControls wrapper causing double abso…

c5073fe

…lute positioning ZoomControls already renders with position: absolute internally, so the extra wrapper collapsed to 0×0 and misplaced the controls.

NicoHinderling force-pushed the 04-24-feat_preprod_add_snapshot_list_view branch from 49b03b5 to aaf17be Compare April 29, 2026 00:24

vercel Bot deployed to Preview April 29, 2026 00:26 View deployment

cursor Bot reviewed Apr 29, 2026

View reviewed changes

Comment thread static/app/views/preprod/snapshots/main/snapshotDiffBodies.tsx

NicoHinderling mentioned this pull request Apr 29, 2026

perf(snapshots): Buffer image swap to eliminate flash during single-view navigation #114271

Open

rbro112 reviewed Apr 29, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(preprod): Add SnapshotListView virtualized list component#113992

feat(preprod): Add SnapshotListView virtualized list component#113992
NicoHinderling wants to merge 5 commits intomasterfrom
04-24-feat_preprod_add_snapshot_list_view

NicoHinderling commented Apr 24, 2026

Uh oh!

NicoHinderling commented Apr 24, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor Bot left a comment

Uh oh!

Uh oh!

rbro112 Apr 29, 2026

Uh oh!

rbro112 Apr 29, 2026

Uh oh!

NicoHinderling Apr 29, 2026

Uh oh!

rbro112 Apr 29, 2026

Uh oh!

rbro112 Apr 29, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

NicoHinderling commented Apr 24, 2026

Uh oh!

NicoHinderling commented Apr 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

rbro112 Apr 29, 2026

Choose a reason for hiding this comment

Uh oh!

rbro112 Apr 29, 2026

Choose a reason for hiding this comment

Uh oh!

NicoHinderling Apr 29, 2026

Choose a reason for hiding this comment

Uh oh!

rbro112 Apr 29, 2026

Choose a reason for hiding this comment

Uh oh!

rbro112 Apr 29, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

NicoHinderling commented Apr 24, 2026 •

edited

Loading