Create new CustomPanel plugin for georeference annos

[jabrah]

Based on user feedback, we should consolidate georeference annotations into a single map for each page. We currently show one map with a single pin for each such annotation, but users had difficulty grasping the geographic distribution of the locations across multiple maps. We should create a new custom sidebar with a map to collect all locations for each page.

• Create new CustomPanel plugin
  • Plugin should find all georeference annotations for the current page in the window
  • Plugin should display one map
  • Plugin should add one pin for each georeference annotation to the map
  • By default, the plugin should show all georeference annotations for the page
  • Plugin should respond to custom annotation selected action and read the selected annotation (and annotations that target it) from redux state
  • Any georeference annotations found should be highlighted
• Create new button for the window toolbar
• Both new plugins should be added to the plugins list in demo/src/index.js
• Our current annotation sidebar plugin should invoke a new custom annotation selected action when a user clicks on an annotation
  • This action should save the selected annotation, as well as the annotations that target the selected annotation to the redux state

For reference, current custom sidebar already implements a new CustomPanel. You can see a simplified example of CustomPanel plugins here https://github.com/jabrah/mirador-side-panel-plugin-test.

Our wiki has some notes on M3 plugin development, which may or may not be helpful https://github.com/jhu-digital-manuscripts/rosademo-frontend/wiki

[jabrah]

Initial thoughts on props for this component:

props: {
  annotations: [],
  selectedAnnotation: 'string'
  annotationSelected: function(string)
}

• annotations : an array of (georeference) annotation objects (see this URL for an example https://rosetest.library.jhu.edu/rosademo/wa/homer/VA/VA035RN-0036/canvas)
• selectedAnnotation : the string ID of an annotation that the user has selected to be highlighted on the map. We want a user to be able to select a georeference annotation in the annotation sidebar to highlight it on the map
• annotationSelected : (not necessary for now?) an action that can be invoked if a user selects one of the georeference annotations listed in the sidebar. My thinking was a user can select one of the annotations listed below the map in order to highlight it on the map. This function may be invoked in the sidebar if we want to also highlight the annotation in the annotations panel as well.

[jabrah]

Slight tweak to the props provided:

annotations: [],
selectedAnnotation: '',
selectGeorefAnnotation: function (string)

• annotations same as above
• selectedAnnotation same as above
• selectGeorefAnnotation the same as annotationSelected, I think the new name is a bit clearer to distinguish it as an action

For now, the action provided will only allow a user to select one annotation at a time. You should be able to "deselect" an annotation by calling the selectGeorefAnnotation and providing no argument.

Questions:

• Should we provide a separate action for clearing selected annotation?
• Should we allow a user to select more than one annotation at a time?