Refactor/sandbox improvements (#12)

* Sandbox general style and grid improvements

* Add refresh button to sandbox

* Add quick links

* Add random yet limited number on links when adding new nodes in sandbox

* Add check script to package.json

Author: danielcaldas

package.json

@@ -5,6 +5,7 @@
     "author": "Daniel Caldas",
     "license": "MIT",
     "scripts": {
+        "check": "npm run lint && npm run test",
         "dev": "node_modules/.bin/webpack-dev-server -d --content-base sandbox --inline --hot --port 3002",
         "dist": "node_modules/.bin/npm-run-all --parallel dist:*",
         "dist:rd3g": "rm -rf dist/ && webpack --config webpack.config.dist.js -p --display-modules",

sandbox/Sandbox.js

@@ -71,15 +71,21 @@ export default class Sandbox extends React.Component {
         if (this.state.data.nodes && this.state.data.nodes.length) {
             const maxIndex = this.state.data.nodes.length - 1;
             const minIndex = 0;
-            const i = Math.floor(Math.random() * (maxIndex - minIndex + 1) + minIndex);
-            const id = this.state.data.nodes[i].id;
+            let i = Math.floor(Math.random() * (maxIndex - minIndex + 1) + minIndex);
+            let nLinks = Math.floor(Math.random() * (5 - minIndex + 1) + minIndex);
             const newNode = `Node ${this.state.data.nodes.length}`;
 
             this.state.data.nodes.push({id: newNode});
-            this.state.data.links.push({
-                source: newNode,
-                target: id
-            });
+
+            while (this.state.data.nodes[i] && this.state.data.nodes[i].id && nLinks) {
+                this.state.data.links.push({
+                    source: newNode,
+                    target: this.state.data.nodes[i].id
+                });
+
+                i++;
+                nLinks--;
+            }
 
             this.setState({
                 data: this.state.data
@@ -136,6 +142,8 @@ export default class Sandbox extends React.Component {
         return {config, schemaPropsValues};
     }
 
+    refresh = () => location.reload();
+
     refreshGraph = (data) => {
         const {config, schemaPropsValues} = this._buildGraphConfig(data);
 
@@ -195,16 +203,27 @@ export default class Sandbox extends React.Component {
         return (
             <div className='container'>
                 <div className='container__graph'>
-                    <button onClick={this.restartGraphSimulation} className='btn btn-default' style={btnStyle} disabled={this.state.config.staticGraph}>▶️</button>
-                    <button onClick={this.pauseGraphSimulation} className='btn btn-default' style={btnStyle} disabled={this.state.config.staticGraph}>⏸️</button>
-                    <button onClick={this.resetNodesPositions} className='btn btn-default' style={btnStyle} disabled={this.state.config.staticGraph}>Unstick nodes</button>
-                    <button onClick={this.onClickAddNode} className='btn btn-default' style={btnStyle}>+</button>
-                    <button onClick={this.onClickRemoveNode} className='btn btn-default' style={btnStyle}>-</button>
-                    <br/><b>Nodes: </b> {this.state.data.nodes.length}, <b>Links: </b> {this.state.data.links.length}
-                    <Graph ref='graph' {...graphProps}/>
+                    <button onClick={this.restartGraphSimulation} className='btn btn-default btn-margin-left' style={btnStyle} disabled={this.state.config.staticGraph}>▶️</button>
+                    <button onClick={this.pauseGraphSimulation} className='btn btn-default btn-margin-left' style={btnStyle} disabled={this.state.config.staticGraph}>⏸️</button>
+                    <button onClick={this.refresh} className='btn btn-default btn-margin-left' style={btnStyle}>🔄</button>
+                    <button onClick={this.resetNodesPositions} className='btn btn-default btn-margin-left' style={btnStyle} disabled={this.state.config.staticGraph}>Unstick nodes</button>
+                    <button onClick={this.onClickAddNode} className='btn btn-default btn-margin-left' style={btnStyle}>+</button>
+                    <button onClick={this.onClickRemoveNode} className='btn btn-default btn-margin-left' style={btnStyle}>-</button>
+                    <span className='container__graph-info'>
+                        <b>Nodes: </b> {this.state.data.nodes.length} | <b>Links: </b> {this.state.data.links.length}
+                    </span>
+                    <div className='container__graph-area'>
+                        <Graph ref='graph' {...graphProps}/>
+                    </div>
                 </div>
                 <div className='container__form'>
-                    <h4><a href="https://github.com/danielcaldas/react-d3-graph" target="_blank"><img width="40" height="40" src="https://a248.e.akamai.net/assets.github.com/images/icons/emoji/octocat.png"></img> react-d3-graph</a> configurations </h4>
+                    <h4>
+                        <a href="https://github.com/danielcaldas/react-d3-graph" target="_blank">react-d3-graph</a>
+                    </h4>
+                    <h4>
+                        <a href="https://danielcaldas.github.io/react-d3-graph/docs/index.html" target="_blank">docs</a>
+                    </h4>
+                    <h3>Configurations</h3>
                     <Form className='form-wrapper'
                         schema={this.state.schema}
                         uiSchema={this.uiSchema}
@@ -220,7 +239,7 @@ export default class Sandbox extends React.Component {
                     <JSONContainer data={this.state.generatedConfig} staticData={false} />
                 </div>
                 <div className='container__graph-data'>
-                    <h4>Initial Graph data</h4>
+                    <h4>Initial Graph Data</h4>
                     <JSONContainer data={this.state.data} staticData={true}/>
                 </div>
             </div>

sandbox/styles.css

@@ -9,35 +9,54 @@
   padding: 1em;
 }.container {
   display: grid;
-  grid-template-columns: repeat(3, 2fr);
+  width: 100%;
+  grid-template-columns: 450px 1fr;
   grid-auto-rows: minmax(100px, auto);
 }
 
 .container__graph {
     grid-column: 1 / 5;
     grid-row: 1 / 2;
+    border: 1px solid black;
+}
+
+.container__graph-info {
+    margin-left: 12px;
+}
+
+.btn-margin-left {
+    margin-left: 4px;
+}
 
-    border: 1px dashed black;
+.container__graph-area {
+    max-width: 800px;
+    max-height: 400px;
+    border: 1px dotted gray;
+    margin-left: 80px;
+    margin-top: 4px;
 }
 
 .container__graph-data {
     grid-column: 1 / 2;
     grid-row: 2 / 3;
+    margin-bottom: 4px;
 }
 
 .container__graph-config {
-    grid-column: 2 / 5;
+    grid-column: 2 / 3;
     grid-row: 2 / 3;
+    margin-bottom: 4px;
 }
 
 .container__form {
     grid-column: 5/ 6;
     grid-row: 1 / 4;
+    min-width: 400px;
 }
 
 .form-wrapper {
     overflow-y: scroll;
-    max-height: 600px;
+    max-height: 70vh;
 }
 
 .json-data-container {