Index: tracing/tracing/value/ui/breakdown_span.html |
diff --git a/tracing/tracing/value/ui/breakdown_span.html b/tracing/tracing/value/ui/breakdown_span.html |
index 41a3b720cc9b272faf652beb8985c987bffc0f96..cecf236709faee9a43f961a77b784c488ef58167 100644 |
--- a/tracing/tracing/value/ui/breakdown_span.html |
+++ b/tracing/tracing/value/ui/breakdown_span.html |
@@ -42,18 +42,47 @@ found in the LICENSE file. |
<script> |
'use strict'; |
- |
tr.exportTo('tr.v.ui', function() { |
const DEFAULT_COLOR_SCHEME = new tr.b.SinebowColorGenerator(); |
+ function getHistogramName(histogram, diagnosticName, key) { |
+ const nameMap = histogram.diagnostics.get(diagnosticName); |
+ if (nameMap === undefined) return undefined; |
+ return nameMap.get(key); |
+ } |
+ |
+ function getColorScheme(colorSchemeName) { |
+ if (colorSchemeName === |
+ tr.v.d.COLOR_SCHEME_CHROME_USER_FRIENDLY_CATEGORY_DRIVER) { |
+ return name => { |
+ let cat = name.split(' '); |
+ cat = cat[cat.length - 1]; |
+ return tr.e.chrome.ChromeUserFriendlyCategoryDriver.getColor(cat); |
+ }; |
+ } |
+ |
+ if (colorSchemeName !== undefined) { |
+ return name => tr.b.FixedColorSchemeRegistry.lookUp( |
+ colorSchemeName).getColor(name); |
+ } |
+ |
+ return name => DEFAULT_COLOR_SCHEME.colorForKey(name); |
+ } |
+ |
+ function getUnit(name, histograms) { |
+ const candidates = histograms.getHistogramsNamed(name); |
+ if (candidates.length === 0) return undefined; |
+ return candidates[0].unit; |
+ } |
+ |
class BreakdownTableSummaryRow { |
- constructor(displayElement, histogramNames) { |
- this.displayElement_ = displayElement; |
+ constructor(valueSpan, histogramNames) { |
+ this.valueSpan_ = valueSpan; |
this.histogramNames_ = histogramNames; |
this.keySpan_ = undefined; |
} |
- get numberValue() { |
+ get sanitizedValue() { |
// Prevent this row from appearing in the ColumnChart. |
return undefined; |
} |
@@ -75,22 +104,23 @@ tr.exportTo('tr.v.ui', function() { |
return 'Sum'; |
} |
- get displayElement() { |
- return this.displayElement_; |
+ get valueSpan() { |
+ return this.valueSpan_; |
} |
- get stringPercent() { |
+ get percentString() { |
return '100%'; |
} |
} |
class BreakdownTableRow { |
- constructor(name, value, unit, color) { |
+ constructor(name, value, histogramName, unit, color) { |
this.name_ = name; |
- this.value = value; |
- this.unit = unit; |
+ this.value_ = value; |
+ this.histogramName_ = histogramName; |
+ this.unit_ = unit; |
- if (!this.isHistogram && typeof value !== 'number') { |
+ if (typeof value !== 'number') { |
throw new Error('unsupported value ' + value); |
} |
@@ -102,25 +132,34 @@ tr.exportTo('tr.v.ui', function() { |
hsl.l *= 0.85; |
this.highlightedColor_ = tr.b.Color.fromHSL(hsl); |
- if (this.isHistogram) { |
- this.displayElement_ = tr.v.ui.createScalarSpan(this.numberValue, { |
- unit: this.value.unit, |
+ if (this.sanitizedValue !== undefined && this.unit_) { |
+ this.valueSpan_ = tr.v.ui.createScalarSpan(this.sanitizedValue, { |
+ unit: this.unit_, |
}); |
} else { |
- this.displayElement_ = tr.ui.b.createSpan({ |
+ this.valueSpan_ = tr.ui.b.createSpan({ |
textContent: this.stringValue, |
}); |
} |
} |
- get isHistogram() { |
- return this.value instanceof tr.v.Histogram; |
- } |
- |
get name() { |
return this.name_; |
} |
+ /** |
+ * @return {number|undefined} |
+ */ |
+ get sanitizedValue() { |
+ if (isNaN(this.value_) || |
+ this.value_ === Infinity || |
+ this.value_ === -Infinity || |
+ this.value_ < 0) { |
+ return undefined; |
+ } |
+ return this.value_; |
+ } |
+ |
get color() { |
return this.color_; |
} |
@@ -131,74 +170,56 @@ tr.exportTo('tr.v.ui', function() { |
get keySpan() { |
if (this.keySpan_ === undefined) { |
- if (this.isHistogram) { |
+ if (this.histogramName_) { |
this.keySpan_ = document.createElement('tr-ui-a-analysis-link'); |
- this.keySpan_.setSelectionAndContent([this.value.name], this.name); |
+ this.keySpan_.setSelectionAndContent( |
+ [this.histogramName_], this.name); |
this.keySpan_.color = this.color; |
- this.keySpan_.title = this.value.name; |
+ this.keySpan_.title = this.histogramName_; |
} else { |
- this.keySpan_ = document.createElement('span'); |
- this.keySpan_.innerText = this.name; |
- this.keySpan_.style.color = this.color; |
+ this.keySpan_ = tr.ui.b.createSpan({ |
+ textContent: this.name, |
+ color: this.color, |
+ }); |
} |
} |
return this.keySpan_; |
} |
- /** |
- * @return {number|undefined} |
- */ |
- get numberValue() { |
- if (this.isHistogram) return this.value.sum; |
- if (!isNaN(this.value) && |
- (this.value !== Infinity) && |
- (this.value !== -Infinity) && |
- (this.value > 0)) return this.value; |
- // Prevent this row from appearing in the ColumnChart. |
- return undefined; |
- } |
- |
get stringValue() { |
- if (!this.isHistogram && |
- (isNaN(this.value) || |
- this.value === Infinity || |
- this.value === -Infinity)) { |
- return this.value.toString(); |
- } |
- if (this.unit !== undefined) return this.unit.format(this.value); |
- if (this.isHistogram) return this.value.sum.toString(); |
- return this.value.toString(); |
+ if (this.unit !== undefined) return this.unit.format(this.value_); |
+ return this.value_.toString(); |
} |
set tableSum(s) { |
this.tableSum_ = s; |
} |
- get stringPercent() { |
+ get percentString() { |
if (this.tableSum_ === undefined) return ''; |
- const num = this.numberValue; |
+ const num = this.sanitizedValue; |
if (num === undefined) return ''; |
return Math.floor(num * 100.0 / this.tableSum_) + '%'; |
} |
- get displayElement() { |
- return this.displayElement_; |
+ get valueSpan() { |
+ return this.valueSpan_; |
} |
compare(other) { |
- if (this.numberValue === undefined) { |
- if (other.numberValue === undefined) { |
+ if (this.sanitizedValue === undefined) { |
+ if (other.sanitizedValue === undefined) { |
return this.name.localeCompare(other.name); |
} |
return 1; |
} |
- if (other.numberValue === undefined) { |
+ if (other.sanitizedValue === undefined) { |
return -1; |
} |
- if (this.numberValue === other.numberValue) { |
+ if (this.sanitizedValue === other.sanitizedValue) { |
return this.name.localeCompare(other.name); |
} |
- return other.numberValue - this.numberValue; |
+ return other.sanitizedValue - this.sanitizedValue; |
} |
} |
@@ -222,17 +243,17 @@ tr.exportTo('tr.v.ui', function() { |
onRectMouseEnter_(event) { |
for (const row of this.$.table.tableRows) { |
if (row.name === event.rect.key) { |
- row.displayElement.style.background = event.rect.color; |
+ row.valueSpan.style.background = event.rect.color; |
row.keySpan.scrollIntoViewIfNeeded(); |
} else { |
- row.displayElement.style.background = ''; |
+ row.valueSpan.style.background = ''; |
} |
} |
}, |
onRectMouseLeave_(event) { |
for (const row of this.$.table.tableRows) { |
- row.displayElement.style.background = ''; |
+ row.valueSpan.style.background = ''; |
} |
}, |
@@ -246,11 +267,11 @@ tr.exportTo('tr.v.ui', function() { |
value: row => row.keySpan, |
}, |
{ |
- value: row => row.displayElement, |
+ value: row => row.valueSpan, |
align: tr.ui.b.TableFormat.ColumnAlignment.RIGHT, |
}, |
{ |
- value: row => row.stringPercent, |
+ value: row => row.percentString, |
align: tr.ui.b.TableFormat.ColumnAlignment.RIGHT, |
}, |
]; |
@@ -261,44 +282,45 @@ tr.exportTo('tr.v.ui', function() { |
this.$.table.style.display = 'none'; |
this.$.empty.style.display = 'block'; |
- if (!this.diagnostic_) { |
+ if (!this.diagnostic_ || this.diagnostic_.size === 0) { |
this.chart_.data = []; |
return; |
} |
- if (this.histogram_) this.chart_.unit = this.histogram_.unit; |
- |
- let colorScheme = undefined; |
- // https://github.com/catapult-project/catapult/issues/2970 |
- if (this.diagnostic.colorScheme === |
- tr.v.d.COLOR_SCHEME_CHROME_USER_FRIENDLY_CATEGORY_DRIVER) { |
- colorScheme = (name) => { |
- let cat = name.split(' '); |
- cat = cat[cat.length - 1]; |
- return tr.e.chrome.ChromeUserFriendlyCategoryDriver.getColor(cat); |
- }; |
- } else if (this.diagnostic.colorScheme !== undefined) { |
- colorScheme = (name) => tr.b.FixedColorSchemeRegistry.lookUp( |
- this.diagnostic.colorScheme).getColor(name); |
- } else { |
- colorScheme = (name) => DEFAULT_COLOR_SCHEME.colorForKey(name); |
- } |
- |
+ const colorScheme = getColorScheme(this.diagnostic.colorScheme); |
const tableRows = []; |
+ const histogramNames = new Set(); |
let tableSum = 0; |
- const histogramNames = []; |
- for (const [name, value] of this.diagnostic) { |
+ let conflictingUnits = false; |
+ for (const [key, value] of this.diagnostic) { |
+ const histogramName = getHistogramName(this.histogram_, this.name_, |
+ key); |
+ let unit = this.histogram_.unit; |
+ if (histogramName) { |
+ histogramNames.add(histogramName); |
+ |
+ unit = getUnit(histogramName, this.histograms_); |
+ if (unit !== undefined) { |
+ if (this.chart_.unit === undefined && |
+ !conflictingUnits) { |
+ this.chart_.unit = unit; |
+ } else if (unit !== this.chart_.unit) { |
+ conflictingUnits = true; |
+ this.chart_.unit = undefined; |
+ } |
+ } |
+ } else { |
+ this.chart_.unit = unit; |
+ } |
+ |
const row = new BreakdownTableRow( |
- name, value, this.chart_.unit, colorScheme(name)); |
+ key, value, histogramName, unit, colorScheme(key)); |
tableRows.push(row); |
- if (row.numberValue !== undefined) tableSum += row.numberValue; |
- if (row.isHistogram) { |
- histogramNames.push(value.name); |
- } |
+ if (row.sanitizedValue !== undefined) tableSum += row.sanitizedValue; |
} |
tableRows.sort((x, y) => x.compare(y)); |
- if (tableSum > 0) { |
+ if (tableRows.length > 1) { |
let summaryDisplayElement = tableSum; |
if (this.chart_.unit !== undefined) { |
summaryDisplayElement = this.chart_.unit.format(tableSum); |
@@ -312,13 +334,15 @@ tr.exportTo('tr.v.ui', function() { |
const chartData = {x: 0}; |
for (const row of tableRows) { |
- if (row.numberValue === undefined) continue; |
+ if (row.sanitizedValue === undefined) continue; |
- // Let the row compute its percentage. |
- row.tableSum = tableSum; |
+ if (tableRows.length > 1) { |
+ // Let the row compute its percentage. |
+ row.tableSum = tableSum; |
+ } |
// Add it to the chart. |
- chartData[row.name] = row.numberValue; |
+ chartData[row.name] = row.sanitizedValue; |
// Configure the colors. |
const dataSeries = this.chart_.getDataSeries(row.name); |
@@ -333,7 +357,7 @@ tr.exportTo('tr.v.ui', function() { |
this.$.table.rebuild(); |
} |
- if (Object.keys(chartData).length > 1) { |
+ if (Object.keys(chartData).length > 2) { |
this.$.container.style.display = 'block'; |
this.$.empty.style.display = 'none'; |
this.chart_.data = [chartData]; |