(spark) branch master updated: [SPARK-54320][UI] Fix Job DAG overlapping

[do...@apache.org]

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 1a802e36ed76 [SPARK-54320][UI] Fix Job DAG overlapping
1a802e36ed76 is described below

commit 1a802e36ed7698b7108ea7c0000efda1e6d5f949
Author: Kent Yao <ya...@apache.org>
AuthorDate: Wed Nov 12 08:06:08 2025 -0800

    [SPARK-54320][UI] Fix Job DAG overlapping
    
    ### What changes were proposed in this pull request?
    Fix the Job DAG overlapping
    
    ### Why are the changes needed?
    
    A job with multiple stages might generate SVGs with overlapping
    ### Does this PR introduce _any_ user-facing change?
    no
    
    ### How was this patch tested?
    <img width="2956" height="1306" alt="image" src="https://github.com/user-attachments/assets/9ccfdc22-fa8d-4c9a-a8f2-5758b5382e08" />
    
    ### Was this patch authored or co-authored using generative AI tooling?
    no
    
    Closes #53015 from yaooqinn/SPARK-54320.
    
    Authored-by: Kent Yao <ya...@apache.org>
    Signed-off-by: Dongjoon Hyun <do...@apache.org>
---
 .../org/apache/spark/ui/static/spark-dag-viz.js    | 28 +++++++++++-----------
 1 file changed, 14 insertions(+), 14 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 fd0baec8af6c..230c2059e6e3 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
@@ -295,6 +295,20 @@ function renderDagVizForJob(svgContainer) {
         .append("g")
     }
 
+    // Now we need to shift the container for this stage so it doesn't overlap with
+    // existing ones, taking into account the position and width of the last stage's
+    // container. We do not need to do this for the first stage of this job.
+    if (i > 0) {
+      const lastStage = svgContainer.selectAll("g.cluster.stage")
+        .filter((d, i, nodes) => i === nodes.length - 1);
+      if (lastStage) {
+        const lastStageWidth = toFloat(lastStage.select("rect").attr("width"));
+        const lastStagePosition = getAbsolutePosition(lastStage);
+        const offset = lastStagePosition.x + lastStageWidth + VizConstants.stageSep;
+        container.attr("transform", `translate(${offset}, 0)`);
+      }
+    }
+
     var g = graphlibDot.read(dot);
     // Actually render the stage
     renderDot(g, container, true);
@@ -312,20 +326,6 @@ function renderDagVizForJob(svgContainer) {
       .attr("rx", "4")
       .attr("ry", "4");
 
-    // Now we need to shift the container for this stage so it doesn't overlap with
-    // existing ones, taking into account the position and width of the last stage's
-    // container. We do not need to do this for the first stage of this job.
-    if (i > 0) {
-      var existingStages = svgContainer.selectAll("g.cluster.stage").nodes();
-      if (existingStages.length > 0) {
-        var lastStage = d3.select(existingStages.pop());
-        var lastStageWidth = toFloat(lastStage.select("rect").attr("width"));
-        var lastStagePosition = getAbsolutePosition(lastStage);
-        var offset = lastStagePosition.x + lastStageWidth + VizConstants.stageSep;
-        container.attr("transform", "translate(" + offset + ", 0)");
-      }
-    }
-
     // If there are any incoming edges into this graph, keep track of them to render
     // them separately later. Note that we cannot draw them now because we need to
     // put these edges in a separate container that is on top of all stage graphs.


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@spark.apache.org
For additional commands, e-mail: commits-help@spark.apache.org