Tweak background color, stroke width, font size etc.

apache · May 6, 2015 · 107c0b6 · 107c0b6
1 parent 1610c62
commit 107c0b6
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 30 deletions.
diff --git a/core/src/main/resources/org/apache/spark/ui/static/spark-dag-viz.js b/core/src/main/resources/org/apache/spark/ui/static/spark-dag-viz.js
@@ -277,18 +277,10 @@ function renderDot(dot, container) {
 
 /* Style the visualization we just rendered. */
 function styleDagViz(forJob) {
-  graphContainer().selectAll("svg g.cluster rect")
-    .style("fill", "white")
-    .style("stroke", VizConstants.rddOperationColor)
-    .style("stroke-width", "4px")
-    .style("stroke-opacity", "0.5");
-  graphContainer().selectAll("svg path")
+  graphContainer()
+    .selectAll("svg path")
     .style("stroke", VizConstants.edgeColor)
     .style("stroke-width", VizConstants.edgeWidth);
-  stageClusters()
-    .select("rect")
-    .style("stroke", VizConstants.stageColor)
-    .style("strokeWidth", "6px");
 
   // Put an arrow at the end of every edge
   // We need to do this because we manually render some edges ourselves
@@ -313,35 +305,61 @@ function styleDagViz(forJob) {
 
 /* Apply job-page-specific style to the visualization. */
 function styleDagVizForJob() {
-  graphContainer().selectAll("svg g.node circle")
+  graphContainer()
+    .selectAll("svg g.cluster rect")
+    .style("fill", "white")
+    .style("stroke", VizConstants.rddOperationColor)
+    .style("stroke-width", "4px")
+    .style("stroke-opacity", "0.5");
+  stageClusters()
+    .select("rect")
+    .style("stroke", VizConstants.stageColor)
+    .style("strokeWidth", "6px");
+  graphContainer()
+    .selectAll("svg g.node circle")
     .style("fill", VizConstants.rddColor);
   // TODO: add a legend to explain what a highlighted dot means
-  graphContainer().selectAll("svg g.cached circle")
+  graphContainer()
+    .selectAll("svg g.cached circle")
     .style("fill", VizConstants.rddCachedColor);
-  graphContainer().selectAll("svg g#cross-stage-edges path")
+  graphContainer()
+    .selectAll("svg g#cross-stage-edges path")
     .style("fill", "none");
-  graphContainer().selectAll("svg g.cluster text")
+  graphContainer()
+    .selectAll("svg g.cluster text")
     .attr("fill", VizConstants.clusterLabelColor)
     .attr("font-size", "11px");
 }
 
 /* Apply stage-page-specific style to the visualization. */
 function styleDagVizForStage() {
-  graphContainer().selectAll("svg g.node rect")
-    .style("fill", "none")
-    .style("stroke", VizConstants.rddColor)
-    .style("stroke-width", "2px")
+  graphContainer()
+    .selectAll("svg g.cluster rect")
+    .style("fill", "#F0F8FF")
+    .style("stroke", VizConstants.rddOperationColor)
+    .style("stroke-width", "4px")
+    .style("stroke-opacity", "0.5");
+  stageClusters()
+    .select("rect")
+    .style("fill", "white")
+    .style("stroke", VizConstants.stageColor)
+    .style("strokeWidth", "6px");
+  graphContainer()
+    .selectAll("svg g.node rect")
+    .style("fill", "#444444")
     .attr("rx", "5") // round corners
     .attr("ry", "5");
-    // TODO: add a legend to explain what a highlighted RDD means
-  graphContainer().selectAll("svg g.cached rect")
-    .style("stroke", VizConstants.rddCachedColor);
-  graphContainer().selectAll("svg g.node g.label text tspan")
-    .style("fill", VizConstants.rddColor);
-  graphContainer().selectAll("svg g.cluster text")
+  graphContainer()
+    .selectAll("svg g.cached rect")
+    .style("fill", VizConstants.rddCachedColor)
+  graphContainer()
+    .selectAll("svg g.node g.label text tspan")
+    .style("fill", "white");
+  graphContainer()
+    .selectAll("svg g.cluster text")
     .attr("fill", "#444444")
     .attr("font-size", "14px")
-    .attr("font-weight", "bold");
+    .attr("font-weight", "bold")
 }
 
 /*
@@ -429,9 +447,9 @@ function connectRDDs(fromRDDId, toRDDId, container) {
 
 /* Helper d3 accessor to clusters that represent stages. */
 function stageClusters() {
-  return graphContainer().selectAll("g.cluster").filter(function() {
-    return d3.select(this).attr("id").indexOf(VizConstants.stageClusterPrefix) > -1;
-  });
+  return graphContainer()
+    .selectAll("svg g.cluster")
+    .filter("[id*=\"" + VizConstants.stageClusterPrefix + "\"]");
 }
 
 /* Helper method to convert attributes to numeric values. */

diff --git a/core/src/main/scala/org/apache/spark/ui/scope/RDDOperationGraph.scala b/core/src/main/scala/org/apache/spark/ui/scope/RDDOperationGraph.scala
@@ -191,12 +191,13 @@ private[ui] object RDDOperationGraph extends Logging {
       forJob: Boolean,
       indent: String): String = {
     val subgraph = new StringBuilder
+    val paddingTop = if (forJob) 5 else 15
     subgraph.append(indent + s"subgraph cluster${cluster.id} {\n")
     subgraph.append(indent + s"""  label="${cluster.name}";\n""")
     // If there are nested clusters, add some padding
     // Do this for the stage page because we use bigger fonts there
-    if (cluster.childClusters.nonEmpty && !forJob) {
-      subgraph.append(indent + s"""  paddingTop="10";\n""")
+    if (cluster.childClusters.nonEmpty) {
+      subgraph.append(indent + s"""  paddingTop="$paddingTop";\n""")
     }
     cluster.childNodes.foreach { node =>
       subgraph.append(indent + s"  ${makeDotNode(node, forJob)};\n")