From eb09dc906a0633e539b11dc1fac806003dd7b46e Mon Sep 17 00:00:00 2001
From: c-bata <contact@c-bata.link>
Date: Sat, 7 Jan 2023 13:12:11 +0900
Subject: [PATCH] Refactor GraphEdf

---
 optuna_dashboard/ts/components/GraphEdf.tsx   | 19 +++++++++----------
 .../ts/components/StudyDetail.tsx             |  4 ++--
 .../ts/components/StudyDetailBeta.tsx         |  4 ++--
 optuna_dashboard/ts/trialFilter.ts            |  9 ++++++---
 4 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/optuna_dashboard/ts/components/GraphEdf.tsx b/optuna_dashboard/ts/components/GraphEdf.tsx
index c0a32cf9..34f88377 100644
--- a/optuna_dashboard/ts/components/GraphEdf.tsx
+++ b/optuna_dashboard/ts/components/GraphEdf.tsx
@@ -1,5 +1,5 @@
 import * as plotly from "plotly.js-dist-min"
-import React, { FC, useEffect, useState } from "react"
+import React, { FC, useEffect } from "react"
 import {
   Grid,
   FormControl,
@@ -16,23 +16,22 @@ import { Target, useFilteredTrials, useObjectiveTargets } from "../trialFilter"
 
 const plotDomId = "graph-edf"
 
-export const Edf: FC<{
+export const GraphEdf: FC<{
   study: StudyDetail | null
 }> = ({ study = null }) => {
   const theme = useTheme()
-  const [objectiveId, setObjectiveId] = useState<number>(0)
-  const targets = useObjectiveTargets(study)
-  const trials = useFilteredTrials(study, [targets[objectiveId]], false, false)
+  const [targets, selected, setTarget] = useObjectiveTargets(study)
+  const trials = useFilteredTrials(study, [selected], false, false)
 
   const handleObjectiveChange = (event: SelectChangeEvent<number>) => {
-    setObjectiveId(event.target.value as number)
+    setTarget(event.target.value as number)
   }
 
   useEffect(() => {
     if (study != null) {
-      plotEdf(trials, targets[objectiveId], theme.palette.mode)
+      plotEdf(trials, selected, theme.palette.mode)
     }
-  }, [trials, targets, objectiveId, theme.palette.mode])
+  }, [trials, selected, theme.palette.mode])
   return (
     <Grid container direction="row">
       <Grid
@@ -47,8 +46,8 @@ export const Edf: FC<{
         </Typography>
         {study !== null && study.directions.length !== 1 ? (
           <FormControl component="fieldset">
-            <FormLabel component="legend">Objective ID:</FormLabel>
-            <Select value={objectiveId} onChange={handleObjectiveChange}>
+            <FormLabel component="legend">Objective:</FormLabel>
+            <Select value={selected.getObjectiveId() || 0} onChange={handleObjectiveChange}>
               {targets.map((target, i) => (
                 <MenuItem value={i} key={i}>
                   {target.toLabel(study?.objective_names)}
diff --git a/optuna_dashboard/ts/components/StudyDetail.tsx b/optuna_dashboard/ts/components/StudyDetail.tsx
index b71d8591..8e15d58d 100644
--- a/optuna_dashboard/ts/components/StudyDetail.tsx
+++ b/optuna_dashboard/ts/components/StudyDetail.tsx
@@ -18,7 +18,7 @@ import Brightness7Icon from "@mui/icons-material/Brightness7"
 
 import { GraphParallelCoordinate } from "./GraphParallelCoordinate"
 import { GraphHyperparameterImportances } from "./GraphHyperparameterImportances"
-import { Edf } from "./GraphEdf"
+import { GraphEdf } from "./GraphEdf"
 import { Contour } from "./GraphContour"
 import { GraphIntermediateValues } from "./GraphIntermediateValues"
 import { GraphSlice } from "./GraphSlice"
@@ -200,7 +200,7 @@ export const StudyDetail: FC<{
           {graphVisibility.edf ? (
             <Card sx={{ margin: theme.spacing(2) }}>
               <CardContent>
-                <Edf study={studyDetail} />
+                <GraphEdf study={studyDetail} />
               </CardContent>
             </Card>
           ) : null}
diff --git a/optuna_dashboard/ts/components/StudyDetailBeta.tsx b/optuna_dashboard/ts/components/StudyDetailBeta.tsx
index a98c3d04..6c753dc1 100644
--- a/optuna_dashboard/ts/components/StudyDetailBeta.tsx
+++ b/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 { Edf } from "./GraphEdf"
+import { GraphEdf } from "./GraphEdf"
 import { TrialList } from "./TrialList"
 import { BestTrialsCard } from "./BestTrialsCard"
 
@@ -175,7 +175,7 @@ export const StudyDetailBeta: FC<{
         </Typography>
         <Card sx={{ margin: theme.spacing(2) }}>
           <CardContent>
-            <Edf study={studyDetail} />
+            <GraphEdf study={studyDetail} />
           </CardContent>
         </Card>
       </Box>
diff --git a/optuna_dashboard/ts/trialFilter.ts b/optuna_dashboard/ts/trialFilter.ts
index 204fa817..9128a330 100644
--- a/optuna_dashboard/ts/trialFilter.ts
+++ b/optuna_dashboard/ts/trialFilter.ts
@@ -1,4 +1,4 @@
-import { useMemo } from "react"
+import {useMemo, useState} from "react"
 import { mergeUnionSearchSpace } from "./searchSpace"
 
 type TargetKind = "objective" | "user_attr" | "params"
@@ -113,14 +113,17 @@ export const useFilteredTrials = (
     })
   }, [study?.trials, targets, filterComplete, filterPruned])
 
-export const useObjectiveTargets = (study: StudyDetail | null): Target[] =>
-  useMemo<Target[]>(() => {
+export const useObjectiveTargets = (study: StudyDetail | null): [Target[], Target, (index: number) => void] => {
+  const [targetIndex, setTargetIndex] = useState<number>(0)
+  const targetList = useMemo<Target[]>(() => {
     if (study !== null) {
       return study.directions.map((v, i) => new Target("objective", i))
     } else {
       return [new Target("objective", 0)]
     }
   }, [study?.directions])
+  return [targetList, targetList[targetIndex], setTargetIndex]
+}
 
 export const useParamTargets = (
   study: StudyDetail | null