Skip to content

refactor(ui): extract the dialog's static annotation overlay into a pattern - #800

Merged
JArmandoAnaya merged 1 commit into
mainfrom
feat/preprocessing-p5-preview
Aug 26, 2026
Merged

refactor(ui): extract the dialog's static annotation overlay into a pattern#800
JArmandoAnaya merged 1 commit into
mainfrom
feat/preprocessing-p5-preview

Conversation

@JArmandoAnaya

Copy link
Copy Markdown
Contributor

Stack

Position 5 of the pre-processing stack (#785); based on main.

What changed

The dataset asset dialog drew its labels over the picture with a mechanism worth reusing: a box given the asset's own aspect ratio, an <img> filling it, and an <svg> carrying a viewBox of the asset's pixel size, so a stored coordinate lands on the pixel it names at every width without a ResizeObserver. The stroke is a fraction of the picture's width rather than a zoom, and the shapes are the annotator's own renderers, so a box here is the box the annotator draws.

That mechanism is now StaticAnnotationOverlay in frontend/ui-core/src/patterns/StaticAnnotationOverlay.tsx, taking width, height, src, alt, annotations (the WireAnnotation shape the dataset and job routes answer) and an optional classes list for declared colours. Class colour comes from palette.ts; a class not declared takes the engine's derived hue. It holds no store and handles no input, and the shapes are pointer-events-none.

DatasetAssetDialog consumes the pattern with its behaviour unchanged: the no-dimensions branch and the AssetImage fetch stay in the dialog, and the pattern renders once the bytes arrive. Every existing dialog test passes without edits, including the browser measurement in e2e/dataset.spec.ts that holds the SVG's box to the image's box. The pattern is exported from frontend/ui-core/src/index.ts as one appended line; the pre-processing preview cells in the pre-processing epic (#785) import it next.

A focused unit test covers what a consumer relies on: one drawn shape per placeable annotation (a classification tag and an unparseable geometry draw nothing), a viewBox equal to width × height, colour from the palette, and the width-scaled stroke.

Found, not fixed

Nothing.

Checks

Per commit: pnpm --filter @visionset/ui-core test (61 files, 1348 tests passed), pnpm -r lint, pnpm -r build — all green. The pattern test and the dialog's suite together: 2 files, 44 tests passed.

Full local gate once on the final tree, CI=1 bash scripts/check.sh, verbatim:

Timing
     42s  python tests
      0s  ruff (lint)
      0s  ruff (format)
      6s  mypy
      0s  import contracts
      5s  frontend build
     29s  frontend tests
     11s  frontend lint
      1s  openapi drift
      1s  generated client drift
      0s  mcp tool reference drift
      1s  export target catalog drift
      0s  version sync
     44s  annotator + app e2e (chromium)
     27s  browser cycle, real server (chromium)
    167s  total

All checks passed.

check.sh: PASSED  ran=python,frontend,generated,browser  skipped=docs

The docs suite was skipped by the gate's own selection, which is expected for a change that touches no file under docs/. CI is the exhaustive verdict.

…attern

The picture-with-labels mechanism of the dataset asset dialog — an aspect-ratio
box, the image filling it, an SVG carrying a viewBox of the asset's pixel size,
class colour from the palette — becomes StaticAnnotationOverlay under
patterns/, taking width, height, src and wire annotations and holding no store
and no input. The dialog consumes it unchanged in behaviour; the pre-processing
preview cells consume it next.
@JArmandoAnaya
JArmandoAnaya merged commit f7f7088 into main Aug 26, 2026
15 checks passed
@JArmandoAnaya
JArmandoAnaya deleted the feat/preprocessing-p5-preview branch August 26, 2026 12:13
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