From 76dab70df7315e96e28cf5a8f87e06c77e15a9d3 Mon Sep 17 00:00:00 2001
From: Luke Morris <lukevmorris@gmail.com>
Date: Mon, 19 Feb 2018 10:09:32 -0800
Subject: [PATCH] AnnotationWindow renders appropriately

---
 ui/src/shared/annotations/styles.js     | 13 +++++++------
 ui/src/shared/components/Annotations.js |  9 +++++----
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/ui/src/shared/annotations/styles.js b/ui/src/shared/annotations/styles.js
index e9379cc6b..82ff710a5 100644
--- a/ui/src/shared/annotations/styles.js
+++ b/ui/src/shared/annotations/styles.js
@@ -193,21 +193,22 @@ export const annotationWindowStyle = (annotation, dygraph) => {
   // TODO: export and test this function
   const [startX, endX] = dygraph.xAxisRange()
   const containerLeftPadding = 16
-  const windowEnd = Number(annotation.time) + Number(annotation.duration)
+  const startTime = +annotation.startTime
+  const endTime = +annotation.endTime
 
-  let windowStartXCoord = dygraph.toDomXCoord(annotation.time)
-  let windowEndXCoord = dygraph.toDomXCoord(windowEnd)
+  let windowStartXCoord = dygraph.toDomXCoord(startTime)
+  let windowEndXCoord = dygraph.toDomXCoord(endTime)
   let visibility = 'visible'
 
-  if (annotation.time < startX) {
+  if (startTime < startX) {
     windowStartXCoord = dygraph.toDomXCoord(startX)
   }
 
-  if (windowEnd > endX) {
+  if (endTime > endX) {
     windowEndXCoord = dygraph.toDomXCoord(endX)
   }
 
-  if (windowEnd < startX || annotation.time > endX) {
+  if (endTime < startX || startTime > endX) {
     visibility = 'hidden'
   }
 
diff --git a/ui/src/shared/components/Annotations.js b/ui/src/shared/components/Annotations.js
index b927b2f89..7355ce31c 100644
--- a/ui/src/shared/components/Annotations.js
+++ b/ui/src/shared/components/Annotations.js
@@ -75,10 +75,11 @@ class Annotations extends Component {
             onDeleteAnnotation={handleDeleteAnnotation}
           />
         )}
-        {annotations.map((a, i) => {
-          return a.duration
-            ? <AnnotationWindow key={i} annotation={a} dygraph={dygraph} />
-            : null
+        {annotations.filter(a => !a.id.includes('-end')).map((a, i) => {
+          return (
+            a.startTime !== a.endTime &&
+            <AnnotationWindow key={i} annotation={a} dygraph={dygraph} />
+          )
         })}
       </div>
     )