scalar: fix tiny chart (#2605)

This change updates `active` prop to a template of a
tf-category-paginated-view when the category pane is collapsed/expanded.
It also updates the `active` when a component is no longer mounted onto
the DOM.

The change does not contain any redraw logic but it magically works
because the DataLoaderBehavior, when active changes to active, fetches
data point for ones that are not in cache and then triggers rerender.
This flow of logic is indirect and thus can be made to be more direct
but that can cause too many "redraw" call which can be quite expensive
(scales poorly with # of runs).

Related to #2595.

Author: stephanwlee

tensorboard/components/tf_paginated_view/test/categoryPaginatedViewTests.ts

@@ -156,6 +156,33 @@ namespace tf_paginated_view {
       expect(_getPageCount()).to.equal(5);
     });
 
+    it('sets all items to active=true when opened is true', () => {
+      expect(getItem('id0').hasAttribute('active')).to.be.true;
+      expect(getItem('id1').hasAttribute('active')).to.be.true;
+    });
+
+    it('sets all items to active=false when opened is false', async () => {
+      querySelector('button').click();
+      await flushAllP();
+
+      expect(getItem('id0').hasAttribute('active')).to.be.false;
+      expect(getItem('id1').hasAttribute('active')).to.be.false;
+    });
+
+    it('sets item to inactive when it is out of view', async () => {
+      // The DOM will be removed from document but it will be updated. Hold
+      // references to them here.
+      const item0 = getItem('id0');
+      const item1 = getItem('id1');
+
+      await goNext();
+
+      expect(item0.hasAttribute('active')).to.be.false;
+      expect(item1.hasAttribute('active')).to.be.false;
+      expect(getItem('id2').hasAttribute('active')).to.be.true;
+      expect(getItem('id3').hasAttribute('active')).to.be.true;
+    });
+
     function _getPageCount(): number {
       return view.$.view._pageCount;
     }

tensorboard/components/tf_paginated_view/test/tests.html

@@ -32,7 +32,11 @@
         category="[[category]]"
       >
         <template>
-          <span id$="[[item.id]]" number$="[[randomNumber]]">
+          <span
+            id$="[[item.id]]"
+            number$="[[randomNumber]]"
+            active$="[[active]]"
+          >
             [[item.content]]
           </span>
         </template>

tensorboard/components/tf_paginated_view/tf-category-paginated-view.html

@@ -268,6 +268,11 @@
           readOnly: true,
         },
 
+        _contentActive: {
+          type: Boolean,
+          computed: '_computeContentActive(opened)',
+        },
+
         disablePagination: {
           type: Boolean,
           value: false,
@@ -393,6 +398,10 @@
         this._setOpened(!this.opened);
       },
 
+      _computeContentActive() {
+        return this.opened;
+      },
+
       _onPaneRenderedChanged(newRendered, oldRendered) {
         if (newRendered && newRendered !== oldRendered) {
           // Force dom-if render without waiting for one rAF.

tensorboard/components/tf_paginated_view/tf-dom-repeat.html

@@ -48,6 +48,15 @@
           value: 'item',
         },
 
+        /**
+         * Whether all stamped items are active or not.
+         * @protected
+         */
+        _contentActive: {
+          type: Boolean,
+          value: true,
+        },
+
         _domBootstrapped: {
           type: Boolean,
           value: false,
@@ -97,6 +106,7 @@
       observers: [
         '_bootstrapDom(_itemsRendered, isAttached)',
         '_updateDom(_renderedItems.*, _domBootstrapped)',
+        '_updateActive(_contentActive)',
         '_trimCache(_cacheSize)',
       ],
 
@@ -135,7 +145,7 @@
             parentModel: true,
             instanceProps: {
               [this.as]: true,
-              active: true,
+              active: this._contentActive,
             },
             forwardHostProp: function(prop, value) {
               this._renderedTemplateInst.forEach((inst) => {
@@ -166,6 +176,14 @@
         this._domBootstrapped = true;
       },
 
+      _updateActive() {
+        if (!this._domBootstrapped) return;
+
+        Array.from(this._renderedTemplateInst.values()).forEach((inst) => {
+          inst.notifyPath('active', this._contentActive);
+        });
+      },
+
       _updateDom(event) {
         if (!this._domBootstrapped) return;
         // These are uninteresting.
@@ -193,7 +211,7 @@
           if (this._renderedTemplateInst.has(key)) {
             this._renderedTemplateInst
               .get(key)
-              .notifyPath(this.as, event.value, true /* fromAbove */);
+              .notifyPath(this.as, event.value);
           } else {
             console.warn(
               `Expected '${key}' to exist in the DOM but ` +
@@ -213,8 +231,11 @@
         if (this._lruCachedItems.has(key)) {
           fragOrEl = this._lruCachedItems.get(key);
           this._lruCachedItems.delete(key);
+          this._renderedTemplateInst
+            .get(key)
+            .notifyPath('active', this._contentActive);
         } else {
-          const prop = {[this.as]: item, active: true};
+          const prop = {[this.as]: item, active: this._contentActive};
           const inst = new this._ctor(prop);
           fragOrEl = inst.root;
           this._renderedTemplateInst.set(key, inst);
@@ -234,7 +255,9 @@
 
       _removeItem(item, node) {
         Polymer.dom(node.parentNode).removeChild(node);
-        this._lruCachedItems.set(this._getItemKey(item), node);
+        const key = this._getItemKey(item);
+        this._lruCachedItems.set(key, node);
+        this._renderedTemplateInst.get(key).notifyPath('active', false);
       },
 
       _trimCache() {

tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-dashboard.html

@@ -156,7 +156,7 @@ <h3>No scalar data was found.</h3>
             >
               <template>
                 <tf-scalar-card
-                  active="[[active]"
+                  active="[[active]]"
                   data-to-load="[[item.series]]"
                   ignore-y-outliers="[[_ignoreYOutliers]]"
                   multi-experiments="[[_getMultiExperiments(dataSelection)]]"