waveform-analysis 0.1.48 → 0.1.51

package/src/core/workerSampling/workerRuntime.ts

@@ -0,0 +1,40 @@
+import { createInitializedWasmSamplingBackend, initializeWasmSampling } from '../wasmSampling'
+import { WorkerSamplingRepository } from './repository'
+import type { WorkerSamplingRequest, WorkerSamplingResponse } from './protocol'
+
+const repository = new WorkerSamplingRepository()
+let wasmInitialization: Promise<void> | undefined
+let wasmInitializationError: string | undefined
+
+function requiresWasm(request: WorkerSamplingRequest) {
+  return (
+    request.type === 'sample-viewport' && request.series.some((series) => series.mode !== 'raw')
+  )
+}
+
+async function initializeWasmBackend() {
+  if (wasmInitializationError) return
+  wasmInitialization ??= initializeWasmSampling()
+    .then(() => {
+      repository.setWasmBackend(createInitializedWasmSamplingBackend())
+    })
+    .catch((error: unknown) => {
+      wasmInitializationError = error instanceof Error ? error.message : String(error)
+    })
+  await wasmInitialization
+}
+
+function addWasmError(response: WorkerSamplingResponse): WorkerSamplingResponse {
+  if (response.type !== 'sample-viewport-response' || !wasmInitializationError) return response
+  return { ...response, workerError: wasmInitializationError }
+}
+
+const workerScope = globalThis as typeof globalThis & {
+  onmessage: ((event: MessageEvent<WorkerSamplingRequest>) => void) | null
+  postMessage: (message: WorkerSamplingResponse) => void
+}
+
+workerScope.onmessage = async (event: MessageEvent<WorkerSamplingRequest>) => {
+  if (requiresWasm(event.data)) await initializeWasmBackend()
+  workerScope.postMessage(addWasmError(repository.handle(event.data)))
+}

package/src/data/simulatedWaveforms.test.ts

@@ -18,6 +18,25 @@ describe('simulated waveform data', () => {
     )
     expect(secondFrame).toHaveLength(2)
     expect(new Set(first.series.map((series) => series.shotNo))).toEqual(new Set(['13300']))
+    const firstSeries = first.series[0]
+    expect(firstSeries).toMatchObject({
+      id: 'simulated-sine',
+      lineType: 'linear',
+      pointType: 'circle',
+      errorBar: { visible: true, width: 1.5, capWidth: 10 },
+    })
+    if (firstSeries?.data.kind === 'points') {
+      const lowerErrors = firstSeries.data.points.map((point) => point.lowerError)
+      const upperErrors = firstSeries.data.points.map((point) => point.upperError)
+      expect(
+        lowerErrors.every((error) => error !== undefined && error >= 0.05 && error < 0.5),
+      ).toBe(true)
+      expect(
+        upperErrors.every((error) => error !== undefined && error >= 0.05 && error < 0.5),
+      ).toBe(true)
+      expect(new Set(lowerErrors).size).toBeGreaterThan(900)
+      expect(new Set(upperErrors).size).toBeGreaterThan(900)
+    }
     first.series.forEach((series) => {
       expect(series.data.kind).toBe('points')
       if (series.data.kind !== 'points') return

package/src/data/simulatedWaveforms.ts

@@ -9,6 +9,7 @@ type SignalGenerator = (time: number, noise: number) => number
 type ErrorGenerator = (
   time: number,
   value: number,
+  noise: () => number,
 ) => Pick<WaveformPoint, 'error' | 'lowerError' | 'upperError'>
 
 interface SimulatedSeriesDefinition extends Pick<
@@ -32,6 +33,7 @@ function createPoints(
   signal: SignalGenerator,
   noise: () => number,
   errors?: ErrorGenerator,
+  errorNoise: () => number = noise,
 ): WaveformPoint[] {
   return Array.from({ length: POINT_COUNT }, (_, index) => {
     const time = START_TIME + (index * (END_TIME - START_TIME)) / (POINT_COUNT - 1)
@@ -39,7 +41,7 @@ function createPoints(
     return {
       x: time,
       y: value,
-      ...errors?.(time, value),
+      ...errors?.(time, value, errorNoise),
     }
   })
 }
@@ -50,13 +52,13 @@ const seriesDefinitions: SimulatedSeriesDefinition[] = [
     shotNo: '13300',
     name: '正弦基波',
     unit: 'V',
-    lineType: 'none',
-    pointType: 'triangle',
-    errorBar: { visible: true },
+    lineType: 'linear',
+    pointType: 'circle',
+    errorBar: { visible: true, width: 1.5, capWidth: 10 },
     signal: (time) => 1.2 * Math.sin(TWO_PI * 0.8 * time),
-    errors: (time) => ({
-      lowerError: 0.06 + 0.015 * Math.abs(Math.sin(time)),
-      upperError: 0.08 + 0.02 * Math.abs(Math.cos(time)),
+    errors: (_time, _value, noise) => ({
+      lowerError: 0.05 + (noise() + 0.5) * 0.45,
+      upperError: 0.05 + (noise() + 0.5) * 0.45,
     }),
   },
   {
@@ -128,10 +130,11 @@ const seriesDefinitions: SimulatedSeriesDefinition[] = [
 
 export function createSimulatedWaveformData(): WaveformData {
   const noise = createSeededNoise(0x5eed1234)
+  const errorNoise = createSeededNoise(0xe220a11)
   return {
     kind: 'series',
     series: seriesDefinitions.map(({ signal, errors, minimumX, ...series }) => {
-      const points = createPoints(signal, noise, errors)
+      const points = createPoints(signal, noise, errors, errorNoise)
       return {
         ...series,
         data: {

package/src/demoRoutes.css

@@ -138,6 +138,116 @@
   min-height: 0;
 }
 
+.sampling-demo {
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr);
+  gap: 12px;
+  width: 100%;
+  height: 100%;
+  padding: 16px;
+  overflow: hidden;
+}
+
+.sampling-demo__toolbar {
+  display: flex;
+  gap: 24px;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
+}
+
+.sampling-demo__toolbar h1 {
+  margin: 0;
+  color: #101828;
+  font-size: 18px;
+  font-weight: 700;
+  letter-spacing: 0;
+}
+
+.sampling-demo__toolbar p {
+  margin: 4px 0 0;
+  color: #667085;
+  font-size: 12px;
+}
+
+.sampling-demo__controls {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  min-height: 48px;
+  padding: 8px 12px;
+  background: #fff;
+  border: 1px solid #e4e7ec;
+  border-radius: 6px;
+}
+
+.sampling-demo__controls label {
+  display: grid;
+  grid-template-columns: auto 132px;
+  gap: 8px;
+  align-items: center;
+  color: #475467;
+  font-size: 12px;
+}
+
+.sampling-demo__workspace {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 450px;
+  gap: 12px;
+  min-width: 0;
+  min-height: 0;
+}
+
+.sampling-demo__chart {
+  min-width: 0;
+  min-height: 0;
+}
+
+.sampling-demo__chart > .waveform-chart {
+  height: 100%;
+  min-height: 0;
+}
+
+.sampling-demo__diagnostics {
+  min-width: 0;
+  overflow: auto;
+  background: #fff;
+  border: 1px solid #e4e7ec;
+  border-radius: 6px;
+}
+
+.sampling-demo__diagnostic-header,
+.sampling-demo__diagnostic-row {
+  display: grid;
+  grid-template-columns: 60px 54px repeat(3, minmax(46px, 1fr)) 55px 48px;
+  gap: 5px;
+  align-items: center;
+  min-width: 405px;
+  padding: 9px 10px;
+  color: #475467;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+}
+
+.sampling-demo__diagnostic-header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  color: #667085;
+  font-weight: 650;
+  background: #f8fafc;
+  border-bottom: 1px solid #e4e7ec;
+}
+
+.sampling-demo__diagnostic-row + .sampling-demo__diagnostic-row {
+  border-top: 1px solid #f0f2f5;
+}
+
+.sampling-demo__diagnostic-row .is-hit {
+  color: #237804;
+  font-weight: 650;
+}
+
 @media (max-width: 900px) {
   .demo-shell {
     grid-template-rows: 44px minmax(0, 1fr);
@@ -194,4 +304,71 @@
     border-top: 1px solid #e4e7ec;
     border-left: 0;
   }
+
+  .sampling-demo {
+    gap: 8px;
+    padding: 10px;
+  }
+
+  .sampling-demo__toolbar {
+    display: grid;
+    gap: 8px;
+  }
+
+  .sampling-demo__toolbar .ant-radio-group {
+    display: flex;
+    width: 100%;
+  }
+
+  .sampling-demo__toolbar .ant-radio-button-wrapper {
+    flex: 1 1 0;
+    padding-inline: 6px;
+    text-align: center;
+  }
+
+  .sampling-demo__controls {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px 12px;
+  }
+
+  .sampling-demo__controls label {
+    grid-template-columns: 1fr;
+    gap: 3px;
+  }
+
+  .sampling-demo__workspace {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: minmax(280px, 1fr) 208px;
+  }
+
+  .sampling-demo__diagnostic-header {
+    display: none;
+  }
+
+  .sampling-demo__diagnostic-row {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 7px 12px;
+    min-width: 0;
+    padding: 10px;
+  }
+
+  .sampling-demo__diagnostic-row span {
+    min-width: 0;
+    overflow: hidden;
+    color: #344054;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .sampling-demo__diagnostic-row span::before {
+    display: block;
+    color: #667085;
+    font-size: 10px;
+    content: attr(data-label);
+  }
+
+  .sampling-demo__diagnostic-row span:first-child {
+    grid-column: 1 / -1;
+  }
 }

package/src/index.ts

@@ -18,6 +18,12 @@ export type {
   WaveformZoomResetPayload,
   WaveformAnnotationStyle,
   WaveformAnnotation,
+  WaveformSamplingMode,
+  WaveformSamplingStrategy,
+  WaveformSamplingOptions,
+  WaveformSamplingBackend,
+  WaveformSamplingDiagnostics,
+  WaveformSamplingError,
   WaveformRenderingOptions,
   WaveformPlotMargin,
   WaveformTitleTextStyle,
@@ -38,6 +44,9 @@ export type {
   WaveformPointType,
   WaveformErrorBarOptions,
   ResolvedWaveformErrorBarOptions,
+  WaveformTypedValues,
+  TypedSampleData,
+  TypedPointData,
   WaveformSeries,
   WaveformData,
   NormalizedWaveformSeries,
@@ -67,10 +76,19 @@ export {
 } from './utils'
 
 export {
+  calculateWasmRange,
+  findWasmVisibleRange,
   DEFAULT_WAVEFORM_RENDERING_OPTIONS,
   resolveWaveformRenderingOptions,
   selectRenderablePoints,
   type ResolvedWaveformRenderingOptions,
+  type ResolvedWaveformSamplingOptions,
+  type WasmRangeMetrics,
+  initializeWasmSampling,
+  sampleWaveformWasm,
+  type WasmSamplingRequest,
+  type WasmSamplingResult,
+  type WasmSamplingStrategy,
 } from './core'
 
 export { parseWaveformAnnotations, serializeWaveformAnnotations } from './components/annotation'

package/src/router.ts

@@ -13,6 +13,11 @@ export const routes: RouteRecordRaw[] = [
     name: 'fixed-y-domain',
     component: () => import('./views/FixedYDomainDemo.vue'),
   },
+  {
+    path: '/wasm-sampling',
+    name: 'wasm-sampling',
+    component: () => import('./views/WasmSamplingDemo.vue'),
+  },
 ]
 
 export const router = createRouter({

package/src/types/chart.ts

@@ -77,8 +77,71 @@ export interface WaveformAnnotation {
   createdAt?: string
 }
 
+/** Selects the execution path used to obtain points for waveform rendering. */
+export type WaveformSamplingMode = 'auto' | 'wasm' | 'raw'
+
+/** Selects the point-reduction algorithm used by the sampling backend. */
+export type WaveformSamplingStrategy =
+  'auto' | 'none' | 'peak' | 'lttb' | 'average' | 'min' | 'max' | 'minmax' | 'sum'
+
+/** Controls how waveform points are selected for rendering. */
+export interface WaveformSamplingOptions {
+  /** Defaults to `auto`. */
+  mode?: WaveformSamplingMode
+  /** Per-series visible-point threshold used by auto mode. Defaults to 1,000. */
+  autoThreshold?: number
+  /** Interaction-only hysteresis around the automatic threshold. Defaults to 0. */
+  autoHysteresis?: number
+  /** Defaults to the peak-preserving strategy. */
+  strategy?: WaveformSamplingStrategy
+  /** Upper bound for rendered points per horizontal CSS pixel. */
+  maxPointsPerPixel?: number
+  /** Visible-point count at which raw rendering should report a diagnostic. */
+  rawPointLimit?: number
+  /** Controls whether a forced WASM failure may temporarily show JavaScript results. */
+  wasmFailureFallback?: 'error' | 'javascript'
+}
+
+/** The backend that produced a series' current SVG geometry. */
+export type WaveformSamplingBackend = 'raw' | 'javascript' | 'wasm' | 'unavailable'
+
+/** Read-only details emitted after a sampling request settles. */
+export interface WaveformSamplingDiagnostics {
+  seriesId: string
+  /** Internal dataset identity, useful when correlating request logs. */
+  datasetId: string
+  mode: WaveformSamplingMode
+  selectedMode: 'raw' | 'sampled'
+  backend: WaveformSamplingBackend
+  strategy: Exclude<WaveformSamplingStrategy, 'auto'>
+  sourcePointCount: number
+  visiblePointCount: number
+  renderedPointCount: number
+  durationMs: number
+  cacheHit: boolean
+  requestId: number
+  revision: number
+  rawPointLimitExceeded: boolean
+  /** Cumulative sampling runs scheduled by this chart instance. */
+  scheduledRequestCount: number
+  /** Cumulative intermediate runs replaced before they entered the Worker queue. */
+  coalescedRequestCount: number
+  /** Maximum retained pending runs; bounded to one by the latest-wins scheduler. */
+  maxPendingRequestCount: number
+}
+
+/** Describes a sampling backend failure without exposing an implementation-specific Error object. */
+export interface WaveformSamplingError {
+  message: string
+  mode: WaveformSamplingMode
+  fallback: 'javascript' | 'none'
+  seriesIds: string[]
+}
+
 /** Controls how many source points are included in the rendered SVG path. */
 export interface WaveformRenderingOptions {
+  /** Sampling execution and strategy configuration. Takes precedence over legacy fields. */
+  sampling?: WaveformSamplingOptions
   /** Disable only when every source point must be rendered. */
   downsample?: boolean
   /** Visible point count below which the complete range is rendered. */

package/src/types/data.ts

@@ -27,8 +27,29 @@ export interface ResolvedWaveformErrorBarOptions {
   capWidth: number
 }
 
+/** Numeric storage accepted by the compact waveform input formats. */
+export type WaveformTypedValues = Float32Array | Float64Array
+
+/** Compact, evenly spaced samples. X is derived as `startTime + index / sampleRate`. */
+export interface TypedSampleData {
+  kind: 'typed-samples'
+  values: WaveformTypedValues
+  sampleRate: number
+  startTime?: number
+}
+
+/** Compact points with explicit X coordinates. X uses Float64 precision by contract. */
+export interface TypedPointData {
+  kind: 'typed-points'
+  x: Float64Array
+  y: WaveformTypedValues
+  error?: WaveformTypedValues
+  lowerError?: WaveformTypedValues
+  upperError?: WaveformTypedValues
+}
+
 /**
- * 单波形数据格式（采样点或显式坐标点）
+ * 单波形数据格式（对象数组或紧凑 TypedArray）
  */
 export type SingleWaveformData =
   | {
@@ -41,6 +62,8 @@ export type SingleWaveformData =
       kind: 'points'
       points: WaveformPoint[]
     }
+  | TypedSampleData
+  | TypedPointData
 
 /**
  * 波形系列

package/src/types/index.ts

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

package/src/views/WasmSamplingDemo.test.ts

@@ -0,0 +1,13 @@
+import { describe, expect, it } from 'vitest'
+
+import { routes } from '../router'
+
+describe('WASM sampling demo route', () => {
+  it('registers the hash-demo route', () => {
+    expect(routes).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ path: '/wasm-sampling', name: 'wasm-sampling' }),
+      ]),
+    )
+  })
+})

package/src/views/WasmSamplingDemo.vue

@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import { InputNumber, RadioButton, RadioGroup, Select } from 'ant-design-vue'
+
+import { WaveformChart } from '../components'
+import type {
+  WaveformData,
+  WaveformRenderingOptions,
+  WaveformSamplingDiagnostics,
+  WaveformSamplingMode,
+  WaveformSamplingStrategy,
+} from '../types'
+
+const SERIES_COUNT = 10
+const POINTS_PER_SERIES = 100_000
+
+const colors = [
+  '#1677ff',
+  '#d4380d',
+  '#389e0d',
+  '#d46b08',
+  '#08979c',
+  '#c41d7f',
+  '#531dab',
+  '#096dd9',
+  '#ad6800',
+  '#237804',
+]
+
+const strategyOptions: Array<{ label: string; value: WaveformSamplingStrategy }> = [
+  { label: '自动（peak）', value: 'auto' },
+  { label: 'Peak', value: 'peak' },
+  { label: 'LTTB', value: 'lttb' },
+  { label: 'MinMax', value: 'minmax' },
+  { label: 'Min', value: 'min' },
+  { label: 'Max', value: 'max' },
+  { label: 'Average', value: 'average' },
+  { label: 'Sum', value: 'sum' },
+  { label: 'None', value: 'none' },
+]
+
+function createDenseData(): WaveformData {
+  return {
+    kind: 'series',
+    series: Array.from({ length: SERIES_COUNT }, (_, seriesIndex) => {
+      const values = new Float32Array(POINTS_PER_SERIES)
+      for (let index = 0; index < values.length; index += 1) {
+        const t = index / 1_000
+        const pulse = index % (8_123 + seriesIndex * 113) < 3 ? 3.5 + seriesIndex / 4 : 0
+        values[index] =
+          Math.sin(t * (0.8 + seriesIndex / 14)) * (1.2 + seriesIndex / 10) +
+          Math.cos(t * (2.1 + seriesIndex / 20)) * 0.35 +
+          pulse
+      }
+      return {
+        id: `dense-${seriesIndex + 1}`,
+        trackId: 'dense-overlay',
+        name: `通道 ${String(seriesIndex + 1).padStart(2, '0')}`,
+        color: colors[seriesIndex],
+        data: { kind: 'typed-samples' as const, values, sampleRate: 1_000 },
+      }
+    }),
+  }
+}
+
+const data = createDenseData()
+const mode = ref<WaveformSamplingMode>('auto')
+const strategy = ref<WaveformSamplingStrategy>('peak')
+const autoThreshold = ref(1_000)
+const maxPointsPerPixel = ref(3)
+const diagnostics = reactive<Record<string, WaveformSamplingDiagnostics | undefined>>({})
+
+const rendering = computed<WaveformRenderingOptions>(() => ({
+  sampling: {
+    mode: mode.value,
+    strategy: strategy.value,
+    autoThreshold: autoThreshold.value,
+    maxPointsPerPixel: maxPointsPerPixel.value,
+    rawPointLimit: 100_000,
+    wasmFailureFallback: 'javascript',
+  },
+}))
+const rows = computed(() =>
+  Array.from({ length: SERIES_COUNT }, (_, index) => {
+    const id = `dense-${index + 1}`
+    return { id, name: `通道 ${String(index + 1).padStart(2, '0')}`, diagnostic: diagnostics[id] }
+  }),
+)
+
+function onSamplingComplete(diagnostic: WaveformSamplingDiagnostics) {
+  diagnostics[diagnostic.seriesId] = diagnostic
+}
+
+function pointCount(value: number | undefined) {
+  return value === undefined ? '--' : value.toLocaleString('en-US')
+}
+</script>
+
+<template>
+  <main class="sampling-demo">
+    <header class="sampling-demo__toolbar">
+      <div>
+        <h1>WASM 多分辨率采样</h1>
+        <p>10 条 TypedArray 通道，每条 {{ POINTS_PER_SERIES.toLocaleString('en-US') }} 点</p>
+      </div>
+      <RadioGroup v-model:value="mode" button-style="solid" aria-label="采样执行模式">
+        <RadioButton value="auto">Auto</RadioButton>
+        <RadioButton value="wasm">WASM</RadioButton>
+        <RadioButton value="raw">Raw</RadioButton>
+      </RadioGroup>
+    </header>
+
+    <section class="sampling-demo__controls" aria-label="采样参数">
+      <label>
+        <span>策略</span>
+        <Select v-model:value="strategy" :options="strategyOptions" size="small" />
+      </label>
+      <label>
+        <span>阈值</span>
+        <InputNumber
+          v-model:value="autoThreshold"
+          :min="1"
+          :max="100000"
+          :step="100"
+          size="small"
+        />
+      </label>
+      <label>
+        <span>每像素点数</span>
+        <InputNumber
+          v-model:value="maxPointsPerPixel"
+          :min="0.25"
+          :max="16"
+          :step="0.25"
+          size="small"
+        />
+      </label>
+    </section>
+
+    <section class="sampling-demo__workspace">
+      <div class="sampling-demo__chart">
+        <WaveformChart
+          :data="data"
+          :rendering="rendering"
+          :grid="{ rowCount: 1, columnCount: 1, showPagination: false }"
+          :legend="{ position: 'top-right', orientation: 'vertical' }"
+          :title="{ visible: true, text: '多系列采样与缓存诊断', align: 'left' }"
+          x-label="时间（s）"
+          time-unit="s"
+          @sampling-complete="onSamplingComplete"
+        />
+      </div>
+
+      <aside class="sampling-demo__diagnostics" aria-label="每系列采样诊断">
+        <div class="sampling-demo__diagnostic-header">
+          <span>系列</span>
+          <span>后端</span>
+          <span>源点</span>
+          <span>可见</span>
+          <span>渲染</span>
+          <span>耗时</span>
+          <span>缓存</span>
+        </div>
+        <div v-for="row in rows" :key="row.id" class="sampling-demo__diagnostic-row">
+          <span data-label="系列">{{ row.name }}</span>
+          <span data-label="后端">{{ row.diagnostic?.backend ?? '--' }}</span>
+          <span data-label="源点">{{ pointCount(row.diagnostic?.sourcePointCount) }}</span>
+          <span data-label="可见">{{ pointCount(row.diagnostic?.visiblePointCount) }}</span>
+          <span data-label="渲染">{{ pointCount(row.diagnostic?.renderedPointCount) }}</span>
+          <span data-label="耗时">{{
+            row.diagnostic ? `${row.diagnostic.durationMs.toFixed(2)} ms` : '--'
+          }}</span>
+          <span data-label="缓存" :class="{ 'is-hit': row.diagnostic?.cacheHit }">
+            {{ row.diagnostic ? (row.diagnostic.cacheHit ? '命中' : '未命中') : '--' }}
+          </span>
+        </div>
+      </aside>
+    </section>
+  </main>
+</template>