v8/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 locations = [];
        for (var d of items) {
          if (selected) {
            d.classList.add("selected");
          } else {
            d.classList.remove("selected");
          }
          var data = d.__data__;
          locations.push({ pos_start: data.pos, pos_end: data.pos + 1, node_id: data.id});
        }
        broker.select(selectionHandler, locations, selected);
      },
      selectionDifference: function(span1, inclusive1, span2, inclusive2) {
        // Should not be called
      },
      brokeredSelect: function(locations, selected) {
        var test = [].entries().next();
        var selection = graph.nodes
          .filter(function(n) {
            var pos = n.pos;
            for (var location of locations) {
              var start = location.pos_start;
              var end = location.pos_end;
              var id = location.node_id;
              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", partial(this.uploadAction, graph));
    d3.select("#layout").on("click", partial(this.layoutAction, graph));
    d3.select("#show-all").on("click", partial(this.showAllAction, graph));
    d3.select("#hide-dead").on("click", partial(this.hideDeadAction, graph));
    d3.select("#hide-unselected").on("click", partial(this.hideUnselectedAction, graph));
    d3.select("#hide-selected").on("click", partial(this.hideSelectedAction, graph));
    d3.select("#zoom-selection").on("click", partial(this.zoomSelectionAction, graph));
    d3.select("#toggle-types").on("click", partial(this.toggleTypesAction, graph));
    d3.select("#search-input").on("keydown", partial(this.searchInputAction, graph));

    // 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(d) {
    if (this.state.showTypes) {
      return d.normalheight + d.labelbbox.height;
    } else {
      return d.normalheight;
    }
  }

  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) {
      this.attachSelection(rememberedSelection);
      this.connectVisibleSelectedNodes();
      this.viewSelection();
    }
    this.updateGraphVisibility();
  }

  deleteContent() {
    if (this.visibleNodes) {
      this.nodes = [];
      this.edges = [];
      this.nodeMap = [];
      this.updateGraphVisibility();
    }
  };

  measureText(text) {
    var textMeasure = document.getElementById('text-measure');
    textMeasure.textContent = text;
    return {
      width: textMeasure.getBBox().width,
      height: textMeasure.getBBox().height,
    };
  }

  createGraph(data, initiallyVisibileIds) {
    var g = this;
    g.nodes = data.nodes;
    g.nodeMap = [];
    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();
      n.labelbbox = g.measureText(n.displayLabel);
      n.typebbox = g.measureText(n.getDisplayType());
      var innerwidth = Math.max(n.labelbbox.width, n.typebbox.width);
      n.width = Math.alignUp(innerwidth + NODE_INPUT_WIDTH * 2,
                             NODE_INPUT_WIDTH);
      var innerheight = Math.max(n.labelbbox.height, n.typebbox.height);
      n.normalheight = innerheight + 20;
    });
    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);
      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;
      }
    }).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(from) + DEFAULT_NODE_BUBBLE_RADIUS;
        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 s = new Set();
    for (var i of selection) {
      s.add(i.__data__.id);
    };
    return s;
  }

  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 (state.justDragged) {
      // dragged, not clicked
      redetermineGraphBoundingBox(graph);
      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);
      });
  }

  selectAllNodes(inEdges, filter) {
    var graph = this;
    if (!d3.event.shiftKey) {
      graph.state.selection.clear();
    }
    graph.state.selection.select(graph.visibleNodes[0], true);
    graph.updateGraphVisibility();
  }

  uploadAction(graph) {
    document.getElementById("hidden-file-upload").click();
  }

  layoutAction(graph) {
    graph.updateGraphVisibility();
    graph.layoutGraph();
    graph.updateGraphVisibility();
    graph.viewWholeGraph();
  }

  showAllAction(graph) {
    graph.nodes.filter(function(n) { n.visible = true; })
    graph.edges.filter(function(e) { e.visible = true; })
    graph.updateGraphVisibility();
    graph.viewWholeGraph();
  }

  hideDeadAction(graph) {
    graph.nodes.filter(function(n) { if (!n.isLive()) n.visible = false; })
    graph.updateGraphVisibility();
  }

  hideUnselectedAction(graph) {
    var unselected = graph.visibleNodes.filter(function(n) {
      return !this.classList.contains("selected");
    });
    unselected.each(function(n) {
      n.visible = false;
    });
    graph.updateGraphVisibility();
  }

  hideSelectedAction(graph) {
    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();
  }

  zoomSelectionAction(graph) {
    graph.viewSelection();
  }

  toggleTypesAction(graph) {
    graph.toggleTypes();
  }

  searchInputAction(graph) {
    if (d3.event.keyCode == 13) {
      graph.state.selection.clear();
      var query = this.value;
      window.sessionStorage.setItem("lastSearch", query);

      var reg = new RegExp(query);
      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 (filterFunction(n)) {
          graph.state.selection.select(this, true);
        }
      });
      graph.connectVisibleSelectedNodes();
      graph.updateGraphVisibility();
      this.blur();
      graph.viewSelection();
    }
    d3.event.stopPropagation();
  }

  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 showSelectionFrontierNodes = function(inEdges, filter, select) {
      var frontier = graph.getNodeFrontier(state.selection.selection, inEdges, filter);
      if (frontier != undefined) {
        if (select) {
          if (!d3.event.shiftKey) {
            state.selection.clear();
          }
          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'
      showSelectionFrontierNodes(true,
          (edge, index) => { return index == (d3.event.keyCode - 49); },
          false);
      break;
    case 97:
    case 98:
    case 99:
    case 100:
    case 101:
    case 102:
    case 103:
    case 104:
    case 105:
      // 'numpad 1'-'numpad 9'
      showSelectionFrontierNodes(true,
          (edge, index) => { return index == (d3.event.keyCode - 97); },
          false);
      break;
    case 67:
      // 'c'
      showSelectionFrontierNodes(true,
          (edge, index) => { return edge.type == 'control'; },
          false);
      break;
    case 69:
      // 'e'
      showSelectionFrontierNodes(true,
          (edge, index) => { return edge.type == 'effect'; },
          false);
      break;
    case 79:
      // 'o'
      showSelectionFrontierNodes(false, undefined, false);
      break;
    case 73:
      // 'i'
      showSelectionFrontierNodes(true, undefined, false);
      break;
    case 65:
      // 'a'
      graph.selectAllNodes();
      allowRepetition = false;
      break;
    case 38:
    case 40: {
      showSelectionFrontierNodes(d3.event.keyCode == 38, undefined, true);
      break;
    }
    case 82:
      // 'r'
      if (!d3.event.ctrlKey) {
        this.layoutAction(this);
      } else {
        eventHandled = false;
      }
      break;
    case 191:
      // '/'
      document.getElementById("search-input").focus();
      document.getElementById("search-input").select();
      break;
    default:
      eventHandled = false;
      break;
    }
    if (eventHandled) {
      d3.event.preventDefault();
    }
    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);
      })
      .attr("adjacentToHover", "false");

    // 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(d); });

    // add new nodes
    var newGs = graph.visibleNodes.enter()
      .append("g");

    newGs.classed("turbonode", function(n) { return true; })
      .classed("control", function(n) { return n.isControl(); })
      .classed("live", function(n) { return n.isLive(); })
      .classed("dead", function(n) { return !n.isLive(); })
      .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);
      })
      .on('mouseover', function(d){
        var nodeSelection = d3.select(this);
        let node = graph.nodeMap[d.id];
        let adjInputEdges = graph.visibleEdges.filter(e => { return e.target === node; });
        let adjOutputEdges = graph.visibleEdges.filter(e => { return e.source === node; });
        adjInputEdges.attr('relToHover', "input");
        adjOutputEdges.attr('relToHover', "output");
        let adjInputNodes = adjInputEdges.data().map(e => e.source);
        graph.visibleNodes.data(adjInputNodes, function(d) {
          return d.id;
        }).attr('relToHover', "input");
        let adjOutputNodes = adjOutputEdges.data().map(e => e.target);
        graph.visibleNodes.data(adjOutputNodes, function(d) {
          return d.id;
        }).attr('relToHover', "output");
        graph.updateGraphVisibility();
      })
      .on('mouseout', function(d){
        var nodeSelection = d3.select(this);
        let node = graph.nodeMap[d.id];
        let adjEdges = graph.visibleEdges.filter(e => { return e.target === node  || e.source === node; });
        adjEdges.attr('relToHover', "none");
        let adjNodes = adjEdges.data().map(e => e.target).concat(adjEdges.data().map(e => e.source));
        let nodes = graph.visibleNodes.data(adjNodes, function(d) {
          return d.id;
        }).attr('relToHover', "none");
        graph.updateGraphVisibility();
      })
      .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(d);
      })

    function appendInputAndOutputBubbles(g, d) {
      for (var i = 0; i < d.inputs.length; ++i) {
        var x = d.getInputX(i);
        var y = -DEFAULT_NODE_BUBBLE_RADIUS;
        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(d) + DEFAULT_NODE_BUBBLE_RADIUS;
        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", 5)
        .append('tspan')
        .text(function(l) {
          return d.getDisplayLabel();
        })
        .append("title")
        .text(function(l) {
          return d.getTitle();
        })
      if (d.type != undefined) {
        d3.select(this).append("text")
          .classed("label", true)
          .classed("type", true)
          .attr("text-anchor","right")
          .attr("dx", 5)
          .attr("dy", d.labelbbox.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 + graph.getNodeHeight(n)) :
          n.y + graph.getNodeHeight(n);
      }
    });
    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);
  }
}