Add "Show Activity" switch

app/src/components/Tree/Tree.tsx

@@ -22,9 +22,9 @@ interface Props {
   tree?: q.Tree<TopicViewModel>
   filter: string
   host?: string
-
   topicOrder: TopicOrder
   autoExpandLimit: number
+  highlightTopicUpdates: boolean
 }
 
 interface State {
@@ -111,6 +111,7 @@ class Tree extends React.PureComponent<Props, State> {
           topicOrder={this.props.topicOrder}
           lastUpdate={tree.lastUpdate}
           didSelectTopic={this.props.actions.selectTopic}
+          highlightTopicUpdates={this.props.highlightTopicUpdates}
         />
       </div>
     )
@@ -128,6 +129,7 @@ const mapStateToProps = (state: AppState) => {
     host: state.connection.host,
     autoExpandLimit: state.settings.autoExpandLimit,
     topicOrder: state.settings.topicOrder,
+    highlightTopicUpdates: state.settings.highlightTopicUpdates,
   }
 }
 

app/src/components/Tree/TreeNode.tsx

@@ -30,7 +30,7 @@ const styles = (theme: Theme) => {
       marginTop: '-1px',
     },
     selected: {
-      backgroundColor: 'rgba(200, 200, 200, 0.55)',
+      backgroundColor: 'rgba(170, 170, 170, 0.55)',
     },
     hover: {
       backgroundColor: 'rgba(100, 100, 100, 0.55)',
@@ -51,6 +51,7 @@ interface Props {
   autoExpandLimit: number
   lastUpdate: number
   didSelectTopic: any
+  highlightTopicUpdates: boolean
 }
 
 interface State {
@@ -64,12 +65,10 @@ class TreeNode extends React.Component<Props, State> {
   private dirtyEdges: boolean = true
   private dirtyMessage: boolean = true
   private animationDirty: boolean = false
-  private lastRenderTime = 0
 
   private cssAnimationWasSetAt?: number
 
   private willUpdateTime: number = performance.now()
-  private titleRef?: React.RefObject<HTMLDivElement> = React.createRef<HTMLDivElement>()
   private nodeRef?: React.RefObject<HTMLDivElement> = React.createRef<HTMLDivElement>()
 
   private subnodesDidchange = () => {
@@ -129,7 +128,6 @@ class TreeNode extends React.Component<Props, State> {
   public componentWillUnmount() {
     const { treeNode } = this.props
     this.removeSubscriber(treeNode)
-    this.titleRef = undefined
     this.nodeRef = undefined
   }
 
@@ -182,7 +180,7 @@ class TreeNode extends React.Component<Props, State> {
     const isDirty = this.dirtyEdges || this.dirtyMessage || this.dirtySubnodes
     this.dirtyEdges = this.dirtyMessage = this.dirtySubnodes = false
 
-    const shouldStartAnimation = (isDirty && !this.animationDirty) && !this.props.isRoot
+    const shouldStartAnimation = (isDirty && !this.animationDirty) && !this.props.isRoot && this.props.highlightTopicUpdates
     const animation = shouldStartAnimation ? { willChange: 'auto', translateZ: 0, animation: 'example 0.5s' } : {}
     this.animationDirty = shouldStartAnimation
 
@@ -244,6 +242,7 @@ class TreeNode extends React.Component<Props, State> {
         topicOrder={this.props.topicOrder}
         lastUpdate={this.props.treeNode.lastUpdate}
         didSelectTopic={this.props.didSelectTopic}
+        highlightTopicUpdates={this.props.highlightTopicUpdates}
       />
     )
   }

app/src/components/Tree/TreeNodeSubnodes.tsx

@@ -12,13 +12,12 @@ export interface Props {
   filter?: string
   collapsed?: boolean | undefined
   classes: any
-
   lastUpdate: number
-
   topicOrder: TopicOrder
   selectedTopic?: q.TreeNode<TopicViewModel>
   autoExpandLimit: number
   didSelectTopic: any
+  highlightTopicUpdates: boolean
 }
 
 interface State {
@@ -83,6 +82,7 @@ class TreeNodeSubnodes extends React.Component<Props, State> {
           autoExpandLimit={this.props.autoExpandLimit}
           lastUpdate={node.lastUpdate}
           didSelectTopic={this.props.didSelectTopic}
+          highlightTopicUpdates={this.props.highlightTopicUpdates}
         />
       )
     })