| OLD | NEW |
| (Empty) |
| 1 'use strict'; | |
| 2 | |
| 3 /** | |
| 4 * TODO (stephana@): This is still work in progress. | |
| 5 * It does not offer the same functionality as the current version, but | |
| 6 * will serve as the starting point for a new backend. | |
| 7 * It works with the current backend, but does not support rebaselining. | |
| 8 */ | |
| 9 | |
| 10 /* | |
| 11 * Wrap everything into an IIFE to not polute the global namespace. | |
| 12 */ | |
| 13 (function () { | |
| 14 | |
| 15 // Declare app level module which contains everything of the current app. | |
| 16 // ui.bootstrap refers to directives defined in the AngularJS Bootstrap | |
| 17 // UI package (http://angular-ui.github.io/bootstrap/). | |
| 18 var app = angular.module('rbtApp', ['ngRoute', 'ui.bootstrap']); | |
| 19 | |
| 20 // Configure the different within app views. | |
| 21 app.config(['$routeProvider', function($routeProvider) { | |
| 22 $routeProvider.when('/', {templateUrl: 'partials/index-view.html', | |
| 23 controller: 'IndexCtrl'}); | |
| 24 $routeProvider.when('/view', {templateUrl: 'partials/rebaseline-view.html', | |
| 25 controller: 'RebaselineCrtrl'}); | |
| 26 $routeProvider.otherwise({redirectTo: '/'}); | |
| 27 }]); | |
| 28 | |
| 29 | |
| 30 // TODO (stephana): Some of these constants are 'gm' specific. In the | |
| 31 // next iteration we need to remove those as we move the more generic | |
| 32 // 'dm' testing tool. | |
| 33 // | |
| 34 // Shared constants used here and in the markup. These are exported when | |
| 35 // when used by a controller. | |
| 36 var c = { | |
| 37 // Define different view states as we load the data. | |
| 38 ST_LOADING: 1, | |
| 39 ST_STILL_LOADING: 2, | |
| 40 ST_READY: 3, | |
| 41 | |
| 42 // These column types are used by the Column class. | |
| 43 COL_T_FILTER: 'filter', | |
| 44 COL_T_IMAGE: 'image', | |
| 45 COL_T_REGULAR: 'regular', | |
| 46 | |
| 47 // Request parameters used to select between subsets of results. | |
| 48 RESULTS_ALL: 'all', | |
| 49 RESULTS_FAILURES: 'failures', | |
| 50 | |
| 51 // Filter types are used by the Column class. | |
| 52 FILTER_FREE_FORM: 'free_form', | |
| 53 FILTER_CHECK_BOX: 'checkbox', | |
| 54 | |
| 55 // Columns either provided by the backend response or added in code. | |
| 56 // TODO (stephana): This should go away once we switch to 'dm'. | |
| 57 COL_BUGS: 'bugs', | |
| 58 COL_IGNORE_FAILURE: 'ignore-failure', | |
| 59 COL_REVIEWED_BY_HUMANS: 'reviewed-by-human', | |
| 60 | |
| 61 // Defines the order in which image columns appear. | |
| 62 // TODO (stephana@): needs to be driven by backend data. | |
| 63 IMG_COL_ORDER: [ | |
| 64 { | |
| 65 key: 'imageA', | |
| 66 urlField: ['imageAUrl'] | |
| 67 }, | |
| 68 { | |
| 69 key: 'imageB', | |
| 70 urlField: ['imageBUrl'] | |
| 71 }, | |
| 72 { | |
| 73 key: 'whiteDiffs', | |
| 74 urlField: ['differenceData', 'whiteDiffUrl'], | |
| 75 percentField: ['differenceData', 'percentDifferingPixels'], | |
| 76 valueField: ['differenceData', 'numDifferingPixels'] | |
| 77 }, | |
| 78 { | |
| 79 key: 'diffs', | |
| 80 urlField: ['differenceData', 'diffUrl'], | |
| 81 percentField: ['differenceData', 'perceptualDifference'], | |
| 82 valueField: ['differenceData', 'maxDiffPerChannel'] | |
| 83 } | |
| 84 ], | |
| 85 | |
| 86 // Choice of availabe image size selection. | |
| 87 IMAGE_SIZES: [ | |
| 88 100, | |
| 89 200, | |
| 90 400 | |
| 91 ], | |
| 92 | |
| 93 // Choice of available number of records selection. | |
| 94 MAX_RECORDS: [ | |
| 95 '100', | |
| 96 '200', | |
| 97 '300' | |
| 98 ] | |
| 99 }; // end constants | |
| 100 | |
| 101 /* | |
| 102 * Index Controller | |
| 103 */ | |
| 104 // TODO (stephana): Remove $timeout since it only simulates loading delay. | |
| 105 app.controller('IndexCtrl', ['$scope', '$timeout', 'dataService', | |
| 106 function($scope, $timeout, dataService) { | |
| 107 // init the scope | |
| 108 $scope.c = c; | |
| 109 $scope.state = c.ST_LOADING; | |
| 110 $scope.qStr = dataService.getQueryString; | |
| 111 | |
| 112 // TODO (stephana): Remove and replace with index data generated by the | |
| 113 // backend to reflect the current "known" image sets to compare. | |
| 114 $scope.allSKPs = [ | |
| 115 { | |
| 116 params: { | |
| 117 setBSection: 'actual-results', | |
| 118 setASection: 'expected-results', | |
| 119 setBDir: 'gs://chromium-skia-skp-summaries/' + | |
| 120 'Test-Mac10.8-MacMini4.1-GeForce320M-x86_64-Debug', | |
| 121 setADir: 'repo:expectations/skp/' + | |
| 122 'Test-Mac10.8-MacMini4.1-GeForce320M-x86_64-Debug' | |
| 123 }, | |
| 124 title: 'expected vs actuals on ' + | |
| 125 'Test-Mac10.8-MacMini4.1-GeForce320M-x86_64-Debug' | |
| 126 }, | |
| 127 { | |
| 128 params: { | |
| 129 setBSection: 'actual-results', | |
| 130 setASection: 'expected-results', | |
| 131 setBDir: 'gs://chromium-skia-skp-summaries/' + | |
| 132 'Test-Ubuntu12-ShuttleA-GTX660-x86-Release', | |
| 133 setADir: 'repo:expectations/skp/'+ | |
| 134 'Test-Ubuntu12-ShuttleA-GTX660-x86-Release' | |
| 135 }, | |
| 136 title: 'expected vs actuals on Test-Ubuntu12-ShuttleA-GTX660-x86-Release' | |
| 137 }, | |
| 138 { | |
| 139 params: { | |
| 140 setBSection: 'actual-results', | |
| 141 setASection: 'actual-results', | |
| 142 setBDir: 'gs://chromium-skia-skp-summaries/' + | |
| 143 'Test-Ubuntu12-ShuttleA-GTX660-x86-Release', | |
| 144 setADir: 'gs://chromium-skia-skp-summaries/' + | |
| 145 'Test-Mac10.8-MacMini4.1-GeForce320M-x86_64-Debug' | |
| 146 }, | |
| 147 title: 'Actuals on Test-Mac10.8-MacMini4.1-GeForce320M-x86_64-Debug ' + | |
| 148 'vs Test-Ubuntu12-ShuttleA-GTX660-x86-Release' | |
| 149 } | |
| 150 ]; | |
| 151 | |
| 152 // TODO (stephana): Remove this once we load index data from the server. | |
| 153 $timeout(function () { | |
| 154 $scope.state = c.ST_READY; | |
| 155 }); | |
| 156 }]); | |
| 157 | |
| 158 /* | |
| 159 * RebaselineCtrl | |
| 160 * Controls the main comparison view. | |
| 161 * | |
| 162 * @param {service} dataService Service that encapsulates functions to | |
| 163 * retrieve data from the backend. | |
| 164 * | |
| 165 */ | |
| 166 app.controller('RebaselineCrtrl', ['$scope', '$timeout', 'dataService', | |
| 167 function($scope, $timeout, dataService) { | |
| 168 // determine which to request | |
| 169 // TODO (stephana): This should be extracted from the query parameters. | |
| 170 var target = c.TARGET_GM; | |
| 171 | |
| 172 // process the rquest arguments | |
| 173 // TODO (stephana): This should be determined from the query parameters. | |
| 174 var loadFn = dataService.loadAll; | |
| 175 | |
| 176 // controller state variables | |
| 177 var allData = null; | |
| 178 var filterFuncs = null; | |
| 179 var currentData = null; | |
| 180 var selectedData = null; | |
| 181 | |
| 182 // Index of the column that should provide the sort key | |
| 183 var sortByIdx = 0; | |
| 184 | |
| 185 // Sort in asending (true) or descending (false) order | |
| 186 var sortOrderAsc = true; | |
| 187 | |
| 188 // Array of functions for each column used for comparison during sort. | |
| 189 var compareFunctions = null; | |
| 190 | |
| 191 // Variables to track load and render times | |
| 192 var startTime; | |
| 193 var loadStartTime; | |
| 194 | |
| 195 | |
| 196 /** Load the data from the backend **/ | |
| 197 loadStartTime = Date.now(); | |
| 198 function loadData() { | |
| 199 loadFn().then( | |
| 200 function (serverData) { | |
| 201 $scope.header = serverData.header; | |
| 202 $scope.loadTime = (Date.now() - loadStartTime)/1000; | |
| 203 | |
| 204 // keep polling if the data are not ready yet | |
| 205 if ($scope.header.resultsStillLoading) { | |
| 206 $scope.state = c.ST_STILL_LOADING; | |
| 207 $timeout(loadData, 5000); | |
| 208 return; | |
| 209 } | |
| 210 | |
| 211 // get the filter colunms and an array to hold filter data by user | |
| 212 var fcol = getFilterColumns(serverData); | |
| 213 $scope.filterCols = fcol[0]; | |
| 214 $scope.filterVals = fcol[1]; | |
| 215 | |
| 216 // Add extra columns and retrieve the image columns | |
| 217 var otherCols = [ Column.regular(c.COL_BUGS) ]; | |
| 218 var imageCols = getImageColumns(serverData); | |
| 219 | |
| 220 // Concat to get all columns | |
| 221 // NOTE: The order is important since filters are rendered first, | |
| 222 // followed by regular columns and images | |
| 223 $scope.allCols = $scope.filterCols.concat(otherCols, imageCols); | |
| 224 | |
| 225 // Pre-process the data and get the filter functions. | |
| 226 var dataFilters = getDataAndFilters(serverData, $scope.filterCols, | |
| 227 otherCols, imageCols); | |
| 228 allData = dataFilters[0]; | |
| 229 filterFuncs = dataFilters[1]; | |
| 230 | |
| 231 // Get regular columns (== not image columns) | |
| 232 var regularCols = $scope.filterCols.concat(otherCols); | |
| 233 | |
| 234 // Get the compare functions for regular and image columns. These | |
| 235 // are then used to sort by the respective columns. | |
| 236 compareFunctions = DataRow.getCompareFunctions(regularCols, | |
| 237 imageCols); | |
| 238 | |
| 239 // Filter and sort the results to get them ready for rendering | |
| 240 updateResults(); | |
| 241 | |
| 242 // Data are ready for display | |
| 243 $scope.state = c.ST_READY; | |
| 244 }, | |
| 245 function (httpErrResponse) { | |
| 246 console.log(httpErrResponse); | |
| 247 }); | |
| 248 }; | |
| 249 | |
| 250 /* | |
| 251 * updateResults | |
| 252 * Central render function. Everytime settings/filters/etc. changed | |
| 253 * this function is called to filter, sort and splice the data. | |
| 254 * | |
| 255 * NOTE (stephana): There is room for improvement here: before filtering | |
| 256 * and sorting we could check if this is necessary. But this has not been | |
| 257 * a bottleneck so far. | |
| 258 */ | |
| 259 function updateResults () { | |
| 260 // run digest before we update the results. This allows | |
| 261 // updateResults to be called from functions trigger by ngChange | |
| 262 $scope.updating = true; | |
| 263 startTime = Date.now(); | |
| 264 | |
| 265 // delay by one render cycle so it can be called via ng-change | |
| 266 $timeout(function() { | |
| 267 // filter data | |
| 268 selectedData = filterData(allData, filterFuncs, $scope.filterVals); | |
| 269 | |
| 270 // sort the selected data. | |
| 271 sortData(selectedData, compareFunctions, sortByIdx, sortOrderAsc); | |
| 272 | |
| 273 // only conside the elements that we really need | |
| 274 var nRecords = $scope.settings.nRecords; | |
| 275 currentData = selectedData.slice(0, parseInt(nRecords)); | |
| 276 | |
| 277 DataRow.setRowspanValues(currentData, $scope.mergeIdenticalRows); | |
| 278 | |
| 279 // update the scope with relevant data for rendering. | |
| 280 $scope.data = currentData; | |
| 281 $scope.totalRecords = allData.length; | |
| 282 $scope.showingRecords = currentData.length; | |
| 283 $scope.selectedRecords = selectedData.length; | |
| 284 $scope.updating = false; | |
| 285 | |
| 286 // measure the filter time and total render time (via timeout). | |
| 287 $scope.filterTime = Date.now() - startTime; | |
| 288 $timeout(function() { | |
| 289 $scope.renderTime = Date.now() - startTime; | |
| 290 }); | |
| 291 }); | |
| 292 }; | |
| 293 | |
| 294 /** | |
| 295 * Generate the style value to set the width of images. | |
| 296 * | |
| 297 * @param {Column} col Column that we are trying to render. | |
| 298 * @param {int} paddingPx Number of padding pixels. | |
| 299 * @param {string} defaultVal Default value if not an image column. | |
| 300 * | |
| 301 * @return {string} Value to be used in ng-style element to set the width | |
| 302 * of a image column. | |
| 303 **/ | |
| 304 $scope.getImageWidthStyle = function (col, paddingPx, defaultVal) { | |
| 305 var result = (col.ctype === c.COL_T_IMAGE) ? | |
| 306 ($scope.imageSize + paddingPx + 'px') : defaultVal; | |
| 307 return result; | |
| 308 }; | |
| 309 | |
| 310 /** | |
| 311 * Sets the column by which to sort the data. If called for the | |
| 312 * currently sorted column it will cause the sort to toggle between | |
| 313 * ascending and descending. | |
| 314 * | |
| 315 * @param {int} colIdx Index of the column to use for sorting. | |
| 316 **/ | |
| 317 $scope.sortBy = function (colIdx) { | |
| 318 if (sortByIdx === colIdx) { | |
| 319 sortOrderAsc = !sortOrderAsc; | |
| 320 } else { | |
| 321 sortByIdx = colIdx; | |
| 322 sortOrderAsc = true; | |
| 323 } | |
| 324 updateResults(); | |
| 325 }; | |
| 326 | |
| 327 /** | |
| 328 * Helper function to generate a CSS class indicating whether this column | |
| 329 * is the sort key. If it is a class name with the sort direction (Asc/Desc)
is | |
| 330 * return otherwise the default value is returned. In markup we use this | |
| 331 * to display (or not display) an arrow next to the column name. | |
| 332 * | |
| 333 * @param {string} prefix Prefix of the classname to be generated. | |
| 334 * @param {int} idx Index of the target column. | |
| 335 * @param {string} defaultVal Value to return if current column is not used | |
| 336 * for sorting. | |
| 337 * | |
| 338 * @return {string} CSS class name that a combination of the prefix and | |
| 339 * direction indicator ('Asc' or 'Desc') if the column is | |
| 340 * used for sorting. Otherwise the defaultVal is returned. | |
| 341 **/ | |
| 342 $scope.getSortedClass = function (prefix, idx, defaultVal) { | |
| 343 if (idx === sortByIdx) { | |
| 344 return prefix + ((sortOrderAsc) ? 'Asc' : 'Desc'); | |
| 345 } | |
| 346 | |
| 347 return defaultVal; | |
| 348 }; | |
| 349 | |
| 350 /** | |
| 351 * Checkbox to merge identical records has change. Force an update. | |
| 352 **/ | |
| 353 $scope.mergeRowsChanged = function () { | |
| 354 updateResults(); | |
| 355 } | |
| 356 | |
| 357 /** | |
| 358 * Max number of records to display has changed. Force an update. | |
| 359 **/ | |
| 360 $scope.maxRecordsChanged = function () { | |
| 361 updateResults(); | |
| 362 }; | |
| 363 | |
| 364 /** | |
| 365 * Filter settings changed. Force an update. | |
| 366 **/ | |
| 367 $scope.filtersChanged = function () { | |
| 368 updateResults(); | |
| 369 }; | |
| 370 | |
| 371 /** | |
| 372 * Sets all possible values of the specified values to the given value. | |
| 373 * That means all checkboxes are eiter selected or unselected. | |
| 374 * Then force an update. | |
| 375 * | |
| 376 * @param {int} idx Index of the target filter column. | |
| 377 * @param {boolean} val Value to set the filter values to. | |
| 378 * | |
| 379 **/ | |
| 380 $scope.setFilterAll = function (idx, val) { | |
| 381 for(var i=0, len=$scope.filterVals[idx].length; i<len; i++) { | |
| 382 $scope.filterVals[idx][i] = val; | |
| 383 } | |
| 384 updateResults(); | |
| 385 }; | |
| 386 | |
| 387 /** | |
| 388 * Toggle the values of a filter. This toggles all values in a | |
| 389 * filter. | |
| 390 * | |
| 391 * @param {int} idx Index of the target filter column. | |
| 392 **/ | |
| 393 $scope.setFilterToggle = function (idx) { | |
| 394 for(var i=0, len=$scope.filterVals[idx].length; i<len; i++) { | |
| 395 $scope.filterVals[idx][i] = !$scope.filterVals[idx][i]; | |
| 396 } | |
| 397 updateResults(); | |
| 398 }; | |
| 399 | |
| 400 // **************************************** | |
| 401 // Initialize the scope. | |
| 402 // **************************************** | |
| 403 | |
| 404 // Inject the constants into the scope and set the initial state. | |
| 405 $scope.c = c; | |
| 406 $scope.state = c.ST_LOADING; | |
| 407 | |
| 408 // Initial settings | |
| 409 $scope.settings = { | |
| 410 showThumbnails: true, | |
| 411 imageSize: c.IMAGE_SIZES[0], | |
| 412 nRecords: c.MAX_RECORDS[0], | |
| 413 mergeIdenticalRows: true | |
| 414 }; | |
| 415 | |
| 416 // Initial values for filters set in loadData() | |
| 417 $scope.filterVals = []; | |
| 418 | |
| 419 // Information about records - set in loadData() | |
| 420 $scope.totalRecords = 0; | |
| 421 $scope.showingRecords = 0; | |
| 422 $scope.updating = false; | |
| 423 | |
| 424 // Trigger the data loading. | |
| 425 loadData(); | |
| 426 | |
| 427 }]); | |
| 428 | |
| 429 // data structs to interface with markup and backend | |
| 430 /** | |
| 431 * Models a column. It aggregates attributes of all | |
| 432 * columns types. Some might be empty. See convenience | |
| 433 * factory methods below for different column types. | |
| 434 * | |
| 435 * @param {string} key Uniquely identifies this columns | |
| 436 * @param {string} ctype Type of columns. Use COL_* constants. | |
| 437 * @param {string} ctitle Human readable title of the column. | |
| 438 * @param {string} ftype Filter type. Use FILTER_* constants. | |
| 439 * @param {FilterOpt[]} foptions Filter options. For 'checkbox' filters this | |
| 440 is used to render all the checkboxes. | |
| 441 For freeform filters this is a list of all | |
| 442 available values. | |
| 443 * @param {string} baseUrl Baseurl for image columns. All URLs are relative | |
| 444 to this. | |
| 445 * | |
| 446 * @return {Column} Instance of the Column class. | |
| 447 **/ | |
| 448 function Column(key, ctype, ctitle, ftype, foptions, baseUrl) { | |
| 449 this.key = key; | |
| 450 this.ctype = ctype; | |
| 451 this.ctitle = ctitle; | |
| 452 this.ftype = ftype; | |
| 453 this.foptions = foptions; | |
| 454 this.baseUrl = baseUrl; | |
| 455 this.foptionsArr = []; | |
| 456 | |
| 457 // get the array of filter options for lookup in indexOfOptVal | |
| 458 if (this.foptions) { | |
| 459 for(var i=0, len=foptions.length; i<len; i++) { | |
| 460 this.foptionsArr.push(this.foptions[i].value); | |
| 461 } | |
| 462 } | |
| 463 } | |
| 464 | |
| 465 /** | |
| 466 * Find the index of an value in a column with a fixed set | |
| 467 * of options. | |
| 468 * | |
| 469 * @param {string} optVal Value of the column. | |
| 470 * | |
| 471 * @return {int} Index of optVal in this column. | |
| 472 **/ | |
| 473 Column.prototype.indexOfOptVal = function (optVal) { | |
| 474 return this.foptionsArr.indexOf(optVal); | |
| 475 }; | |
| 476 | |
| 477 /** | |
| 478 * Set filter options for this column. | |
| 479 * | |
| 480 * @param {FilterOpt[]} foptions Possible values for this column. | |
| 481 **/ | |
| 482 Column.prototype.setFilterOptions = function (foptions) { | |
| 483 this.foptions = foptions; | |
| 484 }; | |
| 485 | |
| 486 /** | |
| 487 * Factory function to create a filter column. Same args as Column() | |
| 488 **/ | |
| 489 Column.filter = function(key, ctitle, ftype, foptions) { | |
| 490 return new Column(key, c.COL_T_FILTER, ctitle || key, ftype, foptions); | |
| 491 } | |
| 492 | |
| 493 /** | |
| 494 * Factory function to create an image column. Same args as Column() | |
| 495 **/ | |
| 496 Column.image = function (key, ctitle, baseUrl) { | |
| 497 return new Column(key, c.COL_T_IMAGE, ctitle || key, null, null, baseUrl); | |
| 498 }; | |
| 499 | |
| 500 /** | |
| 501 * Factory function to create a regular column. Same args as Column() | |
| 502 **/ | |
| 503 Column.regular = function (key, ctitle) { | |
| 504 return new Column(key, c.COL_T_REGULAR, ctitle || key); | |
| 505 }; | |
| 506 | |
| 507 /** | |
| 508 * Helper class to wrap a single option in a filter. | |
| 509 * | |
| 510 * @param {string} value Option value. | |
| 511 * @param {int} count Number of instances of this option in the dataset. | |
| 512 * | |
| 513 * @return {} Instance of FiltertOpt | |
| 514 **/ | |
| 515 function FilterOpt(value, count) { | |
| 516 this.value = value; | |
| 517 this.count = count; | |
| 518 } | |
| 519 | |
| 520 /** | |
| 521 * Container for a single row in the dataset. | |
| 522 * | |
| 523 * @param {int} rowspan Number of rows (including this and following rows) | |
| 524 that have identical values. | |
| 525 * @param {string[]} dataCols Values of the respective columns (combination | |
| 526 of filter and regular columns) | |
| 527 * @param {ImgVal[]} imageCols Image meta data for the image columns. | |
| 528 * | |
| 529 * @return {DataRow} Instance of DataRow. | |
| 530 **/ | |
| 531 function DataRow(rowspan, dataCols, imageCols) { | |
| 532 this.rowspan = rowspan; | |
| 533 this.dataCols = dataCols; | |
| 534 this.imageCols = imageCols; | |
| 535 } | |
| 536 | |
| 537 /** | |
| 538 * Gets the comparator functions for the columns in this dataset. | |
| 539 * The comparators are then used to sort the dataset by the respective | |
| 540 * column. | |
| 541 * | |
| 542 * @param {Column[]} dataCols Data columns (= non-image columns) | |
| 543 * @param {Column[]} imgCols Image columns. | |
| 544 * | |
| 545 * @return {Function[]} Array of functions that can be used to sort by the | |
| 546 * respective column. | |
| 547 **/ | |
| 548 DataRow.getCompareFunctions = function (dataCols, imgCols) { | |
| 549 var result = []; | |
| 550 for(var i=0, len=dataCols.length; i<len; i++) { | |
| 551 result.push(( function (col, idx) { | |
| 552 return function (a, b) { | |
| 553 return (a.dataCols[idx] < b.dataCols[idx]) ? -1 : | |
| 554 ((a.dataCols[idx] === b.dataCols[idx]) ? 0 : 1); | |
| 555 }; | |
| 556 }(dataCols[i], i) )); | |
| 557 } | |
| 558 | |
| 559 for(var i=0, len=imgCols.length; i<len; i++) { | |
| 560 result.push((function (col, idx) { | |
| 561 return function (a,b) { | |
| 562 var aVal = a.imageCols[idx].percent; | |
| 563 var bVal = b.imageCols[idx].percent; | |
| 564 | |
| 565 return (aVal < bVal) ? -1 : ((aVal === bVal) ? 0 : 1); | |
| 566 }; | |
| 567 }(imgCols[i], i) )); | |
| 568 } | |
| 569 | |
| 570 return result; | |
| 571 }; | |
| 572 | |
| 573 /** | |
| 574 * Set the rowspan values of a given array of DataRow instances. | |
| 575 * | |
| 576 * @param {DataRow[]} data Dataset in desired order (after sorting). | |
| 577 * @param {mergeRows} mergeRows Indicate whether to sort | |
| 578 **/ | |
| 579 DataRow.setRowspanValues = function (data, mergeRows) { | |
| 580 var curIdx, rowspan, cur; | |
| 581 if (mergeRows) { | |
| 582 for(var i=0, len=data.length; i<len;) { | |
| 583 curIdx = i; | |
| 584 cur = data[i]; | |
| 585 rowspan = 1; | |
| 586 for(i++; ((i<len) && (data[i].dataCols === cur.dataCols)); i++) { | |
| 587 rowspan++; | |
| 588 data[i].rowspan=0; | |
| 589 } | |
| 590 data[curIdx].rowspan = rowspan; | |
| 591 } | |
| 592 } else { | |
| 593 for(var i=0, len=data.length; i<len; i++) { | |
| 594 data[i].rowspan = 1; | |
| 595 } | |
| 596 } | |
| 597 }; | |
| 598 | |
| 599 /** | |
| 600 * Wrapper class for image related data. | |
| 601 * | |
| 602 * @param {string} url Relative Url of the image or null if not available. | |
| 603 * @param {float} percent Percent of pixels that are differing. | |
| 604 * @param {int} value Absolute number of pixes differing. | |
| 605 * | |
| 606 * @return {ImgVal} Instance of ImgVal. | |
| 607 **/ | |
| 608 function ImgVal(url, percent, value) { | |
| 609 this.url = url; | |
| 610 this.percent = percent; | |
| 611 this.value = value; | |
| 612 } | |
| 613 | |
| 614 /** | |
| 615 * Extracts the filter columns from the JSON response of the server. | |
| 616 * | |
| 617 * @param {object} data Server response. | |
| 618 * | |
| 619 * @return {Column[]} List of filter columns as described in 'header' field. | |
| 620 **/ | |
| 621 function getFilterColumns(data) { | |
| 622 var result = []; | |
| 623 var vals = []; | |
| 624 var colOrder = data.extraColumnOrder; | |
| 625 var colHeaders = data.extraColumnHeaders; | |
| 626 var fopts, optVals, val; | |
| 627 | |
| 628 for(var i=0, len=colOrder.length; i<len; i++) { | |
| 629 if (colHeaders[colOrder[i]].isFilterable) { | |
| 630 if (colHeaders[colOrder[i]].useFreeformFilter) { | |
| 631 result.push(Column.filter(colOrder[i], | |
| 632 colHeaders[colOrder[i]].headerText, | |
| 633 c.FILTER_FREE_FORM)); | |
| 634 vals.push(''); | |
| 635 } | |
| 636 else { | |
| 637 fopts = []; | |
| 638 optVals = []; | |
| 639 | |
| 640 // extract the different options for this column | |
| 641 for(var j=0, jlen=colHeaders[colOrder[i]].valuesAndCounts.length; | |
| 642 j<jlen; j++) { | |
| 643 val = colHeaders[colOrder[i]].valuesAndCounts[j]; | |
| 644 fopts.push(new FilterOpt(val[0], val[1])); | |
| 645 optVals.push(false); | |
| 646 } | |
| 647 | |
| 648 // ad the column and values | |
| 649 result.push(Column.filter(colOrder[i], | |
| 650 colHeaders[colOrder[i]].headerText, | |
| 651 c.FILTER_CHECK_BOX, | |
| 652 fopts)); | |
| 653 vals.push(optVals); | |
| 654 } | |
| 655 } | |
| 656 } | |
| 657 | |
| 658 return [result, vals]; | |
| 659 } | |
| 660 | |
| 661 /** | |
| 662 * Extracts the image columns from the JSON response of the server. | |
| 663 * | |
| 664 * @param {object} data Server response. | |
| 665 * | |
| 666 * @return {Column[]} List of images columns as described in 'header' field. | |
| 667 **/ | |
| 668 function getImageColumns(data) { | |
| 669 var CO = c.IMG_COL_ORDER; | |
| 670 var imgSet; | |
| 671 var result = []; | |
| 672 for(var i=0, len=CO.length; i<len; i++) { | |
| 673 imgSet = data.imageSets[CO[i].key]; | |
| 674 result.push(Column.image(CO[i].key, | |
| 675 imgSet.description, | |
| 676 ensureTrailingSlash(imgSet.baseUrl))); | |
| 677 } | |
| 678 return result; | |
| 679 } | |
| 680 | |
| 681 /** | |
| 682 * Make sure Url has a trailing '/'. | |
| 683 * | |
| 684 * @param {string} url Base url. | |
| 685 * @return {string} Same url with a trailing '/' or same as input if it | |
| 686 already contained '/'. | |
| 687 **/ | |
| 688 function ensureTrailingSlash(url) { | |
| 689 var result = url.trim(); | |
| 690 | |
| 691 // TODO: remove !!! | |
| 692 result = fixUrl(url); | |
| 693 if (result[result.length-1] !== '/') { | |
| 694 result += '/'; | |
| 695 } | |
| 696 return result; | |
| 697 } | |
| 698 | |
| 699 // TODO: remove. The backend should provide absoute URLs | |
| 700 function fixUrl(url) { | |
| 701 url = url.trim(); | |
| 702 if ('http' === url.substr(0, 4)) { | |
| 703 return url; | |
| 704 } | |
| 705 | |
| 706 var idx = url.indexOf('static'); | |
| 707 if (idx != -1) { | |
| 708 return '/' + url.substr(idx); | |
| 709 } | |
| 710 | |
| 711 return url; | |
| 712 }; | |
| 713 | |
| 714 /** | |
| 715 * Processes that data and returns filter functions. | |
| 716 * | |
| 717 * @param {object} Server response. | |
| 718 * @param {Column[]} filterCols Filter columns. | |
| 719 * @param {Column[]} otherCols Columns that are neither filters nor images. | |
| 720 * @param {Column[]} imageCols Image columns. | |
| 721 * | |
| 722 * @return {[]} Returns a pair [dataRows, filterFunctions] where: | |
| 723 * - dataRows is an array of DataRow instances. | |
| 724 * - filterFunctions is an array of functions that can be used to | |
| 725 * filter the column at the corresponding index. | |
| 726 * | |
| 727 **/ | |
| 728 function getDataAndFilters(data, filterCols, otherCols, imageCols) { | |
| 729 var el; | |
| 730 var result = []; | |
| 731 var lookupIndices = []; | |
| 732 var indexerFuncs = []; | |
| 733 var temp; | |
| 734 | |
| 735 // initialize the lookupIndices | |
| 736 var filterFuncs = initIndices(filterCols, lookupIndices, indexerFuncs); | |
| 737 | |
| 738 // iterate over the data and get the rows | |
| 739 for(var i=0, len=data.imagePairs.length; i<len; i++) { | |
| 740 el = data.imagePairs[i]; | |
| 741 temp = new DataRow(1, getColValues(el, filterCols, otherCols), | |
| 742 getImageValues(el, imageCols)); | |
| 743 result.push(temp); | |
| 744 | |
| 745 // index the row | |
| 746 for(var j=0, jlen=filterCols.length; j < jlen; j++) { | |
| 747 indexerFuncs[j](lookupIndices[j], filterCols[j], temp.dataCols[j], i); | |
| 748 } | |
| 749 } | |
| 750 | |
| 751 setFreeFormFilterOptions(filterCols, lookupIndices); | |
| 752 return [result, filterFuncs]; | |
| 753 } | |
| 754 | |
| 755 /** | |
| 756 * Initiazile the lookup indices and indexer functions for the filter | |
| 757 * columns. | |
| 758 * | |
| 759 * @param {Column} filterCols Filter columns | |
| 760 * @param {[]} lookupIndices Will be filled with datastructures for | |
| 761 fast lookup (output parameter) | |
| 762 * @param {[]} lookupIndices Will be filled with functions to index data | |
| 763 of the column with the corresponding column. | |
| 764 * | |
| 765 * @return {[]} Returns an array of filter functions that can be used to | |
| 766 filter the respective column. | |
| 767 **/ | |
| 768 function initIndices(filterCols, lookupIndices, indexerFuncs) { | |
| 769 var filterFuncs = []; | |
| 770 var temp; | |
| 771 | |
| 772 for(var i=0, len=filterCols.length; i<len; i++) { | |
| 773 if (filterCols[i].ftype === c.FILTER_FREE_FORM) { | |
| 774 lookupIndices.push({}); | |
| 775 indexerFuncs.push(indexFreeFormValue); | |
| 776 filterFuncs.push( | |
| 777 getFreeFormFilterFunc(lookupIndices[lookupIndices.length-1])); | |
| 778 } | |
| 779 else if (filterCols[i].ftype === c.FILTER_CHECK_BOX) { | |
| 780 temp = []; | |
| 781 for(var j=0, jlen=filterCols[i].foptions.length; j<jlen; j++) { | |
| 782 temp.push([]); | |
| 783 } | |
| 784 lookupIndices.push(temp); | |
| 785 indexerFuncs.push(indexDiscreteValue); | |
| 786 filterFuncs.push( | |
| 787 getDiscreteFilterFunc(lookupIndices[lookupIndices.length-1])); | |
| 788 } | |
| 789 } | |
| 790 | |
| 791 return filterFuncs; | |
| 792 } | |
| 793 | |
| 794 /** | |
| 795 * Helper function that extracts the values of free form columns from | |
| 796 * the lookupIndex and injects them into the Column object as FilterOpt | |
| 797 * objects. | |
| 798 **/ | |
| 799 function setFreeFormFilterOptions(filterCols, lookupIndices) { | |
| 800 var temp, k; | |
| 801 for(var i=0, len=filterCols.length; i<len; i++) { | |
| 802 if (filterCols[i].ftype === c.FILTER_FREE_FORM) { | |
| 803 temp = [] | |
| 804 for(k in lookupIndices[i]) { | |
| 805 if (lookupIndices[i].hasOwnProperty(k)) { | |
| 806 temp.push(new FilterOpt(k, lookupIndices[i][k].length)); | |
| 807 } | |
| 808 } | |
| 809 filterCols[i].setFilterOptions(temp); | |
| 810 } | |
| 811 } | |
| 812 } | |
| 813 | |
| 814 /** | |
| 815 * Index a discrete column (column with fixed number of values). | |
| 816 * | |
| 817 **/ | |
| 818 function indexDiscreteValue(lookupIndex, col, dataVal, dataRowIndex) { | |
| 819 var i = col.indexOfOptVal(dataVal); | |
| 820 lookupIndex[i].push(dataRowIndex); | |
| 821 } | |
| 822 | |
| 823 /** | |
| 824 * Index a column with free form text (= not fixed upfront) | |
| 825 * | |
| 826 **/ | |
| 827 function indexFreeFormValue(lookupIndex, col, dataVal, dataRowIndex) { | |
| 828 if (!lookupIndex[dataVal]) { | |
| 829 lookupIndex[dataVal] = []; | |
| 830 } | |
| 831 lookupIndex[dataVal].push(dataRowIndex); | |
| 832 } | |
| 833 | |
| 834 | |
| 835 /** | |
| 836 * Get the function to filter a column with the given lookup index | |
| 837 * for discrete (fixed upfront) values. | |
| 838 * | |
| 839 **/ | |
| 840 function getDiscreteFilterFunc(lookupIndex) { | |
| 841 return function(filterVal) { | |
| 842 var result = []; | |
| 843 for(var i=0, len=lookupIndex.length; i < len; i++) { | |
| 844 if (filterVal[i]) { | |
| 845 // append the indices to the current array | |
| 846 result.push.apply(result, lookupIndex[i]); | |
| 847 } | |
| 848 } | |
| 849 return { nofilter: false, records: result }; | |
| 850 }; | |
| 851 } | |
| 852 | |
| 853 /** | |
| 854 * Get the function to filter a column with the given lookup index | |
| 855 * for free form values. | |
| 856 * | |
| 857 **/ | |
| 858 function getFreeFormFilterFunc(lookupIndex) { | |
| 859 return function(filterVal) { | |
| 860 filterVal = filterVal.trim(); | |
| 861 if (filterVal === '') { | |
| 862 return { nofilter: true }; | |
| 863 } | |
| 864 return { | |
| 865 nofilter: false, | |
| 866 records: lookupIndex[filterVal] || [] | |
| 867 }; | |
| 868 }; | |
| 869 } | |
| 870 | |
| 871 /** | |
| 872 * Filters the data based on the given filterColumns and | |
| 873 * corresponding filter values. | |
| 874 * | |
| 875 * @return {[]} Subset of the input dataset based on the | |
| 876 * filter values. | |
| 877 **/ | |
| 878 function filterData(data, filterFuncs, filterVals) { | |
| 879 var recordSets = []; | |
| 880 var filterResult; | |
| 881 | |
| 882 // run through all the filters | |
| 883 for(var i=0, len=filterFuncs.length; i<len; i++) { | |
| 884 filterResult = filterFuncs[i](filterVals[i]); | |
| 885 if (!filterResult.nofilter) { | |
| 886 recordSets.push(filterResult.records); | |
| 887 } | |
| 888 } | |
| 889 | |
| 890 // If there are no restrictions then return the whole dataset. | |
| 891 if (recordSets.length === 0) { | |
| 892 return data; | |
| 893 } | |
| 894 | |
| 895 // intersect the records returned by filters. | |
| 896 var targets = intersectArrs(recordSets); | |
| 897 var result = []; | |
| 898 for(var i=0, len=targets.length; i<len; i++) { | |
| 899 result.push(data[targets[i]]); | |
| 900 } | |
| 901 | |
| 902 return result; | |
| 903 } | |
| 904 | |
| 905 /** | |
| 906 * Creates an object where the keys are the elements of the input array | |
| 907 * and the values are true. To be used for set operations with integer. | |
| 908 **/ | |
| 909 function arrToObj(arr) { | |
| 910 var o = {}; | |
| 911 var i,len; | |
| 912 for(i=0, len=arr.length; i<len; i++) { | |
| 913 o[arr[i]] = true; | |
| 914 } | |
| 915 return o; | |
| 916 } | |
| 917 | |
| 918 /** | |
| 919 * Converts the keys of an object to an array after converting | |
| 920 * each key to integer. To be used for set operations with integers. | |
| 921 **/ | |
| 922 function objToArr(obj) { | |
| 923 var result = []; | |
| 924 for(var k in obj) { | |
| 925 if (obj.hasOwnProperty(k)) { | |
| 926 result.push(parseInt(k)); | |
| 927 } | |
| 928 } | |
| 929 return result; | |
| 930 } | |
| 931 | |
| 932 /** | |
| 933 * Find the intersection of a set of arrays. | |
| 934 **/ | |
| 935 function intersectArrs(sets) { | |
| 936 var temp, obj; | |
| 937 | |
| 938 if (sets.length === 1) { | |
| 939 return sets[0]; | |
| 940 } | |
| 941 | |
| 942 // sort by size and load the smallest into the object | |
| 943 sets.sort(function(a,b) { return a.length - b.length; }); | |
| 944 obj = arrToObj(sets[0]); | |
| 945 | |
| 946 // shrink the hash as we fail to find elements in the other sets | |
| 947 for(var i=1, len=sets.length; i<len; i++) { | |
| 948 temp = arrToObj(sets[i]); | |
| 949 for(var k in obj) { | |
| 950 if (obj.hasOwnProperty(k) && !temp[k]) { | |
| 951 delete obj[k]; | |
| 952 } | |
| 953 } | |
| 954 } | |
| 955 | |
| 956 return objToArr(obj); | |
| 957 } | |
| 958 | |
| 959 /** | |
| 960 * Extract the column values from an ImagePair (contained in the server | |
| 961 * response) into filter and data columns. | |
| 962 * | |
| 963 * @return {[]} Array of data contained in one data row. | |
| 964 **/ | |
| 965 function getColValues(imagePair, filterCols, otherCols) { | |
| 966 var result = []; | |
| 967 for(var i=0, len=filterCols.length; i<len; i++) { | |
| 968 result.push(imagePair.extraColumns[filterCols[i].key]); | |
| 969 } | |
| 970 | |
| 971 for(var i=0, len=otherCols.length; i<len; i++) { | |
| 972 result.push(get_robust(imagePair, ['expectations', otherCols[i].key])); | |
| 973 } | |
| 974 | |
| 975 return result; | |
| 976 } | |
| 977 | |
| 978 /** | |
| 979 * Extract the image meta data from an Image pair returned by the server. | |
| 980 **/ | |
| 981 function getImageValues(imagePair, imageCols) { | |
| 982 var result=[]; | |
| 983 var url, value, percent, diff; | |
| 984 var CO = c.IMG_COL_ORDER; | |
| 985 | |
| 986 for(var i=0, len=imageCols.length; i<len; i++) { | |
| 987 percent = get_robust(imagePair, CO[i].percentField); | |
| 988 value = get_robust(imagePair, CO[i].valueField); | |
| 989 url = get_robust(imagePair, CO[i].urlField); | |
| 990 if (url) { | |
| 991 url = imageCols[i].baseUrl + url; | |
| 992 } | |
| 993 result.push(new ImgVal(url, percent, value)); | |
| 994 } | |
| 995 | |
| 996 return result; | |
| 997 } | |
| 998 | |
| 999 /** | |
| 1000 * Given an object find sub objects for the given index without | |
| 1001 * throwing an error if any of the sub objects do not exist. | |
| 1002 **/ | |
| 1003 function get_robust(obj, idx) { | |
| 1004 if (!idx) { | |
| 1005 return; | |
| 1006 } | |
| 1007 | |
| 1008 for(var i=0, len=idx.length; i<len; i++) { | |
| 1009 if ((typeof obj === 'undefined') || (!idx[i])) { | |
| 1010 return; // returns 'undefined' | |
| 1011 } | |
| 1012 | |
| 1013 obj = obj[idx[i]]; | |
| 1014 } | |
| 1015 | |
| 1016 return obj; | |
| 1017 } | |
| 1018 | |
| 1019 /** | |
| 1020 * Set all elements in the array to the given value. | |
| 1021 **/ | |
| 1022 function setArrVals(arr, newVal) { | |
| 1023 for(var i=0, len=arr.length; i<len; i++) { | |
| 1024 arr[i] = newVal; | |
| 1025 } | |
| 1026 } | |
| 1027 | |
| 1028 /** | |
| 1029 * Toggle the elements of a boolean array. | |
| 1030 * | |
| 1031 **/ | |
| 1032 function toggleArrVals(arr) { | |
| 1033 for(var i=0, len=arr.length; i<len; i++) { | |
| 1034 arr[i] = !arr[i]; | |
| 1035 } | |
| 1036 } | |
| 1037 | |
| 1038 /** | |
| 1039 * Sort the array of DataRow instances with the given compare functions | |
| 1040 * and the column at the given index either in ascending or descending order. | |
| 1041 **/ | |
| 1042 function sortData (allData, compareFunctions, sortByIdx, sortOrderAsc) { | |
| 1043 var cmpFn = compareFunctions[sortByIdx]; | |
| 1044 var useCmp = cmpFn; | |
| 1045 if (!sortOrderAsc) { | |
| 1046 useCmp = function ( _ ) { | |
| 1047 return -cmpFn.apply(this, arguments); | |
| 1048 }; | |
| 1049 } | |
| 1050 allData.sort(useCmp); | |
| 1051 } | |
| 1052 | |
| 1053 | |
| 1054 // ***************************** Services ********************************* | |
| 1055 | |
| 1056 /** | |
| 1057 * Encapsulates all interactions with the backend by handling | |
| 1058 * Urls and HTTP requests. Also exposes some utility functions | |
| 1059 * related to processing Urls. | |
| 1060 */ | |
| 1061 app.factory('dataService', [ '$http', function ($http) { | |
| 1062 /** Backend related constants **/ | |
| 1063 var c = { | |
| 1064 /** Url to retrieve failures */ | |
| 1065 FAILURES: '/results/failures', | |
| 1066 | |
| 1067 /** Url to retrieve all GM results */ | |
| 1068 ALL: '/results/all' | |
| 1069 }; | |
| 1070 | |
| 1071 /** | |
| 1072 * Convenience function to retrieve all results. | |
| 1073 * | |
| 1074 * @return {Promise} Will resolve to either the data (success) or to | |
| 1075 * the HTTP response (error). | |
| 1076 **/ | |
| 1077 function loadAll() { | |
| 1078 return httpGetData(c.ALL); | |
| 1079 } | |
| 1080 | |
| 1081 /** | |
| 1082 * Make a HTTP get request with the given query parameters. | |
| 1083 * | |
| 1084 * @param {} | |
| 1085 * @param {} | |
| 1086 * | |
| 1087 * @return {} | |
| 1088 **/ | |
| 1089 function httpGetData(url, queryParams) { | |
| 1090 var reqConfig = { | |
| 1091 method: 'GET', | |
| 1092 url: url, | |
| 1093 params: queryParams | |
| 1094 }; | |
| 1095 | |
| 1096 return $http(reqConfig).then( | |
| 1097 function(successResp) { | |
| 1098 return successResp.data; | |
| 1099 }); | |
| 1100 } | |
| 1101 | |
| 1102 /** | |
| 1103 * Takes an arbitrary number of objects and generates a Url encoded | |
| 1104 * query string. | |
| 1105 * | |
| 1106 **/ | |
| 1107 function getQueryString( _params_ ) { | |
| 1108 var result = []; | |
| 1109 for(var i=0, len=arguments.length; i < len; i++) { | |
| 1110 if (arguments[i]) { | |
| 1111 for(var k in arguments[i]) { | |
| 1112 if (arguments[i].hasOwnProperty(k)) { | |
| 1113 result.push(encodeURIComponent(k) + '=' + | |
| 1114 encodeURIComponent(arguments[i][k])); | |
| 1115 } | |
| 1116 } | |
| 1117 } | |
| 1118 } | |
| 1119 return result.join("&"); | |
| 1120 } | |
| 1121 | |
| 1122 // Interface of the service: | |
| 1123 return { | |
| 1124 getQueryString: getQueryString, | |
| 1125 loadAll: loadAll | |
| 1126 }; | |
| 1127 | |
| 1128 }]); | |
| 1129 | |
| 1130 })(); | |
| OLD | NEW |