Finalized save/load to Neo4j feature

Author: nielsdejong

src/dashboard/DashboardHeader.tsx

@@ -32,7 +32,7 @@ const styles = {
 
 
 export const NeoDashboardHeader = ({ classes, open, pagenumber, pages, dashboardTitle,
-     handleDrawerOpen, setDashboardTitle, editable, connection,
+    handleDrawerOpen, setDashboardTitle, editable, connection,
     addPage, removePage, selectPage, setPageTitle, onConnectionModalOpen }) => {
 
     const [dashboardTitleText, setDashboardTitleText] = React.useState(dashboardTitle);
@@ -96,8 +96,10 @@ export const NeoDashboardHeader = ({ classes, open, pagenumber, pages, dashboard
                     maxRows={4}
                     value={dashboardTitleText}
                     onChange={(event) => {
-                        setDashboardTitleText(event.target.value);
-                        debouncedDashboardTitleUpdate(event.target.value);
+                        if (editable) {
+                            setDashboardTitleText(event.target.value);
+                            debouncedDashboardTitleUpdate(event.target.value);
+                        }
                     }}
                 />
                 <Tooltip title={connection.protocol + "://" + connection.url + ":" + connection.port} placement="left" aria-label="host">
@@ -115,7 +117,7 @@ export const NeoDashboardHeader = ({ classes, open, pagenumber, pages, dashboard
                     boxShadow: "2px 1px 10px 0px rgb(0 0 0 / 12%)",
                     borderBottom: "1px solid lightgrey"
                 }}>
-                    {pages.map((page, i) => 
+                    {pages.map((page, i) =>
                         <NeoPageButton index={i} title={page.title} selected={pagenumber == i}
                             disabled={!editable}
                             onSelect={() => selectPage(i)}

src/dashboard/DashboardThunks.tsx

@@ -44,17 +44,17 @@ export const addPageThunk = () => (dispatch: any, getState: any) => {
 
 export const loadDashboardThunk = (text) => (dispatch: any, getState: any) => {
     try {
-        if(text.length == 0){
-            throw("No dashboard file specified. Did you select a file?")
+        if (text.length == 0) {
+            throw ("No dashboard file specified. Did you select a file?")
         }
-        if(text.trim() == "{}"){
+        if (text.trim() == "{}") {
             dispatch(resetDashboardState());
-            return 
+            return
         }
         const dashboard = JSON.parse(text);
-     
+
         // Attempt upgrade
-        if(dashboard["version"] == "1.1"){
+        if (dashboard["version"] == "1.1") {
             const upgradedDashboard = {};
             upgradedDashboard["title"] = dashboard["title"];
             upgradedDashboard["version"] = "2.0";
@@ -69,10 +69,10 @@ export const loadDashboardThunk = (text) => (dispatch: any, getState: any) => {
                 const newPageReports = [];
                 p["reports"].forEach(r => {
                     // only migrate value report types.
-                    if(["table", "graph", "bar", "line", "map", "value", "json", "select", "iframe", "text"].indexOf(r["type"]) == -1){
+                    if (["table", "graph", "bar", "line", "map", "value", "json", "select", "iframe", "text"].indexOf(r["type"]) == -1) {
                         return
                     }
-                    if(r["type"] == "select"){
+                    if (r["type"] == "select") {
                         r["query"] = "";
                     }
                     const newPageReport = {
@@ -83,9 +83,9 @@ export const loadDashboardThunk = (text) => (dispatch: any, getState: any) => {
                         parameters: r["parameters"],
                         query: r["query"],
                         selection: {},
-                        settings: {} 
+                        settings: {}
                     }
-                   
+
                     newPageReports.push(newPageReport);
                 })
                 newPage["reports"] = newPageReports;
@@ -95,38 +95,60 @@ export const loadDashboardThunk = (text) => (dispatch: any, getState: any) => {
 
             dispatch(setDashboard(upgradedDashboard))
             dispatch(createNotificationThunk("Successfully upgraded dashboard", "Your old dashboard was migrated to version 2.0. You might need to refresh this page."));
-            return 
+            return
         }
-        if(dashboard["version"] != "2.0"){
-            throw ("Invalid dashboard version: "+dashboard.version);
+        if (dashboard["version"] != "2.0") {
+            throw ("Invalid dashboard version: " + dashboard.version);
         }
-      
+
         dispatch(setDashboard(dashboard))
 
     } catch (e) {
         dispatch(createNotificationThunk("Unable to load dashboard", e));
     }
 }
 
-export const saveDashboardToNeo4jThunk = (dashboard, date, user) => (dispatch: any, getState: any) => {
+export const saveDashboardToNeo4jThunk = (driver, 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;
-        console.log(uuid);
-        dispatch(createNotificationThunk("Unable to save dashboard to Neo4j", ""));
+        runCypherQuery(driver, getState().application.connection.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) => {
+                console.log(records);
+                dispatch(createNotificationThunk("🎉 Success!", "Your current dashboard was saved to Neo4j."))
+            });
+
     } catch (e) {
         dispatch(createNotificationThunk("Unable to save dashboard to Neo4j", e));
     }
 }
 
 export const loadDashboardFromNeo4jThunk = (driver, uuid, callback) => (dispatch: any, getState: any) => {
     try {
-        runCypherQuery(driver, getState().application.connection.database, "RETURN $uuid as dashboard", {uuid: uuid}, {}, ["dashboard"], 1, () => { return }, (records) => callback(records[0]['_fields'][0]))
+        runCypherQuery(driver, getState().application.connection.database, "MATCH (n:_Neodash_Dashboard) WHERE n.uuid = $uuid RETURN n.content as dashboard", { uuid: uuid }, {}, ["dashboard"], 1, () => { return }, (records) => callback(records[0]['_fields'][0]))
     } catch (e) {
         dispatch(createNotificationThunk("Unable to load dashboard to Neo4j", e));
     }
-}
+}
+
+export const loadDashboardListFromNeo4jThunk = (driver, callback) => (dispatch: any, getState: any) => {
+    try {
+        runCypherQuery(driver, getState().application.connection.database,
+            "MATCH (n:_Neodash_Dashboard) RETURN n.uuid as id, n.title as title, toString(n.date) as date, n.user as author ORDER BY date DESC",
+            {}, {}, ["id, title, date, user"], 1000, () => { return }, (records) => {
+                const result = records.map(r => {
+                    return { id: r["_fields"][0], title: r["_fields"][1], date: r["_fields"][2], author: r["_fields"][3] };
+                });
+                callback(result);
+            })
+    } catch (e) {
+        dispatch(createNotificationThunk("Unable to load dashboard list from Neo4j", e));
+    }
+}
+

src/modal/LoadModal.tsx

@@ -14,7 +14,7 @@ import { connect } from "react-redux";
 import SystemUpdateAltIcon from '@material-ui/icons/SystemUpdateAlt';
 import PostAddIcon from '@material-ui/icons/PostAdd';
 import StorageIcon from '@material-ui/icons/Storage';
-import { loadDashboardFromNeo4jThunk, loadDashboardThunk } from '../dashboard/DashboardThunks';
+import { loadDashboardFromNeo4jThunk, loadDashboardListFromNeo4jThunk, loadDashboardThunk } from '../dashboard/DashboardThunks';
 import { DataGrid } from '@mui/x-data-grid';
 import { Neo4jContext, Neo4jContextState } from "use-neo4j/dist/neo4j.context";
 
@@ -27,7 +27,7 @@ const styles = {
 
 };
 
-export const NeoLoadModal = ({ loadDashboard, loadDashboardFromNeo4j, connection }) => {
+export const NeoLoadModal = ({ loadDashboard, loadDashboardFromNeo4j, loadDashboardListFromNeo4j }) => {
     const [loadModalOpen, setLoadModalOpen] = React.useState(false);
     const [loadFromNeo4jModalOpen, setLoadFromNeo4jModalOpen] = React.useState(false);
     const [text, setText] = React.useState("");
@@ -49,15 +49,11 @@ export const NeoLoadModal = ({ loadDashboard, loadDashboardFromNeo4j, connection
         setText("");
     };
 
-    function handleDashboardLoadedFromNeo4j(result){
+    function handleDashboardLoadedFromNeo4j(result) {
         setText(result);
         setLoadFromNeo4jModalOpen(false);
     }
 
-    function handleGetDashboardListLoadedFromNeo4j(result){
-        setRows(result);
-    }
-
     const reader = new FileReader();
     reader.onload = async (e) => {
         setText(e.target.result);
@@ -80,14 +76,6 @@ export const NeoLoadModal = ({ loadDashboard, loadDashboardFromNeo4j, connection
         },
     ]
 
-    // const rows = [
-    //     { id: '6c7a822c-243b-4ed5-ac2d-1ab9d84ae8e0', title: 'My Covid Dashboard Name', date: 'Nov 27 2021 21:08:09', author: 'neo4j', load: <b>Load</b> },
-    //     { id: '6c7a822c-243b-4ed5-ac2d-1ab9d84ae8e1', title: 'Mark', date: 'Nov 27 2021 21:07:09', author: 'neo4j', load: <b>Load</b> },
-    //     { id: '6c7a822c-243b-4ed5-ac2d-1ab9d84ae8e2', title: 'Mark', date: 'Nov 27 2021 21:07:09', author: 'neo4j', load: <b>Load</b> },
-    //     { id: '6c7a822c-243b-4ed5-ac2d-1ab9d84ae8e3', title: 'Mark', date: 'Nov 27 2021 21:07:09', author: 'neo4j', load: <b>Load</b> },
-    //     { id: '6c7a822c-243b-4ed5-ac2d-1ab9d84ae8e4', title: 'Mark', date: 'Nov 27 2021 21:07:09', author: 'neo4j', load: <b>Load</b> },
-    //     { id: '6c7a822c-243b-4ed5-ac2d-1ab9d84ae8e5', title: 'Mark', date: 'Nov 27 2021 21:07:09', author: 'neo4j', load: <b>Load</b> },
-    // ];
 
     return (
         <div>
@@ -136,7 +124,10 @@ export const NeoLoadModal = ({ loadDashboard, loadDashboardFromNeo4j, connection
                         </Button>
                         <Button
                             component="label"
-                            onClick={(e) => setLoadFromNeo4jModalOpen(true)}
+                            onClick={(e) => {
+                                loadDashboardListFromNeo4j(driver, (result) => {setRows(result)});
+                                setLoadFromNeo4jModalOpen(true);
+                            }}
                             style={{ marginLeft: "10px", marginBottom: "10px", backgroundColor: "white" }}
                             color="default"
                             variant="contained"
@@ -170,7 +161,7 @@ export const NeoLoadModal = ({ loadDashboard, loadDashboardFromNeo4j, connection
             </Dialog>
             <Dialog maxWidth={"lg"} open={loadFromNeo4jModalOpen} onClose={(e) => { setLoadFromNeo4jModalOpen(false) }} aria-labelledby="form-dialog-title">
                 <DialogTitle id="form-dialog-title">
-                    Load From Neo4j
+                    Select From Neo4j
                     <IconButton onClick={(e) => { setLoadFromNeo4jModalOpen(false) }} style={{ padding: "3px", float: "right" }}>
                         <Badge badgeContent={""} >
                             <CloseIcon />

src/modal/SaveModal.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import Button from '@material-ui/core/Button';
-import TextField from '@material-ui/core/TextField';
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
@@ -21,6 +20,7 @@ import { valueIsArray, valueIsObject } from '../report/RecordProcessing';
 import StorageIcon from '@material-ui/icons/Storage';
 import { applicationGetConnection } from '../application/ApplicationSelectors';
 import { saveDashboardToNeo4jThunk } from '../dashboard/DashboardThunks';
+import { Neo4jContext, Neo4jContextState } from "use-neo4j/dist/neo4j.context";
 
 /**
  * A modal to save a dashboard as a JSON text string.
@@ -63,6 +63,7 @@ const filterNestedDict = (value: any, removedKeys: any[]) => {
 export const NeoSaveModal = ({ dashboard, connection, saveDashboardToNeo4j}) => {
     const [saveModalOpen, setSaveModalOpen] = React.useState(false);
     const [saveToNeo4jModalOpen, setSaveToNeo4jModalOpen] = React.useState(false);
+    const { driver } = useContext<Neo4jContextState>(Neo4jContext);
 
     const handleClickOpen = () => {
         setSaveModalOpen(true);
@@ -165,14 +166,18 @@ export const NeoSaveModal = ({ dashboard, connection, saveDashboardToNeo4j}) =>
                         style={{ width: "100%", border: "1px solid lightgray" }}
                         className={"textinput-linenumbers"}
                         value={"{\n    title: '" + dashboard.title + "',\n" +
-                            "    date: '" + new Date().toString() + "',\n" +
+                            "    date: '" + new Date().toISOString() + "',\n" +
                             "    user: '" + connection.username + "',\n" +
                             "    content: " + "{...}"+ "\n}" }
                         aria-label=""
                         placeholder="" />
                     <Button
                         component="label"
-                        onClick={e => {saveDashboardToNeo4j(dashboard, new Date().toString(), connection.username)}}
+                        onClick={e => {
+                            saveDashboardToNeo4j(driver, dashboard, new Date().toISOString(), connection.username);
+                            setSaveToNeo4jModalOpen(false);
+                            setSaveModalOpen(false);
+                        }}
                         style={{ backgroundColor: "white",marginTop: "20px",  float: "right" }}
                         color="default"
                         variant="contained"
@@ -183,7 +188,7 @@ export const NeoSaveModal = ({ dashboard, connection, saveDashboardToNeo4j}) =>
                     <Button
                         component="label"
                         onClick={(e) => { setSaveToNeo4jModalOpen(false) }}
-                        style={{ float: "right", marginTop: "20px", marginRight: "10px", ackgroundColor: "white" }}
+                        style={{ float: "right", marginTop: "20px", marginRight: "10px", backgroundColor: "white" }}
                         color="default"
                         variant="contained"
                         size="medium">
@@ -204,8 +209,8 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = dispatch => ({
-    saveDashboardToNeo4j: (dashboard: any, date: any, user: any) => {
-        dispatch(saveDashboardToNeo4jThunk(dashboard, date, user))
+    saveDashboardToNeo4j: (driver: any, dashboard: any, date: any, user: any) => {
+        dispatch(saveDashboardToNeo4jThunk(driver, dashboard, date, user))
     }, 
 });