Skip to content

Commit 2cf3a42

Browse files
danielcaldasdanielcaldas
authored
Move logic from graph component (highlight updates) (#66)
* Fix jest coverage reports * Update webpack-dev-server to 3.1.3 * Move updateHighlight value logic to graph.helper * Update Node definition docs * Improve config override flow in Sandbox component * Update package-lock and yarn.lock files
1 parent 9704563 commit 2cf3a42

File tree

8 files changed

+1411
-1295
lines changed

8 files changed

+1411
-1295
lines changed

‎jest.config.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
module.exports = {
22
verbose: true,
3-
rootDir: 'test'
3+
rootDir: '.',
4+
collectCoverageFrom: ['src/**/*.{js,jsx}']
45
};

‎package-lock.json‎

Lines changed: 987 additions & 941 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"license": "MIT",
77
"scripts": {
88
"check": "npm run docs:lint && npm run lint && npm run test && npm run functional",
9-
"dev": "node_modules/.bin/webpack-dev-server -d --content-base sandbox --inline --hot --port 3002",
9+
"dev": "webpack-dev-server -d --content-base sandbox --inline --hot --port 3002",
1010
"dist:rd3g": "rm -rf dist/ && webpack --config webpack.config.dist.js -p --display-modules --optimize-minimize",
1111
"dist:sandbox": "webpack --config webpack.config.js -p",
1212
"dist:transpile": "./node_modules/babel-cli/bin/babel.js -d lib src",
@@ -75,7 +75,7 @@
7575
"style-loader": "0.18.2",
7676
"webpack": "4.2.0",
7777
"webpack-cli": "2.0.12",
78-
"webpack-dev-server": "3.1.1",
78+
"webpack-dev-server": "3.1.3",
7979
"webpack-visualizer-plugin": "0.1.11"
8080
},
8181
"engines": {

‎sandbox/Sandbox.jsx‎

Lines changed: 105 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import defaultConfig from '../src/components/graph/graph.config';
1010
import { Graph } from '../src';
1111
import data from './data';
1212
import Utils from './utils';
13-
import ReactD3GraphUtils from '../src/utils';
13+
import ReactD3GraphUtils from '../src/utils';
1414
import { JsonTree } from 'react-editable-json-tree';
1515

1616
/**
@@ -21,38 +21,41 @@ export default class Sandbox extends React.Component {
2121
constructor(props) {
2222
super(props);
2323

24-
const schemaProps = Utils.generateFormSchema(defaultConfig, '', {});
24+
// NOTE: Override initial configs here. e.g: { staticGraph: true }
25+
const configOverride = {};
26+
27+
const schemaProps = Utils.generateFormSchema(Object.assign(defaultConfig, configOverride), '', {});
2528

2629
const schema = {
2730
type: 'object',
2831
properties: schemaProps
2932
};
3033

3134
const uiSchema = {
32-
height: {'ui:readonly': 'true'},
33-
width: {'ui:readonly': 'true'}
35+
height: { 'ui:readonly': 'true' },
36+
width: { 'ui:readonly': 'true' }
3437
};
3538

3639
this.uiSchema = uiSchema;
3740

3841
this.state = {
39-
config: {}, // NOTE: Override initial configs here. e.g: {staticGraph: true}
42+
config: {},
4043
generatedConfig: {},
4144
schema,
4245
data,
4346
fullscreen: false
4447
};
4548
}
4649

47-
onClickNode = (id) => window.alert(`Clicked node ${id}`);
50+
onClickNode = id => window.alert(`Clicked node ${id}`);
4851

4952
onClickLink = (source, target) => window.alert(`Clicked link between ${source} and ${target}`);
5053

51-
onMouseOverNode = (id) => console.info(`Do something when mouse is over node (${id})`);
54+
onMouseOverNode = id => console.info(`Do something when mouse is over node (${id})`);
5255

53-
onMouseOutNode = (id) => console.info(`Do something when mouse is out of node (${id})`);
56+
onMouseOutNode = id => console.info(`Do something when mouse is out of node (${id})`);
5457

55-
onMouseOverLink = (source, target) =>
58+
onMouseOverLink = (source, target) =>
5659
console.info(`Do something when mouse is over link between ${source} and ${target}`);
5760

5861
onMouseOutLink = (source, target) =>
@@ -65,7 +68,7 @@ export default class Sandbox extends React.Component {
6568
const fullscreen = !this.state.fullscreen;
6669

6770
this.setState({ fullscreen });
68-
}
71+
};
6972

7073
/**
7174
* Play stopped animations.
@@ -94,7 +97,7 @@ export default class Sandbox extends React.Component {
9497
let nLinks = Math.floor(Math.random() * (5 - minIndex + 1) + minIndex);
9598
const newNode = `Node ${this.state.data.nodes.length}`;
9699

97-
this.state.data.nodes.push({id: newNode});
100+
this.state.data.nodes.push({ id: newNode });
98101

99102
while (this.state.data.nodes[i] && this.state.data.nodes[i].id && nLinks) {
100103
this.state.data.links.push({
@@ -112,15 +115,13 @@ export default class Sandbox extends React.Component {
112115
} else {
113116
// 1st node
114117
const data = {
115-
nodes: [
116-
{id: 'Node 1'}
117-
],
118+
nodes: [{ id: 'Node 1' }],
118119
links: []
119120
};
120121

121122
this.setState({ data });
122123
}
123-
}
124+
};
124125

125126
/**
126127
* Remove a node.
@@ -137,9 +138,9 @@ export default class Sandbox extends React.Component {
137138
} else {
138139
window.alert('No more nodes to remove!');
139140
}
140-
}
141+
};
141142

142-
_buildGraphConfig = (data) => {
143+
_buildGraphConfig = data => {
143144
let config = {};
144145
let schemaPropsValues = {};
145146

@@ -151,32 +152,32 @@ export default class Sandbox extends React.Component {
151152
schemaPropsValues[k]['default'] = data.formData[k];
152153
}
153154

154-
return {config, schemaPropsValues};
155-
}
155+
return { config, schemaPropsValues };
156+
};
156157

157-
refreshGraph = (data) => {
158-
const {config, schemaPropsValues} = this._buildGraphConfig(data);
158+
refreshGraph = data => {
159+
const { config, schemaPropsValues } = this._buildGraphConfig(data);
159160

160161
this.state.schema.properties = ReactD3GraphUtils.merge(this.state.schema.properties, schemaPropsValues);
161162

162163
this.setState({
163164
config
164165
});
165-
}
166+
};
166167

167168
/**
168169
* Generate graph configuration file ready to use!
169170
*/
170-
onSubmit = (data) => {
171+
onSubmit = data => {
171172
const { config } = this._buildGraphConfig(data);
172173

173174
this.setState({ generatedConfig: config });
174-
}
175+
};
175176

176177
onClickSubmit = () => {
177178
// Hack for allow submit button to live outside jsonform
178179
document.body.querySelector('.invisible-button').click();
179-
}
180+
};
180181

181182
resetGraphConfig = () => {
182183
const generatedConfig = {};
@@ -193,7 +194,7 @@ export default class Sandbox extends React.Component {
193194
generatedConfig,
194195
schema
195196
});
196-
}
197+
};
197198

198199
/**
199200
* This function decorates nodes and links with positions. The motivation
@@ -202,21 +203,21 @@ export default class Sandbox extends React.Component {
202203
* @param {Object} nodes nodes and links with minimalist structure.
203204
* @return {Object} the graph where now nodes containing (x,y) coords.
204205
*/
205-
decorateGraphNodesWithInitialPositioning = (nodes) => {
206-
return nodes.map(n => (
206+
decorateGraphNodesWithInitialPositioning = nodes => {
207+
return nodes.map(n =>
207208
Object.assign({}, n, {
208209
x: n.x || Math.floor(Math.random() * 500),
209210
y: n.y || Math.floor(Math.random() * 500)
210211
})
211-
));
212-
}
212+
);
213+
};
213214

214215
/**
215216
* Update graph data each time an update is triggered
216217
* by JsonTree
217218
* @param {Object} data update graph data (nodes and links)
218219
*/
219-
onGraphDataUpdate = (data) => this.setState({ data });
220+
onGraphDataUpdate = data => this.setState({ data });
220221

221222
/**
222223
* Build common piece of the interface that contains some interactions such as
@@ -227,25 +228,55 @@ export default class Sandbox extends React.Component {
227228
cursor: this.state.config.staticGraph ? 'not-allowed' : 'pointer'
228229
};
229230

230-
const fullscreen = this.state.fullscreen ?
231-
(<span className='cross-icon' onClick={this.onToggleFullScreen}>❌</span>)
232-
: (<button onClick={this.onToggleFullScreen}
233-
className='btn btn-default btn-margin-left'>Fullscreen</button>);
231+
const fullscreen = this.state.fullscreen ? (
232+
<span className="cross-icon" onClick={this.onToggleFullScreen}>
233+
❌
234+
</span>
235+
) : (
236+
<button onClick={this.onToggleFullScreen} className="btn btn-default btn-margin-left">
237+
Fullscreen
238+
</button>
239+
);
234240

235241
return (
236242
<div>
237243
{fullscreen}
238-
<button onClick={this.restartGraphSimulation} className='btn btn-default btn-margin-left' style={btnStyle} disabled={this.state.config.staticGraph}>▶️</button>
239-
<button onClick={this.pauseGraphSimulation} className='btn btn-default btn-margin-left' style={btnStyle} disabled={this.state.config.staticGraph}>⏸️</button>
240-
<button onClick={this.resetNodesPositions} className='btn btn-default btn-margin-left' style={btnStyle} disabled={this.state.config.staticGraph}>Unstick nodes</button>
241-
<button onClick={this.onClickAddNode} className='btn btn-default btn-margin-left'>+</button>
242-
<button onClick={this.onClickRemoveNode} className='btn btn-default btn-margin-left'>-</button>
243-
<span className='container__graph-info'>
244+
<button
245+
onClick={this.restartGraphSimulation}
246+
className="btn btn-default btn-margin-left"
247+
style={btnStyle}
248+
disabled={this.state.config.staticGraph}
249+
>
250+
▶️
251+
</button>
252+
<button
253+
onClick={this.pauseGraphSimulation}
254+
className="btn btn-default btn-margin-left"
255+
style={btnStyle}
256+
disabled={this.state.config.staticGraph}
257+
>
258+
⏸️
259+
</button>
260+
<button
261+
onClick={this.resetNodesPositions}
262+
className="btn btn-default btn-margin-left"
263+
style={btnStyle}
264+
disabled={this.state.config.staticGraph}
265+
>
266+
Unstick nodes
267+
</button>
268+
<button onClick={this.onClickAddNode} className="btn btn-default btn-margin-left">
269+
+
270+
</button>
271+
<button onClick={this.onClickRemoveNode} className="btn btn-default btn-margin-left">
272+
-
273+
</button>
274+
<span className="container__graph-info">
244275
<b>Nodes: </b> {this.state.data.nodes.length} | <b>Links: </b> {this.state.data.links.length}
245276
</span>
246277
</div>
247278
);
248-
}
279+
};
249280

250281
render() {
251282
// This does not happens in this sandbox scenario running time, but if we set staticGraph config
@@ -270,51 +301,63 @@ export default class Sandbox extends React.Component {
270301
if (this.state.fullscreen) {
271302
graphProps.config = Object.assign({}, graphProps.config, {
272303
height: window.innerHeight,
273-
width: window.innerWidth,
304+
width: window.innerWidth
274305
});
275306

276307
return (
277308
<div>
278309
{this.buildCommonInteractionsPanel()}
279-
<Graph ref='graph' {...graphProps}/>
310+
<Graph ref="graph" {...graphProps} />
280311
</div>
281312
);
282313
} else {
283314
// @TODO: Only show configs that differ from default ones in "Your config" box
284315
return (
285-
<div className='container'>
286-
<div className='container__graph'>
316+
<div className="container">
317+
<div className="container__graph">
287318
{this.buildCommonInteractionsPanel()}
288-
<div className='container__graph-area'>
289-
<Graph ref='graph' {...graphProps}/>
319+
<div className="container__graph-area">
320+
<Graph ref="graph" {...graphProps} />
290321
</div>
291322
</div>
292-
<div className='container__form'>
323+
<div className="container__form">
293324
<h4>
294-
<a href="https://github.com/danielcaldas/react-d3-graph" target="_blank">react-d3-graph</a>
325+
<a href="https://github.com/danielcaldas/react-d3-graph" target="_blank">
326+
react-d3-graph
327+
</a>
295328
</h4>
296329
<h4>
297-
<a href="https://danielcaldas.github.io/react-d3-graph/docs/index.html" target="_blank">docs</a>
330+
<a href="https://danielcaldas.github.io/react-d3-graph/docs/index.html" target="_blank">
331+
docs
332+
</a>
298333
</h4>
299334
<h3>Configurations</h3>
300-
<Form className='form-wrapper'
335+
<Form
336+
className="form-wrapper"
301337
schema={this.state.schema}
302338
uiSchema={this.uiSchema}
303339
onChange={this.refreshGraph}
304-
onSubmit={this.onSubmit}>
305-
<button className='invisible-button' type='submit'></button>
340+
onSubmit={this.onSubmit}
341+
>
342+
<button className="invisible-button" type="submit" />
306343
</Form>
307-
<button className='submit-button btn btn-primary' onClick={this.onClickSubmit}>Generate config</button>
308-
<button className='reset-button btn btn-danger' onClick={this.resetGraphConfig}>Reset config</button>
344+
<button className="submit-button btn btn-primary" onClick={this.onClickSubmit}>
345+
Generate config
346+
</button>
347+
<button className="reset-button btn btn-danger" onClick={this.resetGraphConfig}>
348+
Reset config
349+
</button>
309350
</div>
310-
<div className='container__graph-config'>
351+
<div className="container__graph-config">
311352
<h4>Your config</h4>
312353
<JSONContainer data={this.state.generatedConfig} staticData={false} />
313354
</div>
314-
<div className='container__graph-data'>
315-
<h4>Graph Data <small>(editable)</small></h4>
316-
<div className='json-data-container'>
317-
<JsonTree data={this.state.data} onFullyUpdate={this.onGraphDataUpdate}/>
355+
<div className="container__graph-data">
356+
<h4>
357+
Graph Data <small>(editable)</small>
358+
</h4>
359+
<div className="json-data-container">
360+
<JsonTree data={this.state.data} onFullyUpdate={this.onGraphDataUpdate} />
318361
</div>
319362
</div>
320363
</div>
@@ -329,8 +372,6 @@ class JSONContainer extends React.Component {
329372
}
330373

331374
render() {
332-
return (
333-
<pre className='json-data-container'>{JSON.stringify(this.props.data, null, 2)}</pre>
334-
);
375+
return <pre className="json-data-container">{JSON.stringify(this.props.data, null, 2)}</pre>;
335376
}
336377
}

0 commit comments

Comments
 (0)