From 025e061d06bcba706fd75b79a20709f4693718df Mon Sep 17 00:00:00 2001
From: keisuke-umezawa <keisuke.umezawa@gmail.com>
Date: Sat, 29 Jul 2023 16:53:14 +0900
Subject: [PATCH] Fix CLS issue

---
 .../ts/components/GraphHistory.tsx            |  8 +++++-
 .../ts/components/StudyHistory.tsx            | 28 +++++++++----------
 optuna_dashboard/ts/trialFilter.ts            |  3 ++
 3 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/optuna_dashboard/ts/components/GraphHistory.tsx b/optuna_dashboard/ts/components/GraphHistory.tsx
index 73cf2f09..3093d82b 100644
--- a/optuna_dashboard/ts/components/GraphHistory.tsx
+++ b/optuna_dashboard/ts/components/GraphHistory.tsx
@@ -1,6 +1,7 @@
 import * as plotly from "plotly.js-dist-min"
 import React, { ChangeEvent, FC, useEffect, useState } from "react"
 import {
+  Box,
   Grid,
   FormControl,
   FormLabel,
@@ -163,7 +164,12 @@ export const GraphHistory: FC<{
         </FormControl>
       </Grid>
       <Grid item xs={9}>
-        <div id={plotDomId} />
+        <Box
+          id={plotDomId}
+          sx={{
+            height: "450px",
+          }}
+        />
       </Grid>
     </Grid>
   )
diff --git a/optuna_dashboard/ts/components/StudyHistory.tsx b/optuna_dashboard/ts/components/StudyHistory.tsx
index dc5f1289..ce30fc44 100644
--- a/optuna_dashboard/ts/components/StudyHistory.tsx
+++ b/optuna_dashboard/ts/components/StudyHistory.tsx
@@ -89,21 +89,19 @@ export const StudyHistory: FC<{ studyId: number }> = ({ studyId }) => {
           </CardContent>
         </Card>
       ) : null}
-      {studyDetail !== null ? (
-        <Card
-          sx={{
-            margin: theme.spacing(2),
-          }}
-        >
-          <CardContent>
-            <GraphHistory
-              studies={[studyDetail]}
-              includePruned={includePruned}
-              logScale={logScale}
-            />
-          </CardContent>
-        </Card>
-      ) : null}
+      <Card
+        sx={{
+          margin: theme.spacing(2),
+        }}
+      >
+        <CardContent>
+          <GraphHistory
+            studies={studyDetail !== null ? [studyDetail] : []}
+            includePruned={includePruned}
+            logScale={logScale}
+          />
+        </CardContent>
+      </Card>
       <Grid2 container spacing={2} sx={{ padding: theme.spacing(0, 2) }}>
         {studyDetail !== null &&
         studyDetail.directions.length == 1 &&
diff --git a/optuna_dashboard/ts/trialFilter.ts b/optuna_dashboard/ts/trialFilter.ts
index 142ec37f..81e82fda 100644
--- a/optuna_dashboard/ts/trialFilter.ts
+++ b/optuna_dashboard/ts/trialFilter.ts
@@ -201,6 +201,9 @@ export const useObjectiveAndUserAttrTargetsFromStudies = (
     defaultTarget.identifier()
   )
   const minDirections = useMemo<number>(() => {
+    if (studies.length === 0) {
+      return 0
+    }
     return studies.reduce((acc, study) => {
       return Math.min(acc, study.directions.length)
     }, Number.MAX_VALUE)