create render fall inside an infinite loop

[vincenzopalazzo]

I try to build a straightforward svelte app with some code examples, but when I add a new link, my code will be stuck in rendering (or try to render) the graph.

This may be related to this exception that I see.

REE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The "position" attribute is likely to have NaN values. TH

Any idea?

The repo, when you can reproduce it is there https://git.hedwing.dev/vincenzopalazzo/ngraph-svelte

[anvaka]

Yeah, that error seems like a decent smoke pointing in the right direction.

I didn't look close into the issue yet, but are you able to open dev tools, then navigate to the offending page and then hit the pause button to see the stack trace where it is stuck?

[vincenzopalazzo]

Hey @anvaka,

I'm trying to report an issue, but the stack trace doesn't seem to point to the ngraph source code. Here's the content I copied and pasted, I guess the problem is inside the nodeView.js:77 and then three.js:11279

  | (anonymous) | @ | three.js:11279
-- | -- | -- | --
  | getBoundingSphere | @ | nodeView.js:77
  | update | @ | autoFit.js:12
  | run | @ | index.js:242
  | pixel | @ | index.js:177
  | (anonymous) | @ | NGraph.svelte:11
  | run | @ | index.mjs:20
  | (anonymous) | @ | index.mjs:2101
  | flush | @ | index.mjs:1329
  | init | @ | index.mjs:2197
  | Root | @ | root.svelte:20
  | createProxiedComponent | @ | svelte-hooks.js?v=6ac33f3e:341
  | ProxyComponent | @ | proxy.js?v=6ac33f3e:242
  | Proxy<Root> | @ | proxy.js?v=6ac33f3e:349
  | initialize | @ | client.js?v=6ac33f3e:284
  | _hydrate | @ | client.js?v=6ac33f3e:1783
  | await in _hydrate (async) |   |  
  | start | @ | start.js:22
  | (anonymous) | @ | (index):35
  | Promise.then (async) |   |  
  | (anonymous) | @ | (index):34

</span></div>

Another good thing is that by using the debugged, It is stopped at some point with this code

   // Inserts body to the tree
    insert = function(newBody) {
      insertStack.reset();
      insertStack.push(root, newBody);

      while (!insertStack.isEmpty()) {
        var stackItem = insertStack.pop(),
          node = stackItem.node,
          body = stackItem.body;

        if (!node.body) {
          // This is internal node. Update the total mass of the node and center-of-mass.
          var x = body.pos.x;
          var y = body.pos.y;
          var z = body.pos.z;

I guess it is part of the layout3d code?

Additionally, I wanted to report that the issue seems to occur when I create a link in the graph. However, if I add just one or two nodes, the code seems to work fine.

[vincenzopalazzo]

Mh looks like that the pixel default layout is buggy, I switch to https://github.com/anvaka/ngraph.forcelayout and not it is working :)

[anvaka]

Glad you figured it out!

[anvaka]

Yeah, looking at it closer, it seems like this module uses https://github.com/anvaka/pixel.layout/blob/master/index.js which is very old.

Probably should just drop it and switch to ngraph.forcelayout like you did.

Also note - the rendering in ngraph.pixel is done by THREE.js, which I don't use frequently these days. More lightweight options are available. This is my typical go-to starting pack for graph drawing: https://github.com/anvaka/graph-start

[vincenzopalazzo]

Hey @anvaka

Probably should drop it and switch to ngraph.forcelayout like you did.

Yeah I was pretty sure that also the module was using the forcelayour, but I was wrong

Also note - the rendering in ngraph.pixel is done by THREE.js, which I don't use frequently. More lightweight options are available. This is my typical go-to starting pack for graph drawing: https://github.com/anvaka/graph-start

I noted it, but it looks like there is a ngraph.wgl package, and I am a pretty dum person with the graphics.

Maybe I can start one, and you can supervise it?

[Josh-Cena]

Hit the same error and forcedlayout worked great! Took me a while to figure out the options since these aren't documented.