bad rendering and network.body.view.translation is {x:NaN, y:NaN} about vis-network HOT 26 CLOSED

I actually encountered this too, very rarely though, with the original vis package. But it was happening only with Vue.js dev tools active so I blamed it on HMR or something. However all these tools slow everything down a lot, maybe it would also happen on a slow PC (if it is indeed the same issue).

from vis-network.

MWE: https://jsfiddle.net/6kg4xr7d/2/

from vis-network.

@mojoaxel This seems like input validation issue to me. We should just throw if the input doesn't pass scale > 0 to not cause this hard to debug confusion. Or is there any point in having zero, negative or string scale?

from vis-network.

I'll fix it.

from vis-network.

Is this bug solved in the 5.0 ?

You tell us 😉

@nicolaslupinski Please try the 5.0 release.
If there the problem still exists you also can try visjs-network. If the problem is fixed there we might adopt those changes.

from vis-network.

@nicolaslupinski Can you please confirm this problem still exists in v5.1.0 !?

from vis-network.

@nicolaslupinski Does this ring a bell?

(vis 4.21.0)

from vis-network.

I'll try to trigger this with the new vis-network.

from vis-network.

(vis-network 5.1.0)

from vis-network.

Steps to reproduce:

• net.moveTo({ position: { x, y }, scale })
• net.fit({ animation: true })

from vis-network.

Steps to reproduce:

• net.moveTo({ position: { x, y }, scale })
• net.fit({ animation: true })

Nope, it's more complex than that. This works just fine in MWE.

from vis-network.

The problem is that string scale (notice line 76 in MWE) doesn't work but also doesn't show any error.

from vis-network.

Well it sorta works, but causes problems.

from vis-network.

Steps to reproduce:

• net.moveTo({ position: { x, y }, scale })
• net.fit({ animation: true })

Thanks @Thomaash!

I can reproduce the issue reliably by setting the scale to 0 (which make the whole network disappear) then network.fit().

network.moveTo({position:{x:1, y:1}, scale:0}); network.fit();

The hacked fix, to reset the network.body.view.translation before redraw and fit, also works reliably :

function redrawAndFit(network){
    if(isNaN(network.body.view.translation.x) || isNaN(network.body.view.translation.y)){
      network.body.view.translation = {x:0,y:0};
    }
    network.redraw();
    network.fit();
}

I'll have a look at the source, now.

from vis-network.

So far 3 reasons have been reliably identified:

• string scale in moveTo: https://jsfiddle.net/6kg4xr7d/2/
• 0 scale in moveTo: https://jsfiddle.net/pq8heo9b/
• negative scale in moveTo: https://jsfiddle.net/prou1n23/

from vis-network.

@nicolaslupinski Will your problems disappear if you convert your scale to a number and ensure it is grater than zero?

from vis-network.

We should just throw if the input doesn't pass scale > 0 to not cause this hard to debug confusion. Or is there any point in having zero, negative or string scale?

I looked at it and I think you are right! The docs state that The scale is a number greater than 0. If you want you can add a Number cast bevor you check is scale > 0 this way strings would also work.

@Thomaash Could you provide a fix or should I do it?

from vis-network.

@nicolaslupinski Will your problems disappear if you convert your scale to a number and ensure it is grater than zero?

I doubt.

My original problem is that the rendering is wrong sometimes.

Setting the scale to 0 was a reliable way to get the same bug (and test the fix). But it might not be the cause of the original problem (view.translation = {x:NaN, y:NaN}).

I'd rather have something that prevent view.translation to be set to NaN. I'll have to read the code to figure out where this can happen.

from vis-network.

I manage to reproduce by realoading again and again untill it triggers. There is more than one bug actually, sometimes I get :

network.body.view.translation
{x: -Infinity, y: -Infinity}
network.body.view.scale
Infinity

Then I redraw() and and fit() :

network.body.view.translation
{x: NaN, y: NaN}
network.body.view.scale
0.8912253390328385

The rendering is messy : in the first case, it draws edges only, in the second it draw edges and their labels, but still no nodes.

from vis-network.

@nicolaslupinski Hi, it's perfectly possible that I misidentified your issue and fixed an unrelated problem. Could you please adapt this MWE https://codesandbox.io/embed/vis-networkissues12-mwe-1-exct0 to show your issue so that we all can see it?

from vis-network.

Hi Thomaash

Sorry I don't provide feedback quickly.

I've edited the code to show my issue, but I feel i'm cheating, by reproducing the bug and not its original cause.

Regards

from vis-network.

Hi @nicolaslupinski,

it seems that you forgot to share the link to your MWE. Could you provide it please?

Thanks.

from vis-network.

Indeed...

I boils down to writing :

network.moveTo({
    position: {
      x: -Infinity,
      y: -Infinity
    },
    scale: 2
  });

from vis-network.

@nicolaslupinski Your're right, this is still an issue.

from vis-network.

Hi

This bug seems more related to rendering in a complex web page.

I've tried to add

setTimeout( function(){ redrawAndFit(); redrawAndFit(); }, 1000);

to my page, with

function redrawAndFit(){
   if(isNaN(network.body.view.translation.x) || isNaN(network.body.view.translation.y)){
      network.body.view.translation = {x:0,y:0}; //hack intended to fix bug
   }  
   network.redraw();
   network.fit();
}

But it is still unable to prevent the rendering bug from happening.

I've tried putting an alert() after rendering event, in the bugged case I'm getting the alert before the canva is even put on screen.

The network related code might be executed before all the proper initialisation have been performed, hence it might get undefined or 0 value for canva's height or width.

from vis-network.

Is this still an issue? Should we reopen?

from vis-network.