From 272828fed433cb5452fb950d19309ba4f6ad8021 Mon Sep 17 00:00:00 2001
From: c-bata <contact@c-bata.link>
Date: Fri, 9 Apr 2021 15:59:08 +0900
Subject: [PATCH 1/6] Add visual improvements of slice plot

---
 optuna_dashboard/static/components/GraphContour.tsx |  5 +++--
 optuna_dashboard/static/components/GraphSlice.tsx   | 11 ++++++++---
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/optuna_dashboard/static/components/GraphContour.tsx b/optuna_dashboard/static/components/GraphContour.tsx
index aad82327..6ce595e3 100644
--- a/optuna_dashboard/static/components/GraphContour.tsx
+++ b/optuna_dashboard/static/components/GraphContour.tsx
@@ -118,7 +118,7 @@ export const GraphContour: FC<{
           </FormControl>
         </Grid>
       </Grid>
-      <Grid item xs={6}>
+      <Grid item xs={9}>
         <div id={plotDomId} />
       </Grid>
     </Grid>
@@ -137,10 +137,11 @@ const plotContour = (
   }
 
   const layout: Partial<plotly.Layout> = {
-    title: "Contour",
     margin: {
       l: 50,
+      t: 0,
       r: 50,
+      b: 0,
     },
     xaxis: {
       gridcolor: "#f2f5fa",
diff --git a/optuna_dashboard/static/components/GraphSlice.tsx b/optuna_dashboard/static/components/GraphSlice.tsx
index 7749f338..c0cad77b 100644
--- a/optuna_dashboard/static/components/GraphSlice.tsx
+++ b/optuna_dashboard/static/components/GraphSlice.tsx
@@ -7,6 +7,7 @@ import {
   InputLabel,
   MenuItem,
   Select,
+  Typography,
 } from "@material-ui/core"
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
 
@@ -14,10 +15,12 @@ const plotDomId = "graph-slice"
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
+    title: {
+      margin: "1em 0",
+    },
     formControl: {
       marginBottom: theme.spacing(2),
       marginRight: theme.spacing(5),
-      marginTop: theme.spacing(10),
     },
   })
 )
@@ -68,6 +71,7 @@ export const GraphSlice: FC<{
     <Grid container direction="row">
       <Grid item xs={3}>
         <Grid container direction="column">
+          <Typography variant="h6" className={classes.title}>Slice</Typography>
           {study !== null && study.directions.length !== 1 ? (
             <FormControl component="fieldset" className={classes.formControl}>
               <FormLabel component="legend">Objective ID:</FormLabel>
@@ -94,7 +98,7 @@ export const GraphSlice: FC<{
           ) : null}
         </Grid>
       </Grid>
-      <Grid item xs={6}>
+      <Grid item xs={9}>
         <div id={plotDomId} />
       </Grid>
     </Grid>
@@ -111,10 +115,11 @@ const plotSlice = (
   }
 
   const layout: Partial<plotly.Layout> = {
-    title: "Slice",
     margin: {
       l: 50,
+      t: 0,
       r: 50,
+      b: 0,
     },
     xaxis: {
       title: selected || "",

From 761ba3bf2e6e56bad4e46ad4393f09ab184daa10 Mon Sep 17 00:00:00 2001
From: c-bata <contact@c-bata.link>
Date: Fri, 9 Apr 2021 15:59:50 +0900
Subject: [PATCH 2/6] Add visual improvements of contour plot

---
 optuna_dashboard/static/components/GraphContour.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/optuna_dashboard/static/components/GraphContour.tsx b/optuna_dashboard/static/components/GraphContour.tsx
index 6ce595e3..8b3c0e28 100644
--- a/optuna_dashboard/static/components/GraphContour.tsx
+++ b/optuna_dashboard/static/components/GraphContour.tsx
@@ -7,6 +7,7 @@ import {
   InputLabel,
   MenuItem,
   Select,
+  Typography,
 } from "@material-ui/core"
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
 
@@ -14,6 +15,9 @@ const plotDomId = "graph-contour"
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
+    title: {
+      margin: "1em 0",
+    },
     formControl: {
       marginBottom: theme.spacing(2),
       marginRight: theme.spacing(2),
@@ -84,6 +88,7 @@ export const GraphContour: FC<{
     <Grid container direction="row">
       <Grid item xs={3}>
         <Grid container direction="column">
+          <Typography variant="h6" className={classes.title}>Contour</Typography>
           {study !== null && study.directions.length !== 1 ? (
             <FormControl component="fieldset" className={classes.formControl}>
               <FormLabel component="legend">Objective ID:</FormLabel>

From 5fe359fe8c90eb546e7e9b9704d4423626316afe Mon Sep 17 00:00:00 2001
From: c-bata <contact@c-bata.link>
Date: Fri, 9 Apr 2021 16:04:54 +0900
Subject: [PATCH 3/6] Add title on GraphHistory

---
 optuna_dashboard/static/components/GraphContour.tsx | 4 +++-
 optuna_dashboard/static/components/GraphHistory.tsx | 7 +++++++
 optuna_dashboard/static/components/GraphSlice.tsx   | 4 +++-
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/optuna_dashboard/static/components/GraphContour.tsx b/optuna_dashboard/static/components/GraphContour.tsx
index 8b3c0e28..85f410c9 100644
--- a/optuna_dashboard/static/components/GraphContour.tsx
+++ b/optuna_dashboard/static/components/GraphContour.tsx
@@ -88,7 +88,9 @@ export const GraphContour: FC<{
     <Grid container direction="row">
       <Grid item xs={3}>
         <Grid container direction="column">
-          <Typography variant="h6" className={classes.title}>Contour</Typography>
+          <Typography variant="h6" className={classes.title}>
+            Contour
+          </Typography>
           {study !== null && study.directions.length !== 1 ? (
             <FormControl component="fieldset" className={classes.formControl}>
               <FormLabel component="legend">Objective ID:</FormLabel>
diff --git a/optuna_dashboard/static/components/GraphHistory.tsx b/optuna_dashboard/static/components/GraphHistory.tsx
index 1a5447d7..ddaf0bf1 100644
--- a/optuna_dashboard/static/components/GraphHistory.tsx
+++ b/optuna_dashboard/static/components/GraphHistory.tsx
@@ -11,6 +11,7 @@ import {
   Select,
   Radio,
   RadioGroup,
+  Typography,
 } from "@material-ui/core"
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
 
@@ -18,6 +19,9 @@ const plotDomId = "graph-history"
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
+    title: {
+      margin: "1em 0",
+    },
     formControl: {
       marginBottom: theme.spacing(2),
     },
@@ -83,6 +87,9 @@ export const GraphHistory: FC<{
     <Grid container direction="row">
       <Grid item xs={3}>
         <Grid container direction="column">
+          <Typography variant="h6" className={classes.title}>
+            History
+          </Typography>
           {study !== null && study.directions.length !== 1 ? (
             <FormControl component="fieldset" className={classes.formControl}>
               <FormLabel component="legend">Objective ID:</FormLabel>
diff --git a/optuna_dashboard/static/components/GraphSlice.tsx b/optuna_dashboard/static/components/GraphSlice.tsx
index c0cad77b..9b840bd7 100644
--- a/optuna_dashboard/static/components/GraphSlice.tsx
+++ b/optuna_dashboard/static/components/GraphSlice.tsx
@@ -71,7 +71,9 @@ export const GraphSlice: FC<{
     <Grid container direction="row">
       <Grid item xs={3}>
         <Grid container direction="column">
-          <Typography variant="h6" className={classes.title}>Slice</Typography>
+          <Typography variant="h6" className={classes.title}>
+            Slice
+          </Typography>
           {study !== null && study.directions.length !== 1 ? (
             <FormControl component="fieldset" className={classes.formControl}>
               <FormLabel component="legend">Objective ID:</FormLabel>

From 7e1685946a58656b8f3ee48679d429aee1cf70dd Mon Sep 17 00:00:00 2001
From: c-bata <contact@c-bata.link>
Date: Fri, 9 Apr 2021 16:31:14 +0900
Subject: [PATCH 4/6] Add visual improvements of pareto front

---
 .../static/components/GraphParetoFront.tsx         | 12 +++++++++---
 optuna_dashboard/static/components/StudyDetail.tsx | 14 +++++++-------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/optuna_dashboard/static/components/GraphParetoFront.tsx b/optuna_dashboard/static/components/GraphParetoFront.tsx
index b2d861d0..f23dc32d 100644
--- a/optuna_dashboard/static/components/GraphParetoFront.tsx
+++ b/optuna_dashboard/static/components/GraphParetoFront.tsx
@@ -6,6 +6,7 @@ import {
   FormLabel,
   MenuItem,
   Select,
+  Typography,
 } from "@material-ui/core"
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
 
@@ -13,10 +14,12 @@ const plotDomId = "graph-pareto-front"
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
+    title: {
+      margin: "1em 0",
+    },
     formControl: {
       marginBottom: theme.spacing(2),
       marginRight: theme.spacing(5),
-      marginTop: theme.spacing(10),
     },
   })
 )
@@ -51,6 +54,9 @@ export const GraphParetoFront: FC<{
       {study !== null && study.directions.length !== 1 ? (
         <Grid item xs={3}>
           <Grid container direction="column">
+            <Typography variant="h6" className={classes.title}>
+              Pareto Front
+            </Typography>
             <FormControl component="fieldset" className={classes.formControl}>
               <FormLabel component="legend">Objective X ID:</FormLabel>
               <Select value={objectiveXId} onChange={handleObjectiveXChange}>
@@ -74,7 +80,7 @@ export const GraphParetoFront: FC<{
           </Grid>
         </Grid>
       ) : null}
-      <Grid item xs={6}>
+      <Grid item xs={9}>
         <div id={plotDomId} />
       </Grid>
     </Grid>
@@ -95,9 +101,9 @@ const plotParetoFront = (
     return
   }
   const layout: Partial<plotly.Layout> = {
-    title: "Pareto-front plot",
     margin: {
       l: 50,
+      t: 0,
       r: 50,
       b: 0,
     },
diff --git a/optuna_dashboard/static/components/StudyDetail.tsx b/optuna_dashboard/static/components/StudyDetail.tsx
index 47541c65..f2e9b2c7 100644
--- a/optuna_dashboard/static/components/StudyDetail.tsx
+++ b/optuna_dashboard/static/components/StudyDetail.tsx
@@ -183,6 +183,13 @@ export const StudyDetail: FC = () => {
               <GraphHistory study={studyDetail} />
             </CardContent>
           </Card>
+          {studyDetail !== null && !isSingleObjectiveStudy(studyDetail) ? (
+            <Card className={classes.card}>
+              <CardContent>
+                <GraphParetoFront study={studyDetail} />
+              </CardContent>
+            </Card>
+          ) : null}
           {studyDetail !== null && isSingleObjectiveStudy(studyDetail) ? (
             <Grid container direction="row">
               <Grid item xs={6}>
@@ -236,13 +243,6 @@ export const StudyDetail: FC = () => {
               </CardContent>
             </Card>
           ) : null}
-          {studyDetail !== null && !isSingleObjectiveStudy(studyDetail) ? (
-            <Card className={classes.card}>
-              <CardContent>
-                <GraphParetoFront study={studyDetail} />
-              </CardContent>
-            </Card>
-          ) : null}
           <Card className={classes.card}>
             <TrialTable studyDetail={studyDetail} />
           </Card>

From 45ba4fcddeccd1f8429469c33b98c44455c39c60 Mon Sep 17 00:00:00 2001
From: c-bata <contact@c-bata.link>
Date: Fri, 9 Apr 2021 17:42:17 +0900
Subject: [PATCH 5/6] Refactor GraphParetoFront

---
 .../static/components/GraphParetoFront.tsx    | 22 +++----------------
 1 file changed, 3 insertions(+), 19 deletions(-)

diff --git a/optuna_dashboard/static/components/GraphParetoFront.tsx b/optuna_dashboard/static/components/GraphParetoFront.tsx
index f23dc32d..6a1f7468 100644
--- a/optuna_dashboard/static/components/GraphParetoFront.tsx
+++ b/optuna_dashboard/static/components/GraphParetoFront.tsx
@@ -96,10 +96,6 @@ const plotParetoFront = (
     return
   }
 
-  const dim: number = study.directions.length
-  if (dim != 2) {
-    return
-  }
   const layout: Partial<plotly.Layout> = {
     margin: {
       l: 50,
@@ -119,7 +115,7 @@ const plotParetoFront = (
 
   const normalizedValues: number[][] = []
   completedTrials.forEach((t) => {
-    if (t.values && t.values.length == dim) {
+    if (t.values && t.values.length === study.directions.length) {
       const trialValues = t.values.map((v: number, i: number) => {
         return study.directions[i] === "minimize" ? v : -v
       })
@@ -129,9 +125,7 @@ const plotParetoFront = (
 
   const pointColors: string[] = []
   normalizedValues.forEach((values0: number[], i: number) => {
-    let dominated = false
-
-    dominated = normalizedValues.some((values1: number[], j: number) => {
+    const dominated = normalizedValues.some((values1: number[], j: number) => {
       if (i === j) {
         return false
       }
@@ -162,17 +156,7 @@ const plotParetoFront = (
       marker: {
         color: pointColors,
       },
-      text: completedTrials.map((t: Trial): string => {
-        return JSON.stringify(
-          {
-            number: t.number,
-            values: t.values,
-            params: t.params,
-          },
-          null,
-          2
-        ).replaceAll("\n", "<br>")
-      }),
+      text: completedTrials.map((t: Trial): string => `Trial (number=${t.number})`),
       hovertemplate: "%{text}<extra></extra>",
     },
   ]

From ea9198a2b609b6c66060289ebf924ee034bf66a6 Mon Sep 17 00:00:00 2001
From: c-bata <contact@c-bata.link>
Date: Fri, 9 Apr 2021 17:44:58 +0900
Subject: [PATCH 6/6] Run prettier

---
 optuna_dashboard/static/components/GraphParetoFront.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/optuna_dashboard/static/components/GraphParetoFront.tsx b/optuna_dashboard/static/components/GraphParetoFront.tsx
index 6a1f7468..2542cdb3 100644
--- a/optuna_dashboard/static/components/GraphParetoFront.tsx
+++ b/optuna_dashboard/static/components/GraphParetoFront.tsx
@@ -156,7 +156,9 @@ const plotParetoFront = (
       marker: {
         color: pointColors,
       },
-      text: completedTrials.map((t: Trial): string => `Trial (number=${t.number})`),
+      text: completedTrials.map(
+        (t: Trial): string => `Trial (number=${t.number})`
+      ),
       hovertemplate: "%{text}<extra></extra>",
     },
   ]