Make topics selectable

app/src/components/Sidebar/MessageHistory.tsx

@@ -4,12 +4,13 @@ import * as q from '../../../../backend/src/Model'
 import BarChart from '@material-ui/icons/BarChart'
 import DateFormatter from '../helper/DateFormatter'
 import History from './History'
+import { TopicViewModel } from '../../TopicViewModel'
 const PlotHistory = React.lazy(() => import('./PlotHistory'))
 
 const throttle = require('lodash.throttle')
 
 interface Props {
-  node?: q.TreeNode
+  node?: q.TreeNode<TopicViewModel>
   onSelect: (message: q.Message) => void
 }
 

app/src/components/Sidebar/NodeStats.tsx

@@ -2,9 +2,10 @@ import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
 
 import { Typography } from '@material-ui/core'
+import { TopicViewModel } from '../../TopicViewModel'
 
 interface Props {
-  node: q.TreeNode
+  node: q.TreeNode<TopicViewModel>
 }
 
 class NodeStats extends React.Component<Props, {}> {

app/src/components/Sidebar/Publish/Publish.tsx

@@ -13,7 +13,6 @@ import {
   Radio,
   RadioGroup,
   TextField,
-  IconButton,
   FormControl,
   InputLabel,
   Input,
@@ -32,10 +31,11 @@ import Clear from '@material-ui/icons/Clear'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { publishActions } from '../../../actions'
-import ClearAdornment from '../../helper/ClearAdornment';
+import ClearAdornment from '../../helper/ClearAdornment'
+import { TopicViewModel } from '../../../TopicViewModel'
 
 interface Props {
-  node?: q.TreeNode
+  node?: q.TreeNode<TopicViewModel>
   connectionId?: string
   topic?: string
   payload?: string

app/src/components/Sidebar/Sidebar.tsx

@@ -28,18 +28,19 @@ import Topic from './Topic'
 const ValueRenderer = React.lazy(() => import('./ValueRenderer'))
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
+import { TopicViewModel } from '../../TopicViewModel'
 
 const throttle = require('lodash.throttle')
 
 interface Props {
-  node?: q.TreeNode,
+  node?: q.TreeNode<TopicViewModel>,
   actions: typeof sidebarActons,
   classes: any,
   connectionId?: string,
 }
 
 interface State {
-  node: q.TreeNode,
+  node: q.TreeNode<TopicViewModel>
   compareMessage?: q.Message
 }
 
@@ -69,12 +70,12 @@ class Sidebar extends React.Component<Props, State> {
     this.props.node && this.removeUpdateListener(this.props.node)
   }
 
-  private registerUpdateListener(node: q.TreeNode) {
+  private registerUpdateListener(node: q.TreeNode<TopicViewModel>) {
     node.onMerge.subscribe(this.updateNode)
     node.onMessage.subscribe(this.updateNode)
   }
 
-  private removeUpdateListener(node: q.TreeNode) {
+  private removeUpdateListener(node: q.TreeNode<TopicViewModel>) {
     node.onMerge.unsubscribe(this.updateNode)
     node.onMessage.unsubscribe(this.updateNode)
   }

app/src/components/Sidebar/Topic.tsx

@@ -5,14 +5,15 @@ import { withStyles, Theme, StyleRulesCallback } from '@material-ui/core/styles'
 import { treeActions } from '../../actions'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
+import { TopicViewModel } from '../../TopicViewModel'
 
 interface Props {
   classes: any
   theme: Theme
-  node?: q.TreeNode
-  selected?: q.TreeNode
+  node?: q.TreeNode<TopicViewModel>
+  selected?: q.TreeNode<TopicViewModel>
   actions: typeof treeActions
-  didSelectNode: (node: q.TreeNode) => void
+  didSelectNode: (node: q.TreeNode<TopicViewModel>) => void
 }
 
 const styles: StyleRulesCallback<string> = (theme: Theme) => ({