rebaseline_server: add "show thumbnails" option, and skip display of nonexistent...

BUG=skia:2248,skia:2231
NOTRY=True
R=borenet@google.com

Author: epoger@google.com

Review URL: https://codereview.chromium.org/183893030

git-svn-id: http://skia.googlecode.com/svn/trunk@13676 2bbb7eff-a529-9590-31e7-b0007b416f81

diff --git a/gm/rebaseline_server/static/loader.js b/gm/rebaseline_server/static/loader.js
index ab79df8189da0a0b7b4aa120aced0edbab5be626..9926193fc2564bdc494ec32f00f8cbc47172d8e0 100644 (file)
--- a/gm/rebaseline_server/static/loader.js
+++ b/gm/rebaseline_server/static/loader.js
@@ -292,11 +292,12 @@ Loader.controller(
 
     // parameter name -> copier objects to load/save parameter value
     $scope.queryParameters.map = {
-      'resultsToLoad':       $scope.queryParameters.copiers.simple,
-      'displayLimitPending': $scope.queryParameters.copiers.simple,
-      'imageSizePending':    $scope.queryParameters.copiers.simple,
-      'sortColumnSubdict':   $scope.queryParameters.copiers.simple,
-      'sortColumnKey':       $scope.queryParameters.copiers.simple,
+      'resultsToLoad':         $scope.queryParameters.copiers.simple,
+      'displayLimitPending':   $scope.queryParameters.copiers.simple,
+      'showThumbnailsPending': $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,
@@ -396,6 +397,7 @@ Loader.controller(
                 $scope.getSortColumnValue);
         $scope.limitedImagePairs = $scope.filteredImagePairs;
       }
+      $scope.showThumbnails = $scope.showThumbnailsPending;
       $scope.imageSize = $scope.imageSizePending;
       $scope.setUpdatesPending(false);
       $scope.queryParameters.save();

diff --git a/gm/rebaseline_server/static/view.html b/gm/rebaseline_server/static/view.html
index 1a54c64ffb7f6473e7ffbcdf427ff93a5badc5f9..a4d15c579909da4d2fba4d44c70dde2e312c9435 100644 (file)
--- a/gm/rebaseline_server/static/view.html
+++ b/gm/rebaseline_server/static/view.html
@@ -23,15 +23,15 @@
     {{loadingMessage}}
   </em>
 
-  <div ng-hide="!extraColumnHeaders"><!-- everything: hide until data is loaded -->
+  <div ng-show="extraColumnHeaders"><!-- everything: hide until data is loaded -->
 
     <div class="warning-div"
-         ng-hide="!(header[constants.KEY__HEADER__IS_EDITABLE] && header[constants.KEY__HEADER__IS_EXPORTED])">
+         ng-show="header[constants.KEY__HEADER__IS_EDITABLE] && header[constants.KEY__HEADER__IS_EXPORTED]">
       WARNING!  These results are editable and exported, so any user
       who can connect to this server over the network can modify them.
     </div>
 
-    <div ng-hide="!(header[constants.KEY__HEADER__TIME_UPDATED])">
+    <div ng-show="header[constants.KEY__HEADER__TIME_UPDATED]">
       Results current as of {{localTimeString(header[constants.KEY__HEADER__TIME_UPDATED])}}
     </div>
 
@@ -51,7 +51,7 @@
 
     <br>
     <!-- We only show the filters/settings table on the Unfiled tab. -->
-    <table ng-hide="viewingTab != defaultTab" border="1">
+    <table ng-show="viewingTab == defaultTab" border="1">
     <tr>
       <th colspan="4">
         Filters
@@ -114,6 +114,12 @@
         </button>
       </td>
       <td><table>
+        <tr><td>
+          <input type="checkbox" ng-model="showThumbnailsPending"
+                 ng-init="showThumbnailsPending = true"
+                 ng-change="areUpdatesPending = true"/>
+          Show thumbnails
+        </td></tr>
         <tr><td>
           Image width
           <input type="text" ng-model="imageSizePending"
@@ -142,7 +148,7 @@
       <p>
 
       <!-- Submission UI that we only show in the Pending Approval tab. -->
-      <div ng-hide="'Pending Approval' != viewingTab">
+      <div ng-show="'Pending Approval' == viewingTab">
         <div style="display:inline-block">
           <button style="font-size:20px"
                   ng-click="submitApprovals(filteredImagePairs)"
@@ -152,7 +158,7 @@
         </div>
         <div style="display:inline-block">
           <div style="font-size:20px"
-               ng-hide="!submitPending">
+               ng-show="submitPending">
             Submitting, please wait...
           </div>
         </div>
@@ -160,7 +166,7 @@
           Advanced settings...
           <input type="checkbox" ng-model="showSubmitAdvancedSettings">
           show
-          <ul ng-hide="!showSubmitAdvancedSettings">
+          <ul ng-show="showSubmitAdvancedSettings">
             <li ng-repeat="setting in [constants.KEY__EXPECTATIONS__REVIEWED, constants.KEY__EXPECTATIONS__IGNOREFAILURE]">
               {{setting}}
               <input type="checkbox" ng-model="submitAdvancedSettings[setting]">
@@ -180,10 +186,10 @@
         <tr>
           <td>
             Found {{filteredImagePairs.length}} matches;
-            <span ng-hide="filteredImagePairs.length <= limitedImagePairs.length">
+            <span ng-show="filteredImagePairs.length > limitedImagePairs.length">
               displaying the first {{limitedImagePairs.length}}
             </span>
-            <span ng-hide="filteredImagePairs.length > limitedImagePairs.length">
+            <span ng-show="filteredImagePairs.length <= limitedImagePairs.length">
               displaying them all
             </span>
             <br>
@@ -205,7 +211,7 @@
             <div ng-repeat="otherTab in tabs">
               <button ng-click="moveSelectedImagePairsToTab(otherTab)"
                       ng-disabled="selectedImagePairs.length == 0"
-                      ng-hide="otherTab == viewingTab">
+                      ng-show="otherTab != viewingTab">
                 move {{selectedImagePairs.length}} selected tests to {{otherTab}} tab
               </button>
             </div>
@@ -271,14 +277,14 @@
             {{imagePair[constants.KEY__EXTRA_COLUMN_VALUES][constants.KEY__EXTRACOLUMN__RESULT_TYPE]}}
             <br>
             <button class="show-only-button"
-                    ng-hide="viewingTab != defaultTab"
+                    ng-show="viewingTab == defaultTab"
                     ng-click="showOnlyResultType(imagePair[constants.KEY__EXTRA_COLUMN_VALUES][constants.KEY__EXTRACOLUMN__RESULT_TYPE])"
                     title="show only results of type {{imagePair[constants.KEY__EXTRA_COLUMN_VALUES][constants.KEY__EXTRACOLUMN__RESULT_TYPE]}}">
               show only
             </button>
             <br>
             <button class="show-all-button"
-                    ng-hide="viewingTab != defaultTab"
+                    ng-show="viewingTab == defaultTab"
                     ng-disabled="0 == setSize(hiddenResultTypes)"
                     ng-click="showAllResultTypes()"
                     title="show results of all types">
@@ -289,7 +295,7 @@
             {{imagePair[constants.KEY__EXTRA_COLUMN_VALUES][categoryName]}}
             <br>
             <button class="show-only-button"
-                    ng-hide="viewingTab != defaultTab"
+                    ng-show="viewingTab == defaultTab"
                     ng-disabled="imagePair[constants.KEY__EXTRA_COLUMN_VALUES][categoryName] == categoryValueMatch[categoryName]"
                     ng-click="setCategoryValueMatch(categoryName, imagePair[constants.KEY__EXTRA_COLUMN_VALUES][categoryName])"
                     title="show only results of {{categoryName}} {{imagePair[constants.KEY__EXTRA_COLUMN_VALUES][categoryName]}}">
@@ -297,7 +303,7 @@
             </button>
             <br>
             <button class="show-all-button"
-                    ng-hide="viewingTab != defaultTab"
+                    ng-show="viewingTab == defaultTab"
                     ng-disabled="'' == categoryValueMatch[categoryName]"
                     ng-click="setCategoryValueMatch(categoryName, '')"
                     title="show results of all {{categoryName}}s">
@@ -308,14 +314,14 @@
             {{imagePair[constants.KEY__EXTRA_COLUMN_VALUES][constants.KEY__EXTRACOLUMN__CONFIG]}}
             <br>
             <button class="show-only-button"
-                    ng-hide="viewingTab != defaultTab"
+                    ng-show="viewingTab == defaultTab"
                     ng-click="showOnlyConfig(imagePair[constants.KEY__EXTRA_COLUMN_VALUES][constants.KEY__EXTRACOLUMN__CONFIG])"
                     title="show only results of config {{imagePair[constants.KEY__EXTRA_COLUMN_VALUES][constants.KEY__EXTRACOLUMN__CONFIG]}}">
               show only
             </button>
             <br>
             <button class="show-all-button"
-                    ng-hide="viewingTab != defaultTab"
+                    ng-show="viewingTab == defaultTab"
                     ng-disabled="0 == setSize(hiddenConfigs)"
                     ng-click="showAllConfigs()"
                     title="show results of all configs">
@@ -332,32 +338,46 @@
 
           <!-- image A -->
           <td valign="bottom" width="{{imageSize}}">
-            <a href="{{imageSets[0][constants.KEY__IMAGESETS__BASE_URL]}}/{{imagePair[constants.KEY__IMAGE_A_URL]}}" target="_blank">View Image</a><br/>
-            <img-compare type="baseline" width="{{imageSize}}"
-                         src="{{imageSets[0][constants.KEY__IMAGESETS__BASE_URL]}}/{{imagePair[constants.KEY__IMAGE_A_URL]}}" />
+            <div ng-if="imagePair[constants.KEY__IMAGE_A_URL] != null">
+              <a href="{{imageSets[0][constants.KEY__IMAGESETS__BASE_URL]}}/{{imagePair[constants.KEY__IMAGE_A_URL]}}" target="_blank">View Image</a><br/>
+              <img-compare ng-if="showThumbnails"
+                           type="baseline" width="{{imageSize}}"
+                           src="{{imageSets[0][constants.KEY__IMAGESETS__BASE_URL]}}/{{imagePair[constants.KEY__IMAGE_A_URL]}}" />
+            </div>
+            <div ng-show="imagePair[constants.KEY__IMAGE_A_URL] == null"
+                 style="text-align:center">
+              &ndash;none&ndash;
+            </div>
           </td>
 
           <!-- image B -->
           <td valign="bottom" width="{{imageSize}}">
-            <a href="{{imageSets[1][constants.KEY__IMAGESETS__BASE_URL]}}/{{imagePair[constants.KEY__IMAGE_B_URL]}}" target="_blank">View Image</a><br/>
-            <img-compare type="test" width="{{imageSize}}"
-                         src="{{imageSets[1][constants.KEY__IMAGESETS__BASE_URL]}}/{{imagePair[constants.KEY__IMAGE_B_URL]}}" />
+            <div ng-if="imagePair[constants.KEY__IMAGE_B_URL] != null">
+              <a href="{{imageSets[1][constants.KEY__IMAGESETS__BASE_URL]}}/{{imagePair[constants.KEY__IMAGE_B_URL]}}" target="_blank">View Image</a><br/>
+              <img-compare ng-if="showThumbnails"
+                           type="test" width="{{imageSize}}"
+                           src="{{imageSets[1][constants.KEY__IMAGESETS__BASE_URL]}}/{{imagePair[constants.KEY__IMAGE_B_URL]}}" />
+            </div>
+            <div ng-show="imagePair[constants.KEY__IMAGE_B_URL] == null"
+                 style="text-align:center">
+              &ndash;none&ndash;
+            </div>
           </td>
 
           <!-- whitediffs: every differing pixel shown in white -->
           <td valign="bottom" width="{{imageSize}}">
-            <div ng-hide="!imagePair[constants.KEY__IS_DIFFERENT]"
+            <div ng-if="imagePair[constants.KEY__IS_DIFFERENT]"
                  title="{{imagePair[constants.KEY__DIFFERENCE_DATA][constants.KEY__DIFFERENCE_DATA__NUM_DIFF_PIXELS] | number:0}} of {{(100 * imagePair[constants.KEY__DIFFERENCE_DATA][constants.KEY__DIFFERENCE_DATA__NUM_DIFF_PIXELS] / imagePair[constants.KEY__DIFFERENCE_DATA][constants.KEY__DIFFERENCE_DATA__PERCENT_DIFF_PIXELS]) | number:0}} pixels ({{imagePair[constants.KEY__DIFFERENCE_DATA][constants.KEY__DIFFERENCE_DATA__PERCENT_DIFF_PIXELS].toFixed(4)}}%) differ from expectation.">
 
               {{imagePair[constants.KEY__DIFFERENCE_DATA][constants.KEY__DIFFERENCE_DATA__PERCENT_DIFF_PIXELS].toFixed(4)}}%
               ({{imagePair[constants.KEY__DIFFERENCE_DATA][constants.KEY__DIFFERENCE_DATA__NUM_DIFF_PIXELS]}})
               <br/>
               <a href="/static/generated-images/whitediffs/{{getImageDiffRelativeUrl(imagePair)}}" target="_blank">View Image</a><br/>
-              <img-compare type="differingPixelsInWhite" width="{{imageSize}}"
+              <img-compare ng-if="showThumbnails"
+                           type="differingPixelsInWhite" width="{{imageSize}}"
                            src="/static/generated-images/whitediffs/{{getImageDiffRelativeUrl(imagePair)}}" />
-
             </div>
-            <div ng-hide="imagePair[constants.KEY__IS_DIFFERENT]"
+            <div ng-show="!imagePair[constants.KEY__IS_DIFFERENT]"
                  style="text-align:center">
               &ndash;none&ndash;
             </div>
@@ -365,23 +385,23 @@
 
           <!-- diffs: per-channel RGB deltas -->
           <td valign="bottom" width="{{imageSize}}">
-            <div ng-hide="!imagePair[constants.KEY__IS_DIFFERENT]"
+            <div ng-if="imagePair[constants.KEY__IS_DIFFERENT]"
                  title="Perceptual difference measure is {{imagePair[constants.KEY__DIFFERENCE_DATA][constants.KEY__DIFFERENCE_DATA__PERCEPTUAL_DIFF].toFixed(4)}}%.  Maximum difference per channel: R={{imagePair[constants.KEY__DIFFERENCE_DATA][constants.KEY__DIFFERENCE_DATA__MAX_DIFF_PER_CHANNEL][0]}}, G={{imagePair[constants.KEY__DIFFERENCE_DATA][constants.KEY__DIFFERENCE_DATA__MAX_DIFF_PER_CHANNEL][1]}}, B={{imagePair[constants.KEY__DIFFERENCE_DATA][constants.KEY__DIFFERENCE_DATA__MAX_DIFF_PER_CHANNEL][2]}}">
 
               {{imagePair[constants.KEY__DIFFERENCE_DATA][constants.KEY__DIFFERENCE_DATA__PERCEPTUAL_DIFF].toFixed(4)}}%
               {{imagePair[constants.KEY__DIFFERENCE_DATA][constants.KEY__DIFFERENCE_DATA__MAX_DIFF_PER_CHANNEL]}}
               <br/>
               <a href="/static/generated-images/diffs/{{getImageDiffRelativeUrl(imagePair)}}" target="_blank">View Image</a><br/>
-              <img-compare ng-style="{backgroundColor: pixelDiffBgColor}"
+              <img-compare ng-if="showThumbnails"
+                           ng-style="{backgroundColor: pixelDiffBgColor}"
                            type="differencePerPixel" width="{{imageSize}}"
                            src="/static/generated-images/diffs/{{getImageDiffRelativeUrl(imagePair)}}"
                            ng-mousedown="MagnifyDraw($event, true)"
                            ng-mousemove="MagnifyDraw($event, false)"
                            ng-mouseup="MagnifyEnd($event)"
                            ng-mouseleave="MagnifyEnd($event)" />
-
             </div>
-            <div ng-hide="imagePair[constants.KEY__IS_DIFFERENT]"
+            <div ng-show="!imagePair[constants.KEY__IS_DIFFERENT]"
                  style="text-align:center">
               &ndash;none&ndash;
             </div>