Screw up looks, greatly improve performance

app/src/components/Sidebar/NodeStats.tsx

@@ -25,15 +25,12 @@ class NodeStats extends React.Component<Props, State> {
   }
 
   public render() {
-    const leafes = this.props.node.leafes()
-    const leafMessages = leafes
-      .map(leaf => leaf.messages)
-      .reduce((a, b) => a + b)
+    const { node } = this.props
 
     return <div>
-      <Typography>Messages: #{this.props.node.messages}</Typography>
-      <Typography>Subtopics: {leafes.length}</Typography>
-      <Typography>Messages Subtopics: #{leafMessages}</Typography>
+      <Typography>Messages: #{node.messages}</Typography>
+      <Typography>Subtopics: {node.leafCount()}</Typography>
+      <Typography>Messages Subtopics: #{node.leafMessageCount()}</Typography>
     </div>
   }
 }

app/src/components/Sidebar/Topic.tsx

@@ -2,6 +2,7 @@ import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
 import { withStyles, Theme, StyleRulesCallback } from '@material-ui/core/styles'
 import Button from '@material-ui/core/Button'
+const copy = require('copy-text-to-clipboard')
 
 interface Props {
   classes: any
@@ -50,7 +51,10 @@ class Topic extends React.Component<Props, {}> {
       prev.concat([<span key={key += 1}>/</span>]).concat(current),
     )
 
-    return <span style={{ lineHeight: '2.2em' }}>{joinedBreadCrumps}</span>
+    return <span style={{ lineHeight: '2.2em' }}>
+      <a onClick={() => copy(this.props.node && this.props.node.path())}>📋</a>
+      {joinedBreadCrumps}
+    </span>
   }
 }
 

app/src/components/Tree/Tree.tsx

@@ -1,11 +1,16 @@
 import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
 import TreeNode from './TreeNode'
-import List from '@material-ui/core/List'
+import { Typography } from '@material-ui/core'
 import { makeConnectionMessageEvent, rendererEvents } from '../../../../events'
 import {  } from '../../../../events/Events'
+const MovingAvaerage = require('moving-average')
+
 declare const performance: any
 
+const timeInterval = 10 * 1000
+const average = MovingAvaerage(timeInterval)
+
 interface Props{
   didSelectNode?: (node: q.TreeNode) => void
   connectionId?: string
@@ -20,7 +25,7 @@ export class Tree extends React.Component<Props, TreeState> {
   private renderDuration: number = 300
   private updateTimer?: any
   private lastUpdate: number = 0
-  private perf:number = 0
+  private perf: number = 0
 
   constructor(props: any) {
     super(props)
@@ -40,7 +45,8 @@ export class Tree extends React.Component<Props, TreeState> {
       return
     }
 
-    const updateInterval = Math.max(this.renderDuration * 5, 300)
+    const expectedRenderTime = average.forecast()
+    const updateInterval = Math.max(expectedRenderTime * 5, 300)
     const timeUntilNextUpdate = updateInterval - (performance.now() - this.lastUpdate)
 
     this.updateTimer = setTimeout(() => {
@@ -85,21 +91,20 @@ export class Tree extends React.Component<Props, TreeState> {
   }
 
   public render() {
-    return <div>
-      <List>
+    return <Typography>
         <TreeNode
           animateChages={true}
-          autoExpandLimit={0}
+          autoExpandLimit={3000}
           isRoot={true}
           didSelectNode={this.props.didSelectNode}
           treeNode={this.state.tree}
           name="/" collapsed={false}
           key="rootNode"
           performanceCallback={(ms: number) => {
+            average.push(Date.now(), ms)
             this.renderDuration = ms
           }}
         />
-      </List>
-    </div>
+    </Typography>
   }
 }

app/src/components/Tree/TreeNode.tsx

@@ -138,9 +138,10 @@ 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} onClick={() => this.toggle()}>
+    return <div key={this.props.treeNode.hash()} style={ { display: 'block', marginLeft: '10px' } }>
+      <span ref={this.titleRef} style={animationStyle}>
         <TreeNodeTitle
+          onClick={() => this.toggle()}
           edgeCount={this.state.edgeCount}
           collapsed={this.collapsed()}
           treeNode={this.props.treeNode}
@@ -148,19 +149,11 @@ class TreeNode extends React.Component<TreeNodeProps, TreeNodeState> {
           didSelectNode={this.props.didSelectNode}
           toggleCollapsed={() => this.toggle()}
         />
-      </div>
-
-      { this.clear() }
-      <div style = { displayBlock }>
-        {this.renderNodes()}
-      </div>
+      </span>
+      { this.renderNodes() }
     </div>
   }
 
-  private clear() {
-    return <div style={{ clear: 'both' }} />
-  }
-
   private renderNodes() {
     return <TreeNodeSubnodes
       animateChanges={this.props.animateChages}
@@ -172,7 +165,7 @@ class TreeNode extends React.Component<TreeNodeProps, TreeNodeState> {
     />
   }
 
-  private indicatingChangeAnimationStyle() {
+  private indicatingChangeAnimationStyle(): React.CSSProperties {
     if (this.props.isRoot) {
       return {}
     }
@@ -188,6 +181,8 @@ class TreeNode extends React.Component<TreeNodeProps, TreeNodeState> {
       }
       return { animation: 'example 0.5s' }
     }
+
+    return {}
   }
 }
 

app/src/components/Tree/TreeNodeSubnodes.tsx

@@ -29,10 +29,9 @@ class TreeNodeSubnodes extends React.Component<Props, {}> {
       const listItems = edges
         .map(edge => edge.target)
         .map(node => (
-          <ListItem
+          <div
             key={node.hash()}
             style={listItemStyle}
-            button
           >
             <TreeNode
               animateChages={this.props.animateChanges}
@@ -40,12 +39,14 @@ class TreeNodeSubnodes extends React.Component<Props, {}> {
               didSelectNode={this.props.didSelectNode}
               autoExpandLimit={this.props.autoExpandLimit}
             />
-          </ListItem>
+          </div>
         ))
 
-      return <Collapse in={!this.props.collapsed} timeout="auto" unmountOnExit>
-        <List style={listStyle}>{listItems}</List>
-      </Collapse>
+      return <span
+        style={{ display: 'block', clear: 'both' }}
+      >
+        {this.props.collapsed ? null : listItems}
+      </span>
     }
 
     return null

app/src/components/Tree/TreeNodeTitle.tsx

@@ -3,8 +3,9 @@ import * as q from '../../../../backend/src/Model'
 import { Typography } from '@material-ui/core'
 import { withTheme, Theme } from '@material-ui/core/styles'
 
-export interface TreeNodeProps {
+export interface TreeNodeProps extends React.HTMLAttributes<HTMLElement> {
   treeNode: q.TreeNode
+  // ref: React.Ref<HTMLElement>
   name?: string | undefined
   collapsed?: boolean | undefined
   toggleCollapsed: () => void
@@ -31,9 +32,14 @@ class TreeNodeTitle extends React.Component<TreeNodeProps, {}> {
       lineHeight: '1em',
       whiteSpace: 'nowrap',
     }
-    return <Typography style={style}>
+    return <span
+      style={style}
+      onClick={() => {
+        this.toggle()
+        this.props.didSelectNode && this.props.didSelectNode(this.props.treeNode)
+      }}>
       {this.renderExpander()} {this.renderSourceEdge()} {this.renderCollapsedSubnodes()} {this.renderValue()}
-    </Typography>
+    </span>
   }
 
   private renderSourceEdge() {
@@ -44,10 +50,7 @@ class TreeNodeTitle extends React.Component<TreeNodeProps, {}> {
     }
     const name = this.props.name || (this.props.treeNode.sourceEdge && this.props.treeNode.sourceEdge.name)
 
-    return <span style={style} onClick={() => {
-      this.toggle()
-      this.props.didSelectNode && this.props.didSelectNode(this.props.treeNode)
-    }}>{name}</span>
+    return <span style={style}>{name}</span>
   }
 
   private renderValue() {
@@ -77,9 +80,7 @@ class TreeNodeTitle extends React.Component<TreeNodeProps, {}> {
       return null
     }
 
-    return this.props.collapsed
-      ? <span onClick={() => this.toggle()}>▶</span>
-      : <span onClick={() => this.toggle()}>▼</span>
+    return this.props.collapsed ? '▶' : '▼'
   }
 
   private renderCollapsedSubnodes() {
@@ -87,8 +88,8 @@ class TreeNodeTitle extends React.Component<TreeNodeProps, {}> {
       return null
     }
 
-    const messages = this.props.treeNode.leafes().map(leaf => leaf.messages).reduce((a, b) => a + b)
-    return <span style={this.getStyles().collapsedSubnodes}>({this.props.treeNode.leafes().length} nodes, {messages} messages)</span>
+    const messages = this.props.treeNode.leafMessageCount()
+    return <span style={this.getStyles().collapsedSubnodes}>({this.props.treeNode.leafCount()} nodes, {messages} messages)</span>
   }
 }