Embedding Projector: Adds UMAP minDist hyperparameter (#6300)

## Motivation for features / changes
Re-introduces #2912 by @cannoneyed 

## Technical description of changes

## Screenshots of UI changes

![image](https://user-images.githubusercontent.com/31378877/232667145-5c01f97a-8fb1-41fa-a855-50d7e3d2721d.png)

## Detailed steps to verify changes work correctly (as executed by you)
Tested with the lastest master to ensure the new param works as expected

## Alternate designs / implementations considered

Author: alicialics

tensorboard/plugins/projector/vz_projector/data.ts

@@ -374,10 +374,11 @@ export class DataSet {
   async projectUmap(
     nComponents: number,
     nNeighbors: number,
+    minDist: number,
     stepCallback: (iter: number) => void
   ) {
     this.hasUmapRun = true;
-    this.umap = new UMAP({nComponents, nNeighbors});
+    this.umap = new UMAP({nComponents, nNeighbors, minDist});
     let currentEpoch = 0;
     const epochStepSize = 10;
     const sampledIndices = this.shuffledDataIndices.slice(0, UMAP_SAMPLE_SIZE);
@@ -677,6 +678,7 @@ export class State {
   /** UMAP parameters */
   umapIs3d: boolean = true;
   umapNeighbors: number = 15;
+  umapMinDist: number = 0.1;
   /** PCA projection component dimensions */
   pcaComponentDimensions: number[] = [];
   /** Custom projection parameters */

tensorboard/plugins/projector/vz_projector/vz-projector-projections-panel.html.ts

@@ -234,6 +234,34 @@ export const template = html`
             ></paper-slider>
             <span>[[umapNeighbors]]</span>
           </div>
+          <div class="slider umap-min-dist">
+            <label>
+              MinDist
+              <paper-icon-button
+                icon="help"
+                class="help-icon"
+              ></paper-icon-button>
+              <paper-tooltip
+                position="right"
+                animation-delay="0"
+                fit-to-visible-bounds
+              >
+                Controls how tightly UMAP is allowed to pack points together.
+                Provides the minimum distance apart that points are allowed to
+                be in the low dimensional representation. The default value is
+                0.1.
+              </paper-tooltip>
+            </label>
+            <paper-slider
+              id="umap-mindist-slider"
+              value="{{umapMinDist}}"
+              pin
+              min="0"
+              max="0.99"
+              step="0.01"
+            ></paper-slider>
+            <span>[[umapMinDist]]</span>
+          </div>
           <p>
             <button
               id="run-umap"

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

@@ -66,6 +66,8 @@ class ProjectionsPanel extends LegacyElementMixin(PolymerElement) {
   umapIs3d: boolean = true;
   @property({type: Number})
   umapNeighbors: number = 15;
+  @property({type: Number})
+  umapMinDist: number = 0.1;
   // PCA projection.
   @property({type: Array})
   pcaComponents: Array<{
@@ -262,6 +264,7 @@ class ProjectionsPanel extends LegacyElementMixin(PolymerElement) {
     // UMAP
     this.umapIs3d = bookmark.umapIs3d;
     this.umapNeighbors = bookmark.umapNeighbors;
+    this.umapMinDist = bookmark.umapMinDist;
     // custom
     this.customSelectedSearchByMetadataOption =
       bookmark.customSelectedSearchByMetadataOption;
@@ -319,6 +322,7 @@ class ProjectionsPanel extends LegacyElementMixin(PolymerElement) {
     // UMAP
     bookmark.umapIs3d = this.umapIs3d;
     bookmark.umapNeighbors = this.umapNeighbors;
+    bookmark.umapMinDist = this.umapMinDist;
     // custom
     bookmark.customSelectedSearchByMetadataOption =
       this.customSelectedSearchByMetadataOption;
@@ -542,20 +546,26 @@ class ProjectionsPanel extends LegacyElementMixin(PolymerElement) {
     this.runUmapButton.disabled = true;
     const nComponents = this.umapIs3d ? 3 : 2;
     const nNeighbors = this.umapNeighbors;
-    this.dataSet.projectUmap(nComponents, nNeighbors, (iteration: number) => {
-      if (iteration != null) {
-        this.runUmapButton.disabled = false;
-        this.projector.notifyProjectionPositionsUpdated();
-        if (!projectionChangeNotified && this.dataSet.projections['umap']) {
+    const minDist = this.umapMinDist;
+    this.dataSet.projectUmap(
+      nComponents,
+      nNeighbors,
+      minDist,
+      (iteration: number) => {
+        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();
-          projectionChangeNotified = true;
         }
-      } else {
-        this.runUmapButton.innerText = 'Re-run';
-        this.runUmapButton.disabled = false;
-        this.projector.onProjectionChanged();
       }
-    });
+    );
   }
   @observe('pcaX', 'pcaY', 'pcaZ')
   private showPCAIfEnabled() {