Neo4j Cypher
The results of these queries are transformed by Ogma's parse.neo4j() function into Ogma's RawGraph format.
The neo4j session is closed at the end of the program.
Double click on a node to expand the graph.
This example is using a read-only instance of Neo4J hosted by GrapheneDB.
To use this example locally provide a Neo4j server 3.0.4+ running, instruction are provided within the example code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../build/ogma.min.js"></script>
<script src="https://unpkg.com/neo4j-driver@4.0.1/lib/browser/neo4j-web.min.js"></script>
<link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/highlightjs-cypher/dist/cypher.min.js"></script>
<style>
#graph-container {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
margin: 0;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
#info {
position: absolute;
color: #fff;
background: #141229;
font-size: 12px;
font-family: monospace;
padding: 5px;
top: 0;
left: 0;
white-space: pre;
}
.toolbar {
display: block;
position: absolute;
top: 20px;
right: 20px;
padding: 10px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
border-radius: 4px;
background: #ffffff;
color: #222222;
font-weight: 300;
min-width: 200px;
}
.toolbar h3 {
display: block;
font-weight: 300;
border-bottom: 1px solid #ddd;
color: #606060;
font-size: 1rem;
font-family: Arial, Helvetica, sans-serif;
}
.controls {
text-align: center;
margin-top: 5px;
}
.btn {
padding: 6px 8px;
background-color: white;
cursor: pointer;
font-size: 18px;
border: none;
border-radius: 5px;
outline: none;
}
.btn:hover {
color: #333;
background-color: #e6e6e6;
}
.menu {
border: 1px solid #ddd;
width: 80%;
font-size: 14px;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="graph-container"></div>
<div class="toolbar">
<h3>Current cypher query</h3>
<pre><code class="cypher" id="query-text"></code></pre>
<div class="controls">
<button id="layout" class="btn menu">Layout</button>
</div>
</div>
<div id="info">loading...</div>
<script>
'use strict';
hljs.initHighlightingOnLoad();
var ogma = new Ogma({
container: 'graph-container'
});
// Create a connection to the Neo4j database.
// change this URL to your local Neo4j database instance
var driver = neo4j.driver(
'bolt://hobby-chlkmilndikfgbkekcnlkjel.dbs.graphenedb.com:24787/',
neo4j.auth.basic('example', 'b.SKbqdJ4W59Zk.dQqSZRuJ1NoxwWcz'),
{ encrypted: true } // remove this to run it locally
);
var session = driver.session();
function toggleLoading() {
var el = document.querySelector('#info');
var enable = el.style.display;
el.style.display = enable === 'block' ? 'none' : 'block';
}
function getStartTemplate() {
return ['MATCH (n)', 'OPTIONAL MATCH (n)-[r]-(m)', 'RETURN n,r,m', 'LIMIT 5'].join('\n');
}
function getExpandQuery(id) {
return ['MATCH (n)-[r]-(m)', 'WHERE id(n) = ' + id, 'RETURN n,r,m', 'LIMIT 100'].join('\n');
}
function updateCypherQuery(query) {
var codeBlock = document.querySelector('#query-text');
codeBlock.innerText = query;
hljs.highlightBlock(codeBlock);
}
function sendQuery(id) {
var query = id ? getExpandQuery(id) : getStartTemplate();
toggleLoading();
updateCypherQuery(query)
return session.run(query)
.then(function (result) {
return ogma.parse.neo4j(result)
})
.then(function (graph) {
toggleLoading();
return ogma.addGraph(graph);
})
.then(function () {
return layout();
});
}
function layout() {
return ogma.layouts.forceLink({
duration: 550,
locate: { padding: 80 },
});
}
// Define what to use as node and edge captions.
ogma.styles.addEdgeRule({
text: {
content: function (e) {
return e.getData('neo4jType');
}
},
color: function (e) {
var labels = e.getData('neo4jType');
if (labels.includes('ACTED_IN')) {
return '#22b455';
}
if (labels.includes('DIRECTED')) {
return '#80ce87';
}
if (labels.includes('PRODUCED')) {
return '#92e5a1';
}
}
});
ogma.styles.addNodeRule({
text: {
content: function (n) {
if (n.getData('neo4jLabels').includes('Movie')) {
return n.getData('neo4jProperties.title');
}
if (n.getData('neo4jLabels').includes('Person')) {
return n.getData('neo4jProperties.name');
}
}
},
icon: {
content: function (n) {
if (n.getData('neo4jLabels').includes('Movie')) {
return "\uf008";
}
if (n.getData('neo4jLabels').includes('Person')) {
return "\uf007";
}
},
font: 'FontAwesome',
color: 'black',
minVisibleSize: 0
},
outerStroke: {
color: '#204829',
width: 2
},
color: 'white'
});
ogma.events.onDoubleClick(function (evt) {
if (evt.target && evt.target.isNode) {
sendQuery(evt.target.getId());
}
});
document.querySelector('#layout').addEventListener('click', function (evt) {
evt.preventDefault();
layout();
});
sendQuery();
</script>
</body>
</html>