rebaseline_server: handle column filtering more generically

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']
 );
 
@@ skipping 12 matching lines @@
   ]
 );
 
 // 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,
+    return function(unfilteredImagePairs, showingColumnValues,

[epoger, 2014/07/03 21:49:46]

Throughout:
- (hiddenResultTypes, hiddenConfigs) data structures were combined into a single
generic hiddenColumnValues data structure
- I inverted the name/meaning to be the set of values to SHOW, not the set of
values to HIDE.  This makes the URL more understandable.

[rmistry, 2014/07/07 15:28:52]

Acknowledged.

                     builderSubstring, testSubstring, viewingTab) {
       var filteredImagePairs = [];
       for (var i = 0; i < unfilteredImagePairs.length; i++) {
         var imagePair = unfilteredImagePairs[i];
         var extraColumnValues = imagePair[constants.KEY__IMAGEPAIRS__EXTRACOLUMNS];
         // For performance, we examine the "set" objects directly rather
         // than calling $scope.isValueInSet().
         // Besides, I don't think we have access to $scope in here...
-        if (!(true == hiddenResultTypes[extraColumnValues[
-                  constants.KEY__EXTRACOLUMNS__RESULT_TYPE]]) &&
-            !(true == hiddenConfigs[extraColumnValues[
-                  constants.KEY__EXTRACOLUMNS__CONFIG]]) &&
+        if (showingColumnValues[constants.KEY__EXTRACOLUMNS__RESULT_TYPE]
+                               [extraColumnValues[constants.KEY__EXTRACOLUMNS__RESULT_TYPE]] &&
+            showingColumnValues[constants.KEY__EXTRACOLUMNS__CONFIG]
+                               [extraColumnValues[constants.KEY__EXTRACOLUMNS__CONFIG]] &&
             !(-1 == extraColumnValues[constants.KEY__EXTRACOLUMNS__BUILDER]
                     .indexOf(builderSubstring)) &&
             !(-1 == extraColumnValues[constants.KEY__EXTRACOLUMNS__TEST]
                     .indexOf(testSubstring)) &&
             (viewingTab == imagePair.tab)) {
           filteredImagePairs.push(imagePair);
         }
       }
       return filteredImagePairs;
     };
@@ skipping 56 matching lines @@
       }
       return filteredImagePairs;
     };
   }
 );
 
 
 Loader.controller(
   'Loader.Controller',
     function($scope, $http, $filter, $location, $log, $timeout, constants) {
+    $scope.readyToDisplay = false;
     $scope.constants = constants;
     $scope.windowTitle = "Loading GM Results...";
     $scope.resultsToLoad = $location.search().resultsToLoad;
     $scope.loadingMessage = "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 60 matching lines @@
 
           // Add index and tab fields to all records.
           for (var i = 0; i < $scope.imagePairs.length; i++) {
             $scope.imagePairs[i].index = i;
             $scope.imagePairs[i].tab = $scope.defaultTab;
           }
 
           // Arrays within which the user can toggle individual elements.
           $scope.selectedImagePairs = [];
 
-          // Sets within which the user can toggle individual elements.
-          $scope.hiddenResultTypes = {};
-          $scope.hiddenResultTypes[
-              constants.KEY__RESULT_TYPE__FAILUREIGNORED] = true;
-          $scope.hiddenResultTypes[
-              constants.KEY__RESULT_TYPE__NOCOMPARISON] = true;
-          $scope.hiddenResultTypes[
-              constants.KEY__RESULT_TYPE__SUCCEEDED] = true;
-          $scope.allResultTypes = $scope.columnSliceOf2DArray(
-              $scope.extraColumnHeaders[constants.KEY__EXTRACOLUMNS__RESULT_TYPE]
-                                       [constants.KEY__EXTRACOLUMNHEADERS__VALUES_AND_COUNTS],
-              0);
-          $scope.hiddenConfigs = {};
-          $scope.allConfigs = $scope.columnSliceOf2DArray(
-              $scope.extraColumnHeaders[constants.KEY__EXTRACOLUMNS__CONFIG]
-                                       [constants.KEY__EXTRACOLUMNHEADERS__VALUES_AND_COUNTS],
-              0);
+          // allColumnValues[columnName] is a list of all known values
+          // for this column.
+          // showingColumnValues[columnName] is a set indicating which values
+          // in this column would cause us to show a row, rather than hiding it.
+          $scope.allColumnValues = {};
+          $scope.showingColumnValues = {};
+
+          // set allColumnValues/showingColumnValues for RESULT_TYPE;
+          // by default, show only KEY__RESULT_TYPE__FAILED results
+          $scope.allColumnValues[constants.KEY__EXTRACOLUMNS__RESULT_TYPE] =
+              $scope.columnSliceOf2DArray(
+                  $scope.extraColumnHeaders[constants.KEY__EXTRACOLUMNS__RESULT_TYPE]
+                                           [constants.KEY__EXTRACOLUMNHEADERS__VALUES_AND_COUNTS],
+                  0);
+          $scope.showingColumnValues[constants.KEY__EXTRACOLUMNS__RESULT_TYPE] = {};
+          $scope.showingColumnValues[constants.KEY__EXTRACOLUMNS__RESULT_TYPE][
+              constants.KEY__RESULT_TYPE__FAILED] = true;
+
+          // set allColumnValues/showingColumnValues for CONFIG;
+          // by default, show results for all configs
+          $scope.allColumnValues[constants.KEY__EXTRACOLUMNS__CONFIG] =
+              $scope.columnSliceOf2DArray(
+                  $scope.extraColumnHeaders[constants.KEY__EXTRACOLUMNS__CONFIG]
+                                           [constants.KEY__EXTRACOLUMNHEADERS__VALUES_AND_COUNTS],
+                  0);
+          $scope.showingColumnValues[constants.KEY__EXTRACOLUMNS__CONFIG] = {};
+          $scope.toggleValuesInSet($scope.allColumnValues[constants.KEY__EXTRACOLUMNS__CONFIG],
+                                   $scope.showingColumnValues[constants.KEY__EXTRACOLUMNS__CONFIG]);
 
           // Associative array of partial string matches per category.
+          // TODO(epoger): Rename as columnValueMatch to be more consistent
+          // with allColumnValues/showingColumnValues ?
           $scope.categoryValueMatch = {};
-          $scope.categoryValueMatch.builder = "";
-          $scope.categoryValueMatch.test = "";
+          $scope.categoryValueMatch[constants.KEY__EXTRACOLUMNS__BUILDER] = "";
+          $scope.categoryValueMatch[constants.KEY__EXTRACOLUMNS__TEST] = "";
 
           // If any defaults were overridden in the URL, get them now.
           $scope.queryParameters.load();
 
           // Any image URLs which are relative should be relative to the JSON
           // file's source directory; absolute URLs should be left alone.
           var baseUrlKey = constants.KEY__IMAGESETS__FIELD__BASE_URL;
           angular.forEach(
             $scope.imageSets,
             function(imageSet) {
               var baseUrl = imageSet[baseUrlKey];
               if ((baseUrl.substring(0, 1) != '/') &&
                   (baseUrl.indexOf('://') == -1)) {
                 imageSet[baseUrlKey] = $scope.resultsToLoad + '/../' + baseUrl;
               }
             }
           );
 
+          $scope.readyToDisplay = true;
           $scope.updateResults();
           $scope.loadingMessage = "";
           $scope.windowTitle = "Current GM Results";
         }
       }
     ).error(
       function(data, status, header, config) {
         $scope.loadingMessage = "FAILED to load.";
         $scope.windowTitle = "Failed to Load GM Results";
       }
@@ skipping 129 matching lines @@
           var value = nameValuePairs[name];
           if (value) {
             $scope.categoryValueMatch[name] = value;
           }
         },
         'save': function(nameValuePairs, name) {
           nameValuePairs[name] = $scope.categoryValueMatch[name];
         }
       },
 
-      'set': {
+      'showingColumnValuesSet': {
         'load': function(nameValuePairs, name) {
           var value = nameValuePairs[name];
           if (value) {
             var valueArray = value.split(',');
-            $scope[name] = {};
-            $scope.toggleValuesInSet(valueArray, $scope[name]);
+            $scope.showingColumnValues[name] = {};
+            $scope.toggleValuesInSet(valueArray, $scope.showingColumnValues[name]);
           }
         },
         'save': function(nameValuePairs, name) {
-          nameValuePairs[name] = Object.keys($scope[name]).join(',');
+          nameValuePairs[name] = Object.keys($scope.showingColumnValues[name]).join(',');
         }
       },
 
     };
 
     // parameter name -> copier objects to load/save parameter value
     $scope.queryParameters.map = {
       'resultsToLoad':         $scope.queryParameters.copiers.simple,
       'displayLimitPending':   $scope.queryParameters.copiers.simple,
       'showThumbnailsPending': $scope.queryParameters.copiers.simple,
       'mergeIdenticalRowsPending': $scope.queryParameters.copiers.simple,
       'imageSizePending':      $scope.queryParameters.copiers.simple,
       'sortColumnSubdict':     $scope.queryParameters.copiers.simple,
       'sortColumnKey':         $scope.queryParameters.copiers.simple,
-
-      'hiddenResultTypes': $scope.queryParameters.copiers.set,
-      'hiddenConfigs':     $scope.queryParameters.copiers.set,
     };
+    $scope.queryParameters.map[constants.KEY__EXTRACOLUMNS__RESULT_TYPE] =
+        $scope.queryParameters.copiers.showingColumnValuesSet;
     $scope.queryParameters.map[constants.KEY__EXTRACOLUMNS__BUILDER] =
         $scope.queryParameters.copiers.categoryValueMatch;
     $scope.queryParameters.map[constants.KEY__EXTRACOLUMNS__TEST] =
         $scope.queryParameters.copiers.categoryValueMatch;
+    $scope.queryParameters.map[constants.KEY__EXTRACOLUMNS__CONFIG] =
+        $scope.queryParameters.copiers.showingColumnValuesSet;
 
     // Loads all parameters into $scope from the URL query string;
     // any which are not found within the URL will keep their current value.
     $scope.queryParameters.load = function() {
       var nameValuePairs = $location.search();
 
       // If urlSchemaVersion is not specified, we assume the current version.
       var urlSchemaVersion = constants.URL_VALUE__SCHEMA_VERSION__CURRENT;
       if (constants.URL_KEY__SCHEMA_VERSION in nameValuePairs) {
         urlSchemaVersion = nameValuePairs[constants.URL_KEY__SCHEMA_VERSION];
+      } else if ('hiddenResultTypes' in nameValuePairs) {
+        // The combination of:

[epoger, 2014/07/03 21:49:46]

Eric- I figured out a way to properly handle any of those old rebaseline_server
URLs.  In my manual testing, they convert over just fine.

+        // - absence of an explicit urlSchemaVersion, and
+        // - presence of the old 'hiddenResultTypes' field
+        // tells us that the URL is from the original urlSchemaVersion.
+        // See https://codereview.chromium.org/367173002/
+        urlSchemaVersion = 0;
       }
       $scope.urlSchemaVersionLoaded = urlSchemaVersion;
 
+      if (urlSchemaVersion != constants.URL_VALUE__SCHEMA_VERSION__CURRENT) {
+        nameValuePairs = $scope.upconvertUrlNameValuePairs(nameValuePairs, urlSchemaVersion);
+      }
       angular.forEach($scope.queryParameters.map,
                       function(copier, paramName) {
                         copier.load(nameValuePairs, paramName);
                       }
                      );
     };
 
     // Saves all parameters from $scope into the URL query string.
     $scope.queryParameters.save = function() {
       var nameValuePairs = {};
       nameValuePairs[constants.URL_KEY__SCHEMA_VERSION] = constants.URL_VALUE__SCHEMA_VERSION__CURRENT;
       angular.forEach($scope.queryParameters.map,
                       function(copier, paramName) {
                         copier.save(nameValuePairs, paramName);
                       }
                      );
       $location.search(nameValuePairs);
     };
 
+    /**
+     * Converts URL name/value pairs that were stored by a previous urlSchemaVersion
+     * to the currently needed format.
+     *
+     * @param oldNValuePairs name/value pairs found in the loaded URL
+     * @param oldUrlSchemaVersion which version of the schema was used to generate that URL
+     *
+     * @returns nameValuePairs as needed by the current URL parser
+     */
+    $scope.upconvertUrlNameValuePairs = function(oldNameValuePairs, oldUrlSchemaVersion) {
+      var newNameValuePairs = {};
+      angular.forEach(oldNameValuePairs,
+                      function(value, name) {
+                        if (oldUrlSchemaVersion < 1) {
+                          if ('hiddenConfigs' == name) {
+                            name = 'config';
+                            var valueSet = {};
+                            $scope.toggleValuesInSet(value.split(','), valueSet);
+                            $scope.toggleValuesInSet(
+                                $scope.allColumnValues[constants.KEY__EXTRACOLUMNS__CONFIG],
+                                valueSet);
+                            value = Object.keys(valueSet).join(',');
+                          } else if ('hiddenResultTypes' == name) {
+                            name = 'resultType';
+                            var valueSet = {};
+                            $scope.toggleValuesInSet(value.split(','), valueSet);
+                            $scope.toggleValuesInSet(
+                                $scope.allColumnValues[constants.KEY__EXTRACOLUMNS__RESULT_TYPE],
+                                valueSet);
+                            value = Object.keys(valueSet).join(',');
+                          }
+                        }
+
+                        newNameValuePairs[name] = value;
+                      }
+                     );
+      return newNameValuePairs;
+    }
+
 
     //
     // 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
@@ skipping 31 matching lines @@
         var doReverse = (
             ($scope.sortColumnKey ==
              constants.KEY__DIFFERENCES__PERCENT_DIFF_PIXELS) ||
             ($scope.sortColumnKey ==
              constants.KEY__DIFFERENCES__PERCEPTUAL_DIFF));
 
         $scope.filteredImagePairs =
             $filter("orderBy")(
                 $filter("removeHiddenImagePairs")(
                     $scope.imagePairs,
-                    $scope.hiddenResultTypes,
-                    $scope.hiddenConfigs,
-                    $scope.categoryValueMatch.builder,
-                    $scope.categoryValueMatch.test,
+                    $scope.showingColumnValues,
+                    $scope.categoryValueMatch[constants.KEY__EXTRACOLUMNS__BUILDER],
+                    $scope.categoryValueMatch[constants.KEY__EXTRACOLUMNS__TEST],
                     $scope.viewingTab
                 ),
                 [$scope.getSortColumnValue, $scope.getSecondOrderSortValue],
                 doReverse);
         $scope.limitedImagePairs = $filter("mergeAndLimit")(
             $scope.filteredImagePairs, $scope.displayLimit, $scope.mergeIdenticalRows);
       } else {
         $scope.filteredImagePairs =
             $filter("orderBy")(
                 $filter("filter")(
@@ skipping 71 matching lines @@
      *
      * @param name
      * @param value
      */
     $scope.setCategoryValueMatch = function(name, value) {
       $scope.categoryValueMatch[name] = value;
       $scope.updateResults();
     }
 
     /**
-     * Update $scope.hiddenResultTypes so that ONLY this resultType is showing,
-     * and update the visible results.
+     * Update $scope.showingColumnValues[columnName] so that ONLY entries with
+     * this columnValue are showing, and update the visible results.
      *
-     * @param resultType
+     * @param columnName
+     * @param columnValue
      */
-    $scope.showOnlyResultType = function(resultType) {
-      $scope.hiddenResultTypes = {};
-      // TODO(epoger): Maybe change $scope.allResultTypes to be a Set like
-      // $scope.hiddenResultTypes (rather than an array), so this operation is
-      // simpler (just assign or add allResultTypes to hiddenResultTypes).
-      $scope.toggleValuesInSet($scope.allResultTypes, $scope.hiddenResultTypes);
-      $scope.toggleValueInSet(resultType, $scope.hiddenResultTypes);
+    $scope.showOnlyColumnValue = function(columnName, columnValue) {
+      $scope.showingColumnValues[columnName] = {};
+      $scope.toggleValueInSet(columnValue, $scope.showingColumnValues[columnName]);
       $scope.updateResults();
     }
 
     /**
-     * Update $scope.hiddenResultTypes so that ALL resultTypes are showing,
-     * and update the visible results.
+     * Update $scope.showingColumnValues[columnName] so that ALL entries are
+     * showing, and update the visible results.
+     *
+     * @param columnName
      */
-    $scope.showAllResultTypes = function() {
-      $scope.hiddenResultTypes = {};
+    $scope.showAllColumnValues = function(columnName) {
+      $scope.showingColumnValues[columnName] = {};
+      $scope.toggleValuesInSet($scope.allColumnValues[columnName],
+                               $scope.showingColumnValues[columnName]);
       $scope.updateResults();
     }
 
-    /**
-     * Update $scope.hiddenConfigs so that ONLY this config is showing,
-     * and update the visible results.
-     *
-     * @param config
-     */
-    $scope.showOnlyConfig = function(config) {
-      $scope.hiddenConfigs = {};
-      $scope.toggleValuesInSet($scope.allConfigs, $scope.hiddenConfigs);
-      $scope.toggleValueInSet(config, $scope.hiddenConfigs);
-      $scope.updateResults();
-    }
-
-    /**
-     * Update $scope.hiddenConfigs so that ALL configs are showing,
-     * and update the visible results.
-     */
-    $scope.showAllConfigs = function() {
-      $scope.hiddenConfigs = {};
-      $scope.updateResults();
-    }
-
 
     //
     // Operations for sending info back to the server.
     //
 
     /**
      * Tell the server that the actual results of these particular tests
      * are acceptable.
      *
      * TODO(epoger): This assumes that the original expectations are in
@@ skipping 274 matching lines @@
      */
     $scope.getImageDiffRelativeUrl = function(imagePair) {
       var before =
           imagePair[constants.KEY__IMAGEPAIRS__IMAGE_A_URL] + "-vs-" +
           imagePair[constants.KEY__IMAGEPAIRS__IMAGE_B_URL];
       return before.replace(/[^\w\-]/g, "_") + ".png";
     }
 
   }
 );