mirror of
https://github.com/wassname/optuna-dashboard.git
synced 2026-09-23 13:30:25 +08:00
Improve CLS score
This commit is contained in:
@@ -9,6 +9,7 @@ import {
|
||||
Typography,
|
||||
SelectChangeEvent,
|
||||
useTheme,
|
||||
Box,
|
||||
} from "@mui/material"
|
||||
import { plotlyDarkTemplate } from "./PlotlyDarkMode"
|
||||
|
||||
@@ -58,7 +59,17 @@ export const Edf: FC<{
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={9}>
|
||||
<div id={plotDomId} />
|
||||
<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>
|
||||
</Grid>
|
||||
)
|
||||
|
||||
@@ -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()
|
||||
|
||||
@@ -71,10 +73,10 @@ export const GraphHyperparameterImportances: FC<{
|
||||
})
|
||||
}
|
||||
|
||||
if (numOfTrials > 0) {
|
||||
if (numCompletedTrials > 0) {
|
||||
fetchParamImportances(studyId, objectiveId)
|
||||
}
|
||||
}, [numOfTrials, objectiveId, theme.palette.mode])
|
||||
}, [numCompletedTrials, objectiveId, theme.palette.mode])
|
||||
|
||||
useEffect(() => {
|
||||
if (importances !== null) {
|
||||
@@ -111,7 +113,17 @@ export const GraphHyperparameterImportances: FC<{
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={9}>
|
||||
<div id={plotDomId} />
|
||||
<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>
|
||||
</Grid>
|
||||
)
|
||||
|
||||
@@ -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,17 @@ export const GraphIntermediateValues: FC<{
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={9}>
|
||||
<div id={plotDomId} />
|
||||
<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>
|
||||
</Grid>
|
||||
)
|
||||
|
||||
@@ -9,6 +9,7 @@ import {
|
||||
Typography,
|
||||
SelectChangeEvent,
|
||||
useTheme,
|
||||
Box,
|
||||
} from "@mui/material"
|
||||
import { plotlyDarkTemplate } from "./PlotlyDarkMode"
|
||||
|
||||
@@ -59,7 +60,17 @@ export const GraphParallelCoordinate: FC<{
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={9}>
|
||||
<div id={plotDomId} />
|
||||
<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>
|
||||
</Grid>
|
||||
)
|
||||
|
||||
@@ -9,6 +9,7 @@ import {
|
||||
Typography,
|
||||
SelectChangeEvent,
|
||||
useTheme,
|
||||
Box,
|
||||
} from "@mui/material"
|
||||
import { plotlyDarkTemplate } from "./PlotlyDarkMode"
|
||||
|
||||
@@ -79,7 +80,17 @@ export const GraphParetoFront: FC<{
|
||||
</Grid>
|
||||
) : null}
|
||||
<Grid item xs={9}>
|
||||
<div id={plotDomId} />
|
||||
<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>
|
||||
</Grid>
|
||||
)
|
||||
|
||||
@@ -11,6 +11,7 @@ import {
|
||||
Typography,
|
||||
SelectChangeEvent,
|
||||
useTheme,
|
||||
Box,
|
||||
} from "@mui/material"
|
||||
import { plotlyDarkTemplate } from "./PlotlyDarkMode"
|
||||
|
||||
@@ -123,7 +124,17 @@ export const GraphSlice: FC<{
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item xs={9}>
|
||||
<div id={plotDomId} />
|
||||
<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>
|
||||
</Grid>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user