Fix emitter leaks, style, tree swaps

app/src/App.tsx

@@ -17,7 +17,7 @@ import ErrorBoundary from './ErrorBoundary'
 interface Props {
   name: string
   connectionId: string
-  theme: Theme
+  classes: any
   settingsVisible: boolean
 }
 
@@ -27,69 +27,22 @@ class App extends React.Component<Props, {}> {
     this.state = { }
   }
 
-  private getStyles(): {[s: string]: React.CSSProperties} {
-    const { theme } = this.props
-    const drawerWidth = 300
-    return {
-      left: {
-        backgroundColor: theme.palette.background.default,
-        color: theme.palette.text.primary,
-        height: 'calc(100vh - 64px)',
-        float: 'left',
-        overflowY: 'scroll',
-        overflowX: 'hidden',
-        display: 'block',
-        width: '60vw',
-      },
-      right: {
-        height: 'calc(100vh - 64px)',
-        color: theme.palette.text.primary,
-        float: 'left',
-        width: '40vw',
-        overflowY: 'scroll',
-        overflowX: 'hidden',
-        display: 'block',
-      },
-      centerContent: {
-        width: '100vw',
-        overflow: 'hidden',
-      },
-      content: {
-        backgroundColor: theme.palette.background.default,
-        transition: theme.transitions.create('margin', {
-          easing: theme.transitions.easing.sharp,
-          duration: theme.transitions.duration.leavingScreen,
-        }),
-        marginLeft: 0,
-      },
-      contentShift: {
-        padding: 0,
-        backgroundColor: theme.palette.background.default,
-        transition: theme.transitions.create('margin', {
-          easing: theme.transitions.easing.easeOut,
-          duration: theme.transitions.duration.enteringScreen,
-        }),
-        marginLeft: drawerWidth,
-      },
-    }
-  }
-
   public render() {
     const { settingsVisible } = this.props
-    const { content, contentShift, centerContent } = this.getStyles()
+    const { content, contentShift, centerContent, left, right } = this.props.classes
 
     return (
-      <div style={centerContent}>
+      <div className={centerContent}>
         <CssBaseline />
         <ErrorBoundary>
           <Settings />
-          <div style={settingsVisible ? contentShift : content}>
+          <div className={settingsVisible ? contentShift : content}>
               <TitleBar />
-              <div style={centerContent}>
-                <div style={this.getStyles().left}>
+              <div className={centerContent}>
+                <div className={this.props.classes.left}>
                   <Tree />
                 </div>
-                <div style={this.getStyles().right}>
+                <div className={right}>
                   <Sidebar connectionId={this.props.connectionId} />
                 </div>
               </div>
@@ -109,4 +62,50 @@ const mapStateToProps = (state: AppState) => {
   }
 }
 
-export default withStyles({}, { withTheme: true })(connect(mapStateToProps)(App))
+const styles = (theme: Theme) => {
+  const drawerWidth = 300
+  return {
+    left: {
+      backgroundColor: theme.palette.background.default,
+      color: theme.palette.text.primary,
+      height: 'calc(100vh - 64px)',
+      float: 'left' as 'left',
+      overflowY: 'scroll' as 'scroll',
+      overflowX: 'hidden' as 'hidden',
+      display: 'block' as 'block',
+      width: '60vw',
+    },
+    right: {
+      height: 'calc(100vh - 64px)',
+      color: theme.palette.text.primary,
+      float: 'left' as 'left',
+      width: '40vw',
+      overflowY: 'scroll' as 'scroll',
+      overflowX: 'hidden' as 'hidden',
+      display: 'block' as 'block',
+    },
+    centerContent: {
+      width: '100vw',
+      overflow: 'hidden' as 'hidden',
+    },
+    content: {
+      backgroundColor: theme.palette.background.default,
+      transition: theme.transitions.create('margin', {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen,
+      }),
+      marginLeft: 0,
+    },
+    contentShift: {
+      padding: 0,
+      backgroundColor: theme.palette.background.default,
+      transition: theme.transitions.create('margin', {
+        easing: theme.transitions.easing.easeOut,
+        duration: theme.transitions.duration.enteringScreen,
+      }),
+      marginLeft: drawerWidth,
+    },
+  }
+}
+
+export default withStyles(styles)(connect(mapStateToProps)(App))

app/src/UpdateNotifier.tsx

@@ -224,4 +224,4 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-export default withStyles(styles, { withTheme: true })(connect(mapStateToProps, mapDispatchToProps)(UpdateNotifier))
+export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(UpdateNotifier))

app/src/actions/Settings.ts

@@ -1,6 +1,7 @@
 import { Action, ActionTypes, TopicOrder } from '../reducers/Settings'
-import { ActionTypes as TreeActionTypes, Action as TreeAction } from '../reducers/Tree'
+import { ActionTypes as TreeActionTypes } from '../reducers/Tree'
 import { Dispatch } from 'redux'
+import { showTree } from './Tree'
 import { AppState } from '../reducers'
 import * as q from '../../../backend/src/Model'
 
@@ -38,17 +39,22 @@ export const filterTopics = (filterStr: string) => (dispatch: Dispatch<any>, get
   }
 
   if (!topicFilter) {
-    dispatch({
-      tree,
-      filter: '',
-      type: TreeActionTypes.TREE_SHOW_TREE,
-    })
-
+    dispatch(showTree(tree))
     return
   }
 
+  const nodeFilter = (node: q.TreeNode): boolean => {
+    const topicMatches = node.path().toLowerCase().indexOf(topicFilter) !== -1
+    if (topicMatches) {
+      return true
+    }
+
+    const messageMatches = (node.message && typeof node.message.value === 'string' && node.message.value.toLowerCase().indexOf(filterStr) !== -1)
+    return Boolean(messageMatches)
+  }
+
   const resultTree = tree.leafes()
-    .filter(leaf => leaf.path().toLowerCase().indexOf(topicFilter) !== -1)
+    .filter(nodeFilter)
     .map((node) => {
       const clone = node.unconnectedClone()
       q.TreeNodeFactory.insertNodeAtPosition(node.path().split('/'), clone)
@@ -59,9 +65,10 @@ export const filterTopics = (filterStr: string) => (dispatch: Dispatch<any>, get
       return a
     }, new q.Tree())
 
-  dispatch({
-    tree: resultTree,
-    filter: topicFilter,
-    type: TreeActionTypes.TREE_SHOW_TREE,
-  })
+  const nextTree: q.Tree = resultTree as q.Tree
+  if (tree.updateSource && tree.connectionId) {
+    nextTree.updateWithConnection(tree.updateSource, tree.connectionId, nodeFilter)
+  }
+
+  dispatch(showTree(nextTree))
 }

app/src/actions/Tree.ts

@@ -18,9 +18,17 @@ export const selectTopic = (topic: q.TreeNode) => (dispatch: Dispatch<any>, getS
   })
 }
 
-export const showTree = (tree?: q.Tree) => {
-  return {
+export const showTree = (tree?: q.Tree) => (dispatch: Dispatch<any>, getState: () => AppState)  => {
+  const visibleTree = getState().tree.tree
+  const connectionTree = getState().connection.tree
+
+  // Stop updates of old tree
+  if (visibleTree !== connectionTree && visibleTree) {
+    visibleTree.stopUpdating()
+  }
+
+  dispatch({
     tree,
     type: ActionTypes.TREE_SHOW_TREE,
-  }
+  })
 }

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)

app/src/reducers/Theme.ts

@@ -0,0 +1,11 @@
+import { createReducer } from './lib'
+import { createMuiTheme, Theme } from '@material-ui/core'
+
+const initialState: Theme = createMuiTheme({
+  palette: {
+    type: 'dark',
+  },
+  typography: { useNextVariants: true },
+})
+
+export const theme = createReducer(initialState, {})

app/src/reducers/index.ts

@@ -7,6 +7,7 @@ import { PublishState, publishReducer } from './Publish'
 import { ConnectionState, connectionReducer } from './Connection'
 import { SettingsState, settingsReducer } from './Settings'
 import { TreeState, treeReducer } from './Tree'
+import { theme } from './theme'
 
 export enum ActionTypes {
   showUpdateNotification = 'SHOW_UPDATE_NOTIFICATION',
@@ -64,6 +65,7 @@ const tooBigReducer: Reducer<TooBigOfState | undefined, CustomAction> = (state =
 }
 
 const reducer = combineReducers({
+  theme,
   tooBigReducer,
   publish: publishReducer,
   connection: connectionReducer,