@tetrascience-npm/tetrascience-react-ui 0.5.0-beta.20.1 → 0.5.0-beta.22.1

package/dist/components/charts/Boxplot/Boxplot.js

@@ -0,0 +1,171 @@
+import { jsx as b } from "react/jsx-runtime";
+import C from "plotly.js-dist";
+import { useRef as E, useMemo as s, useEffect as z } from "react";
+import { usePlotlyTheme as N } from "../../../hooks/use-plotly-theme.js";
+const _ = -1.8, A = ({
+  dataSeries: a,
+  width: h = 1e3,
+  height: u = 600,
+  xRange: p,
+  yRange: c,
+  xTitle: d = "Columns",
+  yTitle: g = "Rows",
+  title: x = "Boxplot",
+  showPoints: y = !1
+}) => {
+  const f = E(null), t = N(), { yMin: M, yMax: w } = s(() => {
+    let r = Number.MAX_VALUE, o = Number.MIN_VALUE;
+    a.forEach((n) => {
+      n.y.forEach((e) => {
+        r = Math.min(r, e), o = Math.max(o, e);
+      });
+    });
+    const l = (o - r) * 0.1;
+    return {
+      yMin: r - l,
+      yMax: o + l
+    };
+  }, [a]), i = s(
+    () => c || [M, w],
+    [c, M, w]
+  ), k = s(() => {
+    const r = i[1] - i[0];
+    let o = Math.pow(10, Math.floor(Math.log10(r)));
+    r / o > 10 && (o = o * 2), r / o < 4 && (o = o / 2);
+    const l = [];
+    let n = Math.ceil(i[0] / o) * o;
+    for (; n <= i[1]; )
+      l.push(n), n += o;
+    return l;
+  }, [i]), m = s(
+    () => ({
+      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]
+  ), I = s(
+    () => ({
+      text: x,
+      x: 0.5,
+      y: 0.95,
+      xanchor: "center",
+      yanchor: "top",
+      font: {
+        size: 32,
+        weight: 600,
+        family: "Inter, sans-serif",
+        color: t.textColor,
+        lineheight: 1.2,
+        standoff: 30
+      }
+    }),
+    [x, t]
+  );
+  return z(() => {
+    if (!f.current) return;
+    const r = a.map((e) => ({
+      y: e.y,
+      x: e.x,
+      type: "box",
+      name: e.name,
+      marker: {
+        color: e.color
+      },
+      line: {
+        color: e.color
+      },
+      fillcolor: e.color + "40",
+      // Add transparency
+      boxpoints: y ? e.boxpoints || "outliers" : !1,
+      jitter: e.jitter || 0.3,
+      pointpos: e.pointpos || _
+    })), o = {
+      width: h,
+      height: u,
+      title: I,
+      margin: { l: 80, r: 40, b: 80, t: 80, pad: 0 },
+      paper_bgcolor: t.paperBg,
+      plot_bgcolor: t.plotBg,
+      font: {
+        family: "Inter, sans-serif"
+      },
+      dragmode: !1,
+      xaxis: {
+        title: {
+          text: d,
+          font: {
+            size: 16,
+            color: t.textSecondary,
+            family: "Inter, sans-serif",
+            weight: 400
+          },
+          standoff: 15
+        },
+        gridcolor: t.gridColor,
+        range: p,
+        autorange: !p,
+        showgrid: !0,
+        ...m
+      },
+      yaxis: {
+        title: {
+          text: g,
+          font: {
+            size: 16,
+            color: t.textSecondary,
+            family: "Inter, sans-serif",
+            weight: 400
+          },
+          standoff: 15
+        },
+        gridcolor: t.gridColor,
+        range: c,
+        autorange: !c,
+        tickmode: "array",
+        tickvals: k,
+        showgrid: !0,
+        ...m
+      },
+      legend: {
+        x: 0.5,
+        y: -0.2,
+        xanchor: "center",
+        yanchor: "top",
+        orientation: "h",
+        font: {
+          size: 13,
+          color: t.legendColor,
+          family: "Inter, sans-serif",
+          weight: 500,
+          lineheight: 18
+        }
+      },
+      showlegend: !0
+    }, l = {
+      responsive: !0,
+      displayModeBar: !1,
+      displaylogo: !1
+    };
+    C.newPlot(f.current, r, o, l);
+    const n = f.current;
+    return () => {
+      n && C.purge(n);
+    };
+  }, [a, h, u, p, c, i, d, g, y, I, m, k, t]), /* @__PURE__ */ b("div", { className: "boxplot-container", children: /* @__PURE__ */ b("div", { ref: f, style: { width: "100%", height: "100%" } }) });
+};
+export {
+  A as Boxplot
+};
+//# sourceMappingURL=Boxplot.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Boxplot.js","sources":["../../../../src/components/charts/Boxplot/Boxplot.tsx"],"sourcesContent":["import Plotly from \"plotly.js-dist\";\nimport React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\n\n/** Default point position offset from the box edge */\nconst DEFAULT_POINT_POSITION = -1.8;\n\ninterface BoxDataSeries {\n  y: number[];\n  name: string;\n  color: string;\n  x?: string[] | number[];\n  boxpoints?: \"all\" | \"outliers\" | \"suspectedoutliers\" | false;\n  jitter?: number;\n  pointpos?: number;\n}\n\ninterface BoxplotProps {\n  dataSeries: BoxDataSeries[];\n  width?: number;\n  height?: number;\n  xRange?: [number, number];\n  yRange?: [number, number];\n  xTitle?: string;\n  yTitle?: string;\n  title?: string;\n  showPoints?: boolean;\n}\n\nconst Boxplot: React.FC<BoxplotProps> = ({\n  dataSeries,\n  width = 1000,\n  height = 600,\n  xRange,\n  yRange,\n  xTitle = \"Columns\",\n  yTitle = \"Rows\",\n  title = \"Boxplot\",\n  showPoints = false,\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n\n  const { yMin, yMax } = useMemo(() => {\n    let minY = Number.MAX_VALUE;\n    let maxY = Number.MIN_VALUE;\n\n    dataSeries.forEach((series) => {\n      series.y.forEach((y) => {\n        minY = Math.min(minY, y);\n        maxY = Math.max(maxY, y);\n      });\n    });\n\n    const yPadding = (maxY - minY) * 0.1;\n\n    return {\n      yMin: minY - yPadding,\n      yMax: maxY + yPadding,\n    };\n  }, [dataSeries]);\n\n  const effectiveYRange = useMemo(\n    () => yRange || [yMin, yMax],\n    [yRange, yMin, yMax],\n  );\n\n  const yTicks = useMemo(() => {\n    const range = effectiveYRange[1] - effectiveYRange[0];\n    let step = Math.pow(10, Math.floor(Math.log10(range)));\n\n    if (range / step > 10) step = step * 2;\n    if (range / step < 4) step = step / 2;\n\n    const ticks = [];\n    let current = Math.ceil(effectiveYRange[0] / step) * step;\n    while (current <= effectiveYRange[1]) {\n      ticks.push(current);\n      current += step;\n    }\n    return ticks;\n  }, [effectiveYRange]);\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 data = dataSeries.map((series) => ({\n      y: series.y,\n      x: series.x,\n      type: \"box\" as const,\n      name: series.name,\n      marker: {\n        color: series.color,\n      },\n      line: {\n        color: series.color,\n      },\n      fillcolor: series.color + \"40\", // Add transparency\n      boxpoints: showPoints ? series.boxpoints || \"outliers\" : (false as const),\n      jitter: series.jitter || 0.3,\n      pointpos: series.pointpos || DEFAULT_POINT_POSITION,\n    }));\n\n    const layout = {\n      width,\n      height: height,\n      title: titleOptions,\n      margin: { l: 80, r: 40, b: 80, t: 80, pad: 0 },\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\n      font: {\n        family: \"Inter, sans-serif\",\n      },\n      dragmode: false as const,\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: theme.gridColor,\n        range: xRange,\n        autorange: !xRange,\n        showgrid: true,\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: theme.gridColor,\n        range: yRange,\n        autorange: !yRange,\n        tickmode: \"array\" as const,\n        tickvals: yTicks,\n        showgrid: true,\n        ...tickOptions,\n      },\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      showlegend: true,\n    };\n\n    const config = {\n      responsive: true,\n      displayModeBar: false,\n      displaylogo: false,\n    };\n\n    Plotly.newPlot(plotRef.current, data, layout, config);\n\n    // Capture ref value for cleanup\n    const plotElement = plotRef.current;\n\n    // Cleanup function\n    return () => {\n      if (plotElement) {\n        Plotly.purge(plotElement);\n      }\n    };\n  }, [dataSeries, width, height, xRange, yRange, effectiveYRange, xTitle, yTitle, showPoints, titleOptions, tickOptions, yTicks, theme]);\n\n  return (\n    <div className=\"boxplot-container\">\n      <div ref={plotRef} style={{ width: \"100%\", height: \"100%\" }} />\n    </div>\n  );\n};\n\nexport { Boxplot };\nexport type { BoxDataSeries, BoxplotProps };\n"],"names":["DEFAULT_POINT_POSITION","Boxplot","dataSeries","width","height","xRange","yRange","xTitle","yTitle","title","showPoints","plotRef","useRef","theme","usePlotlyTheme","yMin","yMax","useMemo","minY","maxY","series","y","yPadding","effectiveYRange","yTicks","range","step","ticks","current","tickOptions","titleOptions","useEffect","data","layout","config","Plotly","plotElement","jsx"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),F=require("plotly.js-dist"),n=require("react"),G=require("../../../hooks/use-plotly-theme.cjs");;/* empty css                    */const O=75,D=1.05,R=e=>{const a={A:e.peakA,T:e.peakT,G:e.peakG,C:e.peakC},p=Object.values(a);if(p.every(c=>c===p[0]))return"";let u="",h=0;return Object.entries(a).forEach(([c,f])=>{f>h&&(u=c,h=f)}),u},$=({data:e=[],width:a=900,height:p=600,positionInterval:x=10,colorA:u="#2D9CDB",colorT:h="#A1C63C",colorG:c="#FF5C64",colorC:f="#FFA62E"})=>{const d=n.useRef(null),y=G.usePlotlyTheme(),s=n.useMemo(()=>e.map(t=>t.position),[e]),S=n.useMemo(()=>e.map(t=>R(t)),[e]),M=n.useMemo(()=>e.map(t=>t.peakA),[e]),P=n.useMemo(()=>e.map(t=>t.peakT),[e]),k=n.useMemo(()=>e.map(t=>t.peakG),[e]),T=n.useMemo(()=>e.map(t=>t.peakC),[e]),C=n.useMemo(()=>({x:s,y:M,type:"scatter",mode:"lines",name:"A",line:{color:u,width:2,shape:"spline"}}),[s,M,u]),b=n.useMemo(()=>({x:s,y:P,type:"scatter",mode:"lines",name:"T",line:{color:h,width:2,shape:"spline"}}),[s,P,h]),N=n.useMemo(()=>({x:s,y:k,type:"scatter",mode:"lines",name:"G",line:{color:c,width:2,shape:"spline"}}),[s,k,c]),v=n.useMemo(()=>({x:s,y:T,type:"scatter",mode:"lines",name:"C",line:{color:f,width:2,shape:"spline"}}),[s,T,f]),w=n.useMemo(()=>Math.max(...M,...P,...k,...T),[M,P,k,T]);if(n.useEffect(()=>{if(!d.current||e.length===0)return;const t=[C,b,N,v],j={width:a,height:p-O,margin:{l:0,r:0,b:20,t:10,pad:0},paper_bgcolor:y.paperBg,plot_bgcolor:y.plotBg,font:{family:"Inter, sans-serif"},showlegend:!1,xaxis:{showgrid:!1,zeroline:!1,showticklabels:!1,showline:!1,range:[Math.min(...s),Math.max(...s)],fixedrange:!0},yaxis:{showgrid:!1,zeroline:!1,showticklabels:!1,showline:!1,range:[0,w*D],fixedrange:!0}},i={responsive:!0,displayModeBar:!1,displaylogo:!1,fillFrame:!0};F.newPlot(d.current,t,j,i);const l=d.current;return()=>{l&&F.purge(l)}},[e,a,p,C,b,N,v,w,s,y]),e.length===0)return r.jsx("div",{className:"chart-container",children:"No data available"});const _=()=>{const t=()=>{const i=Math.min(...s),l=Math.max(...s),q=a;return r.jsx("div",{className:"sequence-letters-container",children:S.map((m,g)=>{const o=s[g],A=m==="A"?u:m==="T"?h:m==="G"?c:m==="C"?f:y.textColor,B=(o-i)/(l-i)*q;return r.jsx("span",{className:"sequence-letter",style:{left:`${B}px`,color:A},children:m},`base-${g}`)})})},j=()=>{const i=Math.min(...s),l=Math.max(...s),q=a,m=Math.ceil(i/x)*x,g=[];for(let o=m;o<=l;o+=x)g.push({position:o,label:o.toString()});return r.jsx("div",{className:"position-numbers-container",children:g.map(o=>{const E=(o.position-i)/(l-i)*q;return r.jsx("span",{className:"position-number",style:{left:`${E}px`},children:o.label},`pos-${o.position}`)})})};return r.jsxs("div",{className:"sequence-header",children:[t(),j()]})};return r.jsxs("div",{className:"chromatogram-container",style:{width:a,height:p},children:[_(),r.jsx("div",{className:"chromatogram-chart",children:r.jsx("div",{ref:d,style:{width:"100%",height:"100%"}})})]})};exports.Chromatogram=$;
+//# sourceMappingURL=Chromatogram.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chromatogram.cjs","sources":["../../../../src/components/charts/Chromatogram/Chromatogram.tsx"],"sourcesContent":["import Plotly from \"plotly.js-dist\";\nimport React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport \"./Chromatogram.scss\";\n\n/** Height offset for the plot area in pixels */\nconst PLOT_HEIGHT_OFFSET = 75;\n/** Scale factor for y-axis range to add padding above max value */\nconst Y_AXIS_PADDING_FACTOR = 1.05;\n\ninterface PeakData {\n  position: number;\n  base?: string;\n  peakA: number;\n  peakT: number;\n  peakG: number;\n  peakC: number;\n}\n\ninterface ChromatogramProps {\n  data?: PeakData[];\n  width?: number;\n  height?: number;\n  positionInterval?: number;\n  colorA?: string;\n  colorT?: string;\n  colorG?: string;\n  colorC?: string;\n}\n\nconst determineBase = (item: PeakData): string => {\n  const peakValues = {\n    A: item.peakA,\n    T: item.peakT,\n    G: item.peakG,\n    C: item.peakC,\n  };\n\n  const values = Object.values(peakValues);\n  const allEqual = values.every((val) => val === values[0]);\n\n  if (allEqual) {\n    return \"\";\n  }\n\n  let highestBase = \"\";\n  let highestValue = 0;\n\n  Object.entries(peakValues).forEach(([base, value]) => {\n    if (value > highestValue) {\n      highestBase = base;\n      highestValue = value;\n    }\n  });\n\n  return highestBase;\n};\n\nconst Chromatogram: React.FC<ChromatogramProps> = ({\n  data = [],\n  width = 900,\n  height = 600,\n  positionInterval = 10,\n  colorA = \"#2D9CDB\",\n  colorT = \"#A1C63C\",\n  colorG = \"#FF5C64\",\n  colorC = \"#FFA62E\",\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n\n  const positions = useMemo(() => data.map((item) => item.position), [data]);\n  const sequence = useMemo(() => data.map((item) => determineBase(item)), [data]);\n  const peakA = useMemo(() => data.map((item) => item.peakA), [data]);\n  const peakT = useMemo(() => data.map((item) => item.peakT), [data]);\n  const peakG = useMemo(() => data.map((item) => item.peakG), [data]);\n  const peakC = useMemo(() => data.map((item) => item.peakC), [data]);\n\n  const aTrace = useMemo(\n    () => ({\n      x: positions,\n      y: peakA,\n      type: \"scatter\" as const,\n      mode: \"lines\" as const,\n      name: \"A\",\n      line: { color: colorA, width: 2, shape: \"spline\" as const },\n    }),\n    [positions, peakA, colorA],\n  );\n\n  const tTrace = useMemo(\n    () => ({\n      x: positions,\n      y: peakT,\n      type: \"scatter\" as const,\n      mode: \"lines\" as const,\n      name: \"T\",\n      line: { color: colorT, width: 2, shape: \"spline\" as const },\n    }),\n    [positions, peakT, colorT],\n  );\n\n  const gTrace = useMemo(\n    () => ({\n      x: positions,\n      y: peakG,\n      type: \"scatter\" as const,\n      mode: \"lines\" as const,\n      name: \"G\",\n      line: { color: colorG, width: 2, shape: \"spline\" as const },\n    }),\n    [positions, peakG, colorG],\n  );\n\n  const cTrace = useMemo(\n    () => ({\n      x: positions,\n      y: peakC,\n      type: \"scatter\" as const,\n      mode: \"lines\" as const,\n      name: \"C\",\n      line: { color: colorC, width: 2, shape: \"spline\" as const },\n    }),\n    [positions, peakC, colorC],\n  );\n\n  const maxValue = useMemo(\n    () => Math.max(...peakA, ...peakT, ...peakG, ...peakC),\n    [peakA, peakT, peakG, peakC],\n  );\n\n  useEffect(() => {\n    if (!plotRef.current || data.length === 0) return;\n\n    const plotData = [aTrace, tTrace, gTrace, cTrace];\n\n    const layout: Partial<Plotly.Layout> = {\n      width: width,\n      height: height - PLOT_HEIGHT_OFFSET,\n      margin: { l: 0, r: 0, b: 20, t: 10, pad: 0 },\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\n      font: {\n        family: \"Inter, sans-serif\",\n      },\n      showlegend: false,\n      xaxis: {\n        showgrid: false,\n        zeroline: false,\n        showticklabels: false,\n        showline: false,\n        range: [Math.min(...positions), Math.max(...positions)],\n        fixedrange: true,\n      },\n      yaxis: {\n        showgrid: false,\n        zeroline: false,\n        showticklabels: false,\n        showline: false,\n        range: [0, maxValue * Y_AXIS_PADDING_FACTOR],\n        fixedrange: true,\n      },\n    };\n\n    const config = {\n      responsive: true,\n      displayModeBar: false,\n      displaylogo: false,\n      fillFrame: true,\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  }, [data, width, height, aTrace, tTrace, gTrace, cTrace, maxValue, positions, theme]);\n\n  if (data.length === 0) {\n    return <div className=\"chart-container\">No data available</div>;\n  }\n\n  const renderSequence = () => {\n    const renderSequenceLetters = () => {\n      const minPosition = Math.min(...positions);\n      const maxPosition = Math.max(...positions);\n      const chartWidth = width;\n\n      return (\n        <div className=\"sequence-letters-container\">\n          {sequence.map((base, index) => {\n            const position = positions[index];\n            const color =\n              base === \"A\"\n                ? colorA\n                : base === \"T\"\n                ? colorT\n                : base === \"G\"\n                ? colorG\n                : base === \"C\"\n                ? colorC\n                : theme.textColor;\n\n            const percentage =\n              (position - minPosition) / (maxPosition - minPosition);\n            const leftPosition = percentage * chartWidth;\n\n            return (\n              <span\n                key={`base-${index}`}\n                className=\"sequence-letter\"\n                style={{\n                  left: `${leftPosition}px`,\n                  color,\n                }}\n              >\n                {base}\n              </span>\n            );\n          })}\n        </div>\n      );\n    };\n\n    const renderPositionNumbers = () => {\n      const minPosition = Math.min(...positions);\n      const maxPosition = Math.max(...positions);\n      const chartWidth = width;\n\n      const startPos =\n        Math.ceil(minPosition / positionInterval) * positionInterval;\n\n      const regularPositionLabels: Array<{ position: number; label: string }> =\n        [];\n\n      for (let pos = startPos; pos <= maxPosition; pos += positionInterval) {\n        regularPositionLabels.push({\n          position: pos,\n          label: pos.toString(),\n        });\n      }\n\n      return (\n        <div className=\"position-numbers-container\">\n          {regularPositionLabels.map((label) => {\n            const percentage =\n              (label.position - minPosition) / (maxPosition - minPosition);\n            const leftPosition = percentage * chartWidth;\n\n            return (\n              <span\n                key={`pos-${label.position}`}\n                className=\"position-number\"\n                style={{\n                  left: `${leftPosition}px`,\n                }}\n              >\n                {label.label}\n              </span>\n            );\n          })}\n        </div>\n      );\n    };\n\n    return (\n      <div className=\"sequence-header\">\n        {renderSequenceLetters()}\n        {renderPositionNumbers()}\n      </div>\n    );\n  };\n\n  return (\n    <div className=\"chromatogram-container\" style={{ width, height }}>\n      {renderSequence()}\n      <div className=\"chromatogram-chart\">\n        <div ref={plotRef} style={{ width: \"100%\", height: \"100%\" }} />\n      </div>\n    </div>\n  );\n};\n\nexport { Chromatogram };\nexport type { PeakData, ChromatogramProps };\n"],"names":["PLOT_HEIGHT_OFFSET","Y_AXIS_PADDING_FACTOR","determineBase","item","peakValues","values","val","highestBase","highestValue","base","value","Chromatogram","data","width","height","positionInterval","colorA","colorT","colorG","colorC","plotRef","useRef","theme","usePlotlyTheme","positions","useMemo","sequence","peakA","peakT","peakG","peakC","aTrace","tTrace","gTrace","cTrace","maxValue","useEffect","plotData","layout","config","Plotly","plotElement","jsx","renderSequence","renderSequenceLetters","minPosition","maxPosition","chartWidth","index","position","color","leftPosition","renderPositionNumbers","startPos","regularPositionLabels","pos","label","jsxs"],"mappings":"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"}

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

@@ -0,0 +1,164 @@
+import { jsx as p, jsxs as _ } from "react/jsx-runtime";
+import B from "plotly.js-dist";
+import { useRef as D, useMemo as n, useEffect as O } from "react";
+import { usePlotlyTheme as j } from "../../../hooks/use-plotly-theme.js";
+/* empty css                  */
+const $ = 75, L = 1.05, R = (e) => {
+  const r = {
+    A: e.peakA,
+    T: e.peakT,
+    G: e.peakG,
+    C: e.peakC
+  }, m = Object.values(r);
+  if (m.every((i) => i === m[0]))
+    return "";
+  let h = "", u = 0;
+  return Object.entries(r).forEach(([i, f]) => {
+    f > u && (h = i, u = f);
+  }), h;
+}, Y = ({
+  data: e = [],
+  width: r = 900,
+  height: m = 600,
+  positionInterval: d = 10,
+  colorA: h = "#2D9CDB",
+  colorT: u = "#A1C63C",
+  colorG: i = "#FF5C64",
+  colorC: f = "#FFA62E"
+}) => {
+  const x = D(null), y = j(), s = n(() => e.map((t) => t.position), [e]), G = n(() => e.map((t) => R(t)), [e]), k = n(() => e.map((t) => t.peakA), [e]), P = n(() => e.map((t) => t.peakT), [e]), T = n(() => e.map((t) => t.peakG), [e]), C = n(() => e.map((t) => t.peakC), [e]), b = n(
+    () => ({
+      x: s,
+      y: k,
+      type: "scatter",
+      mode: "lines",
+      name: "A",
+      line: { color: h, width: 2, shape: "spline" }
+    }),
+    [s, k, h]
+  ), q = n(
+    () => ({
+      x: s,
+      y: P,
+      type: "scatter",
+      mode: "lines",
+      name: "T",
+      line: { color: u, width: 2, shape: "spline" }
+    }),
+    [s, P, u]
+  ), v = n(
+    () => ({
+      x: s,
+      y: T,
+      type: "scatter",
+      mode: "lines",
+      name: "G",
+      line: { color: i, width: 2, shape: "spline" }
+    }),
+    [s, T, i]
+  ), w = n(
+    () => ({
+      x: s,
+      y: C,
+      type: "scatter",
+      mode: "lines",
+      name: "C",
+      line: { color: f, width: 2, shape: "spline" }
+    }),
+    [s, C, f]
+  ), A = n(
+    () => Math.max(...k, ...P, ...T, ...C),
+    [k, P, T, C]
+  );
+  return O(() => {
+    if (!x.current || e.length === 0) return;
+    const t = [b, q, v, w], N = {
+      width: r,
+      height: m - $,
+      margin: { l: 0, r: 0, b: 20, t: 10, pad: 0 },
+      paper_bgcolor: y.paperBg,
+      plot_bgcolor: y.plotBg,
+      font: {
+        family: "Inter, sans-serif"
+      },
+      showlegend: !1,
+      xaxis: {
+        showgrid: !1,
+        zeroline: !1,
+        showticklabels: !1,
+        showline: !1,
+        range: [Math.min(...s), Math.max(...s)],
+        fixedrange: !0
+      },
+      yaxis: {
+        showgrid: !1,
+        zeroline: !1,
+        showticklabels: !1,
+        showline: !1,
+        range: [0, A * L],
+        fixedrange: !0
+      }
+    }, a = {
+      responsive: !0,
+      displayModeBar: !1,
+      displaylogo: !1,
+      fillFrame: !0
+    };
+    B.newPlot(x.current, t, N, a);
+    const c = x.current;
+    return () => {
+      c && B.purge(c);
+    };
+  }, [e, r, m, b, q, v, w, A, s, y]), e.length === 0 ? /* @__PURE__ */ p("div", { className: "chart-container", children: "No data available" }) : /* @__PURE__ */ _("div", { className: "chromatogram-container", style: { width: r, height: m }, children: [
+    (() => {
+      const t = () => {
+        const a = Math.min(...s), c = Math.max(...s), M = r;
+        return /* @__PURE__ */ p("div", { className: "sequence-letters-container", children: G.map((l, g) => {
+          const o = s[g], E = l === "A" ? h : l === "T" ? u : l === "G" ? i : l === "C" ? f : y.textColor, S = (o - a) / (c - a) * M;
+          return /* @__PURE__ */ p(
+            "span",
+            {
+              className: "sequence-letter",
+              style: {
+                left: `${S}px`,
+                color: E
+              },
+              children: l
+            },
+            `base-${g}`
+          );
+        }) });
+      }, N = () => {
+        const a = Math.min(...s), c = Math.max(...s), M = r, l = Math.ceil(a / d) * d, g = [];
+        for (let o = l; o <= c; o += d)
+          g.push({
+            position: o,
+            label: o.toString()
+          });
+        return /* @__PURE__ */ p("div", { className: "position-numbers-container", children: g.map((o) => {
+          const F = (o.position - a) / (c - a) * M;
+          return /* @__PURE__ */ p(
+            "span",
+            {
+              className: "position-number",
+              style: {
+                left: `${F}px`
+              },
+              children: o.label
+            },
+            `pos-${o.position}`
+          );
+        }) });
+      };
+      return /* @__PURE__ */ _("div", { className: "sequence-header", children: [
+        t(),
+        N()
+      ] });
+    })(),
+    /* @__PURE__ */ p("div", { className: "chromatogram-chart", children: /* @__PURE__ */ p("div", { ref: x, style: { width: "100%", height: "100%" } }) })
+  ] });
+};
+export {
+  Y as Chromatogram
+};
+//# sourceMappingURL=Chromatogram.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chromatogram.js","sources":["../../../../src/components/charts/Chromatogram/Chromatogram.tsx"],"sourcesContent":["import Plotly from \"plotly.js-dist\";\nimport React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport \"./Chromatogram.scss\";\n\n/** Height offset for the plot area in pixels */\nconst PLOT_HEIGHT_OFFSET = 75;\n/** Scale factor for y-axis range to add padding above max value */\nconst Y_AXIS_PADDING_FACTOR = 1.05;\n\ninterface PeakData {\n  position: number;\n  base?: string;\n  peakA: number;\n  peakT: number;\n  peakG: number;\n  peakC: number;\n}\n\ninterface ChromatogramProps {\n  data?: PeakData[];\n  width?: number;\n  height?: number;\n  positionInterval?: number;\n  colorA?: string;\n  colorT?: string;\n  colorG?: string;\n  colorC?: string;\n}\n\nconst determineBase = (item: PeakData): string => {\n  const peakValues = {\n    A: item.peakA,\n    T: item.peakT,\n    G: item.peakG,\n    C: item.peakC,\n  };\n\n  const values = Object.values(peakValues);\n  const allEqual = values.every((val) => val === values[0]);\n\n  if (allEqual) {\n    return \"\";\n  }\n\n  let highestBase = \"\";\n  let highestValue = 0;\n\n  Object.entries(peakValues).forEach(([base, value]) => {\n    if (value > highestValue) {\n      highestBase = base;\n      highestValue = value;\n    }\n  });\n\n  return highestBase;\n};\n\nconst Chromatogram: React.FC<ChromatogramProps> = ({\n  data = [],\n  width = 900,\n  height = 600,\n  positionInterval = 10,\n  colorA = \"#2D9CDB\",\n  colorT = \"#A1C63C\",\n  colorG = \"#FF5C64\",\n  colorC = \"#FFA62E\",\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n\n  const positions = useMemo(() => data.map((item) => item.position), [data]);\n  const sequence = useMemo(() => data.map((item) => determineBase(item)), [data]);\n  const peakA = useMemo(() => data.map((item) => item.peakA), [data]);\n  const peakT = useMemo(() => data.map((item) => item.peakT), [data]);\n  const peakG = useMemo(() => data.map((item) => item.peakG), [data]);\n  const peakC = useMemo(() => data.map((item) => item.peakC), [data]);\n\n  const aTrace = useMemo(\n    () => ({\n      x: positions,\n      y: peakA,\n      type: \"scatter\" as const,\n      mode: \"lines\" as const,\n      name: \"A\",\n      line: { color: colorA, width: 2, shape: \"spline\" as const },\n    }),\n    [positions, peakA, colorA],\n  );\n\n  const tTrace = useMemo(\n    () => ({\n      x: positions,\n      y: peakT,\n      type: \"scatter\" as const,\n      mode: \"lines\" as const,\n      name: \"T\",\n      line: { color: colorT, width: 2, shape: \"spline\" as const },\n    }),\n    [positions, peakT, colorT],\n  );\n\n  const gTrace = useMemo(\n    () => ({\n      x: positions,\n      y: peakG,\n      type: \"scatter\" as const,\n      mode: \"lines\" as const,\n      name: \"G\",\n      line: { color: colorG, width: 2, shape: \"spline\" as const },\n    }),\n    [positions, peakG, colorG],\n  );\n\n  const cTrace = useMemo(\n    () => ({\n      x: positions,\n      y: peakC,\n      type: \"scatter\" as const,\n      mode: \"lines\" as const,\n      name: \"C\",\n      line: { color: colorC, width: 2, shape: \"spline\" as const },\n    }),\n    [positions, peakC, colorC],\n  );\n\n  const maxValue = useMemo(\n    () => Math.max(...peakA, ...peakT, ...peakG, ...peakC),\n    [peakA, peakT, peakG, peakC],\n  );\n\n  useEffect(() => {\n    if (!plotRef.current || data.length === 0) return;\n\n    const plotData = [aTrace, tTrace, gTrace, cTrace];\n\n    const layout: Partial<Plotly.Layout> = {\n      width: width,\n      height: height - PLOT_HEIGHT_OFFSET,\n      margin: { l: 0, r: 0, b: 20, t: 10, pad: 0 },\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\n      font: {\n        family: \"Inter, sans-serif\",\n      },\n      showlegend: false,\n      xaxis: {\n        showgrid: false,\n        zeroline: false,\n        showticklabels: false,\n        showline: false,\n        range: [Math.min(...positions), Math.max(...positions)],\n        fixedrange: true,\n      },\n      yaxis: {\n        showgrid: false,\n        zeroline: false,\n        showticklabels: false,\n        showline: false,\n        range: [0, maxValue * Y_AXIS_PADDING_FACTOR],\n        fixedrange: true,\n      },\n    };\n\n    const config = {\n      responsive: true,\n      displayModeBar: false,\n      displaylogo: false,\n      fillFrame: true,\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  }, [data, width, height, aTrace, tTrace, gTrace, cTrace, maxValue, positions, theme]);\n\n  if (data.length === 0) {\n    return <div className=\"chart-container\">No data available</div>;\n  }\n\n  const renderSequence = () => {\n    const renderSequenceLetters = () => {\n      const minPosition = Math.min(...positions);\n      const maxPosition = Math.max(...positions);\n      const chartWidth = width;\n\n      return (\n        <div className=\"sequence-letters-container\">\n          {sequence.map((base, index) => {\n            const position = positions[index];\n            const color =\n              base === \"A\"\n                ? colorA\n                : base === \"T\"\n                ? colorT\n                : base === \"G\"\n                ? colorG\n                : base === \"C\"\n                ? colorC\n                : theme.textColor;\n\n            const percentage =\n              (position - minPosition) / (maxPosition - minPosition);\n            const leftPosition = percentage * chartWidth;\n\n            return (\n              <span\n                key={`base-${index}`}\n                className=\"sequence-letter\"\n                style={{\n                  left: `${leftPosition}px`,\n                  color,\n                }}\n              >\n                {base}\n              </span>\n            );\n          })}\n        </div>\n      );\n    };\n\n    const renderPositionNumbers = () => {\n      const minPosition = Math.min(...positions);\n      const maxPosition = Math.max(...positions);\n      const chartWidth = width;\n\n      const startPos =\n        Math.ceil(minPosition / positionInterval) * positionInterval;\n\n      const regularPositionLabels: Array<{ position: number; label: string }> =\n        [];\n\n      for (let pos = startPos; pos <= maxPosition; pos += positionInterval) {\n        regularPositionLabels.push({\n          position: pos,\n          label: pos.toString(),\n        });\n      }\n\n      return (\n        <div className=\"position-numbers-container\">\n          {regularPositionLabels.map((label) => {\n            const percentage =\n              (label.position - minPosition) / (maxPosition - minPosition);\n            const leftPosition = percentage * chartWidth;\n\n            return (\n              <span\n                key={`pos-${label.position}`}\n                className=\"position-number\"\n                style={{\n                  left: `${leftPosition}px`,\n                }}\n              >\n                {label.label}\n              </span>\n            );\n          })}\n        </div>\n      );\n    };\n\n    return (\n      <div className=\"sequence-header\">\n        {renderSequenceLetters()}\n        {renderPositionNumbers()}\n      </div>\n    );\n  };\n\n  return (\n    <div className=\"chromatogram-container\" style={{ width, height }}>\n      {renderSequence()}\n      <div className=\"chromatogram-chart\">\n        <div ref={plotRef} style={{ width: \"100%\", height: \"100%\" }} />\n      </div>\n    </div>\n  );\n};\n\nexport { Chromatogram };\nexport type { PeakData, ChromatogramProps };\n"],"names":["PLOT_HEIGHT_OFFSET","Y_AXIS_PADDING_FACTOR","determineBase","item","peakValues","values","val","highestBase","highestValue","base","value","Chromatogram","data","width","height","positionInterval","colorA","colorT","colorG","colorC","plotRef","useRef","theme","usePlotlyTheme","positions","useMemo","sequence","peakA","peakT","peakG","peakC","aTrace","tTrace","gTrace","cTrace","maxValue","useEffect","plotData","layout","config","Plotly","plotElement","jsx","jsxs","renderSequenceLetters","minPosition","maxPosition","chartWidth","index","position","color","leftPosition","renderPositionNumbers","startPos","regularPositionLabels","pos","label"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react/jsx-runtime"),Y=require("plotly.js-dist"),u=require("react"),j=require("../../../utils/colors.cjs"),D=require("./annotations.cjs"),K=require("./boundaryMarkers.cjs"),s=require("./constants.cjs"),f=require("./dataProcessing.cjs"),Q=require("./peakDetection.cjs"),V=require("../../../hooks/use-plotly-theme.cjs"),Z=({series:a,width:A=900,height:T=500,title:d,xAxisTitle:R="Retention Time (min)",yAxisTitle:k="Signal (mAU)",annotations:m=[],xRange:M,yRange:O,showLegend:P=!0,showGridX:v=!0,showGridY:G=!0,showMarkers:C=!1,markerSize:H=4,showCrosshairs:p=!1,baselineCorrection:q="none",baselineWindowSize:L=50,peakDetectionOptions:l,showPeakAreas:b=!1,boundaryMarkers:z="none",annotationOverlapThreshold:B=.4,showExportButton:x=!0})=>{const g=l!==void 0,N=u.useRef(null),e=V.usePlotlyTheme(),n=u.useMemo(()=>a.map(t=>{const r=f.validateSeriesData(t.x,t.y);return{...t,x:r.x,y:f.applyBaselineCorrection(r.y,q,L)}}),[a,q,L]),I=u.useMemo(()=>{if(m.length===0||n.length===0)return m;const{x:t,y:r}=n[0];return f.processUserAnnotations(m,t,r)},[m,n]),_=u.useMemo(()=>{const t=[];return g&&l&&n.forEach((r,c)=>{const y=Q.detectPeaks(r.x,r.y,l);y.length>0&&t.push({peaks:y,seriesIndex:c})}),t},[n,g,l]);return u.useEffect(()=>{const t=N.current;if(!t||a.length===0)return;const r=n.map((o,i)=>{const h=o.color||j.CHART_COLORS[i%j.CHART_COLORS.length],J=f.buildHoverExtraContent(o.name,o.metadata),E={x:o.x,y:o.y,type:"scatter",mode:C?"lines+markers":"lines",name:o.name,line:{color:h,width:1.5},hovertemplate:`%{x:.2f} ${R}<br>%{y:.2f} ${k}<extra>${J}</extra>`};return C&&(E.marker={size:H,color:h}),E});if(z!=="none"){const o=f.collectPeaksWithBoundaryData(_,I,n);if(o.length>0){const i=K.createBoundaryMarkerTraces(o);r.push(...i)}}const c=[];I.forEach(o=>{c.push({peak:o,seriesIndex:-1})}),b&&g&&_.forEach(({peaks:o,seriesIndex:i})=>{o.forEach(h=>{c.push({peak:h,seriesIndex:i})})});const y=D.groupOverlappingPeaks(c,B),U=[];for(const o of y)U.push(...D.createGroupAnnotations(o));const W={title:d?{text:d,font:{size:20,family:"Inter, sans-serif",color:e.textColor}}:void 0,width:A,height:T,margin:{l:s.CHROMATOGRAM_LAYOUT.MARGIN_LEFT,r:s.CHROMATOGRAM_LAYOUT.MARGIN_RIGHT,b:s.CHROMATOGRAM_LAYOUT.MARGIN_BOTTOM,t:d?s.CHROMATOGRAM_LAYOUT.MARGIN_TOP_WITH_TITLE:s.CHROMATOGRAM_LAYOUT.MARGIN_TOP_NO_TITLE,pad:s.CHROMATOGRAM_LAYOUT.MARGIN_PAD},paper_bgcolor:e.paperBg,plot_bgcolor:e.plotBg,font:{family:"Inter, sans-serif"},hovermode:p?"x":"x unified",dragmode:"zoom",xaxis:{title:{text:R,font:{size:14,color:e.textSecondary,family:"Inter, sans-serif"},standoff:15},showgrid:v,gridcolor:e.gridColor,linecolor:e.lineColor,linewidth:1,range:M,autorange:!M,zeroline:!1,tickfont:{size:12,color:e.textColor,family:"Inter, sans-serif"},showspikes:p,spikemode:"across",spikesnap:"cursor",spikecolor:e.spikeColor,spikethickness:1,spikedash:"dot"},yaxis:{title:{text:k,font:{size:14,color:e.textSecondary,family:"Inter, sans-serif"},standoff:10},showgrid:G,gridcolor:e.gridColor,linecolor:e.lineColor,linewidth:1,range:O,autorange:!O,zeroline:!1,tickfont:{size:12,color:e.textColor,family:"Inter, sans-serif"},showspikes:p,spikemode:"across",spikesnap:"cursor",spikecolor:e.spikeColor,spikethickness:1,spikedash:"dot"},legend:{x:.5,y:-.15,xanchor:"center",yanchor:"top",orientation:"h",font:{size:12,color:e.textColor,family:"Inter, sans-serif"}},showlegend:P&&a.length>1,annotations:U},F={responsive:!0,displayModeBar:!0,displaylogo:!1,modeBarButtonsToRemove:["lasso2d","select2d",...x?[]:["toImage"]],...x&&{toImageButtonOptions:{format:"png",filename:"chromatogram",width:A,height:T}}};return Y.newPlot(t,r,W,F),()=>{t&&Y.purge(t)}},[n,_,a.length,A,T,d,R,k,I,M,O,P,v,G,C,H,p,g,l,b,z,B,x,e]),S.jsx("div",{className:"chromatogram-chart-container",children:S.jsx("div",{ref:N,style:{width:"100%",height:"100%"}})})};exports.ChromatogramChart=Z;
+//# sourceMappingURL=ChromatogramChart.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChromatogramChart.cjs","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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"}