gm/viewer/view.html - Issue 20526007: Create AJAX live-viewer of expected-vs-actual GM results

Side by Side Diff: gm/viewer/view.html

Issue 20526007: Create AJAX live-viewer of expected-vs-actual GM results (Closed) Base URL: http://skia.googlecode.com/svn/trunk/

Patch Set: Created 7 years, 4 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
(Empty)
	1 <!DOCTYPE html>

	2

	3 <html ng-app="JsonDataModule">

	4

	5 <head>

	6 <title>GM Expected-vs-Actual Results Display</title>

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

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

	9 </head>

	10

	11 <body>

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

	13

	14 Pick a platform...

	15 <select ng-model="platformPath" ng-change="changePlatformPath()">

	16 <option selected="selected">base-fake/Fake-Platform-Made-Up/base-fake</opt ion>
	Zach Reizner 2013/07/29 18:40:34 Is the the plan to change this manually every time Is the the plan to change this manually every time a platform is added/changed? epoger 2013/07/29 22:38:39 My plan is to populate this manually when I first Show quoted text On 2013/07/29 18:40:34, Zach Reizner wrote: > Is the the plan to change this manually every time a platform is added/changed? My plan is to populate this manually when I first install the file in skia-autogen, and to soon make this automatic (somehow iterate over the directories in skia-autogen). Zach Reizner 2013/07/30 13:41:13 I understand Show quoted text On 2013/07/29 22:38:39, epoger wrote: > On 2013/07/29 18:40:34, Zach Reizner wrote: > > Is the the plan to change this manually every time a platform is > added/changed? > > My plan is to populate this manually when I first install the file in > skia-autogen, and to soon make this automatic (somehow iterate over the > directories in skia-autogen). I understand
	17 <option>base-android-nexus-10/Test-Android-Nexus10-MaliT604-Arm7-Release/b ase-android-nexus-10</option>

	18 </select>

	19

	20 <p>

	21 <h2>These are NOT live results. To get live results, copy view.html and mo dule.js into

	22 <a href="https://code.google.com/p/skia-autogen/source/browse/#svn%2Fgm- actual">this</a> directory.</h2>

	23 Comparison of expected vs actual GM results for platform {{platformPath}}:

	24

	25 <ul>

	26 <li ng-repeat="resultsOfOneType in actualResults">
	Zach Reizner 2013/07/29 18:40:34 You could use a loop over rawJsonData['actual-resu You could use a loop over rawJsonData['actual-results'] here and a filter for extracting test names from image names and avoid most of the processing you do in JavaScript. Here's some code that may clarify how to do that <li ng-repeat="(resultType, resultsOfThisType) in rawResults['actual-results']"> <h3> {{ resultType }} ({{ resultsOfThisType.length }}) </h3> <table border="1"> <tr><th>Test/Config</th><th>Expected</th><th>Actual</th></tr> <tr ng-repeat="(imageName, result) in resultsOfThisType"> <td>{{ imageName }}</td> <td><a href="http://chromium-skia-gm.commondatastorage.googleapis.com/gm/{{ rawResults['expected-results'][imageName]['allowed-digests'][0][0] }}/{{ imageName\|extractTestName }}/{{ rawResults['expected-results'][imageName]['allowed-digests'][0][1] }}.png"> {{ rawResults['expected-results'][imageName]['allowed-digests'][0][1] }} </a></td> <td><a href="http://chromium-skia-gm.commondatastorage.googleapis.com/gm/{{ result[0] }}/{{ imageName\|extractTestName }}/{{ result[1] }}.png">{{ result[1] }}</a></td> </tr> </table> <p> </li> And then in your module.js: JsonDataModule.filter('extractTestName', function() { return function(input) { return input.replace(/_[^_]+\.png/, ""); }; }); epoger 2013/07/29 22:38:39 That is actually what I originally had in place, w Show quoted text On 2013/07/29 18:40:34, Zach Reizner wrote: > You could use a loop over rawJsonData['actual-results'] here and a filter for > extracting test names from image names and avoid most of the processing you do > in JavaScript. Here's some code that may clarify how to do that That is actually what I originally had in place, when the javascript just returned rawJsonResults. :-) One of the reasons that I moved away from that is that it resultsOfThisType.length doesn't work (IIRC). That's because resultsOfThisType is an Object, not an Array. My interim step that made that work was to write my own filter that transformed an Object (i.e. dictionary) into an array of the dictionary values, and then display the length of that array. That got me more into processing the JSON in the javascript... which led me to where the code is now. And I think it's clearer this way anyway (keeping the presentation logic simpler, and putting the processing in Javascript where it is easier to read anyway) Is there a compelling reason to put the processing logic within the HTML instead of the Javascript? (I'm an AJAX and AngularJS newbie, so I may be violating some Rule of the Universe here, I dunno) Zach Reizner 2013/07/30 13:41:13 I see what you mean about too much logic inside th Show quoted text On 2013/07/29 22:38:39, epoger wrote: > On 2013/07/29 18:40:34, Zach Reizner wrote: > > You could use a loop over rawJsonData['actual-results'] here and a filter for > > extracting test names from image names and avoid most of the processing you do > > in JavaScript. Here's some code that may clarify how to do that > > That is actually what I originally had in place, when the javascript just > returned rawJsonResults. :-) > > One of the reasons that I moved away from that is that it > resultsOfThisType.length doesn't work (IIRC). That's because resultsOfThisType > is an Object, not an Array. > > My interim step that made that work was to write my own filter that transformed > an Object (i.e. dictionary) into an array of the dictionary values, and then > display the length of that array. > > That got me more into processing the JSON in the javascript... which led me to > where the code is now. And I think it's clearer this way anyway (keeping the > presentation logic simpler, and putting the processing in Javascript where it is > easier to read anyway) > > Is there a compelling reason to put the processing logic within the HTML instead > of the Javascript? (I'm an AJAX and AngularJS newbie, so I may be violating > some Rule of the Universe here, I dunno) I see what you mean about too much logic inside the HTML. Halfway through writing that snippet, I broke a personal record on most subscripts in a single statement. In general, the AngularJS rule of the universe is to not fight the framework because you'll end up regretting it. In this situation, I think the most AngularJS friendly thing to do would be to process the rawJsonData in JavaScript to a point where the rendering logic is straightforward. That implies a JavaScript object like: { "failed": [ { "test":"bigmatrix", "config": "gpu", "expected_hash_value": "3711158016938030742", "actual_hash_value": "10894408024079689926", }, ... ], "no-comparison": [ { "test":"alphagradients", "config": "565", "actual_hash_value": "6493698615497174672", }, ... ], ... } This is enough to: - iterate the results types and get their names - get the number of results using the length of the array - print a row of test/config (Something like this "{{ result.test }}_{{ result.config }}.png"), expected hash link, and actual hash link - reconstruct the url for those links: http://chromium-skia-gm.commondatastorage.googleapis.com/gm/bitmap-64bitMD5/{{ result.test }}/{{ result.expected_hash_value }}.png epoger 2013/07/30 18:54:27 I suppose "straightforward" is a sliding scale. :- Show quoted text On 2013/07/30 13:41:13, Zach Reizner wrote: > In general, the AngularJS rule of the universe is to not fight the framework > because you'll end up regretting it. In this situation, I think the most > AngularJS friendly thing to do would be to process the rawJsonData in JavaScript > to a point where the rendering logic is straightforward. I suppose "straightforward" is a sliding scale. :-) I'm not sure if it's cleaner to construct the URL in Javascript or the frontend, but I moved it into the frontend (following your example), it works fine, and seems fairly clean. Whaddaya think? (for easiest review, see diffs between patchset 4 and patchset 6)
	27 <h3>

	28 {{resultsOfOneType['resultType']}}

	29 ({{resultsOfOneType['resultsOfThisType'].length}})

	30 </h3>

	31 <table border="1">

	32 <tr><th>Test/Config</th><th>Expected</th><th>Actual</th></tr>

	33 <tr ng-repeat="result in resultsOfOneType['resultsOfThisType']">

	34 <td>{{result['imageName']}}</td>

	35 <td><a href="{{expectedResultsByImageName[result['imageName']]['ur l']}}">
	epoger 2013/07/29 22:38:39 Regarding your suggestion to use a div popup when Regarding your suggestion to use a div popup when the user clicks on this link: my thinking is that the most common use case will be to open expected and actual images as new tabs (by right-clicking on them), so that the user can toggle back and forth to better notice changes between the images. I see what you're saying, though, in that if the user left-clicks on the links, they will have to reuse the dropdown box if/when they return. Can you think of a good middle ground that handles both cases well? Zach Reizner 2013/07/30 13:41:13 You can make the link always popup in a new tab. I Show quoted text On 2013/07/29 22:38:39, epoger wrote: > Regarding your suggestion to use a div popup when the user clicks on this link: > my thinking is that the most common use case will be to open expected and actual > images as new tabs (by right-clicking on them), so that the user can toggle back > and forth to better notice changes between the images. > > I see what you're saying, though, in that if the user left-clicks on the links, > they will have to reuse the dropdown box if/when they return. > > Can you think of a good middle ground that handles both cases well? You can make the link always popup in a new tab. I always forget how, so here's a reference in case you forgot too: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target epoger 2013/07/30 18:54:27 Seems reasonable. I added target="_blank", so it Show quoted text On 2013/07/30 13:41:13, Zach Reizner wrote: > You can make the link always popup in a new tab. I always forget how, so here's > a reference in case you forgot too: > https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target Seems reasonable. I added target="_blank", so it opens in a new tab (or window, depending on browser type and user settings!) by default, but the user can still right-click to determine where it opens.
	36 {{expectedResultsByImageName[result['imageName']]['hashValue'] }}

	37 </a></td>

	38 <td><a href="{{result['url']}}">{{result['hashValue']}}</a></td>

	39 </tr>

	40 </table>

	41 <p>

	42 </li>

	43 </ul>

	44 </div>

	45

	46 </body>

	47 </html>

OLD	NEW

« gm/viewer/module.js ('K') | « gm/viewer/module.js ('k') | no next file » | no next file with comments »