Feature/highlight nodes degree (#34)

* Fix documentation typo in Graph/config.js

* Graph build api change. Old prop {boolean} someNodeHighlighted is now {string} highlightedNode

* Implement feature showcase for degrees 1 and 2 with new config prop highlightDegree

* Support for node degree's highliht 0, 1st and 2nd degree

* Update jsdoc helper.jsx for buildGraph method

* Only update config when something has changed

* Improve highlight logic with _getNodeOpacity in Graph/helper

* Update config docs on highlightDegree prop

* Fix existent link to Sandbox component

* Small tweaks on Graph/helper.jsx docs

Author: danielcaldas

README.md

@@ -22,7 +22,7 @@ yarn add react-d3-graph // using yarn
 
 ## Usage sample
 Graph component is the main component for react-d3-graph components, its interface allows its user to build the graph once the user provides the data, configuration (optional) and callback interactions (also optional).
-The code for the [live example](https://danielcaldas.github.io/react-d3-graph/sandbox/index.html) can be consulted [here](https://github.com/danielcaldas/react-d3-graph/blob/master/sandbox/Sandbox.jsx).
+The code for the [live example](https://danielcaldas.github.io/react-d3-graph/sandbox/index.html) can be consulted [here](https://github.com/danielcaldas/react-d3-graph/blob/master/sandbox/Sandbox.jsxx).
 
 ```javascript
 import { Graph } from 'react-d3-graph';

docs/DOCUMENTATION.md

@@ -193,7 +193,7 @@ Returns **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refer
 Graph component is the main component for react-d3-graph components, its interface allows its user
 to build the graph once the user provides the data, configuration (optional) and callback interactions (also optional).
 The code for the live example (<https://danielcaldas.github.io/react-d3-graph/sandbox/index.html>)
-can be consulted here <https://github.com/danielcaldas/react-d3-graph/blob/master/sandbox/Sandbox.js>
+can be consulted here <https://github.com/danielcaldas/react-d3-graph/blob/master/sandbox/Sandbox.jsx>
 
 **Parameters**
 

docs/index.html

@@ -1086,7 +1086,7 @@ <h3 class='fl m0' id='graph'>
   <p>Graph component is the main component for react-d3-graph components, its interface allows its user
 to build the graph once the user provides the data, configuration (optional) and callback interactions (also optional).
 The code for the live example (<a href="https://danielcaldas.github.io/react-d3-graph/sandbox/index.html">https://danielcaldas.github.io/react-d3-graph/sandbox/index.html</a>)
-can be consulted here <a href="https://github.com/danielcaldas/react-d3-graph/blob/master/sandbox/Sandbox.js">https://github.com/danielcaldas/react-d3-graph/blob/master/sandbox/Sandbox.js</a></p>
+can be consulted here <a href="https://github.com/danielcaldas/react-d3-graph/blob/master/sandbox/Sandbox.jsx">https://github.com/danielcaldas/react-d3-graph/blob/master/sandbox/Sandbox.jsx</a></p>
 
 
   <div class='pre p1 fill-light mt0'>new Graph(props: any)</div>

src/components/Graph/config.js

@@ -17,9 +17,9 @@
  *     nodes: [
  *         {
  *             id: 'id',
- *             color: 'red',   // only this node will be red
- *             size: 300,      // only this node will have size 300
- *             type: 'diamond' // only this node will have 'diamond' shape
+ *             color: 'red',         // only this node will be red
+ *             size: 300,            // only this node will have size 300
+ *             symbolType: 'diamond' // only this node will have 'diamond' shape
  *         }
  *     ],
  *     links: [...]
@@ -32,6 +32,10 @@
  * @param {number} [height=400] - the height of the (svg) area where the graph will be rendered.
  * @param {boolean} [highlightBehavior=false] - 🚅🚅🚅 when user mouse hovers a node that node and adjacent common
  * connections will be highlighted. All the remaining nodes and links assume opacity value equal to **highlightOpacity**.
+ * @param {number} [highlightDegree=1] - **Possible values: 0, 1 or 2**. This value represents the range of the
+ * highlight behavior when some node is highlighted. If the value is set to **0** only the selected node will be
+ * highlighted. If the value is set to **1** the selected node and his 1st degree connections will be highlighted. If
+ * the value is set to **2** the selected node will be highlighted as well as the 1st and 2nd common degree connections.
  * @param {number} [highlightOpacity=1] - this value is used to highlight nodes in the network. The lower
  * the value the more the less highlighted nodes will be visible (related to **highlightBehavior**).
  * @param {number} [maxZoom=8] - max zoom that can be performed against the graph.
@@ -114,8 +118,9 @@
 export default {
     automaticRearrangeAfterDropNode: false,
     height: 400,
-    highlightBehavior: false,
-    highlightOpacity: 1,
+    highlightBehavior: true,
+    highlightDegree: 1,
+    highlightOpacity: 0.1,
     maxZoom: 8,
     minZoom: 0.5,
     panAndZoom: false,

src/components/Graph/helper.jsx

@@ -25,27 +25,40 @@ import Node from '../Node/';
  * @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  {boolean} someNodeHighlighted - same as {@link #buildGraph|someNodeHighlighted in buildGraph}.
+ * @param  {string} highlightedNode - same as {@link #buildGraph|highlightedNode in buildGraph}.
  * @param  {number} transform - value that indicates the amount of zoom transformation.
  * @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) {
+function _buildLinkProps(source, target, nodes, links, config, linkCallbacks, highlightedNode, transform) {
     const x1 = nodes[source] && nodes[source].x || 0;
     const y1 = nodes[source] && nodes[source].y || 0;
     const x2 = nodes[target] && nodes[target].x || 0;
     const y2 = nodes[target] && nodes[target].y || 0;
 
     let opacity = config.link.opacity;
+    let mainNodeParticipates;
+
+    switch (config.highlightDegree) {
+        case 0:
+            break;
+        case 2:
+            mainNodeParticipates = true;
+            break;
+        default: // 1st degree is the fallback behavior
+            mainNodeParticipates = source === highlightedNode || target === highlightedNode;
+            break;
+    }
 
-    if (someNodeHighlighted) {
-        opacity = (nodes[source].highlighted && nodes[target].highlighted) ? config.link.opacity
-                                                                           : config.highlightOpacity;
+    if (highlightedNode) {
+        opacity = (mainNodeParticipates
+                && nodes[source].highlighted
+                && nodes[target].highlighted) ? config.link.opacity : config.highlightOpacity;
     }
 
     let stroke = config.link.color;
 
-    if (nodes[source].highlighted && nodes[target].highlighted) {
+    if (mainNodeParticipates && nodes[source].highlighted && nodes[target].highlighted) {
         stroke = config.link.highlightColor === CONST.KEYWORDS.SAME ? config.link.color
                                                                     : config.link.highlightColor;
     }
@@ -80,12 +93,12 @@ function _buildLinkProps(source, target, nodes, links, config, linkCallbacks, so
  * @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  {boolean} someNodeHighlighted - same as {@link #buildGraph|someNodeHighlighted in buildGraph}.
+ * @param  {string} highlightedNode - same as {@link #buildGraph|highlightedNode in buildGraph}.
  * @param  {number} transform - value that indicates the amount of zoom transformation.
  * @returns {Object[]} returns the generated array of Link components.
  * @memberof Graph/helper
  */
-function _buildNodeLinks(nodeId, nodes, links, config, linkCallbacks, someNodeHighlighted, transform) {
+function _buildNodeLinks(nodeId, nodes, links, config, linkCallbacks, highlightedNode, transform) {
     let linksComponents = [];
 
     if (links[nodeId]) {
@@ -105,7 +118,7 @@ function _buildNodeLinks(nodeId, nodes, links, config, linkCallbacks, someNodeHi
                     links,
                     config,
                     linkCallbacks,
-                    someNodeHighlighted,
+                    highlightedNode,
                     transform
                 );
 
@@ -117,22 +130,40 @@ function _buildNodeLinks(nodeId, nodes, links, config, linkCallbacks, someNodeHi
     return linksComponents;
 }
 
+/**
+ * Get the correct node opacity in order to properly make decisions based on context such as currently highlited node.
+ * @param  {Object} node - the node object for whom we will generate properties.
+ * @param  {string} highlightedNode - same as {@link #buildGraph|highlightedNode in buildGraph}.
+ * @param  {Object} config - same as {@link #buildGraph|config in buildGraph}.
+ * @returns {number} the opacity value for the given node.
+ * @memberof Graph/helper
+ */
+function _getNodeOpacity(node, highlightedNode, config) {
+    let opacity;
+
+    if (highlightedNode && config.highlightDegree === 0) {
+        opacity = (node.id === highlightedNode && node.highlighted) ? config.node.opacity : config.highlightOpacity;
+    } else if (highlightedNode) {
+        opacity = node.highlighted ? config.node.opacity : config.highlightOpacity;
+    } else {
+        opacity = config.node.opacity;
+    }
+
+    return opacity;
+}
+
 /**
  * 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  {boolean} someNodeHighlighted - same as {@link #buildGraph|someNodeHighlighted in buildGraph}.
+ * @param  {string} highlightedNode - same as {@link #buildGraph|highlightedNode in buildGraph}.
  * @param  {number} transform - value that indicates the amount of zoom transformation.
  * @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) {
-    let opacity = config.node.opacity;
-
-    if (someNodeHighlighted) {
-        opacity = node.highlighted ? config.node.opacity : config.highlightOpacity;
-    }
+function _buildNodeProps(node, config, nodeCallbacks, highlightedNode, transform) {
+    const opacity = _getNodeOpacity(node, highlightedNode, config);
 
     let fill = node.color || config.node.color;
 
@@ -206,26 +237,26 @@ function _buildNodeProps(node, config, nodeCallbacks, someNodeHighlighted, trans
  *  }
  * ```
  * @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  {Object} config - an object containg rd3g consumer defined configurations {@link #config config} for the graph.
+ * @param  {string} highlightedNode - this value contains a string that represents the some currently highlighted node.
  * @param  {number} transform - value that indicates the amount of zoom transformation.
  * @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
  */
-function buildGraph(nodes, nodeCallbacks, links, linkCallbacks, config, someNodeHighlighted, transform) {
+function buildGraph(nodes, nodeCallbacks, links, linkCallbacks, config, highlightedNode, transform) {
     let linksComponents = [];
     let nodesComponents = [];
 
     for (let i = 0, keys = Object.keys(nodes), n = keys.length; i < n; i++) {
         const nodeId = keys[i];
 
-        const props = _buildNodeProps(nodes[nodeId], config, nodeCallbacks, someNodeHighlighted, transform);
+        const props = _buildNodeProps(nodes[nodeId], config, nodeCallbacks, highlightedNode, transform);
 
         nodesComponents.push(<Node key={nodeId} {...props} />);
 
         linksComponents = linksComponents.concat(
-            _buildNodeLinks(nodeId, nodes, links, config, linkCallbacks, someNodeHighlighted, transform)
+            _buildNodeLinks(nodeId, nodes, links, config, linkCallbacks, highlightedNode, transform)
         );
     }
 
@@ -302,7 +333,7 @@ function initializeNodes(graphNodes) {
     for (let i=0; i < n; i++) {
         const node = graphNodes[i];
 
-        node['highlighted'] = false;
+        node.highlighted = false;
 
         if (!node.hasOwnProperty('x')) { node['x'] = 0; }
         if (!node.hasOwnProperty('y')) { node['y'] = 0; }

src/components/Graph/index.jsx

@@ -26,8 +26,8 @@ const D3_CONST = {
 /**
  * Graph component is the main component for react-d3-graph components, its interface allows its user
  * to build the graph once the user provides the data, configuration (optional) and callback interactions (also optional).
- * The code for the live example (https://danielcaldas.github.io/react-d3-graph/sandbox/index.html)
- * can be consulted here https://github.com/danielcaldas/react-d3-graph/blob/master/sandbox/Sandbox.js
+ * The code for the [live example](https://danielcaldas.github.io/react-d3-graph/sandbox/index.html)
+ * can be consulted [here](https://github.com/danielcaldas/react-d3-graph/blob/master/sandbox/Sandbox.jsx)
  * @example
  * import { Graph } from 'react-d3-graph';
  *
@@ -123,10 +123,11 @@ export default class Graph extends React.Component {
      * @param  {boolean} value - the highlight value to be set (true or false).
      */
     _setHighlighted = (index, value) => {
-        this.state.nodeHighlighted = value;
+        this.state.highlightedNode = value ? index : '';
         this.state.nodes[index].highlighted = value;
 
-        if (this.state.links[index]) {
+        // when highlightDegree is 0 we want only to highlight selected node
+        if (this.state.links[index] && this.state.config.highlightDegree !== 0) {
             Object.keys(this.state.links[index]).forEach(k => {
                 this.state.nodes[k].highlighted = value;
             });
@@ -273,7 +274,7 @@ export default class Graph extends React.Component {
             d3Links,
             nodes,
             d3Nodes,
-            nodeHighlighted: false,
+            highlightedNode: '',
             simulation,
             newGraphElements: false,
             configUpdated: false,
@@ -322,7 +323,7 @@ export default class Graph extends React.Component {
 
         const configUpdated = !utils.isDeepEqual(nextProps.config, this.state.config);
         const state = newGraphElements ? this._initializeGraphState(nextProps.data) : this.state;
-        const config = utils.merge(DEFAULT_CONFIG, nextProps.config || {});
+        const config = configUpdated ? utils.merge(DEFAULT_CONFIG, nextProps.config || {}) : this.state.config;
 
         // In order to properly update graph data we need to pause eventual d3 ongoing animations
         newGraphElements && this.pauseSimulation();
@@ -378,7 +379,7 @@ export default class Graph extends React.Component {
             this.state.links,
             { onClickLink: this.props.onClickLink },
             this.state.config,
-            this.state.nodeHighlighted,
+            this.state.highlightedNode,
             this.state.transform
         );