UNPKG

5.89 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+s://demo.neo4jlabs.com:7687",
113 neo4j.auth.basic("movies", "movies"),
114 );
115
116 /**
117 * Set the driver to Popoto's query runner
118 */
119 popoto.runner.DRIVER = driver
120
121 // If needed session creation can also be overridden here
122 // popoto.runner.createSession = function () {
123 // return runner.DRIVER.session({defaultAccessMode: "READ"})
124 // };
125
126 /**
127 * Define the Label provider you need for your application.
128 * This configuration is mandatory and should contain at least all the labels you could find in your graph model.
129 *
130 * In this version only nodes with a label are supported.
131 *
132 * By default If no attributes are specified Neo4j internal ID will be used.
133 * These label provider configuration can be used to customize the node display in the graph.
134 * See www.popotojs.com or example for more details on available configuration options.
135 */
136 popoto.provider.node.Provider = {
137 "Person": {
138 "returnAttributes": ["name", "born"],
139 "constraintAttribute": "name",
140 "autoExpandRelations": true // if set to true Person nodes will be automatically expanded in graph
141 },
142 "Movie": {
143 "returnAttributes": ["title", "released", "tagline"],
144 "constraintAttribute": "title"
145 }
146 };
147
148 /**
149 * Here a listener is used to retrieve the total results count and update the page accordingly.
150 * This listener will be called on every graph modification.
151 */
152 popoto.result.onTotalResultCount(function (count) {
153 document.getElementById("result-total-count").innerHTML = "(" + count + ")";
154 });
155
156 /**
157 * The number of results returned can be changed with the following parameter.
158 * Default value is 100.
159 *
160 * Note that in this current version no pagination mechanism is available in displayed results
161 */
162 //popoto.query.RESULTS_PAGE_SIZE = 100;
163
164
165 /**
166 * For this version, popoto.js has been generated with debug traces you can activate with the following properties:
167 * The value can be one in DEBUG, INFO, WARN, ERROR, NONE.
168 *
169 * With INFO level all the executed cypher query can be seen in the navigator console.
170 * Default is NONE
171 */
172 popoto.logger.LEVEL = popoto.logger.LogLevels.INFO;
173
174 driver.verifyConnectivity().then(function () {
175 /**
176 * Start popoto.js generation.
177 * The function requires the label to use as root element in the graph.
178 */
179 popoto.start("Person");
180 }).catch(function (error) {
181 document.getElementById("modal").style.display = "block";
182 document.getElementById("error-content").innerText = error;
183 console.error(error)
184 })
185</script>
186</body>
187</html>