[SPARK-7347] Dag visualization: add hover to RDDs on job page

.rat-excludes

@@ -33,6 +33,7 @@ jquery-1.11.1.min.js
 d3.min.js
 dagre-d3.min.js
 graphlib-dot.min.js
+tooltipsy.min.js
 sorttable.js
 vis.min.js
 vis.min.css

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

@@ -60,6 +60,22 @@
   fill: #AAAAAA;
 }
 
+.dag-viz-rdd-tooltip {
+  font-size: 11px;
+  padding: 5px;
+  color: #fff;
+  background-color: #444;
+  -moz-box-shadow: inset 0 0 5px #000;
+  -webkit-box-shadow: inset 0 0 5px #000;
+  box-shadow: inset 0 0 10px #000;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  opacity: 0.8;
+  left: 5px;
+  top: 50px;
+  position: relative;
+}
+
 /* Stage page specific styles */
 
 #dag-viz-graph svg.stage g.cluster rect {

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

@@ -218,6 +218,7 @@ function renderDagVizForJob(svgContainer) {
     });
   });
 
+  addRDDTooltips(svgContainer);
   drawCrossStageEdges(crossStageEdges, svgContainer);
 }
 
@@ -424,6 +425,21 @@ function connectRDDs(fromRDDId, toRDDId, edgesContainer, svgContainer) {
   edgesContainer.append("path").datum(points).attr("d", line);
 }
 
+/* (Job page only) Add tooltips for RDDs. */
+function addRDDTooltips(svgContainer) {
+  var rdds = svgContainer
+    .selectAll("g.node circle")
+    .attr("title", function(v) { return d3.select(this.parentNode).attr("name"); });
+  // Here we cheat a little and use jQuery because it's much easier to use tooltips there
+  // Note that we can't just use $(...).tooltip() because we're inside an SVG
+  $(rdds[0]).tooltipsy({
+    className: "dag-viz-rdd-tooltip",
+    delay: 0,
+    show: function (_, e) { e.fadeIn(50); },
+    hide: function (_, e) { e.fadeOut(50); }
+  });
+}
+
 /* Helper function to convert attributes to numeric values. */
 function toFloat(f) {
   if (f) {

core/src/main/scala/org/apache/spark/ui/UIUtils.scala

@@ -175,6 +175,7 @@ private[spark] object UIUtils extends Logging {
     <script src={prependBaseUri("/static/d3.min.js")}></script>
     <script src={prependBaseUri("/static/dagre-d3.min.js")}></script>
     <script src={prependBaseUri("/static/graphlib-dot.min.js")}></script>
+    <script src={prependBaseUri("/static/tooltipsy.min.js")}></script>
     <script src={prependBaseUri("/static/spark-dag-viz.js")}></script>
   }
 
@@ -330,12 +331,12 @@ private[spark] object UIUtils extends Logging {
   }
 
   /** Return a "DAG visualization" DOM element that expands into a visualization for a stage. */
-  def showDagVizForStage(stageId: Int, graph: Option[RDDOperationGraph]): Seq[Node] = {
+  def showDagVizForStage(graph: Option[RDDOperationGraph]): Seq[Node] = {
     showDagViz(graph.toSeq, forJob = false)
   }
 
   /** Return a "DAG visualization" DOM element that expands into a visualization for a job. */
-  def showDagVizForJob(jobId: Int, graphs: Seq[RDDOperationGraph]): Seq[Node] = {
+  def showDagVizForJob(graphs: Seq[RDDOperationGraph]): Seq[Node] = {
     showDagViz(graphs, forJob = true)
   }
 

core/src/main/scala/org/apache/spark/ui/jobs/JobPage.scala

@@ -309,8 +309,7 @@ private[ui] class JobPage(parent: JobsTab) extends WebUIPage("job") {
       content ++= makeTimeline(activeStages ++ completedStages ++ failedStages,
           executorListener.executorIdToData, appStartTime)
 
-      content ++= UIUtils.showDagVizForJob(
-        jobId, operationGraphListener.getOperationGraphForJob(jobId))
+      content ++= UIUtils.showDagVizForJob(operationGraphListener.getOperationGraphForJob(jobId))
 
       if (shouldShowActiveStages) {
         content ++= <h4 id="active">Active Stages ({activeStages.size})</h4> ++

core/src/main/scala/org/apache/spark/ui/jobs/StagePage.scala

@@ -172,7 +172,7 @@ private[ui] class StagePage(parent: StagesTab) extends WebUIPage("stage") {
         </div>
 
       val dagViz = UIUtils.showDagVizForStage(
-        stageId, operationGraphListener.getOperationGraphForStage(stageId))
+        operationGraphListener.getOperationGraphForStage(stageId))
 
       val accumulableHeaders: Seq[String] = Seq("Accumulable", "Value")
       def accumulableRow(acc: AccumulableInfo): Elem =

core/src/main/scala/org/apache/spark/ui/scope/RDDOperationGraph.scala

@@ -179,7 +179,7 @@ private[ui] object RDDOperationGraph extends Logging {
    */
   private def makeDotNode(node: RDDOperationNode, forJob: Boolean): String = {
     if (forJob) {
-      s"""${node.id} [label=" " shape="circle" padding="5" labelStyle="font-size: 0"]"""
+      s"""${node.id} [label="${node.name}" shape="circle" padding="5" labelStyle="font-size: 0"]"""
     } else {
       s"""${node.id} [label="${node.name} (${node.id})" padding="5" labelStyle="font-size: 10"]"""
     }