Make topics selectable

app/src/actions/Connection.ts

@@ -6,6 +6,7 @@ import { AppState } from '../reducers'
 import * as q from '../../../backend/src/Model'
 import { showTree } from './Tree'
 import * as url from 'url'
+import { TopicViewModel } from '../TopicViewModel'
 
 export const connect = (options: MqttOptions, connectionId: string) => (dispatch: Dispatch<any>, getState: () => AppState) => {
   dispatch(connecting(connectionId))
@@ -15,7 +16,7 @@ export const connect = (options: MqttOptions, connectionId: string) => (dispatch
 
   rendererEvents.subscribe(event, (dataSourceState) => {
     if (dataSourceState.connected) {
-      const tree = new q.Tree()
+      const tree = new q.Tree<TopicViewModel>()
       tree.updateWithConnection(rendererEvents, connectionId)
       dispatch(connected(tree, host!))
       dispatch(showTree(tree))
@@ -26,7 +27,7 @@ export const connect = (options: MqttOptions, connectionId: string) => (dispatch
   })
 }
 
-export const connected: (tree: q.Tree, host: string) => Action = (tree: q.Tree, host: string)  => ({
+export const connected: (tree: q.Tree<TopicViewModel>, host: string) => Action = (tree: q.Tree<TopicViewModel>, host: string)  => ({
   tree,
   host,
   type: ActionTypes.CONNECTION_SET_CONNECTED,

app/src/actions/Settings.ts

@@ -6,6 +6,7 @@ import { AppState } from '../reducers'
 import * as q from '../../../backend/src/Model'
 import { batchActions } from 'redux-batched-actions'
 import { autoExpandLimitSet } from '../components/Settings'
+import { TopicViewModel } from '../TopicViewModel'
 
 export const setAutoExpandLimit = (autoExpandLimit: number = 0): Action => {
   return {
@@ -42,7 +43,7 @@ export const filterTopics = (filterStr: string) => (dispatch: Dispatch<any>, get
 
   const topicFilter = filterStr.toLowerCase()
 
-  const nodeFilter = (node: q.TreeNode): boolean => {
+  const nodeFilter = (node: q.TreeNode<TopicViewModel>): boolean => {
     const topicMatches = node.path().toLowerCase().indexOf(topicFilter) !== -1
     if (topicMatches) {
       return true
@@ -54,17 +55,17 @@ export const filterTopics = (filterStr: string) => (dispatch: Dispatch<any>, get
 
   const resultTree = tree.childTopics()
     .filter(nodeFilter)
-    .map((node) => {
+    .map((node: q.TreeNode<TopicViewModel>) => {
       const clone = node.unconnectedClone()
       q.TreeNodeFactory.insertNodeAtPosition(node.path().split('/'), clone)
       return clone.firstNode()
     })
-    .reduce((a: q.TreeNode, b: q.TreeNode) => {
+    .reduce((a: q.TreeNode<TopicViewModel>, b: q.TreeNode<TopicViewModel>) => {
       a.updateWithNode(b)
       return a
-    }, new q.Tree())
+    }, new q.Tree<TopicViewModel>())
 
-  const nextTree: q.Tree = resultTree as q.Tree
+  const nextTree: q.Tree<TopicViewModel> = resultTree as q.Tree<TopicViewModel>
   if (tree.updateSource && tree.connectionId) {
     nextTree.updateWithConnection(tree.updateSource, tree.connectionId, nodeFilter)
   }
@@ -72,7 +73,7 @@ export const filterTopics = (filterStr: string) => (dispatch: Dispatch<any>, get
   dispatch(batchActions([setAutoExpandLimit(autoExpandLimitForTree(nextTree)), (showTree(nextTree) as any)]))
 }
 
-function autoExpandLimitForTree(tree: q.Tree) {
+function autoExpandLimitForTree(tree: q.Tree<TopicViewModel>) {
   if (!tree) {
     return 0
   }

app/src/actions/Tree.ts

@@ -3,22 +3,42 @@ import { ActionTypes } from '../reducers/Tree'
 import * as q from '../../../backend/src/Model'
 import { Dispatch, AnyAction } from 'redux'
 import { setTopic } from './Publish'
+import { TopicViewModel } from '../TopicViewModel'
+import { batchActions } from 'redux-batched-actions'
 
-export const selectTopic = (topic: q.TreeNode) => (dispatch: Dispatch<any>, getState: () => AppState): AnyAction  => {
+export const selectTopic = (topic: q.TreeNode<TopicViewModel>) => (dispatch: Dispatch<any>, getState: () => AppState)  => {
   const { selectedTopic } = getState().tree
-
-  // Update publish topic
-  if (selectedTopic && (selectedTopic.path() === getState().publish.topic || !getState().publish.topic)) {
-    dispatch(setTopic(topic.path()))
+  if (selectedTopic === topic) {
+    return
   }
 
-  return dispatch({
+  // Update publish topic
+  let setTopicDispatch: any | undefined
+  if (selectedTopic && (selectedTopic.path() === getState().publish.topic || !getState().publish.topic)) {
+    setTopicDispatch = setTopic(topic.path())
+  }
+
+  if (selectedTopic && selectedTopic.viewModel) {
+    selectedTopic.viewModel.setSelected(false)
+  }
+
+  if (topic.viewModel) {
+    topic.viewModel.setSelected(true)
+  }
+
+  const selectTreeTopicDispatch = {
     selectedTopic: topic,
     type: ActionTypes.TREE_SELECT_TOPIC,
-  })
+  }
+
+  if (setTopicDispatch) {
+    dispatch(batchActions([selectTreeTopicDispatch, setTopicDispatch]))
+  } else {
+    dispatch(selectTreeTopicDispatch)
+  }
 }
 
-export const showTree = (tree?: q.Tree) => (dispatch: Dispatch<any>, getState: () => AppState): AnyAction  => {
+export const showTree = (tree?: q.Tree<TopicViewModel>) => (dispatch: Dispatch<any>, getState: () => AppState): AnyAction  => {
   const visibleTree = getState().tree.tree
   const connectionTree = getState().connection.tree