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

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

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