Fix memory leaks

app/src/actions/Connection.ts

@@ -78,6 +78,8 @@ export const disconnect = () => (dispatch: Dispatch<any>, getState: () => AppSta
   }
 
   tree && tree.stopUpdating()
+  tree && tree.destroy()
+
   // Clear topic filter
   dispatch({
     topicFilter: '',
@@ -88,4 +90,5 @@ export const disconnect = () => (dispatch: Dispatch<any>, getState: () => AppSta
   dispatch({
     type: ActionTypes.CONNECTION_SET_DISCONNECTED,
   })
+  dispatch(showTree(undefined))
 }

app/src/actions/Tree.ts

@@ -53,20 +53,28 @@ const debouncedSelectTopic = debounce((topic: q.TreeNode<TopicViewModel>, dispat
   }
 }, 70)
 
-export const resetStore = () => (dispatch: Dispatch<any>): AnyAction => {
+function destroyUnreferencedTree(state: AppState) {
+  const visibleTree = state.tree.get('tree')
+  const connectionTree = state.connection.tree
+
+  // Stop updates of old tree
+  if (visibleTree && visibleTree !== connectionTree) {
+    console.warn('destroy')
+    visibleTree.stopUpdating()
+    visibleTree.destroy()
+  }
+}
+
+export const resetStore = () => (dispatch: Dispatch<any>, getState: () => AppState): AnyAction => {
+  destroyUnreferencedTree(getState())
+
   return dispatch({
     type: ActionTypes.TREE_RESET_STORE,
   })
 }
 
 export const showTree = (tree: q.Tree<TopicViewModel> | undefined) => (dispatch: Dispatch<any>, getState: () => AppState): AnyAction => {
-  const visibleTree = getState().tree.get('tree')
-  const connectionTree = getState().connection.tree
-
-  // Stop updates of old tree
-  if (visibleTree !== connectionTree && visibleTree) {
-    visibleTree.stopUpdating()
-  }
+  destroyUnreferencedTree(getState())
 
   return dispatch({
     tree,

app/src/components/Sidebar/Sidebar.tsx

@@ -35,7 +35,6 @@ interface Props {
 }
 
 interface State {
-  node: q.TreeNode<TopicViewModel>
   compareMessage?: q.Message
   valueRenderWidth: number
 }
@@ -49,8 +48,7 @@ class Sidebar extends React.Component<Props, State> {
 
   constructor(props: any) {
     super(props)
-    console.error('Find and fix me #state')
-    this.state = { node: new q.Tree(), valueRenderWidth: 300 }
+    this.state = { valueRenderWidth: 300 }
   }
 
   private registerUpdateListener(node: q.TreeNode<TopicViewModel>) {
@@ -156,7 +154,6 @@ class Sidebar extends React.Component<Props, State> {
   public componentWillReceiveProps(nextProps: Props) {
     this.props.node && this.removeUpdateListener(this.props.node)
     nextProps.node && this.registerUpdateListener(nextProps.node)
-    this.props.node && this.setState({ node: this.props.node })
 
     if (this.props.node !== nextProps.node) {
       this.setState({ compareMessage: undefined })

app/src/components/Tree/Tree.tsx

@@ -30,7 +30,7 @@ interface State {
   lastUpdate: number
 }
 
-class Tree extends React.PureComponent<Props, State> {
+class TreeComponent extends React.PureComponent<Props, State> {
   private updateTimer?: any
   private perf: number = 0
   private renderTime = 0
@@ -137,4 +137,4 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(Tree)
+export default connect(mapStateToProps, mapDispatchToProps)(TreeComponent)

app/src/components/Tree/TreeNode.tsx

@@ -70,7 +70,7 @@ interface State {
   selected: boolean
 }
 
-class TreeNode extends React.Component<Props, State> {
+class TreeNodeComponent extends React.Component<Props, State> {
   private animationDirty: boolean = false
 
   private cssAnimationWasSetAt?: number
@@ -97,8 +97,8 @@ class TreeNode extends React.Component<Props, State> {
     treeNode.viewModel.change.subscribe(this.viewStateHasChanged)
   }
 
-  private viewStateHasChanged = (msg: void, viewModel: TopicViewModel) => {
-    this.setState({ selected: viewModel.isSelected() })
+  private viewStateHasChanged = (msg: void) => {
+    this.setState({ selected: this.props.treeNode.viewModel!.isSelected() })
   }
 
   private removeSubscriber(treeNode: q.TreeNode<TopicViewModel>) {
@@ -243,4 +243,4 @@ class TreeNode extends React.Component<Props, State> {
   }
 }
 
-export default withStyles(styles, { withTheme: true })(TreeNode)
+export default withStyles(styles, { withTheme: true })(TreeNodeComponent)

app/src/model/TopicViewModel.ts

@@ -2,7 +2,7 @@ import { EventDispatcher } from '../../../events'
 
 export class TopicViewModel {
   private selected: boolean
-  public change = new EventDispatcher<void, TopicViewModel>(this)
+  public change = new EventDispatcher<void, TopicViewModel>()
 
   public constructor() {
     this.selected = false