Refactor/documentation revisited

src/components/Graph/const.js

@@ -1,17 +1,17 @@
 export default {
     COORDS_SEPARATOR: ',',
-    FORCE_IDEAL_STRENGTH: -100,
-    FORCE_X: 0.06,
-    FORCE_Y: 0.06,
+    FORCE_IDEAL_STRENGTH: -100, // @TODO: Expose as configurable,
+    FORCE_X: 0.06, // @TODO: Expose as configurable,
+    FORCE_Y: 0.06, // @TODO: Expose as configurable,
     GRAPH_CONTAINER_ID: 'graph-container-zoomable',
     GRAPH_WRAPPER_ID: 'graph-wrapper',
     KEYWORDS: {
         SAME: 'SAME'
     },
     LINK_CLASS_NAME: 'link',
-    LINK_IDEAL_DISTANCE: 100, // @todo: Expose as configurable,
+    LINK_IDEAL_DISTANCE: 100, // @TODO: Expose as configurable,
     NODE_CLASS_NAME: 'node',
-    SYMBOLS: {
+    SYMBOLS: { // FIXME: Repeated SYMBOLS constant
         CIRCLE: 'circle',
         CROSS: 'cross',
         DIAMOND: 'diamond',

src/components/Graph/helper.jsx

@@ -24,10 +24,10 @@ import Node from '../Node/';
  * @param  {Object.<string, Object>} nodes - same as {@link #buildGraph|nodes in buildGraph}.
  * @param  {Object.<string, Object>} links - same as {@link #buildGraph|links in buildGraph}.
  * @param  {Object} config - same as {@link #buildGraph|config in buildGraph}.
- * @param  {function[]} linkCallbacks - same as {@link #buildGraph|linkCallbacks in buildGraph}.
+ * @param  {Function[]} linkCallbacks - same as {@link #buildGraph|linkCallbacks in buildGraph}.
  * @param  {boolean} someNodeHighlighted - same as {@link #buildGraph|someNodeHighlighted in buildGraph}.
  * @param  {number} transform - value that indicates the amount of zoom transformation.
- * @return {Object} returns an object that aggregates all props for creating respective Link component instance.
+ * @returns {Object} returns an object that aggregates all props for creating respective Link component instance.
  * @memberof Graph/helper
  */
 function _buildLinkProps(source, target, nodes, links, config, linkCallbacks, someNodeHighlighted, transform) {
@@ -79,10 +79,10 @@ function _buildLinkProps(source, target, nodes, links, config, linkCallbacks, so
  * @param  {Object.<string, Object>} nodes - same as {@link #buildGraph|nodes in buildGraph}.
  * @param  {Object.<string, Object>} links - same as {@link #buildGraph|links in buildGraph}.
  * @param  {Object} config - same as {@link #buildGraph|config in buildGraph}.
- * @param  {function[]} linkCallbacks - same as {@link #buildGraph|linkCallbacks in buildGraph}.
+ * @param  {Function[]} linkCallbacks - same as {@link #buildGraph|linkCallbacks in buildGraph}.
  * @param  {boolean} someNodeHighlighted - same as {@link #buildGraph|someNodeHighlighted in buildGraph}.
  * @param  {number} transform - value that indicates the amount of zoom transformation.
- * @return {Object[]} returns the generated array of Link components.
+ * @returns {Object[]} returns the generated array of Link components.
  * @memberof Graph/helper
  */
 function _buildNodeLinks(nodeId, nodes, links, config, linkCallbacks, someNodeHighlighted, transform) {
@@ -121,10 +121,10 @@ function _buildNodeLinks(nodeId, nodes, links, config, linkCallbacks, someNodeHi
  * Build some Node properties based on given parameters.
  * @param  {Object} node - the node object for whom we will generate properties.
  * @param  {Object} config - same as {@link #buildGraph|config in buildGraph}.
- * @param  {function[]} nodeCallbacks - same as {@link #buildGraph|nodeCallbacks in buildGraph}.
+ * @param  {Function[]} nodeCallbacks - same as {@link #buildGraph|nodeCallbacks in buildGraph}.
  * @param  {boolean} someNodeHighlighted - same as {@link #buildGraph|someNodeHighlighted in buildGraph}.
  * @param  {number} transform - value that indicates the amount of zoom transformation.
- * @return {Object} returns object that contain Link props ready to be feeded to the Link component.
+ * @returns {Object} returns object that contain Link props ready to be feeded to the Link component.
  * @memberof Graph/helper
  */
 function _buildNodeProps(node, config, nodeCallbacks, someNodeHighlighted, transform) {
@@ -179,14 +179,14 @@ function _buildNodeProps(node, config, nodeCallbacks, someNodeHighlighted, trans
  * Method that actually is exported an consumed by Graph component in order to build all Nodes and Link
  * components.
  * @param  {Object.<string, Object>} nodes - an object containing all nodes mapped by their id.
- * @param  {function[]} nodeCallbacks - array of callbacks for used defined event handler for node interactions.
+ * @param  {Function[]} nodeCallbacks - array of callbacks for used defined event handler for node interactions.
  * @param  {Object.<string, Object>} links - an object containing a matrix of connections of the graph, for each nodeId,
  * there is an Object that maps adjacent nodes ids (string) and their values (number).
- * @param  {function[]} linkCallbacks - array of callbacks for used defined event handler for link interactions.
+ * @param  {Function[]} linkCallbacks - array of callbacks for used defined event handler for link interactions.
  * @param  {Object} config - an object containg rd3g consumer defined configurations [LINK README] for the graph.
  * @param  {boolean} someNodeHighlighted - this value is true when some node on the graph is highlighted.
  * @param  {number} transform - value that indicates the amount of zoom transformation.
- * @return {Object} returns an object containg the generated nodes and links that form the graph. The result is
+ * @returns {Object} returns an object containg the generated nodes and links that form the graph. The result is
  * returned in a way that can be consumed by es6 **destructuring assignment**.
  * @memberof Graph/helper
  */
@@ -216,7 +216,7 @@ function buildGraph(nodes, nodeCallbacks, links, linkCallbacks, config, someNode
  * <a href="https://github.com/d3/d3-force#simulation_force" target="_blank">https://github.com/d3/d3-force#simulation_force</a><br/>
  * @param  {number} width - the width of the container area of the graph.
  * @param  {number} height - the height of the container area of the graph.
- * @return {Object} returns the simulation instance to be consumed.
+ * @returns {Object} returns the simulation instance to be consumed.
  * @memberof Graph/helper
  */
 function createForceSimulation(width, height) {
@@ -237,7 +237,7 @@ function createForceSimulation(width, height) {
  * and the respective link value (if non existant will default to 1).
  * @param  {Object[]} graphLinks - an array of all graph links but all the links contain the source and target nodes
  * objects.
- * @return {Object.<string, Object>} an object containing a matrix of connections of the graph, for each nodeId,
+ * @returns {Object.<string, Object>} an object containing a matrix of connections of the graph, for each nodeId,
  * there is an object that maps adjacent nodes ids (string) and their values (number).
  * @memberof Graph/helper
  */
@@ -268,7 +268,7 @@ function initializeLinks(graphLinks) {
  * that are optional for the user. Also it generates an index mapping, this maps nodes ids the their index in the array
  * of nodes. This is needed because d3 callbacks such as node click and link click return the index of the node.
  * @param  {Object[]} graphNodes - the array of nodes provided by the rd3g consumer.
- * @return {Object} returns the nodes ready to be used within rd3g with additional properties such as x, y
+ * @returns {Object} returns the nodes ready to be used within rd3g with additional properties such as x, y
  * and highlighted values. Returns also the index mapping object of type Object.<number, string>.
  * @memberof Graph/helper
  */

src/components/Graph/index.jsx

@@ -86,11 +86,10 @@ export default class Graph extends React.Component {
 
     /**
      * Handles d3 'drag' event.
-     * @param  {Object} _ - event.
+     * @param  {Object} ev - event.
      * @param  {number} index - index of the node that is being dragged.
-     * @return {undefined}
      */
-    _onDragMove = (_, index) => {
+    _onDragMove = (ev, index) => {
         if (!this.state.config.staticGraph) {
             // This is where d3 and react bind
             let draggedNode = this.state.nodes[this.state.nodeIndexMapping[index]];
@@ -115,7 +114,6 @@ export default class Graph extends React.Component {
      * Sets nodes and links highlighted value.
      * @param  {number} index - the index of the node to highlight (and its adjacent).
      * @param  {boolean} value - the highlight value to be set (true or false).
-     * @return {undefined}
      */
     _setHighlighted = (index, value) => {
         this.state.nodeHighlighted = value;
@@ -139,15 +137,14 @@ export default class Graph extends React.Component {
     /**
      * Configures zoom upon graph with default or user provided values.<br/>
      * {@link https://github.com/d3/d3-zoom#zoom}
-     * @return {undefined}
      */
     _zoomConfig = () => d3Select(`#${this.state.id}-${CONST.GRAPH_WRAPPER_ID}`)
                             .call(d3Zoom().scaleExtent([this.state.config.minZoom, this.state.config.maxZoom])
                             .on('zoom', this._zoomed));
 
     /**
      * Handler for 'zoom' event within zoom config.
-     * @return {Object} returns the transformed elements within the svg graph area.
+     * @returns {Object} returns the transformed elements within the svg graph area.
      */
     _zoomed = () => {
         const transform = d3Event.transform;
@@ -160,7 +157,6 @@ export default class Graph extends React.Component {
     /**
      * Handles mouse out node event.
      * @param  {number} index - index of the mouse hovered node.
-     * @return {undefined}
      */
     onMouseOutNode = (index) => {
         this.props.onMouseOutNode && this.props.onMouseOutNode(index);
@@ -171,7 +167,6 @@ export default class Graph extends React.Component {
     /**
      * Handles mouse over node event.
      * @param  {number} index - index of the mouse hovered node.
-     * @return {undefined}
      */
     onMouseOverNode = (index) => {
         this.props.onMouseOverNode && this.props.onMouseOverNode(index);
@@ -219,6 +214,7 @@ export default class Graph extends React.Component {
      * @param  {Object} data
      */
     _validateGraphData(data) {
+        // @TODO: Move function to helper.jsx
         data.links.forEach(l => {
             if (!data.nodes.find(n => n.id === l.source)) {
                 Utils.throwErr(this.constructor.name, `${ERRORS.INVALID_LINKS} - ${l.source} is not a valid node id`);

src/components/Link/index.jsx

@@ -23,7 +23,6 @@ import React from 'react';
 export default class Link extends React.Component {
     /**
      * Handle link click event.
-     * @return {undefined}
      */
     handleOnClickLink = () => this.props.onClickLink && this.props.onClickLink(this.props.source, this.props.target);
 

src/components/Node/helper.js

@@ -21,7 +21,7 @@ import CONST from './const';
  * of d3 symbol.<br/>
  * {@link https://github.com/d3/d3-shape/blob/master/README.md#symbol}
  * @param  {string} typeName - the string that specifies the symbol type (should be one of {@link #node-symbol-type|node.symbolType}).
- * @return {Object} concrete instance of d3 symbol (defaults to circle).
+ * @returns {Object} concrete instance of d3 symbol (defaults to circle).
  * @memberof Node/helper
  */
 function _convertTypeToD3Symbol(typeName) {
@@ -50,13 +50,13 @@ function _convertTypeToD3Symbol(typeName) {
  * @param  {number} [size=80] - the size of the symbol.
  * @param  {string} [symbolTypeDesc='circle'] - the string containing the type of symbol that we want to build
  * (should be one of {@link #node-symbol-type|node.symbolType}).
- * @return {Object} concrete instance of d3 symbol.
+ * @returns {Object} concrete instance of d3 symbol.
  * @memberof Node/helper
  */
 function buildSvgSymbol(size=CONST.DEFAULT_NODE_SIZE, symbolTypeDesc=CONST.SYMBOLS.CIRCLE) {
     return d3Symbol()
             .size(() => size)
-            .type(() => _convertTypeToD3Symbol(symbolTypeDesc))(); // @todo: Strange behavior Symbol ret function
+            .type(() => _convertTypeToD3Symbol(symbolTypeDesc))(); //@TODO: Strange behavior Symbol ret function
 }
 
 export default {

src/components/Node/index.jsx

@@ -42,19 +42,16 @@ import NodeHelper from './helper';
 export default class Node extends React.Component {
     /**
      * Handle click on the node.
-     * @return {undefined}
      */
     handleOnClickNode = () => this.props.onClickNode && this.props.onClickNode(this.props.id);
 
     /**
      * Handle mouse over node event.
-     * @return {undefined}
      */
     handleOnMouseOverNode = () => this.props.onMouseOverNode && this.props.onMouseOverNode(this.props.id);
 
     /**
      * Handle mouse out node event.
-     * @return {undefined}
      */
     handleOnMouseOutNode = () => this.props.onMouseOut && this.props.onMouseOut(this.props.id);
 

src/utils.js

@@ -13,7 +13,7 @@ const MAX_DEPTH = 5;
  * Checks whether a certain object property is from object type and is a non empty object.
  * @param  {Object} o - the object.
  * @param  {number|string} k - the object property.
- * @return {boolean} returns true if o[k] is an non empty object.
+ * @returns {boolean} returns true if o[k] is an non empty object.
  * @memberof utils
  */
 function _isPropertyNestedObject(o, k) {
@@ -26,7 +26,7 @@ function _isPropertyNestedObject(o, k) {
  * @param  {Object} o2 - second object to compare with first.
  * @param  {number} [_depth=0] - this parameter serves only for internal usage.
  * @memberof utils
- * @return {boolean} returns true if o1 and o2 have exactly the same content, or are exactly the same object reference.
+ * @returns {boolean} returns true if o1 and o2 have exactly the same content, or are exactly the same object reference.
  */
 function isDeepEqual(o1, o2, _depth=0) {
     let diffs = [];
@@ -62,7 +62,7 @@ function isDeepEqual(o1, o2, _depth=0) {
  * Checks whether or not a certain object is empty.
  * NOTE: If the passed parameter is not an object the method return false.
  * @param  {Object}  o - object whom emptiness we want to check.
- * @return {boolean} true if the given object is n ft and object and is empty.
+ * @returns {boolean} true if the given object is n ft and object and is empty.
  * @memberof utils
  */
 function isObjectEmpty(o) {
@@ -76,7 +76,7 @@ function isObjectEmpty(o) {
  * @param  {Object} o2 - object that will override o1 properties.
  * @memberof utils
  * @param  {int} [_depth=0] - the depth at which we are merging the object.
- * @return {Object} object that is the result of merging o1 and o2, being o2 properties priority overriding
+ * @returns {Object} object that is the result of merging o1 and o2, being o2 properties priority overriding
  * existent o1 properties.
  */
 function merge(o1={}, o2={}, _depth=0) {
@@ -100,7 +100,7 @@ function merge(o1={}, o2={}, _depth=0) {
  * Helper function for customized error logging.
  * @param  {string} component - the name of the component where the error is to be thrown.
  * @param  {string} msg - the message contain a more detailed explanation about the error.
- * @return {Error} the thrown error.
+ * @returns {Error} the thrown error.
  * @memberof utils
  */
 function throwErr(component, msg) {