rebaseline_server: cleanup of HTML/Javascript

gm/rebaseline_server/static/loader.js

 /*
  * Loader:
  * Reads GM result reports written out by results.py, and imports
  * them into $scope.categories and $scope.testData .
  */
 var Loader = angular.module(
     'Loader',
     []
 );
 
+
 // 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(
   'removeHiddenItems',
   function() {
     return function(unfilteredItems, hiddenResultTypes, hiddenConfigs,
                     viewingTab) {
       var filteredItems = [];
       for (var i = 0; i < unfilteredItems.length; i++) {
         var item = unfilteredItems[i];
+        // For performance, we examine the "set" objects directly rather
+        // than calling $scope.isValueInSet().
         if (!(true == hiddenResultTypes[item.resultType]) &&
             !(true == hiddenConfigs[item.config]) &&
             (viewingTab == item.tab)) {
           filteredItems.push(item);
         }
       }
       return filteredItems;
     };
   }
 );
 
+
 Loader.controller(
   'Loader.Controller',
     function($scope, $http, $filter, $location) {
     $scope.windowTitle = "Loading GM Results...";
     var resultsToLoad = $location.search().resultsToLoad;
     $scope.loadingMessage = "Loading results of type '" + 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.
+     */
     $http.get("/results/" + resultsToLoad).success(
       function(data, status, header, config) {
         $scope.loadingMessage = "Processing data, please wait...";
 
         $scope.header = data.header;
         $scope.categories = data.categories;
         $scope.testData = data.testData;
         $scope.sortColumn = 'test';
         $scope.showTodos = false;
 
@@ skipping 15 matching lines @@
           $scope.numResultsPerTab[$scope.tabs[i]] = 0;
         }
         $scope.numResultsPerTab[$scope.defaultTab] = $scope.testData.length;
 
         // Add index and tab fields to all records.
         for (var i = 0; i < $scope.testData.length; i++) {
           $scope.testData[i].index = i;
           $scope.testData[i].tab = $scope.defaultTab;
         }
 
+        // Arrays within which the user can toggle individual elements.
+        $scope.selectedItems = [];
+
+        // Sets within which the user can toggle individual elements.
         $scope.hiddenResultTypes = {
           'failure-ignored': true,
           'no-comparison': true,
           'succeeded': true,
         };
         $scope.hiddenConfigs = {};
-        $scope.selectedItems = [];
 
         $scope.updateResults();
         $scope.loadingMessage = "";
         $scope.windowTitle = "Current GM Results";
       }
     ).error(
       function(data, status, header, config) {
         $scope.loadingMessage = "Failed to load results of type '"
             + resultsToLoad + "'";
         $scope.windowTitle = "Failed to Load GM Results";
       }
     );
 
-    $scope.isItemSelected = function(index) {
-      return (-1 != $scope.selectedItems.indexOf(index));
-    }
-    $scope.toggleItemSelected = function(index) {
-      var i = $scope.selectedItems.indexOf(index);
-      if (-1 == i) {
-        $scope.selectedItems.push(index);
-      } else {
-        $scope.selectedItems.splice(i, 1);
-      }
-      // unlike other toggle methods below, does not set
-      // $scope.areUpdatesPending = true;
-    }
 
-    $scope.isHiddenResultType = function(thisResultType) {
-      return (true == $scope.hiddenResultTypes[thisResultType]);
-    }
-    $scope.toggleHiddenResultType = function(thisResultType) {
-      if (true == $scope.hiddenResultTypes[thisResultType]) {
-        delete $scope.hiddenResultTypes[thisResultType];
-      } else {
-        $scope.hiddenResultTypes[thisResultType] = true;
-      }
-      $scope.areUpdatesPending = true;
-    }
+    //
+    // Tab operations.
+    //
 
-    // TODO(epoger): Rather than maintaining these as hard-coded
-    // variants of isHiddenResultType and toggleHiddenResultType, we
-    // should create general-purpose functions that can work with ANY
-    // category.
-    // But for now, I wanted to see this working. :-)
-    $scope.isHiddenConfig = function(thisConfig) {
-      return (true == $scope.hiddenConfigs[thisConfig]);
-    }
-    $scope.toggleHiddenConfig = function(thisConfig) {
-      if (true == $scope.hiddenConfigs[thisConfig]) {
-        delete $scope.hiddenConfigs[thisConfig];
-      } else {
-        $scope.hiddenConfigs[thisConfig] = true;
-      }
-      $scope.areUpdatesPending = true;
-    }
-
+    /**
+     * Change the selected tab.
+     *
+     * @param tab (string): name of the tab to select
+     */
     $scope.setViewingTab = function(tab) {
       $scope.viewingTab = tab;
       $scope.updateResults();
     }
 
-    $scope.localTimeString = function(secondsPastEpoch) {
-      var d = new Date(secondsPastEpoch * 1000);
-      return d.toString();
-    }
-
     /**
      * Move the items in $scope.selectedItems to a different tab,
      * and then clear $scope.selectedItems.
      *
      * @param newTab (string): name of the tab to move the tests to
      */
     $scope.moveSelectedItemsToTab = function(newTab) {
       $scope.moveItemsToTab($scope.selectedItems, newTab);
       $scope.selectedItems = [];
       $scope.updateResults();
@@ skipping 10 matching lines @@
       var itemIndex;
       var numItems = itemIndices.length;
       for (var i = 0; i < numItems; i++) {
         itemIndex = itemIndices[i];
         $scope.numResultsPerTab[$scope.testData[itemIndex].tab]--;
         $scope.testData[itemIndex].tab = newTab;
       }
       $scope.numResultsPerTab[newTab] += numItems;
     }
 
+
+    //
+    // updateResults() and friends.
+    //
+
+    /**
+     * Set $scope.areUpdatesPending (to enable/disable the Update Results
+     * button).
+     *
+     * TODO(epoger): We could reduce the amount of code by just setting the
+     * variable directly (from, e.g., a button's ng-click handler).  But when
+     * I tried that, the HTML elements depending on the variable did not get
+     * updated.
+     * It turns out that this is due to variable scoping within an ng-repeat
+     * element; see http://stackoverflow.com/questions/15388344/behavior-of-assignment-expression-invoked-by-ng-click-within-ng-repeat
+     *
+     * @param val boolean value to set $scope.areUpdatesPending to
+     */
+    $scope.setUpdatesPending = function(val) {
+      $scope.areUpdatesPending = val;
+    }
+
+    /**
+     * Update the displayed results, based on filters/settings.
+     */
     $scope.updateResults = function() {
       $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 items as they are displayed, rather than storing multiple
       // array copies?  (For better performance.)
 
       if ($scope.viewingTab == $scope.defaultTab) {
         $scope.filteredTestData =
             $filter("orderBy")(
@@ skipping 12 matching lines @@
                 $filter("filter")(
                     $scope.testData,
                     {tab: $scope.viewingTab},
                     true
                 ),
                 $scope.sortColumn);
         $scope.limitedTestData = $filter("limitTo")(
             $scope.filteredTestData, $scope.displayLimit);
       }
       $scope.imageSize = $scope.imageSizePending;
-      $scope.areUpdatesPending = false;
+      $scope.setUpdatesPending(false);
     }
 
+    /**
+     * Re-sort the displayed results.
+     *
+     * @param sortColumn (string): name of the column to sort on
+     */
     $scope.sortResultsBy = function(sortColumn) {
       $scope.sortColumn = sortColumn;
       $scope.updateResults();
     }
 
+
+    //
+    // Operations for sending info back to the server.
+    //
+
     /**
      * Tell the server that the actual results of these particular tests
      * are acceptable.
      *
      * @param testDataSubset an array of test results, most likely a subset of
      *        $scope.testData (perhaps with some modifications)
      */
     $scope.submitApprovals = function(testDataSubset) {
       $scope.submitPending = true;
       var newResults = [];
@@ skipping 29 matching lines @@
             "the server side to the Skia repo.\n\n" +
             "Also: in order to see the complete updated data, or to submit " +
             "more baselines, you will need to reload your client.");
         $scope.submitPending = false;
       }).error(function(data, status, headers, config) {
         alert("There was an error submitting your baselines.\n\n" +
             "Please see server-side log for details.");
         $scope.submitPending = false;
       });
     }
+
+
+    //
+    // Operations we use to mimic Set semantics, in such a way that
+    // checking for presence within the Set is as fast as possible.
+    // But getting a list of all values within the Set is not necessarily
+    // possible.
+    // TODO(epoger): move into a separate .js file?
+    //
+
+    /**
+     * Returns true if value "value" is present within set "set".
+     *
+     * @param value a value of any type
+     * @param set an Object which we use to mimic set semantics
+     *        (this should make isValueInSet faster than if we used an Array)
+     */
+    $scope.isValueInSet = function(value, set) {
+      return (true == set[value]);
+    }
+
+    /**
+     * If value "value" is already in set "set", remove it; otherwise, add it.
+     *
+     * @param value a value of any type
+     * @param set an Object which we use to mimic set semantics
+     */
+    $scope.toggleValueInSet = function(value, set) {
+      if (true == set[value]) {
+        delete set[value];
+      } else {
+        set[value] = true;
+      }
+    }
+
+
+    //
+    // Array operations; similar to our Set operations, but operate on a
+    // Javascript Array so we *can* easily get a list of all values in the Set.
+    // TODO(epoger): move into a separate .js file?
+    //
+
+    /**
+     * Returns true if value "value" is present within array "array".
+     *
+     * @param value a value of any type
+     * @param array a Javascript Array
+     */
+    $scope.isValueInArray = function(value, array) {
+      return (-1 != array.indexOf(value));
+    }
+
+    /**
+     * If value "value" is already in array "array", remove it; otherwise,
+     * add it.
+     *
+     * @param value a value of any type
+     * @param array a Javascript Array
+     */
+    $scope.toggleValueInArray = function(value, array) {
+      var i = array.indexOf(value);
+      if (-1 == i) {
+        array.push(value);
+      } else {
+        array.splice(i, 1);
+      }
+    }
+
+
+    //
+    // Miscellaneous utility functions.
+    // TODO(epoger): move into a separate .js file?
+    //
+
+    /**
+     * Returns a human-readable (in local time zone) time string for a
+     * particular moment in time.
+     *
+     * @param secondsPastEpoch (numeric): seconds past epoch in UTC
+     */
+    $scope.localTimeString = function(secondsPastEpoch) {
+      var d = new Date(secondsPastEpoch * 1000);
+      return d.toString();
+    }
+
   }
 );