selectAnnotation API method

recogito · Nov 8, 2021 · a227537 · a227537
1 parent 54bb91a
commit a227537
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 14 deletions.
diff --git a/public/index.html b/public/index.html
@@ -33,6 +33,7 @@
       <button id="add-annotation">Add Annotation</button>
       <button id="update-annotation">Update Annotation</button>
       <button id="remove-annotation">Remove Annotation</button>
+      <button id="select-annotation">Select Annotation</button>
       <button id="toggle-mode">MODE: ANNOTATION</button>
     </div>
 
@@ -134,6 +135,10 @@ <h1>Homer: The Odyssey</h1>
           r.removeAnnotation(myAnnotation);
         });
 
+        document.getElementById('select-annotation').addEventListener('click', function() {
+          r.selectAnnotation('#d7197c87-b45d-4217-9c4f-27573030448f');
+        });
+
         // Switch annotation mode (annotation/relationships)
         var annotationMode = 'ANNOTATION'; // or 'RELATIONS'
 

diff --git a/src/TextAnnotator.jsx b/src/TextAnnotator.jsx
@@ -250,6 +250,12 @@ export default class TextAnnotator extends Component {
     this.highlighter.addOrUpdateAnnotation(annotation.clone());
   }
 
+  getAnnotations = () => {
+    const annotations = this.highlighter.getAllAnnotations();
+    const relations = this.relationsLayer.getAllRelations();
+    return annotations.concat(relations).map(a => a.clone());
+  }
+
   removeAnnotation = annotation => {
     this.highlighter.removeAnnotation(annotation);
 
@@ -259,6 +265,28 @@ export default class TextAnnotator extends Component {
       this.clearState();
   }
 
+  selectAnnotation = arg => {
+    // De-select in any case
+    this.setState({
+      selectedAnnotation: null,
+      selectedDOMElement: null
+    }, () => {
+      if (arg) {
+        const spans = this.highlighter.findAnnotationSpans(arg);
+
+        if (spans.length > 0) {
+          const selectedDOMElement = spans[0];
+          const selectedAnnotation = spans[0].annotation;
+
+          this.setState({
+            selectedAnnotation,
+            selectedDOMElement
+          });
+        }
+      }
+    });
+  }
+
   setAnnotations = annotations => {
     this.highlighter.clear();
     this.relationsLayer.clear();
@@ -268,12 +296,6 @@ export default class TextAnnotator extends Component {
       this.relationsLayer.init(clones));
   }
 
-  getAnnotations = () => {
-    const annotations = this.highlighter.getAllAnnotations();
-    const relations = this.relationsLayer.getAllRelations();
-    return annotations.concat(relations).map(a => a.clone());
-  }
-
   setMode = mode => {
     if (mode === 'RELATIONS') {
       this.clearState();

diff --git a/src/highlighter/Highlighter.js b/src/highlighter/Highlighter.js
@@ -58,10 +58,10 @@ export default class Highlighter {
     }
   }
 
-  _findAnnotationSpans = annotation => {
-    const allAnnotationSpans = document.querySelectorAll('.r6o-annotation');
-    return Array.prototype.slice.call(allAnnotationSpans)
-      .filter(span => span.annotation.isEqual(annotation));
+  findAnnotationSpans = annotationOrId => {
+    const id = annotationOrId.id || annotationOrId;
+    const spans =Array.from(document.querySelectorAll(`.r6o-annotation[data-id="${id}"]`));
+    return spans;
   }
 
   getAllAnnotations = () => {
@@ -72,8 +72,8 @@ export default class Highlighter {
 
   addOrUpdateAnnotation = (annotation, maybePrevious) => {
     // TODO index annotation to make this faster
-    const annoSpans = this._findAnnotationSpans(annotation);
-    const prevSpans = maybePrevious ? this._findAnnotationSpans(maybePrevious) : [];
+    const annoSpans = this.findAnnotationSpans(annotation);
+    const prevSpans = maybePrevious ? this.findAnnotationSpans(maybePrevious) : [];
     const spans = uniqueItems(annoSpans.concat(prevSpans));
 
     if (spans.length > 0) {
@@ -87,7 +87,7 @@ export default class Highlighter {
   }
 
   removeAnnotation = annotation => {
-    const spans = this._findAnnotationSpans(annotation);
+    const spans = this.findAnnotationSpans(annotation);
     if (spans) {
       this._unwrapHighlightings(spans)
       this.el.normalize();

diff --git a/src/index.jsx b/src/index.jsx
@@ -91,6 +91,10 @@ export class Recogito {
   /*  External API  */
   /******************/
 
+  // Common shorthand for handling annotationOrId args
+  _wrap = annotationOrId =>
+    annotationOrId?.type === 'Annotation' ? new WebAnnotation(annotationOrId) : annotationOrId;
+
   addAnnotation = annotation =>
     this._app.current.addAnnotation(new WebAnnotation(annotation));
 
@@ -126,6 +130,11 @@ export class Recogito {
   removeAnnotation = annotation =>
     this._app.current.removeAnnotation(new WebAnnotation(annotation));
 
+  selectAnnotation = annotationOrId => {
+    const selected = this._app.current.selectAnnotation(this._wrap(annotationOrId));
+    return selected?.underlying;
+  }
+
   setAnnotations = arg => {
     const annotations = arg || [];
     const webannotations = annotations.map(a => new WebAnnotation(a));

diff --git a/src/relations/RelationsLayer.js b/src/relations/RelationsLayer.js
@@ -127,7 +127,7 @@ export default class RelationsLayer extends EventEmitter {
    */
   getConnectionsFor = annotation => {
     return this.connections.filter(c =>
-      c.startAnnotation.isEqual(annotation) || c.endAnnotation.isEqual(annotation));
+      c.startAnnotation.id === annotation.id || c.endAnnotation.id === annotation.id);
   }
 
   destroyConnectionsFor = annotation => {