HParam UI: Replace RunsTableComponent with DataTable widget behind flag

[JamesHollyer]

Motivation for features / changes

We are adding lots of functionality to the scalar data table and the runs table. For consistency and reuse we are replacing the table in the runs table with a DataTable widget. This is the first step towards that change.

Technical description of changes

Besides the data all the values which are passed in are hard coded into the runs_table_container. This is done so that we have a data table to work with quickly and unblock some other work. These values will be set up in ngrx in future PRs.

Screenshots of UI changes (or N/A)

We have a plan to restyle this table for the Runs Table. However, that will come later. For now it is just the standard data table which looks like this.

Alternate designs / implementations considered (or N/A)

We considered leaving the runs table and adding all features to both.

[rileyajones]

nit

Suggested change

	selectSpy = spyOn(store, 'select').and.callThrough();
	const selectSpy = spyOn(store, 'select').and.callThrough();

[JamesHollyer]

Done.

[rileyajones]

nit

Suggested change

let selectSpy: jasmine.Spy;

[JamesHollyer]

Done.

[rileyajones]

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);

[JamesHollyer]

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

[JamesHollyer]

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

[rileyajones]

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
	});

[JamesHollyer]

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.