Plot EDF for every objectives by default

optuna_dashboard/ts/components/GraphEdf.tsx

@@ -1,5 +1,5 @@
 import * as plotly from "plotly.js-dist-min"
-import React, { FC, useEffect } from "react"
+import React, { FC, useEffect, useMemo } from "react"
 import {
   Grid,
   FormControl,
@@ -15,6 +15,34 @@ import { plotlyDarkTemplate } from "./PlotlyDarkMode"
 import { Target, useFilteredTrials, useObjectiveTargets } from "../trialFilter"
 
 const plotDomId = "graph-edf"
+const getPlotDomId = (objectiveId: number) => `graph-edf-${objectiveId}`
+
+export const GraphEdfBeta: FC<{
+  study: StudyDetail | null
+  objectiveId: number
+}> = ({ study, objectiveId }) => {
+  const theme = useTheme()
+  const domId = getPlotDomId(objectiveId)
+  const target = useMemo<Target>(
+    () => new Target("objective", objectiveId),
+    [objectiveId]
+  )
+  const trials = useFilteredTrials(study, [target], false, false)
+
+  useEffect(() => {
+    if (study !== null) {
+      plotEdf(trials, target, domId, theme.palette.mode)
+    }
+  }, [trials, target, domId, theme.palette.mode])
+  return (
+    <Box>
+      <Typography variant="h6" sx={{ margin: "1em 0", fontWeight: 600 }}>
+        {`EDF for ${target.toLabel(study?.objective_names)}`}
+      </Typography>
+      <Box id={domId} sx={{ height: "450px" }} />
+    </Box>
+  )
+}
 
 export const GraphEdf: FC<{
   study: StudyDetail | null
@@ -29,7 +57,7 @@ export const GraphEdf: FC<{
 
   useEffect(() => {
     if (study != null) {
-      plotEdf(trials, selected, theme.palette.mode)
+      plotEdf(trials, selected, plotDomId, theme.palette.mode)
     }
   }, [trials, selected, theme.palette.mode])
   return (
@@ -67,12 +95,17 @@ export const GraphEdf: FC<{
   )
 }
 
-const plotEdf = (trials: Trial[], target: Target, mode: string) => {
-  if (document.getElementById(plotDomId) === null) {
+const plotEdf = (
+  trials: Trial[],
+  target: Target,
+  domId: string,
+  mode: string
+) => {
+  if (document.getElementById(domId) === null) {
     return
   }
   if (trials.length === 0) {
-    plotly.react(plotDomId, [], {
+    plotly.react(domId, [], {
       template: mode === "dark" ? plotlyDarkTemplate : {},
     })
     return
@@ -117,5 +150,5 @@ const plotEdf = (trials: Trial[], target: Target, mode: string) => {
       y: yValues,
     },
   ]
-  plotly.react(plotDomId, plotData, layout)
+  plotly.react(domId, plotData, layout)
 }

optuna_dashboard/ts/components/StudyDetailBeta.tsx

@@ -32,7 +32,7 @@ import { GraphSlice } from "./GraphSlice"
 import { GraphParetoFront } from "./GraphParetoFront"
 import { DataGrid, DataGridColumn } from "./DataGrid"
 import { GraphIntermediateValues } from "./GraphIntermediateValues"
-import { GraphEdf } from "./GraphEdf"
+import { GraphEdfBeta } from "./GraphEdf"
 import { TrialList } from "./TrialList"
 import { BestTrialsCard } from "./BestTrialsCard"
 
@@ -173,11 +173,19 @@ export const StudyDetailBeta: FC<{
         <Typography variant="h5" sx={{ margin: theme.spacing(2) }}>
           Empirical Distribution of the Objective Value
         </Typography>
-        <Card sx={{ margin: theme.spacing(2) }}>
-          <CardContent>
-            <GraphEdf study={studyDetail} />
-          </CardContent>
-        </Card>
+        <Grid2 container spacing={2} sx={{ padding: theme.spacing(0, 2) }}>
+          {studyDetail !== null
+            ? studyDetail.directions.map((d, i) => (
+                <Grid2 xs={6} key={i}>
+                  <Card>
+                    <CardContent>
+                      <GraphEdfBeta study={studyDetail} objectiveId={i} />
+                    </CardContent>
+                  </Card>
+                </Grid2>
+              ))
+            : null}
+        </Grid2>
       </Box>
     )
   } else if (page === "trialTable") {