Fix/set initial static graph (#26)

* Update README

* Small fix on Graph/config docs description

* Create function so set initial nodes positions in Sanbdox component

* 🐛 fix initializeNodes method typo n -> node

* Small fix on Graph/helper.jsx _buildLinkProps

* Update Graph.test.js.snap. Fix regression

* Sandbox improvements to easy support initial graph override configs

* Update docs for staticGraph config

* Add .editorconfig

* Add eslint-plugin-jest. Add lint npm script for unit tests

Author: danielcaldas

.editorconfig

@@ -0,0 +1,20 @@
+# EditorConfig is awesome: http://EditorConfig.org
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.{js}]
+charset = utf-8
+
+[*.js]
+indent_style = space
+indent_size = 4
+
+[Makefile]
+indent_style = tab
+
+[{package.json,package-lock.json,yarn.lock,.travis.yml}]
+indent_style = space
+indent_size = 4

.eslintrc.test.config.js

@@ -0,0 +1,31 @@
+module.exports = {
+    "extends": [ "plugin:jest/recommended" ],
+    "globals": {
+        "document": true,
+        "Reflect": true,
+        "window": true
+    },
+    "parser": "babel-eslint",
+    "parserOptions": {
+        "ecmaVersion": 6,
+        "ecmaFeatures": {
+            "jsx": true
+        }
+    },
+    "plugins": [
+        "standard",
+        "promise",
+        "react",
+        "jest"
+    ],
+    "rules": {
+        "jest/no-disabled-tests": "warn",
+        "jest/no-focused-tests": "error",
+        "jest/no-identical-title": "error",
+        "jest/valid-expect": "error",
+        "max-len": ["error", 180, 4, { "ignoreComments": true }]
+    },
+    "env": {
+        "jest/globals": true
+    }
+};

README.md

@@ -1,13 +1,14 @@
 # react-d3-graph · [![Build Status](https://travis-ci.com/danielcaldas/react-d3-graph.svg?token=fb6uSENok5Y3gSSi5yjE&branch=master)](https://travis-ci.com/danielcaldas/react-d3-graph) [![npm version](https://img.shields.io/badge/npm-v0.2.1-blue.svg)](https://www.npmjs.com/package/react-d3-graph) [![npm stats](https://img.shields.io/badge/downloads->600-brightgreen.svg)](https://npm-stat.com/) [![probot enabled](https://img.shields.io/badge/probot:stale-enabled-yellow.svg)](https://probot.github.io/)
+[:book:](https://danielcaldas.github.io/react-d3-graph/docs/index.html)
 
 ### *Interactive and configurable graphs with react and d3 effortlessly*
 
 ![react-d3-graph gif sample](https://github.com/danielcaldas/react-d3-graph/blob/master/sandbox/rd3g.gif?raw=true)
 
 ## Playground
-Here a live playground (https://danielcaldas.github.io/react-d3-graph/sandbox/index.html) page where you can interactively config your own graph, and generate a ready to use configuration! :sunglasses:
+[Here a live playground](https://danielcaldas.github.io/react-d3-graph/sandbox/index.html) page where you can interactively config your own graph, and generate a ready to use configuration! :sunglasses:
 
-## Documentation
+## Documentation :book:
 Full documentation [here](https://danielcaldas.github.io/react-d3-graph/docs/index.html).
 
 ## Compatibility

package.json

@@ -14,7 +14,9 @@
         "docs": "npm run docs:lint && node_modules/documentation/bin/documentation.js build src/**/*.js -f html -o gen-docs && node_modules/documentation/bin/documentation.js build src/**/*.js -f md > gen-docs/DOCUMENTATION.md",
         "docs:lint": "node_modules/documentation/bin/documentation.js lint src/**/*.js",
         "docs:watch": "node_modules/documentation/bin/documentation.js build src/**/*.js -f html -o gen-docs --watch",
-        "lint": "node_modules/eslint/bin/eslint.js --config=.eslintrc.js \"src/**/*.js*\"",
+        "lint": "npm run lint:src && npm run lint:test",
+        "lint:src": "node_modules/eslint/bin/eslint.js --config=.eslintrc.js \"src/**/*.js*\"",
+        "lint:test": "node_modules/eslint/bin/eslint.js --config=.eslintrc.test.config.js \"test/**/*.test.js\"",
         "test": "jest --verbose --coverage",
         "test:clean": "jest --no-cache --updateSnapshot --verbose --coverage",
         "test:watch": "jest --verbose --watchAll"
@@ -39,6 +41,7 @@
         "documentation": "5.3.2",
         "eslint": "3.18.0",
         "eslint-config-recommended": "1.5.0",
+        "eslint-plugin-jest": "21.2.0",
         "eslint-plugin-promise": "3.5.0",
         "eslint-plugin-standard": "2.1.1",
         "html-webpack-plugin": "2.30.1",

sandbox/Sandbox.jsx

@@ -29,7 +29,7 @@ export default class Sandbox extends React.Component {
         this.uiSchema = uiSchema;
 
         this.state = {
-            config: defaultConfig,
+            config: {}, // Override initial configs here. e.g: {staticGraph: true}
             generatedConfig: {},
             schema,
             data
@@ -121,7 +121,7 @@ export default class Sandbox extends React.Component {
 
     /**
      * ==============================================================
-     * The methods below (**besides render method) is Sandbox specific it will not
+     * The methods below (besides render method) is Sandbox specific it will not
      * be usefull in any way to your application in terms
      * of integrating react-d3-graph in your app.
      * ==============================================================
@@ -185,10 +185,35 @@ export default class Sandbox extends React.Component {
         });
     }
 
+    /**
+     * This function decorates nodes and links with positions. The motivation
+     * for this function its to set `config.staticGraph` to true on the first render
+     * call, and to get nodes and links statically set to their initial positions.
+     * @param  {Object} nodes nodes and links with minimalist structure.
+     * @return {Object} the graph where now nodes containing (x,y) coords.
+     */
+    decorateGraphNodesWithInitialPositioning = (nodes) => {
+        return nodes.map(n => ({
+            id: n.id,
+            x: Math.floor(Math.random() * 500),
+            y: Math.floor(Math.random() * 500),
+            symbolType: n.symbolType || 'circle'
+        }));
+    }
+
     render() {
+        // This does not happens in this sandbox scenario running time, but if we set staticGraph config
+        // to true in the constructor
+        const data = this.state.config.staticGraph ?
+        {
+            nodes: this.decorateGraphNodesWithInitialPositioning(this.state.data.nodes),
+            links: this.state.data.links
+        }
+        : this.state.data;
+
         const graphProps = {
             id: 'graph',
-            data: this.state.data,
+            data,
             config: this.state.config,
             onClickNode: this.onClickNode,
             onClickLink: this.onClickLink,
@@ -200,6 +225,7 @@ export default class Sandbox extends React.Component {
             cursor: this.state.config.staticGraph ? 'not-allowed' : 'pointer'
         };
 
+        // @TODO: Only show configs that differ from default ones in "Your config" box
         return (
             <div className='container'>
                 <div className='container__graph'>

src/components/Graph/config.js

@@ -39,8 +39,9 @@
  * @param {boolean} [panAndZoom=false] - 🚅🚅🚅 pan and zoom effect when performing zoom in the graph,
  * a similar functionality may be consulted {@link https://bl.ocks.org/mbostock/2a39a768b1d4bc00a09650edef75ad39|here}.
  * @param {boolean} [staticGraph=false] - when setting this value to true the graph will be completely static, thus
- * all forces and drag events upon nodes will be disabled. **Plus**, if this value is true the nodes will be rendered
- * in the provided **x and y coordinates**, no coordinates will be calculated by react-d3-graph.
+ * all forces and drag events upon nodes will produce not effect. Note that, if this value is true the nodes will be
+ * rendered with the initial provided **x and y coordinates** (links positions will be automatically set
+ * from the given nodes positions by rd3g), no coordinates will be calculated by rd3g or subjacent d3 modules.
  * @param {number} [width=800] - the width of the (svg) area where the graph will be rendered.
  * <br/>
  * @param {Object} node node object is explained in next section.

src/components/Graph/helper.jsx

@@ -31,10 +31,10 @@ import Node from '../Node/';
  * @memberof Graph/helper
  */
 function _buildLinkProps(source, target, nodes, links, config, linkCallbacks, someNodeHighlighted, 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';
+    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;
 
@@ -304,8 +304,8 @@ function initializeNodes(graphNodes) {
 
         node['highlighted'] = false;
 
-        if (!n.hasOwnProperty('x')) { node['x'] = 0; }
-        if (!n.hasOwnProperty('y')) { node['y'] = 0; }
+        if (!node.hasOwnProperty('x')) { node['x'] = 0; }
+        if (!node.hasOwnProperty('y')) { node['y'] = 0; }
 
         nodes[node.id.toString()] = node;
         nodeIndexMapping[i] = node.id;

test/Graph.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 
 import Graph from '../src/components/Graph';
-import graphMock from './graph.mock.js'
+import graphMock from './graph.mock.js';
 
 describe('Graph Component', () => {
     let that = {};