From c74a7510400dc9cfa7337c03404d0ea720a18074 Mon Sep 17 00:00:00 2001
From: c-bata <contact@c-bata.link>
Date: Mon, 2 Jan 2023 12:17:45 +0900
Subject: [PATCH] Fix layout when no trials available

---
 .../ts/components/BestTrialsCard.tsx          | 201 ++++++++----------
 .../ts/components/GraphContour.tsx            |   4 +-
 optuna_dashboard/ts/components/GraphEdf.tsx   |   4 +-
 .../ts/components/GraphHistory.tsx            |   2 +-
 .../ts/components/StudyDetailBeta.tsx         |   4 +-
 5 files changed, 102 insertions(+), 113 deletions(-)

diff --git a/optuna_dashboard/ts/components/BestTrialsCard.tsx b/optuna_dashboard/ts/components/BestTrialsCard.tsx
index 3f0c2dce..733293ce 100644
--- a/optuna_dashboard/ts/components/BestTrialsCard.tsx
+++ b/optuna_dashboard/ts/components/BestTrialsCard.tsx
@@ -1,115 +1,100 @@
 import React, { FC } from "react"
-import {Button, Card, CardContent, Typography, useTheme} from "@mui/material";
-import {Link} from "react-router-dom";
-import LinkIcon from '@mui/icons-material/Link';
+import { Button, Card, CardContent, Typography, useTheme } from "@mui/material"
+import { Link } from "react-router-dom"
+import LinkIcon from "@mui/icons-material/Link"
 
 export const BestTrialsCard: FC<{
-    studyDetail: StudyDetail | null
+  studyDetail: StudyDetail | null
 }> = ({ studyDetail }) => {
-    const theme = useTheme()
+  const theme = useTheme()
 
-    let content: React.ReactNode = null
-    if (studyDetail !== null && studyDetail.best_trials.length === 1) {
-        const bestTrial = studyDetail.best_trials[0]
-        content = (
-            <>
-                <Typography
-                    variant="h6"
-                    sx={{ margin: "1em 0", fontWeight: 600 }}
-                >
-                    Best Trial (number={bestTrial.number})
-                </Typography>
-                <Typography
-                    variant="h3"
-                    sx={{ fontWeight: 600, marginBottom: theme.spacing(2) }}
-                    color="secondary"
-                >
-                    {bestTrial.values}
-                </Typography>
-                <Typography>
-                    Params = [
-                    {bestTrial.params
-                        .map((p) => `${p.name}: ${p.value}`)
-                        .join(", ")}
-                    ]
-                </Typography>
-                <Typography>
-                        Intermediate Values = [
-                        {studyDetail.best_trials[0].intermediate_values
-                          .map((p) => `${p.step}: ${p.value}`)
-                          .join(", ")}
-                        ]
-                      </Typography>
-                      <Typography>
-                        User Attributes = [
-                        {studyDetail.best_trials[0].user_attrs
-                          .map((p) => `${p.key}: ${p.value}`)
-                          .join(", ")}
-                        ]
-                      </Typography>
-                    <Button
-                        variant="outlined"
-                        startIcon={<LinkIcon />}
-                        component={Link}
-                        to={`${URL_PREFIX}/studies/${bestTrial.study_id}/trials/${bestTrial.number}/`}
-                        sx={{ margin: theme.spacing(1)}}
-                    >
-                        Details
-                    </Button>
-            </>
-
-        )
-    } else if (studyDetail !== null && studyDetail.best_trials.length > 1) {
-        const bestTrials = studyDetail.best_trials
-        content = (
-            <>
-                <Typography
-                    variant="h6"
-                    sx={{ margin: "1em 0", fontWeight: 600 }}
-                >
-                    Best Trials ({bestTrials.length} trials)
-                </Typography>
-                {bestTrials.map((trial, i) => (
-                    <Card
-                        key={i}
-                        sx={{
-                            border: "1px solid rgba(128,128,128,0.5)",
-                            margin: theme.spacing(1, 0),
-                        }}
-                    >
-                        <CardContent>
-                            <Typography variant="h6">
-                                Trial number={trial.number} (trial_id=
-                                {trial.trial_id})
-                            </Typography>
-                            <Typography>
-                                Objective Values = [{trial.values?.join(", ")}]
-                            </Typography>
-                            <Typography>
-                                Params = [
-                                {trial.params
-                                    .map((p) => `${p.name}: ${p.value}`)
-                                    .join(", ")}
-                                ]
-                            </Typography>
-                        </CardContent>
-                    </Card>
-                ))}
-            </>
-
-        )
-    }
-    return (
-        <Card>
-            <CardContent
-                sx={{
-                    alignItems: "center",
-                    display: "flex",
-                    flexDirection: "column",
-                }}
-            >
-                {content}
-            </CardContent>
-        </Card>
+  let header = "Best Trials"
+  let content: React.ReactNode = null
+  if (studyDetail !== null && studyDetail.best_trials.length === 1) {
+    const bestTrial = studyDetail.best_trials[0]
+    header = `Best Trial (number=${bestTrial.number})`
+    content = (
+      <>
+        <Typography
+          variant="h3"
+          sx={{ fontWeight: 600, marginBottom: theme.spacing(2) }}
+          color="secondary"
+        >
+          {bestTrial.values}
+        </Typography>
+        <Typography>
+          Params = [
+          {bestTrial.params.map((p) => `${p.name}: ${p.value}`).join(", ")}]
+        </Typography>
+        <Typography>
+          Intermediate Values = [
+          {studyDetail.best_trials[0].intermediate_values
+            .map((p) => `${p.step}: ${p.value}`)
+            .join(", ")}
+          ]
+        </Typography>
+        <Typography>
+          User Attributes = [
+          {studyDetail.best_trials[0].user_attrs
+            .map((p) => `${p.key}: ${p.value}`)
+            .join(", ")}
+          ]
+        </Typography>
+        <Button
+          variant="outlined"
+          startIcon={<LinkIcon />}
+          component={Link}
+          to={`${URL_PREFIX}/studies/${bestTrial.study_id}/trials/${bestTrial.number}/`}
+          sx={{ margin: theme.spacing(1) }}
+        >
+          Details
+        </Button>
+      </>
     )
+  } else if (studyDetail !== null && studyDetail.best_trials.length > 1) {
+    const bestTrials = studyDetail.best_trials
+    content = (
+      <>
+        {bestTrials.map((trial, i) => (
+          <Card
+            key={i}
+            sx={{
+              border: "1px solid rgba(128,128,128,0.5)",
+              margin: theme.spacing(1, 0),
+            }}
+          >
+            <CardContent>
+              <Typography variant="h6">
+                Trial number={trial.number} (trial_id=
+                {trial.trial_id})
+              </Typography>
+              <Typography>
+                Objective Values = [{trial.values?.join(", ")}]
+              </Typography>
+              <Typography>
+                Params = [
+                {trial.params.map((p) => `${p.name}: ${p.value}`).join(", ")}]
+              </Typography>
+            </CardContent>
+          </Card>
+        ))}
+      </>
+    )
+  }
+  return (
+    <Card>
+      <CardContent
+        sx={{
+          alignItems: "center",
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        <Typography variant="h6" sx={{ margin: "1em 0", fontWeight: 600 }}>
+          {header}
+        </Typography>
+        {content}
+      </CardContent>
+    </Card>
+  )
 }
diff --git a/optuna_dashboard/ts/components/GraphContour.tsx b/optuna_dashboard/ts/components/GraphContour.tsx
index 813365bd..a26c3e16 100644
--- a/optuna_dashboard/ts/components/GraphContour.tsx
+++ b/optuna_dashboard/ts/components/GraphContour.tsx
@@ -214,7 +214,9 @@ const plotContour = (
   const filteredTrials = trials.filter((t) => filterFunc(t, objectiveId))
 
   if (filteredTrials.length === 0) {
-    plotly.react(plotDomId, [])
+    plotly.react(plotDomId, [], {
+      template: mode === "dark" ? plotlyDarkTemplate : {},
+    })
     return
   }
 
diff --git a/optuna_dashboard/ts/components/GraphEdf.tsx b/optuna_dashboard/ts/components/GraphEdf.tsx
index 47b82bee..c266de67 100644
--- a/optuna_dashboard/ts/components/GraphEdf.tsx
+++ b/optuna_dashboard/ts/components/GraphEdf.tsx
@@ -80,7 +80,9 @@ const plotEdf = (study: StudyDetail, objectiveId: number, mode: string) => {
   const filteredTrials = trials.filter((t) => filterFunc(t, objectiveId))
 
   if (filteredTrials.length === 0) {
-    plotly.react(plotDomId, [])
+    plotly.react(plotDomId, [], {
+      template: mode === "dark" ? plotlyDarkTemplate : {},
+    })
     return
   }
 
diff --git a/optuna_dashboard/ts/components/GraphHistory.tsx b/optuna_dashboard/ts/components/GraphHistory.tsx
index da431167..03907c12 100644
--- a/optuna_dashboard/ts/components/GraphHistory.tsx
+++ b/optuna_dashboard/ts/components/GraphHistory.tsx
@@ -224,7 +224,7 @@ const plotHistory = (
     filteredTrials = filteredTrials.filter((t) => t.state !== "Pruned")
   }
   if (filteredTrials.length === 0) {
-    plotly.react(plotDomId, [])
+    plotly.react(plotDomId, [], layout)
     return
   }
 
diff --git a/optuna_dashboard/ts/components/StudyDetailBeta.tsx b/optuna_dashboard/ts/components/StudyDetailBeta.tsx
index 9254c19a..f00af809 100644
--- a/optuna_dashboard/ts/components/StudyDetailBeta.tsx
+++ b/optuna_dashboard/ts/components/StudyDetailBeta.tsx
@@ -34,7 +34,7 @@ import { DataGrid, DataGridColumn } from "./DataGrid"
 import { GraphIntermediateValues } from "./GraphIntermediateValues"
 import { Edf } from "./GraphEdf"
 import { TrialList } from "./TrialList"
-import {BestTrialsCard} from "./BestTrialsCard";
+import { BestTrialsCard } from "./BestTrialsCard"
 
 interface ParamTypes {
   studyId: string
@@ -124,7 +124,7 @@ export const StudyDetailBeta: FC<{
             graphHeight="450px"
           />
           <Grid2 xs={6} spacing={2}>
-              <BestTrialsCard studyDetail={studyDetail} />
+            <BestTrialsCard studyDetail={studyDetail} />
           </Grid2>
           <Grid2 xs={6}>
             <Card>