Highlight line when country name moused-over

[jamesscottbrown]

One way to address the problem of distinguishing between many different lines is with interactivity.

I tried implementing a features that highlights the corresponding line on the plot when a user mouses-over a country name in the panel on the left.
A user can thus rapidly scrub their cursor down the list of names, and see the trend for that country in the plots for each variant.

When mousing-over Spain (the cursor does not appear in the screenshot), this looks like:

However, performance is unacceptably bad, and there is a noticeable delay between moving the cursor to another country name and the plots updating.

The flamegraph in React dev tools suggest that re-rendering each line-chart takes roughly 50-60ms, even though only two lines have changed thickness and need to be re-rendered, and the others are unaffected.

I haven't used recharts before and I'm not sure what's causing this problem or whether there's an easy solution.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/hodcroftlab/covariants/npif5q6ty
✅ Preview: https://covariants-git-fork-jamesscottbrown-highlight-line.hodcroftlab.vercel.app

[ivan-aksamentov]

Wow thanks James @jamesscottbrown, this is cool!

Indeed, Recharts is horribly slow usually. Not sure how to overcome that other than replacing it.

I noticed that lots of stuff is getting rerendered. Recharts is not necessarily (or not always) at fault here. Sometimes it seems to only redraw the necessary parts of the plots. And sometimes the whole page rerenders, also causing all Recharts to redraw all the things, but probably because of parent redraws. Same on live site when clicking a checkbox, so it is not (or not only) because of the mousehover feature. Investigation is due. I created an issue #103

[emmahodcroft]

Hey @jamesscottbrown - this is awesome! I love this as a feature and can see how it would be very useful indeed!

It seems like we're going to need to tackle the fact that so much is getting rerendered too often in order to have smoother performance, but I hope that once we get that in place we can totally implement this!