Graph visualization with Vaadin and Cytoscape

Johannes · June 29, 2011, 1:12pm

Hi!

I just uploaded my VaadinGraph add-on in the Directory
http://vaadin.com/directory#addon/vaadingraph

Some information

It uses Cytoscape for the backend:
http://www.cytoscape.org/
gwt-graphics add-on is used for the rendering
is LGPL (since Cytoscape is also LGPL)
is experimental

Any feedback, suggestions, bug reports etc. are heartly welcome! Please, test it, broke it, enjoy it

ps. Unfortunately there is currently no online demo available online since I have some configuration issues with our deployment environment.

Mauro3 · June 29, 2011, 7:43pm

Hey Johannes,

Nice work! I was working on a similar add-on, but it doesn’t make use of a backend like cytoscape. I just have a couple of interfaces that model the nodes and edges. Now I am trying to find a way to layingout my nodes on the screen. I am a bit stuck…

How did you do to implement the layout feature? Are you using the cytoscape libs to layout the nodes?.

Thanks!.

Mauro.

Johannes · June 30, 2011, 7:51am

Hi Mauro!

Yes, the Cytoscape takes care of layouting and also contains all those visual styles and that kind of stuff.

Johannes

Johannes · June 30, 2011, 8:18am

Add-on name changed due the add-on naming policy violation. The add-on could be found from here:
http://vaadin.com/addon/cytographer

Johannes · July 19, 2011, 1:44pm

CytoGrapher version 0.2 is now released and the online demo is finally available here (after hours of struggling with debian…)
http://johannes.virtuallypreinstalled.com/VaadinGraph

Johannes · August 6, 2011, 11:28am

The CytoGrapher 0.3 released. Please, see the release notes and a new screenshot from the
Directory
. Check out also the updated
Online demo
.

Istea · August 8, 2011, 4:10pm

Hello Johannes Tuikkala,

i would like to try your cytoscape vaadin addon Unfortunately the demo-application page doesn’t offer any example source codes…Perhaps you can offer the source code for the demo application? Or could you post an example right here - how to draw a network graph with your addon?

Thank you very much in advance

Greets…

Johannes · August 8, 2011, 6:55pm

Hello!

The source codes of the example application are included in the add-on jar file. Please, download the add-on and open/extract it for example with 7zip/winzip etc. The other way is to browse the subversion repository of the project for instance here:
http://code.google.com/p/vaadin-graph/source/browse/trunk/VaadinGraph/src/org/vaadin/johannes/VaadingraphApplication.java

If you find my code usefull, feel free to use it as a basis of your own experiments And do not hesitate to ask more information, since this project is not so well documented…

Best regrads
Johannes Tuikkala

Istea · August 8, 2011, 8:49pm

Hello!

Thank you very much for your quick response! I will have a look at the example and try to create a basic “hello graph” application

Thanks,
Istea

Jan12 · August 27, 2011, 11:50am

Hi Johannes,

nice work!!! I was trying something similiar with the SVGProcessing-Plugin and Jung (for graph layout). But the performance was horrible…

Setting up VaadingGraph was really easy … but, I’m not sure, think I found a little bug: In my application the VaadinGraph is embedded on the right side of a HorizontalSplitPanel as second component. When I try to move a CyNode with the mouse as soon as I grab it, it moves to the right for the distance of the first components width. When I resize the SplitPanel - making the first component as small as possible - there is no such offset. The position to grab the node is fine … but on clicking it jumps to the right. Perhaps there’s a mistake I made, don’t know…

Thank You

Johannes · August 28, 2011, 6:13pm

Thank you very much for your feedback! And yes, the problem you pointed out seem to be a bug. I will fix it in the next release. I have planned the next release to be within 1-2 weeks. For it I have worked with e.g. graph rotation with mouse wheel, Click and drag selection box, Deleting selected nodes by Delete key, etc.

For some release after the next release the following features are in the todo list: Double click node creation, ALT/CTRL click node linking, Node/edge attribute browsing…

#johannes

Anatoly2 · August 30, 2011, 11:38am

Johannes, this is very simple and solid solution. Thank you very much for your time.

Here is a small example which shows how to make a graph manually (may be it will be interesting to someone):

	private ComponentContainer createContent() {
		Cytoscape.createNewSession();
		CyNode node0 = Cytoscape.getCyNode("0", true);
		CyNode node1 = Cytoscape.getCyNode("1", true);
		CyNetwork net = Cytoscape.createNetwork("test", false);
		net.addNode(node0);
		net.addNode(node1);
		CyEdge edge0 = Cytoscape.getCyEdge(node0, node1, Semantics.INTERACTION, "pp", true);
		net.addEdge(edge0);
		CyNetworkView view = Cytoscape.createNetworkView(net);
		view.applyLayout(new ForceDirectedLayout());
		view.getVisualStyle().getNodeAppearanceCalculator()
				.getDefaultAppearance()
				.set(VisualPropertyType.NODE_SIZE, 10);
		final VaadinGraph graph = new VaadinGraph(net, view, "test", 400, 300);
		graph.setImmediate(true);
		graph.setWidth("100%");
		graph.setHeight("100%");
		graph.setTextsVisible(true);
		graph.setOptimizedStyles(true);
		final VerticalLayout layout = new VerticalLayout();
		layout.setSizeFull();
		layout.setMargin(true);
		layout.setSpacing(true);
		layout.addComponent(graph);
		return layout;
	}

Also I want to say that IE9 does not render a graph correctly but it is problem with gwt-graphics which does not know that IE9 support SVG.

Best regards,
Anatoly.

Deepak1 · September 14, 2011, 8:20pm

gr8 addon…I will be using it for my application for sure.
U made my life much easier !!

Thanks…keep up the good work !!
I am also looking for d3.js (http://mbostock.github.com/d3/) add on for vaadin…any one here have any idea about it !!!

Anurag · January 6, 2012, 9:13am

Hi Johannes ,

I am new to Vaadin .
I wanted to know whether cytographer can be modified to put images instead of shapes for the vertex nodes.
Basically i wanted to know whether i can completely render the node in my own way by having my own image supplied to the node.

Also is it possible to have click listeners & rendering styles on the link.

Also how easy will be to support dynamic updates on the map.

Thanks
Anurag

Johannes · January 8, 2012, 4:20pm

Hi!

Welcome!

That is something that I have to implement… Currently only circle shaped nodes are possible, but with some work it would be possible to use also custom graphics.

Yes, the version 0.5 released today does have clicklistener also for edges/links.

That is also possible in the newest version of plug-in. Though, there is still some work to be done, e.g. currently the node positions are not updated back to server.

Anurag · January 9, 2012, 9:50am

Thanks Johannes

I was planning to use this add-on to build a topology map application.

My requirements are following

Show Node and links between them on a background map image.
Node can take an image/icon instead of default circle/shape.
Node/Link needs to be colored based on any alarm condition.
Links should be bundled in-case there are a set of links(more than 1) between 2 nodes & link bundle will show all links once the user clicks on to it.
Standard Zoom-in/zoom-out/panning/zoom on rectangle features on client.

Dynamic update requirements.
A new node / link can get added in the background cytoscape mode , then this should be reflected on the client which is already connected
A new alarm comes on existing node/link and that needs to be propagated on to the connected browser client

Johannes , Can you provide your inputs on whether what is doable & what is not & how much will be the complexity for achieving?

Thanks
Anurag

Johannes · January 9, 2012, 2:22pm

Needs additional work, quick estimate is 1-4 h work…

Needs additional work, quick estimate is 2-10 h work…

Is done in current version.

Needs additional work, quick estimate is 2-5 h work…

Done, at least partially.

I think the biggest challenge would be make the client side rendering optimal enough for large maps… Current version is way too slow, try e.g. the biggest example graph “galFiltered”.

Java3 · January 27, 2012, 7:58pm

Hi Johannes:

Your Add-on sounds cool. I wanted to use it for my project to display a Network graph of routers, systems, etc. I downloaded Vaadin (6.7.4) just yesterday and your Add-on was the first one that caught my eye.

Tried out a few examples and the tutorial and I found that Vaadin will be a great fit to our firm.

However, I am having some starting trouble with the add-on. I followed your instructions. Downloaded Cytoscape. Put the cytoscape.jar and the cytographer-0.5.1.jar in the …/WebContent/WEB-INF/lib/ directory. The directory already had vaadin-6.7.4.jar in it.

The Vaadin Widgeset Compilation kicked of automatically in Eclipse. But, I get the following compilation error. Any help will be appreciated.

Just for grins, to see if other Add-ons compile, I downloaded another Add-on, color-picker, and it compiled fine. Please let me know what I am doing wrong. Nobody else in the forum seem to be having this issue.

Thank you,
Java K. Colo

Starting GWT compiler
Loading inherited module ‘org.vaadin.cytographer.CytographerWidgetset’
Loading inherited module ‘org.vaadin.gwtgraphics.GWTGraphics’
[ERROR]
Unable to find ‘org/vaadin/gwtgraphics/GWTGraphics.gwt.xml’ on your classpath; could be a typo, or maybe you forgot to include a classpath entry for source?
[ERROR]
Line 22: Unexpected exception while processing element ‘inherits’
com.google.gwt.core.ext.UnableToCompleteException: (see previous log entries)
at com.google.gwt.dev.cfg.ModuleDefLoader.nestedLoad(ModuleDefLoader.java:262)
at com.google.gwt.dev.cfg.ModuleDefSchema$BodySchema.__inherits_begin(ModuleDefSchema.java:495)
at sun.reflect.GeneratedMethodAccessor1.invoke(Unknown Source)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
at java.lang.reflect.Method.invoke(Method.java:597)
at com.google.gwt.dev.util.xml.HandlerMethod.invokeBegin(HandlerMethod.java:230)
at com.google.gwt.dev.util.xml.ReflectiveParser$Impl.startElement(ReflectiveParser.java:274)
at com.sun.org.apache.xerces.internal.parsers.AbstractSAXParser.startElement(AbstractSAXParser.java:501)
at com.sun.org.apache.xerces.internal.parsers.AbstractXMLDocumentParser.emptyElement(AbstractXMLDocumentParser.java:179)
at com.sun.org.apache.xerces.internal.impl.dtd.XMLDTDValidator.emptyElement(XMLDTDValidator.java:788)
at com.sun.org.apache.xerces.internal.impl.XMLDocumentFragmentScannerImpl.scanStartElement(XMLDocumentFragmentScannerImpl.java:1343)
at com.sun.org.apache.xerces.internal.impl.XMLDocumentFragmentScannerImpl$FragmentContentDriver.next(XMLDocumentFragmentScannerImpl.java:2755)
at com.sun.org.apache.xerces.internal.impl.XMLDocumentScannerImpl.next(XMLDocumentScannerImpl.java:648)
at com.sun.org.apache.xerces.internal.impl.XMLDocumentFragmentScannerImpl.scanDocument(XMLDocumentFragmentScannerImpl.java:511)
at com.sun.org.apache.xerces.internal.parsers.XML11Configuration.parse(XML11Configuration.java:808)
at com.sun.org.apache.xerces.internal.parsers.XML11Configuration.parse(XML11Configuration.java:737)
at com.sun.org.apache.xerces.internal.parsers.XMLParser.parse(XMLParser.java:119)
at com.sun.org.apache.xerces.internal.parsers.AbstractSAXParser.parse(AbstractSAXParser.java:1205)
at com.sun.org.apache.xerces.internal.jaxp.SAXParserImpl$JAXPSAXParser.parse(SAXParserImpl.java:522)
at com.google.gwt.dev.util.xml.ReflectiveParser$Impl.parse(ReflectiveParser.java:331)
at com.google.gwt.dev.util.xml.ReflectiveParser$Impl.access$100(ReflectiveParser.java:48)
at com.google.gwt.dev.util.xml.ReflectiveParser.parse(ReflectiveParser.java:402)
at com.google.gwt.dev.cfg.ModuleDefLoader.nestedLoad(ModuleDefLoader.java:280)
at com.google.gwt.dev.cfg.ModuleDefSchema$BodySchema.__inherits_begin(ModuleDefSchema.java:495)
at sun.reflect.GeneratedMethodAccessor1.invoke(Unknown Source)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
at java.lang.reflect.Method.invoke(Method.java:597)
at com.google.gwt.dev.util.xml.HandlerMethod.invokeBegin(HandlerMethod.java:230)
at com.google.gwt.dev.util.xml.ReflectiveParser$Impl.startElement(ReflectiveParser.java:274)
at com.sun.org.apache.xerces.internal.parsers.AbstractSAXParser.startElement(AbstractSAXParser.java:501)
at com.sun.org.apache.xerces.internal.parsers.AbstractXMLDocumentParser.emptyElement(AbstractXMLDocumentParser.java:179)
at com.sun.org.apache.xerces.internal.impl.dtd.XMLDTDValidator.emptyElement(XMLDTDValidator.java:788)
at com.sun.org.apache.xerces.internal.impl.XMLDocumentFragmentScannerImpl.scanStartElement(XMLDocumentFragmentScannerImpl.java:1343)
at com.sun.org.apache.xerces.internal.impl.XMLDocumentFragmentScannerImpl$FragmentContentDriver.next(XMLDocumentFragmentScannerImpl.java:2755)
at com.sun.org.apache.xerces.internal.impl.XMLDocumentScannerImpl.next(XMLDocumentScannerImpl.java:648)
at com.sun.org.apache.xerces.internal.impl.XMLDocumentFragmentScannerImpl.scanDocument(XMLDocumentFragmentScannerImpl.java:511)
at com.sun.org.apache.xerces.internal.parsers.XML11Configuration.parse(XML11Configuration.java:808)
at com.sun.org.apache.xerces.internal.parsers.XML11Configuration.parse(XML11Configuration.java:737)
at com.sun.org.apache.xerces.internal.parsers.XMLParser.parse(XMLParser.java:119)
at com.sun.org.apache.xerces.internal.parsers.AbstractSAXParser.parse(AbstractSAXParser.java:1205)
at com.sun.org.apache.xerces.internal.jaxp.SAXParserImpl$JAXPSAXParser.parse(SAXParserImpl.java:522)
at com.google.gwt.dev.util.xml.ReflectiveParser$Impl.parse(ReflectiveParser.java:331)
at com.google.gwt.dev.util.xml.ReflectiveParser$Impl.access$100(ReflectiveParser.java:48)
at com.google.gwt.dev.util.xml.ReflectiveParser.parse(ReflectiveParser.java:402)
at com.google.gwt.dev.cfg.ModuleDefLoader.nestedLoad(ModuleDefLoader.java:280)
at com.google.gwt.dev.cfg.ModuleDefLoader$1.load(ModuleDefLoader.java:192)
at com.google.gwt.dev.cfg.ModuleDefLoader.doLoadModule(ModuleDefLoader.java:308)
at com.google.gwt.dev.cfg.ModuleDefLoader.loadFromClassPath(ModuleDefLoader.java:151)
at com.google.gwt.dev.GWTCompiler.run(GWTCompiler.java:162)
at com.google.gwt.dev.GWTCompiler$1.run(GWTCompiler.java:131)
at com.google.gwt.dev.CompileTaskRunner.doRun(CompileTaskRunner.java:87)
at com.google.gwt.dev.CompileTaskRunner.runWithAppropriateLogger(CompileTaskRunner.java:81)
at com.google.gwt.dev.GWTCompiler.main(GWTCompiler.java:138)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
at java.lang.reflect.Method.invoke(Method.java:597)
at com.vaadin.tools.WidgetsetCompiler$1.run(WidgetsetCompiler.java:85)
at java.lang.Thread.run(Thread.java:619)

Java3 · January 27, 2012, 8:54pm

Hi Johannes:

Got it to compile. My mistake. I copied the gwt-graphics-1.0.0.jar to the …/WebContent/WEB-INF/lib directory and it compiled successfully.

Kind regards,
Java K. Colo

Johannes · January 28, 2012, 8:00pm

Hi all!

I just updated the add-on into a version 0.6.0. The Cytographer handles now more dynamically graph updates like visual style changing, there isbetter zooming and rotation functionality, bug fixes etc. As always, please test it, and have a nice day

#johannest