Skip to content

[SPARK-56002][UI] Make SQL plan visualization metrics table sortable #54823

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
yaooqinn wants to merge 1 commit into from
+14 −6
Closed

[SPARK-56002][UI] Make SQL plan visualization metrics table sortable #54823

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 14 additions & 6 deletions sql/core/src/main/resources/org/apache/spark/sql/execution/ui/static/spark-sql-viz.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
* limitations under the License.
*/

/* global $, d3, dagreD3, graphlibDot, uiRoot, appBasePath */
/* global $, d3, dagreD3, graphlibDot, uiRoot, appBasePath, sorttable */

var PlanVizConstants = {
svgMarginX: 16,
Expand Down Expand Up @@ -441,7 +441,7 @@ function updateDetailsPanel(nodeId, nodeDetails) {

var html = "";
if (details.metrics && details.metrics.length > 0) {
html += buildMetricsTable(details.metrics, showStageTask);
html += buildMetricsTable(details.metrics, showStageTask, true);
} else if (!details.children) {
html += '<p class="text-muted mb-0">No metrics</p>';
}
Expand All @@ -453,14 +453,21 @@ function updateDetailsPanel(nodeId, nodeDetails) {
if (child) {
html += '<h6 class="mt-2 mb-1 fw-bold">' + htmlEscape(child.name) + '</h6>';
if (child.metrics && child.metrics.length > 0) {
html += buildMetricsTable(child.metrics, showStageTask);
html += buildMetricsTable(child.metrics, showStageTask, true);
} else {
html += '<p class="text-muted mb-0">No metrics</p>';
}
}
});
}
bodyEl.innerHTML = html;

// Initialize sorttable on dynamically injected metrics tables
if (typeof sorttable !== "undefined") {
bodyEl.querySelectorAll("table.sortable").forEach(function (table) {
sorttable.makeSortable(table);
});
}
}

function htmlEscape(str) {
Expand All @@ -471,8 +478,9 @@ function htmlEscape(str) {
/*
* Build an HTML metrics table from a metrics array.
*/
function buildMetricsTable(metrics, showStageTask) {
var html = '<table class="table table-sm table-bordered mb-0">';
function buildMetricsTable(metrics, showStageTask, enableSort) {
var cls = "table table-sm table-bordered mb-0" + (enableSort ? " sortable" : "");
var html = '<table class="' + cls + '">';
html += "<thead><tr><th>Metric</th><th>Value</th></tr></thead><tbody>";
metrics.forEach(function (m) {
var name = htmlEscape(m.name);
Expand Down Expand Up @@ -643,7 +651,7 @@ function rerenderWithDetailedLabels() {
if (details.metrics && details.metrics.length > 0) {
var html = '<div style="padding:4px;text-align:left;font-size:10px;">';
html += '<strong>' + htmlEscape(details.name) + '</strong>';
html += buildMetricsTable(details.metrics, showStageTask);
html += buildMetricsTable(details.metrics, showStageTask, false);
html += '</div>';
node.labelType = "html";
node.label = html;
Expand Down