Add topic filter

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