Fix sort order

optuna · Apr 15, 2024 · 83248d9 · 83248d9
1 parent c22b84f
commit 83248d9
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 22 deletions.
diff --git a/optuna_dashboard/ts/components/DataGrid.tsx b/optuna_dashboard/ts/components/DataGrid.tsx
@@ -645,27 +645,40 @@ function DataGrid2(props: {
           </TableBody>
         </Table>
       </TableContainer>
-      <TablePagination
-        rowsPerPageOptions={[10, 50, 100, { label: "All", value: data.length }]}
-        component="div"
-        count={table.getFilteredRowModel().rows.length}
-        rowsPerPage={table.getState().pagination.pageSize}
-        page={table.getState().pagination.pageIndex}
-        slotProps={{
-          select: {
-            inputProps: { "aria-label": "rows per page" },
-            native: true,
-          },
-        }}
-        onPageChange={(_, page) => {
-          table.setPageIndex(page)
-        }}
-        onRowsPerPageChange={(e) => {
-          const size = e.target.value ? Number(e.target.value) : 10
-          table.setPageSize(size)
-        }}
-        ActionsComponent={TablePaginationActions}
-      />
+      <Box display="flex" alignItems="center">
+        <TablePagination
+          rowsPerPageOptions={[
+            10,
+            50,
+            100,
+            { label: "All", value: data.length },
+          ]}
+          component="div"
+          count={table.getFilteredRowModel().rows.length}
+          rowsPerPage={table.getState().pagination.pageSize}
+          page={table.getState().pagination.pageIndex}
+          slotProps={{
+            select: {
+              inputProps: { "aria-label": "rows per page" },
+              native: true,
+            },
+          }}
+          onPageChange={(_, page) => {
+            table.setPageIndex(page)
+          }}
+          onRowsPerPageChange={(e) => {
+            const size = e.target.value ? Number(e.target.value) : 10
+            table.setPageSize(size)
+          }}
+          ActionsComponent={TablePaginationActions}
+        />
+        {table.getPageCount() > 2 ? (
+          <PaginationForm1
+            onPageNumberSubmit={(page) => table.setPageIndex(page)}
+            maxPageNumber={table.getPageCount()}
+          />
+        ) : null}
+      </Box>
     </Box>
   )
 }
@@ -740,4 +753,37 @@ const TablePaginationActions = (props: TablePaginationActionsProps) => {
   )
 }
 
+const PaginationForm1: 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>
+  )
+}
+
 export { DataGrid, DataGrid2, DataGridColumn }
diff --git a/optuna_dashboard/ts/components/TrialTable.tsx b/optuna_dashboard/ts/components/TrialTable.tsx
@@ -101,7 +101,9 @@ export const TrialTable: FC<{
       columnHelper.accessor("values", {
         header: "Value",
         footer: (info) => info.column.id,
+        enableSorting: true,
         enableColumnFilter: false,
+        sortUndefined: "last",
       })
     )
   } else {
@@ -130,11 +132,13 @@ export const TrialTable: FC<{
     columns.push(...objectiveColumns)
     tcolumns.push(
       ...studyDetail.directions.map((s, objectiveId) =>
-        columnHelper.accessor("values", {
+        columnHelper.accessor((row) => row["values"]?.[objectiveId], {
           id: `values_${objectiveId}`,
           header: `Objective ${objectiveId}`,
           footer: (info) => info.column.id,
+          enableSorting: true,
           enableColumnFilter: false,
+          sortUndefined: "last",
         })
       )
     )
@@ -183,6 +187,7 @@ export const TrialTable: FC<{
           header: `Param ${s.name}`,
           footer: (info) => info.column.id,
           enableSorting: sortable,
+          sortUndefined: "last",
           enableColumnFilter: filterChoices !== undefined,
           filterFn: multiValueFilter,
         }
@@ -222,6 +227,7 @@ export const TrialTable: FC<{
           footer: (info) => info.column.id,
           enableSorting: attr_spec.sortable,
           enableColumnFilter: false,
+          sortUndefined: "last",
         }
       )
     )