popoto
Version:
Graph based search interface for Neo4j database.
188 lines (162 loc) • 5.89 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>Popoto Search</title>
<link rel="stylesheet" href="./dist/popoto.min.css">
<style>
#popoto-graph:fullscreen {
width: 100%;
height: 100%;
}
#popoto-graph:-webkit-full-screen {
width: 100%;
height: 100%;
}
#popoto-graph:-moz-full-screen {
width: 100%;
height: 100%;
}
#popoto-graph:-ms-fullscreen {
width: 100%;
height: 100%;
}
#modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
#modal-content {
background-color: #fefefe;
color: #2e3138;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
</style>
</head>
<body class="ppt-body">
<section class="ppt-section-main">
<div class="ppt-section-header">
<span class="ppt-header-span">Graph</span> search
</div>
<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>
<div id="modal">
<div id="modal-content">
<p id="error-title">An error occurred while trying to start Popoto please check your configuration and/or the
console log:</p>
<p><code id="error-content">Error content</code></p>
</div>
</div>
<!---------------------->
<!-- Required scripts -->
<script src="/node_modules/d3/dist/d3.min.js" charset="utf-8"></script>
<script src="https://unpkg.com/neo4j-driver-lite" charset="utf-8"></script>
<script src="dist/popoto.js" charset="utf-8"></script>
<script>
/**
* 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+s://demo.neo4jlabs.com:7687",
neo4j.auth.basic("movies", "movies"),
);
/**
* Set the driver to Popoto's query runner
*/
popoto.runner.DRIVER = driver
// If needed session creation can also be overridden here
// popoto.runner.createSession = function () {
// return runner.DRIVER.session({defaultAccessMode: "READ"})
// };
/**
* 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;
/**
* For this version, popoto.js has been generated with debug traces you can activate with the following properties:
* The value can be one in 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;
driver.verifyConnectivity().then(function () {
/**
* Start popoto.js generation.
* The function requires the label to use as root element in the graph.
*/
popoto.start("Person");
}).catch(function (error) {
document.getElementById("modal").style.display = "block";
document.getElementById("error-content").innerText = error;
console.error(error)
})
</script>
</body>
</html>