yaooqinn opened a new pull request, #55769:
URL: https://github.com/apache/spark/pull/55769
### What changes were proposed in this pull request?
Add pan and zoom controls to the SQL execution plan visualization rendered
on the SQL tab's execution detail page.
The SVG that hosts the dagre-d3 plan now lives inside a fixed-height
viewport (70vh) and is wrapped in an inner `<g class="zoom-layer">`.
A `d3.zoom()` behavior is attached to the SVG and applies its transform
to the zoom-layer; the viewBox keeps performing the natural fit. A small
floating toolbar in the top-right offers `-` / current % / `+` buttons,
and `+` / `-` / `0` keyboard shortcuts work whenever the cursor is over
the plan area.
Notes:
- Pan/zoom is suppressed when the user interacts with HTML labels
(`<foreignObject>`) so metric tables in detailed mode remain
selectable.
- The SVG download is now insulated from the user's current view: the
cloned SVG resets the zoom-layer transform and uses the viewBox as
its own `width`/`height` so external viewers render at the natural
plan size, matching the previous download behavior.
- Detailed-mode rerender reuses the same setup so zoom/pan keeps working
after toggling "Show metrics in graph nodes".
### Why are the changes needed?
Spark plans frequently grow large enough that the previous fit-the-page
SVG becomes hard to read: clusters wrap, scroll bars chase the cursor,
and zooming the browser distorts the surrounding page. Standard
pan/zoom on the plan itself is the conventional way to navigate large
DAGs and is a building block for further plan-viz work under
SPARK-55760.
### Does this PR introduce _any_ user-facing change?
Yes. The SQL tab's plan visualization has a fixed-height viewport with
new zoom controls (toolbar + wheel + drag-to-pan + keyboard).
### How was this patch tested?
- `build/sbt sql/Test/compile`
- `build/sbt sql/scalastyle sql/Test/scalastyle`
- `dev/lint-js` on the SQL static resources directory
### Was this patch authored or co-authored using generative AI tooling?
Generated-by: Cursor 1.0.43 with Claude Opus 4.7
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
