Work in progress

app/src/components/Sidebar.tsx

@@ -0,0 +1,74 @@
+import * as React from "react";
+import * as q from '../../../src/Model'
+import Drawer from '@material-ui/core/Drawer';
+import TextField from '@material-ui/core/TextField';
+import Paper from '@material-ui/core/Paper';
+import { ValueRenderer } from './ValueRenderer'
+
+interface Props {
+  node?: q.TreeNode | undefined
+}
+
+interface State {
+  node?: q.TreeNode | undefined
+}
+
+export class Sidebar extends React.Component<Props, State> {
+  private updateNode: (node?: q.TreeNode | undefined) => void
+  constructor(props: any) {
+    super(props);
+    this.state = {}
+    this.updateNode = (node) => {
+      if (!node) {
+        this.setState(this.state)
+      } else {
+        this.setState({node: node})
+      }
+    }
+  }
+
+  private getStyle(): {[s: string]: any} {
+    return {
+      marginTop: '64px'
+    }
+  }
+
+  public componentWillReceiveProps(nextProps: Props) {
+    this.props.node && this.props.node.removeListener('update', this.updateNode)
+    nextProps.node && nextProps.node.on('update', this.updateNode)
+    nextProps.node && this.updateNode(nextProps.node)
+  }
+
+  private open() {
+    return this.props.node !== undefined
+  }
+
+  public render() {
+    return <Drawer open={this.open()} variant="permanent" anchor="right">
+      {this.renderNode()}
+    </Drawer>
+  }
+
+  private renderNode() {
+    let style: React.CSSProperties = {display: 'block', width: '40vw'}
+    let topicStyle: React.CSSProperties = {width: '100%'}
+
+    if (!this.state.node) {
+        return null
+    }
+
+    return <div style={style}>
+      <TextField style={topicStyle}
+          label="Topic"
+          value={this.state.node.path()}
+          margin="normal"
+          variant="outlined"
+        />
+        <Paper>
+          <ValueRenderer node={this.state.node} />
+        </Paper>
+    </div>
+  }
+
+
+}