From 1080b8a380821ac7fbbf5eb43963817728f4d470 Mon Sep 17 00:00:00 2001
From: porink0424 <daichi2120@gmail.com>
Date: Wed, 17 Apr 2024 12:03:18 +0900
Subject: [PATCH] Update type def file

---
 optuna_dashboard/ts/action.ts                 |  1 +
 optuna_dashboard/ts/apiClient.ts              |  1 +
 optuna_dashboard/ts/components/App.tsx        |  2 +
 optuna_dashboard/ts/components/AppDrawer.tsx  |  1 +
 .../components/Artifact/ArtifactCardMedia.tsx |  2 +
 .../Artifact/DeleteArtifactDialog.tsx         |  1 +
 .../Artifact/StudyArtifactCards.tsx           |  3 +-
 .../Artifact/ThreejsArtifactViewer.tsx        |  2 +
 .../Artifact/TrialArtifactCards.tsx           |  3 +-
 .../ts/components/BestTrialsCard.tsx          |  2 +
 .../ts/components/CompareStudies.tsx          |  1 +
 .../ts/components/CreateStudyDialog.tsx       |  1 +
 .../ts/components/GraphContour.tsx            |  1 +
 optuna_dashboard/ts/components/GraphEdf.tsx   |  1 +
 .../ts/components/GraphHistory.tsx            |  1 +
 .../GraphHyperparameterImportances.tsx        |  5 +-
 .../ts/components/GraphIntermediateValues.tsx |  1 +
 .../ts/components/GraphParallelCoordinate.tsx |  1 +
 .../ts/components/GraphParetoFront.tsx        |  1 +
 optuna_dashboard/ts/components/GraphRank.tsx  |  1 +
 optuna_dashboard/ts/components/GraphSlice.tsx |  1 +
 .../ts/components/GraphTimeline.tsx           |  1 +
 optuna_dashboard/ts/components/Note.tsx       |  6 +++
 .../Preferential/PreferentialGraph.tsx        |  2 +
 .../Preferential/PreferentialHistory.tsx      |  8 +++
 .../PreferentialOutputComponent.tsx           |  1 +
 .../Preferential/PreferentialTrials.tsx       | 13 +++--
 .../ts/components/RenameStudyDialog.tsx       |  1 +
 optuna_dashboard/ts/components/Settings.tsx   |  1 +
 .../ts/components/StudyDetail.tsx             |  1 +
 .../ts/components/StudyHistory.tsx            |  1 +
 optuna_dashboard/ts/components/StudyList.tsx  | 15 +++---
 .../ts/components/TrialFormWidgets.tsx        |  1 +
 optuna_dashboard/ts/components/TrialList.tsx  |  1 +
 optuna_dashboard/ts/components/TrialTable.tsx |  1 +
 .../ts/components/UserDefinedPlot.tsx         |  3 +-
 optuna_dashboard/ts/dominatedTrials.ts        |  1 +
 optuna_dashboard/ts/graphUtil.ts              |  7 ++-
 .../ts/hooks/useParamImportance.ts            |  1 +
 optuna_dashboard/ts/searchSpace.ts            |  8 +--
 optuna_dashboard/ts/state.ts                  |  1 +
 optuna_dashboard/ts/trialFilter.ts            |  1 +
 optuna_dashboard/ts/types/index.d.ts          | 52 +++++--------------
 43 files changed, 102 insertions(+), 58 deletions(-)

diff --git a/optuna_dashboard/ts/action.ts b/optuna_dashboard/ts/action.ts
index d906d1c5..43fd76a2 100644
--- a/optuna_dashboard/ts/action.ts
+++ b/optuna_dashboard/ts/action.ts
@@ -34,6 +34,7 @@ import {
   studySummariesLoadingState,
 } from "./state"
 import { getDominatedTrials } from "./dominatedTrials"
+import { Artifact, FeedbackComponentType, Note, StudyDetail, StudyDetails, StudySummary, Trial } from "./types"
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const actionCreator = () => {
diff --git a/optuna_dashboard/ts/apiClient.ts b/optuna_dashboard/ts/apiClient.ts
index 3177541b..1fd04ff4 100644
--- a/optuna_dashboard/ts/apiClient.ts
+++ b/optuna_dashboard/ts/apiClient.ts
@@ -1,6 +1,7 @@
 import * as plotly from "plotly.js-dist-min"
 import axios from "axios"
 import * as Optuna from "@optuna/types"
+import { API_ENDPOINT, Artifact, FeedbackComponentType, FormWidgets, Note, ParamImportance, PlotlyGraphObject, PreferenceFeedbackMode, PreferenceHistory, SearchSpaceItem, StudyDetail, StudySummary, Trial, TrialParam } from "./types"
 
 const axiosInstance = axios.create({ baseURL: API_ENDPOINT })
 
diff --git a/optuna_dashboard/ts/components/App.tsx b/optuna_dashboard/ts/components/App.tsx
index 7c0cbff6..090f78c0 100644
--- a/optuna_dashboard/ts/components/App.tsx
+++ b/optuna_dashboard/ts/components/App.tsx
@@ -16,6 +16,7 @@ import { CompareStudies } from "./CompareStudies"
 import { StudyDetail } from "./StudyDetail"
 import { StudyList } from "./StudyList"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { URL_PREFIX } from "ts/types"
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -55,6 +56,7 @@ export const App: FC = () => {
         <ThemeProvider theme={theme}>
           <CssBaseline />
           <Box
+            component="div"
             sx={{
               backgroundColor: colorMode === "dark" ? "#121212" : "#ffffff",
               width: "100%",
diff --git a/optuna_dashboard/ts/components/AppDrawer.tsx b/optuna_dashboard/ts/components/AppDrawer.tsx
index f0a31c8b..551a5137 100644
--- a/optuna_dashboard/ts/components/AppDrawer.tsx
+++ b/optuna_dashboard/ts/components/AppDrawer.tsx
@@ -41,6 +41,7 @@ import HistoryIcon from "@mui/icons-material/History"
 import LanIcon from "@mui/icons-material/Lan"
 import { Switch } from "@mui/material"
 import { actionCreator } from "../action"
+import { URL_PREFIX } from "ts/types"
 
 const drawerWidth = 240
 
diff --git a/optuna_dashboard/ts/components/Artifact/ArtifactCardMedia.tsx b/optuna_dashboard/ts/components/Artifact/ArtifactCardMedia.tsx
index fecef837..69586a4a 100644
--- a/optuna_dashboard/ts/components/Artifact/ArtifactCardMedia.tsx
+++ b/optuna_dashboard/ts/components/Artifact/ArtifactCardMedia.tsx
@@ -6,6 +6,7 @@ import {
 import { WaveSurferArtifactViewer } from "./WaveSurferArtifactViewer"
 import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile"
 import { CardMedia, Box } from "@mui/material"
+import { Artifact } from "ts/types"
 
 export const ArtifactCardMedia: FC<{
   artifact: Artifact
@@ -37,6 +38,7 @@ export const ArtifactCardMedia: FC<{
   } else if (artifact.mimetype.startsWith("audio")) {
     return (
       <Box
+        component="div"
         style={{
           width: "100%",
           height: height,
diff --git a/optuna_dashboard/ts/components/Artifact/DeleteArtifactDialog.tsx b/optuna_dashboard/ts/components/Artifact/DeleteArtifactDialog.tsx
index 4c2f16d1..26056ad9 100644
--- a/optuna_dashboard/ts/components/Artifact/DeleteArtifactDialog.tsx
+++ b/optuna_dashboard/ts/components/Artifact/DeleteArtifactDialog.tsx
@@ -8,6 +8,7 @@ import {
   DialogActions,
 } from "@mui/material"
 import { actionCreator } from "../../action"
+import { Artifact } from "ts/types"
 
 export const useDeleteTrialArtifactDialog = (): [
   (studyId: number, trialId: number, artifact: Artifact) => void,
diff --git a/optuna_dashboard/ts/components/Artifact/StudyArtifactCards.tsx b/optuna_dashboard/ts/components/Artifact/StudyArtifactCards.tsx
index 63b6686b..cf41b8a4 100644
--- a/optuna_dashboard/ts/components/Artifact/StudyArtifactCards.tsx
+++ b/optuna_dashboard/ts/components/Artifact/StudyArtifactCards.tsx
@@ -27,6 +27,7 @@ import {
   isThreejsArtifact,
 } from "./ThreejsArtifactViewer"
 import { ArtifactCardMedia } from "./ArtifactCardMedia"
+import { StudyDetail } from "ts/types"
 
 export const StudyArtifactCards: FC<{ study: StudyDetail }> = ({ study }) => {
   const theme = useTheme()
@@ -40,7 +41,7 @@ export const StudyArtifactCards: FC<{ study: StudyDetail }> = ({ study }) => {
 
   return (
     <>
-      <Box sx={{ display: "flex", flexWrap: "wrap", p: theme.spacing(1, 0) }}>
+      <Box component="div" sx={{ display: "flex", flexWrap: "wrap", p: theme.spacing(1, 0) }}>
         {study.artifacts.map((artifact) => {
           const urlPath = `/artifacts/${study.id}/${artifact.artifact_id}`
           return (
diff --git a/optuna_dashboard/ts/components/Artifact/ThreejsArtifactViewer.tsx b/optuna_dashboard/ts/components/Artifact/ThreejsArtifactViewer.tsx
index 70d2cccf..141ea49e 100644
--- a/optuna_dashboard/ts/components/Artifact/ThreejsArtifactViewer.tsx
+++ b/optuna_dashboard/ts/components/Artifact/ThreejsArtifactViewer.tsx
@@ -9,6 +9,7 @@ import { PerspectiveCamera } from "three"
 import { Modal, Box, useTheme } from "@mui/material"
 import ClearIcon from "@mui/icons-material/Clear"
 import IconButton from "@mui/material/IconButton"
+import { Artifact } from "ts/types"
 
 export const isThreejsArtifact = (artifact: Artifact): boolean => {
   return (
@@ -145,6 +146,7 @@ export const useThreejsArtifactModal = (): [
         }}
       >
         <Box
+          component="div"
           sx={{
             position: "absolute",
             top: "50%",
diff --git a/optuna_dashboard/ts/components/Artifact/TrialArtifactCards.tsx b/optuna_dashboard/ts/components/Artifact/TrialArtifactCards.tsx
index 301d96d0..efe85871 100644
--- a/optuna_dashboard/ts/components/Artifact/TrialArtifactCards.tsx
+++ b/optuna_dashboard/ts/components/Artifact/TrialArtifactCards.tsx
@@ -27,6 +27,7 @@ import {
   isThreejsArtifact,
 } from "./ThreejsArtifactViewer"
 import { ArtifactCardMedia } from "./ArtifactCardMedia"
+import { Trial } from "ts/types"
 
 export const TrialArtifactCards: FC<{ trial: Trial }> = ({ trial }) => {
   const theme = useTheme()
@@ -49,7 +50,7 @@ export const TrialArtifactCards: FC<{ trial: Trial }> = ({ trial }) => {
       >
         Artifacts
       </Typography>
-      <Box sx={{ display: "flex", flexWrap: "wrap", p: theme.spacing(1, 0) }}>
+      <Box component="div" sx={{ display: "flex", flexWrap: "wrap", p: theme.spacing(1, 0) }}>
         {trial.artifacts.map((artifact) => {
           const urlPath = `/artifacts/${trial.study_id}/${trial.trial_id}/${artifact.artifact_id}`
           return (
diff --git a/optuna_dashboard/ts/components/BestTrialsCard.tsx b/optuna_dashboard/ts/components/BestTrialsCard.tsx
index cb560921..255ba207 100644
--- a/optuna_dashboard/ts/components/BestTrialsCard.tsx
+++ b/optuna_dashboard/ts/components/BestTrialsCard.tsx
@@ -14,6 +14,7 @@ import {
 } from "@mui/material"
 import { Link } from "react-router-dom"
 import LinkIcon from "@mui/icons-material/Link"
+import { StudyDetail, Trial, URL_PREFIX } from "ts/types"
 
 const useBestTrials = (studyDetail: StudyDetail | null): Trial[] => {
   return useMemo(() => studyDetail?.best_trials || [], [studyDetail])
@@ -75,6 +76,7 @@ export const BestTrialsCard: FC<{
           orientation="horizontal"
         />
         <Box
+          component="div"
           sx={{
             overflow: "auto",
             height: "450px",
diff --git a/optuna_dashboard/ts/components/CompareStudies.tsx b/optuna_dashboard/ts/components/CompareStudies.tsx
index f53320e9..7dd26ffb 100644
--- a/optuna_dashboard/ts/components/CompareStudies.tsx
+++ b/optuna_dashboard/ts/components/CompareStudies.tsx
@@ -32,6 +32,7 @@ import { GraphEdf } from "./GraphEdf"
 import { GraphHistory } from "./GraphHistory"
 import { useNavigate } from "react-router-dom"
 import { useQuery } from "../urlQuery"
+import { StudyDetails, StudySummary, URL_PREFIX } from "ts/types"
 
 const useQueriedStudies = (
   studies: StudySummary[],
diff --git a/optuna_dashboard/ts/components/CreateStudyDialog.tsx b/optuna_dashboard/ts/components/CreateStudyDialog.tsx
index 8e7ee3bf..dce10b05 100644
--- a/optuna_dashboard/ts/components/CreateStudyDialog.tsx
+++ b/optuna_dashboard/ts/components/CreateStudyDialog.tsx
@@ -19,6 +19,7 @@ import { studySummariesState } from "../state"
 import RemoveIcon from "@mui/icons-material/Remove"
 import AddIcon from "@mui/icons-material/Add"
 import * as Optuna from "@optuna/types"
+import { StudySummary } from "ts/types"
 
 export const useCreateStudyDialog = (): [() => void, () => ReactNode] => {
   const theme = useTheme()
diff --git a/optuna_dashboard/ts/components/GraphContour.tsx b/optuna_dashboard/ts/components/GraphContour.tsx
index 140d9dc0..e866cf1f 100644
--- a/optuna_dashboard/ts/components/GraphContour.tsx
+++ b/optuna_dashboard/ts/components/GraphContour.tsx
@@ -20,6 +20,7 @@ import { getAxisInfo } from "../graphUtil"
 import { PlotType } from "../apiClient"
 import { useBackendRender } from "../state"
 import { usePlot } from "../hooks/usePlot"
+import { SearchSpaceItem, StudyDetail, Trial } from "ts/types"
 
 const plotDomId = "graph-contour"
 const CONTOUR_DISABLED_THRESHOLD = 100
diff --git a/optuna_dashboard/ts/components/GraphEdf.tsx b/optuna_dashboard/ts/components/GraphEdf.tsx
index 97523c66..55258b7b 100644
--- a/optuna_dashboard/ts/components/GraphEdf.tsx
+++ b/optuna_dashboard/ts/components/GraphEdf.tsx
@@ -4,6 +4,7 @@ import { Typography, useTheme, Box } from "@mui/material"
 import { Target, useFilteredTrialsFromStudies } from "../trialFilter"
 import { getCompareStudiesPlotAPI, CompareStudiesPlotType } from "../apiClient"
 import { usePlotlyColorTheme, useBackendRender } from "../state"
+import { StudyDetail, Trial } from "ts/types"
 
 const getPlotDomId = (objectiveId: number) => `graph-edf-${objectiveId}`
 
diff --git a/optuna_dashboard/ts/components/GraphHistory.tsx b/optuna_dashboard/ts/components/GraphHistory.tsx
index 37950d33..c06ea58e 100644
--- a/optuna_dashboard/ts/components/GraphHistory.tsx
+++ b/optuna_dashboard/ts/components/GraphHistory.tsx
@@ -23,6 +23,7 @@ import {
 import { usePlotlyColorTheme } from "../state"
 import { useNavigate } from "react-router-dom"
 import * as Optuna from "@optuna/types"
+import { StudyDetail, Trial, URL_PREFIX } from "ts/types"
 
 const plotDomId = "graph-history"
 
diff --git a/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx b/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx
index 12ef8d2c..2828ce44 100644
--- a/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx
+++ b/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx
@@ -10,6 +10,7 @@ import {
 } from "../state"
 import { PlotType } from "../apiClient"
 import { usePlot } from "../hooks/usePlot"
+import { ParamImportance, StudyDetail } from "ts/types"
 
 const plotDomId = "graph-hyperparameter-importances"
 
@@ -61,7 +62,7 @@ const GraphHyperparameterImportanceBackend: FC<{
     }
   }, [error])
 
-  return <Box id={plotDomId} sx={{ height: graphHeight }} />
+  return <Box component="div" id={plotDomId} sx={{ height: graphHeight }} />
 }
 
 const GraphHyperparameterImportanceFrontend: FC<{
@@ -99,7 +100,7 @@ const GraphHyperparameterImportanceFrontend: FC<{
         >
           Hyperparameter Importance
         </Typography>
-        <Box id={plotDomId} sx={{ height: graphHeight }} />
+        <Box component="div" id={plotDomId} sx={{ height: graphHeight }} />
       </CardContent>
     </Card>
   )
diff --git a/optuna_dashboard/ts/components/GraphIntermediateValues.tsx b/optuna_dashboard/ts/components/GraphIntermediateValues.tsx
index bd18a886..65085a97 100644
--- a/optuna_dashboard/ts/components/GraphIntermediateValues.tsx
+++ b/optuna_dashboard/ts/components/GraphIntermediateValues.tsx
@@ -2,6 +2,7 @@ import * as plotly from "plotly.js-dist-min"
 import React, { FC, useEffect } from "react"
 import { Box, Typography, useTheme, CardContent, Card } from "@mui/material"
 import { usePlotlyColorTheme } from "../state"
+import { Trial } from "ts/types"
 
 const plotDomId = "graph-intermediate-values"
 
diff --git a/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx b/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx
index 10c1eed5..d26f10c7 100644
--- a/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx
+++ b/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx
@@ -20,6 +20,7 @@ import { useMergedUnionSearchSpace } from "../searchSpace"
 import { PlotType } from "../apiClient"
 import { useBackendRender } from "../state"
 import { usePlot } from "../hooks/usePlot"
+import { SearchSpaceItem, StudyDetail, Trial } from "ts/types"
 
 const plotDomId = "graph-parallel-coordinate"
 
diff --git a/optuna_dashboard/ts/components/GraphParetoFront.tsx b/optuna_dashboard/ts/components/GraphParetoFront.tsx
index d3255a1e..cac556b4 100644
--- a/optuna_dashboard/ts/components/GraphParetoFront.tsx
+++ b/optuna_dashboard/ts/components/GraphParetoFront.tsx
@@ -18,6 +18,7 @@ import { PlotType } from "../apiClient"
 import { useBackendRender } from "../state"
 import { usePlot } from "../hooks/usePlot"
 import * as Optuna from "@optuna/types"
+import { StudyDetail, Trial, URL_PREFIX } from "ts/types"
 
 const plotDomId = "graph-pareto-front"
 
diff --git a/optuna_dashboard/ts/components/GraphRank.tsx b/optuna_dashboard/ts/components/GraphRank.tsx
index 78c54264..80125b25 100644
--- a/optuna_dashboard/ts/components/GraphRank.tsx
+++ b/optuna_dashboard/ts/components/GraphRank.tsx
@@ -16,6 +16,7 @@ import { useMergedUnionSearchSpace } from "../searchSpace"
 import { PlotType } from "../apiClient"
 import { usePlotlyColorTheme, useBackendRender } from "../state"
 import { usePlot } from "../hooks/usePlot"
+import { SearchSpaceItem, StudyDetail, Trial } from "ts/types"
 
 const plotDomId = "graph-rank"
 
diff --git a/optuna_dashboard/ts/components/GraphSlice.tsx b/optuna_dashboard/ts/components/GraphSlice.tsx
index 2137296e..4e897b46 100644
--- a/optuna_dashboard/ts/components/GraphSlice.tsx
+++ b/optuna_dashboard/ts/components/GraphSlice.tsx
@@ -22,6 +22,7 @@ import { useMergedUnionSearchSpace } from "../searchSpace"
 import { PlotType } from "../apiClient"
 import { usePlotlyColorTheme, useBackendRender } from "../state"
 import { usePlot } from "../hooks/usePlot"
+import { SearchSpaceItem, StudyDetail, Trial } from "ts/types"
 
 const plotDomId = "graph-slice"
 
diff --git a/optuna_dashboard/ts/components/GraphTimeline.tsx b/optuna_dashboard/ts/components/GraphTimeline.tsx
index d7a4b108..bf71ba93 100644
--- a/optuna_dashboard/ts/components/GraphTimeline.tsx
+++ b/optuna_dashboard/ts/components/GraphTimeline.tsx
@@ -7,6 +7,7 @@ import { PlotType } from "../apiClient"
 import { useBackendRender } from "../state"
 import { usePlot } from "../hooks/usePlot"
 import * as Optuna from "@optuna/types"
+import { StudyDetail, Trial } from "ts/types"
 
 const plotDomId = "graph-timeline"
 const maxBars = 100
diff --git a/optuna_dashboard/ts/components/Note.tsx b/optuna_dashboard/ts/components/Note.tsx
index ec2df900..7bcb34be 100644
--- a/optuna_dashboard/ts/components/Note.tsx
+++ b/optuna_dashboard/ts/components/Note.tsx
@@ -31,6 +31,7 @@ import React, {
 import ReactMarkdown from "react-markdown"
 import remarkGfm from "remark-gfm"
 import remarkMath from "remark-math"
+// @ts-ignore
 import rehypeMathjax from "rehype-mathjax"
 import rehypeRaw from "rehype-raw"
 import LoadingButton from "@mui/lab/LoadingButton"
@@ -41,6 +42,7 @@ import { Theme } from "@mui/material/styles"
 import {
   CodeComponent,
   ReactMarkdownNames,
+  // @ts-ignore
 } from "react-markdown/lib/ast-to-react"
 import HtmlIcon from "@mui/icons-material/Html"
 import ModeEditIcon from "@mui/icons-material/ModeEdit"
@@ -51,6 +53,7 @@ import { darcula } from "react-syntax-highlighter/dist/esm/styles/prism"
 import { actionCreator } from "../action"
 import { useRecoilValue } from "recoil"
 import { artifactIsAvailable, isFileUploading, useArtifacts } from "../state"
+import { Note } from "ts/types"
 
 const placeholder = `## What is this feature for?
 
@@ -74,8 +77,11 @@ $$
 `
 
 const CodeBlock: CodeComponent | ReactMarkdownNames = ({
+  // @ts-ignore
   inline,
+  // @ts-ignore
   className,
+  // @ts-ignore
   children,
   ...props
 }) => {
diff --git a/optuna_dashboard/ts/components/Preferential/PreferentialGraph.tsx b/optuna_dashboard/ts/components/Preferential/PreferentialGraph.tsx
index dd7a3691..98514ba2 100644
--- a/optuna_dashboard/ts/components/Preferential/PreferentialGraph.tsx
+++ b/optuna_dashboard/ts/components/Preferential/PreferentialGraph.tsx
@@ -26,6 +26,7 @@ import { ElkNode } from "elkjs/lib/elk-api.js"
 import { useStudyDetailValue } from "../../state"
 import { getArtifactUrlPath } from "./PreferentialTrials"
 import { PreferentialOutputComponent } from "./PreferentialOutputComponent"
+import { StudyDetail, Trial } from "ts/types"
 
 const elk = new ELK()
 const nodeWidth = 400
@@ -67,6 +68,7 @@ const GraphNode: FC<NodeProps<NodeData>> = ({ data, isConnectable }) => {
       }}
     >
       <Box
+        component="div"
         sx={{
           display: "flex",
           displayDirection: "row",
diff --git a/optuna_dashboard/ts/components/Preferential/PreferentialHistory.tsx b/optuna_dashboard/ts/components/Preferential/PreferentialHistory.tsx
index 5085863c..a603ffdd 100644
--- a/optuna_dashboard/ts/components/Preferential/PreferentialHistory.tsx
+++ b/optuna_dashboard/ts/components/Preferential/PreferentialHistory.tsx
@@ -21,6 +21,7 @@ import { formatDate } from "../../dateUtil"
 import { actionCreator } from "../../action"
 import { useStudyDetailValue } from "../../state"
 import { PreferentialOutputComponent } from "./PreferentialOutputComponent"
+import { PreferenceHistory, StudyDetail, Trial } from "ts/types"
 
 type TrialType = "worst" | "none"
 
@@ -93,6 +94,7 @@ const CandidateTrial: FC<{
       </CardActions>
       <CardContent aria-label="trial" sx={cardComponentSx}>
         <Box
+          component="div"
           sx={{
             padding: theme.spacing(2),
           }}
@@ -126,6 +128,7 @@ const CandidateTrial: FC<{
       </CardContent>
       <Modal open={detailShown} onClose={() => setDetailShown(false)}>
         <Box
+          component="div"
           sx={{
             position: "absolute",
             top: 0,
@@ -141,6 +144,7 @@ const CandidateTrial: FC<{
           }}
         >
           <Box
+            component="div"
             sx={{
               width: "100%",
               height: "100%",
@@ -182,12 +186,14 @@ const ChoiceTrials: FC<{
 
   return (
     <Box
+      component="div"
       sx={{
         marginBottom: theme.spacing(4),
         position: "relative",
       }}
     >
       <Box
+        component="div"
         sx={{
           display: "flex",
           flexDirection: "row",
@@ -232,6 +238,7 @@ const ChoiceTrials: FC<{
         )}
       </Box>
       <Box
+        component="div"
         sx={{
           display: "flex",
           flexDirection: "row",
@@ -281,6 +288,7 @@ export const PreferentialHistory: FC<{ studyDetail: StudyDetail | null }> = ({
 
   return (
     <Box
+      component="div"
       padding={theme.spacing(2)}
       sx={{ display: "flex", flexDirection: "column" }}
     >
diff --git a/optuna_dashboard/ts/components/Preferential/PreferentialOutputComponent.tsx b/optuna_dashboard/ts/components/Preferential/PreferentialOutputComponent.tsx
index 077e514e..3dc70c45 100644
--- a/optuna_dashboard/ts/components/Preferential/PreferentialOutputComponent.tsx
+++ b/optuna_dashboard/ts/components/Preferential/PreferentialOutputComponent.tsx
@@ -1,6 +1,7 @@
 import React, { FC, useMemo } from "react"
 import { ArtifactCardMedia } from "../Artifact/ArtifactCardMedia"
 import { MarkdownRenderer } from "../Note"
+import { Artifact, FeedbackComponentType, Trial } from "ts/types"
 
 export const PreferentialOutputComponent: FC<{
   trial: Trial
diff --git a/optuna_dashboard/ts/components/Preferential/PreferentialTrials.tsx b/optuna_dashboard/ts/components/Preferential/PreferentialTrials.tsx
index 56aa9844..b8a56d16 100644
--- a/optuna_dashboard/ts/components/Preferential/PreferentialTrials.tsx
+++ b/optuna_dashboard/ts/components/Preferential/PreferentialTrials.tsx
@@ -34,6 +34,7 @@ import {
   useThreejsArtifactModal,
 } from "../Artifact/ThreejsArtifactViewer"
 import { PreferentialOutputComponent } from "./PreferentialOutputComponent"
+import { Artifact, FeedbackComponentArtifact, FeedbackComponentNote, FeedbackComponentType, StudyDetail, Trial } from "ts/types"
 
 const SettingsPage: FC<{
   studyDetail: StudyDetail
@@ -216,6 +217,7 @@ const PreferentialTrial: FC<{
   if (trial === undefined) {
     return (
       <Box
+        component="div"
         sx={{
           width: trialWidth,
           minHeight: trialHeight,
@@ -244,6 +246,7 @@ const PreferentialTrial: FC<{
     >
       <CardActions>
         <Box
+        component="div"
           sx={{
             margin: theme.spacing(0, 2),
             maxWidth: `calc(${trialWidth}px - ${
@@ -322,6 +325,7 @@ const PreferentialTrial: FC<{
               urlPath={urlPath}
             />
             <Box
+            component="div"
               sx={{
                 position: "absolute",
                 top: 0,
@@ -491,8 +495,8 @@ export const PreferentialTrials: FC<{ studyDetail: StudyDetail | null }> = ({
     null
 
   return (
-    <Box padding={theme.spacing(2)}>
-      <Box display="flex">
+    <Box component="div" padding={theme.spacing(2)}>
+      <Box component="div" display="flex">
         <Typography
           variant="h4"
           sx={{
@@ -502,6 +506,7 @@ export const PreferentialTrials: FC<{ studyDetail: StudyDetail | null }> = ({
           Which trial is the worst?
         </Typography>
         <Box
+          component="div"
           display="flex"
           sx={{
             marginLeft: "auto",
@@ -541,7 +546,7 @@ export const PreferentialTrials: FC<{ studyDetail: StudyDetail | null }> = ({
           </Button>
         </Box>
       </Box>
-      <Box sx={{ display: "flex", flexDirection: "row", flexWrap: "wrap" }}>
+      <Box component="div" sx={{ display: "flex", flexDirection: "row", flexWrap: "wrap" }}>
         {displayTrials.display.map((t, index) => {
           const trial = activeTrials.find((trial) => trial.number === t)
           const candidates = displayTrials.display.filter(
@@ -573,6 +578,7 @@ export const PreferentialTrials: FC<{ studyDetail: StudyDetail | null }> = ({
       {detailTrial !== null && (
         <Modal open={true} onClose={() => setDetailTrial(null)}>
           <Box
+          component="div"
             sx={{
               position: "absolute",
               top: 0,
@@ -588,6 +594,7 @@ export const PreferentialTrials: FC<{ studyDetail: StudyDetail | null }> = ({
             }}
           >
             <Box
+            component="div"
               sx={{
                 width: "100%",
                 height: "100%",
diff --git a/optuna_dashboard/ts/components/RenameStudyDialog.tsx b/optuna_dashboard/ts/components/RenameStudyDialog.tsx
index 9e578a88..05766f36 100644
--- a/optuna_dashboard/ts/components/RenameStudyDialog.tsx
+++ b/optuna_dashboard/ts/components/RenameStudyDialog.tsx
@@ -10,6 +10,7 @@ import {
 } from "@mui/material"
 import { actionCreator } from "../action"
 import { DebouncedInputTextField } from "./Debounce"
+import { StudySummary } from "ts/types"
 
 export const useRenameStudyDialog = (
   studies: StudySummary[]
diff --git a/optuna_dashboard/ts/components/Settings.tsx b/optuna_dashboard/ts/components/Settings.tsx
index 87061283..036f8e32 100644
--- a/optuna_dashboard/ts/components/Settings.tsx
+++ b/optuna_dashboard/ts/components/Settings.tsx
@@ -12,6 +12,7 @@ import {
 } from "@mui/material"
 import ClearIcon from "@mui/icons-material/Clear"
 import { usePlotBackendRendering, usePlotlyColorThemeState } from "../state"
+import { PlotlyColorThemeDark, PlotlyColorThemeLight } from "ts/types"
 
 interface SettingsProps {
   handleClose: () => void
diff --git a/optuna_dashboard/ts/components/StudyDetail.tsx b/optuna_dashboard/ts/components/StudyDetail.tsx
index 898856df..9277b836 100644
--- a/optuna_dashboard/ts/components/StudyDetail.tsx
+++ b/optuna_dashboard/ts/components/StudyDetail.tsx
@@ -34,6 +34,7 @@ import { PreferentialTrials } from "./Preferential/PreferentialTrials"
 import { PreferentialHistory } from "./Preferential/PreferentialHistory"
 import { PreferentialAnalytics } from "./Preferential/PreferentialAnalytics"
 import { PreferentialGraph } from "./Preferential/PreferentialGraph"
+import { URL_PREFIX } from "ts/types"
 
 type ParamTypes = {
   studyId: string
diff --git a/optuna_dashboard/ts/components/StudyHistory.tsx b/optuna_dashboard/ts/components/StudyHistory.tsx
index ea979db2..029c4d64 100644
--- a/optuna_dashboard/ts/components/StudyHistory.tsx
+++ b/optuna_dashboard/ts/components/StudyHistory.tsx
@@ -27,6 +27,7 @@ import {
 import FormControlLabel from "@mui/material/FormControlLabel"
 import { artifactIsAvailable } from "../state"
 import * as Optuna from "@optuna/types"
+import { Trial } from "ts/types"
 
 export const StudyHistory: FC<{ studyId: number }> = ({ studyId }) => {
   const theme = useTheme()
diff --git a/optuna_dashboard/ts/components/StudyList.tsx b/optuna_dashboard/ts/components/StudyList.tsx
index f5071497..885a0f19 100644
--- a/optuna_dashboard/ts/components/StudyList.tsx
+++ b/optuna_dashboard/ts/components/StudyList.tsx
@@ -39,6 +39,7 @@ import { useCreateStudyDialog } from "./CreateStudyDialog"
 import { useDeleteStudyDialog } from "./DeleteStudyDialog"
 import { useRenameStudyDialog } from "./RenameStudyDialog"
 import { useQuery } from "../urlQuery"
+import { StudySummary, URL_PREFIX } from "ts/types"
 
 export const StudyList: FC<{
   toggleColorMode: () => void
@@ -97,6 +98,7 @@ export const StudyList: FC<{
   }))
   const sortBySelect = (
     <Box
+    component="div"
       sx={{
         position: "relative",
         borderRadius: theme.shape.borderRadius,
@@ -104,6 +106,7 @@ export const StudyList: FC<{
       }}
     >
       <Box
+      component="div"
         sx={{
           padding: theme.spacing(0, 2),
           height: "100%",
@@ -134,7 +137,7 @@ export const StudyList: FC<{
   let studyListContent
   if (isLoading) {
     studyListContent = (
-      <Box sx={{ margin: theme.spacing(2) }}>
+      <Box component="div" sx={{ margin: theme.spacing(2) }}>
         <SvgIcon fontSize="small" color="action">
           <HourglassTop />
         </SvgIcon>
@@ -170,7 +173,7 @@ export const StudyList: FC<{
           </CardContent>
         </CardActionArea>
         <CardActions disableSpacing sx={{ paddingTop: 0 }}>
-          <Box sx={{ flexGrow: 1 }} />
+          <Box component="div" sx={{ flexGrow: 1 }} />
           <IconButton
             aria-label="rename study"
             size="small"
@@ -197,7 +200,7 @@ export const StudyList: FC<{
   }
 
   return (
-    <Box sx={{ display: "flex" }}>
+    <Box component="div" sx={{ display: "flex" }}>
       <AppDrawer toggleColorMode={toggleColorMode} toolbar={toolbar}>
         <Container
           sx={{
@@ -208,7 +211,7 @@ export const StudyList: FC<{
         >
           <Card sx={{ margin: theme.spacing(2) }}>
             <CardContent>
-              <Box sx={{ display: "flex" }}>
+              <Box component="div" sx={{ display: "flex" }}>
                 <TextField
                   onChange={(e) => {
                     setStudyFilterText(e.target.value)
@@ -229,7 +232,7 @@ export const StudyList: FC<{
                   }}
                 />
                 {sortBySelect}
-                <Box sx={{ flexGrow: 1 }} />
+                <Box component="div" sx={{ flexGrow: 1 }} />
                 <Button
                   variant="outlined"
                   startIcon={<Refresh />}
@@ -262,7 +265,7 @@ export const StudyList: FC<{
               </Box>
             </CardContent>
           </Card>
-          <Box sx={{ display: "flex", flexWrap: "wrap" }}>
+          <Box component="div" sx={{ display: "flex", flexWrap: "wrap" }}>
             {studyListContent}
           </Box>
         </Container>
diff --git a/optuna_dashboard/ts/components/TrialFormWidgets.tsx b/optuna_dashboard/ts/components/TrialFormWidgets.tsx
index b0e537e8..5db18084 100644
--- a/optuna_dashboard/ts/components/TrialFormWidgets.tsx
+++ b/optuna_dashboard/ts/components/TrialFormWidgets.tsx
@@ -17,6 +17,7 @@ import { DebouncedInputTextField } from "./Debounce"
 import { actionCreator } from "../action"
 import { useTrialUpdatingValue } from "../state"
 import * as Optuna from "@optuna/types"
+import { FormWidgets, ObjectiveChoiceWidget, ObjectiveSliderWidget, ObjectiveTextInputWidget, ObjectiveUserAttrRef, Trial, UserAttrFormWidget } from "ts/types"
 
 type WidgetState = {
   isValid: boolean
diff --git a/optuna_dashboard/ts/components/TrialList.tsx b/optuna_dashboard/ts/components/TrialList.tsx
index a1ec8b0d..3398c62f 100644
--- a/optuna_dashboard/ts/components/TrialList.tsx
+++ b/optuna_dashboard/ts/components/TrialList.tsx
@@ -31,6 +31,7 @@ import { TrialFormWidgets } from "./TrialFormWidgets"
 import { TrialArtifactCards } from "./Artifact/TrialArtifactCards"
 import { useQuery } from "../urlQuery"
 import { useVirtualizer } from "@tanstack/react-virtual"
+import { FormWidgets, StudyDetail, Trial, URL_PREFIX } from "ts/types"
 
 const states: Optuna.TrialState[] = [
   "Complete",
diff --git a/optuna_dashboard/ts/components/TrialTable.tsx b/optuna_dashboard/ts/components/TrialTable.tsx
index 0a453418..59dc2816 100644
--- a/optuna_dashboard/ts/components/TrialTable.tsx
+++ b/optuna_dashboard/ts/components/TrialTable.tsx
@@ -5,6 +5,7 @@ import DownloadIcon from "@mui/icons-material/Download"
 
 import { DataGridColumn, DataGrid } from "./DataGrid"
 import { Link } from "react-router-dom"
+import { StudyDetail, Trial, URL_PREFIX } from "ts/types"
 
 export const TrialTable: FC<{
   studyDetail: StudyDetail | null
diff --git a/optuna_dashboard/ts/components/UserDefinedPlot.tsx b/optuna_dashboard/ts/components/UserDefinedPlot.tsx
index 029c4b57..e35f12ef 100644
--- a/optuna_dashboard/ts/components/UserDefinedPlot.tsx
+++ b/optuna_dashboard/ts/components/UserDefinedPlot.tsx
@@ -1,6 +1,7 @@
 import * as plotly from "plotly.js-dist-min"
 import React, { FC, useEffect } from "react"
 import { Box } from "@mui/material"
+import { PlotlyGraphObject } from "ts/types"
 
 export const UserDefinedPlot: FC<{
   graphObject: PlotlyGraphObject
@@ -17,5 +18,5 @@ export const UserDefinedPlot: FC<{
     }
   }, [graphObject])
 
-  return <Box id={plotDomId} sx={{ height: "450px" }} />
+  return <Box component="div" id={plotDomId} sx={{ height: "450px" }} />
 }
diff --git a/optuna_dashboard/ts/dominatedTrials.ts b/optuna_dashboard/ts/dominatedTrials.ts
index d8188cf4..8c9f9374 100644
--- a/optuna_dashboard/ts/dominatedTrials.ts
+++ b/optuna_dashboard/ts/dominatedTrials.ts
@@ -1,4 +1,5 @@
 import * as Optuna from "@optuna/types"
+import { Trial } from "./types"
 
 const filterFunc = (
   trial: Trial,
diff --git a/optuna_dashboard/ts/graphUtil.ts b/optuna_dashboard/ts/graphUtil.ts
index d62a4c32..3db1e7f3 100644
--- a/optuna_dashboard/ts/graphUtil.ts
+++ b/optuna_dashboard/ts/graphUtil.ts
@@ -1,3 +1,6 @@
+import { SearchSpaceItem, Trial } from "./types"
+import * as Optuna from "@optuna/types"
+
 const PADDING_RATIO = 0.05
 
 export type AxisInfo = {
@@ -33,7 +36,7 @@ export const getAxisInfo = (
 const getAxisInfoForCategoricalParams = (
   trials: Trial[],
   paramName: string,
-  distribution: CategoricalDistribution
+  distribution: Optuna.CategoricalDistribution
 ): AxisInfo => {
   const values = trials.map(
     (trial) =>
@@ -62,7 +65,7 @@ const getAxisInfoForCategoricalParams = (
 const getAxisInfoForNumericalParams = (
   trials: Trial[],
   paramName: string,
-  distribution: FloatDistribution | IntDistribution
+  distribution: Optuna.FloatDistribution | Optuna.IntDistribution
 ): AxisInfo => {
   let min = 0
   let max = 0
diff --git a/optuna_dashboard/ts/hooks/useParamImportance.ts b/optuna_dashboard/ts/hooks/useParamImportance.ts
index 791644ca..c96129da 100644
--- a/optuna_dashboard/ts/hooks/useParamImportance.ts
+++ b/optuna_dashboard/ts/hooks/useParamImportance.ts
@@ -3,6 +3,7 @@ import { useSnackbar } from "notistack"
 import { getParamImportances } from "../apiClient"
 import { useQuery } from "@tanstack/react-query"
 import { AxiosError } from "axios"
+import { ParamImportance } from "ts/types"
 
 export const useParamImportance = ({
   numCompletedTrials,
diff --git a/optuna_dashboard/ts/searchSpace.ts b/optuna_dashboard/ts/searchSpace.ts
index daf79b11..6363844a 100644
--- a/optuna_dashboard/ts/searchSpace.ts
+++ b/optuna_dashboard/ts/searchSpace.ts
@@ -1,9 +1,11 @@
 import { useMemo } from "react"
+import { SearchSpaceItem } from "./types"
+import * as Optuna from "@optuna/types"
 
 export const mergeUnionSearchSpace = (
   unionSearchSpace: SearchSpaceItem[]
 ): SearchSpaceItem[] => {
-  const knownElements = new Map<string, Distribution>()
+  const knownElements = new Map<string, Optuna.Distribution>()
   unionSearchSpace.forEach((s) => {
     const d = knownElements.get(s.name)
     if (d === undefined) {
@@ -17,7 +19,7 @@ export const mergeUnionSearchSpace = (
       // CategoricalDistribution.choices will never be changed
       return
     }
-    const updated: Distribution = {
+    const updated: Optuna.Distribution = {
       ...d,
       low: Math.min(d.low, s.distribution.low),
       high: Math.max(d.high, s.distribution.high),
@@ -28,7 +30,7 @@ export const mergeUnionSearchSpace = (
     .sort((a, b) => (a > b ? 1 : a < b ? -1 : 0))
     .map((name) => ({
       name: name,
-      distribution: knownElements.get(name) as Distribution,
+      distribution: knownElements.get(name) as Optuna.Distribution,
     }))
 }
 
diff --git a/optuna_dashboard/ts/state.ts b/optuna_dashboard/ts/state.ts
index 95cbce6d..7c128e81 100644
--- a/optuna_dashboard/ts/state.ts
+++ b/optuna_dashboard/ts/state.ts
@@ -5,6 +5,7 @@ import {
   DarkColorTemplates,
 } from "./components/PlotlyColorTemplates"
 import { useLocalStorage } from "usehooks-ts"
+import { Artifact, PlotlyColorTheme, StudyDetail, StudyDetails, StudySummary } from "./types"
 
 export const studySummariesState = atom<StudySummary[]>({
   key: "studySummaries",
diff --git a/optuna_dashboard/ts/trialFilter.ts b/optuna_dashboard/ts/trialFilter.ts
index 13aa3eec..2dabab04 100644
--- a/optuna_dashboard/ts/trialFilter.ts
+++ b/optuna_dashboard/ts/trialFilter.ts
@@ -1,5 +1,6 @@
 import { useMemo, useState } from "react"
 import * as Optuna from "@optuna/types"
+import { SearchSpaceItem, StudyDetail, Trial } from "./types"
 
 type TargetKind = "objective" | "user_attr" | "params"
 
diff --git a/optuna_dashboard/ts/types/index.d.ts b/optuna_dashboard/ts/types/index.d.ts
index 35ac5531..c28142ae 100644
--- a/optuna_dashboard/ts/types/index.d.ts
+++ b/optuna_dashboard/ts/types/index.d.ts
@@ -7,36 +7,10 @@ declare const APP_BAR_TITLE: string
 declare const API_ENDPOINT: string
 declare const URL_PREFIX: string
 
+import * as Optuna from "@optuna/types"
+
 type PreferenceFeedbackMode = "ChooseWorst"
 
-type FloatDistribution = {
-  type: "FloatDistribution"
-  low: number
-  high: number
-  step: number
-  log: boolean
-}
-
-type IntDistribution = {
-  type: "IntDistribution"
-  low: number
-  high: number
-  step: number
-  log: boolean
-}
-
-type CategoricalChoiceType = null | boolean | number | string
-
-type CategoricalDistribution = {
-  type: "CategoricalDistribution"
-  choices: CategoricalChoiceType[]
-}
-
-type Distribution =
-  | FloatDistribution
-  | IntDistribution
-  | CategoricalDistribution
-
 type GraphVisibility = {
   history: boolean
   paretoFront: boolean
@@ -53,18 +27,18 @@ type TrialParam = {
   param_internal_value: number
   param_external_value: string
   param_external_type: string
-  distribution: Distribution
+  distribution: Optuna.Distribution
 }
 
 type ParamImportance = {
   name: string
   importance: number
-  distribution: Distribution
+  distribution: Optuna.Distribution
 }
 
 type SearchSpaceItem = {
   name: string
-  distribution: Distribution
+  distribution: Optuna.Distribution
 }
 
 type Note = {
@@ -83,9 +57,9 @@ type Trial = {
   trial_id: number
   study_id: number
   number: number
-  state: TrialState
+  state: Optuna.TrialState
   values?: number[]
-  intermediate_values: TrialIntermediateValue[]
+  intermediate_values: Optuna.TrialIntermediateValue[]
   datetime_start?: Date
   datetime_complete?: Date
   params: TrialParam[]
@@ -93,7 +67,7 @@ type Trial = {
     name: string
     param_external_value: string
   }[]
-  user_attrs: Attribute[]
+  user_attrs: Optuna.Attribute[]
   constraints: number[]
   note: Note
   artifacts: Artifact[]
@@ -102,8 +76,8 @@ type Trial = {
 type StudySummary = {
   study_id: number
   study_name: string
-  directions: StudyDirection[]
-  user_attrs: Attribute[]
+  directions: Optuna.StudyDirection[]
+  user_attrs: Optuna.Attribute[]
   is_preferential: boolean
   datetime_start?: Date
 }
@@ -183,14 +157,14 @@ type FeedbackComponentType = FeedbackComponentArtifact | FeedbackComponentNote
 type StudyDetail = {
   id: number
   name: string
-  directions: StudyDirection[]
-  user_attrs: Attribute[]
+  directions: Optuna.StudyDirection[]
+  user_attrs: Optuna.Attribute[]
   datetime_start: Date
   best_trials: Trial[]
   trials: Trial[]
   intersection_search_space: SearchSpaceItem[]
   union_search_space: SearchSpaceItem[]
-  union_user_attrs: AttributeSpec[]
+  union_user_attrs: Optuna.AttributeSpec[]
   has_intermediate_values: boolean
   note: Note
   is_preferential: boolean