| <!DOCTYPE html> |
| <!-- |
| Copyright (c) 2015 The Chromium Authors. All rights reserved. |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. |
| --> |
| <link rel="import" href="/tracing/base/units/histogram.html"> |
| <link rel="import" href="/tracing/base/units/scalar.html"> |
| <link rel="import" href="/tracing/base/units/units.html"> |
| <link rel="import" href="/tracing/extras/rail/rail_interaction_record.html"> |
| <link rel="import" href="/tracing/ui/base/dom_helpers.html"> |
| <link rel="import" href="/tracing/ui/base/info_bar_group.html"> |
| <link rel="import" href="/tracing/ui/base/overlay.html"> |
| <link rel="import" href="/tracing/ui/base/table.html"> |
| <link rel="import" href="/tracing/ui/units/generic_table_view.html"> |
| <link rel="import" href="/tracing/ui/units/histogram_span.html"> |
| <link rel="import" href="/tracing/ui/units/scalar_span.html"> |
| <link rel="import" href="/perf_insights/results/results.html"> |
| <link rel="import" href="/perf_insights/ui/caching_column.html"> |
| <link rel="import" href="/perf_insights/ui/generic_results_view.html"> |
| <link rel="import" href="/perf_insights/ui/grouping_table.html"> |
| <link rel="import" href="/perf_insights/ui/reports/pi_report.html"> |
| <link rel="import" href="/perf_insights/ui/trace_link_list.html"> |
| <link rel="import" href="/perf_insights/mappers/slice_cost.html"> |
| |
| <polymer-element name="pi-ui-r-rail-score-report" |
| extends="pi-ui-r-pi-report" |
| map-function-href="/perf_insights/mappers/weather_report_map_function.html" |
| map-function-name="weatherReportMapFunction"> |
| <template> |
| <style> |
| :host { |
| display: flex; |
| flex-direction: column; |
| } |
| #histogram { |
| flex: 1 1 auto; |
| max-width: 400px; |
| } |
| #links { |
| min-height: 200px; |
| } |
| h2 { |
| font-size: 12pt; |
| } |
| </style> |
| <tr-ui-b-table id="table"></tr-ui-b-table> |
| |
| <h2>Score Histogram</h2> |
| <tr-ui-u-histogram-span id="histogram"></tr-ui-u-histogram-span> |
| |
| <h2>Matching Traces</h2> |
| <pi-ui-trace-link-list id="links"></pi-ui-trace-link-list> |
| </template> |
| <script> |
| 'use strict'; |
| |
| Polymer({ |
| created: function() { |
| this.mapResults_ = undefined; |
| }, |
| |
| ready: function() { |
| this.$.table.addEventListener('selection-changed', function(tableEvent) { |
| tableEvent.stopPropagation(); |
| this.setHistogramBasedOnSelection_(); |
| }.bind(this)); |
| var histogram = this.$.histogram; |
| histogram.addEventListener('brushed-bins-changed', |
| this.onBrushedBinsChanged_.bind(this)); |
| }, |
| |
| onBrushedBinsChanged_: function(event) { |
| event.stopPropagation(); |
| this.setTraceURLsFromBins_(this.$.histogram.brushedBins); |
| }, |
| |
| get mapResults() { |
| return this.mapResults_; |
| }, |
| |
| set mapResults(mapResults) { |
| this.mapResults_ = mapResults; |
| this.updateContents_(); |
| }, |
| |
| updateContents_: function() { |
| var results = this.mapResults_; |
| if (!results) |
| results = new tr.r.Results(); |
| |
| var table = this.$.table; |
| |
| var columns = this.createColumns_(); |
| table.tableColumns = columns; |
| table.sortColumnIndex = 0; |
| table.sortDescending = false; |
| table.selectionMode = tr.ui.b.TableFormat.SelectionMode.ROW; |
| |
| var railScoreHistograms = {}; |
| results.allValuesFromFailureFreeRuns.map(function(v) { |
| if (!v.value.irTree) |
| return; |
| this.addToHistograms_(railScoreHistograms, v.value.irTree, v.runInfo); |
| }.bind(this)); |
| |
| if (!railScoreHistograms.histogram) |
| return; |
| |
| var overallRow = this.convertToRowAndSubRows_(railScoreHistograms); |
| // Mark all first level subrows as using rail sorting. |
| if (overallRow.subRows) { |
| overallRow.subRows.forEach(function(row) { |
| row.isRailName = true; |
| }); |
| } |
| |
| overallRow.title = 'Overall RAIL score'; |
| table.tableRows = [overallRow]; |
| table.selectedTableRow = overallRow; |
| this.setHistogramBasedOnSelection_(); |
| }, |
| |
| createColumns_: function() { |
| var columns = [{ |
| title: 'Title', |
| value: function(row) { |
| return row.title; |
| }, |
| cmp: function(a, b) { |
| if (a.isRailName && b.isRailName) |
| return tr.e.rail.railCompare(a.title, b.title); |
| return a.title.localeCompare(b.title); |
| }, |
| width: '500px' |
| }, |
| { |
| title: 'Avg. RAIL score', |
| textAlign: 'right', |
| value: function(row) { |
| return tr.ui.units.createScalarSpan( |
| new tr.b.u.Scalar(row.histogram.average, |
| tr.b.u.Units.normalizedPercentage)); |
| }, |
| cmp: function(a, b) { |
| return a.histogram.average - b.histogram.average; |
| } |
| } |
| ]; |
| return columns; |
| }, |
| |
| addToHistograms_: function(histograms, irTree, sourceInfo) { |
| histograms.histogram = histograms.histogram || |
| tr.b.u.Histogram.createLinear( |
| tr.b.u.Units.normalizedPercentage, |
| tr.b.Range.fromExplicitRange(0, 1), |
| 33); |
| if (irTree.overallScore !== undefined) |
| histograms.histogram.add(irTree.overallScore, sourceInfo); |
| if (irTree.irScores) { |
| irTree.irScores.forEach(function(irScore) { |
| histograms.histogram.add(irScore, sourceInfo); |
| }); |
| } |
| if (!irTree.subTypes) |
| return; |
| histograms.subTypes = histograms.subTypes || {}; |
| for (var subType in irTree.subTypes) { |
| histograms.subTypes[subType] = histograms.subTypes[subType] || {}; |
| this.addToHistograms_(histograms.subTypes[subType], |
| irTree.subTypes[subType], sourceInfo); |
| } |
| }, |
| |
| convertToRowAndSubRows_: function(histograms) { |
| var row = { |
| histogram: histograms.histogram |
| }; |
| if (!histograms.subTypes) |
| return row; |
| row.isExpanded = true; |
| row.subRows = []; |
| for (var subType in histograms.subTypes) { |
| var subRow = this.convertToRowAndSubRows_(histograms.subTypes[subType]); |
| subRow.title = subType; |
| row.subRows.push(subRow); |
| } |
| return row; |
| }, |
| |
| setTraceURLsFromBins_: function(bins) { |
| var urlSet = []; |
| bins.forEach(function(bin) { |
| bin.sourceInfos.forEach(function(sourceInfo) { |
| urlSet[sourceInfo.url] = 1; |
| }); |
| }); |
| urlSet = Object.keys(urlSet); |
| urlSet.sort(); |
| this.$.links.setTraceUrls(urlSet); |
| }, |
| |
| setHistogramBasedOnSelection_: function() { |
| this.$.histogram.histogram = this.$.table.selectedTableRow.histogram; |
| this.setTraceURLsFromBins_(this.$.histogram.histogram.allBins); |
| } |
| }); |
| </script> |
| </polymer-element> |
