Move supervise by to projection panel

initialize input

fix lint

bookmark

Author: alicialics

tensorboard/plugins/projector/vz_projector/data.ts

@@ -673,6 +673,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;

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">

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,22 +58,13 @@ 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 = '[/=_,-]';
 
   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;
   }

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;
@@ -351,6 +364,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