AuroraMiddleware/v8
1
0
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity

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

Browse Source 
BUG=

Review-Url: https://codereview.chromium.org/2230313002
Cr-Commit-Position: refs/heads/master@{#38588}
This commit is contained in:
bgeron 2016-08-11 09:46:00 -07:00 committed by Commit bot
parent ab53a8b9ec
commit ec9465eb9b
5 changed files with 56 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
tools/turbolizer/edge.js
View File

@ -49,8 +49,10 @@ Edge.prototype.generatePath = function(graph) {
var target = this.target; var target = this.target;
var source = this.source; var source = this.source;
var input_x = target.x + target.getInputX(this.index); var input_x = target.x + target.getInputX(this.index);
var arrowheadHeight = 7;
var input_y = target.y - 2 * DEFAULT_NODE_BUBBLE_RADIUS - arrowheadHeight;
var output_x = source.x + source.getOutputX(); var output_x = source.x + source.getOutputX();
var output_y = source.y + DEFAULT_NODE_HEIGHT + DEFAULT_NODE_BUBBLE_RADIUS; var output_y = source.y + graph.getNodeHeight(source) + DEFAULT_NODE_BUBBLE_RADIUS;
var inputApproach = target.getInputApproach(this.index); var inputApproach = target.getInputApproach(this.index);
var outputApproach = source.getOutputApproach(graph); var outputApproach = source.getOutputApproach(graph);
var horizontalPos = this.getInputHorizontalPosition(graph); var horizontalPos = this.getInputHorizontalPosition(graph);
@ -68,7 +70,7 @@ Edge.prototype.generatePath = function(graph) {
} }
result += "L" + input_x + "," + inputApproach + result += "L" + input_x + "," + inputApproach +
"L" + input_x + "," + (target.y - DEFAULT_NODE_BUBBLE_RADIUS - 12); "L" + input_x + "," + input_y;
return result; return result;
} }

6
tools/turbolizer/graph-layout.js
View File

@ -371,7 +371,7 @@ function layoutNodeGraph(graph) {
var rankSets = []; var rankSets = [];
// Collect sets for each rank. // Collect sets for each rank.
graph.nodes.forEach(function(n, i){ graph.nodes.forEach(function(n, i){
n.y = n.rank * (DEFAULT_NODE_ROW_SEPARATION + graph.getNodeHeight() + n.y = n.rank * (DEFAULT_NODE_ROW_SEPARATION + graph.getNodeHeight(n) +
2 * DEFAULT_NODE_BUBBLE_RADIUS); 2 * DEFAULT_NODE_BUBBLE_RADIUS);
if (n.visible) { if (n.visible) {
if (rankSets[n.rank] === undefined) { if (rankSets[n.rank] === undefined) {
@ -482,8 +482,8 @@ function redetermineGraphBoundingBox(graph) {
if ((node.y - 50) < graph.minGraphY) { if ((node.y - 50) < graph.minGraphY) {
graph.minGraphY = node.y - 50; graph.minGraphY = node.y - 50;
} }
if ((node.y + graph.getNodeHeight() + 50) > graph.maxGraphY) { if ((node.y + graph.getNodeHeight(node) + 50) > graph.maxGraphY) {
graph.maxGraphY = node.y + graph.getNodeHeight() + 50; graph.maxGraphY = node.y + graph.getNodeHeight(node) + 50;
} }
} }

57
tools/turbolizer/graph-view.js
View File

@ -174,11 +174,11 @@ class GraphView extends View {
return 50; return 50;
} }
getNodeHeight(graph) { getNodeHeight(d) {
if (this.state.showTypes) { if (this.state.showTypes) {
return DEFAULT_NODE_HEIGHT + TYPE_HEIGHT; return d.normalheight + d.labelbbox.height;
} else { } else {
return DEFAULT_NODE_HEIGHT; return d.normalheight;
} }
} }
@ -254,11 +254,19 @@ class GraphView extends View {
} }
}; };
measureText(text) {
var textMeasure = document.getElementById('text-measure');
textMeasure.textContent = text;
return {
width: textMeasure.getBBox().width,
height: textMeasure.getBBox().height,
};
}
createGraph(data, initiallyVisibileIds) { createGraph(data, initiallyVisibileIds) {
var g = this; var g = this;
g.nodes = data.nodes; g.nodes = data.nodes;
g.nodeMap = []; g.nodeMap = [];
var textMeasure = document.getElementById('text-measure');
g.nodes.forEach(function(n, i){ g.nodes.forEach(function(n, i){
n.__proto__ = Node; n.__proto__ = Node;
n.visible = false; n.visible = false;
@ -272,12 +280,13 @@ class GraphView extends View {
n.cfg = n.control; n.cfg = n.control;
g.nodeMap[n.id] = n; g.nodeMap[n.id] = n;
n.displayLabel = n.getDisplayLabel(); n.displayLabel = n.getDisplayLabel();
textMeasure.textContent = n.getDisplayLabel(); n.labelbbox = g.measureText(n.displayLabel);
var width = textMeasure.getComputedTextLength(); n.typebbox = g.measureText(n.getDisplayType());
textMeasure.textContent = n.getDisplayType(); var innerwidth = Math.max(n.labelbbox.width, n.typebbox.width);
width = Math.max(width, textMeasure.getComputedTextLength()); n.width = Math.alignUp(innerwidth + NODE_INPUT_WIDTH * 2,
n.width = Math.alignUp(width + NODE_INPUT_WIDTH * 2,
NODE_INPUT_WIDTH); NODE_INPUT_WIDTH);
var innerheight = Math.max(n.labelbbox.height, n.typebbox.height);
n.normalheight = innerheight + 20;
}); });
g.edges = []; g.edges = [];
data.edges.forEach(function(e, i){ data.edges.forEach(function(e, i){
@ -356,7 +365,7 @@ class GraphView extends View {
if (components[0] == "ob") { if (components[0] == "ob") {
var from = g.nodeMap[components[1]]; var from = g.nodeMap[components[1]];
var x = from.getOutputX(); 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 + ")"; var transform = "translate(" + x + "," + y + ")";
this.setAttribute('transform', transform); this.setAttribute('transform', transform);
} }
@ -466,7 +475,7 @@ class GraphView extends View {
} }
hideDeadAction(graph) { 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(); graph.updateGraphVisibility();
} }
@ -725,7 +734,7 @@ class GraphView extends View {
graph.visibleNodes.attr("transform", function(n){ graph.visibleNodes.attr("transform", function(n){
return "translate(" + n.x + "," + n.y + ")"; return "translate(" + n.x + "," + n.y + ")";
}).select('rect'). }).select('rect').
attr(HEIGHT, function(d) { return graph.getNodeHeight(); }); attr(HEIGHT, function(d) { return graph.getNodeHeight(d); });
// add new nodes // add new nodes
var newGs = graph.visibleNodes.enter() var newGs = graph.visibleNodes.enter()
@ -750,13 +759,17 @@ class GraphView extends View {
newGs.append("rect") newGs.append("rect")
.attr("rx", 10) .attr("rx", 10)
.attr("ry", 10) .attr("ry", 10)
.attr(WIDTH, function(d) { return d.getTotalNodeWidth(); }) .attr(WIDTH, function(d) {
.attr(HEIGHT, function(d) { return graph.getNodeHeight(); }) return d.getTotalNodeWidth();
})
.attr(HEIGHT, function(d) {
return graph.getNodeHeight(d);
})
function appendInputAndOutputBubbles(g, d) { function appendInputAndOutputBubbles(g, d) {
for (var i = 0; i < d.inputs.length; ++i) { for (var i = 0; i < d.inputs.length; ++i) {
var x = d.getInputX(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') var s = g.append('circle')
.classed("filledBubbleStyle", function(c) { .classed("filledBubbleStyle", function(c) {
return d.inputs[i].isVisible(); return d.inputs[i].isVisible();
@ -781,7 +794,7 @@ class GraphView extends View {
} }
if (d.outputs.length != 0) { if (d.outputs.length != 0) {
var x = d.getOutputX(); 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') var s = g.append('circle')
.classed("filledBubbleStyle", function(c) { .classed("filledBubbleStyle", function(c) {
return d.areAnyOutputsVisible() == 2; return d.areAnyOutputsVisible() == 2;
@ -813,8 +826,8 @@ class GraphView extends View {
d3.select(this).append("text") d3.select(this).append("text")
.classed("label", true) .classed("label", true)
.attr("text-anchor","right") .attr("text-anchor","right")
.attr("dx", "5") .attr("dx", 5)
.attr("dy", DEFAULT_NODE_HEIGHT / 2 + 5) .attr("dy", 5)
.append('tspan') .append('tspan')
.text(function(l) { .text(function(l) {
return d.getDisplayLabel(); return d.getDisplayLabel();
@ -828,8 +841,8 @@ class GraphView extends View {
.classed("label", true) .classed("label", true)
.classed("type", true) .classed("type", true)
.attr("text-anchor","right") .attr("text-anchor","right")
.attr("dx", "5") .attr("dx", 5)
.attr("dy", DEFAULT_NODE_HEIGHT / 2 + TYPE_HEIGHT + 5) .attr("dy", d.labelbbox.height + 5)
.append('tspan') .append('tspan')
.text(function(l) { .text(function(l) {
return d.getDisplayType(); return d.getDisplayType();
@ -986,8 +999,8 @@ class GraphView extends View {
maxX = maxX ? Math.max(maxX, n.x + n.getTotalNodeWidth()) : maxX = maxX ? Math.max(maxX, n.x + n.getTotalNodeWidth()) :
n.x + n.getTotalNodeWidth(); n.x + n.getTotalNodeWidth();
minY = minY ? Math.min(minY, n.y) : n.y; minY = minY ? Math.min(minY, n.y) : n.y;
maxY = maxY ? Math.max(maxY, n.y + DEFAULT_NODE_HEIGHT) : maxY = maxY ? Math.max(maxY, n.y + graph.getNodeHeight(n)) :
n.y + DEFAULT_NODE_HEIGHT; n.y + graph.getNodeHeight(n);
} }
}); });
if (hasSelection) { if (hasSelection) {

12
tools/turbolizer/node.js
View File

@ -2,12 +2,10 @@
// Use of this source code is governed by a BSD-style license that can be // Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file. // found in the LICENSE file.
var DEFAULT_NODE_WIDTH = 240;
var DEFAULT_NODE_HEIGHT = 40;
var TYPE_HEIGHT = 25; var TYPE_HEIGHT = 25;
var DEFAULT_NODE_BUBBLE_RADIUS = 4; var DEFAULT_NODE_BUBBLE_RADIUS = 12;
var NODE_INPUT_WIDTH = 20; var NODE_INPUT_WIDTH = 50;
var MINIMUM_NODE_INPUT_APPROACH = 20; var MINIMUM_NODE_INPUT_APPROACH = 15 + 2 * DEFAULT_NODE_BUBBLE_RADIUS;
var MINIMUM_NODE_OUTPUT_APPROACH = 15; var MINIMUM_NODE_OUTPUT_APPROACH = 15;
function isNodeInitiallyVisible(node) { function isNodeInitiallyVisible(node) {
@ -22,7 +20,7 @@ var Node = {
return this.opcode == 'Parameter' || this.opcode.endsWith('Constant'); return this.opcode == 'Parameter' || this.opcode.endsWith('Constant');
}, },
isLive: function() { isLive: function() {
return this.live; return this.live !== false;
}, },
isJavaScript: function() { isJavaScript: function() {
return this.opcode.startsWith('JS'); return this.opcode.startsWith('JS');
@ -127,7 +125,7 @@ var Node = {
(index % 4) * MINIMUM_EDGE_SEPARATION - DEFAULT_NODE_BUBBLE_RADIUS (index % 4) * MINIMUM_EDGE_SEPARATION - DEFAULT_NODE_BUBBLE_RADIUS
}, },
getOutputApproach: function(graph, index) { getOutputApproach: function(graph, index) {
return this.y + this.outputApproach + graph.getNodeHeight() + return this.y + this.outputApproach + graph.getNodeHeight(this) +
+ DEFAULT_NODE_BUBBLE_RADIUS; + DEFAULT_NODE_BUBBLE_RADIUS;
}, },
getInputX: function(index) { getInputX: function(index) {

9
tools/turbolizer/turbo-visualizer.css
View File

@ -336,4 +336,13 @@ span.linkable-text:hover {
.prof-high { .prof-high {
color: #800; color: #800;
}
tspan {
font-size: 500%;
font-family: sans-serif;
}
text {
dominant-baseline: text-before-edge;
} }