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

[yaooqinn]

What changes were proposed in this pull request?

This PR adds a download link to the ExecutionPage for SVG/dot/txt format plans.

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

<svgxmlns="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;}svgg.clusterrect {fill: #A0DFFF;stroke: #3EC0FF;stroke-width: 1px;}svgg.noderect {fill: #C3EBFF;stroke: #3EC0FF;stroke-width: 1px;}/* Highlight the SparkPlan node name */svgtext:first-child:not(.stageId-and-taskId-metrics) {font-weight: bold;}svgtext {fill: #333;}svgpath {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;}svgg.noderect.selected {fill: #E25A1CFF;stroke: #317EACFF;stroke-width: 2px;}svgg.noderect.linked {fill: #FFC106FF;stroke: #317EACFF;stroke-width: 2px;}svgpath.linked {fill: #317EACFF;stroke: #317EACFF;stroke-width: 2px;}</style><g><gclass="output"><gclass="clusters"/><gclass="edgePaths"/><gclass="edgeLabels"/><gclass="nodes"><gclass="node"id="node0"transform="translate(136.0234375,31.765625)"style="opacity: 1;"data-original-title=""title=""><rectrx="5"ry="5"x="-136.0234375"y="-31.765625"width="272.046875"height="63.53125"class="label-container"/><gclass="label"transform="translate(0,0)"><gtransform="translate(-131.0234375,-26.765625)"><foreignObjectwidth="262.046875"height="53.53125"><divxmlns="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>

• DOT

digraphG {
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

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

no

[yaooqinn]

The inlined style to the exported SVG does not have the plan-viz-graph div as a container

[yaooqinn]

cc @dongjoon-hyun@HyukjinKwon@cloud-fan thank you

[dongjoon-hyun]

+1, LGTM. Nice, @yaooqinn !

[yaooqinn]

Thank you @dongjoon-hyun

Merged to master