Fix type error

Fix lint

Fix type error

Fix type error

optuna_dashboard/ts/components/Artifact/WaveSurferArtifactViewer.tsx

@@ -61,7 +61,10 @@ export const WaveSurferArtifactViewer: React.FC<WaveSurferArtifactViewerProps> =
     }, [wavesurfer])
 
     return (
-      <Box style={{ width: "100%", display: "flex", flexDirection: "column" }}>
+      <Box
+        component="div"
+        style={{ width: "100%", display: "flex", flexDirection: "column" }}
+      >
         <div ref={containerRef} style={{ minHeight: "120px", width: "100%" }} />
         <button onClick={onPlayClick} style={{ marginTop: "1em" }}>
           {isPlaying ? "Pause" : "Play"}

optuna_dashboard/ts/components/DataGrid.tsx

@@ -108,7 +108,7 @@ function DataGrid<T>(props: {
   })
 
   return (
-    <Box sx={{ width: "100%" }}>
+    <Box component="div" sx={{ width: "100%" }}>
       <TableContainer component={Paper}>
         <Table sx={{ minWidth: 650 }} aria-label="simple table">
           <TableHead>
@@ -236,7 +236,7 @@ function DataGrid<T>(props: {
           </TableBody>
         </Table>
       </TableContainer>
-      <Box display="flex" alignItems="center">
+      <Box component="div" display="flex" alignItems="center">
         <TablePagination
           rowsPerPageOptions={[
             10,
@@ -303,7 +303,7 @@ const TablePaginationActions = (props: TablePaginationActionsProps) => {
   }
 
   return (
-    <Box sx={{ flexShrink: 0, ml: 2.5 }}>
+    <Box component="div" sx={{ flexShrink: 0, ml: 2.5 }}>
       <IconButton
         onClick={handleFirstPageButtonClick}
         disabled={page === 0}

optuna_dashboard/ts/components/Preferential/PreferentialAnalytics.tsx

@@ -27,7 +27,8 @@ export const PreferentialAnalytics: FC<{ studyId: number }> = ({ studyId }) => {
 
   const userAttrs = studySummary?.user_attrs || studyDetail?.user_attrs || []
   const columnHelper = createColumnHelper<Optuna.Attribute>()
-  const columns: ColumnDef<Optuna.Attribute>[] = [
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const columns: ColumnDef<Optuna.Attribute, any>[] = [
     columnHelper.accessor("key", {
       header: "Key",
       footer: (info) => info.column.id,

optuna_dashboard/ts/components/StudyDetail.tsx

@@ -171,7 +171,7 @@ export const StudyDetail: FC<{
       >
         <Card sx={{ margin: theme.spacing(2) }}>
           <CardContent>
-            <TrialTable studyDetail={studyDetail} initialRowsPerPage={50} />
+            <TrialTable studyDetail={studyDetail} />
           </CardContent>
         </Card>
       </Box>

optuna_dashboard/ts/components/StudyHistory.tsx

@@ -54,7 +54,8 @@ export const StudyHistory: FC<{ studyId: number }> = ({ studyId }) => {
 
   const userAttrs = studySummary?.user_attrs || studyDetail?.user_attrs || []
   const columnHelper = createColumnHelper<Optuna.Attribute>()
-  const columns: ColumnDef<Optuna.Attribute>[] = [
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const columns: ColumnDef<Optuna.Attribute, any>[] = [
     columnHelper.accessor("key", {
       header: "Key",
       footer: (info) => info.column.id,

optuna_dashboard/ts/components/TrialTable.tsx

@@ -15,13 +15,12 @@ import {
   ColumnDef,
   createColumnHelper,
   Row,
-  IdType,
   FilterFn,
 } from "@tanstack/react-table"
 
 const multiValueFilter: FilterFn<Trial> = <D extends object>(
   row: Row<D>,
-  columnId: IdType<D>,
+  columnId: string,
   filterValue: string[]
 ) => {
   const rowValue = row.getValue(columnId) as string
@@ -36,7 +35,8 @@ export const TrialTable: FC<{
   const objectiveNames: string[] = studyDetail?.objective_names || []
 
   const columnHelper = createColumnHelper<Trial>()
-  const columns: ColumnDef<Trial>[] = [
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const columns: ColumnDef<Trial, any>[] = [
     columnHelper.accessor("number", {
       header: "Number",
       footer: (info) => info.column.id,