Refactor Histogram relationship diagnostics.

tracing/tracing/value/ui/histogram_span.html

Index: tracing/tracing/value/ui/histogram_span.html
diff --git a/tracing/tracing/value/ui/histogram_span.html b/tracing/tracing/value/ui/histogram_span.html
index ddc0b9aceb537cdb1f4567196e8ab0e47f65fb26..b557d0e505fb8dbf4453870f9648b3f095e33c30 100644
--- a/tracing/tracing/value/ui/histogram_span.html
+++ b/tracing/tracing/value/ui/histogram_span.html
@@ -90,15 +90,16 @@ tr.exportTo('tr.v.ui', function() {
       this.rowStateListener_ = this.onRowStateUpdate_.bind(this);
       this.rowState = new tr.v.ui.HistogramSetTableRowState();
 
-      this.histogram_ = undefined;
-      this.referenceHistogram_ = undefined;
-      this.graphWidth_ = undefined;
+      this.alpha_ = undefined;
+      this.anySampleDiagnostics_ = false;
+      this.canMergeSampleDiagnostics_ = true;
       this.graphHeight_ = undefined;
+      this.graphWidth_ = undefined;
+      this.histogram_ = undefined;
+      this.histograms_ = undefined;
       this.mouseDownBin_ = undefined;
       this.prevBrushedBinRange_ = new tr.b.math.Range();
-      this.anySampleDiagnostics_ = false;
-      this.canMergeSampleDiagnostics_ = true;
-      this.alpha_ = undefined;
+      this.referenceHistogram_ = undefined;
     },
 
     get rowState() {
@@ -165,7 +166,7 @@ tr.exportTo('tr.v.ui', function() {
       this.$.metric_diagnostics.tabLabel = 'histogram diagnostics';
       this.$.sample_diagnostics_container.tabLabel = 'sample diagnostics';
       this.$.metadata_diagnostics.tabLabel = 'metadata';
-      this.$.metadata_diagnostics.isMetadata = true;
+
       this.$.diagnostics.addEventListener(
           'selected-tab-change', this.onSelectedDiagnosticsChanged_.bind(this));
       this.$.drag_handle.target = this.$.container;
@@ -355,13 +356,15 @@ tr.exportTo('tr.v.ui', function() {
         }
       }
 
+      this.$.merge_sample_diagnostics.disabled = maps.length === 1;
+
       if (this.$.merge_sample_diagnostics.checked !==
           this.viewState.mergeSampleDiagnostics) {
         this.viewState.update({
           mergeSampleDiagnostics: this.$.merge_sample_diagnostics.checked});
       }
 
-      if (this.viewState.mergeSampleDiagnostics) {
+      if (this.viewState.mergeSampleDiagnostics && maps.length > 1) {
         const merged = new tr.v.d.DiagnosticMap();
         for (const map of maps) {
           merged.addDiagnostics(map);
@@ -372,7 +375,8 @@ tr.exportTo('tr.v.ui', function() {
       const mark = tr.b.Timing.mark('histogram-span',
           (this.viewState.mergeSampleDiagnostics ? 'merge' : 'split') +
            'SampleDiagnostics');
-      this.$.sample_diagnostics.diagnosticMaps = maps;
+      this.$.sample_diagnostics.build(
+          maps, false, this.histogram_, this.histograms_);
       mark.end();
 
       if (this.anySampleDiagnostics_) {
@@ -385,11 +389,10 @@ tr.exportTo('tr.v.ui', function() {
       return this.histogram_;
     },
 
-    set histogram(histogram) {
-      if (histogram === this.histogram_) return;
+    build(histogram, referenceHistogram, histograms) {
       this.histogram_ = histogram;
-      this.$.metric_diagnostics.histogram = histogram;
-      this.$.sample_diagnostics.histogram = histogram;
+      this.referenceHistogram_ = referenceHistogram;
+      this.histograms_ = histograms;
 
       this.anySampleDiagnostics_ = false;
       for (const bin of this.histogram.allBins) {
@@ -406,14 +409,6 @@ tr.exportTo('tr.v.ui', function() {
       return this.referenceHistogram_;
     },
 
-    set referenceHistogram(histogram) {
-      if (histogram === this.referenceHistogram_) {
-        return;
-      }
-      this.referenceHistogram_ = histogram;
-      if (this.histogram) this.updateContents_();
-    },
-
     set alpha(a) {
       if (tr.b.math.approximately(a, this.alpha_)) return;
       this.alpha_ = a;
@@ -471,10 +466,12 @@ tr.exportTo('tr.v.ui', function() {
       const metricDiagnosticMap = new tr.v.d.DiagnosticMap();
       const metadataDiagnosticMap = new tr.v.d.DiagnosticMap();
       for (const [key, diagnostic] of this.histogram.diagnostics) {
-        // Hide the 'mergedFrom' and 'mergedTo' diagnostics, which are
-        // implementation details.
-        if (key === tr.v.d.RESERVED_NAMES.MERGED_FROM) continue;
-        if (key === tr.v.d.RESERVED_NAMES.MERGED_TO) continue;
+        // https://github.com/catapult-project/catapult/issues/2842
+        if (diagnostic instanceof tr.v.d.UnmergeableDiagnosticSet) continue;
+        if (diagnostic instanceof tr.v.d.CollectedRelatedEventSet) continue;
+        if (diagnostic instanceof tr.v.d.GroupingPath) continue;
+        if (diagnostic instanceof tr.v.d.RelatedNameMap) continue;
+
         if (tr.v.d.RESERVED_NAMES_SET.has(key)) {
           metadataDiagnosticMap.set(key, diagnostic);
         } else {
@@ -484,14 +481,16 @@ tr.exportTo('tr.v.ui', function() {
 
       const diagnosticTabs = [];
       if (metricDiagnosticMap.size) {
-        this.$.metric_diagnostics.diagnosticMaps = [metricDiagnosticMap];
+        this.$.metric_diagnostics.build(
+            [metricDiagnosticMap], false, this.histogram_, this.histograms_);
         diagnosticTabs.push(this.$.metric_diagnostics);
       }
       if (this.anySampleDiagnostics_) {
         diagnosticTabs.push(this.$.sample_diagnostics_container);
       }
       if (metadataDiagnosticMap.size) {
-        this.$.metadata_diagnostics.diagnosticMaps = [metadataDiagnosticMap];
+        this.$.metadata_diagnostics.build(
+            [metadataDiagnosticMap], true, this.histogram_, this.histograms_);
         diagnosticTabs.push(this.$.metadata_diagnostics);
       }
       this.$.diagnostics.resetSubViews(diagnosticTabs);