Consolidate the dimensionality of PCA and t-SNE to one polymer variable, and

save it in the state object when bookmarking the world.
Change: 135824875

4 files changed, 30 insertions, 38 deletions

diff --git a/tensorflow/tensorboard/components/vz-projector/data.ts b/tensorflow/tensorboard/components/vz-projector/data.ts
index 31ab9b2734..ed3ad53f76 100644
--- a/tensorflow/tensorboard/components/vz-projector/data.ts
+++ b/tensorflow/tensorboard/components/vz-projector/data.ts
@@ -416,4 +416,7 @@ export interface State {
 
   /** Label by option. */
   selectedLabelOption?: string;
+
+  /** Whether the state is a 3d view. If false, the state is a 2d view. */
+  is3d?: boolean;
 }
diff --git a/tensorflow/tensorboard/components/vz-projector/vz-projector-projections-panel.html b/tensorflow/tensorboard/components/vz-projector/vz-projector-projections-panel.html
index 55201d830a..2735e5a164 100644
--- a/tensorflow/tensorboard/components/vz-projector/vz-projector-projections-panel.html
+++ b/tensorflow/tensorboard/components/vz-projector/vz-projector-projections-panel.html
@@ -256,7 +256,7 @@ paper-icon-button[active] {
     <label>Dimension</label>
     <div class="two-way-toggle">
       <span>2D</span>
-      <paper-toggle-button id="tsne-toggle" checked>3D</paper-toggle-button>
+      <paper-toggle-button id="tsne-toggle" checked="{{is3d}}">3D</paper-toggle-button>
     </div>
   </div>
   <div class="slider tsne-perplexity">
@@ -335,7 +335,7 @@ paper-icon-button[active] {
         </template>
       </paper-listbox>
     </paper-dropdown-menu>
-    <paper-checkbox id="z-checkbox" checked="{{hasPcaZ}}"></paper-checkbox>
+    <paper-checkbox id="z-checkbox" checked="{{is3d}}"></paper-checkbox>
   </div>
 </div>
 <!-- Custom Controls -->
diff --git a/tensorflow/tensorboard/components/vz-projector/vz-projector-projections-panel.ts b/tensorflow/tensorboard/components/vz-projector/vz-projector-projections-panel.ts
index d696b01965..ddae4e077e 100644
--- a/tensorflow/tensorboard/components/vz-projector/vz-projector-projections-panel.ts
+++ b/tensorflow/tensorboard/components/vz-projector/vz-projector-projections-panel.ts
@@ -23,12 +23,12 @@ import {PolymerElement, PolymerHTMLElement} from './vz-projector-util';
 export let ProjectionsPanelPolymer = PolymerElement({
   is: 'vz-projector-projections-panel',
   properties: {
+    is3d: {type: Boolean, value: true, observer: '_dimensionsObserver'},
     // PCA projection.
     pcaComponents: {type: Array, value: d3.range(1, 11)},
     pcaX: {type: Number, value: 1, observer: 'showPCA'},
     pcaY: {type: Number, value: 2, observer: 'showPCA'},
     pcaZ: {type: Number, value: 3, observer: 'showPCA'},
-    hasPcaZ: {type: Boolean, value: true},
     // Custom projection.
     selectedSearchByMetadataOption: {
       type: String,
@@ -43,15 +43,15 @@ export let ProjectionsPanelPolymer = PolymerElement({
  */
 export class ProjectionsPanel extends ProjectionsPanelPolymer {
   selectedSearchByMetadataOption: string;
+  is3d: boolean;
 
   private projector: Projector;
+  private currentProjection: Projection;
 
   // The working subset of the data source's original data set.
   private currentDataSet: DataSet;
   private dim: number;
 
-  /** Number of dimensions for the scatter plot. */
-  private dimension: number;
   /** T-SNE perplexity. Roughly how many neighbors each point influences. */
   private perplexity: number;
   /** T-SNE learning rate. */
@@ -69,7 +69,6 @@ export class ProjectionsPanel extends ProjectionsPanelPolymer {
   private pcaX: number;
   private pcaY: number;
   private pcaZ: number;
-  private hasPcaZ: boolean;
 
   /** Polymer elements. */
   private runTsneButton: d3.Selection<HTMLButtonElement>;
@@ -80,15 +79,12 @@ export class ProjectionsPanel extends ProjectionsPanelPolymer {
   initialize(projector: Projector) {
     this.projector = projector;
 
-    this.dimension = 3;
+    this.is3d = true;
 
     // Set up TSNE projections.
     this.perplexity = 30;
     this.learningRate = 10;
 
-    // Set up PCA projections.
-    this.hasPcaZ = true;
-
     // Setup Custom projections.
     this.centroidValues = {xLeft: null, xRight: null, yUp: null, yDown: null};
     this.clearCentroids();
@@ -110,27 +106,6 @@ export class ProjectionsPanel extends ProjectionsPanelPolymer {
       self.showTab(id);
     });
 
-    // Unknown why, but the polymer toggle button stops working
-    // as soon as you do d3.select() on it.
-    let tsneToggle = this.querySelector('#tsne-toggle') as HTMLInputElement;
-    let zCheckbox = this.querySelector('#z-checkbox') as HTMLInputElement;
-
-    // PCA controls.
-    zCheckbox.addEventListener('change', () => {
-      // Make sure tsne stays in the same dimension as PCA.
-      this.dimension = this.hasPcaZ ? 3 : 2;
-      tsneToggle.checked = this.hasPcaZ;
-      this.showPCA();
-    });
-
-    // TSNE controls.
-    tsneToggle.addEventListener('change', () => {
-      // Make sure PCA stays in the same dimension as tsne.
-      this.hasPcaZ = tsneToggle.checked;
-      this.dimension = tsneToggle.checked ? 3 : 2;
-      this.showTSNE();
-    });
-
     this.runTsneButton = this.dom.select('.run-tsne');
     this.runTsneButton.on('click', () => this.runTSNE());
     this.stopTsneButton = this.dom.select('.stop-tsne');
@@ -171,6 +146,14 @@ export class ProjectionsPanel extends ProjectionsPanelPolymer {
     this.showTab('pca');
   }
 
+  _dimensionsObserver() {
+    if (this.currentProjection === 'pca') {
+      this.showPCA();
+    } else if (this.currentProjection === 'tsne') {
+      this.showTSNE();
+    }
+  }
+
   metadataChanged(metadata: MetadataInfo) {
     // Project by options for custom projections.
     let searchByMetadataIndex = -1;
@@ -190,6 +173,11 @@ export class ProjectionsPanel extends ProjectionsPanelPolymer {
   }
 
   public showTab(id: Projection) {
+    if (id === this.currentProjection) {
+      return;
+    }
+    this.currentProjection = id;
+
     let tab = this.dom.select('.ink-tab[data-tab="' + id + '"]');
     let pane =
         d3.select((tab.node() as HTMLElement).parentNode.parentNode.parentNode);
@@ -215,9 +203,8 @@ export class ProjectionsPanel extends ProjectionsPanelPolymer {
         // Accessors.
         i => this.currentDataSet.points[i].projections['tsne-0'],
         i => this.currentDataSet.points[i].projections['tsne-1'],
-        this.dimension === 3 ?
-            (i => this.currentDataSet.points[i].projections['tsne-2']) :
-            null,
+        this.is3d ? (i => this.currentDataSet.points[i].projections['tsne-2']) :
+                    null,
         // Axis labels.
         'tsne-0', 'tsne-1', true /** deferUpdate */);
 
@@ -232,7 +219,7 @@ export class ProjectionsPanel extends ProjectionsPanelPolymer {
     this.runTsneButton.attr('disabled', true);
     this.stopTsneButton.attr('disabled', null);
     this.currentDataSet.projectTSNE(
-        this.perplexity, this.learningRate, this.dimension,
+        this.perplexity, this.learningRate, this.is3d ? 3 : 2,
         (iteration: number) => {
           if (iteration != null) {
             this.dom.select('.run-tsne-iter').text(iteration);
@@ -253,15 +240,15 @@ export class ProjectionsPanel extends ProjectionsPanelPolymer {
       let x = this.pcaX - 1;
       let y = this.pcaY - 1;
       let z = this.pcaZ - 1;
-      let hasZ = this.dimension === 3;
 
       this.projector.setProjection(
           'pca',
           // Accessors.
           i => this.currentDataSet.points[i].projections['pca-' + x],
           i => this.currentDataSet.points[i].projections['pca-' + y],
-          hasZ ? (i => this.currentDataSet.points[i].projections['pca-' + z]) :
-                 null,
+          this.is3d ?
+              (i => this.currentDataSet.points[i].projections['pca-' + z]) :
+              null,
           // Axis labels.
           'pca-' + x, 'pca-' + y);
     });
diff --git a/tensorflow/tensorboard/components/vz-projector/vz-projector.ts b/tensorflow/tensorboard/components/vz-projector/vz-projector.ts
index 13b3359024..c1e83dfbbf 100644
--- a/tensorflow/tensorboard/components/vz-projector/vz-projector.ts
+++ b/tensorflow/tensorboard/components/vz-projector/vz-projector.ts
@@ -610,6 +610,7 @@ export class Projector extends ProjectorPolymer implements SelectionContext,
     }
 
     state.selectedProjection = this.selectedProjection;
+    state.is3d = this.projectionsPanel.is3d;
     state.selectedPoints = this.selectedPointIndices;
     state.cameraPosition = this.scatterPlot.getCameraPosition();
     state.cameraTarget = this.scatterPlot.getCameraTarget();
@@ -629,6 +630,7 @@ export class Projector extends ProjectorPolymer implements SelectionContext,
     if (state.selectedProjection === 'tsne') {
       this.currentDataSet.hasTSNERun = true;
     }
+    this.projectionsPanel.is3d = state.is3d;
     this.projectionsPanel.showTab(state.selectedProjection);
 
     this.notifySelectionChanged(state.selectedPoints);