[turbolizer] Add 2 buttons; add middle-click on input; add comment in UI.

tools/turbolizer/graph-view.js

Index: tools/turbolizer/graph-view.js
diff --git a/tools/turbolizer/graph-view.js b/tools/turbolizer/graph-view.js
index aa1b638f57ba248de205754882c872ff48231405..83d541acf0725017f73a14f21e43234a56879238 100644
--- a/tools/turbolizer/graph-view.js
+++ b/tools/turbolizer/graph-view.js
@@ -169,6 +169,14 @@ class GraphView extends View {
       graph.toggleTypes();
     });
 
+    d3.select("#show-effects").on("click", function() {
+      graph.showEffects();
+    });
+
+    d3.select("#hide-control").on("click", function() {
+      graph.hideControl();
+    });
+
     d3.select("#search-input").on("keydown", function() {
       if (d3.event.keyCode == 13) {
         graph.state.selection.clear();
@@ -612,10 +620,34 @@ class GraphView extends View {
           .on("mousedown", function(d){
             var components = this.id.split(',');
             var node = graph.nodeMap[components[3]];
-            var edge = node.inputs[components[2]];
-            var visible = !edge.isVisible();
-            node.setInputVisibility(components[2], visible);
-            d3.event.stopPropagation();
+            var edgeIndex = components[2];
+            var edge = node.inputs[edgeIndex];
+            if (d3.event.button == 0) {
+              // Left mouse button click: show the edge and the node it leads
+              // to.
+              var visible = !edge.isVisible();
+              node.setInputVisibility(components[2], visible);
+              d3.event.stopPropagation();
+            } else {
+              // Alternate mouse button click: as above, but more: if we
+              // clicked the nth input bubble, expand all nth input bubbles of
+              // nodes that have the same opcode. If in this process we make
+              // more nodes visible that have the same opcode, also expand
+              // their nth input bubbles, until we stabilize.
+              filterActionUntilStabilize(graph.nodes,
+                // filter
+                function(otherNode) {
+                  return (node.opcode === otherNode.opcode) &&
+                         (otherNode.visible) &&
+                         (otherNode.inputs.length >= edgeIndex) &&
+                         (!otherNode.inputs[edgeIndex].visible);
+                },
+                // action
+                function(otherNode) {
+                  otherNode.setInputVisibility(edgeIndex, true);
+                });
+            }
+
             graph.updateGraphVisibility();
           });
       }
@@ -815,6 +847,47 @@ class GraphView extends View {
     graph.updateGraphVisibility();
   }
 
+  showEffects() {
+    var graph = this;
+
+    // Loop over all the nodes to find nodes which are visible. All effect
+    // edges to a visible node should become visible, as well as the source
+    // node of such edges. As long as more nodes become visible, repeat the
+    // process.
+
+    filterActionUntilStabilize(graph.nodes,
+      // filter
+      function(node) {
+        return node.visible;
+      },
+      // action
+      function(node) {
+        node.inputs.forEach(function(inputEdge) {
+          if (node !== inputEdge.target) {
+            window.alert("Error: target of an input edge should be the node itself");
+          }
+          if (!inputEdge.visible && inputEdge.type == "effect") {
+            node.setInputVisibility(inputEdge.index, true);
+          }
+        });
+      }
+    );
+
+    graph.updateGraphVisibility();
+  }
+
+  hideControl() {
+    var graph = this;
+
+    graph.edges.forEach(function(edge) {
+      if (edge.type == "control") {
+        edge.visible = false;
+      }
+    });
+
+    graph.updateGraphVisibility();
+  }
+
   viewSelection() {
     var graph = this;
     var minX, maxX, minY, maxY;