diff options
Diffstat (limited to 'graphgraph-fe/src/GraphSettings.js')
-rw-r--r-- | graphgraph-fe/src/GraphSettings.js | 156 |
1 files changed, 156 insertions, 0 deletions
diff --git a/graphgraph-fe/src/GraphSettings.js b/graphgraph-fe/src/GraphSettings.js new file mode 100644 index 0000000..94b3e31 --- /dev/null +++ b/graphgraph-fe/src/GraphSettings.js @@ -0,0 +1,156 @@ +import React from 'react' +import _ from 'underscore' +import { DropdownButton, MenuItem, Label } from 'react-bootstrap' +import './GraphSettings.css' +import Popup from './PopupSettings' +import { pathGraph, basicGraph, schemas, nodeNames } from './requests' + +var emptyState = { + nodeNames: [], + fromNode: '', + graph: { + nodeNames: [], + edges: [] + }, + showHops: false, + toNode: '', + hops: { + parents: 1, + cousin: 1, + child: 1 + }, + selectedSchema: '' +} + +class GraphSettings extends React.Component { + constructor (props, context) { + super(props, context) + + this.onChangeStartNode = this.onChangeStartNode.bind(this) + this.selectSchema = this.selectSchema.bind(this) + this.onChangeToNode = this.onChangeToNode.bind(this) + this.loadInitialGraph = this.loadInitialGraph.bind(this) + this.updateHops = this.updateHops.bind(this) + this.graphFingerprint = this.graphFingerprint.bind(this) + this.state = emptyState + } + // this serves as a config 'fingerprint' to know if the d3 visualisation should be redrawn from scratch or just updated + graphFingerprint (schema, from, to, parents, cousin, child) { + return `${schema}:${from}:${to}:${parents}:${cousin}:${child}` + } + + loadInitialGraph (startNode, endNode, parentHops, cousinHops, childHops) { + let requestUri = endNode === 'none' ? basicGraph(this.state.selectedSchema, startNode, 0, 0, 1) : pathGraph(this.state.selectedSchema, startNode, endNode) + + fetch(requestUri) + .then(response => response.json()) + .then(g => { + let schema = this.state.selectedSchema + + let f = this.graphFingerprint(schema, startNode, endNode, parentHops, cousinHops, childHops) + this.props.graphData(g, this.state.selectedSchema, f) + }) + .then(g => { + var s = this.state + s['hops']['parents'] = parentHops + s['hops']['cousin'] = cousinHops + s['hops']['child'] = childHops + s['fromNode'] = startNode + s['toNode'] = endNode + s['graph'] = g + s['showHops'] = endNode === 'none' && startNode !== 'none' + this.setState(s) + }) + } + + selectSchema (schema) { + var s = this.state + s['selectedSchema'] = schema + fetch(nodeNames(schema)) + .then(response => response.json()) + .then(nodeNames => { + s['fromNode'] = s['toNode'] = 'none' + s['nodeNames'] = nodeNames + this.setState(s) + }) + } + + updateHops (parentHops, cousinHops, childHops) { + this.loadInitialGraph( + this.state.fromNode, + this.state.toNode, + parentHops, + cousinHops, + childHops) + } + + onChangeToNode (eventKey) { + this.loadInitialGraph(this.state.fromNode, + eventKey, + this.state.hops.parents, + this.state.hops.cousin, + this.state.hops.child) + } + + onChangeStartNode (eventKey) { + this.loadInitialGraph(eventKey, this.state.toNode, + this.state.hops.parents, + this.state.hops.cousin, + this.state.hops.child) + } + + componentDidMount () { + fetch(schemas()) + .then(response => response.json()) + .then(schemas => { + let s = this.state + s['schemas'] = schemas + this.setState(s) + }) + } + + render () { + var schemas = _.map(this.state.schemas, (x, k) => <MenuItem key={k} eventKey={x}>{x}</MenuItem>) + + var items = _.map(this.state.nodeNames, (x, k) => <MenuItem key={k} eventKey={x.id}>{x.id}</MenuItem>) + + var fromItems = items.slice() + fromItems.unshift(<MenuItem key='divider' divider />) + fromItems.unshift(<MenuItem key='none' eventKey='none'>none</MenuItem>) + + items.unshift(<MenuItem key='anotherdivider' divider />) + items.unshift(<MenuItem key='none' eventKey='none'>none</MenuItem>) + + return ( + <div> + <div className="graph-menu"> + <div className="startendnode-dropdown"> + <div> + <Label>Schemas</Label> + <DropdownButton className="schemas-dropdown" onSelect={this.selectSchema} id="schemas" title={this.state.selectedSchema}> + {schemas} + </DropdownButton> + </div> + <div className="source-dropdown-div"> + <Label>Source Node</Label> + <DropdownButton className="node-dropdown" onSelect={this.onChangeStartNode} id="namesFrom" title={this.state.fromNode}> + {fromItems} + </DropdownButton> + </div> + <div> + <Label>Destination Node</Label> + <DropdownButton className="node-dropdown" onSelect={this.onChangeToNode} id="namesTo" title={this.state.toNode}> + {items} + </DropdownButton> + + </div> + <Popup isDisabled={!this.state.showHops} parentHops={this.state.hops.parents} childHops={this.state.hops.child} cousinHops={this.state.hops.cousin} updateHops={this.updateHops}/> + </div> + + </div> + </div> + ) + } +} + +export default GraphSettings |