@cdc/chart 4.26.5 → 4.26.7

package/src/_stories/_mock/heatmap-average-age-categorical.json

@@ -277,7 +277,7 @@
     "hide": false,
     "position": "top",
     "style": "gradient",
-    "subStyle": "smooth",
+    "subStyle": "linear blocks",
     "label": "Average age",
     "hideBorder": false
   },

package/src/_stories/_mock/heatmap.json

@@ -117,7 +117,7 @@
     "hide": false,
     "position": "top",
     "style": "gradient",
-    "subStyle": "smooth",
+    "subStyle": "linear blocks",
     "label": "Cases per 100,000",
     "hideBorder": false
   },

package/src/components/Annotations/components/AnnotationDraggable.styles.css

@@ -1,5 +1,5 @@
 .cove-visualization.type-chart .annotation__desktop-label {
-  font-size: 16px;
+  /* font-size is applied inline so it stays in sync with the axis tick label size and scales by viewport. */
   line-height: 1.1rem;
 }
 
@@ -22,4 +22,25 @@
     text-align: center;
     width: 24px;
   }
+
+  .annotation__event-line {
+    pointer-events: none;
+  }
+
+  .annotation__event-line-label {
+    max-width: 186px;
+    width: fit-content;
+  }
+
+  /* Label right of the line. */
+  .cove-annotation-event-line__label--right {
+    padding-left: 0.5rem;
+    text-align: left;
+  }
+
+  /* Label left of the line. */
+  .cove-annotation-event-line__label--left {
+    padding-right: 0.5rem;
+    text-align: right;
+  }
 }

package/src/components/Annotations/components/AnnotationDraggable.tsx

@@ -2,7 +2,7 @@ import { useContext, useState } from 'react'
 import ConfigContext from '../../../ConfigContext'
 import DOMPurify from 'dompurify'
 import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
-import { isMobileAnnotationViewport } from '@cdc/core/helpers/viewports'
+import { isMobileAnnotationViewport, isMobileFontViewport } from '@cdc/core/helpers/viewports'
 
 // helpers
 import { findNearestDatum } from './findNearestDatum'
@@ -15,6 +15,13 @@ import { LinePath } from '@visx/shape'
 // styles
 import './AnnotationDraggable.styles.css'
 
+export const EVENT_LINE_LABEL_OFFSET = 2
+export const snapEventLineDx = (dx: number) => (dx >= 0 ? EVENT_LINE_LABEL_OFFSET : -EVENT_LINE_LABEL_OFFSET)
+
+// Keep annotation label text in sync with axis tick labels (see LinearChart.tsx).
+const TICK_LABEL_FONT_SIZE = 16
+const TICK_LABEL_FONT_SIZE_SMALL = 13
+
 const Annotations = ({
   xScale,
   yScale,
@@ -36,6 +43,9 @@ const Annotations = ({
   const AnnotationComponent = isEditor ? EditableAnnotation : VisxAnnotation
   const isMobile = isMobileAnnotationViewport(currentViewport) && config?.general?.mobileAnnotationDisplay !== 'text'
 
+  // Match the axis tick label font size (and its viewport-based scaling) for visual consistency.
+  const tickLabelFontSize = isMobileFontViewport(currentViewport) ? TICK_LABEL_FONT_SIZE_SMALL : TICK_LABEL_FONT_SIZE
+
   /**
    * Scale dx/dy offsets based on savedDimensions vs current dimensions.
    * This ensures label positions scale proportionally when chart is resized.
@@ -74,9 +84,11 @@ const Annotations = ({
     visibleAnnotations.map((annotation, annotationIndex) => {
       const originalIndex = annotations.indexOf(annotation)
       const text = annotation.text || ''
+      const isEventLine = annotation.style === 'event-line'
 
       // Calculate scaled dx/dy offsets based on savedDimensions
-      const { scaledDx, scaledDy } = getScaledOffsets(annotation)
+      const { scaledDx: rawScaledDx, scaledDy } = getScaledOffsets(annotation)
+      const scaledDx = isEventLine ? snapEventLineDx(rawScaledDx) : rawScaledDx
 
       // Default to absolute positioning
       let annotationX = xScaleAnnotation(annotation.x)
@@ -88,19 +100,22 @@ const Annotations = ({
         const dataPoint = dataSource.find(d => d[config.xAxis.dataKey] === annotation.dataX)
 
         if (dataPoint) {
-          const dataYValue = dataPoint[annotation.seriesKey]
-
           // For date/date-time axes, convert raw value to timestamp for scale
           let xScaleInput = annotation.dataX
           if (config.xAxis.type === 'date' || config.xAxis.type === 'date-time') {
             xScaleInput = parseDate(xScaleInput, false)?.getTime()
           }
 
-          // Check if this annotation's series is a bar in a grouped bar situation
-          const annotationSeries = config.series?.find(s => s.dataKey === annotation.seriesKey)
+          // Event-line annotations are series-agnostic; treat as single (non-grouped) anchor.
+          const annotationSeries = isEventLine
+            ? undefined
+            : config.series?.find(s => s.dataKey === annotation.seriesKey)
           const barSeriesCount = config.series?.filter(s => s.type === 'Bar').length || 0
           const isGroupedBarAnnotation =
-            annotationSeries?.type === 'Bar' && barSeriesCount > 1 && config.visualizationSubType !== 'stacked'
+            !isEventLine &&
+            annotationSeries?.type === 'Bar' &&
+            barSeriesCount > 1 &&
+            config.visualizationSubType !== 'stacked'
 
           if (isGroupedBarAnnotation && seriesScale) {
             // Position at group start + series offset + half series bar width
@@ -112,17 +127,23 @@ const Annotations = ({
             annotationX = xScale(xScaleInput) + (xScale.bandwidth?.() / 2 || 0)
           }
 
-          // Adjust X for arrow markers based on label direction
-          if (annotation.marker === 'arrow' && Math.abs(annotation.dx) >= 100) {
-            const direction = annotation.dx > 0 ? 1 : -1
-            const relevantBandwidth =
-              isGroupedBarAnnotation && seriesScale ? seriesScale.bandwidth?.() : xScale.bandwidth?.()
-            const nudgeAmount = relevantBandwidth ? relevantBandwidth / 6 : 2
-            annotationX += direction * nudgeAmount
-          }
+          if (isEventLine) {
+            // Anchor visx subject at the plot's vertical middle; the line spans full height.
+            annotationY = yMax / 2
+          } else {
+            // Adjust X for arrow markers based on label direction
+            if (annotation.marker === 'arrow' && Math.abs(annotation.dx) >= 100) {
+              const direction = annotation.dx > 0 ? 1 : -1
+              const relevantBandwidth =
+                isGroupedBarAnnotation && seriesScale ? seriesScale.bandwidth?.() : xScale.bandwidth?.()
+              const nudgeAmount = relevantBandwidth ? relevantBandwidth / 6 : 2
+              annotationX += direction * nudgeAmount
+            }
 
-          // Y position based on marker type
-          annotationY = yScale(dataYValue) - (annotation.marker === 'circle' ? 0 : 5)
+            // Y position based on marker type
+            const dataYValue = dataPoint[annotation.seriesKey]
+            annotationY = yScale(dataYValue) - (annotation.marker === 'circle' ? 0 : 5)
+          }
         }
       }
 
@@ -141,7 +162,7 @@ const Annotations = ({
           x={annotationX}
           y={annotationY}
           canEditLabel={annotation.edit.label || false}
-          canEditSubject={(annotation.edit.subject && annotation.connectionType !== 'none') || false}
+          canEditSubject={(annotation.edit.subject && (isEventLine || annotation.connectionType !== 'none')) || false}
           labelDragHandleProps={{ r: 15, stroke: 'red' }}
           subjectDragHandleProps={{ r: 15, stroke: 'red' }}
           onDragStart={() => {
@@ -149,7 +170,8 @@ const Annotations = ({
             setLiveDrag({ index: annotationIndex, dx: scaledDx })
           }}
           onDragMove={props => {
-            setLiveDrag({ index: annotationIndex, dx: props.dx })
+            const previewDx = isEventLine ? snapEventLineDx(props.dx) : props.dx
+            setLiveDrag({ index: annotationIndex, dx: previewDx })
           }}
           onDragEnd={props => {
             onDragStateChange(false)
@@ -166,9 +188,11 @@ const Annotations = ({
                 : annotation.x === xScaleAnnotation.invert(props.x) && annotation.y === yScaleAnnotation.invert(props.y)
 
             if (isLabelOnlyDrag) {
+              // Event-line snaps dx; callout persists raw drag offset.
+              const persistedDx = isEventLine ? snapEventLineDx(props.dx) : props.dx
               updatedAnnotations[originalIndex] = {
                 ...updatedAnnotations[originalIndex],
-                dx: props.dx,
+                dx: persistedDx,
                 dy: props.dy,
                 savedDimensions: currentDimensions
               }
@@ -209,107 +233,183 @@ const Annotations = ({
             })
           }}
         >
-          {!isMobile &&
-            (() => {
-              const labelWidth = config.general.showAnnotationDropdown ? 186 : 150
-              // Use live dx during drag (already in current space), otherwise use scaled dx
-              const currentDx = liveDrag?.index === annotationIndex ? liveDrag.dx : scaledDx
-              const { horizontalAnchor, verticalAnchor } = getAnnotationAnchors(annotationX, currentDx, labelWidth)
-              return (
-                <HtmlLabel
-                  className='annotation__desktop-label'
-                  containerStyle={{ width: 'fit-content', maxWidth: `${labelWidth}px` }}
-                  horizontalAnchor={horizontalAnchor}
-                  verticalAnchor={verticalAnchor}
-                  showAnchorLine={false}
-                >
-                  <div
-                    style={{
-                      borderRadius: 5, // Optional: set border radius
-                      backgroundColor: `rgba(255, 255, 255, ${
-                        annotation?.opacity ? Number(annotation?.opacity) / 100 : 1
-                      })`,
-                      padding: '10px',
-                      width: 'auto',
-                      display: config.general.showAnnotationDropdown ? 'inline-flex' : 'flex',
-                      justifyContent: 'start',
-                      flexDirection: 'row',
-                      alignItems: 'center'
-                    }}
-                    // role='presentation'
-                    tabIndex={0}
-                    aria-label={`Annotation text that reads: ${annotation.text}`}
-                  >
-                    {config?.general?.showAnnotationDropdown && (
-                      <>
-                        <p
-                          className='annotation__has-dropdown-number'
-                          style={{ margin: '2px 6px', position: 'relative', left: '-4px' }}
-                        >
-                          {originalIndex + 1}
-                        </p>
-                      </>
-                    )}
-                    <div dangerouslySetInnerHTML={sanitizedData()} />
-                  </div>
-                </HtmlLabel>
-              )
-            })()}
-          {annotation.connectionType === 'line' && (
-            <Connector type='line' pathProps={{ markerStart: `url(#marker-start--${originalIndex})` }} />
-          )}
-          {annotation.connectionType === 'elbow' && (
-            <Connector type='elbow' pathProps={{ markerStart: `url(#marker-start--${originalIndex})` }} />
-          )}
-          {annotation.connectionType === 'curve' && (
-            <LinePath
-              d={`M ${annotationX},${annotationY}
-                      Q ${annotationX + scaledDx / 2}, ${
-                annotationY + scaledDy / 2 + Number(annotation?.bezier) || 0
-              } ${annotationX + scaledDx},${annotationY + scaledDy}`}
-              stroke={APP_FONT_COLOR}
-              fill='none'
-              marker-start={`url(#marker-start--${originalIndex})`}
-            />
-          )}
-          {annotation.marker === 'circle' && (
-            <CircleSubject className='circle-subject' stroke={APP_FONT_COLOR} radius={8} />
-          )}
-          {annotation.marker === 'arrow' && (
-            <MarkerArrow
-              fill={APP_FONT_COLOR}
-              id={`marker-start--${originalIndex}`}
-              x={annotationX}
-              y={annotationY}
-              stroke={APP_FONT_COLOR}
-              markerWidth={12}
-              size={10}
-              strokeWidth={1}
-              orient='auto-start-reverse'
-              markerUnits='userSpaceOnUse'
-            />
-          )}
-          {isMobile && (
+          {isEventLine ? (
             <>
-              <circle
-                fill='white'
-                cx={annotationX + scaledDx}
-                cy={annotationY + scaledDy}
-                r={12}
-                className='annotation__mobile-label annotation__mobile-label-circle'
-                stroke={APP_FONT_COLOR}
+              <line
+                x1={annotationX}
+                x2={annotationX}
+                y1={0}
+                y2={yMax}
+                stroke='#333'
+                strokeWidth={1}
+                className='annotation__event-line'
+                pointerEvents='none'
               />
-              <text
-                height={16}
-                x={annotationX + scaledDx}
-                y={annotationY + scaledDy + 1}
-                fontSize={14}
-                className='annotation__mobile-label'
-                alignmentBaseline='middle'
-                textAnchor='middle'
-              >
-                {originalIndex + 1}
-              </text>
+              {!isMobile &&
+                (() => {
+                  // Use live dx during drag (already in current space), otherwise use scaled dx
+                  const currentDx = liveDrag?.index === annotationIndex ? liveDrag.dx : scaledDx
+                  const onRight = currentDx >= 0
+                  return (
+                    <HtmlLabel
+                      className='annotation__desktop-label'
+                      containerStyle={{ width: 'fit-content', maxWidth: '186px' }}
+                      horizontalAnchor={onRight ? 'start' : 'end'}
+                      verticalAnchor='middle'
+                      showAnchorLine={false}
+                    >
+                      <div
+                        className={`annotation__event-line-label ${
+                          onRight
+                            ? 'cove-annotation-event-line__label--right'
+                            : 'cove-annotation-event-line__label--left'
+                        }`}
+                        style={{
+                          backgroundColor: `rgba(255, 255, 255, ${
+                            annotation?.opacity ? Number(annotation?.opacity) / 100 : 1
+                          })`,
+                          padding: '6px 8px',
+                          color: annotation.colors?.label || APP_FONT_COLOR,
+                          fontSize: tickLabelFontSize
+                        }}
+                        tabIndex={0}
+                        aria-label={`Annotation text that reads: ${annotation.text}`}
+                      >
+                        <div dangerouslySetInnerHTML={sanitizedData()} />
+                      </div>
+                    </HtmlLabel>
+                  )
+                })()}
+              {isMobile && (
+                <>
+                  <circle
+                    fill='white'
+                    cx={annotationX + scaledDx}
+                    cy={annotationY + scaledDy}
+                    r={12}
+                    className='annotation__mobile-label annotation__mobile-label-circle'
+                    stroke={APP_FONT_COLOR}
+                  />
+                  <text
+                    height={16}
+                    x={annotationX + scaledDx}
+                    y={annotationY + scaledDy + 1}
+                    fontSize={14}
+                    className='annotation__mobile-label'
+                    alignmentBaseline='middle'
+                    textAnchor='middle'
+                  >
+                    {originalIndex + 1}
+                  </text>
+                </>
+              )}
+            </>
+          ) : (
+            <>
+              {!isMobile &&
+                (() => {
+                  const labelWidth = config.general.showAnnotationDropdown ? 186 : 150
+                  // Use live dx during drag (already in current space), otherwise use scaled dx
+                  const currentDx = liveDrag?.index === annotationIndex ? liveDrag.dx : scaledDx
+                  const { horizontalAnchor, verticalAnchor } = getAnnotationAnchors(annotationX, currentDx, labelWidth)
+                  return (
+                    <HtmlLabel
+                      className='annotation__desktop-label'
+                      containerStyle={{ width: 'fit-content', maxWidth: `${labelWidth}px` }}
+                      horizontalAnchor={horizontalAnchor}
+                      verticalAnchor={verticalAnchor}
+                      showAnchorLine={false}
+                    >
+                      <div
+                        style={{
+                          borderRadius: 5, // Optional: set border radius
+                          backgroundColor: `rgba(255, 255, 255, ${
+                            annotation?.opacity ? Number(annotation?.opacity) / 100 : 1
+                          })`,
+                          padding: '10px',
+                          width: 'auto',
+                          display: config.general.showAnnotationDropdown ? 'inline-flex' : 'flex',
+                          justifyContent: 'start',
+                          flexDirection: 'row',
+                          alignItems: 'center',
+                          fontSize: tickLabelFontSize
+                        }}
+                        // role='presentation'
+                        tabIndex={0}
+                        aria-label={`Annotation text that reads: ${annotation.text}`}
+                      >
+                        {config?.general?.showAnnotationDropdown && (
+                          <>
+                            <p
+                              className='annotation__has-dropdown-number'
+                              style={{ margin: '2px 6px', position: 'relative', left: '-4px' }}
+                            >
+                              {originalIndex + 1}
+                            </p>
+                          </>
+                        )}
+                        <div dangerouslySetInnerHTML={sanitizedData()} />
+                      </div>
+                    </HtmlLabel>
+                  )
+                })()}
+              {annotation.connectionType === 'line' && (
+                <Connector type='line' pathProps={{ markerStart: `url(#marker-start--${originalIndex})` }} />
+              )}
+              {annotation.connectionType === 'elbow' && (
+                <Connector type='elbow' pathProps={{ markerStart: `url(#marker-start--${originalIndex})` }} />
+              )}
+              {annotation.connectionType === 'curve' && (
+                <LinePath
+                  d={`M ${annotationX},${annotationY}
+                      Q ${annotationX + scaledDx / 2}, ${
+                    annotationY + scaledDy / 2 + Number(annotation?.bezier) || 0
+                  } ${annotationX + scaledDx},${annotationY + scaledDy}`}
+                  stroke={APP_FONT_COLOR}
+                  fill='none'
+                  marker-start={`url(#marker-start--${originalIndex})`}
+                />
+              )}
+              {annotation.marker === 'circle' && (
+                <CircleSubject className='circle-subject' stroke={APP_FONT_COLOR} radius={8} />
+              )}
+              {annotation.marker === 'arrow' && (
+                <MarkerArrow
+                  fill={APP_FONT_COLOR}
+                  id={`marker-start--${originalIndex}`}
+                  x={annotationX}
+                  y={annotationY}
+                  stroke={APP_FONT_COLOR}
+                  markerWidth={12}
+                  size={10}
+                  strokeWidth={1}
+                  orient='auto-start-reverse'
+                  markerUnits='userSpaceOnUse'
+                />
+              )}
+              {isMobile && (
+                <>
+                  <circle
+                    fill='white'
+                    cx={annotationX + scaledDx}
+                    cy={annotationY + scaledDy}
+                    r={12}
+                    className='annotation__mobile-label annotation__mobile-label-circle'
+                    stroke={APP_FONT_COLOR}
+                  />
+                  <text
+                    height={16}
+                    x={annotationX + scaledDx}
+                    y={annotationY + scaledDy + 1}
+                    fontSize={14}
+                    className='annotation__mobile-label'
+                    alignmentBaseline='middle'
+                    textAnchor='middle'
+                  >
+                    {originalIndex + 1}
+                  </text>
+                </>
+              )}
             </>
           )}
         </AnnotationComponent>

package/src/components/Annotations/tests/AnnotationDraggable.test.tsx

@@ -0,0 +1,198 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { describe, expect, it, beforeAll, vi } from 'vitest'
+import { scaleBand, scaleLinear } from '@visx/scale'
+import AnnotationDraggable, { EVENT_LINE_LABEL_OFFSET, snapEventLineDx } from '../components/AnnotationDraggable'
+import ConfigContext from '../../../ConfigContext'
+import { createMockChartContext } from '../../LinearChart/tests/mockConfigContext'
+
+// jsdom compat for visx (ResizeObserver + SVG bbox).
+vi.stubGlobal(
+  'ResizeObserver',
+  vi.fn(() => ({
+    observe: vi.fn(),
+    unobserve: vi.fn(),
+    disconnect: vi.fn()
+  }))
+)
+
+beforeAll(() => {
+  const mockBBox = { x: 0, y: 0, width: 100, height: 20 }
+  // @ts-expect-error mocking SVG method
+  SVGElement.prototype.getBBox = vi.fn(() => mockBBox)
+  // @ts-expect-error mocking SVG method
+  SVGElement.prototype.getBoundingClientRect = vi.fn(() => ({
+    x: 0,
+    y: 0,
+    width: 100,
+    height: 20,
+    top: 0,
+    left: 0,
+    right: 100,
+    bottom: 20
+  }))
+})
+
+const buildScales = (xMax: number, yMax: number) => ({
+  xScale: scaleBand({ domain: ['Jan', 'Feb'], range: [0, xMax], padding: 0 }),
+  yScale: scaleLinear({ domain: [0, 100], range: [yMax, 0] }),
+  xScaleAnnotation: scaleLinear({ domain: [0, 100], range: [0, xMax] }),
+  yScaleAnnotation: scaleLinear({ domain: [0, 100], range: [0, yMax] })
+})
+
+const baseEventLineAnnotation = {
+  text: 'Voting Rights Act',
+  style: 'event-line',
+  anchorMode: 'data',
+  dataX: 'Jan',
+  x: 50,
+  y: 50,
+  dx: 12,
+  dy: 0,
+  opacity: 100,
+  colors: { connector: '#444', label: '#000' },
+  edit: { subject: false, label: true },
+  anchor: { horizontal: false, vertical: false },
+  connectionType: 'line' as const,
+  marker: 'arrow' as const,
+  snapToSubject: false,
+  lineType: 'curveLinear'
+}
+
+const renderAnnotationDraggable = (annotation: any, xMax = 800, yMax = 400) => {
+  const data = [
+    { month: 'Jan', value: 50 },
+    { month: 'Feb', value: 75 }
+  ]
+  const context = createMockChartContext(
+    {
+      annotations: [annotation],
+      visualizationType: 'Line',
+      xAxis: { type: 'categorical', dataKey: 'month' } as any,
+      series: [{ dataKey: 'value', type: 'Line' }] as any,
+      data,
+      general: { showAnnotationDropdown: false, mobileAnnotationDisplay: 'symbol' } as any
+    } as any,
+    {
+      transformedData: data,
+      visibleAnnotations: [annotation]
+    }
+  )
+
+  const scales = buildScales(xMax, yMax)
+  return render(
+    <ConfigContext.Provider value={context as any}>
+      <svg width={xMax} height={yMax}>
+        <AnnotationDraggable
+          {...scales}
+          xMax={xMax}
+          yMax={yMax}
+          seriesScale={undefined}
+          svgRef={{ current: null } as any}
+          onDragStateChange={() => {}}
+        />
+      </svg>
+    </ConfigContext.Provider>
+  )
+}
+
+describe('AnnotationDraggable - event-line style', () => {
+  it('renders a full-height vertical line that spans 0..yMax', () => {
+    const { container } = renderAnnotationDraggable(baseEventLineAnnotation)
+
+    const line = container.querySelector('line.annotation__event-line')
+    expect(line).toBeTruthy()
+    expect(line?.getAttribute('y1')).toBe('0')
+    expect(line?.getAttribute('y2')).toBe('400')
+  })
+
+  it('strokes the vertical line with the axis color (#333), ignoring colors.connector', () => {
+    const { container } = renderAnnotationDraggable({
+      ...baseEventLineAnnotation,
+      colors: { connector: '#ff0000', label: '#000' }
+    })
+
+    const line = container.querySelector('line.annotation__event-line')
+    expect(line?.getAttribute('stroke')).toBe('#333')
+  })
+
+  it('uses the right-side label class (text-align left) when dx >= 0', () => {
+    const { container } = renderAnnotationDraggable({
+      ...baseEventLineAnnotation,
+      dx: 12
+    })
+
+    expect(container.querySelector('.cove-annotation-event-line__label--right')).toBeTruthy()
+    expect(container.querySelector('.cove-annotation-event-line__label--left')).toBeFalsy()
+  })
+
+  it('uses the left-side label class (text-align right) when dx < 0', () => {
+    const { container } = renderAnnotationDraggable({
+      ...baseEventLineAnnotation,
+      dx: -12
+    })
+
+    expect(container.querySelector('.cove-annotation-event-line__label--left')).toBeTruthy()
+    expect(container.querySelector('.cove-annotation-event-line__label--right')).toBeFalsy()
+  })
+
+  it('does not render a callout marker (no .circle-subject) for event-line', () => {
+    const { container } = renderAnnotationDraggable({
+      ...baseEventLineAnnotation,
+      marker: 'circle' as const
+    })
+
+    expect(container.querySelector('.circle-subject')).toBeFalsy()
+  })
+})
+
+describe('snapEventLineDx', () => {
+  it('snaps any positive value to +EVENT_LINE_LABEL_OFFSET', () => {
+    expect(snapEventLineDx(0)).toBe(EVENT_LINE_LABEL_OFFSET)
+    expect(snapEventLineDx(1)).toBe(EVENT_LINE_LABEL_OFFSET)
+    expect(snapEventLineDx(47)).toBe(EVENT_LINE_LABEL_OFFSET)
+    expect(snapEventLineDx(9999)).toBe(EVENT_LINE_LABEL_OFFSET)
+  })
+
+  it('snaps any negative value to -EVENT_LINE_LABEL_OFFSET', () => {
+    expect(snapEventLineDx(-1)).toBe(-EVENT_LINE_LABEL_OFFSET)
+    expect(snapEventLineDx(-47)).toBe(-EVENT_LINE_LABEL_OFFSET)
+    expect(snapEventLineDx(-9999)).toBe(-EVENT_LINE_LABEL_OFFSET)
+  })
+})
+
+describe('AnnotationDraggable - event-line dx snapping at render', () => {
+  it('still uses right-side class when stored dx is a large positive value', () => {
+    const { container } = renderAnnotationDraggable({
+      ...baseEventLineAnnotation,
+      dx: 47
+    })
+
+    expect(container.querySelector('.cove-annotation-event-line__label--right')).toBeTruthy()
+    expect(container.querySelector('.cove-annotation-event-line__label--left')).toBeFalsy()
+  })
+
+  it('still uses left-side class when stored dx is a large negative value', () => {
+    const { container } = renderAnnotationDraggable({
+      ...baseEventLineAnnotation,
+      dx: -47
+    })
+
+    expect(container.querySelector('.cove-annotation-event-line__label--left')).toBeTruthy()
+    expect(container.querySelector('.cove-annotation-event-line__label--right')).toBeFalsy()
+  })
+})
+
+describe('AnnotationDraggable - callout style (regression)', () => {
+  it('still renders a callout annotation without a full-height event line', () => {
+    const calloutAnnotation = {
+      ...baseEventLineAnnotation,
+      style: 'callout' as const,
+      anchorMode: 'fixed' as const,
+      dataX: undefined
+    }
+    const { container } = renderAnnotationDraggable(calloutAnnotation)
+
+    expect(container.querySelector('line.annotation__event-line')).toBeFalsy()
+  })
+})