Flickering tip

[yurivish]

I recently built a page that has some charts using tips as chart annotations controlled by a range slider, and noticed that the tooltips sometimes "flicker" before being rendered at their final position. I was following along with tip development a while back and if I remember, there's some layout computation that happens post-initial render, so I wonder if it might have to do with that.

I created a mini test case here. It's hard to get a screenshot, but in Chrome & Safari on macOS I see the tip text appear at the bottom right of the annotated datum for just a moment while I slide the slider, before re-appearing at the top left as requested by the anchor option, along with the rest of the tip.

[mbostock]

Thanks for the test case. Yes, this is because the tip renders asynchronously — we need the tip to be attached to the DOM in order to compute exact text metrics as described here:

plot/src/marks/tip.js

Lines 217 to 218 in 63415aa

	// Only after the plot is attached to the page can we compute the exact text
	// metrics needed to determine the tip size and orientation (anchor).

We can probably find a way to hide the tip text so that it’s not briefly visible before the tip finishes rendering.

[Fil]

please paste this in your notebook to test #1826:

Plot = import("https://esm.sh/gh/observablehq/plot@834810e5e05193191a97ab6d750c4f329a97bd55")

It's not perfect in the sense that the tip doesn't have time to show, but at least it's not showing in the wrong place.

[yurivish]

Thank you @Fil and @mbostock! This is much better – and yeah, I suspect with SVG layout there may always be tradeoffs to make. And cool, I didn't know you could import specific hashes with esm.sh; I've been cloning the repository and rebuilding locally to try out Plot branches. Thanks for the tip.

[Fil]

I recently learned this trick from @mootari; the documentation at https://esm.sh is worth a read!