Reduce Cumulative Layout Shift for better user experience.

optuna_dashboard/ts/components/GraphEdf.tsx

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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",