Refactor/links build (#69)

* Improve flow for building Link components * Update graph.test snapshot * Remove old todo * Break builds nodes into smaller function * Fix dev npm script * Nice improvements on README badges :nerd: * Add line visibility step to graph.e2e
danielcaldas · May 12, 2018 · dd5fd5c · dd5fd5c
1 parent a121317
commit dd5fd5c
Show file tree

Hide file tree

Showing 9 changed files with 166 additions and 320 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,11 @@
 # react-d3-graph &middot; [![Build Status](https://travis-ci.org/danielcaldas/react-d3-graph.svg?branch=master&style=flat-square)](https://travis-ci.org/danielcaldas/react-d3-graph)
 
-[![npm version](https://img.shields.io/badge/npm-v1.2.1-blue.svg?longCache=true&style=flat-square)](https://www.npmjs.com/package/react-d3-graph) [![npm stats](https://img.shields.io/badge/downloads-3k-brightgreen.svg?longCache=true&style=flat-square)](https://npm-stat.com/charts.html?package=react-d3-graph&from=2017-04-25) [![probot enabled](https://img.shields.io/badge/probot:stale-enabled-yellow.svg?longCache=true&style=flat-square)](https://probot.github.io/) [![trello](https://img.shields.io/badge/trello-board-blue.svg?longCache=true&style=flat-square)](https://trello.com/b/KrnmFXha/react-d3-graph)
+[![npm version](https://img.shields.io/npm/v/react-d3-graph.svg?style=flat-square)](https://www.npmjs.com/package/react-d3-graph) [![probot enabled](https://img.shields.io/badge/probot:stale-enabled-yellow.svg?longCache=true&style=flat-square)](https://probot.github.io/) [![trello](https://img.shields.io/badge/trello-board-blue.svg?longCache=true&style=flat-square)](https://trello.com/b/KrnmFXha/react-d3-graph)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 
+![npm](https://img.shields.io/npm/dw/react-d3-graph.svg?style=flat-square)
+![npm](https://img.shields.io/npm/dt/react-d3-graph.svg?style=flat-square)
+
 :book: [1.2.1](https://danielcaldas.github.io/react-d3-graph/docs/index.html)
 
 ### _Interactive and configurable graphs with react and d3 effortlessly_

diff --git a/cypress/integration/graph.e2e.js b/cypress/integration/graph.e2e.js
@@ -63,6 +63,7 @@ describe('[rd3g-graph] graph tests', function() {
 
                 it('nodes props modifications should be reflected in the graph', function() {
                     cy.get('text').should('have.length', 14);
+                    cy.get('line').should('be.visible');
 
                     this.sandboxPO.addNode();
                     this.sandboxPO.addNode();
@@ -102,6 +103,7 @@ describe('[rd3g-graph] graph tests', function() {
                     this.sandboxPO.removeNode();
 
                     cy.get('text').should('have.length', 14);
+                    cy.get('line').should('be.visible');
                 });
             });
         });

diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
     "license": "MIT",
     "scripts": {
         "check": "npm run docs:lint && npm run lint && npm run test && npm run functional",
-        "dev": "webpack-dev-server -d --content-base sandbox --inline --hot --port 3002",
+        "dev": "NODE_ENV=dev webpack-dev-server --mode=development --content-base sandbox --config webpack.config.js --inline --hot --port 3002",
         "dist:rd3g": "rm -rf dist/ && webpack --config webpack.config.dist.js -p --display-modules --optimize-minimize",
         "dist:sandbox": "webpack --config webpack.config.js -p",
         "dist:transpile": "./node_modules/babel-cli/bin/babel.js -d lib src",

diff --git a/src/components/graph/Graph.jsx b/src/components/graph/Graph.jsx
@@ -366,6 +366,7 @@ export default class Graph extends React.Component {
                 onMouseOverNode: this.onMouseOverNode,
                 onMouseOut: this.onMouseOutNode
             },
+            this.state.d3Links,
             this.state.links,
             {
                 onClickLink: this.props.onClickLink,

diff --git a/src/components/graph/graph.const.js b/src/components/graph/graph.const.js
@@ -2,7 +2,7 @@ import CONST from '../../const';
 
 export default {
     COORDS_SEPARATOR: ',',
-    FORCE_IDEAL_STRENGTH: -100, // @TODO: Expose as configurable,
+    FORCE_IDEAL_STRENGTH: -100, // TODO: Expose as configurable,
     FORCE_X: 0.06,
     FORCE_Y: 0.06,
     GRAPH_CONTAINER_ID: 'graph-container-zoomable',

diff --git a/src/components/graph/graph.helper.js b/src/components/graph/graph.helper.js
@@ -107,7 +107,7 @@ function _initializeLinks(graphLinks) {
             links[target] = {};
         }
 
-        // @TODO: If the graph is directed this should be adapted
+        // TODO: If the graph is directed this should be adapted
         links[source][target] = links[target][source] = l.value || 1;
 
         return links;

diff --git a/src/components/graph/graph.renderer.jsx b/src/components/graph/graph.renderer.jsx
@@ -9,16 +9,13 @@ import CONST from './graph.const';
 
 import Link from '../link/Link';
 import Node from '../node/Node';
-import {
-    buildLinkProps,
-    buildNodeProps
-} from './graph.helper';
+import { buildLinkProps, buildNodeProps } from './graph.helper';
 
 /**
- * Build Link components for a given node.
- * @param  {string} nodeId - the id of the node to whom Link components will be generated.
+ * Build Link components given a list of links.
  * @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  {Array.<Object>} links - array of links {@link #Link|Link}.
+ * @param  {Array.<Object>} linksMatrix - array of links {@link #Link|Link}.
  * @param  {Object} config - same as {@link #buildGraph|config in buildGraph}.
  * @param  {Function[]} linkCallbacks - same as {@link #buildGraph|linkCallbacks in buildGraph}.
  * @param  {string} highlightedNode - same as {@link #buildGraph|highlightedNode in buildGraph}.
@@ -27,45 +24,57 @@ import {
  * @returns {Object[]} returns the generated array of Link components.
  * @memberof Graph/helper
  */
-function _buildNodeLinks(nodeId, nodes, links, config, linkCallbacks, highlightedNode, highlightedLink, transform) {
-    let linksComponents = [];
-
-    if (links[nodeId]) {
-        const adjacents = Object.keys(links[nodeId]);
-        const n = adjacents.length;
-
-        for (let j=0; j < n; j++) {
-            const source = nodeId;
-            const target = adjacents[j];
+function _buildLinks(nodes, links, linksMatrix, config, linkCallbacks, highlightedNode, highlightedLink, transform) {
+    return links.map(link => {
+        const { source, target } = link;
+        // FIXME: solve this source data inconsistency later
+        const sourceId = source.id || source;
+        const targetId = target.id || target;
+        const key = `${sourceId}${CONST.COORDS_SEPARATOR}${targetId}`;
+        const props = buildLinkProps(
+            sourceId,
+            targetId,
+            nodes,
+            linksMatrix,
+            config,
+            linkCallbacks,
+            highlightedNode,
+            highlightedLink,
+            transform
+        );
 
-            if (nodes[target]) {
-                const key = `${nodeId}${CONST.COORDS_SEPARATOR}${target}`;
-                const props = buildLinkProps(
-                    source,
-                    target,
-                    nodes,
-                    links,
-                    config,
-                    linkCallbacks,
-                    highlightedNode,
-                    highlightedLink,
-                    transform
-                );
+        return <Link key={key} {...props} />;
+    });
+}
 
-                linksComponents.push(<Link key={key} {...props} />);
-            }
-        }
-    }
+/**
+ * Function that builds Node 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  {Object} config - an object containing 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  {Object} highlightedLink - this object contains a source and target property for a link that is highlighted at some point in time.
+ * @param  {string} highlightedLink.source - id of source node for highlighted link.
+ * @param  {string} highlightedLink.target - id of target node for highlighted link.
+ * @param  {number} transform - value that indicates the amount of zoom transformation.
+ * @returns {Object} returns the generated array of nodes components
+ * @memberof Graph/helper
+ */
+function _buildNodes(nodes, nodeCallbacks, config, highlightedNode, highlightedLink, transform) {
+    return Object.keys(nodes).map(nodeId => {
+        const props = buildNodeProps(nodes[nodeId], config, nodeCallbacks, highlightedNode, highlightedLink, transform);
 
-    return linksComponents;
+        return <Node key={nodeId} {...props} />;
+    });
 }
 
 /**
  * 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  {Object.<string, Object>} links - an object containing a matrix of connections of the graph, for each nodeId,
+ * @param  {Array.<Object>} links - array of links {@link #Link|Link}.
+ * @param  {Object.<string, Object>} linksMatrix - 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).
  * ```javascript
  *  // links example
@@ -101,29 +110,30 @@ function _buildNodeLinks(nodeId, nodes, links, config, linkCallbacks, highlighte
  * returned in a way that can be consumed by es6 **destructuring assignment**.
  * @memberof Graph/helper
  */
-function buildGraph(nodes, nodeCallbacks, links, linkCallbacks, config, highlightedNode, highlightedLink, 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,
-                                        highlightedNode, highlightedLink, transform);
-
-        nodesComponents.push(<Node key={nodeId} {...props} />);
-
-        linksComponents = linksComponents.concat(
-            _buildNodeLinks(nodeId, nodes, links, config, linkCallbacks, highlightedNode, highlightedLink, transform)
-        );
-    }
-
+function buildGraph(
+    nodes,
+    nodeCallbacks,
+    links,
+    linksMatrix,
+    linkCallbacks,
+    config,
+    highlightedNode,
+    highlightedLink,
+    transform
+) {
     return {
-        nodes: nodesComponents,
-        links: linksComponents
+        nodes: _buildNodes(nodes, nodeCallbacks, config, highlightedNode, highlightedLink, transform),
+        links: _buildLinks(
+            nodes,
+            links,
+            linksMatrix,
+            config,
+            linkCallbacks,
+            highlightedNode,
+            highlightedLink,
+            transform
+        )
     };
 }
 
-export {
-    buildGraph
-};
+export { buildGraph };
diff --git a/src/components/node/node.helper.js b/src/components/node/node.helper.js
@@ -56,7 +56,7 @@ function _convertTypeToD3Symbol(typeName) {
 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))();
 }
 
 export default {