Graph Explorer add-on: Highly interactive graph data visualization

Graph Explorer, a highly interactive UI component for graph data visualization,
now available on the Directory


Online demo
is live!

Add-on source code
issue tracker
demo source code
are available, too.

Looks really interesting.

Looks really nice.

Now I have to find a use-case for the addon in my application :wink:

Can’t get the online demo working in Chrome 19, works well in IE and FF. The progressbar keeps spinning.

Works fine in my Chrome 19. Only problem that I had was that some nodes are opening a bit wonky - I have to click on some of them three times to open them. Every time I click the nodes gets a bit repositioned but the node stays close. It seems that at the first click internally notes that the node is open, but it doesn’t update that detail to the UI. The second click closes internally, but it is already closed in the UI so nothing happens. The third click opens it as expected.

Jens, could you please
file a ticket
on that with steps to reproduce?

Works for me in Chrome 19. Maybe you have some browser plug-in that gets in the way? An ad-blocker perhaps?

I just released Graph Explorer version 0.2 and updated the online demo to it. The only visible change is that I’ve now put the loading indicator (a.k.a. wait spinner) in the center of the browser window, where it’s clearly visible. (There’s API changes, too, but you can’t see that from the demo.)

Can you try the demo again and check that the loading indicator appears when the app doesn’t seem to respond? If so, then the problem simply is that the Neo4J graph database at the backend is simply too slow in loading the data. Not too much I can do about that at the moment, unfortunately. It seems to cache the data in memory, though; subsequent loads of the same data appear to be faster. That’s probably why it appeared to you that the first clicked did nothing.

Please, try again and let me know your impressions! :slight_smile:

thx for the addon, looks very interesting.
I’d like to use it to create IT diagrams related to bussiness processes.

I’m trying to create a demo application, like yours, but I cannot find the classes that you use in your demo.
For example, Vertex class. I don’t find it, but I have found the Node class. Is the same or similar? Another example is GraphProvider Class. I cannot find it in com.vaadin.graph. I have found GraphRepository, but I’m not sure if it’s the same or how to use the Arc class that is needed by GraphRepository class.
I cannot even find them in the github repository.

Can you show another example about how to use the addon?


it seems that i was looking at an older repository. Now I’m on Neo4J repository and it looks more like the actual API…
Sorry :wink:


I tried importing the Neo4J demo from url []
1] resolved all dependent jar files by adding them one by one.
2] Added Neo4j jar files [tested these by creating a seperate sample neo4j graph project]

At this point, whenever I run the project it gives the below error message

“Widgetset does not contain implementation for com.vaadin.graph.GraphExplorer. Check its @ClientWidget mapping, widgetsets GWT module description file and re-compile your widgetset. In case you have downloaded a vaadin add-on package, you might want to refer to add-on instructions. Unrendered UIDL:”

Kindly let me know if I am missing something?
Thanks in advance

I have a requirement to create flow charts(similar to attached).
To achieve this, the nodes(GWT composite) and lines should be displayed together.

So the nodes(GWT composite), will display the table with multiple rows of textbox, dropdowns etc.
And the lines will connect the nodes.

I understand that flow chart requirement cannot be achieved using Graph Explorer, but I wanted to know that instead of text, can a composite be used?

This add on is very impressive and I personnaly thinks it is a killer feature.
I build my graph easely, but I have few question?
Is it possible to tune the rendering of the node?
How is it possible to capture simple and double click on the node in order to make action (like printing detail of node).

Thanks a lot of the works

Is there any ideas on porting to vaadin 7?

You need to compile the widgetset.

Nodes can contain custom HTML, but there is currently no easy way of putting other widgets inside of them. You can style them with CSS.

You can change the appearance of the nodes with CSS.
It’s possible to attach click listeners to nodes, but there is currently no public API for that. You could fork the code and hack it in yourself.

Ideas: yes. Time: no.

Graph Explorer is sufficiently complex that porting it to Vaadin 7 would require a major rewrite. I currently simply do not have sufficient time for this. :frowning:

This add seems absolutely great. To bad I use vaadin 7. I really want to use it :frowning:

I also still missing Vaadin 7 support. But in the meanwhile I have written a network graph protoype component by using the AbstractJavaScriptComponent class and the JavaScript library VIS (
). Perhaps an inspiration for one or the other developers who can not wait like me. Protoype project can be found here:
. Enjoy