Modify the code following changes

optuna_dashboard/ts/components/GraphContour.tsx

@@ -12,12 +12,12 @@ import {
   useTheme,
 } from "@mui/material"
 import blue from "@mui/material/colors/blue"
+import { GraphContainer, useGraphComponentState } from "@optuna/react"
 import * as plotly from "plotly.js-dist-min"
 import React, { FC, useEffect, useMemo, useState } from "react"
 import { SearchSpaceItem, StudyDetail, Trial } from "ts/types/optuna"
 import { PlotType } from "../apiClient"
 import { getAxisInfo } from "../graphUtil"
-import { useGraphComponentState, GraphContainer } from "@optuna/react"
 import { usePlot } from "../hooks/usePlot"
 import { useMergedUnionSearchSpace } from "../searchSpace"
 import { usePlotlyColorTheme } from "../state"

optuna_dashboard/ts/components/GraphHistory.tsx

@@ -13,23 +13,23 @@ import {
   Typography,
   useTheme,
 } from "@mui/material"
-import * as Optuna from "@optuna/types"
-import * as plotly from "plotly.js-dist-min"
-import React, { ChangeEvent, FC, useEffect, useState } from "react"
-import { useNavigate } from "react-router-dom"
-import { StudyDetail, Trial } from "ts/types/optuna"
-import { usePlotlyColorTheme } from "../state"
 import {
   Target,
   useFilteredTrialsFromStudies,
   useObjectiveAndUserAttrTargetsFromStudies,
-} from "../trialFilter"
+} from "@optuna/react"
+import * as Optuna from "@optuna/types"
+import * as plotly from "plotly.js-dist-min"
+import React, { ChangeEvent, FC, useEffect, useState } from "react"
+import { useNavigate } from "react-router-dom"
+import { StudyDetail } from "ts/types/optuna"
+import { usePlotlyColorTheme } from "../state"
 
 const plotDomId = "graph-history"
 
 interface HistoryPlotInfo {
   study_name: string
-  trials: Trial[]
+  trials: Optuna.Trial[]
   directions: Optuna.StudyDirection[]
   objective_names?: string[]
 }
@@ -265,7 +265,7 @@ const plotHistory = (
     },
   }
 
-  const getAxisX = (trial: Trial): number | Date => {
+  const getAxisX = (trial: Optuna.Trial): number | Date => {
     return xAxis === "number"
       ? trial.number
       : xAxis === "datetime_start"
@@ -276,8 +276,8 @@ const plotHistory = (
   const plotData: Partial<plotly.PlotData>[] = []
   const infeasiblePlotData: Partial<plotly.PlotData>[] = []
   historyPlotInfos.forEach((h) => {
-    const feasibleTrials: Trial[] = []
-    const infeasibleTrials: Trial[] = []
+    const feasibleTrials: Optuna.Trial[] = []
+    const infeasibleTrials: Optuna.Trial[] = []
     h.trials.forEach((t) => {
       if (t.constraints.every((c) => c <= 0)) {
         feasibleTrials.push(t)
@@ -288,7 +288,7 @@ const plotHistory = (
     plotData.push({
       x: feasibleTrials.map(getAxisX),
       y: feasibleTrials.map(
-        (t: Trial): number => target.getTargetValue(t) as number
+        (t: Optuna.Trial): number => target.getTargetValue(t) as number
       ),
       name: `${target.toLabel(h.objective_names)} of ${h.study_name}`,
       marker: {
@@ -353,7 +353,7 @@ const plotHistory = (
     infeasiblePlotData.push({
       x: infeasibleTrials.map(getAxisX),
       y: infeasibleTrials.map(
-        (t: Trial): number => target.getTargetValue(t) as number
+        (t: Optuna.Trial): number => target.getTargetValue(t) as number
       ),
       name: `Infeasible Trial of ${h.study_name}`,
       marker: {

optuna_dashboard/ts/components/GraphParallelCoordinate.tsx

@@ -6,21 +6,22 @@ import {
   Typography,
   useTheme,
 } from "@mui/material"
-import * as plotly from "plotly.js-dist-min"
-import React, { FC, ReactNode, useEffect, useState } from "react"
-import { SearchSpaceItem, StudyDetail, Trial } from "ts/types/optuna"
-import { PlotType } from "../apiClient"
-import { useGraphComponentState, GraphContainer } from "@optuna/react"
-import { usePlot } from "../hooks/usePlot"
-import { useMergedUnionSearchSpace } from "../searchSpace"
-import { usePlotlyColorTheme } from "../state"
-import { useBackendRender } from "../state"
+import { GraphContainer, useGraphComponentState } from "@optuna/react"
 import {
   Target,
   useFilteredTrials,
   useObjectiveAndUserAttrTargets,
   useParamTargets,
-} from "../trialFilter"
+} from "@optuna/react"
+import * as Optuna from "@optuna/types"
+import * as plotly from "plotly.js-dist-min"
+import React, { FC, ReactNode, useEffect, useState } from "react"
+import { SearchSpaceItem, StudyDetail } from "ts/types/optuna"
+import { PlotType } from "../apiClient"
+import { usePlot } from "../hooks/usePlot"
+import { useMergedUnionSearchSpace } from "../searchSpace"
+import { usePlotlyColorTheme } from "../state"
+import { useBackendRender } from "../state"
 
 const plotDomId = "graph-parallel-coordinate"
 
@@ -184,7 +185,7 @@ const GraphParallelCoordinateFrontend: FC<{
 
 const plotCoordinate = (
   study: StudyDetail,
-  trials: Trial[],
+  trials: Optuna.Trial[],
   targets: Target[],
   searchSpace: SearchSpaceItem[],
   colorTheme: Partial<Plotly.Template>

optuna_dashboard/ts/components/GraphRank.tsx

@@ -8,12 +8,12 @@ import {
   Typography,
   useTheme,
 } from "@mui/material"
+import { GraphContainer, useGraphComponentState } from "@optuna/react"
 import * as plotly from "plotly.js-dist-min"
 import React, { FC, useEffect, useState } from "react"
 import { SearchSpaceItem, StudyDetail, Trial } from "ts/types/optuna"
 import { PlotType } from "../apiClient"
 import { getAxisInfo, makeHovertext } from "../graphUtil"
-import { useGraphComponentState, GraphContainer } from "@optuna/react"
 import { usePlot } from "../hooks/usePlot"
 import { useMergedUnionSearchSpace } from "../searchSpace"
 import { useBackendRender, usePlotlyColorTheme } from "../state"

optuna_dashboard/ts/components/GraphSlice.tsx

@@ -9,20 +9,21 @@ import {
   Typography,
   useTheme,
 } from "@mui/material"
-import * as plotly from "plotly.js-dist-min"
-import React, { FC, useEffect, useState } from "react"
-import { SearchSpaceItem, StudyDetail, Trial } from "ts/types/optuna"
-import { PlotType } from "../apiClient"
-import { useGraphComponentState, GraphContainer } from "@optuna/react"
-import { usePlot } from "../hooks/usePlot"
-import { useMergedUnionSearchSpace } from "../searchSpace"
-import { useBackendRender, usePlotlyColorTheme } from "../state"
+import { GraphContainer, useGraphComponentState } from "@optuna/react"
 import {
   Target,
   useFilteredTrials,
   useObjectiveAndUserAttrTargets,
   useParamTargets,
-} from "../trialFilter"
+} from "@optuna/react"
+import * as Optuna from "@optuna/types"
+import * as plotly from "plotly.js-dist-min"
+import React, { FC, useEffect, useState } from "react"
+import { SearchSpaceItem, StudyDetail } from "ts/types/optuna"
+import { PlotType } from "../apiClient"
+import { usePlot } from "../hooks/usePlot"
+import { useMergedUnionSearchSpace } from "../searchSpace"
+import { useBackendRender, usePlotlyColorTheme } from "../state"
 
 const plotDomId = "graph-slice"
 
@@ -198,7 +199,7 @@ const GraphSliceFrontend: FC<{
 }
 
 const plotSlice = (
-  trials: Trial[],
+  trials: Optuna.Trial[],
   objectiveTarget: Target,
   selectedParamTarget: Target | null,
   selectedParamSpace: SearchSpaceItem | null,
@@ -243,8 +244,8 @@ const plotSlice = (
     return plotly.react(plotDomId, [], layout)
   }
 
-  const feasibleTrials: Trial[] = []
-  const infeasibleTrials: Trial[] = []
+  const feasibleTrials: Optuna.Trial[] = []
+  const infeasibleTrials: Optuna.Trial[] = []
   trials.forEach((t) => {
     if (t.constraints.every((c) => c <= 0)) {
       feasibleTrials.push(t)