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 98 matching lines @@
             $scope.imageSets,
             function(imageSet) {
               var baseUrl = imageSet[baseUrlKey];
               if ((baseUrl.substring(0, 1) != '/') &&
                   (baseUrl.indexOf('://') == -1)) {
                 imageSet[baseUrlKey] = $scope.resultsToLoad + '/../' + baseUrl;
               }
             }
           );
 
+
+          // show the table and sort it ascending by 
           $scope.readyToDisplay = true;
           $scope.updateResults();
           $scope.loadingMessage = "";
           $scope.windowTitle = "Current GM Results";
 
           $timeout( function() {
             make_results_header_sticky();
           });
         }
       }
@@ skipping 290 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));
 
+        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 ((subdict === $scope.sortColumnSubdict) && ($scope.sortColumnKey === key)) {

[epoger, 2014/08/07 13:58:29]

Maybe add comment, like...

// If we are already sorting by this column, toggle the sort order.

[stephana, 2014/08/07 15:52:22]

Done.

+        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;
       }
-    }
+    };

[epoger, 2014/08/07 13:58:29]

Nit: I see that we don't have semicolons at the end of other function
declarations.  Does it matter one way or the other?

[stephana, 2014/08/07 15:52:22]

Well they should be at the other functions as well. 
In this particular case you are actually making an assignment (versus declaring
a function). Assignments should end with a semicolon. 
(see
http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml#Semicolons)

 
     /**
      * 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.
@@ skipping 331 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";
     }
 
   }
 );