Left flag dedicated to startTime; Right to endTime

ui/src/shared/annotations/helpers.js

@@ -40,7 +40,7 @@ export const getAnnotations = (graph, annotations = []) => {
     }
 
     // If annotation does not have duration, include in array
-    if (!annoEnd) {
+    if (annoStart === annoEnd) {
       return [...acc, a]
     }
 

ui/src/shared/annotations/styles.js

@@ -304,7 +304,7 @@ export const circleFlagStyle = {
   transition: 'background-color 0.25s ease, transform 0.25s ease',
 }
 
-export const staticFlagStyle = {
+export const leftFlagStyle = {
   position: 'absolute',
   zIndex: '2',
   top: '-6px',
@@ -313,12 +313,13 @@ export const staticFlagStyle = {
   left: '0',
   border: '6px solid transparent',
   borderLeftColor: `rgb(${annotationDragColor})`,
+  borderRightColor: 'transparent',
   borderRadius: '0',
   background: 'none',
   transition: 'border-left-color 0.25s ease, transform 0.25s ease',
   transformOrigin: '0% 50%',
 }
-export const draggingFlagStyle = {
+export const rightFlagStyle = {
   position: 'absolute',
   zIndex: '2',
   top: '-6px',
@@ -328,13 +329,14 @@ export const draggingFlagStyle = {
   right: '0',
   border: '6px solid transparent',
   borderRightColor: `rgb(${annotationDragColor})`,
+  borderLeftColor: 'transparent',
   borderRadius: '0',
   background: 'none',
   transition: 'border-right-color 0.25s ease, transform 0.25s ease',
   transformOrigin: '100% 50%',
 }
 
-export const newAnnotationWindowStyle = (isDragging, staticX, draggingX) => {
+export const newAnnotationWindowStyle = (staticX, draggingX) => {
   // TODO: export and test this function
 
   const width = `${Math.abs(Number(draggingX) - Number(staticX))}px`
@@ -359,6 +361,6 @@ export const newAnnotationWindowStyle = (isDragging, staticX, draggingX) => {
     borderTop: `2px dotted rgba(${annotationDragColor},0.35)`,
     width,
     zIndex: '3',
-    visibility: isDragging ? 'visible' : 'hidden',
+    visibility: 'visible',
   }
 }

ui/src/shared/components/NewAnnotation.js

@@ -9,8 +9,8 @@ import * as actions from 'shared/actions/annotations'
 
 import {
   circleFlagStyle,
-  staticFlagStyle,
-  draggingFlagStyle,
+  leftFlagStyle,
+  rightFlagStyle,
   newAnnotationContainer,
   newAnnotationCrosshairStyle,
   newAnnotationTooltipStyle,
@@ -41,11 +41,12 @@ class NewAnnotation extends Component {
     const createUrl = this.context.source.links.annotations
 
     // time on mouse down
-    const startTime = `${dygraph.toDataXCoord(this.state.trueGraphX)}`
+    const downTime = `${dygraph.toDataXCoord(this.state.trueGraphX)}`
 
     if (this.state.mouseAction === 'dragging') {
       // time on mouse up
-      const endTime = tempAnnotation.startTime
+      const upTime = tempAnnotation.startTime
+      const [startTime, endTime] = [downTime, upTime].sort()
 
       addAnnotationAsync(createUrl, {
         ...tempAnnotation,
@@ -69,8 +70,8 @@ class NewAnnotation extends Component {
     addAnnotationAsync(createUrl, {
       ...tempAnnotation,
       id: uuid.v4(),
-      startTime,
-      endTime: startTime,
+      startTime: downTime,
+      endTime: downTime,
       text: 'hi',
       type: 'hi',
     })
@@ -131,6 +132,10 @@ class NewAnnotation extends Component {
     const staticCrosshairLeft = this.state.trueGraphX
 
     const isDragging = mouseAction === 'dragging'
+    const staticFlagStyle =
+      staticCrosshairLeft < crosshairLeft ? leftFlagStyle : rightFlagStyle
+    const draggingFlagStyle =
+      staticCrosshairLeft < crosshairLeft ? rightFlagStyle : leftFlagStyle
 
     return (
       <div
@@ -148,16 +153,13 @@ class NewAnnotation extends Component {
             className="new-annotation--crosshair__static"
             style={newAnnotationCrosshairStyle(staticCrosshairLeft)}
           >
-            <div style={isDragging ? staticFlagStyle : circleFlagStyle} />
+            <div style={staticFlagStyle} />
           </div>}
-        <div
-          className="new-annotation--window"
-          style={newAnnotationWindowStyle(
-            isDragging,
-            staticCrosshairLeft,
-            crosshairLeft
-          )}
-        />
+        {isDragging &&
+          <div
+            className="new-annotation--window"
+            style={newAnnotationWindowStyle(staticCrosshairLeft, crosshairLeft)}
+          />}
         <div
           className="new-annotation--crosshair"
           style={newAnnotationCrosshairStyle(crosshairLeft)}