@milaboratories/miplots4 1.0.157 → 1.0.159

package/dist/heatmap/ChartRenderer.js

@@ -1,9 +1,9 @@
 var ot = Object.defineProperty;
-var it = (m, e, s) => e in m ? ot(m, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : m[e] = s;
-var C = (m, e, s) => it(m, typeof e != "symbol" ? e + "" : e, s);
-import { j as O } from "../node_modules/react/jsx-runtime.js";
-import nt from "../node_modules/lodash/lodash.js";
-import { createRoot as rt } from "../node_modules/react-dom/client.js";
+var it = (d, e, t) => e in d ? ot(d, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[e] = t;
+var C = (d, e, t) => it(d, typeof e != "symbol" ? e + "" : e, t);
+import { j as O } from "../_virtual/jsx-runtime.js";
+import nt from "../_virtual/lodash.js";
+import { c as rt } from "../_virtual/client.js";
 import { Error as at } from "../common/Error.js";
 import { DataFrameProvider as ht } from "../common/useDataFrame.js";
 import { DEFAULT_HEIGHT as Y, DEFAULT_WIDTH as q, TITLE_LINE_HEIGHT as ct, TITLE_MARGIN as lt } from "../constants.js";
@@ -18,53 +18,53 @@ import { calculateSideElementsBBoxes as St } from "./utils/calculateSideElements
 import { createDiscreteColorScale as yt, createDiscreteRoundColorScale as Ct, createContinuousColorScale as Lt } from "./utils/createColorScales.js";
 import { calculateAnnotationTitleSizes as bt } from "./utils/calculateAnnotationTitleSizes.js";
 import { calculateCaptionTails as zt } from "./utils/calculateCaptionTails.js";
-import I from "../node_modules/d3-scale/src/ordinal.js";
-import D from "../node_modules/d3-scale/src/linear.js";
-import Gt from "../node_modules/d3-array/src/extent.js";
-import $ from "../node_modules/d3-hierarchy/src/cluster.js";
-const At = Math.cos(Math.PI / 4), Et = 5;
-function tt(m, e, s) {
-  function t(n) {
-    n[s] = e(n.data.height), n.children && n.children.forEach(t);
+import I from "../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/ordinal.js";
+import D from "../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/linear.js";
+import Gt from "../node_modules/.pnpm/d3-array@3.2.4/node_modules/d3-array/src/extent.js";
+import $ from "../node_modules/.pnpm/d3-hierarchy@3.1.2/node_modules/d3-hierarchy/src/cluster.js";
+const Et = Math.cos(Math.PI / 4), At = 5;
+function tt(d, e, t) {
+  function s(a) {
+    a[t] = e(a.data.height), a.children && a.children.forEach(s);
   }
-  t(m);
+  s(d);
 }
-function st(m, e, s, t = s) {
-  function n(i) {
-    i[t] = i[s] + e, i.children && i.children.forEach(n);
+function st(d, e, t, s = t) {
+  function a(i) {
+    i[s] = i[t] + e, i.children && i.children.forEach(a);
   }
-  n(m);
+  a(d);
 }
-const Tt = (m, e) => {
-  const s = Math.min(...e), t = Math.max(...e);
-  if (s === t) {
-    const r = m % 2 === 0 ? [] : [s];
-    for (let a = 1; a < m / 2 + 1; a++)
-      r.push(s + a), r.unshift(s - a);
-    return r;
+const Tt = (d, e) => {
+  const t = Math.min(...e), s = Math.max(...e);
+  if (t === s) {
+    const n = d % 2 === 0 ? [] : [t];
+    for (let r = 1; r < d / 2 + 1; r++)
+      n.push(t + r), n.unshift(t - r);
+    return n;
   }
-  if (m < 2)
-    return [s, t];
-  const n = (t - s) / (m - 1), i = [];
-  for (let r = 0; r < m - 1; r++)
-    i.push(s + n * r);
-  return i.push(t), i;
+  if (d < 2)
+    return [t, s];
+  const a = (s - t) / (d - 1), i = [];
+  for (let n = 0; n < d - 1; n++)
+    i.push(t + a * n);
+  return i.push(s), i;
 };
-function et(m, e, s) {
-  let t = s;
-  return m && (m.colorRange && (t = m.colorRange), m.method === "standardScaling" && (t = [-2, 2]), m.method === "meanNormalization" && (t = [-0.75, 0.75])), Tt(e, t);
+function et(d, e, t) {
+  let s = t;
+  return d && (d.colorRange && (s = d.colorRange), d.method === "standardScaling" && (s = [-2, 2]), d.method === "meanNormalization" && (s = [-0.75, 0.75])), Tt(e, s);
 }
-function P(m, e, s) {
-  let t = 0;
-  for (const n of m) {
-    if (e[n] === void 0) continue;
-    const i = s.getTextWidth(e[n]);
-    i > t && (t = i);
+function P(d, e, t) {
+  let s = 0;
+  for (const a of d) {
+    if (e[a] === void 0) continue;
+    const i = t.getTextWidth(e[a]);
+    i > s && (s = i);
   }
-  return t;
+  return s;
 }
-function K(m, e) {
-  return e === 90 ? m : e === 45 ? m * At + (m > 0 ? 2 * Et : 0) : V;
+function K(d, e) {
+  return e === 90 ? d : e === 45 ? d * Et + (d > 0 ? 2 * At : 0) : V;
 }
 class Jt {
   constructor() {
@@ -128,31 +128,31 @@ class Jt {
   clear() {
     var e;
     this.parentNode && this.rootNode && ((e = this.parentNode) == null || e.removeChild(this.rootNode), this.parentNode = null, this.rootNode = null), setTimeout(() => {
-      var s;
-      (s = this.reactRoot) == null || s.unmount(), this.reactRoot = null;
+      var t;
+      (t = this.reactRoot) == null || t.unmount(), this.reactRoot = null;
     });
   }
   init(e) {
-    this.parentNode === null && (this.parentNode = e, this.rootNode = document.createElement("div"), this.parentNode.appendChild(this.rootNode), this.reactRoot = rt(this.rootNode));
+    this.parentNode === null && (this.parentNode = e, this.rootNode = document.createElement("div"), this.parentNode.appendChild(this.rootNode), this.reactRoot = rt.createRoot(this.rootNode));
   }
-  updateMargins(e, s) {
+  updateMargins(e, t) {
     this.margins = {
-      top: e.show ? ct + lt * 2 : s.outerOffset,
-      bottom: s.outerOffset,
-      left: s.outerOffset,
-      right: this.legend.width + s.outerOffset
+      top: e.show ? ct + lt * 2 : t.outerOffset,
+      bottom: t.outerOffset,
+      left: t.outerOffset,
+      right: this.legend.width + t.outerOffset
     }, this.chartSizes.totalWidth = this.margins.left + this.chartSizes.chartsWidth + this.margins.right, this.chartSizes.totalHeight = this.margins.top + Math.max(this.chartSizes.chartsHeight + this.margins.bottom, this.legend.height);
   }
-  updateLegendSize(e, s, t, n, i) {
-    if (!s.show) {
+  updateLegendSize(e, t, s, a, i) {
+    if (!t.show) {
       this.legend = { width: 0, height: 0, items: [] };
       return;
     }
-    const r = this.chartSizes.chartHeight, a = [], p = { width: 0, height: 0, left: 0, top: 0 }, f = (h) => h.reduce((c, o) => (c[o] = String(o), c), {});
+    const n = this.chartSizes.chartHeight, r = [], u = { width: 0, height: 0, left: 0, top: 0 }, f = (h) => h.reduce((c, o) => (c[o] = String(o), c), {});
     if (e === "continuous") {
-      const h = this.colorScale, c = Q(h, i), o = D([c[0], c[c.length - 1]], [r, 0]), l = n.label ?? n.value;
-      a.push({
-        ...p,
+      const h = this.colorScale, c = Q(h, i), o = D([c[0], c[c.length - 1]], [n, 0]), l = a.label ?? a.value;
+      r.push({
+        ...u,
         type: "continuous",
         id: "heatmapValue",
         scale: h,
@@ -161,48 +161,48 @@ class Jt {
         tickPositionScale: o
       });
     } else if (e === "discrete") {
-      const h = this.colorScale, c = n.label ?? n.value, o = h.domain(), l = f(o);
-      a.push({ ...p, type: "discreteColor", id: "heatmapValue", title: c, scale: h, values: o, labels: l });
+      const h = this.colorScale, c = a.label ?? a.value, o = h.domain(), l = f(o);
+      r.push({ ...u, type: "discreteColor", id: "heatmapValue", title: c, scale: h, values: o, labels: l });
     }
-    if (t.forEach((h) => {
+    if (s.forEach((h) => {
       const c = h.valueColumn.label ?? h.valueColumn.value;
       if (h.type === "continuous") {
-        const o = this.annotationColorScales[h.id].scale, l = Q(o, i), x = D([l[0], l[l.length - 1]], [r, 0]);
-        a.push({ ...p, type: "continuous", id: h.id, tickPositionScale: x, title: c, scale: o, values: l });
+        const o = this.annotationColorScales[h.id].scale, l = Q(o, i), x = D([l[0], l[l.length - 1]], [n, 0]);
+        r.push({ ...u, type: "continuous", id: h.id, tickPositionScale: x, title: c, scale: o, values: l });
       }
       if (h.type === "discrete") {
         const o = this.annotationColorScales[h.id].scale, l = o.domain(), x = f(l);
-        a.push({ ...p, type: "discreteColor", id: h.id, title: c, scale: o, values: l, labels: x });
+        r.push({ ...u, type: "discreteColor", id: h.id, title: c, scale: o, values: l, labels: x });
       }
-    }), !a.length) {
+    }), !r.length) {
       this.legend = { width: 0, height: 0, items: [] };
       return;
     }
-    const d = ut(a, this.chartSizes.chartHeight), u = d[d.length - 1], b = u.left + u.width + gt;
+    const p = ut(r, this.chartSizes.chartHeight), m = p[p.length - 1], b = m.left + m.width + gt;
     this.legend = {
       width: b,
-      height: r,
-      items: d
+      height: n,
+      items: p
     };
   }
-  updateCaptionsSize(e, s, t, n) {
-    const i = new dt("bold 16px Manrope"), { xGroupKeys: r, yGroupKeys: a, xGroupLabels: p, yGroupLabels: f, xKeysByGroups: d, yKeysByGroups: u, xLabels: b, yLabels: h } = e.meta;
+  updateCaptionsSize(e, t, s, a) {
+    const i = new dt("bold 16px Manrope"), { xGroupKeys: n, yGroupKeys: r, xGroupLabels: u, yGroupLabels: f, xKeysByGroups: p, yKeysByGroups: m, xLabels: b, yLabels: h } = e.meta;
     this.labelAngles = {
-      xAxisLabels: s.axisLabelsAngle,
-      yAxisLabels: t.axisLabelsAngle,
-      xGroupLabels: s.groupLabelsAngle,
-      yGroupLabels: t.groupLabelsAngle
+      xAxisLabels: t.axisLabelsAngle,
+      yAxisLabels: s.axisLabelsAngle,
+      xGroupLabels: t.groupLabelsAngle,
+      yGroupLabels: s.groupLabelsAngle
     };
-    const c = r.reduce((S, g) => Math.max(S, P(d[g], b, i)), 0), o = a.reduce((S, g) => Math.max(S, P(u[g], h, i)), 0), l = P(r, p, i), x = P(a, f, i), { xCaptionTail: A, yCaptionTail: M } = zt(
+    const c = n.reduce((S, g) => Math.max(S, P(p[g], b, i)), 0), o = r.reduce((S, g) => Math.max(S, P(m[g], h, i)), 0), l = P(n, u, i), x = P(r, f, i), { xCaptionTail: E, yCaptionTail: M } = zt(
       this.labelAngles,
-      n,
+      a,
       this.scales,
       this.step,
       e,
       i
     );
     this.captionsSizes = {
-      xCaptionTail: A,
+      xCaptionTail: E,
       yCaptionTail: M,
       xGroupCaptions: K(l, this.labelAngles.xGroupLabels),
       yGroupCaptions: K(x, this.labelAngles.yGroupLabels),
@@ -210,29 +210,29 @@ class Jt {
       yAxisCaptions: K(o, this.labelAngles.yAxisLabels)
     };
   }
-  updateChartDimensions(e, s, t, n, i, r, a, p, f, d) {
-    const u = s.length, b = Math.min(i.nRows ?? u, u), h = Math.min(i.nCols ?? u, u);
-    this.columnsCount = i.nRows ? Math.ceil(u / b) : h, this.rowsCount = Math.ceil(u / this.columnsCount);
+  updateChartDimensions(e, t, s, a, i, n, r, u, f, p) {
+    const m = t.length, b = Math.min(i.nRows ?? m, m), h = Math.min(i.nCols ?? m, m);
+    this.columnsCount = i.nRows ? Math.ceil(m / b) : h, this.rowsCount = Math.ceil(m / this.columnsCount);
     const { sharedX: c, sharedY: o } = i;
     this.chartsDimensions = {};
     let l = 0, x = 0;
-    s.forEach((S, g) => {
-      const L = g % this.columnsCount + 1, y = pt(g, s.length, this.columnsCount, this.rowsCount), z = this.step.x[S], w = this.step.y[S], v = ft(
+    t.forEach((S, g) => {
+      const L = g % this.columnsCount + 1, y = pt(g, t.length, this.columnsCount, this.rowsCount), z = this.step.x[S], w = this.step.y[S], v = ft(
+        n,
         r,
-        a,
         this.captionsSizes,
-        p,
+        u,
         f,
-        d,
+        p,
         y,
         c,
         o,
-        s,
         t,
-        n,
+        s,
+        a,
         z,
         w
-      ), N = bt(p, y, c, o);
+      ), N = bt(u, y, c, o);
       function H(R) {
         return Math.max(
           xt[R].reduce((k, j) => k + v[R][j], 0),
@@ -240,180 +240,180 @@ class Jt {
           e.innerOffset
         );
       }
-      const E = {
+      const A = {
         left: H("left"),
         right: H("right"),
         top: H("top"),
         bottom: H("bottom")
       };
-      E.left < this.captionsSizes.xCaptionTail && (E.left = this.captionsSizes.xCaptionTail), E.bottom < this.captionsSizes.yCaptionTail && (E.bottom = this.captionsSizes.yCaptionTail);
-      const B = St(v, this.chartSizes.chartWidth, this.chartSizes.chartHeight), W = this.chartSizes.chartWidth + E.left + E.right, _ = this.chartSizes.chartHeight + E.top + E.bottom;
+      A.left < this.captionsSizes.xCaptionTail && (A.left = this.captionsSizes.xCaptionTail), A.bottom < this.captionsSizes.yCaptionTail && (A.bottom = this.captionsSizes.yCaptionTail);
+      const B = St(v, this.chartSizes.chartWidth, this.chartSizes.chartHeight), W = this.chartSizes.chartWidth + A.left + A.right, _ = this.chartSizes.chartHeight + A.top + A.bottom;
       this.chartsDimensions[S] = {
         left: l,
         top: x,
         inner: { width: this.chartSizes.chartWidth, height: this.chartSizes.chartHeight },
         outer: { width: W, height: _ },
-        padding: E,
+        padding: A,
         sideElementBBoxes: B,
         chartEdgeSides: y
       }, l += W, L === this.columnsCount && (l = 0, x += _);
     });
-    const A = s.slice(0, this.columnsCount).reduce((S, g) => S + this.chartsDimensions[g].outer.width, 0), M = s.filter((S, g) => g % this.columnsCount === 0).reduce((S, g) => S + this.chartsDimensions[g].outer.height, 0);
-    this.chartSizes.chartsWidth = A, this.chartSizes.chartsHeight = M;
+    const E = t.slice(0, this.columnsCount).reduce((S, g) => S + this.chartsDimensions[g].outer.width, 0), M = t.filter((S, g) => g % this.columnsCount === 0).reduce((S, g) => S + this.chartsDimensions[g].outer.height, 0);
+    this.chartSizes.chartsWidth = E, this.chartSizes.chartsHeight = M;
   }
-  updateChartsSizes(e, s, t, n) {
-    const { width: i, height: r, cellWidth: a, cellHeight: p } = e, f = t.meta.facetKeys[0];
-    if (a && s.sharedX && f) {
-      const d = t.facets[f].xKeys.length, u = t.meta.xGroupKeys.length;
-      this.chartSizes.chartWidth = d * a + n * (u - 1);
+  updateChartsSizes(e, t, s) {
+    const { width: a, height: i, cellWidth: n, cellHeight: r } = e, u = t.meta.facetKeys[0];
+    if (n && u) {
+      const f = t.facets[u].xKeys.length, p = t.meta.xGroupKeys.length;
+      this.chartSizes.chartWidth = f * n + s * (p - 1);
     } else
-      this.chartSizes.chartWidth = i;
-    if (p && s.sharedY && f) {
-      const d = t.facets[f].yKeys.length, u = t.meta.yGroupKeys.length;
-      this.chartSizes.chartHeight = d * p + n * (u - 1);
+      this.chartSizes.chartWidth = a;
+    if (r && u) {
+      const f = t.facets[u].yKeys.length, p = t.meta.yGroupKeys.length;
+      this.chartSizes.chartHeight = f * r + s * (p - 1);
     } else
-      this.chartSizes.chartHeight = r;
+      this.chartSizes.chartHeight = i;
   }
   // update scales for cell positions, x and y for each facet
-  updateScales(e, s, t, n, i, r, a, p, f, d) {
-    const { width: u, height: b, cellWidth: h, cellHeight: c } = i, { meta: o, facets: l } = s, { sharedX: x, sharedY: A } = n, M = (g, L = {}) => g.sort(
-      (y, z) => r.sorting === "asc" ? (L[y] ?? y).localeCompare(L[z] ?? z, "en", { numeric: !0 }) : (L[z] ?? z).localeCompare(L[y] ?? y, "en", { numeric: !0 })
+  updateScales(e, t, s, a, i, n, r, u, f, p) {
+    const { width: m, height: b, cellWidth: h, cellHeight: c } = i, { meta: o, facets: l } = t, { sharedX: x, sharedY: E } = a, M = (g, L = {}) => g.sort(
+      (y, z) => n.sorting === "asc" ? (L[y] ?? y).localeCompare(L[z] ?? z, "en", { numeric: !0 }) : (L[z] ?? z).localeCompare(L[y] ?? y, "en", { numeric: !0 })
     ), S = (g, L = {}) => g.sort(
-      (y, z) => a.sorting === "asc" ? (L[y] ?? y).localeCompare(L[z] ?? z, "en", { numeric: !0 }) : (L[z] ?? z).localeCompare(L[y] ?? y, "en", { numeric: !0 })
+      (y, z) => r.sorting === "asc" ? (L[y] ?? y).localeCompare(L[z] ?? z, "en", { numeric: !0 }) : (L[z] ?? z).localeCompare(L[y] ?? y, "en", { numeric: !0 })
     );
     e.forEach((g) => {
-      const L = l[g], y = d.xGroup ? o.xGroupKeys : M(o.xGroupKeys), z = d.yGroup ? o.yGroupKeys : S(o.yGroupKeys), { xKeysByGroups: w } = x ? o : L, { yKeysByGroups: v } = A ? o : L, N = y.map((G) => w[G].length), H = z.map((G) => v[G].length), E = N.reduce((G, T) => G + T, 0), B = H.reduce((G, T) => G + T, 0), W = x && h ? h : (u - (N.filter((G) => G > 0).length - 1) * t) / E, _ = A && c ? c : (b - (H.filter((G) => G > 0).length - 1) * t) / B, R = [];
+      const L = l[g], y = p.xGroup ? o.xGroupKeys : M(o.xGroupKeys), z = p.yGroup ? o.yGroupKeys : S(o.yGroupKeys), { xKeysByGroups: w } = x ? o : L, { yKeysByGroups: v } = E ? o : L, N = y.map((G) => w[G].length), H = z.map((G) => v[G].length), A = N.reduce((G, T) => G + T, 0), B = H.reduce((G, T) => G + T, 0), W = h || (m - (N.filter((G) => G > 0).length - 1) * s) / A, _ = c || (b - (H.filter((G) => G > 0).length - 1) * s) / B, R = [];
       let k = [], j = 0;
       y.forEach((G) => {
-        const T = p || d.x ? w[G] : M(w[G], o.xLabels);
+        const T = u || p.x ? w[G] : M(w[G], o.xLabels);
         k = k.concat(T), T.forEach(() => {
           R.push(j), j += W;
-        }), T.length > 0 && (j += t);
+        }), T.length > 0 && (j += s);
       });
       const J = [];
-      let X = [], U = 0;
+      let U = [], X = 0;
       z.forEach((G) => {
-        const T = f || d.y ? v[G] : S(v[G], o.yLabels);
-        X = X.concat(T), T.forEach(() => {
-          J.push(U), U += _;
-        }), T.length > 0 && (U += t);
-      }), this.scales.x[g] = I().domain(k).range(R), this.scales.y[g] = I().domain(X).range(J), this.step.x[g] = W, this.step.y[g] = _;
+        const T = f || p.y ? v[G] : S(v[G], o.yLabels);
+        U = U.concat(T), T.forEach(() => {
+          J.push(X), X += _;
+        }), T.length > 0 && (X += s);
+      }), this.scales.x[g] = I().domain(k).range(R), this.scales.y[g] = I().domain(U).range(J), this.step.x[g] = W, this.step.y[g] = _;
     });
   }
-  updateAesScale(e, s, t, n, i, r, a) {
+  updateAesScale(e, t, s, a, i, n, r) {
     if (e === "continuous")
-      t.valueColors ? this.colorScale = D().domain(t.valuesByColors ?? et(a, t.valueColors.length, s)).range(t.valueColors) : t.colorsList && (this.colorScale = D().domain(et(a, t.colorsList.length, s)).range(t.colorsList));
-    else if (t.colorsMap) {
-      const d = Object.entries(t.colorsMap);
-      this.colorScale = I().domain(d.map((u) => u[0])).range(d.map((u) => u[1])).unknown("#ccc");
-    } else t.colorsList && (this.colorScale = yt(t.colorsList, r.map(String)));
-    const { xDataByKeys: p, yDataByKeys: f } = i.meta;
-    n.forEach((d) => {
-      const { colors: u, type: b, axis: h, valueColumn: c } = d, o = (h === "x" ? p : f)[c.valueLabels ?? c.value];
+      s.valueColors ? this.colorScale = D().domain(s.valuesByColors ?? et(r, s.valueColors.length, t)).range(s.valueColors) : s.colorsList && (this.colorScale = D().domain(et(r, s.colorsList.length, t)).range(s.colorsList));
+    else if (s.colorsMap) {
+      const p = Object.entries(s.colorsMap);
+      this.colorScale = I().domain(p.map((m) => m[0])).range(p.map((m) => m[1])).unknown("#ccc");
+    } else s.colorsList && (this.colorScale = yt(s.colorsList, n.map(String)));
+    const { xDataByKeys: u, yDataByKeys: f } = i.meta;
+    a.forEach((p) => {
+      const { colors: m, type: b, axis: h, valueColumn: c } = p, o = (h === "x" ? u : f)[c.valueLabels ?? c.value];
       if (b === "discrete") {
         const l = nt.uniq(Object.values(o).map(String)).sort();
-        this.annotationColorScales[d.id] = {
+        this.annotationColorScales[p.id] = {
           type: "discrete",
-          scale: Ct(u, l)
+          scale: Ct(m, l)
         };
       } else {
         const l = Object.values(o).map(Number);
         if (!l.length)
           return;
-        const [x = l[0], A = l[0]] = Gt(l);
-        this.annotationColorScales[d.id] = {
+        const [x = l[0], E = l[0]] = Gt(l);
+        this.annotationColorScales[p.id] = {
           type: "continuous",
-          scale: Lt(u, x, A, 0, 0.5, 1)
+          scale: Lt(m, x, E, 0, 0.5, 1)
         };
       }
     });
   }
-  updateDendrogram(e, s, t, n, i, r, a) {
-    e.forEach((p) => {
-      this.dendrograms[p] = { x: { treesByGroupKey: {}, data: r }, y: { treesByGroupKey: {}, data: a } };
-      const { xKeysByGroups: f, yKeysByGroups: d } = n[p];
-      if (r) {
-        const { hierarchyByGroupX: u } = i[p], b = s.reduce((h, c) => {
+  updateDendrogram(e, t, s, a, i, n, r) {
+    e.forEach((u) => {
+      this.dendrograms[u] = { x: { treesByGroupKey: {}, data: n }, y: { treesByGroupKey: {}, data: r } };
+      const { xKeysByGroups: f, yKeysByGroups: p } = a[u];
+      if (n) {
+        const { hierarchyByGroupX: m } = i[u], b = t.reduce((h, c) => {
           var o;
-          return Math.max(h, (o = u[c]) == null ? void 0 : o.data.height);
+          return Math.max(h, (o = m[c]) == null ? void 0 : o.data.height);
         }, 0);
-        this.dendrograms[p].x.treesByGroupKey = s.reduce((h, c) => {
-          const o = u[c], l = f[c];
-          $().separation(() => 1).size([l.length * this.step.x[p], r.size])(
+        this.dendrograms[u].x.treesByGroupKey = t.reduce((h, c) => {
+          const o = m[c], l = f[c];
+          $().separation(() => 1).size([l.length * this.step.x[u], n.size])(
             o
           );
-          const x = o, A = D().domain(r.position === "top" ? [0, b] : [b, 0]).range([r.size, 0]);
-          return tt(x, A, "y"), st(x, this.scales.x[p](l[0]), "x"), h[c] = x, h;
-        }, {}), this.dendrograms[p].x.data = r;
+          const x = o, E = D().domain(n.position === "top" ? [0, b] : [b, 0]).range([n.size, 0]);
+          return tt(x, E, "y"), st(x, this.scales.x[u](l[0]), "x"), h[c] = x, h;
+        }, {}), this.dendrograms[u].x.data = n;
       }
-      if (a) {
-        const { hierarchyByGroupY: u } = i[p], b = t.reduce((h, c) => {
+      if (r) {
+        const { hierarchyByGroupY: m } = i[u], b = s.reduce((h, c) => {
           var o;
-          return Math.max(h, (o = u[c]) == null ? void 0 : o.data.height);
+          return Math.max(h, (o = m[c]) == null ? void 0 : o.data.height);
         }, 0);
-        this.dendrograms[p].y.treesByGroupKey = t.reduce((h, c) => {
-          const o = u[c], l = d[c];
-          $().separation(() => 1).size([l.length * this.step.y[p], a.size])(
+        this.dendrograms[u].y.treesByGroupKey = s.reduce((h, c) => {
+          const o = m[c], l = p[c];
+          $().separation(() => 1).size([l.length * this.step.y[u], r.size])(
             o
           );
-          const x = o, A = D().domain(a.position === "left" ? [0, b] : [b, 0]).range([a.size, 0]);
-          return st(x, this.scales.y[p](l[0]), "x", "y"), tt(x, A, "x"), h[c] = x, h;
-        }, {}), this.dendrograms[p].y.data = a;
+          const x = o, E = D().domain(r.position === "left" ? [0, b] : [b, 0]).range([r.size, 0]);
+          return st(x, this.scales.y[u](l[0]), "x", "y"), tt(x, E, "x"), h[c] = x, h;
+        }, {}), this.dendrograms[u].y.data = r;
       }
     });
   }
   updateDendrogramAesScales(e) {
     if (!e)
       return;
-    const s = Object.keys(e);
-    this.dendrogramAesScales = s.reduce((t, n) => {
-      const i = e[n], r = Object.keys(i);
-      return t[n] = I().domain(r).range(
-        r.map((a) => ({
+    const t = Object.keys(e);
+    this.dendrogramAesScales = t.reduce((s, a) => {
+      const i = e[a], n = Object.keys(i);
+      return s[a] = I().domain(n).range(
+        n.map((r) => ({
           ...Z,
-          ...i[a]
+          ...i[r]
         }))
-      ).unknown(Z), t;
+      ).unknown(Z), s;
     }, {});
   }
-  render(e, s, t, n, i, r, a, p, f, d, u, b, h, c, o, l, x) {
+  render(e, t, s, a, i, n, r, u, f, p, m, b, h, c, o, l, x) {
     var B;
-    const { meta: A, facets: M } = r, { facetKeys: S, xGroupKeys: g, yGroupKeys: L, valueExtent: y } = A, { xAxis: z, yAxis: w, title: v, size: N, valueType: H } = t;
-    this.updateChartsSizes(N, n, r, i.groupGap), this.updateAesScale(H, y.dataSource, i, a, r, h, c), this.updateScales(S, r, i.groupGap, n, N, t.xAxis, t.yAxis, f, d, l), this.updateCaptionsSize(r, z, w, n), this.updateChartDimensions(
+    const { meta: E, facets: M } = n, { facetKeys: S, xGroupKeys: g, yGroupKeys: L, valueExtent: y } = E, { xAxis: z, yAxis: w, title: v, size: N, valueType: H } = s;
+    this.updateChartsSizes(N, n, i.groupGap), this.updateAesScale(H, y.dataSource, i, r, n, h, c), this.updateScales(S, n, i.groupGap, a, N, s.xAxis, s.yAxis, f, p, l), this.updateCaptionsSize(n, z, w, a), this.updateChartDimensions(
       N,
       S,
       g,
       L,
-      n,
+      a,
       z,
       w,
-      a,
+      r,
       f,
-      d
-    ), this.updateLegendSize(H, t.legend, a, p, y.dataSource), this.updateMargins(v, N), this.updateDendrogram(S, g, L, M, u, f, d), this.updateDendrogramAesScales(b);
-    const E = /* @__PURE__ */ O.jsx(ht, { dataFrame: e, children: /* @__PURE__ */ O.jsx(
+      p
+    ), this.updateLegendSize(H, s.legend, r, u, y.dataSource), this.updateMargins(v, N), this.updateDendrogram(S, g, L, M, m, f, p), this.updateDendrogramAesScales(b);
+    const A = /* @__PURE__ */ O.jsx(ht, { dataFrame: e, children: /* @__PURE__ */ O.jsx(
       mt,
       {
         aes: i,
-        annotations: a,
+        annotations: r,
         annotationColorScales: this.annotationColorScales,
         captionsSizes: this.captionsSizes,
-        cellsMeta: A,
+        cellsMeta: E,
         columnsCount: this.columnsCount,
         chartsDimensions: this.chartsDimensions,
-        chartSettings: t,
+        chartSettings: s,
         chartSizes: this.chartSizes,
         colorScale: this.colorScale,
         dendrogramAesScales: this.dendrogramAesScales,
         dendrograms: this.dendrograms,
         facetKeys: S,
-        facetSettings: n,
+        facetSettings: a,
         groupedCells: M,
         labelAngles: this.labelAngles,
         legend: this.legend,
         margins: this.margins,
         scales: this.scales,
-        settingsId: s,
+        settingsId: t,
         step: this.step,
         xGroupKeys: g,
         yGroupKeys: L,
@@ -421,11 +421,11 @@ class Jt {
         cellsRenderingMode: x
       }
     ) });
-    this.component = E, (B = this.reactRoot) == null || B.render(E);
+    this.component = A, (B = this.reactRoot) == null || B.render(A);
   }
   renderError(e) {
-    var s;
-    (s = this.reactRoot) == null || s.render(/* @__PURE__ */ O.jsx(at, { message: e }));
+    var t;
+    (t = this.reactRoot) == null || t.render(/* @__PURE__ */ O.jsx(at, { message: e }));
   }
 }
 export {