waveform-analysis 0.1.58 → 0.1.60

package/src/components/rendering/WaveformTrackAxes.vue

@@ -3,7 +3,8 @@ import { axisBottom, axisLeft, axisRight, select } from 'd3'
 import { nextTick, onMounted, ref, watch } from 'vue'
 
 import type { WaveformAxesOptions } from '../../types'
-import { formatScientificAxisLabel, formatXAxisLabel } from '../../utils'
+import { formatXAxisLabel } from '../../utils'
+import { formatYAxisTickLabel } from '../core/layout'
 import type { DisplaySeries, TrackLayout, WaveformYAxisLayout } from '../core/types'
 import { Y_AXIS_LABEL_BAND_WIDTH } from '../core/yAxisConstants'
 
@@ -43,12 +44,15 @@ function renderAxes() {
   props.track.yAxes.forEach((axis, index) => {
     const element = yAxisElements.value[index]
     if (!element) return
-    const [axisMin, axisMax] = axis.scale.domain()
-    const topTickValue = Math.max(...axis.tickValues)
     const unit = axis.seriesList[0]?.unit
     const yAxis = (axis.side === 'left' ? axisLeft(axis.scale) : axisRight(axis.scale))
       .tickFormat((value) =>
-        formatScientificAxisLabel(Number(value), { axisMin, axisMax, topTickValue, unit }),
+        formatYAxisTickLabel(
+          Number(value),
+          axis.scale.domain() as [number, number],
+          axis.tickValues,
+          unit,
+        ),
       )
       .tickSize(-4)
       .tickPadding(7)

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

@@ -6,26 +6,6 @@ import { resizeObservers } from '../../test/setup'
 import { gridSeries, mountSizedChart } from '../../test/waveformChart'
 
 describe('WaveformChart', () => {
-  it('applies the configured Y-axis split number', async () => {
-    const wrapper = await mountSizedChart(
-      {
-        kind: 'points',
-        points: [
-          { x: 0, y: 3 },
-          { x: 1, y: 97 },
-        ],
-      },
-      { axes: { y: { splitNumber: 5 } } },
-    )
-
-    expect(
-      wrapper
-        .get('.waveform-chart__axis--y')
-        .findAll('.tick text')
-        .map((tick) => tick.text()),
-    ).toEqual(['0', '25', '50', '75', '100'])
-  })
-
   it('expands the Y-axis label gutter for signed values and long exponents', async () => {
     const wrapper = await mountSizedChart(
       {
@@ -52,10 +32,13 @@ describe('WaveformChart', () => {
     const labelBackgroundX = Number(
       tracks[0].get('.waveform-chart__y-axis-label-bg').attributes('x'),
     )
+    const longestTickLabel = Math.max(
+      ...tracks[0].findAll('.waveform-chart__axis--y .tick text').map((tick) => tick.text().length),
+    )
 
-    expect(labelX).toBe(-62)
+    expect(Math.abs(labelX)).toBeGreaterThanOrEqual(7 + longestTickLabel * 7 + 6)
     expect(labelBackgroundX).toBe(labelX - 6)
-    expect(Number(wrapper.attributes('data-chart-left-margin'))).toBe(80)
+    expect(Number(wrapper.attributes('data-chart-left-margin'))).toBeGreaterThanOrEqual(80)
     expect(secondLeft - firstWidth).toBeGreaterThanOrEqual(72)
   })
 
@@ -118,12 +101,28 @@ describe('WaveformChart', () => {
       { grid: { rowCount: 1, columnCount: 1 } },
     )
     const initialMargin = wrapper.attributes('data-chart-left-margin')
-    expect(wrapper.get('.waveform-chart__track').attributes('data-y-axis-label-x')).toBe('-34')
+    const initialTrack = wrapper.get('.waveform-chart__track')
+    const initialLongestTickLabel = Math.max(
+      ...initialTrack
+        .findAll('.waveform-chart__axis--y .tick text')
+        .map((tick) => tick.text().length),
+    )
+    expect(initialTrack.attributes('data-y-axis-label-x')).toBe(
+      String(-(7 + initialLongestTickLabel * 7 + 6)),
+    )
 
     await wrapper.get('.ant-pagination-next button').trigger('click')
 
     expect(wrapper.attributes('data-chart-left-margin')).toBe(initialMargin)
-    expect(wrapper.get('.waveform-chart__track').attributes('data-y-axis-label-x')).toBe('-62')
+    const pagedTrack = wrapper.get('.waveform-chart__track')
+    const pagedLongestTickLabel = Math.max(
+      ...pagedTrack
+        .findAll('.waveform-chart__axis--y .tick text')
+        .map((tick) => tick.text().length),
+    )
+    expect(pagedTrack.attributes('data-y-axis-label-x')).toBe(
+      String(-(7 + pagedLongestTickLabel * 7 + 6)),
+    )
   })
 
   it('hides only secondary-column Y-axis labels when the grid is too narrow', async () => {

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

@@ -0,0 +1,103 @@
+import { flushPromises } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+import { resizeObservers } from '../../test/setup'
+
+import { mountSizedChart } from '../../test/waveformChart'
+
+describe('WaveformChart Y-axis layout', () => {
+  it('applies the configured Y-axis split number', async () => {
+    const wrapper = await mountSizedChart(
+      {
+        kind: 'points',
+        points: [
+          { x: 0, y: 3 },
+          { x: 1, y: 97 },
+        ],
+      },
+      { axes: { y: { splitNumber: 5 } } },
+    )
+
+    expect(
+      wrapper
+        .get('.waveform-chart__axis--y')
+        .findAll('.tick text')
+        .map((tick) => tick.text()),
+    ).toEqual(['0', '25', '50', '75', '100'])
+  })
+
+  it('reserves the rendered endpoint label width across tracks, pages, and resizes', async () => {
+    const wrapper = await mountSizedChart(
+      {
+        kind: 'series',
+        series: ['WE_2M', 'IP_VV_2M', 'SX2_7_07', 'BT1_2M'].map((name, index) => ({
+          id: name,
+          name,
+          unit: 'V',
+          data: {
+            kind: 'points' as const,
+            points: [
+              { x: 0, y: -0.7434 - index },
+              { x: 1, y: -0.3434 - index },
+            ],
+          },
+        })),
+      },
+      {
+        axes: { y: { lineVisible: false, nice: false } },
+        grid: { rowCount: 1, columnCount: 1 },
+      },
+    )
+    const firstTrack = wrapper.get('.waveform-chart__track')
+
+    expect(wrapper.attributes('data-chart-left-margin')).toBe('100')
+    expect(firstTrack.attributes('data-y-axis-label-x')).toBe('-90')
+    expect(firstTrack.findAll('.waveform-chart__axis--y .tick text').at(-1)?.text()).toBe(
+      '(V) -0.3434',
+    )
+
+    resizeObservers.at(-1)?.resize(520, 280)
+    await flushPromises()
+    expect(wrapper.attributes('data-chart-left-margin')).toBe('100')
+    expect(wrapper.get('.waveform-chart__track').attributes('data-y-axis-label-x')).toBe('-90')
+
+    await wrapper.get('.ant-pagination-next button').trigger('click')
+    expect(wrapper.attributes('data-chart-left-margin')).toBe('100')
+    expect(wrapper.get('.waveform-chart__track').attributes('data-y-axis-label-x')).toBe('-90')
+    expect(wrapper.get('.waveform-chart__axis--y').findAll('.tick text').at(-1)?.text()).toBe(
+      '(V) -1.3434',
+    )
+  })
+
+  it('measures the compact-row unit label after omitting the top endpoint', async () => {
+    const wrapper = await mountSizedChart(
+      {
+        kind: 'series',
+        series: ['first', 'second'].map((id) => ({
+          id,
+          name: id,
+          unit: 'V',
+          data: {
+            kind: 'points' as const,
+            points: [
+              { x: 0, y: 0.12345 },
+              { x: 1, y: 100 },
+            ],
+          },
+        })),
+      },
+      {
+        displayMode: 'compact',
+        axes: { y: { nice: false } },
+        grid: { rowCount: 2, columnCount: 1 },
+      },
+    )
+    const tracks = wrapper.findAll('.waveform-chart__track')
+
+    expect(wrapper.attributes('data-chart-left-margin')).toBe('93')
+    expect(tracks[1]?.attributes('data-y-axis-label-x')).toBe('-83')
+    expect(tracks[1]?.findAll('.waveform-chart__axis--y .tick text').at(-1)?.text()).toBe(
+      '(V) 75.031',
+    )
+  })
+})

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

@@ -0,0 +1,213 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { defineComponent, h, ref } from 'vue'
+import { describe, expect, it, vi } from 'vitest'
+
+import WaveformChart from '../WaveformChart.vue'
+import type { WaveformData } from '../waveform'
+import { resizeObservers } from '../../test/setup'
+import { gridSeries, mountSizedChart } from '../../test/waveformChart'
+
+function seriesWindow(ids: string[]) {
+  return {
+    kind: 'series' as const,
+    series: ids.map((id, index) => ({
+      id,
+      name: id,
+      data: {
+        kind: 'points' as const,
+        points: [
+          { x: 40, y: index },
+          { x: 50, y: index + 1 },
+          { x: 60, y: index + 2 },
+        ],
+      },
+    })),
+  }
+}
+
+function fullSeries(ids: string[]): WaveformData {
+  return {
+    kind: 'series',
+    series: ids.map((id, index) => ({
+      id,
+      name: id,
+      data: {
+        kind: 'points',
+        points: [
+          { x: 0, y: index },
+          { x: 50, y: index + 1 },
+          { x: 100, y: index + 2 },
+        ],
+      },
+    })),
+  }
+}
+
+function configureOverlay(overlay: ReturnType<typeof mount>['element']) {
+  const width = Number(overlay.getAttribute('width'))
+  const height = Number(overlay.getAttribute('height'))
+  Object.defineProperty(overlay, 'getBoundingClientRect', {
+    value: () => ({ left: 0, top: 0, width, height }),
+  })
+  return { width, height }
+}
+
+function dispatchWheel(overlay: Element, deltaY: number, width: number, height: number) {
+  overlay.dispatchEvent(
+    new WheelEvent('wheel', {
+      deltaY,
+      clientX: width / 2,
+      clientY: height / 2,
+      bubbles: true,
+      cancelable: true,
+    }),
+  )
+}
+
+describe('WaveformChart zoom intent and data rebind', () => {
+  it('keeps one shared wheel end after an immediate intent-driven data replacement', async () => {
+    vi.useFakeTimers()
+    try {
+      const data = ref<WaveformData>(fullSeries(['shared']))
+      const host = mount(
+        defineComponent({
+          setup() {
+            return () =>
+              h(WaveformChart, {
+                data: data.value,
+                displayMode: 'separated',
+                initialXDomain: [0, 100],
+                onZoomIntent: () => {
+                  data.value = seriesWindow(['shared'])
+                },
+              })
+          },
+        }),
+      )
+      resizeObservers.at(-1)?.resize(800, 360)
+      await flushPromises()
+
+      const chart = host.findComponent(WaveformChart)
+      const overlay = chart.get('.waveform-chart__overlay')
+      const { width, height } = configureOverlay(overlay.element)
+      dispatchWheel(overlay.element, -4_000, width, height)
+
+      const firstIntent = chart.emitted('zoom-intent')?.[0]?.[0] as {
+        start: number
+        end: number
+      }
+      expect(firstIntent.end - firstIntent.start).toBeCloseTo(2.5)
+      expect(chart.emitted('zoom-change')).toBeUndefined()
+
+      await flushPromises()
+      dispatchWheel(overlay.element, 1_000, width, height)
+      await flushPromises()
+      await vi.advanceTimersByTimeAsync(199)
+      expect(chart.emitted('zoom-end')).toBeUndefined()
+
+      await vi.advanceTimersByTimeAsync(1)
+      await flushPromises()
+      const zoomEnd = chart.emitted('zoom-end')?.[0]?.[0] as { start: number; end: number }
+      expect(chart.emitted('zoom-intent')).toHaveLength(2)
+      expect(chart.emitted('zoom-end')).toHaveLength(1)
+      expect(zoomEnd.end - zoomEnd.start).toBeGreaterThan(firstIntent.end - firstIntent.start)
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+
+  it('retains a pending independent wheel gesture by stable series identity', async () => {
+    vi.useFakeTimers()
+    try {
+      const data = ref<WaveformData>(fullSeries(['channel-a', 'channel-b']))
+      const host = mount(
+        defineComponent({
+          setup() {
+            return () =>
+              h(WaveformChart, {
+                data: data.value,
+                displayMode: 'independent',
+                grid: { rowCount: 1, columnCount: 2 },
+                initialXDomain: [0, 100],
+                onZoomIntent: () => {
+                  data.value = seriesWindow(['channel-b', 'channel-a'])
+                },
+              })
+          },
+        }),
+      )
+      resizeObservers.at(-1)?.resize(800, 360)
+      await flushPromises()
+
+      const chart = host.findComponent(WaveformChart)
+      const overlay = chart.findAll('.waveform-chart__overlay--independent')[0]!
+      const { width, height } = configureOverlay(overlay.element)
+      dispatchWheel(overlay.element, -4_000, width, height)
+      await flushPromises()
+      await vi.advanceTimersByTimeAsync(200)
+      await flushPromises()
+
+      const zoomEnd = chart.emitted('zoom-end')?.[0]?.[0] as {
+        trackIndex: number
+        seriesIds: string[]
+      }
+      expect(chart.emitted('zoom-intent')?.[0]?.[0]).toMatchObject({
+        trackIndex: 0,
+        seriesIds: ['channel-a'],
+        gesture: 'wheel',
+      })
+      expect(zoomEnd).toMatchObject({ trackIndex: 1, seriesIds: ['channel-a'], gesture: 'wheel' })
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+
+  it('emits box intent with the selected independent series', async () => {
+    const wrapper = await mountSizedChart(fullSeries(['series-a']), { initialXDomain: [0, 100] })
+    const overlay = wrapper.get('.waveform-chart__overlay--independent')
+    const { width, height } = configureOverlay(overlay.element)
+    const dispatchPointer = (type: string, clientX: number, clientY: number) => {
+      const event = new MouseEvent(type, { button: 0, clientX, clientY, bubbles: true })
+      Object.defineProperty(event, 'pointerId', { value: 11 })
+      overlay.element.dispatchEvent(event)
+    }
+
+    dispatchPointer('pointerdown', width * 0.25, height / 2)
+    dispatchPointer('pointermove', width * 0.75, height / 2)
+    dispatchPointer('pointerup', width * 0.75, height / 2)
+    await flushPromises()
+
+    expect(wrapper.emitted('zoom-intent')?.[0]?.[0]).toMatchObject({
+      trackIndex: 0,
+      seriesIds: ['series-a'],
+      gesture: 'box',
+    })
+  })
+
+  it('cancels pending wheel ends when reset or pagination changes the viewport', async () => {
+    vi.useFakeTimers()
+    try {
+      const reset = await mountSizedChart(fullSeries(['reset']), { initialXDomain: [0, 100] })
+      const resetOverlay = reset.get('.waveform-chart__overlay--independent')
+      const resetBounds = configureOverlay(resetOverlay.element)
+      dispatchWheel(resetOverlay.element, -4_000, resetBounds.width, resetBounds.height)
+      ;(reset.vm as unknown as { resetViewport: () => void }).resetViewport()
+      await vi.advanceTimersByTimeAsync(200)
+      expect(reset.emitted('zoom-end')).toBeUndefined()
+
+      const paged = await mountSizedChart(gridSeries(2), {
+        displayMode: 'independent',
+        grid: { rowCount: 1, columnCount: 1 },
+      })
+      const pageOverlay = paged.get('.waveform-chart__overlay--independent')
+      const pageBounds = configureOverlay(pageOverlay.element)
+      dispatchWheel(pageOverlay.element, -4_000, pageBounds.width, pageBounds.height)
+      await paged.get('.ant-pagination-next button').trigger('click')
+      await flushPromises()
+      await vi.advanceTimersByTimeAsync(200)
+      expect(paged.emitted('zoom-end')).toBeUndefined()
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+})

package/src/core/rendering.ts

@@ -1,6 +1,6 @@
 import { bisector } from 'd3'
 
-import type { WaveformPoint } from '@/types'
+import type { WaveformPoint } from '../types'
 import { resolveWaveformPointErrors } from './data'
 import type { ResolvedWaveformRenderingOptions } from './renderingOptions'
 import {

package/src/core/renderingOptions.ts

@@ -3,7 +3,7 @@ import type {
   WaveformSamplingMode,
   WaveformSamplingOptions,
   WaveformSamplingStrategy,
-} from '@/types'
+} from '../types'
 
 export interface ResolvedWaveformSamplingOptions {
   mode: WaveformSamplingMode

package/src/core/workerSampling/multiresolution.ts

@@ -1,4 +1,4 @@
-import type { WaveformPoint } from '@/types'
+import type { WaveformPoint } from '../../types'
 
 import type { WorkerSamplingOutput } from './protocol'
 

package/src/core/workerSampling/protocol.ts

@@ -6,7 +6,7 @@ import type {
   WaveformSamplingDiagnostics,
   WaveformSamplingMode,
   WaveformSamplingStrategy,
-} from '@/types'
+} from '../../types'
 import type { WorkerSamplingDataset } from '../waveformPointSource'
 
 export const DEFAULT_WORKER_SAMPLING_AUTO_THRESHOLD = 1_000

package/src/core/workerSampling/repository.ts

@@ -1,4 +1,4 @@
-import type { WaveformPoint } from '@/types'
+import type { WaveformPoint } from '../../types'
 import type { WorkerSamplingDataset } from '../waveformPointSource'
 import { javascriptSamplingBackend } from './javascriptBackend'
 import {

package/src/core/workerSampling/repositoryDataset.ts

@@ -1,4 +1,4 @@
-import type { WaveformPoint } from '@/types'
+import type { WaveformPoint } from '../../types'
 import type { WorkerSamplingDataset } from '../waveformPointSource'
 import type { WasmDatasetSamplingBackend } from '../wasmSampling'
 import { MultiResolutionSamplingIndex } from './multiresolution'

package/src/core/workerSampling/repositorySupport.ts

@@ -1,6 +1,6 @@
 import { bisector } from 'd3'
 
-import type { WaveformPoint } from '@/types'
+import type { WaveformPoint } from '../../types'
 import {
   DEFAULT_WORKER_SAMPLING_AUTO_THRESHOLD,
   DEFAULT_WORKER_SAMPLING_MAX_POINTS_PER_PIXEL,

package/src/index.ts

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

package/src/types/chart.ts

@@ -49,6 +49,15 @@ export interface WaveformZoomEndPayload {
   gesture?: 'wheel' | 'box'
 }
 
+/** Describes the X-axis viewport targeted by a user zoom gesture before rendering settles. */
+export interface WaveformZoomIntentPayload {
+  start: number
+  end: number
+  gesture: 'wheel' | 'box'
+  trackIndex?: number
+  seriesIds?: string[]
+}
+
 /** Identifies the viewport reset by a double-click gesture. */
 export interface WaveformZoomResetPayload {
   trackIndex?: number

package/src/types/index.ts

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

package/src/utils/geometry.ts

@@ -1,4 +1,4 @@
-import type { WaveformDisplayMode } from '@/types'
+import type { WaveformDisplayMode } from '../types'
 
 /**
  * 轨道几何信息