diff options
Diffstat (limited to 'graphgraph-fe/src/GraphInfoMenu.js')
-rw-r--r-- | graphgraph-fe/src/GraphInfoMenu.js | 45 |
1 files changed, 45 insertions, 0 deletions
diff --git a/graphgraph-fe/src/GraphInfoMenu.js b/graphgraph-fe/src/GraphInfoMenu.js new file mode 100644 index 0000000..52a081e --- /dev/null +++ b/graphgraph-fe/src/GraphInfoMenu.js @@ -0,0 +1,45 @@ +import React from 'react' +import './GraphInfoMenu.css' +import PathBreadCrumb from './PathBreadCrumb' +import _ from 'underscore' +import ReactBasicTable from 'react-basic-table' + +var generatePropertyTable = function (nodeProps) { + var columns = ['Property Name', 'Value'] + var rows = _.map(nodeProps, path => { + return ( + [ + <span>{path.propertyName}</span>, + <span>{path.propertyValue}</span> + ] + ) + }) + + return ( + <div className="datatable"> + <ReactBasicTable pageSize={4} rows={rows} columns={columns} /> + </div> + ) +} + +class GraphInfoMenu extends React.Component { + render () { + var paths = this.props.paths + var callback = this.props.pathCallback + var showPaths = _.isArray(paths) && !_.isEmpty(paths) + var breadcrumbs = _.map(paths, (path, i) => <PathBreadCrumb key={i} index={i} pathCallback={callback} path={path}/>) + return ( + <div className="node-property-list"> + <div className="fixed-height-container" style={{ display: showPaths ? 'block' : 'none' }}> + <p className='path-heading'>Paths</p> + {breadcrumbs} + </div> + <div className="kv-table"> + {generatePropertyTable(this.props.nodeProperties)} + </div> + </div> + ) + } +} + +export default GraphInfoMenu |