From 7b6c1a697f9f2a945e99c11891f90664c240660f Mon Sep 17 00:00:00 2001
From: Zoey Li <31378877+alicialics@users.noreply.github.com>
Date: Wed, 5 Apr 2023 06:02:50 +0000
Subject: [PATCH] Move supervise by to projection panel

initialize input

fix lint

bookmark
---
 .../plugins/projector/vz_projector/data.ts    |   3 +
 .../vz-projector-data-panel.html.ts           |  35 ------
 .../vz_projector/vz-projector-data-panel.ts   |  91 +--------------
 .../vz-projector-projections-panel.html.ts    |  38 +++++++
 .../vz-projector-projections-panel.ts         | 104 ++++++++++++++++--
 .../projector/vz_projector/vz-projector.ts    |   7 --
 6 files changed, 134 insertions(+), 144 deletions(-)

diff --git a/tensorboard/plugins/projector/vz_projector/data.ts b/tensorboard/plugins/projector/vz_projector/data.ts
index 2cbca27d7a..f8d6a00a6d 100644
--- a/tensorboard/plugins/projector/vz_projector/data.ts
+++ b/tensorboard/plugins/projector/vz_projector/data.ts
@@ -668,6 +668,9 @@ export class State {
   tSNEIteration: number = 0;
   tSNEPerplexity: number = 0;
   tSNELearningRate: number = 0;
+  tSNESuperviseFactor: number = 0;
+  tSNESuperviseInput: string;
+  tSNESuperviseColumn: string;
   tSNEis3d: boolean = true;
   /** UMAP parameters */
   umapIs3d: boolean = true;
diff --git a/tensorboard/plugins/projector/vz_projector/vz-projector-data-panel.html.ts b/tensorboard/plugins/projector/vz_projector/vz-projector-data-panel.html.ts
index 49dea01990..4aaff9fcb8 100644
--- a/tensorboard/plugins/projector/vz_projector/vz-projector-data-panel.html.ts
+++ b/tensorboard/plugins/projector/vz_projector/vz-projector-data-panel.html.ts
@@ -122,7 +122,6 @@ export const template = html`
     }
 
     .metadata-editor,
-    .supervise-settings,
     .colorlabel-container {
       display: flex;
     }
@@ -140,15 +139,6 @@ export const template = html`
       display: none;
     }
 
-    .supervise-settings paper-dropdown-menu {
-      width: 100px;
-      margin-right: 10px;
-    }
-
-    .supervise-settings paper-input {
-      width: calc(100% - 110px);
-    }
-
     .metadata-editor paper-dropdown-menu {
       width: 100px;
       margin-right: 10px;
@@ -354,31 +344,6 @@ export const template = html`
       </template>
     </div>
     <template is="dom-if" if="[[_hasChoice(labelOptions)]]">
-      <!-- Supervise by -->
-      <div hidden$="[[!showSuperviseSettings]]" class="supervise-settings">
-        <paper-dropdown-menu no-animations label="Supervise with">
-          <paper-listbox
-            attr-for-selected="value"
-            class="dropdown-content"
-            on-selected-item-changed="superviseColumnChanged"
-            selected="{{superviseColumn}}"
-            slot="dropdown-content"
-          >
-            <template is="dom-repeat" items="[[metadataFields]]">
-              <paper-item value="[[item]]" label="[[item]]">
-                [[item]]
-              </paper-item>
-            </template>
-          </paper-listbox>
-        </paper-dropdown-menu>
-        <paper-input
-          value="{{superviseInput}}"
-          label="{{superviseInputLabel}}"
-          on-change="superviseInputChange"
-          on-input="superviseInputTyping"
-        >
-        </paper-input>
-      </div>
       <!-- Edit by -->
       <div class="metadata-editor">
         <paper-dropdown-menu no-animations label="Edit by">
diff --git a/tensorboard/plugins/projector/vz_projector/vz-projector-data-panel.ts b/tensorboard/plugins/projector/vz_projector/vz-projector-data-panel.ts
index 2a948cf3d9..f2e11bacf2 100644
--- a/tensorboard/plugins/projector/vz_projector/vz-projector-data-panel.ts
+++ b/tensorboard/plugins/projector/vz_projector/vz-projector-data-panel.ts
@@ -17,12 +17,7 @@ import {PolymerElement} from '@polymer/polymer';
 import '../../../components/polymer/irons_and_papers';
 import {LegacyElementMixin} from '../../../components/polymer/legacy_element_mixin';
 import * as d3 from '../../../webapp/third_party/d3';
-import {
-  ColorOption,
-  ColumnStats,
-  Projection,
-  SpriteAndMetadataInfo,
-} from './data';
+import {ColorOption, ColumnStats, SpriteAndMetadataInfo} from './data';
 import {
   DataProvider,
   EmbeddingInfo,
@@ -63,14 +58,6 @@ class DataPanel extends LegacyElementMixin(PolymerElement) {
   metadataEditorColumn: string;
   @property({type: Boolean})
   metadataEditorButtonDisabled: boolean;
-  @property({type: String})
-  superviseInput: string;
-  @property({type: String})
-  superviseInputLabel: string = 'Ignored label';
-  @property({type: String})
-  superviseColumn: string;
-  @property({type: Boolean})
-  showSuperviseSettings: boolean = false;
 
   @property({type: String})
   readonly _wordDelimiter = '[/=_,-]';
@@ -78,7 +65,6 @@ class DataPanel extends LegacyElementMixin(PolymerElement) {
   private labelOptions: string[];
   private colorOptions: ColorOption[];
   forceCategoricalColoring: boolean = false;
-  private superviseInputSelected: string;
   private selectedPointIndices: number[];
   private neighborsOfFirstPoint: knn.NearestEntry[];
   private dataProvider: DataProvider;
@@ -97,7 +83,6 @@ class DataPanel extends LegacyElementMixin(PolymerElement) {
   ready() {
     super.ready();
     this.normalizeData = true;
-    this.superviseInputSelected = '';
   }
   initialize(projector: any, dp: DataProvider) {
     this.projector = projector;
@@ -180,27 +165,6 @@ class DataPanel extends LegacyElementMixin(PolymerElement) {
       // Make the default label the first non-numeric column.
       this.metadataEditorColumn = this.metadataFields[Math.max(0, labelIndex)];
     }
-    if (
-      this.superviseColumn == null ||
-      this.metadataFields.filter((name) => name === this.superviseColumn)
-        .length === 0
-    ) {
-      // Make the default supervise class the first non-numeric column.
-      this.superviseColumn = this.metadataFields[Math.max(0, labelIndex)];
-      this.superviseInput = '';
-    }
-    this.superviseInputChange();
-  }
-  projectionChanged(projection: Projection) {
-    if (projection) {
-      switch (projection.projectionType) {
-        case 'tsne':
-          this.set('showSuperviseSettings', true);
-          break;
-        default:
-          this.set('showSuperviseSettings', false);
-      }
-    }
   }
   onProjectorSelectionChanged(
     selectedPointIndices: number[],
@@ -381,59 +345,6 @@ class DataPanel extends LegacyElementMixin(PolymerElement) {
       anyDownloadMetadataLink.click();
     }
   }
-  private superviseInputTyping() {
-    let value = this.superviseInput.trim();
-    if (value == null || value.trim() === '') {
-      if (this.superviseInputSelected === '') {
-        this.superviseInputLabel = 'No ignored label';
-      } else {
-        this.superviseInputLabel = `Supervising without '${this.superviseInputSelected}'`;
-      }
-      return;
-    }
-    if (this.projector && this.projector.dataSet) {
-      let numMatches = this.projector.dataSet.points.filter(
-        (p) => p.metadata[this.superviseColumn].toString().trim() === value
-      ).length;
-      if (numMatches === 0) {
-        this.superviseInputLabel = 'Label not found';
-      } else {
-        if (this.projector.dataSet.superviseInput != value) {
-          this.superviseInputLabel = `Supervise without '${value}' [${numMatches} points]`;
-        }
-      }
-    }
-  }
-  private superviseInputChange() {
-    let value = this.superviseInput.trim();
-    if (value == null || value.trim() === '') {
-      this.superviseInputSelected = '';
-      this.superviseInputLabel = 'No ignored label';
-      this.setSupervision(this.superviseColumn, '');
-      return;
-    }
-    if (this.projector && this.projector.dataSet) {
-      let numMatches = this.projector.dataSet.points.filter(
-        (p) => p.metadata[this.superviseColumn].toString().trim() === value
-      ).length;
-      if (numMatches === 0) {
-        this.superviseInputLabel = `Supervising without '${this.superviseInputSelected}'`;
-      } else {
-        this.superviseInputSelected = value;
-        this.superviseInputLabel = `Supervising without '${value}' [${numMatches} points]`;
-        this.setSupervision(this.superviseColumn, value);
-      }
-    }
-  }
-  private superviseColumnChanged() {
-    this.superviseInput = '';
-    this.superviseInputChange();
-  }
-  private setSupervision(superviseColumn: string, superviseInput: string) {
-    if (this.projector && this.projector.dataSet) {
-      this.projector.dataSet.setSupervision(superviseColumn, superviseInput);
-    }
-  }
   setNormalizeData(normalizeData: boolean) {
     this.normalizeData = normalizeData;
   }
diff --git a/tensorboard/plugins/projector/vz_projector/vz-projector-projections-panel.html.ts b/tensorboard/plugins/projector/vz_projector/vz-projector-projections-panel.html.ts
index b77a229f7d..66a2dd7147 100644
--- a/tensorboard/plugins/projector/vz_projector/vz-projector-projections-panel.html.ts
+++ b/tensorboard/plugins/projector/vz_projector/vz-projector-projections-panel.html.ts
@@ -87,6 +87,19 @@ export const template = html`
         margin-bottom: -8px;
       }
 
+      .supervise-settings {
+        display: flex;
+      }
+
+      .supervise-settings paper-dropdown-menu {
+        width: 100px;
+        margin-right: 10px;
+      }
+
+      .supervise-settings paper-input {
+        width: calc(100% - 110px);
+      }
+
       #z-container {
         display: flex;
         align-items: center;
@@ -379,6 +392,31 @@ export const template = html`
             </paper-slider>
             <span></span>
           </div>
+          <!-- Supervise by -->
+          <div class="supervise-settings">
+            <paper-dropdown-menu no-animations label="Supervise with">
+              <paper-listbox
+                attr-for-selected="value"
+                class="dropdown-content"
+                on-selected-item-changed="superviseColumnChanged"
+                selected="{{superviseColumn}}"
+                slot="dropdown-content"
+              >
+                <template is="dom-repeat" items="[[metadataFields]]">
+                  <paper-item value="[[item]]" label="[[item]]">
+                    [[item]]
+                  </paper-item>
+                </template>
+              </paper-listbox>
+            </paper-dropdown-menu>
+            <paper-input
+              value="{{superviseInput}}"
+              label="{{superviseInputLabel}}"
+              on-change="superviseInputChange"
+              on-input="superviseInputTyping"
+            >
+            </paper-input>
+          </div>
           <p>
             <button class="run-tsne ink-button" title="Re-run t-SNE">
               Run
diff --git a/tensorboard/plugins/projector/vz_projector/vz-projector-projections-panel.ts b/tensorboard/plugins/projector/vz_projector/vz-projector-projections-panel.ts
index c06002ac46..dea9f5a99a 100644
--- a/tensorboard/plugins/projector/vz_projector/vz-projector-projections-panel.ts
+++ b/tensorboard/plugins/projector/vz_projector/vz-projector-projections-panel.ts
@@ -84,6 +84,14 @@ class ProjectionsPanel extends LegacyElementMixin(PolymerElement) {
   // Custom projection.
   @property({type: String})
   customSelectedSearchByMetadataOption: string;
+  @property({type: String})
+  superviseInput: string;
+  @property({type: String})
+  superviseInputLabel: string = 'Ignored label';
+  @property({type: String})
+  superviseColumn: string;
+  @property({type: Boolean})
+  showSuperviseSettings: boolean = false;
 
   private projector: any; // Projector; type omitted b/c LegacyElement
 
@@ -111,6 +119,8 @@ class ProjectionsPanel extends LegacyElementMixin(PolymerElement) {
   private perplexitySlider: HTMLInputElement;
   private learningRateInput: HTMLInputElement;
   private superviseFactorInput: HTMLInputElement;
+  private superviseInputSelected: string;
+  private metadataFields: string[];
   private zDropdown: HTMLElement;
   private iterationLabelTsne: HTMLElement;
   private runUmapButton: HTMLButtonElement;
@@ -146,6 +156,7 @@ class ProjectionsPanel extends LegacyElementMixin(PolymerElement) {
     ) as HTMLInputElement;
     this.iterationLabelTsne = this.$$('.run-tsne-iter') as HTMLElement;
     this.runUmapButton = this.$$('#run-umap') as HTMLButtonElement;
+    this.superviseInputSelected = '';
   }
   disablePolymerChangesTriggerReprojection() {
     this.polymerChangesTriggerReprojection = false;
@@ -260,6 +271,9 @@ class ProjectionsPanel extends LegacyElementMixin(PolymerElement) {
     if (this.learningRateInput) {
       this.learningRateInput.value = bookmark.tSNELearningRate.toString();
     }
+    this.superviseFactor = bookmark.tSNESuperviseFactor;
+    this.superviseColumn = bookmark.tSNESuperviseColumn;
+    this.superviseInput = bookmark.tSNESuperviseInput || '';
     this.tSNEis3d = bookmark.tSNEis3d;
     // UMAP
     this.umapIs3d = bookmark.umapIs3d;
@@ -296,6 +310,9 @@ class ProjectionsPanel extends LegacyElementMixin(PolymerElement) {
     this.setZDropdownEnabled(this.pcaIs3d);
     this.updateTSNEPerplexityFromSliderChange();
     this.updateTSNELearningRateFromUIChange();
+    this.updateTSNESuperviseFactorFromUIChange();
+    this.setSupervision(this.superviseInput, this.superviseColumn);
+    this.superviseInputChange();
     if (this.iterationLabelTsne) {
       this.iterationLabelTsne.innerText = bookmark.tSNEIteration.toString();
     }
@@ -318,6 +335,9 @@ class ProjectionsPanel extends LegacyElementMixin(PolymerElement) {
     if (this.learningRateInput != null) {
       bookmark.tSNELearningRate = +this.learningRateInput.value;
     }
+    bookmark.tSNESuperviseFactor = this.superviseFactor;
+    bookmark.tSNESuperviseInput = this.superviseInput;
+    bookmark.tSNESuperviseColumn = this.superviseColumn;
     bookmark.tSNEis3d = this.tSNEis3d;
     // UMAP
     bookmark.umapIs3d = this.umapIs3d;
@@ -407,6 +427,25 @@ class ProjectionsPanel extends LegacyElementMixin(PolymerElement) {
     })!;
     this.customSelectedSearchByMetadataOption =
       this.searchByMetadataOptions[Math.max(0, searchByMetadataIndex)];
+    let labelIndex = -1;
+    if (spriteAndMetadata.stats) {
+      this.metadataFields = spriteAndMetadata.stats.map((stats, i) => {
+        if (!stats.isNumeric && labelIndex === -1) {
+          labelIndex = i;
+        }
+        return stats.name;
+      });
+    }
+    if (
+      this.superviseColumn == null ||
+      this.metadataFields.filter((name) => name === this.superviseColumn)
+        .length === 0
+    ) {
+      // Make the default supervise class the first non-numeric column.
+      this.superviseColumn = this.metadataFields[Math.max(0, labelIndex)];
+      this.superviseInput = '';
+    }
+    this.superviseInputChange();
   }
   public showTab(id: ProjectionType) {
     this.currentProjection = id;
@@ -461,6 +500,59 @@ class ProjectionsPanel extends LegacyElementMixin(PolymerElement) {
       this.reprojectCustom();
     }
   }
+  private superviseInputTyping() {
+    let value = this.superviseInput.trim();
+    if (value == null || value.trim() === '') {
+      if (this.superviseInputSelected === '') {
+        this.superviseInputLabel = 'No ignored label';
+      } else {
+        this.superviseInputLabel = `Supervising without '${this.superviseInputSelected}'`;
+      }
+      return;
+    }
+    if (this.projector && this.projector.dataSet) {
+      let numMatches = this.projector.dataSet.points.filter(
+        (p) => p.metadata[this.superviseColumn].toString().trim() === value
+      ).length;
+      if (numMatches === 0) {
+        this.superviseInputLabel = 'Label not found';
+      } else {
+        if (this.projector.dataSet.superviseInput != value) {
+          this.superviseInputLabel = `Supervise without '${value}' [${numMatches} points]`;
+        }
+      }
+    }
+  }
+  private superviseInputChange() {
+    let value = this.superviseInput.trim();
+    if (value == null || value.trim() === '') {
+      this.superviseInputSelected = '';
+      this.superviseInputLabel = 'No ignored label';
+      this.setSupervision(this.superviseColumn, '');
+      return;
+    }
+    if (this.projector && this.projector.dataSet) {
+      let numMatches = this.projector.dataSet.points.filter(
+        (p) => p.metadata[this.superviseColumn].toString().trim() === value
+      ).length;
+      if (numMatches === 0) {
+        this.superviseInputLabel = `Supervising without '${this.superviseInputSelected}'`;
+      } else {
+        this.superviseInputSelected = value;
+        this.superviseInputLabel = `Supervising without '${value}' [${numMatches} points]`;
+        this.setSupervision(this.superviseColumn, value);
+      }
+    }
+  }
+  private superviseColumnChanged() {
+    this.superviseInput = '';
+    this.superviseInputChange();
+  }
+  private setSupervision(superviseColumn: string, superviseInput: string) {
+    if (this.projector && this.projector.dataSet) {
+      this.projector.dataSet.setSupervision(superviseColumn, superviseInput);
+    }
+  }
   private showTSNE() {
     const dataSet = this.dataSet;
     if (dataSet == null) {
@@ -486,7 +578,6 @@ class ProjectionsPanel extends LegacyElementMixin(PolymerElement) {
     }
   }
   private runTSNE() {
-    let projectionChangeNotified = false;
     this.runTsneButton.innerText = 'Stop';
     this.runTsneButton.disabled = true;
     this.pauseTsneButton.innerText = 'Pause';
@@ -502,17 +593,12 @@ class ProjectionsPanel extends LegacyElementMixin(PolymerElement) {
           this.pauseTsneButton.disabled = false;
           this.iterationLabelTsne.innerText = '' + iteration;
           this.projector.notifyProjectionPositionsUpdated();
-          if (!projectionChangeNotified && this.dataSet.projections['tsne']) {
-            this.projector.onProjectionChanged();
-            projectionChangeNotified = true;
-          }
         } else {
           this.runTsneButton.innerText = 'Re-run';
           this.runTsneButton.disabled = false;
           this.pauseTsneButton.innerText = 'Pause';
           this.pauseTsneButton.disabled = true;
           this.perturbTsneButton.disabled = true;
-          this.projector.onProjectionChanged();
         }
       }
     );
@@ -542,7 +628,6 @@ class ProjectionsPanel extends LegacyElementMixin(PolymerElement) {
     }
   }
   private runUmap() {
-    let projectionChangeNotified = false;
     this.runUmapButton.disabled = true;
     const nComponents = this.umapIs3d ? 3 : 2;
     const nNeighbors = this.umapNeighbors;
@@ -555,14 +640,9 @@ class ProjectionsPanel extends LegacyElementMixin(PolymerElement) {
         if (iteration != null) {
           this.runUmapButton.disabled = false;
           this.projector.notifyProjectionPositionsUpdated();
-          if (!projectionChangeNotified && this.dataSet.projections['umap']) {
-            this.projector.onProjectionChanged();
-            projectionChangeNotified = true;
-          }
         } else {
           this.runUmapButton.innerText = 'Re-run';
           this.runUmapButton.disabled = false;
-          this.projector.onProjectionChanged();
         }
       }
     );
diff --git a/tensorboard/plugins/projector/vz_projector/vz-projector.ts b/tensorboard/plugins/projector/vz_projector/vz-projector.ts
index cc6cf68689..04ad53626d 100644
--- a/tensorboard/plugins/projector/vz_projector/vz-projector.ts
+++ b/tensorboard/plugins/projector/vz_projector/vz-projector.ts
@@ -567,9 +567,6 @@ class Projector
     this.registerHoverListener((hoverIndex: number) =>
       this.onHover(hoverIndex)
     );
-    this.registerProjectionChangedListener((projection: Projection) =>
-      this.onProjectionChanged(projection)
-    );
     this.registerSelectionChangedListener(
       (
         selectedPointIndices: number[],
@@ -617,9 +614,6 @@ class Projector
       this.statusBar.style.display = 'none';
     }
   }
-  onProjectionChanged(projection?: Projection) {
-    this.dataPanel.projectionChanged(projection);
-  }
   setProjection(projection: Projection | null) {
     this.projection = projection;
     if (projection != null) {
@@ -686,7 +680,6 @@ class Projector
     if (state.shuffledDataIndices) {
       this.dataSet.shuffledDataIndices = state.shuffledDataIndices;
     }
-    this.dataSet.hasTSNERun = state.selectedProjection === 'tsne';
     this.dataSet.tSNEIteration = state.tSNEIteration;
     this.projectionsPanel.restoreUIFromBookmark(state);
     this.inspectorPanel.restoreUIFromBookmark(state);