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/trialSelection"}
+                    element={
+                      <StudyDetail
+                        toggleColorMode={toggleColorMode}
+                        page={"trialSelection"}
+                      />
+                    }
+                  />
                   <Route
                     path={url_prefix + "/studies/:studyId/note"}
                     element={

optuna_dashboard/ts/components/AppDrawer.tsx

@@ -4,6 +4,7 @@ import Brightness7Icon from "@mui/icons-material/Brightness7"
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft"
 import ChevronRightIcon from "@mui/icons-material/ChevronRight"
 import RateReviewIcon from "@mui/icons-material/RateReview"
+import RuleIcon from "@mui/icons-material/Rule"
 import SettingsIcon from "@mui/icons-material/Settings"
 import SyncIcon from "@mui/icons-material/Sync"
 import SyncDisabledIcon from "@mui/icons-material/SyncDisabled"
@@ -34,6 +35,7 @@ import { useRecoilState, useRecoilValue } from "recoil"
 import {
   drawerOpenState,
   reloadIntervalState,
+  useShowExperimentalFeature,
   useStudyIsPreferential,
 } from "../state"
 import { Settings } from "./Settings"
@@ -56,6 +58,7 @@ export type PageId =
   | "analytics"
   | "trialTable"
   | "trialList"
+  | "trialSelection"
   | "note"
   | "preferenceHistory"
   | "graph"
@@ -145,6 +148,7 @@ export const AppDrawer: FC<{
   const reloadInterval = useRecoilValue<number>(reloadIntervalState)
   const isPreferential =
     studyId !== undefined ? useStudyIsPreferential(studyId) : null
+  const [showExperimentalFeatures] = useShowExperimentalFeature()
 
   const styleListItem = {
     display: "block",
@@ -345,6 +349,29 @@ export const AppDrawer: FC<{
                 <ListItemText primary="Trials (Table)" sx={styleListItemText} />
               </ListItemButton>
             </ListItem>
+            {showExperimentalFeatures === true ? (
+              <ListItem
+                key="TrialSelection"
+                disablePadding
+                sx={styleListItem}
+                title="Trials (Selection)"
+              >
+                <ListItemButton
+                  component={Link}
+                  to={`${url_prefix}/studies/${studyId}/trialSelection`}
+                  sx={styleListItemButton}
+                  selected={page === "trialSelection"}
+                >
+                  <ListItemIcon sx={styleListItemIcon}>
+                    <RuleIcon />
+                  </ListItemIcon>
+                  <ListItemText
+                    primary="Trials (Selection)"
+                    sx={styleListItemText}
+                  />
+                </ListItemButton>
+              </ListItem>
+            ) : null}
             <ListItem key="Note" disablePadding sx={styleListItem} title="Note">
               <ListItemButton
                 component={Link}