[SPARK-51629][UI] Add a download link on the ExecutionPage for svg/dot/txt format plans

### What changes were proposed in this pull request?
This PR adds a download link to the ExecutionPage for SVG/dot/txt format plans.
![image](https://github.com/user-attachments/assets/3359ac26-b4a6-4952-9bf0-b6ac22e6e199)

### Why are the changes needed?

These downloaded assets can improve the UX for sharing/porting to papers, social media, external advanced visualization tools, e.t.c.

### Does this PR introduce _any_ user-facing change?
Yes, UI changes

### How was this patch tested?
- SVG
```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-16 -16 304.046875 95.53125" width="304.046875" height="95.53125"><style>/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

.label {
  font-size: 0.85rem;
  font-weight: normal;
  text-shadow: none;
  color: #333;
}

svg g.cluster rect {
  fill: #A0DFFF;
  stroke: #3EC0FF;
  stroke-width: 1px;
}

svg g.node rect {
  fill: #C3EBFF;
  stroke: #3EC0FF;
  stroke-width: 1px;
}

/* Highlight the SparkPlan node name */
svg text :first-child:not(.stageId-and-taskId-metrics) {
  font-weight: bold;
}

svg text {
  fill: #333;
}

svg path {
  stroke: #444;
  stroke-width: 1.5px;
}

/* Breaks the long string like file path when showing tooltips */
.tooltip-inner {
  word-wrap:break-word;
}

/* Breaks the long job url list when showing Details for Query in SQL */
.job-url {
  word-wrap: break-word;
}

svg g.node rect.selected {
  fill: #E25A1CFF;
  stroke: #317EACFF;
  stroke-width: 2px;
}
svg g.node rect.linked {
  fill: #FFC106FF;
  stroke: #317EACFF;
  stroke-width: 2px;
}

svg path.linked {
  fill: #317EACFF;
  stroke: #317EACFF;
  stroke-width: 2px;
}
</style><g><g class="output"><g class="clusters"/><g class="edgePaths"/><g class="edgeLabels"/><g class="nodes"><g class="node" id="node0" transform="translate(136.0234375,31.765625)" style="opacity: 1;" data-original-title="" title=""><rect rx="5" ry="5" x="-136.0234375" y="-31.765625" width="272.046875" height="63.53125" class="label-container"/><g class="label" transform="translate(0,0)"><g transform="translate(-131.0234375,-26.765625)"><foreignObject width="262.046875" height="53.53125"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><br /><b>Execute CreateHiveTableAsSelectCommand</b><br /><br /></div></foreignObject></g></g></g></g></g></g></svg>
```
![plan (4)](https://github.com/user-attachments/assets/ba9dab38-515b-4ebf-82ab-2cd35e42fe8f)
- DOT
```dot
digraph G {
  0 [id="node0" labelType="html" label="<b>Execute InsertIntoHadoopFsRelationCommand</b><br><br>task commit time: 7 ms<br>number of written files: 1<br>job commit time: 24 ms<br>number of output rows: 1<br>number of dynamic part: 0<br>written output: 468.0 B" tooltip="Execute InsertIntoHadoopFsRelationCommand file:/Users/hzyaoqin/spark/spark-warehouse/t, false, Parquet, [parquet.compression=zstd, serialization.format=1, mergeschema=false, __hive_compatible_bucketed_table_insertion__=true], Append, `spark_catalog`.`default`.`t`, org.apache.hadoop.hive.ql.io.parquet.serde.ParquetHiveSerDe, org.apache.spark.sql.execution.datasources.InMemoryFileIndex(file:/Users/hzyaoqin/spark/spark-warehouse/t), [c]"];
  1 [id="node1" labelType="html" label="<br><b>WriteFiles</b><br><br>" tooltip="WriteFiles"];

  subgraph cluster2 {
    isCluster="true";
    id="cluster2";
    label="WholeStageCodegen (1)\n \nduration: 158 ms";
    tooltip="WholeStageCodegen (1)";
      3 [id="node3" labelType="html" label="<br><b>Project</b><br><br>" tooltip="Project [1 AS c#0]"];
  4 [id="node4" labelType="html" label="<b>Scan OneRowRelation</b><br><br>number of output rows: 1" tooltip="Scan OneRowRelation[]"];
  }

  1->0;

  3->1;

  4->3;

}
```

- TXT

[plan.txt](https://github.com/user-attachments/files/19480587/plan.txt)

### Was this patch authored or co-authored using generative AI tooling?
no

Closes #50427 from yaooqinn/SPARK-51629.

Authored-by: Kent Yao <[email protected]>
Signed-off-by: Kent Yao <[email protected]>

Author: yaooqinn

dev/eslint.js

@@ -40,6 +40,7 @@ module.exports = {
     "dataTables.rowsGroup.js"
   ],
   "parserOptions": {
-    "sourceType": "module"
+    "sourceType": "module",
+    "ecmaVersion": "latest"
   }
 }

sql/core/src/main/resources/org/apache/spark/sql/execution/ui/static/spark-sql-viz.css

@@ -15,35 +15,35 @@
  * limitations under the License.
  */
 
-#plan-viz-graph .label {
+svg g.label {
   font-size: 0.85rem;
   font-weight: normal;
   text-shadow: none;
   color: #333;
 }
 
-#plan-viz-graph svg g.cluster rect {
+svg g.cluster rect {
   fill: #A0DFFF;
   stroke: #3EC0FF;
   stroke-width: 1px;
 }
 
-#plan-viz-graph svg g.node rect {
+svg g.node rect {
   fill: #C3EBFF;
   stroke: #3EC0FF;
   stroke-width: 1px;
 }
 
 /* Highlight the SparkPlan node name */
-#plan-viz-graph svg text :first-child:not(.stageId-and-taskId-metrics) {
+svg text :first-child:not(.stageId-and-taskId-metrics) {
   font-weight: bold;
 }
 
-#plan-viz-graph svg text {
+svg text {
   fill: #333;
 }
 
-#plan-viz-graph svg path {
+svg path {
   stroke: #444;
   stroke-width: 1.5px;
 }
@@ -58,19 +58,19 @@
   word-wrap: break-word;
 }
 
-#plan-viz-graph svg g.node rect.selected {
+svg g.node rect.selected {
   fill: #E25A1CFF;
   stroke: #317EACFF;
   stroke-width: 2px;
 }
 
-#plan-viz-graph svg g.node rect.linked {
+svg g.node rect.linked {
   fill: #FFC106FF;
   stroke: #317EACFF;
   stroke-width: 2px;
 }
 
-#plan-viz-graph svg path.linked {
+svg path.linked {
   fill: #317EACFF;
   stroke: #317EACFF;
   stroke-width: 2px;

sql/core/src/main/resources/org/apache/spark/sql/execution/ui/static/spark-sql-viz.js

@@ -312,3 +312,36 @@ function collectLinks(map, key, value) {
   }
   map.get(key).add(value);
 }
+
+function downloadPlanBlob(b, ext) {
+  const link = document.createElement("a");
+  link.href = URL.createObjectURL(b);
+  link.download = `plan.${ext}`;
+  link.click();
+}
+
+document.getElementById("plan-viz-download-btn").addEventListener("click", async function () {
+  const format = document.getElementById("plan-viz-format-select").value;
+  let blob;
+  if (format === "svg") {
+    const svg = planVizContainer().select("svg").node().cloneNode(true);
+    let css = "";
+    try {
+      css = await fetch("/static/sql/spark-sql-viz.css").then((resp) => resp.text());
+    } catch (e) {
+      console.error("Failed to fetch CSS for SVG download", e);
+    }
+    d3.select(svg).insert("style", ":first-child").text(css);
+    const svgData = new XMLSerializer().serializeToString(svg);
+    blob = new Blob([svgData], { type: "image/svg+xml" });
+  } else if (format === "dot") {
+    const dot = d3.select("#plan-viz-metadata .dot-file").text().trim();
+    blob = new Blob([dot], { type: "text/plain" });
+  } else if (format === "txt") {
+    const txt = d3.select("#physical-plan-details pre").text().trim();
+    blob = new Blob([txt], { type: "text/plain" });
+  } else {
+    return;
+  }
+  downloadPlanBlob(blob, format);
+});

sql/core/src/main/scala/org/apache/spark/sql/execution/ui/ExecutionPage.scala

@@ -75,6 +75,16 @@ class ExecutionPage(parent: SQLTab) extends WebUIPage("execution") with Logging
             {jobLinks(JobExecutionStatus.SUCCEEDED, "Succeeded Jobs:")}
             {jobLinks(JobExecutionStatus.FAILED, "Failed Jobs:")}
           </ul>
+          <div id="plan-viz-download-btn-container">
+            <select id="plan-viz-format-select">
+              <option value="svg">SVG</option>
+              <option value="dot">DOT</option>
+              <option value="txt">TXT</option>
+            </select>
+            <label for="plan-viz-format-select">
+              <a id="plan-viz-download-btn" class="downloadbutton">Download</a>
+            </label>
+          </div>
         </div>
 
       val metrics = sqlStore.executionMetrics(executionId)