Release 1.1.2

.env.hosted

@@ -1 +1 @@
-PUBLIC_URL=https://nielsdejong.nl/neodash
+PUBLIC_URL=https://neodash.graphapp.io

README.md

@@ -1,6 +1,6 @@
 # ⚡ NeoDash - Neo4j Dashboard Builder
 NeoDash is a lightweight web app to create Neo4j dashboards. 
-Writing Cypher is all that's required to build your first dashboard in minutes. Want to give NeoDash a spin right away? Try it here:  https://nielsdejong.nl/neodash/.
+Writing Cypher is all that's required to build your first dashboard in minutes. Want to give NeoDash a spin right away? Try it [online](https://neodash.graphapp.io/).
 
 You can also install NeoDash on Neo4j Desktop from the [Graph App Gallery](https://install.graphapp.io/).
 

doc/developer-guide.md

@@ -22,7 +22,7 @@ NeoDash will automatically connect to your active database.
 
 ![Graph App Gallery](./img/graphapp.png) 
 #### 2. Online
-The latest version of NeoDash will always be available at https://nielsdejong.nl/neodash.
+The latest version of NeoDash will always be available at https://neodash.graphapp.io.
 Your database credentials will only be cached in your browser.   
 
 #### 3. As a web app in your own hosted environment

package.json

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

public/style.css

@@ -124,6 +124,9 @@ code {
     box-shadow: none !important;
     -webkit-box-shadow: none !important;
 }
+html { scroll-behavior: smooth; }
+
+
 .tab {
     width: 250px;
     -webkit-box-flex: 0 !important;

release-notes.md

@@ -1,5 +1,6 @@
-### NeoDash 1.1.1 - Neo4j Dashboard Builder
-- Added dashboard sharing functionality.
-- Fixed unintuitive margins for bar chart reports.
-- Added abort button to save/load screen.
-- Added automatic fix for inconsistent DB url + encryption configurations.
+### NeoDash 1.1.2 - Neo4j Dashboard Builder
+- Changed base URL to https://neodash.graphapp.io
+- Resolved bug that didn't allow for connecting to a remote DBMS without encryption
+- Added customizable background color for dashboards using "background" Cypher parameter
+- Added option to hide table footers using "hideFooter" Cypher parameter
+- First experimental reports added

src/NeoDash.js

@@ -157,21 +157,19 @@ class NeoDash extends React.Component {
             var url = this.connection.url;
 
             // When specifying an encrypted connection, we don't need the bolt+s / neo4j+s scheme.
-            if (this.connection.encryption === "on" && url.startsWith("bolt+s://")){
+            if (this.connection.encryption === "on" && url.startsWith("bolt+s://")) {
                 url = url.replace("bolt+s://", "bolt://")
                 this.connection.url = url;
             }
-            if (this.connection.encryption === "on" && url.startsWith("neo4j+s://")){
+            if (this.connection.encryption === "on" && url.startsWith("neo4j+s://")) {
                 url = url.replace("neo4j+s://", "neo4j://")
                 this.connection.url = url;
             }
 
             if (!(url.startsWith("bolt://") || url.startsWith("bolt+routing://") || url.startsWith("neo4j://"))) {
                 url = "neo4j://" + url;
             }
-            let config = {
-                encrypted: (this.connection.encryption === "on") ? 'ENCRYPTION_ON' : 'ENCRYPTION_OFF'
-            };
+            let config = (this.connection.encryption === "on") ? {encrypted: 'ENCRYPTION_ON'} : {}
 
             var driver = neo4j.driver(
                 url,
@@ -940,6 +938,7 @@ class NeoDash extends React.Component {
                                            value: e.target.value
                                        })}/>;
 
+
         // if the page titles are loaded, build the list of tabs
         let tabslist = (this.state.pageTitles) ? this.state.pageTitles.map((t, i) => {
             let deletePageButton = <Button className="btn-floating btn-remove-tab"
@@ -1006,9 +1005,9 @@ class NeoDash extends React.Component {
                            tabs
                        }
                        style={{backgroundColor: '#111'}}>
+
             {saveLoadModal}{shareModal}
-            {(this.neoConnectionModal) ? this.neoConnectionModal : <div></div>
-            }
+            {(this.neoConnectionModal) ? this.neoConnectionModal : <div></div>}
         </Navbar>;
 
     }

src/card/NeoCard.js

@@ -19,6 +19,9 @@ import NeoPropertySelectReport from "./report/NeoPropertySelectReport";
 import NeoMapReport from "./report/NeoMapReport";
 import NeoMapFooter from "./footer/NeoMapFooter";
 import NeoIFrameReport from "./report/NeoIFrameReport";
+import NeoLiveTimeChartReport from "./report/experimental/NeoLiveTimeChartReport";
+import NeoSearchBarReport from "./report/experimental/NeoSearchBarReport";
+import NeoBigNumberReport from "./report/experimental/NeoBigNumberReport";
 
 
 let emptyAction = <div key={0}/>;
@@ -258,6 +261,15 @@ export class NeoCard extends React.Component {
         if (this.state.type === 'line') {
             this.setCardTypeToLineChart();
         }
+        if (this.state.type === 'bignumber') {
+            this.setCardTypeToBigNumberView();
+        }
+        if (this.state.type === 'searchbar') {
+            this.setCardTypeToSearchBar();
+        }
+        if (this.state.type === 'time') {
+            this.setCardTypeToTimeChart();
+        }
         if (this.state.type === "graph") {
             this.setCardTypeToGraph();
         }
@@ -276,7 +288,7 @@ export class NeoCard extends React.Component {
         if (this.state.type === 'map') {
             this.setCardTypeToMap();
         }
-        if (this.state.success === false || this.state.query === "" || this.state.query === "\n"){
+        if (this.state.success === false || this.state.query === "" || this.state.query === "\n") {
             this.state.action = emptyAction;
         }
         return state
@@ -298,36 +310,54 @@ export class NeoCard extends React.Component {
     setCardTypeToTableView() {
         this.state.content =
             <NeoTableReport connection={this.props.connection}
-                      rows={this.state.height == 4 ? NeoTableReport.normalRowCount : NeoTableReport.tallRowCount}
-                      page={this.state.page}
-                      query={this.state.query}
-                      stateChanged={this.stateChanged}
-                      params={this.state.parsedParameters}
-                      refresh={this.state.refresh}
+                            rows={this.state.height == 4 ? NeoTableReport.normalRowCount : NeoTableReport.tallRowCount}
+                            page={this.state.page}
+                            query={this.state.query}
+                            stateChanged={this.stateChanged}
+                            params={this.state.parsedParameters}
+                            refresh={this.state.refresh}
             />
-
+        if (this.state.parsedParameters && !this.state.parsedParameters.hideFooter) {
             this.state.action =
                 <NeoTableFooter page={this.state.page} key={0} data={this.state.data} onChange={this.stateChanged}/>
+        }
 
     }
 
+    /**
+     * Updates the card's report to a table.
+     */
+    setCardTypeToBigNumberView() {
+        this.state.content =
+            <NeoBigNumberReport connection={this.props.connection}
+                                page={this.state.page}
+                                query={this.state.query}
+                                stateChanged={this.stateChanged}
+                                onSelectionChange={this.onSelectionChange}
+                                params={this.state.parsedParameters}
+                                refresh={this.state.refresh}
+            />
+        this.state.action = emptyAction;
+    }
+
+
     /**
      * Updates the card's report to a bar chart.
      */
     setCardTypeToBarChart() {
         this.state.content =
             <NeoBarChartReport connection={this.props.connection}
-                         page={this.state.page}
-                         query={this.state.query}
-                         clientWidth={(this.cardRef.current) ? this.cardRef.current.clientWidth : 0}
-                         id={this.props.id}
-                         stateChanged={this.stateChanged}
-                         propertiesSelected={this.state.propertiesSelected}
-                         onNodeLabelUpdate={this.updateBarPropertySelect}
-                         params={this.state.parsedParameters}
-                         refresh={this.state.refresh}
-                         width={this.state.width}
-                         height={this.state.height}
+                               page={this.state.page}
+                               query={this.state.query}
+                               clientWidth={(this.cardRef.current) ? this.cardRef.current.clientWidth : 0}
+                               id={this.props.id}
+                               stateChanged={this.stateChanged}
+                               propertiesSelected={this.state.propertiesSelected}
+                               onNodeLabelUpdate={this.updateBarPropertySelect}
+                               params={this.state.parsedParameters}
+                               refresh={this.state.refresh}
+                               width={this.state.width}
+                               height={this.state.height}
             />
     }
 
@@ -337,20 +367,42 @@ export class NeoCard extends React.Component {
     setCardTypeToLineChart() {
         this.state.content =
             <NeoLineChartReport connection={this.props.connection}
-                          page={this.state.page}
-                          query={this.state.query}
-                          clientWidth={(this.cardRef.current) ? this.cardRef.current.clientWidth : 0}
-                          id={this.props.id}
-                          stateChanged={this.stateChanged}
-                          propertiesSelected={this.state.propertiesSelected}
-                          onNodeLabelUpdate={this.updateLinePropertySelect}
-                          params={this.state.parsedParameters}
-                          refresh={this.state.refresh}
-                          width={this.state.width}
-                          height={this.state.height}
+                                page={this.state.page}
+                                query={this.state.query}
+                                clientWidth={(this.cardRef.current) ? this.cardRef.current.clientWidth : 0}
+                                id={this.props.id}
+                                stateChanged={this.stateChanged}
+                                propertiesSelected={this.state.propertiesSelected}
+                                onNodeLabelUpdate={this.updateLinePropertySelect}
+                                params={this.state.parsedParameters}
+                                refresh={this.state.refresh}
+                                width={this.state.width}
+                                height={this.state.height}
             />
     }
 
+    /**
+     * Updates the card's report to a line chart.
+     */
+    setCardTypeToTimeChart() {
+        this.state.content =
+            <NeoLiveTimeChartReport connection={this.props.connection}
+                                    page={this.state.page}
+                                    query={this.state.query}
+                                    clientWidth={(this.cardRef.current) ? this.cardRef.current.clientWidth : 0}
+                                    id={this.props.id}
+                                    stateChanged={this.stateChanged}
+                                    propertiesSelected={this.state.propertiesSelected}
+                                    onNodeLabelUpdate={function () {
+                                    }}
+                                    params={this.state.parsedParameters}
+                                    refresh={this.state.refresh}
+                                    width={this.state.width}
+                                    height={this.state.height}
+            />
+        this.state.action = emptyAction;
+    }
+
     /**
      * Updates the card's report to a graph visualization.
      */
@@ -420,6 +472,20 @@ export class NeoCard extends React.Component {
         this.state.action = emptyAction;
     }
 
+    /**
+     * Update the card's report to a search bar view.
+     */
+    setCardTypeToSearchBar() {
+        this.state.content =
+            <NeoSearchBarReport
+                connection={this.props.connection}
+                query={'return true'}
+                data={this.state.query}
+                stateChanged={this.stateChanged}
+                refresh={this.state.refresh}/>
+        this.state.action = emptyAction;
+    }
+
     /**
      * Update the card's report to a Markdown view.
      */
@@ -434,7 +500,7 @@ export class NeoCard extends React.Component {
                 refresh={this.state.refresh}/>
         this.state.action = emptyAction;
     }
-    
+
     /**
      * Update the card's report to a property selection.
      */
@@ -483,6 +549,7 @@ RETURN DISTINCT n.\`${property}\` as value LIMIT 4`;
      * For selection reports, the selected value has changed. This should be propagated to other reports.
      */
     onSelectionChange(label, property, propertyId, value) {
+
         this.props.onChange({
             label: "GlobalParameterChanged",
             value: {label: label, property: property, propertyId: propertyId, value: value}
@@ -528,9 +595,9 @@ RETURN DISTINCT n.\`${property}\` as value LIMIT 4`;
         this.state.page += 1;
         this.state.action =
             <NeoBarChartFooter propertiesSelected={this.state.propertiesSelected} page={this.state.page} key={0}
-                                  data={this.state.data}
-                                  onChange={this.stateChanged}
-                                  categories={labels} values={labels}
+                               data={this.state.data}
+                               onChange={this.stateChanged}
+                               categories={labels} values={labels}
             />
         this.setState(this.state);
     }
@@ -542,9 +609,9 @@ RETURN DISTINCT n.\`${property}\` as value LIMIT 4`;
         this.state.page += 1;
         this.state.action =
             <NeoLineChartFooter propertiesSelected={this.state.propertiesSelected} page={this.state.page} key={0}
-                                   data={this.state.data}
-                                   onChange={this.stateChanged}
-                                   categories={labels} values={labels}
+                                data={this.state.data}
+                                onChange={this.stateChanged}
+                                categories={labels} values={labels}
             />
 
         this.setState(this.state);
@@ -562,10 +629,10 @@ RETURN DISTINCT n.\`${property}\` as value LIMIT 4`;
 
 
         this.state.action = <NeoMapFooter key={0} nodeLabels={Object.keys(labels)}
-                                               width={this.props.width}
-                                               params={this.state.parsedParameters}
+                                          width={this.props.width}
+                                          params={this.state.parsedParameters}
 
-                                               onChange={this.stateChanged}/>;
+                                          onChange={this.stateChanged}/>;
 
     }
 
@@ -591,29 +658,33 @@ RETURN DISTINCT n.\`${property}\` as value LIMIT 4`;
 
 
         this.state.action = <NeoGraphVisFooter key={0} nodeLabels={Object.keys(labels)}
-                                           width={this.props.width}
-                                           params={this.state.parsedParameters}
-                                           properties={Object.values(labels).map((labelChoices, index) => {
-                                               let options = {}
-                                               labelChoices.forEach(choice =>
-                                                   options[(index + "-" + choice)] = choice
-                                               )
-                                               return options;
-                                           })}
-                                           onChange={this.stateChanged}/>;
+                                               width={this.props.width}
+                                               params={this.state.parsedParameters}
+                                               properties={Object.values(labels).map((labelChoices, index) => {
+                                                   let options = {}
+                                                   labelChoices.forEach(choice =>
+                                                       options[(index + "-" + choice)] = choice
+                                                   )
+                                                   return options;
+                                               })}
+                                               onChange={this.stateChanged}/>;
 
     }
 
     /**
      * Render the NeoCard component with the currently selected report.
      */
     render() {
+        let backgroundColor = (this.state.parsedParameters.background) ? this.state.parsedParameters.background + "" : "";
         return <Col l={this.state.width} m={12} s={12}>
             <div ref={this.cardRef}>
                 <Card
                     actions={[this.state.action]}
-                    style={{height: (this.state.height * 100 + 22 * ((this.state.height / 4) - 1)) + 'px'}}
-                    className={"neo-card medium white darken-5 paginated-card"}
+                    style={{
+                        backgroundColor: backgroundColor,
+                        height: (this.state.height * 100 + 22 * ((this.state.height / 4) - 1)) + 'px'
+                    }}
+                    className={"neo-card medium darken-5 paginated-card"}
                     closeIcon={this.closeIcon}
                     revealIcon={(this.props.editable) ? <Icon>more_vert</Icon> : <div></div>}
                     textClassName="black-text"

src/card/NeoCardSettings.js

@@ -20,11 +20,12 @@ class NeoCardSettings extends React.Component {
         'map': 'Map',
         'select': 'Selection',
         'iframe': 'iFrame',
-        'text': 'Markdown',
+        'text': 'Markdown'
     };
 
     // A dictionary of available card sizes.
     sizeOptions = {
+        // 3: 'Tiny (3x4)',
         4: 'Small (4x4)',
         6: 'Medium (6x4)',
         8: 'Large (8x4)',