waveform-analysis 0.1.72 → 0.1.73

package/src/components/core/types.ts

@@ -28,6 +28,7 @@ export interface DisplaySeries {
   source?: WaveformPointSource
   xDomain: [number, number]
   rawYMaximum?: number
+  rawYMinimum?: number
   yDomain: [number, number]
   hasErrorPoints: boolean
 }
@@ -54,6 +55,7 @@ export interface TrackSeriesPath {
 
 export interface WaveformYAxisLayout {
   maximumTick?: number
+  minimumTick?: number
   index: number
   side: 'left' | 'right'
   x: number

package/src/components/core/useWaveformData.ts

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

package/src/components/core/useWaveformLayout.ts

@@ -17,6 +17,7 @@ import type { ResolvedWaveformChartProps } from './waveformChartTypes'
 import { applyXDomainStrategy } from './xDomain'
 import { alignIntegerZoomDomain, normalizeIntegerZoomDomain } from '../interaction/integerZoom'
 import { resolveViewportYDomains } from './yAxisLayoutMetrics'
+import { useExtremaTickViewport } from '../interaction/useExtremaTickViewport'
 import { useWaveformYAxisLayout } from './useWaveformYAxisLayout'
 import type { useWaveformAnnotationInteraction } from '../annotation'
 interface LayoutContext {
@@ -279,6 +280,13 @@ export function useWaveformLayout(context: LayoutContext) {
       showEmptyTracks: hasWaveformData.value,
     }),
   )
+  useExtremaTickViewport(
+    () => props.axes?.y?.extremaTicksVisible !== false,
+    innerWidth,
+    trackLayouts,
+    sharedTransform,
+    independentTransforms,
+  )
   const annotationLayoutsForTrack = (track: TrackLayout): AnnotationTrackLayout[] =>
     track.seriesList.map((series) => ({
       ...track,

package/src/components/core/yAxisLayoutMetrics.ts

@@ -71,6 +71,7 @@ export function resolveYAxisLayoutMetrics(
           compact,
           measureTextWidth,
           group.maximumTick,
+          group.minimumTick,
         ).tickTextWidth,
     )
   const tickTextWidth = Math.max(Y_AXIS_CHARACTER_WIDTH, ...axisText)

package/src/components/core/yAxisPadding.ts

@@ -14,26 +14,41 @@ export function applyYAxisPadding(
   viewport: [number, number] | undefined,
   options: YAxisPaddingOptions | number,
 ): YAxisSeriesGroup {
-  if (group.fixed) return group
   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 maxima = group.seriesList.flatMap((series) =>
-    Number.isFinite(series.rawYMaximum) ? [series.rawYMaximum!] : [],
-  )
-  const maximumTick = upper > 0 && maxima.length ? Math.max(...maxima) : undefined
   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,
-    domain: viewport ?? [Number.isFinite(min) ? min : a, Number.isFinite(max) ? max : b],
+    maximumTick: visible && maxima.length ? Math.max(...maxima) : undefined,
+    minimumTick: visible && minima.length ? Math.min(...minima) : undefined,
   }
 }
 
-export function withMaximumTick(values: number[], maximum?: number): number[] {
+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)
 }

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/rendering/WaveformTrack.vue

@@ -111,6 +111,7 @@ const frameInset = computed(() =>
       :show-units="showAxisUnits"
       :show-label-units="showLabelUnits"
       :hide-y-axis-titles="hideYAxisTitles"
+      :hide-overlapping-maximum-label="displayMode === 'compact'"
     />
 
     <component

package/src/components/rendering/WaveformTrackAxes.vue

@@ -21,6 +21,7 @@ interface Props {
   showUnits?: boolean
   showLabelUnits?: boolean
   hideYAxisTitles?: boolean
+  hideOverlappingMaximumLabel?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), { showUnits: true })
@@ -56,6 +57,7 @@ function renderAxes() {
     const element = yAxisElements.value[index]
     if (!element) return
     const unit = props.showUnits ? axis.seriesList[0]?.unit : undefined
+    const highestTick = Math.max(...axis.tickValues)
     const yAxis = (axis.side === 'left' ? axisLeft(axis.scale) : axisRight(axis.scale))
       .tickFormat((value) =>
         formatYAxisTickLabel(
@@ -78,11 +80,26 @@ function renderAxes() {
       .attr('y', null)
       .attr('dy', '0')
       .attr('dominant-baseline', 'central')
+      .attr('data-axis-maximum-label', (value) =>
+        props.hideOverlappingMaximumLabel && sameTick(value, highestTick) ? 'true' : null,
+      )
+      .attr('data-axis-minimum-label', (value) =>
+        props.hideOverlappingMaximumLabel && sameTick(value, Math.min(...axis.tickValues))
+          ? 'true'
+          : null,
+      )
+    selection
+      .attr('data-label-domain-min', axis.scale.domain()[0])
+      .attr('data-label-domain-max', axis.scale.domain()[1])
+      .attr('data-label-unit', unit ?? null)
     selection
       .selectAll<SVGGElement, number>('.tick')
       .attr('data-maximum-tick', (value) =>
         axis.maximumTick !== undefined && sameTick(value, axis.maximumTick) ? 'true' : null,
       )
+      .attr('data-minimum-tick', (value) =>
+        axis.minimumTick !== undefined && sameTick(value, axis.minimumTick) ? 'true' : null,
+      )
       .attr('data-tick-value', (value) => value)
       .attr('data-tick-y', (value) => axis.scale(value))
     selection
@@ -147,6 +164,7 @@ watch(
     () => props.axes?.x?.labelFormatter,
     () => props.axes?.x?.lineVisible,
     () => props.axes?.y?.lineVisible,
+    () => props.hideOverlappingMaximumLabel,
   ],
   async () => {
     await nextTick()

package/src/components/rendering/yAxisTickVisibility.ts

@@ -1,4 +1,5 @@
 import { sameTick } from '../core/yAxisPadding'
+import { formatYAxisTickLabel } from '../core/layout'
 
 interface Box {
   left: number
@@ -23,7 +24,13 @@ function textBox(text: SVGTextElement): Box {
       y += Number(match[2])
     }
   }
-  return { left: x - width, right: x, top: y - height / 2, bottom: y + height / 2 }
+  const startAligned = text.getAttribute('text-anchor') === 'start'
+  return {
+    left: startAligned ? x : x - width,
+    right: startAligned ? x + width : x,
+    top: y - height / 2,
+    bottom: y + height / 2,
+  }
 }
 
 export function labelsOverlap(a: Box, b: Box): boolean {
@@ -43,12 +50,46 @@ function strokeWidth(element: Element): number {
   return Number.parseFloat(getComputedStyle(element).strokeWidth) || 1
 }
 
+function formatCompactLabels(svg: SVGSVGElement) {
+  svg.querySelectorAll<SVGTextElement>('text[data-axis-maximum-label]').forEach((maximum) => {
+    const axis = maximum.parentElement!.parentElement!
+    const labels = [...axis.querySelectorAll<SVGTextElement>('.tick text')]
+    const value = (text: SVGTextElement) =>
+      Number(text.parentElement!.getAttribute('data-tick-value'))
+    const visibleValues = labels
+      .filter((text) => text.getAttribute('display') !== 'none')
+      .map(value)
+    const domain: [number, number] = [
+      Number(axis.getAttribute('data-label-domain-min')),
+      Number(axis.getAttribute('data-label-domain-max')),
+    ]
+    labels.forEach((text) => {
+      text.textContent = formatYAxisTickLabel(
+        value(text),
+        domain,
+        visibleValues,
+        axis.getAttribute('data-label-unit') ?? undefined,
+        axis.getAttribute('data-y-axis-side') === 'right' ? 'right' : 'left',
+      )
+    })
+  })
+}
+
 /** Apply after axes and grid are in the DOM; never feed the filtered set back into layout. */
 export function updateMaximumTickVisibility(svg: SVGSVGElement) {
   svg.querySelectorAll('[data-maximum-hidden]').forEach((el) => {
     el.removeAttribute('display')
     el.removeAttribute('data-maximum-hidden')
   })
+  svg.querySelectorAll('.waveform-track__axis--y .tick text').forEach((text) => {
+    text.removeAttribute('display')
+  })
+  formatCompactLabels(svg)
+  const minimumLabels = [...svg.querySelectorAll<SVGTextElement>('text[data-axis-minimum-label]')]
+  svg.querySelectorAll<SVGTextElement>('text[data-axis-maximum-label]').forEach((maximum) => {
+    const box = textBox(maximum)
+    if (minimumLabels.some((minimum) => labelsOverlap(box, textBox(minimum)))) hide(maximum)
+  })
   svg.querySelectorAll<SVGGElement>('.waveform-track__axis--y .tick').forEach((tick) => {
     const position = Number(tick.getAttribute('data-tick-y'))
     const height = Number(tick.closest('.waveform-track')?.getAttribute('data-track-height'))
@@ -56,33 +97,49 @@ export function updateMaximumTickVisibility(svg: SVGSVGElement) {
     if (sameTick(position, 0) || sameTick(position, height)) line?.setAttribute('display', 'none')
     else line?.removeAttribute('display')
   })
+  const minimumTicks = [...svg.querySelectorAll<SVGGElement>('.tick[data-minimum-tick]')]
   const maximumTicks = [...svg.querySelectorAll<SVGGElement>('.tick[data-maximum-tick]')]
   const labels = [...svg.querySelectorAll<SVGTextElement>('.waveform-track__axis--y .tick text')]
-  maximumTicks.forEach((tick) => {
+  minimumTicks.forEach((tick) => {
+    const text = tick.querySelector('text')
+    if (!text) return
+    maximumTicks.forEach((maximum) => {
+      const other = maximum.querySelector('text')
+      if (other && other !== text && labelsOverlap(textBox(text), textBox(other))) hide(other)
+    })
+  })
+  const extremeTicks = [...new Set([...minimumTicks, ...maximumTicks])]
+  extremeTicks.forEach((tick) => {
     const text = tick.querySelector('text')
     const line = tick.querySelector('line')
     if (!text || !line) return
     const box = textBox(text)
     labels.forEach((other) => {
-      if (other.parentElement?.hasAttribute('data-maximum-tick')) return
+      if (text.getAttribute('display') === 'none') return
+      if (other.getAttribute('display') === 'none') return
+      if (other.parentElement?.matches('[data-minimum-tick], [data-maximum-tick]')) return
+      if (!tick.hasAttribute('data-minimum-tick') && other.hasAttribute('data-axis-minimum-label'))
+        return
       if (labelsOverlap(box, textBox(other))) hide(other)
     })
     const axis = tick.parentElement!
     const value = Number(tick.getAttribute('data-tick-value'))
     const position = Number(tick.getAttribute('data-tick-y'))
-    axis.querySelectorAll<SVGGElement>('.tick:not([data-maximum-tick])').forEach((other) => {
-      const otherLine = other.querySelector('line')
-      if (
-        otherLine &&
-        linesOverlap(
-          position,
-          Number(other.getAttribute('data-tick-y')),
-          strokeWidth(line),
-          strokeWidth(otherLine),
+    axis
+      .querySelectorAll<SVGGElement>('.tick:not([data-maximum-tick]):not([data-minimum-tick])')
+      .forEach((other) => {
+        const otherLine = other.querySelector('line')
+        if (
+          otherLine &&
+          linesOverlap(
+            position,
+            Number(other.getAttribute('data-tick-y')),
+            strokeWidth(line),
+            strokeWidth(otherLine),
+          )
         )
-      )
-        hide(otherLine)
-    })
+          hide(otherLine)
+      })
     // Only the primary Y axis owns the existing horizontal grid.
     if (axis.getAttribute('data-y-axis-index') !== '0') return
     const track = axis.closest('.waveform-track')!
@@ -90,6 +147,10 @@ export function updateMaximumTickVisibility(svg: SVGSVGElement) {
       const gridY = Number(gridLine.getAttribute('y1'))
       if (linesOverlap(position, gridY, strokeWidth(line), strokeWidth(gridLine))) hide(gridLine)
     })
-    tick.setAttribute('data-maximum-value', String(value))
+    if (tick.hasAttribute('data-maximum-tick'))
+      tick.setAttribute('data-maximum-value', String(value))
+    if (tick.hasAttribute('data-minimum-tick'))
+      tick.setAttribute('data-minimum-value', String(value))
   })
+  formatCompactLabels(svg)
 }

package/src/data/simulatedWaveforms.ts

@@ -1,5 +1,6 @@
 import type { WaveformData, WaveformPoint, WaveformSeries } from '../types'
 import { recordedDampedPoints } from './recordedDampedWaveform'
+import { sx2Channel } from './sx2Channel'
 
 const POINT_COUNT = 1_000
 const START_TIME = -5
@@ -176,6 +177,15 @@ const seriesDefinitions: SimulatedSeriesDefinition[] = [
     pointType: 'none',
     signal: (time) => 6e-9 * Math.exp(-(time + 5) * 0.2) * Math.cos(TWO_PI * 0.8 * time),
   },
+  {
+    id: `recorded-${sx2Channel.chnl_id}`,
+    shotNo: String(sx2Channel.shot),
+    name: sx2Channel.chnl,
+    unit: sx2Channel.dat_unit,
+    lineType: 'linear',
+    pointType: 'none',
+    signal: sx2Channel.data.map((value, index) => [sx2Channel.time[index]!, value]),
+  },
 ]
 
 export function createSimulatedWaveformData(trackCount?: number): WaveformData {