From 735bb9d3f28c3079e2c508a065ba650eff092c2e Mon Sep 17 00:00:00 2001
From: qjiang002 <jiangqi@jiangs-mbp-2.wifi.local.cmu.edu>
Date: Mon, 21 Nov 2022 17:07:57 -0500
Subject: [PATCH 1/2] move dataset_split and task filter to system table header

---
 .../SystemsTable/SystemTableContent.tsx       | 58 +++++++++++++++++++
 .../SystemsTable/SystemTableTools.tsx         | 19 ------
 .../src/components/SystemsTable/index.tsx     |  3 +
 3 files changed, 61 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/SystemsTable/SystemTableContent.tsx b/frontend/src/components/SystemsTable/SystemTableContent.tsx
index 5cec9ae6..f573dd18 100644
--- a/frontend/src/components/SystemsTable/SystemTableContent.tsx
+++ b/frontend/src/components/SystemsTable/SystemTableContent.tsx
@@ -15,6 +15,10 @@ import { SystemModel } from "../../models";
 import { DeleteOutlined, EditOutlined } from "@ant-design/icons";
 import { PrivateIcon, useUser } from "..";
 import { generateLeaderboardURL } from "../../utils";
+import type { FilterValue, SorterResult } from "antd/lib/table/interface";
+import type { TablePaginationConfig } from "antd/lib/table";
+import { FilterUpdate, SystemFilter } from "./SystemFilter";
+import { TaskCategory } from "../../clients/openapi";
 const { Text } = Typography;
 
 interface Props {
@@ -30,6 +34,9 @@ interface Props {
   setSelectedSystemIDs: React.Dispatch<React.SetStateAction<string[]>>;
   onActiveSystemChange: (ids: string[]) => void;
   showEditDrawer: (systemIDToEdit: string) => void;
+  onFilterChange: (value: FilterUpdate) => void;
+  filterValue: SystemFilter;
+  taskCategories: TaskCategory[];
 }
 
 export function SystemTableContent({
@@ -44,6 +51,9 @@ export function SystemTableContent({
   setSelectedSystemIDs,
   onActiveSystemChange,
   showEditDrawer,
+  onFilterChange,
+  filterValue,
+  taskCategories,
 }: Props) {
   const { userInfo } = useUser();
   const metricColumns: ColumnsType<SystemModel> = metricNames.map((metric) => ({
@@ -70,6 +80,12 @@ export function SystemTableContent({
     }
   }
 
+  const taskFilterList = taskCategories.flatMap((category) => {
+    return category.tasks.map((task) => {
+      return { text: task.name, value: task.name };
+    });
+  });
+
   const columns: ColumnsType<SystemModel> = [
     {
       dataIndex: "idx",
@@ -100,6 +116,9 @@ export function SystemTableContent({
       fixed: "left",
       title: "Task",
       render: (value) => <Tag style={{ whiteSpace: "normal" }}>{value}</Tag>,
+      filters: taskFilterList,
+      filterMultiple: false,
+      filteredValue: filterValue.task ? [filterValue.task] : null,
     },
     {
       dataIndex: "dataset_name",
@@ -132,6 +151,13 @@ export function SystemTableContent({
       title: "Dataset Split",
       fixed: "left",
       align: "center",
+      filterMultiple: false,
+      filters: [
+        { text: "train", value: "train" },
+        { text: "validation", value: "validation" },
+        { text: "test", value: "test" },
+      ],
+      filteredValue: filterValue.split ? [filterValue.split] : null,
     },
     {
       dataIndex: "source_language",
@@ -220,6 +246,37 @@ export function SystemTableContent({
     },
   };
 
+  const handleTableChange = (
+    _pagination: TablePaginationConfig,
+    filters: Record<string, FilterValue | null>,
+    _sorter: SorterResult<SystemModel> | SorterResult<SystemModel>[]
+  ) => {
+    console.log(filters);
+    for (const k in filters) {
+      if (
+        k === "dataset.split" &&
+        ((filters[k] === null && filterValue.split !== undefined) || // Reset filter
+          (filters[k] !== null &&
+            (filters[k] as unknown as string) !== filterValue.split))
+      ) {
+        onFilterChange({
+          split:
+            filters[k] === null ? undefined : (filters[k] as unknown as string),
+        });
+      } else if (
+        k === "task" &&
+        ((filters[k] === null && filterValue.split !== undefined) || // Reset filter
+          (filters[k] !== null &&
+            (filters[k] as unknown as string) !== filterValue.split))
+      ) {
+        onFilterChange({
+          task:
+            filters[k] === null ? undefined : (filters[k] as unknown as string),
+        });
+      }
+    }
+  };
+
   return (
     <div>
       <Table
@@ -237,6 +294,7 @@ export function SystemTableContent({
           onChange: (newPage, newPageSize) =>
             onPageChange(newPage - 1, newPageSize),
         }}
+        onChange={handleTableChange}
         sticky={false}
         loading={loading}
         scroll={{ x: 100 }}
diff --git a/frontend/src/components/SystemsTable/SystemTableTools.tsx b/frontend/src/components/SystemsTable/SystemTableTools.tsx
index e48be76e..20811c1a 100644
--- a/frontend/src/components/SystemsTable/SystemTableTools.tsx
+++ b/frontend/src/components/SystemsTable/SystemTableTools.tsx
@@ -10,7 +10,6 @@ import {
   Popconfirm,
   Radio,
 } from "antd";
-import { TaskSelect } from "..";
 import { TaskCategory } from "../../clients/openapi";
 import {
   ArrowDownOutlined,
@@ -208,24 +207,6 @@ export function SystemTableTools({
       </Space>
       <Space style={{ width: "fit-content", float: "right" }}>
         {mineVsAllSystemsToggle}
-        <Select
-          options={["test", "validation", "train", "all"].map((opt) => ({
-            value: opt,
-            label: opt,
-          }))}
-          value={value.split || undefined}
-          placeholder="Dataset split"
-          onChange={(value) => onChange({ split: value })}
-          style={{ minWidth: "120px" }}
-        />
-        <TaskSelect
-          taskCategories={taskCategories}
-          allowClear
-          value={value.task || undefined}
-          onChange={(value) => onChange({ task: value || "" })}
-          placeholder="All Tasks"
-          style={{ minWidth: "150px" }}
-        />
         <div style={{ display: "flex", flexDirection: "row" }}>
           <Select
             options={[
diff --git a/frontend/src/components/SystemsTable/index.tsx b/frontend/src/components/SystemsTable/index.tsx
index a86214ea..dcfd3c90 100644
--- a/frontend/src/components/SystemsTable/index.tsx
+++ b/frontend/src/components/SystemsTable/index.tsx
@@ -206,6 +206,9 @@ export function SystemsTable() {
         setSelectedSystemIDs={setSelectedSystemIDs}
         onActiveSystemChange={onActiveSystemChange}
         showEditDrawer={showEditDrawer}
+        onFilterChange={onFilterChange}
+        filterValue={filters}
+        taskCategories={taskCategories}
       />
       <AnalysisDrawer
         systems={systems.filter((sys) =>

From 40eed8b2180691c9d55d812c95bc8743dfa278d9 Mon Sep 17 00:00:00 2001
From: qjiang002 <jiangqi@Jiangs-MacBook-Pro-2.local>
Date: Sun, 27 Nov 2022 12:33:04 -0500
Subject: [PATCH 2/2] simplify code

---
 .../SystemsTable/SystemTableContent.tsx       | 39 ++++++++-----------
 1 file changed, 16 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/SystemsTable/SystemTableContent.tsx b/frontend/src/components/SystemsTable/SystemTableContent.tsx
index f573dd18..e4f5f196 100644
--- a/frontend/src/components/SystemsTable/SystemTableContent.tsx
+++ b/frontend/src/components/SystemsTable/SystemTableContent.tsx
@@ -251,29 +251,22 @@ export function SystemTableContent({
     filters: Record<string, FilterValue | null>,
     _sorter: SorterResult<SystemModel> | SorterResult<SystemModel>[]
   ) => {
-    console.log(filters);
-    for (const k in filters) {
-      if (
-        k === "dataset.split" &&
-        ((filters[k] === null && filterValue.split !== undefined) || // Reset filter
-          (filters[k] !== null &&
-            (filters[k] as unknown as string) !== filterValue.split))
-      ) {
-        onFilterChange({
-          split:
-            filters[k] === null ? undefined : (filters[k] as unknown as string),
-        });
-      } else if (
-        k === "task" &&
-        ((filters[k] === null && filterValue.split !== undefined) || // Reset filter
-          (filters[k] !== null &&
-            (filters[k] as unknown as string) !== filterValue.split))
-      ) {
-        onFilterChange({
-          task:
-            filters[k] === null ? undefined : (filters[k] as unknown as string),
-        });
-      }
+    let filterChanged = false;
+    const filterUpdate: Partial<SystemFilter> = {};
+    const dataset_split = filters["dataset.split"]
+      ? (filters["dataset.split"][0] as string)
+      : undefined;
+    if (dataset_split !== filterValue.split) {
+      filterChanged = true;
+      filterUpdate.split = dataset_split;
+    }
+    const task = filters["task"] ? (filters["task"][0] as string) : undefined;
+    if (task !== filterValue.task) {
+      filterChanged = true;
+      filterUpdate.task = task;
+    }
+    if (filterChanged) {
+      onFilterChange(filterUpdate);
     }
   };