Skip to content

feat(webv2): find conditioning media in the gallery from its thumbnail - #255

Open
lstein wants to merge 3 commits into
mainfrom
feat/find-in-gallery-badges
Open

feat(webv2): find conditioning media in the gallery from its thumbnail#255
lstein wants to merge 3 commits into
mainfrom
feat/find-in-gallery-badges

Conversation

@lstein

@lstein lstein commented Sep 14, 2026

Copy link
Copy Markdown
Collaborator

Summary

Conditioning media picked long ago had no way back to its gallery record: the panels show a thumbnail and a filename, and finding that item in the grid meant searching for it by hand.

Each thumbnail now carries a "find in gallery" badge, revealed on hover or focus. Pressing it brings the Gallery and Preview on screen and lands the grid on that item's board, page, and cell. The new badge is located to the left of the preexisting crop and dimensions badges:

image

The same treatment is given to the reference images and videos used for conditioning videos, except that the find-in-gallery badge is the only icon.

QA Instructions

Driven in Chromium against the mock backend (scripts/mock-backend.mjs on :4179) with vite dev on :5199. The Video panel needs a video main model, which the fixtures do not ship, so three were patched in locally for the screenshots and reverted — scripts/mock-backend-fixtures.mjs is untouched here.

Verified by hand:

  • Generate: added a reference image, moved the gallery to another board, pressed the badge. Gallery returns to the image's board with it selected; Preview shows it.
  • Video (Ref2VA): four trim thumbnails on screen, two badges — one per field, both on the start bound. Hovering Start reveals it, hovering End does not.
  • Video layout, where the grid lives only in the right rail: after a press the centre strip still lists Preview alone. Before the placement fix an unqualified open resolved to center off the manifest and the reducer adopted the grid there without vacating the right panel, leaving one instance in two regions.
  • Keyboard: the badge is reachable by Tab and its focus ring is fully visible. Measured in-browser — the ring's 4px reach is clipped 0px on both axes on every host.

Checks, all from invokeai/frontend/webv2:

  • pnpm lint — pass
  • pnpm test:all — 8044 unit, 1381 browser, 27 fixture tests pass
  • pnpm test:performance:architecture — pass
  • pnpm test:project-files:browser — pass
  • pnpm test:accessibilityfails on topbar-menu-journey (getByRole('button', { name: /^Invoke from/ }) times out). Confirmed identical on a clean main build, so pre-existing and unrelated to this change.

Performance: editor owned JavaScript grows 1,102 bytes for one new initial module (useFindGalleryItem.ts), with no change to initial request counts; launchpad is unchanged. The reveal is fetched on the press — importing it eagerly pulled the gallery item/transfer barrel into the editor's initial graph and cost two more initial script requests.

Both performance baselines are re-recorded. Note the browser baseline also absorbs pre-existing drift: measured on a clean main checkout, editor routes already sat ~35KB above their recorded script-byte baseline, inside tolerance; this change adds ~2.3KB, which is what tips it over. The editor-canvas activated-asset limit likewise moves for a reason predating this branch — a clean main measures the same value.

Review

Three independent read-only reviews (correctness/spec, architecture/operational safety/performance, test value/product quality including accessibility), then a blocker-only adversarial pass against the resulting candidate, then a second adversarial pass scoped to the logic the first one had caused to change.

Material findings resolved:

  • Widget placement corrupted the layout. An unqualified openWorkbenchWidget('gallery') resolved to center from the manifest; the reducer then adopted the existing instance without vacating its region. Now the gesture raises the grid where it already lives.
  • The project fence read the wrong moment. The sequence number was claimed at the press but the project id inside the deferred import's callback — i.e. whatever project the user had reached by the time the chunk landed, the exact write the fence exists to prevent. Both now travel in a ticket minted at the press.
  • No failure state. A 404'd chunk or a deleted source image left the workspace rearranged and silent. It now reports, and only for a gesture still in force.
  • Three badges overflowed the reference thumbnail, clipping the outer two and their focus rings; the tile grew 80→96px. A related 2px focus-ring clip on the video thumbnails was measured and fixed by insetting the badge to the ring's own reach.
  • gallery.findImage defeated ReferenceImageCard's memo on every gallery selection change.
  • Accessible naming. The Generate badge was unnamed in the one field that is a stack of them, and the tooltip did not match the accessible name.
  • Test gaps: added coverage for the keyframe slots, the initial-video badge, the media-slot overlay geometry, and that the hover/focus reveal is scoped per thumbnail. Each new assertion was mutation-checked — removing a className="group" fails them.

The final adversarial pass reported no blockers.

Checklist

  • The PR has a short but descriptive title, suitable for a changelog
  • Meaningful regression coverage added / updated where needed; obsolete tests/code removed
  • Persisted-state and API changes include required migrations / compatibility validation
  • Relevant performance/efficiency opportunities considered; material claims have evidence
  • Material review findings resolved and relevant checks rerun
  • Documentation added / updated (if applicable)
  • Updated What's New copy (if doing a release after this PR)

Adds a hover/focus badge to the Generate panel's reference images and to the
Video panel's keyframe slots, initial video, and Ref2VA references. Pressing it
raises the Gallery and Preview and lands the grid on that item's board, page,
and cell.

Extracts the image map's reveal into workbench/image-actions/revealGalleryItem,
now shared and fenced to the ordering and project of the press rather than of
whenever its deferred chunk lands.
…badges

# Conflicts:
#	invokeai/frontend/webv2/performance/architecture-baseline.json
#	invokeai/frontend/webv2/performance/browser-baseline.json
The find gesture puts `useFindGalleryItem` in the editor's initial graph and
`FindInGalleryButton` in its script set, both pinned exactly. Byte growth
(+1102 owned, +2788 browser script) stays inside the derived allowance and is
recorded, not excused.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant