@milaboratories/miplots4 1.0.155 → 1.0.156

package/dist/heatmap/ChartRenderer.js

@@ -1,6 +1,6 @@
 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 L = (m, e, s) => it(m, typeof e != "symbol" ? e + "" : e, s);
+var C = (m, e, s) => it(m, typeof e != "symbol" ? e + "" : e, s);
 import { j } 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";
@@ -14,8 +14,8 @@ import { TextMeasurer as dt } from "../utils/TextMeasurer/TextMeasurer.js";
 import { ChartsGroup as mt } from "./components/ChartsGroup.js";
 import { MIN_MARGIN as F, TITLE_LINE as q, LEGEND_OFFSET as gt, DEFAULT_AES as Z, CHART_SIDE_ELEMENTS as xt } from "./constants.js";
 import { calculateChartSideElementSizes as ft } from "./utils/calculateChartSideElementSizes.js";
-import { calculateSideElementsBBoxes as yt } from "./utils/calculateSideElementsBBoxes.js";
-import { createDiscreteColorScale as St, createDiscreteRoundColorScale as Ct, createContinuousColorScale as Lt } from "./utils/createColorScales.js";
+import { calculateSideElementsBBoxes as St } from "./utils/calculateSideElementsBBoxes.js";
+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";
@@ -24,30 +24,30 @@ 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(r) {
-    r[s] = e(r.data.height), r.children && r.children.forEach(t);
+  function t(n) {
+    n[s] = e(n.data.height), n.children && n.children.forEach(t);
   }
   t(m);
 }
 function st(m, e, s, t = s) {
-  function r(i) {
-    i[t] = i[s] + e, i.children && i.children.forEach(r);
+  function n(i) {
+    i[t] = i[s] + e, i.children && i.children.forEach(n);
   }
-  r(m);
+  n(m);
 }
 const Tt = (m, e) => {
   const s = Math.min(...e), t = Math.max(...e);
   if (s === t) {
-    const a = m % 2 === 0 ? [] : [s];
-    for (let h = 1; h < m / 2 + 1; h++)
-      a.push(s + h), a.unshift(s - h);
-    return a;
+    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;
   }
   if (m < 2)
     return [s, t];
-  const r = (t - s) / (m - 1), i = [];
-  for (let a = 0; a < m - 1; a++)
-    i.push(s + r * a);
+  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;
 };
 function et(m, e, s) {
@@ -56,9 +56,9 @@ function et(m, e, s) {
 }
 function P(m, e, s) {
   let t = 0;
-  for (const r of m) {
-    if (e[r] === void 0) continue;
-    const i = s.getTextWidth(e[r]);
+  for (const n of m) {
+    if (e[n] === void 0) continue;
+    const i = s.getTextWidth(e[n]);
     i > t && (t = i);
   }
   return t;
@@ -68,12 +68,12 @@ function K(m, e) {
 }
 class Jt {
   constructor() {
-    L(this, "reactRoot", null);
-    L(this, "parentNode", null);
-    L(this, "rootNode", null);
-    L(this, "component", /* @__PURE__ */ j.jsx(j.Fragment, {}));
-    L(this, "chartsDimensions", {});
-    L(this, "chartSizes", {
+    C(this, "reactRoot", null);
+    C(this, "parentNode", null);
+    C(this, "rootNode", null);
+    C(this, "component", /* @__PURE__ */ j.jsx(j.Fragment, {}));
+    C(this, "chartsDimensions", {});
+    C(this, "chartSizes", {
       chartWidth: Y,
       // width of single chart
       chartHeight: U,
@@ -87,13 +87,13 @@ class Jt {
       totalHeight: U
       // width of all charts in charts height, plus bottom axis, plus top title
     });
-    L(this, "margins", {
+    C(this, "margins", {
       top: F,
       bottom: F,
       left: F,
       right: F
     });
-    L(this, "captionsSizes", {
+    C(this, "captionsSizes", {
       xAxisCaptions: 100,
       yAxisCaptions: 100,
       xGroupCaptions: q,
@@ -101,29 +101,29 @@ class Jt {
       xCaptionTail: 0,
       yCaptionTail: 0
     });
-    L(this, "labelAngles", {
+    C(this, "labelAngles", {
       xAxisLabels: 0,
       yAxisLabels: 0,
       xGroupLabels: 0,
       yGroupLabels: 0
     });
-    L(this, "columnsCount", 1);
-    L(this, "rowsCount", 1);
-    L(this, "scales", {
+    C(this, "columnsCount", 1);
+    C(this, "rowsCount", 1);
+    C(this, "scales", {
       // scales grouped by facet
       x: { null: I().domain(["null"]).range([1]) },
       y: { null: I().domain(["null"]).range([1]) }
     });
-    L(this, "step", { x: {}, y: {} });
-    L(this, "colorScale", D().domain([0, 1]).range(["white", "black"]));
-    L(this, "annotationColorScales", {});
-    L(this, "dendrogramAesScales", {});
-    L(this, "legend", {
+    C(this, "step", { x: {}, y: {} });
+    C(this, "colorScale", D().domain([0, 1]).range(["white", "black"]));
+    C(this, "annotationColorScales", {});
+    C(this, "dendrogramAesScales", {});
+    C(this, "legend", {
       width: 0,
       height: 0,
       items: []
     });
-    L(this, "dendrograms", {});
+    C(this, "dendrograms", {});
   }
   clear() {
     var e;
@@ -143,97 +143,97 @@ class Jt {
       right: this.legend.width + s.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, r, i) {
+  updateLegendSize(e, s, t, n, i) {
     if (!s.show) {
       this.legend = { width: 0, height: 0, items: [] };
       return;
     }
-    const a = this.chartSizes.chartHeight, h = [], u = { width: 0, height: 0, left: 0, top: 0 }, x = (l) => l.reduce((c, o) => (c[o] = String(o), c), {});
+    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), {});
     if (e === "continuous") {
-      const l = this.colorScale, c = Q(l, i), o = D([c[0], c[c.length - 1]], [a, 0]), n = r.label ?? r.value;
-      h.push({
-        ...u,
+      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,
         type: "continuous",
         id: "heatmapValue",
-        scale: l,
+        scale: h,
         values: c,
-        title: n,
+        title: l,
         tickPositionScale: o
       });
     } else if (e === "discrete") {
-      const l = this.colorScale, c = r.label ?? r.value, o = l.domain(), n = x(o);
-      h.push({ ...u, type: "discreteColor", id: "heatmapValue", title: c, scale: l, values: o, labels: n });
+      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 });
     }
-    if (t.forEach((l) => {
-      const c = l.valueColumn.label ?? l.valueColumn.value;
-      if (l.type === "continuous") {
-        const o = this.annotationColorScales[l.id].scale, n = Q(o, i), f = D([n[0], n[n.length - 1]], [a, 0]);
-        h.push({ ...u, type: "continuous", id: l.id, tickPositionScale: f, title: c, scale: o, values: n });
+    if (t.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 });
       }
-      if (l.type === "discrete") {
-        const o = this.annotationColorScales[l.id].scale, n = o.domain(), f = x(n);
-        h.push({ ...u, type: "discreteColor", id: l.id, title: c, scale: o, values: n, labels: f });
+      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 });
       }
-    }), !h.length) {
+    }), !a.length) {
       this.legend = { width: 0, height: 0, items: [] };
       return;
     }
-    const p = ut(h, this.chartSizes.chartHeight), d = p[p.length - 1], A = d.left + d.width + gt;
+    const d = ut(a, this.chartSizes.chartHeight), u = d[d.length - 1], b = u.left + u.width + gt;
     this.legend = {
-      width: A,
-      height: a,
-      items: p
+      width: b,
+      height: r,
+      items: d
     };
   }
-  updateCaptionsSize(e, s, t, r) {
-    const i = new dt("bold 16px Manrope"), { xGroupKeys: a, yGroupKeys: h, xGroupLabels: u, yGroupLabels: x, xKeysByGroups: p, yKeysByGroups: d, xLabels: A, yLabels: l } = e.meta;
+  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;
     this.labelAngles = {
       xAxisLabels: s.axisLabelsAngle,
       yAxisLabels: t.axisLabelsAngle,
       xGroupLabels: s.groupLabelsAngle,
       yGroupLabels: t.groupLabelsAngle
     };
-    const c = a.reduce((y, g) => Math.max(y, P(p[g], A, i)), 0), o = h.reduce((y, g) => Math.max(y, P(d[g], l, i)), 0), n = P(a, u, i), f = P(h, x, i), { xCaptionTail: S, yCaptionTail: T } = zt(
+    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(
       this.labelAngles,
-      r,
+      n,
       this.scales,
       this.step,
       e,
       i
     );
     this.captionsSizes = {
-      xCaptionTail: S,
-      yCaptionTail: T,
-      xGroupCaptions: K(n, this.labelAngles.xGroupLabels),
-      yGroupCaptions: K(f, this.labelAngles.yGroupLabels),
+      xCaptionTail: A,
+      yCaptionTail: M,
+      xGroupCaptions: K(l, this.labelAngles.xGroupLabels),
+      yGroupCaptions: K(x, this.labelAngles.yGroupLabels),
       xAxisCaptions: K(c, this.labelAngles.xAxisLabels),
       yAxisCaptions: K(o, this.labelAngles.yAxisLabels)
     };
   }
-  updateChartDimensions(e, s, t, r, i, a, h, u, x, p) {
-    const d = s.length, A = Math.min(i.nRows ?? d, d), l = Math.min(i.nCols ?? d, d);
-    this.columnsCount = i.nRows ? Math.ceil(d / A) : l, this.rowsCount = Math.ceil(d / this.columnsCount);
+  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);
     const { sharedX: c, sharedY: o } = i;
     this.chartsDimensions = {};
-    let n = 0, f = 0;
-    s.forEach((y, g) => {
-      const b = g % this.columnsCount + 1, C = pt(g, s.length, this.columnsCount, this.rowsCount), z = this.step.x[y], w = this.step.y[y], v = ft(
+    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(
+        r,
         a,
-        h,
         this.captionsSizes,
-        u,
-        x,
         p,
-        C,
+        f,
+        d,
+        y,
         c,
         o,
         s,
         t,
-        r,
+        n,
         z,
         w
-      ), N = bt(u, C, c, o);
-      function M(R) {
+      ), N = bt(p, y, c, o);
+      function H(R) {
         return Math.max(
           xt[R].reduce((O, k) => O + v[R][k], 0),
           N[R],
@@ -241,124 +241,124 @@ class Jt {
         );
       }
       const E = {
-        left: M("left"),
-        right: M("right"),
-        top: M("top"),
-        bottom: M("bottom")
+        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 = yt(v, this.chartSizes.chartWidth, this.chartSizes.chartHeight), W = this.chartSizes.chartWidth + E.left + E.right, _ = this.chartSizes.chartHeight + E.top + E.bottom;
-      this.chartsDimensions[y] = {
-        left: n,
-        top: f,
+      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;
+      this.chartsDimensions[S] = {
+        left: l,
+        top: x,
         inner: { width: this.chartSizes.chartWidth, height: this.chartSizes.chartHeight },
         outer: { width: W, height: _ },
         padding: E,
         sideElementBBoxes: B,
-        chartEdgeSides: C
-      }, n += W, b === this.columnsCount && (n = 0, f += _);
+        chartEdgeSides: y
+      }, l += W, L === this.columnsCount && (l = 0, x += _);
     });
-    const S = s.slice(0, this.columnsCount).reduce((y, g) => y + this.chartsDimensions[g].outer.width, 0), T = s.filter((y, g) => g % this.columnsCount === 0).reduce((y, g) => y + this.chartsDimensions[g].outer.height, 0);
-    this.chartSizes.chartsWidth = S, this.chartSizes.chartsHeight = T;
+    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;
   }
-  updateChartsSizes(e, s, t, r) {
-    const { width: i, height: a, cellWidth: h, cellHeight: u } = e, x = t.meta.facetKeys[0];
-    if (h && s.sharedX && x) {
-      const p = t.facets[x].xKeys.length, d = t.meta.xGroupKeys.length;
-      this.chartSizes.chartWidth = p * h + r * (d - 1);
+  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);
     } else
       this.chartSizes.chartWidth = i;
-    if (u && s.sharedY && x) {
-      const p = t.facets[x].yKeys.length, d = t.meta.yGroupKeys.length;
-      this.chartSizes.chartHeight = p * u + r * (d - 1);
+    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);
     } else
-      this.chartSizes.chartHeight = a;
+      this.chartSizes.chartHeight = r;
   }
   // update scales for cell positions, x and y for each facet
-  updateScales(e, s, t, r, i, a, h, u, x, p) {
-    const { width: d, height: A, cellWidth: l, cellHeight: c } = i, { meta: o, facets: n } = s, { sharedX: f, sharedY: S } = r, T = (g, b = {}) => g.sort(
-      (C, z) => a.sorting === "asc" ? (b[C] ?? C).localeCompare(b[z] ?? z, "en", { numeric: !0 }) : (b[z] ?? z).localeCompare(b[C] ?? C, "en", { numeric: !0 })
-    ), y = (g, b = {}) => g.sort(
-      (C, z) => h.sorting === "asc" ? (b[C] ?? C).localeCompare(b[z] ?? z, "en", { numeric: !0 }) : (b[z] ?? z).localeCompare(b[C] ?? C, "en", { numeric: !0 })
+  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 })
+    ), 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 })
     );
     e.forEach((g) => {
-      const b = n[g], C = p.xGroup ? o.xGroupKeys : T(o.xGroupKeys), z = p.yGroup ? o.yGroupKeys : y(o.yGroupKeys), { xKeysByGroups: w } = f ? o : b, { yKeysByGroups: v } = S ? o : b, N = C.map((G) => w[G].length), M = z.map((G) => v[G].length), E = N.reduce((G, H) => G + H, 0), B = M.reduce((G, H) => G + H, 0), W = f && l ? l : (d - (N.filter((G) => G > 0).length - 1) * t) / E, _ = S && c ? c : (A - (M.filter((G) => G > 0).length - 1) * t) / B, R = [], O = [];
+      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 = [], O = [];
       let k = 0;
-      C.forEach((G) => {
-        const H = u || p.x ? w[G] : T(w[G], o.xLabels);
-        O.push(...H), H.forEach(() => {
+      y.forEach((G) => {
+        const T = p || d.x ? w[G] : M(w[G], o.xLabels);
+        O.push(...T), T.forEach(() => {
           R.push(k), k += W;
-        }), H.length > 0 && (k += t);
+        }), T.length > 0 && (k += t);
       });
       const V = [], J = [];
       let X = 0;
       z.forEach((G) => {
-        const H = x || p.y ? v[G] : y(v[G], o.yLabels);
-        J.push(...H), H.forEach(() => {
+        const T = f || d.y ? v[G] : S(v[G], o.yLabels);
+        J.push(...T), T.forEach(() => {
           V.push(X), X += _;
-        }), H.length > 0 && (X += t);
+        }), T.length > 0 && (X += t);
       }), this.scales.x[g] = I().domain(O).range(R), this.scales.y[g] = I().domain(J).range(V), this.step.x[g] = W, this.step.y[g] = _;
     });
   }
-  updateAesScale(e, s, t, r, i, a, h) {
+  updateAesScale(e, s, t, n, i, r, a) {
     if (e === "continuous")
-      t.valueColors ? this.colorScale = D().domain(t.valuesByColors ?? et(h, t.valueColors.length, s)).range(t.valueColors) : t.colorsList && (this.colorScale = D().domain(et(h, t.colorsList.length, s)).range(t.colorsList));
+      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 p = Object.entries(t.colorsMap);
-      this.colorScale = I().domain(p.map((d) => d[0])).range(p.map((d) => d[1])).unknown("#ccc");
-    } else t.colorsList && (this.colorScale = St(t.colorsList, a.map(String)));
-    const { xDataByKeys: u, yDataByKeys: x } = i.meta;
-    r.forEach((p) => {
-      const { colors: d, type: A, axis: l, valueColumn: c } = p, o = (l === "x" ? u : x)[c.valueLabels ?? c.value];
-      if (A === "discrete") {
-        const n = nt.uniq(Object.values(o).map(String)).sort();
-        this.annotationColorScales[p.id] = {
+      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];
+      if (b === "discrete") {
+        const l = nt.uniq(Object.values(o).map(String)).sort();
+        this.annotationColorScales[d.id] = {
           type: "discrete",
-          scale: Ct(d, n)
+          scale: Ct(u, l)
         };
       } else {
-        const n = Object.values(o).map(Number);
-        if (!n.length)
+        const l = Object.values(o).map(Number);
+        if (!l.length)
           return;
-        const [f = n[0], S = n[0]] = Gt(n);
-        this.annotationColorScales[p.id] = {
+        const [x = l[0], A = l[0]] = Gt(l);
+        this.annotationColorScales[d.id] = {
           type: "continuous",
-          scale: Lt(d, f, S, 0, 0.5, 1)
+          scale: Lt(u, x, A, 0, 0.5, 1)
         };
       }
     });
   }
-  updateDendrogram(e, s, t, r, i, a, h) {
-    e.forEach((u) => {
-      this.dendrograms[u] = { x: { treesByGroupKey: {}, data: a }, y: { treesByGroupKey: {}, data: h } };
-      const { xKeysByGroups: x, yKeysByGroups: p } = r[u], { hierarchyByGroupX: d, hierarchyByGroupY: A } = i[u];
-      if (a) {
-        const l = s.reduce((c, o) => {
-          var n;
-          return Math.max(c, (n = d[o]) == null ? void 0 : n.data.height);
+  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) => {
+          var o;
+          return Math.max(h, (o = u[c]) == null ? void 0 : o.data.height);
         }, 0);
-        this.dendrograms[u].x.treesByGroupKey = s.reduce((c, o) => {
-          const n = d[o], f = x[o];
-          $().separation(() => 1).size([f.length * this.step.x[u], a.size])(
-            n
+        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])(
+            o
           );
-          const S = n, T = D().domain(a.position === "top" ? [0, l] : [l, 0]).range([a.size, 0]);
-          return tt(S, T, "y"), st(S, this.scales.x[u](f[0]), "x"), c[o] = S, c;
-        }, {}), this.dendrograms[u].x.data = a;
+          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;
       }
-      if (h) {
-        const l = t.reduce((c, o) => {
-          var n;
-          return Math.max(c, (n = A[o]) == null ? void 0 : n.data.height);
+      if (a) {
+        const { hierarchyByGroupY: u } = i[p], b = t.reduce((h, c) => {
+          var o;
+          return Math.max(h, (o = u[c]) == null ? void 0 : o.data.height);
         }, 0);
-        this.dendrograms[u].y.treesByGroupKey = t.reduce((c, o) => {
-          const n = A[o], f = p[o];
-          $().separation(() => 1).size([f.length * this.step.y[u], h.size])(
-            n
+        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])(
+            o
           );
-          const S = n, T = D().domain(h.position === "left" ? [0, l] : [l, 0]).range([h.size, 0]);
-          return st(S, this.scales.y[u](f[0]), "x", "y"), tt(S, T, "x"), c[o] = S, c;
-        }, {}), this.dendrograms[u].y.data = h;
+          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;
       }
     });
   }
@@ -366,39 +366,39 @@ class Jt {
     if (!e)
       return;
     const s = Object.keys(e);
-    this.dendrogramAesScales = s.reduce((t, r) => {
-      const i = e[r], a = Object.keys(i);
-      return t[r] = I().domain(a).range(
-        a.map((h) => ({
+    this.dendrogramAesScales = s.reduce((t, n) => {
+      const i = e[n], r = Object.keys(i);
+      return t[n] = I().domain(r).range(
+        r.map((a) => ({
           ...Z,
-          ...i[h]
+          ...i[a]
         }))
       ).unknown(Z), t;
     }, {});
   }
-  render(e, s, t, r, i, a, h, u, x, p, d, A, l, c, o, n, f) {
+  render(e, s, t, n, i, r, a, p, f, d, u, b, h, c, o, l, x) {
     var B;
-    const { meta: S, facets: T } = a, { facetKeys: y, xGroupKeys: g, yGroupKeys: b, valueExtent: C } = S, { xAxis: z, yAxis: w, title: v, size: N, valueType: M } = t;
-    this.updateChartsSizes(N, r, a, i.groupGap), this.updateAesScale(M, C.dataSource, i, h, a, l, c), this.updateScales(y, a, i.groupGap, r, N, t.xAxis, t.yAxis, x, p, n), this.updateCaptionsSize(a, z, w, r), this.updateChartDimensions(
+    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(
       N,
-      y,
+      S,
       g,
-      b,
-      r,
+      L,
+      n,
       z,
       w,
-      h,
-      x,
-      p
-    ), this.updateLegendSize(M, t.legend, h, u, C.dataSource), this.updateMargins(v, N), this.updateDendrogram(y, g, b, T, d, x, p), this.updateDendrogramAesScales(A);
+      a,
+      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__ */ j.jsx(ht, { dataFrame: e, children: /* @__PURE__ */ j.jsx(
       mt,
       {
         aes: i,
-        annotations: h,
+        annotations: a,
         annotationColorScales: this.annotationColorScales,
         captionsSizes: this.captionsSizes,
-        cellsMeta: S,
+        cellsMeta: A,
         columnsCount: this.columnsCount,
         chartsDimensions: this.chartsDimensions,
         chartSettings: t,
@@ -406,9 +406,9 @@ class Jt {
         colorScale: this.colorScale,
         dendrogramAesScales: this.dendrogramAesScales,
         dendrograms: this.dendrograms,
-        facetKeys: y,
-        facetSettings: r,
-        groupedCells: T,
+        facetKeys: S,
+        facetSettings: n,
+        groupedCells: M,
         labelAngles: this.labelAngles,
         legend: this.legend,
         margins: this.margins,
@@ -416,9 +416,9 @@ class Jt {
         settingsId: s,
         step: this.step,
         xGroupKeys: g,
-        yGroupKeys: b,
+        yGroupKeys: L,
         onTooltipHintSwitch: o,
-        cellsRenderingMode: f
+        cellsRenderingMode: x
       }
     ) });
     this.component = E, (B = this.reactRoot) == null || B.render(E);