diff --git a/optuna_dashboard/ts/components/ObjectiveForm.tsx b/optuna_dashboard/ts/components/ObjectiveForm.tsx index 1d6d0b6f..ae8b2ae8 100644 --- a/optuna_dashboard/ts/components/ObjectiveForm.tsx +++ b/optuna_dashboard/ts/components/ObjectiveForm.tsx @@ -275,3 +275,133 @@ export const ObjectiveForm: FC<{ ) } + +export const ReadonlyObjectiveForm: FC<{ + trial: Trial + directions: StudyDirection[] + names: string[] + widgets: ObjectiveFormWidget[] +}> = ({ trial, directions, names, widgets }) => { + const theme = useTheme() + const getObjectiveName = (i: number): string => { + const n = names.at(i) + if (n !== undefined) { + return n + } + if (directions.length == 1) { + return `Objective` + } else { + return `Objective ${i}` + } + } + return ( + <> + + {directions.length > 1 ? "Set Objective Values" : "Set Objective Value"} + + + + {directions.map((d, i) => { + const widget = widgets.at(i) + const key = `objective-${i}` + if (widget === undefined) { + return ( + + {getObjectiveName(i)} + + + ) + } else if (widget.type === "text") { + return ( + + + {getObjectiveName(i)} - {widget.description} + + + + ) + } else if (widget.type === "choice") { + return ( + + + {getObjectiveName(i)} - {widget.description} + + + {widget.choices.map((c, j) => ( + + } + label={c} + disabled + /> + ))} + + + ) + } else if (widget.type === "slider") { + const value = trial.values?.at(i) + return ( + + + {getObjectiveName(i)} - {widget.description} + + + + + + ) + } else if (widget.type === "user_attr") { + return ( + + {getObjectiveName(i)} + + + ) + } + return null + })} + + + + ) +} diff --git a/optuna_dashboard/ts/components/TrialList.tsx b/optuna_dashboard/ts/components/TrialList.tsx index 070fe2df..f79f2935 100644 --- a/optuna_dashboard/ts/components/TrialList.tsx +++ b/optuna_dashboard/ts/components/TrialList.tsx @@ -42,7 +42,7 @@ import { useRecoilValue } from "recoil" import { artifactIsAvailable } from "../state" import { actionCreator } from "../action" import { useDeleteArtifactDialog } from "./DeleteArtifactDialog" -import { ObjectiveForm } from "./ObjectiveForm" +import { ObjectiveForm, ReadonlyObjectiveForm } from "./ObjectiveForm" const states: TrialState[] = [ "Complete", @@ -302,6 +302,14 @@ const TrialListDetail: FC<{ widgets={objectiveFormWidgets} /> )} + {trial.state === "Complete" && directions.length > 0 && ( + + )} {artifactEnabled && } )