diff --git a/optuna_dashboard/ts/components/TrialList.tsx b/optuna_dashboard/ts/components/TrialList.tsx
index 4aceb619..bb70c119 100644
--- a/optuna_dashboard/ts/components/TrialList.tsx
+++ b/optuna_dashboard/ts/components/TrialList.tsx
@@ -22,6 +22,7 @@ import {
CardActionArea,
Modal,
} from "@mui/material"
+import { SxProps } from "@mui/system"
import Chip from "@mui/material/Chip"
import Divider from "@mui/material/Divider"
import List from "@mui/material/List"
@@ -319,20 +320,230 @@ export const TrialListDetail: FC<{
value !== null ? renderInfo(key, value) : null
)}
- {artifactEnabled && }
+ {artifactEnabled && }
)
}
-const TrialArtifact: FC<{ trial: Trial }> = ({ trial }) => {
- const theme = useTheme()
- const action = actionCreator()
+export const TrialArtifactContent: FC<{
+ trial: Trial
+ artifact: Artifact
+ width: string
+ height: string
+}> = ({ trial, artifact, width, height }) => {
+ if (artifact.mimetype.startsWith("image")) {
+ return (
+
+ )
+ } else if (
+ artifact.filename.endsWith(".stl") ||
+ artifact.filename.endsWith(".3dm")
+ ) {
+ return (
+
+
+
+ )
+ } else if (artifact.mimetype.startsWith("audio")) {
+ return (
+
+
+
+ )
+ } else {
+ return (
+
+
+
+ )
+ }
+}
+
+export const TrialArtifactActions: FC<{
+ trial: Trial
+ artifact: Artifact
+ sx: SxProps
+}> = ({ trial, artifact, sx }) => {
+ const [open3dModelViewer, setOpen3dModelViewer] = useState(false)
+
+ if (artifact.mimetype.startsWith("image")) {
+ return null
+ } else if (
+ artifact.filename.endsWith(".stl") ||
+ artifact.filename.endsWith(".3dm")
+ ) {
+ return (
+ <>
+ {
+ setOpen3dModelViewer(true)
+ }}
+ >
+
+
+ {
+ setOpen3dModelViewer(false)
+ }}
+ >
+
+
+
+
+
+ )
+ }
+ return null
+}
+
+const TrialArtifact: FC<{
+ trial: Trial
+ artifact: Artifact
+ width: string
+ height: string
+}> = ({ trial, artifact, width, height }) => {
const [openDeleteArtifactDialog, renderDeleteArtifactDialog] =
useDeleteArtifactDialog()
+ const theme = useTheme()
+ const is3dModel =
+ artifact.filename.endsWith(".stl") || artifact.filename.endsWith(".3dm")
+ const canDelete = trial.state === "Running" || trial.state === "Waiting"
+ let actionsCount = 1
+ if (canDelete) actionsCount += 1
+ if (is3dModel) actionsCount += 1
+ const actionsWidth = theme.spacing(actionsCount * 4)
+
+ return (
+
+
+
+
+ {artifact.filename}
+
+ {is3dModel ? (
+
+ ) : null}
+ {canDelete ? (
+ {
+ openDeleteArtifactDialog(trial.study_id, trial.trial_id, artifact)
+ }}
+ >
+
+
+ ) : null}
+
+
+
+
+ {renderDeleteArtifactDialog()}
+
+ )
+}
+
+const TrialArtifacts: FC<{ trial: Trial }> = ({ trial }) => {
+ const theme = useTheme()
+ const action = actionCreator()
const [dragOver, setDragOver] = useState(false)
- const [open3dModelViewer, setOpen3dModelViewer] = useState<{
- [key: string]: boolean
- }>({})
const width = "200px"
const height = "150px"
@@ -382,334 +593,15 @@ const TrialArtifact: FC<{ trial: Trial }> = ({ trial }) => {
Artifacts
- {trial.artifacts.map((a) => {
- if (a.mimetype.startsWith("image")) {
- return (
-
-
-
-
- {a.filename}
-
- {
- openDeleteArtifactDialog(
- trial.study_id,
- trial.trial_id,
- a
- )
- }}
- >
-
-
-
-
-
-
-
- )
- } else if (
- a.filename.endsWith(".stl") ||
- a.filename.endsWith(".3dm")
- ) {
- return (
-
-
-
-
-
-
- {a.filename}
-
- {
- setOpen3dModelViewer(() => {
- const obj = { ...open3dModelViewer }
- obj[a.artifact_id] = true
- return obj
- })
- }}
- >
-
-
- {
- setOpen3dModelViewer(() => {
- const obj = { ...open3dModelViewer }
- obj[a.artifact_id] = false
- return obj
- })
- }}
- >
-
-
-
-
- {
- openDeleteArtifactDialog(
- trial.study_id,
- trial.trial_id,
- a
- )
- }}
- >
-
-
-
-
-
-
-
- )
- } else if (a.mimetype.startsWith("audio")) {
- return (
-
-
-
-
-
-
- {a.filename}
-
- {
- openDeleteArtifactDialog(
- trial.study_id,
- trial.trial_id,
- a
- )
- }}
- >
-
-
-
-
-
-
-
- )
- } else {
- return (
-
-
-
-
-
-
- {a.filename}
-
- {
- openDeleteArtifactDialog(
- trial.study_id,
- trial.trial_id,
- a
- )
- }}
- >
-
-
-
-
-
-
-
- )
- }
- })}
+ {trial.artifacts.map((a) => (
+
+ ))}
{trial.state === "Running" || trial.state === "Waiting" ? (
= ({ trial }) => {
) : null}
- {renderDeleteArtifactDialog()}
)
}