| <!DOCTYPE html> |
| <!-- |
| Copyright 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="/extras/rail/rail_score.html"> |
| <link rel="import" href="/model/ir_coverage.html"> |
| <link rel="import" href="/ui/analysis/analysis_link.html"> |
| <link rel="import" href="/ui/base/color_legend.html"> |
| <link rel="import" href="/ui/base/table.html"> |
| <link rel="import" href="/ui/extras/rail/rail_score_span.html"> |
| <link rel="import" href="/ui/side_panel/side_panel.html"> |
| <link rel="import" href="/ui/units/time_duration_span.html"> |
| |
| <polymer-element name='tr-ui-e-rail-rail-score-side-panel' |
| extends='tr-ui-side-panel'> |
| <template> |
| <style> |
| :host { |
| display: flex; |
| flex-direction: column; |
| width: 450px; |
| overflow-x: auto; |
| } |
| |
| #score { |
| background-color: rgb(236, 236, 236) |
| flex: 0 0 auto; |
| } |
| |
| #content { |
| min-width: 0; |
| flex-direction: column; |
| display: flex; |
| flex: 1 1 auto; |
| } |
| |
| #coverage { |
| font-size: 10px; |
| } |
| </style> |
| |
| <tr-ui-e-rail-rail-score-span id="score"></tr-ui-e-rail-rail-score-span> |
| <tr-ui-b-table id="table"></tr-ui-b-table> |
| |
| <div id="coverage"> |
| <b>Coverage:</b><br> |
| <tr-ui-a-analysis-link id="associated-events"></tr-ui-a-analysis-link><br> |
| <tr-ui-a-analysis-link id="unassociated-events"></tr-ui-a-analysis-link> |
| </div> |
| </template> |
| </polymer-element> |
| |
| <script> |
| 'use strict'; |
| (function() { |
| function setCoverageLink( |
| link, labelString, events, eventRatio, cpuMs, cpuRatio) { |
| link.setSelectionAndContent(events); |
| |
| labelString += ' ' + events.length + ' events'; |
| labelString += ' (' + parseInt(100 * eventRatio) + '%)'; |
| if (cpuRatio !== undefined) |
| labelString += ', '; |
| link.appendChild(document.createTextNode(labelString)); |
| |
| if (cpuRatio === undefined) |
| return; |
| |
| var cpuMsSpan = document.createElement('tr-ui-u-time-duration-span'); |
| // There will be some text after the cpuMsSpan, that should be on the same |
| // line if it fits. This "span" has display: block for its sparkline... so I |
| // guess I'll set it inline here? |
| cpuMsSpan.style.display = 'inline'; |
| cpuMsSpan.duration = cpuMs; |
| cpuMsSpan.contentTextDecoration = 'underline'; |
| link.appendChild(cpuMsSpan); |
| |
| var cpuString = ' (' + parseInt(100 * cpuRatio) + '%)'; |
| link.appendChild(document.createTextNode(cpuString)); |
| } |
| |
| Polymer('tr-ui-e-rail-rail-score-side-panel', { |
| ready: function() { |
| this.rangeOfInterest_ = new tr.b.Range(); |
| this.model_ = undefined; |
| this.railScore_ = undefined; |
| this.selection_ = new tr.model.EventSet(); |
| }, |
| |
| get textLabel() { |
| return 'RAIL Info'; |
| }, |
| |
| supportsModel: function(m) { |
| if (m === undefined) { |
| return { |
| supported: false, |
| reason: 'Unknown tracing model' |
| }; |
| } |
| |
| var railScore = tr.e.rail.RAILScore.fromModel(m); |
| if (railScore === undefined) { |
| return { |
| supported: false, |
| reason: 'RAIL interactions were not found on the model' |
| }; |
| } |
| |
| return { |
| supported: true |
| }; |
| }, |
| |
| get model() { |
| return this.model_; |
| }, |
| |
| set model(model) { |
| this.model_ = model; |
| this.railScore_ = tr.e.rail.RAILScore.fromModel(model); |
| this.$.score.railScore = this.railScore_; |
| |
| var coverage = tr.model.getIRCoverageFromModel(model); |
| if (coverage) { |
| setCoverageLink(this.shadowRoot.querySelector('#associated-events'), |
| 'Associated', |
| coverage.associatedEvents, |
| coverage.coveredEventsRatio, |
| coverage.associatedCpuMs, |
| coverage.coveredCpuRatio); |
| setCoverageLink(this.shadowRoot.querySelector('#unassociated-events'), |
| 'Unassociated', |
| coverage.unassociatedEvents, |
| coverage.uncoveredEventsRatio, |
| coverage.unassociatedCpuMs, |
| coverage.uncoveredCpuRatio); |
| } |
| |
| this.updateTable_(); |
| }, |
| |
| get listeningToKeys() { |
| return false; |
| }, |
| |
| set rangeOfInterest(rangeOfInterest) { |
| }, |
| |
| updateTable_: function() { |
| function toThreeDigitLocaleString(value) { |
| return value.toLocaleString(undefined, |
| {minimumFractionDigits: 3, |
| maximumFractionDigits: 3}); |
| } |
| |
| var columns = [ |
| { |
| title: 'Type', |
| width: '150px', |
| value: function(ir) { |
| var el = document.createElement('tr-ui-b-color-legend'); |
| var linkEl = document.createElement('tr-ui-a-analysis-link'); |
| linkEl.setSelectionAndContent(new tr.model.EventSet([ir]), |
| ir.railTypeName); |
| el.setLabelAndColorId(linkEl, ir.colorId); |
| el.compoundEventSelectionState = |
| ir.computeCompoundEvenSelectionState(this.selection_); |
| return el; |
| }.bind(this), |
| cmp: function(a, b) { |
| return a.railTypeName.localeCompare(b.railTypeName); |
| } |
| }, |
| { |
| title: 'Efficiency', |
| width: '33%', |
| value: function(ir) { |
| return toThreeDigitLocaleString(ir.normalizedEfficiency); |
| }, |
| cmp: function(a, b) { |
| return a.normalizedEfficiency - b.normalizedEfficiency; |
| } |
| }, |
| { |
| title: 'Pain', |
| width: '33%', |
| value: function(ir) { |
| return toThreeDigitLocaleString(ir.normalizedUserPain); |
| }, |
| cmp: function(a, b) { |
| return a.normalizedUserPain - b.normalizedUserPain; |
| } |
| }, |
| { |
| title: 'Score', |
| width: '33%', |
| value: function(ir) { |
| var span = document.createElement('span'); |
| span.style.fontWeight = 'bold'; |
| span.textContent = toThreeDigitLocaleString(ir.railScore); |
| return span; |
| }, |
| cmp: function(a, b) { |
| return a.railScore - b.railScore; |
| } |
| } |
| ]; |
| |
| this.$.table.tableColumns = columns; |
| if (this.railScore_) |
| this.$.table.tableRows = this.railScore_.interactionRecords; |
| else |
| this.$.table.tableRows = []; |
| this.$.table.rebuild(); |
| }, |
| |
| onTableSelectionChanged_: function() { |
| var selectedIR = this.$.table.selectedTableRow; |
| |
| var event = new tr.c.RequestSelectionChangeEvent(); |
| event.selection = new tr.c.Selection([selectedIR]); |
| this.dispatchEvent(event); |
| }, |
| |
| set selection(selection) { |
| if (selection === undefined) |
| selection = new tr.model.EventSet(); |
| |
| if (this.selection_.equals(selection)) |
| return; |
| |
| this.selection_ = selection; |
| this.updateTable_(); |
| } |
| }); |
| })(); |
| </script> |