Interactive zoom and pan

vmprof · jonashaag · May 2, 2016 · May 2, 2016 · May 2, 2016 · May 2, 2016
commit 25843fe67b0c25c5ff295918945787599f97508b
diff --git a/static/jquery.ba-throttle-debounce.min.js b/static/jquery.ba-throttle-debounce.min.js
@@ -0,0 +1,9 @@
+/*
+ * jQuery throttle / debounce - v1.1 - 3/7/2010
+ * http://benalman.com/projects/jquery-throttle-debounce-plugin/
+ * 
+ * Copyright (c) 2010 "Cowboy" Ben Alman
+ * Dual licensed under the MIT and GPL licenses.
+ * http://benalman.com/about/license/
+ */
+(function(b,c){var $=b.jQuery||b.Cowboy||(b.Cowboy={}),a;$.throttle=a=function(e,f,j,i){var h,d=0;if(typeof f!=="boolean"){i=j;j=f;f=c}function g(){var o=this,m=+new Date()-d,n=arguments;function l(){d=+new Date();j.apply(o,n)}function k(){h=c}if(i&&!h){l()}h&&clearTimeout(h);if(i===c&&m>e){l()}else{if(f!==true){h=setTimeout(i?k:l,i===c?e-m:e)}}}if($.guid){g.guid=j.guid=j.guid||$.guid++}return g};$.debounce=function(d,e,f){return f===c?a(d,e,false):a(d,f,e!==false)}})(this);
diff --git a/static/main.css b/static/main.css
@@ -5,14 +5,6 @@ body {
     margin-top: 15px;
     margin-bottom: 15px;
 }
-#start {
-    position: absolute;
-    visibility: none;
-    width: 5px;
-    height: 600px;
-    background-color: red;
-    opacity: 80%;
-}
 #chart {
     width: 70%;
     height: 95%;

diff --git a/static/main.html b/static/main.html
@@ -3,13 +3,12 @@
   <head>
     <script src="/static/flot/jquery.min.js"></script>
     <script src="/static/flot/jquery.flot.min.js"></script>
+    <script src="/static/flot/jquery.flot.navigate.min.js"></script>
+    <script src="/static/jquery.ba-throttle-debounce.min.js"></script>
     <script src="/static/main.js"></script>
     <link href="/static/main.css" rel="stylesheet">
   </head>
   <body>
-    <div id="start"><div id="bar"></div></div>
-    Click the graph to zoom in
-    <input id="reset" type="submit" value="Zoom out" onClick="zoom_out();"/>
     <div id="chart"></div>
     <div id="stacktrace"></div>
   </body>

diff --git a/static/main.js b/static/main.js
@@ -1,26 +1,3 @@
-var clicks = [];
-var bind = false;
-
-function plotclick(event, pos, item)
-{
-    if (!item)
-        return;
-    clicks.push(item);
-    if (clicks.length == 2) {
-        if (clicks[0].datapoint[0] > clicks[1].datapoint[0]) {
-            // swap
-            var tmp = clicks[0];
-            clicks[0] = clicks[1];
-            clicks[1] = tmp;
-        }
-        $.getJSON("/get_json?x0=" + clicks[0].datapoint[0] + "&x1=" + clicks[1].datapoint[0],
-                  plot_data);
-        return;
-    }
-    $("#start").css({left: pos.pageX});
-    $("#start").show();
-}
-
 function zoom_out()
 {
     $.getJSON("/get_json", plot_data);
@@ -43,23 +20,56 @@ function format_y_axis(val, axis)
     return val + " KiB";
 }
 
+var lastWindow = {};
+function resample(render, plot)
+{
+    var xAxis = plot.getXAxes()[0];
+    var newWindow = {
+        x0: Math.floor(xAxis.min),
+        x1: Math.ceil(xAxis.max)
+    };
+    if (newWindow.x0 != lastWindow.x0 || newWindow.x1 != lastWindow.x1) {
+        $.getJSON("/get_json?x0=" + newWindow.x0 + "&x1=" + newWindow.x1, render);
+        lastWindow = newWindow;
+    }
+}
+
 function plot_data(data)
 {
     glob_data = data;
-    $.plot("#chart", [data['mem']], {
-            grid: {hoverable: true, clickable: true},
-                yaxis: {tickFormatter: format_y_axis}
-                });
-    if (!bind) {
-        $("#chart").bind("plothover", plothover);
-        $("#chart").bind("plotclick", plotclick);
-        bind = true;
+    var axesMax = {
+        x: Math.ceil(data.mem[data.mem.length-1][0]),
+        y: Math.max.apply(null, data.mem.map(function (x) { return x[1]; }))
+    };
+    var axesMargin = {
+        x: 0.05 * axesMax.x,
+        y: 0.05 * axesMax.y
     }
-    clicks = [];
-    $("#start").hide();
+    var maxAxesWindows = {
+        x: [-axesMargin.x, axesMax.x + axesMargin.x],
+        y: [-axesMargin.y, axesMax.y + axesMargin.y],
+    };
+
+    var plotOpts = {
+        grid: {hoverable: true, clickable: true},
+        xaxis: {panRange: maxAxesWindows.x},
+        yaxis: {panRange: maxAxesWindows.y, tickFormatter: format_y_axis},
+        zoom: {interactive: true},
+        pan: {interactive: true}
+    };
+    function render(data) {
+        $.plot("#chart", [data.mem], plotOpts);
+    }
+
+    render(data);
+
+    $("#chart").bind("plothover", plothover);
+    var resampleZoom = $.debounce(10, resample);
+    var resamplePan = $.debounce(100, resample);
+    $("#chart").on("plotzoom", function (event, plot) { resampleZoom(render, plot); });
+    $("#chart").on("plotpan", function (event, plot) { resamplePan(render, plot); });
 }
 
 $(function() {
-        $.getJSON("/get_json", plot_data);
-        $("#start").hide();
-})
+    $.getJSON("/get_json", plot_data);
+})
diff --git a/vmemprof.py b/vmemprof.py
@@ -42,9 +42,9 @@ def resample_and_pack(profiles, start, end, window_size):
 @app.route('/get_json', methods=['GET'])
 def get_json():
     default_size = 800
-    x0 = float(request.args.get("x0", "0"))
-    x1 = float(request.args.get("x1", len(stats.profiles)))
-    content = resample_and_pack(stats.profiles, x0, x1, default_size)    
+    x0 = max(0, float(request.args.get("x0", 0)))
+    x1 = min(len(stats.profiles), float(request.args.get("x1", 'inf')))
+    content = resample_and_pack(stats.profiles, x0, x1, default_size)
     return Response(json.dumps(content), mimetype="text/json")
 
 @app.route('/')