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

package/README.md

@@ -135,16 +135,35 @@ This library uses **Tailwind CSS 4** with design tokens defined as CSS custom pr
 
 ### CSS Import Options
 
-| Import path                                                  | Use case                                                                                             |
-| ------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- |
-| `@tetrascience-npm/tetrascience-react-ui/index.css`          | **Pre-built CSS** — use this for most apps. Import once at your app root.                            |
-| `@tetrascience-npm/tetrascience-react-ui/index.tailwind.css` | **Tailwind source** — for apps that run their own Tailwind build and want to extend/override tokens. |
-
-Most consumers only need `index.css`:
+| Import path                                                  | Use case                                                                                                                                                                            |
+| ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `@tetrascience-npm/tetrascience-react-ui/index.css`          | **Pre-built CSS** — for an app that owns its document. Import once at your app root.                                                                                                |
+| `@tetrascience-npm/tetrascience-react-ui/index.tailwind.css` | **Tailwind source** — for apps that run their own Tailwind build and want to extend/override tokens.                                                                                |
+| `@tetrascience-npm/tetrascience-react-ui/index.scoped.css`   | **Scoped CSS** — for code that renders inside a document it does _not_ own (a microfrontend remote, an embedded widget). See [Embedding in a host page](#embedding-in-a-host-page). |
+
+Most consumers only need `index.css`.
+
+#### What the stylesheet does — and does not — claim
+
+Every selector rule the kit writes itself — its design tokens and its component CSS — ships
+inside a `ts-ui-kit` cascade layer, and no published stylesheet contains an unlayered rule.
+(Tailwind utilities land in Tailwind's `utilities` layer; `@font-face`, `@keyframes` and
+`@property` are not selector-matched and stay top-level, with kit keyframes `ts-`-prefixed.)
+That has two consequences worth knowing:
+
+- **Your CSS always wins.** An unlayered rule outranks a layered one regardless of specificity or
+  load order, so a plain `:root { --primary: … }` in your app overrides the kit's token whether it
+  is written before or after the import. There is no ordering dance.
+- **The kit never restyles your page by accident.** Its component class names are namespaced
+  (`.histogram-legend-divider`, `.platemap-legend__item`, …), and its tokens and Tailwind's
+  preflight reset are layered beneath anything you write. A CI gate
+  (`yarn check:css-leaks`) fails the build if any published stylesheet regains an unlayered rule.
 
 ### Theming
 
-The design system is controlled via CSS custom properties in `index.css`. Override them to customise colours, spacing, and radii:
+The design system is controlled via CSS custom properties. Override them anywhere in your own CSS
+to customise colours, spacing, and radii — because the kit's tokens are layered, your unlayered
+declaration wins in any order:
 
 ```css
 :root {
@@ -156,6 +175,45 @@ The design system is controlled via CSS custom properties in `index.css`. Overri
 
 Dark mode is supported via the `.dark` class on a parent element. See [THEMING.md](./THEMING.md) for details.
 
+### Embedding in a host page
+
+`index.css` is written for an app that owns its document: tokens on `:root` / `.dark`, Tailwind's
+preflight on `html` / `body` / `*`. Inside someone else's document — a Module Federation remote
+mounted into the TetraScience platform shell, a widget dropped into a legacy page — those are not
+the kit's claims to make, even layered: a host that never declared `--surface-bright` would still
+pick the kit's value up document-wide.
+
+`index.scoped.css` is the same stylesheet with every rule in the `ts-ui-kit` and `base` layers
+— tokens, component CSS, preflight — confined to an element carrying `data-ts-ui-root`. Import
+it instead of `index.css` and mark your shell:
+
+```tsx
+import "@tetrascience-npm/tetrascience-react-ui/index.scoped.css";
+
+export function App() {
+  return (
+    <div data-ts-ui-root className="dark">
+      {/* kit components render with their own tokens and reset in here… */}
+    </div>
+  );
+}
+```
+
+Two things to know when you use it:
+
+- **Portaled surfaces need the marker too.** `Dialog`, `Popover`, `Select`, `Tooltip` and the
+  other overlay components render their content into `document.body`, outside your shell. Put
+  `data-ts-ui-root` on their `*Content` element as well (a thin wrapper component around each one
+  you use is the usual pattern), or they render with the host's tokens instead of the kit's.
+- **Dark mode still keys off `.dark`.** `.dark` on `<html>` (or anything above the marker), on the
+  marked element itself, or on a dark panel nested inside a light shell all work — the scoped
+  rules are emitted as `.dark [data-ts-ui-root]`, `[data-ts-ui-root].dark` and
+  `[data-ts-ui-root] .dark`.
+
+Tailwind's own `theme`, `properties`, `components` and `utilities` layers are left global in the
+scoped build: they are keyed on Tailwind class names, your unlayered CSS already outranks them,
+and confining `theme` would strip `--spacing` / `--radius-*` from portaled content.
+
 ## Components
 
 ### UI Primitives (`ui/`)

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 l=require("react/jsx-runtime"),o=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=o.useRef(null),T=w.usePlotlyTheme(),{bindTooltip:O,tooltipElement:H}=$.useChartTooltip({xLabel:"Position",yLabel:"Intensity"}),s=o.useMemo(()=>e.map(t=>t.position),[e]),F=o.useMemo(()=>e.map(t=>V(t)),[e]),M=o.useMemo(()=>e.map(t=>t.peakA),[e]),P=o.useMemo(()=>e.map(t=>t.peakT),[e]),v=o.useMemo(()=>e.map(t=>t.peakG),[e]),C=o.useMemo(()=>e.map(t=>t.peakC),[e]),R=o.useMemo(()=>({x:s,y:M,type:"scatter",mode:"lines",hoverinfo:"none",name:"A",line:{color:h,width:2,shape:"spline"}}),[s,M,h]),_=o.useMemo(()=>({x:s,y:P,type:"scatter",mode:"lines",hoverinfo:"none",name:"T",line:{color:f,width:2,shape:"spline"}}),[s,P,f]),j=o.useMemo(()=>({x:s,y:v,type:"scatter",mode:"lines",hoverinfo:"none",name:"G",line:{color:c,width:2,shape:"spline"}}),[s,v,c]),A=o.useMemo(()=>({x:s,y:C,type:"scatter",mode:"lines",hoverinfo:"none",name:"C",line:{color:g,width:2,shape:"spline"}}),[s,C,g]),L=o.useMemo(()=>Math.max(...M,...P,...v,...C),[M,P,v,C]);if(o.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:"electropherogram-empty",children:"No data available"});const G=()=>{const t=()=>{const i=Math.min(...s),p=Math.max(...s),u=a;return l.jsx("div",{className:"electropherogram-sequence-letters",children:F.map((r,x)=>{const n=s[x],q=r==="A"?h:r==="T"?f:r==="G"?c:r==="C"?g:T.textColor,N=p-i||1,B=(n-i)/N*u;return l.jsx("span",{className:"electropherogram-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 n=r;n<=p;n+=y)x.push({position:n,label:n.toString()});return l.jsx("div",{className:"electropherogram-position-numbers",children:x.map(n=>{const q=p-i||1,S=(n.position-i)/q*u;return l.jsx("span",{className:"electropherogram-position-number",style:{left:`${S}px`},children:n.label},`pos-${n.position}`)})})};return l.jsxs("div",{className:"electropherogram-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

@@ -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/** 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=\"electropherogram-empty\">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=\"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 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=\"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      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=\"electropherogram-position-numbers\">\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=\"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","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.js

@@ -16,8 +16,8 @@ const W = 75, Y = 1.05, X = (e) => {
   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);
+  return Object.entries(l).forEach(([i, g]) => {
+    g > f && (u = i, f = g);
   }), u;
 }, oe = ({
   data: e = [],
@@ -30,15 +30,15 @@ const W = 75, Y = 1.05, X = (e) => {
   // teal/green
   colorG: i = N[3],
   // red
-  colorC: d = N[1]
+  colorC: g = N[1]
   // orange
 }) => {
-  const g = j(null), T = V(), { bindTooltip: C, tooltipElement: G } = $({
+  const d = 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(
+  }), t = o(() => e.map((n) => n.position), [e]), R = o(() => e.map((n) => X(n)), [e]), v = o(() => e.map((n) => n.peakA), [e]), P = o(() => e.map((n) => n.peakT), [e]), k = o(() => e.map((n) => n.peakG), [e]), b = o(() => e.map((n) => n.peakC), [e]), _ = o(
     () => ({
-      x: n,
+      x: t,
       y: v,
       type: "scatter",
       mode: "lines",
@@ -46,10 +46,10 @@ const W = 75, Y = 1.05, X = (e) => {
       name: "A",
       line: { color: u, width: 2, shape: "spline" }
     }),
-    [n, v, u]
+    [t, v, u]
   ), q = o(
     () => ({
-      x: n,
+      x: t,
       y: P,
       type: "scatter",
       mode: "lines",
@@ -57,10 +57,10 @@ const W = 75, Y = 1.05, X = (e) => {
       name: "T",
       line: { color: f, width: 2, shape: "spline" }
     }),
-    [n, P, f]
+    [t, P, f]
   ), w = o(
     () => ({
-      x: n,
+      x: t,
       y: k,
       type: "scatter",
       mode: "lines",
@@ -68,25 +68,25 @@ const W = 75, Y = 1.05, X = (e) => {
       name: "G",
       line: { color: i, width: 2, shape: "spline" }
     }),
-    [n, k, i]
+    [t, k, i]
   ), E = o(
     () => ({
-      x: n,
+      x: t,
       y: b,
       type: "scatter",
       mode: "lines",
       hoverinfo: "none",
       name: "C",
-      line: { color: d, width: 2, shape: "spline" }
+      line: { color: g, width: 2, shape: "spline" }
     }),
-    [n, b, d]
+    [t, b, g]
   ), 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 = {
+    if (!d.current || e.length === 0) return;
+    const n = [_, q, w, E], M = {
       width: l,
       height: h - W,
       margin: { l: 0, r: 0, b: 20, t: 10, pad: 0 },
@@ -101,7 +101,7 @@ const W = 75, Y = 1.05, X = (e) => {
         zeroline: !1,
         showticklabels: !1,
         showline: !1,
-        range: [Math.min(...n), Math.max(...n)],
+        range: [Math.min(...t), Math.max(...t)],
         fixedrange: !0
       },
       yaxis: {
@@ -120,20 +120,20 @@ const W = 75, Y = 1.05, X = (e) => {
     };
     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 || !d.current || (r.newPlot(d.current, n, M, a), C(d.current), p = d.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: [
+  }, [e, l, h, _, q, w, E, L, t, T, C]), e.length === 0 ? /* @__PURE__ */ m("div", { className: "electropherogram-empty", 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;
+      const n = () => {
+        const a = Math.min(...t), c = Math.max(...t), p = l;
+        return /* @__PURE__ */ m("div", { className: "electropherogram-sequence-letters", children: R.map((r, y) => {
+          const s = t[y], A = r === "A" ? u : r === "T" ? f : r === "G" ? i : r === "C" ? g : T.textColor, O = c - a || 1, B = (s - a) / O * p;
           return /* @__PURE__ */ m(
             "span",
             {
-              className: "sequence-letter",
+              className: "electropherogram-sequence-letter",
               style: {
                 left: `${B}px`,
                 color: A
@@ -144,18 +144,18 @@ const W = 75, Y = 1.05, X = (e) => {
           );
         }) });
       }, M = () => {
-        const a = Math.min(...n), c = Math.max(...n), p = l, r = Math.ceil(a / x) * x, y = [];
+        const a = Math.min(...t), c = Math.max(...t), 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) => {
+        return /* @__PURE__ */ m("div", { className: "electropherogram-position-numbers", children: y.map((s) => {
           const A = c - a || 1, S = (s.position - a) / A * p;
           return /* @__PURE__ */ m(
             "span",
             {
-              className: "position-number",
+              className: "electropherogram-position-number",
               style: {
                 left: `${S}px`
               },
@@ -165,12 +165,12 @@ const W = 75, Y = 1.05, X = (e) => {
           );
         }) });
       };
-      return /* @__PURE__ */ F("div", { className: "sequence-header", children: [
-        t(),
+      return /* @__PURE__ */ F("div", { className: "electropherogram-sequence-header", children: [
+        n(),
         M()
       ] });
     })(),
-    /* @__PURE__ */ m("div", { className: "electropherogram-chart", children: /* @__PURE__ */ m("div", { ref: g, style: { width: "100%", height: "100%" } }) }),
+    /* @__PURE__ */ m("div", { className: "electropherogram-chart", children: /* @__PURE__ */ m("div", { ref: d, style: { width: "100%", height: "100%" } }) }),
     G
   ] });
 };

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/** 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=\"electropherogram-empty\">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=\"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 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=\"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      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=\"electropherogram-position-numbers\">\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=\"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","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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"}

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

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

@@ -1 +1 @@
-{"version":3,"file":"Histogram.cjs","sources":["../../../../src/components/charts/Histogram/Histogram.tsx"],"sourcesContent":["import React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { useChartTooltip } from \"../ChartTooltip\";\nimport { getLoadedPlotly, loadPlotly } from \"../plotly-loader\";\n\nimport { useElementSize } from \"@/hooks/use-element-size\";\nimport { CHART_FONT_FAMILY, usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport { cn } from \"@/lib/utils\";\nimport { CHART_COLORS } from \"@/utils/colors\";\nimport \"./Histogram.scss\";\n\n/** Exponent coefficient for normal distribution calculation */\nconst NORMAL_DISTRIBUTION_EXPONENT_COEFF = -0.5;\n\ninterface HistogramDataSeries {\n  x: number[];\n  name: string;\n  color?: string;\n  autobinx?: boolean;\n  xbins?: {\n    start: number;\n    end: number;\n    size: number;\n  };\n  opacity?: number;\n  showDistributionLine?: boolean;\n  lineWidth?: number;\n}\n\ntype HistogramProps = {\n  dataSeries: HistogramDataSeries | HistogramDataSeries[];\n  /**\n   * Fixed width in pixels. When omitted, the chart fills its container and\n   * tracks the container's width via a `ResizeObserver`.\n   */\n  width?: number;\n  /**\n   * Fixed height in pixels. When omitted, the chart fills its container and\n   * tracks the container's height via a `ResizeObserver`.\n   */\n  height?: number;\n  title?: string;\n  xTitle?: string;\n  yTitle?: string;\n  bargap?: number;\n  showDistributionLine?: boolean;\n};\n\nconst calculateMean = (data: number[]): number => {\n  const sum = data.reduce((acc, val) => acc + val, 0);\n  return sum / data.length;\n};\n\nconst calculateStdDev = (data: number[], mean: number): number => {\n  const squaredDiffs = data.map((value) => Math.pow(value - mean, 2));\n  const variance =\n    squaredDiffs.reduce((acc, val) => acc + val, 0) / data.length;\n  return Math.sqrt(variance);\n};\n\nconst generateNormalDistributionPoints = (\n  mean: number,\n  stdDev: number,\n  start: number,\n  end: number,\n  points = 100\n): { x: number[]; y: number[] } => {\n  const xValues: number[] = [];\n  const yValues: number[] = [];\n\n  const step = (end - start) / (points - 1);\n\n  for (let i = 0; i < points; i++) {\n    const x = start + i * step;\n    xValues.push(x);\n\n    const exponent = NORMAL_DISTRIBUTION_EXPONENT_COEFF * Math.pow((x - mean) / stdDev, 2);\n    const y = (1 / (stdDev * Math.sqrt(2 * Math.PI))) * Math.exp(exponent);\n    yValues.push(y);\n  }\n\n  return { x: xValues, y: yValues };\n};\n\nconst scaleDistributionCurve = (\n  yValues: number[],\n  histogramData: number[],\n  bins: { start: number; end: number; size: number }\n): number[] => {\n  const binCount = Math.ceil((bins.end - bins.start) / bins.size);\n  const binFrequencies = Array(binCount).fill(0);\n\n  histogramData.forEach((value) => {\n    if (value >= bins.start && value <= bins.end) {\n      const binIndex = Math.floor((value - bins.start) / bins.size);\n      binFrequencies[binIndex]++;\n    }\n  });\n\n  const maxBinFrequency = Math.max(...binFrequencies);\n  const maxCurveValue = Math.max(...yValues);\n\n  const scaleFactor = maxBinFrequency / maxCurveValue;\n\n  return yValues.map((y) => y * scaleFactor);\n};\n\nconst Histogram: React.FC<HistogramProps> = ({\n  dataSeries,\n  width,\n  height,\n  title = \"Histogram\",\n  xTitle = \"X Axis\",\n  yTitle = \"Frequency\",\n  bargap = 0.2,\n  showDistributionLine = false,\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n  const { bindTooltip, tooltipElement } = useChartTooltip({ xLabel: xTitle, yLabel: yTitle });\n\n  // Omitted width/height → fill the container and track its measured size;\n  // explicit pixel values override. Histogram has its own HTML title + legend,\n  // so we measure a wrapper around just the Plotly canvas. See AreaPlot for\n  // the reference pattern.\n  const [plotAreaRef, measured] = useElementSize<HTMLDivElement>();\n  const resolvedWidth = width ?? measured.width;\n  const resolvedHeight = height ?? measured.height;\n  const hasSize = resolvedWidth > 0 && resolvedHeight > 0;\n  // Fill is per-dimension: omit width to fill the container width, omit height\n  // to fill its height (so e.g. a fixed width with a container-driven height works).\n  const fillWidth = width === undefined;\n  const fillHeight = height === undefined;\n  const sizeRef = useRef({ width: resolvedWidth, height: resolvedHeight });\n  sizeRef.current = { width: resolvedWidth, height: resolvedHeight };\n  const plotInitedRef = useRef(false);\n  // Size last applied to the plot, so the resize effect can skip a redundant\n  // relayout right after newPlot already drew at that size.\n  const appliedSizeRef = useRef({ width: 0, height: 0 });\n  const seriesArray = useMemo(\n    () => (Array.isArray(dataSeries) ? dataSeries : [dataSeries]),\n    [dataSeries],\n  );\n  const effectiveBarMode = useMemo<\n    \"stack\" | \"group\" | \"overlay\" | \"relative\" | undefined\n  >(() => (seriesArray.length > 1 ? \"stack\" : undefined), [seriesArray.length]);\n\n  const defaultColors = CHART_COLORS;\n\n  const seriesWithColors = useMemo(() => {\n    return seriesArray.map((series, index) => {\n      const hasDistributionLine =\n        typeof series.showDistributionLine === \"undefined\"\n          ? showDistributionLine\n          : series.showDistributionLine;\n\n      return {\n        ...series,\n        color: series.color || defaultColors[index % defaultColors.length],\n        opacity: hasDistributionLine ? 0.5 : series.opacity || 1,\n        showDistributionLine: hasDistributionLine,\n        lineWidth: series.lineWidth || 3,\n      };\n    });\n  }, [seriesArray, showDistributionLine, defaultColors]);\n\n  const gridColor = theme.gridColor;\n\n  const histogramData = useMemo(\n    () =>\n      seriesWithColors.map((series) => ({\n        type: \"histogram\" as const,\n        x: series.x,\n        name: series.name,\n        marker: {\n          color: series.color,\n          line: {\n            color: theme.paperBg,\n            width: 1,\n          },\n          opacity: series.opacity,\n        },\n        autobinx: series.autobinx,\n        xbins: series.xbins,\n        hoverinfo: \"none\" as const,\n      })),\n    [seriesWithColors, theme],\n  );\n\n  const distributionLines = useMemo(\n    () =>\n      seriesWithColors\n        .filter((series) => series.showDistributionLine)\n        .map((series) => {\n          const mean = calculateMean(series.x);\n          const stdDev = calculateStdDev(series.x, mean);\n\n          const min = Math.min(...series.x);\n          const max = Math.max(...series.x);\n          const range = max - min;\n          const start = min - range * 0.1;\n          const end = max + range * 0.1;\n\n          const bins = series.xbins || {\n            start: start,\n            end: end,\n            size: range / 10,\n          };\n\n          const curvePoints = generateNormalDistributionPoints(\n            mean,\n            stdDev,\n            start,\n            end,\n            100,\n          );\n\n          const scaledYValues = scaleDistributionCurve(\n            curvePoints.y,\n            series.x,\n            bins,\n          );\n\n          return {\n            type: \"scatter\" as const,\n            x: curvePoints.x,\n            y: scaledYValues,\n            mode: \"lines\" as const,\n            name: `${series.name} Distribution`,\n            line: {\n              color: series.color,\n              width: series.lineWidth,\n            },\n            hoverinfo: \"none\" as const,\n          };\n        }),\n    [seriesWithColors],\n  );\n\n  const plotData = useMemo(\n    () => [...histogramData, ...distributionLines],\n    [histogramData, distributionLines],\n  );\n\n  useEffect(() => {\n    if (!plotRef.current || !hasSize) return;\n\n    const layout = {\n      width: sizeRef.current.width,\n      height: sizeRef.current.height,\n      font: {\n        family: CHART_FONT_FAMILY,\n      },\n      showlegend: false,\n      margin: { l: 90, r: 40, b: 80, t: 40 },\n      xaxis: {\n        title: {\n          text: xTitle,\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: CHART_FONT_FAMILY,\n            weight: 400,\n          },\n          standoff: 20,\n        },\n        gridcolor: gridColor,\n        tickcolor: theme.tickColor,\n        ticklen: 8,\n        tickwidth: 1,\n        ticks: \"outside\" as const,\n        linecolor: theme.lineColor,\n        linewidth: 1,\n        zeroline: false,\n        automargin: true,\n      },\n      yaxis: {\n        title: {\n          text: yTitle,\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: CHART_FONT_FAMILY,\n            weight: 400,\n          },\n          standoff: 20,\n        },\n        gridcolor: gridColor,\n        tickcolor: theme.tickColor,\n        ticklen: 8,\n        tickwidth: 1,\n        ticks: \"outside\" as const,\n        linecolor: theme.lineColor,\n        linewidth: 1,\n        zeroline: false,\n        rangemode: \"tozero\" as const,\n        automargin: true,\n      },\n      barmode: effectiveBarMode,\n      bargap: bargap,\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\n    };\n\n    const config = {\n      // Sizing is driven from the measured container; disable Plotly's own\n      // window-resize responsiveness (it can't see container resizes).\n      responsive: false,\n      displayModeBar: false,\n      displaylogo: false,\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      plotInitedRef.current = true;\n      appliedSizeRef.current = { ...sizeRef.current };\n    });\n\n    return () => {\n      cancelled = true;\n      if (plotElement) {\n        getLoadedPlotly().purge(plotElement);\n        plotInitedRef.current = false;\n      }\n    };\n  }, [hasSize, xTitle, yTitle, bargap, plotData, effectiveBarMode, gridColor, theme, bindTooltip]);\n\n  // Resize in place when the measured/overridden size changes — cheaper than\n  // recreating the plot, and it preserves tooltip/event bindings.\n  useEffect(() => {\n    const plotElement = plotRef.current;\n    if (!plotElement || !plotInitedRef.current || resolvedWidth <= 0 || resolvedHeight <= 0) {\n      return;\n    }\n    // newPlot already drew at the current size; skip the redundant relayout\n    // (it would queue an automargin redraw that can reject if we unmount first).\n    if (\n      appliedSizeRef.current.width === resolvedWidth &&\n      appliedSizeRef.current.height === resolvedHeight\n    ) {\n      return;\n    }\n    appliedSizeRef.current = { width: resolvedWidth, height: resolvedHeight };\n    // Swallow rejections from a relayout that races an unmount/purge.\n    // plotInitedRef guarantees Plotly finished loading, so sync access is safe.\n    void getLoadedPlotly()\n      .relayout(plotElement, { width: resolvedWidth, height: resolvedHeight })\n      .catch(() => {});\n  }, [resolvedWidth, resolvedHeight]);\n\n  const ChartLegend: React.FC<{\n    series: Array<{ name: string; color: string }>;\n  }> = ({ series }) => {\n    const items = series.map((item, i) => (\n      <React.Fragment key={item.name}>\n        <div className=\"legend-item\">\n          <span className=\"color-box\" style={{ background: item.color }} />\n          {item.name}\n          {i < series.length - 1 && <span className=\"divider\" />}\n        </div>\n      </React.Fragment>\n    ));\n\n    const rows = [];\n    const rowSize = 6;\n    for (let i = 0; i < items.length; i += rowSize) {\n      rows.push(\n        <div className=\"legend-row\" key={i}>\n          {items.slice(i, i + rowSize)}\n        </div>\n      );\n    }\n\n    return <div className=\"legend-container\">{rows}</div>;\n  };\n\n  return (\n    <div\n      className={cn(\"histogram-container relative\", fillWidth && \"w-full\", fillHeight && \"h-full\")}\n      style={width === undefined ? undefined : { width }}\n    >\n      <div className={cn(\"chart-container\", fillHeight && \"flex h-full flex-col\")}>\n        {title && (\n          <div className=\"title-container\">\n            <h2 className=\"title\">{title}</h2>\n          </div>\n        )}\n        {/* Measured plot area — flexes to fill the space left by the title and\n            legend in fill mode, so the Plotly canvas tracks it. */}\n        <div ref={plotAreaRef} className={cn(fillHeight && \"min-h-0 flex-1\")}>\n          <div\n            ref={plotRef}\n            style={{\n              width: \"100%\",\n              height: \"100%\",\n              margin: \"0\",\n            }}\n          />\n        </div>\n        <ChartLegend series={seriesWithColors} />\n      </div>\n      {tooltipElement}\n    </div>\n  );\n};\n\nexport { Histogram };\nexport type { HistogramDataSeries, HistogramProps };\n"],"names":["NORMAL_DISTRIBUTION_EXPONENT_COEFF","calculateMean","data","acc","val","calculateStdDev","mean","variance","value","generateNormalDistributionPoints","stdDev","start","end","points","xValues","yValues","step","i","x","exponent","y","scaleDistributionCurve","histogramData","bins","binCount","binFrequencies","binIndex","maxBinFrequency","maxCurveValue","scaleFactor","Histogram","dataSeries","width","height","title","xTitle","yTitle","bargap","showDistributionLine","plotRef","useRef","theme","usePlotlyTheme","bindTooltip","tooltipElement","useChartTooltip","plotAreaRef","measured","useElementSize","resolvedWidth","resolvedHeight","hasSize","fillWidth","fillHeight","sizeRef","plotInitedRef","appliedSizeRef","seriesArray","useMemo","effectiveBarMode","defaultColors","CHART_COLORS","seriesWithColors","series","index","hasDistributionLine","gridColor","distributionLines","min","max","range","curvePoints","scaledYValues","plotData","useEffect","layout","CHART_FONT_FAMILY","config","cancelled","plotElement","loadPlotly","plotly","getLoadedPlotly","ChartLegend","items","item","jsx","React","jsxs","rows","rowSize","cn"],"mappings":"qaAYA,MAAMA,EAAqC,IAoCrCC,EAAiBC,GACTA,EAAK,OAAO,CAACC,EAAKC,IAAQD,EAAMC,EAAK,CAAC,EACrCF,EAAK,OAGdG,EAAkB,CAACH,EAAgBI,IAAyB,CAEhE,MAAMC,EADeL,EAAK,IAAKM,GAAU,KAAK,IAAIA,EAAQF,EAAM,CAAC,CAAC,EAEnD,OAAO,CAACH,EAAKC,IAAQD,EAAMC,EAAK,CAAC,EAAIF,EAAK,OACzD,OAAO,KAAK,KAAKK,CAAQ,CAC3B,EAEME,EAAmC,CACvCH,EACAI,EACAC,EACAC,EACAC,EAAS,MACwB,CACjC,MAAMC,EAAoB,CAAA,EACpBC,EAAoB,CAAA,EAEpBC,GAAQJ,EAAMD,IAAUE,EAAS,GAEvC,QAASI,EAAI,EAAGA,EAAIJ,EAAQI,IAAK,CAC/B,MAAMC,EAAIP,EAAQM,EAAID,EACtBF,EAAQ,KAAKI,CAAC,EAEd,MAAMC,EAAWnB,EAAqC,KAAK,KAAKkB,EAAIZ,GAAQI,EAAQ,CAAC,EAC/EU,EAAK,GAAKV,EAAS,KAAK,KAAK,EAAI,KAAK,EAAE,GAAM,KAAK,IAAIS,CAAQ,EACrEJ,EAAQ,KAAKK,CAAC,CAChB,CAEA,MAAO,CAAE,EAAGN,EAAS,EAAGC,CAAA,CAC1B,EAEMM,GAAyB,CAC7BN,EACAO,EACAC,IACa,CACb,MAAMC,EAAW,KAAK,MAAMD,EAAK,IAAMA,EAAK,OAASA,EAAK,IAAI,EACxDE,EAAiB,MAAMD,CAAQ,EAAE,KAAK,CAAC,EAE7CF,EAAc,QAASd,GAAU,CAC/B,GAAIA,GAASe,EAAK,OAASf,GAASe,EAAK,IAAK,CAC5C,MAAMG,EAAW,KAAK,OAAOlB,EAAQe,EAAK,OAASA,EAAK,IAAI,EAC5DE,EAAeC,CAAQ,GACzB,CACF,CAAC,EAED,MAAMC,EAAkB,KAAK,IAAI,GAAGF,CAAc,EAC5CG,EAAgB,KAAK,IAAI,GAAGb,CAAO,EAEnCc,EAAcF,EAAkBC,EAEtC,OAAOb,EAAQ,IAAKK,GAAMA,EAAIS,CAAW,CAC3C,EAEMC,GAAsC,CAAC,CAC3C,WAAAC,EACA,MAAAC,EACA,OAAAC,EACA,MAAAC,EAAQ,YACR,OAAAC,EAAS,SACT,OAAAC,EAAS,YACT,OAAAC,EAAS,GACT,qBAAAC,EAAuB,EACzB,IAAM,CACJ,MAAMC,EAAUC,EAAAA,OAAuB,IAAI,EACrCC,EAAQC,EAAAA,eAAA,EACR,CAAE,YAAAC,EAAa,eAAAC,CAAA,EAAmBC,EAAAA,gBAAgB,CAAE,OAAQV,EAAQ,OAAQC,EAAQ,EAMpF,CAACU,EAAaC,CAAQ,EAAIC,iBAAA,EAC1BC,EAAgBjB,GAASe,EAAS,MAClCG,EAAiBjB,GAAUc,EAAS,OACpCI,EAAUF,EAAgB,GAAKC,EAAiB,EAGhDE,EAAYpB,IAAU,OACtBqB,EAAapB,IAAW,OACxBqB,EAAUd,EAAAA,OAAO,CAAE,MAAOS,EAAe,OAAQC,EAAgB,EACvEI,EAAQ,QAAU,CAAE,MAAOL,EAAe,OAAQC,CAAA,EAClD,MAAMK,EAAgBf,EAAAA,OAAO,EAAK,EAG5BgB,EAAiBhB,EAAAA,OAAO,CAAE,MAAO,EAAG,OAAQ,EAAG,EAC/CiB,EAAcC,EAAAA,QAClB,IAAO,MAAM,QAAQ3B,CAAU,EAAIA,EAAa,CAACA,CAAU,EAC3D,CAACA,CAAU,CAAA,EAEP4B,EAAmBD,EAAAA,QAEvB,IAAOD,EAAY,OAAS,EAAI,QAAU,OAAY,CAACA,EAAY,MAAM,CAAC,EAEtEG,EAAgBC,EAAAA,aAEhBC,EAAmBJ,EAAAA,QAAQ,IACxBD,EAAY,IAAI,CAACM,EAAQC,IAAU,CACxC,MAAMC,EACJ,OAAOF,EAAO,qBAAyB,IACnCzB,EACAyB,EAAO,qBAEb,MAAO,CACL,GAAGA,EACH,MAAOA,EAAO,OAASH,EAAcI,EAAQJ,EAAc,MAAM,EACjE,QAASK,EAAsB,GAAMF,EAAO,SAAW,EACvD,qBAAsBE,EACtB,UAAWF,EAAO,WAAa,CAAA,CAEnC,CAAC,EACA,CAACN,EAAanB,EAAsBsB,CAAa,CAAC,EAE/CM,EAAYzB,EAAM,UAElBnB,EAAgBoC,EAAAA,QACpB,IACEI,EAAiB,IAAKC,IAAY,CAChC,KAAM,YACN,EAAGA,EAAO,EACV,KAAMA,EAAO,KACb,OAAQ,CACN,MAAOA,EAAO,MACd,KAAM,CACJ,MAAOtB,EAAM,QACb,MAAO,CAAA,EAET,QAASsB,EAAO,OAAA,EAElB,SAAUA,EAAO,SACjB,MAAOA,EAAO,MACd,UAAW,MAAA,EACX,EACJ,CAACD,EAAkBrB,CAAK,CAAA,EAGpB0B,EAAoBT,EAAAA,QACxB,IACEI,EACG,OAAQC,GAAWA,EAAO,oBAAoB,EAC9C,IAAKA,GAAW,CACf,MAAMzD,EAAOL,EAAc8D,EAAO,CAAC,EAC7BrD,EAASL,EAAgB0D,EAAO,EAAGzD,CAAI,EAEvC8D,EAAM,KAAK,IAAI,GAAGL,EAAO,CAAC,EAC1BM,EAAM,KAAK,IAAI,GAAGN,EAAO,CAAC,EAC1BO,EAAQD,EAAMD,EACdzD,EAAQyD,EAAME,EAAQ,GACtB1D,EAAMyD,EAAMC,EAAQ,GAEpB/C,EAAOwC,EAAO,OAAS,CAC3B,MAAApD,EACA,IAAAC,EACA,KAAM0D,EAAQ,EAAA,EAGVC,EAAc9D,EAClBH,EACAI,EACAC,EACAC,EACA,GAAA,EAGI4D,EAAgBnD,GACpBkD,EAAY,EACZR,EAAO,EACPxC,CAAA,EAGF,MAAO,CACL,KAAM,UACN,EAAGgD,EAAY,EACf,EAAGC,EACH,KAAM,QACN,KAAM,GAAGT,EAAO,IAAI,gBACpB,KAAM,CACJ,MAAOA,EAAO,MACd,MAAOA,EAAO,SAAA,EAEhB,UAAW,MAAA,CAEf,CAAC,EACL,CAACD,CAAgB,CAAA,EAGbW,EAAWf,EAAAA,QACf,IAAM,CAAC,GAAGpC,EAAe,GAAG6C,CAAiB,EAC7C,CAAC7C,EAAe6C,CAAiB,CAAA,EAGnCO,EAAAA,UAAU,IAAM,CACd,GAAI,CAACnC,EAAQ,SAAW,CAACY,EAAS,OAElC,MAAMwB,EAAS,CACb,MAAOrB,EAAQ,QAAQ,MACvB,OAAQA,EAAQ,QAAQ,OACxB,KAAM,CACJ,OAAQsB,EAAAA,iBAAA,EAEV,WAAY,GACZ,OAAQ,CAAE,EAAG,GAAI,EAAG,GAAI,EAAG,GAAI,EAAG,EAAA,EAClC,MAAO,CACL,MAAO,CACL,KAAMzC,EACN,KAAM,CACJ,KAAM,GACN,MAAOM,EAAM,cACb,OAAQmC,EAAAA,kBACR,OAAQ,GAAA,EAEV,SAAU,EAAA,EAEZ,UAAWV,EACX,UAAWzB,EAAM,UACjB,QAAS,EACT,UAAW,EACX,MAAO,UACP,UAAWA,EAAM,UACjB,UAAW,EACX,SAAU,GACV,WAAY,EAAA,EAEd,MAAO,CACL,MAAO,CACL,KAAML,EACN,KAAM,CACJ,KAAM,GACN,MAAOK,EAAM,cACb,OAAQmC,EAAAA,kBACR,OAAQ,GAAA,EAEV,SAAU,EAAA,EAEZ,UAAWV,EACX,UAAWzB,EAAM,UACjB,QAAS,EACT,UAAW,EACX,MAAO,UACP,UAAWA,EAAM,UACjB,UAAW,EACX,SAAU,GACV,UAAW,SACX,WAAY,EAAA,EAEd,QAASkB,EACT,OAAAtB,EACA,cAAeI,EAAM,QACrB,aAAcA,EAAM,MAAA,EAGhBoC,EAAS,CAGb,WAAY,GACZ,eAAgB,GAChB,YAAa,EAAA,EAKf,IAAIC,EAAY,GACZC,EAAqC,KACzC,OAAKC,aAAA,EAAa,KAAMC,GAAW,CAC7BH,GAAa,CAACvC,EAAQ,UAC1B0C,EAAO,QAAQ1C,EAAQ,QAASkC,EAAUE,EAAQE,CAAM,EACxDlC,EAAYJ,EAAQ,OAAO,EAG3BwC,EAAcxC,EAAQ,QACtBgB,EAAc,QAAU,GACxBC,EAAe,QAAU,CAAE,GAAGF,EAAQ,OAAA,EACxC,CAAC,EAEM,IAAM,CACXwB,EAAY,GACRC,IACFG,kBAAA,EAAkB,MAAMH,CAAW,EACnCxB,EAAc,QAAU,GAE5B,CACF,EAAG,CAACJ,EAAShB,EAAQC,EAAQC,EAAQoC,EAAUd,EAAkBO,EAAWzB,EAAOE,CAAW,CAAC,EAI/F+B,EAAAA,UAAU,IAAM,CACd,MAAMK,EAAcxC,EAAQ,QACxB,CAACwC,GAAe,CAACxB,EAAc,SAAWN,GAAiB,GAAKC,GAAkB,GAMpFM,EAAe,QAAQ,QAAUP,GACjCO,EAAe,QAAQ,SAAWN,IAIpCM,EAAe,QAAU,CAAE,MAAOP,EAAe,OAAQC,CAAA,EAGpDgC,kBAAA,EACF,SAASH,EAAa,CAAE,MAAO9B,EAAe,OAAQC,EAAgB,EACtE,MAAM,IAAM,CAAC,CAAC,EACnB,EAAG,CAACD,EAAeC,CAAc,CAAC,EAElC,MAAMiC,EAED,CAAC,CAAE,OAAApB,KAAa,CACnB,MAAMqB,EAAQrB,EAAO,IAAI,CAACsB,EAAMpE,IAC9BqE,MAACC,EAAM,SAAN,CACC,SAAAC,OAAC,MAAA,CAAI,UAAU,cACb,SAAA,CAAAF,MAAC,OAAA,CAAK,UAAU,YAAY,MAAO,CAAE,WAAYD,EAAK,OAAS,EAC9DA,EAAK,KACLpE,EAAI8C,EAAO,OAAS,GAAKuB,EAAAA,IAAC,OAAA,CAAK,UAAU,SAAA,CAAU,CAAA,CAAA,CACtD,CAAA,EALmBD,EAAK,IAM1B,CACD,EAEKI,EAAO,CAAA,EACPC,EAAU,EAChB,QAAS,EAAI,EAAG,EAAIN,EAAM,OAAQ,GAAKM,EACrCD,EAAK,KACHH,EAAAA,IAAC,MAAA,CAAI,UAAU,aACZ,SAAAF,EAAM,MAAM,EAAG,EAAIM,CAAO,CAAA,EADI,CAEjC,CAAA,EAIJ,OAAOJ,EAAAA,IAAC,MAAA,CAAI,UAAU,mBAAoB,SAAAG,EAAK,CACjD,EAEA,OACED,EAAAA,KAAC,MAAA,CACC,UAAWG,EAAAA,GAAG,+BAAgCvC,GAAa,SAAUC,GAAc,QAAQ,EAC3F,MAAOrB,IAAU,OAAY,OAAY,CAAE,MAAAA,CAAA,EAE3C,SAAA,CAAAwD,OAAC,OAAI,UAAWG,EAAAA,GAAG,kBAAmBtC,GAAc,sBAAsB,EACvE,SAAA,CAAAnB,GACCoD,EAAAA,IAAC,OAAI,UAAU,kBACb,eAAC,KAAA,CAAG,UAAU,QAAS,SAAApD,CAAA,CAAM,CAAA,CAC/B,EAIFoD,EAAAA,IAAC,OAAI,IAAKxC,EAAa,UAAW6C,EAAAA,GAAGtC,GAAc,gBAAgB,EACjE,SAAAiC,EAAAA,IAAC,MAAA,CACC,IAAK/C,EACL,MAAO,CACL,MAAO,OACP,OAAQ,OACR,OAAQ,GAAA,CACV,CAAA,EAEJ,EACA+C,EAAAA,IAACH,EAAA,CAAY,OAAQrB,CAAA,CAAkB,CAAA,EACzC,EACClB,CAAA,CAAA,CAAA,CAGP"}
+{"version":3,"file":"Histogram.cjs","sources":["../../../../src/components/charts/Histogram/Histogram.tsx"],"sourcesContent":["import React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { useChartTooltip } from \"../ChartTooltip\";\nimport { getLoadedPlotly, loadPlotly } from \"../plotly-loader\";\n\nimport { useElementSize } from \"@/hooks/use-element-size\";\nimport { CHART_FONT_FAMILY, usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport { cn } from \"@/lib/utils\";\nimport { CHART_COLORS } from \"@/utils/colors\";\nimport \"./Histogram.scss\";\n\n/** Exponent coefficient for normal distribution calculation */\nconst NORMAL_DISTRIBUTION_EXPONENT_COEFF = -0.5;\n\ninterface HistogramDataSeries {\n  x: number[];\n  name: string;\n  color?: string;\n  autobinx?: boolean;\n  xbins?: {\n    start: number;\n    end: number;\n    size: number;\n  };\n  opacity?: number;\n  showDistributionLine?: boolean;\n  lineWidth?: number;\n}\n\ntype HistogramProps = {\n  dataSeries: HistogramDataSeries | HistogramDataSeries[];\n  /**\n   * Fixed width in pixels. When omitted, the chart fills its container and\n   * tracks the container's width via a `ResizeObserver`.\n   */\n  width?: number;\n  /**\n   * Fixed height in pixels. When omitted, the chart fills its container and\n   * tracks the container's height via a `ResizeObserver`.\n   */\n  height?: number;\n  title?: string;\n  xTitle?: string;\n  yTitle?: string;\n  bargap?: number;\n  showDistributionLine?: boolean;\n};\n\nconst calculateMean = (data: number[]): number => {\n  const sum = data.reduce((acc, val) => acc + val, 0);\n  return sum / data.length;\n};\n\nconst calculateStdDev = (data: number[], mean: number): number => {\n  const squaredDiffs = data.map((value) => Math.pow(value - mean, 2));\n  const variance =\n    squaredDiffs.reduce((acc, val) => acc + val, 0) / data.length;\n  return Math.sqrt(variance);\n};\n\nconst generateNormalDistributionPoints = (\n  mean: number,\n  stdDev: number,\n  start: number,\n  end: number,\n  points = 100\n): { x: number[]; y: number[] } => {\n  const xValues: number[] = [];\n  const yValues: number[] = [];\n\n  const step = (end - start) / (points - 1);\n\n  for (let i = 0; i < points; i++) {\n    const x = start + i * step;\n    xValues.push(x);\n\n    const exponent = NORMAL_DISTRIBUTION_EXPONENT_COEFF * Math.pow((x - mean) / stdDev, 2);\n    const y = (1 / (stdDev * Math.sqrt(2 * Math.PI))) * Math.exp(exponent);\n    yValues.push(y);\n  }\n\n  return { x: xValues, y: yValues };\n};\n\nconst scaleDistributionCurve = (\n  yValues: number[],\n  histogramData: number[],\n  bins: { start: number; end: number; size: number }\n): number[] => {\n  const binCount = Math.ceil((bins.end - bins.start) / bins.size);\n  const binFrequencies = Array(binCount).fill(0);\n\n  histogramData.forEach((value) => {\n    if (value >= bins.start && value <= bins.end) {\n      const binIndex = Math.floor((value - bins.start) / bins.size);\n      binFrequencies[binIndex]++;\n    }\n  });\n\n  const maxBinFrequency = Math.max(...binFrequencies);\n  const maxCurveValue = Math.max(...yValues);\n\n  const scaleFactor = maxBinFrequency / maxCurveValue;\n\n  return yValues.map((y) => y * scaleFactor);\n};\n\nconst Histogram: React.FC<HistogramProps> = ({\n  dataSeries,\n  width,\n  height,\n  title = \"Histogram\",\n  xTitle = \"X Axis\",\n  yTitle = \"Frequency\",\n  bargap = 0.2,\n  showDistributionLine = false,\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n  const { bindTooltip, tooltipElement } = useChartTooltip({ xLabel: xTitle, yLabel: yTitle });\n\n  // Omitted width/height → fill the container and track its measured size;\n  // explicit pixel values override. Histogram has its own HTML title + legend,\n  // so we measure a wrapper around just the Plotly canvas. See AreaPlot for\n  // the reference pattern.\n  const [plotAreaRef, measured] = useElementSize<HTMLDivElement>();\n  const resolvedWidth = width ?? measured.width;\n  const resolvedHeight = height ?? measured.height;\n  const hasSize = resolvedWidth > 0 && resolvedHeight > 0;\n  // Fill is per-dimension: omit width to fill the container width, omit height\n  // to fill its height (so e.g. a fixed width with a container-driven height works).\n  const fillWidth = width === undefined;\n  const fillHeight = height === undefined;\n  const sizeRef = useRef({ width: resolvedWidth, height: resolvedHeight });\n  sizeRef.current = { width: resolvedWidth, height: resolvedHeight };\n  const plotInitedRef = useRef(false);\n  // Size last applied to the plot, so the resize effect can skip a redundant\n  // relayout right after newPlot already drew at that size.\n  const appliedSizeRef = useRef({ width: 0, height: 0 });\n  const seriesArray = useMemo(\n    () => (Array.isArray(dataSeries) ? dataSeries : [dataSeries]),\n    [dataSeries],\n  );\n  const effectiveBarMode = useMemo<\n    \"stack\" | \"group\" | \"overlay\" | \"relative\" | undefined\n  >(() => (seriesArray.length > 1 ? \"stack\" : undefined), [seriesArray.length]);\n\n  const defaultColors = CHART_COLORS;\n\n  const seriesWithColors = useMemo(() => {\n    return seriesArray.map((series, index) => {\n      const hasDistributionLine =\n        typeof series.showDistributionLine === \"undefined\"\n          ? showDistributionLine\n          : series.showDistributionLine;\n\n      return {\n        ...series,\n        color: series.color || defaultColors[index % defaultColors.length],\n        opacity: hasDistributionLine ? 0.5 : series.opacity || 1,\n        showDistributionLine: hasDistributionLine,\n        lineWidth: series.lineWidth || 3,\n      };\n    });\n  }, [seriesArray, showDistributionLine, defaultColors]);\n\n  const gridColor = theme.gridColor;\n\n  const histogramData = useMemo(\n    () =>\n      seriesWithColors.map((series) => ({\n        type: \"histogram\" as const,\n        x: series.x,\n        name: series.name,\n        marker: {\n          color: series.color,\n          line: {\n            color: theme.paperBg,\n            width: 1,\n          },\n          opacity: series.opacity,\n        },\n        autobinx: series.autobinx,\n        xbins: series.xbins,\n        hoverinfo: \"none\" as const,\n      })),\n    [seriesWithColors, theme],\n  );\n\n  const distributionLines = useMemo(\n    () =>\n      seriesWithColors\n        .filter((series) => series.showDistributionLine)\n        .map((series) => {\n          const mean = calculateMean(series.x);\n          const stdDev = calculateStdDev(series.x, mean);\n\n          const min = Math.min(...series.x);\n          const max = Math.max(...series.x);\n          const range = max - min;\n          const start = min - range * 0.1;\n          const end = max + range * 0.1;\n\n          const bins = series.xbins || {\n            start: start,\n            end: end,\n            size: range / 10,\n          };\n\n          const curvePoints = generateNormalDistributionPoints(\n            mean,\n            stdDev,\n            start,\n            end,\n            100,\n          );\n\n          const scaledYValues = scaleDistributionCurve(\n            curvePoints.y,\n            series.x,\n            bins,\n          );\n\n          return {\n            type: \"scatter\" as const,\n            x: curvePoints.x,\n            y: scaledYValues,\n            mode: \"lines\" as const,\n            name: `${series.name} Distribution`,\n            line: {\n              color: series.color,\n              width: series.lineWidth,\n            },\n            hoverinfo: \"none\" as const,\n          };\n        }),\n    [seriesWithColors],\n  );\n\n  const plotData = useMemo(\n    () => [...histogramData, ...distributionLines],\n    [histogramData, distributionLines],\n  );\n\n  useEffect(() => {\n    if (!plotRef.current || !hasSize) return;\n\n    const layout = {\n      width: sizeRef.current.width,\n      height: sizeRef.current.height,\n      font: {\n        family: CHART_FONT_FAMILY,\n      },\n      showlegend: false,\n      margin: { l: 90, r: 40, b: 80, t: 40 },\n      xaxis: {\n        title: {\n          text: xTitle,\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: CHART_FONT_FAMILY,\n            weight: 400,\n          },\n          standoff: 20,\n        },\n        gridcolor: gridColor,\n        tickcolor: theme.tickColor,\n        ticklen: 8,\n        tickwidth: 1,\n        ticks: \"outside\" as const,\n        linecolor: theme.lineColor,\n        linewidth: 1,\n        zeroline: false,\n        automargin: true,\n      },\n      yaxis: {\n        title: {\n          text: yTitle,\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: CHART_FONT_FAMILY,\n            weight: 400,\n          },\n          standoff: 20,\n        },\n        gridcolor: gridColor,\n        tickcolor: theme.tickColor,\n        ticklen: 8,\n        tickwidth: 1,\n        ticks: \"outside\" as const,\n        linecolor: theme.lineColor,\n        linewidth: 1,\n        zeroline: false,\n        rangemode: \"tozero\" as const,\n        automargin: true,\n      },\n      barmode: effectiveBarMode,\n      bargap: bargap,\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\n    };\n\n    const config = {\n      // Sizing is driven from the measured container; disable Plotly's own\n      // window-resize responsiveness (it can't see container resizes).\n      responsive: false,\n      displayModeBar: false,\n      displaylogo: false,\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      plotInitedRef.current = true;\n      appliedSizeRef.current = { ...sizeRef.current };\n    });\n\n    return () => {\n      cancelled = true;\n      if (plotElement) {\n        getLoadedPlotly().purge(plotElement);\n        plotInitedRef.current = false;\n      }\n    };\n  }, [hasSize, xTitle, yTitle, bargap, plotData, effectiveBarMode, gridColor, theme, bindTooltip]);\n\n  // Resize in place when the measured/overridden size changes — cheaper than\n  // recreating the plot, and it preserves tooltip/event bindings.\n  useEffect(() => {\n    const plotElement = plotRef.current;\n    if (!plotElement || !plotInitedRef.current || resolvedWidth <= 0 || resolvedHeight <= 0) {\n      return;\n    }\n    // newPlot already drew at the current size; skip the redundant relayout\n    // (it would queue an automargin redraw that can reject if we unmount first).\n    if (\n      appliedSizeRef.current.width === resolvedWidth &&\n      appliedSizeRef.current.height === resolvedHeight\n    ) {\n      return;\n    }\n    appliedSizeRef.current = { width: resolvedWidth, height: resolvedHeight };\n    // Swallow rejections from a relayout that races an unmount/purge.\n    // plotInitedRef guarantees Plotly finished loading, so sync access is safe.\n    void getLoadedPlotly()\n      .relayout(plotElement, { width: resolvedWidth, height: resolvedHeight })\n      .catch(() => {});\n  }, [resolvedWidth, resolvedHeight]);\n\n  const ChartLegend: React.FC<{\n    series: Array<{ name: string; color: string }>;\n  }> = ({ series }) => {\n    const items = series.map((item, i) => (\n      <React.Fragment key={item.name}>\n        <div className=\"histogram-legend-item\">\n          <span className=\"histogram-legend-swatch\" style={{ background: item.color }} />\n          {item.name}\n          {i < series.length - 1 && <span className=\"histogram-legend-divider\" />}\n        </div>\n      </React.Fragment>\n    ));\n\n    const rows = [];\n    const rowSize = 6;\n    for (let i = 0; i < items.length; i += rowSize) {\n      rows.push(\n        <div className=\"histogram-legend-row\" key={i}>\n          {items.slice(i, i + rowSize)}\n        </div>\n      );\n    }\n\n    return <div className=\"histogram-legend\">{rows}</div>;\n  };\n\n  return (\n    <div\n      className={cn(\"histogram-container relative\", fillWidth && \"w-full\", fillHeight && \"h-full\")}\n      style={width === undefined ? undefined : { width }}\n    >\n      <div className={cn(\"histogram-chart\", fillHeight && \"flex h-full flex-col\")}>\n        {title && (\n          <div className=\"histogram-title-container\">\n            <h2 className=\"histogram-title\">{title}</h2>\n          </div>\n        )}\n        {/* Measured plot area — flexes to fill the space left by the title and\n            legend in fill mode, so the Plotly canvas tracks it. */}\n        <div ref={plotAreaRef} className={cn(fillHeight && \"min-h-0 flex-1\")}>\n          <div\n            ref={plotRef}\n            style={{\n              width: \"100%\",\n              height: \"100%\",\n              margin: \"0\",\n            }}\n          />\n        </div>\n        <ChartLegend series={seriesWithColors} />\n      </div>\n      {tooltipElement}\n    </div>\n  );\n};\n\nexport { Histogram };\nexport type { HistogramDataSeries, HistogramProps };\n"],"names":["NORMAL_DISTRIBUTION_EXPONENT_COEFF","calculateMean","data","acc","val","calculateStdDev","mean","variance","value","generateNormalDistributionPoints","stdDev","start","end","points","xValues","yValues","step","i","x","exponent","y","scaleDistributionCurve","histogramData","bins","binCount","binFrequencies","binIndex","maxBinFrequency","maxCurveValue","scaleFactor","Histogram","dataSeries","width","height","title","xTitle","yTitle","bargap","showDistributionLine","plotRef","useRef","theme","usePlotlyTheme","bindTooltip","tooltipElement","useChartTooltip","plotAreaRef","measured","useElementSize","resolvedWidth","resolvedHeight","hasSize","fillWidth","fillHeight","sizeRef","plotInitedRef","appliedSizeRef","seriesArray","useMemo","effectiveBarMode","defaultColors","CHART_COLORS","seriesWithColors","series","index","hasDistributionLine","gridColor","distributionLines","min","max","range","curvePoints","scaledYValues","plotData","useEffect","layout","CHART_FONT_FAMILY","config","cancelled","plotElement","loadPlotly","plotly","getLoadedPlotly","ChartLegend","items","item","jsx","React","jsxs","rows","rowSize","cn"],"mappings":"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"}