HParams: Allow runs in the time series dashboard to be filtered by hparam

tensorboard/webapp/metrics/views/main_view/common_selectors.ts

@@ -32,6 +32,7 @@ import {
   getDashboardMetricsFilterMap,
   getDashboardHparamsAndMetricsSpecs,
   getDashboardHparamFilterMap,
+  getDashboardDefaultHparamFilters,
 } from '../../../hparams/_redux/hparams_selectors';
 import {
   DiscreteFilter,
@@ -185,6 +186,19 @@ const utils = {
   },
 };
 
+export const getCurrentColumnFilters = createSelector(
+  getDashboardDefaultHparamFilters,
+  getDashboardHparamFilterMap,
+  getDashboardMetricsFilterMap,
+  (defaultHparamsFilters, hparamFilters, metricFilters) => {
+    return new Map([
+      ...defaultHparamsFilters,
+      ...hparamFilters,
+      ...metricFilters,
+    ]);
+  }
+);
+
 const getRenderableRuns = createSelector(
   getDashboardRuns,
   getDashboardExperimentNames,
@@ -272,6 +286,7 @@ export const getPotentialHparamColumns = createSelector(
       removable: true,
       sortable: true,
       movable: true,
+      filterable: true,
     }));
   }
 );
@@ -290,5 +305,6 @@ export const TEST_ONLY = {
   getRenderableRuns,
   getRenderableCardIdsWithMetadata,
   getScalarTagsForRunSelection,
+  getCurrentColumnFilters,
   utils,
 };

tensorboard/webapp/metrics/views/main_view/common_selectors_test.ts

@@ -978,6 +978,7 @@ describe('common selectors', () => {
           removable: true,
           sortable: true,
           movable: true,
+          filterable: true,
         },
       ]);
     });
@@ -995,6 +996,7 @@ describe('common selectors', () => {
           removable: true,
           sortable: true,
           movable: true,
+          filterable: true,
         },
         {
           type: ColumnHeaderType.HPARAM,
@@ -1004,6 +1006,7 @@ describe('common selectors', () => {
           removable: true,
           sortable: true,
           movable: true,
+          filterable: true,
         },
       ]);
     });

tensorboard/webapp/runs/store/runs_reducers.ts

@@ -330,6 +330,7 @@ const {initialState: uiInitialState, reducers: uiNamespaceContextedReducers} =
           enabled: true,
           sortable: true,
           movable: true,
+          filterable: false,
         },
       ],
       sortingInfo: {

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

@@ -32,10 +32,12 @@
   [sortingInfo]="sortingInfo"
   [columnCustomizationEnabled]="true"
   [selectableColumns]="selectableColumns"
+  [columnFilters]="columnFilters"
   (sortDataBy)="sortDataBy.emit($event)"
   (orderColumns)="orderColumns.emit($event)"
   (addColumn)="addColumn.emit($event)"
   (removeColumn)="removeColumn.emit($event)"
+  (addFilter)="addFilter.emit($event)"
 >
   <ng-container header>
     <ng-container *ngFor="let header of getHeaders()">

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

@@ -24,8 +24,10 @@ import {
   TableData,
   SortingInfo,
   ColumnHeaderType,
+  FilterAddedEvent,
+  DiscreteFilter,
+  IntervalFilter,
 } from '../../../widgets/data_table/types';
-
 @Component({
   selector: 'runs-data-table',
   templateUrl: 'runs_data_table.ng.html',
@@ -41,6 +43,7 @@ export class RunsDataTable {
   @Input() isFullScreen!: boolean;
   @Input() selectableColumns!: ColumnHeader[];
   @Input() loading!: boolean;
+  @Input() columnFilters!: Map<string, DiscreteFilter | IntervalFilter>;
 
   ColumnHeaderType = ColumnHeaderType;
 
@@ -60,6 +63,7 @@ export class RunsDataTable {
   }>();
   @Output() removeColumn = new EventEmitter<ColumnHeader>();
   @Output() onSelectionDblClick = new EventEmitter<string>();
+  @Output() addFilter = new EventEmitter<FilterAddedEvent>();
 
   // These columns must be stored and reused to stop needless re-rendering of
   // the content and headers in these columns. This has been known to cause

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

@@ -68,7 +68,7 @@ import {matchRunToRegex} from '../../../util/matcher';
 import {getEnableHparamsInTimeSeries} from '../../../feature_flag/store/feature_flag_selectors';
 import {
   ColumnHeader,
-  ColumnHeaderType,
+  FilterAddedEvent,
   SortingInfo,
   SortingOrder,
   TableData,
@@ -96,6 +96,7 @@ import {
 } from './runs_table_component';
 import {RunsTableColumn, RunTableItem} from './types';
 import {
+  getCurrentColumnFilters,
   getFilteredRenderableRuns,
   getPotentialHparamColumns,
 } from '../../../metrics/views/main_view/common_selectors';
@@ -275,6 +276,7 @@ function matchFilter(
       [headers]="runsColumns$ | async"
       [data]="sortedRunsTableData$ | async"
       [selectableColumns]="selectableColumns$ | async"
+      [columnFilters]="columnFilters$ | async"
       [sortingInfo]="sortingInfo$ | async"
       [experimentIds]="experimentIds"
       [regexFilter]="regexFilter$ | async"
@@ -290,6 +292,7 @@ function matchFilter(
       (toggleFullScreen)="toggleFullScreen()"
       (addColumn)="addColumn($event)"
       (removeColumn)="removeColumn($event)"
+      (addFilter)="addHparamFilter($event)"
     ></runs-data-table>
   `,
   host: {
@@ -372,6 +375,8 @@ export class RunsTableContainer implements OnInit, OnDestroy {
     })
   );
 
+  columnFilters$ = this.store.select(getCurrentColumnFilters);
+
   allRunsTableData$ = this.store.select(getFilteredRenderableRuns).pipe(
     map((filteredRenderableRuns) => {
       return filteredRenderableRuns.map((runTableItem) => {
@@ -826,6 +831,15 @@ export class RunsTableContainer implements OnInit, OnDestroy {
   useDataTable() {
     return this.hparamsEnabled.value && !this.forceLegacyTable;
   }
+
+  addHparamFilter(event: FilterAddedEvent) {
+    this.store.dispatch(
+      hparamsActions.dashboardHparamFilterAdded({
+        name: event.header.name,
+        filter: event.value,
+      })
+    );
+  }
 }
 
 export const TEST_ONLY = {

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

@@ -257,7 +257,6 @@ describe('runs_table', () => {
         RunsGroupMenuButtonContainer,
         RunsTableComponent,
         RunsTableContainer,
-        RunsTableContainer,
         TestableColorPicker,
       ],
       providers: [provideMockTbStore(), ColorPickerTestHelper],
@@ -2974,6 +2973,129 @@ describe('runs_table', () => {
           expect(action.type).not.toBe(runSelectorSortChanged.type);
         }
       });
+
+      describe('runs data table integration', () => {
+        beforeEach(() => {
+          store.overrideSelector(getEnableHparamsInTimeSeries, true);
+          store.overrideSelector(getFilteredRenderableRuns, [
+            {
+              run: buildRun({
+                id: 'id1',
+                name: 'Book 1',
+                hparams: [{name: 'qaz', value: 0.5}],
+              }),
+              experimentAlias: {aliasNumber: 0, aliasText: 'hp'},
+              experimentName: 'HP',
+              selected: true,
+              runColor: 'fff',
+              hparams: new Map([['qaz', 0.5]]),
+              metrics: new Map<string, any>(),
+            },
+            {
+              run: buildRun({
+                id: 'id2',
+                name: 'Book 2',
+                hparams: [{name: 'qaz', value: 0.5}],
+              }),
+              experimentAlias: {aliasNumber: 0, aliasText: 'hp'},
+              experimentName: 'HP',
+              selected: true,
+              runColor: 'fff',
+              hparams: new Map([['qaz', 0.5]]),
+              metrics: new Map<string, any>(),
+            },
+          ]);
+
+          store.overrideSelector(getRunsTableHeaders, [
+            {
+              type: ColumnHeaderType.HPARAM,
+              name: 'foo',
+              displayName: 'Foo',
+              enabled: true,
+              removable: true,
+              filterable: true,
+              sortable: true,
+              movable: true,
+            },
+            {
+              type: ColumnHeaderType.HPARAM,
+              name: 'qaz',
+              displayName: 'Qaz',
+              enabled: true,
+              removable: true,
+              filterable: true,
+              sortable: true,
+              movable: true,
+            },
+          ]);
+        });
+
+        it('adds interval filters', () => {
+          const fixture = createComponent(TEST_HPARAM_SPECS, TEST_METRIC_SPECS);
+          fixture.detectChanges();
+          const dataTable = fixture.debugElement.query(
+            By.directive(RunsDataTable)
+          );
+
+          dataTable.componentInstance.addFilter.emit({
+            header: {
+              name: 'qaz',
+            },
+            value: {
+              type: DomainType.INTERVAL,
+              includeUndefined: true,
+              filterLowerValue: 10,
+              filterUpperValue: 20,
+              minValue: 10,
+              maxValue: 20,
+            },
+          });
+          expect(dispatchSpy).toHaveBeenCalledWith(
+            hparamsActions.dashboardHparamFilterAdded({
+              name: 'qaz',
+              filter: {
+                type: DomainType.INTERVAL,
+                includeUndefined: true,
+                filterLowerValue: 10,
+                filterUpperValue: 20,
+                minValue: 10,
+                maxValue: 20,
+              },
+            })
+          );
+        });
+
+        it('adds discrete filters', () => {
+          const fixture = createComponent(TEST_HPARAM_SPECS, TEST_METRIC_SPECS);
+          fixture.detectChanges();
+          const dataTable = fixture.debugElement.query(
+            By.directive(RunsDataTable)
+          );
+
+          dataTable.componentInstance.addFilter.emit({
+            header: {
+              name: 'foo',
+            },
+            value: {
+              type: DomainType.DISCRETE,
+              includeUndefined: true,
+              filterValues: [2, 4, 6, 8],
+              possibleValues: [2, 4, 6, 8, 10],
+            },
+          });
+          expect(dispatchSpy).toHaveBeenCalledWith(
+            hparamsActions.dashboardHparamFilterAdded({
+              name: 'foo',
+              filter: {
+                type: DomainType.DISCRETE,
+                includeUndefined: true,
+                filterValues: [2, 4, 6, 8],
+                possibleValues: [2, 4, 6, 8, 10],
+              },
+            })
+          );
+        });
+      });
     });
 
     function setNoFilterHparamsAndMetrics(

tensorboard/webapp/widgets/data_table/data_table_component.ng.html

@@ -14,10 +14,7 @@
 
 <custom-modal #contextMenu (onClose)="onContextMenuClosed()">
   <div class="context-menu">
-    <div
-      *ngIf="!contextMenuHeader?.removable && !contextMenuHeader?.sortable && !canContextMenuInsert()"
-      class="no-actions-message"
-    >
+    <div *ngIf="isContextMenuEmpty()" class="no-actions-message">
       No Actions Available
     </div>
     <button
@@ -46,6 +43,14 @@
         <mat-icon svgIcon="arrow_upward_24px"></mat-icon>Sort Ascending
       </ng-template>
     </button>
+    <button
+      *ngIf="contextMenuHeader?.filterable"
+      class="context-menu-button"
+      mat-button
+      (click)="openFilterMenu($event, contextMenuHeader)"
+    >
+      <mat-icon svgIcon="filter_alt_24px"></mat-icon> Filter
+    </button>
     <button
       mat-button
       *ngIf="canContextMenuInsert()"
@@ -69,14 +74,24 @@
   #columnSelectorModal
   *ngIf="selectableColumns && selectableColumns.length"
   (onOpen)="focusColumnSelector()"
-  onClose="onColumnSelectorClosed()"
+  (onClose)="onColumnSelectorClosed()"
 >
   <tb-data-table-column-selector-component
     [selectableColumns]="selectableColumns"
     (columnSelected)="onColumnAdded($event)"
   ></tb-data-table-column-selector-component>
 </custom-modal>
 
+<custom-modal #filterModal (onClose)="onFilterClosed()">
+  <tb-data-table-filter
+    *ngIf="getCurrentColumnFilter()"
+    [filter]="getCurrentColumnFilter()"
+    (intervalFilterChanged)="intervalFilterChanged($event)"
+    (discreteFilterChanged)="discreteFilterChanged($event)"
+    (includeUndefinedToggled)="includeUndefinedToggled()"
+  ></tb-data-table-filter>
+</custom-modal>
+
 <div class="data-table">
   <div class="header">
     <ng-content select="[header]"></ng-content>