From db0440db410896bc129273dde2e9386d1f14641a Mon Sep 17 00:00:00 2001
From: nabenabe0928 <shuhei.watanabe.utokyo@gmail.com>
Date: Mon, 15 Jan 2024 12:25:52 +0100
Subject: [PATCH] Address some comments by umezawa

---
 optuna_dashboard/ts/components/DataGrid.tsx | 53 ++++++++++-----------
 1 file changed, 26 insertions(+), 27 deletions(-)

diff --git a/optuna_dashboard/ts/components/DataGrid.tsx b/optuna_dashboard/ts/components/DataGrid.tsx
index 7a525092f..0ce53be44 100644
--- a/optuna_dashboard/ts/components/DataGrid.tsx
+++ b/optuna_dashboard/ts/components/DataGrid.tsx
@@ -71,8 +71,8 @@ function DataGrid<T>(props: {
   initialRowsPerPage = initialRowsPerPage // use first element as default
     ? initialRowsPerPage
     : isNumber(rowsPerPageOption[0])
-    ? rowsPerPageOption[0]
-    : rowsPerPageOption[0].value
+      ? rowsPerPageOption[0]
+      : rowsPerPageOption[0].value
   const [rowsPerPage, setRowsPerPage] = React.useState(initialRowsPerPage)
 
   const handleChangePage = (event: unknown, newPage: number) => {
@@ -86,7 +86,7 @@ function DataGrid<T>(props: {
     setPage(0)
   }
 
-  const PaginationTextFieldComponent: React.FC<{
+  const PaginationForm: React.FC<{
     onPageNumberSubmit: (value: number) => void
     maxPageNumber: number
   }> = ({ onPageNumberSubmit, maxPageNumber }) => {
@@ -98,21 +98,20 @@ function DataGrid<T>(props: {
       event: React.FormEvent<HTMLFormElement>
     ) => {
       event.preventDefault()
-      const newPage = parseInt(specifiedPageText, 10)
-      setSpecifiedPageText("") // reset the input field
-      if (Number.isNaN(newPage)) {
-        return
-      }
-      const newPageNumber = newPage <= 0 ? 1 : Math.min(newPage, maxPageNumber)
+      const newPageNumber = parseInt(specifiedPageText, 10)
       // Page is 0-indexed in `TablePagination`.
       onPageNumberSubmit(newPageNumber - 1)
+      setSpecifiedPageText("") // reset the input field
     }
 
     return (
       <form onSubmit={handleSubmitPageNumber}>
         <TextField
-          label="Go to Page"
+          label={`Go to Page: n / ${maxPageNumber}`}
           value={specifiedPageText}
+          type="number"
+          style={{ width: 200 }}
+          inputProps={{ min: 1, max: maxPageNumber }}
           onChange={(e) => {
             setSpecifiedPageText(e.target.value)
           }}
@@ -129,19 +128,19 @@ function DataGrid<T>(props: {
     return filters.length === 0
       ? true
       : filters.every((f) => {
-          if (columns.length <= f.columnIdx) {
-            console.log(
-              `columnIdx=${f.columnIdx} must be smaller than columns.length=${columns.length}`
-            )
-            return true
-          }
-          const toCellValue = columns[f.columnIdx].toCellValue
-          const cellValue =
-            toCellValue !== undefined
-              ? toCellValue(rowIdx)
-              : row[columns[f.columnIdx].field]
-          return f.values.some((v) => v === cellValue)
-        })
+        if (columns.length <= f.columnIdx) {
+          console.log(
+            `columnIdx=${f.columnIdx} must be smaller than columns.length=${columns.length}`
+          )
+          return true
+        }
+        const toCellValue = columns[f.columnIdx].toCellValue
+        const cellValue =
+          toCellValue !== undefined
+            ? toCellValue(rowIdx)
+            : row[columns[f.columnIdx].field]
+        return f.values.some((v) => v === cellValue)
+      })
   })
 
   // Sorting
@@ -232,7 +231,7 @@ function DataGrid<T>(props: {
               onRowsPerPageChange={handleChangeRowsPerPage}
             />
             {maxPageNumber > 4 ? (
-              <PaginationTextFieldComponent
+              <PaginationForm
                 onPageNumberSubmit={(page) => setPage(page)}
                 maxPageNumber={maxPageNumber}
               />
@@ -324,8 +323,8 @@ function DataGridHeaderColumn<T>(props: {
                       filter === null
                         ? filterChoices.filter((v) => v !== choice) // By default, every choice is ticked, so the chosen option will be unticked.
                         : filter.values.some((v) => v === choice)
-                        ? filter.values.filter((v) => v !== choice)
-                        : [...filter.values, choice]
+                          ? filter.values.filter((v) => v !== choice)
+                          : [...filter.values, choice]
                     onFilterChange(newTickedValues)
                   }}
                 >
@@ -375,7 +374,7 @@ function DataGridRow<T>(props: {
           const cellItem = column.toCellValue
             ? column.toCellValue(rowIndex)
             : // TODO(c-bata): Avoid this implicit type conversion.
-              (row[column.field] as number | string | null | undefined)
+            (row[column.field] as number | string | null | undefined)
 
           return (
             <TableCell