Followup/feature/tslib trialtable

optuna_dashboard/ts/components/StudyDetail.tsx

@@ -1,7 +1,9 @@
 import ChevronRightIcon from "@mui/icons-material/ChevronRight"
+import DownloadIcon from "@mui/icons-material/Download"
 import HomeIcon from "@mui/icons-material/Home"
 import {
   Box,
+  Button,
   Card,
   CardContent,
   IconButton,
@@ -13,6 +15,8 @@ import React, { FC, useEffect, useMemo } from "react"
 import { Link, useParams } from "react-router-dom"
 import { useRecoilValue } from "recoil"
 
+import { TrialTable } from "@optuna/react"
+import * as Optuna from "@optuna/types"
 import { actionCreator } from "../action"
 import { useConstants } from "../constantsProvider"
 import {
@@ -34,7 +38,6 @@ import { PreferentialHistory } from "./Preferential/PreferentialHistory"
 import { PreferentialTrials } from "./Preferential/PreferentialTrials"
 import { StudyHistory } from "./StudyHistory"
 import { TrialList } from "./TrialList"
-import { TrialTable } from "./TrialTable"
 
 export const useURLVars = (): number => {
   const { studyId } = useParams<{ studyId: string }>()
@@ -59,6 +62,19 @@ export const StudyDetail: FC<{
   const reloadInterval = useRecoilValue<number>(reloadIntervalState)
   const studyName = useStudyName(studyId)
   const isPreferential = useStudyIsPreferential(studyId)
+  const study: Optuna.Study | null = studyDetail
+    ? {
+        id: studyDetail.id,
+        name: studyDetail.name,
+        directions: studyDetail.directions,
+        union_search_space: studyDetail.union_search_space,
+        intersection_search_space: studyDetail.intersection_search_space,
+        union_user_attrs: studyDetail.union_user_attrs,
+        datetime_start: studyDetail.datetime_start,
+        trials: studyDetail.trials,
+        metric_names: studyDetail.metric_names,
+      }
+    : null
 
   const title =
     studyName !== null ? `${studyName} (id=${studyId})` : `Study #${studyId}`
@@ -166,15 +182,27 @@ export const StudyDetail: FC<{
     )
   } else if (page === "trialList") {
     content = <TrialList studyDetail={studyDetail} />
-  } else if (page === "trialTable") {
+  } else if (page === "trialTable" && study !== null) {
+    const linkURL = (studyId: number, trialNumber: number) => {
+      return url_prefix + `/studies/${studyId}/trials?numbers=${trialNumber}`
+    }
     content = (
       <Box
         component="div"
         sx={{ display: "flex", width: "100%", flexDirection: "column" }}
       >
         <Card sx={{ margin: theme.spacing(2) }}>
           <CardContent>
-            <TrialTable studyDetail={studyDetail} />
+            <TrialTable study={study} linkComponent={Link} linkURL={linkURL} />
+            <Button
+              variant="outlined"
+              startIcon={<DownloadIcon />}
+              download
+              href={`/csv/${studyDetail?.id}`}
+              sx={{ marginRight: theme.spacing(2), minWidth: "120px" }}
+            >
+              Download CSV File
+            </Button>
           </CardContent>
         </Card>
       </Box>

tslib/react/src/components/TrialTable.tsx

@@ -1,3 +1,5 @@
+import { Link as LinkIcon } from "@mui/icons-material"
+import { IconButton } from "@mui/material"
 import { FC } from "react"
 
 import * as Optuna from "@optuna/types"
@@ -22,8 +24,12 @@ const multiValueFilter: FilterFn<Optuna.Trial> = <D extends object>(
 export const TrialTable: FC<{
   study: Optuna.Study
   initialRowsPerPage?: number
-}> = ({ study, initialRowsPerPage }) => {
+  // biome-ignore lint/suspicious/noExplicitAny: Any react component.
+  linkComponent?: React.ComponentType<any>
+  linkURL?: (studyId: number, trialNumber: number) => string
+}> = ({ study, initialRowsPerPage, linkComponent, linkURL }) => {
   const trials: Optuna.Trial[] = study.trials
+  const metricNames: string[] = study.metric_names || []
 
   const columnHelper = createColumnHelper<Optuna.Trial>()
   // biome-ignore lint/suspicious/noExplicitAny: It is difficult to specify this type.
@@ -53,17 +59,33 @@ export const TrialTable: FC<{
       ...study.directions.map((_s, objectiveId) =>
         columnHelper.accessor((row) => row.values?.[objectiveId], {
           id: `values_${objectiveId}`,
-          header: `Objective ${objectiveId}`,
+          header:
+            metricNames.length === study.directions.length
+              ? metricNames[objectiveId]
+              : `Objective ${objectiveId}`,
           enableSorting: true,
           enableColumnFilter: false,
           sortUndefined: "last",
         })
       )
     )
   }
+  const isDynamicSpace =
+    study.union_search_space.length !== study.intersection_search_space.length
 
-  if (study?.union_search_space != null) {
+  if (study.union_search_space != null) {
     for (const s of study.union_search_space) {
+      const sortable = s.distribution.type !== "CategoricalDistribution"
+      const filterChoices: (string | null)[] | undefined =
+        s.distribution.type === "CategoricalDistribution"
+          ? s.distribution.choices.map((c) => c?.toString() ?? "null")
+          : undefined
+      const hasMissingValue = trials.some(
+        (t) => !t.params.some((p) => p.name === s.name)
+      )
+      if (filterChoices !== undefined && isDynamicSpace && hasMissingValue) {
+        filterChoices.push(null)
+      }
       columns.push(
         columnHelper.accessor(
           (row) => {
@@ -77,17 +99,17 @@ export const TrialTable: FC<{
           {
             id: `params_${s.name}`,
             header: `Param ${s.name}`,
-            enableSorting: true,
+            enableSorting: sortable,
             sortUndefined: "last",
-            enableColumnFilter: false,
+            enableColumnFilter: filterChoices !== undefined,
             filterFn: multiValueFilter,
           }
         )
       )
     }
   }
 
-  if (study?.union_search_space != null) {
+  if (study.union_search_space != null) {
     for (const attr_spec of study.union_user_attrs) {
       columns.push(
         columnHelper.accessor(
@@ -108,6 +130,26 @@ export const TrialTable: FC<{
       )
     }
   }
+  if (linkComponent !== undefined && linkURL !== undefined) {
+    columns.push(
+      columnHelper.accessor((row) => row, {
+        header: "Detail",
+        cell: (info) => (
+          <IconButton
+            component={linkComponent}
+            to={linkURL(info.getValue().study_id, info.getValue().number)}
+            color="inherit"
+            title="Go to the trial's detail page"
+            size="small"
+          >
+            <LinkIcon />
+          </IconButton>
+        ),
+        enableSorting: false,
+        enableColumnFilter: false,
+      })
+    )
+  }
 
   return (
     <DataGrid