Convert Annotations component to TS and pass xAxisRange explicitly to cause rerender of annotations on zoom in

ui/src/shared/annotations/helpers.ts

@@ -1,9 +1,11 @@
+import {AnnotationInterface} from 'src/types'
+
 export const ANNOTATION_MIN_DELTA = 0.5
 
 export const ADDING = 'adding'
 export const EDITING = 'editing'
 
-export const TEMP_ANNOTATION = {
+export const TEMP_ANNOTATION: AnnotationInterface = {
   id: 'tempAnnotation',
   text: 'Name Me',
   type: '',
@@ -11,8 +13,11 @@ export const TEMP_ANNOTATION = {
   endTime: '',
 }
 
-export const visibleAnnotations = (graph, annotations = []) => {
-  const [xStart, xEnd] = graph.xAxisRange()
+export const visibleAnnotations = (
+  xAxisRange: number[],
+  annotations: AnnotationInterface[] = []
+): AnnotationInterface[] => {
+  const [xStart, xEnd] = xAxisRange
 
   if (xStart === 0 && xEnd === 0) {
     return []

ui/src/shared/components/Annotation.js

@@ -10,6 +10,7 @@ const Annotation = ({
   mode,
   dygraph,
   dWidth,
+  xAxisRange,
   annotation,
   staticLegendHeight,
 }) => (
@@ -21,6 +22,7 @@ const Annotation = ({
         annotation={annotation}
         dWidth={dWidth}
         staticLegendHeight={staticLegendHeight}
+        xAxisRange={xAxisRange}
       />
     ) : (
       <AnnotationSpan
@@ -29,16 +31,18 @@ const Annotation = ({
         annotation={annotation}
         dWidth={dWidth}
         staticLegendHeight={staticLegendHeight}
+        xAxisRange={xAxisRange}
       />
     )}
   </div>
 )
 
-const {number, shape, string} = PropTypes
+const {arrayOf, number, shape, string} = PropTypes
 
 Annotation.propTypes = {
   mode: string,
   dWidth: number,
+  xAxisRange: arrayOf(number),
   annotation: schema.annotation.isRequired,
   dygraph: shape({}).isRequired,
   staticLegendHeight: number,

ui/src/shared/components/AnnotationPoint.js

@@ -139,7 +139,7 @@ class AnnotationPoint extends React.Component {
   }
 }
 
-const {func, number, shape, string} = PropTypes
+const {arrayOf, func, number, shape, string} = PropTypes
 
 AnnotationPoint.defaultProps = {
   staticLegendHeight: 0,
@@ -148,6 +148,7 @@ AnnotationPoint.defaultProps = {
 AnnotationPoint.propTypes = {
   annotation: schema.annotation.isRequired,
   mode: string.isRequired,
+  xAxisRange: arrayOf(number),
   dygraph: shape({}).isRequired,
   updateAnnotation: func.isRequired,
   updateAnnotationAsync: func.isRequired,

ui/src/shared/components/AnnotationSpan.js

@@ -217,7 +217,7 @@ class AnnotationSpan extends React.Component {
   }
 }
 
-const {func, number, shape, string} = PropTypes
+const {arrayOf, func, number, shape, string} = PropTypes
 
 AnnotationSpan.defaultProps = {
   staticLegendHeight: 0,
@@ -230,6 +230,7 @@ AnnotationSpan.propTypes = {
   staticLegendHeight: number,
   updateAnnotationAsync: func.isRequired,
   updateAnnotation: func.isRequired,
+  xAxisRange: arrayOf(number),
 }
 
 const mapDispatchToProps = {

ui/src/shared/components/Annotations.tsx

@@ -1,11 +1,8 @@
 import React, {Component} from 'react'
-import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
-import {bindActionCreators} from 'redux'
 
 import Annotation from 'src/shared/components/Annotation'
 import NewAnnotation from 'src/shared/components/NewAnnotation'
-import * as schema from 'src/shared/schemas'
 
 import {ADDING, TEMP_ANNOTATION} from 'src/shared/annotations/helpers'
 
@@ -19,13 +16,31 @@ import {
 import {visibleAnnotations} from 'src/shared/annotations/helpers'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
+import {AnnotationInterface, DygraphClass} from 'src/types'
+
+interface Props {
+  dygraph: DygraphClass
+  dWidth: number
+  xAxisRange: number[]
+  staticLegendHeight: number
+  annotations: AnnotationInterface[]
+  mode: string
+  isTempHovering: boolean
+  handleUpdateAnnotation: () => void
+  handleDismissAddingAnnotation: () => void
+  handleAddingAnnotationSuccess: () => void
+  handleMouseEnterTempAnnotation: () => void
+  handleMouseLeaveTempAnnotation: () => void
+}
+
 @ErrorHandling
-class Annotations extends Component {
-  render() {
+class Annotations extends Component<Props> {
+  public render() {
     const {
       mode,
       dWidth,
       dygraph,
+      xAxisRange,
       isTempHovering,
       handleUpdateAnnotation,
       handleDismissAddingAnnotation,
@@ -34,7 +49,7 @@ class Annotations extends Component {
       handleMouseLeaveTempAnnotation,
       staticLegendHeight,
     } = this.props
-
+    console.log('rendering annotations')
     return (
       <div className="annotations-container">
         {mode === ADDING &&
@@ -58,6 +73,7 @@ class Annotations extends Component {
             annotation={a}
             dygraph={dygraph}
             dWidth={dWidth}
+            xAxisRange={xAxisRange}
             staticLegendHeight={staticLegendHeight}
           />
         ))}
@@ -67,7 +83,7 @@ class Annotations extends Component {
 
   get annotations() {
     return visibleAnnotations(
-      this.props.dygraph,
+      this.props.xAxisRange,
       this.props.annotations
     ).filter(a => a.id !== TEMP_ANNOTATION.id)
   }
@@ -77,48 +93,18 @@ class Annotations extends Component {
   }
 }
 
-const {arrayOf, bool, func, number, shape, string} = PropTypes
-
-Annotations.propTypes = {
-  annotations: arrayOf(schema.annotation),
-  dygraph: shape({}).isRequired,
-  dWidth: number.isRequired,
-  mode: string,
-  isTempHovering: bool,
-  handleUpdateAnnotation: func.isRequired,
-  handleDismissAddingAnnotation: func.isRequired,
-  handleAddingAnnotationSuccess: func.isRequired,
-  handleMouseEnterTempAnnotation: func.isRequired,
-  handleMouseLeaveTempAnnotation: func.isRequired,
-  staticLegendHeight: number,
-}
-
-const mapStateToProps = ({
-  annotations: {annotations, mode, isTempHovering},
-}) => ({
+const mstp = ({annotations: {annotations, mode, isTempHovering}}) => ({
   annotations,
   mode: mode || 'NORMAL',
   isTempHovering,
 })
 
-const mapDispatchToProps = dispatch => ({
-  handleAddingAnnotationSuccess: bindActionCreators(
-    addingAnnotationSuccess,
-    dispatch
-  ),
-  handleDismissAddingAnnotation: bindActionCreators(
-    dismissAddingAnnotation,
-    dispatch
-  ),
-  handleMouseEnterTempAnnotation: bindActionCreators(
-    mouseEnterTempAnnotation,
-    dispatch
-  ),
-  handleMouseLeaveTempAnnotation: bindActionCreators(
-    mouseLeaveTempAnnotation,
-    dispatch
-  ),
-  handleUpdateAnnotation: bindActionCreators(updateAnnotation, dispatch),
-})
+const mdtp = {
+  handleAddingAnnotationSuccess: addingAnnotationSuccess,
+  handleDismissAddingAnnotation: dismissAddingAnnotation,
+  handleMouseEnterTempAnnotation: mouseEnterTempAnnotation,
+  handleMouseLeaveTempAnnotation: mouseLeaveTempAnnotation,
+  handleUpdateAnnotation: updateAnnotation,
+}
 
-export default connect(mapStateToProps, mapDispatchToProps)(Annotations)
+export default connect(mstp, mdtp)(Annotations)

ui/src/shared/components/Dygraph.tsx

@@ -258,6 +258,7 @@ class Dygraph extends Component<Props, State> {
                 dygraph={this.dygraph}
                 dWidth={this.dygraph.width_}
                 staticLegendHeight={staticLegendHeight}
+                xAxisRange={this.dygraph.xAxisRange()}
               />
             )}
             <DygraphLegend

ui/src/types/annotations.ts

@@ -0,0 +1,7 @@
+export interface AnnotationInterface {
+  id: string
+  startTime: string
+  endTime: string
+  text: string
+  type: string
+}

ui/src/types/index.ts

@@ -40,6 +40,7 @@ import {
   DygraphClass,
   DygraphData,
 } from './dygraphs'
+import {AnnotationInterface} from './annotations'
 
 export {
   Me,
@@ -96,4 +97,5 @@ export {
   SchemaFilter,
   RemoteDataState,
   URLQueryParams,
+  AnnotationInterface,
 }