2.0.7 (#73)

## NeoDash 2.0.7
Application functionality:
- Added standalone 'dashboard viewer' mode.
- Added option to save/load dashboards from other Neo4j databases.

Reports/Visualizations:
- Fixed bug in creating line charts.
- Added support for datetime axis in line charts.
- Added auto-locale formatting to number values in single value / table reports.
- Added unified renderer for value types.
- Updated default font size for single value reports.
- Added optional deep-link button for graph visualizations.
- Added option to disable auto-running a report, to let users explore the query first.
- Minor styling tweaks to the graph views.

For Developers:
- Added more documentation on extending the app.
- New security-vetted docker image available on Docker hub.

Author: nielsdejong

README.md

@@ -42,26 +42,75 @@ To build the app for production:
 - deploy the contents of the build folder to a web server. You should then be able to run the web app.
 
 
-### Build Docker image
+## Build Docker image
 Make sure you have a recent version of `docker` installed.
-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:
+On a Unix-like system you can run  `./tools/docker-build.bash` to build the multi-stage NeoDash image.
+
+After this, you can run Neo4j in a container. On Unix (Mac/Linux) systems:
 ```
 $ cd tools/
-$ ./docker-build-run_unix.bash --port=$YOUR_PORT
+$ ./docker-run-unix.bash 
 ```
+
 If you use Windows, you should have installed WSL. In WSL, you can run the script as follows:
 ```
 $ cd tools/
-$ ./docker-build-run_windows.bash --port=$YOUR_PORT
+$ ./docker-run-windows.bash
 ```
-Then visit localhost with the chosen port in your browser.
+Then visit `http://localhost:8080` with the chosen port in your browser.
 
 A pre-built Docker image is available [on DockerHub](https://hub.docker.com/r/nielsdejong/neodash). 
 
+## Run in standalone mode
+NeoDash can be deployed in a 'standalone mode' for dashboard viewers. This mode will:
+- Disable all editing options
+- Have a hardcoded Neo4j URL and database name
+- Load a dashboard from Neo4j with a fixed name.
+
+The diagram below illustrates how NeoDash standalone mode can be deployed next to a standard 'Editor Mode' instance:
+
+![](doc/standalone-architecture.png)
+
+You can configure an instance to run as standalone by changing the variables in `tools/docker-run-unix.bash`, or, if you're not using docker, directly modifying `public/config.json`. Note that the editor mode is determined at runtime by the React app, and *not* at build time. You therefore do not need to (re-)build a docker image.
+
  ## Extending NeoDash
+There are two categories of extensions to NeoDash you can build:
+- Core Dashboard Functionality
+- Custom Reports
+
+The first will require some knowledge about React, Redux, and app internals. Some advanced level knowledge is therefore highly recommended. The second is much simpler, and you should be able to plug in your own visualizations with minimal JS knowledge.
+
+### Core Dashboard Functionality
+To extend the core functionality of the app, it helps to be familiar with the following concepts:
+- ReactJS
+- Redux (State management for React)
+- Redux Selectors
+- Redux Thunks
+
+The image below contains a high-level overview of the component hierarchy within the application. The following conceptual building blocks are used to create the interface:
+- The Application
+- The Dashboard
+- Modals 
+- Drawer
+- Dashboard Header
+- Pages
+- Cards
+- Card Views
+- Card Settings
+- Card View Header
+- Report
+- Card View Footer
+- Card Settings Header
+- Card Settings Content
+- Card Settings Footer
+- Charts
+
+![](doc/component-hierarchy.png)
+
+ ### Custom Reports
  As of v2.0, NeoDash is easy to extend with your own visualizations. There are two steps to take to plug in your own charts:
 
-###  1. Create the React component
+####  1. Create the React component
 All NeoDash charts implement the interface defined in `src/charts/Chart.tsx`. A custom chart must do the same. the following parameter as passed to your chart from the application:
 - `records`: a list of Neo4j Records. This is the raw data returned from the Neo4j driver. 
 - `settings`: a dictionary of settings as defined under "advanced report settings" for each report. You can use these values to customize your visualization based on user input.
@@ -72,7 +121,7 @@ All NeoDash charts implement the interface defined in `src/charts/Chart.tsx`. A
 
 Make sure that your component renders a React component. your component will be automatically scaled to the size of the report. See the other charts in `src/charts/` for examples. 
 
-### 2. Extend the config to make your component selectable
+#### 2. Extend the config to make your component selectable
 
 To let users choose your visualization, you must add it to the app's report configuration. This config is located in `src/config/ReportConfig.tsx`, and defined by the dictionary `REPORT_TYPES`.
 

doc/component-hierarchy.png

@@ -1,6 +1,6 @@
 {
   "name": "neodash",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "NeoDash - Neo4j Dashboard Builder",
   "neo4jDesktop": {
     "apiVersion": "^1.2.0"

doc/standalone-architecture.png

@@ -0,0 +1,11 @@
+{
+    "ssoEnabled": false, 
+    "ssoDiscoveryUrl": "https://example.com", 
+    "standalone": false,
+    "standaloneProtocol": "neo4j",
+    "standaloneHost": "localhost",
+    "standalonePort": "7687",
+    "standaloneDatabase": "neo4j", 
+    "standaloneDashboardName": "My Dashboard",
+    "standaloneDashboardDatabase": "dashboards" 
+}

package.json

@@ -1,3 +1,23 @@
+## NeoDash 2.0.7
+Application functionality:
+- Added standalone 'dashboard viewer' mode.
+- Added option to save/load dashboards from other Neo4j databases.
+
+Reports/Visualizations:
+- Fixed bug in creating line charts.
+- Added support for datetime axis in line charts.
+- Added auto-locale formatting to number values in single value / table reports.
+- Added unified renderer for value types.
+- Updated default font size for single value reports.
+- Added optional deep-link button for graph visualizations.
+- Added option to disable auto-running a report, to let users explore the query first.
+- Minor styling tweaks to the graph views.
+
+For Developers:
+- Added more documentation on extending the app.
+- New security-vetted docker image available on Docker hub.
+
+
 ## 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.

public/config.json

@@ -10,8 +10,8 @@ import NeoNotificationModal from '../modal/NotificationModal';
 import NeoWelcomeScreenModal from '../modal/WelcomeScreenModal';
 import { removeReportRequest } from '../page/PageThunks';
 import { connect } from 'react-redux';
-import { applicationGetConnection, applicationGetShareDetails, applicationGetOldDashboard, applicationHasNeo4jDesktopConnection, applicationHasAboutModalOpen, applicationHasCachedDashboard, applicationHasConnectionModalOpen, applicationIsConnected, applicationHasWelcomeScreenOpen, applicationGetDebugState } from '../application/ApplicationSelectors';
-import { createConnectionThunk, createConnectionFromDesktopIntegrationThunk, setDatabaseFromNeo4jDesktopIntegrationThunk, handleSharedDashboardsThunk, onConfirmLoadSharedDashboardThunk } from '../application/ApplicationThunks';
+import { applicationGetConnection, applicationGetShareDetails, applicationGetOldDashboard, applicationHasNeo4jDesktopConnection, applicationHasAboutModalOpen, applicationHasCachedDashboard, applicationHasConnectionModalOpen, applicationIsConnected, applicationHasWelcomeScreenOpen, applicationGetDebugState, applicationGetStandaloneSettings, applicationGetSsoSettings } from '../application/ApplicationSelectors';
+import { createConnectionThunk, createConnectionFromDesktopIntegrationThunk, setDatabaseFromNeo4jDesktopIntegrationThunk, handleSharedDashboardsThunk, onConfirmLoadSharedDashboardThunk, loadApplicationConfigThunk } from '../application/ApplicationThunks';
 import { clearDesktopConnectionProperties, clearNotification, resetShareDetails, setAboutModalOpen, setConnected, setConnectionModalOpen, setDashboardToLoadAfterConnecting, setOldDashboard, setStandAloneMode, setWelcomeScreenOpen } from '../application/ApplicationActions';
 import { resetDashboardState } from '../dashboard/DashboardActions';
 import { NeoDashboardPlaceholder } from '../dashboard/DashboardPlaceholder';
@@ -24,20 +24,24 @@ import { loadDashboardThunk } from '../dashboard/DashboardThunks';
 import { NeoLoadSharedDashboardModal } from '../modal/LoadSharedDashboardModal';
 
 /**
+ * This is the main application component for NeoDash.
+ * It contains:
+ * - The Dashboard component
+ * - A number of modals (pop-up windows) that handle connections, loading/saving dashboards, etc.
  * 
+ * Parts of the application state are retrieved here and passed to the relevant compoenents.
+ * State-changing actions are also dispatched from here. See `ApplicationThunks.tsx`, `ApplicationActions.tsx` and `ApplicationSelectors.tsx` for more info.
  */
 const Application = ({ connection, connected, hasCachedDashboard, oldDashboard, clearOldDashboard,
-    connectionModalOpen, aboutModalOpen, loadDashboard, hasNeo4jDesktopConnection, shareDetails,
+    connectionModalOpen, ssoSettings, standaloneSettings, aboutModalOpen, loadDashboard, hasNeo4jDesktopConnection, shareDetails,
     createConnection, createConnectionFromDesktopIntegration, onResetShareDetails, onConfirmLoadSharedDashboard,
     initializeApplication, resetDashboard, onAboutModalOpen, onAboutModalClose, getDebugState,
     welcomeScreenOpen, setWelcomeScreenOpen, onConnectionModalOpen, onConnectionModalClose }) => {
 
     const [initialized, setInitialized] = React.useState(false);
-
     if (!initialized) {
-        initializeApplication();
         setInitialized(true);
-
+        initializeApplication(initialized);
     }
 
     // Only render the dashboard component if we have an active Neo4j connection.
@@ -55,6 +59,9 @@ const Application = ({ connection, connected, hasCachedDashboard, oldDashboard,
                 open={connectionModalOpen}
                 dismissable={connected}
                 connection={connection}
+                ssoSettings={ssoSettings}
+                standalone={standaloneSettings.standalone}
+                standaloneSettings={standaloneSettings}
                 createConnection={createConnection}
                 onConnectionModalClose={onConnectionModalClose} ></NeoConnectionModal>
             <NeoWelcomeScreenModal
@@ -87,6 +94,8 @@ const mapStateToProps = state => ({
     connection: applicationGetConnection(state),
     shareDetails: applicationGetShareDetails(state),
     oldDashboard: applicationGetOldDashboard(state),
+    ssoSettings: applicationGetSsoSettings(state),
+    standaloneSettings: applicationGetStandaloneSettings(state),
     connectionModalOpen: applicationHasConnectionModalOpen(state),
     aboutModalOpen: applicationHasAboutModalOpen(state),
     welcomeScreenOpen: applicationHasWelcomeScreenOpen(state),
@@ -110,18 +119,8 @@ const mapDispatchToProps = dispatch => ({
     },
     resetDashboard: _ => dispatch(resetDashboardState()),
     clearOldDashboard: _ => dispatch(setOldDashboard(null)),
-    initializeApplication: _ => {
-        dispatch(clearDesktopConnectionProperties());
-        dispatch(setDatabaseFromNeo4jDesktopIntegrationThunk());
-        const old = localStorage.getItem('neodash-dashboard');
-        dispatch(setOldDashboard(old));
-        dispatch(setConnected(false));
-        dispatch(setDashboardToLoadAfterConnecting(null));
-        dispatch(setStandAloneMode(false));
-        dispatch(setWelcomeScreenOpen(true));
-        dispatch(clearNotification());
-        dispatch(handleSharedDashboardsThunk());
-        dispatch(setConnectionModalOpen(false));
+    initializeApplication: (initialized) => {
+        dispatch(loadApplicationConfigThunk());
     },
     onResetShareDetails: _ => {
         dispatch(setWelcomeScreenOpen(true));

release-notes.md

@@ -1,3 +1,6 @@
+/**
+ * This file contains all state-changing actions relevant for the main application.
+ */
 
 export const CLEAR_NOTIFICATION = 'APPLICATION/CLEAR_NOTIFICATION';
 export const clearNotification = () => ({
@@ -41,6 +44,12 @@ export const setConnectionProperties = (protocol: string, url: string, port: str
     payload: { protocol, url, port, database, username, password },
 });
 
+export const SET_BASIC_CONNECTION_PROPERTIES = 'APPLICATION/SET_BASIC_CONNECTION_PROPERTIES';
+export const setBasicConnectionProperties = (protocol: string, url: string, port: string, database: string, username: string, password: string) => ({
+    type: SET_CONNECTION_PROPERTIES,
+    payload: { protocol, url, port, database, username, password },
+});
+
 export const SET_DESKTOP_CONNECTION_PROPERTIES = 'APPLICATION/SET_DESKTOP_CONNECTION_PROPERTIES';
 export const setDesktopConnectionProperties = (protocol: string, url: string, port: string, database: string, username: string, password: string) => ({
     type: SET_DESKTOP_CONNECTION_PROPERTIES,
@@ -73,14 +82,31 @@ export const setShareDetailsFromUrl = (type: string, id: string, standalone: boo
     payload: { type, id, standalone, protocol, url, port, database, username, password },
 });
 
+export const SET_STANDALONE_ENABLED = 'APPLICATION/SET_STANDALONE_ENABLED';
+export const setStandaloneEnabled = (standalone: boolean, standaloneProtocol: string, standaloneHost: string, standalonePort: string, standaloneDatabase: string, standaloneDashboardName: string, standaloneDashboardDatabase: string ) => ({
+    type: SET_STANDALONE_ENABLED,
+    payload: { standalone, standaloneProtocol, standaloneHost, standalonePort, standaloneDatabase, standaloneDashboardName, standaloneDashboardDatabase },
+});
+
 export const SET_STANDALONE_MODE = 'APPLICATION/SET_STANDALONE_MODE';
-export const setStandAloneMode = (standalone: boolean) => ({
-    type: SET_STANDALONE_MODE,
+export const setStandaloneMode = (standalone: boolean ) => ({
+    type: SET_STANDALONE_ENABLED,
     payload: { standalone },
 });
+export const SET_STANDALONE_DASHBOARD_DATEBASE = 'APPLICATION/SET_STANDALONE_DASHBOARD_DATEBASE';
+export const setStandaloneDashboardDatabase = (dashboardDatabase: string) => ({
+    type: SET_STANDALONE_DASHBOARD_DATEBASE,
+    payload: { dashboardDatabase }
+});
+
+export const SET_SSO_ENABLED = 'APPLICATION/SET_SSO_ENABLED';
+export const setSSOEnabled = (enabled: boolean, discoveryUrl: string) => ({
+    type: SET_SSO_ENABLED,
+    payload: { enabled, discoveryUrl },
+});
 
 export const SET_DASHBOARD_TO_LOAD_AFTER_CONNECTING = 'APPLICATION/SET_DASHBOARD_TO_LOAD_AFTER_CONNECTING';
 export const setDashboardToLoadAfterConnecting = (id: any) => ({
     type: SET_DASHBOARD_TO_LOAD_AFTER_CONNECTING,
     payload: { id },
-});
+});

src/application/Application.tsx

@@ -1,10 +1,13 @@
 /**
- * Reducers define changes to the application state when a given action
+ * Reducers define changes to the application state when a given action is taken.
  */
 
 import {
-    CLEAR_DESKTOP_CONNECTION_PROPERTIES, CLEAR_NOTIFICATION, CREATE_NOTIFICATION, RESET_SHARE_DETAILS, SET_ABOUT_MODAL_OPEN, SET_CONNECTED,
-    SET_CONNECTION_MODAL_OPEN, SET_CONNECTION_PROPERTIES, SET_DASHBOARD_TO_LOAD_AFTER_CONNECTING, SET_DESKTOP_CONNECTION_PROPERTIES, SET_OLD_DASHBOARD, SET_SHARE_DETAILS_FROM_URL, SET_STANDALONE_MODE, SET_WELCOME_SCREEN_OPEN
+    CLEAR_DESKTOP_CONNECTION_PROPERTIES, CLEAR_NOTIFICATION, CREATE_NOTIFICATION, 
+    RESET_SHARE_DETAILS, SET_ABOUT_MODAL_OPEN, SET_CONNECTED,
+    SET_CONNECTION_MODAL_OPEN, SET_CONNECTION_PROPERTIES,
+    SET_DASHBOARD_TO_LOAD_AFTER_CONNECTING, SET_DESKTOP_CONNECTION_PROPERTIES, SET_OLD_DASHBOARD, 
+    SET_SHARE_DETAILS_FROM_URL, SET_SSO_ENABLED, SET_STANDALONE_DASHBOARD_DATEBASE, SET_STANDALONE_ENABLED, SET_STANDALONE_MODE, SET_WELCOME_SCREEN_OPEN
 } from "./ApplicationActions";
 
 const update = (state, mutations) =>
@@ -46,7 +49,7 @@ export const applicationReducer = (state = initialState, action: { type: any; pa
             return state;
         }
         case CLEAR_NOTIFICATION: {
-            state = update(state, { notificationTitle: null, notificationMessage: null })
+            state = update(state, { notificationTitle: null, notificationMessage: null, notificationIsDismissable: null })
             return state;
         }
         case SET_CONNECTED: {
@@ -69,11 +72,34 @@ export const applicationReducer = (state = initialState, action: { type: any; pa
             state = update(state, { welcomeScreenOpen: open })
             return state;
         }
+        case SET_STANDALONE_DASHBOARD_DATEBASE : {
+            const { dashboardDatabase } = payload;
+            state = update(state, { standaloneDashboardDatabase: dashboardDatabase });
+            return state;
+        }
         case SET_STANDALONE_MODE: {
             const { standalone } = payload;
             state = update(state, { standalone: standalone })
             return state;
         }
+        case SET_SSO_ENABLED: {
+            const { enabled, discoveryUrl } = payload;
+            state = update(state, { ssoEnabled: enabled, ssoDiscoveryUrl: discoveryUrl })
+            return state;
+        }
+        case SET_STANDALONE_ENABLED: {
+            const { standalone, standaloneProtocol, standaloneHost, standalonePort, standaloneDatabase, standaloneDashboardName, standaloneDashboardDatabase } = payload;
+            state = update(state, {
+                standalone: standalone,
+                standaloneProtocol: standaloneProtocol,
+                standaloneHost: standaloneHost,
+                standalonePort: standalonePort,
+                standaloneDatabase: standaloneDatabase,
+                standaloneDashboardName: standaloneDashboardName, 
+                standaloneDashboardDatabase: standaloneDashboardDatabase
+            })
+            return state;
+        }
         case SET_OLD_DASHBOARD: {
             const { text } = payload;
             state = update(state, { oldDashboard: text })

src/application/ApplicationActions.tsx

@@ -1,6 +1,10 @@
 import { initialState } from "../dashboard/DashboardReducer";
 import _ from 'lodash';
 
+/**
+ * Selectors define a way to retrieve parts of the global application state for a sub-component.
+ */
+
 export const applicationHasNotification = (state: any) => {
     return state.application.notificationMessage != null;
 }
@@ -9,6 +13,10 @@ export const getNotification = (state: any) => {
     return state.application.notificationMessage;
 }
 
+export const getNotificationIsDismissable = (state: any) => {
+    return state.application.notificationTitle !== "Unable to load application configuration";
+}
+
 export const getNotificationTitle = (state: any) => {
     return state.application.notificationTitle;
 }
@@ -45,6 +53,25 @@ export const applicationHasAboutModalOpen = (state: any) => {
     return state.application.aboutModalOpen;
 }
 
+export const applicationGetSsoSettings = (state: any) => {
+    return {
+        'ssoEnabled': state.application.ssoEnabled,
+        'ssoDiscoveryUrl': state.application.ssoDiscoveryUrl
+    };
+}
+
+export const applicationGetStandaloneSettings = (state: any) => {
+    return {
+        "standalone": state.application.standalone,
+        "standaloneProtocol": state.application.standaloneProtocol,
+        "standaloneHost": state.application.standaloneHost,
+        "standalonePort": state.application.standalonePort,
+        "standaloneDatabase": state.application.standaloneDatabase,
+        "standaloneDashboardName": state.application.standaloneDashboardName,
+        "standaloneDashboardDatabase": state.application.standaloneDashboardDatabase
+    }
+}
+
 export const applicationHasWelcomeScreenOpen = (state: any) => {
     return state.application.welcomeScreenOpen;
 }
@@ -63,7 +90,7 @@ export const applicationHasCachedDashboard = (state: any) => {
 export const applicationGetDebugState = (state: any) => {
     const copy = JSON.parse(JSON.stringify(state));
     copy.application.connection.password = "************";
-    if(copy.application.desktopConnection){
+    if (copy.application.desktopConnection) {
         copy.application.desktopConnection.password = "************";
     }
     return copy;