gm/rebaseline_server/static/view.html - Issue 25555003: More improvements to HTTP baseline viewer (for GM results)

Side by Side Diff: gm/rebaseline_server/static/view.html

Issue 25555003: More improvements to HTTP baseline viewer (for GM results) (Closed) Base URL: http://skia.googlecode.com/svn/trunk/

Patch Set: various_changes Created 7 years, 2 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch | Annotate | Revision Log

OLD	NEW
1 <!DOCTYPE html>	1 <!DOCTYPE html>

2	2

3 <html ng-app="Loader">	3 <html ng-app="Loader">

4	4

5 <head>	5 <head>

6 <title>Current GM Results</title>	6 <title>Current GM Results</title>

7 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js" ></script>	7 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js" ></script>

8 <script src="loader.js"></script>	8 <script src="loader.js"></script>

9 </head>	9 </head>

10	10

11 <body>	11 <body>

12 <div ng-controller="Loader.Controller">	12 <div ng-controller="Loader.Controller">

13	13

14 <!-- TODO(epoger): Add a warning banner if the server is running in	14 <!-- TODO(epoger): Add a warning banner if the server is running in

15 --export mode	15 --export mode

16 -->	16 -->

17	17

18 <!-- TODO(epoger): Add some indication of how old the	18 <!-- TODO(epoger): Add some indication of how old the

19 expected/actual data is -->	19 expected/actual data is -->

20	20

21 Settings:	21 <em ng-hide="categories">

22 <ul>	22 Loading data, please wait...

23 <!-- TODO(epoger): Now that we get multiple result types in a single	23 </em>

24 fetch, modify the UI: add a column showing resultType, and allow

25 the user to sort/filter on that column just like all the

26 others. -->

27 <li>show results of type

28 <select ng-model="showResultsOfType"

29 ng-init="showResultsOfType='failed'">

30 <option ng-repeat="(resultType, count) in categories['resultType']"

31 value="{{resultType}}">

32 {{resultType}} ({{count}})

33 </option>

34 </select>

35 <!--

36 TODO(epoger): See results.py: for now, I have disabled

37 returning succeeded tests as part of the JSON, because it

38 makes the returned JSON too big (and slows down the client).

39	24

40 Also, we should use some sort of lazy-loading technique	25 <div ng-hide="!categories">

41 (e.g. http://www.appelsiini.net/projects/lazyload ), so that	26 <table border="1">

42 the images are only loaded as they become viewable...	27 <tr>

43 that will help with long lists like resultType='no-comparison'.	28 <th colspan="2">

44 -->	29 Filters

45 <br>	30 </th>

46 TODO(epoger): 'no-comparison' will probably take forever;	31 <th>

47 see HTML source for details	32 Settings

48 <br>	33 </th>

49 TODO(epoger): 'succeeded' will not show any results;	34 </tr>

50 see HTML source for details	35 <tr valign="top">

51 </li>	36 <td>

52 <li>image size	37 resultType<br>

53 <input type="text" ng-model="imageSizePending"	38 <label ng-repeat="(resultType, count) in categories['resultType']">

54 ng-init="imageSizePending=100; imageSize=100"	39 <input type="checkbox"

55 maxlength="4"/>	40 name="resultTypes"

56 <button ng:click="imageSize=imageSizePending">apply</button>	41 value="{{resultType}}"

57 </li>	42 ng-checked="!isHiddenResultType(resultType)"

58 </ul>	43 ng-click="toggleHiddenResultType(resultType)">

	44 {{resultType}} ({{count}})<br>

	45 </label>

	46 </td>

	47 <td>

	48 config<br>
	epoger 2013/10/02 16:05:59 In a coming CL, I will add the ability to filter b 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, fo Show quoted text On 2013/10/02 16:05:59, epoger wrote: > 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") Live discussion with Brian: we will go with #3, for both test name and builder name. I have added a TODO below.
	49 <label ng-repeat="(config, count) in categories['config']">

	50 <input type="checkbox"

	51 name="configs"

	52 value="{{config}}"

	53 ng-checked="!isHiddenConfig(config)"

	54 ng-click="toggleHiddenConfig(config)">

	55 {{config}} ({{count}})<br>

	56 </label>

	57 </td>

	58 <td><table>

	59 <tr><td>

	60 Image size

	61 <input type="text" ng-model="imageSizePending"

	62 ng-init="imageSizePending=100"

	63 ng-change="areUpdatesPending = true"

	64 maxlength="4"/>

	65 </td></tr>

	66 <tr><td>

	67 Max records to display

	68 <input type="text" ng-model="displayLimitPending"

	69 ng-init="displayLimitPending=50"

	70 ng-change="areUpdatesPending = true"

	71 maxlength="4"/>

	72 </td></tr>

	73 <tr><td>

	74 <button style="font-size:30px"

	75 ng-click="updateResults()"

	76 ng-disabled="!areUpdatesPending">

	77 Update Results
	epoger 2013/10/02 16:05:59 Any thoughts on the "Update Results" button needin 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 f Show quoted text On 2013/10/02 16:05:59, epoger wrote: > 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)? Live discussion: Brian is happy with the current functionality in this regard.
	78 </button>

	79 </td></tr>

	80 </tr></table></td>

	81 </tr>

	82 </table>

59	83

60 <p>	84 <p>

61 Click on the column header radio buttons to re-sort by that column...<br>	85 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 hid Made more TODOs visible in the UI, rather than hidden within the HTML.
62 <!-- TODO(epoger): Show some sort of "loading" message, instead of	86 ignoreFailure boolean

63 an empty table, while the data is loading. Otherwise, if there are	87 <br>

64 a lot of failures and it takes a long time to load them, the user	88 TODO(epoger): improve the column sorting, as per

65 might think there are NO failures and leave the page! -->	89 <a href="http://jsfiddle.net/vojtajina/js64b/14/">

	90 http://jsfiddle.net/vojtajina/js64b/14/

	91 </a>

	92 <p>

	93 Found {{filteredTestData.length}} matches, and displaying the first
	epoger 2013/10/02 16:05:59 No. :-) My hope was that filtering operations wou Show quoted text On 2013/10/02 15:23:14, bsalomon wrote: > Plans to add next/prev page for case when the # results exceeds the max? 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 c Show quoted text On 2013/10/02 16:05:59, epoger wrote: > On 2013/10/02 15:23:14, bsalomon wrote: > > Plans to add next/prev page for case when the # results exceeds the max? > > 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... Live discussion with Brian: he is happy with the current functionality.
	94 {{displayLimit}}: <br>

	95 <!-- TODO(epoger): If (displayLimit <= filteredTestData.length),

	96 modify this message to indicate that all results are shown. -->

	97 (click on the column header radio buttons to re-sort by that column)

	98 <br>

66 <table border="1">	99 <table border="1">

67 <tr>	100 <tr>

68 <th><input ng-model="sortColumn" name="sortColumnRadio" type="radio" v alue="builder">Builder</input></th>	101 <th ng-repeat="categoryName in ['resultType', 'builder', 'test', 'conf ig']">

69 <th><input ng-model="sortColumn" name="sortColumnRadio" type="radio" v alue="test">Test</input></th>	102 <input type="radio"

70 <th><input ng-model="sortColumn" name="sortColumnRadio" type="radio" v alue="config">Config</input></th>	103 name="sortColumnRadio"

71 <th><input ng-model="sortColumn" name="sortColumnRadio" type="radio" v alue="expectedHashDigest">Expected Image</input></th>	104 value="{{categoryName}}"

72 <th><input ng-model="sortColumn" name="sortColumnRadio" type="radio" v alue="actualHashDigest">Actual Image</input></th>	105 ng-checked="(sortColumn == categoryName)"

73 <!-- TODO(epoger): Add more columns, such as...	106 ng-click="sortResultsBy(categoryName)">

74 pixel diff	107 {{categoryName}}

75 notes/bugs	108 </th>

76 ignoreFailure boolean	109 <th>

77 -->	110 <input type="radio"
	epoger 2013/10/02 16:05:59 Better labeling for the "expected image" and "actu Better labeling for the "expected image" and "actual image" columns
	111 name="sortColumnRadio"

	112 value="expectedHashDigest"

	113 ng-checked="(sortColumn == 'expectedHashDigest')"

	114 ng-click="sortResultsBy('expectedHashDigest')">

	115 expected image

	116 </th>

	117 <th>

	118 <input type="radio"

	119 name="sortColumnRadio"

	120 value="actualHashDigest"

	121 ng-checked="(sortColumn == 'actualHashDigest')"

	122 ng-click="sortResultsBy('actualHashDigest')">

	123 actual image

	124 </th>

78 </tr>	125 </tr>

79 <!-- TODO(epoger): improve the column sorting, as per	126 <tr ng-repeat="result in limitedTestData">
	epoger 2013/10/02 16:05:59 When the page is first loaded, it is initially sor Show quoted text On 2013/10/02 12:54:05, JimVV wrote: > 1) It'd be nice if it was initially sorted by either builder or test. My > inclination is to go with builder, but I could go either way. 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. Show quoted text > 2) Are there plans to add diff functionality, or at least an easy way to flip > between images? Yes. Added a TODO within the UI. epoger 2013/10/02 18:04:57 Live discussion with Jim: he is happy with the cur Show quoted text On 2013/10/02 16:05:59, epoger wrote: > On 2013/10/02 12:54:05, JimVV wrote: > > 1) It'd be nice if it was initially sorted by either builder or test. My > > inclination is to go with builder, but I could go either way. > > 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 Live discussion with Jim: he is happy with the current functionality.
80 http://jsfiddle.net/vojtajina/js64b/14/ -->	127 <td>{{result.resultType}}</td>

81 <tr ng-repeat="result in testData \| filter: { resultType: showResultsOfT ype } \| orderBy: sortColumn">

82 <td>{{result.builder}}</td>	128 <td>{{result.builder}}</td>

83 <td>{{result.test}}</td>	129 <td>{{result.test}}</td>

84 <td>{{result.config}}</td>	130 <td>{{result.config}}</td>

85 <td>	131 <td>

86 <a target="_blank" href="http://chromium-skia-gm.commondatastorage.g oogleapis.com/gm/{{result.expectedHashType}}/{{result.test}}/{{result.expectedHa shDigest}}.png">	132 <a target="_blank" href="http://chromium-skia-gm.commondatastorage.g oogleapis.com/gm/{{result.expectedHashType}}/{{result.test}}/{{result.expectedHa shDigest}}.png">

87 <img width="{{imageSize}}" src="http://chromium-skia-gm.commondata storage.googleapis.com/gm/{{result.expectedHashType}}/{{result.test}}/{{result.e xpectedHashDigest}}.png"/>	133 <img width="{{imageSize}}" src="http://chromium-skia-gm.commondata storage.googleapis.com/gm/{{result.expectedHashType}}/{{result.test}}/{{result.e xpectedHashDigest}}.png"/>

88 </a>	134 </a>

89 </td>	135 </td>

90 <td>	136 <td>

91 <a target="_blank" href="http://chromium-skia-gm.commondatastorage.g oogleapis.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.actualHashDi gest}}.png">	137 <a target="_blank" href="http://chromium-skia-gm.commondatastorage.g oogleapis.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.actualHashDi gest}}.png">

92 <img width="{{imageSize}}" src="http://chromium-skia-gm.commondata storage.googleapis.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.act ualHashDigest}}.png"/>	138 <img width="{{imageSize}}" src="http://chromium-skia-gm.commondata storage.googleapis.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.act ualHashDigest}}.png"/>

93 </a>	139 </a>

94 </td>	140 </td>

95 </tr>	141 </tr>

96 </table>	142 </table>

97 </div>	143 </div>

	144 </div>

98	145

99 <!-- TODO(epoger): Can we get the base URLs (commondatastorage and	146 <!-- TODO(epoger): Can we get the base URLs (commondatastorage and

100 issues list) from	147 issues list) from

101 http://skia.googlecode.com/svn/buildbot/site_config/global_variables.json	148 http://skia.googlecode.com/svn/buildbot/site_config/global_variables.json

102 ? I tried importing the	149 ? I tried importing the

103 http://skia.googlecode.com/svn/buildbot/skia_tools.js script and using	150 http://skia.googlecode.com/svn/buildbot/skia_tools.js script and using

104 that to do so, but I got Access-Control-Allow-Origin errors.	151 that to do so, but I got Access-Control-Allow-Origin errors.

105 -->	152 -->

106	153

107 </body>	154 </body>

108 </html>	155 </html>

OLD	NEW

« gm/rebaseline_server/results.py ('K') | « gm/rebaseline_server/static/loader.js ('k') | no next file » | no next file with comments »