NeXt UI - HierarchicalLayout

[mahi37]

Hi, 

I'm using the Cisco NeXt library to draw a network topology. I'd like to arrange the dynamically generated topologies based on the network hierarchy.

For example, if I have a Router, Switches, and Computers, I want the diagram to be ordered vertically in the following order; Router --> Switches --> Computers. Currently, I'm using the 

 auto layout

setting so the generated topology isn't aware of this hierarchy and it generates I'm guessing, the most symmetrical and least link length topology. 

The summary at https://community.cisco.com/t5/networking-blogs/next-brief/ba-p/3658411 mentions a Hierarchical Layout, and there's some code in next.js regarding 

nx.graphic.Topology.HierarchicalLayout

, so I'm wondering if the feature is available. 

Thanks! 

[Sergiu.Daniluk]

Hi @mahi37 

I think what you are looking for is similar with the Hierarchy NodeSet from this demo:https://d1nmyq4gcgsfi5.cloudfront.net/site/neXt/discover/demo/  you have the code snippet on the right side as well.

If you want to practice more on NeXt there is also this tutorial: https://d1nmyq4gcgsfi5.cloudfront.net/site/neXt/discover/demo/ 

Stay safe,

Sergiu

[lindsayg]

Does anyone know how to easily disable a layout and return to the topology data's x and y co-ordinates?

I have tried:

topo.layoutType(null);
topo.deactivateLayout();

Thanks