creating annotation in mirador programmatically from javascript function

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.