From 4fccaf1666796c74158665effb45d97a3f05935c Mon Sep 17 00:00:00 2001
From: keisuke-umezawa <keisuke.umezawa@gmail.com>
Date: Thu, 18 Apr 2024 09:46:42 +0900
Subject: [PATCH] Fix type error

Fix lint

Fix type error

Fix type error
---
 .../ts/components/Artifact/WaveSurferArtifactViewer.tsx     | 5 ++++-
 optuna_dashboard/ts/components/DataGrid.tsx                 | 6 +++---
 .../ts/components/Preferential/PreferentialAnalytics.tsx    | 3 ++-
 optuna_dashboard/ts/components/StudyDetail.tsx              | 2 +-
 optuna_dashboard/ts/components/StudyHistory.tsx             | 3 ++-
 optuna_dashboard/ts/components/TrialTable.tsx               | 6 +++---
 6 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/optuna_dashboard/ts/components/Artifact/WaveSurferArtifactViewer.tsx b/optuna_dashboard/ts/components/Artifact/WaveSurferArtifactViewer.tsx
index 0f13bb53..96aa129b 100644
--- a/optuna_dashboard/ts/components/Artifact/WaveSurferArtifactViewer.tsx
+++ b/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"}
diff --git a/optuna_dashboard/ts/components/DataGrid.tsx b/optuna_dashboard/ts/components/DataGrid.tsx
index 3652d915..3c8e1826 100644
--- a/optuna_dashboard/ts/components/DataGrid.tsx
+++ b/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}
diff --git a/optuna_dashboard/ts/components/Preferential/PreferentialAnalytics.tsx b/optuna_dashboard/ts/components/Preferential/PreferentialAnalytics.tsx
index fb050f10..fa2c312a 100644
--- a/optuna_dashboard/ts/components/Preferential/PreferentialAnalytics.tsx
+++ b/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,
diff --git a/optuna_dashboard/ts/components/StudyDetail.tsx b/optuna_dashboard/ts/components/StudyDetail.tsx
index 5f28675c..55a1332a 100644
--- a/optuna_dashboard/ts/components/StudyDetail.tsx
+++ b/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>
diff --git a/optuna_dashboard/ts/components/StudyHistory.tsx b/optuna_dashboard/ts/components/StudyHistory.tsx
index 9cee3f6f..ca602c11 100644
--- a/optuna_dashboard/ts/components/StudyHistory.tsx
+++ b/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,
diff --git a/optuna_dashboard/ts/components/TrialTable.tsx b/optuna_dashboard/ts/components/TrialTable.tsx
index e7f8f80c..1ef96efe 100644
--- a/optuna_dashboard/ts/components/TrialTable.tsx
+++ b/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,