From 209422bd9d4f06a30c7806af98a3ea720a55242c Mon Sep 17 00:00:00 2001
From: c-bata <contact@c-bata.link>
Date: Sun, 20 Mar 2022 22:32:01 +0900
Subject: [PATCH 1/3] Improve CLS score

---
 optuna_dashboard/ts/components/GraphEdf.tsx   | 13 +++++++++++-
 .../GraphHyperparameterImportances.tsx        | 20 +++++++++++++++----
 .../ts/components/GraphIntermediateValues.tsx | 14 +++++++++++--
 .../ts/components/GraphParallelCoordinate.tsx | 13 +++++++++++-
 .../ts/components/GraphParetoFront.tsx        | 13 +++++++++++-
 optuna_dashboard/ts/components/GraphSlice.tsx | 13 +++++++++++-
 6 files changed, 76 insertions(+), 10 deletions(-)

diff --git a/optuna_dashboard/ts/components/GraphEdf.tsx b/optuna_dashboard/ts/components/GraphEdf.tsx
index 3fd78360..a23856d3 100644
--- a/optuna_dashboard/ts/components/GraphEdf.tsx
+++ b/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,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>
   )
diff --git a/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx b/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx
index cb2763b6..a776f4e3 100644
--- a/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx
+++ b/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()
 
@@ -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>
   )
diff --git a/optuna_dashboard/ts/components/GraphIntermediateValues.tsx b/optuna_dashboard/ts/components/GraphIntermediateValues.tsx
index 30f3801a..cf3a38ed 100644
--- a/optuna_dashboard/ts/components/GraphIntermediateValues.tsx
+++ b/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,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>
   )
diff --git a/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx b/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx
index 2a6e3190..8af447e2 100644
--- a/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx
+++ b/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,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>
   )
diff --git a/optuna_dashboard/ts/components/GraphParetoFront.tsx b/optuna_dashboard/ts/components/GraphParetoFront.tsx
index 574e7fea..77795c6d 100644
--- a/optuna_dashboard/ts/components/GraphParetoFront.tsx
+++ b/optuna_dashboard/ts/components/GraphParetoFront.tsx
@@ -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>
   )
diff --git a/optuna_dashboard/ts/components/GraphSlice.tsx b/optuna_dashboard/ts/components/GraphSlice.tsx
index 119d2779..5c5d1735 100644
--- a/optuna_dashboard/ts/components/GraphSlice.tsx
+++ b/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,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>
   )

From 1f7799fb47d2ced8744fa4ee8cc664fb5c2c19de Mon Sep 17 00:00:00 2001
From: c-bata <contact@c-bata.link>
Date: Tue, 22 Mar 2022 08:35:00 +0900
Subject: [PATCH 2/3] Fix a memory leak in GraphHyperparameterImportance

---
 .../ts/components/GraphHyperparameterImportances.tsx      | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx b/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx
index a776f4e3..c4713b80 100644
--- a/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx
+++ b/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx
@@ -57,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)
         })
@@ -72,10 +72,6 @@ export const GraphHyperparameterImportances: FC<{
           )
         })
     }
-
-    if (numCompletedTrials > 0) {
-      fetchParamImportances(studyId, objectiveId)
-    }
   }, [numCompletedTrials, objectiveId, theme.palette.mode])
 
   useEffect(() => {

From 5abd99fa452818ea907355c559bf06c3b3bdd563 Mon Sep 17 00:00:00 2001
From: c-bata <contact@c-bata.link>
Date: Tue, 22 Mar 2022 12:42:07 +0900
Subject: [PATCH 3/3] Add some design improvements

---
 optuna_dashboard/ts/components/GraphEdf.tsx   |  5 ----
 .../GraphHyperparameterImportances.tsx        |  5 ----
 .../ts/components/GraphIntermediateValues.tsx |  5 ----
 .../ts/components/GraphParallelCoordinate.tsx |  5 ----
 .../ts/components/GraphParetoFront.tsx        | 23 ++++++---------
 optuna_dashboard/ts/components/GraphSlice.tsx |  5 ----
 .../ts/components/StudyDetail.tsx             | 29 ++++++++++---------
 7 files changed, 24 insertions(+), 53 deletions(-)

diff --git a/optuna_dashboard/ts/components/GraphEdf.tsx b/optuna_dashboard/ts/components/GraphEdf.tsx
index a23856d3..b2f3d9f2 100644
--- a/optuna_dashboard/ts/components/GraphEdf.tsx
+++ b/optuna_dashboard/ts/components/GraphEdf.tsx
@@ -63,11 +63,6 @@ export const Edf: FC<{
           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>
diff --git a/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx b/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx
index c4713b80..cd033dda 100644
--- a/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx
+++ b/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx
@@ -113,11 +113,6 @@ export const GraphHyperparameterImportances: FC<{
           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>
diff --git a/optuna_dashboard/ts/components/GraphIntermediateValues.tsx b/optuna_dashboard/ts/components/GraphIntermediateValues.tsx
index cf3a38ed..6f60bae9 100644
--- a/optuna_dashboard/ts/components/GraphIntermediateValues.tsx
+++ b/optuna_dashboard/ts/components/GraphIntermediateValues.tsx
@@ -27,11 +27,6 @@ export const GraphIntermediateValues: FC<{
           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>
diff --git a/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx b/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx
index 8af447e2..9bbf997d 100644
--- a/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx
+++ b/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx
@@ -64,11 +64,6 @@ export const GraphParallelCoordinate: FC<{
           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>
diff --git a/optuna_dashboard/ts/components/GraphParetoFront.tsx b/optuna_dashboard/ts/components/GraphParetoFront.tsx
index 77795c6d..f5aeb8a4 100644
--- a/optuna_dashboard/ts/components/GraphParetoFront.tsx
+++ b/optuna_dashboard/ts/components/GraphParetoFront.tsx
@@ -38,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={{
@@ -76,19 +76,14 @@ export const GraphParetoFront: FC<{
                 ))}
               </Select>
             </FormControl>
-          </Grid>
-        </Grid>
-      ) : null}
+          </>
+        ) : null}
+      </Grid>
       <Grid item xs={9}>
         <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>
diff --git a/optuna_dashboard/ts/components/GraphSlice.tsx b/optuna_dashboard/ts/components/GraphSlice.tsx
index 5c5d1735..69b629d0 100644
--- a/optuna_dashboard/ts/components/GraphSlice.tsx
+++ b/optuna_dashboard/ts/components/GraphSlice.tsx
@@ -128,11 +128,6 @@ export const GraphSlice: FC<{
           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>
diff --git a/optuna_dashboard/ts/components/StudyDetail.tsx b/optuna_dashboard/ts/components/StudyDetail.tsx
index 1715e09d..b477be5a 100644
--- a/optuna_dashboard/ts/components/StudyDetail.tsx
+++ b/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",