Not able to get the Hierarchical Layout

[tewaris]

I have looked at the example code at http://visjs.org/examples/network/layout/hierarchicalLayout.html. I am trying to replicate this example from Vaadin (from branch visJs4+) . Here is my network diagram code:

        Options options               = new Options();

        final Layout layout = new Layout();
        final Layout.Hierarchical layoutType = layout.new Hierarchical();
        layoutType.setDirection(Layout.Direction.LR);
        layoutType.setEnabled(true);
        layoutType.setSortMethod(Layout.SortMethod.directed);

        layout.setHierarchical(layoutType);
        layout.setImprovedLayout(false);

        options.setLayout(layout);
        options.setPhysics(null);

        NetworkDiagram networkDiagram = new NetworkDiagram(options);

        // crete nodes
        Node node1 = new Node(1, "Node 1");
        Node node2 = new Node(2, "Node 2");
        Node node3 = new Node(3, "Node 3");
        Node node4 = new Node(4, "Node 4");
        Node node5 = new Node(5, "Node 5");

        // create edges
        Edge edge1 = new Edge(node1.getId(), node2.getId());
        Edge edge2 = new Edge(node1.getId(), node3.getId());
        Edge edge3 = new Edge(node2.getId(), node4.getId());
        Edge edge4 = new Edge(node2.getId(), node5.getId());

        networkDiagram.addNode(node1);
        networkDiagram.addNode(node2, node3, node4, node5);
        networkDiagram.addEdge(edge1, edge2, edge3, edge4);

        networkDiagram.setSizeFull();

Here is the screenshot of the diagram I am getting:

I will appreciate any pointers.

[tewaris]

Debugging on the browser gave the following errors:

[tewaris]

Now I am getting the layout:

The critical issue was that the options need to be built first before it is passed to the network. Also, the nodes and edges are not directly added to the network, but to the config data. Adding to the network is a dynamic change. I have refactored the class Options to Config. Config contains Data an Options. Here is the updated code:

Config config = new Config();

final Layout layout = new Layout();
final Layout.Hierarchical layoutType = layout.new Hierarchical();
layoutType.setDirection(Layout.Direction.LR);
layoutType.setEnabled(true);
layoutType.setSortMethod(Layout.SortMethod.directed);

layout.setHierarchical(layoutType);
layout.setImprovedLayout(false);

config.getOptions().setLayout(layout);
config.getOptions().setPhysics(null);

// crete nodes
Node node1 = new Node(1, "Node 1");
Node node2 = new Node(2, "Node 2");
Node node3 = new Node(3, "Node 3");
Node node4 = new Node(4, "Node 4");
Node node5 = new Node(5, "Node 5");

// create edges
Edge edge1 = new Edge(node1.getId(), node2.getId());
Edge edge2 = new Edge(node1.getId(), node3.getId());
Edge edge3 = new Edge(node2.getId(), node4.getId());
Edge edge4 = new Edge(node2.getId(), node5.getId());

config.getData().nodes.addAll(asList(node1, node2, node3, node4, node5));
config.getData().edges.addAll(asList(edge1, edge2, edge3, edge4));

NetworkDiagram networkDiagram = new NetworkDiagram(config);
networkDiagram.setSizeFull();

return networkDiagram;