Annotations not displaying

[jpganley]

Using the OpenSeadragonAnnotator / OpenSeadragonViewer react components.
Trying to load annotations from a data source using setAnnotations.
Using getAnnotations, I can see that the annotations appear to have been loaded but they don't render.
From another thread I thought it might be a problem with structure of the JSON object (sample below) but I'm struggling to figure out what's missing.

[ { "id": "ab22bd16-3133-4aea-9dea-13fa02da9fc1", "bodies": [ { "id": "atol-notation-1744826158884", "annotation": "ab22bd16-3133-4aea-9dea-13fa02da9fc1", "purpose": "commenting", "value": "This is a second test" } ], "target": { "annotation": "ab22bd16-3133-4aea-9dea-13fa02da9fc1", "selector": { "type": "RECTANGLE", "geometry": { "bounds": { "minX": 367.113615, "minY": 119.092387, "maxX": 470.420435, "maxY": 207.01057509999998 } } } } }, { "id": "7c8eb974-7597-427d-8b4a-fc6731462ab0", "bodies": [ { "id": "atol-notation-1744826149614", "annotation": "7c8eb974-7597-427d-8b4a-fc6731462ab0", "purpose": "commenting", "value": "This is a test" } ], "target": { "annotation": "7c8eb974-7597-427d-8b4a-fc6731462ab0", "selector": { "type": "RECTANGLE", "geometry": { "bounds": { "minX": 134.040587, "minY": 120.506414, "maxX": 205.7302368, "maxY": 208.2378182 } } } } } ]

[rsimon]

Can you provide a minimal reproducible example via CodeSandbox, StackBlitz, etc.?

[jpganley]

I think I figured it out. It appears that the x,y,w,h properties for the Geometry object are required for proper rendering. The interface definition for Geometry in Shape.d.ts is missing those properties. With that change, and the addition of those properties to the JSON object it now renders the annotations correctly.

Original Shape.d.ts:
export interface Geometry {
bounds: Bounds;
}

Modified Shape.d.ts:
export interface Geometry {
bounds: Bounds;
x:number;
y:number;
w:number;
h:number;
}

[amRohitKumar]

I think I figured it out. It appears that the x,y,w,h properties for the Geometry object are required for proper rendering. The interface definition for Geometry in Shape.d.ts is missing those properties. With that change, and the addition of those properties to the JSON object it now renders the annotations correctly.

Original Shape.d.ts: export interface Geometry { bounds: Bounds; }

Modified Shape.d.ts: export interface Geometry { bounds: Bounds; x:number; y:number; w:number; h:number; }

Yes, I was facing the same issue. TypeScript suggests that x, y, w, and h are not required, but the annotations won't appear without them

[rsimon]

See docs here: https://annotorious.dev/guides/data-model/

You can either provide a Rectangle or a Polygon shape. Both have different payload (x/y/w/h in case of Rectangle, points in case of Polygon. Shape is the common parent type.)

[jpganley]

Finally circling back to this after getting sidetracked. I'm still struggling. I switched from using my own data to trying to use the sample data here: https://annotorious.dev/guides/data-model/

useEffect(()=>{ if (myanno.current){ myanno.current.setAnnotations([ { id: '7fb76422-3a8c-4c87-bbad-7c8bb68399a0', target: { annotation:'7fb76422-3a8c-4c87-bbad-7c8bb68399a0', selector: { type: 'RECTANGLE', geometry: { bounds: { minX: 272, minY: 169, maxX: 393, maxY: 259 }, x: 272, y: 169, w: 121, h: 90, } } } }],true); } },[myanno.current])

Here are the react components.

<OpenSeadragonAnnotator ref={myanno} style={annStyle} tool={"rectangle"} drawingEnabled={true} drawingMode='click' userSelectAction={UserSelect} user={{name:viewerProps.userFull||"",id:viewerProps.username||""}} > <OpenSeadragonViewer className='noteImage' options={{ tileSources:{ type:"image", url: proofUrl, ajaxWithCredentials:false, }, showFullPageControl:false, showHomeControl:true, defaultZoomLevel:1, minZoomLevel:.25, maxZoomLevel:4, preserveViewport:true, gestureSettingsMouse:{clickToZoom:false, scrollToZoom:false}, prefixUrl:"https://cdn.jsdelivr.net/npm/openseadragon@latest/build/openseadragon/images/" }} /> <OpenSeadragonAnnotationPopup popup={props => ( <CommentPopup {...props} readOnly={true} onCreateBody={createBody} /> )} /> </OpenSeadragonAnnotator>

It does not render the annotation. I've tried with both setAnnotation and addAnnotation. Neither works. What am I missing? Rendered HTML in the attachment.

[rsimon]

Did you include the CSS stylesheet?

[jpganley]

Turns out I was trying to access the annotator using the useRef hook. Switching to useAnnotator solved the problem.