Refactor TreeNode

app/src/components/ChartPanel/TopicChart.tsx

@@ -44,6 +44,7 @@ function useMessageSubscriptionToUpdate(treeNode?: q.TreeNode<any>) {
 
     return function cleanup() {
       treeNode && treeNode.onMessage.unsubscribe(amendMessageCallback)
+      setMessageHistory(undefined)
     }
   }
   React.useEffect(subscribeToMessageUpdates, [treeNode])

app/src/components/SettingsDrawer/BrokerStatistics.tsx

@@ -90,7 +90,7 @@ function BrokerStatistics(props: Props) {
         {renderPair(tree, stats.heap, stats.heapMax)}
       </div>
     )
-  }, [sysTopic && sysTopic.lastUpdate])
+  }, [sysTopic && sysTopic.lastUpdate, props.classes])
 }
 
 const mapStateToProps = (state: AppState) => {

app/src/components/Tree/TreeNode/TreeNodeTitle.tsx

@@ -64,11 +64,11 @@ class TreeNodeTitle extends React.PureComponent<TreeNodeProps, {}> {
     }
 
     const messages = this.props.treeNode.leafMessageCount()
+    const topicCount = this.props.treeNode.childTopicCount()
     return (
-      <span
-        key="metadata"
-        className={this.props.classes.collapsedSubnodes}
-      >{`(${this.props.treeNode.childTopicCount()} topics, ${messages} messages)`}</span>
+      <span key="metadata" className={this.props.classes.collapsedSubnodes}>{` (${topicCount} ${
+        topicCount === 1 ? 'topic' : 'topics'
+      }, ${messages} ${messages === 1 ? 'message' : 'messages'})`}</span>
     )
   }