mirror of
https://github.com/wassname/optuna-dashboard.git
synced 2026-09-17 12:30:35 +08:00
Merge pull request #190 from optuna/refactor-graph
Refactor graph layouts
This commit is contained in:
Masashi Shibata
@@ -32,39 +32,31 @@ export const Edf: FC<{
|
||||
}, [study, objectiveId, theme.palette.mode])
|
||||
return (
|
||||
<Grid container direction="row">
|
||||
<Grid item xs={3}>
|
||||
<Grid container direction="column">
|
||||
<Typography variant="h6" sx={{ margin: "1em 0", fontWeight: 600 }}>
|
||||
EDF
|
||||
</Typography>
|
||||
{study !== null && study.directions.length !== 1 ? (
|
||||
<FormControl
|
||||
component="fieldset"
|
||||
sx={{
|
||||
marginBottom: theme.spacing(2),
|
||||
marginRight: theme.spacing(5),
|
||||
}}
|
||||
>
|
||||
<FormLabel component="legend">Objective ID:</FormLabel>
|
||||
<Select value={objectiveId} onChange={handleObjectiveChange}>
|
||||
{study.directions.map((d, i) => (
|
||||
<MenuItem value={i} key={i}>
|
||||
{i}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
) : null}
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={3}
|
||||
container
|
||||
direction="column"
|
||||
sx={{ paddingRight: theme.spacing(2) }}
|
||||
>
|
||||
<Typography variant="h6" sx={{ margin: "1em 0", fontWeight: 600 }}>
|
||||
EDF
|
||||
</Typography>
|
||||
{study !== null && study.directions.length !== 1 ? (
|
||||
<FormControl component="fieldset">
|
||||
<FormLabel component="legend">Objective ID:</FormLabel>
|
||||
<Select value={objectiveId} onChange={handleObjectiveChange}>
|
||||
{study.directions.map((d, i) => (
|
||||
<MenuItem value={i} key={i}>
|
||||
{i}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
) : null}
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={9}>
|
||||
<Box
|
||||
id={plotDomId}
|
||||
sx={{
|
||||
height: "450px",
|
||||
}}
|
||||
/>
|
||||
<Box id={plotDomId} sx={{ height: "450px" }} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
)
|
||||
|
||||
@@ -76,90 +76,94 @@ export const GraphHistory: FC<{
|
||||
|
||||
return (
|
||||
<Grid container direction="row">
|
||||
<Grid item xs={3}>
|
||||
<Grid container direction="column">
|
||||
<Typography variant="h6" sx={{ margin: "1em 0", fontWeight: 600 }}>
|
||||
History
|
||||
</Typography>
|
||||
{study !== null && study.directions.length !== 1 ? (
|
||||
<FormControl
|
||||
component="fieldset"
|
||||
sx={{ marginBottom: theme.spacing(2) }}
|
||||
>
|
||||
<FormLabel component="legend">Objective ID:</FormLabel>
|
||||
<Select value={objectiveId} onChange={handleObjectiveChange}>
|
||||
{study.directions.map((d, i) => (
|
||||
<MenuItem value={i} key={i}>
|
||||
{i}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
) : null}
|
||||
<Grid
|
||||
item
|
||||
xs={3}
|
||||
container
|
||||
direction="column"
|
||||
sx={{ paddingRight: theme.spacing(2) }}
|
||||
>
|
||||
<Typography variant="h6" sx={{ margin: "1em 0", fontWeight: 600 }}>
|
||||
History
|
||||
</Typography>
|
||||
{study !== null && study.directions.length !== 1 ? (
|
||||
<FormControl
|
||||
component="fieldset"
|
||||
sx={{ marginBottom: theme.spacing(2) }}
|
||||
>
|
||||
<FormLabel component="legend">Log y scale:</FormLabel>
|
||||
<Switch
|
||||
checked={logScale}
|
||||
onChange={handleLogScaleChange}
|
||||
value="enable"
|
||||
/>
|
||||
<FormLabel component="legend">Objective ID:</FormLabel>
|
||||
<Select value={objectiveId} onChange={handleObjectiveChange}>
|
||||
{study.directions.map((d, i) => (
|
||||
<MenuItem value={i} key={i}>
|
||||
{i}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormControl
|
||||
component="fieldset"
|
||||
sx={{ marginBottom: theme.spacing(2) }}
|
||||
) : null}
|
||||
<FormControl
|
||||
component="fieldset"
|
||||
sx={{ marginBottom: theme.spacing(2) }}
|
||||
>
|
||||
<FormLabel component="legend">Log y scale:</FormLabel>
|
||||
<Switch
|
||||
checked={logScale}
|
||||
onChange={handleLogScaleChange}
|
||||
value="enable"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl
|
||||
component="fieldset"
|
||||
sx={{ marginBottom: theme.spacing(2) }}
|
||||
>
|
||||
<FormLabel component="legend">Filter state:</FormLabel>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={!filterCompleteTrial}
|
||||
onChange={handleFilterCompleteChange}
|
||||
/>
|
||||
}
|
||||
label="Complete"
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={!filterPrunedTrial}
|
||||
onChange={handleFilterPrunedChange}
|
||||
/>
|
||||
}
|
||||
label="Pruned"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl
|
||||
component="fieldset"
|
||||
sx={{ marginBottom: theme.spacing(2) }}
|
||||
>
|
||||
<FormLabel component="legend">X-axis:</FormLabel>
|
||||
<RadioGroup
|
||||
aria-label="gender"
|
||||
name="gender1"
|
||||
value={xAxis}
|
||||
onChange={handleXAxisChange}
|
||||
>
|
||||
<FormLabel component="legend">Filter state:</FormLabel>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={!filterCompleteTrial}
|
||||
onChange={handleFilterCompleteChange}
|
||||
/>
|
||||
}
|
||||
label="Complete"
|
||||
value="number"
|
||||
control={<Radio />}
|
||||
label="Number"
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={!filterPrunedTrial}
|
||||
onChange={handleFilterPrunedChange}
|
||||
/>
|
||||
}
|
||||
label="Pruned"
|
||||
value="datetime_start"
|
||||
control={<Radio />}
|
||||
label="Datetime start"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl
|
||||
component="fieldset"
|
||||
sx={{ marginBottom: theme.spacing(2) }}
|
||||
>
|
||||
<FormLabel component="legend">X-axis:</FormLabel>
|
||||
<RadioGroup
|
||||
aria-label="gender"
|
||||
name="gender1"
|
||||
value={xAxis}
|
||||
onChange={handleXAxisChange}
|
||||
>
|
||||
<FormControlLabel
|
||||
value="number"
|
||||
control={<Radio />}
|
||||
label="Number"
|
||||
/>
|
||||
<FormControlLabel
|
||||
value="datetime_start"
|
||||
control={<Radio />}
|
||||
label="Datetime start"
|
||||
/>
|
||||
<FormControlLabel
|
||||
value="datetime_complete"
|
||||
control={<Radio />}
|
||||
label="Datetime complete"
|
||||
/>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<FormControlLabel
|
||||
value="datetime_complete"
|
||||
control={<Radio />}
|
||||
label="Datetime complete"
|
||||
/>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item xs={9}>
|
||||
<div id={plotDomId} />
|
||||
|
||||
@@ -82,39 +82,31 @@ export const GraphHyperparameterImportances: FC<{
|
||||
|
||||
return (
|
||||
<Grid container direction="row">
|
||||
<Grid item xs={3}>
|
||||
<Grid container direction="column">
|
||||
<Typography variant="h6" sx={{ margin: "1em 0", fontWeight: 600 }}>
|
||||
Hyperparameter importance
|
||||
</Typography>
|
||||
{study !== null && study.directions.length !== 1 ? (
|
||||
<FormControl
|
||||
component="fieldset"
|
||||
sx={{
|
||||
marginBottom: theme.spacing(2),
|
||||
marginRight: theme.spacing(5),
|
||||
}}
|
||||
>
|
||||
<FormLabel component="legend">Objective ID:</FormLabel>
|
||||
<Select value={objectiveId} onChange={handleObjectiveChange}>
|
||||
{study.directions.map((d, i) => (
|
||||
<MenuItem value={i} key={i}>
|
||||
{i}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
) : null}
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={3}
|
||||
container
|
||||
direction="column"
|
||||
sx={{ paddingRight: theme.spacing(2) }}
|
||||
>
|
||||
<Typography variant="h6" sx={{ margin: "1em 0", fontWeight: 600 }}>
|
||||
Hyperparameter importance
|
||||
</Typography>
|
||||
{study !== null && study.directions.length !== 1 ? (
|
||||
<FormControl component="fieldset">
|
||||
<FormLabel component="legend">Objective ID:</FormLabel>
|
||||
<Select value={objectiveId} onChange={handleObjectiveChange}>
|
||||
{study.directions.map((d, i) => (
|
||||
<MenuItem value={i} key={i}>
|
||||
{i}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
) : null}
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={9}>
|
||||
<Box
|
||||
id={plotDomId}
|
||||
sx={{
|
||||
height: "450px",
|
||||
}}
|
||||
/>
|
||||
<Box id={plotDomId} sx={{ height: "450px" }} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
)
|
||||
|
||||
@@ -14,21 +14,19 @@ export const GraphIntermediateValues: FC<{
|
||||
}, [trials, theme.palette.mode])
|
||||
return (
|
||||
<Grid container direction="row">
|
||||
<Grid item xs={3}>
|
||||
<Grid container direction="column">
|
||||
<Typography variant="h6" sx={{ margin: "1em 0", fontWeight: 600 }}>
|
||||
Intermediate values
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={3}
|
||||
container
|
||||
direction="column"
|
||||
sx={{ paddingRight: theme.spacing(2) }}
|
||||
>
|
||||
<Typography variant="h6" sx={{ margin: "1em 0", fontWeight: 600 }}>
|
||||
Intermediate values
|
||||
</Typography>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={9}>
|
||||
<Box
|
||||
id={plotDomId}
|
||||
sx={{
|
||||
height: "450px",
|
||||
}}
|
||||
/>
|
||||
<Box id={plotDomId} sx={{ height: "450px" }} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
)
|
||||
|
||||
@@ -33,39 +33,31 @@ export const GraphParallelCoordinate: FC<{
|
||||
|
||||
return (
|
||||
<Grid container direction="row">
|
||||
<Grid item xs={3}>
|
||||
<Grid container direction="column">
|
||||
<Typography variant="h6" sx={{ margin: "1em 0", fontWeight: 600 }}>
|
||||
Parallel Coordinate
|
||||
</Typography>
|
||||
{study !== null && study.directions.length !== 1 ? (
|
||||
<FormControl
|
||||
component="fieldset"
|
||||
sx={{
|
||||
marginBottom: theme.spacing(2),
|
||||
marginRight: theme.spacing(5),
|
||||
}}
|
||||
>
|
||||
<FormLabel component="legend">Objective ID:</FormLabel>
|
||||
<Select value={objectiveId} onChange={handleObjectiveChange}>
|
||||
{study.directions.map((d, i) => (
|
||||
<MenuItem value={i} key={i}>
|
||||
{i}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
) : null}
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={3}
|
||||
container
|
||||
direction="column"
|
||||
sx={{ paddingRight: theme.spacing(2) }}
|
||||
>
|
||||
<Typography variant="h6" sx={{ margin: "1em 0", fontWeight: 600 }}>
|
||||
Parallel Coordinate
|
||||
</Typography>
|
||||
{study !== null && study.directions.length !== 1 ? (
|
||||
<FormControl component="fieldset">
|
||||
<FormLabel component="legend">Objective ID:</FormLabel>
|
||||
<Select value={objectiveId} onChange={handleObjectiveChange}>
|
||||
{study.directions.map((d, i) => (
|
||||
<MenuItem value={i} key={i}>
|
||||
{i}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
) : null}
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={9}>
|
||||
<Box
|
||||
id={plotDomId}
|
||||
sx={{
|
||||
height: "450px",
|
||||
}}
|
||||
/>
|
||||
<Box id={plotDomId} sx={{ height: "450px" }} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
)
|
||||
|
||||
@@ -38,19 +38,19 @@ export const GraphParetoFront: FC<{
|
||||
|
||||
return (
|
||||
<Grid container direction="row">
|
||||
<Grid item xs={3} container direction="column">
|
||||
<Grid
|
||||
item
|
||||
xs={3}
|
||||
container
|
||||
direction="column"
|
||||
sx={{ paddingRight: theme.spacing(2) }}
|
||||
>
|
||||
<Typography variant="h6" sx={{ margin: "1em 0", fontWeight: 600 }}>
|
||||
Pareto Front
|
||||
</Typography>
|
||||
{study !== null && study.directions.length !== 1 ? (
|
||||
<>
|
||||
<FormControl
|
||||
component="fieldset"
|
||||
sx={{
|
||||
marginBottom: theme.spacing(2),
|
||||
marginRight: theme.spacing(5),
|
||||
}}
|
||||
>
|
||||
<FormControl component="fieldset">
|
||||
<FormLabel component="legend">Objective X ID:</FormLabel>
|
||||
<Select value={objectiveXId} onChange={handleObjectiveXChange}>
|
||||
{study.directions.map((d, i) => (
|
||||
@@ -60,13 +60,7 @@ export const GraphParetoFront: FC<{
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormControl
|
||||
component="fieldset"
|
||||
sx={{
|
||||
marginBottom: theme.spacing(2),
|
||||
marginRight: theme.spacing(5),
|
||||
}}
|
||||
>
|
||||
<FormControl component="fieldset">
|
||||
<FormLabel component="legend">Objective Y ID:</FormLabel>
|
||||
<Select value={objectiveYId} onChange={handleObjectiveYChange}>
|
||||
{study.directions.map((d, i) => (
|
||||
|
||||
@@ -68,68 +68,49 @@ export const GraphSlice: FC<{
|
||||
|
||||
return (
|
||||
<Grid container direction="row">
|
||||
<Grid item xs={3}>
|
||||
<Grid container direction="column">
|
||||
<Typography variant="h6" sx={{ margin: "1em 0", fontWeight: 600 }}>
|
||||
Slice
|
||||
</Typography>
|
||||
{study !== null && study.directions.length !== 1 ? (
|
||||
<FormControl
|
||||
component="fieldset"
|
||||
sx={{
|
||||
marginBottom: theme.spacing(2),
|
||||
marginRight: theme.spacing(5),
|
||||
}}
|
||||
>
|
||||
<FormLabel component="legend">Objective ID:</FormLabel>
|
||||
<Select value={objectiveId} onChange={handleObjectiveChange}>
|
||||
{study.directions.map((d, i) => (
|
||||
<MenuItem value={i} key={i}>
|
||||
{i}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
) : null}
|
||||
<FormControl
|
||||
component="fieldset"
|
||||
sx={{
|
||||
marginBottom: theme.spacing(2),
|
||||
marginRight: theme.spacing(5),
|
||||
}}
|
||||
>
|
||||
<InputLabel id="parameter">Parameter</InputLabel>
|
||||
<Select value={selected || ""} onChange={handleSelectedParam}>
|
||||
{paramNames?.map((p, i) => (
|
||||
<MenuItem value={p} key={i}>
|
||||
{p}
|
||||
<Grid
|
||||
item
|
||||
xs={3}
|
||||
container
|
||||
direction="column"
|
||||
sx={{ paddingRight: theme.spacing(2) }}
|
||||
>
|
||||
<Typography variant="h6" sx={{ margin: "1em 0", fontWeight: 600 }}>
|
||||
Slice
|
||||
</Typography>
|
||||
{study !== null && study.directions.length !== 1 ? (
|
||||
<FormControl component="fieldset">
|
||||
<FormLabel component="legend">Objective ID:</FormLabel>
|
||||
<Select value={objectiveId} onChange={handleObjectiveChange}>
|
||||
{study.directions.map((d, i) => (
|
||||
<MenuItem value={i} key={i}>
|
||||
{i}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormControl
|
||||
component="fieldset"
|
||||
sx={{
|
||||
marginBottom: theme.spacing(2),
|
||||
marginRight: theme.spacing(5),
|
||||
}}
|
||||
>
|
||||
<FormLabel component="legend">Log y scale:</FormLabel>
|
||||
<Switch
|
||||
checked={logYScale}
|
||||
onChange={handleLogYScaleChange}
|
||||
value="enable"
|
||||
/>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
) : null}
|
||||
<FormControl component="fieldset">
|
||||
<InputLabel id="parameter">Parameter</InputLabel>
|
||||
<Select value={selected || ""} onChange={handleSelectedParam}>
|
||||
{paramNames?.map((p, i) => (
|
||||
<MenuItem value={p} key={i}>
|
||||
{p}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormControl component="fieldset">
|
||||
<FormLabel component="legend">Log y scale:</FormLabel>
|
||||
<Switch
|
||||
checked={logYScale}
|
||||
onChange={handleLogYScaleChange}
|
||||
value="enable"
|
||||
/>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item xs={9}>
|
||||
<Box
|
||||
id={plotDomId}
|
||||
sx={{
|
||||
height: "450px",
|
||||
}}
|
||||
/>
|
||||
<Box id={plotDomId} sx={{ height: "450px" }} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user