Load new projector config when dataset changes (tensorflow#519)

Previously, when the data provider changed, a new projector config might not load because the name of the new run (string) could stay the same - indeed the name of the run is always 'proto'.

This change makes it so that we load a new projector config and correspondingly update the UI when the data provider changes (even if the run name changes).

Fixes tensorflow#478. This commit is coauthored by @svsgoogle and @chihuahua.

Author: chihuahua

tensorboard/plugins/projector/vz_projector/vz-projector-data-panel.ts

@@ -25,7 +25,7 @@ export let DataPanelPolymer = PolymerElement({
   is: 'vz-projector-data-panel',
   properties: {
     selectedTensor: {type: String, observer: '_selectedTensorChanged'},
-    selectedRun: {type: String, observer: '_selectedRunChanged'},
+    selectedRun: String,
     selectedColorOptionName: {
       type: String,
       notify: true,
@@ -35,7 +35,10 @@ export let DataPanelPolymer = PolymerElement({
         {type: String, notify: true, observer: '_selectedLabelOptionChanged'},
     normalizeData: Boolean,
     showForceCategoricalColorsCheckbox: Boolean
-  }
+  },
+  observers: [
+    '_generateUiForNewCheckpointForRun(selectedRun)',
+  ],
 });
 
 export class DataPanel extends DataPanelPolymer {
@@ -88,7 +91,15 @@ export class DataPanel extends DataPanelPolymer {
       this.runNames = runs;
       // Choose the first run by default.
       if (this.runNames.length > 0) {
-        this.selectedRun = runs[0];
+        if (this.selectedRun != runs[0]) {
+          // This set operation will automatically trigger the observer.
+          this.selectedRun = runs[0];
+        } else {
+          // Explicitly load the projector config. We explicitly load because
+          // the run name stays the same, which means that the observer won't
+          // actually be triggered by setting the selected run.
+          this._generateUiForNewCheckpointForRun(this.selectedRun);
+        }
       }
     });
   }
@@ -225,8 +236,8 @@ export class DataPanel extends DataPanelPolymer {
         this.selectedRun, this.getEmbeddingInfoByName(this.selectedTensor));
   }
 
-  _selectedRunChanged() {
-    this.dataProvider.retrieveProjectorConfig(this.selectedRun, info => {
+  _generateUiForNewCheckpointForRun(selectedRun) {
+    this.dataProvider.retrieveProjectorConfig(selectedRun, info => {
       this.projectorConfig = info;
       let names =
           this.projectorConfig.embeddings.map(e => e.tensorName)