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

gm/rebaseline_server/static/loader.js

Index: gm/rebaseline_server/static/loader.js
===================================================================
--- gm/rebaseline_server/static/loader.js	(revision 12480)
+++ gm/rebaseline_server/static/loader.js	(working copy)
@@ -42,8 +42,8 @@
   '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...";
 
     /**
@@ -51,7 +51,7 @@
      * 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...";
 
@@ -110,6 +110,9 @@
         $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";
@@ -117,7 +120,7 @@
     ).error(
       function(data, status, header, config) {
         $scope.loadingMessage = "Failed to load results of type '"
-            + resultsToLoad + "'";
+            + $scope.resultsToLoad + "'";
         $scope.windowTitle = "Failed to Load GM Results";
       }
     );
@@ -211,6 +214,70 @@
 
 
     //
+    // 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.
     //
 
@@ -232,7 +299,8 @@
     }
 
     /**
-     * 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;
@@ -275,6 +343,7 @@
       }
       $scope.imageSize = $scope.imageSizePending;
       $scope.setUpdatesPending(false);
+      $scope.updateURL();
     }
 
     /**