Refactoring upload artifact api.

[gen740]

Follow-up for #674.

Currently, the logic of study artifact and trial artifact shares a lot of common code. Let's refactor these.

.c.f

optuna-dashboard/optuna_dashboard/ts/components/TrialArtifactCards.tsx

Lines 31 to 135 in dd91693

	export const TrialArtifactCards: FC<{ trial: Trial }> = ({ trial }) => {
	const theme = useTheme()
	const [openDeleteArtifactDialog, renderDeleteArtifactDialog] =
	useDeleteTrialArtifactDialog()
	const [openThreejsArtifactModal, renderThreejsArtifactModal] =
	useThreejsArtifactModal()
	const width = "200px"
	const height = "150px"
	return (
	<>
	<Typography
	variant="h5"
	sx={{ fontWeight: theme.typography.fontWeightBold }}
	>
	Artifacts
	</Typography>
	<Box sx={{ display: "flex", flexWrap: "wrap", p: theme.spacing(1, 0) }}>
	{trial.artifacts.map((artifact) => {
	const urlPath = `/artifacts/${trial.study_id}/${trial.trial_id}/${artifact.artifact_id}`
	return (
	<Card
	key={artifact.artifact_id}
	sx={{
	marginBottom: theme.spacing(2),
	width: width,
	margin: theme.spacing(0, 1, 1, 0),
	}}
	>
	<ArtifactCardMedia
	artifact={artifact}
	urlPath={urlPath}
	height={height}
	/>
	<CardContent
	sx={{
	display: "flex",
	flexDirection: "row",
	padding: `${theme.spacing(1)} !important`,
	}}
	>
	<Typography
	sx={{
	p: theme.spacing(0.5, 0),
	flexGrow: 1,
	wordWrap: "break-word",
	maxWidth: `calc(100% - ${
	isThreejsArtifact(artifact)
	? theme.spacing(12)
	: theme.spacing(8)
	})`,
	}}
	>
	{artifact.filename}
	</Typography>
	{isThreejsArtifact(artifact) ? (
	<IconButton
	aria-label="show artifact 3d model"
	size="small"
	color="inherit"
	sx={{ margin: "auto 0" }}
	onClick={() => {
	openThreejsArtifactModal(urlPath, artifact)
	}}
	>
	<FullscreenIcon />
	</IconButton>
	) : null}
	<IconButton
	aria-label="delete artifact"
	size="small"
	color="inherit"
	sx={{ margin: "auto 0" }}
	onClick={() => {
	openDeleteArtifactDialog(
	trial.study_id,
	trial.trial_id,
	artifact
	)
	}}
	>
	<DeleteIcon />
	</IconButton>
	<IconButton
	aria-label="download artifact"
	size="small"
	color="inherit"
	download={artifact.filename}
	sx={{ margin: "auto 0" }}
	href={urlPath}
	>
	<DownloadIcon />
	</IconButton>
	</CardContent>
	</Card>
	)
	})}
	<TrialArtifactUploader trial={trial} width={width} height={height} />
	</Box>
	{renderDeleteArtifactDialog()}
	{renderThreejsArtifactModal()}
	</>
	)
	}

optuna-dashboard/optuna_dashboard/ts/components/StudyArtifactCards.tsx

Lines 31 to 126 in dd91693

	export const StudyArtifactCards: FC<{ study: StudyDetail }> = ({ study }) => {
	const theme = useTheme()
	const [openDeleteArtifactDialog, renderDeleteArtifactDialog] =
	useDeleteStudyArtifactDialog()
	const [openThreejsArtifactModal, renderThreejsArtifactModal] =
	useThreejsArtifactModal()
	const width = "200px"
	const height = "150px"
	return (
	<>
	<Box sx={{ display: "flex", flexWrap: "wrap", p: theme.spacing(1, 0) }}>
	{study.artifacts.map((artifact) => {
	const urlPath = `/artifacts/${study.id}/${artifact.artifact_id}`
	return (
	<Card
	key={artifact.artifact_id}
	sx={{
	marginBottom: theme.spacing(2),
	width: width,
	margin: theme.spacing(0, 1, 1, 0),
	border: `1px solid ${theme.palette.divider}`,
	}}
	>
	<ArtifactCardMedia
	artifact={artifact}
	urlPath={urlPath}
	height={height}
	/>
	<CardContent
	sx={{
	display: "flex",
	flexDirection: "row",
	padding: `${theme.spacing(1)} !important`,
	}}
	>
	<Typography
	sx={{
	p: theme.spacing(0.5, 0),
	flexGrow: 1,
	wordWrap: "break-word",
	maxWidth: `calc(100% - ${
	isThreejsArtifact(artifact)
	? theme.spacing(12)
	: theme.spacing(8)
	})`,
	}}
	>
	{artifact.filename}
	</Typography>
	{isThreejsArtifact(artifact) ? (
	<IconButton
	aria-label="show artifact 3d model"
	size="small"
	color="inherit"
	sx={{ margin: "auto 0" }}
	onClick={() => {
	openThreejsArtifactModal(urlPath, artifact)
	}}
	>
	<FullscreenIcon />
	</IconButton>
	) : null}
	<IconButton
	aria-label="delete artifact"
	size="small"
	color="inherit"
	sx={{ margin: "auto 0" }}
	onClick={() => {
	openDeleteArtifactDialog(study.id, artifact)
	}}
	>
	<DeleteIcon />
	</IconButton>
	<IconButton
	aria-label="download artifact"
	size="small"
	color="inherit"
	download={artifact.filename}
	sx={{ margin: "auto 0" }}
	href={urlPath}
	>
	<DownloadIcon />
	</IconButton>
	</CardContent>
	</Card>
	)
	})}
	<StudyArtifactUploader study={study} width={width} height={height} />
	</Box>
	{renderDeleteArtifactDialog()}
	{renderThreejsArtifactModal()}
	</>
	)
	}

[github-actions]

This issue has not seen any recent activity.