1<!DOCTYPE html>
2<!--
3Copyright (c) 2013 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/multi_dimensional_view.html">
9<link rel="import" href="/tracing/ui/analysis/analysis_sub_view.html">
10<link rel="import" href="/tracing/ui/base/table.html">
11<link rel="import" href="/tracing/value/ui/scalar_span.html">
12<link rel="import" href="/tracing/value/unit.html">
13
14<polymer-element name="tr-ui-a-multi-sample-sub-view"
15    extends="tr-ui-a-sub-view">
16  <template>
17    <style>
18    :host { display: block; }
19    #control {
20      background-color: #e6e6e6;
21      background-image: -webkit-gradient(linear, 0 0, 0 100%,
22                                         from(#E5E5E5), to(#D1D1D1));
23      flex: 0 0 auto;
24      overflow-x: auto;
25    }
26    #control::-webkit-scrollbar { height: 0px; }
27    #control {
28      font-size: 12px;
29      display: flex;
30      flex-direction: row;
31      align-items: stretch;
32      margin: 1px;
33      margin-right: 2px;
34    }
35    </style>
36    <div id="control">
37      Sample View Option
38    </div>
39    <tr-ui-b-table id="table">
40    </tr-ui-b-table>
41  </template>
42
43  <script>
44  'use strict';
45
46  (function() {
47    Polymer({
48      created: function() {
49        this.viewOption_ = undefined;
50        this.selection_ = undefined;
51      },
52
53      ready: function() {
54        var viewSelector = tr.ui.b.createSelector(
55            this, 'viewOption', 'tracing.ui.analysis.multi_sample_sub_view',
56            tr.b.MultiDimensionalViewType.TOP_DOWN_TREE_VIEW,
57            [
58              {
59                label: 'Top-down (Tree)',
60                value: tr.b.MultiDimensionalViewType.TOP_DOWN_TREE_VIEW
61              },
62              {
63                label: 'Top-down (Heavy)',
64                value: tr.b.MultiDimensionalViewType.TOP_DOWN_HEAVY_VIEW
65              },
66              {
67                label: 'Bottom-up (Heavy)',
68                value: tr.b.MultiDimensionalViewType.BOTTOM_UP_HEAVY_VIEW
69              }
70            ]);
71        this.$.control.appendChild(viewSelector);
72        this.$.table.selectionMode = tr.ui.b.TableFormat.SelectionMode.ROW;
73      },
74
75      get selection() {
76        return this.selection_;
77      },
78
79      set selection(selection) {
80        this.selection_ = selection;
81        this.updateContents_();
82      },
83
84      get viewOption() {
85        return this.viewOption_;
86      },
87
88      set viewOption(viewOption) {
89        this.viewOption_ = viewOption;
90        this.updateContents_();
91      },
92
93      createSamplingSummary_: function(selection, viewOption) {
94        var builder = new tr.b.MultiDimensionalViewBuilder(1 /* dimensions */);
95        var samples = selection.getEventsOrganizedByBaseType().sample;
96
97        samples.forEach(function(sample) {
98          builder.addPath([sample.getUserFriendlyStackTrace().reverse()],
99              1, tr.b.MultiDimensionalViewBuilder.ValueKind.SELF);
100        });
101
102        return builder.buildView(viewOption);
103      },
104
105      updateContents_: function() {
106        if (this.selection === undefined) {
107          this.$.table.tableColumns = [];
108          this.$.table.tableRows = [];
109          this.$.table.rebuild();
110          return;
111        }
112
113        var samplingData = this.createSamplingSummary_(
114            this.selection, this.viewOption);
115        var columns = [
116          this.createPercentColumn_('Total', samplingData.total),
117          this.createSamplesColumn_('Total'),
118          this.createPercentColumn_('Self', samplingData.total),
119          this.createSamplesColumn_('Self'),
120          {
121            title: 'Symbol',
122            value: function(row) { return row.title[0]; },
123            width: '250px',
124            cmp: function(a, b) {
125              return a.title[0].localeCompare(b.title[0]);
126            },
127            showExpandButtons: true
128          }
129        ];
130
131        this.$.table.tableColumns = columns;
132        this.$.table.sortColumnIndex = 1 /* Total samples */;
133        this.$.table.sortDescending = true;
134        this.$.table.tableRows = samplingData.subRows;
135        this.$.table.rebuild();
136      },
137
138      createPercentColumn_: function(title, samplingDataTotal) {
139        var field = title.toLowerCase();
140        return {
141          title: title + ' percent',
142          value: function(row) {
143            var percent = row[field] / samplingDataTotal;
144
145            var span = document.createElement('tr-v-ui-scalar-span');
146            span.value = (percent * 100).toFixed(2);
147            span.percentage = percent;
148            span.unit = tr.v.Unit.byName.unitlessNumber;
149            return span;
150
151          }.bind(this),
152          width: '60px',
153          cmp: function(a, b) {
154            return a[field] - b[field];
155          }
156        };
157      },
158
159      createSamplesColumn_: function(title) {
160        var field = title.toLowerCase();
161        return {
162          title: title + ' samples',
163          value: function(row) {
164            return row[field];
165          },
166          width: '60px',
167          cmp: function(a, b) {
168            return a[field] - b[field];
169          }
170        };
171      }
172    });
173  })();
174  </script>
175</polymer-element>
176