diff options
author | Andrew Or <andrew@databricks.com> | 2015-05-07 12:29:56 -0700 |
---|---|---|
committer | Andrew Or <andrew@databricks.com> | 2015-05-07 12:29:56 -0700 |
commit | 88717ee4e7542ac8d5d2e5756c912dd390b37e88 (patch) | |
tree | 2b9ade0cfe86f50cf4f03807b309d6d07c044c37 /core/src | |
parent | f1216514b830eadcdfff6fca044afd6ae1585800 (diff) | |
download | spark-88717ee4e7542ac8d5d2e5756c912dd390b37e88.tar.gz spark-88717ee4e7542ac8d5d2e5756c912dd390b37e88.tar.bz2 spark-88717ee4e7542ac8d5d2e5756c912dd390b37e88.zip |
[SPARK-7347] DAG visualization: add tooltips to RDDs
This is an addition to #5729.
Here's an example with ALS.
<img src="https://issues.apache.org/jira/secure/attachment/12731039/tooltip.png" width="400px"></img>
Author: Andrew Or <andrew@databricks.com>
Closes #5957 from andrewor14/viz-hover2 and squashes the following commits:
60e3758 [Andrew Or] Add tooltips for RDDs on job page
Diffstat (limited to 'core/src')
-rw-r--r-- | core/src/main/resources/org/apache/spark/ui/static/spark-dag-viz.js | 16 | ||||
-rw-r--r-- | core/src/main/scala/org/apache/spark/ui/scope/RDDOperationGraph.scala | 5 |
2 files changed, 19 insertions, 2 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 index cda27cad7e..a0e3e914c2 100644 --- 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 @@ -218,6 +218,7 @@ function renderDagVizForJob(svgContainer) { }); }); + addTooltipsForRDDs(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) Helper function to add tooltips for RDDs. */ +function addTooltipsForRDDs(svgContainer) { + svgContainer.selectAll("g.node").each(function() { + var node = d3.select(this); + var tooltipText = node.attr("name"); + if (tooltipText) { + node.select("circle") + .attr("data-toggle", "tooltip") + .attr("data-placement", "right") + .attr("title", tooltipText) + } + }); + $("[data-toggle=tooltip]").tooltip({container: "body"}); +} + /* Helper function to convert attributes to numeric values. */ function toFloat(f) { if (f) { 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 index edf005f7f3..2b2db9e62b 100644 --- a/core/src/main/scala/org/apache/spark/ui/scope/RDDOperationGraph.scala +++ b/core/src/main/scala/org/apache/spark/ui/scope/RDDOperationGraph.scala @@ -178,10 +178,11 @@ private[ui] object RDDOperationGraph extends Logging { * On the stage page, it is displayed as a box with an embedded label. */ private def makeDotNode(node: RDDOperationNode, forJob: Boolean): String = { + val label = s"${node.name} (${node.id})" if (forJob) { - s"""${node.id} [label=" " shape="circle" padding="5" labelStyle="font-size: 0"]""" + s"""${node.id} [label="$label" shape="circle" padding="5" labelStyle="font-size: 0"]""" } else { - s"""${node.id} [label="${node.name} (${node.id})" padding="5" labelStyle="font-size: 10"]""" + s"""${node.id} [label="$label" padding="5" labelStyle="font-size: 10"]""" } } |