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

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

@@ -0,0 +1,258 @@
+/**
+ * Type definitions for Chromatogram component
+ */
+/**
+ * Data series for chromatogram visualization
+ */
+export interface ChromatogramSeries {
+    /** Retention time values (x-axis) */
+    x: number[];
+    /** Signal intensity values (y-axis) */
+    y: number[];
+    /** Series label for legend */
+    name: string;
+    /** Optional color override (auto-assigned from CHART_COLORS if not provided) */
+    color?: string;
+    /** Optional metadata for the trace (displayed in tooltip on hover) */
+    metadata?: Record<string, unknown>;
+}
+/**
+ * Individual boundary marker type for a single boundary point
+ */
+export type BoundaryMarkerType = "none" | "triangle" | "diamond";
+/**
+ * Internal computed fields for peak annotations.
+ * These are populated by the component during processing.
+ * @internal
+ */
+export interface PeakComputedFields {
+    /** Peak area calculated using trapezoidal integration */
+    area?: number;
+    /** Peak index in the data array */
+    index?: number;
+    /** Start index of peak boundary in the data array */
+    startIndex?: number;
+    /** End index of peak boundary in the data array */
+    endIndex?: number;
+    /** Peak width at half maximum */
+    widthAtHalfMax?: number;
+}
+/**
+ * Peak annotation for labeling peaks on the chromatogram.
+ * Used for both user-provided annotations and auto-detected peaks.
+ */
+export interface PeakAnnotation {
+    /**
+     * Stable identifier used for selection (selectedPeakIds).
+     * Auto-generated by the component if omitted:
+     * - User annotations: "user-ann-{index}"
+     * - Auto-detected peaks: "peak-{seriesIndex}-{peakIndex}"
+     */
+    id?: string;
+    /** Retention time of the peak (x-axis position) */
+    x: number;
+    /** Signal intensity at peak (y-axis position) */
+    y: number;
+    /** Label text (e.g., compound name). If not provided, auto-generated from computed area. */
+    text?: string;
+    /** Vertical arrow offset in pixels (negative = above peak, default: -30) */
+    ay?: number;
+    /** Horizontal arrow offset in pixels (default: 0) */
+    ax?: number;
+    /** Start retention time for peak boundary */
+    startX?: number;
+    /** End retention time for peak boundary */
+    endX?: number;
+    /** Marker style for start boundary (default: "triangle") */
+    startMarker?: BoundaryMarkerType;
+    /** Marker style for end boundary (default: "diamond") */
+    endMarker?: BoundaryMarkerType;
+    /**
+     * Optional per-peak color override. When set, overrides the default
+     * series-color / grey for the annotation label, arrow, border, and boundary markers.
+     */
+    color?: string;
+    /**
+     * When true, overlay a thickened line along the underlying trace between startX and endX.
+     * Requires startX/endX. Uses peak.color if set, otherwise series color.
+     */
+    regionOverlay?: boolean;
+    /** Line width for the region overlay (default: 3.5) */
+    regionOverlayWidth?: number;
+    /**
+     * Plotly hovertemplate HTML string used by the region overlay and the invisible
+     * hit-area marker for this peak. Falls back to a default summary when omitted.
+     */
+    hoverText?: string;
+    /**
+     * Internal computed fields populated by the component.
+     * @internal Do not set these directly - they are computed from startX/endX or auto-detection.
+     */
+    _computed?: PeakComputedFields;
+}
+/**
+ * Payload delivered to onPeakClick and onPeakHover callbacks.
+ */
+export interface PeakSelectEvent {
+    /** The resolved peak ID (matches id field on PeakAnnotation) */
+    id: string;
+    /** The annotation object for this peak */
+    peak: PeakAnnotation;
+    /** Index of the series this peak belongs to (0-based; -1 for legacy user annotations) */
+    seriesIndex: number;
+    /** Display name of the series */
+    seriesName: string;
+    /** True when the peak was found by automatic peak detection, false for user-provided annotations */
+    isAutoDetected: boolean;
+}
+/**
+ * Visual overrides for the selected / unselected / hover states.
+ * All fields are optional — defaults are applied for any omitted field.
+ *
+ * Defaults:
+ *   selected.borderColor      "#3b82f6"
+ *   selected.backgroundColor  "#dbeafe"
+ *   selected.bold             true
+ *   unselected.opacity        0.4  (applied when any other peak is selected)
+ *   hoverLineWidthMultiplier  1.67 (1.5 px → ~2.5 px)
+ */
+export interface PeakSelectionAppearance {
+    selected?: {
+        borderColor?: string;
+        backgroundColor?: string;
+        /** Wrap annotation text in <b> tags when selected */
+        bold?: boolean;
+    };
+    unselected?: {
+        /** Opacity of annotations whose peak is NOT selected while another peak IS selected (0–1) */
+        opacity?: number;
+    };
+    /** Multiplier applied to the base line width (1.5 px) on peak hover */
+    hoverLineWidthMultiplier?: number;
+}
+/**
+ * Baseline correction method
+ */
+export type BaselineCorrectionMethod = "none" | "linear" | "rolling";
+/**
+ * Global boundary marker style setting
+ * - "none": No boundary markers displayed
+ * - "enabled": Show boundary markers using per-peak settings (startMarker/endMarker) or defaults
+ */
+export type BoundaryMarkerStyle = "none" | "enabled";
+/**
+ * Peak detection algorithm options
+ */
+export interface PeakDetectionOptions {
+    /** Minimum peak height threshold (absolute or relative to max, default: 0.05) */
+    minHeight?: number;
+    /** Minimum distance between peaks in data points (default: 5) */
+    minDistance?: number;
+    /** Prominence threshold - how much a peak stands out from neighbors (default: 0.02) */
+    prominence?: number;
+    /** Use relative threshold as percentage of max signal (default: true) */
+    relativeThreshold?: boolean;
+}
+/**
+ * Props for Chromatogram component
+ */
+export interface ChromatogramProps {
+    /** Array of data series to display */
+    series: ChromatogramSeries[];
+    /** Chart width in pixels */
+    width?: number;
+    /** Chart height in pixels */
+    height?: number;
+    /** Chart title */
+    title?: string;
+    /** X-axis label */
+    xAxisTitle?: string;
+    /** Y-axis label */
+    yAxisTitle?: string;
+    /** Peak annotations to display */
+    annotations?: PeakAnnotation[];
+    /** Fixed x-axis range [min, max] */
+    xRange?: [number, number];
+    /** Fixed y-axis range [min, max] */
+    yRange?: [number, number];
+    /** Show legend (default: true) */
+    showLegend?: boolean;
+    /** Show vertical grid lines (default: true) */
+    showGridX?: boolean;
+    /** Show horizontal grid lines (default: true) */
+    showGridY?: boolean;
+    /** Show data point markers (default: false) */
+    showMarkers?: boolean;
+    /** Marker size when showMarkers is true (default: 4) */
+    markerSize?: number;
+    /** Show crosshairs on hover (default: false) */
+    showCrosshairs?: boolean;
+    /** Baseline correction method (default: "none") */
+    baselineCorrection?: BaselineCorrectionMethod;
+    /** Rolling baseline window size (default: 50) */
+    baselineWindowSize?: number;
+    /** Peak detection algorithm options - if provided, enables automatic peak detection */
+    peakDetectionOptions?: PeakDetectionOptions;
+    /** Show peak areas as annotations (default: false) */
+    showPeakAreas?: boolean;
+    /**
+     * Show peak boundary markers (default: "none").
+     * - "none": No boundary markers displayed
+     * - "enabled": Show boundary markers using per-peak startMarker/endMarker settings
+     *
+     * Per-peak marker defaults: startMarker="triangle", endMarker="diamond"
+     */
+    boundaryMarkers?: BoundaryMarkerStyle;
+    /**
+     * Retention time threshold for grouping overlapping annotations (default: 0.4 minutes).
+     * Peaks closer than this threshold will have their annotations staggered to avoid overlap.
+     */
+    annotationOverlapThreshold?: number;
+    /** Show export button in modebar (default: true) */
+    showExportButton?: boolean;
+    /**
+     * IDs of peaks that should render in the "selected" visual state.
+     * Fully controlled — the component owns no selection state of its own.
+     * IDs match the id field on PeakAnnotation (user-provided) or the
+     * auto-generated IDs for auto-detected peaks ("peak-{seriesIndex}-{peakIndex}").
+     */
+    selectedPeakIds?: string[];
+    /**
+     * Called when the user clicks on a peak annotation or its invisible hit target.
+     * The consumer decides whether to add/remove the id from selectedPeakIds
+     * (toggle vs. replace behaviour is the consumer's responsibility).
+     */
+    onPeakClick?: (event: PeakSelectEvent) => void;
+    /**
+     * Called when the cursor enters or leaves a peak hit target.
+     * Receives null on unhover. As a side-effect, the series line for the
+     * hovered peak thickens by selectionAppearance.hoverLineWidthMultiplier.
+     */
+    onPeakHover?: (event: PeakSelectEvent | null) => void;
+    /**
+     * Override the default visual behaviour for selected / unselected / hover states.
+     * All sub-fields are optional — defaults are applied for any omitted value.
+     * Only has a visual effect when selectedPeakIds or onPeakClick/onPeakHover are used.
+     */
+    selectionAppearance?: PeakSelectionAppearance;
+    /**
+     * Annotation label style (default: "arrow").
+     * - "arrow" — arrowhead pointing to the peak with a floating label box
+     * - "inline" — no arrow; label sits 4 px above the actual trace Y value
+     */
+    annotationStyle?: "arrow" | "inline";
+    /** Title font size in pixels (default: 20) */
+    titleFontSize?: number;
+    /**
+     * Top margin override when a title is shown (default: from
+     * CHROMATOGRAM_LAYOUT.MARGIN_TOP_WITH_TITLE).
+     */
+    titleTopMargin?: number;
+}
+/**
+ * Metadata for a peak annotation with its series index.
+ */
+export type PeakWithMeta = {
+    peak: PeakAnnotation;
+    seriesIndex: number;
+};

package/dist/components/charts/Electropherogram/Electropherogram.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),n=require("react"),$=require("../ChartTooltip/ChartTooltip.cjs"),E=require("../plotly-loader.cjs"),w=require("../../../hooks/use-plotly-theme.cjs"),b=require("../../../utils/colors.cjs");;/* empty css                        */const D=75,I=1.05,V=e=>{if(e.base!==void 0)return e.base;const a={A:e.peakA,T:e.peakT,G:e.peakG,C:e.peakC},m=Object.values(a);if(m.every(c=>c===m[0]))return"";let h="",f=0;return Object.entries(a).forEach(([c,g])=>{g>f&&(h=c,f=g)}),h},z=({data:e=[],width:a=900,height:m=600,positionInterval:y=10,colorA:h=b.CHART_COLORS[0],colorT:f=b.CHART_COLORS[2],colorG:c=b.CHART_COLORS[3],colorC:g=b.CHART_COLORS[1]})=>{const d=n.useRef(null),T=w.usePlotlyTheme(),{bindTooltip:O,tooltipElement:H}=$.useChartTooltip({xLabel:"Position",yLabel:"Intensity"}),s=n.useMemo(()=>e.map(t=>t.position),[e]),F=n.useMemo(()=>e.map(t=>V(t)),[e]),M=n.useMemo(()=>e.map(t=>t.peakA),[e]),P=n.useMemo(()=>e.map(t=>t.peakT),[e]),v=n.useMemo(()=>e.map(t=>t.peakG),[e]),C=n.useMemo(()=>e.map(t=>t.peakC),[e]),R=n.useMemo(()=>({x:s,y:M,type:"scatter",mode:"lines",hoverinfo:"none",name:"A",line:{color:h,width:2,shape:"spline"}}),[s,M,h]),_=n.useMemo(()=>({x:s,y:P,type:"scatter",mode:"lines",hoverinfo:"none",name:"T",line:{color:f,width:2,shape:"spline"}}),[s,P,f]),j=n.useMemo(()=>({x:s,y:v,type:"scatter",mode:"lines",hoverinfo:"none",name:"G",line:{color:c,width:2,shape:"spline"}}),[s,v,c]),A=n.useMemo(()=>({x:s,y:C,type:"scatter",mode:"lines",hoverinfo:"none",name:"C",line:{color:g,width:2,shape:"spline"}}),[s,C,g]),L=n.useMemo(()=>Math.max(...M,...P,...v,...C),[M,P,v,C]);if(n.useEffect(()=>{if(!d.current||e.length===0)return;const t=[R,_,j,A],k={width:a,height:m-D,margin:{l:0,r:0,b:20,t:10,pad:0},paper_bgcolor:T.paperBg,plot_bgcolor:T.plotBg,font:{family:w.CHART_FONT_FAMILY},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,L*I],fixedrange:!0}},i={responsive:!0,displayModeBar:!1,displaylogo:!1,fillFrame:!0};let p=!1,u=null;return E.loadPlotly().then(r=>{p||!d.current||(r.newPlot(d.current,t,k,i),O(d.current),u=d.current)}),()=>{p=!0,u&&E.getLoadedPlotly().purge(u)}},[e,a,m,R,_,j,A,L,s,T,O]),e.length===0)return l.jsx("div",{className:"chart-container",children:"No data available"});const G=()=>{const t=()=>{const i=Math.min(...s),p=Math.max(...s),u=a;return l.jsx("div",{className:"sequence-letters-container",children:F.map((r,x)=>{const o=s[x],q=r==="A"?h:r==="T"?f:r==="G"?c:r==="C"?g:T.textColor,N=p-i||1,B=(o-i)/N*u;return l.jsx("span",{className:"sequence-letter",style:{left:`${B}px`,color:q},children:r},`base-${x}`)})})},k=()=>{const i=Math.min(...s),p=Math.max(...s),u=a,r=Math.ceil(i/y)*y,x=[];for(let o=r;o<=p;o+=y)x.push({position:o,label:o.toString()});return l.jsx("div",{className:"position-numbers-container",children:x.map(o=>{const q=p-i||1,S=(o.position-i)/q*u;return l.jsx("span",{className:"position-number",style:{left:`${S}px`},children:o.label},`pos-${o.position}`)})})};return l.jsxs("div",{className:"sequence-header",children:[t(),k()]})};return l.jsxs("div",{className:"electropherogram-container relative",style:{width:a,height:m},children:[G(),l.jsx("div",{className:"electropherogram-chart",children:l.jsx("div",{ref:d,style:{width:"100%",height:"100%"}})}),H]})};exports.Electropherogram=z;
+//# sourceMappingURL=Electropherogram.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Electropherogram.cjs","sources":["../../../../src/components/charts/Electropherogram/Electropherogram.tsx"],"sourcesContent":["import React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { useChartTooltip } from \"../ChartTooltip\";\nimport { getLoadedPlotly, loadPlotly } from \"../plotly-loader\";\n\nimport type Plotly from \"plotly.js-dist\";\n\nimport { CHART_FONT_FAMILY, usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport { CHART_COLORS } from \"@/utils/colors\";\nimport \"./Electropherogram.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 ElectropherogramProps {\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  if (item.base !== undefined) return item.base;\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 Electropherogram: React.FC<ElectropherogramProps> = ({\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: CHART_FONT_FAMILY,\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 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(plotRef.current, plotData, layout, config);\n      bindTooltip(plotRef.current);\n\n      // Capture ref value for cleanup\n      plotElement = plotRef.current;\n    });\n\n    return () => {\n      cancelled = true;\n      if (plotElement) {\n        getLoadedPlotly().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 span = maxPosition - minPosition || 1;\n            const percentage = (position - minPosition) / span;\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 span = maxPosition - minPosition || 1;\n            const percentage = (label.position - minPosition) / span;\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=\"electropherogram-container relative\" style={{ width, height }}>\n      {renderSequence()}\n      <div className=\"electropherogram-chart\">\n        <div ref={plotRef} style={{ width: \"100%\", height: \"100%\" }} />\n      </div>\n      {tooltipElement}\n    </div>\n  );\n};\n\nexport { Electropherogram };\nexport type { PeakData, ElectropherogramProps };\n"],"names":["PLOT_HEIGHT_OFFSET","Y_AXIS_PADDING_FACTOR","determineBase","item","peakValues","values","val","highestBase","highestValue","base","value","Electropherogram","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","CHART_FONT_FAMILY","config","cancelled","plotElement","loadPlotly","plotly","getLoadedPlotly","jsx","renderSequence","renderSequenceLetters","minPosition","maxPosition","chartWidth","index","position","color","span","leftPosition","renderPositionNumbers","startPos","regularPositionLabels","pos","label","jsxs"],"mappings":"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"}

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

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+interface PeakData {
+    position: number;
+    base?: string;
+    peakA: number;
+    peakT: number;
+    peakG: number;
+    peakC: number;
+}
+interface ElectropherogramProps {
+    data?: PeakData[];
+    width?: number;
+    height?: number;
+    positionInterval?: number;
+    colorA?: string;
+    colorT?: string;
+    colorG?: string;
+    colorC?: string;
+}
+declare const Electropherogram: React.FC<ElectropherogramProps>;
+export { Electropherogram };
+export type { PeakData, ElectropherogramProps };

package/dist/components/charts/Electropherogram/Electropherogram.js

@@ -0,0 +1,180 @@
+import { jsx as m, jsxs as F } from "react/jsx-runtime";
+import { useRef as j, useMemo as o, useEffect as H } from "react";
+import { useChartTooltip as $ } from "../ChartTooltip/ChartTooltip.js";
+import { loadPlotly as D, getLoadedPlotly as I } from "../plotly-loader.js";
+import { usePlotlyTheme as V, CHART_FONT_FAMILY as z } from "../../../hooks/use-plotly-theme.js";
+import { CHART_COLORS as N } from "../../../utils/colors.js";
+/* empty css                      */
+const W = 75, Y = 1.05, X = (e) => {
+  if (e.base !== void 0) return e.base;
+  const l = {
+    A: e.peakA,
+    T: e.peakT,
+    G: e.peakG,
+    C: e.peakC
+  }, h = Object.values(l);
+  if (h.every((i) => i === h[0]))
+    return "";
+  let u = "", f = 0;
+  return Object.entries(l).forEach(([i, d]) => {
+    d > f && (u = i, f = d);
+  }), u;
+}, oe = ({
+  data: e = [],
+  width: l = 900,
+  height: h = 600,
+  positionInterval: x = 10,
+  colorA: u = N[0],
+  // blue
+  colorT: f = N[2],
+  // teal/green
+  colorG: i = N[3],
+  // red
+  colorC: d = N[1]
+  // orange
+}) => {
+  const g = j(null), T = V(), { bindTooltip: C, tooltipElement: G } = $({
+    xLabel: "Position",
+    yLabel: "Intensity"
+  }), n = o(() => e.map((t) => t.position), [e]), R = o(() => e.map((t) => X(t)), [e]), v = o(() => e.map((t) => t.peakA), [e]), P = o(() => e.map((t) => t.peakT), [e]), k = o(() => e.map((t) => t.peakG), [e]), b = o(() => e.map((t) => t.peakC), [e]), _ = o(
+    () => ({
+      x: n,
+      y: v,
+      type: "scatter",
+      mode: "lines",
+      hoverinfo: "none",
+      name: "A",
+      line: { color: u, width: 2, shape: "spline" }
+    }),
+    [n, v, u]
+  ), q = o(
+    () => ({
+      x: n,
+      y: P,
+      type: "scatter",
+      mode: "lines",
+      hoverinfo: "none",
+      name: "T",
+      line: { color: f, width: 2, shape: "spline" }
+    }),
+    [n, P, f]
+  ), w = o(
+    () => ({
+      x: n,
+      y: k,
+      type: "scatter",
+      mode: "lines",
+      hoverinfo: "none",
+      name: "G",
+      line: { color: i, width: 2, shape: "spline" }
+    }),
+    [n, k, i]
+  ), E = o(
+    () => ({
+      x: n,
+      y: b,
+      type: "scatter",
+      mode: "lines",
+      hoverinfo: "none",
+      name: "C",
+      line: { color: d, width: 2, shape: "spline" }
+    }),
+    [n, b, d]
+  ), L = o(
+    () => Math.max(...v, ...P, ...k, ...b),
+    [v, P, k, b]
+  );
+  return H(() => {
+    if (!g.current || e.length === 0) return;
+    const t = [_, q, w, E], M = {
+      width: l,
+      height: h - W,
+      margin: { l: 0, r: 0, b: 20, t: 10, pad: 0 },
+      paper_bgcolor: T.paperBg,
+      plot_bgcolor: T.plotBg,
+      font: {
+        family: z
+      },
+      showlegend: !1,
+      xaxis: {
+        showgrid: !1,
+        zeroline: !1,
+        showticklabels: !1,
+        showline: !1,
+        range: [Math.min(...n), Math.max(...n)],
+        fixedrange: !0
+      },
+      yaxis: {
+        showgrid: !1,
+        zeroline: !1,
+        showticklabels: !1,
+        showline: !1,
+        range: [0, L * Y],
+        fixedrange: !0
+      }
+    }, a = {
+      responsive: !0,
+      displayModeBar: !1,
+      displaylogo: !1,
+      fillFrame: !0
+    };
+    let c = !1, p = null;
+    return D().then((r) => {
+      c || !g.current || (r.newPlot(g.current, t, M, a), C(g.current), p = g.current);
+    }), () => {
+      c = !0, p && I().purge(p);
+    };
+  }, [e, l, h, _, q, w, E, L, n, T, C]), e.length === 0 ? /* @__PURE__ */ m("div", { className: "chart-container", children: "No data available" }) : /* @__PURE__ */ F("div", { className: "electropherogram-container relative", style: { width: l, height: h }, children: [
+    (() => {
+      const t = () => {
+        const a = Math.min(...n), c = Math.max(...n), p = l;
+        return /* @__PURE__ */ m("div", { className: "sequence-letters-container", children: R.map((r, y) => {
+          const s = n[y], A = r === "A" ? u : r === "T" ? f : r === "G" ? i : r === "C" ? d : T.textColor, O = c - a || 1, B = (s - a) / O * p;
+          return /* @__PURE__ */ m(
+            "span",
+            {
+              className: "sequence-letter",
+              style: {
+                left: `${B}px`,
+                color: A
+              },
+              children: r
+            },
+            `base-${y}`
+          );
+        }) });
+      }, M = () => {
+        const a = Math.min(...n), c = Math.max(...n), p = l, r = Math.ceil(a / x) * x, y = [];
+        for (let s = r; s <= c; s += x)
+          y.push({
+            position: s,
+            label: s.toString()
+          });
+        return /* @__PURE__ */ m("div", { className: "position-numbers-container", children: y.map((s) => {
+          const A = c - a || 1, S = (s.position - a) / A * p;
+          return /* @__PURE__ */ m(
+            "span",
+            {
+              className: "position-number",
+              style: {
+                left: `${S}px`
+              },
+              children: s.label
+            },
+            `pos-${s.position}`
+          );
+        }) });
+      };
+      return /* @__PURE__ */ F("div", { className: "sequence-header", children: [
+        t(),
+        M()
+      ] });
+    })(),
+    /* @__PURE__ */ m("div", { className: "electropherogram-chart", children: /* @__PURE__ */ m("div", { ref: g, style: { width: "100%", height: "100%" } }) }),
+    G
+  ] });
+};
+export {
+  oe as Electropherogram
+};
+//# sourceMappingURL=Electropherogram.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Electropherogram.js","sources":["../../../../src/components/charts/Electropherogram/Electropherogram.tsx"],"sourcesContent":["import React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { useChartTooltip } from \"../ChartTooltip\";\nimport { getLoadedPlotly, loadPlotly } from \"../plotly-loader\";\n\nimport type Plotly from \"plotly.js-dist\";\n\nimport { CHART_FONT_FAMILY, usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport { CHART_COLORS } from \"@/utils/colors\";\nimport \"./Electropherogram.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 ElectropherogramProps {\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  if (item.base !== undefined) return item.base;\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 Electropherogram: React.FC<ElectropherogramProps> = ({\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: CHART_FONT_FAMILY,\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 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(plotRef.current, plotData, layout, config);\n      bindTooltip(plotRef.current);\n\n      // Capture ref value for cleanup\n      plotElement = plotRef.current;\n    });\n\n    return () => {\n      cancelled = true;\n      if (plotElement) {\n        getLoadedPlotly().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 span = maxPosition - minPosition || 1;\n            const percentage = (position - minPosition) / span;\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 span = maxPosition - minPosition || 1;\n            const percentage = (label.position - minPosition) / span;\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=\"electropherogram-container relative\" style={{ width, height }}>\n      {renderSequence()}\n      <div className=\"electropherogram-chart\">\n        <div ref={plotRef} style={{ width: \"100%\", height: \"100%\" }} />\n      </div>\n      {tooltipElement}\n    </div>\n  );\n};\n\nexport { Electropherogram };\nexport type { PeakData, ElectropherogramProps };\n"],"names":["PLOT_HEIGHT_OFFSET","Y_AXIS_PADDING_FACTOR","determineBase","item","peakValues","values","val","highestBase","highestValue","base","value","Electropherogram","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","CHART_FONT_FAMILY","config","cancelled","plotElement","loadPlotly","plotly","getLoadedPlotly","jsx","jsxs","renderSequenceLetters","minPosition","maxPosition","chartWidth","index","position","color","span","leftPosition","renderPositionNumbers","startPos","regularPositionLabels","pos","label"],"mappings":";;;;;;;AAYA,MAAMA,IAAqB,IAErBC,IAAwB,MAsBxBC,IAAgB,CAACC,MAA2B;AAChD,MAAIA,EAAK,SAAS,OAAW,QAAOA,EAAK;AACzC,QAAMC,IAAa;AAAA,IACjB,GAAGD,EAAK;AAAA,IACR,GAAGA,EAAK;AAAA,IACR,GAAGA,EAAK;AAAA,IACR,GAAGA,EAAK;AAAA,EAAA,GAGJE,IAAS,OAAO,OAAOD,CAAU;AAGvC,MAFiBC,EAAO,MAAM,CAACC,MAAQA,MAAQD,EAAO,CAAC,CAAC;AAGtD,WAAO;AAGT,MAAIE,IAAc,IACdC,IAAe;AAEnB,gBAAO,QAAQJ,CAAU,EAAE,QAAQ,CAAC,CAACK,GAAMC,CAAK,MAAM;AACpD,IAAIA,IAAQF,MACVD,IAAcE,GACdD,IAAeE;AAAA,EAEnB,CAAC,GAEMH;AACT,GAEMI,KAAoD,CAAC;AAAA,EACzD,MAAAC,IAAO,CAAA;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,kBAAAC,IAAmB;AAAA,EACnB,QAAAC,IAASC,EAAa,CAAC;AAAA;AAAA,EACvB,QAAAC,IAASD,EAAa,CAAC;AAAA;AAAA,EACvB,QAAAE,IAASF,EAAa,CAAC;AAAA;AAAA,EACvB,QAAAG,IAASH,EAAa,CAAC;AAAA;AACzB,MAAM;AACJ,QAAMI,IAAUC,EAAuB,IAAI,GACrCC,IAAQC,EAAA,GACR,EAAE,aAAAC,GAAa,gBAAAC,EAAA,IAAmBC,EAAgB;AAAA,IACtD,QAAQ;AAAA,IACR,QAAQ;AAAA,EAAA,CACT,GAEKC,IAAYC,EAAQ,MAAMjB,EAAK,IAAI,CAACT,MAASA,EAAK,QAAQ,GAAG,CAACS,CAAI,CAAC,GACnEkB,IAAWD,EAAQ,MAAMjB,EAAK,IAAI,CAACT,MAASD,EAAcC,CAAI,CAAC,GAAG,CAACS,CAAI,CAAC,GACxEmB,IAAQF,EAAQ,MAAMjB,EAAK,IAAI,CAACT,MAASA,EAAK,KAAK,GAAG,CAACS,CAAI,CAAC,GAC5DoB,IAAQH,EAAQ,MAAMjB,EAAK,IAAI,CAACT,MAASA,EAAK,KAAK,GAAG,CAACS,CAAI,CAAC,GAC5DqB,IAAQJ,EAAQ,MAAMjB,EAAK,IAAI,CAACT,MAASA,EAAK,KAAK,GAAG,CAACS,CAAI,CAAC,GAC5DsB,IAAQL,EAAQ,MAAMjB,EAAK,IAAI,CAACT,MAASA,EAAK,KAAK,GAAG,CAACS,CAAI,CAAC,GAE5DuB,IAASN;AAAA,IACb,OAAO;AAAA,MACL,GAAGD;AAAA,MACH,GAAGG;AAAA,MACH,MAAM;AAAA,MACN,MAAM;AAAA,MACN,WAAW;AAAA,MACX,MAAM;AAAA,MACN,MAAM,EAAE,OAAOf,GAAQ,OAAO,GAAG,OAAO,SAAA;AAAA,IAAkB;AAAA,IAE5D,CAACY,GAAWG,GAAOf,CAAM;AAAA,EAAA,GAGrBoB,IAASP;AAAA,IACb,OAAO;AAAA,MACL,GAAGD;AAAA,MACH,GAAGI;AAAA,MACH,MAAM;AAAA,MACN,MAAM;AAAA,MACN,WAAW;AAAA,MACX,MAAM;AAAA,MACN,MAAM,EAAE,OAAOd,GAAQ,OAAO,GAAG,OAAO,SAAA;AAAA,IAAkB;AAAA,IAE5D,CAACU,GAAWI,GAAOd,CAAM;AAAA,EAAA,GAGrBmB,IAASR;AAAA,IACb,OAAO;AAAA,MACL,GAAGD;AAAA,MACH,GAAGK;AAAA,MACH,MAAM;AAAA,MACN,MAAM;AAAA,MACN,WAAW;AAAA,MACX,MAAM;AAAA,MACN,MAAM,EAAE,OAAOd,GAAQ,OAAO,GAAG,OAAO,SAAA;AAAA,IAAkB;AAAA,IAE5D,CAACS,GAAWK,GAAOd,CAAM;AAAA,EAAA,GAGrBmB,IAAST;AAAA,IACb,OAAO;AAAA,MACL,GAAGD;AAAA,MACH,GAAGM;AAAA,MACH,MAAM;AAAA,MACN,MAAM;AAAA,MACN,WAAW;AAAA,MACX,MAAM;AAAA,MACN,MAAM,EAAE,OAAOd,GAAQ,OAAO,GAAG,OAAO,SAAA;AAAA,IAAkB;AAAA,IAE5D,CAACQ,GAAWM,GAAOd,CAAM;AAAA,EAAA,GAGrBmB,IAAWV;AAAA,IACf,MAAM,KAAK,IAAI,GAAGE,GAAO,GAAGC,GAAO,GAAGC,GAAO,GAAGC,CAAK;AAAA,IACrD,CAACH,GAAOC,GAAOC,GAAOC,CAAK;AAAA,EAAA;AAgE7B,SA7DAM,EAAU,MAAM;AACd,QAAI,CAACnB,EAAQ,WAAWT,EAAK,WAAW,EAAG;AAE3C,UAAM6B,IAAW,CAACN,GAAQC,GAAQC,GAAQC,CAAM,GAE1CI,IAAiC;AAAA,MACrC,OAAA7B;AAAA,MACA,QAAQC,IAASd;AAAA,MACjB,QAAQ,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,KAAK,EAAA;AAAA,MACzC,eAAeuB,EAAM;AAAA,MACrB,cAAcA,EAAM;AAAA,MACpB,MAAM;AAAA,QACJ,QAAQoB;AAAA,MAAA;AAAA,MAEV,YAAY;AAAA,MACZ,OAAO;AAAA,QACL,UAAU;AAAA,QACV,UAAU;AAAA,QACV,gBAAgB;AAAA,QAChB,UAAU;AAAA,QACV,OAAO,CAAC,KAAK,IAAI,GAAGf,CAAS,GAAG,KAAK,IAAI,GAAGA,CAAS,CAAC;AAAA,QACtD,YAAY;AAAA,MAAA;AAAA,MAEd,OAAO;AAAA,QACL,UAAU;AAAA,QACV,UAAU;AAAA,QACV,gBAAgB;AAAA,QAChB,UAAU;AAAA,QACV,OAAO,CAAC,GAAGW,IAAWtC,CAAqB;AAAA,QAC3C,YAAY;AAAA,MAAA;AAAA,IACd,GAGI2C,IAAS;AAAA,MACb,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,aAAa;AAAA,MACb,WAAW;AAAA,IAAA;AAKb,QAAIC,IAAY,IACZC,IAAqC;AACzC,WAAKC,EAAA,EAAa,KAAK,CAACC,MAAW;AACjC,MAAIH,KAAa,CAACxB,EAAQ,YAC1B2B,EAAO,QAAQ3B,EAAQ,SAASoB,GAAUC,GAAQE,CAAM,GACxDnB,EAAYJ,EAAQ,OAAO,GAG3ByB,IAAczB,EAAQ;AAAA,IACxB,CAAC,GAEM,MAAM;AACX,MAAAwB,IAAY,IACRC,KACFG,EAAA,EAAkB,MAAMH,CAAW;AAAA,IAEvC;AAAA,EACF,GAAG,CAAClC,GAAMC,GAAOC,GAAQqB,GAAQC,GAAQC,GAAQC,GAAQC,GAAUX,GAAWL,GAAOE,CAAW,CAAC,GAE7Fb,EAAK,WAAW,IACX,gBAAAsC,EAAC,OAAA,EAAI,WAAU,mBAAkB,UAAA,qBAAiB,IA+FzD,gBAAAC,EAAC,SAAI,WAAU,uCAAsC,OAAO,EAAE,OAAAtC,GAAO,QAAAC,KAClE,UAAA;AAAA,KA7FkB,MAAM;AAC3B,YAAMsC,IAAwB,MAAM;AAClC,cAAMC,IAAc,KAAK,IAAI,GAAGzB,CAAS,GACnC0B,IAAc,KAAK,IAAI,GAAG1B,CAAS,GACnC2B,IAAa1C;AAEnB,eACE,gBAAAqC,EAAC,SAAI,WAAU,8BACZ,YAAS,IAAI,CAACzC,GAAM+C,MAAU;AAC7B,gBAAMC,IAAW7B,EAAU4B,CAAK,GAC1BE,IACJjD,MAAS,MACLO,IACAP,MAAS,MACTS,IACAT,MAAS,MACTU,IACAV,MAAS,MACTW,IACAG,EAAM,WAENoC,IAAOL,IAAcD,KAAe,GAEpCO,KADcH,IAAWJ,KAAeM,IACZJ;AAElC,iBACE,gBAAAL;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,MAAM,GAAGU,CAAY;AAAA,gBACrB,OAAAF;AAAA,cAAA;AAAA,cAGD,UAAAjD;AAAA,YAAA;AAAA,YAPI,QAAQ+C,CAAK;AAAA,UAAA;AAAA,QAUxB,CAAC,EAAA,CACH;AAAA,MAEJ,GAEMK,IAAwB,MAAM;AAClC,cAAMR,IAAc,KAAK,IAAI,GAAGzB,CAAS,GACnC0B,IAAc,KAAK,IAAI,GAAG1B,CAAS,GACnC2B,IAAa1C,GAEbiD,IACJ,KAAK,KAAKT,IAActC,CAAgB,IAAIA,GAExCgD,IACJ,CAAA;AAEF,iBAASC,IAAMF,GAAUE,KAAOV,GAAaU,KAAOjD;AAClD,UAAAgD,EAAsB,KAAK;AAAA,YACzB,UAAUC;AAAA,YACV,OAAOA,EAAI,SAAA;AAAA,UAAS,CACrB;AAGH,iCACG,OAAA,EAAI,WAAU,8BACZ,UAAAD,EAAsB,IAAI,CAACE,MAAU;AACpC,gBAAMN,IAAOL,IAAcD,KAAe,GAEpCO,KADcK,EAAM,WAAWZ,KAAeM,IAClBJ;AAElC,iBACE,gBAAAL;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,MAAM,GAAGU,CAAY;AAAA,cAAA;AAAA,cAGtB,UAAAK,EAAM;AAAA,YAAA;AAAA,YANF,OAAOA,EAAM,QAAQ;AAAA,UAAA;AAAA,QAShC,CAAC,EAAA,CACH;AAAA,MAEJ;AAEA,aACE,gBAAAd,EAAC,OAAA,EAAI,WAAU,mBACZ,UAAA;AAAA,QAAAC,EAAA;AAAA,QACAS,EAAA;AAAA,MAAsB,GACzB;AAAA,IAEJ,GAIK;AAAA,IACD,gBAAAX,EAAC,OAAA,EAAI,WAAU,0BACb,4BAAC,OAAA,EAAI,KAAK7B,GAAS,OAAO,EAAE,OAAO,QAAQ,QAAQ,OAAA,GAAU,GAC/D;AAAA,IACCK;AAAA,EAAA,GACH;AAEJ;"}

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

@@ -0,0 +1,2 @@
+export { Electropherogram } from './Electropherogram';
+export type { PeakData, ElectropherogramProps } from './Electropherogram';

package/dist/components/charts/Histogram/Histogram.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),D=require("plotly.js-dist"),c=require("react"),U=require("../ChartTooltip/ChartTooltip.cjs"),Y=require("../../../hooks/use-element-size.cjs"),$=require("../../../hooks/use-plotly-theme.cjs"),E=require("../../../lib/utils.cjs"),G=require("../../../utils/colors.cjs");;/* empty css                 */const J=-.5,K=r=>r.reduce((o,u)=>o+u,0)/r.length,Q=(r,l)=>{const u=r.map(i=>Math.pow(i-l,2)).reduce((i,h)=>i+h,0)/r.length;return Math.sqrt(u)},Z=(r,l,o,u,i=100)=>{const h=[],x=[],p=(u-o)/(i-1);for(let n=0;n<i;n++){const e=o+n*p;h.push(e);const M=J*Math.pow((e-r)/l,2),j=1/(l*Math.sqrt(2*Math.PI))*Math.exp(M);x.push(j)}return{x:h,y:x}},tt=(r,l,o)=>{const u=Math.ceil((o.end-o.start)/o.size),i=Array(u).fill(0);l.forEach(n=>{if(n>=o.start&&n<=o.end){const e=Math.floor((n-o.start)/o.size);i[e]++}});const h=Math.max(...i),x=Math.max(...r),p=h/x;return r.map(n=>n*p)},et=({dataSeries:r,width:l,height:o,title:u="Histogram",xTitle:i="X Axis",yTitle:h="Frequency",bargap:x=.2,showDistributionLine:p=!1})=>{const n=c.useRef(null),e=$.usePlotlyTheme(),{bindTooltip:M,tooltipElement:j}=U.useChartTooltip({xLabel:i,yLabel:h}),[T,L]=Y.useElementSize(),f=l??L.width,g=o??L.height,I=f>0&&g>0,W=l===void 0,N=o===void 0,b=c.useRef({width:f,height:g});b.current={width:f,height:g};const R=c.useRef(!1),C=c.useRef({width:0,height:0}),q=c.useMemo(()=>Array.isArray(r)?r:[r],[r]),P=c.useMemo(()=>q.length>1?"stack":void 0,[q.length]),z=G.CHART_COLORS,y=c.useMemo(()=>q.map((t,m)=>{const d=typeof t.showDistributionLine>"u"?p:t.showDistributionLine;return{...t,color:t.color||z[m%z.length],opacity:d?.5:t.opacity||1,showDistributionLine:d,lineWidth:t.lineWidth||3}}),[q,p,z]),k=e.gridColor,S=c.useMemo(()=>y.map(t=>({type:"histogram",x:t.x,name:t.name,marker:{color:t.color,line:{color:e.paperBg,width:1},opacity:t.opacity},autobinx:t.autobinx,xbins:t.xbins,hoverinfo:"none"})),[y,e]),A=c.useMemo(()=>y.filter(t=>t.showDistributionLine).map(t=>{const m=K(t.x),d=Q(t.x,m),v=Math.min(...t.x),a=Math.max(...t.x),w=a-v,F=v-w*.1,O=a+w*.1,V=t.xbins||{start:F,end:O,size:w/10},H=Z(m,d,F,O,100),X=tt(H.y,t.x,V);return{type:"scatter",x:H.x,y:X,mode:"lines",name:`${t.name} Distribution`,line:{color:t.color,width:t.lineWidth},hoverinfo:"none"}}),[y]),B=c.useMemo(()=>[...S,...A],[S,A]);c.useEffect(()=>{if(!n.current||!I)return;const t={width:b.current.width,height:b.current.height,font:{family:"Inter, sans-serif"},showlegend:!1,margin:{l:90,r:40,b:80,t:40},xaxis:{title:{text:i,font:{size:16,color:e.textSecondary,family:"Inter, sans-serif",weight:400},standoff:20},gridcolor:k,tickcolor:e.tickColor,ticklen:8,tickwidth:1,ticks:"outside",linecolor:e.lineColor,linewidth:1,zeroline:!1,automargin:!0},yaxis:{title:{text:h,font:{size:16,color:e.textSecondary,family:"Inter, sans-serif",weight:400},standoff:20},gridcolor:k,tickcolor:e.tickColor,ticklen:8,tickwidth:1,ticks:"outside",linecolor:e.lineColor,linewidth:1,zeroline:!1,rangemode:"tozero",automargin:!0},barmode:P,bargap:x,paper_bgcolor:e.paperBg,plot_bgcolor:e.plotBg},m={responsive:!1,displayModeBar:!1,displaylogo:!1};D.newPlot(n.current,B,t,m),M(n.current);const d=n.current;return R.current=!0,C.current={...b.current},()=>{d&&(D.purge(d),R.current=!1)}},[I,i,h,x,B,P,k,e,M]),c.useEffect(()=>{const t=n.current;!t||!R.current||f<=0||g<=0||C.current.width===f&&C.current.height===g||(C.current={width:f,height:g},D.relayout(t,{width:f,height:g}).catch(()=>{}))},[f,g]);const _=({series:t})=>{const m=t.map((a,w)=>s.jsx(c.Fragment,{children:s.jsxs("div",{className:"legend-item",children:[s.jsx("span",{className:"color-box",style:{background:a.color}}),a.name,w<t.length-1&&s.jsx("span",{className:"divider"})]})},a.name)),d=[],v=6;for(let a=0;a<m.length;a+=v)d.push(s.jsx("div",{className:"legend-row",children:m.slice(a,a+v)},a));return s.jsx("div",{className:"legend-container",children:d})};return s.jsxs("div",{className:E.cn("histogram-container relative",W&&"w-full",N&&"h-full"),style:l===void 0?void 0:{width:l},children:[s.jsxs("div",{className:E.cn("chart-container",N&&"flex h-full flex-col"),children:[u&&s.jsx("div",{className:"title-container",children:s.jsx("h2",{className:"title",children:u})}),s.jsx("div",{ref:T,className:E.cn(N&&"min-h-0 flex-1"),children:s.jsx("div",{ref:n,style:{width:"100%",height:"100%",margin:"0"}})}),s.jsx(_,{series:y})]}),j]})};exports.Histogram=et;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),l=require("react"),U=require("../ChartTooltip/ChartTooltip.cjs"),k=require("../plotly-loader.cjs"),$=require("../../../hooks/use-element-size.cjs"),R=require("../../../hooks/use-plotly-theme.cjs"),D=require("../../../lib/utils.cjs"),G=require("../../../utils/colors.cjs");;/* empty css                 */const J=-.5,K=r=>r.reduce((n,u)=>n+u,0)/r.length,Q=(r,a)=>{const u=r.map(c=>Math.pow(c-a,2)).reduce((c,h)=>c+h,0)/r.length;return Math.sqrt(u)},Z=(r,a,n,u,c=100)=>{const h=[],p=[],y=(u-n)/(c-1);for(let e=0;e<c;e++){const o=n+e*y;h.push(o);const M=J*Math.pow((o-r)/a,2),q=1/(a*Math.sqrt(2*Math.PI))*Math.exp(M);p.push(q)}return{x:h,y:p}},tt=(r,a,n)=>{const u=Math.ceil((n.end-n.start)/n.size),c=Array(u).fill(0);a.forEach(e=>{if(e>=n.start&&e<=n.end){const o=Math.floor((e-n.start)/n.size);c[o]++}});const h=Math.max(...c),p=Math.max(...r),y=h/p;return r.map(e=>e*y)},et=({dataSeries:r,width:a,height:n,title:u="Histogram",xTitle:c="X Axis",yTitle:h="Frequency",bargap:p=.2,showDistributionLine:y=!1})=>{const e=l.useRef(null),o=R.usePlotlyTheme(),{bindTooltip:M,tooltipElement:q}=U.useChartTooltip({xLabel:c,yLabel:h}),[B,F]=$.useElementSize(),g=a??F.width,x=n??F.height,_=g>0&&x>0,W=a===void 0,L=n===void 0,b=l.useRef({width:g,height:x});b.current={width:g,height:x};const j=l.useRef(!1),C=l.useRef({width:0,height:0}),N=l.useMemo(()=>Array.isArray(r)?r:[r],[r]),T=l.useMemo(()=>N.length>1?"stack":void 0,[N.length]),z=G.CHART_COLORS,v=l.useMemo(()=>N.map((t,m)=>{const d=typeof t.showDistributionLine>"u"?y:t.showDistributionLine;return{...t,color:t.color||z[m%z.length],opacity:d?.5:t.opacity||1,showDistributionLine:d,lineWidth:t.lineWidth||3}}),[N,y,z]),A=o.gridColor,E=l.useMemo(()=>v.map(t=>({type:"histogram",x:t.x,name:t.name,marker:{color:t.color,line:{color:o.paperBg,width:1},opacity:t.opacity},autobinx:t.autobinx,xbins:t.xbins,hoverinfo:"none"})),[v,o]),P=l.useMemo(()=>v.filter(t=>t.showDistributionLine).map(t=>{const m=K(t.x),d=Q(t.x,m),f=Math.min(...t.x),i=Math.max(...t.x),w=i-f,H=f-w*.1,I=i+w*.1,V=t.xbins||{start:H,end:I,size:w/10},S=Z(m,d,H,I,100),X=tt(S.y,t.x,V);return{type:"scatter",x:S.x,y:X,mode:"lines",name:`${t.name} Distribution`,line:{color:t.color,width:t.lineWidth},hoverinfo:"none"}}),[v]),O=l.useMemo(()=>[...E,...P],[E,P]);l.useEffect(()=>{if(!e.current||!_)return;const t={width:b.current.width,height:b.current.height,font:{family:R.CHART_FONT_FAMILY},showlegend:!1,margin:{l:90,r:40,b:80,t:40},xaxis:{title:{text:c,font:{size:16,color:o.textSecondary,family:R.CHART_FONT_FAMILY,weight:400},standoff:20},gridcolor:A,tickcolor:o.tickColor,ticklen:8,tickwidth:1,ticks:"outside",linecolor:o.lineColor,linewidth:1,zeroline:!1,automargin:!0},yaxis:{title:{text:h,font:{size:16,color:o.textSecondary,family:R.CHART_FONT_FAMILY,weight:400},standoff:20},gridcolor:A,tickcolor:o.tickColor,ticklen:8,tickwidth:1,ticks:"outside",linecolor:o.lineColor,linewidth:1,zeroline:!1,rangemode:"tozero",automargin:!0},barmode:T,bargap:p,paper_bgcolor:o.paperBg,plot_bgcolor:o.plotBg},m={responsive:!1,displayModeBar:!1,displaylogo:!1};let d=!1,f=null;return k.loadPlotly().then(i=>{d||!e.current||(i.newPlot(e.current,O,t,m),M(e.current),f=e.current,j.current=!0,C.current={...b.current})}),()=>{d=!0,f&&(k.getLoadedPlotly().purge(f),j.current=!1)}},[_,c,h,p,O,T,A,o,M]),l.useEffect(()=>{const t=e.current;!t||!j.current||g<=0||x<=0||C.current.width===g&&C.current.height===x||(C.current={width:g,height:x},k.getLoadedPlotly().relayout(t,{width:g,height:x}).catch(()=>{}))},[g,x]);const Y=({series:t})=>{const m=t.map((i,w)=>s.jsx(l.Fragment,{children:s.jsxs("div",{className:"legend-item",children:[s.jsx("span",{className:"color-box",style:{background:i.color}}),i.name,w<t.length-1&&s.jsx("span",{className:"divider"})]})},i.name)),d=[],f=6;for(let i=0;i<m.length;i+=f)d.push(s.jsx("div",{className:"legend-row",children:m.slice(i,i+f)},i));return s.jsx("div",{className:"legend-container",children:d})};return s.jsxs("div",{className:D.cn("histogram-container relative",W&&"w-full",L&&"h-full"),style:a===void 0?void 0:{width:a},children:[s.jsxs("div",{className:D.cn("chart-container",L&&"flex h-full flex-col"),children:[u&&s.jsx("div",{className:"title-container",children:s.jsx("h2",{className:"title",children:u})}),s.jsx("div",{ref:B,className:D.cn(L&&"min-h-0 flex-1"),children:s.jsx("div",{ref:e,style:{width:"100%",height:"100%",margin:"0"}})}),s.jsx(Y,{series:v})]}),q]})};exports.Histogram=et;
 //# sourceMappingURL=Histogram.cjs.map