Merge pull request #739 from nabenabe0928/feat/add-more-flexible-pagi…

…nation

Enable users to jump arbitrary page numbers from text field

optuna_dashboard/ts/components/DataGrid.tsx

@@ -8,10 +8,12 @@ import {
   TablePagination,
   TableRow,
   TableSortLabel,
+  TextField,
   Collapse,
   IconButton,
   Menu,
   MenuItem,
+  Box,
 } from "@mui/material"
 import { styled } from "@mui/system"
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"
@@ -84,6 +86,41 @@ function DataGrid<T>(props: {
     setPage(0)
   }
 
+  const PaginationForm: React.FC<{
+    onPageNumberSubmit: (value: number) => void
+    maxPageNumber: number
+  }> = ({ onPageNumberSubmit, maxPageNumber }) => {
+    // This component is separated from DataGrid to prevent `DataGrid` from re-rendering the page,
+    // every time any letters are input.
+    const [specifiedPageText, setSpecifiedPageText] = React.useState("")
+
+    const handleSubmitPageNumber = (
+      event: React.FormEvent<HTMLFormElement>
+    ) => {
+      event.preventDefault()
+      const newPageNumber = parseInt(specifiedPageText, 10)
+      // Page is 0-indexed in `TablePagination`.
+      onPageNumberSubmit(newPageNumber - 1)
+      setSpecifiedPageText("") // reset the input field
+    }
+
+    return (
+      <form onSubmit={handleSubmitPageNumber}>
+        <TextField
+          size="small"
+          label={`Go to Page: n / ${maxPageNumber}`}
+          value={specifiedPageText}
+          type="number"
+          style={{ width: 200 }}
+          inputProps={{ min: 1, max: maxPageNumber }}
+          onChange={(e) => {
+            setSpecifiedPageText(e.target.value)
+          }}
+        />
+      </form>
+    )
+  }
+
   // Filtering
   const filteredRows = rows.filter((row, rowIdx) => {
     if (defaultFilter !== undefined && defaultFilter(row)) {
@@ -119,6 +156,7 @@ function DataGrid<T>(props: {
   const RootDiv = styled("div")({
     width: "100%",
   })
+  const maxPageNumber = Math.ceil(filteredRows.length / rowsPerPage)
   return (
     <RootDiv>
       <TableContainer>
@@ -177,15 +215,28 @@ function DataGrid<T>(props: {
           </TableBody>
         </Table>
       </TableContainer>
-      <TablePagination
-        rowsPerPageOptions={rowsPerPageOption}
-        component="div"
-        count={filteredRows.length}
-        rowsPerPage={rowsPerPage}
-        page={page}
-        onPageChange={handleChangePage}
-        onRowsPerPageChange={handleChangeRowsPerPage}
-      />
+      {filteredRows.length > 0 ? (
+        <>
+          {/* @ts-ignore */}
+          <Box display="flex" alignItems="center">
+            <TablePagination
+              rowsPerPageOptions={rowsPerPageOption}
+              component="div"
+              count={filteredRows.length}
+              rowsPerPage={rowsPerPage}
+              page={page}
+              onPageChange={handleChangePage}
+              onRowsPerPageChange={handleChangeRowsPerPage}
+            />
+            {maxPageNumber > 2 ? (
+              <PaginationForm
+                onPageNumberSubmit={(page) => setPage(page)}
+                maxPageNumber={maxPageNumber}
+              />
+            ) : null}
+          </Box>
+        </>
+      ) : null}
     </RootDiv>
   )
 }