[SPARK-7298] Harmonize style of new visualizations

- Colors on the timeline now match the rest of the UI
- The expandable buttons to show timeline view, DAG, etc are now more visible
- Timeline text is smaller
- DAG visualization text and colors are more consistent throughout
- Fix some JavaScript style issues
- Various small fixes throughout (e.g. inconsistent capitalization, some confusing names, HTML escaping, etc)

Author: Matei Zaharia <[email protected]>

Closes #5942 from mateiz/ui and squashes the following commits:

def38d0 [Matei Zaharia] Add some tooltips
4c5a364 [Matei Zaharia] Reduce stage and rank separation slightly
43dcbe3 [Matei Zaharia] Some updates to DAG
fac734a [Matei Zaharia] tweaks
6a6705d [Matei Zaharia] More fixes
67629f5 [Matei Zaharia] Various small tweaks

(cherry picked from commit a1ec08f)
Signed-off-by: Matei Zaharia <[email protected]>

Author: mateiz

core/src/main/resources/org/apache/spark/ui/static/spark-dag-viz.css

@@ -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;
 }

core/src/main/resources/org/apache/spark/ui/static/spark-dag-viz.js

@@ -52,9 +52,9 @@
  */
 
 var VizConstants = {
-  svgMarginX: 20,
-  svgMarginY: 20,
-  stageSep: 50,
+  svgMarginX: 16,
+  svgMarginY: 16,
+  stageSep: 40,
   graphPrefix: "graph_",
   nodePrefix: "node_",
   stagePrefix: "stage_",
@@ -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.
@@ -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");
 }
@@ -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");
 
     // 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
@@ -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);
 }
@@ -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);
@@ -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);
 }
 
@@ -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;
@@ -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");
     svgContainer.selectAll("g > path").attr("marker-end", "url(#marker-arrow)");
     svgContainer.selectAll("g.edgePaths def").remove(); // We no longer need these
   }
@@ -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],
@@ -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],