optuna · RE-yura · Sep 30, 2023 · Sep 30, 2023 · c-bata · Sep 30, 2023
diff --git a/.gitignore b/.gitignore
@@ -7,6 +7,9 @@ venv/
 dist/
 build/
 optuna_dashboard/public/
+optuna_dashboard/static/
+optuna_dashboard/index.html
+optuna_dashboard/favicon.ico
 
 # JS
 node_modules/

diff --git a/optuna_dashboard/_app.py b/optuna_dashboard/_app.py
@@ -61,7 +61,7 @@
 
 # Static files
 BASE_DIR = os.path.dirname(os.path.abspath(__file__))
-STATIC_DIR = os.path.join(BASE_DIR, "public")
+STATIC_DIR = os.path.join(BASE_DIR, "static")
 IMG_DIR = os.path.join(BASE_DIR, "img")
 cached_path_exists = functools.lru_cache(maxsize=10)(os.path.exists)
 
@@ -77,6 +77,20 @@
     def remove_trailing_slashes_hook() -> None:
         request.environ["PATH_INFO"] = request.environ["PATH_INFO"].rstrip("/")
 
+    @app.hook("after_request")
+    def enable_cors():
+        if "Origin" not in request.headers.keys():
+            return
+        response.headers["Access-Control-Allow-Origin"] = request.headers["Origin"]
+        response.headers["Access-Control-Allow-Methods"] = "PUT, GET, POST, DELETE, OPTIONS"
+        response.headers[
+            "Access-Control-Allow-Headers"
+        ] = "Origin, Accept, Content-Type, X-Requested-With, X-CSRF-Token, Authorization"
+
+    @app.route("<any:path>", method="OPTIONS")
+    def response_for_options(**kwargs):
+        return {}
+
     @app.get("/")
     def index() -> BottleViewReturn:
         return redirect("/dashboard", 302)  # Status Found

diff --git a/optuna_dashboard/index.html b/optuna_dashboard/index.html
@@ -1,75 +1,123 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-    <title>Optuna Dashboard</title>
+  <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <script defer src="/static/bundle.js"></script>
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Optuna Dashboard</title>
     <style>
-        .optuna-loading-wrapper {
-            height: 100vh;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-        }
+      .optuna-loading-wrapper {
+        height: 100vh;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
 
-        .optuna-loading-message {
-            font-weight: 700;
-            font-size: 32px;
-            color: gray;
-        }
+      .optuna-loading-message {
+        font-weight: 700;
+        font-size: 32px;
+        color: gray;
+      }
 
-        .optuna-animation {
-            -webkit-transition-property: -webkit-transform;
-            -webkit-transition-duration: 6s;
-            -webkit-animation-name: rotate;
-            -webkit-animation-iteration-count: infinite;
-            -webkit-animation-timing-function: ease;
+      .optuna-animation {
+        -webkit-transition-property: -webkit-transform;
+        -webkit-transition-duration: 6s;
+        -webkit-animation-name: rotate;
+        -webkit-animation-iteration-count: infinite;
+        -webkit-animation-timing-function: ease;
 
-            -moz-transition-property: -moz-transform;
-            -moz-animation-name: rotate;
-            -moz-animation-duration: 6s;
-            -moz-animation-iteration-count: infinite;
-            -moz-animation-timing-function: ease;
+        -moz-transition-property: -moz-transform;
+        -moz-animation-name: rotate;
+        -moz-animation-duration: 6s;
+        -moz-animation-iteration-count: infinite;
+        -moz-animation-timing-function: ease;
 
-            transition-property: transform;
-            animation-name: rotate;
-            animation-duration: 6s;
-            animation-iteration-count: infinite;
-            animation-timing-function: ease;
-        }
+        transition-property: transform;
+        animation-name: rotate;
+        animation-duration: 6s;
+        animation-iteration-count: infinite;
+        animation-timing-function: ease;
+      }
 
-        @-webkit-keyframes rotate {
-            from {-webkit-transform: rotate(-1080deg); opacity: 0; }
-            50% { -webkit-transform: rotate(0deg); opacity: 1; }
-            to {-webkit-transform: rotate(1080deg); opacity: 0;}
+      @-webkit-keyframes rotate {
+        from {
+          -webkit-transform: rotate(-1080deg);
+          opacity: 0;
+        }
+        50% {
+          -webkit-transform: rotate(0deg);
+          opacity: 1;
         }
+        to {
+          -webkit-transform: rotate(1080deg);
+          opacity: 0;
+        }
+      }
 
-        @-moz-keyframes rotate {
-            from {-moz-transform: rotate(-1080deg); opacity: 0; }
-            50% { -moz-transform: rotate(0deg); opacity: 1; }
-            to {-moz-transform: rotate(1080deg); opacity: 0;}
+      @-moz-keyframes rotate {
+        from {
+          -moz-transform: rotate(-1080deg);
+          opacity: 0;
+        }
+        50% {
+          -moz-transform: rotate(0deg);
+          opacity: 1;
+        }
+        to {
+          -moz-transform: rotate(1080deg);
+          opacity: 0;
         }
+      }
 
-        @keyframes rotate {
-            from {transform: rotate(-1080deg); opacity: 0; }
-            50% { transform: rotate(0deg); opacity: 1; }
-            to {transform: rotate(1080deg); opacity: 0; }
+      @keyframes rotate {
+        from {
+          transform: rotate(-1080deg);
+          opacity: 0;
+        }
+        50% {
+          transform: rotate(0deg);
+          opacity: 1;
+        }
+        to {
+          transform: rotate(1080deg);
+          opacity: 0;
         }
+      }
     </style>
-</head>
-<body>
+    <script type="module" crossorigin src="/static/index-f338e3e1.js"></script>
+    <link rel="stylesheet" href="/static/index-ece3a131.css">
+  </head>
+  <body>
     <div id="dashboard">
-        <span class="optuna-loading-wrapper">
-            <svg class="optuna-animation" xmlns="http://www.w3.org/2000/svg" width="294.7" height="280" viewBox="0 0 221 210">
-                <path fill="rgb(6, 71, 135)" d="M104.5.6c-31.2 4.6-55 16.5-74.5 37A107.3 107.3 0 0 0 3.2 84.9a78.4 78.4 0 0 0-2.6 24.6c0 12.5.3 16.4 2.2 23.5a114.2 114.2 0 0 0 19.5 38 114 114 0 0 0 103.3 37.5 111.6 111.6 0 0 0 83.1-63.1 100.3 100.3 0 0 0 11-44.9c.4-11.5.1-15.7-1.5-23.5a85.3 85.3 0 0 0-25.1-47.1 98 98 0 0 0-49.4-27c-8-2-31.9-3.4-39.2-2.3zm35.3 16.8A90 90 0 0 1 206.7 80a112 112 0 0 1 0 40.8 103.3 103.3 0 0 1-73.7 72 76.6 76.6 0 0 1-25 2.5 77 77 0 0 1-23.2-2.1 99.6 99.6 0 0 1-68.4-66.7 64 64 0 0 1-2.8-22.5c-.1-11.3.3-14.8 2.2-21.4C25.5 49.2 53.6 25 92.5 16.9a156 156 0 0 1 47.3.5z"/>
-                <path fill="rgb(12, 97, 152)" d="M94.6 29.5A88.3 88.3 0 0 0 68 39.1c-17 8.8-30.5 22-38.1 37.4a56.4 56.4 0 0 0-6.7 32c.9 18.9 7.2 32.1 22.7 47.5 13 12.8 25.8 20 44.9 25.2 11 3 31.5 2.9 42.7-.1a85.5 85.5 0 0 0 61.1-60.1c2.3-8.8 2.4-26.3.1-35a78.6 78.6 0 0 0-55.2-54.6 74.9 74.9 0 0 0-23.5-3c-9.9-.2-16.7.1-21.4 1.1zm37.2 11.1a61 61 0 0 1 29.7 17.9 55 55 0 0 1 18.6 43.6c.3 39.1-30.4 68.9-71.1 69.1-16.9 0-30-4.1-42.5-13.4A59.7 59.7 0 0 1 47.1 83c15.6-33 51.5-51 84.7-42.4z"/>
-                <path fill="rgb(39, 126, 170)" d="M96 57.6a58.6 58.6 0 0 0-40 35 43 43 0 0 0 1.6 30.4 62.8 62.8 0 0 0 20.2 22.6 70.7 70.7 0 0 0 28.8 10c34.6 3.2 64.7-28.1 58-60.4a50 50 0 0 0-37.3-37.7c-7.2-1.9-24-1.8-31.3.1zm31.9 16.1A32 32 0 0 1 148 93.4c.7 2.4 1.1 6.8.8 11.5a28 28 0 0 1-3.8 13.9 43.4 43.4 0 0 1-18.8 17.9c-5.2 2.5-6.7 2.8-16.7 2.8-9.8 0-11.6-.3-16.7-2.7-17.2-8-24.7-25.5-17.6-41a43.9 43.9 0 0 1 52.7-22.1z"/>
-                <path fill="rgb(77, 154, 184)" d="M109.5 86.9c-12.1 3-20.9 13.7-19.1 23.4 2.6 14.1 25 17.3 37.4 5.4 4.5-4.3 6.4-8.1 6.4-13.1.2-11.4-11.6-18.8-24.7-15.7zm7.7 11.8c4.5 4 .5 13.3-5.7 13.3-4.3 0-6.5-2.2-6.5-6.6 0-6.6 7.6-10.9 12.2-6.7z"/>
-            </svg>
-            <p class="optuna-loading-message">NOW LOADING</p>
-        </span>
+      <span class="optuna-loading-wrapper">
+        <svg
+          class="optuna-animation"
+          xmlns="http://www.w3.org/2000/svg"
+          width="294.7"
+          height="280"
+          viewBox="0 0 221 210"
+        >
+          <path
+            fill="rgb(6, 71, 135)"
+            d="M104.5.6c-31.2 4.6-55 16.5-74.5 37A107.3 107.3 0 0 0 3.2 84.9a78.4 78.4 0 0 0-2.6 24.6c0 12.5.3 16.4 2.2 23.5a114.2 114.2 0 0 0 19.5 38 114 114 0 0 0 103.3 37.5 111.6 111.6 0 0 0 83.1-63.1 100.3 100.3 0 0 0 11-44.9c.4-11.5.1-15.7-1.5-23.5a85.3 85.3 0 0 0-25.1-47.1 98 98 0 0 0-49.4-27c-8-2-31.9-3.4-39.2-2.3zm35.3 16.8A90 90 0 0 1 206.7 80a112 112 0 0 1 0 40.8 103.3 103.3 0 0 1-73.7 72 76.6 76.6 0 0 1-25 2.5 77 77 0 0 1-23.2-2.1 99.6 99.6 0 0 1-68.4-66.7 64 64 0 0 1-2.8-22.5c-.1-11.3.3-14.8 2.2-21.4C25.5 49.2 53.6 25 92.5 16.9a156 156 0 0 1 47.3.5z"
+          />
+          <path
+            fill="rgb(12, 97, 152)"
+            d="M94.6 29.5A88.3 88.3 0 0 0 68 39.1c-17 8.8-30.5 22-38.1 37.4a56.4 56.4 0 0 0-6.7 32c.9 18.9 7.2 32.1 22.7 47.5 13 12.8 25.8 20 44.9 25.2 11 3 31.5 2.9 42.7-.1a85.5 85.5 0 0 0 61.1-60.1c2.3-8.8 2.4-26.3.1-35a78.6 78.6 0 0 0-55.2-54.6 74.9 74.9 0 0 0-23.5-3c-9.9-.2-16.7.1-21.4 1.1zm37.2 11.1a61 61 0 0 1 29.7 17.9 55 55 0 0 1 18.6 43.6c.3 39.1-30.4 68.9-71.1 69.1-16.9 0-30-4.1-42.5-13.4A59.7 59.7 0 0 1 47.1 83c15.6-33 51.5-51 84.7-42.4z"
+          />
+          <path
+            fill="rgb(39, 126, 170)"
+            d="M96 57.6a58.6 58.6 0 0 0-40 35 43 43 0 0 0 1.6 30.4 62.8 62.8 0 0 0 20.2 22.6 70.7 70.7 0 0 0 28.8 10c34.6 3.2 64.7-28.1 58-60.4a50 50 0 0 0-37.3-37.7c-7.2-1.9-24-1.8-31.3.1zm31.9 16.1A32 32 0 0 1 148 93.4c.7 2.4 1.1 6.8.8 11.5a28 28 0 0 1-3.8 13.9 43.4 43.4 0 0 1-18.8 17.9c-5.2 2.5-6.7 2.8-16.7 2.8-9.8 0-11.6-.3-16.7-2.7-17.2-8-24.7-25.5-17.6-41a43.9 43.9 0 0 1 52.7-22.1z"
+          />
+          <path
+            fill="rgb(77, 154, 184)"
+            d="M109.5 86.9c-12.1 3-20.9 13.7-19.1 23.4 2.6 14.1 25 17.3 37.4 5.4 4.5-4.3 6.4-8.1 6.4-13.1.2-11.4-11.6-18.8-24.7-15.7zm7.7 11.8c4.5 4 .5 13.3-5.7 13.3-4.3 0-6.5-2.2-6.5-6.6 0-6.6 7.6-10.9 12.2-6.7z"
+          />
+        </svg>
+        <p class="optuna-loading-message">NOW LOADING</p>
+      </span>
     </div>
-</body>
-</html>
+
+  </body>
+</html>
diff --git a/optuna_dashboard_client/web/.env b/optuna_dashboard_client/web/.env
@@ -0,0 +1,2 @@
+VITE_API_ENDPOINT=http://0.0.0.0:8080
+VITE_URL_PREFIX=/dashboard
diff --git a/optuna_dashboard_client/web/.eslintrc.cjs b/optuna_dashboard_client/web/.eslintrc.cjs
@@ -0,0 +1,9 @@
+module.exports = {
+  root: true,
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint"],
+  rules: {
+    "@typescript-eslint/ban-ts-comment": "off",
+  },
+  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+};
diff --git a/optuna_dashboard_client/web/.gitignore b/optuna_dashboard_client/web/.gitignore
@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+*.tsbuildinfo
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/optuna_dashboard_client/web/README.md b/optuna_dashboard_client/web/README.md
@@ -0,0 +1,27 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+   parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+   },
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list