More improvements to HTTP baseline viewer (for GM results)

gm/rebaseline_server/static/view.html

Index: gm/rebaseline_server/static/view.html
===================================================================
--- gm/rebaseline_server/static/view.html	(revision 11573)
+++ gm/rebaseline_server/static/view.html	(working copy)
@@ -18,67 +18,113 @@
   <!-- TODO(epoger): Add some indication of how old the
   expected/actual data is -->
 
- Settings:
-  <ul>
-    <!-- TODO(epoger): Now that we get multiple result types in a single
-    fetch, modify the UI: add a column showing resultType, and allow
-    the user to sort/filter on that column just like all the
-    others. -->
-    <li>show results of type
-      <select ng-model="showResultsOfType"
-              ng-init="showResultsOfType='failed'">
-        <option ng-repeat="(resultType, count) in categories['resultType']"
-                value="{{resultType}}">
-          {{resultType}} ({{count}})
-        </option>
-      </select>
-      <!--
-        TODO(epoger): See results.py: for now, I have disabled
-        returning succeeded tests as part of the JSON, because it
-        makes the returned JSON too big (and slows down the client).
+  <em ng-hide="categories">
+    Loading data, please wait...
+  </em>
 
-        Also, we should use some sort of lazy-loading technique
-        (e.g. http://www.appelsiini.net/projects/lazyload ), so that
-        the images are only loaded as they become viewable...
-        that will help with long lists like resultType='no-comparison'.
-      -->
+  <div ng-hide="!categories">
+  <table border="1">
+    <tr>
+      <th colspan="2">
+        Filters
+      </th>
+      <th>
+        Settings
+      </th>
+    </tr>
+    <tr valign="top">
+      <td>
+        resultType<br>
+        <label ng-repeat="(resultType, count) in categories['resultType']">
+          <input type="checkbox"
+                 name="resultTypes"
+                 value="{{resultType}}"
+                 ng-checked="!isHiddenResultType(resultType)"
+                 ng-click="toggleHiddenResultType(resultType)">
+          {{resultType}} ({{count}})<br>
+        </label>
+      </td>
+      <td>
+        config<br>

[epoger, 2013/10/02 16:05:59]

In a coming CL, I will add the ability to filter by test name.  Any advice on
how we should do this?  I could imagine:

1. A list of checkboxes like we have for 'config' already.  It will be a long
list, though, so I guess it'll have to be scrollable.

2. A dropdown list.  But that will only allow results for a single test at a
time.

3. A text field for partial matching.  ("clip" would show all tests containing
the substring "clip")

[epoger, 2013/10/02 18:04:57]

Live discussion with Brian: we will go with #3, for both test name and builder
name.  I have added a TODO below.

+        <label ng-repeat="(config, count) in categories['config']">
+          <input type="checkbox"
+                 name="configs"
+                 value="{{config}}"
+                 ng-checked="!isHiddenConfig(config)"
+                 ng-click="toggleHiddenConfig(config)">
+          {{config}} ({{count}})<br>
+        </label>
+      </td>
+      <td><table>
+        <tr><td>
+          Image size
+          <input type="text" ng-model="imageSizePending"
+                 ng-init="imageSizePending=100"
+                 ng-change="areUpdatesPending = true"
+                 maxlength="4"/>
+        </td></tr>
+        <tr><td>
+          Max records to display
+          <input type="text" ng-model="displayLimitPending"
+                 ng-init="displayLimitPending=50"
+                 ng-change="areUpdatesPending = true"
+                 maxlength="4"/>
+        </td></tr>
+        <tr><td>
+          <button style="font-size:30px"
+                  ng-click="updateResults()"
+                  ng-disabled="!areUpdatesPending">
+            Update Results

[epoger, 2013/10/02 16:05:59]

Any thoughts on the "Update Results" button needing to be hit to refresh the
results (except when you click on a column header, which forces it immediately)?

I'm torn... sometimes it's nice for mouse-clicks to be instantly reflected in
the output; other times, it's nice to be able to click a few things before the
updates are shown.

[epoger, 2013/10/02 18:04:57]

Live discussion: Brian is happy with the current functionality in this regard.

+          </button>
+        </td></tr>
+      </tr></table></td>
+    </tr>
+  </table>
+
+    <p>
+      TODO(epoger): Add more columns, such as pixel diffs, notes/bugs,

[epoger, 2013/10/02 16:05:59]

Made more TODOs visible in the UI, rather than hidden within the HTML.

+      ignoreFailure boolean
       <br>
-      TODO(epoger): 'no-comparison' will probably take forever;
-      see HTML source for details
+      TODO(epoger): improve the column sorting, as per
+      <a href="http://jsfiddle.net/vojtajina/js64b/14/">
+        http://jsfiddle.net/vojtajina/js64b/14/
+      </a>
+      <p>
+      Found {{filteredTestData.length}} matches, and displaying the first

[epoger, 2013/10/02 16:05:59]

No. :-)

My hope was that filtering operations would make going to the next page
unnecessary in most cases, and in the cases where one page just isn't enough the
escape valve is to show more results.  That would allow me to skip the
complexity of paging operations.

Let's discuss in person...

[epoger, 2013/10/02 18:04:57]

Live discussion with Brian: he is happy with the current functionality.

+      {{displayLimit}}: <br>
+      <!-- TODO(epoger): If (displayLimit <= filteredTestData.length),
+           modify this message to indicate that all results are shown. -->
+      (click on the column header radio buttons to re-sort by that column)
       <br>
-      TODO(epoger): 'succeeded' will not show any results;
-      see HTML source for details
-    </li>
-    <li>image size
-      <input type="text" ng-model="imageSizePending"
-             ng-init="imageSizePending=100; imageSize=100"
-             maxlength="4"/>
-      <button ng:click="imageSize=imageSizePending">apply</button>
-    </li>
-  </ul>
-
-    <p>
-      Click on the column header radio buttons to re-sort by that column...<br>
-      <!-- TODO(epoger): Show some sort of "loading" message, instead of
-           an empty table, while the data is loading.  Otherwise, if there are
-           a lot of failures and it takes a long time to load them, the user
-           might think there are NO failures and leave the page! -->
       <table border="1">
         <tr>
-          <th><input ng-model="sortColumn" name="sortColumnRadio" type="radio" value="builder">Builder</input></th>
-          <th><input ng-model="sortColumn" name="sortColumnRadio" type="radio" value="test">Test</input></th>
-          <th><input ng-model="sortColumn" name="sortColumnRadio" type="radio" value="config">Config</input></th>
-          <th><input ng-model="sortColumn" name="sortColumnRadio" type="radio" value="expectedHashDigest">Expected Image</input></th>
-          <th><input ng-model="sortColumn" name="sortColumnRadio" type="radio" value="actualHashDigest">Actual Image</input></th>
-          <!-- TODO(epoger): Add more columns, such as...
-               pixel diff
-               notes/bugs
-               ignoreFailure boolean
-          -->
+          <th ng-repeat="categoryName in ['resultType', 'builder', 'test', 'config']">
+            <input type="radio"
+                   name="sortColumnRadio"
+                   value="{{categoryName}}"
+                   ng-checked="(sortColumn == categoryName)"
+                   ng-click="sortResultsBy(categoryName)">
+            {{categoryName}}
+          </th>
+          <th>
+            <input type="radio"

[epoger, 2013/10/02 16:05:59]

Better labeling for the "expected image" and "actual image" columns

+                   name="sortColumnRadio"
+                   value="expectedHashDigest"
+                   ng-checked="(sortColumn == 'expectedHashDigest')"
+                   ng-click="sortResultsBy('expectedHashDigest')">
+            expected image
+          </th>
+          <th>
+            <input type="radio"
+                   name="sortColumnRadio"
+                   value="actualHashDigest"
+                   ng-checked="(sortColumn == 'actualHashDigest')"
+                   ng-click="sortResultsBy('actualHashDigest')">
+            actual image
+          </th>
         </tr>
-        <!-- TODO(epoger): improve the column sorting, as per
-             http://jsfiddle.net/vojtajina/js64b/14/ -->
-        <tr ng-repeat="result in testData | filter: { resultType: showResultsOfType } | orderBy: sortColumn">
+        <tr ng-repeat="result in limitedTestData">

[epoger, 2013/10/02 16:05:59]

When the page is first loaded, it is initially sorted by test (at least for
me)... look for the checked radiobutton in that column.  Is that how it's
behaving for you too?

Do you think I should do something to make the default sort order more obvious? 
Maybe change the order of the columns, so that test is further to the left? 
Proposed order: resultType, test, builder, config, images

Also, I could change it so that the sorting column is always leftmost... but I
fear it would be MORE confusing for the columns to be rearranged when the data
is re-sorted.
Yes.  Added a TODO within the UI.

[epoger, 2013/10/02 18:04:57]

Live discussion with Jim: he is happy with the current functionality.

+          <td>{{result.resultType}}</td>
           <td>{{result.builder}}</td>
           <td>{{result.test}}</td>
           <td>{{result.config}}</td>
@@ -95,6 +141,7 @@
         </tr>
       </table>
   </div>
+  </div>
 
   <!-- TODO(epoger): Can we get the base URLs (commondatastorage and
        issues list) from