waveform-analysis 0.1.41 → 0.1.43

package/src/components/core/useWaveformChartLifecycle.ts

@@ -11,6 +11,7 @@ import {
 
 import type { AnnotationSeriesCandidate } from '../annotation'
 import type { useWaveformAnnotationInteraction } from '../annotation'
+import type { NormalizedWaveformGridOptions } from './grid'
 import type { DisplaySeries, DisplayTrack, TrackLayout } from './types'
 import type { ResolvedWaveformChartProps, WaveformChartEmit } from './waveformChartTypes'
 import { constrainZoomDomain, transformForDomain } from '../interaction/zoomConstraints'
@@ -33,7 +34,7 @@ interface LifecycleContext {
   currentPage: Ref<number>
   pageCount: ComputedRef<number>
   pagedTracks: ComputedRef<Array<DisplayTrack | undefined>>
-  gridOptions: ComputedRef<{ rowCount: number; columnCount: number }>
+  gridOptions: ComputedRef<NormalizedWaveformGridOptions>
   chartSeries: ComputedRef<DisplaySeries[]>
   chartTracks: ComputedRef<DisplayTrack[]>
   trackLayouts: ComputedRef<TrackLayout[]>
@@ -220,6 +221,7 @@ export function useWaveformChartLifecycle(context: LifecycleContext) {
       currentPage,
       () => gridOptions.value.rowCount,
       () => gridOptions.value.columnCount,
+      () => gridOptions.value.fillIncompleteLastRow,
       activeInteractionMode,
     ],
     async () => {
@@ -239,20 +241,28 @@ export function useWaveformChartLifecycle(context: LifecycleContext) {
     },
   )
 
-  watch([pageCount, () => props.grid?.rowCount, () => props.grid?.columnCount], () => {
-    const previousPage = currentPage.value
-    currentPage.value =
-      currentPage.value > pageCount.value
-        ? pageCount.value
-        : currentPage.value !== 1
-          ? 1
-          : currentPage.value
-    if (previousPage !== currentPage.value) {
-      emit('page-change', currentPage.value, pageCount.value)
-    }
-    clearHover()
-    void nextTick(configureZoom)
-  })
+  watch(
+    [
+      pageCount,
+      () => props.grid?.rowCount,
+      () => props.grid?.columnCount,
+      () => props.grid?.fillIncompleteLastRow,
+    ],
+    () => {
+      const previousPage = currentPage.value
+      currentPage.value =
+        currentPage.value > pageCount.value
+          ? pageCount.value
+          : currentPage.value !== 1
+            ? 1
+            : currentPage.value
+      if (previousPage !== currentPage.value) {
+        emit('page-change', currentPage.value, pageCount.value)
+      }
+      clearHover()
+      void nextTick(configureZoom)
+    },
+  )
 
   watch(activeInteractionMode, () => {
     editorSeriesOptions.value = []

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

@@ -72,6 +72,49 @@ describe('WaveformChart', () => {
     expect(endTicks[3]).toHaveLength(0)
   })
 
+  it('removes the later compact row top tick when the Y-axis end has a floating-point tail', async () => {
+    const yDomain: [number, number] = [-1, 0.2]
+    const calculatedAxisEnd =
+      yDomain[0] + ((yDomain[1] - yDomain[0]) * 4) / 4
+    expect(calculatedAxisEnd).not.toBe(yDomain[1])
+
+    const wrapper = await mountSizedChart(
+      {
+        kind: 'series',
+        series: [
+          {
+            name: 'top',
+            data: { kind: 'points', points: [{ x: 0, y: -0.8 }, { x: 1, y: 0.1 }] },
+          },
+          {
+            name: 'bottom',
+            data: { kind: 'points', points: [{ x: 0, y: -0.7 }, { x: 1, y: 0 }] },
+          },
+        ],
+      },
+      { displayMode: 'compact', grid: { rowCount: 2, columnCount: 1 }, yDomain },
+    )
+
+    const [topTrack, bottomTrack] = wrapper.findAll('.waveform-chart__track')
+    const ticksAt = (track: typeof topTrack, position: number) =>
+      track.findAll('.waveform-chart__axis--y .tick').filter((tick) => {
+        const match = tick.attributes('transform')?.match(/translate\(0,\s*([\d.]+)\)/)
+        return match ? Math.abs(Number(match[1]) - position) <= 1 : false
+      })
+    const topTrackHeight = Number(topTrack.attributes('data-track-height'))
+
+    expect(ticksAt(topTrack, 0)).toHaveLength(1)
+    expect(ticksAt(topTrack, 0)[0].text()).toBe('0.2')
+    expect(ticksAt(bottomTrack, 0)).toHaveLength(0)
+    expect(Number(bottomTrack.attributes('data-track-top'))).toBeCloseTo(
+      Number(topTrack.attributes('data-track-top')) + topTrackHeight,
+      6,
+    )
+
+    const boundaryLabels = [...ticksAt(topTrack, topTrackHeight), ...ticksAt(bottomTrack, 0)]
+    expect(boundaryLabels).toHaveLength(1)
+  })
+
   it('prefixes one shared exponent to the largest visible tick on every compact Y axis', async () => {
     const wrapper = await mountSizedChart(
       {

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

@@ -0,0 +1,95 @@
+import { flushPromises } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+import { gridSeries, mountSizedChart } from '../../test/waveformChart'
+
+function geometry(track: { attributes: (name: string) => string | undefined }) {
+  return {
+    left: Number(track.attributes('data-track-left')),
+    top: Number(track.attributes('data-track-top')),
+    width: Number(track.attributes('data-track-width')),
+    height: Number(track.attributes('data-track-height')),
+  }
+}
+
+describe('WaveformChart incomplete grid rows', () => {
+  it.each(['independent', 'separated', 'compact'] as const)(
+    'fills an incomplete two by two row in %s mode',
+    async (displayMode) => {
+      const wrapper = await mountSizedChart(gridSeries(3), {
+        displayMode,
+        grid: { rowCount: 2, columnCount: 2, fillIncompleteLastRow: true },
+      })
+      const tracks = wrapper.findAll('.waveform-chart__track')
+      const first = geometry(tracks[0]!)
+      const last = geometry(tracks[2]!)
+
+      expect(tracks).toHaveLength(3)
+      expect(wrapper.findAll('.waveform-chart__track--empty')).toHaveLength(0)
+      expect(wrapper.findAll('.waveform-chart__grid-slot-placeholder')).toHaveLength(0)
+      expect(last.left).toBe(0)
+      expect(last.width).toBeGreaterThan(first.width * 1.8)
+      expect(last.top).toBeGreaterThan(first.top)
+      if (displayMode === 'independent') {
+        const overlays = wrapper.findAll('.waveform-chart__overlay--independent')
+        expect(overlays).toHaveLength(3)
+        expect(Number(overlays[2]?.attributes('width'))).toBe(last.width)
+      } else {
+        expect(wrapper.findAll('.waveform-chart__overlay--shared')).toHaveLength(1)
+      }
+    },
+  )
+
+  it('removes unused one-column rows and redistributes chart height', async () => {
+    const base = await mountSizedChart(gridSeries(3), {
+      displayMode: 'independent',
+      grid: { rowCount: 4, columnCount: 1 },
+    })
+    const filled = await mountSizedChart(gridSeries(3), {
+      displayMode: 'independent',
+      grid: { rowCount: 4, columnCount: 1, fillIncompleteLastRow: true },
+    })
+    const baseFirst = geometry(base.findAll('.waveform-chart__track')[0]!)
+    const filledTracks = filled.findAll('.waveform-chart__track')
+    const filledFirst = geometry(filledTracks[0]!)
+    const filledLast = geometry(filledTracks[2]!)
+
+    expect(filledTracks).toHaveLength(3)
+    expect(filledFirst.height).toBeGreaterThan(baseFirst.height)
+    expect(filledLast.top + filledLast.height).toBeGreaterThan(baseFirst.height * 3)
+  })
+
+  it('keeps the final two tracks evenly distributed in a two by three grid', async () => {
+    const wrapper = await mountSizedChart(gridSeries(5), {
+      displayMode: 'separated',
+      grid: { rowCount: 2, columnCount: 3, fillIncompleteLastRow: true },
+    })
+    const tracks = wrapper.findAll('.waveform-chart__track').map(geometry)
+
+    expect(tracks).toHaveLength(5)
+    expect(tracks[3]?.left).toBe(0)
+    expect(tracks[3]?.width).toBeCloseTo(tracks[4]?.width ?? 0)
+    expect(tracks[4]?.left).toBeGreaterThan((tracks[3]?.width ?? 0) + 1)
+  })
+
+  it('keeps full pages unchanged and fills a partial second page', async () => {
+    const data = gridSeries(5)
+    const standard = await mountSizedChart(data, {
+      displayMode: 'separated',
+      grid: { rowCount: 2, columnCount: 2 },
+    })
+    const filled = await mountSizedChart(data, {
+      displayMode: 'separated',
+      grid: { rowCount: 2, columnCount: 2, fillIncompleteLastRow: true },
+    })
+    const standardFirstPage = standard.findAll('.waveform-chart__track').map(geometry)
+    expect(filled.findAll('.waveform-chart__track').map(geometry)).toEqual(standardFirstPage)
+
+    await filled.get('.ant-pagination-next button').trigger('click')
+    await flushPromises()
+    const secondPage = filled.findAll('.waveform-chart__track').map(geometry)
+    expect(secondPage).toHaveLength(1)
+    expect(secondPage[0]?.left).toBe(0)
+    expect(secondPage[0]?.width).toBeGreaterThan(standardFirstPage[0]?.width ?? 0)
+  })
+})