Add filters + sorting to server-side table

src/API/explorePage.js

@@ -2,22 +2,28 @@ import utils from './utils';
 import { api } from './baseUrlProxy';
 
 const routes = {
-  async getDrugChemicalPairs() {
+  async getDrugChemicalPairs({
+    pagination,
+    sort,
+    filters,
+  }) {
     let response;
     try {
       response = await api.post(
         '/api/explore/drug-disease',
         {
           pagination: {
-            offset: 0,
-            limit: 1000,
+            offset: pagination.pageIndex * pagination.pageSize,
+            limit: pagination.pageSize,
           },
+          sort,
+          filters,
         },
       );
     } catch (error) {
       return utils.handleAxiosError(error);
     }
-    return response.data.rows;
+    return response.data;
   },
 };
 

src/pages/explore/DebouncedFilterBox.jsx

@@ -0,0 +1,49 @@
+import {
+  IconButton,
+  InputLabel,
+  FormControl,
+  InputAdornment,
+  FilledInput,
+} from '@material-ui/core';
+import { Clear } from '@material-ui/icons';
+import React from 'react';
+
+function DebouncedFilterBox({
+  value: initialValue, onChange, debounce = 500, ...props
+}) {
+  const [value, setValue] = React.useState(initialValue);
+
+  React.useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  React.useEffect(() => {
+    const timeout = setTimeout(() => {
+      onChange(value);
+    }, debounce);
+
+    return () => clearTimeout(timeout);
+  }, [value]);
+
+  return (
+    <FormControl fullWidth variant="filled">
+      <InputLabel htmlFor="filter">Filter</InputLabel>
+      <FilledInput
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        variant="filled"
+        margin="dense"
+        endAdornment={(
+          <InputAdornment position="end">
+            <IconButton aria-label="Clear filter" onClick={() => setValue('')} size="small">
+              <Clear />
+            </IconButton>
+          </InputAdornment>
+        )}
+        {...props}
+      />
+    </FormControl>
+  );
+}
+
+export default React.memo(DebouncedFilterBox);

src/pages/explore/DrugDiseasePairs.jsx

@@ -1,13 +1,22 @@
-import { Button, makeStyles } from '@material-ui/core';
+import { Button, makeStyles, TablePagination } from '@material-ui/core';
 import { ArrowRight } from '@material-ui/icons';
 import React from 'react';
 import {
   Grid, Row, Col,
 } from 'react-bootstrap';
 import { useHistory, Link } from 'react-router-dom';
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
 import QueryBuilderContext from '~/context/queryBuilder';
 import useQueryBuilder from '../queryBuilder/useQueryBuilder';
 import explorePage from '~/API/explorePage';
+import TablePaginationActions from './TableActions';
+import HeaderCell from './HeaderCell';
+import Loading from '~/components/loading/Loading';
 
 const useStyles = makeStyles({
   hover: {
@@ -18,12 +27,29 @@ const useStyles = makeStyles({
       visibility: 'visible',
     },
   },
+  table: {
+    fontSize: '1.6rem',
+    width: '100%',
+    '& td, & th': {
+      paddingLeft: 12,
+    },
+    '& td:first-of-type, & th:first-of-type': {
+      paddingLeft: 0,
+    },
+  },
 });
 
 const fetchPairs = explorePage.getDrugChemicalPairs;
 
 export default function DrugDiseasePairs() {
-  const [pairs, setPairs] = React.useState([]);
+  const [pagination, setPagination] = React.useState({
+    pageIndex: 0,
+    pageSize: 20,
+  });
+  const [sorting, setSorting] = React.useState([]);
+  const [columnFilters, setColumnFilters] = React.useState([]);
+
+  const [data, setData] = React.useState([]);
   const [isLoading, setIsLoading] = React.useState(true);
 
   // eslint-disable-next-line no-unused-vars
@@ -65,16 +91,74 @@ export default function DrugDiseasePairs() {
 
   const classes = useStyles();
 
+  const columnHelper = createColumnHelper();
+  const columns = React.useMemo(() => ([
+    columnHelper.accessor('disease_name', {
+      header: 'Disease',
+      cell: (info) => (
+        <>
+          {info.row.original.disease_name}
+          <Chip>{info.row.original.disease_id}</Chip>
+        </>
+      ),
+    }),
+    columnHelper.accessor('drug_name', {
+      header: 'Drug',
+      cell: (info) => (
+        <>
+          {info.row.original.drug_name}
+          <Chip>{info.row.original.drug_id}</Chip>
+        </>
+      ),
+    }),
+    columnHelper.accessor('score', {
+      header: 'Score',
+      cell: (info) => (info.row.original.known ? (
+        <span style={{ textDecoration: 'underline' }}>
+          {info.row.original.score.toFixed(6)}*
+        </span>
+      ) : (
+        info.row.original.score.toFixed(6)
+      )),
+      enableColumnFilter: false,
+    }),
+    columnHelper.display({
+      id: 'startQueryButton',
+      cell: (props) => (
+        <Button
+          variant="contained"
+          color="primary"
+          size="small"
+          endIcon={<ArrowRight />}
+          onClick={() => handleStartQuery(props.row.original)}
+        >
+          Start a query
+        </Button>
+      ),
+    }),
+  ]), []);
+
+  const sortParam = React.useMemo(() => Object.fromEntries(
+    sorting.map(({ id, desc }) => [id, desc ? 'desc' : 'asc']),
+  ), [sorting]);
+
+  const filterParam = React.useMemo(() => Object.fromEntries(
+    columnFilters.map(({ id, value }) => [id, value]),
+  ), [columnFilters]);
+
   React.useEffect(() => {
+    setIsLoading(true);
     let ignore = false;
 
     (async () => {
       try {
-        const data = await fetchPairs();
-
         if (ignore) return;
 
-        setPairs(data);
+        setData(await fetchPairs({
+          pagination,
+          sort: sortParam,
+          filters: filterParam,
+        }));
         setIsLoading(false);
       } catch (e) {
         setError(e.message);
@@ -85,7 +169,29 @@ export default function DrugDiseasePairs() {
     return () => {
       ignore = true;
     };
-  }, []);
+  }, [
+    pagination,
+    JSON.stringify(sortParam), // TODO: better deep equal check
+    JSON.stringify(filterParam),
+  ]);
+
+  const table = useReactTable({
+    data: data.rows || [],
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    enableMultiSort: false,
+    manualSorting: true,
+    manualFiltering: true,
+    rowCount: data.num_of_results,
+    state: {
+      pagination,
+      sorting,
+      columnFilters,
+    },
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+  });
 
   return (
     <Grid style={{ marginBottom: '50px', marginTop: '50px' }}>
@@ -107,60 +213,79 @@ export default function DrugDiseasePairs() {
 
           <hr />
 
-          {isLoading ? 'Loading...' : (
-            <table style={{ fontSize: '1.6rem', width: '100%' }}>
+          <div style={{ position: 'relative' }}>
+            {isLoading && (
+              <div
+                style={{
+                  position: 'absolute',
+                  inset: '-20px',
+                  backgroundColor: 'rgba(255 255 255 / 0.3)',
+                  backdropFilter: 'blur(2px)',
+                  borderRadius: '8px',
+                  zIndex: 10000,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <Loading />
+              </div>
+            )}
+
+            <table className={classes.table}>
               <thead>
-                <tr style={{ borderBottom: '1px solid #eee' }}>
-                  <th style={{ paddingBottom: '1rem' }}>
-                    <h4 style={{ textTransform: 'uppercase' }}>Disease</h4>
-                    <input placeholder="Search diseases" />
-                  </th>
-                  <th style={{ paddingBottom: '1rem' }}>
-                    <h4 style={{ textTransform: 'uppercase' }}>Drug</h4>
-                    <input placeholder="Search drugs" />
-                  </th>
-                  <th style={{ paddingBottom: '1rem' }}>
-                    <h4 style={{ textTransform: 'uppercase' }}>Score</h4>
-                  </th>
-                </tr>
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <tr key={headerGroup.id} style={{ borderBottom: '1px solid #eee' }}>
+                    {headerGroup.headers.map((header) => (
+                      <th key={header.id} style={{ paddingBottom: '1rem', verticalAlign: 'top' }}>
+                        {header.isPlaceholder ? null : (
+                          <HeaderCell header={header} />
+                        )}
+                      </th>
+                    ))}
+                  </tr>
+                ))}
               </thead>
               <tbody>
-                {
-                  pairs.map((pair, i) => (
-                    <tr className={classes.hover} key={i}>
-                      <td>
-                        {pair.disease_name}
-                        <Chip>{pair.disease_id}</Chip>
+                {table.getRowModel().rows.map((row) => (
+                  <tr key={row.id} className={classes.hover}>
+                    {row.getVisibleCells().map((cell) => (
+                      <td key={cell.id}>
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
                       </td>
-                      <td>
-                        {pair.drug_name}
-                        <Chip>{pair.drug_id}</Chip>
-                      </td>
-                      <td>
-                        {
-                          pair.known ? (
-                            <span style={{ textDecoration: 'underline' }}>
-                              {pair.score.toFixed(6)}*
-                            </span>
-                          ) : (
-                            pair.score.toFixed(6)
-                          )
-                        }
-                      </td>
-                      <Button
-                        variant="contained"
-                        color="primary"
-                        endIcon={<ArrowRight />}
-                        onClick={() => handleStartQuery(pair)}
-                      >
-                        Start a query
-                      </Button>
-                    </tr>
-                  ))
-                }
+                    ))}
+                  </tr>
+                ))}
               </tbody>
             </table>
-          )}
+
+            {data.num_of_results > 0 && (
+              <TablePagination
+                rowsPerPageOptions={[10, 20, 50, 100]}
+                component="div"
+                count={data.num_of_results}
+                rowsPerPage={pagination.pageSize}
+                page={pagination.pageIndex}
+                labelDisplayedRows={({ from, to, count }) => `${from}-${to} of ${
+                  count !== -1 ? count.toLocaleString() : `more than ${to}`
+                }`}
+                onChangePage={(_, page) => {
+                  setPagination((prev) => ({ ...prev, pageIndex: page }));
+                }}
+                onChangeRowsPerPage={(e) => {
+                  const pageSize = e.target.value ? Number(e.target.value) : 10;
+                  setPagination(({ pageIndex: 0, pageSize }));
+                }}
+                ActionsComponent={TablePaginationActions}
+              />
+            )}
+
+            {data.num_of_results === 0 && (
+              <div style={{ textAlign: 'center', margin: '2rem 0' }}>
+                No results found, please try a different filter.
+              </div>
+            )}
+          </div>
         </Col>
       </Row>
     </Grid>