Add a html-based visualizer for TurboFan graphs

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;
+
+    var svg = this.divElement.append("svg").attr('version','1.1').attr("width", "100%");
+    graph.svg = svg;
+
+    graph.nodes = nodes || [];
+    graph.edges = edges || [];
+
+    graph.minGraphX = 0;
+    graph.maxGraphX = 1;
+    graph.minGraphY = 0;
+    graph.maxGraphY = 1;
+
+    graph.state = {
+      selection: null,
+      mouseDownNode: null,
+      justDragged: false,
+      justScaleTransGraph: false,
+      lastKeyDown: -1,
+      showTypes: false
+    };
+
+    var selectionHandler = {
+      clear: function() {
+        broker.clear(selectionHandler);
+      },
+      select: function(items, selected) {
+        var ranges = [];
+        for (var d of items) {
+          if (selected) {
+            d.classList.add("selected");
+          } else {
+            d.classList.remove("selected");
+          }
+          var data = d.__data__;
+          ranges.push([data.pos, data.pos + 1, data.id]);
+        }
+        broker.select(selectionHandler, ranges, selected);
+      },
+      selectionDifference: function(span1, inclusive1, span2, inclusive2) {
+        // Should not be called
+      },
+      brokeredSelect: function(ranges, selected) {
+        var test = [].entries().next();
+        var selection = graph.nodes
+          .filter(function(n) {
+            var pos = n.pos;
+            for (var range of ranges) {
+              var start = range[0];
+              var end = range[1];
+              var id = range[2];
+              if (end != undefined) {
+                if (pos >= start && pos < end) {
+                  return true;
+                }
+              } else if (start != undefined) {
+                if (pos === start) {
+                  return true;
+                }
+              } else {
+                if (n.id === id) {
+                  return true;
+                }
+              }
+            }
+            return false;
+          });
+        var newlySelected = new Set();
+        selection.forEach(function(n) {
+          newlySelected.add(n);
+          if (!n.visible) {
+            n.visible = true;
+          }
+        });
+        graph.updateGraphVisibility();
+        graph.visibleNodes.each(function(n) {
+          if (newlySelected.has(n)) {
+            graph.state.selection.select(this, selected);
+          }
+        });
+        graph.updateGraphVisibility();
+        graph.viewSelection();
+      },
+      brokeredClear: function() {
+        graph.state.selection.clear();
+      }
+    };
+    broker.addSelectionHandler(selectionHandler);
+
+    graph.state.selection = new Selection(selectionHandler);
+
+    var defs = svg.append('svg:defs');
+    defs.append('svg:marker')
+      .attr('id', 'end-arrow')
+      .attr('viewBox', '0 -4 8 8')
+      .attr('refX', 2)
+      .attr('markerWidth', 2.5)
+      .attr('markerHeight', 2.5)
+      .attr('orient', 'auto')
+      .append('svg:path')
+      .attr('d', 'M0,-4L8,0L0,4');
+
+    this.graphElement = svg.append("g");
+    graph.visibleEdges = this.graphElement.append("g").selectAll("g");
+    graph.visibleNodes = this.graphElement.append("g").selectAll("g");
+
+    graph.drag = d3.behavior.drag()
+      .origin(function(d){
+        return {x: d.x, y: d.y};
+      })
+      .on("drag", function(args){
+        graph.state.justDragged = true;
+        graph.dragmove.call(graph, args);
+      })
+
+    d3.select("#upload").on("click", function(){
+      document.getElementById("hidden-file-upload").click();
+    });
+
+    d3.select("#layout").on("click", function(){
+      graph.updateGraphVisibility();
+      graph.layoutGraph();
+      graph.updateGraphVisibility();
+      graph.viewWholeGraph();
+    });
+
+    d3.select("#show-all").on("click", function(){
+      graph.nodes.filter(function(n) { n.visible = true; })
+      graph.edges.filter(function(e) { e.visible = true; })
+      graph.updateGraphVisibility();
+      graph.viewWholeGraph();
+    });
+
+    d3.select("#hide-unselected").on("click", function() {
+      var unselected = graph.visibleNodes.filter(function(n) {
+        return !this.classList.contains("selected");
+      });
+      unselected.each(function(n) {
+        n.visible = false;
+      });
+      graph.updateGraphVisibility();
+    });
+
+    d3.select("#hide-selected").on("click", function() {
+      var selected = graph.visibleNodes.filter(function(n) {
+        return this.classList.contains("selected");
+      });
+      selected.each(function(n) {
+        n.visible = false;
+      });
+      graph.state.selection.clear();
+      graph.updateGraphVisibility();
+    });
+
+    d3.select("#zoom-selection").on("click", function() {
+      graph.viewSelection();
+    });
+
+    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 selected = graph.visibleNodes.each(function(n) {
+          if (reg.exec(n.getDisplayLabel()) != null ||
+              (graph.state.showTypes && reg.exec(n.getDisplayType())) ||
+              reg.exec(n.opcode) != null) {
+            graph.state.selection.select(this, true);
+          }
+        });
+        this.blur();
+        graph.viewSelection();
+      }
+    });
+
+    // 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);});
+    svg.on("mouseup", function(d){graph.svgMouseUp.call(graph, d);});
+
+    graph.dragSvg = d3.behavior.zoom()
+      .on("zoom", function(){
+        if (d3.event.sourceEvent.shiftKey){
+          return false;
+        } else{
+          graph.zoomed.call(graph);
+        }
+        return true;
+      })
+      .on("zoomstart", function(){
+        if (!d3.event.sourceEvent.shiftKey) d3.select('body').style("cursor", "move");
+      })
+      .on("zoomend", function(){
+        d3.select('body').style("cursor", "auto");
+      });
+
+    svg.call(graph.dragSvg).on("dblclick.zoom", null);
+  }
+
+  static get selectedClass() {
+    return "selected";
+  }
+  static get rectClass() {
+    return "nodeStyle";
+  }
+  static get activeEditId() {
+    return "active-editing";
+  }
+  static get nodeRadius() {
+    return 50;
+  }
+
+  getNodeHeight(graph) {
+    if (this.state.showTypes) {
+      return DEFAULT_NODE_HEIGHT + TYPE_HEIGHT;
+    } else {
+      return DEFAULT_NODE_HEIGHT;
+    }
+  }
+
+  dragmove(d) {
+    var graph = this;
+    d.x += d3.event.dx;
+    d.y += d3.event.dy;
+    graph.updateGraphVisibility();
+  }
+
+  initializeContent(data, rememberedSelection) {
+    this.createGraph(data);
+    if (rememberedSelection != null) {
+      this.attachSelection(rememberedSelection);
+    }
+    this.updateGraphVisibility();
+  }
+
+  deleteContent() {
+    if (this.visibleNodes) {
+      this.nodes = [];
+      this.edges = [];
+      this.nodeMap = [];
+      this.updateGraphVisibility();
+    }
+  };
+
+  createGraph(data) {
+    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;
+      n.inputs = [];
+      n.outputs = [];
+      n.rpo = -1;
+      n.outputApproach = MINIMUM_NODE_OUTPUT_APPROACH;
+      n.cfg = n.control;
+      g.nodeMap[n.id] = n;
+      n.displayLabel = n.getDisplayLabel();
+      textMeasure.textContent = n.getDisplayLabel();
+      var width = textMeasure.getComputedTextLength();
+      textMeasure.textContent = n.getDisplayType();
+      width = Math.max(width, textMeasure.getComputedTextLength());
+      n.width = Math.alignUp(width + NODE_INPUT_WIDTH * 2,
+                             NODE_INPUT_WIDTH);
+    });
+    g.edges = [];
+    data.edges.forEach(function(e, i){
+      var t = g.nodeMap[e.target];
+      var s = g.nodeMap[e.source];
+      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);
+    });
+    g.fitGraphViewToWindow();
+    g.updateGraphVisibility();
+    g.layoutGraph();
+    g.updateGraphVisibility();
+    g.viewWholeGraph();
+  }
+
+  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;
+      }
+    }).classed("halfFilledBubbleStyle", function(c) {
+      var components = this.id.split(',');
+      if (components[0] == "ib") {
+        var edge = g.nodeMap[components[3]].inputs[components[2]];
+        return false;
+      } else {
+        return g.nodeMap[components[1]].areAnyOutputsVisible() == 1;
+      }
+    }).classed("bubbleStyle", 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() == 0;
+      }
+    });
+    s.each(function(c) {
+      var components = this.id.split(',');
+      if (components[0] == "ob") {
+        var from = g.nodeMap[components[1]];
+        var x = from.getOutputX();
+        var y = g.getNodeHeight() + DEFAULT_NODE_BUBBLE_RADIUS / 2 + 4;
+        var transform = "translate(" + x + "," + y + ")";
+        this.setAttribute('transform', transform);
+      }
+    });
+  }
+
+  attachSelection(s) {
+    var graph = this;
+    if (s.size != 0) {
+      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();
+    for (var i of selection) {
+      result.add(i.__data__.id);
+    };
+    return result;
+  }
+
+  pathMouseDown(path, d) {
+    d3.event.stopPropagation();
+    this.state.selection.clear();
+    this.state.selection.add(path);
+  };
+
+  nodeMouseDown(node, d) {
+    d3.event.stopPropagation();
+    this.state.mouseDownNode = d;
+  }
+
+  nodeMouseUp(d3node, d) {
+    var graph = this,
+    state = graph.state,
+    consts = graph.consts;
+
+    var mouseDownNode = state.mouseDownNode;
+
+    if (!mouseDownNode) return;
+
+    if (mouseDownNode !== d){
+      // we're in a different node: create new edge for mousedown edge and add to graph
+      var newEdge = {source: mouseDownNode, target: d};
+      var filtRes = graph.visibleEdges.filter(function(d){
+        if (d.source === newEdge.target && d.target === newEdge.source){
+          graph.edges.splice(graph.edges.indexOf(d), 1);
+        }
+        return d.source === newEdge.source && d.target === newEdge.target;
+      });
+      if (!filtRes[0].length){
+        graph.edges.push(newEdge);
+        graph.updateGraphVisibility();
+      }
+    } else{
+      // we're in the same node
+      if (state.justDragged) {
+        // dragged, not clicked
+        state.justDragged = false;
+      } else{
+        // clicked, not dragged
+        var extend = d3.event.shiftKey;
+        var selection = graph.state.selection;
+        if (!extend) {
+          selection.clear();
+        }
+        selection.select(d3node[0][0], true);
+      }
+    }
+  }
+
+  selectSourcePositions(start, end, selected) {
+    var graph = this;
+    var map = [];
+    var sel = graph.nodes.filter(function(n) {
+      var pos = (n.pos === undefined)
+        ? -1
+        : n.getFunctionRelativeSourcePosition(graph);
+      if (pos >= start && pos < end) {
+        map[n.id] = true;
+        n.visible = true;
+      }
+    });
+    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);
+      });
+  }
+
+  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 frontierSet = new Set();
+      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);
+        });
+      });
+      graph.updateGraphVisibility();
+      return graph.visibleNodes.filter(function(n) {
+        return frontierSet.has(n);
+      });
+    }
+
+    var allowRepetition = true;
+    switch(d3.event.keyCode) {
+    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;
+      break;
+    }
+    }
+    if (!allowRepetition) {
+      state.lastKeyDown = d3.event.keyCode;
+    }
+  }
+
+  svgKeyUp() {
+    this.state.lastKeyDown = -1
+  };
+
+  layoutEdges() {
+    var graph = this;
+    graph.maxGraphX = graph.maxGraphNodeX;
+    this.visibleEdges.attr("d", function(edge){
+      return edge.generatePath(graph);
+    });
+  }
+
+  layoutGraph() {
+    layoutNodeGraph(this);
+  }
+
+  // call to propagate changes to graph
+  updateGraphVisibility() {
+
+    var graph = this,
+    state = graph.state;
+
+    var filteredEdges = graph.edges.filter(function(e) { return e.isVisible(); });
+    var visibleEdges = graph.visibleEdges.data(filteredEdges, function(edge) {
+      return edge.stringID();
+    });
+
+    // add new paths
+    visibleEdges.enter()
+      .append('path')
+      .style('marker-end','url(#end-arrow)')
+      .classed('hidden', function(e) {
+        return !e.isVisible();
+      })
+      .attr("id", function(edge){ return "e," + edge.stringID(); })
+      .on("mousedown", function(d){
+        graph.pathMouseDown.call(graph, d3.select(this), d);
+      })
+
+    // Set the correct styles on all of the paths
+    visibleEdges.classed('value', function(e) {
+      return e.type == 'value' || e.type == 'context';
+    }).classed('control', function(e) {
+      return e.type == 'control';
+    }).classed('effect', function(e) {
+      return e.type == 'effect';
+    }).classed('frame-state', function(e) {
+      return e.type == 'frame-state';
+    }).attr('stroke-dasharray', function(e) {
+      if (e.type == 'frame-state') return "10,10";
+      return (e.type == 'effect') ? "5,5" : "";
+    });
+
+    // remove old links
+    visibleEdges.exit().remove();
+
+    graph.visibleEdges = visibleEdges;
+
+    // update existing nodes
+    var filteredNodes = graph.nodes.filter(function(n) { return n.visible; });
+    graph.visibleNodes = graph.visibleNodes.data(filteredNodes, function(d) {
+      return d.id;
+    });
+    graph.visibleNodes.attr("transform", function(n){
+      return "translate(" + n.x + "," + n.y + ")";
+    }).select('rect').
+      attr(HEIGHT, function(d) { return graph.getNodeHeight(); });
+
+    // add new nodes
+    var newGs = graph.visibleNodes.enter()
+      .append("g");
+
+    newGs.classed("control", function(n) { return n.isControl(); })
+      .classed("javascript", function(n) { return n.isJavaScript(); })
+      .classed("input", function(n) { return n.isInput(); })
+      .classed("simplified", function(n) { return n.isSimplified(); })
+      .classed("machine", function(n) { return n.isMachine(); })
+      .attr("transform", function(d){ return "translate(" + d.x + "," + d.y + ")";})
+      .on("mousedown", function(d){
+        graph.nodeMouseDown.call(graph, d3.select(this), d);
+      })
+      .on("mouseup", function(d){
+        graph.nodeMouseUp.call(graph, d3.select(this), d);
+      })
+      .call(graph.drag);
+
+    newGs.append("rect")
+      .attr("rx", 10)
+      .attr("ry", 10)
+      .attr(WIDTH, function(d) { return d.getTotalNodeWidth(); })
+      .attr(HEIGHT, function(d) { return graph.getNodeHeight(); })
+
+    function appendInputAndOutputBubbles(g, d) {
+      for (var i = 0; i < d.inputs.length; ++i) {
+        var x = d.getInputX(i);
+        var y = -DEFAULT_NODE_BUBBLE_RADIUS / 2 - 4;
+        var s = g.append('circle')
+          .classed("filledBubbleStyle", function(c) {
+            return d.inputs[i].isVisible();
+          } )
+          .classed("bubbleStyle", function(c) {
+            return !d.inputs[i].isVisible();
+          } )
+          .attr("id", "ib," + d.inputs[i].stringID())
+          .attr("r", DEFAULT_NODE_BUBBLE_RADIUS)
+          .attr("transform", function(d) {
+            return "translate(" + x + "," + y + ")";
+          })
+          .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();
+            graph.updateGraphVisibility();
+          });
+      }
+      if (d.outputs.length != 0) {
+        var x = d.getOutputX();
+        var y = graph.getNodeHeight() + DEFAULT_NODE_BUBBLE_RADIUS / 2 + 4;
+        var s = g.append('circle')
+          .classed("filledBubbleStyle", function(c) {
+            return d.areAnyOutputsVisible() == 2;
+          } )
+          .classed("halFilledBubbleStyle", function(c) {
+            return d.areAnyOutputsVisible() == 1;
+          } )
+          .classed("bubbleStyle", function(c) {
+            return d.areAnyOutputsVisible() == 0;
+          } )
+          .attr("id", "ob," + d.id)
+          .attr("r", DEFAULT_NODE_BUBBLE_RADIUS)
+          .attr("transform", function(d) {
+            return "translate(" + x + "," + y + ")";
+          })
+          .on("mousedown", function(d) {
+            d.setOutputVisibility(d.areAnyOutputsVisible() == 0);
+            d3.event.stopPropagation();
+            graph.updateGraphVisibility();
+          });
+      }
+    }
+
+    newGs.each(function(d){
+      appendInputAndOutputBubbles(d3.select(this), d);
+    });
+
+    newGs.each(function(d){
+      d3.select(this).append("text")
+        .classed("label", true)
+        .attr("text-anchor","right")
+        .attr("dx", "5")
+        .attr("dy", DEFAULT_NODE_HEIGHT / 2 + 5)
+        .append('tspan')
+        .text(function(l) {
+          return d.getDisplayLabel();
+        })
+        .append("title")
+        .text(function(l) {
+          return d.getLabel();
+        })
+      if (d.type != undefined) {
+        d3.select(this).append("text")
+          .classed("label", true)
+          .classed("type", true)
+          .attr("text-anchor","right")
+          .attr("dx", "5")
+          .attr("dy", DEFAULT_NODE_HEIGHT / 2 + TYPE_HEIGHT + 5)
+          .append('tspan')
+          .text(function(l) {
+            return d.getDisplayType();
+          })
+          .append("title")
+          .text(function(l) {
+            return d.getType();
+          })
+      }
+    });
+
+    graph.visibleNodes.select('.type').each(function (d) {
+      this.setAttribute('visibility', graph.state.showTypes ? 'visible' : 'hidden');
+    });
+
+    // remove old nodes
+    graph.visibleNodes.exit().remove();
+
+    graph.visibleBubbles = d3.selectAll('circle');
+
+    graph.updateInputAndOutputBubbles();
+
+    graph.layoutEdges();
+
+    graph.svg.style.height = '100%';
+  }
+
+  getVisibleTranslation(translate, scale) {
+    var graph = this;
+    var height = (graph.maxGraphY - graph.minGraphY + 2 * GRAPH_MARGIN) * scale;
+    var width = (graph.maxGraphX - graph.minGraphX + 2 * GRAPH_MARGIN) * scale;
+
+    var dimensions = this.getSvgViewDimensions();
+
+    var baseY = translate[1];
+    var minY = (graph.minGraphY - GRAPH_MARGIN) * scale;
+    var maxY = (graph.maxGraphY + GRAPH_MARGIN) * scale;
+
+    var adjustY = 0;
+    var adjustYCandidate = 0;
+    if ((maxY + baseY) < dimensions[1]) {
+      adjustYCandidate = dimensions[1] - (maxY + baseY);
+      if ((minY + baseY + adjustYCandidate) > 0) {
+        adjustY = (dimensions[1] / 2) - (maxY - (height / 2)) - baseY;
+      } else {
+        adjustY = adjustYCandidate;
+      }
+    } else if (-baseY < minY) {
+      adjustYCandidate = -(baseY + minY);
+      if ((maxY + baseY + adjustYCandidate) < dimensions[1]) {
+        adjustY = (dimensions[1] / 2) - (maxY - (height / 2)) - baseY;
+      } else {
+        adjustY = adjustYCandidate;
+      }
+    }
+    translate[1] += adjustY;
+
+    var baseX = translate[0];
+    var minX = (graph.minGraphX - GRAPH_MARGIN) * scale;
+    var maxX = (graph.maxGraphX + GRAPH_MARGIN) * scale;
+
+    var adjustX = 0;
+    var adjustXCandidate = 0;
+    if ((maxX + baseX) < dimensions[0]) {
+      adjustXCandidate = dimensions[0] - (maxX + baseX);
+      if ((minX + baseX + adjustXCandidate) > 0) {
+        adjustX = (dimensions[0] / 2) - (maxX - (width / 2)) - baseX;
+      } else {
+        adjustX = adjustXCandidate;
+      }
+    } else if (-baseX < minX) {
+      adjustXCandidate = -(baseX + minX);
+      if ((maxX + baseX + adjustXCandidate) < dimensions[0]) {
+        adjustX = (dimensions[0] / 2) - (maxX - (width / 2)) - baseX;
+      } else {
+        adjustX = adjustXCandidate;
+      }
+    }
+    translate[0] += adjustX;
+    return translate;
+  }
+
+  translateClipped(translate, scale, transition) {
+    var graph = this;
+    var graphNode = this.graphElement[0][0];
+    var translate = this.getVisibleTranslation(translate, scale);
+    if (transition) {
+      graphNode.classList.add('visible-transition');
+      clearTimeout(graph.transitionTimout);
+      graph.transitionTimout = setTimeout(function(){
+        graphNode.classList.remove('visible-transition');
+      }, 1000);
+    }
+    var translateString = "translate(" + translate[0] + "px," + translate[1] + "px) scale(" + scale + ")";
+    graphNode.style.transform = translateString;
+    graph.dragSvg.translate(translate);
+    graph.dragSvg.scale(scale);
+  }
+
+  zoomed(){
+    this.state.justScaleTransGraph = true;
+    var scale =  this.dragSvg.scale();
+    this.translateClipped(d3.event.translate, scale);
+  }
+
+
+  getSvgViewDimensions() {
+    var canvasWidth = this.parentNode.clientWidth;
+    var documentElement = document.documentElement;
+    var canvasHeight = documentElement.clientHeight;
+    return [canvasWidth, canvasHeight];
+  }
+
+
+  minScale() {
+    var graph = this;
+    var dimensions = this.getSvgViewDimensions();
+    var width = graph.maxGraphX - graph.minGraphX;
+    var height = graph.maxGraphY - graph.minGraphY;
+    var minScale = dimensions[0] / (width + GRAPH_MARGIN * 2);
+    var minScaleYCandidate = dimensions[1] / (height + GRAPH_MARGIN * 2);
+    if (minScaleYCandidate < minScale) {
+      minScale = minScaleYCandidate;
+    }
+    this.dragSvg.scaleExtent([minScale, 1.5]);
+    return minScale;
+  }
+
+  fitGraphViewToWindow() {
+    this.svg.attr("height", document.documentElement.clientHeight + "px");
+    this.translateClipped(this.dragSvg.translate(), this.dragSvg.scale());
+  }
+
+  toggleTypes() {
+    var graph = this;
+    graph.state.showTypes = !graph.state.showTypes;
+    var element = document.getElementById('toggle-types');
+    if (graph.state.showTypes) {
+      element.classList.add('button-input-toggled');
+    } else {
+      element.classList.remove('button-input-toggled');
+    }
+    graph.updateGraphVisibility();
+  }
+
+  viewSelection() {
+    var graph = this;
+    var minX, maxX, minY, maxY;
+    var hasSelection = false;
+    graph.visibleNodes.each(function(n) {
+      if (this.classList.contains("selected")) {
+        hasSelection = true;
+        minX = minX ? Math.min(minX, n.x) : n.x;
+        maxX = maxX ? Math.max(maxX, n.x + n.getTotalNodeWidth()) :
+          n.x + n.getTotalNodeWidth();
+        minY = minY ? Math.min(minY, n.y) : n.y;
+        maxY = maxY ? Math.max(maxY, n.y + DEFAULT_NODE_HEIGHT) :
+          n.y + DEFAULT_NODE_HEIGHT;
+      }
+    });
+    if (hasSelection) {
+      graph.viewGraphRegion(minX - NODE_INPUT_WIDTH, minY - 60,
+                            maxX + NODE_INPUT_WIDTH, maxY + 60,
+                            true);
+    }
+  }
+
+  viewGraphRegion(minX, minY, maxX, maxY, transition) {
+    var graph = this;
+    var dimensions = this.getSvgViewDimensions();
+    var width = maxX - minX;
+    var height = maxY - minY;
+    var scale = Math.min(dimensions[0] / width, dimensions[1] / height);
+    scale = Math.min(1.5, scale);
+    scale = Math.max(graph.minScale(), scale);
+    var translation = [-minX*scale, -minY*scale];
+    translation = graph.getVisibleTranslation(translation, scale);
+    graph.translateClipped(translation, scale, transition);
+  }
+
+  viewWholeGraph() {
+    var graph = this;
+    var minScale = graph.minScale();
+    var translation = [0, 0];
+    translation = graph.getVisibleTranslation(translation, minScale);
+    graph.translateClipped(translation, minScale);
+  }
+}