waveform-analysis 0.1.43 → 0.1.47

package/src/components/interaction/useWaveformHover.ts

@@ -62,18 +62,21 @@ export function useWaveformHover(context: HoverContext) {
   const commitHover = (
     nextPoints: HoveredSeriesPoint[],
     trackIndex: number | null,
+    queryX: number,
     position: { x: number; y: number },
   ) => {
     if (isPresentationMode.value) return
     if (!hoveredPointsMatch(nextPoints)) hoverState.points = nextPoints
     hoverState.trackIndex = trackIndex
+    hoverState.queryX = queryX
     hoverState.position = position
-    emit('point-hover', hoverState.points[0]?.point ?? null)
+    emit('point-hover', hoverState.points.find((point) => point.point)?.point ?? null)
   }
   const clearHover = () => {
     cancelPendingHover()
     hoverState.points = []
     hoverState.trackIndex = null
+    hoverState.queryX = null
     emit('point-hover', null)
   }
   const handlePointerLeave = () => {
@@ -82,7 +85,7 @@ export function useWaveformHover(context: HoverContext) {
   const createHoveredSeriesPoint = (
     series: DisplaySeries,
     trackIndex: number,
-    point: WaveformPoint,
+    point: WaveformPoint | null,
   ): HoveredSeriesPoint => ({
     id: series.id,
     shotNo: series.shotNo,
@@ -106,8 +109,12 @@ export function useWaveformHover(context: HoverContext) {
     clearHover()
     return true
   }
-  const nearestPoint = (series: DisplaySeries, xValue: number): WaveformPoint | undefined =>
-    series.points[pointBisector.center(series.points, xValue)]
+  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 handleIndependentPointerMove = (event: PointerEvent, trackIndex: number) => {
     if (isPresentationMode.value) return
@@ -125,11 +132,10 @@ export function useWaveformHover(context: HoverContext) {
       const currentTrack = trackLayouts.value[trackIndex]
       if (!currentTrack || !currentTrack.hasVisibleSeries || currentTrack !== track) return
       const xValue = track.xScale.invert(Math.max(0, Math.min(innerWidth.value, pointerX)))
-      const nextPoints = track.seriesList.flatMap((series) => {
-        const point = nearestPoint(series, xValue)
-        return point ? [createHoveredSeriesPoint(series, trackIndex, point)] : []
-      })
-      commitHover(nextPoints, trackIndex, {
+      const nextPoints = track.seriesList.map((series) =>
+        createHoveredSeriesPoint(series, trackIndex, nearestPoint(series, xValue) ?? null),
+      )
+      commitHover(nextPoints, trackIndex, xValue, {
         x: resolvedChartLeftMargin.value + track.left + pointerX,
         y: titleAreaHeight.value + chartTopMargin.value + track.top + pointerY,
       })
@@ -147,7 +153,8 @@ export function useWaveformHover(context: HoverContext) {
     scheduleHover(() => {
       const resolvedTrack = resolveTrackAtPointer(pointerX, pointerY)
       const referenceTrack =
-        resolvedTrack ?? trackLayouts.value.find((track) => track.hasVisibleSeries)
+        (resolvedTrack?.hasVisibleSeries ? resolvedTrack : undefined) ??
+        trackLayouts.value.find((track) => track.hasVisibleSeries)
       if (!referenceTrack) return
       const localPointerX = Math.max(
         0,
@@ -155,12 +162,11 @@ export function useWaveformHover(context: HoverContext) {
       )
       const xValue = referenceTrack.xScale.invert(localPointerX)
       const nextPoints = trackLayouts.value.flatMap((track) =>
-        track.seriesList.flatMap((series) => {
-          const point = nearestPoint(series, xValue)
-          return point ? [createHoveredSeriesPoint(series, track.index, point)] : []
-        }),
+        track.seriesList.map((series) =>
+          createHoveredSeriesPoint(series, track.index, nearestPoint(series, xValue) ?? null),
+        ),
       )
-      commitHover(nextPoints, null, {
+      commitHover(nextPoints, null, xValue, {
         x: resolvedChartLeftMargin.value + pointerX,
         y: titleAreaHeight.value + chartTopMargin.value + pointerY,
       })

package/src/components/interaction/useWaveformViewport.ts

@@ -3,11 +3,8 @@ import { computed, nextTick, shallowRef, type ComputedRef, type Ref, type Shallo
 import { MINIMUM_SELECTION_SIZE } from '../core/constants'
 import type { DisplayTrack, TrackLayout } from '../core/types'
 import { hasFixedYDomainForTrack } from '../core/yDomain'
-import type {
-  ResolvedWaveformChartProps,
-  ViewportSelectionState,
-  WaveformChartEmit,
-} from '../core/waveformChartTypes'
+import type { ResolvedWaveformChartProps, ViewportSelectionState } from '../core/waveformChartTypes'
+import type { WaveformChartEmit } from '../core/waveformChartTypes'
 import type { AnnotationSeriesCandidate } from '../annotation'
 import { tryReleasePointerCapture } from './pointerCapture'
 import { transitionViewportInteraction } from './viewportInteractionState'
@@ -104,10 +101,12 @@ export function useWaveformViewport(context: ViewportContext) {
   }
   const currentYDomains = (): Record<string, [number, number]> =>
     Object.fromEntries(
-      trackLayouts.value.map((track) => [
-        track.series.trackId ?? track.series.id,
-        track.yScale.domain() as [number, number],
-      ]),
+      trackLayouts.value
+        .filter((track) => track.hasVisibleSeries)
+        .map((track) => [
+          track.series?.trackId ?? track.series?.id ?? track.id,
+          track.yScale.domain() as [number, number],
+        ]),
     )
   const beginViewportDrag = (event: PointerEvent, trackIndex: number, independent: boolean) => {
     if (isPresentationMode.value) return
@@ -142,8 +141,10 @@ export function useWaveformViewport(context: ViewportContext) {
   const beginSharedViewportDrag = (event: PointerEvent) => {
     if (!sharedOverlayElement.value) return
     const [x, y] = pointer(event, sharedOverlayElement.value)
+    const pointedTrack = resolveTrackAtPointer(x, y)
     const track =
-      resolveTrackAtPointer(x, y) ?? trackLayouts.value.find((item) => item.hasVisibleSeries)
+      (pointedTrack?.hasVisibleSeries ? pointedTrack : undefined) ??
+      trackLayouts.value.find((item) => item.hasVisibleSeries)
     if (track) beginViewportDrag(event, track.index, false)
   }
   const applyPan = (active: ViewportSelectionState, track: TrackLayout) => {
@@ -166,7 +167,9 @@ export function useWaveformViewport(context: ViewportContext) {
     } else {
       sharedTransform.value = transformForDomain(nextX, sourceXDomain, innerWidth.value)
     }
-    const targets = active.independent ? [track] : trackLayouts.value
+    const targets = active.independent
+      ? [track]
+      : trackLayouts.value.filter((target) => target.hasVisibleSeries)
     const nextIndependentDomains = { ...independentYDomains.value }
     const nextSharedDomains = { ...sharedYDomains.value }
     targets.forEach((target) => {
@@ -174,7 +177,7 @@ export function useWaveformViewport(context: ViewportContext) {
       if (chartTrack && hasFixedYDomainForTrack(chartTrack, props.yDomain, props.yDomains)) {
         return
       }
-      const key = target.series.trackId ?? target.series.id
+      const key = target.series?.trackId ?? target.series?.id ?? target.id
       const source = active.yDomains[key] ?? (target.yScale.domain() as [number, number])
       const boundary = chartTrack?.yDomain ?? source
       const ySpan = source[1] - source[0]
@@ -251,16 +254,18 @@ export function useWaveformViewport(context: ViewportContext) {
     } else {
       sharedTransform.value = transformForDomain(xDomain, baseXDomain, innerWidth.value)
     }
-    const targets = active.independent ? [track] : trackLayouts.value
+    const targets = active.independent
+      ? [track]
+      : trackLayouts.value.filter((target) => target.hasVisibleSeries)
     const yRanges = Object.fromEntries(
       targets.map((target) => [
-        target.series.trackId ?? target.series.id,
+        target.series?.trackId ?? target.series?.id ?? target.id,
         target.yScale.domain() as [number, number],
       ]),
     )
     emit('zoom-change', xDomain)
     if (active.independent) {
-      const yDomain = yRanges[track.series.trackId ?? track.series.id]
+      const yDomain = yRanges[track.series?.trackId ?? track.series?.id ?? track.id]
       emit('zoom-end', {
         start: xDomain[0],
         end: xDomain[1],

package/src/components/interaction/useWaveformZoom.ts

@@ -177,7 +177,7 @@ export function useWaveformZoom(context: ZoomContext) {
         end: domain[1],
         yRanges: Object.fromEntries(
           visibleTracks.map((track) => [
-            track.series.trackId ?? track.series.id,
+            track.series?.trackId ?? track.series?.id ?? track.id,
             track.yScale.domain() as [number, number],
           ]),
         ),

package/src/components/rendering/WaveformHoverLayer.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import type { HoveredSeriesPoint, TrackLayout, WaveformHoverState } from '../core/types'
+import type { TrackLayout, WaveformHoverState } from '../core/types'
 
 const props = defineProps<{
   state: WaveformHoverState
@@ -11,23 +11,17 @@ const props = defineProps<{
 }>()
 
 interface Crosshair {
-  point: HoveredSeriesPoint
   track: TrackLayout
   x: number
 }
 
 const crosshairs = computed<Crosshair[]>(() => {
-  if (!props.visible) return []
-
-  const pointByTrack = new Map<number, HoveredSeriesPoint>()
-  props.state.points.forEach((point) => {
-    if (!pointByTrack.has(point.trackIndex)) pointByTrack.set(point.trackIndex, point)
-  })
+  if (!props.visible || props.state.queryX === null) return []
 
   return props.tracks.flatMap((track) => {
-    const point = pointByTrack.get(track.index)
-    return point && !track.isEmpty && track.hasVisibleSeries
-      ? [{ point, track, x: track.xScale(point.point.x) }]
+    const trackIsActive = props.state.trackIndex === null || props.state.trackIndex === track.index
+    return trackIsActive && !track.isEmpty && track.hasVisibleSeries
+      ? [{ track, x: track.xScale(props.state.queryX!) }]
       : []
   })
 })

package/src/components/rendering/WaveformTrack.vue

@@ -67,6 +67,7 @@ const resolvedFrameStyle = computed(() => {
     class="waveform-track waveform-chart__track"
     :class="{ 'waveform-track--empty waveform-chart__track--empty': track.isEmpty }"
     :data-track-index="track.index"
+    :data-track-id="track.id"
     :data-track-empty="track.isEmpty || undefined"
     :data-track-left="track.left"
     :data-track-width="track.width"

package/src/components/rendering/WaveformTrackAxes.vue

@@ -5,6 +5,7 @@ import { nextTick, onMounted, ref, watch } from 'vue'
 import type { WaveformAxesOptions } from '../../types'
 import { formatScientificAxisLabel, formatXAxisLabel } from '../../utils'
 import type { DisplaySeries, TrackLayout, WaveformYAxisLayout } from '../core/types'
+import { Y_AXIS_LABEL_BAND_WIDTH } from '../core/yAxisConstants'
 
 interface Props {
   track: TrackLayout
@@ -163,26 +164,27 @@ watch(
       track.hasVisibleSeries &&
       track.seriesList.length === 1 &&
       track.showYAxisLabel &&
+      track.series &&
       resolveYAxisLabel(track.series) &&
       shouldShowYAxisLabel(track.height, track.index)
     "
   >
     <rect
       class="waveform-track__y-axis-label-bg waveform-chart__y-axis-label-bg"
-      :x="track.yAxisLabelX - 12"
+      :x="track.yAxisLabelX - Y_AXIS_LABEL_BAND_WIDTH / 2"
       :y="track.height / 2 - 40"
-      width="24"
+      :width="Y_AXIS_LABEL_BAND_WIDTH"
       height="80"
       rx="2"
     />
     <text
       class="waveform-track__y-axis-label waveform-chart__y-axis-label"
-      :fill="track.series.color"
+      :fill="track.series?.color"
       :transform="`translate(${track.yAxisLabelX}, ${track.height / 2}) rotate(-90)`"
       text-anchor="middle"
       dominant-baseline="central"
     >
-      {{ resolveYAxisLabel(track.series) }}
+      {{ track.series ? resolveYAxisLabel(track.series) : '' }}
     </text>
   </g>
 
@@ -194,9 +196,9 @@ watch(
   >
     <rect
       class="waveform-track__y-axis-label-bg waveform-chart__y-axis-label-bg"
-      :x="axis.labelX - 12"
+      :x="axis.labelX - Y_AXIS_LABEL_BAND_WIDTH / 2"
       :y="track.height / 2 - 40"
-      width="24"
+      :width="Y_AXIS_LABEL_BAND_WIDTH"
       height="80"
       rx="2"
     />

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

@@ -170,7 +170,7 @@ describe('WaveformChart', () => {
     )
     expect(labelX).toBeLessThan(-46)
     expect(Number(wrapper.get('.waveform-chart__y-axis-label-bg').attributes('x'))).toBe(
-      labelX - 12,
+      labelX - 6,
     )
     expect(yAxisLabels.every((label) => !label.text().includes('(T)'))).toBe(true)
     expect(wrapper.findAll('.waveform-chart__track-label')).toHaveLength(0)

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

@@ -22,6 +22,16 @@ describe('WaveformChart', () => {
 
     expect(wrapper.findAll('.waveform-chart__grid--major line').length).toBeGreaterThan(0)
     expect(wrapper.findAll('.waveform-chart__grid--minor line').length).toBeGreaterThan(0)
+    expect(
+      wrapper.findAll('.waveform-chart__grid--major [data-grid-direction="horizontal"]'),
+    ).toHaveLength(5)
+    expect(
+      wrapper.findAll('.waveform-chart__grid--minor [data-grid-direction="horizontal"]'),
+    ).toHaveLength(4)
+    expect(
+      wrapper.findAll('.waveform-chart__grid--minor [data-grid-direction="vertical"]'),
+    ).not.toHaveLength(0)
+    expect(getComputedStyle(wrapper.element).borderTopWidth).toBe('1.2px')
     expect(wrapper.find('.waveform-chart__plot-frame').exists()).toBe(true)
     expect(wrapper.get('.waveform-chart__plot-frame').attributes()).toMatchObject({
       fill: 'none',

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

@@ -0,0 +1,67 @@
+import { flushPromises } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+import { flushAnimationFrames } from '../../test/setup'
+import { mountSizedChart } from '../../test/waveformChart'
+
+describe('WaveformChart incomplete data hover', () => {
+  it('keeps the shared crosshair at the query time and marks out-of-range series unavailable', async () => {
+    const wrapper = await mountSizedChart(
+      {
+        kind: 'series',
+        series: [
+          {
+            name: '完整数据',
+            data: {
+              kind: 'points',
+              points: [
+                { x: -1, y: 1 },
+                { x: -0.5, y: 2 },
+                { x: 1, y: 3 },
+              ],
+            },
+          },
+          {
+            name: '从零开始',
+            data: {
+              kind: 'points',
+              points: [
+                { x: 0, y: 10 },
+                { x: 1, y: 20 },
+              ],
+            },
+          },
+        ],
+      },
+      { displayMode: 'separated' },
+    )
+    const overlay = wrapper.get('.waveform-chart__overlay--shared')
+    const overlayWidth = Number(overlay.attributes('width'))
+    Object.defineProperty(overlay.element, 'getBoundingClientRect', {
+      value: () => ({ left: 0, top: 0, width: overlayWidth, height: 290 }),
+    })
+
+    overlay.element.dispatchEvent(
+      new MouseEvent('pointermove', {
+        clientX: overlayWidth / 4,
+        clientY: 120,
+        bubbles: true,
+      }),
+    )
+    flushAnimationFrames()
+    await flushPromises()
+
+    const crosshairPositions = wrapper
+      .findAll('.waveform-chart__crosshair line')
+      .map((line) => Number(line.attributes('x1')))
+    expect(crosshairPositions).toHaveLength(2)
+    expect(crosshairPositions[0]).toBeCloseTo(overlayWidth / 4)
+    expect(crosshairPositions[1]).toBeCloseTo(overlayWidth / 4)
+    const tooltipRows = wrapper.findAll('.waveform-chart__tooltip-series')
+    expect(tooltipRows).toHaveLength(2)
+    expect(tooltipRows[0].text()).toContain('(x:-500 y:2)')
+    expect(tooltipRows[1].text()).toContain('无数据')
+    expect(tooltipRows[1].text()).not.toContain('x:')
+    expect(wrapper.emitted('point-hover')?.at(-1)).toEqual([{ x: -0.5, y: 2 }])
+  })
+})

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

@@ -53,10 +53,10 @@ describe('WaveformChart', () => {
       tracks[0].get('.waveform-chart__y-axis-label-bg').attributes('x'),
     )
 
-    expect(labelX).toBe(-74)
-    expect(labelBackgroundX).toBe(labelX - 12)
-    expect(Number(wrapper.attributes('data-chart-left-margin'))).toBe(90)
-    expect(secondLeft - firstWidth).toBeGreaterThanOrEqual(90)
+    expect(labelX).toBe(-62)
+    expect(labelBackgroundX).toBe(labelX - 6)
+    expect(Number(wrapper.attributes('data-chart-left-margin'))).toBe(80)
+    expect(secondLeft - firstWidth).toBeGreaterThanOrEqual(72)
   })
 
   it('keeps a tick-only gutter when channel labels are empty', async () => {
@@ -82,7 +82,7 @@ describe('WaveformChart', () => {
     const secondLeft = Number(tracks[1].attributes('data-track-left'))
 
     expect(wrapper.findAll('.waveform-chart__y-axis-label')).toHaveLength(0)
-    expect(Number(wrapper.attributes('data-chart-left-margin'))).toBe(64)
+    expect(Number(wrapper.attributes('data-chart-left-margin'))).toBe(80)
     expect(secondLeft - firstWidth).toBeGreaterThanOrEqual(60)
   })
 

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

@@ -343,7 +343,7 @@ describe('WaveformChart', () => {
       const secondLeft = Number(tracks[1].attributes('data-track-left'))
       const labelX = Number(tracks[1].attributes('data-y-axis-label-x'))
 
-      expect(secondLeft - (firstLeft + firstWidth)).toBeGreaterThanOrEqual(Math.abs(labelX) + 16)
+      expect(secondLeft - (firstLeft + firstWidth)).toBeGreaterThanOrEqual(Math.abs(labelX) + 6)
       expect(tracks[1].find('.waveform-chart__y-axis-label-bg').exists()).toBe(true)
     }
   })

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

@@ -144,6 +144,55 @@ describe('WaveformChart', () => {
     expect(wrapper.get('.ant-pagination-next').classes()).toContain('ant-pagination-disabled')
   })
 
+  it('keeps ordered empty tracks in their page slots after channels are merged', async () => {
+    const wrapper = await mountSizedChart(
+      {
+        kind: 'series',
+        series: ['frame-1', 'frame-1', 'frame-3', 'frame-4', 'frame-5', 'frame-6'].map(
+          (trackId, index) => ({
+            id: `channel-${index + 1}`,
+            trackId,
+            name: `channel-${index + 1}`,
+            data: {
+              kind: 'points' as const,
+              points: [
+                { x: 0, y: index },
+                { x: 1, y: index + 1 },
+              ],
+            },
+          }),
+        ),
+      },
+      {
+        grid: {
+          rowCount: 2,
+          columnCount: 1,
+          trackOrder: ['frame-1', 'frame-2', 'frame-3', 'frame-4', 'frame-5', 'frame-6'],
+        },
+      },
+    )
+    const trackIds = () =>
+      wrapper.findAll('.waveform-chart__track').map((track) => track.attributes('data-track-id'))
+    const lineIds = () =>
+      wrapper.findAll('.waveform-chart__line').map((line) => line.attributes('data-series-id'))
+    const nextButton = () => wrapper.get('.ant-pagination-next button')
+
+    expect(trackIds()).toEqual(['frame-1', 'frame-2'])
+    expect(wrapper.findAll('.waveform-chart__track--empty')).toHaveLength(1)
+    expect(lineIds()).toEqual(['channel-1', 'channel-2'])
+    expect(wrapper.findAll('.waveform-chart__legend')).toHaveLength(1)
+
+    await nextButton().trigger('click')
+    expect(trackIds()).toEqual(['frame-3', 'frame-4'])
+    expect(lineIds()).toEqual(['channel-3', 'channel-4'])
+    expect(wrapper.emitted('page-change')?.at(-1)).toEqual([2, 3])
+
+    await nextButton().trigger('click')
+    expect(trackIds()).toEqual(['frame-5', 'frame-6'])
+    expect(lineIds()).toEqual(['channel-5', 'channel-6'])
+    expect(wrapper.emitted('page-change')?.at(-1)).toEqual([3, 3])
+  })
+
   it('overlays series with the same track ID without changing the next frame', async () => {
     const wrapper = await mountSizedChart(
       {
@@ -346,6 +395,6 @@ describe('WaveformChart', () => {
       'waveform-legend__panel--horizontal',
     )
 
-    expect(wrapper.attributes('data-chart-left-margin')).toBe('64')
+    expect(wrapper.attributes('data-chart-left-margin')).toBe('80')
   })
 })

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

@@ -0,0 +1,131 @@
+import { flushPromises } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+import { flushAnimationFrames } from '../../test/setup'
+import { mountSizedChart } from '../../test/waveformChart'
+
+describe('WaveformChart track order', () => {
+  it('keeps a merged source slot empty without adding legend or tooltip data', async () => {
+    const wrapper = await mountSizedChart(
+      {
+        kind: 'series',
+        series: [
+          {
+            id: 'frame-1-a',
+            trackId: 'frame-1',
+            name: '合并前通道',
+            data: {
+              kind: 'points',
+              points: [
+                { x: 0, y: 1 },
+                { x: 1, y: 2 },
+              ],
+            },
+          },
+          {
+            id: 'frame-1-b',
+            trackId: 'frame-1',
+            name: '合并后通道',
+            data: {
+              kind: 'points',
+              points: [
+                { x: 0, y: 3 },
+                { x: 1, y: 4 },
+              ],
+            },
+          },
+          {
+            id: 'frame-3',
+            trackId: 'frame-3',
+            name: '后续通道',
+            data: {
+              kind: 'points',
+              points: [
+                { x: 0, y: 5 },
+                { x: 1, y: 6 },
+              ],
+            },
+          },
+        ],
+      },
+      {
+        displayMode: 'separated',
+        grid: { rowCount: 3, trackOrder: ['frame-1', 'frame-2', 'frame-3'] },
+      },
+    )
+    const trackIds = () =>
+      wrapper.findAll('.waveform-chart__track').map((track) => track.attributes('data-track-id'))
+
+    expect(trackIds()).toEqual(['frame-1', 'frame-2', 'frame-3'])
+    expect(wrapper.findAll('.waveform-chart__track--empty')).toHaveLength(1)
+    expect(
+      wrapper.findAll('.waveform-chart__line').map((line) => line.attributes('data-series-id')),
+    ).toEqual(['frame-1-a', 'frame-1-b', 'frame-3'])
+    expect(wrapper.findAll('.waveform-chart__legend')).toHaveLength(1)
+
+    const overlay = wrapper.get('.waveform-chart__overlay--shared')
+    Object.defineProperty(overlay.element, 'getBoundingClientRect', {
+      value: () => ({ left: 0, top: 0, width: 712, height: 290 }),
+    })
+    overlay.element.dispatchEvent(
+      new MouseEvent('pointermove', { clientX: 356, clientY: 150, bubbles: true }),
+    )
+    flushAnimationFrames()
+    await flushPromises()
+
+    expect(wrapper.findAll('.waveform-chart__tooltip-series')).toHaveLength(3)
+    expect(wrapper.get('.waveform-chart__tooltip').text()).not.toContain('frame-2')
+    expect(wrapper.findAll('.waveform-chart__crosshair line')).toHaveLength(2)
+  })
+
+  it('appends data tracks absent from trackOrder in input order', async () => {
+    const wrapper = await mountSizedChart(
+      {
+        kind: 'series',
+        series: [
+          {
+            id: 'later-a',
+            trackId: 'later-a',
+            name: 'later-a',
+            data: {
+              kind: 'points',
+              points: [
+                { x: 0, y: 1 },
+                { x: 1, y: 2 },
+              ],
+            },
+          },
+          {
+            id: 'frame-1',
+            trackId: 'frame-1',
+            name: 'frame-1',
+            data: {
+              kind: 'points',
+              points: [
+                { x: 0, y: 3 },
+                { x: 1, y: 4 },
+              ],
+            },
+          },
+          {
+            id: 'later-b',
+            trackId: 'later-b',
+            name: 'later-b',
+            data: {
+              kind: 'points',
+              points: [
+                { x: 0, y: 5 },
+                { x: 1, y: 6 },
+              ],
+            },
+          },
+        ],
+      },
+      { grid: { rowCount: 2, columnCount: 2, trackOrder: ['frame-2', 'frame-1'] } },
+    )
+
+    expect(
+      wrapper.findAll('.waveform-chart__track').map((track) => track.attributes('data-track-id')),
+    ).toEqual(['frame-2', 'frame-1', 'later-a', 'later-b'])
+  })
+})

package/src/data/simulatedWaveforms.test.ts

@@ -21,8 +21,13 @@ describe('simulated waveform data', () => {
     first.series.forEach((series) => {
       expect(series.data.kind).toBe('points')
       if (series.data.kind !== 'points') return
-      expect(series.data.points).toHaveLength(1_000)
-      expect(series.data.points[0]?.x).toBe(-5)
+      if (series.id === 'simulated-step') {
+        expect(series.data.points).toHaveLength(500)
+        expect(series.data.points.every((point) => point.x >= 0)).toBe(true)
+      } else {
+        expect(series.data.points).toHaveLength(1_000)
+        expect(series.data.points[0]?.x).toBe(-5)
+      }
       expect(series.data.points.at(-1)?.x).toBe(5)
       series.data.points.forEach((point) => {
         expect(Number.isFinite(point.x)).toBe(true)

package/src/data/simulatedWaveforms.ts

@@ -17,6 +17,7 @@ interface SimulatedSeriesDefinition extends Pick<
 > {
   signal: SignalGenerator
   errors?: ErrorGenerator
+  minimumX?: number
 }
 
 function createSeededNoise(seed: number) {
@@ -100,6 +101,7 @@ const seriesDefinitions: SimulatedSeriesDefinition[] = [
     unit: 'V',
     lineType: 'linear',
     pointType: 'none',
+    minimumX: 0,
     signal: (time) => (time < 0 ? 0 : 1 - Math.exp(-time * 2.4)),
   },
   {
@@ -128,12 +130,15 @@ export function createSimulatedWaveformData(): WaveformData {
   const noise = createSeededNoise(0x5eed1234)
   return {
     kind: 'series',
-    series: seriesDefinitions.map(({ signal, errors, ...series }) => ({
-      ...series,
-      data: {
-        kind: 'points',
-        points: createPoints(signal, noise, errors),
-      },
-    })),
+    series: seriesDefinitions.map(({ signal, errors, minimumX, ...series }) => {
+      const points = createPoints(signal, noise, errors)
+      return {
+        ...series,
+        data: {
+          kind: 'points' as const,
+          points: minimumX === undefined ? points : points.filter((point) => point.x >= minimumX),
+        },
+      }
+    }),
   }
 }