Add quick preview switch

app/src/components/Tree/Tree.tsx

@@ -1,13 +1,12 @@
-import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
-
-import { AppState } from '../../reducers'
+import * as React from 'react'
 import TreeNode from './TreeNode'
+import { AppState } from '../../reducers'
+import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { TopicOrder } from '../../reducers/Settings'
 import { TopicViewModel } from '../../TopicViewModel'
 import { treeActions } from '../../actions'
-import { bindActionCreators } from 'redux'
 
 const MovingAverage = require('moving-average')
 
@@ -25,6 +24,7 @@ interface Props {
   topicOrder: TopicOrder
   autoExpandLimit: number
   highlightTopicUpdates: boolean
+  selectTopicWithMouseOver: boolean
 }
 
 interface State {
@@ -112,6 +112,7 @@ class Tree extends React.PureComponent<Props, State> {
           lastUpdate={tree.lastUpdate}
           didSelectTopic={this.props.actions.selectTopic}
           highlightTopicUpdates={this.props.highlightTopicUpdates}
+          selectTopicWithMouseOver={this.props.selectTopicWithMouseOver}
         />
       </div>
     )
@@ -130,6 +131,7 @@ const mapStateToProps = (state: AppState) => {
     autoExpandLimit: state.settings.autoExpandLimit,
     topicOrder: state.settings.topicOrder,
     highlightTopicUpdates: state.settings.highlightTopicUpdates,
+    selectTopicWithMouseOver: state.settings.selectTopicWithMouseOver,
   }
 }
 

app/src/components/Tree/TreeNode.tsx

@@ -1,12 +1,11 @@
-import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
-
-import { Theme, withStyles } from '@material-ui/core/styles'
-
+import * as React from 'react'
 import TreeNodeSubnodes from './TreeNodeSubnodes'
 import TreeNodeTitle from './TreeNodeTitle'
+import { Theme, withStyles } from '@material-ui/core/styles'
 import { TopicOrder } from '../../reducers/Settings'
 import { TopicViewModel } from '../../TopicViewModel'
+
 const debounce = require('lodash.debounce')
 
 declare var performance: any
@@ -55,6 +54,7 @@ interface Props {
   lastUpdate: number
   didSelectTopic: any
   highlightTopicUpdates: boolean
+  selectTopicWithMouseOver: boolean
 }
 
 interface State {
@@ -229,6 +229,9 @@ 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) {
+      this.props.didSelectTopic(this.props.treeNode)
+    }
   }
 
   private mouseOut = (event: React.MouseEvent) => {
@@ -260,6 +263,7 @@ class TreeNode extends React.Component<Props, State> {
         lastUpdate={this.props.treeNode.lastUpdate}
         didSelectTopic={this.props.didSelectTopic}
         highlightTopicUpdates={this.props.highlightTopicUpdates}
+        selectTopicWithMouseOver={this.props.selectTopicWithMouseOver}
       />
     )
   }

app/src/components/Tree/TreeNodeSubnodes.tsx

@@ -18,6 +18,7 @@ export interface Props {
   autoExpandLimit: number
   didSelectTopic: any
   highlightTopicUpdates: boolean
+  selectTopicWithMouseOver: boolean
 }
 
 interface State {
@@ -83,6 +84,7 @@ class TreeNodeSubnodes extends React.Component<Props, State> {
           lastUpdate={node.lastUpdate}
           didSelectTopic={this.props.didSelectTopic}
           highlightTopicUpdates={this.props.highlightTopicUpdates}
+          selectTopicWithMouseOver={this.props.selectTopicWithMouseOver}
         />
       )
     })