more improvements

utils/trace-visualizer/css/d3-gantt.css

@@ -8,7 +8,6 @@
 }
 
 rect.zoom-panel {
-    /*cursor: ew-resize;*/
     fill: none;
     pointer-events: all;
 }
@@ -20,18 +19,18 @@ rect.zoom-panel {
 }
 
 .axis.y {
-    font-size: 16px;
+    font-size: 9px;
     cursor: ns-resize;
 }
 
 .axis.x {
-    font-size: 16px;
+    font-size: 9px;
 }
 
 #ruler {
     text-anchor: middle;
     alignment-baseline: before-edge;
-    font-size: 16px;
+    font-size: 9px;
     font-family: sans-serif;
     pointer-events: none;
 }

utils/trace-visualizer/index.html

@@ -14,12 +14,22 @@
     <script language="javascript" type="text/javascript" src="js/d3.v4.min.js"></script>
     <script language="javascript" type="text/javascript" src="js/d3-tip-0.8.0-alpha.1.js"></script>
     <script language="javascript" type="text/javascript" src="js/d3-gantt.js"></script>
-    <div class="container-fluid" id="toolbar" style="margin:20px;margin-right:50px">
+
-        <div class="pull-right">
+    <nav class="navbar navbar-default">
-            <button type="button" class="btn btn-primary" id="toolbar-load" data-toggle="modal" data-target="#loadModal">Load</button>
+        <div class="container-fluid">
+            <div class="navbar-header">
+                <a class="navbar-brand" href="#">ClickHouse trace-visualizer</a>
+            </div>
+            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+                <form class="navbar-form navbar-left">
+                    <button type="button" class="btn btn-primary" id="toolbar-load" data-toggle="modal" data-target="#loadModal">Load</button>
+                </form>
+            </div>
         </div>
-    </div>
+    </nav>
+
     <div id="placeholder" class="chart-placeholder"></div>
+
     <div class="modal fade" id="loadModal" tabindex="-1" role="dialog" aria-labelledby="loadModalLabel">
         <div class="modal-dialog" role="document">
             <div class="modal-content">
@@ -42,21 +52,36 @@
 </html>
 
 <script language="javascript">
-    var example_json = [
+    var example_json = [];
-        { t1: 100, t2: 200, band: "band1", color: "#888", text: "text1" },
+    var example_colors = ["#f88", "#8f8", "#88f", "#888", "#aaa"];
-        { t1: 300, t2: 400, band: "band2", color: "#ff8", text: "text2" },
+    for (let i = 0; i < 1024; i++) {
-        { t1: 100, t2: 400, band: "band3", color: "#888", text: "some very long text with a lot of letters in it" },
+        example_json.push({
-        { t1: 300, t2: 400, band: "band1", color: "#8ff", text: "some_very_long_identifier_with_a_lot_of_letters_in_it" },
+            t1: i + 50 - Math.random() * 60,
-        { t1: 500, t2: 800, band: "band2", color: "#f8f", text: "test\nif\nnew\nline\nworks\nhere?" }
+            t2: i + 50 + Math.random() * 60,
-    ];
+            band: "band" + (i % 128),
+            color: example_colors[i % example_colors.length],
+            text: "it is span #" + i
+        });
+    }
+    example_json.bands = new Set(example_json.map(x => x.band));
+    example_json.max_time_ms = Math.max(...example_json.map(x => x.t2));
 
-    let chart_height = window.innerHeight - $("#placeholder")[0].getBoundingClientRect().y - 80;
     var data = null;
     var chart = null;
 
     function renderChart(parsed) {
         data = parsed;
-        chart = d3.gantt().height(chart_height).selector("#placeholder");
+        if (chart != null) {
+            chart.destroy();
+        }
+        let view_height = window.innerHeight - $("#placeholder")[0].getBoundingClientRect().y - 40;
+        let data_height = parsed.bands.size * 8;
+        chart = d3.gantt()
+            .height(Math.max(view_height, data_height))
+            .view_height(view_height)
+            .selector("#placeholder")
+            .timeDomain([0, parsed.max_time_ms])
+        ;
         chart(data);
     }
 
@@ -139,18 +164,22 @@
         }
 
         let result = [];
+        let bands = new Set();
         for (let i = 0; i < json.data.length; i++) {
             let span = json.data[i];
+            let band = Object.values(span.group).join(' ');
+            bands.add(band);
             result.push({
                 t1: convertTime(+span.start_time_us),
                 t2: convertTime(+span.finish_time_us),
-                band: Object.values(span.group).join(' '),
+                band,
                 color: d3.interpolateRainbow((strHash(span.color) % 256) / 256),
                 text: span.operation_name
             });
         }
 
-        chart.timeDomain([0, max_time_ms]);
+        result.bands = bands;
+        result.max_time_ms = max_time_ms;
         return result;
     }
 

utils/trace-visualizer/js/d3-gantt.js

@@ -8,9 +8,6 @@
 
         initAxis();
 
-        // clear previous chart (if any)
-        d3.select(selector).selectAll("svg").remove();
-
         // create svg element
         svg = d3.select(selector)
           .append("svg")
@@ -40,6 +37,7 @@
             .on("zoom", function() {
                 if (tipShown != null) {
                     tip.hide(tipShown);
+                    tipShown = null;
                 }
                 var tr = d3.event.transform;
                 xZoomed = tr.rescaleX(x);
@@ -54,7 +52,7 @@
                 zoomContainer1.attr("transform", "translate(" + tr.x + ",0) scale(" + tr.k + ",1)");
                 zoomContainer2.attr("transform", "translate(" + tr.x + ",0) scale(" + tr.k + ",1)");
 
-                render();
+                //render();
             })
             .on("start", function() {
                 zoom.startScreenY = d3.event.sourceEvent.screenY;
@@ -119,6 +117,12 @@
             .call(xAxis)
         ;
 
+        // ruler should be drawn above x axis and under y axis
+        ruler = fixedContainer.append("g")
+            .attr("id", "ruler")
+            .attr("transform", "translate(0, 0)")
+        ;
+
         // create y axis
         fixedContainer.append("g")
             .attr("class", "y axis")
@@ -189,10 +193,6 @@
         ;
 
         // ruler
-        ruler = fixedContainer.append("g")
-            .attr("id", "ruler")
-            .attr("transform", "translate(0, 0)")
-        ;
         ruler.append("rect")
             .attr("id", "ruler-line")
             .attr("x", 0)
@@ -221,10 +221,9 @@
 
         // scroll handling
         window.onscroll = function myFunction() {
-            documentBodyScrollLeft(document.body.scrollLeft);
+            documentBodyScrollLeft(window.scrollX);
-            documentBodyScrollTop(document.body.scrollTop);
+            documentBodyScrollTop(window.scrollY);
             var scroll = scrollParams();
-
             svgChartContainer
                 .attr("transform", "translate(" + margin.left
                                          + ", " + (margin.top + scroll.y1) + ")");
@@ -285,7 +284,7 @@
             .attr("class", "bar")
             .attr("vector-effect", "non-scaling-stroke")
             .style("fill", d => d.color)
-            .on('click', function(d) {
+            .on('mouseover', function(d) {
                 if (tipShown != d) {
                     tipShown = d;
                     tip.show(d);
@@ -317,12 +316,11 @@
             //.clamp(true); // dosn't work with zoom/pan
         xZoomed = x;
         y = d3.scaleBand()
-            .domain(Object.values(data).map(d => d.band).sort())
+            .domain([...data.bands])
-            .rangeRound([0, height - margin.top - margin.bottom])
+            .range([1, height - margin.top - margin.bottom])
-            .padding(0.5);
+            .padding(1/8);
         xAxis = d3.axisBottom()
             .scale(x)
-            //.tickSubdivide(true)
             .tickSize(8)
             .tickPadding(8);
         yAxis = d3.axisLeft()
@@ -334,7 +332,7 @@
     var documentBodyScrollLeft = function(value) {
         if (!arguments.length) {
             if (documentBodyScrollLeft.value === undefined) {
-                documentBodyScrollLeft.value = document.body.scrollLeft;
+                documentBodyScrollLeft.value = window.scrollX;
             }
             return documentBodyScrollLeft.value;
         } else {
@@ -346,7 +344,7 @@
     var documentBodyScrollTop = function(value) {
         if (!arguments.length) {
             if (!documentBodyScrollTop.value === undefined) {
-                documentBodyScrollTop.value = document.body.scrollTop;
+                documentBodyScrollTop.value = window.scrollY;
             }
             return documentBodyScrollTop.value;
         } else {
@@ -356,7 +354,7 @@
 
     var scrollParams = function() {
         var y1 = documentBodyScrollTop();
-        var y2 = y1 + window.innerHeight - margin.footer;
+        var y2 = y1 + view_height;
         y2 = Math.min(y2, height - margin.top - margin.bottom);
         var h = y2 - y1;
         return {
@@ -404,7 +402,7 @@
         var textWidth = 10 * posText.length;
         ruler.select("#bgrect")
             .attr("x", -textWidth/2 - xpadding)
-            .attr("y", positionRuler.bbox.y - ypadding)
+            .attr("y", positionRuler.bbox.y - ypadding + window.scrollY)
             .attr("width", textWidth + (xpadding*2))
             .attr("height", positionRuler.bbox.height + (ypadding*2))
         ;
@@ -428,6 +426,13 @@
         return gantt;
     }
 
+    gantt.view_height = function(value) {
+        if (!arguments.length)
+            return view_height;
+        view_height = +value;
+        return gantt;
+    }
+
     gantt.selector = function(value) {
         if (!arguments.length)
             return selector;
@@ -447,12 +452,18 @@
         return data;
     }
 
+    gantt.destroy = function() {
+        tip.destroy();
+        d3.select(selector).selectAll("svg").remove();
+    }
+
     // constructor
 
     // Config
-    var margin = { top: 20, right: 40, bottom: 20, left: 200, footer: 100 },
+    var margin = { top: 0, right: 30, bottom: 20, left: 150 },
         height = document.body.clientHeight - margin.top - margin.bottom - 5,
         width = document.body.clientWidth - margin.right - margin.left - 5,
+        view_height = window.innerHeight,
         selector = 'body',
         timeDomainStart = 0,
         timeDomainEnd = 1000,