Added docstrings to all classes/methods

Author: nielsdejong

src/card/NeoCard.js

@@ -3,18 +3,18 @@ import Card from "react-materialize/lib/Card";
 import Icon from "react-materialize/lib/Icon";
 import Textarea from "react-materialize/lib/Textarea";
 import Button from "react-materialize/lib/Button";
-import NeoTable from "./report/NeoTableReport";
-import NeoPagination from "./footer/NeoTableFooter";
-import NeoGraphViz from "./report/NeoGraphVisReport";
+import NeoTableReport from "./report/NeoTableReport";
+import NeoTableFooter from "./footer/NeoTableFooter";
+import NeoGraphVisReport from "./report/NeoGraphVisReport";
 import Col from "react-materialize/lib/Col";
 import NeoCardSettings from "./NeoCardSettings";
 import NeoJSONView from "./report/NeoJSONViewReport";
-import NeoGraphChips from "./footer/NeoGraphVisFooter";
-import NeoMarkdownView from "./report/NeoMarkdownReport";
-import NeoBarChart from "./report/NeoBarChartReport";
-import NeoBarPropertySelect from "./footer/NeoBarChartFooter";
-import NeoLineChart from "./report/NeoLineChartReport";
-import NeoLinePropertySelect from "./footer/NeoLineChartFooter";
+import NeoGraphVisFooter from "./footer/NeoGraphVisFooter";
+import NeoMarkdownReport from "./report/NeoMarkdownReport";
+import NeoBarChartReport from "./report/NeoBarChartReport";
+import NeoBarChartFooter from "./footer/NeoBarChartFooter";
+import NeoLineChartReport from "./report/NeoLineChartReport";
+import NeoLineChartFooter from "./footer/NeoLineChartFooter";
 import NeoPropertySelectReport from "./report/NeoPropertySelectReport";
 
 
@@ -284,24 +284,24 @@ export class NeoCard extends React.Component {
      */
     setCardTypeToTableView() {
         this.state.content =
-            <NeoTable connection={this.props.connection}
-                      rows={this.state.height == 4 ? NeoTable.normalRowCount : NeoTable.tallRowCount}
+            <NeoTableReport connection={this.props.connection}
+                      rows={this.state.height == 4 ? NeoTableReport.normalRowCount : NeoTableReport.tallRowCount}
                       page={this.state.page}
                       query={this.state.query}
                       stateChanged={this.stateChanged}
                       params={this.state.parsedParameters}
                       refresh={this.state.refresh}
             />
         this.state.action =
-            <NeoPagination page={this.state.page} key={0} data={this.state.data} onChange={this.stateChanged}/>
+            <NeoTableFooter page={this.state.page} key={0} data={this.state.data} onChange={this.stateChanged}/>
     }
 
     /**
      * Updates the card's report to a bar chart.
      */
     setCardTypeToBarChart() {
         this.state.content =
-            <NeoBarChart connection={this.props.connection}
+            <NeoBarChartReport connection={this.props.connection}
                          page={this.state.page}
                          query={this.state.query}
                          clientWidth={(this.cardRef.current) ? this.cardRef.current.clientWidth : 0}
@@ -321,7 +321,7 @@ export class NeoCard extends React.Component {
      */
     setCardTypeToLineChart() {
         this.state.content =
-            <NeoLineChart connection={this.props.connection}
+            <NeoLineChartReport connection={this.props.connection}
                           page={this.state.page}
                           query={this.state.query}
                           clientWidth={(this.cardRef.current) ? this.cardRef.current.clientWidth : 0}
@@ -342,7 +342,7 @@ export class NeoCard extends React.Component {
     setCardTypeToGraph() {
         this.state.page += 1;
         this.state.content =
-            <NeoGraphViz
+            <NeoGraphVisReport
                 connection={this.props.connection}
                 query={this.state.query}
                 params={this.state.parsedParameters}
@@ -377,7 +377,7 @@ export class NeoCard extends React.Component {
      */
     setCardTypeToMarkdown() {
         this.state.content =
-            <NeoMarkdownView
+            <NeoMarkdownReport
                 connection={this.props.connection}
                 query={'return true'}
                 data={this.state.query}
@@ -478,7 +478,7 @@ export class NeoCard extends React.Component {
     updateBarPropertySelect(labels) {
         this.state.page += 1;
         this.state.action =
-            <NeoBarPropertySelect propertiesSelected={this.state.propertiesSelected} page={this.state.page} key={0}
+            <NeoBarChartFooter propertiesSelected={this.state.propertiesSelected} page={this.state.page} key={0}
                                   data={this.state.data}
                                   onChange={this.stateChanged}
                                   categories={labels} values={labels}
@@ -492,7 +492,7 @@ export class NeoCard extends React.Component {
     updateLinePropertySelect(labels) {
         this.state.page += 1;
         this.state.action =
-            <NeoLinePropertySelect propertiesSelected={this.state.propertiesSelected} page={this.state.page} key={0}
+            <NeoLineChartFooter propertiesSelected={this.state.propertiesSelected} page={this.state.page} key={0}
                                    data={this.state.data}
                                    onChange={this.stateChanged}
                                    categories={labels} values={labels}
@@ -522,7 +522,7 @@ export class NeoCard extends React.Component {
         }
 
 
-        this.state.action = <NeoGraphChips key={0} nodeLabels={Object.keys(labels)}
+        this.state.action = <NeoGraphVisFooter key={0} nodeLabels={Object.keys(labels)}
                                            width={this.props.width}
                                            params={this.state.parsedParameters}
                                            properties={Object.values(labels).map((labelChoices, index) => {

src/card/footer/NeoBarChartFooter.js

@@ -10,11 +10,17 @@ import NeoFooter from "./NeoFooter";
  * On selection of new fields, the report corresponding to the footer will be refreshed.
  */
 class NeoBarChartFooter extends NeoFooter {
+    /**
+     * Initialize and set default state.
+     */
     constructor(props) {
         super(props);
         this.state = {}
     }
 
+    /**
+     * Draw the two proprety selection boxes.
+     */
     render() {
         return (
             <div className="neo-property-select" style={{marginLeft: '20px', marginTop: "-8px"}}>

src/card/footer/NeoFooter.js

@@ -2,7 +2,7 @@ import React from "react";
 
 /**
  * Parent class for all card footers.
- * Handles logic relevant to all footers. Currently unused.
+ * Handles logic relevant to all footers.
  */
 class NeoFooter extends React.Component {
     constructor(props) {

src/card/footer/NeoGraphVisFooter.js

@@ -10,12 +10,18 @@ import NeoFooter from "./NeoFooter";
  * When clicking on a label, the rendered property name on the node can be changed.
  */
 class NeoGraphVisFooter extends NeoFooter {
+    /**
+     * Set default state of the footer.
+     */
     constructor(props) {
         super(props);
         this.state = {}
     }
 
 
+    /**
+     * Draw the footer (with chips) based on selected values.
+     */
     render() {
         let colors = ["#588c7e", "#f2e394", "#f2ae72", "#d96459", "#5b9aa0", "#d6d4e0",
             "#b8a9c9", "#622569", "#ddd5af", "#d9ad7c", "#a2836e", "#674d3c", "grey"]

src/card/footer/NeoLineChartFooter.js

@@ -15,6 +15,9 @@ class NeoLineChartFooter extends NeoFooter {
         this.state = {}
     }
 
+    /**
+     * Draw the property selection boxes with selected properties.
+     */
     render() {
         return (
             <div className="neo-property-select" style={{marginLeft: '20px', marginTop: "-8px"}}>

src/card/footer/NeoTableFooter.js

@@ -4,13 +4,17 @@ import Icon from "react-materialize/lib/Icon";
 import NeoFooter from "./NeoFooter";
 
 /**
- * A table report footer can be used to switch pages in the table.
+ * A table footer is a Pagination (https://materializecss.com/pagination.html) component.
+ * The component is used to switch pages in the table report.
  */
 class NeoTableFooter extends NeoFooter {
     constructor(props) {
         super(props);
     }
 
+    /**
+     * Draw the pagination component based on the currently selected page in the table.
+     */
     render() {
         return <Pagination
             activePage={(this.props.page ? this.props.page : 1)}

src/card/report/NeoBarChartReport.js

@@ -2,13 +2,16 @@ import React from "react";
 import NeoReport from "./NeoReport";
 import * as d3 from "d3";
 
+/**
+ * A bar chart report draws the resulting data from Neo4j as a bar chart.
+ * The x-axis (categories) and the y-axis (values) can be selected from the returned field names.
+ */
 class NeoBarChartReport extends NeoReport {
-
-    componentDidUpdate(prevProps) {
-        super.componentDidUpdate(prevProps);
-        this.componentDidMount();
-    }
-
+    /**
+     * On initialization, generate the visualization with d3.
+     * The drawn axes are generated from the selected properties.
+     * The size and style of the visualization is set based on the provided properties.
+     */
     componentDidMount() {
         let data = this.state.data;
         let page = this.state.page;
@@ -117,6 +120,17 @@ class NeoBarChartReport extends NeoReport {
 
     }
 
+    /**
+     * Handle updates to the component. Perform a remount on each update.
+     */
+    componentDidUpdate(prevProps) {
+        super.componentDidUpdate(prevProps);
+        this.componentDidMount();
+    }
+
+    /**
+     * Helper function to get the max/min values from the values selected for the plot's axes.
+     */
     getDataLimits(data) {
         let yValues = data.map(row => row[1]);
         let categoryLengths = data.map(row => (row[0] ? row[0] : "").toString().length);
@@ -139,6 +153,10 @@ class NeoBarChartReport extends NeoReport {
         return {maxY, minY, xTextLength: maxX};
     }
 
+    /**
+     * Attempt to parse a 'drawable' value from what was returned by Neo4j.
+     * Since these may have any type (string, number, node, relationship, path), we need to handle a variety of cases.
+     */
     parseChartValue(value, index, i) {
         // If there's no data, fill it with some blanks.
         if (value === null) {
@@ -148,7 +166,6 @@ class NeoBarChartReport extends NeoReport {
                 return NaN
             }
         }
-
         // if it's a number, just return it.
         if (!isNaN(value)) {
             return value
@@ -160,11 +177,9 @@ class NeoBarChartReport extends NeoReport {
         if (typeof (value) === "object" && !isNaN(value["low"])) {
             return value.low
         }
-
         if (typeof (value) === "string") {
             return value;
         }
-
         if (value && value["labels"] && value["identity"] && value["properties"]) {
             return value.labels + "(" + value.identity + ")"
         }
@@ -174,6 +189,9 @@ class NeoBarChartReport extends NeoReport {
         return (value) ? value.toString() : "";
     }
 
+    /**
+     * Draw the report based on the generated visualization.
+     */
     render() {
         let rendered = super.render();
         if (rendered) {