I don't like that Flow forces us to use a less performant solution.
You can tell flow using something like this:

_onMouseMove(event: { nativeEvent: MouseEvent } & SyntheticMouseEvent<>) {

I think the order is important, so maybe I'm wrong in the order and { nativeEvent: ... } should come after.

And then you can use offsetX and offsetY directly.

offsetX and offsetY shouldn't go in the state. Each time you put something in the state this will trigger a rerender, so the rule of thumb is that we shouldn't put in the state something that's not used for render. Here you simply want a local variable (eg: this._offsetX).

In that case this is not a big deal as we change also pageX and pageY that we use at render, so there's no performance issue in this specific case. But I prefer that we use "the right way" as a good example for other similar cases too.

Oh, I missed that; I considered the offsets to be almost the same thing as pageX/Y and thus just put them together in the state. But I agree with you it's better to use the the more correct way.

It doesn't look very good when the icon is empty:

I think it's not ideal to hide it if there's no favicon because this would make the text "jump". Maybe the best is to put the favicon somewhere else where it's not so awkward when it's absent, so maybe on the right instead of the left. (for LTR languages, but Flex layout does the right thing if we ever make it work for RTL languages anyway).

Yeah, that doesn't look very good.

But, (ignoring the fact that the icon is too close to the text in the image), putting it on the right side of the text looks a bit off to me:

I think the favicon goes better together with the domain name of the URL rather than the path on the right side. This exacerbates as the URL gets longer.

Perhaps we can align the URL with the function name above it, then it looks less bad if there's no favicon. What do you think?

Why not... Counter-proposal though: what do you think of putting it at the top right ? (so at the right of the first line)

Perhaps we can align the URL with the function name above it, then it looks less bad if there's no favicon. What do you think?

This looks pretty good to me and seems like the best option in my opinion.

I don't like the proposal of putting it on the right, probably because favicons are on the left in all other contexts where they're used.

OK, if @mstange 👍 I'm OK too :)

Ok, so I pushed new changes that implements the suggested option.
I'm not super pleased with that approach however, mainly because of how it looks when there's no lib/URL at all in the tooltip:

@julienw 's suggestion to put the whole thing on the top right would solve that problem, but the tooltips tend to be very long if we need to squeeze both function name and URL on the same line.

I'm out of ideas on how to solve this without having text jumping.

I don't understand - why is there an empty row if neither the favicon nor the url are present?

I was going to answer that it's because the icon has a min-height, but now I realize that I should just add back the conditional rendering of the icon depending on whether displayData.icon is defined. I had removed it, believing it was unnecessary.

Thank you for asking! This shouldn't be problem anymore :)

Not adding this will cause tooltips to become truncated with an ellipsis, which is something desirable, but it does it "too much" when displaying tooltips close to the edge of the chart. I'm adding this to retain the current behavior and defer the solution to "too long tooltips"-problem to a separate PR.

Small nit: We don't need to use a template string here as the the only content is the result of formatNumber. This could be useful if the result of the function wasn't a string, but here it's a string. So you can simply use: totalTime: formatNumber(totalTime) and the same for selfTime.