waveform-analysis 0.1.74 → 0.1.76

package/src/components/rendering/updateAxis.ts

@@ -0,0 +1,57 @@
+import { select } from 'd3'
+import type { Axis, NumberValue, ScaleLinear } from 'd3'
+
+const previous = new WeakMap<
+  SVGGElement,
+  { ticks: number[]; range: number[]; orientation: string }
+>()
+
+/** Avoid invalidating native SVG layout when an attribute already has the required value. */
+export function updateSvgAttribute(element: Element, name: string, value: string | number | null) {
+  const next = value === null ? null : String(value)
+  if (element.getAttribute(name) === next) return
+  if (next === null) element.removeAttribute(name)
+  else element.setAttribute(name, next)
+}
+
+/** Domain animation moves existing ticks; unchanged labels keep their native text nodes. */
+export function updateAxis(
+  element: SVGGElement,
+  axis: Axis<NumberValue>,
+  scale: ScaleLinear<number, number>,
+  ticks: number[],
+  orientation: 'bottom' | 'left' | 'right',
+  format: (value: number) => string,
+) {
+  const range = scale.range()
+  const cached = previous.get(element)
+  const selection = select(element)
+  if (
+    !cached ||
+    cached.ticks !== ticks ||
+    cached.orientation !== orientation ||
+    range.some((value, index) => value !== cached.range[index])
+  ) {
+    selection.call(axis)
+    previous.set(element, { ticks, range, orientation })
+  } else {
+    const horizontal = orientation === 'bottom'
+    const offset = axis.offset()
+    selection
+      .selectAll<SVGGElement, number>('.tick')
+      .each(function (value) {
+        updateSvgAttribute(
+          this,
+          'transform',
+          horizontal
+            ? `translate(${scale(value) + offset},0)`
+            : `translate(0,${scale(value) + offset})`,
+        )
+      })
+      .select<SVGTextElement>('text')
+      .each(function (value) {
+        const label = format(value)
+        if (this.textContent !== label) this.textContent = label
+      })
+  }
+}

package/src/components/rendering/updateGrid.ts

@@ -0,0 +1,42 @@
+import { updateSvgAttribute } from './updateAxis'
+import type { ScaleLinear } from 'd3'
+
+const nodes = new WeakMap<SVGGElement, Map<number, SVGLineElement>>()
+
+/** Keep each grid line independently discoverable by the axis collision pass. */
+export function updateGrid(
+  group: SVGGElement,
+  ticks: readonly number[],
+  scale: ScaleLinear<number, number>,
+  direction: 'vertical' | 'horizontal',
+  extent: number,
+  color: string | undefined,
+) {
+  let lines = nodes.get(group)
+  if (!lines) nodes.set(group, (lines = new Map()))
+  const current = new Set(ticks)
+  for (const [tick, line] of lines) {
+    if (!current.has(tick)) {
+      line.remove()
+      lines.delete(tick)
+    }
+  }
+  let previous: SVGLineElement | undefined
+  for (const tick of ticks) {
+    let line = lines.get(tick)
+    if (!line) {
+      line = document.createElementNS('http://www.w3.org/2000/svg', 'line')
+      line.setAttribute('data-grid-direction', direction)
+      lines.set(tick, line)
+    }
+    const next = previous ? previous.nextSibling : group.firstChild
+    if (next !== line) group.insertBefore(line, next)
+    const position = scale(tick)
+    updateSvgAttribute(line, 'stroke', color ?? null)
+    updateSvgAttribute(line, 'x1', direction === 'vertical' ? position : 0)
+    updateSvgAttribute(line, 'x2', direction === 'vertical' ? position : extent)
+    updateSvgAttribute(line, 'y1', direction === 'horizontal' ? position : 0)
+    updateSvgAttribute(line, 'y2', direction === 'horizontal' ? position : extent)
+    previous = line
+  }
+}

package/src/components/rendering/yAxisTickVisibility.ts

@@ -1,5 +1,6 @@
 import { sameTick } from '../core/yAxisPadding'
 import { formatYAxisTickLabel } from '../core/layout'
+import { updateSvgAttribute } from './updateAxis'
 
 interface Box {
   left: number
@@ -42,14 +43,25 @@ export function linesOverlap(a: number, b: number, widthA = 1, widthB = 1): bool
 }
 
 function hide(element: Element) {
-  element.setAttribute('display', 'none')
-  element.setAttribute('data-maximum-hidden', 'true')
+  updateSvgAttribute(element, 'display', 'none')
+  updateSvgAttribute(element, 'data-maximum-hidden', 'true')
 }
 
 function strokeWidth(element: Element): number {
   return Number.parseFloat(getComputedStyle(element).strokeWidth) || 1
 }
 
+const pending = new WeakSet<SVGSVGElement>()
+/** Coalesce sibling axes after Vue's current DOM patch, without adding a late animation frame. */
+export function scheduleMaximumTickVisibility(svg: SVGSVGElement) {
+  if (pending.has(svg)) return
+  pending.add(svg)
+  queueMicrotask(() => {
+    pending.delete(svg)
+    updateMaximumTickVisibility(svg)
+  })
+}
+
 function formatCompactLabels(svg: SVGSVGElement) {
   svg.querySelectorAll<SVGTextElement>('text[data-axis-maximum-label]').forEach((maximum) => {
     const axis = maximum.parentElement!.parentElement!
@@ -64,13 +76,14 @@ function formatCompactLabels(svg: SVGSVGElement) {
       Number(axis.getAttribute('data-label-domain-max')),
     ]
     labels.forEach((text) => {
-      text.textContent = formatYAxisTickLabel(
+      const label = formatYAxisTickLabel(
         value(text),
         domain,
         visibleValues,
         axis.getAttribute('data-label-unit') ?? undefined,
         axis.getAttribute('data-y-axis-side') === 'right' ? 'right' : 'left',
       )
+      if (text.textContent !== label) text.textContent = label
     })
   })
 }
@@ -78,24 +91,38 @@ function formatCompactLabels(svg: SVGSVGElement) {
 /** Apply after axes and grid are in the DOM; never feed the filtered set back into layout. */
 export function updateMaximumTickVisibility(svg: SVGSVGElement) {
   svg.querySelectorAll('[data-maximum-hidden]').forEach((el) => {
-    el.removeAttribute('display')
-    el.removeAttribute('data-maximum-hidden')
+    updateSvgAttribute(el, 'display', null)
+    updateSvgAttribute(el, 'data-maximum-hidden', null)
   })
   svg.querySelectorAll('.waveform-track__axis--y .tick text').forEach((text) => {
-    text.removeAttribute('display')
+    updateSvgAttribute(text, 'display', null)
   })
   formatCompactLabels(svg)
+  const boxes = new Map<SVGTextElement, Box>()
+  const widths = new Map<Element, number>()
+  const box = (text: SVGTextElement) => {
+    if (!boxes.has(text)) boxes.set(text, textBox(text))
+    return boxes.get(text)!
+  }
+  const width = (element: Element) => {
+    if (!widths.has(element)) widths.set(element, strokeWidth(element))
+    return widths.get(element)!
+  }
   const minimumLabels = [...svg.querySelectorAll<SVGTextElement>('text[data-axis-minimum-label]')]
   svg.querySelectorAll<SVGTextElement>('text[data-axis-maximum-label]').forEach((maximum) => {
-    const box = textBox(maximum)
-    if (minimumLabels.some((minimum) => labelsOverlap(box, textBox(minimum)))) hide(maximum)
+    const maximumBox = box(maximum)
+    if (minimumLabels.some((minimum) => labelsOverlap(maximumBox, box(minimum)))) hide(maximum)
   })
   svg.querySelectorAll<SVGGElement>('.waveform-track__axis--y .tick').forEach((tick) => {
     const position = Number(tick.getAttribute('data-tick-y'))
     const height = Number(tick.closest('.waveform-track')?.getAttribute('data-track-height'))
     const line = tick.querySelector('line')
-    if (sameTick(position, 0) || sameTick(position, height)) line?.setAttribute('display', 'none')
-    else line?.removeAttribute('display')
+    if (line)
+      updateSvgAttribute(
+        line,
+        'display',
+        sameTick(position, 0) || sameTick(position, height) ? 'none' : null,
+      )
   })
   const minimumTicks = [...svg.querySelectorAll<SVGGElement>('.tick[data-minimum-tick]')]
   const maximumTicks = [...svg.querySelectorAll<SVGGElement>('.tick[data-maximum-tick]')]
@@ -105,7 +132,7 @@ export function updateMaximumTickVisibility(svg: SVGSVGElement) {
     if (!text) return
     maximumTicks.forEach((maximum) => {
       const other = maximum.querySelector('text')
-      if (other && other !== text && labelsOverlap(textBox(text), textBox(other))) hide(other)
+      if (other && other !== text && labelsOverlap(box(text), box(other))) hide(other)
     })
   })
   const extremeTicks = [...new Set([...minimumTicks, ...maximumTicks])]
@@ -113,14 +140,14 @@ export function updateMaximumTickVisibility(svg: SVGSVGElement) {
     const text = tick.querySelector('text')
     const line = tick.querySelector('line')
     if (!text || !line) return
-    const box = textBox(text)
+    const textBounds = box(text)
     labels.forEach((other) => {
       if (text.getAttribute('display') === 'none') return
       if (other.getAttribute('display') === 'none') return
       if (other.parentElement?.matches('[data-minimum-tick], [data-maximum-tick]')) return
       if (!tick.hasAttribute('data-minimum-tick') && other.hasAttribute('data-axis-minimum-label'))
         return
-      if (labelsOverlap(box, textBox(other))) hide(other)
+      if (labelsOverlap(textBounds, box(other))) hide(other)
     })
     const axis = tick.parentElement!
     const value = Number(tick.getAttribute('data-tick-value'))
@@ -134,8 +161,8 @@ export function updateMaximumTickVisibility(svg: SVGSVGElement) {
           linesOverlap(
             position,
             Number(other.getAttribute('data-tick-y')),
-            strokeWidth(line),
-            strokeWidth(otherLine),
+            width(line),
+            width(otherLine),
           )
         )
           hide(otherLine)
@@ -145,12 +172,12 @@ export function updateMaximumTickVisibility(svg: SVGSVGElement) {
     const track = axis.closest('.waveform-track')!
     track.querySelectorAll('[data-grid-direction="horizontal"]').forEach((gridLine) => {
       const gridY = Number(gridLine.getAttribute('y1'))
-      if (linesOverlap(position, gridY, strokeWidth(line), strokeWidth(gridLine))) hide(gridLine)
+      if (linesOverlap(position, gridY, width(line), width(gridLine))) hide(gridLine)
     })
     if (tick.hasAttribute('data-maximum-tick'))
-      tick.setAttribute('data-maximum-value', String(value))
+      updateSvgAttribute(tick, 'data-maximum-value', value)
     if (tick.hasAttribute('data-minimum-tick'))
-      tick.setAttribute('data-minimum-value', String(value))
+      updateSvgAttribute(tick, 'data-minimum-value', value)
   })
   formatCompactLabels(svg)
 }

package/src/components/utils/assignElement.ts

@@ -0,0 +1,7 @@
+import type { ComponentPublicInstance, Ref } from 'vue'
+export function assignElement<T extends Element>(
+  target: Ref<T | undefined>,
+  element: Element | ComponentPublicInstance | null,
+) {
+  target.value = element instanceof Element ? (element as T) : undefined
+}

package/src/core/data.ts

@@ -215,10 +215,11 @@ function normalizedSeriesOptions(
 /** Internal normalized series which preserves compact TypedArray storage for chart rendering. */
 export function normalizeWaveformSeriesSources(
   data: WaveformData,
+  retainEmpty = false,
 ): NormalizedWaveformSourceSeries[] {
   if (data.kind !== 'series') {
     const source = createWaveformPointSource(data, normalizeWaveformData)
-    return source.length
+    return source.length || retainEmpty
       ? [
           {
             ...normalizedSeriesOptions('series-0', { name: '' }),
@@ -239,7 +240,9 @@ export function normalizeWaveformSeriesSources(
     }
     usedIds.add(uniqueId)
     const source = createWaveformPointSource(series.data, normalizeWaveformData)
-    return source.length ? [{ ...normalizedSeriesOptions(uniqueId, series), source }] : []
+    return source.length || retainEmpty
+      ? [{ ...normalizedSeriesOptions(uniqueId, series), source }]
+      : []
   })
 }
 

package/src/data/simulatedWaveforms.ts

@@ -1,6 +1,5 @@
 import type { WaveformData, WaveformPoint, WaveformSeries } from '../types'
 import { recordedDampedPoints } from './recordedDampedWaveform'
-import { sx2Channel } from './sx2Channel'
 
 const POINT_COUNT = 1_000
 const START_TIME = -5
@@ -177,15 +176,6 @@ const seriesDefinitions: SimulatedSeriesDefinition[] = [
     pointType: 'none',
     signal: (time) => 6e-9 * Math.exp(-(time + 5) * 0.2) * Math.cos(TWO_PI * 0.8 * time),
   },
-  {
-    id: `recorded-${sx2Channel.chnl_id}`,
-    shotNo: String(sx2Channel.shot),
-    name: sx2Channel.chnl,
-    unit: sx2Channel.dat_unit,
-    lineType: 'linear',
-    pointType: 'none',
-    signal: sx2Channel.data.map((value, index) => [sx2Channel.time[index]!, value]),
-  },
 ]
 
 export function createSimulatedWaveformData(trackCount?: number): WaveformData {

package/src/demo/DemoChartHost.vue

@@ -1,15 +1,20 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 
 import { WaveformChart } from '../components'
 import type { DemoChartModel } from './types'
+import { applyXDomainStrategy } from '../components/core/xDomain'
 
 const model = defineModel<DemoChartModel>('model', { required: true })
+const xDomainStrategy = { type: 'integer-ms' as const, includeExplicit: true }
+const panXDomain = computed(() =>
+  applyXDomainStrategy(model.value.recordDomain, xDomainStrategy, true),
+)
 
 const waveformChartRef = ref<{ resetViewport: (trackIndex?: number) => void }>()
 
-function resetViewport() {
-  waveformChartRef.value?.resetViewport()
+function resetViewport(trackIndex?: number) {
+  waveformChartRef.value?.resetViewport(trackIndex)
 }
 
 defineExpose({ resetViewport })
@@ -17,6 +22,17 @@ defineExpose({ resetViewport })
 
 <template>
   <section class="chart-panel">
+    <div
+      v-if="model.loading || model.errors.length"
+      class="remote-window-status"
+      aria-live="polite"
+    >
+      <span v-if="model.loading" role="status">正在加载当前时间范围…</span>
+      <template v-if="model.errors.length">
+        <span role="alert">{{ model.errors.join('；') }}</span>
+        <button type="button" :disabled="model.loading" @click="model.retry()">重试</button>
+      </template>
+    </div>
     <WaveformChart
       ref="waveformChartRef"
       layout-preset="edge-compact"
@@ -25,15 +41,19 @@ defineExpose({ resetViewport })
       v-model:hidden-series-ids="model.hiddenSeriesIds"
       :data="model.data"
       :min-visible-points="2"
+      :min-zoom-span="model.minZoomSpan"
+      :max-zoom-scale="null"
+      :pan-x-domain="panXDomain"
       :integer-zoom="model.integerZoom"
       :initial-x-domain="model.initialXDomain"
-      :x-domain-strategy="{ type: 'integer-ms', includeExplicit: true }"
+      :x-domain-strategy="xDomainStrategy"
       :display-mode="model.displayMode"
       :overlay-mode="model.overlayMode"
       :grid="{
         rowCount: model.rowCount,
         columnCount: model.columnCount,
         showPagination: true,
+        fillIncompleteLastRow: true,
         trackLines: model.gridTrackLines,
       }"
       :title="model.title"
@@ -55,8 +75,33 @@ defineExpose({ resetViewport })
       v-model:interaction-mode="model.interactionMode"
       :toolbar="model.toolbarVisible"
       pannable
+      @zoom-intent="model.handleZoomIntent"
+      @zoom-change="model.handleZoomChange"
       @zoom-end="model.handleZoomEnd"
+      @pan-end="model.handlePanEnd"
       @zoom-reset="model.resetWaveformViewport"
     />
   </section>
 </template>
+
+<style scoped>
+.chart-panel {
+  position: relative;
+}
+
+.remote-window-status {
+  position: absolute;
+  top: 6px;
+  right: 12px;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  max-width: calc(100% - 24px);
+  padding: 6px 10px;
+  border: 1px solid #d0d5dd;
+  border-radius: 4px;
+  background: #fff;
+  color: #344054;
+}
+</style>

package/src/demo/remoteWaveformLoader.ts

@@ -0,0 +1,114 @@
+import type { InjectionKey } from 'vue'
+import { normalizeWaveformSeries } from '../core'
+import { normalizeWaveformSeriesSources } from '../core/data'
+import type { WaveformData } from '../types'
+
+export interface RemoteWindowRequest {
+  start: number
+  end: number
+  seriesIds?: string[]
+}
+
+export type RemoteWindowLoader = (
+  request: RemoteWindowRequest,
+  signal: AbortSignal,
+) => Promise<WaveformData>
+
+export const remoteWindowLoaderKey: InjectionKey<RemoteWindowLoader> = Symbol('remoteWindowLoader')
+
+export interface MockWindowOptions {
+  delayMs?: number | ((request: RemoteWindowRequest) => number)
+  empty?: boolean | ((request: RemoteWindowRequest) => boolean)
+  fail?: boolean | ((request: RemoteWindowRequest) => boolean)
+}
+
+/** Preserve series identities even when a window has no samples. */
+export function selectWaveformWindow(
+  data: WaveformData,
+  request: RemoteWindowRequest,
+  empty = false,
+): WaveformData {
+  const series = normalizeWaveformSeriesSources(data, true)
+  const selected = request.seriesIds ? new Set(request.seriesIds) : undefined
+  const windows = series
+    .filter((item) => !selected || selected.has(item.id))
+    .map(({ source, ...item }) => {
+      const range = source.visibleRange([request.start, request.end])
+      return {
+        ...item,
+        data: {
+          kind: 'points' as const,
+          points: empty ? [] : source.pointsInRange(range.start, range.end),
+        },
+      }
+    })
+  return data.kind === 'series'
+    ? { kind: 'series', series: windows }
+    : (windows[0]?.data ?? { kind: 'points', points: [] })
+}
+
+export function mergeWaveformWindow(
+  current: WaveformData,
+  response: WaveformData,
+  seriesIds?: string[],
+): WaveformData {
+  if (!seriesIds || current.kind !== 'series' || response.kind !== 'series') return response
+  const selected = new Set(seriesIds)
+  const byId = new Map(response.series.map((series) => [series.id, series]))
+  return {
+    kind: 'series',
+    series: current.series.map((series) =>
+      series.id && selected.has(series.id) ? (byId.get(series.id) ?? series) : series,
+    ),
+  }
+}
+
+/** Metadata is derived from the complete record, never from a loaded window. */
+export function waveformRecordMetadata(data: WaveformData) {
+  let minimum = Infinity
+  let maximum = -Infinity
+  let minZoomSpan = Infinity
+  for (const series of normalizeWaveformSeries(data)) {
+    for (let index = 0; index < series.points.length; index++) {
+      const x = series.points[index].x
+      minimum = Math.min(minimum, x)
+      maximum = Math.max(maximum, x)
+      const previous = series.points[index - 1]?.x
+      if (previous !== undefined && x > previous) {
+        minZoomSpan = Math.min(minZoomSpan, x - previous)
+      }
+    }
+  }
+  return {
+    domain: (minimum < maximum ? [minimum, maximum] : [0, 1]) as [number, number],
+    minZoomSpan: Number.isFinite(minZoomSpan) ? minZoomSpan : undefined,
+  }
+}
+
+export function createMockWindowLoader(
+  source: () => WaveformData,
+  options: MockWindowOptions = {},
+): RemoteWindowLoader {
+  return (request, signal) =>
+    new Promise((resolve, reject) => {
+      const abort = () => {
+        clearTimeout(timer)
+        signal.removeEventListener('abort', abort)
+        reject(new DOMException('Request cancelled', 'AbortError'))
+      }
+      const delay =
+        typeof options.delayMs === 'function' ? options.delayMs(request) : options.delayMs
+      const timer = setTimeout(() => {
+        signal.removeEventListener('abort', abort)
+        const fail = typeof options.fail === 'function' ? options.fail(request) : options.fail
+        if (fail) {
+          reject(new Error('模拟数据加载失败'))
+          return
+        }
+        const empty = typeof options.empty === 'function' ? options.empty(request) : options.empty
+        resolve(selectWaveformWindow(source(), request, empty))
+      }, delay ?? 80)
+      signal.addEventListener('abort', abort, { once: true })
+      if (signal.aborted) abort()
+    })
+}

package/src/demo/types.ts

@@ -14,7 +14,9 @@ import type {
   WaveformTitleOptions,
   WaveformZeroLineOptions,
   WaveformZoomEndPayload,
+  WaveformZoomIntentPayload,
 } from '../components'
+import type { WaveformZoomResetPayload, WaveformPanEndPayload } from '../types'
 import type { DemoXAxisLabelFormat, DemoXAxisLabelTimeZone } from './useDemoXAxisLabelControls'
 
 interface SelectOption<T> {
@@ -97,6 +99,11 @@ export interface DemoChartModel {
   toolbarVisible: boolean
   data: WaveformData
   initialXDomain?: [number, number]
+  recordDomain: [number, number]
+  minZoomSpan?: number
+  loading: boolean
+  errors: string[]
+  retry: () => Promise<void[]>
   displayMode: WaveformDisplayMode
   overlayMode: WaveformOverlayMode
   rowCount: number
@@ -120,5 +127,8 @@ export interface DemoChartModel {
   interactionMode: WaveformInteractionMode
   hiddenSeriesIds: string[]
   handleZoomEnd: (payload: WaveformZoomEndPayload) => void | Promise<void>
-  resetWaveformViewport: () => void
+  handleZoomIntent: (payload: WaveformZoomIntentPayload) => void
+  handleZoomChange: (domain: [number, number]) => void
+  handlePanEnd: (payload: WaveformPanEndPayload) => void | Promise<void>
+  resetWaveformViewport: (payload?: WaveformZoomResetPayload) => void | Promise<void>
 }