Move the importance to history

optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx

@@ -13,6 +13,7 @@ import {
   Card,
   CardContent,
 } from "@mui/material"
+import Grid2 from "@mui/material/Unstable_Grid2"
 
 import { plotlyDarkTemplate } from "./PlotlyDarkMode"
 import { actionCreator } from "../action"
@@ -42,17 +43,29 @@ export const GraphHyperparameterImportanceBeta: FC<{
   }, [nObjectives, importances, theme.palette.mode])
 
   return (
-    <Grid container direction="row">
-      {Array.from({ length: nObjectives || 1 }, (_, i) => (
-        <Grid key={i} item xs={6}>
-          <Card sx={{ margin: theme.spacing(2) }}>
-            <CardContent>
-              <Box id={getPlotDomId(i)} sx={{ height: "450px" }} />
-            </CardContent>
-          </Card>
-        </Grid>
-      ))}
-    </Grid>
+    <>
+      {Array.from({ length: nObjectives || 1 }, (_, i) => {
+        let title = `Importance for the Objective Value`
+        if (nObjectives != null && nObjectives > 1) {
+          title = `Importance for the Objective ${i}`
+        }
+        return (
+          <Grid2 key={i} xs={6}>
+            <Card sx={{ margin: theme.spacing(2) }}>
+              <CardContent>
+                <Typography
+                  variant="h6"
+                  sx={{ margin: "1em 0", fontWeight: 600, textAlign: "center" }}
+                >
+                  {title}
+                </Typography>
+                <Box id={getPlotDomId(i)} sx={{ height: "450px" }} />
+              </CardContent>
+            </Card>
+          </Grid2>
+        )
+      })}
+    </>
   )
 }
 
@@ -60,9 +73,9 @@ const plotParamImportancesBeta = (
   importances: ParamImportance[][],
   mode: string
 ) => {
-  const getLayout = (title: string): Partial<plotly.Layout> => ({
+  const layout: Partial<plotly.Layout> = {
     xaxis: {
-      title: title,
+      title: "Hyperparameter Importance",
     },
     yaxis: {
       title: "Hyperparameter",
@@ -76,7 +89,7 @@ const plotParamImportancesBeta = (
     },
     showlegend: false,
     template: mode === "dark" ? plotlyDarkTemplate : {},
-  })
+  }
 
   importances.forEach((importance, objectiveId) => {
     if (document.getElementById(getPlotDomId(objectiveId)) === null) {
@@ -89,11 +102,6 @@ const plotParamImportancesBeta = (
     const param_hover_templates = reversed.map(
       (p) => `${p.name} (${p.distribution}): ${p.importance} <extra></extra>`
     )
-    let title = `Importance for the Objective Value`
-    if (importance.length > 1) {
-      title = `Importance for the Objective ${objectiveId}`
-    }
-    const layout = getLayout(title)
     const plotData: Partial<plotly.PlotData>[] = [
       {
         type: "bar",

optuna_dashboard/ts/components/StudyDetailBeta.tsx

@@ -32,6 +32,7 @@ import { GraphSlice } from "./GraphSlice"
 import { GraphParetoFront } from "./GraphParetoFront"
 import { DataGrid, DataGridColumn } from "./DataGrid"
 import { GraphIntermediateValues } from "./GraphIntermediateValues"
+import { Edf } from "./GraphEdf"
 
 interface ParamTypes {
   studyId: string
@@ -105,6 +106,10 @@ export const StudyDetailBeta: FC<{
           </Card>
         ) : null}
         <Grid2 container spacing={2}>
+          <GraphHyperparameterImportanceBeta
+            studyId={studyIdNumber}
+            study={studyDetail}
+          />
           <Grid2 xs={6}>
             <Card sx={{ margin: theme.spacing(2) }}>
               <CardContent
@@ -210,13 +215,6 @@ export const StudyDetailBeta: FC<{
   } else if (page === "analytics") {
     content = (
       <Box sx={{ display: "flex", width: "100%", flexDirection: "column" }}>
-        <Typography variant="h5" sx={{ margin: theme.spacing(2) }}>
-          Hyperparameter Importance
-        </Typography>
-        <GraphHyperparameterImportanceBeta
-          studyId={studyIdNumber}
-          study={studyDetail}
-        />
         <Typography variant="h5" sx={{ margin: theme.spacing(2) }}>
           Hyperparameter Relationships
         </Typography>
@@ -235,6 +233,14 @@ export const StudyDetailBeta: FC<{
             <Contour study={studyDetail} />
           </CardContent>
         </Card>
+        <Typography variant="h5" sx={{ margin: theme.spacing(2) }}>
+          Empirical Distribution of the Objective Value
+        </Typography>
+        <Card sx={{ margin: theme.spacing(2) }}>
+          <CardContent>
+            <Edf study={studyDetail} />
+          </CardContent>
+        </Card>
       </Box>
     )
   } else if (page === "trials") {