Visualization of Graph Databases Using Cytoscape.js

(UPDATED APR. 2024)  I have ample evidence from multiple sources that there are strong unmet needs in the area of visualization of graph databases.

And whenever there's a vacuum, vendors circle like vultures - with incomplete, non-customizable, and at times ridiculously expensive, closed-box proprietary solutions.

 

Fortunately, coming to the rescue is the awesome open-source cytoscape.js library,  an offshoot of the "Cytoscape" project of the Institute for Systems Biology, a project with a long history that goes back to 2002.

One can do amazing custom solutions, relatively easily, when one combines this Cytoscape library with:

 

1) a front-end framework such as Vue.js

 

2) backend libraries (for example in python) to prepare and serve the data

 

For example, a while back I created a visualizer for networks of chemical reactions, for another open-source project I lead (life123.science)

 

This visualizer will look and feel generally familiar to anyone who has ever used the standard Neo4j web browser, but it's totally under your control :  you can expand it as it suits you (for example, to add editing capabilities), and you can have it within your own web app.

 

Click her for --->  LIVE DEMO  

 

A screenshot: 

This article is a detailed "under-the-hood" view.  Future articles will provide simplified summaries.

This article is part of a growing, ongoing series on Graph Databases and Neo4j

A Minimalist Example

Let's temporarily backtrack to an even simpler example, to drive home how ridiculously easy it is to use Cytoscape.js 

Here's the creation of a simple interactive visualization, with just a few lines of code in an HTML file (the heavy lifting being done behind-the-scene by the Cytoscape.js library):

And here's the self-contained HTML file, same as shown in the above picture, with just a couple of extra lines to make it valid HTML.  Just download it to your desktop!  And then, yes, you can just double-click on it (or drag it to a browser) - and open it in your browser, with the interactive graph.

Division of Responsibilities

To keep in mind: cytoscape.js is just a "scaffold" to do the basic heavy lifting; you can make it to be as fancy as you want by personalizing it.

You can bring in:

 

1) the power of the renowned open-source visualization library D3.js, to do a fine levels of styling 

 

2) your favorite front-end framework (such as Vue.js or React) to facilitate other interactive support, such as menus and all sort of page elements for display and editing)

 

3) your favorite back-end framework (such as Flask or FastAPI) to query and prepare the data to pass to the front-end, as well as possibly manage database changes requested by the front end

 

With a relatively brief involvement by a full-stack developer, possibly even a junior one (or two separate developers for the front- and back- ends) you can implement just about everything you need and can imagine - finely "custom fitted", just about any way you need it!

Going Beyond Minimalist

In the previous section, we discussed a minimalist example of a tiny HTML file (which you can download to your desktop, and open with a browser) that uses only a few lines of JavaScript, to drive the embedded Cytoscape.js library to create a minimalist - but fully interactive - graph. 

 

The burning question is how to progress beyond that? 

 

The answer, to me, is to have:

 

1) a convenient backend python library to prepare the data for the frontend module. 
Typically, data scientists wanting to precise manage what to display will deal with just this part.

 

2) a deeply customizable frontend module, in the framework of your choice, to wrap around Cytoscape, and provide whatever display and controls you want on your UI - exquisitely customized to your needs like a tailor-fitted suit!  

The heavy lifting (the interactive "balls and links") is handled by Cytoscape; so, your front-end can concentrate on just whatever other bells and whistles you need on that page - such as forms and menus.
Typically, this module will be created by a front-end programmer : one module for each different use case that requires high customization.  Generic versions of this module (such as  the ones about to be released by the BrainAnnex open-source project) will suffice for a lot other cases.

What's Available?

A backend python library, and a front-end module (using the Vue.js framework, which in principle could be ported to another framework)... became available with BrainAnnex' recent  Beta 37 release, which is probably the last of the beta releases - since the project is getting much more stable, and ready to leave beta stage!

Here's an example of a screenshot from an early test of a Schema Viewer (an optional web app that is distributed alongside the foundational libraries of the Brain Annex project), with extra debugging information that demonstrates the handover of data (top box) from the backend to the front end:

You can use your own favorite technology stack, but this particular UI page is generated using Flask.

With Flask, inside the HTML file template (to be precise a "Jinja" template) there's a handover of the data from the backend to the front end : a Python dictionary gets converted to a JavaScript object, for use by the Vue.js object on that page.

Then, the JavaScript data gets passed to a module (a "Vue.js component") that embeds Cytoscape.js.  
Inside that module, Cytoscape manages the interactive "balls and arrows" (large shaded area at the bottom, in above screenshot) while the customizable rest of the Vue module manages the legend box (where it's saying "id: 1, labels: PERSON", etc) and whatever other feature we want - for example to edit graph data.  User edits result in update requests that the frontend sends to the server thru a web API.

Putting it All Together

(APRIL 2023 UPDATE) With the latest release of the open-source "BrainAnnex" libraries, one has full control, with considerable ease, of both the backend and the front-end, for :

• Data preparation
• Data update
• Serving the data, and offering updating operations, with a web API
• A powerful standard front-end framework to orchestrate all sorts of UI elements  (Vue.js, but in principle you could port that to your favorite framework)
• Cytoscape.js to manage the low-level interactive ball-and-rods displays

Voila', armed with that apparatus, it was fairly easy to implement a feature inside a web app : to display the "Schema" currently stored in the graph database ("Schema" is the data-integrity, etc, layer described here; but you can just think of it as a subset of the database.)

 

The current UI design opted to provide the ability to switch between 2 initial views at the click of a button (red highlight).   

 

View 1 ("breadth first"):

View 2 ("random"):

The default initial views of the graph are entirely managed by the Cytoscape.js library (I rearranged a handful of nodes by hand prior to taking the screenshots.)   More such views are available, and custom ones can be created; currently exploring these possibilities!

The button to switch the initial view is managed by the front-end framework (red box).  Likewise, when a node is clicked on (yellow highlight in View1, near the top), Cytoscape makes the data available, and the front-end framework creates the legend box at the top/right.

The legend box could be modified to provide editing capabilities as well.  Future releases of Brain Annex will explore that...

In short:  (Total Control of the Backend and Frontend) + (Visualization Details Managed from Cytoscape) = ONE CAN IMPLEMENT RELATIVELY EASILY ALL SORTS OF CUSTOM VISUALIZATION  

You can look under the hood in the Flask template file for this Schema Viewer.   That file is largely the HMTL scaffolding; the actual work - and the interface with the Cytoscape library - takes places inside the Vue component (module.)

Is Your Head Spinning?

This is an under-the-hood look at both the back- and front-end...  perhaps covering too much!  Future articles will digest individual parts.

Also, if you "just want something to use out of the box", a future article will address that!

Resources

Python library "PyGraphScape" : repository

Vue component "vue_cytoscape_2" :  repository

Cytoscape.js library official page

A great overview of Cytoscape

Under-the-hood Cytoscape:

Using Layouts in Cytoscape (very helpful!)

Styling Cytoscape 

This article is part of a growing, ongoing series on Graph Databases and Neo4j