Bug 1218825 - Make perfherder main graphs zoomable

ui/css/perf.css

@@ -32,7 +32,7 @@ to { opacity: 0; }
 
 #data-display { flex: auto; }
 
-#graph { width: 100%; height: 300px; margin-bottom: 30px; }
+#graph { width: 100%; height: 300px; margin-bottom: 30px; cursor: crosshair; }
 
 .graph-legend-table { table-layout:fixed; }
 

ui/js/controllers/perf/graphs.js

@@ -217,6 +217,35 @@ perf.controller('GraphsCtrl', [
             }
         }
 
+        function plotUnselected() {
+            $scope.zoom = {};
+            $scope.selectedDataPoint = null;
+            hideTooltip();
+            updateDocument();
+            plotGraph();
+        }
+
+        function plotSelected(event, ranges) {
+            deselectDataPoint();
+            hideTooltip();
+
+            $.each($scope.plot.getXAxes(), function(_, axis) {
+                var opts = axis.options;
+                opts.min = ranges.xaxis.from;
+                opts.max = ranges.xaxis.to;
+            });
+            $.each($scope.plot.getYAxes(), function(_, axis) {
+                var opts = axis.options;
+                opts.min = ranges.yaxis.from;
+                opts.max = ranges.yaxis.to;
+            });
+            $scope.zoom = {'x': [ranges.xaxis.from, ranges.xaxis.to], 'y': [ranges.yaxis.from, ranges.yaxis.to]};
+
+            $scope.plot.setupGrid();
+            $scope.plot.draw();
+            updateDocument();
+        }
+
         function plotOverviewGraph() {
             // We want to show lines for series in the overview plot, if they are visible
             $scope.seriesList.forEach(function(series) {
@@ -250,33 +279,10 @@ perf.controller('GraphsCtrl', [
                 series.flotSeries.lines.show = false;
             });
 
-            $("#overview-plot").bind("plotunselected", function() {
-                $scope.zoom = {};
-                $scope.selectedDataPoint = null;
-                hideTooltip();
-                updateDocument();
-                plotGraph();
-            });
+            $("#overview-plot").bind("plotunselected", plotUnselected);
 
-            $("#overview-plot").bind("plotselected", function (event, ranges) {
-                deselectDataPoint();
-                hideTooltip();
-
-                $.each($scope.plot.getXAxes(), function(_, axis) {
-                    var opts = axis.options;
-                    opts.min = ranges.xaxis.from;
-                    opts.max = ranges.xaxis.to;
-                });
-                $.each($scope.plot.getYAxes(), function(_, axis) {
-                    var opts = axis.options;
-                    opts.min = ranges.yaxis.from;
-                    opts.max = ranges.yaxis.to;
-                });
-                $scope.zoom = {'x': [ranges.xaxis.from, ranges.xaxis.to], 'y': [ranges.yaxis.from, ranges.yaxis.to]};
-
-                $scope.plot.setupGrid();
-                $scope.plot.draw();
-                updateDocument();
+            $("#overview-plot").bind("plotselected", function(event, ranges) {
+                plotSelected(event,ranges);
             });
         }
 
@@ -352,6 +358,7 @@ perf.controller('GraphsCtrl', [
                                      {
                                          xaxis: { mode: 'time' },
                                          series: { shadowSize: 0 },
+                                         selection: { mode: 'xy', color: '#97c6e5'},
                                          lines: { show: false },
                                          points: { show: true },
                                          legend: { show: false },
@@ -390,7 +397,7 @@ perf.controller('GraphsCtrl', [
                     if ($scope.selectedDataPoint)
                         return;
 
-                    $('#graph').css({ cursor: item ? 'pointer' : 'default' });
+                    $('#graph').css({ cursor: item ? 'pointer' : '' });
 
                     if (item && item.series.thSeries) {
                         if (item.seriesIndex != $scope.prevSeriesIndex ||
@@ -421,6 +428,16 @@ perf.controller('GraphsCtrl', [
                     updateDocument();
                     highlightDataPoints();
                 });
+
+                // This part of code is simply copy from overview-plot
+                $('#graph').bind("plotunselected", plotUnselected);
+
+                $('#graph').bind("plotselected", function(event, ranges) {
+                    plotSelected(event, ranges);
+                    // Make overview graph display the selected range.
+                    $scope.plot.clearSelection();
+                    zoomGraph();
+                });
             });
         }