Add H5Web to list of tools to view NeXus files

[prjemian]

Note H5Web, a new extension for Microsoft VisualStudio Code Editor to browse and visualize HDF5 files

Add it to this page and section: https://manual.nexusformat.org/utilities.html#hdf-tools

[prjemian]

Note also h5wasm, a web site allowing one to view HDF5 content from a URL such as the simple_example_basic.nexus.hdf5 example from the NeXus manual. Try this URL:

https://h5web.panosc.eu/h5wasm?url=https%3A%2F%2Fmanual.nexusformat.org%2F_downloads%2Fb9b76d34af0f606d0e0958a234054608%2Fsimple_example_basic.nexus.hdf5

[axelboc]

Hi @prjemian, I just came across #1189 and, as a core developer of H5Web, I wanted to clarify that H5Web and h5wasm are two distinct projects.

H5Web is a web toolkit for exploring and visualising HDF5 files and, more generally, for visualizing data. It is based on React and WebGL.

H5Web's viewer component (available via npm package @h5web/app) indeed supports some NeXus features including plotting NXdata groups (signal, axis, errors, etc.) and finding a default plot. It can pull hierarchical data from various sources, including:

• back-end solutions for serving HDF5 files through the web, like h5grove or HSDS;
• h5wasm, a WebAssembly port of the HDF5 C library, which allows reading and writing HDF5 files from JavaScript (i.e. no need for a back-end server at all).

H5Web's demo site, including the H5WasmProvider demo, is just to show these three "data providers" in action. I recommend you instead point to the following projects that make use of H5Web:

• the VSCode extension, which you already point to, and which uses h5wasm under the hood;
• the JupyterLab extension.

For your information, we're currently working on a stand-alone web application similar to https://h5web.panosc.eu/h5wasm, but with more features, and a more stable, production-grade deployment environment. I'll report back here when it's ready for prime-time.

[prjemian]

@axelboc This is great! Thanks for the contribution and thanks for the new tools!

[prjemian]

@axelboc , @loichuder, @woutdenolf : There's a lot of information here. The point of the HDF tools section is to identify tools of interest to the community with terse, yet sufficient information to attract attention and point to references.

As I understand, the big tool is H5Web, which uses tools (h5grove, HSDS, and w5wasm). Under the H5Web item, we'd like to point to the tools of interest, such as the extensions for VSCode and JupyterLab, and the H5WasmProvider demo.

Let's work out here how the text would appear in this part of the NeXus manual. Here's a straw suggestion. I look forward to your revisions:

---

H5Web (https://github.com/silx-kit/h5web):

H5Web is a toolkit for exploring and visualising HDF5 files and, more generally, for visualizing data. It is based on React and WebGL. These projects make use of H5Web:

• VSCode extension: vscode-w5web for Microsoft Visual Studio Code Editor
• JupyterLab extension: jupyterlab-h5web
• h5wasm, a WebAssembly port of the HDF5 C library, which allows reading and writing HDF5 files from JavaScript (i.e. no need for a back-end server at all).
• On-line visualization with simple_example_basic.nexus.hdf5
• H5Web demonstration site

[prjemian]

Here's a screen view of how that would appear:

[axelboc]

Nice, yeah this is great! I would maybe just either condense or reorder/reword the last two bullet points:

• H5Web demonstration site
• h5wasm demo with a NeXus file: simple_example_basic.nexus.hdf5

Not a big deal either way, your version is fine if you prefer to keep it. 😉

[loichuder]

Thanks for the ping :ping_pong:

Looks good to me except for the h5wasm bullet point in the list. I would skip it as it feels wrong to me to say that h5wasm makes use of H5Web (it is rather the other way round: H5Web makes use of h5wasm for several things like the VSCode extension).

Other than that, great summary :+1:

[axelboc]

Yeah you're right, h5wasm would make more sense in its own section. @prjemian, maybe you can put it before the H5Web section so you can still mention h5wasm in the bullet point with the NeXus file demo to show the connection between the two projects?

[prjemian]

h5wasm first, then H5Web. Also, the on-line visualization demo should be grouped with h5wasm, which is separated from H5Web? How about this?

[prjemian]

Note that I inserted h5wasm into the description of H5Web.

It is based on h5wasm, React, and WebGL.
               ^^^^^^^^

[prjemian]

WebAssembly: https://webassembly.org/ ?

[loichuder]

Looks better with a separate section for h5wasm !

Here are my suggestions:

• The on-line visualization demo is made with H5Web (with h5wasm under the hood) so I think it is best to leave it in H5Web. h5wasm simply needs to be mentioned. Something like:

  On-line visualization with NeXus file (using `h5wasm): link

  Note that I inserted h5wasm into the description of H5Web.

• I don't think this is right. h5wasm is not per se a building block of the project as is React or WebGL. Having

  It is based on React, and WebGL.

is fine

---

Note that there is a typo in vscode-h5web

---

WebAssembly: https://webassembly.org/ ?

Yep !

Thanks for bearing with this :wink:

[prjemian]

I like this much better. Thanks for the contributions!

[axelboc]

Thank you for adding H5Web to the list!