waveform-analysis 0.1.46 → 0.1.47

package/dist/types/components/core/grid.d.ts

@@ -7,6 +7,8 @@ export interface WaveformGridOptions {
     columnCount?: number;
     showPagination?: boolean;
     fillIncompleteLastRow?: boolean;
+    /** Stable grid slots. Empty IDs remain as empty chart frames and keep their page position. */
+    trackOrder?: string[];
     trackLines?: WaveformGridTrackLines;
 }
 export interface WaveformGridLineOptions {
@@ -29,6 +31,7 @@ export interface NormalizedWaveformGridOptions {
     columnCount: number;
     showPagination: boolean;
     fillIncompleteLastRow: boolean;
+    trackOrder?: string[];
     trackLines: Record<string, NormalizedWaveformGridLineOptions>;
 }
 export interface GridCellGeometry {

package/dist/types/components/core/types.d.ts

@@ -76,7 +76,8 @@ export interface TrackLayout {
     /** Stable track key derived from trackId, or from the series id when trackId is omitted. */
     id: string;
     index: number;
-    series: DisplaySeries;
+    /** Primary visible series, if this grid slot has waveform data. */
+    series: DisplaySeries | null;
     /** Visible series used by rendering and interaction code. */
     seriesList: DisplaySeries[];
     /** Complete series list used by the legend. */

package/dist/types/components/interaction/useWaveformViewport.d.ts

@@ -1,7 +1,8 @@
 import { type ZoomTransform } from 'd3';
 import { type ComputedRef, type Ref, type ShallowRef } from 'vue';
 import type { DisplayTrack, TrackLayout } from '../core/types';
-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';
 interface ViewportContext {
     props: ResolvedWaveformChartProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "waveform-analysis",
-  "version": "0.1.46",
+  "version": "0.1.47",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/types/index.d.ts",

package/src/components/WaveformChartView.vue

@@ -222,7 +222,7 @@ function handleChartPointerLeave() {
         <!-- 轨道渲染 -->
         <WaveformTrack
           v-for="track in trackLayouts"
-          :key="`${track.index}-${track.series.name}`"
+          :key="`${track.index}-${track.id}`"
           :track="track"
           :clip-path-id="clipPathId"
           :inner-width="innerWidth"
@@ -277,7 +277,7 @@ function handleChartPointerLeave() {
         <g v-if="!isCleanView" class="waveform-chart__legend-layer">
           <g
             v-for="track in trackLayouts"
-            :key="`legend-${track.index}-${track.series.name}`"
+            :key="`legend-${track.index}-${track.id}`"
             class="waveform-chart__legend-track"
             :data-legend-track-index="track.index"
             :data-legend-track-id="track.id"

package/src/components/core/grid.test.ts

@@ -16,6 +16,7 @@ describe('waveform grid helpers', () => {
       columnCount: 1,
       showPagination: true,
       fillIncompleteLastRow: false,
+      trackOrder: [],
       trackLines: {},
     })
     expect(normalizeGridOptions({ rowCount: 0, columnCount: 99 })).toEqual({
@@ -23,10 +24,17 @@ describe('waveform grid helpers', () => {
       columnCount: 10,
       showPagination: true,
       fillIncompleteLastRow: false,
+      trackOrder: [],
       trackLines: {},
     })
   })
 
+  it('normalizes track order by trimming, dropping blanks, and removing duplicates', () => {
+    expect(
+      normalizeGridOptions({ trackOrder: [' voltage ', '', 'current', 'voltage', '  '] }),
+    ).toMatchObject({ trackOrder: ['voltage', 'current'] })
+  })
+
   it('normalizes per-track grid line visibility with visible defaults', () => {
     expect(
       normalizeGridOptions({
@@ -170,7 +178,11 @@ describe('waveform grid helpers', () => {
 
   it('keeps full pages and the disabled option byte-for-byte compatible', () => {
     const base = normalizeGridOptions({ rowCount: 2, columnCount: 2 })
-    const filled = normalizeGridOptions({ rowCount: 2, columnCount: 2, fillIncompleteLastRow: true })
+    const filled = normalizeGridOptions({
+      rowCount: 2,
+      columnCount: 2,
+      fillIncompleteLastRow: true,
+    })
     const fullSlots = [true, true, true, true]
     expect(resolveGridCellGeometry(400, 300, filled, 'independent', fullSlots)).toEqual(
       resolveGridCellGeometry(400, 300, base, 'independent', fullSlots),

package/src/components/core/grid.ts

@@ -9,6 +9,8 @@ export interface WaveformGridOptions {
   columnCount?: number
   showPagination?: boolean
   fillIncompleteLastRow?: boolean
+  /** Stable grid slots. Empty IDs remain as empty chart frames and keep their page position. */
+  trackOrder?: string[]
   trackLines?: WaveformGridTrackLines
 }
 
@@ -35,6 +37,7 @@ export interface NormalizedWaveformGridOptions {
   columnCount: number
   showPagination: boolean
   fillIncompleteLastRow: boolean
+  trackOrder?: string[]
   trackLines: Record<string, NormalizedWaveformGridLineOptions>
 }
 
@@ -59,6 +62,15 @@ const normalizeCount = (value: unknown, fallback: number) => {
   return Math.min(GRID_MAX_COUNT, Math.max(GRID_MIN_COUNT, Math.floor(numeric)))
 }
 
+const normalizeTrackOrder = (trackOrder: unknown): string[] => {
+  if (!Array.isArray(trackOrder)) return []
+  const normalized = trackOrder
+    .filter((trackId): trackId is string => typeof trackId === 'string')
+    .map((trackId) => trackId.trim())
+    .filter(Boolean)
+  return Array.from(new Set(normalized))
+}
+
 export function normalizeGridOptions(options?: WaveformGridOptions): NormalizedWaveformGridOptions {
   const trackLines = Object.fromEntries(
     Object.entries(options?.trackLines ?? {}).map(([trackId, lines]) => [
@@ -82,6 +94,7 @@ export function normalizeGridOptions(options?: WaveformGridOptions): NormalizedW
     columnCount: normalizeCount(options?.columnCount, 1),
     showPagination: options?.showPagination ?? true,
     fillIncompleteLastRow: options?.fillIncompleteLastRow ?? false,
+    trackOrder: normalizeTrackOrder(options?.trackOrder),
     trackLines,
   }
 }
@@ -148,10 +161,7 @@ export function resolveGridCellGeometry(
   }
   const totalVerticalGap = Math.max(0, rowCount - 1) * defaultGap
   const totalAxisBand = axisRows.size * X_AXIS_BAND
-  const plotHeight = Math.max(
-    1,
-    (innerHeight - totalVerticalGap - totalAxisBand) / rowCount,
-  )
+  const plotHeight = Math.max(1, (innerHeight - totalVerticalGap - totalAxisBand) / rowCount)
 
   return Array.from({ length: filledLastRow ? seriesCount : pageSize }, (_, slotIndex) => {
     const row = Math.floor(slotIndex / options.columnCount)

package/src/components/core/trackLayoutBuilder.ts

@@ -26,7 +26,7 @@ import {
   type NormalizedWaveformGridOptions,
 } from './grid'
 import { axisTextMetrics, resolveYAxisSeriesGroups, resolveYAxisTickCount } from './layout'
-import type { DisplaySeries, DisplayTrack, TrackLayout, WaveformYAxisLayout } from './types'
+import type { DisplayTrack, TrackLayout, WaveformYAxisLayout } from './types'
 import { applyXDomainStrategy } from './xDomain'
 import {
   Y_AXIS_LABEL_BAND_WIDTH,
@@ -81,33 +81,24 @@ export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayou
   const bottomCells = getBottomRowCellIndexes(visibleCells, options.grid.columnCount)
 
   return visibleCells.flatMap((cell, index) => {
-    const isEmpty = !cell.series
-    if (isEmpty && (options.displayMode !== 'compact' || !options.showCompactEmptyTracks)) return []
-    const emptySeries: DisplaySeries = {
+    const isEmpty = !cell.series || cell.series.series.length === 0
+    if (!cell.series && (options.displayMode !== 'compact' || !options.showCompactEmptyTracks))
+      return []
+    const displayTrack: DisplayTrack = cell.series ?? {
       id: `empty-grid-slot-${cell.slotIndex}`,
-      name: '',
-      color: 'transparent',
-      lineType: 'linear',
-      lineStyle: 'solid',
-      pointType: 'none',
-      errorBar: { visible: false, width: 1.5, capWidth: 8 },
-      points: [],
+      series: [],
+      visibleSeries: [],
       xDomain: [0, 1],
       yDomain: [0, 1],
-      hasErrorPoints: false,
-    }
-    const displayTrack: DisplayTrack = cell.series ?? {
-      id: emptySeries.id,
-      series: [emptySeries],
-      visibleSeries: [emptySeries],
-      xDomain: emptySeries.xDomain,
-      yDomain: emptySeries.yDomain,
     }
     const hasVisibleSeries = !isEmpty && displayTrack.visibleSeries.length > 0
-    const series = displayTrack.visibleSeries[0] ?? displayTrack.series[0] ?? emptySeries
+    const series = displayTrack.visibleSeries[0] ?? displayTrack.series[0] ?? null
     const baseXScale =
       options.displayMode === 'independent'
-        ? scaleLinear(resolveIndependentXDomain(displayTrack, series.id, options), [0, cell.width])
+        ? scaleLinear(
+            resolveIndependentXDomain(displayTrack, series?.id ?? displayTrack.id, options),
+            [0, cell.width],
+          )
         : scaleLinear(options.sharedZoomDomain, [0, cell.width])
     const transform =
       options.displayMode === 'independent'

package/src/components/core/types.ts

@@ -86,7 +86,8 @@ export interface TrackLayout {
   /** Stable track key derived from trackId, or from the series id when trackId is omitted. */
   id: string
   index: number
-  series: DisplaySeries
+  /** Primary visible series, if this grid slot has waveform data. */
+  series: DisplaySeries | null
   /** Visible series used by rendering and interaction code. */
   seriesList: DisplaySeries[]
   /** Complete series list used by the legend. */

package/src/components/core/useWaveformLayout.ts

@@ -75,6 +75,7 @@ export function useWaveformLayout(context: LayoutContext) {
         (index === 0 ? props.lineColor : channelColors[index % channelColors.length]),
     })),
   )
+  const gridOptions = computed(() => normalizeGridOptions(props.grid))
   const chartTracks = computed<DisplayTrack[]>(() => {
     const groupedSeries = new Map<string, DisplaySeries[]>()
     chartSeries.value.forEach((series) => {
@@ -83,7 +84,13 @@ export function useWaveformLayout(context: LayoutContext) {
       if (trackSeries) trackSeries.push(series)
       else groupedSeries.set(trackId, [series])
     })
-    return Array.from(groupedSeries, ([id, series]) => {
+    const trackOrder = gridOptions.value.trackOrder ?? []
+    const orderedTrackIds = [
+      ...trackOrder,
+      ...Array.from(groupedSeries.keys()).filter((trackId) => !trackOrder.includes(trackId)),
+    ]
+    return orderedTrackIds.map((id) => {
+      const series = groupedSeries.get(id) ?? []
       const visibleSeries = series.filter((item) => !hiddenSeriesIdSet.value.has(item.id))
       const xDomainValues: number[] = []
       const yDomainValues: number[] = []
@@ -95,12 +102,11 @@ export function useWaveformLayout(context: LayoutContext) {
         id,
         series,
         visibleSeries,
-        xDomain: paddedDomain(xDomainValues),
-        yDomain: paddedDomain(yDomainValues),
+        xDomain: xDomainValues.length ? paddedDomain(xDomainValues) : [0, 1],
+        yDomain: yDomainValues.length ? paddedDomain(yDomainValues) : [0, 1],
       }
     })
   })
-  const gridOptions = computed(() => normalizeGridOptions(props.grid))
   const renderingOptions = computed(() => resolveWaveformRenderingOptions(props.rendering))
   const pageCount = computed(() => getPageCount(chartTracks.value.length, gridOptions.value))
   const pagedTracks = computed(() =>
@@ -245,8 +251,8 @@ export function useWaveformLayout(context: LayoutContext) {
   })
   const resolveInitialTrackDomain = (track: TrackLayout): [number, number] => {
     const configuredDomain =
-      props.initialXDomains?.[track.series.trackId ?? track.series.id] ??
-      props.initialXDomains?.[track.series.id] ??
+      props.initialXDomains?.[track.series?.trackId ?? track.series?.id ?? track.id] ??
+      (track.series ? props.initialXDomains?.[track.series.id] : undefined) ??
       props.initialXDomain
     if (
       configuredDomain &&

package/src/components/interaction/useWaveformHover.ts

@@ -153,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,

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/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

@@ -164,6 +164,7 @@ watch(
       track.hasVisibleSeries &&
       track.seriesList.length === 1 &&
       track.showYAxisLabel &&
+      track.series &&
       resolveYAxisLabel(track.series) &&
       shouldShowYAxisLabel(track.height, track.index)
     "
@@ -178,12 +179,12 @@ watch(
     />
     <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>
 

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(
       {

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'])
+  })
+})