Remove mouse-over to select topics

app/src/components/Tree/TreeNode.tsx

@@ -29,6 +29,9 @@ const styles = (theme: Theme) => {
       cursor: 'pointer',
       marginTop: '-1px',
     },
+    subnodes: {
+      marginLeft: theme.spacing(1.5),
+    },
     selected: {
       backgroundColor: 'rgba(170, 170, 170, 0.55)',
     },
@@ -187,23 +190,28 @@ class TreeNode extends React.Component<Props, State> {
     const highlightClass = this.state.selected ? this.props.classes.selected : (this.state.mouseOver ? this.props.classes.hover : '')
 
     return (
-      <div
+      <div>
-        key={this.props.treeNode.hash()}
+        <div
-        className={`${classes.node} ${this.props.className}`}
+          key={this.props.treeNode.hash()}
-        onClick={this.didClickNode}
+          className={`${classes.node} ${this.props.className}`}
-        onMouseOver={this.mouseOver}
+          onMouseOver={this.mouseOver}
-        onMouseOut={this.mouseOut}
+          onMouseOut={this.mouseOut}
-        ref={this.nodeRef}
+          onClick={this.didClickTitle}
-      >
+          ref={this.nodeRef}
-        <TreeNodeTitle
+        >
-          style={animation}
+          <TreeNodeTitle
-          collapsed={this.collapsed()}
+            style={animation}
-          treeNode={this.props.treeNode}
+            toggleCollapsed={this.toggleCollapsed}
-          name={this.props.name}
+            didSelectNode={this.didSelectTopic}
-          didSelectNode={this.didSelectTopic}
+            collapsed={this.collapsed()}
-          className={highlightClass}
+            treeNode={this.props.treeNode}
-        />
+            name={this.props.name}
-        {this.renderNodes()}
+            className={highlightClass}
+          />
+        </div>
+        <div className={classes.subnodes}>
+          {this.renderNodes()}
+        </div>
       </div>
     )
   }
@@ -212,6 +220,12 @@ class TreeNode extends React.Component<Props, State> {
     this.props.didSelectTopic(this.props.treeNode)
   }
 
+  private didClickTitle = (event: React.MouseEvent) => {
+    event.preventDefault()
+    this.props.didSelectTopic(this.props.treeNode)
+    this.toggle()
+  }
+
   private mouseOver = (event: React.MouseEvent) => {
     event.stopPropagation()
     this.setHover(true)
@@ -226,10 +240,9 @@ class TreeNode extends React.Component<Props, State> {
     this.setState({ mouseOver: hover })
   }, 45)
 
-  private didClickNode = (event: React.MouseEvent) => {
+  private toggleCollapsed = (event: React.MouseEvent) => {
     event.stopPropagation()
     this.toggle()
-    this.didSelectTopic()
   }
 
   private renderNodes() {

app/src/components/Tree/TreeNodeTitle.tsx

@@ -11,29 +11,19 @@ export interface TreeNodeProps extends React.HTMLAttributes<HTMLElement> {
   collapsed?: boolean | undefined
   classes: any
   didSelectNode: any
+  toggleCollapsed: any
 }
 
 class TreeNodeTitle extends React.Component<TreeNodeProps, {}> {
-  private mouseOver = (event: React.MouseEvent) => {
-    event.preventDefault()
-    this.selectTopic()
-  }
-
-  private selectTopic = debounce(() => {
-    if (this.props.treeNode.message) {
-      this.props.didSelectNode(this.props.treeNode)
-    }
-  }, 5)
-
   public render() {
     const { classes, treeNode, style, className } = this.props
     return (
       <span
         className={`${classes.title} ${className}`}
-        onMouseOver={treeNode.message ? this.mouseOver : undefined}
         style={style}
       >
-        <span className={classes.expander}>{this.renderExpander()}</span> {this.renderSourceEdge()} {this.renderCollapsedSubnodes()} {this.renderValue()}
+        <span className={classes.expander} onClick={this.props.toggleCollapsed}>{this.renderExpander()}</span>
+        {this.renderSourceEdge()} {this.renderCollapsedSubnodes()} {this.renderValue()}
       </span>
     )
   }
@@ -81,6 +71,8 @@ const styles = (theme: Theme) => ({
   },
   expander: {
     color: theme.palette.type === 'light' ? '#222' : '#eee',
+    cursor: 'pointer' as 'pointer',
+    paddingRight: theme.spacing(0.25),
   },
   title: {
     borderRadius: '4px',
@@ -88,7 +80,7 @@ const styles = (theme: Theme) => ({
     display: 'inline-block' as 'inline-block',
     whiteSpace: 'nowrap' as 'nowrap',
     padding: '1px 4px 0px 4px',
-    height: '16px',
+    height: '14px',
     margin: '1px 0px 2px 0px',
   },
   collapsedSubnodes: {