Add "Show Activity" switch

app/src/App.tsx

@@ -94,6 +94,7 @@ const mapStateToProps = (state: AppState) => {
     settingsVisible: state.settings.visible,
     connectionId: state.connection.connectionId,
     error: state.globalState.error,
+    highlightTopicUpdates: state.settings.highlightTopicUpdates,
   }
 }
 

app/src/actions/Settings.ts

@@ -21,6 +21,12 @@ export const toggleSettingsVisibility = (): Action => {
   }
 }
 
+export const togglehighlightTopicUpdates = (): Action => {
+  return {
+    type: ActionTypes.SETTINGS_TOGGLE_HIGHLIGHT_ACTIVITY,
+  }
+}
+
 export const setTopicOrder = (topicOrder: TopicOrder = TopicOrder.none): Action => {
   return {
     topicOrder,

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

app/src/reducers/Settings.ts

@@ -13,20 +13,23 @@ export interface SettingsState {
   visible: boolean
   topicOrder: TopicOrder
   topicFilter?: string
+  highlightTopicUpdates: boolean
 }
-export type Action = SetAutoExpandLimit | ToggleVisibility | SetTopicOrder | FilterTopics
+export type Action = SetAutoExpandLimit | ToggleVisibility | SetTopicOrder | FilterTopics | TogglehighlightTopicUpdates
 
 export enum ActionTypes {
   SETTINGS_SET_AUTO_EXPAND_LIMIT = 'SETTINGS_SET_AUTO_EXPAND_LIMIT',
   SETTINGS_TOGGLE_VISIBILITY = 'SETTINGS_TOGGLE_VISIBILITY',
   SETTINGS_SET_TOPIC_ORDER = 'SETTINGS_SET_TOPIC_ORDER',
   SETTINGS_FILTER_TOPICS = 'SETTINGS_FILTER_TOPICS',
+  SETTINGS_TOGGLE_HIGHLIGHT_ACTIVITY = 'SETTINGS_TOGGLE_HIGHLIGHT_ACTIVITY',
 }
 
 const initialState: SettingsState = {
   autoExpandLimit: 0,
   topicOrder: TopicOrder.none,
   visible: false,
+  highlightTopicUpdates: true,
 }
 
 export const settingsReducer = createReducer(initialState, {
@@ -34,8 +37,14 @@ export const settingsReducer = createReducer(initialState, {
   SETTINGS_TOGGLE_VISIBILITY: toggleVisibility,
   SETTINGS_SET_TOPIC_ORDER: setTopicOrder,
   SETTINGS_FILTER_TOPICS: filterTopics,
+  SETTINGS_TOGGLE_HIGHLIGHT_ACTIVITY: togglehighlightTopicUpdates,
 })
 
+export interface SetAutoExpandLimit {
+  type: ActionTypes.SETTINGS_SET_AUTO_EXPAND_LIMIT
+  autoExpandLimit: number
+}
+
 function setAutoExpandLimit(state: SettingsState, action: SetAutoExpandLimit) {
   return {
     ...state,
@@ -43,9 +52,19 @@ function setAutoExpandLimit(state: SettingsState, action: SetAutoExpandLimit) {
   }
 }
 
-export interface SetAutoExpandLimit {
+export interface TogglehighlightTopicUpdates {
-  type: ActionTypes.SETTINGS_SET_AUTO_EXPAND_LIMIT
+  type: ActionTypes.SETTINGS_TOGGLE_HIGHLIGHT_ACTIVITY
-  autoExpandLimit: number
+}
+
+function togglehighlightTopicUpdates(state: SettingsState, _action: TogglehighlightTopicUpdates) {
+  return {
+    ...state,
+    highlightTopicUpdates: !state.highlightTopicUpdates,
+  }
+}
+
+export interface ToggleVisibility {
+  type: ActionTypes.SETTINGS_TOGGLE_VISIBILITY
 }
 
 function toggleVisibility(state: SettingsState, action: ToggleVisibility) {
@@ -55,10 +74,6 @@ function toggleVisibility(state: SettingsState, action: ToggleVisibility) {
   }
 }
 
-export interface ToggleVisibility {
-  type: ActionTypes.SETTINGS_TOGGLE_VISIBILITY
-}
-
 function setTopicOrder(state: SettingsState, action: SetTopicOrder) {
   return {
     ...state,