This is an automated email from the ASF dual-hosted git repository. stigahuang pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/impala.git
commit 99c5b93272fcce2ca6210bfafd6453423bdce4c8 Author: Surya Hebbar <[email protected]> AuthorDate: Wed Mar 20 21:42:33 2024 +0530 IMPALA-12923: Fix header alignment during horizontal scrolling in query timeline On horizontally scrolling the query timeline after zooming, the controls and navigation bar at the top of the page move away from the visibility area. This makes it difficult to use the controls while scrolling. The controls and navigation bar now stay within the visibility area even after scrolling horizontally, allowing for easier navigation. Hovering on the edges to scroll horizontally is also supported as before. Change-Id: Ib3b248554ba32766c29faf91c791f2dbbd20641e Reviewed-on: http://gerrit.cloudera.org:8080/21173 Reviewed-by: Impala Public Jenkins <[email protected]> Tested-by: Impala Public Jenkins <[email protected]> --- www/query_timeline.tmpl | 56 +++++++++++----------- www/scripts/query_timeline/fragment_diagram.js | 8 ++-- .../query_timeline/fragment_metrics_diagram.js | 2 +- .../query_timeline/host_utilization_diagram.js | 2 +- 4 files changed, 35 insertions(+), 33 deletions(-) diff --git a/www/query_timeline.tmpl b/www/query_timeline.tmpl index 8288e5349..900631a38 100644 --- a/www/query_timeline.tmpl +++ b/www/query_timeline.tmpl @@ -125,33 +125,35 @@ g.plan_node:active { </div> </div> -<div id="timing_diagram" style="border:1px solid #c3c3c3;"> - <div style="border:1px solid #c3c3c3;"> - <svg id="phases_header"></svg> - </div> - <div style="border:1px solid #c3c3c3; overflow-y:scroll; overflow-x:hidden;"> - <svg id="fragment_diagram"></svg> - </div> - <div style="border:1px solid #c3c3c3;"> - <svg id="timeticks_footer"></svg> +<span id="scrollable_screen" style="display: inline-block; width: 100vw; overflow-x: scroll;"> + <div id="timing_diagram" style="border:1px solid #c3c3c3;"> + <div style="border:1px solid #c3c3c3;"> + <svg id="phases_header"></svg> + </div> + <div style="border:1px solid #c3c3c3; overflow-y:scroll; overflow-x:hidden;"> + <svg id="fragment_diagram"></svg> + </div> + <div style="border:1px solid #c3c3c3;"> + <svg id="timeticks_footer"></svg> + </div> </div> -</div> -<div id="host_utilization_wrapper"> - <img id="host_utilization_resize_bar" src="www/icons/drag_handle.png" draggable="false"/> - <input id="host_utilization_close_btn" class="btn btn-primary btn-sm" type="button" - value="X" data-dismiss="modal"/> - <div id="host_utilization_diagram"> - <!--Utilization metrics is not available. Please make sure to set query option - RESOURCE_TRACE_RATIO=true.--> + <div id="host_utilization_wrapper"> + <img id="host_utilization_resize_bar" src="www/icons/drag_handle.png" draggable="false"/> + <input id="host_utilization_close_btn" class="btn btn-primary btn-sm" type="button" + value="X" data-dismiss="modal"/> + <div id="host_utilization_diagram"> + <!--Utilization metrics is not available. Please make sure to set query option + RESOURCE_TRACE_RATIO=true.--> + </div> </div> -</div> -<div id="fragment_metrics_wrapper"> - <img id="fragment_metrics_resize_bar" src="www/icons/drag_handle.png" draggable="false"/> - <input id="fragment_metrics_close_btn" class="btn btn-primary btn-sm" type="button" - value="X" data-dismiss="modal"/> - <div id="fragment_metrics_diagram"> + <div id="fragment_metrics_wrapper"> + <img id="fragment_metrics_resize_bar" src="www/icons/drag_handle.png" draggable="false"/> + <input id="fragment_metrics_close_btn" class="btn btn-primary btn-sm" type="button" + value="X" data-dismiss="modal"/> + <div id="fragment_metrics_diagram"> + </div> </div> -</div> +</span> {{/plan_metadata_unavailable}} @@ -241,13 +243,13 @@ if (window.location.search.includes("imported")) { } } -window.addEventListener('mousemove', function(e) { +scrollable_screen.addEventListener('mousemove', function(e) { var scroll_margin = window.innerWidth / 10; var scroll_amount = window.innerWidth / 3; if (e.clientX <= scroll_margin) { - window.scrollBy({left : - scroll_amount, behavior : "smooth"}); + scrollable_screen.scrollBy({left : - scroll_amount, behavior : "smooth"}); } else if (e.clientX >= window.innerWidth - scroll_margin) { - window.scrollBy({left : + scroll_amount, behavior : "smooth"}); + scrollable_screen.scrollBy({left : + scroll_amount, behavior : "smooth"}); } }); diff --git a/www/scripts/query_timeline/fragment_diagram.js b/www/scripts/query_timeline/fragment_diagram.js index 65506c771..1d71c7717 100644 --- a/www/scripts/query_timeline/fragment_diagram.js +++ b/www/scripts/query_timeline/fragment_diagram.js @@ -555,7 +555,7 @@ export function setTimingDiagramDimensions(ignored_arg) { fragment_diagram.parentElement.style.width = `${diagram_width}px`; phases_header.parentElement.style.width = `${diagram_width}px`; timeticks_footer.parentElement.style.width = `${diagram_width}px`; - timing_diagram.parentElement.style.width = `${diagram_width}px`; + timing_diagram.style.width = `${diagram_width}px`; fragment_diagram.style.width = `${diagram_width}px`; phases_header.style.width = `${diagram_width}px`; @@ -578,12 +578,12 @@ fragment_diagram.addEventListener('mouseout', function(e) { }); fragment_diagram.addEventListener('mousemove', function(e) { - if (e.pageX >= name_width && e.pageX <= name_width + chart_width){ + if (e.clientX + scrollable_screen.scrollLeft >= name_width && e.clientX + scrollable_screen.scrollLeft <= name_width + chart_width){ removeChildIfExists(fragment_diagram, timestamp_gridline); - timestamp_gridline = getSvgLine(stroke_fill_colors.black, e.pageX, 0, e.pageX, + timestamp_gridline = getSvgLine(stroke_fill_colors.black, e.clientX + scrollable_screen.scrollLeft, 0, e.clientX + scrollable_screen.scrollLeft, parseInt(fragment_diagram.style.height)); fragment_diagram.appendChild(timestamp_gridline); - var gridline_time = ((maxts * (e.pageX - name_width) / chart_width) / 1e9); + var gridline_time = ((maxts * (e.clientX + scrollable_screen.scrollLeft - name_width) / chart_width) / 1e9); showTooltip(host_utilization_chart, gridline_time); showTooltip(fragment_metrics_chart, gridline_time); fragment_diagram_title.textContent = gridline_time.toFixed(decimals) + " s"; diff --git a/www/scripts/query_timeline/fragment_metrics_diagram.js b/www/scripts/query_timeline/fragment_metrics_diagram.js index bb6af59f2..b191dfbc7 100644 --- a/www/scripts/query_timeline/fragment_metrics_diagram.js +++ b/www/scripts/query_timeline/fragment_metrics_diagram.js @@ -155,7 +155,7 @@ export function getFragmentMetricsWrapperHeight() { export function toogleFragmentMetricsVisibility() { if (fragment_id_selections.size > 0 && fragment_metrics_parse_successful) { - fragment_metrics_wrapper.style.display = "initial"; + fragment_metrics_wrapper.style.display = "inline-block"; } else { fragment_metrics_wrapper.style.display = "none"; } diff --git a/www/scripts/query_timeline/host_utilization_diagram.js b/www/scripts/query_timeline/host_utilization_diagram.js index bffd4987e..2463aee76 100644 --- a/www/scripts/query_timeline/host_utilization_diagram.js +++ b/www/scripts/query_timeline/host_utilization_diagram.js @@ -197,7 +197,7 @@ export function resetUtilizationHeight() { export function toogleUtilizationVisibility() { if (utilization_metrics_parse_successful && host_utilization_visible) { - host_utilization_wrapper.style.display = "initial"; + host_utilization_wrapper.style.display = "inline-block"; } else { host_utilization_wrapper.style.display = "none"; }
