gm/rebaseline_server/static/view.html - Issue 24274003: Create HTTP-based GM results viewer.

Unified Diff: gm/rebaseline_server/static/view.html

Issue 24274003: Create HTTP-based GM results viewer. (Closed) Base URL: http://skia.googlecode.com/svn/trunk/

Patch Set: svn_py Created 7 years, 3 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 side-by-side diff with in-line comments

Index: gm/rebaseline_server/static/view.html

===================================================================

--- gm/rebaseline_server/static/view.html (revision 0)

+++ gm/rebaseline_server/static/view.html (revision 0)

@@ -0,0 +1,69 @@

+<!DOCTYPE html>

+<html ng-app="Loader">

+<head>

+ <title>Current GM Failures</title>

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

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

+</head>

+<body>

borenet 2013/09/25 15:09:51 For some reason, I'm really thrown off by this web

epoger 2013/09/25 16:21:18 I tried to make some adjustments, but my CSS-fu is

borenet 2013/09/25 19:28:17 SGTM

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

+ Settings:

+ <ul>

+ <li>show results of type

+ <select ng-model="resultType"

+ ng-init="resultType='failed';changeResultType()"

+ ng-change="changeResultType()">

+ <option>failed</option>

+ <option>failure-ignored</option>

+ <option>no-comparison</option>

+ </select>

+ </li>

+ <li>image size

+ <input type="text" ng-model="imageSize" ng-init="imageSize=100"

+ maxlength="4"/>

+ </li>

+ </ul>

+ <p>

+ <table border="1">

+ <tr>

+ <th ng:click="sortColumn='builder'">Builder</th>

+ <th ng:click="sortColumn='test'">Test</th>

+ <th ng:click="sortColumn='config'">Config</th>

+ <th ng:click="sortColumn='expectedHashDigest'">Expected Image</th>

+ <th ng:click="sortColumn='actualHashDigest'">Actual Image</th>

borenet 2013/09/25 15:09:51 I don't know how useful they were to other devs, b

epoger 2013/09/25 16:21:18 Oh, absolutely. I added a TODO in lamenting this

epoger 2013/09/25 18:26:33 Brian has changed my mind about this. I now think

Brian has changed my mind about this. I now think we are better off calculating pixel diffs on the server, mainly for reasons of client load/performance... if the viewer is using a phone browser, the phone might melt trying to calculate pixel diffs. We can perform them on the server side; if we see server load problems because multiple users are using the service concurrently, we should be able to amortize the work over multiple users (all users will see the same diffs, after all). In terms of how the client loads those pixel diff images... I guess the server's initial JSON response can include checksums of the diffs (similar to how it provides checksums of the expected/actual images themselves), and the client can construct an image source URL using the checksum. P.S. This does not preclude the option of loading images into a Canvas on the client later on... it may be appropriate to do that in some cases. Later. :-)

borenet 2013/09/25 19:28:17 Yeah, #2 sounds awesome, particularly if you can d

On 2013/09/25 18:26:33, epoger wrote: > On 2013/09/25 16:21:18, epoger wrote: > > On 2013/09/25 15:09:51, borenet wrote: > > > I don't know how useful they were to other devs, but I find myself missing > the > > > diff images. I'm aware that we aren't generating them any more though. > > > > Oh, absolutely. I added a TODO in lamenting this missing column. > > > > I can think of two ways of generating these pixel diffs: > > 1. Make results.py download the images themselves, calculate pixel diffs, and > > provide them to the client (perhaps as inline image data, within the JSON > file?) > > 2. Make the client download the images into Canvas elements, and then > calculate > > the pixel diffs as the user scrolls to them. This has several advantages > > (including making it possible to do nifty effects like a loupe), but due to > > security constraints requires the images to be loaded from the same domain as > > the JSON results themselves. > > > > My intent is to add a new dispatcher to server.py : if the client requests > > /images/gm/bitmap-64bitMD5/imageblur/5680959140053860741.png , fetch that file > > from under http://chromium-skia-gm.commondatastorage.googleapis.com/ and > return > > it to the client. That will allow us to work around the security constraint, > > and the client can perform Canvas operations on the fetched image data. > > Brian has changed my mind about this. I now think we are better off calculating > pixel diffs on the server, mainly for reasons of client load/performance... if > the viewer is using a phone browser, the phone might melt trying to calculate > pixel diffs. We can perform them on the server side; if we see server load > problems because multiple users are using the service concurrently, we should be > able to amortize the work over multiple users (all users will see the same > diffs, after all). > > In terms of how the client loads those pixel diff images... I guess the server's > initial JSON response can include checksums of the diffs (similar to how it > provides checksums of the expected/actual images themselves), and the client can > construct an image source URL using the checksum. > > P.S. This does not preclude the option of loading images into a Canvas on the > client later on... it may be appropriate to do that in some cases. Later. :-)

Yeah, #2 sounds awesome, particularly if you can do neat things like set thresholds and have the diff regenerate on the fly, but it will likely be slow if the client is slow or if there are lots of images.

+ </tr>

+ <!-- TODO(epoger): improve the column sorting, as per

+ http://jsfiddle.net/vojtajina/js64b/14/ -->

+ <tr ng-repeat="result in results | orderBy: sortColumn">

+ <td>{{result.builder}}</td>

+ <td>{{result.test}}</td>

+ <td>{{result.config}}</td>

+ <td>

+ <a target="_blank" href="http://chromium-skia-gm.commondatastorage.googleapis.com/gm/{{result.expectedHashType}}/{{result.test}}/{{result.expectedHashDigest}}.png">

+ <img width="{{imageSize}}" src="http://chromium-skia-gm.commondatastorage.googleapis.com/gm/{{result.expectedHashType}}/{{result.test}}/{{result.expectedHashDigest}}.png"/>

+ </a>

+ </td>

+ <td>

+ <a target="_blank" href="http://chromium-skia-gm.commondatastorage.googleapis.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.actualHashDigest}}.png">

+ <img width="{{imageSize}}" src="http://chromium-skia-gm.commondatastorage.googleapis.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.actualHashDigest}}.png"/>

+ </a>

+ </td>

+ </tr>

+ </table>

+ </div>

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

+ issues list) from

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

+ ? I tried importing the

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

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

+ -->

+</body>

+</html>

« gm/rebaseline_server/server.py ('K') | « gm/rebaseline_server/static/loader.js ('k') | gm/rebaseline_server/svn.py » ('j') | gm/rebaseline_server/svn.py » ('J')