From c83794fef089c1f24c1a7bd4e1de86cdc4172906 Mon Sep 17 00:00:00 2001 From: porink0424 Date: Wed, 19 Feb 2025 11:02:43 +0900 Subject: [PATCH 1/4] Add trialListDurationTimeUnitState --- optuna_dashboard/ts/state.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/optuna_dashboard/ts/state.ts b/optuna_dashboard/ts/state.ts index aa6be6371..1dc5ef33b 100644 --- a/optuna_dashboard/ts/state.ts +++ b/optuna_dashboard/ts/state.ts @@ -66,6 +66,11 @@ export const studyDetailLoadingState = atom>({ default: {}, }) +export const trialListDurationTimeUnitState = atom<"ms" | "s" | "min" | "h">({ + key: "trialListDurationTimeUnit", + default: "ms", +}) + export const usePlotBackendRendering = () => { return useLocalStorage("plotBackendRendering", false) } From 394045a4a759e0c20c4bd89d5afe5b555b2312ef Mon Sep 17 00:00:00 2001 From: porink0424 Date: Wed, 19 Feb 2025 11:04:31 +0900 Subject: [PATCH 2/4] Implement select box for duration time unit --- optuna_dashboard/ts/components/TrialList.tsx | 85 ++++++++++++++++---- 1 file changed, 68 insertions(+), 17 deletions(-) diff --git a/optuna_dashboard/ts/components/TrialList.tsx b/optuna_dashboard/ts/components/TrialList.tsx index 2c59c4edb..0bb7daba9 100644 --- a/optuna_dashboard/ts/components/TrialList.tsx +++ b/optuna_dashboard/ts/components/TrialList.tsx @@ -5,9 +5,12 @@ import StopCircleIcon from "@mui/icons-material/StopCircle" import { Box, Button, + FormControl, IconButton, + InputLabel, Menu, MenuItem, + Select, Typography, useTheme, } from "@mui/material" @@ -24,11 +27,11 @@ import React, { FC, ReactNode, useMemo } from "react" import ListItemIcon from "@mui/material/ListItemIcon" import { useVirtualizer } from "@tanstack/react-virtual" import { useNavigate } from "react-router-dom" -import { useRecoilValue } from "recoil" +import { useRecoilState, useRecoilValue } from "recoil" import { FormWidgets, StudyDetail, Trial } from "ts/types/optuna" import { actionCreator } from "../action" import { useConstants } from "../constantsProvider" -import { artifactIsAvailable } from "../state" +import { artifactIsAvailable, trialListDurationTimeUnitState } from "../state" import { useQuery } from "../urlQuery" import { TrialArtifactCards } from "./Artifact/TrialArtifactCards" import { TrialNote } from "./Note" @@ -134,9 +137,25 @@ export const TrialListDetail: FC<{ const artifactEnabled = useRecoilValue(artifactIsAvailable) const startMs = trial.datetime_start?.getTime() const completeMs = trial.datetime_complete?.getTime() + const [durationTimeUnit, setDurationTimeUnit] = useRecoilState(trialListDurationTimeUnitState) + const duration = useMemo( + () => + startMs !== undefined && completeMs !== undefined + ? (completeMs - startMs) / + 10 ** + (durationTimeUnit === "ms" + ? 0 + : durationTimeUnit === "s" + ? 3 + : durationTimeUnit === "min" + ? 6 + : 9) + : null, + [startMs, completeMs, durationTimeUnit] + ) const params = trial.state === "Waiting" ? trial.fixed_params : trial.params - const info: [string, string | null | ReactNode][] = [ + const info: [string | ReactNode, string | null | ReactNode][] = [ ["Value", trial.values?.map((v) => v.toString()).join(", ") || "None"], [ "Intermediate Values", @@ -167,10 +186,38 @@ export const TrialListDetail: FC<{ trial?.datetime_complete ? trial?.datetime_complete.toString() : null, ], [ - "Duration (ms)", - startMs !== undefined && completeMs !== undefined - ? (completeMs - startMs).toString() - : null, + + + Duration + + + + Time Unit + + + + , + duration, ], [ "User Attributes", @@ -184,7 +231,7 @@ export const TrialListDetail: FC<{ ], ] const renderInfo = ( - key: string, + key: string | ReactNode, value: string | null | ReactNode ): ReactNode => ( - - {key} - + {typeof key === "string" ? ( + + {key} + + ) : ( + key + )} Date: Wed, 19 Feb 2025 11:05:12 +0900 Subject: [PATCH 3/4] Apply formatter --- optuna_dashboard/ts/components/TrialList.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/optuna_dashboard/ts/components/TrialList.tsx b/optuna_dashboard/ts/components/TrialList.tsx index 0bb7daba9..b44dd9233 100644 --- a/optuna_dashboard/ts/components/TrialList.tsx +++ b/optuna_dashboard/ts/components/TrialList.tsx @@ -137,7 +137,9 @@ export const TrialListDetail: FC<{ const artifactEnabled = useRecoilValue(artifactIsAvailable) const startMs = trial.datetime_start?.getTime() const completeMs = trial.datetime_complete?.getTime() - const [durationTimeUnit, setDurationTimeUnit] = useRecoilState(trialListDurationTimeUnitState) + const [durationTimeUnit, setDurationTimeUnit] = useRecoilState( + trialListDurationTimeUnitState + ) const duration = useMemo( () => startMs !== undefined && completeMs !== undefined From 40724bd71d97c287238f496ae8b2baaecc8fa1d6 Mon Sep 17 00:00:00 2001 From: porink0424 Date: Wed, 19 Feb 2025 11:12:01 +0900 Subject: [PATCH 4/4] Add attribute in list --- optuna_dashboard/ts/components/TrialList.tsx | 27 ++++++++++++++------ 1 file changed, 19 insertions(+), 8 deletions(-) diff --git a/optuna_dashboard/ts/components/TrialList.tsx b/optuna_dashboard/ts/components/TrialList.tsx index b44dd9233..f364a4641 100644 --- a/optuna_dashboard/ts/components/TrialList.tsx +++ b/optuna_dashboard/ts/components/TrialList.tsx @@ -157,9 +157,14 @@ export const TrialListDetail: FC<{ ) const params = trial.state === "Waiting" ? trial.fixed_params : trial.params - const info: [string | ReactNode, string | null | ReactNode][] = [ - ["Value", trial.values?.map((v) => v.toString()).join(", ") || "None"], + const info: [string, string | ReactNode, string | null | ReactNode][] = [ [ + "value", + "Value", + trial.values?.map((v) => v.toString()).join(", ") || "None", + ], + [ + "intermediate_values", "Intermediate Values", {trial.intermediate_values.map((v) => ( @@ -170,6 +175,7 @@ export const TrialListDetail: FC<{ , ], [ + "parameter", "Parameter", {params.map((p) => ( @@ -180,14 +186,17 @@ export const TrialListDetail: FC<{ , ], [ + "started_at", "Started At", trial?.datetime_start ? trial?.datetime_start.toString() : null, ], [ + "completed_at", "Completed At", trial?.datetime_complete ? trial?.datetime_complete.toString() : null, ], [ + "duration", {trial.user_attrs.map((t) => ( @@ -233,7 +243,8 @@ export const TrialListDetail: FC<{ ], ] const renderInfo = ( - key: string | ReactNode, + key: string, + attribute: string | ReactNode, value: string | null | ReactNode ): ReactNode => ( - {typeof key === "string" ? ( + {typeof attribute === "string" ? ( - {key} + {attribute} ) : ( - key + attribute )} - {info.map(([key, value]) => - value !== null ? renderInfo(key, value) : null + {info.map(([key, attribute, value]) => + value !== null ? renderInfo(key, attribute, value) : null )} {artifactEnabled && }