show/hide links... wip

Author: hmsklee

css/style2.css

@@ -19,10 +19,63 @@ svg text {
 #header {
   position:fixed;
   z-index:100;
-  background:black;
+  background:#555;
   width:100%;
   height:40px;
   top:0;
+  font: 14px/1.5em helvetica, arial, sans-serif;
+}
+
+#options {
+  float:right;
+  display:inline-block;
+  background:inherit;
+  color:white;
+}
+#dataset,
+#options button {
+  color:white;
+  height:40px;
+  padding: 0 20px;
+  background: none;
+  outline:none;
+  cursor:pointer;
+  font:inherit;
+  border:none;
+}
+#options button {
+  border: 1px solid #999;
+  border-width:0 0 0 1px;
+  border-radius:0;
+}
+#options.open button {
+  background: #333;
+  border-color: #555;
+  border-width:0 0 1px 0;
+}
+#options ul {
+  display:none;
+  margin:0;
+  list-style-type: none;
+  padding: 4px 0;
+  background: #333;
+}
+#options > ul {
+  position:absolute;
+  min-width:125px;
+  padding: 10px;
+  padding-left: 0;
+  right: 0;
+}
+#options.open ul {
+  display:block;
+}
+#options li {
+  padding: 3px 10px;
+  padding-right: 0;
+}
+#options li input[type="checkbox"] {
+  margin-right: 5px;
 }
 
 #tooltip {

index.html

@@ -17,7 +17,17 @@
     <option>passage1</option>
     <option>passage2</option>
   </select>
-  <button id="syntax-toggle">Toggle syntax</button>
+  <div id="options">
+    <button id="options-toggle">Visible edges ▾</button>
+    <ul>
+      <li class="reach">
+        <input id="reach--all" type="checkbox" checked><label for="reach--all">REACH</label>
+      </li>
+      <li class="pos">
+        <input id="pos--all" type="checkbox" checked><label for="pos--all">Syntax</label>
+      </li>
+    </ul>
+  </div>
 </div>
 
 <div id="main">

js2/components/link.js

@@ -373,4 +373,8 @@ class Link {
     get absoluteY() {
       return this.rootWord.row.rh + this.rootWord.row.ry - 45 - 15 * this.slot;
     }
+
+    get val() {
+      return this.reltype || this.trigger.val;
+    }
 }

js2/main.js

@@ -59,9 +59,8 @@ const Main = (function() {
         changeDataset(this.selectedIndex);
       }
     }
-    document.getElementById('syntax-toggle').onclick = function() {
-      links.forEach(l => l.toggle());
-      rm.resizeAll();
+    document.getElementById('options-toggle').onclick = function() {
+      document.getElementById('options').classList.toggle('open');
     }
   }
 
@@ -73,6 +72,7 @@ const Main = (function() {
     parser.readJson(`./data/data${index}.json`, function() {
       clear();
       [words, links, clusters] = buildWordsAndLinks();
+      populateOptions();
       draw();
     });
   };
@@ -193,6 +193,98 @@ const Main = (function() {
     return [ words, links, clusters ];
   }
 
+  function populateOptions() {
+    document.querySelector('.reach').onclick = toggleEdgeVisibility;
+    document.querySelector('.pos').onclick = toggleEdgeVisibility;
+
+    let reachTypes = {};
+    let posTypes = {};
+
+    function toggleEdgeVisibility(e) {
+      if (e.target.nodeName === 'INPUT') {
+        let id = e.target.id.split('--');
+        let checked = e.target.checked;
+
+        function linkMatchesId(l) {
+          if (l.top && id[0] === 'reach') {
+            return l.reltype === id[1] || (l.trigger instanceof Word && l.trigger.tag.val === id[1]);
+          }
+          else if (!l.top && id[0] === 'pos') {
+            return l.arguments.some(arg => arg.type === id[1]);
+          }
+        }
+
+        if (checked) {
+          if (id[1] === 'all') {
+            document.querySelectorAll(`.${id[0]} > ul input`).forEach(i => {
+              i.disabled = false;
+              toggleEdgeVisibility({target: i});
+            });
+          }
+          else {
+            links.forEach(l => linkMatchesId(l) && l.show());
+          }
+        }
+        else {
+          if (id[1] === 'all') {
+            document.querySelectorAll(`.${id[0]} > ul input`).forEach(i => {
+              links.forEach(l => {
+                if (l.top == (id[0] === 'reach')) {
+                  l.hide();
+                }
+              });
+              i.disabled = true;
+            });
+          }
+          else {
+            links.forEach(l => linkMatchesId(l) && l.hide());
+          }
+        }
+      }
+    }
+
+    // find link types
+    links.forEach(link => {
+      if (link.top) {
+        let type = link.trigger instanceof Word ? link.trigger.tag : link.reltype;
+        if (reachTypes[type]) {
+          reachTypes[type].push(link);
+        }
+        else {
+          reachTypes[type] = [link];
+        }
+      }
+      else {
+        link.arguments.forEach(arg => {
+          if (posTypes[arg.type]) {
+            posTypes[arg.type].push(link);
+          }
+          else {
+            posTypes[arg.type] = [link];
+          }
+        });
+      }
+    });
+
+    // add to options
+    function createLi(types, name) {
+      if (Object.keys(types).length > 0) {
+        let li = Object.keys(types).map(type =>
+          `<li><input id="${name}--${type}" type="checkbox" checked><label for="${name}--${type}">${type}</label></li>`
+        );
+        let ul = document.querySelector(`.${name} > ul`) || document.createElement('ul');
+        ul.innerHTML = li.join('');
+        document.querySelector(`.${name}`).appendChild(ul);
+      }
+      else {
+        let ul = document.querySelector(`.${name} > ul`);
+        if (ul) { ul.parentNode.removeChild(ul); }
+      }
+    }
+    createLi(reachTypes, 'reach');
+    createLi(posTypes, 'pos');
+  }
+
   // export public functions
   return {
     init,