@tetrascience-npm/tetrascience-react-ui 1.0.0-beta.147.1 → 1.0.0-beta.149.1

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../../../utils/colors.cjs"),v=3.5;function h(s,i,o){const l=o.color??c.CHART_COLORS[i%c.CHART_COLORS.length],n=[];for(const e of s){if(!e.regionOverlay)continue;const t=e._computed?.startIndex,r=e._computed?.endIndex;if(t===void 0||r===void 0)continue;const a=e.color??l,d=e.regionOverlayWidth??v,u=e.hoverText?{hovertemplate:`${e.hoverText}<extra></extra>`}:{hoverinfo:"skip"};n.push({x:o.x.slice(t,r+1),y:o.y.slice(t,r+1),type:"scatter",mode:"lines",line:{color:a,width:d},showlegend:!1,name:"",...u})}return n}exports.createRegionOverlayTraces=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../../../utils/colors.cjs"),v=3.5;function h(i,s,o){const l=o.color??c.CHART_COLORS[s%c.CHART_COLORS.length],r=[];for(const e of i){if(!e.regionOverlay)continue;const t=e._computed?.startIndex,n=e._computed?.endIndex;if(t===void 0||n===void 0)continue;const a=e.color??l,d=e.regionOverlayWidth??v,u=e.hoverText?{text:e.hoverText,hoverinfo:"none"}:{hoverinfo:"skip"};r.push({x:o.x.slice(t,n+1),y:o.y.slice(t,n+1),type:"scatter",mode:"lines",line:{color:a,width:d},showlegend:!1,name:"",...u})}return r}exports.createRegionOverlayTraces=h;
 //# sourceMappingURL=regionOverlays.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"regionOverlays.cjs","sources":["../../../../src/components/charts/Chromatogram/regionOverlays.ts"],"sourcesContent":["import { CHART_COLORS } from \"../../../utils/colors\";\n\nimport type { PeakAnnotation, ChromatogramSeries } from \"./types\";\nimport type Plotly from \"plotly.js-dist\";\n\nconst DEFAULT_REGION_OVERLAY_WIDTH = 3.5;\n\n/**\n * Build one scatter trace per peak that has regionOverlay:true, slicing the\n * underlying series data between the peak's startIndex and endIndex.\n * Traces are pushed BEFORE the invisible hit-area trace so peak click/hover\n * still resolves to the hit-area marker, not the overlay.\n */\nexport function createRegionOverlayTraces(\n  peaks: PeakAnnotation[],\n  seriesIndex: number,\n  series: ChromatogramSeries\n): Plotly.Data[] {\n  const seriesColor = series.color ?? CHART_COLORS[seriesIndex % CHART_COLORS.length];\n  const traces: Plotly.Data[] = [];\n\n  for (const peak of peaks) {\n    if (!peak.regionOverlay) continue;\n    const startIdx = peak._computed?.startIndex;\n    const endIdx = peak._computed?.endIndex;\n    if (startIdx === undefined || endIdx === undefined) continue;\n\n    const color = peak.color ?? seriesColor;\n    const lineWidth = peak.regionOverlayWidth ?? DEFAULT_REGION_OVERLAY_WIDTH;\n    const hoverProps = peak.hoverText\n      ? { hovertemplate: `${peak.hoverText}<extra></extra>` }\n      : { hoverinfo: \"skip\" as const };\n\n    traces.push({\n      x: series.x.slice(startIdx, endIdx + 1),\n      y: series.y.slice(startIdx, endIdx + 1),\n      type: \"scatter\" as const,\n      mode: \"lines\" as const,\n      line: { color, width: lineWidth },\n      showlegend: false,\n      name: \"\",\n      ...hoverProps,\n    });\n  }\n\n  return traces;\n}\n"],"names":["DEFAULT_REGION_OVERLAY_WIDTH","createRegionOverlayTraces","peaks","seriesIndex","series","seriesColor","CHART_COLORS","traces","peak","startIdx","endIdx","color","lineWidth","hoverProps"],"mappings":"6HAKMA,EAA+B,IAQ9B,SAASC,EACdC,EACAC,EACAC,EACe,CACf,MAAMC,EAAcD,EAAO,OAASE,EAAAA,aAAaH,EAAcG,EAAAA,aAAa,MAAM,EAC5EC,EAAwB,CAAA,EAE9B,UAAWC,KAAQN,EAAO,CACxB,GAAI,CAACM,EAAK,cAAe,SACzB,MAAMC,EAAWD,EAAK,WAAW,WAC3BE,EAASF,EAAK,WAAW,SAC/B,GAAIC,IAAa,QAAaC,IAAW,OAAW,SAEpD,MAAMC,EAAQH,EAAK,OAASH,EACtBO,EAAYJ,EAAK,oBAAsBR,EACvCa,EAAaL,EAAK,UACpB,CAAE,cAAe,GAAGA,EAAK,SAAS,iBAAA,EAClC,CAAE,UAAW,MAAA,EAEjBD,EAAO,KAAK,CACV,EAAGH,EAAO,EAAE,MAAMK,EAAUC,EAAS,CAAC,EACtC,EAAGN,EAAO,EAAE,MAAMK,EAAUC,EAAS,CAAC,EACtC,KAAM,UACN,KAAM,QACN,KAAM,CAAE,MAAAC,EAAO,MAAOC,CAAA,EACtB,WAAY,GACZ,KAAM,GACN,GAAGC,CAAA,CACJ,CACH,CAEA,OAAON,CACT"}
+{"version":3,"file":"regionOverlays.cjs","sources":["../../../../src/components/charts/Chromatogram/regionOverlays.ts"],"sourcesContent":["import { CHART_COLORS } from \"../../../utils/colors\";\n\nimport type { PeakAnnotation, ChromatogramSeries } from \"./types\";\nimport type Plotly from \"plotly.js-dist\";\n\nconst DEFAULT_REGION_OVERLAY_WIDTH = 3.5;\n\n/**\n * Build one scatter trace per peak that has regionOverlay:true, slicing the\n * underlying series data between the peak's startIndex and endIndex.\n * Traces are pushed BEFORE the invisible hit-area trace so peak click/hover\n * still resolves to the hit-area marker, not the overlay.\n */\nexport function createRegionOverlayTraces(\n  peaks: PeakAnnotation[],\n  seriesIndex: number,\n  series: ChromatogramSeries\n): Plotly.Data[] {\n  const seriesColor = series.color ?? CHART_COLORS[seriesIndex % CHART_COLORS.length];\n  const traces: Plotly.Data[] = [];\n\n  for (const peak of peaks) {\n    if (!peak.regionOverlay) continue;\n    const startIdx = peak._computed?.startIndex;\n    const endIdx = peak._computed?.endIndex;\n    if (startIdx === undefined || endIdx === undefined) continue;\n\n    const color = peak.color ?? seriesColor;\n    const lineWidth = peak.regionOverlayWidth ?? DEFAULT_REGION_OVERLAY_WIDTH;\n    // Overlays with hoverText feed the shared ChartTooltip through `text`\n    // (Plotly's own label stays off — SW-2298); the rest are decorative.\n    const hoverProps = peak.hoverText\n      ? { text: peak.hoverText, hoverinfo: \"none\" as const }\n      : { hoverinfo: \"skip\" as const };\n\n    traces.push({\n      x: series.x.slice(startIdx, endIdx + 1),\n      y: series.y.slice(startIdx, endIdx + 1),\n      type: \"scatter\" as const,\n      mode: \"lines\" as const,\n      line: { color, width: lineWidth },\n      showlegend: false,\n      name: \"\",\n      ...hoverProps,\n    });\n  }\n\n  return traces;\n}\n"],"names":["DEFAULT_REGION_OVERLAY_WIDTH","createRegionOverlayTraces","peaks","seriesIndex","series","seriesColor","CHART_COLORS","traces","peak","startIdx","endIdx","color","lineWidth","hoverProps"],"mappings":"6HAKMA,EAA+B,IAQ9B,SAASC,EACdC,EACAC,EACAC,EACe,CACf,MAAMC,EAAcD,EAAO,OAASE,EAAAA,aAAaH,EAAcG,EAAAA,aAAa,MAAM,EAC5EC,EAAwB,CAAA,EAE9B,UAAWC,KAAQN,EAAO,CACxB,GAAI,CAACM,EAAK,cAAe,SACzB,MAAMC,EAAWD,EAAK,WAAW,WAC3BE,EAASF,EAAK,WAAW,SAC/B,GAAIC,IAAa,QAAaC,IAAW,OAAW,SAEpD,MAAMC,EAAQH,EAAK,OAASH,EACtBO,EAAYJ,EAAK,oBAAsBR,EAGvCa,EAAaL,EAAK,UACpB,CAAE,KAAMA,EAAK,UAAW,UAAW,MAAA,EACnC,CAAE,UAAW,MAAA,EAEjBD,EAAO,KAAK,CACV,EAAGH,EAAO,EAAE,MAAMK,EAAUC,EAAS,CAAC,EACtC,EAAGN,EAAO,EAAE,MAAMK,EAAUC,EAAS,CAAC,EACtC,KAAM,UACN,KAAM,QACN,KAAM,CAAE,MAAAC,EAAO,MAAOC,CAAA,EACtB,WAAY,GACZ,KAAM,GACN,GAAGC,CAAA,CACJ,CACH,CAEA,OAAON,CACT"}

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

@@ -1,18 +1,18 @@
 import { CHART_COLORS as c } from "../../../utils/colors.js";
-const x = 3.5;
-function v(i, s, o) {
-  const l = o.color ?? c[s % c.length], r = [];
-  for (const e of i) {
-    if (!e.regionOverlay) continue;
-    const t = e._computed?.startIndex, n = e._computed?.endIndex;
+const v = 3.5;
+function f(i, s, e) {
+  const d = e.color ?? c[s % c.length], r = [];
+  for (const o of i) {
+    if (!o.regionOverlay) continue;
+    const t = o._computed?.startIndex, n = o._computed?.endIndex;
     if (t === void 0 || n === void 0) continue;
-    const a = e.color ?? l, d = e.regionOverlayWidth ?? x, h = e.hoverText ? { hovertemplate: `${e.hoverText}<extra></extra>` } : { hoverinfo: "skip" };
+    const l = o.color ?? d, a = o.regionOverlayWidth ?? v, h = o.hoverText ? { text: o.hoverText, hoverinfo: "none" } : { hoverinfo: "skip" };
     r.push({
-      x: o.x.slice(t, n + 1),
-      y: o.y.slice(t, n + 1),
+      x: e.x.slice(t, n + 1),
+      y: e.y.slice(t, n + 1),
       type: "scatter",
       mode: "lines",
-      line: { color: a, width: d },
+      line: { color: l, width: a },
       showlegend: !1,
       name: "",
       ...h
@@ -21,6 +21,6 @@ function v(i, s, o) {
   return r;
 }
 export {
-  v as createRegionOverlayTraces
+  f as createRegionOverlayTraces
 };
 //# sourceMappingURL=regionOverlays.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"regionOverlays.js","sources":["../../../../src/components/charts/Chromatogram/regionOverlays.ts"],"sourcesContent":["import { CHART_COLORS } from \"../../../utils/colors\";\n\nimport type { PeakAnnotation, ChromatogramSeries } from \"./types\";\nimport type Plotly from \"plotly.js-dist\";\n\nconst DEFAULT_REGION_OVERLAY_WIDTH = 3.5;\n\n/**\n * Build one scatter trace per peak that has regionOverlay:true, slicing the\n * underlying series data between the peak's startIndex and endIndex.\n * Traces are pushed BEFORE the invisible hit-area trace so peak click/hover\n * still resolves to the hit-area marker, not the overlay.\n */\nexport function createRegionOverlayTraces(\n  peaks: PeakAnnotation[],\n  seriesIndex: number,\n  series: ChromatogramSeries\n): Plotly.Data[] {\n  const seriesColor = series.color ?? CHART_COLORS[seriesIndex % CHART_COLORS.length];\n  const traces: Plotly.Data[] = [];\n\n  for (const peak of peaks) {\n    if (!peak.regionOverlay) continue;\n    const startIdx = peak._computed?.startIndex;\n    const endIdx = peak._computed?.endIndex;\n    if (startIdx === undefined || endIdx === undefined) continue;\n\n    const color = peak.color ?? seriesColor;\n    const lineWidth = peak.regionOverlayWidth ?? DEFAULT_REGION_OVERLAY_WIDTH;\n    const hoverProps = peak.hoverText\n      ? { hovertemplate: `${peak.hoverText}<extra></extra>` }\n      : { hoverinfo: \"skip\" as const };\n\n    traces.push({\n      x: series.x.slice(startIdx, endIdx + 1),\n      y: series.y.slice(startIdx, endIdx + 1),\n      type: \"scatter\" as const,\n      mode: \"lines\" as const,\n      line: { color, width: lineWidth },\n      showlegend: false,\n      name: \"\",\n      ...hoverProps,\n    });\n  }\n\n  return traces;\n}\n"],"names":["DEFAULT_REGION_OVERLAY_WIDTH","createRegionOverlayTraces","peaks","seriesIndex","series","seriesColor","CHART_COLORS","traces","peak","startIdx","endIdx","color","lineWidth","hoverProps"],"mappings":";AAKA,MAAMA,IAA+B;AAQ9B,SAASC,EACdC,GACAC,GACAC,GACe;AACf,QAAMC,IAAcD,EAAO,SAASE,EAAaH,IAAcG,EAAa,MAAM,GAC5EC,IAAwB,CAAA;AAE9B,aAAWC,KAAQN,GAAO;AACxB,QAAI,CAACM,EAAK,cAAe;AACzB,UAAMC,IAAWD,EAAK,WAAW,YAC3BE,IAASF,EAAK,WAAW;AAC/B,QAAIC,MAAa,UAAaC,MAAW,OAAW;AAEpD,UAAMC,IAAQH,EAAK,SAASH,GACtBO,IAAYJ,EAAK,sBAAsBR,GACvCa,IAAaL,EAAK,YACpB,EAAE,eAAe,GAAGA,EAAK,SAAS,kBAAA,IAClC,EAAE,WAAW,OAAA;AAEjB,IAAAD,EAAO,KAAK;AAAA,MACV,GAAGH,EAAO,EAAE,MAAMK,GAAUC,IAAS,CAAC;AAAA,MACtC,GAAGN,EAAO,EAAE,MAAMK,GAAUC,IAAS,CAAC;AAAA,MACtC,MAAM;AAAA,MACN,MAAM;AAAA,MACN,MAAM,EAAE,OAAAC,GAAO,OAAOC,EAAA;AAAA,MACtB,YAAY;AAAA,MACZ,MAAM;AAAA,MACN,GAAGC;AAAA,IAAA,CACJ;AAAA,EACH;AAEA,SAAON;AACT;"}
+{"version":3,"file":"regionOverlays.js","sources":["../../../../src/components/charts/Chromatogram/regionOverlays.ts"],"sourcesContent":["import { CHART_COLORS } from \"../../../utils/colors\";\n\nimport type { PeakAnnotation, ChromatogramSeries } from \"./types\";\nimport type Plotly from \"plotly.js-dist\";\n\nconst DEFAULT_REGION_OVERLAY_WIDTH = 3.5;\n\n/**\n * Build one scatter trace per peak that has regionOverlay:true, slicing the\n * underlying series data between the peak's startIndex and endIndex.\n * Traces are pushed BEFORE the invisible hit-area trace so peak click/hover\n * still resolves to the hit-area marker, not the overlay.\n */\nexport function createRegionOverlayTraces(\n  peaks: PeakAnnotation[],\n  seriesIndex: number,\n  series: ChromatogramSeries\n): Plotly.Data[] {\n  const seriesColor = series.color ?? CHART_COLORS[seriesIndex % CHART_COLORS.length];\n  const traces: Plotly.Data[] = [];\n\n  for (const peak of peaks) {\n    if (!peak.regionOverlay) continue;\n    const startIdx = peak._computed?.startIndex;\n    const endIdx = peak._computed?.endIndex;\n    if (startIdx === undefined || endIdx === undefined) continue;\n\n    const color = peak.color ?? seriesColor;\n    const lineWidth = peak.regionOverlayWidth ?? DEFAULT_REGION_OVERLAY_WIDTH;\n    // Overlays with hoverText feed the shared ChartTooltip through `text`\n    // (Plotly's own label stays off — SW-2298); the rest are decorative.\n    const hoverProps = peak.hoverText\n      ? { text: peak.hoverText, hoverinfo: \"none\" as const }\n      : { hoverinfo: \"skip\" as const };\n\n    traces.push({\n      x: series.x.slice(startIdx, endIdx + 1),\n      y: series.y.slice(startIdx, endIdx + 1),\n      type: \"scatter\" as const,\n      mode: \"lines\" as const,\n      line: { color, width: lineWidth },\n      showlegend: false,\n      name: \"\",\n      ...hoverProps,\n    });\n  }\n\n  return traces;\n}\n"],"names":["DEFAULT_REGION_OVERLAY_WIDTH","createRegionOverlayTraces","peaks","seriesIndex","series","seriesColor","CHART_COLORS","traces","peak","startIdx","endIdx","color","lineWidth","hoverProps"],"mappings":";AAKA,MAAMA,IAA+B;AAQ9B,SAASC,EACdC,GACAC,GACAC,GACe;AACf,QAAMC,IAAcD,EAAO,SAASE,EAAaH,IAAcG,EAAa,MAAM,GAC5EC,IAAwB,CAAA;AAE9B,aAAWC,KAAQN,GAAO;AACxB,QAAI,CAACM,EAAK,cAAe;AACzB,UAAMC,IAAWD,EAAK,WAAW,YAC3BE,IAASF,EAAK,WAAW;AAC/B,QAAIC,MAAa,UAAaC,MAAW,OAAW;AAEpD,UAAMC,IAAQH,EAAK,SAASH,GACtBO,IAAYJ,EAAK,sBAAsBR,GAGvCa,IAAaL,EAAK,YACpB,EAAE,MAAMA,EAAK,WAAW,WAAW,OAAA,IACnC,EAAE,WAAW,OAAA;AAEjB,IAAAD,EAAO,KAAK;AAAA,MACV,GAAGH,EAAO,EAAE,MAAMK,GAAUC,IAAS,CAAC;AAAA,MACtC,GAAGN,EAAO,EAAE,MAAMK,GAAUC,IAAS,CAAC;AAAA,MACtC,MAAM;AAAA,MACN,MAAM;AAAA,MACN,MAAM,EAAE,OAAAC,GAAO,OAAOC,EAAA;AAAA,MACtB,YAAY;AAAA,MACZ,MAAM;AAAA,MACN,GAAGC;AAAA,IAAA,CACJ;AAAA,EACH;AAEA,SAAON;AACT;"}

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

@@ -80,8 +80,10 @@ export interface PeakAnnotation {
     /** 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.
+     * Text shown in the chart tooltip when hovering this peak (via the region
+     * overlay or the invisible hit-area marker). `<br>` starts a new line; other
+     * HTML tags are stripped, since the tooltip renders plain text. Falls back to
+     * `text` when omitted.
      */
     hoverText?: string;
     /**

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

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

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

@@ -1 +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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"}
+{"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/**\n * Height of the sequence header above the plot (see Electropherogram.scss:\n * 12 + 6 padding, 35 + 6 letters row, 30 numbers row). The plot gets the rest.\n */\nconst PLOT_HEIGHT_OFFSET = 89;\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  // The plot has no side margins, so an x-range that ends exactly on the first\n  // and last sample clips the outermost peaks and pushes their base letters\n  // half off the canvas (SW-2298). Pad by half a sample step on each side; the\n  // header letters/numbers share this mapping so they stay aligned to peaks.\n  const { xMin, xMax } = useMemo(() => {\n    if (positions.length === 0) return { xMin: 0, xMax: 1 };\n    const min = Math.min(...positions);\n    const max = Math.max(...positions);\n    const step = positions.length > 1 ? (max - min) / (positions.length - 1) : 1;\n    const pad = step / 2;\n    return { xMin: min - pad, xMax: max + pad };\n  }, [positions]);\n  const xToPx = (position: number) => ((position - xMin) / (xMax - xMin)) * width;\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: [xMin, xMax],\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, xMin, xMax, theme, bindTooltip]);\n\n  if (data.length === 0) {\n    return <div className=\"electropherogram-empty\">No data available</div>;\n  }\n\n  const renderSequence = () => {\n    const renderSequenceLetters = () => {\n      return (\n        <div className=\"electropherogram-sequence-letters\">\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 leftPosition = xToPx(position);\n\n            return (\n              <span\n                key={`base-${index}`}\n                className=\"electropherogram-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\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=\"electropherogram-position-numbers\">\n          {regularPositionLabels.map((label) => {\n            const leftPosition = xToPx(label.position);\n\n            return (\n              <span\n                key={`pos-${label.position}`}\n                className=\"electropherogram-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=\"electropherogram-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","xMin","xMax","min","max","pad","xToPx","position","useEffect","plotData","layout","CHART_FONT_FAMILY","config","cancelled","plotElement","loadPlotly","plotly","getLoadedPlotly","jsx","renderSequence","renderSequenceLetters","index","color","leftPosition","renderPositionNumbers","minPosition","maxPosition","startPos","regularPositionLabels","pos","label","jsxs"],"mappings":"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"}

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

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

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

@@ -1 +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":"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"}
+{"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/**\n * Height of the sequence header above the plot (see Electropherogram.scss:\n * 12 + 6 padding, 35 + 6 letters row, 30 numbers row). The plot gets the rest.\n */\nconst PLOT_HEIGHT_OFFSET = 89;\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  // The plot has no side margins, so an x-range that ends exactly on the first\n  // and last sample clips the outermost peaks and pushes their base letters\n  // half off the canvas (SW-2298). Pad by half a sample step on each side; the\n  // header letters/numbers share this mapping so they stay aligned to peaks.\n  const { xMin, xMax } = useMemo(() => {\n    if (positions.length === 0) return { xMin: 0, xMax: 1 };\n    const min = Math.min(...positions);\n    const max = Math.max(...positions);\n    const step = positions.length > 1 ? (max - min) / (positions.length - 1) : 1;\n    const pad = step / 2;\n    return { xMin: min - pad, xMax: max + pad };\n  }, [positions]);\n  const xToPx = (position: number) => ((position - xMin) / (xMax - xMin)) * width;\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: [xMin, xMax],\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, xMin, xMax, theme, bindTooltip]);\n\n  if (data.length === 0) {\n    return <div className=\"electropherogram-empty\">No data available</div>;\n  }\n\n  const renderSequence = () => {\n    const renderSequenceLetters = () => {\n      return (\n        <div className=\"electropherogram-sequence-letters\">\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 leftPosition = xToPx(position);\n\n            return (\n              <span\n                key={`base-${index}`}\n                className=\"electropherogram-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\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=\"electropherogram-position-numbers\">\n          {regularPositionLabels.map((label) => {\n            const leftPosition = xToPx(label.position);\n\n            return (\n              <span\n                key={`pos-${label.position}`}\n                className=\"electropherogram-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=\"electropherogram-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","xMin","xMax","min","max","pad","xToPx","position","useEffect","plotData","layout","CHART_FONT_FAMILY","config","cancelled","plotElement","loadPlotly","plotly","getLoadedPlotly","jsx","jsxs","renderSequenceLetters","index","color","leftPosition","renderPositionNumbers","minPosition","maxPosition","startPos","regularPositionLabels","pos","label"],"mappings":"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"}

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"),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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=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(s=>Math.pow(s-a,2)).reduce((s,h)=>s+h,0)/r.length;return Math.sqrt(u)},Z=(r,a,n,u,s=100)=>{const h=[],p=[],y=(u-n)/(s-1);for(let e=0;e<s;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),s=Array(u).fill(0);a.forEach(e=>{if(e>=n.start&&e<=n.end){const o=Math.floor((e-n.start)/n.size);s[o]++}});const h=Math.max(...s),p=Math.max(...r),y=h/p;return r.map(e=>e*y)},et=({dataSeries:r,width:a,height:n,title:u="Histogram",xTitle:s="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:s,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:s,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)}},[_,s,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)=>c.jsx(l.Fragment,{children:c.jsxs("div",{className:"histogram-legend-item",children:[c.jsx("span",{className:"histogram-legend-swatch",style:{background:i.color}}),i.name,w<t.length-1&&c.jsx("span",{className:"histogram-legend-divider"})]})},i.name)),d=[],f=6;for(let i=0;i<m.length;i+=f)d.push(c.jsx("div",{className:"histogram-legend-row",children:m.slice(i,i+f)},i));return c.jsx("div",{className:"histogram-legend",children:d})};return c.jsxs("div",{className:D.cn("histogram-container relative",W&&"w-full",L&&"h-full"),style:a===void 0?void 0:{width:a},children:[c.jsxs("div",{className:D.cn("histogram-chart",L&&"flex h-full flex-col"),children:[u&&c.jsx("div",{className:"histogram-title-container",children:c.jsx("h2",{className:"histogram-title",children:u})}),c.jsx("div",{ref:B,className:D.cn(L&&"min-h-0 flex-1"),children:c.jsx("div",{ref:e,style:{width:"100%",height:"100%",margin:"0"}})}),c.jsx(Y,{series:v})]}),q]})};exports.Histogram=et;
 //# sourceMappingURL=Histogram.cjs.map