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