Fix emitter leaks, style, tree swaps

app/src/components/ConnectionSetup/Connection.tsx

@@ -33,7 +33,6 @@ import { connectionActions } from '../../actions'
 
 interface Props {
   classes: {[s: string]: string}
-  theme: Theme
   actions: typeof connectionActions,
   visible: boolean
   connected: boolean
@@ -393,4 +392,4 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(Connection.styles, { withTheme: true })(Connection))
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(Connection.styles)(Connection))

app/src/components/Settings.tsx

@@ -18,7 +18,6 @@ import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { settingsActions } from '../actions'
 import { TopicOrder } from '../reducers/Settings'
-import Topic from './Sidebar/Topic';
 
 const styles: StyleRulesCallback = theme => ({
   drawer: {

app/src/components/Sidebar/MessageHistory.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
 
-import { Theme, withTheme } from '@material-ui/core/styles'
 import BarChart from '@material-ui/icons/BarChart'
-import DateFormatter from '../DateFormatter'
+import DateFormatter from '../helper/DateFormatter'
 import History from './History'
 import PlotHistory from './PlotHistory'
 
@@ -11,7 +10,6 @@ const throttle = require('lodash.throttle')
 
 interface Props {
   node?: q.TreeNode
-  theme: Theme
   onSelect: (message: q.Message) => void
 }
 
@@ -35,7 +33,7 @@ class MessageHistory extends React.Component<Props, State> {
     nextProps.node && nextProps.node.onMessage.subscribe(this.updateNode)
   }
 
-  public componentWillMount() {
+  public componentDidMount() {
     this.props.node && this.props.node.onMessage.subscribe(this.updateNode)
   }
 
@@ -81,4 +79,4 @@ class MessageHistory extends React.Component<Props, State> {
   }
 }
 
-export default withTheme()(MessageHistory)
+export default MessageHistory

app/src/components/Sidebar/PlotHistory.tsx

@@ -1,10 +1,9 @@
 const { XYPlot, XAxis, LineMarkSeries, Hint, YAxis, HorizontalGridLines, LineSeries } = require('react-vis')
 import { default as ReactResizeDetector } from 'react-resize-detector'
 
-import DateFormatter from '../DateFormatter'
+import DateFormatter from '../helper/DateFormatter'
 import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
-import { withStyles, Theme, StyleRulesCallback } from '@material-ui/core/styles'
 import 'react-vis/dist/style.css'
 
 interface Props {
@@ -71,4 +70,4 @@ class PlotHistory extends React.Component<Props, Stats> {
   }
 }
 
-export default withStyles({}, { withTheme: true })(PlotHistory)
+export default PlotHistory

app/src/components/Sidebar/Sidebar.tsx

@@ -7,11 +7,9 @@ import {
   ExpansionPanelDetails,
   ExpansionPanelSummary,
   Fade,
-  Fab,
   Paper,
   Popper,
   Typography,
-  IconButton,
   Tooltip,
 } from '@material-ui/core'
 import { StyleRulesCallback, Theme, withStyles } from '@material-ui/core/styles'
@@ -20,7 +18,7 @@ import { sidebarActons } from '../../actions'
 
 import { AppState } from '../../reducers'
 import Copy from '../Copy'
-import DateFormatter from '../DateFormatter'
+import DateFormatter from '../helper/DateFormatter'
 import ExpandMore from '@material-ui/icons/ExpandMore'
 import Clear from '@material-ui/icons/Clear'
 import MessageHistory from './MessageHistory'
@@ -37,7 +35,6 @@ interface Props {
   node?: q.TreeNode,
   actions: typeof sidebarActons,
   classes: any,
-  theme: Theme,
   connectionId?: string,
 }
 
@@ -58,22 +55,6 @@ class Sidebar extends React.Component<Props, State> {
     this.state = { node: new q.Tree() }
   }
 
-  public static styles: StyleRulesCallback<string> = (theme: Theme) => {
-    return {
-      drawer: {
-        display: 'block',
-        height: '100%',
-      },
-      valuePaper: {
-        margin: `${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px`,
-      },
-      heading: {
-        fontSize: theme.typography.pxToRem(15),
-        fontWeight: theme.typography.fontWeightRegular,
-      },
-    }
-  }
-
   public componentWillReceiveProps(nextProps: Props) {
     this.props.node && this.removeUpdateListener(this.props.node)
     nextProps.node && this.registerUpdateListener(nextProps.node)
@@ -229,4 +210,20 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-export default withStyles(Sidebar.styles, { withTheme: true })(connect(mapStateToProps, mapDispatchToProps)(Sidebar))
+const styles: StyleRulesCallback<string> = (theme: Theme) => {
+  return {
+    drawer: {
+      display: 'block',
+      height: '100%',
+    },
+    valuePaper: {
+      margin: `${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px`,
+    },
+    heading: {
+      fontSize: theme.typography.pxToRem(15),
+      fontWeight: theme.typography.fontWeightRegular,
+    },
+  }
+}
+
+export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(Sidebar))

app/src/components/Tree/Tree.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
 
-import { makeConnectionMessageEvent, rendererEvents, MqttMessage } from '../../../../events'
-
 import { AppState } from '../../reducers'
 import TreeNode from './TreeNode'
 import { connect } from 'react-redux'
@@ -84,11 +82,11 @@ class Tree extends React.Component<Props, {}> {
       lineHeight: '1.1',
       cursor: 'default',
     }
-    const key = `rootNode-${filter}`
+
     return (
       <div style={style}>
         <TreeNode
-          key={key}
+          key={tree.hash()}
           animateChages={true}
           isRoot={true}
           treeNode={tree}

app/src/components/Tree/TreeNode.tsx

@@ -67,8 +67,8 @@ class TreeNode extends React.Component<Props, State> {
   private cssAnimationWasSetAt?: number
 
   private willUpdateTime: number = performance.now()
-  private titleRef = React.createRef<HTMLDivElement>()
-  private topicSelectRef = React.createRef<HTMLDivElement>()
+  private titleRef?: React.RefObject<HTMLDivElement> = React.createRef<HTMLDivElement>()
+  private topicSelectRef?: React.RefObject<HTMLDivElement> = React.createRef<HTMLDivElement>()
 
   private subnodesDidchange = () => {
     this.dirtySubnodes = true
@@ -90,18 +90,52 @@ class TreeNode extends React.Component<Props, State> {
     }
   }
 
+  private writeStats(what: string) {
+    const w: any = window
+    if (!w.stats) {
+      w.stats = {}
+    }
+    if (!w.stats[what]) {
+      w.stats[what] = 0
+    }
+    w.stats[what] += 1
+  }
+
   public componentDidMount() {
     const { treeNode } = this.props
+    this.addSubscriber(treeNode)
+  }
+
+  private addSubscriber(treeNode: q.TreeNode) {
+    this.writeStats('subscribe')
     treeNode.onMerge.subscribe(this.subnodesDidchange)
     treeNode.onEdgesChange.subscribe(this.edgesDidChange)
     treeNode.onMessage.subscribe(this.messageDidChange)
   }
 
+  private removeSubscriber(treeNode: q.TreeNode) {
+    this.writeStats('unsubscribe')
+    treeNode.onMerge.unsubscribe(this.subnodesDidchange)
+    treeNode.onEdgesChange.unsubscribe(this.edgesDidChange)
+    treeNode.onMessage.unsubscribe(this.messageDidChange)
+  }
+
+  public componentWillReceiveProps(nextProps: Props) {
+    if (nextProps.treeNode !== this.props.treeNode) {
+      this.removeSubscriber(this.props.treeNode)
+      this.addSubscriber(nextProps.treeNode)
+    }
+  }
+
   public componentWillUnmount() {
+    this.writeStats('unsubscribe')
+
     const { treeNode } = this.props
     treeNode.onMerge.unsubscribe(this.subnodesDidchange)
     treeNode.onEdgesChange.unsubscribe(this.edgesDidChange)
     treeNode.onMessage.unsubscribe(this.messageDidChange)
+    this.topicSelectRef = undefined
+    this.titleRef = undefined
   }
 
   private stateHasChanged(newState: State) {
@@ -189,20 +223,20 @@ class TreeNode extends React.Component<Props, State> {
 
   private mouseOver = (event: React.MouseEvent) => {
     event.stopPropagation()
-    if (this.topicSelectRef.current) {
+    if (this.topicSelectRef && this.topicSelectRef.current) {
       this.topicSelectRef.current.style.opacity = '1'
     }
   }
   private mouseOut = (event: React.MouseEvent) => {
     event.stopPropagation()
-    if (this.topicSelectRef.current) {
+    if (this.topicSelectRef && this.topicSelectRef.current) {
       this.topicSelectRef.current.style.opacity = '0'
     }
   }
 
   private didSelectNode = (event: React.MouseEvent) => {
     event.stopPropagation()
-    if (this.topicSelectRef.current) {
+    if (this.topicSelectRef && this.topicSelectRef.current) {
       this.topicSelectRef.current.style.opacity = '1'
     }
     this.props.actions.selectTopic(this.props.treeNode)

app/src/components/Tree/TreeNodeSubnodes.tsx

@@ -2,7 +2,6 @@ import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
 
 import { AppState } from '../../reducers'
-import { Theme, withTheme } from '@material-ui/core/styles'
 
 import TreeNode from './TreeNode'
 import { connect } from 'react-redux'
@@ -14,9 +13,9 @@ export interface Props {
   animateChanges: boolean
   treeNode: q.TreeNode
   autoExpandLimit: number
+  filter?: string
   collapsed?: boolean | undefined
   didSelectNode?: (node: q.TreeNode) => void
-  theme: Theme
 }
 
 interface State {
@@ -76,15 +75,15 @@ class TreeNodeSubnodes extends React.Component<Props, State> {
 
     const nodes = this.sortedNodes().slice(0, this.state.alreadyAdded)
     const listItems = nodes.map(node => (
-        <div key={node.hash()}>
-          <TreeNode
-            animateChages={this.props.animateChanges}
-            treeNode={node}
-            lastUpdate={node.lastUpdate}
-            style={listItemStyle}
-          />
-        </div>
-      ))
+      <div key={`${node.hash()}-${this.props.filter}`}>
+        <TreeNode
+          animateChages={this.props.animateChanges}
+          treeNode={node}
+          lastUpdate={node.lastUpdate}
+          style={listItemStyle}
+        />
+      </div>
+    ))
 
     return (
       <span style={{ display: 'block', clear: 'both' }} >
@@ -97,7 +96,8 @@ class TreeNodeSubnodes extends React.Component<Props, State> {
 const mapStateToProps = (state: AppState) => {
   return {
     topicOrder: state.settings.topicOrder,
+    filter: state.tree.filter,
   }
 }
 
-export default withTheme()(connect(mapStateToProps)(TreeNodeSubnodes))
+export default connect(mapStateToProps)(TreeNodeSubnodes)

app/src/components/Tree/TreeNodeTitle.tsx

@@ -3,23 +3,20 @@ 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
-  theme: Theme
   lastUpdate: number
 }
 
 class TreeNodeTitle extends React.Component<TreeNodeProps, {}> {
   private getStyles() {
-    const { theme } = this.props
     return {
       collapsedSubnodes: {
-        color: theme.palette.text.secondary,
+        color: 'white', // theme.palette.text.secondary,
       },
       container: {
         display: 'block',
@@ -97,4 +94,4 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-export default withTheme()(connect(null, mapDispatchToProps)(TreeNodeTitle))
+export default connect(null, mapDispatchToProps)(TreeNodeTitle)