This is an automated email from the ASF dual-hosted git repository.
dongjoon pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/spark.git
The following commit(s) were added to refs/heads/master by this push:
new b1a0d6703bf0 [SPARK-45312][SQL][UI] Support toggle display/hide plan
svg on execution page
b1a0d6703bf0 is described below
commit b1a0d6703bf0eb7609b394a41463ef5d02937223
Author: Kent Yao <[email protected]>
AuthorDate: Mon Sep 25 19:59:58 2023 -0700
[SPARK-45312][SQL][UI] Support toggle display/hide plan svg on execution
page
### What changes were proposed in this pull request?
This PR supports toggle display/hide plan svg on the execution page.
### Why are the changes needed?
Improve UX for the execution page, especially for large plans
### Does this PR introduce _any_ user-facing change?
yes, UI changes
### How was this patch tested?
tested locally
https://github.com/apache/spark/assets/8326978/e8b7573a-20b6-4a7d-9542-b1dd62bb04db
### Was this patch authored or co-authored using generative AI tooling?
no
Closes #43099 from yaooqinn/SPARK-45312.
Authored-by: Kent Yao <[email protected]>
Signed-off-by: Dongjoon Hyun <[email protected]>
---
.../spark/sql/execution/ui/static/spark-sql-viz.js | 12 ++++++++++++
.../apache/spark/sql/execution/ui/ExecutionPage.scala | 18 +++++++++++++-----
2 files changed, 25 insertions(+), 5 deletions(-)
diff --git
a/sql/core/src/main/resources/org/apache/spark/sql/execution/ui/static/spark-sql-viz.js
b/sql/core/src/main/resources/org/apache/spark/sql/execution/ui/static/spark-sql-viz.js
index ea42877924d4..8999d6ff1fed 100644
---
a/sql/core/src/main/resources/org/apache/spark/sql/execution/ui/static/spark-sql-viz.js
+++
b/sql/core/src/main/resources/org/apache/spark/sql/execution/ui/static/spark-sql-viz.js
@@ -257,3 +257,15 @@ function onClickAdditionalMetricsCheckbox(checkboxNode) {
}
window.localStorage.setItem("stageId-and-taskId-checked", isChecked);
}
+
+function togglePlanViz() {
+ const arrow = d3.select("#plan-viz-graph-arrow");
+ arrow.each(function () {
+ $(this).toggleClass("arrow-open").toggleClass("arrow-closed")
+ });
+ if (arrow.classed("arrow-open")) {
+ planVizContainer().style("display", "block");
+ } else {
+ planVizContainer().style("display", "none");
+ }
+}
diff --git
a/sql/core/src/main/scala/org/apache/spark/sql/execution/ui/ExecutionPage.scala
b/sql/core/src/main/scala/org/apache/spark/sql/execution/ui/ExecutionPage.scala
index aa8fd261c58f..d1aefdb3463f 100644
---
a/sql/core/src/main/scala/org/apache/spark/sql/execution/ui/ExecutionPage.scala
+++
b/sql/core/src/main/scala/org/apache/spark/sql/execution/ui/ExecutionPage.scala
@@ -77,10 +77,6 @@ class ExecutionPage(parent: SQLTab) extends
WebUIPage("execution") with Logging
{jobLinks(JobExecutionStatus.FAILED, "Failed Jobs:")}
</ul>
</div>
- <div>
- <input type="checkbox" id="stageId-and-taskId-checkbox"></input>
- <span>Show the Stage ID and Task ID that corresponds to the max
metric</span>
- </div>
val metrics = sqlStore.executionMetrics(executionId)
val graph = sqlStore.planGraph(executionId)
@@ -117,7 +113,19 @@ class ExecutionPage(parent: SQLTab) extends
WebUIPage("execution") with Logging
graph: SparkPlanGraph): Seq[Node] = {
<div>
- <div id="plan-viz-graph"></div>
+ <div>
+ <span style="cursor: pointer;" onclick="togglePlanViz();">
+ <span id="plan-viz-graph-arrow" class="arrow-open"></span>
+ <a>Plan Visualization</a>
+ </span>
+ </div>
+
+ <div id="plan-viz-graph">
+ <div>
+ <input type="checkbox" id="stageId-and-taskId-checkbox"></input>
+ <span>Show the Stage ID and Task ID that corresponds to the max
metric</span>
+ </div>
+ </div>
<div id="plan-viz-metadata" style="display:none">
<div class="dot-file">
{graph.makeDotFile(metrics)}
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
