ng: fix tiny charts (tensorflow#3442)

There are many instances when vz_line_chart can be waiting to be
redrawn: it can wait for debouncing, requestAnimationFrame, and/or data.

One of the way Polymer based TensorBoard solved this asynchronousity is
by "visibility: hidden"ing the plugin container instead of "display:
none". This has an effect of giving the container non-zero width and
allows the vz_line_chart to properly render even in the background.

This change replicates
https://github.com/tensorflow/tensorboard/blob/34530f4789647a81687cc2983866820096b831b1/tensorboard/components/tf_tensorboard/tf-tensorboard.html#L412-L418.

Author: stephanwlee

tensorboard/webapp/plugins/plugins_component.ts

@@ -41,7 +41,12 @@ import {PluginRegistryModule} from './plugin_registry_module';
   selector: 'plugins-component',
   templateUrl: './plugins_component.ng.html',
   styles: [
-    '.plugins { height: 100%; }',
+    `
+      .plugins {
+        height: 100%;
+        position: relative;
+      }
+    `,
     'iframe { border: 0; height: 100%; width: 100%; }',
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -79,12 +84,27 @@ export class PluginsComponent implements OnChanges {
 
   private renderPlugin(plugin: UiPluginMetadata) {
     for (const element of this.pluginInstances.values()) {
-      element.style.display = 'none';
+      Object.assign(element.style, {
+        maxHeight: 0,
+        overflow: 'hidden',
+        /**
+         * We further make containers invisible. Some elements may anchor to
+         * the viewport instead of the container, in which case setting the max
+         * height here to 0 will not hide them.
+         **/
+        visibility: 'hidden',
+        position: 'absolute',
+      });
     }
 
     if (this.pluginInstances.has(plugin.id)) {
       const instance = this.pluginInstances.get(plugin.id) as HTMLElement;
-      instance.style.removeProperty('display');
+      Object.assign(instance.style, {
+        maxHeight: null,
+        overflow: null,
+        visibility: null,
+        position: null,
+      });
       return;
     }
 

tensorboard/webapp/plugins/plugins_container_test.ts

@@ -47,6 +47,19 @@ function expectPluginIframe(element: HTMLElement, name: string) {
   );
 }
 
+class TestableCustomElement extends HTMLElement {
+  constructor() {
+    super();
+
+    const shadow = this.attachShadow({mode: 'open'});
+    const wrapper = document.createElement('div');
+    wrapper.textContent = 'Test TensorBoard';
+    shadow.appendChild(wrapper);
+  }
+}
+
+customElements.define('tb-bar', TestableCustomElement);
+
 describe('plugins_component', () => {
   let store: MockStore<State>;
   const PLUGINS = {
@@ -163,9 +176,9 @@ describe('plugins_component', () => {
       expect(nativeElement.childElementCount).toBe(2);
       const [fooElement, barElement] = nativeElement.children;
       expectPluginIframe(fooElement, 'foo');
-      expect(fooElement.style.display).toBe('none');
+      expect(fooElement.style.visibility).toBe('hidden');
       expect(barElement.tagName).toBe('TB-BAR');
-      expect(barElement.style.display).not.toBe('none');
+      expect(barElement.style.visibility).not.toBe('hidden');
     });
 
     it('does not create same instance of plugin', async () => {
@@ -189,9 +202,9 @@ describe('plugins_component', () => {
 
       const {nativeElement} = fixture.debugElement.query(By.css('.plugins'));
       expect(nativeElement.childElementCount).toBe(2);
-      const [fooElement, barElement] = nativeElement.children;
+      const [fooElement] = nativeElement.children;
       expectPluginIframe(fooElement, 'foo');
-      expect(fooElement.style.display).not.toBe('none');
+      expect(fooElement.style.visibility).not.toBe('hidden');
     });
 
     it('creates components for plugins registered dynamically', async () => {
@@ -208,6 +221,25 @@ describe('plugins_component', () => {
       const pluginElement = nativeElement.children[0];
       expect(pluginElement.tagName).toBe('EXTRA-DASHBOARD');
     });
+
+    it('hides inactive plugin but keeps their width', async () => {
+      setActivePlugin('bar');
+
+      const fixture = TestBed.createComponent(PluginsContainer);
+      fixture.detectChanges();
+
+      setActivePlugin('foo');
+      fixture.detectChanges();
+
+      const {nativeElement} = fixture.debugElement.query(By.css('.plugins'));
+      const [barElement] = nativeElement.children;
+      expect(barElement.shadowRoot.firstElementChild.textContent).toBe(
+        'Test TensorBoard'
+      );
+      expect(
+        barElement.shadowRoot.firstElementChild.clientWidth
+      ).toBeGreaterThan(0);
+    });
   });
 
   describe('updates', () => {