2.0.6 (#65)

* Updated version number

* Expandable charts when not in edit mode

* Apply global parameter value to selection chart

All other charts apply the current global parameter value in their Cypher queries. To keep consistent also apply the state to the parameter selection chart.

* Get parameter value earlier to apply as default state

* Minor fixes to chart interface, reorganized code to be able to avoid uninitialized variables

* Added example on how to use maps when returning dictionaries

* Made connection modal dismissable when connected to Neo4j

* Made fullscreen reports work for maps and lines, now optionally available through dashboard settings

* Fixed load dashboard functionality to automatically pick up the selection stored in the dashboard

* Added button for returning to main menu screen

* Fixed z-index for fullscreen mode

* Revert some changes and add more comments

* Resolved rendering issues when loading parameter selection reports with prepopulated parameters

* Show placeholder when no query is specified

* Reset extra parameters on page load for parameter select report

* Pass Parameter Select value via hash to iframe without re-rendering (#49)

* Pass Parameter Select value via hash to iframe without re-rendering

* Pass all global variables to iframe via hash parameter

Configurable via advanced settings on iframe chart.

* Added example iFrame to documentation modal

Co-authored-by: Niels de Jong <[email protected]>

* Cleanup of global dashboard settings menu

* Improved user interface and examples

* Graph modal (#51)

* Show modal when clicking node/relation in graph with its properties

* Made node property hover & inspection of elements optional through advanced report settings

Co-authored-by: Niels de Jong <[email protected]>

* Resolved bug in rendering graphs with node pairs that have relationships in two directions between them

* Added option to manually specify node labels/property names in selection reports (for large databases)

* Updated release notes

* Added debug report button. Fixed table size issues by upgrading to latest datagrid version

* Fixed custom column width issue

* Fixed example documentation with new styling

* Support rendering native and custom types in Data Grid (#54)

* Support rendering native and custom types in Data Grid
* Update TableChart.tsx

* Resolved error with slow queries for single value reports

* Graph nodes stick after dragging, added option to store fixed graph layouts in dashboards

* Added experimental graph layouts

* Started adding manual timeout config, property selection for rel types, fixed alignment for graph inspect modal

* Finalized config for custom timeouts

* Fixed invalid lowercasing of share URL generation

* Added new types of parameter selection reports (relationship/free text)

* Updated all dependencies to latest version, made project work with node 17

* Fixed typo

* Updated README

* Clean up of dependencies, removed merge artifacts

* Default fullscreen option for reports, graphs fit to canvas automatically, saving dashboards is now checked

* Added tiny report sizes

* Fixed graph hover to match other app styling

* Resolved merge artifacts

* Added maximizing of card settings

* Added transposing option for tables

* Optimized cypher editor

* Updated dockerfile and bash scripts

* Fixed incorrect pagesizes for tables

* Added pie charts. Improved styling for graph inspection modals

* Updated release notes and README. Fixed deploy to AWS script

Co-authored-by: JipSogeti <[email protected]>
Co-authored-by: Niels de Jong <[email protected]>
Co-authored-by: Niels de Jong <[email protected]>

Author: 4 people

.npmignore

@@ -7,6 +7,6 @@ tsconfig.json
 yarn.lock
 node_modules
 *.tgz
-
+desktop.passphrase
 *.config.js
 desktop-signer.sh

README.md

@@ -15,10 +15,18 @@ There are three ways to run the application:
 
 
 # Developer Guide
-## Run & Build
+## Run locally with Docker
+Pull the latest image from Docker Hub to run the application locally:
+```
+# Run the application on http://localhost:8080
+docker pull nielsdejong/neodash:latest
+docker run -it --rm -p 8080:80 nielsdejong/neodash
+```
+
+## Run & Build using npm
 NeoDash is built with React. You'll need `npm` installed to run the web app.
 
-> Note - node V12 is currently required to build the application.
+> Use a recent version of `npm` and `node` to build NeoDash. The application has been tested with npm 8.3.1 & node v17.4.0.
 
 To run the application in development mode:
 - clone this repository.
@@ -33,17 +41,18 @@ To build the app for production:
 - execute `npm run build`. This will create a `build` folder in your project directory.
 - deploy the contents of the build folder to a web server. You should then be able to run the web app.
 
-### Build and run Docker image
+
+### Build Docker image
 Make sure you have a recent version of `docker` installed.
-On Unix-like system you can run  `./tools/neodash-build-run_unix.bash` to build the multi-stage NeoDash image & access it with nginx:
+On a Unix-like system you can run  `./tools/docker-build-run_unix.bash` to build the multi-stage NeoDash image & access it with nginx:
 ```
 $ cd tools/
-$ ./neodash-build-run_unix.bash --port=$YOUR_PORT
+$ ./docker-build-run_unix.bash --port=$YOUR_PORT
 ```
 If you use Windows, you should have installed WSL. In WSL, you can run the script as follows:
 ```
 $ cd tools/
-$ ./neodash-build-run_windows.bash --port=$YOUR_PORT
+$ ./docker-build-run_windows.bash --port=$YOUR_PORT
 ```
 Then visit localhost with the chosen port in your browser.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "neodash",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "NeoDash - Neo4j Dashboard Builder",
   "neo4jDesktop": {
     "apiVersion": "^1.2.0"
@@ -23,83 +23,63 @@
   ],
   "scripts": {
     "dev": "npx webpack-dev-server --mode development",
-    "build": "npx webpack --mode production && rm -rf build && mkdir build && cp -r public/* build/ && mkdir build/dist &&  mv dist/ build/",
+    "build": "npx webpack --mode production && cp -r public/* dist/",
     "sync": "aws s3 sync --acl public-read build s3://neodash.graphapp.io/preview",
     "test": "ts-mocha \"src/**/*.test.tsx\" --require @babel/register --recursive"
   },
   "keywords": [],
   "author": "Niels de Jong",
-  "devDependencies": {
-    "@babel/cli": "^7.8.3",
-    "@babel/core": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.14.5",
-    "@babel/preset-env": "^7.16.0",
-    "@babel/preset-react": "^7.16.0",
-    "@babel/preset-typescript": "^7.14.5",
-    "@babel/register": "^7.14.5",
-    "@graphapps/charts": "github:nielsdejong/charts#cd8bf3707d48f2c34ec6a1ad126cfd28b5ac3065",
-    "@types/chai": "^4.2.21",
-    "@types/expect": "^24.3.0",
-    "@types/leaflet": "^1.7.5",
-    "@types/mocha": "^8.2.3",
-    "@types/react-dom": "^17.0.9",
-    "@types/sinon": "^10.0.2",
-    "@types/styled-components": "^5.1.11",
-    "babel-loader": "^8.0.6",
-    "chai": "^4.3.4",
-    "css-loader": "^3.4.2",
-    "fetch-mock": "^9.11.0",
-    "mocha": "^9.0.2",
-    "node-fetch": "^2.6.1",
-    "react-hot-loader": "^4.12.19",
-    "sinon": "^11.1.1",
-    "style-loader": "^1.1.3",
-    "styled-components": "^5.3.0",
-    "ts-loader": "^9.2.3",
-    "ts-mocha": "^8.0.0",
-    "typescript": "^4.3.5",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "3.7.1"
-  },
   "dependencies": {
     "@babel/runtime": "^7.14.6",
-    "@emotion/react": "^11.7.1",
-    "@emotion/styled": "^11.6.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
-    "@material-ui/styles": "^4.11.4",
-    "@material-ui/system": "^4.12.1",
-    "@material-ui/utils": "^4.11.2",
-    "@mui/material": "^5.2.7",
-    "@mui/x-data-grid": "^5.2.1",
-    "@react-leaflet/core": "1.0.2",
-    "codemirror": "^5.63.3",
-    "cypher-codemirror": "^1.1.7",
+    "@mui/material": "^5.3.0",
+    "@mui/x-data-grid": "^5.2.2",
+    "@nivo/bar": "^0.79.1",
+    "@nivo/core": "^0.79.0",
+    "@nivo/line": "^0.79.1",
+    "@nivo/pie": "^0.79.1",
+    "babel-runtime": "^6.26.0",
+    "classnames": "^2.3.1",
+    "codemirror": "^5.65.1",
+    "cypher-codemirror": "github:nielsdejong/cypher-editor#c0eff97fc97f22355e60b57fb6f8dc26b16f9a5f",
     "d3-scale-chromatic": "^3.0.0",
-    "file-loader": "^6.2.0",
-    "graph-app-kit": "https://neo.jfrog.io/neo/api/npm/npm/graph-app-kit/-/graph-app-kit-1.0.4.tgz",
     "leaflet": "^1.7.1",
-    "loader-utils": "^2.0.0",
-    "neo4j-driver": "^4.3.2",
-    "react": "^17.0.1",
+    "react": "^17.0.2",
     "react-cool-dimensions": "^2.0.7",
-    "react-dom": "^16.12.0",
+    "react-dom": "^17.0.2",
     "react-force-graph-2d": "^1.23.8",
-    "react-highlight.js": "^1.0.7",
-    "react-leaflet": "3.1.0",
-    "react-leaflet-enhanced-marker": "^1.0.21",
-    "react-markdown": "^7.1.0",
-    "react-redux": "^7.2.4",
-    "react-use": "^17.2.4",
-    "redux": "^4.1.0",
+    "react-leaflet": "^3.2.5",
+    "react-leaflet-enhanced-marker": "github:nielsdejong/react-leaflet-enhanced-marker#603a7d73dc9b13a31ab1e8abfd932d63263b4af0",
+    "react-markdown": "^8.0.0",
+    "react-redux": "^7.2.6",
     "redux-devtools-extension": "^2.13.9",
     "redux-persist": "^6.0.0",
-    "redux-thunk": "^2.3.0",
-    "remark-gfm": "^3.0.0",
-    "reselect": "^4.0.0",
-    "source-map-loader": "^1.0.0",
+    "redux-thunk": "^2.4.1",
+    "remark-gfm": "^3.0.1",
+    "reselect": "^4.1.5",
     "use-neo4j": "^0.3.6"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.16.8",
+    "@babel/core": "^7.16.12",
+    "@babel/plugin-transform-runtime": "^7.16.10",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-typescript": "^7.16.7",
+    "@babel/register": "^7.16.9",
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
+    "babel-loader": "^8.2.3",
+    "css-loader": "^3.6.0",
+    "file-loader": "^6.2.0",
+    "react-hot-loader": "^4.13.0",
+    "source-map-loader": "^1.1.3",
+    "style-loader": "^1.1.3",
+    "styled-components": "^5.3.3",
+    "webpack": "^5.67.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.7.3"
   }
 }

public/index.html

@@ -32,7 +32,7 @@
 <body>
     <div id="root"></div>
     <noscript>Please enable JavaScript to view this site.</noscript>
-    <script src="dist/bundle.js"></script>
+    <script src="bundle.js"></script>
 </body>
 
 </html>

public/style.css

@@ -11,7 +11,10 @@
 .no-underline .MuiInput-underline::before {
     border-bottom: none;
 }
-
+.MuiContainer-root{
+    padding-left: 10px !important;
+    padding-right: 10px !important;
+}
 .large input {
     font-size: 20px;
     margin-top: -6px;
@@ -133,4 +136,9 @@
     bottom: 0;
     background: white;
     z-index: 1299;
+}
+
+.force-graph-container .graph-tooltip {
+    color: black !important;
+    background: none !important;
 }

release-notes.md

@@ -1,3 +1,27 @@
+## NeoDash 2.0.6
+Major version updates to all internal dependencies. 
+NeoDash 2.0.6 uses Node 17+, react 17+ and recent versions of all visualization libraries.
+
+Visualizations:
+- Added pie charts (Including examples and new demo dashboard).
+- Added setting to transpose table rows and columns.
+- Improved styling on graph pop-up windows.
+- Graph visualizations now auto-fit to the report size.
+- Added button to reset the zoom on a graph report.
+
+Parameter selection:
+- Added relationship property / free text selection options.
+
+Editor:
+- Improved performance of inbuilt Cypher editor.
+- Added button to maximize cards while in edit-mode.
+- All reports are now maximizable by default.
+- Added tiny report sizes.
+- Added option to override the default query timeout of twenty seconds.
+
+Other:
+- Updated docker image build scripts.
+- Fixed share link geneneration incorrectly removing capitals from usernames/passwords.
 
 ## NeoDash 2.0.5
 Graph report:

src/card/Card.tsx

@@ -1,6 +1,6 @@
 import Card from '@material-ui/core/Card';
 import Collapse from '@material-ui/core/Collapse';
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import NeoCardSettings from './settings/CardSettings';
 import NeoCardView from './view/CardView';
 import { connect } from 'react-redux';
@@ -46,6 +46,11 @@ const NeoCard = ({
     );
     const [collapseTimeout, setCollapseTimeout] = React.useState(report.collapseTimeout);
 
+    const [expanded, setExpanded] = useState(false);
+    const onToggleCardExpand = () => {
+        setExpanded(!expanded);
+    }
+    
     useEffect(() => {
         setSettingsOpen(report.settingsOpen);
     }, [report.settingsOpen])
@@ -76,6 +81,8 @@ const NeoCard = ({
                         width={report.width}
                         height={report.height}
                         title={report.title}
+                        expanded={expanded}
+                        onToggleCardExpand={onToggleCardExpand}
                         onGlobalParameterUpdate={onGlobalParameterUpdate}
                         onSelectionUpdate={(selectable, field) => onSelectionUpdate(index, selectable, field)}
                         onTitleUpdate={(title) => onTitleUpdate(index, title)}
@@ -99,6 +106,9 @@ const NeoCard = ({
                         type={report.type}
                         refreshRate={report.refreshRate}
                         cypherParameters={report.parameters}
+                        expanded={expanded}
+                        dashboardSettings={dashboardSettings}
+                        onToggleCardExpand={onToggleCardExpand}
                         reportSettings={report.settings}
                         reportSettingsOpen={report.advancedSettingsOpen}
                         onQueryUpdate={(query) => onQueryUpdate(index, query)}

src/card/CardReducer.tsx

@@ -91,7 +91,7 @@ export const cardReducer = (state = CARD_INITIAL_STATE, action: { type: any; pay
             const settings = (state.settings) ? (state.settings) : {};
 
             // Javascript is amazing, so "" == 0. Instead we check if the string length is zero...
-            if (value.toString().length == 0) {
+            if (value == undefined || value.toString().length == 0) {
                 delete settings[setting];
                 update(state, { settings: settings });
                 return state;

src/card/settings/CardSettings.tsx

@@ -7,15 +7,19 @@ import { CardContent } from '@material-ui/core';
 
 const NeoCardSettings = ({ settingsOpen, query, database, refreshRate, cypherParameters, width, height, type, reportSettings, reportSettingsOpen,
     onQueryUpdate, onSizeUpdate, onRefreshRateUpdate, onCypherParametersUpdate, onRemovePressed, onReportSettingUpdate,
-    onShiftLeftPressed, onShiftRightPressed, onToggleCardSettings, onTypeUpdate, onToggleReportSettings }) => {
+    onShiftLeftPressed, onShiftRightPressed, onToggleCardSettings, onTypeUpdate,
+     onToggleReportSettings, dashboardSettings, expanded, onToggleCardExpand }) => {
 
 
     const cardHeight = 10 + (120 * height) + (78 * Math.floor((height - 1) / 3)) + "px";
 
     const cardSettingsHeader = <NeoCardSettingsHeader
+        expanded={expanded}
+        onToggleCardExpand={onToggleCardExpand}
         onRemovePressed={onRemovePressed}
         onShiftLeftPressed={onShiftLeftPressed}
         onShiftRightPressed={onShiftRightPressed}
+        fullscreenEnabled={dashboardSettings.fullscreenEnabled}
         onToggleCardSettings={onToggleCardSettings} />
 
     // TODO - instead of hiding everything based on settingsopen, only hide the components that slow down render (cypher editor)
@@ -30,6 +34,7 @@ const NeoCardSettings = ({ settingsOpen, query, database, refreshRate, cypherPar
         type={type}
         onQueryUpdate={onQueryUpdate}
         onSizeUpdate={onSizeUpdate}
+        onReportSettingUpdate={onReportSettingUpdate}
         onRefreshRateUpdate={onRefreshRateUpdate}
         onCypherParametersUpdate={onCypherParametersUpdate}
         onTypeUpdate={onTypeUpdate}></NeoCardSettingsContent> : <CardContent style={{ paddingTop: "10px", paddingBottom: "10px" }}/>;
@@ -41,9 +46,8 @@ const NeoCardSettings = ({ settingsOpen, query, database, refreshRate, cypherPar
         onToggleReportSettings={onToggleReportSettings}
         onReportSettingUpdate={onReportSettingUpdate}></NeoCardSettingsFooter> : <div></div>;
 
-
     return (
-        <div style={{ overflowY: "auto" }}>
+        <div className={`card-view ${expanded ? "expanded" : ""}`} style={{ overflowY: "auto" }}>
             {cardSettingsHeader}
             <ReportItemContainer style={{ height: cardHeight, marginTop: "-20px" }} >
                 {cardSettingsContent}

src/card/settings/CardSettingsContent.tsx

@@ -10,7 +10,7 @@ import { CARD_SIZES } from '../../config/CardConfig';
 
 
 const NeoCardSettingsContent = ({ query, database, reportSettings, refreshRate, cypherParameters, width, height, type,
-    onQueryUpdate, onSizeUpdate, onRefreshRateUpdate, onCypherParametersUpdate, onTypeUpdate }) => {
+    onQueryUpdate, onSizeUpdate, onRefreshRateUpdate, onReportSettingUpdate, onCypherParametersUpdate, onTypeUpdate }) => {
 
 
     // Ensure that we only trigger a text update event after the user has stopped typing.
@@ -54,7 +54,7 @@ const NeoCardSettingsContent = ({ query, database, reportSettings, refreshRate,
 
 
     const SettingsComponent = REPORT_TYPES[type].settingsComponent;
-    const settings = REPORT_TYPES[type]["settingsComponent"] ? <SettingsComponent type={type} settings={reportSettings} database={database} query={query} onQueryUpdate={onQueryUpdate} /> :
+    const settings = REPORT_TYPES[type]["settingsComponent"] ? <SettingsComponent type={type} onReportSettingUpdate={onReportSettingUpdate} settings={reportSettings} database={database} query={query} onQueryUpdate={onQueryUpdate} /> :
     <>
         <NeoCodeField value={queryText}
             language={REPORT_TYPES[type]["inputMode"] ? REPORT_TYPES[type]["inputMode"] : "cypher"}

src/card/settings/CardSettingsHeader.tsx

@@ -7,8 +7,21 @@ import SaveIcon from '@material-ui/icons/Save';
 import DeleteIcon from '@material-ui/icons/Delete';
 import ChevronLeft from '@material-ui/icons/ChevronLeft';
 import ChevronRight from '@material-ui/icons/ChevronRight';
+import FullscreenIcon from '@material-ui/icons/Fullscreen';
+import { FullscreenExit } from '@material-ui/icons';
+
+const NeoCardSettingsHeader = ({ onRemovePressed, onShiftLeftPressed, onShiftRightPressed,
+     onToggleCardSettings, onToggleCardExpand, expanded, fullscreenEnabled }) => {
+    const maximizeButton = <IconButton aria-label="maximize"
+        onClick={onToggleCardExpand}>
+        <FullscreenIcon />
+    </IconButton>
+
+    const unMaximizeButton = <IconButton aria-label="un-maximize"
+        onClick={onToggleCardExpand}>
+        <FullscreenExit />
+    </IconButton>
 
-const NeoCardSettingsHeader = ({ onRemovePressed, onShiftLeftPressed, onShiftRightPressed, onToggleCardSettings }) => {
     return (
         <CardHeader
             avatar={<div style={{ marginTop: "-8px" }}>
@@ -25,7 +38,10 @@ const NeoCardSettingsHeader = ({ onRemovePressed, onShiftLeftPressed, onShiftRig
                     <ChevronRight />
                 </IconButton>
             </div>}
-            action={<IconButton aria-label="save" onClick={(e) => {e.preventDefault(); onToggleCardSettings()}}><SaveIcon /></IconButton>}
+             action={<>
+                {fullscreenEnabled ? (expanded ? unMaximizeButton : maximizeButton) : <></>}
+                {!expanded ? <IconButton aria-label="save" onClick={(e) => { e.preventDefault(); onToggleCardSettings() }}><SaveIcon /></IconButton> : <></>}
+            </>}
             title=""
             subheader="" />
     );