Graph settles off canvas

[boydkelly]

Hi, thanks for this awesome project!

I have a graph that typically will display 5 to 20 nodes. Not usually more. I have found that it most often settles at the left side of the canvas and if I move a node sometimes it will even totally settle of canvas so you can't even see it. There are a ton of options here. Any ideas on what is the best to try and

1. Center the graph.
2. Prevent it from moving outside the canvas.

Please see my current code. (There are so many options and I am not) even sure everything is in the right place!!

`<script type="text/javascript">
    let neoViz;
    function draw() {
        const config = {
          containerId: "viz",
          neo4j: {
            serverUrl: "bolt://dyu.coastsystems.net:7687",
            serverUser: "neo4j",
            serverPassword: "pass-word",
          },
          visConfig: {
            nodes: {
              shape: 'dot',
              size: 25
            },
            edges: {
              arrows: {
                to: {enabled: true}
              }
            },
            physics: {
              barnesHut: {
                "avoidOverlap": 1
              },
              repulusion: {
                "nodeDistance": 300
              }
            },
          },
          labels: {
            Headword: {
              label: "text",
              [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
                static: {
                  color: "#ffb703",
                  font: {
                    "background": "none",
                    "strokeWidth": "0",
                    "color": "black"
                  },
                },
                function: {
                  title: NeoVis.objectToTitleHtml
                }
              }
            },
            Proverb: {
              label: "text",
              [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
                static: {
                  color: "#fb8500",
                  font: {
                    "background": "none",
                    "strokeWidth": "0",
                    "size": 28,
                    "color": "black"
                  },
                },
                function: {
                  title: NeoVis.objectToTitleHtml
                }
              }
            },
            Word: {
              label: "text",
              [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
                static: {
                  color: "#a7c957",
                  shape: "ellipsis",
                  font: {
                    "background": "none",
                    "strokeWidth": "0",
                    "color": "black"
                  },
                },
                function: {
                  title: NeoVis.objectToTitleHtml
                }
              }
            }
          },
          initialCypher: "MATCH (d:Proverb) WHERE d.lang = 'dyu' WITH d, rand() as r ORDER BY r LIMIT 1 OPTIONAL MATCH p=()-[:MEANS]-(a:Headword)-[:USED_IN]-(d)-[:MEANING]-() RETURN * LIMIT 10"
        };

      neoViz = new NeoVis.default(config);
      neoViz.render();
    }
</script>`

https://coastsystems.net

[thebestnom]

I think you put a too high repulsion, but that's just my theory 😅

[PeterPilley]

Hi not sure if you have resolved this, but I looked all through the docs and found nothing until I stumbled across vis.js and its option for network.fit();

I checked the neovis.js library and it exists there. I messed around with repulsion and didnt get any change in the display however fit() moved it to center.

so you would use something like neoVis.network.fit(); to get it to center. Hope that helps you or someone else who has this issue

[boydkelly]

Hi not sure if you have resolved this, but I looked all through the docs and found nothing until I stumbled across vis.js and its option for network.fit();

I checked the neovis.js library and it exists there. I messed around with repulsion and didnt get any change in the display however fit() moved it to center.

so you would use something like neoVis.network.fit(); to get it to center. Hope that helps you or someone else who has this issue

Awesome! Thanks, cooincidence I was just on this last night and got ssl working. Now I can work on the presentation!

The weird thing I am noticing is if I add the network.fit() method after render like this:

neoViz = new NeoVis.default(config); neoViz.render(); neoViz.network.fit();

I will get an error:

ncaught TypeError: Cannot read properties of null (reading 'fit') at draw ((index):547:22) at (index):549:3

But if I run neoViz.network.fit() in the console it runs and works fine. Any idea on that? Is there where you implemented this?

FYI I also noticed that network.stabilize() seems to have the same effect as well.

https://coastsystems.net

[boydkelly]

Yeah, I've tried everything I can at this point. Moved the scripts from the footer to the header. Ran draw() from the footer with defer, and then back to body onload. At this point the scripts are all in the header, and using body onload="draw()" with neoViz.network.fit() both in the script (at the very end), and also in the footer with defer. In both cases I now get cannot read properties of undefined (reading 'network'). But if I open the console I can run it fine.

[thebestnom]

Neovis have an event when the draw complete, listen to it and run neoViz.network.fit() there

[boydkelly]

Neovis have an event when the draw complete, listen to it and run neoViz.network.fit() there

ok Thank you for the input! I now have the following in my script, and at least there are not error messages but the .stablilize() or .fit() method does nto seem to be called or function. (If I call it again at the console it works). Is there something wrong with the syntax?

 neoViz = new NeoVis.default(config);
  neoViz.render();
  neoViz.registerOnEvent('completed', (e) => {
    neoViz.network.stabilize();
  });

[PeterPilley]

Neovis have an event when the draw complete, listen to it and run neoViz.network.fit() there

ok Thank you for the input! I now have the following in my script, and at least there are not error messages but the .stablilize() or .fit() method does nto seem to be called or function. (If I call it again at the console it works). Is there something wrong with the syntax?

 neoViz = new NeoVis.default(config);
  neoViz.render();
  neoViz.registerOnEvent('completed', (e) => {
    neoViz.network.stabilize();
  });

I found that calling it when the div is hidden will not have the desired result ie it hasnt actually rendered and therefore there is nothing to stablize or fit

is coastsystems.net your site? if so you are using jquery so instead of using onload='draw();' you could load it within .ready().

I couldnt find the script that was controlling the graph but you could try move your draw(); function to ready() and then call fit() there.

I havent had much luck with 'completed' event

[boydkelly]

Crazy. I sourced the main script in the header now. (proverbs.js) and tried:

$(document).ready(function(){
  draw()
  neoViz.network.fit()
});

in the footer. And the graph gets drawn (albeit not centered properly) But it is giving me:

 jQuery.Deferred exception: Cannot read properties of null (reading 'fit') TypeError: Cannot read properties of null (reading 'fit')
    at HTMLDocument.<anonymous> (http://localhost:8080/blog/fr/:426:29)
    at j (https://code.jquery.com/jquery-3.2.1.min.js:2:29999)
    at k (https://code.jquery.com/jquery-3.2.1.min.js:2:30313) undefined

But it STILL works from the console. Too weird. I'm going to try and put it back to body=onload and a timeout on fit().

[boydkelly]

I did also notice this comment elsewhere:

I should deprecate registerOnEvent it's completely useless
I should just add that render will return a promise

It would be nice it there were a concrete practical example of where and how to listen that the network graph is drawn completed.

[boydkelly]

Next try was in footer:

<script>
  window.onload=draw()
  setTimeout(neoViz.network.fit(), 3000)
</script>

with result:

Uncaught TypeError: Cannot read properties of null (reading 'fit')
    at (index):425:29

But running neoViz.network.fit() from the console works.

[PeterPilley]

Is the graph rendered before you call neoViz.network.fit();

ie what happens if you console.log(neoViz)