From 2aa926e8522a43e7efe4153155eb8dc36088d8df Mon Sep 17 00:00:00 2001
From: keisuke-umezawa <keisuke.umezawa@gmail.com>
Date: Tue, 30 Jul 2024 15:14:18 +0900
Subject: [PATCH] Add detail button as optional

---
 .../ts/components/StudyDetail.tsx             | 19 ++++++++++++++++++-
 tslib/react/src/components/TrialTable.tsx     | 17 ++++++++++++++++-
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/optuna_dashboard/ts/components/StudyDetail.tsx b/optuna_dashboard/ts/components/StudyDetail.tsx
index 652400fe..ce214fd9 100644
--- a/optuna_dashboard/ts/components/StudyDetail.tsx
+++ b/optuna_dashboard/ts/components/StudyDetail.tsx
@@ -1,6 +1,7 @@
 import ChevronRightIcon from "@mui/icons-material/ChevronRight"
 import DownloadIcon from "@mui/icons-material/Download"
 import HomeIcon from "@mui/icons-material/Home"
+import LinkIcon from "@mui/icons-material/Link"
 import {
   Box,
   Button,
@@ -183,6 +184,19 @@ export const StudyDetail: FC<{
   } else if (page === "trialList") {
     content = <TrialList studyDetail={studyDetail} />
   } else if (page === "trialTable" && study !== null) {
+    const detailButtonGenerator = (studyId: number, trialNumber: number) => {
+      return (
+        <IconButton
+          component={Link}
+          to={URL_PREFIX + `/studies/${studyId}/trials?numbers=${trialNumber}`}
+          color="inherit"
+          title="Go to the trial's detail page"
+          size="small"
+        >
+          <LinkIcon />
+        </IconButton>
+      )
+    }
     content = (
       <Box
         component="div"
@@ -190,7 +204,10 @@ export const StudyDetail: FC<{
       >
         <Card sx={{ margin: theme.spacing(2) }}>
           <CardContent>
-            <TrialTable study={study} />
+            <TrialTable
+              study={study}
+              detailButtonGenerator={detailButtonGenerator}
+            />
             <Button
               variant="outlined"
               startIcon={<DownloadIcon />}
diff --git a/tslib/react/src/components/TrialTable.tsx b/tslib/react/src/components/TrialTable.tsx
index 737dd397..b1406bc9 100644
--- a/tslib/react/src/components/TrialTable.tsx
+++ b/tslib/react/src/components/TrialTable.tsx
@@ -22,7 +22,8 @@ const multiValueFilter: FilterFn<Optuna.Trial> = <D extends object>(
 export const TrialTable: FC<{
   study: Optuna.Study
   initialRowsPerPage?: number
-}> = ({ study, initialRowsPerPage }) => {
+  detailButtonGenerator?: (studyId: number, trialNumber: number) => JSX.Element
+}> = ({ study, initialRowsPerPage, detailButtonGenerator }) => {
   const trials: Optuna.Trial[] = study.trials
   const metricNames: string[] = study.metric_names || []
 
@@ -125,6 +126,20 @@ export const TrialTable: FC<{
       )
     }
   }
+  if (detailButtonGenerator) {
+    columns.push(
+      columnHelper.accessor((row) => row, {
+        header: "Detail",
+        cell: (info) =>
+          detailButtonGenerator(
+            info.getValue().study_id,
+            info.getValue().number
+          ),
+        enableSorting: false,
+        enableColumnFilter: false,
+      })
+    )
+  }
 
   return (
     <DataGrid