-
-
Notifications
You must be signed in to change notification settings - Fork 71
/
index.html
187 lines (162 loc) · 5.76 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE 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>