1D multi axis plot

[giuserive]

Hello everyone,
I am having some problems with creating a plot in a react application based on myHDF5, but reworked.
I explain what I would like to accomplish:

• Create a temporary .h5 file with a function, passing file name and an array as input,
• Take this file and render it into a plot
• This file should contain a single entry

It would be ideal to create a plot that has only 3 axes of abscissae populated with values, like this or similar:

But even if this is not possible, it would also be fine to create 3 separate plots with only one entry.

The function that I have made is this (with h5wasm lib):

async function createH5FileWithDataset(
    fileName: string,
    groupName: string,
    datasetName: string,
    arrayData: Float32Array | Int32Array | Uint8Array,
  ) {
    try {


      initializeH5Wasm();

      let new_file = new h5wasm.File(fileName + '.h5', 'w');
      console.log('file creato: ', new_file);


      const group = new_file.create_group(groupName);
      if (!group) {
        console.error(
          `Il gruppo "${groupName}" non è stato creato correttamente.`,
        );
        return;
      }
      console.log(`Gruppo "${groupName}" creato con successo.`, group);


      const fetchedGroup = new_file.get(groupName) as Group;
      if (!fetchedGroup) {
        console.error(`Il gruppo "${groupName}" non è accessibile.`);
        return;
      }
      console.log(
        `Gruppo "${groupName}" recuperato con successo.`,
        fetchedGroup,
      );

      fetchedGroup.create_dataset({
        name: datasetName,
        data: arrayData,
      });

      var y = new_file.get(groupName + '/' + datasetName) as Dataset;
      console.log('new dataset created ', y.value);
      new_file.close();
      console.log('new file closed ', new_file);


      const fileContent = FS!.readFile(fileName + '.h5');
      console.log(`Contenuto del file "${fileName}.h5" letto.`);


      const blob = new Blob([fileContent], {
        type: 'application/octet-stream',
      });


      const url = URL.createObjectURL(blob);
      return url;
    } catch (error) {
      console.error('Errore durante la creazione del file HDF5:', error);
      return '';
    }
  }

But it retrieve always:

Can anyone help me with this?
Sorry for my bad English

[axelboc]

Hi @giuserive, please correct me if I misunderstood but from what I gather, you want:

1. to plot a curve with three custom abscissa axes;
2. to design an HDF5 file that displays the plot above in H5Web;
3. to generate that HDF5 file with h5wasm and load it into the viewer.

Okay so here are some information that may help guide you:

• H5Web includes a visualization called NX Line that supports plotting a 1D curve with custom abscissa axis values. This visualization is based on the NeXus format; it requires creating an HDF5 file with an NXdata group that contains a "signal" dataset, and an axis dataset. You can see an example of this in the mock demo at path /nexus_entry/log_spectrum (make sure to inspect the attributes of the log_spectrum group — the ones that matter are NX_class, signal and axes).
• H5Web does not currently support plots with multiple abscissa axes (or ordinates for that matter). What you can do, however, is design an HDF5 file with three NXdata groups, one for each custom axis dataset. Each group must have the same signal dataset, but you can use soft links to avoid duplicating your main data array: the first group's signal dataset can be the real HDF5 dataset and the second and third groups' signals can be soft links to the first group's signal dataset.
• You seem to have figured out how to use h5wasm to generate HDF5 files, which is great. I'm not 100% clear, however, how you integrate the H5Web viewer into your application. You mention myHDF5 but that's a standalone application, which is not really meant to be integrated into a broader application. Instead, I'd recommend using the viewer package itself, @h5web/app (more specifically the main viewer component, App) together with the @h5web/h5wasm package (more specifically the H5WasmBufferProvider).

[loichuder]

To add on @axelboc last point, it is not clear for me if you already have data and are creating a "temporary .h5" only to have a plot or if you truly need to work with HDF5 files.

Because you can plot any data (i.e. not HDF5) by using the low-level components from @h5web/lib : https://h5web-docs.panosc.eu/?path=/docs/building-blocks-line--docs

[giuserive]

Thank you for the guidance!

The purpose of my software is as follows:

• Load one or more files.
• Display the plots of all the files at the same time (for convenience, one below the other).
• At the end of the displayed plots, I need to implement those three custom abscissa axes as a single reference for all the previously plotted data (e.g., UTC/LT as a reference axis for all the displayed data).

Actually, it would also be fine to show three plots with a single axis. The fundamental requirement is that all three plots must be visible at the same time.

I create the temporary.h5 file to provide the necessary values for this axis, as I don't have them ready beforehand. Instead, I need to compute them at runtime based on the H5 files uploaded by the user.

My initial idea was to create a temporary .h5 file to pass as input to the function that generates the plots because it seemed like the most straightforward solution. However, I’m also fine with directly producing a plot like the others and appending it at the end.

The issue is that I haven't figured out which method or function to call to directly create by code a plot of this type(with sidebar):

I would really appreciate your help with this! @axelboc and @loichuder

[axelboc]

To plot three 1D curves together with a custom axis, your temporary.h5 file should contain one HDF5 group with four HDF5 datasets:

• one main "signal" dataset
• two "auxiliary signal" datasets
• one abscissa axis dataset

The group should also have 4 attributes:

• NX_class="NXdata"
• signal="<name-of-your-signal-dataset>"
• auxiliary_signals=["<name-of-first-aux-dataset>", "name-of-second-aux-dataset>"]
• axes=[".", "<name-of-axis-dataset>"]

You can see an example of this structure in the mock demo, at /nexus_entry/spectrum_with_aux (the signal is 2D but it works with 1D as well of course):

---

The issue is that I haven't figured out which method or function to call to directly create by code a plot of this type(with sidebar):

H5Web is a library of React components organised in three packages installable via NPM. Your screenshot shows the main H5Web viewer, which is available as a component called App in the @h5web/app package.

To provide data to the App viewer, you must wrap it with a "provider" component. In your case, you probably want the H5WasmBufferProvider from @h5web/h5wasm:

<H5WasmBufferProvider filename="temporary.h5" buffer={buffer}>
  <App />
</H5WasmBufferProvider>

This is what myHDF5 does internally, in addition to many other things, like providing a way to select/drop multiple files and listing them in a sidebar. When you select a "remote" file in the sidebar, it downloads it and passes the buffer to H5WasmBufferProvider.

If you're working off myHDF5 and customising it to your needs, after you generate temporary.h5, you should somehow open it is a remote file, with the blob URL as resolvedUrl.

[giuserive]

Hi @axelboc,
I tried the solution you suggested, and I appreciate it, but it’s not exactly what I was looking for. Thinking about it, another solution might work for me as well: a single line with points, or even just points, which can be easily obtained with a one-dimensional chart with a fixed ordinate. The only thing I would need to do is add labels to each point. A result like this:

Or this:

Do you think it’s possible?

As always, thanks for your help!

[axelboc]

Currently, custom axes can only be numeric (because of the log/symlog/... scales). We discussed supporting categorical axes in #1441 — if I recall, the easiest path forward was to maybe support showing custom abscissa labels in the tooltip.