Popoto.js is a JavaScript library built with D3.js providing a graph based search interface generated in HTML and SVG usable on any modern browser.
This library generates an interactive graph query builder into any website or web based application to create advanced queries on Neo4j databases and display the results.
Video of a full example application of Popoto.js on a Neo4j graph database containing restaurant data
Popoto.js supports all "modern" browsers (all but IE8 and below) and Neo4j 2.0 or higher as labels are required for customizations.
Every different components provided by Popoto.js listed below can be used and included independently anywhere in your web application. You just need to bind a component to a container ID in your page and the content will be generated automatically.
The graph query builder component is a user friendly interface generated in SVG to discover and build a query using data dynamically extracted from the graph database. This graph is generated in SVG based on the Force Layout features provided by D3.js.
The graph is highly and easily customizable with a few JavaScript and CSS configurations. It is possible to change for example the SVG generated for a node, to use custom images, change the attributes constraints to use in the query or the labels displayed for a kind of node.
The graph built is translated into a Cypher query and executed through the Neo4j REST API and the displayed results are updated on every graph modifications.
Video example of graph query builder:
Labels or taxonomy filter
The label or taxonomy filter tree (optional) is generated from configuration, it defines all the Neo4j labels that can be searched with the graph.
Once selected it defines the root node type target of the query. All results returned will be of this type. This is also the root node used to discover the relations.
The generated query viewer (optional) is a dynamic and interactive textual representation of the graph. The graph is translated into a phrase describing the exact semantic of the generated query.
Label providers can be configured to generate localized labels or custom representations for relations.
The Cypher query viewer (optional) works like the textual query viewer except that instead of a phrase the Cypher query is displayed. This is the same query sent to Neo4j to get the results.
This feature is designed mainly for advanced users. Popoto.js can be used for example as a graphical Cypher query builder tool with this functionality.
