allow discrete filters to be filtered

tensorflow · Jul 13, 2023 · a4ad84b · a4ad84b
1 parent ec4518d
commit a4ad84b
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 7 deletions.
diff --git a/tensorboard/webapp/widgets/data_table/BUILD b/tensorboard/webapp/widgets/data_table/BUILD
@@ -85,10 +85,10 @@ tf_ng_module(
         ":types",
         "//tensorboard/webapp/angular:expect_angular_material_button",
         "//tensorboard/webapp/angular:expect_angular_material_icon",
-        "//tensorboard/webapp/widgets/range_input:types",
         "//tensorboard/webapp/metrics/views/card_renderer:scalar_card_types",
         "//tensorboard/webapp/widgets/custom_modal",
         "//tensorboard/webapp/widgets/line_chart_v2/lib:formatter",
+        "//tensorboard/webapp/widgets/range_input:types",
         "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//rxjs",
@@ -149,6 +149,7 @@ tf_ng_module(
         ":types",
         "//tensorboard/webapp/angular:expect_angular_material_button",
         "//tensorboard/webapp/angular:expect_angular_material_checkbox",
+        "//tensorboard/webapp/widgets/filter_input",
         "//tensorboard/webapp/widgets/range_input",
         "//tensorboard/webapp/widgets/range_input:types",
         "@npm//@angular/common",
@@ -171,19 +172,19 @@ tf_ts_library(
         "column_selector_test.ts",
         "content_cell_component_test.ts",
         "data_table_test.ts",
-        "header_cell_component_test.ts",
         "filter_dialogue_test.ts",
+        "header_cell_component_test.ts",
     ],
     deps = [
         ":column_selector",
         ":data_table",
-        ":types",
         ":filter_dialogue",
+        ":types",
         "//tensorboard/webapp/angular:expect_angular_core_testing",
-        "//tensorboard/webapp/widgets/range_input",
         "//tensorboard/webapp/angular:expect_angular_platform_browser_animations",
         "//tensorboard/webapp/testing:mat_icon",
         "//tensorboard/webapp/widgets/custom_modal",
+        "//tensorboard/webapp/widgets/range_input",
         "@npm//@angular/core",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",

diff --git a/tensorboard/webapp/widgets/data_table/filter_dialogue.ng.html b/tensorboard/webapp/widgets/data_table/filter_dialogue.ng.html
@@ -12,9 +12,21 @@
 limitations under the License.
 -->
 <div class="filter-dialogue">
-  <ng-container *ngIf="filter.type === DomainType.DISCRETE">
+  <div
+    *ngIf="filter.type === DomainType.DISCRETE"
+    class="discrete-filters-area"
+  >
+    <tb-filter-input
+      *ngIf="filter.possibleValues"
+      [value]="discreteValueFilter"
+      (keyup)="discreteValueKeyUp($event)"
+      placeholder="Filter Discrete Values (regex)"
+    ></tb-filter-input>
+    <div *ngIf="!getPossibleValues().length" class="no-matches">
+      No Matching Values
+    </div>
     <div
-      *ngFor="let value of filter.possibleValues; index"
+      *ngFor="let value of getPossibleValues(); index"
       mat-menu-item
       class="filter-menu-checkbox-row"
       role="menuitemcheckbox"
@@ -26,7 +38,7 @@
         ><span>{{ value }}</span></mat-checkbox
       >
     </div>
-  </ng-container>
+  </div>
 
   <div
     *ngIf="filter.type === DomainType.INTERVAL"

diff --git a/tensorboard/webapp/widgets/data_table/filter_dialogue.scss b/tensorboard/webapp/widgets/data_table/filter_dialogue.scss
@@ -30,4 +30,15 @@ limitations under the License.
       'background'
     );
   }
+
+  .discrete-filters-area {
+    max-height: 100px;
+    overflow-y: auto;
+  }
+
+  .no-matches {
+    // 24px is the width of the checkbox so the text should match the
+    // indentation of the selectable filters.
+    padding: 8px 24px;
+  }
 }
diff --git a/tensorboard/webapp/widgets/data_table/filter_dialogue.ts b/tensorboard/webapp/widgets/data_table/filter_dialogue.ts
@@ -29,11 +29,28 @@ import {RangeValues} from '../range_input/types';
 export class FilterDialogue {
   DomainType = DomainType;
 
+  discreteValueFilter: string = '';
+
   @Input() filter!: DiscreteFilter | IntervalFilter;
 
   @Output() discreteFilterChanged = new EventEmitter<DiscreteFilterValue>();
 
   @Output() intervalFilterChanged = new EventEmitter<RangeValues>();
 
   @Output() includeUndefinedToggled = new EventEmitter<void>();
+
+  getPossibleValues() {
+    const values: DiscreteFilterValue[] =
+      (this.filter as DiscreteFilter).possibleValues ?? [];
+    if (!this.discreteValueFilter) {
+      return values;
+    }
+    return values.filter((value) =>
+      value.toString().match(this.discreteValueFilter)
+    );
+  }
+
+  discreteValueKeyUp(event: KeyboardEvent) {
+    this.discreteValueFilter = (event.target! as HTMLInputElement).value;
+  }
 }
diff --git a/tensorboard/webapp/widgets/data_table/filter_dialogue_module.ts b/tensorboard/webapp/widgets/data_table/filter_dialogue_module.ts
@@ -20,6 +20,7 @@ import {FormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
 import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
 import {RangeInputModule} from '../range_input/range_input_module';
+import {FilterInputModule} from '../filter_input/filter_input_module';
 
 @NgModule({
   declarations: [FilterDialogue],
@@ -28,6 +29,7 @@ import {RangeInputModule} from '../range_input/range_input_module';
     MatButtonModule,
     MatLegacyCheckboxModule,
     FormsModule,
+    FilterInputModule,
     RangeInputModule,
   ],
   exports: [FilterDialogue],