Linkify sample Breakdowns via RelatedHistogramBreakdowns.

tracing/tracing/value/ui/breakdown_span_test.html

Index: tracing/tracing/value/ui/breakdown_span_test.html
diff --git a/tracing/tracing/value/ui/breakdown_span_test.html b/tracing/tracing/value/ui/breakdown_span_test.html
index 60190ea61965a8dc65ece22382b09e43a58d14c5..9f9844716e86a68d40db3aa8e4b95fdff193967d 100644
--- a/tracing/tracing/value/ui/breakdown_span_test.html
+++ b/tracing/tracing/value/ui/breakdown_span_test.html
@@ -119,5 +119,62 @@ tr.b.unittest.testSuite(function() {
     assert.strictEqual('TR-V-UI-BREAKDOWN-SPAN', span.tagName);
     this.addHTMLOutput(span);
   });
+
+  test('correlate', function() {
+    const sample0Breakdown = new tr.v.d.Breakdown();
+    sample0Breakdown.set('a', 5);
+    sample0Breakdown.set('b', 3);
+    sample0Breakdown.set('c', 2);
+    const sample1Breakdown = new tr.v.d.Breakdown();
+    sample1Breakdown.set('a', 50);
+    sample1Breakdown.set('b', 30);
+    sample1Breakdown.set('c', 20);
+    const relatedBreakdown = new tr.v.d.RelatedHistogramBreakdown();
+    relatedBreakdown.set('a', tr.v.Histogram.create('root:a',
+        tr.b.Unit.byName.timeDurationInMs, [5, 50]));
+    relatedBreakdown.set('b', tr.v.Histogram.create('root:b',
+        tr.b.Unit.byName.timeDurationInMs, [3, 30]));
+    relatedBreakdown.set('c', tr.v.Histogram.create('root:c',
+        tr.b.Unit.byName.timeDurationInMs, [2, 20]));
+    const hist = tr.v.Histogram.create('root',
+        tr.b.Unit.byName.timeDurationInMs, [
+          {
+            value: 10,
+            diagnostics: new Map([['breakdown', sample0Breakdown]]),
+          },
+          {
+            value: 100,
+            diagnostics: new Map([['breakdown', sample1Breakdown]]),
+          },
+        ], {
+          diagnostics: new Map([
+            ['breakdown', relatedBreakdown],
+          ]),
+        });
+    const span = tr.v.ui.createDiagnosticSpan(sample0Breakdown, 'breakdown',
+        hist);
+    this.addHTMLOutput(span);
+    const links = tr.ui.b.findDeepElementsMatching(span,
+        'tr-ui-a-analysis-link');
+    assert.lengthOf(links, 4);
+    assert.strictEqual(links[0].title, '');
+    assert.strictEqual(links[1].title, 'root:a');
+    assert.strictEqual(links[2].title, 'root:b');
+    assert.strictEqual(links[3].title, 'root:c');
+    assert.strictEqual(links[0].textContent, 'Select All');
+    assert.strictEqual(links[1].textContent, 'a');
+    assert.strictEqual(links[2].textContent, 'b');
+    assert.strictEqual(links[3].textContent, 'c');
+    assert.lengthOf(links[0].selection, 3);
+    assert.strictEqual(links[0].selection[0], 'root:a');
+    assert.strictEqual(links[0].selection[1], 'root:b');
+    assert.strictEqual(links[0].selection[2], 'root:c');
+    assert.lengthOf(links[1].selection, 1);
+    assert.strictEqual(links[1].selection[0], 'root:a');
+    assert.lengthOf(links[2].selection, 1);
+    assert.strictEqual(links[2].selection[0], 'root:b');
+    assert.lengthOf(links[3].selection, 1);
+    assert.strictEqual(links[3].selection[0], 'root:c');
+  });
 });
 </script>