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

gm/rebaseline_server/static/view.html

Index: gm/rebaseline_server/static/view.html
diff --git a/gm/rebaseline_server/static/view.html b/gm/rebaseline_server/static/view.html
index 1a54c64ffb7f6473e7ffbcdf427ff93a5badc5f9..a4d15c579909da4d2fba4d44c70dde2e312c9435 100644
--- 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 -->

[epoger, 2014/03/05 18:25:28]

Where we are guarding against img src loading, I had to use ng-if instead of
ng-hide/ng-show.

But I found that making them all ng-if caused problems, so I wanted to leave
some of them as "show/hide" instead of "if/not-if".

I went ahead and changed all the ng-hide clauses to EITHER ng-if or ng-show, so
that the logic does not have to be inverted when we switch between the
"show/hide" and "if/not-if" approaches.

[borenet, 2014/03/05 19:03:56]

Just curious - what problems did use of ng-if instead of ng-show cause?
Thanks. Using consistently "positive" terms is helpful.

 
     <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
@@ -115,6 +115,12 @@
       </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"
                  ng-init="imageSizePending=100"
@@ -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>