diff options
Diffstat (limited to 'chromium/third_party/catapult/tracing/tracing/value/ui/histogram_set_view.html')
| -rw-r--r-- | chromium/third_party/catapult/tracing/tracing/value/ui/histogram_set_view.html | 210 |
1 files changed, 210 insertions, 0 deletions
diff --git a/chromium/third_party/catapult/tracing/tracing/value/ui/histogram_set_view.html b/chromium/third_party/catapult/tracing/tracing/value/ui/histogram_set_view.html new file mode 100644 index 00000000000..18ba824811f --- /dev/null +++ b/chromium/third_party/catapult/tracing/tracing/value/ui/histogram_set_view.html @@ -0,0 +1,210 @@ +<!DOCTYPE html> +<!-- +Copyright 2016 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/timing.html"> +<link rel="import" href="/tracing/ui/null_brushing_state_controller.html"> +<link rel="import" href="/tracing/value/csv_builder.html"> +<link rel="import" href="/tracing/value/histogram_parameter_collector.html"> +<link rel="import" href="/tracing/value/ui/histogram_set_controls.html"> +<link rel="import" href="/tracing/value/ui/histogram_set_table.html"> +<link rel="import" href="/tracing/value/ui/visualizations_data_container.html"> + +<dom-module id="tr-v-ui-histogram-set-view"> + <template> + <style> + :host { + font-family: sans-serif; + } + + #zero { + color: red; + /* histogram-set-table is used by both metrics-side-panel and results.html. + * This font-size rule has no effect in results.html, but improves + * legibility in the metrics-side-panel, which sets font-size in order to + * make this table denser. + */ + font-size: initial; + } + + #container { + display: none; + } + + #visualizations{ + display: none; + } + </style> + + <div id="zero">zero Histograms</div> + + <div id="container"> + <tr-v-ui-histogram-set-controls id="controls"> + </tr-v-ui-histogram-set-controls> + + <tr-v-ui-visualizations-data-container id="visualizations"> + </tr-v-ui-visualizations-data-container> + + <tr-v-ui-histogram-set-table id="table"></tr-v-ui-histogram-set-table> + </div> + </template> +</dom-module> + +<script> +'use strict'; +tr.exportTo('tr.v.ui', function() { + Polymer({ + is: 'tr-v-ui-histogram-set-view', + + listeners: { + export: 'onExport_', + loadVisualization: 'onLoadVisualization_' + }, + + created() { + this.brushingStateController_ = new tr.ui.NullBrushingStateController(); + this.viewState_ = new tr.v.ui.HistogramSetViewState(); + this.visualizationLoaded_ = false; + }, + + ready() { + this.$.table.viewState = this.viewState; + this.$.controls.viewState = this.viewState; + }, + + attached() { + this.brushingStateController.parentController = + tr.c.BrushingStateController.getControllerForElement(this.parentNode); + }, + + get brushingStateController() { + return this.brushingStateController_; + }, + + get viewState() { + return this.viewState_; + }, + + get histograms() { + return this.$.table.histograms; + }, + + /** + * @param {!tr.v.HistogramSet} histograms + * @param {!Object=} opt_options + * @param {function(string):!Promise=} opt_options.progressconst + * @param {string=} opt_options.helpHref + * @param {string=} opt_options.feedbackHref + */ + async build(histograms, opt_options) { + const options = opt_options || {}; + const progress = options.progress || (() => Promise.resolve()); + + if (options.helpHref) this.$.controls.helpHref = options.helpHref; + if (options.feedbackHref) { + this.$.controls.feedbackHref = options.feedbackHref; + } + + if (histograms === undefined || histograms.length === 0) { + this.$.container.style.display = 'none'; + this.$.zero.style.display = 'block'; + this.style.display = 'block'; + return; + } + this.$.zero.style.display = 'none'; + this.$.container.style.display = 'block'; + this.$.container.style.maxHeight = (window.innerHeight - 16) + 'px'; + + const buildMark = tr.b.Timing.mark('histogram-set-view', 'build'); + await progress('Finding important Histograms...'); + const sourceHistogramsMark = tr.b.Timing.mark( + 'histogram-set-view', 'sourceHistograms'); + const sourceHistograms = histograms.sourceHistograms; + sourceHistogramsMark.end(); + // Disable show_all if all values are sourceHistograms. + this.$.controls.showAllEnabled = ( + sourceHistograms.length !== histograms.length); + + await progress('Collecting parameters...'); + const collectParametersMark = tr.b.Timing.mark( + 'histogram-set-view', 'collectParameters'); + const parameterCollector = new tr.v.HistogramParameterCollector(); + parameterCollector.process(histograms); + this.$.controls.baseStatisticNames = parameterCollector.statisticNames; + this.$.controls.possibleGroupings = parameterCollector.possibleGroupings; + const displayLabels = parameterCollector.labels; + this.$.controls.displayLabels = displayLabels; + collectParametersMark.end(); + + // Only show visualizer button if values are from rendering benchmarks + const hist = [...histograms][0]; + const benchmarks = hist.diagnostics.get(tr.v.d.RESERVED_NAMES.BENCHMARKS); + let enable = false; + if (benchmarks !== undefined && benchmarks.length > 0) { + for (const benchmark of benchmarks) { + if (benchmark.includes('rendering')) { + enable = true; + break; + } + } + } + this.$.controls.enableVisualization = enable; + + // Table.build() displays its own progress. + await this.$.table.build( + histograms, sourceHistograms, displayLabels, progress); + + buildMark.end(); + }, + + onExport_(event) { + const mark = tr.b.Timing.mark('histogram-set-view', 'export' + + (event.merged ? 'Merged' : 'Raw') + event.format.toUpperCase()); + + const histograms = event.merged ? this.$.table.leafHistograms : + this.histograms; + + let blob; + if (event.format === 'csv') { + const csv = new tr.v.CSVBuilder(histograms); + csv.build(); + blob = new window.Blob([csv.toString()], {type: 'text/csv'}); + } else if (event.format === 'json') { + blob = new window.Blob([JSON.stringify(histograms.asDicts())], + {type: 'text/json'}); + } else { + throw new Error(`Unable to export format "${event.format}"`); + } + + const path = window.location.pathname.split('/'); + const basename = path[path.length - 1].split('.')[0] || 'histograms'; + + const anchor = document.createElement('a'); + anchor.download = `${basename}.${event.format}`; + anchor.href = window.URL.createObjectURL(blob); + anchor.click(); + mark.end(); + }, + + onLoadVisualization_(event) { + if (!this.visualizationLoaded_) { // Initial loading + this.$.visualizations.style.display = 'block'; + this.$.visualizations.build(this.$.table.leafHistograms, + this.histograms); + this.visualizationLoaded_ = true; + } else if (this.$.visualizations.style.display === 'none') { + // Toggle to hide + this.$.visualizations.style.display = 'block'; + } else { + this.$.visualizations.style.display = 'none'; + } + }, + }); + + return { + }; +}); +</script> |