Replace all DataGrid

optuna_dashboard/ts/components/DataGrid.tsx

@@ -482,9 +482,9 @@ const isNumber = (
   return typeof rowsPerPage === "number"
 }
 
-function DataGrid2(props: {
-  data: Trial[]
-  columns: ColumnDef<Trial>[]
+function DataGrid2<T>(props: {
+  data: T[]
+  columns: ColumnDef<T>[]
 }): React.ReactElement {
   const { data, columns } = props
   const [sorting, setSorting] = React.useState<SortingState>([])
@@ -538,7 +538,8 @@ function DataGrid2(props: {
                   const filterChoices = header.column.getCanFilter()
                     ? Array.from(
                         header.column.getFacetedUniqueValues().keys()
-                      ).sort() : null
+                      ).sort()
+                    : null
                   return (
                     <TableCell key={header.id} colSpan={header.colSpan}>
                       {header.isPlaceholder ? null : (

optuna_dashboard/ts/components/Preferential/PreferentialAnalytics.tsx

@@ -7,6 +7,10 @@ import {
   useTheme,
 } from "@mui/material"
 import Grid2 from "@mui/material/Unstable_Grid2"
+import { DataGrid2 } from "../DataGrid"
+import { BestTrialsCard } from "../BestTrialsCard"
+import { useStudyDetailValue, useStudySummaryValue } from "../../state"
+import { Contour } from "../GraphContour"
 import * as Optuna from "@optuna/types"
 import React, { FC } from "react"
 import { useStudyDetailValue, useStudySummaryValue } from "../../state"
@@ -14,15 +18,26 @@ import { BestTrialsCard } from "../BestTrialsCard"
 import { DataGrid, DataGridColumn } from "../DataGrid"
 import { Contour } from "../GraphContour"
 
+import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
+
 export const PreferentialAnalytics: FC<{ studyId: number }> = ({ studyId }) => {
   const theme = useTheme()
   const studySummary = useStudySummaryValue(studyId)
   const studyDetail = useStudyDetailValue(studyId)
 
   const userAttrs = studySummary?.user_attrs || studyDetail?.user_attrs || []
-  const userAttrColumns: DataGridColumn<Optuna.Attribute>[] = [
-    { field: "key", label: "Key", sortable: true },
-    { field: "value", label: "Value", sortable: true },
+  const columnHelper = createColumnHelper<Trial>()
+  const columns: ColumnDef<Attribute>[] = [
+    columnHelper.accessor("key", {
+      header: "Key",
+      footer: (info) => info.column.id,
+      enableSorting: true,
+    }),
+    columnHelper.accessor("value", {
+      header: "Value",
+      footer: (info) => info.column.id,
+      enableSorting: true,
+    }),
   ]
   return (
     <Box
@@ -55,14 +70,7 @@ export const PreferentialAnalytics: FC<{ studyId: number }> = ({ studyId }) => {
               >
                 Study User Attributes
               </Typography>
-              <DataGrid<Optuna.Attribute>
-                columns={userAttrColumns}
-                rows={userAttrs}
-                keyField={"key"}
-                dense={true}
-                initialRowsPerPage={5}
-                rowsPerPageOption={[5, 10, { label: "All", value: -1 }]}
-              />
+              <DataGrid2 data={userAttrs} columns={columns} />
             </CardContent>
           </Card>
         </Grid2>

optuna_dashboard/ts/components/StudyHistory.tsx

@@ -11,6 +11,11 @@ import FormControlLabel from "@mui/material/FormControlLabel"
 import Grid2 from "@mui/material/Unstable_Grid2"
 import * as Optuna from "@optuna/types"
 import React, { FC, useState } from "react"
+import { DataGrid2 } from "./DataGrid"
+import { GraphHyperparameterImportance } from "./GraphHyperparameterImportances"
+import { UserDefinedPlot } from "./UserDefinedPlot"
+import { BestTrialsCard } from "./BestTrialsCard"
+import { StudyArtifactCards } from "./Artifact/StudyArtifactCards"
 import { useRecoilValue } from "recoil"
 import { Trial } from "ts/types/optuna"
 import {
@@ -29,6 +34,8 @@ import { GraphParetoFront } from "./GraphParetoFront"
 import { GraphTimeline } from "./GraphTimeline"
 import { UserDefinedPlot } from "./UserDefinedPlot"
 
+import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
+
 export const StudyHistory: FC<{ studyId: number }> = ({ studyId }) => {
   const theme = useTheme()
   const directions = useStudyDirections(studyId)
@@ -47,9 +54,18 @@ export const StudyHistory: FC<{ studyId: number }> = ({ studyId }) => {
   }
 
   const userAttrs = studySummary?.user_attrs || studyDetail?.user_attrs || []
-  const userAttrColumns: DataGridColumn<Optuna.Attribute>[] = [
-    { field: "key", label: "Key", sortable: true },
-    { field: "value", label: "Value", sortable: true },
+  const columnHelper = createColumnHelper<Trial>()
+  const columns: ColumnDef<Attribute>[] = [
+    columnHelper.accessor("key", {
+      header: "Key",
+      footer: (info) => info.column.id,
+      enableSorting: true,
+    }),
+    columnHelper.accessor("value", {
+      header: "Value",
+      footer: (info) => info.column.id,
+      enableSorting: true,
+    }),
   ]
   const trials: Trial[] = studyDetail?.trials || []
   return (
@@ -153,14 +169,7 @@ export const StudyHistory: FC<{ studyId: number }> = ({ studyId }) => {
               >
                 Study User Attributes
               </Typography>
-              <DataGrid<Optuna.Attribute>
-                columns={userAttrColumns}
-                rows={userAttrs}
-                keyField={"key"}
-                dense={true}
-                initialRowsPerPage={5}
-                rowsPerPageOption={[5, 10, { label: "All", value: -1 }]}
-              />
+              <DataGrid2 data={userAttrs} columns={columns} />
             </CardContent>
           </Card>
         </Grid2>