Fix parsing of committed datatype metadata with h5wasm

.npmrc

@@ -4,6 +4,10 @@ engine-strict=true
 # Don't check exact pnpm version in `packageManager` field (required by Netlify)
 package-manager-strict=false
 
+# Make installation of peer dependencies more predictible
+auto-install-peers=false
+strict-peer-dependencies=true
+
 # Save exact dependency versions in `package.json`
 save-prefix=""
 

apps/demo/src/h5wasm/H5WasmApp.module.css → apps/demo/src/h5wasm/DropZone.module.css

@@ -1,31 +1,59 @@
 .dropZone {
+  position: relative;
   display: flex;
   min-height: 100%;
-  padding: 2rem;
   background-color: var(--primary-bg);
-  text-align: center;
-  font-size: 1.125rem;
 }
 
-.activeDropZone {
-  composes: dropZone;
+.dropZone[data-active]::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
   background-color: var(--primary);
+  opacity: 0.8;
 }
 
 .dropZone[data-disabled] {
   opacity: 0.3;
   pointer-events: none;
 }
 
+.dropIt {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 2;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 5rem;
+}
+
+.h5web {
+  flex: 1;
+  display: flex;
+  height: 100vh;
+  z-index: 0; /* STACKING CONTEXT */
+}
+
 .inner {
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 1.5rem;
+  margin: 2rem;
+  padding: 3rem 1.5rem;
   border: 3px dashed currentColor;
   border-radius: 2rem;
+  font-size: 1.125rem;
+  text-align: center;
 }
 
 .drop {
@@ -62,37 +90,6 @@
   border-top: 2px solid currentColor;
 }
 
-.urlForm {
-  display: flex;
-  align-self: stretch;
-  font-size: 1rem;
-}
-
-.urlForm > fieldset {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-.urlInput {
-  flex: 1;
-  max-width: 20rem;
-}
-
-.urlBtn {
-  composes: btnClean from global;
-  composes: ctaBtn from '../utils.module.css';
-  margin-left: 0.5rem;
-  margin-right: 0;
-}
-
-.urlLoader {
-  animation: spin 1s ease-in-out infinite;
-}
-
 .hint {
   margin: 0.5rem 0 0;
   font-size: 1rem;
@@ -102,13 +99,3 @@
 .hint[role='alert'] {
   color: crimson;
 }
-
-.dropIt {
-  font-size: 5rem;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(180deg);
-  }
-}

apps/demo/src/h5wasm/DropZone.tsx

@@ -2,20 +2,22 @@ import type { PropsWithChildren } from 'react';
 import { useCallback } from 'react';
 import { useDropzone } from 'react-dropzone';
 
-import styles from './H5WasmApp.module.css';
+import styles from './DropZone.module.css';
+import type { RemoteFile } from './models';
+import UrlForm from './UrlForm';
 
 const EXT = ['.h5', '.hdf5', '.hdf', '.nx', '.nx5', '.nexus', '.nxs', '.cxi'];
 
 interface Props {
-  onDrop: (file: File) => void;
+  onH5File: (file: File | RemoteFile) => void;
 }
 
 function DropZone(props: PropsWithChildren<Props>) {
-  const { onDrop, children } = props;
+  const { onH5File, children } = props;
 
   const onDropAccepted = useCallback(
-    ([file]: File[]) => onDrop(file),
-    [onDrop],
+    ([file]: File[]) => onH5File(file),
+    [onH5File],
   );
 
   const { getRootProps, getInputProps, open, isDragActive, fileRejections } =
@@ -28,14 +30,16 @@ function DropZone(props: PropsWithChildren<Props>) {
 
   return (
     <div
-      {...getRootProps({
-        className: isDragActive ? styles.activeDropZone : styles.dropZone,
-      })}
+      {...getRootProps({ className: styles.dropZone })}
+      data-active={isDragActive || undefined}
     >
       <input {...getInputProps()} accept={EXT.join(',')} />
-      <div className={styles.inner}>
-        {isDragActive && <p className={styles.dropIt}>Drop it!</p>}
-        <div hidden={isDragActive}>
+      {isDragActive && <p className={styles.dropIt}>Drop it!</p>}
+
+      {children ? (
+        <div className={styles.h5web}>{children}</div>
+      ) : (
+        <div className={styles.inner}>
           <p className={styles.drop}>
             <span>Drop an HDF5 file here</span>{' '}
             <button className={styles.browseBtn} type="button" onClick={open}>
@@ -47,9 +51,13 @@ function DropZone(props: PropsWithChildren<Props>) {
               Please drop a single file
             </p>
           )}
-          {children}
+
+          <p className={styles.fromUrl}>
+            You may also provide a URL if your file is hosted remotely:
+          </p>
+          <UrlForm onLoad={onH5File} />
         </div>
-      </div>
+      )}
     </div>
   );
 }

apps/demo/src/h5wasm/H5WasmApp.tsx

@@ -5,38 +5,35 @@ import { useSearch } from 'wouter';
 
 import { getFeedbackURL } from '../utils';
 import DropZone from './DropZone';
-import styles from './H5WasmApp.module.css';
 import type { RemoteFile } from './models';
 import { getPlugin } from './plugin-utils';
-import UrlForm from './UrlForm';
 
 function H5WasmApp() {
   const query = new URLSearchParams(useSearch());
   const [h5File, setH5File] = useState<File | RemoteFile>();
 
   if (!h5File) {
-    return (
-      <DropZone onDrop={setH5File}>
-        <p className={styles.fromUrl}>
-          You may also provide a URL if your file is hosted remotely:
-        </p>
-        <UrlForm onLoad={setH5File} />
-      </DropZone>
-    );
-  }
-
-  if (h5File instanceof File) {
-    return (
-      <H5WasmLocalFileProvider file={h5File} getPlugin={getPlugin}>
-        <App sidebarOpen={!query.has('wide')} getFeedbackURL={getFeedbackURL} />
-      </H5WasmLocalFileProvider>
-    );
+    return <DropZone onH5File={setH5File} />;
   }
 
   return (
-    <H5WasmBufferProvider {...h5File} getPlugin={getPlugin}>
-      <App sidebarOpen={!query.has('wide')} getFeedbackURL={getFeedbackURL} />
-    </H5WasmBufferProvider>
+    <DropZone onH5File={setH5File}>
+      {h5File instanceof File ? (
+        <H5WasmLocalFileProvider file={h5File} getPlugin={getPlugin}>
+          <App
+            sidebarOpen={!query.has('wide')}
+            getFeedbackURL={getFeedbackURL}
+          />
+        </H5WasmLocalFileProvider>
+      ) : (
+        <H5WasmBufferProvider {...h5File} getPlugin={getPlugin}>
+          <App
+            sidebarOpen={!query.has('wide')}
+            getFeedbackURL={getFeedbackURL}
+          />
+        </H5WasmBufferProvider>
+      )}
+    </DropZone>
   );
 }
 

apps/demo/src/h5wasm/UrlForm.module.css

@@ -0,0 +1,46 @@
+.urlForm {
+  display: flex;
+  align-self: stretch;
+  font-size: 1rem;
+}
+
+.urlForm > fieldset {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.urlInput {
+  flex: 1;
+  max-width: 20rem;
+}
+
+.urlBtn {
+  composes: btnClean from global;
+  composes: ctaBtn from '../utils.module.css';
+  margin-left: 0.5rem;
+  margin-right: 0;
+}
+
+.urlLoader {
+  animation: spin 1s ease-in-out infinite;
+}
+
+.hint {
+  margin: 0.5rem 0 0;
+  font-size: 1rem;
+  font-style: italic;
+}
+
+.hint[role='alert'] {
+  color: crimson;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(180deg);
+  }
+}

apps/demo/src/h5wasm/UrlForm.tsx

@@ -4,8 +4,8 @@ import { useCallback, useEffect } from 'react';
 import { FiLoader } from 'react-icons/fi';
 import { useLocation, useSearch } from 'wouter';
 
-import styles from './H5WasmApp.module.css';
 import type { RemoteFile } from './models';
+import styles from './UrlForm.module.css';
 
 interface Props {
   onLoad: (h5File: RemoteFile) => void;

package.json

@@ -58,6 +58,13 @@
         "dependencies": {
           "typescript": "5.0.3"
         }
+      },
+      "eslint-plugin-tailwindcss": {
+        "peerDependenciesMeta": {
+          "tailwindcss": {
+            "optional": true
+          }
+        }
       }
     },
     "peerDependencyRules": {

packages/h5wasm/package.json

@@ -47,7 +47,7 @@
   },
   "dependencies": {
     "comlink": "4.4.1",
-    "h5wasm": "0.7.6",
+    "h5wasm": "0.7.8",
     "nanoid": "5.0.7"
   },
   "devDependencies": {

packages/h5wasm/src/worker-utils.ts

@@ -147,7 +147,7 @@ export function parseEntity(
   }
 
   if (kind === h5wasm.H5G_TYPE) {
-    const metadata = h5wasm.get_dataset_metadata(fileId, path);
+    const metadata = h5wasm.get_datatype_metadata(fileId, path);
     const { chunks, maxshape, shape, ...rawType } = metadata; // keep `rawType` concise
 
     return {

packages/h5wasm/src/worker.ts

@@ -23,12 +23,7 @@ async function openFileBuffer(buffer: ArrayBuffer): Promise<bigint> {
 
   FS.writeFile(fileName, new Uint8Array(buffer), { flags: 'w+' });
 
-  return h5wasm.ccall(
-    'H5Fopen',
-    'bigint',
-    ['string', 'number', 'bigint'],
-    [fileName, h5wasm.H5F_ACC_RDONLY, 0n],
-  );
+  return h5wasm.open(fileName, undefined, undefined); // https://github.com/emscripten-core/emscripten/issues/22389
 }
 
 async function openLocalFile(file: File): Promise<bigint> {
@@ -41,17 +36,12 @@ async function openLocalFile(file: File): Promise<bigint> {
   const { WORKERFS } = FS.filesystems;
   WORKERFS.createNode(rootNode, fileName, WORKERFS.FILE_MODE, 0, file);
 
-  return h5wasm.ccall(
-    'H5Fopen',
-    'bigint',
-    ['string', 'number', 'bigint'],
-    [`${WORKERFS_FOLDER}/${fileName}`, h5wasm.H5F_ACC_RDONLY, 0n],
-  );
+  return h5wasm.open(`${WORKERFS_FOLDER}/${fileName}`, undefined, undefined); // https://github.com/emscripten-core/emscripten/issues/22389
 }
 
 async function closeFile(fileId: bigint): Promise<number> {
   const h5wasm = await h5wasmReady;
-  return h5wasm.ccall('H5Fclose', 'number', ['bigint'], [fileId]);
+  return h5wasm.close_file(fileId);
 }
 
 async function getEntity(

packages/shared/package.json

@@ -45,6 +45,7 @@
     "@types/ndarray-ops": "~1.2.7",
     "@types/node": "^20.12.11",
     "@types/react": "^18.3.3",
+    "d3-array": "3.2.4",
     "d3-format": "3.1.0",
     "eslint": "8.57.0",
     "eslint-config-galex": "4.5.2",