Retina display support for 2D graph / "onSimulationEnd" callback?

[RebootJeff]

Web canvas requires additional scaling to support Retina displays. See here: https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#Syntax

I would like to use the code snippet mentioned in the link above, but the ideal time to adjust the canvas scaling is when the animation/forceSimulation is done. Scaling the canvas on every tick causes major performance issues in my graph that has hundreds of nodes/links.

But I don't see any kind of "onSimulationEnd" callback/prop, so I'm not sure how to execute code specifically when the simulation has ended. Any ideas on how to scale the canvas for Retina displays without trying to re-scale the canvas through nodeCanvasObject prop?

Right now, the only solution I can think of is:

• Set cooldownTime prop to X milliseconds.
• Use a setTimeout to run canvas scaling code snippet after X+1 milliseconds.

But of course, the above solution is crummy because it's hard to pick a good value for X.

Correction?

Actually, it's worse than I thought. Pan/Zoom will undo the canvas scaling, causing bizarre painting. So even using a setTimeout doesn't work for graphs that allow pan/zoom.

[vasturiano]

Hi @RebootJeff, thanks for reaching out. The best solution to solve this is to update the library natively to support retina displays.

I've modified the underlying module (force-graph) to adjust the scaling according to devicePixelRatio.
If you upgrade to the latest version of react-force-graph (1.7.0), you'll see that it now supports retina displays.

[RebootJeff]

Wow I see you updated the library just 11 hours ago! Thanks so much; it looks great 😄