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

package/dist/components/charts/PieChart/PieChart.js

@@ -1,76 +1,77 @@
-import { jsxs as p, jsx as o } from "react/jsx-runtime";
-import y from "plotly.js-dist";
-import N, { useRef as P, useMemo as R, useEffect as _ } from "react";
-import { useChartTooltip as k } from "../ChartTooltip/ChartTooltip.js";
-import { usePlotlyTheme as L } from "../../../hooks/use-plotly-theme.js";
-import { CHART_COLORS as T } from "../../../utils/colors.js";
-const w = T, F = ({
+import { jsxs as u, jsx as t } from "react/jsx-runtime";
+import N, { useRef as _, useMemo as L, useEffect as P } from "react";
+import { useChartTooltip as R } from "../ChartTooltip/ChartTooltip.js";
+import { loadPlotly as T, getLoadedPlotly as k } from "../plotly-loader.js";
+import { usePlotlyTheme as O, CHART_FONT_FAMILY as y } from "../../../hooks/use-plotly-theme.js";
+import { CHART_COLORS as z } from "../../../utils/colors.js";
+const w = z, H = ({
   dataSeries: e,
-  width: m = 400,
-  height: u = 400,
-  title: g,
-  textInfo: h = "percent",
-  hole: d = 0,
-  rotation: x = 0
+  width: a = 400,
+  height: g = 400,
+  title: h,
+  textInfo: d = "percent",
+  hole: x = 0,
+  rotation: b = 0
 }) => {
-  const s = P(null), i = L(), { bindTooltip: b, tooltipElement: C } = k({ followCursor: !0 }), a = R(() => {
+  const r = _(null), m = O(), { bindTooltip: v, tooltipElement: C } = R({ followCursor: !0 }), f = L(() => {
     if (e.colors && e.colors.length >= e.labels.length)
       return e.colors;
-    const l = [...e.colors || []], r = e.labels.length - l.length;
-    if (r <= 0) return l;
-    for (let t = 0; t < r; t++)
-      l.push(w[t % w.length]);
-    return l;
+    const o = [...e.colors || []], s = e.labels.length - o.length;
+    if (s <= 0) return o;
+    for (let n = 0; n < s; n++)
+      o.push(w[n % w.length]);
+    return o;
   }, [e.colors, e.labels.length]);
-  return _(() => {
-    if (!s.current) return;
-    const l = [
+  return P(() => {
+    if (!r.current) return;
+    const o = [
       {
         type: "pie",
         labels: e.labels,
         values: e.values,
         name: e.name,
         marker: {
-          colors: a
+          colors: f
         },
-        textinfo: h,
+        textinfo: d,
         hoverinfo: "none",
         insidetextfont: {
           size: 0,
-          family: "Inter, sans-serif",
+          family: y,
           color: "transparent"
         },
-        hole: d,
-        rotation: x
+        hole: x,
+        rotation: b
       }
-    ], r = {
-      width: m,
-      height: u,
+    ], s = {
+      width: a,
+      height: g,
       font: {
-        family: "Inter, sans-serif",
-        color: i.textColor
+        family: y,
+        color: m.textColor
       },
       showlegend: !1,
       margin: { l: 40, r: 40, b: 40, t: 40 },
-      paper_bgcolor: i.paperBg,
-      plot_bgcolor: i.plotBg
-    }, t = {
+      paper_bgcolor: m.paperBg,
+      plot_bgcolor: m.plotBg
+    }, n = {
       responsive: !0,
       displayModeBar: !1,
       displaylogo: !1
     };
-    y.newPlot(s.current, l, r, t), b(s.current);
-    const c = s.current;
-    return () => {
-      c && y.purge(c);
+    let i = !1, c = null;
+    return T().then((l) => {
+      i || !r.current || (l.newPlot(r.current, o, s, n), v(r.current), c = r.current);
+    }), () => {
+      i = !0, c && k().purge(c);
     };
-  }, [a, e.labels, e.name, e.values, m, u, h, d, x, i, b]), /* @__PURE__ */ p("div", { className: "relative", style: { width: m }, children: [
-    /* @__PURE__ */ p("div", { className: "size-full", children: [
-      g && /* @__PURE__ */ o("div", { className: "px-10 text-center", children: /* @__PURE__ */ o("h2", { className: "m-0 text-[32px] leading-tight font-semibold", children: g }) }),
-      /* @__PURE__ */ o(
+  }, [f, e.labels, e.name, e.values, a, g, d, x, b, m, v]), /* @__PURE__ */ u("div", { className: "relative", style: { width: a }, children: [
+    /* @__PURE__ */ u("div", { className: "size-full", children: [
+      h && /* @__PURE__ */ t("div", { className: "px-10 text-center", children: /* @__PURE__ */ t("h2", { className: "m-0 text-[32px] leading-tight font-semibold", children: h }) }),
+      /* @__PURE__ */ t(
         "div",
         {
-          ref: s,
+          ref: r,
           style: {
             width: "100%",
             height: "100%",
@@ -78,40 +79,40 @@ const w = T, F = ({
           }
         }
       ),
-      /* @__PURE__ */ o(({
-        labels: l,
-        colors: r
+      /* @__PURE__ */ t(({
+        labels: o,
+        colors: s
       }) => {
-        const t = l.map((n, f) => /* @__PURE__ */ o(N.Fragment, { children: /* @__PURE__ */ p("div", { className: "flex items-center text-[13px] leading-[18px] font-medium", children: [
-          /* @__PURE__ */ o(
+        const n = o.map((l, p) => /* @__PURE__ */ t(N.Fragment, { children: /* @__PURE__ */ u("div", { className: "flex items-center text-[13px] leading-[18px] font-medium", children: [
+          /* @__PURE__ */ t(
             "span",
             {
               "data-slot": "pie-legend-swatch",
               className: "mr-1.5 inline-block size-3 rounded-[4px]",
-              style: { background: r[f] }
+              style: { background: s[p] }
             }
           ),
-          n,
-          f < l.length - 1 && /* @__PURE__ */ o("span", { className: "mx-3 inline-block h-6 w-0.5 bg-border" })
-        ] }) }, `${n}-${f}`)), c = 6, v = [];
-        for (let n = 0; n < t.length; n += c)
-          v.push(
-            /* @__PURE__ */ o(
+          l,
+          p < o.length - 1 && /* @__PURE__ */ t("span", { className: "mx-3 inline-block h-6 w-0.5 bg-border" })
+        ] }) }, `${l}-${p}`)), i = 6, c = [];
+        for (let l = 0; l < n.length; l += i)
+          c.push(
+            /* @__PURE__ */ t(
               "div",
               {
                 className: "mb-2 flex w-full max-w-full flex-wrap items-center justify-center gap-y-3 break-words px-10",
-                children: t.slice(n, n + c)
+                children: n.slice(l, l + i)
               },
-              n
+              l
             )
           );
-        return /* @__PURE__ */ o("div", { "data-slot": "pie-legend", className: "flex w-full flex-wrap text-foreground", children: v });
-      }, { labels: e.labels, colors: a })
+        return /* @__PURE__ */ t("div", { "data-slot": "pie-legend", className: "flex w-full flex-wrap text-foreground", children: c });
+      }, { labels: e.labels, colors: f })
     ] }),
     C
   ] });
 };
 export {
-  F as PieChart
+  H as PieChart
 };
 //# sourceMappingURL=PieChart.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PieChart.js","sources":["../../../../src/components/charts/PieChart/PieChart.tsx"],"sourcesContent":["import Plotly from \"plotly.js-dist\";\nimport React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { useChartTooltip } from \"../ChartTooltip\";\n\nimport { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport { CHART_COLORS } from \"@/utils/colors\";\n\ninterface PieDataSeries {\n  labels: string[];\n  values: number[];\n  name: string;\n  colors?: string[];\n}\n\ntype PieTextInfo =\n  | \"none\"\n  | \"label\"\n  | \"percent\"\n  | \"value\"\n  | \"label+percent\"\n  | \"label+value\"\n  | \"value+percent\"\n  | \"label+value+percent\";\n\ntype PieChartProps = {\n  dataSeries: PieDataSeries;\n  width?: number;\n  height?: number;\n  title?: string;\n  textInfo?: PieTextInfo;\n  hole?: number;\n  rotation?: number;\n};\n\nconst DEFAULT_COLORS = CHART_COLORS;\n\nconst PieChart: React.FC<PieChartProps> = ({\n  dataSeries,\n  width = 400,\n  height = 400,\n  title,\n  textInfo = \"percent\",\n  hole = 0,\n  rotation = 0,\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n  // Slices are large hover targets, so the tooltip tracks the cursor (clamped\n  // to the viewport) rather than pinning to the slice centroid\n  const { bindTooltip, tooltipElement } = useChartTooltip({ followCursor: true });\n\n  const colors = useMemo(() => {\n    if (\n      dataSeries.colors &&\n      dataSeries.colors.length >= dataSeries.labels.length\n    ) {\n      return dataSeries.colors;\n    }\n\n    const result = [...(dataSeries.colors || [])];\n    const missingColors = dataSeries.labels.length - result.length;\n\n    if (missingColors <= 0) return result;\n\n    for (let i = 0; i < missingColors; i++) {\n      result.push(DEFAULT_COLORS[i % DEFAULT_COLORS.length]);\n    }\n\n    return result;\n  }, [dataSeries.colors, dataSeries.labels.length]);\n\n  useEffect(() => {\n    if (!plotRef.current) return;\n\n    const plotData = [\n      {\n        type: \"pie\" as const,\n        labels: dataSeries.labels,\n        values: dataSeries.values,\n        name: dataSeries.name,\n        marker: {\n          colors: colors,\n        },\n        textinfo: textInfo,\n        hoverinfo: \"none\" as const,\n        insidetextfont: {\n          size: 0,\n          family: \"Inter, sans-serif\",\n          color: \"transparent\",\n        },\n        hole: hole,\n        rotation: rotation,\n      },\n    ];\n\n    const layout = {\n      width,\n      height,\n      font: {\n        family: \"Inter, sans-serif\",\n        color: theme.textColor,\n      },\n      showlegend: false,\n      margin: { l: 40, r: 40, b: 40, t: 40 },\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\n    };\n\n    const config = {\n      responsive: true,\n      displayModeBar: false,\n      displaylogo: false,\n    };\n\n    Plotly.newPlot(plotRef.current, plotData, layout, config);\n    bindTooltip(plotRef.current);\n\n    // Capture ref value for cleanup\n    const plotElement = plotRef.current;\n\n    return () => {\n      if (plotElement) {\n        Plotly.purge(plotElement);\n      }\n    };\n  }, [colors, dataSeries.labels, dataSeries.name, dataSeries.values, width, height, textInfo, hole, rotation, theme, bindTooltip]);\n\n  const PieChartLegend: React.FC<{ labels: string[]; colors: string[] }> = ({\n    labels,\n    colors,\n  }) => {\n    const items = labels.map((label, i) => (\n      <React.Fragment key={`${label}-${i}`}>\n        <div className=\"flex items-center text-[13px] leading-[18px] font-medium\">\n          <span\n            data-slot=\"pie-legend-swatch\"\n            className=\"mr-1.5 inline-block size-3 rounded-[4px]\"\n            style={{ background: colors[i] }}\n          />\n          {label}\n          {i < labels.length - 1 && (\n            <span className=\"mx-3 inline-block h-6 w-0.5 bg-border\" />\n          )}\n        </div>\n      </React.Fragment>\n    ));\n\n    const rowSize = 6;\n    const rows = [];\n    for (let i = 0; i < items.length; i += rowSize) {\n      rows.push(\n        <div\n          className=\"mb-2 flex w-full max-w-full flex-wrap items-center justify-center gap-y-3 break-words px-10\"\n          key={i}\n        >\n          {items.slice(i, i + rowSize)}\n        </div>\n      );\n    }\n    return (\n      <div data-slot=\"pie-legend\" className=\"flex w-full flex-wrap text-foreground\">\n        {rows}\n      </div>\n    );\n  };\n\n  return (\n    <div className=\"relative\" style={{ width: width }}>\n      <div className=\"size-full\">\n        {title && (\n          <div className=\"px-10 text-center\">\n            <h2 className=\"m-0 text-[32px] leading-tight font-semibold\">{title}</h2>\n          </div>\n        )}\n        <div\n          ref={plotRef}\n          style={{\n            width: \"100%\",\n            height: \"100%\",\n            margin: \"0\",\n          }}\n        />\n        <PieChartLegend labels={dataSeries.labels} colors={colors} />\n      </div>\n      {tooltipElement}\n    </div>\n  );\n};\n\nexport { PieChart };\nexport type { PieDataSeries, PieTextInfo, PieChartProps };\n"],"names":["DEFAULT_COLORS","CHART_COLORS","PieChart","dataSeries","width","height","title","textInfo","hole","rotation","plotRef","useRef","theme","usePlotlyTheme","bindTooltip","tooltipElement","useChartTooltip","colors","useMemo","result","missingColors","i","useEffect","plotData","layout","config","Plotly","plotElement","jsxs","jsx","labels","items","label","React","rowSize","rows"],"mappings":"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"}
+{"version":3,"file":"PieChart.js","sources":["../../../../src/components/charts/PieChart/PieChart.tsx"],"sourcesContent":["import React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { useChartTooltip } from \"../ChartTooltip\";\nimport { getLoadedPlotly, loadPlotly } from \"../plotly-loader\";\n\nimport { CHART_FONT_FAMILY, usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport { CHART_COLORS } from \"@/utils/colors\";\n\ninterface PieDataSeries {\n  labels: string[];\n  values: number[];\n  name: string;\n  colors?: string[];\n}\n\ntype PieTextInfo =\n  | \"none\"\n  | \"label\"\n  | \"percent\"\n  | \"value\"\n  | \"label+percent\"\n  | \"label+value\"\n  | \"value+percent\"\n  | \"label+value+percent\";\n\ntype PieChartProps = {\n  dataSeries: PieDataSeries;\n  width?: number;\n  height?: number;\n  title?: string;\n  textInfo?: PieTextInfo;\n  hole?: number;\n  rotation?: number;\n};\n\nconst DEFAULT_COLORS = CHART_COLORS;\n\nconst PieChart: React.FC<PieChartProps> = ({\n  dataSeries,\n  width = 400,\n  height = 400,\n  title,\n  textInfo = \"percent\",\n  hole = 0,\n  rotation = 0,\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n  // Slices are large hover targets, so the tooltip tracks the cursor (clamped\n  // to the viewport) rather than pinning to the slice centroid\n  const { bindTooltip, tooltipElement } = useChartTooltip({ followCursor: true });\n\n  const colors = useMemo(() => {\n    if (\n      dataSeries.colors &&\n      dataSeries.colors.length >= dataSeries.labels.length\n    ) {\n      return dataSeries.colors;\n    }\n\n    const result = [...(dataSeries.colors || [])];\n    const missingColors = dataSeries.labels.length - result.length;\n\n    if (missingColors <= 0) return result;\n\n    for (let i = 0; i < missingColors; i++) {\n      result.push(DEFAULT_COLORS[i % DEFAULT_COLORS.length]);\n    }\n\n    return result;\n  }, [dataSeries.colors, dataSeries.labels.length]);\n\n  useEffect(() => {\n    if (!plotRef.current) return;\n\n    const plotData = [\n      {\n        type: \"pie\" as const,\n        labels: dataSeries.labels,\n        values: dataSeries.values,\n        name: dataSeries.name,\n        marker: {\n          colors: colors,\n        },\n        textinfo: textInfo,\n        hoverinfo: \"none\" as const,\n        insidetextfont: {\n          size: 0,\n          family: CHART_FONT_FAMILY,\n          color: \"transparent\",\n        },\n        hole: hole,\n        rotation: rotation,\n      },\n    ];\n\n    const layout = {\n      width,\n      height,\n      font: {\n        family: CHART_FONT_FAMILY,\n        color: theme.textColor,\n      },\n      showlegend: false,\n      margin: { l: 40, r: 40, b: 40, t: 40 },\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\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      plotly.newPlot(plotRef.current, plotData, layout, config);\n      bindTooltip(plotRef.current);\n\n      // Capture ref value for cleanup\n      plotElement = plotRef.current;\n    });\n\n    return () => {\n      cancelled = true;\n      if (plotElement) {\n        getLoadedPlotly().purge(plotElement);\n      }\n    };\n  }, [colors, dataSeries.labels, dataSeries.name, dataSeries.values, width, height, textInfo, hole, rotation, theme, bindTooltip]);\n\n  const PieChartLegend: React.FC<{ labels: string[]; colors: string[] }> = ({\n    labels,\n    colors,\n  }) => {\n    const items = labels.map((label, i) => (\n      <React.Fragment key={`${label}-${i}`}>\n        <div className=\"flex items-center text-[13px] leading-[18px] font-medium\">\n          <span\n            data-slot=\"pie-legend-swatch\"\n            className=\"mr-1.5 inline-block size-3 rounded-[4px]\"\n            style={{ background: colors[i] }}\n          />\n          {label}\n          {i < labels.length - 1 && (\n            <span className=\"mx-3 inline-block h-6 w-0.5 bg-border\" />\n          )}\n        </div>\n      </React.Fragment>\n    ));\n\n    const rowSize = 6;\n    const rows = [];\n    for (let i = 0; i < items.length; i += rowSize) {\n      rows.push(\n        <div\n          className=\"mb-2 flex w-full max-w-full flex-wrap items-center justify-center gap-y-3 break-words px-10\"\n          key={i}\n        >\n          {items.slice(i, i + rowSize)}\n        </div>\n      );\n    }\n    return (\n      <div data-slot=\"pie-legend\" className=\"flex w-full flex-wrap text-foreground\">\n        {rows}\n      </div>\n    );\n  };\n\n  return (\n    <div className=\"relative\" style={{ width: width }}>\n      <div className=\"size-full\">\n        {title && (\n          <div className=\"px-10 text-center\">\n            <h2 className=\"m-0 text-[32px] leading-tight font-semibold\">{title}</h2>\n          </div>\n        )}\n        <div\n          ref={plotRef}\n          style={{\n            width: \"100%\",\n            height: \"100%\",\n            margin: \"0\",\n          }}\n        />\n        <PieChartLegend labels={dataSeries.labels} colors={colors} />\n      </div>\n      {tooltipElement}\n    </div>\n  );\n};\n\nexport { PieChart };\nexport type { PieDataSeries, PieTextInfo, PieChartProps };\n"],"names":["DEFAULT_COLORS","CHART_COLORS","PieChart","dataSeries","width","height","title","textInfo","hole","rotation","plotRef","useRef","theme","usePlotlyTheme","bindTooltip","tooltipElement","useChartTooltip","colors","useMemo","result","missingColors","i","useEffect","plotData","CHART_FONT_FAMILY","layout","config","cancelled","plotElement","loadPlotly","plotly","getLoadedPlotly","jsxs","jsx","labels","items","label","React","rowSize","rows"],"mappings":"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"}

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"),De=require("plotly.js-dist"),r=require("react");;/* empty css                */const ot=require("../ChartTooltip/ChartTooltip.cjs"),n=require("./constants.cjs"),R=require("./types.cjs"),u=require("./utils.cjs"),lt=require("../../ui/button.cjs"),st=require("../../../hooks/use-plotly-theme.cjs"),rt=({data:h,layerConfigs:ce,initialLayerId:Ie,onLayerChange:je,plateFormat:ie=R.PLATE_FORMAT_96,rows:Fe,columns:ke,visualizationMode:Ge="heatmap",categoryColors:pe,regions:M,title:v,xTitle:ue,yTitle:w,xLabels:de,yLabels:me,colorScale:$e=n.DEFAULT_COLOR_SCALE,valueMin:Ue,valueMax:qe,emptyWellColor:y=n.COLORS.emptyWell,showColorBar:fe=!0,showLegend:Ve=!0,legendConfig:_,width:E=800,height:P=500,precision:J=0,markerShape:G="circle",onWellClick:ge})=>{const Ae=r.useRef(null),x=st.usePlotlyTheme(),K=r.useRef(ge);K.current=ge;const[Q,Be]=r.useState(Ie);let c,i;if(ie===R.PLATE_FORMAT_CUSTOM)c=Fe??8,i=ke??12;else{const e=n.PLATE_CONFIGS[ie];c=e.rows,i=e.columns}const ee=r.useMemo(()=>u.calculateMarkerSize(E,P,c,i,G,!!v,!!w),[E,P,c,i,G,v,w]),{bindTooltip:he,tooltipElement:Ze}=ot.useChartTooltip({hoverDistance:Math.ceil(ee/2)}),m=r.useMemo(()=>{if(Array.isArray(h)&&h.length>0&&"wellId"in h[0]){const e=h;if(u.hasMultiValueWells(e))return u.extractLayers(e,ce)}return null},[h,ce]),f=r.useMemo(()=>!m||m.length===0?null:Q?m.find(e=>e.id===Q)??m[0]:m[0],[m,Q]),b=f?.visualizationMode??Ge,C=f?.colorScale??$e,He=f?.valueMin??Ue,We=f?.valueMax??qe,$=f?.valueUnit?` ${f.valueUnit}`:"",U=r.useMemo(()=>({...n.DEFAULT_CATEGORY_COLORS,...pe,...f?.categoryColors}),[pe,f?.categoryColors]),_e=f?.id,{grid:S,categoriesGrid:te,allValuesMap:q,tooltipDataMap:V}=r.useMemo(()=>{let e,t=Array.from({length:c},()=>Array(i).fill(null)),o=new Map,l=new Map;if(Array.isArray(h)&&h.length>0){const a=u.wellDataToGrid(h,c,i,_e);e=a.grid,t=a.categories,o=a.allValues,l=a.tooltipData}else e=Array.from({length:c},()=>Array.from({length:i},()=>Math.random()*n.PLATEMAP_CONSTANTS.MAX_RANDOM_VALUE));return{grid:e,categoriesGrid:t,allValuesMap:o,tooltipDataMap:l}},[h,c,i,_e]),T=r.useMemo(()=>me??u.generateRowLabels(c),[me,c]),L=r.useMemo(()=>de??u.generateColumnLabels(i),[de,i]),xe=u.calculateValueRange(S),z=He??xe.min,D=We??xe.max,I=S.some(e=>e.includes(null)),N=z-(D-z)*n.PLATEMAP_CONSTANTS.SENTINEL_RATIO-1,Se=r.useMemo(()=>I?S.map(e=>e.map(t=>t===null?N:t)):S,[I,S,N]),Te=r.useMemo(()=>{if(!I)return C;let e;if(typeof C=="string"){const a=n.NAMED_COLORSCALES[C];if(a)e=a;else return C}else e=C;const t=D-N,o=(z-N)/t,l=[[0,y],[o*n.PLATEMAP_CONSTANTS.COLOR_SCALE_THRESHOLD,y]];for(const[a,d]of e){const g=o+a*(1-o);l.push([g,d])}return l},[C,I,z,D,N,y]),Me=I?N:z,ye=r.useMemo(()=>{const e=new Map;if(m)for(const t of m)e.set(t.id,t);return e},[m]),Le=r.useMemo(()=>S.map((e,t)=>e.map((o,l)=>{const a=`${T[t]}${L[l]}`,d=String(a).toUpperCase();return u.buildWellHoverText({wellId:a,value:o,allValues:q.get(d),tooltipExtra:V.get(d),activeLayerId:f?.id,layerConfigMap:ye,precision:J,valueUnit:$})})),[S,T,L,q,V,f?.id,ye,J,$]),{categoricalGrid:ae,categoricalColorScale:oe,uniqueTypes:le,catMax:Oe}=r.useMemo(()=>{if(b!=="categorical")return{categoricalGrid:null,categoricalColorScale:null,uniqueTypes:[],catMax:0};const e=new Set;let t=!1;for(const p of te)for(const A of p)A?e.add(A):t=!0;t&&e.add("empty");const o=[...e].sort(),l=new Map;o.forEach((p,A)=>l.set(p,A));const a=te.map(p=>p.map(A=>A===null?l.get("empty")??0:l.get(A)??l.get("empty")??0)),d=o.length,g=[];if(d===1){const p=U[o[0]]||y;g.push([0,p]),g.push([1,p])}else o.forEach((p,A)=>{const W=U[p]||y,Y=A/(d-1),X=.5/(d-1),k=Math.max(0,Y-X),re=Math.min(1,Y+X-n.PLATEMAP_CONSTANTS.COLOR_SCALE_EPSILON);g.push([k,W]),g.push([re,W])});return{categoricalGrid:a,categoricalColorScale:g,uniqueTypes:o,catMax:d-1}},[b,te,U,y]),ve=r.useMemo(()=>{if(!M||M.length===0)return[];const e=[];for(const t of M){const o=u.parseRegionWells(t.wells,T,L);if(!o)continue;const l=.49,a=o.minCol+1-l,d=o.maxCol+1+l,g=o.minRow-l,p=o.maxRow+l;e.push({type:"rect",xref:"x",yref:"y",x0:a,x1:d,y0:g,y1:p,line:{color:t.borderColor||n.COLORS.textDark,width:t.borderWidth??2},fillcolor:t.fillColor||"transparent",layer:"above"})}return e},[M,T,L]);r.useEffect(()=>{const e=Ae.current;if(!e)return;const t=b==="categorical",o=t&&ae?ae:Se,l=t&&oe?oe:Te,a=t?0:Me,d=t?Oe||1:D,g=t?!1:fe,{xData:p,yData:A,colorData:W,textData:Y}=u.flattenGridData(o,T,Le,c,i,a),X=[{x:p,y:A,mode:"markers",type:"scatter",marker:{symbol:G,size:ee,color:W,colorscale:l,cmin:a,cmax:d,showscale:g,colorbar:u.buildColorbarConfig(_?.position??"right",$,_?.title),line:{color:x.gridColor,width:1}},hoverinfo:"none",text:Y}],k=_?.position??"right",re={autosize:!1,title:v?{text:v,font:{family:"Inter, sans-serif",size:20,color:x.textSecondary},x:u.calculateTitleX(k),xanchor:"center",y:.98,yanchor:"top"}:void 0,width:E,height:P,margin:u.buildPlotMargins(k,!!v,!!w),xaxis:{title:{text:ue||"",font:{size:16,color:x.textSecondary,family:"Inter, sans-serif"},standoff:15},side:"top",fixedrange:!0,dtick:1,range:[.5,i+.5],automargin:!1,tickmode:"array",tickvals:Array.from({length:i},(ne,O)=>O+1),ticktext:L.map(String),tickangle:0,tickfont:{size:i>24?8:n.PLATEMAP_CONSTANTS.FONT_SIZE_LARGE},domain:u.calculateAxisDomain(k)},yaxis:{title:{text:w||"",font:{size:16,color:x.textSecondary,family:"Inter, sans-serif"},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},(ne,O)=>O),ticktext:T.map(String),tickfont:{size:c>16?8:n.PLATEMAP_CONSTANTS.FONT_SIZE_LARGE}},paper_bgcolor:x.paperBg,plot_bgcolor:x.plotBg,font:{family:"Inter, sans-serif",color:x.textSecondary},shapes:ve},Qe={responsive:!0,displayModeBar:!1,displaylogo:!1};return De.newPlot(e,X,re,Qe),he(e),e.on("plotly_click",ne=>{if(!K.current)return;const O=ne.points[0];if(O){const Ne=T,Re=L,we=Ne.indexOf(O.y),Pe=Re.indexOf(O.x);if(we>=0&&Pe>=0){const be=`${Ne[we]}${Re[Pe]}`,ze=String(be).toUpperCase(),et=q.get(ze),tt=V.get(ze),at={wellId:be,values:et,tooltipData:tt};K.current?.(at)}}}),()=>{e&&De.purge(e)}},[Se,L,T,Te,fe,Me,D,$,v,ue,w,E,P,Le,J,V,q,S,b,ae,oe,le.length,Oe,ve,c,i,_,G,ee,x,he]);const Ye=()=>!m||m.length<=1?null:s.jsx("div",{className:"platemap-layer-selector",children:m.map(e=>{const t=f?.id===e.id;return s.jsx(lt.Button,{variant:t?"default":"outline",size:"sm",onClick:()=>{Be(e.id),je?.(e.id)},children:e.name},e.id)})}),j=_?.position??"right",se=_?.fontSize??12,Xe=_?.itemSpacing??4,B=_?.swatchSize??16,Ee=_?.title,Ce=120,F=j==="top"||j==="bottom",Je=()=>{const e=b==="categorical"&&le.length>0,t=M&&M.length>0;if(!Ve||!e&&!t)return F?null:s.jsx("div",{className:"platemap-legend-placeholder",style:{width:Ce}});const o=["platemap-legend"];F?o.push("platemap-legend--horizontal"):j==="left"?o.push("platemap-legend--left"):j==="right"&&o.push("platemap-legend--right");const l={gap:`${Xe}px`,width:F?void 0:Ce};return s.jsxs("div",{className:o.join(" "),style:l,children:[Ee&&s.jsx("div",{className:`platemap-legend__title${F?" platemap-legend__title--horizontal":""}`,style:{fontSize:`${se}px`},children:Ee}),e&&le.map(a=>s.jsxs("div",{className:"platemap-legend__item",children:[s.jsx("div",{className:"platemap-legend__swatch",style:{width:`${B}px`,height:`${B}px`,backgroundColor:U[a]||y}}),s.jsx("span",{className:"platemap-legend__label platemap-legend__label--capitalize",style:{fontSize:`${se}px`},children:a})]},a)),t&&M.map(a=>s.jsxs("div",{className:"platemap-legend__item",children:[s.jsx("div",{className:"platemap-legend__swatch platemap-legend__swatch--region",style:{width:`${B}px`,height:`${B}px`,backgroundColor:a.fillColor||"transparent",border:`${a.borderWidth||2}px solid ${a.borderColor||n.COLORS.regionBorder}`}}),s.jsx("span",{className:"platemap-legend__label",style:{fontSize:`${se}px`},children:a.name})]},a.id))]})},Z=s.jsxs("div",{className:"relative",children:[s.jsx("div",{ref:Ae,className:"platemap-plot",style:{width:E,height:P}}),Ze]}),H=Je(),Ke=()=>{switch(j){case"left":return s.jsxs("div",{className:"platemap-plot-wrapper platemap-plot-wrapper--vertical",children:[H,Z]});case"top":return s.jsxs("div",{className:"platemap-plot-wrapper platemap-plot-wrapper--horizontal",children:[H,Z]});case"bottom":return s.jsxs("div",{className:"platemap-plot-wrapper platemap-plot-wrapper--horizontal",children:[Z,H]});default:return s.jsxs("div",{className:"platemap-plot-wrapper platemap-plot-wrapper--vertical",children:[Z,H]})}};return s.jsxs("div",{className:"platemap-container",style:{width:F?void 0:E},children:[Ye(),Ke()]})};exports.DEFAULT_CATEGORY_COLORS=n.DEFAULT_CATEGORY_COLORS;exports.PLATE_FORMAT_1536=R.PLATE_FORMAT_1536;exports.PLATE_FORMAT_384=R.PLATE_FORMAT_384;exports.PLATE_FORMAT_96=R.PLATE_FORMAT_96;exports.PLATE_FORMAT_CUSTOM=R.PLATE_FORMAT_CUSTOM;exports.PlateMap=rt;
+"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 Plotly from \"plotly.js-dist\";\nimport React, { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport \"./PlateMap.scss\";\nimport { useChartTooltip } from \"../ChartTooltip\";\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\";\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 { 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    const currentRef = plotRef.current;\n    if (!currentRef) 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: \"Inter, sans-serif\",\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: \"Inter, sans-serif\",\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: \"Inter, sans-serif\",\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: \"Inter, sans-serif\",\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.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    return () => {\n      if (currentRef) {\n        Plotly.purge(currentRef);\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","currentRef","isCategorical","plotZ","plotColorScale","plotZMin","plotZMax","plotShowScale","xData","yData","colorData","textData","flattenGridData","plotData","buildColorbarConfig","legendPosition","layout","calculateTitleX","buildPlotMargins","_","i","calculateAxisDomain","Plotly","eventData","point","rowLabelsArr","colLabelsArr","allValues","tooltipData","wellData","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":"oaAwEMA,GAAoC,CAAC,CACzC,KAAAC,EACA,aAAAC,GACA,eAAAC,GACA,cAAAC,GACA,YAAAC,GAAcC,EAAAA,gBACd,KAAMC,GACN,QAASC,GACT,kBAAmBC,GAAwB,UAC3C,eAAgBC,GAChB,QAAAC,EACA,MAAAC,EACA,OAAAC,GACA,OAAAC,EACA,QAASC,GACT,QAASC,GACT,WAAYC,GAAiBC,EAAAA,oBAC7B,SAAUC,GACV,SAAUC,GACV,eAAAC,EAAiBC,EAAAA,OAAO,UACxB,aAAAC,GAAe,GACf,WAAAC,GAAa,GACb,aAAAC,EACA,MAAAC,EAAQ,IACR,OAAAC,EAAS,IACT,UAAAC,EAAY,EACZ,YAAAC,EAAc,SACd,YAAAC,EACF,IAAM,CACJ,MAAMC,EAAUC,EAAAA,OAAuB,IAAI,EACrCC,EAAQC,EAAAA,eAAA,EACRC,EAAiBH,EAAAA,OAAOF,EAAW,EACzCK,EAAe,QAAUL,GAGzB,KAAM,CAACM,GAAeC,EAAgB,EAAIC,EAAAA,SAA6BnC,EAAc,EAGrF,IAAIoC,EACAC,EAEJ,GAAInC,KAAgBoC,EAAAA,oBAClBF,EAAOhC,IAAc,EACrBiC,EAAUhC,IAAiB,OACtB,CACL,MAAMkC,EAASC,EAAAA,cAActC,EAAW,EACxCkC,EAAOG,EAAO,KACdF,EAAUE,EAAO,OACnB,CAIA,MAAME,GAAaC,EAAAA,QACjB,IAAMC,sBAAoBpB,EAAOC,EAAQY,EAAMC,EAASX,EAAa,CAAC,CAACjB,EAAO,CAAC,CAACE,CAAM,EACtF,CAACY,EAAOC,EAAQY,EAAMC,EAASX,EAAajB,EAAOE,CAAM,CAAA,EAErD,CAAE,YAAAiC,GAAa,eAAAC,EAAA,EAAmBC,mBAAgB,CACtD,cAAe,KAAK,KAAKL,GAAa,CAAC,CAAA,CACxC,EAGKM,EAAkBL,EAAAA,QAAQ,IAA4B,CAE1D,GAAI,MAAM,QAAQ5C,CAAI,GAAKA,EAAK,OAAS,GAAK,WAAaA,EAAK,CAAC,EAAgB,CAC/E,MAAMkD,EAAgBlD,EACtB,GAAImD,EAAAA,mBAAmBD,CAAa,EAClC,OAAOE,EAAAA,cAAcF,EAAejD,EAAY,CAEpD,CAEA,OAAO,IACT,EAAG,CAACD,EAAMC,EAAY,CAAC,EAGjBoD,EAAcT,EAAAA,QAAQ,IACtB,CAACK,GAAmBA,EAAgB,SAAW,EAAU,KACzDd,GACKc,EAAgB,KAAMK,GAAMA,EAAE,KAAOnB,EAAa,GAAKc,EAAgB,CAAC,EAE1EA,EAAgB,CAAC,EACvB,CAACA,EAAiBd,EAAa,CAAC,EAI7BoB,EAAoBF,GAAa,mBAAqB7C,GACtDgD,EAAaH,GAAa,YAAcrC,GACxCyC,GAAWJ,GAAa,UAAYnC,GACpCwC,GAAWL,GAAa,UAAYlC,GAEpCwC,EAAYN,GAAa,UAAY,IAAIA,EAAY,SAAS,GAAK,GAGnEO,EAAiBhB,EAAAA,QACrB,KAAO,CAAE,GAAGiB,EAAAA,wBAAyB,GAAGpD,GAAsB,GAAG4C,GAAa,iBAC9E,CAAC5C,GAAsB4C,GAAa,cAAc,CAAA,EAK9CS,GAAiBT,GAAa,GAC9B,CAAE,KAAAU,EAAM,eAAAC,GAAgB,aAAAC,EAAc,eAAAC,CAAA,EAAmBtB,EAAAA,QAAQ,IAAM,CAC3E,IAAIuB,EACAC,EAAwC,MAAM,KAAK,CAAE,OAAQ9B,CAAA,EAAQ,IACvE,MAAMC,CAAO,EAAE,KAAK,IAAI,CAAA,EAEtB8B,MAAsB,IACtBC,MAAwB,IAE5B,GAAI,MAAM,QAAQtE,CAAI,GAAKA,EAAK,OAAS,EAAG,CAE1C,MAAMuE,EAASC,EAAAA,eAAexE,EAAMsC,EAAMC,EAASuB,EAAc,EACjEK,EAAaI,EAAO,KACpBH,EAAmBG,EAAO,WAC1BF,EAAkBE,EAAO,UACzBD,EAAoBC,EAAO,WAC7B,MAEEJ,EAAa,MAAM,KAAK,CAAE,OAAQ7B,CAAA,EAAQ,IACxC,MAAM,KAAK,CAAE,OAAQC,GAAW,IAAM,KAAK,SAAWkC,EAAAA,mBAAmB,gBAAgB,CAAA,EAI7F,MAAO,CAAE,KAAMN,EAAY,eAAgBC,EAAkB,aAAcC,EAAiB,eAAgBC,CAAA,CAC9G,EAAG,CAACtE,EAAMsC,EAAMC,EAASuB,EAAc,CAAC,EAKlCY,EAAY9B,EAAAA,QAChB,IAAM7B,IAAiB4D,EAAAA,kBAAkBrC,CAAI,EAC7C,CAACvB,GAAeuB,CAAI,CAAA,EAEhBsC,EAAYhC,EAAAA,QAChB,IAAM9B,IAAiB+D,EAAAA,qBAAqBtC,CAAO,EACnD,CAACzB,GAAeyB,CAAO,CAAA,EAInBuC,GAAQC,EAAAA,oBAAoBhB,CAAI,EAChCiB,EAAOvB,IAAYqB,GAAM,IACzBG,EAAOvB,IAAYoB,GAAM,IAGzBI,EAAgBnB,EAAK,QAAYoB,EAAI,SAAS,IAAI,CAAC,EAInDC,EAAgBJ,GAAQC,EAAOD,GAAQP,EAAAA,mBAAmB,eAAiB,EAG3EY,GAAczC,EAAAA,QAClB,IACEsC,EACInB,EAAK,IAAKoB,GAAQA,EAAI,IAAKG,GAASA,IAAQ,KAAOF,EAAgBE,CAAI,CAAC,EACxEvB,EACN,CAACmB,EAAenB,EAAMqB,CAAa,CAAA,EAI/BG,GAAsB3C,EAAAA,QAAQ,IAAM,CACxC,GAAI,CAACsC,EAAe,OAAO1B,EAG3B,IAAIgC,EACJ,GAAI,OAAOhC,GAAe,SAAU,CAElC,MAAMiC,EAAaC,EAAAA,kBAAkBlC,CAAU,EAC/C,GAAIiC,EACFD,EAAkBC,MAIlB,QAAOjC,CAEX,MACEgC,EAAkBhC,EAKpB,MAAMmC,EAAaV,EAAOG,EACpBQ,GAAkBZ,EAAOI,GAAiBO,EAG1CE,EAAyC,CAC7C,CAAC,EAAGzE,CAAc,EAClB,CAACwE,EAAiBnB,qBAAmB,sBAAuBrD,CAAc,CAAA,EAI5E,SAAW,CAAC0E,EAAKC,CAAK,IAAKP,EAAiB,CAC1C,MAAMQ,EAASJ,EAAiBE,GAAO,EAAIF,GAC3CC,EAAc,KAAK,CAACG,EAAQD,CAAK,CAAC,CACpC,CAEA,OAAOF,CACT,EAAG,CAACrC,EAAY0B,EAAeF,EAAMC,EAAMG,EAAehE,CAAc,CAAC,EAGnE6E,GAAgBf,EAAgBE,EAAgBJ,EAGhDkB,GAAiBtD,EAAAA,QAAQ,IAAM,CACnC,MAAMuD,MAAU,IAChB,GAAIlD,EACF,UAAWmD,KAASnD,EAClBkD,EAAI,IAAIC,EAAM,GAAIA,CAAK,EAG3B,OAAOD,CACT,EAAG,CAAClD,CAAe,CAAC,EAIdoD,GAAYzD,EAAAA,QAChB,IACEmB,EAAK,IAAI,CAACoB,EAAKmB,IACbnB,EAAI,IAAI,CAACG,EAAKiB,IAAW,CACvB,MAAMC,EAAS,GAAG9B,EAAU4B,CAAM,CAAC,GAAG1B,EAAU2B,CAAM,CAAC,GACjDE,EAAc,OAAOD,CAAM,EAAE,YAAA,EACnC,OAAOE,qBAAmB,CACxB,OAAAF,EACA,MAAOlB,EACP,UAAWrB,EAAa,IAAIwC,CAAW,EACvC,aAAcvC,EAAe,IAAIuC,CAAW,EAC5C,cAAepD,GAAa,GAC5B,eAAA6C,GACA,UAAAvE,EACA,UAAAgC,CAAA,CACD,CACH,CAAC,CAAA,EAEL,CAACI,EAAMW,EAAWE,EAAWX,EAAcC,EAAgBb,GAAa,GAAI6C,GAAgBvE,EAAWgC,CAAS,CAAA,EAI5G,CAAE,gBAAAgD,GAAiB,sBAAAC,GAAuB,YAAAC,GAAa,OAAAC,EAAA,EAAWlE,EAAAA,QAAQ,IAAM,CACpF,GAAIW,IAAsB,cACxB,MAAO,CAAE,gBAAiB,KAAM,sBAAuB,KAAM,YAAa,CAAA,EAAI,OAAQ,CAAA,EAIxF,MAAMwD,MAAe,IACrB,IAAIC,EAAkB,GACtB,UAAW7B,KAAOnB,GAChB,UAAWiD,KAAY9B,EACjB8B,EACFF,EAAS,IAAIE,CAAQ,EAErBD,EAAkB,GAKpBA,GACFD,EAAS,IAAI,OAAO,EAEtB,MAAMG,EAAQ,CAAC,GAAGH,CAAQ,EAAE,KAAA,EAGtBI,MAAkB,IACxBD,EAAM,QAAQ,CAACE,EAAMC,IAAQF,EAAY,IAAIC,EAAMC,CAAG,CAAC,EAEvD,MAAMC,EAAsBtD,GAAe,IAAKmB,GAC9CA,EAAI,IAAK8B,GACHA,IAAa,KACRE,EAAY,IAAI,OAAO,GAAK,EAE9BA,EAAY,IAAIF,CAAQ,GAAKE,EAAY,IAAI,OAAO,GAAK,CACjE,CAAA,EASGI,EAAWL,EAAM,OACjBM,EAAyC,CAAA,EAE/C,GAAID,IAAa,EAAG,CAElB,MAAMxB,EAAQnC,EAAesD,EAAM,CAAC,CAAC,GAAK9F,EAC1CoG,EAAc,KAAK,CAAC,EAAGzB,CAAK,CAAC,EAC7ByB,EAAc,KAAK,CAAC,EAAGzB,CAAK,CAAC,CAC/B,MAGEmB,EAAM,QAAQ,CAACE,EAAMC,IAAQ,CAC3B,MAAMtB,EAAQnC,EAAewD,CAAI,GAAKhG,EAChCqG,EAAgBJ,GAAOE,EAAW,GAElCG,EAAW,IAAOH,EAAW,GAC7BI,GAAQ,KAAK,IAAI,EAAGF,EAAgBC,CAAQ,EAC5CE,GAAM,KAAK,IAAI,EAAGH,EAAgBC,EAAWjD,EAAAA,mBAAmB,mBAAmB,EACzF+C,EAAc,KAAK,CAACG,GAAO5B,CAAK,CAAC,EACjCyB,EAAc,KAAK,CAACI,GAAK7B,CAAK,CAAC,CACjC,CAAC,EAIH,MAAO,CAAE,gBAAiBuB,EAAS,sBAAuBE,EAAe,YAAaN,EAAO,OAAQK,EAAW,CAAA,CAClH,EAAG,CAAChE,EAAmBS,GAAgBJ,EAAgBxC,CAAc,CAAC,EAGhEyG,GAAejF,EAAAA,QAAQ,IAAM,CACjC,GAAI,CAAClC,GAAWA,EAAQ,SAAW,EACjC,MAAO,CAAA,EAGT,MAAMoH,EAAuC,CAAA,EAE7C,UAAWC,KAAUrH,EAAS,CAC5B,MAAMsH,EAASC,EAAAA,iBAAiBF,EAAO,MAAOrD,EAAWE,CAAS,EAClE,GAAI,CAACoD,EAAQ,SAUb,MAAME,EAAQ,IACRC,EAAMH,EAAO,OAAS,EAAKE,EAC3BE,EAAMJ,EAAO,OAAS,EAAKE,EAC3BG,EAAKL,EAAO,OAASE,EACrBI,EAAKN,EAAO,OAASE,EAE3BJ,EAAO,KAAK,CACV,KAAM,OACN,KAAM,IACN,KAAM,IACN,GAAAK,EACA,GAAAC,EACA,GAAAC,EACA,GAAAC,EACA,KAAM,CACJ,MAAOP,EAAO,aAAe1G,EAAAA,OAAO,SACpC,MAAO0G,EAAO,aAAe,CAAA,EAE/B,UAAWA,EAAO,WAAa,cAC/B,MAAO,OAAA,CACR,CACH,CAEA,OAAOD,CACT,EAAG,CAACpH,EAASgE,EAAWE,CAAS,CAAC,EAElC2D,EAAAA,UAAU,IAAM,CACd,GAAI,CAACzG,EAAQ,QAAS,OAGtB,MAAM0G,EAAgBjF,IAAsB,cACtCkF,EAAQD,GAAiB7B,GAAkBA,GAAkBtB,GAC7DqD,EAAiBF,GAAiB5B,GAAwBA,GAAwBrB,GAClFoD,EAAWH,EAAgB,EAAIvC,GAC/B2C,EAAWJ,EAAiB1B,IAAU,EAAK7B,EAC3C4D,EAAgBL,EAAgB,GAAQlH,GAGxC,CAAE,MAAAwH,EAAO,MAAAC,EAAO,UAAAC,EAAW,SAAAC,GAAaC,EAAAA,gBAC5CT,EACA/D,EACA2B,GACA/D,EACAC,EACAoG,CAAA,EAIIQ,EAA0B,CAC9B,CACE,EAAGL,EACH,EAAGC,EACH,KAAM,UACN,KAAM,UACN,OAAQ,CACN,OAAQnH,EACR,KAAMe,GACN,MAAOqG,EACP,WAAYN,EACZ,KAAMC,EACN,KAAMC,EACN,UAAWC,EACX,SAAUO,EAAAA,oBACR5H,GAAc,UAAY,QAC1BmC,EACAnC,GAAc,KAAA,EAEhB,KAAM,CACJ,MAAOQ,EAAM,UACb,MAAO,CAAA,CACT,EAEF,UAAW,OACX,KAAMiH,CAAA,CACR,EAGII,EAAiB7H,GAAc,UAAY,QAE3C8H,GAAS,CACb,SAAU,GACV,MAAO3I,EACH,CACE,KAAMA,EACN,KAAM,CACJ,OAAQ4I,EAAAA,kBACR,KAAM,GACN,MAAOvH,EAAM,aAAA,EAEf,EAAGwH,EAAAA,gBAAgBH,CAAc,EACjC,QAAS,SACT,EAAG,IACH,QAAS,KAAA,EAEX,OACJ,MAAA5H,EACA,OAAAC,EACA,OAAQ+H,EAAAA,iBAAiBJ,EAAgB,CAAC,CAAC1I,EAAO,CAAC,CAACE,CAAM,EAC1D,MAAO,CACL,MAAO,CACL,KAAMD,IAAU,GAChB,KAAM,CACJ,KAAM,GACN,MAAOoB,EAAM,cACb,OAAQuH,EAAAA,iBAAA,EAEV,SAAU,EAAA,EAEZ,KAAM,MACN,WAAY,GACZ,MAAO,EACP,MAAO,CAAC,GAAKhH,EAAU,EAAG,EAC1B,WAAY,GACZ,SAAU,QACV,SAAU,MAAM,KAAK,CAAE,OAAQA,GAAW,CAACmH,GAAGC,IAAMA,EAAI,CAAC,EACzD,SAAU/E,EAAU,IAAI,MAAM,EAC9B,UAAW,EACX,SAAU,CAAE,KAAMrC,EAAU,GAAK,EAAIkC,EAAAA,mBAAmB,eAAA,EAExD,OAAQmF,EAAAA,oBAAoBP,CAAc,CAAA,EAE5C,MAAO,CACL,MAAO,CACL,KAAMxI,GAAU,GAChB,KAAM,CACJ,KAAM,GACN,MAAOmB,EAAM,cACb,OAAQuH,EAAAA,iBAAA,EAEV,SAAU,EAAA,EAEZ,WAAY,GACZ,MAAO,EACP,MAAO,CAACjH,EAAOmC,EAAAA,mBAAmB,oBAAqBA,EAAAA,mBAAmB,mBAAmB,EAC7F,WAAY,GACZ,SAAU,QACV,SAAU,MAAM,KAAK,CAAE,OAAQnC,GAAQ,CAACoH,GAAGC,IAAMA,CAAC,EAClD,SAAUjF,EAAU,IAAI,MAAM,EAC9B,SAAU,CAAE,KAAMpC,EAAO,GAAK,EAAImC,EAAAA,mBAAmB,eAAA,CAAgB,EAEvE,cAAezC,EAAM,QACrB,aAAcA,EAAM,OACpB,KAAM,CACJ,OAAQuH,EAAAA,kBACR,MAAOvH,EAAM,aAAA,EAEf,OAAQ6F,EAAA,EAGJpF,GAAS,CACb,WAAY,GACZ,eAAgB,GAChB,YAAa,EAAA,EAKf,IAAIoH,GAAY,GACZC,GAAqC,KACzC,OAAKC,cAAA,EAAa,KAAMC,IAAW,CACjC,GAAIH,IAAa,CAAC/H,EAAQ,QAAS,OACnC,MAAMmI,EAAanI,EAAQ,QAC3BkI,GAAO,QAAQC,EAAYd,EAAUG,GAAQ7G,EAAM,EACnDK,GAAYmH,CAAU,EAIrBA,EAAmD,GAAG,eAAiBC,IAAqC,CAC3G,GAAI,CAAChI,EAAe,QAAS,OAC7B,MAAMiI,GAAQD,GAAU,OAAO,CAAC,EAChC,GAAIC,GAAO,CAET,MAAMC,GAAe1F,EACf2F,GAAezF,EACf0B,GAAS8D,GAAa,QAAQD,GAAM,CAAoB,EACxD5D,GAAS8D,GAAa,QAAQF,GAAM,CAAoB,EAC9D,GAAI7D,IAAU,GAAKC,IAAU,EAAG,CAC9B,MAAMC,GAAS,GAAG4D,GAAa9D,EAAM,CAAC,GAAG+D,GAAa9D,EAAM,CAAC,GACvDE,GAAc,OAAOD,EAAM,EAAE,YAAA,EAE7B8D,GAAYrG,EAAa,IAAIwC,EAAW,EACxC8D,GAAcrG,EAAe,IAAIuC,EAAW,EAC5C+D,GAAqB,CACzB,OAAAhE,GACA,OAAQ8D,GACR,YAAAC,EAAA,EAEFrI,EAAe,UAAUsI,EAAQ,CACnC,CACF,CACF,CAAC,EAEDV,GAAcG,CAChB,CAAC,EAEM,IAAM,CACXJ,GAAY,GACRC,IACFW,mBAAA,EAAkB,MAAMX,EAAW,CAEvC,CACF,EAAG,CACDzE,GACAT,EACAF,EACAa,GACAjE,GACA2E,GACAhB,EACAtB,EACAhD,EACAC,GACAC,EACAY,EACAC,EACA2E,GACA1E,EACAuC,EACAD,EACAF,EACAR,EACAoD,GACAC,GACAC,GAAY,OACZC,GACAe,GACAvF,EACAC,EACAf,EACAI,EACAe,GACAX,EACAc,EAAA,CACD,EAGD,MAAM4H,GAAsB,IACtB,CAACzH,GAAmBA,EAAgB,QAAU,EACzC,WAIN,MAAA,CAAI,UAAU,0BACZ,SAAAA,EAAgB,IAAKmD,GAAU,CAC9B,MAAMuE,EAAWtH,GAAa,KAAO+C,EAAM,GAC3C,OACEwE,EAAAA,IAACC,GAAAA,OAAA,CAEC,QAASF,EAAW,UAAY,UAChC,KAAK,KACL,QAAS,IAAM,CACbvI,GAAiBgE,EAAM,EAAE,EACzBjG,KAAgBiG,EAAM,EAAE,CAC1B,EAEC,SAAAA,EAAM,IAAA,EARFA,EAAM,EAAA,CAWjB,CAAC,CAAA,CACH,EAKEiD,EAAiB7H,GAAc,UAAY,QAC3CsJ,GAAiBtJ,GAAc,UAAY,GAC3CuJ,GAAoBvJ,GAAc,aAAe,EACjDwJ,EAAmBxJ,GAAc,YAAc,GAC/CyJ,GAAczJ,GAAc,MAG5B0J,GAAc,IAGdC,EAAqB9B,IAAmB,OAASA,IAAmB,SAGpE+B,GAAe,IAAM,CACzB,MAAMC,EAAsB9H,IAAsB,eAAiBsD,GAAY,OAAS,EAClFyE,EAAa5K,GAAWA,EAAQ,OAAS,EAE/C,GAAI,CAACa,IAAe,CAAC8J,GAAuB,CAACC,EAE3C,OAAKH,EAGE,KAFEP,EAAAA,IAAC,OAAI,UAAU,8BAA8B,MAAO,CAAE,MAAOM,IAAe,EAMvF,MAAMK,EAAmB,CAAC,iBAAiB,EACvCJ,EACFI,EAAiB,KAAK,6BAA6B,EAC1ClC,IAAmB,OAC5BkC,EAAiB,KAAK,uBAAuB,EACpClC,IAAmB,SAC5BkC,EAAiB,KAAK,wBAAwB,EAIhD,MAAMC,EAAmC,CACvC,IAAK,GAAGT,EAAiB,KACzB,MAAOI,EAAqB,OAAYD,EAAA,EAG1C,OACEO,OAAC,OAAI,UAAWF,EAAiB,KAAK,GAAG,EAAG,MAAOC,EAChD,SAAA,CAAAP,IACCL,EAAAA,IAAC,MAAA,CACC,UAAW,yBAAyBO,EAAqB,sCAAwC,EAAE,GACnG,MAAO,CAAE,SAAU,GAAGL,EAAc,IAAA,EAEnC,SAAAG,EAAA,CAAA,EAIJI,GACCxE,GAAY,IAAKO,GACfqE,OAAC,MAAA,CAAe,UAAU,wBACxB,SAAA,CAAAb,EAAAA,IAAC,MAAA,CACC,UAAU,0BACV,MAAO,CACL,MAAO,GAAGI,CAAgB,KAC1B,OAAQ,GAAGA,CAAgB,KAC3B,gBAAiBpH,EAAewD,CAAI,GAAKhG,CAAA,CAC3C,CAAA,EAEFwJ,EAAAA,IAAC,OAAA,CACC,UAAU,4DACV,MAAO,CAAE,SAAU,GAAGE,EAAc,IAAA,EAEnC,SAAA1D,CAAA,CAAA,CACH,CAAA,EAdQA,CAeV,CACD,EAEFkE,GACC5K,EAAQ,IAAKqH,GACX0D,OAAC,MAAA,CAAoB,UAAU,wBAC7B,SAAA,CAAAb,EAAAA,IAAC,MAAA,CACC,UAAU,0DACV,MAAO,CACL,MAAO,GAAGI,CAAgB,KAC1B,OAAQ,GAAGA,CAAgB,KAC3B,gBAAiBjD,EAAO,WAAa,cACrC,OAAQ,GAAGA,EAAO,aAAe,CAAC,YAAYA,EAAO,aAAe1G,EAAAA,OAAO,YAAY,EAAA,CACzF,CAAA,EAEFuJ,EAAAA,IAAC,OAAA,CACC,UAAU,yBACV,MAAO,CAAE,SAAU,GAAGE,EAAc,IAAA,EAEnC,SAAA/C,EAAO,IAAA,CAAA,CACV,CAAA,EAfQA,EAAO,EAgBjB,CACD,CAAA,EACL,CAEJ,EAGM2D,EACJD,EAAAA,KAAC,MAAA,CAAI,UAAU,WACb,SAAA,CAAAb,EAAAA,IAAC,MAAA,CAAI,IAAK9I,EAAS,UAAU,gBAAgB,MAAO,CAAE,MAAAL,EAAO,OAAAC,CAAA,CAAO,CAAG,EACtEqB,EAAA,EACH,EAEI4I,EAAgBP,GAAA,EAEhBQ,GAAuB,IAAM,CACjC,OAAQvC,EAAA,CACN,IAAK,OACH,OACEoC,EAAAA,KAAC,MAAA,CAAI,UAAU,wDACZ,SAAA,CAAAE,EACAD,CAAA,EACH,EAEJ,IAAK,MACH,OACED,EAAAA,KAAC,MAAA,CAAI,UAAU,0DACZ,SAAA,CAAAE,EACAD,CAAA,EACH,EAEJ,IAAK,SACH,OACED,EAAAA,KAAC,MAAA,CAAI,UAAU,0DACZ,SAAA,CAAAC,EACAC,CAAA,EACH,EAGJ,QACE,OACEF,EAAAA,KAAC,MAAA,CAAI,UAAU,wDACZ,SAAA,CAAAC,EACAC,CAAA,EACH,CAAA,CAGR,EAEA,OACEF,OAAC,MAAA,CAAI,UAAU,qBAAqB,MAAO,CAAE,MAAON,EAAqB,OAAY1J,CAAA,EAClF,SAAA,CAAAiJ,GAAA,EACAkB,GAAA,CAAqB,EACxB,CAEJ"}

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 };