From 22aeaae0884b6c8e0850bef8ef07ecc0492b50b1 Mon Sep 17 00:00:00 2001
From: Axel Bocciarelli <axelboc@gmail.com>
Date: Fri, 19 Apr 2024 13:48:34 +0200
Subject: [PATCH] Allow opening very large files manually from inside webview

---
 CHANGELOG.md             |  7 +++++++
 README.md                |  6 ++++--
 app/App.tsx              | 23 +++++++++++++++++++++++
 app/StandaloneViewer.tsx | 37 +++++++++++++++++++++++++++++++++++++
 app/Viewer.tsx           | 14 --------------
 src/H5WebViewer.ts       |  2 +-
 6 files changed, 72 insertions(+), 17 deletions(-)
 create mode 100644 app/StandaloneViewer.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 09406c7..4bbcdc4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## [v0.1.5](https://github.com/silx-kit/vscode-h5web/compare/v0.1.4...v0.1.5)
+
+- ✨ **Allow opening HDF5 files of any size.** Previously, when you tried to
+  open a file larger than 2 GB, you would see an error in the H5Web webview
+  editor. Now, you will be able to browse for the file manually from inside the
+  webview, and doing so will bypass the file size limitation.
+
 ## [v0.1.4](https://github.com/silx-kit/vscode-h5web/compare/v0.1.3...v0.1.4)
 
 - ✨ Upgrade H5Web from v11.1.1 to v11.2.0
diff --git a/README.md b/README.md
index c68f0f2..a9889fd 100644
--- a/README.md
+++ b/README.md
@@ -57,5 +57,7 @@ available in
 This extension uses [h5wasm](https://github.com/usnistgov/h5wasm) to read HDF5
 files and therefore suffers from the following limitations:
 
-- Files bigger than 2GB cannot be read
-- External links cannot be resolved
+- Files bigger than 2GB cannot be opened automatically from the VS Code
+  Explorer. You will need to browse for them manually from the H5Web webview
+  editor when requested.
+- External links cannot be resolved.
diff --git a/app/App.tsx b/app/App.tsx
index 62763cb..648fd66 100644
--- a/app/App.tsx
+++ b/app/App.tsx
@@ -4,6 +4,11 @@ import Viewer from './Viewer';
 import { ErrorBoundary } from 'react-error-boundary';
 import { vscode } from './vscode-api';
 import { MessageType, type Message, type FileInfo } from '../src/models';
+import { H5WasmLocalFileProvider } from '@h5web/h5wasm';
+import StandaloneViewer from './StandaloneViewer';
+
+// 2 GB = 2 * 1024 * 1024 * 1024 B
+const MAX_SIZE_IN_BYTES = 2147483648;
 
 function App() {
   const [fileInfo, setFileInfo] = useState<FileInfo>();
@@ -23,6 +28,24 @@ function App() {
     return null;
   }
 
+  if (fileInfo.size === 0) {
+    // e.g. when comparing git changes on an untracked file - https://github.com/silx-kit/vscode-h5web/issues/22
+    return <p>File does not exist</p>;
+  }
+
+  if (fileInfo.size >= MAX_SIZE_IN_BYTES) {
+    return (
+      <StandaloneViewer
+        customMessage={
+          <p>
+            File is too large to be opened from the explorer (max 2 GB). Please
+            browse for it from here:
+          </p>
+        }
+      />
+    );
+  }
+
   return (
     <ErrorBoundary fallbackRender={({ error }) => <p>{error.message}</p>}>
       <Suspense fallback={<>Loading...</>}>
diff --git a/app/StandaloneViewer.tsx b/app/StandaloneViewer.tsx
new file mode 100644
index 0000000..6092ef9
--- /dev/null
+++ b/app/StandaloneViewer.tsx
@@ -0,0 +1,37 @@
+import { App } from '@h5web/app';
+import { H5WasmLocalFileProvider } from '@h5web/h5wasm';
+import { useState, type ReactNode } from 'react';
+import { getExportURL, getPlugin } from './utils';
+
+interface Props {
+  customMessage?: ReactNode;
+}
+
+function StandaloneViewer(props: Props) {
+  const { customMessage } = props;
+  const [fallbackFile, setFallbackFile] = useState<File>();
+
+  if (!fallbackFile) {
+    return (
+      <>
+        {customMessage}
+        <input
+          type="file"
+          onChange={(evt) => setFallbackFile(evt.target.files?.[0])}
+        />
+      </>
+    );
+  }
+
+  return (
+    <H5WasmLocalFileProvider
+      file={fallbackFile}
+      getExportURL={getExportURL}
+      getPlugin={getPlugin}
+    >
+      <App />
+    </H5WasmLocalFileProvider>
+  );
+}
+
+export default StandaloneViewer;
diff --git a/app/Viewer.tsx b/app/Viewer.tsx
index 976bc75..97e429d 100644
--- a/app/Viewer.tsx
+++ b/app/Viewer.tsx
@@ -4,9 +4,6 @@ import { suspend } from 'suspend-react';
 import { getExportURL, getPlugin } from './utils';
 import { type FileInfo } from '../src/models.js';
 
-// 2 GB = 2 * 1024 * 1024 * 1024 B
-const MAX_SIZE_IN_BYTES = 2147483648;
-
 interface Props {
   fileInfo: FileInfo;
 }
@@ -14,17 +11,6 @@ interface Props {
 function Viewer(props: Props) {
   const { fileInfo } = props;
 
-  if (fileInfo.size === 0) {
-    // e.g. when comparing git changes on an untracked file - https://github.com/silx-kit/vscode-h5web/issues/22
-    return <p>File does not exist</p>;
-  }
-
-  if (fileInfo.size >= MAX_SIZE_IN_BYTES) {
-    throw new Error(
-      'Cannot open: the file is bigger than the maximum supported size (2 GB)'
-    );
-  }
-
   const buffer = suspend(async () => {
     const res = await fetch(fileInfo.uri);
     return res.arrayBuffer();
diff --git a/src/H5WebViewer.ts b/src/H5WebViewer.ts
index 41448d6..287d377 100644
--- a/src/H5WebViewer.ts
+++ b/src/H5WebViewer.ts
@@ -124,7 +124,7 @@ export default class H5WebViewer
 				<meta charset="UTF-8">
 				<meta
           http-equiv="Content-Security-Policy"
-          content="default-src 'none'; connect-src ${cspSource} data:; script-src ${cspSource} 'unsafe-eval'; style-src ${cspSource}; img-src blob:;"
+          content="default-src 'none'; connect-src ${cspSource} data:; script-src ${cspSource} 'unsafe-eval'; style-src ${cspSource}; img-src blob:; worker-src blob:;"
         >
 				<meta name="viewport" content="width=device-width, initial-scale=1.0">
 				<title>H5Web</title>