From f905ba8e892bcc38d46df6174bc722fdc11e8fa4 Mon Sep 17 00:00:00 2001
From: Thomas Nordquist <thomas.nordquist@viison.com>
Date: Tue, 15 Jan 2019 19:00:37 +0100
Subject: [PATCH] Clarify mouse interaction

---
 app/src/components/Tree/TreeNode.tsx | 39 ++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/app/src/components/Tree/TreeNode.tsx b/app/src/components/Tree/TreeNode.tsx
index f82939c..7492334 100644
--- a/app/src/components/Tree/TreeNode.tsx
+++ b/app/src/components/Tree/TreeNode.tsx
@@ -3,6 +3,7 @@ import * as q from '../../../../backend/src/Model'
 
 import { Theme, withStyles } from '@material-ui/core/styles'
 
+import LabelImportant from '@material-ui/icons/LabelImportant'
 import TreeNodeSubnodes from './TreeNodeSubnodes'
 import TreeNodeTitle from './TreeNodeTitle'
 import { bindActionCreators } from 'redux'
@@ -29,6 +30,12 @@ const styles = (theme: Theme) => {
         backgroundColor: 'rgba(80, 80, 80, 0.35)',
       },
     },
+    topicSelect: {
+      float: 'right' as 'right',
+      opacity: 0,
+      cursor: 'pointer',
+      marginTop: '-1px',
+    },
   }
 }
 
@@ -61,6 +68,7 @@ class TreeNode extends React.Component<Props, State> {
 
   private willUpdateTime: number = performance.now()
   private titleRef = React.createRef<HTMLDivElement>()
+  private topicSelectRef = React.createRef<HTMLDivElement>()
 
   private subnodesDidchange = () => {
     this.dirtySubnodes = true
@@ -155,6 +163,8 @@ class TreeNode extends React.Component<Props, State> {
         className={`${classes.node} ${!this.props.isRoot ? classes.hover : ''}`}
         onClick={this.didClickNode}
         style={this.props.style}
+        onMouseOver={this.mouseOver}
+        onMouseOut={this.mouseOut}
       >
         <span ref={this.titleRef} style={animation}>
           <TreeNodeTitle
@@ -164,11 +174,40 @@ class TreeNode extends React.Component<Props, State> {
             lastUpdate={this.props.treeNode.lastUpdate}
           />
         </span>
+        <div
+          className={this.props.classes.topicSelect}
+          ref={this.topicSelectRef}
+          onClick={this.didSelectNode}
+          title="Select topic"
+        >
+          <LabelImportant style={{ fontSize: '14px' }} />
+        </div>
         {this.renderNodes()}
       </div>
     )
   }
 
+  private mouseOver = (event: React.MouseEvent) => {
+    event.stopPropagation()
+    if (this.topicSelectRef.current) {
+      this.topicSelectRef.current.style.opacity = '1'
+    }
+  }
+  private mouseOut = (event: React.MouseEvent) => {
+    event.stopPropagation()
+    if (this.topicSelectRef.current) {
+      this.topicSelectRef.current.style.opacity = '0'
+    }
+  }
+
+  private didSelectNode = (event: React.MouseEvent) => {
+    event.stopPropagation()
+    if (this.topicSelectRef.current) {
+      this.topicSelectRef.current.style.opacity = '1'
+    }
+    this.props.actions.selectTopic(this.props.treeNode)
+  }
+
   private didClickNode = (event: React.MouseEvent) => {
     event.stopPropagation()
     this.toggle()