npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@h5web/h5wasm

v13.0.0

Published

H5Web providers based on H5Wasm

Downloads

362

Readme

H5Web's H5Wasm Provider

Demo Version

H5Web is a collection of React components to visualize and explore data. It consists of two main packages:

@h5web/app exposes the HDF5 viewer component App, as well as the following built-in data providers:

  • H5GroveProvider for use with H5Grove server implementations, like jupyterlab-h5web;
  • HsdsProvider for use with HSDS;
  • MockProvider for testing purposes.

This package, @h5web/h5wasm, provides two additional data providers that can read HDF5 files straight in the browser thanks to the h5wasm library: H5WasmLocalFileProvider and H5WasmBufferProvider.

Check out this code sandbox for a demonstration of how to set up @h5web/h5wasm and use H5WasmLocalFileProvider.

Prerequisites

The react dependency must be installed in your project. Note that as of version 10, @h5web/h5wasm requires React 18.

This package supports TypeScript out of the box without the need to install a separate @types/ package.

Getting started 🚀

npm install @h5web/app @h5web/h5wasm
import '@h5web/app/dist/styles.css';

import { useState } from 'react';
import { App } from '@h5web/app';
import { H5WasmLocalFileProvider } from '@h5web/h5wasm';

function MyApp() {
  const [file, setFile] = useState<File>();

  if (!file) {
    return (
      <input
        aria-label="Pick HDF5 file"
        type="file"
        accept=".h5"
        onChange={(evt) => setFile(evt.target.files?.[0])}
      />
    );
  }

  return (
    <div style={{ height: '100vh' }}>
      <H5WasmLocalFileProvider file={file}>
        <App />
      </H5WasmLocalFileProvider>
    </div>
  );
}

export default MyApp;

If your bundler supports it (e.g. webpack 5), you may be able to shorten the stylesheet import path as follows:

import '@h5web/app/styles.css';

Caveats

Requires BigInt support

The h5wasm library uses the BigInt 123n notation, which is challenging to polyfill. This means that:

External links are not resolved

The provider doesn't know how to resolve links to groups and datasets contained in other HDF5 files. Such links will appear as unresolved entities in the viewer.

Buffer size limit with H5WasmBufferProvider

Since H5WasmBufferProvider requires the entire HDF5 file to be passed as a single ArrayBuffer, there's a limit to how big a file you can load. This limit depends on your browser, on your operating system, and on your machine's resources.

API reference

H5WasmLocalFileProvider

  • file: File (required) - local HDF5 File object
<H5WasmLocalFileProvider file={file}>
  <App />
</H5WasmLocalFileProvider>

file: File (required)

Local HDF5 File object obtained from an HTML file input (i.e. <input type="file">).

getExportURL?: (...args) => URL | (() => Promise<URL | Blob>) | undefined (optional)

See H5GroveProvider#getExportURL.

H5WasmLocalFileProvider does not provide a fallback implementation of getExportURL at this time, so if you don't provide your own, the export menu will remain disabled in the toolbar.

getPlugin?: (name: Plugin) => Promise<ArrayBuffer | undefined>

If provided, this aysnchronous function is invoked when loading a compressed dataset. It receives the name of a compression plugin as parameter and should return:

  • the compression plugin's source file as ArrayBuffer,
  • or undefined if the plugin is not available.

@h5web/h5wasm is capable of identifying and requesting the plugins supported by the [email protected] package: blosc, bz2, lz4, lzf, szf, zfp, zstd.

A typical implementation of getPlugin in a bundled front-end application might look like this:

import type { Plugin } from '@h5web/h5wasm';

/*
 * Import the plugins' source files as static assets (i.e. as URLs).
 * The exact syntax may vary depending on your bundler (Vite, webpack ...)
 * and may require extra configuration/typing.
 */
import blosc from 'h5wasm-plugins/plugins/libH5Zblosc.so';
import bz2 from 'h5wasm-plugins/plugins/libH5Zbz2.so';
// ...

const PLUGINS: Record<Plugin, string> = {
  [Plugin.Blosc]: blosc,
  [Plugin.BZIP2]: bz2,
  // ...
};

async function getPlugin(name: Plugin): Promise<ArrayBuffer | undefined> {
  if (!PLUGINS[name]) {
    return undefined;
  }

  const response = await fetch(PLUGINS[name]);
  return response.arrayBuffer();
}

resetKeys?: unknown[] (optional)

See H5GroveProvider#resetKeys.

H5WasmBufferProvider

  • filename: string (required) - the name of the file
  • buffer: ArrayBuffer (required) - the content of the file
<H5WasmBufferProvider filename="foo.h5" buffer={buffer}>
  <App />
</H5WasmBufferProvider>

filename: string (required)

The name of the file to display in the UI.

buffer: ArrayBuffer (required)

The entire file's content as a binary buffer.

getExportURL?: (...args) => URL | (() => Promise<URL | Blob>) | undefined (optional)

See H5WasmLocalFileProvider#getExportURL

getPlugin?: (name: Plugin) => Promise<ArrayBuffer | undefined>

See H5WasmLocalFileProvider#getPlugin