[llvm-commits] [LNT] r162143 - in /lnt/trunk/lnt/server/ui: templates/v4_graph.html views.py

[Daniel Dunbar]

Author: ddunbar
Date: Fri Aug 17 16:46:48 2012
New Revision: 162143

URL: http://llvm.org/viewvc/llvm-project?rev=162143&view=rev
Log:
graphs: Add an overview plot.
 - This allows quickly zooming in on a specific region, and also gives a
   convenient way to reset the main graph view.

Modified:
    lnt/trunk/lnt/server/ui/templates/v4_graph.html
    lnt/trunk/lnt/server/ui/views.py

Modified: lnt/trunk/lnt/server/ui/templates/v4_graph.html
URL: http://llvm.org/viewvc/llvm-project/lnt/trunk/lnt/server/ui/templates/v4_graph.html?rev=162143&r1=162142&r2=162143&view=diff
==============================================================================
--- lnt/trunk/lnt/server/ui/templates/v4_graph.html (original)
+++ lnt/trunk/lnt/server/ui/templates/v4_graph.html Fri Aug 17 16:46:48 2012
@@ -17,10 +17,13 @@
                           filename='flot/jquery.flot.min.js') }}"> </script>
   <script language="javascript" type="text/javascript"
           src="{{ url_for('.static',
+                          filename='flot/jquery.flot.errorbars.js') }}"> </script>
+  <script language="javascript" type="text/javascript"
+          src="{{ url_for('.static',
                           filename='flot/jquery.flot.navigate.min.js') }}"> </script>
   <script language="javascript" type="text/javascript"
           src="{{ url_for('.static',
-                          filename='flot/jquery.flot.errorbars.js') }}"> </script>
+                          filename='flot/jquery.flot.selection.min.js') }}"> </script>
 {% endblock %}
 
 {% block title %}Graph{% endblock %}
@@ -31,15 +34,46 @@
 var g = {}
 
 function init() {
+  // Set up the primary graph.
   var graph = $("#graph");
-
   var graph_plots = {{graph_plots|tojson|safe}};
-  var graph_options = {{graph_options|tojson|safe}};
+  var graph_options = {
+      series : {
+        lines : {
+          lineWidth : 1 },
+        shadowSize : 0
+        },
+      zoom : { interactive : true },
+      pan : { interactive : true },
+      grid : {
+        hoverable : true }
+      };
   $.plot(graph, graph_plots, graph_options);
 
   // Add tooltips.
   graph.bind("plothover", function(e,p,i) {
     update_tooltip(e, p, i, show_tooltip); });
+
+  // Set up the overview graph.
+  var overview = $("#overview")
+  var overview_plots = {{overview_plots|tojson|safe}};
+  $.plot(overview, overview_plots, {
+    series : {
+      lines : {
+        lineWidth : 1 },
+      shadowSize : 0 },
+    selection: { mode: "x" },
+    yaxis: { ticks: [] } });
+
+  // Connect selection on the overview graph to the main plot.
+  $("#overview").bind("plotselected", function (event, ranges) {
+    // Set the zooming on the plot.
+    $.plot(graph, graph_plots,
+      $.extend(true, {}, graph_options, {
+        xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
+        yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to }
+      }));
+  });
 }
 
 // Show our overlay tooltip.
@@ -147,7 +181,8 @@
 <table>
 <tr>
 <td rowspan=2 valign="top">
-  <div id="graph" style="margin:0px;width:600px;height:400px;"></div>
+  <div id="graph" style="width:600px;height:400px;"></div>
+  <div id="overview" style="width:600px;height:80px;"></div>
 </td>
 <td valign="top">
 <table cellspacing=4 border=1>

Modified: lnt/trunk/lnt/server/ui/views.py
URL: http://llvm.org/viewvc/llvm-project/lnt/trunk/lnt/server/ui/views.py?rev=162143&r1=162142&r2=162143&view=diff
==============================================================================
--- lnt/trunk/lnt/server/ui/views.py (original)
+++ lnt/trunk/lnt/server/ui/views.py Fri Aug 17 16:46:48 2012
@@ -436,6 +436,7 @@
     # Build the graph data.
     legend = []
     graph_plots = []
+    overview_plots = []
     num_points = 0
     num_plots = len(graph_tests)
     use_day_axis = None
@@ -575,6 +576,11 @@
                 window_pts = [x[1] for x in pts[start_index:end_index]]
                 fun(pts[i][0], window_pts, moving_average_data, moving_median_data)
 
+        # On the overview, we always show the line plot.
+        overview_plots.append({
+                "data" : pts,
+                "color" : util.toColorString(col) })
+
         # Add the minimum line plot, if requested.
         if show_lineplot:
             num_points += len(data)        
@@ -664,24 +670,13 @@
                     "data" : moving_median_data,
                     "color" : util.toColorString(col) })
 
-    graph_options = {
-        "series" : {
-            "lines" : {
-                "lineWidth" : 1 },
-            "shadowSize" : 0
-            },
-        "zoom" : {"interactive" : True },
-        "pan" : { "interactive" : True },
-        "grid" : {
-            "hoverable" : True }
-        }
-
     return render_template("v4_graph.html", ts=ts, run=run,
                            compare_to=compare_to, options=options,
                            num_plots=num_plots, num_points=num_points,
                            neighboring_runs=neighboring_runs,
-                           graph_plots=graph_plots, graph_options=graph_options,
-                           legend=legend, use_day_axis=use_day_axis)
+                           graph_plots=graph_plots,
+                           overview_plots=overview_plots, legend=legend,
+                           use_day_axis=use_day_axis)
 
 @v4_route("/daily_report")
 def v4_daily_report_overview():