Improve CLS score

This commit is contained in:
c-bata
2022-03-22 14:21:41 +09:00
parent 8fcba8d571
commit 209422bd9d
6 changed files with 76 additions and 10 deletions
+12 -1
View File
@@ -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>
)
+12 -1
View File
@@ -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>
)