Getting started
To use popoto on your data you can follow this guide:
In this page reference Popoto CSS, JavaScript files and dependencies direclty from your installation or loaded from unpkg
Example:
<!-- Add default CSS reference -->
<link rel="stylesheet" href="https://unpkg.com/popoto/dist/popoto.min.css"><!-- Add Popoto script reference, will default to popoto.min.js -->
<script src="https://unpkg.com/popoto"></script>For source version:
<!-- Add Popoto script reference -->
<script src="https://unpkg.com/popoto/dist/popoto.js"></script><!DOCTYPE html>
<html>
<head>
<title>Popoto example</title>
<link rel="stylesheet" href="dist/popoto.min.css">
</head>
<body class="ppt-body">
<section class="ppt-section-main">
<div class="ppt-container-graph">
<nav id="popoto-taxonomy" class="ppt-taxo-nav">
<!-- Label/taxonomy filter will be generated here -->
</nav>
<div id="popoto-graph" class="ppt-div-graph">
<!-- Graph will be generated here-->
</div>
</div>
<div id="popoto-query" class="ppt-container-query">
<!-- Query viewer will be generated here -->
</div>
<div id="popoto-cypher" class="ppt-container-cypher">
<!-- Cypher query viewer will be generated here -->
</div>
<div class="ppt-section-header">
<!-- The total results count is updated with a listener defined below -->
RESULTS <span id="result-total-count" class="ppt-count"></span>
</div>
<div id="popoto-results" class="ppt-container-results">
<!-- Results will be generated here -->
</div>
</section>
<!-- Required scripts -->
<script src="https://unpkg.com/[email protected]" charset="utf-8"></script>
<script src="https://unpkg.com/neo4j-driver-lite" charset="utf-8"></script>
<script src="dist/popoto.min.js" charset="utf-8"></script>Define the Neo4j driver to connect to the database
/**
* Create the neo4j driver to use in Popoto query runner
*
* See Neo4j driver documentation here:
* https://neo4j.com/docs/javascript-manual/current/get-started/
* https://neo4j.com/docs/api/javascript-driver/4.3/
*/
var driver = neo4j.driver(
"neo4j://dff437fa.databases.neo4j.io", // Unencrypted
//"neo4j+s://dff437fa.databases.neo4j.io", //Encrypted with Full Certificate
neo4j.auth.basic("popoto", "popotopassword"),
//{disableLosslessIntegers: true} // Enabling native numbers
);
/**
* Set the driver to Popoto's query runner
*/
popoto.runner.DRIVER = driver /**
* Define the Label provider you need for your application.
* This configuration is mandatory and should contain at least all the labels you could find in your graph model.
*
* In this version only nodes with a label are supported.
*
* By default If no attributes are specified Neo4j internal ID will be used.
* These label provider configuration can be used to customize the node display in the graph.
* See www.popotojs.com or example for more details on available configuration options.
*/
popoto.provider.node.Provider = {
"Person": {
"returnAttributes": ["name", "born"],
"constraintAttribute": "name",
"autoExpandRelations": true // if set to true Person nodes will be automatically expanded in graph
},
"Movie": {
"returnAttributes": ["title", "released", "tagline"],
"constraintAttribute": "title"
}
}; /**
* Here a listener is used to retrieve the total results count and update the page accordingly.
* This listener will be called on every graph modification.
*/
popoto.result.onTotalResultCount(function (count) {
document.getElementById("result-total-count").innerHTML = "(" + count + ")";
}); /**
* The number of results returned can be changed with the following parameter.
* Default value is 100.
*
* Note that in this current version no pagination mechanism is available in displayed results
*/
popoto.query.RESULTS_PAGE_SIZE = 100; /**
* You can activate debug traces with the following properties:
* The value can be one of these values: DEBUG, INFO, WARN, ERROR, NONE.
*
* With INFO level all the executed cypher query can be seen in the navigator console.
* Default is NONE
*/
popoto.logger.LEVEL = popoto.logger.LogLevels.INFO; /**
* Start popoto.js generation.
* The function requires the label to use as root element in the graph.
*/
popoto.start("Person"); driver.verifyConnectivity().then(function () {
popoto.start("Person");
}).catch(function (error) {
// Handle error...
})