waveform-analysis 0.1.74 → 0.1.75

package/src/components/core/useWaveformChartController.ts

@@ -1,4 +1,6 @@
-import { chartExportOptions } from '../controls/chartExportOptions'
+import { assignElement } from '../utils/assignElement'
+import { chartExportVersion } from '../animation/chartExportVersion'
+import { useWaveformAnimations } from '../animation/useWaveformAnimations'
 import { useChartImageExport } from '../controls/useChartImageExport'
 import { useControlMode } from '../controls/useControlMode'
 import { useChartCommands } from '../controls/useChartCommands'
@@ -16,9 +18,7 @@ import {
   watch,
   watchEffect,
   type ComponentPublicInstance,
-  type Ref,
 } from 'vue'
-
 import { useWaveformInstanceId } from '../../utils/waveformId'
 import { useWaveformAnnotationInteraction, type AnnotationSeriesCandidate } from '../annotation'
 import { useWaveformChartAnnotations } from '../annotation/useWaveformChartAnnotations'
@@ -41,14 +41,6 @@ import type {
   ViewportSelectionState,
   WaveformChartEmit,
 } from './waveformChartTypes'
-
-function assignElement<T extends Element>(
-  target: Ref<T | undefined>,
-  element: Element | ComponentPublicInstance | null,
-) {
-  target.value = element instanceof Element ? (element as T) : undefined
-}
-
 export function useWaveformChartController(
   inputProps: ResolvedWaveformChartProps,
   emit: WaveformChartEmit,
@@ -186,7 +178,17 @@ export function useWaveformChartController(
     renderingOptions,
     linePointOverrides,
   })
-
+  const animations = useWaveformAnimations({
+    props,
+    currentPage,
+    containerSize: computed(() => [observedWidth.value, observedHeight.value]),
+    layoutReady: computed(() => observedWidth.value > 0 && observedHeight.value > 0),
+    tracks: trackLayouts,
+    preparedSeries,
+    innerWidth,
+    innerHeight: presentation.innerHeight,
+    sampling,
+  })
   const paginationVisible = computed(
     () => gridOptions.value.showPagination && pageCount.value > 1 && !isCleanView.value,
   )
@@ -389,10 +391,8 @@ export function useWaveformChartController(
       height: chartHeight.value,
       titleHeight: titleAreaHeight.value,
     }),
-    version: () => [
-      props.data,
-      JSON.stringify({
-        ...chartExportOptions(props),
+    version: () =>
+      chartExportVersion(props, {
         hidden: [...hiddenSeriesIdSet.value],
         width: chartWidth.value,
         height: chartHeight.value,
@@ -404,7 +404,8 @@ export function useWaveformChartController(
         independentY: independentYDomains.value,
         boundaries: boundaries.value,
       }),
-    ],
+    prepare: animations.prepareExport,
+    release: animations.releaseExport,
     ready: sampling.ready,
   })
 
@@ -418,7 +419,11 @@ export function useWaveformChartController(
     ...annotations,
     ...viewport,
     ...hover,
-    ...commands,
+    ...animations.wrap(commands),
+    presentationTracks: animations.presentationTracks,
+    presentationAnnotations: animations.presentationAnnotations,
+    paginationOpacity: animations.paginationOpacity,
+    stabilizeAnimations: animations.stabilizeAnimations,
     ...imageExport,
     margin,
     getPageSize,
@@ -431,7 +436,7 @@ export function useWaveformChartController(
     contextMenu: annotationInteraction.contextMenu,
     editorSeriesOptions,
     clipPathId,
-    goToPage: lifecycle.goToPage,
+    goToPage: animations.wrapPagination(lifecycle.goToPage, pageCount),
     setContainer: (element: Element | ComponentPublicInstance | null) =>
       assignElement(container, element),
     setSvgElement: (element: Element | ComponentPublicInstance | null) =>
@@ -442,5 +447,4 @@ export function useWaveformChartController(
       assignElement(sharedOverlayElement, element),
   })
 }
-
 export type WaveformChartController = ReturnType<typeof useWaveformChartController>

package/src/components/core/useWaveformRenderSampling.ts

@@ -103,6 +103,7 @@ function errorPayload(
 }
 
 export function useWaveformRenderSampling(context: SamplingContext) {
+  const resultState = shallowRef<'success' | 'fallback' | 'error'>('success')
   const settledSignature = shallowRef<string>()
   const dataEpoch = shallowRef(0)
   const session = createWaveformSamplingSession()
@@ -292,10 +293,14 @@ export function useWaveformRenderSampling(context: SamplingContext) {
         requestId: ++session.requestId,
         series: batch,
       })
-      if (result.type !== 'sample-viewport-response') return
+      if (result.type !== 'sample-viewport-response') {
+        if (samplingScheduler.isCurrent(token)) resultState.value = 'error'
+        return
+      }
       response = result
     } catch (error) {
       if (!samplingScheduler.isCurrent(token)) return
+      resultState.value = 'error'
       emitErrorOnce(
         errorPayload(
           error instanceof Error ? error.message : String(error),
@@ -310,8 +315,18 @@ export function useWaveformRenderSampling(context: SamplingContext) {
       return
     }
     if (!samplingScheduler.isCurrent(token)) return
+    if (response.workerError || client.workerFailureReason) resultState.value = 'fallback'
     const sourceById = new Map(sampledTargets.map((target) => [target.series.id, target.source]))
+    if (
+      sampledTargets.some(
+        (target) =>
+          !response.results.some((result) => result.seriesId === target.series.id && result.output),
+      )
+    )
+      resultState.value = 'error'
     response.results.forEach((result) => {
+      if (result.status !== 'ok' && resultState.value !== 'error')
+        resultState.value = result.output ? 'fallback' : 'error'
       const source = sourceById.get(result.seriesId)
       const selected = source ? sourcePoints(result, source) : undefined
       if (selected && (result.status === 'ok' || result.status === 'wasm-unavailable')) {
@@ -369,6 +384,7 @@ export function useWaveformRenderSampling(context: SamplingContext) {
   const scheduleSampling = (hysteresis: boolean) => {
     settledSignature.value = undefined
     const signature = targetSignature.value
+    resultState.value = 'success'
     samplingScheduler.schedule(async (token) => {
       try {
         await runSampling(token, hysteresis)
@@ -410,6 +426,12 @@ export function useWaveformRenderSampling(context: SamplingContext) {
   onScopeDispose(() => session.dispose())
 
   return {
+    requestSignature: targetSignature,
+    state: computed(() =>
+      settledSignature.value === targetSignature.value && !session.autoModeSettleTimer
+        ? resultState.value
+        : 'pending',
+    ),
     linePointOverrides: context.linePointOverrides,
     ready: () => settledSignature.value === targetSignature.value && !session.autoModeSettleTimer,
   }

package/src/components/core/waveformChartTypes.ts

@@ -1,3 +1,4 @@
+import type { WaveformAnimationProps } from '../../animation/types'
 import type { WaveformToolbarOptions, WaveformControlState } from '../../types/controls'
 import type {
   WaveformAnnotation,
@@ -26,7 +27,7 @@ import type {
 } from '../data/types'
 import type { WaveformGridOptions } from './grid'
 
-export interface WaveformChartProps {
+export interface WaveformChartProps extends WaveformAnimationProps {
   toolbar?: boolean | WaveformToolbarOptions
   data: WaveformData
   displayMode?: WaveformDisplayMode

package/src/components/rendering/WaveformSeriesLayer.vue

@@ -7,6 +7,7 @@ import { waveformLineDasharray, waveformPointSeriesPath } from './seriesStyle'
 
 const props = defineProps<{
   track: TrackLayout
+  paginationOpacity?: number
   clipPathId: string
 }>()
 
@@ -51,11 +52,22 @@ const renderedSeriesPaths = computed<RenderedSeriesPath[]>(() =>
   >
     <g
       v-for="seriesPath in renderedSeriesPaths"
-      :key="seriesPath.series.id"
+      :key="seriesPath.presentationKey ?? seriesPath.series.id"
+      :opacity="(seriesPath.opacity ?? 1) * (paginationOpacity ?? 1)"
+      :clip-path="seriesPath.animationClip ? `url(#${seriesPath.animationClip.id})` : undefined"
       class="waveform-track__series-item waveform-chart__series"
       :data-series-id="seriesPath.series.id"
       :data-series-name="seriesPath.series.name || undefined"
     >
+      <defs v-if="seriesPath.animationClip">
+        <clipPath :id="seriesPath.animationClip.id" clipPathUnits="userSpaceOnUse">
+          <rect
+            :x="seriesPath.animationClip.x"
+            :width="seriesPath.animationClip.width"
+            :height="track.height"
+          />
+        </clipPath>
+      </defs>
       <path
         v-if="seriesPath.path"
         class="waveform-track__line waveform-chart__line"

package/src/components/rendering/WaveformTrack.vue

@@ -12,6 +12,7 @@ import WaveformTrackBackdrop from './WaveformTrackBackdrop.vue'
 
 interface Props {
   track: TrackLayout
+  paginationOpacity?: number
   clipPathId: string
   innerWidth: number
   zoomable: boolean
@@ -136,7 +137,11 @@ const frameInset = computed(() =>
       aria-hidden="true"
     />
 
-    <WaveformSeriesLayer :track="track" :clip-path-id="clipPathId" />
+    <WaveformSeriesLayer
+      :track="track"
+      :clip-path-id="clipPathId"
+      :pagination-opacity="paginationOpacity"
+    />
     <WaveformZeroLines
       :track="track"
       :clip-path-id="clipPathId"

package/src/components/rendering/WaveformTrackAxes.vue

@@ -6,10 +6,11 @@ import type { WaveformAxesOptions } from '../../types'
 import { formatXAxisLabel } from '../../utils'
 import { formatYAxisTickLabel } from '../core/layout'
 import type { DisplaySeries, TrackLayout, WaveformYAxisLayout } from '../core/types'
-import { updateMaximumTickVisibility } from './yAxisTickVisibility'
+import { scheduleMaximumTickVisibility } from './yAxisTickVisibility'
 import { sameTick } from '../core/yAxisPadding'
 import { resolveYAxisLabelBandWidth, resolveYAxisLabelFontSize } from '../core/yAxisLabelStyle'
 import { formatChannelLabel } from './channelLabel'
+import { updateAxis, updateSvgAttribute } from './updateAxis'
 
 interface Props {
   track: TrackLayout
@@ -58,77 +59,89 @@ function renderAxes() {
     if (!element) return
     const unit = props.showUnits ? axis.seriesList[0]?.unit : undefined
     const highestTick = Math.max(...axis.tickValues)
-    const yAxis = (axis.side === 'left' ? axisLeft(axis.scale) : axisRight(axis.scale))
-      .tickFormat((value) =>
-        formatYAxisTickLabel(
-          Number(value),
-          axis.scale.domain() as [number, number],
-          axis.tickValues,
-          unit,
-          axis.side,
-        ),
+    const lowestTick = Math.min(...axis.tickValues)
+    const format = (value: number) =>
+      formatYAxisTickLabel(
+        value,
+        axis.scale.domain() as [number, number],
+        axis.tickValues,
+        unit,
+        axis.side,
       )
+    const yAxis = (axis.side === 'left' ? axisLeft(axis.scale) : axisRight(axis.scale))
+      .tickFormat((value) => format(Number(value)))
       .tickSize(-4)
       .tickPadding(7)
       .tickSizeOuter(0)
       .tickValues(axis.tickValues)
 
     const selection = select(element)
-    selection.call(yAxis)
-    selection
-      .selectAll<SVGTextElement, number>('.tick text')
-      .attr('y', null)
-      .attr('dy', '0')
-      .attr('dominant-baseline', 'central')
-      .attr('data-axis-maximum-label', (value) =>
-        props.hideOverlappingMaximumLabel && sameTick(value, highestTick) ? 'true' : null,
-      )
-      .attr('data-axis-minimum-label', (value) =>
-        props.hideOverlappingMaximumLabel && sameTick(value, Math.min(...axis.tickValues))
-          ? 'true'
-          : null,
-      )
-    selection
-      .attr('data-label-domain-min', axis.scale.domain()[0])
-      .attr('data-label-domain-max', axis.scale.domain()[1])
-      .attr('data-label-unit', unit ?? null)
-    selection
-      .selectAll<SVGGElement, number>('.tick')
-      .attr('data-maximum-tick', (value) =>
+    updateAxis(element, yAxis, axis.scale, axis.tickValues, axis.side, format)
+    updateSvgAttribute(element, 'data-label-domain-min', axis.scale.domain()[0])
+    updateSvgAttribute(element, 'data-label-domain-max', axis.scale.domain()[1])
+    updateSvgAttribute(element, 'data-label-unit', unit ?? null)
+    selection.selectAll<SVGGElement, number>('.tick').each(function (value) {
+      const text = this.querySelector('text')
+      if (text) {
+        updateSvgAttribute(text, 'y', null)
+        updateSvgAttribute(text, 'dy', '0')
+        updateSvgAttribute(text, 'dominant-baseline', 'central')
+        updateSvgAttribute(
+          text,
+          'data-axis-maximum-label',
+          props.hideOverlappingMaximumLabel && sameTick(value, highestTick) ? 'true' : null,
+        )
+        updateSvgAttribute(
+          text,
+          'data-axis-minimum-label',
+          props.hideOverlappingMaximumLabel && sameTick(value, lowestTick) ? 'true' : null,
+        )
+      }
+      updateSvgAttribute(
+        this,
+        'data-maximum-tick',
         axis.maximumTick !== undefined && sameTick(value, axis.maximumTick) ? 'true' : null,
       )
-      .attr('data-minimum-tick', (value) =>
+      updateSvgAttribute(
+        this,
+        'data-minimum-tick',
         axis.minimumTick !== undefined && sameTick(value, axis.minimumTick) ? 'true' : null,
       )
-      .attr('data-tick-value', (value) => value)
-      .attr('data-tick-y', (value) => axis.scale(value))
-    selection
-      .selectAll('path.domain')
-      .attr('display', props.axes?.y?.lineVisible === false ? 'none' : null)
+      updateSvgAttribute(this, 'data-tick-value', value)
+      updateSvgAttribute(this, 'data-tick-y', axis.scale(value))
+    })
+    selection.selectAll<SVGPathElement, unknown>('path.domain').each(function () {
+      updateSvgAttribute(this, 'display', props.axes?.y?.lineVisible === false ? 'none' : null)
+    })
   })
 
   scheduleVisibility()
   if (!xAxisElement.value) return
   const selection = select(xAxisElement.value)
-  selection.call(
+  const format = (value: number) =>
+    formatXAxisLabel(
+      value,
+      props.track.xScale.domain() as [number, number],
+      props.timeUnit,
+      'tick',
+      props.axes?.x?.labelFormatter ?? props.track.xAxisLabelFormatter,
+    )
+  updateAxis(
+    xAxisElement.value,
     axisBottom(props.track.xScale)
       .tickValues(props.track.xAxisTickValues)
-      .tickFormat((value) =>
-        formatXAxisLabel(
-          Number(value),
-          props.track.xScale.domain() as [number, number],
-          props.timeUnit,
-          'tick',
-          props.axes?.x?.labelFormatter ?? props.track.xAxisLabelFormatter,
-        ),
-      )
+      .tickFormat((value) => format(Number(value)))
       .tickSize(-4)
       .tickPadding(7)
       .tickSizeOuter(0),
+    props.track.xScale,
+    props.track.xAxisTickValues,
+    'bottom',
+    format,
   )
-  selection
-    .selectAll('path.domain')
-    .attr('display', props.axes?.x?.lineVisible === false ? 'none' : null)
+  selection.selectAll<SVGPathElement, unknown>('path.domain').each(function () {
+    updateSvgAttribute(this, 'display', props.axes?.x?.lineVisible === false ? 'none' : null)
+  })
 }
 
 let disposed = false
@@ -136,7 +149,7 @@ function scheduleVisibility() {
   if (disposed) return
   const apply = () => {
     const svg = yAxisElements.value[0]?.ownerSVGElement
-    if (svg) updateMaximumTickVisibility(svg)
+    if (svg) scheduleMaximumTickVisibility(svg)
   }
   apply()
 }

package/src/components/rendering/WaveformTrackBackdrop.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ref, watchEffect } from 'vue'
+import { updateGrid } from './updateGrid'
 import type { TrackLayout } from '../core/types'
 
 interface Props {
@@ -13,7 +15,35 @@ interface Props {
   }
 }
 
-defineProps<Props>()
+const props = defineProps<Props>()
+const minorVertical = ref<SVGGElement>()
+const minorHorizontal = ref<SVGGElement>()
+const majorVertical = ref<SVGGElement>()
+const majorHorizontal = ref<SVGGElement>()
+watchEffect(
+  () => {
+    const track = props.track
+    for (const [element, direction, ticks] of [
+      [minorVertical.value, 'vertical', track.xMinorTicks],
+      [minorHorizontal.value, 'horizontal', track.yMinorTicks],
+      [majorVertical.value, 'vertical', track.xMajorTicks],
+      [majorHorizontal.value, 'horizontal', track.yMajorTicks],
+    ] as const) {
+      if (element)
+        updateGrid(
+          element,
+          track.gridLines[direction] ? ticks : [],
+          direction === 'vertical' ? track.xScale : track.yScale,
+          direction,
+          direction === 'vertical' ? track.height : (track.width ?? props.innerWidth),
+          direction === 'vertical'
+            ? track.gridLines.verticalColor
+            : track.gridLines.horizontalColor,
+        )
+    }
+  },
+  { flush: 'post' },
+)
 </script>
 
 <template>
@@ -34,58 +64,14 @@ defineProps<Props>()
     <g
       class="waveform-track__grid waveform-track__grid--minor waveform-chart__grid waveform-chart__grid--minor"
     >
-      <template v-if="track.gridLines.vertical">
-        <line
-          v-for="tick in track.xMinorTicks"
-          :key="`x-minor-${track.index}-${tick}`"
-          data-grid-direction="vertical"
-          :stroke="track.gridLines.verticalColor"
-          :x1="track.xScale(tick)"
-          :x2="track.xScale(tick)"
-          y1="0"
-          :y2="track.height"
-        />
-      </template>
-      <template v-if="track.gridLines.horizontal">
-        <line
-          v-for="tick in track.yMinorTicks"
-          :key="`y-minor-${track.index}-${tick}`"
-          data-grid-direction="horizontal"
-          :stroke="track.gridLines.horizontalColor"
-          x1="0"
-          :x2="track.width ?? innerWidth"
-          :y1="track.yScale(tick)"
-          :y2="track.yScale(tick)"
-        />
-      </template>
+      <g ref="minorVertical" />
+      <g ref="minorHorizontal" />
     </g>
     <g
       class="waveform-track__grid waveform-track__grid--major waveform-chart__grid waveform-chart__grid--major"
     >
-      <template v-if="track.gridLines.vertical">
-        <line
-          v-for="tick in track.xMajorTicks"
-          :key="`x-major-${track.index}-${tick}`"
-          data-grid-direction="vertical"
-          :stroke="track.gridLines.verticalColor"
-          :x1="track.xScale(tick)"
-          :x2="track.xScale(tick)"
-          y1="0"
-          :y2="track.height"
-        />
-      </template>
-      <template v-if="track.gridLines.horizontal">
-        <line
-          v-for="tick in track.yMajorTicks"
-          :key="`y-major-${track.index}-${tick}`"
-          data-grid-direction="horizontal"
-          :stroke="track.gridLines.horizontalColor"
-          x1="0"
-          :x2="track.width ?? innerWidth"
-          :y1="track.yScale(tick)"
-          :y2="track.yScale(tick)"
-        />
-      </template>
+      <g ref="majorVertical" />
+      <g ref="majorHorizontal" />
     </g>
   </g>
 

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
+  }
+}