From 5268dbc8482a041b53c210f5d151d6eb907cdb47 Mon Sep 17 00:00:00 2001
From: Connor Tsui <connor.tsui20@gmail.com>
Date: Mon, 24 Nov 2025 17:39:28 -0500
Subject: [PATCH 01/30] a bit more interesting wasm demo

Signed-off-by: Connor Tsui <connor.tsui20@gmail.com>
---
 .github/workflows/ci.yml |  20 ++-
 REUSE.toml               |   5 +
 wasm-test/.gitignore     |   6 +
 wasm-test/Cargo.lock     | 361 +++++++++++++++++++++------------------
 wasm-test/Cargo.toml     |  19 ++-
 wasm-test/README.md      |  96 +++++++++++
 wasm-test/index.html     | 182 ++++++++++++++++++++
 wasm-test/src/lib.rs     | 288 +++++++++++++++++++++++++++++++
 wasm-test/src/main.rs    | 128 +++++++++++++-
 9 files changed, 924 insertions(+), 181 deletions(-)
 create mode 100644 wasm-test/.gitignore
 create mode 100644 wasm-test/README.md
 create mode 100644 wasm-test/index.html
 create mode 100644 wasm-test/src/lib.rs

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index f5d35fc42c0..b165069eb8d 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -619,15 +619,23 @@ jobs:
       - uses: ./.github/actions/setup-rust
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
-          toolchain: nightly-2025-06-26
-          targets: "wasm32-wasip1"
-          components: "rust-src"
+          targets: "wasm32-wasip1,wasm32-unknown-unknown"
+
       - name: Setup Wasmer
         uses: wasmerio/setup-wasmer@v3.1
-        # there is a compiler bug in nightly (but not in nightly-2025-06-26)
-      - run: cargo +nightly-2025-06-26 -Zbuild-std=panic_abort,std build --target wasm32-wasip1
+      - name: Build WASI binary
+        run: cargo build --target wasm32-wasip1
+        working-directory: ./wasm-test
+      - name: Run WASI test
+        run: wasmer run ./target/wasm32-wasip1/debug/wasm-test.wasm
         working-directory: ./wasm-test
-      - run: wasmer run ./target/wasm32-wasip1/debug/wasm-test.wasm
+
+      # wasm-bindgen-test with headless browser
+      # wasm-pack automatically installs matching wasm-bindgen-cli from Cargo.lock
+      - name: Install wasm-pack
+        run: curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
+      - name: Run wasm-bindgen tests (headless Firefox)
+        run: wasm-pack test --headless --firefox
         working-directory: ./wasm-test
 
   miri:
diff --git a/REUSE.toml b/REUSE.toml
index 46787ae62e2..b8bd2c9948b 100644
--- a/REUSE.toml
+++ b/REUSE.toml
@@ -17,6 +17,11 @@ path = "benchmarks-website/**"
 SPDX-FileCopyrightText = "Copyright the Vortex contributors"
 SPDX-License-Identifier = "CC-BY-4.0"
 
+[[annotations]]
+path = "wasm-test/**"
+SPDX-FileCopyrightText = "Copyright the Vortex contributors"
+SPDX-License-Identifier = "CC-BY-4.0"
+
 # Golden files are licensed under CC-BY-4.0.
 [[annotations]]
 path = "**/goldenfiles/**"
diff --git a/wasm-test/.gitignore b/wasm-test/.gitignore
new file mode 100644
index 00000000000..bcc4bfec848
--- /dev/null
+++ b/wasm-test/.gitignore
@@ -0,0 +1,6 @@
+# WASM build artifacts.
+/target
+/pkg
+
+# Cargo lock file for binary projects.
+Cargo.lock
diff --git a/wasm-test/Cargo.lock b/wasm-test/Cargo.lock
index e3ec17002e9..adf49aaaff8 100644
--- a/wasm-test/Cargo.lock
+++ b/wasm-test/Cargo.lock
@@ -462,18 +462,6 @@ dependencies = [
  "crossbeam-utils",
 ]
 
-[[package]]
-name = "console"
-version = "0.15.11"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "054ccb5b10f9f2cbf51eb355ca1d05c2d279ce1804688d0db74b4733a5aeafd8"
-dependencies = [
- "encode_unicode",
- "libc",
- "once_cell",
- "windows-sys 0.59.0",
-]
-
 [[package]]
 name = "const-random"
 version = "0.1.18"
@@ -515,16 +503,6 @@ dependencies = [
  "crossbeam-utils",
 ]
 
-[[package]]
-name = "crossbeam-deque"
-version = "0.8.6"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9dd111b7b7f7d55b72c0a6ae361660ee5853c9af73f70c3c2ef6858b950e2e51"
-dependencies = [
- "crossbeam-epoch",
- "crossbeam-utils",
-]
-
 [[package]]
 name = "crossbeam-epoch"
 version = "0.9.18"
@@ -534,15 +512,6 @@ dependencies = [
  "crossbeam-utils",
 ]
 
-[[package]]
-name = "crossbeam-queue"
-version = "0.3.12"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0f58bbc28f91df819d0aa2a2c00cd19754769c2fad90579b3592b1c9ba7a3115"
-dependencies = [
- "crossbeam-utils",
-]
-
 [[package]]
 name = "crossbeam-utils"
 version = "0.8.21"
@@ -555,6 +524,16 @@ version = "0.2.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "460fbee9c2c2f33933d720630a6a0bac33ba7053db5344fac858d4b8952d77d5"
 
+[[package]]
+name = "cudarc"
+version = "0.18.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ef0cfc5e22a6b6f7d04ee45b0151232ca236ede8ca3534210fd4072bdead0d60"
+dependencies = [
+ "half",
+ "libloading",
+]
+
 [[package]]
 name = "dashmap"
 version = "6.1.0"
@@ -586,24 +565,12 @@ version = "0.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d3a5ccdfd6c5e7e2fea9c5cf256f2a08216047fab19c621c3da64e9ae4a1462d"
 
-[[package]]
-name = "dyn-hash"
-version = "0.2.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "15401da73a9ed8c80e3b2d4dc05fe10e7b72d7243b9f614e516a44fa99986e88"
-
 [[package]]
 name = "either"
 version = "1.15.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "48c757948c5ede0e46177b7add2e67155f70e33c07fea8284df6576da70b3719"
 
-[[package]]
-name = "encode_unicode"
-version = "1.0.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "34aa73646ffb006b8f5147f3dc182bd4bcb190227ce861fc4a4844bf8e3cb2c0"
-
 [[package]]
 name = "enum-iterator"
 version = "2.3.0"
@@ -624,6 +591,26 @@ dependencies = [
  "syn 2.0.106",
 ]
 
+[[package]]
+name = "enum-map"
+version = "2.7.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6866f3bfdf8207509a033af1a75a7b08abda06bbaaeae6669323fd5a097df2e9"
+dependencies = [
+ "enum-map-derive",
+]
+
+[[package]]
+name = "enum-map-derive"
+version = "0.17.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f282cfdfe92516eb26c2af8589c274c7c17681f5ecc03c18255fe741c6aa64eb"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.106",
+]
+
 [[package]]
 name = "equivalent"
 version = "1.0.2"
@@ -702,9 +689,9 @@ dependencies = [
 
 [[package]]
 name = "fastlanes"
-version = "0.4.0"
+version = "0.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "38b79094ac813a000b92adff4231a6d291d063dc6312b3b88c154a5ea0a195d0"
+checksum = "414cb755aee48ff7b0907995d2949c68c8c17900970076dff6a808e18e592d71"
 dependencies = [
  "arrayref",
  "const_for",
@@ -752,9 +739,9 @@ dependencies = [
 
 [[package]]
 name = "fsst-rs"
-version = "0.5.4"
+version = "0.5.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ab195789b87bb56fce91b3617e44d36dbba68a4c8d736ef48767187932a5161b"
+checksum = "561f2458a3407836ab8f1acc9113b8cda91b9d6378ba8dad13b2fe1a1d3af5ce"
 
 [[package]]
 name = "funty"
@@ -904,6 +891,8 @@ dependencies = [
  "cfg-if",
  "crunchy",
  "num-traits",
+ "rand",
+ "rand_distr",
  "zerocopy",
 ]
 
@@ -1076,17 +1065,6 @@ dependencies = [
  "icu_properties",
 ]
 
-[[package]]
-name = "insta"
-version = "1.43.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "46fdb647ebde000f43b5b53f773c30cf9b0cb4300453208713fa38b2c70935a0"
-dependencies = [
- "console",
- "once_cell",
- "similar",
-]
-
 [[package]]
 name = "inventory"
 version = "0.3.21"
@@ -1159,9 +1137,9 @@ dependencies = [
 
 [[package]]
 name = "js-sys"
-version = "0.3.81"
+version = "0.3.82"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ec48937a97411dcb524a265206ccd4c90bb711fca92b2792c407f268825b9305"
+checksum = "b011eec8cc36da2aab2d5cff675ec18454fad408585853910a202391cf9f8e65"
 dependencies = [
  "once_cell",
  "wasm-bindgen",
@@ -1208,6 +1186,16 @@ version = "0.2.177"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "2874a2af47a2325c2001a6e6fad9b16a53b802102b528163885171cf92b15976"
 
+[[package]]
+name = "libloading"
+version = "0.8.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d7c4b02199fee7c5d21a5ae7d8cfa79a6ef5bb2fc834d6e9058e89c825efdc55"
+dependencies = [
+ "cfg-if",
+ "windows-link",
+]
+
 [[package]]
 name = "libm"
 version = "0.2.15"
@@ -1263,6 +1251,16 @@ version = "2.7.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f52b00d39961fc5b2736ea853c9cc86238e165017a493d1d5c8eac6bdc4cc273"
 
+[[package]]
+name = "minicov"
+version = "0.3.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f27fe9f1cc3c22e1687f9446c2083c4c5fc7f0bcf1c7a86bdbded14985895b4b"
+dependencies = [
+ "cc",
+ "walkdir",
+]
+
 [[package]]
 name = "miniz_oxide"
 version = "0.8.9"
@@ -1543,26 +1541,6 @@ version = "2.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9b4f627cb1b25917193a259e49bdad08f671f8d9708acfd5fe0a8c1455d87220"
 
-[[package]]
-name = "pin-project"
-version = "1.1.10"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "677f1add503faace112b9f1373e43e9e054bfdd22ff1a63c1bc485eaec6a6a8a"
-dependencies = [
- "pin-project-internal",
-]
-
-[[package]]
-name = "pin-project-internal"
-version = "1.1.10"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6e918e4ff8c4549eb882f14b3a4bc8c8bc93de829416eacf579f1207a8fbf861"
-dependencies = [
- "proc-macro2",
- "quote",
- "syn 2.0.106",
-]
-
 [[package]]
 name = "pin-project-lite"
 version = "0.2.16"
@@ -1736,6 +1714,16 @@ dependencies = [
  "getrandom 0.3.3",
 ]
 
+[[package]]
+name = "rand_distr"
+version = "0.5.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6a8615d50dcf34fa31f7ab52692afec947c4dd0ab803cc87cb3b0b4570ff7463"
+dependencies = [
+ "num-traits",
+ "rand",
+]
+
 [[package]]
 name = "rand_xoshiro"
 version = "0.6.0"
@@ -1823,6 +1811,15 @@ version = "1.0.22"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b39cdef0fa800fc44525c84ccb54a029961a8215f9619753635a9c0d2538d46d"
 
+[[package]]
+name = "same-file"
+version = "1.0.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "93fc1dc3aaa9bfed95e02e6eadabb4baf7e3078b0bd1b4d7b6b0b68378900502"
+dependencies = [
+ "winapi-util",
+]
+
 [[package]]
 name = "scopeguard"
 version = "1.2.0"
@@ -1902,12 +1899,6 @@ version = "0.1.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e3a9fe34e3e7a50316060351f37187a3f546bce95496156754b601a5fa71b76e"
 
-[[package]]
-name = "similar"
-version = "2.7.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bbbb5d9659141646ae647b42fe094daf6c6192d1620870b449d9557f748b2daa"
-
 [[package]]
 name = "sketches-ddsketch"
 version = "0.3.0"
@@ -2122,6 +2113,8 @@ checksum = "0b928f33d975fc6ad9f86c8f283853ad26bdd5b10b7f1542aa2fa15e2289105a"
 name = "vortex"
 version = "0.1.0"
 dependencies = [
+ "fastlanes",
+ "rand",
  "vortex-alp",
  "vortex-array",
  "vortex-btrblocks",
@@ -2129,10 +2122,8 @@ dependencies = [
  "vortex-bytebool",
  "vortex-datetime-parts",
  "vortex-decimal-byte-parts",
- "vortex-dict",
  "vortex-dtype",
  "vortex-error",
- "vortex-expr",
  "vortex-fastlanes",
  "vortex-flatbuffers",
  "vortex-fsst",
@@ -2147,6 +2138,7 @@ dependencies = [
  "vortex-scalar",
  "vortex-scan",
  "vortex-sequence",
+ "vortex-session",
  "vortex-sparse",
  "vortex-utils",
  "vortex-zigzag",
@@ -2187,11 +2179,11 @@ dependencies = [
  "bitvec",
  "cfg-if",
  "enum-iterator",
+ "enum-map",
  "flatbuffers",
  "futures",
  "getrandom 0.3.3",
  "humansize",
- "insta",
  "inventory",
  "itertools",
  "log",
@@ -2200,7 +2192,7 @@ dependencies = [
  "num_enum",
  "parking_lot",
  "paste",
- "pin-project",
+ "pin-project-lite",
  "prost",
  "rand",
  "rustc-hash",
@@ -2208,20 +2200,24 @@ dependencies = [
  "static_assertions",
  "termtree",
  "vortex-buffer",
+ "vortex-compute",
  "vortex-dtype",
  "vortex-error",
  "vortex-flatbuffers",
+ "vortex-io",
  "vortex-mask",
  "vortex-metrics",
+ "vortex-proto",
  "vortex-scalar",
+ "vortex-session",
  "vortex-utils",
+ "vortex-vector",
 ]
 
 [[package]]
 name = "vortex-btrblocks"
 version = "0.1.0"
 dependencies = [
- "arrow-buffer",
  "getrandom 0.3.3",
  "itertools",
  "log",
@@ -2233,7 +2229,6 @@ dependencies = [
  "vortex-buffer",
  "vortex-datetime-parts",
  "vortex-decimal-byte-parts",
- "vortex-dict",
  "vortex-dtype",
  "vortex-error",
  "vortex-fastlanes",
@@ -2252,7 +2247,9 @@ name = "vortex-buffer"
 version = "0.1.0"
 dependencies = [
  "arrow-buffer",
+ "bitvec",
  "bytes",
+ "cudarc",
  "itertools",
  "num-traits",
  "simdutf8",
@@ -2263,7 +2260,6 @@ dependencies = [
 name = "vortex-bytebool"
 version = "0.1.0"
 dependencies = [
- "arrow-buffer",
  "num-traits",
  "vortex-array",
  "vortex-buffer",
@@ -2274,21 +2270,25 @@ dependencies = [
 ]
 
 [[package]]
-name = "vortex-datetime-parts"
+name = "vortex-compute"
 version = "0.1.0"
 dependencies = [
+ "arrow-array",
+ "arrow-buffer",
+ "arrow-schema",
+ "log",
+ "multiversion",
  "num-traits",
- "prost",
- "vortex-array",
+ "paste",
  "vortex-buffer",
  "vortex-dtype",
  "vortex-error",
  "vortex-mask",
- "vortex-scalar",
+ "vortex-vector",
 ]
 
 [[package]]
-name = "vortex-decimal-byte-parts"
+name = "vortex-datetime-parts"
 version = "0.1.0"
 dependencies = [
  "num-traits",
@@ -2302,27 +2302,24 @@ dependencies = [
 ]
 
 [[package]]
-name = "vortex-dict"
+name = "vortex-decimal-byte-parts"
 version = "0.1.0"
 dependencies = [
- "arrow-array",
- "arrow-buffer",
  "num-traits",
  "prost",
- "rustc-hash",
  "vortex-array",
  "vortex-buffer",
  "vortex-dtype",
  "vortex-error",
  "vortex-mask",
  "vortex-scalar",
- "vortex-utils",
 ]
 
 [[package]]
 name = "vortex-dtype"
 version = "0.1.0"
 dependencies = [
+ "arrow-buffer",
  "arrow-schema",
  "flatbuffers",
  "half",
@@ -2352,29 +2349,6 @@ dependencies = [
  "url",
 ]
 
-[[package]]
-name = "vortex-expr"
-version = "0.1.0"
-dependencies = [
- "arcref",
- "async-trait",
- "dyn-hash",
- "futures",
- "itertools",
- "parking_lot",
- "paste",
- "prost",
- "termtree",
- "vortex-array",
- "vortex-buffer",
- "vortex-dtype",
- "vortex-error",
- "vortex-mask",
- "vortex-proto",
- "vortex-scalar",
- "vortex-utils",
-]
-
 [[package]]
 name = "vortex-fastlanes"
 version = "0.1.0"
@@ -2387,13 +2361,16 @@ dependencies = [
  "log",
  "num-traits",
  "prost",
+ "static_assertions",
  "vortex-array",
  "vortex-buffer",
+ "vortex-compute",
  "vortex-dtype",
  "vortex-error",
  "vortex-mask",
  "vortex-scalar",
  "vortex-utils",
+ "vortex-vector",
 ]
 
 [[package]]
@@ -2417,6 +2394,7 @@ dependencies = [
  "vortex-error",
  "vortex-mask",
  "vortex-scalar",
+ "vortex-vector",
 ]
 
 [[package]]
@@ -2424,6 +2402,7 @@ name = "vortex-io"
 version = "0.1.0"
 dependencies = [
  "async-compat",
+ "async-fs",
  "async-stream",
  "async-trait",
  "bytes",
@@ -2442,6 +2421,7 @@ dependencies = [
  "vortex-buffer",
  "vortex-error",
  "vortex-metrics",
+ "vortex-session",
  "wasm-bindgen-futures",
 ]
 
@@ -2471,7 +2451,6 @@ dependencies = [
  "async-trait",
  "flatbuffers",
  "futures",
- "getrandom 0.3.3",
  "itertools",
  "kanal",
  "log",
@@ -2484,16 +2463,14 @@ dependencies = [
  "pin-project-lite",
  "prost",
  "rustc-hash",
- "tracing",
+ "termtree",
  "uuid",
  "vortex-array",
  "vortex-btrblocks",
  "vortex-buffer",
  "vortex-decimal-byte-parts",
- "vortex-dict",
  "vortex-dtype",
  "vortex-error",
- "vortex-expr",
  "vortex-flatbuffers",
  "vortex-io",
  "vortex-mask",
@@ -2501,6 +2478,7 @@ dependencies = [
  "vortex-pco",
  "vortex-scalar",
  "vortex-sequence",
+ "vortex-session",
  "vortex-utils",
 ]
 
@@ -2508,8 +2486,8 @@ dependencies = [
 name = "vortex-mask"
 version = "0.1.0"
 dependencies = [
- "arrow-buffer",
  "itertools",
+ "vortex-buffer",
  "vortex-error",
 ]
 
@@ -2519,6 +2497,7 @@ version = "0.1.0"
 dependencies = [
  "getrandom 0.3.3",
  "parking_lot",
+ "vortex-session",
  "witchcraft-metrics",
 ]
 
@@ -2526,14 +2505,17 @@ dependencies = [
 name = "vortex-pco"
 version = "0.1.0"
 dependencies = [
+ "itertools",
  "pco",
  "prost",
  "vortex-array",
  "vortex-buffer",
+ "vortex-compute",
  "vortex-dtype",
  "vortex-error",
  "vortex-mask",
  "vortex-scalar",
+ "vortex-vector",
 ]
 
 [[package]]
@@ -2566,7 +2548,6 @@ name = "vortex-scalar"
 version = "0.1.0"
 dependencies = [
  "arrow-array",
- "arrow-buffer",
  "bytes",
  "itertools",
  "num-traits",
@@ -2575,8 +2556,10 @@ dependencies = [
  "vortex-buffer",
  "vortex-dtype",
  "vortex-error",
+ "vortex-mask",
  "vortex-proto",
  "vortex-utils",
+ "vortex-vector",
 ]
 
 [[package]]
@@ -2586,8 +2569,6 @@ dependencies = [
  "arrow-array",
  "arrow-schema",
  "bit-vec",
- "crossbeam-deque",
- "crossbeam-queue",
  "futures",
  "itertools",
  "log",
@@ -2597,11 +2578,11 @@ dependencies = [
  "vortex-buffer",
  "vortex-dtype",
  "vortex-error",
- "vortex-expr",
  "vortex-io",
  "vortex-layout",
  "vortex-mask",
  "vortex-metrics",
+ "vortex-session",
 ]
 
 [[package]]
@@ -2618,6 +2599,16 @@ dependencies = [
  "vortex-mask",
  "vortex-proto",
  "vortex-scalar",
+ "vortex-vector",
+]
+
+[[package]]
+name = "vortex-session"
+version = "0.1.0"
+dependencies = [
+ "dashmap",
+ "vortex-error",
+ "vortex-utils",
 ]
 
 [[package]]
@@ -2633,6 +2624,7 @@ dependencies = [
  "vortex-error",
  "vortex-mask",
  "vortex-scalar",
+ "vortex-vector",
 ]
 
 [[package]]
@@ -2643,10 +2635,23 @@ dependencies = [
  "hashbrown 0.16.0",
 ]
 
+[[package]]
+name = "vortex-vector"
+version = "0.1.0"
+dependencies = [
+ "paste",
+ "static_assertions",
+ "vortex-buffer",
+ "vortex-dtype",
+ "vortex-error",
+ "vortex-mask",
+]
+
 [[package]]
 name = "vortex-zigzag"
 version = "0.1.0"
 dependencies = [
+ "itertools",
  "vortex-array",
  "vortex-buffer",
  "vortex-dtype",
@@ -2656,6 +2661,16 @@ dependencies = [
  "zigzag",
 ]
 
+[[package]]
+name = "walkdir"
+version = "2.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "29790946404f91d9c5d06f9874efddea1dc06c5efe94541a7d6863108e3a5e4b"
+dependencies = [
+ "same-file",
+ "winapi-util",
+]
+
 [[package]]
 name = "wasi"
 version = "0.11.1+wasi-snapshot-preview1"
@@ -2682,9 +2697,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen"
-version = "0.2.104"
+version = "0.2.105"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c1da10c01ae9f1ae40cbfac0bac3b1e724b320abfcf52229f80b547c0d250e2d"
+checksum = "da95793dfc411fbbd93f5be7715b0578ec61fe87cb1a42b12eb625caa5c5ea60"
 dependencies = [
  "cfg-if",
  "once_cell",
@@ -2693,25 +2708,11 @@ dependencies = [
  "wasm-bindgen-shared",
 ]
 
-[[package]]
-name = "wasm-bindgen-backend"
-version = "0.2.104"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "671c9a5a66f49d8a47345ab942e2cb93c7d1d0339065d4f8139c486121b43b19"
-dependencies = [
- "bumpalo",
- "log",
- "proc-macro2",
- "quote",
- "syn 2.0.106",
- "wasm-bindgen-shared",
-]
-
 [[package]]
 name = "wasm-bindgen-futures"
-version = "0.4.54"
+version = "0.4.55"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7e038d41e478cc73bae0ff9b36c60cff1c98b8f38f8d7e8061e79ee63608ac5c"
+checksum = "551f88106c6d5e7ccc7cd9a16f312dd3b5d36ea8b4954304657d5dfba115d4a0"
 dependencies = [
  "cfg-if",
  "js-sys",
@@ -2722,9 +2723,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-macro"
-version = "0.2.104"
+version = "0.2.105"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7ca60477e4c59f5f2986c50191cd972e3a50d8a95603bc9434501cf156a9a119"
+checksum = "04264334509e04a7bf8690f2384ef5265f05143a4bff3889ab7a3269adab59c2"
 dependencies = [
  "quote",
  "wasm-bindgen-macro-support",
@@ -2732,43 +2733,79 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-macro-support"
-version = "0.2.104"
+version = "0.2.105"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9f07d2f20d4da7b26400c9f4a0511e6e0345b040694e8a75bd41d578fa4421d7"
+checksum = "420bc339d9f322e562942d52e115d57e950d12d88983a14c79b86859ee6c7ebc"
 dependencies = [
+ "bumpalo",
  "proc-macro2",
  "quote",
  "syn 2.0.106",
- "wasm-bindgen-backend",
  "wasm-bindgen-shared",
 ]
 
 [[package]]
 name = "wasm-bindgen-shared"
-version = "0.2.104"
+version = "0.2.105"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bad67dc8b2a1a6e5448428adec4c3e84c43e561d8c9ee8a9e5aabeb193ec41d1"
+checksum = "76f218a38c84bcb33c25ec7059b07847d465ce0e0a76b995e134a45adcb6af76"
 dependencies = [
  "unicode-ident",
 ]
 
+[[package]]
+name = "wasm-bindgen-test"
+version = "0.3.55"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bfc379bfb624eb59050b509c13e77b4eb53150c350db69628141abce842f2373"
+dependencies = [
+ "js-sys",
+ "minicov",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "wasm-bindgen-test-macro",
+]
+
+[[package]]
+name = "wasm-bindgen-test-macro"
+version = "0.3.55"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "085b2df989e1e6f9620c1311df6c996e83fe16f57792b272ce1e024ac16a90f1"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.106",
+]
+
 [[package]]
 name = "wasm-test"
 version = "0.0.1"
 dependencies = [
  "vortex",
+ "wasm-bindgen",
+ "wasm-bindgen-test",
+ "web-sys",
 ]
 
 [[package]]
 name = "web-sys"
-version = "0.3.81"
+version = "0.3.82"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9367c417a924a74cae129e6a2ae3b47fabb1f8995595ab474029da749a8be120"
+checksum = "3a1f95c0d03a47f4ae1f7a64643a6bb97465d9b740f0fa8f90ea33915c99a9a1"
 dependencies = [
  "js-sys",
  "wasm-bindgen",
 ]
 
+[[package]]
+name = "winapi-util"
+version = "0.1.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c2a7b1c03c876122aa43f3020e6c3c3ee5c05081c9a00739faf7503aeba10d22"
+dependencies = [
+ "windows-sys 0.61.2",
+]
+
 [[package]]
 name = "windows-core"
 version = "0.62.2"
diff --git a/wasm-test/Cargo.toml b/wasm-test/Cargo.toml
index b6494bf0e2c..1b3802986e0 100644
--- a/wasm-test/Cargo.toml
+++ b/wasm-test/Cargo.toml
@@ -1,16 +1,27 @@
 [package]
 name = "wasm-test"
-description = "Small integration smoketest for wasm32-unknown-unknown target support"
+description = "Integration smoketest for WASM target support (wasm32-unknown-unknown and wasm32-wasip1)"
 repository = "https://github.com/spiraldb/vortex"
 authors = ["Vortex Authors <hello@vortex.dev>"]
 license = "Apache-2.0"
 version = "0.0.1"
 publish = false
 edition = "2024"
-rust-version = "1.86"
 
-#[lib]
-#crate-type = ["cdylib"]
+[lib]
+crate-type = ["cdylib"]
+
+[[bin]]
+name = "wasm-test"
+path = "src/main.rs"
 
 [dependencies]
 vortex = { path = "../vortex", default-features = false }
+wasm-bindgen = "0.2"
+
+[dependencies.web-sys]
+features = ["console"]
+version = "0.3"
+
+[dev-dependencies]
+wasm-bindgen-test = "0.3"
diff --git a/wasm-test/README.md b/wasm-test/README.md
new file mode 100644
index 00000000000..4fbfd539dc1
--- /dev/null
+++ b/wasm-test/README.md
@@ -0,0 +1,96 @@
+# Vortex WASM Test
+
+Integration test for Vortex library compiled to WebAssembly.
+
+## Building
+
+### Prerequisites
+
+1. Install the WASM target:
+
+```bash
+rustup target add wasm32-unknown-unknown
+```
+
+2. Install wasm-pack:
+
+```bash
+cargo install wasm-pack
+```
+
+### Build Steps
+
+1. Navigate to the wasm-test directory:
+
+```bash
+cd wasm-test
+```
+
+2. Build for web:
+
+```bash
+wasm-pack build --target web
+```
+
+This creates the `pkg/` directory with JS bindings automatically.
+
+## Testing
+
+### In Browser
+
+1. Start a local web server (required for WASM loading):
+
+Using Python:
+
+```bash
+python3 -m http.server 8000
+```
+
+2. Open your browser to `http://localhost:8000`
+
+3. Click the test buttons:
+   - **Test Basic Function** - Tests simple `add()` function.
+   - **Get Version** - Gets version string.
+   - **Test Vortex Arrays** - Tests PrimitiveArray, compute operations, and encodings.
+   - **Test Compression** - Tests BtrBlocksCompressor compression.
+   - **Test Array Types** - Tests different array types (ConstantArray, StructArray, etc.).
+   - **Test Compute Operations** - Tests comparison operations (>, >=, ==).
+
+Console output from the WASM module will be displayed in the output area.
+
+### Headless Tests (wasm-bindgen)
+
+Run wasm-bindgen tests in headless Chrome:
+
+```bash
+wasm-pack test --headless --chrome
+```
+
+Or Firefox:
+
+```bash
+wasm-pack test --headless --firefox
+```
+
+### WASI Tests (Wasmer)
+
+1. Install the WASI target and Wasmer:
+
+```bash
+rustup target add wasm32-wasip1
+curl https://get.wasmer.io -sSfL | sh
+```
+
+2. Build and run:
+
+```bash
+cargo build --target wasm32-wasip1
+wasmer run ./target/wasm32-wasip1/debug/wasm-test.wasm
+```
+
+## Project Structure
+
+- `src/lib.rs` - WASM library with wasm-bindgen exports.
+- `src/main.rs` - WASI binary for integration testing via Wasmer.
+- `index.html` - Browser test page.
+- `pkg/` - Generated JS bindings (created by wasm-pack).
diff --git a/wasm-test/index.html b/wasm-test/index.html
new file mode 100644
index 00000000000..04d11fc4888
--- /dev/null
+++ b/wasm-test/index.html
@@ -0,0 +1,182 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Vortex WASM Test</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 800px;
+            margin: 50px auto;
+            padding: 20px;
+        }
+        button {
+            padding: 10px 20px;
+            font-size: 16px;
+            margin: 10px 5px;
+            cursor: pointer;
+        }
+        #output {
+            border: 1px solid #ccc;
+            padding: 15px;
+            margin-top: 20px;
+            background-color: #f5f5f5;
+            min-height: 100px;
+            white-space: pre-wrap;
+        }
+        .status {
+            padding: 10px;
+            margin: 10px 0;
+            border-radius: 4px;
+        }
+        .success {
+            background-color: #d4edda;
+            color: #155724;
+        }
+        .error {
+            background-color: #f8d7da;
+            color: #721c24;
+        }
+    </style>
+</head>
+<body>
+    <h1>Vortex WASM Test</h1>
+    <p>Test the Vortex library compiled to WebAssembly.</p>
+
+    <div>
+        <button onclick="testBasic()">Test Basic Function (add)</button>
+        <button onclick="testVersion()">Get Version</button>
+        <button onclick="testVortex()">Test Vortex Arrays</button>
+        <button onclick="testCompression()">Test Compression</button>
+        <button onclick="testArrayTypes()">Test Array Types</button>
+        <button onclick="testComputeOps()">Test Compute Operations</button>
+    </div>
+
+    <div id="status"></div>
+    <div id="output"></div>
+
+    <script type="module">
+        import init, { add, get_version, VortexBenchmark } from './pkg/wasm_test.js';
+
+        let wasm;
+        let output = document.getElementById('output');
+        let status = document.getElementById('status');
+
+        // Initialize WASM module.
+        async function loadWasm() {
+            try {
+                wasm = await init();
+                showStatus('WASM module loaded successfully!', 'success');
+            } catch (error) {
+                showStatus('Error loading WASM: ' + error, 'error');
+            }
+        }
+
+        function showStatus(message, type) {
+            status.innerHTML = `<div class="status ${type}">${message}</div>`;
+        }
+
+        function appendOutput(text) {
+            output.innerHTML += text + '\n';
+        }
+
+        function clearOutput() {
+            output.innerHTML = '';
+        }
+
+        // Export functions to window for button onclick.
+        window.testBasic = function() {
+            clearOutput();
+            try {
+                const result = add(5, 7);
+                appendOutput('Testing basic function: add(5, 7)');
+                appendOutput('Result: ' + result);
+                showStatus('Basic test passed!', 'success');
+            } catch (error) {
+                appendOutput('Error: ' + error);
+                showStatus('Basic test failed!', 'error');
+            }
+        };
+
+        window.testVersion = function() {
+            clearOutput();
+            try {
+                const version = get_version();
+                appendOutput('Version: ' + version);
+                showStatus('Version retrieved successfully!', 'success');
+            } catch (error) {
+                appendOutput('Error: ' + error);
+                showStatus('Failed to get version!', 'error');
+            }
+        };
+
+        window.testVortex = function() {
+            clearOutput();
+            appendOutput('Testing Vortex arrays...');
+            try {
+                const benchmark = new VortexBenchmark(1000);
+                appendOutput('Created VortexBenchmark with size: ' + benchmark.get_size());
+
+                benchmark.test_vortex();
+                appendOutput('Vortex test completed successfully!');
+                showStatus('Vortex test passed!', 'success');
+            } catch (error) {
+                appendOutput('Error: ' + error);
+                showStatus('Vortex test failed!', 'error');
+            }
+        };
+
+        window.testCompression = function() {
+            clearOutput();
+            appendOutput('Testing compression...');
+            try {
+                const benchmark = new VortexBenchmark(1024);
+                benchmark.test_compression();
+                appendOutput('Compression test completed successfully!');
+                showStatus('Compression test passed!', 'success');
+            } catch (error) {
+                appendOutput('Error: ' + error);
+                showStatus('Compression test failed!', 'error');
+            }
+        };
+
+        window.testArrayTypes = function() {
+            clearOutput();
+            appendOutput('Testing different array types...');
+            try {
+                const benchmark = new VortexBenchmark(100);
+                benchmark.test_array_types();
+                appendOutput('Array types test completed successfully!');
+                showStatus('Array types test passed!', 'success');
+            } catch (error) {
+                appendOutput('Error: ' + error);
+                showStatus('Array types test failed!', 'error');
+            }
+        };
+
+        window.testComputeOps = function() {
+            clearOutput();
+            appendOutput('Testing compute operations...');
+            try {
+                const benchmark = new VortexBenchmark(100);
+                benchmark.test_compute_ops();
+                appendOutput('Compute operations test completed successfully!');
+                showStatus('Compute operations test passed!', 'success');
+            } catch (error) {
+                appendOutput('Error: ' + error);
+                showStatus('Compute operations test failed!', 'error');
+            }
+        };
+
+        // Capture console.log from WASM.
+        const originalLog = console.log;
+        console.log = function(...args) {
+            originalLog.apply(console, args);
+            appendOutput('> ' + args.join(' '));
+        };
+
+        // Load WASM on page load.
+        loadWasm();
+    </script>
+</body>
+</html>
diff --git a/wasm-test/src/lib.rs b/wasm-test/src/lib.rs
new file mode 100644
index 00000000000..f457f8708ff
--- /dev/null
+++ b/wasm-test/src/lib.rs
@@ -0,0 +1,288 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: Copyright the Vortex contributors
+
+use wasm_bindgen::prelude::*;
+
+// Helper macro for logging to browser console.
+macro_rules! log {
+    ($($t:tt)*) => {
+        web_sys::console::log_1(&format!($($t)*).into());
+    }
+}
+
+#[wasm_bindgen]
+pub struct VortexBenchmark {
+    size: usize,
+}
+
+#[wasm_bindgen]
+impl VortexBenchmark {
+    /// Create a new benchmark instance.
+    #[wasm_bindgen(constructor)]
+    pub fn new(size: usize) -> VortexBenchmark {
+        VortexBenchmark { size }
+    }
+
+    /// Test Vortex arrays to ensure the library is linked.
+    pub fn test_vortex(&self) -> Result<(), JsValue> {
+        use vortex::arrays::PrimitiveArray;
+        use vortex::buffer::Buffer;
+        use vortex::validity::Validity;
+
+        // Create a simple integer array.
+        let data: Vec<i32> = (0..self.size as i32).collect();
+        let buffer = Buffer::from(data);
+        let _array = PrimitiveArray::new(buffer, Validity::NonNullable);
+
+        log!("Created Vortex PrimitiveArray with {} elements", self.size);
+
+        // Test compute functions.
+        use vortex::IntoArray;
+        use vortex::arrays::ConstantArray;
+        use vortex::compute::{Operator, compare, take};
+        use vortex::scalar::Scalar;
+
+        let data: Vec<i32> = vec![1, 2, 3, 4, 5];
+        let buffer = Buffer::from(data.clone());
+        let array = PrimitiveArray::new(buffer, Validity::NonNullable).into_array();
+
+        // Create a constant array for comparison.
+        let threshold_array = ConstantArray::new(Scalar::from(3i32), 5).into_array();
+        let _comparison = compare(&array, &threshold_array, Operator::Gt)
+            .map_err(|e| JsValue::from_str(&e.to_string()))?;
+
+        // Test take operation.
+        let indices: Vec<u64> = vec![0, 2, 4];
+        let indices_buffer = Buffer::from(indices);
+        let indices_array = PrimitiveArray::new(indices_buffer, Validity::NonNullable).into_array();
+        let _taken = take(&array, &indices_array).map_err(|e| JsValue::from_str(&e.to_string()))?;
+
+        log!("Tested Vortex compute operations");
+
+        // Test various encodings exist.
+        use vortex::encodings;
+        let _ = std::mem::size_of::<encodings::alp::ALPArray>();
+        let _ = std::mem::size_of::<encodings::fastlanes::BitPackedArray>();
+        let _ = std::mem::size_of::<encodings::runend::RunEndArray>();
+        let _ = std::mem::size_of::<encodings::zigzag::ZigZagArray>();
+
+        log!("Verified Vortex encodings are included");
+
+        Ok(())
+    }
+
+    /// Test compression and decompression.
+    pub fn test_compression(&self) -> Result<(), JsValue> {
+        use vortex::Array;
+        use vortex::arrays::PrimitiveArray;
+        use vortex::buffer::buffer;
+        use vortex::compressor::BtrBlocksCompressor;
+        use vortex::validity::Validity;
+
+        log!("Testing compression with BtrBlocksCompressor...");
+
+        // Create an array with repeated values (good for compression).
+        let array = PrimitiveArray::new(buffer![1i32; 1024], Validity::AllValid).to_array();
+        let original_len = array.len();
+
+        // Compress the array.
+        let compressed = BtrBlocksCompressor::default()
+            .compress(&array)
+            .map_err(|e| JsValue::from_str(&e.to_string()))?;
+
+        log!(
+            "Compressed array from {} to {} elements",
+            original_len,
+            compressed.len()
+        );
+
+        Ok(())
+    }
+
+    /// Test different array types.
+    pub fn test_array_types(&self) -> Result<(), JsValue> {
+        use vortex::IntoArray;
+        use vortex::arrays::{ConstantArray, PrimitiveArray, StructArray};
+        use vortex::buffer::Buffer;
+        use vortex::scalar::Scalar;
+        use vortex::validity::Validity;
+
+        log!("Testing different array types...");
+
+        // Test ConstantArray.
+        let _const_array = ConstantArray::new(Scalar::from(42i32), 100);
+        log!("Created ConstantArray with 100 elements of value 42");
+
+        // Test StructArray.
+        let field1 = PrimitiveArray::new(Buffer::from(vec![1i32, 2, 3]), Validity::NonNullable);
+        let field2 = PrimitiveArray::new(Buffer::from(vec![4i32, 5, 6]), Validity::NonNullable);
+
+        let _struct_array =
+            StructArray::from_fields(&[("a", field1.into_array()), ("b", field2.into_array())])
+                .map_err(|e| JsValue::from_str(&e.to_string()))?;
+        log!("Created StructArray with 2 fields");
+
+        // Test PrimitiveArray with different types.
+        let _int_array =
+            PrimitiveArray::new(Buffer::from(vec![1i64, 2, 3, 4]), Validity::NonNullable);
+        let _float_array =
+            PrimitiveArray::new(Buffer::from(vec![1.0f64, 2.0, 3.0]), Validity::NonNullable);
+        log!("Created PrimitiveArrays with different numeric types");
+
+        Ok(())
+    }
+
+    /// Test more compute operations.
+    pub fn test_compute_ops(&self) -> Result<(), JsValue> {
+        use vortex::IntoArray;
+        use vortex::arrays::{ConstantArray, PrimitiveArray};
+        use vortex::buffer::Buffer;
+        use vortex::compute::{Operator, compare};
+        use vortex::scalar::Scalar;
+        use vortex::validity::Validity;
+
+        log!("Testing additional compute operations...");
+
+        let data: Vec<i32> = vec![10, 20, 30, 40, 50];
+        let buffer = Buffer::from(data);
+        let array = PrimitiveArray::new(buffer, Validity::NonNullable).into_array();
+
+        // Test comparison operations with a scalar converted to array.
+        let scalar_array = ConstantArray::new(Scalar::from(25i32), 5).into_array();
+        let _gt_result = compare(&array, &scalar_array, Operator::Gt)
+            .map_err(|e| JsValue::from_str(&e.to_string()))?;
+        log!("Compared array elements > 25");
+
+        // Test comparison with another array.
+        let threshold_array = ConstantArray::new(Scalar::from(30i32), 5).into_array();
+        let _comparison = compare(&array, &threshold_array, Operator::Gte)
+            .map_err(|e| JsValue::from_str(&e.to_string()))?;
+        log!("Compared array elements >= 30");
+
+        // Test equality comparison.
+        let eq_array = ConstantArray::new(Scalar::from(30i32), 5).into_array();
+        let _eq_result = compare(&array, &eq_array, Operator::Eq)
+            .map_err(|e| JsValue::from_str(&e.to_string()))?;
+        log!("Compared array elements == 30");
+
+        Ok(())
+    }
+
+    /// Get size info.
+    pub fn get_size(&self) -> usize {
+        self.size
+    }
+}
+
+/// Initialize the WASM module.
+#[wasm_bindgen(start)]
+pub fn init() {
+    log!("Vortex WASM module initialized");
+}
+
+/// Get version information.
+#[wasm_bindgen]
+pub fn get_version() -> String {
+    format!("vortex-wasm-test v{}", env!("CARGO_PKG_VERSION"))
+}
+
+/// A simple test function to verify WASM is working.
+#[wasm_bindgen]
+pub fn add(a: i32, b: i32) -> i32 {
+    a + b
+}
+
+#[cfg(test)]
+mod tests {
+    use wasm_bindgen_test::*;
+
+    wasm_bindgen_test_configure!(run_in_browser);
+
+    use vortex::Array;
+    use vortex::IntoArray;
+    use vortex::arrays::{ConstantArray, PrimitiveArray, StructArray};
+    use vortex::buffer::{Buffer, buffer};
+    use vortex::compressor::BtrBlocksCompressor;
+    use vortex::compute::{Operator, compare, take};
+    use vortex::scalar::Scalar;
+    use vortex::validity::Validity;
+
+    #[wasm_bindgen_test]
+    fn test_primitive_array() {
+        let data: Vec<i32> = (0..1000).collect();
+        let buffer = Buffer::from(data);
+        let array = PrimitiveArray::new(buffer, Validity::NonNullable);
+        assert_eq!(array.len(), 1000);
+    }
+
+    #[wasm_bindgen_test]
+    fn test_compute_operations() {
+        let data: Vec<i32> = vec![1, 2, 3, 4, 5];
+        let buffer = Buffer::from(data);
+        let array = PrimitiveArray::new(buffer, Validity::NonNullable).into_array();
+
+        // Test comparison.
+        let threshold_array = ConstantArray::new(Scalar::from(3i32), 5).into_array();
+        let comparison = compare(&array, &threshold_array, Operator::Gt).expect("compare failed");
+        assert_eq!(comparison.len(), 5);
+
+        // Test take.
+        let indices: Vec<u64> = vec![0, 2, 4];
+        let indices_buffer = Buffer::from(indices);
+        let indices_array =
+            PrimitiveArray::new(indices_buffer, Validity::NonNullable).into_array();
+        let taken = take(&array, &indices_array).expect("take failed");
+        assert_eq!(taken.len(), 3);
+    }
+
+    #[wasm_bindgen_test]
+    fn test_encodings() {
+        use vortex::encodings;
+
+        // Verify encodings are linked by checking their sizes.
+        let alp_size = std::mem::size_of::<encodings::alp::ALPArray>();
+        let bitpacked_size = std::mem::size_of::<encodings::fastlanes::BitPackedArray>();
+        let runend_size = std::mem::size_of::<encodings::runend::RunEndArray>();
+        let zigzag_size = std::mem::size_of::<encodings::zigzag::ZigZagArray>();
+
+        assert!(alp_size > 0);
+        assert!(bitpacked_size > 0);
+        assert!(runend_size > 0);
+        assert!(zigzag_size > 0);
+    }
+
+    #[wasm_bindgen_test]
+    fn test_compression() {
+        let array = PrimitiveArray::new(buffer![1i32; 1024], Validity::AllValid).to_array();
+        let original_len = array.len();
+
+        let compressed = BtrBlocksCompressor::default()
+            .compress(&array)
+            .expect("compression failed");
+
+        assert_eq!(compressed.len(), original_len);
+    }
+
+    #[wasm_bindgen_test]
+    fn test_array_types() {
+        // ConstantArray.
+        let const_array = ConstantArray::new(Scalar::from(42i32), 100);
+        assert_eq!(const_array.len(), 100);
+
+        // StructArray.
+        let field1 = PrimitiveArray::new(Buffer::from(vec![1i32, 2, 3]), Validity::NonNullable);
+        let field2 = PrimitiveArray::new(Buffer::from(vec![4i32, 5, 6]), Validity::NonNullable);
+        let struct_array =
+            StructArray::from_fields(&[("a", field1.into_array()), ("b", field2.into_array())])
+                .expect("StructArray creation failed");
+        assert_eq!(struct_array.len(), 3);
+
+        // Different numeric types.
+        let int_array =
+            PrimitiveArray::new(Buffer::from(vec![1i64, 2, 3, 4]), Validity::NonNullable);
+        let float_array =
+            PrimitiveArray::new(Buffer::from(vec![1.0f64, 2.0, 3.0]), Validity::NonNullable);
+        assert_eq!(int_array.len(), 4);
+        assert_eq!(float_array.len(), 3);
+    }
+}
diff --git a/wasm-test/src/main.rs b/wasm-test/src/main.rs
index 8be0ac82570..015f3ab3df4 100644
--- a/wasm-test/src/main.rs
+++ b/wasm-test/src/main.rs
@@ -1,19 +1,129 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: Copyright the Vortex contributors
 
-use vortex::array::arrays::PrimitiveArray;
-use vortex::array::validity::Validity;
-use vortex::array::Array;
+//! WASI integration test for Vortex.
+//!
+//! This binary is compiled to `wasm32-wasip1` and executed via Wasmer to verify that Vortex works
+//! correctly in a WASI environment.
+
+use vortex::Array;
+use vortex::IntoArray;
+use vortex::arrays::ConstantArray;
+use vortex::arrays::PrimitiveArray;
+use vortex::arrays::StructArray;
+use vortex::buffer::Buffer;
 use vortex::buffer::buffer;
 use vortex::compressor::BtrBlocksCompressor;
+use vortex::compute::Operator;
+use vortex::compute::compare;
+use vortex::compute::take;
+use vortex::scalar::Scalar;
+use vortex::validity::Validity;
+
+fn main() {
+    println!("Running Vortex WASI integration tests...\n");
+
+    test_primitive_array();
+    test_compute_operations();
+    test_encodings();
+    test_compression();
+    test_array_types();
+
+    println!("\nAll WASI integration tests passed!");
+}
+
+fn test_primitive_array() {
+    println!("Testing PrimitiveArray creation...");
+
+    let data: Vec<i32> = (0..1000).collect();
+    let buffer = Buffer::from(data);
+    let array = PrimitiveArray::new(buffer, Validity::NonNullable);
+
+    assert_eq!(array.len(), 1000);
+    println!("  Created PrimitiveArray with {} elements", array.len());
+}
+
+fn test_compute_operations() {
+    println!("Testing compute operations...");
+
+    let data: Vec<i32> = vec![1, 2, 3, 4, 5];
+    let buffer = Buffer::from(data);
+    let array = PrimitiveArray::new(buffer, Validity::NonNullable).into_array();
+
+    // Test comparison.
+    let threshold_array = ConstantArray::new(Scalar::from(3i32), 5).into_array();
+    let comparison = compare(&array, &threshold_array, Operator::Gt).expect("compare failed");
+    assert_eq!(comparison.len(), 5);
+    println!("  Comparison operation succeeded");
+
+    // Test take.
+    let indices: Vec<u64> = vec![0, 2, 4];
+    let indices_buffer = Buffer::from(indices);
+    let indices_array = PrimitiveArray::new(indices_buffer, Validity::NonNullable).into_array();
+    let taken = take(&array, &indices_array).expect("take failed");
+    assert_eq!(taken.len(), 3);
+    println!("  Take operation succeeded");
+}
+
+fn test_encodings() {
+    println!("Testing encoding types...");
+
+    use vortex::encodings;
+
+    // Verify encodings are linked by checking their sizes.
+    let alp_size = std::mem::size_of::<encodings::alp::ALPArray>();
+    let bitpacked_size = std::mem::size_of::<encodings::fastlanes::BitPackedArray>();
+    let runend_size = std::mem::size_of::<encodings::runend::RunEndArray>();
+    let zigzag_size = std::mem::size_of::<encodings::zigzag::ZigZagArray>();
+
+    assert!(alp_size > 0);
+    assert!(bitpacked_size > 0);
+    assert!(runend_size > 0);
+    assert!(zigzag_size > 0);
+
+    println!("  ALP, BitPacked, RunEnd, ZigZag encodings are linked");
+}
 
-//use wasm_bindgen::prelude::*;
+fn test_compression() {
+    println!("Testing compression...");
 
-pub fn main() {
-    // Extremely simple test of compression/decompression and a few compute functions.
+    // Create an array with repeated values (good for compression).
     let array = PrimitiveArray::new(buffer![1i32; 1024], Validity::AllValid).to_array();
+    let original_len = array.len();
+
+    let compressed = BtrBlocksCompressor::default()
+        .compress(&array)
+        .expect("compression failed");
+
+    println!(
+        "  Compressed array: {} -> {} elements",
+        original_len,
+        compressed.len()
+    );
+}
+
+fn test_array_types() {
+    println!("Testing array types...");
+
+    // ConstantArray.
+    let const_array = ConstantArray::new(Scalar::from(42i32), 100);
+    assert_eq!(const_array.len(), 100);
+    println!("  ConstantArray created");
+
+    // StructArray.
+    let field1 = PrimitiveArray::new(Buffer::from(vec![1i32, 2, 3]), Validity::NonNullable);
+    let field2 = PrimitiveArray::new(Buffer::from(vec![4i32, 5, 6]), Validity::NonNullable);
+    let struct_array =
+        StructArray::from_fields(&[("a", field1.into_array()), ("b", field2.into_array())])
+            .expect("StructArray creation failed");
+    assert_eq!(struct_array.len(), 3);
+    println!("  StructArray created with 2 fields");
 
-    let compressed = BtrBlocksCompressor::default().compress(&array).unwrap();
-    println!("Compressed size: {}", compressed.len());
-    println!("Tree view: {}", compressed.display_tree());
+    // Different numeric types.
+    let int_array = PrimitiveArray::new(Buffer::from(vec![1i64, 2, 3, 4]), Validity::NonNullable);
+    let float_array =
+        PrimitiveArray::new(Buffer::from(vec![1.0f64, 2.0, 3.0]), Validity::NonNullable);
+    assert_eq!(int_array.len(), 4);
+    assert_eq!(float_array.len(), 3);
+    println!("  PrimitiveArrays with i64 and f64 created");
 }

From 53aea802071d7340338a8a02266aeffae742dd06 Mon Sep 17 00:00:00 2001
From: Connor Tsui <connor.tsui20@gmail.com>
Date: Mon, 1 Dec 2025 15:38:08 -0500
Subject: [PATCH 02/30] add naive vortex append

Signed-off-by: Connor Tsui <connor.tsui20@gmail.com>
---
 vortex-wasm/Cargo.toml               |  40 ++++++++++
 vortex-wasm/src/benchmark_website.rs | 109 +++++++++++++++++++++++++++
 vortex-wasm/src/bin/append.rs        |  70 +++++++++++++++++
 vortex-wasm/src/bin/migrate.rs       | 104 +++++++++++++++++++++++++
 vortex-wasm/src/lib.rs               |   4 +
 5 files changed, 327 insertions(+)
 create mode 100644 vortex-wasm/Cargo.toml
 create mode 100644 vortex-wasm/src/benchmark_website.rs
 create mode 100644 vortex-wasm/src/bin/append.rs
 create mode 100644 vortex-wasm/src/bin/migrate.rs
 create mode 100644 vortex-wasm/src/lib.rs

diff --git a/vortex-wasm/Cargo.toml b/vortex-wasm/Cargo.toml
new file mode 100644
index 00000000000..09de0017784
--- /dev/null
+++ b/vortex-wasm/Cargo.toml
@@ -0,0 +1,40 @@
+[package]
+name = "vortex-wasm"
+description = "WASM bindings for Vortex"
+authors.workspace = true
+categories.workspace = true
+edition.workspace = true
+homepage.workspace = true
+include.workspace = true
+keywords.workspace = true
+license.workspace = true
+readme.workspace = true
+repository.workspace = true
+rust-version.workspace = true
+version.workspace = true
+
+[dependencies]
+async-fs = { workspace = true }
+serde = { workspace = true, features = ["derive"] }
+serde_json = { workspace = true }
+vortex-array = { workspace = true }
+vortex-buffer = { workspace = true }
+vortex-dtype = { workspace = true }
+vortex-error = { workspace = true }
+vortex-file = { workspace = true }
+vortex-io = { workspace = true }
+vortex-layout = { workspace = true }
+vortex-metrics = { workspace = true }
+vortex-scalar = { workspace = true }
+vortex-session = { workspace = true }
+
+[[bin]]
+name = "migrate"
+path = "src/bin/migrate.rs"
+
+[[bin]]
+name = "append"
+path = "src/bin/append.rs"
+
+[lints]
+workspace = true
diff --git a/vortex-wasm/src/benchmark_website.rs b/vortex-wasm/src/benchmark_website.rs
new file mode 100644
index 00000000000..4b3b7d7f551
--- /dev/null
+++ b/vortex-wasm/src/benchmark_website.rs
@@ -0,0 +1,109 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: Copyright the Vortex contributors
+
+//! Utilities for the Vortex benchmark website.
+
+use std::path::Path;
+
+use vortex_array::builders::builder_with_capacity;
+use vortex_array::expr::session::ExprSession;
+use vortex_array::session::ArraySession;
+use vortex_array::stream::ArrayStreamExt;
+use vortex_error::VortexResult;
+use vortex_file::OpenOptionsSessionExt;
+use vortex_file::WriteOptionsSessionExt;
+use vortex_io::runtime::BlockingRuntime;
+use vortex_io::runtime::current::CurrentThreadRuntime;
+use vortex_io::session::RuntimeSession;
+use vortex_io::session::RuntimeSessionExt;
+use vortex_layout::session::LayoutSession;
+use vortex_metrics::VortexMetrics;
+use vortex_scalar::Scalar;
+use vortex_session::VortexSession;
+
+/// Reads a Vortex file and appends a single scalar entry, writing the result back.
+///
+/// This function:
+/// 1. Reads the existing Vortex file (using the scalar's dtype)
+/// 2. Appends the new scalar to the existing data using a builder
+/// 3. Writes the combined data back to the output path
+///
+/// The input and output paths can be the same to overwrite the existing file.
+///
+/// # Arguments
+///
+/// * `input_path` - Path to the existing Vortex file to read.
+/// * `output_path` - Path to write the updated Vortex file (can be same as input).
+/// * `new_entry` - The scalar to append. Its dtype is used for reading/writing the file.
+///
+/// # Returns
+///
+/// The total number of entries in the resulting file.
+pub fn append_entry(
+    input_path: impl AsRef<Path>,
+    output_path: impl AsRef<Path>,
+    new_entry: Scalar,
+) -> VortexResult<usize> {
+    let runtime = CurrentThreadRuntime::new();
+
+    let session = VortexSession::empty()
+        .with::<VortexMetrics>()
+        .with::<ArraySession>()
+        .with::<LayoutSession>()
+        .with::<ExprSession>()
+        .with::<RuntimeSession>()
+        .with_handle(runtime.handle());
+
+    vortex_file::register_default_encodings(&session);
+
+    runtime.block_on(naive_append_entry_async(
+        &session,
+        input_path.as_ref(),
+        output_path.as_ref(),
+        new_entry,
+    ))
+}
+
+/// SUPER NAIVE append to a Vortex file.
+async fn naive_append_entry_async(
+    session: &VortexSession,
+    input_path: &Path,
+    output_path: &Path,
+    new_entry: Scalar,
+) -> VortexResult<usize> {
+    let dtype = new_entry.dtype().clone();
+
+    // Read the existing file.
+    let file = session
+        .open_options()
+        .with_dtype(dtype.clone())
+        .open(input_path)
+        .await?;
+
+    // Read all existing data.
+    let existing_array = file.scan()?.into_array_stream()?.read_all().await?;
+    let existing_len = existing_array.len();
+
+    // Create a builder and extend with existing data, then append the new entry.
+    let total_capacity = existing_len + 1;
+    let mut builder = builder_with_capacity(&dtype, total_capacity);
+
+    // Add existing data.
+    builder.extend_from_array(&existing_array);
+
+    // Append the new entry.
+    builder.append_scalar(&new_entry)?;
+
+    let combined = builder.finish();
+    let total_len = combined.len();
+
+    // Write to output file.
+    let file = async_fs::File::create(output_path).await?;
+
+    let mut writer = session.write_options().writer(file, dtype);
+
+    writer.push(combined).await?;
+    writer.finish().await?;
+
+    Ok(total_len)
+}
diff --git a/vortex-wasm/src/bin/append.rs b/vortex-wasm/src/bin/append.rs
new file mode 100644
index 00000000000..0fc4b1405fb
--- /dev/null
+++ b/vortex-wasm/src/bin/append.rs
@@ -0,0 +1,70 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: Copyright the Vortex contributors
+
+//! Binary to append a single benchmark entry to a Vortex file.
+
+#![allow(clippy::expect_used)]
+
+use std::env;
+
+use vortex_dtype::DType;
+use vortex_dtype::FieldNames;
+use vortex_dtype::Nullability;
+use vortex_dtype::PType;
+use vortex_dtype::StructFields;
+use vortex_scalar::Scalar;
+use vortex_wasm::benchmark_website::append_entry;
+
+/// Returns the expected DType for the benchmark data file.
+///
+/// The schema is a struct with two fields:
+/// - `value`: u64 (non-nullable)
+/// - `commit_id`: utf8 string (non-nullable)
+fn benchmark_dtype() -> DType {
+    DType::Struct(
+        StructFields::new(
+            FieldNames::from(["value", "commit_id"]),
+            vec![
+                DType::Primitive(PType::U64, Nullability::NonNullable),
+                DType::Utf8(Nullability::NonNullable),
+            ],
+        ),
+        Nullability::NonNullable,
+    )
+}
+
+/// Creates a benchmark scalar from a value and commit ID.
+fn benchmark_scalar(value: u64, commit_id: &str) -> Scalar {
+    Scalar::struct_(
+        benchmark_dtype(),
+        vec![
+            Scalar::primitive(value, Nullability::NonNullable),
+            Scalar::utf8(commit_id, Nullability::NonNullable),
+        ],
+    )
+}
+
+fn main() {
+    let args: Vec<String> = env::args().collect();
+
+    if args.len() < 4 {
+        eprintln!("Usage: append_entries <vortex_file> <value> <commit_id>");
+        eprintln!();
+        eprintln!("Appends a single benchmark entry to the Vortex file.");
+        return;
+    }
+
+    let vortex_path = &args[1];
+    let value: u64 = args[2].parse().expect("Failed to parse value as u64");
+    let commit_id = &args[3];
+
+    let scalar = benchmark_scalar(value, commit_id);
+
+    let total = append_entry(vortex_path, vortex_path, scalar)
+        .expect("Failed to append entry to Vortex file");
+
+    println!(
+        "Appended entry (value={}, commit_id={}) to {} (total: {} entries)",
+        value, commit_id, vortex_path, total
+    );
+}
diff --git a/vortex-wasm/src/bin/migrate.rs b/vortex-wasm/src/bin/migrate.rs
new file mode 100644
index 00000000000..58516a8ff66
--- /dev/null
+++ b/vortex-wasm/src/bin/migrate.rs
@@ -0,0 +1,104 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: Copyright the Vortex contributors
+
+#![allow(clippy::expect_used)]
+
+use std::env;
+use std::fs;
+
+use serde::Deserialize;
+use vortex_array::IntoArray;
+use vortex_array::arrays::PrimitiveArray;
+use vortex_array::arrays::StructArray;
+use vortex_array::arrays::VarBinArray;
+use vortex_array::expr::session::ExprSession;
+use vortex_array::session::ArraySession;
+use vortex_array::validity::Validity;
+use vortex_buffer::Buffer;
+use vortex_dtype::DType;
+use vortex_dtype::Nullability;
+use vortex_file::WriteOptionsSessionExt;
+use vortex_io::runtime::BlockingRuntime;
+use vortex_io::runtime::current::CurrentThreadRuntime;
+use vortex_io::session::RuntimeSession;
+use vortex_io::session::RuntimeSessionExt;
+use vortex_layout::session::LayoutSession;
+use vortex_metrics::VortexMetrics;
+use vortex_session::VortexSession;
+
+/// Represents a benchmark entry with value and commit ID.
+#[derive(Debug, Deserialize)]
+struct BenchmarkEntry {
+    value: u64,
+    commit_id: String,
+}
+
+fn main() {
+    let runtime = CurrentThreadRuntime::new();
+
+    let session = VortexSession::empty()
+        .with::<VortexMetrics>()
+        .with::<ArraySession>()
+        .with::<LayoutSession>()
+        .with::<ExprSession>()
+        .with::<RuntimeSession>()
+        .with_handle(runtime.handle());
+
+    vortex_file::register_default_encodings(&session);
+
+    runtime.block_on(async_main(session));
+}
+
+async fn async_main(session: VortexSession) {
+    let args: Vec<String> = env::args().collect();
+    let input_path = args
+        .get(1)
+        .expect("Usage: migrate <input_json> <output_vortex>");
+    let output_path = args
+        .get(2)
+        .expect("Usage: migrate <input_json> <output_vortex>");
+
+    // Parse JSON.
+    let contents = fs::read_to_string(input_path).expect("Failed to read file");
+    let entries: Vec<BenchmarkEntry> =
+        serde_json::from_str(&contents).expect("Failed to parse JSON");
+
+    // Extract values and commit_ids into separate vectors.
+    let values: Vec<u64> = entries.iter().map(|e| e.value).collect();
+    let commit_ids: Vec<&str> = entries.iter().map(|e| e.commit_id.as_str()).collect();
+    let num_entries = entries.len();
+
+    // Create primitive array for values.
+    let values_array = PrimitiveArray::new(Buffer::from(values), Validity::NonNullable);
+
+    // Create VarBin array for commit_ids (UTF8 strings).
+    let commit_ids_array = VarBinArray::from_iter(
+        commit_ids.into_iter().map(Some),
+        DType::Utf8(Nullability::NonNullable),
+    );
+
+    // Create struct array with both fields.
+    let struct_array = StructArray::from_fields(&[
+        ("value", values_array.into_array()),
+        ("commit_id", commit_ids_array.into_array()),
+    ])
+    .expect("Failed to create struct array");
+
+    // Write to Vortex file using push-based API.
+    let file = async_fs::File::create(output_path)
+        .await
+        .expect("Failed to create output file");
+
+    let mut writer = session
+        .write_options()
+        .writer(file, struct_array.dtype().clone());
+
+    writer
+        .push(struct_array.into_array())
+        .await
+        .expect("Failed to push array");
+
+    writer.finish().await.expect("Failed to finish writing");
+
+    println!("Wrote {} entries to {}", num_entries, output_path);
+}
diff --git a/vortex-wasm/src/lib.rs b/vortex-wasm/src/lib.rs
new file mode 100644
index 00000000000..0e5a76b95be
--- /dev/null
+++ b/vortex-wasm/src/lib.rs
@@ -0,0 +1,4 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: Copyright the Vortex contributors
+
+pub mod benchmark_website;

From f631c0db83a4bc6d3e15fcfa7225c1f2afc1eb4c Mon Sep 17 00:00:00 2001
From: Connor Tsui <connor.tsui20@gmail.com>
Date: Mon, 1 Dec 2025 16:59:41 -0500
Subject: [PATCH 03/30] poc rust binary for updating S3

Signed-off-by: Connor Tsui <connor.tsui20@gmail.com>
---
 .github/workflows/bench.yml          |  11 +-
 .github/workflows/sql-benchmarks.yml |   4 +-
 Cargo.lock                           | 542 +++++++++++++++++++++++----
 bench-vortex/Cargo.toml              |   3 +
 bench-vortex/src/bin/s3_cat.rs       | 180 +++++++++
 5 files changed, 670 insertions(+), 70 deletions(-)
 create mode 100644 bench-vortex/src/bin/s3_cat.rs

diff --git a/.github/workflows/bench.yml b/.github/workflows/bench.yml
index 46a0ef0c5bb..73fdacc10ae 100644
--- a/.github/workflows/bench.yml
+++ b/.github/workflows/bench.yml
@@ -18,6 +18,11 @@ jobs:
     timeout-minutes: 120
     steps:
       - uses: actions/checkout@v6
+      - uses: ./.github/actions/setup-rust
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+      - name: Build s3_cat binary
+        run: cargo build --bin s3_cat --package bench-vortex --release
       - name: Setup AWS CLI
         uses: aws-actions/configure-aws-credentials@v5
         with:
@@ -30,7 +35,7 @@ jobs:
 
           sudo apt-get update && sudo apt-get install -y jq
           bash scripts/commit-json.sh > new-commit.json
-          bash scripts/cat-s3.sh vortex-benchmark-results-database commits.json new-commit.json
+          target/release/s3_cat vortex-benchmark-results-database-test commits.json new-commit.json
 
   bench:
     timeout-minutes: 120
@@ -69,7 +74,7 @@ jobs:
           RUSTFLAGS: "-C target-cpu=native -C force-frame-pointers=yes"
         # The main difference between this and `bench-pr.yml` is that we add the `lance` feature.
         run: |
-          cargo build --bin ${{ matrix.benchmark.id }} --package bench-vortex --profile release_debug --features lance
+          cargo build --bin ${{ matrix.benchmark.id }} --bin s3_cat --package bench-vortex --profile release_debug --features lance
 
       - name: Setup Polar Signals
         uses: polarsignals/gh-actions-ps-profiling@v0.6.0
@@ -96,7 +101,7 @@ jobs:
       - name: Upload Benchmark Results
         shell: bash
         run: |
-          bash scripts/cat-s3.sh vortex-benchmark-results-database data.json.gz ${{ matrix.benchmark.id }}.json
+          target/release_debug/s3_cat vortex-benchmark-results-database-test data.json.gz ${{ matrix.benchmark.id }}.json
   sql:
     uses: ./.github/workflows/sql-benchmarks.yml
     secrets: inherit
diff --git a/.github/workflows/sql-benchmarks.yml b/.github/workflows/sql-benchmarks.yml
index 949075339ef..63d574a5c6d 100644
--- a/.github/workflows/sql-benchmarks.yml
+++ b/.github/workflows/sql-benchmarks.yml
@@ -145,7 +145,7 @@ jobs:
         env:
           RUSTFLAGS: "-C target-cpu=native -C force-frame-pointers=yes"
         run: |
-          cargo build --bin query_bench --package bench-vortex --profile release_debug ${{ matrix.build_args }}
+          cargo build --bin query_bench --bin s3_cat --package bench-vortex --profile release_debug ${{ matrix.build_args }}
 
       - name: Generate data
         shell: bash
@@ -265,4 +265,4 @@ jobs:
         if: inputs.mode == 'develop'
         shell: bash
         run: |
-          bash scripts/cat-s3.sh vortex-benchmark-results-database data.json.gz results.json
+          target/release_debug/s3_cat vortex-benchmark-results-database-test data.json.gz results.json
diff --git a/Cargo.lock b/Cargo.lock
index cf5c3a600f7..4b269171394 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -245,7 +245,7 @@ dependencies = [
  "arrow-schema",
  "arrow-select",
  "atoi",
- "base64",
+ "base64 0.22.1",
  "chrono",
  "comfy-table",
  "half",
@@ -680,6 +680,7 @@ dependencies = [
  "aws-credential-types",
  "aws-sigv4",
  "aws-smithy-async",
+ "aws-smithy-eventstream",
  "aws-smithy-http",
  "aws-smithy-runtime",
  "aws-smithy-runtime-api",
@@ -695,6 +696,40 @@ dependencies = [
  "uuid",
 ]
 
+[[package]]
+name = "aws-sdk-s3"
+version = "1.109.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3c6d81b75f8ff78882e70c5909804b44553d56136899fb4015a0a68ecc870e0e"
+dependencies = [
+ "aws-credential-types",
+ "aws-runtime",
+ "aws-sigv4",
+ "aws-smithy-async",
+ "aws-smithy-checksums",
+ "aws-smithy-eventstream",
+ "aws-smithy-http",
+ "aws-smithy-json",
+ "aws-smithy-runtime",
+ "aws-smithy-runtime-api",
+ "aws-smithy-types",
+ "aws-smithy-xml",
+ "aws-types",
+ "bytes",
+ "fastrand",
+ "hex",
+ "hmac",
+ "http 0.2.12",
+ "http 1.3.1",
+ "http-body 0.4.6",
+ "lru",
+ "percent-encoding",
+ "regex-lite",
+ "sha2",
+ "tracing",
+ "url",
+]
+
 [[package]]
 name = "aws-sdk-sso"
 version = "1.86.0"
@@ -769,19 +804,25 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "bffc03068fbb9c8dd5ce1c6fb240678a5cffb86fb2b7b1985c999c4b83c8df68"
 dependencies = [
  "aws-credential-types",
+ "aws-smithy-eventstream",
  "aws-smithy-http",
  "aws-smithy-runtime-api",
  "aws-smithy-types",
  "bytes",
+ "crypto-bigint 0.5.5",
  "form_urlencoded",
  "hex",
  "hmac",
  "http 0.2.12",
  "http 1.3.1",
+ "p256",
  "percent-encoding",
+ "ring",
  "sha2",
+ "subtle",
  "time",
  "tracing",
+ "zeroize",
 ]
 
 [[package]]
@@ -795,12 +836,44 @@ dependencies = [
  "tokio",
 ]
 
+[[package]]
+name = "aws-smithy-checksums"
+version = "0.63.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "165d8583d8d906e2fb5511d29201d447cc710864f075debcdd9c31c265412806"
+dependencies = [
+ "aws-smithy-http",
+ "aws-smithy-types",
+ "bytes",
+ "crc-fast",
+ "hex",
+ "http 0.2.12",
+ "http-body 0.4.6",
+ "md-5",
+ "pin-project-lite",
+ "sha1",
+ "sha2",
+ "tracing",
+]
+
+[[package]]
+name = "aws-smithy-eventstream"
+version = "0.60.12"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9656b85088f8d9dc7ad40f9a6c7228e1e8447cdf4b046c87e152e0805dea02fa"
+dependencies = [
+ "aws-smithy-types",
+ "bytes",
+ "crc32fast",
+]
+
 [[package]]
 name = "aws-smithy-http"
 version = "0.62.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3feafd437c763db26aa04e0cc7591185d0961e64c61885bece0fb9d50ceac671"
 dependencies = [
+ "aws-smithy-eventstream",
  "aws-smithy-runtime-api",
  "aws-smithy-types",
  "bytes",
@@ -824,17 +897,23 @@ dependencies = [
  "aws-smithy-async",
  "aws-smithy-runtime-api",
  "aws-smithy-types",
- "h2",
+ "h2 0.3.27",
+ "h2 0.4.12",
+ "http 0.2.12",
  "http 1.3.1",
- "hyper",
- "hyper-rustls",
+ "http-body 0.4.6",
+ "hyper 0.14.32",
+ "hyper 1.7.0",
+ "hyper-rustls 0.24.2",
+ "hyper-rustls 0.27.7",
  "hyper-util",
  "pin-project-lite",
- "rustls",
- "rustls-native-certs",
+ "rustls 0.21.12",
+ "rustls 0.23.32",
+ "rustls-native-certs 0.8.1",
  "rustls-pki-types",
  "tokio",
- "tokio-rustls",
+ "tokio-rustls 0.26.4",
  "tower",
  "tracing",
 ]
@@ -917,6 +996,7 @@ dependencies = [
  "base64-simd",
  "bytes",
  "bytes-utils",
+ "futures-core",
  "http 0.2.12",
  "http 1.3.1",
  "http-body 0.4.6",
@@ -929,6 +1009,8 @@ dependencies = [
  "ryu",
  "serde",
  "time",
+ "tokio",
+ "tokio-util",
 ]
 
 [[package]]
@@ -965,6 +1047,18 @@ dependencies = [
  "tokio",
 ]
 
+[[package]]
+name = "base16ct"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "349a06037c7bf932dd7e7d1f653678b2038b9ad46a74102f1fc7bd7872678cce"
+
+[[package]]
+name = "base64"
+version = "0.21.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9d297deb1925b89f2ccc13d7635fa0714f12c87adce1c75356b39ca9b7178567"
+
 [[package]]
 name = "base64"
 version = "0.22.1"
@@ -997,6 +1091,8 @@ dependencies = [
  "arrow-schema",
  "arrow-select",
  "async-trait",
+ "aws-config",
+ "aws-sdk-s3",
  "bytes",
  "bzip2",
  "clap",
@@ -1005,6 +1101,7 @@ dependencies = [
  "datafusion-physical-plan",
  "dirs",
  "erased-serde",
+ "flate2",
  "futures",
  "glob",
  "humansize",
@@ -1479,7 +1576,7 @@ checksum = "af491d569909a7e4dee0ad7db7f5341fef5c614d5b8ec8cf765732aba3cff681"
 dependencies = [
  "serde",
  "termcolor",
- "unicode-width 0.1.14",
+ "unicode-width 0.2.0",
 ]
 
 [[package]]
@@ -1555,7 +1652,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "117725a109d387c937a1533ce01b450cbde6b88abceea8473c4d7a85853cda3c"
 dependencies = [
  "lazy_static",
- "windows-sys 0.52.0",
+ "windows-sys 0.59.0",
 ]
 
 [[package]]
@@ -1767,6 +1864,19 @@ version = "2.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "19d374276b40fb8bbdee95aef7c7fa6b5316ec764510eb64b8dd0e2ed0d7e7f5"
 
+[[package]]
+name = "crc-fast"
+version = "1.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6bf62af4cc77d8fe1c22dde4e721d87f2f54056139d8c412e1366b740305f56f"
+dependencies = [
+ "crc",
+ "digest",
+ "libc",
+ "rand 0.9.2",
+ "regex",
+]
+
 [[package]]
 name = "crc32c"
 version = "0.6.8"
@@ -1877,6 +1987,28 @@ version = "0.2.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "460fbee9c2c2f33933d720630a6a0bac33ba7053db5344fac858d4b8952d77d5"
 
+[[package]]
+name = "crypto-bigint"
+version = "0.4.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ef2b4b23cddf68b89b8f8069890e8c270d54e2d5fe1b143820234805e4cb17ef"
+dependencies = [
+ "generic-array",
+ "rand_core 0.6.4",
+ "subtle",
+ "zeroize",
+]
+
+[[package]]
+name = "crypto-bigint"
+version = "0.5.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0dc92fb57ca44df6db8059111ab3af99a63d5d0f8375d9972e319a379c6bab76"
+dependencies = [
+ "rand_core 0.6.4",
+ "subtle",
+]
+
 [[package]]
 name = "crypto-common"
 version = "0.1.6"
@@ -2173,7 +2305,7 @@ dependencies = [
  "ahash",
  "arrow",
  "arrow-ipc",
- "base64",
+ "base64 0.22.1",
  "chrono",
  "half",
  "hashbrown 0.14.5",
@@ -2381,7 +2513,7 @@ checksum = "7de2782136bd6014670fd84fe3b0ca3b3e4106c96403c3ae05c0598577139977"
 dependencies = [
  "arrow",
  "arrow-buffer",
- "base64",
+ "base64 0.22.1",
  "blake2",
  "blake3",
  "chrono",
@@ -2718,6 +2850,16 @@ version = "0.1.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "26bf8fc351c5ed29b5c2f0cbbac1b209b74f60ecd62e675a998df72c49af5204"
 
+[[package]]
+name = "der"
+version = "0.6.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f1a467a65c5e759bce6e65eaf91cc29f466cdc57cb65777bd646872a8a1fd4de"
+dependencies = [
+ "const-oid",
+ "zeroize",
+]
+
 [[package]]
 name = "der"
 version = "0.7.10"
@@ -2801,7 +2943,7 @@ dependencies = [
  "libc",
  "option-ext",
  "redox_users",
- "windows-sys 0.60.2",
+ "windows-sys 0.61.2",
 ]
 
 [[package]]
@@ -2862,12 +3004,44 @@ version = "1.0.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "92773504d58c093f6de2459af4af33faa518c13451eb8f2b5698ed3d36e7c813"
 
+[[package]]
+name = "ecdsa"
+version = "0.14.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "413301934810f597c1d19ca71c8710e99a3f1ba28a0d2ebc01551a2daeea3c5c"
+dependencies = [
+ "der 0.6.1",
+ "elliptic-curve",
+ "rfc6979",
+ "signature 1.6.4",
+]
+
 [[package]]
 name = "either"
 version = "1.15.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "48c757948c5ede0e46177b7add2e67155f70e33c07fea8284df6576da70b3719"
 
+[[package]]
+name = "elliptic-curve"
+version = "0.12.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e7bb888ab5300a19b8e5bceef25ac745ad065f3c9f7efc6de1b91958110891d3"
+dependencies = [
+ "base16ct",
+ "crypto-bigint 0.4.9",
+ "der 0.6.1",
+ "digest",
+ "ff",
+ "generic-array",
+ "group",
+ "pkcs8 0.9.0",
+ "rand_core 0.6.4",
+ "sec1",
+ "subtle",
+ "zeroize",
+]
+
 [[package]]
 name = "encode_unicode"
 version = "1.0.0"
@@ -2970,7 +3144,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "39cab71617ae0d63f51a36d69f866391735b51691dbda63cf6f96d042b63efeb"
 dependencies = [
  "libc",
- "windows-sys 0.52.0",
+ "windows-sys 0.61.2",
 ]
 
 [[package]]
@@ -3070,6 +3244,16 @@ version = "2.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "37909eebbb50d72f9059c3b6d82c0463f2ff062c9e95845c43a6c9c0355411be"
 
+[[package]]
+name = "ff"
+version = "0.12.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d013fc25338cc558c5c2cfbad646908fb23591e2404481826742b651c9af7160"
+dependencies = [
+ "rand_core 0.6.4",
+ "subtle",
+]
+
 [[package]]
 name = "filetime"
 version = "0.2.26"
@@ -3406,6 +3590,36 @@ version = "1.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f9e2d4c0a8296178d8802098410ca05d86b17a10bb5ab559b3fb404c1f948220"
 
+[[package]]
+name = "group"
+version = "0.12.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5dfbfb3a6cfbd390d5c9564ab283a0349b9b9fcd46a706c1eb10e0db70bfbac7"
+dependencies = [
+ "ff",
+ "rand_core 0.6.4",
+ "subtle",
+]
+
+[[package]]
+name = "h2"
+version = "0.3.27"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0beca50380b1fc32983fc1cb4587bfa4bb9e78fc259aad4a0032d2080309222d"
+dependencies = [
+ "bytes",
+ "fnv",
+ "futures-core",
+ "futures-sink",
+ "futures-util",
+ "http 0.2.12",
+ "indexmap",
+ "slab",
+ "tokio",
+ "tokio-util",
+ "tracing",
+]
+
 [[package]]
 name = "h2"
 version = "0.4.12"
@@ -3581,6 +3795,12 @@ version = "1.10.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6dbf3de79e51f3d586ab4cb9d5c3e2c14aa28ed23d180cf89b4df0454a69cc87"
 
+[[package]]
+name = "httpdate"
+version = "1.0.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "df3b46402a9d5adb4c86a0cf463f42e19994e3ee891101b1841f30a545cb49a9"
+
 [[package]]
 name = "humansize"
 version = "2.1.3"
@@ -3596,6 +3816,30 @@ version = "2.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "135b12329e5e3ce057a9f972339ea52bc954fe1e9358ef27f95e89716fbc5424"
 
+[[package]]
+name = "hyper"
+version = "0.14.32"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "41dfc780fdec9373c01bae43289ea34c972e40ee3c9f6b3c8801a35f35586ce7"
+dependencies = [
+ "bytes",
+ "futures-channel",
+ "futures-core",
+ "futures-util",
+ "h2 0.3.27",
+ "http 0.2.12",
+ "http-body 0.4.6",
+ "httparse",
+ "httpdate",
+ "itoa",
+ "pin-project-lite",
+ "socket2 0.5.10",
+ "tokio",
+ "tower-service",
+ "tracing",
+ "want",
+]
+
 [[package]]
 name = "hyper"
 version = "1.7.0"
@@ -3606,7 +3850,7 @@ dependencies = [
  "bytes",
  "futures-channel",
  "futures-core",
- "h2",
+ "h2 0.4.12",
  "http 1.3.1",
  "http-body 1.0.1",
  "httparse",
@@ -3618,6 +3862,22 @@ dependencies = [
  "want",
 ]
 
+[[package]]
+name = "hyper-rustls"
+version = "0.24.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ec3efd23720e2049821a693cbc7e65ea87c72f1c58ff2f9522ff332b1491e590"
+dependencies = [
+ "futures-util",
+ "http 0.2.12",
+ "hyper 0.14.32",
+ "log",
+ "rustls 0.21.12",
+ "rustls-native-certs 0.6.3",
+ "tokio",
+ "tokio-rustls 0.24.1",
+]
+
 [[package]]
 name = "hyper-rustls"
 version = "0.27.7"
@@ -3625,13 +3885,13 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e3c93eb611681b207e1fe55d5a71ecf91572ec8a6705cdb6857f7d8d5242cf58"
 dependencies = [
  "http 1.3.1",
- "hyper",
+ "hyper 1.7.0",
  "hyper-util",
- "rustls",
- "rustls-native-certs",
+ "rustls 0.23.32",
+ "rustls-native-certs 0.8.1",
  "rustls-pki-types",
  "tokio",
- "tokio-rustls",
+ "tokio-rustls 0.26.4",
  "tower-service",
  "webpki-roots",
 ]
@@ -3642,19 +3902,19 @@ version = "0.1.17"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3c6995591a8f1380fcb4ba966a252a4b29188d51d2b89e3a252f5305be65aea8"
 dependencies = [
- "base64",
+ "base64 0.22.1",
  "bytes",
  "futures-channel",
  "futures-core",
  "futures-util",
  "http 1.3.1",
  "http-body 1.0.1",
- "hyper",
+ "hyper 1.7.0",
  "ipnet",
  "libc",
  "percent-encoding",
  "pin-project-lite",
- "socket2",
+ "socket2 0.6.0",
  "system-configuration",
  "tokio",
  "tower-service",
@@ -3835,7 +4095,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "4b0f83760fb341a774ed326568e19f5a863af4a952def8c39f9ab92fd95b88e5"
 dependencies = [
  "equivalent",
- "hashbrown 0.15.5",
+ "hashbrown 0.16.1",
 ]
 
 [[package]]
@@ -3983,7 +4243,7 @@ dependencies = [
  "portable-atomic",
  "portable-atomic-util",
  "serde_core",
- "windows-sys 0.52.0",
+ "windows-sys 0.61.2",
 ]
 
 [[package]]
@@ -4082,7 +4342,7 @@ version = "9.3.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "5a87cc7a48537badeae96744432de36f4be2b4a34a05a5ef32e9dd8a1c169dde"
 dependencies = [
- "base64",
+ "base64 0.22.1",
  "js-sys",
  "pem",
  "ring",
@@ -5188,7 +5448,7 @@ version = "0.50.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7957b9740744892f114936ab4a57b3f487491bbeafaf8083688b16841a4240e5"
 dependencies = [
- "windows-sys 0.60.2",
+ "windows-sys 0.61.2",
 ]
 
 [[package]]
@@ -5354,7 +5614,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "4c1be0c6c22ec0817cdc77d3842f721a17fd30ab6965001415b5402a74e6b740"
 dependencies = [
  "async-trait",
- "base64",
+ "base64 0.22.1",
  "bytes",
  "chrono",
  "form_urlencoded",
@@ -5363,7 +5623,7 @@ dependencies = [
  "http-body-util",
  "httparse",
  "humantime",
- "hyper",
+ "hyper 1.7.0",
  "itertools 0.14.0",
  "md-5",
  "parking_lot",
@@ -5372,7 +5632,7 @@ dependencies = [
  "rand 0.9.2",
  "reqwest",
  "ring",
- "rustls-pemfile",
+ "rustls-pemfile 2.2.0",
  "serde",
  "serde_json",
  "serde_urlencoded",
@@ -5429,7 +5689,7 @@ checksum = "ffb9838d0575c6dbaf3fcec7255af8d5771996d4af900bbb6fa9a314dec00a1a"
 dependencies = [
  "anyhow",
  "backon",
- "base64",
+ "base64 0.22.1",
  "bytes",
  "chrono",
  "crc32c",
@@ -5577,6 +5837,17 @@ dependencies = [
  "stable_deref_trait",
 ]
 
+[[package]]
+name = "p256"
+version = "0.11.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "51f44edd08f51e2ade572f141051021c5af22677e42b7dd28a88155151c33594"
+dependencies = [
+ "ecdsa",
+ "elliptic-curve",
+ "sha2",
+]
+
 [[package]]
 name = "papergrid"
 version = "0.17.0"
@@ -5659,7 +5930,7 @@ dependencies = [
  "arrow-ipc",
  "arrow-schema",
  "arrow-select",
- "base64",
+ "base64 0.22.1",
  "brotli",
  "bytes",
  "chrono",
@@ -5728,7 +5999,7 @@ version = "3.0.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1d30c53c26bc5b31a98cd02d20f25a7c8567146caf63ed593a9d87b2775291be"
 dependencies = [
- "base64",
+ "base64 0.22.1",
  "serde_core",
 ]
 
@@ -5842,9 +6113,9 @@ version = "0.7.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c8ffb9f10fa047879315e6625af03c164b16962a5368d724ed16323b68ace47f"
 dependencies = [
- "der",
- "pkcs8",
- "spki",
+ "der 0.7.10",
+ "pkcs8 0.10.2",
+ "spki 0.7.3",
 ]
 
 [[package]]
@@ -5855,11 +6126,21 @@ checksum = "e847e2c91a18bfa887dd028ec33f2fe6f25db77db3619024764914affe8b69a6"
 dependencies = [
  "aes",
  "cbc",
- "der",
+ "der 0.7.10",
  "pbkdf2",
  "scrypt",
  "sha2",
- "spki",
+ "spki 0.7.3",
+]
+
+[[package]]
+name = "pkcs8"
+version = "0.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9eca2c590a5f85da82668fa685c09ce2888b9430e83299debf1f34b65fd4a4ba"
+dependencies = [
+ "der 0.6.1",
+ "spki 0.6.0",
 ]
 
 [[package]]
@@ -5868,10 +6149,10 @@ version = "0.10.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f950b2377845cebe5cf8b5165cb3cc1a5e0fa5cfa3e1f7f55707d8fd82e0a7b7"
 dependencies = [
- "der",
+ "der 0.7.10",
  "pkcs5",
  "rand_core 0.6.4",
- "spki",
+ "spki 0.7.3",
 ]
 
 [[package]]
@@ -6225,8 +6506,8 @@ dependencies = [
  "quinn-proto",
  "quinn-udp",
  "rustc-hash",
- "rustls",
- "socket2",
+ "rustls 0.23.32",
+ "socket2 0.6.0",
  "thiserror 2.0.17",
  "tokio",
  "tracing",
@@ -6245,7 +6526,7 @@ dependencies = [
  "rand 0.9.2",
  "ring",
  "rustc-hash",
- "rustls",
+ "rustls 0.23.32",
  "rustls-pki-types",
  "slab",
  "thiserror 2.0.17",
@@ -6263,9 +6544,9 @@ dependencies = [
  "cfg_aliases",
  "libc",
  "once_cell",
- "socket2",
+ "socket2 0.6.0",
  "tracing",
- "windows-sys 0.52.0",
+ "windows-sys 0.60.2",
 ]
 
 [[package]]
@@ -6521,7 +6802,7 @@ checksum = "43451dbf3590a7590684c25fb8d12ecdcc90ed3ac123433e500447c7d77ed701"
 dependencies = [
  "anyhow",
  "async-trait",
- "base64",
+ "base64 0.22.1",
  "chrono",
  "form_urlencoded",
  "getrandom 0.2.16",
@@ -6552,18 +6833,18 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9d0946410b9f7b082a427e4ef5c8ff541a88b357bc6c637c40db3a68ac70a36f"
 dependencies = [
  "async-compression",
- "base64",
+ "base64 0.22.1",
  "bytes",
  "encoding_rs",
  "futures-channel",
  "futures-core",
  "futures-util",
- "h2",
+ "h2 0.4.12",
  "http 1.3.1",
  "http-body 1.0.1",
  "http-body-util",
- "hyper",
- "hyper-rustls",
+ "hyper 1.7.0",
+ "hyper-rustls 0.27.7",
  "hyper-util",
  "js-sys",
  "log",
@@ -6572,15 +6853,15 @@ dependencies = [
  "percent-encoding",
  "pin-project-lite",
  "quinn",
- "rustls",
- "rustls-native-certs",
+ "rustls 0.23.32",
+ "rustls-native-certs 0.8.1",
  "rustls-pki-types",
  "serde",
  "serde_json",
  "serde_urlencoded",
  "sync_wrapper",
  "tokio",
- "tokio-rustls",
+ "tokio-rustls 0.26.4",
  "tokio-util",
  "tower",
  "tower-http",
@@ -6593,6 +6874,17 @@ dependencies = [
  "webpki-roots",
 ]
 
+[[package]]
+name = "rfc6979"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7743f17af12fa0b03b803ba12cd6a8d9483a587e89c69445e3909655c0b9fabb"
+dependencies = [
+ "crypto-bigint 0.4.9",
+ "hmac",
+ "zeroize",
+]
+
 [[package]]
 name = "ring"
 version = "0.17.14"
@@ -6639,11 +6931,11 @@ dependencies = [
  "num-integer",
  "num-traits",
  "pkcs1",
- "pkcs8",
+ "pkcs8 0.10.2",
  "rand_core 0.6.4",
  "sha2",
- "signature",
- "spki",
+ "signature 2.2.0",
+ "spki 0.7.3",
  "subtle",
  "zeroize",
 ]
@@ -6739,7 +7031,7 @@ dependencies = [
  "errno",
  "libc",
  "linux-raw-sys 0.4.15",
- "windows-sys 0.52.0",
+ "windows-sys 0.59.0",
 ]
 
 [[package]]
@@ -6752,7 +7044,19 @@ dependencies = [
  "errno",
  "libc",
  "linux-raw-sys 0.11.0",
- "windows-sys 0.52.0",
+ "windows-sys 0.61.2",
+]
+
+[[package]]
+name = "rustls"
+version = "0.21.12"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3f56a14d1f48b391359b22f731fd4bd7e43c97f3c50eee276f3aa09c94784d3e"
+dependencies = [
+ "log",
+ "ring",
+ "rustls-webpki 0.101.7",
+ "sct",
 ]
 
 [[package]]
@@ -6765,11 +7069,23 @@ dependencies = [
  "once_cell",
  "ring",
  "rustls-pki-types",
- "rustls-webpki",
+ "rustls-webpki 0.103.7",
  "subtle",
  "zeroize",
 ]
 
+[[package]]
+name = "rustls-native-certs"
+version = "0.6.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a9aace74cb666635c918e9c12bc0d348266037aa8eb599b5cba565709a8dff00"
+dependencies = [
+ "openssl-probe",
+ "rustls-pemfile 1.0.4",
+ "schannel",
+ "security-framework 2.11.1",
+]
+
 [[package]]
 name = "rustls-native-certs"
 version = "0.8.1"
@@ -6779,7 +7095,16 @@ dependencies = [
  "openssl-probe",
  "rustls-pki-types",
  "schannel",
- "security-framework",
+ "security-framework 3.5.1",
+]
+
+[[package]]
+name = "rustls-pemfile"
+version = "1.0.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1c74cae0a4cf6ccbbf5f359f08efdf8ee7e1dc532573bf0db71968cb56b1448c"
+dependencies = [
+ "base64 0.21.7",
 ]
 
 [[package]]
@@ -6801,6 +7126,16 @@ dependencies = [
  "zeroize",
 ]
 
+[[package]]
+name = "rustls-webpki"
+version = "0.101.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8b6275d1ee7a1cd780b64aca7726599a1dbc893b1e64144529e55c3c2f745765"
+dependencies = [
+ "ring",
+ "untrusted",
+]
+
 [[package]]
 name = "rustls-webpki"
 version = "0.103.7"
@@ -6881,6 +7216,43 @@ dependencies = [
  "sha2",
 ]
 
+[[package]]
+name = "sct"
+version = "0.7.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "da046153aa2352493d6cb7da4b6e5c0c057d8a1d0a9aa8560baffdd945acd414"
+dependencies = [
+ "ring",
+ "untrusted",
+]
+
+[[package]]
+name = "sec1"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3be24c1842290c45df0a7bf069e0c268a747ad05a192f2fd7dcfdbc1cba40928"
+dependencies = [
+ "base16ct",
+ "der 0.6.1",
+ "generic-array",
+ "pkcs8 0.9.0",
+ "subtle",
+ "zeroize",
+]
+
+[[package]]
+name = "security-framework"
+version = "2.11.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "897b2245f0b511c87893af39b033e5ca9cce68824c4d7e7630b5a1d339658d02"
+dependencies = [
+ "bitflags",
+ "core-foundation 0.9.4",
+ "core-foundation-sys",
+ "libc",
+ "security-framework-sys",
+]
+
 [[package]]
 name = "security-framework"
 version = "3.5.1"
@@ -7086,6 +7458,16 @@ dependencies = [
  "libc",
 ]
 
+[[package]]
+name = "signature"
+version = "1.6.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "74233d3b3b2f6d4b006dc19dee745e73e2a6bfb6f93607cd3b02bd5b00797d7c"
+dependencies = [
+ "digest",
+ "rand_core 0.6.4",
+]
+
 [[package]]
 name = "signature"
 version = "2.2.0"
@@ -7231,6 +7613,16 @@ version = "1.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1b6b67fb9a61334225b5b790716f609cd58395f895b3fe8b328786812a40bc3b"
 
+[[package]]
+name = "socket2"
+version = "0.5.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e22376abed350d73dd1cd119b57ffccad95b4e585a7cda43e286245ce23c0678"
+dependencies = [
+ "libc",
+ "windows-sys 0.52.0",
+]
+
 [[package]]
 name = "socket2"
 version = "0.6.0"
@@ -7247,6 +7639,16 @@ version = "0.9.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6980e8d7511241f8acf4aebddbb1ff938df5eebe98691418c4468d0b72a96a67"
 
+[[package]]
+name = "spki"
+version = "0.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "67cf02bbac7a337dc36e4f5a693db6c21e7863f45070f7064577eb4367a3212b"
+dependencies = [
+ "base64ct",
+ "der 0.6.1",
+]
+
 [[package]]
 name = "spki"
 version = "0.7.3"
@@ -7254,7 +7656,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d91ed6c858b01f942cd56b37a94b3e0a1798290327d1236e4d9cf4eaca44d29d"
 dependencies = [
  "base64ct",
- "der",
+ "der 0.7.10",
 ]
 
 [[package]]
@@ -7486,7 +7888,7 @@ checksum = "64a966cb0e76e311f09cf18507c9af192f15d34886ee43d7ba7c7e3803660c43"
 dependencies = [
  "aho-corasick",
  "arc-swap",
- "base64",
+ "base64 0.22.1",
  "bitpacking",
  "bon",
  "byteorder",
@@ -7663,7 +8065,7 @@ dependencies = [
  "getrandom 0.3.4",
  "once_cell",
  "rustix 1.1.2",
- "windows-sys 0.52.0",
+ "windows-sys 0.61.2",
 ]
 
 [[package]]
@@ -7858,7 +8260,7 @@ dependencies = [
  "parking_lot",
  "pin-project-lite",
  "signal-hook-registry",
- "socket2",
+ "socket2 0.6.0",
  "tokio-macros",
  "windows-sys 0.61.2",
 ]
@@ -7874,13 +8276,23 @@ dependencies = [
  "syn 2.0.106",
 ]
 
+[[package]]
+name = "tokio-rustls"
+version = "0.24.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c28327cf380ac148141087fbfb9de9d7bd4e84ab5d2c28fbc911d753de8a7081"
+dependencies = [
+ "rustls 0.21.12",
+ "tokio",
+]
+
 [[package]]
 name = "tokio-rustls"
 version = "0.26.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1729aa945f29d91ba541258c8df89027d5792d85a8841fb65e8bf0f4ede4ef61"
 dependencies = [
- "rustls",
+ "rustls 0.23.32",
  "tokio",
 ]
 
@@ -7966,7 +8378,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "eb7613188ce9f7df5bfe185db26c5814347d110db17920415cf2fbcad85e7203"
 dependencies = [
  "async-trait",
- "base64",
+ "base64 0.22.1",
  "bytes",
  "http 1.3.1",
  "http-body 1.0.1",
@@ -9355,7 +9767,7 @@ version = "0.1.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c2a7b1c03c876122aa43f3020e6c3c3ee5c05081c9a00739faf7503aeba10d22"
 dependencies = [
- "windows-sys 0.52.0",
+ "windows-sys 0.61.2",
 ]
 
 [[package]]
diff --git a/bench-vortex/Cargo.toml b/bench-vortex/Cargo.toml
index 4bab8b9c093..1e0dfa49f0e 100644
--- a/bench-vortex/Cargo.toml
+++ b/bench-vortex/Cargo.toml
@@ -29,6 +29,8 @@ arrow-cast = { workspace = true }
 arrow-schema = { workspace = true }
 arrow-select = { workspace = true }
 async-trait = { workspace = true }
+aws-config = "1"
+aws-sdk-s3 = "1"
 bytes = { workspace = true }
 bzip2 = { workspace = true }
 clap = { workspace = true, features = ["derive"] }
@@ -42,6 +44,7 @@ datafusion-common = { workspace = true }
 datafusion-physical-plan = { workspace = true }
 dirs = { workspace = true }
 erased-serde = { workspace = true }
+flate2 = "1"
 futures = { workspace = true }
 glob = { workspace = true }
 humansize = { workspace = true }
diff --git a/bench-vortex/src/bin/s3_cat.rs b/bench-vortex/src/bin/s3_cat.rs
new file mode 100644
index 00000000000..ea79aff44d0
--- /dev/null
+++ b/bench-vortex/src/bin/s3_cat.rs
@@ -0,0 +1,180 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: Copyright the Vortex contributors
+
+//! Appends a local file to an S3 object using optimistic concurrency control via ETags.
+//!
+//! This binary is a Rust port of `scripts/cat-s3.sh` and handles concurrent appends to S3 objects
+//! by using conditional requests with ETags. If the object has been modified by another process
+//! between read and write, the operation is retried.
+
+use std::io::Read;
+use std::io::Write;
+use std::path::PathBuf;
+use std::time::Duration;
+
+use anyhow::Context;
+use anyhow::Result;
+use anyhow::bail;
+use aws_sdk_s3::Client;
+use aws_sdk_s3::error::ProvideErrorMetadata;
+use aws_sdk_s3::error::SdkError;
+use aws_sdk_s3::primitives::ByteStream;
+use clap::Parser;
+use flate2::Compression;
+use flate2::read::GzDecoder;
+use flate2::write::GzEncoder;
+
+const MAX_RETRIES: u32 = 5;
+const RETRY_DELAY: Duration = Duration::from_millis(100);
+
+#[derive(Parser, Debug)]
+#[command(
+    name = "s3_cat",
+    about = "Append a local file to an S3 object with optimistic concurrency control"
+)]
+struct Args {
+    /// S3 bucket name.
+    bucket: String,
+
+    /// S3 object key.
+    key: String,
+
+    /// Path to the local file to append.
+    local_file: PathBuf,
+}
+
+#[tokio::main]
+async fn main() -> Result<()> {
+    let args = Args::parse();
+
+    let config = aws_config::load_defaults(aws_config::BehaviorVersion::latest()).await;
+    let client = Client::new(&config);
+
+    let local_content =
+        std::fs::read(&args.local_file).context("Failed to read local file to append")?;
+
+    let is_gzipped = args.key.ends_with(".gz");
+
+    for attempt in 0..MAX_RETRIES {
+        match try_append(&client, &args.bucket, &args.key, &local_content, is_gzipped).await {
+            Ok(()) => {
+                println!("File updated and uploaded successfully.");
+                return Ok(());
+            }
+            Err(AppendError::EtagMismatch) => {
+                println!("ETag mismatch on attempt {}. Retrying...", attempt + 1);
+                tokio::time::sleep(RETRY_DELAY).await;
+            }
+            Err(AppendError::Other(e)) => {
+                return Err(e);
+            }
+        }
+    }
+
+    bail!("Too many failures: {MAX_RETRIES}");
+}
+
+enum AppendError {
+    EtagMismatch,
+    Other(anyhow::Error),
+}
+
+impl From<anyhow::Error> for AppendError {
+    fn from(e: anyhow::Error) -> Self {
+        AppendError::Other(e)
+    }
+}
+
+async fn try_append(
+    client: &Client,
+    bucket: &str,
+    key: &str,
+    local_content: &[u8],
+    is_gzipped: bool,
+) -> Result<(), AppendError> {
+    // Get current ETag.
+    let head = client
+        .head_object()
+        .bucket(bucket)
+        .key(key)
+        .send()
+        .await
+        .context("Failed to get object metadata")?;
+
+    let etag = head
+        .e_tag()
+        .context("No ETag returned from head_object")?
+        .to_string();
+
+    // Download with if-match.
+    let get_result = client
+        .get_object()
+        .bucket(bucket)
+        .key(key)
+        .if_match(&etag)
+        .send()
+        .await;
+
+    let get_output = match get_result {
+        Ok(output) => output,
+        Err(SdkError::ServiceError(err)) if err.err().code() == Some("PreconditionFailed") => {
+            return Err(AppendError::EtagMismatch);
+        }
+        Err(e) => {
+            return Err(AppendError::Other(
+                anyhow::Error::new(e).context("Failed to download object"),
+            ));
+        }
+    };
+
+    let existing_bytes = get_output
+        .body
+        .collect()
+        .await
+        .context("Failed to read object body")?
+        .into_bytes();
+
+    // Concatenate contents.
+    let new_content = if is_gzipped {
+        // Decompress existing content.
+        let mut decoder = GzDecoder::new(&existing_bytes[..]);
+        let mut decompressed = Vec::new();
+        decoder
+            .read_to_end(&mut decompressed)
+            .context("Failed to decompress existing content")?;
+
+        // Append new content.
+        decompressed.extend_from_slice(local_content);
+
+        // Recompress.
+        let mut encoder = GzEncoder::new(Vec::new(), Compression::default());
+        encoder
+            .write_all(&decompressed)
+            .context("Failed to compress concatenated content")?;
+        encoder.finish().context("Failed to finish compression")?
+    } else {
+        let mut combined = existing_bytes.to_vec();
+        combined.extend_from_slice(local_content);
+        combined
+    };
+
+    // Upload with if-match.
+    let put_result = client
+        .put_object()
+        .bucket(bucket)
+        .key(key)
+        .if_match(&etag)
+        .body(ByteStream::from(new_content))
+        .send()
+        .await;
+
+    match put_result {
+        Ok(_) => Ok(()),
+        Err(SdkError::ServiceError(err)) if err.err().code() == Some("PreconditionFailed") => {
+            Err(AppendError::EtagMismatch)
+        }
+        Err(e) => Err(AppendError::Other(
+            anyhow::Error::new(e).context("Failed to upload object"),
+        )),
+    }
+}

From 8ac29c5806307406bbb845398c1a4cdf00d3d8b9 Mon Sep 17 00:00:00 2001
From: Connor Tsui <connor.tsui20@gmail.com>
Date: Mon, 1 Dec 2025 18:19:05 -0500
Subject: [PATCH 04/30] clean up

Signed-off-by: Connor Tsui <connor.tsui20@gmail.com>
---
 Cargo.lock                           |  20 +++
 Cargo.toml                           |   2 +
 vortex-file/Cargo.toml               |   1 +
 vortex-file/src/lib.rs               |   2 +
 vortex-file/src/update.rs            | 176 +++++++++++++++++++++++++++
 vortex-wasm/src/benchmark_website.rs | 109 -----------------
 vortex-wasm/src/bin/append.rs        |  50 +++++++-
 vortex-wasm/src/lib.rs               |   2 -
 8 files changed, 250 insertions(+), 112 deletions(-)
 create mode 100644 vortex-file/src/update.rs
 delete mode 100644 vortex-wasm/src/benchmark_website.rs

diff --git a/Cargo.lock b/Cargo.lock
index 4b269171394..ee8301efbdb 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -9141,6 +9141,7 @@ dependencies = [
 name = "vortex-file"
 version = "0.1.0"
 dependencies = [
+ "async-fs",
  "async-trait",
  "bytes",
  "flatbuffers",
@@ -9571,6 +9572,25 @@ dependencies = [
  "vortex-mask",
 ]
 
+[[package]]
+name = "vortex-wasm"
+version = "0.1.0"
+dependencies = [
+ "async-fs",
+ "serde",
+ "serde_json",
+ "vortex-array",
+ "vortex-buffer",
+ "vortex-dtype",
+ "vortex-error",
+ "vortex-file",
+ "vortex-io",
+ "vortex-layout",
+ "vortex-metrics",
+ "vortex-scalar",
+ "vortex-session",
+]
+
 [[package]]
 name = "vortex-zigzag"
 version = "0.1.0"
diff --git a/Cargo.toml b/Cargo.toml
index 7a676a4006e..b5adc580779 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -30,6 +30,7 @@ members = [
     "vortex-tui",
     "vortex-utils",
     "vortex-vector",
+    "vortex-wasm",
     "xtask",
 ]
 exclude = ["java/testfiles", "wasm-test"]
@@ -246,6 +247,7 @@ vortex-sparse = { version = "0.1.0", path = "./encodings/sparse", default-featur
 vortex-tui = { version = "0.1.0", path = "./vortex-tui", default-features = false }
 vortex-utils = { version = "0.1.0", path = "./vortex-utils", default-features = false }
 vortex-vector = { version = "0.1.0", path = "./vortex-vector", default-features = false }
+vortex-wasm = { version = "0.1.0", path = "./vortex-wasm", default-features = false }
 vortex-zigzag = { version = "0.1.0", path = "./encodings/zigzag", default-features = false }
 vortex-zstd = { version = "0.1.0", path = "./encodings/zstd", default-features = false }
 # END crates published by this project
diff --git a/vortex-file/Cargo.toml b/vortex-file/Cargo.toml
index 032789211db..11c5c9e7b6f 100644
--- a/vortex-file/Cargo.toml
+++ b/vortex-file/Cargo.toml
@@ -17,6 +17,7 @@ version = { workspace = true }
 all-features = true
 
 [dependencies]
+async-fs = { workspace = true }
 async-trait = { workspace = true }
 bytes = { workspace = true }
 flatbuffers = { workspace = true }
diff --git a/vortex-file/src/lib.rs b/vortex-file/src/lib.rs
index 8fd03b26470..eba5571aef8 100644
--- a/vortex-file/src/lib.rs
+++ b/vortex-file/src/lib.rs
@@ -99,6 +99,7 @@ pub mod segments;
 mod strategy;
 #[cfg(test)]
 mod tests;
+mod update;
 mod writer;
 
 pub use file::*;
@@ -106,6 +107,7 @@ pub use footer::*;
 pub use forever_constant::*;
 pub use open::*;
 pub use strategy::*;
+pub use update::*;
 use vortex_alp::ALPRDVTable;
 use vortex_alp::ALPVTable;
 use vortex_array::arrays::DictVTable;
diff --git a/vortex-file/src/update.rs b/vortex-file/src/update.rs
new file mode 100644
index 00000000000..baa71fc2281
--- /dev/null
+++ b/vortex-file/src/update.rs
@@ -0,0 +1,176 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: Copyright the Vortex contributors
+
+//! Update operations for Vortex files.
+//!
+//! This module provides functions to read a Vortex file, apply a transformation, and write the
+//! result back to a file. The update operation uses atomic file replacement for safety.
+
+use std::future::Future;
+use std::path::Path;
+
+use vortex_array::ArrayRef;
+use vortex_array::expr::session::ExprSession;
+use vortex_array::session::ArraySession;
+use vortex_array::stream::ArrayStreamExt;
+use vortex_error::VortexResult;
+use vortex_error::vortex_bail;
+use vortex_io::runtime::BlockingRuntime;
+use vortex_io::runtime::current::CurrentThreadRuntime;
+use vortex_io::session::RuntimeSession;
+use vortex_io::session::RuntimeSessionExt;
+use vortex_layout::session::LayoutSession;
+use vortex_metrics::VortexMetrics;
+use vortex_session::VortexSession;
+
+use crate::OpenOptionsSessionExt;
+use crate::WriteOptionsSessionExt;
+use crate::WriteSummary;
+use crate::register_default_encodings;
+
+/// Updates a Vortex file by reading it, applying a transformation, and writing the result.
+///
+/// This is a blocking convenience wrapper around [`update_file_async`]. It creates a new session
+/// with default encodings and a current-thread runtime.
+///
+/// # Arguments
+///
+/// * `input_path` - Path to the existing Vortex file to read.
+/// * `output_path` - Path to write the updated Vortex file. Can be the same as input.
+/// * `update_fn` - An async function that takes the file's array data and returns the updated
+///   array. The returned array must have the same dtype as the input.
+///
+/// # Returns
+///
+/// A [`WriteSummary`] containing information about the written file.
+///
+/// # Errors
+///
+/// Returns an error if:
+/// - The input file cannot be read.
+/// - The update function returns an error.
+/// - The update function returns an array with a different dtype.
+/// - The output file cannot be written.
+///
+/// # Atomic Write Guarantee
+///
+/// The write operation uses a temporary file and atomic rename to ensure that the output file is
+/// never left in a corrupted state, even if the process crashes during the write.
+pub fn update_file<F, Fut>(
+    input_path: impl AsRef<Path>,
+    output_path: impl AsRef<Path>,
+    update_fn: F,
+) -> VortexResult<WriteSummary>
+where
+    F: FnOnce(ArrayRef) -> Fut,
+    Fut: Future<Output = VortexResult<ArrayRef>>,
+{
+    let runtime = CurrentThreadRuntime::new();
+
+    let session = VortexSession::empty()
+        .with::<VortexMetrics>()
+        .with::<ArraySession>()
+        .with::<LayoutSession>()
+        .with::<ExprSession>()
+        .with::<RuntimeSession>()
+        .with_handle(runtime.handle());
+
+    register_default_encodings(&session);
+
+    runtime.block_on(update_file_async(
+        &session,
+        input_path.as_ref(),
+        output_path.as_ref(),
+        update_fn,
+    ))
+}
+
+/// Updates a Vortex file asynchronously by reading it, applying a transformation, and writing the
+/// result.
+///
+/// This function:
+/// 1. Reads the existing Vortex file into memory.
+/// 2. Calls the update function with the array data.
+/// 3. Validates the returned array has the same dtype.
+/// 4. Writes the updated data to a temporary file.
+/// 5. Atomically renames the temporary file to the output path.
+///
+/// # Arguments
+///
+/// * `session` - The Vortex session to use for reading and writing.
+/// * `input_path` - Path to the existing Vortex file to read.
+/// * `output_path` - Path to write the updated Vortex file. Can be the same as input.
+/// * `update_fn` - An async function that takes the file's array data and returns the updated
+///   array. The returned array must have the same dtype as the input.
+///
+/// # Returns
+///
+/// A [`WriteSummary`] containing information about the written file.
+///
+/// # Errors
+///
+/// Returns an error if:
+/// - The input file cannot be read.
+/// - The update function returns an error.
+/// - The update function returns an array with a different dtype.
+/// - The output file cannot be written.
+pub async fn update_file_async<F, Fut>(
+    session: &VortexSession,
+    input_path: impl AsRef<Path>,
+    output_path: impl AsRef<Path>,
+    update_fn: F,
+) -> VortexResult<WriteSummary>
+where
+    F: FnOnce(ArrayRef) -> Fut,
+    Fut: Future<Output = VortexResult<ArrayRef>>,
+{
+    let input_path = input_path.as_ref();
+    let output_path = output_path.as_ref();
+
+    // Read the existing file.
+    let file = session.open_options().open(input_path).await?;
+    let original_dtype = file.dtype().clone();
+
+    // Read all existing data into memory.
+    let existing_array = file.scan()?.into_array_stream()?.read_all().await?;
+
+    // Apply the user's update function.
+    let updated_array = update_fn(existing_array).await?;
+
+    // Validate that the dtype matches.
+    if updated_array.dtype() != &original_dtype {
+        vortex_bail!(
+            "Update function changed dtype from {} to {}. \
+             The updated array must have the same dtype as the input file.",
+            original_dtype,
+            updated_array.dtype()
+        );
+    }
+
+    // Generate a temporary file path in the same directory as output.
+    // This ensures the rename will be atomic (same filesystem).
+    let temp_path = generate_temp_path(output_path);
+
+    // Write to the temporary file.
+    let temp_file = async_fs::File::create(&temp_path).await?;
+    let mut writer = session.write_options().writer(temp_file, original_dtype);
+    writer.push(updated_array).await?;
+    let summary = writer.finish().await?;
+
+    // Atomically rename the temp file to the output path.
+    async_fs::rename(&temp_path, output_path).await?;
+
+    Ok(summary)
+}
+
+/// Generates a temporary file path in the same directory as the target path.
+fn generate_temp_path(target: &Path) -> std::path::PathBuf {
+    let parent = target.parent().unwrap_or_else(|| Path::new("."));
+    let file_name = target
+        .file_name()
+        .map(|s| s.to_string_lossy())
+        .unwrap_or_else(|| "file".into());
+
+    let temp_name = format!(".{}.{}.tmp", file_name, uuid::Uuid::new_v4());
+    parent.join(temp_name)
+}
diff --git a/vortex-wasm/src/benchmark_website.rs b/vortex-wasm/src/benchmark_website.rs
deleted file mode 100644
index 4b3b7d7f551..00000000000
--- a/vortex-wasm/src/benchmark_website.rs
+++ /dev/null
@@ -1,109 +0,0 @@
-// SPDX-License-Identifier: Apache-2.0
-// SPDX-FileCopyrightText: Copyright the Vortex contributors
-
-//! Utilities for the Vortex benchmark website.
-
-use std::path::Path;
-
-use vortex_array::builders::builder_with_capacity;
-use vortex_array::expr::session::ExprSession;
-use vortex_array::session::ArraySession;
-use vortex_array::stream::ArrayStreamExt;
-use vortex_error::VortexResult;
-use vortex_file::OpenOptionsSessionExt;
-use vortex_file::WriteOptionsSessionExt;
-use vortex_io::runtime::BlockingRuntime;
-use vortex_io::runtime::current::CurrentThreadRuntime;
-use vortex_io::session::RuntimeSession;
-use vortex_io::session::RuntimeSessionExt;
-use vortex_layout::session::LayoutSession;
-use vortex_metrics::VortexMetrics;
-use vortex_scalar::Scalar;
-use vortex_session::VortexSession;
-
-/// Reads a Vortex file and appends a single scalar entry, writing the result back.
-///
-/// This function:
-/// 1. Reads the existing Vortex file (using the scalar's dtype)
-/// 2. Appends the new scalar to the existing data using a builder
-/// 3. Writes the combined data back to the output path
-///
-/// The input and output paths can be the same to overwrite the existing file.
-///
-/// # Arguments
-///
-/// * `input_path` - Path to the existing Vortex file to read.
-/// * `output_path` - Path to write the updated Vortex file (can be same as input).
-/// * `new_entry` - The scalar to append. Its dtype is used for reading/writing the file.
-///
-/// # Returns
-///
-/// The total number of entries in the resulting file.
-pub fn append_entry(
-    input_path: impl AsRef<Path>,
-    output_path: impl AsRef<Path>,
-    new_entry: Scalar,
-) -> VortexResult<usize> {
-    let runtime = CurrentThreadRuntime::new();
-
-    let session = VortexSession::empty()
-        .with::<VortexMetrics>()
-        .with::<ArraySession>()
-        .with::<LayoutSession>()
-        .with::<ExprSession>()
-        .with::<RuntimeSession>()
-        .with_handle(runtime.handle());
-
-    vortex_file::register_default_encodings(&session);
-
-    runtime.block_on(naive_append_entry_async(
-        &session,
-        input_path.as_ref(),
-        output_path.as_ref(),
-        new_entry,
-    ))
-}
-
-/// SUPER NAIVE append to a Vortex file.
-async fn naive_append_entry_async(
-    session: &VortexSession,
-    input_path: &Path,
-    output_path: &Path,
-    new_entry: Scalar,
-) -> VortexResult<usize> {
-    let dtype = new_entry.dtype().clone();
-
-    // Read the existing file.
-    let file = session
-        .open_options()
-        .with_dtype(dtype.clone())
-        .open(input_path)
-        .await?;
-
-    // Read all existing data.
-    let existing_array = file.scan()?.into_array_stream()?.read_all().await?;
-    let existing_len = existing_array.len();
-
-    // Create a builder and extend with existing data, then append the new entry.
-    let total_capacity = existing_len + 1;
-    let mut builder = builder_with_capacity(&dtype, total_capacity);
-
-    // Add existing data.
-    builder.extend_from_array(&existing_array);
-
-    // Append the new entry.
-    builder.append_scalar(&new_entry)?;
-
-    let combined = builder.finish();
-    let total_len = combined.len();
-
-    // Write to output file.
-    let file = async_fs::File::create(output_path).await?;
-
-    let mut writer = session.write_options().writer(file, dtype);
-
-    writer.push(combined).await?;
-    writer.finish().await?;
-
-    Ok(total_len)
-}
diff --git a/vortex-wasm/src/bin/append.rs b/vortex-wasm/src/bin/append.rs
index 0fc4b1405fb..35fa7bc2b8a 100644
--- a/vortex-wasm/src/bin/append.rs
+++ b/vortex-wasm/src/bin/append.rs
@@ -6,14 +6,17 @@
 #![allow(clippy::expect_used)]
 
 use std::env;
+use std::path::Path;
 
+use vortex_array::builders::builder_with_capacity;
 use vortex_dtype::DType;
 use vortex_dtype::FieldNames;
 use vortex_dtype::Nullability;
 use vortex_dtype::PType;
 use vortex_dtype::StructFields;
+use vortex_error::VortexResult;
+use vortex_file::update_file;
 use vortex_scalar::Scalar;
-use vortex_wasm::benchmark_website::append_entry;
 
 /// Returns the expected DType for the benchmark data file.
 ///
@@ -68,3 +71,48 @@ fn main() {
         value, commit_id, vortex_path, total
     );
 }
+
+/// Reads a Vortex file and appends a single scalar entry, writing the result back.
+///
+/// This function:
+/// 1. Reads the existing Vortex file (using the scalar's dtype)
+/// 2. Appends the new scalar to the existing data using a builder
+/// 3. Writes the combined data back to the output path
+///
+/// The input and output paths can be the same to overwrite the existing file.
+///
+/// # Arguments
+///
+/// * `input_path` - Path to the existing Vortex file to read.
+/// * `output_path` - Path to write the updated Vortex file (can be same as input).
+/// * `new_entry` - The scalar to append. Its dtype is used for reading/writing the file.
+///
+/// # Returns
+///
+/// The total number of entries in the resulting file.
+pub fn append_entry(
+    input_path: impl AsRef<Path>,
+    output_path: impl AsRef<Path>,
+    new_entry: Scalar,
+) -> VortexResult<usize> {
+    let dtype = new_entry.dtype().clone();
+
+    let summary = update_file(input_path, output_path, |existing_array| async move {
+        let existing_len = existing_array.len();
+
+        // Create a builder and extend with existing data, then append the new entry.
+        let total_capacity = existing_len + 1;
+        let mut builder = builder_with_capacity(&dtype, total_capacity);
+
+        // Add existing data.
+        builder.extend_from_array(&existing_array);
+
+        // Append the new entry.
+        builder.append_scalar(&new_entry)?;
+
+        Ok(builder.finish())
+    })?;
+
+    #[expect(clippy::cast_possible_truncation)]
+    Ok(summary.row_count() as usize)
+}
diff --git a/vortex-wasm/src/lib.rs b/vortex-wasm/src/lib.rs
index 0e5a76b95be..0d735177e5d 100644
--- a/vortex-wasm/src/lib.rs
+++ b/vortex-wasm/src/lib.rs
@@ -1,4 +1,2 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: Copyright the Vortex contributors
-
-pub mod benchmark_website;

From dd78a93ca2b5381f54ee8fcfc080cc4256524d5a Mon Sep 17 00:00:00 2001
From: Connor Tsui <connor.tsui20@gmail.com>
Date: Tue, 2 Dec 2025 14:44:32 -0500
Subject: [PATCH 05/30] add read and write bindings for benchmark entries

Signed-off-by: Connor Tsui <connor.tsui20@gmail.com>
---
 Cargo.lock                                    |  49 +++-
 Cargo.toml                                    |   2 +
 bench-vortex/Cargo.toml                       |   2 +
 bench-vortex/src/bin/migrate_random_access.rs | 172 +++++++++++
 bench-vortex/src/bin/test_s3_read.rs          |  74 +++++
 bench-vortex/src/bin/test_s3_update.rs        | 277 ++++++++++++++++++
 bench-vortex/src/lib.rs                       |   1 +
 bench-vortex/src/website/entry.rs             |  85 ++++++
 bench-vortex/src/website/mod.rs               |   7 +
 bench-vortex/src/website/names.rs             |  15 +
 bench-vortex/src/website/read_s3.rs           | 137 +++++++++
 bench-vortex/src/website/update_s3.rs         | 218 ++++++++++++++
 plan.md                                       |  81 +++++
 13 files changed, 1118 insertions(+), 2 deletions(-)
 create mode 100644 bench-vortex/src/bin/migrate_random_access.rs
 create mode 100644 bench-vortex/src/bin/test_s3_read.rs
 create mode 100644 bench-vortex/src/bin/test_s3_update.rs
 create mode 100644 bench-vortex/src/website/entry.rs
 create mode 100644 bench-vortex/src/website/mod.rs
 create mode 100644 bench-vortex/src/website/names.rs
 create mode 100644 bench-vortex/src/website/read_s3.rs
 create mode 100644 bench-vortex/src/website/update_s3.rs
 create mode 100644 plan.md

diff --git a/Cargo.lock b/Cargo.lock
index ee8301efbdb..2737b17cb60 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1104,6 +1104,7 @@ dependencies = [
  "flate2",
  "futures",
  "glob",
+ "hex",
  "humansize",
  "indicatif",
  "itertools 0.14.0",
@@ -1120,6 +1121,7 @@ dependencies = [
  "parking_lot",
  "parquet",
  "paste",
+ "phf 0.13.1",
  "rand 0.9.2",
  "rayon",
  "regex",
@@ -1494,7 +1496,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a6139a8597ed92cf816dfb33f5dd6cf0bb93a6adc938f11039f371bc5bcd26c3"
 dependencies = [
  "chrono",
- "phf",
+ "phf 0.12.1",
 ]
 
 [[package]]
@@ -6052,7 +6054,41 @@ version = "0.12.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "913273894cec178f401a31ec4b656318d95473527be05c0752cc41cdc32be8b7"
 dependencies = [
- "phf_shared",
+ "phf_shared 0.12.1",
+]
+
+[[package]]
+name = "phf"
+version = "0.13.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c1562dc717473dbaa4c1f85a36410e03c047b2e7df7f45ee938fbef64ae7fadf"
+dependencies = [
+ "phf_macros",
+ "phf_shared 0.13.1",
+ "serde",
+]
+
+[[package]]
+name = "phf_generator"
+version = "0.13.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "135ace3a761e564ec88c03a77317a7c6b80bb7f7135ef2544dbe054243b89737"
+dependencies = [
+ "fastrand",
+ "phf_shared 0.13.1",
+]
+
+[[package]]
+name = "phf_macros"
+version = "0.13.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "812f032b54b1e759ccd5f8b6677695d5268c588701effba24601f6932f8269ef"
+dependencies = [
+ "phf_generator",
+ "phf_shared 0.13.1",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.106",
 ]
 
 [[package]]
@@ -6064,6 +6100,15 @@ dependencies = [
  "siphasher",
 ]
 
+[[package]]
+name = "phf_shared"
+version = "0.13.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e57fef6bc5981e38c2ce2d63bfa546861309f875b8a75f092d1d54ae2d64f266"
+dependencies = [
+ "siphasher",
+]
+
 [[package]]
 name = "pin-project"
 version = "1.1.10"
diff --git a/Cargo.toml b/Cargo.toml
index b5adc580779..343273ed51b 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -126,6 +126,7 @@ glob = "0.3.2"
 goldenfile = "1"
 half = { version = "2.6", features = ["std", "num-traits"] }
 hashbrown = "0.16.0"
+hex = "0.4"
 humansize = "2.1.3"
 indicatif = "0.18.0"
 insta = "1.43"
@@ -155,6 +156,7 @@ parking_lot = { version = "0.12.3", features = ["nightly"] }
 parquet = "56"
 paste = "1.0.15"
 pco = "0.4.4"
+phf = { version = "0.13", features = ["macros"] }
 pin-project-lite = "0.2.15"
 primitive-types = { version = "0.14.0" }
 prost = "0.14"
diff --git a/bench-vortex/Cargo.toml b/bench-vortex/Cargo.toml
index 1e0dfa49f0e..93ace837333 100644
--- a/bench-vortex/Cargo.toml
+++ b/bench-vortex/Cargo.toml
@@ -47,6 +47,7 @@ erased-serde = { workspace = true }
 flate2 = "1"
 futures = { workspace = true }
 glob = { workspace = true }
+hex = { workspace = true }
 humansize = { workspace = true }
 indicatif = { workspace = true, features = ["futures"] }
 itertools = { workspace = true }
@@ -61,6 +62,7 @@ opentelemetry_sdk = { workspace = true }
 parking_lot = { workspace = true }
 parquet = { workspace = true, features = ["async"] }
 paste = { workspace = true }
+phf = { workspace = true }
 rand = { workspace = true }
 rayon = { workspace = true }
 regex = { workspace = true }
diff --git a/bench-vortex/src/bin/migrate_random_access.rs b/bench-vortex/src/bin/migrate_random_access.rs
new file mode 100644
index 00000000000..52500ae50a5
--- /dev/null
+++ b/bench-vortex/src/bin/migrate_random_access.rs
@@ -0,0 +1,172 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: Copyright the Vortex contributors
+
+//! Binary to migrate the random-access JSON benchmark data to a Vortex file.
+//!
+//! This reads the JSON file from `organized_data/random-access/random_access.json` and converts
+//! it to a Vortex file with the [`BenchmarkEntry`] schema.
+
+#![allow(clippy::expect_used, clippy::panic)]
+
+use std::env;
+use std::fs;
+
+use serde::Deserialize;
+use vortex::VortexSessionDefault;
+use vortex::array::IntoArray;
+use vortex::array::arrays::FixedSizeListArray;
+use vortex::array::arrays::PrimitiveArray;
+use vortex::array::arrays::StructArray;
+use vortex::array::validity::Validity;
+use vortex::buffer::Buffer;
+use vortex::compressor::CompactCompressor;
+use vortex::dtype::FieldNames;
+use vortex::file::WriteOptionsSessionExt;
+use vortex::file::WriteStrategyBuilder;
+use vortex::session::VortexSession;
+
+/// Name ID constants from `bench-vortex/src/website/names.rs`.
+mod name_ids {
+    pub const RANDOM_ACCESS: u32 = 2;
+    pub const VORTEX_NVME: u32 = 3;
+    pub const PARQUET_NVME: u32 = 4;
+    pub const LANCE_NVME: u32 = 5;
+}
+
+/// Represents a benchmark entry from the JSON file.
+#[derive(Debug, Deserialize)]
+struct JsonEntry {
+    name: String,
+    value: u64,
+    commit_id: String,
+    // Ignore other fields from JSON.
+    #[serde(flatten)]
+    _extra: serde_json::Value,
+}
+
+/// Maps the JSON `name` field to a series name ID.
+fn series_name_id(name: &str) -> u32 {
+    match name {
+        "random-access/vortex-tokio-local-disk" => name_ids::VORTEX_NVME,
+        "random-access/parquet-tokio-local-disk" => name_ids::PARQUET_NVME,
+        "random-access/lance-tokio-local-disk" => name_ids::LANCE_NVME,
+        _ => panic!("Unknown benchmark name: {}", name),
+    }
+}
+
+fn main() {
+    let runtime = tokio::runtime::Runtime::new().expect("Failed to create tokio runtime");
+
+    runtime.block_on(async_main());
+}
+
+async fn async_main() {
+    let session = VortexSession::default();
+
+    let args: Vec<String> = env::args().collect();
+    let input_path = args
+        .get(1)
+        .expect("Usage: migrate_random_access <input_json> <output_file>");
+    let output_path = args
+        .get(2)
+        .map(String::as_str)
+        .expect("Usage: migrate_random_access <input_json> <output_file>");
+
+    // Parse JSON.
+    let contents = fs::read_to_string(input_path).expect("Failed to read file");
+    let entries: Vec<JsonEntry> = serde_json::from_str(&contents).expect("Failed to parse JSON");
+
+    let num_entries = entries.len();
+    println!("Parsing {} entries from JSON...", num_entries);
+
+    // Extract fields into separate vectors.
+    let mut commit_id_bytes: Vec<u8> = Vec::with_capacity(num_entries * 20);
+    let mut benchmark_groups: Vec<u32> = Vec::with_capacity(num_entries);
+    let mut chart_names: Vec<u32> = Vec::with_capacity(num_entries);
+    let mut series_names: Vec<u32> = Vec::with_capacity(num_entries);
+    let mut values: Vec<u64> = Vec::with_capacity(num_entries);
+
+    for entry in &entries {
+        // Decode hex commit_id to 20 binary bytes.
+        let bytes = hex::decode(&entry.commit_id).expect("Invalid hex in commit_id");
+        assert_eq!(bytes.len(), 20, "commit_id must decode to 20 bytes");
+        commit_id_bytes.extend_from_slice(&bytes);
+
+        // All entries have the same benchmark_group and chart_name.
+        benchmark_groups.push(name_ids::RANDOM_ACCESS);
+        chart_names.push(name_ids::RANDOM_ACCESS);
+
+        // Map name to series_name ID.
+        series_names.push(series_name_id(&entry.name));
+
+        values.push(entry.value);
+    }
+
+    // Create arrays.
+
+    // commit_id: FixedSizeList<u8, 20>
+    let commit_id_elements =
+        PrimitiveArray::new(Buffer::from(commit_id_bytes), Validity::NonNullable);
+    let commit_id_array = FixedSizeListArray::try_new(
+        commit_id_elements.into_array(),
+        20,
+        Validity::NonNullable,
+        num_entries,
+    )
+    .expect("Failed to create commit_id array");
+
+    // benchmark_group: u32
+    let benchmark_group_array =
+        PrimitiveArray::new(Buffer::from(benchmark_groups), Validity::NonNullable);
+
+    // chart_name: u32
+    let chart_name_array = PrimitiveArray::new(Buffer::from(chart_names), Validity::NonNullable);
+
+    // series_name: u32
+    let series_name_array = PrimitiveArray::new(Buffer::from(series_names), Validity::NonNullable);
+
+    // value: u64
+    let value_array = PrimitiveArray::new(Buffer::from(values), Validity::NonNullable);
+
+    // Create struct array with all fields.
+    let struct_array = StructArray::try_new(
+        FieldNames::from([
+            "commit_id",
+            "benchmark_group",
+            "chart_name",
+            "series_name",
+            "value",
+        ]),
+        vec![
+            commit_id_array.into_array(),
+            benchmark_group_array.into_array(),
+            chart_name_array.into_array(),
+            series_name_array.into_array(),
+            value_array.into_array(),
+        ],
+        num_entries,
+        Validity::NonNullable,
+    )
+    .expect("Failed to create struct array");
+
+    println!("Created struct array with {} entries", num_entries);
+    println!("Schema: {}", struct_array.dtype());
+
+    // Write to Vortex file with compression.
+    let file = tokio::fs::File::create(output_path)
+        .await
+        .expect("Failed to create output file");
+
+    session
+        .write_options()
+        .with_strategy(
+            WriteStrategyBuilder::new()
+                .with_compressor(CompactCompressor::default())
+                .build(),
+        )
+        .write(file, struct_array.to_array_stream())
+        .await
+        .expect("Failed to write Vortex file");
+
+    println!("Wrote {} entries to {}", num_entries, output_path);
+}
diff --git a/bench-vortex/src/bin/test_s3_read.rs b/bench-vortex/src/bin/test_s3_read.rs
new file mode 100644
index 00000000000..d4e79812499
--- /dev/null
+++ b/bench-vortex/src/bin/test_s3_read.rs
@@ -0,0 +1,74 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: Copyright the Vortex contributors
+
+//! Test binary for reading benchmark entries from S3 and printing them.
+
+#![allow(clippy::expect_used)]
+
+use aws_config::BehaviorVersion;
+use aws_sdk_s3::Client;
+use bench_vortex::website::names::NAMES;
+use bench_vortex::website::read_s3::read_benchmark_entries;
+use vortex::VortexSessionDefault;
+use vortex::session::VortexSession;
+
+const BUCKET: &str = "vortex-benchmark-results-database";
+const KEY: &str = "test/random_access.vortex";
+
+fn main() {
+    let runtime = tokio::runtime::Runtime::new().expect("Failed to create tokio runtime");
+    runtime.block_on(async_main());
+}
+
+async fn async_main() {
+    let session = VortexSession::default();
+
+    // Load AWS config with SSO profile.
+    let config = aws_config::defaults(BehaviorVersion::latest())
+        .profile_name("PowerUserAccess-375504701696")
+        .load()
+        .await;
+    let client = Client::new(&config);
+
+    println!(
+        "Reading benchmark entries from s3://{}/{}...\n",
+        BUCKET, KEY
+    );
+
+    let entries = read_benchmark_entries(&client, &session, BUCKET, KEY)
+        .await
+        .expect("Failed to read benchmark entries");
+
+    println!("Read {} entries:\n", entries.len());
+
+    // Print header.
+    println!(
+        "{:<44} {:>15} {:>15} {:>15} {:>12}",
+        "commit_id", "benchmark_group", "chart_name", "series_name", "value"
+    );
+    println!("{}", "-".repeat(105));
+
+    // Print entries (limit to first 20 and last 5 for readability).
+    let show_first = 20;
+    let show_last = 5;
+
+    for (i, entry) in entries.iter().enumerate() {
+        if i < show_first || i >= entries.len() - show_last {
+            let benchmark_group = NAMES.get(&entry.benchmark_group.0).unwrap_or(&"unknown");
+            let chart_name = NAMES.get(&entry.chart_name.0).unwrap_or(&"unknown");
+            let series_name = NAMES.get(&entry.series_name.0).unwrap_or(&"unknown");
+
+            println!(
+                "{} {:>15} {:>15} {:>15} {:>12}",
+                entry.commit_id, benchmark_group, chart_name, series_name, entry.value
+            );
+        } else if i == show_first {
+            println!(
+                "... ({} more entries) ...",
+                entries.len() - show_first - show_last
+            );
+        }
+    }
+
+    println!("\nTotal: {} entries", entries.len());
+}
diff --git a/bench-vortex/src/bin/test_s3_update.rs b/bench-vortex/src/bin/test_s3_update.rs
new file mode 100644
index 00000000000..e855890aad2
--- /dev/null
+++ b/bench-vortex/src/bin/test_s3_update.rs
@@ -0,0 +1,277 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: Copyright the Vortex contributors
+
+//! Test binary for uploading a Vortex file to S3 and testing the `update_s3_object` function.
+
+#![allow(clippy::expect_used)]
+
+use std::env;
+use std::fs;
+
+use aws_config::BehaviorVersion;
+use aws_sdk_s3::Client;
+use aws_sdk_s3::primitives::ByteStream;
+use bench_vortex::website::update_s3::update_s3_object;
+use vortex::VortexSessionDefault;
+use vortex::array::Array;
+use vortex::array::builders::builder_with_capacity;
+use vortex::array::stream::ArrayStreamExt;
+use vortex::dtype::FieldNames;
+use vortex::file::OpenOptionsSessionExt;
+use vortex::scalar::Scalar;
+use vortex::session::VortexSession;
+
+const BUCKET: &str = "vortex-benchmark-results-database";
+const KEY: &str = "test/random_access.vortex";
+
+fn main() {
+    let runtime = tokio::runtime::Runtime::new().expect("Failed to create tokio runtime");
+    runtime.block_on(async_main());
+}
+
+async fn async_main() {
+    let session = VortexSession::default();
+
+    // Load AWS config with SSO profile.
+    let config = aws_config::defaults(BehaviorVersion::latest())
+        .profile_name("PowerUserAccess-375504701696")
+        .load()
+        .await;
+    let client = Client::new(&config);
+
+    // Check for --upload flag.
+    let args: Vec<String> = env::args().collect();
+    if args.iter().any(|a| a == "--upload") {
+        println!("Uploading random_access.vortex to S3...");
+        let local_path = "/Users/connor/spiral/vortex-data/vortex/vortex-wasm/random_access.vortex";
+        let file_bytes = fs::read(local_path).expect("Failed to read local file");
+        let size = file_bytes.len();
+
+        client
+            .put_object()
+            .bucket(BUCKET)
+            .key(KEY)
+            .body(ByteStream::from(file_bytes))
+            .send()
+            .await
+            .expect("Failed to upload to S3");
+
+        println!("Uploaded {} bytes to s3://{}/{}", size, BUCKET, KEY);
+    }
+
+    // Check for --concurrent flag to test atomicity with multiple concurrent updates.
+    let concurrent = args.iter().any(|a| a == "--concurrent");
+    let num_concurrent: usize = args
+        .iter()
+        .position(|a| a == "--concurrent")
+        .and_then(|i| args.get(i + 1))
+        .and_then(|s| s.parse().ok())
+        .unwrap_or(10);
+
+    if concurrent {
+        println!(
+            "\nTesting concurrent updates with {} tasks...",
+            num_concurrent
+        );
+
+        // Get initial count.
+        let initial_count = get_entry_count(&client, &session).await;
+        println!("Initial entry count: {}", initial_count);
+
+        // Spawn concurrent update tasks.
+        let mut handles = Vec::new();
+        for i in 0..num_concurrent {
+            let client = client.clone();
+            let session = session.clone();
+            handles.push(tokio::spawn(async move {
+                let result = update_s3_object(
+                    &client,
+                    &session,
+                    BUCKET,
+                    KEY,
+                    |existing_array| async move {
+                        let existing_len = existing_array.len();
+
+                        // Create a new entry to append.
+                        let new_entry = create_test_entry();
+
+                        // Build a new array with existing data + new entry.
+                        let dtype = existing_array.dtype().clone();
+                        let mut builder = builder_with_capacity(&dtype, existing_len + 1);
+                        builder.extend_from_array(&existing_array);
+                        builder.append_scalar(&new_entry)?;
+
+                        Ok(builder.finish())
+                    },
+                )
+                .await;
+
+                match result {
+                    Ok(()) => {
+                        println!("  Task {} succeeded", i);
+                        true
+                    }
+                    Err(e) => {
+                        println!("  Task {} failed: {}", i, e);
+                        false
+                    }
+                }
+            }));
+        }
+
+        // Wait for all tasks.
+        let mut successes = 0;
+        let mut failures = 0;
+        for handle in handles {
+            if handle.await.unwrap_or(false) {
+                successes += 1;
+            } else {
+                failures += 1;
+            }
+        }
+
+        // Verify final count.
+        let final_count = get_entry_count(&client, &session).await;
+        println!("\nResults:");
+        println!("  Successes: {}", successes);
+        println!("  Failures: {}", failures);
+        println!("  Initial count: {}", initial_count);
+        println!("  Final count: {}", final_count);
+        println!("  Expected count: {}", initial_count + successes);
+
+        if final_count == initial_count + successes {
+            println!(
+                "\n✓ Atomicity verified! All {} successful updates were applied.",
+                successes
+            );
+        } else {
+            println!("\n✗ Atomicity FAILED! Count mismatch.");
+        }
+    } else {
+        // Single update test.
+        println!("\nTesting update_s3_object...");
+
+        let result = update_s3_object(
+            &client,
+            &session,
+            BUCKET,
+            KEY,
+            |existing_array| async move {
+                let existing_len = existing_array.len();
+                println!("  Existing array has {} entries", existing_len);
+
+                // Create a new entry to append.
+                let new_entry = create_test_entry();
+
+                // Build a new array with existing data + new entry.
+                let dtype = existing_array.dtype().clone();
+                let mut builder = builder_with_capacity(&dtype, existing_len + 1);
+                builder.extend_from_array(&existing_array);
+                builder.append_scalar(&new_entry)?;
+
+                let result = builder.finish();
+                println!("  New array has {} entries", result.len());
+
+                Ok(result)
+            },
+        )
+        .await;
+
+        match result {
+            Ok(()) => {
+                println!("update_s3_object succeeded!");
+                let count = get_entry_count(&client, &session).await;
+                println!("Verified: updated file has {} entries", count);
+            }
+            Err(e) => {
+                println!("update_s3_object failed: {}", e);
+            }
+        }
+    }
+
+    println!("Done!");
+}
+
+async fn get_entry_count(client: &Client, session: &VortexSession) -> usize {
+    let get_result = client
+        .get_object()
+        .bucket(BUCKET)
+        .key(KEY)
+        .send()
+        .await
+        .expect("Failed to download file");
+
+    let bytes = get_result
+        .body
+        .collect()
+        .await
+        .expect("Failed to read body")
+        .into_bytes();
+
+    let file = session
+        .open_options()
+        .open_buffer(bytes)
+        .expect("Failed to open buffer");
+
+    let array = file
+        .scan()
+        .expect("Failed to scan")
+        .into_array_stream()
+        .expect("Failed to get stream")
+        .read_all()
+        .await
+        .expect("Failed to read all");
+
+    array.len()
+}
+
+/// Creates a test entry matching the BenchmarkEntry schema.
+fn create_test_entry() -> Scalar {
+    use std::sync::Arc;
+
+    use vortex::dtype::DType;
+    use vortex::dtype::Nullability::NonNullable;
+    use vortex::dtype::PType;
+
+    let u8_dtype = DType::Primitive(PType::U8, NonNullable);
+
+    // Build the dtype to match the schema:
+    // {commit_id=fixed_size_list(u8)[20], benchmark_group=u32, chart_name=u32, series_name=u32, value=u64}
+    let dtype = DType::Struct(
+        vortex::dtype::StructFields::new(
+            FieldNames::from([
+                "commit_id",
+                "benchmark_group",
+                "chart_name",
+                "series_name",
+                "value",
+            ]),
+            vec![
+                DType::FixedSizeList(Arc::new(u8_dtype.clone()), 20, NonNullable),
+                DType::Primitive(PType::U32, NonNullable),
+                DType::Primitive(PType::U32, NonNullable),
+                DType::Primitive(PType::U32, NonNullable),
+                DType::Primitive(PType::U64, NonNullable),
+            ],
+        ),
+        NonNullable,
+    );
+
+    // Create a test commit_id (20 bytes of 'x').
+    let commit_id_bytes: Vec<Scalar> = b"xxxxxxxxxxxxxxxxxxxx"
+        .iter()
+        .map(|&b| Scalar::primitive(b, NonNullable))
+        .collect();
+    let commit_id_scalar = Scalar::fixed_size_list(u8_dtype, commit_id_bytes, NonNullable);
+
+    Scalar::struct_(
+        dtype,
+        vec![
+            commit_id_scalar,
+            Scalar::primitive(2u32, NonNullable), // benchmark_group: random-access
+            Scalar::primitive(2u32, NonNullable), // chart_name: random-access
+            Scalar::primitive(3u32, NonNullable), // series_name: vortex-nvme
+            Scalar::primitive(999999u64, NonNullable), // value: test value
+        ],
+    )
+}
diff --git a/bench-vortex/src/lib.rs b/bench-vortex/src/lib.rs
index 2ec25d14030..f22fb3e7de1 100644
--- a/bench-vortex/src/lib.rs
+++ b/bench-vortex/src/lib.rs
@@ -42,6 +42,7 @@ pub mod statpopgen;
 pub mod tpcds;
 pub mod tpch;
 pub mod utils;
+pub mod website;
 
 pub use datasets::BenchmarkDataset;
 pub use datasets::file;
diff --git a/bench-vortex/src/website/entry.rs b/bench-vortex/src/website/entry.rs
new file mode 100644
index 00000000000..159cb9cd75d
--- /dev/null
+++ b/bench-vortex/src/website/entry.rs
@@ -0,0 +1,85 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: Copyright the Vortex contributors
+
+use std::fmt;
+
+use serde::Deserialize;
+use serde::Serialize;
+
+/// A benchmark entry, grouped by benchmark group, then chart name, then series name.
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+pub struct BenchmarkEntry {
+    // `StructArray`
+    pub commit_id: CommitId,     // fixed size list of `u8` (20 bytes)
+    pub benchmark_group: NameId, // `u32` array
+    pub chart_name: NameId,      // `u32` array
+    pub series_name: NameId,     // `u32` array
+    pub value: u64,              // `u64` array
+}
+
+/// String ID lookup so that we don't have to store the string every time.
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+pub struct NameId(pub u32);
+
+/// The 20-byte binary SHA-1 Git commit ID.
+#[derive(Clone, PartialEq, Eq)]
+pub struct CommitId(pub [u8; 20]);
+
+impl fmt::Display for CommitId {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        write!(f, "{}", hex::encode(self.0))
+    }
+}
+
+impl fmt::Debug for CommitId {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        write!(f, "CommitId(\"{}\")", hex::encode(self.0))
+    }
+}
+
+impl Serialize for CommitId {
+    fn serialize<S>(&self, serializer: S) -> Result<S::Ok, S::Error>
+    where
+        S: serde::Serializer,
+    {
+        serializer.serialize_str(&hex::encode(self.0))
+    }
+}
+
+impl<'de> Deserialize<'de> for CommitId {
+    fn deserialize<D>(deserializer: D) -> Result<Self, D::Error>
+    where
+        D: serde::Deserializer<'de>,
+    {
+        struct CommitIdVisitor;
+
+        impl<'de> serde::de::Visitor<'de> for CommitIdVisitor {
+            type Value = CommitId;
+
+            fn expecting(&self, formatter: &mut fmt::Formatter) -> fmt::Result {
+                formatter.write_str("a 40-character hexadecimal string")
+            }
+
+            fn visit_str<E>(self, value: &str) -> Result<Self::Value, E>
+            where
+                E: serde::de::Error,
+            {
+                if value.len() != 40 {
+                    return Err(E::custom(format!(
+                        "expected 40 hex characters, got {}",
+                        value.len()
+                    )));
+                }
+
+                let bytes = hex::decode(value)
+                    .map_err(|e| E::custom(format!("invalid hexadecimal: {}", e)))?;
+
+                let mut arr = [0u8; 20];
+                arr.copy_from_slice(&bytes);
+                Ok(CommitId(arr))
+            }
+        }
+
+        deserializer.deserialize_str(CommitIdVisitor)
+    }
+}
diff --git a/bench-vortex/src/website/mod.rs b/bench-vortex/src/website/mod.rs
new file mode 100644
index 00000000000..b9fbb134503
--- /dev/null
+++ b/bench-vortex/src/website/mod.rs
@@ -0,0 +1,7 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: Copyright the Vortex contributors
+
+pub mod entry;
+pub mod names;
+pub mod read_s3;
+pub mod update_s3;
diff --git a/bench-vortex/src/website/names.rs b/bench-vortex/src/website/names.rs
new file mode 100644
index 00000000000..86f34733147
--- /dev/null
+++ b/bench-vortex/src/website/names.rs
@@ -0,0 +1,15 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: Copyright the Vortex contributors
+
+use phf::Map;
+use phf::phf_map;
+
+// TODO(connor): This should probably be generated smarter.
+pub static NAMES: Map<u32, &'static str> = phf_map! {
+    0 => "null",
+    1 => "invalid",
+    2 => "random-access",
+    3 => "vortex-nvme",
+    4 => "parquet-nvme",
+    5 => "lance-nvme",
+};
diff --git a/bench-vortex/src/website/read_s3.rs b/bench-vortex/src/website/read_s3.rs
new file mode 100644
index 00000000000..6f68afbc437
--- /dev/null
+++ b/bench-vortex/src/website/read_s3.rs
@@ -0,0 +1,137 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: Copyright the Vortex contributors
+
+//! Functions for reading benchmark data from S3.
+
+use aws_sdk_s3::Client;
+use vortex::array::Array;
+use vortex::array::ToCanonical;
+use vortex::array::arrays::FixedSizeListArray;
+use vortex::array::arrays::PrimitiveArray;
+use vortex::array::arrays::StructArray;
+use vortex::array::stream::ArrayStreamExt;
+use vortex::error::VortexResult;
+use vortex::error::vortex_bail;
+use vortex::error::vortex_err;
+use vortex::file::OpenOptionsSessionExt;
+use vortex::session::VortexSession;
+
+use super::entry::BenchmarkEntry;
+use super::entry::CommitId;
+use super::entry::NameId;
+
+/// Reads benchmark entries from an S3 object containing a Vortex file.
+///
+/// This function downloads the Vortex file from S3, parses the columnar struct array, and converts
+/// it to a vector of row-wise [`BenchmarkEntry`] structs.
+///
+/// # Arguments
+///
+/// * `client` - The AWS S3 client to use for operations.
+/// * `session` - The Vortex session for reading files.
+/// * `bucket` - The S3 bucket name.
+/// * `key` - The S3 object key.
+///
+/// # Errors
+///
+/// Returns an error if:
+/// - The S3 object does not exist or cannot be downloaded.
+/// - The file is not a valid Vortex file.
+/// - The schema does not match the expected [`BenchmarkEntry`] schema.
+pub async fn read_benchmark_entries(
+    client: &Client,
+    session: &VortexSession,
+    bucket: &str,
+    key: &str,
+) -> VortexResult<Vec<BenchmarkEntry>> {
+    // Download the file from S3.
+    let get_result = client
+        .get_object()
+        .bucket(bucket)
+        .key(key)
+        .send()
+        .await
+        .map_err(|e| vortex_err!("Failed to download S3 object: {}", e))?;
+
+    let bytes = get_result
+        .body
+        .collect()
+        .await
+        .map_err(|e| vortex_err!("Failed to read S3 object body: {}", e))?
+        .into_bytes();
+
+    // Parse as Vortex file and read all data.
+    let file = session.open_options().open_buffer(bytes)?;
+    let array = file.scan()?.into_array_stream()?.read_all().await?;
+
+    // Convert the array to benchmark entries.
+    array_to_benchmark_entries(&array)
+}
+
+/// Converts a Vortex array (expected to be a struct array) into a vector of [`BenchmarkEntry`].
+///
+/// The array must have the following schema:
+/// - `commit_id`: FixedSizeList<u8, 20>
+/// - `benchmark_group`: u32
+/// - `chart_name`: u32
+/// - `series_name`: u32
+/// - `value`: u64
+pub fn array_to_benchmark_entries(array: &dyn Array) -> VortexResult<Vec<BenchmarkEntry>> {
+    // Convert to canonical struct array.
+    let struct_array: StructArray = array.to_struct();
+
+    let len = struct_array.len();
+    let mut entries = Vec::with_capacity(len);
+
+    // Extract each field.
+    let commit_id_field = struct_array.field_by_name("commit_id")?;
+    let benchmark_group_field = struct_array.field_by_name("benchmark_group")?;
+    let chart_name_field = struct_array.field_by_name("chart_name")?;
+    let series_name_field = struct_array.field_by_name("series_name")?;
+    let value_field = struct_array.field_by_name("value")?;
+
+    // Convert commit_id to canonical fixed-size list and get the underlying bytes.
+    let commit_id_fsl: FixedSizeListArray = commit_id_field.to_fixed_size_list();
+    if commit_id_fsl.list_size() != 20 {
+        vortex_bail!(
+            "Expected commit_id to have list_size 20, got {}",
+            commit_id_fsl.list_size()
+        );
+    }
+
+    // Get the elements as a primitive array of u8.
+    let commit_id_elements: PrimitiveArray = commit_id_fsl.elements().to_primitive();
+    let commit_id_bytes: &[u8] = commit_id_elements.as_slice();
+
+    // Convert primitive fields.
+    let benchmark_group_prim: PrimitiveArray = benchmark_group_field.to_primitive();
+    let benchmark_groups: &[u32] = benchmark_group_prim.as_slice();
+
+    let chart_name_prim: PrimitiveArray = chart_name_field.to_primitive();
+    let chart_names: &[u32] = chart_name_prim.as_slice();
+
+    let series_name_prim: PrimitiveArray = series_name_field.to_primitive();
+    let series_names: &[u32] = series_name_prim.as_slice();
+
+    let value_prim: PrimitiveArray = value_field.to_primitive();
+    let values: &[u64] = value_prim.as_slice();
+
+    // Build the entries.
+    for i in 0..len {
+        // Extract the 20-byte commit_id for this row.
+        let start = i * 20;
+        let end = start + 20;
+        let mut commit_id_arr = [0u8; 20];
+        commit_id_arr.copy_from_slice(&commit_id_bytes[start..end]);
+
+        entries.push(BenchmarkEntry {
+            commit_id: CommitId(commit_id_arr),
+            benchmark_group: NameId(benchmark_groups[i]),
+            chart_name: NameId(chart_names[i]),
+            series_name: NameId(series_names[i]),
+            value: values[i],
+        });
+    }
+
+    Ok(entries)
+}
diff --git a/bench-vortex/src/website/update_s3.rs b/bench-vortex/src/website/update_s3.rs
new file mode 100644
index 00000000000..bd195667678
--- /dev/null
+++ b/bench-vortex/src/website/update_s3.rs
@@ -0,0 +1,218 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: Copyright the Vortex contributors
+
+//! Atomic S3 update operations for Vortex files.
+//!
+//! This module provides functions to read a Vortex file from S3, apply a transformation, and write
+//! the result back atomically using optimistic concurrency control via ETags.
+
+use std::future::Future;
+use std::time::Duration;
+
+use aws_sdk_s3::Client;
+use aws_sdk_s3::error::ProvideErrorMetadata;
+use aws_sdk_s3::error::SdkError;
+use aws_sdk_s3::primitives::ByteStream;
+use vortex::array::ArrayRef;
+use vortex::array::stream::ArrayStreamExt;
+use vortex::error::VortexError;
+use vortex::error::VortexResult;
+use vortex::error::vortex_bail;
+use vortex::error::vortex_err;
+use vortex::file::OpenOptionsSessionExt;
+use vortex::file::WriteOptionsSessionExt;
+use vortex::session::VortexSession;
+
+const INITIAL_DELAY: Duration = Duration::from_millis(100);
+const MAX_DELAY: Duration = Duration::from_secs(60);
+
+/// Internal error type for retry control.
+enum UpdateError {
+    /// The ETag has changed since we read the object. The operation should be retried.
+    EtagMismatch,
+    /// A non-retryable error occurred.
+    Other(VortexError),
+}
+
+impl From<VortexError> for UpdateError {
+    fn from(e: VortexError) -> Self {
+        UpdateError::Other(e)
+    }
+}
+
+/// Updates a Vortex file stored in S3 atomically using optimistic concurrency control.
+///
+/// This function reads the existing file from S3, applies a transformation, and writes it back
+/// using conditional puts with ETags. If another process modifies the file between read and write,
+/// the operation is automatically retried with exponential backoff.
+///
+/// # Arguments
+///
+/// * `client` - The AWS S3 client to use for operations.
+/// * `session` - The Vortex session for reading and writing files.
+/// * `bucket` - The S3 bucket name.
+/// * `key` - The S3 object key.
+/// * `update_fn` - An async function that takes the file's array data and returns the updated
+///   array. The returned array must have the same dtype as the input. This function may be called
+///   multiple times if retries are needed.
+///
+/// # Errors
+///
+/// Returns an error if:
+/// - The S3 object does not exist.
+/// - The update function returns an error.
+/// - The update function returns an array with a different dtype.
+/// - The retry delay reaches the maximum (60 seconds) without success.
+/// - An S3 operation fails with a non-retryable error.
+#[expect(clippy::use_debug)]
+pub async fn update_s3_object<F, Fut>(
+    client: &Client,
+    session: &VortexSession,
+    bucket: &str,
+    key: &str,
+    mut update_fn: F,
+) -> VortexResult<()>
+where
+    F: FnMut(ArrayRef) -> Fut,
+    Fut: Future<Output = VortexResult<ArrayRef>>,
+{
+    let mut delay = INITIAL_DELAY;
+    let mut attempt = 0;
+
+    loop {
+        match try_update_s3_object(client, session, bucket, key, &mut update_fn).await {
+            Ok(()) => return Ok(()),
+            Err(UpdateError::EtagMismatch) => {
+                attempt += 1;
+                tracing::debug!(
+                    "ETag mismatch on attempt {}. Retrying after {:?}...",
+                    attempt,
+                    delay
+                );
+            }
+            Err(UpdateError::Other(e)) => {
+                attempt += 1;
+                eprintln!(
+                    "Error on attempt {}: {}. Retrying after {:?}...",
+                    attempt, e, delay
+                );
+            }
+        }
+
+        // If we've reached max delay, fail.
+        if delay >= MAX_DELAY {
+            vortex_bail!(
+                "Failed to update S3 object after {} attempts (delay reached {:?})",
+                attempt,
+                MAX_DELAY
+            );
+        }
+
+        tokio::time::sleep(delay).await;
+
+        // Exponential backoff: double the delay, capped at MAX_DELAY.
+        delay = (delay * 2).min(MAX_DELAY);
+    }
+}
+
+/// Attempts a single update of an S3 object.
+async fn try_update_s3_object<F, Fut>(
+    client: &Client,
+    session: &VortexSession,
+    bucket: &str,
+    key: &str,
+    update_fn: &mut F,
+) -> Result<(), UpdateError>
+where
+    F: FnMut(ArrayRef) -> Fut,
+    Fut: Future<Output = VortexResult<ArrayRef>>,
+{
+    // Get current ETag.
+    let head = client
+        .head_object()
+        .bucket(bucket)
+        .key(key)
+        .send()
+        .await
+        .map_err(|e| vortex_err!("Failed to get object metadata: {}", e))?;
+
+    let etag = head
+        .e_tag()
+        .ok_or_else(|| vortex_err!("No ETag returned from head_object"))?
+        .to_string();
+
+    // Download with if-match.
+    let get_result = client
+        .get_object()
+        .bucket(bucket)
+        .key(key)
+        .if_match(&etag)
+        .send()
+        .await;
+
+    let get_output = match get_result {
+        Ok(output) => output,
+        Err(SdkError::ServiceError(err)) if err.err().code() == Some("PreconditionFailed") => {
+            return Err(UpdateError::EtagMismatch);
+        }
+        Err(e) => {
+            return Err(UpdateError::Other(vortex_err!(
+                "Failed to download object: {}",
+                e
+            )));
+        }
+    };
+
+    let existing_bytes = get_output
+        .body
+        .collect()
+        .await
+        .map_err(|e| vortex_err!("Failed to read object body: {}", e))?
+        .into_bytes();
+
+    // Parse as Vortex file and read all data.
+    let file = session.open_options().open_buffer(existing_bytes)?;
+    let original_dtype = file.dtype().clone();
+    let existing_array = file.scan()?.into_array_stream()?.read_all().await?;
+
+    // Apply the user's update function.
+    let updated_array = update_fn(existing_array).await?;
+
+    // Validate that the dtype matches.
+    if updated_array.dtype() != &original_dtype {
+        return Err(UpdateError::Other(vortex_err!(
+            "Update function changed dtype from {} to {}. \
+             The updated array must have the same dtype as the input file.",
+            original_dtype,
+            updated_array.dtype()
+        )));
+    }
+
+    // Serialize updated array to Vortex file bytes.
+    let mut buffer = Vec::new();
+    session
+        .write_options()
+        .write(&mut buffer, updated_array.to_array_stream())
+        .await?;
+
+    // Upload with if-match.
+    let put_result = client
+        .put_object()
+        .bucket(bucket)
+        .key(key)
+        .if_match(&etag)
+        .body(ByteStream::from(buffer))
+        .send()
+        .await;
+
+    match put_result {
+        Ok(_) => Ok(()),
+        Err(SdkError::ServiceError(err)) if err.err().code() == Some("PreconditionFailed") => {
+            Err(UpdateError::EtagMismatch)
+        }
+        Err(e) => Err(UpdateError::Other(vortex_err!(
+            "Failed to upload object: {}",
+            e
+        ))),
+    }
+}
diff --git a/plan.md b/plan.md
new file mode 100644
index 00000000000..5ac44435071
--- /dev/null
+++ b/plan.md
@@ -0,0 +1,81 @@
+<!--
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: Copyright the Vortex contributors
+-->
+
+# Hack Week
+
+## Goals
+
+_Approximately in order of priority:_
+
+- Get faster load times of Vortex benchmarks on the web by using Vortex itself to store benchmarks measurements instead of JSON
+- Make Vortex work reliably on the web via WASM
+- Allow addition/removal of different benchmark measurements with schema evolution on Vortex
+- Make the benchmarks website easier to read / more understandable
+- Rewrite the entire benchmarks website to a WASM framework like Dioxus
+- (Stretch) Make benchmarks website more dynamic
+- (Stretch) Add Vortex demo in the browser
+- (Stretch) Add Vortex vs. Parquet demo in the browser
+- (Stretch) Add wasm-bindgen bindings for Vortex?
+
+## Plan of Attack
+
+- Design (at a high level) a better benchmarks website (figure out what components and pages it needs, plus general layout)
+- Figure out the minimal API for the current benchmark website
+- If the current JavaScript code conflicts than the new design, refactor the architecture of the website so that it is easy to switch out the implementations
+- Determine the schema of each of the current benchmark (and the evolution of each over time)
+- Figure out if the current schemas make sense or if they need to change
+- Design extensible(?) Vortex schemas for benchmarking
+- Migrate all existing data to Vortex files
+- Design writer (append-only) interface for adding benchmark measurements that can evolve its schema
+- Design reader interface for loading specific columns of Vortex from S3 and parsing data to a format easily read by JavaScript (should probably be streaming over chunks?)
+- Implement the reader and writer interfaces with wasm-bindgen
+- Migrate the JavaScript code to use the Rust bindings
+- Test
+
+
+### Ideas
+
+```rust
+/// The 20 byte SHA-1 Git commit ID.
+pub struct CommitId([u8; 20]);
+
+/// String ID lookup so that we don't have to store the string every time.
+pub struct NameId(u32);
+
+/// A benchmark entry, grouped by benchmark group, then chart name, then series name.
+pub struct BenchmarkEntry {     // `StructArray`
+    commit_id: CommitId,        // fixed size list of `u8`?
+    benchmark_group: NameId,    // `u16` array
+    chart_name: NameId,         // `u16` array
+    series_name: NameId,        // `u16` array
+    value: u64,                 // `u64` array
+}
+
+fn main() {
+    println!("{}", size_of::<BenchmarkEntry>()); // 64
+    println!("{}", align_of::<BenchmarkEntry>()); // 8
+}
+```
+
+### Findings
+
+- There is an insane amount of wasted space in `data.json`
+- The amount of actual benchmarking data is actually very small, and it can easily fit in memory of
+  the CI runners
+- We can simply read the entire file of all benchmarking data into memory, decompress in memory, add
+  a new entry, compress, and then write back to S3
+
+
+### Things to update
+
+Start with just the random access benchmark
+
+
+generate a bunch of fake data and upload it to S3
+
+- Add bindings to read and write `BenchmarkEntry` vortex arrays to and from S3
+USE IPC FORMAT INSTEAD
+- `query_bench` to post directly to S3
+- `random_access` and `compress` to also post directly to S3

From a40cfc834c2eb62095eb48905f100fb20d37a104 Mon Sep 17 00:00:00 2001
From: Connor Tsui <connor.tsui20@gmail.com>
Date: Tue, 2 Dec 2025 15:10:59 -0500
Subject: [PATCH 06/30] add helper functions

Signed-off-by: Connor Tsui <connor.tsui20@gmail.com>
---
 bench-vortex/src/website/entry.rs     | 95 +++++++++++++++++++++++++--
 bench-vortex/src/website/update_s3.rs | 41 ++++++++++++
 2 files changed, 130 insertions(+), 6 deletions(-)

diff --git a/bench-vortex/src/website/entry.rs b/bench-vortex/src/website/entry.rs
index 159cb9cd75d..3c0ccb1caa4 100644
--- a/bench-vortex/src/website/entry.rs
+++ b/bench-vortex/src/website/entry.rs
@@ -2,19 +2,102 @@
 // SPDX-FileCopyrightText: Copyright the Vortex contributors
 
 use std::fmt;
+use std::sync::Arc;
 
 use serde::Deserialize;
 use serde::Serialize;
+use vortex::dtype::DType;
+use vortex::dtype::FieldNames;
+use vortex::dtype::Nullability::NonNullable;
+use vortex::dtype::PType;
+use vortex::dtype::StructFields;
+use vortex::scalar::Scalar;
 
 /// A benchmark entry, grouped by benchmark group, then chart name, then series name.
 #[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
 pub struct BenchmarkEntry {
-    // `StructArray`
-    pub commit_id: CommitId,     // fixed size list of `u8` (20 bytes)
-    pub benchmark_group: NameId, // `u32` array
-    pub chart_name: NameId,      // `u32` array
-    pub series_name: NameId,     // `u32` array
-    pub value: u64,              // `u64` array
+    pub commit_id: CommitId,
+    pub benchmark_group: NameId,
+    pub chart_name: NameId,
+    pub series_name: NameId,
+    pub value: u64,
+}
+
+impl BenchmarkEntry {
+    pub fn new(
+        commit_id: CommitId,
+        benchmark_group: NameId,
+        chart_name: NameId,
+        series_name: NameId,
+        value: u64,
+    ) -> Self {
+        Self {
+            commit_id,
+            benchmark_group,
+            chart_name,
+            series_name,
+            value,
+        }
+    }
+
+    /// Returns the [`DType`] for a [`BenchmarkEntry`].
+    ///
+    /// The schema is:
+    /// - `commit_id`: `FixedSizeList<u8, 20>` (20-byte binary SHA-1)
+    /// - `benchmark_group`: `u32`
+    /// - `chart_name`: `u32`
+    /// - `series_name`: `u32`
+    /// - `value`: `u64`
+    pub fn dtype() -> DType {
+        DType::Struct(
+            StructFields::new(
+                FieldNames::from([
+                    "commit_id",
+                    "benchmark_group",
+                    "chart_name",
+                    "series_name",
+                    "value",
+                ]),
+                vec![
+                    DType::FixedSizeList(
+                        Arc::new(DType::Primitive(PType::U8, NonNullable)),
+                        20,
+                        NonNullable,
+                    ),
+                    DType::Primitive(PType::U32, NonNullable),
+                    DType::Primitive(PType::U32, NonNullable),
+                    DType::Primitive(PType::U32, NonNullable),
+                    DType::Primitive(PType::U64, NonNullable),
+                ],
+            ),
+            NonNullable,
+        )
+    }
+
+    /// Converts a [`BenchmarkEntry`] to a [`Scalar`].
+    pub fn into_scalar(&self) -> Scalar {
+        let u8_dtype = DType::Primitive(PType::U8, NonNullable);
+
+        // Convert the 20-byte commit_id to a FixedSizeList scalar.
+        let commit_id_bytes: Vec<Scalar> = self
+            .commit_id
+            .0
+            .iter()
+            .map(|&b| Scalar::primitive(b, NonNullable))
+            .collect();
+        let commit_id_scalar = Scalar::fixed_size_list(u8_dtype, commit_id_bytes, NonNullable);
+
+        Scalar::struct_(
+            BenchmarkEntry::dtype(),
+            vec![
+                commit_id_scalar,
+                Scalar::primitive(self.benchmark_group.0, NonNullable),
+                Scalar::primitive(self.chart_name.0, NonNullable),
+                Scalar::primitive(self.series_name.0, NonNullable),
+                Scalar::primitive(self.value, NonNullable),
+            ],
+        )
+    }
 }
 
 /// String ID lookup so that we don't have to store the string every time.
diff --git a/bench-vortex/src/website/update_s3.rs b/bench-vortex/src/website/update_s3.rs
index bd195667678..0ffd259ecfc 100644
--- a/bench-vortex/src/website/update_s3.rs
+++ b/bench-vortex/src/website/update_s3.rs
@@ -14,6 +14,7 @@ use aws_sdk_s3::error::ProvideErrorMetadata;
 use aws_sdk_s3::error::SdkError;
 use aws_sdk_s3::primitives::ByteStream;
 use vortex::array::ArrayRef;
+use vortex::array::builders::builder_with_capacity;
 use vortex::array::stream::ArrayStreamExt;
 use vortex::error::VortexError;
 use vortex::error::VortexResult;
@@ -23,6 +24,8 @@ use vortex::file::OpenOptionsSessionExt;
 use vortex::file::WriteOptionsSessionExt;
 use vortex::session::VortexSession;
 
+use super::entry::BenchmarkEntry;
+
 const INITIAL_DELAY: Duration = Duration::from_millis(100);
 const MAX_DELAY: Duration = Duration::from_secs(60);
 
@@ -216,3 +219,41 @@ where
         ))),
     }
 }
+
+/// Appends a single [`BenchmarkEntry`] to a Vortex file stored in S3.
+///
+/// This function uses [`update_s3_object`] with optimistic concurrency control to atomically
+/// append the entry to the existing data. If concurrent modifications are detected, the operation
+/// is automatically retried.
+///
+/// # Arguments
+///
+/// * `client` - The AWS S3 client.
+/// * `session` - The Vortex session for reading and writing files.
+/// * `bucket` - The S3 bucket name.
+/// * `key` - The S3 object key.
+/// * `entry` - The benchmark entry to append.
+pub async fn append_benchmark_entry(
+    client: &Client,
+    session: &VortexSession,
+    bucket: &str,
+    key: &str,
+    entry: &BenchmarkEntry,
+) -> VortexResult<()> {
+    let scalar = entry.into_scalar();
+
+    update_s3_object(client, session, bucket, key, |existing_array| {
+        let scalar = scalar.clone();
+        async move {
+            let existing_len = existing_array.len();
+            let dtype = existing_array.dtype().clone();
+
+            let mut builder = builder_with_capacity(&dtype, existing_len + 1);
+            builder.extend_from_array(&existing_array);
+            builder.append_scalar(&scalar)?;
+
+            Ok(builder.finish())
+        }
+    })
+    .await
+}

From 09ca0e5a6785ea99719da7d2a3d9f52716285592 Mon Sep 17 00:00:00 2001
From: Connor Tsui <connor.tsui20@gmail.com>
Date: Tue, 2 Dec 2025 15:59:30 -0500
Subject: [PATCH 07/30] rip out aws sdk and move to vortex-wasm

Signed-off-by: Connor Tsui <connor.tsui20@gmail.com>
---
 Cargo.lock                                    |  23 ++
 bench-vortex/src/bin/test_s3_update.rs        | 277 ----------------
 bench-vortex/src/lib.rs                       |   1 -
 bench-vortex/src/website/update_s3.rs         | 259 ---------------
 vortex-wasm/Cargo.toml                        |  32 ++
 .../src/bin/migrate_random_access.rs          |   0
 .../src/bin/test_s3_read.rs                   |  21 +-
 vortex-wasm/src/bin/test_s3_update.rs         | 127 ++++++++
 vortex-wasm/src/lib.rs                        |  82 +++++
 .../src/website/entry.rs                      |   0
 .../src/website/mod.rs                        |   0
 .../src/website/names.rs                      |   3 +
 .../src/website/read_s3.rs                    |  46 +--
 vortex-wasm/src/website/update_s3.rs          | 298 ++++++++++++++++++
 14 files changed, 593 insertions(+), 576 deletions(-)
 delete mode 100644 bench-vortex/src/bin/test_s3_update.rs
 delete mode 100644 bench-vortex/src/website/update_s3.rs
 rename {bench-vortex => vortex-wasm}/src/bin/migrate_random_access.rs (100%)
 rename {bench-vortex => vortex-wasm}/src/bin/test_s3_read.rs (74%)
 create mode 100644 vortex-wasm/src/bin/test_s3_update.rs
 rename {bench-vortex => vortex-wasm}/src/website/entry.rs (100%)
 rename {bench-vortex => vortex-wasm}/src/website/mod.rs (100%)
 rename {bench-vortex => vortex-wasm}/src/website/names.rs (79%)
 rename {bench-vortex => vortex-wasm}/src/website/read_s3.rs (80%)
 create mode 100644 vortex-wasm/src/website/update_s3.rs

diff --git a/Cargo.lock b/Cargo.lock
index 2737b17cb60..977f6ef927c 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -7353,6 +7353,17 @@ dependencies = [
  "serde",
 ]
 
+[[package]]
+name = "serde-wasm-bindgen"
+version = "0.6.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8302e169f0eddcc139c70f139d19d6467353af16f9fce27e8c30158036a1e16b"
+dependencies = [
+ "js-sys",
+ "serde",
+ "wasm-bindgen",
+]
+
 [[package]]
 name = "serde_core"
 version = "1.0.228"
@@ -9622,8 +9633,17 @@ name = "vortex-wasm"
 version = "0.1.0"
 dependencies = [
  "async-fs",
+ "hex",
+ "js-sys",
+ "phf 0.13.1",
+ "reqwest",
  "serde",
+ "serde-wasm-bindgen",
  "serde_json",
+ "tempfile",
+ "tokio",
+ "tracing",
+ "vortex",
  "vortex-array",
  "vortex-buffer",
  "vortex-dtype",
@@ -9634,6 +9654,9 @@ dependencies = [
  "vortex-metrics",
  "vortex-scalar",
  "vortex-session",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
 ]
 
 [[package]]
diff --git a/bench-vortex/src/bin/test_s3_update.rs b/bench-vortex/src/bin/test_s3_update.rs
deleted file mode 100644
index e855890aad2..00000000000
--- a/bench-vortex/src/bin/test_s3_update.rs
+++ /dev/null
@@ -1,277 +0,0 @@
-// SPDX-License-Identifier: Apache-2.0
-// SPDX-FileCopyrightText: Copyright the Vortex contributors
-
-//! Test binary for uploading a Vortex file to S3 and testing the `update_s3_object` function.
-
-#![allow(clippy::expect_used)]
-
-use std::env;
-use std::fs;
-
-use aws_config::BehaviorVersion;
-use aws_sdk_s3::Client;
-use aws_sdk_s3::primitives::ByteStream;
-use bench_vortex::website::update_s3::update_s3_object;
-use vortex::VortexSessionDefault;
-use vortex::array::Array;
-use vortex::array::builders::builder_with_capacity;
-use vortex::array::stream::ArrayStreamExt;
-use vortex::dtype::FieldNames;
-use vortex::file::OpenOptionsSessionExt;
-use vortex::scalar::Scalar;
-use vortex::session::VortexSession;
-
-const BUCKET: &str = "vortex-benchmark-results-database";
-const KEY: &str = "test/random_access.vortex";
-
-fn main() {
-    let runtime = tokio::runtime::Runtime::new().expect("Failed to create tokio runtime");
-    runtime.block_on(async_main());
-}
-
-async fn async_main() {
-    let session = VortexSession::default();
-
-    // Load AWS config with SSO profile.
-    let config = aws_config::defaults(BehaviorVersion::latest())
-        .profile_name("PowerUserAccess-375504701696")
-        .load()
-        .await;
-    let client = Client::new(&config);
-
-    // Check for --upload flag.
-    let args: Vec<String> = env::args().collect();
-    if args.iter().any(|a| a == "--upload") {
-        println!("Uploading random_access.vortex to S3...");
-        let local_path = "/Users/connor/spiral/vortex-data/vortex/vortex-wasm/random_access.vortex";
-        let file_bytes = fs::read(local_path).expect("Failed to read local file");
-        let size = file_bytes.len();
-
-        client
-            .put_object()
-            .bucket(BUCKET)
-            .key(KEY)
-            .body(ByteStream::from(file_bytes))
-            .send()
-            .await
-            .expect("Failed to upload to S3");
-
-        println!("Uploaded {} bytes to s3://{}/{}", size, BUCKET, KEY);
-    }
-
-    // Check for --concurrent flag to test atomicity with multiple concurrent updates.
-    let concurrent = args.iter().any(|a| a == "--concurrent");
-    let num_concurrent: usize = args
-        .iter()
-        .position(|a| a == "--concurrent")
-        .and_then(|i| args.get(i + 1))
-        .and_then(|s| s.parse().ok())
-        .unwrap_or(10);
-
-    if concurrent {
-        println!(
-            "\nTesting concurrent updates with {} tasks...",
-            num_concurrent
-        );
-
-        // Get initial count.
-        let initial_count = get_entry_count(&client, &session).await;
-        println!("Initial entry count: {}", initial_count);
-
-        // Spawn concurrent update tasks.
-        let mut handles = Vec::new();
-        for i in 0..num_concurrent {
-            let client = client.clone();
-            let session = session.clone();
-            handles.push(tokio::spawn(async move {
-                let result = update_s3_object(
-                    &client,
-                    &session,
-                    BUCKET,
-                    KEY,
-                    |existing_array| async move {
-                        let existing_len = existing_array.len();
-
-                        // Create a new entry to append.
-                        let new_entry = create_test_entry();
-
-                        // Build a new array with existing data + new entry.
-                        let dtype = existing_array.dtype().clone();
-                        let mut builder = builder_with_capacity(&dtype, existing_len + 1);
-                        builder.extend_from_array(&existing_array);
-                        builder.append_scalar(&new_entry)?;
-
-                        Ok(builder.finish())
-                    },
-                )
-                .await;
-
-                match result {
-                    Ok(()) => {
-                        println!("  Task {} succeeded", i);
-                        true
-                    }
-                    Err(e) => {
-                        println!("  Task {} failed: {}", i, e);
-                        false
-                    }
-                }
-            }));
-        }
-
-        // Wait for all tasks.
-        let mut successes = 0;
-        let mut failures = 0;
-        for handle in handles {
-            if handle.await.unwrap_or(false) {
-                successes += 1;
-            } else {
-                failures += 1;
-            }
-        }
-
-        // Verify final count.
-        let final_count = get_entry_count(&client, &session).await;
-        println!("\nResults:");
-        println!("  Successes: {}", successes);
-        println!("  Failures: {}", failures);
-        println!("  Initial count: {}", initial_count);
-        println!("  Final count: {}", final_count);
-        println!("  Expected count: {}", initial_count + successes);
-
-        if final_count == initial_count + successes {
-            println!(
-                "\n✓ Atomicity verified! All {} successful updates were applied.",
-                successes
-            );
-        } else {
-            println!("\n✗ Atomicity FAILED! Count mismatch.");
-        }
-    } else {
-        // Single update test.
-        println!("\nTesting update_s3_object...");
-
-        let result = update_s3_object(
-            &client,
-            &session,
-            BUCKET,
-            KEY,
-            |existing_array| async move {
-                let existing_len = existing_array.len();
-                println!("  Existing array has {} entries", existing_len);
-
-                // Create a new entry to append.
-                let new_entry = create_test_entry();
-
-                // Build a new array with existing data + new entry.
-                let dtype = existing_array.dtype().clone();
-                let mut builder = builder_with_capacity(&dtype, existing_len + 1);
-                builder.extend_from_array(&existing_array);
-                builder.append_scalar(&new_entry)?;
-
-                let result = builder.finish();
-                println!("  New array has {} entries", result.len());
-
-                Ok(result)
-            },
-        )
-        .await;
-
-        match result {
-            Ok(()) => {
-                println!("update_s3_object succeeded!");
-                let count = get_entry_count(&client, &session).await;
-                println!("Verified: updated file has {} entries", count);
-            }
-            Err(e) => {
-                println!("update_s3_object failed: {}", e);
-            }
-        }
-    }
-
-    println!("Done!");
-}
-
-async fn get_entry_count(client: &Client, session: &VortexSession) -> usize {
-    let get_result = client
-        .get_object()
-        .bucket(BUCKET)
-        .key(KEY)
-        .send()
-        .await
-        .expect("Failed to download file");
-
-    let bytes = get_result
-        .body
-        .collect()
-        .await
-        .expect("Failed to read body")
-        .into_bytes();
-
-    let file = session
-        .open_options()
-        .open_buffer(bytes)
-        .expect("Failed to open buffer");
-
-    let array = file
-        .scan()
-        .expect("Failed to scan")
-        .into_array_stream()
-        .expect("Failed to get stream")
-        .read_all()
-        .await
-        .expect("Failed to read all");
-
-    array.len()
-}
-
-/// Creates a test entry matching the BenchmarkEntry schema.
-fn create_test_entry() -> Scalar {
-    use std::sync::Arc;
-
-    use vortex::dtype::DType;
-    use vortex::dtype::Nullability::NonNullable;
-    use vortex::dtype::PType;
-
-    let u8_dtype = DType::Primitive(PType::U8, NonNullable);
-
-    // Build the dtype to match the schema:
-    // {commit_id=fixed_size_list(u8)[20], benchmark_group=u32, chart_name=u32, series_name=u32, value=u64}
-    let dtype = DType::Struct(
-        vortex::dtype::StructFields::new(
-            FieldNames::from([
-                "commit_id",
-                "benchmark_group",
-                "chart_name",
-                "series_name",
-                "value",
-            ]),
-            vec![
-                DType::FixedSizeList(Arc::new(u8_dtype.clone()), 20, NonNullable),
-                DType::Primitive(PType::U32, NonNullable),
-                DType::Primitive(PType::U32, NonNullable),
-                DType::Primitive(PType::U32, NonNullable),
-                DType::Primitive(PType::U64, NonNullable),
-            ],
-        ),
-        NonNullable,
-    );
-
-    // Create a test commit_id (20 bytes of 'x').
-    let commit_id_bytes: Vec<Scalar> = b"xxxxxxxxxxxxxxxxxxxx"
-        .iter()
-        .map(|&b| Scalar::primitive(b, NonNullable))
-        .collect();
-    let commit_id_scalar = Scalar::fixed_size_list(u8_dtype, commit_id_bytes, NonNullable);
-
-    Scalar::struct_(
-        dtype,
-        vec![
-            commit_id_scalar,
-            Scalar::primitive(2u32, NonNullable), // benchmark_group: random-access
-            Scalar::primitive(2u32, NonNullable), // chart_name: random-access
-            Scalar::primitive(3u32, NonNullable), // series_name: vortex-nvme
-            Scalar::primitive(999999u64, NonNullable), // value: test value
-        ],
-    )
-}
diff --git a/bench-vortex/src/lib.rs b/bench-vortex/src/lib.rs
index f22fb3e7de1..2ec25d14030 100644
--- a/bench-vortex/src/lib.rs
+++ b/bench-vortex/src/lib.rs
@@ -42,7 +42,6 @@ pub mod statpopgen;
 pub mod tpcds;
 pub mod tpch;
 pub mod utils;
-pub mod website;
 
 pub use datasets::BenchmarkDataset;
 pub use datasets::file;
diff --git a/bench-vortex/src/website/update_s3.rs b/bench-vortex/src/website/update_s3.rs
deleted file mode 100644
index 0ffd259ecfc..00000000000
--- a/bench-vortex/src/website/update_s3.rs
+++ /dev/null
@@ -1,259 +0,0 @@
-// SPDX-License-Identifier: Apache-2.0
-// SPDX-FileCopyrightText: Copyright the Vortex contributors
-
-//! Atomic S3 update operations for Vortex files.
-//!
-//! This module provides functions to read a Vortex file from S3, apply a transformation, and write
-//! the result back atomically using optimistic concurrency control via ETags.
-
-use std::future::Future;
-use std::time::Duration;
-
-use aws_sdk_s3::Client;
-use aws_sdk_s3::error::ProvideErrorMetadata;
-use aws_sdk_s3::error::SdkError;
-use aws_sdk_s3::primitives::ByteStream;
-use vortex::array::ArrayRef;
-use vortex::array::builders::builder_with_capacity;
-use vortex::array::stream::ArrayStreamExt;
-use vortex::error::VortexError;
-use vortex::error::VortexResult;
-use vortex::error::vortex_bail;
-use vortex::error::vortex_err;
-use vortex::file::OpenOptionsSessionExt;
-use vortex::file::WriteOptionsSessionExt;
-use vortex::session::VortexSession;
-
-use super::entry::BenchmarkEntry;
-
-const INITIAL_DELAY: Duration = Duration::from_millis(100);
-const MAX_DELAY: Duration = Duration::from_secs(60);
-
-/// Internal error type for retry control.
-enum UpdateError {
-    /// The ETag has changed since we read the object. The operation should be retried.
-    EtagMismatch,
-    /// A non-retryable error occurred.
-    Other(VortexError),
-}
-
-impl From<VortexError> for UpdateError {
-    fn from(e: VortexError) -> Self {
-        UpdateError::Other(e)
-    }
-}
-
-/// Updates a Vortex file stored in S3 atomically using optimistic concurrency control.
-///
-/// This function reads the existing file from S3, applies a transformation, and writes it back
-/// using conditional puts with ETags. If another process modifies the file between read and write,
-/// the operation is automatically retried with exponential backoff.
-///
-/// # Arguments
-///
-/// * `client` - The AWS S3 client to use for operations.
-/// * `session` - The Vortex session for reading and writing files.
-/// * `bucket` - The S3 bucket name.
-/// * `key` - The S3 object key.
-/// * `update_fn` - An async function that takes the file's array data and returns the updated
-///   array. The returned array must have the same dtype as the input. This function may be called
-///   multiple times if retries are needed.
-///
-/// # Errors
-///
-/// Returns an error if:
-/// - The S3 object does not exist.
-/// - The update function returns an error.
-/// - The update function returns an array with a different dtype.
-/// - The retry delay reaches the maximum (60 seconds) without success.
-/// - An S3 operation fails with a non-retryable error.
-#[expect(clippy::use_debug)]
-pub async fn update_s3_object<F, Fut>(
-    client: &Client,
-    session: &VortexSession,
-    bucket: &str,
-    key: &str,
-    mut update_fn: F,
-) -> VortexResult<()>
-where
-    F: FnMut(ArrayRef) -> Fut,
-    Fut: Future<Output = VortexResult<ArrayRef>>,
-{
-    let mut delay = INITIAL_DELAY;
-    let mut attempt = 0;
-
-    loop {
-        match try_update_s3_object(client, session, bucket, key, &mut update_fn).await {
-            Ok(()) => return Ok(()),
-            Err(UpdateError::EtagMismatch) => {
-                attempt += 1;
-                tracing::debug!(
-                    "ETag mismatch on attempt {}. Retrying after {:?}...",
-                    attempt,
-                    delay
-                );
-            }
-            Err(UpdateError::Other(e)) => {
-                attempt += 1;
-                eprintln!(
-                    "Error on attempt {}: {}. Retrying after {:?}...",
-                    attempt, e, delay
-                );
-            }
-        }
-
-        // If we've reached max delay, fail.
-        if delay >= MAX_DELAY {
-            vortex_bail!(
-                "Failed to update S3 object after {} attempts (delay reached {:?})",
-                attempt,
-                MAX_DELAY
-            );
-        }
-
-        tokio::time::sleep(delay).await;
-
-        // Exponential backoff: double the delay, capped at MAX_DELAY.
-        delay = (delay * 2).min(MAX_DELAY);
-    }
-}
-
-/// Attempts a single update of an S3 object.
-async fn try_update_s3_object<F, Fut>(
-    client: &Client,
-    session: &VortexSession,
-    bucket: &str,
-    key: &str,
-    update_fn: &mut F,
-) -> Result<(), UpdateError>
-where
-    F: FnMut(ArrayRef) -> Fut,
-    Fut: Future<Output = VortexResult<ArrayRef>>,
-{
-    // Get current ETag.
-    let head = client
-        .head_object()
-        .bucket(bucket)
-        .key(key)
-        .send()
-        .await
-        .map_err(|e| vortex_err!("Failed to get object metadata: {}", e))?;
-
-    let etag = head
-        .e_tag()
-        .ok_or_else(|| vortex_err!("No ETag returned from head_object"))?
-        .to_string();
-
-    // Download with if-match.
-    let get_result = client
-        .get_object()
-        .bucket(bucket)
-        .key(key)
-        .if_match(&etag)
-        .send()
-        .await;
-
-    let get_output = match get_result {
-        Ok(output) => output,
-        Err(SdkError::ServiceError(err)) if err.err().code() == Some("PreconditionFailed") => {
-            return Err(UpdateError::EtagMismatch);
-        }
-        Err(e) => {
-            return Err(UpdateError::Other(vortex_err!(
-                "Failed to download object: {}",
-                e
-            )));
-        }
-    };
-
-    let existing_bytes = get_output
-        .body
-        .collect()
-        .await
-        .map_err(|e| vortex_err!("Failed to read object body: {}", e))?
-        .into_bytes();
-
-    // Parse as Vortex file and read all data.
-    let file = session.open_options().open_buffer(existing_bytes)?;
-    let original_dtype = file.dtype().clone();
-    let existing_array = file.scan()?.into_array_stream()?.read_all().await?;
-
-    // Apply the user's update function.
-    let updated_array = update_fn(existing_array).await?;
-
-    // Validate that the dtype matches.
-    if updated_array.dtype() != &original_dtype {
-        return Err(UpdateError::Other(vortex_err!(
-            "Update function changed dtype from {} to {}. \
-             The updated array must have the same dtype as the input file.",
-            original_dtype,
-            updated_array.dtype()
-        )));
-    }
-
-    // Serialize updated array to Vortex file bytes.
-    let mut buffer = Vec::new();
-    session
-        .write_options()
-        .write(&mut buffer, updated_array.to_array_stream())
-        .await?;
-
-    // Upload with if-match.
-    let put_result = client
-        .put_object()
-        .bucket(bucket)
-        .key(key)
-        .if_match(&etag)
-        .body(ByteStream::from(buffer))
-        .send()
-        .await;
-
-    match put_result {
-        Ok(_) => Ok(()),
-        Err(SdkError::ServiceError(err)) if err.err().code() == Some("PreconditionFailed") => {
-            Err(UpdateError::EtagMismatch)
-        }
-        Err(e) => Err(UpdateError::Other(vortex_err!(
-            "Failed to upload object: {}",
-            e
-        ))),
-    }
-}
-
-/// Appends a single [`BenchmarkEntry`] to a Vortex file stored in S3.
-///
-/// This function uses [`update_s3_object`] with optimistic concurrency control to atomically
-/// append the entry to the existing data. If concurrent modifications are detected, the operation
-/// is automatically retried.
-///
-/// # Arguments
-///
-/// * `client` - The AWS S3 client.
-/// * `session` - The Vortex session for reading and writing files.
-/// * `bucket` - The S3 bucket name.
-/// * `key` - The S3 object key.
-/// * `entry` - The benchmark entry to append.
-pub async fn append_benchmark_entry(
-    client: &Client,
-    session: &VortexSession,
-    bucket: &str,
-    key: &str,
-    entry: &BenchmarkEntry,
-) -> VortexResult<()> {
-    let scalar = entry.into_scalar();
-
-    update_s3_object(client, session, bucket, key, |existing_array| {
-        let scalar = scalar.clone();
-        async move {
-            let existing_len = existing_array.len();
-            let dtype = existing_array.dtype().clone();
-
-            let mut builder = builder_with_capacity(&dtype, existing_len + 1);
-            builder.extend_from_array(&existing_array);
-            builder.append_scalar(&scalar)?;
-
-            Ok(builder.finish())
-        }
-    })
-    .await
-}
diff --git a/vortex-wasm/Cargo.toml b/vortex-wasm/Cargo.toml
index 09de0017784..8861d33d4be 100644
--- a/vortex-wasm/Cargo.toml
+++ b/vortex-wasm/Cargo.toml
@@ -13,10 +13,21 @@ repository.workspace = true
 rust-version.workspace = true
 version.workspace = true
 
+[lib]
+crate-type = ["cdylib", "rlib"]
+
 [dependencies]
 async-fs = { workspace = true }
+hex = { workspace = true }
+phf = { workspace = true }
+reqwest = { workspace = true }
 serde = { workspace = true, features = ["derive"] }
+serde-wasm-bindgen = "0.6"
 serde_json = { workspace = true }
+tempfile = { workspace = true }
+tokio = { workspace = true, features = ["full"] }
+tracing = { workspace = true }
+vortex = { workspace = true, features = ["tokio"] }
 vortex-array = { workspace = true }
 vortex-buffer = { workspace = true }
 vortex-dtype = { workspace = true }
@@ -27,6 +38,15 @@ vortex-layout = { workspace = true }
 vortex-metrics = { workspace = true }
 vortex-scalar = { workspace = true }
 vortex-session = { workspace = true }
+wasm-bindgen = "0.2"
+wasm-bindgen-futures = { workspace = true }
+
+[dependencies.web-sys]
+features = ["console", "Window", "Response"]
+version = "0.3"
+
+[dependencies.js-sys]
+version = "0.3"
 
 [[bin]]
 name = "migrate"
@@ -36,5 +56,17 @@ path = "src/bin/migrate.rs"
 name = "append"
 path = "src/bin/append.rs"
 
+[[bin]]
+name = "test_s3_read"
+path = "src/bin/test_s3_read.rs"
+
+[[bin]]
+name = "test_s3_update"
+path = "src/bin/test_s3_update.rs"
+
+[[bin]]
+name = "migrate_random_access"
+path = "src/bin/migrate_random_access.rs"
+
 [lints]
 workspace = true
diff --git a/bench-vortex/src/bin/migrate_random_access.rs b/vortex-wasm/src/bin/migrate_random_access.rs
similarity index 100%
rename from bench-vortex/src/bin/migrate_random_access.rs
rename to vortex-wasm/src/bin/migrate_random_access.rs
diff --git a/bench-vortex/src/bin/test_s3_read.rs b/vortex-wasm/src/bin/test_s3_read.rs
similarity index 74%
rename from bench-vortex/src/bin/test_s3_read.rs
rename to vortex-wasm/src/bin/test_s3_read.rs
index d4e79812499..b637cf6e0fd 100644
--- a/bench-vortex/src/bin/test_s3_read.rs
+++ b/vortex-wasm/src/bin/test_s3_read.rs
@@ -5,14 +5,11 @@
 
 #![allow(clippy::expect_used)]
 
-use aws_config::BehaviorVersion;
-use aws_sdk_s3::Client;
-use bench_vortex::website::names::NAMES;
-use bench_vortex::website::read_s3::read_benchmark_entries;
 use vortex::VortexSessionDefault;
 use vortex::session::VortexSession;
+use vortex_wasm::website::names::NAMES;
+use vortex_wasm::website::read_s3::read_benchmark_entries;
 
-const BUCKET: &str = "vortex-benchmark-results-database";
 const KEY: &str = "test/random_access.vortex";
 
 fn main() {
@@ -23,19 +20,9 @@ fn main() {
 async fn async_main() {
     let session = VortexSession::default();
 
-    // Load AWS config with SSO profile.
-    let config = aws_config::defaults(BehaviorVersion::latest())
-        .profile_name("PowerUserAccess-375504701696")
-        .load()
-        .await;
-    let client = Client::new(&config);
+    println!("Reading benchmark entries from {}...\n", KEY);
 
-    println!(
-        "Reading benchmark entries from s3://{}/{}...\n",
-        BUCKET, KEY
-    );
-
-    let entries = read_benchmark_entries(&client, &session, BUCKET, KEY)
+    let entries = read_benchmark_entries(&session, KEY)
         .await
         .expect("Failed to read benchmark entries");
 
diff --git a/vortex-wasm/src/bin/test_s3_update.rs b/vortex-wasm/src/bin/test_s3_update.rs
new file mode 100644
index 00000000000..80f66825f42
--- /dev/null
+++ b/vortex-wasm/src/bin/test_s3_update.rs
@@ -0,0 +1,127 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: Copyright the Vortex contributors
+
+//! Test binary for testing the `update_s3_object` function using the AWS CLI.
+
+#![allow(clippy::expect_used, clippy::exit)]
+
+use std::env;
+use std::fs;
+use std::process::Command;
+use std::sync::Arc;
+
+use vortex::VortexSessionDefault;
+use vortex::array::builders::builder_with_capacity;
+use vortex::dtype::DType;
+use vortex::dtype::FieldNames;
+use vortex::dtype::Nullability::NonNullable;
+use vortex::dtype::PType;
+use vortex::scalar::Scalar;
+use vortex::session::VortexSession;
+use vortex_wasm::website::update_s3::update_s3_object;
+
+const BUCKET: &str = "vortex-benchmark-results-database";
+const KEY: &str = "test/random_access.vortex";
+
+fn main() {
+    let session = VortexSession::default();
+
+    // Check for --upload flag.
+    let args: Vec<String> = env::args().collect();
+    if args.iter().any(|a| a == "--upload") {
+        println!("Uploading random_access.vortex to S3...");
+        let local_path = "/Users/connor/spiral/vortex-data/vortex/vortex-wasm/random_access.vortex";
+        let file_bytes = fs::read(local_path).expect("Failed to read local file");
+        let size = file_bytes.len();
+
+        let status = Command::new("aws")
+            .args(["s3", "cp", local_path, &format!("s3://{}/{}", BUCKET, KEY)])
+            .status()
+            .expect("Failed to run aws CLI");
+
+        if !status.success() {
+            eprintln!("Failed to upload to S3");
+            std::process::exit(1);
+        }
+
+        println!("Uploaded {} bytes to s3://{}/{}", size, BUCKET, KEY);
+    }
+
+    // Single update test.
+    println!("\nTesting update_s3_object...");
+
+    let result = update_s3_object(&session, BUCKET, KEY, |existing_array| {
+        let existing_len = existing_array.len();
+        println!("  Existing array has {} entries", existing_len);
+
+        // Create a new entry to append.
+        let new_entry = create_test_entry();
+
+        // Build a new array with existing data + new entry.
+        let dtype = existing_array.dtype().clone();
+        let mut builder = builder_with_capacity(&dtype, existing_len + 1);
+        builder.extend_from_array(&existing_array);
+        builder.append_scalar(&new_entry)?;
+
+        let result = builder.finish();
+        println!("  New array has {} entries", result.len());
+
+        Ok(result)
+    });
+
+    match result {
+        Ok(()) => {
+            println!("update_s3_object succeeded!");
+        }
+        Err(e) => {
+            println!("update_s3_object failed: {}", e);
+        }
+    }
+
+    println!("Done!");
+}
+
+/// Creates a test entry matching the BenchmarkEntry schema.
+fn create_test_entry() -> Scalar {
+    let u8_dtype = DType::Primitive(PType::U8, NonNullable);
+
+    // Build the dtype to match the schema:
+    // {commit_id=fixed_size_list(u8)[20], benchmark_group=u32, chart_name=u32, series_name=u32, value=u64}
+    let dtype = DType::Struct(
+        vortex::dtype::StructFields::new(
+            FieldNames::from([
+                "commit_id",
+                "benchmark_group",
+                "chart_name",
+                "series_name",
+                "value",
+            ]),
+            vec![
+                DType::FixedSizeList(Arc::new(u8_dtype.clone()), 20, NonNullable),
+                DType::Primitive(PType::U32, NonNullable),
+                DType::Primitive(PType::U32, NonNullable),
+                DType::Primitive(PType::U32, NonNullable),
+                DType::Primitive(PType::U64, NonNullable),
+            ],
+        ),
+        NonNullable,
+    );
+
+    // Create a test commit_id (20 bytes of 'x').
+    let commit_id_bytes: Vec<Scalar> = b"xxxxxxxxxxxxxxxxxxxx"
+        .iter()
+        .map(|&b| Scalar::primitive(b, NonNullable))
+        .collect();
+    let commit_id_scalar = Scalar::fixed_size_list(u8_dtype, commit_id_bytes, NonNullable);
+
+    Scalar::struct_(
+        dtype,
+        vec![
+            commit_id_scalar,
+            Scalar::primitive(2u32, NonNullable), // benchmark_group: random-access
+            Scalar::primitive(2u32, NonNullable), // chart_name: random-access
+            Scalar::primitive(3u32, NonNullable), // series_name: vortex-nvme
+            Scalar::primitive(999999u64, NonNullable), // value: test value
+        ],
+    )
+}
diff --git a/vortex-wasm/src/lib.rs b/vortex-wasm/src/lib.rs
index 0d735177e5d..846b54af71e 100644
--- a/vortex-wasm/src/lib.rs
+++ b/vortex-wasm/src/lib.rs
@@ -1,2 +1,84 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: Copyright the Vortex contributors
+
+//! WASM bindings for the Vortex benchmark website.
+//!
+//! This module provides a `load_random_access_data()` function that fetches benchmark data from S3,
+//! parses it, and returns it in a format ready for JavaScript to render.
+
+pub mod website;
+
+use serde::Serialize;
+use vortex::VortexSessionDefault;
+use vortex::session::VortexSession;
+use wasm_bindgen::prelude::*;
+use website::names::NAMES;
+use website::read_s3::read_benchmark_entries;
+
+const KEY: &str = "test/random_access.vortex";
+
+/// Helper macro for logging to browser console.
+macro_rules! log {
+    ($($t:tt)*) => {
+        web_sys::console::log_1(&format!($($t)*).into());
+    }
+}
+
+/// A single random-access benchmark entry for JavaScript.
+#[derive(Serialize)]
+pub struct JsEntry {
+    pub commit_id: String,
+    pub series_name: &'static str,
+    pub value_ms: f64,
+}
+
+/// Load random-access benchmark data from S3.
+///
+/// This function fetches the Vortex file from S3, parses it, and returns an array of benchmark
+/// entries ready for rendering.
+///
+/// # Returns
+///
+/// A JavaScript array of objects with:
+/// - `commit_id`: 40-character hex string (SHA-1 hash)
+/// - `series_name`: One of "vortex-nvme", "parquet-nvme", "lance-nvme"
+/// - `value_ms`: Value in milliseconds
+#[wasm_bindgen]
+pub async fn load_random_access_data() -> Result<JsValue, JsValue> {
+    log!("Loading random-access benchmark data...");
+
+    let session = VortexSession::default();
+
+    let entries = read_benchmark_entries(&session, KEY)
+        .await
+        .map_err(|e| JsValue::from_str(&format!("Failed to read benchmark entries: {}", e)))?;
+
+    log!("Loaded {} entries", entries.len());
+
+    // Convert to JS-friendly format.
+    let js_entries: Vec<JsEntry> = entries
+        .iter()
+        .map(|e| JsEntry {
+            commit_id: e.commit_id.to_string(),
+            series_name: NAMES.get(&e.series_name.0).copied().unwrap_or("unknown"),
+            value_ms: e.value as f64 / 1_000_000.0,
+        })
+        .collect();
+
+    log!("Returning {} JS entries", js_entries.len());
+
+    serde_wasm_bindgen::to_value(&js_entries)
+        .map_err(|e| JsValue::from_str(&format!("Failed to serialize: {}", e)))
+}
+
+/// Initialize the WASM module.
+#[wasm_bindgen(start)]
+pub fn init() {
+    log!("vortex-wasm initialized");
+}
+
+/// Get version information.
+#[wasm_bindgen]
+pub fn get_version() -> String {
+    format!("vortex-wasm v{}", env!("CARGO_PKG_VERSION"))
+}
diff --git a/bench-vortex/src/website/entry.rs b/vortex-wasm/src/website/entry.rs
similarity index 100%
rename from bench-vortex/src/website/entry.rs
rename to vortex-wasm/src/website/entry.rs
diff --git a/bench-vortex/src/website/mod.rs b/vortex-wasm/src/website/mod.rs
similarity index 100%
rename from bench-vortex/src/website/mod.rs
rename to vortex-wasm/src/website/mod.rs
diff --git a/bench-vortex/src/website/names.rs b/vortex-wasm/src/website/names.rs
similarity index 79%
rename from bench-vortex/src/website/names.rs
rename to vortex-wasm/src/website/names.rs
index 86f34733147..27e911c45f1 100644
--- a/bench-vortex/src/website/names.rs
+++ b/vortex-wasm/src/website/names.rs
@@ -1,10 +1,13 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: Copyright the Vortex contributors
 
+//! Name ID to string mapping for benchmark data.
+
 use phf::Map;
 use phf::phf_map;
 
 // TODO(connor): This should probably be generated smarter.
+/// Maps name IDs to their string representations.
 pub static NAMES: Map<u32, &'static str> = phf_map! {
     0 => "null",
     1 => "invalid",
diff --git a/bench-vortex/src/website/read_s3.rs b/vortex-wasm/src/website/read_s3.rs
similarity index 80%
rename from bench-vortex/src/website/read_s3.rs
rename to vortex-wasm/src/website/read_s3.rs
index 6f68afbc437..9cdb1c8d320 100644
--- a/bench-vortex/src/website/read_s3.rs
+++ b/vortex-wasm/src/website/read_s3.rs
@@ -3,7 +3,6 @@
 
 //! Functions for reading benchmark data from S3.
 
-use aws_sdk_s3::Client;
 use vortex::array::Array;
 use vortex::array::ToCanonical;
 use vortex::array::arrays::FixedSizeListArray;
@@ -20,48 +19,51 @@ use super::entry::BenchmarkEntry;
 use super::entry::CommitId;
 use super::entry::NameId;
 
+/// Base URL for the S3 bucket containing benchmark data.
+const S3_BASE_URL: &str = "https://vortex-benchmark-results-database.s3.amazonaws.com";
+
 /// Reads benchmark entries from an S3 object containing a Vortex file.
 ///
-/// This function downloads the Vortex file from S3, parses the columnar struct array, and converts
-/// it to a vector of row-wise [`BenchmarkEntry`] structs.
+/// This function downloads the Vortex file from S3 using HTTP (the bucket is public), parses the
+/// columnar struct array, and converts it to a vector of row-wise [`BenchmarkEntry`] structs.
 ///
 /// # Arguments
 ///
-/// * `client` - The AWS S3 client to use for operations.
 /// * `session` - The Vortex session for reading files.
-/// * `bucket` - The S3 bucket name.
-/// * `key` - The S3 object key.
+/// * `key` - The S3 object key (e.g., "test/random_access.vortex").
 ///
 /// # Errors
 ///
 /// Returns an error if:
-/// - The S3 object does not exist or cannot be downloaded.
+/// - The HTTP request fails.
 /// - The file is not a valid Vortex file.
 /// - The schema does not match the expected [`BenchmarkEntry`] schema.
 pub async fn read_benchmark_entries(
-    client: &Client,
     session: &VortexSession,
-    bucket: &str,
     key: &str,
 ) -> VortexResult<Vec<BenchmarkEntry>> {
-    // Download the file from S3.
-    let get_result = client
-        .get_object()
-        .bucket(bucket)
-        .key(key)
-        .send()
+    let url = format!("{}/{}", S3_BASE_URL, key);
+
+    let response = reqwest::get(&url)
         .await
-        .map_err(|e| vortex_err!("Failed to download S3 object: {}", e))?;
+        .map_err(|e| vortex_err!("Failed to fetch {}: {}", url, e))?;
+
+    if !response.status().is_success() {
+        vortex_bail!(
+            "HTTP error fetching {}: {} {}",
+            url,
+            response.status().as_u16(),
+            response.status().as_str()
+        );
+    }
 
-    let bytes = get_result
-        .body
-        .collect()
+    let bytes = response
+        .bytes()
         .await
-        .map_err(|e| vortex_err!("Failed to read S3 object body: {}", e))?
-        .into_bytes();
+        .map_err(|e| vortex_err!("Failed to read response body: {}", e))?;
 
     // Parse as Vortex file and read all data.
-    let file = session.open_options().open_buffer(bytes)?;
+    let file = session.open_options().open_buffer(bytes.to_vec())?;
     let array = file.scan()?.into_array_stream()?.read_all().await?;
 
     // Convert the array to benchmark entries.
diff --git a/vortex-wasm/src/website/update_s3.rs b/vortex-wasm/src/website/update_s3.rs
new file mode 100644
index 00000000000..6602df23ee7
--- /dev/null
+++ b/vortex-wasm/src/website/update_s3.rs
@@ -0,0 +1,298 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: Copyright the Vortex contributors
+
+//! Atomic S3 update operations for Vortex files using the AWS CLI.
+//!
+//! This module provides functions to read a Vortex file from S3, apply a transformation, and write
+//! the result back atomically using optimistic concurrency control via ETags.
+
+use std::fs;
+use std::io::Write;
+use std::process::Command;
+use std::time::Duration;
+
+use tempfile::NamedTempFile;
+use vortex::array::ArrayRef;
+use vortex::array::builders::builder_with_capacity;
+use vortex::array::stream::ArrayStreamExt;
+use vortex::error::VortexResult;
+use vortex::error::vortex_bail;
+use vortex::error::vortex_err;
+use vortex::file::OpenOptionsSessionExt;
+use vortex::file::WriteOptionsSessionExt;
+use vortex::session::VortexSession;
+
+use super::entry::BenchmarkEntry;
+
+const MAX_RETRIES: u32 = 5;
+
+/// Internal error type for retry control.
+enum UpdateError {
+    /// The ETag has changed since we read the object. The operation should be retried.
+    EtagMismatch,
+    /// A non-retryable error occurred.
+    Other(String),
+}
+
+/// Gets the current ETag of an S3 object using the AWS CLI.
+fn get_etag(bucket: &str, key: &str) -> Result<String, UpdateError> {
+    let output = Command::new("aws")
+        .args([
+            "s3api",
+            "head-object",
+            "--bucket",
+            bucket,
+            "--key",
+            key,
+            "--query",
+            "ETag",
+            "--output",
+            "text",
+        ])
+        .output()
+        .map_err(|e| UpdateError::Other(format!("Failed to run aws CLI: {}", e)))?;
+
+    if !output.status.success() {
+        return Err(UpdateError::Other(format!(
+            "aws s3api head-object failed: {}",
+            String::from_utf8_lossy(&output.stderr)
+        )));
+    }
+
+    let etag = String::from_utf8_lossy(&output.stdout).trim().to_string();
+    if etag.is_empty() || etag == "null" {
+        return Err(UpdateError::Other("Failed to retrieve ETag".to_string()));
+    }
+
+    Ok(etag)
+}
+
+/// Downloads an S3 object to a local file using the AWS CLI with ETag matching.
+fn download_object(
+    bucket: &str,
+    key: &str,
+    etag: &str,
+    dest_path: &str,
+) -> Result<(), UpdateError> {
+    let output = Command::new("aws")
+        .args([
+            "s3api",
+            "get-object",
+            "--bucket",
+            bucket,
+            "--key",
+            key,
+            "--if-match",
+            etag,
+            dest_path,
+        ])
+        .output()
+        .map_err(|e| UpdateError::Other(format!("Failed to run aws CLI: {}", e)))?;
+
+    if !output.status.success() {
+        let stderr = String::from_utf8_lossy(&output.stderr);
+        if stderr.contains("PreconditionFailed") || stderr.contains("412") {
+            return Err(UpdateError::EtagMismatch);
+        }
+        return Err(UpdateError::Other(format!(
+            "aws s3api get-object failed: {}",
+            stderr
+        )));
+    }
+
+    Ok(())
+}
+
+/// Uploads a local file to S3 using the AWS CLI with ETag matching.
+fn upload_object(bucket: &str, key: &str, etag: &str, src_path: &str) -> Result<(), UpdateError> {
+    let output = Command::new("aws")
+        .args([
+            "s3api",
+            "put-object",
+            "--bucket",
+            bucket,
+            "--key",
+            key,
+            "--if-match",
+            etag,
+            "--body",
+            src_path,
+        ])
+        .output()
+        .map_err(|e| UpdateError::Other(format!("Failed to run aws CLI: {}", e)))?;
+
+    if !output.status.success() {
+        let stderr = String::from_utf8_lossy(&output.stderr);
+        if stderr.contains("PreconditionFailed") || stderr.contains("412") {
+            return Err(UpdateError::EtagMismatch);
+        }
+        return Err(UpdateError::Other(format!(
+            "aws s3api put-object failed: {}",
+            stderr
+        )));
+    }
+
+    Ok(())
+}
+
+/// Updates a Vortex file stored in S3 atomically using optimistic concurrency control.
+///
+/// This function reads the existing file from S3, applies a transformation, and writes it back
+/// using conditional puts with ETags. If another process modifies the file between read and write,
+/// the operation is automatically retried.
+///
+/// # Arguments
+///
+/// * `session` - The Vortex session for reading and writing files.
+/// * `bucket` - The S3 bucket name.
+/// * `key` - The S3 object key.
+/// * `update_fn` - A function that takes the file's array data and returns the updated array.
+///   The returned array must have the same dtype as the input. This function may be called
+///   multiple times if retries are needed.
+///
+/// # Errors
+///
+/// Returns an error if:
+/// - The S3 object does not exist.
+/// - The update function returns an error.
+/// - The update function returns an array with a different dtype.
+/// - The retry limit is reached without success.
+/// - An S3 operation fails with a non-retryable error.
+pub fn update_s3_object<F>(
+    session: &VortexSession,
+    bucket: &str,
+    key: &str,
+    mut update_fn: F,
+) -> VortexResult<()>
+where
+    F: FnMut(ArrayRef) -> VortexResult<ArrayRef>,
+{
+    let runtime = tokio::runtime::Runtime::new()
+        .map_err(|e| vortex_err!("Failed to create tokio runtime: {}", e))?;
+
+    for attempt in 0..MAX_RETRIES {
+        match try_update_s3_object(session, bucket, key, &mut update_fn, &runtime) {
+            Ok(()) => return Ok(()),
+            Err(UpdateError::EtagMismatch) => {
+                eprintln!("ETag mismatch on attempt {}. Retrying...", attempt + 1);
+                std::thread::sleep(Duration::from_millis(100 * (1 << attempt)));
+            }
+            Err(UpdateError::Other(e)) => {
+                vortex_bail!("S3 update failed: {}", e);
+            }
+        }
+    }
+
+    vortex_bail!("Failed to update S3 object after {} attempts", MAX_RETRIES)
+}
+
+/// Attempts a single update of an S3 object.
+fn try_update_s3_object<F>(
+    session: &VortexSession,
+    bucket: &str,
+    key: &str,
+    update_fn: &mut F,
+    runtime: &tokio::runtime::Runtime,
+) -> Result<(), UpdateError>
+where
+    F: FnMut(ArrayRef) -> VortexResult<ArrayRef>,
+{
+    // Get current ETag.
+    let etag = get_etag(bucket, key)?;
+
+    // Download to temp file.
+    let download_file = NamedTempFile::new()
+        .map_err(|e| UpdateError::Other(format!("Failed to create temp file: {}", e)))?;
+    let download_path = download_file.path().to_string_lossy().to_string();
+
+    download_object(bucket, key, &etag, &download_path)?;
+
+    // Read and parse.
+    let existing_bytes = fs::read(&download_path)
+        .map_err(|e| UpdateError::Other(format!("Failed to read downloaded file: {}", e)))?;
+
+    let file = session
+        .open_options()
+        .open_buffer(existing_bytes)
+        .map_err(|e| UpdateError::Other(format!("Failed to open Vortex file: {}", e)))?;
+
+    let original_dtype = file.dtype().clone();
+
+    let existing_array = runtime
+        .block_on(async { file.scan()?.into_array_stream()?.read_all().await })
+        .map_err(|e| UpdateError::Other(format!("Failed to read array: {}", e)))?;
+
+    // Apply the user's update function.
+    let updated_array = update_fn(existing_array)
+        .map_err(|e| UpdateError::Other(format!("Update function failed: {}", e)))?;
+
+    // Validate that the dtype matches.
+    if updated_array.dtype() != &original_dtype {
+        return Err(UpdateError::Other(format!(
+            "Update function changed dtype from {} to {}. \
+             The updated array must have the same dtype as the input file.",
+            original_dtype,
+            updated_array.dtype()
+        )));
+    }
+
+    // Serialize updated array to Vortex file bytes.
+    let mut buffer = Vec::new();
+    runtime
+        .block_on(async {
+            session
+                .write_options()
+                .write(&mut buffer, updated_array.to_array_stream())
+                .await
+        })
+        .map_err(|e| UpdateError::Other(format!("Failed to serialize array: {}", e)))?;
+
+    // Write to temp file for upload.
+    let mut upload_file = NamedTempFile::new()
+        .map_err(|e| UpdateError::Other(format!("Failed to create temp file: {}", e)))?;
+    upload_file
+        .write_all(&buffer)
+        .map_err(|e| UpdateError::Other(format!("Failed to write temp file: {}", e)))?;
+    upload_file
+        .flush()
+        .map_err(|e| UpdateError::Other(format!("Failed to flush temp file: {}", e)))?;
+
+    let upload_path = upload_file.path().to_string_lossy().to_string();
+
+    // Upload with if-match.
+    upload_object(bucket, key, &etag, &upload_path)?;
+
+    Ok(())
+}
+
+/// Appends a single [`BenchmarkEntry`] to a Vortex file stored in S3.
+///
+/// This function uses [`update_s3_object`] with optimistic concurrency control to atomically
+/// append the entry to the existing data. If concurrent modifications are detected, the operation
+/// is automatically retried.
+///
+/// # Arguments
+///
+/// * `session` - The Vortex session for reading and writing files.
+/// * `bucket` - The S3 bucket name.
+/// * `key` - The S3 object key.
+/// * `entry` - The benchmark entry to append.
+pub fn append_benchmark_entry(
+    session: &VortexSession,
+    bucket: &str,
+    key: &str,
+    entry: &BenchmarkEntry,
+) -> VortexResult<()> {
+    let scalar = entry.into_scalar();
+
+    update_s3_object(session, bucket, key, |existing_array| {
+        let existing_len = existing_array.len();
+        let dtype = existing_array.dtype().clone();
+
+        let mut builder = builder_with_capacity(&dtype, existing_len + 1);
+        builder.extend_from_array(&existing_array);
+        builder.append_scalar(&scalar)?;
+
+        Ok(builder.finish())
+    })
+}

From 8cb8a7702505ff2e763e1712aef411abece3be95 Mon Sep 17 00:00:00 2001
From: Connor Tsui <connor.tsui20@gmail.com>
Date: Tue, 2 Dec 2025 17:20:27 -0500
Subject: [PATCH 08/30] vortex wasm works

Signed-off-by: Connor Tsui <connor.tsui20@gmail.com>
---
 Cargo.lock                                   |  12 +-
 vortex-file/Cargo.toml                       |   6 +-
 vortex-file/src/lib.rs                       |   3 +
 vortex-file/src/open.rs                      |   8 +-
 vortex-io/Cargo.toml                         |  11 +-
 vortex-io/src/lib.rs                         |   2 +
 vortex-io/src/write.rs                       |   1 +
 vortex-layout/Cargo.toml                     |   7 +-
 vortex-layout/src/segments/cache.rs          |  11 ++
 vortex-wasm/Cargo.toml                       |  44 ++++--
 vortex-wasm/src/bin/migrate_random_access.rs |  19 +--
 vortex-wasm/src/bin/test_s3_update.rs        |  34 ++++-
 vortex-wasm/src/lib.rs                       | 144 ++++++++++---------
 vortex-wasm/src/website/mod.rs               |   3 +
 vortex-wasm/src/website/names.rs             |  20 ++-
 vortex-wasm/src/website/read_s3.rs           |  12 +-
 vortex-wasm/src/website/update_s3.rs         | 117 +++++++++------
 17 files changed, 292 insertions(+), 162 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index 977f6ef927c..8a6d457289a 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1749,6 +1749,16 @@ dependencies = [
  "windows-sys 0.61.2",
 ]
 
+[[package]]
+name = "console_error_panic_hook"
+version = "0.1.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a06aeb73f470f66dcdbf7223caeebb85984942f22f1adb2a088cf9668146bbbc"
+dependencies = [
+ "cfg-if",
+ "wasm-bindgen",
+]
+
 [[package]]
 name = "const-oid"
 version = "0.9.6"
@@ -9633,8 +9643,8 @@ name = "vortex-wasm"
 version = "0.1.0"
 dependencies = [
  "async-fs",
+ "console_error_panic_hook",
  "hex",
- "js-sys",
  "phf 0.13.1",
  "reqwest",
  "serde",
diff --git a/vortex-file/Cargo.toml b/vortex-file/Cargo.toml
index 11c5c9e7b6f..aa28757d0c3 100644
--- a/vortex-file/Cargo.toml
+++ b/vortex-file/Cargo.toml
@@ -17,7 +17,6 @@ version = { workspace = true }
 all-features = true
 
 [dependencies]
-async-fs = { workspace = true }
 async-trait = { workspace = true }
 bytes = { workspace = true }
 flatbuffers = { workspace = true }
@@ -57,6 +56,11 @@ vortex-utils = { workspace = true, features = ["dashmap"] }
 vortex-zigzag = { workspace = true }
 vortex-zstd = { workspace = true, optional = true }
 
+# async-fs uses std::time which is not available on WASM. It's only used in update.rs which is
+# already feature-gated for non-WASM.
+[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
+async-fs = { workspace = true }
+
 [dev-dependencies]
 tokio = { workspace = true, features = ["full"] }
 vortex-array = { workspace = true, features = ["test-harness"] }
diff --git a/vortex-file/src/lib.rs b/vortex-file/src/lib.rs
index eba5571aef8..a76ed2d69f8 100644
--- a/vortex-file/src/lib.rs
+++ b/vortex-file/src/lib.rs
@@ -99,6 +99,8 @@ pub mod segments;
 mod strategy;
 #[cfg(test)]
 mod tests;
+// The update module uses blocking runtimes that are not available in WASM.
+#[cfg(not(target_arch = "wasm32"))]
 mod update;
 mod writer;
 
@@ -107,6 +109,7 @@ pub use footer::*;
 pub use forever_constant::*;
 pub use open::*;
 pub use strategy::*;
+#[cfg(not(target_arch = "wasm32"))]
 pub use update::*;
 use vortex_alp::ALPRDVTable;
 use vortex_alp::ALPVTable;
diff --git a/vortex-file/src/open.rs b/vortex-file/src/open.rs
index 1ee6d08feb2..48164c40afe 100644
--- a/vortex-file/src/open.rs
+++ b/vortex-file/src/open.rs
@@ -12,6 +12,7 @@ use vortex_dtype::DType;
 use vortex_error::VortexError;
 use vortex_error::VortexExpect;
 use vortex_error::VortexResult;
+#[cfg(not(target_arch = "wasm32"))]
 use vortex_io::InstrumentedReadAt;
 use vortex_io::VortexReadAt;
 use vortex_io::file::IntoReadSource;
@@ -159,7 +160,12 @@ impl VortexOpenOptions {
     ///
     /// This is a low-level API and we strongly recommend using [`VortexOpenOptions::open`].
     pub async fn open_read_at<R: VortexReadAt>(self, read: R) -> VortexResult<VortexFile> {
-        let read = Arc::new(InstrumentedReadAt::new(Arc::new(read), &self.metrics));
+        // On WASM, skip instrumentation because it uses std::time which is not available.
+        #[cfg(target_arch = "wasm32")]
+        let read: Arc<dyn VortexReadAt> = Arc::new(read);
+        #[cfg(not(target_arch = "wasm32"))]
+        let read: Arc<dyn VortexReadAt> =
+            Arc::new(InstrumentedReadAt::new(Arc::new(read), &self.metrics));
 
         let footer = if let Some(footer) = self.footer {
             footer
diff --git a/vortex-io/Cargo.toml b/vortex-io/Cargo.toml
index eae3e778009..90d329d6530 100644
--- a/vortex-io/Cargo.toml
+++ b/vortex-io/Cargo.toml
@@ -17,8 +17,6 @@ version = { workspace = true }
 all-features = true
 
 [dependencies]
-async-compat = { workspace = true }
-async-fs = { workspace = true }
 async-stream = { workspace = true }
 async-trait = { workspace = true }
 bytes = { workspace = true }
@@ -26,15 +24,13 @@ cfg-if = { workspace = true }
 futures = { workspace = true, features = ["std", "executor"] }
 # Needed to pickup the "wasm_js" feature for wasm targets from the workspace configuration
 getrandom_v03 = { workspace = true }
+handle = "1.0.2"
 kanal = { workspace = true }
 log = { workspace = true }
 object_store = { workspace = true, optional = true, features = ["fs"] }
 oneshot = { workspace = true }
 parking_lot = { workspace = true }
 pin-project-lite = { workspace = true }
-# this is the maximum subset of fetaures that is safe for wasm32 targets
-handle = "1.0.2"
-tokio = { workspace = true, features = ["io-util", "rt", "sync"] }
 tracing = { workspace = true }
 vortex-buffer = { workspace = true }
 vortex-error = { workspace = true }
@@ -42,8 +38,11 @@ vortex-metrics = { workspace = true }
 vortex-session = { workspace = true }
 
 [target.'cfg(not(target_arch = "wasm32"))'.dependencies]
-# Smol is our default impl, so we don't want it to be optional, but it cannot be part of wasm
+# These deps use std::time which is not available in WASM.
+async-compat = { workspace = true }
+async-fs = { workspace = true }
 smol = { workspace = true }
+tokio = { workspace = true, features = ["io-util", "rt", "sync"] }
 
 [target.'cfg(target_arch = "wasm32")'.dependencies]
 wasm-bindgen-futures = { workspace = true }
diff --git a/vortex-io/src/lib.rs b/vortex-io/src/lib.rs
index 6a08c821c8f..de1f9f4882b 100644
--- a/vortex-io/src/lib.rs
+++ b/vortex-io/src/lib.rs
@@ -11,6 +11,7 @@
 //! flags implements the core traits for several common async runtimes and backing stores.
 
 pub use io_buf::*;
+#[cfg(not(target_arch = "wasm32"))]
 pub use limit::*;
 #[cfg(feature = "object_store")]
 pub use object_store::*;
@@ -20,6 +21,7 @@ pub use write::*;
 pub mod file;
 mod io_buf;
 pub mod kanal_ext;
+#[cfg(not(target_arch = "wasm32"))]
 mod limit;
 #[cfg(feature = "object_store")]
 mod object_store;
diff --git a/vortex-io/src/write.rs b/vortex-io/src/write.rs
index 57048ce66ef..ce61aadcbf4 100644
--- a/vortex-io/src/write.rs
+++ b/vortex-io/src/write.rs
@@ -95,6 +95,7 @@ impl<W: VortexWrite> VortexWrite for &mut W {
     }
 }
 
+#[cfg(not(target_arch = "wasm32"))]
 impl VortexWrite for async_fs::File {
     async fn write_all<B: IoBuf>(&mut self, buffer: B) -> io::Result<B> {
         AsyncWriteExt::write_all(self, buffer.as_slice()).await?;
diff --git a/vortex-layout/Cargo.toml b/vortex-layout/Cargo.toml
index 4e062f66ba3..4b2f106fe75 100644
--- a/vortex-layout/Cargo.toml
+++ b/vortex-layout/Cargo.toml
@@ -26,7 +26,6 @@ futures = { workspace = true, features = ["alloc", "async-await", "executor"] }
 itertools = { workspace = true }
 kanal = { workspace = true }
 log = { workspace = true }
-moka = { workspace = true, features = ["future"] }
 once_cell = { workspace = true, features = ["parking_lot"] }
 oneshot = { workspace = true }
 parking_lot = { workspace = true }
@@ -34,7 +33,6 @@ paste = { workspace = true }
 pco = { workspace = true }
 pin-project-lite = { workspace = true }
 prost = { workspace = true }
-rustc-hash = { workspace = true }
 termtree = { workspace = true }
 tokio = { workspace = true, features = ["rt"], optional = true }
 uuid = { workspace = true }
@@ -55,6 +53,11 @@ vortex-session = { workspace = true }
 vortex-utils = { workspace = true, features = ["dashmap"] }
 vortex-zstd = { workspace = true, optional = true }
 
+# Moka uses std::time::Instant which is not available on WASM.
+[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
+moka = { workspace = true, features = ["future"] }
+rustc-hash = { workspace = true }
+
 [dev-dependencies]
 futures = { workspace = true, features = ["executor"] }
 rstest = { workspace = true }
diff --git a/vortex-layout/src/segments/cache.rs b/vortex-layout/src/segments/cache.rs
index ce023b50f98..fdea8d3b9a3 100644
--- a/vortex-layout/src/segments/cache.rs
+++ b/vortex-layout/src/segments/cache.rs
@@ -5,12 +5,17 @@ use std::sync::Arc;
 
 use async_trait::async_trait;
 use futures::FutureExt;
+#[cfg(not(target_arch = "wasm32"))]
 use moka::future::Cache;
+#[cfg(not(target_arch = "wasm32"))]
 use moka::future::CacheBuilder;
+#[cfg(not(target_arch = "wasm32"))]
 use moka::policy::EvictionPolicy;
+#[cfg(not(target_arch = "wasm32"))]
 use rustc_hash::FxBuildHasher;
 use vortex_buffer::BufferHandle;
 use vortex_buffer::ByteBuffer;
+#[cfg(not(target_arch = "wasm32"))]
 use vortex_error::VortexExpect;
 use vortex_error::VortexResult;
 use vortex_metrics::Counter;
@@ -41,8 +46,13 @@ impl SegmentCache for NoOpSegmentCache {
 }
 
 /// A [`SegmentCache`] based around an in-memory Moka cache.
+///
+/// This cache is not available on WASM targets because moka uses `std::time::Instant` which is not
+/// supported. Use [`NoOpSegmentCache`] for WASM targets instead.
+#[cfg(not(target_arch = "wasm32"))]
 pub struct MokaSegmentCache(Cache<SegmentId, ByteBuffer, FxBuildHasher>);
 
+#[cfg(not(target_arch = "wasm32"))]
 impl MokaSegmentCache {
     pub fn new(max_capacity_bytes: u64) -> Self {
         Self(
@@ -61,6 +71,7 @@ impl MokaSegmentCache {
     }
 }
 
+#[cfg(not(target_arch = "wasm32"))]
 #[async_trait]
 impl SegmentCache for MokaSegmentCache {
     async fn get(&self, id: SegmentId) -> VortexResult<Option<ByteBuffer>> {
diff --git a/vortex-wasm/Cargo.toml b/vortex-wasm/Cargo.toml
index 8861d33d4be..855fa842854 100644
--- a/vortex-wasm/Cargo.toml
+++ b/vortex-wasm/Cargo.toml
@@ -16,18 +16,31 @@ version.workspace = true
 [lib]
 crate-type = ["cdylib", "rlib"]
 
+[features]
+default = []
+# Native feature for binaries - includes tokio runtime and file system dependencies.
+native = [
+    "dep:async-fs",
+    "dep:serde_json",
+    "dep:tempfile",
+    "dep:tokio",
+    "dep:tracing",
+    "vortex/tokio",
+]
+
 [dependencies]
-async-fs = { workspace = true }
+# Core dependencies for both WASM and native.
+console_error_panic_hook = "0.1"
 hex = { workspace = true }
 phf = { workspace = true }
 reqwest = { workspace = true }
 serde = { workspace = true, features = ["derive"] }
 serde-wasm-bindgen = "0.6"
-serde_json = { workspace = true }
-tempfile = { workspace = true }
-tokio = { workspace = true, features = ["full"] }
-tracing = { workspace = true }
-vortex = { workspace = true, features = ["tokio"] }
+vortex = { workspace = true }
+wasm-bindgen = "0.2"
+wasm-bindgen-futures = { workspace = true }
+
+# These are needed by binaries - accessed via vortex re-exports for library code.
 vortex-array = { workspace = true }
 vortex-buffer = { workspace = true }
 vortex-dtype = { workspace = true }
@@ -38,35 +51,42 @@ vortex-layout = { workspace = true }
 vortex-metrics = { workspace = true }
 vortex-scalar = { workspace = true }
 vortex-session = { workspace = true }
-wasm-bindgen = "0.2"
-wasm-bindgen-futures = { workspace = true }
 
-[dependencies.web-sys]
-features = ["console", "Window", "Response"]
-version = "0.3"
+# Native-only dependencies (for binaries).
+async-fs = { workspace = true, optional = true }
+serde_json = { workspace = true, optional = true }
+tempfile = { workspace = true, optional = true }
+tokio = { workspace = true, features = ["full"], optional = true }
+tracing = { workspace = true, optional = true }
 
-[dependencies.js-sys]
+[dependencies.web-sys]
+features = ["console"]
 version = "0.3"
 
 [[bin]]
 name = "migrate"
 path = "src/bin/migrate.rs"
+required-features = ["native"]
 
 [[bin]]
 name = "append"
 path = "src/bin/append.rs"
+required-features = ["native"]
 
 [[bin]]
 name = "test_s3_read"
 path = "src/bin/test_s3_read.rs"
+required-features = ["native"]
 
 [[bin]]
 name = "test_s3_update"
 path = "src/bin/test_s3_update.rs"
+required-features = ["native"]
 
 [[bin]]
 name = "migrate_random_access"
 path = "src/bin/migrate_random_access.rs"
+required-features = ["native"]
 
 [lints]
 workspace = true
diff --git a/vortex-wasm/src/bin/migrate_random_access.rs b/vortex-wasm/src/bin/migrate_random_access.rs
index 52500ae50a5..f1385a125ec 100644
--- a/vortex-wasm/src/bin/migrate_random_access.rs
+++ b/vortex-wasm/src/bin/migrate_random_access.rs
@@ -24,14 +24,7 @@ use vortex::dtype::FieldNames;
 use vortex::file::WriteOptionsSessionExt;
 use vortex::file::WriteStrategyBuilder;
 use vortex::session::VortexSession;
-
-/// Name ID constants from `bench-vortex/src/website/names.rs`.
-mod name_ids {
-    pub const RANDOM_ACCESS: u32 = 2;
-    pub const VORTEX_NVME: u32 = 3;
-    pub const PARQUET_NVME: u32 = 4;
-    pub const LANCE_NVME: u32 = 5;
-}
+use vortex_wasm::website::names;
 
 /// Represents a benchmark entry from the JSON file.
 #[derive(Debug, Deserialize)]
@@ -47,9 +40,9 @@ struct JsonEntry {
 /// Maps the JSON `name` field to a series name ID.
 fn series_name_id(name: &str) -> u32 {
     match name {
-        "random-access/vortex-tokio-local-disk" => name_ids::VORTEX_NVME,
-        "random-access/parquet-tokio-local-disk" => name_ids::PARQUET_NVME,
-        "random-access/lance-tokio-local-disk" => name_ids::LANCE_NVME,
+        "random-access/vortex-tokio-local-disk" => names::VORTEX_NVME,
+        "random-access/parquet-tokio-local-disk" => names::PARQUET_NVME,
+        "random-access/lance-tokio-local-disk" => names::LANCE_NVME,
         _ => panic!("Unknown benchmark name: {}", name),
     }
 }
@@ -93,8 +86,8 @@ async fn async_main() {
         commit_id_bytes.extend_from_slice(&bytes);
 
         // All entries have the same benchmark_group and chart_name.
-        benchmark_groups.push(name_ids::RANDOM_ACCESS);
-        chart_names.push(name_ids::RANDOM_ACCESS);
+        benchmark_groups.push(names::RANDOM_ACCESS);
+        chart_names.push(names::RANDOM_ACCESS);
 
         // Map name to series_name ID.
         series_names.push(series_name_id(&entry.name));
diff --git a/vortex-wasm/src/bin/test_s3_update.rs b/vortex-wasm/src/bin/test_s3_update.rs
index 80f66825f42..c462bf2394e 100644
--- a/vortex-wasm/src/bin/test_s3_update.rs
+++ b/vortex-wasm/src/bin/test_s3_update.rs
@@ -2,6 +2,10 @@
 // SPDX-FileCopyrightText: Copyright the Vortex contributors
 
 //! Test binary for testing the `update_s3_object` function using the AWS CLI.
+//!
+//! Usage:
+//!   cargo run -p vortex-wasm --bin test_s3_update -- --profile <PROFILE_NAME>
+//!   cargo run -p vortex-wasm --bin test_s3_update -- --upload --profile <PROFILE_NAME>
 
 #![allow(clippy::expect_used, clippy::exit)]
 
@@ -16,6 +20,7 @@ use vortex::dtype::DType;
 use vortex::dtype::FieldNames;
 use vortex::dtype::Nullability::NonNullable;
 use vortex::dtype::PType;
+use vortex::io::session::RuntimeSessionExt;
 use vortex::scalar::Scalar;
 use vortex::session::VortexSession;
 use vortex_wasm::website::update_s3::update_s3_object;
@@ -24,20 +29,35 @@ const BUCKET: &str = "vortex-benchmark-results-database";
 const KEY: &str = "test/random_access.vortex";
 
 fn main() {
-    let session = VortexSession::default();
+    let session = VortexSession::default().with_tokio();
+    let args: Vec<String> = env::args().collect();
+
+    // Parse --profile argument.
+    let profile = args
+        .iter()
+        .position(|a| a == "--profile")
+        .and_then(|i| args.get(i + 1))
+        .map(String::as_str);
+
+    if profile.is_none() {
+        eprintln!("Warning: No --profile specified. AWS CLI will use default credentials.");
+        eprintln!("Usage: test_s3_update [--upload] --profile <PROFILE_NAME>");
+    }
 
     // Check for --upload flag.
-    let args: Vec<String> = env::args().collect();
     if args.iter().any(|a| a == "--upload") {
         println!("Uploading random_access.vortex to S3...");
         let local_path = "/Users/connor/spiral/vortex-data/vortex/vortex-wasm/random_access.vortex";
         let file_bytes = fs::read(local_path).expect("Failed to read local file");
         let size = file_bytes.len();
 
-        let status = Command::new("aws")
-            .args(["s3", "cp", local_path, &format!("s3://{}/{}", BUCKET, KEY)])
-            .status()
-            .expect("Failed to run aws CLI");
+        let mut cmd = Command::new("aws");
+        cmd.args(["s3", "cp", local_path, &format!("s3://{}/{}", BUCKET, KEY)]);
+        if let Some(p) = profile {
+            cmd.args(["--profile", p]);
+        }
+
+        let status = cmd.status().expect("Failed to run aws CLI");
 
         if !status.success() {
             eprintln!("Failed to upload to S3");
@@ -50,7 +70,7 @@ fn main() {
     // Single update test.
     println!("\nTesting update_s3_object...");
 
-    let result = update_s3_object(&session, BUCKET, KEY, |existing_array| {
+    let result = update_s3_object(&session, BUCKET, KEY, profile, |existing_array| {
         let existing_len = existing_array.len();
         println!("  Existing array has {} entries", existing_len);
 
diff --git a/vortex-wasm/src/lib.rs b/vortex-wasm/src/lib.rs
index 846b54af71e..efcb7d6ebd1 100644
--- a/vortex-wasm/src/lib.rs
+++ b/vortex-wasm/src/lib.rs
@@ -8,77 +8,85 @@
 
 pub mod website;
 
-use serde::Serialize;
-use vortex::VortexSessionDefault;
-use vortex::session::VortexSession;
-use wasm_bindgen::prelude::*;
-use website::names::NAMES;
-use website::read_s3::read_benchmark_entries;
-
-const KEY: &str = "test/random_access.vortex";
-
-/// Helper macro for logging to browser console.
-macro_rules! log {
-    ($($t:tt)*) => {
-        web_sys::console::log_1(&format!($($t)*).into());
+#[cfg(target_arch = "wasm32")]
+mod wasm_bindings {
+    use serde::Serialize;
+    use vortex::VortexSessionDefault;
+    use vortex::io::runtime::wasm::WasmRuntime;
+    use vortex::io::session::RuntimeSessionExt;
+    use vortex::session::VortexSession;
+    use wasm_bindgen::prelude::*;
+
+    use crate::website::names::NAMES;
+    use crate::website::read_s3::read_benchmark_entries;
+
+    const KEY: &str = "test/random_access.vortex";
+
+    /// Helper macro for logging to browser console.
+    macro_rules! log {
+        ($($t:tt)*) => {
+            web_sys::console::log_1(&format!($($t)*).into());
+        }
     }
-}
 
-/// A single random-access benchmark entry for JavaScript.
-#[derive(Serialize)]
-pub struct JsEntry {
-    pub commit_id: String,
-    pub series_name: &'static str,
-    pub value_ms: f64,
-}
+    /// A single random-access benchmark entry for JavaScript.
+    #[derive(Serialize)]
+    pub struct JsEntry {
+        pub commit_id: String,
+        pub series_name: &'static str,
+        pub value_ms: f64,
+    }
 
-/// Load random-access benchmark data from S3.
-///
-/// This function fetches the Vortex file from S3, parses it, and returns an array of benchmark
-/// entries ready for rendering.
-///
-/// # Returns
-///
-/// A JavaScript array of objects with:
-/// - `commit_id`: 40-character hex string (SHA-1 hash)
-/// - `series_name`: One of "vortex-nvme", "parquet-nvme", "lance-nvme"
-/// - `value_ms`: Value in milliseconds
-#[wasm_bindgen]
-pub async fn load_random_access_data() -> Result<JsValue, JsValue> {
-    log!("Loading random-access benchmark data...");
-
-    let session = VortexSession::default();
-
-    let entries = read_benchmark_entries(&session, KEY)
-        .await
-        .map_err(|e| JsValue::from_str(&format!("Failed to read benchmark entries: {}", e)))?;
-
-    log!("Loaded {} entries", entries.len());
-
-    // Convert to JS-friendly format.
-    let js_entries: Vec<JsEntry> = entries
-        .iter()
-        .map(|e| JsEntry {
-            commit_id: e.commit_id.to_string(),
-            series_name: NAMES.get(&e.series_name.0).copied().unwrap_or("unknown"),
-            value_ms: e.value as f64 / 1_000_000.0,
-        })
-        .collect();
-
-    log!("Returning {} JS entries", js_entries.len());
-
-    serde_wasm_bindgen::to_value(&js_entries)
-        .map_err(|e| JsValue::from_str(&format!("Failed to serialize: {}", e)))
-}
+    /// Load random-access benchmark data from S3.
+    ///
+    /// This function fetches the Vortex file from S3, parses it, and returns an array of benchmark
+    /// entries ready for rendering.
+    ///
+    /// # Returns
+    ///
+    /// A JavaScript array of objects with:
+    /// - `commit_id`: 40-character hex string (SHA-1 hash)
+    /// - `series_name`: One of "vortex-nvme", "parquet-nvme", "lance-nvme"
+    /// - `value_ms`: Value in milliseconds
+    #[wasm_bindgen]
+    pub async fn load_random_access_data() -> Result<JsValue, JsValue> {
+        log!("Loading random-access benchmark data...");
 
-/// Initialize the WASM module.
-#[wasm_bindgen(start)]
-pub fn init() {
-    log!("vortex-wasm initialized");
-}
+        // Create a session configured with the WASM runtime.
+        let session = VortexSession::default().with_handle(WasmRuntime::handle());
+
+        let entries = read_benchmark_entries(&session, KEY)
+            .await
+            .map_err(|e| JsValue::from_str(&format!("Failed to read benchmark entries: {}", e)))?;
 
-/// Get version information.
-#[wasm_bindgen]
-pub fn get_version() -> String {
-    format!("vortex-wasm v{}", env!("CARGO_PKG_VERSION"))
+        log!("Loaded {} entries", entries.len());
+
+        // Convert to JS-friendly format.
+        let js_entries: Vec<JsEntry> = entries
+            .iter()
+            .map(|e| JsEntry {
+                commit_id: e.commit_id.to_string(),
+                series_name: NAMES.get(&e.series_name.0).copied().unwrap_or("unknown"),
+                value_ms: e.value as f64 / 1_000_000.0,
+            })
+            .collect();
+
+        log!("Returning {} JS entries", js_entries.len());
+
+        serde_wasm_bindgen::to_value(&js_entries)
+            .map_err(|e| JsValue::from_str(&format!("Failed to serialize: {}", e)))
+    }
+
+    /// Initialize the WASM module.
+    #[wasm_bindgen(start)]
+    pub fn init() {
+        console_error_panic_hook::set_once();
+        log!("vortex-wasm initialized");
+    }
+
+    /// Get version information.
+    #[wasm_bindgen]
+    pub fn get_version() -> String {
+        format!("vortex-wasm v{}", env!("CARGO_PKG_VERSION"))
+    }
 }
diff --git a/vortex-wasm/src/website/mod.rs b/vortex-wasm/src/website/mod.rs
index b9fbb134503..49df715cfbc 100644
--- a/vortex-wasm/src/website/mod.rs
+++ b/vortex-wasm/src/website/mod.rs
@@ -4,4 +4,7 @@
 pub mod entry;
 pub mod names;
 pub mod read_s3;
+
+// update_s3 uses tokio and std::process::Command which are not available in WASM.
+#[cfg(feature = "native")]
 pub mod update_s3;
diff --git a/vortex-wasm/src/website/names.rs b/vortex-wasm/src/website/names.rs
index 27e911c45f1..9226f344985 100644
--- a/vortex-wasm/src/website/names.rs
+++ b/vortex-wasm/src/website/names.rs
@@ -6,13 +6,21 @@
 use phf::Map;
 use phf::phf_map;
 
+// Name ID constants.
+pub const NULL: u32 = 0;
+pub const INVALID: u32 = 1;
+pub const RANDOM_ACCESS: u32 = 2;
+pub const VORTEX_NVME: u32 = 3;
+pub const PARQUET_NVME: u32 = 4;
+pub const LANCE_NVME: u32 = 5;
+
 // TODO(connor): This should probably be generated smarter.
 /// Maps name IDs to their string representations.
 pub static NAMES: Map<u32, &'static str> = phf_map! {
-    0 => "null",
-    1 => "invalid",
-    2 => "random-access",
-    3 => "vortex-nvme",
-    4 => "parquet-nvme",
-    5 => "lance-nvme",
+    0u32 => "null",
+    1u32 => "invalid",
+    2u32 => "random-access",
+    3u32 => "vortex-nvme",
+    4u32 => "parquet-nvme",
+    5u32 => "lance-nvme",
 };
diff --git a/vortex-wasm/src/website/read_s3.rs b/vortex-wasm/src/website/read_s3.rs
index 9cdb1c8d320..df51d00ecdf 100644
--- a/vortex-wasm/src/website/read_s3.rs
+++ b/vortex-wasm/src/website/read_s3.rs
@@ -63,10 +63,18 @@ pub async fn read_benchmark_entries(
         .map_err(|e| vortex_err!("Failed to read response body: {}", e))?;
 
     // Parse as Vortex file and read all data.
-    let file = session.open_options().open_buffer(bytes.to_vec())?;
+    // Note: We use `open_read_at` directly instead of `open_buffer` because `open_buffer` uses
+    // `futures::executor::block_on` which requires `std::time` (not available in WASM).
+    let buffer: vortex::buffer::ByteBuffer = bytes.to_vec().into();
+    let file = session
+        .open_options()
+        .with_initial_read_size(0)
+        .without_segment_cache()
+        .open_read_at(buffer)
+        .await?;
+
     let array = file.scan()?.into_array_stream()?.read_all().await?;
 
-    // Convert the array to benchmark entries.
     array_to_benchmark_entries(&array)
 }
 
diff --git a/vortex-wasm/src/website/update_s3.rs b/vortex-wasm/src/website/update_s3.rs
index 6602df23ee7..9ef5c5f2056 100644
--- a/vortex-wasm/src/website/update_s3.rs
+++ b/vortex-wasm/src/website/update_s3.rs
@@ -24,7 +24,7 @@ use vortex::session::VortexSession;
 
 use super::entry::BenchmarkEntry;
 
-const MAX_RETRIES: u32 = 5;
+const MAX_RETRIES: u32 = 8;
 
 /// Internal error type for retry control.
 enum UpdateError {
@@ -34,21 +34,34 @@ enum UpdateError {
     Other(String),
 }
 
+/// Builds AWS CLI arguments, optionally including a profile.
+fn aws_args(base_args: &[&str], profile: Option<&str>) -> Vec<String> {
+    let mut args: Vec<String> = base_args.iter().map(|s| s.to_string()).collect();
+    if let Some(p) = profile {
+        args.push("--profile".to_string());
+        args.push(p.to_string());
+    }
+    args
+}
+
 /// Gets the current ETag of an S3 object using the AWS CLI.
-fn get_etag(bucket: &str, key: &str) -> Result<String, UpdateError> {
+fn get_etag(bucket: &str, key: &str, profile: Option<&str>) -> Result<String, UpdateError> {
+    let base_args = [
+        "s3api",
+        "head-object",
+        "--bucket",
+        bucket,
+        "--key",
+        key,
+        "--query",
+        "ETag",
+        "--output",
+        "text",
+    ];
+    let args = aws_args(&base_args, profile);
+
     let output = Command::new("aws")
-        .args([
-            "s3api",
-            "head-object",
-            "--bucket",
-            bucket,
-            "--key",
-            key,
-            "--query",
-            "ETag",
-            "--output",
-            "text",
-        ])
+        .args(&args)
         .output()
         .map_err(|e| UpdateError::Other(format!("Failed to run aws CLI: {}", e)))?;
 
@@ -73,19 +86,23 @@ fn download_object(
     key: &str,
     etag: &str,
     dest_path: &str,
+    profile: Option<&str>,
 ) -> Result<(), UpdateError> {
+    let base_args = [
+        "s3api",
+        "get-object",
+        "--bucket",
+        bucket,
+        "--key",
+        key,
+        "--if-match",
+        etag,
+        dest_path,
+    ];
+    let args = aws_args(&base_args, profile);
+
     let output = Command::new("aws")
-        .args([
-            "s3api",
-            "get-object",
-            "--bucket",
-            bucket,
-            "--key",
-            key,
-            "--if-match",
-            etag,
-            dest_path,
-        ])
+        .args(&args)
         .output()
         .map_err(|e| UpdateError::Other(format!("Failed to run aws CLI: {}", e)))?;
 
@@ -104,20 +121,29 @@ fn download_object(
 }
 
 /// Uploads a local file to S3 using the AWS CLI with ETag matching.
-fn upload_object(bucket: &str, key: &str, etag: &str, src_path: &str) -> Result<(), UpdateError> {
+fn upload_object(
+    bucket: &str,
+    key: &str,
+    etag: &str,
+    src_path: &str,
+    profile: Option<&str>,
+) -> Result<(), UpdateError> {
+    let base_args = [
+        "s3api",
+        "put-object",
+        "--bucket",
+        bucket,
+        "--key",
+        key,
+        "--if-match",
+        etag,
+        "--body",
+        src_path,
+    ];
+    let args = aws_args(&base_args, profile);
+
     let output = Command::new("aws")
-        .args([
-            "s3api",
-            "put-object",
-            "--bucket",
-            bucket,
-            "--key",
-            key,
-            "--if-match",
-            etag,
-            "--body",
-            src_path,
-        ])
+        .args(&args)
         .output()
         .map_err(|e| UpdateError::Other(format!("Failed to run aws CLI: {}", e)))?;
 
@@ -146,6 +172,7 @@ fn upload_object(bucket: &str, key: &str, etag: &str, src_path: &str) -> Result<
 /// * `session` - The Vortex session for reading and writing files.
 /// * `bucket` - The S3 bucket name.
 /// * `key` - The S3 object key.
+/// * `profile` - Optional AWS CLI profile name (e.g., from `aws sso login`).
 /// * `update_fn` - A function that takes the file's array data and returns the updated array.
 ///   The returned array must have the same dtype as the input. This function may be called
 ///   multiple times if retries are needed.
@@ -162,6 +189,7 @@ pub fn update_s3_object<F>(
     session: &VortexSession,
     bucket: &str,
     key: &str,
+    profile: Option<&str>,
     mut update_fn: F,
 ) -> VortexResult<()>
 where
@@ -171,7 +199,7 @@ where
         .map_err(|e| vortex_err!("Failed to create tokio runtime: {}", e))?;
 
     for attempt in 0..MAX_RETRIES {
-        match try_update_s3_object(session, bucket, key, &mut update_fn, &runtime) {
+        match try_update_s3_object(session, bucket, key, profile, &mut update_fn, &runtime) {
             Ok(()) => return Ok(()),
             Err(UpdateError::EtagMismatch) => {
                 eprintln!("ETag mismatch on attempt {}. Retrying...", attempt + 1);
@@ -191,6 +219,7 @@ fn try_update_s3_object<F>(
     session: &VortexSession,
     bucket: &str,
     key: &str,
+    profile: Option<&str>,
     update_fn: &mut F,
     runtime: &tokio::runtime::Runtime,
 ) -> Result<(), UpdateError>
@@ -198,14 +227,14 @@ where
     F: FnMut(ArrayRef) -> VortexResult<ArrayRef>,
 {
     // Get current ETag.
-    let etag = get_etag(bucket, key)?;
+    let etag = get_etag(bucket, key, profile)?;
 
     // Download to temp file.
     let download_file = NamedTempFile::new()
         .map_err(|e| UpdateError::Other(format!("Failed to create temp file: {}", e)))?;
     let download_path = download_file.path().to_string_lossy().to_string();
 
-    download_object(bucket, key, &etag, &download_path)?;
+    download_object(bucket, key, &etag, &download_path, profile)?;
 
     // Read and parse.
     let existing_bytes = fs::read(&download_path)
@@ -260,7 +289,7 @@ where
     let upload_path = upload_file.path().to_string_lossy().to_string();
 
     // Upload with if-match.
-    upload_object(bucket, key, &etag, &upload_path)?;
+    upload_object(bucket, key, &etag, &upload_path, profile)?;
 
     Ok(())
 }
@@ -276,16 +305,18 @@ where
 /// * `session` - The Vortex session for reading and writing files.
 /// * `bucket` - The S3 bucket name.
 /// * `key` - The S3 object key.
+/// * `profile` - Optional AWS CLI profile name.
 /// * `entry` - The benchmark entry to append.
 pub fn append_benchmark_entry(
     session: &VortexSession,
     bucket: &str,
     key: &str,
+    profile: Option<&str>,
     entry: &BenchmarkEntry,
 ) -> VortexResult<()> {
     let scalar = entry.into_scalar();
 
-    update_s3_object(session, bucket, key, |existing_array| {
+    update_s3_object(session, bucket, key, profile, |existing_array| {
         let existing_len = existing_array.len();
         let dtype = existing_array.dtype().clone();
 

From 11f6eeb560c38804a93537b42c31df9a0fd4a5fa Mon Sep 17 00:00:00 2001
From: Connor Tsui <connor.tsui20@gmail.com>
Date: Wed, 3 Dec 2025 10:38:34 -0500
Subject: [PATCH 09/30] updates

Signed-off-by: Connor Tsui <connor.tsui20@gmail.com>
---
 plan.md                            |  16 +-
 vortex-wasm/src/website/entry.rs   |  75 +++
 vortex-wasm/src/website/read_s3.rs | 110 +----
 vortex-wasm/wasm-test.html         | 759 +++++++++++++++++++++++++++++
 4 files changed, 874 insertions(+), 86 deletions(-)
 create mode 100644 vortex-wasm/wasm-test.html

diff --git a/plan.md b/plan.md
index 5ac44435071..9bd48142b5a 100644
--- a/plan.md
+++ b/plan.md
@@ -34,7 +34,6 @@ _Approximately in order of priority:_
 - Migrate the JavaScript code to use the Rust bindings
 - Test
 
-
 ### Ideas
 
 ```rust
@@ -67,15 +66,26 @@ fn main() {
 - We can simply read the entire file of all benchmarking data into memory, decompress in memory, add
   a new entry, compress, and then write back to S3
 
+### 1 file vs many files
+
+With 1 file, we have to stuff every different kind of benchmark into the same place, which isnt great
+for compression and it means we have to do more work on read time to group data correctly (by benchmark group, chart, then series).
+
+The seemingly obvious alternative here is to have a different file per "same" data. But what exactly would these be grouped by? We definitely do not want to group by series as that makes it pretty
+difficult to add a new series to a chart (maybe it's not terrible with some more engineering). It
+also would mean that we would start to approach 1000+ files.
+
+We could also do a file per chart, as that maps much closer to how we generate these chart. One
+program is generating all the data for one chart, but that program might also generate data for
+multiple charts. This is definitely something we should look into later, but for now having a single
+file that has all the data (all with the same schema) is the most flexible.
 
 ### Things to update
 
 Start with just the random access benchmark
 
-
 generate a bunch of fake data and upload it to S3
 
 - Add bindings to read and write `BenchmarkEntry` vortex arrays to and from S3
-USE IPC FORMAT INSTEAD
 - `query_bench` to post directly to S3
 - `random_access` and `compress` to also post directly to S3
diff --git a/vortex-wasm/src/website/entry.rs b/vortex-wasm/src/website/entry.rs
index 3c0ccb1caa4..6f814ec24b3 100644
--- a/vortex-wasm/src/website/entry.rs
+++ b/vortex-wasm/src/website/entry.rs
@@ -12,6 +12,13 @@ use vortex::dtype::Nullability::NonNullable;
 use vortex::dtype::PType;
 use vortex::dtype::StructFields;
 use vortex::scalar::Scalar;
+use vortex_array::Array;
+use vortex_array::ToCanonical;
+use vortex_array::arrays::FixedSizeListArray;
+use vortex_array::arrays::PrimitiveArray;
+use vortex_array::arrays::StructArray;
+use vortex_error::VortexResult;
+use vortex_error::vortex_bail;
 
 /// A benchmark entry, grouped by benchmark group, then chart name, then series name.
 #[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
@@ -98,6 +105,74 @@ impl BenchmarkEntry {
             ],
         )
     }
+
+    /// Converts a Vortex array (expected to be a struct array) into a vector of [`BenchmarkEntry`].
+    ///
+    /// The array must have the following schema:
+    /// - `commit_id`: FixedSizeList<u8, 20>
+    /// - `benchmark_group`: u32
+    /// - `chart_name`: u32
+    /// - `series_name`: u32
+    /// - `value`: u64
+    pub fn vec_from_array(array: &dyn Array) -> VortexResult<Vec<Self>> {
+        // Convert to canonical struct array.
+        let struct_array: StructArray = array.to_struct();
+
+        let len = struct_array.len();
+        let mut entries = Vec::with_capacity(len);
+
+        // Extract each field.
+        let commit_id_field = struct_array.field_by_name("commit_id")?;
+        let benchmark_group_field = struct_array.field_by_name("benchmark_group")?;
+        let chart_name_field = struct_array.field_by_name("chart_name")?;
+        let series_name_field = struct_array.field_by_name("series_name")?;
+        let value_field = struct_array.field_by_name("value")?;
+
+        // Convert commit_id to canonical fixed-size list and get the underlying bytes.
+        let commit_id_fsl: FixedSizeListArray = commit_id_field.to_fixed_size_list();
+        if commit_id_fsl.list_size() != 20 {
+            vortex_bail!(
+                "Expected commit_id to have list_size 20, got {}",
+                commit_id_fsl.list_size()
+            );
+        }
+
+        // Get the elements as a primitive array of u8.
+        let commit_id_elements: PrimitiveArray = commit_id_fsl.elements().to_primitive();
+        let commit_id_bytes: &[u8] = commit_id_elements.as_slice();
+
+        // Convert primitive fields.
+        let benchmark_group_prim: PrimitiveArray = benchmark_group_field.to_primitive();
+        let benchmark_groups: &[u32] = benchmark_group_prim.as_slice();
+
+        let chart_name_prim: PrimitiveArray = chart_name_field.to_primitive();
+        let chart_names: &[u32] = chart_name_prim.as_slice();
+
+        let series_name_prim: PrimitiveArray = series_name_field.to_primitive();
+        let series_names: &[u32] = series_name_prim.as_slice();
+
+        let value_prim: PrimitiveArray = value_field.to_primitive();
+        let values: &[u64] = value_prim.as_slice();
+
+        // Build the entries.
+        for i in 0..len {
+            // Extract the 20-byte commit_id for this row.
+            let start = i * 20;
+            let end = start + 20;
+            let mut commit_id_arr = [0u8; 20];
+            commit_id_arr.copy_from_slice(&commit_id_bytes[start..end]);
+
+            entries.push(BenchmarkEntry {
+                commit_id: CommitId(commit_id_arr),
+                benchmark_group: NameId(benchmark_groups[i]),
+                chart_name: NameId(chart_names[i]),
+                series_name: NameId(series_names[i]),
+                value: values[i],
+            });
+        }
+
+        Ok(entries)
+    }
 }
 
 /// String ID lookup so that we don't have to store the string every time.
diff --git a/vortex-wasm/src/website/read_s3.rs b/vortex-wasm/src/website/read_s3.rs
index df51d00ecdf..1d1abb5ff44 100644
--- a/vortex-wasm/src/website/read_s3.rs
+++ b/vortex-wasm/src/website/read_s3.rs
@@ -3,29 +3,23 @@
 
 //! Functions for reading benchmark data from S3.
 
-use vortex::array::Array;
-use vortex::array::ToCanonical;
-use vortex::array::arrays::FixedSizeListArray;
-use vortex::array::arrays::PrimitiveArray;
-use vortex::array::arrays::StructArray;
 use vortex::array::stream::ArrayStreamExt;
 use vortex::error::VortexResult;
 use vortex::error::vortex_bail;
 use vortex::error::vortex_err;
 use vortex::file::OpenOptionsSessionExt;
 use vortex::session::VortexSession;
+use vortex_array::ArrayRef;
 
 use super::entry::BenchmarkEntry;
-use super::entry::CommitId;
-use super::entry::NameId;
 
 /// Base URL for the S3 bucket containing benchmark data.
 const S3_BASE_URL: &str = "https://vortex-benchmark-results-database.s3.amazonaws.com";
 
-/// Reads benchmark entries from an S3 object containing a Vortex file.
+/// Reads a Vortex array from an S3 object.
 ///
-/// This function downloads the Vortex file from S3 using HTTP (the bucket is public), parses the
-/// columnar struct array, and converts it to a vector of row-wise [`BenchmarkEntry`] structs.
+/// This function downloads the Vortex file from S3 using HTTP (the bucket is public) and
+/// returns the parsed array.
 ///
 /// # Arguments
 ///
@@ -37,11 +31,7 @@ const S3_BASE_URL: &str = "https://vortex-benchmark-results-database.s3.amazonaw
 /// Returns an error if:
 /// - The HTTP request fails.
 /// - The file is not a valid Vortex file.
-/// - The schema does not match the expected [`BenchmarkEntry`] schema.
-pub async fn read_benchmark_entries(
-    session: &VortexSession,
-    key: &str,
-) -> VortexResult<Vec<BenchmarkEntry>> {
+pub async fn read_s3_array(session: &VortexSession, key: &str) -> VortexResult<ArrayRef> {
     let url = format!("{}/{}", S3_BASE_URL, key);
 
     let response = reqwest::get(&url)
@@ -73,75 +63,29 @@ pub async fn read_benchmark_entries(
         .open_read_at(buffer)
         .await?;
 
-    let array = file.scan()?.into_array_stream()?.read_all().await?;
-
-    array_to_benchmark_entries(&array)
+    file.scan()?.into_array_stream()?.read_all().await
 }
 
-/// Converts a Vortex array (expected to be a struct array) into a vector of [`BenchmarkEntry`].
+/// Reads benchmark entries from an S3 object containing a Vortex file.
 ///
-/// The array must have the following schema:
-/// - `commit_id`: FixedSizeList<u8, 20>
-/// - `benchmark_group`: u32
-/// - `chart_name`: u32
-/// - `series_name`: u32
-/// - `value`: u64
-pub fn array_to_benchmark_entries(array: &dyn Array) -> VortexResult<Vec<BenchmarkEntry>> {
-    // Convert to canonical struct array.
-    let struct_array: StructArray = array.to_struct();
-
-    let len = struct_array.len();
-    let mut entries = Vec::with_capacity(len);
-
-    // Extract each field.
-    let commit_id_field = struct_array.field_by_name("commit_id")?;
-    let benchmark_group_field = struct_array.field_by_name("benchmark_group")?;
-    let chart_name_field = struct_array.field_by_name("chart_name")?;
-    let series_name_field = struct_array.field_by_name("series_name")?;
-    let value_field = struct_array.field_by_name("value")?;
-
-    // Convert commit_id to canonical fixed-size list and get the underlying bytes.
-    let commit_id_fsl: FixedSizeListArray = commit_id_field.to_fixed_size_list();
-    if commit_id_fsl.list_size() != 20 {
-        vortex_bail!(
-            "Expected commit_id to have list_size 20, got {}",
-            commit_id_fsl.list_size()
-        );
-    }
-
-    // Get the elements as a primitive array of u8.
-    let commit_id_elements: PrimitiveArray = commit_id_fsl.elements().to_primitive();
-    let commit_id_bytes: &[u8] = commit_id_elements.as_slice();
-
-    // Convert primitive fields.
-    let benchmark_group_prim: PrimitiveArray = benchmark_group_field.to_primitive();
-    let benchmark_groups: &[u32] = benchmark_group_prim.as_slice();
-
-    let chart_name_prim: PrimitiveArray = chart_name_field.to_primitive();
-    let chart_names: &[u32] = chart_name_prim.as_slice();
-
-    let series_name_prim: PrimitiveArray = series_name_field.to_primitive();
-    let series_names: &[u32] = series_name_prim.as_slice();
-
-    let value_prim: PrimitiveArray = value_field.to_primitive();
-    let values: &[u64] = value_prim.as_slice();
-
-    // Build the entries.
-    for i in 0..len {
-        // Extract the 20-byte commit_id for this row.
-        let start = i * 20;
-        let end = start + 20;
-        let mut commit_id_arr = [0u8; 20];
-        commit_id_arr.copy_from_slice(&commit_id_bytes[start..end]);
-
-        entries.push(BenchmarkEntry {
-            commit_id: CommitId(commit_id_arr),
-            benchmark_group: NameId(benchmark_groups[i]),
-            chart_name: NameId(chart_names[i]),
-            series_name: NameId(series_names[i]),
-            value: values[i],
-        });
-    }
-
-    Ok(entries)
+/// This function downloads the Vortex file from S3 using HTTP (the bucket is public), parses the
+/// columnar struct array, and converts it to a vector of row-wise [`BenchmarkEntry`] structs.
+///
+/// # Arguments
+///
+/// * `session` - The Vortex session for reading files.
+/// * `key` - The S3 object key (e.g., "test/random_access.vortex").
+///
+/// # Errors
+///
+/// Returns an error if:
+/// - The HTTP request fails.
+/// - The file is not a valid Vortex file.
+/// - The schema does not match the expected [`BenchmarkEntry`] schema.
+pub async fn read_benchmark_entries(
+    session: &VortexSession,
+    key: &str,
+) -> VortexResult<Vec<BenchmarkEntry>> {
+    let array = read_s3_array(session, key).await?;
+    BenchmarkEntry::vec_from_array(&array)
 }
diff --git a/vortex-wasm/wasm-test.html b/vortex-wasm/wasm-test.html
new file mode 100644
index 00000000000..a36f0b107be
--- /dev/null
+++ b/vortex-wasm/wasm-test.html
@@ -0,0 +1,759 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vortex WASM Random Access Benchmark</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
+    <style>
+        :root {
+            --vortex-blue: #5971FD;
+            --vortex-green: #19a508;
+            --parquet-orange: #ef7f1d;
+            --lance-teal: #2D936C;
+        }
+
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            background: #f5f5f5;
+            min-height: 100vh;
+            padding: 2rem;
+            padding-bottom: 8rem;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        h1 {
+            color: #333;
+            margin-bottom: 0.5rem;
+        }
+
+        .subtitle {
+            color: #666;
+            margin-bottom: 2rem;
+        }
+
+        .status {
+            background: white;
+            border-radius: 8px;
+            padding: 1rem;
+            margin-bottom: 1rem;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+
+        .status.loading {
+            border-left: 4px solid var(--vortex-blue);
+        }
+
+        .status.success {
+            border-left: 4px solid var(--vortex-green);
+        }
+
+        .status.error {
+            border-left: 4px solid #e74c3c;
+        }
+
+        .chart-container {
+            background: white;
+            border-radius: 0 0 8px 8px;
+            padding: 1.5rem;
+            padding-top: 1rem;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            margin-bottom: 1rem;
+            margin-top: 0;
+            border-top: 1px solid #e0e0e0;
+        }
+
+        .chart-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1rem;
+        }
+
+        .chart-title {
+            font-size: 1.25rem;
+            color: #333;
+            margin: 0;
+        }
+
+        .control-info-compact {
+            color: #666;
+            font-size: 0.85rem;
+        }
+
+        .chart-wrapper {
+            position: relative;
+            height: 400px;
+        }
+
+        .summary {
+            background: white;
+            border-radius: 8px 8px 0 0;
+            padding: 1.5rem;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            margin-bottom: 0;
+        }
+
+        .summary h3 {
+            margin-bottom: 1rem;
+            color: #333;
+        }
+
+        .series-item {
+            display: flex;
+            align-items: center;
+            padding: 0.5rem 0;
+            border-bottom: 1px solid #eee;
+        }
+
+        .series-item:last-child {
+            border-bottom: none;
+        }
+
+        .series-rank {
+            width: 2rem;
+            font-weight: bold;
+            color: #666;
+        }
+
+        .series-name {
+            flex: 1;
+            font-weight: 500;
+        }
+
+        .series-value {
+            text-align: right;
+            font-family: monospace;
+        }
+
+        .series-ratio {
+            width: 4rem;
+            text-align: right;
+            color: #666;
+            font-size: 0.9rem;
+        }
+
+        .spinner {
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            border: 2px solid #ddd;
+            border-top-color: var(--vortex-blue);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin-right: 0.5rem;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        .hidden {
+            display: none;
+        }
+
+        .x-axis-label {
+            text-align: center;
+            color: #999;
+            font-size: 0.65rem;
+            margin-top: 0.25rem;
+            margin-bottom: 0.25rem;
+        }
+
+        .chartjs-tooltip {
+            position: absolute;
+            pointer-events: none;
+            opacity: 0;
+            transition: opacity 0.2s ease;
+            background: rgba(0, 0, 0, 0.8);
+            color: white;
+            border-radius: 4px;
+            padding: 10px;
+            font-size: 12px;
+            z-index: 1000;
+        }
+
+        .chartjs-tooltip.active {
+            opacity: 1;
+        }
+
+        .chartjs-tooltip::before {
+            content: '';
+            position: absolute;
+            top: -8px;
+            left: 50%;
+            transform: translateX(-50%);
+            border-left: 8px solid transparent;
+            border-right: 8px solid transparent;
+            border-bottom: 8px solid rgba(0, 0, 0, 0.8);
+        }
+
+        .chartjs-tooltip-body {
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }
+
+        .chartjs-tooltip-item {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .chartjs-tooltip-color {
+            width: 12px;
+            height: 12px;
+            border-radius: 2px;
+        }
+
+        .chartjs-tooltip-footer {
+            margin-top: 8px;
+            padding-top: 8px;
+            border-top: 1px solid rgba(255, 255, 255, 0.2);
+            font-size: 11px;
+            opacity: 0.9;
+        }
+
+        .timeline-scrollbar-container {
+            overflow-x: auto;
+            overflow-y: hidden;
+            height: 16px;
+            background: transparent;
+            border-radius: 8px;
+            cursor: pointer;
+            margin-top: 0.25rem;
+        }
+
+        .timeline-scrollbar-container::-webkit-scrollbar {
+            height: 16px;
+        }
+
+        .timeline-scrollbar-container::-webkit-scrollbar-track {
+            background: rgba(0, 0, 0, 0.05);
+            border-radius: 8px;
+        }
+
+        .timeline-scrollbar-container::-webkit-scrollbar-thumb {
+            background: rgba(89, 113, 253, 0.3);
+            border-radius: 8px;
+            border: 3px solid transparent;
+            background-clip: padding-box;
+        }
+
+        .timeline-scrollbar-container::-webkit-scrollbar-thumb:hover {
+            background: rgba(89, 113, 253, 0.5);
+            background-clip: padding-box;
+        }
+
+        #timeline-scrollbar-content {
+            height: 1px;
+            pointer-events: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Vortex WASM Random Access Benchmark</h1>
+        <p class="subtitle">Loading benchmark data directly from a Vortex file using WebAssembly</p>
+
+        <div id="status" class="status loading">
+            <span class="spinner"></span>
+            <span id="status-text">Initializing WASM module...</span>
+        </div>
+
+        <div id="summary" class="summary hidden">
+            <h3>Random Access Performance (Latest)</h3>
+            <div id="summary-list"></div>
+            <p style="margin-top: 1rem; color: #666; font-size: 0.9rem;">
+                Random access time | Ratio to fastest (lower is better)
+            </p>
+        </div>
+
+        <div id="chart-section" class="chart-container hidden">
+            <div class="chart-header">
+                <h2 class="chart-title">Random Access Time (ms)</h2>
+                <span id="control-info-text" class="control-info-compact">Showing commits 1-50 of 100</span>
+            </div>
+            <div class="chart-wrapper">
+                <canvas id="chart"></canvas>
+            </div>
+            <div id="chartjs-tooltip" class="chartjs-tooltip"></div>
+            <div class="x-axis-label">Commit</div>
+            <div class="timeline-scrollbar-container">
+                <div id="timeline-scrollbar-content"></div>
+            </div>
+        </div>
+    </div>
+
+    <script type="module">
+        // Series colors matching the main website.
+        const SERIES_COLORS = {
+            "vortex-nvme": "#19a508",
+            "parquet-nvme": "#ef7f1d",
+            "lance-nvme": "#2D936C",
+        };
+
+        // Update status display.
+        function setStatus(message, type = "loading") {
+            const status = document.getElementById("status");
+            const text = document.getElementById("status-text");
+            status.className = `status ${type}`;
+            text.textContent = message;
+
+            // Hide spinner for success/error.
+            const spinner = status.querySelector(".spinner");
+            if (spinner) {
+                spinner.style.display = type === "loading" ? "inline-block" : "none";
+            }
+        }
+
+        // Format time in human-readable format.
+        function formatTime(ms) {
+            if (ms < 1) return `${(ms * 1000).toFixed(0)}μs`;
+            if (ms < 1000) return `${ms.toFixed(1)}ms`;
+            return `${(ms / 1000).toFixed(2)}s`;
+        }
+
+        async function main() {
+            try {
+                // Step 1: Load WASM module.
+                setStatus("Loading WASM module...");
+                const wasm = await import("./pkg/vortex_wasm.js");
+                await wasm.default();
+                console.log("WASM loaded:", wasm.get_version());
+
+                // Step 2: Load commits from S3 (for aligning data).
+                setStatus("Loading commit metadata from S3...");
+                const commitsResponse = await fetch(
+                    "https://vortex-benchmark-results-database.s3.amazonaws.com/commits.json"
+                );
+                const commitsText = await commitsResponse.text();
+
+                // Parse JSONL format (one JSON object per line).
+                const commitsData = {};
+                for (const line of commitsText.split("\n")) {
+                    const trimmed = line.trim();
+                    if (trimmed.length > 0) {
+                        try {
+                            const commit = JSON.parse(trimmed);
+                            commitsData[commit.id] = commit;
+                        } catch (e) {
+                            console.warn("Failed to parse commit line:", e);
+                        }
+                    }
+                }
+
+                // Parse commits and sort by timestamp.
+                const commits = Object.values(commitsData)
+                    .sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
+                commits.forEach((commit, index) => {
+                    commit.sortedIndex = index;
+                });
+
+                // Create a map from commit_id -> sortedIndex.
+                const commitIndexMap = new Map();
+                commits.forEach(commit => {
+                    commitIndexMap.set(commit.id, commit.sortedIndex);
+                });
+
+                console.log(`Loaded ${commits.length} commits`);
+
+                // Step 3: Load random access data from WASM.
+                setStatus("Loading random access data from Vortex file via WASM...");
+                const entries = await wasm.load_random_access_data();
+                console.log(`Loaded ${entries.length} benchmark entries`);
+
+                // Step 4: Build the data structure for the chart.
+                // Group entries by series_name and align to commit indices.
+                const seriesData = new Map();
+                const seriesNames = ["vortex-nvme", "parquet-nvme", "lance-nvme"];
+
+                // Initialize empty arrays for each series.
+                for (const name of seriesNames) {
+                    seriesData.set(name, new Array(commits.length).fill(null));
+                }
+
+                // Populate with data.
+                let entriesAligned = 0;
+                for (const entry of entries) {
+                    const commitIndex = commitIndexMap.get(entry.commit_id);
+                    if (commitIndex !== undefined) {
+                        const series = seriesData.get(entry.series_name);
+                        if (series) {
+                            series[commitIndex] = { value: entry.value_ms };
+                            entriesAligned++;
+                        }
+                    }
+                }
+
+                console.log(`Aligned ${entriesAligned}/${entries.length} entries to commits`);
+
+                // Step 5: Calculate summary metrics (latest data point for each series).
+                const latestResults = new Map();
+                for (const [seriesName, data] of seriesData.entries()) {
+                    // Find the most recent non-null value.
+                    for (let i = data.length - 1; i >= 0; i--) {
+                        if (data[i] !== null) {
+                            latestResults.set(seriesName, data[i].value);
+                            break;
+                        }
+                    }
+                }
+
+                // Find fastest time.
+                let fastestTime = Infinity;
+                for (const time of latestResults.values()) {
+                    fastestTime = Math.min(fastestTime, time);
+                }
+
+                // Sort by time and display summary.
+                const sortedResults = Array.from(latestResults.entries())
+                    .sort((a, b) => a[1] - b[1]);
+
+                const summaryList = document.getElementById("summary-list");
+                summaryList.innerHTML = "";
+                sortedResults.forEach(([name, time], index) => {
+                    const ratio = time / fastestTime;
+                    const item = document.createElement("div");
+                    item.className = "series-item";
+                    item.innerHTML = `
+                        <span class="series-rank">#${index + 1}</span>
+                        <span class="series-name" style="color: ${SERIES_COLORS[name]}">${name}</span>
+                        <span class="series-value">${formatTime(time)}</span>
+                        <span class="series-ratio">${ratio.toFixed(2)}x</span>
+                    `;
+                    summaryList.appendChild(item);
+                });
+                document.getElementById("summary").classList.remove("hidden");
+
+                // Step 6: Create the chart.
+                // Find the range of data (first and last non-null indices).
+                let firstDataIndex = commits.length;
+                let lastDataIndex = 0;
+                for (const data of seriesData.values()) {
+                    for (let i = 0; i < data.length; i++) {
+                        if (data[i] !== null) {
+                            firstDataIndex = Math.min(firstDataIndex, i);
+                            lastDataIndex = Math.max(lastDataIndex, i);
+                        }
+                    }
+                }
+
+                // Slice to show only the range with data.
+                const startIndex = Math.max(0, firstDataIndex);
+                const endIndex = lastDataIndex + 1;
+                const chartCommits = commits.slice(startIndex, endIndex);
+
+                const datasets = seriesNames.map(name => {
+                    const data = seriesData.get(name);
+                    const slicedData = data.slice(startIndex, endIndex).map(d => d?.value ?? null);
+                    return {
+                        label: name,
+                        data: slicedData,
+                        borderColor: SERIES_COLORS[name],
+                        backgroundColor: SERIES_COLORS[name] + "60",
+                        borderWidth: 2,
+                        pointRadius: 1,
+                        spanGaps: true,
+                    };
+                });
+
+                const ctx = document.getElementById("chart").getContext("2d");
+
+                // Custom plugin to draw vertical line on hover.
+                const verticalLinePlugin = {
+                    id: 'verticalLine',
+                    afterDatasetsDraw(chart, args, options) {
+                        if (chart.tooltip?._active?.length) {
+                            const activePoint = chart.tooltip._active[0];
+                            const ctx = chart.ctx;
+                            const x = activePoint.element.x;
+                            const topY = chart.scales.y.top;
+                            const bottomY = chart.scales.y.bottom;
+
+                            ctx.save();
+                            ctx.beginPath();
+                            ctx.moveTo(x, topY);
+                            ctx.lineTo(x, bottomY);
+                            ctx.lineWidth = 2;
+                            ctx.strokeStyle = 'rgba(89, 113, 253, 0.5)';
+                            ctx.stroke();
+                            ctx.restore();
+                        }
+                    }
+                };
+
+                // Register the vertical line plugin.
+                Chart.register(verticalLinePlugin);
+
+                let chartInstance = null;
+                chartInstance = new Chart(ctx, {
+                    type: "line",
+                    data: {
+                        labels: chartCommits.map(c => c.id.slice(0, 7)),
+                        datasets: datasets,
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        layout: {
+                            padding: {
+                                left: 0,
+                                right: 0,
+                                top: 0,
+                                bottom: 0
+                            }
+                        },
+                        interaction: {
+                            intersect: false,
+                            mode: "index",
+                        },
+                        scales: {
+                            x: {
+                                title: {
+                                    display: false,
+                                },
+                                ticks: {
+                                    maxRotation: 45,
+                                    minRotation: 45,
+                                    autoSkipPadding: 10,
+                                },
+                                // Show last 50 commits by default.
+                                min: Math.max(0, chartCommits.length - 50),
+                            },
+                            y: {
+                                title: {
+                                    display: true,
+                                    text: "Time (ms)",
+                                },
+                                beginAtZero: true,
+                            },
+                        },
+                        plugins: {
+                            verticalLine: {},
+                            legend: {
+                                position: "top",
+                            },
+                            tooltip: {
+                                enabled: false,
+                                external: function(context) {
+                                    const tooltipEl = document.getElementById('chartjs-tooltip');
+                                    const tooltipModel = context.tooltip;
+
+                                    // Hide if no tooltip.
+                                    if (tooltipModel.opacity === 0) {
+                                        tooltipEl.classList.remove('active');
+                                        return;
+                                    }
+
+                                    // Set tooltip content.
+                                    if (tooltipModel.body) {
+                                        const titleLines = tooltipModel.title || [];
+                                        const footerLines = tooltipModel.footer || [];
+
+                                        let innerHtml = '<div class="chartjs-tooltip-body">';
+
+                                        // Add title (commit ID).
+                                        titleLines.forEach(title => {
+                                            innerHtml += `<div style="font-weight: bold; margin-bottom: 4px;">${title}</div>`;
+                                        });
+
+                                        // Add body (series values) - sorted high to low.
+                                        const sortedItems = tooltipModel.dataPoints.sort((a, b) => b.parsed.y - a.parsed.y);
+                                        sortedItems.forEach((item, i) => {
+                                            const colors = tooltipModel.labelColors[i];
+                                            const value = item.formattedValue;
+                                            const label = item.dataset.label;
+                                            innerHtml += `
+                                                <div class="chartjs-tooltip-item">
+                                                    <div class="chartjs-tooltip-color" style="background-color: ${colors.backgroundColor}"></div>
+                                                    <span>${label}: ${value}ms</span>
+                                                </div>
+                                            `;
+                                        });
+
+                                        // Add footer (commit details).
+                                        if (footerLines.length > 0) {
+                                            innerHtml += '<div class="chartjs-tooltip-footer">';
+                                            footerLines.forEach(footer => {
+                                                innerHtml += `<div>${footer}</div>`;
+                                            });
+                                            innerHtml += '</div>';
+                                        }
+
+                                        innerHtml += '</div>';
+                                        tooltipEl.innerHTML = innerHtml;
+                                    }
+
+                                    // Position tooltip below chart.
+                                    const chart = context.chart;
+                                    const canvas = chart.canvas;
+                                    const canvasRect = canvas.getBoundingClientRect();
+
+                                    // Calculate position.
+                                    tooltipEl.classList.add('active');
+                                    tooltipEl.style.left = canvasRect.left + window.pageXOffset + tooltipModel.caretX + 'px';
+                                    tooltipEl.style.top = canvasRect.bottom + window.pageYOffset + 10 + 'px';
+                                    tooltipEl.style.transform = 'translateX(-50%)';
+                                },
+                                callbacks: {
+                                    footer: function(tooltipItems) {
+                                        if (tooltipItems.length === 0) return [];
+                                        const commit = chartCommits[tooltipItems[0].dataIndex];
+                                        if (!commit) return [];
+                                        return [
+                                            commit.message.split("\n")[0].slice(0, 60),
+                                            `${commit.author.name} - ${new Date(commit.timestamp).toLocaleDateString()}`
+                                        ];
+                                    }
+                                }
+                            },
+                        },
+                        onClick: function(event, elements) {
+                            if (elements.length > 0) {
+                                const index = elements[0].index;
+                                const commit = chartCommits[index];
+                                if (commit?.url) {
+                                    window.open(commit.url, "_blank");
+                                }
+                            }
+                        },
+                    },
+                });
+
+                // Create chart context for timeline controls.
+                const chartContext = {
+                    totalCommits: chartCommits.length,
+                    minWindowSize: 10,
+                    maxWindowSize: chartCommits.length,
+                    defaultWindowSize: 50,
+                    currentWindowSize: 50,
+                    currentPosition: chartCommits.length
+                };
+
+                document.getElementById("chart-section").classList.remove("hidden");
+
+                // Initialize timeline controls.
+                function initializeTimelineControls() {
+                    const scrollbarContainer = document.querySelector(".timeline-scrollbar-container");
+                    const scrollbarContent = document.getElementById("timeline-scrollbar-content");
+                    const controlInfoText = document.getElementById("control-info-text");
+                    const chartCanvas = document.getElementById("chart");
+
+                    // Handle edge case: empty dataset.
+                    if (chartContext.totalCommits === 0) {
+                        scrollbarContainer.style.display = "none";
+                        controlInfoText.textContent = "No data available";
+                        return;
+                    }
+
+                    // Handle edge case: single commit.
+                    if (chartContext.totalCommits === 1) {
+                        scrollbarContainer.style.display = "none";
+                        chartContext.maxWindowSize = 1;
+                    }
+
+                    // Update scrollbar dimensions to match total commits.
+                    // The scrollbar content width represents the total timeline.
+                    const updateScrollbarDimensions = () => {
+                        const containerWidth = scrollbarContainer.clientWidth;
+                        // Ensure content is always wider than container so scrollbar remains visible.
+                        const ratio = chartContext.totalCommits / chartContext.currentWindowSize;
+                        const contentWidth = Math.max(containerWidth * ratio, containerWidth * 1.01);
+                        scrollbarContent.style.width = `${contentWidth}px`;
+                    };
+
+                    // Update chart view based on current state.
+                    function updateChartView(updateScrollbar = true) {
+                        const windowSize = chartContext.currentWindowSize;
+                        const position = chartContext.currentPosition;
+
+                        // Calculate the visible range.
+                        // Position represents the RIGHT edge of the window.
+                        const endIndex = Math.min(position, chartContext.totalCommits);
+                        const startIndex = Math.max(0, endIndex - windowSize);
+
+                        // Update chart x-axis scale.
+                        chartInstance.options.scales.x.min = startIndex;
+                        chartInstance.options.scales.x.max = endIndex - 1;
+                        chartInstance.update('none'); // 'none' for no animation = faster.
+
+                        // Update UI labels.
+                        controlInfoText.textContent =
+                            `Showing commits ${startIndex + 1}-${endIndex} of ${chartContext.totalCommits} (${windowSize} visible)`;
+
+                        // Update scrollbar to match the chart view.
+                        if (updateScrollbar) {
+                            updateScrollbarDimensions();
+                            const scrollPercentage = (endIndex - windowSize) / (chartContext.totalCommits - windowSize);
+                            scrollbarContainer.scrollLeft = scrollPercentage * (scrollbarContent.clientWidth - scrollbarContainer.clientWidth);
+                        }
+                    }
+
+                    // Handle scrollbar changes.
+                    scrollbarContainer.addEventListener("scroll", () => {
+                        const scrollLeft = scrollbarContainer.scrollLeft;
+                        const maxScroll = scrollbarContent.clientWidth - scrollbarContainer.clientWidth;
+                        const scrollPercentage = maxScroll > 0 ? scrollLeft / maxScroll : 0;
+
+                        // Calculate new position based on scroll percentage.
+                        const windowSize = chartContext.currentWindowSize;
+                        const newPosition = Math.round(windowSize + scrollPercentage * (chartContext.totalCommits - windowSize));
+                        chartContext.currentPosition = Math.min(chartContext.totalCommits, Math.max(windowSize, newPosition));
+
+                        updateChartView(false);
+                    });
+
+                    // Handle mouse wheel for zooming.
+                    chartCanvas.addEventListener("wheel", (e) => {
+                        e.preventDefault();
+
+                        const zoomSpeed = 0.1;
+                        const delta = Math.sign(e.deltaY);
+                        const currentWindowSize = chartContext.currentWindowSize;
+
+                        // Calculate new window size.
+                        let newWindowSize = Math.round(currentWindowSize * (1 + delta * zoomSpeed));
+                        newWindowSize = Math.max(chartContext.minWindowSize, Math.min(chartContext.maxWindowSize, newWindowSize));
+
+                        // Adjust position to zoom towards the center of the current view.
+                        const currentStart = chartContext.currentPosition - currentWindowSize;
+                        const currentCenter = currentStart + currentWindowSize / 2;
+                        chartContext.currentWindowSize = newWindowSize;
+                        chartContext.currentPosition = Math.min(
+                            chartContext.totalCommits,
+                            Math.max(newWindowSize, Math.round(currentCenter + newWindowSize / 2))
+                        );
+
+                        updateChartView(true);
+                    });
+
+                    // Initial setup.
+                    updateScrollbarDimensions();
+                    updateChartView(true);
+                }
+
+                initializeTimelineControls();
+
+                setStatus(`Loaded ${entries.length} entries, aligned ${entriesAligned} to ${commits.length} commits`, "success");
+
+            } catch (error) {
+                console.error("Error:", error);
+                setStatus(`Error: ${error.message}`, "error");
+            }
+        }
+
+        main();
+    </script>
+</body>
+</html>

From 059c685f2afc392d53fe685af2234b32fe03d2ff Mon Sep 17 00:00:00 2001
From: Connor Tsui <connor.tsui20@gmail.com>
Date: Wed, 3 Dec 2025 11:11:22 -0500
Subject: [PATCH 10/30] change to string names instead of IDs for simplicity

Signed-off-by: Connor Tsui <connor.tsui20@gmail.com>
---
 Cargo.lock                                   |  1 -
 vortex-wasm/Cargo.toml                       |  1 -
 vortex-wasm/src/bin/migrate_random_access.rs | 54 +++++++++------
 vortex-wasm/src/bin/test_s3_read.rs          | 11 ++-
 vortex-wasm/src/lib.rs                       |  5 +-
 vortex-wasm/src/website/entry.rs             | 71 ++++++++++----------
 vortex-wasm/src/website/mod.rs               |  1 -
 vortex-wasm/src/website/names.rs             | 26 -------
 8 files changed, 76 insertions(+), 94 deletions(-)
 delete mode 100644 vortex-wasm/src/website/names.rs

diff --git a/Cargo.lock b/Cargo.lock
index 8a6d457289a..665d20cc1b1 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -9645,7 +9645,6 @@ dependencies = [
  "async-fs",
  "console_error_panic_hook",
  "hex",
- "phf 0.13.1",
  "reqwest",
  "serde",
  "serde-wasm-bindgen",
diff --git a/vortex-wasm/Cargo.toml b/vortex-wasm/Cargo.toml
index 855fa842854..6ddeeadcc28 100644
--- a/vortex-wasm/Cargo.toml
+++ b/vortex-wasm/Cargo.toml
@@ -32,7 +32,6 @@ native = [
 # Core dependencies for both WASM and native.
 console_error_panic_hook = "0.1"
 hex = { workspace = true }
-phf = { workspace = true }
 reqwest = { workspace = true }
 serde = { workspace = true, features = ["derive"] }
 serde-wasm-bindgen = "0.6"
diff --git a/vortex-wasm/src/bin/migrate_random_access.rs b/vortex-wasm/src/bin/migrate_random_access.rs
index f1385a125ec..6ba435e6f71 100644
--- a/vortex-wasm/src/bin/migrate_random_access.rs
+++ b/vortex-wasm/src/bin/migrate_random_access.rs
@@ -17,14 +17,16 @@ use vortex::array::IntoArray;
 use vortex::array::arrays::FixedSizeListArray;
 use vortex::array::arrays::PrimitiveArray;
 use vortex::array::arrays::StructArray;
+use vortex::array::arrays::VarBinArray;
 use vortex::array::validity::Validity;
 use vortex::buffer::Buffer;
 use vortex::compressor::CompactCompressor;
+use vortex::dtype::DType;
 use vortex::dtype::FieldNames;
+use vortex::dtype::Nullability;
 use vortex::file::WriteOptionsSessionExt;
 use vortex::file::WriteStrategyBuilder;
 use vortex::session::VortexSession;
-use vortex_wasm::website::names;
 
 /// Represents a benchmark entry from the JSON file.
 #[derive(Debug, Deserialize)]
@@ -37,12 +39,12 @@ struct JsonEntry {
     _extra: serde_json::Value,
 }
 
-/// Maps the JSON `name` field to a series name ID.
-fn series_name_id(name: &str) -> u32 {
+/// Maps the JSON `name` field to the series name string.
+fn series_name(name: &str) -> &'static str {
     match name {
-        "random-access/vortex-tokio-local-disk" => names::VORTEX_NVME,
-        "random-access/parquet-tokio-local-disk" => names::PARQUET_NVME,
-        "random-access/lance-tokio-local-disk" => names::LANCE_NVME,
+        "random-access/vortex-tokio-local-disk" => "vortex-nvme",
+        "random-access/parquet-tokio-local-disk" => "parquet-nvme",
+        "random-access/lance-tokio-local-disk" => "lance-nvme",
         _ => panic!("Unknown benchmark name: {}", name),
     }
 }
@@ -74,9 +76,9 @@ async fn async_main() {
 
     // Extract fields into separate vectors.
     let mut commit_id_bytes: Vec<u8> = Vec::with_capacity(num_entries * 20);
-    let mut benchmark_groups: Vec<u32> = Vec::with_capacity(num_entries);
-    let mut chart_names: Vec<u32> = Vec::with_capacity(num_entries);
-    let mut series_names: Vec<u32> = Vec::with_capacity(num_entries);
+    let mut benchmark_groups: Vec<&str> = Vec::with_capacity(num_entries);
+    let mut chart_names: Vec<&str> = Vec::with_capacity(num_entries);
+    let mut series_names: Vec<&str> = Vec::with_capacity(num_entries);
     let mut values: Vec<u64> = Vec::with_capacity(num_entries);
 
     for entry in &entries {
@@ -86,11 +88,11 @@ async fn async_main() {
         commit_id_bytes.extend_from_slice(&bytes);
 
         // All entries have the same benchmark_group and chart_name.
-        benchmark_groups.push(names::RANDOM_ACCESS);
-        chart_names.push(names::RANDOM_ACCESS);
+        benchmark_groups.push("random-access");
+        chart_names.push("random-access");
 
-        // Map name to series_name ID.
-        series_names.push(series_name_id(&entry.name));
+        // Map name to series_name string.
+        series_names.push(series_name(&entry.name));
 
         values.push(entry.value);
     }
@@ -108,15 +110,23 @@ async fn async_main() {
     )
     .expect("Failed to create commit_id array");
 
-    // benchmark_group: u32
-    let benchmark_group_array =
-        PrimitiveArray::new(Buffer::from(benchmark_groups), Validity::NonNullable);
-
-    // chart_name: u32
-    let chart_name_array = PrimitiveArray::new(Buffer::from(chart_names), Validity::NonNullable);
-
-    // series_name: u32
-    let series_name_array = PrimitiveArray::new(Buffer::from(series_names), Validity::NonNullable);
+    // benchmark_group: utf8
+    let benchmark_group_array = VarBinArray::from_iter(
+        benchmark_groups.iter().map(|s| Some(*s)),
+        DType::Utf8(Nullability::NonNullable),
+    );
+
+    // chart_name: utf8
+    let chart_name_array = VarBinArray::from_iter(
+        chart_names.iter().map(|s| Some(*s)),
+        DType::Utf8(Nullability::NonNullable),
+    );
+
+    // series_name: utf8
+    let series_name_array = VarBinArray::from_iter(
+        series_names.iter().map(|s| Some(*s)),
+        DType::Utf8(Nullability::NonNullable),
+    );
 
     // value: u64
     let value_array = PrimitiveArray::new(Buffer::from(values), Validity::NonNullable);
diff --git a/vortex-wasm/src/bin/test_s3_read.rs b/vortex-wasm/src/bin/test_s3_read.rs
index b637cf6e0fd..64a44e3e592 100644
--- a/vortex-wasm/src/bin/test_s3_read.rs
+++ b/vortex-wasm/src/bin/test_s3_read.rs
@@ -7,7 +7,6 @@
 
 use vortex::VortexSessionDefault;
 use vortex::session::VortexSession;
-use vortex_wasm::website::names::NAMES;
 use vortex_wasm::website::read_s3::read_benchmark_entries;
 
 const KEY: &str = "test/random_access.vortex";
@@ -41,13 +40,13 @@ async fn async_main() {
 
     for (i, entry) in entries.iter().enumerate() {
         if i < show_first || i >= entries.len() - show_last {
-            let benchmark_group = NAMES.get(&entry.benchmark_group.0).unwrap_or(&"unknown");
-            let chart_name = NAMES.get(&entry.chart_name.0).unwrap_or(&"unknown");
-            let series_name = NAMES.get(&entry.series_name.0).unwrap_or(&"unknown");
-
             println!(
                 "{} {:>15} {:>15} {:>15} {:>12}",
-                entry.commit_id, benchmark_group, chart_name, series_name, entry.value
+                entry.commit_id,
+                entry.benchmark_group,
+                entry.chart_name,
+                entry.series_name,
+                entry.value
             );
         } else if i == show_first {
             println!(
diff --git a/vortex-wasm/src/lib.rs b/vortex-wasm/src/lib.rs
index efcb7d6ebd1..b486052839e 100644
--- a/vortex-wasm/src/lib.rs
+++ b/vortex-wasm/src/lib.rs
@@ -17,7 +17,6 @@ mod wasm_bindings {
     use vortex::session::VortexSession;
     use wasm_bindgen::prelude::*;
 
-    use crate::website::names::NAMES;
     use crate::website::read_s3::read_benchmark_entries;
 
     const KEY: &str = "test/random_access.vortex";
@@ -33,7 +32,7 @@ mod wasm_bindings {
     #[derive(Serialize)]
     pub struct JsEntry {
         pub commit_id: String,
-        pub series_name: &'static str,
+        pub series_name: String,
         pub value_ms: f64,
     }
 
@@ -66,7 +65,7 @@ mod wasm_bindings {
             .iter()
             .map(|e| JsEntry {
                 commit_id: e.commit_id.to_string(),
-                series_name: NAMES.get(&e.series_name.0).copied().unwrap_or("unknown"),
+                series_name: e.series_name.clone(),
                 value_ms: e.value as f64 / 1_000_000.0,
             })
             .collect();
diff --git a/vortex-wasm/src/website/entry.rs b/vortex-wasm/src/website/entry.rs
index 6f814ec24b3..f48c73a3019 100644
--- a/vortex-wasm/src/website/entry.rs
+++ b/vortex-wasm/src/website/entry.rs
@@ -24,18 +24,18 @@ use vortex_error::vortex_bail;
 #[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
 pub struct BenchmarkEntry {
     pub commit_id: CommitId,
-    pub benchmark_group: NameId,
-    pub chart_name: NameId,
-    pub series_name: NameId,
+    pub benchmark_group: String,
+    pub chart_name: String,
+    pub series_name: String,
     pub value: u64,
 }
 
 impl BenchmarkEntry {
     pub fn new(
         commit_id: CommitId,
-        benchmark_group: NameId,
-        chart_name: NameId,
-        series_name: NameId,
+        benchmark_group: String,
+        chart_name: String,
+        series_name: String,
         value: u64,
     ) -> Self {
         Self {
@@ -51,9 +51,9 @@ impl BenchmarkEntry {
     ///
     /// The schema is:
     /// - `commit_id`: `FixedSizeList<u8, 20>` (20-byte binary SHA-1)
-    /// - `benchmark_group`: `u32`
-    /// - `chart_name`: `u32`
-    /// - `series_name`: `u32`
+    /// - `benchmark_group`: `Utf8`
+    /// - `chart_name`: `Utf8`
+    /// - `series_name`: `Utf8`
     /// - `value`: `u64`
     pub fn dtype() -> DType {
         DType::Struct(
@@ -71,9 +71,9 @@ impl BenchmarkEntry {
                         20,
                         NonNullable,
                     ),
-                    DType::Primitive(PType::U32, NonNullable),
-                    DType::Primitive(PType::U32, NonNullable),
-                    DType::Primitive(PType::U32, NonNullable),
+                    DType::Utf8(NonNullable),
+                    DType::Utf8(NonNullable),
+                    DType::Utf8(NonNullable),
                     DType::Primitive(PType::U64, NonNullable),
                 ],
             ),
@@ -98,9 +98,9 @@ impl BenchmarkEntry {
             BenchmarkEntry::dtype(),
             vec![
                 commit_id_scalar,
-                Scalar::primitive(self.benchmark_group.0, NonNullable),
-                Scalar::primitive(self.chart_name.0, NonNullable),
-                Scalar::primitive(self.series_name.0, NonNullable),
+                Scalar::utf8(self.benchmark_group.as_str(), NonNullable),
+                Scalar::utf8(self.chart_name.as_str(), NonNullable),
+                Scalar::utf8(self.series_name.as_str(), NonNullable),
                 Scalar::primitive(self.value, NonNullable),
             ],
         )
@@ -110,9 +110,9 @@ impl BenchmarkEntry {
     ///
     /// The array must have the following schema:
     /// - `commit_id`: FixedSizeList<u8, 20>
-    /// - `benchmark_group`: u32
-    /// - `chart_name`: u32
-    /// - `series_name`: u32
+    /// - `benchmark_group`: Utf8
+    /// - `chart_name`: Utf8
+    /// - `series_name`: Utf8
     /// - `value`: u64
     pub fn vec_from_array(array: &dyn Array) -> VortexResult<Vec<Self>> {
         // Convert to canonical struct array.
@@ -141,16 +141,12 @@ impl BenchmarkEntry {
         let commit_id_elements: PrimitiveArray = commit_id_fsl.elements().to_primitive();
         let commit_id_bytes: &[u8] = commit_id_elements.as_slice();
 
-        // Convert primitive fields.
-        let benchmark_group_prim: PrimitiveArray = benchmark_group_field.to_primitive();
-        let benchmark_groups: &[u32] = benchmark_group_prim.as_slice();
-
-        let chart_name_prim: PrimitiveArray = chart_name_field.to_primitive();
-        let chart_names: &[u32] = chart_name_prim.as_slice();
-
-        let series_name_prim: PrimitiveArray = series_name_field.to_primitive();
-        let series_names: &[u32] = series_name_prim.as_slice();
+        // Convert string fields to canonical varbinview arrays.
+        let benchmark_group_vbv = benchmark_group_field.to_varbinview();
+        let chart_name_vbv = chart_name_field.to_varbinview();
+        let series_name_vbv = series_name_field.to_varbinview();
 
+        // Convert value field to primitive array.
         let value_prim: PrimitiveArray = value_field.to_primitive();
         let values: &[u64] = value_prim.as_slice();
 
@@ -162,11 +158,22 @@ impl BenchmarkEntry {
             let mut commit_id_arr = [0u8; 20];
             commit_id_arr.copy_from_slice(&commit_id_bytes[start..end]);
 
+            // Read strings using bytes_at() and convert to String.
+            let benchmark_group = std::str::from_utf8(benchmark_group_vbv.bytes_at(i).as_ref())
+                .map_err(|e| vortex_error::vortex_err!("Invalid UTF-8 in benchmark_group: {}", e))?
+                .to_string();
+            let chart_name = std::str::from_utf8(chart_name_vbv.bytes_at(i).as_ref())
+                .map_err(|e| vortex_error::vortex_err!("Invalid UTF-8 in chart_name: {}", e))?
+                .to_string();
+            let series_name = std::str::from_utf8(series_name_vbv.bytes_at(i).as_ref())
+                .map_err(|e| vortex_error::vortex_err!("Invalid UTF-8 in series_name: {}", e))?
+                .to_string();
+
             entries.push(BenchmarkEntry {
                 commit_id: CommitId(commit_id_arr),
-                benchmark_group: NameId(benchmark_groups[i]),
-                chart_name: NameId(chart_names[i]),
-                series_name: NameId(series_names[i]),
+                benchmark_group,
+                chart_name,
+                series_name,
                 value: values[i],
             });
         }
@@ -175,10 +182,6 @@ impl BenchmarkEntry {
     }
 }
 
-/// String ID lookup so that we don't have to store the string every time.
-#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
-pub struct NameId(pub u32);
-
 /// The 20-byte binary SHA-1 Git commit ID.
 #[derive(Clone, PartialEq, Eq)]
 pub struct CommitId(pub [u8; 20]);
diff --git a/vortex-wasm/src/website/mod.rs b/vortex-wasm/src/website/mod.rs
index 49df715cfbc..7f55c85544b 100644
--- a/vortex-wasm/src/website/mod.rs
+++ b/vortex-wasm/src/website/mod.rs
@@ -2,7 +2,6 @@
 // SPDX-FileCopyrightText: Copyright the Vortex contributors
 
 pub mod entry;
-pub mod names;
 pub mod read_s3;
 
 // update_s3 uses tokio and std::process::Command which are not available in WASM.
diff --git a/vortex-wasm/src/website/names.rs b/vortex-wasm/src/website/names.rs
deleted file mode 100644
index 9226f344985..00000000000
--- a/vortex-wasm/src/website/names.rs
+++ /dev/null
@@ -1,26 +0,0 @@
-// SPDX-License-Identifier: Apache-2.0
-// SPDX-FileCopyrightText: Copyright the Vortex contributors
-
-//! Name ID to string mapping for benchmark data.
-
-use phf::Map;
-use phf::phf_map;
-
-// Name ID constants.
-pub const NULL: u32 = 0;
-pub const INVALID: u32 = 1;
-pub const RANDOM_ACCESS: u32 = 2;
-pub const VORTEX_NVME: u32 = 3;
-pub const PARQUET_NVME: u32 = 4;
-pub const LANCE_NVME: u32 = 5;
-
-// TODO(connor): This should probably be generated smarter.
-/// Maps name IDs to their string representations.
-pub static NAMES: Map<u32, &'static str> = phf_map! {
-    0u32 => "null",
-    1u32 => "invalid",
-    2u32 => "random-access",
-    3u32 => "vortex-nvme",
-    4u32 => "parquet-nvme",
-    5u32 => "lance-nvme",
-};

From d6d9c8e127ebc03a45ab224ea99224f2e7c92cb3 Mon Sep 17 00:00:00 2001
From: Connor Tsui <connor.tsui20@gmail.com>
Date: Wed, 3 Dec 2025 10:50:20 -0500
Subject: [PATCH 11/30] clean up demo

Signed-off-by: Connor Tsui <connor.tsui20@gmail.com>
---
 vortex-wasm/wasm-test.css  | 542 +++++++++++++++++++++++++
 vortex-wasm/wasm-test.html | 789 +++----------------------------------
 vortex-wasm/wasm-test.js   | 746 +++++++++++++++++++++++++++++++++++
 3 files changed, 1339 insertions(+), 738 deletions(-)
 create mode 100644 vortex-wasm/wasm-test.css
 create mode 100644 vortex-wasm/wasm-test.js

diff --git a/vortex-wasm/wasm-test.css b/vortex-wasm/wasm-test.css
new file mode 100644
index 00000000000..fa4de05f18a
--- /dev/null
+++ b/vortex-wasm/wasm-test.css
@@ -0,0 +1,542 @@
+/* CSS Variables for consistent theming */
+:root {
+    /* Vortex Brand Colors */
+    --vortex-black: #101010;
+    --vortex-gray: #ECECEC;
+    --vortex-green: #CEE562;
+    --vortex-blue: #5971FD;
+    --vortex-pink: #EEB3E1;
+
+    /* Series Colors */
+    --series-vortex: #101010;
+    --series-parquet: #5DADE2;
+    --series-lance: #ef7f1d;
+
+    /* Theme Colors */
+    --primary-color: var(--vortex-blue);
+    --primary-hover: #4A5FE5;
+    --bg-color: #ffffff;
+    --bg-secondary: #FAFAFA;
+    --text-color: var(--vortex-black);
+    --text-secondary: #666666;
+    --border-color: var(--vortex-gray);
+
+    /* Shadows */
+    --shadow-sm: 0 1px 3px rgba(16, 16, 16, 0.08);
+    --shadow-md: 0 4px 8px rgba(16, 16, 16, 0.08);
+    --shadow-lg: 0 12px 24px rgba(16, 16, 16, 0.12);
+
+    /* Border Radius */
+    --radius-sm: 4px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+}
+
+/* Reset and base styles */
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Display", Roboto, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-size: 16px;
+    scroll-behavior: smooth;
+}
+
+body {
+    color: var(--text-color);
+    background: var(--bg-secondary);
+    min-height: 100vh;
+    padding: 2rem;
+    padding-bottom: 12rem;
+    line-height: 1.6;
+    letter-spacing: -0.01em;
+}
+
+/* Container */
+.container {
+    max-width: 1400px;
+    margin: 0 auto;
+}
+
+/* Page Header */
+.page-header {
+    margin-bottom: 2rem;
+}
+
+.page-header h1 {
+    font-family: "Funnel Display", -apple-system, BlinkMacSystemFont, sans-serif;
+    font-size: 2rem;
+    font-weight: 600;
+    color: var(--text-color);
+    margin-bottom: 0.5rem;
+    letter-spacing: -0.02em;
+}
+
+.subtitle {
+    color: var(--text-secondary);
+    font-size: 1rem;
+}
+
+/* Status */
+.status {
+    background: var(--bg-color);
+    border-radius: var(--radius-md);
+    padding: 1rem 1.25rem;
+    margin-bottom: 1.5rem;
+    box-shadow: var(--shadow-sm);
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    border: 1px solid var(--border-color);
+}
+
+.status.loading {
+    border-left: 4px solid var(--vortex-blue);
+}
+
+.status.success {
+    border-left: 4px solid var(--series-vortex);
+}
+
+.status.error {
+    border-left: 4px solid #e74c3c;
+}
+
+.spinner {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border: 2px solid var(--border-color);
+    border-top-color: var(--vortex-blue);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+/* Benchmarks Container - full width sections */
+.benchmarks-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+/* Benchmark Set */
+.benchmark-set {
+    background: var(--bg-color);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border-color);
+    overflow: visible;
+    transition: all 0.3s ease;
+    box-shadow: var(--shadow-sm);
+}
+
+.benchmark-set:hover {
+    box-shadow: var(--shadow-md);
+}
+
+/* Benchmark Header (clickable) */
+.benchmark-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 24px;
+    background: var(--bg-secondary);
+    border-bottom: 1px solid var(--border-color);
+    cursor: pointer;
+    user-select: none;
+    transition: background-color 0.2s;
+}
+
+.benchmark-header:hover {
+    background: #F0F0F0;
+}
+
+.title-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.collapse-icon {
+    font-size: 0.875rem;
+    transition: transform 0.3s ease;
+    color: var(--text-secondary);
+}
+
+.benchmark-set.collapsed .collapse-icon {
+    transform: rotate(-90deg);
+}
+
+.benchmark-title {
+    font-family: "Funnel Display", -apple-system, BlinkMacSystemFont, sans-serif;
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--text-color);
+    margin: 0;
+    letter-spacing: -0.02em;
+}
+
+.benchmark-meta {
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+}
+
+/* Summary Section (always visible) */
+.summary-section {
+    padding: 16px 24px;
+    background: var(--bg-secondary);
+    border-bottom: 1px solid var(--border-color);
+}
+
+/* Scores List - 2 column layout */
+.scores-list {
+    column-count: 2;
+    column-gap: 20px;
+}
+
+/* Single column for smaller screens */
+@media (max-width: 780px) {
+    .scores-list {
+        column-count: 1;
+    }
+}
+
+/* Score Item - card style */
+.score-item {
+    display: flex;
+    align-items: center;
+    background: var(--bg-color);
+    padding: 10px 12px;
+    margin-bottom: 8px;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border-color);
+    transition: all 0.2s ease;
+    font-size: 13px;
+    break-inside: avoid;
+}
+
+.score-item:hover {
+    border-color: var(--primary-color);
+    background: var(--bg-secondary);
+}
+
+.score-rank {
+    font-weight: 600;
+    color: var(--primary-color);
+    min-width: 30px;
+    font-size: 14px;
+}
+
+.score-series {
+    flex: 1;
+    font-weight: 500;
+    color: var(--text-color);
+    margin: 0 8px;
+    font-size: 14px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.score-metrics {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+}
+
+.score-runtime {
+    font-family: "SF Mono", "Monaco", "Inconsolata", monospace;
+    font-weight: 600;
+    color: var(--primary-color);
+    background: rgba(89, 113, 253, 0.1);
+    padding: 3px 10px;
+    border-radius: var(--radius-sm);
+    font-size: 13px;
+}
+
+.score-ratio {
+    font-family: "SF Mono", "Monaco", "Inconsolata", monospace;
+    font-weight: 600;
+    color: var(--text-secondary);
+    background: var(--bg-secondary);
+    padding: 3px 10px;
+    border-radius: var(--radius-sm);
+    font-size: 13px;
+}
+
+.scores-explanation {
+    margin-top: 12px;
+    font-size: 11px;
+    color: var(--text-secondary);
+    font-style: italic;
+    text-align: center;
+}
+
+/* Benchmark Graphs (collapsible) */
+.benchmark-graphs {
+    padding: 24px;
+    background: var(--bg-color);
+}
+
+.benchmark-set.collapsed .benchmark-graphs {
+    display: none;
+}
+
+/* Chart Container */
+.chart-container {
+    background: var(--bg-color);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    padding: 20px;
+    transition: all 0.3s ease;
+}
+
+.chart-container:hover {
+    box-shadow: var(--shadow-md);
+    border-color: var(--primary-color);
+}
+
+.chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.chart-title {
+    font-family: "Funnel Display", -apple-system, BlinkMacSystemFont, sans-serif;
+    font-size: 1rem;
+    font-weight: 500;
+    color: var(--text-color);
+    margin: 0;
+    letter-spacing: -0.01em;
+}
+
+.chart-controls {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.control-info-compact {
+    color: var(--text-secondary);
+    font-size: 0.75rem;
+}
+
+.zoom-controls {
+    display: flex;
+    gap: 4px;
+}
+
+.zoom-btn {
+    width: 28px;
+    height: 28px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-sm);
+    background: var(--bg-color);
+    color: var(--text-color);
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+}
+
+.zoom-btn:hover {
+    background: var(--bg-secondary);
+    border-color: var(--primary-color);
+}
+
+.chart-wrapper {
+    position: relative;
+    height: 400px;
+}
+
+.x-axis-label {
+    text-align: center;
+    color: var(--text-secondary);
+    font-size: 0.625rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+}
+
+/* Custom Tooltip */
+.chartjs-tooltip {
+    position: absolute;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    background: rgba(16, 16, 16, 0.9);
+    color: white;
+    border-radius: var(--radius-md);
+    padding: 12px;
+    font-size: 12px;
+    z-index: 1000;
+    box-shadow: var(--shadow-lg);
+}
+
+.chartjs-tooltip.active {
+    opacity: 1;
+}
+
+.chartjs-tooltip::before {
+    content: '';
+    position: absolute;
+    top: -8px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-bottom: 8px solid rgba(16, 16, 16, 0.9);
+}
+
+.chartjs-tooltip-body {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.chartjs-tooltip-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.chartjs-tooltip-color {
+    width: 12px;
+    height: 12px;
+    border-radius: 2px;
+}
+
+.chartjs-tooltip-footer {
+    margin-top: 10px;
+    padding-top: 10px;
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
+    font-size: 11px;
+    opacity: 0.9;
+}
+
+/* Timeline Scrollbar */
+.timeline-scrollbar-container {
+    overflow-x: auto;
+    overflow-y: hidden;
+    height: 16px;
+    background: transparent;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    margin-top: 0.5rem;
+}
+
+.timeline-scrollbar-container::-webkit-scrollbar {
+    height: 16px;
+}
+
+.timeline-scrollbar-container::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.05);
+    border-radius: var(--radius-md);
+}
+
+.timeline-scrollbar-container::-webkit-scrollbar-thumb {
+    background: rgba(89, 113, 253, 0.3);
+    border-radius: var(--radius-md);
+    border: 3px solid transparent;
+    background-clip: padding-box;
+}
+
+.timeline-scrollbar-container::-webkit-scrollbar-thumb:hover {
+    background: rgba(89, 113, 253, 0.5);
+    background-clip: padding-box;
+}
+
+#timeline-scrollbar-content {
+    height: 1px;
+    pointer-events: none;
+}
+
+/* Utility Classes */
+.hidden {
+    display: none !important;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    body {
+        padding: 1rem;
+    }
+
+    .page-header h1 {
+        font-size: 1.5rem;
+    }
+
+    .benchmark-header {
+        padding: 12px 16px;
+    }
+
+    .benchmark-title {
+        font-size: 1.125rem;
+    }
+
+    .summary-section {
+        padding: 12px 16px;
+    }
+
+    .score-item {
+        padding: 8px 10px;
+        margin-bottom: 6px;
+        font-size: 12px;
+    }
+
+    .score-rank {
+        font-size: 13px;
+        min-width: 28px;
+    }
+
+    .score-series {
+        font-size: 13px;
+        margin: 0 6px;
+    }
+
+    .score-runtime,
+    .score-ratio {
+        font-size: 12px;
+        padding: 2px 8px;
+    }
+
+    .scores-explanation {
+        font-size: 10px;
+        margin-top: 8px;
+    }
+
+    .benchmark-graphs {
+        padding: 16px;
+    }
+
+    .chart-wrapper {
+        height: 300px;
+    }
+}
+
+@media (min-width: 1600px) {
+    .container {
+        max-width: 1600px;
+    }
+
+    body {
+        padding: 3rem 4rem;
+    }
+}
diff --git a/vortex-wasm/wasm-test.html b/vortex-wasm/wasm-test.html
index a36f0b107be..e2da7e6df32 100644
--- a/vortex-wasm/wasm-test.html
+++ b/vortex-wasm/wasm-test.html
@@ -3,757 +3,70 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vortex WASM Random Access Benchmark</title>
+    <title>Vortex WASM Benchmarks</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Funnel+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="wasm-test.css">
     <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
-    <style>
-        :root {
-            --vortex-blue: #5971FD;
-            --vortex-green: #19a508;
-            --parquet-orange: #ef7f1d;
-            --lance-teal: #2D936C;
-        }
-
-        * {
-            box-sizing: border-box;
-            margin: 0;
-            padding: 0;
-        }
-
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-            background: #f5f5f5;
-            min-height: 100vh;
-            padding: 2rem;
-            padding-bottom: 8rem;
-        }
-
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-        }
-
-        h1 {
-            color: #333;
-            margin-bottom: 0.5rem;
-        }
-
-        .subtitle {
-            color: #666;
-            margin-bottom: 2rem;
-        }
-
-        .status {
-            background: white;
-            border-radius: 8px;
-            padding: 1rem;
-            margin-bottom: 1rem;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-        }
-
-        .status.loading {
-            border-left: 4px solid var(--vortex-blue);
-        }
-
-        .status.success {
-            border-left: 4px solid var(--vortex-green);
-        }
-
-        .status.error {
-            border-left: 4px solid #e74c3c;
-        }
-
-        .chart-container {
-            background: white;
-            border-radius: 0 0 8px 8px;
-            padding: 1.5rem;
-            padding-top: 1rem;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-            margin-bottom: 1rem;
-            margin-top: 0;
-            border-top: 1px solid #e0e0e0;
-        }
-
-        .chart-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 1rem;
-        }
-
-        .chart-title {
-            font-size: 1.25rem;
-            color: #333;
-            margin: 0;
-        }
-
-        .control-info-compact {
-            color: #666;
-            font-size: 0.85rem;
-        }
-
-        .chart-wrapper {
-            position: relative;
-            height: 400px;
-        }
-
-        .summary {
-            background: white;
-            border-radius: 8px 8px 0 0;
-            padding: 1.5rem;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-            margin-bottom: 0;
-        }
-
-        .summary h3 {
-            margin-bottom: 1rem;
-            color: #333;
-        }
-
-        .series-item {
-            display: flex;
-            align-items: center;
-            padding: 0.5rem 0;
-            border-bottom: 1px solid #eee;
-        }
-
-        .series-item:last-child {
-            border-bottom: none;
-        }
-
-        .series-rank {
-            width: 2rem;
-            font-weight: bold;
-            color: #666;
-        }
-
-        .series-name {
-            flex: 1;
-            font-weight: 500;
-        }
-
-        .series-value {
-            text-align: right;
-            font-family: monospace;
-        }
-
-        .series-ratio {
-            width: 4rem;
-            text-align: right;
-            color: #666;
-            font-size: 0.9rem;
-        }
-
-        .spinner {
-            display: inline-block;
-            width: 16px;
-            height: 16px;
-            border: 2px solid #ddd;
-            border-top-color: var(--vortex-blue);
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-            margin-right: 0.5rem;
-        }
-
-        @keyframes spin {
-            to { transform: rotate(360deg); }
-        }
-
-        .hidden {
-            display: none;
-        }
-
-        .x-axis-label {
-            text-align: center;
-            color: #999;
-            font-size: 0.65rem;
-            margin-top: 0.25rem;
-            margin-bottom: 0.25rem;
-        }
-
-        .chartjs-tooltip {
-            position: absolute;
-            pointer-events: none;
-            opacity: 0;
-            transition: opacity 0.2s ease;
-            background: rgba(0, 0, 0, 0.8);
-            color: white;
-            border-radius: 4px;
-            padding: 10px;
-            font-size: 12px;
-            z-index: 1000;
-        }
-
-        .chartjs-tooltip.active {
-            opacity: 1;
-        }
-
-        .chartjs-tooltip::before {
-            content: '';
-            position: absolute;
-            top: -8px;
-            left: 50%;
-            transform: translateX(-50%);
-            border-left: 8px solid transparent;
-            border-right: 8px solid transparent;
-            border-bottom: 8px solid rgba(0, 0, 0, 0.8);
-        }
-
-        .chartjs-tooltip-body {
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
-        }
-
-        .chartjs-tooltip-item {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .chartjs-tooltip-color {
-            width: 12px;
-            height: 12px;
-            border-radius: 2px;
-        }
-
-        .chartjs-tooltip-footer {
-            margin-top: 8px;
-            padding-top: 8px;
-            border-top: 1px solid rgba(255, 255, 255, 0.2);
-            font-size: 11px;
-            opacity: 0.9;
-        }
-
-        .timeline-scrollbar-container {
-            overflow-x: auto;
-            overflow-y: hidden;
-            height: 16px;
-            background: transparent;
-            border-radius: 8px;
-            cursor: pointer;
-            margin-top: 0.25rem;
-        }
-
-        .timeline-scrollbar-container::-webkit-scrollbar {
-            height: 16px;
-        }
-
-        .timeline-scrollbar-container::-webkit-scrollbar-track {
-            background: rgba(0, 0, 0, 0.05);
-            border-radius: 8px;
-        }
-
-        .timeline-scrollbar-container::-webkit-scrollbar-thumb {
-            background: rgba(89, 113, 253, 0.3);
-            border-radius: 8px;
-            border: 3px solid transparent;
-            background-clip: padding-box;
-        }
-
-        .timeline-scrollbar-container::-webkit-scrollbar-thumb:hover {
-            background: rgba(89, 113, 253, 0.5);
-            background-clip: padding-box;
-        }
-
-        #timeline-scrollbar-content {
-            height: 1px;
-            pointer-events: none;
-        }
-    </style>
 </head>
 <body>
     <div class="container">
-        <h1>Vortex WASM Random Access Benchmark</h1>
-        <p class="subtitle">Loading benchmark data directly from a Vortex file using WebAssembly</p>
+        <header class="page-header">
+            <h1>Vortex WASM Benchmarks</h1>
+            <p class="subtitle">Loading benchmark data directly from Vortex files using WebAssembly</p>
+        </header>
 
         <div id="status" class="status loading">
             <span class="spinner"></span>
             <span id="status-text">Initializing WASM module...</span>
         </div>
 
-        <div id="summary" class="summary hidden">
-            <h3>Random Access Performance (Latest)</h3>
-            <div id="summary-list"></div>
-            <p style="margin-top: 1rem; color: #666; font-size: 0.9rem;">
-                Random access time | Ratio to fastest (lower is better)
-            </p>
-        </div>
-
-        <div id="chart-section" class="chart-container hidden">
-            <div class="chart-header">
-                <h2 class="chart-title">Random Access Time (ms)</h2>
-                <span id="control-info-text" class="control-info-compact">Showing commits 1-50 of 100</span>
-            </div>
-            <div class="chart-wrapper">
-                <canvas id="chart"></canvas>
-            </div>
-            <div id="chartjs-tooltip" class="chartjs-tooltip"></div>
-            <div class="x-axis-label">Commit</div>
-            <div class="timeline-scrollbar-container">
-                <div id="timeline-scrollbar-content"></div>
+        <div class="benchmarks-grid">
+            <div id="random-access-benchmark" class="benchmark-set hidden">
+                <div class="benchmark-header">
+                    <div class="title-wrapper">
+                        <span class="collapse-icon">▼</span>
+                        <h2 class="benchmark-title">Random Access</h2>
+                    </div>
+                    <div class="benchmark-meta">
+                        <span id="benchmark-meta-text">Latest Results</span>
+                    </div>
+                </div>
+                <div class="summary-section">
+                    <div id="summary-list" class="scores-list"></div>
+                    <p class="scores-explanation">
+                        Random access time | Ratio to fastest (lower is better)
+                    </p>
+                </div>
+                <div class="benchmark-graphs">
+                    <div class="chart-container">
+                        <div class="chart-header">
+                            <h3 class="chart-title">Random Access Time (ms)</h3>
+                            <div class="chart-controls">
+                                <span id="control-info-text" class="control-info-compact">Showing commits 1-50 of 100</span>
+                                <div class="zoom-controls">
+                                    <button id="zoom-out-large" class="zoom-btn">−−</button>
+                                    <button id="zoom-out-small" class="zoom-btn">−</button>
+                                    <button id="zoom-in-small" class="zoom-btn">+</button>
+                                    <button id="zoom-in-large" class="zoom-btn">++</button>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="chart-wrapper">
+                            <canvas id="chart"></canvas>
+                        </div>
+                        <div id="chartjs-tooltip" class="chartjs-tooltip"></div>
+                        <div class="x-axis-label">Commit</div>
+                        <div class="timeline-scrollbar-container">
+                            <div id="timeline-scrollbar-content"></div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
 
-    <script type="module">
-        // Series colors matching the main website.
-        const SERIES_COLORS = {
-            "vortex-nvme": "#19a508",
-            "parquet-nvme": "#ef7f1d",
-            "lance-nvme": "#2D936C",
-        };
-
-        // Update status display.
-        function setStatus(message, type = "loading") {
-            const status = document.getElementById("status");
-            const text = document.getElementById("status-text");
-            status.className = `status ${type}`;
-            text.textContent = message;
-
-            // Hide spinner for success/error.
-            const spinner = status.querySelector(".spinner");
-            if (spinner) {
-                spinner.style.display = type === "loading" ? "inline-block" : "none";
-            }
-        }
-
-        // Format time in human-readable format.
-        function formatTime(ms) {
-            if (ms < 1) return `${(ms * 1000).toFixed(0)}μs`;
-            if (ms < 1000) return `${ms.toFixed(1)}ms`;
-            return `${(ms / 1000).toFixed(2)}s`;
-        }
-
-        async function main() {
-            try {
-                // Step 1: Load WASM module.
-                setStatus("Loading WASM module...");
-                const wasm = await import("./pkg/vortex_wasm.js");
-                await wasm.default();
-                console.log("WASM loaded:", wasm.get_version());
-
-                // Step 2: Load commits from S3 (for aligning data).
-                setStatus("Loading commit metadata from S3...");
-                const commitsResponse = await fetch(
-                    "https://vortex-benchmark-results-database.s3.amazonaws.com/commits.json"
-                );
-                const commitsText = await commitsResponse.text();
-
-                // Parse JSONL format (one JSON object per line).
-                const commitsData = {};
-                for (const line of commitsText.split("\n")) {
-                    const trimmed = line.trim();
-                    if (trimmed.length > 0) {
-                        try {
-                            const commit = JSON.parse(trimmed);
-                            commitsData[commit.id] = commit;
-                        } catch (e) {
-                            console.warn("Failed to parse commit line:", e);
-                        }
-                    }
-                }
-
-                // Parse commits and sort by timestamp.
-                const commits = Object.values(commitsData)
-                    .sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
-                commits.forEach((commit, index) => {
-                    commit.sortedIndex = index;
-                });
-
-                // Create a map from commit_id -> sortedIndex.
-                const commitIndexMap = new Map();
-                commits.forEach(commit => {
-                    commitIndexMap.set(commit.id, commit.sortedIndex);
-                });
-
-                console.log(`Loaded ${commits.length} commits`);
-
-                // Step 3: Load random access data from WASM.
-                setStatus("Loading random access data from Vortex file via WASM...");
-                const entries = await wasm.load_random_access_data();
-                console.log(`Loaded ${entries.length} benchmark entries`);
-
-                // Step 4: Build the data structure for the chart.
-                // Group entries by series_name and align to commit indices.
-                const seriesData = new Map();
-                const seriesNames = ["vortex-nvme", "parquet-nvme", "lance-nvme"];
-
-                // Initialize empty arrays for each series.
-                for (const name of seriesNames) {
-                    seriesData.set(name, new Array(commits.length).fill(null));
-                }
-
-                // Populate with data.
-                let entriesAligned = 0;
-                for (const entry of entries) {
-                    const commitIndex = commitIndexMap.get(entry.commit_id);
-                    if (commitIndex !== undefined) {
-                        const series = seriesData.get(entry.series_name);
-                        if (series) {
-                            series[commitIndex] = { value: entry.value_ms };
-                            entriesAligned++;
-                        }
-                    }
-                }
-
-                console.log(`Aligned ${entriesAligned}/${entries.length} entries to commits`);
-
-                // Step 5: Calculate summary metrics (latest data point for each series).
-                const latestResults = new Map();
-                for (const [seriesName, data] of seriesData.entries()) {
-                    // Find the most recent non-null value.
-                    for (let i = data.length - 1; i >= 0; i--) {
-                        if (data[i] !== null) {
-                            latestResults.set(seriesName, data[i].value);
-                            break;
-                        }
-                    }
-                }
-
-                // Find fastest time.
-                let fastestTime = Infinity;
-                for (const time of latestResults.values()) {
-                    fastestTime = Math.min(fastestTime, time);
-                }
-
-                // Sort by time and display summary.
-                const sortedResults = Array.from(latestResults.entries())
-                    .sort((a, b) => a[1] - b[1]);
-
-                const summaryList = document.getElementById("summary-list");
-                summaryList.innerHTML = "";
-                sortedResults.forEach(([name, time], index) => {
-                    const ratio = time / fastestTime;
-                    const item = document.createElement("div");
-                    item.className = "series-item";
-                    item.innerHTML = `
-                        <span class="series-rank">#${index + 1}</span>
-                        <span class="series-name" style="color: ${SERIES_COLORS[name]}">${name}</span>
-                        <span class="series-value">${formatTime(time)}</span>
-                        <span class="series-ratio">${ratio.toFixed(2)}x</span>
-                    `;
-                    summaryList.appendChild(item);
-                });
-                document.getElementById("summary").classList.remove("hidden");
-
-                // Step 6: Create the chart.
-                // Find the range of data (first and last non-null indices).
-                let firstDataIndex = commits.length;
-                let lastDataIndex = 0;
-                for (const data of seriesData.values()) {
-                    for (let i = 0; i < data.length; i++) {
-                        if (data[i] !== null) {
-                            firstDataIndex = Math.min(firstDataIndex, i);
-                            lastDataIndex = Math.max(lastDataIndex, i);
-                        }
-                    }
-                }
-
-                // Slice to show only the range with data.
-                const startIndex = Math.max(0, firstDataIndex);
-                const endIndex = lastDataIndex + 1;
-                const chartCommits = commits.slice(startIndex, endIndex);
-
-                const datasets = seriesNames.map(name => {
-                    const data = seriesData.get(name);
-                    const slicedData = data.slice(startIndex, endIndex).map(d => d?.value ?? null);
-                    return {
-                        label: name,
-                        data: slicedData,
-                        borderColor: SERIES_COLORS[name],
-                        backgroundColor: SERIES_COLORS[name] + "60",
-                        borderWidth: 2,
-                        pointRadius: 1,
-                        spanGaps: true,
-                    };
-                });
-
-                const ctx = document.getElementById("chart").getContext("2d");
-
-                // Custom plugin to draw vertical line on hover.
-                const verticalLinePlugin = {
-                    id: 'verticalLine',
-                    afterDatasetsDraw(chart, args, options) {
-                        if (chart.tooltip?._active?.length) {
-                            const activePoint = chart.tooltip._active[0];
-                            const ctx = chart.ctx;
-                            const x = activePoint.element.x;
-                            const topY = chart.scales.y.top;
-                            const bottomY = chart.scales.y.bottom;
-
-                            ctx.save();
-                            ctx.beginPath();
-                            ctx.moveTo(x, topY);
-                            ctx.lineTo(x, bottomY);
-                            ctx.lineWidth = 2;
-                            ctx.strokeStyle = 'rgba(89, 113, 253, 0.5)';
-                            ctx.stroke();
-                            ctx.restore();
-                        }
-                    }
-                };
-
-                // Register the vertical line plugin.
-                Chart.register(verticalLinePlugin);
-
-                let chartInstance = null;
-                chartInstance = new Chart(ctx, {
-                    type: "line",
-                    data: {
-                        labels: chartCommits.map(c => c.id.slice(0, 7)),
-                        datasets: datasets,
-                    },
-                    options: {
-                        responsive: true,
-                        maintainAspectRatio: false,
-                        layout: {
-                            padding: {
-                                left: 0,
-                                right: 0,
-                                top: 0,
-                                bottom: 0
-                            }
-                        },
-                        interaction: {
-                            intersect: false,
-                            mode: "index",
-                        },
-                        scales: {
-                            x: {
-                                title: {
-                                    display: false,
-                                },
-                                ticks: {
-                                    maxRotation: 45,
-                                    minRotation: 45,
-                                    autoSkipPadding: 10,
-                                },
-                                // Show last 50 commits by default.
-                                min: Math.max(0, chartCommits.length - 50),
-                            },
-                            y: {
-                                title: {
-                                    display: true,
-                                    text: "Time (ms)",
-                                },
-                                beginAtZero: true,
-                            },
-                        },
-                        plugins: {
-                            verticalLine: {},
-                            legend: {
-                                position: "top",
-                            },
-                            tooltip: {
-                                enabled: false,
-                                external: function(context) {
-                                    const tooltipEl = document.getElementById('chartjs-tooltip');
-                                    const tooltipModel = context.tooltip;
-
-                                    // Hide if no tooltip.
-                                    if (tooltipModel.opacity === 0) {
-                                        tooltipEl.classList.remove('active');
-                                        return;
-                                    }
-
-                                    // Set tooltip content.
-                                    if (tooltipModel.body) {
-                                        const titleLines = tooltipModel.title || [];
-                                        const footerLines = tooltipModel.footer || [];
-
-                                        let innerHtml = '<div class="chartjs-tooltip-body">';
-
-                                        // Add title (commit ID).
-                                        titleLines.forEach(title => {
-                                            innerHtml += `<div style="font-weight: bold; margin-bottom: 4px;">${title}</div>`;
-                                        });
-
-                                        // Add body (series values) - sorted high to low.
-                                        const sortedItems = tooltipModel.dataPoints.sort((a, b) => b.parsed.y - a.parsed.y);
-                                        sortedItems.forEach((item, i) => {
-                                            const colors = tooltipModel.labelColors[i];
-                                            const value = item.formattedValue;
-                                            const label = item.dataset.label;
-                                            innerHtml += `
-                                                <div class="chartjs-tooltip-item">
-                                                    <div class="chartjs-tooltip-color" style="background-color: ${colors.backgroundColor}"></div>
-                                                    <span>${label}: ${value}ms</span>
-                                                </div>
-                                            `;
-                                        });
-
-                                        // Add footer (commit details).
-                                        if (footerLines.length > 0) {
-                                            innerHtml += '<div class="chartjs-tooltip-footer">';
-                                            footerLines.forEach(footer => {
-                                                innerHtml += `<div>${footer}</div>`;
-                                            });
-                                            innerHtml += '</div>';
-                                        }
-
-                                        innerHtml += '</div>';
-                                        tooltipEl.innerHTML = innerHtml;
-                                    }
-
-                                    // Position tooltip below chart.
-                                    const chart = context.chart;
-                                    const canvas = chart.canvas;
-                                    const canvasRect = canvas.getBoundingClientRect();
-
-                                    // Calculate position.
-                                    tooltipEl.classList.add('active');
-                                    tooltipEl.style.left = canvasRect.left + window.pageXOffset + tooltipModel.caretX + 'px';
-                                    tooltipEl.style.top = canvasRect.bottom + window.pageYOffset + 10 + 'px';
-                                    tooltipEl.style.transform = 'translateX(-50%)';
-                                },
-                                callbacks: {
-                                    footer: function(tooltipItems) {
-                                        if (tooltipItems.length === 0) return [];
-                                        const commit = chartCommits[tooltipItems[0].dataIndex];
-                                        if (!commit) return [];
-                                        return [
-                                            commit.message.split("\n")[0].slice(0, 60),
-                                            `${commit.author.name} - ${new Date(commit.timestamp).toLocaleDateString()}`
-                                        ];
-                                    }
-                                }
-                            },
-                        },
-                        onClick: function(event, elements) {
-                            if (elements.length > 0) {
-                                const index = elements[0].index;
-                                const commit = chartCommits[index];
-                                if (commit?.url) {
-                                    window.open(commit.url, "_blank");
-                                }
-                            }
-                        },
-                    },
-                });
-
-                // Create chart context for timeline controls.
-                const chartContext = {
-                    totalCommits: chartCommits.length,
-                    minWindowSize: 10,
-                    maxWindowSize: chartCommits.length,
-                    defaultWindowSize: 50,
-                    currentWindowSize: 50,
-                    currentPosition: chartCommits.length
-                };
-
-                document.getElementById("chart-section").classList.remove("hidden");
-
-                // Initialize timeline controls.
-                function initializeTimelineControls() {
-                    const scrollbarContainer = document.querySelector(".timeline-scrollbar-container");
-                    const scrollbarContent = document.getElementById("timeline-scrollbar-content");
-                    const controlInfoText = document.getElementById("control-info-text");
-                    const chartCanvas = document.getElementById("chart");
-
-                    // Handle edge case: empty dataset.
-                    if (chartContext.totalCommits === 0) {
-                        scrollbarContainer.style.display = "none";
-                        controlInfoText.textContent = "No data available";
-                        return;
-                    }
-
-                    // Handle edge case: single commit.
-                    if (chartContext.totalCommits === 1) {
-                        scrollbarContainer.style.display = "none";
-                        chartContext.maxWindowSize = 1;
-                    }
-
-                    // Update scrollbar dimensions to match total commits.
-                    // The scrollbar content width represents the total timeline.
-                    const updateScrollbarDimensions = () => {
-                        const containerWidth = scrollbarContainer.clientWidth;
-                        // Ensure content is always wider than container so scrollbar remains visible.
-                        const ratio = chartContext.totalCommits / chartContext.currentWindowSize;
-                        const contentWidth = Math.max(containerWidth * ratio, containerWidth * 1.01);
-                        scrollbarContent.style.width = `${contentWidth}px`;
-                    };
-
-                    // Update chart view based on current state.
-                    function updateChartView(updateScrollbar = true) {
-                        const windowSize = chartContext.currentWindowSize;
-                        const position = chartContext.currentPosition;
-
-                        // Calculate the visible range.
-                        // Position represents the RIGHT edge of the window.
-                        const endIndex = Math.min(position, chartContext.totalCommits);
-                        const startIndex = Math.max(0, endIndex - windowSize);
-
-                        // Update chart x-axis scale.
-                        chartInstance.options.scales.x.min = startIndex;
-                        chartInstance.options.scales.x.max = endIndex - 1;
-                        chartInstance.update('none'); // 'none' for no animation = faster.
-
-                        // Update UI labels.
-                        controlInfoText.textContent =
-                            `Showing commits ${startIndex + 1}-${endIndex} of ${chartContext.totalCommits} (${windowSize} visible)`;
-
-                        // Update scrollbar to match the chart view.
-                        if (updateScrollbar) {
-                            updateScrollbarDimensions();
-                            const scrollPercentage = (endIndex - windowSize) / (chartContext.totalCommits - windowSize);
-                            scrollbarContainer.scrollLeft = scrollPercentage * (scrollbarContent.clientWidth - scrollbarContainer.clientWidth);
-                        }
-                    }
-
-                    // Handle scrollbar changes.
-                    scrollbarContainer.addEventListener("scroll", () => {
-                        const scrollLeft = scrollbarContainer.scrollLeft;
-                        const maxScroll = scrollbarContent.clientWidth - scrollbarContainer.clientWidth;
-                        const scrollPercentage = maxScroll > 0 ? scrollLeft / maxScroll : 0;
-
-                        // Calculate new position based on scroll percentage.
-                        const windowSize = chartContext.currentWindowSize;
-                        const newPosition = Math.round(windowSize + scrollPercentage * (chartContext.totalCommits - windowSize));
-                        chartContext.currentPosition = Math.min(chartContext.totalCommits, Math.max(windowSize, newPosition));
-
-                        updateChartView(false);
-                    });
-
-                    // Handle mouse wheel for zooming.
-                    chartCanvas.addEventListener("wheel", (e) => {
-                        e.preventDefault();
-
-                        const zoomSpeed = 0.1;
-                        const delta = Math.sign(e.deltaY);
-                        const currentWindowSize = chartContext.currentWindowSize;
-
-                        // Calculate new window size.
-                        let newWindowSize = Math.round(currentWindowSize * (1 + delta * zoomSpeed));
-                        newWindowSize = Math.max(chartContext.minWindowSize, Math.min(chartContext.maxWindowSize, newWindowSize));
-
-                        // Adjust position to zoom towards the center of the current view.
-                        const currentStart = chartContext.currentPosition - currentWindowSize;
-                        const currentCenter = currentStart + currentWindowSize / 2;
-                        chartContext.currentWindowSize = newWindowSize;
-                        chartContext.currentPosition = Math.min(
-                            chartContext.totalCommits,
-                            Math.max(newWindowSize, Math.round(currentCenter + newWindowSize / 2))
-                        );
-
-                        updateChartView(true);
-                    });
-
-                    // Initial setup.
-                    updateScrollbarDimensions();
-                    updateChartView(true);
-                }
-
-                initializeTimelineControls();
-
-                setStatus(`Loaded ${entries.length} entries, aligned ${entriesAligned} to ${commits.length} commits`, "success");
-
-            } catch (error) {
-                console.error("Error:", error);
-                setStatus(`Error: ${error.message}`, "error");
-            }
-        }
-
-        main();
-    </script>
+    <script type="module" src="wasm-test.js"></script>
 </body>
 </html>
diff --git a/vortex-wasm/wasm-test.js b/vortex-wasm/wasm-test.js
new file mode 100644
index 00000000000..0822e4762f7
--- /dev/null
+++ b/vortex-wasm/wasm-test.js
@@ -0,0 +1,746 @@
+// ============================================================================
+// Configuration
+// ============================================================================
+
+/**
+ * Configuration object for the benchmark chart. Modify these values to
+ * customize the chart for different benchmarks.
+ */
+const CHART_CONFIG = {
+    // Data sources.
+    wasmModulePath: "./pkg/vortex_wasm.js",
+    commitsUrl: "https://vortex-benchmark-results-database.s3.amazonaws.com/commits.json",
+
+    // Series configuration.
+    seriesNames: ["vortex-nvme", "parquet-nvme", "lance-nvme"],
+    seriesColors: {
+        "vortex-nvme": "#101010",
+        "parquet-nvme": "#5DADE2",
+        "lance-nvme": "#ef7f1d",
+    },
+
+    // Chart display settings.
+    defaultVisibleCommits: 50,
+
+    // Zoom and scroll configuration.
+    minWindowSize: 10,
+    zoomSpeed: 0.1,
+
+    // Y-axis label.
+    yAxisLabel: "Time (ms)",
+};
+
+// ============================================================================
+// Utility Functions
+// ============================================================================
+
+/**
+ * Updates the status display with a message and type.
+ *
+ * @param {string} message - The status message to display.
+ * @param {string} type - The status type: "loading", "success", or "error".
+ */
+function setStatus(message, type = "loading") {
+    const status = document.getElementById("status");
+    const text = document.getElementById("status-text");
+    status.className = `status ${type}`;
+    text.textContent = message;
+
+    // Hide spinner for success/error.
+    const spinner = status.querySelector(".spinner");
+    if (spinner) {
+        spinner.style.display = type === "loading" ? "inline-block" : "none";
+    }
+}
+
+/**
+ * Formats time in human-readable format with appropriate units.
+ *
+ * @param {number} ms - Time in milliseconds.
+ * @returns {string} Formatted time string.
+ */
+function formatTime(ms) {
+    if (ms < 1) return `${(ms * 1000).toFixed(0)}μs`;
+    if (ms < 1000) return `${ms.toFixed(1)}ms`;
+    return `${(ms / 1000).toFixed(2)}s`;
+}
+
+// ============================================================================
+// Data Loading Functions
+// ============================================================================
+
+/**
+ * Loads and initializes the WASM module.
+ *
+ * @returns {Promise<Object>} The initialized WASM module.
+ */
+async function loadWasmModule() {
+    setStatus("Loading WASM module...");
+    const wasm = await import(CHART_CONFIG.wasmModulePath);
+    await wasm.default();
+    console.log("WASM loaded:", wasm.get_version());
+    return wasm;
+}
+
+/**
+ * Loads commit metadata from S3 and processes it into a sorted array.
+ *
+ * @returns {Promise<Array>} Array of commit objects sorted by timestamp.
+ */
+async function loadCommitData() {
+    setStatus("Loading commit metadata from S3...");
+    const response = await fetch(CHART_CONFIG.commitsUrl);
+    const text = await response.text();
+
+    // Parse JSONL format (one JSON object per line).
+    const commitsData = {};
+    for (const line of text.split("\n")) {
+        const trimmed = line.trim();
+        if (trimmed.length > 0) {
+            try {
+                const commit = JSON.parse(trimmed);
+                commitsData[commit.id] = commit;
+            } catch (e) {
+                console.warn("Failed to parse commit line:", e);
+            }
+        }
+    }
+
+    // Sort by timestamp and add sorted indices.
+    const commits = Object.values(commitsData)
+        .sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp))
+        .map((commit, index) => ({ ...commit, sortedIndex: index }));
+
+    console.log(`Loaded ${commits.length} commits`);
+    return commits;
+}
+
+/**
+ * Loads benchmark data from WASM.
+ *
+ * @param {Object} wasm - The WASM module.
+ * @returns {Promise<Array>} Array of benchmark entries.
+ */
+async function loadBenchmarkData(wasm) {
+    setStatus("Loading benchmark data from Vortex file via WASM...");
+    const entries = await wasm.load_random_access_data();
+    console.log(`Loaded ${entries.length} benchmark entries`);
+    return entries;
+}
+
+// ============================================================================
+// Data Processing Functions
+// ============================================================================
+
+/**
+ * Processes benchmark entries into chart-ready format.
+ *
+ * @param {Array} entries - Benchmark entries.
+ * @param {Array} commits - Commit metadata.
+ * @returns {Object} Object containing seriesData and chartCommits.
+ */
+function processChartData(entries, commits) {
+    const commitIndexMap = new Map(commits.map(c => [c.id, c.sortedIndex]));
+    const seriesData = new Map();
+
+    // Initialize empty arrays for each series.
+    for (const name of CHART_CONFIG.seriesNames) {
+        seriesData.set(name, new Array(commits.length).fill(null));
+    }
+
+    // Populate with data.
+    let entriesAligned = 0;
+    for (const entry of entries) {
+        const commitIndex = commitIndexMap.get(entry.commit_id);
+        if (commitIndex !== undefined) {
+            const series = seriesData.get(entry.series_name);
+            if (series) {
+                series[commitIndex] = { value: entry.value_ms };
+                entriesAligned++;
+            }
+        }
+    }
+
+    console.log(`Aligned ${entriesAligned}/${entries.length} entries to commits`);
+
+    // Find the range of data (first and last non-null indices).
+    let firstDataIndex = commits.length;
+    let lastDataIndex = 0;
+    for (const data of seriesData.values()) {
+        for (let i = 0; i < data.length; i++) {
+            if (data[i] !== null) {
+                firstDataIndex = Math.min(firstDataIndex, i);
+                lastDataIndex = Math.max(lastDataIndex, i);
+            }
+        }
+    }
+
+    // Slice to show only the range with data.
+    const startIndex = Math.max(0, firstDataIndex);
+    const endIndex = lastDataIndex + 1;
+    const chartCommits = commits.slice(startIndex, endIndex);
+    const slicedSeriesData = new Map();
+
+    for (const [name, data] of seriesData.entries()) {
+        slicedSeriesData.set(name, data.slice(startIndex, endIndex));
+    }
+
+    return { seriesData: slicedSeriesData, chartCommits, entriesAligned };
+}
+
+/**
+ * Calculates summary statistics for the latest data point.
+ *
+ * @param {Map} seriesData - Map of series names to data arrays.
+ * @returns {Object} Object containing results array and fastestTime.
+ */
+function calculateSummary(seriesData) {
+    const latestResults = new Map();
+
+    for (const [seriesName, data] of seriesData.entries()) {
+        // Find the most recent non-null value.
+        for (let i = data.length - 1; i >= 0; i--) {
+            if (data[i] !== null) {
+                latestResults.set(seriesName, data[i].value);
+                break;
+            }
+        }
+    }
+
+    const fastestTime = Math.min(...latestResults.values());
+    const sortedResults = Array.from(latestResults.entries())
+        .sort((a, b) => a[1] - b[1]);
+
+    return { results: sortedResults, fastestTime };
+}
+
+// ============================================================================
+// Rendering Functions
+// ============================================================================
+
+/**
+ * Renders the summary table showing latest benchmark results.
+ *
+ * @param {Object} summary - Summary data containing results and fastestTime.
+ */
+function renderSummary({ results, fastestTime }) {
+    const summaryList = document.getElementById("summary-list");
+    summaryList.innerHTML = "";
+
+    results.forEach(([name, time], index) => {
+        const ratio = time / fastestTime;
+        const item = document.createElement("div");
+        item.className = "score-item";
+        item.innerHTML = `
+            <span class="score-rank">#${index + 1}</span>
+            <span class="score-series" style="color: ${CHART_CONFIG.seriesColors[name]}">${name}</span>
+            <div class="score-metrics">
+                <span class="score-runtime">${formatTime(time)}</span>
+                <span class="score-ratio">${ratio.toFixed(2)}x</span>
+            </div>
+        `;
+        summaryList.appendChild(item);
+    });
+
+    // Show the benchmark section.
+    document.getElementById("random-access-benchmark").classList.remove("hidden");
+}
+
+/**
+ * Sets up collapsible benchmark sections.
+ */
+function setupCollapsibleBenchmarks() {
+    document.querySelectorAll('.benchmark-header').forEach(header => {
+        header.addEventListener('click', () => {
+            const benchmarkSet = header.closest('.benchmark-set');
+            benchmarkSet.classList.toggle('collapsed');
+        });
+    });
+}
+
+/**
+ * Creates Chart.js datasets from series data.
+ *
+ * @param {Map} seriesData - Map of series names to data arrays.
+ * @returns {Array} Array of Chart.js dataset objects.
+ */
+function createDatasets(seriesData) {
+    return CHART_CONFIG.seriesNames.map(name => {
+        const data = seriesData.get(name);
+        return {
+            label: name,
+            data: data.map(d => d?.value ?? null),
+            borderColor: CHART_CONFIG.seriesColors[name],
+            backgroundColor: CHART_CONFIG.seriesColors[name],
+            borderWidth: 1.5,
+            borderJoinStyle: 'round',
+            pointRadius: 2,
+            tension: 0,
+            spanGaps: true,
+        };
+    });
+}
+
+// ============================================================================
+// Chart Configuration Functions
+// ============================================================================
+
+/**
+ * Creates the vertical line plugin for Chart.js.
+ *
+ * @returns {Object} Chart.js plugin object.
+ */
+function createVerticalLinePlugin() {
+    return {
+        id: 'verticalLine',
+        afterDatasetsDraw(chart) {
+            if (chart.tooltip?._active?.length) {
+                const activePoint = chart.tooltip._active[0];
+                const ctx = chart.ctx;
+                const x = activePoint.element.x;
+                const topY = chart.scales.y.top;
+                const bottomY = chart.scales.y.bottom;
+
+                ctx.save();
+                ctx.beginPath();
+                ctx.moveTo(x, topY);
+                ctx.lineTo(x, bottomY);
+                ctx.lineWidth = 2;
+                ctx.strokeStyle = 'rgba(89, 113, 253, 0.5)';
+                ctx.stroke();
+                ctx.restore();
+            }
+        }
+    };
+}
+
+/**
+ * Handles click events on chart data points.
+ *
+ * @param {Array} elements - Array of clicked chart elements.
+ * @param {Array} chartCommits - Array of commit objects.
+ */
+function handleChartClick(elements, chartCommits) {
+    if (elements.length > 0) {
+        const index = elements[0].index;
+        const commit = chartCommits[index];
+        if (commit?.url) {
+            window.open(commit.url, "_blank");
+        }
+    }
+}
+
+/**
+ * Creates tooltip configuration for Chart.js.
+ *
+ * @param {Array} chartCommits - Array of commit objects.
+ * @returns {Object} Chart.js tooltip configuration.
+ */
+function createTooltipConfig(chartCommits) {
+    return {
+        enabled: false,
+        external: (context) => renderExternalTooltip(context),
+        callbacks: {
+            footer: (tooltipItems) => getTooltipFooter(tooltipItems, chartCommits)
+        }
+    };
+}
+
+/**
+ * Gets tooltip footer content with commit details.
+ *
+ * @param {Array} tooltipItems - Array of tooltip items.
+ * @param {Array} chartCommits - Array of commit objects.
+ * @returns {Array} Array of footer lines.
+ */
+function getTooltipFooter(tooltipItems, chartCommits) {
+    if (tooltipItems.length === 0) return [];
+    const commit = chartCommits[tooltipItems[0].dataIndex];
+    if (!commit) return [];
+    return [
+        commit.message.split("\n")[0].slice(0, 60),
+        `${commit.author.name} - ${new Date(commit.timestamp).toLocaleDateString()}`
+    ];
+}
+
+/**
+ * Renders the external tooltip element.
+ *
+ * @param {Object} context - Chart.js tooltip context.
+ */
+function renderExternalTooltip(context) {
+    const tooltipEl = document.getElementById('chartjs-tooltip');
+    const tooltipModel = context.tooltip;
+
+    // Hide if no tooltip.
+    if (tooltipModel.opacity === 0) {
+        tooltipEl.classList.remove('active');
+        return;
+    }
+
+    // Set tooltip content.
+    if (tooltipModel.body) {
+        tooltipEl.innerHTML = buildTooltipHTML(tooltipModel);
+        positionTooltip(tooltipEl, context, tooltipModel);
+    }
+}
+
+/**
+ * Builds HTML content for the tooltip.
+ *
+ * @param {Object} tooltipModel - Chart.js tooltip model.
+ * @returns {string} HTML string for tooltip content.
+ */
+function buildTooltipHTML(tooltipModel) {
+    const titleLines = tooltipModel.title || [];
+    const footerLines = tooltipModel.footer || [];
+
+    let html = '<div class="chartjs-tooltip-body">';
+
+    // Add title (commit ID).
+    titleLines.forEach(title => {
+        html += `<div style="font-weight: bold; margin-bottom: 4px;">${title}</div>`;
+    });
+
+    // Add body (series values) - sorted high to low.
+    const sortedItems = tooltipModel.dataPoints.sort((a, b) => b.parsed.y - a.parsed.y);
+    sortedItems.forEach((item) => {
+        const color = item.dataset.borderColor;
+        const value = item.formattedValue;
+        const label = item.dataset.label;
+        html += `
+            <div class="chartjs-tooltip-item">
+                <div class="chartjs-tooltip-color" style="background-color: ${color}"></div>
+                <span>${label}: ${value}ms</span>
+            </div>
+        `;
+    });
+
+    // Add footer (commit details).
+    if (footerLines.length > 0) {
+        html += '<div class="chartjs-tooltip-footer">';
+        footerLines.forEach(footer => {
+            html += `<div>${footer}</div>`;
+        });
+        html += '</div>';
+    }
+
+    html += '</div>';
+    return html;
+}
+
+/**
+ * Positions the tooltip below the chart.
+ *
+ * @param {HTMLElement} tooltipEl - The tooltip element.
+ * @param {Object} context - Chart.js context.
+ * @param {Object} tooltipModel - Chart.js tooltip model.
+ */
+function positionTooltip(tooltipEl, context, tooltipModel) {
+    const canvas = context.chart.canvas;
+    const canvasRect = canvas.getBoundingClientRect();
+
+    tooltipEl.classList.add('active');
+    tooltipEl.style.left = canvasRect.left + window.pageXOffset + tooltipModel.caretX + 'px';
+    tooltipEl.style.top = canvasRect.bottom + window.pageYOffset + 10 + 'px';
+    tooltipEl.style.transform = 'translateX(-50%)';
+}
+
+/**
+ * Creates chart options configuration.
+ *
+ * @param {Array} chartCommits - Array of commit objects.
+ * @returns {Object} Chart.js options configuration.
+ */
+function createChartOptions(chartCommits) {
+    return {
+        responsive: true,
+        maintainAspectRatio: false,
+        layout: {
+            padding: { left: 0, right: 0, top: 0, bottom: 0 }
+        },
+        interaction: {
+            intersect: false,
+            mode: "index",
+        },
+        scales: {
+            x: {
+                title: { display: false },
+                ticks: {
+                    maxRotation: 45,
+                    minRotation: 45,
+                    autoSkipPadding: 10,
+                },
+                min: Math.max(0, chartCommits.length - CHART_CONFIG.defaultVisibleCommits),
+            },
+            y: {
+                title: {
+                    display: true,
+                    text: CHART_CONFIG.yAxisLabel,
+                },
+                beginAtZero: true,
+            },
+        },
+        plugins: {
+            verticalLine: {},
+            legend: { position: "top" },
+            tooltip: createTooltipConfig(chartCommits),
+        },
+        onClick: (event, elements) => handleChartClick(elements, chartCommits),
+    };
+}
+
+/**
+ * Creates the Chart.js instance.
+ *
+ * @param {Array} chartCommits - Array of commit objects.
+ * @param {Map} seriesData - Map of series names to data arrays.
+ * @returns {Object} The Chart.js instance.
+ */
+function createChart(chartCommits, seriesData) {
+    const ctx = document.getElementById("chart").getContext("2d");
+    const datasets = createDatasets(seriesData);
+
+    // Register vertical line plugin.
+    Chart.register(createVerticalLinePlugin());
+
+    const chartInstance = new Chart(ctx, {
+        type: "line",
+        data: {
+            labels: chartCommits.map(c => c.id.slice(0, 7)),
+            datasets: datasets,
+        },
+        options: createChartOptions(chartCommits),
+    });
+
+    return chartInstance;
+}
+
+// ============================================================================
+// Timeline Control Functions
+// ============================================================================
+
+/**
+ * Creates chart context for timeline state management.
+ *
+ * @param {number} totalCommits - Total number of commits.
+ * @returns {Object} Chart context object.
+ */
+function createChartContext(totalCommits) {
+    return {
+        totalCommits,
+        minWindowSize: CHART_CONFIG.minWindowSize,
+        maxWindowSize: totalCommits,
+        defaultWindowSize: CHART_CONFIG.defaultVisibleCommits,
+        currentWindowSize: CHART_CONFIG.defaultVisibleCommits,
+        currentPosition: totalCommits
+    };
+}
+
+/**
+ * Updates scrollbar dimensions to match current window size.
+ *
+ * @param {Object} elements - DOM elements for timeline controls.
+ * @param {Object} chartContext - Chart context state.
+ */
+function updateScrollbarDimensions(elements, chartContext) {
+    const containerWidth = elements.scrollbarContainer.clientWidth;
+    const ratio = chartContext.totalCommits / chartContext.currentWindowSize;
+    const contentWidth = Math.max(containerWidth * ratio, containerWidth * 1.01);
+    elements.scrollbarContent.style.width = `${contentWidth}px`;
+}
+
+/**
+ * Updates chart view and UI to reflect current state.
+ *
+ * @param {Object} elements - DOM elements for timeline controls.
+ * @param {Object} chartContext - Chart context state.
+ * @param {Object} chartInstance - The Chart.js instance.
+ * @param {boolean} updateScrollbar - Whether to update scrollbar position.
+ */
+function updateChartView(elements, chartContext, chartInstance, updateScrollbar) {
+    const windowSize = chartContext.currentWindowSize;
+    const position = chartContext.currentPosition;
+
+    const endIndex = Math.min(position, chartContext.totalCommits);
+    const startIndex = Math.max(0, endIndex - windowSize);
+
+    // Update chart x-axis scale.
+    chartInstance.options.scales.x.min = startIndex;
+    chartInstance.options.scales.x.max = endIndex - 1;
+    chartInstance.update('none');
+
+    // Update UI labels.
+    elements.controlInfoText.textContent =
+        `Showing commits ${startIndex + 1}-${endIndex} of ${chartContext.totalCommits} (${windowSize} visible)`;
+
+    // Update scrollbar.
+    if (updateScrollbar) {
+        updateScrollbarDimensions(elements, chartContext);
+        const scrollPercentage = (endIndex - windowSize) / (chartContext.totalCommits - windowSize);
+        elements.scrollbarContainer.scrollLeft = scrollPercentage *
+            (elements.scrollbarContent.clientWidth - elements.scrollbarContainer.clientWidth);
+    }
+}
+
+/**
+ * Sets up scrollbar event handler.
+ *
+ * @param {Object} elements - DOM elements for timeline controls.
+ * @param {Object} chartContext - Chart context state.
+ * @param {Object} chartInstance - The Chart.js instance.
+ */
+function setupScrollbarHandler(elements, chartContext, chartInstance) {
+    elements.scrollbarContainer.addEventListener("scroll", () => {
+        const scrollLeft = elements.scrollbarContainer.scrollLeft;
+        const maxScroll = elements.scrollbarContent.clientWidth - elements.scrollbarContainer.clientWidth;
+        const scrollPercentage = maxScroll > 0 ? scrollLeft / maxScroll : 0;
+
+        const windowSize = chartContext.currentWindowSize;
+        const newPosition = Math.round(windowSize + scrollPercentage * (chartContext.totalCommits - windowSize));
+        chartContext.currentPosition = Math.min(chartContext.totalCommits, Math.max(windowSize, newPosition));
+
+        updateChartView(elements, chartContext, chartInstance, false);
+    });
+}
+
+/**
+ * Sets up zoom button click handlers.
+ *
+ * @param {Object} elements - DOM elements for timeline controls.
+ * @param {Object} chartContext - Chart context state.
+ * @param {Object} chartInstance - The Chart.js instance.
+ */
+function setupZoomButtons(elements, chartContext, chartInstance) {
+    const zoom = (step, direction) => {
+        const currentWindowSize = chartContext.currentWindowSize;
+
+        // Snap to next multiple of step in the given direction.
+        let newWindowSize;
+        if (direction > 0) {
+            // Zoom out: go to next higher multiple.
+            newWindowSize = Math.ceil((currentWindowSize + 1) / step) * step;
+        } else {
+            // Zoom in: go to next lower multiple.
+            newWindowSize = Math.floor((currentWindowSize - 1) / step) * step;
+        }
+        newWindowSize = Math.max(chartContext.minWindowSize, Math.min(chartContext.maxWindowSize, newWindowSize));
+
+        // Keep centered while zooming.
+        const currentStart = chartContext.currentPosition - currentWindowSize;
+        const currentCenter = currentStart + currentWindowSize / 2;
+        chartContext.currentWindowSize = newWindowSize;
+        chartContext.currentPosition = Math.min(
+            chartContext.totalCommits,
+            Math.max(newWindowSize, Math.round(currentCenter + newWindowSize / 2))
+        );
+
+        updateChartView(elements, chartContext, chartInstance, true);
+    };
+
+    // Small zoom: 25 commits, large zoom: 250 commits.
+    elements.zoomInSmallBtn?.addEventListener("click", () => zoom(25, -1));
+    elements.zoomInLargeBtn?.addEventListener("click", () => zoom(250, -1));
+    elements.zoomOutSmallBtn?.addEventListener("click", () => zoom(25, 1));
+    elements.zoomOutLargeBtn?.addEventListener("click", () => zoom(250, 1));
+}
+
+/**
+ * Sets up mouse wheel pan handler.
+ *
+ * @param {Object} elements - DOM elements for timeline controls.
+ * @param {Object} chartContext - Chart context state.
+ * @param {Object} chartInstance - The Chart.js instance.
+ */
+function setupWheelPanHandler(elements, chartContext, chartInstance) {
+    elements.chartCanvas.addEventListener("wheel", (e) => {
+        e.preventDefault();
+
+        const delta = Math.sign(e.deltaY);
+        const panAmount = Math.max(1, Math.round(chartContext.currentWindowSize * 0.1));
+
+        chartContext.currentPosition = Math.min(
+            chartContext.totalCommits,
+            Math.max(chartContext.currentWindowSize, chartContext.currentPosition + delta * panAmount)
+        );
+
+        updateChartView(elements, chartContext, chartInstance, true);
+    });
+}
+
+/**
+ * Initializes timeline controls for chart navigation.
+ *
+ * @param {Object} chartInstance - The Chart.js instance.
+ * @param {Array} chartCommits - Array of commit objects.
+ */
+function initializeTimelineControls(chartInstance, chartCommits) {
+    const elements = {
+        scrollbarContainer: document.querySelector(".timeline-scrollbar-container"),
+        scrollbarContent: document.getElementById("timeline-scrollbar-content"),
+        controlInfoText: document.getElementById("control-info-text"),
+        chartCanvas: document.getElementById("chart"),
+        zoomInSmallBtn: document.getElementById("zoom-in-small"),
+        zoomInLargeBtn: document.getElementById("zoom-in-large"),
+        zoomOutSmallBtn: document.getElementById("zoom-out-small"),
+        zoomOutLargeBtn: document.getElementById("zoom-out-large"),
+    };
+
+    const chartContext = createChartContext(chartCommits.length);
+
+    // Handle edge cases.
+    if (chartContext.totalCommits === 0) {
+        elements.scrollbarContainer.style.display = "none";
+        elements.controlInfoText.textContent = "No data available";
+        return;
+    }
+
+    if (chartContext.totalCommits === 1) {
+        elements.scrollbarContainer.style.display = "none";
+        chartContext.maxWindowSize = 1;
+    }
+
+    // Setup event handlers.
+    setupScrollbarHandler(elements, chartContext, chartInstance);
+    setupZoomButtons(elements, chartContext, chartInstance);
+    setupWheelPanHandler(elements, chartContext, chartInstance);
+
+    // Initial render.
+    updateChartView(elements, chartContext, chartInstance, true);
+}
+
+// ============================================================================
+// Main Orchestration
+// ============================================================================
+
+/**
+ * Main function that orchestrates the entire benchmark chart initialization.
+ */
+async function main() {
+    try {
+        // Load data.
+        const wasm = await loadWasmModule();
+        const commits = await loadCommitData();
+        const entries = await loadBenchmarkData(wasm);
+
+        // Process data.
+        const { seriesData, chartCommits, entriesAligned } = processChartData(entries, commits);
+        const summary = calculateSummary(seriesData);
+
+        // Render UI.
+        renderSummary(summary);
+        const chartInstance = createChart(chartCommits, seriesData);
+        initializeTimelineControls(chartInstance, chartCommits);
+
+        // Set up collapsible behavior.
+        setupCollapsibleBenchmarks();
+
+        setStatus(`Loaded ${entries.length} entries, aligned ${entriesAligned} to ${commits.length} commits`, "success");
+
+    } catch (error) {
+        console.error("Error:", error);
+        setStatus(`Error: ${error.message}`, "error");
+    }
+}
+
+main();

From 3ef10742c57fd653fc21a89d2e63e583429b0463 Mon Sep 17 00:00:00 2001
From: Connor Tsui <connor.tsui20@gmail.com>
Date: Wed, 3 Dec 2025 17:31:00 -0500
Subject: [PATCH 12/30] migration to vortex done

Signed-off-by: Connor Tsui <connor.tsui20@gmail.com>
---
 vortex-wasm/Cargo.toml                        |  18 +--
 vortex-wasm/src/bin/append.rs                 | 118 ------------------
 vortex-wasm/src/bin/migrate.rs                | 104 ---------------
 ...igrate_random_access.rs => migrate_all.rs} |  80 +++---------
 vortex-wasm/src/website/mod.rs                |   2 +-
 vortex-wasm/src/website/update_s3.rs          |   2 +-
 6 files changed, 22 insertions(+), 302 deletions(-)
 delete mode 100644 vortex-wasm/src/bin/append.rs
 delete mode 100644 vortex-wasm/src/bin/migrate.rs
 rename vortex-wasm/src/bin/{migrate_random_access.rs => migrate_all.rs} (60%)

diff --git a/vortex-wasm/Cargo.toml b/vortex-wasm/Cargo.toml
index 6ddeeadcc28..30c50c9a6f3 100644
--- a/vortex-wasm/Cargo.toml
+++ b/vortex-wasm/Cargo.toml
@@ -17,8 +17,8 @@ version.workspace = true
 crate-type = ["cdylib", "rlib"]
 
 [features]
-default = []
-# Native feature for binaries - includes tokio runtime and file system dependencies.
+default = ["native"]
+# Native feature for binaries: includes tokio runtime and file system dependencies.
 native = [
     "dep:async-fs",
     "dep:serde_json",
@@ -62,16 +62,6 @@ tracing = { workspace = true, optional = true }
 features = ["console"]
 version = "0.3"
 
-[[bin]]
-name = "migrate"
-path = "src/bin/migrate.rs"
-required-features = ["native"]
-
-[[bin]]
-name = "append"
-path = "src/bin/append.rs"
-required-features = ["native"]
-
 [[bin]]
 name = "test_s3_read"
 path = "src/bin/test_s3_read.rs"
@@ -83,8 +73,8 @@ path = "src/bin/test_s3_update.rs"
 required-features = ["native"]
 
 [[bin]]
-name = "migrate_random_access"
-path = "src/bin/migrate_random_access.rs"
+name = "migrate_all"
+path = "src/bin/migrate_all.rs"
 required-features = ["native"]
 
 [lints]
diff --git a/vortex-wasm/src/bin/append.rs b/vortex-wasm/src/bin/append.rs
deleted file mode 100644
index 35fa7bc2b8a..00000000000
--- a/vortex-wasm/src/bin/append.rs
+++ /dev/null
@@ -1,118 +0,0 @@
-// SPDX-License-Identifier: Apache-2.0
-// SPDX-FileCopyrightText: Copyright the Vortex contributors
-
-//! Binary to append a single benchmark entry to a Vortex file.
-
-#![allow(clippy::expect_used)]
-
-use std::env;
-use std::path::Path;
-
-use vortex_array::builders::builder_with_capacity;
-use vortex_dtype::DType;
-use vortex_dtype::FieldNames;
-use vortex_dtype::Nullability;
-use vortex_dtype::PType;
-use vortex_dtype::StructFields;
-use vortex_error::VortexResult;
-use vortex_file::update_file;
-use vortex_scalar::Scalar;
-
-/// Returns the expected DType for the benchmark data file.
-///
-/// The schema is a struct with two fields:
-/// - `value`: u64 (non-nullable)
-/// - `commit_id`: utf8 string (non-nullable)
-fn benchmark_dtype() -> DType {
-    DType::Struct(
-        StructFields::new(
-            FieldNames::from(["value", "commit_id"]),
-            vec![
-                DType::Primitive(PType::U64, Nullability::NonNullable),
-                DType::Utf8(Nullability::NonNullable),
-            ],
-        ),
-        Nullability::NonNullable,
-    )
-}
-
-/// Creates a benchmark scalar from a value and commit ID.
-fn benchmark_scalar(value: u64, commit_id: &str) -> Scalar {
-    Scalar::struct_(
-        benchmark_dtype(),
-        vec![
-            Scalar::primitive(value, Nullability::NonNullable),
-            Scalar::utf8(commit_id, Nullability::NonNullable),
-        ],
-    )
-}
-
-fn main() {
-    let args: Vec<String> = env::args().collect();
-
-    if args.len() < 4 {
-        eprintln!("Usage: append_entries <vortex_file> <value> <commit_id>");
-        eprintln!();
-        eprintln!("Appends a single benchmark entry to the Vortex file.");
-        return;
-    }
-
-    let vortex_path = &args[1];
-    let value: u64 = args[2].parse().expect("Failed to parse value as u64");
-    let commit_id = &args[3];
-
-    let scalar = benchmark_scalar(value, commit_id);
-
-    let total = append_entry(vortex_path, vortex_path, scalar)
-        .expect("Failed to append entry to Vortex file");
-
-    println!(
-        "Appended entry (value={}, commit_id={}) to {} (total: {} entries)",
-        value, commit_id, vortex_path, total
-    );
-}
-
-/// Reads a Vortex file and appends a single scalar entry, writing the result back.
-///
-/// This function:
-/// 1. Reads the existing Vortex file (using the scalar's dtype)
-/// 2. Appends the new scalar to the existing data using a builder
-/// 3. Writes the combined data back to the output path
-///
-/// The input and output paths can be the same to overwrite the existing file.
-///
-/// # Arguments
-///
-/// * `input_path` - Path to the existing Vortex file to read.
-/// * `output_path` - Path to write the updated Vortex file (can be same as input).
-/// * `new_entry` - The scalar to append. Its dtype is used for reading/writing the file.
-///
-/// # Returns
-///
-/// The total number of entries in the resulting file.
-pub fn append_entry(
-    input_path: impl AsRef<Path>,
-    output_path: impl AsRef<Path>,
-    new_entry: Scalar,
-) -> VortexResult<usize> {
-    let dtype = new_entry.dtype().clone();
-
-    let summary = update_file(input_path, output_path, |existing_array| async move {
-        let existing_len = existing_array.len();
-
-        // Create a builder and extend with existing data, then append the new entry.
-        let total_capacity = existing_len + 1;
-        let mut builder = builder_with_capacity(&dtype, total_capacity);
-
-        // Add existing data.
-        builder.extend_from_array(&existing_array);
-
-        // Append the new entry.
-        builder.append_scalar(&new_entry)?;
-
-        Ok(builder.finish())
-    })?;
-
-    #[expect(clippy::cast_possible_truncation)]
-    Ok(summary.row_count() as usize)
-}
diff --git a/vortex-wasm/src/bin/migrate.rs b/vortex-wasm/src/bin/migrate.rs
deleted file mode 100644
index 58516a8ff66..00000000000
--- a/vortex-wasm/src/bin/migrate.rs
+++ /dev/null
@@ -1,104 +0,0 @@
-// SPDX-License-Identifier: Apache-2.0
-// SPDX-FileCopyrightText: Copyright the Vortex contributors
-
-#![allow(clippy::expect_used)]
-
-use std::env;
-use std::fs;
-
-use serde::Deserialize;
-use vortex_array::IntoArray;
-use vortex_array::arrays::PrimitiveArray;
-use vortex_array::arrays::StructArray;
-use vortex_array::arrays::VarBinArray;
-use vortex_array::expr::session::ExprSession;
-use vortex_array::session::ArraySession;
-use vortex_array::validity::Validity;
-use vortex_buffer::Buffer;
-use vortex_dtype::DType;
-use vortex_dtype::Nullability;
-use vortex_file::WriteOptionsSessionExt;
-use vortex_io::runtime::BlockingRuntime;
-use vortex_io::runtime::current::CurrentThreadRuntime;
-use vortex_io::session::RuntimeSession;
-use vortex_io::session::RuntimeSessionExt;
-use vortex_layout::session::LayoutSession;
-use vortex_metrics::VortexMetrics;
-use vortex_session::VortexSession;
-
-/// Represents a benchmark entry with value and commit ID.
-#[derive(Debug, Deserialize)]
-struct BenchmarkEntry {
-    value: u64,
-    commit_id: String,
-}
-
-fn main() {
-    let runtime = CurrentThreadRuntime::new();
-
-    let session = VortexSession::empty()
-        .with::<VortexMetrics>()
-        .with::<ArraySession>()
-        .with::<LayoutSession>()
-        .with::<ExprSession>()
-        .with::<RuntimeSession>()
-        .with_handle(runtime.handle());
-
-    vortex_file::register_default_encodings(&session);
-
-    runtime.block_on(async_main(session));
-}
-
-async fn async_main(session: VortexSession) {
-    let args: Vec<String> = env::args().collect();
-    let input_path = args
-        .get(1)
-        .expect("Usage: migrate <input_json> <output_vortex>");
-    let output_path = args
-        .get(2)
-        .expect("Usage: migrate <input_json> <output_vortex>");
-
-    // Parse JSON.
-    let contents = fs::read_to_string(input_path).expect("Failed to read file");
-    let entries: Vec<BenchmarkEntry> =
-        serde_json::from_str(&contents).expect("Failed to parse JSON");
-
-    // Extract values and commit_ids into separate vectors.
-    let values: Vec<u64> = entries.iter().map(|e| e.value).collect();
-    let commit_ids: Vec<&str> = entries.iter().map(|e| e.commit_id.as_str()).collect();
-    let num_entries = entries.len();
-
-    // Create primitive array for values.
-    let values_array = PrimitiveArray::new(Buffer::from(values), Validity::NonNullable);
-
-    // Create VarBin array for commit_ids (UTF8 strings).
-    let commit_ids_array = VarBinArray::from_iter(
-        commit_ids.into_iter().map(Some),
-        DType::Utf8(Nullability::NonNullable),
-    );
-
-    // Create struct array with both fields.
-    let struct_array = StructArray::from_fields(&[
-        ("value", values_array.into_array()),
-        ("commit_id", commit_ids_array.into_array()),
-    ])
-    .expect("Failed to create struct array");
-
-    // Write to Vortex file using push-based API.
-    let file = async_fs::File::create(output_path)
-        .await
-        .expect("Failed to create output file");
-
-    let mut writer = session
-        .write_options()
-        .writer(file, struct_array.dtype().clone());
-
-    writer
-        .push(struct_array.into_array())
-        .await
-        .expect("Failed to push array");
-
-    writer.finish().await.expect("Failed to finish writing");
-
-    println!("Wrote {} entries to {}", num_entries, output_path);
-}
diff --git a/vortex-wasm/src/bin/migrate_random_access.rs b/vortex-wasm/src/bin/migrate_all.rs
similarity index 60%
rename from vortex-wasm/src/bin/migrate_random_access.rs
rename to vortex-wasm/src/bin/migrate_all.rs
index 6ba435e6f71..ccc1d26eb58 100644
--- a/vortex-wasm/src/bin/migrate_random_access.rs
+++ b/vortex-wasm/src/bin/migrate_all.rs
@@ -1,17 +1,13 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: Copyright the Vortex contributors
 
-//! Binary to migrate the random-access JSON benchmark data to a Vortex file.
-//!
-//! This reads the JSON file from `organized_data/random-access/random_access.json` and converts
-//! it to a Vortex file with the [`BenchmarkEntry`] schema.
+//! Binary to migrate a JSON array of [`BenchmarkEntry`] objects to a Vortex file.
 
 #![allow(clippy::expect_used, clippy::panic)]
 
 use std::env;
 use std::fs;
 
-use serde::Deserialize;
 use vortex::VortexSessionDefault;
 use vortex::array::IntoArray;
 use vortex::array::arrays::FixedSizeListArray;
@@ -27,54 +23,29 @@ use vortex::dtype::Nullability;
 use vortex::file::WriteOptionsSessionExt;
 use vortex::file::WriteStrategyBuilder;
 use vortex::session::VortexSession;
+use vortex_wasm::website::entry::BenchmarkEntry;
 
-/// Represents a benchmark entry from the JSON file.
-#[derive(Debug, Deserialize)]
-struct JsonEntry {
-    name: String,
-    value: u64,
-    commit_id: String,
-    // Ignore other fields from JSON.
-    #[serde(flatten)]
-    _extra: serde_json::Value,
-}
-
-/// Maps the JSON `name` field to the series name string.
-fn series_name(name: &str) -> &'static str {
-    match name {
-        "random-access/vortex-tokio-local-disk" => "vortex-nvme",
-        "random-access/parquet-tokio-local-disk" => "parquet-nvme",
-        "random-access/lance-tokio-local-disk" => "lance-nvme",
-        _ => panic!("Unknown benchmark name: {}", name),
-    }
-}
-
-fn main() {
-    let runtime = tokio::runtime::Runtime::new().expect("Failed to create tokio runtime");
-
-    runtime.block_on(async_main());
-}
-
-async fn async_main() {
+#[tokio::main]
+async fn main() {
     let session = VortexSession::default();
 
     let args: Vec<String> = env::args().collect();
     let input_path = args
         .get(1)
-        .expect("Usage: migrate_random_access <input_json> <output_file>");
+        .expect("Usage: migrate_all <input_json> <output_file>");
     let output_path = args
         .get(2)
         .map(String::as_str)
-        .expect("Usage: migrate_random_access <input_json> <output_file>");
+        .expect("Usage: migrate_all <input_json> <output_file>");
 
-    // Parse JSON.
     let contents = fs::read_to_string(input_path).expect("Failed to read file");
-    let entries: Vec<JsonEntry> = serde_json::from_str(&contents).expect("Failed to parse JSON");
+    let entries: Vec<BenchmarkEntry> =
+        serde_json::from_str(&contents).expect("Failed to parse JSON");
 
     let num_entries = entries.len();
-    println!("Parsing {} entries from JSON...", num_entries);
+    println!("Parsed {num_entries} entries from JSON");
 
-    // Extract fields into separate vectors.
+    // Extract fields into columnar vectors.
     let mut commit_id_bytes: Vec<u8> = Vec::with_capacity(num_entries * 20);
     let mut benchmark_groups: Vec<&str> = Vec::with_capacity(num_entries);
     let mut chart_names: Vec<&str> = Vec::with_capacity(num_entries);
@@ -82,24 +53,14 @@ async fn async_main() {
     let mut values: Vec<u64> = Vec::with_capacity(num_entries);
 
     for entry in &entries {
-        // Decode hex commit_id to 20 binary bytes.
-        let bytes = hex::decode(&entry.commit_id).expect("Invalid hex in commit_id");
-        assert_eq!(bytes.len(), 20, "commit_id must decode to 20 bytes");
-        commit_id_bytes.extend_from_slice(&bytes);
-
-        // All entries have the same benchmark_group and chart_name.
-        benchmark_groups.push("random-access");
-        chart_names.push("random-access");
-
-        // Map name to series_name string.
-        series_names.push(series_name(&entry.name));
-
+        commit_id_bytes.extend_from_slice(&entry.commit_id.0);
+        benchmark_groups.push(&entry.benchmark_group);
+        chart_names.push(&entry.chart_name);
+        series_names.push(&entry.series_name);
         values.push(entry.value);
     }
 
-    // Create arrays.
-
-    // commit_id: FixedSizeList<u8, 20>
+    // Build Vortex arrays.
     let commit_id_elements =
         PrimitiveArray::new(Buffer::from(commit_id_bytes), Validity::NonNullable);
     let commit_id_array = FixedSizeListArray::try_new(
@@ -110,28 +71,20 @@ async fn async_main() {
     )
     .expect("Failed to create commit_id array");
 
-    // benchmark_group: utf8
     let benchmark_group_array = VarBinArray::from_iter(
         benchmark_groups.iter().map(|s| Some(*s)),
         DType::Utf8(Nullability::NonNullable),
     );
-
-    // chart_name: utf8
     let chart_name_array = VarBinArray::from_iter(
         chart_names.iter().map(|s| Some(*s)),
         DType::Utf8(Nullability::NonNullable),
     );
-
-    // series_name: utf8
     let series_name_array = VarBinArray::from_iter(
         series_names.iter().map(|s| Some(*s)),
         DType::Utf8(Nullability::NonNullable),
     );
-
-    // value: u64
     let value_array = PrimitiveArray::new(Buffer::from(values), Validity::NonNullable);
 
-    // Create struct array with all fields.
     let struct_array = StructArray::try_new(
         FieldNames::from([
             "commit_id",
@@ -152,7 +105,6 @@ async fn async_main() {
     )
     .expect("Failed to create struct array");
 
-    println!("Created struct array with {} entries", num_entries);
     println!("Schema: {}", struct_array.dtype());
 
     // Write to Vortex file with compression.
@@ -171,5 +123,5 @@ async fn async_main() {
         .await
         .expect("Failed to write Vortex file");
 
-    println!("Wrote {} entries to {}", num_entries, output_path);
+    println!("Wrote {num_entries} entries to {output_path}");
 }
diff --git a/vortex-wasm/src/website/mod.rs b/vortex-wasm/src/website/mod.rs
index 7f55c85544b..4ebea48a95e 100644
--- a/vortex-wasm/src/website/mod.rs
+++ b/vortex-wasm/src/website/mod.rs
@@ -4,6 +4,6 @@
 pub mod entry;
 pub mod read_s3;
 
-// update_s3 uses tokio and std::process::Command which are not available in WASM.
+// `update_s3` uses `tokio` and `std::process::Command`, which are not available in WASM.
 #[cfg(feature = "native")]
 pub mod update_s3;
diff --git a/vortex-wasm/src/website/update_s3.rs b/vortex-wasm/src/website/update_s3.rs
index 9ef5c5f2056..48c0156c2bd 100644
--- a/vortex-wasm/src/website/update_s3.rs
+++ b/vortex-wasm/src/website/update_s3.rs
@@ -307,7 +307,7 @@ where
 /// * `key` - The S3 object key.
 /// * `profile` - Optional AWS CLI profile name.
 /// * `entry` - The benchmark entry to append.
-pub fn append_benchmark_entry(
+pub fn append_benchmark_entry_s3(
     session: &VortexSession,
     bucket: &str,
     key: &str,

From 6510bbf0ee22f6e18e8255df838e428b11d40be3 Mon Sep 17 00:00:00 2001
From: Connor Tsui <connor.tsui20@gmail.com>
Date: Wed, 3 Dec 2025 18:01:35 -0500
Subject: [PATCH 13/30] add grouping of benchmark entries in hash maps

Signed-off-by: Connor Tsui <connor.tsui20@gmail.com>
---
 vortex-wasm/src/website/commit_id.rs | 113 +++++++++++++++++++++++++++
 vortex-wasm/src/website/entry.rs     |  92 ++++++++--------------
 vortex-wasm/src/website/mod.rs       |   1 +
 3 files changed, 145 insertions(+), 61 deletions(-)
 create mode 100644 vortex-wasm/src/website/commit_id.rs

diff --git a/vortex-wasm/src/website/commit_id.rs b/vortex-wasm/src/website/commit_id.rs
new file mode 100644
index 00000000000..b6438b8d2ce
--- /dev/null
+++ b/vortex-wasm/src/website/commit_id.rs
@@ -0,0 +1,113 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: Copyright the Vortex contributors
+
+//! Git commit ID type with passthrough hashing.
+
+use std::fmt;
+use std::hash::BuildHasher;
+use std::hash::Hash;
+use std::hash::Hasher;
+
+use serde::Deserialize;
+use serde::Serialize;
+
+/// The 20-byte binary SHA-1 Git commit ID.
+#[derive(Clone, PartialEq, Eq)]
+pub struct CommitId(pub [u8; 20]);
+
+impl fmt::Display for CommitId {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        write!(f, "{}", hex::encode(self.0))
+    }
+}
+
+impl fmt::Debug for CommitId {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        write!(f, "CommitId(\"{}\")", hex::encode(self.0))
+    }
+}
+
+impl Serialize for CommitId {
+    fn serialize<S>(&self, serializer: S) -> Result<S::Ok, S::Error>
+    where
+        S: serde::Serializer,
+    {
+        serializer.serialize_str(&hex::encode(self.0))
+    }
+}
+
+impl<'de> Deserialize<'de> for CommitId {
+    fn deserialize<D>(deserializer: D) -> Result<Self, D::Error>
+    where
+        D: serde::Deserializer<'de>,
+    {
+        struct CommitIdVisitor;
+
+        impl<'de> serde::de::Visitor<'de> for CommitIdVisitor {
+            type Value = CommitId;
+
+            fn expecting(&self, formatter: &mut fmt::Formatter) -> fmt::Result {
+                formatter.write_str("a 40-character hexadecimal string")
+            }
+
+            fn visit_str<E>(self, value: &str) -> Result<Self::Value, E>
+            where
+                E: serde::de::Error,
+            {
+                if value.len() != 40 {
+                    return Err(E::custom(format!(
+                        "expected 40 hex characters, got {}",
+                        value.len()
+                    )));
+                }
+
+                let bytes = hex::decode(value)
+                    .map_err(|e| E::custom(format!("invalid hexadecimal: {}", e)))?;
+
+                let mut arr = [0u8; 20];
+                arr.copy_from_slice(&bytes);
+                Ok(CommitId(arr))
+            }
+        }
+
+        deserializer.deserialize_str(CommitIdVisitor)
+    }
+}
+
+impl Hash for CommitId {
+    fn hash<H: Hasher>(&self, state: &mut H) {
+        state.write(&self.0);
+    }
+}
+
+/// A hasher that passes through bytes directly without additional hashing.
+///
+/// This is useful for types like [`CommitId`] that are already cryptographic hashes.
+#[derive(Default)]
+pub struct PassthroughHasher(u64);
+
+impl Hasher for PassthroughHasher {
+    fn finish(&self) -> u64 {
+        self.0
+    }
+
+    fn write(&mut self, bytes: &[u8]) {
+        // Use the first 8 bytes (or fewer) as the hash value.
+        let len = bytes.len().min(8);
+        let mut buf = [0u8; 8];
+        buf[..len].copy_from_slice(&bytes[..len]);
+        self.0 = u64::from_le_bytes(buf);
+    }
+}
+
+/// A [`BuildHasher`] that creates [`PassthroughHasher`] instances.
+#[derive(Default, Clone)]
+pub struct PassthroughBuildHasher;
+
+impl BuildHasher for PassthroughBuildHasher {
+    type Hasher = PassthroughHasher;
+
+    fn build_hasher(&self) -> Self::Hasher {
+        PassthroughHasher::default()
+    }
+}
diff --git a/vortex-wasm/src/website/entry.rs b/vortex-wasm/src/website/entry.rs
index f48c73a3019..e8da217eabc 100644
--- a/vortex-wasm/src/website/entry.rs
+++ b/vortex-wasm/src/website/entry.rs
@@ -1,7 +1,6 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: Copyright the Vortex contributors
 
-use std::fmt;
 use std::sync::Arc;
 
 use serde::Deserialize;
@@ -12,6 +11,7 @@ use vortex::dtype::Nullability::NonNullable;
 use vortex::dtype::PType;
 use vortex::dtype::StructFields;
 use vortex::scalar::Scalar;
+use vortex::utils::aliases::hash_map::HashMap;
 use vortex_array::Array;
 use vortex_array::ToCanonical;
 use vortex_array::arrays::FixedSizeListArray;
@@ -20,6 +20,23 @@ use vortex_array::arrays::StructArray;
 use vortex_error::VortexResult;
 use vortex_error::vortex_bail;
 
+use crate::website::commit_id::CommitId;
+use crate::website::commit_id::PassthroughBuildHasher;
+
+// TODO(connor): Replace with a better `HashMap` to serialize to JavaScript.
+
+/// Maps [`CommitId`] to benchmark value.
+pub type CommitValueMap<'a> = HashMap<&'a CommitId, u64, PassthroughBuildHasher>;
+
+/// Maps series name to commit values.
+pub type SeriesMap<'a> = HashMap<&'a str, CommitValueMap<'a>>;
+
+/// Maps chart name to series.
+pub type ChartMap<'a> = HashMap<&'a str, SeriesMap<'a>>;
+
+/// Maps benchmark group to charts.
+pub type GroupedEntries<'a> = HashMap<&'a str, ChartMap<'a>>;
+
 /// A benchmark entry, grouped by benchmark group, then chart name, then series name.
 #[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
 pub struct BenchmarkEntry {
@@ -180,67 +197,20 @@ impl BenchmarkEntry {
 
         Ok(entries)
     }
-}
-
-/// The 20-byte binary SHA-1 Git commit ID.
-#[derive(Clone, PartialEq, Eq)]
-pub struct CommitId(pub [u8; 20]);
-
-impl fmt::Display for CommitId {
-    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
-        write!(f, "{}", hex::encode(self.0))
-    }
-}
-
-impl fmt::Debug for CommitId {
-    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
-        write!(f, "CommitId(\"{}\")", hex::encode(self.0))
-    }
-}
 
-impl Serialize for CommitId {
-    fn serialize<S>(&self, serializer: S) -> Result<S::Ok, S::Error>
-    where
-        S: serde::Serializer,
-    {
-        serializer.serialize_str(&hex::encode(self.0))
-    }
-}
-
-impl<'de> Deserialize<'de> for CommitId {
-    fn deserialize<D>(deserializer: D) -> Result<Self, D::Error>
-    where
-        D: serde::Deserializer<'de>,
-    {
-        struct CommitIdVisitor;
-
-        impl<'de> serde::de::Visitor<'de> for CommitIdVisitor {
-            type Value = CommitId;
-
-            fn expecting(&self, formatter: &mut fmt::Formatter) -> fmt::Result {
-                formatter.write_str("a 40-character hexadecimal string")
-            }
-
-            fn visit_str<E>(self, value: &str) -> Result<Self::Value, E>
-            where
-                E: serde::de::Error,
-            {
-                if value.len() != 40 {
-                    return Err(E::custom(format!(
-                        "expected 40 hex characters, got {}",
-                        value.len()
-                    )));
-                }
-
-                let bytes = hex::decode(value)
-                    .map_err(|e| E::custom(format!("invalid hexadecimal: {}", e)))?;
-
-                let mut arr = [0u8; 20];
-                arr.copy_from_slice(&bytes);
-                Ok(CommitId(arr))
-            }
+    /// Groups benchmark entries by benchmark group, chart name, series name, and commit ID.
+    pub fn group(entries: &[BenchmarkEntry]) -> GroupedEntries<'_> {
+        let mut result: GroupedEntries<'_> = HashMap::new();
+        for entry in entries {
+            result
+                .entry(entry.benchmark_group.as_str())
+                .or_default()
+                .entry(entry.chart_name.as_str())
+                .or_default()
+                .entry(entry.series_name.as_str())
+                .or_insert_with(|| HashMap::with_hasher(PassthroughBuildHasher))
+                .insert(&entry.commit_id, entry.value);
         }
-
-        deserializer.deserialize_str(CommitIdVisitor)
+        result
     }
 }
diff --git a/vortex-wasm/src/website/mod.rs b/vortex-wasm/src/website/mod.rs
index 4ebea48a95e..014044070a2 100644
--- a/vortex-wasm/src/website/mod.rs
+++ b/vortex-wasm/src/website/mod.rs
@@ -1,6 +1,7 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: Copyright the Vortex contributors
 
+mod commit_id;
 pub mod entry;
 pub mod read_s3;
 

From 18168dae9f3d4b12a4a3d1315390aca311913ba2 Mon Sep 17 00:00:00 2001
From: Connor Tsui <connor.tsui20@gmail.com>
Date: Thu, 4 Dec 2025 11:12:19 -0500
Subject: [PATCH 14/30] add commit parse to vortex

Signed-off-by: Connor Tsui <connor.tsui20@gmail.com>
---
 vortex-wasm/Cargo.toml                        |   9 +-
 vortex-wasm/src/bin/migrate_commits.rs        | 146 +++++++++++
 .../bin/{migrate_all.rs => migrate_data.rs}   |   6 +
 vortex-wasm/src/website/commit.rs             | 244 ++++++++++++++++++
 vortex-wasm/src/website/commit_id.rs          |   5 +-
 vortex-wasm/src/website/mod.rs                |   3 +-
 6 files changed, 409 insertions(+), 4 deletions(-)
 create mode 100644 vortex-wasm/src/bin/migrate_commits.rs
 rename vortex-wasm/src/bin/{migrate_all.rs => migrate_data.rs} (97%)
 create mode 100644 vortex-wasm/src/website/commit.rs

diff --git a/vortex-wasm/Cargo.toml b/vortex-wasm/Cargo.toml
index 30c50c9a6f3..3685235e173 100644
--- a/vortex-wasm/Cargo.toml
+++ b/vortex-wasm/Cargo.toml
@@ -73,8 +73,13 @@ path = "src/bin/test_s3_update.rs"
 required-features = ["native"]
 
 [[bin]]
-name = "migrate_all"
-path = "src/bin/migrate_all.rs"
+name = "migrate_data"
+path = "src/bin/migrate_data.rs"
+required-features = ["native"]
+
+[[bin]]
+name = "migrate_commits"
+path = "src/bin/migrate_commits.rs"
 required-features = ["native"]
 
 [lints]
diff --git a/vortex-wasm/src/bin/migrate_commits.rs b/vortex-wasm/src/bin/migrate_commits.rs
new file mode 100644
index 00000000000..9af43f24d50
--- /dev/null
+++ b/vortex-wasm/src/bin/migrate_commits.rs
@@ -0,0 +1,146 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: Copyright the Vortex contributors
+
+//! Binary to migrate a JSON array of [`CommitInfo`] objects to a Vortex file.
+//!
+//! # Usage
+//!
+//! ```bash
+//! cargo run -p vortex-wasm --bin migrate_commits -- <input.json> <output.vortex>
+//! ```
+
+// TODO(connor): We don't use the `TemporalArray` right now because it doesn't have easy interop yet
+// for the chrono `DateTime` type, and bringing in arrow for just this is too heavyweight.
+
+#![allow(clippy::expect_used, clippy::panic)]
+
+use std::env;
+use std::fs;
+
+use vortex::VortexSessionDefault;
+use vortex::array::IntoArray;
+use vortex::array::arrays::FixedSizeListArray;
+use vortex::array::arrays::PrimitiveArray;
+use vortex::array::arrays::StructArray;
+use vortex::array::arrays::VarBinArray;
+use vortex::array::validity::Validity;
+use vortex::buffer::Buffer;
+use vortex::compressor::CompactCompressor;
+use vortex::dtype::DType;
+use vortex::dtype::FieldNames;
+use vortex::dtype::Nullability;
+use vortex::file::WriteOptionsSessionExt;
+use vortex::file::WriteStrategyBuilder;
+use vortex::session::VortexSession;
+use vortex_wasm::website::commit::CommitInfo;
+
+#[tokio::main]
+async fn main() {
+    let session = VortexSession::default();
+
+    let args: Vec<String> = env::args().collect();
+    let input_path = args
+        .get(1)
+        .expect("Usage: migrate_commits <input_json> <output_file>");
+    let output_path = args
+        .get(2)
+        .map(String::as_str)
+        .expect("Usage: migrate_commits <input_json> <output_file>");
+
+    let contents = fs::read_to_string(input_path).expect("Failed to read file");
+    let commits: Vec<CommitInfo> = serde_json::from_str(&contents).expect("Failed to parse JSON");
+
+    let num_commits = commits.len();
+    println!("Parsed {num_commits} commits from JSON");
+
+    // Extract fields into columnar vectors.
+    let mut timestamps: Vec<i64> = Vec::with_capacity(num_commits);
+    let mut author_names: Vec<&str> = Vec::with_capacity(num_commits);
+    let mut author_emails: Vec<&str> = Vec::with_capacity(num_commits);
+    let mut messages: Vec<&str> = Vec::with_capacity(num_commits);
+    let mut commit_id_bytes: Vec<u8> = Vec::with_capacity(num_commits * 20);
+
+    for commit in &commits {
+        timestamps.push(commit.timestamp());
+        author_names.push(commit.author().name());
+        author_emails.push(commit.author().email());
+        messages.push(commit.message());
+        commit_id_bytes.extend_from_slice(&commit.commit_id().0);
+    }
+
+    // Build Vortex arrays.
+
+    // Timestamp array.
+    let timestamp_array = PrimitiveArray::new(Buffer::from(timestamps), Validity::NonNullable);
+
+    // Author struct array (nested).
+    let author_name_array = VarBinArray::from_iter(
+        author_names.iter().map(|s| Some(*s)),
+        DType::Utf8(Nullability::NonNullable),
+    );
+    let author_email_array = VarBinArray::from_iter(
+        author_emails.iter().map(|s| Some(*s)),
+        DType::Utf8(Nullability::NonNullable),
+    );
+    let author_array = StructArray::try_new(
+        FieldNames::from(["name", "email"]),
+        vec![
+            author_name_array.into_array(),
+            author_email_array.into_array(),
+        ],
+        num_commits,
+        Validity::NonNullable,
+    )
+    .expect("Failed to create author struct array");
+
+    // Message array.
+    let message_array = VarBinArray::from_iter(
+        messages.iter().map(|s| Some(*s)),
+        DType::Utf8(Nullability::NonNullable),
+    );
+
+    // Commit ID array (FixedSizeList<u8, 20>).
+    let commit_id_elements =
+        PrimitiveArray::new(Buffer::from(commit_id_bytes), Validity::NonNullable);
+    let commit_id_array = FixedSizeListArray::try_new(
+        commit_id_elements.into_array(),
+        20,
+        Validity::NonNullable,
+        num_commits,
+    )
+    .expect("Failed to create commit_id array");
+
+    // Outer struct array with field order: timestamp, author, message, commit_id.
+    let struct_array = StructArray::try_new(
+        FieldNames::from(["timestamp", "author", "message", "commit_id"]),
+        vec![
+            timestamp_array.into_array(),
+            author_array.into_array(),
+            message_array.into_array(),
+            commit_id_array.into_array(),
+        ],
+        num_commits,
+        Validity::NonNullable,
+    )
+    .expect("Failed to create struct array");
+
+    println!("Schema: {}", struct_array.dtype());
+
+    // Write to Vortex file with compression.
+    let file = tokio::fs::File::create(output_path)
+        .await
+        .expect("Failed to create output file");
+
+    session
+        .write_options()
+        .with_strategy(
+            WriteStrategyBuilder::new()
+                .with_compressor(CompactCompressor::default())
+                .build(),
+        )
+        .write(file, struct_array.to_array_stream())
+        .await
+        .expect("Failed to write Vortex file");
+
+    println!("Wrote {num_commits} commits to {output_path}");
+}
diff --git a/vortex-wasm/src/bin/migrate_all.rs b/vortex-wasm/src/bin/migrate_data.rs
similarity index 97%
rename from vortex-wasm/src/bin/migrate_all.rs
rename to vortex-wasm/src/bin/migrate_data.rs
index ccc1d26eb58..7740c06fb9f 100644
--- a/vortex-wasm/src/bin/migrate_all.rs
+++ b/vortex-wasm/src/bin/migrate_data.rs
@@ -2,6 +2,12 @@
 // SPDX-FileCopyrightText: Copyright the Vortex contributors
 
 //! Binary to migrate a JSON array of [`BenchmarkEntry`] objects to a Vortex file.
+//!
+//! # Usage
+//!
+//! ```bash
+//! cargo run -p vortex-wasm --bin migrate_data -- <input.json> <output.vortex>
+//! ```
 
 #![allow(clippy::expect_used, clippy::panic)]
 
diff --git a/vortex-wasm/src/website/commit.rs b/vortex-wasm/src/website/commit.rs
new file mode 100644
index 00000000000..4be39aef039
--- /dev/null
+++ b/vortex-wasm/src/website/commit.rs
@@ -0,0 +1,244 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: Copyright the Vortex contributors
+
+// TODO(connor): We don't use the `TemporalArray` right now because it doesn't have easy interop yet
+// for the chrono `DateTime` type, and bringing in arrow for just this is too heavyweight.
+
+use std::sync::Arc;
+
+use serde::Deserialize;
+use serde::Serialize;
+use vortex::dtype::DType;
+use vortex::dtype::FieldNames;
+use vortex::dtype::Nullability::NonNullable;
+use vortex::dtype::PType;
+use vortex::dtype::StructFields;
+use vortex::scalar::Scalar;
+use vortex_array::Array;
+use vortex_array::ToCanonical;
+use vortex_array::arrays::FixedSizeListArray;
+use vortex_array::arrays::PrimitiveArray;
+use vortex_array::arrays::StructArray;
+use vortex_error::VortexResult;
+use vortex_error::vortex_bail;
+
+use crate::website::commit_id::CommitId;
+
+#[derive(Debug, Clone, PartialEq, Eq, PartialOrd, Ord, Serialize, Deserialize)]
+pub struct Author {
+    name: String,
+    email: String,
+}
+
+impl Author {
+    /// Creates a new [`Author`].
+    pub fn new(name: String, email: String) -> Self {
+        Self { name, email }
+    }
+
+    /// Returns the author's name.
+    pub fn name(&self) -> &str {
+        &self.name
+    }
+
+    /// Returns the author's email.
+    pub fn email(&self) -> &str {
+        &self.email
+    }
+
+    /// Returns the [`DType`] for an [`Author`].
+    ///
+    /// The schema is:
+    /// - `name`: `Utf8`
+    /// - `email`: `Utf8`
+    pub fn dtype() -> DType {
+        DType::Struct(
+            StructFields::new(
+                FieldNames::from(["name", "email"]),
+                vec![DType::Utf8(NonNullable), DType::Utf8(NonNullable)],
+            ),
+            NonNullable,
+        )
+    }
+
+    /// Converts an [`Author`] to a [`Scalar`].
+    pub fn into_scalar(&self) -> Scalar {
+        Scalar::struct_(
+            Self::dtype(),
+            vec![
+                Scalar::utf8(self.name.as_str(), NonNullable),
+                Scalar::utf8(self.email.as_str(), NonNullable),
+            ],
+        )
+    }
+}
+
+/// Commit information including author, message, timestamp, and commit ID.
+///
+/// The field order determines the derived [`Ord`] implementation: timestamp first, then author,
+/// message, and finally commit_id.
+#[derive(Debug, Clone, PartialEq, Eq, PartialOrd, Ord, Serialize, Deserialize)]
+pub struct CommitInfo {
+    /// Unix timestamp in seconds.
+    timestamp: i64,
+    author: Author,
+    message: String,
+    commit_id: CommitId,
+}
+
+impl CommitInfo {
+    /// Creates a new [`CommitInfo`].
+    pub fn new(timestamp: i64, author: Author, message: String, commit_id: CommitId) -> Self {
+        Self {
+            timestamp,
+            author,
+            message,
+            commit_id,
+        }
+    }
+
+    /// Returns the commit timestamp as a Unix timestamp in seconds.
+    pub fn timestamp(&self) -> i64 {
+        self.timestamp
+    }
+
+    /// Returns the commit author.
+    pub fn author(&self) -> &Author {
+        &self.author
+    }
+
+    /// Returns the commit message.
+    pub fn message(&self) -> &str {
+        &self.message
+    }
+
+    /// Returns the commit ID.
+    pub fn commit_id(&self) -> &CommitId {
+        &self.commit_id
+    }
+
+    /// Returns the [`DType`] for a [`CommitInfo`].
+    ///
+    /// The schema is:
+    /// - `timestamp`: `i64` (Unix timestamp in seconds)
+    /// - `author`: Struct (name: Utf8, email: Utf8)
+    /// - `message`: `Utf8`
+    /// - `commit_id`: `FixedSizeList<u8, 20>` (20-byte binary SHA-1)
+    pub fn dtype() -> DType {
+        DType::Struct(
+            StructFields::new(
+                FieldNames::from(["timestamp", "author", "message", "commit_id"]),
+                vec![
+                    DType::Primitive(PType::I64, NonNullable),
+                    Author::dtype(),
+                    DType::Utf8(NonNullable),
+                    DType::FixedSizeList(
+                        Arc::new(DType::Primitive(PType::U8, NonNullable)),
+                        20,
+                        NonNullable,
+                    ),
+                ],
+            ),
+            NonNullable,
+        )
+    }
+
+    /// Converts a [`CommitInfo`] to a [`Scalar`].
+    pub fn into_scalar(&self) -> Scalar {
+        let u8_dtype = DType::Primitive(PType::U8, NonNullable);
+
+        // Convert the 20-byte commit_id to a FixedSizeList scalar.
+        let commit_id_bytes: Vec<Scalar> = self
+            .commit_id
+            .0
+            .iter()
+            .map(|&b| Scalar::primitive(b, NonNullable))
+            .collect();
+        let commit_id_scalar = Scalar::fixed_size_list(u8_dtype, commit_id_bytes, NonNullable);
+
+        Scalar::struct_(
+            Self::dtype(),
+            vec![
+                Scalar::primitive(self.timestamp, NonNullable),
+                self.author.into_scalar(),
+                Scalar::utf8(self.message.as_str(), NonNullable),
+                commit_id_scalar,
+            ],
+        )
+    }
+
+    /// Converts a Vortex array (expected to be a struct array) into a vector of [`CommitInfo`].
+    ///
+    /// The array must have the following schema:
+    /// - `timestamp`: `i64`
+    /// - `author`: Struct (name: Utf8, email: Utf8)
+    /// - `message`: `Utf8`
+    /// - `commit_id`: `FixedSizeList<u8, 20>`
+    pub fn vec_from_array(array: &dyn Array) -> VortexResult<Vec<Self>> {
+        let struct_array: StructArray = array.to_struct();
+        let len = struct_array.len();
+        let mut entries = Vec::with_capacity(len);
+
+        // Extract each field.
+        let timestamp_field = struct_array.field_by_name("timestamp")?;
+        let author_field = struct_array.field_by_name("author")?;
+        let message_field = struct_array.field_by_name("message")?;
+        let commit_id_field = struct_array.field_by_name("commit_id")?;
+
+        // Convert timestamp to primitive array.
+        let timestamp_prim: PrimitiveArray = timestamp_field.to_primitive();
+        let timestamps: &[i64] = timestamp_prim.as_slice();
+
+        // Convert author struct to its components.
+        let author_struct: StructArray = author_field.to_struct();
+        let author_name_field = author_struct.field_by_name("name")?;
+        let author_email_field = author_struct.field_by_name("email")?;
+        let author_name_vbv = author_name_field.to_varbinview();
+        let author_email_vbv = author_email_field.to_varbinview();
+
+        // Convert message to varbinview.
+        let message_vbv = message_field.to_varbinview();
+
+        // Convert commit_id to canonical fixed-size list and get the underlying bytes.
+        let commit_id_fsl: FixedSizeListArray = commit_id_field.to_fixed_size_list();
+        if commit_id_fsl.list_size() != 20 {
+            vortex_bail!(
+                "Expected commit_id to have list_size 20, got {}",
+                commit_id_fsl.list_size()
+            );
+        }
+        let commit_id_elements: PrimitiveArray = commit_id_fsl.elements().to_primitive();
+        let commit_id_bytes: &[u8] = commit_id_elements.as_slice();
+
+        // Build the entries.
+        for i in 0..len {
+            // Extract author fields.
+            let name = std::str::from_utf8(author_name_vbv.bytes_at(i).as_ref())
+                .map_err(|e| vortex_error::vortex_err!("Invalid UTF-8 in author name: {}", e))?
+                .to_string();
+            let email = std::str::from_utf8(author_email_vbv.bytes_at(i).as_ref())
+                .map_err(|e| vortex_error::vortex_err!("Invalid UTF-8 in author email: {}", e))?
+                .to_string();
+
+            // Extract message.
+            let message = std::str::from_utf8(message_vbv.bytes_at(i).as_ref())
+                .map_err(|e| vortex_error::vortex_err!("Invalid UTF-8 in message: {}", e))?
+                .to_string();
+
+            // Extract the 20-byte commit_id for this row.
+            let start = i * 20;
+            let end = start + 20;
+            let mut commit_id_arr = [0u8; 20];
+            commit_id_arr.copy_from_slice(&commit_id_bytes[start..end]);
+
+            entries.push(CommitInfo {
+                timestamp: timestamps[i],
+                author: Author::new(name, email),
+                message,
+                commit_id: CommitId(commit_id_arr),
+            });
+        }
+
+        Ok(entries)
+    }
+}
diff --git a/vortex-wasm/src/website/commit_id.rs b/vortex-wasm/src/website/commit_id.rs
index b6438b8d2ce..249dd953087 100644
--- a/vortex-wasm/src/website/commit_id.rs
+++ b/vortex-wasm/src/website/commit_id.rs
@@ -12,7 +12,10 @@ use serde::Deserialize;
 use serde::Serialize;
 
 /// The 20-byte binary SHA-1 Git commit ID.
-#[derive(Clone, PartialEq, Eq)]
+///
+/// Note that the ordering of commit IDs does not really mean anything, we just have it implemented
+/// for convenience.
+#[derive(Clone, PartialEq, Eq, PartialOrd, Ord)]
 pub struct CommitId(pub [u8; 20]);
 
 impl fmt::Display for CommitId {
diff --git a/vortex-wasm/src/website/mod.rs b/vortex-wasm/src/website/mod.rs
index 014044070a2..de60cd0facd 100644
--- a/vortex-wasm/src/website/mod.rs
+++ b/vortex-wasm/src/website/mod.rs
@@ -1,7 +1,8 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: Copyright the Vortex contributors
 
-mod commit_id;
+pub mod commit;
+pub mod commit_id;
 pub mod entry;
 pub mod read_s3;
 

From 1049b14d02d579f71a40f15eb9803f954570128f Mon Sep 17 00:00:00 2001
From: Connor Tsui <connor.tsui20@gmail.com>
Date: Thu, 4 Dec 2025 13:10:43 -0500
Subject: [PATCH 15/30] add chart type and rename to group_name

Signed-off-by: Connor Tsui <connor.tsui20@gmail.com>
---
 Cargo.lock                            |  4 ++++
 justfile                              | 21 ++++++++++++++++++++
 vortex-wasm/Cargo.toml                |  2 ++
 vortex-wasm/src/bin/migrate_data.rs   | 12 ++++++------
 vortex-wasm/src/bin/test_s3_read.rs   |  8 ++------
 vortex-wasm/src/bin/test_s3_update.rs |  6 +++---
 vortex-wasm/src/website/charts.rs     | 24 +++++++++++++++++++++++
 vortex-wasm/src/website/entry.rs      | 28 +++++++++++++--------------
 vortex-wasm/src/website/mod.rs        |  1 +
 vortex-wasm/src/website/read_s3.rs    | 19 ++++++++++++++++++
 10 files changed, 95 insertions(+), 30 deletions(-)
 create mode 100644 justfile
 create mode 100644 vortex-wasm/src/website/charts.rs

diff --git a/Cargo.lock b/Cargo.lock
index 665d20cc1b1..a206fbb58cd 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -3701,6 +3701,8 @@ dependencies = [
  "allocator-api2",
  "equivalent",
  "foldhash 0.2.0",
+ "serde",
+ "serde_core",
 ]
 
 [[package]]
@@ -9644,6 +9646,8 @@ version = "0.1.0"
 dependencies = [
  "async-fs",
  "console_error_panic_hook",
+ "futures",
+ "hashbrown 0.16.1",
  "hex",
  "reqwest",
  "serde",
diff --git a/justfile b/justfile
new file mode 100644
index 00000000000..468f6089596
--- /dev/null
+++ b/justfile
@@ -0,0 +1,21 @@
+data_input := "/Users/connor/spiral/hw25/output/transformed_benchmarks.json"
+data_output := "/Users/connor/spiral/vortex-data/vortex/vortex-wasm/data.vortex"
+commits_input := "/Users/connor/spiral/hw25/output/transformed_commits.json"
+commits_output := "/Users/connor/spiral/vortex-data/vortex/vortex-wasm/commits.vortex"
+
+# Migrate benchmark data from JSON to Vortex format.
+migrate-data:
+    cargo run -p vortex-wasm --bin migrate_data --release -- {{data_input}} {{data_output}}
+
+# Migrate commits from JSON to Vortex format.
+migrate-commits:
+    cargo run -p vortex-wasm --bin migrate_commits --release -- {{commits_input}} {{commits_output}}
+
+# Run both migrations.
+migrate-all: migrate-data migrate-commits
+
+browse file:
+    cargo run -p vortex-tui -- browse {{file}}
+
+build-wasm:
+    cargo build -p vortex-wasm --no-default-features --lib --target wasm32-unknown-unknown --release
diff --git a/vortex-wasm/Cargo.toml b/vortex-wasm/Cargo.toml
index 3685235e173..82cbdf990ce 100644
--- a/vortex-wasm/Cargo.toml
+++ b/vortex-wasm/Cargo.toml
@@ -31,6 +31,7 @@ native = [
 [dependencies]
 # Core dependencies for both WASM and native.
 console_error_panic_hook = "0.1"
+futures = { workspace = true }
 hex = { workspace = true }
 reqwest = { workspace = true }
 serde = { workspace = true, features = ["derive"] }
@@ -38,6 +39,7 @@ serde-wasm-bindgen = "0.6"
 vortex = { workspace = true }
 wasm-bindgen = "0.2"
 wasm-bindgen-futures = { workspace = true }
+hashbrown = { workspace = true, features = ["serde"] }
 
 # These are needed by binaries - accessed via vortex re-exports for library code.
 vortex-array = { workspace = true }
diff --git a/vortex-wasm/src/bin/migrate_data.rs b/vortex-wasm/src/bin/migrate_data.rs
index 7740c06fb9f..1eb5100183a 100644
--- a/vortex-wasm/src/bin/migrate_data.rs
+++ b/vortex-wasm/src/bin/migrate_data.rs
@@ -53,14 +53,14 @@ async fn main() {
 
     // Extract fields into columnar vectors.
     let mut commit_id_bytes: Vec<u8> = Vec::with_capacity(num_entries * 20);
-    let mut benchmark_groups: Vec<&str> = Vec::with_capacity(num_entries);
+    let mut group_names: Vec<&str> = Vec::with_capacity(num_entries);
     let mut chart_names: Vec<&str> = Vec::with_capacity(num_entries);
     let mut series_names: Vec<&str> = Vec::with_capacity(num_entries);
     let mut values: Vec<u64> = Vec::with_capacity(num_entries);
 
     for entry in &entries {
         commit_id_bytes.extend_from_slice(&entry.commit_id.0);
-        benchmark_groups.push(&entry.benchmark_group);
+        group_names.push(&entry.group_name);
         chart_names.push(&entry.chart_name);
         series_names.push(&entry.series_name);
         values.push(entry.value);
@@ -77,8 +77,8 @@ async fn main() {
     )
     .expect("Failed to create commit_id array");
 
-    let benchmark_group_array = VarBinArray::from_iter(
-        benchmark_groups.iter().map(|s| Some(*s)),
+    let group_name_array = VarBinArray::from_iter(
+        group_names.iter().map(|s| Some(*s)),
         DType::Utf8(Nullability::NonNullable),
     );
     let chart_name_array = VarBinArray::from_iter(
@@ -94,14 +94,14 @@ async fn main() {
     let struct_array = StructArray::try_new(
         FieldNames::from([
             "commit_id",
-            "benchmark_group",
+            "group_name",
             "chart_name",
             "series_name",
             "value",
         ]),
         vec![
             commit_id_array.into_array(),
-            benchmark_group_array.into_array(),
+            group_name_array.into_array(),
             chart_name_array.into_array(),
             series_name_array.into_array(),
             value_array.into_array(),
diff --git a/vortex-wasm/src/bin/test_s3_read.rs b/vortex-wasm/src/bin/test_s3_read.rs
index 64a44e3e592..738820eadbc 100644
--- a/vortex-wasm/src/bin/test_s3_read.rs
+++ b/vortex-wasm/src/bin/test_s3_read.rs
@@ -30,7 +30,7 @@ async fn async_main() {
     // Print header.
     println!(
         "{:<44} {:>15} {:>15} {:>15} {:>12}",
-        "commit_id", "benchmark_group", "chart_name", "series_name", "value"
+        "commit_id", "group_name", "chart_name", "series_name", "value"
     );
     println!("{}", "-".repeat(105));
 
@@ -42,11 +42,7 @@ async fn async_main() {
         if i < show_first || i >= entries.len() - show_last {
             println!(
                 "{} {:>15} {:>15} {:>15} {:>12}",
-                entry.commit_id,
-                entry.benchmark_group,
-                entry.chart_name,
-                entry.series_name,
-                entry.value
+                entry.commit_id, entry.group_name, entry.chart_name, entry.series_name, entry.value
             );
         } else if i == show_first {
             println!(
diff --git a/vortex-wasm/src/bin/test_s3_update.rs b/vortex-wasm/src/bin/test_s3_update.rs
index c462bf2394e..849c2dc0ab8 100644
--- a/vortex-wasm/src/bin/test_s3_update.rs
+++ b/vortex-wasm/src/bin/test_s3_update.rs
@@ -106,12 +106,12 @@ fn create_test_entry() -> Scalar {
     let u8_dtype = DType::Primitive(PType::U8, NonNullable);
 
     // Build the dtype to match the schema:
-    // {commit_id=fixed_size_list(u8)[20], benchmark_group=u32, chart_name=u32, series_name=u32, value=u64}
+    // {commit_id=fixed_size_list(u8)[20], group_name=u32, chart_name=u32, series_name=u32, value=u64}
     let dtype = DType::Struct(
         vortex::dtype::StructFields::new(
             FieldNames::from([
                 "commit_id",
-                "benchmark_group",
+                "group_name",
                 "chart_name",
                 "series_name",
                 "value",
@@ -138,7 +138,7 @@ fn create_test_entry() -> Scalar {
         dtype,
         vec![
             commit_id_scalar,
-            Scalar::primitive(2u32, NonNullable), // benchmark_group: random-access
+            Scalar::primitive(2u32, NonNullable), // group_name: random-access
             Scalar::primitive(2u32, NonNullable), // chart_name: random-access
             Scalar::primitive(3u32, NonNullable), // series_name: vortex-nvme
             Scalar::primitive(999999u64, NonNullable), // value: test value
diff --git a/vortex-wasm/src/website/charts.rs b/vortex-wasm/src/website/charts.rs
new file mode 100644
index 00000000000..ab4f142a8e4
--- /dev/null
+++ b/vortex-wasm/src/website/charts.rs
@@ -0,0 +1,24 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: Copyright the Vortex contributors
+
+use std::ops::Range;
+
+use serde::Deserialize;
+use serde::Serialize;
+use vortex::utils::aliases::hash_map::HashMap;
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct BenchmarkGroup<'a> {
+    group_name: &'a str,
+    #[serde(borrow)]
+    charts: HashMap<&'a str, ChartData<'a>>,
+}
+
+// TODO(connor): We should be able to use an `Option<NonZeroU64>` since our benchmarks should
+// basically never hit 0, but that is an optimization for another day.
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct ChartData<'a> {
+    commit_index_range: Range<usize>,
+    #[serde(borrow)]
+    series: HashMap<&'a str, Vec<Option<u64>>>,
+}
diff --git a/vortex-wasm/src/website/entry.rs b/vortex-wasm/src/website/entry.rs
index e8da217eabc..0ae55c998de 100644
--- a/vortex-wasm/src/website/entry.rs
+++ b/vortex-wasm/src/website/entry.rs
@@ -23,8 +23,6 @@ use vortex_error::vortex_bail;
 use crate::website::commit_id::CommitId;
 use crate::website::commit_id::PassthroughBuildHasher;
 
-// TODO(connor): Replace with a better `HashMap` to serialize to JavaScript.
-
 /// Maps [`CommitId`] to benchmark value.
 pub type CommitValueMap<'a> = HashMap<&'a CommitId, u64, PassthroughBuildHasher>;
 
@@ -41,7 +39,7 @@ pub type GroupedEntries<'a> = HashMap<&'a str, ChartMap<'a>>;
 #[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
 pub struct BenchmarkEntry {
     pub commit_id: CommitId,
-    pub benchmark_group: String,
+    pub group_name: String,
     pub chart_name: String,
     pub series_name: String,
     pub value: u64,
@@ -50,14 +48,14 @@ pub struct BenchmarkEntry {
 impl BenchmarkEntry {
     pub fn new(
         commit_id: CommitId,
-        benchmark_group: String,
+        group_name: String,
         chart_name: String,
         series_name: String,
         value: u64,
     ) -> Self {
         Self {
             commit_id,
-            benchmark_group,
+            group_name,
             chart_name,
             series_name,
             value,
@@ -68,7 +66,7 @@ impl BenchmarkEntry {
     ///
     /// The schema is:
     /// - `commit_id`: `FixedSizeList<u8, 20>` (20-byte binary SHA-1)
-    /// - `benchmark_group`: `Utf8`
+    /// - `group_name`: `Utf8`
     /// - `chart_name`: `Utf8`
     /// - `series_name`: `Utf8`
     /// - `value`: `u64`
@@ -77,7 +75,7 @@ impl BenchmarkEntry {
             StructFields::new(
                 FieldNames::from([
                     "commit_id",
-                    "benchmark_group",
+                    "group_name",
                     "chart_name",
                     "series_name",
                     "value",
@@ -115,7 +113,7 @@ impl BenchmarkEntry {
             BenchmarkEntry::dtype(),
             vec![
                 commit_id_scalar,
-                Scalar::utf8(self.benchmark_group.as_str(), NonNullable),
+                Scalar::utf8(self.group_name.as_str(), NonNullable),
                 Scalar::utf8(self.chart_name.as_str(), NonNullable),
                 Scalar::utf8(self.series_name.as_str(), NonNullable),
                 Scalar::primitive(self.value, NonNullable),
@@ -127,7 +125,7 @@ impl BenchmarkEntry {
     ///
     /// The array must have the following schema:
     /// - `commit_id`: FixedSizeList<u8, 20>
-    /// - `benchmark_group`: Utf8
+    /// - `group_name`: Utf8
     /// - `chart_name`: Utf8
     /// - `series_name`: Utf8
     /// - `value`: u64
@@ -140,7 +138,7 @@ impl BenchmarkEntry {
 
         // Extract each field.
         let commit_id_field = struct_array.field_by_name("commit_id")?;
-        let benchmark_group_field = struct_array.field_by_name("benchmark_group")?;
+        let group_name_field = struct_array.field_by_name("group_name")?;
         let chart_name_field = struct_array.field_by_name("chart_name")?;
         let series_name_field = struct_array.field_by_name("series_name")?;
         let value_field = struct_array.field_by_name("value")?;
@@ -159,7 +157,7 @@ impl BenchmarkEntry {
         let commit_id_bytes: &[u8] = commit_id_elements.as_slice();
 
         // Convert string fields to canonical varbinview arrays.
-        let benchmark_group_vbv = benchmark_group_field.to_varbinview();
+        let group_name_vbv = group_name_field.to_varbinview();
         let chart_name_vbv = chart_name_field.to_varbinview();
         let series_name_vbv = series_name_field.to_varbinview();
 
@@ -176,8 +174,8 @@ impl BenchmarkEntry {
             commit_id_arr.copy_from_slice(&commit_id_bytes[start..end]);
 
             // Read strings using bytes_at() and convert to String.
-            let benchmark_group = std::str::from_utf8(benchmark_group_vbv.bytes_at(i).as_ref())
-                .map_err(|e| vortex_error::vortex_err!("Invalid UTF-8 in benchmark_group: {}", e))?
+            let group_name = std::str::from_utf8(group_name_vbv.bytes_at(i).as_ref())
+                .map_err(|e| vortex_error::vortex_err!("Invalid UTF-8 in group_name: {}", e))?
                 .to_string();
             let chart_name = std::str::from_utf8(chart_name_vbv.bytes_at(i).as_ref())
                 .map_err(|e| vortex_error::vortex_err!("Invalid UTF-8 in chart_name: {}", e))?
@@ -188,7 +186,7 @@ impl BenchmarkEntry {
 
             entries.push(BenchmarkEntry {
                 commit_id: CommitId(commit_id_arr),
-                benchmark_group,
+                group_name,
                 chart_name,
                 series_name,
                 value: values[i],
@@ -203,7 +201,7 @@ impl BenchmarkEntry {
         let mut result: GroupedEntries<'_> = HashMap::new();
         for entry in entries {
             result
-                .entry(entry.benchmark_group.as_str())
+                .entry(entry.group_name.as_str())
                 .or_default()
                 .entry(entry.chart_name.as_str())
                 .or_default()
diff --git a/vortex-wasm/src/website/mod.rs b/vortex-wasm/src/website/mod.rs
index de60cd0facd..927c478bc01 100644
--- a/vortex-wasm/src/website/mod.rs
+++ b/vortex-wasm/src/website/mod.rs
@@ -1,6 +1,7 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: Copyright the Vortex contributors
 
+pub mod charts;
 pub mod commit;
 pub mod commit_id;
 pub mod entry;
diff --git a/vortex-wasm/src/website/read_s3.rs b/vortex-wasm/src/website/read_s3.rs
index 1d1abb5ff44..2cd0c88a3f9 100644
--- a/vortex-wasm/src/website/read_s3.rs
+++ b/vortex-wasm/src/website/read_s3.rs
@@ -10,8 +10,10 @@ use vortex::error::vortex_err;
 use vortex::file::OpenOptionsSessionExt;
 use vortex::session::VortexSession;
 use vortex_array::ArrayRef;
+use wasm_bindgen::JsValue;
 
 use super::entry::BenchmarkEntry;
+use crate::website::commit::CommitInfo;
 
 /// Base URL for the S3 bucket containing benchmark data.
 const S3_BASE_URL: &str = "https://vortex-benchmark-results-database.s3.amazonaws.com";
@@ -89,3 +91,20 @@ pub async fn read_benchmark_entries(
     let array = read_s3_array(session, key).await?;
     BenchmarkEntry::vec_from_array(&array)
 }
+
+pub async fn get_benchmark_data(
+    session: &VortexSession,
+    commits_key: &str,
+    data_key: &str,
+) -> VortexResult<JsValue> {
+    // let (data_array, commits_array) = futures::try_join!(
+    //     read_s3_array(session, data_key),
+    //     read_s3_array(session, commits_key)
+    // )?;
+
+    // let data = BenchmarkEntry::vec_from_array(&data_array)?;
+    // let mut commits = CommitInfo::vec_from_array(&commits_array)?;
+    // commits.sort();
+
+    todo!()
+}

From 5bf6d020957a2747ca8afc5d0bf45b2cf2ff14d3 Mon Sep 17 00:00:00 2001
From: Connor Tsui <connor.tsui20@gmail.com>
Date: Thu, 4 Dec 2025 14:04:33 -0500
Subject: [PATCH 16/30] add processing of all data

Signed-off-by: Connor Tsui <connor.tsui20@gmail.com>
---
 vortex-wasm/src/website/charts.rs  | 61 ++++++++++++++++++++++++++----
 vortex-wasm/src/website/read_s3.rs | 22 +++++++----
 2 files changed, 67 insertions(+), 16 deletions(-)

diff --git a/vortex-wasm/src/website/charts.rs b/vortex-wasm/src/website/charts.rs
index ab4f142a8e4..e683242e76d 100644
--- a/vortex-wasm/src/website/charts.rs
+++ b/vortex-wasm/src/website/charts.rs
@@ -1,24 +1,69 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: Copyright the Vortex contributors
 
-use std::ops::Range;
-
 use serde::Deserialize;
 use serde::Serialize;
 use vortex::utils::aliases::hash_map::HashMap;
 
+use crate::website::commit::CommitInfo;
+use crate::website::entry::BenchmarkEntry;
+use crate::website::entry::CommitValueMap;
+
+type Benchmarks<'a> = HashMap<&'a str, BenchmarkGroupData<'a>>;
+
+// TODO(connor): We should be able to use an `Option<NonZeroU64>` since our benchmarks should
+// basically never hit 0, but that is an optimization for another day.
+type AlignedSeries<'a> = HashMap<&'a str, Vec<Option<u64>>>;
+
 #[derive(Debug, Clone, Serialize, Deserialize)]
-pub struct BenchmarkGroup<'a> {
-    group_name: &'a str,
+pub struct BenchmarkGroupData<'a> {
+    /// The name of a chart and its associated data.
     #[serde(borrow)]
     charts: HashMap<&'a str, ChartData<'a>>,
 }
 
-// TODO(connor): We should be able to use an `Option<NonZeroU64>` since our benchmarks should
-// basically never hit 0, but that is an optimization for another day.
 #[derive(Debug, Clone, Serialize, Deserialize)]
 pub struct ChartData<'a> {
-    commit_index_range: Range<usize>,
+    /// The name of a series and its associated data.
     #[serde(borrow)]
-    series: HashMap<&'a str, Vec<Option<u64>>>,
+    aligned_series: AlignedSeries<'a>,
+}
+
+pub fn process_benchmarks<'a>(
+    entries: &'a [BenchmarkEntry],
+    sorted_commits: &[CommitInfo],
+) -> Benchmarks<'a> {
+    assert!(sorted_commits.is_sorted());
+
+    let grouped_entries = BenchmarkEntry::group(entries);
+
+    let mut benchmarks = HashMap::with_capacity(grouped_entries.keys().len());
+    for (group_name, group_data) in grouped_entries {
+        let mut charts = HashMap::with_capacity(group_data.keys().len());
+        for (chart_name, chart_data) in group_data {
+            let mut aligned_series = HashMap::with_capacity(chart_data.keys().len());
+            for (series_name, series_data) in chart_data {
+                let aligned_series_data = create_aligned_series_data(series_data, sorted_commits);
+                aligned_series.insert(series_name, aligned_series_data);
+            }
+
+            let chart_data = ChartData { aligned_series };
+            charts.insert(chart_name, chart_data);
+        }
+
+        let benchmark_group_data = BenchmarkGroupData { charts };
+        benchmarks.insert(group_name, benchmark_group_data);
+    }
+
+    benchmarks
+}
+
+fn create_aligned_series_data(
+    commits_and_values: CommitValueMap<'_>,
+    sorted_commits: &[CommitInfo],
+) -> Vec<Option<u64>> {
+    sorted_commits
+        .iter()
+        .map(|commit_info| commits_and_values.get(commit_info.commit_id()).copied())
+        .collect()
 }
diff --git a/vortex-wasm/src/website/read_s3.rs b/vortex-wasm/src/website/read_s3.rs
index 2cd0c88a3f9..d685cbebed2 100644
--- a/vortex-wasm/src/website/read_s3.rs
+++ b/vortex-wasm/src/website/read_s3.rs
@@ -13,6 +13,7 @@ use vortex_array::ArrayRef;
 use wasm_bindgen::JsValue;
 
 use super::entry::BenchmarkEntry;
+use crate::website::charts::process_benchmarks;
 use crate::website::commit::CommitInfo;
 
 /// Base URL for the S3 bucket containing benchmark data.
@@ -97,14 +98,19 @@ pub async fn get_benchmark_data(
     commits_key: &str,
     data_key: &str,
 ) -> VortexResult<JsValue> {
-    // let (data_array, commits_array) = futures::try_join!(
-    //     read_s3_array(session, data_key),
-    //     read_s3_array(session, commits_key)
-    // )?;
+    let (data_array, commits_array) = futures::try_join!(
+        read_s3_array(session, data_key),
+        read_s3_array(session, commits_key)
+    )?;
 
-    // let data = BenchmarkEntry::vec_from_array(&data_array)?;
-    // let mut commits = CommitInfo::vec_from_array(&commits_array)?;
-    // commits.sort();
+    let data = BenchmarkEntry::vec_from_array(&data_array)?;
+    let mut commits = CommitInfo::vec_from_array(&commits_array)?;
+    commits.sort_unstable();
 
-    todo!()
+    let benchmarks = process_benchmarks(&data, &commits);
+
+    let js_value = serde_wasm_bindgen::to_value(&benchmarks)
+        .map_err(|e| vortex_err!("Something happened during serialization: {e}"))?;
+
+    Ok(js_value)
 }

From 669e24aabb78ff0a44a4f12db8e4390696995be7 Mon Sep 17 00:00:00 2001
From: Connor Tsui <connor.tsui20@gmail.com>
Date: Thu, 4 Dec 2025 14:50:52 -0500
Subject: [PATCH 17/30] first draft everything

Signed-off-by: Connor Tsui <connor.tsui20@gmail.com>
---
 justfile                           |   4 +-
 vortex-wasm/src/lib.rs             |  37 +++++++-
 vortex-wasm/src/website/charts.rs  |  71 ++++++++++++++-
 vortex-wasm/src/website/read_s3.rs |  37 +++++++-
 vortex-wasm/wasm-test.js           | 134 ++++++++++++++---------------
 5 files changed, 201 insertions(+), 82 deletions(-)

diff --git a/justfile b/justfile
index 468f6089596..dd751b5254b 100644
--- a/justfile
+++ b/justfile
@@ -17,5 +17,5 @@ migrate-all: migrate-data migrate-commits
 browse file:
     cargo run -p vortex-tui -- browse {{file}}
 
-build-wasm:
-    cargo build -p vortex-wasm --no-default-features --lib --target wasm32-unknown-unknown --release
+build-wasm-website:
+    wasm-pack build vortex-wasm --target web --no-default-features
diff --git a/vortex-wasm/src/lib.rs b/vortex-wasm/src/lib.rs
index b486052839e..b9f0231df63 100644
--- a/vortex-wasm/src/lib.rs
+++ b/vortex-wasm/src/lib.rs
@@ -17,9 +17,14 @@ mod wasm_bindings {
     use vortex::session::VortexSession;
     use wasm_bindgen::prelude::*;
 
+    use crate::website::read_s3::get_benchmark_data;
     use crate::website::read_s3::read_benchmark_entries;
 
-    const KEY: &str = "test/random_access.vortex";
+    const DATA_KEY: &str = "data.vortex";
+    const COMMITS_KEY: &str = "commits.vortex";
+
+    // Legacy key for old random_access data format.
+    const LEGACY_KEY: &str = "random_access.vortex";
 
     /// Helper macro for logging to browser console.
     macro_rules! log {
@@ -54,7 +59,7 @@ mod wasm_bindings {
         // Create a session configured with the WASM runtime.
         let session = VortexSession::default().with_handle(WasmRuntime::handle());
 
-        let entries = read_benchmark_entries(&session, KEY)
+        let entries = read_benchmark_entries(&session, LEGACY_KEY)
             .await
             .map_err(|e| JsValue::from_str(&format!("Failed to read benchmark entries: {}", e)))?;
 
@@ -76,6 +81,34 @@ mod wasm_bindings {
             .map_err(|e| JsValue::from_str(&format!("Failed to serialize: {}", e)))
     }
 
+    /// Load all benchmark data from S3.
+    ///
+    /// This function fetches the commits and benchmark data Vortex files from S3, parses them,
+    /// aligns the data to commits, and returns a structured response.
+    ///
+    /// # Returns
+    ///
+    /// A JavaScript object with:
+    /// - `benchmarks`: Nested object with group_name → charts → chart_name → aligned_series → series_name → values
+    /// - `commits`: Array of commit objects with timestamp, author, message, and commit_id
+    ///
+    /// Values are in nanoseconds (u64). Convert to milliseconds in JavaScript by dividing by
+    /// 1_000_000.
+    #[wasm_bindgen]
+    pub async fn load_benchmark_data() -> Result<JsValue, JsValue> {
+        log!("Loading benchmark data...");
+
+        let session = VortexSession::default().with_handle(WasmRuntime::handle());
+
+        let result = get_benchmark_data(&session, COMMITS_KEY, DATA_KEY)
+            .await
+            .map_err(|e| JsValue::from_str(&format!("Failed to load benchmark data: {}", e)))?;
+
+        log!("Benchmark data loaded successfully");
+
+        Ok(result)
+    }
+
     /// Initialize the WASM module.
     #[wasm_bindgen(start)]
     pub fn init() {
diff --git a/vortex-wasm/src/website/charts.rs b/vortex-wasm/src/website/charts.rs
index e683242e76d..4f3de518694 100644
--- a/vortex-wasm/src/website/charts.rs
+++ b/vortex-wasm/src/website/charts.rs
@@ -4,12 +4,24 @@
 use serde::Deserialize;
 use serde::Serialize;
 use vortex::utils::aliases::hash_map::HashMap;
+use vortex_error::VortexResult;
+use vortex_error::vortex_bail;
 
 use crate::website::commit::CommitInfo;
 use crate::website::entry::BenchmarkEntry;
 use crate::website::entry::CommitValueMap;
 
-type Benchmarks<'a> = HashMap<&'a str, BenchmarkGroupData<'a>>;
+/// A map of group names to their benchmark data.
+pub type Benchmarks<'a> = HashMap<&'a str, BenchmarkGroupData<'a>>;
+
+/// The complete response containing benchmarks and commit metadata.
+#[derive(Debug, Clone, Serialize)]
+pub struct BenchmarkResponse<'a> {
+    /// Benchmarks grouped by group name, chart name, and series name.
+    pub benchmarks: Benchmarks<'a>,
+    /// Sorted list of commits (by timestamp). Owned to allow serialization.
+    pub commits: Vec<CommitInfo>,
+}
 
 // TODO(connor): We should be able to use an `Option<NonZeroU64>` since our benchmarks should
 // basically never hit 0, but that is an optimization for another day.
@@ -29,21 +41,72 @@ pub struct ChartData<'a> {
     aligned_series: AlignedSeries<'a>,
 }
 
+/// Processes benchmark entries into a structured format aligned with commits.
+///
+/// # Errors
+///
+/// Returns an error if:
+/// - Commits are not sorted by timestamp.
+/// - Any group, chart, or series name is empty.
+/// - Any series has no data points (all nulls).
+/// - Series lengths don't match the number of commits.
 pub fn process_benchmarks<'a>(
     entries: &'a [BenchmarkEntry],
     sorted_commits: &[CommitInfo],
-) -> Benchmarks<'a> {
-    assert!(sorted_commits.is_sorted());
+) -> VortexResult<Benchmarks<'a>> {
+    if !sorted_commits.is_sorted() {
+        vortex_bail!("Commits must be sorted by timestamp");
+    }
 
+    let num_commits = sorted_commits.len();
     let grouped_entries = BenchmarkEntry::group(entries);
 
     let mut benchmarks = HashMap::with_capacity(grouped_entries.keys().len());
     for (group_name, group_data) in grouped_entries {
+        if group_name.is_empty() {
+            vortex_bail!("Group name cannot be empty");
+        }
+
         let mut charts = HashMap::with_capacity(group_data.keys().len());
         for (chart_name, chart_data) in group_data {
+            if chart_name.is_empty() {
+                vortex_bail!("Chart name cannot be empty in group '{}'", group_name);
+            }
+
             let mut aligned_series = HashMap::with_capacity(chart_data.keys().len());
             for (series_name, series_data) in chart_data {
+                if series_name.is_empty() {
+                    vortex_bail!(
+                        "Series name cannot be empty in group '{}', chart '{}'",
+                        group_name,
+                        chart_name
+                    );
+                }
+
                 let aligned_series_data = create_aligned_series_data(series_data, sorted_commits);
+
+                // Validate series length matches commits.
+                if aligned_series_data.len() != num_commits {
+                    vortex_bail!(
+                        "Series '{}' in group '{}', chart '{}' has {} elements, expected {} (number of commits)",
+                        series_name,
+                        group_name,
+                        chart_name,
+                        aligned_series_data.len(),
+                        num_commits
+                    );
+                }
+
+                // Validate series has at least one non-null value.
+                if !aligned_series_data.iter().any(|v| v.is_some()) {
+                    vortex_bail!(
+                        "Series '{}' in group '{}', chart '{}' has no data points (all nulls)",
+                        series_name,
+                        group_name,
+                        chart_name
+                    );
+                }
+
                 aligned_series.insert(series_name, aligned_series_data);
             }
 
@@ -55,7 +118,7 @@ pub fn process_benchmarks<'a>(
         benchmarks.insert(group_name, benchmark_group_data);
     }
 
-    benchmarks
+    Ok(benchmarks)
 }
 
 fn create_aligned_series_data(
diff --git a/vortex-wasm/src/website/read_s3.rs b/vortex-wasm/src/website/read_s3.rs
index d685cbebed2..e4199141b44 100644
--- a/vortex-wasm/src/website/read_s3.rs
+++ b/vortex-wasm/src/website/read_s3.rs
@@ -13,11 +13,12 @@ use vortex_array::ArrayRef;
 use wasm_bindgen::JsValue;
 
 use super::entry::BenchmarkEntry;
+use crate::website::charts::BenchmarkResponse;
 use crate::website::charts::process_benchmarks;
 use crate::website::commit::CommitInfo;
 
 /// Base URL for the S3 bucket containing benchmark data.
-const S3_BASE_URL: &str = "https://vortex-benchmark-results-database.s3.amazonaws.com";
+const S3_BASE_URL: &str = "https://vortex-benchmark-results-database-test.s3.amazonaws.com";
 
 /// Reads a Vortex array from an S3 object.
 ///
@@ -93,6 +94,29 @@ pub async fn read_benchmark_entries(
     BenchmarkEntry::vec_from_array(&array)
 }
 
+/// Fetches benchmark data and commit metadata from S3 and returns them as a JavaScript object.
+///
+/// The returned object has the structure:
+/// ```javascript
+/// {
+///   benchmarks: { [group_name]: { charts: { [chart_name]: { aligned_series: { [series_name]: [...] } } } } },
+///   commits: [{ timestamp, author: { name, email }, message, commit_id }, ...]
+/// }
+/// ```
+///
+/// # Arguments
+///
+/// * `session` - The Vortex session for reading files.
+/// * `commits_key` - S3 key for the commits Vortex file.
+/// * `data_key` - S3 key for the benchmark data Vortex file.
+///
+/// # Errors
+///
+/// Returns an error if:
+/// - Either S3 fetch fails.
+/// - The files are not valid Vortex files.
+/// - The schemas don't match expected formats.
+/// - Validation fails (empty names, no data points, mismatched lengths).
 pub async fn get_benchmark_data(
     session: &VortexSession,
     commits_key: &str,
@@ -107,10 +131,15 @@ pub async fn get_benchmark_data(
     let mut commits = CommitInfo::vec_from_array(&commits_array)?;
     commits.sort_unstable();
 
-    let benchmarks = process_benchmarks(&data, &commits);
+    let benchmarks = process_benchmarks(&data, &commits)?;
+
+    let response = BenchmarkResponse {
+        benchmarks,
+        commits,
+    };
 
-    let js_value = serde_wasm_bindgen::to_value(&benchmarks)
-        .map_err(|e| vortex_err!("Something happened during serialization: {e}"))?;
+    let js_value = serde_wasm_bindgen::to_value(&response)
+        .map_err(|e| vortex_err!("Failed to serialize benchmark response: {e}"))?;
 
     Ok(js_value)
 }
diff --git a/vortex-wasm/wasm-test.js b/vortex-wasm/wasm-test.js
index 0822e4762f7..12114a05459 100644
--- a/vortex-wasm/wasm-test.js
+++ b/vortex-wasm/wasm-test.js
@@ -9,7 +9,13 @@
 const CHART_CONFIG = {
     // Data sources.
     wasmModulePath: "./pkg/vortex_wasm.js",
-    commitsUrl: "https://vortex-benchmark-results-database.s3.amazonaws.com/commits.json",
+
+    // GitHub repository for constructing commit URLs.
+    githubRepo: "https://github.com/spiraldb/vortex",
+
+    // Which group and chart to display (for now, hardcoded to random-access).
+    targetGroup: "random-access",
+    targetChart: "random-access",
 
     // Series configuration.
     seriesNames: ["vortex-nvme", "parquet-nvme", "lance-nvme"],
@@ -83,49 +89,16 @@ async function loadWasmModule() {
 }
 
 /**
- * Loads commit metadata from S3 and processes it into a sorted array.
- *
- * @returns {Promise<Array>} Array of commit objects sorted by timestamp.
- */
-async function loadCommitData() {
-    setStatus("Loading commit metadata from S3...");
-    const response = await fetch(CHART_CONFIG.commitsUrl);
-    const text = await response.text();
-
-    // Parse JSONL format (one JSON object per line).
-    const commitsData = {};
-    for (const line of text.split("\n")) {
-        const trimmed = line.trim();
-        if (trimmed.length > 0) {
-            try {
-                const commit = JSON.parse(trimmed);
-                commitsData[commit.id] = commit;
-            } catch (e) {
-                console.warn("Failed to parse commit line:", e);
-            }
-        }
-    }
-
-    // Sort by timestamp and add sorted indices.
-    const commits = Object.values(commitsData)
-        .sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp))
-        .map((commit, index) => ({ ...commit, sortedIndex: index }));
-
-    console.log(`Loaded ${commits.length} commits`);
-    return commits;
-}
-
-/**
- * Loads benchmark data from WASM.
+ * Loads all benchmark data from WASM (benchmarks + commits).
  *
  * @param {Object} wasm - The WASM module.
- * @returns {Promise<Array>} Array of benchmark entries.
+ * @returns {Promise<Object>} Object with benchmarks and commits.
  */
 async function loadBenchmarkData(wasm) {
-    setStatus("Loading benchmark data from Vortex file via WASM...");
-    const entries = await wasm.load_random_access_data();
-    console.log(`Loaded ${entries.length} benchmark entries`);
-    return entries;
+    setStatus("Loading benchmark data from Vortex files via WASM...");
+    const data = await wasm.load_benchmark_data();
+    console.log(`Loaded benchmark data with ${data.commits.length} commits`);
+    return data;
 }
 
 // ============================================================================
@@ -133,35 +106,51 @@ async function loadBenchmarkData(wasm) {
 // ============================================================================
 
 /**
- * Processes benchmark entries into chart-ready format.
+ * Processes benchmark data into chart-ready format.
  *
- * @param {Array} entries - Benchmark entries.
- * @param {Array} commits - Commit metadata.
+ * @param {Object} data - The data object from WASM with benchmarks and commits.
  * @returns {Object} Object containing seriesData and chartCommits.
  */
-function processChartData(entries, commits) {
-    const commitIndexMap = new Map(commits.map(c => [c.id, c.sortedIndex]));
-    const seriesData = new Map();
+function processChartData(data) {
+    const { benchmarks, commits } = data;
 
-    // Initialize empty arrays for each series.
-    for (const name of CHART_CONFIG.seriesNames) {
-        seriesData.set(name, new Array(commits.length).fill(null));
+    // Get the target group and chart.
+    const group = benchmarks[CHART_CONFIG.targetGroup];
+    if (!group) {
+        throw new Error(`Group '${CHART_CONFIG.targetGroup}' not found in benchmark data`);
     }
 
-    // Populate with data.
-    let entriesAligned = 0;
-    for (const entry of entries) {
-        const commitIndex = commitIndexMap.get(entry.commit_id);
-        if (commitIndex !== undefined) {
-            const series = seriesData.get(entry.series_name);
-            if (series) {
-                series[commitIndex] = { value: entry.value_ms };
-                entriesAligned++;
-            }
-        }
+    const chart = group.charts[CHART_CONFIG.targetChart];
+    if (!chart) {
+        throw new Error(`Chart '${CHART_CONFIG.targetChart}' not found in group '${CHART_CONFIG.targetGroup}'`);
     }
 
-    console.log(`Aligned ${entriesAligned}/${entries.length} entries to commits`);
+    const alignedSeries = chart.aligned_series;
+
+    // Convert commits to chart-friendly format with URLs and short IDs.
+    const processedCommits = commits.map((commit, index) => ({
+        ...commit,
+        // Use commit_id for display (first 7 chars).
+        id: commit.commit_id,
+        // Construct GitHub URL.
+        url: `${CHART_CONFIG.githubRepo}/commit/${commit.commit_id}`,
+        // Keep original index for reference.
+        sortedIndex: index,
+    }));
+
+    // Convert series data from nanoseconds to milliseconds.
+    const seriesData = new Map();
+    for (const name of CHART_CONFIG.seriesNames) {
+        const rawData = alignedSeries[name];
+        if (rawData) {
+            // Convert nanoseconds to milliseconds, preserving nulls.
+            const msData = rawData.map(v => v !== null ? { value: v / 1_000_000 } : null);
+            seriesData.set(name, msData);
+        } else {
+            // Series not found, fill with nulls.
+            seriesData.set(name, new Array(commits.length).fill(null));
+        }
+    }
 
     // Find the range of data (first and last non-null indices).
     let firstDataIndex = commits.length;
@@ -178,14 +167,16 @@ function processChartData(entries, commits) {
     // Slice to show only the range with data.
     const startIndex = Math.max(0, firstDataIndex);
     const endIndex = lastDataIndex + 1;
-    const chartCommits = commits.slice(startIndex, endIndex);
+    const chartCommits = processedCommits.slice(startIndex, endIndex);
     const slicedSeriesData = new Map();
 
     for (const [name, data] of seriesData.entries()) {
         slicedSeriesData.set(name, data.slice(startIndex, endIndex));
     }
 
-    return { seriesData: slicedSeriesData, chartCommits, entriesAligned };
+    console.log(`Processed ${commits.length} commits, showing range ${startIndex}-${endIndex}`);
+
+    return { seriesData: slicedSeriesData, chartCommits };
 }
 
 /**
@@ -357,9 +348,13 @@ function getTooltipFooter(tooltipItems, chartCommits) {
     if (tooltipItems.length === 0) return [];
     const commit = chartCommits[tooltipItems[0].dataIndex];
     if (!commit) return [];
+
+    // Handle timestamp - it's Unix seconds from Rust.
+    const date = new Date(commit.timestamp * 1000).toLocaleDateString();
+
     return [
         commit.message.split("\n")[0].slice(0, 60),
-        `${commit.author.name} - ${new Date(commit.timestamp).toLocaleDateString()}`
+        `${commit.author.name} - ${date}`
     ];
 }
 
@@ -718,13 +713,12 @@ function initializeTimelineControls(chartInstance, chartCommits) {
  */
 async function main() {
     try {
-        // Load data.
+        // Load data from WASM (benchmarks + commits in one call).
         const wasm = await loadWasmModule();
-        const commits = await loadCommitData();
-        const entries = await loadBenchmarkData(wasm);
+        const data = await loadBenchmarkData(wasm);
 
-        // Process data.
-        const { seriesData, chartCommits, entriesAligned } = processChartData(entries, commits);
+        // Process data for the target group/chart.
+        const { seriesData, chartCommits } = processChartData(data);
         const summary = calculateSummary(seriesData);
 
         // Render UI.
@@ -735,7 +729,7 @@ async function main() {
         // Set up collapsible behavior.
         setupCollapsibleBenchmarks();
 
-        setStatus(`Loaded ${entries.length} entries, aligned ${entriesAligned} to ${commits.length} commits`, "success");
+        setStatus(`Loaded ${data.commits.length} commits, showing ${chartCommits.length} with data`, "success");
 
     } catch (error) {
         console.error("Error:", error);

From 4fcb500d15a23eeaef2a969fc5cb5ee5f55dd1f3 Mon Sep 17 00:00:00 2001
From: Connor Tsui <connor.tsui20@gmail.com>
Date: Thu, 4 Dec 2025 15:25:35 -0500
Subject: [PATCH 18/30] working now but slow

Signed-off-by: Connor Tsui <connor.tsui20@gmail.com>
---
 vortex-wasm/src/website/charts.rs  | 87 ++++++++++++++++++++++++++----
 vortex-wasm/src/website/read_s3.rs | 42 ++++++++++++++-
 vortex-wasm/wasm-test.js           | 39 +++++++++-----
 3 files changed, 144 insertions(+), 24 deletions(-)

diff --git a/vortex-wasm/src/website/charts.rs b/vortex-wasm/src/website/charts.rs
index 4f3de518694..8bfd5f754b8 100644
--- a/vortex-wasm/src/website/charts.rs
+++ b/vortex-wasm/src/website/charts.rs
@@ -11,6 +11,21 @@ use crate::website::commit::CommitInfo;
 use crate::website::entry::BenchmarkEntry;
 use crate::website::entry::CommitValueMap;
 
+/// Log to the browser console (WASM) or stderr (native).
+#[cfg(target_arch = "wasm32")]
+macro_rules! log {
+    ($($t:tt)*) => {
+        web_sys::console::log_1(&format!($($t)*).into());
+    }
+}
+
+#[cfg(not(target_arch = "wasm32"))]
+macro_rules! log {
+    ($($t:tt)*) => {
+        eprintln!($($t)*);
+    }
+}
+
 /// A map of group names to their benchmark data.
 pub type Benchmarks<'a> = HashMap<&'a str, BenchmarkGroupData<'a>>;
 
@@ -43,17 +58,24 @@ pub struct ChartData<'a> {
 
 /// Processes benchmark entries into a structured format aligned with commits.
 ///
+/// Series, charts, and groups with no data are automatically pruned from the result.
+///
 /// # Errors
 ///
 /// Returns an error if:
 /// - Commits are not sorted by timestamp.
 /// - Any group, chart, or series name is empty.
-/// - Any series has no data points (all nulls).
-/// - Series lengths don't match the number of commits.
+/// - Series lengths don't match the number of commits (internal error).
 pub fn process_benchmarks<'a>(
     entries: &'a [BenchmarkEntry],
     sorted_commits: &[CommitInfo],
 ) -> VortexResult<Benchmarks<'a>> {
+    log!(
+        "[process_benchmarks] Starting with {} entries, {} commits",
+        entries.len(),
+        sorted_commits.len()
+    );
+
     if !sorted_commits.is_sorted() {
         vortex_bail!("Commits must be sorted by timestamp");
     }
@@ -61,12 +83,24 @@ pub fn process_benchmarks<'a>(
     let num_commits = sorted_commits.len();
     let grouped_entries = BenchmarkEntry::group(entries);
 
+    log!(
+        "[process_benchmarks] Grouped into {} groups: {:?}",
+        grouped_entries.len(),
+        grouped_entries.keys().collect::<Vec<_>>()
+    );
+
     let mut benchmarks = HashMap::with_capacity(grouped_entries.keys().len());
     for (group_name, group_data) in grouped_entries {
         if group_name.is_empty() {
             vortex_bail!("Group name cannot be empty");
         }
 
+        log!(
+            "[process_benchmarks] Group '{}' has {} charts",
+            group_name,
+            group_data.len()
+        );
+
         let mut charts = HashMap::with_capacity(group_data.keys().len());
         for (chart_name, chart_data) in group_data {
             if chart_name.is_empty() {
@@ -97,27 +131,62 @@ pub fn process_benchmarks<'a>(
                     );
                 }
 
-                // Validate series has at least one non-null value.
-                if !aligned_series_data.iter().any(|v| v.is_some()) {
-                    vortex_bail!(
-                        "Series '{}' in group '{}', chart '{}' has no data points (all nulls)",
-                        series_name,
-                        group_name,
-                        chart_name
+                // Skip series with no data points (all nulls).
+                let data_points = aligned_series_data.iter().filter(|v| v.is_some()).count();
+                if data_points == 0 {
+                    log!(
+                        "[process_benchmarks]   Pruning series '{}' (no data points)",
+                        series_name
                     );
+                    continue;
                 }
 
                 aligned_series.insert(series_name, aligned_series_data);
             }
 
+            // Skip charts with no series.
+            if aligned_series.is_empty() {
+                log!(
+                    "[process_benchmarks]   Pruning chart '{}' (no series with data)",
+                    chart_name
+                );
+                continue;
+            }
+
+            log!(
+                "[process_benchmarks]   Chart '{}' has {} series with data",
+                chart_name,
+                aligned_series.len()
+            );
+
             let chart_data = ChartData { aligned_series };
             charts.insert(chart_name, chart_data);
         }
 
+        // Skip groups with no charts.
+        if charts.is_empty() {
+            log!(
+                "[process_benchmarks] Pruning group '{}' (no charts with data)",
+                group_name
+            );
+            continue;
+        }
+
+        log!(
+            "[process_benchmarks] Group '{}' retained {} charts",
+            group_name,
+            charts.len()
+        );
+
         let benchmark_group_data = BenchmarkGroupData { charts };
         benchmarks.insert(group_name, benchmark_group_data);
     }
 
+    log!(
+        "[process_benchmarks] Done. Final groups: {:?}",
+        benchmarks.keys().collect::<Vec<_>>()
+    );
+
     Ok(benchmarks)
 }
 
diff --git a/vortex-wasm/src/website/read_s3.rs b/vortex-wasm/src/website/read_s3.rs
index e4199141b44..f36a32cb86f 100644
--- a/vortex-wasm/src/website/read_s3.rs
+++ b/vortex-wasm/src/website/read_s3.rs
@@ -17,6 +17,21 @@ use crate::website::charts::BenchmarkResponse;
 use crate::website::charts::process_benchmarks;
 use crate::website::commit::CommitInfo;
 
+/// Log to the browser console (WASM) or stderr (native).
+#[cfg(target_arch = "wasm32")]
+macro_rules! log {
+    ($($t:tt)*) => {
+        web_sys::console::log_1(&format!($($t)*).into());
+    }
+}
+
+#[cfg(not(target_arch = "wasm32"))]
+macro_rules! log {
+    ($($t:tt)*) => {
+        eprintln!($($t)*);
+    }
+}
+
 /// Base URL for the S3 bucket containing benchmark data.
 const S3_BASE_URL: &str = "https://vortex-benchmark-results-database-test.s3.amazonaws.com";
 
@@ -37,6 +52,7 @@ const S3_BASE_URL: &str = "https://vortex-benchmark-results-database-test.s3.ama
 /// - The file is not a valid Vortex file.
 pub async fn read_s3_array(session: &VortexSession, key: &str) -> VortexResult<ArrayRef> {
     let url = format!("{}/{}", S3_BASE_URL, key);
+    log!("[read_s3_array] Fetching {}...", url);
 
     let response = reqwest::get(&url)
         .await
@@ -56,6 +72,11 @@ pub async fn read_s3_array(session: &VortexSession, key: &str) -> VortexResult<A
         .await
         .map_err(|e| vortex_err!("Failed to read response body: {}", e))?;
 
+    log!(
+        "[read_s3_array] Downloaded {} bytes, parsing Vortex file...",
+        bytes.len()
+    );
+
     // Parse as Vortex file and read all data.
     // Note: We use `open_read_at` directly instead of `open_buffer` because `open_buffer` uses
     // `futures::executor::block_on` which requires `std::time` (not available in WASM).
@@ -67,7 +88,10 @@ pub async fn read_s3_array(session: &VortexSession, key: &str) -> VortexResult<A
         .open_read_at(buffer)
         .await?;
 
-    file.scan()?.into_array_stream()?.read_all().await
+    let array = file.scan()?.into_array_stream()?.read_all().await?;
+    log!("[read_s3_array] Parsed array with {} rows", array.len());
+
+    Ok(array)
 }
 
 /// Reads benchmark entries from an S3 object containing a Vortex file.
@@ -122,15 +146,29 @@ pub async fn get_benchmark_data(
     commits_key: &str,
     data_key: &str,
 ) -> VortexResult<JsValue> {
+    log!("[get_benchmark_data] Fetching data and commits in parallel...");
+
     let (data_array, commits_array) = futures::try_join!(
         read_s3_array(session, data_key),
         read_s3_array(session, commits_key)
     )?;
 
+    log!("[get_benchmark_data] Parsing benchmark entries...");
     let data = BenchmarkEntry::vec_from_array(&data_array)?;
+    log!(
+        "[get_benchmark_data] Parsed {} benchmark entries",
+        data.len()
+    );
+
+    log!("[get_benchmark_data] Parsing commit info...");
     let mut commits = CommitInfo::vec_from_array(&commits_array)?;
+    log!(
+        "[get_benchmark_data] Parsed {} commits, sorting...",
+        commits.len()
+    );
     commits.sort_unstable();
 
+    log!("[get_benchmark_data] Processing benchmarks...");
     let benchmarks = process_benchmarks(&data, &commits)?;
 
     let response = BenchmarkResponse {
@@ -138,8 +176,10 @@ pub async fn get_benchmark_data(
         commits,
     };
 
+    log!("[get_benchmark_data] Serializing response to JS...");
     let js_value = serde_wasm_bindgen::to_value(&response)
         .map_err(|e| vortex_err!("Failed to serialize benchmark response: {e}"))?;
 
+    log!("[get_benchmark_data] Done!");
     Ok(js_value)
 }
diff --git a/vortex-wasm/wasm-test.js b/vortex-wasm/wasm-test.js
index 12114a05459..b82263bc55a 100644
--- a/vortex-wasm/wasm-test.js
+++ b/vortex-wasm/wasm-test.js
@@ -13,16 +13,16 @@ const CHART_CONFIG = {
     // GitHub repository for constructing commit URLs.
     githubRepo: "https://github.com/spiraldb/vortex",
 
-    // Which group and chart to display (for now, hardcoded to random-access).
+    // Which group and chart to display.
     targetGroup: "random-access",
-    targetChart: "random-access",
+    targetChart: "latency",
 
     // Series configuration.
-    seriesNames: ["vortex-nvme", "parquet-nvme", "lance-nvme"],
+    seriesNames: ["vortex", "parquet", "lance"],
     seriesColors: {
-        "vortex-nvme": "#101010",
-        "parquet-nvme": "#5DADE2",
-        "lance-nvme": "#ef7f1d",
+        "vortex": "#101010",
+        "parquet": "#5DADE2",
+        "lance": "#ef7f1d",
     },
 
     // Chart display settings.
@@ -114,19 +114,22 @@ async function loadBenchmarkData(wasm) {
 function processChartData(data) {
     const { benchmarks, commits } = data;
 
-    // Get the target group and chart.
-    const group = benchmarks[CHART_CONFIG.targetGroup];
+    // Get the target group and chart (using Map.get() since HashMap serializes to Map).
+    const group = benchmarks.get(CHART_CONFIG.targetGroup);
     if (!group) {
-        throw new Error(`Group '${CHART_CONFIG.targetGroup}' not found in benchmark data`);
+        throw new Error(`Group '${CHART_CONFIG.targetGroup}' not found. Available: ${[...benchmarks.keys()].join(', ')}`);
     }
 
-    const chart = group.charts[CHART_CONFIG.targetChart];
+    const chart = group.charts.get(CHART_CONFIG.targetChart);
     if (!chart) {
-        throw new Error(`Chart '${CHART_CONFIG.targetChart}' not found in group '${CHART_CONFIG.targetGroup}'`);
+        throw new Error(`Chart '${CHART_CONFIG.targetChart}' not found in group '${CHART_CONFIG.targetGroup}'. Available: ${[...group.charts.keys()].join(', ')}`);
     }
 
     const alignedSeries = chart.aligned_series;
 
+    // Log available series names.
+    console.log("Available series:", [...alignedSeries.keys()]);
+
     // Convert commits to chart-friendly format with URLs and short IDs.
     const processedCommits = commits.map((commit, index) => ({
         ...commit,
@@ -141,10 +144,11 @@ function processChartData(data) {
     // Convert series data from nanoseconds to milliseconds.
     const seriesData = new Map();
     for (const name of CHART_CONFIG.seriesNames) {
-        const rawData = alignedSeries[name];
+        const rawData = alignedSeries.get(name);
         if (rawData) {
             // Convert nanoseconds to milliseconds, preserving nulls.
-            const msData = rawData.map(v => v !== null ? { value: v / 1_000_000 } : null);
+            // Note: u64 from Rust may be BigInt in JS, so convert to Number first.
+            const msData = rawData.map(v => v !== null ? { value: Number(v) / 1_000_000 } : null);
             seriesData.set(name, msData);
         } else {
             // Series not found, fill with nulls.
@@ -154,7 +158,7 @@ function processChartData(data) {
 
     // Find the range of data (first and last non-null indices).
     let firstDataIndex = commits.length;
-    let lastDataIndex = 0;
+    let lastDataIndex = -1;
     for (const data of seriesData.values()) {
         for (let i = 0; i < data.length; i++) {
             if (data[i] !== null) {
@@ -164,6 +168,13 @@ function processChartData(data) {
         }
     }
 
+    // Handle case where no data was found.
+    if (lastDataIndex < 0) {
+        console.warn("No data points found in any series!");
+        firstDataIndex = 0;
+        lastDataIndex = commits.length - 1;
+    }
+
     // Slice to show only the range with data.
     const startIndex = Math.max(0, firstDataIndex);
     const endIndex = lastDataIndex + 1;

From a77ad76ed0084aec2cbc30de36a046458f8a8ef6 Mon Sep 17 00:00:00 2001
From: Connor Tsui <connor.tsui20@gmail.com>
Date: Thu, 4 Dec 2025 16:10:36 -0500
Subject: [PATCH 19/30] lazy

Signed-off-by: Connor Tsui <connor.tsui20@gmail.com>
---
 vortex-wasm/Cargo.toml             |   3 +-
 vortex-wasm/src/lib.rs             |  64 ++++++++++-
 vortex-wasm/src/website/charts.rs  | 165 +++++++++++++++++++++++++++++
 vortex-wasm/src/website/read_s3.rs | 128 ++++++++++++++++++++++
 vortex-wasm/wasm-test.html         |   2 +-
 vortex-wasm/wasm-test.js           |  93 +++++++++-------
 6 files changed, 414 insertions(+), 41 deletions(-)

diff --git a/vortex-wasm/Cargo.toml b/vortex-wasm/Cargo.toml
index 82cbdf990ce..f077c2b4290 100644
--- a/vortex-wasm/Cargo.toml
+++ b/vortex-wasm/Cargo.toml
@@ -21,7 +21,6 @@ default = ["native"]
 # Native feature for binaries: includes tokio runtime and file system dependencies.
 native = [
     "dep:async-fs",
-    "dep:serde_json",
     "dep:tempfile",
     "dep:tokio",
     "dep:tracing",
@@ -35,6 +34,7 @@ futures = { workspace = true }
 hex = { workspace = true }
 reqwest = { workspace = true }
 serde = { workspace = true, features = ["derive"] }
+serde_json = { workspace = true }
 serde-wasm-bindgen = "0.6"
 vortex = { workspace = true }
 wasm-bindgen = "0.2"
@@ -55,7 +55,6 @@ vortex-session = { workspace = true }
 
 # Native-only dependencies (for binaries).
 async-fs = { workspace = true, optional = true }
-serde_json = { workspace = true, optional = true }
 tempfile = { workspace = true, optional = true }
 tokio = { workspace = true, features = ["full"], optional = true }
 tracing = { workspace = true, optional = true }
diff --git a/vortex-wasm/src/lib.rs b/vortex-wasm/src/lib.rs
index b9f0231df63..92766610cdb 100644
--- a/vortex-wasm/src/lib.rs
+++ b/vortex-wasm/src/lib.rs
@@ -18,6 +18,8 @@ mod wasm_bindings {
     use wasm_bindgen::prelude::*;
 
     use crate::website::read_s3::get_benchmark_data;
+    use crate::website::read_s3::get_benchmark_summary;
+    use crate::website::read_s3::get_chart_data;
     use crate::website::read_s3::read_benchmark_entries;
 
     const DATA_KEY: &str = "data.vortex";
@@ -81,7 +83,7 @@ mod wasm_bindings {
             .map_err(|e| JsValue::from_str(&format!("Failed to serialize: {}", e)))
     }
 
-    /// Load all benchmark data from S3.
+    /// Load all benchmark data from S3 (legacy, slow - use load_benchmark_summary instead).
     ///
     /// This function fetches the commits and benchmark data Vortex files from S3, parses them,
     /// aligns the data to commits, and returns a structured response.
@@ -109,6 +111,66 @@ mod wasm_bindings {
         Ok(result)
     }
 
+    /// Load benchmark summary (metadata only, fast).
+    ///
+    /// This function fetches data from S3 (cached after first call), processes it, and returns
+    /// a summary containing:
+    /// - `commits`: Array of commit objects
+    /// - `groups`: Object mapping group names to chart metadata (no values)
+    ///
+    /// Use this for fast initial load, then call `load_chart_data` for specific charts.
+    ///
+    /// # Returns
+    ///
+    /// A JSON string that must be parsed with `JSON.parse()` in JavaScript.
+    #[wasm_bindgen]
+    pub async fn load_benchmark_summary() -> Result<String, JsValue> {
+        log!("Loading benchmark summary...");
+
+        let session = VortexSession::default().with_handle(WasmRuntime::handle());
+
+        let json = get_benchmark_summary(&session, COMMITS_KEY, DATA_KEY)
+            .await
+            .map_err(|e| JsValue::from_str(&format!("Failed to load benchmark summary: {}", e)))?;
+
+        log!("Benchmark summary loaded successfully");
+
+        Ok(json)
+    }
+
+    /// Load chart data for a specific group and chart.
+    ///
+    /// This function returns the aligned series data for a single chart. Data is cached after
+    /// the first call to any load function, so subsequent calls are fast.
+    ///
+    /// # Arguments
+    ///
+    /// * `group` - The group name (e.g., "random-access", "tpch")
+    /// * `chart` - The chart name within the group (e.g., "latency", "q1-sf1000-nvme")
+    ///
+    /// # Returns
+    ///
+    /// A JSON string containing `{ aligned_series: { series_name: [values...] } }`.
+    /// Values are in nanoseconds (u64). Parse with `JSON.parse()` in JavaScript.
+    #[wasm_bindgen]
+    pub async fn load_chart_data(group: &str, chart: &str) -> Result<String, JsValue> {
+        log!(
+            "Loading chart data for group='{}', chart='{}'...",
+            group,
+            chart
+        );
+
+        let session = VortexSession::default().with_handle(WasmRuntime::handle());
+
+        let json = get_chart_data(&session, COMMITS_KEY, DATA_KEY, group, chart)
+            .await
+            .map_err(|e| JsValue::from_str(&format!("Failed to load chart data: {}", e)))?;
+
+        log!("Chart data loaded successfully");
+
+        Ok(json)
+    }
+
     /// Initialize the WASM module.
     #[wasm_bindgen(start)]
     pub fn init() {
diff --git a/vortex-wasm/src/website/charts.rs b/vortex-wasm/src/website/charts.rs
index 8bfd5f754b8..09242f9bd48 100644
--- a/vortex-wasm/src/website/charts.rs
+++ b/vortex-wasm/src/website/charts.rs
@@ -56,6 +56,54 @@ pub struct ChartData<'a> {
     aligned_series: AlignedSeries<'a>,
 }
 
+// ============================================================================
+// Owned data structures (for static caching)
+// ============================================================================
+
+/// A map of group names to their benchmark data (owned version for static storage).
+pub type OwnedBenchmarks = HashMap<String, OwnedBenchmarkGroupData>;
+
+/// Benchmark group data with owned strings.
+#[derive(Debug, Clone, Serialize)]
+pub struct OwnedBenchmarkGroupData {
+    /// The name of a chart and its associated data.
+    pub charts: HashMap<String, OwnedChartData>,
+}
+
+/// Chart data with owned strings.
+#[derive(Debug, Clone, Serialize)]
+pub struct OwnedChartData {
+    /// The name of a series and its associated data.
+    pub aligned_series: HashMap<String, Vec<Option<u64>>>,
+}
+
+// ============================================================================
+// Summary data structures (for fast initial load)
+// ============================================================================
+
+/// Summary of all benchmarks (metadata only, no series values).
+#[derive(Debug, Clone, Serialize)]
+pub struct BenchmarkSummary {
+    /// Sorted list of commits.
+    pub commits: Vec<CommitInfo>,
+    /// Groups with their chart and series metadata.
+    pub groups: HashMap<String, GroupSummary>,
+}
+
+/// Summary of a benchmark group (metadata only).
+#[derive(Debug, Clone, Serialize)]
+pub struct GroupSummary {
+    /// Charts in this group with their series names.
+    pub charts: HashMap<String, ChartSummary>,
+}
+
+/// Summary of a chart (metadata only).
+#[derive(Debug, Clone, Serialize)]
+pub struct ChartSummary {
+    /// Names of series in this chart.
+    pub series_names: Vec<String>,
+}
+
 /// Processes benchmark entries into a structured format aligned with commits.
 ///
 /// Series, charts, and groups with no data are automatically pruned from the result.
@@ -199,3 +247,120 @@ fn create_aligned_series_data(
         .map(|commit_info| commits_and_values.get(commit_info.commit_id()).copied())
         .collect()
 }
+
+// ============================================================================
+// Owned processing functions
+// ============================================================================
+
+/// Processes benchmark entries into owned structures suitable for static caching.
+///
+/// This is similar to [`process_benchmarks`] but returns owned data that can be stored
+/// in a `OnceLock` for caching.
+pub fn process_benchmarks_owned(
+    entries: &[BenchmarkEntry],
+    sorted_commits: &[CommitInfo],
+) -> VortexResult<OwnedBenchmarks> {
+    log!(
+        "[process_benchmarks_owned] Starting with {} entries, {} commits",
+        entries.len(),
+        sorted_commits.len()
+    );
+
+    if !sorted_commits.is_sorted() {
+        vortex_bail!("Commits must be sorted by timestamp");
+    }
+
+    let num_commits = sorted_commits.len();
+    let grouped_entries = BenchmarkEntry::group(entries);
+
+    log!(
+        "[process_benchmarks_owned] Grouped into {} groups",
+        grouped_entries.len()
+    );
+
+    let mut benchmarks = HashMap::with_capacity(grouped_entries.keys().len());
+    for (group_name, group_data) in grouped_entries {
+        if group_name.is_empty() {
+            vortex_bail!("Group name cannot be empty");
+        }
+
+        let mut charts = HashMap::with_capacity(group_data.keys().len());
+        for (chart_name, chart_data) in group_data {
+            if chart_name.is_empty() {
+                vortex_bail!("Chart name cannot be empty in group '{}'", group_name);
+            }
+
+            let mut aligned_series = HashMap::with_capacity(chart_data.keys().len());
+            for (series_name, series_data) in chart_data {
+                if series_name.is_empty() {
+                    vortex_bail!(
+                        "Series name cannot be empty in group '{}', chart '{}'",
+                        group_name,
+                        chart_name
+                    );
+                }
+
+                let aligned_series_data = create_aligned_series_data(series_data, sorted_commits);
+
+                if aligned_series_data.len() != num_commits {
+                    vortex_bail!(
+                        "Series '{}' in group '{}', chart '{}' has {} elements, expected {}",
+                        series_name,
+                        group_name,
+                        chart_name,
+                        aligned_series_data.len(),
+                        num_commits
+                    );
+                }
+
+                // Skip series with no data points.
+                if !aligned_series_data.iter().any(|v| v.is_some()) {
+                    continue;
+                }
+
+                // Convert to owned String key.
+                aligned_series.insert(series_name.to_string(), aligned_series_data);
+            }
+
+            if aligned_series.is_empty() {
+                continue;
+            }
+
+            charts.insert(chart_name.to_string(), OwnedChartData { aligned_series });
+        }
+
+        if charts.is_empty() {
+            continue;
+        }
+
+        benchmarks.insert(group_name.to_string(), OwnedBenchmarkGroupData { charts });
+    }
+
+    log!(
+        "[process_benchmarks_owned] Done. Final groups: {:?}",
+        benchmarks.keys().collect::<Vec<_>>()
+    );
+
+    Ok(benchmarks)
+}
+
+/// Extracts summary metadata from owned benchmarks.
+pub fn extract_summary(benchmarks: &OwnedBenchmarks, commits: Vec<CommitInfo>) -> BenchmarkSummary {
+    let groups = benchmarks
+        .iter()
+        .map(|(group_name, group_data)| {
+            let charts = group_data
+                .charts
+                .iter()
+                .map(|(chart_name, chart_data)| {
+                    let series_names: Vec<String> =
+                        chart_data.aligned_series.keys().cloned().collect();
+                    (chart_name.clone(), ChartSummary { series_names })
+                })
+                .collect();
+            (group_name.clone(), GroupSummary { charts })
+        })
+        .collect();
+
+    BenchmarkSummary { commits, groups }
+}
diff --git a/vortex-wasm/src/website/read_s3.rs b/vortex-wasm/src/website/read_s3.rs
index f36a32cb86f..c64cea87649 100644
--- a/vortex-wasm/src/website/read_s3.rs
+++ b/vortex-wasm/src/website/read_s3.rs
@@ -3,6 +3,8 @@
 
 //! Functions for reading benchmark data from S3.
 
+use std::sync::OnceLock;
+
 use vortex::array::stream::ArrayStreamExt;
 use vortex::error::VortexResult;
 use vortex::error::vortex_bail;
@@ -14,7 +16,10 @@ use wasm_bindgen::JsValue;
 
 use super::entry::BenchmarkEntry;
 use crate::website::charts::BenchmarkResponse;
+use crate::website::charts::OwnedBenchmarks;
+use crate::website::charts::extract_summary;
 use crate::website::charts::process_benchmarks;
+use crate::website::charts::process_benchmarks_owned;
 use crate::website::commit::CommitInfo;
 
 /// Log to the browser console (WASM) or stderr (native).
@@ -35,6 +40,129 @@ macro_rules! log {
 /// Base URL for the S3 bucket containing benchmark data.
 const S3_BASE_URL: &str = "https://vortex-benchmark-results-database-test.s3.amazonaws.com";
 
+// ============================================================================
+// Static caches for data (fetched/processed once, reused across calls)
+// ============================================================================
+
+/// Processed benchmark data ready for serialization.
+pub struct ProcessedData {
+    /// Sorted commits.
+    pub commits: Vec<CommitInfo>,
+    /// All benchmarks with owned strings.
+    pub benchmarks: OwnedBenchmarks,
+}
+
+/// Global cache for processed data.
+static PROCESSED_DATA: OnceLock<ProcessedData> = OnceLock::new();
+
+/// Ensures data is loaded and processed, returning a reference to the cached data.
+///
+/// This function fetches data from S3 and processes it on the first call, then returns the
+/// cached result on subsequent calls.
+pub async fn ensure_data_loaded(
+    session: &VortexSession,
+    commits_key: &str,
+    data_key: &str,
+) -> VortexResult<&'static ProcessedData> {
+    // If already cached, return immediately.
+    if let Some(data) = PROCESSED_DATA.get() {
+        log!("[ensure_data_loaded] Returning cached data");
+        return Ok(data);
+    }
+
+    log!("[ensure_data_loaded] Fetching and processing data...");
+
+    // Fetch from S3.
+    let (data_array, commits_array) = futures::try_join!(
+        read_s3_array(session, data_key),
+        read_s3_array(session, commits_key)
+    )?;
+
+    // Parse arrays.
+    let entries = BenchmarkEntry::vec_from_array(&data_array)?;
+    let mut commits = CommitInfo::vec_from_array(&commits_array)?;
+    commits.sort_unstable();
+
+    log!(
+        "[ensure_data_loaded] Parsed {} entries, {} commits",
+        entries.len(),
+        commits.len()
+    );
+
+    // Process into owned structures.
+    let benchmarks = process_benchmarks_owned(&entries, &commits)?;
+
+    let processed = ProcessedData {
+        commits,
+        benchmarks,
+    };
+
+    // Store in cache (ignore error if another thread beat us to it).
+    drop(PROCESSED_DATA.set(processed));
+
+    Ok(PROCESSED_DATA.get().expect("just set"))
+}
+
+/// Returns the benchmark summary (metadata only, fast serialization).
+pub async fn get_benchmark_summary(
+    session: &VortexSession,
+    commits_key: &str,
+    data_key: &str,
+) -> VortexResult<String> {
+    let data = ensure_data_loaded(session, commits_key, data_key).await?;
+
+    log!("[get_benchmark_summary] Building summary...");
+    let summary = extract_summary(&data.benchmarks, data.commits.clone());
+
+    log!("[get_benchmark_summary] Serializing with serde_json...");
+    let json = serde_json::to_string(&summary)
+        .map_err(|e| vortex_err!("Failed to serialize summary: {}", e))?;
+
+    log!(
+        "[get_benchmark_summary] Done, JSON size: {} bytes",
+        json.len()
+    );
+    Ok(json)
+}
+
+/// Returns chart data for a specific group and chart.
+pub async fn get_chart_data(
+    session: &VortexSession,
+    commits_key: &str,
+    data_key: &str,
+    group: &str,
+    chart: &str,
+) -> VortexResult<String> {
+    let data = ensure_data_loaded(session, commits_key, data_key).await?;
+
+    log!(
+        "[get_chart_data] Looking up group='{}', chart='{}'",
+        group,
+        chart
+    );
+
+    let group_data = data
+        .benchmarks
+        .get(group)
+        .ok_or_else(|| vortex_err!("Group '{}' not found", group))?;
+
+    let chart_data = group_data
+        .charts
+        .get(chart)
+        .ok_or_else(|| vortex_err!("Chart '{}' not found in group '{}'", chart, group))?;
+
+    log!("[get_chart_data] Serializing chart data...");
+    let json = serde_json::to_string(chart_data)
+        .map_err(|e| vortex_err!("Failed to serialize chart data: {}", e))?;
+
+    log!("[get_chart_data] Done, JSON size: {} bytes", json.len());
+    Ok(json)
+}
+
+// ============================================================================
+// S3 reading functions
+// ============================================================================
+
 /// Reads a Vortex array from an S3 object.
 ///
 /// This function downloads the Vortex file from S3 using HTTP (the bucket is public) and
diff --git a/vortex-wasm/wasm-test.html b/vortex-wasm/wasm-test.html
index e2da7e6df32..4c8a2e78e95 100644
--- a/vortex-wasm/wasm-test.html
+++ b/vortex-wasm/wasm-test.html
@@ -23,7 +23,7 @@ <h1>Vortex WASM Benchmarks</h1>
         </div>
 
         <div class="benchmarks-grid">
-            <div id="random-access-benchmark" class="benchmark-set hidden">
+            <div id="random-access-benchmark" class="benchmark-set hidden collapsed">
                 <div class="benchmark-header">
                     <div class="title-wrapper">
                         <span class="collapse-icon">▼</span>
diff --git a/vortex-wasm/wasm-test.js b/vortex-wasm/wasm-test.js
index b82263bc55a..a32ffd70254 100644
--- a/vortex-wasm/wasm-test.js
+++ b/vortex-wasm/wasm-test.js
@@ -14,8 +14,8 @@ const CHART_CONFIG = {
     githubRepo: "https://github.com/spiraldb/vortex",
 
     // Which group and chart to display.
-    targetGroup: "random-access",
-    targetChart: "latency",
+    targetGroup: "clickbench",
+    targetChart: "q1",
 
     // Series configuration.
     seriesNames: ["vortex", "parquet", "lance"],
@@ -89,16 +89,35 @@ async function loadWasmModule() {
 }
 
 /**
- * Loads all benchmark data from WASM (benchmarks + commits).
+ * Loads benchmark summary from WASM (commits + group/chart metadata, no values).
+ * This is fast because it doesn't include the large series data.
  *
  * @param {Object} wasm - The WASM module.
- * @returns {Promise<Object>} Object with benchmarks and commits.
+ * @returns {Promise<Object>} Object with commits and groups metadata.
  */
-async function loadBenchmarkData(wasm) {
-    setStatus("Loading benchmark data from Vortex files via WASM...");
-    const data = await wasm.load_benchmark_data();
-    console.log(`Loaded benchmark data with ${data.commits.length} commits`);
-    return data;
+async function loadBenchmarkSummary(wasm) {
+    setStatus("Loading benchmark summary...");
+    const json = await wasm.load_benchmark_summary();
+    const summary = JSON.parse(json);
+    console.log(`Loaded summary with ${summary.commits.length} commits, ${Object.keys(summary.groups).length} groups`);
+    return summary;
+}
+
+/**
+ * Loads chart data for a specific group and chart.
+ * This is called lazily when a chart needs to be displayed.
+ *
+ * @param {Object} wasm - The WASM module.
+ * @param {string} group - The group name.
+ * @param {string} chart - The chart name.
+ * @returns {Promise<Object>} Object with aligned_series data.
+ */
+async function loadChartData(wasm, group, chart) {
+    setStatus(`Loading chart data for ${group}/${chart}...`);
+    const json = await wasm.load_chart_data(group, chart);
+    const chartData = JSON.parse(json);
+    console.log(`Loaded chart data for ${group}/${chart}`);
+    return chartData;
 }
 
 // ============================================================================
@@ -106,29 +125,17 @@ async function loadBenchmarkData(wasm) {
 // ============================================================================
 
 /**
- * Processes benchmark data into chart-ready format.
+ * Processes chart data into chart-ready format.
  *
- * @param {Object} data - The data object from WASM with benchmarks and commits.
+ * @param {Object} chartData - The chart data from load_chart_data (has aligned_series).
+ * @param {Array} commits - The commits array from the summary.
  * @returns {Object} Object containing seriesData and chartCommits.
  */
-function processChartData(data) {
-    const { benchmarks, commits } = data;
+function processChartData(chartData, commits) {
+    const alignedSeries = chartData.aligned_series;
 
-    // Get the target group and chart (using Map.get() since HashMap serializes to Map).
-    const group = benchmarks.get(CHART_CONFIG.targetGroup);
-    if (!group) {
-        throw new Error(`Group '${CHART_CONFIG.targetGroup}' not found. Available: ${[...benchmarks.keys()].join(', ')}`);
-    }
-
-    const chart = group.charts.get(CHART_CONFIG.targetChart);
-    if (!chart) {
-        throw new Error(`Chart '${CHART_CONFIG.targetChart}' not found in group '${CHART_CONFIG.targetGroup}'. Available: ${[...group.charts.keys()].join(', ')}`);
-    }
-
-    const alignedSeries = chart.aligned_series;
-
-    // Log available series names.
-    console.log("Available series:", [...alignedSeries.keys()]);
+    // Log available series names (now a plain object, not a Map).
+    console.log("Available series:", Object.keys(alignedSeries));
 
     // Convert commits to chart-friendly format with URLs and short IDs.
     const processedCommits = commits.map((commit, index) => ({
@@ -144,10 +151,10 @@ function processChartData(data) {
     // Convert series data from nanoseconds to milliseconds.
     const seriesData = new Map();
     for (const name of CHART_CONFIG.seriesNames) {
-        const rawData = alignedSeries.get(name);
+        const rawData = alignedSeries[name];
         if (rawData) {
             // Convert nanoseconds to milliseconds, preserving nulls.
-            // Note: u64 from Rust may be BigInt in JS, so convert to Number first.
+            // Note: u64 from Rust may be BigInt in JS via JSON, so convert to Number first.
             const msData = rawData.map(v => v !== null ? { value: Number(v) / 1_000_000 } : null);
             seriesData.set(name, msData);
         } else {
@@ -724,23 +731,35 @@ function initializeTimelineControls(chartInstance, chartCommits) {
  */
 async function main() {
     try {
-        // Load data from WASM (benchmarks + commits in one call).
+        // Step 1: Load WASM module.
         const wasm = await loadWasmModule();
-        const data = await loadBenchmarkData(wasm);
 
-        // Process data for the target group/chart.
-        const { seriesData, chartCommits } = processChartData(data);
-        const summary = calculateSummary(seriesData);
+        // Step 2: Load summary (fast - metadata only, no series values).
+        const summary = await loadBenchmarkSummary(wasm);
+
+        // Log available groups and charts.
+        console.log("Available groups:", Object.keys(summary.groups));
+        const targetGroupInfo = summary.groups[CHART_CONFIG.targetGroup];
+        if (targetGroupInfo) {
+            console.log(`Charts in '${CHART_CONFIG.targetGroup}':`, Object.keys(targetGroupInfo.charts));
+        }
+
+        // Step 3: Load chart data for the target group/chart (lazy).
+        const chartData = await loadChartData(wasm, CHART_CONFIG.targetGroup, CHART_CONFIG.targetChart);
+
+        // Step 4: Process and render.
+        const { seriesData, chartCommits } = processChartData(chartData, summary.commits);
+        const summaryStats = calculateSummary(seriesData);
 
         // Render UI.
-        renderSummary(summary);
+        renderSummary(summaryStats);
         const chartInstance = createChart(chartCommits, seriesData);
         initializeTimelineControls(chartInstance, chartCommits);
 
         // Set up collapsible behavior.
         setupCollapsibleBenchmarks();
 
-        setStatus(`Loaded ${data.commits.length} commits, showing ${chartCommits.length} with data`, "success");
+        setStatus(`Loaded ${summary.commits.length} commits, showing ${chartCommits.length} with data`, "success");
 
     } catch (error) {
         console.error("Error:", error);

From dbf52fa97bf3c8fd2ffa3ceb4cb2cc7ef7a48e11 Mon Sep 17 00:00:00 2001
From: Connor Tsui <connor.tsui20@gmail.com>
Date: Thu, 4 Dec 2025 16:29:51 -0500
Subject: [PATCH 20/30] more async loading

Signed-off-by: Connor Tsui <connor.tsui20@gmail.com>
---
 vortex-wasm/wasm-test.css  |  24 +-
 vortex-wasm/wasm-test.html |  44 +--
 vortex-wasm/wasm-test.js   | 553 +++++++++++++++++++++----------------
 3 files changed, 344 insertions(+), 277 deletions(-)

diff --git a/vortex-wasm/wasm-test.css b/vortex-wasm/wasm-test.css
index fa4de05f18a..7d57ddb01bd 100644
--- a/vortex-wasm/wasm-test.css
+++ b/vortex-wasm/wasm-test.css
@@ -463,11 +463,33 @@ body {
     background-clip: padding-box;
 }
 
-#timeline-scrollbar-content {
+/* Dynamic scrollbar content elements */
+[id$="scrollbar-content"] {
     height: 1px;
     pointer-events: none;
 }
 
+/* Chart Section - container for each chart within a group */
+.chart-section {
+    margin-bottom: 32px;
+    padding-bottom: 32px;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.chart-section:last-child {
+    margin-bottom: 0;
+    padding-bottom: 0;
+    border-bottom: none;
+}
+
+/* Summary section within a chart section (not at group level) */
+.chart-section .summary-section {
+    padding: 0;
+    background: transparent;
+    border-bottom: none;
+    margin-bottom: 16px;
+}
+
 /* Utility Classes */
 .hidden {
     display: none !important;
diff --git a/vortex-wasm/wasm-test.html b/vortex-wasm/wasm-test.html
index 4c8a2e78e95..ba5a4785a61 100644
--- a/vortex-wasm/wasm-test.html
+++ b/vortex-wasm/wasm-test.html
@@ -22,48 +22,8 @@ <h1>Vortex WASM Benchmarks</h1>
             <span id="status-text">Initializing WASM module...</span>
         </div>
 
-        <div class="benchmarks-grid">
-            <div id="random-access-benchmark" class="benchmark-set hidden collapsed">
-                <div class="benchmark-header">
-                    <div class="title-wrapper">
-                        <span class="collapse-icon">▼</span>
-                        <h2 class="benchmark-title">Random Access</h2>
-                    </div>
-                    <div class="benchmark-meta">
-                        <span id="benchmark-meta-text">Latest Results</span>
-                    </div>
-                </div>
-                <div class="summary-section">
-                    <div id="summary-list" class="scores-list"></div>
-                    <p class="scores-explanation">
-                        Random access time | Ratio to fastest (lower is better)
-                    </p>
-                </div>
-                <div class="benchmark-graphs">
-                    <div class="chart-container">
-                        <div class="chart-header">
-                            <h3 class="chart-title">Random Access Time (ms)</h3>
-                            <div class="chart-controls">
-                                <span id="control-info-text" class="control-info-compact">Showing commits 1-50 of 100</span>
-                                <div class="zoom-controls">
-                                    <button id="zoom-out-large" class="zoom-btn">−−</button>
-                                    <button id="zoom-out-small" class="zoom-btn">−</button>
-                                    <button id="zoom-in-small" class="zoom-btn">+</button>
-                                    <button id="zoom-in-large" class="zoom-btn">++</button>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="chart-wrapper">
-                            <canvas id="chart"></canvas>
-                        </div>
-                        <div id="chartjs-tooltip" class="chartjs-tooltip"></div>
-                        <div class="x-axis-label">Commit</div>
-                        <div class="timeline-scrollbar-container">
-                            <div id="timeline-scrollbar-content"></div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+        <div id="benchmarks-container" class="benchmarks-grid">
+            <!-- Groups rendered dynamically by JS -->
         </div>
     </div>
 
diff --git a/vortex-wasm/wasm-test.js b/vortex-wasm/wasm-test.js
index a32ffd70254..b43a46ae7f9 100644
--- a/vortex-wasm/wasm-test.js
+++ b/vortex-wasm/wasm-test.js
@@ -3,48 +3,72 @@
 // ============================================================================
 
 /**
- * Configuration object for the benchmark chart. Modify these values to
- * customize the chart for different benchmarks.
+ * Global configuration settings.
  */
-const CHART_CONFIG = {
-    // Data sources.
+const CONFIG = {
     wasmModulePath: "./pkg/vortex_wasm.js",
-
-    // GitHub repository for constructing commit URLs.
     githubRepo: "https://github.com/spiraldb/vortex",
-
-    // Which group and chart to display.
-    targetGroup: "clickbench",
-    targetChart: "q1",
-
-    // Series configuration.
-    seriesNames: ["vortex", "parquet", "lance"],
-    seriesColors: {
-        "vortex": "#101010",
-        "parquet": "#5DADE2",
-        "lance": "#ef7f1d",
-    },
-
-    // Chart display settings.
     defaultVisibleCommits: 50,
-
-    // Zoom and scroll configuration.
     minWindowSize: 10,
-    zoomSpeed: 0.1,
-
-    // Y-axis label.
     yAxisLabel: "Time (ms)",
 };
 
+/**
+ * Benchmark group configurations. Each group contains multiple charts.
+ */
+const BENCHMARK_GROUPS = {
+    "random-access": {
+        title: "Random Access",
+        charts: ["latency"],
+        seriesNames: ["vortex", "parquet", "lance"],
+        seriesColors: {
+            "vortex": "#101010",
+            "parquet": "#5DADE2",
+            "lance": "#ef7f1d",
+        },
+    },
+    "clickbench": {
+        title: "ClickBench",
+        charts: [
+            "q00-nvme", "q01-nvme", "q02-nvme", "q03-nvme", "q04-nvme",
+            "q05-nvme", "q06-nvme", "q07-nvme", "q08-nvme", "q09-nvme",
+            "q10-nvme", "q11-nvme", "q12-nvme", "q13-nvme", "q14-nvme",
+            "q15-nvme", "q16-nvme", "q17-nvme", "q18-nvme", "q19-nvme",
+            "q20-nvme", "q21-nvme", "q22-nvme", "q23-nvme", "q24-nvme",
+            "q25-nvme", "q26-nvme", "q27-nvme", "q28-nvme", "q29-nvme",
+            "q30-nvme", "q31-nvme", "q32-nvme", "q33-nvme", "q34-nvme",
+            "q35-nvme", "q36-nvme", "q37-nvme", "q38-nvme", "q39-nvme",
+            "q40-nvme", "q41-nvme", "q42-nvme",
+        ],
+        seriesNames: [
+            "duckdb:vortex-compact",
+            "duckdb:vortex-file-compressed",
+            "duckdb:parquet",
+            "duckdb:duckdb",
+            "datafusion:vortex-compact",
+            "datafusion:vortex-file-compressed",
+            "datafusion:parquet",
+            "datafusion:lance",
+        ],
+        seriesColors: {
+            "duckdb:vortex-compact": "#101010",
+            "duckdb:vortex-file-compressed": "#6b7280",
+            "duckdb:parquet": "#5DADE2",
+            "duckdb:duckdb": "#f59e0b",
+            "datafusion:vortex-compact": "#059669",
+            "datafusion:vortex-file-compressed": "#10b981",
+            "datafusion:parquet": "#8b5cf6",
+            "datafusion:lance": "#ef7f1d",
+        },
+    },
+};
+
 // ============================================================================
 // Utility Functions
 // ============================================================================
 
 /**
  * Updates the status display with a message and type.
- *
- * @param {string} message - The status message to display.
- * @param {string} type - The status type: "loading", "success", or "error".
  */
 function setStatus(message, type = "loading") {
     const status = document.getElementById("status");
@@ -52,7 +76,6 @@ function setStatus(message, type = "loading") {
     status.className = `status ${type}`;
     text.textContent = message;
 
-    // Hide spinner for success/error.
     const spinner = status.querySelector(".spinner");
     if (spinner) {
         spinner.style.display = type === "loading" ? "inline-block" : "none";
@@ -61,9 +84,6 @@ function setStatus(message, type = "loading") {
 
 /**
  * Formats time in human-readable format with appropriate units.
- *
- * @param {number} ms - Time in milliseconds.
- * @returns {string} Formatted time string.
  */
 function formatTime(ms) {
     if (ms < 1) return `${(ms * 1000).toFixed(0)}μs`;
@@ -71,18 +91,23 @@ function formatTime(ms) {
     return `${(ms / 1000).toFixed(2)}s`;
 }
 
+/**
+ * Creates a unique ID for chart elements.
+ */
+function makeId(groupId, chartName, suffix) {
+    return `${groupId}-${chartName}-${suffix}`.replace(/[^a-zA-Z0-9-]/g, '-');
+}
+
 // ============================================================================
 // Data Loading Functions
 // ============================================================================
 
 /**
  * Loads and initializes the WASM module.
- *
- * @returns {Promise<Object>} The initialized WASM module.
  */
 async function loadWasmModule() {
     setStatus("Loading WASM module...");
-    const wasm = await import(CHART_CONFIG.wasmModulePath);
+    const wasm = await import(CONFIG.wasmModulePath);
     await wasm.default();
     console.log("WASM loaded:", wasm.get_version());
     return wasm;
@@ -90,10 +115,6 @@ async function loadWasmModule() {
 
 /**
  * Loads benchmark summary from WASM (commits + group/chart metadata, no values).
- * This is fast because it doesn't include the large series data.
- *
- * @param {Object} wasm - The WASM module.
- * @returns {Promise<Object>} Object with commits and groups metadata.
  */
 async function loadBenchmarkSummary(wasm) {
     setStatus("Loading benchmark summary...");
@@ -105,19 +126,10 @@ async function loadBenchmarkSummary(wasm) {
 
 /**
  * Loads chart data for a specific group and chart.
- * This is called lazily when a chart needs to be displayed.
- *
- * @param {Object} wasm - The WASM module.
- * @param {string} group - The group name.
- * @param {string} chart - The chart name.
- * @returns {Promise<Object>} Object with aligned_series data.
  */
 async function loadChartData(wasm, group, chart) {
-    setStatus(`Loading chart data for ${group}/${chart}...`);
     const json = await wasm.load_chart_data(group, chart);
-    const chartData = JSON.parse(json);
-    console.log(`Loaded chart data for ${group}/${chart}`);
-    return chartData;
+    return JSON.parse(json);
 }
 
 // ============================================================================
@@ -126,44 +138,29 @@ async function loadChartData(wasm, group, chart) {
 
 /**
  * Processes chart data into chart-ready format.
- *
- * @param {Object} chartData - The chart data from load_chart_data (has aligned_series).
- * @param {Array} commits - The commits array from the summary.
- * @returns {Object} Object containing seriesData and chartCommits.
  */
-function processChartData(chartData, commits) {
+function processChartData(chartData, commits, groupConfig) {
     const alignedSeries = chartData.aligned_series;
 
-    // Log available series names (now a plain object, not a Map).
-    console.log("Available series:", Object.keys(alignedSeries));
-
-    // Convert commits to chart-friendly format with URLs and short IDs.
     const processedCommits = commits.map((commit, index) => ({
         ...commit,
-        // Use commit_id for display (first 7 chars).
         id: commit.commit_id,
-        // Construct GitHub URL.
-        url: `${CHART_CONFIG.githubRepo}/commit/${commit.commit_id}`,
-        // Keep original index for reference.
+        url: `${CONFIG.githubRepo}/commit/${commit.commit_id}`,
         sortedIndex: index,
     }));
 
-    // Convert series data from nanoseconds to milliseconds.
     const seriesData = new Map();
-    for (const name of CHART_CONFIG.seriesNames) {
+    for (const name of groupConfig.seriesNames) {
         const rawData = alignedSeries[name];
         if (rawData) {
-            // Convert nanoseconds to milliseconds, preserving nulls.
-            // Note: u64 from Rust may be BigInt in JS via JSON, so convert to Number first.
             const msData = rawData.map(v => v !== null ? { value: Number(v) / 1_000_000 } : null);
             seriesData.set(name, msData);
         } else {
-            // Series not found, fill with nulls.
             seriesData.set(name, new Array(commits.length).fill(null));
         }
     }
 
-    // Find the range of data (first and last non-null indices).
+    // Find the range of data.
     let firstDataIndex = commits.length;
     let lastDataIndex = -1;
     for (const data of seriesData.values()) {
@@ -175,14 +172,11 @@ function processChartData(chartData, commits) {
         }
     }
 
-    // Handle case where no data was found.
     if (lastDataIndex < 0) {
-        console.warn("No data points found in any series!");
         firstDataIndex = 0;
         lastDataIndex = commits.length - 1;
     }
 
-    // Slice to show only the range with data.
     const startIndex = Math.max(0, firstDataIndex);
     const endIndex = lastDataIndex + 1;
     const chartCommits = processedCommits.slice(startIndex, endIndex);
@@ -192,22 +186,16 @@ function processChartData(chartData, commits) {
         slicedSeriesData.set(name, data.slice(startIndex, endIndex));
     }
 
-    console.log(`Processed ${commits.length} commits, showing range ${startIndex}-${endIndex}`);
-
     return { seriesData: slicedSeriesData, chartCommits };
 }
 
 /**
  * Calculates summary statistics for the latest data point.
- *
- * @param {Map} seriesData - Map of series names to data arrays.
- * @returns {Object} Object containing results array and fastestTime.
  */
 function calculateSummary(seriesData) {
     const latestResults = new Map();
 
     for (const [seriesName, data] of seriesData.entries()) {
-        // Find the most recent non-null value.
         for (let i = data.length - 1; i >= 0; i--) {
             if (data[i] !== null) {
                 latestResults.set(seriesName, data[i].value);
@@ -216,6 +204,10 @@ function calculateSummary(seriesData) {
         }
     }
 
+    if (latestResults.size === 0) {
+        return { results: [], fastestTime: 0 };
+    }
+
     const fastestTime = Math.min(...latestResults.values());
     const sortedResults = Array.from(latestResults.entries())
         .sort((a, b) => a[1] - b[1]);
@@ -223,26 +215,96 @@ function calculateSummary(seriesData) {
     return { results: sortedResults, fastestTime };
 }
 
+// ============================================================================
+// HTML Generation Functions
+// ============================================================================
+
+/**
+ * Creates HTML for a benchmark group container.
+ */
+function createGroupHTML(groupId, groupConfig) {
+    return `
+        <div id="${groupId}-group" class="benchmark-set collapsed">
+            <div class="benchmark-header">
+                <div class="title-wrapper">
+                    <span class="collapse-icon">▼</span>
+                    <h2 class="benchmark-title">${groupConfig.title}</h2>
+                </div>
+                <div class="benchmark-meta">
+                    <span>${groupConfig.charts.length} charts</span>
+                </div>
+            </div>
+            <div class="benchmark-graphs" id="${groupId}-charts">
+                <!-- Charts will be rendered here -->
+            </div>
+        </div>
+    `;
+}
+
+/**
+ * Creates HTML for a single chart within a group.
+ */
+function createChartHTML(groupId, chartName) {
+    const prefix = makeId(groupId, chartName, '');
+    return `
+        <div class="chart-section" id="${prefix}section">
+            <div class="summary-section">
+                <div id="${prefix}summary" class="scores-list"></div>
+                <p class="scores-explanation">
+                    Query time | Ratio to fastest (lower is better)
+                </p>
+            </div>
+            <div class="chart-container">
+                <div class="chart-header">
+                    <h3 class="chart-title">${chartName}</h3>
+                    <div class="chart-controls">
+                        <span id="${prefix}info" class="control-info-compact">Loading...</span>
+                        <div class="zoom-controls">
+                            <button id="${prefix}zoom-out-large" class="zoom-btn">−−</button>
+                            <button id="${prefix}zoom-out-small" class="zoom-btn">−</button>
+                            <button id="${prefix}zoom-in-small" class="zoom-btn">+</button>
+                            <button id="${prefix}zoom-in-large" class="zoom-btn">++</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="chart-wrapper">
+                    <canvas id="${prefix}canvas"></canvas>
+                </div>
+                <div id="${prefix}tooltip" class="chartjs-tooltip"></div>
+                <div class="x-axis-label">Commit</div>
+                <div class="timeline-scrollbar-container" id="${prefix}scrollbar-container">
+                    <div id="${prefix}scrollbar-content"></div>
+                </div>
+            </div>
+        </div>
+    `;
+}
+
 // ============================================================================
 // Rendering Functions
 // ============================================================================
 
 /**
  * Renders the summary table showing latest benchmark results.
- *
- * @param {Object} summary - Summary data containing results and fastestTime.
  */
-function renderSummary({ results, fastestTime }) {
-    const summaryList = document.getElementById("summary-list");
+function renderSummary(summaryElementId, summary, groupConfig) {
+    const summaryList = document.getElementById(summaryElementId);
+    if (!summaryList) return;
+
     summaryList.innerHTML = "";
 
-    results.forEach(([name, time], index) => {
-        const ratio = time / fastestTime;
+    if (summary.results.length === 0) {
+        summaryList.innerHTML = '<div class="score-item">No data available</div>';
+        return;
+    }
+
+    summary.results.forEach(([name, time], index) => {
+        const ratio = time / summary.fastestTime;
         const item = document.createElement("div");
         item.className = "score-item";
         item.innerHTML = `
             <span class="score-rank">#${index + 1}</span>
-            <span class="score-series" style="color: ${CHART_CONFIG.seriesColors[name]}">${name}</span>
+            <span class="score-series" style="color: ${groupConfig.seriesColors[name]}">${name}</span>
             <div class="score-metrics">
                 <span class="score-runtime">${formatTime(time)}</span>
                 <span class="score-ratio">${ratio.toFixed(2)}x</span>
@@ -250,9 +312,6 @@ function renderSummary({ results, fastestTime }) {
         `;
         summaryList.appendChild(item);
     });
-
-    // Show the benchmark section.
-    document.getElementById("random-access-benchmark").classList.remove("hidden");
 }
 
 /**
@@ -269,18 +328,15 @@ function setupCollapsibleBenchmarks() {
 
 /**
  * Creates Chart.js datasets from series data.
- *
- * @param {Map} seriesData - Map of series names to data arrays.
- * @returns {Array} Array of Chart.js dataset objects.
  */
-function createDatasets(seriesData) {
-    return CHART_CONFIG.seriesNames.map(name => {
+function createDatasets(seriesData, groupConfig) {
+    return groupConfig.seriesNames.map(name => {
         const data = seriesData.get(name);
         return {
             label: name,
-            data: data.map(d => d?.value ?? null),
-            borderColor: CHART_CONFIG.seriesColors[name],
-            backgroundColor: CHART_CONFIG.seriesColors[name],
+            data: data ? data.map(d => d?.value ?? null) : [],
+            borderColor: groupConfig.seriesColors[name],
+            backgroundColor: groupConfig.seriesColors[name],
             borderWidth: 1.5,
             borderJoinStyle: 'round',
             pointRadius: 2,
@@ -296,8 +352,6 @@ function createDatasets(seriesData) {
 
 /**
  * Creates the vertical line plugin for Chart.js.
- *
- * @returns {Object} Chart.js plugin object.
  */
 function createVerticalLinePlugin() {
     return {
@@ -323,32 +377,13 @@ function createVerticalLinePlugin() {
     };
 }
 
-/**
- * Handles click events on chart data points.
- *
- * @param {Array} elements - Array of clicked chart elements.
- * @param {Array} chartCommits - Array of commit objects.
- */
-function handleChartClick(elements, chartCommits) {
-    if (elements.length > 0) {
-        const index = elements[0].index;
-        const commit = chartCommits[index];
-        if (commit?.url) {
-            window.open(commit.url, "_blank");
-        }
-    }
-}
-
 /**
  * Creates tooltip configuration for Chart.js.
- *
- * @param {Array} chartCommits - Array of commit objects.
- * @returns {Object} Chart.js tooltip configuration.
  */
-function createTooltipConfig(chartCommits) {
+function createTooltipConfig(chartCommits, tooltipElementId) {
     return {
         enabled: false,
-        external: (context) => renderExternalTooltip(context),
+        external: (context) => renderExternalTooltip(context, tooltipElementId),
         callbacks: {
             footer: (tooltipItems) => getTooltipFooter(tooltipItems, chartCommits)
         }
@@ -357,17 +392,12 @@ function createTooltipConfig(chartCommits) {
 
 /**
  * Gets tooltip footer content with commit details.
- *
- * @param {Array} tooltipItems - Array of tooltip items.
- * @param {Array} chartCommits - Array of commit objects.
- * @returns {Array} Array of footer lines.
  */
 function getTooltipFooter(tooltipItems, chartCommits) {
     if (tooltipItems.length === 0) return [];
     const commit = chartCommits[tooltipItems[0].dataIndex];
     if (!commit) return [];
 
-    // Handle timestamp - it's Unix seconds from Rust.
     const date = new Date(commit.timestamp * 1000).toLocaleDateString();
 
     return [
@@ -378,20 +408,18 @@ function getTooltipFooter(tooltipItems, chartCommits) {
 
 /**
  * Renders the external tooltip element.
- *
- * @param {Object} context - Chart.js tooltip context.
  */
-function renderExternalTooltip(context) {
-    const tooltipEl = document.getElementById('chartjs-tooltip');
+function renderExternalTooltip(context, tooltipElementId) {
+    const tooltipEl = document.getElementById(tooltipElementId);
+    if (!tooltipEl) return;
+
     const tooltipModel = context.tooltip;
 
-    // Hide if no tooltip.
     if (tooltipModel.opacity === 0) {
         tooltipEl.classList.remove('active');
         return;
     }
 
-    // Set tooltip content.
     if (tooltipModel.body) {
         tooltipEl.innerHTML = buildTooltipHTML(tooltipModel);
         positionTooltip(tooltipEl, context, tooltipModel);
@@ -400,9 +428,6 @@ function renderExternalTooltip(context) {
 
 /**
  * Builds HTML content for the tooltip.
- *
- * @param {Object} tooltipModel - Chart.js tooltip model.
- * @returns {string} HTML string for tooltip content.
  */
 function buildTooltipHTML(tooltipModel) {
     const titleLines = tooltipModel.title || [];
@@ -410,13 +435,11 @@ function buildTooltipHTML(tooltipModel) {
 
     let html = '<div class="chartjs-tooltip-body">';
 
-    // Add title (commit ID).
     titleLines.forEach(title => {
         html += `<div style="font-weight: bold; margin-bottom: 4px;">${title}</div>`;
     });
 
-    // Add body (series values) - sorted high to low.
-    const sortedItems = tooltipModel.dataPoints.sort((a, b) => b.parsed.y - a.parsed.y);
+    const sortedItems = [...tooltipModel.dataPoints].sort((a, b) => b.parsed.y - a.parsed.y);
     sortedItems.forEach((item) => {
         const color = item.dataset.borderColor;
         const value = item.formattedValue;
@@ -429,7 +452,6 @@ function buildTooltipHTML(tooltipModel) {
         `;
     });
 
-    // Add footer (commit details).
     if (footerLines.length > 0) {
         html += '<div class="chartjs-tooltip-footer">';
         footerLines.forEach(footer => {
@@ -444,10 +466,6 @@ function buildTooltipHTML(tooltipModel) {
 
 /**
  * Positions the tooltip below the chart.
- *
- * @param {HTMLElement} tooltipEl - The tooltip element.
- * @param {Object} context - Chart.js context.
- * @param {Object} tooltipModel - Chart.js tooltip model.
  */
 function positionTooltip(tooltipEl, context, tooltipModel) {
     const canvas = context.chart.canvas;
@@ -461,11 +479,8 @@ function positionTooltip(tooltipEl, context, tooltipModel) {
 
 /**
  * Creates chart options configuration.
- *
- * @param {Array} chartCommits - Array of commit objects.
- * @returns {Object} Chart.js options configuration.
  */
-function createChartOptions(chartCommits) {
+function createChartOptions(chartCommits, tooltipElementId) {
     return {
         responsive: true,
         maintainAspectRatio: false,
@@ -484,12 +499,12 @@ function createChartOptions(chartCommits) {
                     minRotation: 45,
                     autoSkipPadding: 10,
                 },
-                min: Math.max(0, chartCommits.length - CHART_CONFIG.defaultVisibleCommits),
+                min: Math.max(0, chartCommits.length - CONFIG.defaultVisibleCommits),
             },
             y: {
                 title: {
                     display: true,
-                    text: CHART_CONFIG.yAxisLabel,
+                    text: CONFIG.yAxisLabel,
                 },
                 beginAtZero: true,
             },
@@ -497,36 +512,43 @@ function createChartOptions(chartCommits) {
         plugins: {
             verticalLine: {},
             legend: { position: "top" },
-            tooltip: createTooltipConfig(chartCommits),
+            tooltip: createTooltipConfig(chartCommits, tooltipElementId),
         },
         onClick: (event, elements) => handleChartClick(elements, chartCommits),
     };
 }
 
 /**
- * Creates the Chart.js instance.
- *
- * @param {Array} chartCommits - Array of commit objects.
- * @param {Map} seriesData - Map of series names to data arrays.
- * @returns {Object} The Chart.js instance.
+ * Handles click events on chart data points.
+ */
+function handleChartClick(elements, chartCommits) {
+    if (elements.length > 0) {
+        const index = elements[0].index;
+        const commit = chartCommits[index];
+        if (commit?.url) {
+            window.open(commit.url, "_blank");
+        }
+    }
+}
+
+/**
+ * Creates a Chart.js instance.
  */
-function createChart(chartCommits, seriesData) {
-    const ctx = document.getElementById("chart").getContext("2d");
-    const datasets = createDatasets(seriesData);
+function createChartInstance(canvasId, chartCommits, seriesData, groupConfig, tooltipElementId) {
+    const canvas = document.getElementById(canvasId);
+    if (!canvas) return null;
 
-    // Register vertical line plugin.
-    Chart.register(createVerticalLinePlugin());
+    const ctx = canvas.getContext("2d");
+    const datasets = createDatasets(seriesData, groupConfig);
 
-    const chartInstance = new Chart(ctx, {
+    return new Chart(ctx, {
         type: "line",
         data: {
             labels: chartCommits.map(c => c.id.slice(0, 7)),
             datasets: datasets,
         },
-        options: createChartOptions(chartCommits),
+        options: createChartOptions(chartCommits, tooltipElementId),
     });
-
-    return chartInstance;
 }
 
 // ============================================================================
@@ -535,26 +557,20 @@ function createChart(chartCommits, seriesData) {
 
 /**
  * Creates chart context for timeline state management.
- *
- * @param {number} totalCommits - Total number of commits.
- * @returns {Object} Chart context object.
  */
 function createChartContext(totalCommits) {
     return {
         totalCommits,
-        minWindowSize: CHART_CONFIG.minWindowSize,
+        minWindowSize: CONFIG.minWindowSize,
         maxWindowSize: totalCommits,
-        defaultWindowSize: CHART_CONFIG.defaultVisibleCommits,
-        currentWindowSize: CHART_CONFIG.defaultVisibleCommits,
+        defaultWindowSize: CONFIG.defaultVisibleCommits,
+        currentWindowSize: Math.min(CONFIG.defaultVisibleCommits, totalCommits),
         currentPosition: totalCommits
     };
 }
 
 /**
  * Updates scrollbar dimensions to match current window size.
- *
- * @param {Object} elements - DOM elements for timeline controls.
- * @param {Object} chartContext - Chart context state.
  */
 function updateScrollbarDimensions(elements, chartContext) {
     const containerWidth = elements.scrollbarContainer.clientWidth;
@@ -565,11 +581,6 @@ function updateScrollbarDimensions(elements, chartContext) {
 
 /**
  * Updates chart view and UI to reflect current state.
- *
- * @param {Object} elements - DOM elements for timeline controls.
- * @param {Object} chartContext - Chart context state.
- * @param {Object} chartInstance - The Chart.js instance.
- * @param {boolean} updateScrollbar - Whether to update scrollbar position.
  */
 function updateChartView(elements, chartContext, chartInstance, updateScrollbar) {
     const windowSize = chartContext.currentWindowSize;
@@ -578,16 +589,13 @@ function updateChartView(elements, chartContext, chartInstance, updateScrollbar)
     const endIndex = Math.min(position, chartContext.totalCommits);
     const startIndex = Math.max(0, endIndex - windowSize);
 
-    // Update chart x-axis scale.
     chartInstance.options.scales.x.min = startIndex;
     chartInstance.options.scales.x.max = endIndex - 1;
     chartInstance.update('none');
 
-    // Update UI labels.
     elements.controlInfoText.textContent =
         `Showing commits ${startIndex + 1}-${endIndex} of ${chartContext.totalCommits} (${windowSize} visible)`;
 
-    // Update scrollbar.
     if (updateScrollbar) {
         updateScrollbarDimensions(elements, chartContext);
         const scrollPercentage = (endIndex - windowSize) / (chartContext.totalCommits - windowSize);
@@ -598,10 +606,6 @@ function updateChartView(elements, chartContext, chartInstance, updateScrollbar)
 
 /**
  * Sets up scrollbar event handler.
- *
- * @param {Object} elements - DOM elements for timeline controls.
- * @param {Object} chartContext - Chart context state.
- * @param {Object} chartInstance - The Chart.js instance.
  */
 function setupScrollbarHandler(elements, chartContext, chartInstance) {
     elements.scrollbarContainer.addEventListener("scroll", () => {
@@ -619,27 +623,19 @@ function setupScrollbarHandler(elements, chartContext, chartInstance) {
 
 /**
  * Sets up zoom button click handlers.
- *
- * @param {Object} elements - DOM elements for timeline controls.
- * @param {Object} chartContext - Chart context state.
- * @param {Object} chartInstance - The Chart.js instance.
  */
 function setupZoomButtons(elements, chartContext, chartInstance) {
     const zoom = (step, direction) => {
         const currentWindowSize = chartContext.currentWindowSize;
 
-        // Snap to next multiple of step in the given direction.
         let newWindowSize;
         if (direction > 0) {
-            // Zoom out: go to next higher multiple.
             newWindowSize = Math.ceil((currentWindowSize + 1) / step) * step;
         } else {
-            // Zoom in: go to next lower multiple.
             newWindowSize = Math.floor((currentWindowSize - 1) / step) * step;
         }
         newWindowSize = Math.max(chartContext.minWindowSize, Math.min(chartContext.maxWindowSize, newWindowSize));
 
-        // Keep centered while zooming.
         const currentStart = chartContext.currentPosition - currentWindowSize;
         const currentCenter = currentStart + currentWindowSize / 2;
         chartContext.currentWindowSize = newWindowSize;
@@ -651,7 +647,6 @@ function setupZoomButtons(elements, chartContext, chartInstance) {
         updateChartView(elements, chartContext, chartInstance, true);
     };
 
-    // Small zoom: 25 commits, large zoom: 250 commits.
     elements.zoomInSmallBtn?.addEventListener("click", () => zoom(25, -1));
     elements.zoomInLargeBtn?.addEventListener("click", () => zoom(250, -1));
     elements.zoomOutSmallBtn?.addEventListener("click", () => zoom(25, 1));
@@ -660,10 +655,6 @@ function setupZoomButtons(elements, chartContext, chartInstance) {
 
 /**
  * Sets up mouse wheel pan handler.
- *
- * @param {Object} elements - DOM elements for timeline controls.
- * @param {Object} chartContext - Chart context state.
- * @param {Object} chartInstance - The Chart.js instance.
  */
 function setupWheelPanHandler(elements, chartContext, chartInstance) {
     elements.chartCanvas.addEventListener("wheel", (e) => {
@@ -682,84 +673,178 @@ function setupWheelPanHandler(elements, chartContext, chartInstance) {
 }
 
 /**
- * Initializes timeline controls for chart navigation.
- *
- * @param {Object} chartInstance - The Chart.js instance.
- * @param {Array} chartCommits - Array of commit objects.
+ * Initializes timeline controls for a chart.
  */
-function initializeTimelineControls(chartInstance, chartCommits) {
+function initializeTimelineControls(chartInstance, chartCommits, prefix) {
     const elements = {
-        scrollbarContainer: document.querySelector(".timeline-scrollbar-container"),
-        scrollbarContent: document.getElementById("timeline-scrollbar-content"),
-        controlInfoText: document.getElementById("control-info-text"),
-        chartCanvas: document.getElementById("chart"),
-        zoomInSmallBtn: document.getElementById("zoom-in-small"),
-        zoomInLargeBtn: document.getElementById("zoom-in-large"),
-        zoomOutSmallBtn: document.getElementById("zoom-out-small"),
-        zoomOutLargeBtn: document.getElementById("zoom-out-large"),
+        scrollbarContainer: document.getElementById(`${prefix}scrollbar-container`),
+        scrollbarContent: document.getElementById(`${prefix}scrollbar-content`),
+        controlInfoText: document.getElementById(`${prefix}info`),
+        chartCanvas: document.getElementById(`${prefix}canvas`),
+        zoomInSmallBtn: document.getElementById(`${prefix}zoom-in-small`),
+        zoomInLargeBtn: document.getElementById(`${prefix}zoom-in-large`),
+        zoomOutSmallBtn: document.getElementById(`${prefix}zoom-out-small`),
+        zoomOutLargeBtn: document.getElementById(`${prefix}zoom-out-large`),
     };
 
     const chartContext = createChartContext(chartCommits.length);
 
-    // Handle edge cases.
     if (chartContext.totalCommits === 0) {
-        elements.scrollbarContainer.style.display = "none";
-        elements.controlInfoText.textContent = "No data available";
+        if (elements.scrollbarContainer) elements.scrollbarContainer.style.display = "none";
+        if (elements.controlInfoText) elements.controlInfoText.textContent = "No data available";
         return;
     }
 
     if (chartContext.totalCommits === 1) {
-        elements.scrollbarContainer.style.display = "none";
+        if (elements.scrollbarContainer) elements.scrollbarContainer.style.display = "none";
         chartContext.maxWindowSize = 1;
     }
 
-    // Setup event handlers.
     setupScrollbarHandler(elements, chartContext, chartInstance);
     setupZoomButtons(elements, chartContext, chartInstance);
     setupWheelPanHandler(elements, chartContext, chartInstance);
 
-    // Initial render.
     updateChartView(elements, chartContext, chartInstance, true);
 }
 
+// ============================================================================
+// Main Rendering Functions
+// ============================================================================
+
+/**
+ * Renders a single chart within a group.
+ */
+async function renderChart(wasm, groupId, chartName, groupConfig, commits) {
+    const prefix = makeId(groupId, chartName, '');
+
+    try {
+        const chartData = await loadChartData(wasm, groupId, chartName);
+        const { seriesData, chartCommits } = processChartData(chartData, commits, groupConfig);
+        const summaryStats = calculateSummary(seriesData);
+
+        renderSummary(`${prefix}summary`, summaryStats, groupConfig);
+
+        const chartInstance = createChartInstance(
+            `${prefix}canvas`,
+            chartCommits,
+            seriesData,
+            groupConfig,
+            `${prefix}tooltip`
+        );
+
+        if (chartInstance) {
+            initializeTimelineControls(chartInstance, chartCommits, prefix);
+        }
+
+        return true;
+    } catch (error) {
+        console.error(`Failed to render chart ${groupId}/${chartName}:`, error);
+        const infoEl = document.getElementById(`${prefix}info`);
+        if (infoEl) infoEl.textContent = `Error: ${error.message}`;
+        return false;
+    }
+}
+
+/**
+ * Creates chart placeholders for a group (immediate, no data loading).
+ */
+function createChartPlaceholders(groupId, groupConfig) {
+    const chartsContainer = document.getElementById(`${groupId}-charts`);
+    if (!chartsContainer) return;
+
+    chartsContainer.innerHTML = groupConfig.charts
+        .map(chartName => createChartHTML(groupId, chartName))
+        .join('');
+}
+
+/**
+ * Loads all charts in a group in the background.
+ * Returns a promise that resolves when all charts are loaded.
+ */
+async function loadGroupCharts(wasm, groupId, groupConfig, commits) {
+    let successCount = 0;
+
+    // Load charts sequentially to avoid overwhelming the server.
+    for (const chartName of groupConfig.charts) {
+        const success = await renderChart(wasm, groupId, chartName, groupConfig, commits);
+        if (success) successCount++;
+
+        // Yield to browser to paint after each chart.
+        await new Promise(resolve => setTimeout(resolve, 0));
+    }
+
+    console.log(`Rendered ${successCount}/${groupConfig.charts.length} charts in ${groupId}`);
+    return successCount;
+}
+
 // ============================================================================
 // Main Orchestration
 // ============================================================================
 
 /**
- * Main function that orchestrates the entire benchmark chart initialization.
+ * Main function that orchestrates the entire benchmark page initialization.
  */
 async function main() {
     try {
-        // Step 1: Load WASM module.
+        // Register the vertical line plugin once.
+        Chart.register(createVerticalLinePlugin());
+
+        // Load WASM module.
         const wasm = await loadWasmModule();
 
-        // Step 2: Load summary (fast - metadata only, no series values).
+        // Load summary (fast - metadata only).
         const summary = await loadBenchmarkSummary(wasm);
 
-        // Log available groups and charts.
-        console.log("Available groups:", Object.keys(summary.groups));
-        const targetGroupInfo = summary.groups[CHART_CONFIG.targetGroup];
-        if (targetGroupInfo) {
-            console.log(`Charts in '${CHART_CONFIG.targetGroup}':`, Object.keys(targetGroupInfo.charts));
+        console.log("Available groups from server:", Object.keys(summary.groups));
+        console.log("Configured groups:", Object.keys(BENCHMARK_GROUPS));
+
+        // Get the container for all groups.
+        const container = document.getElementById("benchmarks-container");
+        if (!container) {
+            throw new Error("Benchmarks container not found");
+        }
+        console.log("Found container:", container);
+
+        // Step 1: Create all group containers immediately.
+        let groupsHTML = '';
+        const activeGroups = [];
+        for (const [groupId, groupConfig] of Object.entries(BENCHMARK_GROUPS)) {
+            console.log(`Checking group '${groupId}':`, summary.groups[groupId] ? "found" : "NOT FOUND");
+            if (summary.groups[groupId]) {
+                groupsHTML += createGroupHTML(groupId, groupConfig);
+                activeGroups.push([groupId, groupConfig]);
+            } else {
+                console.warn(`Group '${groupId}' not found in server data, skipping`);
+            }
+        }
+        console.log("Active groups:", activeGroups.map(g => g[0]));
+        console.log("Groups HTML length:", groupsHTML.length);
+        container.innerHTML = groupsHTML;
+
+        // Step 2: Create all chart placeholders immediately.
+        for (const [groupId, groupConfig] of activeGroups) {
+            createChartPlaceholders(groupId, groupConfig);
         }
 
-        // Step 3: Load chart data for the target group/chart (lazy).
-        const chartData = await loadChartData(wasm, CHART_CONFIG.targetGroup, CHART_CONFIG.targetChart);
+        // Step 3: Set up collapsible behavior.
+        setupCollapsibleBenchmarks();
 
-        // Step 4: Process and render.
-        const { seriesData, chartCommits } = processChartData(chartData, summary.commits);
-        const summaryStats = calculateSummary(seriesData);
+        // Step 4: Show status - UI is ready, data loading in background.
+        setStatus(`Loading ${activeGroups.reduce((n, [_, c]) => n + c.charts.length, 0)} charts...`, "loading");
 
-        // Render UI.
-        renderSummary(summaryStats);
-        const chartInstance = createChart(chartCommits, seriesData);
-        initializeTimelineControls(chartInstance, chartCommits);
+        // Step 5: Yield to browser to paint the UI before loading data.
+        await new Promise(resolve => setTimeout(resolve, 0));
 
-        // Set up collapsible behavior.
-        setupCollapsibleBenchmarks();
+        // Step 6: Load chart data in background.
+        // Load groups in parallel, charts within each group sequentially.
+        const loadPromises = activeGroups.map(([groupId, groupConfig]) =>
+            loadGroupCharts(wasm, groupId, groupConfig, summary.commits)
+        );
 
-        setStatus(`Loaded ${summary.commits.length} commits, showing ${chartCommits.length} with data`, "success");
+        // Wait for all to complete and update status.
+        const results = await Promise.all(loadPromises);
+        const totalCharts = results.reduce((a, b) => a + b, 0);
+        setStatus(`Loaded ${totalCharts} charts across ${activeGroups.length} groups`, "success");
 
     } catch (error) {
         console.error("Error:", error);

From 361a05fddb2f8ecc32141fb236aec4db16ae422e Mon Sep 17 00:00:00 2001
From: Connor Tsui <connor.tsui20@gmail.com>
Date: Thu, 4 Dec 2025 17:25:35 -0500
Subject: [PATCH 21/30] it actually loads fast now

Signed-off-by: Connor Tsui <connor.tsui20@gmail.com>
---
 vortex-wasm/wasm-test.js | 533 ++++++++++++++++++++++++++++++++-------
 1 file changed, 437 insertions(+), 96 deletions(-)

diff --git a/vortex-wasm/wasm-test.js b/vortex-wasm/wasm-test.js
index b43a46ae7f9..2662dbd0747 100644
--- a/vortex-wasm/wasm-test.js
+++ b/vortex-wasm/wasm-test.js
@@ -103,14 +103,36 @@ function makeId(groupId, chartName, suffix) {
 // ============================================================================
 
 /**
- * Loads and initializes the WASM module.
+ * Loads and initializes the WASM module with timeout.
  */
 async function loadWasmModule() {
     setStatus("Loading WASM module...");
-    const wasm = await import(CONFIG.wasmModulePath);
-    await wasm.default();
-    console.log("WASM loaded:", wasm.get_version());
-    return wasm;
+    console.log("[loadWasmModule] Starting import...");
+
+    const timeout = (ms) => new Promise((_, reject) =>
+        setTimeout(() => reject(new Error(`Timeout after ${ms}ms`)), ms)
+    );
+
+    try {
+        // Race import against timeout.
+        const wasm = await Promise.race([
+            import(CONFIG.wasmModulePath),
+            timeout(10000)
+        ]);
+        console.log("[loadWasmModule] Import complete, initializing...");
+
+        // Race init against timeout.
+        await Promise.race([
+            wasm.default(),
+            timeout(10000)
+        ]);
+        console.log("[loadWasmModule] Initialized:", wasm.get_version());
+
+        return wasm;
+    } catch (error) {
+        console.error("[loadWasmModule] Failed:", error);
+        throw error;
+    }
 }
 
 /**
@@ -215,6 +237,124 @@ function calculateSummary(seriesData) {
     return { results: sortedResults, fastestTime };
 }
 
+// ============================================================================
+// Group Summary Data Storage
+// ============================================================================
+
+/**
+ * Storage for per-chart latest values. Used for calculating group summaries.
+ * Structure: groupId -> chartName -> Map<seriesName, latestValueMs>
+ */
+const groupChartData = new Map();
+
+/**
+ * Stores the latest value for each series in a chart.
+ */
+function storeChartData(groupId, chartName, seriesData) {
+    if (!groupChartData.has(groupId)) {
+        groupChartData.set(groupId, new Map());
+    }
+    const groupData = groupChartData.get(groupId);
+
+    const latestValues = new Map();
+    for (const [seriesName, data] of seriesData.entries()) {
+        for (let i = data.length - 1; i >= 0; i--) {
+            if (data[i] !== null) {
+                latestValues.set(seriesName, data[i].value);
+                break;
+            }
+        }
+    }
+    groupData.set(chartName, latestValues);
+}
+
+/**
+ * Calculates group-level summary for multi-chart groups (like clickbench).
+ *
+ * For clickbench scoring:
+ * - Score: Geometric mean of (query_time + 10ms) / (fastest_time + 10ms) across all queries
+ * - Total: Sum of all query times
+ */
+function calculateGroupSummary(groupId, groupConfig) {
+    const groupData = groupChartData.get(groupId);
+    if (!groupData || groupData.size === 0) {
+        return { results: [], isMultiChart: false };
+    }
+
+    const isMultiChart = groupConfig.charts.length > 1;
+
+    if (!isMultiChart) {
+        // Single chart group: use simple summary (latest values).
+        const chartData = groupData.values().next().value;
+        if (!chartData || chartData.size === 0) {
+            return { results: [], isMultiChart: false };
+        }
+
+        const fastestTime = Math.min(...chartData.values());
+        const sortedResults = Array.from(chartData.entries())
+            .sort((a, b) => a[1] - b[1])
+            .map(([name, time]) => ({
+                name,
+                time,
+                ratio: time / fastestTime,
+            }));
+
+        return { results: sortedResults, isMultiChart: false };
+    }
+
+    // Multi-chart group: calculate geometric mean score and total time.
+    const SHIFT_MS = 10; // Constant shift to avoid division issues with small values.
+    const seriesStats = new Map(); // seriesName -> { ratios: [], total: 0 }
+
+    // Initialize stats for all series.
+    for (const seriesName of groupConfig.seriesNames) {
+        seriesStats.set(seriesName, { ratios: [], total: 0 });
+    }
+
+    // Process each chart (query).
+    for (const [chartName, chartValues] of groupData.entries()) {
+        // Find fastest time for this query.
+        let fastestTime = Infinity;
+        for (const time of chartValues.values()) {
+            if (time < fastestTime) fastestTime = time;
+        }
+
+        // Calculate ratio for each series.
+        for (const seriesName of groupConfig.seriesNames) {
+            const stats = seriesStats.get(seriesName);
+            const time = chartValues.get(seriesName);
+
+            if (time !== undefined) {
+                const ratio = (time + SHIFT_MS) / (fastestTime + SHIFT_MS);
+                stats.ratios.push(ratio);
+                stats.total += time;
+            }
+        }
+    }
+
+    // Calculate geometric mean and build results.
+    const results = [];
+    for (const [seriesName, stats] of seriesStats.entries()) {
+        if (stats.ratios.length === 0) continue;
+
+        // Geometric mean = exp(mean(log(ratios))).
+        const logSum = stats.ratios.reduce((sum, r) => sum + Math.log(r), 0);
+        const geometricMean = Math.exp(logSum / stats.ratios.length);
+
+        results.push({
+            name: seriesName,
+            score: geometricMean,
+            total: stats.total,
+            queryCount: stats.ratios.length,
+        });
+    }
+
+    // Sort by score (lower is better).
+    results.sort((a, b) => a.score - b.score);
+
+    return { results, isMultiChart: true };
+}
+
 // ============================================================================
 // HTML Generation Functions
 // ============================================================================
@@ -231,9 +371,13 @@ function createGroupHTML(groupId, groupConfig) {
                     <h2 class="benchmark-title">${groupConfig.title}</h2>
                 </div>
                 <div class="benchmark-meta">
-                    <span>${groupConfig.charts.length} charts</span>
+                    <span id="${groupId}-status">0/${groupConfig.charts.length} charts loaded</span>
                 </div>
             </div>
+            <div class="summary-section">
+                <div id="${groupId}-summary" class="scores-list"></div>
+                <p class="scores-explanation" id="${groupId}-summary-explanation"></p>
+            </div>
             <div class="benchmark-graphs" id="${groupId}-charts">
                 <!-- Charts will be rendered here -->
             </div>
@@ -248,12 +392,6 @@ function createChartHTML(groupId, chartName) {
     const prefix = makeId(groupId, chartName, '');
     return `
         <div class="chart-section" id="${prefix}section">
-            <div class="summary-section">
-                <div id="${prefix}summary" class="scores-list"></div>
-                <p class="scores-explanation">
-                    Query time | Ratio to fastest (lower is better)
-                </p>
-            </div>
             <div class="chart-container">
                 <div class="chart-header">
                     <h3 class="chart-title">${chartName}</h3>
@@ -285,33 +423,76 @@ function createChartHTML(groupId, chartName) {
 // ============================================================================
 
 /**
- * Renders the summary table showing latest benchmark results.
+ * Renders the group-level summary.
  */
-function renderSummary(summaryElementId, summary, groupConfig) {
-    const summaryList = document.getElementById(summaryElementId);
+function renderGroupSummary(groupId, groupConfig) {
+    const summaryList = document.getElementById(`${groupId}-summary`);
+    const explanationEl = document.getElementById(`${groupId}-summary-explanation`);
     if (!summaryList) return;
 
+    const summary = calculateGroupSummary(groupId, groupConfig);
+
     summaryList.innerHTML = "";
 
     if (summary.results.length === 0) {
         summaryList.innerHTML = '<div class="score-item">No data available</div>';
+        if (explanationEl) explanationEl.textContent = "";
         return;
     }
 
-    summary.results.forEach(([name, time], index) => {
-        const ratio = time / summary.fastestTime;
-        const item = document.createElement("div");
-        item.className = "score-item";
-        item.innerHTML = `
-            <span class="score-rank">#${index + 1}</span>
-            <span class="score-series" style="color: ${groupConfig.seriesColors[name]}">${name}</span>
-            <div class="score-metrics">
-                <span class="score-runtime">${formatTime(time)}</span>
-                <span class="score-ratio">${ratio.toFixed(2)}x</span>
-            </div>
-        `;
-        summaryList.appendChild(item);
-    });
+    if (summary.isMultiChart) {
+        // Multi-chart group (clickbench): show score and total.
+        summary.results.forEach((result, index) => {
+            const item = document.createElement("div");
+            item.className = "score-item";
+            item.innerHTML = `
+                <span class="score-rank">#${index + 1}</span>
+                <span class="score-series" style="color: ${groupConfig.seriesColors[result.name]}">${result.name}</span>
+                <div class="score-metrics">
+                    <span class="score-runtime">${result.score.toFixed(2)}x</span>
+                    <span class="score-ratio">${formatTime(result.total)}</span>
+                </div>
+            `;
+            summaryList.appendChild(item);
+        });
+
+        if (explanationEl) {
+            explanationEl.textContent = "Score: geometric mean of query time ratio to fastest with 10ms constant shift | Total: sum of all query times (lower is better)";
+        }
+    } else {
+        // Single-chart group: show time and ratio.
+        summary.results.forEach((result, index) => {
+            const item = document.createElement("div");
+            item.className = "score-item";
+            item.innerHTML = `
+                <span class="score-rank">#${index + 1}</span>
+                <span class="score-series" style="color: ${groupConfig.seriesColors[result.name]}">${result.name}</span>
+                <div class="score-metrics">
+                    <span class="score-runtime">${formatTime(result.time)}</span>
+                    <span class="score-ratio">${result.ratio.toFixed(2)}x</span>
+                </div>
+            `;
+            summaryList.appendChild(item);
+        });
+
+        if (explanationEl) {
+            explanationEl.textContent = "Query time | Ratio to fastest (lower is better)";
+        }
+    }
+}
+
+/**
+ * Resizes all charts in a group sequentially, yielding to the browser between each.
+ * This ensures the first chart appears immediately rather than waiting for all 43.
+ */
+async function resizeGroupChartsSequentially(groupId) {
+    for (const [prefix, chart] of chartInstances.entries()) {
+        if (prefix.startsWith(groupId + '-')) {
+            chart.resize();
+            // Yield to browser to paint before next resize.
+            await new Promise(r => requestAnimationFrame(r));
+        }
+    }
 }
 
 /**
@@ -319,9 +500,16 @@ function renderSummary(summaryElementId, summary, groupConfig) {
  */
 function setupCollapsibleBenchmarks() {
     document.querySelectorAll('.benchmark-header').forEach(header => {
-        header.addEventListener('click', () => {
+        header.addEventListener('click', async () => {
             const benchmarkSet = header.closest('.benchmark-set');
+            const wasCollapsed = benchmarkSet.classList.contains('collapsed');
             benchmarkSet.classList.toggle('collapsed');
+
+            // If we just expanded, resize charts sequentially so first appears immediately.
+            if (wasCollapsed) {
+                const groupId = benchmarkSet.id.replace('-group', '');
+                await resizeGroupChartsSequentially(groupId);
+            }
         });
     });
 }
@@ -346,6 +534,23 @@ function createDatasets(seriesData, groupConfig) {
     });
 }
 
+/**
+ * Creates empty Chart.js datasets (structure only, no data).
+ */
+function createEmptyDatasets(groupConfig) {
+    return groupConfig.seriesNames.map(name => ({
+        label: name,
+        data: [],
+        borderColor: groupConfig.seriesColors[name],
+        backgroundColor: groupConfig.seriesColors[name],
+        borderWidth: 1.5,
+        borderJoinStyle: 'round',
+        pointRadius: 2,
+        tension: 0,
+        spanGaps: true,
+    }));
+}
+
 // ============================================================================
 // Chart Configuration Functions
 // ============================================================================
@@ -480,7 +685,16 @@ function positionTooltip(tooltipEl, context, tooltipModel) {
 /**
  * Creates chart options configuration.
  */
-function createChartOptions(chartCommits, tooltipElementId) {
+function createChartOptions(chartCommits, tooltipElementId, groupId, groupConfig) {
+    const legendConfig = {
+        position: "top",
+    };
+
+    // Add group-linked legend click handler if groupId and groupConfig are provided.
+    if (groupId && groupConfig) {
+        legendConfig.onClick = createGroupLegendClickHandler(groupId, groupConfig);
+    }
+
     return {
         responsive: true,
         maintainAspectRatio: false,
@@ -511,7 +725,7 @@ function createChartOptions(chartCommits, tooltipElementId) {
         },
         plugins: {
             verticalLine: {},
-            legend: { position: "top" },
+            legend: legendConfig,
             tooltip: createTooltipConfig(chartCommits, tooltipElementId),
         },
         onClick: (event, elements) => handleChartClick(elements, chartCommits),
@@ -534,7 +748,7 @@ function handleChartClick(elements, chartCommits) {
 /**
  * Creates a Chart.js instance.
  */
-function createChartInstance(canvasId, chartCommits, seriesData, groupConfig, tooltipElementId) {
+function createChartInstance(canvasId, chartCommits, seriesData, groupId, groupConfig, tooltipElementId) {
     const canvas = document.getElementById(canvasId);
     if (!canvas) return null;
 
@@ -547,7 +761,7 @@ function createChartInstance(canvasId, chartCommits, seriesData, groupConfig, to
             labels: chartCommits.map(c => c.id.slice(0, 7)),
             datasets: datasets,
         },
-        options: createChartOptions(chartCommits, tooltipElementId),
+        options: createChartOptions(chartCommits, tooltipElementId, groupId, groupConfig),
     });
 }
 
@@ -707,12 +921,95 @@ function initializeTimelineControls(chartInstance, chartCommits, prefix) {
     updateChartView(elements, chartContext, chartInstance, true);
 }
 
+// ============================================================================
+// Chart Instance Storage
+// ============================================================================
+
+/**
+ * Global storage for chart instances. Key is the chart prefix (groupId-chartName-).
+ */
+const chartInstances = new Map();
+
+/**
+ * Tracks hidden series per group. When a legend item is clicked, all charts in the group update.
+ * Structure: groupId -> Set<seriesName>
+ */
+const hiddenSeries = new Map();
+
+/**
+ * Creates a legend click handler that syncs visibility across all charts in a group.
+ */
+function createGroupLegendClickHandler(groupId, groupConfig) {
+    return function(e, legendItem, legend) {
+        const seriesName = legendItem.text;
+        const hidden = hiddenSeries.get(groupId) || new Set();
+
+        // Toggle visibility.
+        if (hidden.has(seriesName)) {
+            hidden.delete(seriesName);
+        } else {
+            hidden.add(seriesName);
+        }
+        hiddenSeries.set(groupId, hidden);
+
+        // Update all charts in this group (no animation for performance with many charts).
+        for (const [prefix, chart] of chartInstances.entries()) {
+            if (prefix.startsWith(groupId + '-')) {
+                const datasetIndex = groupConfig.seriesNames.indexOf(seriesName);
+                if (datasetIndex >= 0) {
+                    chart.setDatasetVisibility(datasetIndex, !hidden.has(seriesName));
+                    chart.update('none');
+                }
+            }
+        }
+    };
+}
+
 // ============================================================================
 // Main Rendering Functions
 // ============================================================================
 
 /**
- * Renders a single chart within a group.
+ * Creates an empty Chart.js instance (structure only, no data).
+ * This allows the chart to be visible immediately while data loads.
+ */
+function createEmptyChart(groupId, chartName, groupConfig) {
+    const prefix = makeId(groupId, chartName, '');
+    const canvas = document.getElementById(`${prefix}canvas`);
+    if (!canvas) return null;
+
+    const ctx = canvas.getContext("2d");
+    const datasets = createEmptyDatasets(groupConfig);
+
+    const chart = new Chart(ctx, {
+        type: "line",
+        data: {
+            labels: [],
+            datasets: datasets,
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            scales: {
+                x: { display: true },
+                y: {
+                    display: true,
+                    title: { display: true, text: CONFIG.yAxisLabel },
+                    beginAtZero: true,
+                },
+            },
+            plugins: {
+                legend: { position: "top" },
+            },
+        },
+    });
+
+    chartInstances.set(prefix, chart);
+    return chart;
+}
+
+/**
+ * Updates an existing chart with data.
  */
 async function renderChart(wasm, groupId, chartName, groupConfig, commits) {
     const prefix = makeId(groupId, chartName, '');
@@ -720,17 +1017,36 @@ async function renderChart(wasm, groupId, chartName, groupConfig, commits) {
     try {
         const chartData = await loadChartData(wasm, groupId, chartName);
         const { seriesData, chartCommits } = processChartData(chartData, commits, groupConfig);
-        const summaryStats = calculateSummary(seriesData);
 
-        renderSummary(`${prefix}summary`, summaryStats, groupConfig);
+        // Store chart data for group summary calculation.
+        storeChartData(groupId, chartName, seriesData);
 
-        const chartInstance = createChartInstance(
-            `${prefix}canvas`,
-            chartCommits,
-            seriesData,
-            groupConfig,
-            `${prefix}tooltip`
-        );
+        // Get the existing chart instance.
+        let chartInstance = chartInstances.get(prefix);
+
+        if (chartInstance) {
+            // Update existing chart with new data.
+            chartInstance.data.labels = chartCommits.map(c => c.id.slice(0, 7));
+            chartInstance.data.datasets = createDatasets(seriesData, groupConfig);
+
+            // Update options for tooltips, click handling, and linked legend.
+            chartInstance.options = createChartOptions(chartCommits, `${prefix}tooltip`, groupId, groupConfig);
+
+            chartInstance.update('none');
+        } else {
+            // Fallback: create new chart if empty one wasn't created.
+            chartInstance = createChartInstance(
+                `${prefix}canvas`,
+                chartCommits,
+                seriesData,
+                groupId,
+                groupConfig,
+                `${prefix}tooltip`
+            );
+            if (chartInstance) {
+                chartInstances.set(prefix, chartInstance);
+            }
+        }
 
         if (chartInstance) {
             initializeTimelineControls(chartInstance, chartCommits, prefix);
@@ -758,23 +1074,23 @@ function createChartPlaceholders(groupId, groupConfig) {
 }
 
 /**
- * Loads all charts in a group in the background.
- * Returns a promise that resolves when all charts are loaded.
+ * Creates empty Chart.js instances for all charts in a group.
+ * This makes charts visible immediately (with legend but no data).
  */
-async function loadGroupCharts(wasm, groupId, groupConfig, commits) {
-    let successCount = 0;
-
-    // Load charts sequentially to avoid overwhelming the server.
+function createEmptyCharts(groupId, groupConfig) {
     for (const chartName of groupConfig.charts) {
-        const success = await renderChart(wasm, groupId, chartName, groupConfig, commits);
-        if (success) successCount++;
-
-        // Yield to browser to paint after each chart.
-        await new Promise(resolve => setTimeout(resolve, 0));
+        createEmptyChart(groupId, chartName, groupConfig);
     }
+}
 
-    console.log(`Rendered ${successCount}/${groupConfig.charts.length} charts in ${groupId}`);
-    return successCount;
+/**
+ * Waits one frame (16ms) for the browser to paint.
+ *
+ * This is used to yield control back to the browser between chart renders, so each chart appears
+ * progressively rather than all at once.
+ */
+function waitForPaint() {
+    return new Promise(resolve => setTimeout(resolve, 16));
 }
 
 // ============================================================================
@@ -789,62 +1105,87 @@ async function main() {
         // Register the vertical line plugin once.
         Chart.register(createVerticalLinePlugin());
 
-        // Load WASM module.
-        const wasm = await loadWasmModule();
-
-        // Load summary (fast - metadata only).
-        const summary = await loadBenchmarkSummary(wasm);
-
-        console.log("Available groups from server:", Object.keys(summary.groups));
-        console.log("Configured groups:", Object.keys(BENCHMARK_GROUPS));
-
-        // Get the container for all groups.
+        // Step 1: Create all group containers immediately from JS config.
+        // This happens BEFORE loading any data so users see the UI instantly.
         const container = document.getElementById("benchmarks-container");
         if (!container) {
             throw new Error("Benchmarks container not found");
         }
-        console.log("Found container:", container);
 
-        // Step 1: Create all group containers immediately.
         let groupsHTML = '';
-        const activeGroups = [];
-        for (const [groupId, groupConfig] of Object.entries(BENCHMARK_GROUPS)) {
-            console.log(`Checking group '${groupId}':`, summary.groups[groupId] ? "found" : "NOT FOUND");
-            if (summary.groups[groupId]) {
-                groupsHTML += createGroupHTML(groupId, groupConfig);
-                activeGroups.push([groupId, groupConfig]);
-            } else {
-                console.warn(`Group '${groupId}' not found in server data, skipping`);
-            }
+        const allGroups = Object.entries(BENCHMARK_GROUPS);
+        for (const [groupId, groupConfig] of allGroups) {
+            groupsHTML += createGroupHTML(groupId, groupConfig);
         }
-        console.log("Active groups:", activeGroups.map(g => g[0]));
-        console.log("Groups HTML length:", groupsHTML.length);
         container.innerHTML = groupsHTML;
 
-        // Step 2: Create all chart placeholders immediately.
-        for (const [groupId, groupConfig] of activeGroups) {
+        // Step 2: Create all chart placeholders (HTML structure).
+        for (const [groupId, groupConfig] of allGroups) {
             createChartPlaceholders(groupId, groupConfig);
         }
 
-        // Step 3: Set up collapsible behavior.
+        // Step 3: Create empty Chart.js instances (visible charts with no data).
+        for (const [groupId, groupConfig] of allGroups) {
+            createEmptyCharts(groupId, groupConfig);
+        }
+
+        // Step 4: Set up collapsible behavior.
         setupCollapsibleBenchmarks();
 
-        // Step 4: Show status - UI is ready, data loading in background.
-        setStatus(`Loading ${activeGroups.reduce((n, [_, c]) => n + c.charts.length, 0)} charts...`, "loading");
+        // Step 5: Show status - UI is ready, data loading in background.
+        const totalCharts = allGroups.reduce((n, [_, c]) => n + c.charts.length, 0);
+        setStatus(`Loading ${totalCharts} charts...`, "loading");
 
-        // Step 5: Yield to browser to paint the UI before loading data.
-        await new Promise(resolve => setTimeout(resolve, 0));
+        // Step 6: Yield to browser to paint the UI before loading data.
+        await waitForPaint();
 
-        // Step 6: Load chart data in background.
-        // Load groups in parallel, charts within each group sequentially.
-        const loadPromises = activeGroups.map(([groupId, groupConfig]) =>
-            loadGroupCharts(wasm, groupId, groupConfig, summary.commits)
-        );
+        // Step 7: NOW load WASM and data (charts already visible).
+        const wasm = await loadWasmModule();
+        const summary = await loadBenchmarkSummary(wasm);
+
+        console.log("Available groups from server:", Object.keys(summary.groups));
+        console.log("Configured groups:", Object.keys(BENCHMARK_GROUPS));
+
+        // Step 8: Filter to groups that exist on server.
+        const activeGroups = allGroups.filter(([groupId]) => {
+            const exists = !!summary.groups[groupId];
+            if (!exists) {
+                console.warn(`Group '${groupId}' not found in server data, skipping`);
+            }
+            return exists;
+        });
+
+        // Step 9: Update charts with data one by one (strictly sequential).
+        // Charts are already visible (empty), now we fill in the data.
+        let loadedCharts = 0;
+        for (const [groupId, groupConfig] of activeGroups) {
+            const statusEl = document.getElementById(`${groupId}-status`);
+            const groupTotal = groupConfig.charts.length;
+            let groupLoaded = 0;
+
+            for (const chartName of groupConfig.charts) {
+                const success = await renderChart(wasm, groupId, chartName, groupConfig, summary.commits);
+                if (success) {
+                    groupLoaded++;
+                    loadedCharts++;
+                }
+
+                // Update group status.
+                if (statusEl) {
+                    statusEl.textContent = `${groupLoaded}/${groupTotal} charts`;
+                }
+
+                // Wait for browser to paint before rendering next chart.
+                await waitForPaint();
+            }
+
+            // Render group summary after all charts are loaded.
+            renderGroupSummary(groupId, groupConfig);
+
+            console.log(`Rendered ${groupLoaded}/${groupTotal} charts in ${groupId}`);
+        }
 
-        // Wait for all to complete and update status.
-        const results = await Promise.all(loadPromises);
-        const totalCharts = results.reduce((a, b) => a + b, 0);
-        setStatus(`Loaded ${totalCharts} charts across ${activeGroups.length} groups`, "success");
+        setStatus(`Loaded ${loadedCharts} charts across ${activeGroups.length} groups`, "success");
 
     } catch (error) {
         console.error("Error:", error);

From a74f7d0c82d57d8cef826943d9d186a9af98a9d2 Mon Sep 17 00:00:00 2001
From: Connor Tsui <connor.tsui20@gmail.com>
Date: Thu, 4 Dec 2025 17:43:45 -0500
Subject: [PATCH 22/30] add statpopgen and tpcds

Signed-off-by: Connor Tsui <connor.tsui20@gmail.com>
---
 vortex-wasm/wasm-test.js | 67 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 67 insertions(+)

diff --git a/vortex-wasm/wasm-test.js b/vortex-wasm/wasm-test.js
index 2662dbd0747..c9a65e0ed9d 100644
--- a/vortex-wasm/wasm-test.js
+++ b/vortex-wasm/wasm-test.js
@@ -61,6 +61,73 @@ const BENCHMARK_GROUPS = {
             "datafusion:lance": "#ef7f1d",
         },
     },
+    "statpopgen": {
+        title: "Statistical and Population Genetics",
+        charts: [
+            "q00-rows100000-nvme", "q01-rows100000-nvme", "q02-rows100000-nvme",
+            "q03-rows100000-nvme", "q04-rows100000-nvme", "q05-rows100000-nvme",
+            "q06-rows100000-nvme", "q07-rows100000-nvme", "q08-rows100000-nvme",
+            "q09-rows100000-nvme", "q10-rows100000-nvme",
+        ],
+        seriesNames: [
+            "duckdb:parquet",
+            "duckdb:vortex-compact",
+            "duckdb:vortex-file-compressed",
+        ],
+        seriesColors: {
+            "duckdb:parquet": "#5DADE2",
+            "duckdb:vortex-compact": "#101010",
+            "duckdb:vortex-file-compressed": "#6b7280",
+        },
+    },
+    "tpcds": {
+        title: "TPC-DS",
+        charts: [
+            "q01-sf1-nvme", "q02-sf1-nvme", "q03-sf1-nvme", "q04-sf1-nvme",
+            "q05-sf1-nvme", "q06-sf1-nvme", "q07-sf1-nvme", "q08-sf1-nvme",
+            "q09-sf1-nvme", "q10-sf1-nvme", "q11-sf1-nvme", "q12-sf1-nvme",
+            "q13-sf1-nvme", "q14-sf1-nvme", "q15-sf1-nvme", "q16-sf1-nvme",
+            "q17-sf1-nvme", "q18-sf1-nvme", "q19-sf1-nvme", "q20-sf1-nvme",
+            "q21-sf1-nvme", "q22-sf1-nvme", "q23-sf1-nvme", "q24-sf1-nvme",
+            "q25-sf1-nvme", "q26-sf1-nvme", "q27-sf1-nvme", "q28-sf1-nvme",
+            "q29-sf1-nvme", "q30-sf1-nvme", "q31-sf1-nvme", "q32-sf1-nvme",
+            "q33-sf1-nvme", "q34-sf1-nvme", "q35-sf1-nvme", "q36-sf1-nvme",
+            "q37-sf1-nvme", "q38-sf1-nvme", "q39-sf1-nvme", "q40-sf1-nvme",
+            "q41-sf1-nvme", "q42-sf1-nvme", "q43-sf1-nvme", "q44-sf1-nvme",
+            "q45-sf1-nvme", "q46-sf1-nvme", "q47-sf1-nvme", "q48-sf1-nvme",
+            "q49-sf1-nvme", "q50-sf1-nvme", "q51-sf1-nvme", "q52-sf1-nvme",
+            "q53-sf1-nvme", "q54-sf1-nvme", "q55-sf1-nvme", "q56-sf1-nvme",
+            "q57-sf1-nvme", "q58-sf1-nvme", "q59-sf1-nvme", "q60-sf1-nvme",
+            "q61-sf1-nvme", "q62-sf1-nvme", "q63-sf1-nvme", "q64-sf1-nvme",
+            "q65-sf1-nvme", "q66-sf1-nvme", "q67-sf1-nvme", "q68-sf1-nvme",
+            "q69-sf1-nvme", "q70-sf1-nvme", "q71-sf1-nvme", "q72-sf1-nvme",
+            "q73-sf1-nvme", "q74-sf1-nvme", "q75-sf1-nvme", "q76-sf1-nvme",
+            "q77-sf1-nvme", "q78-sf1-nvme", "q79-sf1-nvme", "q80-sf1-nvme",
+            "q81-sf1-nvme", "q82-sf1-nvme", "q83-sf1-nvme", "q84-sf1-nvme",
+            "q85-sf1-nvme", "q86-sf1-nvme", "q87-sf1-nvme", "q88-sf1-nvme",
+            "q89-sf1-nvme", "q90-sf1-nvme", "q91-sf1-nvme", "q92-sf1-nvme",
+            "q93-sf1-nvme", "q94-sf1-nvme", "q95-sf1-nvme", "q96-sf1-nvme",
+            "q97-sf1-nvme", "q98-sf1-nvme", "q99-sf1-nvme",
+        ],
+        seriesNames: [
+            "datafusion:parquet",
+            "datafusion:vortex-compact",
+            "datafusion:vortex-file-compressed",
+            "duckdb:duckdb",
+            "duckdb:parquet",
+            "duckdb:vortex-compact",
+            "duckdb:vortex-file-compressed",
+        ],
+        seriesColors: {
+            "datafusion:parquet": "#8b5cf6",
+            "datafusion:vortex-compact": "#059669",
+            "datafusion:vortex-file-compressed": "#10b981",
+            "duckdb:duckdb": "#f59e0b",
+            "duckdb:parquet": "#5DADE2",
+            "duckdb:vortex-compact": "#101010",
+            "duckdb:vortex-file-compressed": "#6b7280",
+        },
+    },
 };
 
 // ============================================================================

From 8bdad1d155ebdec888c110feb23a3dee2ad28bcc Mon Sep 17 00:00:00 2001
From: Connor Tsui <connor.tsui20@gmail.com>
Date: Thu, 4 Dec 2025 17:44:00 -0500
Subject: [PATCH 23/30] format wasm test

Signed-off-by: Connor Tsui <connor.tsui20@gmail.com>
---
 vortex-wasm/wasm-test.css  |   44 +-
 vortex-wasm/wasm-test.html |   58 +-
 vortex-wasm/wasm-test.js   | 1803 ++++++++++++++++++++----------------
 3 files changed, 1056 insertions(+), 849 deletions(-)

diff --git a/vortex-wasm/wasm-test.css b/vortex-wasm/wasm-test.css
index 7d57ddb01bd..e3405db6760 100644
--- a/vortex-wasm/wasm-test.css
+++ b/vortex-wasm/wasm-test.css
@@ -2,21 +2,21 @@
 :root {
     /* Vortex Brand Colors */
     --vortex-black: #101010;
-    --vortex-gray: #ECECEC;
-    --vortex-green: #CEE562;
-    --vortex-blue: #5971FD;
-    --vortex-pink: #EEB3E1;
+    --vortex-gray: #ececec;
+    --vortex-green: #cee562;
+    --vortex-blue: #5971fd;
+    --vortex-pink: #eeb3e1;
 
     /* Series Colors */
     --series-vortex: #101010;
-    --series-parquet: #5DADE2;
+    --series-parquet: #5dade2;
     --series-lance: #ef7f1d;
 
     /* Theme Colors */
     --primary-color: var(--vortex-blue);
-    --primary-hover: #4A5FE5;
+    --primary-hover: #4a5fe5;
     --bg-color: #ffffff;
-    --bg-secondary: #FAFAFA;
+    --bg-secondary: #fafafa;
     --text-color: var(--vortex-black);
     --text-secondary: #666666;
     --border-color: var(--vortex-gray);
@@ -40,7 +40,9 @@
 }
 
 html {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Display", Roboto, sans-serif;
+    font-family:
+        -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Display", Roboto,
+        sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-size: 16px;
@@ -69,7 +71,11 @@ body {
 }
 
 .page-header h1 {
-    font-family: "Funnel Display", -apple-system, BlinkMacSystemFont, sans-serif;
+    font-family:
+        "Funnel Display",
+        -apple-system,
+        BlinkMacSystemFont,
+        sans-serif;
     font-size: 2rem;
     font-weight: 600;
     color: var(--text-color);
@@ -118,7 +124,9 @@ body {
 }
 
 @keyframes spin {
-    to { transform: rotate(360deg); }
+    to {
+        transform: rotate(360deg);
+    }
 }
 
 /* Benchmarks Container - full width sections */
@@ -156,7 +164,7 @@ body {
 }
 
 .benchmark-header:hover {
-    background: #F0F0F0;
+    background: #f0f0f0;
 }
 
 .title-wrapper {
@@ -176,7 +184,11 @@ body {
 }
 
 .benchmark-title {
-    font-family: "Funnel Display", -apple-system, BlinkMacSystemFont, sans-serif;
+    font-family:
+        "Funnel Display",
+        -apple-system,
+        BlinkMacSystemFont,
+        sans-serif;
     font-size: 1.25rem;
     font-weight: 600;
     color: var(--text-color);
@@ -315,7 +327,11 @@ body {
 }
 
 .chart-title {
-    font-family: "Funnel Display", -apple-system, BlinkMacSystemFont, sans-serif;
+    font-family:
+        "Funnel Display",
+        -apple-system,
+        BlinkMacSystemFont,
+        sans-serif;
     font-size: 1rem;
     font-weight: 500;
     color: var(--text-color);
@@ -395,7 +411,7 @@ body {
 }
 
 .chartjs-tooltip::before {
-    content: '';
+    content: "";
     position: absolute;
     top: -8px;
     left: 50%;
diff --git a/vortex-wasm/wasm-test.html b/vortex-wasm/wasm-test.html
index ba5a4785a61..80c31c689f2 100644
--- a/vortex-wasm/wasm-test.html
+++ b/vortex-wasm/wasm-test.html
@@ -1,32 +1,38 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vortex WASM Benchmarks</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Funnel+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="wasm-test.css">
-    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
-</head>
-<body>
-    <div class="container">
-        <header class="page-header">
-            <h1>Vortex WASM Benchmarks</h1>
-            <p class="subtitle">Loading benchmark data directly from Vortex files using WebAssembly</p>
-        </header>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Vortex WASM Benchmarks</title>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Funnel+Display:wght@400;500;600;700&display=swap"
+            rel="stylesheet"
+        />
+        <link rel="stylesheet" href="wasm-test.css" />
+        <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
+    </head>
+    <body>
+        <div class="container">
+            <header class="page-header">
+                <h1>Vortex WASM Benchmarks</h1>
+                <p class="subtitle">
+                    Loading benchmark data directly from Vortex files using
+                    WebAssembly
+                </p>
+            </header>
 
-        <div id="status" class="status loading">
-            <span class="spinner"></span>
-            <span id="status-text">Initializing WASM module...</span>
-        </div>
+            <div id="status" class="status loading">
+                <span class="spinner"></span>
+                <span id="status-text">Initializing WASM module...</span>
+            </div>
 
-        <div id="benchmarks-container" class="benchmarks-grid">
-            <!-- Groups rendered dynamically by JS -->
+            <div id="benchmarks-container" class="benchmarks-grid">
+                <!-- Groups rendered dynamically by JS -->
+            </div>
         </div>
-    </div>
 
-    <script type="module" src="wasm-test.js"></script>
-</body>
+        <script type="module" src="wasm-test.js"></script>
+    </body>
 </html>
diff --git a/vortex-wasm/wasm-test.js b/vortex-wasm/wasm-test.js
index c9a65e0ed9d..b050f3b1209 100644
--- a/vortex-wasm/wasm-test.js
+++ b/vortex-wasm/wasm-test.js
@@ -6,128 +6,243 @@
  * Global configuration settings.
  */
 const CONFIG = {
-    wasmModulePath: "./pkg/vortex_wasm.js",
-    githubRepo: "https://github.com/spiraldb/vortex",
-    defaultVisibleCommits: 50,
-    minWindowSize: 10,
-    yAxisLabel: "Time (ms)",
+  wasmModulePath: "./pkg/vortex_wasm.js",
+  githubRepo: "https://github.com/spiraldb/vortex",
+  defaultVisibleCommits: 50,
+  minWindowSize: 10,
+  yAxisLabel: "Time (ms)",
 };
 
 /**
  * Benchmark group configurations. Each group contains multiple charts.
  */
 const BENCHMARK_GROUPS = {
-    "random-access": {
-        title: "Random Access",
-        charts: ["latency"],
-        seriesNames: ["vortex", "parquet", "lance"],
-        seriesColors: {
-            "vortex": "#101010",
-            "parquet": "#5DADE2",
-            "lance": "#ef7f1d",
-        },
+  "random-access": {
+    title: "Random Access",
+    charts: ["latency"],
+    seriesNames: ["vortex", "parquet", "lance"],
+    seriesColors: {
+      vortex: "#101010",
+      parquet: "#5DADE2",
+      lance: "#ef7f1d",
     },
-    "clickbench": {
-        title: "ClickBench",
-        charts: [
-            "q00-nvme", "q01-nvme", "q02-nvme", "q03-nvme", "q04-nvme",
-            "q05-nvme", "q06-nvme", "q07-nvme", "q08-nvme", "q09-nvme",
-            "q10-nvme", "q11-nvme", "q12-nvme", "q13-nvme", "q14-nvme",
-            "q15-nvme", "q16-nvme", "q17-nvme", "q18-nvme", "q19-nvme",
-            "q20-nvme", "q21-nvme", "q22-nvme", "q23-nvme", "q24-nvme",
-            "q25-nvme", "q26-nvme", "q27-nvme", "q28-nvme", "q29-nvme",
-            "q30-nvme", "q31-nvme", "q32-nvme", "q33-nvme", "q34-nvme",
-            "q35-nvme", "q36-nvme", "q37-nvme", "q38-nvme", "q39-nvme",
-            "q40-nvme", "q41-nvme", "q42-nvme",
-        ],
-        seriesNames: [
-            "duckdb:vortex-compact",
-            "duckdb:vortex-file-compressed",
-            "duckdb:parquet",
-            "duckdb:duckdb",
-            "datafusion:vortex-compact",
-            "datafusion:vortex-file-compressed",
-            "datafusion:parquet",
-            "datafusion:lance",
-        ],
-        seriesColors: {
-            "duckdb:vortex-compact": "#101010",
-            "duckdb:vortex-file-compressed": "#6b7280",
-            "duckdb:parquet": "#5DADE2",
-            "duckdb:duckdb": "#f59e0b",
-            "datafusion:vortex-compact": "#059669",
-            "datafusion:vortex-file-compressed": "#10b981",
-            "datafusion:parquet": "#8b5cf6",
-            "datafusion:lance": "#ef7f1d",
-        },
+  },
+  clickbench: {
+    title: "ClickBench",
+    charts: [
+      "q00-nvme",
+      "q01-nvme",
+      "q02-nvme",
+      "q03-nvme",
+      "q04-nvme",
+      "q05-nvme",
+      "q06-nvme",
+      "q07-nvme",
+      "q08-nvme",
+      "q09-nvme",
+      "q10-nvme",
+      "q11-nvme",
+      "q12-nvme",
+      "q13-nvme",
+      "q14-nvme",
+      "q15-nvme",
+      "q16-nvme",
+      "q17-nvme",
+      "q18-nvme",
+      "q19-nvme",
+      "q20-nvme",
+      "q21-nvme",
+      "q22-nvme",
+      "q23-nvme",
+      "q24-nvme",
+      "q25-nvme",
+      "q26-nvme",
+      "q27-nvme",
+      "q28-nvme",
+      "q29-nvme",
+      "q30-nvme",
+      "q31-nvme",
+      "q32-nvme",
+      "q33-nvme",
+      "q34-nvme",
+      "q35-nvme",
+      "q36-nvme",
+      "q37-nvme",
+      "q38-nvme",
+      "q39-nvme",
+      "q40-nvme",
+      "q41-nvme",
+      "q42-nvme",
+    ],
+    seriesNames: [
+      "duckdb:vortex-compact",
+      "duckdb:vortex-file-compressed",
+      "duckdb:parquet",
+      "duckdb:duckdb",
+      "datafusion:vortex-compact",
+      "datafusion:vortex-file-compressed",
+      "datafusion:parquet",
+      "datafusion:lance",
+    ],
+    seriesColors: {
+      "duckdb:vortex-compact": "#101010",
+      "duckdb:vortex-file-compressed": "#6b7280",
+      "duckdb:parquet": "#5DADE2",
+      "duckdb:duckdb": "#f59e0b",
+      "datafusion:vortex-compact": "#059669",
+      "datafusion:vortex-file-compressed": "#10b981",
+      "datafusion:parquet": "#8b5cf6",
+      "datafusion:lance": "#ef7f1d",
     },
-    "statpopgen": {
-        title: "Statistical and Population Genetics",
-        charts: [
-            "q00-rows100000-nvme", "q01-rows100000-nvme", "q02-rows100000-nvme",
-            "q03-rows100000-nvme", "q04-rows100000-nvme", "q05-rows100000-nvme",
-            "q06-rows100000-nvme", "q07-rows100000-nvme", "q08-rows100000-nvme",
-            "q09-rows100000-nvme", "q10-rows100000-nvme",
-        ],
-        seriesNames: [
-            "duckdb:parquet",
-            "duckdb:vortex-compact",
-            "duckdb:vortex-file-compressed",
-        ],
-        seriesColors: {
-            "duckdb:parquet": "#5DADE2",
-            "duckdb:vortex-compact": "#101010",
-            "duckdb:vortex-file-compressed": "#6b7280",
-        },
+  },
+  statpopgen: {
+    title: "Statistical and Population Genetics",
+    charts: [
+      "q00-rows100000-nvme",
+      "q01-rows100000-nvme",
+      "q02-rows100000-nvme",
+      "q03-rows100000-nvme",
+      "q04-rows100000-nvme",
+      "q05-rows100000-nvme",
+      "q06-rows100000-nvme",
+      "q07-rows100000-nvme",
+      "q08-rows100000-nvme",
+      "q09-rows100000-nvme",
+      "q10-rows100000-nvme",
+    ],
+    seriesNames: [
+      "duckdb:parquet",
+      "duckdb:vortex-compact",
+      "duckdb:vortex-file-compressed",
+    ],
+    seriesColors: {
+      "duckdb:parquet": "#5DADE2",
+      "duckdb:vortex-compact": "#101010",
+      "duckdb:vortex-file-compressed": "#6b7280",
     },
-    "tpcds": {
-        title: "TPC-DS",
-        charts: [
-            "q01-sf1-nvme", "q02-sf1-nvme", "q03-sf1-nvme", "q04-sf1-nvme",
-            "q05-sf1-nvme", "q06-sf1-nvme", "q07-sf1-nvme", "q08-sf1-nvme",
-            "q09-sf1-nvme", "q10-sf1-nvme", "q11-sf1-nvme", "q12-sf1-nvme",
-            "q13-sf1-nvme", "q14-sf1-nvme", "q15-sf1-nvme", "q16-sf1-nvme",
-            "q17-sf1-nvme", "q18-sf1-nvme", "q19-sf1-nvme", "q20-sf1-nvme",
-            "q21-sf1-nvme", "q22-sf1-nvme", "q23-sf1-nvme", "q24-sf1-nvme",
-            "q25-sf1-nvme", "q26-sf1-nvme", "q27-sf1-nvme", "q28-sf1-nvme",
-            "q29-sf1-nvme", "q30-sf1-nvme", "q31-sf1-nvme", "q32-sf1-nvme",
-            "q33-sf1-nvme", "q34-sf1-nvme", "q35-sf1-nvme", "q36-sf1-nvme",
-            "q37-sf1-nvme", "q38-sf1-nvme", "q39-sf1-nvme", "q40-sf1-nvme",
-            "q41-sf1-nvme", "q42-sf1-nvme", "q43-sf1-nvme", "q44-sf1-nvme",
-            "q45-sf1-nvme", "q46-sf1-nvme", "q47-sf1-nvme", "q48-sf1-nvme",
-            "q49-sf1-nvme", "q50-sf1-nvme", "q51-sf1-nvme", "q52-sf1-nvme",
-            "q53-sf1-nvme", "q54-sf1-nvme", "q55-sf1-nvme", "q56-sf1-nvme",
-            "q57-sf1-nvme", "q58-sf1-nvme", "q59-sf1-nvme", "q60-sf1-nvme",
-            "q61-sf1-nvme", "q62-sf1-nvme", "q63-sf1-nvme", "q64-sf1-nvme",
-            "q65-sf1-nvme", "q66-sf1-nvme", "q67-sf1-nvme", "q68-sf1-nvme",
-            "q69-sf1-nvme", "q70-sf1-nvme", "q71-sf1-nvme", "q72-sf1-nvme",
-            "q73-sf1-nvme", "q74-sf1-nvme", "q75-sf1-nvme", "q76-sf1-nvme",
-            "q77-sf1-nvme", "q78-sf1-nvme", "q79-sf1-nvme", "q80-sf1-nvme",
-            "q81-sf1-nvme", "q82-sf1-nvme", "q83-sf1-nvme", "q84-sf1-nvme",
-            "q85-sf1-nvme", "q86-sf1-nvme", "q87-sf1-nvme", "q88-sf1-nvme",
-            "q89-sf1-nvme", "q90-sf1-nvme", "q91-sf1-nvme", "q92-sf1-nvme",
-            "q93-sf1-nvme", "q94-sf1-nvme", "q95-sf1-nvme", "q96-sf1-nvme",
-            "q97-sf1-nvme", "q98-sf1-nvme", "q99-sf1-nvme",
-        ],
-        seriesNames: [
-            "datafusion:parquet",
-            "datafusion:vortex-compact",
-            "datafusion:vortex-file-compressed",
-            "duckdb:duckdb",
-            "duckdb:parquet",
-            "duckdb:vortex-compact",
-            "duckdb:vortex-file-compressed",
-        ],
-        seriesColors: {
-            "datafusion:parquet": "#8b5cf6",
-            "datafusion:vortex-compact": "#059669",
-            "datafusion:vortex-file-compressed": "#10b981",
-            "duckdb:duckdb": "#f59e0b",
-            "duckdb:parquet": "#5DADE2",
-            "duckdb:vortex-compact": "#101010",
-            "duckdb:vortex-file-compressed": "#6b7280",
-        },
+  },
+  tpcds: {
+    title: "TPC-DS",
+    charts: [
+      "q01-sf1-nvme",
+      "q02-sf1-nvme",
+      "q03-sf1-nvme",
+      "q04-sf1-nvme",
+      "q05-sf1-nvme",
+      "q06-sf1-nvme",
+      "q07-sf1-nvme",
+      "q08-sf1-nvme",
+      "q09-sf1-nvme",
+      "q10-sf1-nvme",
+      "q11-sf1-nvme",
+      "q12-sf1-nvme",
+      "q13-sf1-nvme",
+      "q14-sf1-nvme",
+      "q15-sf1-nvme",
+      "q16-sf1-nvme",
+      "q17-sf1-nvme",
+      "q18-sf1-nvme",
+      "q19-sf1-nvme",
+      "q20-sf1-nvme",
+      "q21-sf1-nvme",
+      "q22-sf1-nvme",
+      "q23-sf1-nvme",
+      "q24-sf1-nvme",
+      "q25-sf1-nvme",
+      "q26-sf1-nvme",
+      "q27-sf1-nvme",
+      "q28-sf1-nvme",
+      "q29-sf1-nvme",
+      "q30-sf1-nvme",
+      "q31-sf1-nvme",
+      "q32-sf1-nvme",
+      "q33-sf1-nvme",
+      "q34-sf1-nvme",
+      "q35-sf1-nvme",
+      "q36-sf1-nvme",
+      "q37-sf1-nvme",
+      "q38-sf1-nvme",
+      "q39-sf1-nvme",
+      "q40-sf1-nvme",
+      "q41-sf1-nvme",
+      "q42-sf1-nvme",
+      "q43-sf1-nvme",
+      "q44-sf1-nvme",
+      "q45-sf1-nvme",
+      "q46-sf1-nvme",
+      "q47-sf1-nvme",
+      "q48-sf1-nvme",
+      "q49-sf1-nvme",
+      "q50-sf1-nvme",
+      "q51-sf1-nvme",
+      "q52-sf1-nvme",
+      "q53-sf1-nvme",
+      "q54-sf1-nvme",
+      "q55-sf1-nvme",
+      "q56-sf1-nvme",
+      "q57-sf1-nvme",
+      "q58-sf1-nvme",
+      "q59-sf1-nvme",
+      "q60-sf1-nvme",
+      "q61-sf1-nvme",
+      "q62-sf1-nvme",
+      "q63-sf1-nvme",
+      "q64-sf1-nvme",
+      "q65-sf1-nvme",
+      "q66-sf1-nvme",
+      "q67-sf1-nvme",
+      "q68-sf1-nvme",
+      "q69-sf1-nvme",
+      "q70-sf1-nvme",
+      "q71-sf1-nvme",
+      "q72-sf1-nvme",
+      "q73-sf1-nvme",
+      "q74-sf1-nvme",
+      "q75-sf1-nvme",
+      "q76-sf1-nvme",
+      "q77-sf1-nvme",
+      "q78-sf1-nvme",
+      "q79-sf1-nvme",
+      "q80-sf1-nvme",
+      "q81-sf1-nvme",
+      "q82-sf1-nvme",
+      "q83-sf1-nvme",
+      "q84-sf1-nvme",
+      "q85-sf1-nvme",
+      "q86-sf1-nvme",
+      "q87-sf1-nvme",
+      "q88-sf1-nvme",
+      "q89-sf1-nvme",
+      "q90-sf1-nvme",
+      "q91-sf1-nvme",
+      "q92-sf1-nvme",
+      "q93-sf1-nvme",
+      "q94-sf1-nvme",
+      "q95-sf1-nvme",
+      "q96-sf1-nvme",
+      "q97-sf1-nvme",
+      "q98-sf1-nvme",
+      "q99-sf1-nvme",
+    ],
+    seriesNames: [
+      "datafusion:parquet",
+      "datafusion:vortex-compact",
+      "datafusion:vortex-file-compressed",
+      "duckdb:duckdb",
+      "duckdb:parquet",
+      "duckdb:vortex-compact",
+      "duckdb:vortex-file-compressed",
+    ],
+    seriesColors: {
+      "datafusion:parquet": "#8b5cf6",
+      "datafusion:vortex-compact": "#059669",
+      "datafusion:vortex-file-compressed": "#10b981",
+      "duckdb:duckdb": "#f59e0b",
+      "duckdb:parquet": "#5DADE2",
+      "duckdb:vortex-compact": "#101010",
+      "duckdb:vortex-file-compressed": "#6b7280",
     },
+  },
 };
 
 // ============================================================================
@@ -138,31 +253,31 @@ const BENCHMARK_GROUPS = {
  * Updates the status display with a message and type.
  */
 function setStatus(message, type = "loading") {
-    const status = document.getElementById("status");
-    const text = document.getElementById("status-text");
-    status.className = `status ${type}`;
-    text.textContent = message;
-
-    const spinner = status.querySelector(".spinner");
-    if (spinner) {
-        spinner.style.display = type === "loading" ? "inline-block" : "none";
-    }
+  const status = document.getElementById("status");
+  const text = document.getElementById("status-text");
+  status.className = `status ${type}`;
+  text.textContent = message;
+
+  const spinner = status.querySelector(".spinner");
+  if (spinner) {
+    spinner.style.display = type === "loading" ? "inline-block" : "none";
+  }
 }
 
 /**
  * Formats time in human-readable format with appropriate units.
  */
 function formatTime(ms) {
-    if (ms < 1) return `${(ms * 1000).toFixed(0)}μs`;
-    if (ms < 1000) return `${ms.toFixed(1)}ms`;
-    return `${(ms / 1000).toFixed(2)}s`;
+  if (ms < 1) return `${(ms * 1000).toFixed(0)}μs`;
+  if (ms < 1000) return `${ms.toFixed(1)}ms`;
+  return `${(ms / 1000).toFixed(2)}s`;
 }
 
 /**
  * Creates a unique ID for chart elements.
  */
 function makeId(groupId, chartName, suffix) {
-    return `${groupId}-${chartName}-${suffix}`.replace(/[^a-zA-Z0-9-]/g, '-');
+  return `${groupId}-${chartName}-${suffix}`.replace(/[^a-zA-Z0-9-]/g, "-");
 }
 
 // ============================================================================
@@ -173,52 +288,52 @@ function makeId(groupId, chartName, suffix) {
  * Loads and initializes the WASM module with timeout.
  */
 async function loadWasmModule() {
-    setStatus("Loading WASM module...");
-    console.log("[loadWasmModule] Starting import...");
+  setStatus("Loading WASM module...");
+  console.log("[loadWasmModule] Starting import...");
 
-    const timeout = (ms) => new Promise((_, reject) =>
-        setTimeout(() => reject(new Error(`Timeout after ${ms}ms`)), ms)
+  const timeout = (ms) =>
+    new Promise((_, reject) =>
+      setTimeout(() => reject(new Error(`Timeout after ${ms}ms`)), ms),
     );
 
-    try {
-        // Race import against timeout.
-        const wasm = await Promise.race([
-            import(CONFIG.wasmModulePath),
-            timeout(10000)
-        ]);
-        console.log("[loadWasmModule] Import complete, initializing...");
-
-        // Race init against timeout.
-        await Promise.race([
-            wasm.default(),
-            timeout(10000)
-        ]);
-        console.log("[loadWasmModule] Initialized:", wasm.get_version());
-
-        return wasm;
-    } catch (error) {
-        console.error("[loadWasmModule] Failed:", error);
-        throw error;
-    }
+  try {
+    // Race import against timeout.
+    const wasm = await Promise.race([
+      import(CONFIG.wasmModulePath),
+      timeout(10000),
+    ]);
+    console.log("[loadWasmModule] Import complete, initializing...");
+
+    // Race init against timeout.
+    await Promise.race([wasm.default(), timeout(10000)]);
+    console.log("[loadWasmModule] Initialized:", wasm.get_version());
+
+    return wasm;
+  } catch (error) {
+    console.error("[loadWasmModule] Failed:", error);
+    throw error;
+  }
 }
 
 /**
  * Loads benchmark summary from WASM (commits + group/chart metadata, no values).
  */
 async function loadBenchmarkSummary(wasm) {
-    setStatus("Loading benchmark summary...");
-    const json = await wasm.load_benchmark_summary();
-    const summary = JSON.parse(json);
-    console.log(`Loaded summary with ${summary.commits.length} commits, ${Object.keys(summary.groups).length} groups`);
-    return summary;
+  setStatus("Loading benchmark summary...");
+  const json = await wasm.load_benchmark_summary();
+  const summary = JSON.parse(json);
+  console.log(
+    `Loaded summary with ${summary.commits.length} commits, ${Object.keys(summary.groups).length} groups`,
+  );
+  return summary;
 }
 
 /**
  * Loads chart data for a specific group and chart.
  */
 async function loadChartData(wasm, group, chart) {
-    const json = await wasm.load_chart_data(group, chart);
-    return JSON.parse(json);
+  const json = await wasm.load_chart_data(group, chart);
+  return JSON.parse(json);
 }
 
 // ============================================================================
@@ -229,79 +344,82 @@ async function loadChartData(wasm, group, chart) {
  * Processes chart data into chart-ready format.
  */
 function processChartData(chartData, commits, groupConfig) {
-    const alignedSeries = chartData.aligned_series;
-
-    const processedCommits = commits.map((commit, index) => ({
-        ...commit,
-        id: commit.commit_id,
-        url: `${CONFIG.githubRepo}/commit/${commit.commit_id}`,
-        sortedIndex: index,
-    }));
-
-    const seriesData = new Map();
-    for (const name of groupConfig.seriesNames) {
-        const rawData = alignedSeries[name];
-        if (rawData) {
-            const msData = rawData.map(v => v !== null ? { value: Number(v) / 1_000_000 } : null);
-            seriesData.set(name, msData);
-        } else {
-            seriesData.set(name, new Array(commits.length).fill(null));
-        }
+  const alignedSeries = chartData.aligned_series;
+
+  const processedCommits = commits.map((commit, index) => ({
+    ...commit,
+    id: commit.commit_id,
+    url: `${CONFIG.githubRepo}/commit/${commit.commit_id}`,
+    sortedIndex: index,
+  }));
+
+  const seriesData = new Map();
+  for (const name of groupConfig.seriesNames) {
+    const rawData = alignedSeries[name];
+    if (rawData) {
+      const msData = rawData.map((v) =>
+        v !== null ? { value: Number(v) / 1_000_000 } : null,
+      );
+      seriesData.set(name, msData);
+    } else {
+      seriesData.set(name, new Array(commits.length).fill(null));
     }
-
-    // Find the range of data.
-    let firstDataIndex = commits.length;
-    let lastDataIndex = -1;
-    for (const data of seriesData.values()) {
-        for (let i = 0; i < data.length; i++) {
-            if (data[i] !== null) {
-                firstDataIndex = Math.min(firstDataIndex, i);
-                lastDataIndex = Math.max(lastDataIndex, i);
-            }
-        }
+  }
+
+  // Find the range of data.
+  let firstDataIndex = commits.length;
+  let lastDataIndex = -1;
+  for (const data of seriesData.values()) {
+    for (let i = 0; i < data.length; i++) {
+      if (data[i] !== null) {
+        firstDataIndex = Math.min(firstDataIndex, i);
+        lastDataIndex = Math.max(lastDataIndex, i);
+      }
     }
+  }
 
-    if (lastDataIndex < 0) {
-        firstDataIndex = 0;
-        lastDataIndex = commits.length - 1;
-    }
+  if (lastDataIndex < 0) {
+    firstDataIndex = 0;
+    lastDataIndex = commits.length - 1;
+  }
 
-    const startIndex = Math.max(0, firstDataIndex);
-    const endIndex = lastDataIndex + 1;
-    const chartCommits = processedCommits.slice(startIndex, endIndex);
-    const slicedSeriesData = new Map();
+  const startIndex = Math.max(0, firstDataIndex);
+  const endIndex = lastDataIndex + 1;
+  const chartCommits = processedCommits.slice(startIndex, endIndex);
+  const slicedSeriesData = new Map();
 
-    for (const [name, data] of seriesData.entries()) {
-        slicedSeriesData.set(name, data.slice(startIndex, endIndex));
-    }
+  for (const [name, data] of seriesData.entries()) {
+    slicedSeriesData.set(name, data.slice(startIndex, endIndex));
+  }
 
-    return { seriesData: slicedSeriesData, chartCommits };
+  return { seriesData: slicedSeriesData, chartCommits };
 }
 
 /**
  * Calculates summary statistics for the latest data point.
  */
 function calculateSummary(seriesData) {
-    const latestResults = new Map();
-
-    for (const [seriesName, data] of seriesData.entries()) {
-        for (let i = data.length - 1; i >= 0; i--) {
-            if (data[i] !== null) {
-                latestResults.set(seriesName, data[i].value);
-                break;
-            }
-        }
+  const latestResults = new Map();
+
+  for (const [seriesName, data] of seriesData.entries()) {
+    for (let i = data.length - 1; i >= 0; i--) {
+      if (data[i] !== null) {
+        latestResults.set(seriesName, data[i].value);
+        break;
+      }
     }
+  }
 
-    if (latestResults.size === 0) {
-        return { results: [], fastestTime: 0 };
-    }
+  if (latestResults.size === 0) {
+    return { results: [], fastestTime: 0 };
+  }
 
-    const fastestTime = Math.min(...latestResults.values());
-    const sortedResults = Array.from(latestResults.entries())
-        .sort((a, b) => a[1] - b[1]);
+  const fastestTime = Math.min(...latestResults.values());
+  const sortedResults = Array.from(latestResults.entries()).sort(
+    (a, b) => a[1] - b[1],
+  );
 
-    return { results: sortedResults, fastestTime };
+  return { results: sortedResults, fastestTime };
 }
 
 // ============================================================================
@@ -318,21 +436,21 @@ const groupChartData = new Map();
  * Stores the latest value for each series in a chart.
  */
 function storeChartData(groupId, chartName, seriesData) {
-    if (!groupChartData.has(groupId)) {
-        groupChartData.set(groupId, new Map());
-    }
-    const groupData = groupChartData.get(groupId);
-
-    const latestValues = new Map();
-    for (const [seriesName, data] of seriesData.entries()) {
-        for (let i = data.length - 1; i >= 0; i--) {
-            if (data[i] !== null) {
-                latestValues.set(seriesName, data[i].value);
-                break;
-            }
-        }
+  if (!groupChartData.has(groupId)) {
+    groupChartData.set(groupId, new Map());
+  }
+  const groupData = groupChartData.get(groupId);
+
+  const latestValues = new Map();
+  for (const [seriesName, data] of seriesData.entries()) {
+    for (let i = data.length - 1; i >= 0; i--) {
+      if (data[i] !== null) {
+        latestValues.set(seriesName, data[i].value);
+        break;
+      }
     }
-    groupData.set(chartName, latestValues);
+  }
+  groupData.set(chartName, latestValues);
 }
 
 /**
@@ -343,83 +461,83 @@ function storeChartData(groupId, chartName, seriesData) {
  * - Total: Sum of all query times
  */
 function calculateGroupSummary(groupId, groupConfig) {
-    const groupData = groupChartData.get(groupId);
-    if (!groupData || groupData.size === 0) {
-        return { results: [], isMultiChart: false };
+  const groupData = groupChartData.get(groupId);
+  if (!groupData || groupData.size === 0) {
+    return { results: [], isMultiChart: false };
+  }
+
+  const isMultiChart = groupConfig.charts.length > 1;
+
+  if (!isMultiChart) {
+    // Single chart group: use simple summary (latest values).
+    const chartData = groupData.values().next().value;
+    if (!chartData || chartData.size === 0) {
+      return { results: [], isMultiChart: false };
     }
 
-    const isMultiChart = groupConfig.charts.length > 1;
-
-    if (!isMultiChart) {
-        // Single chart group: use simple summary (latest values).
-        const chartData = groupData.values().next().value;
-        if (!chartData || chartData.size === 0) {
-            return { results: [], isMultiChart: false };
-        }
-
-        const fastestTime = Math.min(...chartData.values());
-        const sortedResults = Array.from(chartData.entries())
-            .sort((a, b) => a[1] - b[1])
-            .map(([name, time]) => ({
-                name,
-                time,
-                ratio: time / fastestTime,
-            }));
-
-        return { results: sortedResults, isMultiChart: false };
+    const fastestTime = Math.min(...chartData.values());
+    const sortedResults = Array.from(chartData.entries())
+      .sort((a, b) => a[1] - b[1])
+      .map(([name, time]) => ({
+        name,
+        time,
+        ratio: time / fastestTime,
+      }));
+
+    return { results: sortedResults, isMultiChart: false };
+  }
+
+  // Multi-chart group: calculate geometric mean score and total time.
+  const SHIFT_MS = 10; // Constant shift to avoid division issues with small values.
+  const seriesStats = new Map(); // seriesName -> { ratios: [], total: 0 }
+
+  // Initialize stats for all series.
+  for (const seriesName of groupConfig.seriesNames) {
+    seriesStats.set(seriesName, { ratios: [], total: 0 });
+  }
+
+  // Process each chart (query).
+  for (const [chartName, chartValues] of groupData.entries()) {
+    // Find fastest time for this query.
+    let fastestTime = Infinity;
+    for (const time of chartValues.values()) {
+      if (time < fastestTime) fastestTime = time;
     }
 
-    // Multi-chart group: calculate geometric mean score and total time.
-    const SHIFT_MS = 10; // Constant shift to avoid division issues with small values.
-    const seriesStats = new Map(); // seriesName -> { ratios: [], total: 0 }
-
-    // Initialize stats for all series.
+    // Calculate ratio for each series.
     for (const seriesName of groupConfig.seriesNames) {
-        seriesStats.set(seriesName, { ratios: [], total: 0 });
-    }
-
-    // Process each chart (query).
-    for (const [chartName, chartValues] of groupData.entries()) {
-        // Find fastest time for this query.
-        let fastestTime = Infinity;
-        for (const time of chartValues.values()) {
-            if (time < fastestTime) fastestTime = time;
-        }
-
-        // Calculate ratio for each series.
-        for (const seriesName of groupConfig.seriesNames) {
-            const stats = seriesStats.get(seriesName);
-            const time = chartValues.get(seriesName);
-
-            if (time !== undefined) {
-                const ratio = (time + SHIFT_MS) / (fastestTime + SHIFT_MS);
-                stats.ratios.push(ratio);
-                stats.total += time;
-            }
-        }
-    }
-
-    // Calculate geometric mean and build results.
-    const results = [];
-    for (const [seriesName, stats] of seriesStats.entries()) {
-        if (stats.ratios.length === 0) continue;
-
-        // Geometric mean = exp(mean(log(ratios))).
-        const logSum = stats.ratios.reduce((sum, r) => sum + Math.log(r), 0);
-        const geometricMean = Math.exp(logSum / stats.ratios.length);
-
-        results.push({
-            name: seriesName,
-            score: geometricMean,
-            total: stats.total,
-            queryCount: stats.ratios.length,
-        });
+      const stats = seriesStats.get(seriesName);
+      const time = chartValues.get(seriesName);
+
+      if (time !== undefined) {
+        const ratio = (time + SHIFT_MS) / (fastestTime + SHIFT_MS);
+        stats.ratios.push(ratio);
+        stats.total += time;
+      }
     }
+  }
+
+  // Calculate geometric mean and build results.
+  const results = [];
+  for (const [seriesName, stats] of seriesStats.entries()) {
+    if (stats.ratios.length === 0) continue;
+
+    // Geometric mean = exp(mean(log(ratios))).
+    const logSum = stats.ratios.reduce((sum, r) => sum + Math.log(r), 0);
+    const geometricMean = Math.exp(logSum / stats.ratios.length);
+
+    results.push({
+      name: seriesName,
+      score: geometricMean,
+      total: stats.total,
+      queryCount: stats.ratios.length,
+    });
+  }
 
-    // Sort by score (lower is better).
-    results.sort((a, b) => a.score - b.score);
+  // Sort by score (lower is better).
+  results.sort((a, b) => a.score - b.score);
 
-    return { results, isMultiChart: true };
+  return { results, isMultiChart: true };
 }
 
 // ============================================================================
@@ -430,7 +548,7 @@ function calculateGroupSummary(groupId, groupConfig) {
  * Creates HTML for a benchmark group container.
  */
 function createGroupHTML(groupId, groupConfig) {
-    return `
+  return `
         <div id="${groupId}-group" class="benchmark-set collapsed">
             <div class="benchmark-header">
                 <div class="title-wrapper">
@@ -456,8 +574,8 @@ function createGroupHTML(groupId, groupConfig) {
  * Creates HTML for a single chart within a group.
  */
 function createChartHTML(groupId, chartName) {
-    const prefix = makeId(groupId, chartName, '');
-    return `
+  const prefix = makeId(groupId, chartName, "");
+  return `
         <div class="chart-section" id="${prefix}section">
             <div class="chart-container">
                 <div class="chart-header">
@@ -493,26 +611,28 @@ function createChartHTML(groupId, chartName) {
  * Renders the group-level summary.
  */
 function renderGroupSummary(groupId, groupConfig) {
-    const summaryList = document.getElementById(`${groupId}-summary`);
-    const explanationEl = document.getElementById(`${groupId}-summary-explanation`);
-    if (!summaryList) return;
-
-    const summary = calculateGroupSummary(groupId, groupConfig);
-
-    summaryList.innerHTML = "";
-
-    if (summary.results.length === 0) {
-        summaryList.innerHTML = '<div class="score-item">No data available</div>';
-        if (explanationEl) explanationEl.textContent = "";
-        return;
-    }
-
-    if (summary.isMultiChart) {
-        // Multi-chart group (clickbench): show score and total.
-        summary.results.forEach((result, index) => {
-            const item = document.createElement("div");
-            item.className = "score-item";
-            item.innerHTML = `
+  const summaryList = document.getElementById(`${groupId}-summary`);
+  const explanationEl = document.getElementById(
+    `${groupId}-summary-explanation`,
+  );
+  if (!summaryList) return;
+
+  const summary = calculateGroupSummary(groupId, groupConfig);
+
+  summaryList.innerHTML = "";
+
+  if (summary.results.length === 0) {
+    summaryList.innerHTML = '<div class="score-item">No data available</div>';
+    if (explanationEl) explanationEl.textContent = "";
+    return;
+  }
+
+  if (summary.isMultiChart) {
+    // Multi-chart group (clickbench): show score and total.
+    summary.results.forEach((result, index) => {
+      const item = document.createElement("div");
+      item.className = "score-item";
+      item.innerHTML = `
                 <span class="score-rank">#${index + 1}</span>
                 <span class="score-series" style="color: ${groupConfig.seriesColors[result.name]}">${result.name}</span>
                 <div class="score-metrics">
@@ -520,18 +640,19 @@ function renderGroupSummary(groupId, groupConfig) {
                     <span class="score-ratio">${formatTime(result.total)}</span>
                 </div>
             `;
-            summaryList.appendChild(item);
-        });
+      summaryList.appendChild(item);
+    });
 
-        if (explanationEl) {
-            explanationEl.textContent = "Score: geometric mean of query time ratio to fastest with 10ms constant shift | Total: sum of all query times (lower is better)";
-        }
-    } else {
-        // Single-chart group: show time and ratio.
-        summary.results.forEach((result, index) => {
-            const item = document.createElement("div");
-            item.className = "score-item";
-            item.innerHTML = `
+    if (explanationEl) {
+      explanationEl.textContent =
+        "Score: geometric mean of query time ratio to fastest with 10ms constant shift | Total: sum of all query times (lower is better)";
+    }
+  } else {
+    // Single-chart group: show time and ratio.
+    summary.results.forEach((result, index) => {
+      const item = document.createElement("div");
+      item.className = "score-item";
+      item.innerHTML = `
                 <span class="score-rank">#${index + 1}</span>
                 <span class="score-series" style="color: ${groupConfig.seriesColors[result.name]}">${result.name}</span>
                 <div class="score-metrics">
@@ -539,13 +660,14 @@ function renderGroupSummary(groupId, groupConfig) {
                     <span class="score-ratio">${result.ratio.toFixed(2)}x</span>
                 </div>
             `;
-            summaryList.appendChild(item);
-        });
+      summaryList.appendChild(item);
+    });
 
-        if (explanationEl) {
-            explanationEl.textContent = "Query time | Ratio to fastest (lower is better)";
-        }
+    if (explanationEl) {
+      explanationEl.textContent =
+        "Query time | Ratio to fastest (lower is better)";
     }
+  }
 }
 
 /**
@@ -553,69 +675,69 @@ function renderGroupSummary(groupId, groupConfig) {
  * This ensures the first chart appears immediately rather than waiting for all 43.
  */
 async function resizeGroupChartsSequentially(groupId) {
-    for (const [prefix, chart] of chartInstances.entries()) {
-        if (prefix.startsWith(groupId + '-')) {
-            chart.resize();
-            // Yield to browser to paint before next resize.
-            await new Promise(r => requestAnimationFrame(r));
-        }
+  for (const [prefix, chart] of chartInstances.entries()) {
+    if (prefix.startsWith(groupId + "-")) {
+      chart.resize();
+      // Yield to browser to paint before next resize.
+      await new Promise((r) => requestAnimationFrame(r));
     }
+  }
 }
 
 /**
  * Sets up collapsible benchmark sections.
  */
 function setupCollapsibleBenchmarks() {
-    document.querySelectorAll('.benchmark-header').forEach(header => {
-        header.addEventListener('click', async () => {
-            const benchmarkSet = header.closest('.benchmark-set');
-            const wasCollapsed = benchmarkSet.classList.contains('collapsed');
-            benchmarkSet.classList.toggle('collapsed');
-
-            // If we just expanded, resize charts sequentially so first appears immediately.
-            if (wasCollapsed) {
-                const groupId = benchmarkSet.id.replace('-group', '');
-                await resizeGroupChartsSequentially(groupId);
-            }
-        });
+  document.querySelectorAll(".benchmark-header").forEach((header) => {
+    header.addEventListener("click", async () => {
+      const benchmarkSet = header.closest(".benchmark-set");
+      const wasCollapsed = benchmarkSet.classList.contains("collapsed");
+      benchmarkSet.classList.toggle("collapsed");
+
+      // If we just expanded, resize charts sequentially so first appears immediately.
+      if (wasCollapsed) {
+        const groupId = benchmarkSet.id.replace("-group", "");
+        await resizeGroupChartsSequentially(groupId);
+      }
     });
+  });
 }
 
 /**
  * Creates Chart.js datasets from series data.
  */
 function createDatasets(seriesData, groupConfig) {
-    return groupConfig.seriesNames.map(name => {
-        const data = seriesData.get(name);
-        return {
-            label: name,
-            data: data ? data.map(d => d?.value ?? null) : [],
-            borderColor: groupConfig.seriesColors[name],
-            backgroundColor: groupConfig.seriesColors[name],
-            borderWidth: 1.5,
-            borderJoinStyle: 'round',
-            pointRadius: 2,
-            tension: 0,
-            spanGaps: true,
-        };
-    });
+  return groupConfig.seriesNames.map((name) => {
+    const data = seriesData.get(name);
+    return {
+      label: name,
+      data: data ? data.map((d) => d?.value ?? null) : [],
+      borderColor: groupConfig.seriesColors[name],
+      backgroundColor: groupConfig.seriesColors[name],
+      borderWidth: 1.5,
+      borderJoinStyle: "round",
+      pointRadius: 2,
+      tension: 0,
+      spanGaps: true,
+    };
+  });
 }
 
 /**
  * Creates empty Chart.js datasets (structure only, no data).
  */
 function createEmptyDatasets(groupConfig) {
-    return groupConfig.seriesNames.map(name => ({
-        label: name,
-        data: [],
-        borderColor: groupConfig.seriesColors[name],
-        backgroundColor: groupConfig.seriesColors[name],
-        borderWidth: 1.5,
-        borderJoinStyle: 'round',
-        pointRadius: 2,
-        tension: 0,
-        spanGaps: true,
-    }));
+  return groupConfig.seriesNames.map((name) => ({
+    label: name,
+    data: [],
+    borderColor: groupConfig.seriesColors[name],
+    backgroundColor: groupConfig.seriesColors[name],
+    borderWidth: 1.5,
+    borderJoinStyle: "round",
+    pointRadius: 2,
+    tension: 0,
+    spanGaps: true,
+  }));
 }
 
 // ============================================================================
@@ -626,210 +748,230 @@ function createEmptyDatasets(groupConfig) {
  * Creates the vertical line plugin for Chart.js.
  */
 function createVerticalLinePlugin() {
-    return {
-        id: 'verticalLine',
-        afterDatasetsDraw(chart) {
-            if (chart.tooltip?._active?.length) {
-                const activePoint = chart.tooltip._active[0];
-                const ctx = chart.ctx;
-                const x = activePoint.element.x;
-                const topY = chart.scales.y.top;
-                const bottomY = chart.scales.y.bottom;
-
-                ctx.save();
-                ctx.beginPath();
-                ctx.moveTo(x, topY);
-                ctx.lineTo(x, bottomY);
-                ctx.lineWidth = 2;
-                ctx.strokeStyle = 'rgba(89, 113, 253, 0.5)';
-                ctx.stroke();
-                ctx.restore();
-            }
-        }
-    };
+  return {
+    id: "verticalLine",
+    afterDatasetsDraw(chart) {
+      if (chart.tooltip?._active?.length) {
+        const activePoint = chart.tooltip._active[0];
+        const ctx = chart.ctx;
+        const x = activePoint.element.x;
+        const topY = chart.scales.y.top;
+        const bottomY = chart.scales.y.bottom;
+
+        ctx.save();
+        ctx.beginPath();
+        ctx.moveTo(x, topY);
+        ctx.lineTo(x, bottomY);
+        ctx.lineWidth = 2;
+        ctx.strokeStyle = "rgba(89, 113, 253, 0.5)";
+        ctx.stroke();
+        ctx.restore();
+      }
+    },
+  };
 }
 
 /**
  * Creates tooltip configuration for Chart.js.
  */
 function createTooltipConfig(chartCommits, tooltipElementId) {
-    return {
-        enabled: false,
-        external: (context) => renderExternalTooltip(context, tooltipElementId),
-        callbacks: {
-            footer: (tooltipItems) => getTooltipFooter(tooltipItems, chartCommits)
-        }
-    };
+  return {
+    enabled: false,
+    external: (context) => renderExternalTooltip(context, tooltipElementId),
+    callbacks: {
+      footer: (tooltipItems) => getTooltipFooter(tooltipItems, chartCommits),
+    },
+  };
 }
 
 /**
  * Gets tooltip footer content with commit details.
  */
 function getTooltipFooter(tooltipItems, chartCommits) {
-    if (tooltipItems.length === 0) return [];
-    const commit = chartCommits[tooltipItems[0].dataIndex];
-    if (!commit) return [];
+  if (tooltipItems.length === 0) return [];
+  const commit = chartCommits[tooltipItems[0].dataIndex];
+  if (!commit) return [];
 
-    const date = new Date(commit.timestamp * 1000).toLocaleDateString();
+  const date = new Date(commit.timestamp * 1000).toLocaleDateString();
 
-    return [
-        commit.message.split("\n")[0].slice(0, 60),
-        `${commit.author.name} - ${date}`
-    ];
+  return [
+    commit.message.split("\n")[0].slice(0, 60),
+    `${commit.author.name} - ${date}`,
+  ];
 }
 
 /**
  * Renders the external tooltip element.
  */
 function renderExternalTooltip(context, tooltipElementId) {
-    const tooltipEl = document.getElementById(tooltipElementId);
-    if (!tooltipEl) return;
+  const tooltipEl = document.getElementById(tooltipElementId);
+  if (!tooltipEl) return;
 
-    const tooltipModel = context.tooltip;
+  const tooltipModel = context.tooltip;
 
-    if (tooltipModel.opacity === 0) {
-        tooltipEl.classList.remove('active');
-        return;
-    }
+  if (tooltipModel.opacity === 0) {
+    tooltipEl.classList.remove("active");
+    return;
+  }
 
-    if (tooltipModel.body) {
-        tooltipEl.innerHTML = buildTooltipHTML(tooltipModel);
-        positionTooltip(tooltipEl, context, tooltipModel);
-    }
+  if (tooltipModel.body) {
+    tooltipEl.innerHTML = buildTooltipHTML(tooltipModel);
+    positionTooltip(tooltipEl, context, tooltipModel);
+  }
 }
 
 /**
  * Builds HTML content for the tooltip.
  */
 function buildTooltipHTML(tooltipModel) {
-    const titleLines = tooltipModel.title || [];
-    const footerLines = tooltipModel.footer || [];
-
-    let html = '<div class="chartjs-tooltip-body">';
-
-    titleLines.forEach(title => {
-        html += `<div style="font-weight: bold; margin-bottom: 4px;">${title}</div>`;
-    });
-
-    const sortedItems = [...tooltipModel.dataPoints].sort((a, b) => b.parsed.y - a.parsed.y);
-    sortedItems.forEach((item) => {
-        const color = item.dataset.borderColor;
-        const value = item.formattedValue;
-        const label = item.dataset.label;
-        html += `
+  const titleLines = tooltipModel.title || [];
+  const footerLines = tooltipModel.footer || [];
+
+  let html = '<div class="chartjs-tooltip-body">';
+
+  titleLines.forEach((title) => {
+    html += `<div style="font-weight: bold; margin-bottom: 4px;">${title}</div>`;
+  });
+
+  const sortedItems = [...tooltipModel.dataPoints].sort(
+    (a, b) => b.parsed.y - a.parsed.y,
+  );
+  sortedItems.forEach((item) => {
+    const color = item.dataset.borderColor;
+    const value = item.formattedValue;
+    const label = item.dataset.label;
+    html += `
             <div class="chartjs-tooltip-item">
                 <div class="chartjs-tooltip-color" style="background-color: ${color}"></div>
                 <span>${label}: ${value}ms</span>
             </div>
         `;
-    });
+  });
 
-    if (footerLines.length > 0) {
-        html += '<div class="chartjs-tooltip-footer">';
-        footerLines.forEach(footer => {
-            html += `<div>${footer}</div>`;
-        });
-        html += '</div>';
-    }
+  if (footerLines.length > 0) {
+    html += '<div class="chartjs-tooltip-footer">';
+    footerLines.forEach((footer) => {
+      html += `<div>${footer}</div>`;
+    });
+    html += "</div>";
+  }
 
-    html += '</div>';
-    return html;
+  html += "</div>";
+  return html;
 }
 
 /**
  * Positions the tooltip below the chart.
  */
 function positionTooltip(tooltipEl, context, tooltipModel) {
-    const canvas = context.chart.canvas;
-    const canvasRect = canvas.getBoundingClientRect();
-
-    tooltipEl.classList.add('active');
-    tooltipEl.style.left = canvasRect.left + window.pageXOffset + tooltipModel.caretX + 'px';
-    tooltipEl.style.top = canvasRect.bottom + window.pageYOffset + 10 + 'px';
-    tooltipEl.style.transform = 'translateX(-50%)';
+  const canvas = context.chart.canvas;
+  const canvasRect = canvas.getBoundingClientRect();
+
+  tooltipEl.classList.add("active");
+  tooltipEl.style.left =
+    canvasRect.left + window.pageXOffset + tooltipModel.caretX + "px";
+  tooltipEl.style.top = canvasRect.bottom + window.pageYOffset + 10 + "px";
+  tooltipEl.style.transform = "translateX(-50%)";
 }
 
 /**
  * Creates chart options configuration.
  */
-function createChartOptions(chartCommits, tooltipElementId, groupId, groupConfig) {
-    const legendConfig = {
-        position: "top",
-    };
-
-    // Add group-linked legend click handler if groupId and groupConfig are provided.
-    if (groupId && groupConfig) {
-        legendConfig.onClick = createGroupLegendClickHandler(groupId, groupConfig);
-    }
-
-    return {
-        responsive: true,
-        maintainAspectRatio: false,
-        layout: {
-            padding: { left: 0, right: 0, top: 0, bottom: 0 }
-        },
-        interaction: {
-            intersect: false,
-            mode: "index",
-        },
-        scales: {
-            x: {
-                title: { display: false },
-                ticks: {
-                    maxRotation: 45,
-                    minRotation: 45,
-                    autoSkipPadding: 10,
-                },
-                min: Math.max(0, chartCommits.length - CONFIG.defaultVisibleCommits),
-            },
-            y: {
-                title: {
-                    display: true,
-                    text: CONFIG.yAxisLabel,
-                },
-                beginAtZero: true,
-            },
+function createChartOptions(
+  chartCommits,
+  tooltipElementId,
+  groupId,
+  groupConfig,
+) {
+  const legendConfig = {
+    position: "top",
+  };
+
+  // Add group-linked legend click handler if groupId and groupConfig are provided.
+  if (groupId && groupConfig) {
+    legendConfig.onClick = createGroupLegendClickHandler(groupId, groupConfig);
+  }
+
+  return {
+    responsive: true,
+    maintainAspectRatio: false,
+    layout: {
+      padding: { left: 0, right: 0, top: 0, bottom: 0 },
+    },
+    interaction: {
+      intersect: false,
+      mode: "index",
+    },
+    scales: {
+      x: {
+        title: { display: false },
+        ticks: {
+          maxRotation: 45,
+          minRotation: 45,
+          autoSkipPadding: 10,
         },
-        plugins: {
-            verticalLine: {},
-            legend: legendConfig,
-            tooltip: createTooltipConfig(chartCommits, tooltipElementId),
+        min: Math.max(0, chartCommits.length - CONFIG.defaultVisibleCommits),
+      },
+      y: {
+        title: {
+          display: true,
+          text: CONFIG.yAxisLabel,
         },
-        onClick: (event, elements) => handleChartClick(elements, chartCommits),
-    };
+        beginAtZero: true,
+      },
+    },
+    plugins: {
+      verticalLine: {},
+      legend: legendConfig,
+      tooltip: createTooltipConfig(chartCommits, tooltipElementId),
+    },
+    onClick: (event, elements) => handleChartClick(elements, chartCommits),
+  };
 }
 
 /**
  * Handles click events on chart data points.
  */
 function handleChartClick(elements, chartCommits) {
-    if (elements.length > 0) {
-        const index = elements[0].index;
-        const commit = chartCommits[index];
-        if (commit?.url) {
-            window.open(commit.url, "_blank");
-        }
+  if (elements.length > 0) {
+    const index = elements[0].index;
+    const commit = chartCommits[index];
+    if (commit?.url) {
+      window.open(commit.url, "_blank");
     }
+  }
 }
 
 /**
  * Creates a Chart.js instance.
  */
-function createChartInstance(canvasId, chartCommits, seriesData, groupId, groupConfig, tooltipElementId) {
-    const canvas = document.getElementById(canvasId);
-    if (!canvas) return null;
-
-    const ctx = canvas.getContext("2d");
-    const datasets = createDatasets(seriesData, groupConfig);
-
-    return new Chart(ctx, {
-        type: "line",
-        data: {
-            labels: chartCommits.map(c => c.id.slice(0, 7)),
-            datasets: datasets,
-        },
-        options: createChartOptions(chartCommits, tooltipElementId, groupId, groupConfig),
-    });
+function createChartInstance(
+  canvasId,
+  chartCommits,
+  seriesData,
+  groupId,
+  groupConfig,
+  tooltipElementId,
+) {
+  const canvas = document.getElementById(canvasId);
+  if (!canvas) return null;
+
+  const ctx = canvas.getContext("2d");
+  const datasets = createDatasets(seriesData, groupConfig);
+
+  return new Chart(ctx, {
+    type: "line",
+    data: {
+      labels: chartCommits.map((c) => c.id.slice(0, 7)),
+      datasets: datasets,
+    },
+    options: createChartOptions(
+      chartCommits,
+      tooltipElementId,
+      groupId,
+      groupConfig,
+    ),
+  });
 }
 
 // ============================================================================
@@ -840,152 +982,178 @@ function createChartInstance(canvasId, chartCommits, seriesData, groupId, groupC
  * Creates chart context for timeline state management.
  */
 function createChartContext(totalCommits) {
-    return {
-        totalCommits,
-        minWindowSize: CONFIG.minWindowSize,
-        maxWindowSize: totalCommits,
-        defaultWindowSize: CONFIG.defaultVisibleCommits,
-        currentWindowSize: Math.min(CONFIG.defaultVisibleCommits, totalCommits),
-        currentPosition: totalCommits
-    };
+  return {
+    totalCommits,
+    minWindowSize: CONFIG.minWindowSize,
+    maxWindowSize: totalCommits,
+    defaultWindowSize: CONFIG.defaultVisibleCommits,
+    currentWindowSize: Math.min(CONFIG.defaultVisibleCommits, totalCommits),
+    currentPosition: totalCommits,
+  };
 }
 
 /**
  * Updates scrollbar dimensions to match current window size.
  */
 function updateScrollbarDimensions(elements, chartContext) {
-    const containerWidth = elements.scrollbarContainer.clientWidth;
-    const ratio = chartContext.totalCommits / chartContext.currentWindowSize;
-    const contentWidth = Math.max(containerWidth * ratio, containerWidth * 1.01);
-    elements.scrollbarContent.style.width = `${contentWidth}px`;
+  const containerWidth = elements.scrollbarContainer.clientWidth;
+  const ratio = chartContext.totalCommits / chartContext.currentWindowSize;
+  const contentWidth = Math.max(containerWidth * ratio, containerWidth * 1.01);
+  elements.scrollbarContent.style.width = `${contentWidth}px`;
 }
 
 /**
  * Updates chart view and UI to reflect current state.
  */
-function updateChartView(elements, chartContext, chartInstance, updateScrollbar) {
-    const windowSize = chartContext.currentWindowSize;
-    const position = chartContext.currentPosition;
-
-    const endIndex = Math.min(position, chartContext.totalCommits);
-    const startIndex = Math.max(0, endIndex - windowSize);
-
-    chartInstance.options.scales.x.min = startIndex;
-    chartInstance.options.scales.x.max = endIndex - 1;
-    chartInstance.update('none');
-
-    elements.controlInfoText.textContent =
-        `Showing commits ${startIndex + 1}-${endIndex} of ${chartContext.totalCommits} (${windowSize} visible)`;
-
-    if (updateScrollbar) {
-        updateScrollbarDimensions(elements, chartContext);
-        const scrollPercentage = (endIndex - windowSize) / (chartContext.totalCommits - windowSize);
-        elements.scrollbarContainer.scrollLeft = scrollPercentage *
-            (elements.scrollbarContent.clientWidth - elements.scrollbarContainer.clientWidth);
-    }
+function updateChartView(
+  elements,
+  chartContext,
+  chartInstance,
+  updateScrollbar,
+) {
+  const windowSize = chartContext.currentWindowSize;
+  const position = chartContext.currentPosition;
+
+  const endIndex = Math.min(position, chartContext.totalCommits);
+  const startIndex = Math.max(0, endIndex - windowSize);
+
+  chartInstance.options.scales.x.min = startIndex;
+  chartInstance.options.scales.x.max = endIndex - 1;
+  chartInstance.update("none");
+
+  elements.controlInfoText.textContent = `Showing commits ${startIndex + 1}-${endIndex} of ${chartContext.totalCommits} (${windowSize} visible)`;
+
+  if (updateScrollbar) {
+    updateScrollbarDimensions(elements, chartContext);
+    const scrollPercentage =
+      (endIndex - windowSize) / (chartContext.totalCommits - windowSize);
+    elements.scrollbarContainer.scrollLeft =
+      scrollPercentage *
+      (elements.scrollbarContent.clientWidth -
+        elements.scrollbarContainer.clientWidth);
+  }
 }
 
 /**
  * Sets up scrollbar event handler.
  */
 function setupScrollbarHandler(elements, chartContext, chartInstance) {
-    elements.scrollbarContainer.addEventListener("scroll", () => {
-        const scrollLeft = elements.scrollbarContainer.scrollLeft;
-        const maxScroll = elements.scrollbarContent.clientWidth - elements.scrollbarContainer.clientWidth;
-        const scrollPercentage = maxScroll > 0 ? scrollLeft / maxScroll : 0;
+  elements.scrollbarContainer.addEventListener("scroll", () => {
+    const scrollLeft = elements.scrollbarContainer.scrollLeft;
+    const maxScroll =
+      elements.scrollbarContent.clientWidth -
+      elements.scrollbarContainer.clientWidth;
+    const scrollPercentage = maxScroll > 0 ? scrollLeft / maxScroll : 0;
 
-        const windowSize = chartContext.currentWindowSize;
-        const newPosition = Math.round(windowSize + scrollPercentage * (chartContext.totalCommits - windowSize));
-        chartContext.currentPosition = Math.min(chartContext.totalCommits, Math.max(windowSize, newPosition));
+    const windowSize = chartContext.currentWindowSize;
+    const newPosition = Math.round(
+      windowSize + scrollPercentage * (chartContext.totalCommits - windowSize),
+    );
+    chartContext.currentPosition = Math.min(
+      chartContext.totalCommits,
+      Math.max(windowSize, newPosition),
+    );
 
-        updateChartView(elements, chartContext, chartInstance, false);
-    });
+    updateChartView(elements, chartContext, chartInstance, false);
+  });
 }
 
 /**
  * Sets up zoom button click handlers.
  */
 function setupZoomButtons(elements, chartContext, chartInstance) {
-    const zoom = (step, direction) => {
-        const currentWindowSize = chartContext.currentWindowSize;
-
-        let newWindowSize;
-        if (direction > 0) {
-            newWindowSize = Math.ceil((currentWindowSize + 1) / step) * step;
-        } else {
-            newWindowSize = Math.floor((currentWindowSize - 1) / step) * step;
-        }
-        newWindowSize = Math.max(chartContext.minWindowSize, Math.min(chartContext.maxWindowSize, newWindowSize));
-
-        const currentStart = chartContext.currentPosition - currentWindowSize;
-        const currentCenter = currentStart + currentWindowSize / 2;
-        chartContext.currentWindowSize = newWindowSize;
-        chartContext.currentPosition = Math.min(
-            chartContext.totalCommits,
-            Math.max(newWindowSize, Math.round(currentCenter + newWindowSize / 2))
-        );
+  const zoom = (step, direction) => {
+    const currentWindowSize = chartContext.currentWindowSize;
 
-        updateChartView(elements, chartContext, chartInstance, true);
-    };
+    let newWindowSize;
+    if (direction > 0) {
+      newWindowSize = Math.ceil((currentWindowSize + 1) / step) * step;
+    } else {
+      newWindowSize = Math.floor((currentWindowSize - 1) / step) * step;
+    }
+    newWindowSize = Math.max(
+      chartContext.minWindowSize,
+      Math.min(chartContext.maxWindowSize, newWindowSize),
+    );
+
+    const currentStart = chartContext.currentPosition - currentWindowSize;
+    const currentCenter = currentStart + currentWindowSize / 2;
+    chartContext.currentWindowSize = newWindowSize;
+    chartContext.currentPosition = Math.min(
+      chartContext.totalCommits,
+      Math.max(newWindowSize, Math.round(currentCenter + newWindowSize / 2)),
+    );
 
-    elements.zoomInSmallBtn?.addEventListener("click", () => zoom(25, -1));
-    elements.zoomInLargeBtn?.addEventListener("click", () => zoom(250, -1));
-    elements.zoomOutSmallBtn?.addEventListener("click", () => zoom(25, 1));
-    elements.zoomOutLargeBtn?.addEventListener("click", () => zoom(250, 1));
+    updateChartView(elements, chartContext, chartInstance, true);
+  };
+
+  elements.zoomInSmallBtn?.addEventListener("click", () => zoom(25, -1));
+  elements.zoomInLargeBtn?.addEventListener("click", () => zoom(250, -1));
+  elements.zoomOutSmallBtn?.addEventListener("click", () => zoom(25, 1));
+  elements.zoomOutLargeBtn?.addEventListener("click", () => zoom(250, 1));
 }
 
 /**
  * Sets up mouse wheel pan handler.
  */
 function setupWheelPanHandler(elements, chartContext, chartInstance) {
-    elements.chartCanvas.addEventListener("wheel", (e) => {
-        e.preventDefault();
+  elements.chartCanvas.addEventListener("wheel", (e) => {
+    e.preventDefault();
 
-        const delta = Math.sign(e.deltaY);
-        const panAmount = Math.max(1, Math.round(chartContext.currentWindowSize * 0.1));
+    const delta = Math.sign(e.deltaY);
+    const panAmount = Math.max(
+      1,
+      Math.round(chartContext.currentWindowSize * 0.1),
+    );
 
-        chartContext.currentPosition = Math.min(
-            chartContext.totalCommits,
-            Math.max(chartContext.currentWindowSize, chartContext.currentPosition + delta * panAmount)
-        );
+    chartContext.currentPosition = Math.min(
+      chartContext.totalCommits,
+      Math.max(
+        chartContext.currentWindowSize,
+        chartContext.currentPosition + delta * panAmount,
+      ),
+    );
 
-        updateChartView(elements, chartContext, chartInstance, true);
-    });
+    updateChartView(elements, chartContext, chartInstance, true);
+  });
 }
 
 /**
  * Initializes timeline controls for a chart.
  */
 function initializeTimelineControls(chartInstance, chartCommits, prefix) {
-    const elements = {
-        scrollbarContainer: document.getElementById(`${prefix}scrollbar-container`),
-        scrollbarContent: document.getElementById(`${prefix}scrollbar-content`),
-        controlInfoText: document.getElementById(`${prefix}info`),
-        chartCanvas: document.getElementById(`${prefix}canvas`),
-        zoomInSmallBtn: document.getElementById(`${prefix}zoom-in-small`),
-        zoomInLargeBtn: document.getElementById(`${prefix}zoom-in-large`),
-        zoomOutSmallBtn: document.getElementById(`${prefix}zoom-out-small`),
-        zoomOutLargeBtn: document.getElementById(`${prefix}zoom-out-large`),
-    };
-
-    const chartContext = createChartContext(chartCommits.length);
-
-    if (chartContext.totalCommits === 0) {
-        if (elements.scrollbarContainer) elements.scrollbarContainer.style.display = "none";
-        if (elements.controlInfoText) elements.controlInfoText.textContent = "No data available";
-        return;
-    }
-
-    if (chartContext.totalCommits === 1) {
-        if (elements.scrollbarContainer) elements.scrollbarContainer.style.display = "none";
-        chartContext.maxWindowSize = 1;
-    }
-
-    setupScrollbarHandler(elements, chartContext, chartInstance);
-    setupZoomButtons(elements, chartContext, chartInstance);
-    setupWheelPanHandler(elements, chartContext, chartInstance);
-
-    updateChartView(elements, chartContext, chartInstance, true);
+  const elements = {
+    scrollbarContainer: document.getElementById(`${prefix}scrollbar-container`),
+    scrollbarContent: document.getElementById(`${prefix}scrollbar-content`),
+    controlInfoText: document.getElementById(`${prefix}info`),
+    chartCanvas: document.getElementById(`${prefix}canvas`),
+    zoomInSmallBtn: document.getElementById(`${prefix}zoom-in-small`),
+    zoomInLargeBtn: document.getElementById(`${prefix}zoom-in-large`),
+    zoomOutSmallBtn: document.getElementById(`${prefix}zoom-out-small`),
+    zoomOutLargeBtn: document.getElementById(`${prefix}zoom-out-large`),
+  };
+
+  const chartContext = createChartContext(chartCommits.length);
+
+  if (chartContext.totalCommits === 0) {
+    if (elements.scrollbarContainer)
+      elements.scrollbarContainer.style.display = "none";
+    if (elements.controlInfoText)
+      elements.controlInfoText.textContent = "No data available";
+    return;
+  }
+
+  if (chartContext.totalCommits === 1) {
+    if (elements.scrollbarContainer)
+      elements.scrollbarContainer.style.display = "none";
+    chartContext.maxWindowSize = 1;
+  }
+
+  setupScrollbarHandler(elements, chartContext, chartInstance);
+  setupZoomButtons(elements, chartContext, chartInstance);
+  setupWheelPanHandler(elements, chartContext, chartInstance);
+
+  updateChartView(elements, chartContext, chartInstance, true);
 }
 
 // ============================================================================
@@ -1007,29 +1175,29 @@ const hiddenSeries = new Map();
  * Creates a legend click handler that syncs visibility across all charts in a group.
  */
 function createGroupLegendClickHandler(groupId, groupConfig) {
-    return function(e, legendItem, legend) {
-        const seriesName = legendItem.text;
-        const hidden = hiddenSeries.get(groupId) || new Set();
-
-        // Toggle visibility.
-        if (hidden.has(seriesName)) {
-            hidden.delete(seriesName);
-        } else {
-            hidden.add(seriesName);
-        }
-        hiddenSeries.set(groupId, hidden);
-
-        // Update all charts in this group (no animation for performance with many charts).
-        for (const [prefix, chart] of chartInstances.entries()) {
-            if (prefix.startsWith(groupId + '-')) {
-                const datasetIndex = groupConfig.seriesNames.indexOf(seriesName);
-                if (datasetIndex >= 0) {
-                    chart.setDatasetVisibility(datasetIndex, !hidden.has(seriesName));
-                    chart.update('none');
-                }
-            }
+  return function (e, legendItem, legend) {
+    const seriesName = legendItem.text;
+    const hidden = hiddenSeries.get(groupId) || new Set();
+
+    // Toggle visibility.
+    if (hidden.has(seriesName)) {
+      hidden.delete(seriesName);
+    } else {
+      hidden.add(seriesName);
+    }
+    hiddenSeries.set(groupId, hidden);
+
+    // Update all charts in this group (no animation for performance with many charts).
+    for (const [prefix, chart] of chartInstances.entries()) {
+      if (prefix.startsWith(groupId + "-")) {
+        const datasetIndex = groupConfig.seriesNames.indexOf(seriesName);
+        if (datasetIndex >= 0) {
+          chart.setDatasetVisibility(datasetIndex, !hidden.has(seriesName));
+          chart.update("none");
         }
-    };
+      }
+    }
+  };
 }
 
 // ============================================================================
@@ -1041,103 +1209,112 @@ function createGroupLegendClickHandler(groupId, groupConfig) {
  * This allows the chart to be visible immediately while data loads.
  */
 function createEmptyChart(groupId, chartName, groupConfig) {
-    const prefix = makeId(groupId, chartName, '');
-    const canvas = document.getElementById(`${prefix}canvas`);
-    if (!canvas) return null;
-
-    const ctx = canvas.getContext("2d");
-    const datasets = createEmptyDatasets(groupConfig);
-
-    const chart = new Chart(ctx, {
-        type: "line",
-        data: {
-            labels: [],
-            datasets: datasets,
-        },
-        options: {
-            responsive: true,
-            maintainAspectRatio: false,
-            scales: {
-                x: { display: true },
-                y: {
-                    display: true,
-                    title: { display: true, text: CONFIG.yAxisLabel },
-                    beginAtZero: true,
-                },
-            },
-            plugins: {
-                legend: { position: "top" },
-            },
+  const prefix = makeId(groupId, chartName, "");
+  const canvas = document.getElementById(`${prefix}canvas`);
+  if (!canvas) return null;
+
+  const ctx = canvas.getContext("2d");
+  const datasets = createEmptyDatasets(groupConfig);
+
+  const chart = new Chart(ctx, {
+    type: "line",
+    data: {
+      labels: [],
+      datasets: datasets,
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        x: { display: true },
+        y: {
+          display: true,
+          title: { display: true, text: CONFIG.yAxisLabel },
+          beginAtZero: true,
         },
-    });
+      },
+      plugins: {
+        legend: { position: "top" },
+      },
+    },
+  });
 
-    chartInstances.set(prefix, chart);
-    return chart;
+  chartInstances.set(prefix, chart);
+  return chart;
 }
 
 /**
  * Updates an existing chart with data.
  */
 async function renderChart(wasm, groupId, chartName, groupConfig, commits) {
-    const prefix = makeId(groupId, chartName, '');
-
-    try {
-        const chartData = await loadChartData(wasm, groupId, chartName);
-        const { seriesData, chartCommits } = processChartData(chartData, commits, groupConfig);
-
-        // Store chart data for group summary calculation.
-        storeChartData(groupId, chartName, seriesData);
-
-        // Get the existing chart instance.
-        let chartInstance = chartInstances.get(prefix);
-
-        if (chartInstance) {
-            // Update existing chart with new data.
-            chartInstance.data.labels = chartCommits.map(c => c.id.slice(0, 7));
-            chartInstance.data.datasets = createDatasets(seriesData, groupConfig);
-
-            // Update options for tooltips, click handling, and linked legend.
-            chartInstance.options = createChartOptions(chartCommits, `${prefix}tooltip`, groupId, groupConfig);
-
-            chartInstance.update('none');
-        } else {
-            // Fallback: create new chart if empty one wasn't created.
-            chartInstance = createChartInstance(
-                `${prefix}canvas`,
-                chartCommits,
-                seriesData,
-                groupId,
-                groupConfig,
-                `${prefix}tooltip`
-            );
-            if (chartInstance) {
-                chartInstances.set(prefix, chartInstance);
-            }
-        }
+  const prefix = makeId(groupId, chartName, "");
+
+  try {
+    const chartData = await loadChartData(wasm, groupId, chartName);
+    const { seriesData, chartCommits } = processChartData(
+      chartData,
+      commits,
+      groupConfig,
+    );
 
-        if (chartInstance) {
-            initializeTimelineControls(chartInstance, chartCommits, prefix);
-        }
+    // Store chart data for group summary calculation.
+    storeChartData(groupId, chartName, seriesData);
+
+    // Get the existing chart instance.
+    let chartInstance = chartInstances.get(prefix);
+
+    if (chartInstance) {
+      // Update existing chart with new data.
+      chartInstance.data.labels = chartCommits.map((c) => c.id.slice(0, 7));
+      chartInstance.data.datasets = createDatasets(seriesData, groupConfig);
+
+      // Update options for tooltips, click handling, and linked legend.
+      chartInstance.options = createChartOptions(
+        chartCommits,
+        `${prefix}tooltip`,
+        groupId,
+        groupConfig,
+      );
+
+      chartInstance.update("none");
+    } else {
+      // Fallback: create new chart if empty one wasn't created.
+      chartInstance = createChartInstance(
+        `${prefix}canvas`,
+        chartCommits,
+        seriesData,
+        groupId,
+        groupConfig,
+        `${prefix}tooltip`,
+      );
+      if (chartInstance) {
+        chartInstances.set(prefix, chartInstance);
+      }
+    }
 
-        return true;
-    } catch (error) {
-        console.error(`Failed to render chart ${groupId}/${chartName}:`, error);
-        const infoEl = document.getElementById(`${prefix}info`);
-        if (infoEl) infoEl.textContent = `Error: ${error.message}`;
-        return false;
+    if (chartInstance) {
+      initializeTimelineControls(chartInstance, chartCommits, prefix);
     }
+
+    return true;
+  } catch (error) {
+    console.error(`Failed to render chart ${groupId}/${chartName}:`, error);
+    const infoEl = document.getElementById(`${prefix}info`);
+    if (infoEl) infoEl.textContent = `Error: ${error.message}`;
+    return false;
+  }
 }
 
 /**
  * Creates chart placeholders for a group (immediate, no data loading).
  */
 function createChartPlaceholders(groupId, groupConfig) {
-    const chartsContainer = document.getElementById(`${groupId}-charts`);
-    if (!chartsContainer) return;
+  const chartsContainer = document.getElementById(`${groupId}-charts`);
+  if (!chartsContainer) return;
 
-    chartsContainer.innerHTML = groupConfig.charts
-        .map(chartName => createChartHTML(groupId, chartName))
-        .join('');
+  chartsContainer.innerHTML = groupConfig.charts
+    .map((chartName) => createChartHTML(groupId, chartName))
+    .join("");
 }
 
 /**
@@ -1145,9 +1322,9 @@ function createChartPlaceholders(groupId, groupConfig) {
  * This makes charts visible immediately (with legend but no data).
  */
 function createEmptyCharts(groupId, groupConfig) {
-    for (const chartName of groupConfig.charts) {
-        createEmptyChart(groupId, chartName, groupConfig);
-    }
+  for (const chartName of groupConfig.charts) {
+    createEmptyChart(groupId, chartName, groupConfig);
+  }
 }
 
 /**
@@ -1157,7 +1334,7 @@ function createEmptyCharts(groupId, groupConfig) {
  * progressively rather than all at once.
  */
 function waitForPaint() {
-    return new Promise(resolve => setTimeout(resolve, 16));
+  return new Promise((resolve) => setTimeout(resolve, 16));
 }
 
 // ============================================================================
@@ -1168,96 +1345,104 @@ function waitForPaint() {
  * Main function that orchestrates the entire benchmark page initialization.
  */
 async function main() {
-    try {
-        // Register the vertical line plugin once.
-        Chart.register(createVerticalLinePlugin());
-
-        // Step 1: Create all group containers immediately from JS config.
-        // This happens BEFORE loading any data so users see the UI instantly.
-        const container = document.getElementById("benchmarks-container");
-        if (!container) {
-            throw new Error("Benchmarks container not found");
-        }
+  try {
+    // Register the vertical line plugin once.
+    Chart.register(createVerticalLinePlugin());
+
+    // Step 1: Create all group containers immediately from JS config.
+    // This happens BEFORE loading any data so users see the UI instantly.
+    const container = document.getElementById("benchmarks-container");
+    if (!container) {
+      throw new Error("Benchmarks container not found");
+    }
 
-        let groupsHTML = '';
-        const allGroups = Object.entries(BENCHMARK_GROUPS);
-        for (const [groupId, groupConfig] of allGroups) {
-            groupsHTML += createGroupHTML(groupId, groupConfig);
-        }
-        container.innerHTML = groupsHTML;
+    let groupsHTML = "";
+    const allGroups = Object.entries(BENCHMARK_GROUPS);
+    for (const [groupId, groupConfig] of allGroups) {
+      groupsHTML += createGroupHTML(groupId, groupConfig);
+    }
+    container.innerHTML = groupsHTML;
 
-        // Step 2: Create all chart placeholders (HTML structure).
-        for (const [groupId, groupConfig] of allGroups) {
-            createChartPlaceholders(groupId, groupConfig);
-        }
+    // Step 2: Create all chart placeholders (HTML structure).
+    for (const [groupId, groupConfig] of allGroups) {
+      createChartPlaceholders(groupId, groupConfig);
+    }
 
-        // Step 3: Create empty Chart.js instances (visible charts with no data).
-        for (const [groupId, groupConfig] of allGroups) {
-            createEmptyCharts(groupId, groupConfig);
-        }
+    // Step 3: Create empty Chart.js instances (visible charts with no data).
+    for (const [groupId, groupConfig] of allGroups) {
+      createEmptyCharts(groupId, groupConfig);
+    }
 
-        // Step 4: Set up collapsible behavior.
-        setupCollapsibleBenchmarks();
+    // Step 4: Set up collapsible behavior.
+    setupCollapsibleBenchmarks();
 
-        // Step 5: Show status - UI is ready, data loading in background.
-        const totalCharts = allGroups.reduce((n, [_, c]) => n + c.charts.length, 0);
-        setStatus(`Loading ${totalCharts} charts...`, "loading");
+    // Step 5: Show status - UI is ready, data loading in background.
+    const totalCharts = allGroups.reduce((n, [_, c]) => n + c.charts.length, 0);
+    setStatus(`Loading ${totalCharts} charts...`, "loading");
 
-        // Step 6: Yield to browser to paint the UI before loading data.
-        await waitForPaint();
+    // Step 6: Yield to browser to paint the UI before loading data.
+    await waitForPaint();
+
+    // Step 7: NOW load WASM and data (charts already visible).
+    const wasm = await loadWasmModule();
+    const summary = await loadBenchmarkSummary(wasm);
+
+    console.log("Available groups from server:", Object.keys(summary.groups));
+    console.log("Configured groups:", Object.keys(BENCHMARK_GROUPS));
 
-        // Step 7: NOW load WASM and data (charts already visible).
-        const wasm = await loadWasmModule();
-        const summary = await loadBenchmarkSummary(wasm);
-
-        console.log("Available groups from server:", Object.keys(summary.groups));
-        console.log("Configured groups:", Object.keys(BENCHMARK_GROUPS));
-
-        // Step 8: Filter to groups that exist on server.
-        const activeGroups = allGroups.filter(([groupId]) => {
-            const exists = !!summary.groups[groupId];
-            if (!exists) {
-                console.warn(`Group '${groupId}' not found in server data, skipping`);
-            }
-            return exists;
-        });
-
-        // Step 9: Update charts with data one by one (strictly sequential).
-        // Charts are already visible (empty), now we fill in the data.
-        let loadedCharts = 0;
-        for (const [groupId, groupConfig] of activeGroups) {
-            const statusEl = document.getElementById(`${groupId}-status`);
-            const groupTotal = groupConfig.charts.length;
-            let groupLoaded = 0;
-
-            for (const chartName of groupConfig.charts) {
-                const success = await renderChart(wasm, groupId, chartName, groupConfig, summary.commits);
-                if (success) {
-                    groupLoaded++;
-                    loadedCharts++;
-                }
-
-                // Update group status.
-                if (statusEl) {
-                    statusEl.textContent = `${groupLoaded}/${groupTotal} charts`;
-                }
-
-                // Wait for browser to paint before rendering next chart.
-                await waitForPaint();
-            }
-
-            // Render group summary after all charts are loaded.
-            renderGroupSummary(groupId, groupConfig);
-
-            console.log(`Rendered ${groupLoaded}/${groupTotal} charts in ${groupId}`);
+    // Step 8: Filter to groups that exist on server.
+    const activeGroups = allGroups.filter(([groupId]) => {
+      const exists = !!summary.groups[groupId];
+      if (!exists) {
+        console.warn(`Group '${groupId}' not found in server data, skipping`);
+      }
+      return exists;
+    });
+
+    // Step 9: Update charts with data one by one (strictly sequential).
+    // Charts are already visible (empty), now we fill in the data.
+    let loadedCharts = 0;
+    for (const [groupId, groupConfig] of activeGroups) {
+      const statusEl = document.getElementById(`${groupId}-status`);
+      const groupTotal = groupConfig.charts.length;
+      let groupLoaded = 0;
+
+      for (const chartName of groupConfig.charts) {
+        const success = await renderChart(
+          wasm,
+          groupId,
+          chartName,
+          groupConfig,
+          summary.commits,
+        );
+        if (success) {
+          groupLoaded++;
+          loadedCharts++;
         }
 
-        setStatus(`Loaded ${loadedCharts} charts across ${activeGroups.length} groups`, "success");
+        // Update group status.
+        if (statusEl) {
+          statusEl.textContent = `${groupLoaded}/${groupTotal} charts`;
+        }
 
-    } catch (error) {
-        console.error("Error:", error);
-        setStatus(`Error: ${error.message}`, "error");
+        // Wait for browser to paint before rendering next chart.
+        await waitForPaint();
+      }
+
+      // Render group summary after all charts are loaded.
+      renderGroupSummary(groupId, groupConfig);
+
+      console.log(`Rendered ${groupLoaded}/${groupTotal} charts in ${groupId}`);
     }
+
+    setStatus(
+      `Loaded ${loadedCharts} charts across ${activeGroups.length} groups`,
+      "success",
+    );
+  } catch (error) {
+    console.error("Error:", error);
+    setStatus(`Error: ${error.message}`, "error");
+  }
 }
 
 main();

From 149820edb6faa0e82074bf619986875d1f35e83e Mon Sep 17 00:00:00 2001
From: Connor Tsui <connor.tsui20@gmail.com>
Date: Thu, 4 Dec 2025 17:54:32 -0500
Subject: [PATCH 24/30] clean up even more

Signed-off-by: Connor Tsui <connor.tsui20@gmail.com>
---
 vortex-wasm/wasm-test.js | 457 +++++++++++++--------------------------
 1 file changed, 155 insertions(+), 302 deletions(-)

diff --git a/vortex-wasm/wasm-test.js b/vortex-wasm/wasm-test.js
index b050f3b1209..a6e91eedf97 100644
--- a/vortex-wasm/wasm-test.js
+++ b/vortex-wasm/wasm-test.js
@@ -13,6 +13,65 @@ const CONFIG = {
   yAxisLabel: "Time (ms)",
 };
 
+/**
+ * Centralized series colors. Each series name maps to its display color.
+ */
+const SERIES_COLORS = {
+  // Simple series names (random-access).
+  vortex: "#101010",
+  parquet: "#5DADE2",
+  lance: "#ef7f1d",
+  // DuckDB series.
+  "duckdb:vortex-compact": "#101010",
+  "duckdb:vortex-file-compressed": "#6b7280",
+  "duckdb:parquet": "#5DADE2",
+  "duckdb:duckdb": "#f59e0b",
+  // DataFusion series.
+  "datafusion:vortex-compact": "#059669",
+  "datafusion:vortex-file-compressed": "#10b981",
+  "datafusion:parquet": "#8b5cf6",
+  "datafusion:lance": "#ef7f1d",
+};
+
+/**
+ * Generates an array of chart names following a pattern.
+ *
+ * @param {string} prefix - Prefix before the number (e.g., "q").
+ * @param {string} suffix - Suffix after the number (e.g., "-sf1-nvme").
+ * @param {number} start - Starting number (inclusive).
+ * @param {number} end - Ending number (inclusive).
+ * @param {number} [pad=2] - Number of digits to pad to.
+ * @returns {string[]} Array of chart names.
+ */
+function generateCharts(prefix, suffix, start, end, pad = 2) {
+  return Array.from(
+    { length: end - start + 1 },
+    (_, i) => `${prefix}${String(start + i).padStart(pad, "0")}${suffix}`,
+  );
+}
+
+// Common series name sets for reuse.
+const SERIES_DUCKDB_ONLY = [
+  "duckdb:parquet",
+  "duckdb:vortex-compact",
+  "duckdb:vortex-file-compressed",
+];
+
+const SERIES_DUCKDB_DATAFUSION = [
+  "duckdb:vortex-compact",
+  "duckdb:vortex-file-compressed",
+  "duckdb:parquet",
+  "duckdb:duckdb",
+  "datafusion:vortex-compact",
+  "datafusion:vortex-file-compressed",
+  "datafusion:parquet",
+];
+
+const SERIES_DUCKDB_DATAFUSION_LANCE = [
+  ...SERIES_DUCKDB_DATAFUSION,
+  "datafusion:lance",
+];
+
 /**
  * Benchmark group configurations. Each group contains multiple charts.
  */
@@ -21,227 +80,21 @@ const BENCHMARK_GROUPS = {
     title: "Random Access",
     charts: ["latency"],
     seriesNames: ["vortex", "parquet", "lance"],
-    seriesColors: {
-      vortex: "#101010",
-      parquet: "#5DADE2",
-      lance: "#ef7f1d",
-    },
   },
   clickbench: {
     title: "ClickBench",
-    charts: [
-      "q00-nvme",
-      "q01-nvme",
-      "q02-nvme",
-      "q03-nvme",
-      "q04-nvme",
-      "q05-nvme",
-      "q06-nvme",
-      "q07-nvme",
-      "q08-nvme",
-      "q09-nvme",
-      "q10-nvme",
-      "q11-nvme",
-      "q12-nvme",
-      "q13-nvme",
-      "q14-nvme",
-      "q15-nvme",
-      "q16-nvme",
-      "q17-nvme",
-      "q18-nvme",
-      "q19-nvme",
-      "q20-nvme",
-      "q21-nvme",
-      "q22-nvme",
-      "q23-nvme",
-      "q24-nvme",
-      "q25-nvme",
-      "q26-nvme",
-      "q27-nvme",
-      "q28-nvme",
-      "q29-nvme",
-      "q30-nvme",
-      "q31-nvme",
-      "q32-nvme",
-      "q33-nvme",
-      "q34-nvme",
-      "q35-nvme",
-      "q36-nvme",
-      "q37-nvme",
-      "q38-nvme",
-      "q39-nvme",
-      "q40-nvme",
-      "q41-nvme",
-      "q42-nvme",
-    ],
-    seriesNames: [
-      "duckdb:vortex-compact",
-      "duckdb:vortex-file-compressed",
-      "duckdb:parquet",
-      "duckdb:duckdb",
-      "datafusion:vortex-compact",
-      "datafusion:vortex-file-compressed",
-      "datafusion:parquet",
-      "datafusion:lance",
-    ],
-    seriesColors: {
-      "duckdb:vortex-compact": "#101010",
-      "duckdb:vortex-file-compressed": "#6b7280",
-      "duckdb:parquet": "#5DADE2",
-      "duckdb:duckdb": "#f59e0b",
-      "datafusion:vortex-compact": "#059669",
-      "datafusion:vortex-file-compressed": "#10b981",
-      "datafusion:parquet": "#8b5cf6",
-      "datafusion:lance": "#ef7f1d",
-    },
+    charts: generateCharts("q", "-nvme", 0, 42),
+    seriesNames: SERIES_DUCKDB_DATAFUSION_LANCE,
   },
   statpopgen: {
     title: "Statistical and Population Genetics",
-    charts: [
-      "q00-rows100000-nvme",
-      "q01-rows100000-nvme",
-      "q02-rows100000-nvme",
-      "q03-rows100000-nvme",
-      "q04-rows100000-nvme",
-      "q05-rows100000-nvme",
-      "q06-rows100000-nvme",
-      "q07-rows100000-nvme",
-      "q08-rows100000-nvme",
-      "q09-rows100000-nvme",
-      "q10-rows100000-nvme",
-    ],
-    seriesNames: [
-      "duckdb:parquet",
-      "duckdb:vortex-compact",
-      "duckdb:vortex-file-compressed",
-    ],
-    seriesColors: {
-      "duckdb:parquet": "#5DADE2",
-      "duckdb:vortex-compact": "#101010",
-      "duckdb:vortex-file-compressed": "#6b7280",
-    },
+    charts: generateCharts("q", "-rows100000-nvme", 0, 10),
+    seriesNames: SERIES_DUCKDB_ONLY,
   },
   tpcds: {
     title: "TPC-DS",
-    charts: [
-      "q01-sf1-nvme",
-      "q02-sf1-nvme",
-      "q03-sf1-nvme",
-      "q04-sf1-nvme",
-      "q05-sf1-nvme",
-      "q06-sf1-nvme",
-      "q07-sf1-nvme",
-      "q08-sf1-nvme",
-      "q09-sf1-nvme",
-      "q10-sf1-nvme",
-      "q11-sf1-nvme",
-      "q12-sf1-nvme",
-      "q13-sf1-nvme",
-      "q14-sf1-nvme",
-      "q15-sf1-nvme",
-      "q16-sf1-nvme",
-      "q17-sf1-nvme",
-      "q18-sf1-nvme",
-      "q19-sf1-nvme",
-      "q20-sf1-nvme",
-      "q21-sf1-nvme",
-      "q22-sf1-nvme",
-      "q23-sf1-nvme",
-      "q24-sf1-nvme",
-      "q25-sf1-nvme",
-      "q26-sf1-nvme",
-      "q27-sf1-nvme",
-      "q28-sf1-nvme",
-      "q29-sf1-nvme",
-      "q30-sf1-nvme",
-      "q31-sf1-nvme",
-      "q32-sf1-nvme",
-      "q33-sf1-nvme",
-      "q34-sf1-nvme",
-      "q35-sf1-nvme",
-      "q36-sf1-nvme",
-      "q37-sf1-nvme",
-      "q38-sf1-nvme",
-      "q39-sf1-nvme",
-      "q40-sf1-nvme",
-      "q41-sf1-nvme",
-      "q42-sf1-nvme",
-      "q43-sf1-nvme",
-      "q44-sf1-nvme",
-      "q45-sf1-nvme",
-      "q46-sf1-nvme",
-      "q47-sf1-nvme",
-      "q48-sf1-nvme",
-      "q49-sf1-nvme",
-      "q50-sf1-nvme",
-      "q51-sf1-nvme",
-      "q52-sf1-nvme",
-      "q53-sf1-nvme",
-      "q54-sf1-nvme",
-      "q55-sf1-nvme",
-      "q56-sf1-nvme",
-      "q57-sf1-nvme",
-      "q58-sf1-nvme",
-      "q59-sf1-nvme",
-      "q60-sf1-nvme",
-      "q61-sf1-nvme",
-      "q62-sf1-nvme",
-      "q63-sf1-nvme",
-      "q64-sf1-nvme",
-      "q65-sf1-nvme",
-      "q66-sf1-nvme",
-      "q67-sf1-nvme",
-      "q68-sf1-nvme",
-      "q69-sf1-nvme",
-      "q70-sf1-nvme",
-      "q71-sf1-nvme",
-      "q72-sf1-nvme",
-      "q73-sf1-nvme",
-      "q74-sf1-nvme",
-      "q75-sf1-nvme",
-      "q76-sf1-nvme",
-      "q77-sf1-nvme",
-      "q78-sf1-nvme",
-      "q79-sf1-nvme",
-      "q80-sf1-nvme",
-      "q81-sf1-nvme",
-      "q82-sf1-nvme",
-      "q83-sf1-nvme",
-      "q84-sf1-nvme",
-      "q85-sf1-nvme",
-      "q86-sf1-nvme",
-      "q87-sf1-nvme",
-      "q88-sf1-nvme",
-      "q89-sf1-nvme",
-      "q90-sf1-nvme",
-      "q91-sf1-nvme",
-      "q92-sf1-nvme",
-      "q93-sf1-nvme",
-      "q94-sf1-nvme",
-      "q95-sf1-nvme",
-      "q96-sf1-nvme",
-      "q97-sf1-nvme",
-      "q98-sf1-nvme",
-      "q99-sf1-nvme",
-    ],
-    seriesNames: [
-      "datafusion:parquet",
-      "datafusion:vortex-compact",
-      "datafusion:vortex-file-compressed",
-      "duckdb:duckdb",
-      "duckdb:parquet",
-      "duckdb:vortex-compact",
-      "duckdb:vortex-file-compressed",
-    ],
-    seriesColors: {
-      "datafusion:parquet": "#8b5cf6",
-      "datafusion:vortex-compact": "#059669",
-      "datafusion:vortex-file-compressed": "#10b981",
-      "duckdb:duckdb": "#f59e0b",
-      "duckdb:parquet": "#5DADE2",
-      "duckdb:vortex-compact": "#101010",
-      "duckdb:vortex-file-compressed": "#6b7280",
-    },
+    charts: generateCharts("q", "-sf1-nvme", 1, 99),
+    seriesNames: SERIES_DUCKDB_DATAFUSION,
   },
 };
 
@@ -634,7 +487,7 @@ function renderGroupSummary(groupId, groupConfig) {
       item.className = "score-item";
       item.innerHTML = `
                 <span class="score-rank">#${index + 1}</span>
-                <span class="score-series" style="color: ${groupConfig.seriesColors[result.name]}">${result.name}</span>
+                <span class="score-series" style="color: ${SERIES_COLORS[result.name]}">${result.name}</span>
                 <div class="score-metrics">
                     <span class="score-runtime">${result.score.toFixed(2)}x</span>
                     <span class="score-ratio">${formatTime(result.total)}</span>
@@ -654,7 +507,7 @@ function renderGroupSummary(groupId, groupConfig) {
       item.className = "score-item";
       item.innerHTML = `
                 <span class="score-rank">#${index + 1}</span>
-                <span class="score-series" style="color: ${groupConfig.seriesColors[result.name]}">${result.name}</span>
+                <span class="score-series" style="color: ${SERIES_COLORS[result.name]}">${result.name}</span>
                 <div class="score-metrics">
                     <span class="score-runtime">${formatTime(result.time)}</span>
                     <span class="score-ratio">${result.ratio.toFixed(2)}x</span>
@@ -705,15 +558,18 @@ function setupCollapsibleBenchmarks() {
 
 /**
  * Creates Chart.js datasets from series data.
+ *
+ * @param {Map<string, Array>|null} seriesData - Series data map, or null for empty datasets.
+ * @param {Object} groupConfig - Group configuration with seriesNames.
  */
 function createDatasets(seriesData, groupConfig) {
   return groupConfig.seriesNames.map((name) => {
-    const data = seriesData.get(name);
+    const rawData = seriesData?.get(name);
     return {
       label: name,
-      data: data ? data.map((d) => d?.value ?? null) : [],
-      borderColor: groupConfig.seriesColors[name],
-      backgroundColor: groupConfig.seriesColors[name],
+      data: rawData ? rawData.map((d) => d?.value ?? null) : [],
+      borderColor: SERIES_COLORS[name],
+      backgroundColor: SERIES_COLORS[name],
       borderWidth: 1.5,
       borderJoinStyle: "round",
       pointRadius: 2,
@@ -723,23 +579,6 @@ function createDatasets(seriesData, groupConfig) {
   });
 }
 
-/**
- * Creates empty Chart.js datasets (structure only, no data).
- */
-function createEmptyDatasets(groupConfig) {
-  return groupConfig.seriesNames.map((name) => ({
-    label: name,
-    data: [],
-    borderColor: groupConfig.seriesColors[name],
-    backgroundColor: groupConfig.seriesColors[name],
-    borderWidth: 1.5,
-    borderJoinStyle: "round",
-    pointRadius: 2,
-    tension: 0,
-    spanGaps: true,
-  }));
-}
-
 // ============================================================================
 // Chart Configuration Functions
 // ============================================================================
@@ -1214,7 +1053,7 @@ function createEmptyChart(groupId, chartName, groupConfig) {
   if (!canvas) return null;
 
   const ctx = canvas.getContext("2d");
-  const datasets = createEmptyDatasets(groupConfig);
+  const datasets = createDatasets(null, groupConfig);
 
   const chart = new Chart(ctx, {
     type: "line",
@@ -1342,55 +1181,102 @@ function waitForPaint() {
 // ============================================================================
 
 /**
- * Main function that orchestrates the entire benchmark page initialization.
+ * Initializes the UI with group containers and empty charts.
+ *
+ * This happens before loading any data so users see the UI instantly.
+ *
+ * @returns {Array<[string, Object]>} Array of [groupId, groupConfig] entries.
  */
-async function main() {
-  try {
-    // Register the vertical line plugin once.
-    Chart.register(createVerticalLinePlugin());
-
-    // Step 1: Create all group containers immediately from JS config.
-    // This happens BEFORE loading any data so users see the UI instantly.
-    const container = document.getElementById("benchmarks-container");
-    if (!container) {
-      throw new Error("Benchmarks container not found");
-    }
+function initializeUI() {
+  Chart.register(createVerticalLinePlugin());
 
-    let groupsHTML = "";
-    const allGroups = Object.entries(BENCHMARK_GROUPS);
-    for (const [groupId, groupConfig] of allGroups) {
-      groupsHTML += createGroupHTML(groupId, groupConfig);
-    }
-    container.innerHTML = groupsHTML;
+  const container = document.getElementById("benchmarks-container");
+  if (!container) {
+    throw new Error("Benchmarks container not found");
+  }
 
-    // Step 2: Create all chart placeholders (HTML structure).
-    for (const [groupId, groupConfig] of allGroups) {
-      createChartPlaceholders(groupId, groupConfig);
-    }
+  const allGroups = Object.entries(BENCHMARK_GROUPS);
+
+  // Create group containers.
+  container.innerHTML = allGroups
+    .map(([groupId, groupConfig]) => createGroupHTML(groupId, groupConfig))
+    .join("");
+
+  // Create chart placeholders and empty Chart.js instances.
+  for (const [groupId, groupConfig] of allGroups) {
+    createChartPlaceholders(groupId, groupConfig);
+    createEmptyCharts(groupId, groupConfig);
+  }
+
+  setupCollapsibleBenchmarks();
+
+  return allGroups;
+}
+
+/**
+ * Renders all charts with data from the server.
+ *
+ * @param {Object} wasm - WASM module.
+ * @param {Array<[string, Object]>} activeGroups - Groups to render.
+ * @param {Object} summary - Benchmark summary with commits.
+ * @returns {Promise<number>} Number of successfully loaded charts.
+ */
+async function renderAllCharts(wasm, activeGroups, summary) {
+  let loadedCharts = 0;
+
+  for (const [groupId, groupConfig] of activeGroups) {
+    const statusEl = document.getElementById(`${groupId}-status`);
+    const groupTotal = groupConfig.charts.length;
+    let groupLoaded = 0;
+
+    for (const chartName of groupConfig.charts) {
+      const success = await renderChart(
+        wasm,
+        groupId,
+        chartName,
+        groupConfig,
+        summary.commits,
+      );
+      if (success) {
+        groupLoaded++;
+        loadedCharts++;
+      }
+
+      if (statusEl) {
+        statusEl.textContent = `${groupLoaded}/${groupTotal} charts`;
+      }
 
-    // Step 3: Create empty Chart.js instances (visible charts with no data).
-    for (const [groupId, groupConfig] of allGroups) {
-      createEmptyCharts(groupId, groupConfig);
+      await waitForPaint();
     }
 
-    // Step 4: Set up collapsible behavior.
-    setupCollapsibleBenchmarks();
+    renderGroupSummary(groupId, groupConfig);
+    console.log(`Rendered ${groupLoaded}/${groupTotal} charts in ${groupId}`);
+  }
+
+  return loadedCharts;
+}
+
+/**
+ * Main function that orchestrates the benchmark page initialization.
+ */
+async function main() {
+  try {
+    // Initialize UI (instant, no data loading).
+    const allGroups = initializeUI();
 
-    // Step 5: Show status - UI is ready, data loading in background.
     const totalCharts = allGroups.reduce((n, [_, c]) => n + c.charts.length, 0);
     setStatus(`Loading ${totalCharts} charts...`, "loading");
 
-    // Step 6: Yield to browser to paint the UI before loading data.
     await waitForPaint();
 
-    // Step 7: NOW load WASM and data (charts already visible).
+    // Load data from server.
     const wasm = await loadWasmModule();
     const summary = await loadBenchmarkSummary(wasm);
 
     console.log("Available groups from server:", Object.keys(summary.groups));
     console.log("Configured groups:", Object.keys(BENCHMARK_GROUPS));
 
-    // Step 8: Filter to groups that exist on server.
+    // Filter to groups that exist on server.
     const activeGroups = allGroups.filter(([groupId]) => {
       const exists = !!summary.groups[groupId];
       if (!exists) {
@@ -1399,41 +1285,8 @@ async function main() {
       return exists;
     });
 
-    // Step 9: Update charts with data one by one (strictly sequential).
-    // Charts are already visible (empty), now we fill in the data.
-    let loadedCharts = 0;
-    for (const [groupId, groupConfig] of activeGroups) {
-      const statusEl = document.getElementById(`${groupId}-status`);
-      const groupTotal = groupConfig.charts.length;
-      let groupLoaded = 0;
-
-      for (const chartName of groupConfig.charts) {
-        const success = await renderChart(
-          wasm,
-          groupId,
-          chartName,
-          groupConfig,
-          summary.commits,
-        );
-        if (success) {
-          groupLoaded++;
-          loadedCharts++;
-        }
-
-        // Update group status.
-        if (statusEl) {
-          statusEl.textContent = `${groupLoaded}/${groupTotal} charts`;
-        }
-
-        // Wait for browser to paint before rendering next chart.
-        await waitForPaint();
-      }
-
-      // Render group summary after all charts are loaded.
-      renderGroupSummary(groupId, groupConfig);
-
-      console.log(`Rendered ${groupLoaded}/${groupTotal} charts in ${groupId}`);
-    }
+    // Render charts with data.
+    const loadedCharts = await renderAllCharts(wasm, activeGroups, summary);
 
     setStatus(
       `Loaded ${loadedCharts} charts across ${activeGroups.length} groups`,

From 6cf137697fd78f3f7f399f15cf2849c13c14c1d4 Mon Sep 17 00:00:00 2001
From: Connor Tsui <connor.tsui20@gmail.com>
Date: Thu, 4 Dec 2025 19:16:27 -0500
Subject: [PATCH 25/30] even faster

Signed-off-by: Connor Tsui <connor.tsui20@gmail.com>
---
 vortex-wasm/wasm-test.css |  5 +++++
 vortex-wasm/wasm-test.js  | 43 +++++++++++++++++++++++++++++----------
 2 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/vortex-wasm/wasm-test.css b/vortex-wasm/wasm-test.css
index e3405db6760..8cf60e80c4f 100644
--- a/vortex-wasm/wasm-test.css
+++ b/vortex-wasm/wasm-test.css
@@ -319,6 +319,11 @@ body {
     border-color: var(--primary-color);
 }
 
+/* Disable transitions during group expand to avoid jank with many charts. */
+.benchmark-set.expanding .chart-container {
+    transition: none !important;
+}
+
 .chart-header {
     display: flex;
     justify-content: space-between;
diff --git a/vortex-wasm/wasm-test.js b/vortex-wasm/wasm-test.js
index a6e91eedf97..a5362abadc6 100644
--- a/vortex-wasm/wasm-test.js
+++ b/vortex-wasm/wasm-test.js
@@ -524,16 +524,30 @@ function renderGroupSummary(groupId, groupConfig) {
 }
 
 /**
- * Resizes all charts in a group sequentially, yielding to the browser between each.
- * This ensures the first chart appears immediately rather than waiting for all 43.
+ * Number of charts to resize per animation frame when expanding a group.
  */
-async function resizeGroupChartsSequentially(groupId) {
+const CHARTS_PER_BATCH = 4;
+
+/**
+ * Resizes all charts in a group in batches, yielding to the browser between batches.
+ * This processes multiple charts per frame for faster expansion of large groups.
+ * Uses setTimeout instead of requestAnimationFrame so it continues when tab is hidden.
+ */
+async function resizeGroupChartsBatched(groupId) {
+  const groupCharts = [];
   for (const [prefix, chart] of chartInstances.entries()) {
     if (prefix.startsWith(groupId + "-")) {
+      groupCharts.push(chart);
+    }
+  }
+
+  for (let i = 0; i < groupCharts.length; i += CHARTS_PER_BATCH) {
+    const batch = groupCharts.slice(i, i + CHARTS_PER_BATCH);
+    for (const chart of batch) {
       chart.resize();
-      // Yield to browser to paint before next resize.
-      await new Promise((r) => requestAnimationFrame(r));
     }
+    // Use setTimeout(0) to yield without pausing when tab is hidden.
+    await new Promise((r) => setTimeout(r, 0));
   }
 }
 
@@ -545,12 +559,19 @@ function setupCollapsibleBenchmarks() {
     header.addEventListener("click", async () => {
       const benchmarkSet = header.closest(".benchmark-set");
       const wasCollapsed = benchmarkSet.classList.contains("collapsed");
+
+      // Disable transitions during expand to avoid jank with many charts.
+      if (wasCollapsed) {
+        benchmarkSet.classList.add("expanding");
+      }
+
       benchmarkSet.classList.toggle("collapsed");
 
-      // If we just expanded, resize charts sequentially so first appears immediately.
+      // If we just expanded, resize charts in batches.
       if (wasCollapsed) {
         const groupId = benchmarkSet.id.replace("-group", "");
-        await resizeGroupChartsSequentially(groupId);
+        await resizeGroupChartsBatched(groupId);
+        benchmarkSet.classList.remove("expanding");
       }
     });
   });
@@ -926,10 +947,10 @@ function setupZoomButtons(elements, chartContext, chartInstance) {
     updateChartView(elements, chartContext, chartInstance, true);
   };
 
-  elements.zoomInSmallBtn?.addEventListener("click", () => zoom(25, -1));
-  elements.zoomInLargeBtn?.addEventListener("click", () => zoom(250, -1));
-  elements.zoomOutSmallBtn?.addEventListener("click", () => zoom(25, 1));
-  elements.zoomOutLargeBtn?.addEventListener("click", () => zoom(250, 1));
+  elements.zoomInSmallBtn?.addEventListener("click", () => zoom(50, -1));
+  elements.zoomInLargeBtn?.addEventListener("click", () => zoom(500, -1));
+  elements.zoomOutSmallBtn?.addEventListener("click", () => zoom(50, 1));
+  elements.zoomOutLargeBtn?.addEventListener("click", () => zoom(500, 1));
 }
 
 /**

From 371acff96d348a70df33272aea79028dc8f1f5fa Mon Sep 17 00:00:00 2001
From: Connor Tsui <connor.tsui20@gmail.com>
Date: Thu, 4 Dec 2025 19:25:21 -0500
Subject: [PATCH 26/30] load in background

Signed-off-by: Connor Tsui <connor.tsui20@gmail.com>
---
 vortex-wasm/wasm-test.js | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/vortex-wasm/wasm-test.js b/vortex-wasm/wasm-test.js
index a5362abadc6..810832fed38 100644
--- a/vortex-wasm/wasm-test.js
+++ b/vortex-wasm/wasm-test.js
@@ -531,7 +531,7 @@ const CHARTS_PER_BATCH = 4;
 /**
  * Resizes all charts in a group in batches, yielding to the browser between batches.
  * This processes multiple charts per frame for faster expansion of large groups.
- * Uses setTimeout instead of requestAnimationFrame so it continues when tab is hidden.
+ * Skips yields when tab is hidden to avoid browser throttling.
  */
 async function resizeGroupChartsBatched(groupId) {
   const groupCharts = [];
@@ -546,8 +546,10 @@ async function resizeGroupChartsBatched(groupId) {
     for (const chart of batch) {
       chart.resize();
     }
-    // Use setTimeout(0) to yield without pausing when tab is hidden.
-    await new Promise((r) => setTimeout(r, 0));
+    // Skip delay if page is hidden to avoid browser throttling.
+    if (!document.hidden) {
+      await new Promise((r) => setTimeout(r, 0));
+    }
   }
 }
 
@@ -1191,9 +1193,13 @@ function createEmptyCharts(groupId, groupConfig) {
  * Waits one frame (16ms) for the browser to paint.
  *
  * This is used to yield control back to the browser between chart renders, so each chart appears
- * progressively rather than all at once.
+ * progressively rather than all at once. Skips the delay when the tab is hidden to avoid browser
+ * throttling (browsers throttle setTimeout to 1s minimum in background tabs).
  */
 function waitForPaint() {
+  if (document.hidden) {
+    return Promise.resolve();
+  }
   return new Promise((resolve) => setTimeout(resolve, 16));
 }
 

From 8ff25055b0f9cb6eb3033ee7f1ba0b811a8e2b12 Mon Sep 17 00:00:00 2001
From: Connor Tsui <connor.tsui20@gmail.com>
Date: Fri, 5 Dec 2025 10:48:37 -0500
Subject: [PATCH 27/30] add remaining groups

Signed-off-by: Connor Tsui <connor.tsui20@gmail.com>
---
 plan.md                           |  17 +++-
 vortex-wasm/src/website/charts.rs |  12 ++-
 vortex-wasm/wasm-test.js          | 134 +++++++++++++++++++++++-------
 3 files changed, 125 insertions(+), 38 deletions(-)

diff --git a/plan.md b/plan.md
index 9bd48142b5a..0d9f2784673 100644
--- a/plan.md
+++ b/plan.md
@@ -56,11 +56,26 @@ fn main() {
     println!("{}", size_of::<BenchmarkEntry>()); // 64
     println!("{}", align_of::<BenchmarkEntry>()); // 8
 }
+
+/// Maps [`CommitId`] to benchmark value.
+pub type CommitValueMap<'a> = HashMap<&'a CommitId, u64, PassthroughBuildHasher>;
+
+/// Maps series name to commit values.
+pub type SeriesMap<'a> = HashMap<&'a str, CommitValueMap<'a>>;
+
+/// Series in a chart mapped to their data.
+pub type ChartMap<'a> = HashMap<&'a str, SeriesMap<'a>>;
+
+/// Chart names in a group mapped to their data.
+pub type GroupedEntries<'a> = HashMap<&'a str, ChartMap<'a>>;
 ```
 
+A benchmark group should be defined by 1 or more charts and 1 or more series (that always appear on
+every chart in the group).
+
 ### Findings
 
-- There is an insane amount of wasted space in `data.json`
+- There is an insane amount of wasted space in `data.json`&
 - The amount of actual benchmarking data is actually very small, and it can easily fit in memory of
   the CI runners
 - We can simply read the entire file of all benchmarking data into memory, decompress in memory, add
diff --git a/vortex-wasm/src/website/charts.rs b/vortex-wasm/src/website/charts.rs
index 09242f9bd48..395140ef3d4 100644
--- a/vortex-wasm/src/website/charts.rs
+++ b/vortex-wasm/src/website/charts.rs
@@ -26,9 +26,6 @@ macro_rules! log {
     }
 }
 
-/// A map of group names to their benchmark data.
-pub type Benchmarks<'a> = HashMap<&'a str, BenchmarkGroupData<'a>>;
-
 /// The complete response containing benchmarks and commit metadata.
 #[derive(Debug, Clone, Serialize)]
 pub struct BenchmarkResponse<'a> {
@@ -38,9 +35,8 @@ pub struct BenchmarkResponse<'a> {
     pub commits: Vec<CommitInfo>,
 }
 
-// TODO(connor): We should be able to use an `Option<NonZeroU64>` since our benchmarks should
-// basically never hit 0, but that is an optimization for another day.
-type AlignedSeries<'a> = HashMap<&'a str, Vec<Option<u64>>>;
+/// A map of group names to their benchmark data.
+pub type Benchmarks<'a> = HashMap<&'a str, BenchmarkGroupData<'a>>;
 
 #[derive(Debug, Clone, Serialize, Deserialize)]
 pub struct BenchmarkGroupData<'a> {
@@ -49,11 +45,13 @@ pub struct BenchmarkGroupData<'a> {
     charts: HashMap<&'a str, ChartData<'a>>,
 }
 
+// TODO(connor): We should be able to use an `Option<NonZeroU64>` since our benchmarks should
+// basically never hit 0, but that is an optimization for another day.
 #[derive(Debug, Clone, Serialize, Deserialize)]
 pub struct ChartData<'a> {
     /// The name of a series and its associated data.
     #[serde(borrow)]
-    aligned_series: AlignedSeries<'a>,
+    aligned_series: HashMap<&'a str, Vec<Option<u64>>>,
 }
 
 // ============================================================================
diff --git a/vortex-wasm/wasm-test.js b/vortex-wasm/wasm-test.js
index 810832fed38..fbb4e469159 100644
--- a/vortex-wasm/wasm-test.js
+++ b/vortex-wasm/wasm-test.js
@@ -31,6 +31,7 @@ const SERIES_COLORS = {
   "datafusion:vortex-file-compressed": "#10b981",
   "datafusion:parquet": "#8b5cf6",
   "datafusion:lance": "#ef7f1d",
+  "datafusion:arrow": "#dc2626",
 };
 
 /**
@@ -50,28 +51,6 @@ function generateCharts(prefix, suffix, start, end, pad = 2) {
   );
 }
 
-// Common series name sets for reuse.
-const SERIES_DUCKDB_ONLY = [
-  "duckdb:parquet",
-  "duckdb:vortex-compact",
-  "duckdb:vortex-file-compressed",
-];
-
-const SERIES_DUCKDB_DATAFUSION = [
-  "duckdb:vortex-compact",
-  "duckdb:vortex-file-compressed",
-  "duckdb:parquet",
-  "duckdb:duckdb",
-  "datafusion:vortex-compact",
-  "datafusion:vortex-file-compressed",
-  "datafusion:parquet",
-];
-
-const SERIES_DUCKDB_DATAFUSION_LANCE = [
-  ...SERIES_DUCKDB_DATAFUSION,
-  "datafusion:lance",
-];
-
 /**
  * Benchmark group configurations. Each group contains multiple charts.
  */
@@ -83,18 +62,113 @@ const BENCHMARK_GROUPS = {
   },
   clickbench: {
     title: "ClickBench",
-    charts: generateCharts("q", "-nvme", 0, 42),
-    seriesNames: SERIES_DUCKDB_DATAFUSION_LANCE,
+    charts: generateCharts("q", "", 0, 42),
+    seriesNames: [
+      "datafusion:lance",
+      "datafusion:parquet",
+      "datafusion:vortex-compact",
+      "datafusion:vortex-file-compressed",
+      "duckdb:duckdb",
+      "duckdb:parquet",
+      "duckdb:vortex-compact",
+      "duckdb:vortex-file-compressed",
+    ],
   },
-  statpopgen: {
-    title: "Statistical and Population Genetics",
-    charts: generateCharts("q", "-rows100000-nvme", 0, 10),
-    seriesNames: SERIES_DUCKDB_ONLY,
+  "tpch-sf1-nvme": {
+    title: "TPC-H NVMe (Scale Factor 1)",
+    charts: generateCharts("q", "", 1, 22),
+    seriesNames: [
+      "datafusion:arrow",
+      "datafusion:lance",
+      "datafusion:parquet",
+      "datafusion:vortex-compact",
+      "datafusion:vortex-file-compressed",
+      "duckdb:duckdb",
+      "duckdb:parquet",
+      "duckdb:vortex-compact",
+      "duckdb:vortex-file-compressed",
+    ],
+  },
+  "tpch-sf1-s3": {
+    title: "TPC-H S3 (Scale Factor 1)",
+    charts: generateCharts("q", "", 1, 22),
+    seriesNames: [
+      "datafusion:lance",
+      "datafusion:parquet",
+      "datafusion:vortex-compact",
+      "datafusion:vortex-file-compressed",
+      "duckdb:parquet",
+      "duckdb:vortex-compact",
+      "duckdb:vortex-file-compressed",
+    ],
+  },
+  "tpch-sf10-nvme": {
+    title: "TPC-H NVMe (Scale Factor 10)",
+    charts: generateCharts("q", "", 1, 22),
+    seriesNames: [
+      "datafusion:arrow",
+      "datafusion:lance",
+      "datafusion:parquet",
+      "datafusion:vortex-compact",
+      "datafusion:vortex-file-compressed",
+      "duckdb:duckdb",
+      "duckdb:parquet",
+      "duckdb:vortex-compact",
+      "duckdb:vortex-file-compressed",
+    ],
+  },
+  "tpch-sf10-s3": {
+    title: "TPC-H S3 (Scale Factor 10)",
+    charts: generateCharts("q", "", 1, 22),
+    seriesNames: [
+      "datafusion:lance",
+      "datafusion:parquet",
+      "datafusion:vortex-compact",
+      "datafusion:vortex-file-compressed",
+      "duckdb:parquet",
+      "duckdb:vortex-compact",
+      "duckdb:vortex-file-compressed",
+    ],
+  },
+  "tpch-sf100-nvme": {
+    title: "TPC-H NVMe (Scale Factor 100)",
+    charts: generateCharts("q", "", 1, 22),
+    seriesNames: [
+      "datafusion:parquet",
+      "duckdb:parquet",
+      "duckdb:vortex-file-compressed",
+    ],
+  },
+  "tpch-sf100-s3": {
+    title: "TPC-H S3 (Scale Factor 100)",
+    charts: generateCharts("q", "", 1, 22),
+    seriesNames: [
+      "datafusion:parquet",
+      "duckdb:parquet",
+      "duckdb:vortex-file-compressed",
+    ],
   },
   tpcds: {
     title: "TPC-DS",
-    charts: generateCharts("q", "-sf1-nvme", 1, 99),
-    seriesNames: SERIES_DUCKDB_DATAFUSION,
+    charts: generateCharts("q", "-sf1", 1, 99),
+    seriesNames: [
+      "datafusion:parquet",
+      "datafusion:vortex-compact",
+      "datafusion:vortex-file-compressed",
+      "duckdb:duckdb",
+      "duckdb:parquet",
+      "duckdb:vortex-compact",
+      "duckdb:vortex-file-compressed",
+    ],
+  },
+  statpopgen: {
+    title: "Statistical and Population Genetics",
+    charts: generateCharts("q", "", 0, 10),
+    seriesNames: [
+      "duckdb:parquet",
+      "duckdb:vortex-compact",
+      "duckdb:vortex-file-compressed",
+    ],
   },
 };
 

From f5027cd22be7250b7dd07be56b1e3c91a7a02e4c Mon Sep 17 00:00:00 2001
From: Connor Tsui <connor.tsui20@gmail.com>
Date: Fri, 5 Dec 2025 11:26:41 -0500
Subject: [PATCH 28/30] clean up

Signed-off-by: Connor Tsui <connor.tsui20@gmail.com>
---
 vortex-wasm/src/bin/migrate_commits.rs        |   2 +-
 vortex-wasm/src/lib.rs                        | 166 +-----------
 vortex-wasm/src/website/charts.rs             | 242 ++----------------
 vortex-wasm/src/website/commit_id.rs          |  24 +-
 .../src/website/{commit.rs => commit_info.rs} |  98 +++----
 vortex-wasm/src/website/mod.rs                |  68 ++++-
 vortex-wasm/src/website/read_s3.rs            | 110 ++------
 7 files changed, 178 insertions(+), 532 deletions(-)
 rename vortex-wasm/src/website/{commit.rs => commit_info.rs} (100%)

diff --git a/vortex-wasm/src/bin/migrate_commits.rs b/vortex-wasm/src/bin/migrate_commits.rs
index 9af43f24d50..b6c4919e738 100644
--- a/vortex-wasm/src/bin/migrate_commits.rs
+++ b/vortex-wasm/src/bin/migrate_commits.rs
@@ -32,7 +32,7 @@ use vortex::dtype::Nullability;
 use vortex::file::WriteOptionsSessionExt;
 use vortex::file::WriteStrategyBuilder;
 use vortex::session::VortexSession;
-use vortex_wasm::website::commit::CommitInfo;
+use vortex_wasm::website::commit_info::CommitInfo;
 
 #[tokio::main]
 async fn main() {
diff --git a/vortex-wasm/src/lib.rs b/vortex-wasm/src/lib.rs
index 92766610cdb..29fb32b7bc2 100644
--- a/vortex-wasm/src/lib.rs
+++ b/vortex-wasm/src/lib.rs
@@ -3,179 +3,19 @@
 
 //! WASM bindings for the Vortex benchmark website.
 //!
-//! This module provides a `load_random_access_data()` function that fetches benchmark data from S3,
-//! parses it, and returns it in a format ready for JavaScript to render.
+//! This crate provides functions for fetching and processing benchmark data from S3, returning it
+//! in a format ready for JavaScript to render.
 
 pub mod website;
 
 #[cfg(target_arch = "wasm32")]
-mod wasm_bindings {
-    use serde::Serialize;
-    use vortex::VortexSessionDefault;
-    use vortex::io::runtime::wasm::WasmRuntime;
-    use vortex::io::session::RuntimeSessionExt;
-    use vortex::session::VortexSession;
+mod wasm_init {
     use wasm_bindgen::prelude::*;
 
-    use crate::website::read_s3::get_benchmark_data;
-    use crate::website::read_s3::get_benchmark_summary;
-    use crate::website::read_s3::get_chart_data;
-    use crate::website::read_s3::read_benchmark_entries;
-
-    const DATA_KEY: &str = "data.vortex";
-    const COMMITS_KEY: &str = "commits.vortex";
-
-    // Legacy key for old random_access data format.
-    const LEGACY_KEY: &str = "random_access.vortex";
-
-    /// Helper macro for logging to browser console.
-    macro_rules! log {
-        ($($t:tt)*) => {
-            web_sys::console::log_1(&format!($($t)*).into());
-        }
-    }
-
-    /// A single random-access benchmark entry for JavaScript.
-    #[derive(Serialize)]
-    pub struct JsEntry {
-        pub commit_id: String,
-        pub series_name: String,
-        pub value_ms: f64,
-    }
-
-    /// Load random-access benchmark data from S3.
-    ///
-    /// This function fetches the Vortex file from S3, parses it, and returns an array of benchmark
-    /// entries ready for rendering.
-    ///
-    /// # Returns
-    ///
-    /// A JavaScript array of objects with:
-    /// - `commit_id`: 40-character hex string (SHA-1 hash)
-    /// - `series_name`: One of "vortex-nvme", "parquet-nvme", "lance-nvme"
-    /// - `value_ms`: Value in milliseconds
-    #[wasm_bindgen]
-    pub async fn load_random_access_data() -> Result<JsValue, JsValue> {
-        log!("Loading random-access benchmark data...");
-
-        // Create a session configured with the WASM runtime.
-        let session = VortexSession::default().with_handle(WasmRuntime::handle());
-
-        let entries = read_benchmark_entries(&session, LEGACY_KEY)
-            .await
-            .map_err(|e| JsValue::from_str(&format!("Failed to read benchmark entries: {}", e)))?;
-
-        log!("Loaded {} entries", entries.len());
-
-        // Convert to JS-friendly format.
-        let js_entries: Vec<JsEntry> = entries
-            .iter()
-            .map(|e| JsEntry {
-                commit_id: e.commit_id.to_string(),
-                series_name: e.series_name.clone(),
-                value_ms: e.value as f64 / 1_000_000.0,
-            })
-            .collect();
-
-        log!("Returning {} JS entries", js_entries.len());
-
-        serde_wasm_bindgen::to_value(&js_entries)
-            .map_err(|e| JsValue::from_str(&format!("Failed to serialize: {}", e)))
-    }
-
-    /// Load all benchmark data from S3 (legacy, slow - use load_benchmark_summary instead).
-    ///
-    /// This function fetches the commits and benchmark data Vortex files from S3, parses them,
-    /// aligns the data to commits, and returns a structured response.
-    ///
-    /// # Returns
-    ///
-    /// A JavaScript object with:
-    /// - `benchmarks`: Nested object with group_name → charts → chart_name → aligned_series → series_name → values
-    /// - `commits`: Array of commit objects with timestamp, author, message, and commit_id
-    ///
-    /// Values are in nanoseconds (u64). Convert to milliseconds in JavaScript by dividing by
-    /// 1_000_000.
-    #[wasm_bindgen]
-    pub async fn load_benchmark_data() -> Result<JsValue, JsValue> {
-        log!("Loading benchmark data...");
-
-        let session = VortexSession::default().with_handle(WasmRuntime::handle());
-
-        let result = get_benchmark_data(&session, COMMITS_KEY, DATA_KEY)
-            .await
-            .map_err(|e| JsValue::from_str(&format!("Failed to load benchmark data: {}", e)))?;
-
-        log!("Benchmark data loaded successfully");
-
-        Ok(result)
-    }
-
-    /// Load benchmark summary (metadata only, fast).
-    ///
-    /// This function fetches data from S3 (cached after first call), processes it, and returns
-    /// a summary containing:
-    /// - `commits`: Array of commit objects
-    /// - `groups`: Object mapping group names to chart metadata (no values)
-    ///
-    /// Use this for fast initial load, then call `load_chart_data` for specific charts.
-    ///
-    /// # Returns
-    ///
-    /// A JSON string that must be parsed with `JSON.parse()` in JavaScript.
-    #[wasm_bindgen]
-    pub async fn load_benchmark_summary() -> Result<String, JsValue> {
-        log!("Loading benchmark summary...");
-
-        let session = VortexSession::default().with_handle(WasmRuntime::handle());
-
-        let json = get_benchmark_summary(&session, COMMITS_KEY, DATA_KEY)
-            .await
-            .map_err(|e| JsValue::from_str(&format!("Failed to load benchmark summary: {}", e)))?;
-
-        log!("Benchmark summary loaded successfully");
-
-        Ok(json)
-    }
-
-    /// Load chart data for a specific group and chart.
-    ///
-    /// This function returns the aligned series data for a single chart. Data is cached after
-    /// the first call to any load function, so subsequent calls are fast.
-    ///
-    /// # Arguments
-    ///
-    /// * `group` - The group name (e.g., "random-access", "tpch")
-    /// * `chart` - The chart name within the group (e.g., "latency", "q1-sf1000-nvme")
-    ///
-    /// # Returns
-    ///
-    /// A JSON string containing `{ aligned_series: { series_name: [values...] } }`.
-    /// Values are in nanoseconds (u64). Parse with `JSON.parse()` in JavaScript.
-    #[wasm_bindgen]
-    pub async fn load_chart_data(group: &str, chart: &str) -> Result<String, JsValue> {
-        log!(
-            "Loading chart data for group='{}', chart='{}'...",
-            group,
-            chart
-        );
-
-        let session = VortexSession::default().with_handle(WasmRuntime::handle());
-
-        let json = get_chart_data(&session, COMMITS_KEY, DATA_KEY, group, chart)
-            .await
-            .map_err(|e| JsValue::from_str(&format!("Failed to load chart data: {}", e)))?;
-
-        log!("Chart data loaded successfully");
-
-        Ok(json)
-    }
-
     /// Initialize the WASM module.
     #[wasm_bindgen(start)]
     pub fn init() {
         console_error_panic_hook::set_once();
-        log!("vortex-wasm initialized");
     }
 
     /// Get version information.
diff --git a/vortex-wasm/src/website/charts.rs b/vortex-wasm/src/website/charts.rs
index 395140ef3d4..ce32c14b4e8 100644
--- a/vortex-wasm/src/website/charts.rs
+++ b/vortex-wasm/src/website/charts.rs
@@ -1,76 +1,39 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: Copyright the Vortex contributors
 
-use serde::Deserialize;
 use serde::Serialize;
 use vortex::utils::aliases::hash_map::HashMap;
 use vortex_error::VortexResult;
 use vortex_error::vortex_bail;
 
-use crate::website::commit::CommitInfo;
+use crate::website::commit_info::CommitInfo;
 use crate::website::entry::BenchmarkEntry;
 use crate::website::entry::CommitValueMap;
 
-/// Log to the browser console (WASM) or stderr (native).
-#[cfg(target_arch = "wasm32")]
-macro_rules! log {
-    ($($t:tt)*) => {
-        web_sys::console::log_1(&format!($($t)*).into());
-    }
-}
-
-#[cfg(not(target_arch = "wasm32"))]
-macro_rules! log {
-    ($($t:tt)*) => {
-        eprintln!($($t)*);
-    }
-}
-
 /// The complete response containing benchmarks and commit metadata.
 #[derive(Debug, Clone, Serialize)]
-pub struct BenchmarkResponse<'a> {
+pub struct BenchmarkResponse {
     /// Benchmarks grouped by group name, chart name, and series name.
-    pub benchmarks: Benchmarks<'a>,
-    /// Sorted list of commits (by timestamp). Owned to allow serialization.
+    pub benchmarks: Benchmarks,
+    /// Sorted list of commits (by timestamp).
     pub commits: Vec<CommitInfo>,
 }
 
 /// A map of group names to their benchmark data.
-pub type Benchmarks<'a> = HashMap<&'a str, BenchmarkGroupData<'a>>;
+pub type Benchmarks = HashMap<String, BenchmarkGroupData>;
 
-#[derive(Debug, Clone, Serialize, Deserialize)]
-pub struct BenchmarkGroupData<'a> {
+/// Benchmark group data.
+#[derive(Debug, Clone, Serialize)]
+pub struct BenchmarkGroupData {
     /// The name of a chart and its associated data.
-    #[serde(borrow)]
-    charts: HashMap<&'a str, ChartData<'a>>,
+    pub charts: HashMap<String, ChartData>,
 }
 
 // TODO(connor): We should be able to use an `Option<NonZeroU64>` since our benchmarks should
 // basically never hit 0, but that is an optimization for another day.
-#[derive(Debug, Clone, Serialize, Deserialize)]
-pub struct ChartData<'a> {
-    /// The name of a series and its associated data.
-    #[serde(borrow)]
-    aligned_series: HashMap<&'a str, Vec<Option<u64>>>,
-}
-
-// ============================================================================
-// Owned data structures (for static caching)
-// ============================================================================
-
-/// A map of group names to their benchmark data (owned version for static storage).
-pub type OwnedBenchmarks = HashMap<String, OwnedBenchmarkGroupData>;
-
-/// Benchmark group data with owned strings.
-#[derive(Debug, Clone, Serialize)]
-pub struct OwnedBenchmarkGroupData {
-    /// The name of a chart and its associated data.
-    pub charts: HashMap<String, OwnedChartData>,
-}
-
-/// Chart data with owned strings.
+/// Chart data.
 #[derive(Debug, Clone, Serialize)]
-pub struct OwnedChartData {
+pub struct ChartData {
     /// The name of a series and its associated data.
     pub aligned_series: HashMap<String, Vec<Option<u64>>>,
 }
@@ -112,16 +75,10 @@ pub struct ChartSummary {
 /// - Commits are not sorted by timestamp.
 /// - Any group, chart, or series name is empty.
 /// - Series lengths don't match the number of commits (internal error).
-pub fn process_benchmarks<'a>(
-    entries: &'a [BenchmarkEntry],
+pub fn process_benchmarks(
+    entries: &[BenchmarkEntry],
     sorted_commits: &[CommitInfo],
-) -> VortexResult<Benchmarks<'a>> {
-    log!(
-        "[process_benchmarks] Starting with {} entries, {} commits",
-        entries.len(),
-        sorted_commits.len()
-    );
-
+) -> VortexResult<Benchmarks> {
     if !sorted_commits.is_sorted() {
         vortex_bail!("Commits must be sorted by timestamp");
     }
@@ -129,110 +86,59 @@ pub fn process_benchmarks<'a>(
     let num_commits = sorted_commits.len();
     let grouped_entries = BenchmarkEntry::group(entries);
 
-    log!(
-        "[process_benchmarks] Grouped into {} groups: {:?}",
-        grouped_entries.len(),
-        grouped_entries.keys().collect::<Vec<_>>()
-    );
-
     let mut benchmarks = HashMap::with_capacity(grouped_entries.keys().len());
     for (group_name, group_data) in grouped_entries {
         if group_name.is_empty() {
             vortex_bail!("Group name cannot be empty");
         }
 
-        log!(
-            "[process_benchmarks] Group '{}' has {} charts",
-            group_name,
-            group_data.len()
-        );
-
         let mut charts = HashMap::with_capacity(group_data.keys().len());
         for (chart_name, chart_data) in group_data {
             if chart_name.is_empty() {
-                vortex_bail!("Chart name cannot be empty in group '{}'", group_name);
+                vortex_bail!("Chart name cannot be empty in group '{group_name}'");
             }
 
             let mut aligned_series = HashMap::with_capacity(chart_data.keys().len());
             for (series_name, series_data) in chart_data {
                 if series_name.is_empty() {
                     vortex_bail!(
-                        "Series name cannot be empty in group '{}', chart '{}'",
-                        group_name,
-                        chart_name
+                        "Series name cannot be empty in group '{group_name}', chart '{chart_name}'",
                     );
                 }
 
                 let aligned_series_data = create_aligned_series_data(series_data, sorted_commits);
 
-                // Validate series length matches commits.
                 if aligned_series_data.len() != num_commits {
                     vortex_bail!(
-                        "Series '{}' in group '{}', chart '{}' has {} elements, expected {} (number of commits)",
-                        series_name,
-                        group_name,
-                        chart_name,
+                        "Series '{series_name}' in group '{group_name}', chart '{chart_name}' has \
+                            {} elements, expected {num_commits}",
                         aligned_series_data.len(),
-                        num_commits
                     );
                 }
 
-                // Skip series with no data points (all nulls).
-                let data_points = aligned_series_data.iter().filter(|v| v.is_some()).count();
-                if data_points == 0 {
-                    log!(
-                        "[process_benchmarks]   Pruning series '{}' (no data points)",
-                        series_name
-                    );
+                // Skip series with no data points.
+                if !aligned_series_data.iter().any(|v| v.is_some()) {
                     continue;
                 }
 
-                aligned_series.insert(series_name, aligned_series_data);
+                // Convert to owned String key.
+                aligned_series.insert(series_name.to_string(), aligned_series_data);
             }
 
-            // Skip charts with no series.
             if aligned_series.is_empty() {
-                log!(
-                    "[process_benchmarks]   Pruning chart '{}' (no series with data)",
-                    chart_name
-                );
                 continue;
             }
 
-            log!(
-                "[process_benchmarks]   Chart '{}' has {} series with data",
-                chart_name,
-                aligned_series.len()
-            );
-
-            let chart_data = ChartData { aligned_series };
-            charts.insert(chart_name, chart_data);
+            charts.insert(chart_name.to_string(), ChartData { aligned_series });
         }
 
-        // Skip groups with no charts.
         if charts.is_empty() {
-            log!(
-                "[process_benchmarks] Pruning group '{}' (no charts with data)",
-                group_name
-            );
             continue;
         }
 
-        log!(
-            "[process_benchmarks] Group '{}' retained {} charts",
-            group_name,
-            charts.len()
-        );
-
-        let benchmark_group_data = BenchmarkGroupData { charts };
-        benchmarks.insert(group_name, benchmark_group_data);
+        benchmarks.insert(group_name.to_string(), BenchmarkGroupData { charts });
     }
 
-    log!(
-        "[process_benchmarks] Done. Final groups: {:?}",
-        benchmarks.keys().collect::<Vec<_>>()
-    );
-
     Ok(benchmarks)
 }
 
@@ -246,104 +152,8 @@ fn create_aligned_series_data(
         .collect()
 }
 
-// ============================================================================
-// Owned processing functions
-// ============================================================================
-
-/// Processes benchmark entries into owned structures suitable for static caching.
-///
-/// This is similar to [`process_benchmarks`] but returns owned data that can be stored
-/// in a `OnceLock` for caching.
-pub fn process_benchmarks_owned(
-    entries: &[BenchmarkEntry],
-    sorted_commits: &[CommitInfo],
-) -> VortexResult<OwnedBenchmarks> {
-    log!(
-        "[process_benchmarks_owned] Starting with {} entries, {} commits",
-        entries.len(),
-        sorted_commits.len()
-    );
-
-    if !sorted_commits.is_sorted() {
-        vortex_bail!("Commits must be sorted by timestamp");
-    }
-
-    let num_commits = sorted_commits.len();
-    let grouped_entries = BenchmarkEntry::group(entries);
-
-    log!(
-        "[process_benchmarks_owned] Grouped into {} groups",
-        grouped_entries.len()
-    );
-
-    let mut benchmarks = HashMap::with_capacity(grouped_entries.keys().len());
-    for (group_name, group_data) in grouped_entries {
-        if group_name.is_empty() {
-            vortex_bail!("Group name cannot be empty");
-        }
-
-        let mut charts = HashMap::with_capacity(group_data.keys().len());
-        for (chart_name, chart_data) in group_data {
-            if chart_name.is_empty() {
-                vortex_bail!("Chart name cannot be empty in group '{}'", group_name);
-            }
-
-            let mut aligned_series = HashMap::with_capacity(chart_data.keys().len());
-            for (series_name, series_data) in chart_data {
-                if series_name.is_empty() {
-                    vortex_bail!(
-                        "Series name cannot be empty in group '{}', chart '{}'",
-                        group_name,
-                        chart_name
-                    );
-                }
-
-                let aligned_series_data = create_aligned_series_data(series_data, sorted_commits);
-
-                if aligned_series_data.len() != num_commits {
-                    vortex_bail!(
-                        "Series '{}' in group '{}', chart '{}' has {} elements, expected {}",
-                        series_name,
-                        group_name,
-                        chart_name,
-                        aligned_series_data.len(),
-                        num_commits
-                    );
-                }
-
-                // Skip series with no data points.
-                if !aligned_series_data.iter().any(|v| v.is_some()) {
-                    continue;
-                }
-
-                // Convert to owned String key.
-                aligned_series.insert(series_name.to_string(), aligned_series_data);
-            }
-
-            if aligned_series.is_empty() {
-                continue;
-            }
-
-            charts.insert(chart_name.to_string(), OwnedChartData { aligned_series });
-        }
-
-        if charts.is_empty() {
-            continue;
-        }
-
-        benchmarks.insert(group_name.to_string(), OwnedBenchmarkGroupData { charts });
-    }
-
-    log!(
-        "[process_benchmarks_owned] Done. Final groups: {:?}",
-        benchmarks.keys().collect::<Vec<_>>()
-    );
-
-    Ok(benchmarks)
-}
-
-/// Extracts summary metadata from owned benchmarks.
-pub fn extract_summary(benchmarks: &OwnedBenchmarks, commits: Vec<CommitInfo>) -> BenchmarkSummary {
+/// Extracts summary metadata from benchmarks.
+pub fn extract_summary(benchmarks: &Benchmarks, commits: Vec<CommitInfo>) -> BenchmarkSummary {
     let groups = benchmarks
         .iter()
         .map(|(group_name, group_data)| {
diff --git a/vortex-wasm/src/website/commit_id.rs b/vortex-wasm/src/website/commit_id.rs
index 249dd953087..1ee36c12420 100644
--- a/vortex-wasm/src/website/commit_id.rs
+++ b/vortex-wasm/src/website/commit_id.rs
@@ -18,18 +18,6 @@ use serde::Serialize;
 #[derive(Clone, PartialEq, Eq, PartialOrd, Ord)]
 pub struct CommitId(pub [u8; 20]);
 
-impl fmt::Display for CommitId {
-    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
-        write!(f, "{}", hex::encode(self.0))
-    }
-}
-
-impl fmt::Debug for CommitId {
-    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
-        write!(f, "CommitId(\"{}\")", hex::encode(self.0))
-    }
-}
-
 impl Serialize for CommitId {
     fn serialize<S>(&self, serializer: S) -> Result<S::Ok, S::Error>
     where
@@ -83,6 +71,18 @@ impl Hash for CommitId {
     }
 }
 
+impl fmt::Display for CommitId {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        write!(f, "{}", hex::encode(self.0))
+    }
+}
+
+impl fmt::Debug for CommitId {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        write!(f, "CommitId(\"{}\")", hex::encode(self.0))
+    }
+}
+
 /// A hasher that passes through bytes directly without additional hashing.
 ///
 /// This is useful for types like [`CommitId`] that are already cryptographic hashes.
diff --git a/vortex-wasm/src/website/commit.rs b/vortex-wasm/src/website/commit_info.rs
similarity index 100%
rename from vortex-wasm/src/website/commit.rs
rename to vortex-wasm/src/website/commit_info.rs
index 4be39aef039..046f8e1b622 100644
--- a/vortex-wasm/src/website/commit.rs
+++ b/vortex-wasm/src/website/commit_info.rs
@@ -24,55 +24,6 @@ use vortex_error::vortex_bail;
 
 use crate::website::commit_id::CommitId;
 
-#[derive(Debug, Clone, PartialEq, Eq, PartialOrd, Ord, Serialize, Deserialize)]
-pub struct Author {
-    name: String,
-    email: String,
-}
-
-impl Author {
-    /// Creates a new [`Author`].
-    pub fn new(name: String, email: String) -> Self {
-        Self { name, email }
-    }
-
-    /// Returns the author's name.
-    pub fn name(&self) -> &str {
-        &self.name
-    }
-
-    /// Returns the author's email.
-    pub fn email(&self) -> &str {
-        &self.email
-    }
-
-    /// Returns the [`DType`] for an [`Author`].
-    ///
-    /// The schema is:
-    /// - `name`: `Utf8`
-    /// - `email`: `Utf8`
-    pub fn dtype() -> DType {
-        DType::Struct(
-            StructFields::new(
-                FieldNames::from(["name", "email"]),
-                vec![DType::Utf8(NonNullable), DType::Utf8(NonNullable)],
-            ),
-            NonNullable,
-        )
-    }
-
-    /// Converts an [`Author`] to a [`Scalar`].
-    pub fn into_scalar(&self) -> Scalar {
-        Scalar::struct_(
-            Self::dtype(),
-            vec![
-                Scalar::utf8(self.name.as_str(), NonNullable),
-                Scalar::utf8(self.email.as_str(), NonNullable),
-            ],
-        )
-    }
-}
-
 /// Commit information including author, message, timestamp, and commit ID.
 ///
 /// The field order determines the derived [`Ord`] implementation: timestamp first, then author,
@@ -242,3 +193,52 @@ impl CommitInfo {
         Ok(entries)
     }
 }
+
+#[derive(Debug, Clone, PartialEq, Eq, PartialOrd, Ord, Serialize, Deserialize)]
+pub struct Author {
+    name: String,
+    email: String,
+}
+
+impl Author {
+    /// Creates a new [`Author`].
+    pub fn new(name: String, email: String) -> Self {
+        Self { name, email }
+    }
+
+    /// Returns the author's name.
+    pub fn name(&self) -> &str {
+        &self.name
+    }
+
+    /// Returns the author's email.
+    pub fn email(&self) -> &str {
+        &self.email
+    }
+
+    /// Returns the [`DType`] for an [`Author`].
+    ///
+    /// The schema is:
+    /// - `name`: `Utf8`
+    /// - `email`: `Utf8`
+    pub fn dtype() -> DType {
+        DType::Struct(
+            StructFields::new(
+                FieldNames::from(["name", "email"]),
+                vec![DType::Utf8(NonNullable), DType::Utf8(NonNullable)],
+            ),
+            NonNullable,
+        )
+    }
+
+    /// Converts an [`Author`] to a [`Scalar`].
+    pub fn into_scalar(&self) -> Scalar {
+        Scalar::struct_(
+            Self::dtype(),
+            vec![
+                Scalar::utf8(self.name.as_str(), NonNullable),
+                Scalar::utf8(self.email.as_str(), NonNullable),
+            ],
+        )
+    }
+}
diff --git a/vortex-wasm/src/website/mod.rs b/vortex-wasm/src/website/mod.rs
index 927c478bc01..3d69dcea90b 100644
--- a/vortex-wasm/src/website/mod.rs
+++ b/vortex-wasm/src/website/mod.rs
@@ -2,11 +2,77 @@
 // SPDX-FileCopyrightText: Copyright the Vortex contributors
 
 pub mod charts;
-pub mod commit;
 pub mod commit_id;
+pub mod commit_info;
 pub mod entry;
 pub mod read_s3;
 
 // `update_s3` uses `tokio` and `std::process::Command`, which are not available in WASM.
 #[cfg(feature = "native")]
 pub mod update_s3;
+
+/// S3 key for the benchmark data Vortex file.
+pub const DATA_KEY: &str = "data.vortex";
+
+/// S3 key for the commits metadata Vortex file.
+pub const COMMITS_KEY: &str = "commits.vortex";
+
+#[cfg(target_arch = "wasm32")]
+mod wasm_bindings {
+    use std::sync::LazyLock;
+
+    use vortex::VortexSessionDefault;
+    use vortex::io::runtime::wasm::WasmRuntime;
+    use vortex::io::session::RuntimeSessionExt;
+    use vortex::session::VortexSession;
+    use wasm_bindgen::prelude::*;
+
+    use super::COMMITS_KEY;
+    use super::DATA_KEY;
+    use super::read_s3::get_benchmark_summary;
+    use super::read_s3::get_chart_data;
+
+    /// Cached Vortex session configured with the WASM runtime.
+    static SESSION: LazyLock<VortexSession> =
+        LazyLock::new(|| VortexSession::default().with_handle(WasmRuntime::handle()));
+
+    /// Load benchmark summary (metadata only, fast).
+    ///
+    /// This function fetches data from S3 (cached after first call), processes it, and returns
+    /// a summary containing:
+    /// - `commits`: Array of commit objects
+    /// - `groups`: Object mapping group names to chart metadata (no values)
+    ///
+    /// Use this for fast initial load, then call `load_chart_data` for specific charts.
+    ///
+    /// # Returns
+    ///
+    /// A JSON string that must be parsed with `JSON.parse()` in JavaScript.
+    #[wasm_bindgen]
+    pub async fn load_benchmark_summary() -> Result<String, JsValue> {
+        get_benchmark_summary(&SESSION, COMMITS_KEY, DATA_KEY)
+            .await
+            .map_err(|e| JsValue::from_str(&format!("Failed to load benchmark summary: {}", e)))
+    }
+
+    /// Load chart data for a specific group and chart.
+    ///
+    /// This function returns the aligned series data for a single chart. Data is cached after
+    /// the first call to any load function, so subsequent calls are fast.
+    ///
+    /// # Arguments
+    ///
+    /// * `group` - The group name (e.g., "random-access", "tpch")
+    /// * `chart` - The chart name within the group (e.g., "latency", "q1-sf1000-nvme")
+    ///
+    /// # Returns
+    ///
+    /// A JSON string containing `{ aligned_series: { series_name: [values...] } }`.
+    /// Values are in nanoseconds (u64). Parse with `JSON.parse()` in JavaScript.
+    #[wasm_bindgen]
+    pub async fn load_chart_data(group: &str, chart: &str) -> Result<String, JsValue> {
+        get_chart_data(&SESSION, COMMITS_KEY, DATA_KEY, group, chart)
+            .await
+            .map_err(|e| JsValue::from_str(&format!("Failed to load chart data: {}", e)))
+    }
+}
diff --git a/vortex-wasm/src/website/read_s3.rs b/vortex-wasm/src/website/read_s3.rs
index c64cea87649..33f15ed353d 100644
--- a/vortex-wasm/src/website/read_s3.rs
+++ b/vortex-wasm/src/website/read_s3.rs
@@ -12,30 +12,15 @@ use vortex::error::vortex_err;
 use vortex::file::OpenOptionsSessionExt;
 use vortex::session::VortexSession;
 use vortex_array::ArrayRef;
+use vortex_error::VortexExpect;
 use wasm_bindgen::JsValue;
 
 use super::entry::BenchmarkEntry;
 use crate::website::charts::BenchmarkResponse;
-use crate::website::charts::OwnedBenchmarks;
+use crate::website::charts::Benchmarks;
 use crate::website::charts::extract_summary;
 use crate::website::charts::process_benchmarks;
-use crate::website::charts::process_benchmarks_owned;
-use crate::website::commit::CommitInfo;
-
-/// Log to the browser console (WASM) or stderr (native).
-#[cfg(target_arch = "wasm32")]
-macro_rules! log {
-    ($($t:tt)*) => {
-        web_sys::console::log_1(&format!($($t)*).into());
-    }
-}
-
-#[cfg(not(target_arch = "wasm32"))]
-macro_rules! log {
-    ($($t:tt)*) => {
-        eprintln!($($t)*);
-    }
-}
+use crate::website::commit_info::CommitInfo;
 
 /// Base URL for the S3 bucket containing benchmark data.
 const S3_BASE_URL: &str = "https://vortex-benchmark-results-database-test.s3.amazonaws.com";
@@ -48,8 +33,8 @@ const S3_BASE_URL: &str = "https://vortex-benchmark-results-database-test.s3.ama
 pub struct ProcessedData {
     /// Sorted commits.
     pub commits: Vec<CommitInfo>,
-    /// All benchmarks with owned strings.
-    pub benchmarks: OwnedBenchmarks,
+    /// All benchmarks.
+    pub benchmarks: Benchmarks,
 }
 
 /// Global cache for processed data.
@@ -59,38 +44,32 @@ static PROCESSED_DATA: OnceLock<ProcessedData> = OnceLock::new();
 ///
 /// This function fetches data from S3 and processes it on the first call, then returns the
 /// cached result on subsequent calls.
+///
+/// # Implementation Note
+///
+/// We use a manual `get()` check followed by `set()` instead of `OnceLock::get_or_init` because
+/// `get_or_init` requires a synchronous closure, but our initialization is async (fetching from
+/// S3). There is no async-compatible `get_or_init` in the standard library.
 pub async fn ensure_data_loaded(
     session: &VortexSession,
     commits_key: &str,
     data_key: &str,
 ) -> VortexResult<&'static ProcessedData> {
-    // If already cached, return immediately.
     if let Some(data) = PROCESSED_DATA.get() {
-        log!("[ensure_data_loaded] Returning cached data");
         return Ok(data);
     }
 
-    log!("[ensure_data_loaded] Fetching and processing data...");
-
-    // Fetch from S3.
     let (data_array, commits_array) = futures::try_join!(
         read_s3_array(session, data_key),
         read_s3_array(session, commits_key)
     )?;
 
-    // Parse arrays.
     let entries = BenchmarkEntry::vec_from_array(&data_array)?;
     let mut commits = CommitInfo::vec_from_array(&commits_array)?;
     commits.sort_unstable();
 
-    log!(
-        "[ensure_data_loaded] Parsed {} entries, {} commits",
-        entries.len(),
-        commits.len()
-    );
-
-    // Process into owned structures.
-    let benchmarks = process_benchmarks_owned(&entries, &commits)?;
+    // Process benchmarks.
+    let benchmarks = process_benchmarks(&entries, &commits)?;
 
     let processed = ProcessedData {
         commits,
@@ -100,7 +79,7 @@ pub async fn ensure_data_loaded(
     // Store in cache (ignore error if another thread beat us to it).
     drop(PROCESSED_DATA.set(processed));
 
-    Ok(PROCESSED_DATA.get().expect("just set"))
+    Ok(PROCESSED_DATA.get().vortex_expect("just set"))
 }
 
 /// Returns the benchmark summary (metadata only, fast serialization).
@@ -110,19 +89,8 @@ pub async fn get_benchmark_summary(
     data_key: &str,
 ) -> VortexResult<String> {
     let data = ensure_data_loaded(session, commits_key, data_key).await?;
-
-    log!("[get_benchmark_summary] Building summary...");
     let summary = extract_summary(&data.benchmarks, data.commits.clone());
-
-    log!("[get_benchmark_summary] Serializing with serde_json...");
-    let json = serde_json::to_string(&summary)
-        .map_err(|e| vortex_err!("Failed to serialize summary: {}", e))?;
-
-    log!(
-        "[get_benchmark_summary] Done, JSON size: {} bytes",
-        json.len()
-    );
-    Ok(json)
+    serde_json::to_string(&summary).map_err(|e| vortex_err!("Failed to serialize summary: {}", e))
 }
 
 /// Returns chart data for a specific group and chart.
@@ -135,12 +103,6 @@ pub async fn get_chart_data(
 ) -> VortexResult<String> {
     let data = ensure_data_loaded(session, commits_key, data_key).await?;
 
-    log!(
-        "[get_chart_data] Looking up group='{}', chart='{}'",
-        group,
-        chart
-    );
-
     let group_data = data
         .benchmarks
         .get(group)
@@ -151,12 +113,8 @@ pub async fn get_chart_data(
         .get(chart)
         .ok_or_else(|| vortex_err!("Chart '{}' not found in group '{}'", chart, group))?;
 
-    log!("[get_chart_data] Serializing chart data...");
-    let json = serde_json::to_string(chart_data)
-        .map_err(|e| vortex_err!("Failed to serialize chart data: {}", e))?;
-
-    log!("[get_chart_data] Done, JSON size: {} bytes", json.len());
-    Ok(json)
+    serde_json::to_string(chart_data)
+        .map_err(|e| vortex_err!("Failed to serialize chart data: {}", e))
 }
 
 // ============================================================================
@@ -180,7 +138,6 @@ pub async fn get_chart_data(
 /// - The file is not a valid Vortex file.
 pub async fn read_s3_array(session: &VortexSession, key: &str) -> VortexResult<ArrayRef> {
     let url = format!("{}/{}", S3_BASE_URL, key);
-    log!("[read_s3_array] Fetching {}...", url);
 
     let response = reqwest::get(&url)
         .await
@@ -200,11 +157,6 @@ pub async fn read_s3_array(session: &VortexSession, key: &str) -> VortexResult<A
         .await
         .map_err(|e| vortex_err!("Failed to read response body: {}", e))?;
 
-    log!(
-        "[read_s3_array] Downloaded {} bytes, parsing Vortex file...",
-        bytes.len()
-    );
-
     // Parse as Vortex file and read all data.
     // Note: We use `open_read_at` directly instead of `open_buffer` because `open_buffer` uses
     // `futures::executor::block_on` which requires `std::time` (not available in WASM).
@@ -216,10 +168,7 @@ pub async fn read_s3_array(session: &VortexSession, key: &str) -> VortexResult<A
         .open_read_at(buffer)
         .await?;
 
-    let array = file.scan()?.into_array_stream()?.read_all().await?;
-    log!("[read_s3_array] Parsed array with {} rows", array.len());
-
-    Ok(array)
+    file.scan()?.into_array_stream()?.read_all().await
 }
 
 /// Reads benchmark entries from an S3 object containing a Vortex file.
@@ -274,40 +223,21 @@ pub async fn get_benchmark_data(
     commits_key: &str,
     data_key: &str,
 ) -> VortexResult<JsValue> {
-    log!("[get_benchmark_data] Fetching data and commits in parallel...");
-
     let (data_array, commits_array) = futures::try_join!(
         read_s3_array(session, data_key),
         read_s3_array(session, commits_key)
     )?;
 
-    log!("[get_benchmark_data] Parsing benchmark entries...");
     let data = BenchmarkEntry::vec_from_array(&data_array)?;
-    log!(
-        "[get_benchmark_data] Parsed {} benchmark entries",
-        data.len()
-    );
-
-    log!("[get_benchmark_data] Parsing commit info...");
     let mut commits = CommitInfo::vec_from_array(&commits_array)?;
-    log!(
-        "[get_benchmark_data] Parsed {} commits, sorting...",
-        commits.len()
-    );
     commits.sort_unstable();
 
-    log!("[get_benchmark_data] Processing benchmarks...");
     let benchmarks = process_benchmarks(&data, &commits)?;
-
     let response = BenchmarkResponse {
         benchmarks,
         commits,
     };
 
-    log!("[get_benchmark_data] Serializing response to JS...");
-    let js_value = serde_wasm_bindgen::to_value(&response)
-        .map_err(|e| vortex_err!("Failed to serialize benchmark response: {e}"))?;
-
-    log!("[get_benchmark_data] Done!");
-    Ok(js_value)
+    serde_wasm_bindgen::to_value(&response)
+        .map_err(|e| vortex_err!("Failed to serialize benchmark response: {e}"))
 }

From 5139fc4b0b640654d430045c560777ae769be66a Mon Sep 17 00:00:00 2001
From: Connor Tsui <connor.tsui20@gmail.com>
Date: Fri, 5 Dec 2025 11:42:28 -0500
Subject: [PATCH 29/30] remove animation

Signed-off-by: Connor Tsui <connor.tsui20@gmail.com>
---
 vortex-wasm/wasm-test.js | 53 +++++-----------------------------------
 1 file changed, 6 insertions(+), 47 deletions(-)

diff --git a/vortex-wasm/wasm-test.js b/vortex-wasm/wasm-test.js
index fbb4e469159..a5f3ebf875f 100644
--- a/vortex-wasm/wasm-test.js
+++ b/vortex-wasm/wasm-test.js
@@ -597,58 +597,15 @@ function renderGroupSummary(groupId, groupConfig) {
   }
 }
 
-/**
- * Number of charts to resize per animation frame when expanding a group.
- */
-const CHARTS_PER_BATCH = 4;
-
-/**
- * Resizes all charts in a group in batches, yielding to the browser between batches.
- * This processes multiple charts per frame for faster expansion of large groups.
- * Skips yields when tab is hidden to avoid browser throttling.
- */
-async function resizeGroupChartsBatched(groupId) {
-  const groupCharts = [];
-  for (const [prefix, chart] of chartInstances.entries()) {
-    if (prefix.startsWith(groupId + "-")) {
-      groupCharts.push(chart);
-    }
-  }
-
-  for (let i = 0; i < groupCharts.length; i += CHARTS_PER_BATCH) {
-    const batch = groupCharts.slice(i, i + CHARTS_PER_BATCH);
-    for (const chart of batch) {
-      chart.resize();
-    }
-    // Skip delay if page is hidden to avoid browser throttling.
-    if (!document.hidden) {
-      await new Promise((r) => setTimeout(r, 0));
-    }
-  }
-}
-
 /**
  * Sets up collapsible benchmark sections.
+ *
+ * Chart.js automatically detects visibility changes and resizes when charts become visible.
  */
 function setupCollapsibleBenchmarks() {
   document.querySelectorAll(".benchmark-header").forEach((header) => {
-    header.addEventListener("click", async () => {
-      const benchmarkSet = header.closest(".benchmark-set");
-      const wasCollapsed = benchmarkSet.classList.contains("collapsed");
-
-      // Disable transitions during expand to avoid jank with many charts.
-      if (wasCollapsed) {
-        benchmarkSet.classList.add("expanding");
-      }
-
-      benchmarkSet.classList.toggle("collapsed");
-
-      // If we just expanded, resize charts in batches.
-      if (wasCollapsed) {
-        const groupId = benchmarkSet.id.replace("-group", "");
-        await resizeGroupChartsBatched(groupId);
-        benchmarkSet.classList.remove("expanding");
-      }
+    header.addEventListener("click", () => {
+      header.closest(".benchmark-set").classList.toggle("collapsed");
     });
   });
 }
@@ -831,6 +788,7 @@ function createChartOptions(
   return {
     responsive: true,
     maintainAspectRatio: false,
+    animation: false,
     layout: {
       padding: { left: 0, right: 0, top: 0, bottom: 0 },
     },
@@ -1161,6 +1119,7 @@ function createEmptyChart(groupId, chartName, groupConfig) {
     options: {
       responsive: true,
       maintainAspectRatio: false,
+      animation: false,
       scales: {
         x: { display: true },
         y: {

From 2addc709ff7d8782ce6b86f497e15cce8ad4a67e Mon Sep 17 00:00:00 2001
From: Connor Tsui <connor.tsui20@gmail.com>
Date: Fri, 5 Dec 2025 12:01:48 -0500
Subject: [PATCH 30/30] clean up and use nonzerou64

Signed-off-by: Connor Tsui <connor.tsui20@gmail.com>
---
 vortex-wasm/src/bin/test_s3_read.rs   |  56 ----------
 vortex-wasm/src/bin/test_s3_update.rs | 147 --------------------------
 vortex-wasm/src/website/charts.rs     |  19 +++-
 vortex-wasm/src/website/read_s3.rs    |  73 -------------
 4 files changed, 14 insertions(+), 281 deletions(-)
 delete mode 100644 vortex-wasm/src/bin/test_s3_read.rs
 delete mode 100644 vortex-wasm/src/bin/test_s3_update.rs

diff --git a/vortex-wasm/src/bin/test_s3_read.rs b/vortex-wasm/src/bin/test_s3_read.rs
deleted file mode 100644
index 738820eadbc..00000000000
--- a/vortex-wasm/src/bin/test_s3_read.rs
+++ /dev/null
@@ -1,56 +0,0 @@
-// SPDX-License-Identifier: Apache-2.0
-// SPDX-FileCopyrightText: Copyright the Vortex contributors
-
-//! Test binary for reading benchmark entries from S3 and printing them.
-
-#![allow(clippy::expect_used)]
-
-use vortex::VortexSessionDefault;
-use vortex::session::VortexSession;
-use vortex_wasm::website::read_s3::read_benchmark_entries;
-
-const KEY: &str = "test/random_access.vortex";
-
-fn main() {
-    let runtime = tokio::runtime::Runtime::new().expect("Failed to create tokio runtime");
-    runtime.block_on(async_main());
-}
-
-async fn async_main() {
-    let session = VortexSession::default();
-
-    println!("Reading benchmark entries from {}...\n", KEY);
-
-    let entries = read_benchmark_entries(&session, KEY)
-        .await
-        .expect("Failed to read benchmark entries");
-
-    println!("Read {} entries:\n", entries.len());
-
-    // Print header.
-    println!(
-        "{:<44} {:>15} {:>15} {:>15} {:>12}",
-        "commit_id", "group_name", "chart_name", "series_name", "value"
-    );
-    println!("{}", "-".repeat(105));
-
-    // Print entries (limit to first 20 and last 5 for readability).
-    let show_first = 20;
-    let show_last = 5;
-
-    for (i, entry) in entries.iter().enumerate() {
-        if i < show_first || i >= entries.len() - show_last {
-            println!(
-                "{} {:>15} {:>15} {:>15} {:>12}",
-                entry.commit_id, entry.group_name, entry.chart_name, entry.series_name, entry.value
-            );
-        } else if i == show_first {
-            println!(
-                "... ({} more entries) ...",
-                entries.len() - show_first - show_last
-            );
-        }
-    }
-
-    println!("\nTotal: {} entries", entries.len());
-}
diff --git a/vortex-wasm/src/bin/test_s3_update.rs b/vortex-wasm/src/bin/test_s3_update.rs
deleted file mode 100644
index 849c2dc0ab8..00000000000
--- a/vortex-wasm/src/bin/test_s3_update.rs
+++ /dev/null
@@ -1,147 +0,0 @@
-// SPDX-License-Identifier: Apache-2.0
-// SPDX-FileCopyrightText: Copyright the Vortex contributors
-
-//! Test binary for testing the `update_s3_object` function using the AWS CLI.
-//!
-//! Usage:
-//!   cargo run -p vortex-wasm --bin test_s3_update -- --profile <PROFILE_NAME>
-//!   cargo run -p vortex-wasm --bin test_s3_update -- --upload --profile <PROFILE_NAME>
-
-#![allow(clippy::expect_used, clippy::exit)]
-
-use std::env;
-use std::fs;
-use std::process::Command;
-use std::sync::Arc;
-
-use vortex::VortexSessionDefault;
-use vortex::array::builders::builder_with_capacity;
-use vortex::dtype::DType;
-use vortex::dtype::FieldNames;
-use vortex::dtype::Nullability::NonNullable;
-use vortex::dtype::PType;
-use vortex::io::session::RuntimeSessionExt;
-use vortex::scalar::Scalar;
-use vortex::session::VortexSession;
-use vortex_wasm::website::update_s3::update_s3_object;
-
-const BUCKET: &str = "vortex-benchmark-results-database";
-const KEY: &str = "test/random_access.vortex";
-
-fn main() {
-    let session = VortexSession::default().with_tokio();
-    let args: Vec<String> = env::args().collect();
-
-    // Parse --profile argument.
-    let profile = args
-        .iter()
-        .position(|a| a == "--profile")
-        .and_then(|i| args.get(i + 1))
-        .map(String::as_str);
-
-    if profile.is_none() {
-        eprintln!("Warning: No --profile specified. AWS CLI will use default credentials.");
-        eprintln!("Usage: test_s3_update [--upload] --profile <PROFILE_NAME>");
-    }
-
-    // Check for --upload flag.
-    if args.iter().any(|a| a == "--upload") {
-        println!("Uploading random_access.vortex to S3...");
-        let local_path = "/Users/connor/spiral/vortex-data/vortex/vortex-wasm/random_access.vortex";
-        let file_bytes = fs::read(local_path).expect("Failed to read local file");
-        let size = file_bytes.len();
-
-        let mut cmd = Command::new("aws");
-        cmd.args(["s3", "cp", local_path, &format!("s3://{}/{}", BUCKET, KEY)]);
-        if let Some(p) = profile {
-            cmd.args(["--profile", p]);
-        }
-
-        let status = cmd.status().expect("Failed to run aws CLI");
-
-        if !status.success() {
-            eprintln!("Failed to upload to S3");
-            std::process::exit(1);
-        }
-
-        println!("Uploaded {} bytes to s3://{}/{}", size, BUCKET, KEY);
-    }
-
-    // Single update test.
-    println!("\nTesting update_s3_object...");
-
-    let result = update_s3_object(&session, BUCKET, KEY, profile, |existing_array| {
-        let existing_len = existing_array.len();
-        println!("  Existing array has {} entries", existing_len);
-
-        // Create a new entry to append.
-        let new_entry = create_test_entry();
-
-        // Build a new array with existing data + new entry.
-        let dtype = existing_array.dtype().clone();
-        let mut builder = builder_with_capacity(&dtype, existing_len + 1);
-        builder.extend_from_array(&existing_array);
-        builder.append_scalar(&new_entry)?;
-
-        let result = builder.finish();
-        println!("  New array has {} entries", result.len());
-
-        Ok(result)
-    });
-
-    match result {
-        Ok(()) => {
-            println!("update_s3_object succeeded!");
-        }
-        Err(e) => {
-            println!("update_s3_object failed: {}", e);
-        }
-    }
-
-    println!("Done!");
-}
-
-/// Creates a test entry matching the BenchmarkEntry schema.
-fn create_test_entry() -> Scalar {
-    let u8_dtype = DType::Primitive(PType::U8, NonNullable);
-
-    // Build the dtype to match the schema:
-    // {commit_id=fixed_size_list(u8)[20], group_name=u32, chart_name=u32, series_name=u32, value=u64}
-    let dtype = DType::Struct(
-        vortex::dtype::StructFields::new(
-            FieldNames::from([
-                "commit_id",
-                "group_name",
-                "chart_name",
-                "series_name",
-                "value",
-            ]),
-            vec![
-                DType::FixedSizeList(Arc::new(u8_dtype.clone()), 20, NonNullable),
-                DType::Primitive(PType::U32, NonNullable),
-                DType::Primitive(PType::U32, NonNullable),
-                DType::Primitive(PType::U32, NonNullable),
-                DType::Primitive(PType::U64, NonNullable),
-            ],
-        ),
-        NonNullable,
-    );
-
-    // Create a test commit_id (20 bytes of 'x').
-    let commit_id_bytes: Vec<Scalar> = b"xxxxxxxxxxxxxxxxxxxx"
-        .iter()
-        .map(|&b| Scalar::primitive(b, NonNullable))
-        .collect();
-    let commit_id_scalar = Scalar::fixed_size_list(u8_dtype, commit_id_bytes, NonNullable);
-
-    Scalar::struct_(
-        dtype,
-        vec![
-            commit_id_scalar,
-            Scalar::primitive(2u32, NonNullable), // group_name: random-access
-            Scalar::primitive(2u32, NonNullable), // chart_name: random-access
-            Scalar::primitive(3u32, NonNullable), // series_name: vortex-nvme
-            Scalar::primitive(999999u64, NonNullable), // value: test value
-        ],
-    )
-}
diff --git a/vortex-wasm/src/website/charts.rs b/vortex-wasm/src/website/charts.rs
index ce32c14b4e8..9ae5d302e17 100644
--- a/vortex-wasm/src/website/charts.rs
+++ b/vortex-wasm/src/website/charts.rs
@@ -1,6 +1,8 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: Copyright the Vortex contributors
 
+use std::num::NonZeroU64;
+
 use serde::Serialize;
 use vortex::utils::aliases::hash_map::HashMap;
 use vortex_error::VortexResult;
@@ -29,13 +31,11 @@ pub struct BenchmarkGroupData {
     pub charts: HashMap<String, ChartData>,
 }
 
-// TODO(connor): We should be able to use an `Option<NonZeroU64>` since our benchmarks should
-// basically never hit 0, but that is an optimization for another day.
 /// Chart data.
 #[derive(Debug, Clone, Serialize)]
 pub struct ChartData {
     /// The name of a series and its associated data.
-    pub aligned_series: HashMap<String, Vec<Option<u64>>>,
+    pub aligned_series: HashMap<String, Vec<Option<NonZeroU64>>>,
 }
 
 // ============================================================================
@@ -145,10 +145,19 @@ pub fn process_benchmarks(
 fn create_aligned_series_data(
     commits_and_values: CommitValueMap<'_>,
     sorted_commits: &[CommitInfo],
-) -> Vec<Option<u64>> {
+) -> Vec<Option<NonZeroU64>> {
     sorted_commits
         .iter()
-        .map(|commit_info| commits_and_values.get(commit_info.commit_id()).copied())
+        .map(|commit_info| {
+            commits_and_values
+                .get(commit_info.commit_id())
+                .map(|&value| {
+                    NonZeroU64::new(value).unwrap_or_else(|| {
+                        eprintln!("Warning: benchmark value of 0 encountered, converting to 1");
+                        NonZeroU64::MIN
+                    })
+                })
+        })
         .collect()
 }
 
diff --git a/vortex-wasm/src/website/read_s3.rs b/vortex-wasm/src/website/read_s3.rs
index 33f15ed353d..5cf4da2728f 100644
--- a/vortex-wasm/src/website/read_s3.rs
+++ b/vortex-wasm/src/website/read_s3.rs
@@ -13,10 +13,8 @@ use vortex::file::OpenOptionsSessionExt;
 use vortex::session::VortexSession;
 use vortex_array::ArrayRef;
 use vortex_error::VortexExpect;
-use wasm_bindgen::JsValue;
 
 use super::entry::BenchmarkEntry;
-use crate::website::charts::BenchmarkResponse;
 use crate::website::charts::Benchmarks;
 use crate::website::charts::extract_summary;
 use crate::website::charts::process_benchmarks;
@@ -170,74 +168,3 @@ pub async fn read_s3_array(session: &VortexSession, key: &str) -> VortexResult<A
 
     file.scan()?.into_array_stream()?.read_all().await
 }
-
-/// Reads benchmark entries from an S3 object containing a Vortex file.
-///
-/// This function downloads the Vortex file from S3 using HTTP (the bucket is public), parses the
-/// columnar struct array, and converts it to a vector of row-wise [`BenchmarkEntry`] structs.
-///
-/// # Arguments
-///
-/// * `session` - The Vortex session for reading files.
-/// * `key` - The S3 object key (e.g., "test/random_access.vortex").
-///
-/// # Errors
-///
-/// Returns an error if:
-/// - The HTTP request fails.
-/// - The file is not a valid Vortex file.
-/// - The schema does not match the expected [`BenchmarkEntry`] schema.
-pub async fn read_benchmark_entries(
-    session: &VortexSession,
-    key: &str,
-) -> VortexResult<Vec<BenchmarkEntry>> {
-    let array = read_s3_array(session, key).await?;
-    BenchmarkEntry::vec_from_array(&array)
-}
-
-/// Fetches benchmark data and commit metadata from S3 and returns them as a JavaScript object.
-///
-/// The returned object has the structure:
-/// ```javascript
-/// {
-///   benchmarks: { [group_name]: { charts: { [chart_name]: { aligned_series: { [series_name]: [...] } } } } },
-///   commits: [{ timestamp, author: { name, email }, message, commit_id }, ...]
-/// }
-/// ```
-///
-/// # Arguments
-///
-/// * `session` - The Vortex session for reading files.
-/// * `commits_key` - S3 key for the commits Vortex file.
-/// * `data_key` - S3 key for the benchmark data Vortex file.
-///
-/// # Errors
-///
-/// Returns an error if:
-/// - Either S3 fetch fails.
-/// - The files are not valid Vortex files.
-/// - The schemas don't match expected formats.
-/// - Validation fails (empty names, no data points, mismatched lengths).
-pub async fn get_benchmark_data(
-    session: &VortexSession,
-    commits_key: &str,
-    data_key: &str,
-) -> VortexResult<JsValue> {
-    let (data_array, commits_array) = futures::try_join!(
-        read_s3_array(session, data_key),
-        read_s3_array(session, commits_key)
-    )?;
-
-    let data = BenchmarkEntry::vec_from_array(&data_array)?;
-    let mut commits = CommitInfo::vec_from_array(&commits_array)?;
-    commits.sort_unstable();
-
-    let benchmarks = process_benchmarks(&data, &commits)?;
-    let response = BenchmarkResponse {
-        benchmarks,
-        commits,
-    };
-
-    serde_wasm_bindgen::to_value(&response)
-        .map_err(|e| vortex_err!("Failed to serialize benchmark response: {e}"))
-}