[turbolizer] Performance improvements for selection in graph & schedule

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 231 matching lines @@
   }
 
   getNodeHeight(graph) {
     if (this.state.showTypes) {
       return DEFAULT_NODE_HEIGHT + TYPE_HEIGHT;
     } else {
       return DEFAULT_NODE_HEIGHT;
     }
   }
 
+  getEdgeFrontier(nodes, inEdges, edgeFilter) {
+    let frontier = new Set();
+    nodes.forEach(function(element) {
+      var edges = inEdges ? element.__data__.inputs : element.__data__.outputs;
+      var edgeNumber = 0;
+      edges.forEach(function(edge) {
+        if (edgeFilter == undefined || edgeFilter(edge, edgeNumber)) {
+          frontier.add(edge);
+        }
+        ++edgeNumber;
+      });
+    });
+    return frontier;
+  }
+
+  getNodeFrontier(nodes, inEdges, edgeFilter) {
+    let graph = this;
+    var frontier = new Set();
+    var newState = true;
+    var edgeFrontier = graph.getEdgeFrontier(nodes, inEdges, edgeFilter);
+    // Control key toggles edges rather than just turning them on
+    if (d3.event.ctrlKey) {
+      edgeFrontier.forEach(function(edge) {
+        if (edge.visible) {
+          newState = false;
+        }
+      });
+    }
+    edgeFrontier.forEach(function(edge) {
+      edge.visible = newState;
+      if (newState) {
+        var node = inEdges ? edge.source : edge.target;
+        node.visible = true;
+        frontier.add(node);
+      }
+    });
+    graph.updateGraphVisibility();
+    if (newState) {
+      return graph.visibleNodes.filter(function(n) {
+        return frontier.has(n);
+      });
+    } else {
+      return undefined;
+    }
+  }
+
   dragmove(d) {
     var graph = this;
     d.x += d3.event.dx;
     d.y += d3.event.dy;
     graph.updateGraphVisibility();
   }
 
   initializeContent(data, rememberedSelection) {
     this.createGraph(data, rememberedSelection);
     if (rememberedSelection != null) {
@@ skipping 209 matching lines @@
         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.state.selection.select(graph.visibleNodes[0], true);
     graph.updateGraphVisibility();
   }
 
   svgMouseDown() {
     this.state.graphMouseDown = true;
   }
 
   svgMouseUp() {
     var graph = this,
     state = graph.state;
@@ skipping 10 matching lines @@
     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, 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 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();
-      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);
+    var showSelectionFrontierNodes = function(inEdges, filter, select) {
+      var frontier = graph.getNodeFrontier(state.selection.selection, inEdges, filter);
       if (frontier != undefined) {
-        if (reselect) {
+        if (select) {
           if (!d3.event.shiftKey) {
             state.selection.clear();
           }
-          frontier.each(function(n) {
-            state.selection.select(this, true);
-          });
+          state.selection.select(frontier[0], true);
         }
         graph.updateGraphVisibility();
       }
       allowRepetition = false;
     }
 
     var allowRepetition = true;
     var eventHandled = true; // unless the below switch defaults
     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);
+      showSelectionFrontierNodes(true,
+          (edge, index) => { return index == (d3.event.keyCode - 49); },
+          false);
       break;
     case 67:
       // 'c'
-      selectNodesThroughEdges(true,
-                              (edge, index) => { return edge.type == 'control'; },
-                              false);
+      showSelectionFrontierNodes(true,
+          (edge, index) => { return edge.type == 'control'; },
+          false);
       break;
     case 69:
       // 'e'
-      selectNodesThroughEdges(true,
-                              (edge, index) => { return edge.type == 'effect'; },
-                              false);
+      showSelectionFrontierNodes(true,
+          (edge, index) => { return edge.type == 'effect'; },
+          false);
       break;
     case 79:
       // 'o'
-      selectNodesThroughEdges(false, undefined, false);
+      showSelectionFrontierNodes(false, undefined, false);
       break;
     case 73:
       // 'i'
-      selectNodesThroughEdges(true, undefined, false);
+      showSelectionFrontierNodes(true, undefined, false);
       break;
     case 65:
       // 'a'
       graph.selectAllNodes();
       allowRepetition = false;
       break;
     case 38:
     case 40: {
-      selectNodesThroughEdges(d3.event.keyCode == 38, undefined, true);
+      showSelectionFrontierNodes(d3.event.keyCode == 38, undefined, true);
       break;
     }
     default:
       eventHandled = false;
       break;
     }
     if (eventHandled) {
       d3.event.preventDefault();
     }
     if (!allowRepetition) {
@@ skipping 351 matching lines @@
   }
 
   viewWholeGraph() {
     var graph = this;
     var minScale = graph.minScale();
     var translation = [0, 0];
     translation = graph.getVisibleTranslation(translation, minScale);
     graph.translateClipped(translation, minScale);
   }
 }