H5Web

H5Web investigation

H5Web is a web-based HDF5 file viewer. It allows you to visualise HDF5 files without needing to download them first, for example. HDF5 is a file storage and organisation format designed for large amounts of data. DataGateway will be able to access NeXus files, which are fully valid HDF5 files, and "can be read by a large number of applications without any further modification".

Demo App

https://h5web.panosc.eu/ is a live deployment of the demo app (the app that runs when you clone and run H5Web).

The different providers can be accessed from the demo app by changing the URL: The default path "/" takes you to the H5Grove provider, "/mock" takes you to the mock provider, and "/hsds" takes you to the HSDS provider with configuration as set in the local env file.

The left pane contains a breakdown of the structure of a file, called the Explorer, and the right pane has the visualisation or data.

Providers

H5Web has three Providers.

1. A mock provider - contains mock data read from a JSON file
2. A H5Grove provider for use with H5Grove
3. A HSDS Provider - given a URL, username, password and filepath, it will access HSDS object-based storage.

Use within DataGateway

The initial idea is to have a second action button (alongside 'download') to 'explore' NeXus files. This could open up a popup window or a new tab with the file viewed in H5Web. This would likely require extracting H5Web as a plugin within DataGateway and designing a new Provider. Currently, to choose a provider to run you need to call the App component wrapped in the desired provider. With React Router the new button could cause the App to open on the new path.

Required backend changes

In order to use H5Web, either one of the existing providers must be used or a new one must be created. Creating a new one requires providing implementations for getEntity, getValue and getAttrValues found here. Currently the only way to get data from one of these .nxs files is using the IDS getData endpoint which returns the entire contents of the file. This shouldn't be used directly on DataGateway due to the structure of HDF5 as it would then require interpreting the binary data on the client's browser. As a result either IDS needs to have support for parsing HDF5 files, or have some intermediary service perhaps utilising H5Grove.

Notes on using @h5web/app

At the time of writing this @h5web/app requires React 17 so this feature would preferably be implemented when DataGateway and SciGateway are also upgraded to React 17. During testing using the mock provider, the required styles were not applied on SciGateway. These come from using

import '@h5web/app/dist/style-lib.css';
import '@h5web/app/dist/style.css';

in the plugin's index.tsx, which then needed to added to SciGateway as well. Also the whole website including dev tools froze when using

    <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react@17/umd/react-dom.production.min.js"></script>

in the index.html but worked when replaced with react.development.js.