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