creating annotation in mirador programmatically from javascript function - iiif

Question

I am trying to programmatically create an annotation on a canvas in mirador by calling a javascript function outside mirador.
Basically, I have a textual representation of a scanned text that includes descriptions of certain phenomenon on the scan, such as handwritten additions. If the user clicks on that description, I want the phenomenon in question to be highlighted with a box on the specified canvas in an already opened mirador instance mymirador that has several windows showing different scans.
For this, I try to pass the annotation as JSON using the receiveAnnotation action, but the annotation is not displayed at the correct place.
Javascript (added linebreaks for convenience):
function openAnnotationInMirador() {
var item = '{"id": "url-to-canvas/annotation",
"type": "Annotation",
"motivation": "commenting",
"body": {
"type": "TextualBody",
"language": "en",
"value": "Some description"},
"target": "url-to-canvas/#xywh=100,100,200,200"}}';
mymirador.store.dispatch(Mirador.actions.receiveAnnotation('url-to-canvas/annotation', 'url-to-canvas', item));
}
Tha function is triggered by a simple html button with onclick: <button onclick="openAnnotationInMirador()">Mirador Test</button>.
I suspect the JSON to be incorrect, but I am quite at loss here. Any suggestions are very much appreciated!

Answer 1

The third parameter to the receiveAnnotation action creator function has to be a JavaScript object of a WebAnnotation AnnotationPage, with the actual annotation in its items array, in your case:
const annoPage = {
id: 'dummy://my.annotation/page',
type: 'AnnotationPage',
items: [
{
"id": "url-to-canvas/annotation",
"type": "Annotation",
"motivation": "commenting",
"body": {
"type": "TextualBody",
"language": "en",
"value": "Some description"},
"target": "url-to-canvas/#xywh=100,100,200,200"
}
}
]
}
When working with the Redux actions in Mirador, it's very useful to install the Redux DevTools Browser Extension with which you can inspect the actions created by Mirador itself.