Network Component

Network provides an easy way to display network graph on web pages

View larger

Close

View larger

Close

View larger

Close

Network is Java API for web component for Vaadin 14+ in NPM Mode. It provides an easy way to display network on web pages.

Known limitations

• This component does not work in a vaadin dialog.
• This component does not work on IE11 and Edge.

License & Author

This Add-on is distributed under Apache 2.0

Component Factory Network is written by Vaadin Ltd.

Sponsored development

Major pieces of development of this add-on has been sponsored by multiple customers of Vaadin. Read more about Expert on Demand at: Support and Pricing

Sample code

Network<NetworkNodeImpl, NetworkEdgeImpl> network = new Network<>(NetworkNodeImpl.class,NetworkEdgeImpl.class);
network.setHeight("600px");
network.setWidthFull();
// Hide panel for reusable components
network.setTemplatePanelVisible(false);

Network<NetworkNodeImpl, NetworkEdgeImpl> network = new Network<>(NetworkNodeImpl.class,NetworkEdgeImpl.class);
network.setHeight("600px");
network.setWidthFull();
// Hide panel for reusable components
network.setTemplatePanelVisible(false);

// There are more examples in ListenerExampleView
network.addNetworkSelectionListener(event -> {
    Notification.show("Nodes selected "+ event.getNetworkNodes());
    Notification.show("Edges selected "+ event.getNetworkEdges());
});

Network<CustomNetworkNode, CustomNetworkEdge> network = new Network<>(CustomNetworkNode.class,CustomNetworkEdge.class);
network.setHeight("600px");
network.setWidthFull();
// Hide panel for reusable components
network.setTemplatePanelVisible(false);

// You can see the full code in the demo source code
network.addNodeEditor(new CustomNetworkNodeEditorImpl());

public static class TemplateEditorView extends VerticalLayout {

    // Primary Network component
    private VerticalLayout networkContainer = new VerticalLayout();
    private Network<NetworkNodeImpl, NetworkEdgeImpl> network = new Network<>(NetworkNodeImpl.class,NetworkEdgeImpl.class);

    // Network component for editing the template
    private VerticalLayout templateNetworkContainer = new VerticalLayout();
    private TextField labelField;
    private Network<NetworkNodeImpl, NetworkEdgeImpl> templateNetwork;

    public TemplateEditorView() {
        setPadding(false);
        setSpacing(false);
        setSizeFull();
        network.setWidthFull();
        network.addNetworkUpdateTemplateListener(event -> openTemplateEditor(event.getTemplate()));
        networkContainer.setPadding(false);
        networkContainer.setSpacing(false);
        networkContainer.add(new H3("Edit Network"));
        networkContainer.addAndExpand(network);

        templateNetworkContainer.setPadding(false);
        templateNetworkContainer.setSpacing(false);
        add(networkContainer, templateNetworkContainer);

    }

    private void openTemplateEditor(NetworkNodeImpl template) {
        templateNetwork = new Network<>(NetworkNodeImpl.class,NetworkEdgeImpl.class, template);

        templateNetwork.setTemplatePanelVisible(false);
        templateNetwork.setLeftPanelOpened(false);
        templateNetwork.setRightPanelOpened(false);
        Button closeButton = new Button("Save and close", e -> closeTemplateEditor());
        networkContainer.setVisible(false);
        templateNetwork.setSizeFull();
        templateNetworkContainer.setVisible(true);
        templateNetworkContainer.add(new H3("Edit template"));
        labelField = new TextField("Name of your template");
        templateNetworkContainer.addAndExpand(labelField,templateNetwork);
        templateNetworkContainer.add(closeButton);
        // bind
        labelField.setValue(template.getLabel());
    }

    private void closeTemplateEditor() {
        NetworkNodeImpl template = templateNetwork.getRootData();
        template.setLabel(labelField.getValue());
        network.updateTemplate(template);
        templateNetworkContainer.removeAll();
        networkContainer.setVisible(true);
        templateNetworkContainer.setVisible(false);
    }

}

Links

• Online Demo
• View on GitHub
• Edit

Compatibility