Fixed some shrunk histogram issue (#1465)

Repro step
---
1. launch with an empty tag regex
2. type a character (that'd result in few matches) then delete it
   quickly
3. after few moment, type the character again

Cause
---
dom-if has issue where if="false" does not remove the DOM but rather
simply hides the slot.
https://github.com/Polymer/polymer/blob/1.x/src/lib/template/dom-if.html#L127

While the pane is briefly shown in step #2, histogram-loader fetches
data and before it has chance to draw the series, dom-if can hide the
DOM. As data comes back, histogram tries to draw based on the bounding
box that is shrunken to 0x0 since its container is no longer displayed.
To work around these issues, we now listen to category-pane show event
to redraw all histogram.

Author: stephanwlee

tensorboard/components/tf_categorization_utils/tf-category-pane.html

@@ -20,7 +20,7 @@
 
 <dom-module id="tf-category-pane">
   <template>
-    <template is="dom-if" if="[[_rendered]]">
+    <template is="dom-if" if="[[_rendered]]" id="ifRendered">
       <button class="heading"
               on-tap="_togglePane"
               open-button$="[[opened]]">
@@ -52,7 +52,7 @@
       </button>
       <iron-collapse opened="[[opened]]">
         <div class="content">
-          <template is="dom-if" if="[[opened]]" restamp="[[restamp]]">
+          <template is="dom-if" if="[[opened]]" id="ifOpened">
             <slot></slot>
           </template>
         </div>
@@ -172,6 +172,23 @@
         },
       },
 
+      listeners: {
+        // Q: Why listen to dom-change when you know which property change
+        // triggered dom-if to change?
+        // A: https://github.com/Polymer/polymer/blob/1.x/src/lib/template/dom-if.html#L131
+        // `render` in dom-if is debounced and visibility of content does not
+        // change until it has been invoked.
+        'dom-change': '_notifyVisibilityChange',
+      },
+
+      _notifyVisibilityChange(event) {
+        if (event.target.id == 'ifRendered' ||
+            event.target.id == 'ifOpened') {
+          this.fire(
+              'content-visibility-changed', this._rendered && this.opened);
+        }
+      },
+
       _computeCount() {
         return this.category.items.length;
       },

tensorboard/plugins/histogram/tf_histogram_dashboard/tf-histogram-dashboard.html

@@ -91,7 +91,11 @@ <h3>No histogram data was found.</h3>
         <template is="dom-if" if="[[!_dataNotFound]]">
           <tf-tag-filterer tag-filter="{{_tagFilter}}"></tf-tag-filterer>
           <template is="dom-repeat" items="[[_categories]]" as="category">
-            <tf-category-pane category="[[category]]" opened="[[_shouldOpen(index)]]">
+            <tf-category-pane
+              category="[[category]]"
+              opened="[[_shouldOpen(index)]]"
+              restamp="[[_restamp]]"
+            >
               <tf-paginated-view
                 items="[[category.items]]"
                 pages="{{category._pages}}"
@@ -148,6 +152,10 @@ <h3>No histogram data was found.</h3>
         _runToTagInfo: Object,
         _dataNotFound: Boolean,
         _tagFilter: String,
+        _restamp: {
+          type: Boolean,
+          value: false,
+        },
 
         // Categories must only be computed after _dataNotFound is found to be
         // true and then polymer DOM templating responds to that finding. We
@@ -165,6 +173,16 @@ <h3>No histogram data was found.</h3>
         },
       },
 
+      listeners: {
+        'content-visibility-changed': '_redrawCategoryPane',
+      },
+
+      _redrawCategoryPane(event, val) {
+        if (!val) return;
+        event.target.querySelectorAll('tf-histogram-loader')
+            .forEach(histogram => histogram.redraw());
+      },
+
       ready() {
         this.reload();
       },