Configure @h5web/app

[wiwski]

Hi,

I am integrating @h5web/app into our website to visualize hdf5 files in the browser. It work very well, thank you for the good work !

I was just wondering if it is possible to configure how the app is rendered. Precisely which axis are selected by default. For example, in the following screenshot, X axis should be D0 and Y axis D1.
Another thing would be to have a hook to select dynamically which path to display after doing an initial fetch of the hdf5 structure.
I am not sure if bother of these features are available with the h5web app.

I guess that it would be better to use @h5web/lib to build our custom application, and we will probably do this in the near future, but having this package is a real time saver for now and it would be nice to have a way to configure some elements.

[axelboc]

Hi @wiwski 👋

While this is probably not what you're after, since it would require modifying the HDF5 files, I'll start by pointing out that we do support the two features you mention through a convention called NeXus (more specifically the NXdata class). You can take a look at the examples in the mock demo (nexus_entry group) to understand the structure and attributes involved (NX_class, default, signal, axes, etc.)

Basically, the design philosophy of the H5Web viewer (@h5web/app) is that HDF5 files should be self-descriptive. If that's not the case, then we typically recommend looking at @h5web/lib, as you've already guessed. That said, things are never black and white, and the needs that you describe are totally legitimate; the viewer does a whole lot of things that one does not want to have to implement again from scratch...

• Concerning the path, you're in luck, the App component already has a prop called initialPath that lets you specify which path to select on first render. Does this do the trick?
• Concerning the default axis mapping, there's no such prop for the moment. For reference, the current behaviour of assigning the last two dimensions to y and x respectively comes from the useDimMappingState hook. Providing a way to configure this behaviour via a prop on the App component, is not out of the question. We could call it dimMappingStrategy, for instance.

[wiwski]

Hi @axelboc,

Thank you for your detailed answer.
I didn't know about NeXus, it might be something we want to implement indeed. I am going to read the documentation to see if it can fit in our specs.

Regarding the other points :

• Not sure we can use initialPath as we would compute that value from the HDF5 file content and I don't see a hook / callback to do it when receiving the data.
• I might implement dimMappingStrategy, I could make a PR if you're insterested.

[axelboc]

• I might implement dimMappingStrategy, I could make a PR if you're interested.

For sure, thanks! 😊

So something like <App dimMappingStrategy="first" /> (with the default strategy being "last" and the typing being type DimMappingStrategy = 'first' | 'last';). I don't think we need anything more complicated, at least for your use case, right?

• Not sure we can use initialPath as we would compute that value from the HDF5 file content and I don't see a hook / callback to do it when receiving the data.

I think you could try something like this:

<H5WasmProvider filename="foo.h5" buffer={buffer}>
  <Suspense fallback={<>Loading...</>}>
    <MyApp />
  </Suspense>
</H5WasmProvider>

function MyApp() {
  const { entitiesStore, attrValuesStore } = useDataContext(); // do whatever you want with those stores to find the best initial path
  
  const rootGroup = entitiesStore.get('/');
  const fooEntity = rootGroup.children.find(child => child.name === 'foo');
  const initialPath = fooEntity?.path;
 
  return <App initialPath={initialPath} />;
}

This use of DataContext is explained a little bit in the README of @h5web/app. Note that it works regardless of the data provider that is used (which I assume is H5WasmProvider in your case).

[wiwski]

Awesome, I am going to try this, thank you !