waveform-analysis 0.1.71 → 0.1.73

package/src/components/core/useWaveformViewportRestore.ts

@@ -0,0 +1,105 @@
+import { remotePanBoundary, restoreViewportDomain } from '../interaction/remoteViewport'
+import { nextTick } from 'vue'
+import { zoomIdentity } from 'd3'
+import { transformForDomain } from '../interaction/zoomConstraints'
+import { seriesIdentity } from '../interaction/zoomEventPayload'
+import type { LifecycleContext } from './useWaveformChartLifecycle'
+
+export function useWaveformViewportRestore(
+  context: Pick<
+    LifecycleContext,
+    | 'preserveFullViewport'
+    | 'props'
+    | 'trackLayouts'
+    | 'resolveInitialTrackDomain'
+    | 'sharedZoomDomain'
+    | 'initialXDomain'
+    | 'independentTransforms'
+    | 'chartTracks'
+    | 'clearHover'
+    | 'editorSeriesOptions'
+    | 'sharedTransform'
+    | 'innerWidth'
+    | 'configureZoom'
+  >,
+) {
+  const {
+    props,
+    trackLayouts,
+    resolveInitialTrackDomain,
+    sharedZoomDomain,
+    initialXDomain,
+    independentTransforms,
+    chartTracks,
+    clearHover,
+    editorSeriesOptions,
+    sharedTransform,
+    innerWidth,
+    configureZoom,
+  } = context
+  let pendingSharedXDomain: [number, number] | undefined
+  let pendingIndependentXDomains: Map<string, [number, number]> | undefined
+
+  function handleBeforeDataReferenceChange() {
+    if (props.displayMode === 'independent') {
+      pendingSharedXDomain = undefined
+      pendingIndependentXDomains = new Map(
+        trackLayouts.value.flatMap((track) => {
+          const current = track.xScale.domain() as [number, number]
+          const boundary = resolveInitialTrackDomain(track)
+          return context.preserveFullViewport?.() || remotePanBoundary(props) ||
+            current[1] - current[0] < boundary[1] - boundary[0] - 1e-12
+            ? [[seriesIdentity(track.seriesList.map((series) => series.id)), current]]
+            : []
+        }),
+      )
+      return
+    }
+    pendingIndependentXDomains = undefined
+    const current = sharedZoomDomain.value
+    const boundary = initialXDomain.value
+    pendingSharedXDomain =
+      context.preserveFullViewport?.() || remotePanBoundary(props) ||
+      current[1] - current[0] < boundary[1] - boundary[0] - 1e-12
+        ? [...current]
+        : undefined
+  }
+
+  function handleDataReferenceChange() {
+    if (props.displayMode === 'independent') {
+      const currentTransforms = independentTransforms.value
+      independentTransforms.value = chartTracks.value.map(
+        (_track, index) => currentTransforms[index] ?? zoomIdentity,
+      )
+    }
+    clearHover()
+    editorSeriesOptions.value = []
+    void nextTick(() => {
+      if (props.displayMode === 'independent' && pendingIndependentXDomains) {
+        const nextTransforms = chartTracks.value.map(() => zoomIdentity)
+        trackLayouts.value.forEach((track) => {
+          const previousDomain = pendingIndependentXDomains?.get(
+            seriesIdentity(track.seriesList.map((series) => series.id)),
+          )
+          if (!previousDomain) return
+          const boundary = resolveInitialTrackDomain(track)
+          const domain = restoreViewportDomain(previousDomain, boundary, [track.seriesList], props)
+          nextTransforms[track.index] = transformForDomain(domain, boundary, track.width)
+        })
+        independentTransforms.value = nextTransforms
+        pendingIndependentXDomains = undefined
+      } else if (props.displayMode !== 'independent' && pendingSharedXDomain) {
+        const boundary = initialXDomain.value
+        const groups = trackLayouts.value
+          .filter((track) => track.hasVisibleSeries)
+          .map((track) => track.seriesList)
+        const domain = restoreViewportDomain(pendingSharedXDomain, boundary, groups, props)
+        sharedTransform.value = transformForDomain(domain, boundary, innerWidth.value)
+        pendingSharedXDomain = undefined
+      }
+      configureZoom()
+    })
+  }
+
+  return { handleBeforeDataReferenceChange, handleDataReferenceChange }
+}

package/src/components/core/useWaveformYAxisLayout.ts

@@ -32,6 +32,7 @@ export function useWaveformYAxisLayout(context: YAxisLayoutContext) {
   const isEdgeCompact = computed(() => props.layoutPreset === 'edge-compact')
   const showUnits = computed(
     () =>
+      props.unitDisplayMode !== 'channel-label' &&
       props.unitDisplayMode !== 'channel-label-or-legend' &&
       (!isEdgeCompact.value || props.unitDisplayMode === 'axis'),
   )
@@ -45,7 +46,7 @@ export function useWaveformYAxisLayout(context: YAxisLayoutContext) {
       props.axes?.y?.nice !== false,
       yAxisTickCount.value,
       props.displayMode === 'compact',
-      props.axes?.y?.upperPaddingRatio,
+      props.axes?.y,
       showUnits.value,
       isEdgeCompact.value ? measureYAxisTextWidth : undefined,
     ),
@@ -80,7 +81,7 @@ export function useWaveformYAxisLayout(context: YAxisLayoutContext) {
       props.axes?.y?.nice !== false,
       props.displayMode === 'compact',
       viewportYDomains.value,
-      props.axes?.y?.upperPaddingRatio,
+      props.axes?.y,
       showUnits.value,
       isEdgeCompact.value ? measureYAxisTextWidth : undefined,
     ),

package/src/components/core/waveformChartTypes.ts

@@ -1,3 +1,4 @@
+import type { WaveformToolbarOptions, WaveformControlState } from '../../types/controls'
 import type {
   WaveformAnnotation,
   WaveformAxesOptions,
@@ -26,6 +27,7 @@ import type {
 import type { WaveformGridOptions } from './grid'
 
 export interface WaveformChartProps {
+  toolbar?: boolean | WaveformToolbarOptions
   data: WaveformData
   displayMode?: WaveformDisplayMode
   overlayMode?: WaveformOverlayMode
@@ -104,6 +106,9 @@ export type ResolvedWaveformChartProps = Readonly<
 >
 
 export interface WaveformChartEmit {
+  (event: 'update:interactionMode', mode: WaveformInteractionMode): void
+  (event: 'interaction-mode-change', mode: WaveformInteractionMode): void
+  (event: 'control-state-change', state: WaveformControlState): void
   (event: 'point-hover', point: WaveformPoint | null): void
   (event: 'zoom-intent', payload: WaveformZoomIntentPayload): void
   (event: 'zoom-change', domain: [number, number]): void

package/src/components/core/waveformSamplingSession.ts

@@ -0,0 +1,49 @@
+import { createLatestTaskScheduler } from './latestTaskScheduler'
+import { createWorkerSamplingClient, type WorkerSamplingClient } from './workerSamplingClient'
+import type { WorkerSamplingDiagnostics } from '../../core/workerSampling'
+
+/** Owns resources for one immutable data reference. Invalidation cancels old work before reuse. */
+export function createWaveformSamplingSession() {
+  const scheduler = createLatestTaskScheduler()
+  const revisions = new Map<string, number>()
+  const backendBySeries = new Map<string, WorkerSamplingDiagnostics['backend']>()
+  const selectedModeBySeries = new Map<string, 'raw' | 'sampled'>()
+  const emittedErrors = new Set<string>()
+  const pendingDiagnostics = new Map<string, WorkerSamplingDiagnostics>()
+  const session = {
+    scheduler,
+    revisions,
+    backendBySeries,
+    selectedModeBySeries,
+    emittedErrors,
+    pendingDiagnostics,
+    client: undefined as WorkerSamplingClient | undefined,
+    requestId: 0,
+    diagnosticsTimer: undefined as ReturnType<typeof setTimeout> | undefined,
+    autoModeSettleTimer: undefined as ReturnType<typeof setTimeout> | undefined,
+    hasInitialSamplingRun: false,
+    getClient() {
+      return (session.client ??= createWorkerSamplingClient())
+    },
+    invalidate() {
+      scheduler.cancelPending()
+      clearTimeout(session.diagnosticsTimer)
+      clearTimeout(session.autoModeSettleTimer)
+      session.diagnosticsTimer = undefined
+      session.autoModeSettleTimer = undefined
+      session.hasInitialSamplingRun = false
+      pendingDiagnostics.clear()
+      revisions.clear()
+      backendBySeries.clear()
+      selectedModeBySeries.clear()
+      emittedErrors.clear()
+      session.client?.dispose()
+      session.client = undefined
+    },
+    dispose() {
+      session.invalidate()
+      scheduler.dispose()
+    },
+  }
+  return session
+}

package/src/components/core/workerSamplingClient.ts

@@ -30,6 +30,7 @@ function workerFailureMessage(event?: ErrorEvent) {
 }
 
 export function createWorkerSamplingClient(): WorkerSamplingClient {
+  let disposed = false
   let worker: Worker | undefined
   let fallback: WorkerSamplingRepository | undefined
   let workerFailureReason: string | undefined
@@ -37,7 +38,8 @@ export function createWorkerSamplingClient(): WorkerSamplingClient {
   const datasets = new Map<string, StoredDataset>()
 
   const fallbackRepository = () => {
-    fallback ??= new WorkerSamplingRepository()
+    if (fallback) return fallback
+    fallback = new WorkerSamplingRepository()
     for (const [datasetId, dataset] of datasets) {
       fallback.handle({
         type: 'register-dataset',
@@ -83,12 +85,26 @@ export function createWorkerSamplingClient(): WorkerSamplingClient {
   const resolveFallbackRequests = () => {
     const outstanding = [...pending.values()]
     pending.clear()
-    const repository = fallbackRepository()
-    outstanding.forEach(({ request, resolve }) => resolve(repository.handle(request)))
+    let repository: WorkerSamplingRepository
+    try {
+      repository = fallbackRepository()
+    } catch (error) {
+      outstanding.forEach(({ reject }) =>
+        reject(error instanceof Error ? error : new Error(String(error))),
+      )
+      return
+    }
+    outstanding.forEach(({ request, resolve, reject }) => {
+      try {
+        resolve(repository.handle(request))
+      } catch (error) {
+        reject(error instanceof Error ? error : new Error(String(error)))
+      }
+    })
   }
 
   const fallBackToJavascript = (event?: ErrorEvent) => {
-    if (fallback) return
+    if (disposed || fallback) return
     workerFailureReason = workerFailureMessage(event)
     worker?.terminate()
     worker = undefined
@@ -101,9 +117,17 @@ export function createWorkerSamplingClient(): WorkerSamplingClient {
       worker = new Worker(new URL('../../core/workerSampling/workerRuntime.ts', import.meta.url), {
         type: 'module',
       })
-      worker.onmessage = (event: MessageEvent<WorkerSamplingResponse>) => {
+      worker.onmessage = (
+        event: MessageEvent<
+          WorkerSamplingResponse | { type: 'request-error'; requestId: number; message: string }
+        >,
+      ) => {
         const request = pending.get(event.data.requestId)
         if (!request) return
+        if (event.data.type === 'request-error') {
+          fallBackToJavascript({ message: event.data.message } as ErrorEvent)
+          return
+        }
         pending.delete(event.data.requestId)
         request.resolve(event.data)
       }
@@ -119,8 +143,9 @@ export function createWorkerSamplingClient(): WorkerSamplingClient {
       return workerFailureReason
     },
     send(request) {
+      if (disposed) return Promise.reject(new Error('Sampling client was disposed.'))
       recordDatasetRequest(request)
-      if (fallback) return Promise.resolve(fallbackRepository().handle(request))
+      if (fallback) return Promise.resolve().then(() => fallback!.handle(request))
       return new Promise<WorkerSamplingResponse>((resolve, reject) => {
         pending.set(request.requestId, { request, resolve, reject })
         try {
@@ -133,6 +158,13 @@ export function createWorkerSamplingClient(): WorkerSamplingClient {
       })
     },
     dispose() {
+      disposed = true
+      if (worker) {
+        worker.onmessage = null
+        worker.onerror = null
+        worker.onmessageerror = null
+      }
+      fallback?.handle({ type: 'dispose-all', requestId: 0 })
       worker?.terminate()
       worker = undefined
       pending.forEach(({ reject }) => reject(new Error('Sampling client was disposed.')))

package/src/components/core/yAxisLabelStyle.ts

@@ -0,0 +1,10 @@
+import type { WaveformYAxisLabelTextStyle } from '../../types'
+
+export function resolveYAxisLabelFontSize(style?: WaveformYAxisLabelTextStyle): number {
+  const size = style?.fontSize
+  return typeof size === 'number' && Number.isFinite(size) && size > 0 ? size : 12
+}
+
+export function resolveYAxisLabelBandWidth(style?: WaveformYAxisLabelTextStyle): number {
+  return resolveYAxisLabelFontSize(style) + 8
+}

package/src/components/core/yAxisLayoutMetrics.ts

@@ -1,7 +1,6 @@
 import type { WaveformOverlayMode } from '../data/types'
 import {
   Y_AXIS_CHARACTER_WIDTH,
-  Y_AXIS_LABEL_BAND_WIDTH,
   Y_AXIS_LABEL_GAP,
   Y_AXIS_OUTER_PADDING,
   Y_AXIS_TICK_PADDING,
@@ -9,6 +8,8 @@ import {
 import { axisTextMetrics, resolveRenderedYAxisSeriesGroups } from './layout'
 import type { DisplayTrack } from './types'
 import type { WaveformYDomain } from './yDomain'
+import type { YAxisPaddingOptions } from './yAxisPadding'
+import { resolveYAxisLabelBandWidth } from './yAxisLabelStyle'
 
 export interface YAxisLayoutMetrics {
   tickClearance: number
@@ -40,10 +41,13 @@ export function resolveYAxisLayoutMetrics(
   nice: boolean,
   tickCount: number,
   compact: boolean,
-  upperPaddingRatio = 0,
+  padding?: YAxisPaddingOptions | number,
   showUnits = true,
   measureTextWidth?: (text: string) => number,
 ): YAxisLayoutMetrics {
+  const labelBandWidth = resolveYAxisLabelBandWidth(
+    typeof padding === 'object' ? padding.labelTextStyle : undefined,
+  )
   const axisText = chartTracks
     .filter((track) => track.series.length > 0)
     .flatMap((track) =>
@@ -53,7 +57,7 @@ export function resolveYAxisLayoutMetrics(
         yDomain,
         yDomains,
         viewportYDomains,
-        upperPaddingRatio,
+        padding,
       ),
     )
     .map(
@@ -66,6 +70,8 @@ export function resolveYAxisLayoutMetrics(
           tickCount,
           compact,
           measureTextWidth,
+          group.maximumTick,
+          group.minimumTick,
         ).tickTextWidth,
     )
   const tickTextWidth = Math.max(Y_AXIS_CHARACTER_WIDTH, ...axisText)
@@ -74,13 +80,9 @@ export function resolveYAxisLayoutMetrics(
     Y_AXIS_TICK_PADDING +
     tickTextWidth +
     Y_AXIS_LABEL_GAP +
-    Y_AXIS_LABEL_BAND_WIDTH / 2
+    labelBandWidth / 2
   )
   const fullClearance =
-    tickTextWidth +
-    Y_AXIS_TICK_PADDING +
-    Y_AXIS_LABEL_GAP +
-    Y_AXIS_LABEL_BAND_WIDTH +
-    Y_AXIS_OUTER_PADDING
+    tickTextWidth + Y_AXIS_TICK_PADDING + Y_AXIS_LABEL_GAP + labelBandWidth + Y_AXIS_OUTER_PADDING
   return { tickClearance, fullClearance, labelCenterX }
 }

package/src/components/core/yAxisPadding.ts

@@ -0,0 +1,60 @@
+import type { WaveformAxesOptions } from '../../types'
+import type { YAxisSeriesGroup } from './layout'
+
+export type YAxisPaddingOptions = WaveformAxesOptions['y']
+
+export function paddingRatio(enabled?: boolean, ratio?: number): number {
+  if (enabled === false) return 0
+  const value = ratio ?? (enabled === true ? 0.1 : 0)
+  return Number.isFinite(value) && value > 0 ? value : 0
+}
+
+export function applyYAxisPadding(
+  group: YAxisSeriesGroup,
+  viewport: [number, number] | undefined,
+  options: YAxisPaddingOptions | number,
+): YAxisSeriesGroup {
+  const config = typeof options === 'number' ? { upperPaddingRatio: options } : options
+  if (group.fixed) return withYAxisExtremaTicks(group, config?.extremaTicksVisible)
+  const upper = paddingRatio(config?.upperPaddingEnabled, config?.upperPaddingRatio)
+  const lower = paddingRatio(config?.lowerPaddingEnabled, config?.lowerPaddingRatio)
+  const [a, b] = group.domain
+  const span = b - a
+  const min = lower > 0 ? a - span * lower : a
+  const max = upper > 0 ? b + span * upper : b
+  return withYAxisExtremaTicks(
+    {
+      ...group,
+      domain: viewport ?? [Number.isFinite(min) ? min : a, Number.isFinite(max) ? max : b],
+    },
+    config?.extremaTicksVisible,
+  )
+}
+
+function withYAxisExtremaTicks(group: YAxisSeriesGroup, visible = true): YAxisSeriesGroup {
+  const maxima = group.seriesList.flatMap((series) =>
+    Number.isFinite(series.rawYMaximum) ? [series.rawYMaximum!] : [],
+  )
+  const minima = group.seriesList.flatMap((series) =>
+    Number.isFinite(series.rawYMinimum) ? [series.rawYMinimum!] : [],
+  )
+  return {
+    ...group,
+    maximumTick: visible && maxima.length ? Math.max(...maxima) : undefined,
+    minimumTick: visible && minima.length ? Math.min(...minima) : undefined,
+  }
+}
+
+export function withMaximumTick(values: number[], maximum?: number, minimum?: number): number[] {
+  if (minimum !== undefined && Number.isFinite(minimum)) {
+    values = [...values.filter((value) => !sameTick(value, minimum)), minimum].sort((a, b) => a - b)
+  }
+  if (maximum === undefined || !Number.isFinite(maximum)) return values
+  return [...values.filter((value) => !sameTick(value, maximum)), maximum].sort((a, b) => a - b)
+}
+
+export function sameTick(a: number, b: number): boolean {
+  return (
+    Math.abs(a - b) <= Number.EPSILON * 8 * Math.max(Math.abs(a), Math.abs(b), Number.MIN_VALUE)
+  )
+}

package/src/components/core/yAxisTitleLayout.ts

@@ -1,23 +1,21 @@
 import { formatYAxisTickLayoutLabel } from './layout'
 import type { TrackLayout, WaveformYAxisLayout } from './types'
-import {
-  Y_AXIS_CHARACTER_WIDTH,
-  Y_AXIS_LABEL_BAND_WIDTH,
-  Y_AXIS_TICK_PADDING,
-} from './yAxisConstants'
+import type { WaveformYAxisLabelTextStyle } from '../../types'
+import { resolveYAxisLabelBandWidth, resolveYAxisLabelFontSize } from './yAxisLabelStyle'
+import { Y_AXIS_CHARACTER_WIDTH, Y_AXIS_TICK_PADDING } from './yAxisConstants'
 
-// Match the 12px channel names and 11px ticks in WaveformTrack.css.
-const TITLE_FONT_SIZE = 12
+// Match the 11px ticks in WaveformTrack.css.
 const TICK_FONT_SIZE = 11
 const TEXT_GAP = 2
 
 interface TitleLayoutOptions {
+  labelTextStyle?: WaveformYAxisLabelTextStyle
   showUnits?: boolean
   compact?: boolean
   measureTextWidth?: (text: string) => number
 }
 
-function estimateTitleWidth(title: string): number {
+function estimateTitleWidth(title: string, fontSize: number): number {
   return Array.from(title).reduce((width, character) => {
     // Latin labels average well below one em; full-width characters occupy one em.
     const em = /[\u2e80-\u9fff\uf900-\ufaff\uff01-\uff60]/u.test(character)
@@ -27,7 +25,7 @@ function estimateTitleWidth(title: string): number {
         : /[ilI1., :;|'!]/u.test(character)
           ? 0.4
           : 0.65
-    return width + em * TITLE_FONT_SIZE
+    return width + em * fontSize
   }, 0)
 }
 
@@ -41,7 +39,8 @@ function titleDistance(
 ): number {
   const series = axis.seriesList[0]
   const title = series?.name.trim() || yLabel || ''
-  const halfTitleHeight = estimateTitleWidth(title) / 2
+  const halfTitleHeight =
+    estimateTitleWidth(title, resolveYAxisLabelFontSize(options.labelTextStyle)) / 2
   const titleTop = track.height / 2 - halfTitleHeight - TEXT_GAP
   const titleBottom = track.height / 2 + halfTitleHeight + TEXT_GAP
   const lowestTick = Math.min(...axis.tickValues)
@@ -63,11 +62,11 @@ function titleDistance(
     )
     return [options.measureTextWidth?.(text) ?? text.length * Y_AXIS_CHARACTER_WIDTH]
   })
-  // The 20px title band leaves 4px beside a 12px glyph.
+  // The title band leaves 4px beside each glyph.
   return (
     Math.max(Y_AXIS_CHARACTER_WIDTH, ...tickWidths) +
     Y_AXIS_TICK_PADDING +
-    Y_AXIS_LABEL_BAND_WIDTH / 2
+    resolveYAxisLabelBandWidth(options.labelTextStyle) / 2
   )
 }
 

package/src/components/interaction/useExtremaTickViewport.ts

@@ -0,0 +1,43 @@
+import { watch, type ComputedRef, type ShallowRef } from 'vue'
+import type { ZoomTransform } from 'd3'
+
+import type { TrackLayout } from '../core/types'
+
+/** Keep X coordinates stable when toggling extrema changes the reserved Y-label width. */
+export function useExtremaTickViewport(
+  visible: () => boolean,
+  innerWidth: ComputedRef<number>,
+  tracks: ComputedRef<TrackLayout[]>,
+  sharedTransform: ShallowRef<ZoomTransform>,
+  independentTransforms: ShallowRef<ZoomTransform[]>,
+) {
+  const resizeTransform = (transform: ZoomTransform, previous: number, next: number) =>
+    previous > 0 && next > 0
+      ? transform.translate(((next / previous - 1) * transform.x) / transform.k, 0)
+      : transform
+
+  watch(
+    () => ({
+      visible: visible(),
+      width: innerWidth.value,
+      tracks: tracks.value.map((track) => ({
+        id: track.id,
+        index: track.index,
+        width: track.width,
+      })),
+    }),
+    (next, previous) => {
+      if (next.visible === previous.visible) return
+      sharedTransform.value = resizeTransform(sharedTransform.value, previous.width, next.width)
+      const transforms = [...independentTransforms.value]
+      next.tracks.forEach((track) => {
+        const prior = previous.tracks.find((item) => item.id === track.id)
+        const transform = transforms[track.index]
+        if (prior && transform) {
+          transforms[track.index] = resizeTransform(transform, prior.width, track.width)
+        }
+      })
+      independentTransforms.value = transforms
+    },
+  )
+}

package/src/components/interaction/useWaveformViewport.ts

@@ -13,6 +13,7 @@ import { createViewportPan } from './viewportPan'
 import { transformForDomain } from './zoomConstraints'
 import { emitBoxZoomIntent } from './zoomEventPayload'
 export interface ViewportContext {
+  clearBoundaries?: (trackIndex?: number) => void
   props: ResolvedWaveformChartProps
   emit: WaveformChartEmit
   selection: Ref<ViewportSelectionState | null>
@@ -104,8 +105,15 @@ export function useWaveformViewport(context: ViewportContext) {
     )
   const beginViewportDrag = (event: PointerEvent, trackIndex: number, independent: boolean) => {
     if (isPresentationMode.value) return
-    const panRequested = props.pannable && spacePressed.value
-    if ((!props.zoomable && !panRequested) || !isZoomMode.value || event.button !== 0) return
+    const panRequested =
+      props.pannable &&
+      (props.interactionMode === 'pan' || (isZoomMode.value && spacePressed.value))
+    if (
+      (!props.zoomable && !panRequested) ||
+      (!isZoomMode.value && !panRequested) ||
+      event.button !== 0
+    )
+      return
     const overlay = event.currentTarget as SVGRectElement
     const track = trackLayouts.value.find((item) => item.index === trackIndex)
     if (!track) return
@@ -291,6 +299,7 @@ export function useWaveformViewport(context: ViewportContext) {
     }
   }
   const resetViewport = (trackIndex?: number) => {
+    context.clearBoundaries?.(trackIndex)
     cancelPendingZoom()
     cancelViewportDrag()
     if (props.displayMode === 'independent' && trackIndex !== undefined) {

package/src/components/rendering/WaveformTrack.css

@@ -4,8 +4,7 @@
 }
 
 .waveform-track__y-axis-label-bg {
-  fill: white;
-  opacity: 0.9;
+  fill: transparent;
   pointer-events: none;
 }
 

package/src/components/rendering/WaveformTrack.vue

@@ -20,15 +20,14 @@ interface Props {
   interactionMode?: WaveformInteractionMode
   frameNumber?: string | number
   frameStyle?: WaveformFrameStyle
+  framePath?: string
   axes?: WaveformAxesOptions
   timeUnit: 's' | 'ms'
   yLabel?: string
   showAxisUnits?: boolean
   showLabelUnits?: boolean
   hideYAxisTitles?: boolean
-  containYAxisEndpoints?: boolean
   containFrameStroke?: boolean
-  omitFrameTop?: boolean
   cleanView?: boolean
   zeroLine?: Required<WaveformZeroLineOptions>
 }
@@ -77,12 +76,6 @@ const resolvedFrameStyle = computed(() => {
 const frameInset = computed(() =>
   props.containFrameStroke ? resolvedFrameStyle.value.borderWidth / 2 : 0,
 )
-const openFramePath = computed(() => {
-  const inset = frameInset.value
-  const right = Math.max(inset, (props.track.width ?? props.innerWidth) - inset)
-  const bottom = Math.max(inset, props.track.height - inset)
-  return `M ${inset} ${inset} V ${bottom} H ${right} V ${inset}`
-})
 </script>
 
 <template>
@@ -106,6 +99,7 @@ const openFramePath = computed(() => {
       :clean-view="cleanView"
       :frame-number="frameNumber"
       :frame-style="resolvedFrameStyle"
+      show-empty-frame
     />
     <WaveformTrackAxes
       :track="track"
@@ -117,14 +111,13 @@ const openFramePath = computed(() => {
       :show-units="showAxisUnits"
       :show-label-units="showLabelUnits"
       :hide-y-axis-titles="hideYAxisTitles"
-      :contain-y-axis-endpoints="containYAxisEndpoints || displayMode === 'compact'"
+      :hide-overlapping-maximum-label="displayMode === 'compact'"
     />
 
     <component
-      :is="omitFrameTop ? 'path' : 'rect'"
-      v-if="!track.isEmpty"
+      :is="framePath ? 'path' : 'rect'"
       class="waveform-track__plot-frame waveform-chart__plot-frame"
-      :d="omitFrameTop ? openFramePath : undefined"
+      :d="framePath"
       :x="containFrameStroke ? frameInset : undefined"
       :y="containFrameStroke ? frameInset : undefined"
       :width="Math.max(0, (track.width ?? innerWidth) - frameInset * 2)"