HTTP GM results viewer: server now returns category summaries along with testData

gm/rebaseline_server/static/view.html

Index: gm/rebaseline_server/static/view.html
===================================================================
--- gm/rebaseline_server/static/view.html	(revision 11507)
+++ gm/rebaseline_server/static/view.html	(working copy)
@@ -15,6 +15,9 @@
   --export mode
   -->
 
+  <!-- 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
@@ -24,26 +27,27 @@
     <li>show results of type
       <select ng-model="showResultsOfType"
               ng-init="showResultsOfType='failed'">
-        <option>failed</option>
-        <option>failure-ignored</option>
+        <option ng-repeat="(resultType, count) in categories['resultType']"

[epoger, 2013/09/27 18:12:39]

For now, I'm still showing the resultTypes in a dropdown, but now that dropdown
shows how many results there are of each type.

In a future CL, I will allow filtering on multiple categories, not just
resultTypes.

[borenet, 2013/09/27 19:22:01]

Please pre-select the category that you're displaying on page load.

[epoger, 2013/09/27 21:38:13]

Unfortunately, for the reasons outlined in
http://stackoverflow.com/questions/15326164/setting-the-selected-item-in-angu...
, that is tricky to do.

Given that the dropdown list will be going away very soon in favor of
sorting/filtering on all columns (as described in the TODO above), I would
rather leave it as-is if that's OK with you.

[borenet, 2013/09/30 13:06:02]

I know nothing of angular, but in jinja/django I think you could add something
like this in your option tag:

selected="{{ 1 if resultType == showResultsOfType else 0 }}"

+                value="{{resultType}}">
+          {{resultType}} ({{count}})
+        </option>
         <!--
-        <option>no-comparison</option>
+        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).
 
-        TODO(epoger): For now, I have disabled viewing the
-        no-comparison results because there are so many of them, and
-        the browser takes forever to download all the images.  Maybe
-        we should use some sort of lazy-loading technique
+        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'.
         -->
-        <!--
-        <option>succeeded</option>
-
-        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).
-        -->
       </select>
+      <br>
+      TODO(epoger): 'no-comparison' will probably take forever;
+      see HTML source for details
+      <br>
+      TODO(epoger): 'succeeded' will not show any results;
+      see HTML source for details
     </li>
     <li>image size
       <input type="text" ng-model="imageSize" ng-init="imageSize=100"
@@ -52,6 +56,7 @@
   </ul>
 
     <p>
+      Click on each column header to re-sort by that column...<br>

[borenet, 2013/09/27 19:22:01]

Can we at least make the column headers change the cursor on mouseover?  It's
not clear (except from this label) that clicking on them should do anything. 
Also, I can sort by the images, which I don't think makes much sense.

[epoger, 2013/09/27 21:38:13]

In the long term, improving the column sorting as alluded to in the TODO below
will make this clearer (and allow sort-up and sort-down).

In the meanwhile, I made the headers buttons... is that clearer?
Au contraire... I like that I can see all tests which resulted in identical
images, all in one bunch.  But if you don't like that, I recommend you don't
click there. :-)

[borenet, 2013/09/30 13:06:02]

I think the clearest thing is something like a radio button, which displays just
the column header when not selected and displays an arrow when selected. 
Something like what we see on the issue tracker, although that's even simpler in
that it just displays arrows next to every column header.  Using an anchor tag
with href="#" should get you the right mouse pointer.
Fair enough!

[epoger, 2013/09/30 15:04:59]

Good idea.  Changed 'em to radio buttons for now.
I will improve the sort UI soon, aiming for something along the lines of
http://jsfiddle.net/vojtajina/js64b/14/

[borenet, 2013/09/30 15:31:23]

SGTM.  That example looks great.

       <!-- 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
@@ -71,7 +76,7 @@
         </tr>
         <!-- TODO(epoger): improve the column sorting, as per
              http://jsfiddle.net/vojtajina/js64b/14/ -->
-        <tr ng-repeat="result in results | filter: { resultType: showResultsOfType } | orderBy: sortColumn">
+        <tr ng-repeat="result in testData | filter: { resultType: showResultsOfType } | orderBy: sortColumn">
           <td>{{result.builder}}</td>
           <td>{{result.test}}</td>
           <td>{{result.config}}</td>