[turbolizer] Enlarge node labels and bubbles. Fix dead node display on old JSON.

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 156 matching lines @@
   static get rectClass() {
     return "nodeStyle";
   }
   static get activeEditId() {
     return "active-editing";
   }
   static get nodeRadius() {
     return 50;
   }
 
-  getNodeHeight(graph) {
+  getNodeHeight(d) {
     if (this.state.showTypes) {
-      return DEFAULT_NODE_HEIGHT + TYPE_HEIGHT;
+      return d.normalheight + d.labelbbox.height;
     } else {
-      return DEFAULT_NODE_HEIGHT;
+      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)) {
@@ skipping 55 matching lines @@
 
   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 = [];
-    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,
+      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') {
@@ skipping 58 matching lines @@
         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 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) {
@@ skipping 89 matching lines @@
   }
 
   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.live) n.visible = false; })
+    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;
     });
@@ skipping 238 matching lines @@
     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(); });
+      attr(HEIGHT, function(d) { return graph.getNodeHeight(d); });
 
     // add new nodes
     var newGs = graph.visibleNodes.enter()
       .append("g");
 
     newGs.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);
       })
       .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(); })
+      .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 / 2 - 4;
+        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() + DEFAULT_NODE_BUBBLE_RADIUS / 2 + 4;
+        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;
           } )
@@ skipping 11 matching lines @@
     }
 
     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)
+        .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", DEFAULT_NODE_HEIGHT / 2 + TYPE_HEIGHT + 5)
+          .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();
           })
       }
     });
@@ skipping 136 matching lines @@
     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;
+        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) {
@@ skipping 10 matching lines @@
   }
 
   viewWholeGraph() {
     var graph = this;
     var minScale = graph.minScale();
     var translation = [0, 0];
     translation = graph.getVisibleTranslation(translation, minScale);
     graph.translateClipped(translation, minScale);
   }
 }