Work in progress

app/src/components/Settings.tsx

@@ -118,9 +118,7 @@ class Settings extends React.Component<Props, {}> {
       <Select
           value={nodeOrder}
           onChange={ (e: React.ChangeEvent<HTMLSelectElement>) => {
-            window.requestAnimationFrame(() => {
-              actions.setNodeOrder(e.target.value)
-            })
+            actions.setNodeOrder(e.target.value)
           }}
           input={<Input name="node-order" id="node-order-label-placeholder" />}
           displayEmpty={true}

app/src/components/Tree/Tree.tsx

@@ -54,7 +54,6 @@ class Tree extends React.Component<Props, TreeState> {
 
     this.updateTimer = setTimeout(() => {
       window.requestAnimationFrame(() => {
-        console.log('doRender')
         this.lastUpdate = performance.now()
         this.updateTimer && clearTimeout(this.updateTimer)
         this.updateTimer = undefined
@@ -97,12 +96,19 @@ class Tree extends React.Component<Props, TreeState> {
   }
 
   public render() {
+    console.log('render called')
+
     const style: React.CSSProperties = {
       lineHeight: '1.1',
       cursor: 'default',
     }
 
-    return <Typography style={style}>
+    const performanceCallback = (ms: number) => {
+      average.push(Date.now(), ms)
+    }
+
+    return (
+      <Typography style={style}>
         <TreeNode
           animateChages={true}
           autoExpandLimit={this.props.autoExpandLimit}
@@ -112,11 +118,11 @@ class Tree extends React.Component<Props, TreeState> {
           name="/"
           collapsed={false}
           key="rootNode"
-          performanceCallback={(ms: number) => {
-            average.push(Date.now(), ms)
-          }}
+          lastUpdate={0}
+          performanceCallback={this.performanceCallback}
         />
-    </Typography>
+      </Typography>
+    )
   }
 }
 

app/src/components/Tree/TreeNode.tsx

@@ -29,6 +29,7 @@ const styles = (theme: Theme) => {
 }
 
 interface Props {
+  lastUpdate: number
   animateChages: boolean
   isRoot?: boolean
   treeNode: q.TreeNode
@@ -48,6 +49,7 @@ class TreeNode extends React.Component<Props, State> {
   private dirtySubnodes: boolean = true
   private dirtyEdges: boolean = true
   private dirtyMessage: boolean = true
+  private animationDirty: boolean = false
 
   private cssAnimationWasSetAt?: number
 
@@ -103,6 +105,7 @@ class TreeNode extends React.Component<Props, State> {
       || this.dirtyEdges
       || this.dirtyMessage
       || this.dirtySubnodes
+      || this.animationDirty
       || shouldRenderToRemoveCssAnimation
   }
 
@@ -111,6 +114,12 @@ class TreeNode extends React.Component<Props, State> {
       const renderTime = performance.now() - this.willUpdateTime
       this.props.performanceCallback(renderTime)
     }
+    // setTimeout(() => {
+    //   this.setState(this.state)
+    // }, 500)
+    // this.addCssAnimation()
+    // setTimeout(this.removeCssAnimation, 500)
+
   }
 
   public componentWillUpdate() {
@@ -131,18 +140,36 @@ class TreeNode extends React.Component<Props, State> {
     return this.props.treeNode.edgeCount() > this.props.autoExpandLimit
   }
 
+  // private addCssAnimation = () => {
+  //   const element = this.titleRef.current
+  //   if ((this.dirtyEdges || this.dirtyMessage || this.dirtySubnodes) && element && isElementInViewport(element)) {
+  //     element.style.animation = 'example 0.5s'
+  //   }
+  // }
+  //
+  // private removeCssAnimation = () => {
+  //   const element = this.titleRef.current
+  //   if (element && element.style.animation) {
+  //     element.style.animation = ''
+  //   }
+  // }
+
   public render() {
-    const animationStyle = this.indicatingChangeAnimationStyle()
     const { classes } = this.props
+    const isDirty = this.dirtyEdges || this.dirtyMessage || this.dirtySubnodes
     this.dirtyEdges = this.dirtyMessage = this.dirtySubnodes = false
 
+    const shouldStartAnimation = (isDirty && !this.animationDirty) && !this.props.isRoot
+    const animation = shouldStartAnimation ? { animation: 'example 0.5s' } : {}
+    this.animationDirty = shouldStartAnimation
+
     return (
       <div
         key={this.props.treeNode.hash()}
         className={`${classes.node} ${!this.props.isRoot ? classes.hover : ''}`}
         onClick={this.didClickNode}
       >
-        <span ref={this.titleRef} style={animationStyle}>
+        <span ref={this.titleRef} style={animation}>
           <TreeNodeTitle
             collapsed={this.collapsed()}
             treeNode={this.props.treeNode}
@@ -169,29 +196,10 @@ class TreeNode extends React.Component<Props, State> {
         autoExpandLimit={this.props.autoExpandLimit}
         didSelectNode={this.props.didSelectNode}
         treeNode={this.props.treeNode}
+        lastUpdate={this.props.treeNode.lastUpdate}
       />
     )
   }
-
-  private indicatingChangeAnimationStyle(): React.CSSProperties {
-    if (this.props.isRoot) {
-      return {}
-    }
-    if (this.cssAnimationWasSetAt && (performance.now() - this.cssAnimationWasSetAt) > 500) {
-      this.cssAnimationWasSetAt = undefined
-      return {}
-    }
-    const isInViewPort = this.titleRef.current && isElementInViewport(this.titleRef.current)
-    const isDirty = this.dirtyMessage || this.dirtyEdges
-    if (this.props.animateChages && isDirty && isInViewPort) {
-      if (!this.cssAnimationWasSetAt) {
-        this.cssAnimationWasSetAt = performance.now()
-      }
-      return { animation: 'example 0.5s' }
-    }
-
-    return {}
-  }
 }
 
 export default withStyles(styles)(TreeNode)

app/src/components/Tree/TreeNodeSubnodes.tsx

@@ -7,6 +7,7 @@ import { AppState, NodeOrder } from '../../reducers'
 import TreeNode from './TreeNode'
 
 export interface Props {
+  lastUpdate: number
   nodeOrder?: NodeOrder
   animateChanges: boolean
   treeNode: q.TreeNode
@@ -54,6 +55,7 @@ class TreeNodeSubnodes extends React.Component<Props, {}> {
             treeNode={node}
             didSelectNode={this.props.didSelectNode}
             autoExpandLimit={this.props.autoExpandLimit}
+            lastUpdate={node.lastUpdate}
           />
         </div>
       ))