@tetrascience-npm/tetrascience-react-ui 0.6.0-beta.82.1 → 0.6.0-beta.84.1

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

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