Hide the sidebar and the toolbar in h5web/app in react permanently.

[Sneha-pk]

Is your feature request related to a problem?

I am trying to visualize h5 files only and need the slider and the heatmap. I have tried achieving the same with h5web/lib (HeatMapMesh) but the image showing does not match and not clear enough. Ability to hide the extra toolbars/sidebars would be helpful.

[axelboc]

Currently you can hide the explorer sidebar on first render with sidebarOpen={false} but the user can re-open it if they wish to.

We do want to eventually export more components in @h5web/appto allow building custom viewers, like Visualizer (which is the right-hand part of the viewer, without the explorer) and the individual visualization containers (HeatmapVisContainer, LineVisContainer, etc.).

Thanks for the request 👍

[axelboc]

Progress report: I was able to prototype two custom apps to check feasibility. These prototypes work only inside the monorepo since the required components are not currently exported publicly in @h5web/app.

Visualizer

This example app uses the Visualizer component (combined with VisConfigProvider) instead of App. The Visualizer is the component that determines which visualisations are capable of visualizing an entity at a given path, and that renders those visualisations. It includes the following UI elements:

• the vis tabs (one tab per visualisation supported by the selected entity),
• the currently selected visualisation,
• the toolbar that comes with this visualisation, and
• the dimension mapper (with the sliders).

The Visualizer includes all the visualisations available in H5Web (Heatmap, Line, RGB, NX Heatmap, NX Scatter, etc.), so it basically is just the viewer (App) but without the explorer/search sidebar, the breadcrumbs bar, and the metadata inspector (which is rendered when "Inspect" is selected in the breadcrumbs bar).

function CustomApp() {
  return (
    <MockProvider>
      <VisConfigProvider>
        <div style={{ display: 'flex', height: '100%' }}>
          <Suspense fallback="Loading...">
            <Visualizer path="/nD_datasets/twoD" />
          </Suspense>
        </div>
      </VisConfigProvider>
    </MockProvider>
  );
}

HeatmapVisContainer

This example app bypasses Visualizer and renders a specific visualisation container directly instead. This is useful if you already know how you want to visualise a dataset. The difference with rendering HeatmapVis from @h5web/lib is that HeatmapVisContainer renders the dimension mapper/slicer, requests the selected dataset slice from the provider, and takes care of all the boilerplate required to prepare the data for visualisation (transposition, domain computation, etc.)

HeatmapVisContainer also reads the heatmap config provided through VisConfigProvider and renders the toolbar. However, it is possible to not render the toolbar (and therefore stick with the initial config values) by simply omitting the toolbarContainer prop:

function CustomApp() {
  return (
    <MockProvider>
      <VisConfigProvider>
        <div style={{ display: 'flex', height: '100%' }}>
          <Suspense fallback="Loading...">
            <CustomVis />
          </Suspense>
        </div>
      </VisConfigProvider>
    </MockProvider>
  );
}

function CustomVis() {
  const { entitiesStore } = useDataContext();
  const twoD = entitiesStore.get('/nD_datasets/twoD');

  return <HeatmapVisContainer entity={twoD} />;
}

---

Overall, this is all very promising. However, I would like to investigate things further and provide a more adequate API, where one could:

• provide their own visualisation definitions to Visualizer (or remove the ones they don't care about);
• render custom toolbars in the containers (or even no toolbar at all but without losing the ability to configure the visualisations).

[axelboc]

Hi @Sneha-pk 👋

By any chance, could you please share a bit more information about your use case? What the application you're developing is for, which data provider you're working with, what your HDF5 files look like, etc.? I'm hoping this will help guide me towards a solution. The more information you can give me, the better.