Graph connected link get vanished after sometime

Question

Graph connected link get vanished after sometime

shreykene opened this issue 2 years ago · 11 comments

When the graph is initialized it will render nodes and connecting links are displayed properly. But after a few minutes, the links get vanished and only nodes are displayed. So is this desired behavior or this is the bug?

When I pull the node then it will work again or I need to refresh the page again. So can you please help me out with this problem?

Answer 1 · 2022-09-30T11:02:16.000Z

@shreykene Could it be just because the node circles are very big and the links are getting hidden behind them?

Try making the node circles smaller and see what happens.

Answer 2 · 2022-09-30T11:23:54.000Z

No that's not the issue of node circle size even if you keep the node circle size small it will vanish after some time. Maybe there is certain graph behavior property that I don't use that is why it happened.

Answer 3 · 2022-11-03T22:38:05.000Z

It could be related to the automatic drawing pause. You could try switching it off via autoPauseRedraw(false) to see if it helps.

Answer 4 · 2022-11-10T11:40:18.000Z

@vasturiano this property won't work. Is there any workaround?

Answer 5 · 2022-11-10T19:24:41.000Z

@shreykene best would be if you could create a simple reproducing example on https://codepen.io/, so we can better troubleshoot it.

Answer 6 · 2023-01-24T13:04:14.000Z

FlonnectEdit.mp4

Hi @vasturiano

I have uplaoded the video for your reference to see how graph get shrink if we are not active on that tab fro sometime then it will get shrinks. So please help me out with this issue.

Answer 7 · 2023-01-28T19:13:26.000Z

@shreykene and any chance you can make a reproducible example on https://codepen.io/ or https://codesandbox.io/ ?

Answer 8 · 2023-02-23T13:33:42.000Z

I also found this issue. Just by locking my macbook for a minute or so and unlocking it the graph looks all collapsed in the center. As soon as you interact with a node, it springs back.

Answer 9 · 2023-02-24T06:57:25.000Z

Hi @vasturiano

I found the issue of why exactly this happens because when the graph loads the engine will get stop after some time if we are not active on that browser tab where the graph is loaded. So I use the onEngineStop() function and load the graph again which solves my problem for now.
But I have to ask you again is this the right way or what method should I use to refresh my graph content if the engine is getting stops? Or tell me any better approach to tackle this issue?

Answer 10 · 2023-02-24T19:03:56.000Z

@shreykene the reason why the nodes remain in their initial position if left rendering in a background browser tab is due to this default property:

cooldownTime(15000)

This indicates that the force engine has a maximum duration of 15s to reach its final state, after which it will be stopped. When the engine is ran in a background tab no ticks are actually happening, essentially because requestAnimationFrame is not firing. Thus, when you finally shift your focus to this tab, if more than 15s have elapsed the engine is stopped and no ticks have ran, resulting in the initial layout that you've shown. As soon as you drag one of the nodes the engine is automatically reheated and the 15s timer starts again, this time able to run its iterations since the tab is now in focus.

So, to solve this you can switch to an engine tick limitation that does not involve time, but tick count. Something like this:

.cooldownTime(Infinity)
.cooldownTicks(200) // Adjust to taste

This is not the default setting because, apart from the tab out of focus edge case, time is a better measure for how long to spend in the graph build-up phase. Engine ticks take longer for heavy graphs and shorter for lighter ones, and this default setting essentially says that regardless of graph size the user should only wait at most 15s to get a final layout.

Answer 11 · 2023-02-27T05:01:12.000Z

@vasturiano thanks for the solution it solves my problem. You can now close the ticket.