Add detail button as optional

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 />}

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