From 57b89b69f3016adfef8561e663f1c9be5ba99397 Mon Sep 17 00:00:00 2001
From: seijdeleon <seijdeleon@lbl.gov>
Date: Wed, 7 Jan 2026 10:37:28 -0800
Subject: [PATCH 01/15] use newest Tiled component and refactor to use its
 defaults for modal and callbacks

---
 package-lock.json   | 1620 ++++++++++++++++++++++++++++++++++++++++---
 package.json        |    1 +
 src/Header.tsx      |   39 +-
 src/TiledWidget.tsx |    6 +-
 src/utils.ts        |   17 +
 5 files changed, 1582 insertions(+), 101 deletions(-)
 create mode 100644 src/utils.ts

diff --git a/package-lock.json b/package-lock.json
index 1c6cf3a..e2104a4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "view_recon_app",
       "version": "0.0.0",
       "dependencies": {
+        "@blueskyproject/tiled": "^0.0.23",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "tailwindcss": "^4.0.14"
@@ -167,7 +168,6 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
       "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -176,7 +176,6 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
       "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -207,7 +206,6 @@
       "version": "7.26.5",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.5.tgz",
       "integrity": "sha512-SRJ4jYmXRqV1/Xc+TIVG84WjHBXKlxO9sHQnA2Pf12QQEAp1LOh6kDzNHXcUnbH1QI0FDoPPVOt+vyUDucxpaw==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.26.5"
       },
@@ -293,7 +291,6 @@
       "version": "7.26.5",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.5.tgz",
       "integrity": "sha512-L6mZmwFDK6Cjh1nRCLXpa6no13ZIioJDz7mdkzHv399pThrTa/k0nUlNaenOeh2kWu/iaOQYElEpKPUswUa9Vg==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-string-parser": "^7.25.9",
         "@babel/helper-validator-identifier": "^7.25.9"
@@ -302,6 +299,44 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@blueskyproject/tiled": {
+      "version": "0.0.23",
+      "resolved": "https://registry.npmjs.org/@blueskyproject/tiled/-/tiled-0.0.23.tgz",
+      "integrity": "sha512-tkDHBghMe+fCL4fQ2WL0k6fvunMVwUwQQbrP3TlvDickU6nF6LYEXAw3lmVWpIj/L0ytAlveKO6+Gd9hU5G/EA==",
+      "dependencies": {
+        "@phosphor-icons/react": "^2.1.7",
+        "@storybook/addons": "^7.6.17",
+        "@storybook/theming": "^8.6.14",
+        "@visx/curve": "^3.12.0",
+        "@visx/mock-data": "^3.12.0",
+        "@visx/pattern": "^3.12.0",
+        "@visx/react-spring": "^3.12.0",
+        "@visx/responsive": "^3.12.0",
+        "@visx/scale": "^3.12.0",
+        "@visx/shape": "^3.12.0",
+        "@visx/tooltip": "^3.12.0",
+        "@visx/xychart": "^3.12.0",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "dayjs": "^1.11.13",
+        "lucide-react": "^0.487.0",
+        "react-router-dom": "^6.30.0",
+        "tailwind-merge": "^3.2.0",
+        "tailwindcss-animate": "^1.0.7"
+      },
+      "peerDependencies": {
+        "react": ">16.8.x",
+        "react-dom": ">16.8.x"
+      }
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz",
+      "integrity": "sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.24.2",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.2.tgz",
@@ -309,7 +344,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "aix"
@@ -325,7 +359,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -341,7 +374,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -357,7 +389,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -373,7 +404,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -389,7 +419,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -405,7 +434,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -421,7 +449,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -437,7 +464,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -453,7 +479,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -469,7 +494,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -485,7 +509,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -501,7 +524,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -517,7 +539,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -533,7 +554,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -549,7 +569,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -565,7 +584,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -581,7 +599,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "netbsd"
@@ -597,7 +614,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "netbsd"
@@ -613,7 +629,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "openbsd"
@@ -629,7 +644,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "openbsd"
@@ -645,7 +659,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "sunos"
@@ -661,7 +674,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -677,7 +689,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -693,7 +704,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -942,6 +952,98 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@phosphor-icons/react": {
+      "version": "2.1.10",
+      "resolved": "https://registry.npmjs.org/@phosphor-icons/react/-/react-2.1.10.tgz",
+      "integrity": "sha512-vt8Tvq8GLjheAZZYa+YG/pW7HDbov8El/MANW8pOAz4eGxrwhnbfrQZq0Cp4q8zBEu8NIhHdnr+r8thnfRSNYA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8",
+        "react-dom": ">= 16.8"
+      }
+    },
+    "node_modules/@react-spring/animated": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.5.tgz",
+      "integrity": "sha512-Tqrwz7pIlsSDITzxoLS3n/v/YCUHQdOIKtOJf4yL6kYVSDTSmVK1LI1Q3M/uu2Sx4X3pIWF3xLUhlsA6SPNTNg==",
+      "peer": true,
+      "dependencies": {
+        "@react-spring/shared": "~9.7.5",
+        "@react-spring/types": "~9.7.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/core": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.7.5.tgz",
+      "integrity": "sha512-rmEqcxRcu7dWh7MnCcMXLvrf6/SDlSokLaLTxiPlAYi11nN3B5oiCUAblO72o+9z/87j2uzxa2Inm8UbLjXA+w==",
+      "peer": true,
+      "dependencies": {
+        "@react-spring/animated": "~9.7.5",
+        "@react-spring/shared": "~9.7.5",
+        "@react-spring/types": "~9.7.5"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-spring/donate"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/rafz": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.7.5.tgz",
+      "integrity": "sha512-5ZenDQMC48wjUzPAm1EtwQ5Ot3bLIAwwqP2w2owG5KoNdNHpEJV263nGhCeKKmuA3vG2zLLOdu3or6kuDjA6Aw==",
+      "peer": true
+    },
+    "node_modules/@react-spring/shared": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.7.5.tgz",
+      "integrity": "sha512-wdtoJrhUeeyD/PP/zo+np2s1Z820Ohr/BbuVYv+3dVLW7WctoiN7std8rISoYoHpUXtbkpesSKuPIw/6U1w1Pw==",
+      "peer": true,
+      "dependencies": {
+        "@react-spring/rafz": "~9.7.5",
+        "@react-spring/types": "~9.7.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/types": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.7.5.tgz",
+      "integrity": "sha512-HVj7LrZ4ReHWBimBvu2SKND3cDVUPWKLqRTmWe/fNY6o1owGOX0cAHbdPDTMelgBlVbrTKrre6lFkhqGZErK/g==",
+      "peer": true
+    },
+    "node_modules/@react-spring/web": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.7.5.tgz",
+      "integrity": "sha512-lmvqGwpe+CSttsWNZVr+Dg62adtKhauGwLyGE/RRyZ8AAMLgb9x3NDMA5RMElXo+IMyTkPp7nxTB8ZQlmhb6JQ==",
+      "peer": true,
+      "dependencies": {
+        "@react-spring/animated": "~9.7.5",
+        "@react-spring/core": "~9.7.5",
+        "@react-spring/shared": "~9.7.5",
+        "@react-spring/types": "~9.7.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@remix-run/router": {
+      "version": "1.23.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.1.tgz",
+      "integrity": "sha512-vDbaOzF7yT2Qs4vO6XV1MHcJv+3dgR1sT+l3B8xxOVhUC336prMvqrvsLL/9Dnw2xr6Qhz4J0dmS0llNAbnUmQ==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.31.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.31.0.tgz",
@@ -1189,11 +1291,231 @@
         "win32"
       ]
     },
+    "node_modules/@storybook/addons": {
+      "version": "7.6.17",
+      "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-7.6.17.tgz",
+      "integrity": "sha512-Ok18Y698Ccyg++MoUNJNHY0cXUvo8ETFIRLJk1g9ElJ70j6kPgNnzW2pAtZkBNmswHtofZ7pT156cj96k/LgfA==",
+      "dependencies": {
+        "@storybook/manager-api": "7.6.17",
+        "@storybook/preview-api": "7.6.17",
+        "@storybook/types": "7.6.17"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/channels": {
+      "version": "7.6.17",
+      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.6.17.tgz",
+      "integrity": "sha512-GFG40pzaSxk1hUr/J/TMqW5AFDDPUSu+HkeE/oqSWJbOodBOLJzHN6CReJS6y1DjYSZLNFt1jftPWZZInG/XUA==",
+      "dependencies": {
+        "@storybook/client-logger": "7.6.17",
+        "@storybook/core-events": "7.6.17",
+        "@storybook/global": "^5.0.0",
+        "qs": "^6.10.0",
+        "telejson": "^7.2.0",
+        "tiny-invariant": "^1.3.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/client-logger": {
+      "version": "7.6.17",
+      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.17.tgz",
+      "integrity": "sha512-6WBYqixAXNAXlSaBWwgljWpAu10tPRBJrcFvx2gPUne58EeMM20Gi/iHYBz2kMCY+JLAgeIH7ZxInqwO8vDwiQ==",
+      "dependencies": {
+        "@storybook/global": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/core": {
+      "version": "8.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/core/-/core-8.6.15.tgz",
+      "integrity": "sha512-VFpKcphNurJpSC4fpUfKL3GTXVoL53oytghGR30QIw5jKWwaT50HVbTyb41BLOUuZjmMhUQA8weiQEew6RX0gw==",
+      "peer": true,
+      "dependencies": {
+        "@storybook/theming": "8.6.15",
+        "better-opn": "^3.0.2",
+        "browser-assert": "^1.2.1",
+        "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0",
+        "esbuild-register": "^3.5.0",
+        "jsdoc-type-pratt-parser": "^4.0.0",
+        "process": "^0.11.10",
+        "recast": "^0.23.5",
+        "semver": "^7.6.2",
+        "util": "^0.12.5",
+        "ws": "^8.2.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "prettier": "^2 || ^3"
+      },
+      "peerDependenciesMeta": {
+        "prettier": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@storybook/core-events": {
+      "version": "7.6.17",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.6.17.tgz",
+      "integrity": "sha512-AriWMCm/k1cxlv10f+jZ1wavThTRpLaN3kY019kHWbYT9XgaSuLU67G7GPr3cGnJ6HuA6uhbzu8qtqVCd6OfXA==",
+      "dependencies": {
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/core/node_modules/semver": {
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "peer": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@storybook/csf": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.13.tgz",
+      "integrity": "sha512-7xOOwCLGB3ebM87eemep89MYRFTko+D8qE7EdAAq74lgdqRR5cOUtYWJLjO2dLtP94nqoOdHJo6MdLLKzg412Q==",
+      "dependencies": {
+        "type-fest": "^2.19.0"
+      }
+    },
+    "node_modules/@storybook/global": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@storybook/global/-/global-5.0.0.tgz",
+      "integrity": "sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ=="
+    },
+    "node_modules/@storybook/manager-api": {
+      "version": "7.6.17",
+      "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.6.17.tgz",
+      "integrity": "sha512-IJIV1Yc6yw1dhCY4tReHCfBnUKDqEBnMyHp3mbXpsaHxnxJZrXO45WjRAZIKlQKhl/Ge1CrnznmHRCmYgqmrWg==",
+      "dependencies": {
+        "@storybook/channels": "7.6.17",
+        "@storybook/client-logger": "7.6.17",
+        "@storybook/core-events": "7.6.17",
+        "@storybook/csf": "^0.1.2",
+        "@storybook/global": "^5.0.0",
+        "@storybook/router": "7.6.17",
+        "@storybook/theming": "7.6.17",
+        "@storybook/types": "7.6.17",
+        "dequal": "^2.0.2",
+        "lodash": "^4.17.21",
+        "memoizerific": "^1.11.3",
+        "store2": "^2.14.2",
+        "telejson": "^7.2.0",
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/manager-api/node_modules/@storybook/theming": {
+      "version": "7.6.17",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.6.17.tgz",
+      "integrity": "sha512-ZbaBt3KAbmBtfjNqgMY7wPMBshhSJlhodyMNQypv+95xLD/R+Az6aBYbpVAOygLaUQaQk4ar7H/Ww6lFIoiFbA==",
+      "dependencies": {
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+        "@storybook/client-logger": "7.6.17",
+        "@storybook/global": "^5.0.0",
+        "memoizerific": "^1.11.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/preview-api": {
+      "version": "7.6.17",
+      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.6.17.tgz",
+      "integrity": "sha512-wLfDdI9RWo1f2zzFe54yRhg+2YWyxLZvqdZnSQ45mTs4/7xXV5Wfbv3QNTtcdw8tT3U5KRTrN1mTfTCiRJc0Kw==",
+      "dependencies": {
+        "@storybook/channels": "7.6.17",
+        "@storybook/client-logger": "7.6.17",
+        "@storybook/core-events": "7.6.17",
+        "@storybook/csf": "^0.1.2",
+        "@storybook/global": "^5.0.0",
+        "@storybook/types": "7.6.17",
+        "@types/qs": "^6.9.5",
+        "dequal": "^2.0.2",
+        "lodash": "^4.17.21",
+        "memoizerific": "^1.11.3",
+        "qs": "^6.10.0",
+        "synchronous-promise": "^2.0.15",
+        "ts-dedent": "^2.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/router": {
+      "version": "7.6.17",
+      "resolved": "https://registry.npmjs.org/@storybook/router/-/router-7.6.17.tgz",
+      "integrity": "sha512-GnyC0j6Wi5hT4qRhSyT8NPtJfGmf82uZw97LQRWeyYu5gWEshUdM7aj40XlNiScd5cZDp0owO1idduVF2k2l2A==",
+      "dependencies": {
+        "@storybook/client-logger": "7.6.17",
+        "memoizerific": "^1.11.3",
+        "qs": "^6.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/theming": {
+      "version": "8.6.15",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-8.6.15.tgz",
+      "integrity": "sha512-dAbL0XOekyT6XsF49R6Etj3WxQ/LpdJDIswUUeHgVJ6/yd2opZOGbPxnwA3zlmAh1c0tvpPyhSDXxSG79u8e4Q==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
+      }
+    },
+    "node_modules/@storybook/types": {
+      "version": "7.6.17",
+      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.6.17.tgz",
+      "integrity": "sha512-GRY0xEJQ0PrL7DY2qCNUdIfUOE0Gsue6N+GBJw9ku1IUDFLJRDOF+4Dx2BvYcVCPI5XPqdWKlEyZdMdKjiQN7Q==",
+      "dependencies": {
+        "@storybook/channels": "7.6.17",
+        "@types/babel__core": "^7.0.0",
+        "@types/express": "^4.7.0",
+        "file-system-cache": "2.3.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
       "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
-      "dev": true,
       "dependencies": {
         "@babel/parser": "^7.20.7",
         "@babel/types": "^7.20.7",
@@ -1206,7 +1528,6 @@
       "version": "7.6.8",
       "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.8.tgz",
       "integrity": "sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.0.0"
       }
@@ -1215,7 +1536,6 @@
       "version": "7.4.4",
       "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
       "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
-      "dev": true,
       "dependencies": {
         "@babel/parser": "^7.1.0",
         "@babel/types": "^7.0.0"
@@ -1225,34 +1545,185 @@
       "version": "7.20.6",
       "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.6.tgz",
       "integrity": "sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/body-parser": {
+      "version": "1.19.6",
+      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.6.tgz",
+      "integrity": "sha512-HLFeCYgz89uk22N5Qg3dvGvsv46B8GLvKKo1zKG4NybA8U2DiEO3w9lqGg29t/tfLRJpJ6iQxnVw4OnB7MoM9g==",
+      "dependencies": {
+        "@types/connect": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/connect": {
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz",
+      "integrity": "sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/d3-array": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.0.3.tgz",
+      "integrity": "sha512-Reoy+pKnvsksN0lQUlcH6dOGjRZ/3WRwXR//m+/8lt1BXeI4xyaUZoqULNjyXXRuh0Mj4LNpkCvhUpQlY3X5xQ=="
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA=="
+    },
+    "node_modules/@types/d3-delaunay": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.1.tgz",
+      "integrity": "sha512-tLxQ2sfT0p6sxdG75c6f/ekqxjyYR0+LwPrsO1mbC9YDBzPJhs2HbJJRrn8Ez1DBoHRo2yx7YEATI+8V1nGMnQ=="
+    },
+    "node_modules/@types/d3-format": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.1.tgz",
+      "integrity": "sha512-5KY70ifCCzorkLuIkDe0Z9YTf9RR2CjBX1iaJG+rgM/cPP+sO+q9YdQ9WdhQcgPj1EQiJ2/0+yUkkziTG6Lubg=="
+    },
+    "node_modules/@types/d3-geo": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.1.0.tgz",
+      "integrity": "sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw==",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.11.tgz",
+      "integrity": "sha512-4pQMp8ldf7UaB/gR8Fvvy69psNHkTpD/pVw3vmEi8iZAB9EPMBruB1JvHO4BIq9QkUUd2lV1F5YXpMNj7JPBpw=="
+    },
+    "node_modules/@types/d3-random": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-2.2.3.tgz",
+      "integrity": "sha512-Ghs4R3CcgJ3o6svszRzIH4b8PPYex/COo+rhhZjDAs+bVducXwjmVSi27WcDOaLLCBV2t3tfVH9bYXAL76IvQA=="
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-Yk4htunhPAwN0XGlIwArRomOjdoBFXC3+kCxK2Ubg7I9shQlVSJy/pG/Ht5ASN+gdMIalpk8TJ5xV74jFsetLA==",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "1.3.12",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.3.12.tgz",
+      "integrity": "sha512-8oMzcd4+poSLGgV0R1Q1rOlx/xdmozS4Xab7np0eamFFUYq71AU9pOCJEFnkXW2aI/oXdVYJzw6pssbSut7Z9Q==",
+      "dependencies": {
+        "@types/d3-path": "^1"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.0.tgz",
+      "integrity": "sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg=="
+    },
+    "node_modules/@types/d3-time-format": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-2.1.0.tgz",
+      "integrity": "sha512-/myT3I7EwlukNOX2xVdMzb8FRgNzRMpsZddwst9Ld/VFe6LyJyRp0s32l/V9XoUzk+Gqu56F/oGk6507+8BxrA=="
+    },
+    "node_modules/@types/d3-voronoi": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/@types/d3-voronoi/-/d3-voronoi-1.1.12.tgz",
+      "integrity": "sha512-DauBl25PKZZ0WVJr42a6CNvI6efsdzofl9sajqZr2Gf5Gu733WkDdUGiPkUHXiUvYGzNNlFQde2wdZdfQPG+yw=="
+    },
     "node_modules/@types/estree": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
       "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
       "dev": true
     },
+    "node_modules/@types/express": {
+      "version": "4.17.25",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.25.tgz",
+      "integrity": "sha512-dVd04UKsfpINUnK0yBoYHDF3xu7xVH4BuDotC/xGuycx4CgbP48X/KF/586bcObxT0HENHXEU8Nqtu6NR+eKhw==",
+      "dependencies": {
+        "@types/body-parser": "*",
+        "@types/express-serve-static-core": "^4.17.33",
+        "@types/qs": "*",
+        "@types/serve-static": "^1"
+      }
+    },
+    "node_modules/@types/express-serve-static-core": {
+      "version": "4.19.7",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.19.7.tgz",
+      "integrity": "sha512-FvPtiIf1LfhzsaIXhv/PHan/2FeQBbtBDtfX2QfvPxdUelMDEckK08SM6nqo1MIZY3RUlfA+HV8+hFUSio78qg==",
+      "dependencies": {
+        "@types/node": "*",
+        "@types/qs": "*",
+        "@types/range-parser": "*",
+        "@types/send": "*"
+      }
+    },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg=="
+    },
+    "node_modules/@types/http-errors": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.5.tgz",
+      "integrity": "sha512-r8Tayk8HJnX0FztbZN7oVqGccWgw98T/0neJphO91KkmOzug1KkofZURD4UaD5uH8AqcFLfdPErnBod0u71/qg=="
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "dev": true
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-FOvQ0YPD5NOfPgMzJihoT+Za5pdkDJWcbpuj1DjaKZIr/gxodQjY/uWEFlTNqW2ugXHUiL8lRQgw63dzKHZdeQ=="
+    },
+    "node_modules/@types/mime": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz",
+      "integrity": "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w=="
+    },
+    "node_modules/@types/node": {
+      "version": "25.0.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.0.3.tgz",
+      "integrity": "sha512-W609buLVRVmeW693xKfzHeIV6nJGGz98uCPfeXI1ELMLXVeKYZ9m15fAMSaUPBHYLGFsVRcMmSCksQOrZV9BYA==",
+      "dependencies": {
+        "undici-types": "~7.16.0"
+      }
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.14",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
-      "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
-      "dev": true
+      "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ=="
+    },
+    "node_modules/@types/qs": {
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.14.0.tgz",
+      "integrity": "sha512-eOunJqu0K1923aExK6y8p6fsihYEn/BYuQ4g0CxAAgFc4b/ZLN4CrsRZ55srTdqoiLzU2B2evC+apEIxprEzkQ=="
+    },
+    "node_modules/@types/range-parser": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz",
+      "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ=="
     },
     "node_modules/@types/react": {
       "version": "18.3.18",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz",
       "integrity": "sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==",
-      "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -1262,11 +1733,367 @@
       "version": "18.3.5",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.5.tgz",
       "integrity": "sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q==",
-      "dev": true,
       "peerDependencies": {
         "@types/react": "^18.0.0"
       }
     },
+    "node_modules/@types/send": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@types/send/-/send-1.2.1.tgz",
+      "integrity": "sha512-arsCikDvlU99zl1g69TcAB3mzZPpxgw0UQnaHeC1Nwb015xp8bknZv5rIfri9xTOcMuaVgvabfIRA7PSZVuZIQ==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/serve-static": {
+      "version": "1.15.10",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.10.tgz",
+      "integrity": "sha512-tRs1dB+g8Itk72rlSI2ZrW6vZg0YrLI81iQSTkMmOqnqCaNr/8Ek4VwWcN5vZgCYWbg/JJSGBlUaYGAOP73qBw==",
+      "dependencies": {
+        "@types/http-errors": "*",
+        "@types/node": "*",
+        "@types/send": "<1"
+      }
+    },
+    "node_modules/@types/serve-static/node_modules/@types/send": {
+      "version": "0.17.6",
+      "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.6.tgz",
+      "integrity": "sha512-Uqt8rPBE8SY0RK8JB1EzVOIZ32uqy8HwdxCnoCOsYrvnswqmFZ/k+9Ikidlk/ImhsdvBsloHbAlewb2IEBV/Og==",
+      "dependencies": {
+        "@types/mime": "^1",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@visx/annotation": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/annotation/-/annotation-3.12.0.tgz",
+      "integrity": "sha512-ZH6Y4jfrb47iEUV9O2itU9TATE5IPzhs5qvP6J7vmv26qkqwDcuE7xN3S3l9R70WjyEKGbpO8js4EijA3FJWkA==",
+      "dependencies": {
+        "@types/react": "*",
+        "@visx/drag": "3.12.0",
+        "@visx/group": "3.12.0",
+        "@visx/text": "3.12.0",
+        "classnames": "^2.3.1",
+        "prop-types": "^15.5.10",
+        "react-use-measure": "^2.0.4"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
+    "node_modules/@visx/axis": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/axis/-/axis-3.12.0.tgz",
+      "integrity": "sha512-8MoWpfuaJkhm2Yg+HwyytK8nk+zDugCqTT/tRmQX7gW4LYrHYLXFUXOzbDyyBakCVaUbUaAhVFxpMASJiQKf7A==",
+      "dependencies": {
+        "@types/react": "*",
+        "@visx/group": "3.12.0",
+        "@visx/point": "3.12.0",
+        "@visx/scale": "3.12.0",
+        "@visx/shape": "3.12.0",
+        "@visx/text": "3.12.0",
+        "classnames": "^2.3.1",
+        "prop-types": "^15.6.0"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
+    "node_modules/@visx/bounds": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/bounds/-/bounds-3.12.0.tgz",
+      "integrity": "sha512-peAlNCUbYaaZ0IO6c1lDdEAnZv2iGPDiLIM8a6gu7CaMhtXZJkqrTh+AjidNcIqITktrICpGxJE/Qo9D099dvQ==",
+      "dependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "prop-types": "^15.5.10"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0",
+        "react-dom": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
+    "node_modules/@visx/curve": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/curve/-/curve-3.12.0.tgz",
+      "integrity": "sha512-Ng1mefXIzoIoAivw7dJ+ZZYYUbfuwXgZCgQynShr6ZIVw7P4q4HeQfJP3W24ON+1uCSrzoycHSXRelhR9SBPcw==",
+      "dependencies": {
+        "@types/d3-shape": "^1.3.1",
+        "d3-shape": "^1.0.6"
+      }
+    },
+    "node_modules/@visx/drag": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/drag/-/drag-3.12.0.tgz",
+      "integrity": "sha512-LXOoPVw//YPjpYhDJYBsCYDuv1QimsXjDV98duH0aCy4V94ediXMQpe2wHq4pnlDobLEB71FjOZMFrbFmqtERg==",
+      "dependencies": {
+        "@types/react": "*",
+        "@visx/event": "3.12.0",
+        "@visx/point": "3.12.0",
+        "prop-types": "^15.5.10"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
+    "node_modules/@visx/event": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/event/-/event-3.12.0.tgz",
+      "integrity": "sha512-9Lvw6qJ0Fi+y1vsC1WspfdIKCxHTb7oy59Uql1uBdPGT8zChP0vuxW0jQNQRDbKgoefj4pCXAFi8+MF1mEtVTw==",
+      "dependencies": {
+        "@types/react": "*",
+        "@visx/point": "3.12.0"
+      }
+    },
+    "node_modules/@visx/glyph": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/glyph/-/glyph-3.12.0.tgz",
+      "integrity": "sha512-E9ST9MoPNyXQzjZxYYAGXT4CbBpnB90Qhx8UvUUM2/n/SZUNeH+m6UiB/CzT0jGK2b0lPHF91mlOiQ8JXBRhYg==",
+      "dependencies": {
+        "@types/d3-shape": "^1.3.1",
+        "@types/react": "*",
+        "@visx/group": "3.12.0",
+        "classnames": "^2.3.1",
+        "d3-shape": "^1.2.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
+    "node_modules/@visx/grid": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/grid/-/grid-3.12.0.tgz",
+      "integrity": "sha512-L4ex2ooSYhwNIxJ3XFIKRhoSvEGjPc2Y3YCrtNB4TV5Ofdj4q0UMOsxfrH23Pr8HSHuQhb6VGMgYoK0LuWqDmQ==",
+      "dependencies": {
+        "@types/react": "*",
+        "@visx/curve": "3.12.0",
+        "@visx/group": "3.12.0",
+        "@visx/point": "3.12.0",
+        "@visx/scale": "3.12.0",
+        "@visx/shape": "3.12.0",
+        "classnames": "^2.3.1",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
+    "node_modules/@visx/group": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/group/-/group-3.12.0.tgz",
+      "integrity": "sha512-Dye8iS1alVXPv7nj/7M37gJe6sSKqJLH7x6sEWAsRQ9clI0kFvjbKcKgF+U3aAVQr0NCohheFV+DtR8trfK/Ag==",
+      "dependencies": {
+        "@types/react": "*",
+        "classnames": "^2.3.1",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
+    "node_modules/@visx/mock-data": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/mock-data/-/mock-data-3.12.0.tgz",
+      "integrity": "sha512-HI8LKdO3sU2tIBv16ZYRTc2JYsu0Ai/hQc7YUOBqbjhXUW993iCBe98pAgEdHDrSWqK2yvXY4En5ceBTAP34Jw==",
+      "dependencies": {
+        "@types/d3-random": "^2.2.0",
+        "d3-random": "^2.2.2"
+      }
+    },
+    "node_modules/@visx/pattern": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/pattern/-/pattern-3.12.0.tgz",
+      "integrity": "sha512-ZkNA/2TkULNiiY4cw2IkuQcQRp9zI3SQ0/JoZMQ+UmUvY5RNBcsdTmic7649egHq0FRYCbY0DDQVJicccW5JUg==",
+      "dependencies": {
+        "@types/react": "*",
+        "classnames": "^2.3.1",
+        "prop-types": "^15.5.10"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
+    "node_modules/@visx/point": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/point/-/point-3.12.0.tgz",
+      "integrity": "sha512-I6UrHoJAEVbx3RORQNupgTiX5EzjuZpiwLPxn8L2mI5nfERotPKi1Yus12Cq2WtXqEBR/WgqTnoImlqOXBykcA=="
+    },
+    "node_modules/@visx/react-spring": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/react-spring/-/react-spring-3.12.0.tgz",
+      "integrity": "sha512-ehtmjFrUQx3g0mZ684M4LgI9UfQ84ZWD/m9tKfvXhEm1Vl8D4AjaZ4af1tTOg9S7vk2VlpxvVOVN7+t5pu0nSA==",
+      "dependencies": {
+        "@types/react": "*",
+        "@visx/axis": "3.12.0",
+        "@visx/grid": "3.12.0",
+        "@visx/scale": "3.12.0",
+        "@visx/text": "3.12.0",
+        "classnames": "^2.3.1",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "@react-spring/web": "^9.4.5",
+        "react": "^16.3.0-0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@visx/responsive": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/responsive/-/responsive-3.12.0.tgz",
+      "integrity": "sha512-GV1BTYwAGlk/K5c9vH8lS2syPnTuIqEacI7L6LRPbsuaLscXMNi+i9fZyzo0BWvAdtRV8v6Urzglo++lvAXT1Q==",
+      "dependencies": {
+        "@types/lodash": "^4.14.172",
+        "@types/react": "*",
+        "lodash": "^4.17.21",
+        "prop-types": "^15.6.1"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
+    "node_modules/@visx/scale": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/scale/-/scale-3.12.0.tgz",
+      "integrity": "sha512-+ubijrZ2AwWCsNey0HGLJ0YKNeC/XImEFsr9rM+Uef1CM3PNM43NDdNTrdBejSlzRq0lcfQPWYMYQFSlkLcPOg==",
+      "dependencies": {
+        "@visx/vendor": "3.12.0"
+      }
+    },
+    "node_modules/@visx/shape": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/shape/-/shape-3.12.0.tgz",
+      "integrity": "sha512-/1l0lrpX9tPic6SJEalryBKWjP/ilDRnQA+BGJTI1tj7i23mJ/J0t4nJHyA1GrL4QA/bM/qTJ35eyz5dEhJc4g==",
+      "dependencies": {
+        "@types/d3-path": "^1.0.8",
+        "@types/d3-shape": "^1.3.1",
+        "@types/lodash": "^4.14.172",
+        "@types/react": "*",
+        "@visx/curve": "3.12.0",
+        "@visx/group": "3.12.0",
+        "@visx/scale": "3.12.0",
+        "classnames": "^2.3.1",
+        "d3-path": "^1.0.5",
+        "d3-shape": "^1.2.0",
+        "lodash": "^4.17.21",
+        "prop-types": "^15.5.10"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
+    "node_modules/@visx/text": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/text/-/text-3.12.0.tgz",
+      "integrity": "sha512-0rbDYQlbuKPhBqXkkGYKFec1gQo05YxV45DORzr6hCyaizdJk1G+n9VkuKSHKBy1vVQhBA0W3u/WXd7tiODQPA==",
+      "dependencies": {
+        "@types/lodash": "^4.14.172",
+        "@types/react": "*",
+        "classnames": "^2.3.1",
+        "lodash": "^4.17.21",
+        "prop-types": "^15.7.2",
+        "reduce-css-calc": "^1.3.0"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
+    "node_modules/@visx/tooltip": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/tooltip/-/tooltip-3.12.0.tgz",
+      "integrity": "sha512-pWhsYhgl0Shbeqf80qy4QCB6zpq6tQtMQQxKlh3UiKxzkkfl+Metaf9p0/S0HexNi4vewOPOo89xWx93hBeh3A==",
+      "dependencies": {
+        "@types/react": "*",
+        "@visx/bounds": "3.12.0",
+        "classnames": "^2.3.1",
+        "prop-types": "^15.5.10",
+        "react-use-measure": "^2.0.4"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0-0 || ^17.0.0-0 || ^18.0.0-0",
+        "react-dom": "^16.8.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
+    "node_modules/@visx/vendor": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/vendor/-/vendor-3.12.0.tgz",
+      "integrity": "sha512-SVO+G0xtnL9dsNpGDcjCgoiCnlB3iLSM9KLz1sLbSrV7RaVXwY3/BTm2X9OWN1jH2a9M+eHt6DJ6sE6CXm4cUg==",
+      "dependencies": {
+        "@types/d3-array": "3.0.3",
+        "@types/d3-color": "3.1.0",
+        "@types/d3-delaunay": "6.0.1",
+        "@types/d3-format": "3.0.1",
+        "@types/d3-geo": "3.1.0",
+        "@types/d3-interpolate": "3.0.1",
+        "@types/d3-scale": "4.0.2",
+        "@types/d3-time": "3.0.0",
+        "@types/d3-time-format": "2.1.0",
+        "d3-array": "3.2.1",
+        "d3-color": "3.1.0",
+        "d3-delaunay": "6.0.2",
+        "d3-format": "3.1.0",
+        "d3-geo": "3.1.0",
+        "d3-interpolate": "3.0.1",
+        "d3-scale": "4.0.2",
+        "d3-time": "3.1.0",
+        "d3-time-format": "4.1.0",
+        "internmap": "2.0.3"
+      }
+    },
+    "node_modules/@visx/voronoi": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/voronoi/-/voronoi-3.12.0.tgz",
+      "integrity": "sha512-U3HWu6g5UjQchFDq8k/A4U9WrlN+80rAFPdGOUvIGOueQw9RmlZlNaeg8IJcQr2yk1s4O/VSpt3nR82zdINWMw==",
+      "dependencies": {
+        "@types/d3-voronoi": "^1.1.9",
+        "@types/react": "*",
+        "classnames": "^2.3.1",
+        "d3-voronoi": "^1.1.2",
+        "prop-types": "^15.6.1"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
+    "node_modules/@visx/xychart": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/xychart/-/xychart-3.12.0.tgz",
+      "integrity": "sha512-itJ7qvj/STpVmHesVyo2vPOataBM1mgSaf9R6/s4Bpe340wZldfCJ+IqRcNgdtbBagz1Hlr/sRnla4tWE2yw9A==",
+      "dependencies": {
+        "@types/lodash": "^4.14.172",
+        "@types/react": "*",
+        "@visx/annotation": "3.12.0",
+        "@visx/axis": "3.12.0",
+        "@visx/event": "3.12.0",
+        "@visx/glyph": "3.12.0",
+        "@visx/grid": "3.12.0",
+        "@visx/react-spring": "3.12.0",
+        "@visx/responsive": "3.12.0",
+        "@visx/scale": "3.12.0",
+        "@visx/shape": "3.12.0",
+        "@visx/text": "3.12.0",
+        "@visx/tooltip": "3.12.0",
+        "@visx/vendor": "3.12.0",
+        "@visx/voronoi": "3.12.0",
+        "classnames": "^2.3.1",
+        "d3-interpolate-path": "2.2.1",
+        "d3-shape": "^2.0.0",
+        "lodash": "^4.17.21",
+        "mitt": "^2.1.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "@react-spring/web": "^9.4.5",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@visx/xychart/node_modules/d3-shape": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-2.1.0.tgz",
+      "integrity": "sha512-PnjUqfM2PpskbSLTJvAzp2Wv4CZsnAgTfcVRTwW03QR3MkXF8Uo7B1y/lWkAsmbKwuecto++4NlsYcvYpXpTHA==",
+      "dependencies": {
+        "d3-path": "1 - 2"
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.4.tgz",
@@ -1473,11 +2300,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/ast-types": {
+      "version": "0.16.1",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.16.1.tgz",
+      "integrity": "sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "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"
       },
@@ -1491,8 +2329,19 @@
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+    },
+    "node_modules/better-opn": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/better-opn/-/better-opn-3.0.2.tgz",
+      "integrity": "sha512-aVNobHnJqLiUelTaHat9DZ1qM2w0C0Eym4LPI/3JxOnSokGVdsl1T1kN7TFvsEAD8G47A6VKQ0TVHqbBnYMJlQ==",
+      "peer": true,
+      "dependencies": {
+        "open": "^8.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
     },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
@@ -1504,6 +2353,12 @@
         "concat-map": "0.0.1"
       }
     },
+    "node_modules/browser-assert": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/browser-assert/-/browser-assert-1.2.1.tgz",
+      "integrity": "sha512-nfulgvOR6S4gt9UKCeGJOuSGBPGiFT6oQ/2UBnvTY/5aQ1PnksW72fhZkM30DzoRRv2WpwZf1vHHEr3mtuXIWQ==",
+      "peer": true
+    },
     "node_modules/browserslist": {
       "version": "4.24.4",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz",
@@ -1540,7 +2395,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
       "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
-      "dev": true,
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.0",
         "es-define-property": "^1.0.0",
@@ -1558,7 +2412,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.1.tgz",
       "integrity": "sha512-BhYE+WDaywFg2TBWYNXAE+8B1ATnThNBqXHP5nQu0jWJdVvY2hvkpyB3qOmtmDePiS5/BDQ8wASEWGMWRG148g==",
-      "dev": true,
       "dependencies": {
         "es-errors": "^1.3.0",
         "function-bind": "^1.1.2"
@@ -1571,7 +2424,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.3.tgz",
       "integrity": "sha512-YTd+6wGlNlPxSuri7Y6X8tY2dmm12UMH66RpKMhiX6rsk5wXXnYgbUcOt8kiS31/AjfoTOvCsE+w8nZQLQnzHA==",
-      "dev": true,
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.1",
         "get-intrinsic": "^1.2.6"
@@ -1628,6 +2480,30 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -1669,14 +2545,138 @@
         "which": "^2.0.1"
       },
       "engines": {
-        "node": ">= 8"
+        "node": ">= 8"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+    },
+    "node_modules/d3-array": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.1.tgz",
+      "integrity": "sha512-gUY/qeHq/yNqqoCKNq4vtpFLdoCdvyNpWoC/KNjhGbhDuQpAM9sIQQKkXSNpXa9h5KySs/gzm7R88WkUutgwWQ==",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-delaunay": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.2.tgz",
+      "integrity": "sha512-IMLNldruDQScrcfT+MWnazhHbDJhcRJyOEBAJfwQnHle1RPh6WDuLvxNArUju2VSMSUuKlY5BGHRJ2cYyoFLQQ==",
+      "dependencies": {
+        "delaunator": "5"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.0.tgz",
+      "integrity": "sha512-JEo5HxXDdDYXCaWdwLRt79y7giK8SbhZJbFWXqbRTolCHFI5jRqteLzCsq51NKbUoX0PjBVSohxrx+NoOUujYA==",
+      "dependencies": {
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate-path": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate-path/-/d3-interpolate-path-2.2.1.tgz",
+      "integrity": "sha512-6qLLh/KJVzls0XtMsMpcxhqMhgVEN7VIbR/6YGZe2qlS8KDgyyVB20XcmGnDyB051HcefQXM/Tppa9vcANEA4Q=="
+    },
+    "node_modules/d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+    },
+    "node_modules/d3-random": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-2.2.2.tgz",
+      "integrity": "sha512-0D9P8TRj6qDAtHhRQn6EfdOtHMfsUWanl3yb/84C4DqpZ+VsgfI5iTVRNRbELCfNvRfpMr8OrqqUTQ6ANGCijw=="
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "dependencies": {
+        "d3-path": "1"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
-    "node_modules/csstype": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
+    "node_modules/d3-voronoi": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.4.tgz",
+      "integrity": "sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg=="
     },
     "node_modules/data-view-buffer": {
       "version": "1.0.2",
@@ -1729,11 +2729,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.19",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.19.tgz",
+      "integrity": "sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw=="
+    },
     "node_modules/debug": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
       "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
-      "dev": true,
       "dependencies": {
         "ms": "^2.1.3"
       },
@@ -1756,7 +2760,6 @@
       "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",
@@ -1769,6 +2772,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/define-lazy-prop": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/define-properties": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
@@ -1786,6 +2798,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delaunator": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.1.tgz",
+      "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==",
+      "dependencies": {
+        "robust-predicates": "^3.0.2"
+      }
+    },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/doctrine": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
@@ -1802,7 +2830,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
       "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
-      "dev": true,
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.1",
         "es-errors": "^1.3.0",
@@ -1887,7 +2914,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
       "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -1896,7 +2922,6 @@
       "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"
       }
@@ -1932,7 +2957,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
       "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
-      "dev": true,
       "dependencies": {
         "es-errors": "^1.3.0"
       },
@@ -1985,7 +3009,6 @@
       "version": "0.24.2",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.24.2.tgz",
       "integrity": "sha512-+9egpBW8I3CD5XPe0n6BfT5fxLzxrlDzqydF3aviG+9ni1lDC/OvMHcxqEFV0+LANZG5R1bFMWfUrjVsdwxJvA==",
-      "dev": true,
       "hasInstallScript": true,
       "bin": {
         "esbuild": "bin/esbuild"
@@ -2021,6 +3044,18 @@
         "@esbuild/win32-x64": "0.24.2"
       }
     },
+    "node_modules/esbuild-register": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/esbuild-register/-/esbuild-register-3.6.0.tgz",
+      "integrity": "sha512-H2/S7Pm8a9CL1uhp9OvjwrBh5Pvx0H8qVOxNu8Wed9Y7qv56MPtq+GGM8RJpq6glYJn9Wspr8uw7l55uyinNeg==",
+      "peer": true,
+      "dependencies": {
+        "debug": "^4.3.4"
+      },
+      "peerDependencies": {
+        "esbuild": ">=0.12 <1"
+      }
+    },
     "node_modules/escalade": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
@@ -2199,6 +3234,19 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "peer": true,
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/esquery": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
@@ -2271,6 +3319,15 @@
         "node": ">=16.0.0"
       }
     },
+    "node_modules/file-system-cache": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/file-system-cache/-/file-system-cache-2.3.0.tgz",
+      "integrity": "sha512-l4DMNdsIPsVnKrgEXbJwDJsA5mB8rGwHYERMgqQx/xAUtChPJMre1bXBzDEqqVbWv9AIbFezXMxeEkZDSrXUOQ==",
+      "dependencies": {
+        "fs-extra": "11.1.1",
+        "ramda": "0.29.0"
+      }
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -2310,11 +3367,23 @@
       "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/fs-extra": {
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz",
+      "integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -2333,7 +3402,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -2380,7 +3448,6 @@
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.7.tgz",
       "integrity": "sha512-VW6Pxhsrk0KAOqs3WEd0klDiF/+V7gQOpAvY1jVU/LHmaD/kQO4523aiJuikX/QAKYiW6x8Jh+RJej1almdtCA==",
-      "dev": true,
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.1",
         "es-define-property": "^1.0.1",
@@ -2404,7 +3471,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
       "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
-      "dev": true,
       "dependencies": {
         "dunder-proto": "^1.0.1",
         "es-object-atoms": "^1.0.0"
@@ -2474,7 +3540,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
       "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -2482,6 +3547,11 @@
         "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",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
+    },
     "node_modules/has-bigints": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
@@ -2507,7 +3577,6 @@
       "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"
       },
@@ -2534,7 +3603,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
       "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -2546,7 +3614,6 @@
       "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"
       },
@@ -2561,7 +3628,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -2603,6 +3669,12 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "peer": true
+    },
     "node_modules/internal-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
@@ -2617,6 +3689,30 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/is-arguments": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.2.0.tgz",
+      "integrity": "sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==",
+      "peer": true,
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -2687,7 +3783,6 @@
       "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"
       },
@@ -2743,6 +3838,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "peer": true,
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -2771,7 +3881,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz",
       "integrity": "sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==",
-      "dev": true,
       "dependencies": {
         "call-bound": "^1.0.3",
         "get-proto": "^1.0.0",
@@ -2829,7 +3938,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
       "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
-      "dev": true,
       "dependencies": {
         "call-bound": "^1.0.2",
         "gopd": "^1.2.0",
@@ -2907,7 +4015,6 @@
       "version": "1.1.15",
       "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
       "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
-      "dev": true,
       "dependencies": {
         "which-typed-array": "^1.1.16"
       },
@@ -2961,6 +4068,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "peer": true,
+      "dependencies": {
+        "is-docker": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/isarray": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
@@ -3007,6 +4126,15 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/jsdoc-type-pratt-parser": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-4.8.0.tgz",
+      "integrity": "sha512-iZ8Bdb84lWRuGHamRXFyML07r21pcwBrLkHEuHgEY5UbCouBwv7ECknDRKzsQIXMiqpPymqtIf8TC/shYKB5rw==",
+      "peer": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/jsesc": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
@@ -3049,6 +4177,17 @@
         "node": ">=6"
       }
     },
+    "node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -3101,6 +4240,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -3127,15 +4271,40 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.487.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.487.0.tgz",
+      "integrity": "sha512-aKqhOQ+YmFnwq8dWgGjOuLc8V1R9/c/yOd+zDY4+ohsR2Jo05lSGc3WsstYPIzcTpeosN7LoCkLReUUITvaIvw==",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/map-or-similar": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/map-or-similar/-/map-or-similar-1.5.0.tgz",
+      "integrity": "sha512-0aF7ZmVon1igznGI4VS30yugpduQW3y3GkcgGJOp7d8x8QrizhigUxjI/m2UojsXXto+jLAH3KSz+xOJTiORjg=="
+    },
+    "node_modules/math-expression-evaluator": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.4.0.tgz",
+      "integrity": "sha512-4vRUvPyxdO8cWULGTh9dZWL2tZK6LDBvj+OGHBER7poH9Qdt7kXEoj20wiz4lQUbUXQZFjPbe5mVDo9nutizCw=="
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
       "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
     },
+    "node_modules/memoizerific": {
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/memoizerific/-/memoizerific-1.11.3.tgz",
+      "integrity": "sha512-/EuHYwAPdLtXwAwSZkh/Gutery6pD2KYd44oQLhAvQp/50mpyduZh8Q7PYHXTCJ+wuXxt7oij2LXyIJOOYFPog==",
+      "dependencies": {
+        "map-or-similar": "^1.5.0"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -3148,11 +4317,15 @@
         "node": "*"
       }
     },
+    "node_modules/mitt": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
+      "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
     },
     "node_modules/nanoid": {
       "version": "3.3.8",
@@ -3188,7 +4361,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3197,7 +4369,6 @@
       "version": "1.13.3",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.3.tgz",
       "integrity": "sha512-kDCGIbxkDSXE3euJZZXzc6to7fCrKHNI/hSRQnRuQ+BWjFNzZwiFF8fj/6o2t2G9/jTj8PSIYTfCLelLZEeRpA==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -3284,6 +4455,23 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/open": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
+      "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
+      "peer": true,
+      "dependencies": {
+        "define-lazy-prop": "^2.0.0",
+        "is-docker": "^2.1.1",
+        "is-wsl": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -3394,7 +4582,6 @@
       "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"
       }
@@ -3436,11 +4623,19 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -3456,6 +4651,29 @@
         "node": ">=6"
       }
     },
+    "node_modules/qs": {
+      "version": "6.14.1",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.1.tgz",
+      "integrity": "sha512-4EK3+xJl8Ts67nLYNwqw/dsFVnCf+qR7RgXSK9jEEm9unao3njwMDdmsdvoKBKHzxd7tCYz5e5M+SnMjdtXGQQ==",
+      "dependencies": {
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/ramda": {
+      "version": "0.29.0",
+      "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.29.0.tgz",
+      "integrity": "sha512-BBea6L67bYLtdbOqfp8f58fPMqEwx0doL+pAi8TZyp2YWz8R9G8z9x75CZI8W+ftqhFHCpEX2cRnUUXK130iKA==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/ramda"
+      }
+    },
     "node_modules/react": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
@@ -3482,8 +4700,7 @@
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/react-refresh": {
       "version": "0.14.2",
@@ -3494,6 +4711,89 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.30.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.2.tgz",
+      "integrity": "sha512-H2Bm38Zu1bm8KUE5NVWRMzuIyAV8p/JrOaBJAwVmp37AXG72+CZJlEBw6pdn9i5TBgLMhNDgijS4ZlblpHyWTA==",
+      "dependencies": {
+        "@remix-run/router": "1.23.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.30.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.2.tgz",
+      "integrity": "sha512-l2OwHn3UUnEVUqc6/1VMmR1cvZryZ3j3NzapC2eUXO1dB0sYp5mvwdjiXhpUbRb21eFow3qSxpP8Yv6oAU824Q==",
+      "dependencies": {
+        "@remix-run/router": "1.23.1",
+        "react-router": "6.30.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/react-use-measure": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.7.tgz",
+      "integrity": "sha512-KrvcAo13I/60HpwGO5jpW7E9DfusKyLPLvuHlUyP5zqnmAPhNc6qTRjUQrdTADl0lpPpDVU2/Gg51UlOGHXbdg==",
+      "peerDependencies": {
+        "react": ">=16.13",
+        "react-dom": ">=16.13"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/recast": {
+      "version": "0.23.11",
+      "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.11.tgz",
+      "integrity": "sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==",
+      "peer": true,
+      "dependencies": {
+        "ast-types": "^0.16.1",
+        "esprima": "~4.0.0",
+        "source-map": "~0.6.1",
+        "tiny-invariant": "^1.3.3",
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/reduce-css-calc": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz",
+      "integrity": "sha512-0dVfwYVOlf/LBA2ec4OwQ6p3X9mYxn/wOl2xTcLwjnPYrkgEfPx3VI4eGCH3rQLlPISG5v9I9bkZosKsNRTRKA==",
+      "dependencies": {
+        "balanced-match": "^0.4.2",
+        "math-expression-evaluator": "^1.2.14",
+        "reduce-function-call": "^1.0.1"
+      }
+    },
+    "node_modules/reduce-css-calc/node_modules/balanced-match": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz",
+      "integrity": "sha512-STw03mQKnGUYtoNjmowo4F2cRmIIxYEGiMsjjwla/u5P1lxadj/05WkNaFjNiKTgJkj8KiXbgAiRTmcQRwQNtg=="
+    },
+    "node_modules/reduce-function-call": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/reduce-function-call/-/reduce-function-call-1.0.3.tgz",
+      "integrity": "sha512-Hl/tuV2VDgWgCSEeWMLwxLZqX7OK59eU1guxXsRKTAyeYimivsKdtcV4fu3r710tpG5GmDKDhQ0HSZLExnNmyQ==",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -3562,6 +4862,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/robust-predicates": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
+      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="
+    },
     "node_modules/rollup": {
       "version": "4.31.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.31.0.tgz",
@@ -3639,7 +4944,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
       "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
-      "dev": true,
       "dependencies": {
         "call-bound": "^1.0.2",
         "es-errors": "^1.3.0",
@@ -3673,7 +4977,6 @@
       "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",
@@ -3740,7 +5043,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
       "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
-      "dev": true,
       "dependencies": {
         "es-errors": "^1.3.0",
         "object-inspect": "^1.13.3",
@@ -3759,7 +5061,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
       "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
-      "dev": true,
       "dependencies": {
         "es-errors": "^1.3.0",
         "object-inspect": "^1.13.3"
@@ -3775,7 +5076,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
       "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
-      "dev": true,
       "dependencies": {
         "call-bound": "^1.0.2",
         "es-errors": "^1.3.0",
@@ -3793,7 +5093,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
       "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
-      "dev": true,
       "dependencies": {
         "call-bound": "^1.0.2",
         "es-errors": "^1.3.0",
@@ -3808,6 +5107,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -3817,6 +5125,37 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/store2": {
+      "version": "2.14.4",
+      "resolved": "https://registry.npmjs.org/store2/-/store2-2.14.4.tgz",
+      "integrity": "sha512-srTItn1GOvyvOycgxjAnPA63FZNwy0PTyUBFMHRM+hVFltAeoh0LmNBz9SZqUS9mMqGk8rfyWyXn3GH5ReJ8Zw=="
+    },
+    "node_modules/storybook": {
+      "version": "8.6.15",
+      "resolved": "https://registry.npmjs.org/storybook/-/storybook-8.6.15.tgz",
+      "integrity": "sha512-Ob7DMlwWx8s7dMvcQ3xPc02TvUeralb+xX3oaPRk9wY9Hc6M1IBC/7cEoITkSmRS2v38DHubC+mtEKNc1u2gQg==",
+      "peer": true,
+      "dependencies": {
+        "@storybook/core": "8.6.15"
+      },
+      "bin": {
+        "getstorybook": "bin/index.cjs",
+        "sb": "bin/index.cjs",
+        "storybook": "bin/index.cjs"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "prettier": "^2 || ^3"
+      },
+      "peerDependenciesMeta": {
+        "prettier": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/string.prototype.matchall": {
       "version": "4.0.12",
       "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz",
@@ -3946,12 +5285,61 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/synchronous-promise": {
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.17.tgz",
+      "integrity": "sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g=="
+    },
+    "node_modules/tailwind-merge": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz",
+      "integrity": "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "4.0.14",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.14.tgz",
       "integrity": "sha512-92YT2dpt671tFiHH/e1ok9D987N9fHD5VWoly1CdPD/Cd1HMglvZwP3nx2yTj2lbXDAHt8QssZkxTLCCTNL+xw==",
       "license": "MIT"
     },
+    "node_modules/tailwindcss-animate": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
+      "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
+    "node_modules/telejson": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/telejson/-/telejson-7.2.0.tgz",
+      "integrity": "sha512-1QTEcJkJEhc8OnStBx/ILRu5J2p0GjvWsBx56bmZRqnrkdBMUe+nX92jxV+p3dB4CP6PZCdJMQJwCggkNBMzkQ==",
+      "dependencies": {
+        "memoizerific": "^1.11.3"
+      }
+    },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="
+    },
+    "node_modules/ts-dedent": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.2.0.tgz",
+      "integrity": "sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==",
+      "engines": {
+        "node": ">=6.10"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "peer": true
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -3964,6 +5352,17 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/type-fest": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/typed-array-buffer": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
@@ -4069,6 +5468,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/undici-types": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw=="
+    },
+    "node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.2.tgz",
@@ -4108,6 +5520,24 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/util": {
+      "version": "0.12.5",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
+      "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
+      "peer": true,
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "is-arguments": "^1.0.4",
+        "is-generator-function": "^1.0.7",
+        "is-typed-array": "^1.1.3",
+        "which-typed-array": "^1.1.2"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+    },
     "node_modules/vite": {
       "version": "6.0.11",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.11.tgz",
@@ -4262,7 +5692,6 @@
       "version": "1.1.18",
       "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.18.tgz",
       "integrity": "sha512-qEcY+KJYlWyLH9vNbsr6/5j59AXk5ni5aakf8ldzBvGde6Iz4sxZGkJyWSAueTG7QhOvNRYb1lDdFmL5Td0QKA==",
-      "dev": true,
       "dependencies": {
         "available-typed-arrays": "^1.0.7",
         "call-bind": "^1.0.8",
@@ -4287,6 +5716,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ws": {
+      "version": "8.19.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.19.0.tgz",
+      "integrity": "sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==",
+      "peer": true,
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
diff --git a/package.json b/package.json
index f67e815..c10d6d4 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@blueskyproject/tiled": "^0.0.23",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tailwindcss": "^4.0.14"
diff --git a/src/Header.tsx b/src/Header.tsx
index 7f4ae9f..9191c6d 100644
--- a/src/Header.tsx
+++ b/src/Header.tsx
@@ -1,8 +1,10 @@
 import React, { useState } from 'react';
 import { Button } from './Button';
-import 'bluesky-web/style.css';
 import './header.css';
-import { TiledWidget } from './TiledWidget';
+//import { TiledWidget } from './TiledWidget';
+import { Tiled, TiledItemLinks } from '@blueskyproject/tiled';
+import '@blueskyproject/tiled/style.css';
+import { createFileUrlFromTiledItem } from './utils';
 
 export interface HeaderProps {
   logoUrl: string;
@@ -17,18 +19,23 @@ export interface HeaderProps {
 export const Header = ({ logoUrl, title, fileName, onSelect }: HeaderProps) => {
   const [showTiledWidget, setShowTiledWidget] = useState(false);
 
-  // Open the modal when "Select Dataset" is clicked.
-  const handleSelectClick = () => {
-    setShowTiledWidget(true);
-  };
+  // // Open the modal when "Select Dataset" is clicked.
+  // const handleSelectClick = () => {
+  //   setShowTiledWidget(true);
+  // };
 
-  // Close the modal.
-  const handleCloseModal = () => {
-    setShowTiledWidget(false);
-  };
+  // // Close the modal.
+  // const handleCloseModal = () => {
+  //   setShowTiledWidget(false);
+  // };
 
   // Callback from TiledWidget receives the file_url.
-  const handleTiledWidgetSelect = (file_url: string) => {
+  const handleTiledWidgetSelect = (tiledSelectedItemData: TiledItemLinks) => {
+    const file_url = createFileUrlFromTiledItem(tiledSelectedItemData);
+    if (!file_url) {
+      console.error("Valid file url not found");
+      return;
+    }
     console.log("Header received file_url:", file_url);
     if (onSelect) {
       onSelect(file_url);
@@ -45,12 +52,16 @@ export const Header = ({ logoUrl, title, fileName, onSelect }: HeaderProps) => {
           <div className="header-file-name">{fileName}</div>
         </div>
         <div>
-          <Button size="small" label="Select Dataset" onClick={handleSelectClick} />
+          {/* <Button size="small" label="Select Dataset" onClick={handleSelectClick} /> */}
+          {/* This button is always visible and will open the Tiled Modal when clicked */}
+          <Tiled isButtonMode={true} onSelectCallback={handleTiledWidgetSelect}/>
         </div>
       </div>
+      {/* This Tiled modal pops up and covers the screen on page refresh. It can be deleted and users can still use the button to open manually the first time */}
+      <Tiled isPopup={true} size='medium' closeOnSelect={true} onSelectCallback={handleTiledWidgetSelect}/>
 
       {/* Modal for TiledWidget */}
-      {showTiledWidget && (
+      {/* {showTiledWidget && (
         <div className="modal-overlay">
           <div className="modal-content">
             <div className="modal-header">
@@ -66,7 +77,7 @@ export const Header = ({ logoUrl, title, fileName, onSelect }: HeaderProps) => {
             </div>
           </div>
         </div>
-      )}
+      )} */}
     </header>
   );
 };
diff --git a/src/TiledWidget.tsx b/src/TiledWidget.tsx
index 2287956..b2ed9c9 100644
--- a/src/TiledWidget.tsx
+++ b/src/TiledWidget.tsx
@@ -1,6 +1,8 @@
 import React, { useRef, useEffect } from 'react';
-import { Tiled } from 'bluesky-web';
-import 'bluesky-web/style.css';
+//import { Tiled } from 'bluesky-web';
+//import 'bluesky-web/style.css';
+import { Tiled } from '@blueskyproject/tiled';
+import '@blueskyproject/tiled/style.css';
 
 export interface TiledWidgetProps {
   /**
diff --git a/src/utils.ts b/src/utils.ts
new file mode 100644
index 0000000..19e1820
--- /dev/null
+++ b/src/utils.ts
@@ -0,0 +1,17 @@
+import { TiledItemLinks } from "@blueskyproject/tiled";
+
+export const createFileUrlFromTiledItem = (tiledItemData: TiledItemLinks): string | null => {
+    let file_url = "";
+    const { protocol, hostname } = window.location;
+    const port = import.meta.env.VITE_TILED_PORT ?? '8787';
+    const apiPath = '/api/v1/';
+    //tiledItemData.default: "http://localhost:8000/api/v1/myZarrId"
+    let fileId = tiledItemData.default?.split(apiPath)[1]; //grab the string after /api/v1/
+    if (!fileId) {
+        console.error("createFileUrlFromTiledItem: Unable to extract fileId from tiledItemData:", tiledItemData);
+        return null;
+    }
+    file_url = `${protocol}//${hostname}:${port}/zarr/v2/${fileId}`;
+     // file_url = `http://localhost:8787/zarr/v2/${fileId}`;
+    return file_url;
+};

From 69cc4488d62457febf680f8e2eb18b7b2b16d1ec Mon Sep 17 00:00:00 2001
From: seijdeleon <seijdeleon@lbl.gov>
Date: Fri, 9 Jan 2026 15:01:58 -0800
Subject: [PATCH 02/15] new itk viewer that loads from the als github directly
 and displays message when no data selected

---
 src/ItkVtkViewer.tsx | 88 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 88 insertions(+)
 create mode 100644 src/ItkVtkViewer.tsx

diff --git a/src/ItkVtkViewer.tsx b/src/ItkVtkViewer.tsx
new file mode 100644
index 0000000..919cb91
--- /dev/null
+++ b/src/ItkVtkViewer.tsx
@@ -0,0 +1,88 @@
+const jsDelivrUrl = 'https://cdn.jsdelivr.net/gh/als-computing/itk-vtk-viewer@publish-dist/dist/itkVtkViewer.js';
+
+import React, { useEffect, useState, useRef } from 'react';
+
+type ItkVtkViewerProps = {
+    dataUrl?: string;
+};
+
+export default function ItkVtkViewer({ dataUrl }: ItkVtkViewerProps) {
+  const [size, setSize] = useState({ width: 400, height: 401 });
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+
+  useEffect(() => {
+    if (!iframeRef.current || !dataUrl) return;
+
+    const iframe = iframeRef.current;
+    const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
+    
+    if (!iframeDoc) return;
+
+    // Create iframe content
+    iframeDoc.open();
+    iframeDoc.write(`
+      <!DOCTYPE html>
+      <html>
+      <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <style>
+          body { 
+            margin: 0; 
+            padding: 0; 
+            overflow: hidden;
+            font-family: Arial, sans-serif;
+          }
+        </style>
+      </head>
+      <body>
+        <div 
+          class="itk-vtk-viewer"
+          data-url="${dataUrl}"
+          data-rotate="false"
+          data-viewport="100vwx100vh"
+          style="width: 100vw; height: 100vh;"
+        ></div>
+        <script src="${jsDelivrUrl}"></script>
+      </body>
+      </html>
+    `);
+    iframeDoc.close();
+
+  }, [dataUrl]);
+
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setSize({
+          width: entry.contentRect.width,
+          height: entry.contentRect.height,
+        });
+      }
+    });
+
+    if (iframeRef.current) {
+      resizeObserver.observe(iframeRef.current);
+    }
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  if (!dataUrl) {
+    return <div style={{textAlign: 'center', marginTop: '3rem'}}>Please select a data set to start the viewer</div>;
+  } else {
+      return (
+        <iframe
+          key={dataUrl}
+          ref={iframeRef}
+          style={{
+            width: '100%', 
+            height: '100%'
+          }}
+          title="ITK VTK Viewer"
+        />
+      );
+  }
+}
\ No newline at end of file

From 5df1b93974bd8c0fa2c8695a753dba1b49ed3f51 Mon Sep 17 00:00:00 2001
From: seijdeleon <seijdeleon@lbl.gov>
Date: Fri, 9 Jan 2026 15:04:56 -0800
Subject: [PATCH 03/15] update env to include tiled api examples and accept new
 default file id

---
 .env.example | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.env.example b/.env.example
index 1720881..2e96be5 100644
--- a/.env.example
+++ b/.env.example
@@ -1 +1,4 @@
 DATA_PATH=/Users/david/Documents/data/tomo/scratch
+VITE_TILED_DEFAULT_FILE_ID=rec20230606_152011_jong-seto_fungal-mycelia_flat-AQ_fungi2_fast #the first file that will be automatically loaded into the viewer app
+VITE_API_TILED_URL=http://localhost:8000/api/v1 #optional custom url for tiled
+#VITE_TILED_PORT=8001 #optionally specify the tiled port (not to be used with VITE_API_TILED_URL) (will assume same hostname as browser)
\ No newline at end of file

From 1815ad88daa84ee7be23d67ae4a0be2dc706f005 Mon Sep 17 00:00:00 2001
From: seijdeleon <seijdeleon@lbl.gov>
Date: Fri, 9 Jan 2026 15:05:54 -0800
Subject: [PATCH 04/15] refactor to use new itk viewer component and new utils

---
 src/App.jsx    |  25 ++++------
 src/Header.tsx |  51 +++-----------------
 src/utils.ts   | 123 +++++++++++++++++++++++++++++++++++++++++++++----
 3 files changed, 128 insertions(+), 71 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 1a2afb6..7a1b2ec 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -12,34 +12,27 @@
 
 import React, { useState } from 'react';
 import { Header } from './Header';
-import ItkVtkViewerComponent from './ItkVtkViewerComponent';
+import ItkVtkViewer from './ItkVtkViewer';
 import './App.css';
 
-function App() {
-  const { protocol, hostname } = window.location;
-  const port = import.meta.env.VITE_TILED_PORT ?? '8787';
 
-  const defaultFileId = 'rec20240425_104614_nist-sand-30-100_27keV_z8mm_n2625';
-  const defaultFileUrl = `${protocol}//${hostname}:${port}/zarr/v2/${defaultFileId}`;
+import { getDefaultZarrFileUrl } from './utils';
 
-  const [fileUrl, setFileUrl] = useState(defaultFileUrl);
-  const fileName = fileUrl.split('/').pop() || '';
+const defaultZarrFileUrl = getDefaultZarrFileUrl() || '';
 
-  const iframeSrc = `${protocol}//${hostname}:${port}/viewer/?fileToLoad=${encodeURIComponent(fileUrl)}`;
+function App() {
+  const [fileUrl, setFileUrl] = useState(defaultZarrFileUrl);
+  const fileName = fileUrl.split('/').pop() || '';
 
   return (
-    <div id="app">
+    <div id="app" style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
       <Header
-        logoUrl="/images/als_logo_wheel.png"
+        logoUrl="images/als_logo_wheel.png"
         title="Tomography Visualizer powered by itk-vtk-viewer"
         fileName={fileName}
         onSelect={setFileUrl}
       />
-      <ItkVtkViewerComponent
-        src={iframeSrc}
-        height="100%"
-        flex="1"
-      />
+      <ItkVtkViewer dataUrl={fileUrl} />
     </div>
   );
 }
diff --git a/src/Header.tsx b/src/Header.tsx
index 9191c6d..f5bac1f 100644
--- a/src/Header.tsx
+++ b/src/Header.tsx
@@ -1,10 +1,8 @@
-import React, { useState } from 'react';
-import { Button } from './Button';
+import { useState } from 'react';
 import './header.css';
-//import { TiledWidget } from './TiledWidget';
 import { Tiled, TiledItemLinks } from '@blueskyproject/tiled';
 import '@blueskyproject/tiled/style.css';
-import { createFileUrlFromTiledItem } from './utils';
+import { createZarrFileUrlFromTiledItem, getTiledBaseUrl } from './utils';
 
 export interface HeaderProps {
   logoUrl: string;
@@ -17,34 +15,20 @@ export interface HeaderProps {
 }
 
 export const Header = ({ logoUrl, title, fileName, onSelect }: HeaderProps) => {
-  const [showTiledWidget, setShowTiledWidget] = useState(false);
-
-  // // Open the modal when "Select Dataset" is clicked.
-  // const handleSelectClick = () => {
-  //   setShowTiledWidget(true);
-  // };
-
-  // // Close the modal.
-  // const handleCloseModal = () => {
-  //   setShowTiledWidget(false);
-  // };
-
-  // Callback from TiledWidget receives the file_url.
   const handleTiledWidgetSelect = (tiledSelectedItemData: TiledItemLinks) => {
-    const file_url = createFileUrlFromTiledItem(tiledSelectedItemData);
+    const file_url = createZarrFileUrlFromTiledItem(tiledSelectedItemData);
     if (!file_url) {
       console.error("Valid file url not found");
       return;
     }
-    console.log("Header received file_url:", file_url);
+    console.log("User selected file:", file_url);
     if (onSelect) {
       onSelect(file_url);
     }
-    setShowTiledWidget(false);
   };
 
   return (
-    <header>
+    <header style={{flexShrink: 0}}>
       <div className="storybook-header">
         <div>
           <img src={logoUrl} className="header-logo" alt="Logo" />
@@ -52,32 +36,9 @@ export const Header = ({ logoUrl, title, fileName, onSelect }: HeaderProps) => {
           <div className="header-file-name">{fileName}</div>
         </div>
         <div>
-          {/* <Button size="small" label="Select Dataset" onClick={handleSelectClick} /> */}
-          {/* This button is always visible and will open the Tiled Modal when clicked */}
-          <Tiled isButtonMode={true} onSelectCallback={handleTiledWidgetSelect}/>
+          <Tiled isButtonMode={true} onSelectCallback={handleTiledWidgetSelect} singleColumnMode={true} tiledBaseUrl={getTiledBaseUrl()}/>
         </div>
       </div>
-      {/* This Tiled modal pops up and covers the screen on page refresh. It can be deleted and users can still use the button to open manually the first time */}
-      <Tiled isPopup={true} size='medium' closeOnSelect={true} onSelectCallback={handleTiledWidgetSelect}/>
-
-      {/* Modal for TiledWidget */}
-      {/* {showTiledWidget && (
-        <div className="modal-overlay">
-          <div className="modal-content">
-            <div className="modal-header">
-              <h3>Select a Dataset</h3>
-              <button className="close-button" onClick={handleCloseModal}>
-                ×
-              </button>
-            </div>
-            <div className="modal-body">
-              <div className="tiled-container">
-                <TiledWidget onSelect={handleTiledWidgetSelect} />
-              </div>
-            </div>
-          </div>
-        </div>
-      )} */}
     </header>
   );
 };
diff --git a/src/utils.ts b/src/utils.ts
index 19e1820..e0ed742 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,17 +1,120 @@
 import { TiledItemLinks } from "@blueskyproject/tiled";
 
-export const createFileUrlFromTiledItem = (tiledItemData: TiledItemLinks): string | null => {
-    let file_url = "";
-    const { protocol, hostname } = window.location;
-    const port = import.meta.env.VITE_TILED_PORT ?? '8787';
-    const apiPath = '/api/v1/';
-    //tiledItemData.default: "http://localhost:8000/api/v1/myZarrId"
-    let fileId = tiledItemData.default?.split(apiPath)[1]; //grab the string after /api/v1/
+
+/**
+ * Creates a Zarr file URL from a Tiled item's data by converting the API URL format to Zarr format.
+ * 
+ * This function takes a Tiled item's API URL (containing '/api/v1/') and transforms it into 
+ * a corresponding Zarr URL (using '/zarr/v2/') that can be consumed by itk-vtk-viewer.
+ * 
+ * @param tiledItemData - The Tiled item data containing link information
+ * @param tiledItemData.default - The default API URL for the Tiled item
+ * @returns The constructed Zarr file URL, or null if the URL cannot be constructed
+ * 
+ * @example
+ * ```typescript
+ * const tiledItem = { default: "http://localhost:8787/api/v1/my-dataset" };
+ * const zarrUrl = createZarrFileUrlFromTiledItem(tiledItem);
+ * // Returns: "http://localhost:8787/zarr/v2/my-dataset"
+ * ```
+ * 
+ * @example
+ * ```typescript
+ * // Invalid input - missing /api/v1/
+ * const invalidItem = { default: "http://localhost:8787/some-other-path" };
+ * const result = createZarrFileUrlFromTiledItem(invalidItem);
+ * // Returns: null
+ * ```
+ */
+export const createZarrFileUrlFromTiledItem = (tiledItemData: TiledItemLinks): string | null => {
+    // we need to pass the zarr file url to itk-vtk-viewer, but tiledItemData.default gives us the api url
+    // strip out the api/v1/ portion and replace with zarr/v2/
+
+    const tiledItemDefaultUrl = tiledItemData.default;
+    //if the current url doesn't have api/v1/ in it, don't attempt to process the id at all
+    //in future tiled viewer components, we will return an id field separately to eliminate these parsing issues
+    if (!tiledItemDefaultUrl || !tiledItemDefaultUrl.includes('/api/v1')) {
+        console.error("createZarrFileUrlFromTiledItem: Invalid tiledItemData.default URL does not contain expected /api/v1:", tiledItemDefaultUrl);
+        return null;
+    }
+
+    const tiledBaseUrl = getTiledBaseUrl();
+    const tiledBaseZarrUrl = tiledBaseUrl.replace('/api/v1', '/zarr/v2');
+    const fileId = tiledItemDefaultUrl.split('/api/v1/')[1]; //grab the string after /api/v1/
     if (!fileId) {
         console.error("createFileUrlFromTiledItem: Unable to extract fileId from tiledItemData:", tiledItemData);
         return null;
     }
-    file_url = `${protocol}//${hostname}:${port}/zarr/v2/${fileId}`;
-     // file_url = `http://localhost:8787/zarr/v2/${fileId}`;
-    return file_url;
+    const zarr_file_url = `${tiledBaseZarrUrl}/${fileId}`;
+
+    return zarr_file_url;
 };
+
+/**
+ * Gets the base URL for the Tiled API server.
+ * 
+ * This function returns the Tiled server's base URL, either from environment variables
+ * or by constructing it from the current window location. The URL includes the '/api/v1' path.
+ * 
+ * @returns The base URL for the Tiled API server including the '/api/v1' path
+ * 
+ * @example
+ * ```typescript
+ * // With VITE_API_TILED_URL environment variable set
+ * process.env.VITE_API_TILED_URL = "https://my-tiled-server.com/api/v1";
+ * const baseUrl = getTiledBaseUrl();
+ * // Returns: "https://my-tiled-server.com/api/v1"
+ * ```
+ * 
+ * @example
+ * ```typescript
+ * // Without environment variable, constructs from current location
+ * // Assuming current page is at https://localhost:3000/my-app
+ * // and VITE_TILED_PORT is "8787"
+ * const baseUrl = getTiledBaseUrl();
+ * // Returns: "https://localhost:8787/api/v1"
+ * ```
+ * 
+ * @remarks
+ * The function prioritizes the VITE_TILED_BASE_URL environment variable if available.
+ * If not set, it constructs the URL using:
+ * - Current page's protocol and hostname
+ * - VITE_TILED_PORT environment variable (defaults to '8787')
+ * - '/api/v1' as the API path
+ */
+export const getTiledBaseUrl = (): string => {
+    if (import.meta.env.VITE_API_TILED_URL) {
+        const apiUrl = import.meta.env.VITE_API_TILED_URL;
+        if (!apiUrl.includes('/api/v1')) {
+            console.warn("getTiledBaseUrl: VITE_API_TILED_URL (" + apiUrl + ") does not contain expected /api/v1/, using defaults instead.");
+            const defaultUrl = createDefaultTiledBaseUrl();
+            console.log("using default tiled base url:", defaultUrl);
+            return defaultUrl;
+        }
+        return import.meta.env.VITE_API_TILED_URL;
+    } else {
+        return createDefaultTiledBaseUrl();
+    }
+};
+
+export const createDefaultTiledBaseUrl = (): string => {
+    const { protocol, hostname } = window.location;
+    const port = import.meta.env.VITE_TILED_PORT ?? '8787';
+    const apiPath = '/api/v1';
+    return `${protocol}//${hostname}:${port}${apiPath}`;
+};
+
+
+export const getDefaultZarrFileUrl = (): string | null => {
+    // Get default file ID from env variable
+    //TODO: search Tiled for the most recent zarr file (metadata contains "ngff:Image" value) and take that file ID if no env
+    const defaultFileId = import.meta.env.VITE_TILED_DEFAULT_FILE_ID;
+    if (!defaultFileId) {
+        return null;
+    } else {
+        const tiledBaseUrl = getTiledBaseUrl();
+        const tiledBaseZarrUrl = tiledBaseUrl.replace('/api/v1', '/zarr/v2');
+        const zarr_file_url = `${tiledBaseZarrUrl}/${defaultFileId}`;
+        return zarr_file_url;
+    }
+}

From da5b783a9e2ce903107a59d034e31a952d622feb Mon Sep 17 00:00:00 2001
From: seijdeleon <seijdeleon@lbl.gov>
Date: Fri, 9 Jan 2026 15:21:10 -0800
Subject: [PATCH 05/15] add jsdoc and sanitizer

---
 src/utils.ts | 118 ++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 116 insertions(+), 2 deletions(-)

diff --git a/src/utils.ts b/src/utils.ts
index e0ed742..5221d96 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -86,17 +86,50 @@ export const getTiledBaseUrl = (): string => {
     if (import.meta.env.VITE_API_TILED_URL) {
         const apiUrl = import.meta.env.VITE_API_TILED_URL;
         if (!apiUrl.includes('/api/v1')) {
-            console.warn("getTiledBaseUrl: VITE_API_TILED_URL (" + apiUrl + ") does not contain expected /api/v1/, using defaults instead.");
+            console.warn("getTiledBaseUrl: VITE_API_TILED_URL (" + apiUrl + ") does not contain expected /api/v1, using defaults instead.");
             const defaultUrl = createDefaultTiledBaseUrl();
             console.log("using default tiled base url:", defaultUrl);
             return defaultUrl;
         }
-        return import.meta.env.VITE_API_TILED_URL;
+        const sanitizedUrl = sanitizeTiledBaseUrl(apiUrl);
+        return sanitizedUrl;
     } else {
         return createDefaultTiledBaseUrl();
     }
 };
 
+/**
+ * Creates the default Tiled base URL using the current window location and environment variables.
+ * 
+ * This function constructs a Tiled API URL by combining the current page's protocol and hostname
+ * with a port number from environment variables. It's used as a fallback when no explicit
+ * Tiled base URL is provided in the environment.
+ * 
+ * @returns The constructed default Tiled base URL including the '/api/v1' path
+ * 
+ * @example
+ * ```typescript
+ * // Assuming current page is at https://localhost:3000/my-app
+ * // and VITE_TILED_PORT is "8787"
+ * const defaultUrl = createDefaultTiledBaseUrl();
+ * // Returns: "https://localhost:8787/api/v1"
+ * ```
+ * 
+ * @example
+ * ```typescript
+ * // With no VITE_TILED_PORT set (uses default)
+ * // Assuming current page is at http://example.com/app
+ * const defaultUrl = createDefaultTiledBaseUrl();
+ * // Returns: "http://example.com:8787/api/v1"
+ * ```
+ * 
+ * @remarks
+ * The function uses:
+ * - Current window's protocol (http/https)
+ * - Current window's hostname
+ * - VITE_TILED_PORT environment variable (defaults to '8787' if not set)
+ * - Fixed API path '/api/v1'
+ */
 export const createDefaultTiledBaseUrl = (): string => {
     const { protocol, hostname } = window.location;
     const port = import.meta.env.VITE_TILED_PORT ?? '8787';
@@ -104,7 +137,88 @@ export const createDefaultTiledBaseUrl = (): string => {
     return `${protocol}//${hostname}:${port}${apiPath}`;
 };
 
+/**
+ * Sanitizes a Tiled base URL to ensure it has the correct format and API path.
+ * 
+ * This function normalizes a Tiled base URL by removing trailing slashes and ensuring
+ * it ends with the proper '/api/v1' path. It's used to clean up URLs that may have
+ * inconsistent formatting from environment variables or user input.
+ * 
+ * @param tiledBaseUrl - The Tiled base URL to sanitize
+ * @returns The sanitized URL with trailing slashes removed and '/api/v1' path ensured
+ * 
+ * @example
+ * ```typescript
+ * // Remove trailing slash
+ * const sanitized = sanitizeTiledBaseUrl("https://example.com/api/v1/");
+ * // Returns: "https://example.com/api/v1"
+ * ```
+ * 
+ * @example
+ * ```typescript
+ * // Add missing API path
+ * const sanitized = sanitizeTiledBaseUrl("https://example.com");
+ * // Returns: "https://example.com/api/v1"
+ * ```
+ * 
+ * @example
+ * ```typescript
+ * // Already properly formatted
+ * const sanitized = sanitizeTiledBaseUrl("https://example.com/api/v1");
+ * // Returns: "https://example.com/api/v1"
+ * ```
+ * 
+ * @remarks
+ * This function performs two main operations:
+ * 1. Removes any trailing slash from the URL
+ * 2. Ensures the URL ends with '/api/v1' (appends it if missing)
+ */
+export const sanitizeTiledBaseUrl = (tiledBaseUrl: string): string => {
+    let sanitizedUrl = tiledBaseUrl;
+    // Remove trailing slash if present
+    if (sanitizedUrl.endsWith('/')) {
+        sanitizedUrl = sanitizedUrl.slice(0, -1);
+    }
+    // Ensure it ends with /api/v1
+    if (!sanitizedUrl.endsWith('/api/v1')) {
+        sanitizedUrl += '/api/v1';
+    }
+    return sanitizedUrl;
+};
 
+/**
+ * Gets the default Zarr file URL from environment configuration.
+ * 
+ * This function constructs a default Zarr file URL using a file ID from environment variables.
+ * It converts the Tiled API base URL to a Zarr URL format and appends the default file ID.
+ * Returns null if no default file ID is configured.
+ * 
+ * @returns The constructed default Zarr file URL, or null if no default file ID is configured
+ * 
+ * @example
+ * ```typescript
+ * // With VITE_TILED_DEFAULT_FILE_ID set to "my-dataset"
+ * const defaultUrl = getDefaultZarrFileUrl();
+ * // Returns: "https://localhost:8787/zarr/v2/my-dataset"
+ * ```
+ * 
+ * @example
+ * ```typescript
+ * // With no VITE_TILED_DEFAULT_FILE_ID set
+ * const defaultUrl = getDefaultZarrFileUrl();
+ * // Returns: null
+ * ```
+ * 
+ * @remarks
+ * This function:
+ * 1. Reads the default file ID from VITE_TILED_DEFAULT_FILE_ID environment variable
+ * 2. Gets the current Tiled base URL using getTiledBaseUrl()
+ * 3. Converts the API URL format (/api/v1) to Zarr format (/zarr/v2)
+ * 4. Appends the file ID to create the complete Zarr URL
+ * 
+ * @todo Search Tiled for the most recent zarr file (metadata contains "ngff:Image" value)
+ * and use that file ID if no environment variable is set
+ */
 export const getDefaultZarrFileUrl = (): string | null => {
     // Get default file ID from env variable
     //TODO: search Tiled for the most recent zarr file (metadata contains "ngff:Image" value) and take that file ID if no env

From 592975afdfb7c8309c7528bbf71664a7c7c01de1 Mon Sep 17 00:00:00 2001
From: seijdeleon <seijdeleon@lbl.gov>
Date: Wed, 27 May 2026 09:50:44 -0700
Subject: [PATCH 06/15] network and docker updates

---
 custom_config.yml  | 22 +++++++++++++++---
 docker-compose.yml | 47 ++++++++++++++-----------------------
 nginx.conf         |  8 +++----
 react/Dockerfile   | 58 +++++++++++++---------------------------------
 src/Header.tsx     |  2 +-
 src/ItkViewer.tsx  | 39 +++++++++++++++++++++++++++++++
 vite.config.js     |  2 +-
 7 files changed, 98 insertions(+), 80 deletions(-)
 create mode 100644 src/ItkViewer.tsx

diff --git a/custom_config.yml b/custom_config.yml
index d4e68e0..0ae91bb 100644
--- a/custom_config.yml
+++ b/custom_config.yml
@@ -1,10 +1,26 @@
 authentication:
   allow_anonymous_access: false
-
+  single_user_api_key: ${TILED_SINGLE_USER_API_KEY}
+uvicorn:
+  host: 0.0.0.0
+  port: 8000
+allow_origins:
+  - http://localhost:5173
+  - http://localhost:5174
+  - http://localhost:8082
+  - http://localhost:8787
+  - http://host.docker.internal:5173
+  - http://host.docker.internal:5174
+  - http://host.docker.internal:8082
+  - http://host.docker.internal:8787
 trees:
 - path: /
   tree: catalog
   args:
-    uri: "sqlite+aiosqlite:////storage/catalog.db"
-    writable_storage: "/storage/data"
+    uri: "sqlite:////storage/catalog.db"
+    writable_storage: 
+      - "/storage/data"
+      - "sqlite:////storage/tabular.db"
+    readable_storage:
+      - "/storage/data"
     init_if_not_exists: true
diff --git a/docker-compose.yml b/docker-compose.yml
index 1d06c1e..a57fa82 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -11,19 +11,19 @@ services:
       - ./cors.conf:/etc/nginx/cors.conf:ro
     depends_on:
       - tiled
-      - viewer
       - react
     restart: unless-stopped
     networks:
       - webnet
 
   tiled:
-    build:
-      context: ./tiled
-      dockerfile: Dockerfile
+    # build:
+    #   context: ./tiled
+    #   dockerfile: Dockerfile
+    image: ghcr.io/bluesky/tiled:0.2.3
     environment:
       - DATA_DIR=/storage/data
-      - TILED_ALLOW_ORIGINS="http://localhost:8787 http://localhost:8082 http://localhost:5174 http://localhost:8000 http://host.docker.internal:8787 http://host.docker.internal:8082 http://host.docker.internal:5174"
+      #- TILED_ALLOW_ORIGINS='["http://localhost:8787", "http://localhost:8082", "http://localhost:5174", "http://localhost:8000", "http://host.docker.internal:8787", "http://host.docker.internal:8082", "http://host.docker.internal:5174"]'
       - TILED_SINGLE_USER_API_KEY=${TILED_SINGLE_USER_API_KEY}
       - TILED_CONFIG=/deploy/config/custom_config.yml  # Point to our custom config
     volumes:
@@ -33,35 +33,24 @@ services:
       - "8000"
     networks:
       - webnet
-    command: >
-          sh -c "
-            # 1) Launch the server in the background
-            exec tiled serve config --host 0.0.0.0 --port 8000 --scalable & 
-            TILED_PID=\$!
+    # command: >
+    #       sh -c "
+    #         # 1) Launch the server in the background
+    #         exec tiled serve config --host 0.0.0.0 --port 8000 --scalable & 
+    #         TILED_PID=\$!
 
-            # 2) Wait up to 30s for it to become healthy
-            sleep 30
+    #         # 2) Wait up to 30s for it to become healthy
+    #         sleep 30
 
-            # 3) Register your data once the server is accepting connections
-            tiled register http://localhost:8000/ /storage/data --api-key=${TILED_SINGLE_USER_API_KEY} --verbose
+    #         # 3) Register your data once the server is accepting connections
+    #         tiled register http://localhost:8000/ /storage/data --api-key=${TILED_SINGLE_USER_API_KEY} --verbose
 
-            # 4) Hand control back to the server process so docker logs still show it
-            wait \$TILED_PID
-          "
+    #         # 4) Hand control back to the server process so docker logs still show it
+    #         wait \$TILED_PID
+    #       "
+    command: sleep infinity
     restart: unless-stopped
 
-
-  viewer:
-    build:
-      context: ./viewer
-      dockerfile: Dockerfile
-    expose:
-      - "8082"
-    networks:
-      - webnet
-    restart: unless-stopped
-
-
   react:
     build:
       context: .
diff --git a/nginx.conf b/nginx.conf
index 201b98c..ac2a9cc 100644
--- a/nginx.conf
+++ b/nginx.conf
@@ -35,10 +35,10 @@ http {
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 
         }
-        location /viewer/ {
-            proxy_pass http://viewer:8082/;
-            include /etc/nginx/cors.conf;
-        }
+        # location /viewer/ {
+        #     proxy_pass http://viewer:8082/;
+        #     include /etc/nginx/cors.conf;
+        # }
         # path rewrite
         location /react/ {
             # Simply proxy pass without trying to rewrite paths
diff --git a/react/Dockerfile b/react/Dockerfile
index 81761c0..10dcb2b 100644
--- a/react/Dockerfile
+++ b/react/Dockerfile
@@ -1,52 +1,26 @@
-FROM continuumio/miniconda3:25.1.1-2
+FROM node:20-alpine
 
-# Install system dependencies
-RUN apt-get update && \
-    apt-get install -y git curl build-essential socat && \
-    apt-get clean && \
-    rm -rf /var/lib/apt/lists/*
+# Install system dependencies for native modules
+RUN apk add --no-cache git python3 make g++
 
-# Install Node.js 20.x (LTS)
-RUN curl -fsSL https://deb.nodesource.com/setup_20.x | bash - && \
-    apt-get install -y nodejs && \
-    apt-get clean && \
-    rm -rf /var/lib/apt/lists/*
-
-# Install app and viewer dependency
+# Set working directory
 WORKDIR /app
+
+# Copy package files first for better caching
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy the rest of the application
 COPY . .
 
-# Puppeteer skip (redundant but safe for good DX)
+# Set environment variables
 ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
 ENV PUPPETEER_SKIP_DOWNLOAD=true
 
-# Install project dependencies
-WORKDIR /app
-RUN npm install bluesky-web && npm install
-
-RUN echo '#!/usr/bin/env node\n\
-const fs = require("fs");\n\
-const path = require("path");\n\
-\n\
-const packageJsonPath = path.join("node_modules", "bluesky-web", "package.json");\n\
-\n\
-if (fs.existsSync(packageJsonPath)) {\n\
-    console.log("Fixing bluesky-web package.json...");\n\
-    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf8"));\n\
-    \n\
-    if (packageJson.exports && packageJson.exports["./style.css"] && !packageJson.exports["./dist/bluesky-web.css"]) {\n\
-        packageJson.exports["./dist/bluesky-web.css"] = "./dist/bluesky-web.css";\n\
-        fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));\n\
-        console.log("Successfully added missing export to bluesky-web package.json");\n\
-    } else {\n\
-        console.log("Package already has the required exports or structure is different than expected");\n\
-    }\n\
-} else {\n\
-    console.log("bluesky-web package.json not found at", packageJsonPath);\n\
-}\n' > fix-bluesky.cjs && chmod +x fix-bluesky.cjs
-
-# Run the fix script
-RUN node fix-bluesky.cjs
-
+# Expose port
 EXPOSE 5174
+
+# Start the development server
 CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0", "--port", "5174"]
diff --git a/src/Header.tsx b/src/Header.tsx
index f5bac1f..bd4e6eb 100644
--- a/src/Header.tsx
+++ b/src/Header.tsx
@@ -36,7 +36,7 @@ export const Header = ({ logoUrl, title, fileName, onSelect }: HeaderProps) => {
           <div className="header-file-name">{fileName}</div>
         </div>
         <div>
-          <Tiled isButtonMode={true} onSelectCallback={handleTiledWidgetSelect} singleColumnMode={true} tiledBaseUrl={getTiledBaseUrl()}/>
+          <Tiled isButtonMode={true} onSelectCallback={handleTiledWidgetSelect} tiledBaseUrl={getTiledBaseUrl()}/>
         </div>
       </div>
     </header>
diff --git a/src/ItkViewer.tsx b/src/ItkViewer.tsx
new file mode 100644
index 0000000..b8c4208
--- /dev/null
+++ b/src/ItkViewer.tsx
@@ -0,0 +1,39 @@
+const jsDelivrUrl = 'https://cdn.jsdelivr.net/gh/als-computing/itk-vtk-viewer@publish-dist/dist/itkVtkViewer.js';
+
+import React, { useEffect, useState, useRef } from 'react';
+
+type ItkViewerProps = {
+    dataUrl?: string;
+};
+
+export default function ItkViewer({ dataUrl }: ItkViewerProps) {
+  
+
+
+
+  if (!dataUrl) {
+    return <div style={{textAlign: 'center', marginTop: '3rem'}}>Please select a data set to start the viewer</div>;
+  } else {
+      return (
+        <>
+        <div 
+          className="itk-vtk-viewer"
+          data-url="${dataUrl}"
+          data-rotate="false"
+          data-viewport="100vwx100vh"
+          style="width: 100vw; height: 100vh;"
+        ></div>
+        <script>
+          // Wait 3 seconds for service worker to set up before loading ITK viewer
+          setTimeout(function() {
+            var script = document.createElement('script');
+            script.src = '${jsDelivrUrl}';
+            document.body.appendChild(script);
+          }, 3000);
+        </script>
+        
+        </>
+
+      );
+  }
+}
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index 92b0798..1f64b26 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -7,7 +7,7 @@ export default defineConfig({
   server: {
     host: '0.0.0.0',
     port: 5174,
-    allowedHosts: ['react', 'localhost'],
+    allowedHosts: ['react', 'localhost', 'tiled-test'],
     proxy: {
       '/viewer': {
         target: 'http://viewer:8082',

From 2d1ac8edd313f8ed233f11e8013791c536edc10c Mon Sep 17 00:00:00 2001
From: seijdeleon <seijdeleon@lbl.gov>
Date: Tue, 9 Jun 2026 12:19:09 -0700
Subject: [PATCH 07/15] initial working prototype of auth interceptor for tiled
 within the itk iframe

---
 public/serviceWorker.js          |  44 +++++++++++
 public/tiled-auth-interceptor.js | 125 +++++++++++++++++++++++++++++++
 src/App.jsx                      |   6 +-
 src/ItkVtkViewer.tsx             |  12 +++
 src/tiledTokenBridge.ts          |  98 ++++++++++++++++++++++++
 src/utils.ts                     |  42 +++++++++++
 6 files changed, 326 insertions(+), 1 deletion(-)
 create mode 100644 public/serviceWorker.js
 create mode 100644 public/tiled-auth-interceptor.js
 create mode 100644 src/tiledTokenBridge.ts

diff --git a/public/serviceWorker.js b/public/serviceWorker.js
new file mode 100644
index 0000000..7a3a76a
--- /dev/null
+++ b/public/serviceWorker.js
@@ -0,0 +1,44 @@
+// Service Worker to intercept and log all network requests
+// Note: Service workers intercept at the network level, not at the XMLHttpRequest/fetch API level
+
+self.addEventListener('fetch', (event) => {
+  const url = new URL(event.request.url);
+  const request = event.request;
+  
+  // Log detailed information about each network request
+  console.log('🌐 Service Worker network request:', {
+    url: url.toString(),
+    method: request.method,
+    headers: Object.fromEntries(request.headers.entries()),
+    referrer: request.referrer,
+    mode: request.mode,
+    credentials: request.credentials,
+    destination: request.destination,
+    type: request.type || 'unknown'
+  });
+  
+  // Check if the URL contains 'zarr'
+  if (url.toString().includes('zarr')) {
+    console.log('🎯 FOUND ZARR NETWORK REQUEST:', {
+      url: url.toString(),
+      method: request.method,
+      referrer: request.referrer,
+      userAgent: request.headers.get('User-Agent'),
+      origin: request.headers.get('Origin'),
+      authorization: request.headers.get('Authorization') ? 'Present' : 'Missing',
+      allHeaders: Object.fromEntries(request.headers.entries())
+    });
+  }
+  
+  // Check for any tiled-related requests
+  if (url.toString().includes('tiled') || url.hostname.includes('tiled')) {
+    console.log('🔧 TILED-RELATED REQUEST:', {
+      url: url.toString(),
+      method: request.method,
+      authorization: request.headers.get('Authorization') ? 'Present' : 'Missing'
+    });
+  }
+  
+  // Let the request proceed normally for now
+  return;
+});
\ No newline at end of file
diff --git a/public/tiled-auth-interceptor.js b/public/tiled-auth-interceptor.js
new file mode 100644
index 0000000..fbefb6c
--- /dev/null
+++ b/public/tiled-auth-interceptor.js
@@ -0,0 +1,125 @@
+// Tiled Authentication Interceptor
+//
+// Injected into the (same-origin) viewer iframe before the itk-vtk-viewer CDN bundle. It
+// overrides fetch and XMLHttpRequest so that requests bound for the Tiled server carry an
+// `Authorization: Bearer <token>` header. The token comes from the parent window over
+// postMessage (see src/tiledTokenBridge.ts), which refreshes it when needed.
+//
+// The token is cached locally and only re-requested when missing or near expiry, so loading a
+// volume (many zarr chunk requests) does not flood the parent with messages.
+
+(function () {
+  'use strict';
+
+  // Origin of the Tiled server, injected by ItkVtkViewer.tsx. Only requests to this origin get
+  // the Authorization header, so the token is never leaked to the CDN or wasm asset hosts.
+  const tiledOrigin = window.__TILED_ORIGIN__ || '';
+
+  let cachedToken = null;
+
+  const needsAuth = (url) => {
+    if (!url) return false;
+    try {
+      const resolved = new URL(url, window.location.href);
+      if (tiledOrigin) {
+        return resolved.origin === tiledOrigin;
+      }
+      // Fallback when no origin was injected: match zarr requests by path.
+      return resolved.href.includes('zarr');
+    } catch (e) {
+      return false;
+    }
+  };
+
+  // Decode a JWT's `exp` claim and report whether it expires within `skewSeconds`.
+  const isTokenExpired = (token, skewSeconds = 30) => {
+    if (!token) return true;
+    const segments = token.split('.');
+    if (segments.length < 2) return true;
+    try {
+      const base64 = segments[1].replace(/-/g, '+').replace(/_/g, '/');
+      const payload = JSON.parse(atob(base64));
+      if (typeof payload.exp !== 'number') return true;
+      return Date.now() >= payload.exp * 1000 - skewSeconds * 1000;
+    } catch (e) {
+      return true;
+    }
+  };
+
+  // Ask the parent window for a fresh token.
+  const requestTokenFromParent = () =>
+    new Promise((resolve) => {
+      const requestId = Date.now() + Math.random();
+
+      const handleMessage = (event) => {
+        if (
+          event.data &&
+          event.data.type === 'TILED_TOKEN_RESPONSE' &&
+          event.data.requestId === requestId
+        ) {
+          window.removeEventListener('message', handleMessage);
+          resolve(event.data.token);
+        }
+      };
+
+      window.addEventListener('message', handleMessage);
+      window.parent.postMessage({ type: 'REQUEST_TILED_TOKEN', requestId }, window.location.origin);
+
+      // Give the parent time to refresh the token over the network before giving up.
+      setTimeout(() => {
+        window.removeEventListener('message', handleMessage);
+        console.warn('Tiled token request timed out, proceeding without auth');
+        resolve(null);
+      }, 10000);
+    });
+
+  // Return a usable token, reusing the cached one until it is missing or near expiry.
+  const getToken = async () => {
+    if (cachedToken && !isTokenExpired(cachedToken)) {
+      return cachedToken;
+    }
+    cachedToken = await requestTokenFromParent();
+    return cachedToken;
+  };
+
+  // --- fetch override ---
+  const originalFetch = window.fetch;
+  window.fetch = function (input, init = {}) {
+    const url = typeof input === 'string' ? input : input && input.url;
+
+    if (!needsAuth(url)) {
+      return originalFetch(input, init);
+    }
+
+    return getToken().then((token) => {
+      const headers = new Headers(init.headers || (typeof input !== 'string' && input.headers) || {});
+      if (token) {
+        headers.set('Authorization', `Bearer ${token}`);
+      }
+      return originalFetch(input, { ...init, headers });
+    });
+  };
+
+  // --- XMLHttpRequest override ---
+  const originalOpen = XMLHttpRequest.prototype.open;
+  const originalSend = XMLHttpRequest.prototype.send;
+
+  XMLHttpRequest.prototype.open = function (method, url, ...args) {
+    this._tiledUrl = url;
+    return originalOpen.call(this, method, url, ...args);
+  };
+
+  XMLHttpRequest.prototype.send = function (data) {
+    if (!needsAuth(this._tiledUrl)) {
+      return originalSend.call(this, data);
+    }
+    getToken()
+      .then((token) => {
+        if (token) {
+          this.setRequestHeader('Authorization', `Bearer ${token}`);
+        }
+        originalSend.call(this, data);
+      })
+      .catch(() => originalSend.call(this, data));
+  };
+})();
diff --git a/src/App.jsx b/src/App.jsx
index 7a1b2ec..60ff7ce 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -10,13 +10,14 @@
  * @return {JSX.Element} A full-page layout with a header and auto-resizing iframe.
  */
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Header } from './Header';
 import ItkVtkViewer from './ItkVtkViewer';
 import './App.css';
 
 
 import { getDefaultZarrFileUrl } from './utils';
+import { installTiledTokenBridge } from './tiledTokenBridge';
 
 const defaultZarrFileUrl = getDefaultZarrFileUrl() || '';
 
@@ -24,6 +25,9 @@ function App() {
   const [fileUrl, setFileUrl] = useState(defaultZarrFileUrl);
   const fileName = fileUrl.split('/').pop() || '';
 
+  // Answer token requests from the viewer iframe so its zarr requests can be authenticated.
+  useEffect(() => installTiledTokenBridge(), []);
+
   return (
     <div id="app" style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
       <Header
diff --git a/src/ItkVtkViewer.tsx b/src/ItkVtkViewer.tsx
index 919cb91..0ab36f7 100644
--- a/src/ItkVtkViewer.tsx
+++ b/src/ItkVtkViewer.tsx
@@ -18,6 +18,16 @@ export default function ItkVtkViewer({ dataUrl }: ItkVtkViewerProps) {
     
     if (!iframeDoc) return;
 
+    // The iframe is same-origin (no src), so the injected interceptor can postMessage the parent
+    // for a Tiled token. Only attach the Bearer token to requests bound for the data's origin.
+    const tiledOrigin = (() => {
+      try {
+        return new URL(dataUrl).origin;
+      } catch {
+        return '';
+      }
+    })();
+
     // Create iframe content
     iframeDoc.open();
     iframeDoc.write(`
@@ -43,6 +53,8 @@ export default function ItkVtkViewer({ dataUrl }: ItkVtkViewerProps) {
           data-viewport="100vwx100vh"
           style="width: 100vw; height: 100vh;"
         ></div>
+        <script>window.__TILED_ORIGIN__ = ${JSON.stringify(tiledOrigin)};</script>
+        <script src="/tiled-auth-interceptor.js"></script>
         <script src="${jsDelivrUrl}"></script>
       </body>
       </html>
diff --git a/src/tiledTokenBridge.ts b/src/tiledTokenBridge.ts
new file mode 100644
index 0000000..f1cac23
--- /dev/null
+++ b/src/tiledTokenBridge.ts
@@ -0,0 +1,98 @@
+/**
+ * tiledTokenBridge.ts
+ *
+ * The ITK viewer runs inside a same-origin iframe (built via document.write) that loads a
+ * remote CDN bundle. That bundle fires its own zarr fetch/XHR requests to the Tiled server,
+ * which requires authentication, but it has no access to our tokens. The interceptor injected
+ * into the iframe (public/tiled-auth-interceptor.js) asks the parent for a token over
+ * postMessage; this module is the parent-side responder.
+ *
+ * It reads the access/refresh tokens that @blueskyproject/tiled stores in localStorage, refreshes
+ * the access token when it is expired (or close to it), and replies with a valid token. The
+ * refresh call mirrors what the tiled library does internally on a 401:
+ * `POST {tiledBaseUrl}/auth/refresh` with `{ refresh_token }`.
+ */
+
+import { getTiledBaseUrl, isTokenExpired } from './utils';
+
+// localStorage keys used by @blueskyproject/tiled.
+const ACCESS_TOKEN_KEY = 'tiledAccessToken';
+const REFRESH_TOKEN_KEY = 'tiledRefreshToken';
+
+const REQUEST_TYPE = 'REQUEST_TILED_TOKEN';
+const RESPONSE_TYPE = 'TILED_TOKEN_RESPONSE';
+
+/**
+ * Refreshes the Tiled access token using the stored refresh token and persists the new token(s)
+ * back to localStorage so the rest of the app stays consistent.
+ *
+ * @returns The new access token, or null if no refresh token exists or the refresh fails.
+ */
+const refreshAccessToken = async (): Promise<string | null> => {
+    const refreshToken = localStorage.getItem(REFRESH_TOKEN_KEY);
+    if (!refreshToken) {
+        return null;
+    }
+    try {
+        const response = await fetch(`${getTiledBaseUrl()}/auth/refresh`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ refresh_token: refreshToken }),
+        });
+        if (!response.ok) {
+            console.warn('tiledTokenBridge: token refresh failed with status', response.status);
+            return null;
+        }
+        const data = await response.json();
+        if (data.access_token) {
+            localStorage.setItem(ACCESS_TOKEN_KEY, data.access_token);
+        }
+        if (data.refresh_token) {
+            localStorage.setItem(REFRESH_TOKEN_KEY, data.refresh_token);
+        }
+        return data.access_token ?? null;
+    } catch (error) {
+        console.warn('tiledTokenBridge: token refresh request errored:', error);
+        return null;
+    }
+};
+
+/**
+ * Returns a valid (non-expired) Tiled access token, refreshing it first if necessary.
+ */
+const getValidAccessToken = async (): Promise<string | null> => {
+    const accessToken = localStorage.getItem(ACCESS_TOKEN_KEY);
+    if (!isTokenExpired(accessToken)) {
+        return accessToken;
+    }
+    return refreshAccessToken();
+};
+
+/**
+ * Installs a message listener that answers token requests from the viewer iframe.
+ *
+ * Only same-origin messages of type `REQUEST_TILED_TOKEN` are handled; the reply is targeted
+ * back at the requesting window and origin.
+ *
+ * @returns A cleanup function that removes the listener.
+ */
+export const installTiledTokenBridge = (): (() => void) => {
+    const handleMessage = async (event: MessageEvent) => {
+        // The iframe is same-origin; ignore anything from another origin.
+        if (event.origin !== window.location.origin) {
+            return;
+        }
+        if (!event.data || event.data.type !== REQUEST_TYPE) {
+            return;
+        }
+
+        const { requestId } = event.data;
+        const token = await getValidAccessToken();
+
+        const source = event.source as WindowProxy | null;
+        source?.postMessage({ type: RESPONSE_TYPE, requestId, token }, event.origin);
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+};
diff --git a/src/utils.ts b/src/utils.ts
index 5221d96..f129eb2 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -232,3 +232,45 @@ export const getDefaultZarrFileUrl = (): string | null => {
         return zarr_file_url;
     }
 }
+
+/**
+ * Determines whether a JWT access token is expired (or close to expiring).
+ *
+ * Decodes the token's payload (the middle, base64url-encoded segment) and compares
+ * its `exp` claim against the current time. A skew is applied so tokens that are
+ * about to expire are treated as already expired, leaving time to refresh before use.
+ *
+ * @param token - The JWT access token to inspect
+ * @param skewSeconds - Seconds before the real expiry to start treating the token as expired (default 30)
+ * @returns `true` if the token is missing, malformed, or expires within `skewSeconds`; otherwise `false`
+ *
+ * @example
+ * ```typescript
+ * if (isTokenExpired(accessToken)) {
+ *   // refresh before using
+ * }
+ * ```
+ */
+export const isTokenExpired = (token: string | null | undefined, skewSeconds = 30): boolean => {
+    if (!token) {
+        return true;
+    }
+    const segments = token.split('.');
+    if (segments.length < 2) {
+        // Not a JWT we can read; treat as expired so the caller refreshes.
+        return true;
+    }
+    try {
+        // Convert base64url -> base64 before decoding.
+        const base64 = segments[1].replace(/-/g, '+').replace(/_/g, '/');
+        const payload = JSON.parse(atob(base64));
+        if (typeof payload.exp !== 'number') {
+            return true;
+        }
+        const expiresAtMs = payload.exp * 1000;
+        return Date.now() >= expiresAtMs - skewSeconds * 1000;
+    } catch (error) {
+        console.warn('isTokenExpired: failed to decode token, treating as expired:', error);
+        return true;
+    }
+};

From ec310d6cb462951a21aa0557b77c037d87593aed Mon Sep 17 00:00:00 2001
From: seijdeleon <seijdeleon@lbl.gov>
Date: Fri, 12 Jun 2026 15:37:02 -0700
Subject: [PATCH 08/15] working itk app with tiled token interceptor

---
 public/tiled-auth-interceptor.js              |  47 ++----
 src/App.jsx                                   |   6 +-
 src/Header.tsx                                |   5 +-
 .../ItkVtkFrame.tsx}                          |   4 +-
 src/ItkVtkNative/ItkVtkNative.tsx             |  68 ++++++++
 src/ItkVtkNative/tiledAuth.ts                 | 157 ++++++++++++++++++
 src/tiledTokenBridge.ts                       |  48 ++----
 7 files changed, 271 insertions(+), 64 deletions(-)
 rename src/{ItkVtkViewer.tsx => ItkVtkFrame/ItkVtkFrame.tsx} (93%)
 create mode 100644 src/ItkVtkNative/ItkVtkNative.tsx
 create mode 100644 src/ItkVtkNative/tiledAuth.ts

diff --git a/public/tiled-auth-interceptor.js b/public/tiled-auth-interceptor.js
index fbefb6c..0f603af 100644
--- a/public/tiled-auth-interceptor.js
+++ b/public/tiled-auth-interceptor.js
@@ -2,11 +2,13 @@
 //
 // Injected into the (same-origin) viewer iframe before the itk-vtk-viewer CDN bundle. It
 // overrides fetch and XMLHttpRequest so that requests bound for the Tiled server carry an
-// `Authorization: Bearer <token>` header. The token comes from the parent window over
-// postMessage (see src/tiledTokenBridge.ts), which refreshes it when needed.
+// `Authorization: Bearer <token>` header. Because a document.write iframe is same-origin with
+// the parent, the token is fetched by calling the parent directly via
+// `window.parent.getValidTiledToken()` (exposed by src/tiledTokenBridge.ts), which refreshes it
+// when needed. No postMessage is used (it can't bridge the iframe's "null" about:blank origin).
 //
 // The token is cached locally and only re-requested when missing or near expiry, so loading a
-// volume (many zarr chunk requests) does not flood the parent with messages.
+// volume (many zarr chunk requests) does not refetch on every chunk.
 
 (function () {
   'use strict';
@@ -46,32 +48,19 @@
     }
   };
 
-  // Ask the parent window for a fresh token.
-  const requestTokenFromParent = () =>
-    new Promise((resolve) => {
-      const requestId = Date.now() + Math.random();
-
-      const handleMessage = (event) => {
-        if (
-          event.data &&
-          event.data.type === 'TILED_TOKEN_RESPONSE' &&
-          event.data.requestId === requestId
-        ) {
-          window.removeEventListener('message', handleMessage);
-          resolve(event.data.token);
-        }
-      };
-
-      window.addEventListener('message', handleMessage);
-      window.parent.postMessage({ type: 'REQUEST_TILED_TOKEN', requestId }, window.location.origin);
-
-      // Give the parent time to refresh the token over the network before giving up.
-      setTimeout(() => {
-        window.removeEventListener('message', handleMessage);
-        console.warn('Tiled token request timed out, proceeding without auth');
-        resolve(null);
-      }, 10000);
-    });
+  // Ask the parent window for a fresh token. The iframe is same-origin, so we can call the
+  // parent's exposed getter directly; fall back to reading its localStorage if it isn't present.
+  const requestTokenFromParent = async () => {
+    try {
+      if (typeof window.parent.getValidTiledToken === 'function') {
+        return await window.parent.getValidTiledToken();
+      }
+      return window.parent.localStorage.getItem('tiledAccessToken');
+    } catch (e) {
+      console.warn('Tiled interceptor: could not reach parent for token:', e);
+      return null;
+    }
+  };
 
   // Return a usable token, reusing the cached one until it is missing or near expiry.
   const getToken = async () => {
diff --git a/src/App.jsx b/src/App.jsx
index 60ff7ce..81c4d0b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -12,12 +12,13 @@
 
 import React, { useEffect, useState } from 'react';
 import { Header } from './Header';
-import ItkVtkViewer from './ItkVtkViewer';
 import './App.css';
 
 
 import { getDefaultZarrFileUrl } from './utils';
 import { installTiledTokenBridge } from './tiledTokenBridge';
+import ItkVktNative from './ItkVtkNative/ItkVtkNative';
+// import ItkVtkFrame from './ItkVtkFrame/ItkVtkFrame';
 
 const defaultZarrFileUrl = getDefaultZarrFileUrl() || '';
 
@@ -36,7 +37,8 @@ function App() {
         fileName={fileName}
         onSelect={setFileUrl}
       />
-      <ItkVtkViewer dataUrl={fileUrl} />
+      <ItkVktNative dataUrl={fileUrl} />
+      {/* <ItkVtkFrame dataUrl={fileUrl} /> */}
     </div>
   );
 }
diff --git a/src/Header.tsx b/src/Header.tsx
index bd4e6eb..c6cb3f5 100644
--- a/src/Header.tsx
+++ b/src/Header.tsx
@@ -36,7 +36,10 @@ export const Header = ({ logoUrl, title, fileName, onSelect }: HeaderProps) => {
           <div className="header-file-name">{fileName}</div>
         </div>
         <div>
-          <Tiled isButtonMode={true} onSelectCallback={handleTiledWidgetSelect} tiledBaseUrl={getTiledBaseUrl()}/>
+                    <Tiled isButtonMode={true} onSelectCallback={handleTiledWidgetSelect} tiledBaseUrl={getTiledBaseUrl()} initialPath='beamlines/bl832/processed/example_samples' singleColumnMode={true} includeAuthTokensInSelectCallback={true}/>
+          {/* <Tiled isButtonMode={true} onSelectCallback={handleTiledWidgetSelect} tiledBaseUrl={getTiledBaseUrl()} initialPath='beamlines/bl832/processed/BLS-00761_clark' includeAuthTokensInSelectCallback={true} singleColumnMode={true}/> */}
+          {/* <Tiled isButtonMode={true} onSelectCallback={handleTiledWidgetSelect} tiledBaseUrl={getTiledBaseUrl()} includeAuthTokensInSelectCallback={true} singleColumnMode={true}/> */}
+
         </div>
       </div>
     </header>
diff --git a/src/ItkVtkViewer.tsx b/src/ItkVtkFrame/ItkVtkFrame.tsx
similarity index 93%
rename from src/ItkVtkViewer.tsx
rename to src/ItkVtkFrame/ItkVtkFrame.tsx
index 0ab36f7..5257d26 100644
--- a/src/ItkVtkViewer.tsx
+++ b/src/ItkVtkFrame/ItkVtkFrame.tsx
@@ -6,7 +6,7 @@ type ItkVtkViewerProps = {
     dataUrl?: string;
 };
 
-export default function ItkVtkViewer({ dataUrl }: ItkVtkViewerProps) {
+export default function ItkVtkFrame({ dataUrl }: ItkVtkViewerProps) {
   const [size, setSize] = useState({ width: 400, height: 401 });
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
 
@@ -54,7 +54,7 @@ export default function ItkVtkViewer({ dataUrl }: ItkVtkViewerProps) {
           style="width: 100vw; height: 100vh;"
         ></div>
         <script>window.__TILED_ORIGIN__ = ${JSON.stringify(tiledOrigin)};</script>
-        <script src="/tiled-auth-interceptor.js"></script>
+        <script src="${window.location.origin}${import.meta.env.BASE_URL}tiled-auth-interceptor.js"></script>
         <script src="${jsDelivrUrl}"></script>
       </body>
       </html>
diff --git a/src/ItkVtkNative/ItkVtkNative.tsx b/src/ItkVtkNative/ItkVtkNative.tsx
new file mode 100644
index 0000000..682e783
--- /dev/null
+++ b/src/ItkVtkNative/ItkVtkNative.tsx
@@ -0,0 +1,68 @@
+/**
+ * ItkVkt.tsx
+ *
+ * Inline (non-iframe) variant of the ITK/VTK viewer. Instead of writing the viewer into an iframe
+ * document, it renders the `.itk-vtk-viewer` element directly in the main DOM and loads the
+ * itk-vtk-viewer CDN bundle, which scans for that element and renders the volume from its
+ * `data-url`.
+ *
+ * Auth: since everything runs in the main window, fetch/XHR are patched in-place (see ./tiledAuth)
+ * to attach the Tiled Bearer token — no iframe, no postMessage.
+ */
+
+import { useEffect, useRef } from 'react';
+import { installTiledFetchInterceptor } from './tiledAuth';
+
+const jsDelivrUrl = 'https://cdn.jsdelivr.net/gh/als-computing/itk-vtk-viewer@publish-dist/dist/itkVtkViewer.js';
+
+type ItkVktProps = {
+  dataUrl?: string;
+};
+
+export default function ItkVktNative({ dataUrl }: ItkVktProps) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!containerRef.current || !dataUrl) return;
+
+    const container = containerRef.current;
+
+    // Patch fetch/XHR so the viewer's zarr requests to the data origin are authenticated.
+    const removeInterceptor = installTiledFetchInterceptor(dataUrl);
+
+    // Build the element the itk-vtk-viewer bundle looks for.
+    const viewer = document.createElement('div');
+    viewer.className = 'itk-vtk-viewer';
+    viewer.dataset.url = dataUrl;
+    viewer.dataset.rotate = 'false';
+    // Fill the parent container (the space left below the header), not the whole browser window.
+    // The bundle reads this and writes the values onto the element's style.width/height.
+    viewer.dataset.viewport = '100%x100%';
+    viewer.style.width = '100%';
+    viewer.style.height = '100%';
+    container.appendChild(viewer);
+
+    // Load the viewer bundle, which scans for .itk-vtk-viewer elements and renders them.
+    const script = document.createElement('script');
+    script.src = jsDelivrUrl;
+    document.body.appendChild(script);
+
+    return () => {
+      removeInterceptor();
+      script.remove();
+      container.innerHTML = '';
+    };
+  }, [dataUrl]);
+
+  if (!dataUrl) {
+    return <div style={{ textAlign: 'center', marginTop: '3rem' }}>Please select a data set to start the viewer</div>;
+  }
+
+  return (
+    <div
+      key={dataUrl}
+      ref={containerRef}
+      style={{ flex: 1, minHeight: 0, width: '100%', zIndex: 0 }}
+    />
+  );
+}
diff --git a/src/ItkVtkNative/tiledAuth.ts b/src/ItkVtkNative/tiledAuth.ts
new file mode 100644
index 0000000..5fe7ebe
--- /dev/null
+++ b/src/ItkVtkNative/tiledAuth.ts
@@ -0,0 +1,157 @@
+/**
+ * tiledAuth.ts
+ *
+ * Same-window auth for the inline (non-iframe) ITK viewer. Because the viewer bundle now runs in
+ * the main window, we patch `fetch`/XMLHttpRequest directly and read the Tiled tokens straight
+ * from localStorage — no iframe, no postMessage bridge.
+ *
+ * Requests bound for the Tiled data origin get an `Authorization: Bearer <token>` header. The
+ * access token is refreshed when expired via `POST {tiledBaseUrl}/auth/refresh` (the same call the
+ * tiled library makes internally on a 401).
+ */
+
+import { getTiledBaseUrl, isTokenExpired } from '../utils';
+
+// localStorage keys used by @blueskyproject/tiled.
+const ACCESS_TOKEN_KEY = 'tiledAccessToken';
+const REFRESH_TOKEN_KEY = 'tiledRefreshToken';
+
+// Captured at module load (before the interceptor patches window.fetch) so the refresh request
+// itself is never intercepted — otherwise it would recurse into getValidAccessToken and hang.
+const nativeFetch = window.fetch.bind(window);
+
+// Reused across the burst of zarr chunk requests so we don't fire concurrent refreshes.
+let inFlightRefresh: Promise<string | null> | null = null;
+
+const refreshAccessToken = async (): Promise<string | null> => {
+  const refreshToken = localStorage.getItem(REFRESH_TOKEN_KEY);
+  if (!refreshToken) {
+    return null;
+  }
+  try {
+    const response = await nativeFetch(`${getTiledBaseUrl()}/auth/refresh`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ refresh_token: refreshToken }),
+    });
+    if (!response.ok) {
+      console.warn('tiledAuth: token refresh failed with status', response.status);
+      return null;
+    }
+    const data = await response.json();
+    if (data.access_token) {
+      localStorage.setItem(ACCESS_TOKEN_KEY, data.access_token);
+    }
+    if (data.refresh_token) {
+      localStorage.setItem(REFRESH_TOKEN_KEY, data.refresh_token);
+    }
+    return data.access_token ?? null;
+  } catch (error) {
+    console.warn('tiledAuth: token refresh request errored:', error);
+    return null;
+  }
+};
+
+/** Returns a valid (non-expired) access token, refreshing it first if necessary. */
+const getValidAccessToken = async (): Promise<string | null> => {
+  const accessToken = localStorage.getItem(ACCESS_TOKEN_KEY);
+  if (!isTokenExpired(accessToken)) {
+    return accessToken;
+  }
+  // Collapse concurrent refreshes (many chunk requests) into one network call.
+  if (!inFlightRefresh) {
+    inFlightRefresh = refreshAccessToken().finally(() => {
+      inFlightRefresh = null;
+    });
+  }
+  return inFlightRefresh;
+};
+
+/**
+ * Patches `fetch` and `XMLHttpRequest` so requests to the data's origin carry a Tiled Bearer token.
+ *
+ * @param dataUrl - The zarr data URL; its origin is the only origin that receives the token, so
+ *                  the token is never leaked to the CDN or wasm asset hosts.
+ * @returns A cleanup function that restores the original `fetch`/`XMLHttpRequest` methods.
+ */
+export const installTiledFetchInterceptor = (dataUrl: string): (() => void) => {
+  let tiledOrigin = '';
+  try {
+    tiledOrigin = new URL(dataUrl).origin;
+  } catch {
+    tiledOrigin = '';
+  }
+
+  const needsAuth = (url?: string | null): boolean => {
+    if (!url) return false;
+    try {
+      const resolved = new URL(url, window.location.href);
+      return tiledOrigin ? resolved.origin === tiledOrigin : resolved.href.includes('zarr');
+    } catch {
+      return false;
+    }
+  };
+
+  // --- fetch ---
+  const originalFetch = window.fetch;
+  window.fetch = function (input: RequestInfo | URL, init: RequestInit = {}) {
+    const url = typeof input === 'string' ? input : input instanceof URL ? input.href : input.url;
+    if (!needsAuth(url)) {
+      return originalFetch(input, init);
+    }
+    const headers = new Headers(init.headers || (input instanceof Request ? input.headers : undefined) || {});
+    // If the caller already set an Authorization header, leave the request alone.
+    if (headers.has('Authorization')) {
+      return originalFetch(input, init);
+    }
+    return getValidAccessToken().then((token) => {
+      if (token) {
+        headers.set('Authorization', `Bearer ${token}`);
+      }
+      return originalFetch(input, { ...init, headers });
+    });
+  };
+
+  // --- XMLHttpRequest ---
+  type TiledXHR = XMLHttpRequest & { _tiledUrl?: string; _tiledHasAuth?: boolean };
+  const originalOpen = XMLHttpRequest.prototype.open;
+  const originalSend = XMLHttpRequest.prototype.send;
+  const originalSetRequestHeader = XMLHttpRequest.prototype.setRequestHeader;
+
+  XMLHttpRequest.prototype.open = function (this: TiledXHR, method: string, url: string, ...args: any[]) {
+    this._tiledUrl = url;
+    this._tiledHasAuth = false;
+    // @ts-expect-error - forwarding the original variadic signature
+    return originalOpen.call(this, method, url, ...args);
+  };
+
+  // Track whether the caller set its own Authorization header (setRequestHeader appends, so
+  // adding ours on top would corrupt an already-valid token).
+  XMLHttpRequest.prototype.setRequestHeader = function (this: TiledXHR, name: string, value: string) {
+    if (typeof name === 'string' && name.toLowerCase() === 'authorization') {
+      this._tiledHasAuth = true;
+    }
+    return originalSetRequestHeader.call(this, name, value);
+  };
+
+  XMLHttpRequest.prototype.send = function (this: TiledXHR, body?: Document | XMLHttpRequestBodyInit | null) {
+    if (!needsAuth(this._tiledUrl) || this._tiledHasAuth) {
+      return originalSend.call(this, body ?? null);
+    }
+    getValidAccessToken()
+      .then((token) => {
+        if (token) {
+          this.setRequestHeader('Authorization', `Bearer ${token}`);
+        }
+        originalSend.call(this, body ?? null);
+      })
+      .catch(() => originalSend.call(this, body ?? null));
+  };
+
+  return () => {
+    window.fetch = originalFetch;
+    XMLHttpRequest.prototype.open = originalOpen;
+    XMLHttpRequest.prototype.send = originalSend;
+    XMLHttpRequest.prototype.setRequestHeader = originalSetRequestHeader;
+  };
+};
diff --git a/src/tiledTokenBridge.ts b/src/tiledTokenBridge.ts
index f1cac23..6324731 100644
--- a/src/tiledTokenBridge.ts
+++ b/src/tiledTokenBridge.ts
@@ -4,12 +4,13 @@
  * The ITK viewer runs inside a same-origin iframe (built via document.write) that loads a
  * remote CDN bundle. That bundle fires its own zarr fetch/XHR requests to the Tiled server,
  * which requires authentication, but it has no access to our tokens. The interceptor injected
- * into the iframe (public/tiled-auth-interceptor.js) asks the parent for a token over
- * postMessage; this module is the parent-side responder.
+ * into the iframe (public/tiled-auth-interceptor.js) needs a valid token to attach.
  *
- * It reads the access/refresh tokens that @blueskyproject/tiled stores in localStorage, refreshes
- * the access token when it is expired (or close to it), and replies with a valid token. The
- * refresh call mirrors what the tiled library does internally on a 401:
+ * Because a document.write iframe is same-origin with the parent, the interceptor can call the
+ * parent directly rather than using postMessage. This module exposes `window.getValidTiledToken`
+ * for it: a function that reads the access/refresh tokens @blueskyproject/tiled stores in
+ * localStorage, refreshes the access token when it is expired (or close to it), and returns a
+ * valid token. The refresh call mirrors what the tiled library does internally on a 401:
  * `POST {tiledBaseUrl}/auth/refresh` with `{ refresh_token }`.
  */
 
@@ -19,9 +20,6 @@ import { getTiledBaseUrl, isTokenExpired } from './utils';
 const ACCESS_TOKEN_KEY = 'tiledAccessToken';
 const REFRESH_TOKEN_KEY = 'tiledRefreshToken';
 
-const REQUEST_TYPE = 'REQUEST_TILED_TOKEN';
-const RESPONSE_TYPE = 'TILED_TOKEN_RESPONSE';
-
 /**
  * Refreshes the Tiled access token using the stored refresh token and persists the new token(s)
  * back to localStorage so the rest of the app stays consistent.
@@ -68,31 +66,21 @@ const getValidAccessToken = async (): Promise<string | null> => {
     return refreshAccessToken();
 };
 
+declare global {
+    interface Window {
+        getValidTiledToken?: () => Promise<string | null>;
+    }
+}
+
 /**
- * Installs a message listener that answers token requests from the viewer iframe.
+ * Exposes `window.getValidTiledToken` so the same-origin viewer iframe can fetch a valid
+ * (refreshed-if-needed) Tiled access token by calling the parent directly.
  *
- * Only same-origin messages of type `REQUEST_TILED_TOKEN` are handled; the reply is targeted
- * back at the requesting window and origin.
- *
- * @returns A cleanup function that removes the listener.
+ * @returns A cleanup function that removes the exposed getter.
  */
 export const installTiledTokenBridge = (): (() => void) => {
-    const handleMessage = async (event: MessageEvent) => {
-        // The iframe is same-origin; ignore anything from another origin.
-        if (event.origin !== window.location.origin) {
-            return;
-        }
-        if (!event.data || event.data.type !== REQUEST_TYPE) {
-            return;
-        }
-
-        const { requestId } = event.data;
-        const token = await getValidAccessToken();
-
-        const source = event.source as WindowProxy | null;
-        source?.postMessage({ type: RESPONSE_TYPE, requestId, token }, event.origin);
+    window.getValidTiledToken = getValidAccessToken;
+    return () => {
+        delete window.getValidTiledToken;
     };
-
-    window.addEventListener('message', handleMessage);
-    return () => window.removeEventListener('message', handleMessage);
 };

From 1f47634f5473489cc6005050a4d8331f1a3aa658 Mon Sep 17 00:00:00 2001
From: seijdeleon <seijdeleon@lbl.gov>
Date: Mon, 15 Jun 2026 09:04:03 -0700
Subject: [PATCH 09/15] install newest tiled with oidcRedirectUrl

---
 package-lock.json | 332 ++++++++++++++++++++++++++++++++--------------
 package.json      |   2 +-
 src/Header.tsx    |   2 +-
 3 files changed, 238 insertions(+), 98 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e2104a4..910b32b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "view_recon_app",
       "version": "0.0.0",
       "dependencies": {
-        "@blueskyproject/tiled": "^0.0.23",
+        "@blueskyproject/tiled": "^0.0.30",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "tailwindcss": "^4.0.14"
@@ -300,11 +300,12 @@
       }
     },
     "node_modules/@blueskyproject/tiled": {
-      "version": "0.0.23",
-      "resolved": "https://registry.npmjs.org/@blueskyproject/tiled/-/tiled-0.0.23.tgz",
-      "integrity": "sha512-tkDHBghMe+fCL4fQ2WL0k6fvunMVwUwQQbrP3TlvDickU6nF6LYEXAw3lmVWpIj/L0ytAlveKO6+Gd9hU5G/EA==",
+      "version": "0.0.30",
+      "resolved": "https://registry.npmjs.org/@blueskyproject/tiled/-/tiled-0.0.30.tgz",
+      "integrity": "sha512-WpmNbXNQN/XyKkNYhbISb925lVkDBUYjnayQl8Gj8x9UK71Q6jYsWwrjRF8PnmZk2pZAZgep9QNuFpEm+FyQIQ==",
+      "license": "BSD-3-Clause",
       "dependencies": {
-        "@phosphor-icons/react": "^2.1.7",
+        "@phosphor-icons/react": "^2.1.10",
         "@storybook/addons": "^7.6.17",
         "@storybook/theming": "^8.6.14",
         "@visx/curve": "^3.12.0",
@@ -333,6 +334,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz",
       "integrity": "sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==",
+      "license": "MIT",
       "peerDependencies": {
         "react": ">=16.8.0"
       }
@@ -956,6 +958,7 @@
       "version": "2.1.10",
       "resolved": "https://registry.npmjs.org/@phosphor-icons/react/-/react-2.1.10.tgz",
       "integrity": "sha512-vt8Tvq8GLjheAZZYa+YG/pW7HDbov8El/MANW8pOAz4eGxrwhnbfrQZq0Cp4q8zBEu8NIhHdnr+r8thnfRSNYA==",
+      "license": "MIT",
       "engines": {
         "node": ">=10"
       },
@@ -968,6 +971,7 @@
       "version": "9.7.5",
       "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.5.tgz",
       "integrity": "sha512-Tqrwz7pIlsSDITzxoLS3n/v/YCUHQdOIKtOJf4yL6kYVSDTSmVK1LI1Q3M/uu2Sx4X3pIWF3xLUhlsA6SPNTNg==",
+      "license": "MIT",
       "peer": true,
       "dependencies": {
         "@react-spring/shared": "~9.7.5",
@@ -981,6 +985,7 @@
       "version": "9.7.5",
       "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.7.5.tgz",
       "integrity": "sha512-rmEqcxRcu7dWh7MnCcMXLvrf6/SDlSokLaLTxiPlAYi11nN3B5oiCUAblO72o+9z/87j2uzxa2Inm8UbLjXA+w==",
+      "license": "MIT",
       "peer": true,
       "dependencies": {
         "@react-spring/animated": "~9.7.5",
@@ -999,12 +1004,14 @@
       "version": "9.7.5",
       "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.7.5.tgz",
       "integrity": "sha512-5ZenDQMC48wjUzPAm1EtwQ5Ot3bLIAwwqP2w2owG5KoNdNHpEJV263nGhCeKKmuA3vG2zLLOdu3or6kuDjA6Aw==",
+      "license": "MIT",
       "peer": true
     },
     "node_modules/@react-spring/shared": {
       "version": "9.7.5",
       "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.7.5.tgz",
       "integrity": "sha512-wdtoJrhUeeyD/PP/zo+np2s1Z820Ohr/BbuVYv+3dVLW7WctoiN7std8rISoYoHpUXtbkpesSKuPIw/6U1w1Pw==",
+      "license": "MIT",
       "peer": true,
       "dependencies": {
         "@react-spring/rafz": "~9.7.5",
@@ -1018,12 +1025,14 @@
       "version": "9.7.5",
       "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.7.5.tgz",
       "integrity": "sha512-HVj7LrZ4ReHWBimBvu2SKND3cDVUPWKLqRTmWe/fNY6o1owGOX0cAHbdPDTMelgBlVbrTKrre6lFkhqGZErK/g==",
+      "license": "MIT",
       "peer": true
     },
     "node_modules/@react-spring/web": {
       "version": "9.7.5",
       "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.7.5.tgz",
       "integrity": "sha512-lmvqGwpe+CSttsWNZVr+Dg62adtKhauGwLyGE/RRyZ8AAMLgb9x3NDMA5RMElXo+IMyTkPp7nxTB8ZQlmhb6JQ==",
+      "license": "MIT",
       "peer": true,
       "dependencies": {
         "@react-spring/animated": "~9.7.5",
@@ -1037,9 +1046,10 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.23.1",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.1.tgz",
-      "integrity": "sha512-vDbaOzF7yT2Qs4vO6XV1MHcJv+3dgR1sT+l3B8xxOVhUC336prMvqrvsLL/9Dnw2xr6Qhz4J0dmS0llNAbnUmQ==",
+      "version": "1.23.3",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.3.tgz",
+      "integrity": "sha512-4An71tdz9X8+3sI4Qqqd2LWd9vS39J7sqd9EU4Scw7TJE/qB10Flv/UuqbPVgfQV9XoK8Np6jNquZitnZq5i+Q==",
+      "license": "MIT",
       "engines": {
         "node": ">=14.0.0"
       }
@@ -1295,6 +1305,7 @@
       "version": "7.6.17",
       "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-7.6.17.tgz",
       "integrity": "sha512-Ok18Y698Ccyg++MoUNJNHY0cXUvo8ETFIRLJk1g9ElJ70j6kPgNnzW2pAtZkBNmswHtofZ7pT156cj96k/LgfA==",
+      "license": "MIT",
       "dependencies": {
         "@storybook/manager-api": "7.6.17",
         "@storybook/preview-api": "7.6.17",
@@ -1309,6 +1320,7 @@
       "version": "7.6.17",
       "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.6.17.tgz",
       "integrity": "sha512-GFG40pzaSxk1hUr/J/TMqW5AFDDPUSu+HkeE/oqSWJbOodBOLJzHN6CReJS6y1DjYSZLNFt1jftPWZZInG/XUA==",
+      "license": "MIT",
       "dependencies": {
         "@storybook/client-logger": "7.6.17",
         "@storybook/core-events": "7.6.17",
@@ -1326,6 +1338,7 @@
       "version": "7.6.17",
       "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.17.tgz",
       "integrity": "sha512-6WBYqixAXNAXlSaBWwgljWpAu10tPRBJrcFvx2gPUne58EeMM20Gi/iHYBz2kMCY+JLAgeIH7ZxInqwO8vDwiQ==",
+      "license": "MIT",
       "dependencies": {
         "@storybook/global": "^5.0.0"
       },
@@ -1335,12 +1348,13 @@
       }
     },
     "node_modules/@storybook/core": {
-      "version": "8.6.15",
-      "resolved": "https://registry.npmjs.org/@storybook/core/-/core-8.6.15.tgz",
-      "integrity": "sha512-VFpKcphNurJpSC4fpUfKL3GTXVoL53oytghGR30QIw5jKWwaT50HVbTyb41BLOUuZjmMhUQA8weiQEew6RX0gw==",
+      "version": "8.6.18",
+      "resolved": "https://registry.npmjs.org/@storybook/core/-/core-8.6.18.tgz",
+      "integrity": "sha512-dRBP2TnX6fGdS0T2mXBHjkS/3Nlu1ra1huovZVFuM67CYMzrhM/3hX/zru1vWSC5rqY93ZaAhjMciPW4pK5mMQ==",
+      "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@storybook/theming": "8.6.15",
+        "@storybook/theming": "8.6.18",
         "better-opn": "^3.0.2",
         "browser-assert": "^1.2.1",
         "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0",
@@ -1369,6 +1383,7 @@
       "version": "7.6.17",
       "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.6.17.tgz",
       "integrity": "sha512-AriWMCm/k1cxlv10f+jZ1wavThTRpLaN3kY019kHWbYT9XgaSuLU67G7GPr3cGnJ6HuA6uhbzu8qtqVCd6OfXA==",
+      "license": "MIT",
       "dependencies": {
         "ts-dedent": "^2.0.0"
       },
@@ -1378,9 +1393,10 @@
       }
     },
     "node_modules/@storybook/core/node_modules/semver": {
-      "version": "7.7.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
-      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.4.tgz",
+      "integrity": "sha512-rUCObTnP32Q08R2uuIrt7r9PlEonuTmtuXYcW6s5kjdlj3xbnwe+21yXptAUYcMAABLkYYTtnmzb3w3EDZfueA==",
+      "license": "ISC",
       "peer": true,
       "bin": {
         "semver": "bin/semver.js"
@@ -1393,6 +1409,7 @@
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.13.tgz",
       "integrity": "sha512-7xOOwCLGB3ebM87eemep89MYRFTko+D8qE7EdAAq74lgdqRR5cOUtYWJLjO2dLtP94nqoOdHJo6MdLLKzg412Q==",
+      "license": "MIT",
       "dependencies": {
         "type-fest": "^2.19.0"
       }
@@ -1400,12 +1417,14 @@
     "node_modules/@storybook/global": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/@storybook/global/-/global-5.0.0.tgz",
-      "integrity": "sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ=="
+      "integrity": "sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==",
+      "license": "MIT"
     },
     "node_modules/@storybook/manager-api": {
       "version": "7.6.17",
       "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.6.17.tgz",
       "integrity": "sha512-IJIV1Yc6yw1dhCY4tReHCfBnUKDqEBnMyHp3mbXpsaHxnxJZrXO45WjRAZIKlQKhl/Ge1CrnznmHRCmYgqmrWg==",
+      "license": "MIT",
       "dependencies": {
         "@storybook/channels": "7.6.17",
         "@storybook/client-logger": "7.6.17",
@@ -1431,6 +1450,7 @@
       "version": "7.6.17",
       "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.6.17.tgz",
       "integrity": "sha512-ZbaBt3KAbmBtfjNqgMY7wPMBshhSJlhodyMNQypv+95xLD/R+Az6aBYbpVAOygLaUQaQk4ar7H/Ww6lFIoiFbA==",
+      "license": "MIT",
       "dependencies": {
         "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
         "@storybook/client-logger": "7.6.17",
@@ -1450,6 +1470,7 @@
       "version": "7.6.17",
       "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.6.17.tgz",
       "integrity": "sha512-wLfDdI9RWo1f2zzFe54yRhg+2YWyxLZvqdZnSQ45mTs4/7xXV5Wfbv3QNTtcdw8tT3U5KRTrN1mTfTCiRJc0Kw==",
+      "license": "MIT",
       "dependencies": {
         "@storybook/channels": "7.6.17",
         "@storybook/client-logger": "7.6.17",
@@ -1475,6 +1496,7 @@
       "version": "7.6.17",
       "resolved": "https://registry.npmjs.org/@storybook/router/-/router-7.6.17.tgz",
       "integrity": "sha512-GnyC0j6Wi5hT4qRhSyT8NPtJfGmf82uZw97LQRWeyYu5gWEshUdM7aj40XlNiScd5cZDp0owO1idduVF2k2l2A==",
+      "license": "MIT",
       "dependencies": {
         "@storybook/client-logger": "7.6.17",
         "memoizerific": "^1.11.3",
@@ -1486,9 +1508,10 @@
       }
     },
     "node_modules/@storybook/theming": {
-      "version": "8.6.15",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-8.6.15.tgz",
-      "integrity": "sha512-dAbL0XOekyT6XsF49R6Etj3WxQ/LpdJDIswUUeHgVJ6/yd2opZOGbPxnwA3zlmAh1c0tvpPyhSDXxSG79u8e4Q==",
+      "version": "8.6.18",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-8.6.18.tgz",
+      "integrity": "sha512-n6OEjEtHupa2PdTwWzRepr7cO8NkDd4rgF6BKLitRbujOspLxzMBEqdphs+QLcuiCIgf33SqmEA64QWnbSMhPw==",
+      "license": "MIT",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
@@ -1501,6 +1524,7 @@
       "version": "7.6.17",
       "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.6.17.tgz",
       "integrity": "sha512-GRY0xEJQ0PrL7DY2qCNUdIfUOE0Gsue6N+GBJw9ku1IUDFLJRDOF+4Dx2BvYcVCPI5XPqdWKlEyZdMdKjiQN7Q==",
+      "license": "MIT",
       "dependencies": {
         "@storybook/channels": "7.6.17",
         "@types/babel__core": "^7.0.0",
@@ -1553,6 +1577,7 @@
       "version": "1.19.6",
       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.6.tgz",
       "integrity": "sha512-HLFeCYgz89uk22N5Qg3dvGvsv46B8GLvKKo1zKG4NybA8U2DiEO3w9lqGg29t/tfLRJpJ6iQxnVw4OnB7MoM9g==",
+      "license": "MIT",
       "dependencies": {
         "@types/connect": "*",
         "@types/node": "*"
@@ -1562,6 +1587,7 @@
       "version": "3.4.38",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz",
       "integrity": "sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==",
+      "license": "MIT",
       "dependencies": {
         "@types/node": "*"
       }
@@ -1569,27 +1595,32 @@
     "node_modules/@types/d3-array": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.0.3.tgz",
-      "integrity": "sha512-Reoy+pKnvsksN0lQUlcH6dOGjRZ/3WRwXR//m+/8lt1BXeI4xyaUZoqULNjyXXRuh0Mj4LNpkCvhUpQlY3X5xQ=="
+      "integrity": "sha512-Reoy+pKnvsksN0lQUlcH6dOGjRZ/3WRwXR//m+/8lt1BXeI4xyaUZoqULNjyXXRuh0Mj4LNpkCvhUpQlY3X5xQ==",
+      "license": "MIT"
     },
     "node_modules/@types/d3-color": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.0.tgz",
-      "integrity": "sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA=="
+      "integrity": "sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA==",
+      "license": "MIT"
     },
     "node_modules/@types/d3-delaunay": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.1.tgz",
-      "integrity": "sha512-tLxQ2sfT0p6sxdG75c6f/ekqxjyYR0+LwPrsO1mbC9YDBzPJhs2HbJJRrn8Ez1DBoHRo2yx7YEATI+8V1nGMnQ=="
+      "integrity": "sha512-tLxQ2sfT0p6sxdG75c6f/ekqxjyYR0+LwPrsO1mbC9YDBzPJhs2HbJJRrn8Ez1DBoHRo2yx7YEATI+8V1nGMnQ==",
+      "license": "MIT"
     },
     "node_modules/@types/d3-format": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.1.tgz",
-      "integrity": "sha512-5KY70ifCCzorkLuIkDe0Z9YTf9RR2CjBX1iaJG+rgM/cPP+sO+q9YdQ9WdhQcgPj1EQiJ2/0+yUkkziTG6Lubg=="
+      "integrity": "sha512-5KY70ifCCzorkLuIkDe0Z9YTf9RR2CjBX1iaJG+rgM/cPP+sO+q9YdQ9WdhQcgPj1EQiJ2/0+yUkkziTG6Lubg==",
+      "license": "MIT"
     },
     "node_modules/@types/d3-geo": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.1.0.tgz",
       "integrity": "sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==",
+      "license": "MIT",
       "dependencies": {
         "@types/geojson": "*"
       }
@@ -1598,6 +1629,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
       "integrity": "sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw==",
+      "license": "MIT",
       "dependencies": {
         "@types/d3-color": "*"
       }
@@ -1605,17 +1637,20 @@
     "node_modules/@types/d3-path": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.11.tgz",
-      "integrity": "sha512-4pQMp8ldf7UaB/gR8Fvvy69psNHkTpD/pVw3vmEi8iZAB9EPMBruB1JvHO4BIq9QkUUd2lV1F5YXpMNj7JPBpw=="
+      "integrity": "sha512-4pQMp8ldf7UaB/gR8Fvvy69psNHkTpD/pVw3vmEi8iZAB9EPMBruB1JvHO4BIq9QkUUd2lV1F5YXpMNj7JPBpw==",
+      "license": "MIT"
     },
     "node_modules/@types/d3-random": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-2.2.3.tgz",
-      "integrity": "sha512-Ghs4R3CcgJ3o6svszRzIH4b8PPYex/COo+rhhZjDAs+bVducXwjmVSi27WcDOaLLCBV2t3tfVH9bYXAL76IvQA=="
+      "integrity": "sha512-Ghs4R3CcgJ3o6svszRzIH4b8PPYex/COo+rhhZjDAs+bVducXwjmVSi27WcDOaLLCBV2t3tfVH9bYXAL76IvQA==",
+      "license": "MIT"
     },
     "node_modules/@types/d3-scale": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.2.tgz",
       "integrity": "sha512-Yk4htunhPAwN0XGlIwArRomOjdoBFXC3+kCxK2Ubg7I9shQlVSJy/pG/Ht5ASN+gdMIalpk8TJ5xV74jFsetLA==",
+      "license": "MIT",
       "dependencies": {
         "@types/d3-time": "*"
       }
@@ -1624,6 +1659,7 @@
       "version": "1.3.12",
       "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.3.12.tgz",
       "integrity": "sha512-8oMzcd4+poSLGgV0R1Q1rOlx/xdmozS4Xab7np0eamFFUYq71AU9pOCJEFnkXW2aI/oXdVYJzw6pssbSut7Z9Q==",
+      "license": "MIT",
       "dependencies": {
         "@types/d3-path": "^1"
       }
@@ -1631,17 +1667,20 @@
     "node_modules/@types/d3-time": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.0.tgz",
-      "integrity": "sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg=="
+      "integrity": "sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==",
+      "license": "MIT"
     },
     "node_modules/@types/d3-time-format": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-2.1.0.tgz",
-      "integrity": "sha512-/myT3I7EwlukNOX2xVdMzb8FRgNzRMpsZddwst9Ld/VFe6LyJyRp0s32l/V9XoUzk+Gqu56F/oGk6507+8BxrA=="
+      "integrity": "sha512-/myT3I7EwlukNOX2xVdMzb8FRgNzRMpsZddwst9Ld/VFe6LyJyRp0s32l/V9XoUzk+Gqu56F/oGk6507+8BxrA==",
+      "license": "MIT"
     },
     "node_modules/@types/d3-voronoi": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/@types/d3-voronoi/-/d3-voronoi-1.1.12.tgz",
-      "integrity": "sha512-DauBl25PKZZ0WVJr42a6CNvI6efsdzofl9sajqZr2Gf5Gu733WkDdUGiPkUHXiUvYGzNNlFQde2wdZdfQPG+yw=="
+      "integrity": "sha512-DauBl25PKZZ0WVJr42a6CNvI6efsdzofl9sajqZr2Gf5Gu733WkDdUGiPkUHXiUvYGzNNlFQde2wdZdfQPG+yw==",
+      "license": "MIT"
     },
     "node_modules/@types/estree": {
       "version": "1.0.6",
@@ -1653,6 +1692,7 @@
       "version": "4.17.25",
       "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.25.tgz",
       "integrity": "sha512-dVd04UKsfpINUnK0yBoYHDF3xu7xVH4BuDotC/xGuycx4CgbP48X/KF/586bcObxT0HENHXEU8Nqtu6NR+eKhw==",
+      "license": "MIT",
       "dependencies": {
         "@types/body-parser": "*",
         "@types/express-serve-static-core": "^4.17.33",
@@ -1661,9 +1701,10 @@
       }
     },
     "node_modules/@types/express-serve-static-core": {
-      "version": "4.19.7",
-      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.19.7.tgz",
-      "integrity": "sha512-FvPtiIf1LfhzsaIXhv/PHan/2FeQBbtBDtfX2QfvPxdUelMDEckK08SM6nqo1MIZY3RUlfA+HV8+hFUSio78qg==",
+      "version": "4.19.8",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.19.8.tgz",
+      "integrity": "sha512-02S5fmqeoKzVZCHPZid4b8JH2eM5HzQLZWN2FohQEy/0eXTq8VXZfSN6Pcr3F6N9R/vNrj7cpgbhjie6m/1tCA==",
+      "license": "MIT",
       "dependencies": {
         "@types/node": "*",
         "@types/qs": "*",
@@ -1674,12 +1715,14 @@
     "node_modules/@types/geojson": {
       "version": "7946.0.16",
       "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
-      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg=="
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+      "license": "MIT"
     },
     "node_modules/@types/http-errors": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.5.tgz",
-      "integrity": "sha512-r8Tayk8HJnX0FztbZN7oVqGccWgw98T/0neJphO91KkmOzug1KkofZURD4UaD5uH8AqcFLfdPErnBod0u71/qg=="
+      "integrity": "sha512-r8Tayk8HJnX0FztbZN7oVqGccWgw98T/0neJphO91KkmOzug1KkofZURD4UaD5uH8AqcFLfdPErnBod0u71/qg==",
+      "license": "MIT"
     },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
@@ -1688,14 +1731,16 @@
       "dev": true
     },
     "node_modules/@types/lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-FOvQ0YPD5NOfPgMzJihoT+Za5pdkDJWcbpuj1DjaKZIr/gxodQjY/uWEFlTNqW2ugXHUiL8lRQgw63dzKHZdeQ=="
+      "version": "4.17.24",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.24.tgz",
+      "integrity": "sha512-gIW7lQLZbue7lRSWEFql49QJJWThrTFFeIMJdp3eH4tKoxm1OvEPg02rm4wCCSHS0cL3/Fizimb35b7k8atwsQ==",
+      "license": "MIT"
     },
     "node_modules/@types/mime": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz",
-      "integrity": "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w=="
+      "integrity": "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==",
+      "license": "MIT"
     },
     "node_modules/@types/node": {
       "version": "25.0.3",
@@ -1711,14 +1756,16 @@
       "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ=="
     },
     "node_modules/@types/qs": {
-      "version": "6.14.0",
-      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.14.0.tgz",
-      "integrity": "sha512-eOunJqu0K1923aExK6y8p6fsihYEn/BYuQ4g0CxAAgFc4b/ZLN4CrsRZ55srTdqoiLzU2B2evC+apEIxprEzkQ=="
+      "version": "6.15.1",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.15.1.tgz",
+      "integrity": "sha512-GZHUBZR9hckSUhrxmp1nG6NwdpM9fCunJwyThLW1X3AyHgd9IlHb6VANpQQqDr2o/qQp6McZ3y/IA2rVzKzSbw==",
+      "license": "MIT"
     },
     "node_modules/@types/range-parser": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz",
-      "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ=="
+      "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==",
+      "license": "MIT"
     },
     "node_modules/@types/react": {
       "version": "18.3.18",
@@ -1741,6 +1788,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@types/send/-/send-1.2.1.tgz",
       "integrity": "sha512-arsCikDvlU99zl1g69TcAB3mzZPpxgw0UQnaHeC1Nwb015xp8bknZv5rIfri9xTOcMuaVgvabfIRA7PSZVuZIQ==",
+      "license": "MIT",
       "dependencies": {
         "@types/node": "*"
       }
@@ -1749,6 +1797,7 @@
       "version": "1.15.10",
       "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.10.tgz",
       "integrity": "sha512-tRs1dB+g8Itk72rlSI2ZrW6vZg0YrLI81iQSTkMmOqnqCaNr/8Ek4VwWcN5vZgCYWbg/JJSGBlUaYGAOP73qBw==",
+      "license": "MIT",
       "dependencies": {
         "@types/http-errors": "*",
         "@types/node": "*",
@@ -1759,6 +1808,7 @@
       "version": "0.17.6",
       "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.6.tgz",
       "integrity": "sha512-Uqt8rPBE8SY0RK8JB1EzVOIZ32uqy8HwdxCnoCOsYrvnswqmFZ/k+9Ikidlk/ImhsdvBsloHbAlewb2IEBV/Og==",
+      "license": "MIT",
       "dependencies": {
         "@types/mime": "^1",
         "@types/node": "*"
@@ -1768,6 +1818,7 @@
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/@visx/annotation/-/annotation-3.12.0.tgz",
       "integrity": "sha512-ZH6Y4jfrb47iEUV9O2itU9TATE5IPzhs5qvP6J7vmv26qkqwDcuE7xN3S3l9R70WjyEKGbpO8js4EijA3FJWkA==",
+      "license": "MIT",
       "dependencies": {
         "@types/react": "*",
         "@visx/drag": "3.12.0",
@@ -1785,6 +1836,7 @@
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/@visx/axis/-/axis-3.12.0.tgz",
       "integrity": "sha512-8MoWpfuaJkhm2Yg+HwyytK8nk+zDugCqTT/tRmQX7gW4LYrHYLXFUXOzbDyyBakCVaUbUaAhVFxpMASJiQKf7A==",
+      "license": "MIT",
       "dependencies": {
         "@types/react": "*",
         "@visx/group": "3.12.0",
@@ -1803,6 +1855,7 @@
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/@visx/bounds/-/bounds-3.12.0.tgz",
       "integrity": "sha512-peAlNCUbYaaZ0IO6c1lDdEAnZv2iGPDiLIM8a6gu7CaMhtXZJkqrTh+AjidNcIqITktrICpGxJE/Qo9D099dvQ==",
+      "license": "MIT",
       "dependencies": {
         "@types/react": "*",
         "@types/react-dom": "*",
@@ -1817,6 +1870,7 @@
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/@visx/curve/-/curve-3.12.0.tgz",
       "integrity": "sha512-Ng1mefXIzoIoAivw7dJ+ZZYYUbfuwXgZCgQynShr6ZIVw7P4q4HeQfJP3W24ON+1uCSrzoycHSXRelhR9SBPcw==",
+      "license": "MIT",
       "dependencies": {
         "@types/d3-shape": "^1.3.1",
         "d3-shape": "^1.0.6"
@@ -1826,6 +1880,7 @@
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/@visx/drag/-/drag-3.12.0.tgz",
       "integrity": "sha512-LXOoPVw//YPjpYhDJYBsCYDuv1QimsXjDV98duH0aCy4V94ediXMQpe2wHq4pnlDobLEB71FjOZMFrbFmqtERg==",
+      "license": "MIT",
       "dependencies": {
         "@types/react": "*",
         "@visx/event": "3.12.0",
@@ -1840,6 +1895,7 @@
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/@visx/event/-/event-3.12.0.tgz",
       "integrity": "sha512-9Lvw6qJ0Fi+y1vsC1WspfdIKCxHTb7oy59Uql1uBdPGT8zChP0vuxW0jQNQRDbKgoefj4pCXAFi8+MF1mEtVTw==",
+      "license": "MIT",
       "dependencies": {
         "@types/react": "*",
         "@visx/point": "3.12.0"
@@ -1849,6 +1905,7 @@
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/@visx/glyph/-/glyph-3.12.0.tgz",
       "integrity": "sha512-E9ST9MoPNyXQzjZxYYAGXT4CbBpnB90Qhx8UvUUM2/n/SZUNeH+m6UiB/CzT0jGK2b0lPHF91mlOiQ8JXBRhYg==",
+      "license": "MIT",
       "dependencies": {
         "@types/d3-shape": "^1.3.1",
         "@types/react": "*",
@@ -1865,6 +1922,7 @@
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/@visx/grid/-/grid-3.12.0.tgz",
       "integrity": "sha512-L4ex2ooSYhwNIxJ3XFIKRhoSvEGjPc2Y3YCrtNB4TV5Ofdj4q0UMOsxfrH23Pr8HSHuQhb6VGMgYoK0LuWqDmQ==",
+      "license": "MIT",
       "dependencies": {
         "@types/react": "*",
         "@visx/curve": "3.12.0",
@@ -1883,6 +1941,7 @@
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/@visx/group/-/group-3.12.0.tgz",
       "integrity": "sha512-Dye8iS1alVXPv7nj/7M37gJe6sSKqJLH7x6sEWAsRQ9clI0kFvjbKcKgF+U3aAVQr0NCohheFV+DtR8trfK/Ag==",
+      "license": "MIT",
       "dependencies": {
         "@types/react": "*",
         "classnames": "^2.3.1",
@@ -1896,6 +1955,7 @@
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/@visx/mock-data/-/mock-data-3.12.0.tgz",
       "integrity": "sha512-HI8LKdO3sU2tIBv16ZYRTc2JYsu0Ai/hQc7YUOBqbjhXUW993iCBe98pAgEdHDrSWqK2yvXY4En5ceBTAP34Jw==",
+      "license": "MIT",
       "dependencies": {
         "@types/d3-random": "^2.2.0",
         "d3-random": "^2.2.2"
@@ -1905,6 +1965,7 @@
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/@visx/pattern/-/pattern-3.12.0.tgz",
       "integrity": "sha512-ZkNA/2TkULNiiY4cw2IkuQcQRp9zI3SQ0/JoZMQ+UmUvY5RNBcsdTmic7649egHq0FRYCbY0DDQVJicccW5JUg==",
+      "license": "MIT",
       "dependencies": {
         "@types/react": "*",
         "classnames": "^2.3.1",
@@ -1917,12 +1978,14 @@
     "node_modules/@visx/point": {
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/@visx/point/-/point-3.12.0.tgz",
-      "integrity": "sha512-I6UrHoJAEVbx3RORQNupgTiX5EzjuZpiwLPxn8L2mI5nfERotPKi1Yus12Cq2WtXqEBR/WgqTnoImlqOXBykcA=="
+      "integrity": "sha512-I6UrHoJAEVbx3RORQNupgTiX5EzjuZpiwLPxn8L2mI5nfERotPKi1Yus12Cq2WtXqEBR/WgqTnoImlqOXBykcA==",
+      "license": "MIT"
     },
     "node_modules/@visx/react-spring": {
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/@visx/react-spring/-/react-spring-3.12.0.tgz",
       "integrity": "sha512-ehtmjFrUQx3g0mZ684M4LgI9UfQ84ZWD/m9tKfvXhEm1Vl8D4AjaZ4af1tTOg9S7vk2VlpxvVOVN7+t5pu0nSA==",
+      "license": "MIT",
       "dependencies": {
         "@types/react": "*",
         "@visx/axis": "3.12.0",
@@ -1941,6 +2004,7 @@
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/@visx/responsive/-/responsive-3.12.0.tgz",
       "integrity": "sha512-GV1BTYwAGlk/K5c9vH8lS2syPnTuIqEacI7L6LRPbsuaLscXMNi+i9fZyzo0BWvAdtRV8v6Urzglo++lvAXT1Q==",
+      "license": "MIT",
       "dependencies": {
         "@types/lodash": "^4.14.172",
         "@types/react": "*",
@@ -1955,6 +2019,7 @@
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/@visx/scale/-/scale-3.12.0.tgz",
       "integrity": "sha512-+ubijrZ2AwWCsNey0HGLJ0YKNeC/XImEFsr9rM+Uef1CM3PNM43NDdNTrdBejSlzRq0lcfQPWYMYQFSlkLcPOg==",
+      "license": "MIT",
       "dependencies": {
         "@visx/vendor": "3.12.0"
       }
@@ -1963,6 +2028,7 @@
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/@visx/shape/-/shape-3.12.0.tgz",
       "integrity": "sha512-/1l0lrpX9tPic6SJEalryBKWjP/ilDRnQA+BGJTI1tj7i23mJ/J0t4nJHyA1GrL4QA/bM/qTJ35eyz5dEhJc4g==",
+      "license": "MIT",
       "dependencies": {
         "@types/d3-path": "^1.0.8",
         "@types/d3-shape": "^1.3.1",
@@ -1985,6 +2051,7 @@
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/@visx/text/-/text-3.12.0.tgz",
       "integrity": "sha512-0rbDYQlbuKPhBqXkkGYKFec1gQo05YxV45DORzr6hCyaizdJk1G+n9VkuKSHKBy1vVQhBA0W3u/WXd7tiODQPA==",
+      "license": "MIT",
       "dependencies": {
         "@types/lodash": "^4.14.172",
         "@types/react": "*",
@@ -2001,6 +2068,7 @@
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/@visx/tooltip/-/tooltip-3.12.0.tgz",
       "integrity": "sha512-pWhsYhgl0Shbeqf80qy4QCB6zpq6tQtMQQxKlh3UiKxzkkfl+Metaf9p0/S0HexNi4vewOPOo89xWx93hBeh3A==",
+      "license": "MIT",
       "dependencies": {
         "@types/react": "*",
         "@visx/bounds": "3.12.0",
@@ -2017,6 +2085,7 @@
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/@visx/vendor/-/vendor-3.12.0.tgz",
       "integrity": "sha512-SVO+G0xtnL9dsNpGDcjCgoiCnlB3iLSM9KLz1sLbSrV7RaVXwY3/BTm2X9OWN1jH2a9M+eHt6DJ6sE6CXm4cUg==",
+      "license": "MIT and ISC",
       "dependencies": {
         "@types/d3-array": "3.0.3",
         "@types/d3-color": "3.1.0",
@@ -2043,6 +2112,7 @@
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/@visx/voronoi/-/voronoi-3.12.0.tgz",
       "integrity": "sha512-U3HWu6g5UjQchFDq8k/A4U9WrlN+80rAFPdGOUvIGOueQw9RmlZlNaeg8IJcQr2yk1s4O/VSpt3nR82zdINWMw==",
+      "license": "MIT",
       "dependencies": {
         "@types/d3-voronoi": "^1.1.9",
         "@types/react": "*",
@@ -2058,6 +2128,7 @@
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/@visx/xychart/-/xychart-3.12.0.tgz",
       "integrity": "sha512-itJ7qvj/STpVmHesVyo2vPOataBM1mgSaf9R6/s4Bpe340wZldfCJ+IqRcNgdtbBagz1Hlr/sRnla4tWE2yw9A==",
+      "license": "MIT",
       "dependencies": {
         "@types/lodash": "^4.14.172",
         "@types/react": "*",
@@ -2090,6 +2161,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-2.1.0.tgz",
       "integrity": "sha512-PnjUqfM2PpskbSLTJvAzp2Wv4CZsnAgTfcVRTwW03QR3MkXF8Uo7B1y/lWkAsmbKwuecto++4NlsYcvYpXpTHA==",
+      "license": "BSD-3-Clause",
       "dependencies": {
         "d3-path": "1 - 2"
       }
@@ -2304,6 +2376,7 @@
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.16.1.tgz",
       "integrity": "sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==",
+      "license": "MIT",
       "peer": true,
       "dependencies": {
         "tslib": "^2.0.1"
@@ -2335,6 +2408,7 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/better-opn/-/better-opn-3.0.2.tgz",
       "integrity": "sha512-aVNobHnJqLiUelTaHat9DZ1qM2w0C0Eym4LPI/3JxOnSokGVdsl1T1kN7TFvsEAD8G47A6VKQ0TVHqbBnYMJlQ==",
+      "license": "MIT",
       "peer": true,
       "dependencies": {
         "open": "^8.0.4"
@@ -2484,6 +2558,7 @@
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
       "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
       "dependencies": {
         "clsx": "^2.1.1"
       },
@@ -2494,12 +2569,14 @@
     "node_modules/classnames": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
-      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "license": "MIT"
     },
     "node_modules/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
       "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
@@ -2557,6 +2634,7 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.1.tgz",
       "integrity": "sha512-gUY/qeHq/yNqqoCKNq4vtpFLdoCdvyNpWoC/KNjhGbhDuQpAM9sIQQKkXSNpXa9h5KySs/gzm7R88WkUutgwWQ==",
+      "license": "ISC",
       "dependencies": {
         "internmap": "1 - 2"
       },
@@ -2568,6 +2646,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
       "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
       "engines": {
         "node": ">=12"
       }
@@ -2576,6 +2655,7 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.2.tgz",
       "integrity": "sha512-IMLNldruDQScrcfT+MWnazhHbDJhcRJyOEBAJfwQnHle1RPh6WDuLvxNArUju2VSMSUuKlY5BGHRJ2cYyoFLQQ==",
+      "license": "ISC",
       "dependencies": {
         "delaunator": "5"
       },
@@ -2587,6 +2667,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
       "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "license": "ISC",
       "engines": {
         "node": ">=12"
       }
@@ -2595,6 +2676,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.0.tgz",
       "integrity": "sha512-JEo5HxXDdDYXCaWdwLRt79y7giK8SbhZJbFWXqbRTolCHFI5jRqteLzCsq51NKbUoX0PjBVSohxrx+NoOUujYA==",
+      "license": "ISC",
       "dependencies": {
         "d3-array": "2.5.0 - 3"
       },
@@ -2606,6 +2688,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
       "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
       "dependencies": {
         "d3-color": "1 - 3"
       },
@@ -2616,22 +2699,26 @@
     "node_modules/d3-interpolate-path": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/d3-interpolate-path/-/d3-interpolate-path-2.2.1.tgz",
-      "integrity": "sha512-6qLLh/KJVzls0XtMsMpcxhqMhgVEN7VIbR/6YGZe2qlS8KDgyyVB20XcmGnDyB051HcefQXM/Tppa9vcANEA4Q=="
+      "integrity": "sha512-6qLLh/KJVzls0XtMsMpcxhqMhgVEN7VIbR/6YGZe2qlS8KDgyyVB20XcmGnDyB051HcefQXM/Tppa9vcANEA4Q==",
+      "license": "BSD-3-Clause"
     },
     "node_modules/d3-path": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
-      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==",
+      "license": "BSD-3-Clause"
     },
     "node_modules/d3-random": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-2.2.2.tgz",
-      "integrity": "sha512-0D9P8TRj6qDAtHhRQn6EfdOtHMfsUWanl3yb/84C4DqpZ+VsgfI5iTVRNRbELCfNvRfpMr8OrqqUTQ6ANGCijw=="
+      "integrity": "sha512-0D9P8TRj6qDAtHhRQn6EfdOtHMfsUWanl3yb/84C4DqpZ+VsgfI5iTVRNRbELCfNvRfpMr8OrqqUTQ6ANGCijw==",
+      "license": "BSD-3-Clause"
     },
     "node_modules/d3-scale": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
       "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
       "dependencies": {
         "d3-array": "2.10.0 - 3",
         "d3-format": "1 - 3",
@@ -2647,6 +2734,7 @@
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
       "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "license": "BSD-3-Clause",
       "dependencies": {
         "d3-path": "1"
       }
@@ -2655,6 +2743,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
       "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
       "dependencies": {
         "d3-array": "2 - 3"
       },
@@ -2666,6 +2755,7 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
       "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
       "dependencies": {
         "d3-time": "1 - 3"
       },
@@ -2676,7 +2766,8 @@
     "node_modules/d3-voronoi": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.4.tgz",
-      "integrity": "sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg=="
+      "integrity": "sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg==",
+      "license": "BSD-3-Clause"
     },
     "node_modules/data-view-buffer": {
       "version": "1.0.2",
@@ -2730,9 +2821,10 @@
       }
     },
     "node_modules/dayjs": {
-      "version": "1.11.19",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.19.tgz",
-      "integrity": "sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw=="
+      "version": "1.11.21",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.21.tgz",
+      "integrity": "sha512-98IT+HOahAisibz/yjKbzuOBwYcjJ7BCLPzARyHiyEBmRz4fatF+KPJszEHXsGYjUG234aH/cOjW1wwTbKUZlA==",
+      "license": "MIT"
     },
     "node_modules/debug": {
       "version": "4.4.0",
@@ -2776,6 +2868,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
       "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+      "license": "MIT",
       "peer": true,
       "engines": {
         "node": ">=8"
@@ -2799,9 +2892,10 @@
       }
     },
     "node_modules/delaunator": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.1.tgz",
-      "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.1.0.tgz",
+      "integrity": "sha512-AGrQ4QSgssa1NGmWmLPqN5NY2KajF5MqxetNEO+o0n3ZwZZeTmt7bBnvzHWrmkZFxGgr4HdyFgelzgi06otLuQ==",
+      "license": "ISC",
       "dependencies": {
         "robust-predicates": "^3.0.2"
       }
@@ -2810,6 +2904,7 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
       "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
@@ -3048,6 +3143,7 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/esbuild-register/-/esbuild-register-3.6.0.tgz",
       "integrity": "sha512-H2/S7Pm8a9CL1uhp9OvjwrBh5Pvx0H8qVOxNu8Wed9Y7qv56MPtq+GGM8RJpq6glYJn9Wspr8uw7l55uyinNeg==",
+      "license": "MIT",
       "peer": true,
       "dependencies": {
         "debug": "^4.3.4"
@@ -3238,6 +3334,7 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
       "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "license": "BSD-2-Clause",
       "peer": true,
       "bin": {
         "esparse": "bin/esparse.js",
@@ -3323,6 +3420,7 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/file-system-cache/-/file-system-cache-2.3.0.tgz",
       "integrity": "sha512-l4DMNdsIPsVnKrgEXbJwDJsA5mB8rGwHYERMgqQx/xAUtChPJMre1bXBzDEqqVbWv9AIbFezXMxeEkZDSrXUOQ==",
+      "license": "MIT",
       "dependencies": {
         "fs-extra": "11.1.1",
         "ramda": "0.29.0"
@@ -3375,6 +3473,7 @@
       "version": "11.1.1",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz",
       "integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==",
+      "license": "MIT",
       "dependencies": {
         "graceful-fs": "^4.2.0",
         "jsonfile": "^6.0.1",
@@ -3550,7 +3649,8 @@
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "license": "ISC"
     },
     "node_modules/has-bigints": {
       "version": "1.1.0",
@@ -3673,6 +3773,7 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC",
       "peer": true
     },
     "node_modules/internal-slot": {
@@ -3693,6 +3794,7 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
       "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
       "engines": {
         "node": ">=12"
       }
@@ -3701,6 +3803,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.2.0.tgz",
       "integrity": "sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==",
+      "license": "MIT",
       "peer": true,
       "dependencies": {
         "call-bound": "^1.0.2",
@@ -3842,6 +3945,7 @@
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
       "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "license": "MIT",
       "peer": true,
       "bin": {
         "is-docker": "cli.js"
@@ -4072,6 +4176,7 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
       "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "license": "MIT",
       "peer": true,
       "dependencies": {
         "is-docker": "^2.0.0"
@@ -4130,6 +4235,7 @@
       "version": "4.8.0",
       "resolved": "https://registry.npmjs.org/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-4.8.0.tgz",
       "integrity": "sha512-iZ8Bdb84lWRuGHamRXFyML07r21pcwBrLkHEuHgEY5UbCouBwv7ECknDRKzsQIXMiqpPymqtIf8TC/shYKB5rw==",
+      "license": "MIT",
       "peer": true,
       "engines": {
         "node": ">=12.0.0"
@@ -4178,9 +4284,10 @@
       }
     },
     "node_modules/jsonfile": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
-      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.1.tgz",
+      "integrity": "sha512-zwOTdL3rFQ/lRdBnntKVOX6k5cKJwEc1HdilT71BWEu7J41gXIB2MRp+vxduPSwZJPWBxEzv4yH1wYLJGUHX4Q==",
+      "license": "MIT",
       "dependencies": {
         "universalify": "^2.0.0"
       },
@@ -4241,9 +4348,10 @@
       }
     },
     "node_modules/lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
+      "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
+      "license": "MIT"
     },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
@@ -4275,6 +4383,7 @@
       "version": "0.487.0",
       "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.487.0.tgz",
       "integrity": "sha512-aKqhOQ+YmFnwq8dWgGjOuLc8V1R9/c/yOd+zDY4+ohsR2Jo05lSGc3WsstYPIzcTpeosN7LoCkLReUUITvaIvw==",
+      "license": "ISC",
       "peerDependencies": {
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
@@ -4282,12 +4391,14 @@
     "node_modules/map-or-similar": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/map-or-similar/-/map-or-similar-1.5.0.tgz",
-      "integrity": "sha512-0aF7ZmVon1igznGI4VS30yugpduQW3y3GkcgGJOp7d8x8QrizhigUxjI/m2UojsXXto+jLAH3KSz+xOJTiORjg=="
+      "integrity": "sha512-0aF7ZmVon1igznGI4VS30yugpduQW3y3GkcgGJOp7d8x8QrizhigUxjI/m2UojsXXto+jLAH3KSz+xOJTiORjg==",
+      "license": "MIT"
     },
     "node_modules/math-expression-evaluator": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.4.0.tgz",
-      "integrity": "sha512-4vRUvPyxdO8cWULGTh9dZWL2tZK6LDBvj+OGHBER7poH9Qdt7kXEoj20wiz4lQUbUXQZFjPbe5mVDo9nutizCw=="
+      "integrity": "sha512-4vRUvPyxdO8cWULGTh9dZWL2tZK6LDBvj+OGHBER7poH9Qdt7kXEoj20wiz4lQUbUXQZFjPbe5mVDo9nutizCw==",
+      "license": "MIT"
     },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
@@ -4301,6 +4412,7 @@
       "version": "1.11.3",
       "resolved": "https://registry.npmjs.org/memoizerific/-/memoizerific-1.11.3.tgz",
       "integrity": "sha512-/EuHYwAPdLtXwAwSZkh/Gutery6pD2KYd44oQLhAvQp/50mpyduZh8Q7PYHXTCJ+wuXxt7oij2LXyIJOOYFPog==",
+      "license": "MIT",
       "dependencies": {
         "map-or-similar": "^1.5.0"
       }
@@ -4320,7 +4432,8 @@
     "node_modules/mitt": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
-      "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
+      "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg==",
+      "license": "MIT"
     },
     "node_modules/ms": {
       "version": "2.1.3",
@@ -4459,6 +4572,7 @@
       "version": "8.4.2",
       "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
       "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
+      "license": "MIT",
       "peer": true,
       "dependencies": {
         "define-lazy-prop": "^2.0.0",
@@ -4627,6 +4741,7 @@
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
       "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+      "license": "MIT",
       "peer": true,
       "engines": {
         "node": ">= 0.6.0"
@@ -4652,9 +4767,10 @@
       }
     },
     "node_modules/qs": {
-      "version": "6.14.1",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.1.tgz",
-      "integrity": "sha512-4EK3+xJl8Ts67nLYNwqw/dsFVnCf+qR7RgXSK9jEEm9unao3njwMDdmsdvoKBKHzxd7tCYz5e5M+SnMjdtXGQQ==",
+      "version": "6.15.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.2.tgz",
+      "integrity": "sha512-Rzq0KEyX/w/tEybncDgdkZrJgVUsUMk3xjh3t5bv3S1HTAtg+uOYt72+ZfwiQwKdysThkTBdL/rTi6HDmX9Ddw==",
+      "license": "BSD-3-Clause",
       "dependencies": {
         "side-channel": "^1.1.0"
       },
@@ -4669,6 +4785,7 @@
       "version": "0.29.0",
       "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.29.0.tgz",
       "integrity": "sha512-BBea6L67bYLtdbOqfp8f58fPMqEwx0doL+pAi8TZyp2YWz8R9G8z9x75CZI8W+ftqhFHCpEX2cRnUUXK130iKA==",
+      "license": "MIT",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/ramda"
@@ -4712,11 +4829,12 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.30.2",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.2.tgz",
-      "integrity": "sha512-H2Bm38Zu1bm8KUE5NVWRMzuIyAV8p/JrOaBJAwVmp37AXG72+CZJlEBw6pdn9i5TBgLMhNDgijS4ZlblpHyWTA==",
+      "version": "6.30.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.4.tgz",
+      "integrity": "sha512-SVUsDe+DybHM/WmYKIVYhZh1o5Dcuf16yM6WjG02Q9XVFMZIJyHYhwrr6bFBXZkVP6z69kNkMyBCujt8FaFLJA==",
+      "license": "MIT",
       "dependencies": {
-        "@remix-run/router": "1.23.1"
+        "@remix-run/router": "1.23.3"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -4726,12 +4844,13 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.30.2",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.2.tgz",
-      "integrity": "sha512-l2OwHn3UUnEVUqc6/1VMmR1cvZryZ3j3NzapC2eUXO1dB0sYp5mvwdjiXhpUbRb21eFow3qSxpP8Yv6oAU824Q==",
+      "version": "6.30.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.4.tgz",
+      "integrity": "sha512-q4HvNl+mmDdkS0g+MqiBZNteQJCuimWoOyHMy4T/RQLAn9Z29+E91QXRaxOujeMl2HTzRSS0KFPd7lxX3PjV0Q==",
+      "license": "MIT",
       "dependencies": {
-        "@remix-run/router": "1.23.1",
-        "react-router": "6.30.2"
+        "@remix-run/router": "1.23.3",
+        "react-router": "6.30.4"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -4745,6 +4864,7 @@
       "version": "2.1.7",
       "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.7.tgz",
       "integrity": "sha512-KrvcAo13I/60HpwGO5jpW7E9DfusKyLPLvuHlUyP5zqnmAPhNc6qTRjUQrdTADl0lpPpDVU2/Gg51UlOGHXbdg==",
+      "license": "MIT",
       "peerDependencies": {
         "react": ">=16.13",
         "react-dom": ">=16.13"
@@ -4759,6 +4879,7 @@
       "version": "0.23.11",
       "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.11.tgz",
       "integrity": "sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==",
+      "license": "MIT",
       "peer": true,
       "dependencies": {
         "ast-types": "^0.16.1",
@@ -4775,6 +4896,7 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz",
       "integrity": "sha512-0dVfwYVOlf/LBA2ec4OwQ6p3X9mYxn/wOl2xTcLwjnPYrkgEfPx3VI4eGCH3rQLlPISG5v9I9bkZosKsNRTRKA==",
+      "license": "MIT",
       "dependencies": {
         "balanced-match": "^0.4.2",
         "math-expression-evaluator": "^1.2.14",
@@ -4784,12 +4906,14 @@
     "node_modules/reduce-css-calc/node_modules/balanced-match": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz",
-      "integrity": "sha512-STw03mQKnGUYtoNjmowo4F2cRmIIxYEGiMsjjwla/u5P1lxadj/05WkNaFjNiKTgJkj8KiXbgAiRTmcQRwQNtg=="
+      "integrity": "sha512-STw03mQKnGUYtoNjmowo4F2cRmIIxYEGiMsjjwla/u5P1lxadj/05WkNaFjNiKTgJkj8KiXbgAiRTmcQRwQNtg==",
+      "license": "MIT"
     },
     "node_modules/reduce-function-call": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/reduce-function-call/-/reduce-function-call-1.0.3.tgz",
       "integrity": "sha512-Hl/tuV2VDgWgCSEeWMLwxLZqX7OK59eU1guxXsRKTAyeYimivsKdtcV4fu3r710tpG5GmDKDhQ0HSZLExnNmyQ==",
+      "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0"
       }
@@ -4863,9 +4987,10 @@
       }
     },
     "node_modules/robust-predicates": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
-      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.3.tgz",
+      "integrity": "sha512-NS3levdsRIUOmiJ8FZWCP7LG3QpJyrs/TE0Zpf1yvZu8cAJJ6QMW92H1c7kWpdIHo8RvmLxN/o2JXTKHp74lUA==",
+      "license": "Unlicense"
     },
     "node_modules/rollup": {
       "version": "4.31.0",
@@ -5111,6 +5236,7 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "license": "BSD-3-Clause",
       "peer": true,
       "engines": {
         "node": ">=0.10.0"
@@ -5128,15 +5254,17 @@
     "node_modules/store2": {
       "version": "2.14.4",
       "resolved": "https://registry.npmjs.org/store2/-/store2-2.14.4.tgz",
-      "integrity": "sha512-srTItn1GOvyvOycgxjAnPA63FZNwy0PTyUBFMHRM+hVFltAeoh0LmNBz9SZqUS9mMqGk8rfyWyXn3GH5ReJ8Zw=="
+      "integrity": "sha512-srTItn1GOvyvOycgxjAnPA63FZNwy0PTyUBFMHRM+hVFltAeoh0LmNBz9SZqUS9mMqGk8rfyWyXn3GH5ReJ8Zw==",
+      "license": "MIT"
     },
     "node_modules/storybook": {
-      "version": "8.6.15",
-      "resolved": "https://registry.npmjs.org/storybook/-/storybook-8.6.15.tgz",
-      "integrity": "sha512-Ob7DMlwWx8s7dMvcQ3xPc02TvUeralb+xX3oaPRk9wY9Hc6M1IBC/7cEoITkSmRS2v38DHubC+mtEKNc1u2gQg==",
+      "version": "8.6.18",
+      "resolved": "https://registry.npmjs.org/storybook/-/storybook-8.6.18.tgz",
+      "integrity": "sha512-p8seiSI6FiVY6P3V0pG+5v7c8pDMehMAFRWEhG5XqIBSQszzOjDnW2rNvm3odoLKfo3V3P6Cs6Hv9ILzymULyQ==",
+      "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@storybook/core": "8.6.15"
+        "@storybook/core": "8.6.18"
       },
       "bin": {
         "getstorybook": "bin/index.cjs",
@@ -5288,12 +5416,14 @@
     "node_modules/synchronous-promise": {
       "version": "2.0.17",
       "resolved": "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.17.tgz",
-      "integrity": "sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g=="
+      "integrity": "sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==",
+      "license": "BSD-3-Clause"
     },
     "node_modules/tailwind-merge": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz",
-      "integrity": "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==",
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.6.0.tgz",
+      "integrity": "sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==",
+      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/dcastil"
@@ -5309,6 +5439,7 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
       "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
+      "license": "MIT",
       "peerDependencies": {
         "tailwindcss": ">=3.0.0 || insiders"
       }
@@ -5317,6 +5448,7 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/telejson/-/telejson-7.2.0.tgz",
       "integrity": "sha512-1QTEcJkJEhc8OnStBx/ILRu5J2p0GjvWsBx56bmZRqnrkdBMUe+nX92jxV+p3dB4CP6PZCdJMQJwCggkNBMzkQ==",
+      "license": "MIT",
       "dependencies": {
         "memoizerific": "^1.11.3"
       }
@@ -5324,12 +5456,14 @@
     "node_modules/tiny-invariant": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
-      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
     },
     "node_modules/ts-dedent": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.2.0.tgz",
-      "integrity": "sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.3.0.tgz",
+      "integrity": "sha512-JfJeIHke7y2egdGGgRAvpCwYFUsHlM2gPcrVOxFkznt/4uzQ7HFmvE63iFHVLBJNDuyDOQgijDK/tXH/f6Msjg==",
+      "license": "MIT",
       "engines": {
         "node": ">=6.10"
       }
@@ -5338,6 +5472,7 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD",
       "peer": true
     },
     "node_modules/type-check": {
@@ -5356,6 +5491,7 @@
       "version": "2.19.0",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
       "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "license": "(MIT OR CC0-1.0)",
       "engines": {
         "node": ">=12.20"
       },
@@ -5477,6 +5613,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
       "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "license": "MIT",
       "engines": {
         "node": ">= 10.0.0"
       }
@@ -5524,6 +5661,7 @@
       "version": "0.12.5",
       "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
       "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
+      "license": "MIT",
       "peer": true,
       "dependencies": {
         "inherits": "^2.0.3",
@@ -5536,7 +5674,8 @@
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT"
     },
     "node_modules/vite": {
       "version": "6.0.11",
@@ -5717,9 +5856,10 @@
       }
     },
     "node_modules/ws": {
-      "version": "8.19.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.19.0.tgz",
-      "integrity": "sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==",
+      "version": "8.21.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.21.0.tgz",
+      "integrity": "sha512-Vsp28b7DRcimFQvrqu2Wek3z1iYxDCWqHYB8Qsnk/S4RfaCQzPGPyBNuVjJV3cd6UiKtUtp6sNM77gWvzcCH+g==",
+      "license": "MIT",
       "peer": true,
       "engines": {
         "node": ">=10.0.0"
diff --git a/package.json b/package.json
index c10d6d4..db55e6f 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@blueskyproject/tiled": "^0.0.23",
+    "@blueskyproject/tiled": "^0.0.30",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tailwindcss": "^4.0.14"
diff --git a/src/Header.tsx b/src/Header.tsx
index c6cb3f5..468a226 100644
--- a/src/Header.tsx
+++ b/src/Header.tsx
@@ -36,7 +36,7 @@ export const Header = ({ logoUrl, title, fileName, onSelect }: HeaderProps) => {
           <div className="header-file-name">{fileName}</div>
         </div>
         <div>
-                    <Tiled isButtonMode={true} onSelectCallback={handleTiledWidgetSelect} tiledBaseUrl={getTiledBaseUrl()} initialPath='beamlines/bl832/processed/example_samples' singleColumnMode={true} includeAuthTokensInSelectCallback={true}/>
+          <Tiled oidcRedirectUrl='http://tiled-test:5174/react/' isButtonMode={true} onSelectCallback={handleTiledWidgetSelect} tiledBaseUrl={getTiledBaseUrl()} singleColumnMode={true} includeAuthTokensInSelectCallback={true}/>
           {/* <Tiled isButtonMode={true} onSelectCallback={handleTiledWidgetSelect} tiledBaseUrl={getTiledBaseUrl()} initialPath='beamlines/bl832/processed/BLS-00761_clark' includeAuthTokensInSelectCallback={true} singleColumnMode={true}/> */}
           {/* <Tiled isButtonMode={true} onSelectCallback={handleTiledWidgetSelect} tiledBaseUrl={getTiledBaseUrl()} includeAuthTokensInSelectCallback={true} singleColumnMode={true}/> */}
 

From b1dbd085e7e4b18307c2e9064236df350b11cfd4 Mon Sep 17 00:00:00 2001
From: David Abramov <dabramov@lbl.gov>
Date: Mon, 20 Jul 2026 13:23:52 -0700
Subject: [PATCH 10/15] connecting to remote tiled server

---
 custom_config.yml  |  1 +
 docker-compose.yml | 68 +++++++++++++++++++++++-----------------------
 nginx.conf         | 18 ++++++------
 src/Header.tsx     |  4 ++-
 4 files changed, 47 insertions(+), 44 deletions(-)

diff --git a/custom_config.yml b/custom_config.yml
index 0ae91bb..cbb8c20 100644
--- a/custom_config.yml
+++ b/custom_config.yml
@@ -9,6 +9,7 @@ allow_origins:
   - http://localhost:5174
   - http://localhost:8082
   - http://localhost:8787
+  - https:///tiled-staging.computing.als.lbl.gov
   - http://host.docker.internal:5173
   - http://host.docker.internal:5174
   - http://host.docker.internal:8082
diff --git a/docker-compose.yml b/docker-compose.yml
index a57fa82..5986879 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -5,51 +5,51 @@ services:
   nginx:
     image: nginx:stable
     ports:
-      - "8787:80"
+      - "5174:80"
     volumes:
       - ./nginx.conf:/etc/nginx/nginx.conf:ro
       - ./cors.conf:/etc/nginx/cors.conf:ro
     depends_on:
-      - tiled
+      # - tiled
       - react
     restart: unless-stopped
     networks:
       - webnet
 
-  tiled:
-    # build:
-    #   context: ./tiled
-    #   dockerfile: Dockerfile
-    image: ghcr.io/bluesky/tiled:0.2.3
-    environment:
-      - DATA_DIR=/storage/data
-      #- TILED_ALLOW_ORIGINS='["http://localhost:8787", "http://localhost:8082", "http://localhost:5174", "http://localhost:8000", "http://host.docker.internal:8787", "http://host.docker.internal:8082", "http://host.docker.internal:5174"]'
-      - TILED_SINGLE_USER_API_KEY=${TILED_SINGLE_USER_API_KEY}
-      - TILED_CONFIG=/deploy/config/custom_config.yml  # Point to our custom config
-    volumes:
-      - ${DATA_PATH:-./data}:/storage/data  # Mount data directory
-      - ./custom_config.yml:/deploy/config/custom_config.yml  # Mount custom config
-    expose:
-      - "8000"
-    networks:
-      - webnet
-    # command: >
-    #       sh -c "
-    #         # 1) Launch the server in the background
-    #         exec tiled serve config --host 0.0.0.0 --port 8000 --scalable & 
-    #         TILED_PID=\$!
+  # tiled:
+  #   # build:
+  #   #   context: ./tiled
+  #   #   dockerfile: Dockerfile
+  #   image: ghcr.io/bluesky/tiled:0.2.3
+  #   environment:
+  #     - DATA_DIR=/storage/data
+  #     #- TILED_ALLOW_ORIGINS='["http://localhost:8787", "http://localhost:8082", "http://localhost:5174", "http://localhost:8000", "http://host.docker.internal:8787", "http://host.docker.internal:8082", "http://host.docker.internal:5174"]'
+  #     - TILED_SINGLE_USER_API_KEY=${TILED_SINGLE_USER_API_KEY}
+  #     - TILED_CONFIG=/deploy/config/custom_config.yml  # Point to our custom config
+  #   volumes:
+  #     - ${DATA_PATH:-./data}:/storage/data  # Mount data directory
+  #     - ./custom_config.yml:/deploy/config/custom_config.yml  # Mount custom config
+  #   expose:
+  #     - "8000"
+  #   networks:
+  #     - webnet
+  #   # command: >
+  #   #       sh -c "
+  #   #         # 1) Launch the server in the background
+  #   #         exec tiled serve config --host 0.0.0.0 --port 8000 --scalable & 
+  #   #         TILED_PID=\$!
 
-    #         # 2) Wait up to 30s for it to become healthy
-    #         sleep 30
+  #   #         # 2) Wait up to 30s for it to become healthy
+  #   #         sleep 30
 
-    #         # 3) Register your data once the server is accepting connections
-    #         tiled register http://localhost:8000/ /storage/data --api-key=${TILED_SINGLE_USER_API_KEY} --verbose
+  #   #         # 3) Register your data once the server is accepting connections
+  #   #         tiled register http://localhost:8000/ /storage/data --api-key=${TILED_SINGLE_USER_API_KEY} --verbose
 
-    #         # 4) Hand control back to the server process so docker logs still show it
-    #         wait \$TILED_PID
-    #       "
-    command: sleep infinity
-    restart: unless-stopped
+  #   #         # 4) Hand control back to the server process so docker logs still show it
+  #   #         wait \$TILED_PID
+  #   #       "
+  #   command: sleep infinity
+  #   restart: unless-stopped
 
   react:
     build:
@@ -61,4 +61,4 @@ services:
       - "5174"
     restart: unless-stopped
     networks:
-      - webnet
\ No newline at end of file
+      - webnet
diff --git a/nginx.conf b/nginx.conf
index ac2a9cc..00e0465 100644
--- a/nginx.conf
+++ b/nginx.conf
@@ -24,17 +24,17 @@ http {
     server {
         listen 80;
 
-        location / {
-            proxy_pass http://tiled:8000/;
-            include /etc/nginx/cors.conf;
+        # location / {
+        #     proxy_pass http://tiled:8000/;
+        #     include /etc/nginx/cors.conf;
 
-            proxy_http_version 1.1;
-            proxy_set_header Upgrade $http_upgrade;
-            proxy_set_header Connection "upgrade";
-            proxy_set_header Host            $host;
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        #     proxy_http_version 1.1;
+        #     proxy_set_header Upgrade $http_upgrade;
+        #     proxy_set_header Connection "upgrade";
+        #     proxy_set_header Host            $host;
+        #     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 
-        }
+        # }
         # location /viewer/ {
         #     proxy_pass http://viewer:8082/;
         #     include /etc/nginx/cors.conf;
diff --git a/src/Header.tsx b/src/Header.tsx
index 468a226..44b7e76 100644
--- a/src/Header.tsx
+++ b/src/Header.tsx
@@ -36,7 +36,9 @@ export const Header = ({ logoUrl, title, fileName, onSelect }: HeaderProps) => {
           <div className="header-file-name">{fileName}</div>
         </div>
         <div>
-          <Tiled oidcRedirectUrl='http://tiled-test:5174/react/' isButtonMode={true} onSelectCallback={handleTiledWidgetSelect} tiledBaseUrl={getTiledBaseUrl()} singleColumnMode={true} includeAuthTokensInSelectCallback={true}/>
+          {/* beamlines/bl832/scratch/dabramov */}
+          {/* beamlines/bl832/processed/example_samples */}
+          <Tiled oidcRedirectUrl='http://tiled-test:5174/react/' isButtonMode={true} onSelectCallback={handleTiledWidgetSelect} tiledBaseUrl={getTiledBaseUrl()} singleColumnMode={true} includeAuthTokensInSelectCallback={true} initialPath='beamlines/bl832/processed/dabramov'/> 
           {/* <Tiled isButtonMode={true} onSelectCallback={handleTiledWidgetSelect} tiledBaseUrl={getTiledBaseUrl()} initialPath='beamlines/bl832/processed/BLS-00761_clark' includeAuthTokensInSelectCallback={true} singleColumnMode={true}/> */}
           {/* <Tiled isButtonMode={true} onSelectCallback={handleTiledWidgetSelect} tiledBaseUrl={getTiledBaseUrl()} includeAuthTokensInSelectCallback={true} singleColumnMode={true}/> */}
 

From 0377799e882cbcae0503e4470779b88d91b15f6a Mon Sep 17 00:00:00 2001
From: David Abramov <dabramov@lbl.gov>
Date: Mon, 20 Jul 2026 16:11:48 -0700
Subject: [PATCH 11/15] Allowing for folder selection, fixed issue where a
 second dataset would not load

---
 .env.example                      |  3 +-
 src/Header.tsx                    | 79 ++++++++++++++++++++++++---
 src/ItkVtkNative/ItkVtkNative.tsx | 91 +++++++++++++++++++++++++------
 src/header.css                    | 14 +++++
 src/tiledToken.ts                 | 72 ++++++++++++++++++++++++
 src/utils.ts                      | 69 +++++++++++++++++++++++
 6 files changed, 300 insertions(+), 28 deletions(-)
 create mode 100644 src/tiledToken.ts

diff --git a/.env.example b/.env.example
index 2e96be5..b8a0489 100644
--- a/.env.example
+++ b/.env.example
@@ -1,4 +1,5 @@
 DATA_PATH=/Users/david/Documents/data/tomo/scratch
 VITE_TILED_DEFAULT_FILE_ID=rec20230606_152011_jong-seto_fungal-mycelia_flat-AQ_fungi2_fast #the first file that will be automatically loaded into the viewer app
 VITE_API_TILED_URL=http://localhost:8000/api/v1 #optional custom url for tiled
-#VITE_TILED_PORT=8001 #optionally specify the tiled port (not to be used with VITE_API_TILED_URL) (will assume same hostname as browser)
\ No newline at end of file
+#VITE_TILED_PORT=8001 #optionally specify the tiled port (not to be used with VITE_API_TILED_URL) (will assume same hostname as browser)
+#VITE_TILED_PROCESSED_PATH=beamlines/bl832/processed #parent catalog path whose subfolders populate the folder dropdown (defaults to beamlines/bl832/processed)
\ No newline at end of file
diff --git a/src/Header.tsx b/src/Header.tsx
index 44b7e76..5de3c04 100644
--- a/src/Header.tsx
+++ b/src/Header.tsx
@@ -1,8 +1,13 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import './header.css';
 import { Tiled, TiledItemLinks } from '@blueskyproject/tiled';
 import '@blueskyproject/tiled/style.css';
-import { createZarrFileUrlFromTiledItem, getTiledBaseUrl } from './utils';
+import {
+  createZarrFileUrlFromTiledItem,
+  fetchTiledContainerChildren,
+  getTiledBaseUrl,
+  TILED_PROCESSED_PATH,
+} from './utils';
 
 export interface HeaderProps {
   logoUrl: string;
@@ -14,7 +19,37 @@ export interface HeaderProps {
   onSelect?: (file_url: string) => void;
 }
 
+type FolderStatus = 'loading' | 'ready' | 'error';
+
 export const Header = ({ logoUrl, title, fileName, onSelect }: HeaderProps) => {
+  const [folders, setFolders] = useState<string[]>([]);
+  const [selectedFolder, setSelectedFolder] = useState<string>('');
+  const [status, setStatus] = useState<FolderStatus>('loading');
+
+  // Load the subfolders under the processed path once, to populate the folder dropdown.
+  useEffect(() => {
+    const controller = new AbortController();
+    setStatus('loading');
+    fetchTiledContainerChildren(TILED_PROCESSED_PATH, controller.signal)
+      .then((names) => {
+        setFolders(names);
+        // Preserve the app's previous default of opening into 'dabramov' when it exists.
+        setSelectedFolder(names.includes('dabramov') ? 'dabramov' : names[0] ?? '');
+        setStatus('ready');
+      })
+      .catch((error) => {
+        if (error?.name === 'AbortError') {
+          return;
+        }
+        console.error('Header: failed to load Tiled folders:', error);
+        setStatus('error');
+      });
+    return () => controller.abort();
+  }, []);
+
+  // Full catalog path passed to the Tiled browser as its starting location.
+  const selectedPath = selectedFolder ? `${TILED_PROCESSED_PATH}/${selectedFolder}` : '';
+
   const handleTiledWidgetSelect = (tiledSelectedItemData: TiledItemLinks) => {
     const file_url = createZarrFileUrlFromTiledItem(tiledSelectedItemData);
     if (!file_url) {
@@ -35,13 +70,39 @@ export const Header = ({ logoUrl, title, fileName, onSelect }: HeaderProps) => {
           <h1>{title}</h1>
           <div className="header-file-name">{fileName}</div>
         </div>
-        <div>
-          {/* beamlines/bl832/scratch/dabramov */}
-          {/* beamlines/bl832/processed/example_samples */}
-          <Tiled oidcRedirectUrl='http://tiled-test:5174/react/' isButtonMode={true} onSelectCallback={handleTiledWidgetSelect} tiledBaseUrl={getTiledBaseUrl()} singleColumnMode={true} includeAuthTokensInSelectCallback={true} initialPath='beamlines/bl832/processed/dabramov'/> 
-          {/* <Tiled isButtonMode={true} onSelectCallback={handleTiledWidgetSelect} tiledBaseUrl={getTiledBaseUrl()} initialPath='beamlines/bl832/processed/BLS-00761_clark' includeAuthTokensInSelectCallback={true} singleColumnMode={true}/> */}
-          {/* <Tiled isButtonMode={true} onSelectCallback={handleTiledWidgetSelect} tiledBaseUrl={getTiledBaseUrl()} includeAuthTokensInSelectCallback={true} singleColumnMode={true}/> */}
-
+        <div className="header-tiled-controls">
+          <label className="header-folder-picker">
+            Folder:{' '}
+            <select
+              value={selectedFolder}
+              onChange={(event) => setSelectedFolder(event.target.value)}
+              disabled={status !== 'ready' || folders.length === 0}
+            >
+              {status === 'loading' && <option value="">Loading folders…</option>}
+              {status === 'error' && <option value="">Failed to load folders</option>}
+              {status === 'ready' && folders.length === 0 && (
+                <option value="">No folders found</option>
+              )}
+              {status === 'ready' &&
+                folders.map((name) => (
+                  <option key={name} value={name}>
+                    {name}
+                  </option>
+                ))}
+            </select>
+          </label>
+          {selectedPath && (
+            <Tiled
+              key={selectedPath}
+              oidcRedirectUrl="http://tiled-test:5174/react/"
+              isButtonMode={true}
+              onSelectCallback={handleTiledWidgetSelect}
+              tiledBaseUrl={getTiledBaseUrl()}
+              singleColumnMode={true}
+              includeAuthTokensInSelectCallback={true}
+              initialPath={selectedPath}
+            />
+          )}
         </div>
       </div>
     </header>
diff --git a/src/ItkVtkNative/ItkVtkNative.tsx b/src/ItkVtkNative/ItkVtkNative.tsx
index 682e783..7fc93a2 100644
--- a/src/ItkVtkNative/ItkVtkNative.tsx
+++ b/src/ItkVtkNative/ItkVtkNative.tsx
@@ -1,10 +1,15 @@
 /**
  * ItkVkt.tsx
  *
- * Inline (non-iframe) variant of the ITK/VTK viewer. Instead of writing the viewer into an iframe
- * document, it renders the `.itk-vtk-viewer` element directly in the main DOM and loads the
- * itk-vtk-viewer CDN bundle, which scans for that element and renders the volume from its
- * `data-url`.
+ * Inline (non-iframe) variant of the ITK/VTK viewer. It renders a container element directly in
+ * the main DOM and loads the itk-vtk-viewer CDN bundle, then renders the volume from its URL.
+ *
+ * The bundle is loaded exactly once for the whole app. Each time `dataUrl` changes we call the
+ * bundle's `createViewerFromUrl(container, { files })` directly rather than relying on its
+ * DOM auto-scan: that scan (`initializeEmbeddedViewers`) is guarded by a one-shot global flag and
+ * a per-element `dataset.loaded` flag, so it only ever renders a `.itk-vtk-viewer` element the
+ * first time the script runs — which meant a second volume could never load. Driving the loader
+ * directly (it empties the container first) makes every subsequent load work.
  *
  * Auth: since everything runs in the main window, fetch/XHR are patched in-place (see ./tiledAuth)
  * to attach the Tiled Bearer token — no iframe, no postMessage.
@@ -15,6 +20,49 @@ import { installTiledFetchInterceptor } from './tiledAuth';
 
 const jsDelivrUrl = 'https://cdn.jsdelivr.net/gh/als-computing/itk-vtk-viewer@publish-dist/dist/itkVtkViewer.js';
 
+// The subset of the itk-vtk-viewer global API we use.
+type ItkVtkViewerApi = {
+  createViewerFromUrl: (
+    el: HTMLElement,
+    options: { files: string[]; rotate?: boolean; use2D?: boolean },
+  ) => Promise<unknown>;
+};
+
+declare global {
+  interface Window {
+    itkVtkViewer?: ItkVtkViewerApi;
+  }
+}
+
+// Load the CDN bundle a single time and reuse it across every volume load. The bundle exposes
+// itself on `window.itkVtkViewer` when it finishes executing.
+let bundlePromise: Promise<ItkVtkViewerApi> | null = null;
+const loadItkVtkViewer = (): Promise<ItkVtkViewerApi> => {
+  if (window.itkVtkViewer) {
+    return Promise.resolve(window.itkVtkViewer);
+  }
+  if (!bundlePromise) {
+    bundlePromise = new Promise<ItkVtkViewerApi>((resolve, reject) => {
+      const script = document.createElement('script');
+      script.src = jsDelivrUrl;
+      script.async = true;
+      script.onload = () => {
+        if (window.itkVtkViewer) {
+          resolve(window.itkVtkViewer);
+        } else {
+          reject(new Error('itk-vtk-viewer bundle loaded but window.itkVtkViewer is undefined'));
+        }
+      };
+      script.onerror = () => {
+        bundlePromise = null; // allow a retry on a later mount
+        reject(new Error('Failed to load itk-vtk-viewer bundle'));
+      };
+      document.body.appendChild(script);
+    });
+  }
+  return bundlePromise;
+};
+
 type ItkVktProps = {
   dataUrl?: string;
 };
@@ -26,30 +74,38 @@ export default function ItkVktNative({ dataUrl }: ItkVktProps) {
     if (!containerRef.current || !dataUrl) return;
 
     const container = containerRef.current;
+    let cancelled = false;
 
-    // Patch fetch/XHR so the viewer's zarr requests to the data origin are authenticated.
+    // Keep the token attached for the whole lifetime of this volume: zarr chunks load lazily as
+    // the user pans/zooms, not just during the initial load.
     const removeInterceptor = installTiledFetchInterceptor(dataUrl);
 
-    // Build the element the itk-vtk-viewer bundle looks for.
+    // Render into a fresh inner element sized to fill the container (mirrors the sizing the
+    // bundle's auto-scan applied for data-viewport='100%x100%'). It deliberately has no
+    // `.itk-vtk-viewer` class, so the bundle's one-shot auto-scan ignores it and we stay in
+    // control of loading. Passing this inner div (rather than the flex container itself) keeps
+    // the viewer from taking over the app layout and hiding the header.
     const viewer = document.createElement('div');
-    viewer.className = 'itk-vtk-viewer';
-    viewer.dataset.url = dataUrl;
-    viewer.dataset.rotate = 'false';
-    // Fill the parent container (the space left below the header), not the whole browser window.
-    // The bundle reads this and writes the values onto the element's style.width/height.
-    viewer.dataset.viewport = '100%x100%';
+    viewer.style.position = 'relative';
     viewer.style.width = '100%';
     viewer.style.height = '100%';
     container.appendChild(viewer);
 
-    // Load the viewer bundle, which scans for .itk-vtk-viewer elements and renders them.
-    const script = document.createElement('script');
-    script.src = jsDelivrUrl;
-    document.body.appendChild(script);
+    loadItkVtkViewer()
+      .then((api) => {
+        if (cancelled) return;
+        // createViewerFromUrl empties `viewer` and renders the new volume into it.
+        return api.createViewerFromUrl(viewer, { files: [dataUrl], rotate: false });
+      })
+      .catch((error) => {
+        if (!cancelled) {
+          console.error('ItkVktNative: failed to load volume:', error);
+        }
+      });
 
     return () => {
+      cancelled = true;
       removeInterceptor();
-      script.remove();
       container.innerHTML = '';
     };
   }, [dataUrl]);
@@ -60,7 +116,6 @@ export default function ItkVktNative({ dataUrl }: ItkVktProps) {
 
   return (
     <div
-      key={dataUrl}
       ref={containerRef}
       style={{ flex: 1, minHeight: 0, width: '100%', zIndex: 0 }}
     />
diff --git a/src/header.css b/src/header.css
index 35295b3..74be2f4 100644
--- a/src/header.css
+++ b/src/header.css
@@ -43,6 +43,20 @@
   margin-top: 4px;
 }
 
+.header-tiled-controls {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.header-folder-picker {
+  font-size: 14px;
+  color: #333;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
 /* Modal styles */
 .modal-overlay {
   position: fixed;
diff --git a/src/tiledToken.ts b/src/tiledToken.ts
new file mode 100644
index 0000000..0664565
--- /dev/null
+++ b/src/tiledToken.ts
@@ -0,0 +1,72 @@
+/**
+ * tiledToken.ts
+ *
+ * Shared helper for obtaining a valid (non-expired) Tiled access token. The same
+ * read-from-localStorage / refresh-via-`POST {base}/auth/refresh` logic also lives in
+ * tiledTokenBridge.ts and ItkVtkNative/tiledAuth.ts, but those run inside fetch/XHR
+ * interceptors and have their own constraints (a pre-patch `nativeFetch`, a `window`
+ * getter). This standalone helper is for ordinary app code — e.g. listing catalog
+ * folders — that just needs a bearer token and uses plain `window.fetch`.
+ */
+
+import { getTiledBaseUrl, isTokenExpired } from './utils';
+
+// localStorage keys used by @blueskyproject/tiled.
+const ACCESS_TOKEN_KEY = 'tiledAccessToken';
+const REFRESH_TOKEN_KEY = 'tiledRefreshToken';
+
+// Collapse concurrent refreshes (e.g. multiple callers at once) into one network call.
+let inFlightRefresh: Promise<string | null> | null = null;
+
+/**
+ * Refreshes the Tiled access token using the stored refresh token and persists the new
+ * token(s) back to localStorage so the rest of the app stays consistent.
+ *
+ * @returns The new access token, or null if no refresh token exists or the refresh fails.
+ */
+const refreshAccessToken = async (): Promise<string | null> => {
+  const refreshToken = localStorage.getItem(REFRESH_TOKEN_KEY);
+  if (!refreshToken) {
+    return null;
+  }
+  try {
+    const response = await fetch(`${getTiledBaseUrl()}/auth/refresh`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ refresh_token: refreshToken }),
+    });
+    if (!response.ok) {
+      console.warn('tiledToken: token refresh failed with status', response.status);
+      return null;
+    }
+    const data = await response.json();
+    if (data.access_token) {
+      localStorage.setItem(ACCESS_TOKEN_KEY, data.access_token);
+    }
+    if (data.refresh_token) {
+      localStorage.setItem(REFRESH_TOKEN_KEY, data.refresh_token);
+    }
+    return data.access_token ?? null;
+  } catch (error) {
+    console.warn('tiledToken: token refresh request errored:', error);
+    return null;
+  }
+};
+
+/**
+ * Returns a valid (non-expired) Tiled access token, refreshing it first if necessary.
+ *
+ * @returns A valid access token, or null if none is available and a refresh was not possible.
+ */
+export const getValidTiledToken = async (): Promise<string | null> => {
+  const accessToken = localStorage.getItem(ACCESS_TOKEN_KEY);
+  if (!isTokenExpired(accessToken)) {
+    return accessToken;
+  }
+  if (!inFlightRefresh) {
+    inFlightRefresh = refreshAccessToken().finally(() => {
+      inFlightRefresh = null;
+    });
+  }
+  return inFlightRefresh;
+};
diff --git a/src/utils.ts b/src/utils.ts
index f129eb2..0986e3e 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,4 +1,5 @@
 import { TiledItemLinks } from "@blueskyproject/tiled";
+import { getValidTiledToken } from "./tiledToken";
 
 
 /**
@@ -274,3 +275,71 @@ export const isTokenExpired = (token: string | null | undefined, skewSeconds = 3
         return true;
     }
 };
+
+/**
+ * Parent catalog path whose immediate subfolders populate the folder dropdown in the header.
+ *
+ * Configurable via the `VITE_TILED_PROCESSED_PATH` env variable (matching the app's other
+ * `VITE_`-prefixed config), defaulting to the bl832 processed tree.
+ */
+export const TILED_PROCESSED_PATH: string =
+    import.meta.env.VITE_TILED_PROCESSED_PATH ?? 'beamlines/bl832/processed';
+
+/**
+ * Lists the container (folder) children directly under `parentPath` on the Tiled server.
+ *
+ * Queries Tiled's search endpoint (`GET {tiledBaseUrl}/search/{path}`), which returns the
+ * paginated JSON:API children of a node, follows `links.next` pagination, and returns the
+ * `id` (name) of every child whose `structure_family` is `container`.
+ *
+ * A Bearer token is attached when one is available (the production server has anonymous
+ * access disabled), but the request is still sent without it so a `--public` server works
+ * too — an auth-required server then answers 401, which surfaces as a thrown error.
+ *
+ * @param parentPath - Catalog path whose children to list, e.g. `beamlines/bl832/processed`.
+ *                     Its slashes are treated as path separators and are not URL-encoded.
+ * @param signal - Optional AbortSignal so callers can cancel the request (e.g. on unmount).
+ * @returns The sorted folder names. Rejects if a request fails (e.g. 401 or network error).
+ *
+ * @example
+ * ```typescript
+ * const folders = await fetchTiledContainerChildren('beamlines/bl832/processed');
+ * // Returns: ['BLS-00761_clark', 'dabramov', 'example_samples', ...]
+ * ```
+ */
+export const fetchTiledContainerChildren = async (
+    parentPath: string,
+    signal?: AbortSignal,
+): Promise<string[]> => {
+    const token = await getValidTiledToken();
+    const baseUrl = getTiledBaseUrl();
+    // Attach the token when we have one; a public server accepts the request without it.
+    const headers: Record<string, string> = token ? { Authorization: `Bearer ${token}` } : {};
+    const names: string[] = [];
+
+    // Slashes in parentPath are path separators, so build the URL by string concat rather than
+    // encodeURIComponent (which would escape them). Trim any leading/trailing slashes first.
+    const cleanedPath = parentPath.replace(/^\/+|\/+$/g, '');
+    let nextUrl: string | null = `${baseUrl}/search/${cleanedPath}`;
+
+    while (nextUrl) {
+        const response: Response = await fetch(nextUrl, { headers, signal });
+        if (!response.ok) {
+            throw new Error(
+                `fetchTiledContainerChildren: request to ${nextUrl} failed with status ${response.status}`,
+            );
+        }
+        const json = await response.json();
+        const data: any[] = Array.isArray(json?.data) ? json.data : [];
+        for (const entry of data) {
+            if (entry?.attributes?.structure_family === 'container' && entry?.id) {
+                names.push(entry.id);
+            }
+        }
+        // links.next may be absolute or relative; resolve it against the current URL.
+        const next = json?.links?.next;
+        nextUrl = next ? new URL(next, nextUrl).href : null;
+    }
+
+    return names.sort((a, b) => a.localeCompare(b));
+};

From 4f299cd1eee5ce83d031d648a0165ab980b8cde6 Mon Sep 17 00:00:00 2001
From: David Abramov <dabramov@lbl.gov>
Date: Tue, 21 Jul 2026 15:54:09 -0700
Subject: [PATCH 12/15] Working now

---
 .env.example                               |   7 +-
 package-lock.json                          | 281 +++++++++++++++++++--
 package.json                               |   4 +-
 patches/@blueskyproject+tiled+0.0.30.patch |  22 ++
 react/Dockerfile                           |   5 +-
 src/Header.tsx                             |  33 ++-
 src/ItkVtkNative/tiledAuth.ts              |  11 +-
 src/main.jsx                               |   3 +
 src/tiledBaseUrlGlobal.ts                  |  26 ++
 src/tiledToken.ts                          |  13 +-
 src/tiledTokenBridge.ts                    |  11 +-
 src/utils.ts                               |  11 +-
 12 files changed, 379 insertions(+), 48 deletions(-)
 create mode 100644 patches/@blueskyproject+tiled+0.0.30.patch
 create mode 100644 src/tiledBaseUrlGlobal.ts

diff --git a/.env.example b/.env.example
index b8a0489..2b068e0 100644
--- a/.env.example
+++ b/.env.example
@@ -1,5 +1,6 @@
-DATA_PATH=/Users/david/Documents/data/tomo/scratch
-VITE_TILED_DEFAULT_FILE_ID=rec20230606_152011_jong-seto_fungal-mycelia_flat-AQ_fungi2_fast #the first file that will be automatically loaded into the viewer app
+DATA_PATH=/path/to/your/zarr/data #directory of zarr datasets served by tiled
+VITE_TILED_DEFAULT_FILE_ID=your-default-dataset-id #the first file that will be automatically loaded into the viewer app
 VITE_API_TILED_URL=http://localhost:8000/api/v1 #optional custom url for tiled
+# VITE_API_TILED_URL=https://tiled-staging.computing.als.lbl.gov/api/v1
 #VITE_TILED_PORT=8001 #optionally specify the tiled port (not to be used with VITE_API_TILED_URL) (will assume same hostname as browser)
-#VITE_TILED_PROCESSED_PATH=beamlines/bl832/processed #parent catalog path whose subfolders populate the folder dropdown (defaults to beamlines/bl832/processed)
\ No newline at end of file
+VITE_TILED_PROCESSED_PATH=beamlines/bl832/processed #parent catalog path whose subfolders populate the folder dropdown (defaults to beamlines/bl832/processed)
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 910b32b..8fe6acf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "eslint-plugin-react-hooks": "^5.0.0",
         "eslint-plugin-react-refresh": "^0.4.16",
         "globals": "^15.14.0",
+        "patch-package": "^8.0.1",
         "typescript": "^5.7.3",
         "vite": "^6.0.5"
       }
@@ -2185,6 +2186,12 @@
         "vite": "^4.2.0 || ^5.0.0 || ^6.0.0"
       }
     },
+    "node_modules/@yarnpkg/lockfile": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz",
+      "integrity": "sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==",
+      "dev": true
+    },
     "node_modules/acorn": {
       "version": "8.14.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
@@ -2427,6 +2434,18 @@
         "concat-map": "0.0.1"
       }
     },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/browser-assert": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/browser-assert/-/browser-assert-1.2.1.tgz",
@@ -2483,9 +2502,9 @@
       }
     },
     "node_modules/call-bind-apply-helpers": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.1.tgz",
-      "integrity": "sha512-BhYE+WDaywFg2TBWYNXAE+8B1ATnThNBqXHP5nQu0jWJdVvY2hvkpyB3qOmtmDePiS5/BDQ8wASEWGMWRG148g==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
       "dependencies": {
         "es-errors": "^1.3.0",
         "function-bind": "^1.1.2"
@@ -2495,12 +2514,12 @@
       }
     },
     "node_modules/call-bound": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.3.tgz",
-      "integrity": "sha512-YTd+6wGlNlPxSuri7Y6X8tY2dmm12UMH66RpKMhiX6rsk5wXXnYgbUcOt8kiS31/AjfoTOvCsE+w8nZQLQnzHA==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
       "dependencies": {
-        "call-bind-apply-helpers": "^1.0.1",
-        "get-intrinsic": "^1.2.6"
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -2554,6 +2573,21 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/ci-info": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz",
+      "integrity": "sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/sibiraj-s"
+        }
+      ],
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/class-variance-authority": {
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
@@ -3426,6 +3460,18 @@
         "ramda": "0.29.0"
       }
     },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -3442,6 +3488,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/find-yarn-workspace-root": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz",
+      "integrity": "sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==",
+      "dev": true,
+      "dependencies": {
+        "micromatch": "^4.0.2"
+      }
+    },
     "node_modules/flat-cache": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
@@ -3544,16 +3599,16 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.7.tgz",
-      "integrity": "sha512-VW6Pxhsrk0KAOqs3WEd0klDiF/+V7gQOpAvY1jVU/LHmaD/kQO4523aiJuikX/QAKYiW6x8Jh+RJej1almdtCA==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
       "dependencies": {
-        "call-bind-apply-helpers": "^1.0.1",
+        "call-bind-apply-helpers": "^1.0.2",
         "es-define-property": "^1.0.1",
         "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.0.0",
+        "es-object-atoms": "^1.1.1",
         "function-bind": "^1.1.2",
-        "get-proto": "^1.0.0",
+        "get-proto": "^1.0.1",
         "gopd": "^1.2.0",
         "has-symbols": "^1.1.0",
         "hasown": "^2.0.2",
@@ -3946,7 +4001,6 @@
       "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
       "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "is-docker": "cli.js"
       },
@@ -4022,6 +4076,15 @@
         "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",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/is-number-object": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
@@ -4177,7 +4240,6 @@
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
       "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "is-docker": "^2.0.0"
       },
@@ -4265,6 +4327,25 @@
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
       "dev": true
     },
+    "node_modules/json-stable-stringify": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.3.0.tgz",
+      "integrity": "sha512-qtYiSSFlwot9XHtF9bD9c7rwKjr+RecWT//ZnPvSmEjpV5mmPOCN4j8UjY5hbjNkOwZ/jQv3J6R1/pL7RwgMsg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "isarray": "^2.0.5",
+        "jsonify": "^0.0.1",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
@@ -4295,6 +4376,15 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/jsonify": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.1.tgz",
+      "integrity": "sha512-2/Ki0GcmuqSrgFyelQq9M05y7PS0mEwuIzrf3f1fPqkVDVRvZrPZtVSMHxdgo8Aq0sxAOb/cr2aqqA3LeWHVPg==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -4319,6 +4409,15 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/klaw-sync": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/klaw-sync/-/klaw-sync-6.0.0.tgz",
+      "integrity": "sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.1.11"
+      }
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -4417,6 +4516,19 @@
         "map-or-similar": "^1.5.0"
       }
     },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -4429,6 +4541,15 @@
         "node": "*"
       }
     },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/mitt": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
@@ -4662,6 +4783,77 @@
         "node": ">=6"
       }
     },
+    "node_modules/patch-package": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/patch-package/-/patch-package-8.0.1.tgz",
+      "integrity": "sha512-VsKRIA8f5uqHQ7NGhwIna6Bx6D9s/1iXlA1hthBVBEbkq+t4kXD0HHt+rJhf/Z+Ci0F/HCB2hvn0qLdLG+Qxlw==",
+      "dev": true,
+      "dependencies": {
+        "@yarnpkg/lockfile": "^1.1.0",
+        "chalk": "^4.1.2",
+        "ci-info": "^3.7.0",
+        "cross-spawn": "^7.0.3",
+        "find-yarn-workspace-root": "^2.0.0",
+        "fs-extra": "^10.0.0",
+        "json-stable-stringify": "^1.0.2",
+        "klaw-sync": "^6.0.0",
+        "minimist": "^1.2.6",
+        "open": "^7.4.2",
+        "semver": "^7.5.3",
+        "slash": "^2.0.0",
+        "tmp": "^0.2.4",
+        "yaml": "^2.2.2"
+      },
+      "bin": {
+        "patch-package": "index.js"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">5"
+      }
+    },
+    "node_modules/patch-package/node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/patch-package/node_modules/open": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
+      "integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==",
+      "dev": true,
+      "dependencies": {
+        "is-docker": "^2.0.0",
+        "is-wsl": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/patch-package/node_modules/semver": {
+      "version": "7.8.5",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz",
+      "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -4692,6 +4884,18 @@
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
       "dev": true
     },
+    "node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "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",
@@ -5232,6 +5436,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/slash": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
+      "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -5459,6 +5672,27 @@
       "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
       "license": "MIT"
     },
+    "node_modules/tmp": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.7.tgz",
+      "integrity": "sha512-e0votIpp4Uo2AJYSzVHV6xCcawuiez3DzqDAbrTc3YxBkplN6e+dM13ZeIcZnDg/QpSuU2zfZ3rzwY8ukEnaXw==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
     "node_modules/ts-dedent": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.3.0.tgz",
@@ -5883,6 +6117,21 @@
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
       "dev": true
     },
+    "node_modules/yaml": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.0.tgz",
+      "integrity": "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==",
+      "dev": true,
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/eemeli"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/package.json b/package.json
index db55e6f..cfe326b 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "postinstall": "patch-package"
   },
   "dependencies": {
     "@blueskyproject/tiled": "^0.0.30",
@@ -25,6 +26,7 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.16",
     "globals": "^15.14.0",
+    "patch-package": "^8.0.1",
     "typescript": "^5.7.3",
     "vite": "^6.0.5"
   }
diff --git a/patches/@blueskyproject+tiled+0.0.30.patch b/patches/@blueskyproject+tiled+0.0.30.patch
new file mode 100644
index 0000000..21d9224
--- /dev/null
+++ b/patches/@blueskyproject+tiled+0.0.30.patch
@@ -0,0 +1,22 @@
+diff --git a/node_modules/@blueskyproject/tiled/dist/tiled.es.js b/node_modules/@blueskyproject/tiled/dist/tiled.es.js
+index 0f44de0..21ca67e 100644
+--- a/node_modules/@blueskyproject/tiled/dist/tiled.es.js
++++ b/node_modules/@blueskyproject/tiled/dist/tiled.es.js
+@@ -3193,7 +3193,7 @@ Wt.interceptors.response.use(
+       try {
+         const r = Kv();
+         if (r) {
+-          const i = (await Wt.post(`${gr}/auth/refresh`, {
++          const i = (await Wt.post(`${gr}/auth/session/refresh`, {
+             refresh_token: r.refreshToken
+           })).data.access_token;
+           return lO(r.refreshToken, i), _f(i), Wt(t);
+@@ -3209,7 +3209,7 @@ Wt.interceptors.response.use(
+ const Jv = () => {
+   const e = window.location.hostname, t = window.location.protocol;
+   try {
+-    return `${t}//${e}:8000/api/v1`;
++    return (typeof window !== "undefined" && window.__TILED_BASE_URL__) || `${t}//${e}:8000/api/v1`;
+   } catch (n) {
+     return console.error("error parsing VITE_API_TILED_URL env: ", n), `${t}//${e}:8000/api/v1`;
+   }
diff --git a/react/Dockerfile b/react/Dockerfile
index 10dcb2b..0440fec 100644
--- a/react/Dockerfile
+++ b/react/Dockerfile
@@ -9,7 +9,10 @@ WORKDIR /app
 # Copy package files first for better caching
 COPY package*.json ./
 
-# Install dependencies
+# Patches must be present before `npm ci` runs the postinstall (patch-package) step.
+COPY patches ./patches
+
+# Install dependencies (postinstall applies patches/ via patch-package)
 RUN npm ci
 
 # Copy the rest of the application
diff --git a/src/Header.tsx b/src/Header.tsx
index 5de3c04..78657ca 100644
--- a/src/Header.tsx
+++ b/src/Header.tsx
@@ -47,8 +47,15 @@ export const Header = ({ logoUrl, title, fileName, onSelect }: HeaderProps) => {
     return () => controller.abort();
   }, []);
 
-  // Full catalog path passed to the Tiled browser as its starting location.
-  const selectedPath = selectedFolder ? `${TILED_PROCESSED_PATH}/${selectedFolder}` : '';
+  // Full catalog path passed to the Tiled browser as its starting location. When no folder is
+  // selected yet (e.g. the folder list hasn't loaded, or failed because the user isn't logged in
+  // on an auth-required server), fall back to the base path so the widget still renders — the user
+  // needs it visible to open the browser and log in, which is what lets the dropdown load.
+  // Join parent + folder, dropping empty segments so a root parent ('') doesn't yield a leading '/'.
+  const selectedPath = selectedFolder
+    ? [TILED_PROCESSED_PATH, selectedFolder].filter(Boolean).join('/')
+    : '';
+  const tiledInitialPath = selectedPath || TILED_PROCESSED_PATH;
 
   const handleTiledWidgetSelect = (tiledSelectedItemData: TiledItemLinks) => {
     const file_url = createZarrFileUrlFromTiledItem(tiledSelectedItemData);
@@ -91,18 +98,16 @@ export const Header = ({ logoUrl, title, fileName, onSelect }: HeaderProps) => {
                 ))}
             </select>
           </label>
-          {selectedPath && (
-            <Tiled
-              key={selectedPath}
-              oidcRedirectUrl="http://tiled-test:5174/react/"
-              isButtonMode={true}
-              onSelectCallback={handleTiledWidgetSelect}
-              tiledBaseUrl={getTiledBaseUrl()}
-              singleColumnMode={true}
-              includeAuthTokensInSelectCallback={true}
-              initialPath={selectedPath}
-            />
-          )}
+          <Tiled
+            key={tiledInitialPath}
+            oidcRedirectUrl="http://tiled-test:5174/react/"
+            isButtonMode={true}
+            onSelectCallback={handleTiledWidgetSelect}
+            tiledBaseUrl={getTiledBaseUrl()}
+            singleColumnMode={true}
+            includeAuthTokensInSelectCallback={true}
+            initialPath={tiledInitialPath}
+          />
         </div>
       </div>
     </header>
diff --git a/src/ItkVtkNative/tiledAuth.ts b/src/ItkVtkNative/tiledAuth.ts
index 5fe7ebe..bf585a5 100644
--- a/src/ItkVtkNative/tiledAuth.ts
+++ b/src/ItkVtkNative/tiledAuth.ts
@@ -6,7 +6,7 @@
  * from localStorage — no iframe, no postMessage bridge.
  *
  * Requests bound for the Tiled data origin get an `Authorization: Bearer <token>` header. The
- * access token is refreshed when expired via `POST {tiledBaseUrl}/auth/refresh` (the same call the
+ * access token is refreshed when expired via `POST {tiledBaseUrl}/auth/session/refresh` (the same call the
  * tiled library makes internally on a 401).
  */
 
@@ -29,7 +29,7 @@ const refreshAccessToken = async (): Promise<string | null> => {
     return null;
   }
   try {
-    const response = await nativeFetch(`${getTiledBaseUrl()}/auth/refresh`, {
+    const response = await nativeFetch(`${getTiledBaseUrl()}/auth/session/refresh`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ refresh_token: refreshToken }),
@@ -55,7 +55,7 @@ const refreshAccessToken = async (): Promise<string | null> => {
 /** Returns a valid (non-expired) access token, refreshing it first if necessary. */
 const getValidAccessToken = async (): Promise<string | null> => {
   const accessToken = localStorage.getItem(ACCESS_TOKEN_KEY);
-  if (!isTokenExpired(accessToken)) {
+  if (accessToken && !isTokenExpired(accessToken)) {
     return accessToken;
   }
   // Collapse concurrent refreshes (many chunk requests) into one network call.
@@ -64,7 +64,10 @@ const getValidAccessToken = async (): Promise<string | null> => {
       inFlightRefresh = null;
     });
   }
-  return inFlightRefresh;
+  // If the refresh fails (e.g. the server has no /auth/refresh route → 404), fall back to the
+  // stored token rather than dropping the Authorization header and 401-ing every chunk request.
+  const refreshed = await inFlightRefresh;
+  return refreshed ?? accessToken ?? null;
 };
 
 /**
diff --git a/src/main.jsx b/src/main.jsx
index d8a2694..9ee1f79 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -4,6 +4,9 @@
  * Entry point for the Vite + React application. Renders the <App /> component.
  */
 
+// Must be first: sets window.__TILED_BASE_URL__ before the @blueskyproject/tiled widget module
+// evaluates (its patched Jv() reads it for the auth/refresh base URL).
+import './tiledBaseUrlGlobal'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
diff --git a/src/tiledBaseUrlGlobal.ts b/src/tiledBaseUrlGlobal.ts
new file mode 100644
index 0000000..9620c1a
--- /dev/null
+++ b/src/tiledBaseUrlGlobal.ts
@@ -0,0 +1,26 @@
+/**
+ * tiledBaseUrlGlobal.ts
+ *
+ * Publishes the configured Tiled base URL as `window.__TILED_BASE_URL__` before the
+ * `@blueskyproject/tiled` widget module evaluates.
+ *
+ * The widget (v0.0.30) otherwise hardcodes its auth/refresh base URL to
+ * `<window.location.hostname>:8000` and posts to the wrong refresh route — see
+ * `patches/@blueskyproject+tiled+0.0.30.patch`, which makes `Jv()` read this global and use the
+ * correct `/auth/session/refresh` endpoint. Without a valid base URL here the widget's login/token
+ * refresh fails against any server not sitting at `<host>:8000`.
+ *
+ * IMPORTANT: this must be imported before `<App>` (and therefore before the widget) so the global
+ * is set at the time the widget's module-level `gr = Jv()` runs.
+ */
+import { getTiledBaseUrl } from './utils';
+
+declare global {
+  interface Window {
+    __TILED_BASE_URL__?: string;
+  }
+}
+
+if (typeof window !== 'undefined') {
+  window.__TILED_BASE_URL__ = getTiledBaseUrl();
+}
diff --git a/src/tiledToken.ts b/src/tiledToken.ts
index 0664565..6c13cdb 100644
--- a/src/tiledToken.ts
+++ b/src/tiledToken.ts
@@ -2,7 +2,7 @@
  * tiledToken.ts
  *
  * Shared helper for obtaining a valid (non-expired) Tiled access token. The same
- * read-from-localStorage / refresh-via-`POST {base}/auth/refresh` logic also lives in
+ * read-from-localStorage / refresh-via-`POST {base}/auth/session/refresh` logic also lives in
  * tiledTokenBridge.ts and ItkVtkNative/tiledAuth.ts, but those run inside fetch/XHR
  * interceptors and have their own constraints (a pre-patch `nativeFetch`, a `window`
  * getter). This standalone helper is for ordinary app code — e.g. listing catalog
@@ -30,7 +30,7 @@ const refreshAccessToken = async (): Promise<string | null> => {
     return null;
   }
   try {
-    const response = await fetch(`${getTiledBaseUrl()}/auth/refresh`, {
+    const response = await fetch(`${getTiledBaseUrl()}/auth/session/refresh`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ refresh_token: refreshToken }),
@@ -60,13 +60,18 @@ const refreshAccessToken = async (): Promise<string | null> => {
  */
 export const getValidTiledToken = async (): Promise<string | null> => {
   const accessToken = localStorage.getItem(ACCESS_TOKEN_KEY);
-  if (!isTokenExpired(accessToken)) {
+  if (accessToken && !isTokenExpired(accessToken)) {
     return accessToken;
   }
+  // The token looks missing/expired. Try to refresh, but if that fails — e.g. the server has no
+  // /auth/refresh route (returns 404) — fall back to the stored token and let the server judge it.
+  // The tiled widget uses the stored token directly, so a valid-but-unrefreshable token still works;
+  // returning null here instead would send an unauthenticated request and 401.
   if (!inFlightRefresh) {
     inFlightRefresh = refreshAccessToken().finally(() => {
       inFlightRefresh = null;
     });
   }
-  return inFlightRefresh;
+  const refreshed = await inFlightRefresh;
+  return refreshed ?? accessToken ?? null;
 };
diff --git a/src/tiledTokenBridge.ts b/src/tiledTokenBridge.ts
index 6324731..ce6941a 100644
--- a/src/tiledTokenBridge.ts
+++ b/src/tiledTokenBridge.ts
@@ -11,7 +11,7 @@
  * for it: a function that reads the access/refresh tokens @blueskyproject/tiled stores in
  * localStorage, refreshes the access token when it is expired (or close to it), and returns a
  * valid token. The refresh call mirrors what the tiled library does internally on a 401:
- * `POST {tiledBaseUrl}/auth/refresh` with `{ refresh_token }`.
+ * `POST {tiledBaseUrl}/auth/session/refresh` with `{ refresh_token }`.
  */
 
 import { getTiledBaseUrl, isTokenExpired } from './utils';
@@ -32,7 +32,7 @@ const refreshAccessToken = async (): Promise<string | null> => {
         return null;
     }
     try {
-        const response = await fetch(`${getTiledBaseUrl()}/auth/refresh`, {
+        const response = await fetch(`${getTiledBaseUrl()}/auth/session/refresh`, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ refresh_token: refreshToken }),
@@ -60,10 +60,13 @@ const refreshAccessToken = async (): Promise<string | null> => {
  */
 const getValidAccessToken = async (): Promise<string | null> => {
     const accessToken = localStorage.getItem(ACCESS_TOKEN_KEY);
-    if (!isTokenExpired(accessToken)) {
+    if (accessToken && !isTokenExpired(accessToken)) {
         return accessToken;
     }
-    return refreshAccessToken();
+    // If the refresh fails (e.g. the server has no /auth/refresh route → 404), fall back to the
+    // stored token rather than returning null and forcing an unauthenticated request.
+    const refreshed = await refreshAccessToken();
+    return refreshed ?? accessToken ?? null;
 };
 
 declare global {
diff --git a/src/utils.ts b/src/utils.ts
index 0986e3e..d30165e 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -331,8 +331,17 @@ export const fetchTiledContainerChildren = async (
         }
         const json = await response.json();
         const data: any[] = Array.isArray(json?.data) ? json.data : [];
+        // Diagnostic: surface exactly what the server returned (id + structure_family per child).
+        console.debug(
+            `fetchTiledContainerChildren(${parentPath || '<root>'}): ${data.length} children`,
+            data.map((e) => ({ id: e?.id, structure_family: e?.attributes?.structure_family })),
+        );
         for (const entry of data) {
-            if (entry?.attributes?.structure_family === 'container' && entry?.id) {
+            const family = entry?.attributes?.structure_family;
+            // Keep containers (folders). Some tiled servers omit structure_family from search
+            // results, so also keep entries where it's absent rather than silently showing nothing;
+            // only skip explicit leaf datasets (array/table/sparse/awkward).
+            if (entry?.id && (family === 'container' || family == null)) {
                 names.push(entry.id);
             }
         }

From d1aca480e634fab460c6689a55979a30f2cc42fa Mon Sep 17 00:00:00 2001
From: David Abramov <dabramov@lbl.gov>
Date: Wed, 22 Jul 2026 09:38:59 -0700
Subject: [PATCH 13/15] Cleaning up

---
 src/ItkVtkNative/tiledAuth.ts | 7 ++-----
 src/tiledToken.ts             | 9 ++-------
 src/tiledTokenBridge.ts       | 7 ++-----
 src/utils.ts                  | 5 -----
 4 files changed, 6 insertions(+), 22 deletions(-)

diff --git a/src/ItkVtkNative/tiledAuth.ts b/src/ItkVtkNative/tiledAuth.ts
index bf585a5..e4319bf 100644
--- a/src/ItkVtkNative/tiledAuth.ts
+++ b/src/ItkVtkNative/tiledAuth.ts
@@ -55,7 +55,7 @@ const refreshAccessToken = async (): Promise<string | null> => {
 /** Returns a valid (non-expired) access token, refreshing it first if necessary. */
 const getValidAccessToken = async (): Promise<string | null> => {
   const accessToken = localStorage.getItem(ACCESS_TOKEN_KEY);
-  if (accessToken && !isTokenExpired(accessToken)) {
+  if (!isTokenExpired(accessToken)) {
     return accessToken;
   }
   // Collapse concurrent refreshes (many chunk requests) into one network call.
@@ -64,10 +64,7 @@ const getValidAccessToken = async (): Promise<string | null> => {
       inFlightRefresh = null;
     });
   }
-  // If the refresh fails (e.g. the server has no /auth/refresh route → 404), fall back to the
-  // stored token rather than dropping the Authorization header and 401-ing every chunk request.
-  const refreshed = await inFlightRefresh;
-  return refreshed ?? accessToken ?? null;
+  return inFlightRefresh;
 };
 
 /**
diff --git a/src/tiledToken.ts b/src/tiledToken.ts
index 6c13cdb..5476818 100644
--- a/src/tiledToken.ts
+++ b/src/tiledToken.ts
@@ -60,18 +60,13 @@ const refreshAccessToken = async (): Promise<string | null> => {
  */
 export const getValidTiledToken = async (): Promise<string | null> => {
   const accessToken = localStorage.getItem(ACCESS_TOKEN_KEY);
-  if (accessToken && !isTokenExpired(accessToken)) {
+  if (!isTokenExpired(accessToken)) {
     return accessToken;
   }
-  // The token looks missing/expired. Try to refresh, but if that fails — e.g. the server has no
-  // /auth/refresh route (returns 404) — fall back to the stored token and let the server judge it.
-  // The tiled widget uses the stored token directly, so a valid-but-unrefreshable token still works;
-  // returning null here instead would send an unauthenticated request and 401.
   if (!inFlightRefresh) {
     inFlightRefresh = refreshAccessToken().finally(() => {
       inFlightRefresh = null;
     });
   }
-  const refreshed = await inFlightRefresh;
-  return refreshed ?? accessToken ?? null;
+  return inFlightRefresh;
 };
diff --git a/src/tiledTokenBridge.ts b/src/tiledTokenBridge.ts
index ce6941a..ee035aa 100644
--- a/src/tiledTokenBridge.ts
+++ b/src/tiledTokenBridge.ts
@@ -60,13 +60,10 @@ const refreshAccessToken = async (): Promise<string | null> => {
  */
 const getValidAccessToken = async (): Promise<string | null> => {
     const accessToken = localStorage.getItem(ACCESS_TOKEN_KEY);
-    if (accessToken && !isTokenExpired(accessToken)) {
+    if (!isTokenExpired(accessToken)) {
         return accessToken;
     }
-    // If the refresh fails (e.g. the server has no /auth/refresh route → 404), fall back to the
-    // stored token rather than returning null and forcing an unauthenticated request.
-    const refreshed = await refreshAccessToken();
-    return refreshed ?? accessToken ?? null;
+    return refreshAccessToken();
 };
 
 declare global {
diff --git a/src/utils.ts b/src/utils.ts
index d30165e..4a0c0a7 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -331,11 +331,6 @@ export const fetchTiledContainerChildren = async (
         }
         const json = await response.json();
         const data: any[] = Array.isArray(json?.data) ? json.data : [];
-        // Diagnostic: surface exactly what the server returned (id + structure_family per child).
-        console.debug(
-            `fetchTiledContainerChildren(${parentPath || '<root>'}): ${data.length} children`,
-            data.map((e) => ({ id: e?.id, structure_family: e?.attributes?.structure_family })),
-        );
         for (const entry of data) {
             const family = entry?.attributes?.structure_family;
             // Keep containers (folders). Some tiled servers omit structure_family from search

From 4f721acc328a7db5721b11bbb3a91aafbcae9fdd Mon Sep 17 00:00:00 2001
From: David Abramov <dabramov@lbl.gov>
Date: Wed, 22 Jul 2026 09:48:15 -0700
Subject: [PATCH 14/15] Remove orphaned viewer/widget/service-worker files

---
 public/serviceWorker.js |  44 -----------
 src/ItkViewer.tsx       |  39 ----------
 src/TiledWidget.tsx     | 157 ----------------------------------------
 3 files changed, 240 deletions(-)
 delete mode 100644 public/serviceWorker.js
 delete mode 100644 src/ItkViewer.tsx
 delete mode 100644 src/TiledWidget.tsx

diff --git a/public/serviceWorker.js b/public/serviceWorker.js
deleted file mode 100644
index 7a3a76a..0000000
--- a/public/serviceWorker.js
+++ /dev/null
@@ -1,44 +0,0 @@
-// Service Worker to intercept and log all network requests
-// Note: Service workers intercept at the network level, not at the XMLHttpRequest/fetch API level
-
-self.addEventListener('fetch', (event) => {
-  const url = new URL(event.request.url);
-  const request = event.request;
-  
-  // Log detailed information about each network request
-  console.log('🌐 Service Worker network request:', {
-    url: url.toString(),
-    method: request.method,
-    headers: Object.fromEntries(request.headers.entries()),
-    referrer: request.referrer,
-    mode: request.mode,
-    credentials: request.credentials,
-    destination: request.destination,
-    type: request.type || 'unknown'
-  });
-  
-  // Check if the URL contains 'zarr'
-  if (url.toString().includes('zarr')) {
-    console.log('🎯 FOUND ZARR NETWORK REQUEST:', {
-      url: url.toString(),
-      method: request.method,
-      referrer: request.referrer,
-      userAgent: request.headers.get('User-Agent'),
-      origin: request.headers.get('Origin'),
-      authorization: request.headers.get('Authorization') ? 'Present' : 'Missing',
-      allHeaders: Object.fromEntries(request.headers.entries())
-    });
-  }
-  
-  // Check for any tiled-related requests
-  if (url.toString().includes('tiled') || url.hostname.includes('tiled')) {
-    console.log('🔧 TILED-RELATED REQUEST:', {
-      url: url.toString(),
-      method: request.method,
-      authorization: request.headers.get('Authorization') ? 'Present' : 'Missing'
-    });
-  }
-  
-  // Let the request proceed normally for now
-  return;
-});
\ No newline at end of file
diff --git a/src/ItkViewer.tsx b/src/ItkViewer.tsx
deleted file mode 100644
index b8c4208..0000000
--- a/src/ItkViewer.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-const jsDelivrUrl = 'https://cdn.jsdelivr.net/gh/als-computing/itk-vtk-viewer@publish-dist/dist/itkVtkViewer.js';
-
-import React, { useEffect, useState, useRef } from 'react';
-
-type ItkViewerProps = {
-    dataUrl?: string;
-};
-
-export default function ItkViewer({ dataUrl }: ItkViewerProps) {
-  
-
-
-
-  if (!dataUrl) {
-    return <div style={{textAlign: 'center', marginTop: '3rem'}}>Please select a data set to start the viewer</div>;
-  } else {
-      return (
-        <>
-        <div 
-          className="itk-vtk-viewer"
-          data-url="${dataUrl}"
-          data-rotate="false"
-          data-viewport="100vwx100vh"
-          style="width: 100vw; height: 100vh;"
-        ></div>
-        <script>
-          // Wait 3 seconds for service worker to set up before loading ITK viewer
-          setTimeout(function() {
-            var script = document.createElement('script');
-            script.src = '${jsDelivrUrl}';
-            document.body.appendChild(script);
-          }, 3000);
-        </script>
-        
-        </>
-
-      );
-  }
-}
\ No newline at end of file
diff --git a/src/TiledWidget.tsx b/src/TiledWidget.tsx
deleted file mode 100644
index b2ed9c9..0000000
--- a/src/TiledWidget.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-import React, { useRef, useEffect } from 'react';
-//import { Tiled } from 'bluesky-web';
-//import 'bluesky-web/style.css';
-import { Tiled } from '@blueskyproject/tiled';
-import '@blueskyproject/tiled/style.css';
-
-export interface TiledWidgetProps {
-  /**
-   * Callback that receives the computed file URL when the visible "Select" button is clicked.
-   */
-  onSelect?: (file_url: string) => void;
-}
-
-/**
- * TiledWidget wraps the Tiled widget and continuously attaches a custom click handler to the currently
- * visible "Select" button. When clicked, it extracts metadata from the DOM by looking for an <h3>
- * with class "text-sky-950" immediately followed by a <div> containing a <pre> with JSON metadata.
- * It parses that JSON, extracts the first ancestor from attributes.ancestors, builds the file URL,
- * and calls onSelect.
- */
-export const TiledWidget = ({ onSelect }: TiledWidgetProps) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  // Store the currently attached button and its listener.
-  const currentButtonRef = useRef<HTMLButtonElement | null>(null);
-  const currentHandleRef = useRef<((event: Event) => void) | null>(null);
-
-  // Compute base‑URL at runtime
-  const { protocol, hostname } = window.location;
-  const port = import.meta.env.VITE_TILED_PORT ?? '8787';
-  const apiPath = '/api/v1';
-  const tiledBaseUrl = `${protocol}//${hostname}:${port}${apiPath}`;
-
-  // Helper function to extract metadata from the DOM.
-  const extractMetadata = (): any | null => {
-    const container = containerRef.current;
-    if (!container) {
-      console.warn("extractMetadata: Container not available.");
-      return null;
-    }
-    // Use an adjacent sibling selector to locate the div immediately following the metadata header.
-    const metaContainer = container.querySelector('h3.text-sky-950 + div');
-    if (!metaContainer) {
-      console.warn("extractMetadata: Adjacent div after metadata header not found.");
-      return null;
-    }
-    console.log("extractMetadata: Found metadata container:", metaContainer.outerHTML);
-    // Look for a <pre> element within this container.
-    const preElem = metaContainer.querySelector('pre');
-    if (!preElem) {
-      console.warn("extractMetadata: <pre> element not found inside metadata container.");
-      return null;
-    }
-    const text = preElem.textContent?.trim();
-    if (!text) {
-      console.warn("extractMetadata: No text content in <pre> element.");
-      return null;
-    }
-    if (text.startsWith("{") && text.endsWith("}")) {
-      try {
-        const parsed = JSON.parse(text);
-        console.log("extractMetadata: Successfully parsed metadata:", parsed);
-        return parsed;
-      } catch (error) {
-        console.error("extractMetadata: Failed to parse metadata JSON:", error);
-        return null;
-      }
-    } else {
-      console.warn("extractMetadata: Metadata content is not valid JSON:", text);
-      return null;
-    }
-  };
-
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) {
-      console.warn("TiledWidget: container ref not set.");
-      return;
-    }
-
-    let attached = false;
-
-    // Attach a click listener to the given button.
-    const attachListener = (button: HTMLButtonElement) => {
-      const handleClick = (event: Event) => {
-        event.preventDefault();
-        console.log("Visible 'Select' button clicked");
-        const meta = extractMetadata();
-        let file_url = "";
-        if (meta && meta.attributes?.ancestors && Array.isArray(meta.attributes.ancestors) && meta.attributes.ancestors.length > 0) {
-          const fileId = meta.attributes.ancestors[0];
-          file_url = `${protocol}//${hostname}:${port}/zarr/v2/${fileId}`;
-          // file_url = `http://localhost:8787/zarr/v2/${fileId}`;
-          console.log("Extracted file_url:", file_url);
-        } else {
-          console.warn("extractMetadata: Metadata missing or ancestors array empty.");
-        }
-        onSelect && onSelect(file_url);
-      };
-      button.addEventListener("click", handleClick);
-      currentButtonRef.current = button;
-      currentHandleRef.current = handleClick;
-    };
-
-    // Detach the click listener.
-    const detachListener = (button: HTMLButtonElement, handle: (event: Event) => void) => {
-      button.removeEventListener("click", handle);
-    };
-
-    // Find the currently visible "Select" button.
-    const getVisibleSelectButton = (): HTMLButtonElement | undefined => {
-      const buttons = Array.from(container.querySelectorAll("button"));
-      return buttons.find(
-        btn => btn.textContent?.trim() === "Select" && btn.offsetParent !== null
-      );
-    };
-
-    // Set up a MutationObserver to monitor DOM changes.
-    const observer = new MutationObserver(() => {
-      const newButton = getVisibleSelectButton();
-      if (!newButton) {
-        if (currentButtonRef.current && currentHandleRef.current) {
-          console.log("MutationObserver: No visible 'Select' button found. Removing listener.");
-          detachListener(currentButtonRef.current, currentHandleRef.current);
-          currentButtonRef.current = null;
-          currentHandleRef.current = null;
-        }
-        return;
-      }
-      if (currentButtonRef.current !== newButton) {
-        if (currentButtonRef.current && currentHandleRef.current) {
-          console.log("MutationObserver: Visible 'Select' button changed. Removing listener from previous button.");
-          detachListener(currentButtonRef.current, currentHandleRef.current);
-        }
-        console.log("MutationObserver: Attaching listener to new visible 'Select' button:", newButton.outerHTML);
-        attachListener(newButton);
-      }
-    });
-
-    observer.observe(container, { childList: true, subtree: true });
-    console.log("MutationObserver started on container.");
-
-    // Cleanup on unmount.
-    return () => {
-      observer.disconnect();
-      if (currentButtonRef.current && currentHandleRef.current) {
-        detachListener(currentButtonRef.current, currentHandleRef.current);
-      }
-    };
-  }, [onSelect]);
-
-  return (
-    <div ref={containerRef}>
-      {/* <Tiled tiledBaseUrl="http://localhost:8787/api/v1"/> */}
-      <Tiled tiledBaseUrl={tiledBaseUrl}/>
-    </div>
-  );
-};

From 07a638da42808e15c73f50450eb1ca9f81e67043 Mon Sep 17 00:00:00 2001
From: seijdeleon <seijdeleon@lbl.gov>
Date: Thu, 30 Jul 2026 13:41:20 -0700
Subject: [PATCH 15/15] upgrade tiled finder to v0033

---
 package-lock.json | 51 +++++------------------------------------------
 package.json      |  2 +-
 2 files changed, 6 insertions(+), 47 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8fe6acf..ef50f77 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,8 +7,9 @@
     "": {
       "name": "view_recon_app",
       "version": "0.0.0",
+      "hasInstallScript": true,
       "dependencies": {
-        "@blueskyproject/tiled": "^0.0.30",
+        "@blueskyproject/tiled": "^0.0.33",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "tailwindcss": "^4.0.14"
@@ -301,9 +302,9 @@
       }
     },
     "node_modules/@blueskyproject/tiled": {
-      "version": "0.0.30",
-      "resolved": "https://registry.npmjs.org/@blueskyproject/tiled/-/tiled-0.0.30.tgz",
-      "integrity": "sha512-WpmNbXNQN/XyKkNYhbISb925lVkDBUYjnayQl8Gj8x9UK71Q6jYsWwrjRF8PnmZk2pZAZgep9QNuFpEm+FyQIQ==",
+      "version": "0.0.33",
+      "resolved": "https://registry.npmjs.org/@blueskyproject/tiled/-/tiled-0.0.33.tgz",
+      "integrity": "sha512-14nDf+wzBKDq+aC5Het0jlTyqqw12YWOPqTin//ewpEuu9cnj17b/3C2hgh7a08shwaoRMpgvMUrFlfpqKA2bA==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "@phosphor-icons/react": "^2.1.10",
@@ -322,7 +323,6 @@
         "clsx": "^2.1.1",
         "dayjs": "^1.11.13",
         "lucide-react": "^0.487.0",
-        "react-router-dom": "^6.30.0",
         "tailwind-merge": "^3.2.0",
         "tailwindcss-animate": "^1.0.7"
       },
@@ -1046,15 +1046,6 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/@remix-run/router": {
-      "version": "1.23.3",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.3.tgz",
-      "integrity": "sha512-4An71tdz9X8+3sI4Qqqd2LWd9vS39J7sqd9EU4Scw7TJE/qB10Flv/UuqbPVgfQV9XoK8Np6jNquZitnZq5i+Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.31.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.31.0.tgz",
@@ -5032,38 +5023,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/react-router": {
-      "version": "6.30.4",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.4.tgz",
-      "integrity": "sha512-SVUsDe+DybHM/WmYKIVYhZh1o5Dcuf16yM6WjG02Q9XVFMZIJyHYhwrr6bFBXZkVP6z69kNkMyBCujt8FaFLJA==",
-      "license": "MIT",
-      "dependencies": {
-        "@remix-run/router": "1.23.3"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8"
-      }
-    },
-    "node_modules/react-router-dom": {
-      "version": "6.30.4",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.4.tgz",
-      "integrity": "sha512-q4HvNl+mmDdkS0g+MqiBZNteQJCuimWoOyHMy4T/RQLAn9Z29+E91QXRaxOujeMl2HTzRSS0KFPd7lxX3PjV0Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@remix-run/router": "1.23.3",
-        "react-router": "6.30.4"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8",
-        "react-dom": ">=16.8"
-      }
-    },
     "node_modules/react-use-measure": {
       "version": "2.1.7",
       "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.7.tgz",
diff --git a/package.json b/package.json
index cfe326b..3b6eec7 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "postinstall": "patch-package"
   },
   "dependencies": {
-    "@blueskyproject/tiled": "^0.0.30",
+    "@blueskyproject/tiled": "^0.0.33",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tailwindcss": "^4.0.14"