Finished pagination implemention, silent upgrade of save format from 1.0 and 1.1 and minor fix in graph viz view

Author: nielsdejong

README.md

@@ -10,6 +10,9 @@ Writing Cypher is all that's required to build your first dashboard in minutes.
 - Customizing your dashboard layout with a variety of report sizes.
 - Saving/loading dashboards as a JSON file.
 
+### Requirements    
+- Neo4j 4.0 or later
+- A modern web-browser / a Neo4j Desktop installation
 ### Documentation
 - For users, see [user-guide.md](./doc/user-guide.md).
 - Extending NeoDash? See [developer-guide.md](./doc/developer-guide.md).

package.json

@@ -1,7 +1,7 @@
 {
   "name": "neodash",
   "description": "NeoDash - Neo4j Dashboard Builder",
-  "version": "1.0.7",
+  "version": "1.1",
   "homepage": "./",
   "neo4jDesktop": {
     "apiVersion": "^1.2.0"

public/style.css

@@ -88,7 +88,7 @@ code {
     background-color: #444;
     opacity: 0.2;
     margin-left: 15px;
-    margin-top: -6px;
+    margin-top: -4px;
     margin-right: 15px;
 }
 
@@ -105,6 +105,10 @@ code {
 }
 .tab {
     width: 250px;
+    -webkit-box-flex: 0 !important;
+    -webkit-flex-grow: 0 !important;
+    -ms-flex-positive: 0 !important;
+    flex-grow: 0 !important;
 }
 .tab a .input-field input {
     width: 200px;
@@ -300,7 +304,7 @@ code {
 }
 
 #mobile-nav {
-    z-index: 2000;
+    z-index: 1001;
 }
 
 #NeoModal {

src/NeoDash.js

@@ -192,6 +192,10 @@ class NeoDash extends React.Component {
             // If a JSON string is available, try to parse it and set the state.
             try {
                 let loaded = JSON.parse(this.state.json)
+                // Quietly auto-upgrade to Neodash 1.1...
+                if (this.version === "1.1" && loaded.version === "1.0"){
+                    this.upgradeDashboardJson(loaded);
+                }
                 if (loaded.version && loaded.version !== this.version) {
                     this.stateChanged({
                         label: "CreateError",
@@ -214,6 +218,16 @@ class NeoDash extends React.Component {
         }
     }
 
+    upgradeDashboardJson(loaded) {
+        loaded.version = "1.1";
+        loaded.pages = [
+            {
+                title: "Page 1",
+                reports: loaded.reports
+            }
+        ]
+    }
+
     setPageStateFromLoadedJson(loaded) {
         this.state.pageTitles = loaded.pages.map((page) => {
             return page.title
@@ -301,7 +315,6 @@ class NeoDash extends React.Component {
      * @param update - a JSON dictionary {update, label} describing the change that was made.
      */
     stateChanged(update) {
-        console.log(update)
         if (update.label === "ConnectURLChanged") {
             this.connection.url = update.value;
         }
@@ -348,22 +361,24 @@ class NeoDash extends React.Component {
             this.state.count += 1;
         }
         if (update.label === "PageChanged") {
-            if (update.value.tagName !== "INPUT") {
-                // We should always click an Input element when switching pages
-                return
+            let tabClicked = null;
+            if (update.value.tagName === "INPUT") {
+                tabClicked = update.value.parentNode.parentNode.parentNode;
+
+            } else if (update.value.className === "input-field") {
+                tabClicked = update.value.parentNode.parentNode;
+            }
+            if (tabClicked == null) {
+                return;
             }
-            console.log(update.value)
-            console.log(update.value.parentNode)
-            console.log(update.value.parentNode.parentNode)
-            console.log(update.value.parentNode.parentNode.parentNode)
-            let tabClicked = update.value.parentNode.parentNode.parentNode;
             let index = Array.from(tabClicked.parentNode.children).indexOf(tabClicked);
             if (this.state.pagenumber === index) {
                 return;
             }
             this.state.pagenumber = index;
             let loaded = JSON.parse(this.state.json)
             this.generateDashboardCardComponents(loaded);
+
         }
         if (update.label === "PageTitleChanged") {
             let tabClicked = update.value.parentNode.parentNode.parentNode;

src/card/report/NeoGraphVisReport.js

@@ -287,6 +287,13 @@ class NeoGraphVisReport extends NeoReport {
         var prevSelected;
 
         function handePopUp(d, i) {
+            function prettifyNodePropertyAsString(d, item) {
+                if (d.properties[item]["low"]){
+                    return JSON.stringify(d.properties[item]["low"]);
+                }
+                return JSON.stringify(d.properties[item]);
+            }
+
             // Render a nice pop-up when we click a node.
             let circ = svg.selectAll("text").filter(c => d === c);
             svg.selectAll("tspan").remove();
@@ -304,7 +311,7 @@ class NeoGraphVisReport extends NeoReport {
                     .attr("dy", (i === 0) ? 60 : 15)
                     .attr("x", d.x)
                     .text(function () {
-                        let string = JSON.stringify(item) + ": " + JSON.stringify(d.properties[item]);
+                        let string = JSON.stringify(item) + ": " + prettifyNodePropertyAsString(d, item);
                         return string.substr(0, Math.min(100, string.length));
                     });
 
@@ -582,6 +589,9 @@ class NeoGraphVisReport extends NeoReport {
 
     }
 
+
+
+
     /**
      * After the component updates, remount and reset the visualization with the newly retrieved data.
      */

src/data/default_dashboard.json

@@ -31,12 +31,6 @@
         },
         {}
       ]
-    },
-    {
-      "title": "Page 2",
-      "reports": [
-        {}
-      ]
     }
   ]
 }