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

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 112 matching lines @@
 
 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...";
 
+    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
      * render the data.
      */
     $http.get($scope.resultsToLoad).success(
       function(data, status, header, config) {
         var dataHeader = data[constants.KEY__ROOT__HEADER];
         if (dataHeader[constants.KEY__HEADER__SCHEMA_VERSION] !=
             constants.VALUE__HEADER__SCHEMA_VERSION) {
@@ skipping 17 matching lines @@
               function(){location.reload();},
               timeToReload - timeNow);
         } else {
           $scope.loadingMessage = "processing data, please wait...";
 
           $scope.header = dataHeader;
           $scope.extraColumnHeaders = data[constants.KEY__ROOT__EXTRACOLUMNHEADERS];
           $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 = {};
           $scope.submitAdvancedSettings[
               constants.KEY__EXPECTATIONS__REVIEWED] = true;
           $scope.submitAdvancedSettings[
               constants.KEY__EXPECTATIONS__IGNOREFAILURE] = false;
           $scope.submitAdvancedSettings['bug'] = '';
 
           // Create the list of tabs (lists into which the user can file each
@@ skipping 131 matching lines @@
      * Select all currently showing tests.
      */
     $scope.selectAllImagePairs = function() {
       var numImagePairsShowing = $scope.limitedImagePairs.length;
       for (var i = 0; i < numImagePairsShowing; i++) {
         var index = $scope.limitedImagePairs[i].index;
         if (!$scope.isValueInArray(index, $scope.selectedImagePairs)) {
           $scope.toggleValueInArray(index, $scope.selectedImagePairs);
         }
       }
-    }
+    };
 
     /**
      * Deselect all currently showing tests.
      */
     $scope.clearAllImagePairs = function() {
       var numImagePairsShowing = $scope.limitedImagePairs.length;
       for (var i = 0; i < numImagePairsShowing; i++) {
         var index = $scope.limitedImagePairs[i].index;
         if ($scope.isValueInArray(index, $scope.selectedImagePairs)) {
           $scope.toggleValueInArray(index, $scope.selectedImagePairs);
         }
       }
-    }
+    };
 
     /**
      * Toggle selection of all currently showing tests.
      */
     $scope.toggleAllImagePairs = function() {
       var numImagePairsShowing = $scope.limitedImagePairs.length;
       for (var i = 0; i < numImagePairsShowing; i++) {
         var index = $scope.limitedImagePairs[i].index;
         $scope.toggleValueInArray(index, $scope.selectedImagePairs);
       }
-    }
+    };
 
     /**
      * Toggle selection state of a subset of the currently showing tests.
      *
      * @param startIndex index within $scope.limitedImagePairs of the first
      *     test to toggle selection state of
      * @param num number of tests (in a contiguous block) to toggle
      */
     $scope.toggleSomeImagePairs = function(startIndex, num) {
       var numImagePairsShowing = $scope.limitedImagePairs.length;
       for (var i = startIndex; i < startIndex + num; i++) {
         var index = $scope.limitedImagePairs[i].index;
         $scope.toggleValueInArray(index, $scope.selectedImagePairs);
       }
-    }
+    };
 
 
     //
     // Tab operations.
     //
 
     /**
      * Change the selected tab.
      *
      * @param tab (string): name of the tab to select
      */
     $scope.setViewingTab = function(tab) {
       $scope.viewingTab = tab;
       $scope.updateResults();
-    }
+    };
 
     /**
      * Move the imagePairs in $scope.selectedImagePairs to a different tab,
      * and then clear $scope.selectedImagePairs.
      *
      * @param newTab (string): name of the tab to move the tests to
      */
     $scope.moveSelectedImagePairsToTab = function(newTab) {
       $scope.moveImagePairsToTab($scope.selectedImagePairs, newTab);
       $scope.selectedImagePairs = [];
       $scope.updateResults();
-    }
+    };
 
     /**
      * Move a subset of $scope.imagePairs to a different tab.
      *
      * @param imagePairIndices (array of ints): indices into $scope.imagePairs
      *        indicating which test results to move
      * @param newTab (string): name of the tab to move the tests to
      */
     $scope.moveImagePairsToTab = function(imagePairIndices, newTab) {
       var imagePairIndex;
       var numImagePairs = imagePairIndices.length;
       for (var i = 0; i < numImagePairs; i++) {
         imagePairIndex = imagePairIndices[i];
         $scope.numResultsPerTab[$scope.imagePairs[imagePairIndex].tab]--;
         $scope.imagePairs[imagePairIndex].tab = newTab;
       }
       $scope.numResultsPerTab[newTab] += numImagePairs;
-    }
+    };
 
 
     //
     // $scope.queryParameters:
     // Transfer parameter values between $scope and the URL query string.
     //
     $scope.queryParameters = {};
 
     // load and save functions for parameters of each type
     // (load a parameter value into $scope from nameValuePairs,
@@ skipping 172 matching lines @@
             );
             $scope.showingColumnValues[columnName] = showingColumnValues;
           }
         }
       );
 
       // TODO(epoger): Every time we apply a filter, AngularJS creates
       // 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")(
                 $filter("removeHiddenImagePairs")(
                     $scope.imagePairs,
                     $scope.filterableColumnNames,
                     $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);
       } else {
         $scope.filteredImagePairs =
             $filter("orderBy")(
                 $filter("filter")(
                     $scope.imagePairs,
                     {tab: $scope.viewingTab},
                     true
                 ),
-                [$scope.getSortColumnValue, $scope.getSecondOrderSortValue]);
+                // [$scope.getSortColumnValue, $scope.getSecondOrderSortValue]);
+                $scope.getSortColumnValue);
         $scope.limitedImagePairs = $filter("mergeAndLimit")(
             $scope.filteredImagePairs, -1, $scope.mergeIdenticalRows);
       }
       $scope.showThumbnails = $scope.showThumbnailsPending;
       $scope.imageSize = $scope.imageSizePending;
       $scope.setUpdatesPending(false);
       $scope.queryParameters.save();
     }
 
     /**
      * This function is called when the results have been completely rendered
      * after updateResults().
      */
     $scope.resultsUpdatedCallback = function() {
       $scope.renderEndTime = window.performance.now();
       $log.debug("renderEndTime: " + $scope.renderEndTime);
-    }
+    };
 
     /**
      * Re-sort the displayed results.
      *
      * @param subdict (string): which KEY__IMAGEPAIRS__* subdictionary
      *     the sort column key is within, or 'none' if the sort column
      *     key is one of KEY__IMAGEPAIRS__*
      * @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
      * sorting on (according to $scope.sortColumnSubdict and
      * $scope.sortColumnKey).
      *
      * @param imagePair: imagePair to get a column value out of.
      */
     $scope.getSortColumnValue = function(imagePair) {
       if ($scope.sortColumnSubdict in imagePair) {
         return imagePair[$scope.sortColumnSubdict][$scope.sortColumnKey];
       } else if ($scope.sortColumnKey in imagePair) {
         return imagePair[$scope.sortColumnKey];
       } else {
         return undefined;
       }
-    }
+    };
 
     /**
      * For a particular ImagePair, return the value we use for the
      * second-order sort (tiebreaker when multiple rows have
      * the same getSortColumnValue()).
      *
      * We join the imageA and imageB urls for this value, so that we merge
      * adjacent rows as much as possible.
      *
      * @param imagePair: imagePair to get a column value out of.
      */
     $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.
      *
      * @param name
      * @param value
      */
     $scope.setColumnStringMatch = function(name, value) {
       $scope.columnStringMatch[name] = value;
       $scope.updateResults();
-    }
+    };
 
     /**
      * Update $scope.showingColumnValues[columnName] and $scope.columnStringMatch[columnName]
      * so that ONLY entries with this columnValue are showing, and update the visible results.
      * (We update both of those, so we cover both freeform and checkbox filtered columns.)
      *
      * @param columnName
      * @param columnValue
      */
     $scope.showOnlyColumnValue = function(columnName, columnValue) {
       $scope.columnStringMatch[columnName] = columnValue;
       $scope.showingColumnValues[columnName] = {};
       $scope.toggleValueInSet(columnValue, $scope.showingColumnValues[columnName]);
       $scope.updateResults();
-    }
+    };
 
     /**
      * Update $scope.showingColumnValues[columnName] and $scope.columnStringMatch[columnName]
      * so that ALL entries are showing, and update the visible results.
      * (We update both of those, so we cover both freeform and checkbox filtered columns.)
      *
      * @param columnName
      */
     $scope.showAllColumnValues = function(columnName) {
       $scope.columnStringMatch[columnName] = "";
       $scope.showingColumnValues[columnName] = {};
       $scope.toggleValuesInSet($scope.allColumnValues[columnName],
                                $scope.showingColumnValues[columnName]);
       $scope.updateResults();
-    }
+    };
 
 
     //
     // Operations for sending info back to the server.
     //
 
     /**
      * Tell the server that the actual results of these particular tests
      * are acceptable.
      *
@@ skipping 89 matching lines @@
             "finished loading the update results into memory!) and you can " +
             "submit more baselines if you want.");
         // I don't know why, but if I just call reload() here it doesn't work.
         // Making a timer call it fixes the problem.
         $timeout(function(){location.reload();}, 1);
       }).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 the number of values present within set "set".
      *
      * @param set an Object which we use to mimic set semantics
      */
     $scope.setSize = function(set) {
       return Object.keys(set).length;
-    }
+    };
 
     /**
      * 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;
       }
-    }
+    };
 
     /**
      * For each value in valueArray, call toggleValueInSet(value, set).
      *
      * @param valueArray
      * @param set
      */
     $scope.toggleValuesInSet = function(valueArray, set) {
       var arrayLength = valueArray.length;
       for (var i = 0; i < arrayLength; i++) {
         $scope.toggleValueInSet(valueArray[i], set);
       }
-    }
+    };
 
 
     //
     // 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 single "column slice" of a 2D array.
      *
      * For example, if array is:
      * [[A0, A1],
      *  [B0, B1],
      *  [C0, C1]]
      * and index is 0, this this will return:
      * [A0, B0, C0]
      *
      * @param array a Javascript Array
      * @param column (numeric): index within each row array
      */
     $scope.columnSliceOf2DArray = function(array, column) {
       var slice = [];
       var numRows = array.length;
       for (var row = 0; row < numRows; row++) {
         slice.push(array[row][column]);
       }
       return slice;
-    }
+    };
 
     /**
      * 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();
-    }
+    };
 
     /**
      * Returns a hex color string (such as "#aabbcc") for the given RGB values.
      *
      * @param r (numeric): red channel value, 0-255
      * @param g (numeric): green channel value, 0-255
      * @param b (numeric): blue channel value, 0-255
      */
     $scope.hexColorString = function(r, g, b) {
       var rString = r.toString(16);
       if (r < 16) {
         rString = "0" + rString;
       }
       var gString = g.toString(16);
       if (g < 16) {
         gString = "0" + gString;
       }
       var bString = b.toString(16);
       if (b < 16) {
         bString = "0" + bString;
       }
       return '#' + rString + gString + bString;
-    }
+    };
 
     /**
      * Returns a hex color string (such as "#aabbcc") for the given brightness.
      *
      * @param brightnessString (string): 0-255, 0 is completely black
      *
      * TODO(epoger): It might be nice to tint the color when it's not completely
      * black or completely white.
      */
     $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.
      *
      * Depending on which diff this is (whitediffs, pixeldiffs, etc.) this
      * will be relative to different base URLs.
      *
      * We must keep this function in sync with _get_difference_locator() in
      * ../imagediffdb.py
      *
      * @param imagePair: ImagePair to generate image diff URL for
      */
     $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";
-    }
+    };
 
   }
 );