waveform-analysis 0.1.47 → 0.1.50

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

@@ -0,0 +1,174 @@
+import { zoomIdentity } from 'd3'
+import { describe, expect, it } from 'vitest'
+
+import { DEFAULT_WAVEFORM_RENDERING_OPTIONS } from '../../core'
+import type { WaveformData } from '../../types'
+import { buildTrackLayouts } from './trackLayoutBuilder'
+import type { DisplaySeries, DisplayTrack } from './types'
+import { prepareWaveformSeries } from './useWaveformData'
+
+function displaySeries(id: string, domain: [number, number]): DisplaySeries {
+  return {
+    id,
+    name: id,
+    color: '#1677ff',
+    lineType: 'linear',
+    lineStyle: 'solid',
+    pointType: 'none',
+    errorBar: { visible: false, width: 1.5, capWidth: 8 },
+    points: [
+      { x: 0, y: domain[0] },
+      { x: 1, y: domain[1] },
+    ],
+    xDomain: [0, 1],
+    yDomain: domain,
+    hasErrorPoints: false,
+  }
+}
+
+function layout(
+  series: DisplaySeries[],
+  options: { overlayMode?: 'single-axis' | 'multi-axis'; fixedYDomain?: [number, number] } = {},
+) {
+  const track: DisplayTrack = {
+    id: 'track',
+    series,
+    visibleSeries: series,
+    xDomain: [0, 1],
+    yDomain: [
+      Math.min(...series.map((item) => item.yDomain[0])),
+      Math.max(...series.map((item) => item.yDomain[1])),
+    ],
+  }
+  return buildTrackLayouts({
+    cells: [
+      {
+        slotIndex: 0,
+        row: 0,
+        column: 0,
+        left: 0,
+        top: 0,
+        width: 120,
+        height: 100,
+        plotHeight: 100,
+        cellHeight: 130,
+        xAxisBand: 30,
+        series: track,
+      },
+    ],
+    grid: {
+      rowCount: 1,
+      columnCount: 1,
+      showPagination: false,
+      fillIncompleteLastRow: false,
+      trackLines: {},
+    },
+    displayMode: 'independent',
+    overlayMode: options.overlayMode ?? 'single-axis',
+    independentTransforms: [zoomIdentity],
+    sharedZoomDomain: [0, 1],
+    fixedYDomain: options.fixedYDomain,
+    timeUnit: 'ms',
+    rendering: DEFAULT_WAVEFORM_RENDERING_OPTIONS,
+    hideSecondaryLabels: false,
+    yAxisLabelX: -50,
+    yAxisNice: false,
+    showCompactEmptyTracks: false,
+  })[0]!
+}
+
+describe('Y-axis nice domains', () => {
+  it('defaults to a nice domain and can preserve the actual data endpoints', () => {
+    const source = displaySeries('source', [3, 97])
+    const track: DisplayTrack = {
+      id: 'track',
+      series: [source],
+      visibleSeries: [source],
+      xDomain: [0, 1],
+      yDomain: [3, 97],
+    }
+    const defaults = buildTrackLayouts({
+      cells: [
+        {
+          slotIndex: 0,
+          row: 0,
+          column: 0,
+          left: 0,
+          top: 0,
+          width: 120,
+          height: 100,
+          plotHeight: 100,
+          cellHeight: 130,
+          xAxisBand: 30,
+          series: track,
+        },
+      ],
+      grid: {
+        rowCount: 1,
+        columnCount: 1,
+        showPagination: false,
+        fillIncompleteLastRow: false,
+        trackLines: {},
+      },
+      displayMode: 'independent',
+      overlayMode: 'single-axis',
+      independentTransforms: [zoomIdentity],
+      sharedZoomDomain: [0, 1],
+      timeUnit: 'ms',
+      rendering: DEFAULT_WAVEFORM_RENDERING_OPTIONS,
+      hideSecondaryLabels: false,
+      yAxisLabelX: -50,
+      showCompactEmptyTracks: false,
+    })[0]!
+
+    expect(defaults.yScale.domain()).toEqual([0, 100])
+    expect(layout([source]).yScale.domain()).toEqual([3, 97])
+  })
+
+  it('merges visible single-axis series but keeps multi-axis series independent', () => {
+    const first = displaySeries('first', [3, 40])
+    const second = displaySeries('second', [10, 97])
+
+    expect(layout([first, second]).yScale.domain()).toEqual([3, 97])
+    expect(
+      layout([first, second], { overlayMode: 'multi-axis' }).yAxes.map((axis) =>
+        axis.scale.domain(),
+      ),
+    ).toEqual([
+      [3, 40],
+      [10, 97],
+    ])
+  })
+
+  it('keeps explicit domains and constant-data safety ranges unchanged', () => {
+    expect(
+      layout([displaySeries('source', [3, 97])], { fixedYDomain: [3, 97] }).yScale.domain(),
+    ).toEqual([3, 97])
+    expect(layout([displaySeries('constant', [9.5, 10.5])]).yScale.domain()).toEqual([9.5, 10.5])
+  })
+
+  it('continues to include visible error-bar bounds in the preserved domain', () => {
+    const input: WaveformData = {
+      kind: 'series',
+      series: [
+        {
+          id: 'error-series',
+          name: 'error series',
+          errorBar: { visible: true },
+          data: {
+            kind: 'points',
+            points: [
+              { x: 0, y: 3, lowerError: 2 },
+              { x: 1, y: 7, upperError: 4 },
+            ],
+          },
+        },
+      ],
+    }
+    const [prepared] = prepareWaveformSeries(input)
+    const errorSeries: DisplaySeries = { ...prepared!, color: prepared!.color ?? '#1677ff' }
+
+    expect(prepared?.yDomain).toEqual([1, 11])
+    expect(layout([errorSeries]).yScale.domain()).toEqual([1, 11])
+  })
+})

package/src/components/data/types.ts

@@ -14,6 +14,12 @@ export type {
   WaveformZoomResetPayload,
   WaveformAnnotationStyle,
   WaveformAnnotation,
+  WaveformSamplingMode,
+  WaveformSamplingStrategy,
+  WaveformSamplingOptions,
+  WaveformSamplingBackend,
+  WaveformSamplingDiagnostics,
+  WaveformSamplingError,
   WaveformRenderingOptions,
   WaveformPlotMargin,
   WaveformTitleTextStyle,
@@ -30,6 +36,9 @@ export type {
   WaveformPointType,
   WaveformErrorBarOptions,
   ResolvedWaveformErrorBarOptions,
+  WaveformTypedValues,
+  TypedSampleData,
+  TypedPointData,
   WaveformSeries,
   WaveformData,
   NormalizedWaveformSeries,

package/src/components/interaction/WaveformTooltip.test.ts

@@ -188,9 +188,7 @@ describe('WaveformTooltip', () => {
       },
     })
 
-    const values = wrapper
-      .findAll('.waveform-tooltip__value')
-      .map((value) => value.text())
+    const values = wrapper.findAll('.waveform-tooltip__value').map((value) => value.text())
     expect(values).toEqual(['(x:1 y:12)', '(x:1.25 y:8)', '无数据'])
   })
 })

package/src/components/interaction/WaveformTooltip.vue

@@ -90,14 +90,10 @@ const tooltipStyle = computed(() => {
     ...horizontalStyle,
     top: `${Math.max(
       8,
-      Math.min(
-        props.position.y - 18,
-        props.containerHeight - estimateTooltipHeight(maxWidth) - 8,
-      ),
+      Math.min(props.position.y - 18, props.containerHeight - estimateTooltipHeight(maxWidth) - 8),
     )}px`,
   }
 })
-
 </script>
 
 <template>
@@ -113,12 +109,15 @@ const tooltipStyle = computed(() => {
     >
       <i :style="{ backgroundColor: seriesPoint.color }" />
       <span class="waveform-tooltip__series-content">
-        <span class="waveform-tooltip__series-label">{{ seriesPoint.shotNo?.trim() || '未配置炮号' }}： {{
-          seriesPoint.name
-        }}<template v-if="seriesPoint.unit">({{ seriesPoint.unit }})</template></span>
-        <span v-if="seriesPoint.point" class="waveform-tooltip__value">(x:{{
-          formatTooltipTime(seriesPoint.point.x, timeUnit)
-        }} y:{{ formatTooltipNumber(seriesPoint.point.y) }})</span>
+        <span class="waveform-tooltip__series-label"
+          >{{ seriesPoint.shotNo?.trim() || '未配置炮号' }}： {{ seriesPoint.name
+          }}<template v-if="seriesPoint.unit">({{ seriesPoint.unit }})</template></span
+        >
+        <span v-if="seriesPoint.point" class="waveform-tooltip__value"
+          >(x:{{ formatTooltipTime(seriesPoint.point.x, timeUnit) }} y:{{
+            formatTooltipNumber(seriesPoint.point.y)
+          }})</span
+        >
         <span v-else class="waveform-tooltip__value waveform-tooltip__value--missing">无数据</span>
       </span>
     </span>
@@ -136,7 +135,9 @@ const tooltipStyle = computed(() => {
   max-width: min(560px, calc(100% - 16px));
   padding: 9px 12px;
   color: #505050;
-  font: 14px/1.35 Arial, sans-serif;
+  font:
+    14px/1.35 Arial,
+    sans-serif;
   pointer-events: none;
   background: #fff;
   border: 1px solid #e3e7eb;

package/src/components/interaction/useWaveformHover.ts

@@ -1,7 +1,8 @@
-import { bisector, pointer } from 'd3'
+import { pointer } from 'd3'
 import type { ComputedRef, Ref, ShallowRef } from 'vue'
 
 import type { WaveformPoint } from '../data/types'
+import { pointSourceFromPoints } from '../../core/waveformPointSource'
 import type {
   DisplaySeries,
   HoveredSeriesPoint,
@@ -28,8 +29,6 @@ interface HoverContext {
   resolveTrackAtPointer: (pointerX: number, pointerY: number) => TrackLayout | undefined
 }
 
-const pointBisector = bisector<WaveformPoint, number>((point) => point.x)
-
 export function useWaveformHover(context: HoverContext) {
   const {
     emit,
@@ -110,10 +109,11 @@ export function useWaveformHover(context: HoverContext) {
     return true
   }
   const nearestPoint = (series: DisplaySeries, xValue: number): WaveformPoint | undefined => {
-    const firstPoint = series.points[0]
-    const lastPoint = series.points.at(-1)
-    if (!firstPoint || !lastPoint || xValue < firstPoint.x || xValue > lastPoint.x) return undefined
-    return series.points[pointBisector.center(series.points, xValue)]
+    const source = series.source ?? pointSourceFromPoints(series.points)
+    const first = source.pointAt(0)
+    const last = source.pointAt(source.length - 1)
+    if (!first || !last || xValue < first.x || xValue > last.x) return undefined
+    return source.nearestPoint(xValue)
   }
 
   const handleIndependentPointerMove = (event: PointerEvent, trackIndex: number) => {

package/src/components/interaction/zoomConstraints.ts

@@ -1,10 +1,12 @@
 import { scaleLinear, zoomIdentity, type ZoomTransform } from 'd3'
 
 import type { WaveformPoint } from '../../types'
+import { pointSourceFromPoints, type WaveformPointSource } from '../../core/waveformPointSource'
 import { ZOOM_CONSTRAINTS } from '../core/constants'
 
 interface PointSeriesSource {
   points: WaveformPoint[]
+  source?: WaveformPointSource
 }
 
 export type ZoomSeriesGroup = readonly PointSeriesSource[]
@@ -30,7 +32,9 @@ function uniqueXValues(group: ZoomSeriesGroup, boundary: [number, number]): numb
   if (cached) return cached
   const values = new Set<number>()
   for (const series of group) {
-    for (const point of series.points) {
+    const source = series.source ?? pointSourceFromPoints(series.points)
+    for (let index = 0; index < source.length; index += 1) {
+      const point = source.pointAt(index)!
       if (point.x >= boundary[0] && point.x <= boundary[1]) values.add(point.x)
     }
   }

package/src/components/waveform.ts

@@ -12,12 +12,21 @@ export type {
   WaveformXDomainStrategy,
   WaveformAnnotationStyle,
   WaveformAnnotation,
+  WaveformSamplingMode,
+  WaveformSamplingStrategy,
+  WaveformSamplingOptions,
+  WaveformSamplingBackend,
+  WaveformSamplingDiagnostics,
+  WaveformSamplingError,
   WaveformRenderingOptions,
   WaveformPlotMargin,
   WaveformTitleTextStyle,
   WaveformTitleOptions,
   WaveformFrameStyle,
   SingleWaveformData,
+  WaveformTypedValues,
+  TypedSampleData,
+  TypedPointData,
   WaveformSeries,
   WaveformLineStyle,
   WaveformData,

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

@@ -74,8 +74,7 @@ describe('WaveformChart', () => {
 
   it('removes the later compact row top tick when the Y-axis end has a floating-point tail', async () => {
     const yDomain: [number, number] = [-1, 0.2]
-    const calculatedAxisEnd =
-      yDomain[0] + ((yDomain[1] - yDomain[0]) * 4) / 4
+    const calculatedAxisEnd = yDomain[0] + ((yDomain[1] - yDomain[0]) * 4) / 4
     expect(calculatedAxisEnd).not.toBe(yDomain[1])
 
     const wrapper = await mountSizedChart(
@@ -84,11 +83,23 @@ describe('WaveformChart', () => {
         series: [
           {
             name: 'top',
-            data: { kind: 'points', points: [{ x: 0, y: -0.8 }, { x: 1, y: 0.1 }] },
+            data: {
+              kind: 'points',
+              points: [
+                { x: 0, y: -0.8 },
+                { x: 1, y: 0.1 },
+              ],
+            },
           },
           {
             name: 'bottom',
-            data: { kind: 'points', points: [{ x: 0, y: -0.7 }, { x: 1, y: 0 }] },
+            data: {
+              kind: 'points',
+              points: [
+                { x: 0, y: -0.7 },
+                { x: 1, y: 0 },
+              ],
+            },
           },
         ],
       },

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

@@ -99,12 +99,17 @@ describe('WaveformChart', () => {
       { rendering: { downsampleThreshold: 1_000, maxPointsPerPixel: 4 } },
     )
     const overlayWidth = Number(wrapper.get('.waveform-chart__overlay').attributes('width'))
-    const path = wrapper.get('.waveform-chart__line').attributes('d') ?? ''
-    const renderedPointCount = path.match(/[ML]/g)?.length ?? 0
-
-    expect(renderedPointCount).toBeGreaterThan(0)
-    expect(renderedPointCount).toBeLessThanOrEqual(Math.floor(overlayWidth * 4) + 2)
-    expect(path).toContain(',0')
+    await vi.waitFor(
+      () => {
+        expect(wrapper.emitted('sampling-complete')?.length).toBeGreaterThan(0)
+        const path = wrapper.get('.waveform-chart__line').attributes('d') ?? ''
+        const renderedPointCount = path.match(/[ML]/g)?.length ?? 0
+        expect(renderedPointCount).toBeGreaterThan(0)
+        expect(renderedPointCount).toBeLessThanOrEqual(Math.floor(overlayWidth * 4) + 2)
+        expect(path).toContain(',0')
+      },
+      { timeout: 5_000 },
+    )
   })
 
   it('bounds dense decorations by pixel spacing while keeping one SVG path per series', async () => {

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

@@ -169,9 +169,7 @@ describe('WaveformChart', () => {
       yAxisLabels[0].attributes('transform')?.match(/^translate\(([-\d.]+),/)?.[1],
     )
     expect(labelX).toBeLessThan(-46)
-    expect(Number(wrapper.get('.waveform-chart__y-axis-label-bg').attributes('x'))).toBe(
-      labelX - 6,
-    )
+    expect(Number(wrapper.get('.waveform-chart__y-axis-label-bg').attributes('x'))).toBe(labelX - 6)
     expect(yAxisLabels.every((label) => !label.text().includes('(T)'))).toBe(true)
     expect(wrapper.findAll('.waveform-chart__track-label')).toHaveLength(0)
     expect(

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

@@ -5,6 +5,32 @@ import { flushAnimationFrames } from '../../test/setup'
 import { mountSizedChart } from '../../test/waveformChart'
 
 describe('WaveformChart track order', () => {
+  const points = (offset: number) => ({
+    kind: 'points' as const,
+    points: [
+      { x: 0, y: offset },
+      { x: 1, y: offset + 1 },
+    ],
+  })
+  const orderedSeries = (trackIds: string[]) => ({
+    kind: 'series' as const,
+    series: trackIds.map((trackId, index) => ({
+      id: trackId,
+      trackId,
+      name: trackId,
+      data: points(index + 1),
+    })),
+  })
+  const mergedFourTrackSeries = () => ({
+    kind: 'series' as const,
+    series: [
+      { id: 'frame-1-a', trackId: 'frame-1', name: 'frame-1-a', data: points(1) },
+      { id: 'frame-1-b', trackId: 'frame-1', name: 'frame-1-b', data: points(2) },
+      { id: 'frame-3', trackId: 'frame-3', name: 'frame-3', data: points(3) },
+      { id: 'frame-4', trackId: 'frame-4', name: 'frame-4', data: points(4) },
+    ],
+  })
+
   it('keeps a merged source slot empty without adding legend or tooltip data', async () => {
     const wrapper = await mountSizedChart(
       {
@@ -128,4 +154,108 @@ describe('WaveformChart track order', () => {
       wrapper.findAll('.waveform-chart__track').map((track) => track.attributes('data-track-id')),
     ).toEqual(['frame-2', 'frame-1', 'later-a', 'later-b'])
   })
+
+  it.each(['independent', 'separated', 'compact'] as const)(
+    'reclaims merged empty slots in %s mode when incomplete rows fill',
+    async (displayMode) => {
+      const wrapper = await mountSizedChart(mergedFourTrackSeries(), {
+        displayMode,
+        grid: {
+          rowCount: 4,
+          columnCount: 1,
+          fillIncompleteLastRow: true,
+          trackOrder: ['frame-1', 'frame-2', 'frame-3', 'frame-4'],
+        },
+      })
+      const tracks = wrapper.findAll('.waveform-chart__track')
+      const heights = tracks.map((track) => Number(track.attributes('data-track-height')))
+
+      expect(tracks.map((track) => track.attributes('data-track-id'))).toEqual([
+        'frame-1',
+        'frame-3',
+        'frame-4',
+      ])
+      expect(wrapper.findAll('.waveform-chart__track--empty')).toHaveLength(0)
+      expect(wrapper.findAll('.waveform-chart__line')).toHaveLength(4)
+      expect(heights[0]).toBeCloseTo(heights[1] ?? Number.NaN)
+      expect(heights[1]).toBeCloseTo(heights[2] ?? Number.NaN)
+      expect(wrapper.findAll('.waveform-chart__legend')).toHaveLength(1)
+      expect(wrapper.get('.waveform-chart__legend').text()).not.toContain('frame-2')
+    },
+  )
+
+  it('reclaims only the current page without pulling tracks from the next page', async () => {
+    const wrapper = await mountSizedChart(
+      orderedSeries(['frame-1', 'frame-3', 'frame-4', 'frame-5', 'frame-6', 'frame-7', 'frame-8']),
+      {
+        grid: {
+          rowCount: 4,
+          columnCount: 1,
+          fillIncompleteLastRow: true,
+          trackOrder: [
+            'frame-1',
+            'frame-2',
+            'frame-3',
+            'frame-4',
+            'frame-5',
+            'frame-6',
+            'frame-7',
+            'frame-8',
+          ],
+        },
+      },
+    )
+    const trackIds = () =>
+      wrapper.findAll('.waveform-chart__track').map((track) => track.attributes('data-track-id'))
+
+    expect(trackIds()).toEqual(['frame-1', 'frame-3', 'frame-4'])
+    await wrapper.get('.ant-pagination-next button').trigger('click')
+    expect(trackIds()).toEqual(['frame-5', 'frame-6', 'frame-7', 'frame-8'])
+    expect(wrapper.emitted('page-change')?.at(-1)).toEqual([2, 2])
+  })
+
+  it('retains ordered empty slots when incomplete rows do not fill', async () => {
+    const wrapper = await mountSizedChart(orderedSeries(['frame-1', 'frame-3', 'frame-4']), {
+      grid: {
+        rowCount: 4,
+        columnCount: 1,
+        fillIncompleteLastRow: false,
+        trackOrder: ['frame-1', 'frame-2', 'frame-3', 'frame-4'],
+      },
+    })
+
+    expect(
+      wrapper.findAll('.waveform-chart__track').map((track) => track.attributes('data-track-id')),
+    ).toEqual(['frame-1', 'frame-2', 'frame-3', 'frame-4'])
+    expect(wrapper.findAll('.waveform-chart__track--empty')).toHaveLength(1)
+  })
+
+  it('keeps an entirely empty page addressable when incomplete rows fill', async () => {
+    const wrapper = await mountSizedChart(
+      orderedSeries(['frame-1', 'frame-2', 'frame-3', 'frame-4']),
+      {
+        grid: {
+          rowCount: 4,
+          columnCount: 1,
+          fillIncompleteLastRow: true,
+          trackOrder: [
+            'frame-1',
+            'frame-2',
+            'frame-3',
+            'frame-4',
+            'frame-5',
+            'frame-6',
+            'frame-7',
+            'frame-8',
+          ],
+        },
+      },
+    )
+
+    await wrapper.get('.ant-pagination-next button').trigger('click')
+
+    expect(wrapper.findAll('.waveform-chart__track--empty')).toHaveLength(4)
+    expect(wrapper.emitted('page-change')?.at(-1)).toEqual([2, 2])
+    expect(wrapper.get('.ant-pagination-item-active').text()).toBe('2')
+  })
 })

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

@@ -0,0 +1,117 @@
+import { flushPromises } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+import { flushAnimationFrames } from '../../test/setup'
+import { mountSizedChart } from '../../test/waveformChart'
+
+function densePoints(count: number) {
+  return Array.from({ length: count }, (_, index) => ({
+    x: index,
+    y: index === count - 1 ? 100 : Math.sin(index / 10),
+  }))
+}
+
+async function samplingEvents(count: number, rendering = {}) {
+  const wrapper = await mountSizedChart(
+    { kind: 'points', points: densePoints(count) },
+    { rendering, grid: { rowCount: 1, columnCount: 1 } },
+  )
+  await flushPromises()
+  await new Promise((resolve) => setTimeout(resolve, 120))
+  return wrapper
+}
+
+async function compactSamplingEvents(count: number, rendering = {}) {
+  const wrapper = await mountSizedChart(
+    {
+      kind: 'typed-points',
+      x: Float64Array.from({ length: count }, (_, index) => index),
+      y: Float32Array.from({ length: count }, (_, index) =>
+        index === count - 1 ? 100 : Math.sin(index / 10),
+      ),
+    },
+    { rendering, grid: { rowCount: 1, columnCount: 1 } },
+  )
+  await flushPromises()
+  await new Promise((resolve) => setTimeout(resolve, 120))
+  return wrapper
+}
+
+describe('WaveformChart worker sampling integration', () => {
+  it('uses raw source points at the auto threshold and JavaScript fallback above it', async () => {
+    const threshold = await samplingEvents(1_000)
+    const sampled = await samplingEvents(1_001)
+
+    expect(threshold.emitted('sampling-complete')?.at(-1)?.[0]).toMatchObject({
+      mode: 'auto',
+      backend: 'raw',
+      visiblePointCount: 1_000,
+      renderedPointCount: 1_000,
+    })
+    expect(sampled.emitted('sampling-complete')?.at(-1)?.[0]).toMatchObject({
+      mode: 'auto',
+      backend: 'javascript',
+      visiblePointCount: 1_001,
+    })
+    const path = sampled.get('.waveform-chart__line').attributes('d') ?? ''
+    expect(path.match(/[ML]/g)?.length).toBeLessThan(4_000)
+  })
+
+  it('bypasses worker sampling in raw mode and reports a forced-WASM failure without a fallback', async () => {
+    const raw = await samplingEvents(1_001, { sampling: { mode: 'raw' } })
+    const wasm = await samplingEvents(1_001, {
+      sampling: { mode: 'wasm', wasmFailureFallback: 'error' },
+    })
+
+    expect(raw.emitted('sampling-complete')?.at(-1)?.[0]).toMatchObject({
+      mode: 'raw',
+      backend: 'raw',
+      renderedPointCount: 1_001,
+    })
+    expect(raw.emitted('sampling-error')).toBeUndefined()
+    expect(wasm.emitted('sampling-complete')?.at(-1)?.[0]).toMatchObject({
+      mode: 'wasm',
+      backend: 'unavailable',
+    })
+    expect(wasm.emitted('sampling-error')?.at(-1)?.[0]).toMatchObject({
+      mode: 'wasm',
+      fallback: 'none',
+    })
+  })
+
+  it('keeps hover bound to complete source data after sampled SVG geometry is applied', async () => {
+    const wrapper = await samplingEvents(1_001)
+    const overlay = wrapper.get('.waveform-chart__overlay')
+    const width = Number(overlay.attributes('width'))
+    Object.defineProperty(overlay.element, 'getBoundingClientRect', {
+      value: () => ({ left: 0, top: 0, width, height: 290 }),
+    })
+    overlay.element.dispatchEvent(
+      new MouseEvent('pointermove', { clientX: width, clientY: 120, bubbles: true }),
+    )
+    flushAnimationFrames()
+    await flushPromises()
+
+    expect(wrapper.emitted('point-hover')?.at(-1)).toEqual([{ x: 1_000, y: 100 }])
+  })
+
+  it('samples dense typed coordinates while retaining the full compact source for hover', async () => {
+    const wrapper = await compactSamplingEvents(1_001)
+    expect(wrapper.emitted('sampling-complete')?.at(-1)?.[0]).toMatchObject({
+      backend: 'javascript',
+      sourcePointCount: 1_001,
+      visiblePointCount: 1_001,
+    })
+    const overlay = wrapper.get('.waveform-chart__overlay')
+    const width = Number(overlay.attributes('width'))
+    Object.defineProperty(overlay.element, 'getBoundingClientRect', {
+      value: () => ({ left: 0, top: 0, width, height: 290 }),
+    })
+    overlay.element.dispatchEvent(
+      new MouseEvent('pointermove', { clientX: width, clientY: 120, bubbles: true }),
+    )
+    flushAnimationFrames()
+    await flushPromises()
+    expect(wrapper.emitted('point-hover')?.at(-1)).toEqual([{ x: 1_000, y: 100 }])
+  })
+})