Fix performance issue

When the root node was collapsed, it also was selected due to the click event.
The sidebar was updated every time a new message was receivend,
effectivly inhibiting the "render the tree if you got nothing else to do" optimization to render anything at all.

Fixes #7

app/src/components/Sidebar/MessageHistory.tsx

@@ -9,6 +9,8 @@ import Paper from '@material-ui/core/Paper'
 import Popper from '@material-ui/core/Popper'
 import ValueRenderer from './ValueRenderer'
 
+const throttle = require('lodash.throttle')
+
 interface Props {
   node?: q.TreeNode
   theme: Theme
@@ -26,9 +28,9 @@ class MessageHistory extends React.Component<Props, State> {
     this.state = { }
   }
 
-  private updateNode = () => {
+  private updateNode = throttle(() => {
     this.setState(this.state)
-  }
+  }, 300)
 
   public componentWillReceiveProps(nextProps: Props) {
     this.props.node && this.props.node.onMessage.unsubscribe(this.updateNode)

app/src/components/Sidebar/NodeStats.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
+
 import { Typography } from '@material-ui/core'
 
 interface Props {

app/src/components/Sidebar/Sidebar.tsx

@@ -22,6 +22,8 @@ import Topic from './Topic'
 import ValueRenderer from './ValueRenderer'
 import { connect } from 'react-redux'
 
+const throttle = require('lodash.throttle')
+
 interface Props {
   node?: q.TreeNode,
   classes: any,
@@ -36,9 +38,9 @@ interface State {
 
 class Sidebar extends React.Component<Props, State> {
   private valueRef: any = React.createRef<HTMLDivElement>()
-  private updateNode = () => {
+  private updateNode = throttle(() => {
     this.setState(this.state)
-  }
+  }, 300)
 
   constructor(props: any) {
     super(props)

app/src/components/Tree/Tree.tsx

@@ -9,12 +9,11 @@ import { connect } from 'react-redux'
 
 const MovingAverage = require('moving-average')
 
-declare const performance: any
-declare const window: any
-
 const timeInterval = 10 * 1000
 const average = MovingAverage(timeInterval)
 
+declare var window: any
+
 interface Props {
   autoExpandLimit: number
   didSelectNode?: (node: q.TreeNode) => void
@@ -44,22 +43,26 @@ class Tree extends React.Component<Props, TreeState> {
     return time
   }
 
+  private performanceCallback = (ms: number) => {
+    average.push(Date.now(), ms)
+  }
+
   public throttledStateUpdate(state: any) {
     if (this.updateTimer) {
       return
     }
 
     const expectedRenderTime = average.forecast()
-    const updateInterval = Math.max(expectedRenderTime * 20, 300)
+    const updateInterval = Math.max(expectedRenderTime * 7, 300)
     const timeUntilNextUpdate = updateInterval - (performance.now() - this.lastUpdate)
 
     this.updateTimer = setTimeout(() => {
-      window.requestAnimationFrame(() => {
+      window.requestIdleCallback(() => {
         this.lastUpdate = performance.now()
         this.updateTimer && clearTimeout(this.updateTimer)
         this.updateTimer = undefined
         this.setState(state)
-      })
+      }, { timeout: 500 })
     }, Math.max(0, timeUntilNextUpdate))
   }
 
@@ -104,10 +107,6 @@ class Tree extends React.Component<Props, TreeState> {
       cursor: 'default',
     }
 
-    const performanceCallback = (ms: number) => {
-      average.push(Date.now(), ms)
-    }
-
     return (
       <div style={style}>
         <TreeNode
@@ -120,6 +119,7 @@ class Tree extends React.Component<Props, TreeState> {
           collapsed={false}
           key="rootNode"
           lastUpdate={this.state.tree.lastUpdate}
+          performanceCallback={this.performanceCallback}
         />
       </div>
     )