blob: 97532f7ccf7810e54e2f427633c42ad7cf800cc3 [file] [log] [blame]
<!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">
<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;
}
</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-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_',
},
created() {
this.brushingStateController_ = new tr.ui.NullBrushingStateController();
this.viewState_ = new tr.v.ui.HistogramSetViewState();
},
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();
// 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();
},
});
return {
};
});
</script>