1<!DOCTYPE html>
2<!--
3Copyright 2015 The Chromium Authors. All rights reserved.
4Use of this source code is governed by a BSD-style license that can be
5found in the LICENSE file.
6-->
7
8<link rel="import" href="/tracing/base/statistics.html">
9<link rel="import" href="/tracing/ui/base/grouping_table.html">
10<link rel="import" href="/tracing/ui/base/grouping_table_groupby_picker.html">
11<link rel="import" href="/tracing/ui/side_panel/side_panel.html">
12<link rel="import" href="/tracing/value/numeric.html">
13<link rel="import" href="/tracing/value/ui/scalar_span.html">
14<link rel="import" href="/tracing/value/unit.html">
15
16<polymer-element name='tr-ui-sp-file-size-stats-side-panel'
17    extends='tr-ui-side-panel'>
18  <template>
19    <style>
20    :host {
21      display: flex;
22      flex-direction: column;
23      width: 600px;
24    }
25    toolbar {
26      align-items: center;
27      background-color: rgb(236, 236, 236);
28      border-bottom: 1px solid #8e8e8e;
29      display: flex;
30      flex-direction: row;
31      flex-direction: row;
32      flex: 0 0 auto;
33      font-size: 12px;
34      padding: 0 10px 0 10px;
35    }
36    table-container {
37      display: flex;
38      min-height: 0px;
39      overflow-y: auto;
40    }
41    </style>
42
43    <toolbar>
44      <span><b>Group by:</b></span>
45      <tr-ui-b-grouping-table-groupby-picker id="picker">
46      </tr-ui-b-grouping-table-groupby-picker>
47    </toolbar>
48    <table-container>
49      <tr-ui-b-grouping-table id="table"></tr-ui-b-grouping-table>
50    </table-container>
51  </template>
52</polymer-element>
53
54<script>
55'use strict';
56(function() {
57
58  Polymer('tr-ui-sp-file-size-stats-side-panel', {
59    ready: function() {
60      this.model_ = undefined;
61      this.selection_ = new tr.model.EventSet();
62      this.$.picker.settingsKey = 'tr-ui-sp-file-size-stats-side-panel-picker';
63      this.$.picker.possibleGroups = [
64        {
65          key: 'phase', label: 'Event Type',
66          dataFn: function(eventStat) { return eventStat.phase; }
67        },
68        {
69          key: 'category', label: 'Category',
70          dataFn: function(eventStat) { return eventStat.category; }
71        },
72        {
73          key: 'title', label: 'Title',
74          dataFn: function(eventStat) { return eventStat.title; }
75        }
76      ];
77      this.$.picker.defaultGroupKeys = ['phase', 'title'];
78      this.$.picker.addEventListener('current-groups-changed',
79                                     this.updateContents_.bind(this));
80    },
81
82    get textLabel() {
83     return 'File Size Stats';
84    },
85
86    supportsModel: function(m) {
87      if (!m) {
88        return {
89          supported: false,
90          reason: 'No stats were collected for this file.'
91        };
92      }
93
94      if (m.stats.allTraceEventStats.length === 0) {
95        return {
96          supported: false,
97          reason: 'No stats were collected for this file.'
98        };
99      }
100      return {
101        supported: true
102      };
103    },
104
105    get model() {
106      return this.model_;
107    },
108
109    set model(model) {
110      this.model_ = model;
111      this.updateContents_();
112    },
113
114    get rangeOfInterest() {
115      return this.rangeOfInterest_;
116    },
117
118    set rangeOfInterest(rangeOfInterest) {
119      this.rangeOfInterest_ = rangeOfInterest;
120    },
121
122    get selection() {
123      return this.selection_;
124    },
125
126    set selection(selection) {
127      this.selection_ = selection;
128    },
129
130    createColumns_: function(stats) {
131      var columns = [
132        {
133          title: 'Title',
134          value: function(row) {
135            var titleEl = document.createElement('span');
136            titleEl.textContent = row.title;
137            titleEl.style.textOverflow = 'ellipsis';
138            return titleEl;
139          },
140          cmp: function(a, b) {
141            return a.title.localeCompare(b.title);
142          },
143          width: '400px'
144        },
145        {
146          title: 'Num Events',
147          textAlign: 'right',
148          value: function(row) {
149            return row.rowStats.numEvents;
150          },
151          cmp: function(a, b) {
152            return a.rowStats.numEvents - b.rowStats.numEvents;
153          },
154          width: '80px'
155        }
156      ];
157
158      if (stats && stats.hasEventSizesinBytes) {
159        columns.push({
160          title: 'Bytes',
161          textAlign: 'right',
162          value: function(row) {
163            var value = new tr.v.ScalarNumeric(tr.v.Unit.byName.sizeInBytes,
164                row.rowStats.totalEventSizeinBytes);
165            var spanEl = tr.v.ui.createScalarSpan(value);
166            return spanEl;
167          },
168          cmp: function(a, b) {
169            return a.rowStats.totalEventSizeinBytes -
170                b.rowStats.totalEventSizeinBytes;
171          },
172          width: '80px'
173        });
174      }
175      return columns;
176    },
177
178    updateContents_: function() {
179      var table = this.$.table;
180
181      var columns = this.createColumns_(this.model.stats);
182      table.rowStatsConstructor = function ModelStatsRowStats(row) {
183        var sum = tr.b.Statistics.sum(row.data, function(x) {
184          return x.numEvents;
185        });
186        var totalEventSizeinBytes = tr.b.Statistics.sum(row.data, function(x) {
187          return x.totalEventSizeinBytes;
188        });
189        return {
190          numEvents: sum,
191          totalEventSizeinBytes: totalEventSizeinBytes
192        };
193      };
194      table.tableColumns = columns;
195      table.sortColumnIndex = 1;
196      table.sortDescending = true;
197      table.selectionMode = tr.ui.b.TableFormat.SelectionMode.ROW;
198
199      table.groupBy = this.$.picker.currentGroups.map(function(group) {
200        return group.dataFn;
201      });
202
203      if (!this.model) {
204        table.dataToGroup = [];
205      } else {
206        table.dataToGroup = this.model.stats.allTraceEventStats;
207      }
208      this.$.table.rebuild();
209    }
210  });
211})();
212</script>
213