@tetrascience-npm/tetrascience-react-ui 0.7.0 → 1.0.0

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

@@ -1,178 +1,240 @@
-import { jsx as p, jsxs as G } from "react/jsx-runtime";
-import L from "plotly.js-dist";
-import { useRef as F, useMemo as s, useEffect as $ } from "react";
-import { useChartTooltip as D } from "../ChartTooltip/ChartTooltip.js";
-import { usePlotlyTheme as H } from "../../../hooks/use-plotly-theme.js";
-import { CHART_COLORS as b } from "../../../utils/colors.js";
-/* empty css                  */
-const I = 75, V = 1.05, z = (e) => {
-  const r = {
-    A: e.peakA,
-    T: e.peakT,
-    G: e.peakG,
-    C: e.peakC
-  }, m = Object.values(r);
-  if (m.every((a) => a === m[0]))
-    return "";
-  let h = "", u = 0;
-  return Object.entries(r).forEach(([a, f]) => {
-    f > u && (h = a, u = f);
-  }), h;
-}, ee = ({
-  data: e = [],
-  width: r = 900,
-  height: m = 600,
-  positionInterval: x = 10,
-  colorA: h = b[0],
-  // blue
-  colorT: u = b[2],
-  // teal/green
-  colorG: a = b[3],
-  // red
-  colorC: f = b[1]
-  // orange
+import { jsx as _, jsxs as se } from "react/jsx-runtime";
+import { useRef as h, useMemo as f, useEffect as ne } from "react";
+import { useChartTooltip as de } from "../ChartTooltip/ChartTooltip.js";
+import { loadPlotly as fe, getLoadedPlotly as ce } from "../plotly-loader.js";
+import { resolveSelectionAppearance as ie, groupOverlappingPeaks as pe, createGroupAnnotations as me } from "./annotations.js";
+import { validateSeriesData as he, applyBaselineCorrection as ye, processUserAnnotations as ge } from "./dataProcessing.js";
+import { detectPeaks as ve } from "./peakDetection.js";
+import { buildTraceData as ke, buildLayout as Ee, buildConfig as be, createClickHandler as Ce, createHoverHandler as Ne, createUnhoverHandler as Pe } from "./plotBuilder.js";
+import { EmptyState as Le } from "../../composed/EmptyState/EmptyState.js";
+import { usePlotlyTheme as $e } from "../../../hooks/use-plotly-theme.js";
+const Re = [], qe = ({
+  series: n,
+  width: y = 900,
+  height: g = 500,
+  title: H,
+  xAxisTitle: v = "Retention Time (min)",
+  yAxisTitle: k = "Signal (mAU)",
+  annotations: E = Re,
+  xRange: j,
+  yRange: B,
+  showLegend: D = !0,
+  showGridX: M = !0,
+  showGridY: U = !0,
+  showMarkers: W = !1,
+  markerSize: A = 4,
+  showCrosshairs: q = !1,
+  baselineCorrection: F = "none",
+  baselineWindowSize: I = 50,
+  peakDetectionOptions: i,
+  showPeakAreas: N = !1,
+  boundaryMarkers: J = "none",
+  annotationOverlapThreshold: P = 0.4,
+  showExportButton: K = !0,
+  selectedPeakIds: L,
+  onPeakClick: Q,
+  onPeakHover: T,
+  selectionAppearance: p,
+  annotationStyle: V = "arrow",
+  titleFontSize: Y = 20,
+  titleTopMargin: Z
 }) => {
-  const g = F(null), y = H(), { bindTooltip: M, tooltipElement: B } = D({
-    xLabel: "Position",
-    yLabel: "Intensity"
-  }), n = s(() => e.map((t) => t.position), [e]), R = s(() => e.map((t) => z(t)), [e]), T = s(() => e.map((t) => t.peakA), [e]), k = s(() => e.map((t) => t.peakT), [e]), P = s(() => e.map((t) => t.peakG), [e]), v = s(() => e.map((t) => t.peakC), [e]), q = s(
-    () => ({
-      x: n,
-      y: T,
-      type: "scatter",
-      mode: "lines",
-      hoverinfo: "none",
-      name: "A",
-      line: { color: h, width: 2, shape: "spline" }
-    }),
-    [n, T, h]
-  ), w = s(
-    () => ({
-      x: n,
-      y: k,
-      type: "scatter",
-      mode: "lines",
-      hoverinfo: "none",
-      name: "T",
-      line: { color: u, width: 2, shape: "spline" }
-    }),
-    [n, k, u]
-  ), A = s(
-    () => ({
-      x: n,
-      y: P,
-      type: "scatter",
-      mode: "lines",
-      hoverinfo: "none",
-      name: "G",
-      line: { color: a, width: 2, shape: "spline" }
-    }),
-    [n, P, a]
-  ), E = s(
-    () => ({
-      x: n,
-      y: v,
-      type: "scatter",
-      mode: "lines",
-      hoverinfo: "none",
-      name: "C",
-      line: { color: f, width: 2, shape: "spline" }
-    }),
-    [n, v, f]
-  ), _ = s(
-    () => Math.max(...T, ...k, ...P, ...v),
-    [T, k, P, v]
-  );
-  return $(() => {
-    if (!g.current || e.length === 0) return;
-    const t = [q, w, A, E], N = {
-      width: r,
-      height: m - I,
-      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(...n), Math.max(...n)],
-        fixedrange: !0
-      },
-      yaxis: {
-        showgrid: !1,
-        zeroline: !1,
-        showticklabels: !1,
-        showline: !1,
-        range: [0, _ * V],
-        fixedrange: !0
-      }
-    }, i = {
-      responsive: !0,
-      displayModeBar: !1,
-      displaylogo: !1,
-      fillFrame: !0
+  const m = i !== void 0, b = h(null), G = $e(), { bindTooltip: X, tooltipElement: le } = de({
+    xLabel: v,
+    yLabel: k
+  }), x = h(Q), $ = h(T);
+  x.current = Q, $.current = T;
+  const R = h(null), O = h([]), c = f(() => n.map((e) => {
+    const t = he(e.x, e.y);
+    return {
+      ...e,
+      x: t.x,
+      y: ye(t.y, F, I)
     };
-    L.newPlot(g.current, t, N, i), M(g.current);
-    const l = g.current;
-    return () => {
-      l && L.purge(l);
+  }), [n, F, I]), u = f(() => {
+    if (E.length === 0 || c.length === 0)
+      return E;
+    const { x: e, y: t } = c[0];
+    return ge(E, e, t);
+  }, [E, c]), s = f(() => {
+    const e = [];
+    return m && i && c.forEach((t, o) => {
+      const l = ve(t.x, t.y, i);
+      l.length > 0 && e.push({ peaks: l, seriesIndex: o });
+    }), e;
+  }, [c, m, i]), z = p?.selected?.borderColor, w = p?.selected?.backgroundColor, ee = p?.selected?.bold, te = p?.unselected?.opacity, oe = p?.hoverLineWidthMultiplier, C = f(
+    () => ie({
+      selected: {
+        borderColor: z,
+        backgroundColor: w,
+        bold: ee
+      },
+      unselected: { opacity: te },
+      hoverLineWidthMultiplier: oe
+    }),
+    [
+      z,
+      w,
+      ee,
+      te,
+      oe
+    ]
+  ), re = f(() => {
+    const e = [];
+    return u.forEach((t, o) => {
+      e.push({
+        peak: { ...t, id: t.id ?? `user-ann-${o}` },
+        seriesIndex: 0,
+        seriesName: n[0]?.name ?? "",
+        isAutoDetected: !1
+      });
+    }), s.forEach(({ peaks: t, seriesIndex: o }) => {
+      t.forEach((l, a) => {
+        e.push({
+          peak: { ...l, id: `peak-${o}-${a}` },
+          seriesIndex: o,
+          seriesName: n[o]?.name ?? `Series ${o + 1}`,
+          isAutoDetected: !0
+        });
+      });
+    }), e;
+  }, [u, s, n]), S = f(() => {
+    const e = (L?.length ?? 0) > 0, t = {
+      selectedPeakIds: L ?? [],
+      anySelected: e,
+      appearance: C,
+      annotationStyle: V
+    }, o = [];
+    u.forEach((r, d) => {
+      o.push({
+        peak: { ...r, id: r.id ?? `user-ann-${d}` },
+        seriesIndex: -1
+      });
+    }), N && m && s.forEach(({ peaks: r, seriesIndex: d }) => {
+      r.forEach((ae, ue) => {
+        o.push({
+          peak: { ...ae, id: `peak-${d}-${ue}` },
+          seriesIndex: d
+        });
+      });
+    });
+    const l = pe(o, P), a = [];
+    for (const r of l)
+      a.push(...me(r, t));
+    return a;
+  }, [
+    u,
+    s,
+    N,
+    m,
+    P,
+    L,
+    C,
+    V
+  ]);
+  return O.current = S, ne(() => {
+    const e = b.current;
+    if (!e || n.length === 0) return;
+    const t = ke({
+      processedSeries: c,
+      processedAnnotations: u,
+      allDetectedPeaks: s,
+      allPeaksForInteraction: re,
+      showMarkers: W,
+      markerSize: A,
+      xAxisTitle: v,
+      yAxisTitle: k,
+      boundaryMarkers: J
+    }), o = Ee({
+      title: H,
+      titleFontSize: Y,
+      titleTopMargin: Z,
+      width: y,
+      height: g,
+      xAxisTitle: v,
+      yAxisTitle: k,
+      xRange: j,
+      yRange: B,
+      showLegend: D,
+      seriesCount: n.length,
+      showGridX: M,
+      showGridY: U,
+      showCrosshairs: q,
+      theme: G,
+      peakAnnotations: O.current
+    }), l = be({ showExportButton: K, width: y, height: g });
+    let a = !1, r = null;
+    return fe().then((d) => {
+      a || !b.current || (d.newPlot(e, t, o, l), X(e), e.on(
+        "plotly_click",
+        Ce(x)
+      ), e.on(
+        "plotly_hover",
+        Ne(e, c.length, R, $, C.hoverLineWidthMultiplier)
+      ), e.on(
+        "plotly_unhover",
+        Pe(e, R, $)
+      ), r = e);
+    }), () => {
+      a = !0, R.current = null, r && ce().purge(r);
     };
-  }, [e, r, m, q, w, A, E, _, n, y, M]), e.length === 0 ? /* @__PURE__ */ p("div", { className: "chart-container", children: "No data available" }) : /* @__PURE__ */ G("div", { className: "chromatogram-container relative", style: { width: r, height: m }, children: [
-    (() => {
-      const t = () => {
-        const i = Math.min(...n), l = Math.max(...n), C = r;
-        return /* @__PURE__ */ p("div", { className: "sequence-letters-container", children: R.map((c, d) => {
-          const o = n[d], O = c === "A" ? h : c === "T" ? u : c === "G" ? a : c === "C" ? f : y.textColor, j = (o - i) / (l - i) * C;
-          return /* @__PURE__ */ p(
-            "span",
-            {
-              className: "sequence-letter",
-              style: {
-                left: `${j}px`,
-                color: O
-              },
-              children: c
-            },
-            `base-${d}`
-          );
-        }) });
-      }, N = () => {
-        const i = Math.min(...n), l = Math.max(...n), C = r, c = Math.ceil(i / x) * x, d = [];
-        for (let o = c; o <= l; o += x)
-          d.push({
-            position: o,
-            label: o.toString()
-          });
-        return /* @__PURE__ */ p("div", { className: "position-numbers-container", children: d.map((o) => {
-          const S = (o.position - i) / (l - i) * C;
-          return /* @__PURE__ */ p(
-            "span",
-            {
-              className: "position-number",
-              style: {
-                left: `${S}px`
-              },
-              children: o.label
-            },
-            `pos-${o.position}`
-          );
-        }) });
-      };
-      return /* @__PURE__ */ G("div", { className: "sequence-header", children: [
-        t(),
-        N()
-      ] });
-    })(),
-    /* @__PURE__ */ p("div", { className: "chromatogram-chart", children: /* @__PURE__ */ p("div", { ref: g, style: { width: "100%", height: "100%" } }) }),
-    B
+  }, [
+    c,
+    s,
+    re,
+    n.length,
+    y,
+    g,
+    H,
+    Y,
+    Z,
+    v,
+    k,
+    u,
+    j,
+    B,
+    D,
+    M,
+    U,
+    W,
+    A,
+    q,
+    m,
+    i,
+    N,
+    J,
+    P,
+    K,
+    G,
+    X,
+    // resolvedAppearance included so hover multiplier stays in sync with the
+    // event handler closure without it being in a ref itself.
+    C
+  ]), ne(() => {
+    const e = b.current;
+    e && e._fullLayout && ce().relayout(e, {
+      annotations: S
+    });
+  }, [S]), n.length === 0 ? /* @__PURE__ */ _(
+    "div",
+    {
+      className: "chromatogram-chart-container relative flex items-center justify-center",
+      style: { width: y, height: g },
+      children: /* @__PURE__ */ _(
+        Le,
+        {
+          variant: "no-data",
+          title: "No chromatogram data",
+          description: "There is no signal data to display yet."
+        }
+      )
+    }
+  ) : /* @__PURE__ */ se("div", { className: "chromatogram-chart-container relative", children: [
+    /* @__PURE__ */ _("div", { ref: b, style: { width: "100%", height: "100%" } }),
+    le
   ] });
 };
 export {
-  ee as Chromatogram
+  qe as Chromatogram
 };
 //# sourceMappingURL=Chromatogram.js.map

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

@@ -1 +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 { useChartTooltip } from \"../ChartTooltip\";\n\nimport { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport { CHART_COLORS } from \"@/utils/colors\";\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 = CHART_COLORS[0], // blue\n  colorT = CHART_COLORS[2], // teal/green\n  colorG = CHART_COLORS[3], // red\n  colorC = CHART_COLORS[1], // orange\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n  const { bindTooltip, tooltipElement } = useChartTooltip({\n    xLabel: \"Position\",\n    yLabel: \"Intensity\",\n  });\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      hoverinfo: \"none\" 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      hoverinfo: \"none\" 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      hoverinfo: \"none\" 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      hoverinfo: \"none\" 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    bindTooltip(plotRef.current);\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, bindTooltip]);\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 relative\" style={{ width, height }}>\n      {renderSequence()}\n      <div className=\"chromatogram-chart\">\n        <div ref={plotRef} style={{ width: \"100%\", height: \"100%\" }} />\n      </div>\n      {tooltipElement}\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","CHART_COLORS","colorT","colorG","colorC","plotRef","useRef","theme","usePlotlyTheme","bindTooltip","tooltipElement","useChartTooltip","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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"}
+{"version":3,"file":"Chromatogram.js","sources":["../../../../src/components/charts/Chromatogram/Chromatogram.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from \"react\";\n\nimport { useChartTooltip } from \"../ChartTooltip\";\nimport { getLoadedPlotly, loadPlotly } from \"../plotly-loader\";\n\nimport {\n  groupOverlappingPeaks,\n  createGroupAnnotations,\n  resolveSelectionAppearance,\n} from \"./annotations\";\nimport {\n  validateSeriesData,\n  applyBaselineCorrection,\n  processUserAnnotations,\n} from \"./dataProcessing\";\nimport { detectPeaks } from \"./peakDetection\";\nimport {\n  buildTraceData,\n  buildLayout,\n  buildConfig,\n  createClickHandler,\n  createHoverHandler,\n  createUnhoverHandler,\n} from \"./plotBuilder\";\n\nimport type {\n  ChromatogramSeries,\n  PeakAnnotation,\n  PeakSelectEvent,\n  PeakSelectionAppearance,\n  BaselineCorrectionMethod,\n  BoundaryMarkerStyle,\n  BoundaryMarkerType,\n  PeakDetectionOptions,\n  ChromatogramProps,\n  PeakWithMeta,\n} from \"./types\";\nimport type Plotly from \"plotly.js-dist\";\n\nimport { EmptyState } from \"@/components/composed/EmptyState\";\nimport { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\n\n// Re-export types for external use\nexport type {\n  ChromatogramSeries,\n  PeakAnnotation,\n  PeakSelectEvent,\n  PeakSelectionAppearance,\n  BaselineCorrectionMethod,\n  BoundaryMarkerStyle,\n  BoundaryMarkerType,\n  PeakDetectionOptions,\n  ChromatogramProps,\n};\n\n\n// Stable default so the no-annotations case keeps a constant identity; an\n// inline `[]` default would change every render, re-running the plot effect\n// (and tearing down the hover tooltip) on each re-render.\nconst EMPTY_ANNOTATIONS: PeakAnnotation[] = [];\n\nconst Chromatogram: React.FC<ChromatogramProps> = ({\n  series,\n  width = 900,\n  height = 500,\n  title,\n  xAxisTitle = \"Retention Time (min)\",\n  yAxisTitle = \"Signal (mAU)\",\n  annotations = EMPTY_ANNOTATIONS,\n  xRange,\n  yRange,\n  showLegend = true,\n  showGridX = true,\n  showGridY = true,\n  showMarkers = false,\n  markerSize = 4,\n  showCrosshairs = false,\n  baselineCorrection = \"none\",\n  baselineWindowSize = 50,\n  peakDetectionOptions,\n  showPeakAreas = false,\n  boundaryMarkers = \"none\",\n  annotationOverlapThreshold = 0.4,\n  showExportButton = true,\n  selectedPeakIds,\n  onPeakClick,\n  onPeakHover,\n  selectionAppearance,\n  annotationStyle = \"arrow\",\n  titleFontSize = 20,\n  titleTopMargin,\n}) => {\n  const enablePeakDetection = peakDetectionOptions !== undefined;\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n  const { bindTooltip, tooltipElement } = useChartTooltip({\n    xLabel: xAxisTitle,\n    yLabel: yAxisTitle,\n  });\n  // Stable refs for callbacks — avoids including them in effect dep arrays\n  // (consumers often pass arrow functions that change identity every render).\n  const onPeakClickRef = useRef(onPeakClick);\n  const onPeakHoverRef = useRef(onPeakHover);\n  onPeakClickRef.current = onPeakClick;\n  onPeakHoverRef.current = onPeakHover;\n\n  // Tracks the series index whose line is currently thickened on hover.\n  const thickenedSeriesRef = useRef<number | null>(null);\n\n  // Holds the latest peak Plotly annotations so that closures in effects always\n  // read the latest selection-styled annotations.\n  const peakAnnotationsRef = useRef<Partial<Plotly.Annotations>[]>([]);\n\n  // Memoize processed series with baseline correction\n  const processedSeries = useMemo(() => {\n    return series.map((s) => {\n      const validated = validateSeriesData(s.x, s.y);\n      return {\n        ...s,\n        x: validated.x,\n        y: applyBaselineCorrection(validated.y, baselineCorrection, baselineWindowSize),\n      };\n    });\n  }, [series, baselineCorrection, baselineWindowSize]);\n\n  // Process user annotations to convert startX/endX to indices and compute areas\n  const processedAnnotations = useMemo(() => {\n    if (annotations.length === 0 || processedSeries.length === 0) {\n      return annotations;\n    }\n    const { x, y } = processedSeries[0];\n    return processUserAnnotations(annotations, x, y);\n  }, [annotations, processedSeries]);\n\n  // Memoize peak detection results\n  const allDetectedPeaks = useMemo(() => {\n    const peaks: { peaks: PeakAnnotation[]; seriesIndex: number }[] = [];\n    if (enablePeakDetection && peakDetectionOptions) {\n      processedSeries.forEach((s, index) => {\n        const detected = detectPeaks(s.x, s.y, peakDetectionOptions);\n        if (detected.length > 0) {\n          peaks.push({ peaks: detected, seriesIndex: index });\n        }\n      });\n    }\n    return peaks;\n  }, [processedSeries, enablePeakDetection, peakDetectionOptions]);\n\n  // Normalize the selection appearance into primitive fields up front so the\n  // memo below depends on stable values rather than the (possibly unstable)\n  // selectionAppearance object reference. This keeps the dependency array\n  // exhaustive-deps clean without requiring callers to memoize the prop.\n  const selectedBorderColor = selectionAppearance?.selected?.borderColor;\n  const selectedBackgroundColor = selectionAppearance?.selected?.backgroundColor;\n  const selectedBold = selectionAppearance?.selected?.bold;\n  const unselectedOpacity = selectionAppearance?.unselected?.opacity;\n  const hoverLineWidthMultiplier = selectionAppearance?.hoverLineWidthMultiplier;\n\n  // Resolve selection appearance defaults once (stable as long as the\n  // individual fields above don't change).\n  const resolvedAppearance = useMemo(\n    () =>\n      resolveSelectionAppearance({\n        selected: {\n          borderColor: selectedBorderColor,\n          backgroundColor: selectedBackgroundColor,\n          bold: selectedBold,\n        },\n        unselected: { opacity: unselectedOpacity },\n        hoverLineWidthMultiplier,\n      }),\n    [\n      selectedBorderColor,\n      selectedBackgroundColor,\n      selectedBold,\n      unselectedOpacity,\n      hoverLineWidthMultiplier,\n    ]\n  );\n\n  // All peaks that can be interacted with (clicked / hovered / selected),\n  // each with a stable ID and the metadata needed for PeakSelectEvent.\n  const allPeaksForInteraction = useMemo(() => {\n    const result: Array<{\n      peak: PeakAnnotation & { id: string };\n      seriesIndex: number;\n      seriesName: string;\n      isAutoDetected: boolean;\n    }> = [];\n\n    processedAnnotations.forEach((ann, i) => {\n      result.push({\n        peak: { ...ann, id: ann.id ?? `user-ann-${i}` },\n        seriesIndex: 0,\n        seriesName: series[0]?.name ?? \"\",\n        isAutoDetected: false,\n      });\n    });\n\n    allDetectedPeaks.forEach(({ peaks, seriesIndex }) => {\n      peaks.forEach((peak, peakIndex) => {\n        result.push({\n          peak: { ...peak, id: `peak-${seriesIndex}-${peakIndex}` },\n          seriesIndex,\n          seriesName: series[seriesIndex]?.name ?? `Series ${seriesIndex + 1}`,\n          isAutoDetected: true,\n        });\n      });\n    });\n\n    return result;\n  }, [processedAnnotations, allDetectedPeaks, series]);\n\n  // Build Plotly annotation objects for all peaks, applying selection styling.\n  // This memo re-runs when selectedPeakIds or resolvedAppearance changes so the\n  // selection effect can call Plotly.relayout with updated annotations without\n  // triggering a full chart rebuild.\n  const peakAnnotations = useMemo(() => {\n    const anySelected = (selectedPeakIds?.length ?? 0) > 0;\n    const options = {\n      selectedPeakIds: selectedPeakIds ?? [],\n      anySelected,\n      appearance: resolvedAppearance,\n      annotationStyle,\n    };\n\n    const allPeaksWithMeta: PeakWithMeta[] = [];\n\n    processedAnnotations.forEach((ann, i) => {\n      allPeaksWithMeta.push({\n        peak: { ...ann, id: ann.id ?? `user-ann-${i}` },\n        seriesIndex: -1,\n      });\n    });\n\n    if (showPeakAreas && enablePeakDetection) {\n      allDetectedPeaks.forEach(({ peaks, seriesIndex }) => {\n        peaks.forEach((peak, peakIndex) => {\n          allPeaksWithMeta.push({\n            peak: { ...peak, id: `peak-${seriesIndex}-${peakIndex}` },\n            seriesIndex,\n          });\n        });\n      });\n    }\n\n    const groups = groupOverlappingPeaks(allPeaksWithMeta, annotationOverlapThreshold);\n    const result: Partial<Plotly.Annotations>[] = [];\n    for (const group of groups) {\n      result.push(...createGroupAnnotations(group, options));\n    }\n    return result;\n  }, [\n    processedAnnotations,\n    allDetectedPeaks,\n    showPeakAreas,\n    enablePeakDetection,\n    annotationOverlapThreshold,\n    selectedPeakIds,\n    resolvedAppearance,\n    annotationStyle,\n  ]);\n\n  // Keep the ref in sync every render so that closures in effects always read\n  // the latest selection-styled annotations.\n  peakAnnotationsRef.current = peakAnnotations;\n\n  // ── Main chart effect ──────────────────────────────────────────────────────\n  // Rebuilds the full chart when structural props change (data, size, axes, …).\n  // selectedPeakIds and selectionAppearance are intentionally excluded from\n  // deps — selection changes are handled by the lightweight selection effect\n  // below via Plotly.relayout, which preserves the user's current zoom/pan.\n  useEffect(() => {\n    const currentRef = plotRef.current;\n    if (!currentRef || series.length === 0) return;\n\n    // Build trace data (line traces + boundary markers + region overlays +\n    // the invisible hit-area trace that carries peak customdata for\n    // click/hover interaction).\n    const plotData = buildTraceData({\n      processedSeries,\n      processedAnnotations,\n      allDetectedPeaks,\n      allPeaksForInteraction,\n      showMarkers,\n      markerSize,\n      xAxisTitle,\n      yAxisTitle,\n      boundaryMarkers,\n    });\n\n    const layout = buildLayout({\n      title,\n      titleFontSize,\n      titleTopMargin,\n      width,\n      height,\n      xAxisTitle,\n      yAxisTitle,\n      xRange,\n      yRange,\n      showLegend,\n      seriesCount: series.length,\n      showGridX,\n      showGridY,\n      showCrosshairs,\n      theme,\n      peakAnnotations: peakAnnotationsRef.current,\n    });\n\n    const config = buildConfig({ showExportButton, width, height });\n\n    // Plotly is loaded lazily so it stays out of the consumer's main chunk\n    // (SW-2007); the draw is skipped if the effect re-runs or unmounts first.\n    let cancelled = false;\n    let plotElement: HTMLDivElement | null = null;\n    void loadPlotly().then((plotly) => {\n      if (cancelled || !plotRef.current) return;\n      plotly.newPlot(currentRef, plotData, layout, config);\n      bindTooltip(currentRef);\n\n      // ── Event: peak click ────────────────────────────────────────────────\n      (currentRef as unknown as Plotly.PlotlyHTMLElement).on(\n        \"plotly_click\",\n        createClickHandler(onPeakClickRef)\n      );\n\n      (currentRef as unknown as Plotly.PlotlyHTMLElement).on(\n        \"plotly_hover\",\n        createHoverHandler(currentRef, processedSeries.length, thickenedSeriesRef, onPeakHoverRef, resolvedAppearance.hoverLineWidthMultiplier)\n      );\n\n      (currentRef as unknown as Plotly.PlotlyHTMLElement).on(\n        \"plotly_unhover\",\n        createUnhoverHandler(currentRef, thickenedSeriesRef, onPeakHoverRef)\n      );\n\n      // Capture ref value for cleanup\n      plotElement = currentRef;\n    });\n\n    return () => {\n      cancelled = true;\n      thickenedSeriesRef.current = null;\n      if (plotElement) getLoadedPlotly().purge(plotElement);\n    };\n  }, [\n    processedSeries, allDetectedPeaks, allPeaksForInteraction, series.length,\n    width, height, title, titleFontSize, titleTopMargin, xAxisTitle, yAxisTitle,\n    processedAnnotations, xRange, yRange, showLegend, showGridX, showGridY,\n    showMarkers, markerSize, showCrosshairs, enablePeakDetection, peakDetectionOptions,\n    showPeakAreas, boundaryMarkers, annotationOverlapThreshold, showExportButton,\n    theme, bindTooltip,\n    // resolvedAppearance included so hover multiplier stays in sync with the\n    // event handler closure without it being in a ref itself.\n    resolvedAppearance,\n  ]);\n\n  // ── Selection update effect ────────────────────────────────────────────────\n  // Runs when selectedPeakIds / selectionAppearance change (peakAnnotations\n  // recomputes). Uses Plotly.relayout so the user's zoom/pan state is preserved.\n  useEffect(() => {\n    const el = plotRef.current;\n    if (!el) return;\n    // Guard: skip if the chart hasn't been initialized by the main effect yet.\n    // (A truthy _fullLayout also proves newPlot ran, so the lazily-loaded\n    // Plotly module is guaranteed to be available via getLoadedPlotly.)\n    if (!(el as { _fullLayout?: unknown })._fullLayout) return;\n\n    getLoadedPlotly().relayout(el, {\n      annotations: peakAnnotations,\n    } as unknown as Partial<Plotly.Layout>);\n  }, [peakAnnotations]);\n\n  // No data: render an explicit empty state instead of an uninitialized\n  // (blank) Plotly container, so the chart reads as \"no data yet\" rather\n  // than looking broken while data is still loading.\n  if (series.length === 0) {\n    return (\n      <div\n        className=\"chromatogram-chart-container relative flex items-center justify-center\"\n        style={{ width, height }}\n      >\n        <EmptyState\n          variant=\"no-data\"\n          title=\"No chromatogram data\"\n          description=\"There is no signal data to display yet.\"\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"chromatogram-chart-container relative\">\n      <div ref={plotRef} style={{ width: \"100%\", height: \"100%\" }} />\n      {tooltipElement}\n    </div>\n  );\n};\n\nexport { Chromatogram };\n"],"names":["EMPTY_ANNOTATIONS","Chromatogram","series","width","height","title","xAxisTitle","yAxisTitle","annotations","xRange","yRange","showLegend","showGridX","showGridY","showMarkers","markerSize","showCrosshairs","baselineCorrection","baselineWindowSize","peakDetectionOptions","showPeakAreas","boundaryMarkers","annotationOverlapThreshold","showExportButton","selectedPeakIds","onPeakClick","onPeakHover","selectionAppearance","annotationStyle","titleFontSize","titleTopMargin","enablePeakDetection","plotRef","useRef","theme","usePlotlyTheme","bindTooltip","tooltipElement","useChartTooltip","onPeakClickRef","onPeakHoverRef","thickenedSeriesRef","peakAnnotationsRef","processedSeries","useMemo","s","validated","validateSeriesData","applyBaselineCorrection","processedAnnotations","x","y","processUserAnnotations","allDetectedPeaks","peaks","index","detected","detectPeaks","selectedBorderColor","selectedBackgroundColor","selectedBold","unselectedOpacity","hoverLineWidthMultiplier","resolvedAppearance","resolveSelectionAppearance","allPeaksForInteraction","result","ann","i","seriesIndex","peak","peakIndex","peakAnnotations","anySelected","options","allPeaksWithMeta","groups","groupOverlappingPeaks","group","createGroupAnnotations","useEffect","currentRef","plotData","buildTraceData","layout","buildLayout","config","buildConfig","cancelled","plotElement","loadPlotly","plotly","createClickHandler","createHoverHandler","createUnhoverHandler","getLoadedPlotly","el","jsx","EmptyState","jsxs"],"mappings":";;;;;;;;;;AA2DA,MAAMA,KAAsC,CAAA,GAEtCC,KAA4C,CAAC;AAAA,EACjD,QAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,OAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,YAAAC,IAAa;AAAA,EACb,aAAAC,IAAcR;AAAA,EACd,QAAAS;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AAAA,EACZ,aAAAC,IAAc;AAAA,EACd,YAAAC,IAAa;AAAA,EACb,gBAAAC,IAAiB;AAAA,EACjB,oBAAAC,IAAqB;AAAA,EACrB,oBAAAC,IAAqB;AAAA,EACrB,sBAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,iBAAAC,IAAkB;AAAA,EAClB,4BAAAC,IAA6B;AAAA,EAC7B,kBAAAC,IAAmB;AAAA,EACnB,iBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,eAAAC,IAAgB;AAAA,EAChB,gBAAAC;AACF,MAAM;AACJ,QAAMC,IAAsBZ,MAAyB,QAC/Ca,IAAUC,EAAuB,IAAI,GACrCC,IAAQC,GAAA,GACR,EAAE,aAAAC,GAAa,gBAAAC,GAAA,IAAmBC,GAAgB;AAAA,IACtD,QAAQhC;AAAA,IACR,QAAQC;AAAA,EAAA,CACT,GAGKgC,IAAiBN,EAAOR,CAAW,GACnCe,IAAiBP,EAAOP,CAAW;AACzC,EAAAa,EAAe,UAAUd,GACzBe,EAAe,UAAUd;AAGzB,QAAMe,IAAqBR,EAAsB,IAAI,GAI/CS,IAAqBT,EAAsC,EAAE,GAG7DU,IAAkBC,EAAQ,MACvB1C,EAAO,IAAI,CAAC2C,MAAM;AACvB,UAAMC,IAAYC,GAAmBF,EAAE,GAAGA,EAAE,CAAC;AAC7C,WAAO;AAAA,MACL,GAAGA;AAAA,MACH,GAAGC,EAAU;AAAA,MACb,GAAGE,GAAwBF,EAAU,GAAG7B,GAAoBC,CAAkB;AAAA,IAAA;AAAA,EAElF,CAAC,GACA,CAAChB,GAAQe,GAAoBC,CAAkB,CAAC,GAG7C+B,IAAuBL,EAAQ,MAAM;AACzC,QAAIpC,EAAY,WAAW,KAAKmC,EAAgB,WAAW;AACzD,aAAOnC;AAET,UAAM,EAAE,GAAA0C,GAAG,GAAAC,MAAMR,EAAgB,CAAC;AAClC,WAAOS,GAAuB5C,GAAa0C,GAAGC,CAAC;AAAA,EACjD,GAAG,CAAC3C,GAAamC,CAAe,CAAC,GAG3BU,IAAmBT,EAAQ,MAAM;AACrC,UAAMU,IAA4D,CAAA;AAClE,WAAIvB,KAAuBZ,KACzBwB,EAAgB,QAAQ,CAACE,GAAGU,MAAU;AACpC,YAAMC,IAAWC,GAAYZ,EAAE,GAAGA,EAAE,GAAG1B,CAAoB;AAC3D,MAAIqC,EAAS,SAAS,KACpBF,EAAM,KAAK,EAAE,OAAOE,GAAU,aAAaD,GAAO;AAAA,IAEtD,CAAC,GAEID;AAAA,EACT,GAAG,CAACX,GAAiBZ,GAAqBZ,CAAoB,CAAC,GAMzDuC,IAAsB/B,GAAqB,UAAU,aACrDgC,IAA0BhC,GAAqB,UAAU,iBACzDiC,KAAejC,GAAqB,UAAU,MAC9CkC,KAAoBlC,GAAqB,YAAY,SACrDmC,KAA2BnC,GAAqB,0BAIhDoC,IAAqBnB;AAAA,IACzB,MACEoB,GAA2B;AAAA,MACzB,UAAU;AAAA,QACR,aAAaN;AAAA,QACb,iBAAiBC;AAAA,QACjB,MAAMC;AAAA,MAAA;AAAA,MAER,YAAY,EAAE,SAASC,GAAA;AAAA,MACvB,0BAAAC;AAAA,IAAA,CACD;AAAA,IACH;AAAA,MACEJ;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,IAAA;AAAA,EACF,GAKIG,KAAyBrB,EAAQ,MAAM;AAC3C,UAAMsB,IAKD,CAAA;AAEL,WAAAjB,EAAqB,QAAQ,CAACkB,GAAKC,MAAM;AACvC,MAAAF,EAAO,KAAK;AAAA,QACV,MAAM,EAAE,GAAGC,GAAK,IAAIA,EAAI,MAAM,YAAYC,CAAC,GAAA;AAAA,QAC3C,aAAa;AAAA,QACb,YAAYlE,EAAO,CAAC,GAAG,QAAQ;AAAA,QAC/B,gBAAgB;AAAA,MAAA,CACjB;AAAA,IACH,CAAC,GAEDmD,EAAiB,QAAQ,CAAC,EAAE,OAAAC,GAAO,aAAAe,QAAkB;AACnD,MAAAf,EAAM,QAAQ,CAACgB,GAAMC,MAAc;AACjC,QAAAL,EAAO,KAAK;AAAA,UACV,MAAM,EAAE,GAAGI,GAAM,IAAI,QAAQD,CAAW,IAAIE,CAAS,GAAA;AAAA,UACrD,aAAAF;AAAA,UACA,YAAYnE,EAAOmE,CAAW,GAAG,QAAQ,UAAUA,IAAc,CAAC;AAAA,UAClE,gBAAgB;AAAA,QAAA,CACjB;AAAA,MACH,CAAC;AAAA,IACH,CAAC,GAEMH;AAAA,EACT,GAAG,CAACjB,GAAsBI,GAAkBnD,CAAM,CAAC,GAM7CsE,IAAkB5B,EAAQ,MAAM;AACpC,UAAM6B,KAAejD,GAAiB,UAAU,KAAK,GAC/CkD,IAAU;AAAA,MACd,iBAAiBlD,KAAmB,CAAA;AAAA,MACpC,aAAAiD;AAAA,MACA,YAAYV;AAAA,MACZ,iBAAAnC;AAAA,IAAA,GAGI+C,IAAmC,CAAA;AAEzC,IAAA1B,EAAqB,QAAQ,CAACkB,GAAKC,MAAM;AACvC,MAAAO,EAAiB,KAAK;AAAA,QACpB,MAAM,EAAE,GAAGR,GAAK,IAAIA,EAAI,MAAM,YAAYC,CAAC,GAAA;AAAA,QAC3C,aAAa;AAAA,MAAA,CACd;AAAA,IACH,CAAC,GAEGhD,KAAiBW,KACnBsB,EAAiB,QAAQ,CAAC,EAAE,OAAAC,GAAO,aAAAe,QAAkB;AACnD,MAAAf,EAAM,QAAQ,CAACgB,IAAMC,OAAc;AACjC,QAAAI,EAAiB,KAAK;AAAA,UACpB,MAAM,EAAE,GAAGL,IAAM,IAAI,QAAQD,CAAW,IAAIE,EAAS,GAAA;AAAA,UACrD,aAAAF;AAAA,QAAA,CACD;AAAA,MACH,CAAC;AAAA,IACH,CAAC;AAGH,UAAMO,IAASC,GAAsBF,GAAkBrD,CAA0B,GAC3E4C,IAAwC,CAAA;AAC9C,eAAWY,KAASF;AAClB,MAAAV,EAAO,KAAK,GAAGa,GAAuBD,GAAOJ,CAAO,CAAC;AAEvD,WAAOR;AAAA,EACT,GAAG;AAAA,IACDjB;AAAA,IACAI;AAAA,IACAjC;AAAA,IACAW;AAAA,IACAT;AAAA,IACAE;AAAA,IACAuC;AAAA,IACAnC;AAAA,EAAA,CACD;AAoHD,SAhHAc,EAAmB,UAAU8B,GAO7BQ,GAAU,MAAM;AACd,UAAMC,IAAajD,EAAQ;AAC3B,QAAI,CAACiD,KAAc/E,EAAO,WAAW,EAAG;AAKxC,UAAMgF,IAAWC,GAAe;AAAA,MAC9B,iBAAAxC;AAAA,MACA,sBAAAM;AAAA,MACA,kBAAAI;AAAA,MACA,wBAAAY;AAAA,MACA,aAAAnD;AAAA,MACA,YAAAC;AAAA,MACA,YAAAT;AAAA,MACA,YAAAC;AAAA,MACA,iBAAAc;AAAA,IAAA,CACD,GAEK+D,IAASC,GAAY;AAAA,MACzB,OAAAhF;AAAA,MACA,eAAAwB;AAAA,MACA,gBAAAC;AAAA,MACA,OAAA3B;AAAA,MACA,QAAAC;AAAA,MACA,YAAAE;AAAA,MACA,YAAAC;AAAA,MACA,QAAAE;AAAA,MACA,QAAAC;AAAA,MACA,YAAAC;AAAA,MACA,aAAaT,EAAO;AAAA,MACpB,WAAAU;AAAA,MACA,WAAAC;AAAA,MACA,gBAAAG;AAAA,MACA,OAAAkB;AAAA,MACA,iBAAiBQ,EAAmB;AAAA,IAAA,CACrC,GAEK4C,IAASC,GAAY,EAAE,kBAAAhE,GAAkB,OAAApB,GAAO,QAAAC,GAAQ;AAI9D,QAAIoF,IAAY,IACZC,IAAqC;AACzC,WAAKC,GAAA,EAAa,KAAK,CAACC,MAAW;AACjC,MAAIH,KAAa,CAACxD,EAAQ,YAC1B2D,EAAO,QAAQV,GAAYC,GAAUE,GAAQE,CAAM,GACnDlD,EAAY6C,CAAU,GAGrBA,EAAmD;AAAA,QAClD;AAAA,QACAW,GAAmBrD,CAAc;AAAA,MAAA,GAGlC0C,EAAmD;AAAA,QAClD;AAAA,QACAY,GAAmBZ,GAAYtC,EAAgB,QAAQF,GAAoBD,GAAgBuB,EAAmB,wBAAwB;AAAA,MAAA,GAGvIkB,EAAmD;AAAA,QAClD;AAAA,QACAa,GAAqBb,GAAYxC,GAAoBD,CAAc;AAAA,MAAA,GAIrEiD,IAAcR;AAAA,IAChB,CAAC,GAEM,MAAM;AACX,MAAAO,IAAY,IACZ/C,EAAmB,UAAU,MACzBgD,KAAaM,KAAkB,MAAMN,CAAW;AAAA,IACtD;AAAA,EACF,GAAG;AAAA,IACD9C;AAAA,IAAiBU;AAAA,IAAkBY;AAAA,IAAwB/D,EAAO;AAAA,IAClEC;AAAA,IAAOC;AAAA,IAAQC;AAAA,IAAOwB;AAAA,IAAeC;AAAA,IAAgBxB;AAAA,IAAYC;AAAA,IACjE0C;AAAA,IAAsBxC;AAAA,IAAQC;AAAA,IAAQC;AAAA,IAAYC;AAAA,IAAWC;AAAA,IAC7DC;AAAA,IAAaC;AAAA,IAAYC;AAAA,IAAgBe;AAAA,IAAqBZ;AAAA,IAC9DC;AAAA,IAAeC;AAAA,IAAiBC;AAAA,IAA4BC;AAAA,IAC5DW;AAAA,IAAOE;AAAA;AAAA;AAAA,IAGP2B;AAAA,EAAA,CACD,GAKDiB,GAAU,MAAM;AACd,UAAMgB,IAAKhE,EAAQ;AACnB,IAAKgE,KAICA,EAAiC,eAEvCD,GAAA,EAAkB,SAASC,GAAI;AAAA,MAC7B,aAAaxB;AAAA,IAAA,CACuB;AAAA,EACxC,GAAG,CAACA,CAAe,CAAC,GAKhBtE,EAAO,WAAW,IAElB,gBAAA+F;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,OAAA9F,GAAO,QAAAC,EAAA;AAAA,MAEhB,UAAA,gBAAA6F;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,OAAM;AAAA,UACN,aAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IACd;AAAA,EAAA,IAMJ,gBAAAC,GAAC,OAAA,EAAI,WAAU,yCACb,UAAA;AAAA,IAAA,gBAAAF,EAAC,OAAA,EAAI,KAAKjE,GAAS,OAAO,EAAE,OAAO,QAAQ,QAAQ,OAAA,EAAO,CAAG;AAAA,IAC5DK;AAAA,EAAA,GACH;AAEJ;"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("../../../utils/colors.cjs"),d=require("./constants.cjs"),R=require("../../../hooks/use-plotly-theme.cjs"),T={selected:{borderColor:"#3b82f6",backgroundColor:"#dbeafe",bold:!0},unselected:{opacity:.4},hoverLineWidthMultiplier:5/3};function S(o){if(!o)return T;const t=T;return{selected:{borderColor:o.selected?.borderColor??t.selected.borderColor,backgroundColor:o.selected?.backgroundColor??t.selected.backgroundColor,bold:o.selected?.bold??t.selected.bold},unselected:{opacity:o.unselected?.opacity??t.unselected.opacity},hoverLineWidthMultiplier:o.hoverLineWidthMultiplier??t.hoverLineWidthMultiplier}}const 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 M(o,t){const c=[...o].sort((n,l)=>n.peak.x-l.peak.x),r=[];let e=[];for(const n of c){if(e.length===0){e.push(n);continue}const l=e[e.length-1];Math.abs(n.peak.x-l.peak.x)<t?e.push(n):(r.push(e),e=[n])}return e.length>0&&r.push(e),r}function g(o,t,c,r,e,n){const l=o?e.selected.backgroundColor:d.CHROMATOGRAM_ANNOTATION.BACKGROUND_COLOR;let s;o?s=e.selected.borderColor:s=c&&!n?void 0:r;const i=o?2:c&&!n?0:1,a=t?e.unselected.opacity:void 0;return{bgcolor:l,bordercolor:s,borderwidth:i,...a===void 0?{}:{opacity:a}}}function p(o,t,c,r,e,n,l){const s=n?l.unselected.opacity:void 0;return{x:o.x,y:o.y,text:t,showarrow:!1,yshift:d.CHROMATOGRAM_ANNOTATION.INLINE_YSHIFT,yanchor:"bottom",xanchor:"center",font:{size:c,color:e?l.selected.borderColor:r,family:R.CHART_FONT_FAMILY},...s===void 0?{}:{opacity:s}}}function N(o,t,c,r={}){const{selectedPeakIds:e=[],anySelected:n=!1,appearance:l=T,annotationStyle:s="arrow"}=r,i=t===-1,a=i?d.CHROMATOGRAM_ANNOTATION.USER_ANNOTATION_COLOR:h.CHART_COLORS[t%h.CHART_COLORS.length],O=o.color??a,y=i&&!o.color?d.CHROMATOGRAM_ANNOTATION.USER_ANNOTATION_TEXT_COLOR:O,f=o.text??(o._computed?.area===void 0?"":`Area: ${o._computed.area.toFixed(2)}`),u=o.id!==void 0&&e.includes(o.id),_=!u&&n,b=u&&l.selected.bold?`<b>${f}</b>`:f,C=i?d.CHROMATOGRAM_ANNOTATION.USER_ANNOTATION_FONT_SIZE:d.CHROMATOGRAM_ANNOTATION.AUTO_ANNOTATION_FONT_SIZE;if(s==="inline")return p(o,b,C,y,u,_,l);const x=i&&o.ax!==void 0?o.ax:c.ax,v=i&&o.ay!==void 0?o.ay:c.ay,I=g(u,_,i,O,l,o.color!==void 0);return{x:o.x,y:o.y,text:b,showarrow:!0,arrowhead:2,arrowsize:1,arrowwidth:1,arrowcolor:O,ax:x,ay:v,font:{size:C,color:y,family:R.CHART_FONT_FAMILY},borderpad:2,...I}}function L(o,t={}){if(o.length===1){const{peak:r,seriesIndex:e}=o[0];return[N(r,e,A.default,t)]}return[...o].sort((r,e)=>r.peak.y-e.peak.y).map(({peak:r,seriesIndex:e},n)=>{const l=A.overlap[n%A.overlap.length];return N(r,e,l,t)})}exports.ANNOTATION_SLOTS=A;exports.createGroupAnnotations=L;exports.createPeakAnnotation=N;exports.groupOverlappingPeaks=M;exports.resolveSelectionAppearance=S;
+//# sourceMappingURL=annotations.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"annotations.cjs","sources":["../../../../src/components/charts/Chromatogram/annotations.ts"],"sourcesContent":["/**\n * Annotation utilities for Chromatogram\n */\n\nimport { CHART_COLORS } from \"../../../utils/colors\";\n\nimport { CHROMATOGRAM_ANNOTATION } from \"./constants\";\n\nimport type { PeakAnnotation, PeakSelectionAppearance, PeakWithMeta } from \"./types\";\nimport type Plotly from \"plotly.js-dist\";\n\nimport { CHART_FONT_FAMILY } from \"@/hooks/use-plotly-theme\";\n\n// ── Selection appearance helpers ─────────────────────────────────────────────\n\nexport interface ResolvedSelectionAppearance {\n  selected: {\n    borderColor: string;\n    backgroundColor: string;\n    bold: boolean;\n  };\n  unselected: {\n    opacity: number;\n  };\n  hoverLineWidthMultiplier: number;\n}\n\nconst DEFAULT_RESOLVED_APPEARANCE: ResolvedSelectionAppearance = {\n  selected: {\n    borderColor: \"#3b82f6\",\n    backgroundColor: \"#dbeafe\",\n    bold: true,\n  },\n  unselected: { opacity: 0.4 },\n  hoverLineWidthMultiplier: 5 / 3,\n};\n\nexport function resolveSelectionAppearance(\n  appearance?: PeakSelectionAppearance\n): ResolvedSelectionAppearance {\n  if (!appearance) return DEFAULT_RESOLVED_APPEARANCE;\n  const d = DEFAULT_RESOLVED_APPEARANCE;\n  return {\n    selected: {\n      borderColor: appearance.selected?.borderColor ?? d.selected.borderColor,\n      backgroundColor: appearance.selected?.backgroundColor ?? d.selected.backgroundColor,\n      bold: appearance.selected?.bold ?? d.selected.bold,\n    },\n    unselected: {\n      opacity: appearance.unselected?.opacity ?? d.unselected.opacity,\n    },\n    hoverLineWidthMultiplier:\n      appearance.hoverLineWidthMultiplier ?? d.hoverLineWidthMultiplier,\n  };\n}\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\ninterface PeakAnnotationOptions {\n  selectedPeakIds?: string[];\n  anySelected?: boolean;\n  appearance?: ResolvedSelectionAppearance;\n  annotationStyle?: \"arrow\" | \"inline\";\n}\n\ninterface AnnotationBorderStyle {\n  bgcolor: string;\n  bordercolor: string | undefined;\n  borderwidth: number;\n  opacity?: number;\n}\n\n/** Derives border/background/opacity from selection state — extracted to keep\n *  createPeakAnnotation within the allowed cognitive complexity budget. */\nfunction resolveAnnotationBorderStyle(\n  isSelected: boolean,\n  isDimmed: boolean,\n  isUserDefined: boolean,\n  seriesColor: string,\n  appearance: ResolvedSelectionAppearance,\n  hasColorOverride: boolean\n): AnnotationBorderStyle {\n  const bgcolor = isSelected\n    ? appearance.selected.backgroundColor\n    : CHROMATOGRAM_ANNOTATION.BACKGROUND_COLOR;\n  let bordercolor: string | undefined;\n  if (isSelected) {\n    bordercolor = appearance.selected.borderColor;\n  } else {\n    bordercolor = isUserDefined && !hasColorOverride ? undefined : seriesColor;\n  }\n  const borderwidth = isSelected ? 2 : isUserDefined && !hasColorOverride ? 0 : 1;\n  const opacity = isDimmed ? appearance.unselected.opacity : undefined;\n  return { bgcolor, bordercolor, borderwidth, ...(opacity === undefined ? {} : { opacity }) };\n}\n\n/** Builds an inline-style (no-arrow) annotation that floats above the trace point. */\nfunction createInlineAnnotation(\n  peak: PeakAnnotation,\n  text: string,\n  fontSize: number,\n  textColor: string,\n  isSelected: boolean,\n  isDimmed: boolean,\n  appearance: ResolvedSelectionAppearance\n): Partial<Plotly.Annotations> {\n  const opacity = isDimmed ? appearance.unselected.opacity : undefined;\n  return {\n    x: peak.x,\n    y: peak.y,\n    text,\n    showarrow: false,\n    yshift: CHROMATOGRAM_ANNOTATION.INLINE_YSHIFT,\n    yanchor: \"bottom\" as const,\n    xanchor: \"center\" as const,\n    font: {\n      size: fontSize,\n      color: isSelected ? appearance.selected.borderColor : textColor,\n      family: CHART_FONT_FAMILY,\n    },\n    ...(opacity === undefined ? {} : { opacity }),\n  };\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  options: PeakAnnotationOptions = {}\n): Partial<Plotly.Annotations> {\n  const {\n    selectedPeakIds = [],\n    anySelected = false,\n    appearance = DEFAULT_RESOLVED_APPEARANCE,\n    annotationStyle = \"arrow\",\n  } = options;\n\n  const isUserDefined = seriesIndex === -1;\n  const defaultColor = isUserDefined\n    ? CHROMATOGRAM_ANNOTATION.USER_ANNOTATION_COLOR\n    : CHART_COLORS[seriesIndex % CHART_COLORS.length];\n  const color = peak.color ?? defaultColor;\n  const textColor = isUserDefined && !peak.color\n    ? CHROMATOGRAM_ANNOTATION.USER_ANNOTATION_TEXT_COLOR\n    : color;\n\n  const rawText = peak.text ?? (peak._computed?.area === undefined ? \"\" : `Area: ${peak._computed.area.toFixed(2)}`);\n\n  const isSelected = peak.id !== undefined && selectedPeakIds.includes(peak.id);\n  const isDimmed = !isSelected && anySelected;\n\n  const text = isSelected && appearance.selected.bold ? `<b>${rawText}</b>` : rawText;\n\n  const fontSize = isUserDefined\n    ? CHROMATOGRAM_ANNOTATION.USER_ANNOTATION_FONT_SIZE\n    : CHROMATOGRAM_ANNOTATION.AUTO_ANNOTATION_FONT_SIZE;\n\n  if (annotationStyle === \"inline\") {\n    return createInlineAnnotation(peak, text, fontSize, textColor, isSelected, isDimmed, appearance);\n  }\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  const borderStyle = resolveAnnotationBorderStyle(\n    isSelected, isDimmed, isUserDefined, color, appearance, peak.color !== undefined\n  );\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: fontSize,\n      color: textColor,\n      family: CHART_FONT_FAMILY,\n    },\n    borderpad: 2,\n    ...borderStyle,\n  };\n}\n\n/**\n * Create annotations for a group of peaks, handling overlap positioning\n */\nexport function createGroupAnnotations(\n  group: PeakWithMeta[],\n  options: PeakAnnotationOptions = {}\n): Partial<Plotly.Annotations>[] {\n  if (group.length === 1) {\n    const { peak, seriesIndex } = group[0];\n    return [createPeakAnnotation(peak, seriesIndex, ANNOTATION_SLOTS.default, options)];\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, options);\n  });\n}\n\n"],"names":["DEFAULT_RESOLVED_APPEARANCE","resolveSelectionAppearance","appearance","d","ANNOTATION_SLOTS","groupOverlappingPeaks","peaksWithMeta","overlapThreshold","sorted","a","b","groups","currentGroup","current","lastInGroup","resolveAnnotationBorderStyle","isSelected","isDimmed","isUserDefined","seriesColor","hasColorOverride","bgcolor","CHROMATOGRAM_ANNOTATION","bordercolor","borderwidth","opacity","createInlineAnnotation","peak","text","fontSize","textColor","CHART_FONT_FAMILY","createPeakAnnotation","seriesIndex","slot","options","selectedPeakIds","anySelected","annotationStyle","defaultColor","CHART_COLORS","color","rawText","ax","ay","borderStyle","createGroupAnnotations","group","slotIndex"],"mappings":"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"}

package/dist/components/charts/Chromatogram/annotations.d.ts

@@ -0,0 +1,50 @@
+import { PeakAnnotation, PeakSelectionAppearance, PeakWithMeta } from './types';
+import { default as Plotly } from 'plotly.js-dist';
+export interface ResolvedSelectionAppearance {
+    selected: {
+        borderColor: string;
+        backgroundColor: string;
+        bold: boolean;
+    };
+    unselected: {
+        opacity: number;
+    };
+    hoverLineWidthMultiplier: number;
+}
+export declare function resolveSelectionAppearance(appearance?: PeakSelectionAppearance): ResolvedSelectionAppearance;
+/**
+ * Annotation slot positions for peak labels
+ */
+export declare const ANNOTATION_SLOTS: {
+    default: {
+        ax: number;
+        ay: number;
+    };
+    overlap: {
+        ax: number;
+        ay: number;
+    }[];
+};
+/**
+ * Group overlapping peaks by retention time (x) proximity
+ */
+export declare function groupOverlappingPeaks(peaksWithMeta: PeakWithMeta[], overlapThreshold: number): PeakWithMeta[][];
+interface PeakAnnotationOptions {
+    selectedPeakIds?: string[];
+    anySelected?: boolean;
+    appearance?: ResolvedSelectionAppearance;
+    annotationStyle?: "arrow" | "inline";
+}
+/**
+ * Create a Plotly annotation for a peak.
+ * seriesIndex of -1 indicates a user-defined annotation (uses grey/black styling).
+ */
+export declare function createPeakAnnotation(peak: PeakAnnotation, seriesIndex: number, slot: {
+    ax: number;
+    ay: number;
+}, options?: PeakAnnotationOptions): Partial<Plotly.Annotations>;
+/**
+ * Create annotations for a group of peaks, handling overlap positioning
+ */
+export declare function createGroupAnnotations(group: PeakWithMeta[], options?: PeakAnnotationOptions): Partial<Plotly.Annotations>[];
+export {};