Fix Sidebar & Mouse event target area

Fix clipboard
Fix invalid state in sidebar due to missing event termination

app/src/components/Tree/Tree.tsx

@@ -118,8 +118,7 @@ class Tree extends React.Component<Props, TreeState> {
           name="/"
           collapsed={false}
           key="rootNode"
-          lastUpdate={0}
-          performanceCallback={this.performanceCallback}
+          lastUpdate={this.state.tree.lastUpdate}
         />
       </Typography>
     )

app/src/components/Tree/TreeNode.tsx

@@ -1,4 +1,7 @@
 import * as React from 'react'
+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/styles'
 
@@ -29,6 +32,7 @@ const styles = (theme: Theme) => {
 }
 
 interface Props {
+  actions: any
   lastUpdate: number
   animateChages: boolean
   isRoot?: boolean
@@ -39,6 +43,7 @@ interface Props {
   didSelectNode?: (node: q.TreeNode) => void
   classes: any
   autoExpandLimit: number
+  style?: React.CSSProperties
 }
 
 interface State {
@@ -168,13 +173,13 @@ class TreeNode extends React.Component<Props, State> {
         key={this.props.treeNode.hash()}
         className={`${classes.node} ${!this.props.isRoot ? classes.hover : ''}`}
         onClick={this.didClickNode}
+        style={this.props.style}
       >
         <span ref={this.titleRef} style={animation}>
           <TreeNodeTitle
             collapsed={this.collapsed()}
             treeNode={this.props.treeNode}
             name={this.props.name}
-            didSelectNode={this.props.didSelectNode}
           />
         </span>
         {this.renderNodes()}
@@ -185,7 +190,7 @@ class TreeNode extends React.Component<Props, State> {
   private didClickNode = (event: React.MouseEvent) => {
     event.stopPropagation()
     this.toggle()
-    this.props.didSelectNode && this.props.didSelectNode(this.props.treeNode)
+    this.props.actions.selectTopic(this.props.treeNode)
   }
 
   private renderNodes() {
@@ -202,4 +207,10 @@ class TreeNode extends React.Component<Props, State> {
   }
 }
 
-export default withStyles(styles)(TreeNode)
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: bindActionCreators(treeActions, dispatch),
+  }
+}
+
+export default withStyles(styles)(connect(null, mapDispatchToProps)(TreeNode))

app/src/components/Tree/TreeNodeSubnodes.tsx

@@ -49,13 +49,14 @@ class TreeNodeSubnodes extends React.Component<Props, {}> {
 
     const nodes = this.sortedNodes()
     const listItems = nodes.map(node => (
-        <div key={node.hash()} style={listItemStyle}>
+        <div key={node.hash()}>
           <TreeNode
             animateChages={this.props.animateChanges}
             treeNode={node}
             didSelectNode={this.props.didSelectNode}
             autoExpandLimit={this.props.autoExpandLimit}
             lastUpdate={node.lastUpdate}
+            style={listItemStyle}
           />
         </div>
       ))

app/src/components/Tree/TreeNodeTitle.tsx

@@ -1,12 +1,15 @@
 import * as React from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import { treeActions } from '../../actions'
 import * as q from '../../../../backend/src/Model'
 import { withTheme, Theme } from '@material-ui/core/styles'
 
 export interface TreeNodeProps extends React.HTMLAttributes<HTMLElement> {
   treeNode: q.TreeNode
+  actions: any
   name?: string | undefined
   collapsed?: boolean | undefined
-  didSelectNode?: (node: q.TreeNode) => void
   theme: Theme
 }
 
@@ -23,9 +26,10 @@ class TreeNodeTitle extends React.Component<TreeNodeProps, {}> {
     }
   }
 
-  private didSelectNode = () => {
+  private didSelectNode = (event: React.MouseEvent) => {
+    event.stopPropagation()
     if (this.props.treeNode.message) {
-      this.props.didSelectNode && this.props.didSelectNode(this.props.treeNode)
+      this.props.actions.selectTopic(this.props.treeNode)
     }
   }
 
@@ -59,7 +63,7 @@ class TreeNodeTitle extends React.Component<TreeNodeProps, {}> {
       overflow: 'hidden',
       textOverflow: 'ellipsis',
       padding: '0',
-      paddingLeft: '5px',
+      marginLeft: '5px',
       display: 'inline-block',
     }
     return this.props.treeNode.message
@@ -85,4 +89,10 @@ class TreeNodeTitle extends React.Component<TreeNodeProps, {}> {
   }
 }
 
-export default withTheme()(TreeNodeTitle)
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: bindActionCreators(treeActions, dispatch),
+  }
+}
+
+export default withTheme()(connect(null, mapDispatchToProps)(TreeNodeTitle))