Bug 1142270 - Fixes to summary detail

- Hide 'click for detail' when detail already disclosed - Deselect datapoint when zoom changed - Deselect datapoint when time range changed
mozilla · Mar 26, 2015 · 0327d7c · 0327d7c
1 parent fc0b79e
commit 0327d7c
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 21 deletions.
diff --git a/webapp/app/js/perf.js b/webapp/app/js/perf.js
@@ -88,8 +88,13 @@ perf.controller('PerfCtrl', [ '$state', '$stateParams', '$scope', '$rootScope',
       };
     }
 
-    function showTooltip(dataPoint) {
+    function deselectDataPoint() {
+      $timeout(function() {
+        $scope.selectedDataPoint = null;
+      });
+    }
 
+    function showTooltip(dataPoint) {
       if ($scope.ttHideTimer) {
         clearTimeout($scope.ttHideTimer);
         $scope.ttHideTimer = null;
@@ -182,9 +187,22 @@ perf.controller('PerfCtrl', [ '$state', '$stateParams', '$scope', '$rootScope',
       });
     }
 
+    function hideTooltip(now) {
+      var tip = $('#graph-tooltip');
+
+      if (!$scope.ttHideTimer && tip.css('visibility') == 'visible') {
+        $scope.ttHideTimer = setTimeout(function() {
+          $scope.ttHideTimer = null;
+          tip.animate({ opacity: 0, top: '+=10' },
+                      250, 'linear', function() {
+                        $(this).css({ visibility: 'hidden' });
+                      });
+        }, now ? 0 : 250);
+      }
+    }
+
     Mousetrap.bind('escape', function() {
-      $scope.selectedDataPoint = null;
-      $scope.$digest();
+      deselectDataPoint();
     });
 
     // Highlight the points persisted in the url
@@ -252,6 +270,9 @@ perf.controller('PerfCtrl', [ '$state', '$stateParams', '$scope', '$rootScope',
       });
 
       $("#overview-plot").bind("plotselected", function (event, ranges) {
+        deselectDataPoint();
+        hideTooltip();
+
         $.each($scope.plot.getXAxes(), function(_, axis) {
           var opts = axis.options;
           opts.min = ranges.xaxis.from;
@@ -263,9 +284,10 @@ perf.controller('PerfCtrl', [ '$state', '$stateParams', '$scope', '$rootScope',
           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();
-        updateURL()
+        updateURL();
       });
     }
 
@@ -335,20 +357,6 @@ perf.controller('PerfCtrl', [ '$state', '$stateParams', '$scope', '$rootScope',
         return date.toUTCString();
       }
 
-      function hideTooltip(now) {
-        var tip = $('#graph-tooltip');
-
-        if (!$scope.ttHideTimer && tip.css('visibility') == 'visible') {
-          $scope.ttHideTimer = setTimeout(function() {
-            $scope.ttHideTimer = null;
-            tip.animate({ opacity: 0, top: '+=10' },
-                        250, 'linear', function() {
-                          $(this).css({ visibility: 'hidden' });
-                        });
-          }, now ? 0 : 250);
-        }
-      }
-
       function updateSelectedItem() {
         $scope.subtestResults = null;
 
@@ -462,6 +470,8 @@ perf.controller('PerfCtrl', [ '$state', '$stateParams', '$scope', '$rootScope',
 
     $scope.timeRangeChanged = function() {
       $scope.zoom = {};
+      deselectDataPoint();
+
       updateURL();
       // refetch and re-render all graph data
       $q.all($scope.seriesList.map(getSeriesData)).then(function() {

diff --git a/webapp/app/partials/perf/perfctrl.html b/webapp/app/partials/perf/perfctrl.html
@@ -43,7 +43,7 @@
         <div class="reset-highlight-button" ng-show="resetHighlightButton" ng-click="resetHighlight()">&#10006;</div>
     </div>
     <hr/>
-    <div id="datapoint-detail" ng-show="subtestResults">
+    <div id="datapoint-detail" ng-show="subtestResults && selectedDataPoint">
       <div id="subtest-summary">
         <h4>Subtest Summary</h4>
         <p class="help-block">Hover over each entry for more options.</p>
@@ -83,8 +83,8 @@ <h4>Subtest Summary</h4>
       <p><a id="tt-cset" ng-href="{{tooltipContent.revisionHref}}" target="_blank"><span ng-bind="tooltipContent.revision"></span></a></p>
       <p id="tt-t" class="small" ng-bind="tooltipContent.date"></p>
     </div>
-    <span ng-hide="detailDisclosed">Click for detail</span>
-    <span ng-show="detailDisclosed">&nbsp;</span>
+    <span ng-hide="selectedDataPoint">Click for detail</span>
+    <span ng-show="selectedDataPoint">&nbsp;</span>
   </div>
   <div class="tip"></div>
 </div>