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 <y...@apache.org> 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 <y...@apache.org> Signed-off-by: Dongjoon Hyun <dh...@apple.com> --- .../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: commits-unsubscr...@spark.apache.org For additional commands, e-mail: commits-h...@spark.apache.org