Addition of H5Web viewer to preview HDF5 files

[JR-1991]

What this PR does / why we need it:

Following up from issue https://github.com/IQSS/dataverse/issues/9442 and chats with @pdurbin and @atrisovic, this pull request adds a previewer based on h5web to display HDF5 files. It offers a great overview of the internal file structure and provides ways to display metadata as well as plots of array data (line, heatmaps and images). They host many nice examples on their website.

This viewer has been adopted from the H5Wasm example written in React and modified to fit the external tools interface. The React source code has been built using Vite and the resulting HTML/JS/CSS subsequently added here.

How it works:

One needs to provide a file url and name as query parameters to make it work. Here is an example:

https://nice.hdf5.previewer/?url=https://my.dataverse.com/api/access/datafile/000&name=filename.hdf5

Feel free to test the viewer here and modify the URL parameters to try different files. The source hosted on the site is the same as in this PR except the preview.css styling and respective div tags have been stripped for visual purposes.

Additional documentation:

• H5Web supports HDF5 files of up to 2gb
• I adjusted the styling to be neutral gray as opposed to the default green-ish style

If necessary, I can also add the source code and build script here, such that future modifications can be made. The added JS and CSS files are far from readable and hardly modifiable 😵

[pdurbin]

@JR-1991 this amazing!

A couple quick notes:

• name (of a file) is not one of the supported reserved words Dataverse knows how to pass so if we definitely need this, we should create an issue in the main Dataverse repo. For now, using the file id, we can probably query Dataverse for the file name.
• For url we can easily pass url=https://my.dataverse.com using the {siteUrl} reserved word and we can separately pass fileid=1038 (or fileId=1038 if you prefer) but we can't easily pass a combination like url=https://my.dataverse.com/api/access/datafile/000. Perhaps we can construct the URL from the two parts (siteUrl and fileId) inside hdf5.js?

Also, like I said at https://dataverse.zulipchat.com/#narrow/stream/376593-geospatial/topic/plot.20arrays.20from.20HDF5/near/350174065 we should check with @qqmyers about where the source should go. 😄

Anyway, I hope the details above can be easily solved. Thanks for all the work on this!!! 🎉 🚀 ❤️

[pdurbin]

It works! Great job, @JR-1991!

From https://dev1.dataverse.org/file.xhtml?fileId=1038&version=2.0

Full screen at https://dev1.dataverse.org/dataexplore/dataverse-previewers/previewers/betatest/HDF5Preview.html?fileid=1038&siteUrl=https://dev1.dataverse.org&datasetid=1036&datasetversion=2.0&locale=en

[JR-1991]

Great! Thanks for testing 🎉

@pdurbin do you think the header and blue box are necessary?

[JR-1991]

Spotted #25 and at the moment the build pushed to this PR does not implement fetching via API-Token. The source is updated though and needs to be built and pushed to this PR. This is just a reminder to not merge until the push has happened.

[pdurbin]

@JR-1991 hi!

I just tested this PR again and it seems to working well!

I see your note above about how you still want to add some code to handle drafts so I didn't test that.

I also made a small PR against this PR to document the curl commands and give you a well deserved shout out:

• https://github.com/JR-1991/dataverse-previewers/pull/1

Finally, as to the question about the blue boxes, ideally, we'd want no blue boxes (and no tool name) when the previewer is embedded within an iframe in the Preview tab, like this:

If this is an easy change, please go ahead!

A harder change might be to show info about the dataset (in the blue box) when the tool has been opened in its own window. I'll show a side by side screenshot below of the NcML previewer, which has this. However, if this is too much, I'd say we can merge it (after the API token fix it sounds like you'd like to get in) and worry about the dataset info later.

We've also been talking at https://dataverse.zulipchat.com/#narrow/stream/376593-geospatial/topic/plot.20arrays.20from.20HDF5 and we can discuss more here or there or anywhere. 😄 Thanks again!

[pdurbin]

Closing in favor of Jan's newer PR:

• 35

Discussed here: https://dataverse.zulipchat.com/#narrow/stream/376593-geospatial/topic/plot.20arrays.20from.20HDF5/near/365654679