diff --git a/optuna_dashboard/ts/components/PreferenceHistory.tsx b/optuna_dashboard/ts/components/PreferenceHistory.tsx index bfacfc62..0535dc2e 100644 --- a/optuna_dashboard/ts/components/PreferenceHistory.tsx +++ b/optuna_dashboard/ts/components/PreferenceHistory.tsx @@ -145,16 +145,17 @@ const ChoiceTrials: FC<{ const [enabled, setEnabled] = useState(choice.enabled) const theme = useTheme() const worst_trials = new Set([choice.clicked]) - const actions = actionCreator() + const action = actionCreator() const handleSwitch = () => { setEnabled(!enabled) - actions.switchPreferentialHistory(study_id, choice.id, !enabled) + action.switchPreferentialHistory(study_id, choice.id, !enabled) } return ( - {enabled ? : } + {choice.enabled ? : } {choice.candidates.map((trial_num, index) => ( diff --git a/optuna_dashboard/ts/components/PreferentialTrials.tsx b/optuna_dashboard/ts/components/PreferentialTrials.tsx index 08efd9a7..ab7f04ea 100644 --- a/optuna_dashboard/ts/components/PreferentialTrials.tsx +++ b/optuna_dashboard/ts/components/PreferentialTrials.tsx @@ -14,6 +14,7 @@ import OpenInFullIcon from "@mui/icons-material/OpenInFull" import ReplayIcon from "@mui/icons-material/Replay" import Modal from "@mui/material/Modal" import { red } from "@mui/material/colors" +import UndoIcon from "@mui/icons-material/Undo" import { actionCreator } from "../action" import { TrialListDetail } from "./TrialList" @@ -180,10 +181,13 @@ type DisplayTrials = { export const PreferentialTrials: FC<{ studyDetail: StudyDetail | null }> = ({ studyDetail, }) => { + const [undoHistoryId, setUndoHistoryId] = useState(null) + if (studyDetail === null || !studyDetail.is_preferential) { return null } const theme = useTheme() + const action = actionCreator() const runningTrials = studyDetail.trials.filter((t) => t.state === "Running") const activeTrials = runningTrials.concat(studyDetail.best_trials) @@ -229,18 +233,45 @@ export const PreferentialTrials: FC<{ studyDetail: StudyDetail | null }> = ({ } }) } + const latestHistoryId = studyDetail?.preference_history + ?.filter((h) => h.enabled) + .pop()?.id + if (undoHistoryId !== null && undoHistoryId !== latestHistoryId) { + setUndoHistoryId(null) + } return ( - - Which trial is the worst? - + + + Which trial is the worst? + + { + if (latestHistoryId === undefined) { + return + } + setUndoHistoryId(latestHistoryId) + action.switchPreferentialHistory( + studyDetail.id, + latestHistoryId, + false + ) + }} + sx={{ + margin: "auto 0 auto auto", + }} + > + + + {displayTrials.numbers.map((t, index) => (