wassname/optuna-dashboard
1
0
Fork 0
mirror of https://github.com/wassname/optuna-dashboard.git synced 2026-09-23 13:30:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add some design improvements

Browse Source
This commit is contained in:
c-bata
2022-03-22 14:21:41 +09:00
parent 1f7799fb47
commit 5abd99fa45
7 changed files with 24 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
optuna_dashboard/ts/components/GraphEdf.tsx
-5
View File
@@ -63,11 +63,6 @@ export const Edf: FC<{
id={plotDomId}
sx={{
height: "450px",
backgroundColor:
theme.palette.mode === "dark"
? "rgba(256, 256, 256, 0.05)"
: "rgba(0, 0, 0, 0.05)",
borderRadius: "5px",
}}
/>
</Grid>
optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx
-5
View File
@@ -113,11 +113,6 @@ export const GraphHyperparameterImportances: FC<{
id={plotDomId}
sx={{
height: "450px",
backgroundColor:
theme.palette.mode === "dark"
? "rgba(256, 256, 256, 0.05)"
: "rgba(0, 0, 0, 0.05)",
borderRadius: "5px",
}}
/>
</Grid>
optuna_dashboard/ts/components/GraphIntermediateValues.tsx
-5
View File
@@ -27,11 +27,6 @@ export const GraphIntermediateValues: FC<{
id={plotDomId}
sx={{
height: "450px",
backgroundColor:
theme.palette.mode === "dark"
? "rgba(256, 256, 256, 0.05)"
: "rgba(0, 0, 0, 0.05)",
borderRadius: "5px",
}}
/>
</Grid>
optuna_dashboard/ts/components/GraphParallelCoordinate.tsx
-5
View File
@@ -64,11 +64,6 @@ export const GraphParallelCoordinate: FC<{
id={plotDomId}
sx={{
height: "450px",
backgroundColor:
theme.palette.mode === "dark"
? "rgba(256, 256, 256, 0.05)"
: "rgba(0, 0, 0, 0.05)",
borderRadius: "5px",
}}
/>
</Grid>
optuna_dashboard/ts/components/GraphParetoFront.tsx
+9 -14
View File
@@ -38,12 +38,12 @@ export const GraphParetoFront: FC<{
return (
<Grid container direction="row">
{study !== null && study.directions.length !== 1 ? (
<Grid item xs={3}>
<Grid container direction="column">
<Typography variant="h6" sx={{ margin: "1em 0", fontWeight: 600 }}>
Pareto Front
</Typography>
<Grid item xs={3} container direction="column">
<Typography variant="h6" sx={{ margin: "1em 0", fontWeight: 600 }}>
Pareto Front
</Typography>
{study !== null && study.directions.length !== 1 ? (
<>
<FormControl
component="fieldset"
sx={{
@@ -76,19 +76,14 @@ export const GraphParetoFront: FC<{
))}
</Select>
</FormControl>
</Grid>
</Grid>
) : null}
</>
) : null}
</Grid>
<Grid item xs={9}>
<Box
id={plotDomId}
sx={{
height: "450px",
backgroundColor:
theme.palette.mode === "dark"
? "rgba(256, 256, 256, 0.05)"
: "rgba(0, 0, 0, 0.05)",
borderRadius: "5px",
}}
/>
</Grid>
optuna_dashboard/ts/components/GraphSlice.tsx
-5
View File
@@ -128,11 +128,6 @@ export const GraphSlice: FC<{
id={plotDomId}
sx={{
height: "450px",
backgroundColor:
theme.palette.mode === "dark"
? "rgba(256, 256, 256, 0.05)"
: "rgba(0, 0, 0, 0.05)",
borderRadius: "5px",
}}
/>
</Grid>
optuna_dashboard/ts/components/StudyDetail.tsx
+15 -14
View File
@@ -39,21 +39,22 @@ import { GraphHistory } from "./GraphHistory"
import { GraphParetoFront } from "./GraphParetoFront"
import { Note } from "./Note"
import { actionCreator } from "../action"
import { studyDetailsState } from "../state"
import { studyDetailsState, studySummariesState } from "../state"
interface ParamTypes {
studyId: string
}
const isSingleObjectiveStudy = (studyDetail: StudyDetail): boolean => {
return studyDetail.directions.length === 1
}
export const useStudyDetailValue = (studyId: number): StudyDetail | null => {
const useStudyDetailValue = (studyId: number): StudyDetail | null => {
const studyDetails = useRecoilValue<StudyDetails>(studyDetailsState)
return studyDetails[studyId] || null
}
const useStudySummaryValue = (studyId: number): StudySummary | null => {
const studySummaries = useRecoilValue<StudySummary[]>(studySummariesState)
return studySummaries.find((s) => s.study_id == studyId) || null
}
interface Preference {
graphHistoryChecked: boolean
graphParetoFrontChecked: boolean
@@ -74,6 +75,8 @@ export const StudyDetail: FC<{
const { studyId } = useParams<ParamTypes>()
const studyIdNumber = parseInt(studyId, 10)
const studyDetail = useStudyDetailValue(studyIdNumber)
const studySummary = useStudySummaryValue(studyIdNumber)
const directions = studyDetail?.directions || studySummary?.directions || null
const [preferences, setPreferences] = useState<Preference>({
graphHistoryChecked: true,
@@ -169,9 +172,7 @@ export const StudyDetail: FC<{
label="History"
/>
<FormControlLabel
disabled={
studyDetail !== null && isSingleObjectiveStudy(studyDetail)
}
disabled={directions?.length === 1}
control={
<Checkbox
checked={preferences.graphParetoFrontChecked}
@@ -194,7 +195,7 @@ export const StudyDetail: FC<{
<FormControlLabel
disabled={
studyDetail !== null &&
(!isSingleObjectiveStudy(studyDetail) ||
(studyDetail.directions.length > 1 ||
!studyDetail.has_intermediate_values)
}
control={
@@ -341,8 +342,8 @@ export const StudyDetail: FC<{
</Card>
) : null}
{studyDetail !== null &&
!isSingleObjectiveStudy(studyDetail) &&
{directions !== null &&
directions.length > 1 &&
preferences.graphParetoFrontChecked ? (
<Card sx={{ margin: theme.spacing(2) }}>
<CardContent>
@@ -359,7 +360,7 @@ export const StudyDetail: FC<{
) : null}
{studyDetail !== null &&
isSingleObjectiveStudy(studyDetail) &&
studyDetail.directions.length == 1 &&
studyDetail.has_intermediate_values &&
preferences.graphIntermediateValuesChecked ? (
<Card sx={{ margin: theme.spacing(2) }}>
@@ -503,7 +504,7 @@ export const TrialTable: FC<{ studyDetail: StudyDetail | null }> = ({
toCellValue: (i) => trials[i].state.toString(),
},
]
if (studyDetail === null || isSingleObjectiveStudy(studyDetail)) {
if (studyDetail === null || studyDetail.directions.length == 1) {
columns.push({
field: "values",
label: "Value",