From 09c8d3120b17b238d756e87c832179ce879ff0a8 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Mon, 26 Feb 2018 15:07:21 -0800
Subject: [PATCH] Limit render of new annotation tooltip to the currently
 hovered graph

---
 ui/src/shared/components/NewAnnotation.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/ui/src/shared/components/NewAnnotation.js b/ui/src/shared/components/NewAnnotation.js
index f1b71ddffc..a5da583a6b 100644
--- a/ui/src/shared/components/NewAnnotation.js
+++ b/ui/src/shared/components/NewAnnotation.js
@@ -122,6 +122,7 @@ class NewAnnotation extends Component {
       tempAnnotation,
       tempAnnotation: {startTime, endTime},
     } = this.props
+    const {isMouseOver} = this.state
 
     const crosshairOne = Math.max(-1000, dygraph.toDomXCoord(startTime))
     const crosshairTwo = dygraph.toDomXCoord(endTime)
@@ -161,14 +162,18 @@ class NewAnnotation extends Component {
               className="new-annotation--crosshair"
               style={{left: crosshairTwo}}
             >
-              {this.renderTimestamp(tempAnnotation.endTime)}
+              {isMouseOver &&
+                isDragging &&
+                this.renderTimestamp(tempAnnotation.endTime)}
               <div className={flagTwoClass} />
             </div>}
           <div
             className="new-annotation--crosshair"
             style={{left: crosshairOne}}
           >
-            {isDragging || this.renderTimestamp(tempAnnotation.startTime)}
+            {isMouseOver &&
+              !isDragging &&
+              this.renderTimestamp(tempAnnotation.startTime)}
             <div className={isDragging ? flagOneClass : pointFlagClass} />
           </div>
         </div>