Improved active and incoming / outgoing edges

stacks · Jul 22, 2014 · 7326e88 · 7326e88
1 parent 7986bd4
commit 7326e88
Showing 1 changed file with 39 additions and 7 deletions.
diff --git a/database/morphism-properties-relation/index.html b/database/morphism-properties-relation/index.html
@@ -48,6 +48,18 @@
   stroke-width: 1.5px;
 }
 
+text.inactive {
+  fill: #eee;
+  z-index: 2;
+}
+
+text.incoming,
+text.outgoing,
+text.active {
+  fill: black;
+  z-index: 1;
+}
+
 
 text {
   font: 10px sans-serif;
@@ -128,23 +140,43 @@
       //$("circle").mouseover(highlightRelated);
       $("circle").mouseout(backToNormal);
 
-      function highlightRelated(node) {
-
-        $("circle").attr("class", "inactive");
-        $("circle:nth-child(" + (node.index + 1) + ")").attr("class", "active");
+      function floodOutgoing(nodeName) {
+        console.log(nodeName);
 
-        // loop over links and see which ones are close
         for (var i = 0; i < links.length; i++) {
-          if (links[i].source.name == node.name)
+          if (links[i].source.name == nodeName) {
+            $("text:nth-child(" + (links[i].target.index + 1) + ")").attr("class", "outgoing");
             $("circle:nth-child(" + (links[i].target.index + 1) + ")").attr("class", "outgoing");
-          if (links[i].target.name == node.name)
+            floodOutgoing(links[i].target.name);
+          }
+        }
+      }
+
+      function floodIncoming(nodeName) {
+        for (var i = 0; i < links.length; i++) {
+          if (links[i].target.name == nodeName) {
+            $("text:nth-child(" + (links[i].source.index + 1) + ")").attr("class", "incoming");
             $("circle:nth-child(" + (links[i].source.index + 1) + ")").attr("class", "incoming");
+            floodIncoming(links[i].source.name);
+          }
         }
       }
 
+      function highlightRelated(node) {
+        $("circle").attr("class", "inactive");
+        $("text").attr("class", "inactive");
+
+        $("circle:nth-child(" + (node.index + 1) + ")").attr("class", "active");
+        $("text:nth-child(" + (node.index + 1) + ")").attr("class", "active");
+
+        floodOutgoing(node.name);
+        floodIncoming(node.name);
+      }
+
       function backToNormal(node) {
         console.log("normal");
         $("circle").attr("class", "");
+        $("text").attr("class", "");
       }
 
       var text = svg.append("g").selectAll("text")