diff options
Diffstat (limited to 'graphgraph-fe/src/GraphSettings.js')
| -rw-r--r-- | graphgraph-fe/src/GraphSettings.js | 239 |
1 files changed, 0 insertions, 239 deletions
diff --git a/graphgraph-fe/src/GraphSettings.js b/graphgraph-fe/src/GraphSettings.js deleted file mode 100644 index d511068..0000000 --- a/graphgraph-fe/src/GraphSettings.js +++ /dev/null @@ -1,239 +0,0 @@ -import React from 'react' -import _ from 'underscore' -import { DropdownButton, MenuItem, Label } from 'react-bootstrap' -import './GraphSettings.css' -import Popup from './PopupSettings' -import ValidationModal from './ValidationModal' -import DownloadExport from './DownloadExport' -import { validateSchema, pathGraph, basicGraph, schemas, nodeNames } from './requests' - -var emptyState = { - schemaProblems: [], - nodeNames: [], - fromNode: '', - graph: { - nodeNames: [], - edges: [] - }, - showHops: false, - enableDestinationNode: false, - toNode: '', - edgeFilter: 'Edgerules', - 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.onSelectNode = this.onSelectNode.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.changeEdgeFilter = this.changeEdgeFilter.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, edgeFilter) { - return `${schema}:${from}:${to}:${parents}:${cousin}:${child}:${edgeFilter}` - } - - loadInitialGraph (startNode, endNode, parentHops, cousinHops, childHops, edgeFilter) { - if (this.state.selectedSchema === '' || startNode === 'none') { - var s = this.state - s['edgeFilter'] = edgeFilter - this.setState(s) - return - } - if (startNode === 'all') { - endNode = 'none' - } - - let requestUri = endNode === 'none' - ? basicGraph(this.state.selectedSchema, startNode, parentHops, cousinHops, childHops, edgeFilter) : pathGraph(this.state.selectedSchema, startNode, endNode, edgeFilter) - - fetch(requestUri) - .then(response => response.json()) - .then(g => { - let schema = this.state.selectedSchema - - let f = this.graphFingerprint(schema, startNode, endNode, parentHops, cousinHops, childHops, edgeFilter) - this.props.graphData(g, this.state.selectedSchema, f) - return g - }) - .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['edgeFilter'] = edgeFilter - s['showHops'] = endNode === 'none' && startNode !== 'none' && startNode !== 'all' - s['enableDestinationNode'] = startNode !== 'none' && startNode !== 'all' - this.setState(s) - - if (startNode !== 'all') { - this.onSelectNode(startNode) - } - }) - } - - selectSchema (schema) { - var s = this.state - s['selectedSchema'] = schema - fetch(nodeNames(schema, s['edgeFilter'])) - .then(response => response.json()) - .then(nodeNames => { - s['fromNode'] = s['toNode'] = 'none' - s['nodeNames'] = nodeNames - this.setState(s) - }) - fetch(validateSchema(schema)) - .then(response => response.json()) - .then(p => { - s['schemaProblems'] = p.problems - this.setState(s) - }) - } - - changeEdgeFilter (edgeFilter) { - fetch(nodeNames(this.state.selectedSchema, edgeFilter)) - .then(response => response.json()) - .then(nodeNames => { - let s = this.state - s['edgeFilter'] = edgeFilter - s['fromNode'] = s['toNode'] = 'none' - s['nodeNames'] = nodeNames - this.setState(s) - }) - this.loadInitialGraph( - this.state.fromNode, - this.state.toNode, - this.state.hops.parents, - this.state.hops.cousin, - this.state.hops.child, - edgeFilter - ) - } - - updateHops (parentHops, cousinHops, childHops) { - this.loadInitialGraph( - this.state.fromNode, - this.state.toNode, - parentHops, - cousinHops, - childHops, - this.state.edgeFilter) - } - - onChangeToNode (eventKey) { - this.loadInitialGraph(this.state.fromNode, - eventKey, - this.state.hops.parents, - this.state.hops.cousin, - this.state.hops.child, - this.state.edgeFilter) - } - - onSelectNode (eventKey) { - this.props.nodePropsLoader(eventKey) - } - - onChangeStartNode (eventKey) { - this.loadInitialGraph(eventKey, this.state.toNode, - this.state.hops.parents, - this.state.hops.cousin, - this.state.hops.child, - this.state.edgeFilter) - } - - 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>) - let sortedNames = _.sortBy(this.state.graph.nodeNames, 'id') - var currentNodeNames = _.map(sortedNames, (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='all' eventKey='all'>all</MenuItem>) - - items.unshift(<MenuItem key='anotherdivider' divider />) - items.unshift(<MenuItem key='none' eventKey='none'>none</MenuItem>) - - let edgeFilterItems = [ - <MenuItem key='Edgerules' eventKey='Edgerules'>Edgerules</MenuItem>, - <MenuItem key='Parents' eventKey='Parents'>Parent-child (OXM structure)</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 disabled={!this.state.enableDestinationNode} className="node-dropdown" onSelect={this.onChangeToNode} id="namesTo" title={this.state.toNode}> - {items} - </DropdownButton> - </div> - <div className="source-dropdown-div"> - <Label>Edge filter</Label> - <DropdownButton className="node-dropdown" onSelect={this.changeEdgeFilter} id="filterEdge" title={this.state.edgeFilter}> - {edgeFilterItems} - </DropdownButton> - </div> - <div className="source-dropdown-div"> - <Label>Selected Node</Label> - <DropdownButton className="node-dropdown" onSelect={this.onSelectNode} id="selectedNode" title={this.props.selectedNode}> - {currentNodeNames} - </DropdownButton> - </div> - - <Popup isDisabled={!this.state.showHops} edgeFilter={this.state.edgeFilter} parentHops={this.state.hops.parents} childHops={this.state.hops.child} cousinHops={this.state.hops.cousin} updateHops={this.updateHops}/> - <div className="modal-button"> - <ValidationModal schemaProblems={this.state.schemaProblems}/> - </div> - - <div className="modal-button"> - <DownloadExport schemaVersion={this.state.selectedSchema}/> - </div> - - </div> - - </div> - </div> - ) - } -} - -export default GraphSettings |