rebaseline-server: sorting of columns (asc/desc) in frontend.

gm/rebaseline_server/static/loader.js

Index: gm/rebaseline_server/static/loader.js
diff --git a/gm/rebaseline_server/static/loader.js b/gm/rebaseline_server/static/loader.js
index 1ec7305dc6532fbe4d27d21b790352dd2caea61b..e6030ad439b1cb671595d21b9d01abd600614df9 100644
--- a/gm/rebaseline_server/static/loader.js
+++ b/gm/rebaseline_server/static/loader.js
@@ -130,6 +130,9 @@ Loader.controller(
     $scope.resultsToLoad = $location.search().resultsToLoad;
     $scope.loadingMessage = "please wait...";
 
+    var currSortAsc = true; 
+
+
     /**
      * On initial page load, load a full dictionary of results.
      * Once the dictionary is loaded, unhide the page elements so they can
@@ -167,8 +170,11 @@ Loader.controller(
           $scope.orderedColumnNames = data[constants.KEY__ROOT__EXTRACOLUMNORDER];
           $scope.imagePairs = data[constants.KEY__ROOT__IMAGEPAIRS];
           $scope.imageSets = data[constants.KEY__ROOT__IMAGESETS];
+
+          // set the default sort column and make it ascending.
           $scope.sortColumnSubdict = constants.KEY__IMAGEPAIRS__DIFFERENCES;
           $scope.sortColumnKey = constants.KEY__DIFFERENCES__PERCEPTUAL_DIFF;
+          currSortAsc = true;
 
           $scope.showSubmitAdvancedSettings = false;
           $scope.submitAdvancedSettings = {};
@@ -320,7 +326,7 @@ Loader.controller(
           $scope.toggleValueInArray(index, $scope.selectedImagePairs);
         }
       }
-    }
+    };
 
     /**
      * Deselect all currently showing tests.
@@ -333,7 +339,7 @@ Loader.controller(
           $scope.toggleValueInArray(index, $scope.selectedImagePairs);
         }
       }
-    }
+    };
 
     /**
      * Toggle selection of all currently showing tests.
@@ -344,7 +350,7 @@ Loader.controller(
         var index = $scope.limitedImagePairs[i].index;
         $scope.toggleValueInArray(index, $scope.selectedImagePairs);
       }
-    }
+    };
 
     /**
      * Toggle selection state of a subset of the currently showing tests.
@@ -359,7 +365,7 @@ Loader.controller(
         var index = $scope.limitedImagePairs[i].index;
         $scope.toggleValueInArray(index, $scope.selectedImagePairs);
       }
-    }
+    };
 
 
     //
@@ -374,7 +380,7 @@ Loader.controller(
     $scope.setViewingTab = function(tab) {
       $scope.viewingTab = tab;
       $scope.updateResults();
-    }
+    };
 
     /**
      * Move the imagePairs in $scope.selectedImagePairs to a different tab,
@@ -386,7 +392,7 @@ Loader.controller(
       $scope.moveImagePairsToTab($scope.selectedImagePairs, newTab);
       $scope.selectedImagePairs = [];
       $scope.updateResults();
-    }
+    };
 
     /**
      * Move a subset of $scope.imagePairs to a different tab.
@@ -404,7 +410,7 @@ Loader.controller(
         $scope.imagePairs[imagePairIndex].tab = newTab;
       }
       $scope.numResultsPerTab[newTab] += numImagePairs;
-    }
+    };
 
 
     //
@@ -597,16 +603,8 @@ Loader.controller(
       // 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.
-        var doReverse = (
-            ($scope.sortColumnKey ==
-             constants.KEY__DIFFERENCES__PERCENT_DIFF_PIXELS) ||
-            ($scope.sortColumnKey ==
-             constants.KEY__DIFFERENCES__PERCEPTUAL_DIFF));
+        var doReverse = !currSortAsc;
 
         $scope.filteredImagePairs =
             $filter("orderBy")(
@@ -616,7 +614,8 @@ Loader.controller(
                     $scope.showingColumnValues,
                     $scope.viewingTab
                 ),
-                [$scope.getSortColumnValue, $scope.getSecondOrderSortValue],
+                // [$scope.getSortColumnValue, $scope.getSecondOrderSortValue],
+                $scope.getSortColumnValue,
                 doReverse);
         $scope.limitedImagePairs = $filter("mergeAndLimit")(
             $scope.filteredImagePairs, $scope.displayLimit, $scope.mergeIdenticalRows);
@@ -628,7 +627,8 @@ Loader.controller(
                     {tab: $scope.viewingTab},
                     true
                 ),
-                [$scope.getSortColumnValue, $scope.getSecondOrderSortValue]);
+                // [$scope.getSortColumnValue, $scope.getSecondOrderSortValue]);
+                $scope.getSortColumnValue);
         $scope.limitedImagePairs = $filter("mergeAndLimit")(
             $scope.filteredImagePairs, -1, $scope.mergeIdenticalRows);
       }
@@ -645,7 +645,7 @@ Loader.controller(
     $scope.resultsUpdatedCallback = function() {
       $scope.renderEndTime = window.performance.now();
       $log.debug("renderEndTime: " + $scope.renderEndTime);
-    }
+    };
 
     /**
      * Re-sort the displayed results.
@@ -656,10 +656,33 @@ Loader.controller(
      * @param key (string): sort by value associated with this key in subdict
      */
     $scope.sortResultsBy = function(subdict, key) {
-      $scope.sortColumnSubdict = subdict;
-      $scope.sortColumnKey = key;
+      // if we are already sorting by this column then toggle between asc/desc
+      if ((subdict === $scope.sortColumnSubdict) && ($scope.sortColumnKey === key)) {
+        currSortAsc = !currSortAsc;
+      } else {
+        $scope.sortColumnSubdict = subdict;
+        $scope.sortColumnKey = key;
+        currSortAsc = true; 
+      }
       $scope.updateResults();
-    }
+    };
+
+    /**
+     * Returns ASC or DESC (from constants) if currently the data
+     * is sorted by the provided column. 
+     *
+     * @param colName: name of the column for which we need to get the class.
+     */
+
+    $scope.sortedByColumnsCls = function (colName) {
+      if ($scope.sortColumnKey !== colName) {
+        return '';
+      }
+
+      var result = (currSortAsc) ? constants.ASC : constants.DESC;
+      console.log("sort class:", result);
+      return result;
+    };
 
     /**
      * For a particular ImagePair, return the value of the column we are
@@ -676,7 +699,7 @@ Loader.controller(
       } else {
         return undefined;
       }
-    }
+    };
 
     /**
      * For a particular ImagePair, return the value we use for the
@@ -691,7 +714,7 @@ Loader.controller(
     $scope.getSecondOrderSortValue = function(imagePair) {
       return imagePair[constants.KEY__IMAGEPAIRS__IMAGE_A_URL] + "-vs-" +
           imagePair[constants.KEY__IMAGEPAIRS__IMAGE_B_URL];
-    }
+    };
 
     /**
      * Set $scope.columnStringMatch[name] = value, and update results.
@@ -702,7 +725,7 @@ Loader.controller(
     $scope.setColumnStringMatch = function(name, value) {
       $scope.columnStringMatch[name] = value;
       $scope.updateResults();
-    }
+    };
 
     /**
      * Update $scope.showingColumnValues[columnName] and $scope.columnStringMatch[columnName]
@@ -717,7 +740,7 @@ Loader.controller(
       $scope.showingColumnValues[columnName] = {};
       $scope.toggleValueInSet(columnValue, $scope.showingColumnValues[columnName]);
       $scope.updateResults();
-    }
+    };
 
     /**
      * Update $scope.showingColumnValues[columnName] and $scope.columnStringMatch[columnName]
@@ -732,7 +755,7 @@ Loader.controller(
       $scope.toggleValuesInSet($scope.allColumnValues[columnName],
                                $scope.showingColumnValues[columnName]);
       $scope.updateResults();
-    }
+    };
 
 
     //
@@ -842,7 +865,7 @@ Loader.controller(
             "Please see server-side log for details.");
         $scope.submitPending = false;
       });
-    }
+    };
 
 
     //
@@ -860,7 +883,7 @@ Loader.controller(
      */
     $scope.setSize = function(set) {
       return Object.keys(set).length;
-    }
+    };
 
     /**
      * Returns true if value "value" is present within set "set".
@@ -871,7 +894,7 @@ Loader.controller(
      */
     $scope.isValueInSet = function(value, set) {
       return (true == set[value]);
-    }
+    };
 
     /**
      * If value "value" is already in set "set", remove it; otherwise, add it.
@@ -885,7 +908,7 @@ Loader.controller(
       } else {
         set[value] = true;
       }
-    }
+    };
 
     /**
      * For each value in valueArray, call toggleValueInSet(value, set).
@@ -898,7 +921,7 @@ Loader.controller(
       for (var i = 0; i < arrayLength; i++) {
         $scope.toggleValueInSet(valueArray[i], set);
       }
-    }
+    };
 
 
     //
@@ -915,7 +938,7 @@ Loader.controller(
      */
     $scope.isValueInArray = function(value, array) {
       return (-1 != array.indexOf(value));
-    }
+    };
 
     /**
      * If value "value" is already in array "array", remove it; otherwise,
@@ -931,7 +954,7 @@ Loader.controller(
       } else {
         array.splice(i, 1);
       }
-    }
+    };
 
 
     //
@@ -959,7 +982,7 @@ Loader.controller(
         slice.push(array[row][column]);
       }
       return slice;
-    }
+    };
 
     /**
      * Returns a human-readable (in local time zone) time string for a
@@ -970,7 +993,7 @@ Loader.controller(
     $scope.localTimeString = function(secondsPastEpoch) {
       var d = new Date(secondsPastEpoch * 1000);
       return d.toString();
-    }
+    };
 
     /**
      * Returns a hex color string (such as "#aabbcc") for the given RGB values.
@@ -993,7 +1016,7 @@ Loader.controller(
         bString = "0" + bString;
       }
       return '#' + rString + gString + bString;
-    }
+    };
 
     /**
      * Returns a hex color string (such as "#aabbcc") for the given brightness.
@@ -1006,7 +1029,7 @@ Loader.controller(
     $scope.brightnessStringToHexColor = function(brightnessString) {
       var v = parseInt(brightnessString);
       return $scope.hexColorString(v, v, v);
-    }
+    };
 
     /**
      * Returns the last path component of image diff URL for a given ImagePair.
@@ -1024,7 +1047,7 @@ Loader.controller(
           imagePair[constants.KEY__IMAGEPAIRS__IMAGE_A_URL] + "-vs-" +
           imagePair[constants.KEY__IMAGEPAIRS__IMAGE_B_URL];
       return before.replace(/[^\w\-]/g, "_") + ".png";
-    }
+    };
 
   }
 );