Merge pull request #351 from c-bata/refactor-graph-components

Improve graph components
2026-09-24 13:41:07 +08:00 · 2023-01-07 20:34:34 +09:00
parent 234649d5d9 23f85e8e00
commit dbda2b58af
9 changed files with 325 additions and 182 deletions
@@ -85,7 +85,7 @@ export const Contour: FC<{
        </Typography>
        {study !== null && study.directions.length !== 1 ? (
          <FormControl component="fieldset">
-            <FormLabel component="legend">Objective ID:</FormLabel>
+            <FormLabel component="legend">Objective:</FormLabel>
            <Select value={objectiveId} onChange={handleObjectiveChange}>
              {study.directions.map((d, i) => (
                <MenuItem value={i} key={i}>
@@ -1,5 +1,5 @@
 import * as plotly from "plotly.js-dist-min"
-import React, { FC, useEffect, useState } from "react"
+import React, { FC, useEffect, useMemo } from "react"
 import {
  Grid,
  FormControl,
@@ -15,24 +15,51 @@ import { plotlyDarkTemplate } from "./PlotlyDarkMode"
 import { Target, useFilteredTrials, useObjectiveTargets } from "../trialFilter"

 const plotDomId = "graph-edf"
+const getPlotDomId = (objectiveId: number) => `graph-edf-${objectiveId}`

-export const Edf: FC<{
+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
 }> = ({ 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)
+  const handleObjectiveChange = (event: SelectChangeEvent<string>) => {
+    setTarget(event.target.value)
  }

  useEffect(() => {
    if (study != null) {
-      plotEdf(trials, targets[objectiveId], theme.palette.mode)
+      plotEdf(trials, selected, plotDomId, theme.palette.mode)
    }
-  }, [trials, targets, objectiveId, theme.palette.mode])
+  }, [trials, selected, theme.palette.mode])
  return (
    <Grid container direction="row">
      <Grid
@@ -47,10 +74,13 @@ 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.identifier()}
+              onChange={handleObjectiveChange}
+            >
              {targets.map((target, i) => (
-                <MenuItem value={i} key={i}>
+                <MenuItem value={target.identifier()} key={i}>
                  {target.toLabel(study?.objective_names)}
                </MenuItem>
              ))}
@@ -65,12 +95,17 @@ export const Edf: 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
@@ -115,5 +150,5 @@ const plotEdf = (trials: Trial[], target: Target, mode: string) => {
      y: yValues,
    },
  ]
-  plotly.react(plotDomId, plotData, layout)
+  plotly.react(domId, plotData, layout)
 }
@@ -19,7 +19,7 @@ import { plotlyDarkTemplate } from "./PlotlyDarkMode"
 import {
  useFilteredTrials,
  Target,
-  useObjectiveAndSystemAttrTargets,
+  useObjectiveAndUserAttrTargets,
 } from "../trialFilter"

 const plotDomId = "graph-history"
@@ -33,12 +33,10 @@ export const GraphHistory: FC<{
  const [filterCompleteTrial, setFilterCompleteTrial] = useState<boolean>(false)
  const [filterPrunedTrial, setFilterPrunedTrial] = useState<boolean>(false)

-  const objectiveNames: string[] = study?.objective_names || []
-  const targetList = useObjectiveAndSystemAttrTargets(study)
-  const [targetIndex, setTargetIndex] = useState<number>(0)
+  const [targets, selected, setTarget] = useObjectiveAndUserAttrTargets(study)
  const trials = useFilteredTrials(
    study,
-    [targetList[targetIndex]],
+    [selected],
    filterCompleteTrial,
    filterPrunedTrial
  )
@@ -48,7 +46,7 @@ export const GraphHistory: FC<{
      plotHistory(
        trials,
        study.directions,
-        targetList[targetIndex],
+        selected,
        xAxis,
        logScale,
        theme.palette.mode
@@ -57,8 +55,7 @@ export const GraphHistory: FC<{
  }, [
    trials,
    study?.directions,
-    targetIndex,
-    targetList,
+    selected,
    logScale,
    xAxis,
    filterPrunedTrial,
@@ -66,8 +63,8 @@ export const GraphHistory: FC<{
    theme.palette.mode,
  ])

-  const handleObjectiveChange = (event: SelectChangeEvent<number>) => {
-    setTargetIndex(event.target.value as number)
+  const handleObjectiveChange = (event: SelectChangeEvent<string>) => {
+    setTarget(event.target.value)
  }

  const handleXAxisChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -98,16 +95,19 @@ export const GraphHistory: FC<{
        <Typography variant="h6" sx={{ margin: "1em 0", fontWeight: 600 }}>
          History
        </Typography>
-        {study !== null && targetList.length >= 2 ? (
+        {targets.length >= 2 ? (
          <FormControl
            component="fieldset"
            sx={{ marginBottom: theme.spacing(2) }}
          >
            <FormLabel component="legend">y Axis</FormLabel>
-            <Select value={targetIndex} onChange={handleObjectiveChange}>
-              {targetList.map((t, i) => (
-                <MenuItem value={i} key={i}>
-                  {t.toLabel(objectiveNames)}
+            <Select
+              value={selected.identifier()}
+              onChange={handleObjectiveChange}
+            >
+              {targets.map((t, i) => (
+                <MenuItem value={t.identifier()} key={i}>
+                  {t.toLabel(study?.objective_names)}
                </MenuItem>
              ))}
            </Select>
@@ -1,36 +1,98 @@
 import * as plotly from "plotly.js-dist-min"
-import React, { FC, useEffect, useState } from "react"
+import React, { FC, ReactNode, useEffect, useState } from "react"
 import {
-  Grid,
-  FormControl,
-  FormLabel,
-  MenuItem,
-  Select,
  Typography,
-  SelectChangeEvent,
  useTheme,
  Box,
+  Grid,
+  FormGroup,
+  FormControlLabel,
+  Checkbox,
 } from "@mui/material"
 import { plotlyDarkTemplate } from "./PlotlyDarkMode"
+import {
+  Target,
+  useFilteredTrials,
+  useObjectiveAndUserAttrTargets,
+  useParamTargets,
+} from "../trialFilter"
+import { useMergedUnionSearchSpace } from "../searchSpace"

 const plotDomId = "graph-parallel-coordinate"

+const useTargets = (
+  study: StudyDetail | null
+): [Target[], SearchSpaceItem[], () => ReactNode] => {
+  const [targets1, _target1, _setter1] = useObjectiveAndUserAttrTargets(study)
+  const searchSpace = useMergedUnionSearchSpace(study?.union_search_space)
+  const [targets2, _target2, _setter2] = useParamTargets(searchSpace)
+  const [checked, setChecked] = useState<boolean[]>([true])
+
+  const allTargets = [...targets1, ...targets2]
+  useEffect(() => {
+    if (allTargets.length !== checked.length) {
+      setChecked(
+        allTargets.map((t) => {
+          if (t.kind !== "params" || study === null) {
+            return true
+          }
+          // By default, params that is not included in intersection search space should be disabled,
+          // otherwise all trials are filtered.
+          return (
+            study.intersection_search_space.find((s) => s.name === t.key) !==
+            undefined
+          )
+        })
+      )
+    }
+  }, [allTargets])
+
+  const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked(
+      checked.map((c, i) =>
+        i.toString() === event.target.name ? event.target.checked : c
+      )
+    )
+  }
+
+  const renderCheckBoxes = (): ReactNode => (
+    <FormGroup>
+      {allTargets.map((t, i) => {
+        return (
+          <FormControlLabel
+            key={i}
+            control={
+              <Checkbox
+                checked={checked.length > i ? checked[i] : true}
+                onChange={handleOnChange}
+                name={i.toString()}
+              />
+            }
+            label={t.toLabel(study?.objective_names)}
+          />
+        )
+      })}
+    </FormGroup>
+  )
+
+  const targets = allTargets.filter((t, i) =>
+    checked.length > i ? checked[i] : true
+  )
+  return [targets, searchSpace, renderCheckBoxes]
+}
+
 export const GraphParallelCoordinate: FC<{
  study: StudyDetail | null
 }> = ({ study = null }) => {
  const theme = useTheme()
-  const [objectiveId, setObjectiveId] = useState<number>(0)
-  const objectiveNames: string[] = study?.objective_names || []
-
-  const handleObjectiveChange = (event: SelectChangeEvent<number>) => {
-    setObjectiveId(event.target.value as number)
-  }
+  const [targets, searchSpace, renderCheckBoxes] = useTargets(study)

+  const trials = useFilteredTrials(study, targets, false, false)
  useEffect(() => {
    if (study !== null) {
-      plotCoordinate(study, objectiveId, theme.palette.mode)
+      plotCoordinate(study, trials, targets, searchSpace, theme.palette.mode)
    }
-  }, [study, objectiveId, theme.palette.mode])
+  }, [study, trials, targets, searchSpace, theme.palette.mode])

  return (
    <Grid container direction="row">
@@ -39,25 +101,16 @@ export const GraphParallelCoordinate: FC<{
        xs={3}
        container
        direction="column"
-        sx={{ paddingRight: theme.spacing(2) }}
+        sx={{
+          paddingRight: theme.spacing(2),
+          display: "flex",
+          flexDirection: "column",
+        }}
      >
        <Typography variant="h6" sx={{ margin: "1em 0", fontWeight: 600 }}>
          Parallel Coordinate
        </Typography>
-        {study !== null && study.directions.length !== 1 ? (
-          <FormControl component="fieldset">
-            <FormLabel component="legend">Objective ID:</FormLabel>
-            <Select value={objectiveId} onChange={handleObjectiveChange}>
-              {study.directions.map((d, i) => (
-                <MenuItem value={i} key={i}>
-                  {objectiveNames.length === study?.directions.length
-                    ? objectiveNames[i]
-                    : `${i}`}
-                </MenuItem>
-              ))}
-            </Select>
-          </FormControl>
-        ) : null}
+        {renderCheckBoxes()}
      </Grid>
      <Grid item xs={9}>
        <Box id={plotDomId} sx={{ height: "450px" }} />
@@ -66,23 +119,11 @@ export const GraphParallelCoordinate: FC<{
  )
 }

-const filterFunc = (trial: Trial, objectiveId: number): boolean => {
-  if (trial.state !== "Complete" && trial.state !== "Pruned") {
-    return false
-  }
-  if (trial.values === undefined) {
-    return false
-  }
-  return (
-    trial.values.length > objectiveId &&
-    trial.values[objectiveId] !== "inf" &&
-    trial.values[objectiveId] !== "-inf"
-  )
-}
-
 const plotCoordinate = (
  study: StudyDetail,
-  objectiveId: number,
+  trials: Trial[],
+  targets: Target[],
+  searchSpace: SearchSpaceItem[],
  mode: string
 ) => {
  if (document.getElementById(plotDomId) === null) {
@@ -98,14 +139,11 @@ const plotCoordinate = (
    },
    template: mode === "dark" ? plotlyDarkTemplate : {},
  }
-
-  if (study.trials.length === 0) {
+  if (trials.length === 0 || targets.length === 0) {
    plotly.react(plotDomId, [], layout)
    return
  }

-  const filteredTrials = study.trials.filter((t) => filterFunc(t, objectiveId))
-
  const maxLabelLength = 40
  const breakLength = maxLabelLength / 2
  const ellipsis = "…"
@@ -124,41 +162,58 @@ const plotCoordinate = (
      .join("")
  }

-  // Intersection param names
-  const objectiveValues: number[] = filteredTrials.map(
-    (t) => t.values![objectiveId] as number
-  )
-  const dimensions = [
-    {
-      label: "Objective value",
-      values: objectiveValues,
-      range: [Math.min(...objectiveValues), Math.max(...objectiveValues)],
-    },
-  ]
-  study.intersection_search_space.forEach((s) => {
-    const values: number[] = filteredTrials.map(
-      (t) => t.params.find((p) => p.name === s.name)!.param_internal_value
-    )
-    if (s.distribution.type !== "CategoricalDistribution") {
-      dimensions.push({
-        label: breakLabelIfTooLong(s.name),
+  const dimensions = targets.map((target) => {
+    if (target.kind === "objective" || target.kind === "user_attr") {
+      const values: number[] = trials.map(
+        (t) => target.getTargetValue(t) as number
+      )
+      return {
+        label: target.toLabel(study.objective_names),
        values: values,
        range: [Math.min(...values), Math.max(...values)],
-      })
+      }
    } else {
-      // categorical
-      const vocabArr: string[] = s.distribution.choices.map((c) => c.value)
-      const tickvals: number[] = vocabArr.map((v, i) => i)
-      dimensions.push({
-        label: breakLabelIfTooLong(s.name),
-        values: values,
-        range: [Math.min(...values), Math.max(...values)],
-        // @ts-ignore
-        tickvals: tickvals,
-        ticktext: vocabArr,
-      })
+      const s = searchSpace.find(
+        (s) => s.name === target.key
+      ) as SearchSpaceItem // Must be already filtered.
+
+      const values: number[] = trials.map(
+        (t) => target.getTargetValue(t) as number
+      )
+      if (s.distribution.type !== "CategoricalDistribution") {
+        return {
+          label: breakLabelIfTooLong(s.name),
+          values: values,
+          range: [s.distribution.low, s.distribution.high],
+        }
+      } else {
+        // categorical
+        const vocabArr: string[] = s.distribution.choices.map((c) => c.value)
+        const tickvals: number[] = vocabArr.map((v, i) => i)
+        return {
+          label: breakLabelIfTooLong(s.name),
+          values: values,
+          range: [0, s.distribution.choices.length - 1],
+          // @ts-ignore
+          tickvals: tickvals,
+          ticktext: vocabArr,
+        }
+      }
    }
  })
+  if (dimensions.length === 0) {
+    console.log("Must not reach here.")
+    plotly.react(plotDomId, [], layout)
+    return
+  }
+  let reversescale = false
+  if (
+    targets[0].kind === "objective" &&
+    (targets[0].getObjectiveId() as number) < study.directions.length &&
+    study.directions[targets[0].getObjectiveId() as number] === "maximize"
+  ) {
+    reversescale = true
+  }
  const plotData: Partial<plotly.PlotData>[] = [
    {
      type: "parcoords",
@@ -170,10 +225,10 @@ const plotCoordinate = (
        // @ts-ignore
        colorscale: "Blues",
        colorbar: {
-          title: "Objective value",
+          title: targets[0].toLabel(study.objective_names),
        },
        showscale: true,
-        reversescale: study.directions[objectiveId] === "maximize",
+        reversescale: reversescale,
      },
    },
  ]
@@ -52,7 +52,7 @@ export const GraphParetoFront: FC<{
        {study !== null && study.directions.length !== 1 ? (
          <>
            <FormControl component="fieldset">
-              <FormLabel component="legend">Objective X ID:</FormLabel>
+              <FormLabel component="legend">Objective X:</FormLabel>
              <Select value={objectiveXId} onChange={handleObjectiveXChange}>
                {study.directions.map((d, i) => (
                  <MenuItem value={i} key={i}>
@@ -64,7 +64,7 @@ export const GraphParetoFront: FC<{
              </Select>
            </FormControl>
            <FormControl component="fieldset">
-              <FormLabel component="legend">Objective Y ID:</FormLabel>
+              <FormLabel component="legend">Objective Y:</FormLabel>
              <Select value={objectiveYId} onChange={handleObjectiveYChange}>
                {study.directions.map((d, i) => (
                  <MenuItem value={i} key={i}>
@@ -19,6 +19,7 @@ import {
  useObjectiveTargets,
  useParamTargets,
 } from "../trialFilter"
+import { useMergedUnionSearchSpace } from "../searchSpace"

 const plotDomId = "graph-slice"

@@ -34,42 +35,46 @@ export const GraphSlice: FC<{
 }> = ({ study = null }) => {
  const theme = useTheme()

-  const [objectiveId, setObjectiveId] = useState<number>(0)
-  const objectiveTargets = useObjectiveTargets(study)
-  const [paramTargetsIndex, setParamTargetsIndex] = useState<number>(0)
-  const [paramTargets, searchSpace] = useParamTargets(study)
+  const [objectiveTargets, selectedObjective, setObjectiveTarget] =
+    useObjectiveTargets(study)
+  const searchSpace = useMergedUnionSearchSpace(study?.union_search_space)
+  const [paramTargets, selectedParamTarget, setParamTarget] =
+    useParamTargets(searchSpace)
  const [logYScale, setLogYScale] = useState<boolean>(false)

-  const filterTargets: Target[] = [objectiveTargets[objectiveId]]
-  if (paramTargets.length > paramTargetsIndex)
-    filterTargets.push(paramTargets[paramTargetsIndex])
-  const trials = useFilteredTrials(study, filterTargets, false, false)
+  const trials = useFilteredTrials(
+    study,
+    selectedParamTarget !== null
+      ? [selectedObjective, selectedParamTarget]
+      : [selectedObjective],
+    false,
+    false
+  )

  useEffect(() => {
    plotSlice(
      trials,
-      objectiveTargets[objectiveId],
-      searchSpace.length > paramTargetsIndex
-        ? searchSpace[paramTargetsIndex]
-        : null,
+      selectedObjective,
+      selectedParamTarget,
+      searchSpace.find((s) => s.name === selectedParamTarget?.key) || null,
      logYScale,
      theme.palette.mode
    )
  }, [
    trials,
-    objectiveTargets[objectiveId],
+    selectedObjective,
    searchSpace,
-    paramTargetsIndex,
+    selectedParamTarget,
    logYScale,
    theme.palette.mode,
  ])

-  const handleObjectiveChange = (event: SelectChangeEvent<number>) => {
-    setObjectiveId(event.target.value as number)
+  const handleObjectiveChange = (event: SelectChangeEvent<string>) => {
+    setObjectiveTarget(event.target.value)
  }

-  const handleSelectedParam = (e: SelectChangeEvent<number>) => {
-    setParamTargetsIndex(e.target.value as number)
+  const handleSelectedParam = (e: SelectChangeEvent<string>) => {
+    setParamTarget(e.target.value)
  }

  const handleLogYScaleChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -90,22 +95,28 @@ export const GraphSlice: 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={selectedObjective.identifier()}
+              onChange={handleObjectiveChange}
+            >
              {objectiveTargets.map((t, i) => (
-                <MenuItem value={i} key={i}>
+                <MenuItem value={t.identifier()} key={i}>
                  {t.toLabel(study?.objective_names)}
                </MenuItem>
              ))}
            </Select>
          </FormControl>
        )}
-        {paramTargets.length !== 0 && paramTargetsIndex !== null && (
+        {paramTargets.length !== 0 && selectedParamTarget !== null && (
          <FormControl component="fieldset">
            <FormLabel component="legend">Parameter:</FormLabel>
-            <Select value={paramTargetsIndex} onChange={handleSelectedParam}>
+            <Select
+              value={selectedParamTarget.identifier()}
+              onChange={handleSelectedParam}
+            >
              {paramTargets.map((t, i) => (
-                <MenuItem value={i} key={i}>
+                <MenuItem value={t.identifier()} key={i}>
                  {t.toLabel()}
                </MenuItem>
              ))}
@@ -131,7 +142,8 @@ export const GraphSlice: FC<{
 const plotSlice = (
  trials: Trial[],
  objectiveTarget: Target,
-  selected: SearchSpaceItem | null,
+  selectedParamTarget: Target | null,
+  selectedParamSpace: SearchSpaceItem | null,
  logYScale: boolean,
  mode: string
 ) => {
@@ -147,8 +159,11 @@ const plotSlice = (
      b: 0,
    },
    xaxis: {
-      title: selected?.name || "",
-      type: selected !== null && isLogScale(selected) ? "log" : "linear",
+      title: selectedParamTarget?.toLabel() || "",
+      type:
+        selectedParamSpace !== null && isLogScale(selectedParamSpace)
+          ? "log"
+          : "linear",
      gridwidth: 1,
      automargin: true,
    },
@@ -161,11 +176,11 @@ const plotSlice = (
    showlegend: false,
    template: mode === "dark" ? plotlyDarkTemplate : {},
  }
-  if (selected === null) {
-    plotly.react(plotDomId, [], layout)
-    return
-  }
-  if (trials.length === 0) {
+  if (
+    selectedParamSpace === null ||
+    selectedParamTarget === null ||
+    trials.length === 0
+  ) {
    plotly.react(plotDomId, [], layout)
    return
  }
@@ -173,11 +188,12 @@ const plotSlice = (
  const objectiveValues: number[] = trials.map(
    (t) => objectiveTarget.getTargetValue(t) as number
  )
-  const paramTarget = new Target("params", selected.name)
-  const values = trials.map((t) => paramTarget.getTargetValue(t) as number)
+  const values = trials.map(
+    (t) => selectedParamTarget.getTargetValue(t) as number
+  )

  const trialNumbers: number[] = trials.map((t) => t.number)
-  if (selected.distribution.type !== "CategoricalDistribution") {
+  if (selectedParamSpace.distribution.type !== "CategoricalDistribution") {
    const trace: plotly.Data[] = [
      {
        type: "scatter",
@@ -199,14 +215,14 @@ const plotSlice = (
      },
    ]
    layout["xaxis"] = {
-      title: selected.name,
-      type: selected.distribution.log ? "log" : "linear",
+      title: selectedParamTarget.toLabel(),
+      type: isLogScale(selectedParamSpace) ? "log" : "linear",
      gridwidth: 1,
      automargin: true, // Otherwise the label is outside of the plot
    }
    plotly.react(plotDomId, trace, layout)
  } else {
-    const vocabArr = selected.distribution.choices.map((c) => c.value)
+    const vocabArr = selectedParamSpace.distribution.choices.map((c) => c.value)
    const tickvals: number[] = vocabArr.map((v, i) => i)
    const trace: plotly.Data[] = [
      {
@@ -229,7 +245,7 @@ const plotSlice = (
      },
    ]
    layout["xaxis"] = {
-      title: selected.name,
+      title: selectedParamTarget.toLabel(),
      type: "linear",
      gridwidth: 1,
      tickvals: tickvals,
@@ -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}
@@ -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 { 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>
-            <Edf 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") {
@@ -1,5 +1,4 @@
-import { useMemo } from "react"
-import { mergeUnionSearchSpace } from "./searchSpace"
+import { useMemo, useState } from "react"

 type TargetKind = "objective" | "user_attr" | "params"

@@ -29,6 +28,10 @@ export class Target {
    return true
  }

+  identifier(): string {
+    return `${this.kind}:${this.key}`
+  }
+
  toLabel(objectiveNames?: string[]): string {
    if (this.kind === "objective") {
      const objectiveId: number = this.key as number
@@ -113,32 +116,52 @@ 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, (ident: string) => void] => {
+  const defaultTarget = new Target("objective", 0)
+  const [selected, setTargetIdent] = useState<string>(
+    defaultTarget.identifier()
+  )
+  const targetList = useMemo<Target[]>(() => {
    if (study !== null) {
      return study.directions.map((v, i) => new Target("objective", i))
    } else {
-      return [new Target("objective", 0)]
+      return [defaultTarget]
    }
  }, [study?.directions])
+  const selectedTarget = useMemo<Target>(
+    () => targetList.find((t) => t.identifier() === selected) || defaultTarget,
+    [targetList, selected]
+  )
+  return [targetList, selectedTarget, setTargetIdent]
+}

 export const useParamTargets = (
-  study: StudyDetail | null
-): [Target[], SearchSpaceItem[]] =>
-  useMemo<[Target[], SearchSpaceItem[]]>(() => {
-    if (study !== null) {
-      const searchSpace = mergeUnionSearchSpace(study.union_search_space)
-      const targets = searchSpace.map((s) => new Target("params", s.name))
-      return [targets, searchSpace]
-    } else {
-      return [[], []]
-    }
-  }, [study?.union_search_space])
+  searchSpace: SearchSpaceItem[]
+): [Target[], Target | null, (ident: string) => void] => {
+  const [selected, setTargetIdent] = useState<string>("")
+  const targetList = useMemo<Target[]>(() => {
+    const targets = searchSpace.map((s) => new Target("params", s.name))
+    if (selected === "" && targets.length > 0)
+      setTargetIdent(targets[0].identifier())
+    return targets
+  }, [searchSpace])
+  const selectedTarget = useMemo<Target | null>(
+    () => targetList.find((t) => t.identifier() === selected) || null,
+    [targetList, selected]
+  )
+  return [targetList, selectedTarget, setTargetIdent]
+}

-export const useObjectiveAndSystemAttrTargets = (
+export const useObjectiveAndUserAttrTargets = (
  study: StudyDetail | null
-): Target[] =>
-  useMemo<Target[]>(() => {
+): [Target[], Target, (ident: string) => void] => {
+  const defaultTarget = new Target("objective", 0)
+  const [selected, setTargetIdent] = useState<string>(
+    defaultTarget.identifier()
+  )
+  const targetList = useMemo<Target[]>(() => {
    if (study !== null) {
      return [
        ...study.directions.map((v, i) => new Target("objective", i)),
@@ -147,6 +170,12 @@ export const useObjectiveAndSystemAttrTargets = (
          .map((attr) => new Target("user_attr", attr.key)),
      ]
    } else {
-      return [new Target("objective", 0)]
+      return [defaultTarget]
    }
  }, [study?.directions, study?.union_user_attrs])
+  const selectedTarget = useMemo<Target>(
+    () => targetList.find((t) => t.identifier() === selected) || defaultTarget,
+    [targetList, selected]
+  )
+  return [targetList, selectedTarget, setTargetIdent]
+}