Fix updating tree nodes when settings change

app/src/components/App.tsx

@@ -131,10 +131,10 @@ const mapDispatchToProps = (dispatch: any) => {
 
 const mapStateToProps = (state: AppState) => {
   return {
-    settingsVisible: state.settings.visible,
+    settingsVisible: state.settings.get('visible'),
     connectionId: state.connection.connectionId,
     error: state.globalState.error,
-    highlightTopicUpdates: state.settings.highlightTopicUpdates,
+    highlightTopicUpdates: state.settings.get('highlightTopicUpdates'),
     launching: state.globalState.launching,
   }
 }

app/src/components/Layout/TitleBar.tsx

@@ -142,7 +142,7 @@ class TitleBar extends React.Component<Props, {}> {
 
 const mapStateToProps = (state: AppState) => {
   return {
-    topicFilter: state.settings.topicFilter,
+    topicFilter: state.settings.get('topicFilter'),
   }
 }
 

app/src/components/SettingsDrawer/Settings.tsx

@@ -236,12 +236,12 @@ class Settings extends React.Component<Props, {}> {
 
 const mapStateToProps = (state: AppState) => {
   return {
-    autoExpandLimit: state.settings.autoExpandLimit,
-    topicOrder: state.settings.topicOrder,
-    visible: state.settings.visible,
-    highlightTopicUpdates: state.settings.highlightTopicUpdates,
-    selectTopicWithMouseOver: state.settings.selectTopicWithMouseOver,
-    theme: state.settings.theme,
+    autoExpandLimit: state.settings.get('autoExpandLimit'),
+    topicOrder: state.settings.get('topicOrder'),
+    visible: state.settings.get('visible'),
+    highlightTopicUpdates: state.settings.get('highlightTopicUpdates'),
+    selectTopicWithMouseOver: state.settings.get('selectTopicWithMouseOver'),
+    theme: state.settings.get('theme'),
   }
 }
 

app/src/components/Sidebar/ValueRenderer/ValuePanel.tsx

@@ -163,7 +163,7 @@ const mapDispatchToProps = (dispatch: any) => {
 
 const mapStateToProps = (state: AppState) => {
   return {
-    valueRendererDisplayMode: state.settings.valueRendererDisplayMode,
+    valueRendererDisplayMode: state.settings.get('valueRendererDisplayMode'),
     node: state.tree.selectedTopic,
   }
 }

app/src/components/Sidebar/ValueRenderer/ValueRenderer.tsx

@@ -105,7 +105,7 @@ class ValueRenderer extends React.Component<Props, State> {
 
 const mapStateToProps = (state: AppState) => {
   return {
-    renderMode: state.settings.valueRendererDisplayMode,
+    renderMode: state.settings.get('valueRendererDisplayMode'),
   }
 }
 

app/src/components/Tree/Tree.tsx

@@ -4,7 +4,8 @@ import TreeNode from './TreeNode'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import { TopicOrder } from '../../reducers/Settings'
+import { Record } from 'immutable'
+import { SettingsState } from '../../reducers/Settings'
 import { TopicViewModel } from '../../model/TopicViewModel'
 import { treeActions } from '../../actions'
 
@@ -21,11 +22,8 @@ interface Props {
   tree?: q.Tree<TopicViewModel>
   filter: string
   host?: string
-  topicOrder: TopicOrder
-  autoExpandLimit: number
-  highlightTopicUpdates: boolean
-  selectTopicWithMouseOver: boolean
   paused: boolean
+  settings: Record<SettingsState>
 }
 
 interface State {
@@ -109,18 +107,14 @@ class Tree extends React.PureComponent<Props, State> {
       <div style={style}>
         <TreeNode
           key={tree.hash()}
-          animateChages={true}
           isRoot={true}
           treeNode={tree}
           name={this.props.host}
           collapsed={false}
           performanceCallback={this.performanceCallback}
-          autoExpandLimit={this.props.autoExpandLimit}
-          topicOrder={this.props.topicOrder}
+          settings={this.props.settings}
           lastUpdate={tree.lastUpdate}
           didSelectTopic={this.props.actions.selectTopic}
-          highlightTopicUpdates={this.props.highlightTopicUpdates}
-          selectTopicWithMouseOver={this.props.selectTopicWithMouseOver}
         />
       </div>
     )
@@ -133,10 +127,7 @@ const mapStateToProps = (state: AppState) => {
     paused: state.tree.paused,
     filter: state.tree.filter,
     host: state.connection.host,
-    autoExpandLimit: state.settings.autoExpandLimit,
-    topicOrder: state.settings.topicOrder,
-    highlightTopicUpdates: state.settings.highlightTopicUpdates,
-    selectTopicWithMouseOver: state.settings.selectTopicWithMouseOver,
+    settings: state.settings,
   }
 }
 

app/src/components/Tree/TreeNode.tsx

@@ -2,8 +2,9 @@ import * as q from '../../../../backend/src/Model'
 import * as React from 'react'
 import TreeNodeSubnodes from './TreeNodeSubnodes'
 import TreeNodeTitle from './TreeNodeTitle'
+import { Record } from 'immutable'
+import { SettingsState } from '../../reducers/Settings'
 import { Theme, withStyles } from '@material-ui/core/styles'
-import { TopicOrder } from '../../reducers/Settings'
 import { TopicViewModel } from '../../model/TopicViewModel'
 
 const debounce = require('lodash.debounce')
@@ -41,7 +42,6 @@ const styles = (theme: Theme) => {
 }
 
 interface Props {
-  animateChages: boolean
   isRoot?: boolean
   treeNode: q.TreeNode<TopicViewModel>
   name?: string | undefined
@@ -49,13 +49,10 @@ interface Props {
   performanceCallback?: ((ms: number) => void) | undefined
   classes: any
   className?: string
-  topicOrder: TopicOrder
-  autoExpandLimit: number
   lastUpdate: number
   didSelectTopic: any
-  highlightTopicUpdates: boolean
-  selectTopicWithMouseOver: boolean
   theme: Theme
+  settings: Record<SettingsState>
 }
 
 interface State {
@@ -127,10 +124,6 @@ class TreeNode extends React.Component<Props, State> {
       || this.state.selected !== newState.selected
   }
 
-  private propsHasChanged(newProps: Props) {
-    return this.props.autoExpandLimit !== newProps.autoExpandLimit
-  }
-
   private toggle() {
     this.setState({ collapsedOverride: !this.collapsed() })
   }
@@ -140,7 +133,7 @@ class TreeNode extends React.Component<Props, State> {
       return this.state.collapsedOverride
     }
 
-    return this.props.treeNode.edgeCount() > this.props.autoExpandLimit
+    return this.props.treeNode.edgeCount() > this.props.settings.get('autoExpandLimit')
   }
 
   private didSelectTopic = () => {
@@ -156,7 +149,7 @@ class TreeNode extends React.Component<Props, State> {
   private mouseOver = (event: React.MouseEvent) => {
     event.stopPropagation()
     this.setHover(true)
-    if (this.props.selectTopicWithMouseOver && this.props.treeNode && this.props.treeNode.message && this.props.treeNode.message.value) {
+    if (this.props.settings.get('selectTopicWithMouseOver') && this.props.treeNode && this.props.treeNode.message && this.props.treeNode.message.value) {
       this.props.didSelectTopic(this.props.treeNode)
     }
   }
@@ -178,15 +171,11 @@ class TreeNode extends React.Component<Props, State> {
 
     return (
       <TreeNodeSubnodes
-        animateChanges={this.props.animateChages}
         collapsed={this.collapsed()}
         treeNode={this.props.treeNode}
-        autoExpandLimit={this.props.autoExpandLimit}
-        topicOrder={this.props.topicOrder}
         lastUpdate={this.props.treeNode.lastUpdate}
         didSelectTopic={this.props.didSelectTopic}
-        highlightTopicUpdates={this.props.highlightTopicUpdates}
-        selectTopicWithMouseOver={this.props.selectTopicWithMouseOver}
+        settings={this.props.settings}
       />
     )
   }
@@ -212,7 +201,7 @@ class TreeNode extends React.Component<Props, State> {
   public shouldComponentUpdate(nextProps: Props, nextState: State) {
     const shouldRenderToRemoveCssAnimation = this.cssAnimationWasSetAt !== undefined
     return this.stateHasChanged(nextState)
-      || this.propsHasChanged(nextProps)
+      || this.props.settings !== nextProps.settings
       || (this.dirtyEdges || this.dirtyMessage || this.dirtySubnodes)
       || this.animationDirty
       || shouldRenderToRemoveCssAnimation
@@ -236,7 +225,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 && this.props.highlightTopicUpdates
+    const shouldStartAnimation = (isDirty && !this.animationDirty) && !this.props.isRoot && this.props.settings.get('highlightTopicUpdates')
     const animationName = this.props.theme.palette.type === 'light' ? 'updateLight' : 'updateDark'
     const animation = shouldStartAnimation ? { willChange: 'auto', translateZ: 0, animation: `${animationName} 0.5s` } : {}
     this.animationDirty = shouldStartAnimation

app/src/components/Tree/TreeNodeSubnodes.tsx

@@ -1,24 +1,20 @@
-import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
-
+import * as React from 'react'
 import TreeNode from './TreeNode'
-import { TopicOrder } from '../../reducers/Settings'
+import { Record } from 'immutable'
+import { SettingsState, TopicOrder } from '../../reducers/Settings'
 import { Theme, withStyles } from '@material-ui/core'
 import { TopicViewModel } from '../../model/TopicViewModel'
 
 export interface Props {
-  animateChanges: boolean
   treeNode: q.TreeNode<TopicViewModel>
   filter?: string
   collapsed?: boolean | undefined
   classes: any
   lastUpdate: number
-  topicOrder: TopicOrder
   selectedTopic?: q.TreeNode<TopicViewModel>
-  autoExpandLimit: number
   didSelectTopic: any
-  highlightTopicUpdates: boolean
-  selectTopicWithMouseOver: boolean
+  settings: Record<SettingsState>
 }
 
 interface State {
@@ -33,7 +29,8 @@ class TreeNodeSubnodes extends React.Component<Props, State> {
   }
 
   private sortedNodes(): Array<q.TreeNode<TopicViewModel>> {
-    const { topicOrder, treeNode } = this.props
+    const { settings, treeNode } = this.props
+    const topicOrder = settings.get('topicOrder')
 
     let edges = treeNode.edgeArray
     if (topicOrder === TopicOrder.abc) {
@@ -76,15 +73,11 @@ class TreeNodeSubnodes extends React.Component<Props, State> {
       return (
         <TreeNode
           key={`${node.hash()}-${this.props.filter}`}
-          animateChages={this.props.animateChanges}
           treeNode={node}
           className={this.props.classes.listItem}
-          topicOrder={this.props.topicOrder}
-          autoExpandLimit={this.props.autoExpandLimit}
           lastUpdate={node.lastUpdate}
           didSelectTopic={this.props.didSelectTopic}
-          highlightTopicUpdates={this.props.highlightTopicUpdates}
-          selectTopicWithMouseOver={this.props.selectTopicWithMouseOver}
+          settings={this.props.settings}
         />
       )
     })