This is an automated email from the ASF dual-hosted git repository.
yao 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 58cb617f87f6 [SPARK-55961][UI] Make SQL plan viz side panel collapsible
58cb617f87f6 is described below
commit 58cb617f87f6ecbffa869898caa2fb75d7b16f47
Author: Kent Yao <[email protected]>
AuthorDate: Thu Mar 12 13:36:04 2026 +0800
[SPARK-55961][UI] Make SQL plan viz side panel collapsible
### What changes were proposed in this pull request?
Makes the SQL plan visualization detail panel collapsible so the graph can
use the full page width.
**Behavior:**
- **Default**: Graph uses full width (`col-12`), panel is hidden
- **Click a node**: Panel slides in (`col-8` + `col-4` split), shows node
metrics
- **Click ×**: Panel closes, graph restores to full width
**Changes (3 files, +31/-3):**
- `ExecutionPage.scala`: Panel column starts with `d-none`, graph starts as
`col-12`. Added close button (×) in card header.
- `spark-sql-viz.js`: `showDetailsPanel()` toggles column classes.
`updateDetailsPanel()` auto-shows panel on node click. Close button handler
hides panel.
### Why are the changes needed?
The old layout permanently allocated 33% of screen width for the panel even
when empty ("Click a node to view details"), wasting space for the plan graph.
Now the graph gets full width by default and the panel only appears when needed.
### Does this PR introduce _any_ user-facing change?
Yes — the detail panel starts hidden and appears on node click. A close
button (×) in the header dismisses it.
### How was this patch tested?
lint-js passes. Compilation verified. Manual testing.
### Was this patch authored or co-authored using generative AI tooling?
Yes, co-authored with GitHub Copilot.
Closes #54757 from yaooqinn/SPARK-55961.
Authored-by: Kent Yao <[email protected]>
Signed-off-by: Kent Yao <[email protected]>
---
.../spark/sql/execution/ui/static/spark-sql-viz.js | 20 ++++++++++++++++++++
.../spark/sql/execution/ui/ExecutionPage.scala | 10 +++++++---
2 files changed, 27 insertions(+), 3 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 584ffa89c94c..b34cab71bd9e 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
@@ -399,6 +399,8 @@ function updateDetailsPanel(nodeId, nodeDetails) {
var bodyEl = document.getElementById("plan-viz-details-body");
if (!titleEl || !bodyEl) return;
+ showDetailsPanel();
+
selectedNodeId = nodeId;
cachedNodeDetails = nodeDetails;
@@ -658,3 +660,21 @@ document.addEventListener("DOMContentLoaded", function () {
renderPlanViz();
}
});
+
+// Panel show/hide
+$(function() {
+ $("#plan-viz-panel-close").on("click", function() {
+ $("#plan-viz-details-col").addClass("d-none");
+ $("#plan-viz-graph-col").removeClass("col-8").addClass("col-12");
+ });
+});
+
+function showDetailsPanel() {
+ var col = document.getElementById("plan-viz-details-col");
+ var graphCol = document.getElementById("plan-viz-graph-col");
+ if (col && graphCol) {
+ col.classList.remove("d-none");
+ graphCol.classList.remove("col-12");
+ graphCol.classList.add("col-8");
+ }
+}
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 4bd897fa43f1..aefbf8e62cda 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
@@ -169,7 +169,7 @@ class ExecutionPage(parent: SQLTab) extends
WebUIPage("execution") with Logging
</div>
<div id="plan-viz-content" class="row">
- <div class="col-8">
+ <div id="plan-viz-graph-col" class="col-12">
<div id="plan-viz-graph">
<div>
<input type="checkbox" id="stageId-and-taskId-checkbox"></input>
@@ -181,10 +181,14 @@ class ExecutionPage(parent: SQLTab) extends
WebUIPage("execution") with Logging
</div>
</div>
</div>
- <div class="col-4">
+ <div id="plan-viz-details-col" class="col-4 d-none">
<div id="plan-viz-details-panel" class="sticky-top" style="top:
4rem; z-index: 1;">
<div class="card">
- <div class="card-header fw-bold"
id="plan-viz-details-title">Details</div>
+ <div class="card-header d-flex justify-content-between
align-items-center">
+ <span class="fw-bold"
id="plan-viz-details-title">Details</span>
+ <button id="plan-viz-panel-close" class="btn btn-sm btn-close"
+ type="button" title="Close panel"></button>
+ </div>
<div class="card-body" id="plan-viz-details-body">
<p class="text-muted mb-0">Click a node to view details</p>
</div>
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
