Move DYGRAPH_CONTAINER_MARGIN into shared constants

ui/src/shared/components/AnnotationPoint.js

@@ -1,6 +1,7 @@
 import React, {PropTypes} from 'react'
 import {connect} from 'react-redux'
 
+import {DYGRAPH_CONTAINER_MARGIN} from 'shared/constants'
 import {ANNOTATION_MIN_DELTA, EDITING} from 'shared/annotations/helpers'
 import * as schema from 'shared/schemas'
 import * as actions from 'shared/actions/annotations'
@@ -99,7 +100,8 @@ class AnnotationPoint extends React.Component {
       ? 'annotation--click-area editing'
       : 'annotation--click-area'
 
-    const left = `${dygraph.toDomXCoord(annotation.startTime) + 16}px`
+    const left = `${dygraph.toDomXCoord(annotation.startTime) +
+      DYGRAPH_CONTAINER_MARGIN}px`
 
     return (
       <div className={markerClass} style={{left}}>

ui/src/shared/components/AnnotationSpan.js

@@ -1,6 +1,7 @@
 import React, {PropTypes} from 'react'
 import {connect} from 'react-redux'
 
+import {DYGRAPH_CONTAINER_MARGIN} from 'shared/constants'
 import {ANNOTATION_MIN_DELTA, EDITING} from 'shared/annotations/helpers'
 import * as schema from 'shared/schemas'
 import * as actions from 'shared/actions/annotations'
@@ -107,7 +108,7 @@ class AnnotationSpan extends React.Component {
     }
     const showTooltip = isDragging === 'left' || isMouseOver === 'left'
 
-    const left = dygraph.toDomXCoord(startTime) + 16
+    const left = dygraph.toDomXCoord(startTime) + DYGRAPH_CONTAINER_MARGIN
 
     return (
       <div className={markerClass} style={{left: `${left}px`}}>
@@ -153,7 +154,7 @@ class AnnotationSpan extends React.Component {
     }
     const showTooltip = isDragging === 'right' || isMouseOver === 'right'
 
-    const left = `${dygraph.toDomXCoord(endTime) + 16}px`
+    const left = `${dygraph.toDomXCoord(endTime) + DYGRAPH_CONTAINER_MARGIN}px`
 
     return (
       <div

ui/src/shared/components/AnnotationWindow.js

@@ -1,9 +1,8 @@
 import React, {PropTypes} from 'react'
 
+import {DYGRAPH_CONTAINER_MARGIN} from 'shared/constants'
 import * as schema from 'shared/schemas'
 
-const containerLeftPadding = 16
-
 const windowDimensions = (anno, dygraph) => {
   // TODO: export and test this function
   const [startX, endX] = dygraph.xAxisRange()
@@ -17,7 +16,7 @@ const windowDimensions = (anno, dygraph) => {
   const isDurationNegative = windowWidth < 0
   const foo = isDurationNegative ? windowWidth : 0
 
-  const left = `${windowStartXCoord + containerLeftPadding + foo}px`
+  const left = `${windowStartXCoord + DYGRAPH_CONTAINER_MARGIN + foo}px`
   const width = `${Math.abs(windowWidth)}px`
 
   return {

ui/src/shared/constants/index.js

@@ -413,6 +413,8 @@ export const PAGE_CONTAINER_MARGIN = 30 // TODO: get this dynamically to ensure
 export const LAYOUT_MARGIN = 4
 export const DASHBOARD_LAYOUT_ROW_HEIGHT = 83.5
 
+export const DYGRAPH_CONTAINER_MARGIN = 16
+
 export const DEFAULT_SOURCE = {
   url: 'http://localhost:8086',
   name: 'Influx 1',