Add pane resizing

Refactor styles
Update autoExpand with filtered result count
Add redux batch reducer

app/src/components/Tree/TreeNodeTitle.tsx

@@ -3,6 +3,7 @@ import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import { treeActions } from '../../actions'
 import * as q from '../../../../backend/src/Model'
+import { withStyles, Theme } from '@material-ui/core'
 
 export interface TreeNodeProps extends React.HTMLAttributes<HTMLElement> {
   treeNode: q.TreeNode
@@ -10,62 +11,33 @@ export interface TreeNodeProps extends React.HTMLAttributes<HTMLElement> {
   name?: string | undefined
   collapsed?: boolean | undefined
   lastUpdate: number
+  classes: any
 }
 
 class TreeNodeTitle extends React.Component<TreeNodeProps, {}> {
-  private getStyles() {
-    return {
-      collapsedSubnodes: {
-        color: 'white', // theme.palette.text.secondary,
-      },
-      container: {
-        display: 'block',
-      },
-    }
-  }
-
-  private didSelectNode = (event: React.MouseEvent) => {
-    event.stopPropagation()
+  private mouseOver = (event: React.MouseEvent) => {
     if (this.props.treeNode.message) {
       this.props.actions.selectTopic(this.props.treeNode)
     }
   }
 
   public render() {
-    const style: React.CSSProperties = {
-      lineHeight: '1em',
-      whiteSpace: 'nowrap',
-    }
     return (
-      <span style={style} onMouseOver={this.didSelectNode}>
+      <span className={this.props.classes.title} onMouseOver={this.mouseOver}>
         {this.renderExpander()} {this.renderSourceEdge()} {this.renderCollapsedSubnodes()} {this.renderValue()}
       </span>
     )
   }
 
   private renderSourceEdge() {
-    const style: React.CSSProperties = {
-      fontWeight: 'bold',
-      overflow: 'hidden',
-      display: 'inline-block',
-    }
     const name = this.props.name || (this.props.treeNode.sourceEdge && this.props.treeNode.sourceEdge.name)
 
-    return <span style={style}>{name}</span>
+    return <span className={this.props.classes.sourceEdge}>{name}</span>
   }
 
   private renderValue() {
-    const style: React.CSSProperties = {
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      padding: '0',
-      marginLeft: '5px',
-      display: 'inline-block',
-    }
-
     return this.props.treeNode.message && this.props.treeNode.message.length > 0
-      ? <span style={style}> = {this.props.treeNode.message.value.toString()}</span>
+      ? <span className={this.props.classes.value}> = {this.props.treeNode.message.value.toString().slice(0, 120)}</span>
       : null
   }
 
@@ -83,7 +55,7 @@ class TreeNodeTitle extends React.Component<TreeNodeProps, {}> {
     }
 
     const messages = this.props.treeNode.leafMessageCount()
-    return <span style={this.getStyles().collapsedSubnodes}>({this.props.treeNode.childTopicCount()} topics, {messages} messages)</span>
+    return <span className={this.props.classes.collapsedSubnodes}>({this.props.treeNode.childTopicCount()} topics, {messages} messages)</span>
   }
 }
 
@@ -93,4 +65,27 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-export default connect(null, mapDispatchToProps)(TreeNodeTitle)
+const styles = (theme: Theme) => ({
+  value: {
+    whiteSpace: 'nowrap' as 'nowrap',
+    overflow: 'hidden' as 'hidden',
+    textOverflow: 'ellipsis' as 'ellipsis',
+    padding: '0',
+    marginLeft: '5px',
+    display: 'inline-block' as 'inline-block',
+  },
+  sourceEdge: {
+    fontWeight: 'bold' as 'bold',
+    overflow: 'hidden' as 'hidden',
+    display: 'inline-block' as 'inline-block',
+  },
+  title: {
+    lineHeight: '1em',
+    whiteSpace: 'nowrap' as 'nowrap',
+  },
+  collapsedSubnodes: {
+    color: theme.palette.text.secondary,
+  },
+})
+
+export default withStyles(styles)(connect(null, mapDispatchToProps)(TreeNodeTitle))