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 source = this.source;
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_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 outputApproach = source.getOutputApproach(graph);
var horizontalPos = this.getInputHorizontalPosition(graph);
@ -68,7 +70,7 @@ Edge.prototype.generatePath = function(graph) {
}
result += "L" + input_x + "," + inputApproach +
"L" + input_x + "," + (target.y - DEFAULT_NODE_BUBBLE_RADIUS - 12);
"L" + input_x + "," + input_y;
return result;
}

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

@ -371,7 +371,7 @@ function layoutNodeGraph(graph) {
var rankSets = [];
// Collect sets for each rank.
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);
if (n.visible) {
if (rankSets[n.rank] === undefined) {
@ -482,8 +482,8 @@ function redetermineGraphBoundingBox(graph) {
if ((node.y - 50) < graph.minGraphY) {
graph.minGraphY = node.y - 50;
}
if ((node.y + graph.getNodeHeight() + 50) > graph.maxGraphY) {
graph.maxGraphY = node.y + graph.getNodeHeight() + 50;
if ((node.y + graph.getNodeHeight(node) + 50) > graph.maxGraphY) {
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;
}
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;
}
}
@ -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) {
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;
@ -272,12 +280,13 @@ class GraphView extends View {
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){
@ -356,7 +365,7 @@ class GraphView extends View {
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);
}
@ -466,7 +475,7 @@ class GraphView extends View {
}
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();
}
@ -725,7 +734,7 @@ class GraphView extends View {
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()
@ -750,13 +759,17 @@ class GraphView extends View {
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();
@ -781,7 +794,7 @@ class GraphView extends View {
}
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;
@ -813,8 +826,8 @@ class GraphView extends View {
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();
@ -828,8 +841,8 @@ class GraphView extends View {
.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();
@ -986,8 +999,8 @@ class GraphView extends View {
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) {

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
// found in the LICENSE file.
var DEFAULT_NODE_WIDTH = 240;
var DEFAULT_NODE_HEIGHT = 40;
var TYPE_HEIGHT = 25;
var DEFAULT_NODE_BUBBLE_RADIUS = 4;
var NODE_INPUT_WIDTH = 20;
var MINIMUM_NODE_INPUT_APPROACH = 20;
var DEFAULT_NODE_BUBBLE_RADIUS = 12;
var NODE_INPUT_WIDTH = 50;
var MINIMUM_NODE_INPUT_APPROACH = 15 + 2 * DEFAULT_NODE_BUBBLE_RADIUS;
var MINIMUM_NODE_OUTPUT_APPROACH = 15;
function isNodeInitiallyVisible(node) {
@ -22,7 +20,7 @@ var Node = {
return this.opcode == 'Parameter' || this.opcode.endsWith('Constant');
},
isLive: function() {
return this.live;
return this.live !== false;
},
isJavaScript: function() {
return this.opcode.startsWith('JS');
@ -127,7 +125,7 @@ var Node = {
(index % 4) * MINIMUM_EDGE_SEPARATION - DEFAULT_NODE_BUBBLE_RADIUS
},
getOutputApproach: function(graph, index) {
return this.y + this.outputApproach + graph.getNodeHeight() +
return this.y + this.outputApproach + graph.getNodeHeight(this) +
+ DEFAULT_NODE_BUBBLE_RADIUS;
},
getInputX: function(index) {

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

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