Fix Sidebar & Mouse event target area

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

app/src/components/Sidebar/NodeStats.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
-// import Drawer from '@material-ui/core/Drawer'
 import { Typography } from '@material-ui/core'
 
 interface Props {
@@ -15,11 +14,13 @@ class NodeStats extends React.Component<Props, {}> {
   public render() {
     const { node } = this.props
 
-    return <div>
-      <Typography>Messages: #{node.messages}</Typography>
-      <Typography>Subtopics: {node.leafCount()}</Typography>
-      <Typography>Messages Subtopics: #{node.leafMessageCount()}</Typography>
-    </div>
+    return (
+      <div>
+        <Typography>Messages: #{node.messages}</Typography>
+        <Typography>Subtopics: {node.leafCount()}</Typography>
+        <Typography>Messages Subtopics: #{node.leafMessageCount()}</Typography>
+      </div>
+    )
   }
 }
 

app/src/components/Sidebar/Sidebar.tsx

@@ -1,4 +1,6 @@
 import * as React from 'react'
+import { connect } from 'react-redux'
+import { AppState } from '../../reducers'
 import * as q from '../../../../backend/src/Model'
 import { ExpansionPanel, ExpansionPanelDetails, ExpansionPanelSummary, Typography } from '@material-ui/core'
 import { withStyles, Theme, StyleRulesCallback } from '@material-ui/core/styles'
@@ -63,9 +65,11 @@ class Sidebar extends React.Component<Props, State> {
   }
 
   public render() {
-    return <div className={this.props.classes.drawer}>
-      {this.renderNode()}
-    </div>
+    return (
+      <div className={this.props.classes.drawer}>
+        {this.renderNode()}
+      </div>
+    )
   }
 
   private renderNode() {
@@ -74,33 +78,41 @@ class Sidebar extends React.Component<Props, State> {
     const copyTopic = node ? <Copy value={node.path()} /> : null
     const copyValue = node && node.message ? <Copy value={node.message.value} /> : null
 
-    return <div>
-      <ExpansionPanel key="topic" defaultExpanded={true}>
-        <ExpansionPanelSummary expandIcon={<ExpandMore />}>
-          <Typography className={classes.heading}>Topic {copyTopic}</Typography>
-        </ExpansionPanelSummary>
-        <ExpansionPanelDetails>
-          <Topic node={this.props.node} didSelectNode={this.updateNode} />
-        </ExpansionPanelDetails>
-      </ExpansionPanel>
-      <ExpansionPanel key="value" defaultExpanded={true}>
-        <ExpansionPanelSummary expandIcon={<ExpandMore />}>
-          <Typography className={classes.heading}>Value {copyValue}</Typography>
-        </ExpansionPanelSummary>
-        <ExpansionPanelDetails>
-          <ValueRenderer node={this.state.node} />
-        </ExpansionPanelDetails>
-      </ExpansionPanel>
-      <ExpansionPanel defaultExpanded={true}>
-        <ExpansionPanelSummary expandIcon={<ExpandMore />}>
-          <Typography className={classes.heading}>Stats</Typography>
-        </ExpansionPanelSummary>
-        <ExpansionPanelDetails>
-          <NodeStats node={this.state.node} />
-        </ExpansionPanelDetails>
-      </ExpansionPanel>
-    </div>
+    return (
+      <div>
+        <ExpansionPanel key="topic" defaultExpanded={true}>
+          <ExpansionPanelSummary expandIcon={<ExpandMore />}>
+            <Typography className={classes.heading}>Topic {copyTopic}</Typography>
+          </ExpansionPanelSummary>
+          <ExpansionPanelDetails>
+            <Topic node={this.props.node} didSelectNode={this.updateNode} />
+          </ExpansionPanelDetails>
+        </ExpansionPanel>
+        <ExpansionPanel key="value" defaultExpanded={true}>
+          <ExpansionPanelSummary expandIcon={<ExpandMore />}>
+            <Typography className={classes.heading}>Value {copyValue}</Typography>
+          </ExpansionPanelSummary>
+          <ExpansionPanelDetails>
+            <ValueRenderer node={this.props.node} />
+          </ExpansionPanelDetails>
+        </ExpansionPanel>
+        <ExpansionPanel defaultExpanded={true}>
+          <ExpansionPanelSummary expandIcon={<ExpandMore />}>
+            <Typography className={classes.heading}>Stats</Typography>
+          </ExpansionPanelSummary>
+          <ExpansionPanelDetails>
+            {this.props.node ? <NodeStats node={this.props.node} /> : null}
+          </ExpansionPanelDetails>
+        </ExpansionPanel>
+      </div>
+    )
   }
 }
 
-export default withStyles(Sidebar.styles, { withTheme: true })(Sidebar)
+const mapStateToProps = (state: AppState) => {
+  return {
+    node: state.selectedTopic,
+  }
+}
+
+export default withStyles(Sidebar.styles, { withTheme: true })(connect(mapStateToProps)(Sidebar))

app/src/components/Sidebar/Topic.tsx

@@ -31,7 +31,8 @@ class Topic extends React.Component<Props, {}> {
       .map(node => node.sourceEdge)
       .filter(edge => Boolean(edge))
       .map(edge =>
-        [<Button
+        [(
+          <Button
             onClick={() => this.setState({ node: edge!.target })}
             size="small"
             color="secondary"
@@ -39,7 +40,8 @@ class Topic extends React.Component<Props, {}> {
             key={edge!.hash()}
           >
             {edge!.name}
-          </Button>],
+          </Button>
+        )],
       )
 
     if (breadCrumps.length === 0) {