Merge pull request #75 from optuna/improve-slice-contour-plot

Add visual improvements of GraphSlice, GraphContour and GraphParetoFront.

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,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>
           {study !== null && study.directions.length !== 1 ? (
             <FormControl component="fieldset" className={classes.formControl}>
               <FormLabel component="legend">Objective ID:</FormLabel>
@@ -118,7 +125,7 @@ export const GraphContour: FC<{
           </FormControl>
         </Grid>
       </Grid>
-      <Grid item xs={6}>
+      <Grid item xs={9}>
         <div id={plotDomId} />
       </Grid>
     </Grid>
@@ -137,10 +144,11 @@ const plotContour = (
   }
 
   const layout: Partial<plotly.Layout> = {
-    title: "Contour",
     margin: {
       l: 50,
+      t: 0,
       r: 50,
+      b: 0,
     },
     xaxis: {
       gridcolor: "#f2f5fa",

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>

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>
@@ -90,14 +96,10 @@ const plotParetoFront = (
     return
   }
 
-  const dim: number = study.directions.length
-  if (dim != 2) {
-    return
-  }
   const layout: Partial<plotly.Layout> = {
-    title: "Pareto-front plot",
     margin: {
       l: 50,
+      t: 0,
       r: 50,
       b: 0,
     },
@@ -113,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
       })
@@ -123,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
       }
@@ -156,17 +156,9 @@ 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>",
     },
   ]

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,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>
           {study !== null && study.directions.length !== 1 ? (
             <FormControl component="fieldset" className={classes.formControl}>
               <FormLabel component="legend">Objective ID:</FormLabel>
@@ -94,7 +100,7 @@ export const GraphSlice: FC<{
           ) : null}
         </Grid>
       </Grid>
-      <Grid item xs={6}>
+      <Grid item xs={9}>
         <div id={plotDomId} />
       </Grid>
     </Grid>
@@ -111,10 +117,11 @@ const plotSlice = (
   }
 
   const layout: Partial<plotly.Layout> = {
-    title: "Slice",
     margin: {
       l: 50,
+      t: 0,
       r: 50,
+      b: 0,
     },
     xaxis: {
       title: selected || "",

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>