Add Trial Selection page

optuna_dashboard/_app.py

@@ -512,14 +512,31 @@ def save_trial_note(study_id: int, trial_id: int) -> dict[str, Any]:
 
     @app.get("/csv/<study_id:int>")
     def download_csv(study_id: int) -> BottleViewReturn:
+        trial_ids_str = request.query.get("trial_ids", "")
+        trial_ids: Optional[list[int]] = None
+        if trial_ids_str:
+            try:
+                trial_ids = [int(tid.strip()) for tid in trial_ids_str.split(",")]
+            except ValueError:
+                response.status = 400  # Bad Request
+                return {"reason": "Invalid trial_ids format. Expected comma-separated integers"}
+
         # Create a CSV file
         try:
             study_name = storage.get_study_name_from_id(study_id)
             study = optuna.load_study(storage=storage, study_name=study_name)
         except KeyError:
             response.status = 404  # Not found
             return {"reason": f"study_id={study_id} is not found"}
-        trials = study.trials
+
+        if trial_ids is not None:
+            trials = [t for t in study.trials if t.number in trial_ids]
+            if not trials:
+                response.status = 404
+                return {"reason": "all specified trial_ids is not found"}
+        else:
+            trials = study.trials
+
         param_names = sorted(set(chain.from_iterable([t.params.keys() for t in trials])))
         user_attr_names = sorted(set(chain.from_iterable([t.user_attrs.keys() for t in trials])))
         param_names_header = [f"Param {x}" for x in param_names]

optuna_dashboard/ts/components/App.tsx

@@ -95,6 +95,15 @@ export const App: FC = () => {
                       />
                     }
                   />
+                  <Route
+                    path={url_prefix + "/studies/:studyId/trialCompare"}
+                    element={
+                      <StudyDetail
+                        toggleColorMode={toggleColorMode}
+                        page={"trialCompare"}
+                      />
+                    }
+                  />
                   <Route
                     path={url_prefix + "/studies/:studyId/note"}
                     element={

optuna_dashboard/ts/components/AppDrawer.tsx

@@ -3,6 +3,7 @@ import Brightness4Icon from "@mui/icons-material/Brightness4"
 import Brightness7Icon from "@mui/icons-material/Brightness7"
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft"
 import ChevronRightIcon from "@mui/icons-material/ChevronRight"
+import CompareIcon from "@mui/icons-material/Compare"
 import RateReviewIcon from "@mui/icons-material/RateReview"
 import SettingsIcon from "@mui/icons-material/Settings"
 import SyncIcon from "@mui/icons-material/Sync"
@@ -56,6 +57,7 @@ export type PageId =
   | "analytics"
   | "trialTable"
   | "trialList"
+  | "trialCompare"
   | "note"
   | "preferenceHistory"
   | "graph"
@@ -345,6 +347,27 @@ export const AppDrawer: FC<{
                 <ListItemText primary="Trials (Table)" sx={styleListItemText} />
               </ListItemButton>
             </ListItem>
+            <ListItem
+              key="TrialCompare"
+              disablePadding
+              sx={styleListItem}
+              title="Trials (Compare)"
+            >
+              <ListItemButton
+                component={Link}
+                to={`${url_prefix}/studies/${studyId}/trialCompare`}
+                sx={styleListItemButton}
+                selected={page === "trialTable"}
+              >
+                <ListItemIcon sx={styleListItemIcon}>
+                  <CompareIcon />
+                </ListItemIcon>
+                <ListItemText
+                  primary="Trials (Compare)"
+                  sx={styleListItemText}
+                />
+              </ListItemButton>
+            </ListItem>
             <ListItem key="Note" disablePadding sx={styleListItem} title="Note">
               <ListItemButton
                 component={Link}

optuna_dashboard/ts/components/GraphTCHistory.tsx

@@ -0,0 +1,34 @@
+import { useTheme } from "@mui/material"
+import { PlotTCHistory } from "@optuna/react"
+import React, { FC } from "react"
+import { useNavigate } from "react-router-dom"
+import { StudyDetail } from "ts/types/optuna"
+import { useConstants } from "../constantsProvider"
+import { usePlotlyColorTheme } from "../state"
+
+export const GraphTCHistory: FC<{
+  studies: StudyDetail[]
+  logScale: boolean
+  includePruned: boolean
+  selectedTrials: number[]
+}> = ({ studies, logScale, includePruned, selectedTrials }) => {
+  const { url_prefix } = useConstants()
+  const theme = useTheme()
+  const colorTheme = usePlotlyColorTheme(theme.palette.mode)
+  const linkURL = (studyId: number, trialNumber: number) => {
+    return url_prefix + `/studies/${studyId}/trials?numbers=${trialNumber}`
+  }
+  const navigate = useNavigate()
+
+  return (
+    <PlotTCHistory
+      studies={studies}
+      logScale={logScale}
+      includePruned={includePruned}
+      colorTheme={colorTheme}
+      linkURL={linkURL}
+      router={navigate}
+      selectedTrials={selectedTrials}
+    />
+  )
+}