Popoto.js is an interactive and customizable graph query builder to search in Neo4j databases it is built in Javascript with D3.js.
If you use npm npm install popoto.
Otherwise, download the latest release. You can load directly from unpkg:
<!-- Add default CSS reference -->
<head>
<link rel="stylesheet" href="https://unpkg.com/popoto/dist/popoto.min.css">
...
</head>
<body>
...
<!-- Add javascript dependencies (jQuery and D3)-->
<script src="https://unpkg.com/jquery" charset="utf-8"></script>
<script src="https://unpkg.com/d3" charset="utf-8"></script>
<!-- Add javascript -->
<script src="https://unpkg.com/popoto"></script>A full set of live examples with sample data sets can be found in Nhogs/popoto-examples GitHub repository.
- Edit the "index.html" file, by default this application is based on Neo4j movie graph example.
- Change the value of "popoto.rest.CYPHER_URL" property to your running server REST API. The default value is "http://localhost:7474/db/data/transaction/commit".
- Change the value of "popoto.rest.AUTHORIZATION" with an authorized user credentials, see comments in index.html file for details.
- Update the list of labels defined in "popoto.provider.node.Provider" definition. All node labels that could be found in the graph should be added in this list.
- Add any other customization you need in this file. See https://github.com/Nhogs/popoto-examples for detailed configuration examples.
- Open index.html file in your preferred web browser to see the result.
- Click on a node to display and select a value, click on "plus" button on a node to retrieve its relations and uses right click to remove a value.