UNPKG

6.07 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5 <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
6 <title>Popoto Search</title>
7 <link rel="stylesheet" href="/dist/popoto.min.css">
8 <style>
9 #popoto-graph:fullscreen {
10 width: 100%;
11 height: 100%;
12 }
13
14 #popoto-graph:-webkit-full-screen {
15 width: 100%;
16 height: 100%;
17 }
18
19 #popoto-graph:-moz-full-screen {
20 width: 100%;
21 height: 100%;
22 }
23
24 #popoto-graph:-ms-fullscreen {
25 width: 100%;
26 height: 100%;
27 }
28
29 #modal {
30 display: none;
31 position: fixed;
32 z-index: 1;
33 padding-top: 100px;
34 left: 0;
35 top: 0;
36 width: 100%;
37 height: 100%;
38 overflow: auto;
39 background-color: rgb(0, 0, 0);
40 background-color: rgba(0, 0, 0, 0.4);
41 }
42
43 #modal-content {
44 background-color: #fefefe;
45 color: #2e3138;
46 margin: 15% auto;
47 padding: 20px;
48 border: 1px solid #888;
49 width: 80%;
50 }
51 </style>
52</head>
53<body class="ppt-body">
54
55<section class="ppt-section-main">
56 <div class="ppt-section-header">
57 <span class="ppt-header-span">Graph</span> search
58 </div>
59
60 <div class="ppt-container-graph">
61 <nav id="popoto-taxonomy" class="ppt-taxo-nav">
62 <!-- Label/taxonomy filter will be generated here -->
63 </nav>
64 <div id="popoto-graph" class="ppt-div-graph">
65 <!-- Graph will be generated here-->
66 </div>
67 </div>
68
69 <div id="popoto-query" class="ppt-container-query">
70 <!-- Query viewer will be generated here -->
71 </div>
72
73 <div id="popoto-cypher" class="ppt-container-cypher">
74 <!-- Cypher query viewer will be generated here -->
75 </div>
76
77 <div class="ppt-section-header">
78 <!-- The total results count is updated with a listener defined below -->
79 RESULTS <span id="result-total-count" class="ppt-count"></span>
80 </div>
81
82 <div id="popoto-results" class="ppt-container-results">
83 <!-- Results will be generated here -->
84 </div>
85
86</section>
87<div id="modal">
88 <div id="modal-content">
89 <p id="error-title">An error occurred while trying to start Popoto please check your configuration and/or the
90 console log:</p>
91 <p><code id="error-content">Error content</code></p>
92 </div>
93</div>
94
95<!---------------------->
96<!-- Required scripts -->
97
98<script src="/node_modules/d3/dist/d3.min.js" charset="utf-8"></script>
99<script src="https://unpkg.com/neo4j-driver-lite" charset="utf-8"></script>
100<script src="dist/popoto.js" charset="utf-8"></script>
101
102<script>
103
104 /**
105 * Create the neo4j driver to use in Popoto query runner
106 *
107 * See Neo4j driver documentation here:
108 * https://neo4j.com/docs/javascript-manual/current/get-started/
109 * https://neo4j.com/docs/api/javascript-driver/4.3/
110 */
111 var driver = neo4j.driver(
112 "neo4j://dff437fa.databases.neo4j.io", // Unencrypted
113 //"neo4j+s://dff437fa.databases.neo4j.io", //Encrypted with Full Certificate
114 neo4j.auth.basic("popoto", "popotopassword"),
115 //{disableLosslessIntegers: true} // Enabling native numbers
116 );
117
118 /**
119 * Set the driver to Popoto's query runner
120 */
121 popoto.runner.DRIVER = driver
122
123 // If needed session creation can also be overridden here
124 // popoto.runner.createSession = function () {
125 // return runner.DRIVER.session({defaultAccessMode: "READ"})
126 // };
127
128 /**
129 * Define the Label provider you need for your application.
130 * This configuration is mandatory and should contain at least all the labels you could find in your graph model.
131 *
132 * In this version only nodes with a label are supported.
133 *
134 * By default If no attributes are specified Neo4j internal ID will be used.
135 * These label provider configuration can be used to customize the node display in the graph.
136 * See www.popotojs.com or example for more details on available configuration options.
137 */
138 popoto.provider.node.Provider = {
139 "Person": {
140 "returnAttributes": ["name", "born"],
141 "constraintAttribute": "name",
142 "autoExpandRelations": true // if set to true Person nodes will be automatically expanded in graph
143 },
144 "Movie": {
145 "returnAttributes": ["title", "released", "tagline"],
146 "constraintAttribute": "title"
147 }
148 };
149
150 /**
151 * Here a listener is used to retrieve the total results count and update the page accordingly.
152 * This listener will be called on every graph modification.
153 */
154 popoto.result.onTotalResultCount(function (count) {
155 document.getElementById("result-total-count").innerHTML = "(" + count + ")";
156 });
157
158 /**
159 * The number of results returned can be changed with the following parameter.
160 * Default value is 100.
161 *
162 * Note that in this current version no pagination mechanism is available in displayed results
163 */
164 //popoto.query.RESULTS_PAGE_SIZE = 100;
165
166
167 /**
168 * For this version, popoto.js has been generated with debug traces you can activate with the following properties:
169 * The value can be one in DEBUG, INFO, WARN, ERROR, NONE.
170 *
171 * With INFO level all the executed cypher query can be seen in the navigator console.
172 * Default is NONE
173 */
174 popoto.logger.LEVEL = popoto.logger.LogLevels.INFO;
175
176 driver.verifyConnectivity().then(function () {
177 /**
178 * Start popoto.js generation.
179 * The function requires the label to use as root element in the graph.
180 */
181 popoto.start("Person");
182 }).catch(function (error) {
183 document.getElementById("modal").style.display = "block";
184 document.getElementById("error-content").innerText = error;
185 console.error(error)
186 })
187</script>
188</body>
189</html>