rebaseline_server: display how long it took to render the list

gm/rebaseline_server/static/loader.js

 /*
  * Loader:
  * Reads GM result reports written out by results.py, and imports
  * them into $scope.extraColumnHeaders and $scope.imagePairs .
  */
 var Loader = angular.module(
     'Loader',
     ['ConstantsModule', 'diff_viewer']
 );
 
+Loader.directive(
+  'resultsUpdatedCallbackDirective',
+  ['$timeout',
+   function($timeout) {
+     return function(scope, element, attrs) {
+       if (scope.$last) {
+         $timeout(function() {
+           scope.resultsUpdatedCallback();
+         });
+       }
+     };
+   }
+  ]
+);
+
 // TODO(epoger): Combine ALL of our filtering operations (including
 // truncation) into this one filter, so that runs most efficiently?
 // (We would have to make sure truncation still took place after
 // sorting, though.)
 Loader.filter(
   'removeHiddenImagePairs',
   function(constants) {
     return function(unfilteredImagePairs, hiddenResultTypes, hiddenConfigs,
                     builderSubstring, testSubstring, viewingTab) {
       var filteredImagePairs = [];
@@ skipping 16 matching lines @@
         }
       }
       return filteredImagePairs;
     };
   }
 );
 
 
 Loader.controller(
   'Loader.Controller',
-    function($scope, $http, $filter, $location, $timeout, constants) {
+    function($scope, $http, $filter, $location, $log, $timeout, constants) {
     $scope.constants = constants;
     $scope.windowTitle = "Loading GM Results...";
     $scope.resultsToLoad = $location.search().resultsToLoad;
     $scope.loadingMessage = "Loading results of type '" + $scope.resultsToLoad +
         "', please wait...";
 
     /**
      * On initial page load, load a full dictionary of results.
      * Once the dictionary is loaded, unhide the page elements so they can
      * render the data.
@@ skipping 12 matching lines @@
                * 1000) - new Date().getTime());
         } else {
           $scope.loadingMessage = "Processing data, please wait...";
 
           $scope.header = dataHeader;
           $scope.extraColumnHeaders = data[constants.KEY__EXTRACOLUMNHEADERS];
           $scope.imagePairs = data[constants.KEY__IMAGEPAIRS];
           $scope.imageSets = data[constants.KEY__IMAGESETS];
           $scope.sortColumnSubdict = constants.KEY__DIFFERENCE_DATA;
           $scope.sortColumnKey = constants.KEY__DIFFERENCE_DATA__WEIGHTED_DIFF;
-          $scope.showTodos = false;
 
           $scope.showSubmitAdvancedSettings = false;
           $scope.submitAdvancedSettings = {};
           $scope.submitAdvancedSettings[
               constants.KEY__EXPECTATIONS__REVIEWED] = true;
           $scope.submitAdvancedSettings[
               constants.KEY__EXPECTATIONS__IGNOREFAILURE] = false;
           $scope.submitAdvancedSettings['bug'] = '';
 
           // Create the list of tabs (lists into which the user can file each
@@ skipping 259 matching lines @@
     $scope.setUpdatesPending = function(val) {
       $scope.areUpdatesPending = val;
     }
 
     /**
      * Update the displayed results, based on filters/settings,
      * and call $scope.queryParameters.save() so that the new filter results
      * can be bookmarked.
      */
     $scope.updateResults = function() {
+      $scope.renderStartTime = window.performance.now();
+      $log.debug("renderStartTime: " + $scope.renderStartTime);
       $scope.displayLimit = $scope.displayLimitPending;
       // TODO(epoger): Every time we apply a filter, AngularJS creates
       // another copy of the array.  Is there a way we can filter out
       // the imagePairs as they are displayed, rather than storing multiple
       // array copies?  (For better performance.)
 
       if ($scope.viewingTab == $scope.defaultTab) {
 
         // TODO(epoger): Until we allow the user to reverse sort order,
         // there are certain columns we want to sort in a different order.
@@ skipping 27 matching lines @@
                 $scope.getSortColumnValue);
         $scope.limitedImagePairs = $scope.filteredImagePairs;
       }
       $scope.showThumbnails = $scope.showThumbnailsPending;
       $scope.imageSize = $scope.imageSizePending;
       $scope.setUpdatesPending(false);
       $scope.queryParameters.save();
     }
 
     /**
+     * This function is called when the results have been completely rendered
+     * after updateResults().
+     */
+    $scope.resultsUpdatedCallback = function() {
+      $scope.renderEndTime = window.performance.now();
+      $log.debug("renderEndTime: " + $scope.renderEndTime);
+    }
+
+    /**
      * Re-sort the displayed results.
      *
      * @param subdict (string): which subdictionary
      *     (constants.KEY__DIFFERENCE_DATA, constants.KEY__EXPECTATIONS_DATA,
      *      constants.KEY__EXTRA_COLUMN_VALUES) the sort column key is within
      * @param key (string): sort by value associated with this key in subdict
      */
     $scope.sortResultsBy = function(subdict, key) {
       $scope.sortColumnSubdict = subdict;
       $scope.sortColumnKey = key;
@@ skipping 337 matching lines @@
      */
     $scope.getImageDiffRelativeUrl = function(imagePair) {
       var before =
           imagePair[constants.KEY__IMAGE_A_URL] + "-vs-" +
           imagePair[constants.KEY__IMAGE_B_URL];
       return before.replace(/[^\w\-]/g, "_") + ".png";
     }
 
   }
 );