Add "Show Activity" switch

app/src/components/Settings.tsx

@@ -10,6 +10,7 @@ import {
   MenuItem,
   Select,
   Typography,
+  Switch,
 } from '@material-ui/core'
 import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
 
@@ -58,6 +59,7 @@ const styles: StyleRulesCallback = theme => ({
 
 interface Props {
   autoExpandLimit: number
+  highlightTopicUpdates: boolean
   visible: boolean
   store?: any
   topicOrder: TopicOrder
@@ -96,12 +98,29 @@ class Settings extends React.Component<Props, {}> {
 
           {this.renderAutoExpand()}
           {this.renderNodeOrder()}
+          {this.renderhighlightTopicUpdates()}
         </div>
         <BrokerStatistics />
       </Drawer>
     )
   }
 
+  private renderhighlightTopicUpdates() {
+    const { highlightTopicUpdates, actions } = this.props
+
+    return (
+      <div style={{ padding: '8px', display: 'flex' }}>
+        <InputLabel htmlFor="toggle-highlight-activity" style={{ flex: '1', marginTop: '8px' }}>Show Activity</InputLabel>
+        <Switch
+          name="toggle-highlight-activity"
+          checked={highlightTopicUpdates}
+          onChange={actions.togglehighlightTopicUpdates}
+          color="primary"
+        />
+      </div>
+    )
+  }
+
   private renderAutoExpand() {
     const { classes, autoExpandLimit } = this.props
 
@@ -132,7 +151,7 @@ class Settings extends React.Component<Props, {}> {
 
     return (
       <div style={{ padding: '8px', display: 'flex' }}>
-        <InputLabel htmlFor="auto-expand" style={{ flex: '1', marginTop: '8px' }}>Topic order</InputLabel>
+        <InputLabel htmlFor="auto-expand" style={{ flex: '1', marginTop: '8px' }}>Topic Order</InputLabel>
         <Select
           value={topicOrder}
           onChange={this.onChangeSorting}
@@ -160,6 +179,7 @@ const mapStateToProps = (state: AppState) => {
     autoExpandLimit: state.settings.autoExpandLimit,
     topicOrder: state.settings.topicOrder,
     visible: state.settings.visible,
+    highlightTopicUpdates: state.settings.highlightTopicUpdates,
   }
 }
 

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}
         />
       )
     })