From 12311af0461c79eece4783ea61f782863f659ee7 Mon Sep 17 00:00:00 2001
From: pizzart <7o7goo7o7@gmail.com>
Date: Mon, 1 Jan 2024 19:31:17 +0300
Subject: [PATCH] bigfile loading on wasm

---
 .gitignore                |   1 +
 Cargo.lock                | 286 ++++++++++++++++++++++++++++++++++----
 bff-gui/Cargo.toml        |   6 +-
 bff-gui/index.html        | 258 +++++++++++++++++-----------------
 bff-gui/src/main.rs       |  76 +++++-----
 bff-gui/src/panels/top.rs |  90 ++++++------
 6 files changed, 478 insertions(+), 239 deletions(-)

diff --git a/.gitignore b/.gitignore
index 2ac183b..38a52c7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -20,6 +20,7 @@
 
 # bff-gui
 /bff-gui/dist/
+/bff-gui/node_modules/
 
 # cargo flamegraph
 /flamegraph.svg
diff --git a/Cargo.lock b/Cargo.lock
index 90e8e70..aeaa7b7 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -66,9 +66,9 @@ checksum = "e084cb5168790c0c112626175412dc5ad127083441a8248ae49ddf6725519e83"
 dependencies = [
  "accesskit",
  "accesskit_consumer",
- "async-channel",
+ "async-channel 1.9.0",
  "atspi",
- "futures-lite",
+ "futures-lite 1.13.0",
  "serde",
  "zbus",
 ]
@@ -334,17 +334,30 @@ dependencies = [
  "futures-core",
 ]
 
+[[package]]
+name = "async-channel"
+version = "2.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1ca33f4bc4ed1babef42cad36cc1f51fa88be00420404e5b1e80ab1b18f7678c"
+dependencies = [
+ "concurrent-queue",
+ "event-listener 4.0.1",
+ "event-listener-strategy",
+ "futures-core",
+ "pin-project-lite",
+]
+
 [[package]]
 name = "async-executor"
-version = "1.6.0"
+version = "1.8.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4b0c4a4f319e45986f347ee47fef8bf5e81c9abc3f6f58dc2391439f30df65f0"
+checksum = "17ae5ebefcc48e7452b4987947920dac9450be1110cadf34d1b8c116bdbaf97c"
 dependencies = [
- "async-lock",
+ "async-lock 3.2.0",
  "async-task",
  "concurrent-queue",
  "fastrand 2.0.1",
- "futures-lite",
+ "futures-lite 2.1.0",
  "slab",
 ]
 
@@ -354,10 +367,25 @@ version = "1.6.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "279cf904654eeebfa37ac9bb1598880884924aab82e290aa65c9e77a0e142e06"
 dependencies = [
- "async-lock",
+ "async-lock 2.8.0",
  "autocfg",
  "blocking",
- "futures-lite",
+ "futures-lite 1.13.0",
+]
+
+[[package]]
+name = "async-global-executor"
+version = "2.4.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "05b1b633a2115cd122d73b955eadd9916c18c8f510ec9cd1686404c60ad1c29c"
+dependencies = [
+ "async-channel 2.1.1",
+ "async-executor",
+ "async-io 2.2.2",
+ "async-lock 3.2.0",
+ "blocking",
+ "futures-lite 2.1.0",
+ "once_cell",
 ]
 
 [[package]]
@@ -366,20 +394,39 @@ version = "1.13.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0fc5b45d93ef0529756f812ca52e44c221b35341892d3dcc34132ac02f3dd2af"
 dependencies = [
- "async-lock",
+ "async-lock 2.8.0",
  "autocfg",
  "cfg-if",
  "concurrent-queue",
- "futures-lite",
+ "futures-lite 1.13.0",
  "log",
  "parking",
- "polling",
+ "polling 2.8.0",
  "rustix 0.37.26",
  "slab",
  "socket2",
  "waker-fn",
 ]
 
+[[package]]
+name = "async-io"
+version = "2.2.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6afaa937395a620e33dc6a742c593c01aced20aa376ffb0f628121198578ccc7"
+dependencies = [
+ "async-lock 3.2.0",
+ "cfg-if",
+ "concurrent-queue",
+ "futures-io",
+ "futures-lite 2.1.0",
+ "parking",
+ "polling 3.3.1",
+ "rustix 0.38.20",
+ "slab",
+ "tracing",
+ "windows-sys 0.52.0",
+]
+
 [[package]]
 name = "async-lock"
 version = "2.8.0"
@@ -389,19 +436,30 @@ dependencies = [
  "event-listener 2.5.3",
 ]
 
+[[package]]
+name = "async-lock"
+version = "3.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7125e42787d53db9dd54261812ef17e937c95a51e4d291373b670342fa44310c"
+dependencies = [
+ "event-listener 4.0.1",
+ "event-listener-strategy",
+ "pin-project-lite",
+]
+
 [[package]]
 name = "async-process"
 version = "1.8.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ea6438ba0a08d81529c69b36700fa2f95837bfe3e776ab39cde9c14d9149da88"
 dependencies = [
- "async-io",
- "async-lock",
+ "async-io 1.13.0",
+ "async-lock 2.8.0",
  "async-signal",
  "blocking",
  "cfg-if",
  "event-listener 3.0.0",
- "futures-lite",
+ "futures-lite 1.13.0",
  "rustix 0.38.20",
  "windows-sys 0.48.0",
 ]
@@ -423,8 +481,8 @@ version = "0.2.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d2a5415b7abcdc9cd7d63d6badba5288b2ca017e3fbd4173b8f405449f1a2399"
 dependencies = [
- "async-io",
- "async-lock",
+ "async-io 1.13.0",
+ "async-lock 2.8.0",
  "atomic-waker",
  "cfg-if",
  "futures-core",
@@ -435,6 +493,32 @@ dependencies = [
  "windows-sys 0.48.0",
 ]
 
+[[package]]
+name = "async-std"
+version = "1.12.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "62565bb4402e926b29953c785397c6dc0391b7b446e45008b0049eb43cec6f5d"
+dependencies = [
+ "async-channel 1.9.0",
+ "async-global-executor",
+ "async-io 1.13.0",
+ "async-lock 2.8.0",
+ "crossbeam-utils",
+ "futures-channel",
+ "futures-core",
+ "futures-io",
+ "futures-lite 1.13.0",
+ "gloo-timers",
+ "kv-log-macro",
+ "log",
+ "memchr",
+ "once_cell",
+ "pin-project-lite",
+ "pin-utils",
+ "slab",
+ "wasm-bindgen-futures",
+]
+
 [[package]]
 name = "async-task"
 version = "4.5.0"
@@ -486,7 +570,7 @@ dependencies = [
  "async-trait",
  "atspi-macros",
  "enumflags2",
- "futures-lite",
+ "futures-lite 1.13.0",
  "serde",
  "tracing",
  "zbus",
@@ -582,6 +666,7 @@ dependencies = [
 name = "bff-gui"
 version = "0.1.0"
 dependencies = [
+ "async-std",
  "bff",
  "derive_more",
  "eframe",
@@ -722,16 +807,16 @@ dependencies = [
 
 [[package]]
 name = "blocking"
-version = "1.4.1"
+version = "1.5.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8c36a4d0d48574b3dd360b4b7d95cc651d2b6557b6402848a27d4b228a473e2a"
+checksum = "6a37913e8dc4ddcc604f0c6d3bf2887c995153af3611de9e23c352b44c1b9118"
 dependencies = [
- "async-channel",
- "async-lock",
+ "async-channel 2.1.1",
+ "async-lock 3.2.0",
  "async-task",
  "fastrand 2.0.1",
  "futures-io",
- "futures-lite",
+ "futures-lite 2.1.0",
  "piper",
  "tracing",
 ]
@@ -1610,6 +1695,27 @@ dependencies = [
  "pin-project-lite",
 ]
 
+[[package]]
+name = "event-listener"
+version = "4.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "84f2cdcf274580f2d63697192d744727b3198894b1bf02923643bf59e2c26712"
+dependencies = [
+ "concurrent-queue",
+ "parking",
+ "pin-project-lite",
+]
+
+[[package]]
+name = "event-listener-strategy"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "958e4d70b6d5e81971bebec42271ec641e7ff4e170a6fa605f2b8a8b65cb97d3"
+dependencies = [
+ "event-listener 4.0.1",
+ "pin-project-lite",
+]
+
 [[package]]
 name = "fastrand"
 version = "1.9.0"
@@ -1675,6 +1781,15 @@ dependencies = [
  "percent-encoding",
 ]
 
+[[package]]
+name = "futures-channel"
+version = "0.3.28"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "955518d47e09b25bbebc7a18df10b81f0c766eaf4c4f1cccef2fca5f2a4fb5f2"
+dependencies = [
+ "futures-core",
+]
+
 [[package]]
 name = "futures-core"
 version = "0.3.28"
@@ -1702,6 +1817,19 @@ dependencies = [
  "waker-fn",
 ]
 
+[[package]]
+name = "futures-lite"
+version = "2.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "aeee267a1883f7ebef3700f262d2d54de95dfaf38189015a74fdc4e0c7ad8143"
+dependencies = [
+ "fastrand 2.0.1",
+ "futures-core",
+ "futures-io",
+ "parking",
+ "pin-project-lite",
+]
+
 [[package]]
 name = "futures-sink"
 version = "0.3.28"
@@ -1850,6 +1978,18 @@ version = "0.3.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d2fabcfbdc87f4758337ca535fb41a6d701b65693ce38287d856d1674551ec9b"
 
+[[package]]
+name = "gloo-timers"
+version = "0.2.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9b995a66bb87bebce9a0f4a95aed01daca4872c050bfcb21653361c03bc35e5c"
+dependencies = [
+ "futures-channel",
+ "futures-core",
+ "js-sys",
+ "wasm-bindgen",
+]
+
 [[package]]
 name = "glow"
 version = "0.12.3"
@@ -2211,6 +2351,15 @@ version = "3.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e2db585e1d738fc771bf08a151420d3ed193d9d895a36df7f6f8a9456b911ddc"
 
+[[package]]
+name = "kv-log-macro"
+version = "1.0.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0de8b303297635ad57c9f5059fd9cee7a47f8e8daa09df0fcd07dd39fb22977f"
+dependencies = [
+ "log",
+]
+
 [[package]]
 name = "lazy_static"
 version = "1.4.0"
@@ -2333,6 +2482,9 @@ name = "log"
 version = "0.4.20"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b5e6163cb8c49088c2c36f57875e58ccd8c87c7427f7fbd50ea6710b2f3f2e8f"
+dependencies = [
+ "value-bag",
+]
 
 [[package]]
 name = "lz4"
@@ -2877,6 +3029,20 @@ dependencies = [
  "windows-sys 0.48.0",
 ]
 
+[[package]]
+name = "polling"
+version = "3.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cf63fa624ab313c11656b4cda960bfc46c410187ad493c41f6ba2d8c1e991c9e"
+dependencies = [
+ "cfg-if",
+ "concurrent-queue",
+ "pin-project-lite",
+ "rustix 0.38.20",
+ "tracing",
+ "windows-sys 0.52.0",
+]
+
 [[package]]
 name = "powerfmt"
 version = "0.2.0"
@@ -3767,6 +3933,12 @@ version = "0.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "711b9620af191e0cdc7468a8d14e709c3dcdb115b36f838e601583af800a370a"
 
+[[package]]
+name = "value-bag"
+version = "1.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4a72e1902dde2bd6441347de2b70b7f5d59bf157c6c62f0c44572607a1d55bbe"
+
 [[package]]
 name = "vcpkg"
 version = "0.2.15"
@@ -4110,6 +4282,15 @@ dependencies = [
  "windows-targets 0.48.5",
 ]
 
+[[package]]
+name = "windows-sys"
+version = "0.52.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "282be5f36a8ce781fad8c8ae18fa3f9beff57ec1b52cb3de0789201425d9a33d"
+dependencies = [
+ "windows-targets 0.52.0",
+]
+
 [[package]]
 name = "windows-targets"
 version = "0.42.2"
@@ -4140,6 +4321,21 @@ dependencies = [
  "windows_x86_64_msvc 0.48.5",
 ]
 
+[[package]]
+name = "windows-targets"
+version = "0.52.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8a18201040b24831fbb9e4eb208f8892e1f50a37feb53cc7ff887feb8f50e7cd"
+dependencies = [
+ "windows_aarch64_gnullvm 0.52.0",
+ "windows_aarch64_msvc 0.52.0",
+ "windows_i686_gnu 0.52.0",
+ "windows_i686_msvc 0.52.0",
+ "windows_x86_64_gnu 0.52.0",
+ "windows_x86_64_gnullvm 0.52.0",
+ "windows_x86_64_msvc 0.52.0",
+]
+
 [[package]]
 name = "windows_aarch64_gnullvm"
 version = "0.42.2"
@@ -4152,6 +4348,12 @@ version = "0.48.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "2b38e32f0abccf9987a4e3079dfb67dcd799fb61361e53e2882c3cbaf0d905d8"
 
+[[package]]
+name = "windows_aarch64_gnullvm"
+version = "0.52.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cb7764e35d4db8a7921e09562a0304bf2f93e0a51bfccee0bd0bb0b666b015ea"
+
 [[package]]
 name = "windows_aarch64_msvc"
 version = "0.42.2"
@@ -4164,6 +4366,12 @@ version = "0.48.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "dc35310971f3b2dbbf3f0690a219f40e2d9afcf64f9ab7cc1be722937c26b4bc"
 
+[[package]]
+name = "windows_aarch64_msvc"
+version = "0.52.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bbaa0368d4f1d2aaefc55b6fcfee13f41544ddf36801e793edbbfd7d7df075ef"
+
 [[package]]
 name = "windows_i686_gnu"
 version = "0.42.2"
@@ -4176,6 +4384,12 @@ version = "0.48.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a75915e7def60c94dcef72200b9a8e58e5091744960da64ec734a6c6e9b3743e"
 
+[[package]]
+name = "windows_i686_gnu"
+version = "0.52.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a28637cb1fa3560a16915793afb20081aba2c92ee8af57b4d5f28e4b3e7df313"
+
 [[package]]
 name = "windows_i686_msvc"
 version = "0.42.2"
@@ -4188,6 +4402,12 @@ version = "0.48.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8f55c233f70c4b27f66c523580f78f1004e8b5a8b659e05a4eb49d4166cca406"
 
+[[package]]
+name = "windows_i686_msvc"
+version = "0.52.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ffe5e8e31046ce6230cc7215707b816e339ff4d4d67c65dffa206fd0f7aa7b9a"
+
 [[package]]
 name = "windows_x86_64_gnu"
 version = "0.42.2"
@@ -4200,6 +4420,12 @@ version = "0.48.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "53d40abd2583d23e4718fddf1ebec84dbff8381c07cae67ff7768bbf19c6718e"
 
+[[package]]
+name = "windows_x86_64_gnu"
+version = "0.52.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3d6fa32db2bc4a2f5abeacf2b69f7992cd09dca97498da74a151a3132c26befd"
+
 [[package]]
 name = "windows_x86_64_gnullvm"
 version = "0.42.2"
@@ -4212,6 +4438,12 @@ version = "0.48.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0b7b52767868a23d5bab768e390dc5f5c55825b6d30b86c844ff2dc7414044cc"
 
+[[package]]
+name = "windows_x86_64_gnullvm"
+version = "0.52.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1a657e1e9d3f514745a572a6846d3c7aa7dbe1658c056ed9c3344c4109a6949e"
+
 [[package]]
 name = "windows_x86_64_msvc"
 version = "0.42.2"
@@ -4224,6 +4456,12 @@ version = "0.48.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ed94fce61571a4006852b7389a063ab983c02eb1bb37b47f8272ce92d06d9538"
 
+[[package]]
+name = "windows_x86_64_msvc"
+version = "0.52.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dff9641d1cd4be8d1a070daf9e3773c5f67e78b4d9d42263020c057706765c04"
+
 [[package]]
 name = "winit"
 version = "0.28.7"
@@ -4350,8 +4588,8 @@ dependencies = [
  "async-broadcast",
  "async-executor",
  "async-fs",
- "async-io",
- "async-lock",
+ "async-io 1.13.0",
+ "async-lock 2.8.0",
  "async-process",
  "async-recursion",
  "async-task",
diff --git a/bff-gui/Cargo.toml b/bff-gui/Cargo.toml
index fc446ec..4d5997f 100644
--- a/bff-gui/Cargo.toml
+++ b/bff-gui/Cargo.toml
@@ -27,10 +27,7 @@ three-d = { version = "0.16.1", default-features = false }
 three-d-asset = "0.6.0"
 
 [target.'cfg(not(target_arch = "wasm32"))'.dependencies]
-tokio = { version = "1.33.0", features = [
-    "rt-multi-thread",
-    "time",
-] }
+tokio = { version = "1.33.0", features = ["rt-multi-thread", "time"] }
 
 # https://github.com/rust-lang/cargo/issues/1197
 [target.'cfg(target_arch = "wasm32")'.dependencies]
@@ -39,6 +36,7 @@ three-d = { version = "0.16.1", default-features = false, features = [
     "egui_glow",
 ] }
 eframe = { version = "0.23.0", features = ["persistence"] }
+async-std = "1.12.0"
 
 [lints]
 workspace = true
diff --git a/bff-gui/index.html b/bff-gui/index.html
index 872b4f4..4ed275f 100644
--- a/bff-gui/index.html
+++ b/bff-gui/index.html
@@ -1,140 +1,150 @@
 <!DOCTYPE html>
 <html>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
-<!-- Disable zooming: -->
-<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-
-<head>
-    <!-- change this to your project name -->
-    <title>eframe template</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+    <!-- Disable zooming: -->
+    <meta
+        name="viewport"
+        content="width=device-width, initial-scale=1.0, user-scalable=no"
+    />
+
+    <head>
+        <!-- change this to your project name -->
+        <title>BFF Studio</title>
+
+        <!-- config for our rust wasm binary. go to https://trunkrs.dev/assets/#rust for more customization -->
+        <link data-trunk rel="rust" data-wasm-opt="2" />
+        <!-- this is the base url relative to which other urls will be constructed. trunk will insert this from the public-url option -->
+        <base data-trunk-public-url />
+
+        <link data-trunk rel="icon" href="resources/bff.png" />
+
+        <link data-trunk rel="copy-file" href="assets/sw.js" />
+        <link data-trunk rel="copy-file" href="assets/manifest.json" />
+        <link data-trunk rel="copy-file" href="assets/icon-1024.png" />
+        <link data-trunk rel="copy-file" href="assets/icon-256.png" />
+        <link data-trunk rel="copy-file" href="assets/icon_ios_touch_192.png" />
+        <link data-trunk rel="copy-file" href="assets/maskable_icon_x512.png" />
+
+        <link rel="manifest" href="manifest.json" />
+        <link rel="apple-touch-icon" href="icon_ios_touch_192.png" />
+        <meta
+            name="theme-color"
+            media="(prefers-color-scheme: light)"
+            content="white"
+        />
+        <meta
+            name="theme-color"
+            media="(prefers-color-scheme: dark)"
+            content="#404040"
+        />
+
+        <style>
+            html {
+                /* Remove touch delay: */
+                touch-action: manipulation;
+            }
 
-    <!-- config for our rust wasm binary. go to https://trunkrs.dev/assets/#rust for more customization -->
-    <link data-trunk rel="rust" data-wasm-opt="2" />
-    <!-- this is the base url relative to which other urls will be constructed. trunk will insert this from the public-url option -->
-    <base data-trunk-public-url />
+            body {
+                /* Light mode background color for what is not covered by the egui canvas,
+            or where the egui canvas is translucent. */
+                background: #909090;
+            }
 
-    <link data-trunk rel="icon" href="assets/favicon.ico">
+            @media (prefers-color-scheme: dark) {
+                body {
+                    /* Dark mode background color for what is not covered by the egui canvas,
+                or where the egui canvas is translucent. */
+                    background: #404040;
+                }
+            }
 
+            /* Allow canvas to fill entire web page: */
+            html,
+            body {
+                overflow: hidden;
+                margin: 0 !important;
+                padding: 0 !important;
+                height: 100%;
+                width: 100%;
+            }
 
-    <link data-trunk rel="copy-file" href="assets/sw.js" />
-    <link data-trunk rel="copy-file" href="assets/manifest.json" />
-    <link data-trunk rel="copy-file" href="assets/icon-1024.png" />
-    <link data-trunk rel="copy-file" href="assets/icon-256.png" />
-    <link data-trunk rel="copy-file" href="assets/icon_ios_touch_192.png" />
-    <link data-trunk rel="copy-file" href="assets/maskable_icon_x512.png" />
+            /* Position canvas in center-top: */
+            canvas {
+                margin-right: auto;
+                margin-left: auto;
+                display: block;
+                position: absolute;
+                top: 0%;
+                left: 50%;
+                transform: translate(-50%, 0%);
+            }
 
+            .centered {
+                margin-right: auto;
+                margin-left: auto;
+                display: block;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                color: #f0f0f0;
+                font-size: 24px;
+                font-family: Ubuntu-Light, Helvetica, sans-serif;
+                text-align: center;
+            }
 
-    <link rel="manifest" href="manifest.json">
-    <link rel="apple-touch-icon" href="icon_ios_touch_192.png">
-    <meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
-    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#404040">
+            /* ---------------------------------------------- */
+            /* Loading animation from https://loading.io/css/ */
+            .lds-dual-ring {
+                display: inline-block;
+                width: 24px;
+                height: 24px;
+            }
 
-    <style>
-        html {
-            /* Remove touch delay: */
-            touch-action: manipulation;
-        }
+            .lds-dual-ring:after {
+                content: " ";
+                display: block;
+                width: 24px;
+                height: 24px;
+                margin: 0px;
+                border-radius: 50%;
+                border: 3px solid #fff;
+                border-color: #fff transparent #fff transparent;
+                animation: lds-dual-ring 1.2s linear infinite;
+            }
 
-        body {
-            /* Light mode background color for what is not covered by the egui canvas,
-            or where the egui canvas is translucent. */
-            background: #909090;
-        }
+            @keyframes lds-dual-ring {
+                0% {
+                    transform: rotate(0deg);
+                }
 
-        @media (prefers-color-scheme: dark) {
-            body {
-                /* Dark mode background color for what is not covered by the egui canvas,
-                or where the egui canvas is translucent. */
-                background: #404040;
+                100% {
+                    transform: rotate(360deg);
+                }
             }
-        }
-
-        /* Allow canvas to fill entire web page: */
-        html,
-        body {
-            overflow: hidden;
-            margin: 0 !important;
-            padding: 0 !important;
-            height: 100%;
-            width: 100%;
-        }
-
-        /* Position canvas in center-top: */
-        canvas {
-            margin-right: auto;
-            margin-left: auto;
-            display: block;
-            position: absolute;
-            top: 0%;
-            left: 50%;
-            transform: translate(-50%, 0%);
-        }
-
-        .centered {
-            margin-right: auto;
-            margin-left: auto;
-            display: block;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            color: #f0f0f0;
-            font-size: 24px;
-            font-family: Ubuntu-Light, Helvetica, sans-serif;
-            text-align: center;
-        }
-
-        /* ---------------------------------------------- */
-        /* Loading animation from https://loading.io/css/ */
-        .lds-dual-ring {
-            display: inline-block;
-            width: 24px;
-            height: 24px;
-        }
-
-        .lds-dual-ring:after {
-            content: " ";
-            display: block;
-            width: 24px;
-            height: 24px;
-            margin: 0px;
-            border-radius: 50%;
-            border: 3px solid #fff;
-            border-color: #fff transparent #fff transparent;
-            animation: lds-dual-ring 1.2s linear infinite;
-        }
-
-        @keyframes lds-dual-ring {
-            0% {
-                transform: rotate(0deg);
+        </style>
+    </head>
+
+    <body>
+        <!-- The WASM code will resize the canvas dynamically -->
+        <!-- the id is hardcoded in main.rs . so, make sure both match. -->
+        <canvas id="the_canvas_id"></canvas>
+
+        <!--Register Service Worker. this will cache the wasm / js scripts for offline use (for PWA functionality). -->
+        <!-- Force refresh (Ctrl + F5) to load the latest files instead of cached files  -->
+        <script>
+            // We disable caching during development so that we always view the latest version.
+            if (
+                "serviceWorker" in navigator &&
+                window.location.hash !== "#dev"
+            ) {
+                window.addEventListener("load", function () {
+                    navigator.serviceWorker.register("sw.js");
+                });
             }
-
-            100% {
-                transform: rotate(360deg);
-            }
-        }
-
-    </style>
-</head>
-
-<body>
-    <!-- The WASM code will resize the canvas dynamically -->
-    <!-- the id is hardcoded in main.rs . so, make sure both match. -->
-    <canvas id="the_canvas_id"></canvas>
-
-    <!--Register Service Worker. this will cache the wasm / js scripts for offline use (for PWA functionality). -->
-    <!-- Force refresh (Ctrl + F5) to load the latest files instead of cached files  -->
-    <script>
-        // We disable caching during development so that we always view the latest version.
-        if ('serviceWorker' in navigator && window.location.hash !== "#dev") {
-            window.addEventListener('load', function () {
-                navigator.serviceWorker.register('sw.js');
-            });
-        }
-    </script>
-</body>
-
+        </script>
+    </body>
 </html>
 
 <!-- Powered by egui: https://github.com/emilk/egui/ -->
diff --git a/bff-gui/src/main.rs b/bff-gui/src/main.rs
index 6f48639..b666303 100644
--- a/bff-gui/src/main.rs
+++ b/bff-gui/src/main.rs
@@ -21,53 +21,45 @@ const TITLE: &str = "BFF Studio";
 #[cfg(not(target_arch = "wasm32"))]
 const WINDOW_SIZE: egui::Vec2 = egui::vec2(800.0, 600.0);
 
+#[cfg(not(target_arch = "wasm32"))]
 fn main() -> Result<(), eframe::Error> {
-    #[cfg(not(target_arch = "wasm32"))]
-    {
-        let rt = tokio::runtime::Runtime::new().expect("Unable to create Runtime");
-
-        let _enter = rt.enter();
+    let rt = tokio::runtime::Runtime::new().expect("Unable to create Runtime");
 
-        std::thread::spawn(move || {
-            rt.block_on(async {
-                loop {
-                    tokio::time::sleep(std::time::Duration::from_secs(3600)).await;
-                }
-            })
-        });
-    }
+    let _enter = rt.enter();
 
-    #[cfg(not(target_arch = "wasm32"))]
-    {
-        let options = eframe::NativeOptions {
-            drag_and_drop_support: true,
-            renderer: eframe::Renderer::Glow,
-            icon_data: Some(
-                eframe::IconData::try_from_png_bytes(include_bytes!("../resources/bff.png"))
-                    .unwrap(),
-            ),
-            initial_window_size: Some(WINDOW_SIZE),
-            ..Default::default()
-        };
-        eframe::run_native(TITLE, options, Box::new(|cc| Box::new(Gui::new(cc))))
-    }
+    std::thread::spawn(move || {
+        rt.block_on(async {
+            loop {
+                tokio::time::sleep(std::time::Duration::from_secs(3600)).await;
+            }
+        })
+    });
+    let options = eframe::NativeOptions {
+        drag_and_drop_support: true,
+        renderer: eframe::Renderer::Glow,
+        icon_data: Some(
+            eframe::IconData::try_from_png_bytes(include_bytes!("../resources/bff.png")).unwrap(),
+        ),
+        initial_window_size: Some(WINDOW_SIZE),
+        ..Default::default()
+    };
+    eframe::run_native(TITLE, options, Box::new(|cc| Box::new(Gui::new(cc))))
+}
 
-    #[cfg(target_arch = "wasm32")]
-    {
-        let web_options = eframe::WebOptions::default();
+#[cfg(target_arch = "wasm32")]
+fn main() {
+    let web_options = eframe::WebOptions::default();
 
-        wasm_bindgen_futures::spawn_local(async {
-            eframe::WebRunner::new()
-                .start(
-                    "the_canvas_id", // hardcode it
-                    web_options,
-                    Box::new(|cc| Box::new(Gui::new(cc))),
-                )
-                .await
-                .expect("failed to start eframe");
-        });
-        Ok(())
-    }
+    wasm_bindgen_futures::spawn_local(async {
+        eframe::WebRunner::new()
+            .start(
+                "the_canvas_id", // hardcode it
+                web_options,
+                Box::new(|cc| Box::new(Gui::new(cc))),
+            )
+            .await
+            .expect("failed to start eframe");
+    });
 }
 
 fn setup_custom_font(ctx: &egui::Context) {
diff --git a/bff-gui/src/panels/top.rs b/bff-gui/src/panels/top.rs
index 0851499..bb56091 100644
--- a/bff-gui/src/panels/top.rs
+++ b/bff-gui/src/panels/top.rs
@@ -73,28 +73,29 @@ impl Gui {
                                     load_bf(ui.ctx().clone(), path, self.tx.clone());
                                 }
                             }
-                            // TODO: Futures do nothing unless awaited
                             #[cfg(target_arch = "wasm32")]
-                            let _ = async {
-                                let dialog = bff::bigfile::platforms::extensions()
-                                    .iter()
-                                    .map(|s| s.to_str().unwrap())
-                                    .fold(
-                                        rfd::AsyncFileDialog::new().add_filter("All files", &["*"]),
-                                        |acc, d| acc.add_filter(d, &[d]),
-                                    )
-                                    .pick_file()
-                                    .await
-                                    .unwrap();
+                            {
                                 response.bf_loading = true;
-                                load_bf(
-                                    ui.ctx().clone(),
-                                    dialog.file_name(),
-                                    dialog.read().await,
-                                    self.tx.clone(),
-                                );
-                            };
+                                let ctx = ui.ctx().clone();
+                                let tx = self.tx.clone();
+                                let future = async {
+                                    let dialog = bff::bigfile::platforms::extensions()
+                                        .iter()
+                                        .map(|s| s.to_str().unwrap())
+                                        .fold(
+                                            rfd::AsyncFileDialog::new()
+                                                .add_filter("All files", &["*"]),
+                                            |acc, d| acc.add_filter(d, &[d]),
+                                        )
+                                        .pick_file()
+                                        .await
+                                        .unwrap();
+                                    load_bf(ctx, dialog.file_name(), dialog.read().await, tx);
+                                };
+                                async_std::task::block_on(future);
+                            }
                         }
+                        #[cfg(not(target_arch = "wasm32"))]
                         if ui
                             .checkbox(&mut checked, "Auto-load names")
                             .on_hover_text_at_pointer(
@@ -109,35 +110,34 @@ impl Gui {
                         }
                     });
                     #[cfg(not(target_arch = "wasm32"))]
+                    if ui
+                        .add_enabled(self.bigfile.is_some(), egui::Button::new("Load names..."))
+                        .clicked()
                     {
-                        if ui
-                            .add_enabled(self.bigfile.is_some(), egui::Button::new("Load names..."))
-                            .clicked()
-                        {
-                            let dialog = &bff::bigfile::platforms::extensions()
-                                .iter()
-                                .map(|s| s.to_str().unwrap().replacen('D', "N", 1))
-                                .filter(|s| !s.contains("BF")) //TODO: actual name files for everything
-                                .fold(
-                                    rfd::FileDialog::new().add_filter("All files", &["*"]),
-                                    |acc, d| acc.add_filter(d.clone(), &[d.as_str()]),
-                                );
-                            if let Some(paths) = dialog.clone().pick_files() {
-                                ui.close_menu();
-                                for in_name in paths {
-                                    let f: File = File::open(in_name).unwrap();
-                                    let mut reader = bff::BufReader::new(f);
-                                    bff::names::names()
-                                        .lock()
-                                        .unwrap()
-                                        .read(&mut reader)
-                                        .unwrap();
-                                }
+                        let dialog = &bff::bigfile::platforms::extensions()
+                            .iter()
+                            .map(|s| s.to_str().unwrap().replacen('D', "N", 1))
+                            .filter(|s| !s.contains("BF")) //TODO: actual name files for everything
+                            .fold(
+                                rfd::FileDialog::new().add_filter("All files", &["*"]),
+                                |acc, d| acc.add_filter(d.clone(), &[d.as_str()]),
+                            );
+                        if let Some(paths) = dialog.clone().pick_files() {
+                            ui.close_menu();
+                            for in_name in paths {
+                                let f: File = File::open(in_name).unwrap();
+                                let mut reader = bff::BufReader::new(f);
+                                bff::names::names()
+                                    .lock()
+                                    .unwrap()
+                                    .read(&mut reader)
+                                    .unwrap();
                             }
                         }
-                        if ui.button("Quit").clicked() {
-                            frame.close();
-                        }
+                    }
+                    #[cfg(not(target_arch = "wasm32"))]
+                    if ui.button("Quit").clicked() {
+                        frame.close();
                     }
                 });
                 #[cfg(not(target_arch = "wasm32"))]