Neo4j REST Server, GWT and JIT Part 3

This is a Proof of Concept (from GTUG BootCamp 2010), which is: Try to code a complete client side data-load (from some REST services) and graph visualization using Neo4j REST server, the Java Script Visualization Framework JIT and Google Web Toolkit.

This is a followup to Part 2

I integrated what was made by Sascha (@tommy1199). His task was to create the JavaScript JIT into GWT, which was more or less straight forward. The JavaScript code for the JIT force directed graph resides in the file ForceDirected.java. It has the JS code for create the graph createGraph(String injectedDivId) and for loading the JSON data void loadData(String data). This is what I am calling in my “final” call back handler. See the last lines of MySampleApplication.java below the static JITGraph property. (There you can choose if you want to see a RGraph or a ForceDirected graph as well… change the new statement).
The functionality of the Button remains the same, start the loading of the graph JSON object and (new:) call the initializer of the JIT graph. Have fun 🙂

Steps to test:

If you have done right you have setup Neo4j with the following graph:

If you are using the ForceDirected graph you should see this:

If you are using the RGraph graph you should see this, displaying the relation distance as circles with a great on click animation:

I must say I like this very much. Its a pure client application not using a classical web server. All is loaded and calculated by JavaScript code. And JIT is awesome too. Its easily possible to use other animations, other node graphics, overwrite node renderings, combine graphs, customize the page with other information etc. (but the relations are not directed, as far as I know :-(). Please have a look at the JIT demo page for examples of other ways to display graphs. (BTW JIT is “sold” to Sencha which is a great expertise in JavaScript, a good thing for the future.)

5 thoughts on “Neo4j REST Server, GWT and JIT Part 3

  1. Very cool,
    good spike, I hope we can use this input for a graph visualization component on the administration for Neo4j. Any severe limitations you were finding using JIT?

    /peter

  2. No limitations. The architecture is ok and flexible, but I can’t say anything about the production readiness of JIT.

  3. How large of a graph have you pumped into JIT?
    I integrated JIT into a prototype I’m working on. I used a $jit.ForceDirected() instance configured iaw the JIT Force Directed example 2 substituting an AJAX call to my server to get the extended graph JSON from my model. Smaller graphs, certainly larger than what you describe here, rendered quickly and were nicely interactive. Large graphs took an inordinate amount of time to render. I haven’t timed it, but consuming a 60k chunk of JSON could take several (10+) minutes to render. My future investigations will be how to manage the segment of a graph being visualized to keep performance of the display acceptable.

    I’m interested to hear if you have tried your prototype with larger graphs and what your experience has been. Perhaps there is a better approach than using $jit.loadJSON().
    — Kalin

  4. No sorry, I did not test really big amount of data. I just know the examples on the TheJIT page, which are rendered rather fast (depending on the browser you are using) and it can be confusing to see more that 20 nodes and/or relations (on an iPad its not easy to catch the node with a finger). So if you have to visualize big graphs you need to code some click and enhance/reload graph logic. But this should be easy to implement.

  5. I played around with JIT TreeMaps – you can easily show trees of 1000 nodes, but more will not be fun. You can dynamically load parts of the graph from a server, but the JIT demos do not include this, and I am not sure whether memory is freed, or whether your application will get slower and slower, the more you click around. In summary, it is possible, but needs some more testing.