From eb75595a0403d40df7f7230fa06e4c38f732e09a Mon Sep 17 00:00:00 2001 From: ebb-tide Date: Wed, 13 Jun 2018 15:35:49 -0700 Subject: [PATCH] Convert Annotations component to TS and pass xAxisRange explicitly to cause rerender of annotations on zoom in --- .../annotations/{helpers.js => helpers.ts} | 11 ++- ui/src/shared/components/Annotation.js | 6 +- ui/src/shared/components/AnnotationPoint.js | 3 +- ui/src/shared/components/AnnotationSpan.js | 3 +- .../{Annotations.js => Annotations.tsx} | 78 ++++++++----------- ui/src/shared/components/Dygraph.tsx | 1 + ui/src/types/annotations.ts | 7 ++ ui/src/types/index.ts | 2 + 8 files changed, 59 insertions(+), 52 deletions(-) rename ui/src/shared/annotations/{helpers.js => helpers.ts} (62%) rename ui/src/shared/components/{Annotations.js => Annotations.tsx} (61%) create mode 100644 ui/src/types/annotations.ts diff --git a/ui/src/shared/annotations/helpers.js b/ui/src/shared/annotations/helpers.ts similarity index 62% rename from ui/src/shared/annotations/helpers.js rename to ui/src/shared/annotations/helpers.ts index 739378372..e90e15a89 100644 --- a/ui/src/shared/annotations/helpers.js +++ b/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 [] diff --git a/ui/src/shared/components/Annotation.js b/ui/src/shared/components/Annotation.js index 26d6fbfb4..00919b1d0 100644 --- a/ui/src/shared/components/Annotation.js +++ b/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} /> ) : ( )} ) -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, diff --git a/ui/src/shared/components/AnnotationPoint.js b/ui/src/shared/components/AnnotationPoint.js index cdc529d24..5d704d4de 100644 --- a/ui/src/shared/components/AnnotationPoint.js +++ b/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, diff --git a/ui/src/shared/components/AnnotationSpan.js b/ui/src/shared/components/AnnotationSpan.js index aed861a63..3f4bdfbd0 100644 --- a/ui/src/shared/components/AnnotationSpan.js +++ b/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 = { diff --git a/ui/src/shared/components/Annotations.js b/ui/src/shared/components/Annotations.tsx similarity index 61% rename from ui/src/shared/components/Annotations.js rename to ui/src/shared/components/Annotations.tsx index fdb9665e9..a8f595959 100644 --- a/ui/src/shared/components/Annotations.js +++ b/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 { + 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 (
{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) diff --git a/ui/src/shared/components/Dygraph.tsx b/ui/src/shared/components/Dygraph.tsx index 6e0f1c1dc..e0c79d6fe 100644 --- a/ui/src/shared/components/Dygraph.tsx +++ b/ui/src/shared/components/Dygraph.tsx @@ -258,6 +258,7 @@ class Dygraph extends Component { dygraph={this.dygraph} dWidth={this.dygraph.width_} staticLegendHeight={staticLegendHeight} + xAxisRange={this.dygraph.xAxisRange()} /> )}