CytoGrapher

Graph Visualization with the Cytoscape Backend

View larger

Close

View larger

Close

View larger

Close

Graph Visualization in the Vaadin with the Cytoscape Backend

Main features

• Drag and Drop node moving and graph panning
• Mouse wheel zooming
• Generic and node specifc styles
• No Flash or any browser plugins are needed
• Node layout positions are calculated in the server side (in the Cytoscape)
• Ctrl-click and drag selection box
• Right click context menu for node linking and deletion
• Double click node creation

Quick start

• Create a new VaadinProject with Eclipse's project wizard
• Download CytoGrapher add-on
• Download Cytoscape 2.8.1 from the http://www.cytoscape.org/
• Copy the cytographer.jar and the cytoscape.jar into /WebContent/WEB-INF/lib
• Download and copy gwt-graphics-1.0.0 add-on jar into /WebContent/WEB-INF/lib
• Also download log4j.jar into /WebContent/WEB-INF/lib
• Copy-paste example usage code below into your Vaadin application class
• Compile the widgetsets and start the tomcat

Sample code

@Override
	public void init() {
		Window mainWindow = new Window("Cytographtest Application");
		Label label = new Label("Hello Vaadin user");
		mainWindow.addComponent(label);
		setMainWindow(mainWindow);
		
		Cytoscape.createNewSession();
		final String name = "New network " + new Random().nextInt(100);
		final CyNetwork net = Cytoscape.createNetwork(name, false);
		CyNetworkView currentView = Cytoscape.createNetworkView(net);

		final Cytographer graph = new Cytographer(net, currentView, name, width, height);
		graph.setImmediate(true);
		graph.setWidth(width + "px");
		graph.setHeight(height + "px");
		
		mainWindow.addComponent(graph);
	}

Links

• Discussion @ Vaadin forum
• Discussion @ Cytoscape forum
• Source Code
• Online Demo

Compatibility