move dataset_split and task filter to system table header

[qjiang002]

This is a sub-component of PR #518

Move dataset split and task filter to the system table header

• It supports updating and reading from the url. If the column is filtered, the filter icon next to the column name is highlighted in blue.

[lyuyangh]

Could you please remove the console log?

[lyuyangh]

This for loop has a couple of minor bugs/typos. I think we can fix them and simplify the code to something like this

const filterUpdate: Partial<SystemFilter> = {};
const dataset_split = filters["dataset.split"]
  ? (filters["dataset.split"][0] as string)
  : undefined;
if (dataset_split !== filterValue.split) {
  filterUpdate.split = dataset_split;
}
const task = filters["task"] ? (filters["task"][0] as string) : undefined;
if (task !== filterValue.task) {
  filterUpdate.task = task;
}
onFilterChange(filterUpdate);

Note that I changed the following things:

1. I don't think we need a for loop here. Loops are for repetitive things but we want to handle each key differently here.
2. filters["task"] and filters["dataset.split"] are arrays if the filters are active. I don't think we can typecast them to string.
3. To check whether the new filter value is different from the current one, I converted filters[key] to the value we want with an assignment and then this check is just an equality check.
4. onFilterChange() is only called once at the end. This makes it easier to track the states because filterValue is only updated once.

[qjiang002]

Thank you very much! This looks much clearer. I add another boolean flag before onFilterChange because onFilterChange will set the pagination to page one even when filterUpdate is empty.

[lyuyangh]

Looks great! Thanks!