waveform-analysis 0.1.58 → 0.1.60

package/src/components/core/useWaveformChartLifecycle.ts

@@ -9,12 +9,12 @@ import {
   type ShallowRef,
 } from 'vue'
 
-import type { AnnotationSeriesCandidate } from '../annotation'
-import type { useWaveformAnnotationInteraction } from '../annotation'
+import type { AnnotationSeriesCandidate, useWaveformAnnotationInteraction } from '../annotation'
 import type { NormalizedWaveformGridOptions } from './grid'
 import type { DisplaySeries, DisplayTrack, TrackLayout } from './types'
 import type { ResolvedWaveformChartProps, WaveformChartEmit } from './waveformChartTypes'
 import { constrainZoomDomain, transformForDomain } from '../interaction/zoomConstraints'
+import { seriesIdentity } from '../interaction/zoomEventPayload'
 
 interface LifecycleContext {
   props: ResolvedWaveformChartProps
@@ -152,16 +152,20 @@ export function useWaveformChartLifecycle(context: LifecycleContext) {
   }
 
   let pendingSharedXDomain: [number, number] | undefined
-  let pendingIndependentXDomains: Array<[number, number] | undefined> | undefined
+  let pendingIndependentXDomains: Map<string, [number, number]> | undefined
 
   function handleBeforeDataReferenceChange() {
     if (props.displayMode === 'independent') {
       pendingSharedXDomain = undefined
-      pendingIndependentXDomains = trackLayouts.value.map((track) => {
-        const current = track.xScale.domain() as [number, number]
-        const boundary = resolveInitialTrackDomain(track)
-        return current[1] - current[0] < boundary[1] - boundary[0] - 1e-12 ? current : undefined
-      })
+      pendingIndependentXDomains = new Map(
+        trackLayouts.value.flatMap((track) => {
+          const current = track.xScale.domain() as [number, number]
+          const boundary = resolveInitialTrackDomain(track)
+          return current[1] - current[0] < boundary[1] - boundary[0] - 1e-12
+            ? [[seriesIdentity(track.seriesList.map((series) => series.id)), current]]
+            : []
+        }),
+      )
       return
     }
     pendingIndependentXDomains = undefined
@@ -184,7 +188,9 @@ export function useWaveformChartLifecycle(context: LifecycleContext) {
       if (props.displayMode === 'independent' && pendingIndependentXDomains) {
         const nextTransforms = chartTracks.value.map(() => zoomIdentity)
         trackLayouts.value.forEach((track) => {
-          const previousDomain = pendingIndependentXDomains?.[track.index]
+          const previousDomain = pendingIndependentXDomains?.get(
+            seriesIdentity(track.seriesList.map((series) => series.id)),
+          )
           if (!previousDomain) return
           const boundary = resolveInitialTrackDomain(track)
           const domain = constrainZoomDomain(previousDomain, boundary, [track.seriesList], props)

package/src/components/core/useWaveformLayout.ts

@@ -7,16 +7,7 @@ import {
   type AnnotationSeriesInfo,
   type AnnotationTrackLayout,
 } from '../annotation'
-import {
-  channelColors,
-  margin,
-  MINIMUM_PLOT_WIDTH,
-  Y_AXIS_CHARACTER_WIDTH,
-  Y_AXIS_LABEL_BAND_WIDTH,
-  Y_AXIS_LABEL_GAP,
-  Y_AXIS_OUTER_PADDING,
-  Y_AXIS_TICK_PADDING,
-} from './constants'
+import { channelColors, margin, MINIMUM_PLOT_WIDTH } from './constants'
 import {
   getGridGap,
   getPageCount,
@@ -24,17 +15,13 @@ import {
   paginateSeries,
   resolveGridCellGeometry,
 } from './grid'
-import {
-  buildTrackLayouts,
-  axisTextMetrics,
-  buildYAxisSlots,
-  resolveYAxisSeriesGroups,
-} from './layout'
+import { buildTrackLayouts, buildYAxisSlots, resolveYAxisTickCount } from './layout'
 import type { DisplaySeries, DisplayTrack, TrackLayout } from './types'
 import { createFrameNumberResolver, resolvePageableTracks } from './trackPagination'
 import type { PreparedWaveformSeries } from './useWaveformData'
 import type { ResolvedWaveformChartProps } from './waveformChartTypes'
 import { applyXDomainStrategy } from './xDomain'
+import { resolveYAxisLayoutMetrics, resolveViewportYDomains } from './yAxisLayoutMetrics'
 import type { useWaveformAnnotationInteraction } from '../annotation'
 interface LayoutContext {
   props: ResolvedWaveformChartProps
@@ -121,38 +108,29 @@ export function useWaveformLayout(context: LayoutContext) {
       ? tracksWithSeries
       : pagedTracks.value
   })
-  const yAxisMetrics = computed(() => {
-    const axisText = chartTracks.value
-      .filter((track) => track.visibleSeries.length > 0)
-      .flatMap((track) =>
-        resolveYAxisSeriesGroups(track, props.overlayMode, props.yDomain, props.yDomains),
-      )
-      .map(
-        (group) =>
-          axisTextMetrics(
-            group.domain,
-            props.axes?.y?.nice !== false,
-            undefined,
-            group.seriesList[0]?.unit,
-            props.axes?.y?.splitNumber,
-          ).tickTextWidth,
-      )
-    const tickTextWidth = Math.max(Y_AXIS_CHARACTER_WIDTH, ...axisText)
-    const tickClearance = tickTextWidth + Y_AXIS_TICK_PADDING + Y_AXIS_OUTER_PADDING
-    const labelCenterX = -(
-      Y_AXIS_TICK_PADDING +
-      tickTextWidth +
-      Y_AXIS_LABEL_GAP +
-      Y_AXIS_LABEL_BAND_WIDTH / 2
-    )
-    const fullClearance =
-      tickTextWidth +
-      Y_AXIS_TICK_PADDING +
-      Y_AXIS_LABEL_GAP +
-      Y_AXIS_LABEL_BAND_WIDTH +
-      Y_AXIS_OUTER_PADDING
-    return { tickClearance, fullClearance, labelCenterX }
-  })
+  const yAxisTickCount = computed(() =>
+    resolveYAxisTickCount(innerHeight.value, props.axes?.y?.splitNumber),
+  )
+  const viewportYDomains = computed(() =>
+    resolveViewportYDomains(
+      props.displayMode,
+      chartTracks.value,
+      sharedYDomains.value,
+      independentYDomains.value,
+    ),
+  )
+  const yAxisMetrics = computed(() =>
+    resolveYAxisLayoutMetrics(
+      chartTracks.value,
+      props.overlayMode,
+      props.yDomain,
+      props.yDomains,
+      viewportYDomains.value,
+      props.axes?.y?.nice !== false,
+      yAxisTickCount.value,
+      props.displayMode === 'compact',
+    ),
+  )
   const hasYAxisLabels = computed(() =>
     chartTracks.value.some(
       (track) =>
@@ -179,8 +157,10 @@ export function useWaveformLayout(context: LayoutContext) {
       props.overlayMode,
       props.yDomain,
       props.yDomains,
-      props.axes?.y?.splitNumber,
+      yAxisTickCount.value,
       props.axes?.y?.nice !== false,
+      props.displayMode === 'compact',
+      viewportYDomains.value,
     ),
   )
   const resolvedChartLeftMargin = computed(() =>
@@ -302,15 +282,7 @@ export function useWaveformLayout(context: LayoutContext) {
       xDomainStrategy: props.xDomainStrategy,
       fixedYDomain: props.yDomain,
       fixedYDomains: props.yDomains,
-      yDomains:
-        props.displayMode === 'independent'
-          ? Object.fromEntries(
-              chartTracks.value.flatMap((track, index) => {
-                const domain = independentYDomains.value[index]
-                return domain ? [[track.id, domain]] : []
-              }),
-            )
-          : sharedYDomains.value,
+      yDomains: viewportYDomains.value,
       timeUnit: props.timeUnit,
       xAxisLabelFormatter: props.axes?.x?.labelFormatter,
       yAxisSplitNumber: props.axes?.y?.splitNumber,

package/src/components/core/waveformChartTypes.ts

@@ -16,6 +16,7 @@ import type {
   WaveformTitleOptions,
   WaveformXDomainStrategy,
   WaveformZeroLineOptions,
+  WaveformZoomIntentPayload,
   WaveformZoomEndPayload,
   WaveformZoomResetPayload,
 } from '../data/types'
@@ -90,6 +91,7 @@ export type ResolvedWaveformChartProps = Readonly<
 
 export interface WaveformChartEmit {
   (event: 'point-hover', point: WaveformPoint | null): void
+  (event: 'zoom-intent', payload: WaveformZoomIntentPayload): void
   (event: 'zoom-change', domain: [number, number]): void
   (event: 'zoom-end', payload: WaveformZoomEndPayload): void
   (event: 'zoom-reset', payload: WaveformZoomResetPayload): void

package/src/components/core/yAxisLayoutMetrics.ts

@@ -0,0 +1,75 @@
+import type { WaveformOverlayMode } from '../data/types'
+import {
+  Y_AXIS_CHARACTER_WIDTH,
+  Y_AXIS_LABEL_BAND_WIDTH,
+  Y_AXIS_LABEL_GAP,
+  Y_AXIS_OUTER_PADDING,
+  Y_AXIS_TICK_PADDING,
+} from './constants'
+import { axisTextMetrics, resolveRenderedYAxisSeriesGroups } from './layout'
+import type { DisplayTrack } from './types'
+import type { WaveformYDomain } from './yDomain'
+
+export interface YAxisLayoutMetrics {
+  tickClearance: number
+  fullClearance: number
+  labelCenterX: number
+}
+
+export function resolveViewportYDomains(
+  displayMode: 'independent' | 'separated' | 'compact',
+  chartTracks: DisplayTrack[],
+  sharedYDomains: Record<string, [number, number]>,
+  independentYDomains: Record<number, [number, number]>,
+): Record<string, [number, number]> {
+  if (displayMode !== 'independent') return sharedYDomains
+  return Object.fromEntries(
+    chartTracks.flatMap((track, index) => {
+      const domain = independentYDomains[index]
+      return domain ? [[track.id, domain]] : []
+    }),
+  )
+}
+
+export function resolveYAxisLayoutMetrics(
+  chartTracks: DisplayTrack[],
+  overlayMode: WaveformOverlayMode,
+  yDomain: WaveformYDomain | undefined,
+  yDomains: Record<string, WaveformYDomain> | undefined,
+  viewportYDomains: Record<string, [number, number]>,
+  nice: boolean,
+  tickCount: number,
+  compact: boolean,
+): YAxisLayoutMetrics {
+  const axisText = chartTracks
+    .filter((track) => track.visibleSeries.length > 0)
+    .flatMap((track) =>
+      resolveRenderedYAxisSeriesGroups(track, overlayMode, yDomain, yDomains, viewportYDomains),
+    )
+    .map(
+      (group) =>
+        axisTextMetrics(
+          group.domain,
+          nice,
+          undefined,
+          group.seriesList[0]?.unit,
+          tickCount,
+          compact,
+        ).tickTextWidth,
+    )
+  const tickTextWidth = Math.max(Y_AXIS_CHARACTER_WIDTH, ...axisText)
+  const tickClearance = tickTextWidth + Y_AXIS_TICK_PADDING + Y_AXIS_OUTER_PADDING
+  const labelCenterX = -(
+    Y_AXIS_TICK_PADDING +
+    tickTextWidth +
+    Y_AXIS_LABEL_GAP +
+    Y_AXIS_LABEL_BAND_WIDTH / 2
+  )
+  const fullClearance =
+    tickTextWidth +
+    Y_AXIS_TICK_PADDING +
+    Y_AXIS_LABEL_GAP +
+    Y_AXIS_LABEL_BAND_WIDTH +
+    Y_AXIS_OUTER_PADDING
+  return { tickClearance, fullClearance, labelCenterX }
+}

package/src/components/core/yAxisSlotLayout.test.ts

@@ -2,7 +2,7 @@ import { zoomIdentity } from 'd3'
 import { describe, expect, it } from 'vitest'
 
 import { DEFAULT_WAVEFORM_RENDERING_OPTIONS } from '../../core'
-import { buildTrackLayouts, buildYAxisSlots } from './layout'
+import { buildTrackLayouts, buildYAxisSlots, resolveRenderedYAxisSeriesGroups } from './layout'
 import type { DisplaySeries, DisplayTrack } from './types'
 import { Y_AXIS_RIGHT_LABEL_OFFSET } from './yAxisConstants'
 
@@ -126,4 +126,40 @@ describe('Y-axis slots', () => {
     expect(fourAxisSlots.slots[1]!.axisOffset).toBeLessThan(0)
     expect(fourAxisSlots.slots[3]!.axisOffset).toBeGreaterThan(0)
   })
+
+  it('uses dynamic Y domains when measuring multi-axis slots', () => {
+    const negativeVoltage = series('negative-voltage', 0, 1)
+    negativeVoltage.unit = 'V'
+    const longUnit = series('long-unit', 0, 1)
+    longUnit.unit = 'volt-amperes-per-phase'
+    const sourceTrack = track([negativeVoltage, longUnit])
+    const viewportYDomains = { [sourceTrack.id]: [-0.7434, -0.3434] as [number, number] }
+
+    expect(
+      resolveRenderedYAxisSeriesGroups(
+        sourceTrack,
+        'multi-axis',
+        undefined,
+        undefined,
+        viewportYDomains,
+      ).map((group) => group.domain),
+    ).toEqual([
+      [-0.7434, -0.3434],
+      [-0.7434, -0.3434],
+    ])
+
+    const slots = buildYAxisSlots(
+      [sourceTrack],
+      'multi-axis',
+      undefined,
+      undefined,
+      5,
+      false,
+      false,
+      viewportYDomains,
+    )
+
+    expect(slots.clearance.left).toBe(100)
+    expect(slots.clearance.right).toBeGreaterThan(180)
+  })
 })

package/src/components/data/types.ts

@@ -10,6 +10,7 @@ export type {
   WaveformOverlayMode,
   WaveformInteractionMode,
   WaveformXDomainStrategy,
+  WaveformZoomIntentPayload,
   WaveformZoomEndPayload,
   WaveformZoomResetPayload,
   WaveformAnnotationStyle,

package/src/components/index.ts

@@ -7,6 +7,7 @@ export type {
   WaveformDisplayMode,
   WaveformOverlayMode,
   WaveformInteractionMode,
+  WaveformZoomIntentPayload,
   WaveformZoomEndPayload,
   WaveformAnnotationStyle,
   WaveformAnnotation,

package/src/components/interaction/useWaveformViewport.ts

@@ -10,6 +10,7 @@ import { tryReleasePointerCapture } from './pointerCapture'
 import { transitionViewportInteraction } from './viewportInteractionState'
 import { createViewportDomainSetter } from './viewportDomain'
 import { constrainZoomDomain, transformForDomain } from './zoomConstraints'
+import { emitBoxZoomIntent } from './zoomEventPayload'
 interface ViewportContext {
   props: ResolvedWaveformChartProps
   emit: WaveformChartEmit
@@ -254,6 +255,7 @@ export function useWaveformViewport(context: ViewportContext) {
     } else {
       sharedTransform.value = transformForDomain(xDomain, baseXDomain, innerWidth.value)
     }
+    emitBoxZoomIntent(emit, xDomain, track, active.independent)
     const targets = active.independent
       ? [track]
       : trackLayouts.value.filter((target) => target.hasVisibleSeries)

package/src/components/interaction/useWaveformZoom.ts

@@ -21,6 +21,11 @@ import {
   transformForDomain,
   type ZoomSeriesGroup,
 } from './zoomConstraints'
+import {
+  emitIndependentWheelZoomEnds,
+  emitSharedWheelZoomEnd,
+  seriesIdentity,
+} from './zoomEventPayload'
 
 interface ZoomContext {
   props: ResolvedWaveformChartProps
@@ -70,9 +75,10 @@ export function useWaveformZoom(context: ZoomContext) {
   let lastSharedZoomGesture: ZoomGestureKind | null = null
   const pendingIndependentZoomTransforms = new Map<number, ZoomTransform>()
   const pendingIndependentZoomGestures = new Map<number, ZoomGestureKind>()
-  const lastIndependentZoomGestures = new Map<number, ZoomGestureKind>()
-  const lastZoomedTrackIndexes = new Set<number>()
+  const lastIndependentWheelSeriesIds = new Map<string, string[]>()
   let wheelZoomEndTimer: ReturnType<typeof setTimeout> | undefined
+  let preservePendingWheelDuringDataRebind = false
+  let zoomBindingEpoch = 0
 
   const scheduleZoomCommit = () => zoomThrottle.schedule(commitPendingZoom)
   const handleSharedZoom = (event: D3ZoomEvent<SVGRectElement, unknown>) => {
@@ -80,8 +86,12 @@ export function useWaveformZoom(context: ZoomContext) {
     cancelPendingHover()
     pendingSharedZoomTransform = event.transform
     pendingSharedZoomGesture = 'wheel'
-    scheduleZoomCommit()
     scheduleWheelZoomEnd()
+    const domain = event.transform
+      .rescaleX(scaleLinear(initialXDomain.value, [0, innerWidth.value]))
+      .domain()
+    emit('zoom-intent', { start: domain[0], end: domain[1], gesture: 'wheel' })
+    scheduleZoomCommit()
   }
   const handleIndependentZoom = (
     event: D3ZoomEvent<SVGRectElement, unknown>,
@@ -91,8 +101,21 @@ export function useWaveformZoom(context: ZoomContext) {
     cancelPendingHover()
     pendingIndependentZoomTransforms.set(trackIndex, event.transform)
     pendingIndependentZoomGestures.set(trackIndex, 'wheel')
-    scheduleZoomCommit()
     scheduleWheelZoomEnd()
+    const track = trackLayouts.value.find((item) => item.index === trackIndex)
+    if (track) {
+      const domain = event.transform
+        .rescaleX(scaleLinear(resolveInitialTrackDomain(track), [0, track.width]))
+        .domain()
+      emit('zoom-intent', {
+        start: domain[0],
+        end: domain[1],
+        trackIndex,
+        seriesIds: track.seriesList.map((series) => series.id),
+        gesture: 'wheel',
+      })
+    }
+    scheduleZoomCommit()
   }
   function commitPendingZoom() {
     if (isPresentationMode.value) {
@@ -113,12 +136,7 @@ export function useWaveformZoom(context: ZoomContext) {
     if (!pendingIndependentZoomTransforms.size) return
     const nextTransforms = [...independentTransforms.value]
     const changedTrackIndexes = Array.from(pendingIndependentZoomTransforms.keys())
-    lastZoomedTrackIndexes.clear()
-    changedTrackIndexes.forEach((trackIndex) => lastZoomedTrackIndexes.add(trackIndex))
-    changedTrackIndexes.forEach((trackIndex) => {
-      const gesture = pendingIndependentZoomGestures.get(trackIndex)
-      if (gesture) lastIndependentZoomGestures.set(trackIndex, gesture)
-    })
+    const changedGestures = new Map(pendingIndependentZoomGestures)
     pendingIndependentZoomTransforms.forEach((transform, trackIndex) => {
       nextTransforms[trackIndex] = transform
     })
@@ -129,69 +147,37 @@ export function useWaveformZoom(context: ZoomContext) {
     changedTrackIndexes.forEach((trackIndex) => {
       const track = tracksByIndex.get(trackIndex)
       if (!track) return
+      if (changedGestures.get(trackIndex) === 'wheel') {
+        const seriesIds = track.seriesList.map((series) => series.id)
+        lastIndependentWheelSeriesIds.set(seriesIdentity(seriesIds), seriesIds)
+      }
       const domain = track.xScale.domain()
       emit('zoom-change', [domain[0], domain[1]])
     })
   }
   const emitZoomEnd = () => {
     if (props.displayMode === 'independent') {
-      const tracksByIndex = new Map(trackLayouts.value.map((track) => [track.index, track]))
-      lastZoomedTrackIndexes.forEach((trackIndex) => {
-        if (lastIndependentZoomGestures.get(trackIndex) !== 'wheel') return
-        const track = tracksByIndex.get(trackIndex)
-        if (!track) return
-        const domain = track.xScale.domain() as [number, number]
-        const yDomain = track.yScale.domain()
-        emit('zoom-end', {
-          start: domain[0],
-          end: domain[1],
-          yStart: yDomain[0],
-          yEnd: yDomain[1],
-          trackIndex,
-          seriesIds: track.seriesList.map((series) => series.id),
-          gesture: 'wheel',
-        })
-      })
-      lastZoomedTrackIndexes.clear()
-      lastIndependentZoomGestures.clear()
+      emitIndependentWheelZoomEnds(emit, trackLayouts.value, lastIndependentWheelSeriesIds.values())
+      lastIndependentWheelSeriesIds.clear()
       return
     }
     if (lastSharedZoomGesture !== 'wheel') {
       lastSharedZoomGesture = null
       return
     }
-    const domain = sharedZoomDomain.value
-    const visibleTracks = trackLayouts.value.filter((track) => track.hasVisibleSeries)
-    if (visibleTracks.length === 1) {
-      const yDomain = visibleTracks[0]?.yScale.domain()
-      emit('zoom-end', {
-        start: domain[0],
-        end: domain[1],
-        yStart: yDomain?.[0],
-        yEnd: yDomain?.[1],
-        gesture: 'wheel',
-      })
-    } else {
-      emit('zoom-end', {
-        start: domain[0],
-        end: domain[1],
-        yRanges: Object.fromEntries(
-          visibleTracks.map((track) => [
-            track.series?.trackId ?? track.series?.id ?? track.id,
-            track.yScale.domain() as [number, number],
-          ]),
-        ),
-        gesture: 'wheel',
-      })
-    }
+    emitSharedWheelZoomEnd(emit, sharedZoomDomain.value, trackLayouts.value)
     lastSharedZoomGesture = null
   }
   const flushPendingZoom = () => {
     zoomThrottle.flush()
     commitPendingZoom()
-    if (lastSharedZoomGesture === 'wheel' || lastIndependentZoomGestures.size) return
+    if (lastSharedZoomGesture === 'wheel' || lastIndependentWheelSeriesIds.size) return
     emitZoomEnd()
   }
+  const handleD3ZoomEnd = (bindingEpoch: number) => {
+    if (bindingEpoch !== zoomBindingEpoch) return
+    flushPendingZoom()
+  }
   function scheduleWheelZoomEnd() {
     if (wheelZoomEndTimer !== undefined) clearTimeout(wheelZoomEndTimer)
     wheelZoomEndTimer = setTimeout(() => {
@@ -199,24 +185,32 @@ export function useWaveformZoom(context: ZoomContext) {
       zoomThrottle.flush()
       commitPendingZoom()
       emitZoomEnd()
+      preservePendingWheelDuringDataRebind = false
     }, WHEEL_ZOOM_DEBOUNCE_MS)
   }
+  const prepareForDataChange = () => {
+    if (wheelZoomEndTimer === undefined) return
+    zoomThrottle.flush()
+    commitPendingZoom()
+    preservePendingWheelDuringDataRebind = true
+  }
   const cancelPendingZoom = () => {
     pendingSharedZoomTransform = null
     pendingSharedZoomGesture = null
     lastSharedZoomGesture = null
     pendingIndependentZoomTransforms.clear()
     pendingIndependentZoomGestures.clear()
-    lastZoomedTrackIndexes.clear()
-    lastIndependentZoomGestures.clear()
+    lastIndependentWheelSeriesIds.clear()
     zoomThrottle.cancel()
+    preservePendingWheelDuringDataRebind = false
     if (wheelZoomEndTimer !== undefined) {
       clearTimeout(wheelZoomEndTimer)
       wheelZoomEndTimer = undefined
     }
   }
-  const clearZoomBindings = () => {
-    cancelPendingZoom()
+  const clearZoomBindings = (preservePendingWheel = false) => {
+    zoomBindingEpoch += 1
+    if (!preservePendingWheel) cancelPendingZoom()
     svgElement.value
       ?.querySelectorAll<SVGRectElement>('.waveform-chart__overlay')
       .forEach((overlay) => select(overlay).on('.zoom', null))
@@ -268,7 +262,9 @@ export function useWaveformZoom(context: ZoomContext) {
     return false
   }
   const configureZoom = () => {
-    clearZoomBindings()
+    const preservePendingWheel = preservePendingWheelDuringDataRebind
+    clearZoomBindings(preservePendingWheel)
+    const bindingEpoch = zoomBindingEpoch
     if (
       isPresentationMode.value ||
       !props.zoomable ||
@@ -303,7 +299,7 @@ export function useWaveformZoom(context: ZoomContext) {
             [track.width, track.height],
           ])
           .on('zoom', (event) => handleIndependentZoom(event, track.index))
-          .on('end', flushPendingZoom)
+          .on('end', () => handleD3ZoomEnd(bindingEpoch))
         zoomBehaviors.set(track.index, behavior)
         synchronizingZoomTransform = true
         try {
@@ -337,7 +333,7 @@ export function useWaveformZoom(context: ZoomContext) {
         [innerWidth.value, innerHeight.value],
       ])
       .on('zoom', handleSharedZoom)
-      .on('end', flushPendingZoom)
+      .on('end', () => handleD3ZoomEnd(bindingEpoch))
     zoomBehaviors.set('shared', behavior)
     synchronizingZoomTransform = true
     try {
@@ -356,5 +352,6 @@ export function useWaveformZoom(context: ZoomContext) {
     canZoomTrack,
     canZoomSharedTracks,
     configureZoom,
+    prepareForDataChange,
   }
 }

package/src/components/interaction/zoomEventPayload.ts

@@ -0,0 +1,88 @@
+import type { TrackLayout } from '../core/types'
+import type { WaveformChartEmit } from '../core/waveformChartTypes'
+
+export function seriesIdentity(seriesIds: readonly string[]) {
+  return [...seriesIds].sort().join('\u0000')
+}
+
+export function findTrackBySeriesIds(
+  trackLayouts: readonly TrackLayout[],
+  seriesIds: readonly string[],
+) {
+  const identity = seriesIdentity(seriesIds)
+  return trackLayouts.find(
+    (track) => seriesIdentity(track.seriesList.map((series) => series.id)) === identity,
+  )
+}
+
+export function emitBoxZoomIntent(
+  emit: WaveformChartEmit,
+  domain: [number, number],
+  track: TrackLayout,
+  independent: boolean,
+) {
+  emit(
+    'zoom-intent',
+    independent
+      ? {
+          start: domain[0],
+          end: domain[1],
+          trackIndex: track.index,
+          seriesIds: track.seriesList.map((series) => series.id),
+          gesture: 'box',
+        }
+      : { start: domain[0], end: domain[1], gesture: 'box' },
+  )
+}
+
+export function emitIndependentWheelZoomEnds(
+  emit: WaveformChartEmit,
+  trackLayouts: readonly TrackLayout[],
+  pendingSeriesIds: Iterable<readonly string[]>,
+) {
+  for (const seriesIds of pendingSeriesIds) {
+    const track = findTrackBySeriesIds(trackLayouts, seriesIds)
+    if (!track) continue
+    const domain = track.xScale.domain() as [number, number]
+    const yDomain = track.yScale.domain()
+    emit('zoom-end', {
+      start: domain[0],
+      end: domain[1],
+      yStart: yDomain[0],
+      yEnd: yDomain[1],
+      trackIndex: track.index,
+      seriesIds: [...seriesIds],
+      gesture: 'wheel',
+    })
+  }
+}
+
+export function emitSharedWheelZoomEnd(
+  emit: WaveformChartEmit,
+  domain: [number, number],
+  trackLayouts: readonly TrackLayout[],
+) {
+  const visibleTracks = trackLayouts.filter((track) => track.hasVisibleSeries)
+  if (visibleTracks.length === 1) {
+    const yDomain = visibleTracks[0]?.yScale.domain()
+    emit('zoom-end', {
+      start: domain[0],
+      end: domain[1],
+      yStart: yDomain?.[0],
+      yEnd: yDomain?.[1],
+      gesture: 'wheel',
+    })
+    return
+  }
+  emit('zoom-end', {
+    start: domain[0],
+    end: domain[1],
+    yRanges: Object.fromEntries(
+      visibleTracks.map((track) => [
+        track.series?.trackId ?? track.series?.id ?? track.id,
+        track.yScale.domain() as [number, number],
+      ]),
+    ),
+    gesture: 'wheel',
+  })
+}