Linkify sample Breakdowns via RelatedHistogramBreakdowns.

tracing/tracing/value/ui/breakdown_span.html

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..e2f8ff46371fc8473c1102467e951c2738da52cb 100644
--- a/tracing/tracing/value/ui/breakdown_span.html
+++ b/tracing/tracing/value/ui/breakdown_span.html
@@ -85,12 +85,19 @@ tr.exportTo('tr.v.ui', function() {
   }
 
   class BreakdownTableRow {
-    constructor(name, value, unit, color) {
+    constructor(name, value, related, unit, color) {
       this.name_ = name;
       this.value = value;
+      this.related = related;
       this.unit = unit;
 
-      if (!this.isHistogram && typeof value !== 'number') {
+      this.histogram = related;
+      if (value instanceof tr.v.Histogram) {
+        this.histogram = value;
+        this.unit = value.unit;
+      }
+
+      if (!this.histogram && typeof value !== 'number') {
         throw new Error('unsupported value ' + value);
       }
 
@@ -102,9 +109,9 @@ tr.exportTo('tr.v.ui', function() {
       hsl.l *= 0.85;
       this.highlightedColor_ = tr.b.Color.fromHSL(hsl);
 
-      if (this.isHistogram) {
+      if (this.unit) {
         this.displayElement_ = tr.v.ui.createScalarSpan(this.numberValue, {
-          unit: this.value.unit,
+          unit: this.unit,
         });
       } else {
         this.displayElement_ = tr.ui.b.createSpan({
@@ -131,11 +138,12 @@ tr.exportTo('tr.v.ui', function() {
 
     get keySpan() {
       if (this.keySpan_ === undefined) {
-        if (this.isHistogram) {
+        if (this.histogram) {
           this.keySpan_ = document.createElement('tr-ui-a-analysis-link');
-          this.keySpan_.setSelectionAndContent([this.value.name], this.name);
+          this.keySpan_.setSelectionAndContent(
+              [this.histogram.name], this.name);
           this.keySpan_.color = this.color;
-          this.keySpan_.title = this.value.name;
+          this.keySpan_.title = this.histogram.name;
         } else {
           this.keySpan_ = document.createElement('span');
           this.keySpan_.innerText = this.name;
@@ -284,16 +292,25 @@ tr.exportTo('tr.v.ui', function() {
         colorScheme = (name) => DEFAULT_COLOR_SCHEME.colorForKey(name);
       }
 
+      let related = new Map();
+      if (this.diagnostic_ instanceof tr.v.d.Breakdown && this.histogram_) {
+        related = this.histogram_.diagnostics.get(this.name_);
+      }
+
       const tableRows = [];
       let tableSum = 0;
       const histogramNames = [];
       for (const [name, value] of this.diagnostic) {
         const row = new BreakdownTableRow(
-            name, value, this.chart_.unit, colorScheme(name));
+            name,
+            value,
+            related.get(name),
+            this.chart_.unit,
+            colorScheme(name));
         tableRows.push(row);
         if (row.numberValue !== undefined) tableSum += row.numberValue;
-        if (row.isHistogram) {
-          histogramNames.push(value.name);
+        if (row.histogram) {
+          histogramNames.push(row.histogram.name);
         }
       }
       tableRows.sort((x, y) => x.compare(y));