@tetrascience-npm/tetrascience-react-ui 0.7.0-beta.129.1 → 0.7.0-beta.131.1

package/dist/components/charts/LinePlot/LinePlot.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const H=require("react/jsx-runtime"),n=require("react"),V=require("../ChartTooltip/ChartTooltip.cjs"),N=require("../plotly-loader.cjs"),B=require("../../../hooks/use-element-size.cjs"),h=require("../../../hooks/use-plotly-theme.cjs"),G=require("../../../lib/utils.cjs"),W=require("../../../utils/colors.cjs"),D=60,J=30,K=({dataSeries:d,width:T,height:R,xRange:L,yRange:g,variant:y="lines",xTitle:b,yTitle:k,title:p,xTickText:M})=>{const u=n.useRef(null),o=h.usePlotlyTheme(),{bindTooltip:v,tooltipElement:S}=V.useChartTooltip({xLabel:b,yLabel:k}),[X,I]=B.useElementSize(),s=T??I.width,a=R??I.height,P=s>0&&a>0,j=T===void 0,U=R===void 0,_=n.useRef({width:s,height:a});_.current={width:s,height:a};const C=n.useRef(!1),w=n.useRef({width:0,height:0}),{yMin:z,yMax:F}=n.useMemo(()=>{let t=Number.MAX_VALUE,e=Number.MIN_VALUE,l=Number.MAX_VALUE,i=Number.MIN_VALUE;d.forEach(A=>{A.x.forEach(c=>{t=Math.min(t,c),e=Math.max(e,c)}),A.y.forEach(c=>{l=Math.min(l,c),i=Math.max(i,c)})});const m=(e-t)*.1,r=(i-l)*.1;return{xMin:t-m,xMax:e+m,yMin:l-r,yMax:i+r}},[d]),f=n.useMemo(()=>g||[z,F],[g,z,F]),O=n.useMemo(()=>{const t=f[1]-f[0];let e=Math.pow(10,Math.floor(Math.log10(t)));t/e>10&&(e=e*2),t/e<4&&(e=e/2);const l=[];let i=Math.ceil(f[0]/e)*e;for(;i<=f[1];)l.push(i),i+=e;return l},[f]),x=n.useMemo(()=>[...new Set(d.flatMap(t=>t.x))].sort((t,e)=>t-e),[d]),Y=!!M&&M.length===x.length,q=n.useMemo(()=>{switch(y){case"lines+markers":case"lines+markers+error_bars":return"lines+markers";default:return"lines"}},[y]),E=n.useMemo(()=>({tickcolor:o.tickColor,ticklen:12,tickwidth:1,ticks:"outside",tickfont:{size:16,color:o.textColor,family:h.CHART_FONT_FAMILY,weight:400},linecolor:o.lineColor,linewidth:1,position:0,zeroline:!1}),[o]);return n.useEffect(()=>{if(!u.current||!P)return;const t=d.map((r,A)=>{const c=W.seriesColor(A,r.color);return{x:r.x,y:r.y,type:"scatter",mode:q,name:r.name,hoverinfo:"none",line:{color:c,width:1.5},marker:y==="lines"?{opacity:0}:{color:c,size:8,symbol:r.symbol||"triangle-up"},error_y:y==="lines+markers+error_bars"?r.error_y||{type:"data",array:r.y.map(()=>10),visible:!0,color:c,thickness:1,width:5}:void 0}}),e={...p?{title:{text:p,font:{size:32,family:h.CHART_FONT_FAMILY,color:o.textColor}}}:{},width:_.current.width,height:_.current.height,margin:{l:80,r:30,b:96,t:p?D:J,pad:10},paper_bgcolor:o.paperBg,plot_bgcolor:o.plotBg,font:{family:h.CHART_FONT_FAMILY},dragmode:!1,xaxis:{title:{text:b,font:{size:16,color:o.textSecondary,family:h.CHART_FONT_FAMILY,weight:400},standoff:32},gridcolor:o.gridColor,range:L,autorange:!L,tickmode:"array",tickvals:x,ticktext:Y?M:x.map(String),showgrid:!0,automargin:!0,...E},yaxis:{title:{text:k,font:{size:16,color:o.textSecondary,family:h.CHART_FONT_FAMILY,weight:400},standoff:30},gridcolor:o.gridColor,range:g,autorange:!g,tickmode:"array",tickvals:O,showgrid:!0,automargin:!0,...E},legend:{x:.5,y:0,xanchor:"center",yanchor:"bottom",yref:"container",orientation:"h",font:{size:16,color:o.legendColor,family:h.CHART_FONT_FAMILY,weight:500}},showlegend:!0},l={responsive:!1,displayModeBar:!1,displaylogo:!1};let i=!1,m=null;return N.loadPlotly().then(r=>{i||!u.current||(r.newPlot(u.current,t,e,l),v(u.current),m=u.current,C.current=!0,w.current={..._.current})}),()=>{i=!0,m&&(N.getLoadedPlotly().purge(m),C.current=!1)}},[d,P,L,g,b,k,p,q,E,x,O,Y,M,f,y,o,v]),n.useEffect(()=>{const t=u.current;!t||!C.current||s<=0||a<=0||w.current.width===s&&w.current.height===a||(w.current={width:s,height:a},N.getLoadedPlotly().relayout(t,{width:s,height:a}).catch(()=>{}))},[s,a]),H.jsxs("div",{ref:X,className:G.cn("relative",j&&"w-full",U&&"h-full"),children:[H.jsx("div",{ref:u,style:{width:"100%",height:"100%"}}),S]})};exports.LinePlot=K;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const H=require("react/jsx-runtime"),n=require("react"),V=require("../ChartTooltip/ChartTooltip.cjs"),N=require("../plotly-loader.cjs"),B=require("../../../hooks/use-element-size.cjs"),h=require("../../../hooks/use-plotly-theme.cjs"),G=require("../../../lib/utils.cjs"),W=require("../../../utils/colors.cjs"),D=60,J=30,K=({dataSeries:d,width:T,height:R,xRange:L,yRange:g,variant:y="lines",xTitle:b,yTitle:k,title:p,xTickText:M})=>{const u=n.useRef(null),o=h.usePlotlyTheme(),{bindTooltip:v,tooltipElement:S}=V.useChartTooltip({xLabel:b,yLabel:k}),[X,I]=B.useElementSize(),c=T??I.width,a=R??I.height,P=c>0&&a>0,j=T===void 0,U=R===void 0,_=n.useRef({width:c,height:a});_.current={width:c,height:a};const C=n.useRef(!1),w=n.useRef({width:0,height:0}),{yMin:z,yMax:F}=n.useMemo(()=>{let t=Number.MAX_VALUE,e=Number.MIN_VALUE,l=Number.MAX_VALUE,i=Number.MIN_VALUE;d.forEach(A=>{A.x.forEach(s=>{t=Math.min(t,s),e=Math.max(e,s)}),A.y.forEach(s=>{l=Math.min(l,s),i=Math.max(i,s)})});const m=(e-t)*.1,r=(i-l)*.1;return{xMin:t-m,xMax:e+m,yMin:l-r,yMax:i+r}},[d]),f=n.useMemo(()=>g||[z,F],[g,z,F]),O=n.useMemo(()=>{const t=f[1]-f[0];let e=Math.pow(10,Math.floor(Math.log10(t)));t/e>10&&(e=e*2),t/e<4&&(e=e/2);const l=[];let i=Math.ceil(f[0]/e)*e;for(;i<=f[1];)l.push(i),i+=e;return l},[f]),x=n.useMemo(()=>[...new Set(d.flatMap(t=>t.x))].sort((t,e)=>t-e),[d]),Y=!!M&&M.length===x.length,q=n.useMemo(()=>{switch(y){case"lines+markers":case"lines+markers+error_bars":return"lines+markers";default:return"lines"}},[y]),E=n.useMemo(()=>({tickcolor:o.tickColor,ticklen:12,tickwidth:1,ticks:"outside",tickfont:{size:16,color:o.textColor,family:h.CHART_FONT_FAMILY,weight:400},linecolor:o.lineColor,linewidth:1,position:0,zeroline:!1}),[o]);return n.useEffect(()=>{if(!u.current||!P)return;const t=d.map((r,A)=>{const s=W.seriesColor(A,r.color);return{x:r.x,y:r.y,type:"scatter",mode:q,name:r.name,hoverinfo:"none",line:{color:s,width:1.5},marker:y==="lines"?{opacity:0}:{color:s,size:8,symbol:r.symbol||"triangle-up"},error_y:y==="lines+markers+error_bars"?r.error_y||{type:"data",array:r.y.map(()=>10),visible:!0,color:s,thickness:1,width:5}:void 0}}),e={...p?{title:{text:p,font:{size:32,family:h.CHART_FONT_FAMILY,color:o.textColor}}}:{},width:_.current.width,height:_.current.height,margin:{l:80,r:30,b:96,t:p?D:J,pad:10},paper_bgcolor:o.paperBg,plot_bgcolor:o.plotBg,font:{family:h.CHART_FONT_FAMILY},dragmode:!1,xaxis:{title:{text:b,font:{size:16,color:o.textSecondary,family:h.CHART_FONT_FAMILY,weight:400},standoff:32},gridcolor:o.gridColor,range:L,autorange:!L,tickmode:"array",tickvals:x,ticktext:Y?M:x.map(String),showgrid:!0,automargin:!0,...E},yaxis:{title:{text:k,font:{size:16,color:o.textSecondary,family:h.CHART_FONT_FAMILY,weight:400},standoff:30},gridcolor:o.gridColor,range:g,autorange:!g,tickmode:"array",tickvals:O,showgrid:!0,automargin:!0,...E},legend:{x:.5,y:0,xanchor:"center",yanchor:"bottom",yref:"container",orientation:"h",font:{size:16,color:o.legendColor,family:h.CHART_FONT_FAMILY,weight:500}},showlegend:!0},l={responsive:!1,displayModeBar:!1,displaylogo:!1};let i=!1,m=null;return N.loadPlotly().then(r=>{i||!u.current||(r.newPlot(u.current,t,e,l),v(u.current),m=u.current,C.current=!0,w.current={..._.current})}),()=>{i=!0,m&&(N.getLoadedPlotly().purge(m),C.current=!1)}},[d,P,L,g,b,k,p,q,E,x,O,Y,M,f,y,o,v]),n.useEffect(()=>{const t=u.current;!t||!C.current||c<=0||a<=0||w.current.width===c&&w.current.height===a||(w.current={width:c,height:a},N.getLoadedPlotly().relayout(t,{width:c,height:a}).catch(()=>{}))},[c,a]),H.jsxs("div",{ref:X,className:G.cn("relative",j&&"w-full",U&&"h-full"),children:[H.jsx("div",{ref:u,style:{width:"100%",height:"100%"}}),S]})};exports.LinePlot=K;
 //# sourceMappingURL=LinePlot.cjs.map

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

@@ -0,0 +1,45 @@
+import { default as React } from 'react';
+type MarkerSymbol = "circle" | "circle-open" | "circle-dot" | "circle-open-dot" | "square" | "square-open" | "square-dot" | "square-open-dot" | "diamond" | "diamond-open" | "diamond-dot" | "diamond-open-dot" | "cross" | "cross-open" | "cross-dot" | "cross-open-dot" | "x" | "x-open" | "x-dot" | "x-open-dot" | "triangle-up" | "triangle-up-open" | "triangle-up-dot" | "triangle-up-open-dot" | "triangle-down" | "triangle-down-open" | "triangle-down-dot" | "triangle-down-open-dot" | "triangle-left" | "triangle-left-open" | "triangle-left-dot" | "triangle-left-open-dot" | "triangle-right" | "triangle-right-open" | "triangle-right-dot" | "triangle-right-open-dot" | "triangle-ne" | "triangle-ne-open" | "triangle-ne-dot" | "triangle-ne-open-dot" | "triangle-se" | "triangle-se-open" | "triangle-se-dot" | "triangle-se-open-dot" | "triangle-sw" | "triangle-sw-open" | "triangle-sw-dot" | "triangle-sw-open-dot" | "triangle-nw" | "triangle-nw-open" | "triangle-nw-dot" | "triangle-nw-open-dot" | "pentagon" | "pentagon-open" | "pentagon-dot" | "pentagon-open-dot" | "hexagon" | "hexagon-open" | "hexagon-dot" | "hexagon-open-dot" | "hexagon2" | "hexagon2-open" | "hexagon2-dot" | "hexagon2-open-dot" | "octagon" | "octagon-open" | "octagon-dot" | "octagon-open-dot" | "star" | "star-open" | "star-dot" | "star-open-dot" | "hexagram" | "hexagram-open" | "hexagram-dot" | "hexagram-open-dot" | "star-triangle-up" | "star-triangle-up-open" | "star-triangle-up-dot" | "star-triangle-up-open-dot" | "star-triangle-down" | "star-triangle-down-open" | "star-triangle-down-dot" | "star-triangle-down-open-dot" | "star-square" | "star-square-open" | "star-square-dot" | "star-square-open-dot" | "star-diamond" | "star-diamond-open" | "star-diamond-dot" | "star-diamond-open-dot" | "diamond-tall" | "diamond-tall-open" | "diamond-tall-dot" | "diamond-tall-open-dot" | "diamond-wide" | "diamond-wide-open" | "diamond-wide-dot" | "diamond-wide-open-dot" | "hourglass" | "hourglass-open" | "bowtie" | "bowtie-open" | "circle-cross" | "circle-cross-open" | "circle-x" | "circle-x-open" | "square-cross" | "square-cross-open" | "square-x" | "square-x-open" | "diamond-cross" | "diamond-cross-open" | "diamond-x" | "diamond-x-open" | "cross-thin" | "cross-thin-open" | "x-thin" | "x-thin-open" | "asterisk" | "asterisk-open" | "hash" | "hash-open" | "hash-dot" | "hash-open-dot" | "y-up" | "y-up-open" | "y-down" | "y-down-open" | "y-left" | "y-left-open" | "y-right" | "y-right-open" | "line-ew" | "line-ew-open" | "line-ns" | "line-ns-open" | "line-ne" | "line-ne-open" | "line-nw" | "line-nw-open" | "arrow" | "arrow-open" | "arrow-wide" | "arrow-wide-open";
+interface LineDataSeries {
+    x: number[];
+    y: number[];
+    name: string;
+    /** Optional color override (auto-assigned from CHART_COLORS if not provided) */
+    color?: string;
+    symbol?: MarkerSymbol;
+    error_y?: {
+        type: "data";
+        array: number[];
+        visible: boolean;
+    };
+}
+type LinePlotVariant = "lines" | "lines+markers" | "lines+markers+error_bars";
+type LinePlotProps = {
+    dataSeries: LineDataSeries[];
+    /**
+     * Fixed width in pixels. When omitted, the chart fills its container and
+     * tracks the container's width via a `ResizeObserver`.
+     */
+    width?: number;
+    /**
+     * Fixed height in pixels. When omitted, the chart fills its container and
+     * tracks the container's height via a `ResizeObserver`.
+     */
+    height?: number;
+    xRange?: [number, number];
+    yRange?: [number, number];
+    variant?: LinePlotVariant;
+    xTitle?: string;
+    yTitle?: string;
+    title?: string;
+    /**
+     * Categorical labels for the x-axis ticks. When provided, the x data values
+     * still drive line positioning but the displayed tick labels match these
+     * strings in order (e.g. ["Mon", "Tue", …]). Should align 1:1 with the
+     * unique, ordered x values across all series.
+     */
+    xTickText?: string[];
+};
+declare const LinePlot: React.FC<LinePlotProps>;
+export { LinePlot };
+export type { LineDataSeries, LinePlotVariant, LinePlotProps, MarkerSymbol };

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

@@ -0,0 +1,2 @@
+export { LinePlot } from './LinePlot';
+export type { LineDataSeries, LinePlotVariant, LinePlotProps, MarkerSymbol, } from './LinePlot';

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

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+interface PieDataSeries {
+    labels: string[];
+    values: number[];
+    name: string;
+    colors?: string[];
+}
+type PieTextInfo = "none" | "label" | "percent" | "value" | "label+percent" | "label+value" | "value+percent" | "label+value+percent";
+type PieChartProps = {
+    dataSeries: PieDataSeries;
+    width?: number;
+    height?: number;
+    title?: string;
+    textInfo?: PieTextInfo;
+    hole?: number;
+    rotation?: number;
+};
+declare const PieChart: React.FC<PieChartProps>;
+export { PieChart };
+export type { PieDataSeries, PieTextInfo, PieChartProps };

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

@@ -0,0 +1,2 @@
+export { PieChart } from './PieChart';
+export type { PieDataSeries, PieTextInfo, PieChartProps } from './PieChart';

package/dist/components/charts/PlateMap/PlateMap.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),r=require("react");;/* empty css                */const nt=require("../ChartTooltip/ChartTooltip.cjs"),ke=require("../plotly-loader.cjs"),n=require("./constants.cjs"),w=require("./types.cjs"),u=require("./utils.cjs"),ct=require("../../ui/button.cjs"),G=require("../../../hooks/use-plotly-theme.cjs"),it=({data:_,layerConfigs:de,initialLayerId:Ge,onLayerChange:$e,plateFormat:me=w.PLATE_FORMAT_96,rows:Ue,columns:qe,visualizationMode:Ve="heatmap",categoryColors:fe,regions:y,title:v,xTitle:ge,yTitle:P,xLabels:Ae,yLabels:_e,colorScale:He=n.DEFAULT_COLOR_SCALE,valueMin:Be,valueMax:Ye,emptyWellColor:L=n.COLORS.emptyWell,showColorBar:Te=!0,showLegend:Ze=!0,legendConfig:T,width:E=800,height:b=500,precision:K=0,markerShape:$="circle",onWellClick:he})=>{const U=r.useRef(null),h=G.usePlotlyTheme(),Q=r.useRef(he);Q.current=he;const[ee,We]=r.useState(Ge);let c,i;if(me===w.PLATE_FORMAT_CUSTOM)c=Ue??8,i=qe??12;else{const e=n.PLATE_CONFIGS[me];c=e.rows,i=e.columns}const te=r.useMemo(()=>u.calculateMarkerSize(E,b,c,i,$,!!v,!!P),[E,b,c,i,$,v,P]),{bindTooltip:xe,tooltipElement:Xe}=nt.useChartTooltip({hoverDistance:Math.ceil(te/2)}),m=r.useMemo(()=>{if(Array.isArray(_)&&_.length>0&&"wellId"in _[0]){const e=_;if(u.hasMultiValueWells(e))return u.extractLayers(e,de)}return null},[_,de]),f=r.useMemo(()=>!m||m.length===0?null:ee?m.find(e=>e.id===ee)??m[0]:m[0],[m,ee]),z=f?.visualizationMode??Ve,C=f?.colorScale??He,Je=f?.valueMin??Be,Ke=f?.valueMax??Ye,q=f?.valueUnit?` ${f.valueUnit}`:"",V=r.useMemo(()=>({...n.DEFAULT_CATEGORY_COLORS,...fe,...f?.categoryColors}),[fe,f?.categoryColors]),Me=f?.id,{grid:x,categoriesGrid:ae,allValuesMap:H,tooltipDataMap:B}=r.useMemo(()=>{let e,a=Array.from({length:c},()=>Array(i).fill(null)),l=new Map,o=new Map;if(Array.isArray(_)&&_.length>0){const t=u.wellDataToGrid(_,c,i,Me);e=t.grid,a=t.categories,l=t.allValues,o=t.tooltipData}else e=Array.from({length:c},()=>Array.from({length:i},()=>Math.random()*n.PLATEMAP_CONSTANTS.MAX_RANDOM_VALUE));return{grid:e,categoriesGrid:a,allValuesMap:l,tooltipDataMap:o}},[_,c,i,Me]),M=r.useMemo(()=>_e??u.generateRowLabels(c),[_e,c]),O=r.useMemo(()=>Ae??u.generateColumnLabels(i),[Ae,i]),Se=u.calculateValueRange(x),F=Je??Se.min,D=Ke??Se.max,I=x.some(e=>e.includes(null)),N=F-(D-F)*n.PLATEMAP_CONSTANTS.SENTINEL_RATIO-1,ye=r.useMemo(()=>I?x.map(e=>e.map(a=>a===null?N:a)):x,[I,x,N]),Le=r.useMemo(()=>{if(!I)return C;let e;if(typeof C=="string"){const t=n.NAMED_COLORSCALES[C];if(t)e=t;else return C}else e=C;const a=D-N,l=(F-N)/a,o=[[0,L],[l*n.PLATEMAP_CONSTANTS.COLOR_SCALE_THRESHOLD,L]];for(const[t,d]of e){const g=l+t*(1-l);o.push([g,d])}return o},[C,I,F,D,N,L]),Oe=I?N:F,ve=r.useMemo(()=>{const e=new Map;if(m)for(const a of m)e.set(a.id,a);return e},[m]),Ee=r.useMemo(()=>x.map((e,a)=>e.map((l,o)=>{const t=`${M[a]}${O[o]}`,d=String(t).toUpperCase();return u.buildWellHoverText({wellId:t,value:l,allValues:H.get(d),tooltipExtra:B.get(d),activeLayerId:f?.id,layerConfigMap:ve,precision:K,valueUnit:q})})),[x,M,O,H,B,f?.id,ve,K,q]),{categoricalGrid:le,categoricalColorScale:oe,uniqueTypes:se,catMax:Ce}=r.useMemo(()=>{if(z!=="categorical")return{categoricalGrid:null,categoricalColorScale:null,uniqueTypes:[],catMax:0};const e=new Set;let a=!1;for(const p of ae)for(const A of p)A?e.add(A):a=!0;a&&e.add("empty");const l=[...e].sort(),o=new Map;l.forEach((p,A)=>o.set(p,A));const t=ae.map(p=>p.map(A=>A===null?o.get("empty")??0:o.get(A)??o.get("empty")??0)),d=l.length,g=[];if(d===1){const p=V[l[0]]||L;g.push([0,p]),g.push([1,p])}else l.forEach((p,A)=>{const X=V[p]||L,J=A/(d-1),R=.5/(d-1),ne=Math.max(0,J-R),ce=Math.min(1,J+R-n.PLATEMAP_CONSTANTS.COLOR_SCALE_EPSILON);g.push([ne,X]),g.push([ce,X])});return{categoricalGrid:t,categoricalColorScale:g,uniqueTypes:l,catMax:d-1}},[z,ae,V,L]),Ne=r.useMemo(()=>{if(!y||y.length===0)return[];const e=[];for(const a of y){const l=u.parseRegionWells(a.wells,M,O);if(!l)continue;const o=.49,t=l.minCol+1-o,d=l.maxCol+1+o,g=l.minRow-o,p=l.maxRow+o;e.push({type:"rect",xref:"x",yref:"y",x0:t,x1:d,y0:g,y1:p,line:{color:a.borderColor||n.COLORS.textDark,width:a.borderWidth??2},fillcolor:a.fillColor||"transparent",layer:"above"})}return e},[y,M,O]);r.useEffect(()=>{if(!U.current)return;const e=z==="categorical",a=e&&le?le:ye,l=e&&oe?oe:Le,o=e?0:Oe,t=e?Ce||1:D,d=e?!1:Te,{xData:g,yData:p,colorData:A,textData:X}=u.flattenGridData(a,M,Ee,c,i,o),J=[{x:g,y:p,mode:"markers",type:"scatter",marker:{symbol:$,size:te,color:A,colorscale:l,cmin:o,cmax:t,showscale:d,colorbar:u.buildColorbarConfig(T?.position??"right",q,T?.title),line:{color:h.gridColor,width:1}},hoverinfo:"none",text:X}],R=T?.position??"right",ne={autosize:!1,title:v?{text:v,font:{family:G.CHART_FONT_FAMILY,size:20,color:h.textSecondary},x:u.calculateTitleX(R),xanchor:"center",y:.98,yanchor:"top"}:void 0,width:E,height:b,margin:u.buildPlotMargins(R,!!v,!!P),xaxis:{title:{text:ge||"",font:{size:16,color:h.textSecondary,family:G.CHART_FONT_FAMILY},standoff:15},side:"top",fixedrange:!0,dtick:1,range:[.5,i+.5],automargin:!1,tickmode:"array",tickvals:Array.from({length:i},(pe,S)=>S+1),ticktext:O.map(String),tickangle:0,tickfont:{size:i>24?8:n.PLATEMAP_CONSTANTS.FONT_SIZE_LARGE},domain:u.calculateAxisDomain(R)},yaxis:{title:{text:P||"",font:{size:16,color:h.textSecondary,family:G.CHART_FONT_FAMILY},standoff:15},fixedrange:!0,dtick:1,range:[c+n.PLATEMAP_CONSTANTS.LABEL_CENTER_OFFSET,n.PLATEMAP_CONSTANTS.LABEL_CENTER_OFFSET],automargin:!1,tickmode:"array",tickvals:Array.from({length:c},(pe,S)=>S),ticktext:M.map(String),tickfont:{size:c>16?8:n.PLATEMAP_CONSTANTS.FONT_SIZE_LARGE}},paper_bgcolor:h.paperBg,plot_bgcolor:h.plotBg,font:{family:G.CHART_FONT_FAMILY,color:h.textSecondary},shapes:Ne},ce={responsive:!0,displayModeBar:!1,displaylogo:!1};let Pe=!1,ie=null;return ke.loadPlotly().then(pe=>{if(Pe||!U.current)return;const S=U.current;pe.newPlot(S,J,ne,ce),xe(S),S.on("plotly_click",lt=>{if(!Q.current)return;const ue=lt.points[0];if(ue){const be=M,ze=O,Fe=be.indexOf(ue.y),De=ze.indexOf(ue.x);if(Fe>=0&&De>=0){const Ie=`${be[Fe]}${ze[De]}`,je=String(Ie).toUpperCase(),ot=H.get(je),st=B.get(je),rt={wellId:Ie,values:ot,tooltipData:st};Q.current?.(rt)}}}),ie=S}),()=>{Pe=!0,ie&&ke.getLoadedPlotly().purge(ie)}},[ye,O,M,Le,Te,Oe,D,q,v,ge,P,E,b,Ee,K,B,H,x,z,le,oe,se.length,Ce,Ne,c,i,T,$,te,h,xe]);const Qe=()=>!m||m.length<=1?null:s.jsx("div",{className:"platemap-layer-selector",children:m.map(e=>{const a=f?.id===e.id;return s.jsx(ct.Button,{variant:a?"default":"outline",size:"sm",onClick:()=>{We(e.id),$e?.(e.id)},children:e.name},e.id)})}),j=T?.position??"right",re=T?.fontSize??12,et=T?.itemSpacing??4,Y=T?.swatchSize??16,Re=T?.title,we=120,k=j==="top"||j==="bottom",tt=()=>{const e=z==="categorical"&&se.length>0,a=y&&y.length>0;if(!Ze||!e&&!a)return k?null:s.jsx("div",{className:"platemap-legend-placeholder",style:{width:we}});const l=["platemap-legend"];k?l.push("platemap-legend--horizontal"):j==="left"?l.push("platemap-legend--left"):j==="right"&&l.push("platemap-legend--right");const o={gap:`${et}px`,width:k?void 0:we};return s.jsxs("div",{className:l.join(" "),style:o,children:[Re&&s.jsx("div",{className:`platemap-legend__title${k?" platemap-legend__title--horizontal":""}`,style:{fontSize:`${re}px`},children:Re}),e&&se.map(t=>s.jsxs("div",{className:"platemap-legend__item",children:[s.jsx("div",{className:"platemap-legend__swatch",style:{width:`${Y}px`,height:`${Y}px`,backgroundColor:V[t]||L}}),s.jsx("span",{className:"platemap-legend__label platemap-legend__label--capitalize",style:{fontSize:`${re}px`},children:t})]},t)),a&&y.map(t=>s.jsxs("div",{className:"platemap-legend__item",children:[s.jsx("div",{className:"platemap-legend__swatch platemap-legend__swatch--region",style:{width:`${Y}px`,height:`${Y}px`,backgroundColor:t.fillColor||"transparent",border:`${t.borderWidth||2}px solid ${t.borderColor||n.COLORS.regionBorder}`}}),s.jsx("span",{className:"platemap-legend__label",style:{fontSize:`${re}px`},children:t.name})]},t.id))]})},Z=s.jsxs("div",{className:"relative",children:[s.jsx("div",{ref:U,className:"platemap-plot",style:{width:E,height:b}}),Xe]}),W=tt(),at=()=>{switch(j){case"left":return s.jsxs("div",{className:"platemap-plot-wrapper platemap-plot-wrapper--vertical",children:[W,Z]});case"top":return s.jsxs("div",{className:"platemap-plot-wrapper platemap-plot-wrapper--horizontal",children:[W,Z]});case"bottom":return s.jsxs("div",{className:"platemap-plot-wrapper platemap-plot-wrapper--horizontal",children:[Z,W]});default:return s.jsxs("div",{className:"platemap-plot-wrapper platemap-plot-wrapper--vertical",children:[Z,W]})}};return s.jsxs("div",{className:"platemap-container",style:{width:k?void 0:E},children:[Qe(),at()]})};exports.DEFAULT_CATEGORY_COLORS=n.DEFAULT_CATEGORY_COLORS;exports.PLATE_FORMAT_1536=w.PLATE_FORMAT_1536;exports.PLATE_FORMAT_384=w.PLATE_FORMAT_384;exports.PLATE_FORMAT_96=w.PLATE_FORMAT_96;exports.PLATE_FORMAT_CUSTOM=w.PLATE_FORMAT_CUSTOM;exports.PlateMap=it;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),r=require("react");;/* empty css                */const nt=require("../ChartTooltip/ChartTooltip.cjs"),ke=require("../plotly-loader.cjs"),n=require("./constants.cjs"),w=require("./types.cjs"),u=require("./utils.cjs"),ct=require("../../../ui/button.cjs"),G=require("../../../hooks/use-plotly-theme.cjs"),it=({data:_,layerConfigs:de,initialLayerId:Ge,onLayerChange:$e,plateFormat:me=w.PLATE_FORMAT_96,rows:Ue,columns:qe,visualizationMode:Ve="heatmap",categoryColors:fe,regions:y,title:v,xTitle:ge,yTitle:P,xLabels:Ae,yLabels:_e,colorScale:He=n.DEFAULT_COLOR_SCALE,valueMin:Be,valueMax:Ye,emptyWellColor:L=n.COLORS.emptyWell,showColorBar:Te=!0,showLegend:Ze=!0,legendConfig:T,width:E=800,height:b=500,precision:K=0,markerShape:$="circle",onWellClick:he})=>{const U=r.useRef(null),h=G.usePlotlyTheme(),Q=r.useRef(he);Q.current=he;const[ee,We]=r.useState(Ge);let c,i;if(me===w.PLATE_FORMAT_CUSTOM)c=Ue??8,i=qe??12;else{const e=n.PLATE_CONFIGS[me];c=e.rows,i=e.columns}const te=r.useMemo(()=>u.calculateMarkerSize(E,b,c,i,$,!!v,!!P),[E,b,c,i,$,v,P]),{bindTooltip:xe,tooltipElement:Xe}=nt.useChartTooltip({hoverDistance:Math.ceil(te/2)}),m=r.useMemo(()=>{if(Array.isArray(_)&&_.length>0&&"wellId"in _[0]){const e=_;if(u.hasMultiValueWells(e))return u.extractLayers(e,de)}return null},[_,de]),f=r.useMemo(()=>!m||m.length===0?null:ee?m.find(e=>e.id===ee)??m[0]:m[0],[m,ee]),z=f?.visualizationMode??Ve,C=f?.colorScale??He,Je=f?.valueMin??Be,Ke=f?.valueMax??Ye,q=f?.valueUnit?` ${f.valueUnit}`:"",V=r.useMemo(()=>({...n.DEFAULT_CATEGORY_COLORS,...fe,...f?.categoryColors}),[fe,f?.categoryColors]),Me=f?.id,{grid:x,categoriesGrid:ae,allValuesMap:H,tooltipDataMap:B}=r.useMemo(()=>{let e,a=Array.from({length:c},()=>Array(i).fill(null)),l=new Map,o=new Map;if(Array.isArray(_)&&_.length>0){const t=u.wellDataToGrid(_,c,i,Me);e=t.grid,a=t.categories,l=t.allValues,o=t.tooltipData}else e=Array.from({length:c},()=>Array.from({length:i},()=>Math.random()*n.PLATEMAP_CONSTANTS.MAX_RANDOM_VALUE));return{grid:e,categoriesGrid:a,allValuesMap:l,tooltipDataMap:o}},[_,c,i,Me]),M=r.useMemo(()=>_e??u.generateRowLabels(c),[_e,c]),O=r.useMemo(()=>Ae??u.generateColumnLabels(i),[Ae,i]),Se=u.calculateValueRange(x),F=Je??Se.min,D=Ke??Se.max,I=x.some(e=>e.includes(null)),N=F-(D-F)*n.PLATEMAP_CONSTANTS.SENTINEL_RATIO-1,ye=r.useMemo(()=>I?x.map(e=>e.map(a=>a===null?N:a)):x,[I,x,N]),Le=r.useMemo(()=>{if(!I)return C;let e;if(typeof C=="string"){const t=n.NAMED_COLORSCALES[C];if(t)e=t;else return C}else e=C;const a=D-N,l=(F-N)/a,o=[[0,L],[l*n.PLATEMAP_CONSTANTS.COLOR_SCALE_THRESHOLD,L]];for(const[t,d]of e){const g=l+t*(1-l);o.push([g,d])}return o},[C,I,F,D,N,L]),Oe=I?N:F,ve=r.useMemo(()=>{const e=new Map;if(m)for(const a of m)e.set(a.id,a);return e},[m]),Ee=r.useMemo(()=>x.map((e,a)=>e.map((l,o)=>{const t=`${M[a]}${O[o]}`,d=String(t).toUpperCase();return u.buildWellHoverText({wellId:t,value:l,allValues:H.get(d),tooltipExtra:B.get(d),activeLayerId:f?.id,layerConfigMap:ve,precision:K,valueUnit:q})})),[x,M,O,H,B,f?.id,ve,K,q]),{categoricalGrid:le,categoricalColorScale:oe,uniqueTypes:se,catMax:Ce}=r.useMemo(()=>{if(z!=="categorical")return{categoricalGrid:null,categoricalColorScale:null,uniqueTypes:[],catMax:0};const e=new Set;let a=!1;for(const p of ae)for(const A of p)A?e.add(A):a=!0;a&&e.add("empty");const l=[...e].sort(),o=new Map;l.forEach((p,A)=>o.set(p,A));const t=ae.map(p=>p.map(A=>A===null?o.get("empty")??0:o.get(A)??o.get("empty")??0)),d=l.length,g=[];if(d===1){const p=V[l[0]]||L;g.push([0,p]),g.push([1,p])}else l.forEach((p,A)=>{const X=V[p]||L,J=A/(d-1),R=.5/(d-1),ne=Math.max(0,J-R),ce=Math.min(1,J+R-n.PLATEMAP_CONSTANTS.COLOR_SCALE_EPSILON);g.push([ne,X]),g.push([ce,X])});return{categoricalGrid:t,categoricalColorScale:g,uniqueTypes:l,catMax:d-1}},[z,ae,V,L]),Ne=r.useMemo(()=>{if(!y||y.length===0)return[];const e=[];for(const a of y){const l=u.parseRegionWells(a.wells,M,O);if(!l)continue;const o=.49,t=l.minCol+1-o,d=l.maxCol+1+o,g=l.minRow-o,p=l.maxRow+o;e.push({type:"rect",xref:"x",yref:"y",x0:t,x1:d,y0:g,y1:p,line:{color:a.borderColor||n.COLORS.textDark,width:a.borderWidth??2},fillcolor:a.fillColor||"transparent",layer:"above"})}return e},[y,M,O]);r.useEffect(()=>{if(!U.current)return;const e=z==="categorical",a=e&&le?le:ye,l=e&&oe?oe:Le,o=e?0:Oe,t=e?Ce||1:D,d=e?!1:Te,{xData:g,yData:p,colorData:A,textData:X}=u.flattenGridData(a,M,Ee,c,i,o),J=[{x:g,y:p,mode:"markers",type:"scatter",marker:{symbol:$,size:te,color:A,colorscale:l,cmin:o,cmax:t,showscale:d,colorbar:u.buildColorbarConfig(T?.position??"right",q,T?.title),line:{color:h.gridColor,width:1}},hoverinfo:"none",text:X}],R=T?.position??"right",ne={autosize:!1,title:v?{text:v,font:{family:G.CHART_FONT_FAMILY,size:20,color:h.textSecondary},x:u.calculateTitleX(R),xanchor:"center",y:.98,yanchor:"top"}:void 0,width:E,height:b,margin:u.buildPlotMargins(R,!!v,!!P),xaxis:{title:{text:ge||"",font:{size:16,color:h.textSecondary,family:G.CHART_FONT_FAMILY},standoff:15},side:"top",fixedrange:!0,dtick:1,range:[.5,i+.5],automargin:!1,tickmode:"array",tickvals:Array.from({length:i},(pe,S)=>S+1),ticktext:O.map(String),tickangle:0,tickfont:{size:i>24?8:n.PLATEMAP_CONSTANTS.FONT_SIZE_LARGE},domain:u.calculateAxisDomain(R)},yaxis:{title:{text:P||"",font:{size:16,color:h.textSecondary,family:G.CHART_FONT_FAMILY},standoff:15},fixedrange:!0,dtick:1,range:[c+n.PLATEMAP_CONSTANTS.LABEL_CENTER_OFFSET,n.PLATEMAP_CONSTANTS.LABEL_CENTER_OFFSET],automargin:!1,tickmode:"array",tickvals:Array.from({length:c},(pe,S)=>S),ticktext:M.map(String),tickfont:{size:c>16?8:n.PLATEMAP_CONSTANTS.FONT_SIZE_LARGE}},paper_bgcolor:h.paperBg,plot_bgcolor:h.plotBg,font:{family:G.CHART_FONT_FAMILY,color:h.textSecondary},shapes:Ne},ce={responsive:!0,displayModeBar:!1,displaylogo:!1};let Pe=!1,ie=null;return ke.loadPlotly().then(pe=>{if(Pe||!U.current)return;const S=U.current;pe.newPlot(S,J,ne,ce),xe(S),S.on("plotly_click",lt=>{if(!Q.current)return;const ue=lt.points[0];if(ue){const be=M,ze=O,Fe=be.indexOf(ue.y),De=ze.indexOf(ue.x);if(Fe>=0&&De>=0){const Ie=`${be[Fe]}${ze[De]}`,je=String(Ie).toUpperCase(),ot=H.get(je),st=B.get(je),rt={wellId:Ie,values:ot,tooltipData:st};Q.current?.(rt)}}}),ie=S}),()=>{Pe=!0,ie&&ke.getLoadedPlotly().purge(ie)}},[ye,O,M,Le,Te,Oe,D,q,v,ge,P,E,b,Ee,K,B,H,x,z,le,oe,se.length,Ce,Ne,c,i,T,$,te,h,xe]);const Qe=()=>!m||m.length<=1?null:s.jsx("div",{className:"platemap-layer-selector",children:m.map(e=>{const a=f?.id===e.id;return s.jsx(ct.Button,{variant:a?"default":"outline",size:"sm",onClick:()=>{We(e.id),$e?.(e.id)},children:e.name},e.id)})}),j=T?.position??"right",re=T?.fontSize??12,et=T?.itemSpacing??4,Y=T?.swatchSize??16,Re=T?.title,we=120,k=j==="top"||j==="bottom",tt=()=>{const e=z==="categorical"&&se.length>0,a=y&&y.length>0;if(!Ze||!e&&!a)return k?null:s.jsx("div",{className:"platemap-legend-placeholder",style:{width:we}});const l=["platemap-legend"];k?l.push("platemap-legend--horizontal"):j==="left"?l.push("platemap-legend--left"):j==="right"&&l.push("platemap-legend--right");const o={gap:`${et}px`,width:k?void 0:we};return s.jsxs("div",{className:l.join(" "),style:o,children:[Re&&s.jsx("div",{className:`platemap-legend__title${k?" platemap-legend__title--horizontal":""}`,style:{fontSize:`${re}px`},children:Re}),e&&se.map(t=>s.jsxs("div",{className:"platemap-legend__item",children:[s.jsx("div",{className:"platemap-legend__swatch",style:{width:`${Y}px`,height:`${Y}px`,backgroundColor:V[t]||L}}),s.jsx("span",{className:"platemap-legend__label platemap-legend__label--capitalize",style:{fontSize:`${re}px`},children:t})]},t)),a&&y.map(t=>s.jsxs("div",{className:"platemap-legend__item",children:[s.jsx("div",{className:"platemap-legend__swatch platemap-legend__swatch--region",style:{width:`${Y}px`,height:`${Y}px`,backgroundColor:t.fillColor||"transparent",border:`${t.borderWidth||2}px solid ${t.borderColor||n.COLORS.regionBorder}`}}),s.jsx("span",{className:"platemap-legend__label",style:{fontSize:`${re}px`},children:t.name})]},t.id))]})},Z=s.jsxs("div",{className:"relative",children:[s.jsx("div",{ref:U,className:"platemap-plot",style:{width:E,height:b}}),Xe]}),W=tt(),at=()=>{switch(j){case"left":return s.jsxs("div",{className:"platemap-plot-wrapper platemap-plot-wrapper--vertical",children:[W,Z]});case"top":return s.jsxs("div",{className:"platemap-plot-wrapper platemap-plot-wrapper--horizontal",children:[W,Z]});case"bottom":return s.jsxs("div",{className:"platemap-plot-wrapper platemap-plot-wrapper--horizontal",children:[Z,W]});default:return s.jsxs("div",{className:"platemap-plot-wrapper platemap-plot-wrapper--vertical",children:[Z,W]})}};return s.jsxs("div",{className:"platemap-container",style:{width:k?void 0:E},children:[Qe(),at()]})};exports.DEFAULT_CATEGORY_COLORS=n.DEFAULT_CATEGORY_COLORS;exports.PLATE_FORMAT_1536=w.PLATE_FORMAT_1536;exports.PLATE_FORMAT_384=w.PLATE_FORMAT_384;exports.PLATE_FORMAT_96=w.PLATE_FORMAT_96;exports.PLATE_FORMAT_CUSTOM=w.PLATE_FORMAT_CUSTOM;exports.PlateMap=it;
 //# sourceMappingURL=PlateMap.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlateMap.cjs","sources":["../../../../src/components/charts/PlateMap/PlateMap.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport \"./PlateMap.scss\";\nimport { useChartTooltip } from \"../ChartTooltip\";\nimport { getLoadedPlotly, loadPlotly } from \"../plotly-loader\";\n\nimport {\n  PLATE_CONFIGS,\n  DEFAULT_COLOR_SCALE,\n  COLORS,\n  DEFAULT_CATEGORY_COLORS,\n  PLATEMAP_CONSTANTS,\n  NAMED_COLORSCALES,\n} from \"./constants\";\nimport {\n  PLATE_FORMAT_96,\n  PLATE_FORMAT_CUSTOM,\n} from \"./types\";\nimport {\n  generateRowLabels,\n  generateColumnLabels,\n  wellDataToGrid,\n  calculateValueRange,\n  hasMultiValueWells,\n  extractLayers,\n  parseRegionWells,\n  buildWellHoverText,\n  buildColorbarConfig,\n  buildPlotMargins,\n  calculateTitleX,\n  calculateAxisDomain,\n  flattenGridData,\n  calculateMarkerSize,\n} from \"./utils\";\n\nimport type {\n  PlateMapProps,\n  LayerConfig,\n  WellData,\n} from \"./types\";\nimport type Plotly from \"plotly.js-dist\";\n\n// Re-export types and constants for external consumers\nexport * from \"./types\";\nexport { DEFAULT_CATEGORY_COLORS } from \"./constants\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { CHART_FONT_FAMILY, usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\n\n/**\n * PlateMap component for visualizing well plate data as a heatmap or categorical display.\n *\n * **Supported Plate Formats:**\n * - 96-well (8 rows × 12 columns, wells A1-H12)\n * - 384-well (16 rows × 24 columns, wells A1-P24)\n * - 1536-well (32 rows × 48 columns, wells A1-AF48)\n * - Custom dimensions with user-specified rows/columns\n *\n * **Visualization Modes:**\n * - `\"heatmap\"`: Continuous color gradient for quantitative values\n * - `\"categorical\"`: Discrete colors for well types (sample, control, empty)\n *\n * **Features:**\n * - Multiple data layers with independent visualization settings\n * - Control region highlighting with borders and fill colors\n * - Configurable color scales, tooltips, and click interactions\n * - Support for WellData arrays with multi-layer visualization\n *\n * **Data Format:**\n * - **WellData array**: `[{ wellId: \"A1\", values: { RFU: 100 }, tooltipData: {...} }, ...]`\n *\n */\nconst PlateMap: React.FC<PlateMapProps> = ({\n  data,\n  layerConfigs,\n  initialLayerId,\n  onLayerChange,\n  plateFormat = PLATE_FORMAT_96,\n  rows: customRows,\n  columns: customColumns,\n  visualizationMode: propVisualizationMode = \"heatmap\",\n  categoryColors: customCategoryColors,\n  regions,\n  title,\n  xTitle,\n  yTitle,\n  xLabels: customXLabels,\n  yLabels: customYLabels,\n  colorScale: propColorScale = DEFAULT_COLOR_SCALE,\n  valueMin: propValueMin,\n  valueMax: propValueMax,\n  emptyWellColor = COLORS.emptyWell,\n  showColorBar = true,\n  showLegend = true,\n  legendConfig,\n  width = 800,\n  height = 500,\n  precision = 0,\n  markerShape = \"circle\",\n  onWellClick,\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n  const onWellClickRef = useRef(onWellClick);\n  onWellClickRef.current = onWellClick;\n\n  // Internal state for layer toggling, initialized with initialLayerId\n  const [activeLayerId, setActiveLayerId] = useState<string | undefined>(initialLayerId);\n\n  // Determine plate dimensions\n  let rows: number;\n  let columns: number;\n\n  if (plateFormat === PLATE_FORMAT_CUSTOM) {\n    rows = customRows ?? 8;\n    columns = customColumns ?? 12;\n  } else {\n    const config = PLATE_CONFIGS[plateFormat];\n    rows = config.rows;\n    columns = config.columns;\n  }\n\n  // Diameter (px) of each well marker; also drives the hover hit radius so the\n  // whole circle is hoverable instead of just a small zone around its center\n  const markerSize = useMemo(\n    () => calculateMarkerSize(width, height, rows, columns, markerShape, !!title, !!yTitle),\n    [width, height, rows, columns, markerShape, title, yTitle],\n  );\n  const { bindTooltip, tooltipElement } = useChartTooltip({\n    hoverDistance: Math.ceil(markerSize / 2),\n  });\n\n  // Auto-generate layers from multi-value WellData\n  const effectiveLayers = useMemo((): LayerConfig[] | null => {\n    // Check if data contains multi-value wells\n    if (Array.isArray(data) && data.length > 0 && \"wellId\" in (data[0] as WellData)) {\n      const wellDataArray = data as WellData[];\n      if (hasMultiValueWells(wellDataArray)) {\n        return extractLayers(wellDataArray, layerConfigs);\n      }\n    }\n\n    return null;\n  }, [data, layerConfigs]);\n\n  // Handle layer toggling - determine active layer\n  const activeLayer = useMemo((): LayerConfig | null => {\n    if (!effectiveLayers || effectiveLayers.length === 0) return null;\n    if (activeLayerId) {\n      return effectiveLayers.find((l) => l.id === activeLayerId) ?? effectiveLayers[0];\n    }\n    return effectiveLayers[0];\n  }, [effectiveLayers, activeLayerId]);\n\n  // Get effective props from active layer or default props\n  // Data is always the same - we just change which layer is being visualized\n  const visualizationMode = activeLayer?.visualizationMode ?? propVisualizationMode;\n  const colorScale = activeLayer?.colorScale ?? propColorScale;\n  const valueMin = activeLayer?.valueMin ?? propValueMin;\n  const valueMax = activeLayer?.valueMax ?? propValueMax;\n  // Derive valueUnit from layer config\n  const valueUnit = activeLayer?.valueUnit ? ` ${activeLayer.valueUnit}` : \"\";\n\n  // Merge custom category colors with defaults, including layer-specific colors\n  const categoryColors = useMemo(\n    () => ({ ...DEFAULT_CATEGORY_COLORS, ...customCategoryColors, ...activeLayer?.categoryColors }),\n    [customCategoryColors, activeLayer?.categoryColors]\n  );\n\n  // Convert data to grid format - memoize to prevent re-render issues\n  // Use activeLayer.id to extract the appropriate value from multi-value wells\n  const activeLayerId_ = activeLayer?.id;\n  const { grid, categoriesGrid, allValuesMap, tooltipDataMap } = useMemo(() => {\n    let resultGrid: (number | null)[][];\n    let resultCategories: (string | null)[][] = Array.from({ length: rows }, () =>\n      Array(columns).fill(null)\n    );\n    let resultAllValues = new Map<string, Record<string, string | number | null>>();\n    let resultTooltipData = new Map<string, Record<string, unknown>>();\n\n    if (Array.isArray(data) && data.length > 0) {\n      // WellData array format - pass activeLayerId to extract the right layer\n      const result = wellDataToGrid(data, rows, columns, activeLayerId_);\n      resultGrid = result.grid;\n      resultCategories = result.categories;\n      resultAllValues = result.allValues;\n      resultTooltipData = result.tooltipData;\n    } else {\n      // Generate random data for demonstration when no data provided\n      resultGrid = Array.from({ length: rows }, () =>\n        Array.from({ length: columns }, () => Math.random() * PLATEMAP_CONSTANTS.MAX_RANDOM_VALUE)\n      );\n    }\n\n    return { grid: resultGrid, categoriesGrid: resultCategories, allValuesMap: resultAllValues, tooltipDataMap: resultTooltipData };\n  }, [data, rows, columns, activeLayerId_]);\n\n  // Generate labels - use custom labels if provided, otherwise auto-generate.\n  // Memoized so a tooltip-driven re-render doesn't change their identity and\n  // needlessly rebuild the plot (which would clear the open tooltip).\n  const rowLabels = useMemo(\n    () => customYLabels ?? generateRowLabels(rows),\n    [customYLabels, rows],\n  );\n  const colLabels = useMemo(\n    () => customXLabels ?? generateColumnLabels(columns),\n    [customXLabels, columns],\n  );\n\n  // Calculate value range if not provided\n  const range = calculateValueRange(grid);\n  const zMin = valueMin ?? range.min;\n  const zMax = valueMax ?? range.max;\n\n  // Check if grid has any null values\n  const hasNullValues = grid.some(row => row.includes(null));\n\n  // Create sentinel value for empty wells (below the data range)\n  // This allows us to show emptyWellColor for null cells\n  const sentinelValue = zMin - (zMax - zMin) * PLATEMAP_CONSTANTS.SENTINEL_RATIO - 1;\n\n  // Replace null values with sentinel for Plotly rendering\n  const displayGrid = useMemo(\n    () =>\n      hasNullValues\n        ? grid.map((row) => row.map((val) => (val === null ? sentinelValue : val)))\n        : grid,\n    [hasNullValues, grid, sentinelValue],\n  );\n\n  // Extend colorscale to include emptyWellColor at the bottom for null values\n  const effectiveColorScale = useMemo(() => {\n    if (!hasNullValues) return colorScale;\n\n    // Convert colorScale to array format if it's a named string scale\n    let arrayColorScale: Array<[number, string]>;\n    if (typeof colorScale === \"string\") {\n      // Look up the named scale in our mapping\n      const namedScale = NAMED_COLORSCALES[colorScale];\n      if (namedScale) {\n        arrayColorScale = namedScale;\n      } else {\n        // Unknown named scale - can't extend it, return as-is\n        // This is a fallback for custom/unknown Plotly scale names\n        return colorScale;\n      }\n    } else {\n      arrayColorScale = colorScale;\n    }\n\n    // For array colorscales, prepend emptyWellColor at position 0\n    // and shift all other positions proportionally\n    const totalRange = zMax - sentinelValue;\n    const dataStartRatio = (zMin - sentinelValue) / totalRange;\n\n    // Create new colorscale with emptyWellColor at the bottom\n    const extendedScale: Array<[number, string]> = [\n      [0, emptyWellColor],\n      [dataStartRatio * PLATEMAP_CONSTANTS.COLOR_SCALE_THRESHOLD, emptyWellColor], // Small band for empty wells\n    ];\n\n    // Remap original colorscale positions to the remaining range\n    for (const [pos, color] of arrayColorScale) {\n      const newPos = dataStartRatio + pos * (1 - dataStartRatio);\n      extendedScale.push([newPos, color]);\n    }\n\n    return extendedScale;\n  }, [colorScale, hasNullValues, zMin, zMax, sentinelValue, emptyWellColor]);\n\n  // Effective zMin includes sentinel value if we have nulls\n  const effectiveZMin = hasNullValues ? sentinelValue : zMin;\n\n  // Create a lookup map for layer configs to get valueUnit for each layer\n  const layerConfigMap = useMemo(() => {\n    const map = new Map<string, LayerConfig>();\n    if (effectiveLayers) {\n      for (const layer of effectiveLayers) {\n        map.set(layer.id, layer);\n      }\n    }\n    return map;\n  }, [effectiveLayers]);\n\n  // Build custom hover text matrix - shows ALL values regardless of active layer.\n  // Memoized so its identity is stable across tooltip-driven re-renders.\n  const hoverText = useMemo<string[][]>(\n    () =>\n      grid.map((row, rowIdx) =>\n        row.map((val, colIdx) => {\n          const wellId = `${rowLabels[rowIdx]}${colLabels[colIdx]}`;\n          const wellIdUpper = String(wellId).toUpperCase();\n          return buildWellHoverText({\n            wellId,\n            value: val,\n            allValues: allValuesMap.get(wellIdUpper),\n            tooltipExtra: tooltipDataMap.get(wellIdUpper),\n            activeLayerId: activeLayer?.id,\n            layerConfigMap,\n            precision,\n            valueUnit,\n          });\n        })\n      ),\n    [grid, rowLabels, colLabels, allValuesMap, tooltipDataMap, activeLayer?.id, layerConfigMap, precision, valueUnit],\n  );\n\n  // Build categorical data for categorical mode\n  const { categoricalGrid, categoricalColorScale, uniqueTypes, catMax } = useMemo(() => {\n    if (visualizationMode !== \"categorical\") {\n      return { categoricalGrid: null, categoricalColorScale: null, uniqueTypes: [], catMax: 0 };\n    }\n\n    // Collect unique categories from the categoriesGrid\n    const typesSet = new Set<string>();\n    let hasNullCategory = false;\n    for (const row of categoriesGrid) {\n      for (const category of row) {\n        if (category) {\n          typesSet.add(category);\n        } else {\n          hasNullCategory = true;\n        }\n      }\n    }\n    // Only include \"empty\" if there are actual null wells\n    if (hasNullCategory) {\n      typesSet.add(\"empty\");\n    }\n    const types = [...typesSet].sort();\n\n    // Create numeric grid where each category maps to an index\n    const typeToIndex = new Map<string, number>();\n    types.forEach((type, idx) => typeToIndex.set(type, idx));\n\n    const catGrid: number[][] = categoriesGrid.map((row) =>\n      row.map((category) => {\n        if (category === null) {\n          return typeToIndex.get(\"empty\") ?? 0;\n        }\n        return typeToIndex.get(category) ?? typeToIndex.get(\"empty\") ?? 0;\n      })\n    );\n\n    // Build discrete colorscale for categories\n    // The grid contains integer indices 0, 1, 2, ... (numTypes - 1)\n    // With cmin=0 and cmax=numTypes-1, Plotly maps:\n    //   index 0 -> normalized 0.0\n    //   index (numTypes-1) -> normalized 1.0\n    // We need each index to map to a distinct color band\n    const numTypes = types.length;\n    const catColorScale: Array<[number, string]> = [];\n\n    if (numTypes === 1) {\n      // Single type: entire range is one color\n      const color = categoryColors[types[0]] || emptyWellColor;\n      catColorScale.push([0, color]);\n      catColorScale.push([1, color]);\n    } else {\n      // Multiple types: create bands for each index\n      // Index i maps to normalized value i / (numTypes - 1)\n      types.forEach((type, idx) => {\n        const color = categoryColors[type] || emptyWellColor;\n        const normalizedPos = idx / (numTypes - 1);\n        // Create a small band around each position\n        const bandHalf = 0.5 / (numTypes - 1);\n        const start = Math.max(0, normalizedPos - bandHalf);\n        const end = Math.min(1, normalizedPos + bandHalf - PLATEMAP_CONSTANTS.COLOR_SCALE_EPSILON);\n        catColorScale.push([start, color]);\n        catColorScale.push([end, color]);\n      });\n    }\n\n    // cmax should be numTypes - 1 to match the index range\n    return { categoricalGrid: catGrid, categoricalColorScale: catColorScale, uniqueTypes: types, catMax: numTypes - 1 };\n  }, [visualizationMode, categoriesGrid, categoryColors, emptyWellColor]);\n\n  // Build Plotly shapes for highlighted regions\n  const regionShapes = useMemo(() => {\n    if (!regions || regions.length === 0) {\n      return [];\n    }\n\n    const shapes: Array<Partial<Plotly.Shape>> = [];\n\n    for (const region of regions) {\n      const bounds = parseRegionWells(region.wells, rowLabels, colLabels);\n      if (!bounds) continue;\n\n      // Plotly heatmap uses the actual label values for positioning.\n      // colLabels are 1-indexed (1, 2, 3, ...), so we need to convert from 0-indexed bounds.\n      // Each cell is centered on its label, so we offset by inset to cover the cell.\n      // For columns: bounds.minCol=0 means column label 1, so x0 = 1 - inset\n      // For rows: bounds.minRow=0 means row index 0, which is correct for y-axis\n      //\n      // Use 0.49 inset to place boundary just inside cell edge,\n      // avoiding line doubling when adjacent regions share a border\n      const inset = 0.49;\n      const x0 = (bounds.minCol + 1) - inset;\n      const x1 = (bounds.maxCol + 1) + inset;\n      const y0 = bounds.minRow - inset;\n      const y1 = bounds.maxRow + inset;\n\n      shapes.push({\n        type: \"rect\",\n        xref: \"x\",\n        yref: \"y\",\n        x0,\n        x1,\n        y0,\n        y1,\n        line: {\n          color: region.borderColor || COLORS.textDark,\n          width: region.borderWidth ?? 2,\n        },\n        fillcolor: region.fillColor || \"transparent\",\n        layer: \"above\",\n      });\n    }\n\n    return shapes;\n  }, [regions, rowLabels, colLabels]);\n\n  useEffect(() => {\n    if (!plotRef.current) return;\n\n    // Determine which grid and colorscale to use based on mode\n    const isCategorical = visualizationMode === \"categorical\";\n    const plotZ = isCategorical && categoricalGrid ? categoricalGrid : displayGrid;\n    const plotColorScale = isCategorical && categoricalColorScale ? categoricalColorScale : effectiveColorScale;\n    const plotZMin = isCategorical ? 0 : effectiveZMin;\n    const plotZMax = isCategorical ? (catMax || 1) : zMax;\n    const plotShowScale = isCategorical ? false : showColorBar;\n\n    // Flatten 2D grid data into arrays for scatter plot\n    const { xData, yData, colorData, textData } = flattenGridData(\n      plotZ,\n      rowLabels,\n      hoverText,\n      rows,\n      columns,\n      plotZMin\n    );\n\n    // Create scatter plot with markers\n    const plotData: Plotly.Data[] = [\n      {\n        x: xData,\n        y: yData,\n        mode: \"markers\" as const,\n        type: \"scatter\" as const,\n        marker: {\n          symbol: markerShape,\n          size: markerSize,\n          color: colorData,\n          colorscale: plotColorScale,\n          cmin: plotZMin,\n          cmax: plotZMax,\n          showscale: plotShowScale,\n          colorbar: buildColorbarConfig(\n            legendConfig?.position ?? \"right\",\n            valueUnit,\n            legendConfig?.title\n          ),\n          line: {\n            color: theme.gridColor,\n            width: 1,\n          },\n        },\n        hoverinfo: \"none\" as const,\n        text: textData,\n      },\n    ];\n\n    const legendPosition = legendConfig?.position ?? \"right\";\n\n    const layout = {\n      autosize: false, // Prevent auto-sizing to maintain consistent layout\n      title: title\n        ? {\n            text: title,\n            font: {\n              family: CHART_FONT_FAMILY,\n              size: 20,\n              color: theme.textSecondary,\n            },\n            x: calculateTitleX(legendPosition),\n            xanchor: \"center\" as const,\n            y: 0.98,\n            yanchor: \"top\" as const,\n          }\n        : undefined,\n      width,\n      height,\n      margin: buildPlotMargins(legendPosition, !!title, !!yTitle),\n      xaxis: {\n        title: {\n          text: xTitle || \"\",\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: CHART_FONT_FAMILY,\n          },\n          standoff: 15,\n        },\n        side: \"top\" as const,\n        fixedrange: true,\n        dtick: 1,\n        range: [0.5, columns + 0.5], // Explicit range to prevent auto-padding\n        automargin: false, // Prevent auto margin adjustment\n        tickmode: \"array\" as const,\n        tickvals: Array.from({ length: columns }, (_, i) => i + 1),\n        ticktext: colLabels.map(String),\n        tickangle: 0, // Keep labels horizontal\n        tickfont: { size: columns > 24 ? 8 : PLATEMAP_CONSTANTS.FONT_SIZE_LARGE }, // Smaller font for high-density plates\n        // Adjust domain based on legend position to prevent colorbar overlap\n        domain: calculateAxisDomain(legendPosition),\n      },\n      yaxis: {\n        title: {\n          text: yTitle || \"\",\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: CHART_FONT_FAMILY,\n          },\n          standoff: 15,\n        },\n        fixedrange: true,\n        dtick: 1,\n        range: [rows + PLATEMAP_CONSTANTS.LABEL_CENTER_OFFSET, PLATEMAP_CONSTANTS.LABEL_CENTER_OFFSET], // Reversed range: high to low puts row A at top\n        automargin: false, // Prevent auto margin adjustment\n        tickmode: \"array\" as const,\n        tickvals: Array.from({ length: rows }, (_, i) => i),\n        ticktext: rowLabels.map(String),\n        tickfont: { size: rows > 16 ? 8 : PLATEMAP_CONSTANTS.FONT_SIZE_LARGE }, // Smaller font for high-density plates\n      },\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\n      font: {\n        family: CHART_FONT_FAMILY,\n        color: theme.textSecondary,\n      },\n      shapes: regionShapes,\n    };\n\n    const config = {\n      responsive: true,\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      const currentRef = plotRef.current;\n      plotly.newPlot(currentRef, plotData, layout, config);\n      bindTooltip(currentRef);\n\n      // Always attach click handler - check onWellClickRef.current inside callback\n      // This ensures handler is registered even if onWellClick is provided after initial render\n      (currentRef as unknown as Plotly.PlotlyHTMLElement).on(\"plotly_click\", (eventData: Plotly.PlotMouseEvent) => {\n        if (!onWellClickRef.current) return;\n        const point = eventData.points[0];\n        if (point) {\n          // Cast labels to handle union type\n          const rowLabelsArr = rowLabels as (string | number)[];\n          const colLabelsArr = colLabels as (string | number)[];\n          const rowIdx = rowLabelsArr.indexOf(point.y as string | number);\n          const colIdx = colLabelsArr.indexOf(point.x as string | number);\n          if (rowIdx >= 0 && colIdx >= 0) {\n            const wellId = `${rowLabelsArr[rowIdx]}${colLabelsArr[colIdx]}`;\n            const wellIdUpper = String(wellId).toUpperCase();\n            // Get all values and tooltipData for this well\n            const allValues = allValuesMap.get(wellIdUpper);\n            const tooltipData = tooltipDataMap.get(wellIdUpper);\n            const wellData: WellData = {\n              wellId,\n              values: allValues,\n              tooltipData,\n            };\n            onWellClickRef.current?.(wellData);\n          }\n        }\n      });\n\n      plotElement = currentRef;\n    });\n\n    return () => {\n      cancelled = true;\n      if (plotElement) {\n        getLoadedPlotly().purge(plotElement);\n      }\n    };\n  }, [\n    displayGrid,\n    colLabels,\n    rowLabels,\n    effectiveColorScale,\n    showColorBar,\n    effectiveZMin,\n    zMax,\n    valueUnit,\n    title,\n    xTitle,\n    yTitle,\n    width,\n    height,\n    hoverText,\n    precision,\n    tooltipDataMap,\n    allValuesMap,\n    grid,\n    visualizationMode,\n    categoricalGrid,\n    categoricalColorScale,\n    uniqueTypes.length,\n    catMax,\n    regionShapes,\n    rows,\n    columns,\n    legendConfig,\n    markerShape,\n    markerSize,\n    theme,\n    bindTooltip,\n  ]);\n\n  // Render layer selector tabs\n  const renderLayerSelector = () => {\n    if (!effectiveLayers || effectiveLayers.length <= 1) {\n      return null;\n    }\n\n    return (\n      <div className=\"platemap-layer-selector\">\n        {effectiveLayers.map((layer) => {\n          const isActive = activeLayer?.id === layer.id;\n          return (\n            <Button\n              key={layer.id}\n              variant={isActive ? \"default\" : \"outline\"}\n              size=\"sm\"\n              onClick={() => {\n                setActiveLayerId(layer.id);\n                onLayerChange?.(layer.id);\n              }}\n            >\n              {layer.name}\n            </Button>\n          );\n        })}\n      </div>\n    );\n  };\n\n  // Legend configuration with defaults\n  const legendPosition = legendConfig?.position ?? \"right\";\n  const legendFontSize = legendConfig?.fontSize ?? 12;\n  const legendItemSpacing = legendConfig?.itemSpacing ?? 4;\n  const legendSwatchSize = legendConfig?.swatchSize ?? 16;\n  const legendTitle = legendConfig?.title;\n\n  // Fixed width for categorical legend to prevent layout shift\n  const legendWidth = 120;\n\n  // Determine if legend is horizontal (top/bottom) or vertical (left/right)\n  const isHorizontalLegend = legendPosition === \"top\" || legendPosition === \"bottom\";\n\n  // Render legend (categorical types and/or regions)\n  const renderLegend = () => {\n    const hasCategoricalItems = visualizationMode === \"categorical\" && uniqueTypes.length > 0;\n    const hasRegions = regions && regions.length > 0;\n\n    if (!showLegend || (!hasCategoricalItems && !hasRegions)) {\n      // Return empty placeholder to maintain consistent width (only for vertical legends)\n      if (!isHorizontalLegend) {\n        return <div className=\"platemap-legend-placeholder\" style={{ width: legendWidth }} />;\n      }\n      return null;\n    }\n\n    // Build legend class names\n    const legendClassNames = [\"platemap-legend\"];\n    if (isHorizontalLegend) {\n      legendClassNames.push(\"platemap-legend--horizontal\");\n    } else if (legendPosition === \"left\") {\n      legendClassNames.push(\"platemap-legend--left\");\n    } else if (legendPosition === \"right\") {\n      legendClassNames.push(\"platemap-legend--right\");\n    }\n\n    // Dynamic styles that depend on props\n    const legendStyle: React.CSSProperties = {\n      gap: `${legendItemSpacing}px`,\n      width: isHorizontalLegend ? undefined : legendWidth,\n    };\n\n    return (\n      <div className={legendClassNames.join(\" \")} style={legendStyle}>\n        {legendTitle && (\n          <div\n            className={`platemap-legend__title${isHorizontalLegend ? \" platemap-legend__title--horizontal\" : \"\"}`}\n            style={{ fontSize: `${legendFontSize}px` }}\n          >\n            {legendTitle}\n          </div>\n        )}\n        {/* Categorical type items */}\n        {hasCategoricalItems &&\n          uniqueTypes.map((type) => (\n            <div key={type} className=\"platemap-legend__item\">\n              <div\n                className=\"platemap-legend__swatch\"\n                style={{\n                  width: `${legendSwatchSize}px`,\n                  height: `${legendSwatchSize}px`,\n                  backgroundColor: categoryColors[type] || emptyWellColor,\n                }}\n              />\n              <span\n                className=\"platemap-legend__label platemap-legend__label--capitalize\"\n                style={{ fontSize: `${legendFontSize}px` }}\n              >\n                {type}\n              </span>\n            </div>\n          ))}\n        {/* Region items */}\n        {hasRegions &&\n          regions.map((region) => (\n            <div key={region.id} className=\"platemap-legend__item\">\n              <div\n                className=\"platemap-legend__swatch platemap-legend__swatch--region\"\n                style={{\n                  width: `${legendSwatchSize}px`,\n                  height: `${legendSwatchSize}px`,\n                  backgroundColor: region.fillColor || \"transparent\",\n                  border: `${region.borderWidth || 2}px solid ${region.borderColor || COLORS.regionBorder}`,\n                }}\n              />\n              <span\n                className=\"platemap-legend__label\"\n                style={{ fontSize: `${legendFontSize}px` }}\n              >\n                {region.name}\n              </span>\n            </div>\n          ))}\n      </div>\n    );\n  };\n\n  // Build the plot content based on legend position\n  const plotContent = (\n    <div className=\"relative\">\n      <div ref={plotRef} className=\"platemap-plot\" style={{ width, height }} />\n      {tooltipElement}\n    </div>\n  );\n  const legendContent = renderLegend();\n\n  const renderPlotWithLegend = () => {\n    switch (legendPosition) {\n      case \"left\":\n        return (\n          <div className=\"platemap-plot-wrapper platemap-plot-wrapper--vertical\">\n            {legendContent}\n            {plotContent}\n          </div>\n        );\n      case \"top\":\n        return (\n          <div className=\"platemap-plot-wrapper platemap-plot-wrapper--horizontal\">\n            {legendContent}\n            {plotContent}\n          </div>\n        );\n      case \"bottom\":\n        return (\n          <div className=\"platemap-plot-wrapper platemap-plot-wrapper--horizontal\">\n            {plotContent}\n            {legendContent}\n          </div>\n        );\n      case \"right\":\n      default:\n        return (\n          <div className=\"platemap-plot-wrapper platemap-plot-wrapper--vertical\">\n            {plotContent}\n            {legendContent}\n          </div>\n        );\n    }\n  };\n\n  return (\n    <div className=\"platemap-container\" style={{ width: isHorizontalLegend ? undefined : width }}>\n      {renderLayerSelector()}\n      {renderPlotWithLegend()}\n    </div>\n  );\n};\n\nexport { PlateMap };"],"names":["PlateMap","data","layerConfigs","initialLayerId","onLayerChange","plateFormat","PLATE_FORMAT_96","customRows","customColumns","propVisualizationMode","customCategoryColors","regions","title","xTitle","yTitle","customXLabels","customYLabels","propColorScale","DEFAULT_COLOR_SCALE","propValueMin","propValueMax","emptyWellColor","COLORS","showColorBar","showLegend","legendConfig","width","height","precision","markerShape","onWellClick","plotRef","useRef","theme","usePlotlyTheme","onWellClickRef","activeLayerId","setActiveLayerId","useState","rows","columns","PLATE_FORMAT_CUSTOM","config","PLATE_CONFIGS","markerSize","useMemo","calculateMarkerSize","bindTooltip","tooltipElement","useChartTooltip","effectiveLayers","wellDataArray","hasMultiValueWells","extractLayers","activeLayer","l","visualizationMode","colorScale","valueMin","valueMax","valueUnit","categoryColors","DEFAULT_CATEGORY_COLORS","activeLayerId_","grid","categoriesGrid","allValuesMap","tooltipDataMap","resultGrid","resultCategories","resultAllValues","resultTooltipData","result","wellDataToGrid","PLATEMAP_CONSTANTS","rowLabels","generateRowLabels","colLabels","generateColumnLabels","range","calculateValueRange","zMin","zMax","hasNullValues","row","sentinelValue","displayGrid","val","effectiveColorScale","arrayColorScale","namedScale","NAMED_COLORSCALES","totalRange","dataStartRatio","extendedScale","pos","color","newPos","effectiveZMin","layerConfigMap","map","layer","hoverText","rowIdx","colIdx","wellId","wellIdUpper","buildWellHoverText","categoricalGrid","categoricalColorScale","uniqueTypes","catMax","typesSet","hasNullCategory","category","types","typeToIndex","type","idx","catGrid","numTypes","catColorScale","normalizedPos","bandHalf","start","end","regionShapes","shapes","region","bounds","parseRegionWells","inset","x0","x1","y0","y1","useEffect","isCategorical","plotZ","plotColorScale","plotZMin","plotZMax","plotShowScale","xData","yData","colorData","textData","flattenGridData","plotData","buildColorbarConfig","legendPosition","layout","CHART_FONT_FAMILY","calculateTitleX","buildPlotMargins","_","i","calculateAxisDomain","cancelled","plotElement","loadPlotly","plotly","currentRef","eventData","point","rowLabelsArr","colLabelsArr","allValues","tooltipData","wellData","getLoadedPlotly","renderLayerSelector","isActive","jsx","Button","legendFontSize","legendItemSpacing","legendSwatchSize","legendTitle","legendWidth","isHorizontalLegend","renderLegend","hasCategoricalItems","hasRegions","legendClassNames","legendStyle","jsxs","plotContent","legendContent","renderPlotWithLegend"],"mappings":"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"}
+{"version":3,"file":"PlateMap.cjs","sources":["../../../../src/components/charts/PlateMap/PlateMap.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport \"./PlateMap.scss\";\nimport { useChartTooltip } from \"../ChartTooltip\";\nimport { getLoadedPlotly, loadPlotly } from \"../plotly-loader\";\n\nimport {\n  PLATE_CONFIGS,\n  DEFAULT_COLOR_SCALE,\n  COLORS,\n  DEFAULT_CATEGORY_COLORS,\n  PLATEMAP_CONSTANTS,\n  NAMED_COLORSCALES,\n} from \"./constants\";\nimport {\n  PLATE_FORMAT_96,\n  PLATE_FORMAT_CUSTOM,\n} from \"./types\";\nimport {\n  generateRowLabels,\n  generateColumnLabels,\n  wellDataToGrid,\n  calculateValueRange,\n  hasMultiValueWells,\n  extractLayers,\n  parseRegionWells,\n  buildWellHoverText,\n  buildColorbarConfig,\n  buildPlotMargins,\n  calculateTitleX,\n  calculateAxisDomain,\n  flattenGridData,\n  calculateMarkerSize,\n} from \"./utils\";\n\nimport type {\n  PlateMapProps,\n  LayerConfig,\n  WellData,\n} from \"./types\";\nimport type Plotly from \"plotly.js-dist\";\n\n// Re-export types and constants for external consumers\nexport * from \"./types\";\nexport { DEFAULT_CATEGORY_COLORS } from \"./constants\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { CHART_FONT_FAMILY, usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\n\n/**\n * PlateMap component for visualizing well plate data as a heatmap or categorical display.\n *\n * **Supported Plate Formats:**\n * - 96-well (8 rows × 12 columns, wells A1-H12)\n * - 384-well (16 rows × 24 columns, wells A1-P24)\n * - 1536-well (32 rows × 48 columns, wells A1-AF48)\n * - Custom dimensions with user-specified rows/columns\n *\n * **Visualization Modes:**\n * - `\"heatmap\"`: Continuous color gradient for quantitative values\n * - `\"categorical\"`: Discrete colors for well types (sample, control, empty)\n *\n * **Features:**\n * - Multiple data layers with independent visualization settings\n * - Control region highlighting with borders and fill colors\n * - Configurable color scales, tooltips, and click interactions\n * - Support for WellData arrays with multi-layer visualization\n *\n * **Data Format:**\n * - **WellData array**: `[{ wellId: \"A1\", values: { RFU: 100 }, tooltipData: {...} }, ...]`\n *\n */\nconst PlateMap: React.FC<PlateMapProps> = ({\n  data,\n  layerConfigs,\n  initialLayerId,\n  onLayerChange,\n  plateFormat = PLATE_FORMAT_96,\n  rows: customRows,\n  columns: customColumns,\n  visualizationMode: propVisualizationMode = \"heatmap\",\n  categoryColors: customCategoryColors,\n  regions,\n  title,\n  xTitle,\n  yTitle,\n  xLabels: customXLabels,\n  yLabels: customYLabels,\n  colorScale: propColorScale = DEFAULT_COLOR_SCALE,\n  valueMin: propValueMin,\n  valueMax: propValueMax,\n  emptyWellColor = COLORS.emptyWell,\n  showColorBar = true,\n  showLegend = true,\n  legendConfig,\n  width = 800,\n  height = 500,\n  precision = 0,\n  markerShape = \"circle\",\n  onWellClick,\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n  const onWellClickRef = useRef(onWellClick);\n  onWellClickRef.current = onWellClick;\n\n  // Internal state for layer toggling, initialized with initialLayerId\n  const [activeLayerId, setActiveLayerId] = useState<string | undefined>(initialLayerId);\n\n  // Determine plate dimensions\n  let rows: number;\n  let columns: number;\n\n  if (plateFormat === PLATE_FORMAT_CUSTOM) {\n    rows = customRows ?? 8;\n    columns = customColumns ?? 12;\n  } else {\n    const config = PLATE_CONFIGS[plateFormat];\n    rows = config.rows;\n    columns = config.columns;\n  }\n\n  // Diameter (px) of each well marker; also drives the hover hit radius so the\n  // whole circle is hoverable instead of just a small zone around its center\n  const markerSize = useMemo(\n    () => calculateMarkerSize(width, height, rows, columns, markerShape, !!title, !!yTitle),\n    [width, height, rows, columns, markerShape, title, yTitle],\n  );\n  const { bindTooltip, tooltipElement } = useChartTooltip({\n    hoverDistance: Math.ceil(markerSize / 2),\n  });\n\n  // Auto-generate layers from multi-value WellData\n  const effectiveLayers = useMemo((): LayerConfig[] | null => {\n    // Check if data contains multi-value wells\n    if (Array.isArray(data) && data.length > 0 && \"wellId\" in (data[0] as WellData)) {\n      const wellDataArray = data as WellData[];\n      if (hasMultiValueWells(wellDataArray)) {\n        return extractLayers(wellDataArray, layerConfigs);\n      }\n    }\n\n    return null;\n  }, [data, layerConfigs]);\n\n  // Handle layer toggling - determine active layer\n  const activeLayer = useMemo((): LayerConfig | null => {\n    if (!effectiveLayers || effectiveLayers.length === 0) return null;\n    if (activeLayerId) {\n      return effectiveLayers.find((l) => l.id === activeLayerId) ?? effectiveLayers[0];\n    }\n    return effectiveLayers[0];\n  }, [effectiveLayers, activeLayerId]);\n\n  // Get effective props from active layer or default props\n  // Data is always the same - we just change which layer is being visualized\n  const visualizationMode = activeLayer?.visualizationMode ?? propVisualizationMode;\n  const colorScale = activeLayer?.colorScale ?? propColorScale;\n  const valueMin = activeLayer?.valueMin ?? propValueMin;\n  const valueMax = activeLayer?.valueMax ?? propValueMax;\n  // Derive valueUnit from layer config\n  const valueUnit = activeLayer?.valueUnit ? ` ${activeLayer.valueUnit}` : \"\";\n\n  // Merge custom category colors with defaults, including layer-specific colors\n  const categoryColors = useMemo(\n    () => ({ ...DEFAULT_CATEGORY_COLORS, ...customCategoryColors, ...activeLayer?.categoryColors }),\n    [customCategoryColors, activeLayer?.categoryColors]\n  );\n\n  // Convert data to grid format - memoize to prevent re-render issues\n  // Use activeLayer.id to extract the appropriate value from multi-value wells\n  const activeLayerId_ = activeLayer?.id;\n  const { grid, categoriesGrid, allValuesMap, tooltipDataMap } = useMemo(() => {\n    let resultGrid: (number | null)[][];\n    let resultCategories: (string | null)[][] = Array.from({ length: rows }, () =>\n      Array(columns).fill(null)\n    );\n    let resultAllValues = new Map<string, Record<string, string | number | null>>();\n    let resultTooltipData = new Map<string, Record<string, unknown>>();\n\n    if (Array.isArray(data) && data.length > 0) {\n      // WellData array format - pass activeLayerId to extract the right layer\n      const result = wellDataToGrid(data, rows, columns, activeLayerId_);\n      resultGrid = result.grid;\n      resultCategories = result.categories;\n      resultAllValues = result.allValues;\n      resultTooltipData = result.tooltipData;\n    } else {\n      // Generate random data for demonstration when no data provided\n      resultGrid = Array.from({ length: rows }, () =>\n        Array.from({ length: columns }, () => Math.random() * PLATEMAP_CONSTANTS.MAX_RANDOM_VALUE)\n      );\n    }\n\n    return { grid: resultGrid, categoriesGrid: resultCategories, allValuesMap: resultAllValues, tooltipDataMap: resultTooltipData };\n  }, [data, rows, columns, activeLayerId_]);\n\n  // Generate labels - use custom labels if provided, otherwise auto-generate.\n  // Memoized so a tooltip-driven re-render doesn't change their identity and\n  // needlessly rebuild the plot (which would clear the open tooltip).\n  const rowLabels = useMemo(\n    () => customYLabels ?? generateRowLabels(rows),\n    [customYLabels, rows],\n  );\n  const colLabels = useMemo(\n    () => customXLabels ?? generateColumnLabels(columns),\n    [customXLabels, columns],\n  );\n\n  // Calculate value range if not provided\n  const range = calculateValueRange(grid);\n  const zMin = valueMin ?? range.min;\n  const zMax = valueMax ?? range.max;\n\n  // Check if grid has any null values\n  const hasNullValues = grid.some(row => row.includes(null));\n\n  // Create sentinel value for empty wells (below the data range)\n  // This allows us to show emptyWellColor for null cells\n  const sentinelValue = zMin - (zMax - zMin) * PLATEMAP_CONSTANTS.SENTINEL_RATIO - 1;\n\n  // Replace null values with sentinel for Plotly rendering\n  const displayGrid = useMemo(\n    () =>\n      hasNullValues\n        ? grid.map((row) => row.map((val) => (val === null ? sentinelValue : val)))\n        : grid,\n    [hasNullValues, grid, sentinelValue],\n  );\n\n  // Extend colorscale to include emptyWellColor at the bottom for null values\n  const effectiveColorScale = useMemo(() => {\n    if (!hasNullValues) return colorScale;\n\n    // Convert colorScale to array format if it's a named string scale\n    let arrayColorScale: Array<[number, string]>;\n    if (typeof colorScale === \"string\") {\n      // Look up the named scale in our mapping\n      const namedScale = NAMED_COLORSCALES[colorScale];\n      if (namedScale) {\n        arrayColorScale = namedScale;\n      } else {\n        // Unknown named scale - can't extend it, return as-is\n        // This is a fallback for custom/unknown Plotly scale names\n        return colorScale;\n      }\n    } else {\n      arrayColorScale = colorScale;\n    }\n\n    // For array colorscales, prepend emptyWellColor at position 0\n    // and shift all other positions proportionally\n    const totalRange = zMax - sentinelValue;\n    const dataStartRatio = (zMin - sentinelValue) / totalRange;\n\n    // Create new colorscale with emptyWellColor at the bottom\n    const extendedScale: Array<[number, string]> = [\n      [0, emptyWellColor],\n      [dataStartRatio * PLATEMAP_CONSTANTS.COLOR_SCALE_THRESHOLD, emptyWellColor], // Small band for empty wells\n    ];\n\n    // Remap original colorscale positions to the remaining range\n    for (const [pos, color] of arrayColorScale) {\n      const newPos = dataStartRatio + pos * (1 - dataStartRatio);\n      extendedScale.push([newPos, color]);\n    }\n\n    return extendedScale;\n  }, [colorScale, hasNullValues, zMin, zMax, sentinelValue, emptyWellColor]);\n\n  // Effective zMin includes sentinel value if we have nulls\n  const effectiveZMin = hasNullValues ? sentinelValue : zMin;\n\n  // Create a lookup map for layer configs to get valueUnit for each layer\n  const layerConfigMap = useMemo(() => {\n    const map = new Map<string, LayerConfig>();\n    if (effectiveLayers) {\n      for (const layer of effectiveLayers) {\n        map.set(layer.id, layer);\n      }\n    }\n    return map;\n  }, [effectiveLayers]);\n\n  // Build custom hover text matrix - shows ALL values regardless of active layer.\n  // Memoized so its identity is stable across tooltip-driven re-renders.\n  const hoverText = useMemo<string[][]>(\n    () =>\n      grid.map((row, rowIdx) =>\n        row.map((val, colIdx) => {\n          const wellId = `${rowLabels[rowIdx]}${colLabels[colIdx]}`;\n          const wellIdUpper = String(wellId).toUpperCase();\n          return buildWellHoverText({\n            wellId,\n            value: val,\n            allValues: allValuesMap.get(wellIdUpper),\n            tooltipExtra: tooltipDataMap.get(wellIdUpper),\n            activeLayerId: activeLayer?.id,\n            layerConfigMap,\n            precision,\n            valueUnit,\n          });\n        })\n      ),\n    [grid, rowLabels, colLabels, allValuesMap, tooltipDataMap, activeLayer?.id, layerConfigMap, precision, valueUnit],\n  );\n\n  // Build categorical data for categorical mode\n  const { categoricalGrid, categoricalColorScale, uniqueTypes, catMax } = useMemo(() => {\n    if (visualizationMode !== \"categorical\") {\n      return { categoricalGrid: null, categoricalColorScale: null, uniqueTypes: [], catMax: 0 };\n    }\n\n    // Collect unique categories from the categoriesGrid\n    const typesSet = new Set<string>();\n    let hasNullCategory = false;\n    for (const row of categoriesGrid) {\n      for (const category of row) {\n        if (category) {\n          typesSet.add(category);\n        } else {\n          hasNullCategory = true;\n        }\n      }\n    }\n    // Only include \"empty\" if there are actual null wells\n    if (hasNullCategory) {\n      typesSet.add(\"empty\");\n    }\n    const types = [...typesSet].sort();\n\n    // Create numeric grid where each category maps to an index\n    const typeToIndex = new Map<string, number>();\n    types.forEach((type, idx) => typeToIndex.set(type, idx));\n\n    const catGrid: number[][] = categoriesGrid.map((row) =>\n      row.map((category) => {\n        if (category === null) {\n          return typeToIndex.get(\"empty\") ?? 0;\n        }\n        return typeToIndex.get(category) ?? typeToIndex.get(\"empty\") ?? 0;\n      })\n    );\n\n    // Build discrete colorscale for categories\n    // The grid contains integer indices 0, 1, 2, ... (numTypes - 1)\n    // With cmin=0 and cmax=numTypes-1, Plotly maps:\n    //   index 0 -> normalized 0.0\n    //   index (numTypes-1) -> normalized 1.0\n    // We need each index to map to a distinct color band\n    const numTypes = types.length;\n    const catColorScale: Array<[number, string]> = [];\n\n    if (numTypes === 1) {\n      // Single type: entire range is one color\n      const color = categoryColors[types[0]] || emptyWellColor;\n      catColorScale.push([0, color]);\n      catColorScale.push([1, color]);\n    } else {\n      // Multiple types: create bands for each index\n      // Index i maps to normalized value i / (numTypes - 1)\n      types.forEach((type, idx) => {\n        const color = categoryColors[type] || emptyWellColor;\n        const normalizedPos = idx / (numTypes - 1);\n        // Create a small band around each position\n        const bandHalf = 0.5 / (numTypes - 1);\n        const start = Math.max(0, normalizedPos - bandHalf);\n        const end = Math.min(1, normalizedPos + bandHalf - PLATEMAP_CONSTANTS.COLOR_SCALE_EPSILON);\n        catColorScale.push([start, color]);\n        catColorScale.push([end, color]);\n      });\n    }\n\n    // cmax should be numTypes - 1 to match the index range\n    return { categoricalGrid: catGrid, categoricalColorScale: catColorScale, uniqueTypes: types, catMax: numTypes - 1 };\n  }, [visualizationMode, categoriesGrid, categoryColors, emptyWellColor]);\n\n  // Build Plotly shapes for highlighted regions\n  const regionShapes = useMemo(() => {\n    if (!regions || regions.length === 0) {\n      return [];\n    }\n\n    const shapes: Array<Partial<Plotly.Shape>> = [];\n\n    for (const region of regions) {\n      const bounds = parseRegionWells(region.wells, rowLabels, colLabels);\n      if (!bounds) continue;\n\n      // Plotly heatmap uses the actual label values for positioning.\n      // colLabels are 1-indexed (1, 2, 3, ...), so we need to convert from 0-indexed bounds.\n      // Each cell is centered on its label, so we offset by inset to cover the cell.\n      // For columns: bounds.minCol=0 means column label 1, so x0 = 1 - inset\n      // For rows: bounds.minRow=0 means row index 0, which is correct for y-axis\n      //\n      // Use 0.49 inset to place boundary just inside cell edge,\n      // avoiding line doubling when adjacent regions share a border\n      const inset = 0.49;\n      const x0 = (bounds.minCol + 1) - inset;\n      const x1 = (bounds.maxCol + 1) + inset;\n      const y0 = bounds.minRow - inset;\n      const y1 = bounds.maxRow + inset;\n\n      shapes.push({\n        type: \"rect\",\n        xref: \"x\",\n        yref: \"y\",\n        x0,\n        x1,\n        y0,\n        y1,\n        line: {\n          color: region.borderColor || COLORS.textDark,\n          width: region.borderWidth ?? 2,\n        },\n        fillcolor: region.fillColor || \"transparent\",\n        layer: \"above\",\n      });\n    }\n\n    return shapes;\n  }, [regions, rowLabels, colLabels]);\n\n  useEffect(() => {\n    if (!plotRef.current) return;\n\n    // Determine which grid and colorscale to use based on mode\n    const isCategorical = visualizationMode === \"categorical\";\n    const plotZ = isCategorical && categoricalGrid ? categoricalGrid : displayGrid;\n    const plotColorScale = isCategorical && categoricalColorScale ? categoricalColorScale : effectiveColorScale;\n    const plotZMin = isCategorical ? 0 : effectiveZMin;\n    const plotZMax = isCategorical ? (catMax || 1) : zMax;\n    const plotShowScale = isCategorical ? false : showColorBar;\n\n    // Flatten 2D grid data into arrays for scatter plot\n    const { xData, yData, colorData, textData } = flattenGridData(\n      plotZ,\n      rowLabels,\n      hoverText,\n      rows,\n      columns,\n      plotZMin\n    );\n\n    // Create scatter plot with markers\n    const plotData: Plotly.Data[] = [\n      {\n        x: xData,\n        y: yData,\n        mode: \"markers\" as const,\n        type: \"scatter\" as const,\n        marker: {\n          symbol: markerShape,\n          size: markerSize,\n          color: colorData,\n          colorscale: plotColorScale,\n          cmin: plotZMin,\n          cmax: plotZMax,\n          showscale: plotShowScale,\n          colorbar: buildColorbarConfig(\n            legendConfig?.position ?? \"right\",\n            valueUnit,\n            legendConfig?.title\n          ),\n          line: {\n            color: theme.gridColor,\n            width: 1,\n          },\n        },\n        hoverinfo: \"none\" as const,\n        text: textData,\n      },\n    ];\n\n    const legendPosition = legendConfig?.position ?? \"right\";\n\n    const layout = {\n      autosize: false, // Prevent auto-sizing to maintain consistent layout\n      title: title\n        ? {\n            text: title,\n            font: {\n              family: CHART_FONT_FAMILY,\n              size: 20,\n              color: theme.textSecondary,\n            },\n            x: calculateTitleX(legendPosition),\n            xanchor: \"center\" as const,\n            y: 0.98,\n            yanchor: \"top\" as const,\n          }\n        : undefined,\n      width,\n      height,\n      margin: buildPlotMargins(legendPosition, !!title, !!yTitle),\n      xaxis: {\n        title: {\n          text: xTitle || \"\",\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: CHART_FONT_FAMILY,\n          },\n          standoff: 15,\n        },\n        side: \"top\" as const,\n        fixedrange: true,\n        dtick: 1,\n        range: [0.5, columns + 0.5], // Explicit range to prevent auto-padding\n        automargin: false, // Prevent auto margin adjustment\n        tickmode: \"array\" as const,\n        tickvals: Array.from({ length: columns }, (_, i) => i + 1),\n        ticktext: colLabels.map(String),\n        tickangle: 0, // Keep labels horizontal\n        tickfont: { size: columns > 24 ? 8 : PLATEMAP_CONSTANTS.FONT_SIZE_LARGE }, // Smaller font for high-density plates\n        // Adjust domain based on legend position to prevent colorbar overlap\n        domain: calculateAxisDomain(legendPosition),\n      },\n      yaxis: {\n        title: {\n          text: yTitle || \"\",\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: CHART_FONT_FAMILY,\n          },\n          standoff: 15,\n        },\n        fixedrange: true,\n        dtick: 1,\n        range: [rows + PLATEMAP_CONSTANTS.LABEL_CENTER_OFFSET, PLATEMAP_CONSTANTS.LABEL_CENTER_OFFSET], // Reversed range: high to low puts row A at top\n        automargin: false, // Prevent auto margin adjustment\n        tickmode: \"array\" as const,\n        tickvals: Array.from({ length: rows }, (_, i) => i),\n        ticktext: rowLabels.map(String),\n        tickfont: { size: rows > 16 ? 8 : PLATEMAP_CONSTANTS.FONT_SIZE_LARGE }, // Smaller font for high-density plates\n      },\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\n      font: {\n        family: CHART_FONT_FAMILY,\n        color: theme.textSecondary,\n      },\n      shapes: regionShapes,\n    };\n\n    const config = {\n      responsive: true,\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      const currentRef = plotRef.current;\n      plotly.newPlot(currentRef, plotData, layout, config);\n      bindTooltip(currentRef);\n\n      // Always attach click handler - check onWellClickRef.current inside callback\n      // This ensures handler is registered even if onWellClick is provided after initial render\n      (currentRef as unknown as Plotly.PlotlyHTMLElement).on(\"plotly_click\", (eventData: Plotly.PlotMouseEvent) => {\n        if (!onWellClickRef.current) return;\n        const point = eventData.points[0];\n        if (point) {\n          // Cast labels to handle union type\n          const rowLabelsArr = rowLabels as (string | number)[];\n          const colLabelsArr = colLabels as (string | number)[];\n          const rowIdx = rowLabelsArr.indexOf(point.y as string | number);\n          const colIdx = colLabelsArr.indexOf(point.x as string | number);\n          if (rowIdx >= 0 && colIdx >= 0) {\n            const wellId = `${rowLabelsArr[rowIdx]}${colLabelsArr[colIdx]}`;\n            const wellIdUpper = String(wellId).toUpperCase();\n            // Get all values and tooltipData for this well\n            const allValues = allValuesMap.get(wellIdUpper);\n            const tooltipData = tooltipDataMap.get(wellIdUpper);\n            const wellData: WellData = {\n              wellId,\n              values: allValues,\n              tooltipData,\n            };\n            onWellClickRef.current?.(wellData);\n          }\n        }\n      });\n\n      plotElement = currentRef;\n    });\n\n    return () => {\n      cancelled = true;\n      if (plotElement) {\n        getLoadedPlotly().purge(plotElement);\n      }\n    };\n  }, [\n    displayGrid,\n    colLabels,\n    rowLabels,\n    effectiveColorScale,\n    showColorBar,\n    effectiveZMin,\n    zMax,\n    valueUnit,\n    title,\n    xTitle,\n    yTitle,\n    width,\n    height,\n    hoverText,\n    precision,\n    tooltipDataMap,\n    allValuesMap,\n    grid,\n    visualizationMode,\n    categoricalGrid,\n    categoricalColorScale,\n    uniqueTypes.length,\n    catMax,\n    regionShapes,\n    rows,\n    columns,\n    legendConfig,\n    markerShape,\n    markerSize,\n    theme,\n    bindTooltip,\n  ]);\n\n  // Render layer selector tabs\n  const renderLayerSelector = () => {\n    if (!effectiveLayers || effectiveLayers.length <= 1) {\n      return null;\n    }\n\n    return (\n      <div className=\"platemap-layer-selector\">\n        {effectiveLayers.map((layer) => {\n          const isActive = activeLayer?.id === layer.id;\n          return (\n            <Button\n              key={layer.id}\n              variant={isActive ? \"default\" : \"outline\"}\n              size=\"sm\"\n              onClick={() => {\n                setActiveLayerId(layer.id);\n                onLayerChange?.(layer.id);\n              }}\n            >\n              {layer.name}\n            </Button>\n          );\n        })}\n      </div>\n    );\n  };\n\n  // Legend configuration with defaults\n  const legendPosition = legendConfig?.position ?? \"right\";\n  const legendFontSize = legendConfig?.fontSize ?? 12;\n  const legendItemSpacing = legendConfig?.itemSpacing ?? 4;\n  const legendSwatchSize = legendConfig?.swatchSize ?? 16;\n  const legendTitle = legendConfig?.title;\n\n  // Fixed width for categorical legend to prevent layout shift\n  const legendWidth = 120;\n\n  // Determine if legend is horizontal (top/bottom) or vertical (left/right)\n  const isHorizontalLegend = legendPosition === \"top\" || legendPosition === \"bottom\";\n\n  // Render legend (categorical types and/or regions)\n  const renderLegend = () => {\n    const hasCategoricalItems = visualizationMode === \"categorical\" && uniqueTypes.length > 0;\n    const hasRegions = regions && regions.length > 0;\n\n    if (!showLegend || (!hasCategoricalItems && !hasRegions)) {\n      // Return empty placeholder to maintain consistent width (only for vertical legends)\n      if (!isHorizontalLegend) {\n        return <div className=\"platemap-legend-placeholder\" style={{ width: legendWidth }} />;\n      }\n      return null;\n    }\n\n    // Build legend class names\n    const legendClassNames = [\"platemap-legend\"];\n    if (isHorizontalLegend) {\n      legendClassNames.push(\"platemap-legend--horizontal\");\n    } else if (legendPosition === \"left\") {\n      legendClassNames.push(\"platemap-legend--left\");\n    } else if (legendPosition === \"right\") {\n      legendClassNames.push(\"platemap-legend--right\");\n    }\n\n    // Dynamic styles that depend on props\n    const legendStyle: React.CSSProperties = {\n      gap: `${legendItemSpacing}px`,\n      width: isHorizontalLegend ? undefined : legendWidth,\n    };\n\n    return (\n      <div className={legendClassNames.join(\" \")} style={legendStyle}>\n        {legendTitle && (\n          <div\n            className={`platemap-legend__title${isHorizontalLegend ? \" platemap-legend__title--horizontal\" : \"\"}`}\n            style={{ fontSize: `${legendFontSize}px` }}\n          >\n            {legendTitle}\n          </div>\n        )}\n        {/* Categorical type items */}\n        {hasCategoricalItems &&\n          uniqueTypes.map((type) => (\n            <div key={type} className=\"platemap-legend__item\">\n              <div\n                className=\"platemap-legend__swatch\"\n                style={{\n                  width: `${legendSwatchSize}px`,\n                  height: `${legendSwatchSize}px`,\n                  backgroundColor: categoryColors[type] || emptyWellColor,\n                }}\n              />\n              <span\n                className=\"platemap-legend__label platemap-legend__label--capitalize\"\n                style={{ fontSize: `${legendFontSize}px` }}\n              >\n                {type}\n              </span>\n            </div>\n          ))}\n        {/* Region items */}\n        {hasRegions &&\n          regions.map((region) => (\n            <div key={region.id} className=\"platemap-legend__item\">\n              <div\n                className=\"platemap-legend__swatch platemap-legend__swatch--region\"\n                style={{\n                  width: `${legendSwatchSize}px`,\n                  height: `${legendSwatchSize}px`,\n                  backgroundColor: region.fillColor || \"transparent\",\n                  border: `${region.borderWidth || 2}px solid ${region.borderColor || COLORS.regionBorder}`,\n                }}\n              />\n              <span\n                className=\"platemap-legend__label\"\n                style={{ fontSize: `${legendFontSize}px` }}\n              >\n                {region.name}\n              </span>\n            </div>\n          ))}\n      </div>\n    );\n  };\n\n  // Build the plot content based on legend position\n  const plotContent = (\n    <div className=\"relative\">\n      <div ref={plotRef} className=\"platemap-plot\" style={{ width, height }} />\n      {tooltipElement}\n    </div>\n  );\n  const legendContent = renderLegend();\n\n  const renderPlotWithLegend = () => {\n    switch (legendPosition) {\n      case \"left\":\n        return (\n          <div className=\"platemap-plot-wrapper platemap-plot-wrapper--vertical\">\n            {legendContent}\n            {plotContent}\n          </div>\n        );\n      case \"top\":\n        return (\n          <div className=\"platemap-plot-wrapper platemap-plot-wrapper--horizontal\">\n            {legendContent}\n            {plotContent}\n          </div>\n        );\n      case \"bottom\":\n        return (\n          <div className=\"platemap-plot-wrapper platemap-plot-wrapper--horizontal\">\n            {plotContent}\n            {legendContent}\n          </div>\n        );\n      case \"right\":\n      default:\n        return (\n          <div className=\"platemap-plot-wrapper platemap-plot-wrapper--vertical\">\n            {plotContent}\n            {legendContent}\n          </div>\n        );\n    }\n  };\n\n  return (\n    <div className=\"platemap-container\" style={{ width: isHorizontalLegend ? undefined : width }}>\n      {renderLayerSelector()}\n      {renderPlotWithLegend()}\n    </div>\n  );\n};\n\nexport { PlateMap };"],"names":["PlateMap","data","layerConfigs","initialLayerId","onLayerChange","plateFormat","PLATE_FORMAT_96","customRows","customColumns","propVisualizationMode","customCategoryColors","regions","title","xTitle","yTitle","customXLabels","customYLabels","propColorScale","DEFAULT_COLOR_SCALE","propValueMin","propValueMax","emptyWellColor","COLORS","showColorBar","showLegend","legendConfig","width","height","precision","markerShape","onWellClick","plotRef","useRef","theme","usePlotlyTheme","onWellClickRef","activeLayerId","setActiveLayerId","useState","rows","columns","PLATE_FORMAT_CUSTOM","config","PLATE_CONFIGS","markerSize","useMemo","calculateMarkerSize","bindTooltip","tooltipElement","useChartTooltip","effectiveLayers","wellDataArray","hasMultiValueWells","extractLayers","activeLayer","l","visualizationMode","colorScale","valueMin","valueMax","valueUnit","categoryColors","DEFAULT_CATEGORY_COLORS","activeLayerId_","grid","categoriesGrid","allValuesMap","tooltipDataMap","resultGrid","resultCategories","resultAllValues","resultTooltipData","result","wellDataToGrid","PLATEMAP_CONSTANTS","rowLabels","generateRowLabels","colLabels","generateColumnLabels","range","calculateValueRange","zMin","zMax","hasNullValues","row","sentinelValue","displayGrid","val","effectiveColorScale","arrayColorScale","namedScale","NAMED_COLORSCALES","totalRange","dataStartRatio","extendedScale","pos","color","newPos","effectiveZMin","layerConfigMap","map","layer","hoverText","rowIdx","colIdx","wellId","wellIdUpper","buildWellHoverText","categoricalGrid","categoricalColorScale","uniqueTypes","catMax","typesSet","hasNullCategory","category","types","typeToIndex","type","idx","catGrid","numTypes","catColorScale","normalizedPos","bandHalf","start","end","regionShapes","shapes","region","bounds","parseRegionWells","inset","x0","x1","y0","y1","useEffect","isCategorical","plotZ","plotColorScale","plotZMin","plotZMax","plotShowScale","xData","yData","colorData","textData","flattenGridData","plotData","buildColorbarConfig","legendPosition","layout","CHART_FONT_FAMILY","calculateTitleX","buildPlotMargins","_","i","calculateAxisDomain","cancelled","plotElement","loadPlotly","plotly","currentRef","eventData","point","rowLabelsArr","colLabelsArr","allValues","tooltipData","wellData","getLoadedPlotly","renderLayerSelector","isActive","jsx","Button","legendFontSize","legendItemSpacing","legendSwatchSize","legendTitle","legendWidth","isHorizontalLegend","renderLegend","hasCategoricalItems","hasRegions","legendClassNames","legendStyle","jsxs","plotContent","legendContent","renderPlotWithLegend"],"mappings":"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"}

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

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+import { PlateMapProps } from './types';
+export * from './types';
+export { DEFAULT_CATEGORY_COLORS } from './constants';
+/**
+ * PlateMap component for visualizing well plate data as a heatmap or categorical display.
+ *
+ * **Supported Plate Formats:**
+ * - 96-well (8 rows × 12 columns, wells A1-H12)
+ * - 384-well (16 rows × 24 columns, wells A1-P24)
+ * - 1536-well (32 rows × 48 columns, wells A1-AF48)
+ * - Custom dimensions with user-specified rows/columns
+ *
+ * **Visualization Modes:**
+ * - `"heatmap"`: Continuous color gradient for quantitative values
+ * - `"categorical"`: Discrete colors for well types (sample, control, empty)
+ *
+ * **Features:**
+ * - Multiple data layers with independent visualization settings
+ * - Control region highlighting with borders and fill colors
+ * - Configurable color scales, tooltips, and click interactions
+ * - Support for WellData arrays with multi-layer visualization
+ *
+ * **Data Format:**
+ * - **WellData array**: `[{ wellId: "A1", values: { RFU: 100 }, tooltipData: {...} }, ...]`
+ *
+ */
+declare const PlateMap: React.FC<PlateMapProps>;
+export { PlateMap };

package/dist/components/charts/PlateMap/PlateMap.js

@@ -7,7 +7,7 @@ import { PLATE_CONFIGS as ut, DEFAULT_COLOR_SCALE as mt, DEFAULT_CATEGORY_COLORS
 import { PLATE_FORMAT_96 as ht, PLATE_FORMAT_CUSTOM as yt } from "./types.js";
 import { PLATE_FORMAT_1536 as qt, PLATE_FORMAT_384 as Wt } from "./types.js";
 import { calculateMarkerSize as xt, hasMultiValueWells as _t, extractLayers as St, wellDataToGrid as vt, generateRowLabels as At, generateColumnLabels as Lt, calculateValueRange as Mt, buildWellHoverText as wt, parseRegionWells as Et, flattenGridData as Tt, buildColorbarConfig as Ct, calculateAxisDomain as Nt, buildPlotMargins as Ot, calculateTitleX as Rt } from "./utils.js";
-import { Button as bt } from "../../ui/button.js";
+import { Button as bt } from "../../../ui/button.js";
 import { usePlotlyTheme as zt, CHART_FONT_FAMILY as Y } from "../../../hooks/use-plotly-theme.js";
 const Ht = ({
   data: f,

package/dist/components/charts/PlateMap/constants.d.ts

@@ -0,0 +1,75 @@
+import { PLATE_FORMAT_96, PLATE_FORMAT_384, PLATE_FORMAT_1536 } from './types';
+/**
+ * Default category colors for well types in categorical visualization mode.
+ * Override these by passing custom colors via the `categoryColors` prop.
+ */
+export declare const DEFAULT_CATEGORY_COLORS: Record<string, string>;
+/**
+ * Plate dimension configurations
+ */
+export declare const PLATE_CONFIGS: Record<typeof PLATE_FORMAT_96 | typeof PLATE_FORMAT_384 | typeof PLATE_FORMAT_1536, {
+    rows: number;
+    columns: number;
+}>;
+/**
+ * Default color scale (CVD-friendly blue → orange diverging ramp
+ * suitable for plate data)
+ */
+export declare const DEFAULT_COLOR_SCALE: Array<[number, string]>;
+/**
+ * UI color constants for PlateMap component styling
+ */
+export declare const COLORS: {
+    /** Primary blue color for active states */
+    readonly primary: string;
+    /** White background */
+    readonly white: "#fff";
+    /** Light gray for borders */
+    readonly borderLight: "#ccc";
+    /** Dark gray for text */
+    readonly textDark: "#333";
+    /** Default region border color */
+    readonly regionBorder: "#000";
+    /** Default empty well color (light gray) */
+    readonly emptyWell: "#f0f0f0";
+};
+/**
+ * Named Plotly colorscales converted to array format.
+ * Used to extend colorscales with emptyWellColor when there are null values.
+ * Reference: https://plotly.com/javascript/colorscales/
+ */
+export declare const NAMED_COLORSCALES: Record<string, Array<[number, string]>>;
+/**
+ * Numeric constants for PlateMap calculations and layout
+ */
+export declare const PLATEMAP_CONSTANTS: {
+    /** Maximum random data value for demonstration */
+    readonly MAX_RANDOM_VALUE: 50000;
+    /** Sentinel value ratio for empty wells below data range */
+    readonly SENTINEL_RATIO: 0.01;
+    /** Color scale data start ratio for extended scales */
+    readonly COLOR_SCALE_THRESHOLD: 0.99;
+    /** Small epsilon for color scale band calculations */
+    readonly COLOR_SCALE_EPSILON: 0.001;
+    /** Proportions for multi-value well display */
+    readonly MULTI_VALUE_PRIMARY_RATIO: 0.575;
+    readonly MULTI_VALUE_SECONDARY_RATIO: 0.425;
+    /** Font sizes */
+    readonly FONT_SIZE_LARGE: 11;
+    /** Offset for centering labels */
+    readonly LABEL_CENTER_OFFSET: -0.5;
+    /** Opacity values */
+    readonly HOVER_OPACITY_FAINT: 0.15;
+    readonly HOVER_OPACITY_VISIBLE: 0.85;
+    /** Layout margins */
+    readonly MARGIN_TOP: 70;
+    readonly MARGIN_RIGHT: 50;
+    readonly MARGIN_BOTTOM: 40;
+    readonly MARGIN_LEFT: 80;
+    /** Colorbar dimensions */
+    readonly COLORBAR_LENGTH: 130;
+    readonly COLORBAR_X_OFFSET: 70;
+    /** Domain position constants for legend placement */
+    readonly DOMAIN_COLORBAR_OFFSET: 0.15;
+    readonly DOMAIN_COLORBAR_END: 0.85;
+};

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

@@ -0,0 +1,2 @@
+export { PlateMap } from './PlateMap';
+export type { PlateMapProps, WellData, PlateFormat, ColorScale } from './PlateMap';