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