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

package/dist/components/charts/ChartTooltip/ChartTooltip.js

@@ -1,9 +1,9 @@
 import { jsx as h, jsxs as O } from "react/jsx-runtime";
-import X from "plotly.js-dist";
-import { useRef as d, useState as N, useCallback as R, useLayoutEffect as H } from "react";
-import { createPortal as W } from "react-dom";
+import { useRef as p, useState as N, useCallback as R, useLayoutEffect as X } from "react";
+import { createPortal as H } from "react-dom";
+import { getLoadedPlotly as W } from "../plotly-loader.js";
 import { chartTooltipLines as z } from "./lines.js";
-import { cn as L } from "../../../lib/utils.js";
+import { cn as I } from "../../../lib/utils.js";
 const G = 20, Y = 150, j = 200, y = 8, k = 10, C = {
   top: "bottom",
   bottom: "top",
@@ -36,13 +36,13 @@ const G = 20, Y = 150, j = 200, y = 8, k = 10, C = {
   return !i[t] && i[C[t]] ? C[t] : t;
 };
 function $({ anchor: t, bubbleRef: o }) {
-  const n = d(null), r = t?.side ?? "top", [e, s] = N(r), i = R(
+  const n = p(null), r = t?.side ?? "top", [e, s] = N(r), i = R(
     (l) => {
       n.current = l, typeof o == "function" ? o(l) : o && (o.current = l);
     },
     [o]
   );
-  if (H(() => {
+  if (X(() => {
     const l = n.current;
     if (!t || !l) return;
     const c = V(
@@ -53,21 +53,21 @@ function $({ anchor: t, bubbleRef: o }) {
     );
     s((m) => m === c ? m : c);
   }, [t, r]), !t) return null;
-  const p = B[e];
-  return W(
+  const d = B[e];
+  return H(
     /* @__PURE__ */ h(
       "div",
       {
         "data-slot": "chart-tooltip-anchor",
         className: "pointer-events-none fixed z-50",
         style: { left: t.left, top: t.top },
-        children: /* @__PURE__ */ h("div", { ref: i, className: L("w-max", p.wrapper), children: /* @__PURE__ */ O(
+        children: /* @__PURE__ */ h("div", { ref: i, className: I("w-max", d.wrapper), children: /* @__PURE__ */ O(
           "div",
           {
             role: "tooltip",
             "data-slot": "tooltip-content",
             "data-side": e,
-            className: L(
+            className: I(
               "relative w-fit max-w-xs rounded-md bg-foreground px-3 py-1.5 text-xs text-background",
               t.closing ? "animate-out fade-out zoom-out-95 fill-mode-forwards" : "animate-in fade-in-0 zoom-in-95"
             ),
@@ -77,9 +77,9 @@ function $({ anchor: t, bubbleRef: o }) {
                 "span",
                 {
                   "aria-hidden": !0,
-                  className: L(
+                  className: I(
                     "absolute size-2.5 rotate-45 rounded-[2px] bg-foreground",
-                    p.arrow
+                    d.arrow
                   )
                 }
               )
@@ -102,13 +102,13 @@ const D = (t, o, n, r) => {
   return { left: s, top: i };
 };
 function Z(t = {}) {
-  const [o, n] = N(null), r = d(void 0), e = d(t);
+  const [o, n] = N(null), r = p(void 0), e = p(t);
   e.current = t;
-  const s = d(null), i = d(null), p = d(null);
+  const s = p(null), i = p(null), d = p(null);
   return {
     bindTooltip: R((c) => {
       if (!c) return;
-      p.current?.(), p.current = null, n(null), i.current = null, X.relayout(c, {
+      d.current?.(), d.current = null, n(null), i.current = null, W().relayout(c, {
         hoverdistance: e.current.hoverDistance ?? G
       });
       const m = c, P = (a, u, w) => {
@@ -130,21 +130,21 @@ function Z(t = {}) {
           return;
         }
         const b = u[0], f = b?.bbox;
-        let M = 0, _ = 0;
+        let L = 0, _ = 0;
         if (f) {
-          const I = c.getBoundingClientRect();
-          M = I.left + (f.x0 + f.x1) / 2;
+          const M = c.getBoundingClientRect();
+          L = M.left + (f.x0 + f.x1) / 2;
           const v = b?.yaxis;
-          f.y0 === f.y1 && typeof b?.y == "number" && typeof v?.l2p == "function" && typeof v._offset == "number" ? _ = I.top + v._offset + v.l2p(b.y) : _ = I.top + Math.min(f.y0, f.y1);
-        } else x && (M = x.clientX, _ = x.clientY);
-        n({ left: M, top: _, lines: T, side: e.current.side });
+          f.y0 === f.y1 && typeof b?.y == "number" && typeof v?.l2p == "function" && typeof v._offset == "number" ? _ = M.top + v._offset + v.l2p(b.y) : _ = M.top + Math.min(f.y0, f.y1);
+        } else x && (L = x.clientX, _ = x.clientY);
+        n({ left: L, top: _, lines: T, side: e.current.side });
       });
       const A = (a) => {
         if (!e.current.followCursor) return;
         const u = i.current;
         u && P(u, a.clientX, a.clientY);
       };
-      c.addEventListener("mousemove", A), p.current = () => c.removeEventListener("mousemove", A), m.on("plotly_unhover", () => {
+      c.addEventListener("mousemove", A), d.current = () => c.removeEventListener("mousemove", A), m.on("plotly_unhover", () => {
         clearTimeout(r.current), i.current = null, r.current = setTimeout(() => {
           n(
             (a) => a && { ...a, closing: !0 }

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

@@ -1 +1 @@
-{"version":3,"file":"ChartTooltip.js","sources":["../../../../src/components/charts/ChartTooltip/ChartTooltip.tsx"],"sourcesContent":["import Plotly from \"plotly.js-dist\";\nimport { useCallback, useLayoutEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { chartTooltipLines } from \"./lines\";\n\nimport type { ChartTooltipHoverPoint } from \"./lines\";\nimport type { Ref } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport { chartTooltipLines } from \"./lines\";\nexport type { ChartTooltipHoverPoint } from \"./lines\";\n\n/**\n * How far (px) from a point Plotly still reports a hover. Matches Plotly's\n * default — a larger radius makes tooltips snap to neighbors in dense plots\n */\nconst HOVER_DISTANCE_PX = 20;\n/** Grace period before hiding, so the tooltip survives gaps between points */\nconst HIDE_GRACE_MS = 150;\n/** How long the exit animation plays before the tooltip unmounts */\nconst EXIT_ANIMATION_MS = 200;\n\n/** Which edge of the point the tooltip is placed against (matches Radix). */\nexport type ChartTooltipSide = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface ChartTooltipAnchor {\n  left: number;\n  top: number;\n  lines: string[];\n  /** Preferred placement side; auto-flips to the opposite when it won't fit */\n  side?: ChartTooltipSide;\n  /** Plays the exit animation before the tooltip unmounts */\n  closing?: boolean;\n}\n\n/** Keep an anchor point this far from the viewport edges when clamping */\nconst VIEWPORT_PADDING_PX = 8;\n/** Gap (px) between the anchor point and the bubble on every side */\nconst TOOLTIP_GAP_PX = 10;\n\n/** The opposite side to flip to when the preferred one has no room */\nconst OPPOSITE_SIDE: Record<ChartTooltipSide, ChartTooltipSide> = {\n  top: \"bottom\",\n  bottom: \"top\",\n  left: \"right\",\n  right: \"left\",\n};\n\n/**\n * Per-side transforms. The wrapper carries positioning transforms (kept off\n * the bubble so they don't clobber the entry/exit animation), and the arrow\n * sits on the edge facing the point.\n */\nconst SIDE_CLASSES: Record<ChartTooltipSide, { wrapper: string; arrow: string }> = {\n  top: {\n    wrapper: \"-translate-x-1/2 -translate-y-[calc(100%+10px)]\",\n    arrow: \"-bottom-1 left-1/2 -translate-x-1/2\",\n  },\n  bottom: {\n    wrapper: \"-translate-x-1/2 translate-y-[10px]\",\n    arrow: \"-top-1 left-1/2 -translate-x-1/2\",\n  },\n  left: {\n    wrapper: \"-translate-y-1/2 -translate-x-[calc(100%+10px)]\",\n    arrow: \"-right-1 top-1/2 -translate-y-1/2\",\n  },\n  right: {\n    wrapper: \"-translate-y-1/2 translate-x-[10px]\",\n    arrow: \"-left-1 top-1/2 -translate-y-1/2\",\n  },\n};\n\ninterface ChartTooltipEmitter {\n  on: (event: string, handler: (data: ChartTooltipHoverEvent) => void) => void;\n}\n\ninterface ChartTooltipHoverEvent {\n  points?: ChartTooltipHoverPoint[];\n  event?: MouseEvent;\n}\n\nexport interface ChartTooltipProps {\n  /** Anchor position (viewport coordinates) and content lines */\n  anchor: ChartTooltipAnchor | null;\n  /** Ref to the bubble node, used by cursor-following charts to clamp it on-screen */\n  bubbleRef?: Ref<HTMLDivElement>;\n}\n\n/**\n * Resolve the side the bubble actually renders on: keep the preferred side\n * when it fits in the viewport, otherwise flip to the opposite side.\n */\nconst resolveSide = (\n  preferred: ChartTooltipSide,\n  anchor: { left: number; top: number },\n  width: number,\n  height: number,\n): ChartTooltipSide => {\n  const pad = VIEWPORT_PADDING_PX;\n  const reach = TOOLTIP_GAP_PX;\n  const fits: Record<ChartTooltipSide, boolean> = {\n    top: anchor.top - reach - height >= pad,\n    bottom: anchor.top + reach + height <= window.innerHeight - pad,\n    left: anchor.left - reach - width >= pad,\n    right: anchor.left + reach + width <= window.innerWidth - pad,\n  };\n  // Flip only when the preferred side overflows and the opposite has room\n  if (!fits[preferred] && fits[OPPOSITE_SIDE[preferred]]) {\n    return OPPOSITE_SIDE[preferred];\n  }\n  return preferred;\n};\n\n/**\n * The design-system tooltip anchored at a chart position; drive it with\n * `useChartTooltip`.\n *\n * Renders the same visual as the ui `TooltipContent` (bubble + arrow) but\n * positions it directly from the anchor coordinates — Radix's popper\n * repositions asynchronously and mis-measures animated content, which made\n * tooltips drift on charts. Placement supports all four sides with\n * Radix-style collision flipping.\n */\nexport function ChartTooltip({ anchor, bubbleRef }: ChartTooltipProps) {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const preferredSide = anchor?.side ?? \"top\";\n  const [resolvedSide, setResolvedSide] = useState<ChartTooltipSide>(preferredSide);\n\n  // Forward the wrapper node to both the internal measure ref and the\n  // optional external ref (used by cursor-following charts to clamp it)\n  const setBubbleNode = useCallback(\n    (node: HTMLDivElement | null) => {\n      wrapperRef.current = node;\n      if (typeof bubbleRef === \"function\") bubbleRef(node);\n      else if (bubbleRef) {\n        (bubbleRef as { current: HTMLDivElement | null }).current = node;\n      }\n    },\n    [bubbleRef],\n  );\n\n  // Measure before paint and flip to the opposite side if needed\n  useLayoutEffect(() => {\n    const node = wrapperRef.current;\n    if (!anchor || !node) return;\n    const next = resolveSide(\n      preferredSide,\n      anchor,\n      node.offsetWidth,\n      node.offsetHeight,\n    );\n    setResolvedSide((current) => (current === next ? current : next));\n  }, [anchor, preferredSide]);\n\n  if (!anchor) return null;\n  const side = SIDE_CLASSES[resolvedSide];\n  return createPortal(\n    <div\n      data-slot=\"chart-tooltip-anchor\"\n      className=\"pointer-events-none fixed z-50\"\n      style={{ left: anchor.left, top: anchor.top }}\n    >\n      {/* Positioning transforms live on this node; animations (which also\n          drive `transform`) live on the bubble below so they can't clobber\n          each other */}\n      <div ref={setBubbleNode} className={cn(\"w-max\", side.wrapper)}>\n        <div\n          role=\"tooltip\"\n          data-slot=\"tooltip-content\"\n          data-side={resolvedSide}\n          className={cn(\n            \"relative w-fit max-w-xs rounded-md bg-foreground px-3 py-1.5 text-xs text-background\",\n            anchor.closing\n              ? \"animate-out fade-out zoom-out-95 fill-mode-forwards\"\n              : \"animate-in fade-in-0 zoom-in-95\",\n          )}\n        >\n          {anchor.lines.map((line, index) => (\n            <div key={`${index}-${line}`}>{line}</div>\n          ))}\n          <span\n            aria-hidden\n            className={cn(\n              \"absolute size-2.5 rotate-45 rounded-[2px] bg-foreground\",\n              side.arrow,\n            )}\n          />\n        </div>\n      </div>\n    </div>,\n    document.body,\n  );\n}\n\nexport interface UseChartTooltipOptions {\n  /** Axis label used for the default x line (falls back to \"X\") */\n  xLabel?: string;\n  /** Axis label used for the default y line (falls back to \"Y\") */\n  yLabel?: string;\n  /** Override the default line builder entirely */\n  getLines?: (points: ChartTooltipHoverPoint[]) => string[];\n  /**\n   * Track the cursor instead of anchoring to the hovered point's bounds, and\n   * keep the tooltip clamped inside the viewport. Use for traces with large\n   * hover targets (e.g. pie slices) where a fixed anchor feels disconnected.\n   */\n  followCursor?: boolean;\n  /**\n   * Override Plotly's hover hit radius (px). A larger radius makes big markers\n   * (e.g. heatmap circles) hoverable across their whole face.\n   */\n  hoverDistance?: number;\n  /**\n   * Preferred side to place the tooltip on relative to the point. Auto-flips to\n   * the opposite side when there isn't room (Radix-style). Defaults to \"top\".\n   */\n  side?: ChartTooltipSide;\n}\n\n/** Clamp an anchor point so a bubble of `width`×`height` stays on-screen */\nconst clampAnchor = (\n  left: number,\n  top: number,\n  width: number,\n  height: number,\n): { left: number; top: number } => {\n  const halfWidth = width / 2;\n  const clampedLeft = Math.min(\n    Math.max(left, halfWidth + VIEWPORT_PADDING_PX),\n    window.innerWidth - halfWidth - VIEWPORT_PADDING_PX,\n  );\n  // The bubble sits above the anchor; keep its top edge inside the viewport\n  const clampedTop = Math.min(\n    Math.max(top, height + 10 + VIEWPORT_PADDING_PX),\n    window.innerHeight - VIEWPORT_PADDING_PX,\n  );\n  return { left: clampedLeft, top: clampedTop };\n};\n\n/**\n * Drives the design-system tooltip from Plotly hover events.\n *\n * ```tsx\n * const { bindTooltip, tooltipElement } = useChartTooltip({ xLabel, yLabel });\n * // after Plotly.newPlot(...): set trace hoverinfo to \"none\", then\n * bindTooltip(plotRef.current);\n * // anywhere in the chart markup:\n * {tooltipElement}\n * ```\n */\nexport function useChartTooltip(options: UseChartTooltipOptions = {}) {\n  const [anchor, setAnchor] = useState<ChartTooltipAnchor | null>(null);\n  const hideTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n  const optionsRef = useRef(options);\n  optionsRef.current = options;\n  // Measured bubble node, used to clamp the cursor-following tooltip on-screen\n  const bubbleRef = useRef<HTMLDivElement>(null);\n  // Active lines while a cursor-following tooltip is shown; null when hidden\n  const cursorLinesRef = useRef<string[] | null>(null);\n  // Removes the mousemove listener registered by the previous bindTooltip call\n  const detachMouseMoveRef = useRef<(() => void) | null>(null);\n\n  const bindTooltip = useCallback((plotDiv: HTMLElement | null) => {\n    if (!plotDiv) return;\n    // The chart effect can re-run (size/theme/props changes) and call this\n    // again on the same node; drop the prior mousemove listener so they don't\n    // accumulate. (Plotly's own hover/unhover handlers are cleared by newPlot.)\n    detachMouseMoveRef.current?.();\n    detachMouseMoveRef.current = null;\n    setAnchor(null);\n    cursorLinesRef.current = null;\n\n    // A larger hover radius makes the tooltip easier to acquire and keep\n    void Plotly.relayout(plotDiv, {\n      hoverdistance: optionsRef.current.hoverDistance ?? HOVER_DISTANCE_PX,\n    });\n\n    const emitter = plotDiv as unknown as ChartTooltipEmitter;\n\n    // Place the cursor-following tooltip at the (clamped) cursor position\n    const positionAtCursor = (lines: string[], clientX: number, clientY: number) => {\n      const bubble = bubbleRef.current;\n      const { left, top } = clampAnchor(\n        clientX,\n        clientY,\n        bubble?.offsetWidth ?? 0,\n        bubble?.offsetHeight ?? 0,\n      );\n      setAnchor({ left, top, lines, side: optionsRef.current.side });\n    };\n\n    emitter.on(\"plotly_hover\", (eventData) => {\n      const points = eventData.points ?? [];\n      const { getLines, xLabel, yLabel, followCursor } = optionsRef.current;\n      const lines = getLines\n        ? getLines(points)\n        : chartTooltipLines(points, { xLabel, yLabel });\n      if (lines.length === 0) return;\n\n      clearTimeout(hideTimerRef.current);\n\n      const mouse = eventData.event;\n      if (followCursor) {\n        cursorLinesRef.current = lines;\n        positionAtCursor(lines, mouse?.clientX ?? 0, mouse?.clientY ?? 0);\n        return;\n      }\n\n      // Anchor to the hovered point's bounds (in plot-div pixels) when\n      // Plotly provides them; fall back to the mouse position. The anchor\n      // is position:fixed, so viewport coordinates are used directly.\n      const point = points[0];\n      const bbox = point?.bbox;\n      let left = 0;\n      let top = 0;\n      if (bbox) {\n        const rect = plotDiv.getBoundingClientRect();\n        left = rect.left + (bbox.x0 + bbox.x1) / 2;\n        // Bars report a zero-height bbox that sits below their visual top;\n        // anchor to the bar's true top via the axis projection instead.\n        const yaxis = point?.yaxis;\n        if (\n          bbox.y0 === bbox.y1 &&\n          typeof point?.y === \"number\" &&\n          typeof yaxis?.l2p === \"function\" &&\n          typeof yaxis._offset === \"number\"\n        ) {\n          top = rect.top + yaxis._offset + yaxis.l2p(point.y);\n        } else {\n          top = rect.top + Math.min(bbox.y0, bbox.y1);\n        }\n      } else if (mouse) {\n        left = mouse.clientX;\n        top = mouse.clientY;\n      }\n      setAnchor({ left, top, lines, side: optionsRef.current.side });\n    });\n\n    // While following the cursor, keep the tooltip glued to the pointer even\n    // when Plotly does not re-fire hover within the same point (e.g. a slice)\n    const handleMouseMove = (event: MouseEvent) => {\n      if (!optionsRef.current.followCursor) return;\n      const lines = cursorLinesRef.current;\n      if (!lines) return;\n      positionAtCursor(lines, event.clientX, event.clientY);\n    };\n    plotDiv.addEventListener(\"mousemove\", handleMouseMove);\n    detachMouseMoveRef.current = () =>\n      plotDiv.removeEventListener(\"mousemove\", handleMouseMove);\n\n    emitter.on(\"plotly_unhover\", () => {\n      clearTimeout(hideTimerRef.current);\n      cursorLinesRef.current = null;\n      // After the grace period, play the exit animation, then unmount\n      hideTimerRef.current = setTimeout(() => {\n        setAnchor((previous) =>\n          previous ? { ...previous, closing: true } : previous,\n        );\n        hideTimerRef.current = setTimeout(() => setAnchor(null), EXIT_ANIMATION_MS);\n      }, HIDE_GRACE_MS);\n    });\n  }, []);\n\n  return {\n    bindTooltip,\n    tooltipElement: <ChartTooltip anchor={anchor} bubbleRef={bubbleRef} />,\n  };\n}\n"],"names":["HOVER_DISTANCE_PX","HIDE_GRACE_MS","EXIT_ANIMATION_MS","VIEWPORT_PADDING_PX","TOOLTIP_GAP_PX","OPPOSITE_SIDE","SIDE_CLASSES","resolveSide","preferred","anchor","width","height","pad","reach","fits","ChartTooltip","bubbleRef","wrapperRef","useRef","preferredSide","resolvedSide","setResolvedSide","useState","setBubbleNode","useCallback","node","useLayoutEffect","next","current","side","createPortal","jsx","cn","jsxs","line","index","clampAnchor","left","top","halfWidth","clampedLeft","clampedTop","useChartTooltip","options","setAnchor","hideTimerRef","optionsRef","cursorLinesRef","detachMouseMoveRef","plotDiv","Plotly","emitter","positionAtCursor","lines","clientX","clientY","bubble","eventData","points","getLines","xLabel","yLabel","followCursor","chartTooltipLines","mouse","point","bbox","rect","yaxis","handleMouseMove","event","previous"],"mappings":"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"}
+{"version":3,"file":"ChartTooltip.js","sources":["../../../../src/components/charts/ChartTooltip/ChartTooltip.tsx"],"sourcesContent":["import { useCallback, useLayoutEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { getLoadedPlotly } from \"../plotly-loader\";\n\nimport { chartTooltipLines } from \"./lines\";\n\nimport type { ChartTooltipHoverPoint } from \"./lines\";\nimport type { Ref } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport { chartTooltipLines } from \"./lines\";\nexport type { ChartTooltipHoverPoint } from \"./lines\";\n\n/**\n * How far (px) from a point Plotly still reports a hover. Matches Plotly's\n * default — a larger radius makes tooltips snap to neighbors in dense plots\n */\nconst HOVER_DISTANCE_PX = 20;\n/** Grace period before hiding, so the tooltip survives gaps between points */\nconst HIDE_GRACE_MS = 150;\n/** How long the exit animation plays before the tooltip unmounts */\nconst EXIT_ANIMATION_MS = 200;\n\n/** Which edge of the point the tooltip is placed against (matches Radix). */\nexport type ChartTooltipSide = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface ChartTooltipAnchor {\n  left: number;\n  top: number;\n  lines: string[];\n  /** Preferred placement side; auto-flips to the opposite when it won't fit */\n  side?: ChartTooltipSide;\n  /** Plays the exit animation before the tooltip unmounts */\n  closing?: boolean;\n}\n\n/** Keep an anchor point this far from the viewport edges when clamping */\nconst VIEWPORT_PADDING_PX = 8;\n/** Gap (px) between the anchor point and the bubble on every side */\nconst TOOLTIP_GAP_PX = 10;\n\n/** The opposite side to flip to when the preferred one has no room */\nconst OPPOSITE_SIDE: Record<ChartTooltipSide, ChartTooltipSide> = {\n  top: \"bottom\",\n  bottom: \"top\",\n  left: \"right\",\n  right: \"left\",\n};\n\n/**\n * Per-side transforms. The wrapper carries positioning transforms (kept off\n * the bubble so they don't clobber the entry/exit animation), and the arrow\n * sits on the edge facing the point.\n */\nconst SIDE_CLASSES: Record<ChartTooltipSide, { wrapper: string; arrow: string }> = {\n  top: {\n    wrapper: \"-translate-x-1/2 -translate-y-[calc(100%+10px)]\",\n    arrow: \"-bottom-1 left-1/2 -translate-x-1/2\",\n  },\n  bottom: {\n    wrapper: \"-translate-x-1/2 translate-y-[10px]\",\n    arrow: \"-top-1 left-1/2 -translate-x-1/2\",\n  },\n  left: {\n    wrapper: \"-translate-y-1/2 -translate-x-[calc(100%+10px)]\",\n    arrow: \"-right-1 top-1/2 -translate-y-1/2\",\n  },\n  right: {\n    wrapper: \"-translate-y-1/2 translate-x-[10px]\",\n    arrow: \"-left-1 top-1/2 -translate-y-1/2\",\n  },\n};\n\ninterface ChartTooltipEmitter {\n  on: (event: string, handler: (data: ChartTooltipHoverEvent) => void) => void;\n}\n\ninterface ChartTooltipHoverEvent {\n  points?: ChartTooltipHoverPoint[];\n  event?: MouseEvent;\n}\n\nexport interface ChartTooltipProps {\n  /** Anchor position (viewport coordinates) and content lines */\n  anchor: ChartTooltipAnchor | null;\n  /** Ref to the bubble node, used by cursor-following charts to clamp it on-screen */\n  bubbleRef?: Ref<HTMLDivElement>;\n}\n\n/**\n * Resolve the side the bubble actually renders on: keep the preferred side\n * when it fits in the viewport, otherwise flip to the opposite side.\n */\nconst resolveSide = (\n  preferred: ChartTooltipSide,\n  anchor: { left: number; top: number },\n  width: number,\n  height: number,\n): ChartTooltipSide => {\n  const pad = VIEWPORT_PADDING_PX;\n  const reach = TOOLTIP_GAP_PX;\n  const fits: Record<ChartTooltipSide, boolean> = {\n    top: anchor.top - reach - height >= pad,\n    bottom: anchor.top + reach + height <= window.innerHeight - pad,\n    left: anchor.left - reach - width >= pad,\n    right: anchor.left + reach + width <= window.innerWidth - pad,\n  };\n  // Flip only when the preferred side overflows and the opposite has room\n  if (!fits[preferred] && fits[OPPOSITE_SIDE[preferred]]) {\n    return OPPOSITE_SIDE[preferred];\n  }\n  return preferred;\n};\n\n/**\n * The design-system tooltip anchored at a chart position; drive it with\n * `useChartTooltip`.\n *\n * Renders the same visual as the ui `TooltipContent` (bubble + arrow) but\n * positions it directly from the anchor coordinates — Radix's popper\n * repositions asynchronously and mis-measures animated content, which made\n * tooltips drift on charts. Placement supports all four sides with\n * Radix-style collision flipping.\n */\nexport function ChartTooltip({ anchor, bubbleRef }: ChartTooltipProps) {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const preferredSide = anchor?.side ?? \"top\";\n  const [resolvedSide, setResolvedSide] = useState<ChartTooltipSide>(preferredSide);\n\n  // Forward the wrapper node to both the internal measure ref and the\n  // optional external ref (used by cursor-following charts to clamp it)\n  const setBubbleNode = useCallback(\n    (node: HTMLDivElement | null) => {\n      wrapperRef.current = node;\n      if (typeof bubbleRef === \"function\") bubbleRef(node);\n      else if (bubbleRef) {\n        (bubbleRef as { current: HTMLDivElement | null }).current = node;\n      }\n    },\n    [bubbleRef],\n  );\n\n  // Measure before paint and flip to the opposite side if needed\n  useLayoutEffect(() => {\n    const node = wrapperRef.current;\n    if (!anchor || !node) return;\n    const next = resolveSide(\n      preferredSide,\n      anchor,\n      node.offsetWidth,\n      node.offsetHeight,\n    );\n    setResolvedSide((current) => (current === next ? current : next));\n  }, [anchor, preferredSide]);\n\n  if (!anchor) return null;\n  const side = SIDE_CLASSES[resolvedSide];\n  return createPortal(\n    <div\n      data-slot=\"chart-tooltip-anchor\"\n      className=\"pointer-events-none fixed z-50\"\n      style={{ left: anchor.left, top: anchor.top }}\n    >\n      {/* Positioning transforms live on this node; animations (which also\n          drive `transform`) live on the bubble below so they can't clobber\n          each other */}\n      <div ref={setBubbleNode} className={cn(\"w-max\", side.wrapper)}>\n        <div\n          role=\"tooltip\"\n          data-slot=\"tooltip-content\"\n          data-side={resolvedSide}\n          className={cn(\n            \"relative w-fit max-w-xs rounded-md bg-foreground px-3 py-1.5 text-xs text-background\",\n            anchor.closing\n              ? \"animate-out fade-out zoom-out-95 fill-mode-forwards\"\n              : \"animate-in fade-in-0 zoom-in-95\",\n          )}\n        >\n          {anchor.lines.map((line, index) => (\n            <div key={`${index}-${line}`}>{line}</div>\n          ))}\n          <span\n            aria-hidden\n            className={cn(\n              \"absolute size-2.5 rotate-45 rounded-[2px] bg-foreground\",\n              side.arrow,\n            )}\n          />\n        </div>\n      </div>\n    </div>,\n    document.body,\n  );\n}\n\nexport interface UseChartTooltipOptions {\n  /** Axis label used for the default x line (falls back to \"X\") */\n  xLabel?: string;\n  /** Axis label used for the default y line (falls back to \"Y\") */\n  yLabel?: string;\n  /** Override the default line builder entirely */\n  getLines?: (points: ChartTooltipHoverPoint[]) => string[];\n  /**\n   * Track the cursor instead of anchoring to the hovered point's bounds, and\n   * keep the tooltip clamped inside the viewport. Use for traces with large\n   * hover targets (e.g. pie slices) where a fixed anchor feels disconnected.\n   */\n  followCursor?: boolean;\n  /**\n   * Override Plotly's hover hit radius (px). A larger radius makes big markers\n   * (e.g. heatmap circles) hoverable across their whole face.\n   */\n  hoverDistance?: number;\n  /**\n   * Preferred side to place the tooltip on relative to the point. Auto-flips to\n   * the opposite side when there isn't room (Radix-style). Defaults to \"top\".\n   */\n  side?: ChartTooltipSide;\n}\n\n/** Clamp an anchor point so a bubble of `width`×`height` stays on-screen */\nconst clampAnchor = (\n  left: number,\n  top: number,\n  width: number,\n  height: number,\n): { left: number; top: number } => {\n  const halfWidth = width / 2;\n  const clampedLeft = Math.min(\n    Math.max(left, halfWidth + VIEWPORT_PADDING_PX),\n    window.innerWidth - halfWidth - VIEWPORT_PADDING_PX,\n  );\n  // The bubble sits above the anchor; keep its top edge inside the viewport\n  const clampedTop = Math.min(\n    Math.max(top, height + 10 + VIEWPORT_PADDING_PX),\n    window.innerHeight - VIEWPORT_PADDING_PX,\n  );\n  return { left: clampedLeft, top: clampedTop };\n};\n\n/**\n * Drives the design-system tooltip from Plotly hover events.\n *\n * ```tsx\n * const { bindTooltip, tooltipElement } = useChartTooltip({ xLabel, yLabel });\n * // after Plotly.newPlot(...): set trace hoverinfo to \"none\", then\n * bindTooltip(plotRef.current);\n * // anywhere in the chart markup:\n * {tooltipElement}\n * ```\n */\nexport function useChartTooltip(options: UseChartTooltipOptions = {}) {\n  const [anchor, setAnchor] = useState<ChartTooltipAnchor | null>(null);\n  const hideTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n  const optionsRef = useRef(options);\n  optionsRef.current = options;\n  // Measured bubble node, used to clamp the cursor-following tooltip on-screen\n  const bubbleRef = useRef<HTMLDivElement>(null);\n  // Active lines while a cursor-following tooltip is shown; null when hidden\n  const cursorLinesRef = useRef<string[] | null>(null);\n  // Removes the mousemove listener registered by the previous bindTooltip call\n  const detachMouseMoveRef = useRef<(() => void) | null>(null);\n\n  const bindTooltip = useCallback((plotDiv: HTMLElement | null) => {\n    if (!plotDiv) return;\n    // The chart effect can re-run (size/theme/props changes) and call this\n    // again on the same node; drop the prior mousemove listener so they don't\n    // accumulate. (Plotly's own hover/unhover handlers are cleared by newPlot.)\n    detachMouseMoveRef.current?.();\n    detachMouseMoveRef.current = null;\n    setAnchor(null);\n    cursorLinesRef.current = null;\n\n    // A larger hover radius makes the tooltip easier to acquire and keep.\n    // bindTooltip is documented as \"call after Plotly.newPlot(...)\", so the\n    // lazily-loaded Plotly module is guaranteed to be available here.\n    void getLoadedPlotly().relayout(plotDiv, {\n      hoverdistance: optionsRef.current.hoverDistance ?? HOVER_DISTANCE_PX,\n    });\n\n    const emitter = plotDiv as unknown as ChartTooltipEmitter;\n\n    // Place the cursor-following tooltip at the (clamped) cursor position\n    const positionAtCursor = (lines: string[], clientX: number, clientY: number) => {\n      const bubble = bubbleRef.current;\n      const { left, top } = clampAnchor(\n        clientX,\n        clientY,\n        bubble?.offsetWidth ?? 0,\n        bubble?.offsetHeight ?? 0,\n      );\n      setAnchor({ left, top, lines, side: optionsRef.current.side });\n    };\n\n    emitter.on(\"plotly_hover\", (eventData) => {\n      const points = eventData.points ?? [];\n      const { getLines, xLabel, yLabel, followCursor } = optionsRef.current;\n      const lines = getLines\n        ? getLines(points)\n        : chartTooltipLines(points, { xLabel, yLabel });\n      if (lines.length === 0) return;\n\n      clearTimeout(hideTimerRef.current);\n\n      const mouse = eventData.event;\n      if (followCursor) {\n        cursorLinesRef.current = lines;\n        positionAtCursor(lines, mouse?.clientX ?? 0, mouse?.clientY ?? 0);\n        return;\n      }\n\n      // Anchor to the hovered point's bounds (in plot-div pixels) when\n      // Plotly provides them; fall back to the mouse position. The anchor\n      // is position:fixed, so viewport coordinates are used directly.\n      const point = points[0];\n      const bbox = point?.bbox;\n      let left = 0;\n      let top = 0;\n      if (bbox) {\n        const rect = plotDiv.getBoundingClientRect();\n        left = rect.left + (bbox.x0 + bbox.x1) / 2;\n        // Bars report a zero-height bbox that sits below their visual top;\n        // anchor to the bar's true top via the axis projection instead.\n        const yaxis = point?.yaxis;\n        if (\n          bbox.y0 === bbox.y1 &&\n          typeof point?.y === \"number\" &&\n          typeof yaxis?.l2p === \"function\" &&\n          typeof yaxis._offset === \"number\"\n        ) {\n          top = rect.top + yaxis._offset + yaxis.l2p(point.y);\n        } else {\n          top = rect.top + Math.min(bbox.y0, bbox.y1);\n        }\n      } else if (mouse) {\n        left = mouse.clientX;\n        top = mouse.clientY;\n      }\n      setAnchor({ left, top, lines, side: optionsRef.current.side });\n    });\n\n    // While following the cursor, keep the tooltip glued to the pointer even\n    // when Plotly does not re-fire hover within the same point (e.g. a slice)\n    const handleMouseMove = (event: MouseEvent) => {\n      if (!optionsRef.current.followCursor) return;\n      const lines = cursorLinesRef.current;\n      if (!lines) return;\n      positionAtCursor(lines, event.clientX, event.clientY);\n    };\n    plotDiv.addEventListener(\"mousemove\", handleMouseMove);\n    detachMouseMoveRef.current = () =>\n      plotDiv.removeEventListener(\"mousemove\", handleMouseMove);\n\n    emitter.on(\"plotly_unhover\", () => {\n      clearTimeout(hideTimerRef.current);\n      cursorLinesRef.current = null;\n      // After the grace period, play the exit animation, then unmount\n      hideTimerRef.current = setTimeout(() => {\n        setAnchor((previous) =>\n          previous ? { ...previous, closing: true } : previous,\n        );\n        hideTimerRef.current = setTimeout(() => setAnchor(null), EXIT_ANIMATION_MS);\n      }, HIDE_GRACE_MS);\n    });\n  }, []);\n\n  return {\n    bindTooltip,\n    tooltipElement: <ChartTooltip anchor={anchor} bubbleRef={bubbleRef} />,\n  };\n}\n"],"names":["HOVER_DISTANCE_PX","HIDE_GRACE_MS","EXIT_ANIMATION_MS","VIEWPORT_PADDING_PX","TOOLTIP_GAP_PX","OPPOSITE_SIDE","SIDE_CLASSES","resolveSide","preferred","anchor","width","height","pad","reach","fits","ChartTooltip","bubbleRef","wrapperRef","useRef","preferredSide","resolvedSide","setResolvedSide","useState","setBubbleNode","useCallback","node","useLayoutEffect","next","current","side","createPortal","jsx","cn","jsxs","line","index","clampAnchor","left","top","halfWidth","clampedLeft","clampedTop","useChartTooltip","options","setAnchor","hideTimerRef","optionsRef","cursorLinesRef","detachMouseMoveRef","plotDiv","getLoadedPlotly","emitter","positionAtCursor","lines","clientX","clientY","bubble","eventData","points","getLines","xLabel","yLabel","followCursor","chartTooltipLines","mouse","point","bbox","rect","yaxis","handleMouseMove","event","previous"],"mappings":"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"}

package/dist/components/charts/ChartTooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { ChartTooltip, chartTooltipLines, useChartTooltip, } from './ChartTooltip';
+export type { ChartTooltipAnchor, ChartTooltipHoverPoint, ChartTooltipProps, ChartTooltipSide, UseChartTooltipOptions, } from './ChartTooltip';

package/dist/components/charts/ChartTooltip/lines.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Minimal structural view of a Plotly hover point — covers cartesian, pie,
+ * and heatmap traces without depending on Plotly's loose event typings.
+ */
+export interface ChartTooltipHoverPoint {
+    x?: number | string;
+    y?: number | string;
+    z?: number;
+    /** Pie slice label */
+    label?: string;
+    /** Pie slice value */
+    value?: number;
+    /** Pie slice raw value (Plotly's `v` alias) */
+    v?: number;
+    /** Pie slice percentage (0–100) */
+    percent?: number;
+    /** Per-point hover text (e.g. PlateMap wells), lines separated by `<br>` */
+    text?: string;
+    pointIndex?: number;
+    data?: {
+        name?: string;
+    };
+    /** Per-point custom data attached to the trace */
+    customdata?: unknown;
+    /** Hovered point bounds in plot-div pixels (provided by Plotly) */
+    bbox?: {
+        x0: number;
+        x1: number;
+        y0: number;
+        y1: number;
+    };
+    /**
+     * Plotly axis objects (internal) used to project a data value to a plot-div
+     * pixel. Bars report a `bbox` that sits below their visual top, so we anchor
+     * to `_offset + l2p(value)` instead.
+     */
+    yaxis?: {
+        _offset?: number;
+        l2p?: (value: number) => number;
+    };
+    xaxis?: {
+        _offset?: number;
+        l2p?: (value: number) => number;
+    };
+}
+/**
+ * Build default tooltip lines from Plotly hover points. Handles pie slices,
+ * text-carrying traces (e.g. PlateMap wells), single cartesian points, and
+ * unified multi-trace hovers.
+ */
+export declare function chartTooltipLines(points: ChartTooltipHoverPoint[], labels?: {
+    xLabel?: string;
+    yLabel?: string;
+}): string[];

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

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

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

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

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

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { ChromatogramSeries, PeakAnnotation, PeakSelectEvent, PeakSelectionAppearance, BaselineCorrectionMethod, BoundaryMarkerStyle, BoundaryMarkerType, PeakDetectionOptions, ChromatogramProps } from './types';
+export type { ChromatogramSeries, PeakAnnotation, PeakSelectEvent, PeakSelectionAppearance, BaselineCorrectionMethod, BoundaryMarkerStyle, BoundaryMarkerType, PeakDetectionOptions, ChromatogramProps, };
+declare const Chromatogram: React.FC<ChromatogramProps>;
+export { Chromatogram };