Vortex Explorer UI (#7165)

A web UI for exploring Vortex files

<img width="1366" height="834" alt="Screenshot 2026-03-27 at 23 11 21"
src="https://github.com/user-attachments/assets/8a4a0c61-f97a-4606-bd6c-de814cafc661"
/>

---------

Signed-off-by: Nicholas Gates <nick@nickgates.com>

Author: gatesn

.github/workflows/web.yml

@@ -58,6 +58,7 @@ jobs:
           cache-dependency-path: vortex-web/package-lock.json
       - run: npm ci
       - run: npm run wasm
+      - run: npm run format:check
       - run: npm run lint
       - run: npm run typecheck
       - run: npm run build-storybook

Cargo.lock

@@ -0,0 +1 @@
+{}

package-lock.json

@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "printWidth": 100,
+  "tabWidth": 2
+}

package.json

@@ -4,13 +4,8 @@
 import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
-  "stories": [
-    "../src/**/*.mdx",
-    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
-  ],
-  "addons": [
-    "@storybook/addon-docs",
-  ],
-  "framework": "@storybook/react-vite"
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-docs'],
+  framework: '@storybook/react-vite',
 };
-export default config;
+export default config;

vortex-web/.prettierrc.json

@@ -1,18 +1,43 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: Copyright the Vortex contributors
 
-import type { Preview } from '@storybook/react-vite'
-import '../src/index.css'
+import type { Preview } from '@storybook/react-vite';
+import '../src/index.css';
 
 const preview: Preview = {
+  globalTypes: {
+    theme: {
+      description: 'Color theme',
+      toolbar: {
+        title: 'Theme',
+        icon: 'paintbrush',
+        items: [
+          { value: 'light', title: 'Light', icon: 'sun' },
+          { value: 'dark', title: 'Dark', icon: 'moon' },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
+  initialGlobals: {
+    theme: 'light',
+  },
+  decorators: [
+    (Story, context) => {
+      const theme = context.globals.theme || 'light';
+      document.documentElement.classList.toggle('dark', theme === 'dark');
+      document.documentElement.classList.toggle('light', theme === 'light');
+      return Story();
+    },
+  ],
   parameters: {
     controls: {
       matchers: {
-       color: /(background|color)$/i,
-       date: /Date$/i,
+        color: /(background|color)$/i,
+        date: /Date$/i,
       },
     },
   },
 };
 
-export default preview;
+export default preview;

vortex-web/.storybook/main.ts

@@ -11,16 +11,27 @@ publish = false
 crate-type = ["cdylib", "rlib"]
 
 [dependencies]
+arrow-array = { workspace = true }
+arrow-ipc = { workspace = true }
+arrow-schema = { workspace = true }
+serde = { workspace = true, features = ["derive"] }
+serde_json = { workspace = true }
 vortex = { path = "../../vortex", default-features = false, features = [
     "files",
 ] }
 
 [target.'cfg(target_arch = "wasm32")'.dependencies]
+futures = { workspace = true }
 wasm-bindgen = "0.2.104"
 wasm-bindgen-futures = { workspace = true }
 console_error_panic_hook = "0.1.7"
 js-sys = "0.3.81"
-web-sys = { version = "0.3.81", features = ["console", "File", "FileReader"] }
+web-sys = { version = "0.3.81", features = [
+    "Blob",
+    "console",
+    "File",
+    "FileReader",
+] }
 
 [lints]
 workspace = true