Allow annotators to assign motivations to an annotation; fixes #57

__tests__/AnnotationCreation.test.js

@@ -1,21 +1,27 @@
 import React from 'react';
 import { shallow } from 'enzyme';
+import { I18nextProvider, initReactI18next } from 'react-i18next';
+import i18n from 'i18next';
 import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
 import AnnotationCreation from '../src/AnnotationCreation';
 import AnnotationDrawing from '../src/AnnotationDrawing';
 import TextEditor from '../src/TextEditor';
 
 /** */
 function createWrapper(props) {
+  const i18nconfig = i18n.createInstance();
+  i18nconfig.use(initReactI18next).init({ lng: 'en', resources: {} });
   return shallow(
-    <AnnotationCreation
-      id="x"
-      config={{}}
-      receiveAnnotation={jest.fn()}
-      windowId="abc"
-      {...props}
-    />,
-  );
+    <I18nextProvider i18n={i18nconfig}>
+      <AnnotationCreation
+        id="x"
+        config={{ annotation: {} }}
+        receiveAnnotation={jest.fn()}
+        windowId="abc"
+        {...props}
+      />
+    </I18nextProvider>,
+  ).dive().dive().dive();
 }
 
 describe('AnnotationCreation', () => {

package.json

@@ -40,6 +40,7 @@
     "prop-types": "^15.7.2",
     "react": "^17.0",
     "react-dom": "^17.0",
+    "react-i18next": "^11.7.0",
     "uuid": "^8.0.0"
   },
   "devDependencies": {
@@ -62,6 +63,7 @@
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-react": "^7.20.3",
     "eslint-plugin-react-hooks": "^4.0.6",
+    "i18next": "^19.5.0",
     "jest": "^26.1.0",
     "jest-canvas-mock": "^2.2.0",
     "jest-localstorage-mock": "^2.4.2",
@@ -70,6 +72,7 @@
     "prop-types": "^15.7.2",
     "react": "^17.0",
     "react-dom": "^17.0",
+    "react-i18next": "^11.7.0",
     "uuid": "^8.2.0"
   },
   "author": "",

src/AnnotationCreation.js

@@ -1,5 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import compose from 'lodash/flowRight';
+import { withTranslation } from 'react-i18next';
 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 import Paper from '@material-ui/core/Paper';
@@ -22,6 +24,7 @@ import Divider from '@material-ui/core/Divider';
 import MenuItem from '@material-ui/core/MenuItem';
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
 import MenuList from '@material-ui/core/MenuList';
+import Select from '@material-ui/core/Select';
 import { SketchPicker } from 'react-color';
 import { v4 as uuid } from 'uuid';
 import { withStyles } from '@material-ui/core/styles';
@@ -63,19 +66,28 @@ class AnnotationCreation extends Component {
           annoState.svg = props.annotation.target.selector.value;
         }
       }
+
+      annoState.motivation = props.annotation.motivation;
     }
-    this.state = {
+
+    const toolState = {
       activeTool: 'cursor',
-      annoBody: '',
       closedMode: 'closed',
-      colorPopoverOpen: false,
       currentColorType: false,
       fillColor: null,
+      motivation: (props.config.annotation.motivations && props.config.annotation.motivations[0]),
+      strokeColor: '#00BFFF',
+      strokeWidth: 3,
+      ...(props.config.annotation.defaults || {}),
+    };
+
+    this.state = {
+      ...toolState,
+      annoBody: '',
+      colorPopoverOpen: false,
       lineWeightPopoverOpen: false,
       popoverAnchorEl: null,
       popoverLineWeightAnchorEl: null,
-      strokeColor: '#00BFFF',
-      strokeWidth: 1,
       svg: null,
       xywh: null,
       ...annoState,
@@ -92,6 +104,7 @@ class AnnotationCreation extends Component {
     this.handleCloseLineWeight = this.handleCloseLineWeight.bind(this);
     this.closeChooseColor = this.closeChooseColor.bind(this);
     this.updateStrokeColor = this.updateStrokeColor.bind(this);
+    this.changeMotivation = this.changeMotivation.bind(this);
   }
 
   /** */
@@ -152,7 +165,7 @@ class AnnotationCreation extends Component {
       annotation, canvases, closeCompanionWindow, receiveAnnotation, config,
     } = this.props;
     const {
-      annoBody, tags, xywh, svg,
+      annoBody, tags, motivation, xywh, svg,
     } = this.state;
     canvases.forEach((canvas) => {
       const storageAdapter = config.annotation.adapter(canvas.id);
@@ -161,6 +174,7 @@ class AnnotationCreation extends Component {
         canvasId: canvas.id,
         id: (annotation && annotation.id) || `${uuid()}`,
         manifestId: canvas.options.resource.id,
+        motivation,
         svg,
         tags,
         xywh,
@@ -188,6 +202,13 @@ class AnnotationCreation extends Component {
     });
   }
 
+  /** */
+  changeMotivation(e) {
+    this.setState({
+      motivation: e.target.value,
+    });
+  }
+
   /** */
   changeClosedMode(e) {
     this.setState({
@@ -210,12 +231,13 @@ class AnnotationCreation extends Component {
   /** */
   render() {
     const {
-      annotation, classes, closeCompanionWindow, id, windowId,
+      annotation, classes, closeCompanionWindow, config, id, t, windowId,
     } = this.props;
 
     const {
       activeTool, colorPopoverOpen, currentColorType, fillColor, popoverAnchorEl, strokeColor,
       popoverLineWeightAnchorEl, lineWeightPopoverOpen, strokeWidth, closedMode, annoBody, svg,
+      motivation,
     } = this.state;
     return (
       <CompanionWindow
@@ -235,6 +257,24 @@ class AnnotationCreation extends Component {
         />
         <form onSubmit={this.submitForm}>
           <Grid container>
+            { config.annotation
+              && config.annotation.motivations
+              && config.annotation.motivations.length > 0 && (
+              <>
+                <Grid item xs={12}>
+                  <Typography variant="overline">
+                    Motivation
+                  </Typography>
+                </Grid>
+                <Grid item xs={12}>
+                  <Select variant="filled" value={motivation} onChange={this.changeMotivation}>
+                    {
+                      config.annotation.motivations.map((value) => (<MenuItem value={value} key={value}>{t('annotation_motivation', { context: value })}</MenuItem>))
+                    }
+                  </Select>
+                </Grid>
+              </>
+            )}
             <Grid item xs={12}>
               <Typography variant="overline">
                 Target
@@ -428,17 +468,21 @@ AnnotationCreation.propTypes = {
   config: PropTypes.shape({
     annotation: PropTypes.shape({
       adapter: PropTypes.func,
+      defaults: PropTypes.objectOf(PropTypes.string),
+      motivations: PropTypes.arrayOf(PropTypes.string),
     }),
   }).isRequired,
   id: PropTypes.string.isRequired,
   receiveAnnotation: PropTypes.func.isRequired,
+  t: PropTypes.func,
   windowId: PropTypes.string.isRequired,
 };
 
 AnnotationCreation.defaultProps = {
   annotation: null,
   canvases: [],
   closeCompanionWindow: () => {},
+  t: (k) => k,
 };
 
-export default withStyles(styles)(AnnotationCreation);
+export default compose(withStyles(styles), withTranslation())(AnnotationCreation);

src/WebAnnotation.js

@@ -2,12 +2,13 @@
 export default class WebAnnotation {
   /** */
   constructor({
-    canvasId, id, xywh, body, tags, svg, manifestId,
+    canvasId, id, xywh, body, tags, svg, manifestId, motivation = 'commenting',
   }) {
     this.id = id;
     this.canvasId = canvasId;
     this.xywh = xywh;
     this.body = body;
+    this.motivation = motivation;
     this.tags = tags;
     this.svg = svg;
     this.manifestId = manifestId;
@@ -18,7 +19,7 @@ export default class WebAnnotation {
     return {
       body: this.createBody(),
       id: this.id,
-      motivation: 'commenting',
+      motivation: this.motivation,
       target: this.target(),
       type: 'Annotation',
     };

src/plugins/annotationCreationCompanionWindow.js

@@ -38,6 +38,19 @@ function mapStateToProps(state, { id: companionWindowId, windowId }) {
 export default {
   companionWindowKey: 'annotationCreation',
   component: AnnotationCreation,
+  config: {
+    annotation: {
+      motivations: ['commenting', 'describing', 'identifying', 'tagging'],
+    },
+    translations: {
+      en: {
+        annotation_motivation_commenting: 'Commenting',
+        annotation_motivation_describing: 'Describing',
+        annotation_motivation_identifying: 'Identifying',
+        annotation_motivation_tagging: 'Tagging',
+      },
+    },
+  },
   mapDispatchToProps,
   mapStateToProps,
 };