| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <!-- | 2 <!-- |
| 3 Copyright 2016 The Chromium Authors. All rights reserved. | 3 Copyright 2016 The Chromium Authors. All rights reserved. |
| 4 Use of this source code is governed by a BSD-style license that can be | 4 Use of this source code is governed by a BSD-style license that can be |
| 5 found in the LICENSE file. | 5 found in the LICENSE file. |
| 6 --> | 6 --> |
| 7 | 7 |
| 8 <link rel="import" href="/tracing/ui/base/table.html"> | 8 <link rel="import" href="/tracing/ui/base/table.html"> |
| 9 <link rel="import" href="/tracing/value/ui/diagnostic_span.html"> | 9 <link rel="import" href="/tracing/value/ui/diagnostic_span.html"> |
| 10 | 10 |
| 11 <dom-module id="tr-v-ui-diagnostic-map-table"> | 11 <dom-module id="tr-v-ui-diagnostic-map-table"> |
| 12 <template> | 12 <template> |
| 13 <tr-ui-b-table id="table"></tr-ui-b-table> | 13 <tr-ui-b-table id="table"></tr-ui-b-table> |
| 14 </template> | 14 </template> |
| 15 </dom-module> | 15 </dom-module> |
| 16 | 16 |
| 17 <script> | 17 <script> |
| 18 'use strict'; | 18 'use strict'; |
| 19 | 19 |
| 20 tr.exportTo('tr.v.ui', function() { | 20 tr.exportTo('tr.v.ui', function() { |
| 21 function makeColumn(title, histogram) { | 21 function makeColumn(title, histogram, histograms) { |
| 22 return { | 22 return { |
| 23 title, | 23 title, |
| 24 value(map) { | 24 value(map) { |
| 25 const diagnostic = map.get(title); | 25 const diagnostic = map.get(title); |
| 26 if (!diagnostic) return ''; | 26 if (!diagnostic) return ''; |
| 27 return tr.v.ui.createDiagnosticSpan(diagnostic, title, histogram); | 27 return tr.v.ui.createDiagnosticSpan( |
| 28 diagnostic, title, histogram, histograms); |
| 28 } | 29 } |
| 29 }; | 30 }; |
| 30 } | 31 } |
| 31 | 32 |
| 32 Polymer({ | 33 Polymer({ |
| 33 is: 'tr-v-ui-diagnostic-map-table', | 34 is: 'tr-v-ui-diagnostic-map-table', |
| 34 | 35 |
| 35 created() { | 36 created() { |
| 36 this.diagnosticMaps_ = undefined; | 37 this.diagnosticMaps_ = undefined; |
| 38 this.isMetadata_ = false; |
| 37 this.histogram_ = undefined; | 39 this.histogram_ = undefined; |
| 38 this.isMetadata_ = false; | 40 this.histograms_ = undefined; |
| 39 }, | 41 }, |
| 40 | 42 |
| 41 set histogram(h) { | 43 get diagnosticMaps() { |
| 42 this.histogram_ = h; | 44 return this.diagnosticMaps_; |
| 43 }, | |
| 44 | |
| 45 set isMetadata(m) { | |
| 46 this.isMetadata_ = m; | |
| 47 this.$.table.showHeader = !this.isMetadata_; | |
| 48 }, | 45 }, |
| 49 | 46 |
| 50 /** | 47 /** |
| 51 * The |title| will be used as the heading for the column containing | 48 * The |title| will be used as the heading for the column containing |
| 52 * diagnostic-spans for |diagnosticMap|'s Diagnostics. | 49 * diagnostic-spans for |diagnosticMap|'s Diagnostics. |
| 53 * | 50 * |
| 54 * @param {!Array.<!Object>} maps | 51 * @param {!Array.<!Object>} diagnosticMaps |
| 55 * @param {!string} maps[].title | 52 * @param {!string} diagnosticMaps[].title |
| 56 * @param {!tr.v.d.DiagnosticMap} maps[].diagnosticMap | 53 * @param {!tr.v.d.DiagnosticMap} diagnosticMaps[].diagnosticMap |
| 57 */ | 54 */ |
| 58 set diagnosticMaps(maps) { | 55 build(diagnosticMaps, isMetadata, histogram, histograms) { |
| 59 this.diagnosticMaps_ = maps; | 56 this.diagnosticMaps_ = diagnosticMaps; |
| 60 this.updateContents_(); | 57 this.isMetadata_ = isMetadata; |
| 61 }, | 58 this.$.table.showHeader = !this.isMetadata_; |
| 59 this.histogram_ = histogram; |
| 60 this.histograms_ = histograms; |
| 62 | 61 |
| 63 get diagnosticMaps() { | |
| 64 return this.diagnosticMaps_; | |
| 65 }, | |
| 66 | |
| 67 updateContents_() { | |
| 68 if (this.isMetadata_ && this.diagnosticMaps_.length !== 1) { | 62 if (this.isMetadata_ && this.diagnosticMaps_.length !== 1) { |
| 69 throw new Error( | 63 throw new Error( |
| 70 'Metadata diagnostic-map-tables require exactly 1 DiagnosticMap'); | 64 'Metadata diagnostic-map-tables require exactly 1 DiagnosticMap'); |
| 71 } | 65 } |
| 72 if (this.diagnosticMaps_ === undefined || | 66 if (this.diagnosticMaps_ === undefined || |
| 73 this.diagnosticMaps_.length === 0) { | 67 this.diagnosticMaps_.length === 0) { |
| 74 this.$.table.tableRows = []; | 68 this.$.table.tableRows = []; |
| 75 this.$.table.tableColumns = []; | 69 this.$.table.tableColumns = []; |
| 76 return; | 70 return; |
| 77 } | 71 } |
| 78 | 72 |
| 79 let names = new Set(); | 73 let names = new Set(); |
| 80 for (const map of this.diagnosticMaps_) { | 74 for (const map of this.diagnosticMaps_) { |
| 81 for (const [name, diagnostic] of map) { | 75 for (const [name, diagnostic] of map) { |
| 82 // https://github.com/catapult-project/catapult/issues/2842 | 76 // https://github.com/catapult-project/catapult/issues/2842 |
| 83 if (diagnostic instanceof tr.v.d.UnmergeableDiagnosticSet) continue; | 77 if (diagnostic instanceof tr.v.d.UnmergeableDiagnosticSet) continue; |
| 84 if (diagnostic instanceof tr.v.d.CollectedRelatedEventSet) continue; | 78 if (diagnostic instanceof tr.v.d.CollectedRelatedEventSet) continue; |
| 85 if (diagnostic instanceof tr.v.d.GroupingPath) continue; | 79 if (diagnostic instanceof tr.v.d.GroupingPath) continue; |
| 80 if (diagnostic instanceof tr.v.d.RelatedNameMap) continue; |
| 86 | 81 |
| 87 names.add(name); | 82 names.add(name); |
| 88 } | 83 } |
| 89 } | 84 } |
| 90 names = Array.from(names).sort(); | 85 names = Array.from(names).sort(); |
| 91 | 86 |
| 92 const histogram = this.histogram_; | |
| 93 if (this.isMetadata_) { | 87 if (this.isMetadata_) { |
| 94 const diagnosticMap = this.diagnosticMaps_[0]; | 88 const diagnosticMap = this.diagnosticMaps_[0]; |
| 95 this.$.table.tableColumns = [ | 89 this.$.table.tableColumns = [ |
| 96 { | 90 { |
| 97 value(name) { | 91 value(name) { |
| 98 return name.name; | 92 return name.name; |
| 99 } | 93 } |
| 100 }, | 94 }, |
| 101 { | 95 { |
| 102 value(name) { | 96 value(name) { |
| 103 const diagnostic = diagnosticMap.get(name.name); | 97 const diagnostic = diagnosticMap.get(name.name); |
| 104 if (!diagnostic) return ''; | 98 if (!diagnostic) return ''; |
| 105 return tr.v.ui.createDiagnosticSpan( | 99 return tr.v.ui.createDiagnosticSpan( |
| 106 diagnostic, name.name, histogram); | 100 diagnostic, name.name, histogram, histograms); |
| 107 } | 101 } |
| 108 }, | 102 }, |
| 109 ]; | 103 ]; |
| 110 this.$.table.tableRows = names.map(name => { | 104 this.$.table.tableRows = names.map(name => { |
| 111 // tr-ui-b-table requires rows to be objects. | 105 // tr-ui-b-table requires rows to be objects. |
| 112 return {name}; | 106 return {name}; |
| 113 }); | 107 }); |
| 114 } else { | 108 } else { |
| 115 this.$.table.tableColumns = names.map( | 109 this.$.table.tableColumns = names.map( |
| 116 name => makeColumn(name, histogram)); | 110 name => makeColumn(name, histogram, histograms)); |
| 117 this.$.table.tableRows = this.diagnosticMaps_; | 111 this.$.table.tableRows = this.diagnosticMaps_; |
| 118 } | 112 } |
| 119 | 113 |
| 120 this.$.table.rebuild(); | 114 this.$.table.rebuild(); |
| 121 } | 115 } |
| 122 }); | 116 }); |
| 123 | 117 |
| 124 return {}; | 118 return {}; |
| 125 }); | 119 }); |
| 126 </script> | 120 </script> |
| OLD | NEW |