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

Merge pull request #187 from optuna/improve-cls

Browse Source 
Reduce Cumulative Layout Shift for better user experience.
This commit is contained in:
Masashi Shibata
2022-03-22 17:29:22 +09:00
committed by GitHub
parent 8fcba8d571 5abd99fa45
commit 305d8bdccd
7 changed files with 71 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
optuna_dashboard/ts/components/GraphEdf.tsx
+7 -1
View File
@@ -9,6 +9,7 @@ import {
Typography,
SelectChangeEvent,
useTheme,
Box,
} from "@mui/material"
import { plotlyDarkTemplate } from "./PlotlyDarkMode"
@@ -58,7 +59,12 @@ export const Edf: FC<{
</Grid>
<Grid item xs={9}>
<div id={plotDomId} />
<Box
id={plotDomId}
sx={{
height: "450px",
}}
/>
</Grid>
</Grid>
)
optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx
+12 -9
View File
@@ -9,6 +9,7 @@ import {
Typography,
SelectChangeEvent,
useTheme,
Box,
} from "@mui/material"
import { getParamImportances } from "../apiClient"
@@ -46,7 +47,8 @@ export const GraphHyperparameterImportances: FC<{
}> = ({ study = null, studyId }) => {
const theme = useTheme()
const [objectiveId, setObjectiveId] = useState<number>(0)
const numOfTrials = study?.trials.length || 0
const numCompletedTrials =
study?.trials.filter((t) => t.state === "Complete").length || 0
const [importances, setImportances] = useState<ParamImportances | null>(null)
const { enqueueSnackbar } = useSnackbar()
@@ -55,8 +57,8 @@ export const GraphHyperparameterImportances: FC<{
}
useEffect(() => {
async function fetchParamImportances(studyId: number, objectiveId: number) {
await getParamImportances(studyId, objectiveId)
if (numCompletedTrials > 0) {
getParamImportances(studyId, objectiveId)
.then((p) => {
setImportances(p)
})
@@ -70,11 +72,7 @@ export const GraphHyperparameterImportances: FC<{
)
})
}
if (numOfTrials > 0) {
fetchParamImportances(studyId, objectiveId)
}
}, [numOfTrials, objectiveId, theme.palette.mode])
}, [numCompletedTrials, objectiveId, theme.palette.mode])
useEffect(() => {
if (importances !== null) {
@@ -111,7 +109,12 @@ export const GraphHyperparameterImportances: FC<{
</Grid>
<Grid item xs={9}>
<div id={plotDomId} />
<Box
id={plotDomId}
sx={{
height: "450px",
}}
/>
</Grid>
</Grid>
)
optuna_dashboard/ts/components/GraphIntermediateValues.tsx
+7 -2
View File
@@ -1,6 +1,6 @@
import * as plotly from "plotly.js-dist"
import React, { FC, useEffect } from "react"
import { Grid, Typography, useTheme } from "@mui/material"
import { Box, Grid, Typography, useTheme } from "@mui/material"
import { plotlyDarkTemplate } from "./PlotlyDarkMode"
const plotDomId = "graph-intermediate-values"
@@ -23,7 +23,12 @@ export const GraphIntermediateValues: FC<{
</Grid>
<Grid item xs={9}>
<div id={plotDomId} />
<Box
id={plotDomId}
sx={{
height: "450px",
}}
/>
</Grid>
</Grid>
)
optuna_dashboard/ts/components/GraphParallelCoordinate.tsx
+7 -1
View File
@@ -9,6 +9,7 @@ import {
Typography,
SelectChangeEvent,
useTheme,
Box,
} from "@mui/material"
import { plotlyDarkTemplate } from "./PlotlyDarkMode"
@@ -59,7 +60,12 @@ export const GraphParallelCoordinate: FC<{
</Grid>
<Grid item xs={9}>
<div id={plotDomId} />
<Box
id={plotDomId}
sx={{
height: "450px",
}}
/>
</Grid>
</Grid>
)
optuna_dashboard/ts/components/GraphParetoFront.tsx
+16 -10
View File
@@ -9,6 +9,7 @@ import {
Typography,
SelectChangeEvent,
useTheme,
Box,
} from "@mui/material"
import { plotlyDarkTemplate } from "./PlotlyDarkMode"
@@ -37,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={{
@@ -75,11 +76,16 @@ export const GraphParetoFront: FC<{
))}
</Select>
</FormControl>
</Grid>
</Grid>
) : null}
</>
) : null}
</Grid>
<Grid item xs={9}>
<div id={plotDomId} />
<Box
id={plotDomId}
sx={{
height: "450px",
}}
/>
</Grid>
</Grid>
)
optuna_dashboard/ts/components/GraphSlice.tsx
+7 -1
View File
@@ -11,6 +11,7 @@ import {
Typography,
SelectChangeEvent,
useTheme,
Box,
} from "@mui/material"
import { plotlyDarkTemplate } from "./PlotlyDarkMode"
@@ -123,7 +124,12 @@ export const GraphSlice: FC<{
</Grid>
</Grid>
<Grid item xs={9}>
<div id={plotDomId} />
<Box
id={plotDomId}
sx={{
height: "450px",
}}
/>
</Grid>
</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",