refactor(ui): extract the dialog's static annotation overlay into a pattern - #800
Merged
Merged
Conversation
…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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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 aviewBoxof the asset's pixel size, so a stored coordinate lands on the pixel it names at every width without aResizeObserver. 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
StaticAnnotationOverlayinfrontend/ui-core/src/patterns/StaticAnnotationOverlay.tsx, takingwidth,height,src,alt,annotations(theWireAnnotationshape the dataset and job routes answer) and an optionalclasseslist for declared colours. Class colour comes frompalette.ts; a class not declared takes the engine's derived hue. It holds no store and handles no input, and the shapes arepointer-events-none.DatasetAssetDialogconsumes the pattern with its behaviour unchanged: the no-dimensions branch and theAssetImagefetch stay in the dialog, and the pattern renders once the bytes arrive. Every existing dialog test passes without edits, including the browser measurement ine2e/dataset.spec.tsthat holds the SVG's box to the image's box. The pattern is exported fromfrontend/ui-core/src/index.tsas 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
viewBoxequal towidth × 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: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.