ng: make sure we do not push 'null' onto hash (tensorflow#3494)

In the Angular version of TensorBoard, we keep the activePlugin state in
the Ngrx Store. In it, when activePlugin was never set, we use `null` to
denote the emptiness. However, this null state was incompatible with how
hash_storage works.

tf_storage coerces the input, which wrongly coerced the null state
(Angular build tools did not catch the wrong typing) in the activePlugin
to "null" and set the hash as "#null".

This change fixes the issue by converting `null` to '' which tf_storage
understands to be the empty state.

Author: stephanwlee

tensorboard/webapp/core/views/hash_storage_component.ts

@@ -41,7 +41,7 @@ export class HashStorageComponent implements OnInit, OnChanges, OnDestroy {
   constructor(private readonly deepLinker: HashDeepLinker) {}
 
   @Input()
-  activePluginId!: string;
+  activePluginId!: string | null;
 
   @Output()
   onValueChange = new EventEmitter<{prop: ChangedProp; value: string}>();
@@ -74,11 +74,16 @@ export class HashStorageComponent implements OnInit, OnChanges, OnDestroy {
   ngOnChanges(changes: SimpleChanges) {
     if (changes['activePluginId']) {
       const activePluginIdChange = changes['activePluginId'];
-      const option: SetStringOption = {};
+      const option: SetStringOption = {defaultValue: ''};
       if (activePluginIdChange.firstChange) {
         option.useLocationReplace = true;
       }
-      this.deepLinker.setPluginId(activePluginIdChange.currentValue, option);
+
+      const value =
+        activePluginIdChange.currentValue === null
+          ? ''
+          : activePluginIdChange.currentValue;
+      this.deepLinker.setPluginId(value, option);
     }
   }
 }

tensorboard/webapp/core/views/hash_storage_test.ts

@@ -70,6 +70,29 @@ describe('hash storage test', () => {
     fixture.detectChanges();
     expect(setPluginIdSpy).toHaveBeenCalledWith('foo', {
       useLocationReplace: true,
+      defaultValue: '',
+    });
+  });
+
+  it('sets the hash to empty string when activePlugin is not set', () => {
+    store.overrideSelector(getActivePlugin, null);
+    const fixture = TestBed.createComponent(HashStorageContainer);
+    fixture.detectChanges();
+
+    expect(setPluginIdSpy).toHaveBeenCalledWith('', {
+      useLocationReplace: true,
+      defaultValue: '',
+    });
+  });
+
+  it('sets the hash to empty string when activePlugin is empty string', () => {
+    store.overrideSelector(getActivePlugin, '');
+    const fixture = TestBed.createComponent(HashStorageContainer);
+    fixture.detectChanges();
+
+    expect(setPluginIdSpy).toHaveBeenCalledWith('', {
+      useLocationReplace: true,
+      defaultValue: '',
     });
   });
 
@@ -84,7 +107,7 @@ describe('hash storage test', () => {
     fixture.detectChanges();
 
     expect(setPluginIdSpy).toHaveBeenCalledTimes(2);
-    expect(setPluginIdSpy).toHaveBeenCalledWith('bar', {});
+    expect(setPluginIdSpy).toHaveBeenCalledWith('bar', jasmine.any(Object));
   });
 
   it('dispatches plugin changed event when hash changes', () => {