prepare 3.0.0-RC1 version

update readme with Neo4j driver settings update rollup config update index.html example page
Nhogs · Aug 10, 2021 · c829fff · c829fff
1 parent e159d6c
commit c829fff
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 158 deletions.
diff --git a/README.md b/README.md
@@ -80,8 +80,22 @@ For source version:
 
 ## Quick start guide:
  - Edit the "index.html" file, by default this application is based on Neo4j movie graph example.
- - Change the value of `popoto.rest.CYPHER_URL` property to your running server REST API. The default value is `http://localhost:7474/db/data/transaction/commit`.
- - Change the value of "popoto.rest.AUTHORIZATION" with an authorized user credentials, see comments in index.html file for details.
+ - Create your driver instance following Neo4j developer guide: https://neo4j.com/developer/javascript/
+```javascript
+const driver = neo4j.driver(
+    "neo4j://dff437fa.databases.neo4j.io", // Unencrypted 
+    //"neo4j+s://dff437fa.databases.neo4j.io", //Encrypted with Full Certificate
+    neo4j.auth.basic("popoto", "popotopassword"),
+    //{disableLosslessIntegers: true} // Enabling native numbers
+);
+```
+ - Change the value of `popoto.runner.DRIVER = driver` to your running server driver instance.
+ - If needed you can change the default session creation to add parameters:
+```javascript
+popoto.runner.createSession = function () {
+    return runner.DRIVER.session({defaultAccessMode: "READ"})
+};
+```
  - Update the list of labels defined in "popoto.provider.node.Provider" definition. All node labels to display in the graph should be added in this list.
  - Add any other customization you need in this file. See [Nhogs/popoto-examples](https://github.com/Nhogs/popoto-examples) for detailed configuration examples.
  - Open index.html file in your preferred web browser to see the result.

diff --git a/index.html b/index.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
-<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">
+    <link rel="stylesheet" href="/dist/popoto.min.css">
     <style>
         #popoto-graph:fullscreen {
             width: 100%;
@@ -25,6 +25,29 @@
             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">
@@ -61,35 +84,46 @@
     </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 -->
 
-<!-- Jquery is only used in popoto.js to send ajax POST request on Neo4j REST API -->
-<!-- This dependency will definitely be removed in future releases -->
-<script src="https://unpkg.com/jquery" charset="utf-8"></script>
-<script src="https://unpkg.com/d3" charset="utf-8"></script>
-<script src="dist/popoto.min.js" charset="utf-8"></script>
+<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>
+
     /**
-     * URL used to access Neo4j REST API to execute queries.
-     * Update this parameter to your running server instance.
+     * Create the neo4j driver to use in Popoto query runner
      *
-     * For more information on Neo4J REST API the documentation is available here: http://neo4j.com/docs/stable/rest-api-cypher.html
+     * See Neo4j driver documentation here:
+     * https://neo4j.com/docs/javascript-manual/current/get-started/
+     * https://neo4j.com/docs/api/javascript-driver/4.3/
      */
-    popoto.rest.CYPHER_URL = "http://localhost:7474/db/data/transaction/commit";
+    var driver = neo4j.driver(
+        "neo4j://dff437fa.databases.neo4j.io", // Unencrypted
+        //"neo4j+s://dff437fa.databases.neo4j.io", //Encrypted with Full Certificate
+        neo4j.auth.basic("popoto", "popotopassword"),
+        //{disableLosslessIntegers: true} // Enabling native numbers
+    );
 
     /**
-     * Add this authorization property if your Neo4j server uses basic HTTP authentication.
-     * The value of this property must be "Basic <payload>", where "payload" is a base64 encoded string of "username:password".
-     *
-     * "btoa" is a JavaScript function that can be used to encode the user and password value in base64 but it is recommended to directly use the Base64 value.
-     *
-     *  For example Base64 encoded value of "neo4j:password" is "bmVvNGo6cGFzc3dvcmQ="
-     *  Note that it is not a safe way to keep credentials as anyone can have access to this code in your web page.
+     * Set the driver to Popoto's query runner
      */
-    //popoto.rest.AUTHORIZATION = "Basic " + btoa("neo4j:password");
+    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.
@@ -137,13 +171,19 @@
      * 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;
-
-    /**
-     * Start popoto.js generation.
-     * The function requires the label to use as root element in the graph.
-     */
-    popoto.start("Person");
+    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>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "popoto",
-  "version": "3.0.0",
+  "version": "3.0.0-RC1",
   "description": "Graph based search interface for Neo4j database.",
   "keywords": [
     "popoto",

diff --git a/rollup.node.js b/rollup.node.js
@@ -5,12 +5,11 @@ var fs = require("fs"),
 rollup.rollup({
     input: "index.js",
     external: Object.keys(dependencies)
-}).then(function(bundle) {
+}).then(function (bundle) {
     return bundle.generate({format: "cjs"});
-}).then(function(result) {
-    var code = result.code;
-    return new Promise(function(resolve, reject) {
-        fs.writeFile("dist/popoto.node.js", code, "utf8", function(error) {
+}).then(function (result) {
+    return new Promise(function (resolve, reject) {
+        fs.writeFile("dist/popoto.node.js", result.output[0].code, "utf8", function (error) {
             if (error) return reject(error);
             else resolve();
         });