Embedding Projector: fix inspector panel inconsistencies (#6311)

## Motivation for features / changes

Update UI inconsistencies in the inspector panel

## Technical description of changes

Update minor styles
Reset button text when selection changed
Reset searchbox text when metadata or dataset changed

## Screenshots of UI changes

Before:

![image](https://user-images.githubusercontent.com/31378877/232666120-1f816916-7d73-42e8-9444-af190d8543ab.png)

After:
<img width="293" alt="Screenshot 2023-04-17 at 8 48 37 PM"
src="https://user-images.githubusercontent.com/31378877/232666272-2e655855-8b87-4fb5-b8ce-f95b4de6bc43.png">


## Detailed steps to verify changes work correctly (as executed by you)
1. Select some points
1. click out from selection
1. verify that the buttons reset

## Alternate designs / implementations considered

Author: alicialics

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

@@ -181,7 +181,7 @@ export const template = html`
 
     .nn-slider {
       --paper-slider-input: {
-        width: 64px;
+        width: 72px;
       }
       --paper-input-container-input: {
         font-size: 14px;
@@ -218,13 +218,13 @@ export const template = html`
   </style>
   <div class="container">
     <div class="buttons">
-      <button class="button reset-filter">Show All Data</button>
+      <button class="button reset-filter">Show all data</button>
       <button class="button set-filter">Isolate selection</button>
       <button class="button clear-selection">Clear selection</button>
     </div>
     <div class="search-by">
       <vz-projector-input id="search-box" label="Search"></vz-projector-input>
-      <paper-dropdown-menu no-animations label="by">
+      <paper-dropdown-menu no-animations label="By">
         <paper-listbox
           attr-for-selected="value"
           class="dropdown-content"
@@ -245,7 +245,7 @@ export const template = html`
       <div class="neighbors">
         <div class="neighbors-options">
           <div class="slider num-nn">
-            <span class="option-label">neighbors</span>
+            <span class="option-label">Neighbors</span>
             <paper-icon-button
               icon="help"
               class="help-icon"
@@ -270,7 +270,7 @@ export const template = html`
           </div>
         </div>
         <div class="distance">
-          <span class="option-label">distance</span>
+          <span class="option-label">Distance</span>
           <div class="options">
             <a class="selected cosine" href="javascript:void(0);">COSINE</a>
             <a class="euclidean" href="javascript:void(0);">EUCLIDEAN</a>

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

@@ -106,6 +106,7 @@ class InspectorPanel extends LegacyElementMixin(PolymerElement) {
     } else {
       this.updateSearchResults([]);
     }
+    this.searchBox.message = '';
   }
   private enableResetFilterButton(enabled: boolean) {
     this.resetFilterButton.disabled = !enabled;
@@ -151,6 +152,7 @@ class InspectorPanel extends LegacyElementMixin(PolymerElement) {
       this.selectedPointIndices,
       this.neighborsOfFirstPoint
     );
+    this.searchBox.setValue('', false);
   }
   datasetChanged() {
     this.enableResetFilterButton(false);
@@ -159,6 +161,10 @@ class InspectorPanel extends LegacyElementMixin(PolymerElement) {
   _refreshNeighborsList() {
     this.updateNeighborsList();
   }
+  @observe('selectedMetadataField')
+  _selectedMetadataFieldChanged() {
+    this.searchBox.setValue('', false);
+  }
   metadataEditorContext(enabled: boolean, metadataColumn: string) {
     if (!this.projector || !this.projector.dataSet) {
       return;
@@ -382,6 +388,7 @@ class InspectorPanel extends LegacyElementMixin(PolymerElement) {
       this.setFilterButton.disabled = null!;
       this.clearSelectionButton.disabled = null!;
     } else {
+      this.setFilterButton.innerText = 'Isolate selection';
       this.setFilterButton.disabled = true;
       this.clearSelectionButton.disabled = true;
     }
@@ -436,12 +443,12 @@ class InspectorPanel extends LegacyElementMixin(PolymerElement) {
         inRegexMode,
         this.selectedMetadataField
       );
+      this.projectorEventContext.notifySelectionChanged(indices);
       if (indices.length === 0) {
         this.searchBox.message = '0 matches.';
       } else {
         this.searchBox.message = `${indices.length} matches.`;
       }
-      this.projectorEventContext.notifySelectionChanged(indices);
     };
     this.searchBox.registerInputChangedListener((value, inRegexMode) => {
       updateInput(value, inRegexMode);