Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Sneha-pk opened this issue Mar 20, 2024 · 3 comments
Open

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

Sneha-pk opened this issue Mar 20, 2024 · 3 comments
Labels
enhancement New feature or request

Comments

@Sneha-pk
Copy link

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.

@Sneha-pk Sneha-pk added the enhancement New feature or request label Mar 20, 2024
@axelboc
Copy link
Contributor

axelboc commented Mar 20, 2024

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
Copy link
Contributor

axelboc commented Mar 28, 2024

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
Copy link
Contributor

axelboc commented Jun 20, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants