@tetrascience-npm/tetrascience-react-ui 0.6.0-beta.81.1 → 0.6.0-beta.83.1

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

@@ -1 +1 @@
-{"version":3,"file":"ChromatogramChart.js","sources":["../../../../src/components/charts/ChromatogramChart/ChromatogramChart.tsx"],"sourcesContent":["import Plotly from \"plotly.js-dist\";\nimport React, { useEffect, useMemo, useRef } from \"react\";\n\nimport { CHART_COLORS } from \"../../../utils/colors\";\n\n\nimport {\n  groupOverlappingPeaks,\n  createGroupAnnotations,\n} from \"./annotations\";\nimport { createBoundaryMarkerTraces } from \"./boundaryMarkers\";\nimport { CHROMATOGRAM_LAYOUT } from \"./constants\";\nimport {\n  validateSeriesData,\n  applyBaselineCorrection,\n  buildHoverExtraContent,\n  collectPeaksWithBoundaryData,\n  processUserAnnotations,\n} from \"./dataProcessing\";\nimport { detectPeaks } from \"./peakDetection\";\n\nimport type {\n  ChromatogramSeries,\n  PeakAnnotation,\n  BaselineCorrectionMethod,\n  BoundaryMarkerStyle,\n  BoundaryMarkerType,\n  PeakDetectionOptions,\n  ChromatogramChartProps,\n  PeakWithMeta,\n} from \"./types\";\n\nimport { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\n\n// Re-export types for external use\nexport type {\n  ChromatogramSeries,\n  PeakAnnotation,\n  BaselineCorrectionMethod,\n  BoundaryMarkerStyle,\n  BoundaryMarkerType,\n  PeakDetectionOptions,\n  ChromatogramChartProps,\n};\n\n\nconst ChromatogramChart: React.FC<ChromatogramChartProps> = ({\n  series,\n  width = 900,\n  height = 500,\n  title,\n  xAxisTitle = \"Retention Time (min)\",\n  yAxisTitle = \"Signal (mAU)\",\n  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}) => {\n  // Derive peak detection state from options\n  const enablePeakDetection = peakDetectionOptions !== undefined;\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\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    // Use first series data for index lookup (user annotations apply to first series)\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  useEffect(() => {\n    const currentRef = plotRef.current;\n    if (!currentRef || series.length === 0) return;\n\n    // Build trace data with auto-assigned colors\n    const plotData: Plotly.Data[] = processedSeries.map((s, index) => {\n      const traceColor = s.color || CHART_COLORS[index % CHART_COLORS.length];\n      const extraContent = buildHoverExtraContent(s.name, s.metadata);\n\n      const trace: Plotly.Data = {\n        x: s.x,\n        y: s.y,\n        type: \"scatter\" as const,\n        mode: showMarkers ? \"lines+markers\" as const : \"lines\" as const,\n        name: s.name,\n        line: {\n          color: traceColor,\n          width: 1.5,\n        },\n        hovertemplate: `%{x:.2f} ${xAxisTitle}<br>%{y:.2f} ${yAxisTitle}<extra>${extraContent}</extra>`,\n      };\n      if (showMarkers) {\n        trace.marker = {\n          size: markerSize,\n          color: traceColor,\n        };\n      }\n      return trace;\n    });\n\n    // Add peak boundary markers if enabled\n    if (boundaryMarkers !== \"none\") {\n      const peaksWithData = collectPeaksWithBoundaryData(allDetectedPeaks, processedAnnotations, processedSeries);\n      if (peaksWithData.length > 0) {\n        const boundaryTraces = createBoundaryMarkerTraces(peaksWithData);\n        plotData.push(...boundaryTraces);\n      }\n    }\n\n    // Collect all peaks for unified staggering logic\n    const allPeaksWithMeta: PeakWithMeta[] = [];\n\n    // Add user-defined annotations (seriesIndex -1 indicates user-defined)\n    processedAnnotations.forEach((ann) => {\n      allPeaksWithMeta.push({ peak: ann, seriesIndex: -1 });\n    });\n\n    // Add auto-detected peaks if enabled\n    if (showPeakAreas && enablePeakDetection) {\n      allDetectedPeaks.forEach(({ peaks, seriesIndex }) => {\n        peaks.forEach((peak) => {\n          allPeaksWithMeta.push({ peak, seriesIndex });\n        });\n      });\n    }\n\n    // Group all overlapping peaks and create annotations with staggering\n    const groups = groupOverlappingPeaks(allPeaksWithMeta, annotationOverlapThreshold);\n    const plotlyAnnotations: Partial<Plotly.Annotations>[] = [];\n\n    for (const group of groups) {\n      plotlyAnnotations.push(...createGroupAnnotations(group));\n    }\n\n    const layout: Partial<Plotly.Layout> = {\n      title: title\n        ? {\n            text: title,\n            font: {\n              size: 20,\n              family: \"Inter, sans-serif\",\n              color: theme.textColor,\n            },\n          }\n        : undefined,\n      width,\n      height,\n      margin: {\n        l: CHROMATOGRAM_LAYOUT.MARGIN_LEFT,\n        r: CHROMATOGRAM_LAYOUT.MARGIN_RIGHT,\n        b: CHROMATOGRAM_LAYOUT.MARGIN_BOTTOM,\n        t: title ? CHROMATOGRAM_LAYOUT.MARGIN_TOP_WITH_TITLE : CHROMATOGRAM_LAYOUT.MARGIN_TOP_NO_TITLE,\n        pad: CHROMATOGRAM_LAYOUT.MARGIN_PAD,\n      },\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\n      font: { family: \"Inter, sans-serif\" },\n      hovermode: showCrosshairs ? \"x\" as const : \"x unified\" as const,\n      dragmode: \"zoom\" as const,\n      xaxis: {\n        title: {\n          text: xAxisTitle,\n          font: { size: 14, color: theme.textSecondary, family: \"Inter, sans-serif\" },\n          standoff: 15,\n        },\n        showgrid: showGridX,\n        gridcolor: theme.gridColor,\n        linecolor: theme.lineColor,\n        linewidth: 1,\n        range: xRange,\n        autorange: !xRange,\n        zeroline: false,\n        tickfont: { size: 12, color: theme.textColor, family: \"Inter, sans-serif\" },\n        showspikes: showCrosshairs,\n        spikemode: \"across\" as const,\n        spikesnap: \"cursor\" as const,\n        spikecolor: theme.spikeColor,\n        spikethickness: 1,\n        spikedash: \"dot\" as const,\n      },\n      yaxis: {\n        title: {\n          text: yAxisTitle,\n          font: { size: 14, color: theme.textSecondary, family: \"Inter, sans-serif\" },\n          standoff: 10,\n        },\n        showgrid: showGridY,\n        gridcolor: theme.gridColor,\n        linecolor: theme.lineColor,\n        linewidth: 1,\n        range: yRange,\n        autorange: !yRange,\n        zeroline: false,\n        tickfont: { size: 12, color: theme.textColor, family: \"Inter, sans-serif\" },\n        showspikes: showCrosshairs,\n        spikemode: \"across\" as const,\n        spikesnap: \"cursor\" as const,\n        spikecolor: theme.spikeColor,\n        spikethickness: 1,\n        spikedash: \"dot\" as const,\n      },\n      legend: {\n        x: 0.5,\n        y: -0.15,\n        xanchor: \"center\" as const,\n        yanchor: \"top\" as const,\n        orientation: \"h\" as const,\n        font: { size: 12, color: theme.textColor, family: \"Inter, sans-serif\" },\n      },\n      showlegend: showLegend && series.length > 1,\n      annotations: plotlyAnnotations,\n    };\n\n    const config: Partial<Plotly.Config> = {\n      responsive: true,\n      displayModeBar: true,\n      displaylogo: false,\n      modeBarButtonsToRemove: [\n        \"lasso2d\",\n        \"select2d\",\n        ...(showExportButton ? [] : [\"toImage\"] as Plotly.ModeBarDefaultButtons[]),\n      ] as Plotly.ModeBarDefaultButtons[],\n      ...(showExportButton && {\n        toImageButtonOptions: {\n          format: \"png\",\n          filename: \"chromatogram\",\n          width: width,\n          height: height,\n        },\n      }),\n    };\n\n    Plotly.newPlot(currentRef, plotData, layout, config);\n\n    return () => {\n      if (currentRef) {\n        Plotly.purge(currentRef);\n      }\n    };\n  }, [\n    processedSeries, allDetectedPeaks, series.length, width, height, title, xAxisTitle, yAxisTitle,\n    processedAnnotations, xRange, yRange, showLegend, showGridX, showGridY, showMarkers, markerSize,\n    showCrosshairs, enablePeakDetection, peakDetectionOptions, showPeakAreas, boundaryMarkers,\n    annotationOverlapThreshold, showExportButton, theme,\n  ]);\n\n  return (\n    <div className=\"chromatogram-chart-container\">\n      <div ref={plotRef} style={{ width: \"100%\", height: \"100%\" }} />\n    </div>\n  );\n};\n\nexport { ChromatogramChart };\n\n"],"names":["ChromatogramChart","series","width","height","title","xAxisTitle","yAxisTitle","annotations","xRange","yRange","showLegend","showGridX","showGridY","showMarkers","markerSize","showCrosshairs","baselineCorrection","baselineWindowSize","peakDetectionOptions","showPeakAreas","boundaryMarkers","annotationOverlapThreshold","showExportButton","enablePeakDetection","plotRef","useRef","theme","usePlotlyTheme","processedSeries","useMemo","s","validated","validateSeriesData","applyBaselineCorrection","processedAnnotations","x","y","processUserAnnotations","allDetectedPeaks","peaks","index","detected","detectPeaks","useEffect","currentRef","plotData","traceColor","CHART_COLORS","extraContent","buildHoverExtraContent","trace","peaksWithData","collectPeaksWithBoundaryData","boundaryTraces","createBoundaryMarkerTraces","allPeaksWithMeta","ann","seriesIndex","peak","groups","groupOverlappingPeaks","plotlyAnnotations","group","createGroupAnnotations","layout","CHROMATOGRAM_LAYOUT","config","Plotly","jsx"],"mappings":"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"}
+{"version":3,"file":"ChromatogramChart.js","sources":["../../../../src/components/charts/ChromatogramChart/ChromatogramChart.tsx"],"sourcesContent":["import Plotly from \"plotly.js-dist\";\nimport React, { useEffect, useMemo, useRef } from \"react\";\n\nimport { seriesColor } from \"../../../utils/colors\";\n\n\nimport {\n  groupOverlappingPeaks,\n  createGroupAnnotations,\n} from \"./annotations\";\nimport { createBoundaryMarkerTraces } from \"./boundaryMarkers\";\nimport { CHROMATOGRAM_LAYOUT } from \"./constants\";\nimport {\n  validateSeriesData,\n  applyBaselineCorrection,\n  buildHoverExtraContent,\n  collectPeaksWithBoundaryData,\n  processUserAnnotations,\n} from \"./dataProcessing\";\nimport { detectPeaks } from \"./peakDetection\";\n\nimport type {\n  ChromatogramSeries,\n  PeakAnnotation,\n  BaselineCorrectionMethod,\n  BoundaryMarkerStyle,\n  BoundaryMarkerType,\n  PeakDetectionOptions,\n  ChromatogramChartProps,\n  PeakWithMeta,\n} from \"./types\";\n\nimport { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\n\n// Re-export types for external use\nexport type {\n  ChromatogramSeries,\n  PeakAnnotation,\n  BaselineCorrectionMethod,\n  BoundaryMarkerStyle,\n  BoundaryMarkerType,\n  PeakDetectionOptions,\n  ChromatogramChartProps,\n};\n\n\nconst ChromatogramChart: React.FC<ChromatogramChartProps> = ({\n  series,\n  width = 900,\n  height = 500,\n  title,\n  xAxisTitle = \"Retention Time (min)\",\n  yAxisTitle = \"Signal (mAU)\",\n  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}) => {\n  // Derive peak detection state from options\n  const enablePeakDetection = peakDetectionOptions !== undefined;\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\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    // Use first series data for index lookup (user annotations apply to first series)\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  useEffect(() => {\n    const currentRef = plotRef.current;\n    if (!currentRef || series.length === 0) return;\n\n    // Build trace data with auto-assigned colors\n    const plotData: Plotly.Data[] = processedSeries.map((s, index) => {\n      const traceColor = seriesColor(index, s.color);\n      const extraContent = buildHoverExtraContent(s.name, s.metadata);\n\n      const trace: Plotly.Data = {\n        x: s.x,\n        y: s.y,\n        type: \"scatter\" as const,\n        mode: showMarkers ? \"lines+markers\" as const : \"lines\" as const,\n        name: s.name,\n        line: {\n          color: traceColor,\n          width: 1.5,\n        },\n        hovertemplate: `%{x:.2f} ${xAxisTitle}<br>%{y:.2f} ${yAxisTitle}<extra>${extraContent}</extra>`,\n      };\n      if (showMarkers) {\n        trace.marker = {\n          size: markerSize,\n          color: traceColor,\n        };\n      }\n      return trace;\n    });\n\n    // Add peak boundary markers if enabled\n    if (boundaryMarkers !== \"none\") {\n      const peaksWithData = collectPeaksWithBoundaryData(allDetectedPeaks, processedAnnotations, processedSeries);\n      if (peaksWithData.length > 0) {\n        const boundaryTraces = createBoundaryMarkerTraces(peaksWithData);\n        plotData.push(...boundaryTraces);\n      }\n    }\n\n    // Collect all peaks for unified staggering logic\n    const allPeaksWithMeta: PeakWithMeta[] = [];\n\n    // Add user-defined annotations (seriesIndex -1 indicates user-defined)\n    processedAnnotations.forEach((ann) => {\n      allPeaksWithMeta.push({ peak: ann, seriesIndex: -1 });\n    });\n\n    // Add auto-detected peaks if enabled\n    if (showPeakAreas && enablePeakDetection) {\n      allDetectedPeaks.forEach(({ peaks, seriesIndex }) => {\n        peaks.forEach((peak) => {\n          allPeaksWithMeta.push({ peak, seriesIndex });\n        });\n      });\n    }\n\n    // Group all overlapping peaks and create annotations with staggering\n    const groups = groupOverlappingPeaks(allPeaksWithMeta, annotationOverlapThreshold);\n    const plotlyAnnotations: Partial<Plotly.Annotations>[] = [];\n\n    for (const group of groups) {\n      plotlyAnnotations.push(...createGroupAnnotations(group));\n    }\n\n    const layout: Partial<Plotly.Layout> = {\n      title: title\n        ? {\n            text: title,\n            font: {\n              size: 20,\n              family: \"Inter, sans-serif\",\n              color: theme.textColor,\n            },\n          }\n        : undefined,\n      width,\n      height,\n      margin: {\n        l: CHROMATOGRAM_LAYOUT.MARGIN_LEFT,\n        r: CHROMATOGRAM_LAYOUT.MARGIN_RIGHT,\n        b: CHROMATOGRAM_LAYOUT.MARGIN_BOTTOM,\n        t: title ? CHROMATOGRAM_LAYOUT.MARGIN_TOP_WITH_TITLE : CHROMATOGRAM_LAYOUT.MARGIN_TOP_NO_TITLE,\n        pad: CHROMATOGRAM_LAYOUT.MARGIN_PAD,\n      },\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\n      font: { family: \"Inter, sans-serif\" },\n      hovermode: showCrosshairs ? \"x\" as const : \"x unified\" as const,\n      dragmode: \"zoom\" as const,\n      xaxis: {\n        title: {\n          text: xAxisTitle,\n          font: { size: 14, color: theme.textSecondary, family: \"Inter, sans-serif\" },\n          standoff: 15,\n        },\n        showgrid: showGridX,\n        gridcolor: theme.gridColor,\n        linecolor: theme.lineColor,\n        linewidth: 1,\n        range: xRange,\n        autorange: !xRange,\n        zeroline: false,\n        tickfont: { size: 12, color: theme.textColor, family: \"Inter, sans-serif\" },\n        showspikes: showCrosshairs,\n        spikemode: \"across\" as const,\n        spikesnap: \"cursor\" as const,\n        spikecolor: theme.spikeColor,\n        spikethickness: 1,\n        spikedash: \"dot\" as const,\n      },\n      yaxis: {\n        title: {\n          text: yAxisTitle,\n          font: { size: 14, color: theme.textSecondary, family: \"Inter, sans-serif\" },\n          standoff: 10,\n        },\n        showgrid: showGridY,\n        gridcolor: theme.gridColor,\n        linecolor: theme.lineColor,\n        linewidth: 1,\n        range: yRange,\n        autorange: !yRange,\n        zeroline: false,\n        tickfont: { size: 12, color: theme.textColor, family: \"Inter, sans-serif\" },\n        showspikes: showCrosshairs,\n        spikemode: \"across\" as const,\n        spikesnap: \"cursor\" as const,\n        spikecolor: theme.spikeColor,\n        spikethickness: 1,\n        spikedash: \"dot\" as const,\n      },\n      legend: {\n        x: 0.5,\n        y: -0.15,\n        xanchor: \"center\" as const,\n        yanchor: \"top\" as const,\n        orientation: \"h\" as const,\n        font: { size: 12, color: theme.textColor, family: \"Inter, sans-serif\" },\n      },\n      showlegend: showLegend && series.length > 1,\n      annotations: plotlyAnnotations,\n    };\n\n    const config: Partial<Plotly.Config> = {\n      responsive: true,\n      displayModeBar: true,\n      displaylogo: false,\n      modeBarButtonsToRemove: [\n        \"lasso2d\",\n        \"select2d\",\n        ...(showExportButton ? [] : [\"toImage\"] as Plotly.ModeBarDefaultButtons[]),\n      ] as Plotly.ModeBarDefaultButtons[],\n      ...(showExportButton && {\n        toImageButtonOptions: {\n          format: \"png\",\n          filename: \"chromatogram\",\n          width: width,\n          height: height,\n        },\n      }),\n    };\n\n    Plotly.newPlot(currentRef, plotData, layout, config);\n\n    return () => {\n      if (currentRef) {\n        Plotly.purge(currentRef);\n      }\n    };\n  }, [\n    processedSeries, allDetectedPeaks, series.length, width, height, title, xAxisTitle, yAxisTitle,\n    processedAnnotations, xRange, yRange, showLegend, showGridX, showGridY, showMarkers, markerSize,\n    showCrosshairs, enablePeakDetection, peakDetectionOptions, showPeakAreas, boundaryMarkers,\n    annotationOverlapThreshold, showExportButton, theme,\n  ]);\n\n  return (\n    <div className=\"chromatogram-chart-container\">\n      <div ref={plotRef} style={{ width: \"100%\", height: \"100%\" }} />\n    </div>\n  );\n};\n\nexport { ChromatogramChart };\n\n"],"names":["ChromatogramChart","series","width","height","title","xAxisTitle","yAxisTitle","annotations","xRange","yRange","showLegend","showGridX","showGridY","showMarkers","markerSize","showCrosshairs","baselineCorrection","baselineWindowSize","peakDetectionOptions","showPeakAreas","boundaryMarkers","annotationOverlapThreshold","showExportButton","enablePeakDetection","plotRef","useRef","theme","usePlotlyTheme","processedSeries","useMemo","s","validated","validateSeriesData","applyBaselineCorrection","processedAnnotations","x","y","processUserAnnotations","allDetectedPeaks","peaks","index","detected","detectPeaks","useEffect","currentRef","plotData","traceColor","seriesColor","extraContent","buildHoverExtraContent","trace","peaksWithData","collectPeaksWithBoundaryData","boundaryTraces","createBoundaryMarkerTraces","allPeaksWithMeta","ann","seriesIndex","peak","groups","groupOverlappingPeaks","plotlyAnnotations","group","createGroupAnnotations","layout","CHROMATOGRAM_LAYOUT","config","Plotly","jsx"],"mappings":"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"}

package/dist/components/charts/ChromatogramChart/annotations.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../../../utils/colors.cjs"),l=require("./constants.cjs"),i={default:{ax:0,ay:-35},overlap:[{ax:50,ay:-35},{ax:-60,ay:-35},{ax:70,ay:-55},{ax:-80,ay:-55},{ax:50,ay:-75},{ax:-60,ay:-75}]};function T(t,n){const e=[...t].sort((a,s)=>a.peak.x-s.peak.x),o=[];let r=[];for(const a of e){if(r.length===0){r.push(a);continue}const s=r[r.length-1];Math.abs(a.peak.x-s.peak.x)<n?r.push(a):(o.push(r),r=[a])}return r.length>0&&o.push(r),o}function O(t,n,e){const o=n===-1,r=o?c.COLORS.GREY_500:c.CHART_COLORS[n%c.CHART_COLORS.length],a=o?c.COLORS.BLACK_900:r,s=t.text??(t._computed?.area===void 0?"":`Area: ${t._computed.area.toFixed(2)}`),u=o&&t.ax!==void 0?t.ax:e.ax,A=o&&t.ay!==void 0?t.ay:e.ay;return{x:t.x,y:t.y,text:s,showarrow:!0,arrowhead:2,arrowsize:1,arrowwidth:1,arrowcolor:r,ax:u,ay:A,font:{size:o?l.CHROMATOGRAM_ANNOTATION.USER_ANNOTATION_FONT_SIZE:l.CHROMATOGRAM_ANNOTATION.AUTO_ANNOTATION_FONT_SIZE,color:a,family:"Inter, sans-serif"},bgcolor:c.COLORS.WHITE,borderpad:2,bordercolor:o?void 0:r,borderwidth:o?0:1}}function d(t){if(t.length===1){const{peak:e,seriesIndex:o}=t[0];return[O(e,o,i.default)]}return[...t].sort((e,o)=>e.peak.y-o.peak.y).map(({peak:e,seriesIndex:o},r)=>{const a=i.overlap[r%i.overlap.length];return O(e,o,a)})}exports.ANNOTATION_SLOTS=i;exports.createGroupAnnotations=d;exports.createPeakAnnotation=O;exports.groupOverlappingPeaks=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("../../../utils/colors.cjs"),O=require("./constants.cjs"),A={default:{ax:0,ay:-35},overlap:[{ax:50,ay:-35},{ax:-60,ay:-35},{ax:70,ay:-55},{ax:-80,ay:-55},{ax:50,ay:-75},{ax:-60,ay:-75}]};function u(t,n){const e=[...t].sort((a,s)=>a.peak.x-s.peak.x),o=[];let r=[];for(const a of e){if(r.length===0){r.push(a);continue}const s=r[r.length-1];Math.abs(a.peak.x-s.peak.x)<n?r.push(a):(o.push(r),r=[a])}return r.length>0&&o.push(r),o}function c(t,n,e){const o=n===-1,r=o?O.CHROMATOGRAM_ANNOTATION.USER_ANNOTATION_COLOR:T.seriesColor(n),a=o?O.CHROMATOGRAM_ANNOTATION.USER_ANNOTATION_TEXT_COLOR:r,s=t.text??(t._computed?.area===void 0?"":`Area: ${t._computed.area.toFixed(2)}`),i=o&&t.ax!==void 0?t.ax:e.ax,N=o&&t.ay!==void 0?t.ay:e.ay;return{x:t.x,y:t.y,text:s,showarrow:!0,arrowhead:2,arrowsize:1,arrowwidth:1,arrowcolor:r,ax:i,ay:N,font:{size:o?O.CHROMATOGRAM_ANNOTATION.USER_ANNOTATION_FONT_SIZE:O.CHROMATOGRAM_ANNOTATION.AUTO_ANNOTATION_FONT_SIZE,color:a,family:"Inter, sans-serif"},bgcolor:O.CHROMATOGRAM_ANNOTATION.BACKGROUND_COLOR,borderpad:2,bordercolor:o?void 0:r,borderwidth:o?0:1}}function l(t){if(t.length===1){const{peak:e,seriesIndex:o}=t[0];return[c(e,o,A.default)]}return[...t].sort((e,o)=>e.peak.y-o.peak.y).map(({peak:e,seriesIndex:o},r)=>{const a=A.overlap[r%A.overlap.length];return c(e,o,a)})}exports.ANNOTATION_SLOTS=A;exports.createGroupAnnotations=l;exports.createPeakAnnotation=c;exports.groupOverlappingPeaks=u;
 //# sourceMappingURL=annotations.cjs.map

package/dist/components/charts/ChromatogramChart/annotations.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"annotations.cjs","sources":["../../../../src/components/charts/ChromatogramChart/annotations.ts"],"sourcesContent":["/**\n * Annotation utilities for ChromatogramChart\n */\n\nimport { COLORS, CHART_COLORS } from \"../../../utils/colors\";\n\nimport { CHROMATOGRAM_ANNOTATION } from \"./constants\";\n\nimport type { PeakAnnotation, PeakWithMeta } from \"./types\";\nimport type Plotly from \"plotly.js-dist\";\n\n/**\n * Annotation slot positions for peak labels\n */\nexport const ANNOTATION_SLOTS = {\n  default: { ax: 0, ay: -35 },\n  overlap: [\n    { ax: 50, ay: -35 }, // Right, level 1\n    { ax: -60, ay: -35 }, // Left, level 1\n    { ax: 70, ay: -55 }, // Right, level 2\n    { ax: -80, ay: -55 }, // Left, level 2\n    { ax: 50, ay: -75 }, // Right, level 3\n    { ax: -60, ay: -75 }, // Left, level 3\n  ],\n};\n\n/**\n * Group overlapping peaks by retention time (x) proximity\n */\nexport function groupOverlappingPeaks(\n  peaksWithMeta: PeakWithMeta[],\n  overlapThreshold: number\n): PeakWithMeta[][] {\n  const sorted = [...peaksWithMeta].sort((a, b) => a.peak.x - b.peak.x);\n\n  const groups: PeakWithMeta[][] = [];\n  let currentGroup: PeakWithMeta[] = [];\n\n  for (const current of sorted) {\n    if (currentGroup.length === 0) {\n      currentGroup.push(current);\n      continue;\n    }\n\n    const lastInGroup = currentGroup[currentGroup.length - 1];\n    const timeDiff = Math.abs(current.peak.x - lastInGroup.peak.x);\n\n    if (timeDiff < overlapThreshold) {\n      currentGroup.push(current);\n    } else {\n      groups.push(currentGroup);\n      currentGroup = [current];\n    }\n  }\n\n  if (currentGroup.length > 0) {\n    groups.push(currentGroup);\n  }\n\n  return groups;\n}\n\n/**\n * Create a Plotly annotation for a peak.\n * seriesIndex of -1 indicates a user-defined annotation (uses grey/black styling).\n */\nexport function createPeakAnnotation(\n  peak: PeakAnnotation,\n  seriesIndex: number,\n  slot: { ax: number; ay: number }\n): Partial<Plotly.Annotations> {\n  const isUserDefined = seriesIndex === -1;\n  const color = isUserDefined\n    ? COLORS.GREY_500\n    : CHART_COLORS[seriesIndex % CHART_COLORS.length];\n  const textColor = isUserDefined ? COLORS.BLACK_900 : color;\n\n  // Use provided text or auto-generate from computed area\n  const text = peak.text ?? (peak._computed?.area === undefined ? \"\" : `Area: ${peak._computed.area.toFixed(2)}`);\n\n  // For user-defined annotations, respect their ax/ay if provided\n  const ax = isUserDefined && peak.ax !== undefined ? peak.ax : slot.ax;\n  const ay = isUserDefined && peak.ay !== undefined ? peak.ay : slot.ay;\n\n  return {\n    x: peak.x,\n    y: peak.y,\n    text,\n    showarrow: true,\n    arrowhead: 2,\n    arrowsize: 1,\n    arrowwidth: 1,\n    arrowcolor: color,\n    ax,\n    ay,\n    font: {\n      size: isUserDefined\n        ? CHROMATOGRAM_ANNOTATION.USER_ANNOTATION_FONT_SIZE\n        : CHROMATOGRAM_ANNOTATION.AUTO_ANNOTATION_FONT_SIZE,\n      color: textColor,\n      family: \"Inter, sans-serif\",\n    },\n    bgcolor: COLORS.WHITE,\n    borderpad: 2,\n    bordercolor: isUserDefined ? undefined : color,\n    borderwidth: isUserDefined ? 0 : 1,\n  };\n}\n\n/**\n * Create annotations for a group of peaks, handling overlap positioning\n */\nexport function createGroupAnnotations(\n  group: PeakWithMeta[]\n): Partial<Plotly.Annotations>[] {\n  if (group.length === 1) {\n    const { peak, seriesIndex } = group[0];\n    return [createPeakAnnotation(peak, seriesIndex, ANNOTATION_SLOTS.default)];\n  }\n\n  // Sort by intensity (y, lowest first) so lower peaks get closer annotations\n  const sortedGroup = [...group].sort((a, b) => a.peak.y - b.peak.y);\n\n  return sortedGroup.map(({ peak, seriesIndex }, slotIndex) => {\n    const slot =\n      ANNOTATION_SLOTS.overlap[slotIndex % ANNOTATION_SLOTS.overlap.length];\n    return createPeakAnnotation(peak, seriesIndex, slot);\n  });\n}\n\n"],"names":["ANNOTATION_SLOTS","groupOverlappingPeaks","peaksWithMeta","overlapThreshold","sorted","b","groups","currentGroup","current","lastInGroup","createPeakAnnotation","peak","seriesIndex","slot","isUserDefined","color","COLORS","CHART_COLORS","textColor","text","ax","ay","CHROMATOGRAM_ANNOTATION","createGroupAnnotations","group","a","slotIndex"],"mappings":"0JAcaA,EAAmB,CAC9B,QAAS,CAAE,GAAI,EAAG,GAAI,GAAA,EACtB,QAAS,CACP,CAAE,GAAI,GAAI,GAAI,GAAA,EACd,CAAE,GAAI,IAAK,GAAI,GAAA,EACf,CAAE,GAAI,GAAI,GAAI,GAAA,EACd,CAAE,GAAI,IAAK,GAAI,GAAA,EACf,CAAE,GAAI,GAAI,GAAI,GAAA,EACd,CAAE,GAAI,IAAK,GAAI,GAAA,CAAI,CAEvB,EAKO,SAASC,EACdC,EACAC,EACkB,CAClB,MAAMC,EAAS,CAAC,GAAGF,CAAa,EAAE,KAAK,CAAC,EAAGG,IAAM,EAAE,KAAK,EAAIA,EAAE,KAAK,CAAC,EAE9DC,EAA2B,CAAA,EACjC,IAAIC,EAA+B,CAAA,EAEnC,UAAWC,KAAWJ,EAAQ,CAC5B,GAAIG,EAAa,SAAW,EAAG,CAC7BA,EAAa,KAAKC,CAAO,EACzB,QACF,CAEA,MAAMC,EAAcF,EAAaA,EAAa,OAAS,CAAC,EACvC,KAAK,IAAIC,EAAQ,KAAK,EAAIC,EAAY,KAAK,CAAC,EAE9CN,EACbI,EAAa,KAAKC,CAAO,GAEzBF,EAAO,KAAKC,CAAY,EACxBA,EAAe,CAACC,CAAO,EAE3B,CAEA,OAAID,EAAa,OAAS,GACxBD,EAAO,KAAKC,CAAY,EAGnBD,CACT,CAMO,SAASI,EACdC,EACAC,EACAC,EAC6B,CAC7B,MAAMC,EAAgBF,IAAgB,GAChCG,EAAQD,EACVE,SAAO,SACPC,EAAAA,aAAaL,EAAcK,EAAAA,aAAa,MAAM,EAC5CC,EAAYJ,EAAgBE,EAAAA,OAAO,UAAYD,EAG/CI,EAAOR,EAAK,OAASA,EAAK,WAAW,OAAS,OAAY,GAAK,SAASA,EAAK,UAAU,KAAK,QAAQ,CAAC,CAAC,IAGtGS,EAAKN,GAAiBH,EAAK,KAAO,OAAYA,EAAK,GAAKE,EAAK,GAC7DQ,EAAKP,GAAiBH,EAAK,KAAO,OAAYA,EAAK,GAAKE,EAAK,GAEnE,MAAO,CACL,EAAGF,EAAK,EACR,EAAGA,EAAK,EACR,KAAAQ,EACA,UAAW,GACX,UAAW,EACX,UAAW,EACX,WAAY,EACZ,WAAYJ,EACZ,GAAAK,EACA,GAAAC,EACA,KAAM,CACJ,KAAMP,EACFQ,EAAAA,wBAAwB,0BACxBA,EAAAA,wBAAwB,0BAC5B,MAAOJ,EACP,OAAQ,mBAAA,EAEV,QAASF,EAAAA,OAAO,MAChB,UAAW,EACX,YAAaF,EAAgB,OAAYC,EACzC,YAAaD,EAAgB,EAAI,CAAA,CAErC,CAKO,SAASS,EACdC,EAC+B,CAC/B,GAAIA,EAAM,SAAW,EAAG,CACtB,KAAM,CAAE,KAAAb,EAAM,YAAAC,GAAgBY,EAAM,CAAC,EACrC,MAAO,CAACd,EAAqBC,EAAMC,EAAaZ,EAAiB,OAAO,CAAC,CAC3E,CAKA,MAFoB,CAAC,GAAGwB,CAAK,EAAE,KAAK,CAACC,EAAGpB,IAAMoB,EAAE,KAAK,EAAIpB,EAAE,KAAK,CAAC,EAE9C,IAAI,CAAC,CAAE,KAAAM,EAAM,YAAAC,CAAA,EAAec,IAAc,CAC3D,MAAMb,EACJb,EAAiB,QAAQ0B,EAAY1B,EAAiB,QAAQ,MAAM,EACtE,OAAOU,EAAqBC,EAAMC,EAAaC,CAAI,CACrD,CAAC,CACH"}
+{"version":3,"file":"annotations.cjs","sources":["../../../../src/components/charts/ChromatogramChart/annotations.ts"],"sourcesContent":["/**\n * Annotation utilities for ChromatogramChart\n */\n\nimport { seriesColor } from \"../../../utils/colors\";\n\nimport { CHROMATOGRAM_ANNOTATION } from \"./constants\";\n\nimport type { PeakAnnotation, PeakWithMeta } from \"./types\";\nimport type Plotly from \"plotly.js-dist\";\n\n/**\n * Annotation slot positions for peak labels\n */\nexport const ANNOTATION_SLOTS = {\n  default: { ax: 0, ay: -35 },\n  overlap: [\n    { ax: 50, ay: -35 }, // Right, level 1\n    { ax: -60, ay: -35 }, // Left, level 1\n    { ax: 70, ay: -55 }, // Right, level 2\n    { ax: -80, ay: -55 }, // Left, level 2\n    { ax: 50, ay: -75 }, // Right, level 3\n    { ax: -60, ay: -75 }, // Left, level 3\n  ],\n};\n\n/**\n * Group overlapping peaks by retention time (x) proximity\n */\nexport function groupOverlappingPeaks(\n  peaksWithMeta: PeakWithMeta[],\n  overlapThreshold: number\n): PeakWithMeta[][] {\n  const sorted = [...peaksWithMeta].sort((a, b) => a.peak.x - b.peak.x);\n\n  const groups: PeakWithMeta[][] = [];\n  let currentGroup: PeakWithMeta[] = [];\n\n  for (const current of sorted) {\n    if (currentGroup.length === 0) {\n      currentGroup.push(current);\n      continue;\n    }\n\n    const lastInGroup = currentGroup[currentGroup.length - 1];\n    const timeDiff = Math.abs(current.peak.x - lastInGroup.peak.x);\n\n    if (timeDiff < overlapThreshold) {\n      currentGroup.push(current);\n    } else {\n      groups.push(currentGroup);\n      currentGroup = [current];\n    }\n  }\n\n  if (currentGroup.length > 0) {\n    groups.push(currentGroup);\n  }\n\n  return groups;\n}\n\n/**\n * Create a Plotly annotation for a peak.\n * seriesIndex of -1 indicates a user-defined annotation (uses grey/black styling).\n */\nexport function createPeakAnnotation(\n  peak: PeakAnnotation,\n  seriesIndex: number,\n  slot: { ax: number; ay: number }\n): Partial<Plotly.Annotations> {\n  const isUserDefined = seriesIndex === -1;\n  const color = isUserDefined\n    ? CHROMATOGRAM_ANNOTATION.USER_ANNOTATION_COLOR\n    : seriesColor(seriesIndex);\n  const textColor = isUserDefined\n    ? CHROMATOGRAM_ANNOTATION.USER_ANNOTATION_TEXT_COLOR\n    : color;\n\n  // Use provided text or auto-generate from computed area\n  const text = peak.text ?? (peak._computed?.area === undefined ? \"\" : `Area: ${peak._computed.area.toFixed(2)}`);\n\n  // For user-defined annotations, respect their ax/ay if provided\n  const ax = isUserDefined && peak.ax !== undefined ? peak.ax : slot.ax;\n  const ay = isUserDefined && peak.ay !== undefined ? peak.ay : slot.ay;\n\n  return {\n    x: peak.x,\n    y: peak.y,\n    text,\n    showarrow: true,\n    arrowhead: 2,\n    arrowsize: 1,\n    arrowwidth: 1,\n    arrowcolor: color,\n    ax,\n    ay,\n    font: {\n      size: isUserDefined\n        ? CHROMATOGRAM_ANNOTATION.USER_ANNOTATION_FONT_SIZE\n        : CHROMATOGRAM_ANNOTATION.AUTO_ANNOTATION_FONT_SIZE,\n      color: textColor,\n      family: \"Inter, sans-serif\",\n    },\n    bgcolor: CHROMATOGRAM_ANNOTATION.BACKGROUND_COLOR,\n    borderpad: 2,\n    bordercolor: isUserDefined ? undefined : color,\n    borderwidth: isUserDefined ? 0 : 1,\n  };\n}\n\n/**\n * Create annotations for a group of peaks, handling overlap positioning\n */\nexport function createGroupAnnotations(\n  group: PeakWithMeta[]\n): Partial<Plotly.Annotations>[] {\n  if (group.length === 1) {\n    const { peak, seriesIndex } = group[0];\n    return [createPeakAnnotation(peak, seriesIndex, ANNOTATION_SLOTS.default)];\n  }\n\n  // Sort by intensity (y, lowest first) so lower peaks get closer annotations\n  const sortedGroup = [...group].sort((a, b) => a.peak.y - b.peak.y);\n\n  return sortedGroup.map(({ peak, seriesIndex }, slotIndex) => {\n    const slot =\n      ANNOTATION_SLOTS.overlap[slotIndex % ANNOTATION_SLOTS.overlap.length];\n    return createPeakAnnotation(peak, seriesIndex, slot);\n  });\n}\n\n"],"names":["ANNOTATION_SLOTS","groupOverlappingPeaks","peaksWithMeta","overlapThreshold","sorted","b","groups","currentGroup","current","lastInGroup","createPeakAnnotation","peak","seriesIndex","slot","isUserDefined","color","CHROMATOGRAM_ANNOTATION","seriesColor","textColor","text","ax","ay","createGroupAnnotations","group","a","slotIndex"],"mappings":"0JAcaA,EAAmB,CAC9B,QAAS,CAAE,GAAI,EAAG,GAAI,GAAA,EACtB,QAAS,CACP,CAAE,GAAI,GAAI,GAAI,GAAA,EACd,CAAE,GAAI,IAAK,GAAI,GAAA,EACf,CAAE,GAAI,GAAI,GAAI,GAAA,EACd,CAAE,GAAI,IAAK,GAAI,GAAA,EACf,CAAE,GAAI,GAAI,GAAI,GAAA,EACd,CAAE,GAAI,IAAK,GAAI,GAAA,CAAI,CAEvB,EAKO,SAASC,EACdC,EACAC,EACkB,CAClB,MAAMC,EAAS,CAAC,GAAGF,CAAa,EAAE,KAAK,CAAC,EAAGG,IAAM,EAAE,KAAK,EAAIA,EAAE,KAAK,CAAC,EAE9DC,EAA2B,CAAA,EACjC,IAAIC,EAA+B,CAAA,EAEnC,UAAWC,KAAWJ,EAAQ,CAC5B,GAAIG,EAAa,SAAW,EAAG,CAC7BA,EAAa,KAAKC,CAAO,EACzB,QACF,CAEA,MAAMC,EAAcF,EAAaA,EAAa,OAAS,CAAC,EACvC,KAAK,IAAIC,EAAQ,KAAK,EAAIC,EAAY,KAAK,CAAC,EAE9CN,EACbI,EAAa,KAAKC,CAAO,GAEzBF,EAAO,KAAKC,CAAY,EACxBA,EAAe,CAACC,CAAO,EAE3B,CAEA,OAAID,EAAa,OAAS,GACxBD,EAAO,KAAKC,CAAY,EAGnBD,CACT,CAMO,SAASI,EACdC,EACAC,EACAC,EAC6B,CAC7B,MAAMC,EAAgBF,IAAgB,GAChCG,EAAQD,EACVE,EAAAA,wBAAwB,sBACxBC,EAAAA,YAAYL,CAAW,EACrBM,EAAYJ,EACdE,EAAAA,wBAAwB,2BACxBD,EAGEI,EAAOR,EAAK,OAASA,EAAK,WAAW,OAAS,OAAY,GAAK,SAASA,EAAK,UAAU,KAAK,QAAQ,CAAC,CAAC,IAGtGS,EAAKN,GAAiBH,EAAK,KAAO,OAAYA,EAAK,GAAKE,EAAK,GAC7DQ,EAAKP,GAAiBH,EAAK,KAAO,OAAYA,EAAK,GAAKE,EAAK,GAEnE,MAAO,CACL,EAAGF,EAAK,EACR,EAAGA,EAAK,EACR,KAAAQ,EACA,UAAW,GACX,UAAW,EACX,UAAW,EACX,WAAY,EACZ,WAAYJ,EACZ,GAAAK,EACA,GAAAC,EACA,KAAM,CACJ,KAAMP,EACFE,EAAAA,wBAAwB,0BACxBA,EAAAA,wBAAwB,0BAC5B,MAAOE,EACP,OAAQ,mBAAA,EAEV,QAASF,EAAAA,wBAAwB,iBACjC,UAAW,EACX,YAAaF,EAAgB,OAAYC,EACzC,YAAaD,EAAgB,EAAI,CAAA,CAErC,CAKO,SAASQ,EACdC,EAC+B,CAC/B,GAAIA,EAAM,SAAW,EAAG,CACtB,KAAM,CAAE,KAAAZ,EAAM,YAAAC,GAAgBW,EAAM,CAAC,EACrC,MAAO,CAACb,EAAqBC,EAAMC,EAAaZ,EAAiB,OAAO,CAAC,CAC3E,CAKA,MAFoB,CAAC,GAAGuB,CAAK,EAAE,KAAK,CAACC,EAAGnB,IAAMmB,EAAE,KAAK,EAAInB,EAAE,KAAK,CAAC,EAE9C,IAAI,CAAC,CAAE,KAAAM,EAAM,YAAAC,CAAA,EAAea,IAAc,CAC3D,MAAMZ,EACJb,EAAiB,QAAQyB,EAAYzB,EAAiB,QAAQ,MAAM,EACtE,OAAOU,EAAqBC,EAAMC,EAAaC,CAAI,CACrD,CAAC,CACH"}

package/dist/components/charts/ChromatogramChart/annotations.js

@@ -1,6 +1,6 @@
-import { COLORS as c, CHART_COLORS as l } from "../../../utils/colors.js";
-import { CHROMATOGRAM_ANNOTATION as x } from "./constants.js";
-const i = {
+import { seriesColor as x } from "../../../utils/colors.js";
+import { CHROMATOGRAM_ANNOTATION as i } from "./constants.js";
+const c = {
   default: { ax: 0, ay: -35 },
   overlap: [
     { ax: 50, ay: -35 },
@@ -17,57 +17,57 @@ const i = {
     // Left, level 3
   ]
 };
-function y(t, n) {
-  const e = [...t].sort((a, s) => a.peak.x - s.peak.x), o = [];
-  let r = [];
+function d(r, n) {
+  const e = [...r].sort((a, s) => a.peak.x - s.peak.x), o = [];
+  let t = [];
   for (const a of e) {
-    if (r.length === 0) {
-      r.push(a);
+    if (t.length === 0) {
+      t.push(a);
       continue;
     }
-    const s = r[r.length - 1];
-    Math.abs(a.peak.x - s.peak.x) < n ? r.push(a) : (o.push(r), r = [a]);
+    const s = t[t.length - 1];
+    Math.abs(a.peak.x - s.peak.x) < n ? t.push(a) : (o.push(t), t = [a]);
   }
-  return r.length > 0 && o.push(r), o;
+  return t.length > 0 && o.push(t), o;
 }
-function f(t, n, e) {
-  const o = n === -1, r = o ? c.GREY_500 : l[n % l.length], a = o ? c.BLACK_900 : r, s = t.text ?? (t._computed?.area === void 0 ? "" : `Area: ${t._computed.area.toFixed(2)}`), u = o && t.ax !== void 0 ? t.ax : e.ax, d = o && t.ay !== void 0 ? t.ay : e.ay;
+function u(r, n, e) {
+  const o = n === -1, t = o ? i.USER_ANNOTATION_COLOR : x(n), a = o ? i.USER_ANNOTATION_TEXT_COLOR : t, s = r.text ?? (r._computed?.area === void 0 ? "" : `Area: ${r._computed.area.toFixed(2)}`), O = o && r.ax !== void 0 ? r.ax : e.ax, l = o && r.ay !== void 0 ? r.ay : e.ay;
   return {
-    x: t.x,
-    y: t.y,
+    x: r.x,
+    y: r.y,
     text: s,
     showarrow: !0,
     arrowhead: 2,
     arrowsize: 1,
     arrowwidth: 1,
-    arrowcolor: r,
-    ax: u,
-    ay: d,
+    arrowcolor: t,
+    ax: O,
+    ay: l,
     font: {
-      size: o ? x.USER_ANNOTATION_FONT_SIZE : x.AUTO_ANNOTATION_FONT_SIZE,
+      size: o ? i.USER_ANNOTATION_FONT_SIZE : i.AUTO_ANNOTATION_FONT_SIZE,
       color: a,
       family: "Inter, sans-serif"
     },
-    bgcolor: c.WHITE,
+    bgcolor: i.BACKGROUND_COLOR,
     borderpad: 2,
-    bordercolor: o ? void 0 : r,
+    bordercolor: o ? void 0 : t,
     borderwidth: o ? 0 : 1
   };
 }
-function A(t) {
-  if (t.length === 1) {
-    const { peak: e, seriesIndex: o } = t[0];
-    return [f(e, o, i.default)];
+function p(r) {
+  if (r.length === 1) {
+    const { peak: e, seriesIndex: o } = r[0];
+    return [u(e, o, c.default)];
   }
-  return [...t].sort((e, o) => e.peak.y - o.peak.y).map(({ peak: e, seriesIndex: o }, r) => {
-    const a = i.overlap[r % i.overlap.length];
-    return f(e, o, a);
+  return [...r].sort((e, o) => e.peak.y - o.peak.y).map(({ peak: e, seriesIndex: o }, t) => {
+    const a = c.overlap[t % c.overlap.length];
+    return u(e, o, a);
   });
 }
 export {
-  i as ANNOTATION_SLOTS,
-  A as createGroupAnnotations,
-  f as createPeakAnnotation,
-  y as groupOverlappingPeaks
+  c as ANNOTATION_SLOTS,
+  p as createGroupAnnotations,
+  u as createPeakAnnotation,
+  d as groupOverlappingPeaks
 };
 //# sourceMappingURL=annotations.js.map

package/dist/components/charts/ChromatogramChart/annotations.js.map

@@ -1 +1 @@
-{"version":3,"file":"annotations.js","sources":["../../../../src/components/charts/ChromatogramChart/annotations.ts"],"sourcesContent":["/**\n * Annotation utilities for ChromatogramChart\n */\n\nimport { COLORS, CHART_COLORS } from \"../../../utils/colors\";\n\nimport { CHROMATOGRAM_ANNOTATION } from \"./constants\";\n\nimport type { PeakAnnotation, PeakWithMeta } from \"./types\";\nimport type Plotly from \"plotly.js-dist\";\n\n/**\n * Annotation slot positions for peak labels\n */\nexport const ANNOTATION_SLOTS = {\n  default: { ax: 0, ay: -35 },\n  overlap: [\n    { ax: 50, ay: -35 }, // Right, level 1\n    { ax: -60, ay: -35 }, // Left, level 1\n    { ax: 70, ay: -55 }, // Right, level 2\n    { ax: -80, ay: -55 }, // Left, level 2\n    { ax: 50, ay: -75 }, // Right, level 3\n    { ax: -60, ay: -75 }, // Left, level 3\n  ],\n};\n\n/**\n * Group overlapping peaks by retention time (x) proximity\n */\nexport function groupOverlappingPeaks(\n  peaksWithMeta: PeakWithMeta[],\n  overlapThreshold: number\n): PeakWithMeta[][] {\n  const sorted = [...peaksWithMeta].sort((a, b) => a.peak.x - b.peak.x);\n\n  const groups: PeakWithMeta[][] = [];\n  let currentGroup: PeakWithMeta[] = [];\n\n  for (const current of sorted) {\n    if (currentGroup.length === 0) {\n      currentGroup.push(current);\n      continue;\n    }\n\n    const lastInGroup = currentGroup[currentGroup.length - 1];\n    const timeDiff = Math.abs(current.peak.x - lastInGroup.peak.x);\n\n    if (timeDiff < overlapThreshold) {\n      currentGroup.push(current);\n    } else {\n      groups.push(currentGroup);\n      currentGroup = [current];\n    }\n  }\n\n  if (currentGroup.length > 0) {\n    groups.push(currentGroup);\n  }\n\n  return groups;\n}\n\n/**\n * Create a Plotly annotation for a peak.\n * seriesIndex of -1 indicates a user-defined annotation (uses grey/black styling).\n */\nexport function createPeakAnnotation(\n  peak: PeakAnnotation,\n  seriesIndex: number,\n  slot: { ax: number; ay: number }\n): Partial<Plotly.Annotations> {\n  const isUserDefined = seriesIndex === -1;\n  const color = isUserDefined\n    ? COLORS.GREY_500\n    : CHART_COLORS[seriesIndex % CHART_COLORS.length];\n  const textColor = isUserDefined ? COLORS.BLACK_900 : color;\n\n  // Use provided text or auto-generate from computed area\n  const text = peak.text ?? (peak._computed?.area === undefined ? \"\" : `Area: ${peak._computed.area.toFixed(2)}`);\n\n  // For user-defined annotations, respect their ax/ay if provided\n  const ax = isUserDefined && peak.ax !== undefined ? peak.ax : slot.ax;\n  const ay = isUserDefined && peak.ay !== undefined ? peak.ay : slot.ay;\n\n  return {\n    x: peak.x,\n    y: peak.y,\n    text,\n    showarrow: true,\n    arrowhead: 2,\n    arrowsize: 1,\n    arrowwidth: 1,\n    arrowcolor: color,\n    ax,\n    ay,\n    font: {\n      size: isUserDefined\n        ? CHROMATOGRAM_ANNOTATION.USER_ANNOTATION_FONT_SIZE\n        : CHROMATOGRAM_ANNOTATION.AUTO_ANNOTATION_FONT_SIZE,\n      color: textColor,\n      family: \"Inter, sans-serif\",\n    },\n    bgcolor: COLORS.WHITE,\n    borderpad: 2,\n    bordercolor: isUserDefined ? undefined : color,\n    borderwidth: isUserDefined ? 0 : 1,\n  };\n}\n\n/**\n * Create annotations for a group of peaks, handling overlap positioning\n */\nexport function createGroupAnnotations(\n  group: PeakWithMeta[]\n): Partial<Plotly.Annotations>[] {\n  if (group.length === 1) {\n    const { peak, seriesIndex } = group[0];\n    return [createPeakAnnotation(peak, seriesIndex, ANNOTATION_SLOTS.default)];\n  }\n\n  // Sort by intensity (y, lowest first) so lower peaks get closer annotations\n  const sortedGroup = [...group].sort((a, b) => a.peak.y - b.peak.y);\n\n  return sortedGroup.map(({ peak, seriesIndex }, slotIndex) => {\n    const slot =\n      ANNOTATION_SLOTS.overlap[slotIndex % ANNOTATION_SLOTS.overlap.length];\n    return createPeakAnnotation(peak, seriesIndex, slot);\n  });\n}\n\n"],"names":["ANNOTATION_SLOTS","groupOverlappingPeaks","peaksWithMeta","overlapThreshold","sorted","b","groups","currentGroup","current","lastInGroup","createPeakAnnotation","peak","seriesIndex","slot","isUserDefined","color","COLORS","CHART_COLORS","textColor","text","ax","ay","CHROMATOGRAM_ANNOTATION","createGroupAnnotations","group","a","slotIndex"],"mappings":";;AAcO,MAAMA,IAAmB;AAAA,EAC9B,SAAS,EAAE,IAAI,GAAG,IAAI,IAAA;AAAA,EACtB,SAAS;AAAA,IACP,EAAE,IAAI,IAAI,IAAI,IAAA;AAAA;AAAA,IACd,EAAE,IAAI,KAAK,IAAI,IAAA;AAAA;AAAA,IACf,EAAE,IAAI,IAAI,IAAI,IAAA;AAAA;AAAA,IACd,EAAE,IAAI,KAAK,IAAI,IAAA;AAAA;AAAA,IACf,EAAE,IAAI,IAAI,IAAI,IAAA;AAAA;AAAA,IACd,EAAE,IAAI,KAAK,IAAI,IAAA;AAAA;AAAA,EAAI;AAEvB;AAKO,SAASC,EACdC,GACAC,GACkB;AAClB,QAAMC,IAAS,CAAC,GAAGF,CAAa,EAAE,KAAK,CAAC,GAAGG,MAAM,EAAE,KAAK,IAAIA,EAAE,KAAK,CAAC,GAE9DC,IAA2B,CAAA;AACjC,MAAIC,IAA+B,CAAA;AAEnC,aAAWC,KAAWJ,GAAQ;AAC5B,QAAIG,EAAa,WAAW,GAAG;AAC7B,MAAAA,EAAa,KAAKC,CAAO;AACzB;AAAA,IACF;AAEA,UAAMC,IAAcF,EAAaA,EAAa,SAAS,CAAC;AAGxD,IAFiB,KAAK,IAAIC,EAAQ,KAAK,IAAIC,EAAY,KAAK,CAAC,IAE9CN,IACbI,EAAa,KAAKC,CAAO,KAEzBF,EAAO,KAAKC,CAAY,GACxBA,IAAe,CAACC,CAAO;AAAA,EAE3B;AAEA,SAAID,EAAa,SAAS,KACxBD,EAAO,KAAKC,CAAY,GAGnBD;AACT;AAMO,SAASI,EACdC,GACAC,GACAC,GAC6B;AAC7B,QAAMC,IAAgBF,MAAgB,IAChCG,IAAQD,IACVE,EAAO,WACPC,EAAaL,IAAcK,EAAa,MAAM,GAC5CC,IAAYJ,IAAgBE,EAAO,YAAYD,GAG/CI,IAAOR,EAAK,SAASA,EAAK,WAAW,SAAS,SAAY,KAAK,SAASA,EAAK,UAAU,KAAK,QAAQ,CAAC,CAAC,KAGtGS,IAAKN,KAAiBH,EAAK,OAAO,SAAYA,EAAK,KAAKE,EAAK,IAC7DQ,IAAKP,KAAiBH,EAAK,OAAO,SAAYA,EAAK,KAAKE,EAAK;AAEnE,SAAO;AAAA,IACL,GAAGF,EAAK;AAAA,IACR,GAAGA,EAAK;AAAA,IACR,MAAAQ;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,YAAYJ;AAAA,IACZ,IAAAK;AAAA,IACA,IAAAC;AAAA,IACA,MAAM;AAAA,MACJ,MAAMP,IACFQ,EAAwB,4BACxBA,EAAwB;AAAA,MAC5B,OAAOJ;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,IAEV,SAASF,EAAO;AAAA,IAChB,WAAW;AAAA,IACX,aAAaF,IAAgB,SAAYC;AAAA,IACzC,aAAaD,IAAgB,IAAI;AAAA,EAAA;AAErC;AAKO,SAASS,EACdC,GAC+B;AAC/B,MAAIA,EAAM,WAAW,GAAG;AACtB,UAAM,EAAE,MAAAb,GAAM,aAAAC,MAAgBY,EAAM,CAAC;AACrC,WAAO,CAACd,EAAqBC,GAAMC,GAAaZ,EAAiB,OAAO,CAAC;AAAA,EAC3E;AAKA,SAFoB,CAAC,GAAGwB,CAAK,EAAE,KAAK,CAACC,GAAGpB,MAAMoB,EAAE,KAAK,IAAIpB,EAAE,KAAK,CAAC,EAE9C,IAAI,CAAC,EAAE,MAAAM,GAAM,aAAAC,EAAA,GAAec,MAAc;AAC3D,UAAMb,IACJb,EAAiB,QAAQ0B,IAAY1B,EAAiB,QAAQ,MAAM;AACtE,WAAOU,EAAqBC,GAAMC,GAAaC,CAAI;AAAA,EACrD,CAAC;AACH;"}
+{"version":3,"file":"annotations.js","sources":["../../../../src/components/charts/ChromatogramChart/annotations.ts"],"sourcesContent":["/**\n * Annotation utilities for ChromatogramChart\n */\n\nimport { seriesColor } from \"../../../utils/colors\";\n\nimport { CHROMATOGRAM_ANNOTATION } from \"./constants\";\n\nimport type { PeakAnnotation, PeakWithMeta } from \"./types\";\nimport type Plotly from \"plotly.js-dist\";\n\n/**\n * Annotation slot positions for peak labels\n */\nexport const ANNOTATION_SLOTS = {\n  default: { ax: 0, ay: -35 },\n  overlap: [\n    { ax: 50, ay: -35 }, // Right, level 1\n    { ax: -60, ay: -35 }, // Left, level 1\n    { ax: 70, ay: -55 }, // Right, level 2\n    { ax: -80, ay: -55 }, // Left, level 2\n    { ax: 50, ay: -75 }, // Right, level 3\n    { ax: -60, ay: -75 }, // Left, level 3\n  ],\n};\n\n/**\n * Group overlapping peaks by retention time (x) proximity\n */\nexport function groupOverlappingPeaks(\n  peaksWithMeta: PeakWithMeta[],\n  overlapThreshold: number\n): PeakWithMeta[][] {\n  const sorted = [...peaksWithMeta].sort((a, b) => a.peak.x - b.peak.x);\n\n  const groups: PeakWithMeta[][] = [];\n  let currentGroup: PeakWithMeta[] = [];\n\n  for (const current of sorted) {\n    if (currentGroup.length === 0) {\n      currentGroup.push(current);\n      continue;\n    }\n\n    const lastInGroup = currentGroup[currentGroup.length - 1];\n    const timeDiff = Math.abs(current.peak.x - lastInGroup.peak.x);\n\n    if (timeDiff < overlapThreshold) {\n      currentGroup.push(current);\n    } else {\n      groups.push(currentGroup);\n      currentGroup = [current];\n    }\n  }\n\n  if (currentGroup.length > 0) {\n    groups.push(currentGroup);\n  }\n\n  return groups;\n}\n\n/**\n * Create a Plotly annotation for a peak.\n * seriesIndex of -1 indicates a user-defined annotation (uses grey/black styling).\n */\nexport function createPeakAnnotation(\n  peak: PeakAnnotation,\n  seriesIndex: number,\n  slot: { ax: number; ay: number }\n): Partial<Plotly.Annotations> {\n  const isUserDefined = seriesIndex === -1;\n  const color = isUserDefined\n    ? CHROMATOGRAM_ANNOTATION.USER_ANNOTATION_COLOR\n    : seriesColor(seriesIndex);\n  const textColor = isUserDefined\n    ? CHROMATOGRAM_ANNOTATION.USER_ANNOTATION_TEXT_COLOR\n    : color;\n\n  // Use provided text or auto-generate from computed area\n  const text = peak.text ?? (peak._computed?.area === undefined ? \"\" : `Area: ${peak._computed.area.toFixed(2)}`);\n\n  // For user-defined annotations, respect their ax/ay if provided\n  const ax = isUserDefined && peak.ax !== undefined ? peak.ax : slot.ax;\n  const ay = isUserDefined && peak.ay !== undefined ? peak.ay : slot.ay;\n\n  return {\n    x: peak.x,\n    y: peak.y,\n    text,\n    showarrow: true,\n    arrowhead: 2,\n    arrowsize: 1,\n    arrowwidth: 1,\n    arrowcolor: color,\n    ax,\n    ay,\n    font: {\n      size: isUserDefined\n        ? CHROMATOGRAM_ANNOTATION.USER_ANNOTATION_FONT_SIZE\n        : CHROMATOGRAM_ANNOTATION.AUTO_ANNOTATION_FONT_SIZE,\n      color: textColor,\n      family: \"Inter, sans-serif\",\n    },\n    bgcolor: CHROMATOGRAM_ANNOTATION.BACKGROUND_COLOR,\n    borderpad: 2,\n    bordercolor: isUserDefined ? undefined : color,\n    borderwidth: isUserDefined ? 0 : 1,\n  };\n}\n\n/**\n * Create annotations for a group of peaks, handling overlap positioning\n */\nexport function createGroupAnnotations(\n  group: PeakWithMeta[]\n): Partial<Plotly.Annotations>[] {\n  if (group.length === 1) {\n    const { peak, seriesIndex } = group[0];\n    return [createPeakAnnotation(peak, seriesIndex, ANNOTATION_SLOTS.default)];\n  }\n\n  // Sort by intensity (y, lowest first) so lower peaks get closer annotations\n  const sortedGroup = [...group].sort((a, b) => a.peak.y - b.peak.y);\n\n  return sortedGroup.map(({ peak, seriesIndex }, slotIndex) => {\n    const slot =\n      ANNOTATION_SLOTS.overlap[slotIndex % ANNOTATION_SLOTS.overlap.length];\n    return createPeakAnnotation(peak, seriesIndex, slot);\n  });\n}\n\n"],"names":["ANNOTATION_SLOTS","groupOverlappingPeaks","peaksWithMeta","overlapThreshold","sorted","b","groups","currentGroup","current","lastInGroup","createPeakAnnotation","peak","seriesIndex","slot","isUserDefined","color","CHROMATOGRAM_ANNOTATION","seriesColor","textColor","text","ax","ay","createGroupAnnotations","group","a","slotIndex"],"mappings":";;AAcO,MAAMA,IAAmB;AAAA,EAC9B,SAAS,EAAE,IAAI,GAAG,IAAI,IAAA;AAAA,EACtB,SAAS;AAAA,IACP,EAAE,IAAI,IAAI,IAAI,IAAA;AAAA;AAAA,IACd,EAAE,IAAI,KAAK,IAAI,IAAA;AAAA;AAAA,IACf,EAAE,IAAI,IAAI,IAAI,IAAA;AAAA;AAAA,IACd,EAAE,IAAI,KAAK,IAAI,IAAA;AAAA;AAAA,IACf,EAAE,IAAI,IAAI,IAAI,IAAA;AAAA;AAAA,IACd,EAAE,IAAI,KAAK,IAAI,IAAA;AAAA;AAAA,EAAI;AAEvB;AAKO,SAASC,EACdC,GACAC,GACkB;AAClB,QAAMC,IAAS,CAAC,GAAGF,CAAa,EAAE,KAAK,CAAC,GAAGG,MAAM,EAAE,KAAK,IAAIA,EAAE,KAAK,CAAC,GAE9DC,IAA2B,CAAA;AACjC,MAAIC,IAA+B,CAAA;AAEnC,aAAWC,KAAWJ,GAAQ;AAC5B,QAAIG,EAAa,WAAW,GAAG;AAC7B,MAAAA,EAAa,KAAKC,CAAO;AACzB;AAAA,IACF;AAEA,UAAMC,IAAcF,EAAaA,EAAa,SAAS,CAAC;AAGxD,IAFiB,KAAK,IAAIC,EAAQ,KAAK,IAAIC,EAAY,KAAK,CAAC,IAE9CN,IACbI,EAAa,KAAKC,CAAO,KAEzBF,EAAO,KAAKC,CAAY,GACxBA,IAAe,CAACC,CAAO;AAAA,EAE3B;AAEA,SAAID,EAAa,SAAS,KACxBD,EAAO,KAAKC,CAAY,GAGnBD;AACT;AAMO,SAASI,EACdC,GACAC,GACAC,GAC6B;AAC7B,QAAMC,IAAgBF,MAAgB,IAChCG,IAAQD,IACVE,EAAwB,wBACxBC,EAAYL,CAAW,GACrBM,IAAYJ,IACdE,EAAwB,6BACxBD,GAGEI,IAAOR,EAAK,SAASA,EAAK,WAAW,SAAS,SAAY,KAAK,SAASA,EAAK,UAAU,KAAK,QAAQ,CAAC,CAAC,KAGtGS,IAAKN,KAAiBH,EAAK,OAAO,SAAYA,EAAK,KAAKE,EAAK,IAC7DQ,IAAKP,KAAiBH,EAAK,OAAO,SAAYA,EAAK,KAAKE,EAAK;AAEnE,SAAO;AAAA,IACL,GAAGF,EAAK;AAAA,IACR,GAAGA,EAAK;AAAA,IACR,MAAAQ;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,YAAYJ;AAAA,IACZ,IAAAK;AAAA,IACA,IAAAC;AAAA,IACA,MAAM;AAAA,MACJ,MAAMP,IACFE,EAAwB,4BACxBA,EAAwB;AAAA,MAC5B,OAAOE;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,IAEV,SAASF,EAAwB;AAAA,IACjC,WAAW;AAAA,IACX,aAAaF,IAAgB,SAAYC;AAAA,IACzC,aAAaD,IAAgB,IAAI;AAAA,EAAA;AAErC;AAKO,SAASQ,EACdC,GAC+B;AAC/B,MAAIA,EAAM,WAAW,GAAG;AACtB,UAAM,EAAE,MAAAZ,GAAM,aAAAC,MAAgBW,EAAM,CAAC;AACrC,WAAO,CAACb,EAAqBC,GAAMC,GAAaZ,EAAiB,OAAO,CAAC;AAAA,EAC3E;AAKA,SAFoB,CAAC,GAAGuB,CAAK,EAAE,KAAK,CAACC,GAAGnB,MAAMmB,EAAE,KAAK,IAAInB,EAAE,KAAK,CAAC,EAE9C,IAAI,CAAC,EAAE,MAAAM,GAAM,aAAAC,EAAA,GAAea,MAAc;AAC3D,UAAMZ,IACJb,EAAiB,QAAQyB,IAAYzB,EAAiB,QAAQ,MAAM;AACtE,WAAOU,EAAqBC,GAAMC,GAAaC,CAAI;AAAA,EACrD,CAAC;AACH;"}

package/dist/components/charts/ChromatogramChart/boundaryMarkers.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../../../utils/colors.cjs"),T=-5,m=-12,d=-16;function i(o,e,t,r){return t==="none"?[]:[{x:[o],y:[e],type:"scatter",mode:"markers",marker:{symbol:t==="diamond"?"diamond":"triangle-up",size:8,color:r},showlegend:!1,hoverinfo:"skip"}]}function A(o){const e=[];for(const{peaks:t,seriesIndex:r,x:s}of o){const a=c.CHART_COLORS[r%c.CHART_COLORS.length],u=T+r*d,R=m+r*d;for(const n of t){const k=n._computed?.startIndex??0,M=n._computed?.endIndex??0,_=s[k],l=s[M],p=n.startMarker??"triangle",f=n.endMarker??"diamond";e.push(...i(_,u,p,a)),e.push(...i(l,R,f,a))}}return e}exports.createBoundaryMarkerTraces=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("../../../utils/colors.cjs"),m=-5,y=-12,c=-16;function d(o,e,t,r){return t==="none"?[]:[{x:[o],y:[e],type:"scatter",mode:"markers",marker:{symbol:t==="diamond"?"diamond":"triangle-up",size:8,color:r},showlegend:!1,hoverinfo:"skip"}]}function T(o){const e=[];for(const{peaks:t,seriesIndex:r,x:s}of o){const a=f.seriesColor(r),i=m+r*c,u=y+r*c;for(const n of t){const k=n._computed?.startIndex??0,M=n._computed?.endIndex??0,l=s[k],p=s[M],R=n.startMarker??"triangle",_=n.endMarker??"diamond";e.push(...d(l,i,R,a)),e.push(...d(p,u,_,a))}}return e}exports.createBoundaryMarkerTraces=T;
 //# sourceMappingURL=boundaryMarkers.cjs.map

package/dist/components/charts/ChromatogramChart/boundaryMarkers.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"boundaryMarkers.cjs","sources":["../../../../src/components/charts/ChromatogramChart/boundaryMarkers.ts"],"sourcesContent":["/**\n * Boundary marker utilities for ChromatogramChart\n */\n\nimport { CHART_COLORS } from \"../../../utils/colors\";\n\nimport type { PeakAnnotation, BoundaryMarkerType } from \"./types\";\nimport type Plotly from \"plotly.js-dist\";\n\n/** Base Y position for start boundary markers (below the x-axis) */\nconst BOUNDARY_MARKER_START_Y = -5;\n/** Y position for end boundary markers (below start markers) */\nconst BOUNDARY_MARKER_END_Y = -12;\n/** Y offset between series to prevent overlap */\nconst BOUNDARY_MARKER_SERIES_OFFSET = -16;\n\n/**\n * Create a marker trace for a boundary point.\n * Markers are placed on the x-axis below 0, staggered by series index.\n */\nfunction createMarkerTrace(\n  xPos: number,\n  yPos: number,\n  markerType: BoundaryMarkerType,\n  color: string\n): Plotly.Data[] {\n  if (markerType === \"none\") {\n    return [];\n  }\n\n  return [\n    {\n      x: [xPos],\n      y: [yPos],\n      type: \"scatter\" as const,\n      mode: \"markers\" as const,\n      marker: {\n        symbol: markerType === \"diamond\" ? (\"diamond\" as const) : (\"triangle-up\" as const),\n        size: 8,\n        color,\n      },\n      showlegend: false,\n      hoverinfo: \"skip\" as const,\n    },\n  ];\n}\n\n/**\n * Create boundary marker traces for peaks.\n * Uses per-peak startMarker/endMarker settings with defaults:\n * - startMarker: \"triangle\" (default)\n * - endMarker: \"diamond\" (default)\n */\nexport function createBoundaryMarkerTraces(\n  allPeaks: {\n    peaks: PeakAnnotation[];\n    seriesIndex: number;\n    x: number[];\n    y: number[];\n  }[]\n): Plotly.Data[] {\n  const traces: Plotly.Data[] = [];\n\n  for (const { peaks, seriesIndex, x } of allPeaks) {\n    const color = CHART_COLORS[seriesIndex % CHART_COLORS.length];\n    // Separate y positions for start vs end markers to prevent overlap when peaks are adjacent\n    // Also stagger by series index to prevent overlap between different traces\n    const startMarkerY = BOUNDARY_MARKER_START_Y + seriesIndex * BOUNDARY_MARKER_SERIES_OFFSET;\n    const endMarkerY = BOUNDARY_MARKER_END_Y + seriesIndex * BOUNDARY_MARKER_SERIES_OFFSET;\n\n    for (const peak of peaks) {\n      const startIdx = peak._computed?.startIndex ?? 0;\n      const endIdx = peak._computed?.endIndex ?? 0;\n      const startX = x[startIdx];\n      const endX = x[endIdx];\n\n      // Get marker types with defaults: triangle at start, diamond at end\n      const startMarkerType = peak.startMarker ?? \"triangle\";\n      const endMarkerType = peak.endMarker ?? \"diamond\";\n\n      // Create start boundary marker (upper row, staggered by series)\n      traces.push(...createMarkerTrace(startX, startMarkerY, startMarkerType, color));\n\n      // Create end boundary marker (lower row, staggered by series)\n      traces.push(...createMarkerTrace(endX, endMarkerY, endMarkerType, color));\n    }\n  }\n\n  return traces;\n}\n\n"],"names":["BOUNDARY_MARKER_START_Y","BOUNDARY_MARKER_END_Y","BOUNDARY_MARKER_SERIES_OFFSET","createMarkerTrace","xPos","yPos","markerType","color","createBoundaryMarkerTraces","allPeaks","traces","peaks","seriesIndex","x","CHART_COLORS","startMarkerY","endMarkerY","peak","startIdx","endIdx","startX","endX","startMarkerType","endMarkerType"],"mappings":"6HAUMA,EAA0B,GAE1BC,EAAwB,IAExBC,EAAgC,IAMtC,SAASC,EACPC,EACAC,EACAC,EACAC,EACe,CACf,OAAID,IAAe,OACV,CAAA,EAGF,CACL,CACE,EAAG,CAACF,CAAI,EACR,EAAG,CAACC,CAAI,EACR,KAAM,UACN,KAAM,UACN,OAAQ,CACN,OAAQC,IAAe,UAAa,UAAuB,cAC3D,KAAM,EACN,MAAAC,CAAA,EAEF,WAAY,GACZ,UAAW,MAAA,CACb,CAEJ,CAQO,SAASC,EACdC,EAMe,CACf,MAAMC,EAAwB,CAAA,EAE9B,SAAW,CAAE,MAAAC,EAAO,YAAAC,EAAa,EAAAC,CAAA,IAAOJ,EAAU,CAChD,MAAMF,EAAQO,EAAAA,aAAaF,EAAcE,EAAAA,aAAa,MAAM,EAGtDC,EAAef,EAA0BY,EAAcV,EACvDc,EAAaf,EAAwBW,EAAcV,EAEzD,UAAWe,KAAQN,EAAO,CACxB,MAAMO,EAAWD,EAAK,WAAW,YAAc,EACzCE,EAASF,EAAK,WAAW,UAAY,EACrCG,EAASP,EAAEK,CAAQ,EACnBG,EAAOR,EAAEM,CAAM,EAGfG,EAAkBL,EAAK,aAAe,WACtCM,EAAgBN,EAAK,WAAa,UAGxCP,EAAO,KAAK,GAAGP,EAAkBiB,EAAQL,EAAcO,EAAiBf,CAAK,CAAC,EAG9EG,EAAO,KAAK,GAAGP,EAAkBkB,EAAML,EAAYO,EAAehB,CAAK,CAAC,CAC1E,CACF,CAEA,OAAOG,CACT"}
+{"version":3,"file":"boundaryMarkers.cjs","sources":["../../../../src/components/charts/ChromatogramChart/boundaryMarkers.ts"],"sourcesContent":["/**\n * Boundary marker utilities for ChromatogramChart\n */\n\nimport { seriesColor } from \"../../../utils/colors\";\n\nimport type { PeakAnnotation, BoundaryMarkerType } from \"./types\";\nimport type Plotly from \"plotly.js-dist\";\n\n/** Base Y position for start boundary markers (below the x-axis) */\nconst BOUNDARY_MARKER_START_Y = -5;\n/** Y position for end boundary markers (below start markers) */\nconst BOUNDARY_MARKER_END_Y = -12;\n/** Y offset between series to prevent overlap */\nconst BOUNDARY_MARKER_SERIES_OFFSET = -16;\n\n/**\n * Create a marker trace for a boundary point.\n * Markers are placed on the x-axis below 0, staggered by series index.\n */\nfunction createMarkerTrace(\n  xPos: number,\n  yPos: number,\n  markerType: BoundaryMarkerType,\n  color: string\n): Plotly.Data[] {\n  if (markerType === \"none\") {\n    return [];\n  }\n\n  return [\n    {\n      x: [xPos],\n      y: [yPos],\n      type: \"scatter\" as const,\n      mode: \"markers\" as const,\n      marker: {\n        symbol: markerType === \"diamond\" ? (\"diamond\" as const) : (\"triangle-up\" as const),\n        size: 8,\n        color,\n      },\n      showlegend: false,\n      hoverinfo: \"skip\" as const,\n    },\n  ];\n}\n\n/**\n * Create boundary marker traces for peaks.\n * Uses per-peak startMarker/endMarker settings with defaults:\n * - startMarker: \"triangle\" (default)\n * - endMarker: \"diamond\" (default)\n */\nexport function createBoundaryMarkerTraces(\n  allPeaks: {\n    peaks: PeakAnnotation[];\n    seriesIndex: number;\n    x: number[];\n    y: number[];\n  }[]\n): Plotly.Data[] {\n  const traces: Plotly.Data[] = [];\n\n  for (const { peaks, seriesIndex, x } of allPeaks) {\n    const color = seriesColor(seriesIndex);\n    // Separate y positions for start vs end markers to prevent overlap when peaks are adjacent\n    // Also stagger by series index to prevent overlap between different traces\n    const startMarkerY = BOUNDARY_MARKER_START_Y + seriesIndex * BOUNDARY_MARKER_SERIES_OFFSET;\n    const endMarkerY = BOUNDARY_MARKER_END_Y + seriesIndex * BOUNDARY_MARKER_SERIES_OFFSET;\n\n    for (const peak of peaks) {\n      const startIdx = peak._computed?.startIndex ?? 0;\n      const endIdx = peak._computed?.endIndex ?? 0;\n      const startX = x[startIdx];\n      const endX = x[endIdx];\n\n      // Get marker types with defaults: triangle at start, diamond at end\n      const startMarkerType = peak.startMarker ?? \"triangle\";\n      const endMarkerType = peak.endMarker ?? \"diamond\";\n\n      // Create start boundary marker (upper row, staggered by series)\n      traces.push(...createMarkerTrace(startX, startMarkerY, startMarkerType, color));\n\n      // Create end boundary marker (lower row, staggered by series)\n      traces.push(...createMarkerTrace(endX, endMarkerY, endMarkerType, color));\n    }\n  }\n\n  return traces;\n}\n\n"],"names":["BOUNDARY_MARKER_START_Y","BOUNDARY_MARKER_END_Y","BOUNDARY_MARKER_SERIES_OFFSET","createMarkerTrace","xPos","yPos","markerType","color","createBoundaryMarkerTraces","allPeaks","traces","peaks","seriesIndex","x","seriesColor","startMarkerY","endMarkerY","peak","startIdx","endIdx","startX","endX","startMarkerType","endMarkerType"],"mappings":"6HAUMA,EAA0B,GAE1BC,EAAwB,IAExBC,EAAgC,IAMtC,SAASC,EACPC,EACAC,EACAC,EACAC,EACe,CACf,OAAID,IAAe,OACV,CAAA,EAGF,CACL,CACE,EAAG,CAACF,CAAI,EACR,EAAG,CAACC,CAAI,EACR,KAAM,UACN,KAAM,UACN,OAAQ,CACN,OAAQC,IAAe,UAAa,UAAuB,cAC3D,KAAM,EACN,MAAAC,CAAA,EAEF,WAAY,GACZ,UAAW,MAAA,CACb,CAEJ,CAQO,SAASC,EACdC,EAMe,CACf,MAAMC,EAAwB,CAAA,EAE9B,SAAW,CAAE,MAAAC,EAAO,YAAAC,EAAa,EAAAC,CAAA,IAAOJ,EAAU,CAChD,MAAMF,EAAQO,EAAAA,YAAYF,CAAW,EAG/BG,EAAef,EAA0BY,EAAcV,EACvDc,EAAaf,EAAwBW,EAAcV,EAEzD,UAAWe,KAAQN,EAAO,CACxB,MAAMO,EAAWD,EAAK,WAAW,YAAc,EACzCE,EAASF,EAAK,WAAW,UAAY,EACrCG,EAASP,EAAEK,CAAQ,EACnBG,EAAOR,EAAEM,CAAM,EAGfG,EAAkBL,EAAK,aAAe,WACtCM,EAAgBN,EAAK,WAAa,UAGxCP,EAAO,KAAK,GAAGP,EAAkBiB,EAAQL,EAAcO,EAAiBf,CAAK,CAAC,EAG9EG,EAAO,KAAK,GAAGP,EAAkBkB,EAAML,EAAYO,EAAehB,CAAK,CAAC,CAC1E,CACF,CAEA,OAAOG,CACT"}

package/dist/components/charts/ChromatogramChart/boundaryMarkers.js

@@ -1,6 +1,6 @@
-import { CHART_COLORS as c } from "../../../utils/colors.js";
-const x = -5, A = -12, d = -16;
-function i(o, e, t, r) {
+import { seriesColor as m } from "../../../utils/colors.js";
+const x = -5, l = -12, c = -16;
+function d(o, e, t, r) {
   return t === "none" ? [] : [
     {
       x: [o],
@@ -20,10 +20,10 @@ function i(o, e, t, r) {
 function E(o) {
   const e = [];
   for (const { peaks: t, seriesIndex: r, x: s } of o) {
-    const a = c[r % c.length], R = x + r * d, k = A + r * d;
+    const a = m(r), i = x + r * c, k = l + r * c;
     for (const n of t) {
-      const p = n._computed?.startIndex ?? 0, _ = n._computed?.endIndex ?? 0, u = s[p], M = s[_], f = n.startMarker ?? "triangle", m = n.endMarker ?? "diamond";
-      e.push(...i(u, R, f, a)), e.push(...i(M, k, m, a));
+      const p = n._computed?.startIndex ?? 0, u = n._computed?.endIndex ?? 0, M = s[p], R = s[u], _ = n.startMarker ?? "triangle", f = n.endMarker ?? "diamond";
+      e.push(...d(M, i, _, a)), e.push(...d(R, k, f, a));
     }
   }
   return e;

package/dist/components/charts/ChromatogramChart/boundaryMarkers.js.map

@@ -1 +1 @@
-{"version":3,"file":"boundaryMarkers.js","sources":["../../../../src/components/charts/ChromatogramChart/boundaryMarkers.ts"],"sourcesContent":["/**\n * Boundary marker utilities for ChromatogramChart\n */\n\nimport { CHART_COLORS } from \"../../../utils/colors\";\n\nimport type { PeakAnnotation, BoundaryMarkerType } from \"./types\";\nimport type Plotly from \"plotly.js-dist\";\n\n/** Base Y position for start boundary markers (below the x-axis) */\nconst BOUNDARY_MARKER_START_Y = -5;\n/** Y position for end boundary markers (below start markers) */\nconst BOUNDARY_MARKER_END_Y = -12;\n/** Y offset between series to prevent overlap */\nconst BOUNDARY_MARKER_SERIES_OFFSET = -16;\n\n/**\n * Create a marker trace for a boundary point.\n * Markers are placed on the x-axis below 0, staggered by series index.\n */\nfunction createMarkerTrace(\n  xPos: number,\n  yPos: number,\n  markerType: BoundaryMarkerType,\n  color: string\n): Plotly.Data[] {\n  if (markerType === \"none\") {\n    return [];\n  }\n\n  return [\n    {\n      x: [xPos],\n      y: [yPos],\n      type: \"scatter\" as const,\n      mode: \"markers\" as const,\n      marker: {\n        symbol: markerType === \"diamond\" ? (\"diamond\" as const) : (\"triangle-up\" as const),\n        size: 8,\n        color,\n      },\n      showlegend: false,\n      hoverinfo: \"skip\" as const,\n    },\n  ];\n}\n\n/**\n * Create boundary marker traces for peaks.\n * Uses per-peak startMarker/endMarker settings with defaults:\n * - startMarker: \"triangle\" (default)\n * - endMarker: \"diamond\" (default)\n */\nexport function createBoundaryMarkerTraces(\n  allPeaks: {\n    peaks: PeakAnnotation[];\n    seriesIndex: number;\n    x: number[];\n    y: number[];\n  }[]\n): Plotly.Data[] {\n  const traces: Plotly.Data[] = [];\n\n  for (const { peaks, seriesIndex, x } of allPeaks) {\n    const color = CHART_COLORS[seriesIndex % CHART_COLORS.length];\n    // Separate y positions for start vs end markers to prevent overlap when peaks are adjacent\n    // Also stagger by series index to prevent overlap between different traces\n    const startMarkerY = BOUNDARY_MARKER_START_Y + seriesIndex * BOUNDARY_MARKER_SERIES_OFFSET;\n    const endMarkerY = BOUNDARY_MARKER_END_Y + seriesIndex * BOUNDARY_MARKER_SERIES_OFFSET;\n\n    for (const peak of peaks) {\n      const startIdx = peak._computed?.startIndex ?? 0;\n      const endIdx = peak._computed?.endIndex ?? 0;\n      const startX = x[startIdx];\n      const endX = x[endIdx];\n\n      // Get marker types with defaults: triangle at start, diamond at end\n      const startMarkerType = peak.startMarker ?? \"triangle\";\n      const endMarkerType = peak.endMarker ?? \"diamond\";\n\n      // Create start boundary marker (upper row, staggered by series)\n      traces.push(...createMarkerTrace(startX, startMarkerY, startMarkerType, color));\n\n      // Create end boundary marker (lower row, staggered by series)\n      traces.push(...createMarkerTrace(endX, endMarkerY, endMarkerType, color));\n    }\n  }\n\n  return traces;\n}\n\n"],"names":["BOUNDARY_MARKER_START_Y","BOUNDARY_MARKER_END_Y","BOUNDARY_MARKER_SERIES_OFFSET","createMarkerTrace","xPos","yPos","markerType","color","createBoundaryMarkerTraces","allPeaks","traces","peaks","seriesIndex","x","CHART_COLORS","startMarkerY","endMarkerY","peak","startIdx","endIdx","startX","endX","startMarkerType","endMarkerType"],"mappings":";AAUA,MAAMA,IAA0B,IAE1BC,IAAwB,KAExBC,IAAgC;AAMtC,SAASC,EACPC,GACAC,GACAC,GACAC,GACe;AACf,SAAID,MAAe,SACV,CAAA,IAGF;AAAA,IACL;AAAA,MACE,GAAG,CAACF,CAAI;AAAA,MACR,GAAG,CAACC,CAAI;AAAA,MACR,MAAM;AAAA,MACN,MAAM;AAAA,MACN,QAAQ;AAAA,QACN,QAAQC,MAAe,YAAa,YAAuB;AAAA,QAC3D,MAAM;AAAA,QACN,OAAAC;AAAA,MAAA;AAAA,MAEF,YAAY;AAAA,MACZ,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ;AAQO,SAASC,EACdC,GAMe;AACf,QAAMC,IAAwB,CAAA;AAE9B,aAAW,EAAE,OAAAC,GAAO,aAAAC,GAAa,GAAAC,EAAA,KAAOJ,GAAU;AAChD,UAAMF,IAAQO,EAAaF,IAAcE,EAAa,MAAM,GAGtDC,IAAef,IAA0BY,IAAcV,GACvDc,IAAaf,IAAwBW,IAAcV;AAEzD,eAAWe,KAAQN,GAAO;AACxB,YAAMO,IAAWD,EAAK,WAAW,cAAc,GACzCE,IAASF,EAAK,WAAW,YAAY,GACrCG,IAASP,EAAEK,CAAQ,GACnBG,IAAOR,EAAEM,CAAM,GAGfG,IAAkBL,EAAK,eAAe,YACtCM,IAAgBN,EAAK,aAAa;AAGxC,MAAAP,EAAO,KAAK,GAAGP,EAAkBiB,GAAQL,GAAcO,GAAiBf,CAAK,CAAC,GAG9EG,EAAO,KAAK,GAAGP,EAAkBkB,GAAML,GAAYO,GAAehB,CAAK,CAAC;AAAA,IAC1E;AAAA,EACF;AAEA,SAAOG;AACT;"}
+{"version":3,"file":"boundaryMarkers.js","sources":["../../../../src/components/charts/ChromatogramChart/boundaryMarkers.ts"],"sourcesContent":["/**\n * Boundary marker utilities for ChromatogramChart\n */\n\nimport { seriesColor } from \"../../../utils/colors\";\n\nimport type { PeakAnnotation, BoundaryMarkerType } from \"./types\";\nimport type Plotly from \"plotly.js-dist\";\n\n/** Base Y position for start boundary markers (below the x-axis) */\nconst BOUNDARY_MARKER_START_Y = -5;\n/** Y position for end boundary markers (below start markers) */\nconst BOUNDARY_MARKER_END_Y = -12;\n/** Y offset between series to prevent overlap */\nconst BOUNDARY_MARKER_SERIES_OFFSET = -16;\n\n/**\n * Create a marker trace for a boundary point.\n * Markers are placed on the x-axis below 0, staggered by series index.\n */\nfunction createMarkerTrace(\n  xPos: number,\n  yPos: number,\n  markerType: BoundaryMarkerType,\n  color: string\n): Plotly.Data[] {\n  if (markerType === \"none\") {\n    return [];\n  }\n\n  return [\n    {\n      x: [xPos],\n      y: [yPos],\n      type: \"scatter\" as const,\n      mode: \"markers\" as const,\n      marker: {\n        symbol: markerType === \"diamond\" ? (\"diamond\" as const) : (\"triangle-up\" as const),\n        size: 8,\n        color,\n      },\n      showlegend: false,\n      hoverinfo: \"skip\" as const,\n    },\n  ];\n}\n\n/**\n * Create boundary marker traces for peaks.\n * Uses per-peak startMarker/endMarker settings with defaults:\n * - startMarker: \"triangle\" (default)\n * - endMarker: \"diamond\" (default)\n */\nexport function createBoundaryMarkerTraces(\n  allPeaks: {\n    peaks: PeakAnnotation[];\n    seriesIndex: number;\n    x: number[];\n    y: number[];\n  }[]\n): Plotly.Data[] {\n  const traces: Plotly.Data[] = [];\n\n  for (const { peaks, seriesIndex, x } of allPeaks) {\n    const color = seriesColor(seriesIndex);\n    // Separate y positions for start vs end markers to prevent overlap when peaks are adjacent\n    // Also stagger by series index to prevent overlap between different traces\n    const startMarkerY = BOUNDARY_MARKER_START_Y + seriesIndex * BOUNDARY_MARKER_SERIES_OFFSET;\n    const endMarkerY = BOUNDARY_MARKER_END_Y + seriesIndex * BOUNDARY_MARKER_SERIES_OFFSET;\n\n    for (const peak of peaks) {\n      const startIdx = peak._computed?.startIndex ?? 0;\n      const endIdx = peak._computed?.endIndex ?? 0;\n      const startX = x[startIdx];\n      const endX = x[endIdx];\n\n      // Get marker types with defaults: triangle at start, diamond at end\n      const startMarkerType = peak.startMarker ?? \"triangle\";\n      const endMarkerType = peak.endMarker ?? \"diamond\";\n\n      // Create start boundary marker (upper row, staggered by series)\n      traces.push(...createMarkerTrace(startX, startMarkerY, startMarkerType, color));\n\n      // Create end boundary marker (lower row, staggered by series)\n      traces.push(...createMarkerTrace(endX, endMarkerY, endMarkerType, color));\n    }\n  }\n\n  return traces;\n}\n\n"],"names":["BOUNDARY_MARKER_START_Y","BOUNDARY_MARKER_END_Y","BOUNDARY_MARKER_SERIES_OFFSET","createMarkerTrace","xPos","yPos","markerType","color","createBoundaryMarkerTraces","allPeaks","traces","peaks","seriesIndex","x","seriesColor","startMarkerY","endMarkerY","peak","startIdx","endIdx","startX","endX","startMarkerType","endMarkerType"],"mappings":";AAUA,MAAMA,IAA0B,IAE1BC,IAAwB,KAExBC,IAAgC;AAMtC,SAASC,EACPC,GACAC,GACAC,GACAC,GACe;AACf,SAAID,MAAe,SACV,CAAA,IAGF;AAAA,IACL;AAAA,MACE,GAAG,CAACF,CAAI;AAAA,MACR,GAAG,CAACC,CAAI;AAAA,MACR,MAAM;AAAA,MACN,MAAM;AAAA,MACN,QAAQ;AAAA,QACN,QAAQC,MAAe,YAAa,YAAuB;AAAA,QAC3D,MAAM;AAAA,QACN,OAAAC;AAAA,MAAA;AAAA,MAEF,YAAY;AAAA,MACZ,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ;AAQO,SAASC,EACdC,GAMe;AACf,QAAMC,IAAwB,CAAA;AAE9B,aAAW,EAAE,OAAAC,GAAO,aAAAC,GAAa,GAAAC,EAAA,KAAOJ,GAAU;AAChD,UAAMF,IAAQO,EAAYF,CAAW,GAG/BG,IAAef,IAA0BY,IAAcV,GACvDc,IAAaf,IAAwBW,IAAcV;AAEzD,eAAWe,KAAQN,GAAO;AACxB,YAAMO,IAAWD,EAAK,WAAW,cAAc,GACzCE,IAASF,EAAK,WAAW,YAAY,GACrCG,IAASP,EAAEK,CAAQ,GACnBG,IAAOR,EAAEM,CAAM,GAGfG,IAAkBL,EAAK,eAAe,YACtCM,IAAgBN,EAAK,aAAa;AAGxC,MAAAP,EAAO,KAAK,GAAGP,EAAkBiB,GAAQL,GAAcO,GAAiBf,CAAK,CAAC,GAG9EG,EAAO,KAAK,GAAGP,EAAkBkB,GAAML,GAAYO,GAAehB,CAAK,CAAC;AAAA,IAC1E;AAAA,EACF;AAEA,SAAOG;AACT;"}

package/dist/components/charts/ChromatogramChart/constants.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T={MARGIN_LEFT:70,MARGIN_RIGHT:30,MARGIN_BOTTOM:60,MARGIN_TOP_WITH_TITLE:50,MARGIN_TOP_NO_TITLE:30,MARGIN_PAD:5},O={USER_ANNOTATION_FONT_SIZE:11,AUTO_ANNOTATION_FONT_SIZE:10};exports.CHROMATOGRAM_ANNOTATION=O;exports.CHROMATOGRAM_LAYOUT=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O={MARGIN_LEFT:70,MARGIN_RIGHT:30,MARGIN_BOTTOM:60,MARGIN_TOP_WITH_TITLE:50,MARGIN_TOP_NO_TITLE:30,MARGIN_PAD:5},T={USER_ANNOTATION_FONT_SIZE:11,AUTO_ANNOTATION_FONT_SIZE:10,USER_ANNOTATION_COLOR:"rgba(100, 116, 139, 1)",USER_ANNOTATION_TEXT_COLOR:"rgba(26, 26, 26, 1)",BACKGROUND_COLOR:"#ffffff"};exports.CHROMATOGRAM_ANNOTATION=T;exports.CHROMATOGRAM_LAYOUT=O;
 //# sourceMappingURL=constants.cjs.map

package/dist/components/charts/ChromatogramChart/constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"constants.cjs","sources":["../../../../src/components/charts/ChromatogramChart/constants.ts"],"sourcesContent":["/**\n * Constants for ChromatogramChart component\n */\n\n/**\n * Layout constants for chart margins and spacing\n */\nexport const CHROMATOGRAM_LAYOUT = {\n  /** Left margin in pixels */\n  MARGIN_LEFT: 70,\n  /** Right margin in pixels */\n  MARGIN_RIGHT: 30,\n  /** Bottom margin in pixels */\n  MARGIN_BOTTOM: 60,\n  /** Top margin with title in pixels */\n  MARGIN_TOP_WITH_TITLE: 50,\n  /** Top margin without title in pixels */\n  MARGIN_TOP_NO_TITLE: 30,\n  /** Padding around plot area */\n  MARGIN_PAD: 5,\n} as const;\n\n/**\n * Annotation constants for peak labels and markers\n */\nexport const CHROMATOGRAM_ANNOTATION = {\n  /** Default vertical offset for annotation arrows (negative = above point) */\n  DEFAULT_ARROW_OFFSET_Y: -30,\n  /** Font size for user-defined annotations */\n  USER_ANNOTATION_FONT_SIZE: 11,\n  /** Font size for auto-detected peak annotations */\n  AUTO_ANNOTATION_FONT_SIZE: 10,\n} as const;\n\n"],"names":["CHROMATOGRAM_LAYOUT","CHROMATOGRAM_ANNOTATION"],"mappings":"gFAOO,MAAMA,EAAsB,CAEjC,YAAa,GAEb,aAAc,GAEd,cAAe,GAEf,sBAAuB,GAEvB,oBAAqB,GAErB,WAAY,CACd,EAKaC,EAA0B,CAIrC,0BAA2B,GAE3B,0BAA2B,EAC7B"}
+{"version":3,"file":"constants.cjs","sources":["../../../../src/components/charts/ChromatogramChart/constants.ts"],"sourcesContent":["/**\n * Constants for ChromatogramChart component\n */\n\n/**\n * Layout constants for chart margins and spacing\n */\nexport const CHROMATOGRAM_LAYOUT = {\n  /** Left margin in pixels */\n  MARGIN_LEFT: 70,\n  /** Right margin in pixels */\n  MARGIN_RIGHT: 30,\n  /** Bottom margin in pixels */\n  MARGIN_BOTTOM: 60,\n  /** Top margin with title in pixels */\n  MARGIN_TOP_WITH_TITLE: 50,\n  /** Top margin without title in pixels */\n  MARGIN_TOP_NO_TITLE: 30,\n  /** Padding around plot area */\n  MARGIN_PAD: 5,\n} as const;\n\n/**\n * Annotation constants for peak labels and markers\n */\nexport const CHROMATOGRAM_ANNOTATION = {\n  /** Default vertical offset for annotation arrows (negative = above point) */\n  DEFAULT_ARROW_OFFSET_Y: -30,\n  /** Font size for user-defined annotations */\n  USER_ANNOTATION_FONT_SIZE: 11,\n  /** Font size for auto-detected peak annotations */\n  AUTO_ANNOTATION_FONT_SIZE: 10,\n  /** Arrow color for user-defined annotations (grey 500) */\n  USER_ANNOTATION_COLOR: \"rgba(100, 116, 139, 1)\",\n  /** Text color for user-defined annotations (black 900) */\n  USER_ANNOTATION_TEXT_COLOR: \"rgba(26, 26, 26, 1)\",\n  /** Background color behind annotation text */\n  BACKGROUND_COLOR: \"#ffffff\",\n} as const;\n\n"],"names":["CHROMATOGRAM_LAYOUT","CHROMATOGRAM_ANNOTATION"],"mappings":"gFAOO,MAAMA,EAAsB,CAEjC,YAAa,GAEb,aAAc,GAEd,cAAe,GAEf,sBAAuB,GAEvB,oBAAqB,GAErB,WAAY,CACd,EAKaC,EAA0B,CAIrC,0BAA2B,GAE3B,0BAA2B,GAE3B,sBAAuB,yBAEvB,2BAA4B,sBAE5B,iBAAkB,SACpB"}

package/dist/components/charts/ChromatogramChart/constants.js

@@ -1,4 +1,4 @@
-const T = {
+const O = {
   /** Left margin in pixels */
   MARGIN_LEFT: 70,
   /** Right margin in pixels */
@@ -11,14 +11,20 @@ const T = {
   MARGIN_TOP_NO_TITLE: 30,
   /** Padding around plot area */
   MARGIN_PAD: 5
-}, A = {
+}, T = {
   /** Font size for user-defined annotations */
   USER_ANNOTATION_FONT_SIZE: 11,
   /** Font size for auto-detected peak annotations */
-  AUTO_ANNOTATION_FONT_SIZE: 10
+  AUTO_ANNOTATION_FONT_SIZE: 10,
+  /** Arrow color for user-defined annotations (grey 500) */
+  USER_ANNOTATION_COLOR: "rgba(100, 116, 139, 1)",
+  /** Text color for user-defined annotations (black 900) */
+  USER_ANNOTATION_TEXT_COLOR: "rgba(26, 26, 26, 1)",
+  /** Background color behind annotation text */
+  BACKGROUND_COLOR: "#ffffff"
 };
 export {
-  A as CHROMATOGRAM_ANNOTATION,
-  T as CHROMATOGRAM_LAYOUT
+  T as CHROMATOGRAM_ANNOTATION,
+  O as CHROMATOGRAM_LAYOUT
 };
 //# sourceMappingURL=constants.js.map

package/dist/components/charts/ChromatogramChart/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../../src/components/charts/ChromatogramChart/constants.ts"],"sourcesContent":["/**\n * Constants for ChromatogramChart component\n */\n\n/**\n * Layout constants for chart margins and spacing\n */\nexport const CHROMATOGRAM_LAYOUT = {\n  /** Left margin in pixels */\n  MARGIN_LEFT: 70,\n  /** Right margin in pixels */\n  MARGIN_RIGHT: 30,\n  /** Bottom margin in pixels */\n  MARGIN_BOTTOM: 60,\n  /** Top margin with title in pixels */\n  MARGIN_TOP_WITH_TITLE: 50,\n  /** Top margin without title in pixels */\n  MARGIN_TOP_NO_TITLE: 30,\n  /** Padding around plot area */\n  MARGIN_PAD: 5,\n} as const;\n\n/**\n * Annotation constants for peak labels and markers\n */\nexport const CHROMATOGRAM_ANNOTATION = {\n  /** Default vertical offset for annotation arrows (negative = above point) */\n  DEFAULT_ARROW_OFFSET_Y: -30,\n  /** Font size for user-defined annotations */\n  USER_ANNOTATION_FONT_SIZE: 11,\n  /** Font size for auto-detected peak annotations */\n  AUTO_ANNOTATION_FONT_SIZE: 10,\n} as const;\n\n"],"names":["CHROMATOGRAM_LAYOUT","CHROMATOGRAM_ANNOTATION"],"mappings":"AAOO,MAAMA,IAAsB;AAAA;AAAA,EAEjC,aAAa;AAAA;AAAA,EAEb,cAAc;AAAA;AAAA,EAEd,eAAe;AAAA;AAAA,EAEf,uBAAuB;AAAA;AAAA,EAEvB,qBAAqB;AAAA;AAAA,EAErB,YAAY;AACd,GAKaC,IAA0B;AAAA;AAAA,EAIrC,2BAA2B;AAAA;AAAA,EAE3B,2BAA2B;AAC7B;"}
+{"version":3,"file":"constants.js","sources":["../../../../src/components/charts/ChromatogramChart/constants.ts"],"sourcesContent":["/**\n * Constants for ChromatogramChart component\n */\n\n/**\n * Layout constants for chart margins and spacing\n */\nexport const CHROMATOGRAM_LAYOUT = {\n  /** Left margin in pixels */\n  MARGIN_LEFT: 70,\n  /** Right margin in pixels */\n  MARGIN_RIGHT: 30,\n  /** Bottom margin in pixels */\n  MARGIN_BOTTOM: 60,\n  /** Top margin with title in pixels */\n  MARGIN_TOP_WITH_TITLE: 50,\n  /** Top margin without title in pixels */\n  MARGIN_TOP_NO_TITLE: 30,\n  /** Padding around plot area */\n  MARGIN_PAD: 5,\n} as const;\n\n/**\n * Annotation constants for peak labels and markers\n */\nexport const CHROMATOGRAM_ANNOTATION = {\n  /** Default vertical offset for annotation arrows (negative = above point) */\n  DEFAULT_ARROW_OFFSET_Y: -30,\n  /** Font size for user-defined annotations */\n  USER_ANNOTATION_FONT_SIZE: 11,\n  /** Font size for auto-detected peak annotations */\n  AUTO_ANNOTATION_FONT_SIZE: 10,\n  /** Arrow color for user-defined annotations (grey 500) */\n  USER_ANNOTATION_COLOR: \"rgba(100, 116, 139, 1)\",\n  /** Text color for user-defined annotations (black 900) */\n  USER_ANNOTATION_TEXT_COLOR: \"rgba(26, 26, 26, 1)\",\n  /** Background color behind annotation text */\n  BACKGROUND_COLOR: \"#ffffff\",\n} as const;\n\n"],"names":["CHROMATOGRAM_LAYOUT","CHROMATOGRAM_ANNOTATION"],"mappings":"AAOO,MAAMA,IAAsB;AAAA;AAAA,EAEjC,aAAa;AAAA;AAAA,EAEb,cAAc;AAAA;AAAA,EAEd,eAAe;AAAA;AAAA,EAEf,uBAAuB;AAAA;AAAA,EAEvB,qBAAqB;AAAA;AAAA,EAErB,YAAY;AACd,GAKaC,IAA0B;AAAA;AAAA,EAIrC,2BAA2B;AAAA;AAAA,EAE3B,2BAA2B;AAAA;AAAA,EAE3B,uBAAuB;AAAA;AAAA,EAEvB,4BAA4B;AAAA;AAAA,EAE5B,kBAAkB;AACpB;"}

package/dist/components/charts/DotPlot/DotPlot.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("react/jsx-runtime"),z=require("plotly.js-dist"),e=require("react"),L=require("../../../hooks/use-plotly-theme.cjs"),r=require("../../../utils/colors.cjs"),P=({dataSeries:l,width:u=1e3,height:d=600,title:p="Dot Plot",xTitle:n="Columns",yTitle:s="Rows",variant:h="default",markerSize:f=8})=>{const c=e.useRef(null),t=L.usePlotlyTheme(),x=e.useMemo(()=>Array.isArray(l)?l:[l],[l]),i=e.useMemo(()=>[r.COLORS.ORANGE,r.COLORS.RED,r.COLORS.GREEN,r.COLORS.BLUE,r.COLORS.YELLOW,r.COLORS.PURPLE],[]),m=e.useMemo(()=>["circle","square","diamond","triangle-up","triangle-down","star"],[]),O=e.useMemo(()=>x.map((o,a)=>h==="default"?{...o,color:o.color||i[0],symbol:"circle",size:o.size||f}:{...o,color:o.color||i[a%i.length],symbol:o.symbol||m[a%m.length],size:o.size||f}),[x,h,f,i,m]),y=t.gridColor,C=e.useMemo(()=>O.map(o=>({type:"scatter",x:o.x,y:o.y,mode:"markers",name:o.name,marker:{color:o.color,size:o.size,symbol:o.symbol,line:{color:t.paperBg,width:1}},hovertemplate:`${n}: %{x}<br>${s}: %{y}<extra>${o.name}</extra>`})),[O,n,s,t]),g=e.useMemo(()=>({tickcolor:t.tickColor,ticklen:12,tickwidth:1,ticks:"outside",tickfont:{size:16,color:t.textColor,family:"Inter, sans-serif",weight:400},linecolor:t.lineColor,linewidth:1,position:0,zeroline:!1}),[t]),R=e.useMemo(()=>({text:p,x:.5,y:.95,xanchor:"center",yanchor:"top",font:{size:32,weight:600,family:"Inter, sans-serif",color:t.textColor,lineheight:1.2,standoff:30}}),[p,t]);return e.useEffect(()=>{if(!c.current)return;const o={width:u,height:d,font:{family:"Inter, sans-serif"},title:R,margin:{l:80,r:40,b:80,t:80,pad:0},showlegend:!0,legend:{x:.5,y:-.2,xanchor:"center",yanchor:"top",orientation:"h",font:{size:13,color:t.legendColor,family:"Inter, sans-serif",weight:500,lineheight:18}},xaxis:{title:{text:n,font:{size:16,color:t.textSecondary,family:"Inter, sans-serif",weight:400},standoff:15},gridcolor:y,...g},yaxis:{title:{text:s,font:{size:16,color:t.textSecondary,family:"Inter, sans-serif",weight:400},standoff:15},gridcolor:y,...g},paper_bgcolor:t.paperBg,plot_bgcolor:t.plotBg},a={responsive:!0,displayModeBar:!1,displaylogo:!1};z.newPlot(c.current,C,o,a);const b=c.current;return()=>{b&&z.purge(b)}},[u,d,n,s,C,R,g,y,t]),w.jsx("div",{className:"dotplot-container",style:{width:u},children:w.jsx("div",{ref:c,style:{width:"100%",height:"100%",margin:"0"}})})};exports.DotPlot=P;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const z=require("react/jsx-runtime"),M=require("plotly.js-dist"),e=require("react"),P=require("../../../hooks/use-plotly-theme.cjs"),k=require("../../../utils/colors.cjs"),R=({dataSeries:r,width:a=1e3,height:g=600,title:d="Dot Plot",xTitle:l="Columns",yTitle:n="Rows",variant:p="default",markerSize:f=8})=>{const s=e.useRef(null),t=P.usePlotlyTheme(),h=e.useMemo(()=>Array.isArray(r)?r:[r],[r]),c=k.CHART_COLORS,u=e.useMemo(()=>["circle","square","diamond","triangle-up","triangle-down","star"],[]),x=e.useMemo(()=>h.map((o,i)=>p==="default"?{...o,color:o.color||c[0],symbol:"circle",size:o.size||f}:{...o,color:o.color||c[i%c.length],symbol:o.symbol||u[i%u.length],size:o.size||f}),[h,p,f,c,u]),m=t.gridColor,b=e.useMemo(()=>x.map(o=>({type:"scatter",x:o.x,y:o.y,mode:"markers",name:o.name,marker:{color:o.color,size:o.size,symbol:o.symbol,line:{color:t.paperBg,width:1}},hovertemplate:`${l}: %{x}<br>${n}: %{y}<extra>${o.name}</extra>`})),[x,l,n,t]),y=e.useMemo(()=>({tickcolor:t.tickColor,ticklen:12,tickwidth:1,ticks:"outside",tickfont:{size:16,color:t.textColor,family:"Inter, sans-serif",weight:400},linecolor:t.lineColor,linewidth:1,position:0,zeroline:!1}),[t]),C=e.useMemo(()=>({text:d,x:.5,y:.95,xanchor:"center",yanchor:"top",font:{size:32,weight:600,family:"Inter, sans-serif",color:t.textColor,lineheight:1.2,standoff:30}}),[d,t]);return e.useEffect(()=>{if(!s.current)return;const o={width:a,height:g,font:{family:"Inter, sans-serif"},title:C,margin:{l:80,r:40,b:80,t:80,pad:0},showlegend:!0,legend:{x:.5,y:-.2,xanchor:"center",yanchor:"top",orientation:"h",font:{size:13,color:t.legendColor,family:"Inter, sans-serif",weight:500,lineheight:18}},xaxis:{title:{text:l,font:{size:16,color:t.textSecondary,family:"Inter, sans-serif",weight:400},standoff:15},gridcolor:m,...y},yaxis:{title:{text:n,font:{size:16,color:t.textSecondary,family:"Inter, sans-serif",weight:400},standoff:15},gridcolor:m,...y},paper_bgcolor:t.paperBg,plot_bgcolor:t.plotBg},i={responsive:!0,displayModeBar:!1,displaylogo:!1};M.newPlot(s.current,b,o,i);const w=s.current;return()=>{w&&M.purge(w)}},[a,g,l,n,b,C,y,m,t]),z.jsx("div",{className:"dotplot-container",style:{width:a},children:z.jsx("div",{ref:s,style:{width:"100%",height:"100%",margin:"0"}})})};exports.DotPlot=R;
 //# sourceMappingURL=DotPlot.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"DotPlot.cjs","sources":["../../../../src/components/charts/DotPlot/DotPlot.tsx"],"sourcesContent":["import Plotly from \"plotly.js-dist\";\nimport React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport { COLORS } from \"@/utils/colors\";\n\ntype MarkerSymbol =\n  | \"circle\"\n  | \"square\"\n  | \"diamond\"\n  | \"triangle-up\"\n  | \"triangle-down\"\n  | \"star\";\n\ninterface DotPlotDataSeries {\n  x: number[];\n  y: number[];\n  name: string;\n  color?: string;\n  symbol?: MarkerSymbol;\n  size?: number;\n}\n\ntype DotPlotVariant = \"default\" | \"stacked\";\n\ntype DotPlotProps = {\n  dataSeries: DotPlotDataSeries | DotPlotDataSeries[];\n  width?: number;\n  height?: number;\n  title?: string;\n  xTitle?: string;\n  yTitle?: string;\n  variant?: DotPlotVariant;\n  markerSize?: number;\n};\n\nconst DotPlot: React.FC<DotPlotProps> = ({\n  dataSeries,\n  width = 1000,\n  height = 600,\n  title = \"Dot Plot\",\n  xTitle = \"Columns\",\n  yTitle = \"Rows\",\n  variant = \"default\",\n  markerSize = 8,\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n  const seriesArray = useMemo(\n    () => (Array.isArray(dataSeries) ? dataSeries : [dataSeries]),\n    [dataSeries],\n  );\n\n  const defaultColors = useMemo(\n    () => [\n      COLORS.ORANGE,\n      COLORS.RED,\n      COLORS.GREEN,\n      COLORS.BLUE,\n      COLORS.YELLOW,\n      COLORS.PURPLE,\n    ],\n    [],\n  );\n\n  const defaultSymbols: MarkerSymbol[] = useMemo(\n    () => [\n      \"circle\",\n      \"square\",\n      \"diamond\",\n      \"triangle-up\",\n      \"triangle-down\",\n      \"star\",\n    ],\n    [],\n  );\n\n  const seriesWithColors = useMemo(() => {\n    return seriesArray.map((series, index) => {\n      if (variant === \"default\") {\n        // Default variant: all circles, use first color or series color\n        return {\n          ...series,\n          color: series.color || defaultColors[0],\n          symbol: \"circle\" as MarkerSymbol,\n          size: series.size || markerSize,\n        };\n      } else {\n        // Stacked variant: different symbols and colors for each series\n        return {\n          ...series,\n          color: series.color || defaultColors[index % defaultColors.length],\n          symbol:\n            series.symbol || defaultSymbols[index % defaultSymbols.length],\n          size: series.size || markerSize,\n        };\n      }\n    });\n  }, [seriesArray, variant, markerSize, defaultColors, defaultSymbols]);\n\n  const gridColor = theme.gridColor;\n\n  const plotData = useMemo(\n    () =>\n      seriesWithColors.map((series) => ({\n        type: \"scatter\" as const,\n        x: series.x,\n        y: series.y,\n        mode: \"markers\" as const,\n        name: series.name,\n        marker: {\n          color: series.color,\n          size: series.size,\n          symbol: series.symbol,\n          line: {\n            color: theme.paperBg,\n            width: 1,\n          },\n        },\n        hovertemplate: `${xTitle}: %{x}<br>${yTitle}: %{y}<extra>${series.name}</extra>`,\n      })),\n    [seriesWithColors, xTitle, yTitle, theme],\n  );\n\n  const tickOptions = useMemo(\n    () => ({\n      tickcolor: theme.tickColor,\n      ticklen: 12,\n      tickwidth: 1,\n      ticks: \"outside\" as const,\n      tickfont: {\n        size: 16,\n        color: theme.textColor,\n        family: \"Inter, sans-serif\",\n        weight: 400,\n      },\n      linecolor: theme.lineColor,\n      linewidth: 1,\n      position: 0,\n      zeroline: false,\n    }),\n    [theme],\n  );\n\n  const titleOptions = useMemo(\n    () => ({\n      text: title,\n      x: 0.5,\n      y: 0.95,\n      xanchor: \"center\" as const,\n      yanchor: \"top\" as const,\n      font: {\n        size: 32,\n        weight: 600,\n        family: \"Inter, sans-serif\",\n        color: theme.textColor,\n        lineheight: 1.2,\n        standoff: 30,\n      },\n    }),\n    [title, theme],\n  );\n\n  useEffect(() => {\n    if (!plotRef.current) return;\n\n    const layout = {\n      width,\n      height,\n      font: {\n        family: \"Inter, sans-serif\",\n      },\n      title: titleOptions,\n      margin: { l: 80, r: 40, b: 80, t: 80, pad: 0 },\n      showlegend: true,\n      legend: {\n        x: 0.5,\n        y: -0.2,\n        xanchor: \"center\" as const,\n        yanchor: \"top\" as const,\n        orientation: \"h\" as const,\n        font: {\n          size: 13,\n          color: theme.legendColor,\n          family: \"Inter, sans-serif\",\n          weight: 500,\n          lineheight: 18,\n        },\n      },\n      xaxis: {\n        title: {\n          text: xTitle,\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: \"Inter, sans-serif\",\n            weight: 400,\n          },\n          standoff: 15,\n        },\n        gridcolor: gridColor,\n        ...tickOptions,\n      },\n      yaxis: {\n        title: {\n          text: yTitle,\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: \"Inter, sans-serif\",\n            weight: 400,\n          },\n          standoff: 15,\n        },\n        gridcolor: gridColor,\n        ...tickOptions,\n      },\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\n    };\n\n    const config = {\n      responsive: true,\n      displayModeBar: false,\n      displaylogo: false,\n    };\n\n    Plotly.newPlot(plotRef.current, plotData, layout, config);\n\n    // Capture ref value for cleanup\n    const plotElement = plotRef.current;\n\n    return () => {\n      if (plotElement) {\n        Plotly.purge(plotElement);\n      }\n    };\n  }, [width, height, xTitle, yTitle, plotData, titleOptions, tickOptions, gridColor, theme]);\n\n  return (\n    <div className=\"dotplot-container\" style={{ width: width }}>\n      <div\n        ref={plotRef}\n        style={{\n          width: \"100%\",\n          height: \"100%\",\n          margin: \"0\",\n        }}\n      />\n    </div>\n  );\n};\n\nexport { DotPlot };\nexport type { DotPlotDataSeries, DotPlotProps, DotPlotVariant, MarkerSymbol };\n"],"names":["DotPlot","dataSeries","width","height","title","xTitle","yTitle","variant","markerSize","plotRef","useRef","theme","usePlotlyTheme","seriesArray","useMemo","defaultColors","COLORS","defaultSymbols","seriesWithColors","series","index","gridColor","plotData","tickOptions","titleOptions","useEffect","layout","config","Plotly","plotElement","jsx"],"mappings":"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"}
+{"version":3,"file":"DotPlot.cjs","sources":["../../../../src/components/charts/DotPlot/DotPlot.tsx"],"sourcesContent":["import Plotly from \"plotly.js-dist\";\nimport React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport { CHART_COLORS } from \"@/utils/colors\";\n\ntype MarkerSymbol =\n  | \"circle\"\n  | \"square\"\n  | \"diamond\"\n  | \"triangle-up\"\n  | \"triangle-down\"\n  | \"star\";\n\ninterface DotPlotDataSeries {\n  x: number[];\n  y: number[];\n  name: string;\n  color?: string;\n  symbol?: MarkerSymbol;\n  size?: number;\n}\n\ntype DotPlotVariant = \"default\" | \"stacked\";\n\ntype DotPlotProps = {\n  dataSeries: DotPlotDataSeries | DotPlotDataSeries[];\n  width?: number;\n  height?: number;\n  title?: string;\n  xTitle?: string;\n  yTitle?: string;\n  variant?: DotPlotVariant;\n  markerSize?: number;\n};\n\nconst DotPlot: React.FC<DotPlotProps> = ({\n  dataSeries,\n  width = 1000,\n  height = 600,\n  title = \"Dot Plot\",\n  xTitle = \"Columns\",\n  yTitle = \"Rows\",\n  variant = \"default\",\n  markerSize = 8,\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n  const seriesArray = useMemo(\n    () => (Array.isArray(dataSeries) ? dataSeries : [dataSeries]),\n    [dataSeries],\n  );\n\n  const defaultColors = CHART_COLORS;\n\n  const defaultSymbols: MarkerSymbol[] = useMemo(\n    () => [\n      \"circle\",\n      \"square\",\n      \"diamond\",\n      \"triangle-up\",\n      \"triangle-down\",\n      \"star\",\n    ],\n    [],\n  );\n\n  const seriesWithColors = useMemo(() => {\n    return seriesArray.map((series, index) => {\n      if (variant === \"default\") {\n        // Default variant: all circles, use first color or series color\n        return {\n          ...series,\n          color: series.color || defaultColors[0],\n          symbol: \"circle\" as MarkerSymbol,\n          size: series.size || markerSize,\n        };\n      } else {\n        // Stacked variant: different symbols and colors for each series\n        return {\n          ...series,\n          color: series.color || defaultColors[index % defaultColors.length],\n          symbol:\n            series.symbol || defaultSymbols[index % defaultSymbols.length],\n          size: series.size || markerSize,\n        };\n      }\n    });\n  }, [seriesArray, variant, markerSize, defaultColors, defaultSymbols]);\n\n  const gridColor = theme.gridColor;\n\n  const plotData = useMemo(\n    () =>\n      seriesWithColors.map((series) => ({\n        type: \"scatter\" as const,\n        x: series.x,\n        y: series.y,\n        mode: \"markers\" as const,\n        name: series.name,\n        marker: {\n          color: series.color,\n          size: series.size,\n          symbol: series.symbol,\n          line: {\n            color: theme.paperBg,\n            width: 1,\n          },\n        },\n        hovertemplate: `${xTitle}: %{x}<br>${yTitle}: %{y}<extra>${series.name}</extra>`,\n      })),\n    [seriesWithColors, xTitle, yTitle, theme],\n  );\n\n  const tickOptions = useMemo(\n    () => ({\n      tickcolor: theme.tickColor,\n      ticklen: 12,\n      tickwidth: 1,\n      ticks: \"outside\" as const,\n      tickfont: {\n        size: 16,\n        color: theme.textColor,\n        family: \"Inter, sans-serif\",\n        weight: 400,\n      },\n      linecolor: theme.lineColor,\n      linewidth: 1,\n      position: 0,\n      zeroline: false,\n    }),\n    [theme],\n  );\n\n  const titleOptions = useMemo(\n    () => ({\n      text: title,\n      x: 0.5,\n      y: 0.95,\n      xanchor: \"center\" as const,\n      yanchor: \"top\" as const,\n      font: {\n        size: 32,\n        weight: 600,\n        family: \"Inter, sans-serif\",\n        color: theme.textColor,\n        lineheight: 1.2,\n        standoff: 30,\n      },\n    }),\n    [title, theme],\n  );\n\n  useEffect(() => {\n    if (!plotRef.current) return;\n\n    const layout = {\n      width,\n      height,\n      font: {\n        family: \"Inter, sans-serif\",\n      },\n      title: titleOptions,\n      margin: { l: 80, r: 40, b: 80, t: 80, pad: 0 },\n      showlegend: true,\n      legend: {\n        x: 0.5,\n        y: -0.2,\n        xanchor: \"center\" as const,\n        yanchor: \"top\" as const,\n        orientation: \"h\" as const,\n        font: {\n          size: 13,\n          color: theme.legendColor,\n          family: \"Inter, sans-serif\",\n          weight: 500,\n          lineheight: 18,\n        },\n      },\n      xaxis: {\n        title: {\n          text: xTitle,\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: \"Inter, sans-serif\",\n            weight: 400,\n          },\n          standoff: 15,\n        },\n        gridcolor: gridColor,\n        ...tickOptions,\n      },\n      yaxis: {\n        title: {\n          text: yTitle,\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: \"Inter, sans-serif\",\n            weight: 400,\n          },\n          standoff: 15,\n        },\n        gridcolor: gridColor,\n        ...tickOptions,\n      },\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\n    };\n\n    const config = {\n      responsive: true,\n      displayModeBar: false,\n      displaylogo: false,\n    };\n\n    Plotly.newPlot(plotRef.current, plotData, layout, config);\n\n    // Capture ref value for cleanup\n    const plotElement = plotRef.current;\n\n    return () => {\n      if (plotElement) {\n        Plotly.purge(plotElement);\n      }\n    };\n  }, [width, height, xTitle, yTitle, plotData, titleOptions, tickOptions, gridColor, theme]);\n\n  return (\n    <div className=\"dotplot-container\" style={{ width: width }}>\n      <div\n        ref={plotRef}\n        style={{\n          width: \"100%\",\n          height: \"100%\",\n          margin: \"0\",\n        }}\n      />\n    </div>\n  );\n};\n\nexport { DotPlot };\nexport type { DotPlotDataSeries, DotPlotProps, DotPlotVariant, MarkerSymbol };\n"],"names":["DotPlot","dataSeries","width","height","title","xTitle","yTitle","variant","markerSize","plotRef","useRef","theme","usePlotlyTheme","seriesArray","useMemo","defaultColors","CHART_COLORS","defaultSymbols","seriesWithColors","series","index","gridColor","plotData","tickOptions","titleOptions","useEffect","layout","config","Plotly","plotElement","jsx"],"mappings":"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"}