rebaseline_server: add "deep linking" to allow bookmarking of particular views

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',
     []
 );
 
@@ skipping 24 matching lines @@
       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 +
+    $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.
      */
-    $http.get("/results/" + resultsToLoad).success(
+    $http.get("/results/" + $scope.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 = 'weightedDiffMeasure';
         $scope.showTodos = false;
 
         $scope.showSubmitAdvancedSettings = false;
@@ skipping 38 matching lines @@
         };
         $scope.allResultTypes = Object.keys(data.categories['resultType']);
         $scope.hiddenConfigs = {};
         $scope.allConfigs = Object.keys(data.categories['config']);
 
         // Associative array of partial string matches per category.
         $scope.categoryValueMatch = {};
         $scope.categoryValueMatch.builder = "";
         $scope.categoryValueMatch.test = "";
 
+        // If any defaults were overridden in the URL, get them now.
+        $scope.parseURL();
+
         $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.resultsToLoad + "'";
         $scope.windowTitle = "Failed to Load GM Results";
       }
     );
 
 
     //
     // Select/Clear/Toggle all tests.
     //
 
     /**
@@ skipping 73 matching lines @@
       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;
     }
 
 
     //
+    // Read/write parameters within the URL.
+    //
+
+    // Simple variables within $scope
+    simpleUrlParams = ['resultsToLoad', 'displayLimitPending',
+                       'imageSizePending', 'sortColumn'];
+    // Elements within the associative array $scope.categoryValueMatch
+    categoryUrlParams = ['builder', 'test'];
+    // Sets, each of which has 0 or more values.
+    setUrlParams = ['hiddenResultTypes', 'hiddenConfigs'];
+
+    /**
+     * Updates the URL, so that current filter results can be bookmarked.
+     */
+    $scope.updateURL = function() {
+      var nameValuePairs = {};
+      for (var i = simpleUrlParams.length - 1; i >= 0; i--) {
+        var name = simpleUrlParams[i];
+        nameValuePairs[name] = $scope[name];
+      }
+      for (var i = categoryUrlParams.length - 1; i >= 0; i--) {
+        var name = categoryUrlParams[i];
+        nameValuePairs[name] = $scope.categoryValueMatch[name];
+      }
+      for (var i = setUrlParams.length - 1; i >= 0; i--) {
+        var name = setUrlParams[i];
+        nameValuePairs[name] = Object.keys($scope[name]).join(',');
+      }
+      $location.search(nameValuePairs);
+    }
+
+    /**
+     * Reads parameter settings from the URL.
+     * Any which are not found within the URL will keep their current value.
+     */
+    $scope.parseURL = function() {
+      var nameValuePairs = $location.search();
+      for (var i = simpleUrlParams.length - 1; i >= 0; i--) {
+        var name = simpleUrlParams[i];
+        var value = nameValuePairs[name];
+        if (value) {
+          $scope[name] = value;
+        }
+      }
+      for (var i = categoryUrlParams.length - 1; i >= 0; i--) {
+        var name = categoryUrlParams[i];
+        var value = nameValuePairs[name];
+        if (value) {
+          $scope.categoryValueMatch[name] = value;
+        }
+      }
+      for (var i = setUrlParams.length - 1; i >= 0; i--) {
+        var name = setUrlParams[i];
+        var value = nameValuePairs[name];

[epoger, 2013/12/04 19:49:22]

The loop setup is annoyingly copy-pasted for the 3 lists (simpleUrlParams,
categoryUrlParams, setUrlParams).  Any idea for how I could have less
boilerplate code?

I guess I could use http://docs.angularjs.org/api/angular.forEach (which just
replaces the plain-old-Javascript boilerplate with harder-to-understand
AngularJS boilerplate)

Or I could combine the 3 lists into 1, like this:
urlParams = {
  'resultsToLoad': 'simple',
  'displayLimitPending': 'simple',
  'builder': 'category',
  ...
}

or this...
urlParams = {
  'simple': ['resultsToLoad', 'displayLimitPending'],
  'category': ['builder', 'test'],
  ...
}

In any of those approaches, IMO, the cure is worse than the disease.

Is there some other approach I'm not thinking of????

[jcgregorio, 2013/12/05 15:05:09]

How about a dictionary that maps query parameter names to the action you want to
perform on said query parameter value:

queryParamParsers = {
   'resultsToLoad': fn_to_map_query_param_to_scope,
   'displayLimitPending': fn_to_map_query_param_to_scope,
   ...
   'builder': fn_to_map_query_param_to_category,
   ...
   'hiddenConfigs': fn_to_map_query_param_to_toggle,
   ...
}

[epoger, 2013/12/05 17:08:49]

Hmm, interesting idea!  I played with it for a while.

I don't know if it's better or worse, but it's definitely different.  Looks like
it was written by a Java/C++ programmer, who's been writing Python for too long,
and is now pretending to be a Javascript programmer.  Which I guess it was.

+        if (value) {
+          var valueArray = value.split(',');
+          $scope[name] = {};
+          $scope.toggleValuesInSet(valueArray, $scope[name]);
+        }
+      }
+    }
+
+
+    //
     // 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.
+     * Update the displayed results, based on filters/settings,
+     * and call updateURL() so that the new filter results can be bookmarked.
      */
     $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) {
 
@@ skipping 22 matching lines @@
                 $filter("filter")(
                     $scope.testData,
                     {tab: $scope.viewingTab},
                     true
                 ),
                 $scope.sortColumn);
         $scope.limitedTestData = $scope.filteredTestData;
       }
       $scope.imageSize = $scope.imageSizePending;
       $scope.setUpdatesPending(false);
+      $scope.updateURL();
     }
 
     /**
      * Re-sort the displayed results.
      *
      * @param sortColumn (string): name of the column to sort on
      */
     $scope.sortResultsBy = function(sortColumn) {
       $scope.sortColumn = sortColumn;
       $scope.updateResults();
@@ skipping 220 matching lines @@
      *
      * @param secondsPastEpoch (numeric): seconds past epoch in UTC
      */
     $scope.localTimeString = function(secondsPastEpoch) {
       var d = new Date(secondsPastEpoch * 1000);
       return d.toString();
     }
 
   }
 );