Improve data model & fix tests

app/src/components/Sidebar.tsx

@@ -27,12 +27,6 @@ export class Sidebar extends React.Component<Props, State> {
     }
   }
 
-  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)
@@ -69,6 +63,4 @@ export class Sidebar extends React.Component<Props, State> {
         </Paper>
     </div>
   }
-
-
 }

app/src/components/TitleBar.tsx

@@ -0,0 +1,93 @@
+import * as React from "react";
+import * as q from '../../../backend/src/Model'
+
+import SearchIcon from '@material-ui/icons/Search';
+
+import { AppBar, Toolbar, Typography, InputBase } from '@material-ui/core';
+import { withStyles, StyleRulesCallback } from '@material-ui/core/styles';
+import { fade } from '@material-ui/core/styles/colorManipulator';
+
+const styles: StyleRulesCallback = (theme) => ({
+  title: {
+    display: 'none',
+    [theme.breakpoints.up('sm')]: {
+      display: 'block',
+    },
+  },
+  search: {
+    position: 'relative',
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: fade(theme.palette.common.white, 0.15),
+    '&:hover': {
+      backgroundColor: fade(theme.palette.common.white, 0.25),
+    },
+    marginRight: theme.spacing.unit * 2,
+    marginLeft: 0,
+    width: '100%',
+    [theme.breakpoints.up('sm')]: {
+      marginLeft: theme.spacing.unit * 3,
+      width: 'auto',
+    },
+  },
+  searchIcon: {
+    width: theme.spacing.unit * 9,
+    height: '100%',
+    position: 'absolute',
+    pointerEvents: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  inputRoot: {
+    color: 'inherit',
+    width: '100%',
+  },
+  inputInput: {
+    paddingTop: theme.spacing.unit,
+    paddingRight: theme.spacing.unit,
+    paddingBottom: theme.spacing.unit,
+    paddingLeft: theme.spacing.unit * 10,
+    transition: theme.transitions.create('width'),
+    width: '100%',
+    [theme.breakpoints.up('md')]: {
+      width: 200,
+    },
+  }
+});
+
+interface Props {
+  classes: any
+}
+
+class TitleBar extends React.Component<Props, {}> {
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      selectedNode: undefined
+    }
+  }
+
+  public render() {
+    const { classes } = this.props;
+
+    return <AppBar position="static">
+        <Toolbar>
+          <Typography className={classes.title} variant="h6" color="inherit">MQTT-Xplorer</Typography>
+          <div className={classes.search}>
+            <div className={classes.searchIcon}>
+              <SearchIcon />
+            </div>
+            <InputBase
+              placeholder="Search…"
+              classes={{
+                root: classes.inputRoot,
+                input: classes.inputInput,
+              }}
+            />
+          </div>
+        </Toolbar>
+      </AppBar>
+  }
+}
+
+export default withStyles(styles)(TitleBar)

app/src/components/Tree.tsx

@@ -52,21 +52,15 @@ export class Tree extends React.Component<TreeNodeProps, TreeState> {
     this.socket.removeAllListeners()
   }
 
-  private getStyle(): {[s: string]: any} {
-    return {
-      marginTop: '64px'
-    }
-  }
-
   public render() {
-    return <div {...this.props}>
-        <List style={this.getStyle()}>
-          <TreeNode
-            didSelectNode={this.props.didSelectNode}
-            treeNode={this.state.tree}
-            name="/" collapsed={false}
-            performanceCallback={(ms) => this.renderDuration = ms}
-            />
+    return <div>
+      <List>
+        <TreeNode
+          didSelectNode={this.props.didSelectNode}
+          treeNode={this.state.tree}
+          name="/" collapsed={false}
+          performanceCallback={(ms) => this.renderDuration = ms}
+        />
       </List>
     </div>;
   }

app/src/components/TreeNode.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import * as io from 'socket.io-client';
 import * as q from '../../../backend/src/Model'
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
@@ -82,7 +81,7 @@ export class TreeNode extends React.Component<TreeNodeProps, TreeNodeState> {
 
     if (edges.length > 0) {
       const listItems = edges
-        .map(edge => edge.node)
+        .map(edge => edge.target)
         .map(node => <ListItem style={listItemStyle} button key={node.hash()}>
           <TreeNode didSelectNode={this.props.didSelectNode} treeNode={node} />
         </ListItem>)
@@ -125,11 +124,11 @@ export class TreeNode extends React.Component<TreeNodeProps, TreeNodeState> {
       paddingLeft: '5px',
       display: 'inline-block',
     }
-    return this.props.treeNode.value
+    return this.props.treeNode.message
       ? <span
           style={style}
           onMouseOver={() => this.props.didSelectNode && this.props.didSelectNode(this.props.treeNode)}
-          > = {this.props.treeNode.value.toString()}</span>
+          > = {this.props.treeNode.message.toString()}</span>
       : null
   }
 
@@ -146,7 +145,6 @@ export class TreeNode extends React.Component<TreeNodeProps, TreeNodeState> {
 
   public render() {
     const nodeStyle: React.CSSProperties = {
-      //marginLeft: '10px',
       display: 'block',
     }
 

app/src/components/ValueRenderer.tsx

@@ -32,21 +32,21 @@ export class ValueRenderer extends React.Component<Props, State> {
 
   public render() {
     let node = this.props.node
-    if (!node) {
+    if (!node || !node.message) {
       return null
     }
 
     let json
     try {
-      json = JSON.parse(node.value)
+      json = JSON.parse(node.message.value)
     } catch(error) {
-      return this.renderRawValue(node.value)
+      return this.renderRawValue(node.message.value)
     }
 
     if (typeof json === 'string') {
-      return this.renderRawValue(node.value)
+      return this.renderRawValue(node.message.value)
     } else if (typeof json === 'number') {
-      return this.renderRawValue(node.value)
+      return this.renderRawValue(node.message.value)
     } else {
       return <ReactJson src={json} />
     }