waveform-analysis 0.1.66 → 0.1.67

package/src/components/core/useWaveformPresentation.ts

@@ -93,6 +93,7 @@ export function useWaveformPresentation(context: PresentationContext) {
     return position === 'top' || position === 'bottom' ? 'horizontal' : 'vertical'
   }
 
+  const isEdgeCompact = computed(() => props.layoutPreset === 'edge-compact')
   const resolvedTitleText = computed(() => props.title?.text.trim() ?? '')
   const titleAreaReserved = computed(
     () =>
@@ -146,10 +147,17 @@ export function useWaveformPresentation(context: PresentationContext) {
   }))
   const titleLayout = computed(() =>
     calculateRotatedTitleLayout({
-      naturalWidth: measuredTitleWidth.value || estimatedTitleWidth.value,
+      naturalWidth:
+        isEdgeCompact.value && !titleIsRotated.value && measuredTitleHeight.value > 0
+          ? Math.min(
+              measuredTitleWidth.value || titleAvailableWidth.value,
+              titleAvailableWidth.value,
+            )
+          : measuredTitleWidth.value || estimatedTitleWidth.value,
       naturalHeight: measuredTitleHeight.value || titleFontSize.value * TITLE_LINE_HEIGHT,
       availableWidth: titleAvailableWidth.value,
       rotation: titleRotation.value,
+      edgeCompact: isEdgeCompact.value,
     }),
   )
   const titleAreaHeight = computed(() =>
@@ -159,13 +167,18 @@ export function useWaveformPresentation(context: PresentationContext) {
     typeof value === 'number' && Number.isFinite(value) && value >= 0 ? value : fallback
   const resolvedPlotMargin = computed(() => ({
     top: resolvePlotMargin(props.plotMargin.top, margin.top),
-    bottom: resolvePlotMargin(props.plotMargin.bottom, margin.bottom),
+    bottom: Math.max(
+      isEdgeCompact.value ? 44 : 0,
+      resolvePlotMargin(props.plotMargin.bottom, margin.bottom),
+    ),
   }))
   const chartTopMargin = computed(() => resolvedPlotMargin.value.top)
   const drawingHeight = computed(() =>
     Math.max(0, chartHeight.value - titleAreaHeight.value - paginationBandHeight.value),
   )
-  const xAxisTitleY = computed(() => Math.max(0, drawingHeight.value - X_AXIS_TITLE_BOTTOM_OFFSET))
+  const xAxisTitleY = computed(() =>
+    Math.max(0, drawingHeight.value - X_AXIS_TITLE_BOTTOM_OFFSET + (isEdgeCompact.value ? 3 : 0)),
+  )
   const innerHeight = computed(() =>
     Math.max(
       0,
@@ -202,6 +215,7 @@ export function useWaveformPresentation(context: PresentationContext) {
     chartHeight,
     containerStyle,
     isCleanView,
+    isEdgeCompact,
     isPresentationMode,
     resolvedZeroLine,
     legendBackgroundColor,

package/src/components/core/useWaveformYAxisLayout.ts

@@ -0,0 +1,140 @@
+import { computed, type ComputedRef } from 'vue'
+
+import { margin, MINIMUM_PLOT_WIDTH } from './constants'
+import { getGridGap, type NormalizedWaveformGridOptions } from './grid'
+import { buildYAxisSlots } from './layout'
+import type { DisplayTrack } from './types'
+import type { ResolvedWaveformChartProps } from './waveformChartTypes'
+import { resolveYAxisLayoutMetrics } from './yAxisLayoutMetrics'
+import { Y_AXIS_OUTER_PADDING } from './yAxisConstants'
+
+interface YAxisLayoutContext {
+  props: ResolvedWaveformChartProps
+  chartTracks: ComputedRef<DisplayTrack[]>
+  layoutTracks: ComputedRef<DisplayTrack[]>
+  chartWidth: ComputedRef<number>
+  gridOptions: ComputedRef<NormalizedWaveformGridOptions>
+  viewportYDomains: ComputedRef<Record<string, [number, number]>>
+  yAxisTickCount: ComputedRef<number>
+}
+
+export function useWaveformYAxisLayout(context: YAxisLayoutContext) {
+  const {
+    props,
+    chartTracks,
+    layoutTracks,
+    chartWidth,
+    gridOptions,
+    viewportYDomains,
+    yAxisTickCount,
+  } = context
+  const isEdgeCompact = computed(() => props.layoutPreset === 'edge-compact')
+  const showUnits = computed(() => !isEdgeCompact.value || props.unitDisplayMode === 'axis')
+  const yAxisMetrics = computed(() =>
+    resolveYAxisLayoutMetrics(
+      chartTracks.value,
+      props.overlayMode,
+      props.yDomain,
+      props.yDomains,
+      viewportYDomains.value,
+      props.axes?.y?.nice !== false,
+      yAxisTickCount.value,
+      props.displayMode === 'compact',
+      props.axes?.y?.upperPaddingRatio,
+      showUnits.value,
+    ),
+  )
+  const hasYAxisLabels = computed(() =>
+    chartTracks.value.some(
+      (track) =>
+        track.visibleSeries.length === 1 &&
+        Boolean(track.visibleSeries[0]?.name.trim() || props.yLabel),
+    ),
+  )
+  const hasVisibleWaveformData = computed(() =>
+    chartTracks.value.some((track) => track.visibleSeries.length > 0),
+  )
+  const chartLeftMargin = computed(() =>
+    Math.max(
+      margin.left,
+      hasYAxisLabels.value
+        ? yAxisMetrics.value.fullClearance
+        : hasVisibleWaveformData.value
+          ? yAxisMetrics.value.tickClearance
+          : 0,
+    ),
+  )
+  const yAxisSlots = computed(() =>
+    buildYAxisSlots(
+      layoutTracks.value.filter((track) => track.visibleSeries.length > 0),
+      props.overlayMode,
+      props.yDomain,
+      props.yDomains,
+      yAxisTickCount.value,
+      props.axes?.y?.nice !== false,
+      props.displayMode === 'compact',
+      viewportYDomains.value,
+      props.axes?.y?.upperPaddingRatio,
+      showUnits.value,
+    ),
+  )
+  const resolvedChartLeftMargin = computed(() =>
+    isEdgeCompact.value
+      ? margin.right + Math.max(0, compactLeftClearance.value - Y_AXIS_OUTER_PADDING)
+      : props.overlayMode === 'multi-axis'
+        ? Math.max(chartLeftMargin.value, yAxisSlots.value.clearance.left)
+        : chartLeftMargin.value,
+  )
+  // The same slot places the title and reserves its entire 20px band. The outer
+  // padding belongs to the chart edge, rather than the old fixed 48px minimum.
+  const compactLeftClearance = computed(() =>
+    !hasVisibleWaveformData.value
+      ? 0
+      : props.overlayMode === 'multi-axis' || hasYAxisLabels.value
+        ? yAxisSlots.value.clearance.left
+        : yAxisMetrics.value.tickClearance,
+  )
+  const chartRightMargin = computed(() =>
+    props.overlayMode === 'multi-axis'
+      ? Math.max(margin.right, yAxisSlots.value.clearance.right)
+      : margin.right,
+  )
+  const innerWidth = computed(() =>
+    Math.max(0, chartWidth.value - resolvedChartLeftMargin.value - chartRightMargin.value),
+  )
+  const yAxisLayout = computed(() => {
+    const baseGap = getGridGap(props.displayMode)
+    const columnCount = gridOptions.value.columnCount
+    const hasMultipleColumns = columnCount > 1
+    const fullGap = Math.max(
+      baseGap,
+      isEdgeCompact.value ? yAxisSlots.value.clearance.left : yAxisMetrics.value.fullClearance,
+    )
+    const tickGap = Math.max(baseGap, yAxisMetrics.value.tickClearance)
+    const plotWidth = (innerWidth.value - fullGap * Math.max(0, columnCount - 1)) / columnCount
+    const canReserveLabelClearance = plotWidth >= MINIMUM_PLOT_WIDTH
+    return {
+      horizontalGap:
+        props.overlayMode === 'multi-axis' && hasMultipleColumns && hasVisibleWaveformData.value
+          ? Math.max(baseGap, yAxisSlots.value.clearance.left + yAxisSlots.value.clearance.right)
+          : hasMultipleColumns && hasVisibleWaveformData.value
+            ? hasYAxisLabels.value && canReserveLabelClearance
+              ? fullGap
+              : tickGap
+            : baseGap,
+      hideSecondaryLabels:
+        props.overlayMode !== 'multi-axis' &&
+        hasMultipleColumns &&
+        hasYAxisLabels.value &&
+        !canReserveLabelClearance,
+    }
+  })
+  return {
+    yAxisMetrics,
+    yAxisSlots,
+    resolvedChartLeftMargin,
+    innerWidth,
+    yAxisLayout,
+    hasVisibleWaveformData,
+  }
+}

package/src/components/core/waveformChartTypes.ts

@@ -3,6 +3,8 @@ import type {
   WaveformAxesOptions,
   WaveformData,
   WaveformDisplayMode,
+  WaveformUnitDisplayMode,
+  WaveformLayoutPreset,
   WaveformFrameStyle,
   WaveformInteractionMode,
   WaveformLegendOptions,
@@ -18,6 +20,7 @@ import type {
   WaveformZeroLineOptions,
   WaveformZoomIntentPayload,
   WaveformZoomEndPayload,
+  WaveformPanEndPayload,
   WaveformZoomResetPayload,
 } from '../data/types'
 import type { WaveformGridOptions } from './grid'
@@ -26,6 +29,10 @@ export interface WaveformChartProps {
   data: WaveformData
   displayMode?: WaveformDisplayMode
   overlayMode?: WaveformOverlayMode
+  /** Default axis units; optional chart-wide single-series legend units. */
+  unitDisplayMode?: WaveformUnitDisplayMode
+  /** Default spacing or compact title/time labels with a separate pagination band. */
+  layoutPreset?: WaveformLayoutPreset
   width?: number
   height?: number
   xLabel?: string
@@ -36,6 +43,8 @@ export interface WaveformChartProps {
   /** Snap viewport endpoints outwards to integer X-axis display units. */
   integerZoom?: boolean
   pannable?: boolean
+  /** Global record bounds in seconds; enables horizontal panning beyond loaded data. */
+  panXDomain?: [number, number]
   minZoomSpan?: number
   minVisiblePoints?: number
   maxZoomScale?: number | null
@@ -68,6 +77,8 @@ export interface WaveformChartProps {
 type DefaultedProp =
   | 'displayMode'
   | 'overlayMode'
+  | 'unitDisplayMode'
+  | 'layoutPreset'
   | 'yLabel'
   | 'lineColor'
   | 'showTooltip'
@@ -97,6 +108,7 @@ export interface WaveformChartEmit {
   (event: 'zoom-intent', payload: WaveformZoomIntentPayload): void
   (event: 'zoom-change', domain: [number, number]): void
   (event: 'zoom-end', payload: WaveformZoomEndPayload): void
+  (event: 'pan-end', payload: WaveformPanEndPayload): void
   (event: 'zoom-reset', payload: WaveformZoomResetPayload): void
   (event: 'update:annotations', annotations: WaveformAnnotation[]): void
   (event: 'update:hidden-series-ids', ids: string[]): void

package/src/components/core/yAxisLayoutMetrics.ts

@@ -40,11 +40,20 @@ export function resolveYAxisLayoutMetrics(
   nice: boolean,
   tickCount: number,
   compact: boolean,
+  upperPaddingRatio = 0,
+  showUnits = true,
 ): YAxisLayoutMetrics {
   const axisText = chartTracks
     .filter((track) => track.visibleSeries.length > 0)
     .flatMap((track) =>
-      resolveRenderedYAxisSeriesGroups(track, overlayMode, yDomain, yDomains, viewportYDomains),
+      resolveRenderedYAxisSeriesGroups(
+        track,
+        overlayMode,
+        yDomain,
+        yDomains,
+        viewportYDomains,
+        upperPaddingRatio,
+      ),
     )
     .map(
       (group) =>
@@ -52,7 +61,7 @@ export function resolveYAxisLayoutMetrics(
           group.domain,
           nice,
           undefined,
-          group.seriesList[0]?.unit,
+          showUnits ? group.seriesList[0]?.unit : undefined,
           tickCount,
           compact,
         ).tickTextWidth,

package/src/components/data/types.ts

@@ -7,11 +7,14 @@
 export type {
   WaveformPoint,
   WaveformDisplayMode,
+  WaveformUnitDisplayMode,
+  WaveformLayoutPreset,
   WaveformOverlayMode,
   WaveformInteractionMode,
   WaveformXDomainStrategy,
   WaveformZoomIntentPayload,
   WaveformZoomEndPayload,
+  WaveformPanEndPayload,
   WaveformZoomResetPayload,
   WaveformAnnotationStyle,
   WaveformAnnotation,

package/src/components/interaction/interactionTarget.ts

@@ -0,0 +1,10 @@
+export function isEditableTarget(target: EventTarget | null): boolean {
+  return (
+    target instanceof Element &&
+    Boolean(
+      target.closest(
+        'button, input, select, textarea, [contenteditable]:not([contenteditable="false"])',
+      ),
+    )
+  )
+}

package/src/components/interaction/remoteViewport.ts

@@ -0,0 +1,53 @@
+import type { ResolvedWaveformChartProps } from '../core/waveformChartTypes'
+import {
+  constrainZoomDomain,
+  resolveMinimumZoomSpan,
+  type ZoomSeriesGroup,
+} from './zoomConstraints'
+
+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 remotePanBoundary(props: Pick<ResolvedWaveformChartProps, 'panXDomain'>) {
+  const domain = props.panXDomain
+  return domain && domain.every(Number.isFinite) && domain[0] < domain[1] ? domain : undefined
+}
+
+/** Restore remote windows without requiring points inside a not-yet-loaded interval. */
+export function restoreViewportDomain(
+  domain: [number, number],
+  baseDomain: [number, number],
+  groups: readonly ZoomSeriesGroup[],
+  props: ResolvedWaveformChartProps,
+): [number, number] {
+  const boundary = remotePanBoundary(props)
+  return boundary
+    ? clampViewportDomain(domain, boundary)
+    : constrainZoomDomain(domain, baseDomain, groups, props)
+}
+
+/** Wheel/box zoom keeps the remote position and uses loaded data for scale limits. */
+export function constrainViewportZoom(
+  domain: [number, number],
+  baseDomain: [number, number],
+  groups: readonly ZoomSeriesGroup[],
+  props: ResolvedWaveformChartProps,
+) {
+  const boundary = remotePanBoundary(props)
+  if (!boundary) return constrainZoomDomain(domain, baseDomain, groups, props)
+  return constrainZoomDomain(domain, boundary, [], {
+    ...props,
+    minVisiblePoints: 0,
+    maxZoomScale: null,
+    minZoomSpan: resolveMinimumZoomSpan(baseDomain, groups, props),
+  })
+}

package/src/components/interaction/useWaveformViewport.ts

@@ -2,17 +2,17 @@ import { pointer, zoomIdentity, type ZoomTransform } from 'd3'
 import { computed, nextTick, shallowRef, type ComputedRef, type Ref, type ShallowRef } from 'vue'
 import { MINIMUM_SELECTION_SIZE } from '../core/constants'
 import type { DisplayTrack, TrackLayout } from '../core/types'
-import { hasFixedYDomainForTrack } from '../core/yDomain'
 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'
-import { clampViewportDomain as clampDomain, createViewportDomainSetter } from './viewportDomain'
-import { alignIntegerPanDomain } from './integerZoom'
-import { constrainZoomDomain, transformForDomain } from './zoomConstraints'
+import { createViewportDomainSetter } from './viewportDomain'
+import { constrainViewportZoom } from './remoteViewport'
+import { createViewportPan } from './viewportPan'
+import { transformForDomain } from './zoomConstraints'
 import { emitBoxZoomIntent } from './zoomEventPayload'
-interface ViewportContext {
+export interface ViewportContext {
   props: ResolvedWaveformChartProps
   emit: WaveformChartEmit
   selection: Ref<ViewportSelectionState | null>
@@ -141,54 +141,7 @@ export function useWaveformViewport(context: ViewportContext) {
       trackLayouts.value.find((item) => item.hasVisibleSeries)
     if (track) beginViewportDrag(event, track.index, false)
   }
-  const applyPan = (active: ViewportSelectionState, track: TrackLayout) => {
-    const width = track.width || 1
-    const height = track.height || 1
-    const dx = active.currentX - active.startX
-    const dy = active.currentY - active.startY
-    const xSpan = active.xDomain[1] - active.xDomain[0]
-    const sourceXDomain = active.independent
-      ? resolveInitialTrackDomain(track)
-      : initialXDomain.value
-    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]
-      nextTransforms[track.index] = transformForDomain(nextX, sourceXDomain, width)
-      independentTransforms.value = nextTransforms
-    } else {
-      sharedTransform.value = transformForDomain(nextX, sourceXDomain, innerWidth.value)
-    }
-    const targets = active.independent
-      ? [track]
-      : trackLayouts.value.filter((target) => target.hasVisibleSeries)
-    const nextIndependentDomains = { ...independentYDomains.value }
-    const nextSharedDomains = { ...sharedYDomains.value }
-    targets.forEach((target) => {
-      const chartTrack = chartTracks.value.find((item) => item.id === target.id)
-      if (chartTrack && hasFixedYDomainForTrack(chartTrack, props.yDomain, props.yDomains)) {
-        return
-      }
-      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]
-      const nextY = clampDomain(
-        [source[0] + (dy / height) * ySpan, source[1] + (dy / height) * ySpan],
-        boundary,
-      )
-      if (active.independent) nextIndependentDomains[target.index] = nextY
-      else nextSharedDomains[key] = nextY
-    })
-    if (active.independent) independentYDomains.value = nextIndependentDomains
-    else sharedYDomains.value = nextSharedDomains
-    emit('zoom-change', nextX)
-  }
+  const applyPan = createViewportPan(context)
   const updateViewportDrag = (event: PointerEvent) => {
     if (isPresentationMode.value) return
     const active = selection.value
@@ -238,7 +191,7 @@ export function useWaveformViewport(context: ViewportContext) {
     const groups = active.independent
       ? [track.seriesList]
       : trackLayouts.value.filter((item) => item.hasVisibleSeries).map((item) => item.seriesList)
-    const xDomain = constrainZoomDomain(
+    const xDomain = constrainViewportZoom(
       [track.xScale.invert(left), track.xScale.invert(right)],
       baseXDomain,
       groups,
@@ -320,7 +273,16 @@ export function useWaveformViewport(context: ViewportContext) {
     activeOverlay.value = undefined
     event.preventDefault()
     if (completed.kind === 'pan') {
-      applyPan(completed, track)
+      const domain = applyPan(completed, track)
+      if (domain.some((value, index) => Math.abs(value - completed.xDomain[index]) > 1e-12)) {
+        emit('pan-end', {
+          start: domain[0],
+          end: domain[1],
+          ...(completed.independent
+            ? { trackIndex: track.index, seriesIds: track.seriesList.map((series) => series.id) }
+            : {}),
+        })
+      }
       void nextTick(configureZoom)
       return
     }

package/src/components/interaction/useWaveformZoom.ts

@@ -15,13 +15,9 @@ 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 { constrainViewportZoom } from './remoteViewport'
 import { normalizeIntegerZoomDomain } from './integerZoom'
-import {
-  constrainZoomDomain,
-  resolveMinimumZoomSpan,
-  transformForDomain,
-  type ZoomSeriesGroup,
-} from './zoomConstraints'
+import { resolveMinimumZoomSpan, transformForDomain, type ZoomSeriesGroup } from './zoomConstraints'
 import {
   emitIndependentWheelZoomEnds,
   emitSharedWheelZoomEnd,
@@ -240,7 +236,11 @@ export function useWaveformZoom(context: ZoomContext) {
       number,
       number,
     ]
-    return transformForDomain(constrainZoomDomain(requested, domain, groups, props), domain, width)
+    return transformForDomain(
+      constrainViewportZoom(requested, domain, groups, props),
+      domain,
+      width,
+    )
   }
   const canZoomTrack = (track: TrackLayout): boolean => {
     const minimum = Number(props.minVisiblePoints)

package/src/components/interaction/viewportDomain.ts

@@ -4,7 +4,8 @@ import type { ZoomTransform } from 'd3'
 import type { TrackLayout } from '../core/types'
 import type { ResolvedWaveformChartProps } from '../core/waveformChartTypes'
 import type { AnnotationSeriesCandidate } from '../annotation'
-import { constrainZoomDomain, transformForDomain } from './zoomConstraints'
+import { transformForDomain } from './zoomConstraints'
+import { constrainViewportZoom } from './remoteViewport'
 
 interface ViewportDomainContext {
   props: ResolvedWaveformChartProps
@@ -21,17 +22,7 @@ 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 { clampViewportDomain } from './remoteViewport'
 
 export function createViewportDomainSetter(context: ViewportDomainContext) {
   return (domain: [number, number], trackIndex?: number) => {
@@ -49,7 +40,12 @@ export function createViewportDomainSetter(context: ViewportDomainContext) {
         const track = context.trackLayouts.value.find((item) => item.index === index)
         if (!track) return
         const boundary = context.resolveInitialTrackDomain(track)
-        const constrained = constrainZoomDomain(domain, boundary, [track.seriesList], context.props)
+        const constrained = constrainViewportZoom(
+          domain,
+          boundary,
+          [track.seriesList],
+          context.props,
+        )
         nextTransforms[index] = transformForDomain(constrained, boundary, track.width)
       })
       context.independentTransforms.value = nextTransforms
@@ -58,7 +54,7 @@ export function createViewportDomainSetter(context: ViewportDomainContext) {
       const groups = context.trackLayouts.value
         .filter((track) => track.hasVisibleSeries)
         .map((track) => track.seriesList)
-      const constrained = constrainZoomDomain(domain, boundary, groups, context.props)
+      const constrained = constrainViewportZoom(domain, boundary, groups, context.props)
       context.sharedTransform.value = transformForDomain(
         constrained,
         boundary,

package/src/components/interaction/viewportPan.ts

@@ -0,0 +1,82 @@
+import type { TrackLayout } from '../core/types'
+import { hasFixedYDomainForTrack } from '../core/yDomain'
+import type { ViewportSelectionState } from '../core/waveformChartTypes'
+import type { ViewportContext } from './useWaveformViewport'
+import { clampViewportDomain as clampDomain } from './viewportDomain'
+import { alignIntegerPanDomain } from './integerZoom'
+import { remotePanBoundary } from './remoteViewport'
+import { transformForDomain } from './zoomConstraints'
+
+export function createViewportPan(context: ViewportContext) {
+  const {
+    props,
+    emit,
+    resolveInitialTrackDomain,
+    initialXDomain,
+    independentTransforms,
+    sharedTransform,
+    innerWidth,
+    trackLayouts,
+    chartTracks,
+    independentYDomains,
+    sharedYDomains,
+  } = context
+  const applyPan = (active: ViewportSelectionState, track: TrackLayout) => {
+    const width = track.width || 1
+    const height = track.height || 1
+    const dx = active.currentX - active.startX
+    const dy = active.currentY - active.startY
+    const xSpan = active.xDomain[1] - active.xDomain[0]
+    const sourceXDomain = active.independent
+      ? resolveInitialTrackDomain(track)
+      : initialXDomain.value
+    const boundary = remotePanBoundary(props) ?? sourceXDomain
+    const nextX = clampDomain(
+      alignIntegerPanDomain(
+        clampDomain(
+          [active.xDomain[0] - (dx / width) * xSpan, active.xDomain[1] - (dx / width) * xSpan],
+          boundary,
+        ),
+        props,
+      ),
+      boundary,
+    )
+    if (active.independent) {
+      const nextTransforms = [...independentTransforms.value]
+      nextTransforms[track.index] = transformForDomain(nextX, sourceXDomain, width)
+      independentTransforms.value = nextTransforms
+    } else {
+      sharedTransform.value = transformForDomain(nextX, sourceXDomain, innerWidth.value)
+    }
+    if (remotePanBoundary(props)) {
+      emit('zoom-change', nextX)
+      return nextX
+    }
+    const targets = active.independent
+      ? [track]
+      : trackLayouts.value.filter((target) => target.hasVisibleSeries)
+    const nextIndependentDomains = { ...independentYDomains.value }
+    const nextSharedDomains = { ...sharedYDomains.value }
+    targets.forEach((target) => {
+      const chartTrack = chartTracks.value.find((item) => item.id === target.id)
+      if (chartTrack && hasFixedYDomainForTrack(chartTrack, props.yDomain, props.yDomains)) {
+        return
+      }
+      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]
+      const nextY = clampDomain(
+        [source[0] + (dy / height) * ySpan, source[1] + (dy / height) * ySpan],
+        boundary,
+      )
+      if (active.independent) nextIndependentDomains[target.index] = nextY
+      else nextSharedDomains[key] = nextY
+    })
+    if (active.independent) independentYDomains.value = nextIndependentDomains
+    else sharedYDomains.value = nextSharedDomains
+    emit('zoom-change', nextX)
+    return nextX
+  }
+  return applyPan
+}

package/src/components/rendering/WaveformLegend.vue

@@ -18,11 +18,13 @@ interface Props {
   width: number
   height: number
   interactive?: boolean
+  showUnits?: boolean
   hiddenSeriesIds?: string[]
 }
 
 const props = withDefaults(defineProps<Props>(), {
   interactive: false,
+  showUnits: false,
   hiddenSeriesIds: () => [],
 })
 const emit = defineEmits<{
@@ -30,6 +32,11 @@ const emit = defineEmits<{
 }>()
 const hiddenSeriesIdSet = computed(() => new Set(props.hiddenSeriesIds))
 
+function legendLabel(series: DisplaySeries): string {
+  const unit = series.unit?.trim()
+  return props.showUnits && unit && unit !== '--' ? `${series.name} (${unit})` : series.name
+}
+
 function isHidden(seriesId: string): boolean {
   return hiddenSeriesIdSet.value.has(seriesId)
 }
@@ -113,7 +120,9 @@ function toggleSeries(seriesId: string) {
               transform="translate(13 8)"
             />
           </svg>
-          <span class="waveform-legend__label" :title="item.name">{{ item.name }}</span>
+          <span class="waveform-legend__label" :title="legendLabel(item)">{{
+            legendLabel(item)
+          }}</span>
         </button>
       </div>
     </div>