waveform-analysis 0.1.64 → 0.1.66

package/src/components/core/layout.ts

@@ -18,7 +18,7 @@ const Y_AXIS_CHARACTER_WIDTH = 7
 const Y_AXIS_TICK_PADDING = 7
 const Y_AXIS_OUTER_PADDING = 4
 const Y_AXIS_LABEL_GAP = 0
-const Y_AXIS_LABEL_BAND_WIDTH = 12
+const Y_AXIS_LABEL_BAND_WIDTH = 20
 
 export function resolveYAxisTickCount(_plotHeight: number, splitNumber?: number): number {
   if (typeof splitNumber === 'number' && Number.isFinite(splitNumber)) {

package/src/components/core/trackLayoutBuilder.ts

@@ -34,6 +34,13 @@ import {
 } from './layout'
 import type { DisplayTrack, TrackLayout, WaveformYAxisLayout } from './types'
 import { applyXDomainStrategy } from './xDomain'
+import { alignLeftYAxisTitles } from './yAxisTitleLayout'
+import {
+  alignIntegerZoomDomain,
+  normalizeIntegerZoomDomain,
+  integerZoomTicks,
+  formatIntegerZoomLabel,
+} from '../interaction/integerZoom'
 import {
   Y_AXIS_LABEL_BAND_WIDTH,
   Y_AXIS_LABEL_GAP,
@@ -56,6 +63,7 @@ export interface BuildTrackLayoutsOptions {
   initialXDomain?: [number, number]
   initialXDomains?: Record<string, [number, number]>
   xDomainStrategy?: WaveformXDomainStrategy
+  integerZoom?: boolean
   fixedYDomain?: [number, number]
   fixedYDomains?: Record<string, [number, number]>
   yDomains?: Record<string, [number, number]>
@@ -68,6 +76,7 @@ export interface BuildTrackLayoutsOptions {
   linePointOverrides?: Readonly<Record<string, WaveformPoint[]>>
   hideSecondaryLabels: boolean
   yAxisLabelX: number
+  yLabel?: string
   yAxisSlots?: readonly YAxisSlot[]
   showCompactEmptyTracks: boolean
 }
@@ -82,16 +91,19 @@ function resolveIndependentXDomain(
     options.initialXDomains?.[track.id] ??
     options.initialXDomains?.[seriesId] ??
     options.initialXDomain
-  return explicitDomain
-    ? applyXDomainStrategy(explicitDomain, strategy, true)
-    : applyXDomainStrategy(track.xDomain, strategy)
+  return alignIntegerZoomDomain(
+    explicitDomain
+      ? applyXDomainStrategy(explicitDomain, strategy, true)
+      : applyXDomainStrategy(track.xDomain, strategy),
+    options,
+  )
 }
 
 export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayout[] {
   const visibleCells = options.cells.map((cell) => ({ ...cell, hasSeries: Boolean(cell.series) }))
   const bottomCells = getBottomRowCellIndexes(visibleCells, options.grid.columnCount)
 
-  return visibleCells.flatMap((cell, index) => {
+  const layouts: TrackLayout[] = visibleCells.flatMap((cell, index) => {
     const isEmpty = !cell.series || cell.series.series.length === 0
     if (!cell.series && (options.displayMode !== 'compact' || !options.showCompactEmptyTracks))
       return []
@@ -116,6 +128,7 @@ export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayou
         ? (options.independentTransforms[index] ?? zoomIdentity)
         : zoomIdentity
     const xScale = transform.rescaleX(baseXScale)
+    xScale.domain(normalizeIntegerZoomDomain(xScale.domain() as [number, number], options))
     const yAxisGroups = resolveRenderedYAxisSeriesGroups(
       displayTrack,
       options.overlayMode,
@@ -178,25 +191,19 @@ export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayou
     const fallbackYScale = scaleLinear(displayTrack.yDomain, [cell.plotHeight, 0])
     if (options.yAxisNice !== false) fallbackYScale.nice()
     const yScale = yAxes[0]?.scale ?? fallbackYScale
-    const xMajorTicks = xScale.ticks(Math.max(2, Math.floor(cell.width / 100)))
+    const xMajorTicks = integerZoomTicks(
+      xScale.domain() as [number, number],
+      Math.max(2, Math.floor(cell.width / 100)),
+      options,
+    )
+    const xAxisLabelFormatter =
+      options.xAxisLabelFormatter ?? (options.integerZoom ? formatIntegerZoomLabel : undefined)
     const yMajorTicks = yAxes[0]?.majorTicks ?? []
     const yAxisTickValues = yAxes[0]?.tickValues ?? []
     const domain = xScale.domain() as [number, number]
     const endpointLabels = {
-      start: formatXAxisLabel(
-        domain[0],
-        domain,
-        options.timeUnit,
-        'start',
-        options.xAxisLabelFormatter,
-      ),
-      end: formatXAxisLabel(
-        domain[1],
-        domain,
-        options.timeUnit,
-        'end',
-        options.xAxisLabelFormatter,
-      ),
+      start: formatXAxisLabel(domain[0], domain, options.timeUnit, 'start', xAxisLabelFormatter),
+      end: formatXAxisLabel(domain[1], domain, options.timeUnit, 'end', xAxisLabelFormatter),
     }
     const leftClearance = endpointLabels.start.length * 7 + 10
     const rightClearance = endpointLabels.end.length * 7 + 10
@@ -259,6 +266,7 @@ export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayou
       yScale,
       yAxes,
       xMajorTicks,
+      xAxisLabelFormatter,
       xMinorTicks: buildMinorTicks(xMajorTicks, 3, domain),
       yMajorTicks,
       yMinorTicks: yAxes[0]?.minorTicks ?? [],
@@ -279,4 +287,7 @@ export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayou
             : bottomCells.has(cell.slotIndex))),
     }
   })
+
+  alignLeftYAxisTitles(layouts, options.yLabel)
+  return layouts
 }

package/src/components/core/types.ts

@@ -5,6 +5,7 @@ import type {
   WaveformLineStyle,
   WaveformPoint,
   WaveformPointType,
+  WaveformXAxisLabelFormatter,
 } from '../../types'
 import type { WaveformPointSource } from '../../core/waveformPointSource'
 import type { NormalizedWaveformGridLineOptions } from './grid'
@@ -114,6 +115,7 @@ export interface TrackLayout {
   yMinorTicks: number[]
   yAxisTickValues: number[]
   xAxisTickValues: number[]
+  xAxisLabelFormatter?: WaveformXAxisLabelFormatter
   endpointLabels: { start: string; end: string }
   path: string | null
   seriesPaths: TrackSeriesPath[]

package/src/components/core/useWaveformChartLifecycle.ts

@@ -239,7 +239,7 @@ export function useWaveformChartLifecycle(context: LifecycleContext) {
   )
 
   watch(
-    () => props.displayMode,
+    () => [props.displayMode, props.integerZoom, props.integerZoom ? props.timeUnit : undefined],
     () => {
       const previousPage = currentPage.value
       currentPage.value = 1

package/src/components/core/useWaveformLayout.ts

@@ -21,6 +21,7 @@ import { createFrameNumberResolver, resolvePageableTracks } from './trackPaginat
 import type { PreparedWaveformSeries } from './useWaveformData'
 import type { ResolvedWaveformChartProps } from './waveformChartTypes'
 import { applyXDomainStrategy } from './xDomain'
+import { alignIntegerZoomDomain, normalizeIntegerZoomDomain } from '../interaction/integerZoom'
 import { resolveYAxisLayoutMetrics, resolveViewportYDomains } from './yAxisLayoutMetrics'
 import type { useWaveformAnnotationInteraction } from '../annotation'
 interface LayoutContext {
@@ -220,13 +221,19 @@ export function useWaveformLayout(context: LayoutContext) {
       Number.isFinite(domain[1]) &&
       domain[0] !== domain[1]
     ) {
-      return applyXDomainStrategy(
-        domain[0] < domain[1] ? domain : [domain[1], domain[0]],
-        props.xDomainStrategy,
-        true,
+      return alignIntegerZoomDomain(
+        applyXDomainStrategy(
+          domain[0] < domain[1] ? domain : [domain[1], domain[0]],
+          props.xDomainStrategy,
+          true,
+        ),
+        props,
       )
     }
-    return applyXDomainStrategy(sharedXDomain.value, props.xDomainStrategy)
+    return alignIntegerZoomDomain(
+      applyXDomainStrategy(sharedXDomain.value, props.xDomainStrategy),
+      props,
+    )
   })
   const resolveInitialTrackDomain = (track: TrackLayout): [number, number] => {
     const configuredDomain =
@@ -239,24 +246,32 @@ export function useWaveformLayout(context: LayoutContext) {
       Number.isFinite(configuredDomain[1]) &&
       configuredDomain[0] !== configuredDomain[1]
     ) {
-      return applyXDomainStrategy(
-        configuredDomain[0] < configuredDomain[1]
-          ? configuredDomain
-          : [configuredDomain[1], configuredDomain[0]],
-        props.xDomainStrategy,
-        true,
+      return alignIntegerZoomDomain(
+        applyXDomainStrategy(
+          configuredDomain[0] < configuredDomain[1]
+            ? configuredDomain
+            : [configuredDomain[1], configuredDomain[0]],
+          props.xDomainStrategy,
+          true,
+        ),
+        props,
       )
     }
-    return applyXDomainStrategy(
-      paddedDomain(track.seriesList.flatMap((series) => series.xDomain)),
-      props.xDomainStrategy,
+    return alignIntegerZoomDomain(
+      applyXDomainStrategy(
+        paddedDomain(track.seriesList.flatMap((series) => series.xDomain)),
+        props.xDomainStrategy,
+      ),
+      props,
     )
   }
-  const sharedZoomDomain = computed(
-    () =>
+  const sharedZoomDomain = computed(() =>
+    normalizeIntegerZoomDomain(
       sharedTransform.value
         .rescaleX(scaleLinear(initialXDomain.value, [0, innerWidth.value]))
         .domain() as [number, number],
+      props,
+    ),
   )
   const gridCells = computed(() => {
     const cells = resolveGridCellGeometry(
@@ -280,6 +295,7 @@ export function useWaveformLayout(context: LayoutContext) {
       initialXDomain: props.initialXDomain ? initialXDomain.value : undefined,
       initialXDomains: props.initialXDomains,
       xDomainStrategy: props.xDomainStrategy,
+      integerZoom: props.integerZoom,
       fixedYDomain: props.yDomain,
       fixedYDomains: props.yDomains,
       yDomains: viewportYDomains.value,
@@ -290,10 +306,11 @@ export function useWaveformLayout(context: LayoutContext) {
       rendering: renderingOptions.value,
       linePointOverrides: linePointOverrides?.value,
       hideSecondaryLabels: isCleanView.value || yAxisLayout.value.hideSecondaryLabels,
+      yLabel: props.yLabel,
       yAxisLabelX:
         yAxisSlots.value.slots.find((slot) => slot.side === 'left' && slot.sideIndex === 0)
           ?.labelOffset ?? yAxisMetrics.value.labelCenterX,
-      yAxisSlots: props.overlayMode === 'multi-axis' ? yAxisSlots.value.slots : undefined,
+      yAxisSlots: yAxisSlots.value.slots,
       showCompactEmptyTracks: props.displayMode === 'compact' && hasWaveformData.value,
     }),
   )

package/src/components/core/useWaveformPresentation.ts

@@ -53,14 +53,24 @@ export function useWaveformPresentation(context: PresentationContext) {
   const isPresentationMode = computed(() => props.presentationMode === true)
   const resolvedZeroLine = computed(() => {
     const width = props.zeroLine.width
+    const opacity = props.zeroLine.opacity
+    const threshold = props.zeroLine.boundaryThreshold
     return {
-      visible: props.zeroLine.visible === true,
+      visible: props.zeroLine.visible !== false,
       color: props.zeroLine.color || ZERO_LINE_DEFAULTS.COLOR,
       width:
         typeof width === 'number' && Number.isFinite(width) && width > 0
           ? width
           : ZERO_LINE_DEFAULTS.WIDTH,
       dash: props.zeroLine.dash ?? ZERO_LINE_DEFAULTS.DASH,
+      opacity:
+        typeof opacity === 'number' && Number.isFinite(opacity) && opacity >= 0 && opacity <= 1
+          ? opacity
+          : ZERO_LINE_DEFAULTS.OPACITY,
+      boundaryThreshold:
+        typeof threshold === 'number' && Number.isFinite(threshold) && threshold >= 0
+          ? threshold
+          : ZERO_LINE_DEFAULTS.BOUNDARY_THRESHOLD,
     }
   })
   const legendBackgroundColor = computed(

package/src/components/core/waveformChartTypes.ts

@@ -33,6 +33,8 @@ export interface WaveformChartProps {
   lineColor?: string
   showTooltip?: boolean
   zoomable?: boolean
+  /** Snap viewport endpoints outwards to integer X-axis display units. */
+  integerZoom?: boolean
   pannable?: boolean
   minZoomSpan?: number
   minVisiblePoints?: number
@@ -70,6 +72,7 @@ type DefaultedProp =
   | 'lineColor'
   | 'showTooltip'
   | 'zoomable'
+  | 'integerZoom'
   | 'pannable'
   | 'minVisiblePoints'
   | 'xDomainStrategy'

package/src/components/core/yAxisConstants.ts

@@ -2,7 +2,7 @@ export const Y_AXIS_CHARACTER_WIDTH = 7
 export const Y_AXIS_TICK_PADDING = 7
 export const Y_AXIS_OUTER_PADDING = 4
 export const Y_AXIS_LABEL_GAP = 0
-export const Y_AXIS_LABEL_BAND_WIDTH = 12
+export const Y_AXIS_LABEL_BAND_WIDTH = 20
 export const Y_AXIS_RIGHT_LABEL_OFFSET = 10
 
 export function resolveYAxisSides(axisCount: number): Array<'left' | 'right'> {

package/src/components/core/yAxisTitleLayout.ts

@@ -0,0 +1,78 @@
+import { formatYAxisTickLabel } from './layout'
+import type { TrackLayout, WaveformYAxisLayout } from './types'
+import {
+  Y_AXIS_CHARACTER_WIDTH,
+  Y_AXIS_LABEL_BAND_WIDTH,
+  Y_AXIS_TICK_PADDING,
+} from './yAxisConstants'
+
+// Match the existing 14px channel names and 11px ticks in WaveformTrack.css.
+const TITLE_FONT_SIZE = 14
+const TICK_FONT_SIZE = 11
+const TEXT_GAP = 2
+
+function estimateTitleWidth(title: string): 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)
+      ? 1
+      : /[MW@%]/u.test(character)
+        ? 0.95
+        : /[ilI1., :;|'!]/u.test(character)
+          ? 0.4
+          : 0.65
+    return width + em * TITLE_FONT_SIZE
+  }, 0)
+}
+
+type TitleTrack = Pick<TrackLayout, 'height' | 'column' | 'yAxes'>
+
+function titleDistance(track: TitleTrack, axis: WaveformYAxisLayout, yLabel?: string): number {
+  const series = axis.seriesList[0]
+  const title = series?.name.trim() || yLabel || ''
+  const halfTitleHeight = estimateTitleWidth(title) / 2
+  const titleTop = track.height / 2 - halfTitleHeight - TEXT_GAP
+  const titleBottom = track.height / 2 + halfTitleHeight + TEXT_GAP
+  const lowestTick = Math.min(...axis.tickValues)
+  const tickWidths = axis.tickValues.flatMap((value) => {
+    // D3 places ticks at scale(value) + 0.5. The lowest label is bottom-aligned;
+    // all other labels are vertically centered using dy="0.32em".
+    const y = axis.scale(value) + 0.5
+    const top = y - (value === lowestTick ? TICK_FONT_SIZE : TICK_FONT_SIZE / 2)
+    const bottom = value === lowestTick ? y : y + TICK_FONT_SIZE / 2
+    if (bottom < titleTop || top > titleBottom) return []
+    return [
+      formatYAxisTickLabel(
+        value,
+        axis.scale.domain() as [number, number],
+        axis.tickValues,
+        series?.unit,
+      ).length * Y_AXIS_CHARACTER_WIDTH,
+    ]
+  })
+  // The 20px title band already leaves 3px beside a 14px glyph.
+  return (
+    Math.max(Y_AXIS_CHARACTER_WIDTH, ...tickWidths) +
+    Y_AXIS_TICK_PADDING +
+    Y_AXIS_LABEL_BAND_WIDTH / 2
+  )
+}
+
+export function alignLeftYAxisTitles(layouts: TitleTrack[], yLabel?: string): void {
+  const distances = new Map<string, number>()
+  for (const track of layouts) {
+    let leftIndex = 0
+    for (const axis of track.yAxes) {
+      if (axis.side !== 'left') continue
+      const key = `${track.column}:${leftIndex++}`
+      distances.set(key, Math.max(distances.get(key) ?? 0, titleDistance(track, axis, yLabel)))
+    }
+  }
+  for (const track of layouts) {
+    let leftIndex = 0
+    for (const axis of track.yAxes) {
+      if (axis.side !== 'left') continue
+      axis.labelX = axis.x - distances.get(`${track.column}:${leftIndex++}`)!
+    }
+  }
+}

package/src/components/interaction/integerZoom.ts

@@ -0,0 +1,64 @@
+import { scaleLinear } from 'd3'
+
+export interface IntegerZoomOptions {
+  integerZoom?: boolean
+  timeUnit?: 's' | 'ms'
+}
+
+export function integerZoomTicks(
+  domain: [number, number],
+  count: number,
+  options: IntegerZoomOptions,
+) {
+  if (!options.integerZoom) return scaleLinear().domain(domain).ticks(count)
+  const factor = options.timeUnit === 's' ? 1 : 1000
+  return scaleLinear()
+    .domain(domain.map((value) => value * factor))
+    .ticks(count)
+    .filter(Number.isInteger)
+    .map((value) => value / factor)
+}
+
+export function formatIntegerZoomLabel(value: number): string {
+  return String(Math.round(value))
+}
+
+function stableInteger(value: number): number {
+  const rounded = Math.round(value)
+  return Math.abs(value - rounded) <= Number.EPSILON * Math.max(1, Math.abs(value)) * 16
+    ? rounded
+    : value
+}
+
+/** Align outwards in display units; all returned coordinates remain in seconds. */
+export function alignIntegerZoomDomain(
+  domain: [number, number],
+  options: IntegerZoomOptions,
+): [number, number] {
+  if (!options.integerZoom) return domain
+  const factor = options.timeUnit === 's' ? 1 : 1000
+  const start = stableInteger(Math.min(domain[0], domain[1]) * factor)
+  const end = stableInteger(Math.max(domain[0], domain[1]) * factor)
+  if (!Number.isSafeInteger(Math.floor(start)) || !Number.isSafeInteger(Math.ceil(end)))
+    return domain
+  const left = Math.floor(start)
+  return [left / factor, Math.max(left + 1, Math.ceil(end)) / factor]
+}
+
+/** Recover aligned endpoints after a D3 transform, tolerating floating-point round-off. */
+export function normalizeIntegerZoomDomain(
+  domain: [number, number],
+  options: IntegerZoomOptions,
+): [number, number] {
+  return alignIntegerZoomDomain(domain, options)
+}
+
+/** Translation snaps to the nearest unit so panning preserves the visible span. */
+export function alignIntegerPanDomain(
+  domain: [number, number],
+  options: IntegerZoomOptions,
+): [number, number] {
+  if (!options.integerZoom) return domain
+  const factor = options.timeUnit === 's' ? 1 : 1000
+  return [Math.round(domain[0] * factor) / factor, Math.round(domain[1] * factor) / factor]
+}

package/src/components/interaction/useWaveformViewport.ts

@@ -8,7 +8,8 @@ import type { WaveformChartEmit } from '../core/waveformChartTypes'
 import type { AnnotationSeriesCandidate } from '../annotation'
 import { tryReleasePointerCapture } from './pointerCapture'
 import { transitionViewportInteraction } from './viewportInteractionState'
-import { createViewportDomainSetter } from './viewportDomain'
+import { clampViewportDomain as clampDomain, createViewportDomainSetter } from './viewportDomain'
+import { alignIntegerPanDomain } from './integerZoom'
 import { constrainZoomDomain, transformForDomain } from './zoomConstraints'
 import { emitBoxZoomIntent } from './zoomEventPayload'
 interface ViewportContext {
@@ -92,14 +93,6 @@ export function useWaveformViewport(context: ViewportContext) {
       height: Math.abs(active.currentY - active.startY),
     }
   })
-  const clampDomain = (domain: [number, number], boundary: [number, number]): [number, number] => {
-    const span = domain[1] - domain[0]
-    const boundarySpan = boundary[1] - boundary[0]
-    if (span >= boundarySpan) return [...boundary]
-    if (domain[0] < boundary[0]) return [boundary[0], boundary[0] + span]
-    if (domain[1] > boundary[1]) return [boundary[1] - span, boundary[1]]
-    return domain
-  }
   const currentYDomains = (): Record<string, [number, number]> =>
     Object.fromEntries(
       trackLayouts.value
@@ -157,9 +150,12 @@ export function useWaveformViewport(context: ViewportContext) {
     const sourceXDomain = active.independent
       ? resolveInitialTrackDomain(track)
       : initialXDomain.value
-    const nextX = clampDomain(
-      [active.xDomain[0] - (dx / width) * xSpan, active.xDomain[1] - (dx / width) * xSpan],
-      sourceXDomain,
+    const nextX = alignIntegerPanDomain(
+      clampDomain(
+        [active.xDomain[0] - (dx / width) * xSpan, active.xDomain[1] - (dx / width) * xSpan],
+        sourceXDomain,
+      ),
+      props,
     )
     if (active.independent) {
       const nextTransforms = [...independentTransforms.value]

package/src/components/interaction/useWaveformZoom.ts

@@ -15,6 +15,7 @@ import { WHEEL_ZOOM_DEBOUNCE_MS, ZOOM_CONSTRAINTS } from '../core/constants'
 import type { TrackLayout } from '../core/types'
 import type { ResolvedWaveformChartProps, WaveformChartEmit } from '../core/waveformChartTypes'
 import { useAnimationFrameThrottle } from '../utils/useAnimationFrameThrottle'
+import { normalizeIntegerZoomDomain } from './integerZoom'
 import {
   constrainZoomDomain,
   resolveMinimumZoomSpan,
@@ -90,7 +91,8 @@ export function useWaveformZoom(context: ZoomContext) {
     const domain = event.transform
       .rescaleX(scaleLinear(initialXDomain.value, [0, innerWidth.value]))
       .domain()
-    emit('zoom-intent', { start: domain[0], end: domain[1], gesture: 'wheel' })
+    const [start, end] = normalizeIntegerZoomDomain(domain as [number, number], props)
+    emit('zoom-intent', { start, end, gesture: 'wheel' })
     scheduleZoomCommit()
   }
   const handleIndependentZoom = (
@@ -108,8 +110,8 @@ export function useWaveformZoom(context: ZoomContext) {
         .rescaleX(scaleLinear(resolveInitialTrackDomain(track), [0, track.width]))
         .domain()
       emit('zoom-intent', {
-        start: domain[0],
-        end: domain[1],
+        start: normalizeIntegerZoomDomain(domain as [number, number], props)[0],
+        end: normalizeIntegerZoomDomain(domain as [number, number], props)[1],
         trackIndex,
         seriesIds: track.seriesList.map((series) => series.id),
         gesture: 'wheel',
@@ -131,7 +133,7 @@ export function useWaveformZoom(context: ZoomContext) {
       const domain = transform
         .rescaleX(scaleLinear(initialXDomain.value, [0, innerWidth.value]))
         .domain()
-      emit('zoom-change', [domain[0], domain[1]])
+      emit('zoom-change', normalizeIntegerZoomDomain([domain[0], domain[1]], props))
     }
     if (!pendingIndependentZoomTransforms.size) return
     const nextTransforms = [...independentTransforms.value]

package/src/components/interaction/viewportDomain.ts

@@ -21,6 +21,18 @@ interface ViewportDomainContext {
   configureZoom: () => void
 }
 
+export function clampViewportDomain(
+  domain: [number, number],
+  boundary: [number, number],
+): [number, number] {
+  const span = domain[1] - domain[0]
+  const boundarySpan = boundary[1] - boundary[0]
+  if (span >= boundarySpan) return [...boundary]
+  if (domain[0] < boundary[0]) return [boundary[0], boundary[0] + span]
+  if (domain[1] > boundary[1]) return [boundary[1] - span, boundary[1]]
+  return domain
+}
+
 export function createViewportDomainSetter(context: ViewportDomainContext) {
   return (domain: [number, number], trackIndex?: number) => {
     if (!Number.isFinite(domain[0]) || !Number.isFinite(domain[1]) || domain[0] === domain[1])

package/src/components/interaction/zoomConstraints.ts

@@ -3,6 +3,7 @@ import { scaleLinear, zoomIdentity, type ZoomTransform } from 'd3'
 import type { WaveformPoint } from '../../types'
 import { pointSourceFromPoints, type WaveformPointSource } from '../../core/waveformPointSource'
 import { ZOOM_CONSTRAINTS } from '../core/constants'
+import { alignIntegerZoomDomain, type IntegerZoomOptions } from './integerZoom'
 
 interface PointSeriesSource {
   points: WaveformPoint[]
@@ -11,7 +12,7 @@ interface PointSeriesSource {
 
 export type ZoomSeriesGroup = readonly PointSeriesSource[]
 
-interface ZoomConstraintOptions {
+interface ZoomConstraintOptions extends IntegerZoomOptions {
   minZoomSpan?: number
   minVisiblePoints?: number
   maxZoomScale?: number | null
@@ -72,7 +73,7 @@ export function resolveMinimumZoomSpan(
   groups: readonly ZoomSeriesGroup[],
   options: ZoomConstraintOptions,
 ): number {
-  const normalized = normalizedBoundary(boundary)
+  const normalized = alignIntegerZoomDomain(normalizedBoundary(boundary), options)
   const boundarySpan = normalized[1] - normalized[0]
   if (!Number.isFinite(boundarySpan) || boundarySpan <= 0) return 0
   const configuredSpan =
@@ -88,7 +89,8 @@ export function resolveMinimumZoomSpan(
       : options.maxZoomScale !== null && configuredSpan === 0 && required === 0
         ? boundarySpan / ZOOM_CONSTRAINTS.DEFAULT_MAX_SCALE
         : 0
-  return Math.max(configuredSpan, pointSpan, scaleSpan)
+  const integerSpan = options.integerZoom ? (options.timeUnit === 's' ? 1 : 0.001) : 0
+  return Math.max(configuredSpan, pointSpan, scaleSpan, integerSpan)
 }
 
 function expandToMinimumPoints(
@@ -139,7 +141,7 @@ export function constrainZoomDomain(
   groups: readonly ZoomSeriesGroup[],
   options: ZoomConstraintOptions,
 ): [number, number] {
-  const normalized = normalizedBoundary(boundary)
+  const normalized = alignIntegerZoomDomain(normalizedBoundary(boundary), options)
   const boundarySpan = normalized[1] - normalized[0]
   if (!Number.isFinite(boundarySpan) || boundarySpan <= 0) return normalized
   if (Math.abs(domain[1] - domain[0]) >= boundarySpan * (1 - 1e-12)) return normalized
@@ -157,7 +159,7 @@ export function constrainZoomDomain(
   const span = Math.max(minimumSpan, Math.min(boundarySpan, expanded[1] - expanded[0]))
   const center = (expanded[0] + expanded[1]) / 2
   const start = Math.max(normalized[0], Math.min(center - span / 2, normalized[1] - span))
-  return [start, start + span]
+  return alignIntegerZoomDomain([start, start + span], options)
 }
 
 export function transformForDomain(

package/src/components/rendering/WaveformLegend.vue

@@ -93,7 +93,7 @@ function toggleSeries(seriesId: string) {
               :d="waveformLegendLinePath(item.lineType) ?? undefined"
               :stroke="item.color"
               :stroke-dasharray="waveformLineDasharray(item.lineStyle)"
-              stroke-width="2.5"
+              stroke-width="1"
               fill="none"
             />
             <path

package/src/components/rendering/WaveformSeriesLayer.vue

@@ -103,7 +103,7 @@ const renderedSeriesPaths = computed<RenderedSeriesPath[]>(() =>
 <style scoped>
 .waveform-track__line {
   fill: none;
-  stroke-width: 2.5;
+  stroke-width: 1;
   stroke-linejoin: round;
   stroke-linecap: round;
 }

package/src/components/rendering/WaveformTrack.css

@@ -10,8 +10,8 @@
 }
 
 .waveform-track__y-axis-label {
-  font-size: 12px;
-  font-weight: 500;
+  font-size: 14px;
+  font-weight: 600;
   pointer-events: none;
 }
 
@@ -83,6 +83,7 @@
 .waveform-track__axis-endpoint {
   fill: #667085;
   font-size: 11px;
+  font-weight: 700;
   pointer-events: none;
 }
 
@@ -90,6 +91,7 @@
   fill: #666;
   font-family: sans-serif;
   font-size: 10px;
+  font-weight: 700;
 }
 
 .waveform-track__axis path,
@@ -100,4 +102,5 @@
 .waveform-track__axis text {
   fill: #667085;
   font-size: 11px;
+  font-weight: 700;
 }