waveform-analysis 0.1.70 → 0.1.72

package/src/components/core/trackLayoutBuilder.ts

@@ -1,3 +1,6 @@
+import { withMaximumTick, type YAxisPaddingOptions } from './yAxisPadding'
+import { selectSeriesRenderSourcePoints } from '../../core/rendering'
+import { pointSourceFromPoints } from '../../core/waveformPointSource'
 import {
   curveStep,
   curveStepAfter,
@@ -8,10 +11,7 @@ import {
   type ZoomTransform,
 } from 'd3'
 
-import {
-  selectSeriesRenderPoints,
-  type ResolvedWaveformRenderingOptions,
-} from '../../core/rendering'
+import { type ResolvedWaveformRenderingOptions } from '../../core/rendering'
 import type {
   WaveformDisplayMode,
   WaveformOverlayMode,
@@ -36,6 +36,7 @@ import type { DisplayTrack, TrackLayout, WaveformYAxisLayout } from './types'
 import { applyXDomainStrategy } from './xDomain'
 import { alignLeftYAxisTitles } from './yAxisTitleLayout'
 import { measureYAxisTextWidth } from './yAxisTextWidth'
+import { resolveYAxisLabelBandWidth } from './yAxisLabelStyle'
 import {
   alignIntegerZoomDomain,
   normalizeIntegerZoomDomain,
@@ -43,7 +44,6 @@ import {
   formatIntegerZoomLabel,
 } from '../interaction/integerZoom'
 import {
-  Y_AXIS_LABEL_BAND_WIDTH,
   Y_AXIS_LABEL_GAP,
   Y_AXIS_OUTER_PADDING,
   Y_AXIS_RIGHT_LABEL_OFFSET,
@@ -61,6 +61,7 @@ export interface BuildTrackLayoutsOptions {
   overlayMode: WaveformOverlayMode
   independentTransforms: ZoomTransform[]
   sharedZoomDomain: [number, number]
+  effectiveXDomains?: Record<string, [number, number]>
   initialXDomain?: [number, number]
   initialXDomains?: Record<string, [number, number]>
   xDomainStrategy?: WaveformXDomainStrategy
@@ -72,6 +73,7 @@ export interface BuildTrackLayoutsOptions {
   xAxisLabelFormatter?: WaveformXAxisLabelFormatter
   yAxisSplitNumber?: number
   yAxisNice?: boolean
+  yAxisPadding?: YAxisPaddingOptions
   yAxisUpperPaddingRatio?: number
   rendering: ResolvedWaveformRenderingOptions
   /** Latest sampling result for SVG lines only; source series remain complete for interaction. */
@@ -80,7 +82,7 @@ export interface BuildTrackLayoutsOptions {
   yAxisLabelX: number
   yLabel?: string
   yAxisSlots?: readonly YAxisSlot[]
-  showCompactEmptyTracks: boolean
+  showEmptyTracks: boolean
   useNonEmptyBottomTracks?: boolean
   compactYAxisLayout?: boolean
   showAxisUnits?: boolean
@@ -91,6 +93,7 @@ function resolveIndependentXDomain(
   seriesId: string,
   options: BuildTrackLayoutsOptions,
 ): [number, number] {
+  if (options.effectiveXDomains?.[track.id]) return options.effectiveXDomains[track.id]
   const strategy = options.xDomainStrategy ?? { type: 'data' }
   const explicitDomain =
     options.initialXDomains?.[track.id] ??
@@ -115,13 +118,12 @@ export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayou
 
   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 []
+    if (!cell.series && !options.showEmptyTracks) return []
     const displayTrack: DisplayTrack = cell.series ?? {
       id: `empty-grid-slot-${cell.slotIndex}`,
       series: [],
       visibleSeries: [],
-      xDomain: [0, 1],
+      xDomain: options.initialXDomain ?? options.sharedZoomDomain,
       yDomain: [0, 1],
     }
     const hasVisibleSeries = !isEmpty && displayTrack.visibleSeries.length > 0
@@ -145,7 +147,7 @@ export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayou
       options.fixedYDomain,
       options.fixedYDomains,
       options.yDomains,
-      options.yAxisUpperPaddingRatio,
+      options.yAxisPadding ?? options.yAxisUpperPaddingRatio,
     )
     const sideIndexes = { left: 0, right: 0 }
     const sideOffsets = { left: 0, right: 0 }
@@ -155,7 +157,13 @@ export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayou
       const resolvedTicks = resolveYAxisTicks(group.domain, tickCount, options.yAxisNice !== false)
       const scale = scaleLinear(resolvedTicks.domain, [cell.plotHeight, 0])
       const majorTicks = resolvedTicks.values
-      const tickValues = majorTicks
+      const maximumTick =
+        group.maximumTick !== undefined &&
+        group.maximumTick >= resolvedTicks.domain[0] &&
+        group.maximumTick <= resolvedTicks.domain[1]
+          ? group.maximumTick
+          : undefined
+      const tickValues = withMaximumTick(majorTicks, maximumTick)
       const { tickTextWidth } = axisTextMetrics(
         scale.domain() as [number, number],
         false,
@@ -167,7 +175,7 @@ export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayou
         tickTextWidth +
         Y_AXIS_TICK_PADDING +
         Y_AXIS_LABEL_GAP +
-        Y_AXIS_LABEL_BAND_WIDTH +
+        resolveYAxisLabelBandWidth(options.yAxisPadding?.labelTextStyle) +
         Y_AXIS_OUTER_PADDING
       const slot = options.yAxisSlots?.find(
         (candidate) => candidate.side === group.side && candidate.sideIndex === sideIndex,
@@ -178,7 +186,10 @@ export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayou
           ? -sideOffsets.left
           : cell.width + sideOffsets.right
       const labelDistance =
-        tickTextWidth + Y_AXIS_TICK_PADDING + Y_AXIS_LABEL_GAP + Y_AXIS_LABEL_BAND_WIDTH / 2
+        tickTextWidth +
+        Y_AXIS_TICK_PADDING +
+        Y_AXIS_LABEL_GAP +
+        resolveYAxisLabelBandWidth(options.yAxisPadding?.labelTextStyle) / 2
       const labelX =
         (slot
           ? (group.side === 'left' ? 0 : cell.width) + slot.labelOffset
@@ -191,6 +202,7 @@ export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayou
         x,
         labelX,
         scale,
+        maximumTick,
         majorTicks,
         minorTicks: buildMinorTicks(majorTicks, 2),
         tickValues,
@@ -207,7 +219,11 @@ export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayou
     )
     const xAxisLabelFormatter =
       options.xAxisLabelFormatter ?? (options.integerZoom ? formatIntegerZoomLabel : undefined)
-    const yMajorTicks = yAxes[0]?.majorTicks ?? []
+    const yMajorTicks =
+      yAxes[0]?.majorTicks ??
+      (isEmpty
+        ? fallbackYScale.ticks(resolveYAxisTickCount(cell.plotHeight, options.yAxisSplitNumber))
+        : [])
     const yAxisTickValues = yAxes[0]?.tickValues ?? []
     const domain = xScale.domain() as [number, number]
     const endpointLabels = {
@@ -225,8 +241,8 @@ export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayou
         axis.seriesList.some((series) => series.id === trackSeries.id),
       )
       const seriesYScale = yAxis?.scale ?? yScale
-      const renderPoints = selectSeriesRenderPoints(
-        trackSeries.points,
+      const renderPoints = selectSeriesRenderSourcePoints(
+        trackSeries.source ?? pointSourceFromPoints(trackSeries.points),
         domain,
         cell.width,
         options.rendering,
@@ -278,7 +294,7 @@ export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayou
       xAxisLabelFormatter,
       xMinorTicks: buildMinorTicks(xMajorTicks, 3, domain),
       yMajorTicks,
-      yMinorTicks: yAxes[0]?.minorTicks ?? [],
+      yMinorTicks: yAxes[0]?.minorTicks ?? (isEmpty ? buildMinorTicks(yMajorTicks, 2) : []),
       yAxisTickValues,
       xAxisTickValues,
       endpointLabels,
@@ -297,6 +313,7 @@ export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayou
   })
 
   alignLeftYAxisTitles(layouts, options.yLabel, {
+    labelTextStyle: options.yAxisPadding?.labelTextStyle,
     showUnits: options.showAxisUnits,
     compact: options.compactYAxisLayout,
     measureTextWidth: options.compactYAxisLayout ? measureYAxisTextWidth : undefined,

package/src/components/core/trackPagination.ts

@@ -27,14 +27,14 @@ export const createFrameNumberResolver =
     getFrameNumbers: () => Record<string, string | number> | undefined,
     getTracks: () => DisplayTrack[],
   ) =>
-  (trackId: string): string | number | undefined => {
+  (trackId: string, slotIndex = 0): string | number | undefined => {
     const tracks = getTracks()
     const trackIndex = tracks.findIndex((track) => track.id === trackId)
     return resolveTrackFrameNumber(
       getFrameNumber(),
       getFrameNumbers(),
-      tracks.length,
-      trackIndex >= 0 ? trackIndex : 0,
+      Math.max(tracks.length, slotIndex + 1),
+      trackIndex >= 0 ? trackIndex : slotIndex,
       trackId,
     )
   }

package/src/components/core/types.ts

@@ -27,6 +27,7 @@ export interface DisplaySeries {
   points: WaveformPoint[]
   source?: WaveformPointSource
   xDomain: [number, number]
+  rawYMaximum?: number
   yDomain: [number, number]
   hasErrorPoints: boolean
 }
@@ -38,6 +39,7 @@ export interface DisplayTrack {
   /** Series currently participating in layout, rendering, and interaction. */
   visibleSeries: DisplaySeries[]
   xDomain: [number, number]
+  rawYMaximum?: number
   yDomain: [number, number]
 }
 
@@ -51,6 +53,7 @@ export interface TrackSeriesPath {
 }
 
 export interface WaveformYAxisLayout {
+  maximumTick?: number
   index: number
   side: 'left' | 'right'
   x: number

package/src/components/core/useWaveformChartController.ts

@@ -1,7 +1,13 @@
+import { chartExportOptions } from '../controls/chartExportOptions'
+import { useChartImageExport } from '../controls/useChartImageExport'
+import { useControlMode } from '../controls/useControlMode'
+import { useChartCommands } from '../controls/useChartCommands'
 import { zoomIdentity, type ZoomTransform } from 'd3'
 import {
   computed,
   reactive,
+  nextTick,
+  onBeforeUnmount,
   markRaw,
   ref,
   shallowReactive,
@@ -44,9 +50,15 @@ function assignElement<T extends Element>(
 }
 
 export function useWaveformChartController(
-  props: ResolvedWaveformChartProps,
+  inputProps: ResolvedWaveformChartProps,
   emit: WaveformChartEmit,
 ) {
+  const mode = useControlMode(inputProps, emit)
+  const props = reactive({
+    ...toRefs(inputProps),
+    interactionMode: mode.mode,
+  }) as ResolvedWaveformChartProps
+  const boundaries = shallowRef<Record<string, [number, number]>>({})
   const container = ref<HTMLDivElement>()
   const svgElement = ref<SVGSVGElement>()
   const titleMeasureElement = ref<HTMLSpanElement>()
@@ -137,6 +149,7 @@ export function useWaveformChartController(
     independentYDomains,
     annotationInteraction: markRaw(annotationInteraction),
     linePointOverrides,
+    boundaries,
   })
   const {
     chartSeries,
@@ -164,7 +177,7 @@ export function useWaveformChartController(
     presentation.titleAreaStyle,
   )
 
-  useWaveformRenderSampling({
+  const sampling = useWaveformRenderSampling({
     props,
     emit,
     instanceId: clipPathId,
@@ -180,13 +193,7 @@ export function useWaveformChartController(
   watchEffect(() => {
     paginationBandHeight.value =
       props.layoutPreset === 'edge-compact'
-        ? resolveCompactPaginationBand(
-            paginationVisible.value,
-            chartWidth.value,
-            pageCount.value,
-            resolvedChartLeftMargin.value + innerWidth.value / 2,
-            layout.resolvedXLabel.value,
-          )
+        ? resolveCompactPaginationBand(paginationVisible.value)
         : gridOptions.value.showPagination && pageCount.value > 1 && chartWidth.value <= 520
           ? 40
           : 0
@@ -235,6 +242,7 @@ export function useWaveformChartController(
   })
 
   const viewport = useWaveformViewport({
+    clearBoundaries: (index) => commands.clearBoundaries(index),
     props,
     emit,
     selection,
@@ -278,7 +286,50 @@ export function useWaveformChartController(
     resolveTrackAtPointer: annotations.resolveTrackAtPointer,
   })
 
+  const cancelControls = () => {
+    viewport.cancelViewportDrag()
+    zoom.cancelPendingZoom()
+    hover.clearHover()
+    annotations.cancelAnnotation()
+  }
+  const commands = useChartCommands({
+    props,
+    emit,
+    layout,
+    mode,
+    boundaries,
+    independentTransforms,
+    sharedTransform,
+    independentYDomains,
+    sharedYDomains,
+    cancel: cancelControls,
+    configure: zoom.configureZoom,
+    legacyReset: viewport.resetViewport,
+    legacySet: viewport.setViewportDomain,
+  })
+  watch(
+    [mode.mode, () => props.zoomable, () => props.pannable, () => props.annotationsVisible],
+    cancelControls,
+    { flush: 'sync' },
+  )
+  watch([currentPage, () => props.displayMode], () => {
+    boundaries.value = {}
+    cancelControls()
+  })
+  watch(
+    [
+      () => props.initialXDomain,
+      () => props.initialXDomains,
+      hiddenSeriesIdSet,
+      () => props.xDomainStrategy,
+    ],
+    commands.restoreInitialBoundaries,
+    { deep: true },
+  )
+  onBeforeUnmount(cancelControls)
+
   const lifecycle = useWaveformChartLifecycle({
+    preserveFullViewport: () => Object.keys(boundaries.value).length > 0,
     props,
     emit,
     container,
@@ -323,7 +374,39 @@ export function useWaveformChartController(
     clearZoomBindings: zoom.clearZoomBindings,
   })
   handleBeforeDataReferenceChange = lifecycle.handleBeforeDataReferenceChange
-  handleDataReferenceChange = lifecycle.handleDataReferenceChange
+  handleDataReferenceChange = () => {
+    boundaries.value = {}
+    viewport.cancelViewportDrag()
+    lifecycle.handleDataReferenceChange()
+    void nextTick(zoom.configureZoom)
+  }
+
+  const imageExport = useChartImageExport({
+    container: () => container.value,
+    svg: () => svgElement.value,
+    size: () => ({
+      width: chartWidth.value,
+      height: chartHeight.value,
+      titleHeight: titleAreaHeight.value,
+    }),
+    version: () => [
+      props.data,
+      JSON.stringify({
+        ...chartExportOptions(props),
+        hidden: [...hiddenSeriesIdSet.value],
+        width: chartWidth.value,
+        height: chartHeight.value,
+        titleHeight: titleAreaHeight.value,
+        page: currentPage.value,
+        shared: sharedTransform.value,
+        independent: independentTransforms.value,
+        sharedY: sharedYDomains.value,
+        independentY: independentYDomains.value,
+        boundaries: boundaries.value,
+      }),
+    ],
+    ready: sampling.ready,
+  })
 
   return reactive({
     ...toRefs(props),
@@ -335,6 +418,8 @@ export function useWaveformChartController(
     ...annotations,
     ...viewport,
     ...hover,
+    ...commands,
+    ...imageExport,
     margin,
     getPageSize,
     currentPage,

package/src/components/core/useWaveformChartLifecycle.ts

@@ -1,3 +1,5 @@
+import { useWaveformMeasurements } from './useWaveformMeasurements'
+import { useWaveformViewportRestore } from './useWaveformViewportRestore'
 import { zoomIdentity, type ZoomTransform } from 'd3'
 import {
   nextTick,
@@ -13,12 +15,10 @@ import type { AnnotationSeriesCandidate, useWaveformAnnotationInteraction } from
 import type { NormalizedWaveformGridOptions } from './grid'
 import type { DisplaySeries, DisplayTrack, TrackLayout } from './types'
 import type { ResolvedWaveformChartProps, WaveformChartEmit } from './waveformChartTypes'
-import { transformForDomain } from '../interaction/zoomConstraints'
-import { remotePanBoundary, restoreViewportDomain } from '../interaction/remoteViewport'
 import { isEditableTarget } from '../interaction/interactionTarget'
-import { seriesIdentity } from '../interaction/zoomEventPayload'
 
-interface LifecycleContext {
+export interface LifecycleContext {
+  preserveFullViewport?: () => boolean
   props: ResolvedWaveformChartProps
   emit: WaveformChartEmit
   container: Ref<HTMLDivElement | undefined>
@@ -64,19 +64,10 @@ interface LifecycleContext {
 }
 
 export function useWaveformChartLifecycle(context: LifecycleContext) {
+  useWaveformMeasurements(context)
   const {
     props,
     emit,
-    container,
-    titleMeasureElement,
-    resizeObserver,
-    observedWidth,
-    observedHeight,
-    measuredTitleWidth,
-    measuredTitleHeight,
-    resolvedTitleText,
-    titleAreaReserved,
-    titleMeasureStyle,
     spacePressed,
     pointerInsideChart,
     currentPage,
@@ -85,18 +76,13 @@ export function useWaveformChartLifecycle(context: LifecycleContext) {
     gridOptions,
     chartSeries,
     chartTracks,
-    trackLayouts,
     innerWidth,
     innerHeight,
-    sharedZoomDomain,
-    initialXDomain,
-    sharedTransform,
     activeInteractionMode,
     hiddenSeriesIdSet,
     internalHiddenSeriesIds,
     independentTransforms,
     independentYDomains,
-    resolveInitialTrackDomain,
     annotationInteraction,
     editorSeriesOptions,
     isPresentationMode,
@@ -110,6 +96,10 @@ export function useWaveformChartLifecycle(context: LifecycleContext) {
   } = context
 
   function handleInteractionKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      cancelViewportDrag()
+      cancelAnnotation()
+    }
     if (
       isPresentationMode.value ||
       event.code !== 'Space' ||
@@ -142,68 +132,8 @@ export function useWaveformChartLifecycle(context: LifecycleContext) {
     emit('page-change', nextPage, pageCount.value)
   }
 
-  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 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 =
-      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()
-    })
-  }
+  const { handleBeforeDataReferenceChange, handleDataReferenceChange } =
+    useWaveformViewportRestore(context)
 
   watch(
     [
@@ -347,45 +277,15 @@ export function useWaveformChartLifecycle(context: LifecycleContext) {
     { deep: true },
   )
 
-  function measureTitle() {
-    if (!titleAreaReserved.value || !titleMeasureElement.value) {
-      measuredTitleWidth.value = 0
-      measuredTitleHeight.value = 0
-      return
-    }
-    const bounds = titleMeasureElement.value.getBoundingClientRect()
-    measuredTitleWidth.value = titleMeasureElement.value.scrollWidth || bounds.width
-    measuredTitleHeight.value = titleMeasureElement.value.scrollHeight || bounds.height
-  }
-
-  watch(
-    [resolvedTitleText, titleAreaReserved, titleMeasureStyle],
-    async () => {
-      measuredTitleWidth.value = 0
-      measuredTitleHeight.value = 0
-      await nextTick()
-      measureTitle()
-    },
-    { immediate: true },
-  )
-
   onMounted(() => {
     window.addEventListener('keydown', handleInteractionKeyDown)
     window.addEventListener('keyup', handleInteractionKeyUp)
-    if (!container.value) return
-    resizeObserver.value = new ResizeObserver(([entry]) => {
-      observedWidth.value = Math.max(0, entry?.contentRect.width ?? 0)
-      observedHeight.value = Math.max(0, entry?.contentRect.height ?? 0)
-      void nextTick(measureTitle)
-    })
-    resizeObserver.value.observe(container.value)
   })
 
   onBeforeUnmount(() => {
     window.removeEventListener('keydown', handleInteractionKeyDown)
     window.removeEventListener('keyup', handleInteractionKeyUp)
     cancelPendingHover()
-    resizeObserver.value?.disconnect()
     clearZoomBindings()
     editorSeriesOptions.value = []
   })

package/src/components/core/useWaveformData.ts

@@ -25,6 +25,7 @@ export interface PreparedWaveformSeries {
   points: WaveformPoint[]
   source: WaveformPointSource
   xDomain: [number, number]
+  rawYMaximum?: number
   yDomain: [number, number]
   hasErrorPoints: boolean
 }
@@ -48,6 +49,7 @@ export function prepareWaveformSeries(data: WaveformData): PreparedWaveformSerie
           ? [sourceMetrics.yMinimum, sourceMetrics.yMaximum]
           : [],
       ),
+      rawYMaximum: Number.isFinite(sourceMetrics.yMaximum) ? sourceMetrics.yMaximum : undefined,
       hasErrorPoints: sourceMetrics.hasErrorPoints,
     }
   })

package/src/components/core/useWaveformLayout.ts

@@ -20,6 +20,7 @@ import { resolveViewportYDomains } from './yAxisLayoutMetrics'
 import { useWaveformYAxisLayout } from './useWaveformYAxisLayout'
 import type { useWaveformAnnotationInteraction } from '../annotation'
 interface LayoutContext {
+  boundaries?: ShallowRef<Record<string, [number, number]>>
   props: ResolvedWaveformChartProps
   preparedSeries: ShallowRef<PreparedWaveformSeries[]>
   currentPage: Ref<number>
@@ -147,7 +148,7 @@ export function useWaveformLayout(context: LayoutContext) {
   const hasChartArea = computed(() => innerWidth.value > 0 && innerHeight.value > 0)
   const resolvedXLabel = computed(() => props.xLabel ?? `时间（${props.timeUnit}）`)
   const activeInteractionMode = computed(() => props.interactionMode)
-  const isZoomMode = computed(() => activeInteractionMode.value !== 'annotation')
+  const isZoomMode = computed(() => activeInteractionMode.value === 'zoom')
   const sharedXDomain = computed(() => {
     const values: number[] = []
     const tracks = chartTracks.value.some((track) => track.visibleSeries.length)
@@ -158,7 +159,7 @@ export function useWaveformLayout(context: LayoutContext) {
     })
     return paddedDomain(values)
   })
-  const initialXDomain = computed<[number, number]>(() => {
+  const originalXDomain = computed<[number, number]>(() => {
     const domain = props.initialXDomain
     if (
       domain &&
@@ -180,7 +181,7 @@ export function useWaveformLayout(context: LayoutContext) {
       props,
     )
   })
-  const resolveInitialTrackDomain = (track: TrackLayout): [number, number] => {
+  const resolveOriginalTrackDomain = (track: TrackLayout): [number, number] => {
     const configuredDomain =
       props.initialXDomains?.[track.series?.trackId ?? track.series?.id ?? track.id] ??
       (track.series ? props.initialXDomains?.[track.series.id] : undefined) ??
@@ -210,6 +211,13 @@ export function useWaveformLayout(context: LayoutContext) {
       props,
     )
   }
+  const initialXDomain = computed(
+    () =>
+      (props.displayMode !== 'independent' ? context.boundaries?.value.shared : undefined) ??
+      originalXDomain.value,
+  )
+  const resolveInitialTrackDomain = (track: TrackLayout): [number, number] =>
+    context.boundaries?.value[track.id] ?? resolveOriginalTrackDomain(track)
   const sharedZoomDomain = computed(() =>
     normalizeIntegerZoomDomain(
       sharedTransform.value
@@ -240,6 +248,7 @@ export function useWaveformLayout(context: LayoutContext) {
       useNonEmptyBottomTracks: props.layoutPreset === 'edge-compact',
       compactYAxisLayout: props.layoutPreset === 'edge-compact',
       showAxisUnits:
+        props.unitDisplayMode !== 'channel-label' &&
         props.unitDisplayMode !== 'channel-label-or-legend' &&
         (props.layoutPreset !== 'edge-compact' || props.unitDisplayMode === 'axis'),
       displayMode: props.displayMode,
@@ -248,6 +257,7 @@ export function useWaveformLayout(context: LayoutContext) {
       sharedZoomDomain: sharedZoomDomain.value,
       initialXDomain: props.initialXDomain ? initialXDomain.value : undefined,
       initialXDomains: props.initialXDomains,
+      effectiveXDomains: context.boundaries?.value,
       xDomainStrategy: props.xDomainStrategy,
       integerZoom: props.integerZoom,
       fixedYDomain: props.yDomain,
@@ -257,7 +267,7 @@ export function useWaveformLayout(context: LayoutContext) {
       xAxisLabelFormatter: props.axes?.x?.labelFormatter,
       yAxisSplitNumber: props.axes?.y?.splitNumber,
       yAxisNice: props.axes?.y?.nice,
-      yAxisUpperPaddingRatio: props.axes?.y?.upperPaddingRatio,
+      yAxisPadding: props.axes?.y,
       rendering: renderingOptions.value,
       linePointOverrides: linePointOverrides?.value,
       hideSecondaryLabels: isCleanView.value || yAxisLayout.value.hideSecondaryLabels,
@@ -266,7 +276,7 @@ export function useWaveformLayout(context: LayoutContext) {
         yAxisSlots.value.slots.find((slot) => slot.side === 'left' && slot.sideIndex === 0)
           ?.labelOffset ?? yAxisMetrics.value.labelCenterX,
       yAxisSlots: yAxisSlots.value.slots,
-      showCompactEmptyTracks: props.displayMode === 'compact' && hasWaveformData.value,
+      showEmptyTracks: hasWaveformData.value,
     }),
   )
   const annotationLayoutsForTrack = (track: TrackLayout): AnnotationTrackLayout[] =>
@@ -329,6 +339,8 @@ export function useWaveformLayout(context: LayoutContext) {
     activeInteractionMode,
     isZoomMode,
     initialXDomain,
+    originalXDomain,
+    resolveOriginalTrackDomain,
     sharedZoomDomain,
     resolveInitialTrackDomain,
     gridCells,