Bug: Hovercards are not displaying on the Contributor Distribution chart

[brandonroberts]

Describe the bug

When hovering over an avatar, the contributor card should be displayed

Steps to reproduce

1. Go to a repo page contributors
2. https://app.opensauced.pizza/s/facebook/react/contributors
3. Hover over an avatar
4. Note no card is displayed

[github-actions]

Thanks for the issue, our team will look into it as soon as possible! If you would like to work on this issue, please wait for us to decide if it's ready. The issue will be ready to work on once we remove the "needs triage" label.

To claim an issue that does not have the "needs triage" label, please leave a comment that says ".take". If you have any questions, please comment on this issue.

For full info on how to contribute, please check out our contributors guide.

[SURAJ-SHARMA27]

Hi @brandonroberts @zeucapua,

The Avatar component is being passed instead of AvatarHoverCard in the contributor-card component. I've fixed it locally. If the fix works, should I ask to be assigned to this issue?

screen-capture.22.webm

[brandonroberts]

Thanks @SURAJ-SHARMA27. This work is already assigned. Its the chart that's not showing the hovercards

[SURAJ-SHARMA27]

Sure, no problem if the issue is already assigned. However, I was going through the documentation and have made some progress in solving it. If I can help, please let me know :) . @brandonroberts @zeucapua

screen-capture.23.webm

[nickytonline]

I've tried a bunch of things for this, and I think the issue lies in the fact that it's a foreign object in SVG that houses an HTML element. I've tried z-indices, portals, dialogs, no dice... yet.

Going to punt on this for a little bit to focus on the pizza CLI work.

[nickytonline]

I see you have #3982 up @zeucapua. Is that still being worked on? If so, we can reassess once that work is done.

[SURAJ-SHARMA27]

Hey everyone,

To enable mouse interactions on a nodeComponent (specifically, a foreign element), we need to explicitly define the onMouse events for that component, as it overrides the default mouse interactions. Once these onMouse events are handled, I have defined a customTooltip for the hover card.

Further review is needed. I look forward to your feedback.