@tetrascience-npm/tetrascience-react-ui 1.0.0-beta.148.1 → 1.0.0-beta.150.1

package/dist/components/charts/Chromatogram/Chromatogram.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Chromatogram.cjs","sources":["../../../../src/components/charts/Chromatogram/Chromatogram.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from \"react\";\n\nimport { useChartTooltip } from \"../ChartTooltip\";\nimport { getLoadedPlotly, loadPlotly } from \"../plotly-loader\";\n\nimport {\n  groupOverlappingPeaks,\n  createGroupAnnotations,\n  resolveSelectionAppearance,\n} from \"./annotations\";\nimport {\n  validateSeriesData,\n  applyBaselineCorrection,\n  processUserAnnotations,\n} from \"./dataProcessing\";\nimport { detectPeaks } from \"./peakDetection\";\nimport {\n  buildTraceData,\n  buildLayout,\n  buildConfig,\n  createClickHandler,\n  createHoverHandler,\n  createUnhoverHandler,\n} from \"./plotBuilder\";\n\nimport type {\n  ChromatogramSeries,\n  PeakAnnotation,\n  PeakSelectEvent,\n  PeakSelectionAppearance,\n  BaselineCorrectionMethod,\n  BoundaryMarkerStyle,\n  BoundaryMarkerType,\n  PeakDetectionOptions,\n  ChromatogramProps,\n  PeakWithMeta,\n} from \"./types\";\nimport type Plotly from \"plotly.js-dist\";\n\nimport { EmptyState } from \"@/components/composed/EmptyState\";\nimport { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\n\n// Re-export types for external use\nexport type {\n  ChromatogramSeries,\n  PeakAnnotation,\n  PeakSelectEvent,\n  PeakSelectionAppearance,\n  BaselineCorrectionMethod,\n  BoundaryMarkerStyle,\n  BoundaryMarkerType,\n  PeakDetectionOptions,\n  ChromatogramProps,\n};\n\n\n// Stable default so the no-annotations case keeps a constant identity; an\n// inline `[]` default would change every render, re-running the plot effect\n// (and tearing down the hover tooltip) on each re-render.\nconst EMPTY_ANNOTATIONS: PeakAnnotation[] = [];\n\nconst Chromatogram: React.FC<ChromatogramProps> = ({\n  series,\n  width = 900,\n  height = 500,\n  title,\n  xAxisTitle = \"Retention Time (min)\",\n  yAxisTitle = \"Signal (mAU)\",\n  annotations = EMPTY_ANNOTATIONS,\n  xRange,\n  yRange,\n  showLegend = true,\n  showGridX = true,\n  showGridY = true,\n  showMarkers = false,\n  markerSize = 4,\n  showCrosshairs = false,\n  baselineCorrection = \"none\",\n  baselineWindowSize = 50,\n  peakDetectionOptions,\n  showPeakAreas = false,\n  boundaryMarkers = \"none\",\n  annotationOverlapThreshold = 0.4,\n  showExportButton = true,\n  selectedPeakIds,\n  onPeakClick,\n  onPeakHover,\n  selectionAppearance,\n  annotationStyle = \"arrow\",\n  titleFontSize = 20,\n  titleTopMargin,\n}) => {\n  const enablePeakDetection = peakDetectionOptions !== undefined;\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n  const { bindTooltip, tooltipElement } = useChartTooltip({\n    xLabel: xAxisTitle,\n    yLabel: yAxisTitle,\n  });\n  // Stable refs for callbacks — avoids including them in effect dep arrays\n  // (consumers often pass arrow functions that change identity every render).\n  const onPeakClickRef = useRef(onPeakClick);\n  const onPeakHoverRef = useRef(onPeakHover);\n  onPeakClickRef.current = onPeakClick;\n  onPeakHoverRef.current = onPeakHover;\n\n  // Tracks the series index whose line is currently thickened on hover.\n  const thickenedSeriesRef = useRef<number | null>(null);\n\n  // Holds the latest peak Plotly annotations so that closures in effects always\n  // read the latest selection-styled annotations.\n  const peakAnnotationsRef = useRef<Partial<Plotly.Annotations>[]>([]);\n\n  // Memoize processed series with baseline correction\n  const processedSeries = useMemo(() => {\n    return series.map((s) => {\n      const validated = validateSeriesData(s.x, s.y);\n      return {\n        ...s,\n        x: validated.x,\n        y: applyBaselineCorrection(validated.y, baselineCorrection, baselineWindowSize),\n      };\n    });\n  }, [series, baselineCorrection, baselineWindowSize]);\n\n  // Process user annotations to convert startX/endX to indices and compute areas\n  const processedAnnotations = useMemo(() => {\n    if (annotations.length === 0 || processedSeries.length === 0) {\n      return annotations;\n    }\n    const { x, y } = processedSeries[0];\n    return processUserAnnotations(annotations, x, y);\n  }, [annotations, processedSeries]);\n\n  // Memoize peak detection results\n  const allDetectedPeaks = useMemo(() => {\n    const peaks: { peaks: PeakAnnotation[]; seriesIndex: number }[] = [];\n    if (enablePeakDetection && peakDetectionOptions) {\n      processedSeries.forEach((s, index) => {\n        const detected = detectPeaks(s.x, s.y, peakDetectionOptions);\n        if (detected.length > 0) {\n          peaks.push({ peaks: detected, seriesIndex: index });\n        }\n      });\n    }\n    return peaks;\n  }, [processedSeries, enablePeakDetection, peakDetectionOptions]);\n\n  // Normalize the selection appearance into primitive fields up front so the\n  // memo below depends on stable values rather than the (possibly unstable)\n  // selectionAppearance object reference. This keeps the dependency array\n  // exhaustive-deps clean without requiring callers to memoize the prop.\n  const selectedBorderColor = selectionAppearance?.selected?.borderColor;\n  const selectedBackgroundColor = selectionAppearance?.selected?.backgroundColor;\n  const selectedBold = selectionAppearance?.selected?.bold;\n  const unselectedOpacity = selectionAppearance?.unselected?.opacity;\n  const hoverLineWidthMultiplier = selectionAppearance?.hoverLineWidthMultiplier;\n\n  // Resolve selection appearance defaults once (stable as long as the\n  // individual fields above don't change).\n  const resolvedAppearance = useMemo(\n    () =>\n      resolveSelectionAppearance({\n        selected: {\n          borderColor: selectedBorderColor,\n          backgroundColor: selectedBackgroundColor,\n          bold: selectedBold,\n        },\n        unselected: { opacity: unselectedOpacity },\n        hoverLineWidthMultiplier,\n      }),\n    [\n      selectedBorderColor,\n      selectedBackgroundColor,\n      selectedBold,\n      unselectedOpacity,\n      hoverLineWidthMultiplier,\n    ]\n  );\n\n  // All peaks that can be interacted with (clicked / hovered / selected),\n  // each with a stable ID and the metadata needed for PeakSelectEvent.\n  const allPeaksForInteraction = useMemo(() => {\n    const result: Array<{\n      peak: PeakAnnotation & { id: string };\n      seriesIndex: number;\n      seriesName: string;\n      isAutoDetected: boolean;\n    }> = [];\n\n    processedAnnotations.forEach((ann, i) => {\n      result.push({\n        peak: { ...ann, id: ann.id ?? `user-ann-${i}` },\n        seriesIndex: 0,\n        seriesName: series[0]?.name ?? \"\",\n        isAutoDetected: false,\n      });\n    });\n\n    allDetectedPeaks.forEach(({ peaks, seriesIndex }) => {\n      peaks.forEach((peak, peakIndex) => {\n        result.push({\n          peak: { ...peak, id: `peak-${seriesIndex}-${peakIndex}` },\n          seriesIndex,\n          seriesName: series[seriesIndex]?.name ?? `Series ${seriesIndex + 1}`,\n          isAutoDetected: true,\n        });\n      });\n    });\n\n    return result;\n  }, [processedAnnotations, allDetectedPeaks, series]);\n\n  // Build Plotly annotation objects for all peaks, applying selection styling.\n  // This memo re-runs when selectedPeakIds or resolvedAppearance changes so the\n  // selection effect can call Plotly.relayout with updated annotations without\n  // triggering a full chart rebuild.\n  const peakAnnotations = useMemo(() => {\n    const anySelected = (selectedPeakIds?.length ?? 0) > 0;\n    const options = {\n      selectedPeakIds: selectedPeakIds ?? [],\n      anySelected,\n      appearance: resolvedAppearance,\n      annotationStyle,\n    };\n\n    const allPeaksWithMeta: PeakWithMeta[] = [];\n\n    processedAnnotations.forEach((ann, i) => {\n      allPeaksWithMeta.push({\n        peak: { ...ann, id: ann.id ?? `user-ann-${i}` },\n        seriesIndex: -1,\n      });\n    });\n\n    if (showPeakAreas && enablePeakDetection) {\n      allDetectedPeaks.forEach(({ peaks, seriesIndex }) => {\n        peaks.forEach((peak, peakIndex) => {\n          allPeaksWithMeta.push({\n            peak: { ...peak, id: `peak-${seriesIndex}-${peakIndex}` },\n            seriesIndex,\n          });\n        });\n      });\n    }\n\n    const groups = groupOverlappingPeaks(allPeaksWithMeta, annotationOverlapThreshold);\n    const result: Partial<Plotly.Annotations>[] = [];\n    for (const group of groups) {\n      result.push(...createGroupAnnotations(group, options));\n    }\n    return result;\n  }, [\n    processedAnnotations,\n    allDetectedPeaks,\n    showPeakAreas,\n    enablePeakDetection,\n    annotationOverlapThreshold,\n    selectedPeakIds,\n    resolvedAppearance,\n    annotationStyle,\n  ]);\n\n  // Keep the ref in sync every render so that closures in effects always read\n  // the latest selection-styled annotations.\n  peakAnnotationsRef.current = peakAnnotations;\n\n  // ── Main chart effect ──────────────────────────────────────────────────────\n  // Rebuilds the full chart when structural props change (data, size, axes, …).\n  // selectedPeakIds and selectionAppearance are intentionally excluded from\n  // deps — selection changes are handled by the lightweight selection effect\n  // below via Plotly.relayout, which preserves the user's current zoom/pan.\n  useEffect(() => {\n    const currentRef = plotRef.current;\n    if (!currentRef || series.length === 0) return;\n\n    // Build trace data (line traces + boundary markers + region overlays +\n    // the invisible hit-area trace that carries peak customdata for\n    // click/hover interaction).\n    const plotData = buildTraceData({\n      processedSeries,\n      processedAnnotations,\n      allDetectedPeaks,\n      allPeaksForInteraction,\n      showMarkers,\n      markerSize,\n      xAxisTitle,\n      yAxisTitle,\n      boundaryMarkers,\n    });\n\n    const layout = buildLayout({\n      title,\n      titleFontSize,\n      titleTopMargin,\n      width,\n      height,\n      xAxisTitle,\n      yAxisTitle,\n      xRange,\n      yRange,\n      showLegend,\n      seriesCount: series.length,\n      showGridX,\n      showGridY,\n      showCrosshairs,\n      theme,\n      peakAnnotations: peakAnnotationsRef.current,\n    });\n\n    const config = buildConfig({ showExportButton, width, height });\n\n    // Plotly is loaded lazily so it stays out of the consumer's main chunk\n    // (SW-2007); the draw is skipped if the effect re-runs or unmounts first.\n    let cancelled = false;\n    let plotElement: HTMLDivElement | null = null;\n    void loadPlotly().then((plotly) => {\n      if (cancelled || !plotRef.current) return;\n      plotly.newPlot(currentRef, plotData, layout, config);\n      bindTooltip(currentRef);\n\n      // ── Event: peak click ────────────────────────────────────────────────\n      (currentRef as unknown as Plotly.PlotlyHTMLElement).on(\n        \"plotly_click\",\n        createClickHandler(onPeakClickRef)\n      );\n\n      (currentRef as unknown as Plotly.PlotlyHTMLElement).on(\n        \"plotly_hover\",\n        createHoverHandler(currentRef, processedSeries.length, thickenedSeriesRef, onPeakHoverRef, resolvedAppearance.hoverLineWidthMultiplier)\n      );\n\n      (currentRef as unknown as Plotly.PlotlyHTMLElement).on(\n        \"plotly_unhover\",\n        createUnhoverHandler(currentRef, thickenedSeriesRef, onPeakHoverRef)\n      );\n\n      // Capture ref value for cleanup\n      plotElement = currentRef;\n    });\n\n    return () => {\n      cancelled = true;\n      thickenedSeriesRef.current = null;\n      if (plotElement) getLoadedPlotly().purge(plotElement);\n    };\n  }, [\n    processedSeries, allDetectedPeaks, allPeaksForInteraction, series.length,\n    width, height, title, titleFontSize, titleTopMargin, xAxisTitle, yAxisTitle,\n    processedAnnotations, xRange, yRange, showLegend, showGridX, showGridY,\n    showMarkers, markerSize, showCrosshairs, enablePeakDetection, peakDetectionOptions,\n    showPeakAreas, boundaryMarkers, annotationOverlapThreshold, showExportButton,\n    theme, bindTooltip,\n    // resolvedAppearance included so hover multiplier stays in sync with the\n    // event handler closure without it being in a ref itself.\n    resolvedAppearance,\n  ]);\n\n  // ── Selection update effect ────────────────────────────────────────────────\n  // Runs when selectedPeakIds / selectionAppearance change (peakAnnotations\n  // recomputes). Uses Plotly.relayout so the user's zoom/pan state is preserved.\n  useEffect(() => {\n    const el = plotRef.current;\n    if (!el) return;\n    // Guard: skip if the chart hasn't been initialized by the main effect yet.\n    // (A truthy _fullLayout also proves newPlot ran, so the lazily-loaded\n    // Plotly module is guaranteed to be available via getLoadedPlotly.)\n    if (!(el as { _fullLayout?: unknown })._fullLayout) return;\n\n    getLoadedPlotly().relayout(el, {\n      annotations: peakAnnotations,\n    } as unknown as Partial<Plotly.Layout>);\n  }, [peakAnnotations]);\n\n  // No data: render an explicit empty state instead of an uninitialized\n  // (blank) Plotly container, so the chart reads as \"no data yet\" rather\n  // than looking broken while data is still loading.\n  if (series.length === 0) {\n    return (\n      <div\n        className=\"chromatogram-chart-container relative flex items-center justify-center\"\n        style={{ width, height }}\n      >\n        <EmptyState\n          variant=\"no-data\"\n          title=\"No chromatogram data\"\n          description=\"There is no signal data to display yet.\"\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"chromatogram-chart-container relative\">\n      <div ref={plotRef} style={{ width: \"100%\", height: \"100%\" }} />\n      {tooltipElement}\n    </div>\n  );\n};\n\nexport { Chromatogram };\n"],"names":["EMPTY_ANNOTATIONS","Chromatogram","series","width","height","title","xAxisTitle","yAxisTitle","annotations","xRange","yRange","showLegend","showGridX","showGridY","showMarkers","markerSize","showCrosshairs","baselineCorrection","baselineWindowSize","peakDetectionOptions","showPeakAreas","boundaryMarkers","annotationOverlapThreshold","showExportButton","selectedPeakIds","onPeakClick","onPeakHover","selectionAppearance","annotationStyle","titleFontSize","titleTopMargin","enablePeakDetection","plotRef","useRef","theme","usePlotlyTheme","bindTooltip","tooltipElement","useChartTooltip","onPeakClickRef","onPeakHoverRef","thickenedSeriesRef","peakAnnotationsRef","processedSeries","useMemo","s","validated","validateSeriesData","applyBaselineCorrection","processedAnnotations","x","y","processUserAnnotations","allDetectedPeaks","peaks","index","detected","detectPeaks","selectedBorderColor","selectedBackgroundColor","selectedBold","unselectedOpacity","hoverLineWidthMultiplier","resolvedAppearance","resolveSelectionAppearance","allPeaksForInteraction","result","ann","i","seriesIndex","peak","peakIndex","peakAnnotations","anySelected","options","allPeaksWithMeta","groups","groupOverlappingPeaks","group","createGroupAnnotations","useEffect","currentRef","plotData","buildTraceData","layout","buildLayout","config","buildConfig","cancelled","plotElement","loadPlotly","plotly","createClickHandler","createHoverHandler","createUnhoverHandler","getLoadedPlotly","el","jsx","EmptyState","jsxs"],"mappings":"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"}
+{"version":3,"file":"Chromatogram.cjs","sources":["../../../../src/components/charts/Chromatogram/Chromatogram.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from \"react\";\n\nimport { useChartTooltip } from \"../ChartTooltip\";\nimport { getLoadedPlotly, loadPlotly } from \"../plotly-loader\";\n\nimport {\n  groupOverlappingPeaks,\n  createGroupAnnotations,\n  resolveSelectionAppearance,\n} from \"./annotations\";\nimport {\n  validateSeriesData,\n  applyBaselineCorrection,\n  processUserAnnotations,\n} from \"./dataProcessing\";\nimport { detectPeaks } from \"./peakDetection\";\nimport {\n  buildTraceData,\n  buildLayout,\n  buildConfig,\n  buildChromatogramTooltipLines,\n  createClickHandler,\n  createHoverHandler,\n  createUnhoverHandler,\n} from \"./plotBuilder\";\n\nimport type {\n  ChromatogramSeries,\n  PeakAnnotation,\n  PeakSelectEvent,\n  PeakSelectionAppearance,\n  BaselineCorrectionMethod,\n  BoundaryMarkerStyle,\n  BoundaryMarkerType,\n  PeakDetectionOptions,\n  ChromatogramProps,\n  PeakWithMeta,\n} from \"./types\";\nimport type Plotly from \"plotly.js-dist\";\n\nimport { EmptyState } from \"@/components/composed/EmptyState\";\nimport { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\n\n// Re-export types for external use\nexport type {\n  ChromatogramSeries,\n  PeakAnnotation,\n  PeakSelectEvent,\n  PeakSelectionAppearance,\n  BaselineCorrectionMethod,\n  BoundaryMarkerStyle,\n  BoundaryMarkerType,\n  PeakDetectionOptions,\n  ChromatogramProps,\n};\n\n\n// Stable default so the no-annotations case keeps a constant identity; an\n// inline `[]` default would change every render, re-running the plot effect\n// (and tearing down the hover tooltip) on each re-render.\nconst EMPTY_ANNOTATIONS: PeakAnnotation[] = [];\n\nconst Chromatogram: React.FC<ChromatogramProps> = ({\n  series,\n  width = 900,\n  height = 500,\n  title,\n  xAxisTitle = \"Retention Time (min)\",\n  yAxisTitle = \"Signal (mAU)\",\n  annotations = EMPTY_ANNOTATIONS,\n  xRange,\n  yRange,\n  showLegend = true,\n  showGridX = true,\n  showGridY = true,\n  showMarkers = false,\n  markerSize = 4,\n  showCrosshairs = false,\n  baselineCorrection = \"none\",\n  baselineWindowSize = 50,\n  peakDetectionOptions,\n  showPeakAreas = false,\n  boundaryMarkers = \"none\",\n  annotationOverlapThreshold = 0.4,\n  showExportButton = true,\n  selectedPeakIds,\n  onPeakClick,\n  onPeakHover,\n  selectionAppearance,\n  annotationStyle = \"arrow\",\n  titleFontSize = 20,\n  titleTopMargin,\n}) => {\n  const enablePeakDetection = peakDetectionOptions !== undefined;\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n  // Every trace sets hoverinfo \"none\", so this is the only tooltip on hover\n  // (Plotly's unified label used to render alongside it — SW-2298). The lines\n  // are built from the series points, their metadata, and any hovered peak.\n  const { bindTooltip, tooltipElement } = useChartTooltip({\n    getLines: (points) =>\n      buildChromatogramTooltipLines(points, { series, xAxisTitle, yAxisTitle }),\n  });\n  // Stable refs for callbacks — avoids including them in effect dep arrays\n  // (consumers often pass arrow functions that change identity every render).\n  const onPeakClickRef = useRef(onPeakClick);\n  const onPeakHoverRef = useRef(onPeakHover);\n  onPeakClickRef.current = onPeakClick;\n  onPeakHoverRef.current = onPeakHover;\n\n  // Tracks the series index whose line is currently thickened on hover.\n  const thickenedSeriesRef = useRef<number | null>(null);\n\n  // Holds the latest peak Plotly annotations so that closures in effects always\n  // read the latest selection-styled annotations.\n  const peakAnnotationsRef = useRef<Partial<Plotly.Annotations>[]>([]);\n\n  // Memoize processed series with baseline correction\n  const processedSeries = useMemo(() => {\n    return series.map((s) => {\n      const validated = validateSeriesData(s.x, s.y);\n      return {\n        ...s,\n        x: validated.x,\n        y: applyBaselineCorrection(validated.y, baselineCorrection, baselineWindowSize),\n      };\n    });\n  }, [series, baselineCorrection, baselineWindowSize]);\n\n  // Process user annotations to convert startX/endX to indices and compute areas\n  const processedAnnotations = useMemo(() => {\n    if (annotations.length === 0 || processedSeries.length === 0) {\n      return annotations;\n    }\n    const { x, y } = processedSeries[0];\n    return processUserAnnotations(annotations, x, y);\n  }, [annotations, processedSeries]);\n\n  // Memoize peak detection results\n  const allDetectedPeaks = useMemo(() => {\n    const peaks: { peaks: PeakAnnotation[]; seriesIndex: number }[] = [];\n    if (enablePeakDetection && peakDetectionOptions) {\n      processedSeries.forEach((s, index) => {\n        const detected = detectPeaks(s.x, s.y, peakDetectionOptions);\n        if (detected.length > 0) {\n          peaks.push({ peaks: detected, seriesIndex: index });\n        }\n      });\n    }\n    return peaks;\n  }, [processedSeries, enablePeakDetection, peakDetectionOptions]);\n\n  // Normalize the selection appearance into primitive fields up front so the\n  // memo below depends on stable values rather than the (possibly unstable)\n  // selectionAppearance object reference. This keeps the dependency array\n  // exhaustive-deps clean without requiring callers to memoize the prop.\n  const selectedBorderColor = selectionAppearance?.selected?.borderColor;\n  const selectedBackgroundColor = selectionAppearance?.selected?.backgroundColor;\n  const selectedBold = selectionAppearance?.selected?.bold;\n  const unselectedOpacity = selectionAppearance?.unselected?.opacity;\n  const hoverLineWidthMultiplier = selectionAppearance?.hoverLineWidthMultiplier;\n\n  // Resolve selection appearance defaults once (stable as long as the\n  // individual fields above don't change).\n  const resolvedAppearance = useMemo(\n    () =>\n      resolveSelectionAppearance({\n        selected: {\n          borderColor: selectedBorderColor,\n          backgroundColor: selectedBackgroundColor,\n          bold: selectedBold,\n        },\n        unselected: { opacity: unselectedOpacity },\n        hoverLineWidthMultiplier,\n      }),\n    [\n      selectedBorderColor,\n      selectedBackgroundColor,\n      selectedBold,\n      unselectedOpacity,\n      hoverLineWidthMultiplier,\n    ]\n  );\n\n  // All peaks that can be interacted with (clicked / hovered / selected),\n  // each with a stable ID and the metadata needed for PeakSelectEvent.\n  const allPeaksForInteraction = useMemo(() => {\n    const result: Array<{\n      peak: PeakAnnotation & { id: string };\n      seriesIndex: number;\n      seriesName: string;\n      isAutoDetected: boolean;\n    }> = [];\n\n    processedAnnotations.forEach((ann, i) => {\n      result.push({\n        peak: { ...ann, id: ann.id ?? `user-ann-${i}` },\n        seriesIndex: 0,\n        seriesName: series[0]?.name ?? \"\",\n        isAutoDetected: false,\n      });\n    });\n\n    allDetectedPeaks.forEach(({ peaks, seriesIndex }) => {\n      peaks.forEach((peak, peakIndex) => {\n        result.push({\n          peak: { ...peak, id: `peak-${seriesIndex}-${peakIndex}` },\n          seriesIndex,\n          seriesName: series[seriesIndex]?.name ?? `Series ${seriesIndex + 1}`,\n          isAutoDetected: true,\n        });\n      });\n    });\n\n    return result;\n  }, [processedAnnotations, allDetectedPeaks, series]);\n\n  // Build Plotly annotation objects for all peaks, applying selection styling.\n  // This memo re-runs when selectedPeakIds or resolvedAppearance changes so the\n  // selection effect can call Plotly.relayout with updated annotations without\n  // triggering a full chart rebuild.\n  const peakAnnotations = useMemo(() => {\n    const anySelected = (selectedPeakIds?.length ?? 0) > 0;\n    const options = {\n      selectedPeakIds: selectedPeakIds ?? [],\n      anySelected,\n      appearance: resolvedAppearance,\n      annotationStyle,\n    };\n\n    const allPeaksWithMeta: PeakWithMeta[] = [];\n\n    processedAnnotations.forEach((ann, i) => {\n      allPeaksWithMeta.push({\n        peak: { ...ann, id: ann.id ?? `user-ann-${i}` },\n        seriesIndex: -1,\n      });\n    });\n\n    if (showPeakAreas && enablePeakDetection) {\n      allDetectedPeaks.forEach(({ peaks, seriesIndex }) => {\n        peaks.forEach((peak, peakIndex) => {\n          allPeaksWithMeta.push({\n            peak: { ...peak, id: `peak-${seriesIndex}-${peakIndex}` },\n            seriesIndex,\n          });\n        });\n      });\n    }\n\n    const groups = groupOverlappingPeaks(allPeaksWithMeta, annotationOverlapThreshold);\n    const result: Partial<Plotly.Annotations>[] = [];\n    for (const group of groups) {\n      result.push(...createGroupAnnotations(group, options));\n    }\n    return result;\n  }, [\n    processedAnnotations,\n    allDetectedPeaks,\n    showPeakAreas,\n    enablePeakDetection,\n    annotationOverlapThreshold,\n    selectedPeakIds,\n    resolvedAppearance,\n    annotationStyle,\n  ]);\n\n  // Keep the ref in sync every render so that closures in effects always read\n  // the latest selection-styled annotations.\n  peakAnnotationsRef.current = peakAnnotations;\n\n  // ── Main chart effect ──────────────────────────────────────────────────────\n  // Rebuilds the full chart when structural props change (data, size, axes, …).\n  // selectedPeakIds and selectionAppearance are intentionally excluded from\n  // deps — selection changes are handled by the lightweight selection effect\n  // below via Plotly.relayout, which preserves the user's current zoom/pan.\n  useEffect(() => {\n    const currentRef = plotRef.current;\n    if (!currentRef || series.length === 0) return;\n\n    // Build trace data (line traces + boundary markers + region overlays +\n    // the invisible hit-area trace that carries peak customdata for\n    // click/hover interaction).\n    const plotData = buildTraceData({\n      processedSeries,\n      processedAnnotations,\n      allDetectedPeaks,\n      allPeaksForInteraction,\n      showMarkers,\n      markerSize,\n      boundaryMarkers,\n    });\n\n    const layout = buildLayout({\n      title,\n      titleFontSize,\n      titleTopMargin,\n      width,\n      height,\n      xAxisTitle,\n      yAxisTitle,\n      xRange,\n      yRange,\n      showLegend,\n      seriesCount: series.length,\n      showGridX,\n      showGridY,\n      showCrosshairs,\n      theme,\n      peakAnnotations: peakAnnotationsRef.current,\n    });\n\n    const config = buildConfig({ showExportButton, width, height });\n\n    // Plotly is loaded lazily so it stays out of the consumer's main chunk\n    // (SW-2007); the draw is skipped if the effect re-runs or unmounts first.\n    let cancelled = false;\n    let plotElement: HTMLDivElement | null = null;\n    void loadPlotly().then((plotly) => {\n      if (cancelled || !plotRef.current) return;\n      plotly.newPlot(currentRef, plotData, layout, config);\n      bindTooltip(currentRef);\n\n      // ── Event: peak click ────────────────────────────────────────────────\n      (currentRef as unknown as Plotly.PlotlyHTMLElement).on(\n        \"plotly_click\",\n        createClickHandler(onPeakClickRef)\n      );\n\n      (currentRef as unknown as Plotly.PlotlyHTMLElement).on(\n        \"plotly_hover\",\n        createHoverHandler(currentRef, processedSeries.length, thickenedSeriesRef, onPeakHoverRef, resolvedAppearance.hoverLineWidthMultiplier)\n      );\n\n      (currentRef as unknown as Plotly.PlotlyHTMLElement).on(\n        \"plotly_unhover\",\n        createUnhoverHandler(currentRef, thickenedSeriesRef, onPeakHoverRef)\n      );\n\n      // Capture ref value for cleanup\n      plotElement = currentRef;\n    });\n\n    return () => {\n      cancelled = true;\n      thickenedSeriesRef.current = null;\n      if (plotElement) getLoadedPlotly().purge(plotElement);\n    };\n  }, [\n    processedSeries, allDetectedPeaks, allPeaksForInteraction, series.length,\n    width, height, title, titleFontSize, titleTopMargin, xAxisTitle, yAxisTitle,\n    processedAnnotations, xRange, yRange, showLegend, showGridX, showGridY,\n    showMarkers, markerSize, showCrosshairs, enablePeakDetection, peakDetectionOptions,\n    showPeakAreas, boundaryMarkers, annotationOverlapThreshold, showExportButton,\n    theme, bindTooltip,\n    // resolvedAppearance included so hover multiplier stays in sync with the\n    // event handler closure without it being in a ref itself.\n    resolvedAppearance,\n  ]);\n\n  // ── Selection update effect ────────────────────────────────────────────────\n  // Runs when selectedPeakIds / selectionAppearance change (peakAnnotations\n  // recomputes). Uses Plotly.relayout so the user's zoom/pan state is preserved.\n  useEffect(() => {\n    const el = plotRef.current;\n    if (!el) return;\n    // Guard: skip if the chart hasn't been initialized by the main effect yet.\n    // (A truthy _fullLayout also proves newPlot ran, so the lazily-loaded\n    // Plotly module is guaranteed to be available via getLoadedPlotly.)\n    if (!(el as { _fullLayout?: unknown })._fullLayout) return;\n\n    getLoadedPlotly().relayout(el, {\n      annotations: peakAnnotations,\n    } as unknown as Partial<Plotly.Layout>);\n  }, [peakAnnotations]);\n\n  // No data: render an explicit empty state instead of an uninitialized\n  // (blank) Plotly container, so the chart reads as \"no data yet\" rather\n  // than looking broken while data is still loading.\n  if (series.length === 0) {\n    return (\n      <div\n        className=\"chromatogram-chart-container relative flex items-center justify-center\"\n        style={{ width, height }}\n      >\n        <EmptyState\n          variant=\"no-data\"\n          title=\"No chromatogram data\"\n          description=\"There is no signal data to display yet.\"\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"chromatogram-chart-container relative\">\n      <div ref={plotRef} style={{ width: \"100%\", height: \"100%\" }} />\n      {tooltipElement}\n    </div>\n  );\n};\n\nexport { Chromatogram };\n"],"names":["EMPTY_ANNOTATIONS","Chromatogram","series","width","height","title","xAxisTitle","yAxisTitle","annotations","xRange","yRange","showLegend","showGridX","showGridY","showMarkers","markerSize","showCrosshairs","baselineCorrection","baselineWindowSize","peakDetectionOptions","showPeakAreas","boundaryMarkers","annotationOverlapThreshold","showExportButton","selectedPeakIds","onPeakClick","onPeakHover","selectionAppearance","annotationStyle","titleFontSize","titleTopMargin","enablePeakDetection","plotRef","useRef","theme","usePlotlyTheme","bindTooltip","tooltipElement","useChartTooltip","points","buildChromatogramTooltipLines","onPeakClickRef","onPeakHoverRef","thickenedSeriesRef","peakAnnotationsRef","processedSeries","useMemo","s","validated","validateSeriesData","applyBaselineCorrection","processedAnnotations","x","y","processUserAnnotations","allDetectedPeaks","peaks","index","detected","detectPeaks","selectedBorderColor","selectedBackgroundColor","selectedBold","unselectedOpacity","hoverLineWidthMultiplier","resolvedAppearance","resolveSelectionAppearance","allPeaksForInteraction","result","ann","i","seriesIndex","peak","peakIndex","peakAnnotations","anySelected","options","allPeaksWithMeta","groups","groupOverlappingPeaks","group","createGroupAnnotations","useEffect","currentRef","plotData","buildTraceData","layout","buildLayout","config","buildConfig","cancelled","plotElement","loadPlotly","plotly","createClickHandler","createHoverHandler","createUnhoverHandler","getLoadedPlotly","el","jsx","EmptyState","jsxs"],"mappings":"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"}

package/dist/components/charts/Chromatogram/Chromatogram.js

@@ -1,69 +1,68 @@
 import { jsx as _, jsxs as se } from "react/jsx-runtime";
-import { useRef as h, useMemo as f, useEffect as ne } from "react";
+import { useRef as h, useMemo as i, useEffect as ne } from "react";
 import { useChartTooltip as de } from "../ChartTooltip/ChartTooltip.js";
-import { loadPlotly as fe, getLoadedPlotly as ce } from "../plotly-loader.js";
-import { resolveSelectionAppearance as ie, groupOverlappingPeaks as pe, createGroupAnnotations as me } from "./annotations.js";
-import { validateSeriesData as he, applyBaselineCorrection as ye, processUserAnnotations as ge } from "./dataProcessing.js";
+import { loadPlotly as ie, getLoadedPlotly as le } from "../plotly-loader.js";
+import { resolveSelectionAppearance as fe, groupOverlappingPeaks as pe, createGroupAnnotations as me } from "./annotations.js";
+import { validateSeriesData as he, applyBaselineCorrection as ge, processUserAnnotations as ye } from "./dataProcessing.js";
 import { detectPeaks as ve } from "./peakDetection.js";
-import { buildTraceData as ke, buildLayout as Ee, buildConfig as be, createClickHandler as Ce, createHoverHandler as Ne, createUnhoverHandler as Pe } from "./plotBuilder.js";
-import { EmptyState as Le } from "../../composed/EmptyState/EmptyState.js";
-import { usePlotlyTheme as $e } from "../../../hooks/use-plotly-theme.js";
-const Re = [], qe = ({
-  series: n,
-  width: y = 900,
-  height: g = 500,
+import { buildChromatogramTooltipLines as ke, buildTraceData as Ce, buildLayout as Ee, buildConfig as be, createClickHandler as Ne, createHoverHandler as Pe, createUnhoverHandler as Le } from "./plotBuilder.js";
+import { EmptyState as $e } from "../../composed/EmptyState/EmptyState.js";
+import { usePlotlyTheme as Re } from "../../../hooks/use-plotly-theme.js";
+const Se = [], qe = ({
+  series: r,
+  width: g = 900,
+  height: y = 500,
   title: H,
-  xAxisTitle: v = "Retention Time (min)",
-  yAxisTitle: k = "Signal (mAU)",
-  annotations: E = Re,
+  xAxisTitle: E = "Retention Time (min)",
+  yAxisTitle: b = "Signal (mAU)",
+  annotations: v = Se,
   xRange: j,
-  yRange: B,
-  showLegend: D = !0,
-  showGridX: M = !0,
-  showGridY: U = !0,
-  showMarkers: W = !1,
-  markerSize: A = 4,
-  showCrosshairs: q = !1,
-  baselineCorrection: F = "none",
-  baselineWindowSize: I = 50,
-  peakDetectionOptions: i,
+  yRange: A,
+  showLegend: B = !0,
+  showGridX: D = !0,
+  showGridY: M = !0,
+  showMarkers: T = !1,
+  markerSize: U = 4,
+  showCrosshairs: W = !1,
+  baselineCorrection: q = "none",
+  baselineWindowSize: x = 50,
+  peakDetectionOptions: f,
   showPeakAreas: N = !1,
-  boundaryMarkers: J = "none",
+  boundaryMarkers: F = "none",
   annotationOverlapThreshold: P = 0.4,
-  showExportButton: K = !0,
+  showExportButton: I = !0,
   selectedPeakIds: L,
-  onPeakClick: Q,
-  onPeakHover: T,
+  onPeakClick: J,
+  onPeakHover: K,
   selectionAppearance: p,
-  annotationStyle: V = "arrow",
-  titleFontSize: Y = 20,
-  titleTopMargin: Z
+  annotationStyle: Q = "arrow",
+  titleFontSize: V = 20,
+  titleTopMargin: Y
 }) => {
-  const m = i !== void 0, b = h(null), G = $e(), { bindTooltip: X, tooltipElement: le } = de({
-    xLabel: v,
-    yLabel: k
-  }), x = h(Q), $ = h(T);
-  x.current = Q, $.current = T;
-  const R = h(null), O = h([]), c = f(() => n.map((e) => {
+  const m = f !== void 0, k = h(null), Z = Re(), { bindTooltip: G, tooltipElement: ce } = de({
+    getLines: (e) => ke(e, { series: r, xAxisTitle: E, yAxisTitle: b })
+  }), X = h(J), $ = h(K);
+  X.current = J, $.current = K;
+  const R = h(null), O = h([]), l = i(() => r.map((e) => {
     const t = he(e.x, e.y);
     return {
       ...e,
       x: t.x,
-      y: ye(t.y, F, I)
+      y: ge(t.y, q, x)
     };
-  }), [n, F, I]), u = f(() => {
-    if (E.length === 0 || c.length === 0)
-      return E;
-    const { x: e, y: t } = c[0];
-    return ge(E, e, t);
-  }, [E, c]), s = f(() => {
+  }), [r, q, x]), u = i(() => {
+    if (v.length === 0 || l.length === 0)
+      return v;
+    const { x: e, y: t } = l[0];
+    return ye(v, e, t);
+  }, [v, l]), s = i(() => {
     const e = [];
-    return m && i && c.forEach((t, o) => {
-      const l = ve(t.x, t.y, i);
-      l.length > 0 && e.push({ peaks: l, seriesIndex: o });
+    return m && f && l.forEach((t, o) => {
+      const c = ve(t.x, t.y, f);
+      c.length > 0 && e.push({ peaks: c, seriesIndex: o });
     }), e;
-  }, [c, m, i]), z = p?.selected?.borderColor, w = p?.selected?.backgroundColor, ee = p?.selected?.bold, te = p?.unselected?.opacity, oe = p?.hoverLineWidthMultiplier, C = f(
-    () => ie({
+  }, [l, m, f]), z = p?.selected?.borderColor, w = p?.selected?.backgroundColor, ee = p?.selected?.bold, te = p?.unselected?.opacity, oe = p?.hoverLineWidthMultiplier, C = i(
+    () => fe({
       selected: {
         borderColor: z,
         backgroundColor: w,
@@ -79,48 +78,48 @@ const Re = [], qe = ({
       te,
       oe
     ]
-  ), re = f(() => {
+  ), re = i(() => {
     const e = [];
     return u.forEach((t, o) => {
       e.push({
         peak: { ...t, id: t.id ?? `user-ann-${o}` },
         seriesIndex: 0,
-        seriesName: n[0]?.name ?? "",
+        seriesName: r[0]?.name ?? "",
         isAutoDetected: !1
       });
     }), s.forEach(({ peaks: t, seriesIndex: o }) => {
-      t.forEach((l, a) => {
+      t.forEach((c, a) => {
         e.push({
-          peak: { ...l, id: `peak-${o}-${a}` },
+          peak: { ...c, id: `peak-${o}-${a}` },
           seriesIndex: o,
-          seriesName: n[o]?.name ?? `Series ${o + 1}`,
+          seriesName: r[o]?.name ?? `Series ${o + 1}`,
           isAutoDetected: !0
         });
       });
     }), e;
-  }, [u, s, n]), S = f(() => {
+  }, [u, s, r]), S = i(() => {
     const e = (L?.length ?? 0) > 0, t = {
       selectedPeakIds: L ?? [],
       anySelected: e,
       appearance: C,
-      annotationStyle: V
+      annotationStyle: Q
     }, o = [];
-    u.forEach((r, d) => {
+    u.forEach((n, d) => {
       o.push({
-        peak: { ...r, id: r.id ?? `user-ann-${d}` },
+        peak: { ...n, id: n.id ?? `user-ann-${d}` },
         seriesIndex: -1
       });
-    }), N && m && s.forEach(({ peaks: r, seriesIndex: d }) => {
-      r.forEach((ae, ue) => {
+    }), N && m && s.forEach(({ peaks: n, seriesIndex: d }) => {
+      n.forEach((ae, ue) => {
         o.push({
           peak: { ...ae, id: `peak-${d}-${ue}` },
           seriesIndex: d
         });
       });
     });
-    const l = pe(o, P), a = [];
-    for (const r of l)
-      a.push(...me(r, t));
+    const c = pe(o, P), a = [];
+    for (const n of c)
+      a.push(...me(n, t));
     return a;
   }, [
     u,
@@ -130,98 +129,96 @@ const Re = [], qe = ({
     P,
     L,
     C,
-    V
+    Q
   ]);
   return O.current = S, ne(() => {
-    const e = b.current;
-    if (!e || n.length === 0) return;
-    const t = ke({
-      processedSeries: c,
+    const e = k.current;
+    if (!e || r.length === 0) return;
+    const t = Ce({
+      processedSeries: l,
       processedAnnotations: u,
       allDetectedPeaks: s,
       allPeaksForInteraction: re,
-      showMarkers: W,
-      markerSize: A,
-      xAxisTitle: v,
-      yAxisTitle: k,
-      boundaryMarkers: J
+      showMarkers: T,
+      markerSize: U,
+      boundaryMarkers: F
     }), o = Ee({
       title: H,
-      titleFontSize: Y,
-      titleTopMargin: Z,
-      width: y,
-      height: g,
-      xAxisTitle: v,
-      yAxisTitle: k,
+      titleFontSize: V,
+      titleTopMargin: Y,
+      width: g,
+      height: y,
+      xAxisTitle: E,
+      yAxisTitle: b,
       xRange: j,
-      yRange: B,
-      showLegend: D,
-      seriesCount: n.length,
-      showGridX: M,
-      showGridY: U,
-      showCrosshairs: q,
-      theme: G,
+      yRange: A,
+      showLegend: B,
+      seriesCount: r.length,
+      showGridX: D,
+      showGridY: M,
+      showCrosshairs: W,
+      theme: Z,
       peakAnnotations: O.current
-    }), l = be({ showExportButton: K, width: y, height: g });
-    let a = !1, r = null;
-    return fe().then((d) => {
-      a || !b.current || (d.newPlot(e, t, o, l), X(e), e.on(
+    }), c = be({ showExportButton: I, width: g, height: y });
+    let a = !1, n = null;
+    return ie().then((d) => {
+      a || !k.current || (d.newPlot(e, t, o, c), G(e), e.on(
         "plotly_click",
-        Ce(x)
+        Ne(X)
       ), e.on(
         "plotly_hover",
-        Ne(e, c.length, R, $, C.hoverLineWidthMultiplier)
+        Pe(e, l.length, R, $, C.hoverLineWidthMultiplier)
       ), e.on(
         "plotly_unhover",
-        Pe(e, R, $)
-      ), r = e);
+        Le(e, R, $)
+      ), n = e);
     }), () => {
-      a = !0, R.current = null, r && ce().purge(r);
+      a = !0, R.current = null, n && le().purge(n);
     };
   }, [
-    c,
+    l,
     s,
     re,
-    n.length,
-    y,
+    r.length,
     g,
+    y,
     H,
+    V,
     Y,
-    Z,
-    v,
-    k,
+    E,
+    b,
     u,
     j,
+    A,
     B,
     D,
     M,
+    T,
     U,
     W,
-    A,
-    q,
     m,
-    i,
+    f,
     N,
-    J,
+    F,
     P,
-    K,
+    I,
+    Z,
     G,
-    X,
     // resolvedAppearance included so hover multiplier stays in sync with the
     // event handler closure without it being in a ref itself.
     C
   ]), ne(() => {
-    const e = b.current;
-    e && e._fullLayout && ce().relayout(e, {
+    const e = k.current;
+    e && e._fullLayout && le().relayout(e, {
       annotations: S
     });
-  }, [S]), n.length === 0 ? /* @__PURE__ */ _(
+  }, [S]), r.length === 0 ? /* @__PURE__ */ _(
     "div",
     {
       className: "chromatogram-chart-container relative flex items-center justify-center",
-      style: { width: y, height: g },
+      style: { width: g, height: y },
       children: /* @__PURE__ */ _(
-        Le,
+        $e,
         {
           variant: "no-data",
           title: "No chromatogram data",
@@ -230,8 +227,8 @@ const Re = [], qe = ({
       )
     }
   ) : /* @__PURE__ */ se("div", { className: "chromatogram-chart-container relative", children: [
-    /* @__PURE__ */ _("div", { ref: b, style: { width: "100%", height: "100%" } }),
-    le
+    /* @__PURE__ */ _("div", { ref: k, style: { width: "100%", height: "100%" } }),
+    ce
   ] });
 };
 export {

package/dist/components/charts/Chromatogram/Chromatogram.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chromatogram.js","sources":["../../../../src/components/charts/Chromatogram/Chromatogram.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from \"react\";\n\nimport { useChartTooltip } from \"../ChartTooltip\";\nimport { getLoadedPlotly, loadPlotly } from \"../plotly-loader\";\n\nimport {\n  groupOverlappingPeaks,\n  createGroupAnnotations,\n  resolveSelectionAppearance,\n} from \"./annotations\";\nimport {\n  validateSeriesData,\n  applyBaselineCorrection,\n  processUserAnnotations,\n} from \"./dataProcessing\";\nimport { detectPeaks } from \"./peakDetection\";\nimport {\n  buildTraceData,\n  buildLayout,\n  buildConfig,\n  createClickHandler,\n  createHoverHandler,\n  createUnhoverHandler,\n} from \"./plotBuilder\";\n\nimport type {\n  ChromatogramSeries,\n  PeakAnnotation,\n  PeakSelectEvent,\n  PeakSelectionAppearance,\n  BaselineCorrectionMethod,\n  BoundaryMarkerStyle,\n  BoundaryMarkerType,\n  PeakDetectionOptions,\n  ChromatogramProps,\n  PeakWithMeta,\n} from \"./types\";\nimport type Plotly from \"plotly.js-dist\";\n\nimport { EmptyState } from \"@/components/composed/EmptyState\";\nimport { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\n\n// Re-export types for external use\nexport type {\n  ChromatogramSeries,\n  PeakAnnotation,\n  PeakSelectEvent,\n  PeakSelectionAppearance,\n  BaselineCorrectionMethod,\n  BoundaryMarkerStyle,\n  BoundaryMarkerType,\n  PeakDetectionOptions,\n  ChromatogramProps,\n};\n\n\n// Stable default so the no-annotations case keeps a constant identity; an\n// inline `[]` default would change every render, re-running the plot effect\n// (and tearing down the hover tooltip) on each re-render.\nconst EMPTY_ANNOTATIONS: PeakAnnotation[] = [];\n\nconst Chromatogram: React.FC<ChromatogramProps> = ({\n  series,\n  width = 900,\n  height = 500,\n  title,\n  xAxisTitle = \"Retention Time (min)\",\n  yAxisTitle = \"Signal (mAU)\",\n  annotations = EMPTY_ANNOTATIONS,\n  xRange,\n  yRange,\n  showLegend = true,\n  showGridX = true,\n  showGridY = true,\n  showMarkers = false,\n  markerSize = 4,\n  showCrosshairs = false,\n  baselineCorrection = \"none\",\n  baselineWindowSize = 50,\n  peakDetectionOptions,\n  showPeakAreas = false,\n  boundaryMarkers = \"none\",\n  annotationOverlapThreshold = 0.4,\n  showExportButton = true,\n  selectedPeakIds,\n  onPeakClick,\n  onPeakHover,\n  selectionAppearance,\n  annotationStyle = \"arrow\",\n  titleFontSize = 20,\n  titleTopMargin,\n}) => {\n  const enablePeakDetection = peakDetectionOptions !== undefined;\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n  const { bindTooltip, tooltipElement } = useChartTooltip({\n    xLabel: xAxisTitle,\n    yLabel: yAxisTitle,\n  });\n  // Stable refs for callbacks — avoids including them in effect dep arrays\n  // (consumers often pass arrow functions that change identity every render).\n  const onPeakClickRef = useRef(onPeakClick);\n  const onPeakHoverRef = useRef(onPeakHover);\n  onPeakClickRef.current = onPeakClick;\n  onPeakHoverRef.current = onPeakHover;\n\n  // Tracks the series index whose line is currently thickened on hover.\n  const thickenedSeriesRef = useRef<number | null>(null);\n\n  // Holds the latest peak Plotly annotations so that closures in effects always\n  // read the latest selection-styled annotations.\n  const peakAnnotationsRef = useRef<Partial<Plotly.Annotations>[]>([]);\n\n  // Memoize processed series with baseline correction\n  const processedSeries = useMemo(() => {\n    return series.map((s) => {\n      const validated = validateSeriesData(s.x, s.y);\n      return {\n        ...s,\n        x: validated.x,\n        y: applyBaselineCorrection(validated.y, baselineCorrection, baselineWindowSize),\n      };\n    });\n  }, [series, baselineCorrection, baselineWindowSize]);\n\n  // Process user annotations to convert startX/endX to indices and compute areas\n  const processedAnnotations = useMemo(() => {\n    if (annotations.length === 0 || processedSeries.length === 0) {\n      return annotations;\n    }\n    const { x, y } = processedSeries[0];\n    return processUserAnnotations(annotations, x, y);\n  }, [annotations, processedSeries]);\n\n  // Memoize peak detection results\n  const allDetectedPeaks = useMemo(() => {\n    const peaks: { peaks: PeakAnnotation[]; seriesIndex: number }[] = [];\n    if (enablePeakDetection && peakDetectionOptions) {\n      processedSeries.forEach((s, index) => {\n        const detected = detectPeaks(s.x, s.y, peakDetectionOptions);\n        if (detected.length > 0) {\n          peaks.push({ peaks: detected, seriesIndex: index });\n        }\n      });\n    }\n    return peaks;\n  }, [processedSeries, enablePeakDetection, peakDetectionOptions]);\n\n  // Normalize the selection appearance into primitive fields up front so the\n  // memo below depends on stable values rather than the (possibly unstable)\n  // selectionAppearance object reference. This keeps the dependency array\n  // exhaustive-deps clean without requiring callers to memoize the prop.\n  const selectedBorderColor = selectionAppearance?.selected?.borderColor;\n  const selectedBackgroundColor = selectionAppearance?.selected?.backgroundColor;\n  const selectedBold = selectionAppearance?.selected?.bold;\n  const unselectedOpacity = selectionAppearance?.unselected?.opacity;\n  const hoverLineWidthMultiplier = selectionAppearance?.hoverLineWidthMultiplier;\n\n  // Resolve selection appearance defaults once (stable as long as the\n  // individual fields above don't change).\n  const resolvedAppearance = useMemo(\n    () =>\n      resolveSelectionAppearance({\n        selected: {\n          borderColor: selectedBorderColor,\n          backgroundColor: selectedBackgroundColor,\n          bold: selectedBold,\n        },\n        unselected: { opacity: unselectedOpacity },\n        hoverLineWidthMultiplier,\n      }),\n    [\n      selectedBorderColor,\n      selectedBackgroundColor,\n      selectedBold,\n      unselectedOpacity,\n      hoverLineWidthMultiplier,\n    ]\n  );\n\n  // All peaks that can be interacted with (clicked / hovered / selected),\n  // each with a stable ID and the metadata needed for PeakSelectEvent.\n  const allPeaksForInteraction = useMemo(() => {\n    const result: Array<{\n      peak: PeakAnnotation & { id: string };\n      seriesIndex: number;\n      seriesName: string;\n      isAutoDetected: boolean;\n    }> = [];\n\n    processedAnnotations.forEach((ann, i) => {\n      result.push({\n        peak: { ...ann, id: ann.id ?? `user-ann-${i}` },\n        seriesIndex: 0,\n        seriesName: series[0]?.name ?? \"\",\n        isAutoDetected: false,\n      });\n    });\n\n    allDetectedPeaks.forEach(({ peaks, seriesIndex }) => {\n      peaks.forEach((peak, peakIndex) => {\n        result.push({\n          peak: { ...peak, id: `peak-${seriesIndex}-${peakIndex}` },\n          seriesIndex,\n          seriesName: series[seriesIndex]?.name ?? `Series ${seriesIndex + 1}`,\n          isAutoDetected: true,\n        });\n      });\n    });\n\n    return result;\n  }, [processedAnnotations, allDetectedPeaks, series]);\n\n  // Build Plotly annotation objects for all peaks, applying selection styling.\n  // This memo re-runs when selectedPeakIds or resolvedAppearance changes so the\n  // selection effect can call Plotly.relayout with updated annotations without\n  // triggering a full chart rebuild.\n  const peakAnnotations = useMemo(() => {\n    const anySelected = (selectedPeakIds?.length ?? 0) > 0;\n    const options = {\n      selectedPeakIds: selectedPeakIds ?? [],\n      anySelected,\n      appearance: resolvedAppearance,\n      annotationStyle,\n    };\n\n    const allPeaksWithMeta: PeakWithMeta[] = [];\n\n    processedAnnotations.forEach((ann, i) => {\n      allPeaksWithMeta.push({\n        peak: { ...ann, id: ann.id ?? `user-ann-${i}` },\n        seriesIndex: -1,\n      });\n    });\n\n    if (showPeakAreas && enablePeakDetection) {\n      allDetectedPeaks.forEach(({ peaks, seriesIndex }) => {\n        peaks.forEach((peak, peakIndex) => {\n          allPeaksWithMeta.push({\n            peak: { ...peak, id: `peak-${seriesIndex}-${peakIndex}` },\n            seriesIndex,\n          });\n        });\n      });\n    }\n\n    const groups = groupOverlappingPeaks(allPeaksWithMeta, annotationOverlapThreshold);\n    const result: Partial<Plotly.Annotations>[] = [];\n    for (const group of groups) {\n      result.push(...createGroupAnnotations(group, options));\n    }\n    return result;\n  }, [\n    processedAnnotations,\n    allDetectedPeaks,\n    showPeakAreas,\n    enablePeakDetection,\n    annotationOverlapThreshold,\n    selectedPeakIds,\n    resolvedAppearance,\n    annotationStyle,\n  ]);\n\n  // Keep the ref in sync every render so that closures in effects always read\n  // the latest selection-styled annotations.\n  peakAnnotationsRef.current = peakAnnotations;\n\n  // ── Main chart effect ──────────────────────────────────────────────────────\n  // Rebuilds the full chart when structural props change (data, size, axes, …).\n  // selectedPeakIds and selectionAppearance are intentionally excluded from\n  // deps — selection changes are handled by the lightweight selection effect\n  // below via Plotly.relayout, which preserves the user's current zoom/pan.\n  useEffect(() => {\n    const currentRef = plotRef.current;\n    if (!currentRef || series.length === 0) return;\n\n    // Build trace data (line traces + boundary markers + region overlays +\n    // the invisible hit-area trace that carries peak customdata for\n    // click/hover interaction).\n    const plotData = buildTraceData({\n      processedSeries,\n      processedAnnotations,\n      allDetectedPeaks,\n      allPeaksForInteraction,\n      showMarkers,\n      markerSize,\n      xAxisTitle,\n      yAxisTitle,\n      boundaryMarkers,\n    });\n\n    const layout = buildLayout({\n      title,\n      titleFontSize,\n      titleTopMargin,\n      width,\n      height,\n      xAxisTitle,\n      yAxisTitle,\n      xRange,\n      yRange,\n      showLegend,\n      seriesCount: series.length,\n      showGridX,\n      showGridY,\n      showCrosshairs,\n      theme,\n      peakAnnotations: peakAnnotationsRef.current,\n    });\n\n    const config = buildConfig({ showExportButton, width, height });\n\n    // Plotly is loaded lazily so it stays out of the consumer's main chunk\n    // (SW-2007); the draw is skipped if the effect re-runs or unmounts first.\n    let cancelled = false;\n    let plotElement: HTMLDivElement | null = null;\n    void loadPlotly().then((plotly) => {\n      if (cancelled || !plotRef.current) return;\n      plotly.newPlot(currentRef, plotData, layout, config);\n      bindTooltip(currentRef);\n\n      // ── Event: peak click ────────────────────────────────────────────────\n      (currentRef as unknown as Plotly.PlotlyHTMLElement).on(\n        \"plotly_click\",\n        createClickHandler(onPeakClickRef)\n      );\n\n      (currentRef as unknown as Plotly.PlotlyHTMLElement).on(\n        \"plotly_hover\",\n        createHoverHandler(currentRef, processedSeries.length, thickenedSeriesRef, onPeakHoverRef, resolvedAppearance.hoverLineWidthMultiplier)\n      );\n\n      (currentRef as unknown as Plotly.PlotlyHTMLElement).on(\n        \"plotly_unhover\",\n        createUnhoverHandler(currentRef, thickenedSeriesRef, onPeakHoverRef)\n      );\n\n      // Capture ref value for cleanup\n      plotElement = currentRef;\n    });\n\n    return () => {\n      cancelled = true;\n      thickenedSeriesRef.current = null;\n      if (plotElement) getLoadedPlotly().purge(plotElement);\n    };\n  }, [\n    processedSeries, allDetectedPeaks, allPeaksForInteraction, series.length,\n    width, height, title, titleFontSize, titleTopMargin, xAxisTitle, yAxisTitle,\n    processedAnnotations, xRange, yRange, showLegend, showGridX, showGridY,\n    showMarkers, markerSize, showCrosshairs, enablePeakDetection, peakDetectionOptions,\n    showPeakAreas, boundaryMarkers, annotationOverlapThreshold, showExportButton,\n    theme, bindTooltip,\n    // resolvedAppearance included so hover multiplier stays in sync with the\n    // event handler closure without it being in a ref itself.\n    resolvedAppearance,\n  ]);\n\n  // ── Selection update effect ────────────────────────────────────────────────\n  // Runs when selectedPeakIds / selectionAppearance change (peakAnnotations\n  // recomputes). Uses Plotly.relayout so the user's zoom/pan state is preserved.\n  useEffect(() => {\n    const el = plotRef.current;\n    if (!el) return;\n    // Guard: skip if the chart hasn't been initialized by the main effect yet.\n    // (A truthy _fullLayout also proves newPlot ran, so the lazily-loaded\n    // Plotly module is guaranteed to be available via getLoadedPlotly.)\n    if (!(el as { _fullLayout?: unknown })._fullLayout) return;\n\n    getLoadedPlotly().relayout(el, {\n      annotations: peakAnnotations,\n    } as unknown as Partial<Plotly.Layout>);\n  }, [peakAnnotations]);\n\n  // No data: render an explicit empty state instead of an uninitialized\n  // (blank) Plotly container, so the chart reads as \"no data yet\" rather\n  // than looking broken while data is still loading.\n  if (series.length === 0) {\n    return (\n      <div\n        className=\"chromatogram-chart-container relative flex items-center justify-center\"\n        style={{ width, height }}\n      >\n        <EmptyState\n          variant=\"no-data\"\n          title=\"No chromatogram data\"\n          description=\"There is no signal data to display yet.\"\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"chromatogram-chart-container relative\">\n      <div ref={plotRef} style={{ width: \"100%\", height: \"100%\" }} />\n      {tooltipElement}\n    </div>\n  );\n};\n\nexport { Chromatogram };\n"],"names":["EMPTY_ANNOTATIONS","Chromatogram","series","width","height","title","xAxisTitle","yAxisTitle","annotations","xRange","yRange","showLegend","showGridX","showGridY","showMarkers","markerSize","showCrosshairs","baselineCorrection","baselineWindowSize","peakDetectionOptions","showPeakAreas","boundaryMarkers","annotationOverlapThreshold","showExportButton","selectedPeakIds","onPeakClick","onPeakHover","selectionAppearance","annotationStyle","titleFontSize","titleTopMargin","enablePeakDetection","plotRef","useRef","theme","usePlotlyTheme","bindTooltip","tooltipElement","useChartTooltip","onPeakClickRef","onPeakHoverRef","thickenedSeriesRef","peakAnnotationsRef","processedSeries","useMemo","s","validated","validateSeriesData","applyBaselineCorrection","processedAnnotations","x","y","processUserAnnotations","allDetectedPeaks","peaks","index","detected","detectPeaks","selectedBorderColor","selectedBackgroundColor","selectedBold","unselectedOpacity","hoverLineWidthMultiplier","resolvedAppearance","resolveSelectionAppearance","allPeaksForInteraction","result","ann","i","seriesIndex","peak","peakIndex","peakAnnotations","anySelected","options","allPeaksWithMeta","groups","groupOverlappingPeaks","group","createGroupAnnotations","useEffect","currentRef","plotData","buildTraceData","layout","buildLayout","config","buildConfig","cancelled","plotElement","loadPlotly","plotly","createClickHandler","createHoverHandler","createUnhoverHandler","getLoadedPlotly","el","jsx","EmptyState","jsxs"],"mappings":"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"}
+{"version":3,"file":"Chromatogram.js","sources":["../../../../src/components/charts/Chromatogram/Chromatogram.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from \"react\";\n\nimport { useChartTooltip } from \"../ChartTooltip\";\nimport { getLoadedPlotly, loadPlotly } from \"../plotly-loader\";\n\nimport {\n  groupOverlappingPeaks,\n  createGroupAnnotations,\n  resolveSelectionAppearance,\n} from \"./annotations\";\nimport {\n  validateSeriesData,\n  applyBaselineCorrection,\n  processUserAnnotations,\n} from \"./dataProcessing\";\nimport { detectPeaks } from \"./peakDetection\";\nimport {\n  buildTraceData,\n  buildLayout,\n  buildConfig,\n  buildChromatogramTooltipLines,\n  createClickHandler,\n  createHoverHandler,\n  createUnhoverHandler,\n} from \"./plotBuilder\";\n\nimport type {\n  ChromatogramSeries,\n  PeakAnnotation,\n  PeakSelectEvent,\n  PeakSelectionAppearance,\n  BaselineCorrectionMethod,\n  BoundaryMarkerStyle,\n  BoundaryMarkerType,\n  PeakDetectionOptions,\n  ChromatogramProps,\n  PeakWithMeta,\n} from \"./types\";\nimport type Plotly from \"plotly.js-dist\";\n\nimport { EmptyState } from \"@/components/composed/EmptyState\";\nimport { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\n\n// Re-export types for external use\nexport type {\n  ChromatogramSeries,\n  PeakAnnotation,\n  PeakSelectEvent,\n  PeakSelectionAppearance,\n  BaselineCorrectionMethod,\n  BoundaryMarkerStyle,\n  BoundaryMarkerType,\n  PeakDetectionOptions,\n  ChromatogramProps,\n};\n\n\n// Stable default so the no-annotations case keeps a constant identity; an\n// inline `[]` default would change every render, re-running the plot effect\n// (and tearing down the hover tooltip) on each re-render.\nconst EMPTY_ANNOTATIONS: PeakAnnotation[] = [];\n\nconst Chromatogram: React.FC<ChromatogramProps> = ({\n  series,\n  width = 900,\n  height = 500,\n  title,\n  xAxisTitle = \"Retention Time (min)\",\n  yAxisTitle = \"Signal (mAU)\",\n  annotations = EMPTY_ANNOTATIONS,\n  xRange,\n  yRange,\n  showLegend = true,\n  showGridX = true,\n  showGridY = true,\n  showMarkers = false,\n  markerSize = 4,\n  showCrosshairs = false,\n  baselineCorrection = \"none\",\n  baselineWindowSize = 50,\n  peakDetectionOptions,\n  showPeakAreas = false,\n  boundaryMarkers = \"none\",\n  annotationOverlapThreshold = 0.4,\n  showExportButton = true,\n  selectedPeakIds,\n  onPeakClick,\n  onPeakHover,\n  selectionAppearance,\n  annotationStyle = \"arrow\",\n  titleFontSize = 20,\n  titleTopMargin,\n}) => {\n  const enablePeakDetection = peakDetectionOptions !== undefined;\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n  // Every trace sets hoverinfo \"none\", so this is the only tooltip on hover\n  // (Plotly's unified label used to render alongside it — SW-2298). The lines\n  // are built from the series points, their metadata, and any hovered peak.\n  const { bindTooltip, tooltipElement } = useChartTooltip({\n    getLines: (points) =>\n      buildChromatogramTooltipLines(points, { series, xAxisTitle, yAxisTitle }),\n  });\n  // Stable refs for callbacks — avoids including them in effect dep arrays\n  // (consumers often pass arrow functions that change identity every render).\n  const onPeakClickRef = useRef(onPeakClick);\n  const onPeakHoverRef = useRef(onPeakHover);\n  onPeakClickRef.current = onPeakClick;\n  onPeakHoverRef.current = onPeakHover;\n\n  // Tracks the series index whose line is currently thickened on hover.\n  const thickenedSeriesRef = useRef<number | null>(null);\n\n  // Holds the latest peak Plotly annotations so that closures in effects always\n  // read the latest selection-styled annotations.\n  const peakAnnotationsRef = useRef<Partial<Plotly.Annotations>[]>([]);\n\n  // Memoize processed series with baseline correction\n  const processedSeries = useMemo(() => {\n    return series.map((s) => {\n      const validated = validateSeriesData(s.x, s.y);\n      return {\n        ...s,\n        x: validated.x,\n        y: applyBaselineCorrection(validated.y, baselineCorrection, baselineWindowSize),\n      };\n    });\n  }, [series, baselineCorrection, baselineWindowSize]);\n\n  // Process user annotations to convert startX/endX to indices and compute areas\n  const processedAnnotations = useMemo(() => {\n    if (annotations.length === 0 || processedSeries.length === 0) {\n      return annotations;\n    }\n    const { x, y } = processedSeries[0];\n    return processUserAnnotations(annotations, x, y);\n  }, [annotations, processedSeries]);\n\n  // Memoize peak detection results\n  const allDetectedPeaks = useMemo(() => {\n    const peaks: { peaks: PeakAnnotation[]; seriesIndex: number }[] = [];\n    if (enablePeakDetection && peakDetectionOptions) {\n      processedSeries.forEach((s, index) => {\n        const detected = detectPeaks(s.x, s.y, peakDetectionOptions);\n        if (detected.length > 0) {\n          peaks.push({ peaks: detected, seriesIndex: index });\n        }\n      });\n    }\n    return peaks;\n  }, [processedSeries, enablePeakDetection, peakDetectionOptions]);\n\n  // Normalize the selection appearance into primitive fields up front so the\n  // memo below depends on stable values rather than the (possibly unstable)\n  // selectionAppearance object reference. This keeps the dependency array\n  // exhaustive-deps clean without requiring callers to memoize the prop.\n  const selectedBorderColor = selectionAppearance?.selected?.borderColor;\n  const selectedBackgroundColor = selectionAppearance?.selected?.backgroundColor;\n  const selectedBold = selectionAppearance?.selected?.bold;\n  const unselectedOpacity = selectionAppearance?.unselected?.opacity;\n  const hoverLineWidthMultiplier = selectionAppearance?.hoverLineWidthMultiplier;\n\n  // Resolve selection appearance defaults once (stable as long as the\n  // individual fields above don't change).\n  const resolvedAppearance = useMemo(\n    () =>\n      resolveSelectionAppearance({\n        selected: {\n          borderColor: selectedBorderColor,\n          backgroundColor: selectedBackgroundColor,\n          bold: selectedBold,\n        },\n        unselected: { opacity: unselectedOpacity },\n        hoverLineWidthMultiplier,\n      }),\n    [\n      selectedBorderColor,\n      selectedBackgroundColor,\n      selectedBold,\n      unselectedOpacity,\n      hoverLineWidthMultiplier,\n    ]\n  );\n\n  // All peaks that can be interacted with (clicked / hovered / selected),\n  // each with a stable ID and the metadata needed for PeakSelectEvent.\n  const allPeaksForInteraction = useMemo(() => {\n    const result: Array<{\n      peak: PeakAnnotation & { id: string };\n      seriesIndex: number;\n      seriesName: string;\n      isAutoDetected: boolean;\n    }> = [];\n\n    processedAnnotations.forEach((ann, i) => {\n      result.push({\n        peak: { ...ann, id: ann.id ?? `user-ann-${i}` },\n        seriesIndex: 0,\n        seriesName: series[0]?.name ?? \"\",\n        isAutoDetected: false,\n      });\n    });\n\n    allDetectedPeaks.forEach(({ peaks, seriesIndex }) => {\n      peaks.forEach((peak, peakIndex) => {\n        result.push({\n          peak: { ...peak, id: `peak-${seriesIndex}-${peakIndex}` },\n          seriesIndex,\n          seriesName: series[seriesIndex]?.name ?? `Series ${seriesIndex + 1}`,\n          isAutoDetected: true,\n        });\n      });\n    });\n\n    return result;\n  }, [processedAnnotations, allDetectedPeaks, series]);\n\n  // Build Plotly annotation objects for all peaks, applying selection styling.\n  // This memo re-runs when selectedPeakIds or resolvedAppearance changes so the\n  // selection effect can call Plotly.relayout with updated annotations without\n  // triggering a full chart rebuild.\n  const peakAnnotations = useMemo(() => {\n    const anySelected = (selectedPeakIds?.length ?? 0) > 0;\n    const options = {\n      selectedPeakIds: selectedPeakIds ?? [],\n      anySelected,\n      appearance: resolvedAppearance,\n      annotationStyle,\n    };\n\n    const allPeaksWithMeta: PeakWithMeta[] = [];\n\n    processedAnnotations.forEach((ann, i) => {\n      allPeaksWithMeta.push({\n        peak: { ...ann, id: ann.id ?? `user-ann-${i}` },\n        seriesIndex: -1,\n      });\n    });\n\n    if (showPeakAreas && enablePeakDetection) {\n      allDetectedPeaks.forEach(({ peaks, seriesIndex }) => {\n        peaks.forEach((peak, peakIndex) => {\n          allPeaksWithMeta.push({\n            peak: { ...peak, id: `peak-${seriesIndex}-${peakIndex}` },\n            seriesIndex,\n          });\n        });\n      });\n    }\n\n    const groups = groupOverlappingPeaks(allPeaksWithMeta, annotationOverlapThreshold);\n    const result: Partial<Plotly.Annotations>[] = [];\n    for (const group of groups) {\n      result.push(...createGroupAnnotations(group, options));\n    }\n    return result;\n  }, [\n    processedAnnotations,\n    allDetectedPeaks,\n    showPeakAreas,\n    enablePeakDetection,\n    annotationOverlapThreshold,\n    selectedPeakIds,\n    resolvedAppearance,\n    annotationStyle,\n  ]);\n\n  // Keep the ref in sync every render so that closures in effects always read\n  // the latest selection-styled annotations.\n  peakAnnotationsRef.current = peakAnnotations;\n\n  // ── Main chart effect ──────────────────────────────────────────────────────\n  // Rebuilds the full chart when structural props change (data, size, axes, …).\n  // selectedPeakIds and selectionAppearance are intentionally excluded from\n  // deps — selection changes are handled by the lightweight selection effect\n  // below via Plotly.relayout, which preserves the user's current zoom/pan.\n  useEffect(() => {\n    const currentRef = plotRef.current;\n    if (!currentRef || series.length === 0) return;\n\n    // Build trace data (line traces + boundary markers + region overlays +\n    // the invisible hit-area trace that carries peak customdata for\n    // click/hover interaction).\n    const plotData = buildTraceData({\n      processedSeries,\n      processedAnnotations,\n      allDetectedPeaks,\n      allPeaksForInteraction,\n      showMarkers,\n      markerSize,\n      boundaryMarkers,\n    });\n\n    const layout = buildLayout({\n      title,\n      titleFontSize,\n      titleTopMargin,\n      width,\n      height,\n      xAxisTitle,\n      yAxisTitle,\n      xRange,\n      yRange,\n      showLegend,\n      seriesCount: series.length,\n      showGridX,\n      showGridY,\n      showCrosshairs,\n      theme,\n      peakAnnotations: peakAnnotationsRef.current,\n    });\n\n    const config = buildConfig({ showExportButton, width, height });\n\n    // Plotly is loaded lazily so it stays out of the consumer's main chunk\n    // (SW-2007); the draw is skipped if the effect re-runs or unmounts first.\n    let cancelled = false;\n    let plotElement: HTMLDivElement | null = null;\n    void loadPlotly().then((plotly) => {\n      if (cancelled || !plotRef.current) return;\n      plotly.newPlot(currentRef, plotData, layout, config);\n      bindTooltip(currentRef);\n\n      // ── Event: peak click ────────────────────────────────────────────────\n      (currentRef as unknown as Plotly.PlotlyHTMLElement).on(\n        \"plotly_click\",\n        createClickHandler(onPeakClickRef)\n      );\n\n      (currentRef as unknown as Plotly.PlotlyHTMLElement).on(\n        \"plotly_hover\",\n        createHoverHandler(currentRef, processedSeries.length, thickenedSeriesRef, onPeakHoverRef, resolvedAppearance.hoverLineWidthMultiplier)\n      );\n\n      (currentRef as unknown as Plotly.PlotlyHTMLElement).on(\n        \"plotly_unhover\",\n        createUnhoverHandler(currentRef, thickenedSeriesRef, onPeakHoverRef)\n      );\n\n      // Capture ref value for cleanup\n      plotElement = currentRef;\n    });\n\n    return () => {\n      cancelled = true;\n      thickenedSeriesRef.current = null;\n      if (plotElement) getLoadedPlotly().purge(plotElement);\n    };\n  }, [\n    processedSeries, allDetectedPeaks, allPeaksForInteraction, series.length,\n    width, height, title, titleFontSize, titleTopMargin, xAxisTitle, yAxisTitle,\n    processedAnnotations, xRange, yRange, showLegend, showGridX, showGridY,\n    showMarkers, markerSize, showCrosshairs, enablePeakDetection, peakDetectionOptions,\n    showPeakAreas, boundaryMarkers, annotationOverlapThreshold, showExportButton,\n    theme, bindTooltip,\n    // resolvedAppearance included so hover multiplier stays in sync with the\n    // event handler closure without it being in a ref itself.\n    resolvedAppearance,\n  ]);\n\n  // ── Selection update effect ────────────────────────────────────────────────\n  // Runs when selectedPeakIds / selectionAppearance change (peakAnnotations\n  // recomputes). Uses Plotly.relayout so the user's zoom/pan state is preserved.\n  useEffect(() => {\n    const el = plotRef.current;\n    if (!el) return;\n    // Guard: skip if the chart hasn't been initialized by the main effect yet.\n    // (A truthy _fullLayout also proves newPlot ran, so the lazily-loaded\n    // Plotly module is guaranteed to be available via getLoadedPlotly.)\n    if (!(el as { _fullLayout?: unknown })._fullLayout) return;\n\n    getLoadedPlotly().relayout(el, {\n      annotations: peakAnnotations,\n    } as unknown as Partial<Plotly.Layout>);\n  }, [peakAnnotations]);\n\n  // No data: render an explicit empty state instead of an uninitialized\n  // (blank) Plotly container, so the chart reads as \"no data yet\" rather\n  // than looking broken while data is still loading.\n  if (series.length === 0) {\n    return (\n      <div\n        className=\"chromatogram-chart-container relative flex items-center justify-center\"\n        style={{ width, height }}\n      >\n        <EmptyState\n          variant=\"no-data\"\n          title=\"No chromatogram data\"\n          description=\"There is no signal data to display yet.\"\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"chromatogram-chart-container relative\">\n      <div ref={plotRef} style={{ width: \"100%\", height: \"100%\" }} />\n      {tooltipElement}\n    </div>\n  );\n};\n\nexport { Chromatogram };\n"],"names":["EMPTY_ANNOTATIONS","Chromatogram","series","width","height","title","xAxisTitle","yAxisTitle","annotations","xRange","yRange","showLegend","showGridX","showGridY","showMarkers","markerSize","showCrosshairs","baselineCorrection","baselineWindowSize","peakDetectionOptions","showPeakAreas","boundaryMarkers","annotationOverlapThreshold","showExportButton","selectedPeakIds","onPeakClick","onPeakHover","selectionAppearance","annotationStyle","titleFontSize","titleTopMargin","enablePeakDetection","plotRef","useRef","theme","usePlotlyTheme","bindTooltip","tooltipElement","useChartTooltip","points","buildChromatogramTooltipLines","onPeakClickRef","onPeakHoverRef","thickenedSeriesRef","peakAnnotationsRef","processedSeries","useMemo","s","validated","validateSeriesData","applyBaselineCorrection","processedAnnotations","x","y","processUserAnnotations","allDetectedPeaks","peaks","index","detected","detectPeaks","selectedBorderColor","selectedBackgroundColor","selectedBold","unselectedOpacity","hoverLineWidthMultiplier","resolvedAppearance","resolveSelectionAppearance","allPeaksForInteraction","result","ann","i","seriesIndex","peak","peakIndex","peakAnnotations","anySelected","options","allPeaksWithMeta","groups","groupOverlappingPeaks","group","createGroupAnnotations","useEffect","currentRef","plotData","buildTraceData","layout","buildLayout","config","buildConfig","cancelled","plotElement","loadPlotly","plotly","createClickHandler","createHoverHandler","createUnhoverHandler","getLoadedPlotly","el","jsx","EmptyState","jsxs"],"mappings":"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"}

package/dist/components/charts/Chromatogram/plotBuilder.cjs

@@ -1,2 +1,5 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("../../../utils/colors.cjs"),y=require("../plotly-loader.cjs"),C=require("./boundaryMarkers.cjs"),c=require("./constants.cjs"),g=require("./dataProcessing.cjs"),_=require("./regionOverlays.cjs"),p=require("../../../hooks/use-plotly-theme.cjs");function M(n){const{processedSeries:e,processedAnnotations:a,allDetectedPeaks:i,allPeaksForInteraction:s,showMarkers:d,markerSize:T,xAxisTitle:m,yAxisTitle:l,boundaryMarkers:O}=n,A=e.map((o,u)=>{const t=o.color||f.CHART_COLORS[u%f.CHART_COLORS.length],h=g.buildHoverExtraContent(o.name,o.metadata),r={x:o.x,y:o.y,type:"scatter",mode:d?"lines+markers":"lines",name:o.name,line:{color:t,width:c.CHROMATOGRAM_TRACE.BASE_LINE_WIDTH},hovertemplate:`%{x:.2f} ${m}<br>%{y:.2f} ${l}<extra>${h}</extra>`};return d&&(r.marker={size:T,color:t}),r});if(O!=="none"){const o=g.collectPeaksWithBoundaryData(i,a,e);o.length>0&&A.push(...C.createBoundaryMarkerTraces(o))}if(a.forEach(o=>{o.regionOverlay&&e[0]&&A.push(..._.createRegionOverlayTraces([o],0,e[0]))}),i.forEach(({peaks:o,seriesIndex:u})=>{o.some(t=>t.regionOverlay)&&e[u]&&A.push(..._.createRegionOverlayTraces(o,u,e[u]))}),s.length>0){const o=s.some(t=>t.peak.hoverText),u={x:s.map(t=>t.peak.x),y:s.map(t=>t.peak.y),type:"scatter",mode:"markers",marker:{size:14,opacity:0},showlegend:!1,name:"",customdata:s.map(t=>({id:t.peak.id,peak:t.peak,seriesIndex:t.seriesIndex,seriesName:t.seriesName,isAutoDetected:t.isAutoDetected})),...o?{hovertemplate:s.map(t=>t.peak.hoverText?`${t.peak.hoverText}<extra></extra>`:"<extra></extra>")}:{hovertemplate:"<extra></extra>"}};A.push(u)}return A}function R(n){const{title:e,titleFontSize:a,titleTopMargin:i,width:s,height:d,xAxisTitle:T,yAxisTitle:m,xRange:l,yRange:O,showLegend:A,seriesCount:o,showGridX:u,showGridY:t,showCrosshairs:h,theme:r,peakAnnotations:x}=n;return{title:e?{text:e,font:{size:a,family:p.CHART_FONT_FAMILY,color:r.textColor}}:void 0,width:s,height:d,margin:{l:c.CHROMATOGRAM_LAYOUT.MARGIN_LEFT,r:c.CHROMATOGRAM_LAYOUT.MARGIN_RIGHT,b:c.CHROMATOGRAM_LAYOUT.MARGIN_BOTTOM,t:e?i??c.CHROMATOGRAM_LAYOUT.MARGIN_TOP_WITH_TITLE:c.CHROMATOGRAM_LAYOUT.MARGIN_TOP_NO_TITLE,pad:c.CHROMATOGRAM_LAYOUT.MARGIN_PAD},paper_bgcolor:r.paperBg,plot_bgcolor:r.plotBg,font:{family:p.CHART_FONT_FAMILY},hovermode:h?"x":"x unified",dragmode:"zoom",xaxis:{title:{text:T,font:{size:14,color:r.textSecondary,family:p.CHART_FONT_FAMILY},standoff:15},showgrid:u,gridcolor:r.gridColor,linecolor:r.lineColor,linewidth:1,range:l,autorange:!l,zeroline:!1,tickfont:{size:12,color:r.textColor,family:p.CHART_FONT_FAMILY},showspikes:h,spikemode:"across",spikesnap:"cursor",spikecolor:r.spikeColor,spikethickness:1,spikedash:"dot"},yaxis:{title:{text:m,font:{size:14,color:r.textSecondary,family:p.CHART_FONT_FAMILY},standoff:10},showgrid:t,gridcolor:r.gridColor,linecolor:r.lineColor,linewidth:1,range:O,autorange:!O,zeroline:!1,tickfont:{size:12,color:r.textColor,family:p.CHART_FONT_FAMILY},showspikes:h,spikemode:"across",spikesnap:"cursor",spikecolor:r.spikeColor,spikethickness:1,spikedash:"dot"},legend:{x:.5,y:-.15,xanchor:"center",yanchor:"top",orientation:"h",font:{size:12,color:r.textColor,family:p.CHART_FONT_FAMILY}},showlegend:A&&o>1,annotations:x}}function k(n){const{showExportButton:e,width:a,height:i}=n;return{responsive:!0,displayModeBar:!0,displaylogo:!1,modeBarButtonsToRemove:["lasso2d","select2d",...e?[]:["toImage"]],...e&&{toImageButtonOptions:{format:"png",filename:"chromatogram",width:a,height:i}}}}function H(n,e,a,i,s){return d=>{const T=d.points[0];if(T&&T.curveNumber<e){const l=T.curveNumber;a.current!==l&&(a.current!==null&&y.getLoadedPlotly().restyle(n,{"line.width":c.CHROMATOGRAM_TRACE.BASE_LINE_WIDTH},[a.current]),y.getLoadedPlotly().restyle(n,{"line.width":c.CHROMATOGRAM_TRACE.BASE_LINE_WIDTH*s},[l]),a.current=l)}const m=d.points.find(l=>l.customdata!=null);m&&i.current?.(m.customdata)}}function I(n){return e=>{if(!n.current)return;const a=e.points.find(i=>i.customdata!=null);a&&n.current(a.customdata)}}function L(n,e,a){return()=>{a.current?.(null),e.current!==null&&(y.getLoadedPlotly().restyle(n,{"line.width":c.CHROMATOGRAM_TRACE.BASE_LINE_WIDTH},[e.current]),e.current=null)}}exports.buildConfig=k;exports.buildLayout=R;exports.buildTraceData=M;exports.createClickHandler=I;exports.createHoverHandler=H;exports.createUnhoverHandler=L;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("../../../utils/colors.cjs"),g=require("../plotly-loader.cjs"),L=require("./boundaryMarkers.cjs"),d=require("./constants.cjs"),x=require("./dataProcessing.cjs"),C=require("./regionOverlays.cjs"),m=require("../../../hooks/use-plotly-theme.cjs");function H(t){const{processedSeries:e,processedAnnotations:o,allDetectedPeaks:i,allPeaksForInteraction:a,showMarkers:c,markerSize:p,boundaryMarkers:u}=t,s=e.map((n,r)=>{const T=n.color||_.CHART_COLORS[r%_.CHART_COLORS.length],f={x:n.x,y:n.y,type:"scatter",mode:c?"lines+markers":"lines",name:n.name,line:{color:T,width:d.CHROMATOGRAM_TRACE.BASE_LINE_WIDTH},hoverinfo:"none"};return c&&(f.marker={size:p,color:T}),f});if(u!=="none"){const n=x.collectPeaksWithBoundaryData(i,o,e);n.length>0&&s.push(...L.createBoundaryMarkerTraces(n))}if(o.forEach(n=>{n.regionOverlay&&e[0]&&s.push(...C.createRegionOverlayTraces([n],0,e[0]))}),i.forEach(({peaks:n,seriesIndex:r})=>{n.some(T=>T.regionOverlay)&&e[r]&&s.push(...C.createRegionOverlayTraces(n,r,e[r]))}),a.length>0){const n={x:a.map(r=>r.peak.x),y:a.map(r=>r.peak.y),type:"scatter",mode:"markers",marker:{size:14,opacity:0},showlegend:!1,name:"",customdata:a.map(r=>({id:r.peak.id,peak:r.peak,seriesIndex:r.seriesIndex,seriesName:r.seriesName,isAutoDetected:r.isAutoDetected})),hoverinfo:"none"};s.push(n)}return s}const M=t=>typeof t=="number"?t.toFixed(2):String(t);function y(t){if(!t)return[];const e=t.replace(/<br\s*\/?>/gi,`
+`);return(typeof DOMParser>"u"?e:new DOMParser().parseFromString(e,"text/html").body.textContent??"").split(`
+`).map(i=>i.trim()).filter(Boolean)}function O(t){const e=t.trim(),o={label:e,unit:""};if(!e.endsWith(")"))return o;const i=e.lastIndexOf("(");if(i<=0)return o;const a=e.slice(i+1,-1).trim(),c=e.slice(0,i).trim();return!a||!c||a.includes("(")||a.includes(")")?o:{label:c,unit:a}}const k=(t,e)=>e?`${t} ${e}`:t;function b(t,e,o){const i=x.buildHoverExtraContent(t.name,t.metadata).split("<br>").slice(1);return[`${t.name}: ${k(M(e),o)}`,...i]}function I(t){const e=t.customdata?.peak;return e?y(e.hoverText??e.text):typeof t.text=="string"?y(t.text):[]}function N(t,e){const{series:o,xAxisTitle:i,yAxisTitle:a}=e,c=O(i),{unit:p}=O(a),u=[],s=t.find(r=>r.x!==void 0);s?.x!==void 0&&u.push(`${c.label}: ${k(M(s.x),c.unit)}`);const n=new Set;for(const r of t){const T=r.curveNumber===void 0?void 0:o[r.curveNumber];if(T){r.y!==void 0&&u.push(...b(T,r.y,p));continue}const f=I(r),A=f.join(`
+`);f.length>0&&!n.has(A)&&(n.add(A),u.push(...f))}return u}function w(t){const{title:e,titleFontSize:o,titleTopMargin:i,width:a,height:c,xAxisTitle:p,yAxisTitle:u,xRange:s,yRange:n,showLegend:r,seriesCount:T,showGridX:f,showGridY:A,showCrosshairs:h,theme:l,peakAnnotations:R}=t;return{title:e?{text:e,font:{size:o,family:m.CHART_FONT_FAMILY,color:l.textColor}}:void 0,width:a,height:c,margin:{l:d.CHROMATOGRAM_LAYOUT.MARGIN_LEFT,r:d.CHROMATOGRAM_LAYOUT.MARGIN_RIGHT,b:d.CHROMATOGRAM_LAYOUT.MARGIN_BOTTOM,t:e?i??d.CHROMATOGRAM_LAYOUT.MARGIN_TOP_WITH_TITLE:d.CHROMATOGRAM_LAYOUT.MARGIN_TOP_NO_TITLE,pad:d.CHROMATOGRAM_LAYOUT.MARGIN_PAD},paper_bgcolor:l.paperBg,plot_bgcolor:l.plotBg,font:{family:m.CHART_FONT_FAMILY},hovermode:h?"x":"x unified",dragmode:"zoom",xaxis:{title:{text:p,font:{size:14,color:l.textSecondary,family:m.CHART_FONT_FAMILY},standoff:15},showgrid:f,gridcolor:l.gridColor,linecolor:l.lineColor,linewidth:1,range:s,autorange:!s,zeroline:!1,tickfont:{size:12,color:l.textColor,family:m.CHART_FONT_FAMILY},showspikes:h,spikemode:"across",spikesnap:"cursor",spikecolor:l.spikeColor,spikethickness:1,spikedash:"dot"},yaxis:{title:{text:u,font:{size:14,color:l.textSecondary,family:m.CHART_FONT_FAMILY},standoff:10},showgrid:A,gridcolor:l.gridColor,linecolor:l.lineColor,linewidth:1,range:n,autorange:!n,zeroline:!1,tickfont:{size:12,color:l.textColor,family:m.CHART_FONT_FAMILY},showspikes:h,spikemode:"across",spikesnap:"cursor",spikecolor:l.spikeColor,spikethickness:1,spikedash:"dot"},legend:{x:.5,y:-.15,xanchor:"center",yanchor:"top",orientation:"h",font:{size:12,color:l.textColor,family:m.CHART_FONT_FAMILY}},showlegend:r&&T>1,annotations:R}}function v(t){const{showExportButton:e,width:o,height:i}=t;return{responsive:!0,displayModeBar:!0,displaylogo:!1,modeBarButtonsToRemove:["lasso2d","select2d",...e?[]:["toImage"]],...e&&{toImageButtonOptions:{format:"png",filename:"chromatogram",width:o,height:i}}}}function F(t,e,o,i,a){return c=>{const p=c.points[0];if(p&&p.curveNumber<e){const s=p.curveNumber;o.current!==s&&(o.current!==null&&g.getLoadedPlotly().restyle(t,{"line.width":d.CHROMATOGRAM_TRACE.BASE_LINE_WIDTH},[o.current]),g.getLoadedPlotly().restyle(t,{"line.width":d.CHROMATOGRAM_TRACE.BASE_LINE_WIDTH*a},[s]),o.current=s)}const u=c.points.find(s=>s.customdata!=null);u&&i.current?.(u.customdata)}}function G(t){return e=>{if(!t.current)return;const o=e.points.find(i=>i.customdata!=null);o&&t.current(o.customdata)}}function B(t,e,o){return()=>{o.current?.(null),e.current!==null&&(g.getLoadedPlotly().restyle(t,{"line.width":d.CHROMATOGRAM_TRACE.BASE_LINE_WIDTH},[e.current]),e.current=null)}}exports.buildChromatogramTooltipLines=N;exports.buildConfig=v;exports.buildLayout=w;exports.buildTraceData=H;exports.createClickHandler=G;exports.createHoverHandler=F;exports.createUnhoverHandler=B;exports.htmlToTooltipLines=y;exports.splitAxisTitle=O;
 //# sourceMappingURL=plotBuilder.cjs.map