Begin working toward AnnotationSpan component

ui/src/shared/annotations/helpers.js

@@ -16,40 +16,21 @@ export const getAnnotations = (graph, annotations = []) => {
   }
 
   const [xStart, xEnd] = graph.xAxisRange()
-  return annotations.reduce((acc, a) => {
+
-    // Don't render if annotation.time is outside the graph
+  return annotations.filter(a => {
     const annoStart = +a.startTime
     const annoEnd = +a.endTime
-    const endAnnotation = {
+
-      ...a,
+    // If annotation is too far left
-      id: `${a.id}-end`,
+    if (annoEnd < xStart) {
-      startTime: `${annoEnd}`,
+      return false
-      endTime: `${annoEnd}`,
-    }
-
-    if (annoStart < xStart) {
-      if (annoEnd > xStart) {
-        return [...acc, a, endAnnotation]
-      }
-
-      return acc
     }
 
+    // If annotation is too far right
     if (annoStart > xEnd) {
-      return acc
+      return false
     }
 
-    // If annotation does not have duration, include in array
+    return true
-    if (annoStart === annoEnd) {
+  })
-      return [...acc, a]
-    }
-
-    // If annoEnd is out of bounds, just render the start point
-    if (annoEnd > xEnd) {
-      return [...acc, a]
-    }
-
-    // Render both the start and end point
-    return [...acc, a, endAnnotation]
-  }, [])
 }

ui/src/shared/components/Annotation.js

@@ -1,8 +1,9 @@
 import React, {Component, PropTypes} from 'react'
 
 import AnnotationTooltip from 'src/shared/components/AnnotationTooltip'
+import AnnotationWindow from 'src/shared/components/AnnotationWindow'
 
-import {ADDING, EDITING, TEMP_ANNOTATION} from 'src/shared/annotations/helpers'
+import {ADDING, EDITING} from 'src/shared/annotations/helpers'
 import * as schema from 'shared/schemas'
 
 import {
@@ -11,26 +12,12 @@ import {
   annotationStyle,
 } from 'src/shared/annotations/styles'
 
-const idAppendage = '-end'
-
 class Annotation extends Component {
   state = {
     isDragging: false,
     isMouseOver: false,
   }
 
-  isEndpoint = () => {
-    const {annotation: {id}} = this.props
-
-    return id.substring(id.length - idAppendage.length) === idAppendage
-  }
-
-  getStartID = () => {
-    const {annotation: {id}} = this.props
-
-    return id.substring(0, id.length - idAppendage.length)
-  }
-
   handleStartDrag = () => {
     const {mode} = this.props
     if (mode === ADDING || mode === null) {
@@ -63,7 +50,7 @@ class Annotation extends Component {
     }
 
     const {pageX} = e
-    const {annotation, annotations, dygraph, onUpdateAnnotation} = this.props
+    const {annotation, dygraph, onUpdateAnnotation} = this.props
     const {startTime} = annotation
     const {left} = dygraph.graphDiv.getBoundingClientRect()
     const [startX, endX] = dygraph.xAxisRange()
@@ -92,36 +79,12 @@ class Annotation extends Component {
       newTime = startX
     }
 
-    if (this.isEndpoint()) {
-      const startAnnotation = annotations.find(a => a.id === this.getStartID())
-      if (!startAnnotation) {
-        return console.error('Start annotation does not exist')
-      }
-
-      this.counter = this.counter + 1
-      return onUpdateAnnotation({
-        ...startAnnotation,
-        endTime: newTime,
-      })
-    }
-
     onUpdateAnnotation({...annotation, startTime: `${newTime}`})
 
     e.preventDefault()
     e.stopPropagation()
   }
 
-  handleConfirmUpdate = annotation => {
-    const {onUpdateAnnotation} = this.props
-
-    if (this.isEndpoint()) {
-      const id = this.getStartID()
-      return onUpdateAnnotation({...annotation, id})
-    }
-
-    onUpdateAnnotation(annotation)
-  }
-
   render() {
     const {dygraph, annotation, mode} = this.props
     const {isDragging, isMouseOver} = this.state
@@ -129,13 +92,10 @@ class Annotation extends Component {
     const humanTime = `${new Date(+annotation.startTime)}`
     const hasDuration = annotation.starTime !== annotation.endTime
 
-    if (annotation.id === TEMP_ANNOTATION.id) {
-      return null
-    }
-
     const isEditing = mode === EDITING
 
     return (
+      <div>
         <div
           className="dygraph-annotation"
           style={annotationStyle(annotation, dygraph, isMouseOver, isDragging)}
@@ -150,31 +110,29 @@ class Annotation extends Component {
             onMouseEnter={this.handleMouseEnter}
             onMouseLeave={this.handleMouseLeave}
           />
-        <div
+          <div style={flagStyle(isMouseOver, isDragging, hasDuration, false)} />
-          style={flagStyle(
-            isMouseOver,
-            isDragging,
-            hasDuration,
-            this.isEndpoint()
-          )}
-        />
           <AnnotationTooltip
             isEditing={isEditing}
             annotation={annotation}
             onMouseLeave={this.handleMouseLeave}
             annotationState={this.state}
-          onConfirmUpdate={this.handleConfirmUpdate}
           />
         </div>
+        {annotation.startTime !== annotation.endTime &&
+          <AnnotationWindow
+            key={annotation.id}
+            annotation={annotation}
+            dygraph={dygraph}
+          />}
+      </div>
     )
   }
 }
 
-const {arrayOf, func, shape, string} = PropTypes
+const {func, shape, string} = PropTypes
 
 Annotation.propTypes = {
   mode: string,
-  annotations: arrayOf(schema.annotation).isRequired,
   annotation: schema.annotation.isRequired,
   dygraph: shape({}).isRequired,
   onUpdateAnnotation: func.isRequired,

ui/src/shared/components/AnnotationTooltip.js

@@ -30,7 +30,7 @@ class AnnotationTooltip extends Component {
   }
 
   handleConfirmUpdate = () => {
-    this.props.onConfirmUpdate(this.state.annotation)
+    this.props.updateAnnotation(this.state.annotation)
   }
 
   handleRejectUpdate = () => {
@@ -94,10 +94,11 @@ AnnotationTooltip.propTypes = {
   annotation: schema.annotation.isRequired,
   onMouseLeave: func.isRequired,
   annotationState: shape({}),
-  onConfirmUpdate: func.isRequired,
   deleteAnnotationAsync: func.isRequired,
+  updateAnnotation: func.isRequired,
 }
 
 export default connect(null, {
   deleteAnnotationAsync: actions.deleteAnnotationAsync,
+  updateAnnotation: actions.updateAnnotation,
 })(AnnotationTooltip)

ui/src/shared/components/Annotations.js

@@ -3,7 +3,6 @@ import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 
 import Annotation from 'src/shared/components/Annotation'
-import AnnotationWindow from 'src/shared/components/AnnotationWindow'
 import NewAnnotation from 'src/shared/components/NewAnnotation'
 import * as schema from 'src/shared/schemas'
 
@@ -68,16 +67,9 @@ class Annotations extends Component {
             mode={mode}
             annotation={a}
             dygraph={dygraph}
-            annotations={annotations}
             onUpdateAnnotation={handleUpdateAnnotation}
           />
         )}
-        {annotations.filter(a => !a.id.includes('-end')).map((a, i) => {
-          return (
-            a.startTime !== a.endTime &&
-            <AnnotationWindow key={i} annotation={a} dygraph={dygraph} />
-          )
-        })}
       </div>
     )
   }