More comments added to the code

Author: nielsdejong

package.json

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

src/NeoDash.js

@@ -18,7 +18,7 @@ import NeoLinePropertySelect from "../report/line/NeoLinePropertySelect";
 import NeoPropertySelectReport from "../report/select/NeoPropertySelectReport";
 
 
-let emptyAction = <div key={0}></div>;
+let emptyAction = <div key={0}/>;
 
 /**
  * A NeoCard represents a single card in a dashboard.
@@ -561,7 +561,7 @@ class NeoCard extends React.Component {
  * This button sits in the same list as regular cards.
  * After clicking the button, a new card gets added the dashboard.
  */
-class AddNeoCardComponent extends React.Component {
+class AddNeoCard extends React.Component {
     constructor(props) {
         super(props);
     }
@@ -583,4 +583,4 @@ class AddNeoCardComponent extends React.Component {
 }
 
 export const NeoCardComponent = NeoCard;
-export const AddNeoCard = AddNeoCardComponent;
+export const AddNeoCardComponent = AddNeoCard;

src/card/NeoCard.js

@@ -6,10 +6,11 @@ import NeoTextInput from "../component/NeoTextInput";
 import NeoAutoCompleteText from "../component/NeoAutoCompleteText";
 
 /**
- * A NeoCardSettings component is the settings window that pops up when you edit a card.
- *
+ * A 'NeoCardSettings' component is the settings window that pops up when you edit a card.
+ * These settings will allow the user to modify the type of report, size of report, active query, etc.
  */
 class NeoCardSettings extends React.Component {
+    // A dictionary of available report types.
     vizOptions = {
         'table': 'Table',
         'graph': 'Graph',
@@ -19,6 +20,8 @@ class NeoCardSettings extends React.Component {
         'select': 'Selection',
         'text': 'Markdown',
     };
+
+    // A dictionary of available card sizes.
     sizeOptions = {
         4: 'Small (4x4)',
         6: 'Medium (6x4)',
@@ -30,15 +33,23 @@ class NeoCardSettings extends React.Component {
         24: 'Full (12x8)'
     };
 
+    /**
+     * Initializes the card settings and sets default components.
+     */
     constructor(props) {
         super(props);
         this.stateChanged = this.stateChanged.bind(this);
         this.setDefaultComponents();
     }
 
+    /**
+     * Sets the default components of the card settings window:
+     * - A text area to enter Cypher queries/markdown.
+     * - Input areas for Cypher parameters, refresh rate, card size, etc.
+     * - Buttons to move and resize cards.
+     */
     setDefaultComponents() {
-
-        this.neoTextArea =
+        this.settingsTextArea =
             <NeoTextArea placeholder={this.props.placeholder} defaultValue={this.props.query} name="Query"
                          onChange={this.stateChanged}/>;
         this.cypherParamsInput = <NeoTextInput defaultValue={this.props.parameters} onChange={this.stateChanged}
@@ -63,17 +74,28 @@ class NeoCardSettings extends React.Component {
 
     }
 
+    setTypeAndSizeSelectionComponents(type) {
+        this.cardTypeSelect = <NeoOptionSelect label="Type" defaultValue={type} onChange={this.stateChanged}
+                                               options={this.vizOptions}/>;
+        this.cardSizeSelect = <NeoOptionSelect label="Size" defaultValue={this.props.size} onChange={this.stateChanged}
+                                               options={this.sizeOptions}/>;
+    }
+
     /**
-     * Helper function to convert a string with capital letters and spaces to a lowercase snake case verison.
+     * Helper function to convert a string with capital letters and spaces to a lowercase snake case version.
      */
     toLowerCaseSnakeCase(value) {
         return value.toLowerCase().replace(/ /g, "_");
     }
 
+    /**
+     * If a 'selection' type is chosen for this card,
+     * build the components for letting a user selection nodes/properties.
+     *
+     * TODO: This is currently (Unnecessarily) called for all types of cards.
+     */
     buildCustomSelectionSettingsWindow() {
-
         var selectionMessage = "Choose a node label to select.";
-
         let nodeSelectedQuery = "CALL db.schema.nodeTypeProperties() YIELD nodeLabels" +
             " UNWIND nodeLabels as nodeLabel WITH DISTINCT nodeLabel as label" +
             " WHERE toLower(label) contains toLower($input)" +
@@ -93,8 +115,8 @@ class NeoCardSettings extends React.Component {
             defaultValue={(this.props.properties[0]) ? this.props.properties[0] : ""}
         />;
 
-        var propertySelectionBox = <div></div>
-        var propertyIdSelectionBox = <div></div>
+        var propertySelectionBox = <div/>
+        var propertyIdSelectionBox = <div/>
         if (this.props.properties && this.props.properties[0]) {
             selectionMessage = "Choose a node property to select.";
             let propertySelectedQuery = "CALL db.schema.nodeTypeProperties() YIELD nodeLabels, propertyName\n" +
@@ -118,10 +140,12 @@ class NeoCardSettings extends React.Component {
 
 
             />;
-            propertyIdSelectionBox = <NeoTextInput numeric defaultValue={this.props.properties[2] ? this.props.properties[2] : ""} onChange={this.stateChanged}
-                                                   changeEventLabel={"PropertySelectionIdUpdated"}
-                                                   style={{width: '80px'}} label={"ID"}
-                                                   placeholder={"(optional)"}/>;
+            propertyIdSelectionBox =
+                <NeoTextInput numeric defaultValue={this.props.properties[2] ? this.props.properties[2] : ""}
+                              onChange={this.stateChanged}
+                              changeEventLabel={"PropertySelectionIdUpdated"}
+                              style={{width: '80px'}} label={"ID"}
+                              placeholder={"(optional)"}/>;
         }
 
         if (this.props.properties && this.props.properties[0] && this.props.properties[1]) {
@@ -133,41 +157,43 @@ class NeoCardSettings extends React.Component {
                 value.</>;
         }
 
-        this.selectionArea = <div style={{width: "100%"}}>
+        this.settingsSelectionArea = <div style={{width: "100%"}}>
             {nodeSelectionBox}
             {propertySelectionBox}
             {propertyIdSelectionBox}
             <p style={{"display": "block", width: '350px'}}>{selectionMessage}</p>
         </div>
     }
 
+    /**
+     * On change, refresh the default components of the settings window.
+     */
     componentDidUpdate(prevProps, prevState, snapshot) {
         this.setDefaultComponents();
     }
 
+    /**
+     * on state change, we possibly re-render the settings component.
+     */
     stateChanged(data) {
-        // if the report type changes, we possibly need to re-render the settings component.
-        if (data["label"] === "TypeChanged") {
-        }
         this.props.onChange(data);
-
     }
 
+    /**
+     * Renders the settings component.
+     */
     render() {
         this.buildCustomSelectionSettingsWindow();
-        let type = this.props.type;
+        this.setTypeAndSizeSelectionComponents(this.props.type);
         return (
             <div>
                 {this.cardMovementControls}
-                <NeoOptionSelect label="Type" defaultValue={type} onChange={this.stateChanged}
-                                 options={this.vizOptions}/>
-                <NeoOptionSelect label="Size" defaultValue={this.props.size} onChange={this.stateChanged}
-                                 options={this.sizeOptions}/>
-
-                {(type !== "select") ? this.cypherParamsInput : <div></div>}
-                {(type !== "select") ? this.refreshRateInput : <div></div>}
-                {(type !== "select") ? this.neoTextArea : <div></div>}
-                {(type === "select") ? this.selectionArea : <div></div>}
+                {this.cardTypeSelect}
+                {this.cardSizeSelect}
+                {(this.props.type !== "select") ? this.cypherParamsInput : <div/>}
+                {(this.props.type !== "select") ? this.refreshRateInput : <div/>}
+                {(this.props.type !== "select") ? this.settingsTextArea : <div/>}
+                {(this.props.type === "select") ? this.settingsSelectionArea : <div/>}
             </div>
         );
     }

src/card/NeoCardSettings.js

@@ -0,0 +1,88 @@
+import Modal from "react-materialize/lib/Modal";
+import React from "react";
+import Button from "react-materialize/lib/Button";
+import Textarea from "react-materialize/lib/Textarea";
+import NeoModal from "./NeoModal";
+import NavItem from "react-materialize/lib/NavItem";
+import NeoTextInput from "./NeoTextInput";
+import NeoCheckBox from "./NeoCheckBox";
+import NeoTextButton from "./NeoTextButton";
+
+
+class NeoConnectionModal extends NeoModal {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <NeoModal
+                header={'Connect to Neo4j'}
+                style={{'maxWidth': '520px'}}
+                key={this.props.key}
+                id={this.props.key}
+                footerType={"modal-dark-footer"}
+                open={this.props.open}
+                root={document.getElementById("root")}
+
+                actions={[
+                    <p>
+                        NeoDash is a tool for prototyping Neo4j dashboards.
+                        Building a production-grade front-end instead? &nbsp;
+                        <u><a style={{color: "white"}} href="#"
+                              onClick={this.props.onGetInTouchClicked}>Get in touch</a></u>!
+                    </p>
+
+                ]}
+                trigger={
+                    <NavItem href="" onClick={this.props.navClicked}>Neo4j Connection</NavItem>
+                }
+                content={<div className="modal-input-text" style={{margin: '20px'}}>
+                    <img style={{height: '38px', right: '20px', top: '25px', position: 'absolute'}} src={"neo.png"}/>
+                    <p>&nbsp;</p>
+                    <form onSubmit={this.props.onConnect}>
+                        <NeoTextInput onChange={this.props.stateChanged} changeEventLabel={"ConnectURLChanged"}
+                                      style={{'width': '100%'}} label={"Connect URL"}
+                                      defaultValue={this.props.connection.url}/>
+                        <NeoTextInput onChange={this.stateChanged} changeEventLabel={"DatabaseChanged"}
+                                      label={"Database"}
+                                      placeholder={'neo4j'}
+                                      defaultValue={this.props.connection.database}
+                        />
+                        <NeoTextInput onChange={this.stateChanged} changeEventLabel={"UsernameChanged"}
+                                      label={"Username"}
+                                      defaultValue={this.props.connection.username}/>
+                        <NeoTextInput onChange={this.stateChanged} changeEventLabel={"PasswordChanged"}
+                                      password={true}
+                                      label={"Password"}
+                                      defaultValue={this.props.connection.password}
+                                      placeholder={''}/>
+                        <div style={{marginTop: "10px"}}>
+
+                            <NeoCheckBox onChange={this.stateChanged}
+                                         changeEventLabel={"EncryptionChanged"}
+                                         label={"Encrypted Connection"}
+                                         defaultValue={(this.props.connection.encryption === "on") ? "on" : "off"}>
+
+                            </NeoCheckBox>
+                            <NeoTextButton right modal="close"
+                                           color={"neo-color"}
+                                           icon='play_arrow'
+                                           node="button"
+                                           onClick={this.props.connect}
+                                           text={"connect"}
+                                           waves="green"/>
+                        </div>
+
+
+                        <input style={{display: 'none'}} type="submit"/></form>
+
+                </div>}
+            />
+        )
+    }
+
+
+}
+
+export default (NeoConnectionModal);

src/component/NeoConnectionModal.js

@@ -0,0 +1,40 @@
+import Modal from "react-materialize/lib/Modal";
+import React from "react";
+import Button from "react-materialize/lib/Button";
+import Textarea from "react-materialize/lib/Textarea";
+import NeoModal from "./NeoModal";
+
+
+class NeoSaveLoadModal extends NeoModal {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <NeoModal header={"🖨 Load/Export Dashboard as JSON"}
+                      root={document.getElementById("root")}
+                      json={this.props.json}
+                      placeholder={"Paste a dashboard JSON file here..."}
+                      actions={[
+                          <Button style={{position: 'absolute', right: '20px', top: '20px'}} modal="close"
+                                  node="button"
+                                  onClick={this.props.loadJson}
+                                  waves="green">Save</Button>
+                      ]}
+                      trigger={
+                          this.props.trigger
+                      }
+                      componentDidUpdate={this.props.update}
+                      stateChanged={this.props.stateChanged}
+                      content={<Textarea style={{minHeight: '500px'}} id="Textarea-12" l={12} m={12} s={12} xl={12}
+                                         onChange={this.props.change} value={this.props.value}
+                                         placeholder={this.props.placeholder}/>}
+            />
+        )
+    }
+
+
+}
+
+export default (NeoSaveLoadModal);

src/component/NeoSaveLoadModal.js

@@ -1,17 +1,27 @@
 import React from "react";
 import Textarea from "react-materialize/lib/Textarea";
 
+/**
+ * A NeoTextArea is a multi-line text entry box with page numbers.
+ * NeoTextAreas are used as Cypher-input boxes or to display errors.
+ */
 class NeoTextArea extends React.Component {
+    disclaimer = 'Limit a query to 1000 result rows for best performance. Cypher parameter keys & values must be in quotes.';
+    defaultPlaceholder = "Enter Cypher here... \n";
+
+    /**
+     * Initializes the NeoTextArea with a default value.
+     */
     constructor(props) {
         super(props);
         this.state = {
             value: this.props.defaultValue,
         }
-
     }
-
+    /**
+     * Renders the component. On change, the method specified in this.props.onChange is called.
+     */
     render() {
-        let disclaimer = 'Limit a query to 1000 result rows for best performance. Cypher parameter keys & values must be in quotes.';
         return <Textarea
             onChange={e => {
                 let newState = {value: e.target.value};
@@ -23,8 +33,8 @@ class NeoTextArea extends React.Component {
             l={12}
             m={12}
             s={12}
-            placeholder={(this.props.placeholder) ? this.props.placeholder : "Enter Cypher here... \n"}
-            xl={12}><p style={{fontSize: 12}}>{disclaimer}</p></Textarea>;
+            placeholder={(this.props.placeholder) ? this.props.placeholder : this.defaultPlaceholder}
+            xl={12}><p style={{fontSize: 12}}>{this.disclaimer}</p></Textarea>;
     }
 }