Simple graph search example

Create HTML page structure

This page contains only a div where the graph will be generated and includes the required scripts to use Popoto.js

<!DOCTYPE html>
<html>

<head>
    <title>Popoto graph search</title>

    <!-- Add Popoto default CSS styles -->
    <link rel="stylesheet" href="../../css/popoto.min.css">
</head>
<body>

    <!-- By default the graph is generated in the HTML element with
            ID "popoto-graph" -->
    <div id="popoto-graph" class="ppt-div-graph">
        <!-- Graph is generated here -->
    </div>

<!-- Required scripts -->
<script src="../../js/jquery-2.1.0.min.js" charset="utf-8"></script>
<script src="../../js/d3.v3.min.js" charset="utf-8"></script>
<script src="../../js/popoto.min.js" charset="utf-8"></script>
<script>
    // detailed below
</script>
</body>
</html>

Configure Popoto.js

All the configuration is done with JavaScript. In this example the code is added in the HTML page in a script tag after popoto.min.js reference.

First step is to set the cypher REST url.
It defines the URL used by Popoto.js to execute Cypher queries.

popoto.rest.CYPHER_URL = "http://localhost:7474/db/data/cypher";

Next step is to define the labels to use in the application.

// Define the list of label provider to customize the graph behavior:
// Only two labels are used in Neo4j movie graph example: "Movie" and "Person"
popoto.provider.nodeProviders = {
    "Movie": {
        "returnAttributes": ["title", "released", "tagline"],
        "constraintAttribute": "title"
    },
    "Person": {
        "returnAttributes": ["name", "born"],
        "constraintAttribute": "name"
    }
};

- returnAttributes defines the list of attributes to add in the RETURN part of generated Cypher query for nodes with this label. These attribute can then be used in the displayed result list

- constraintAttribute defines the attribute used to identify a node with this label. This attribute is used in the generated query when a value is selected on graph

Last step is to start Popoto.js on the node label to search and the div where to generate the graph.

// Start the generation using parameter as root label of the query.
popoto.start("Person");

Run the page

With this little JavaScript configuration the page is ready to use and the result look like this:

Video example of Popoto.js application on Neo4j Movie Graph

See live example using GrapheneDB.

This example can be downloaded here: simple-graph.zip.

The full set of examples can also be downloaded at once on the download page.

Next example: Add a query viewer