From a096c07ccea6b2f419205a7f66522392e44ad69a Mon Sep 17 00:00:00 2001
From: Filip Barl <filip.barl@gmail.com>
Date: Mon, 19 Feb 2018 15:21:17 +0100
Subject: [PATCH] Fix nodes grid row clickability in the tours.

---
 .../node-details/node-details-table-row.js    | 30 +++++++++----------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/client/app/scripts/components/node-details/node-details-table-row.js b/client/app/scripts/components/node-details/node-details-table-row.js
index ed157ab3f..428681465 100644
--- a/client/app/scripts/components/node-details/node-details-table-row.js
+++ b/client/app/scripts/components/node-details/node-details-table-row.js
@@ -114,46 +114,44 @@ export default class NodeDetailsTableRow extends React.Component {
     // is most likely a details panel popping open.
     //
     this.state = { focused: false };
-    this.mouseDragOrigin = [0, 0];
-
-    this.onMouseDown = this.onMouseDown.bind(this);
-    this.onMouseUp = this.onMouseUp.bind(this);
-    this.onMouseEnter = this.onMouseEnter.bind(this);
-    this.onMouseLeave = this.onMouseLeave.bind(this);
+    this.mouseDrag = {};
   }
 
-  onMouseEnter() {
+  onMouseEnter = () => {
     this.setState({ focused: true });
     if (this.props.onMouseEnter) {
       this.props.onMouseEnter(this.props.index, this.props.node);
     }
   }
 
-  onMouseLeave() {
+  onMouseLeave = () => {
     this.setState({ focused: false });
     if (this.props.onMouseLeave) {
       this.props.onMouseLeave();
     }
   }
 
-  onMouseDown(ev) {
-    const { pageX, pageY } = ev;
-    this.mouseDragOrigin = [pageX, pageY];
+  onMouseDown = (ev) => {
+    this.mouseDrag = {
+      originX: ev.pageX,
+      originY: ev.pageY,
+    };
   }
 
-  onMouseUp(ev) {
-    const [originX, originY] = this.mouseDragOrigin;
-    const { pageX, pageY } = ev;
+  onClick = (ev) => {
     const thresholdPx = 2;
+    const { pageX, pageY } = ev;
+    const { originX, originY } = this.mouseDrag;
     const movedTheMouseTooMuch = (
       Math.abs(originX - pageX) > thresholdPx ||
       Math.abs(originY - pageY) > thresholdPx
     );
-    if (movedTheMouseTooMuch) {
+    if (movedTheMouseTooMuch && originX && originY) {
       return;
     }
 
     this.props.onClick(ev, this.props.node);
+    this.mouseDrag = {};
   }
 
   render() {
@@ -171,8 +169,8 @@ export default class NodeDetailsTableRow extends React.Component {
 
     return (
       <tr
+        onClick={onClick && this.onClick}
         onMouseDown={onClick && this.onMouseDown}
-        onMouseUp={onClick && this.onMouseUp}
         onMouseEnter={this.onMouseEnter}
         onMouseLeave={this.onMouseLeave}
         className={className}>