Fix Sidebar & Mouse event target area

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

app/src/App.tsx

@@ -91,7 +91,7 @@ class App extends React.Component<Props, State> {
               }} />
             </div>
             <div style={this.getStyles().right}>
-              <Sidebar node={this.state.selectedNode} />
+              <Sidebar />
             </div>
           </div>
       </div>

app/src/actions/index.ts

@@ -1,3 +1,4 @@
 import * as settingsActions from './Settings'
+import * as treeActions from './Tree'
 
-export { settingsActions }
+export { settingsActions, treeActions }

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) {

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))

app/src/index.tsx

@@ -15,6 +15,7 @@ const initialAppState = {
     nodeOrder: NodeOrder.none,
     visible: false,
   },
+  selectedNode: undefined,
 }
 const store = createStore(reducers, initialAppState)
 

app/src/reducers/index.ts

@@ -1,19 +1,29 @@
 import { Reducer, Action } from 'redux'
+import * as q from '../../../backend/src/Model'
 
 export enum ActionTypes {
   setAutoExpandLimit = 'SET_AUTO_EXPAND_LIMIT',
   toggleSettingsVisibility = 'TOGGLE_SETTINGS_VISIBILITY',
   setNodeOrder = 'SET_NODE_ORDER',
+  selectTopic = 'SELECT_TOPIC',
 }
 
-interface SettingsAction extends Action {
+interface CustomAction extends Action {
   type: ActionTypes,
   autoExpandLimit?: number
   nodeOrder?: NodeOrder
+  selectedTopic?: q.TreeNode
 }
 
 export interface AppState {
-  settings: SettingsModel
+  settings: SettingsState,
+  selectedTopic?: q.TreeNode
+}
+
+export interface SettingsState {
+  autoExpandLimit: number
+  visible: boolean
+  nodeOrder: NodeOrder
 }
 
 export enum NodeOrder {
@@ -23,13 +33,7 @@ export enum NodeOrder {
   topics = '#topics',
 }
 
-export interface SettingsModel {
-  autoExpandLimit: number
-  visible: boolean
-  nodeOrder: NodeOrder
-}
-
-const reducer: Reducer<AppState | undefined, SettingsAction> = (state, action) => {
+const reducer: Reducer<AppState | undefined, CustomAction> = (state, action) => {
   if (!state) {
     throw Error('No initial state')
   }
@@ -57,6 +61,15 @@ const reducer: Reducer<AppState | undefined, SettingsAction> = (state, action) =
           nodeOrder: state.settings.nodeOrder,
         },
       }
+    case ActionTypes.selectTopic:
+      if (!action.selectedTopic) {
+        return state
+      }
+      return {
+        ...state,
+        settings: state.settings,
+        selectedTopic: action.selectedTopic,
+      }
     case ActionTypes.setNodeOrder:
       if (!action.nodeOrder) {
         return state