Clean up & Add connection setup

app/src/components/Tree/Tree.tsx

@@ -1,25 +1,22 @@
 import * as React from 'react'
-import * as io from 'socket.io-client'
 import * as q from '../../../../backend/src/Model'
 import TreeNode from './TreeNode'
 import List from '@material-ui/core/List'
-
-class TreeState {
-  public tree: q.Tree
-  public msg: any
-  constructor(tree: q.Tree, msg: any) {
-    this.tree = tree
-    this.msg = msg
-  }
-}
-
-export interface TreeNodeProps {
-  didSelectNode?: (node: q.TreeNode) => void
-}
+import { makeConnectionMessageEvent, rendererEvents } from '../../../../events'
+import {  } from '../../../../events/Events'
 declare const performance: any
 
-export class Tree extends React.Component<TreeNodeProps, TreeState> {
-  private socket: SocketIOClient.Socket
+interface Props{
+  didSelectNode?: (node: q.TreeNode) => void
+  connectionId?: string
+}
+
+interface TreeState {
+  tree: q.Tree
+  msg: any
+}
+
+export class Tree extends React.Component<Props, TreeState> {
   private renderDuration: number = 300
   private updateTimer?: any
   private lastUpdate: number = 0
@@ -28,8 +25,7 @@ export class Tree extends React.Component<TreeNodeProps, TreeState> {
   constructor(props: any) {
     super(props)
     const tree = new q.Tree()
-    this.state = new TreeState(tree, {})
-    this.socket = io('http://localhost:3000')
+    this.state = { tree, msg: {} }
   }
 
   public time(): number {
@@ -55,18 +51,37 @@ export class Tree extends React.Component<TreeNodeProps, TreeState> {
     }, Math.max(0, timeUntilNextUpdate))
   }
 
-  public componentDidMount() {
-    this.socket.on('message', (msg: any) => {
-      const edges = msg.topic.split('/')
-      const node = q.TreeNodeFactory.fromEdgesAndValue(edges, Buffer.from(msg.payload, 'base64').toString())
-      this.state.tree.updateWithNode(node.firstNode())
+  public componentWillReceiveProps(nextProps: Props) {
+    if (this.props.connectionId) {
+      const event = makeConnectionMessageEvent(this.props.connectionId)
+      rendererEvents.unsubscribeAll(event)
+    }
+    if (nextProps.connectionId) {
+      const event = makeConnectionMessageEvent(nextProps.connectionId)
+      rendererEvents.subscribe(event, this.handleNewData)
+    }
+  }
 
-      this.throttledStateUpdate({ msg, tree: this.state.tree })
-    })
+  public componentDidMount() {
+    if (this.props.connectionId) {
+      const event = makeConnectionMessageEvent(this.props.connectionId)
+      rendererEvents.subscribe(event, this.handleNewData)
+    }
   }
 
   public componentWillUnmount() {
-    this.socket.removeAllListeners()
+    if (this.props.connectionId) {
+      const event = makeConnectionMessageEvent(this.props.connectionId)
+      rendererEvents.unsubscribeAll(event)
+    }
+  }
+
+  private handleNewData = (msg: any) => {
+    const edges = msg.topic.split('/')
+    const node = q.TreeNodeFactory.fromEdgesAndValue(edges, Buffer.from(msg.payload, 'base64').toString())
+    this.state.tree.updateWithNode(node.firstNode())
+
+    this.throttledStateUpdate({ msg, tree: this.state.tree })
   }
 
   public render() {
@@ -74,7 +89,7 @@ export class Tree extends React.Component<TreeNodeProps, TreeState> {
       <List>
         <TreeNode
           animateChages={true}
-          autoExpandLimit={3}
+          autoExpandLimit={0}
           isRoot={true}
           didSelectNode={this.props.didSelectNode}
           treeNode={this.state.tree}

app/src/components/Tree/TreeNode.tsx

@@ -1,13 +1,11 @@
 import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
 import { withTheme, Theme } from '@material-ui/core/styles'
-const throttle = require('lodash.throttle')
 import { isElementInViewport } from '../helper/isElementInViewport'
 import TreeNodeTitle from './TreeNodeTitle'
 import TreeNodeSubnodes from './TreeNodeSubnodes'
 
 declare var performance: any
-declare var window: any
 
 export interface TreeNodeProps {
   animateChages: boolean
@@ -37,7 +35,7 @@ class TreeNode extends React.Component<TreeNodeProps, TreeNodeState> {
   private cssAnimationWasSetAt?: number
 
   private willUpdateTime: number = performance.now()
-  private titleRef = React.createRef<HTMLElement>()
+  private titleRef = React.createRef<HTMLDivElement>()
 
   private subnodesDidchange = () => {
     this.dirtySubnodes = true
@@ -139,7 +137,7 @@ class TreeNode extends React.Component<TreeNodeProps, TreeNodeState> {
     this.dirtyState = this.dirtyEdges = this.dirtyMessage = this.dirtySubnodes = false
 
     return <div key={this.props.treeNode.hash()} style={ displayBlock }>
-      <div style={animationStyle} ref={this.titleRef}>
+      <div style={animationStyle} ref={this.titleRef} onClick={() => this.toggle()}>
         <TreeNodeTitle
           edgeCount={this.state.edgeCount}
           collapsed={this.collapsed()}

app/src/components/Tree/TreeNodeSubnodes.tsx

@@ -29,7 +29,11 @@ class TreeNodeSubnodes extends React.Component<Props, {}> {
       const listItems = edges
         .map(edge => edge.target)
         .map(node => (
-          <ListItem key={node.hash()} style={listItemStyle} button>
+          <ListItem
+            key={node.hash()}
+            style={listItemStyle}
+            button
+          >
             <TreeNode
               animateChages={this.props.animateChanges}
               treeNode={node}