npm - @tetrascience-npm/tetrascience-react-ui - Versions diffs - 0.6.0 → 0.7.0-beta.103.1 - Mend

@tetrascience-npm/tetrascience-react-ui 0.6.0 → 0.7.0-beta.103.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (184) hide show

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

@@ -0,0 +1,163 @@
+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 { chartTooltipLines as z } from "./lines.js";
+import { cn as L } from "../../../lib/utils.js";
+const G = 20, Y = 150, j = 200, y = 8, k = 10, C = {
+  top: "bottom",
+  bottom: "top",
+  left: "right",
+  right: "left"
+}, B = {
+  top: {
+    wrapper: "-translate-x-1/2 -translate-y-[calc(100%+10px)]",
+    arrow: "-bottom-1 left-1/2 -translate-x-1/2"
+  },
+  bottom: {
+    wrapper: "-translate-x-1/2 translate-y-[10px]",
+    arrow: "-top-1 left-1/2 -translate-x-1/2"
+  },
+  left: {
+    wrapper: "-translate-y-1/2 -translate-x-[calc(100%+10px)]",
+    arrow: "-right-1 top-1/2 -translate-y-1/2"
+  },
+  right: {
+    wrapper: "-translate-y-1/2 translate-x-[10px]",
+    arrow: "-left-1 top-1/2 -translate-y-1/2"
+  }
+}, V = (t, o, n, r) => {
+  const e = y, s = k, i = {
+    top: o.top - s - r >= e,
+    bottom: o.top + s + r <= window.innerHeight - e,
+    left: o.left - s - n >= e,
+    right: o.left + s + n <= window.innerWidth - e
+  };
+  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(
+    (l) => {
+      n.current = l, typeof o == "function" ? o(l) : o && (o.current = l);
+    },
+    [o]
+  );
+  if (H(() => {
+    const l = n.current;
+    if (!t || !l) return;
+    const c = V(
+      r,
+      t,
+      l.offsetWidth,
+      l.offsetHeight
+    );
+    s((m) => m === c ? m : c);
+  }, [t, r]), !t) return null;
+  const p = B[e];
+  return W(
+    /* @__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(
+          "div",
+          {
+            role: "tooltip",
+            "data-slot": "tooltip-content",
+            "data-side": e,
+            className: L(
+              "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"
+            ),
+            children: [
+              t.lines.map((l, c) => /* @__PURE__ */ h("div", { children: l }, `${c}-${l}`)),
+              /* @__PURE__ */ h(
+                "span",
+                {
+                  "aria-hidden": !0,
+                  className: L(
+                    "absolute size-2.5 rotate-45 rounded-[2px] bg-foreground",
+                    p.arrow
+                  )
+                }
+              )
+            ]
+          }
+        ) })
+      }
+    ),
+    document.body
+  );
+}
+const D = (t, o, n, r) => {
+  const e = n / 2, s = Math.min(
+    Math.max(t, e + y),
+    window.innerWidth - e - y
+  ), i = Math.min(
+    Math.max(o, r + 10 + y),
+    window.innerHeight - y
+  );
+  return { left: s, top: i };
+};
+function Z(t = {}) {
+  const [o, n] = N(null), r = d(void 0), e = d(t);
+  e.current = t;
+  const s = d(null), i = d(null), p = d(null);
+  return {
+    bindTooltip: R((c) => {
+      if (!c) return;
+      p.current?.(), p.current = null, n(null), i.current = null, X.relayout(c, {
+        hoverdistance: e.current.hoverDistance ?? G
+      });
+      const m = c, P = (a, u, w) => {
+        const g = s.current, { left: E, top: S } = D(
+          u,
+          w,
+          g?.offsetWidth ?? 0,
+          g?.offsetHeight ?? 0
+        );
+        n({ left: E, top: S, lines: a, side: e.current.side });
+      };
+      m.on("plotly_hover", (a) => {
+        const u = a.points ?? [], { getLines: w, xLabel: g, yLabel: E, followCursor: S } = e.current, T = w ? w(u) : z(u, { xLabel: g, yLabel: E });
+        if (T.length === 0) return;
+        clearTimeout(r.current);
+        const x = a.event;
+        if (S) {
+          i.current = T, P(T, x?.clientX ?? 0, x?.clientY ?? 0);
+          return;
+        }
+        const b = u[0], f = b?.bbox;
+        let M = 0, _ = 0;
+        if (f) {
+          const I = c.getBoundingClientRect();
+          M = I.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 });
+      });
+      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", () => {
+        clearTimeout(r.current), i.current = null, r.current = setTimeout(() => {
+          n(
+            (a) => a && { ...a, closing: !0 }
+          ), r.current = setTimeout(() => n(null), j);
+        }, Y);
+      });
+    }, []),
+    tooltipElement: /* @__PURE__ */ h($, { anchor: o, bubbleRef: s })
+  };
+}
+export {
+  $ as ChartTooltip,
+  z as chartTooltipLines,
+  Z as useChartTooltip
+};
+//# sourceMappingURL=ChartTooltip.js.map

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

@@ -0,0 +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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"}

package/dist/components/charts/ChartTooltip/lines.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=e=>typeof e!="number"\|\|Number.isInteger(e)?String(e):e.toFixed(2),u=e=>{const n=[String(e.label),`Value: ${i(e.value??e.v)}`];return typeof e.percent=="number"?n.push(`${e.percent.toFixed(1)}%`):typeof e.text=="string"&&e.text.endsWith("%")&&n.push(e.text),n},o=(e,n)=>{const[t]=e,r=t.x===void 0?[]:[`${n}: ${i(t.x)}`];for(const s of e)s.y!==void 0&&r.push(`${s.data?.name??"Series"}: ${i(s.y)}`);return r},f=(e,n,t)=>{const r=[];return e.data?.name&&r.push(e.data.name),e.x!==void 0&&r.push(`${n}: ${i(e.x)}`),e.y!==void 0&&r.push(`${t}: ${i(e.y)}`),e.z!==void 0&&r.push(`Value: ${i(e.z)}`),r};function a(e,n){if(e.length===0)return[];const[t]=e;if(t.label!==void 0&&(t.value??t.v)!==void 0&&t.x===void 0&&t.y===void 0)return u(t);if(typeof t.text=="string"&&t.text.length>0)return t.text.split("<br>").filter(Boolean);const r=n?.xLabel\|\|"X",s=n?.yLabel\|\|"Y";return e.length>1?o(e,r):f(t,r,s)}exports.chartTooltipLines=a;
2	+ //# sourceMappingURL=lines.cjs.map

package/dist/components/charts/ChartTooltip/lines.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"lines.cjs","sources":["../../../../src/components/charts/ChartTooltip/lines.ts"],"sourcesContent":["/**\n * Minimal structural view of a Plotly hover point — covers cartesian, pie,\n * and heatmap traces without depending on Plotly's loose event typings.\n */\nexport interface ChartTooltipHoverPoint {\n x?: number | string;\n y?: number | string;\n z?: number;\n /** Pie slice label */\n label?: string;\n /** Pie slice value */\n value?: number;\n /** Pie slice raw value (Plotly's `v` alias) */\n v?: number;\n /** Pie slice percentage (0–100) */\n percent?: number;\n /** Per-point hover text (e.g. PlateMap wells), lines separated by `<br>` */\n text?: string;\n pointIndex?: number;\n data?: { name?: string };\n /** Per-point custom data attached to the trace */\n customdata?: unknown;\n /** Hovered point bounds in plot-div pixels (provided by Plotly) */\n bbox?: { x0: number; x1: number; y0: number; y1: number };\n /**\n * Plotly axis objects (internal) used to project a data value to a plot-div\n * pixel. Bars report a `bbox` that sits below their visual top, so we anchor\n * to `_offset + l2p(value)` instead.\n */\n yaxis?: { _offset?: number; l2p?: (value: number) => number };\n xaxis?: { _offset?: number; l2p?: (value: number) => number };\n}\n\nconst formatValue = (value: number | string): string => {\n if (typeof value !== \"number\") return String(value);\n return Number.isInteger(value) ? String(value) : value.toFixed(2);\n};\n\nconst pieLines = (point: ChartTooltipHoverPoint): string[] => {\n const lines = [\n String(point.label),\n `Value: ${formatValue((point.value ?? point.v)!)}`,\n ];\n if (typeof point.percent === \"number\") {\n lines.push(`${point.percent.toFixed(1)}%`);\n } else if (typeof point.text === \"string\" && point.text.endsWith(\"%\")) {\n lines.push(point.text);\n }\n return lines;\n};\n\n/** Unified hover across multiple traces: shared x, one line per trace */\nconst unifiedLines = (\n points: ChartTooltipHoverPoint[],\n xLabel: string,\n): string[] => {\n const [first] = points;\n const lines =\n first.x === undefined ? [] : [`${xLabel}: ${formatValue(first.x)}`];\n for (const point of points) {\n if (point.y === undefined) continue;\n lines.push(`${point.data?.name ?? \"Series\"}: ${formatValue(point.y)}`);\n }\n return lines;\n};\n\nconst cartesianLines = (\n point: ChartTooltipHoverPoint,\n xLabel: string,\n yLabel: string,\n): string[] => {\n const lines: string[] = [];\n if (point.data?.name) lines.push(point.data.name);\n if (point.x !== undefined) lines.push(`${xLabel}: ${formatValue(point.x)}`);\n if (point.y !== undefined) lines.push(`${yLabel}: ${formatValue(point.y)}`);\n if (point.z !== undefined) lines.push(`Value: ${formatValue(point.z)}`);\n return lines;\n};\n\n/**\n * Build default tooltip lines from Plotly hover points. Handles pie slices,\n * text-carrying traces (e.g. PlateMap wells), single cartesian points, and\n * unified multi-trace hovers.\n */\nexport function chartTooltipLines(\n points: ChartTooltipHoverPoint[],\n labels?: { xLabel?: string; yLabel?: string },\n): string[] {\n if (points.length === 0) return [];\n const [first] = points;\n\n // Pie hover points carry label/value without axis coordinates; bar points\n // also alias label/value but always have x/y\n if (\n first.label !== undefined &&\n (first.value ?? first.v) !== undefined &&\n first.x === undefined &&\n first.y === undefined\n ) {\n return pieLines(first);\n }\n\n // Traces that carry their own hover text (e.g. PlateMap wells)\n if (typeof first.text === \"string\" && first.text.length > 0) {\n return first.text.split(\"<br>\").filter(Boolean);\n }\n\n const xLabel = labels?.xLabel || \"X\";\n const yLabel = labels?.yLabel || \"Y\";\n return points.length > 1\n ? unifiedLines(points, xLabel)\n : cartesianLines(first, xLabel, yLabel);\n}\n"],"names":["formatValue","value","pieLines","point","lines","unifiedLines","points","xLabel","first","cartesianLines","yLabel","chartTooltipLines","labels"],"mappings":"gFAiCA,MAAMA,EAAeC,GACf,OAAOA,GAAU,UACd,OAAO,UAAUA,CAAK,EADS,OAAOA,CAAK,EACDA,EAAM,QAAQ,CAAC,EAG5DC,EAAYC,GAA4C,CAC5D,MAAMC,EAAQ,CACZ,OAAOD,EAAM,KAAK,EAClB,UAAUH,EAAaG,EAAM,OAASA,EAAM,CAAG,CAAC,EAAA,EAElD,OAAI,OAAOA,EAAM,SAAY,SAC3BC,EAAM,KAAK,GAAGD,EAAM,QAAQ,QAAQ,CAAC,CAAC,GAAG,EAChC,OAAOA,EAAM,MAAS,UAAYA,EAAM,KAAK,SAAS,GAAG,GAClEC,EAAM,KAAKD,EAAM,IAAI,EAEhBC,CACT,EAGMC,EAAe,CACnBC,EACAC,IACa,CACb,KAAM,CAACC,CAAK,EAAIF,EACVF,EACJI,EAAM,IAAM,OAAY,CAAA,EAAK,CAAC,GAAGD,CAAM,KAAKP,EAAYQ,EAAM,CAAC,CAAC,EAAE,EACpE,UAAWL,KAASG,EACdH,EAAM,IAAM,QAChBC,EAAM,KAAK,GAAGD,EAAM,MAAM,MAAQ,QAAQ,KAAKH,EAAYG,EAAM,CAAC,CAAC,EAAE,EAEvE,OAAOC,CACT,EAEMK,EAAiB,CACrBN,EACAI,EACAG,IACa,CACb,MAAMN,EAAkB,CAAA,EACxB,OAAID,EAAM,MAAM,QAAY,KAAKA,EAAM,KAAK,IAAI,EAC5CA,EAAM,IAAM,QAAWC,EAAM,KAAK,GAAGG,CAAM,KAAKP,EAAYG,EAAM,CAAC,CAAC,EAAE,EACtEA,EAAM,IAAM,QAAWC,EAAM,KAAK,GAAGM,CAAM,KAAKV,EAAYG,EAAM,CAAC,CAAC,EAAE,EACtEA,EAAM,IAAM,QAAWC,EAAM,KAAK,UAAUJ,EAAYG,EAAM,CAAC,CAAC,EAAE,EAC/DC,CACT,EAOO,SAASO,EACdL,EACAM,EACU,CACV,GAAIN,EAAO,SAAW,EAAG,MAAO,CAAA,EAChC,KAAM,CAACE,CAAK,EAAIF,EAIhB,GACEE,EAAM,QAAU,SACfA,EAAM,OAASA,EAAM,KAAO,QAC7BA,EAAM,IAAM,QACZA,EAAM,IAAM,OAEZ,OAAON,EAASM,CAAK,EAIvB,GAAI,OAAOA,EAAM,MAAS,UAAYA,EAAM,KAAK,OAAS,EACxD,OAAOA,EAAM,KAAK,MAAM,MAAM,EAAE,OAAO,OAAO,EAGhD,MAAMD,EAASK,GAAQ,QAAU,IAC3BF,EAASE,GAAQ,QAAU,IACjC,OAAON,EAAO,OAAS,EACnBD,EAAaC,EAAQC,CAAM,EAC3BE,EAAeD,EAAOD,EAAQG,CAAM,CAC1C"}

package/dist/components/charts/ChartTooltip/lines.js ADDED Viewed

@@ -0,0 +1,29 @@
+const i = (e) => typeof e != "number" || Number.isInteger(e) ? String(e) : e.toFixed(2), f = (e) => {
+  const n = [
+    String(e.label),
+    `Value: ${i(e.value ?? e.v)}`
+  ];
+  return typeof e.percent == "number" ? n.push(`${e.percent.toFixed(1)}%`) : typeof e.text == "string" && e.text.endsWith("%") && n.push(e.text), n;
+}, u = (e, n) => {
+  const [t] = e, r = t.x === void 0 ? [] : [`${n}: ${i(t.x)}`];
+  for (const s of e)
+    s.y !== void 0 && r.push(`${s.data?.name ?? "Series"}: ${i(s.y)}`);
+  return r;
+}, a = (e, n, t) => {
+  const r = [];
+  return e.data?.name && r.push(e.data.name), e.x !== void 0 && r.push(`${n}: ${i(e.x)}`), e.y !== void 0 && r.push(`${t}: ${i(e.y)}`), e.z !== void 0 && r.push(`Value: ${i(e.z)}`), r;
+};
+function o(e, n) {
+  if (e.length === 0) return [];
+  const [t] = e;
+  if (t.label !== void 0 && (t.value ?? t.v) !== void 0 && t.x === void 0 && t.y === void 0)
+    return f(t);
+  if (typeof t.text == "string" && t.text.length > 0)
+    return t.text.split("<br>").filter(Boolean);
+  const r = n?.xLabel || "X", s = n?.yLabel || "Y";
+  return e.length > 1 ? u(e, r) : a(t, r, s);
+}
+export {
+  o as chartTooltipLines
+};
+//# sourceMappingURL=lines.js.map

package/dist/components/charts/ChartTooltip/lines.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"lines.js","sources":["../../../../src/components/charts/ChartTooltip/lines.ts"],"sourcesContent":["/**\n * Minimal structural view of a Plotly hover point — covers cartesian, pie,\n * and heatmap traces without depending on Plotly's loose event typings.\n */\nexport interface ChartTooltipHoverPoint {\n x?: number | string;\n y?: number | string;\n z?: number;\n /** Pie slice label */\n label?: string;\n /** Pie slice value */\n value?: number;\n /** Pie slice raw value (Plotly's `v` alias) */\n v?: number;\n /** Pie slice percentage (0–100) */\n percent?: number;\n /** Per-point hover text (e.g. PlateMap wells), lines separated by `<br>` */\n text?: string;\n pointIndex?: number;\n data?: { name?: string };\n /** Per-point custom data attached to the trace */\n customdata?: unknown;\n /** Hovered point bounds in plot-div pixels (provided by Plotly) */\n bbox?: { x0: number; x1: number; y0: number; y1: number };\n /**\n * Plotly axis objects (internal) used to project a data value to a plot-div\n * pixel. Bars report a `bbox` that sits below their visual top, so we anchor\n * to `_offset + l2p(value)` instead.\n */\n yaxis?: { _offset?: number; l2p?: (value: number) => number };\n xaxis?: { _offset?: number; l2p?: (value: number) => number };\n}\n\nconst formatValue = (value: number | string): string => {\n if (typeof value !== \"number\") return String(value);\n return Number.isInteger(value) ? String(value) : value.toFixed(2);\n};\n\nconst pieLines = (point: ChartTooltipHoverPoint): string[] => {\n const lines = [\n String(point.label),\n `Value: ${formatValue((point.value ?? point.v)!)}`,\n ];\n if (typeof point.percent === \"number\") {\n lines.push(`${point.percent.toFixed(1)}%`);\n } else if (typeof point.text === \"string\" && point.text.endsWith(\"%\")) {\n lines.push(point.text);\n }\n return lines;\n};\n\n/** Unified hover across multiple traces: shared x, one line per trace */\nconst unifiedLines = (\n points: ChartTooltipHoverPoint[],\n xLabel: string,\n): string[] => {\n const [first] = points;\n const lines =\n first.x === undefined ? [] : [`${xLabel}: ${formatValue(first.x)}`];\n for (const point of points) {\n if (point.y === undefined) continue;\n lines.push(`${point.data?.name ?? \"Series\"}: ${formatValue(point.y)}`);\n }\n return lines;\n};\n\nconst cartesianLines = (\n point: ChartTooltipHoverPoint,\n xLabel: string,\n yLabel: string,\n): string[] => {\n const lines: string[] = [];\n if (point.data?.name) lines.push(point.data.name);\n if (point.x !== undefined) lines.push(`${xLabel}: ${formatValue(point.x)}`);\n if (point.y !== undefined) lines.push(`${yLabel}: ${formatValue(point.y)}`);\n if (point.z !== undefined) lines.push(`Value: ${formatValue(point.z)}`);\n return lines;\n};\n\n/**\n * Build default tooltip lines from Plotly hover points. Handles pie slices,\n * text-carrying traces (e.g. PlateMap wells), single cartesian points, and\n * unified multi-trace hovers.\n */\nexport function chartTooltipLines(\n points: ChartTooltipHoverPoint[],\n labels?: { xLabel?: string; yLabel?: string },\n): string[] {\n if (points.length === 0) return [];\n const [first] = points;\n\n // Pie hover points carry label/value without axis coordinates; bar points\n // also alias label/value but always have x/y\n if (\n first.label !== undefined &&\n (first.value ?? first.v) !== undefined &&\n first.x === undefined &&\n first.y === undefined\n ) {\n return pieLines(first);\n }\n\n // Traces that carry their own hover text (e.g. PlateMap wells)\n if (typeof first.text === \"string\" && first.text.length > 0) {\n return first.text.split(\"<br>\").filter(Boolean);\n }\n\n const xLabel = labels?.xLabel || \"X\";\n const yLabel = labels?.yLabel || \"Y\";\n return points.length > 1\n ? unifiedLines(points, xLabel)\n : cartesianLines(first, xLabel, yLabel);\n}\n"],"names":["formatValue","value","pieLines","point","lines","unifiedLines","points","xLabel","first","cartesianLines","yLabel","chartTooltipLines","labels"],"mappings":"AAiCA,MAAMA,IAAc,CAACC,MACf,OAAOA,KAAU,YACd,OAAO,UAAUA,CAAK,IADS,OAAOA,CAAK,IACDA,EAAM,QAAQ,CAAC,GAG5DC,IAAW,CAACC,MAA4C;AAC5D,QAAMC,IAAQ;AAAA,IACZ,OAAOD,EAAM,KAAK;AAAA,IAClB,UAAUH,EAAaG,EAAM,SAASA,EAAM,CAAG,CAAC;AAAA,EAAA;AAElD,SAAI,OAAOA,EAAM,WAAY,WAC3BC,EAAM,KAAK,GAAGD,EAAM,QAAQ,QAAQ,CAAC,CAAC,GAAG,IAChC,OAAOA,EAAM,QAAS,YAAYA,EAAM,KAAK,SAAS,GAAG,KAClEC,EAAM,KAAKD,EAAM,IAAI,GAEhBC;AACT,GAGMC,IAAe,CACnBC,GACAC,MACa;AACb,QAAM,CAACC,CAAK,IAAIF,GACVF,IACJI,EAAM,MAAM,SAAY,CAAA,IAAK,CAAC,GAAGD,CAAM,KAAKP,EAAYQ,EAAM,CAAC,CAAC,EAAE;AACpE,aAAWL,KAASG;AAClB,IAAIH,EAAM,MAAM,UAChBC,EAAM,KAAK,GAAGD,EAAM,MAAM,QAAQ,QAAQ,KAAKH,EAAYG,EAAM,CAAC,CAAC,EAAE;AAEvE,SAAOC;AACT,GAEMK,IAAiB,CACrBN,GACAI,GACAG,MACa;AACb,QAAMN,IAAkB,CAAA;AACxB,SAAID,EAAM,MAAM,UAAY,KAAKA,EAAM,KAAK,IAAI,GAC5CA,EAAM,MAAM,UAAWC,EAAM,KAAK,GAAGG,CAAM,KAAKP,EAAYG,EAAM,CAAC,CAAC,EAAE,GACtEA,EAAM,MAAM,UAAWC,EAAM,KAAK,GAAGM,CAAM,KAAKV,EAAYG,EAAM,CAAC,CAAC,EAAE,GACtEA,EAAM,MAAM,UAAWC,EAAM,KAAK,UAAUJ,EAAYG,EAAM,CAAC,CAAC,EAAE,GAC/DC;AACT;AAOO,SAASO,EACdL,GACAM,GACU;AACV,MAAIN,EAAO,WAAW,EAAG,QAAO,CAAA;AAChC,QAAM,CAACE,CAAK,IAAIF;AAIhB,MACEE,EAAM,UAAU,WACfA,EAAM,SAASA,EAAM,OAAO,UAC7BA,EAAM,MAAM,UACZA,EAAM,MAAM;AAEZ,WAAON,EAASM,CAAK;AAIvB,MAAI,OAAOA,EAAM,QAAS,YAAYA,EAAM,KAAK,SAAS;AACxD,WAAOA,EAAM,KAAK,MAAM,MAAM,EAAE,OAAO,OAAO;AAGhD,QAAMD,IAASK,GAAQ,UAAU,KAC3BF,IAASE,GAAQ,UAAU;AACjC,SAAON,EAAO,SAAS,IACnBD,EAAaC,GAAQC,CAAM,IAC3BE,EAAeD,GAAOD,GAAQG,CAAM;AAC1C;"}

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

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

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

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

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

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