Refactor Histogram relationship diagnostics.

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..c80ea5365acc6a6a4173b8f7f796e278ab1b98c9 100644
--- a/tracing/tracing/value/ui/breakdown_span_test.html
+++ b/tracing/tracing/value/ui/breakdown_span_test.html
@@ -8,7 +8,6 @@ found in the LICENSE file.
 <link rel="import" href="/tracing/base/fixed_color_scheme.html">
 <link rel="import" href="/tracing/ui/base/deep_utils.html">
 <link rel="import" href="/tracing/value/diagnostics/breakdown.html">
-<link rel="import" href="/tracing/value/diagnostics/related_histogram_breakdown.html">
 <link rel="import" href="/tracing/value/histogram.html">
 <link rel="import" href="/tracing/value/ui/breakdown_span.html">
 <link rel="import" href="/tracing/value/ui/diagnostic_span.html">
@@ -17,38 +16,6 @@ found in the LICENSE file.
 'use strict';
 
 tr.b.unittest.testSuite(function() {
-  test('instantiate_RelatedHistogramBreakdown', function() {
-    const breakdown = new tr.v.d.RelatedHistogramBreakdown();
-
-    const qux = new tr.v.Histogram('qux', tr.b.Unit.byName.timeDurationInMs);
-    qux.addSample(1);
-    breakdown.add(qux);
-
-    // The title of the analysis-link should match the histogram name, not the
-    // breakdown key.
-    const foo = new tr.v.Histogram('foo', tr.b.Unit.byName.timeDurationInMs);
-    breakdown.set('f', foo);
-
-    const bar = new tr.v.Histogram('bar', tr.b.Unit.byName.timeDurationInMs);
-    breakdown.add(bar);
-
-    for (let i = 0; i < 1e2; ++i) {
-      foo.addSample(i);
-      bar.addSample(i);
-    }
-
-    const span = tr.v.ui.createDiagnosticSpan(breakdown, '', new tr.v.Histogram(
-        '', tr.b.Unit.byName.timeDurationInMs));
-    assert.strictEqual('TR-V-UI-BREAKDOWN-SPAN', span.tagName);
-    this.addHTMLOutput(span);
-    assert.isDefined(tr.ui.b.findDeepElementMatchingPredicate(
-        span, e => e.textContent === '9,901.000 ms'));
-    assert.isDefined(tr.ui.b.findDeepElementMatchingPredicate(
-        span, e => e.textContent === '4,950.000 ms'));
-    assert.isDefined(tr.ui.b.findDeepElementMatchingPredicate(
-        span, e => e.textContent === '8,000.000 ms'));
-  });
-
   test('instantiate_Breakdown', function() {
     let breakdown = new tr.v.d.Breakdown();
     breakdown.colorScheme =
@@ -119,5 +86,63 @@ tr.b.unittest.testSuite(function() {
     assert.strictEqual('TR-V-UI-BREAKDOWN-SPAN', span.tagName);
     this.addHTMLOutput(span);
   });
+
+  test('correlate', function() {
+    const histograms = new tr.v.HistogramSet();
+    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 related = new tr.v.d.RelatedNameMap();
+    related.set('a', histograms.createHistogram('root:a',
+        tr.b.Unit.byName.timeDurationInMs, [5, 50]).name);
+    related.set('b', tr.v.Histogram.create('root:b',
+        tr.b.Unit.byName.timeDurationInMs, [3, 30]).name);
+    related.set('c', tr.v.Histogram.create('root:c',
+        tr.b.Unit.byName.timeDurationInMs, [2, 20]).name);
+    const hist = histograms.createHistogram('root',
+        tr.b.Unit.byName.timeDurationInMs, [
+          {
+            value: 10,
+            diagnostics: new Map([['breakdown', sample0Breakdown]]),
+          },
+          {
+            value: 100,
+            diagnostics: new Map([['breakdown', sample1Breakdown]]),
+          },
+        ], {
+          diagnostics: new Map([
+            ['breakdown', related],
+          ]),
+        });
+    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>