[turbolizer] Features and bug-fixes

tools/turbolizer/graph-view.js

 // Copyright 2015 the V8 project authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 "use strict";
 
 class GraphView extends View {
   constructor (d3, id, nodes, edges, broker) {
     super(id, broker);
     var graph = this;
@@ skipping 155 matching lines @@
     });
 
     d3.select("#toggle-types").on("click", function() {
       graph.toggleTypes();
     });
 
     d3.select("#search-input").on("keydown", function() {
       if (d3.event.keyCode == 13) {
         graph.state.selection.clear();
         var reg = new RegExp(this.value);
+        var filterFunction = function(n) {
+          return (reg.exec(n.getDisplayLabel()) != null ||
+                  (graph.state.showTypes && reg.exec(n.getDisplayType())) ||
+                  reg.exec(n.opcode) != null);
+        };
+        if (d3.event.ctrlKey) {
+          graph.nodes.forEach(function(n, i) {
+            if (filterFunction(n)) {
+              n.visible = true;
+            }
+          });
+          graph.updateGraphVisibility();
+        }
         var selected = graph.visibleNodes.each(function(n) {
-          if (reg.exec(n.getDisplayLabel()) != null ||
-              (graph.state.showTypes && reg.exec(n.getDisplayType())) ||
-              reg.exec(n.opcode) != null) {
+          if (filterFunction(n)) {
             graph.state.selection.select(this, true);
           }
         });
+        graph.connectVisibleSelectedNodes();
+        graph.updateGraphVisibility();
         this.blur();
         graph.viewSelection();
       }
+      d3.event.stopPropagation();
     });
 
     // listen for key events
     d3.select(window).on("keydown", function(e){
       graph.svgKeyDown.call(graph);
     })
       .on("keyup", function(){
         graph.svgKeyUp.call(graph);
       });
     svg.on("mousedown", function(d){graph.svgMouseDown.call(graph, d);});
@@ skipping 40 matching lines @@
   }
 
   dragmove(d) {
     var graph = this;
     d.x += d3.event.dx;
     d.y += d3.event.dy;
     graph.updateGraphVisibility();
   }
 
   initializeContent(data, rememberedSelection) {
-    this.createGraph(data);
+    this.createGraph(data, rememberedSelection);
     if (rememberedSelection != null) {
       this.attachSelection(rememberedSelection);
+      this.connectVisibleSelectedNodes();
     }
     this.updateGraphVisibility();
   }
 
   deleteContent() {
     if (this.visibleNodes) {
       this.nodes = [];
       this.edges = [];
       this.nodeMap = [];
       this.updateGraphVisibility();
     }
   };
 
-  createGraph(data) {
+  createGraph(data, initiallyVisibileIds) {
     var g = this;
     g.nodes = data.nodes;
     g.nodeMap = [];
     var textMeasure = document.getElementById('text-measure');
     g.nodes.forEach(function(n, i){
       n.__proto__ = Node;
       n.visible = false;
       n.x = 0;
       n.y = 0;
       n.rank = MAX_RANK_SENTINEL;
@@ skipping 18 matching lines @@
       var newEdge = new Edge(t, e.index, s, e.type);
       t.inputs.push(newEdge);
       s.outputs.push(newEdge);
       g.edges.push(newEdge);
       if (e.type == 'control') {
         s.cfg = true;
       }
     });
     g.nodes.forEach(function(n, i) {
       n.visible = isNodeInitiallyVisible(n);
+      if (initiallyVisibileIds != undefined) {
+        if (initiallyVisibileIds.has(n.id)) {
+          n.visible = true;
+        }
+      }
     });
     g.fitGraphViewToWindow();
     g.updateGraphVisibility();
     g.layoutGraph();
     g.updateGraphVisibility();
     g.viewWholeGraph();
   }
 
+  connectVisibleSelectedNodes() {
+    var graph = this;
+    graph.state.selection.selection.forEach(function(element) {
+      var edgeNumber = 0;
+      element.__data__.inputs.forEach(function(edge) {
+        if (edge.source.visible && edge.target.visible) {
+          edge.visible = true;
+        }
+      });
+      element.__data__.outputs.forEach(function(edge) {
+        if (edge.source.visible && edge.target.visible) {
+          edge.visible = true;
+        }
+      });
+    });
+  }
+
   updateInputAndOutputBubbles() {
     var g = this;
     var s = g.visibleBubbles;
     s.classed("filledBubbleStyle", function(c) {
       var components = this.id.split(',');
       if (components[0] == "ib") {
         var edge = g.nodeMap[components[3]].inputs[components[2]];
         return edge.isVisible();
       } else {
         return g.nodeMap[components[1]].areAnyOutputsVisible() == 2;
@@ skipping 33 matching lines @@
       this.visibleNodes.each(function(n) {
         if (s.has(this.__data__.id)) {
           graph.state.selection.select(this, true);
         }
       });
     }
   }
 
   detachSelection() {
     var selection = this.state.selection.detachSelection();
-    var result = new Set();
+    var s = new Set();
     for (var i of selection) {
-      result.add(i.__data__.id);
+      s.add(i.__data__.id);
     };
-    return result;
+    return s;
   }
 
   pathMouseDown(path, d) {
     d3.event.stopPropagation();
     this.state.selection.clear();
     this.state.selection.add(path);
   };
 
   nodeMouseDown(node, d) {
     d3.event.stopPropagation();
@@ skipping 52 matching lines @@
       }
     });
     graph.updateGraphVisibility();
     graph.visibleNodes.filter(function(n) { return map[n.id]; })
       .each(function(n) {
         var selection = graph.state.selection;
         selection.select(d3.select(this), selected);
       });
   }
 
+  selectAllNodes(inEdges, filter) {
+    var graph = this;
+    if (!d3.event.shiftKey) {
+      graph.state.selection.clear();
+    }
+    graph.visibleNodes.each(function(n) {
+      graph.state.selection.select(this, true);
+    });
+    graph.updateGraphVisibility();
+  }
+
   svgMouseDown() {
     this.state.graphMouseDown = true;
   }
 
   svgMouseUp() {
     var graph = this,
     state = graph.state;
     if (state.justScaleTransGraph) {
       // Dragged
       state.justScaleTransGraph = false;
     } else {
       // Clicked
       if (state.mouseDownNode == null) {
         graph.state.selection.clear();
       }
     }
     state.mouseDownNode = null;
     state.graphMouseDown = false;
   }
 
   svgKeyDown() {
     var state = this.state;
     var graph = this;
 
     // Don't handle key press repetition
     if(state.lastKeyDown !== -1) return;
 
-    var getEdgeFrontier = function(inEdges) {
+    var getEdgeFrontier = function(inEdges, edgeFilter) {
       var frontierSet = new Set();
+      var newState = true;
+      if (d3.event.ctrlKey) {
+        state.selection.selection.forEach(function(element) {
+          var edges = inEdges ? element.__data__.inputs : element.__data__.outputs;
+          var edgeNumber = 0;
+          // Control key toggles edges rather than just turning them on
+          edges.forEach(function(i) {
+            if (edgeFilter == undefined || edgeFilter(i, edgeNumber)) {
+              if (i.visible) {
+                newState = false;
+              }
+            }
+            ++edgeNumber;
+          });
+        });
+      }
       state.selection.selection.forEach(function(element) {
-        var nodes = inEdges ? element.__data__.inputs : element.__data__.outputs;
-        nodes.forEach(function(i) {
-          i.visible = true;
-          var candidate = inEdges ? i.source : i.target;
-          candidate.visible = true;
-          frontierSet.add(candidate);
+        var edges = inEdges ? element.__data__.inputs : element.__data__.outputs;
+        var edgeNumber = 0;
+        edges.forEach(function(i) {
+          if (edgeFilter == undefined || edgeFilter(i, edgeNumber)) {
+            i.visible = newState;
+            if (newState) {
+              var candidate = inEdges ? i.source : i.target;
+              candidate.visible = true;
+              frontierSet.add(candidate);
+            }
+          }
+          ++edgeNumber;
         });
       });
       graph.updateGraphVisibility();
-      return graph.visibleNodes.filter(function(n) {
-        return frontierSet.has(n);
-      });
+      if (newState) {
+        return graph.visibleNodes.filter(function(n) {
+          return frontierSet.has(n);
+        });
+      } else {
+        return undefined;
+      }
+    }
+
+    var selectNodesThroughEdges = function(inEdges, filter, reselect) {
+      var frontier = getEdgeFrontier(inEdges, filter);
+      if (frontier != undefined) {
+        if (reselect) {
+          if (!d3.event.shiftKey) {
+            state.selection.clear();
+          }
+          frontier.each(function(n) {
+            state.selection.select(this, true);
+          });
+        }
+        graph.updateGraphVisibility();
+      }
+      allowRepetition = false;
     }
 
     var allowRepetition = true;
     switch(d3.event.keyCode) {
+    case 49:
+    case 50:
+    case 51:
+    case 52:
+    case 53:
+    case 54:
+    case 55:
+    case 56:
+    case 57:
+      // '1'-'9'
+      selectNodesThroughEdges(true,
+                              (edge, index) => { return index == (d3.event.keyCode - 49); },
+                              false);
+      break;
+    case 67:
+      // 'c'
+      selectNodesThroughEdges(true,
+                              (edge, index) => { return edge.type == 'control'; },
+                              false);
+      break;
+    case 69:
+      // 'e'
+      selectNodesThroughEdges(true,
+                              (edge, index) => { return edge.type == 'effect'; },
+                              false);
+      break;
+    case 79:
+      // 'o'
+      selectNodesThroughEdges(false, undefined, false);
+      break;
+    case 73:
+      // 'i'
+      selectNodesThroughEdges(true, undefined, false);
+      break;
+    case 65:
+      // 'a'
+      graph.selectAllNodes();
+      allowRepetition = false;
+      break;
     case 38:
     case 40: {
-      var frontier = getEdgeFrontier(d3.event.keyCode == 38);
-      if (!d3.event.shiftKey) {
-        state.selection.clear();
-      }
-      frontier.each(function(n) {
-        state.selection.select(this, true);
-      });
-      graph.updateGraphVisibility();
-      allowRepetition = false;
+      selectNodesThroughEdges(d3.event.keyCode == 38, undefined, true);
       break;
     }
     }
     if (!allowRepetition) {
       state.lastKeyDown = d3.event.keyCode;
     }
   }
 
   svgKeyUp() {
     this.state.lastKeyDown = -1
@@ skipping 345 matching lines @@
   }
 
   viewWholeGraph() {
     var graph = this;
     var minScale = graph.minScale();
     var translation = [0, 0];
     translation = graph.getVisibleTranslation(translation, minScale);
     graph.translateClipped(translation, minScale);
   }
 }