diff options
Diffstat (limited to 'graphgraph-fe')
-rw-r--r-- | graphgraph-fe/src/GraphSettings.css | 7 | ||||
-rw-r--r-- | graphgraph-fe/src/GraphSettings.js | 15 | ||||
-rw-r--r-- | graphgraph-fe/src/ValidationModal.css | 31 | ||||
-rw-r--r-- | graphgraph-fe/src/ValidationModal.js | 49 | ||||
-rw-r--r-- | graphgraph-fe/src/requests.js | 6 |
5 files changed, 105 insertions, 3 deletions
diff --git a/graphgraph-fe/src/GraphSettings.css b/graphgraph-fe/src/GraphSettings.css index 4790e9b..6fb4550 100644 --- a/graphgraph-fe/src/GraphSettings.css +++ b/graphgraph-fe/src/GraphSettings.css @@ -27,3 +27,10 @@ display: flex; width: 80px !important; } + + +.modal-button +{ + padding-top: 20px; + margin: 0; +} diff --git a/graphgraph-fe/src/GraphSettings.js b/graphgraph-fe/src/GraphSettings.js index 1e80da9..4d44aef 100644 --- a/graphgraph-fe/src/GraphSettings.js +++ b/graphgraph-fe/src/GraphSettings.js @@ -3,9 +3,11 @@ import _ from 'underscore' import { DropdownButton, MenuItem, Label } from 'react-bootstrap' import './GraphSettings.css' import Popup from './PopupSettings' -import { pathGraph, basicGraph, schemas, nodeNames } from './requests' +import ValidationModal from './ValidationModal' +import { validateSchema, pathGraph, basicGraph, schemas, nodeNames } from './requests' var emptyState = { + schemaProblems: [], nodeNames: [], fromNode: '', graph: { @@ -94,6 +96,12 @@ class GraphSettings extends React.Component { s['nodeNames'] = nodeNames this.setState(s) }) + fetch(validateSchema(schema)) + .then(response => response.json()) + .then(p => { + s['schemaProblems'] = p.problems + this.setState(s) + }) } changeEdgeFilter (edgeFilter) { @@ -211,8 +219,11 @@ class GraphSettings extends React.Component { </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> - + </div> </div> ) diff --git a/graphgraph-fe/src/ValidationModal.css b/graphgraph-fe/src/ValidationModal.css new file mode 100644 index 0000000..56b4567 --- /dev/null +++ b/graphgraph-fe/src/ValidationModal.css @@ -0,0 +1,31 @@ +.modal-content +{ +height: 100%; +width: 100%; +} + +.modal-validator +{ + position: 'fixed'; + width: 1024; + height: 768; + zIndex: 1040; + top: '5%'; + left: '5%'; + border: '1px solid #e5e5e5'; + backgroundColor: 'white'; + boxShadow: '0 5px 15px rgba(0,0,0,.5)'; + padding: 0; +} + +.modal-backdrop +{ + position: 'fixed'; + zIndex: 1040; + top: 0; + bottom: 0; + left: 0; + right: 0; + backgroundColor: '#000'; + opacity: 0.5; +} diff --git a/graphgraph-fe/src/ValidationModal.js b/graphgraph-fe/src/ValidationModal.js new file mode 100644 index 0000000..8bf1989 --- /dev/null +++ b/graphgraph-fe/src/ValidationModal.js @@ -0,0 +1,49 @@ +import _ from 'underscore' +import React from 'react' +import './ValidationModal.css' +import { Button, Modal, ListGroup, ListGroupItem } from 'react-bootstrap' + + +class ValidationModal extends React.Component { + constructor(...args) { + super(...args); + this.state = { showModal: false }; + + this.close = () => { + this.setState({ showModal: false }); + }; + + this.open = () => { + this.setState({ showModal: true }); + }; + } + + renderBackdrop(props) { + return <div {...props} className="modal-backdrop" />; + } + + render() { + var problems = this.props.schemaProblems + var items = _.map(problems, (problem, i) => <ListGroupItem key={i}> {problem} </ListGroupItem>) + return ( + <div> + <Button onClick={this.open}>Validate schema</Button> + <Modal + onHide={this.close} + className="modal-validator" + aria-labelledby="modal-label" + show={this.state.showModal} + renderBackdrop={this.renderBackdrop} + > + <div className="modal-list"> + <ListGroup> + {items} + </ListGroup> + </div> + </Modal> + </div> + ); + } +} + +export default ValidationModal diff --git a/graphgraph-fe/src/requests.js b/graphgraph-fe/src/requests.js index 39c4b03..2494ba1 100644 --- a/graphgraph-fe/src/requests.js +++ b/graphgraph-fe/src/requests.js @@ -5,6 +5,10 @@ export function schemas () { return `http://${host}:${port}/schemas` } +export function validateSchema (schema) { + return `http://${host}:${port}/schemas/${schema}/validation` +} + export function nodeNames (schema, edgeFilter) { return `http://${host}:${port}/schemas/${schema}/nodes?edgeFilter=${edgeFilter}` } @@ -23,4 +27,4 @@ export function nodeProperty (schema, node) { export function edgeProperty (schema, fromNode, toNode) { return `http://${host}:${port}/schemas/${schema}/edges?fromNode=${fromNode}&toNode=${toNode}` -}
\ No newline at end of file +} |