Add topic filter

app/src/components/Settings.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react'
-import * as q from '../../../backend/src/Model'
 
 import { AppState } from '../reducers'
 import {
@@ -19,6 +18,7 @@ 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: {
@@ -40,7 +40,7 @@ const styles: StyleRulesCallback = theme => ({
 })
 
 interface Props {
-  actions?: any
+  actions: typeof settingsActions
   autoExpandLimit: number
   visible: boolean
   store?: any
@@ -107,7 +107,7 @@ class Settings extends React.Component<Props, {}> {
   }
 
   private onChangeAutoExpand = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    this.props.actions.setAutoExpandLimit(e.target.value)
+    this.props.actions.setAutoExpandLimit(parseInt(e.target.value, 10))
   }
 
   private renderNodeOrder() {
@@ -133,7 +133,7 @@ class Settings extends React.Component<Props, {}> {
   }
 
   private onChangeSorting = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    this.props.actions.setNodeOrder(e.target.value)
+    this.props.actions.setTopicOrder(e.target.value as TopicOrder)
   }
 }
 

app/src/components/Sidebar/Sidebar.tsx

@@ -84,6 +84,10 @@ class Sidebar extends React.Component<Props, State> {
     }
   }
 
+  public componentWillUnmount() {
+    this.props.node && this.removeUpdateListener(this.props.node)
+  }
+
   private registerUpdateListener(node: q.TreeNode) {
     node.onMerge.subscribe(this.updateNode)
     node.onMessage.subscribe(this.updateNode)
@@ -215,7 +219,7 @@ class Sidebar extends React.Component<Props, State> {
 
 const mapStateToProps = (state: AppState) => {
   return {
-    node: state.tooBigReducer.selectedTopic,
+    node: state.tree.selectedTopic,
   }
 }
 

app/src/components/Tree/Tree.tsx

@@ -19,6 +19,7 @@ interface Props {
   didSelectNode?: (node: q.TreeNode) => void
   connectionId?: string
   tree?: q.Tree
+  filter: string
 }
 
 class Tree extends React.Component<Props, {}> {
@@ -46,9 +47,14 @@ class Tree extends React.Component<Props, {}> {
       if (nextProps.tree) {
         nextProps.tree.onMerge.subscribe(this.throttledTreeUpdate)
       }
+      this.setState(this.state)
     }
   }
 
+  public componentWillUnmount() {
+    this.props.tree && this.props.tree.onMerge.unsubscribe(this.throttledTreeUpdate)
+  }
+
   public throttledTreeUpdate = () => {
     if (this.updateTimer) {
       return
@@ -68,15 +74,9 @@ class Tree extends React.Component<Props, {}> {
     }, Math.max(0, timeUntilNextUpdate))
   }
 
-  public componentWillUnmount() {
-    if (this.props.connectionId) {
-      const event = makeConnectionMessageEvent(this.props.connectionId)
-      rendererEvents.unsubscribeAll(event)
-    }
-  }
-
   public render() {
-    if (!this.props.tree) {
+    const { tree, filter } = this.props
+    if (!tree) {
       return null
     }
 
@@ -84,17 +84,17 @@ class Tree extends React.Component<Props, {}> {
       lineHeight: '1.1',
       cursor: 'default',
     }
-
+    const key = `rootNode-${filter}`
     return (
       <div style={style}>
         <TreeNode
+          key={key}
           animateChages={true}
           isRoot={true}
-          treeNode={this.props.tree}
+          treeNode={tree}
           name="/"
+          lastUpdate={tree.lastUpdate}
           collapsed={false}
-          key="rootNode"
-          lastUpdate={this.props.tree.lastUpdate}
           performanceCallback={this.performanceCallback}
         />
       </div>
@@ -109,7 +109,8 @@ class Tree extends React.Component<Props, {}> {
 const mapStateToProps = (state: AppState) => {
   return {
     autoExpandLimit: state.settings.autoExpandLimit,
-    tree: state.connection.tree,
+    tree: state.tree.tree,
+    filter: state.tree.filter,
   }
 }
 

app/src/components/Tree/TreeNodeSubnodes.tsx

@@ -19,7 +19,17 @@ export interface Props {
   theme: Theme
 }
 
-class TreeNodeSubnodes extends React.Component<Props, {}> {
+interface State {
+  alreadyAdded: number
+}
+
+class TreeNodeSubnodes extends React.Component<Props, State> {
+  private renderMoreAnimationFrame?: any
+  constructor(props: Props) {
+    super(props)
+    this.state = { alreadyAdded: 10 }
+  }
+
   private sortedNodes(): q.TreeNode[] {
     const { topicOrder, treeNode } = this.props
 
@@ -39,17 +49,32 @@ class TreeNodeSubnodes extends React.Component<Props, {}> {
     return nodes
   }
 
+  private renderMore() {
+    this.renderMoreAnimationFrame = window.requestAnimationFrame(() => {
+      this.setState({ ...this.state, alreadyAdded: this.state.alreadyAdded * 1.5 })
+    })
+  }
+
+  public componentWillUnmount() {
+    window.cancelAnimationFrame(this.renderMoreAnimationFrame)
+  }
+
   public render() {
     const edges = Object.values(this.props.treeNode.edges)
     if (edges.length === 0 || this.props.collapsed) {
       return null
     }
 
+    if (this.state.alreadyAdded < edges.length) {
+      const delta = Math.min(this.state.alreadyAdded, edges.length - this.state.alreadyAdded)
+      this.renderMore()
+    }
+
     const listItemStyle = {
       padding: '3px 0px 0px 8px',
     }
 
-    const nodes = this.sortedNodes()
+    const nodes = this.sortedNodes().slice(0, this.state.alreadyAdded)
     const listItems = nodes.map(node => (
         <div key={node.hash()}>
           <TreeNode