toggle POS and REACH (some bugginess in the alignment)

Author: hmsklee

index.html

@@ -63,8 +63,8 @@
 
 <div id="header">
   <input type="file">
-  <button class="active" id="POS">POS</button>
-  <button id="BIO">BIO</button>
+  <button id="POS">POS</button>
+  <button class="active" id="REACH">REACH</button>
 </div>
 
 <div id="drawing">
@@ -181,18 +181,24 @@
 // init objects/listeners...
 window.onload = function() {
 
+  function generateLinksPOS(){};
+  function generateLinksREACH(){};
+
   // init buttons
   const State = {
     annotationStyle: document.querySelector('button.active').id,
     setAnnotationStyle: function(type) {
       this.annotationStyle = type;
       if (type === "POS") {
         wordObjs.forEach(w => w.tag = w.data.syntaxData.tag);
+        generateLinksPOS();
       }
       else {
         wordObjs.forEach(w => w.tag = w.data.bioData.tag);
+        generateLinksREACH();
       }
       redrawWords(wordObjs);
+      redrawLinks(true);
     }
   };
   const buttons = document.querySelectorAll('#header button');
@@ -385,11 +391,58 @@
       wordObjs.push(w);
     })
 
-    linkObjs = [];
-    if (State.annotationStyle == 'POS') {
-      // syntaxDataArray.forEach
-    // }
-    // else {
+    function clearLinkObjs() {
+      linkObjs.forEach(link => link.removeSVGs());
+      linkObjs = [];
+
+      wordObjs.forEach(word => {
+        word.slotsL = [];
+        word.slotsR = [];
+        word.parentsL = [];
+        word.parentsR = [];
+      })
+    }
+
+    generateLinksPOS = function() {
+      clearLinkObjs();
+      syntaxDataArray.forEach(link => {
+        let ltr = link.source.locationInSentence < link.destination.locationInSentence;
+        let style;
+        switch (link.label) {
+          case "nsubj":
+            style = ltr ? styles.gradientLine2 : styles.gradientLine2r;
+            break;
+          case "dobj":
+            style = ltr ? styles.gradientLine1 : styles.gradientLine1r;
+            break;
+          case "det":
+            style = styles.simpleLine;
+            break;
+          default:
+            style = styles.noneLine;
+            break;
+        }
+
+
+        let linkObject = new Link(
+          link.source.object,
+          link.destination.object,
+          ltr ? 1 : -1,
+          style,
+          link.label,
+          texts.linkText
+        );
+
+        // create circular reference to link and data
+        linkObject.data = link;
+        link.object = linkObject;
+        linkObjs.push( linkObject );
+        createLink(linkObject);
+      })
+    }
+
+    generateLinksREACH = function() {
+      clearLinkObjs();
       mentionDataArray.forEach(function(link) {
         if (link.words) {
 
@@ -458,15 +511,9 @@
       });
     }
 
-    // draw
-    // linkObjs.sort(function(a, b) {
-    //   var d1 = Math.abs(a.s.idx - a.e.idx);
-    //   var d2 = Math.abs(b.s.idx - b.e.idx);
-
-    //   return d1 - d2; 
-    // });
-    // linkObjs.forEach(createLink);
 
+    // draw
+    generateLinksREACH();
     drawWords(wordObjs);
     drawLinks(linkObjs);
 

js/annotate.js

@@ -75,7 +75,13 @@ class Link {
 
     }
 
-    
+    removeSVGs() {
+     this.polylineSVGs.forEach(svg => svg.remove());
+     this.labelRectSVGs.forEach(svg => svg.remove());
+     this.labelTextSVGs.forEach(svg => svg.remove());
+     this.arrow1Style.path.remove();
+     this.arrow2Style.path.remove();
+    }
 
     toString() {
         return this.id;