Fixed docker files, line chart views

src/application/Application.tsx

@@ -24,7 +24,13 @@ 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, ssoSettings, standaloneSettings, aboutModalOpen, loadDashboard, hasNeo4jDesktopConnection, shareDetails,

src/application/ApplicationActions.tsx

@@ -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 = () => ({

src/application/ApplicationReducer.tsx

@@ -1,11 +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,
+    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_ENABLED, SET_STANDALONE_MODE, SET_WELCOME_SCREEN_OPEN
+    SET_DASHBOARD_TO_LOAD_AFTER_CONNECTING, SET_DESKTOP_CONNECTION_PROPERTIES, SET_OLD_DASHBOARD, 
+    SET_SHARE_DETAILS_FROM_URL, SET_SSO_ENABLED, SET_STANDALONE_ENABLED, SET_STANDALONE_MODE, SET_WELCOME_SCREEN_OPEN
 } from "./ApplicationActions";
 
 const update = (state, mutations) =>

src/application/ApplicationSelectors.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;
 }

src/application/ApplicationThunks.tsx

@@ -1,43 +1,48 @@
 import { createDriver } from "use-neo4j";
 import { loadDashboardFromNeo4jByNameThunk, loadDashboardFromNeo4jByUUIDThunk, loadDashboardThunk } from "../dashboard/DashboardThunks";
-import { createNotificationThunk, createNotificationUndismissableThunk } from "../page/PageThunks";
+import { createNotificationThunk } from "../page/PageThunks";
 import { QueryStatus, runCypherQuery } from "../report/CypherQueryRunner";
 import {
     setConnected, setConnectionModalOpen, setConnectionProperties, setDesktopConnectionProperties,
-    resetShareDetails, setShareDetailsFromUrl, setWelcomeScreenOpen, setDashboardToLoadAfterConnecting, setOldDashboard, clearDesktopConnectionProperties, clearNotification, setSSOEnabled, setStandaloneEnabled, setAboutModalOpen, setStandaloneMode
+    resetShareDetails, setShareDetailsFromUrl, setWelcomeScreenOpen, setDashboardToLoadAfterConnecting,
+    setOldDashboard, clearDesktopConnectionProperties, clearNotification, setSSOEnabled, setStandaloneEnabled,
+    setAboutModalOpen, setStandaloneMode
 } from "./ApplicationActions";
 
+/**
+ * Application Thunks (https://redux.js.org/usage/writing-logic-thunks) handle complex state manipulations.
+ * Several actions/other thunks may be dispatched from here.
+ */
 
 export const createConnectionThunk = (protocol, url, port, database, username, password) => (dispatch: any, getState: any) => {
     try {
         const driver = createDriver(protocol, url, port, username, password)
         console.log("Attempting to connect...")
         const validateConnection = (records) => {
             console.log("Confirming connection was established...")
-            console.log(protocol, url, port, database, username, password)
             if (records && records[0] && records[0]["error"]) {
                 dispatch(createNotificationThunk("Unable to establish connection", records[0]["error"]));
             } else if (records && records[0] && records[0].keys[0] == "connected") {
-                
+
                 dispatch(setConnectionProperties(protocol, url, port, database, username, password));
                 dispatch(setConnectionModalOpen(false));
                 dispatch(setConnected(true));
 
                 // If we have remembered to load a specific dashboard after connecting to the database, take care of it here.
                 const application = getState().application;
-                if (application.dashboardToLoadAfterConnecting && application.dashboardToLoadAfterConnecting.startsWith("http")) {     
+                if (application.dashboardToLoadAfterConnecting && application.dashboardToLoadAfterConnecting.startsWith("http")) {
                     fetch(application.dashboardToLoadAfterConnecting)
-                    .then(response => response.text())
-                    .then(data =>  dispatch(loadDashboardThunk(data)));
+                        .then(response => response.text())
+                        .then(data => dispatch(loadDashboardThunk(data)));
                     dispatch(setDashboardToLoadAfterConnecting(null));
                 } else if (application.dashboardToLoadAfterConnecting) {
                     const setDashboardAfterLoadingFromDatabase = (value) => {
                         dispatch(loadDashboardThunk(value));
                     }
                     // If we specify a dashboard by name, load the latest version of it
-                    if(application.dashboardToLoadAfterConnecting.startsWith('name:')){
+                    if (application.dashboardToLoadAfterConnecting.startsWith('name:')) {
                         dispatch(loadDashboardFromNeo4jByNameThunk(driver, application.dashboardToLoadAfterConnecting.substring(5), setDashboardAfterLoadingFromDatabase));
-                    }else{
+                    } else {
                         dispatch(loadDashboardFromNeo4jByUUIDThunk(driver, application.dashboardToLoadAfterConnecting, setDashboardAfterLoadingFromDatabase));
                     }
                     dispatch(setDashboardToLoadAfterConnecting(null));
@@ -117,12 +122,12 @@ export const handleSharedDashboardsThunk = () => (dispatch: any, getState: any)
                 const url = connection.split("@")[1].split(":")[1];
                 const port = connection.split("@")[1].split(":")[2];
                 dispatch(setShareDetailsFromUrl(type, id, standalone, protocol, url, port, database, username, password));
-                window.history.pushState({}, document.title, "/" );
+                window.history.pushState({}, document.title, "/");
             } else {
                 dispatch(setShareDetailsFromUrl(type, id, undefined, undefined, undefined, undefined, undefined, undefined, undefined));
-                window.history.pushState({}, document.title, "/" );
+                window.history.pushState({}, document.title, "/");
             }
-        }else{
+        } else {
             // dispatch(resetShareDetails());
         }
 
@@ -156,26 +161,26 @@ export const onConfirmLoadSharedDashboardThunk = () => (dispatch: any, getState:
 export const loadApplicationConfigThunk = () => async (dispatch: any, getState: any) => {
     try {
         const config = await (await fetch("/config.json")).json();
-          dispatch(setSSOEnabled(config['ssoEnabled'], config["ssoDiscoveryUrl"]));
-          const state = getState();
-          const standalone = config['standalone'];// || (state.application.shareDetails !== undefined && state.application.shareDetails.standalone);
-          dispatch(setStandaloneEnabled(standalone, config['standaloneProtocol'], config['standaloneHost'], config['standalonePort'], config['standaloneDatabase'], config['standaloneDashboardName'], config['standaloneDashboardDatabase']))
-          if(standalone){
-            dispatch(setConnectionProperties(config['standaloneProtocol'], config['standaloneHost'], config['standalonePort'], config['standaloneDatabase'], state.application.connection.username ,state.application.connection.password));
+        dispatch(setSSOEnabled(config['ssoEnabled'], config["ssoDiscoveryUrl"]));
+        const state = getState();
+        const standalone = config['standalone'];// || (state.application.shareDetails !== undefined && state.application.shareDetails.standalone);
+        dispatch(setStandaloneEnabled(standalone, config['standaloneProtocol'], config['standaloneHost'], config['standalonePort'], config['standaloneDatabase'], config['standaloneDashboardName'], config['standaloneDashboardDatabase']))
+        if (standalone) {
+            dispatch(setConnectionProperties(config['standaloneProtocol'], config['standaloneHost'], config['standalonePort'], config['standaloneDatabase'], state.application.connection.username, state.application.connection.password));
             dispatch(setConnectionModalOpen(true));
             dispatch(setAboutModalOpen(false));
             dispatch(setConnected(false));
             dispatch(setWelcomeScreenOpen(false));
-            dispatch(setDashboardToLoadAfterConnecting("name:"+config['standaloneDashboardName']));
+            dispatch(setDashboardToLoadAfterConnecting("name:" + config['standaloneDashboardName']));
             dispatch(clearNotification());
-        }else{
+        } else {
             dispatch(clearDesktopConnectionProperties());
             dispatch(setDatabaseFromNeo4jDesktopIntegrationThunk());
             const old = localStorage.getItem('neodash-dashboard');
             dispatch(setOldDashboard(old));
             dispatch(setConnected(false));
             dispatch(setDashboardToLoadAfterConnecting(null));
-            dispatch(setWelcomeScreenOpen(true));   
+            dispatch(setWelcomeScreenOpen(true));
             dispatch(clearNotification());
             dispatch(handleSharedDashboardsThunk());
             dispatch(setConnectionModalOpen(false));

src/card/CardThunks.tsx

@@ -100,7 +100,7 @@ export const updateFieldsThunk = (index, fields) => (dispatch: any, getState: an
                         // For multi selections, select the Nth item of the result fields as a single item array.
                         if (selectableFields[selection].multiple) { 
                             // only update if the old selection no longer covers the new set of fields...
-                            if(!oldSelection[selection].every(v => fields.includes(v))){
+                            if(!oldSelection[selection] || !oldSelection[selection].every(v => fields.includes(v))){
                                 dispatch(updateSelection(pagenumber, index, selection, [fields[Math.min(i, fields.length - 1)]]));
                             }
 

src/card/view/CardViewFooter.tsx

@@ -70,7 +70,7 @@ const NeoCardViewFooter = ({ fields, settings, selection, type, showOptionalSele
                                 renderValue={(selected) => Array.isArray(selected) ? selected.join(', ') : selected}
                                 value={(selection && selection[selectable]) ?
                                     (selectableFields[selectable].multiple && !Array.isArray(selection[selectable])) ? [selection[selectable]] : selection[selectable]
-                                    : (selectableFields[selectable].multiple) ? ["(no data)"] : "(no data)"}>
+                                    : (selectableFields[selectable].multiple) ? (selection[selectable] && selection[selectable].length > 0 ? selection[selectable][0] : []): "(no data)"}>
 
                                 {/* Render choices */}
                                 {fieldsToRender.map((field) => {

src/dashboard/Dashboard.tsx

@@ -11,6 +11,7 @@ import NeoDashboardConnectionUpdateHandler from './DashboardConnectionUpdateHand
 import { forceRefreshPage } from '../page/PageActions';
 import { getPageNumber } from '../settings/SettingsSelectors';
 import { createNotification } from '../application/ApplicationActions';
+import { createNotificationThunk } from '../page/PageThunks';
 
 
 
@@ -48,7 +49,7 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = dispatch => ({
     onConnectionUpdate: pagenumber => {
-        dispatch(createNotification("Connection Updated", "You have updated your Neo4j connection, your reports have been reloaded."))
+        dispatch(createNotificationThunk("Connection Updated", "You have updated your Neo4j connection, your reports have been reloaded."))
         dispatch(forceRefreshPage(pagenumber))
     }
 });

src/dashboard/DashboardPlaceholder.tsx

@@ -1,19 +1,6 @@
-import { AppBar, Toolbar, IconButton, Typography, Badge, TextField, InputBase, CircularProgress } from "@material-ui/core";
-import React, { useCallback, useEffect } from "react";
-import NeoPageButton from "./DashboardHeaderPageButton";
-import NeoPageAddButton from "./DashboardHeaderPageAddButton";
+import { AppBar, Toolbar, IconButton, Typography, InputBase, CircularProgress } from "@material-ui/core";
+import React, {  } from "react";
 import MenuIcon from '@material-ui/icons/Menu';
-import ConnectionModal from '../modal/ConnectionModal';
-import { withStyles } from "@material-ui/core/styles";
-import { connect } from "react-redux";
-import { setDashboardTitle, addPage, removePage } from "./DashboardActions";
-import { getDashboardTitle, getPages, getPageNumber } from "./DashboardSelectors";
-import debounce from 'lodash/debounce';
-import { setPageTitle } from "../page/PageActions";
-import { addPageThunk, removePageThunk } from "./DashboardThunks";
-
-
-
 
 export const NeoDashboardPlaceholder = ({connected}) => {
     const content = (

src/dashboard/DashboardThunks.tsx

@@ -121,22 +121,22 @@ export const loadDashboardThunk = (text) => (dispatch: any, getState: any) => {
     }
 }
 
-export const saveDashboardToNeo4jThunk = (driver, dashboard, date, user) => (dispatch: any, getState: any) => {
+export const saveDashboardToNeo4jThunk = (driver, database, dashboard, date, user) => (dispatch: any, getState: any) => {
     try {
         const uuid = createUUID();
         const title = dashboard.title;
         // const user = user;
         // const date = date;
         const version = dashboard.version;
         const content = dashboard;
-        runCypherQuery(driver, getState().application.connection.database,
+        runCypherQuery(driver, database,
             "CREATE (n:_Neodash_Dashboard) SET n.uuid = $uuid, n.title = $title, n.version = $version, n.user = $user, n.content = $content, n.date = datetime($date) RETURN $uuid as uuid",
             { uuid: uuid, title: title, version: version, user: user, content: JSON.stringify(dashboard, null, 2), date: date },
             {}, ["uuid"], 1, () => { return }, (records) => {
                 if (records && records[0] && records[0]["_fields"] && records[0]["_fields"][0] && records[0]["_fields"][0] == uuid) {
                     dispatch(createNotificationThunk("🎉 Success!", "Your current dashboard was saved to Neo4j."));
                 } else {
-                    dispatch(createNotificationThunk("Unable to save dashboard", "Do you have write access to the '" + getState().application.connection.database + "' database?"));
+                    dispatch(createNotificationThunk("Unable to save dashboard", "Do you have write access to the '" + database + "' database?"));
                 }
 
             });
@@ -163,7 +163,6 @@ export const loadDashboardFromNeo4jByUUIDThunk = (driver, uuid, callback) => (di
 export const loadDashboardFromNeo4jByNameThunk = (driver, name, callback) => (dispatch: any, getState: any) => {
     try {
         runCypherQuery(driver, getState().application.connection.database, "MATCH (d:_Neodash_Dashboard) WHERE d.title = $name RETURN d.content as dashboard ORDER by d.date DESC LIMIT 1", { name: name }, {}, ["dashboard"], 1, () => { return }, (records) => {
-            console.log(records)
             if (records.length == 0) {
                 dispatch(createNotificationThunk("Unable to load dashboard.", "A dashboard with the provided name could not be found."));
             }
@@ -189,3 +188,18 @@ export const loadDashboardListFromNeo4jThunk = (driver, callback) => (dispatch:
     }
 }
 
+export const loadDatabaseListFromNeo4jThunk = (driver, callback) => (dispatch: any, getState: any) => {
+    try {
+        runCypherQuery(driver, "system",
+            "SHOW DATABASES yield name RETURN name",
+            {}, {}, ["name"], 1000, () => { return }, (records) => {
+                const result = records.map(r => {
+                    return r["_fields"][0];
+                });
+                callback(result);
+            })
+    } catch (e) {
+        dispatch(createNotificationThunk("Unable to list databases from Neo4j", e));
+    }
+}
+