1) Tried the force layout for the initial use case (40 nodes and 100 links), but it's still messy. My second use case is a larger network. Any other way to improve the automatic position of the nodes.
2) Considering that force layout is still not good for me, have tried the manual position of the nodes but it takes a lot of time to have a good layout. Once the layout is complete, all the position is lost after the page is reloaded. Is there a way to automatically save those positions.
Force layout is supposed to spread out nodes automatically based on their number. The algorithm derived from d3.js library, which in turn had come to d3.js from scientific researches on a physical phenomenon. Would encourage you to share your ideas on what the node positioning should looks like in your case, so we could provide more guidance on that.
Saving the manual configuration of the topology appearance needs additional configuration, as it's not a frequent use-case (as it may seem at first) and it depends on the architecture of your app. For example, if you choose to store manually entered coordinates in OpenDaylight data storage, a smart idea would be to come up with new API method and invoke it in your script, as browser notices changes in topology positioning. See our example.
If you choose to store topology's positioning data in browser's local storage, that's a good idea, too. See another example.
Would like to say that NeXt is an open-source project, and everyone is encouraged to contribute to it. Just in case you find the resolution to any of the mentioned issued you ran into, or if you consider improving anything else you see along the way, you can help the community that uses NeXt - people just like you. If you ever consider committing to NeXT repository, please read our Contributor's Guide.
Right, the force layout works the way you illustrated. Check this example out in order to add hierarchical layout to your app.
Besides the buttons and "dataProcessor: 'force'",couldn't see anything else. Ended up using NetworkX offline (backend) to define the positioning of the nodes. The combination of NetworkX and NextUI is great.