diff --git a/optuna_dashboard/ts/components/GraphContour.tsx b/optuna_dashboard/ts/components/GraphContour.tsx
index 11ccf617..002950d2 100644
--- a/optuna_dashboard/ts/components/GraphContour.tsx
+++ b/optuna_dashboard/ts/components/GraphContour.tsx
@@ -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}>
diff --git a/optuna_dashboard/ts/components/GraphEdf.tsx b/optuna_dashboard/ts/components/GraphEdf.tsx
index c0a32cf9..0a341619 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, 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)
 }
diff --git a/optuna_dashboard/ts/components/GraphHistory.tsx b/optuna_dashboard/ts/components/GraphHistory.tsx
index 8c38fc48..ef61b261 100644
--- a/optuna_dashboard/ts/components/GraphHistory.tsx
+++ b/optuna_dashboard/ts/components/GraphHistory.tsx
@@ -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>
diff --git a/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx b/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx
index 7347f42e..7b953906 100644
--- a/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx
+++ b/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx
@@ -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,
       },
     },
   ]
diff --git a/optuna_dashboard/ts/components/GraphParetoFront.tsx b/optuna_dashboard/ts/components/GraphParetoFront.tsx
index 22c4007c..54f49d0e 100644
--- a/optuna_dashboard/ts/components/GraphParetoFront.tsx
+++ b/optuna_dashboard/ts/components/GraphParetoFront.tsx
@@ -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}>
diff --git a/optuna_dashboard/ts/components/GraphSlice.tsx b/optuna_dashboard/ts/components/GraphSlice.tsx
index 4b8f8021..3afd0aa6 100644
--- a/optuna_dashboard/ts/components/GraphSlice.tsx
+++ b/optuna_dashboard/ts/components/GraphSlice.tsx
@@ -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,
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..9e2f8f73 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 { 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") {
diff --git a/optuna_dashboard/ts/trialFilter.ts b/optuna_dashboard/ts/trialFilter.ts
index 204fa817..e3424956 100644
--- a/optuna_dashboard/ts/trialFilter.ts
+++ b/optuna_dashboard/ts/trialFilter.ts
@@ -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]
+}