1<!DOCTYPE html>
2<!--
3Copyright (c) 2016 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/ui/base/table.html">
9
10<polymer-element name="tr-ui-b-grouping-table">
11  <template>
12    <style>
13    :host {
14      display: flex;
15    }
16    #table {
17      flex: 1 1 auto;
18    }
19    </style>
20    <tr-ui-b-table id="table"></tr-ui-b-table>
21  </template>
22</polymer-element>
23<script>
24'use strict';
25
26tr.exportTo('tr.ui.b', function() {
27
28  function Row(title, data, groupingKeyFuncs, rowStatsConstructor) {
29    this.title = title;
30    this.data_ = data;
31    if (groupingKeyFuncs === undefined)
32      groupingKeyFuncs = [];
33    this.groupingKeyFuncs_ = groupingKeyFuncs;
34    this.rowStatsConstructor_ = rowStatsConstructor;
35
36    this.subRowsBuilt_ = false;
37    this.subRows_ = undefined;
38
39    this.rowStats_ = undefined;
40  }
41
42  Row.prototype = {
43    getCurrentGroupingKeyFunc_: function() {
44      if (this.groupingKeyFuncs_.length === 0)
45        return undefined;
46      return this.groupingKeyFuncs_[0];
47    },
48
49    get data() {
50      return this.data_;
51    },
52
53    get rowStats() {
54      if (this.rowStats_ === undefined) {
55        this.rowStats_ = new this.rowStatsConstructor_(this);
56      }
57      return this.rowStats_;
58    },
59
60    rebuildSubRowsIfNeeded_: function() {
61      if (this.subRowsBuilt_)
62        return;
63      this.subRowsBuilt_ = true;
64
65      var groupingKeyFunc = this.getCurrentGroupingKeyFunc_();
66      if (groupingKeyFunc === undefined) {
67        this.subRows_ = undefined;
68        return;
69      }
70
71      var dataByKey = {};
72      var hasValues = false;
73      this.data_.forEach(function(datum) {
74        var key = groupingKeyFunc(datum);
75        hasValues = hasValues || (key !== undefined);
76        if (dataByKey[key] === undefined)
77          dataByKey[key] = [];
78        dataByKey[key].push(datum);
79      });
80      if (!hasValues) {
81        this.subRows_ = undefined;
82        return;
83      }
84
85      this.subRows_ = [];
86      for (var key in dataByKey) {
87        var row = new Row(key,
88                          dataByKey[key],
89                          this.groupingKeyFuncs_.slice(1),
90                          this.rowStatsConstructor_);
91        this.subRows_.push(row);
92      }
93    },
94
95    get isExpanded() {
96      return (this.subRows &&
97              (this.subRows.length > 0) &&
98              (this.subRows.length < 5));
99    },
100
101    get subRows() {
102      this.rebuildSubRowsIfNeeded_();
103      return this.subRows_;
104    }
105  };
106
107  Polymer('tr-ui-b-grouping-table', {
108    created: function() {
109      this.dataToGroup_ = undefined;
110      this.groupBy_ = undefined;
111      this.rowStatsConstructor_ = undefined;
112    },
113
114    get tableColumns() {
115      return this.$.table.tableColumns;
116    },
117
118    set tableColumns(tableColumns) {
119      this.$.table.tableColumns = tableColumns;
120    },
121
122    get tableRows() {
123      return this.$.table.tableRows;
124    },
125
126    get sortColumnIndex() {
127      return this.$.table.sortColumnIndex;
128    },
129
130    set sortColumnIndex(sortColumnIndex) {
131      this.$.table.sortColumnIndex = sortColumnIndex;
132    },
133
134    get sortDescending() {
135      return this.$.table.sortDescending;
136    },
137
138    set sortDescending(sortDescending) {
139      this.$.table.sortDescending = sortDescending;
140    },
141
142    get selectionMode() {
143      return this.$.table.selectionMode;
144    },
145
146    set selectionMode(selectionMode) {
147      this.$.table.selectionMode = selectionMode;
148    },
149
150    get rowHighlightStyle() {
151      return this.$.table.rowHighlightStyle;
152    },
153
154    set rowHighlightStyle(rowHighlightStyle) {
155      this.$.table.rowHighlightStyle = rowHighlightStyle;
156    },
157
158    get cellHighlightStyle() {
159      return this.$.table.cellHighlightStyle;
160    },
161
162    set cellHighlightStyle(cellHighlightStyle) {
163      this.$.table.cellHighlightStyle = cellHighlightStyle;
164    },
165
166    get selectedColumnIndex() {
167      return this.$.table.selectedColumnIndex;
168    },
169
170    set selectedColumnIndex(selectedColumnIndex) {
171      this.$.table.selectedColumnIndex = selectedColumnIndex;
172    },
173
174    get selectedTableRow() {
175      return this.$.table.selectedTableRow;
176    },
177
178    set selectedTableRow(selectedTableRow) {
179      this.$.table.selectedTableRow = selectedTableRow;
180    },
181
182    get groupBy() {
183      return this.groupBy_;
184    },
185
186    set groupBy(groupBy) {
187      this.groupBy_ = groupBy;
188      this.updateContents_();
189    },
190
191    get dataToGroup() {
192      return this.dataToGroup_;
193    },
194
195    set dataToGroup(dataToGroup) {
196      this.dataToGroup_ = dataToGroup;
197      this.updateContents_();
198    },
199
200    get rowStatsConstructor() {
201      return this.rowStatsConstructor_;
202    },
203
204    set rowStatsConstructor(rowStatsConstructor) {
205      this.rowStatsConstructor_ = rowStatsConstructor;
206      this.updateContents_();
207    },
208
209    rebuild: function() {
210      this.$.table.rebuild();
211    },
212
213    updateContents_: function() {
214      var groupBy = this.groupBy_ || [];
215      var dataToGroup = this.dataToGroup_ || [];
216      var rowStatsConstructor = this.rowStatsConstructor_ || function() {};
217
218      var superRow = new Row('', dataToGroup, groupBy,
219                             rowStatsConstructor);
220      this.$.table.tableRows = superRow.subRows || [];
221    }
222  });
223
224  return {
225  };
226});
227</script>
228