Skip to content

HParam UI: Replace RunsTableComponent with DataTable widget behind flag #6394

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 19, 2023
Merged

HParam UI: Replace RunsTableComponent with DataTable widget behind flag #6394

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d2523ae
HParam UI: Replace RunsTableComponent with DataTable widget behind flag
JamesHollyer May 17, 2023
ca064cd
CR nits
JamesHollyer May 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions tensorboard/webapp/runs/views/runs_table/BUILD
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@ tf_ng_module(
"//tensorboard/webapp/app_routing",
"//tensorboard/webapp/app_routing:types",
"//tensorboard/webapp/experiments:types",
"//tensorboard/webapp/feature_flag/store",
"//tensorboard/webapp/hparams",
"//tensorboard/webapp/hparams:types",
"//tensorboard/webapp/runs:types",
Expand All @@ -95,6 +96,8 @@ tf_ng_module(
"//tensorboard/webapp/types:ui",
"//tensorboard/webapp/util:colors",
"//tensorboard/webapp/util:matcher",
"//tensorboard/webapp/widgets/data_table",
"//tensorboard/webapp/widgets/data_table:types",
"//tensorboard/webapp/widgets/experiment_alias",
"//tensorboard/webapp/widgets/filter_input",
"//tensorboard/webapp/widgets/range_input",
Expand Down Expand Up @@ -135,6 +138,7 @@ tf_ts_library(
"//tensorboard/webapp/app_routing:testing",
"//tensorboard/webapp/app_routing:types",
"//tensorboard/webapp/experiments/store:testing",
"//tensorboard/webapp/feature_flag/store",
"//tensorboard/webapp/hparams",
"//tensorboard/webapp/hparams:testing",
"//tensorboard/webapp/hparams:types",
Expand All @@ -150,6 +154,7 @@ tf_ts_library(
"//tensorboard/webapp/testing:utils",
"//tensorboard/webapp/types",
"//tensorboard/webapp/types:ui",
"//tensorboard/webapp/widgets/data_table",
"//tensorboard/webapp/widgets/experiment_alias",
"//tensorboard/webapp/widgets/filter_input",
"//tensorboard/webapp/widgets/range_input",
Expand Down
80 changes: 79 additions & 1 deletion tensorboard/webapp/runs/views/runs_table/runs_table_container.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import {
OnInit,
} from '@angular/core';
import {createSelector, Store} from '@ngrx/store';
import {combineLatest, Observable, of, Subject} from 'rxjs';
import {BehaviorSubject, combineLatest, Observable, of, Subject} from 'rxjs';
import {
distinctUntilChanged,
filter,
Expand Down Expand Up @@ -61,6 +61,12 @@ import {
import {DataLoadState, LoadState} from '../../../types/data';
import {SortDirection} from '../../../types/ui';
import {matchRunToRegex} from '../../../util/matcher';
import {getEnableHparamsInTimeSeries} from '../../../feature_flag/store/feature_flag_selectors';
import {
ColumnHeaderType,
SortingOrder,
TableData,
} from '../../../widgets/data_table/types';
import {
runColorChanged,
runPageSelectionToggled,
Expand Down Expand Up @@ -194,6 +200,7 @@ function matchFilter(
selector: 'runs-table',
template: `
<runs-table-component
*ngIf="!HParamsEnabled.value"
[experimentIds]="experimentIds"
[useFlexibleLayout]="useFlexibleLayout"
[numSelectedItems]="numSelectedItems$ | async"
Expand All @@ -220,6 +227,16 @@ function matchFilter(
(onHparamDiscreteFilterChanged)="onHparamDiscreteFilterChanged($event)"
(onMetricFilterChanged)="onMetricFilterChanged($event)"
></runs-table-component>
<tb-data-table
*ngIf="HParamsEnabled.value"
[headers]="runsColumns"
[data]="allRunsTableData$ | async"
[sortingInfo]="sortingInfo"
[columnCustomizationEnabled]="columnCustomizationEnabled"
[smoothingEnabled]="smoothingEnabled"
(sortDataBy)="sortDataBy($event)"
(orderColumns)="orderColumns($event)"
></tb-data-table>
`,
host: {
'[class.flex-layout]': 'useFlexibleLayout',
Expand All @@ -239,12 +256,30 @@ function matchFilter(
})
export class RunsTableContainer implements OnInit, OnDestroy {
private allUnsortedRunTableItems$?: Observable<RunTableItem[]>;
allRunsTableData$: Observable<TableData[]> = of([]);
loading$: Observable<boolean> | null = null;
filteredItemsLength$?: Observable<number>;
allItemsLength$?: Observable<number>;
pageItems$?: Observable<RunTableItem[]>;
numSelectedItems$?: Observable<number>;

// TODO(jameshollyer): Move these values to ngrx and make these Observables.
runsColumns = [
{
type: ColumnHeaderType.RUN,
name: 'run',
displayName: 'Run',
enabled: true,
},
];
sortingInfo = {
header: ColumnHeaderType.RUN,
name: 'run',
order: SortingOrder.ASCENDING,
};
columnCustomizationEnabled = true;
smoothingEnabled = false;

hparamColumns$: Observable<HparamColumn[]> = of([]);
metricColumns$: Observable<MetricColumn[]> = of([]);

Expand Down Expand Up @@ -275,6 +310,7 @@ export class RunsTableContainer implements OnInit, OnDestroy {
sortOption$ = this.store.select(getRunSelectorSort);
paginationOption$ = this.store.select(getRunSelectorPaginationOption);
regexFilter$ = this.store.select(getRunSelectorRegexFilter);
HParamsEnabled = new BehaviorSubject<boolean>(false);
Copy link
Contributor

@rileyajones rileyajones May 18, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why does this need to be a BehaviorSubject? It seems much more complicated this way

Suggested change
HParamsEnabled = new BehaviorSubject<boolean>(false);
hparamsEnabled$ = this.store.select(getEnableHparamsInTimeSeries);

Copy link
Contributor Author

@JamesHollyer JamesHollyer May 19, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't think I could use an observable as a value in this component.

Copy link
Contributor Author

@JamesHollyer JamesHollyer May 19, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried doing the *ngIf with an async pipe. It did not work. Leaving it as is.

private readonly ngUnsubscribe = new Subject<void>();

constructor(private readonly store: Store<State>) {}
Expand All @@ -286,10 +322,24 @@ export class RunsTableContainer implements OnInit, OnDestroy {
}

ngOnInit() {
this.store.select(getEnableHparamsInTimeSeries).subscribe((enabled) => {
this.HParamsEnabled.next(enabled);
});
const getRunTableItemsPerExperiment = this.experimentIds.map((id) =>
this.getRunTableItemsForExperiment(id)
);

const getRunTableDataPerExperiment$ = this.experimentIds.map((id) =>
this.getRunTableDataForExperiment(id)
);

this.allRunsTableData$ = combineLatest(getRunTableDataPerExperiment$).pipe(
map((itemsForExperiments: TableData[][]) => {
const items = [] as TableData[];
return items.concat(...itemsForExperiments);
})
);

const rawAllUnsortedRunTableItems$ = combineLatest(
getRunTableItemsPerExperiment
).pipe(
Expand Down Expand Up @@ -519,6 +569,34 @@ export class RunsTableContainer implements OnInit, OnDestroy {
return slicedItems;
}

private getRunTableDataForExperiment(
experimentId: string
): Observable<TableData[]> {
return combineLatest([
this.store.select(getRuns, {experimentId}),
this.store.select(getRunColorMap),
]).pipe(
map(([runs, colorMap]) => {
return runs.map((run) => {
const tableData: TableData = {
id: run.id,
color: colorMap[run.id],
};
this.runsColumns.forEach((column) => {
switch (column.type) {
case ColumnHeaderType.RUN:
tableData[column.name!] = run.name;
break;
default:
break;
}
});
return tableData;
});
})
);
}
Comment on lines +572 to +598
Copy link
Contributor

@rileyajones rileyajones May 18, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be a selector, but I don't mind it being this way for now (until I get my generalized selector checked in).

Could this at least be a lot shorter?

Suggested change
private getRunTableDataForExperiment(
experimentId: string
): Observable<TableData[]> {
return combineLatest([
this.store.select(getRuns, {experimentId}),
this.store.select(getRunColorMap),
]).pipe(
map(([runs, colorMap]) => {
return runs.map((run) => {
const tableData: TableData = {
id: run.id,
color: colorMap[run.id],
};
this.runsColumns.forEach((column) => {
switch (column.type) {
case ColumnHeaderType.RUN:
tableData[column.name!] = run.name;
break;
default:
break;
}
});
return tableData;
});
})
);
}
const runColumnName = this.runColumns.find((column) => column.type === ColumnHeaderType.RUN).name;
return runs.map((run) => ({
id: run.id,
color: colorMap[run.id],
[runColumnName]: run.name
});

Copy link
Contributor Author

@JamesHollyer JamesHollyer May 19, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would rather leave it as is. It is more extensible this way for other columns. I definitely see this being moved to a selector. However, the selector would be similar to this structure to accommodate all columns instead of just run.


private getRunTableItemsForExperiment(
experimentId: string
): Observable<RunTableItem[]> {
Expand Down
2 changes: 2 additions & 0 deletions tensorboard/webapp/runs/views/runs_table/runs_table_module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import {MatSortModule} from '@angular/material/sort';
import {MatTableModule} from '@angular/material/table';
import {ColorPickerModule} from 'ngx-color-picker';
import {AlertModule} from '../../../alert/alert_module';
import {DataTableModule} from '../../../widgets/data_table/data_table_module';
import {ExperimentAliasModule} from '../../../widgets/experiment_alias/experiment_alias_module';
import {FilterInputModule} from '../../../widgets/filter_input/filter_input_module';
import {RangeInputModule} from '../../../widgets/range_input/range_input_module';
Expand All @@ -45,6 +46,7 @@ import {RunsTableContainer} from './runs_table_container';
imports: [
ColorPickerModule,
CommonModule,
DataTableModule,
ExperimentAliasModule,
FilterInputModule,
MatFormFieldModule,
Expand Down
52 changes: 52 additions & 0 deletions tensorboard/webapp/runs/views/runs_table/runs_table_test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ import {buildExperimentRouteFromId} from '../../../app_routing/testing';
import {RouteKind} from '../../../app_routing/types';
import {State} from '../../../app_state';
import {buildExperiment} from '../../../experiments/store/testing';
import {getEnableHparamsInTimeSeries} from '../../../feature_flag/store/feature_flag_selectors';
import {
actions as hparamsActions,
selectors as hparamsSelectors,
Expand Down Expand Up @@ -79,6 +80,8 @@ import {MatIconTestingModule} from '../../../testing/mat_icon_module';
import {provideMockTbStore} from '../../../testing/utils';
import {DataLoadState} from '../../../types/data';
import {SortDirection} from '../../../types/ui';
import {DataTableModule} from '../../../widgets/data_table/data_table_module';
import {DataTableComponent} from '../../../widgets/data_table/data_table_component';
import {ExperimentAliasModule} from '../../../widgets/experiment_alias/experiment_alias_module';
import {FilterInputModule} from '../../../widgets/filter_input/filter_input_module';
import {RangeInputModule} from '../../../widgets/range_input/range_input_module';
Expand Down Expand Up @@ -239,6 +242,7 @@ describe('runs_table', () => {
FilterInputModule,
RangeInputModule,
ExperimentAliasModule,
DataTableModule,
],
declarations: [
RunsGroupMenuButtonComponent,
Expand Down Expand Up @@ -305,6 +309,7 @@ describe('runs_table', () => {
settingsSelectors.getColorPalette,
buildColorPalette()
);
store.overrideSelector(getEnableHparamsInTimeSeries, false);
dispatchSpy = spyOn(store, 'dispatch').and.callFake((action: Action) => {
actualActions.push(action);
});
Expand Down Expand Up @@ -3169,4 +3174,51 @@ describe('runs_table', () => {
});
});
});

describe('runs data table', () => {
beforeEach(() => {
store.overrideSelector(getEnableHparamsInTimeSeries, true);
});

it('renders data table when hparam flag is on', () => {
const fixture = createComponent(['book']);
fixture.detectChanges();

expect(
fixture.debugElement.query(By.directive(DataTableComponent))
).toBeTruthy();
expect(
fixture.nativeElement.querySelector('runs-table-component')
).toBeFalsy();
});

it('passes run name and color to data table', () => {
// To make sure we only return the runs when called with the right props.
const selectSpy = spyOn(store, 'select').and.callThrough();
selectSpy
.withArgs(getRuns, {experimentId: 'book'})
.and.returnValue(
of([
buildRun({id: 'book1', name: "The Philosopher's Stone"}),
buildRun({id: 'book2', name: 'The Chamber Of Secrets'}),
])
);

store.overrideSelector(getRunColorMap, {
book1: '#000',
book2: '#111',
});

const fixture = createComponent(['book']);
fixture.detectChanges();
const dataTableComponent = fixture.debugElement.query(
By.directive(DataTableComponent)
);

expect(dataTableComponent.componentInstance.data).toEqual([
{id: 'book1', color: '#000', run: "The Philosopher's Stone"},
{id: 'book2', color: '#111', run: 'The Chamber Of Secrets'},
]);
});
});
});