diff --git a/.github/workflows/typescript-tests.yml b/.github/workflows/typescript-tests.yml
index 7aec3315..e00065ed 100644
--- a/.github/workflows/typescript-tests.yml
+++ b/.github/workflows/typescript-tests.yml
@@ -23,9 +23,32 @@ jobs:
         uses: actions/setup-node@v2
         with:
           node-version: '20'
+      
       - run: npm install
       - run: npm run lint
 
+  type-check:
+    name: Type checking on optuna-dashboard
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out code
+        uses: actions/checkout@master
+
+      - name: Setup Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '20'
+      
+      - name: Setup tslib
+        run: make tslib
+      
+      - name: Type Check
+        working-directory: optuna_dashboard
+        run: |
+          npm install
+          npm run type-check
+
   build:
     name: JS build check
     runs-on: ubuntu-latest
diff --git a/biome.json b/biome.json
index 779fa46f..5f68203d 100644
--- a/biome.json
+++ b/biome.json
@@ -15,7 +15,8 @@
 		"ignore": [
 			"optuna_dashboard/ts/components/PlotlyColorTemplates.ts",
 			"tslib/react/src/components/PlotlyDarkMode.ts",
-			"tslib/**/pkg/*"
+			"tslib/**/pkg/*",
+			"tslib/react/types/*"
 		]
 	},
 	"javascript": {
diff --git a/optuna_dashboard/_serializer.py b/optuna_dashboard/_serializer.py
index ee527ca6..55eb19c3 100644
--- a/optuna_dashboard/_serializer.py
+++ b/optuna_dashboard/_serializer.py
@@ -62,7 +62,7 @@ if TYPE_CHECKING:
             "type": Literal["FloatDistribution"],
             "low": float,
             "high": float,
-            "step": float,
+            "step": Union[float, None],
             "log": bool,
         },
     )
diff --git a/optuna_dashboard/package-lock.json b/optuna_dashboard/package-lock.json
index a82e9d4a..d888df64 100644
--- a/optuna_dashboard/package-lock.json
+++ b/optuna_dashboard/package-lock.json
@@ -41,6 +41,7 @@
       "devDependencies": {
         "@babel/core": "^7.23.9",
         "@babel/preset-env": "^7.23.9",
+        "@optuna/types": "../tslib/types/",
         "@types/plotly.js": "^2.12.32",
         "@types/react": "^18.2.48",
         "@types/react-dom": "^18.2.18",
@@ -55,6 +56,12 @@
         "webpack-cli": "^5.1.4"
       }
     },
+    "../tslib/types": {
+      "name": "@optuna/types",
+      "version": "0.0.1",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
@@ -2270,6 +2277,10 @@
         }
       }
     },
+    "node_modules/@optuna/types": {
+      "resolved": "../tslib/types",
+      "link": true
+    },
     "node_modules/@popperjs/core": {
       "version": "2.11.8",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
@@ -2749,119 +2760,6 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
-    "node_modules/@testing-library/dom": {
-      "version": "9.3.4",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz",
-      "integrity": "sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==",
-      "dev": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.10.4",
-        "@babel/runtime": "^7.12.5",
-        "@types/aria-query": "^5.0.1",
-        "aria-query": "5.1.3",
-        "chalk": "^4.1.0",
-        "dom-accessibility-api": "^0.5.9",
-        "lz-string": "^1.5.0",
-        "pretty-format": "^27.0.2"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
-    "node_modules/@testing-library/dom/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@testing-library/react": {
-      "version": "14.2.2",
-      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-14.2.2.tgz",
-      "integrity": "sha512-SOUuM2ysCvjUWBXTNfQ/ztmnKDmqaiPV3SvoIuyxMUca45rbSWWAT/qB8CUs/JQ/ux/8JFs9DNdFQ3f6jH3crA==",
-      "dev": true,
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "@testing-library/dom": "^9.0.0",
-        "@types/react-dom": "^18.0.0"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "peerDependencies": {
-        "react": "^18.0.0",
-        "react-dom": "^18.0.0"
-      }
-    },
-    "node_modules/@types/aria-query": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
-      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
-      "dev": true
-    },
     "node_modules/@types/d3": {
       "version": "7.4.3",
       "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
@@ -3566,15 +3464,6 @@
         "ajv": "^8.8.2"
       }
     },
-    "node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/ansi-styles": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
@@ -3586,51 +3475,11 @@
         "node": ">=4"
       }
     },
-    "node_modules/aria-query": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz",
-      "integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==",
-      "dev": true,
-      "dependencies": {
-        "deep-equal": "^2.0.5"
-      }
-    },
-    "node_modules/array-buffer-byte-length": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz",
-      "integrity": "sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.5",
-        "is-array-buffer": "^3.0.4"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
-    "node_modules/available-typed-arrays": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
-      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
-      "dev": true,
-      "dependencies": {
-        "possible-typed-array-names": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/axios": {
       "version": "1.6.8",
       "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
@@ -3812,25 +3661,6 @@
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
       "dev": true
     },
-    "node_modules/call-bind": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
-      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
-      "dev": true,
-      "dependencies": {
-        "es-define-property": "^1.0.0",
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.4",
-        "set-function-length": "^1.2.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -4331,72 +4161,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/deep-equal": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.3.tgz",
-      "integrity": "sha512-ZIwpnevOurS8bpT4192sqAowWM76JDKSHYzMLty3BZGSswgq6pBaH3DhCSW5xVAZICZyKdOBPjwww5wfgT/6PA==",
-      "dev": true,
-      "dependencies": {
-        "array-buffer-byte-length": "^1.0.0",
-        "call-bind": "^1.0.5",
-        "es-get-iterator": "^1.1.3",
-        "get-intrinsic": "^1.2.2",
-        "is-arguments": "^1.1.1",
-        "is-array-buffer": "^3.0.2",
-        "is-date-object": "^1.0.5",
-        "is-regex": "^1.1.4",
-        "is-shared-array-buffer": "^1.0.2",
-        "isarray": "^2.0.5",
-        "object-is": "^1.1.5",
-        "object-keys": "^1.1.1",
-        "object.assign": "^4.1.4",
-        "regexp.prototype.flags": "^1.5.1",
-        "side-channel": "^1.0.4",
-        "which-boxed-primitive": "^1.0.2",
-        "which-collection": "^1.0.1",
-        "which-typed-array": "^1.1.13"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/define-data-property": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
-      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
-      "dev": true,
-      "dependencies": {
-        "es-define-property": "^1.0.0",
-        "es-errors": "^1.3.0",
-        "gopd": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/define-properties": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
-      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
-      "dev": true,
-      "dependencies": {
-        "define-data-property": "^1.0.1",
-        "has-property-descriptors": "^1.0.0",
-        "object-keys": "^1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -4433,12 +4197,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/dom-accessibility-api": {
-      "version": "0.5.16",
-      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
-      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
-      "dev": true
-    },
     "node_modules/dom-helpers": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
@@ -4517,47 +4275,6 @@
         "is-arrayish": "^0.2.1"
       }
     },
-    "node_modules/es-define-property": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
-      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
-      "dev": true,
-      "dependencies": {
-        "get-intrinsic": "^1.2.4"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-errors": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
-      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-get-iterator": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.3.tgz",
-      "integrity": "sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.1.3",
-        "has-symbols": "^1.0.3",
-        "is-arguments": "^1.1.1",
-        "is-map": "^2.0.2",
-        "is-set": "^2.0.2",
-        "is-string": "^1.0.7",
-        "isarray": "^2.0.5",
-        "stop-iteration-iterator": "^1.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/es-module-lexer": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.4.2.tgz",
@@ -4819,15 +4536,6 @@
         }
       }
     },
-    "node_modules/for-each": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
-      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
-      "dev": true,
-      "dependencies": {
-        "is-callable": "^1.1.3"
-      }
-    },
     "node_modules/form-data": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
@@ -4857,15 +4565,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/functions-have-names": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
-      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
-      "dev": true,
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -4875,25 +4574,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/get-intrinsic": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
-      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
-      "dev": true,
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2",
-        "has-proto": "^1.0.1",
-        "has-symbols": "^1.0.3",
-        "hasown": "^2.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/get-tsconfig": {
       "version": "4.7.3",
       "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.7.3.tgz",
@@ -4934,18 +4614,6 @@
         "csstype": "^3.0.10"
       }
     },
-    "node_modules/gopd": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
-      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-      "dev": true,
-      "dependencies": {
-        "get-intrinsic": "^1.1.3"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -4957,15 +4625,6 @@
       "resolved": "https://registry.npmjs.org/hamt_plus/-/hamt_plus-1.0.2.tgz",
       "integrity": "sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA=="
     },
-    "node_modules/has-bigints": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
-      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
-      "dev": true,
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -4974,57 +4633,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/has-property-descriptors": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
-      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
-      "dev": true,
-      "dependencies": {
-        "es-define-property": "^1.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-proto": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
-      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-symbols": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-tostringtag": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
-      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
-      "dev": true,
-      "dependencies": {
-        "has-symbols": "^1.0.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/hasown": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
@@ -5420,20 +5028,6 @@
       "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.2.tgz",
       "integrity": "sha512-EcKzdTHVe8wFVOGEYXiW9WmJXPjqi1T+234YpJr98RiFYKHV3cdy1+3mkTE+KHTHxFFLH51SfaGOoUdW+v7ViQ=="
     },
-    "node_modules/internal-slot": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz",
-      "integrity": "sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==",
-      "dev": true,
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "hasown": "^2.0.0",
-        "side-channel": "^1.0.4"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
     "node_modules/interpret": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-3.1.1.tgz",
@@ -5465,83 +5059,11 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/is-arguments": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
-      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-array-buffer": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz",
-      "integrity": "sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.2.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
       "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
     },
-    "node_modules/is-bigint": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
-      "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
-      "dev": true,
-      "dependencies": {
-        "has-bigints": "^1.0.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-boolean-object": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
-      "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-callable": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
-      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/is-core-module": {
       "version": "2.13.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
@@ -5553,21 +5075,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-date-object": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
-      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
-      "dev": true,
-      "dependencies": {
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/is-decimal": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
@@ -5586,18 +5093,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/is-map": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
-      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -5607,21 +5102,6 @@
         "node": ">=0.12.0"
       }
     },
-    "node_modules/is-number-object": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
-      "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
-      "dev": true,
-      "dependencies": {
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/is-plain-obj": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
@@ -5650,113 +5130,6 @@
       "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
       "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ=="
     },
-    "node_modules/is-regex": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-set": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
-      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-shared-array-buffer": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz",
-      "integrity": "sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.7"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-string": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
-      "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
-      "dev": true,
-      "dependencies": {
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-symbol": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
-      "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
-      "dev": true,
-      "dependencies": {
-        "has-symbols": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-weakmap": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
-      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-weakset": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.3.tgz",
-      "integrity": "sha512-LvIm3/KWzS9oRFHugab7d+M/GcBXuXX5xZkzPmN+NxihdQlZUQ4dWuSV1xR/sq6upL1TJEDrfBgRepHFdBtSNQ==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.7",
-        "get-intrinsic": "^1.2.4"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/isarray": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
-      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
-      "dev": true
-    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -5941,15 +5314,6 @@
         "yallist": "^3.0.2"
       }
     },
-    "node_modules/lz-string": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
-      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
-      "dev": true,
-      "bin": {
-        "lz-string": "bin/bin.js"
-      }
-    },
     "node_modules/maath": {
       "version": "0.10.7",
       "resolved": "https://registry.npmjs.org/maath/-/maath-0.10.7.tgz",
@@ -6954,58 +6318,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/object-inspect": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
-      "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
-      "dev": true,
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/object-is": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz",
-      "integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.7",
-        "define-properties": "^1.2.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/object-keys": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/object.assign": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.5.tgz",
-      "integrity": "sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.5",
-        "define-properties": "^1.2.1",
-        "has-symbols": "^1.0.3",
-        "object-keys": "^1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/p-locate": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
@@ -7169,15 +6481,6 @@
       "resolved": "https://registry.npmjs.org/plotly.js-dist-min/-/plotly.js-dist-min-2.30.1.tgz",
       "integrity": "sha512-xWLni6EpBDwG/EdjCBTu+GK1Asuqswgh+YC77t0UAxa5OFFgpjYkVuvozZmkWqT9TKpvzjxkK4LLGv5Rn+yo7Q=="
     },
-    "node_modules/possible-typed-array-names": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
-      "integrity": "sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
     "node_modules/postcss": {
       "version": "8.4.38",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
@@ -7289,38 +6592,6 @@
       "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz",
       "integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ=="
     },
-    "node_modules/pretty-format": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
-      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^5.0.1",
-        "ansi-styles": "^5.0.0",
-        "react-is": "^17.0.1"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/pretty-format/node_modules/ansi-styles": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/pretty-format/node_modules/react-is": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-      "dev": true
-    },
     "node_modules/prismjs": {
       "version": "1.29.0",
       "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
@@ -7730,24 +7001,6 @@
         "@babel/runtime": "^7.8.4"
       }
     },
-    "node_modules/regexp.prototype.flags": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz",
-      "integrity": "sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.6",
-        "define-properties": "^1.2.1",
-        "es-errors": "^1.3.0",
-        "set-function-name": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/regexpu-core": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.3.2.tgz",
@@ -8218,38 +7471,6 @@
         "randombytes": "^2.1.0"
       }
     },
-    "node_modules/set-function-length": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
-      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
-      "dev": true,
-      "dependencies": {
-        "define-data-property": "^1.1.4",
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.4",
-        "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/set-function-name": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
-      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
-      "dev": true,
-      "dependencies": {
-        "define-data-property": "^1.1.4",
-        "es-errors": "^1.3.0",
-        "functions-have-names": "^1.2.3",
-        "has-property-descriptors": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
     "node_modules/shallow-clone": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
@@ -8281,24 +7502,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/side-channel": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
-      "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.7",
-        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.4",
-        "object-inspect": "^1.13.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -8361,18 +7564,6 @@
       "resolved": "https://registry.npmjs.org/stats.js/-/stats.js-0.17.0.tgz",
       "integrity": "sha512-hNKz8phvYLPEcRkeG1rsGmV5ChMjKDAWU7/OJJdDErPBNChQXxCo3WZurGpnWc6gZhAzEPFad1aVgyOANH1sMw=="
     },
-    "node_modules/stop-iteration-iterator": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz",
-      "integrity": "sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==",
-      "dev": true,
-      "dependencies": {
-        "internal-slot": "^1.0.4"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
     "node_modules/stringify-entities": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.3.tgz",
@@ -9459,59 +8650,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/which-boxed-primitive": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
-      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
-      "dev": true,
-      "dependencies": {
-        "is-bigint": "^1.0.1",
-        "is-boolean-object": "^1.1.0",
-        "is-number-object": "^1.0.4",
-        "is-string": "^1.0.5",
-        "is-symbol": "^1.0.3"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/which-collection": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
-      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
-      "dev": true,
-      "dependencies": {
-        "is-map": "^2.0.3",
-        "is-set": "^2.0.3",
-        "is-weakmap": "^2.0.2",
-        "is-weakset": "^2.0.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/which-typed-array": {
-      "version": "1.1.15",
-      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.15.tgz",
-      "integrity": "sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==",
-      "dev": true,
-      "dependencies": {
-        "available-typed-arrays": "^1.0.7",
-        "call-bind": "^1.0.7",
-        "for-each": "^0.3.3",
-        "gopd": "^1.0.1",
-        "has-tostringtag": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/wicked-good-xpath": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/wicked-good-xpath/-/wicked-good-xpath-1.3.0.tgz",
diff --git a/optuna_dashboard/package.json b/optuna_dashboard/package.json
index 37a1bc4e..c09e81bd 100644
--- a/optuna_dashboard/package.json
+++ b/optuna_dashboard/package.json
@@ -8,7 +8,8 @@
     "watch": "NODE_ENV=development TYPESCRIPT_LOADER=esbuild-loader webpack --watch",
     "build": "webpack",
     "build:dev": "NODE_ENV=development TYPESCRIPT_LOADER=esbuild-loader webpack",
-    "build:prd": "NODE_ENV=production webpack"
+    "build:prd": "NODE_ENV=production webpack",
+    "type-check": "tsc --noEmit"
   },
   "author": "Masashi Shibata",
   "license": "MIT",
@@ -45,6 +46,7 @@
   "devDependencies": {
     "@babel/core": "^7.23.9",
     "@babel/preset-env": "^7.23.9",
+    "@optuna/types": "../tslib/types/",
     "@types/plotly.js": "^2.12.32",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
diff --git a/optuna_dashboard/ts/action.ts b/optuna_dashboard/ts/action.ts
index ff66b8e9..4db8c0b9 100644
--- a/optuna_dashboard/ts/action.ts
+++ b/optuna_dashboard/ts/action.ts
@@ -1,3 +1,4 @@
+import * as Optuna from "@optuna/types"
 import { useRecoilState, useSetRecoilState } from "recoil"
 import { useSnackbar } from "notistack"
 import {
@@ -33,6 +34,15 @@ import {
   studySummariesLoadingState,
 } from "./state"
 import { getDominatedTrials } from "./dominatedTrials"
+import {
+  Artifact,
+  FeedbackComponentType,
+  Note,
+  StudyDetail,
+  StudyDetails,
+  StudySummary,
+  Trial,
+} from "./types/optuna"
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const actionCreator = () => {
@@ -143,8 +153,8 @@ export const actionCreator = () => {
   const setTrialStateValues = (
     studyId: number,
     index: number,
-    state: TrialState,
-    values?: TrialValueNumber[]
+    state: Optuna.TrialState,
+    values?: number[]
   ) => {
     const newTrial: Trial = Object.assign(
       {},
@@ -270,7 +280,10 @@ export const actionCreator = () => {
       })
   }
 
-  const createNewStudy = (studyName: string, directions: StudyDirection[]) => {
+  const createNewStudy = (
+    studyName: string,
+    directions: Optuna.StudyDirection[]
+  ) => {
     createNewStudyAPI(studyName, directions)
       .then((study_summary) => {
         const newVal = [...studySummaries, study_summary]
diff --git a/optuna_dashboard/ts/apiClient.ts b/optuna_dashboard/ts/apiClient.ts
index cf775fd6..ba5878cd 100644
--- a/optuna_dashboard/ts/apiClient.ts
+++ b/optuna_dashboard/ts/apiClient.ts
@@ -1,5 +1,21 @@
 import * as plotly from "plotly.js-dist-min"
 import axios from "axios"
+import * as Optuna from "@optuna/types"
+import {
+  Artifact,
+  FeedbackComponentType,
+  FormWidgets,
+  Note,
+  ParamImportance,
+  PlotlyGraphObject,
+  PreferenceFeedbackMode,
+  PreferenceHistory,
+  SearchSpaceItem,
+  StudyDetail,
+  StudySummary,
+  Trial,
+  TrialParam,
+} from "./types/optuna"
 
 const axiosInstance = axios.create({ baseURL: API_ENDPOINT })
 
@@ -18,9 +34,9 @@ interface TrialResponse {
   trial_id: number
   study_id: number
   number: number
-  state: TrialState
-  values?: TrialValueNumber[]
-  intermediate_values: TrialIntermediateValue[]
+  state: Optuna.TrialState
+  values?: number[]
+  intermediate_values: Optuna.TrialIntermediateValue[]
   datetime_start?: string
   datetime_complete?: string
   params: TrialParam[]
@@ -28,7 +44,7 @@ interface TrialResponse {
     name: string
     param_external_value: string
   }[]
-  user_attrs: Attribute[]
+  user_attrs: Optuna.Attribute[]
   note: Note
   artifacts: Artifact[]
   constraints: number[]
@@ -86,13 +102,13 @@ const convertPreferenceHistory = (
 interface StudyDetailResponse {
   name: string
   datetime_start: string
-  directions: StudyDirection[]
-  user_attrs: Attribute[]
+  directions: Optuna.StudyDirection[]
+  user_attrs: Optuna.Attribute[]
   trials: TrialResponse[]
   best_trials: TrialResponse[]
   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
@@ -155,8 +171,8 @@ interface StudySummariesResponse {
   study_summaries: {
     study_id: number
     study_name: string
-    directions: StudyDirection[]
-    user_attrs: Attribute[]
+    directions: Optuna.StudyDirection[]
+    user_attrs: Optuna.Attribute[]
     is_preferential: boolean
     datetime_start?: string
   }[]
@@ -185,8 +201,8 @@ interface CreateNewStudyResponse {
   study_summary: {
     study_id: number
     study_name: string
-    directions: StudyDirection[]
-    user_attrs: Attribute[]
+    directions: Optuna.StudyDirection[]
+    user_attrs: Optuna.Attribute[]
     is_preferential: boolean
     datetime_start?: string
   }
@@ -194,7 +210,7 @@ interface CreateNewStudyResponse {
 
 export const createNewStudyAPI = (
   studyName: string,
-  directions: StudyDirection[]
+  directions: Optuna.StudyDirection[]
 ): Promise<StudySummary> => {
   return axiosInstance
     .post<CreateNewStudyResponse>(`/api/studies`, {
@@ -226,8 +242,8 @@ export const deleteStudyAPI = (studyId: number): Promise<void> => {
 type RenameStudyResponse = {
   study_id: number
   study_name: string
-  directions: StudyDirection[]
-  user_attrs: Attribute[]
+  directions: Optuna.StudyDirection[]
+  user_attrs: Optuna.Attribute[]
   is_prefential: boolean
   datetime_start?: string
 }
@@ -338,10 +354,10 @@ export const deleteStudyArtifactAPI = (
 
 export const tellTrialAPI = (
   trialId: number,
-  state: TrialStateFinished,
+  state: Optuna.TrialStateFinished,
   values?: number[]
 ): Promise<void> => {
-  const req: { state: TrialState; values?: number[] } = {
+  const req: { state: Optuna.TrialState; values?: number[] } = {
     state: state,
     values: values,
   }
diff --git a/optuna_dashboard/ts/components/App.tsx b/optuna_dashboard/ts/components/App.tsx
index 7c0cbff6..4459ff93 100644
--- a/optuna_dashboard/ts/components/App.tsx
+++ b/optuna_dashboard/ts/components/App.tsx
@@ -55,6 +55,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 068dcff2..f0a31c8b 100644
--- a/optuna_dashboard/ts/components/AppDrawer.tsx
+++ b/optuna_dashboard/ts/components/AppDrawer.tsx
@@ -175,7 +175,7 @@ export const AppDrawer: FC<{
   }
 
   return (
-    <Box sx={{ display: "flex", width: "100%" }}>
+    <Box component="div" sx={{ display: "flex", width: "100%" }}>
       <AppBar position="fixed" open={open}>
         <Toolbar>
           <IconButton
@@ -316,7 +316,7 @@ export const AppDrawer: FC<{
             </ListItem>
           </List>
         )}
-        <Box sx={{ flexGrow: 1 }} />
+        <Box component="div" sx={{ flexGrow: 1 }} />
         <Divider />
         <List>
           {studyId !== undefined && (
@@ -359,6 +359,7 @@ export const AppDrawer: FC<{
               aria-describedby="modal-modal-description"
             >
               <Box
+                component="div"
                 sx={{
                   position: "absolute",
                   top: "50%",
diff --git a/optuna_dashboard/ts/components/Artifact/ArtifactCardMedia.tsx b/optuna_dashboard/ts/components/Artifact/ArtifactCardMedia.tsx
index fecef837..8ffc70ba 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/optuna"
 
 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..50e23df8 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/optuna"
 
 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..361a8153 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/optuna"
 
 export const StudyArtifactCards: FC<{ study: StudyDetail }> = ({ study }) => {
   const theme = useTheme()
@@ -40,7 +41,10 @@ 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..954bca0a 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/optuna"
 
 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..8f1cc971 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/optuna"
 
 export const TrialArtifactCards: FC<{ trial: Trial }> = ({ trial }) => {
   const theme = useTheme()
@@ -49,7 +50,10 @@ 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..df92b444 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 } from "ts/types/optuna"
 
 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 5ae54aea..d6244a1e 100644
--- a/optuna_dashboard/ts/components/CompareStudies.tsx
+++ b/optuna_dashboard/ts/components/CompareStudies.tsx
@@ -1,4 +1,5 @@
 import React, { FC, useEffect, useMemo, useState } from "react"
+import * as Optuna from "@optuna/types"
 import { useRecoilValue } from "recoil"
 import { useSnackbar } from "notistack"
 import { Link } from "react-router-dom"
@@ -31,6 +32,7 @@ import { GraphEdf } from "./GraphEdf"
 import { GraphHistory } from "./GraphHistory"
 import { useNavigate } from "react-router-dom"
 import { useQuery } from "../urlQuery"
+import { StudyDetails, StudySummary } from "ts/types/optuna"
 
 const useQueriedStudies = (
   studies: StudySummary[],
@@ -58,8 +60,8 @@ const getStudyListLink = (ids: number[]): string => {
 }
 
 const isEqualDirections = (
-  array1: StudyDirection[],
-  array2: StudyDirection[]
+  array1: Optuna.StudyDirection[],
+  array2: Optuna.StudyDirection[]
 ): boolean => {
   let i = array1.length
   if (i !== array2.length) return false
@@ -115,10 +117,14 @@ export const CompareStudies: FC<{
   )
 
   return (
-    <Box sx={{ display: "flex" }}>
+    <Box component="div" sx={{ display: "flex" }}>
       <AppDrawer toggleColorMode={toggleColorMode} toolbar={toolbar}>
-        <Box sx={{ display: "flex", flexDirection: "row", width: "100%" }}>
+        <Box
+          component="div"
+          sx={{ display: "flex", flexDirection: "row", width: "100%" }}
+        >
           <Box
+            component="div"
             sx={{
               minWidth: studyListWidth,
               overflow: "auto",
@@ -130,7 +136,7 @@ export const CompareStudies: FC<{
                 <Typography sx={{ p: theme.spacing(1, 0) }}>
                   Compare studies with Shift+Click
                 </Typography>
-                <Box sx={{ flexGrow: 1 }} />
+                <Box component="div" sx={{ flexGrow: 1 }} />
               </ListSubheader>
               <Divider />
               {studies.map((study) => {
@@ -200,6 +206,7 @@ export const CompareStudies: FC<{
                         primary={`${study.study_id}. ${study.study_name}`}
                       />
                       <Box
+                        component="div"
                         sx={{
                           display: "flex",
                           flexDirection: "row",
@@ -234,13 +241,17 @@ export const CompareStudies: FC<{
           </Box>
           <Divider orientation="vertical" flexItem />
           <Box
+            component="div"
             sx={{
               flexGrow: 1,
               overflow: "auto",
               height: `calc(100vh - ${theme.spacing(8)})`,
             }}
           >
-            <Box sx={{ display: "flex", flexDirection: "row", width: "100%" }}>
+            <Box
+              component="div"
+              sx={{ display: "flex", flexDirection: "row", width: "100%" }}
+            >
               <StudiesGraph studies={selected} />
             </Box>
           </Box>
@@ -274,7 +285,10 @@ const StudiesGraph: FC<{ studies: StudySummary[] }> = ({ studies }) => {
   const showStudyDetails = studies.map((study) => studyDetails[study.study_id])
 
   return (
-    <Box sx={{ display: "flex", width: "100%", flexDirection: "column" }}>
+    <Box
+      component="div"
+      sx={{ display: "flex", width: "100%", flexDirection: "column" }}
+    >
       <FormControl
         component="fieldset"
         sx={{
diff --git a/optuna_dashboard/ts/components/CreateStudyDialog.tsx b/optuna_dashboard/ts/components/CreateStudyDialog.tsx
index 04665b28..ed4926ff 100644
--- a/optuna_dashboard/ts/components/CreateStudyDialog.tsx
+++ b/optuna_dashboard/ts/components/CreateStudyDialog.tsx
@@ -18,6 +18,8 @@ import { useRecoilValue } from "recoil"
 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/optuna"
 
 export const useCreateStudyDialog = (): [() => void, () => ReactNode] => {
   const theme = useTheme()
@@ -25,7 +27,9 @@ export const useCreateStudyDialog = (): [() => void, () => ReactNode] => {
 
   const [newStudyName, setNewStudyName] = useState("")
   const [openNewStudyDialog, setOpenNewStudyDialog] = useState(false)
-  const [directions, setDirections] = useState<StudyDirection[]>(["minimize"])
+  const [directions, setDirections] = useState<Optuna.StudyDirection[]>([
+    "minimize",
+  ])
   const studies = useRecoilValue<StudySummary[]>(studySummariesState)
   const newStudyNameAlreadyUsed = studies.some(
     (v) => v.study_name === newStudyName
@@ -86,8 +90,8 @@ export const useCreateStudyDialog = (): [() => void, () => ReactNode] => {
               <Select
                 value={directions[i]}
                 onChange={(e) => {
-                  const newVal: StudyDirection[] = [...directions]
-                  newVal[i] = e.target.value as StudyDirection
+                  const newVal: Optuna.StudyDirection[] = [...directions]
+                  newVal[i] = e.target.value as Optuna.StudyDirection
                   setDirections(newVal)
                 }}
               >
@@ -103,7 +107,10 @@ export const useCreateStudyDialog = (): [() => void, () => ReactNode] => {
             startIcon={<AddIcon />}
             sx={{ marginRight: theme.spacing(1) }}
             onClick={() => {
-              const newVal: StudyDirection[] = [...directions, "minimize"]
+              const newVal: Optuna.StudyDirection[] = [
+                ...directions,
+                "minimize",
+              ]
               setDirections(newVal)
             }}
           >
@@ -115,7 +122,7 @@ export const useCreateStudyDialog = (): [() => void, () => ReactNode] => {
             sx={{ marginRight: theme.spacing(1) }}
             disabled={directions.length <= 1}
             onClick={() => {
-              const newVal: StudyDirection[] = [...directions]
+              const newVal: Optuna.StudyDirection[] = [...directions]
               newVal.pop()
               setDirections(newVal)
             }}
diff --git a/optuna_dashboard/ts/components/GraphContour.tsx b/optuna_dashboard/ts/components/GraphContour.tsx
index 44ed73f1..3d2d1a4c 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/optuna"
 
 const plotDomId = "graph-contour"
 const CONTOUR_DISABLED_THRESHOLD = 100
@@ -206,13 +207,8 @@ const ContourFrontend: FC<{
   )
 }
 
-const filterFunc = (trial: Trial, objectiveId: number): boolean => {
-  return (
-    trial.state === "Complete" &&
-    trial.values !== undefined &&
-    trial.values[objectiveId] !== "inf" &&
-    trial.values[objectiveId] !== "-inf"
-  )
+const filterFunc = (trial: Trial): boolean => {
+  return trial.state === "Complete" && trial.values !== undefined
 }
 
 const plotContour = (
@@ -227,7 +223,7 @@ const plotContour = (
   }
 
   const trials: Trial[] = study ? study.trials : []
-  const filteredTrials = trials.filter((t) => filterFunc(t, objectiveId))
+  const filteredTrials = trials.filter((t) => filterFunc(t))
   if (filteredTrials.length < 2 || xParam === null || yParam === null) {
     plotly.react(plotDomId, [], {
       template: colorTheme,
diff --git a/optuna_dashboard/ts/components/GraphEdf.tsx b/optuna_dashboard/ts/components/GraphEdf.tsx
index 80529c56..86be7802 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/optuna"
 
 const getPlotDomId = (objectiveId: number) => `graph-edf-${objectiveId}`
 
@@ -45,7 +46,7 @@ const GraphEdfBackend: FC<{
         console.error(err)
       })
   }, [studyIds, numCompletedTrials])
-  return <Box id={domId} sx={{ height: "450px" }} />
+  return <Box component="div" id={domId} sx={{ height: "450px" }} />
 }
 
 const GraphEdfFrontend: FC<{
@@ -74,14 +75,14 @@ const GraphEdfFrontend: FC<{
   }, [studies, target, colorTheme])
 
   return (
-    <Box>
+    <Box component="div">
       <Typography
         variant="h6"
         sx={{ margin: "1em 0", fontWeight: theme.typography.fontWeightBold }}
       >
         {`EDF for ${target.toLabel(studies[0].objective_names)}`}
       </Typography>
-      <Box id={domId} sx={{ height: "450px" }} />
+      <Box component="div" id={domId} sx={{ height: "450px" }} />
     </Box>
   )
 }
diff --git a/optuna_dashboard/ts/components/GraphHistory.tsx b/optuna_dashboard/ts/components/GraphHistory.tsx
index 38b190a3..784acc9b 100644
--- a/optuna_dashboard/ts/components/GraphHistory.tsx
+++ b/optuna_dashboard/ts/components/GraphHistory.tsx
@@ -22,13 +22,15 @@ import {
 } from "../trialFilter"
 import { usePlotlyColorTheme } from "../state"
 import { useNavigate } from "react-router-dom"
+import * as Optuna from "@optuna/types"
+import { StudyDetail, Trial } from "ts/types/optuna"
 
 const plotDomId = "graph-history"
 
 interface HistoryPlotInfo {
   study_name: string
   trials: Trial[]
-  directions: StudyDirection[]
+  directions: Optuna.StudyDirection[]
   objective_names?: string[]
 }
 
@@ -210,6 +212,7 @@ export const GraphHistory: FC<{
       </Grid>
       <Grid item xs={9}>
         <Box
+          component="div"
           id={plotDomId}
           sx={{
             height: "450px",
diff --git a/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx b/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx
index 12ef8d2c..4e20008a 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/optuna"
 
 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 b9395b9c..db223946 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/optuna"
 
 const plotDomId = "graph-intermediate-values"
 
@@ -26,7 +27,7 @@ export const GraphIntermediateValues: FC<{
         >
           Intermediate values
         </Typography>
-        <Box id={plotDomId} sx={{ height: "450px" }} />
+        <Box component="div" id={plotDomId} sx={{ height: "450px" }} />
       </CardContent>
     </Card>
   )
@@ -76,13 +77,10 @@ const plotIntermediateValue = (
       t.state === "Running"
   )
   const plotData: Partial<plotly.PlotData>[] = filteredTrials.map((trial) => {
-    const values = trial.intermediate_values.filter(
-      (iv) => iv.value !== "inf" && iv.value !== "-inf" && iv.value !== "nan"
-    )
     const isFeasible = trial.constraints.every((c) => c <= 0)
     return {
-      x: values.map((iv) => iv.step),
-      y: values.map((iv) => iv.value),
+      x: trial.intermediate_values.map((iv) => iv.step),
+      y: trial.intermediate_values.map((iv) => iv.value),
       marker: { maxdisplayed: 10 },
       mode: "lines+markers",
       type: "scatter",
diff --git a/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx b/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx
index e6c3fec0..cbbf1e2b 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/optuna"
 
 const plotDomId = "graph-parallel-coordinate"
 
@@ -121,7 +122,7 @@ const GraphParallelCoordinateBackend: FC<{
     }
   }, [error])
 
-  return <Box id={plotDomId} sx={{ height: "450px" }} />
+  return <Box component="div" id={plotDomId} sx={{ height: "450px" }} />
 }
 
 const GraphParallelCoordinateFrontend: FC<{
@@ -161,7 +162,7 @@ const GraphParallelCoordinateFrontend: FC<{
         {renderCheckBoxes()}
       </Grid>
       <Grid item xs={9}>
-        <Box id={plotDomId} sx={{ height: "450px" }} />
+        <Box component="div" id={plotDomId} sx={{ height: "450px" }} />
       </Grid>
     </Grid>
   )
@@ -246,7 +247,9 @@ const plotCoordinate = (
       )
       if (s.distribution.type === "CategoricalDistribution") {
         // categorical
-        const vocabArr: string[] = s.distribution.choices.map((c) => c.value)
+        const vocabArr: string[] = s.distribution.choices.map(
+          (c) => c?.toString() ?? "null"
+        )
         const tickvals: number[] = vocabArr.map((v, i) => i)
         return {
           label: breakLabelIfTooLong(s.name),
diff --git a/optuna_dashboard/ts/components/GraphParetoFront.tsx b/optuna_dashboard/ts/components/GraphParetoFront.tsx
index 9ddec25b..8e47844e 100644
--- a/optuna_dashboard/ts/components/GraphParetoFront.tsx
+++ b/optuna_dashboard/ts/components/GraphParetoFront.tsx
@@ -17,6 +17,8 @@ import { useNavigate } from "react-router-dom"
 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/optuna"
 
 const plotDomId = "graph-pareto-front"
 
@@ -53,7 +55,7 @@ const GraphParetoFrontBackend: FC<{
     }
   }, [error])
 
-  return <Box id={plotDomId} sx={{ height: "450px" }} />
+  return <Box component="div" id={plotDomId} sx={{ height: "450px" }} />
 }
 
 const GraphParetoFrontFrontend: FC<{
@@ -149,6 +151,7 @@ const GraphParetoFrontFrontend: FC<{
       </Grid>
       <Grid item xs={9}>
         <Box
+          component="div"
           id={plotDomId}
           sx={{
             height: "450px",
@@ -159,12 +162,14 @@ const GraphParetoFrontFrontend: FC<{
   )
 }
 
-const filterFunc = (trial: Trial, directions: StudyDirection[]): boolean => {
+const filterFunc = (
+  trial: Trial,
+  directions: Optuna.StudyDirection[]
+): boolean => {
   return (
     trial.state === "Complete" &&
     trial.values !== undefined &&
-    trial.values.length === directions.length &&
-    trial.values.every((v) => v !== "inf" && v !== "-inf")
+    trial.values.length === directions.length
   )
 }
 
diff --git a/optuna_dashboard/ts/components/GraphRank.tsx b/optuna_dashboard/ts/components/GraphRank.tsx
index a059322c..fea3f4cd 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/optuna"
 
 const plotDomId = "graph-rank"
 
@@ -65,7 +66,7 @@ const GraphRankBackend: FC<{
     }
   }, [error])
 
-  return <Box id={plotDomId} sx={{ height: "450px" }} />
+  return <Box component="div" id={plotDomId} sx={{ height: "450px" }} />
 }
 
 const GraphRankFrontend: FC<{
@@ -163,7 +164,7 @@ const GraphRankFrontend: FC<{
         ) : null}
       </Grid>
       <Grid item xs={9}>
-        <Box id={plotDomId} sx={{ height: "450px" }} />
+        <Box component="div" id={plotDomId} sx={{ height: "450px" }} />
       </Grid>
     </Grid>
   )
@@ -193,21 +194,13 @@ const getRankPlotInfo = (
   const zValues: number[] = []
   const isFeasible: boolean[] = []
   const hovertext: string[] = []
-  const convertTrialValueToNumber = (value: TrialValueNumber): number => {
-    // TrialValueNumber takes `number`, "inf", or "-inf".
-    return typeof value === "number"
-      ? value
-      : value.includes("-")
-        ? -Infinity
-        : Infinity
-  }
   filteredTrials.forEach((trial, i) => {
     const xValue = xAxis.values[i]
     const yValue = yAxis.values[i]
     if (xValue && yValue && trial.values) {
       xValues.push(xValue)
       yValues.push(yValue)
-      const zValue = convertTrialValueToNumber(trial.values[objectiveId])
+      const zValue = trial.values[objectiveId]
       zValues.push(zValue)
       const feasibility = trial.constraints.every((c) => c <= 0)
       isFeasible.push(feasibility)
diff --git a/optuna_dashboard/ts/components/GraphSlice.tsx b/optuna_dashboard/ts/components/GraphSlice.tsx
index b41a180c..917d9254 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/optuna"
 
 const plotDomId = "graph-slice"
 
@@ -66,7 +67,7 @@ const GraphSliceBackend: FC<{
     }
   }, [error])
 
-  return <Box id={plotDomId} sx={{ height: "450px" }} />
+  return <Box component="div" id={plotDomId} sx={{ height: "450px" }} />
 }
 
 const GraphSliceFrontend: FC<{
@@ -175,7 +176,7 @@ const GraphSliceFrontend: FC<{
         </FormControl>
       </Grid>
       <Grid item xs={9}>
-        <Box id={plotDomId} sx={{ height: "450px" }} />
+        <Box component="div" id={plotDomId} sx={{ height: "450px" }} />
       </Grid>
     </Grid>
   )
@@ -291,7 +292,9 @@ const plotSlice = (
       automargin: true, // Otherwise the label is outside of the plot
     }
   } else {
-    const vocabArr = selectedParamSpace.distribution.choices.map((c) => c.value)
+    const vocabArr = selectedParamSpace.distribution.choices.map(
+      (c) => c?.toString() ?? "null"
+    )
     const tickvals: number[] = vocabArr.map((v, i) => i)
     layout["xaxis"] = {
       title: selectedParamTarget.toLabel(),
diff --git a/optuna_dashboard/ts/components/GraphTimeline.tsx b/optuna_dashboard/ts/components/GraphTimeline.tsx
index 519399bb..d0b54389 100644
--- a/optuna_dashboard/ts/components/GraphTimeline.tsx
+++ b/optuna_dashboard/ts/components/GraphTimeline.tsx
@@ -6,6 +6,8 @@ import { usePlotlyColorTheme } from "../state"
 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/optuna"
 
 const plotDomId = "graph-timeline"
 const maxBars = 100
@@ -96,7 +98,7 @@ const plotTimeline = (
     return
   }
 
-  const cm: Record<TrialState, string> = {
+  const cm: Record<Optuna.TrialState, string> = {
     Complete: "blue",
     Fail: "red",
     Pruned: "orange",
diff --git a/optuna_dashboard/ts/components/Note.tsx b/optuna_dashboard/ts/components/Note.tsx
index 586f34e0..f54a3963 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/optuna"
 
 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
 }) => {
@@ -296,6 +302,7 @@ const MarkdownEditorModal: FC<{
         title="Markdown Editor"
       />
       <Box
+        component="div"
         sx={{
           flexGrow: 1,
           padding: theme.spacing(2),
@@ -306,6 +313,7 @@ const MarkdownEditorModal: FC<{
         <MarkdownRenderer body={previewMarkdown} />
       </Box>
       <Box
+        component="div"
         sx={{
           width: "100%",
           flexGrow: 1,
@@ -345,7 +353,10 @@ const MarkdownEditorModal: FC<{
           />
         )}
       </Box>
-      <Box sx={{ display: "flex", flexDirection: "row", alignItems: "center" }}>
+      <Box
+        component="div"
+        sx={{ display: "flex", flexDirection: "row", alignItems: "center" }}
+      >
         {notLatest && !saving && (
           <>
             <Typography
@@ -369,7 +380,7 @@ const MarkdownEditorModal: FC<{
             </Button>
           </>
         )}
-        <Box sx={{ flexGrow: 1 }} />
+        <Box component="div" sx={{ flexGrow: 1 }} />
         <Button
           variant="outlined"
           onClick={() => {
@@ -452,6 +463,7 @@ const ArtifactUploader: FC<{
 
   return (
     <Box
+      component="div"
       sx={{
         width: "300px",
         padding: theme.spacing(0, 1),
@@ -486,6 +498,7 @@ const ArtifactUploader: FC<{
         style={{ display: "none" }}
       />
       <Box
+        component="div"
         sx={{
           border: dragOver
             ? `3px dashed ${theme.palette.mode === "dark" ? "white" : "black"}`
@@ -499,6 +512,7 @@ const ArtifactUploader: FC<{
       >
         {dragOver && (
           <Box
+            component="div"
             sx={{
               width: "100%",
               height: "100%",
diff --git a/optuna_dashboard/ts/components/Preferential/PreferentialAnalytics.tsx b/optuna_dashboard/ts/components/Preferential/PreferentialAnalytics.tsx
index 8d0ac160..2341ccfb 100644
--- a/optuna_dashboard/ts/components/Preferential/PreferentialAnalytics.tsx
+++ b/optuna_dashboard/ts/components/Preferential/PreferentialAnalytics.tsx
@@ -12,6 +12,7 @@ import { DataGrid, DataGridColumn } from "../DataGrid"
 import { BestTrialsCard } from "../BestTrialsCard"
 import { useStudyDetailValue, useStudySummaryValue } from "../../state"
 import { Contour } from "../GraphContour"
+import * as Optuna from "@optuna/types"
 
 export const PreferentialAnalytics: FC<{ studyId: number }> = ({ studyId }) => {
   const theme = useTheme()
@@ -19,7 +20,7 @@ export const PreferentialAnalytics: FC<{ studyId: number }> = ({ studyId }) => {
   const studyDetail = useStudyDetailValue(studyId)
 
   const userAttrs = studySummary?.user_attrs || studyDetail?.user_attrs || []
-  const userAttrColumns: DataGridColumn<Attribute>[] = [
+  const userAttrColumns: DataGridColumn<Optuna.Attribute>[] = [
     { field: "key", label: "Key", sortable: true },
     { field: "value", label: "Value", sortable: true },
   ]
@@ -54,7 +55,7 @@ export const PreferentialAnalytics: FC<{ studyId: number }> = ({ studyId }) => {
               >
                 Study User Attributes
               </Typography>
-              <DataGrid<Attribute>
+              <DataGrid<Optuna.Attribute>
                 columns={userAttrColumns}
                 rows={userAttrs}
                 keyField={"key"}
diff --git a/optuna_dashboard/ts/components/Preferential/PreferentialGraph.tsx b/optuna_dashboard/ts/components/Preferential/PreferentialGraph.tsx
index dd7a3691..4e135d91 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/optuna"
 
 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..9f5c090b 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/optuna"
 
 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..af45c6ec 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/optuna"
 
 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..095e65ba 100644
--- a/optuna_dashboard/ts/components/Preferential/PreferentialTrials.tsx
+++ b/optuna_dashboard/ts/components/Preferential/PreferentialTrials.tsx
@@ -34,6 +34,14 @@ import {
   useThreejsArtifactModal,
 } from "../Artifact/ThreejsArtifactViewer"
 import { PreferentialOutputComponent } from "./PreferentialOutputComponent"
+import {
+  Artifact,
+  FeedbackComponentArtifact,
+  FeedbackComponentNote,
+  FeedbackComponentType,
+  StudyDetail,
+  Trial,
+} from "ts/types/optuna"
 
 const SettingsPage: FC<{
   studyDetail: StudyDetail
@@ -216,6 +224,7 @@ const PreferentialTrial: FC<{
   if (trial === undefined) {
     return (
       <Box
+        component="div"
         sx={{
           width: trialWidth,
           minHeight: trialHeight,
@@ -244,6 +253,7 @@ const PreferentialTrial: FC<{
     >
       <CardActions>
         <Box
+          component="div"
           sx={{
             margin: theme.spacing(0, 2),
             maxWidth: `calc(${trialWidth}px - ${
@@ -322,6 +332,7 @@ const PreferentialTrial: FC<{
               urlPath={urlPath}
             />
             <Box
+              component="div"
               sx={{
                 position: "absolute",
                 top: 0,
@@ -491,8 +502,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 +513,7 @@ export const PreferentialTrials: FC<{ studyDetail: StudyDetail | null }> = ({
           Which trial is the worst?
         </Typography>
         <Box
+          component="div"
           display="flex"
           sx={{
             marginLeft: "auto",
@@ -541,7 +553,10 @@ 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 +588,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 +604,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..0765be3f 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/optuna"
 
 export const useRenameStudyDialog = (
   studies: StudySummary[]
diff --git a/optuna_dashboard/ts/components/Settings.tsx b/optuna_dashboard/ts/components/Settings.tsx
index 87061283..feae3124 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/optuna"
 
 interface SettingsProps {
   handleClose: () => void
diff --git a/optuna_dashboard/ts/components/StudyDetail.tsx b/optuna_dashboard/ts/components/StudyDetail.tsx
index e3cf371e..8d5bce9b 100644
--- a/optuna_dashboard/ts/components/StudyDetail.tsx
+++ b/optuna_dashboard/ts/components/StudyDetail.tsx
@@ -35,12 +35,12 @@ import { PreferentialHistory } from "./Preferential/PreferentialHistory"
 import { PreferentialAnalytics } from "./Preferential/PreferentialAnalytics"
 import { PreferentialGraph } from "./Preferential/PreferentialGraph"
 
-interface ParamTypes {
-  studyId: string
-}
-
 export const useURLVars = (): number => {
-  const { studyId } = useParams<ParamTypes>()
+  const { studyId } = useParams<{ studyId: string }>()
+
+  if (studyId === undefined) {
+    throw new Error("studyId is not defined")
+  }
 
   return useMemo(() => parseInt(studyId, 10), [studyId])
 }
@@ -102,7 +102,10 @@ export const StudyDetail: FC<{
     content = isPreferential ? (
       <PreferentialAnalytics studyId={studyId} />
     ) : (
-      <Box sx={{ display: "flex", width: "100%", flexDirection: "column" }}>
+      <Box
+        component="div"
+        sx={{ display: "flex", width: "100%", flexDirection: "column" }}
+      >
         <Typography
           variant="h5"
           sx={{
@@ -162,7 +165,10 @@ export const StudyDetail: FC<{
     content = <TrialList studyDetail={studyDetail} />
   } else if (page === "trialTable") {
     content = (
-      <Box sx={{ display: "flex", width: "100%", flexDirection: "column" }}>
+      <Box
+        component="div"
+        sx={{ display: "flex", width: "100%", flexDirection: "column" }}
+      >
         <Card sx={{ margin: theme.spacing(2) }}>
           <CardContent>
             <TrialTable studyDetail={studyDetail} initialRowsPerPage={50} />
@@ -173,6 +179,7 @@ export const StudyDetail: FC<{
   } else if (page === "note" && studyDetail !== null) {
     content = (
       <Box
+        component="div"
         sx={{
           height: `calc(100vh - ${theme.spacing(8)})`,
           display: "flex",
@@ -199,6 +206,7 @@ export const StudyDetail: FC<{
   } else if (page === "graph") {
     content = (
       <Box
+        component="div"
         sx={{
           height: `calc(100vh - ${theme.spacing(8)})`,
           padding: theme.spacing(2),
@@ -234,7 +242,7 @@ export const StudyDetail: FC<{
   )
 
   return (
-    <Box sx={{ display: "flex" }}>
+    <Box component="div" sx={{ display: "flex" }}>
       <AppDrawer
         studyId={studyId}
         page={page}
diff --git a/optuna_dashboard/ts/components/StudyHistory.tsx b/optuna_dashboard/ts/components/StudyHistory.tsx
index b63030ca..d112486a 100644
--- a/optuna_dashboard/ts/components/StudyHistory.tsx
+++ b/optuna_dashboard/ts/components/StudyHistory.tsx
@@ -26,6 +26,8 @@ import {
 } from "../state"
 import FormControlLabel from "@mui/material/FormControlLabel"
 import { artifactIsAvailable } from "../state"
+import * as Optuna from "@optuna/types"
+import { Trial } from "ts/types/optuna"
 
 export const StudyHistory: FC<{ studyId: number }> = ({ studyId }) => {
   const theme = useTheme()
@@ -45,13 +47,16 @@ export const StudyHistory: FC<{ studyId: number }> = ({ studyId }) => {
   }
 
   const userAttrs = studySummary?.user_attrs || studyDetail?.user_attrs || []
-  const userAttrColumns: DataGridColumn<Attribute>[] = [
+  const userAttrColumns: DataGridColumn<Optuna.Attribute>[] = [
     { field: "key", label: "Key", sortable: true },
     { field: "value", label: "Value", sortable: true },
   ]
   const trials: Trial[] = studyDetail?.trials || []
   return (
-    <Box sx={{ display: "flex", width: "100%", flexDirection: "column" }}>
+    <Box
+      component="div"
+      sx={{ display: "flex", width: "100%", flexDirection: "column" }}
+    >
       <FormControl
         component="fieldset"
         sx={{
@@ -148,7 +153,7 @@ export const StudyHistory: FC<{ studyId: number }> = ({ studyId }) => {
               >
                 Study User Attributes
               </Typography>
-              <DataGrid<Attribute>
+              <DataGrid<Optuna.Attribute>
                 columns={userAttrColumns}
                 rows={userAttrs}
                 keyField={"key"}
diff --git a/optuna_dashboard/ts/components/StudyList.tsx b/optuna_dashboard/ts/components/StudyList.tsx
index f5071497..b2dddd2b 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 } from "ts/types/optuna"
 
 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 36bea2a7..f870ccad 100644
--- a/optuna_dashboard/ts/components/TrialFormWidgets.tsx
+++ b/optuna_dashboard/ts/components/TrialFormWidgets.tsx
@@ -16,6 +16,16 @@ import {
 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/optuna"
 
 type WidgetState = {
   isValid: boolean
@@ -26,7 +36,7 @@ type WidgetState = {
 export const TrialFormWidgets: FC<{
   trial: Trial
   objectiveNames: string[]
-  directions: StudyDirection[]
+  directions: Optuna.StudyDirection[]
   formWidgets?: FormWidgets
 }> = ({ trial, objectiveNames, directions, formWidgets }) => {
   if (
@@ -136,7 +146,7 @@ const UpdatableFormWidgets: FC<{
   }
 
   return (
-    <Box sx={{ p: theme.spacing(1, 0) }}>
+    <Box component="div" sx={{ p: theme.spacing(1, 0) }}>
       <Card
         sx={{
           display: "flex",
@@ -149,6 +159,7 @@ const UpdatableFormWidgets: FC<{
       >
         {widgetStates.map((ws) => ws.render())}
         <Box
+          component="div"
           sx={{
             display: "flex",
             flexDirection: "row",
@@ -283,7 +294,7 @@ export const useSliderWidget = (
       <FormLabel>
         {metricName} - {widget.description}
       </FormLabel>
-      <Box sx={{ padding: theme.spacing(0, 2) }}>
+      <Box component="div" sx={{ padding: theme.spacing(0, 2) }}>
         <Slider
           onChange={(e) => {
             // @ts-ignore
@@ -348,7 +359,7 @@ const ReadonlyFormWidgets: FC<{
   formWidgets: FormWidgets
 }> = ({ trial, widgetNames, formWidgets }) => {
   const theme = useTheme()
-  const getValue = (i: number): string | TrialValueNumber => {
+  const getValue = (i: number): string | number => {
     if (formWidgets.output_type === "user_attr") {
       const widget = formWidgets.widgets[i] as UserAttrFormWidget
       return (
@@ -369,7 +380,7 @@ const ReadonlyFormWidgets: FC<{
   }
 
   return (
-    <Box sx={{ p: theme.spacing(1, 0) }}>
+    <Box component="div" sx={{ p: theme.spacing(1, 0) }}>
       <Card
         sx={{
           display: "flex",
@@ -424,11 +435,9 @@ const ReadonlyFormWidgets: FC<{
                 <FormLabel>
                   {widgetName} - {widget.description}
                 </FormLabel>
-                <Box sx={{ padding: theme.spacing(0, 2) }}>
+                <Box component="div" sx={{ padding: theme.spacing(0, 2) }}>
                   <Slider
-                    defaultValue={
-                      value === "inf" || value === "-inf" ? undefined : value
-                    }
+                    defaultValue={value}
                     min={widget.min}
                     max={widget.max}
                     step={widget.step}
diff --git a/optuna_dashboard/ts/components/TrialList.tsx b/optuna_dashboard/ts/components/TrialList.tsx
index 3d47f91a..c6ea1028 100644
--- a/optuna_dashboard/ts/components/TrialList.tsx
+++ b/optuna_dashboard/ts/components/TrialList.tsx
@@ -19,6 +19,7 @@ import FilterListIcon from "@mui/icons-material/FilterList"
 import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank"
 import CheckBoxIcon from "@mui/icons-material/CheckBox"
 import StopCircleIcon from "@mui/icons-material/StopCircle"
+import * as Optuna from "@optuna/types"
 
 import { TrialNote } from "./Note"
 import { useNavigate } from "react-router-dom"
@@ -29,10 +30,10 @@ import { actionCreator } from "../action"
 import { TrialFormWidgets } from "./TrialFormWidgets"
 import { TrialArtifactCards } from "./Artifact/TrialArtifactCards"
 import { useQuery } from "../urlQuery"
-
 import { useVirtualizer } from "@tanstack/react-virtual"
+import { FormWidgets, StudyDetail, Trial } from "ts/types/optuna"
 
-const states: TrialState[] = [
+const states: Optuna.TrialState[] = [
   "Complete",
   "Pruned",
   "Fail",
@@ -49,7 +50,7 @@ type Color =
   | "success"
   | "warning"
 
-const getChipColor = (state: TrialState): Color => {
+const getChipColor = (state: Optuna.TrialState): Color => {
   if (state === "Complete") {
     return "primary"
   } else if (state === "Running") {
@@ -64,25 +65,25 @@ const getChipColor = (state: TrialState): Color => {
   return "default"
 }
 
-const useExcludedStates = (query: URLSearchParams): TrialState[] => {
+const useExcludedStates = (query: URLSearchParams): Optuna.TrialState[] => {
   return useMemo(() => {
     const exclude = query.get("exclude")
     if (exclude === null) {
       return []
     }
-    const excluded: TrialState[] = exclude
+    const excluded: Optuna.TrialState[] = exclude
       .split(",")
-      .map((s): TrialState | undefined => {
+      .map((s): Optuna.TrialState | undefined => {
         return states.find((state) => state.toUpperCase() === s.toUpperCase())
       })
-      .filter((s): s is TrialState => s !== undefined)
+      .filter((s): s is Optuna.TrialState => s !== undefined)
     return excluded
   }, [query])
 }
 
 const useTrials = (
   studyDetail: StudyDetail | null,
-  excludedStates: TrialState[]
+  excludedStates: Optuna.TrialState[]
 ): Trial[] => {
   return useMemo(() => {
     let result = studyDetail !== null ? studyDetail.trials : []
@@ -123,7 +124,7 @@ const useIsBestTrial = (
 export const TrialListDetail: FC<{
   trial: Trial
   isBestTrial: (trialId: number) => boolean
-  directions: StudyDirection[]
+  directions: Optuna.StudyDirection[]
   objectiveNames: string[]
   formWidgets?: FormWidgets
 }> = ({ trial, isBestTrial, directions, objectiveNames, formWidgets }) => {
@@ -138,7 +139,7 @@ export const TrialListDetail: FC<{
     ["Value", trial.values?.map((v) => v.toString()).join(", ") || "None"],
     [
       "Intermediate Values",
-      <Box>
+      <Box component="div">
         {trial.intermediate_values.map((v) => (
           <Typography key={v.step}>
             {v.step} {v.value}
@@ -148,7 +149,7 @@ export const TrialListDetail: FC<{
     ],
     [
       "Parameter",
-      <Box>
+      <Box component="div">
         {params.map((p) => (
           <Typography key={p.name}>
             {p.name} {p.param_external_value}
@@ -172,7 +173,7 @@ export const TrialListDetail: FC<{
     ],
     [
       "User Attributes",
-      <Box>
+      <Box component="div">
         {trial.user_attrs.map((t) => (
           <Typography key={t.key}>
             {t.key} {t.value}
@@ -186,6 +187,7 @@ export const TrialListDetail: FC<{
     value: string | null | ReactNode
   ): ReactNode => (
     <Box
+      component="div"
       key={key}
       sx={{
         display: "flex",
@@ -203,6 +205,7 @@ export const TrialListDetail: FC<{
         {key}
       </Typography>
       <Box
+        component="div"
         sx={{
           bgcolor:
             theme.palette.mode === "dark"
@@ -223,7 +226,10 @@ export const TrialListDetail: FC<{
   )
 
   return (
-    <Box sx={{ width: "100%", padding: theme.spacing(2, 2, 0, 2) }}>
+    <Box
+      component="div"
+      sx={{ width: "100%", padding: theme.spacing(2, 2, 0, 2) }}
+    >
       <Typography
         variant="h4"
         sx={{
@@ -234,6 +240,7 @@ export const TrialListDetail: FC<{
         Trial {trial.number} (trial_id={trial.trial_id})
       </Typography>
       <Box
+        component="div"
         sx={{
           marginBottom: theme.spacing(1),
           display: "flex",
@@ -249,7 +256,7 @@ export const TrialListDetail: FC<{
         {isBestTrial(trial.trial_id) ? (
           <Chip label={"Best Trial"} color="secondary" variant="outlined" />
         ) : null}
-        <Box sx={{ flexGrow: 1 }} />
+        <Box component="div" sx={{ flexGrow: 1 }} />
         {trial.state === "Running" ? (
           <Button
             variant="outlined"
@@ -286,6 +293,7 @@ export const TrialListDetail: FC<{
         formWidgets={formWidgets}
       />
       <Box
+        component="div"
         sx={{
           marginBottom: theme.spacing(2),
           display: "flex",
@@ -303,7 +311,7 @@ export const TrialListDetail: FC<{
 
 const getTrialListLink = (
   studyId: number,
-  exclude: TrialState[],
+  exclude: Optuna.TrialState[],
   numbers: number[]
 ): string => {
   const base = URL_PREFIX + `/studies/${studyId}/trials`
@@ -356,8 +364,12 @@ export const TrialList: FC<{ studyDetail: StudyDetail | null }> = ({
     queried.length > 0 ? queried : trials.length > 0 ? [trials[0]] : []
 
   return (
-    <Box sx={{ display: "flex", flexDirection: "row", width: "100%" }}>
+    <Box
+      component="div"
+      sx={{ display: "flex", flexDirection: "row", width: "100%" }}
+    >
       <Box
+        component="div"
         ref={listParentRef}
         sx={{
           minWidth: trialListWidth,
@@ -370,7 +382,7 @@ export const TrialList: FC<{ studyDetail: StudyDetail | null }> = ({
             <Typography sx={{ p: theme.spacing(1, 0) }}>
               {trials.length} Trials
             </Typography>
-            <Box sx={{ flexGrow: 1 }} />
+            <Box component="div" sx={{ flexGrow: 1 }} />
             <IconButton
               aria-label="Filter"
               aria-controls={openFilterMenu ? "filter-trials" : undefined}
@@ -424,6 +436,7 @@ export const TrialList: FC<{ studyDetail: StudyDetail | null }> = ({
           </ListSubheader>
           <Divider />
           <Box
+            component="div"
             sx={{
               width: "100%",
               height: `${rowVirtualizer.getTotalSize()}px`,
@@ -485,7 +498,7 @@ export const TrialList: FC<{ studyDetail: StudyDetail | null }> = ({
                     }}
                   >
                     <ListItemText primary={`Trial ${trial.number}`} />
-                    <Box>
+                    <Box component="div">
                       <Chip
                         color={getChipColor(trial.state)}
                         label={trial.state}
@@ -512,13 +525,17 @@ export const TrialList: FC<{ studyDetail: StudyDetail | null }> = ({
       </Box>
       <Divider orientation="vertical" flexItem />
       <Box
+        component="div"
         sx={{
           flexGrow: 1,
           overflow: "auto",
           height: `calc(100vh - ${theme.spacing(8)})`,
         }}
       >
-        <Box sx={{ display: "flex", flexDirection: "row", width: "100%" }}>
+        <Box
+          component="div"
+          sx={{ display: "flex", flexDirection: "row", width: "100%" }}
+        >
           {selected.length === 0
             ? null
             : selected.map((t) => (
diff --git a/optuna_dashboard/ts/components/TrialTable.tsx b/optuna_dashboard/ts/components/TrialTable.tsx
index a150908a..58dd7e0c 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 } from "ts/types/optuna"
 
 export const TrialTable: FC<{
   studyDetail: StudyDetail | null
@@ -26,8 +27,8 @@ export const TrialTable: FC<{
     },
   ]
   const valueComparator = (
-    firstVal?: TrialValueNumber,
-    secondVal?: TrialValueNumber,
+    firstVal?: number,
+    secondVal?: number,
     ascending: boolean = true
   ): number => {
     if (firstVal === secondVal) {
@@ -38,11 +39,6 @@ export const TrialTable: FC<{
     } else if (secondVal === undefined) {
       return ascending ? 1 : -1
     }
-    if (firstVal === "-inf" || secondVal === "inf") {
-      return 1
-    } else if (secondVal === "-inf" || firstVal === "inf") {
-      return -1
-    }
     return firstVal < secondVal ? 1 : -1
   }
   if (studyDetail === null || studyDetail.directions.length === 1) {
@@ -96,7 +92,7 @@ export const TrialTable: FC<{
     const sortable = s.distribution.type !== "CategoricalDistribution"
     const filterChoices: (string | null)[] | undefined =
       s.distribution.type === "CategoricalDistribution"
-        ? s.distribution.choices.map((c) => c.value)
+        ? s.distribution.choices.map((c) => c?.toString() ?? "null")
         : undefined
     const hasMissingValue = trials.some(
       (t) => !t.params.some((p) => p.name === s.name)
diff --git a/optuna_dashboard/ts/components/UserDefinedPlot.tsx b/optuna_dashboard/ts/components/UserDefinedPlot.tsx
index 029c4b57..615b3e19 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/optuna"
 
 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/dateUtil.ts b/optuna_dashboard/ts/dateUtil.ts
index 3d4bf2bb..1066e519 100644
--- a/optuna_dashboard/ts/dateUtil.ts
+++ b/optuna_dashboard/ts/dateUtil.ts
@@ -1,5 +1,5 @@
 export const formatDate = (date: Date): string => {
-  const options = {
+  const options: Intl.DateTimeFormatOptions = {
     year: "numeric",
     month: "numeric",
     day: "numeric",
diff --git a/optuna_dashboard/ts/dominatedTrials.ts b/optuna_dashboard/ts/dominatedTrials.ts
index b1571775..e33b70b9 100644
--- a/optuna_dashboard/ts/dominatedTrials.ts
+++ b/optuna_dashboard/ts/dominatedTrials.ts
@@ -1,15 +1,20 @@
-const filterFunc = (trial: Trial, directions: StudyDirection[]): boolean => {
+import * as Optuna from "@optuna/types"
+import { Trial } from "./types/optuna"
+
+const filterFunc = (
+  trial: Trial,
+  directions: Optuna.StudyDirection[]
+): boolean => {
   return (
     trial.state === "Complete" &&
     trial.values !== undefined &&
-    trial.values.length === directions.length &&
-    trial.values.every((v) => v !== "inf" && v !== "-inf")
+    trial.values.length === directions.length
   )
 }
 
 export const getDominatedTrials = (
   trials: Trial[],
-  directions: StudyDirection[]
+  directions: Optuna.StudyDirection[]
 ): Trial[] => {
   // TODO(c-bata): Use log-linear algorithm like Optuna.
   // TODO(c-bata): Use this function at GraphParetoFront.
diff --git a/optuna_dashboard/ts/graphUtil.ts b/optuna_dashboard/ts/graphUtil.ts
index 2bed664e..ecf6240a 100644
--- a/optuna_dashboard/ts/graphUtil.ts
+++ b/optuna_dashboard/ts/graphUtil.ts
@@ -1,3 +1,6 @@
+import { SearchSpaceItem, Trial } from "./types/optuna"
+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) =>
@@ -42,7 +45,7 @@ const getAxisInfoForCategoricalParams = (
   )
 
   const indices = distribution.choices
-    .map((c) => c.value)
+    .map((c) => c?.toString() ?? "null")
     .sort((a, b) =>
       a.toLowerCase() < b.toLowerCase()
         ? -1
@@ -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..36cb9f86 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/optuna"
 
 export const useParamImportance = ({
   numCompletedTrials,
diff --git a/optuna_dashboard/ts/searchSpace.ts b/optuna_dashboard/ts/searchSpace.ts
index daf79b11..abff8822 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/optuna"
+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 07071af1..84a1d74a 100644
--- a/optuna_dashboard/ts/state.ts
+++ b/optuna_dashboard/ts/state.ts
@@ -1,9 +1,17 @@
+import * as Optuna from "@optuna/types"
 import { atom, useRecoilValue } from "recoil"
 import {
   LightColorTemplates,
   DarkColorTemplates,
 } from "./components/PlotlyColorTemplates"
 import { useLocalStorage } from "usehooks-ts"
+import {
+  Artifact,
+  PlotlyColorTheme,
+  StudyDetail,
+  StudyDetails,
+  StudySummary,
+} from "./types/optuna"
 
 export const studySummariesState = atom<StudySummary[]>({
   key: "studySummaries",
@@ -86,7 +94,7 @@ export const useTrialUpdatingValue = (trialId: number): boolean => {
 
 export const useStudyDirections = (
   studyId: number
-): StudyDirection[] | null => {
+): Optuna.StudyDirection[] | null => {
   const studyDetail = useStudyDetailValue(studyId)
   const studySummary = useStudySummaryValue(studyId)
   return studyDetail?.directions || studySummary?.directions || null
diff --git a/optuna_dashboard/ts/trialFilter.ts b/optuna_dashboard/ts/trialFilter.ts
index 4fe7e35a..111367b0 100644
--- a/optuna_dashboard/ts/trialFilter.ts
+++ b/optuna_dashboard/ts/trialFilter.ts
@@ -1,4 +1,6 @@
 import { useMemo, useState } from "react"
+import * as Optuna from "@optuna/types"
+import { SearchSpaceItem, StudyDetail, Trial } from "./types/optuna"
 
 type TargetKind = "objective" | "user_attr" | "params"
 
@@ -67,7 +69,7 @@ export class Target {
         return null
       }
       const value = trial.values[objectiveId]
-      if (value === "inf" || value === "-inf") {
+      if (value === Infinity || value === -Infinity) {
         return null
       }
       return value
@@ -209,8 +211,11 @@ export const useObjectiveAndUserAttrTargetsFromStudies = (
     }, Number.MAX_VALUE)
   }, [studies])
 
-  const intersect = (arrays: AttributeSpec[][]) => {
-    const atrEqual = (obj1: AttributeSpec, obj2: AttributeSpec) => {
+  const intersect = (arrays: Optuna.AttributeSpec[][]) => {
+    const atrEqual = (
+      obj1: Optuna.AttributeSpec,
+      obj2: Optuna.AttributeSpec
+    ) => {
       return obj1.key === obj2.key
     }
     return arrays.reduce((a, b) =>
diff --git a/optuna_dashboard/ts/types/index.d.ts b/optuna_dashboard/ts/types/index.d.ts
index 789dd5ff..9175a554 100644
--- a/optuna_dashboard/ts/types/index.d.ts
+++ b/optuna_dashboard/ts/types/index.d.ts
@@ -6,240 +6,3 @@ declare module "*.svg"
 declare const APP_BAR_TITLE: string
 declare const API_ENDPOINT: string
 declare const URL_PREFIX: string
-
-type TrialValueNumber = number | "inf" | "-inf"
-type TrialIntermediateValueNumber = number | "inf" | "-inf" | "nan"
-type TrialState = "Running" | "Complete" | "Pruned" | "Fail" | "Waiting"
-type TrialStateFinished = "Complete" | "Fail" | "Pruned"
-type StudyDirection = "maximize" | "minimize" | "not_set"
-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 CategoricalDistribution = {
-  type: "CategoricalDistribution"
-  choices: { pytype: string; value: string }[]
-}
-
-type Distribution =
-  | FloatDistribution
-  | IntDistribution
-  | CategoricalDistribution
-
-type GraphVisibility = {
-  history: boolean
-  paretoFront: boolean
-  parallelCoordinate: boolean
-  intermediateValues: boolean
-  edf: boolean
-  contour: boolean
-  importances: boolean
-  slice: boolean
-}
-
-type TrialIntermediateValue = {
-  step: number
-  value: TrialIntermediateValueNumber
-}
-
-type TrialParam = {
-  name: string
-  param_internal_value: number
-  param_external_value: string
-  param_external_type: string
-  distribution: Distribution
-}
-
-type ParamImportance = {
-  name: string
-  importance: number
-  distribution: Distribution
-}
-
-type SearchSpaceItem = {
-  name: string
-  distribution: Distribution
-}
-
-type Attribute = {
-  key: string
-  value: string
-}
-
-type AttributeSpec = {
-  key: string
-  sortable: boolean
-}
-
-type Note = {
-  version: number
-  body: string
-}
-
-type Artifact = {
-  artifact_id: string
-  filename: string
-  mimetype: string
-  encoding: string
-}
-
-type Trial = {
-  trial_id: number
-  study_id: number
-  number: number
-  state: TrialState
-  values?: TrialValueNumber[]
-  intermediate_values: TrialIntermediateValue[]
-  datetime_start?: Date
-  datetime_complete?: Date
-  params: TrialParam[]
-  fixed_params: {
-    name: string
-    param_external_value: string
-  }[]
-  user_attrs: Attribute[]
-  constraints: number[]
-  note: Note
-  artifacts: Artifact[]
-}
-
-type StudySummary = {
-  study_id: number
-  study_name: string
-  directions: StudyDirection[]
-  user_attrs: Attribute[]
-  is_preferential: boolean
-  datetime_start?: Date
-}
-
-type ObjectiveChoiceWidget = {
-  type: "choice"
-  description: string
-  user_attr_key?: string
-  choices: string[]
-  values: number[]
-}
-
-type ObjectiveSliderWidget = {
-  type: "slider"
-  description: string
-  user_attr_key?: string
-  min: number
-  max: number
-  step: number | null
-  labels:
-    | {
-        value: number
-        label: string
-      }[]
-    | null
-}
-
-type ObjectiveTextInputWidget = {
-  type: "text"
-  description: string
-  optional: boolean
-  user_attr_key?: string
-}
-
-type ObjectiveUserAttrRef = {
-  type: "user_attr"
-  key: string
-}
-
-type ObjectiveFormWidget =
-  | ObjectiveChoiceWidget
-  | ObjectiveSliderWidget
-  | ObjectiveTextInputWidget
-  | ObjectiveUserAttrRef
-
-type UserAttrFormWidget =
-  | ObjectiveChoiceWidget
-  | ObjectiveSliderWidget
-  | ObjectiveTextInputWidget
-
-type FormWidgets =
-  | {
-      output_type: "objective"
-      widgets: ObjectiveFormWidget[]
-    }
-  | {
-      output_type: "user_attr"
-      widgets: UserAttrFormWidget[]
-    }
-
-type PlotlyGraphObject = {
-  id: string
-  graph_object: string
-}
-
-type FeedbackComponentNote = {
-  output_type: "note"
-}
-
-type FeedbackComponentArtifact = {
-  output_type: "artifact"
-  artifact_key: string
-}
-
-type FeedbackComponentType = FeedbackComponentArtifact | FeedbackComponentNote
-
-type StudyDetail = {
-  id: number
-  name: string
-  directions: StudyDirection[]
-  user_attrs: Attribute[]
-  datetime_start: Date
-  best_trials: Trial[]
-  trials: Trial[]
-  intersection_search_space: SearchSpaceItem[]
-  union_search_space: SearchSpaceItem[]
-  union_user_attrs: AttributeSpec[]
-  has_intermediate_values: boolean
-  note: Note
-  is_preferential: boolean
-  objective_names?: string[]
-  form_widgets?: FormWidgets
-  feedback_component_type: FeedbackComponentType
-  preferences?: [number, number][]
-  preference_history?: PreferenceHistory[]
-  plotly_graph_objects: PlotlyGraphObject[]
-  artifacts: Artifact[]
-  skipped_trial_numbers: number[]
-}
-
-type StudyDetails = {
-  [study_id: string]: StudyDetail
-}
-
-type PreferenceHistory = {
-  id: string
-  candidates: number[]
-  clicked: number
-  feedback_mode: PreferenceFeedbackMode
-  timestamp: Date
-  preferences: [number, number][]
-  is_removed: boolean
-}
-
-type PlotlyColorThemeDark = "default"
-type PlotlyColorThemeLight = "default" | "seaborn" | "presentation" | "ggplot2"
-
-type PlotlyColorTheme = {
-  dark: PlotlyColorThemeDark
-  light: PlotlyColorThemeLight
-}
diff --git a/optuna_dashboard/ts/types/optuna.ts b/optuna_dashboard/ts/types/optuna.ts
new file mode 100644
index 00000000..01844f72
--- /dev/null
+++ b/optuna_dashboard/ts/types/optuna.ts
@@ -0,0 +1,198 @@
+import * as Optuna from "@optuna/types"
+
+export type PreferenceFeedbackMode = "ChooseWorst"
+
+export type GraphVisibility = {
+  history: boolean
+  paretoFront: boolean
+  parallelCoordinate: boolean
+  intermediateValues: boolean
+  edf: boolean
+  contour: boolean
+  importances: boolean
+  slice: boolean
+}
+
+export type TrialParam = {
+  name: string
+  param_internal_value: number
+  param_external_value: string
+  param_external_type: string
+  distribution: Optuna.Distribution
+}
+
+export type ParamImportance = {
+  name: string
+  importance: number
+  distribution: Optuna.Distribution
+}
+
+export type SearchSpaceItem = {
+  name: string
+  distribution: Optuna.Distribution
+}
+
+export type Note = {
+  version: number
+  body: string
+}
+
+export type Artifact = {
+  artifact_id: string
+  filename: string
+  mimetype: string
+  encoding: string
+}
+
+export type Trial = {
+  trial_id: number
+  study_id: number
+  number: number
+  state: Optuna.TrialState
+  values?: number[]
+  intermediate_values: Optuna.TrialIntermediateValue[]
+  datetime_start?: Date
+  datetime_complete?: Date
+  params: TrialParam[]
+  fixed_params: {
+    name: string
+    param_external_value: string
+  }[]
+  user_attrs: Optuna.Attribute[]
+  constraints: number[]
+  note: Note
+  artifacts: Artifact[]
+}
+
+export type StudySummary = {
+  study_id: number
+  study_name: string
+  directions: Optuna.StudyDirection[]
+  user_attrs: Optuna.Attribute[]
+  is_preferential: boolean
+  datetime_start?: Date
+}
+
+export type ObjectiveChoiceWidget = {
+  type: "choice"
+  description: string
+  user_attr_key?: string
+  choices: string[]
+  values: number[]
+}
+
+export type ObjectiveSliderWidget = {
+  type: "slider"
+  description: string
+  user_attr_key?: string
+  min: number
+  max: number
+  step: number | null
+  labels:
+    | {
+        value: number
+        label: string
+      }[]
+    | null
+}
+
+export type ObjectiveTextInputWidget = {
+  type: "text"
+  description: string
+  optional: boolean
+  user_attr_key?: string
+}
+
+export type ObjectiveUserAttrRef = {
+  type: "user_attr"
+  key: string
+}
+
+export type ObjectiveFormWidget =
+  | ObjectiveChoiceWidget
+  | ObjectiveSliderWidget
+  | ObjectiveTextInputWidget
+  | ObjectiveUserAttrRef
+
+export type UserAttrFormWidget =
+  | ObjectiveChoiceWidget
+  | ObjectiveSliderWidget
+  | ObjectiveTextInputWidget
+
+export type FormWidgets =
+  | {
+      output_type: "objective"
+      widgets: ObjectiveFormWidget[]
+    }
+  | {
+      output_type: "user_attr"
+      widgets: UserAttrFormWidget[]
+    }
+
+export type PlotlyGraphObject = {
+  id: string
+  graph_object: string
+}
+
+export type FeedbackComponentNote = {
+  output_type: "note"
+}
+
+export type FeedbackComponentArtifact = {
+  output_type: "artifact"
+  artifact_key: string
+}
+
+export type FeedbackComponentType =
+  | FeedbackComponentArtifact
+  | FeedbackComponentNote
+
+export type StudyDetail = {
+  id: number
+  name: string
+  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: Optuna.AttributeSpec[]
+  has_intermediate_values: boolean
+  note: Note
+  is_preferential: boolean
+  objective_names?: string[]
+  form_widgets?: FormWidgets
+  feedback_component_type: FeedbackComponentType
+  preferences?: [number, number][]
+  preference_history?: PreferenceHistory[]
+  plotly_graph_objects: PlotlyGraphObject[]
+  artifacts: Artifact[]
+  skipped_trial_numbers: number[]
+}
+
+export type StudyDetails = {
+  [study_id: string]: StudyDetail
+}
+
+export type PreferenceHistory = {
+  id: string
+  candidates: number[]
+  clicked: number
+  feedback_mode: PreferenceFeedbackMode
+  timestamp: Date
+  preferences: [number, number][]
+  is_removed: boolean
+}
+
+export type PlotlyColorThemeDark = "default"
+export type PlotlyColorThemeLight =
+  | "default"
+  | "seaborn"
+  | "presentation"
+  | "ggplot2"
+
+export type PlotlyColorTheme = {
+  dark: PlotlyColorThemeDark
+  light: PlotlyColorThemeLight
+}
diff --git a/optuna_dashboard/tsconfig.json b/optuna_dashboard/tsconfig.json
index c05b9241..11568355 100644
--- a/optuna_dashboard/tsconfig.json
+++ b/optuna_dashboard/tsconfig.json
@@ -15,7 +15,7 @@
     "module": "esnext",
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
-    "target": "es5",
+    "target": "es6",
     "jsx": "react",
     "sourceMap": true,
     "strict": true
diff --git a/tslib/react/package-lock.json b/tslib/react/package-lock.json
index 071582ba..9ae27b21 100644
--- a/tslib/react/package-lock.json
+++ b/tslib/react/package-lock.json
@@ -7170,9 +7170,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.734",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.734.tgz",
-      "integrity": "sha512-pYfGUc+ll8AOzLbLC0lfgwkvCZIV+sKGuFFsSNuF3K3ujrmem8jIjg/t6DNq0J7biTSS1hCt/Hts0nmA3ZyprQ==",
+      "version": "1.4.735",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.735.tgz",
+      "integrity": "sha512-pkYpvwg8VyOTQAeBqZ7jsmpCjko1Qc6We1ZtZCjRyYbT5v4AIUKDy5cQTRotQlSSZmMr8jqpEt6JtOj5k7lR7A==",
       "dev": true
     },
     "node_modules/emoji-regex": {
diff --git a/tslib/types/src/index.ts b/tslib/types/src/index.ts
index 6fd14375..937abc52 100644
--- a/tslib/types/src/index.ts
+++ b/tslib/types/src/index.ts
@@ -14,7 +14,7 @@ export type IntDistribution = {
   type: "IntDistribution"
   low: number
   high: number
-  step: number | null
+  step: number
   log: boolean
 }