Adds hparam filterbar to runs table

tensorboard/webapp/runs/views/runs_table/BUILD

@@ -21,6 +21,13 @@ tf_sass_binary(
     deps = ["//tensorboard/webapp/theme"],
 )
 
+tf_sass_binary(
+    name = "filterbar_styles",
+    src = "filterbar_component.scss",
+    strict_deps = False,
+    deps = ["//tensorboard/webapp/theme"],
+)
+
 tf_sass_binary(
     name = "runs_data_table_styles",
     src = "runs_data_table.scss",
@@ -46,6 +53,8 @@ tf_ts_library(
 tf_ng_module(
     name = "runs_table",
     srcs = [
+        "filterbar_component.ts",
+        "filterbar_container.ts",
         "regex_edit_dialog_component.ts",
         "regex_edit_dialog_container.ts",
         "runs_data_table.ts",
@@ -57,8 +66,10 @@ tf_ng_module(
     ],
     assets = [
         ":regex_edit_dialog_styles",
+        ":filterbar_styles",
         ":runs_data_table_styles",
         ":runs_group_menu_button_styles",
+        "filterbar_component.ng.html",
         "regex_edit_dialog.ng.html",
         "runs_data_table.ng.html",
         "runs_group_menu_button_component.ng.html",
@@ -99,11 +110,14 @@ tf_ng_module(
         "//tensorboard/webapp/types:ui",
         "//tensorboard/webapp/util:colors",
         "//tensorboard/webapp/util:matcher",
+        "//tensorboard/webapp/widgets/custom_modal",
         "//tensorboard/webapp/widgets/data_table",
+        "//tensorboard/webapp/widgets/data_table:filter_dialog",
         "//tensorboard/webapp/widgets/data_table:types",
         "//tensorboard/webapp/widgets/experiment_alias",
         "//tensorboard/webapp/widgets/filter_input",
         "//tensorboard/webapp/widgets/range_input",
+        "//tensorboard/webapp/widgets/range_input:types",
         "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@ngrx/store",
@@ -116,6 +130,7 @@ tf_ts_library(
     name = "runs_table_test",
     testonly = True,
     srcs = [
+        "filterbar_test.ts",
         "regex_edit_dialog_test.ts",
         "runs_data_table_test.ts",
         "runs_table_test.ts",
@@ -146,7 +161,6 @@ tf_ts_library(
         "//tensorboard/webapp/feature_flag/store",
         "//tensorboard/webapp/hparams",
         "//tensorboard/webapp/hparams:testing",
-        "//tensorboard/webapp/hparams:types",
         "//tensorboard/webapp/metrics/views/main_view:common_selectors",
         "//tensorboard/webapp/runs:types",
         "//tensorboard/webapp/runs/actions",
@@ -160,7 +174,9 @@ tf_ts_library(
         "//tensorboard/webapp/testing:utils",
         "//tensorboard/webapp/types",
         "//tensorboard/webapp/types:ui",
+        "//tensorboard/webapp/widgets/custom_modal",
         "//tensorboard/webapp/widgets/data_table",
+        "//tensorboard/webapp/widgets/data_table:filter_dialog",
         "//tensorboard/webapp/widgets/data_table:types",
         "//tensorboard/webapp/widgets/experiment_alias",
         "//tensorboard/webapp/widgets/filter_input",

tensorboard/webapp/runs/views/runs_table/filterbar_component.ng.html

@@ -0,0 +1,42 @@
+<!--
+@license
+Copyright 2023 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<div *ngIf="filters.size" class="filterbar">
+  <mat-icon svgIcon="filter_list_24px" class="filterbar-icon"></mat-icon>
+  <mat-chip-set>
+    <mat-chip
+      *ngFor="let filterName of filters.keys();"
+      (removed)="removeHparamFilter.emit(filterName)"
+      (click)="openFilterMenu($event, filterName)"
+      class="filterbar-chip"
+    >
+      {{filterName}}
+      <button matChipRemove>
+        <mat-icon svgIcon="close_24px"></mat-icon>
+      </button>
+    </mat-chip>
+  </mat-chip-set>
+</div>
+
+<custom-modal #filterModal (onClose)="deselectFilter()">
+  <tb-data-table-filter
+    *ngIf="selectedFilter"
+    [filter]="selectedFilter"
+    (intervalFilterChanged)="emitIntervalFilterChanged($event)"
+    (discreteFilterChanged)="emitDiscreteFilterChanged($event)"
+    (includeUndefinedToggled)="emitIncludeUndefinedToggled()"
+  ></tb-data-table-filter>
+</custom-modal>

tensorboard/webapp/runs/views/runs_table/filterbar_component.scss

@@ -0,0 +1,29 @@
+/* Copyright 2023 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+@import 'tensorboard/webapp/theme/tb_theme';
+
+.filterbar {
+  display: flex;
+  align-items: center;
+  padding: 10px 14px 0px 14px;
+
+  .filterbar-icon {
+    margin-right: 10px;
+  }
+
+  .filterbar-chip {
+    height: 24px;
+  }
+}

tensorboard/webapp/runs/views/runs_table/filterbar_component.ts

@@ -0,0 +1,126 @@
+/* Copyright 2023 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+import {
+  ChangeDetectionStrategy,
+  Input,
+  Output,
+  EventEmitter,
+  Component,
+  ViewChild,
+} from '@angular/core';
+import {
+  DiscreteFilter,
+  DiscreteFilterValue,
+  IntervalFilter,
+  FilterAddedEvent,
+} from '../../../widgets/data_table/types';
+import {RangeValues} from '../../../widgets/range_input/types';
+import {CustomModalComponent} from '../../../widgets/custom_modal/custom_modal_component';
+
+@Component({
+  selector: 'filterbar-component',
+  templateUrl: 'filterbar_component.ng.html',
+  styleUrls: ['filterbar_component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FilterbarComponent {
+  @Input() filters!: Map<string, DiscreteFilter | IntervalFilter>;
+
+  @Output() removeHparamFilter = new EventEmitter<string>();
+  @Output() addFilter = new EventEmitter<FilterAddedEvent>();
+
+  @ViewChild('filterModal', {static: false})
+  private readonly filterModal!: CustomModalComponent;
+
+  _selectedFilterName = '';
+  get selectedFilterName(): string {
+    return this._selectedFilterName;
+  }
+  set selectedFilterName(filterName: string) {
+    this._selectedFilterName = filterName;
+  }
+  // selectedFilter indirectly set using selectedFilterName.
+  _selectedFilter?: DiscreteFilter | IntervalFilter | undefined;
+  get selectedFilter(): DiscreteFilter | IntervalFilter | undefined {
+    return this.filters.get(this.selectedFilterName);
+  }
+
+  openFilterMenu(event: MouseEvent, filterName: string) {
+    this.selectedFilterName = filterName;
+    const rect = (
+      (event.target as HTMLElement).closest('mat-chip') as HTMLElement
+    ).getBoundingClientRect();
+    this.filterModal.openAtPosition({
+      x: rect.x + rect.width,
+      y: rect.y,
+    });
+  }
+
+  deselectFilter() {
+    this.selectedFilterName = '';
+  }
+
+  emitIntervalFilterChanged(value: RangeValues) {
+    if (!this.selectedFilter) {
+      return;
+    }
+
+    this.addFilter.emit({
+      name: this.selectedFilterName,
+      value: {
+        ...this.selectedFilter,
+        filterLowerValue: value.lowerValue,
+        filterUpperValue: value.upperValue,
+      } as IntervalFilter,
+    });
+  }
+
+  emitDiscreteFilterChanged(value: DiscreteFilterValue) {
+    if (!this.selectedFilter) {
+      return;
+    }
+
+    const newValues = new Set([
+      ...(this.selectedFilter as DiscreteFilter).filterValues,
+    ]);
+    if (newValues.has(value)) {
+      newValues.delete(value);
+    } else {
+      newValues.add(value);
+    }
+
+    this.addFilter.emit({
+      name: this.selectedFilterName,
+      value: {
+        ...this.selectedFilter,
+        filterValues: Array.from(newValues),
+      } as DiscreteFilter,
+    });
+  }
+
+  emitIncludeUndefinedToggled() {
+    if (!this.selectedFilter) {
+      return;
+    }
+
+    this.addFilter.emit({
+      name: this.selectedFilterName,
+      value: {
+        ...this.selectedFilter,
+        includeUndefined: !this.selectedFilter.includeUndefined,
+      },
+    });
+  }
+}

tensorboard/webapp/runs/views/runs_table/filterbar_container.ts

@@ -0,0 +1,64 @@
+/* Copyright 2023 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+import {Component, ChangeDetectionStrategy, OnDestroy} from '@angular/core';
+import {Store} from '@ngrx/store';
+import {State} from '../../../app_state';
+import {Subject} from 'rxjs';
+import {
+  actions as hparamsActions,
+  selectors as hparamsSelectors,
+} from '../../../hparams';
+import {FilterAddedEvent} from '../../../widgets/data_table/types';
+
+@Component({
+  selector: 'filterbar',
+  template: `<filterbar-component
+    [filters]="filters$ | async"
+    (removeHparamFilter)="removeHparamFilter($event)"
+    (addFilter)="addHparamFilter($event)"
+  >
+  </filterbar-component>`,
+  styles: [``],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FilterbarContainer implements OnDestroy {
+  filters$ = this.store.select(hparamsSelectors.getDashboardHparamFilterMap);
+
+  private readonly ngUnsubscribe = new Subject<void>();
+
+  constructor(private readonly store: Store<State>) {}
+
+  addHparamFilter(event: FilterAddedEvent) {
+    this.store.dispatch(
+      hparamsActions.dashboardHparamFilterAdded({
+        name: event.name,
+        filter: event.value,
+      })
+    );
+  }
+
+  removeHparamFilter(name: string) {
+    this.store.dispatch(
+      hparamsActions.dashboardHparamFilterRemoved({
+        name,
+      })
+    );
+  }
+
+  ngOnDestroy() {
+    this.ngUnsubscribe.next();
+    this.ngUnsubscribe.complete();
+  }
+}