Manipulate box that displays on mouse hover

[pedro-benetton]

Hi there! I am currently working on developing a web app that uses H5GroveProvider. I would like to know if it is possible to add more info to the box that indicates intensity and (X,Y) coordinates (as shown in the image).
In other words, I would like to display a 4th value in this box. This value would vary with X and Y as well.

[axelboc]

Hmm, I don't believe it's possible at the moment.

With NeXus, you can declare auxiliary signals (cf. /nexus_entry/image_with_aux in the mock demo), but those are currently displayed as radio boxes above the heatmap; they aren't used by the toolip at all.

I guess what you want is the same behaviour as with the Line visualization, where the tooltip does show auxiliary values:

We haven't done this for the Heatmap because it seemed a bit wasteful and potentially slow with some providers to fetch all the signals just to show their values in the tootlip. On the Line visualization, the signals are actually displayed on the plot, so it made more sense.

We could revisit this decision, though.

[pedro-benetton]

I understand.

Since this extra value depends only on x and y, wouldn't it be reasonable for me to just add a function to the Tooltip rendering file and run the build again? I tried a lot to search the imports, and I think the file I'm looking for is apps/storybook/src/TiledHeatmapMesh/utils.tsx but I'm not 100% sure. It's not the best solution, but would cover my specific case.

If you have any other suggestions on how to work around this, I would really appreciate as well.

[axelboc]

I have to start with the disclaimer that H5Web is meant to be consumed through the @h5web/app and @h5web/lib NPM packages. Copying or forking the codebase is not a great idea, as at some point, some of our changes will necessarily conflict with your own changes, which will make it hard for you to keep your copy/fork up to date.

The HeatmapVis component in the @h5web/lib package (packages/lib/src/vis/heatmap/HeatmapVis.tsx) does provide the feature you're looking for. Ideally, you would want to install @h5web/lib in your app and import HeatmapVis from it; then you would render your own heatmap using the renderTooltip prop in order to render a custom tooltip.

That being said, from your screenshot above, you need the full viewer (with the explorer sidebar, metadata inspector, dimension mapping/slicing, etc.), which would typically require installing the @h5web/app package. Unfortunately, with this method, there's no way to access and customise the code that renders HeatmapVis (in order to provide your own tooltip via renderTooltip).

In #1595, I've explored some ways to make @h5web/app more customisable. Your use case fits into this investigation but this is definitely long-term work, sorry 😟

[pedro-benetton]

Yes, that is how I'm using them. I think I understand your idea and I will try to dive a little deeper in the next days, as well as look for other alternatives.

I also found that https://www.esrf.fr/braggy is an application that uses h5web and does exactly what I'm looking for, I will try to reach them as well.

Thanks a lot for the explanations!

[axelboc]

I was involved in the development of Braggy myself. The source code should be public, I think. It's indeed a perfect example of a custom viewer built using the @h5web/lib package; it uses the HeatmapVis obviously, as well as the toolbar components. It doesn't use any of the providers from @h5web/app, though, but you could very well use H5GroveProvider. I show an example of how that would work here: #1502 (reply in thread)

Let me know if you get stuck 😉