Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[SPARK-7298] Harmonize style of new visualizations #5942

Closed
wants to merge 6 commits into from
Closed

[SPARK-7298] Harmonize style of new visualizations #5942

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
67629f5
Various small tweaks
mateiz May 5, 2015
6a6705d
More fixes
mateiz May 6, 2015
fac734a
tweaks
mateiz May 8, 2015
43dcbe3
Some updates to DAG
mateiz May 8, 2015
4c5a364
Reduce stage and rank separation slightly
mateiz May 8, 2015
def38d0
Add some tooltips
mateiz May 8, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 40 additions & 20 deletions core/src/main/resources/org/apache/spark/ui/static/spark-dag-viz.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,68 +16,88 @@
*/

#dag-viz-graph svg path {
stroke: #444444;
stroke: #444;
stroke-width: 1.5px;
}

#dag-viz-graph svg g.cluster rect {
stroke-width: 4px;
stroke-opacity: 0.5;
stroke-width: 1px;
}

#dag-viz-graph svg g.node circle {
fill: #444;
}

#dag-viz-graph svg g.node circle,
#dag-viz-graph svg g.node rect {
fill: #444444;
fill: #C3EBFF;
stroke: #3EC0FF;
stroke-width: 1px;
}

#dag-viz-graph svg g.node.cached circle {
fill: #444;
}

#dag-viz-graph svg g.node.cached circle,
#dag-viz-graph svg g.node.cached rect {
fill: #FF0000;
fill: #B3F5C5;
stroke: #56F578;
stroke-width: 1px;
}

/* Job page specific styles */

#dag-viz-graph svg.job marker#marker-arrow path {
fill: #444444;
fill: #333;
stroke-width: 0px;
}

#dag-viz-graph svg.job g.cluster rect {
fill: #FFFFFF;
stroke: #AADFFF;
fill: #A0DFFF;
stroke: #3EC0FF;
stroke-width: 1px;
}

#dag-viz-graph svg.job g.cluster[id*="stage"] rect {
stroke: #FFDDEE;
stroke-width: 6px;
fill: #FFFFFF;
stroke: #FF99AC;
stroke-width: 1px;
}

#dag-viz-graph svg.job g#cross-stage-edges path {
fill: none;
}

#dag-viz-graph svg.job g.cluster text {
fill: #AAAAAA;
fill: #333;
}

/* Stage page specific styles */

#dag-viz-graph svg.stage g.cluster rect {
fill: #F0F8FF;
stroke: #AADFFF;
fill: #A0DFFF;
stroke: #3EC0FF;
stroke-width: 1px;
}

#dag-viz-graph svg.stage g.cluster[id*="stage"] rect {
fill: #FFFFFF;
stroke: #FFDDEE;
stroke-width: 6px;
stroke: #FFA6B6;
stroke-width: 1px;
}

#dag-viz-graph svg.stage g.node g.label text tspan {
fill: #FFFFFF;
fill: #333;
}

#dag-viz-graph svg.stage g.cluster text {
fill: #444444;
font-weight: bold;
fill: #333;
}

#dag-viz-graph a, #dag-viz-graph a:hover {
text-decoration: none;
}

#dag-viz-graph .label {
font-weight: normal;
text-shadow: none;
}
57 changes: 34 additions & 23 deletions core/src/main/resources/org/apache/spark/ui/static/spark-dag-viz.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,9 @@
*/

var VizConstants = {
svgMarginX: 20,
svgMarginY: 20,
stageSep: 50,
svgMarginX: 16,
svgMarginY: 16,
stageSep: 40,
graphPrefix: "graph_",
nodePrefix: "node_",
stagePrefix: "stage_",
Expand All @@ -63,14 +63,16 @@ var VizConstants = {
};

var JobPageVizConstants = {
clusterLabelSize: 11,
stageClusterLabelSize: 14
}
clusterLabelSize: 12,
stageClusterLabelSize: 14,
rankSep: 40
};

var StagePageVizConstants = {
clusterLabelSize: 14,
stageClusterLabelSize: 18
}
stageClusterLabelSize: 14,
rankSep: 40
};

/*
* Show or hide the RDD DAG visualization.
Expand Down Expand Up @@ -149,11 +151,11 @@ function renderDagVizForStage(svgContainer) {
var dot = metadata.select(".dot-file").text();
var containerId = VizConstants.graphPrefix + metadata.attr("stage-id");
var container = svgContainer.append("g").attr("id", containerId);
renderDot(dot, container);
renderDot(dot, container, StagePageVizConstants.rankSep);

// Round corners on RDDs
// Round corners on rectangles
svgContainer
.selectAll("g.node rect")
.selectAll("rect")
.attr("rx", "5")
.attr("ry", "5");
}
Expand Down Expand Up @@ -207,7 +209,13 @@ function renderDagVizForJob(svgContainer) {
}

// Actually render the stage
renderDot(dot, container);
renderDot(dot, container, JobPageVizConstants.rankSep);

// Round corners on rectangles
container
.selectAll("rect")
.attr("rx", "4")
.attr("ry", "4");
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you could put this in renderDagViz itself to reduce the duplication, since we do it for stages too

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah but that uses 5px and this uses 4, so it's slightly different.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh I see. I didn't realize the difference was intentional

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah it's because those are smaller; it looked a bit better this way.


// If there are any incoming edges into this graph, keep track of them to render
// them separately later. Note that we cannot draw them now because we need to
Expand All @@ -223,12 +231,13 @@ function renderDagVizForJob(svgContainer) {
}

/* Render the dot file as an SVG in the given container. */
function renderDot(dot, container) {
function renderDot(dot, container, rankSep) {
var escaped_dot = dot
.replace(/&lt;/g, "<")
.replace(/&gt;/g, ">")
.replace(/&quot;/g, "\"");
var g = graphlibDot.read(escaped_dot);
g.graph().rankSep = rankSep;
var renderer = new dagreD3.render();
renderer(container, g);
}
Expand All @@ -248,12 +257,13 @@ function metadataContainer() { return d3.select("#dag-viz-metadata"); }
* In general, the clustering support for dagre-d3 is quite limited at this point.
*/
function drawClusterLabels(svgContainer, forJob) {
var clusterLabelSize, stageClusterLabelSize;
if (forJob) {
var clusterLabelSize = JobPageVizConstants.clusterLabelSize;
var stageClusterLabelSize = JobPageVizConstants.stageClusterLabelSize;
clusterLabelSize = JobPageVizConstants.clusterLabelSize;
stageClusterLabelSize = JobPageVizConstants.stageClusterLabelSize;
} else {
var clusterLabelSize = StagePageVizConstants.clusterLabelSize;
var stageClusterLabelSize = StagePageVizConstants.stageClusterLabelSize;
clusterLabelSize = StagePageVizConstants.clusterLabelSize;
stageClusterLabelSize = StagePageVizConstants.stageClusterLabelSize;
}
svgContainer.selectAll("g.cluster").each(function() {
var cluster = d3.select(this);
Expand Down Expand Up @@ -283,7 +293,7 @@ function drawClusterLabel(d3cluster, fontSize) {
.attr("x", labelX)
.attr("y", labelY)
.attr("text-anchor", "end")
.style("font-size", fontSize)
.style("font-size", fontSize + "px")
.text(labelText);
}

Expand All @@ -303,12 +313,12 @@ function resizeSvg(svg) {
}));
var endX = VizConstants.svgMarginX +
toFloat(d3.max(allClusters, function(e) {
var t = d3.select(e)
var t = d3.select(e);
return getAbsolutePosition(t).x + toFloat(t.attr("width"));
}));
var endY = VizConstants.svgMarginY +
toFloat(d3.max(allClusters, function(e) {
var t = d3.select(e)
var t = d3.select(e);
return getAbsolutePosition(t).y + toFloat(t.attr("height"));
}));
var width = endX - startX;
Expand Down Expand Up @@ -338,7 +348,7 @@ function drawCrossStageEdges(edges, svgContainer) {
if (!dagreD3Marker.empty()) {
svgContainer
.append(function() { return dagreD3Marker.node().cloneNode(true); })
.attr("id", "marker-arrow")
.attr("id", "marker-arrow");
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oops, thanks for catching these semi-colons.

svgContainer.selectAll("g > path").attr("marker-end", "url(#marker-arrow)");
svgContainer.selectAll("g.edgePaths def").remove(); // We no longer need these
}
Expand Down Expand Up @@ -394,12 +404,13 @@ function connectRDDs(fromRDDId, toRDDId, edgesContainer, svgContainer) {
toPos.x += delta;
}

var points;
if (fromPos.y == toPos.y) {
// If they are on the same rank, curve the middle part of the edge
// upward a little to avoid interference with things in between
// e.g. _______
// _____/ \_____
var points = [
points = [
[fromPos.x, fromPos.y],
[fromPos.x + (toPos.x - fromPos.x) * 0.2, fromPos.y],
[fromPos.x + (toPos.x - fromPos.x) * 0.3, fromPos.y - 20],
Expand All @@ -413,7 +424,7 @@ function connectRDDs(fromRDDId, toRDDId, edgesContainer, svgContainer) {
// /
// |
// _____/
var points = [
points = [
[fromPos.x, fromPos.y],
[fromPos.x + (toPos.x - fromPos.x) * 0.4, fromPos.y],
[fromPos.x + (toPos.x - fromPos.x) * 0.6, toPos.y],
Expand Down
Loading