Tooltip not convinient #1110

vallsv · 2022-05-10T09:58:45Z

vallsv
May 10, 2022
Maintainer

The actual tooltip is not convenient for my use case.

It is constrained inside the plot, you can see the tooltip is cut
it moves from right to left to optimize the location in the plot ; but i really don't want blinking of the tooltip content, the screen is not limited to a widget.

Ideally i would prefer to have mouse event (enter, move, leave), and a way to handle the tooltip container so what i can reuse the tooltip from the react bootstrap framework.

axelboc · 2022-05-10T10:59:55Z

axelboc
May 10, 2022
Maintainer

I've activated the discussions and converted this issue into a discussion as it sounds like you're looking for a way to implement your own tooltip.

You'll need to render a ThreeJS mesh inside the visualization that takes up the entire canvas, like we do in https://github.com/silx-kit/h5web/blob/main/packages/lib/src/vis/shared/TooltipMesh.tsx. Then, you can add event listeners to the mesh and use @visx/tooltip (or your own React states) to manage the state of the tooltip (visible/hidden, position, data).

Once you have the state of the tooltip, it is up to you to render the actual tooltip. You'll just have to render it inside an Html element (since the tooltip is made of HTML elements and not R3F objects). In TooltipOverlay, we use Overlay, which uses Html internally, but this is because we want the tooltip to be bound to the canvas, so we render it inside a container that takes up the entire canvas. If you don't need that, then Html is enough.

Now the slightly tricky bit is the overflow: Html renders its children inside a div and, by default, appends this div to the R3F canvas' wrapper div element, r3fRoot. However, this element hides its overflow, so if you don't want your tooltip to be cropped, you'll have to tell Html to render in r3fRoot's parent div: canvasWrapper. Fortunately, this is exactly what we do in AxisSystem:

h5web/packages/lib/src/vis/shared/AxisSystem.tsx

Line 31 in 13a6f00

.

6 replies

vallsv May 10, 2022
Maintainer Author

BTW it's not urgent, i can find my way with something good enough for now.

axelboc May 10, 2022
Maintainer

Ideally i would prefer to have mouse event (enter, move, leave), and a way to handle the tooltip container so what i can reuse the tooltip from the react bootstrap framework.

If you want the above, then TooltipMesh is what you need to re-implement in daiquiri. In other words, it is the example ^^

We register R3F events on the mesh here: https://github.com/silx-kit/h5web/blob/main/packages/lib/src/vis/shared/TooltipMesh.tsx#L82.

We convert the world coordinates to data coordinates here: https://github.com/silx-kit/h5web/blob/main/packages/lib/src/vis/shared/TooltipMesh.tsx#L44

vallsv May 11, 2022
Maintainer Author

I am not sure i understand what you mean.

I am already using TooltipMesh. You propose me to copy paste this module into Daiquiri? Is everything inside is public?

To me it's an ok solution for a very short term, but such code have to be provided by h5web.
For example the h5web Selection API sounds like more convenient to use.

Furthermore could it be possible to provide mouse callbacks anyway?
That's something we will need to have at some point anyway. For example here is a crosshair propagated to side plots.

axelboc May 11, 2022
Maintainer

At its core, the H5Web library sets up a ThreeJS canvas with React Three Fiber and provides an axis system with some scales to go from the ThreeJS world space to the data space and back. React Three Fiber and our axis system are already powerful abstractions that hugely simplify dealing with ThreeJS and WebGL!

The components we've built so far in the H5Web library, like TooltipMesh, respond to the needs of the H5Web viewer, @h5web/app, so they are not necessarily the right abstractions for you to use in daiquiri, as you've pointed out. Perhaps some of our components will evolve to cover daiquiri's needs eventually, but the most productive way to get there is to first prototype something in daiquiri, and our job is to help you with doing just that. This is what Thomas has been doing, for instance, with the ROIs or synchronisation of the camera between two plots. Once you have something that roughly covers your needs, we can discuss bringing some parts of it into H5Web so it can be maintained and improved there and benefit future projects, and so your code in daiquiri can be simplified.

Obviously our axis system abstraction is sometimes not sufficient. This is the case when it comes to drawing SVG elements in data space on top of the canvas, for instance, but we're currently working on a solution to this problem. When it comes to the tooltip, however, React Three Fiber, our axis system utilities, and our low-level Html component should already allow you to prototype what you need, as I've tried to explain in my previous comments. Now, again, our job is to help you with this as best we can, of course!

axelboc May 11, 2022
Maintainer

As a first step to get you going, we can try to make a quick CodeSandbox for you with a small abstraction of an R3F mesh that accepts mouse callbacks that work in data space. You can then copy this component into daiquiri and see if it works as you expect. Once stabilised, we can bring it into H5Web. How does that sound?

loichuder · 2022-05-10T13:04:48Z

loichuder
May 10, 2022
Maintainer

it moves from right to left to optimize the location in the plot ; but i really don't want blinking of the tooltip content, the screen is not limited to a widget.

This is because we use visx's TooltipWithBounds. Using visx's Tooltip deactivates the behaviour.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tooltip not convinient #1110

{{title}}

Replies: 2 comments 6 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Tooltip not convinient #1110

vallsv May 10, 2022 Maintainer

Replies: 2 comments · 6 replies

axelboc May 10, 2022 Maintainer

vallsv May 10, 2022 Maintainer Author

axelboc May 10, 2022 Maintainer

vallsv May 11, 2022 Maintainer Author

axelboc May 11, 2022 Maintainer

axelboc May 11, 2022 Maintainer

loichuder May 10, 2022 Maintainer

vallsv
May 10, 2022
Maintainer

Replies: 2 comments 6 replies

axelboc
May 10, 2022
Maintainer

vallsv May 10, 2022
Maintainer Author

axelboc May 10, 2022
Maintainer

vallsv May 11, 2022
Maintainer Author

axelboc May 11, 2022
Maintainer

axelboc May 11, 2022
Maintainer

loichuder
May 10, 2022
Maintainer