# All files / components AnnotationLayer.tsx

25% Statements 7/28
0% Branches 0/12
0% Functions 0/3
33.33% Lines 7/21

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    971x

    1x

    1x
    1x
    1x

    1x

    1x

     import React, {CSSProperties, FunctionComponent, useMemo, useRef} from 'react'
    import {
      AnnotationLayerConfig,
      AnnotationLayerSpec,
      LayerProps,
      LineHoverDimension,
    } from '../types'
    import {
      getAnnotationHoverIndices,
      getAnnotationsPositions,
    } from '../utils/annotationData'
    import {ANNOTATION_DEFAULT_HOVER_MARGIN} from '../constants/index'
    import {AnnotationHoverLayer} from './AnnotationHoverLayer'
    import {AnnotationLine} from './AnnotationLine'

    export interface AnnotationLayerProps extends LayerProps {
      spec: AnnotationLayerSpec
      config: AnnotationLayerConfig
    }

    const ANNOTATION_OVERLAY_DEFAULT_STYLE = {
      position: 'absolute',
    } as CSSProperties

    export const AnnotationLayer: FunctionComponent<AnnotationLayerProps> = props => {
      const {config, spec, width, height, hoverX, hoverY, xScale, yScale} = props
      const lineWidth = config.lineWidth || 2
      const annotationsPositions = useMemo(
        () => getAnnotationsPositions(spec.annotationData, xScale, yScale),
        [spec.annotationData, xScale, yScale]
      )
      const svgRef = useRef<SVGSVGElement>(null)

      let hoverDimension = 'xy' as LineHoverDimension
      if (config.hoverDimension === 'x' || config.hoverDimension === 'y') {
        hoverDimension = config.hoverDimension
      }

      const hoverMargin = config.hoverMargin
        ? config.hoverMargin
        : ANNOTATION_DEFAULT_HOVER_MARGIN

      const hoverRowIndices = getAnnotationHoverIndices(
        hoverDimension,
        hoverMargin,
        annotationsPositions,
        hoverX,
        hoverY
      )

      let boundingRect: DOMRect
      if (svgRef.current) {
        boundingRect = svgRef.current.getBoundingClientRect()
      }

      return (
        <svg
          className="giraffe-layer giraffe-layer-annotation"
          ref={svgRef}
          style={{...ANNOTATION_OVERLAY_DEFAULT_STYLE, width, height}}
        >
          <AnnotationHoverLayer
            {...props}
            annotationPositions={annotationsPositions}
            boundingReference={boundingRect}
            hoverRowIndices={hoverRowIndices}
            width={width}
          />
          {annotationsPositions.map(annotationData =>
            annotationData.dimension === 'y' ? (
              <AnnotationLine
                dimension={annotationData.dimension}
                key={`line-y-${annotationData.dimension}-${annotationData.startValue}-${annotationData.stopValue}`}
                length={width}
                startValue={annotationData.startValue}
                stopValue={annotationData.stopValue}
                color={annotationData.color}
                strokeWidth={lineWidth}
                pin={annotationData.pin}
              />
            ) : (
              <AnnotationLine
                dimension={annotationData.dimension}
                key={`line-x-${annotationData.dimension}-${annotationData.startValue}-${annotationData.stopValue}`}
                length={height}
                startValue={annotationData.startValue}
                stopValue={annotationData.stopValue}
                color={annotationData.color}
                strokeWidth={lineWidth}
                pin={annotationData.pin}
              />
            )
          )}
        </svg>
      )
    }