From 108d56ccf625089c163167770eb80f5e2030b769 Mon Sep 17 00:00:00 2001 From: zsxwing Date: Thu, 14 May 2015 13:51:06 -0700 Subject: [PATCH 1/3] Update the mouse behaviors for the timeline graphs 1. If a mouse is on one point of a batch, highlight the corresponding batch row. If the user click one point of a batch, scroll down to the corresponding batch row and highlight it. And recovery the batch row after 5 seconds if necessary. 2. Add "#batches" in the histogram graphs. --- .../apache/spark/ui/static/streaming-page.css | 4 ++ .../apache/spark/ui/static/streaming-page.js | 70 ++++++++++++++++++- .../spark/streaming/ui/AllBatchesTable.scala | 3 +- 3 files changed, 74 insertions(+), 3 deletions(-) diff --git a/core/src/main/resources/org/apache/spark/ui/static/streaming-page.css b/core/src/main/resources/org/apache/spark/ui/static/streaming-page.css index 19abe889ad3c1..b22c884bfebdb 100644 --- a/core/src/main/resources/org/apache/spark/ui/static/streaming-page.css +++ b/core/src/main/resources/org/apache/spark/ui/static/streaming-page.css @@ -60,3 +60,7 @@ span.expand-input-rate { cursor: pointer; } + +tr.batch-table-cell-highlight > td { + background-color: #D6FFE4 !important; +} diff --git a/core/src/main/resources/org/apache/spark/ui/static/streaming-page.js b/core/src/main/resources/org/apache/spark/ui/static/streaming-page.js index 0ee6752b29e9a..19985d4c7d232 100644 --- a/core/src/main/resources/org/apache/spark/ui/static/streaming-page.js +++ b/core/src/main/resources/org/apache/spark/ui/static/streaming-page.js @@ -146,6 +146,14 @@ function drawTimeline(id, data, minX, maxX, minY, maxY, unitY, batchInterval) { .attr("class", "line") .attr("d", line); + // If a mouse is on one point of a batch, highlight the corresponding batch row. + // If the user click one point of a batch, scroll down to the corresponding batch row and + // highlight it. And recovery the batch row after 5 seconds if necessary. + var clickedBatch = null; + var mouseoveredBatch = null; + var highlightBatch = null; + var lastTimeout = null; + // Add points to the line. However, we make it invisible at first. But when the user moves mouse // over a point, it will be displayed with its detail. svg.selectAll(".point") @@ -154,10 +162,21 @@ function drawTimeline(id, data, minX, maxX, minY, maxY, unitY, batchInterval) { .attr("stroke", "white") // white and opacity = 0 make it invisible .attr("fill", "white") .attr("opacity", "0") + .style("cursor", "pointer") .attr("cx", function(d) { return x(d.x); }) .attr("cy", function(d) { return y(d.y); }) .attr("r", function(d) { return 3; }) .on('mouseover', function(d) { + mouseoveredBatch = d.x; + if (mouseoveredBatch != highlightBatch) { + if (highlightBatch != null) { + clearBatchRow(mouseoveredBatch); + highlightBatch = null + } + highlightBatchRow(mouseoveredBatch); + highlightBatch = mouseoveredBatch + } + var tip = formatYValue(d.y) + " " + unitY + " at " + timeFormat[d.x]; showBootstrapTooltip(d3.select(this).node(), tip); // show the point @@ -166,7 +185,16 @@ function drawTimeline(id, data, minX, maxX, minY, maxY, unitY, batchInterval) { .attr("fill", "steelblue") .attr("opacity", "1"); }) - .on('mouseout', function() { + .on('mouseout', function(d) { + if (clickedBatch == d.x) { + // We are leaving because it's clicked, so don't clear the background color + } else { + clearBatchRow(mouseoveredBatch); + highlightBatch = null; + } + mouseoveredBatch = null; + clickedBatch = null; + hideBootstrapTooltip(d3.select(this).node()); // hide the point d3.select(this) @@ -175,7 +203,34 @@ function drawTimeline(id, data, minX, maxX, minY, maxY, unitY, batchInterval) { .attr("opacity", "0"); }) .on("click", function(d) { - window.location.href = "batch/?id=" + d.x; + if (lastTimeout != null) { + window.clearTimeout(lastTimeout); + } + clickedBatch = d.x; + // the bach row has already been highlighted because of "mouseover" + + lastTimeout = window.setTimeout(function () { + lastTimeout = null; + if (mouseoveredBatch == null) { + // If the mouse is not on any batch, and this batch is highlighted, just clear it. + if (highlightBatch == d.x) { + clearBatchRow(highlightBatch); + highlightBatch = null; + } + } + if (clickedBatch == d.x) { + // The mouse is still on this batch, so clear clickedBatch. Then + // "clearBatchRow" will be called when "mouseout". + clickedBatch = null; + } + }, 5000); // Clean up after 5 seconds + + var batchSelector = $("#batch-" + d.x); + var topOffset = batchSelector.offset().top - 15; + if (topOffset < 0) { + topOffset = 0; + } + $('html,body').animate({scrollTop: topOffset}, 200); }); } @@ -218,6 +273,9 @@ function drawHistogram(id, values, minY, maxY, unitY, batchInterval) { svg.append("g") .attr("class", "x axis") .call(xAxis) + .append("text") + .attr("transform", "translate(" + (margin.left + width - 40) + ", 15)") + .text("#batches"); svg.append("g") .attr("class", "y axis") @@ -279,3 +337,11 @@ $(function() { $(this).find('.expand-input-rate-arrow').toggleClass('arrow-open').toggleClass('arrow-closed'); } }); + +function highlightBatchRow(batch) { + $("#batch-" + batch).parent().addClass("batch-table-cell-highlight"); +} + +function clearBatchRow(batch) { + $("#batch-" + batch).parent().removeClass("batch-table-cell-highlight"); +} diff --git a/streaming/src/main/scala/org/apache/spark/streaming/ui/AllBatchesTable.scala b/streaming/src/main/scala/org/apache/spark/streaming/ui/AllBatchesTable.scala index 00cc47d6a3ca5..f702bd5bc9466 100644 --- a/streaming/src/main/scala/org/apache/spark/streaming/ui/AllBatchesTable.scala +++ b/streaming/src/main/scala/org/apache/spark/streaming/ui/AllBatchesTable.scala @@ -44,8 +44,9 @@ private[ui] abstract class BatchTableBase(tableId: String, batchInterval: Long) val formattedSchedulingDelay = schedulingDelay.map(SparkUIUtils.formatDuration).getOrElse("-") val processingTime = batch.processingDelay val formattedProcessingTime = processingTime.map(SparkUIUtils.formatDuration).getOrElse("-") + val batchTimeId = s"batch-$batchTime" - + {formattedBatchTime} From 31fd0aa088c355e99af25aeea9d1e41c167298a5 Mon Sep 17 00:00:00 2001 From: zsxwing Date: Mon, 18 May 2015 11:08:44 -0700 Subject: [PATCH 2/3] Remove the mouseover highlight feature --- .../streaming/ui/static/streaming-page.js | 54 +++++-------------- 1 file changed, 14 insertions(+), 40 deletions(-) diff --git a/streaming/src/main/resources/org/apache/spark/streaming/ui/static/streaming-page.js b/streaming/src/main/resources/org/apache/spark/streaming/ui/static/streaming-page.js index 19985d4c7d232..a1a1408e7fcbf 100644 --- a/streaming/src/main/resources/org/apache/spark/streaming/ui/static/streaming-page.js +++ b/streaming/src/main/resources/org/apache/spark/streaming/ui/static/streaming-page.js @@ -146,12 +146,10 @@ function drawTimeline(id, data, minX, maxX, minY, maxY, unitY, batchInterval) { .attr("class", "line") .attr("d", line); - // If a mouse is on one point of a batch, highlight the corresponding batch row. - // If the user click one point of a batch, scroll down to the corresponding batch row and - // highlight it. And recovery the batch row after 5 seconds if necessary. - var clickedBatch = null; - var mouseoveredBatch = null; - var highlightBatch = null; + // If the user click one point in the graphs, jump to the batch row and highlight it. And + // recovery the batch row after 5 seconds if necessary. + // We need to remember the last clicked batch so that we can recovery it. + var lastClickedBatch = null; var lastTimeout = null; // Add points to the line. However, we make it invisible at first. But when the user moves mouse @@ -167,16 +165,6 @@ function drawTimeline(id, data, minX, maxX, minY, maxY, unitY, batchInterval) { .attr("cy", function(d) { return y(d.y); }) .attr("r", function(d) { return 3; }) .on('mouseover', function(d) { - mouseoveredBatch = d.x; - if (mouseoveredBatch != highlightBatch) { - if (highlightBatch != null) { - clearBatchRow(mouseoveredBatch); - highlightBatch = null - } - highlightBatchRow(mouseoveredBatch); - highlightBatch = mouseoveredBatch - } - var tip = formatYValue(d.y) + " " + unitY + " at " + timeFormat[d.x]; showBootstrapTooltip(d3.select(this).node(), tip); // show the point @@ -185,16 +173,7 @@ function drawTimeline(id, data, minX, maxX, minY, maxY, unitY, batchInterval) { .attr("fill", "steelblue") .attr("opacity", "1"); }) - .on('mouseout', function(d) { - if (clickedBatch == d.x) { - // We are leaving because it's clicked, so don't clear the background color - } else { - clearBatchRow(mouseoveredBatch); - highlightBatch = null; - } - mouseoveredBatch = null; - clickedBatch = null; - + .on('mouseout', function() { hideBootstrapTooltip(d3.select(this).node()); // hide the point d3.select(this) @@ -206,22 +185,17 @@ function drawTimeline(id, data, minX, maxX, minY, maxY, unitY, batchInterval) { if (lastTimeout != null) { window.clearTimeout(lastTimeout); } - clickedBatch = d.x; - // the bach row has already been highlighted because of "mouseover" - + if (lastClickedBatch != null) { + clearBatchRow(lastClickedBatch); + lastClickedBatch = null; + } + lastClickedBatch = d.x; + highlightBatchRow(lastClickedBatch) lastTimeout = window.setTimeout(function () { lastTimeout = null; - if (mouseoveredBatch == null) { - // If the mouse is not on any batch, and this batch is highlighted, just clear it. - if (highlightBatch == d.x) { - clearBatchRow(highlightBatch); - highlightBatch = null; - } - } - if (clickedBatch == d.x) { - // The mouse is still on this batch, so clear clickedBatch. Then - // "clearBatchRow" will be called when "mouseout". - clickedBatch = null; + if (lastClickedBatch != null) { + clearBatchRow(lastClickedBatch); + lastClickedBatch = null; } }, 5000); // Clean up after 5 seconds From c242b0043892380e9459703dd93e04ff28cb599f Mon Sep 17 00:00:00 2001 From: zsxwing Date: Mon, 18 May 2015 11:36:30 -0700 Subject: [PATCH 3/3] Change 5 seconds to 3 seconds --- .../org/apache/spark/streaming/ui/static/streaming-page.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/streaming/src/main/resources/org/apache/spark/streaming/ui/static/streaming-page.js b/streaming/src/main/resources/org/apache/spark/streaming/ui/static/streaming-page.js index a1a1408e7fcbf..75251f493ad22 100644 --- a/streaming/src/main/resources/org/apache/spark/streaming/ui/static/streaming-page.js +++ b/streaming/src/main/resources/org/apache/spark/streaming/ui/static/streaming-page.js @@ -147,7 +147,7 @@ function drawTimeline(id, data, minX, maxX, minY, maxY, unitY, batchInterval) { .attr("d", line); // If the user click one point in the graphs, jump to the batch row and highlight it. And - // recovery the batch row after 5 seconds if necessary. + // recovery the batch row after 3 seconds if necessary. // We need to remember the last clicked batch so that we can recovery it. var lastClickedBatch = null; var lastTimeout = null; @@ -197,7 +197,7 @@ function drawTimeline(id, data, minX, maxX, minY, maxY, unitY, batchInterval) { clearBatchRow(lastClickedBatch); lastClickedBatch = null; } - }, 5000); // Clean up after 5 seconds + }, 3000); // Clean up after 3 seconds var batchSelector = $("#batch-" + d.x); var topOffset = batchSelector.offset().top - 15;