waveform-analysis 0.1.30 → 0.1.31

package/src/components/interaction/viewportInteractionState.ts

@@ -0,0 +1,89 @@
+import type { ViewportSelectionState } from '../core/waveformChartTypes'
+
+export interface ViewportGestureStart {
+  trackIndex: number
+  independent: boolean
+  startX: number
+  startY: number
+  pointerId: number
+  kind: 'box' | 'pan'
+  xDomain: [number, number]
+  yDomains: Record<string, [number, number]>
+}
+
+export interface ViewportGesturePosition {
+  currentX: number
+  currentY: number
+}
+
+export type ViewportInteractionEvent =
+  | { type: 'begin'; gesture: ViewportGestureStart }
+  | { type: 'move'; pointerId: number; position: ViewportGesturePosition }
+  | { type: 'finish'; pointerId: number; position: ViewportGesturePosition }
+  | { type: 'cancel'; pointerId?: number }
+  | { type: 'reset' }
+
+export interface ViewportInteractionTransition {
+  state: ViewportSelectionState | null
+  accepted: boolean
+  completed: ViewportSelectionState | null
+}
+
+function createSelectionState(input: ViewportGestureStart): ViewportSelectionState {
+  return {
+    ...input,
+    currentX: input.startX,
+    currentY: input.startY,
+    xDomain: [...input.xDomain],
+    yDomains: Object.fromEntries(
+      Object.entries(input.yDomains).map(([key, domain]) => [key, [...domain] as [number, number]]),
+    ),
+  }
+}
+
+function withPosition(
+  state: ViewportSelectionState,
+  position: ViewportGesturePosition,
+): ViewportSelectionState {
+  return { ...state, ...position }
+}
+
+function rejectedTransition(state: ViewportSelectionState | null): ViewportInteractionTransition {
+  return { state, accepted: false, completed: null }
+}
+
+export function transitionViewportInteraction(
+  state: ViewportSelectionState | null,
+  event: ViewportInteractionEvent,
+): ViewportInteractionTransition {
+  switch (event.type) {
+    case 'begin':
+      return state
+        ? rejectedTransition(state)
+        : { state: createSelectionState(event.gesture), accepted: true, completed: null }
+    case 'move':
+      if (!state || state.pointerId !== event.pointerId) return rejectedTransition(state)
+      return { state: withPosition(state, event.position), accepted: true, completed: null }
+    case 'finish':
+      if (!state || state.pointerId !== event.pointerId) return rejectedTransition(state)
+      return {
+        state: null,
+        accepted: true,
+        completed: withPosition(state, event.position),
+      }
+    case 'cancel':
+      if (!state || (event.pointerId !== undefined && state.pointerId !== event.pointerId)) {
+        return rejectedTransition(state)
+      }
+      return { state: null, accepted: true, completed: null }
+    case 'reset':
+      return { state: null, accepted: true, completed: null }
+  }
+}
+
+export function reduceViewportInteraction(
+  state: ViewportSelectionState | null,
+  event: ViewportInteractionEvent,
+): ViewportSelectionState | null {
+  return transitionViewportInteraction(state, event).state
+}

package/src/components/interaction/zoomConstraints.ts

@@ -0,0 +1,167 @@
+import { scaleLinear, zoomIdentity, type ZoomTransform } from 'd3'
+
+import type { WaveformPoint } from '../../types'
+import { ZOOM_CONSTRAINTS } from '../core/constants'
+
+interface PointSeriesSource {
+  points: WaveformPoint[]
+}
+
+export type ZoomSeriesGroup = readonly PointSeriesSource[]
+
+interface ZoomConstraintOptions {
+  minZoomSpan?: number
+  minVisiblePoints?: number
+}
+
+const xValueCache = new WeakMap<object, Map<string, number[]>>()
+
+function normalizedBoundary(boundary: [number, number]): [number, number] {
+  return boundary[0] <= boundary[1] ? [...boundary] : [boundary[1], boundary[0]]
+}
+
+function resolveRequiredPointCount(minimum: number | undefined): number {
+  return Number.isFinite(minimum) && (minimum ?? 0) > 0 ? Math.ceil(minimum as number) : 0
+}
+
+function uniqueXValues(group: ZoomSeriesGroup, boundary: [number, number]): number[] {
+  const boundaryKey = `${boundary[0]}\u0000${boundary[1]}`
+  const cached = xValueCache.get(group)?.get(boundaryKey)
+  if (cached) return cached
+  const values = new Set<number>()
+  for (const series of group) {
+    for (const point of series.points) {
+      if (point.x >= boundary[0] && point.x <= boundary[1]) values.add(point.x)
+    }
+  }
+  const sorted = Array.from(values).sort((left, right) => left - right)
+  const groupCache = xValueCache.get(group) ?? new Map<string, number[]>()
+  groupCache.set(boundaryKey, sorted)
+  xValueCache.set(group, groupCache)
+  return sorted
+}
+
+function minimumPointSpan(
+  groups: readonly ZoomSeriesGroup[],
+  boundary: [number, number],
+  required: number,
+): number {
+  if (required <= 1) return 0
+  let minimumSpan = 0
+  for (const group of groups) {
+    const values = uniqueXValues(group, boundary)
+    if (values.length < required) return boundary[1] - boundary[0]
+    let groupSpan = Number.POSITIVE_INFINITY
+    for (let index = 0; index + required <= values.length; index += 1) {
+      groupSpan = Math.min(groupSpan, values[index + required - 1] - values[index])
+    }
+    const endpointTolerance =
+      Number.EPSILON * Math.max(1, Math.abs(boundary[0]), Math.abs(boundary[1])) * 16
+    minimumSpan = Math.max(minimumSpan, groupSpan + endpointTolerance)
+  }
+  return minimumSpan
+}
+
+export function resolveMinimumZoomSpan(
+  boundary: [number, number],
+  groups: readonly ZoomSeriesGroup[],
+  options: ZoomConstraintOptions,
+): number {
+  const normalized = normalizedBoundary(boundary)
+  const boundarySpan = normalized[1] - normalized[0]
+  if (!Number.isFinite(boundarySpan) || boundarySpan <= 0) return 0
+  const configuredSpan =
+    Number.isFinite(options.minZoomSpan) && (options.minZoomSpan ?? 0) > 0
+      ? Math.min(boundarySpan, options.minZoomSpan as number)
+      : 0
+  const required = resolveRequiredPointCount(options.minVisiblePoints)
+  const pointSpan = minimumPointSpan(groups, normalized, required)
+  if (configuredSpan > 0 || required > 0) {
+    return Math.max(configuredSpan, pointSpan)
+  }
+  return boundarySpan / ZOOM_CONSTRAINTS.DEFAULT_MAX_SCALE
+}
+
+function expandToMinimumPoints(
+  domain: [number, number],
+  boundary: [number, number],
+  groups: readonly ZoomSeriesGroup[],
+  required: number,
+): [number, number] {
+  if (required <= 0) return domain
+  const endpointTolerance =
+    Number.EPSILON * Math.max(1, Math.abs(boundary[0]), Math.abs(boundary[1])) * 16
+  let expanded = domain
+  for (const group of groups) {
+    const values = uniqueXValues(group, boundary)
+    if (values.length < required) return [...boundary]
+    const visibleCount = values.filter(
+      (value) => value >= expanded[0] && value <= expanded[1],
+    ).length
+    if (visibleCount >= required) continue
+    let best: [number, number] | undefined
+    let bestSpan = Number.POSITIVE_INFINITY
+    let bestCenterDistance = Number.POSITIVE_INFINITY
+    const requestedCenter = (expanded[0] + expanded[1]) / 2
+    for (let index = 0; index + required <= values.length; index += 1) {
+      const candidate: [number, number] = [
+        Math.max(boundary[0], Math.min(expanded[0], values[index] - endpointTolerance)),
+        Math.min(
+          boundary[1],
+          Math.max(expanded[1], values[index + required - 1] + endpointTolerance),
+        ),
+      ]
+      const span = candidate[1] - candidate[0]
+      const centerDistance = Math.abs((candidate[0] + candidate[1]) / 2 - requestedCenter)
+      if (span < bestSpan || (span === bestSpan && centerDistance < bestCenterDistance)) {
+        best = candidate
+        bestSpan = span
+        bestCenterDistance = centerDistance
+      }
+    }
+    expanded = best ?? [...boundary]
+  }
+  return expanded
+}
+
+export function constrainZoomDomain(
+  domain: [number, number],
+  boundary: [number, number],
+  groups: readonly ZoomSeriesGroup[],
+  options: ZoomConstraintOptions,
+): [number, number] {
+  const normalized = normalizedBoundary(boundary)
+  const boundarySpan = normalized[1] - normalized[0]
+  if (!Number.isFinite(boundarySpan) || boundarySpan <= 0) return normalized
+  if (Math.abs(domain[1] - domain[0]) >= boundarySpan * (1 - 1e-12)) return normalized
+  const requested: [number, number] = [
+    Math.max(normalized[0], Math.min(domain[0], domain[1])),
+    Math.min(normalized[1], Math.max(domain[0], domain[1])),
+  ]
+  const expanded = expandToMinimumPoints(
+    requested,
+    normalized,
+    groups,
+    resolveRequiredPointCount(options.minVisiblePoints),
+  )
+  const minimumSpan = resolveMinimumZoomSpan(normalized, groups, options)
+  const span = Math.max(minimumSpan, Math.min(boundarySpan, expanded[1] - expanded[0]))
+  const center = (expanded[0] + expanded[1]) / 2
+  const start = Math.max(normalized[0], Math.min(center - span / 2, normalized[1] - span))
+  return [start, start + span]
+}
+
+export function transformForDomain(
+  domain: [number, number],
+  baseDomain: [number, number],
+  width: number,
+): ZoomTransform {
+  const baseSpan = baseDomain[1] - baseDomain[0]
+  const span = domain[1] - domain[0]
+  if (!Number.isFinite(baseSpan) || !Number.isFinite(span) || baseSpan <= 0 || span <= 0) {
+    return zoomIdentity
+  }
+  const scale = baseSpan / span
+  const baseScale = scaleLinear(baseDomain, [0, width])
+  return zoomIdentity.translate(-scale * baseScale(domain[0]), 0).scale(scale)
+}

package/src/components/waveformChartCases/viewportLifecycle.test.ts

@@ -0,0 +1,132 @@
+import { flushPromises } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+
+import { gridSeries, mountSizedChart } from '../../test/waveformChart'
+import WaveformChartView from '../WaveformChartView.vue'
+
+describe('WaveformChart viewport lifecycle', () => {
+  it('cleans an active shared gesture when its track is removed', async () => {
+    const wrapper = await mountSizedChart(gridSeries(2), {
+      displayMode: 'separated',
+      grid: { rowCount: 2, columnCount: 1 },
+    })
+    const overlay = wrapper.get('.waveform-chart__overlay--shared')
+    const width = Number(overlay.attributes('width'))
+    const height = Number(overlay.attributes('height'))
+    const releasePointerCapture = vi.fn()
+    Object.defineProperty(overlay.element, 'getBoundingClientRect', {
+      value: () => ({ left: 0, top: 0, width, height }),
+    })
+    Object.defineProperty(overlay.element, 'setPointerCapture', { value: vi.fn() })
+    Object.defineProperty(overlay.element, 'releasePointerCapture', {
+      value: releasePointerCapture,
+    })
+
+    const dispatchPointer = (type: string, pointerId: number, clientY: number) => {
+      const event = new MouseEvent(type, {
+        button: 0,
+        clientX: width / 2,
+        clientY,
+        bubbles: true,
+      })
+      Object.defineProperty(event, 'pointerId', { value: pointerId })
+      overlay.element.dispatchEvent(event)
+    }
+
+    dispatchPointer('pointerdown', 41, height * 0.75)
+    await flushPromises()
+    expect(wrapper.find('.waveform-chart__zoom-selection').exists()).toBe(true)
+
+    await wrapper.setProps({ data: gridSeries(1) })
+    await flushPromises()
+    dispatchPointer('pointerup', 41, height * 0.75)
+    await flushPromises()
+
+    expect(releasePointerCapture).toHaveBeenCalledWith(41)
+    expect(wrapper.find('.waveform-chart__zoom-selection').exists()).toBe(false)
+
+    dispatchPointer('pointerdown', 42, height / 2)
+    dispatchPointer('pointermove', 42, height / 2 + 20)
+    await flushPromises()
+    expect(wrapper.find('.waveform-chart__zoom-selection').exists()).toBe(true)
+  })
+
+  it('cleans an active gesture when its overlay leaves the DOM', async () => {
+    const wrapper = await mountSizedChart(
+      {
+        kind: 'points',
+        points: [
+          { x: 0, y: 0 },
+          { x: 1, y: 1 },
+        ],
+      },
+      { displayMode: 'separated' },
+    )
+    const overlay = wrapper.get('.waveform-chart__overlay--shared')
+    const width = Number(overlay.attributes('width'))
+    const height = Number(overlay.attributes('height'))
+    const releasePointerCapture = vi.fn(() => {
+      throw new DOMException('Pointer capture is no longer available', 'NotFoundError')
+    })
+    Object.defineProperty(overlay.element, 'getBoundingClientRect', {
+      value: () => ({ left: 0, top: 0, width, height }),
+    })
+    Object.defineProperty(overlay.element, 'setPointerCapture', { value: vi.fn() })
+    Object.defineProperty(overlay.element, 'releasePointerCapture', {
+      value: releasePointerCapture,
+    })
+
+    const down = new MouseEvent('pointerdown', {
+      button: 0,
+      clientX: width / 2,
+      clientY: height / 2,
+      bubbles: true,
+    })
+    Object.defineProperty(down, 'pointerId', { value: 43 })
+    overlay.element.dispatchEvent(down)
+    await wrapper.setProps({ hiddenSeriesIds: ['series-0'] })
+    await flushPromises()
+
+    expect(wrapper.find('.waveform-chart__overlay--shared').exists()).toBe(false)
+    const view = wrapper.findComponent(WaveformChartView)
+    const finishViewportDrag = (
+      view.vm as unknown as { finishViewportDrag: (event: PointerEvent) => void }
+    ).finishViewportDrag
+    const up = new MouseEvent('pointerup', {
+      clientX: width / 2,
+      clientY: height / 2,
+      bubbles: true,
+    })
+    Object.defineProperty(up, 'pointerId', { value: 43 })
+    finishViewportDrag(up as unknown as PointerEvent)
+    await flushPromises()
+
+    expect(releasePointerCapture).toHaveBeenCalledWith(43)
+    expect(wrapper.find('.waveform-chart__zoom-selection').exists()).toBe(false)
+
+    await wrapper.setProps({ hiddenSeriesIds: [] })
+    await flushPromises()
+    const nextOverlay = wrapper.get('.waveform-chart__overlay--shared')
+    Object.defineProperty(nextOverlay.element, 'getBoundingClientRect', {
+      value: () => ({ left: 0, top: 0, width, height }),
+    })
+    const nextDown = new MouseEvent('pointerdown', {
+      button: 0,
+      clientX: width / 2,
+      clientY: height / 2,
+      bubbles: true,
+    })
+    Object.defineProperty(nextDown, 'pointerId', { value: 44 })
+    nextOverlay.element.dispatchEvent(nextDown)
+    const nextMove = new MouseEvent('pointermove', {
+      clientX: width * 0.75,
+      clientY: height / 2,
+      bubbles: true,
+    })
+    Object.defineProperty(nextMove, 'pointerId', { value: 44 })
+    nextOverlay.element.dispatchEvent(nextMove)
+    await flushPromises()
+
+    expect(wrapper.find('.waveform-chart__zoom-selection').exists()).toBe(true)
+  })
+})

package/src/components/waveformChartCases/zoomPointConstraints.test.ts

@@ -0,0 +1,248 @@
+import { flushPromises, type VueWrapper } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+import { flushAnimationFrames } from '../../test/setup'
+import { mountSizedChart } from '../../test/waveformChart'
+
+const regularPoints = Array.from({ length: 1_200 }, (_, index) => ({ x: index, y: index % 11 }))
+
+function visibleXCount(domain: [number, number], values = regularPoints): number {
+  return new Set(
+    values.filter((point) => point.x >= domain[0] && point.x <= domain[1]).map((point) => point.x),
+  ).size
+}
+
+function prepareOverlay(wrapper: VueWrapper, selector: string) {
+  const overlay = wrapper.get(selector)
+  const width = Number(overlay.attributes('width'))
+  const height = Number(overlay.attributes('height'))
+  Object.defineProperty(overlay.element, 'getBoundingClientRect', {
+    value: () => ({ left: 0, top: 0, width, height }),
+  })
+  return { overlay, width, height }
+}
+
+async function dispatchWheel(
+  overlay: ReturnType<VueWrapper['get']>,
+  width: number,
+  height: number,
+  deltaY: number,
+) {
+  overlay.element.dispatchEvent(
+    new WheelEvent('wheel', {
+      deltaY,
+      clientX: width / 2,
+      clientY: height / 2,
+      bubbles: true,
+      cancelable: true,
+    }),
+  )
+  flushAnimationFrames()
+  await flushPromises()
+}
+
+function dispatchBox(
+  overlay: ReturnType<VueWrapper['get']>,
+  startX: number,
+  endX: number,
+  height: number,
+  pointerId: number,
+) {
+  for (const [type, clientX] of [
+    ['pointerdown', startX],
+    ['pointermove', endX],
+    ['pointerup', endX],
+  ] as const) {
+    const event = new MouseEvent(type, {
+      button: 0,
+      clientX,
+      clientY: height / 2,
+      bubbles: true,
+    })
+    Object.defineProperty(event, 'pointerId', { value: pointerId })
+    overlay.element.dispatchEvent(event)
+  }
+}
+
+describe('WaveformChart point-aware zoom constraints', () => {
+  it('wheel-zooms 1,200 samples to two distinct X values, stops, and still zooms out', async () => {
+    const wrapper = await mountSizedChart(
+      { kind: 'points', points: regularPoints },
+      { minVisiblePoints: 2 },
+    )
+    const { overlay, width, height } = prepareOverlay(
+      wrapper,
+      '.waveform-chart__overlay--independent',
+    )
+
+    await dispatchWheel(overlay, width, height, -4_000)
+    await dispatchWheel(overlay, width, height, -4_000)
+    const twoPointDomain = wrapper.emitted('zoom-change')?.at(-1)?.[0] as [number, number]
+    expect(visibleXCount(twoPointDomain)).toBe(2)
+
+    const eventCount = wrapper.emitted('zoom-change')?.length ?? 0
+    await dispatchWheel(overlay, width, height, -1_000)
+    expect(wrapper.emitted('zoom-change')?.length ?? 0).toBe(eventCount)
+
+    await dispatchWheel(overlay, width, height, 4_000)
+    const partiallyZoomedOut = wrapper.emitted('zoom-change')?.at(-1)?.[0] as [number, number]
+    expect(partiallyZoomedOut[1] - partiallyZoomedOut[0]).toBeGreaterThan(
+      twoPointDomain[1] - twoPointDomain[0],
+    )
+    await dispatchWheel(overlay, width, height, 4_000)
+    const fullyZoomedOut = wrapper.emitted('zoom-change')?.at(-1)?.[0] as [number, number]
+    expect(fullyZoomedOut).toEqual([0, 1_199])
+  })
+
+  it('keeps two fractional samples when the wheel focus falls between sample positions', async () => {
+    const points = Array.from({ length: 1_000 }, (_, index) => ({
+      x: -5 + (index * 10) / 999,
+      y: index,
+    }))
+    const wrapper = await mountSizedChart(
+      { kind: 'points', points },
+      { minVisiblePoints: 2, initialXDomain: [-5, 5] },
+    )
+    const { overlay, width, height } = prepareOverlay(
+      wrapper,
+      '.waveform-chart__overlay--independent',
+    )
+
+    for (let index = 0; index < 3; index += 1) {
+      overlay.element.dispatchEvent(
+        new WheelEvent('wheel', {
+          deltaY: -4_000,
+          clientX: width * 0.5032,
+          clientY: height / 2,
+          bubbles: true,
+          cancelable: true,
+        }),
+      )
+      flushAnimationFrames()
+      await flushPromises()
+    }
+
+    const domain = wrapper.emitted('zoom-change')?.at(-1)?.[0] as [number, number]
+    expect(visibleXCount(domain, points)).toBe(2)
+  })
+
+  it('uses repeated box zooms to reach exactly two distinct X values', async () => {
+    const wrapper = await mountSizedChart(
+      { kind: 'points', points: regularPoints },
+      { minVisiblePoints: 2 },
+    )
+    const { overlay, width, height } = prepareOverlay(
+      wrapper,
+      '.waveform-chart__overlay--independent',
+    )
+
+    for (let index = 0; index < 3; index += 1) {
+      dispatchBox(overlay, width / 2 - 4, width / 2 + 4, height, index + 1)
+      await flushPromises()
+    }
+
+    const domain = wrapper.emitted('zoom-change')?.at(-1)?.[0] as [number, number]
+    expect(visibleXCount(domain)).toBe(2)
+    const eventCount = wrapper.emitted('zoom-change')?.length ?? 0
+    dispatchBox(overlay, width / 2 - 4, width / 2 + 4, height, 10)
+    await flushPromises()
+    const constrainedDomain = wrapper.emitted('zoom-change')?.at(-1)?.[0] as [number, number]
+    expect(wrapper.emitted('zoom-change')?.length ?? 0).toBe(eventCount)
+    expect(visibleXCount(constrainedDomain)).toBe(2)
+  })
+
+  it('retains the default 40x maximum when no explicit limit is configured', async () => {
+    const wrapper = await mountSizedChart({ kind: 'points', points: regularPoints })
+    const { overlay, width, height } = prepareOverlay(
+      wrapper,
+      '.waveform-chart__overlay--independent',
+    )
+
+    await dispatchWheel(overlay, width, height, -4_000)
+    const domain = wrapper.emitted('zoom-change')?.at(-1)?.[0] as [number, number]
+    expect(domain[1] - domain[0]).toBeCloseTo(1_199 / 40)
+  })
+
+  it('retains two endpoint samples while replacing an independent data window', async () => {
+    const sourcePoints = Array.from({ length: 1_000 }, (_, index) => ({
+      x: -5 + (index * 10) / 999,
+      y: index,
+    }))
+    const wrapper = await mountSizedChart(
+      { kind: 'points', points: sourcePoints },
+      { minVisiblePoints: 2, initialXDomain: [-5, 5] },
+    )
+    const { overlay, width, height } = prepareOverlay(
+      wrapper,
+      '.waveform-chart__overlay--independent',
+    )
+    for (let index = 0; index < 10; index += 1) {
+      const eventCount = wrapper.emitted('zoom-change')?.length ?? 0
+      overlay.element.dispatchEvent(
+        new WheelEvent('wheel', {
+          deltaY: -1_000,
+          clientX: width * 0.5032,
+          clientY: height / 2,
+          bubbles: true,
+          cancelable: true,
+        }),
+      )
+      flushAnimationFrames()
+      await flushPromises()
+      if ((wrapper.emitted('zoom-change')?.length ?? 0) === eventCount) break
+      const domain = wrapper.emitted('zoom-change')?.at(-1)?.[0] as [number, number]
+      const windowPoints = sourcePoints.filter(
+        (point) => point.x >= domain[0] && point.x <= domain[1],
+      )
+      await wrapper.setProps({ data: { kind: 'points', points: windowPoints } })
+      await flushPromises()
+    }
+
+    const finalDomain = wrapper.emitted('zoom-change')?.at(-1)?.[0] as [number, number]
+    const endpointDomain = wrapper
+      .findAll('.waveform-chart__axis-endpoint')
+      .slice(0, 2)
+      .map((endpoint) => Number(endpoint.text()) / 1_000) as [number, number]
+    expect(visibleXCount(finalDomain, sourcePoints)).toBe(2)
+    expect(visibleXCount(endpointDomain, sourcePoints)).toBe(2)
+    const eventCount = wrapper.emitted('zoom-change')?.length ?? 0
+    await dispatchWheel(overlay, width, height, -1_000)
+    expect(wrapper.emitted('zoom-change')?.length ?? 0).toBe(eventCount)
+  })
+
+  it('recomputes irregular point constraints for shared tracks after data replacement', async () => {
+    const createData = (offset: number) => ({
+      kind: 'series' as const,
+      series: [
+        {
+          id: 'first',
+          name: 'First',
+          data: {
+            kind: 'points' as const,
+            points: [0, 1, 4, 20].map((x) => ({ x: x + offset, y: x })),
+          },
+        },
+        {
+          id: 'second',
+          name: 'Second',
+          data: {
+            kind: 'points' as const,
+            points: [0, 3, 9, 20].map((x) => ({ x: x + offset, y: x })),
+          },
+        },
+      ],
+    })
+    const wrapper = await mountSizedChart(createData(0), {
+      displayMode: 'separated',
+      minVisiblePoints: 2,
+    })
+    const { overlay, width, height } = prepareOverlay(wrapper, '.waveform-chart__overlay')
+
+    await dispatchWheel(overlay, width, height, -4_000)
+    await wrapper.setProps({ data: createData(100) })
+    await flushPromises()
+    await dispatchWheel(overlay, width, height, 4_000)
+    const domain = wrapper.emitted('zoom-change')?.at(-1)?.[0] as [number, number]
+    expect(domain).toEqual([100, 120])
+  })
+})