ESRF logo PaNOSC logo

H5Web: HDF5 web viewer & data visualization library

Loïc Huder

European Synchrotron Radiation Facility, Grenoble, France

Picture of Grenoble with ESRF
European flag This project has received funding from the European Union’s Horizon 2020 research and innovation programme under grant agreement No. 823852

Why an HDF5 web viewer ?

HDF5 (with NeXus) is now the standard format for acquired data at ESRF

There is a rise in the development of web apps: inherently remote, portable and interactive

👉 Need for a software to efficiently visualise and browse HDF5 file contents in the web and to be flexible for easy integration

Here comes H5Web

H5Web is a project based on React made of two packages:
Screenshot of H5Web line visualisation @h5web/lib, the data visualisation library
Screenshot of H5Web viewer @h5web/app, the viewer

@h5web/lib, data visualization library

High-level components (heatmap, line, etc.) for use in existing React apps

🖼️ GPU rendering with WebGL (via three.js and react-three-fiber)

Low-level components (canvas, zoom, etc.) for advanced use cases

@h5web/app, web viewer

Screenshot of H5Web
Click on the image to see the demo !

Demo highlights

  • Browsing and inspecting metadata
  • Displaying nD datasets as Matrix, Line and Heatmap
  • Visualisation controls: color map, limits, axis scales, etc.
  • Support for NeXus: default plot, signal interpretation, custom axes, etc.
  • Interactions: Select to zoom, help button, dataset export, tooltip

Flexible data sources

The viewer requests data via a Provider

The viewer (app) requests data to a provider (e.g. h5grove) and uses the visualisations (lib) to display data
H5Web supports several providers
  • h5grove (ESRF): based on h5py. Support for compression and external links.
  • HSDS (HDF Group): cloud-based access
  • h5wasm (NIST): HDF5 in the browser

H5Web flexible architecture allows many uses

Viewer (@h5web/app) with h5grove
Viewer (@h5web/app) with h5wasm
Visualisations (@h5web/lib)
  • Diffraction data images (braggy)
  • Beamline control indicators (daiquiri)
  • Tomography reconstructions (daiquiri-tomo, coming soon!)

We are looking for user feedback!

We are still developing new features and

you can get involved!

🤔 You tried to install the JupyterLab/VSCode extension to browse your files and want to tell us how it went?

🤔 You have a usecase for H5Web that you want to discuss?

Get in touch on Github or at h5web@esrf.fr! 📨

Thank you !

Questions ?

European flag This project has received funding from the European Union’s Horizon 2020 research and innovation programme under grant agreement No. 823852 PaNOSC logo

Backup slides

H5Web is versatile with regard to the data provenance

Can be served from a remote server Sketch showing arrows between H5Web in the browser and HSDS/h5grove solutions on remote server
From a local server (JupyterLab extension) Sketch showing arrows between H5Web in the browser and JupyterLab on the same computer
Can be read directly in the browser thanks to h5wasm! Sketch showing arrows between H5Web in the browser and H5Wasm also in the browser

H5Grove, Python utilities for serving HDF5 data/metadata

Challenges

  • Serving very large datasets and HDF5 file structures efficiently through the web
  • Dealing with compressed dataset and external/soft links

How H5Grove helps

  • h5py to read HDF5 files
  • hdf5plugin to deal with compressed datasets
  • Binary encoding for efficient data transfers
  • External/soft links special handling
  • Flexible architecture not tied to a specific Python web frameworks (Flask, Tornado, etc.) … but helpers available for these frameworks
H5Web ecosystem