@milaboratories/miplots4 1.0.169 → 1.0.171

package/dist/scatterplot/ChartRenderer.js

@@ -1,6 +1,6 @@
 var st = Object.defineProperty;
 var ot = (a, t, i) => t in a ? st(a, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : a[t] = i;
-var b = (a, t, i) => ot(a, typeof t != "symbol" ? t + "" : t, i);
+var S = (a, t, i) => ot(a, typeof t != "symbol" ? t + "" : t, i);
 import { j as v } from "../_virtual/jsx-runtime.js";
 import { c as nt } from "../_virtual/client.js";
 import { Error as at } from "../common/Error.js";
@@ -20,17 +20,17 @@ import { getContinuousColorScale as gt } from "../utils/getContinuousColorScale.
 import { getContinuousLegendTicks as ft } from "../utils/getContinuousLegendTicks.js";
 import { TextMeasurer as Tt } from "../utils/TextMeasurer/TextMeasurer.js";
 import { ChartsGroup as Ct } from "./components/ChartsGroup.js";
-import { MIN_MARGIN as D, PADDINGS as P, DEFAULT_DOT_AES as A, LEGEND_OFFSET as Mt, TICK_OFFSET as F, DEFAULT_TICKS_SIZE as Q, MIN_PADDING as U, FACET_TITLE_OFFSET as Et, TITLE_LINE as O, FACET_AXIS_OFFSET as Z } from "./constants.js";
+import { MIN_MARGIN as D, PADDINGS as P, DEFAULT_DOT_AES as A, LEGEND_OFFSET as Et, TICK_OFFSET as F, DEFAULT_TICKS_SIZE as Q, MIN_PADDING as U, FACET_TITLE_OFFSET as Mt, TITLE_LINE as O, FACET_AXIS_OFFSET as Z } from "./constants.js";
 import { createAesGetter as Y } from "./utils/createAesGetter.js";
-import { getTicksAndFormat as St } from "./utils/getTicksAndFormat.js";
+import { getTicksAndFormat as xt } from "./utils/getTicksAndFormat.js";
 import { isContinuousAxis as $ } from "./utils/isNumericScale.js";
 import { createMultilineDiscreteLabels as J } from "../utils/createMultilineDiscreteLabels.js";
 import { measureMultilineDiscreteLabels as k } from "../utils/measureMultilineDiscreteLabels.js";
 import B from "../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/linear.js";
 import { point as y } from "../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/band.js";
 import K from "../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/log.js";
-import bt from "../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/ordinal.js";
-import xt from "../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/symlog.js";
+import St from "../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/ordinal.js";
+import bt from "../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/symlog.js";
 import { sqrt as Nt } from "../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/pow.js";
 function tt(a, t) {
   if (a === void 0)
@@ -46,13 +46,13 @@ function zt(a, t, i, s) {
   const e = [];
   return a % i === i - 1 && e.push("right"), a % i === 0 && e.push("left"), a < i && e.push("top"), (Math.ceil((a + 1) / i) === s || Math.ceil((a + 1) / i) === s - 1 && a % i > (t - 1) % i) && e.push("bottom"), e;
 }
-function wt(a, t, i, s, e, o, f, T, S, d) {
-  const z = a.scale === "discrete", W = t.scale === "discrete", h = o.includes("left") || !(d != null && d.sharedY), n = o.includes("left") && t.title !== "", r = o.includes("bottom") || !(d != null && d.sharedX), g = o.includes("bottom") && a.title !== "", M = t.hiddenLabels ? 0 : W ? i.leftAxisCaptionsWidthByColumns[T] + 2 * F : i.yAxisCaptionsWidth + 2 * F, l = (t.showTicks ? Q : 0) + F, m = n ? O : 0, C = a.hiddenLabels ? 0 : z ? i.bottomAxisCaptionsWidthByRows[f] + 2 * F : i.xAxisCaptionsWidth + 2 * F, E = a.showTicks ? Q : 0, R = g ? O : 0, p = M + l + m + Z, c = C + E + R + Z, I = Math.max(...s.map((u) => e[u].length));
+function wt(a, t, i, s, e, o, f, T, x, d) {
+  const I = a.scale === "discrete", w = t.scale === "discrete", h = o.includes("left") || !(d != null && d.sharedY), n = o.includes("left") && t.title !== "", r = o.includes("bottom") || !(d != null && d.sharedX), g = o.includes("bottom") && a.title !== "", E = t.hiddenLabels ? 0 : w ? i.leftAxisCaptionsWidthByColumns[T] + 2 * F : i.yAxisCaptionsWidth + 2 * F, l = (t.showTicks ? Q : 0) + F, m = n ? O : 0, C = a.hiddenLabels ? 0 : I ? i.bottomAxisCaptionsWidthByRows[f] + 2 * F : i.xAxisCaptionsWidth + 2 * F, M = a.showTicks ? Q : 0, H = g ? O : 0, p = E + l + m + Z, c = C + M + H + Z, W = Math.max(...s.map((u) => e[u].length));
   return {
     left: h ? p : U,
-    top: I === 0 ? 0 : Et * 2 + I * pt,
+    top: W === 0 ? 0 : Mt * 2 + W * pt,
     bottom: r ? c + 8 : U,
-    right: S ? 0 : U
+    right: x ? 0 : U
   };
 }
 function Wt(a, t, i) {
@@ -76,24 +76,24 @@ function Lt(a, t, i, s) {
     trendColor: Y(a, t, (s == null ? void 0 : s.color) ?? A.color, "fillColor")
   };
 }
-const _t = Math.cos(Math.PI / 4), Ht = 5;
+const Rt = Math.cos(Math.PI / 4), _t = 5;
 function it(a, t) {
-  return t.scale === "discrete" ? t.labelsPosition === "90deg" ? a : t.labelsPosition === "45deg" ? a * _t + (a > 0 ? 2 * Ht : 0) : O : Math.max(a, O);
+  return t.scale === "discrete" ? t.labelsPosition === "90deg" ? a : t.labelsPosition === "45deg" ? a * Rt + (a > 0 ? 2 * _t : 0) : O : Math.max(a, O);
 }
 class ci {
   constructor() {
-    b(this, "reactRoot", null);
-    b(this, "parentNode", null);
-    b(this, "rootNode", null);
-    b(this, "component", /* @__PURE__ */ v.jsx(v.Fragment, {}));
-    b(this, "margins", {
+    S(this, "reactRoot", null);
+    S(this, "parentNode", null);
+    S(this, "rootNode", null);
+    S(this, "component", /* @__PURE__ */ v.jsx(v.Fragment, {}));
+    S(this, "margins", {
       top: D,
       bottom: D,
       left: D,
       right: D
     });
-    b(this, "chartsDimensions", {});
-    b(this, "chartSizes", {
+    S(this, "chartsDimensions", {});
+    S(this, "chartSizes", {
       chartWidth: G,
       // width of single chart
       chartHeight: X,
@@ -107,13 +107,13 @@ class ci {
       totalHeight: X
       // width of all charts in charts height, plus bottom axis, plus top title
     });
-    b(this, "columnsCount", 1);
-    b(this, "rowsCount", 1);
-    b(this, "scales", {
+    S(this, "columnsCount", 1);
+    S(this, "rowsCount", 1);
+    S(this, "scales", {
       x: { null: B().domain([0, 1]).range([0, G]) },
       y: { null: B().domain([0, 1]).range([X, 0]) }
     });
-    b(this, "captionsSizes", {
+    S(this, "captionsSizes", {
       xAxisCaptionsWidth: 30,
       yAxisCaptionsWidth: 100,
       bottomAxisCaptionsWidthByRows: [],
@@ -121,13 +121,13 @@ class ci {
       bottomCaptionsTail: 0,
       leftCaptionsTail: 0
     });
-    b(this, "facetTitles", {});
+    S(this, "facetTitles", {});
     // can be multiline
-    b(this, "mainTitle", []);
+    S(this, "mainTitle", []);
     // can be multiline
-    b(this, "discreteAxesLabels", { x: {}, y: {} });
+    S(this, "discreteAxesLabels", { x: {}, y: {} });
     // only for discrete axes, by facets, can be multiline
-    b(this, "legend", { width: 0, height: 0, items: [] });
+    S(this, "legend", { width: 0, height: 0, items: [] });
   }
   clear() {
     var t;
@@ -144,10 +144,10 @@ class ci {
   }
   updateChartDimensions(t, i, s, e) {
     const { chartWidth: o, chartHeight: f } = this.chartSizes;
-    let T = 0, S = 0;
+    let T = 0, x = 0;
     const d = Wt(t, this.rowsCount, this.columnsCount);
     this.chartsDimensions = t.reduce((h, n, r) => {
-      const [g, M] = It(r, this.columnsCount), l = zt(r, t.length, this.columnsCount, this.rowsCount), m = wt(
+      const [g, E] = It(r, this.columnsCount), l = zt(r, t.length, this.columnsCount, this.rowsCount), m = wt(
         s,
         e,
         this.captionsSizes,
@@ -155,62 +155,62 @@ class ci {
         this.facetTitles,
         l,
         g,
-        M,
-        M === this.columnsCount - 1,
+        E,
+        E === this.columnsCount - 1,
         i
-      ), C = o + m.left + m.right, E = f + m.top + m.bottom;
+      ), C = o + m.left + m.right, M = f + m.top + m.bottom;
       return h[n] = {
         left: T,
-        top: S,
+        top: x,
         chartEdgeSides: l,
         padding: m,
         inner: { width: o, height: f },
-        outer: { width: C, height: E }
-      }, T += C, M === this.columnsCount - 1 && (T = 0, S += E), h;
+        outer: { width: C, height: M }
+      }, T += C, E === this.columnsCount - 1 && (T = 0, x += M), h;
     }, {});
-    const z = Math.max(
+    const I = Math.max(
       ...t.map((h) => this.chartsDimensions[h].outer.width + this.chartsDimensions[h].left)
-    ), W = Math.max(
+    ), w = Math.max(
       ...t.map((h) => this.chartsDimensions[h].outer.height + this.chartsDimensions[h].top)
     );
-    this.chartSizes.chartsWidth = z, this.chartSizes.chartsHeight = W;
+    this.chartSizes.chartsWidth = I, this.chartSizes.chartsHeight = w;
   }
-  updateViewport(t, i, s, e, o, f, T, S) {
-    const d = t.length, z = Math.min(i.nRows ?? d, d), W = Math.min(i.nCols ?? d, d);
-    this.columnsCount = i.nRows ? Math.ceil(d / z) : W, this.rowsCount = Math.ceil(d / this.columnsCount);
+  updateViewport(t, i, s, e, o, f, T, x) {
+    const d = t.length, I = Math.min(i.nRows ?? d, d), w = Math.min(i.nCols ?? d, d);
+    this.columnsCount = i.nRows ? Math.ceil(d / I) : w, this.rowsCount = Math.ceil(d / this.columnsCount);
     let [h, n] = [1 / 0, -1 / 0], [r, g] = [1 / 0, -1 / 0];
-    const M = t.reduce((p, c) => {
-      const I = T[c], { minX: u, minY: x, maxX: N, maxY: w } = I;
-      return h = Math.min(h, u), r = Math.min(r, x), n = Math.max(n, N), g = Math.max(g, w), p[c] = { minX: u, maxX: N, minY: x, maxY: w }, p;
+    const E = t.reduce((p, c) => {
+      const W = T[c], { minX: u, minY: b, maxX: N, maxY: z } = W;
+      return h = Math.min(h, u), r = Math.min(r, b), n = Math.max(n, N), g = Math.max(g, z), p[c] = { minX: u, maxX: N, minY: b, maxY: z }, p;
     }, {}), l = {}, m = {};
-    let C = !1, E = !1;
+    let C = !1, M = !1;
     t.forEach((p) => {
       let c;
       if (!$(s))
         c = y().range([0, this.chartSizes.chartWidth]).domain(o.keys ?? []).padding(0.5);
       else {
         c = s.scale === "log" ? K() : B();
-        const u = M[p];
-        let x = s.lowerValue ? Number(s.lowerValue) : i.sharedX ? h : u.minX, N = s.upperValue ? Number(s.upperValue) : i.sharedX ? n : u.maxX;
+        const u = E[p];
+        let b = s.lowerValue ? Number(s.lowerValue) : i.sharedX ? h : u.minX, N = s.upperValue ? Number(s.upperValue) : i.sharedX ? n : u.maxX;
         if (typeof s.symmetricRange < "u") {
-          const _ = s.symmetricRange;
-          if (_ >= x && _ <= N) {
-            const H = Math.max(_ - x, N - _);
-            x = _ - H, N = _ + H;
+          const R = s.symmetricRange;
+          if (R >= b && R <= N) {
+            const _ = Math.max(R - b, N - R);
+            b = R - _, N = R + _;
           }
         }
-        const w = [0, this.chartSizes.chartWidth], L = c.copy().domain([x, N]).range([P.LEFT, this.chartSizes.chartWidth - P.RIGHT]);
-        c.domain([L.invert(0), L.invert(this.chartSizes.chartWidth)]).range(w).nice();
+        const z = [0, this.chartSizes.chartWidth], L = c.copy().domain([b, N]).range([P.LEFT, this.chartSizes.chartWidth - P.RIGHT]);
+        c.domain([L.invert(0), L.invert(this.chartSizes.chartWidth)]).range(z).nice();
       }
-      const I = this.scales.x[p];
-      l[p] = c, C = C || tt(I, c);
+      const W = this.scales.x[p];
+      l[p] = c, C = C || tt(W, c);
     });
-    const R = t.reduce((p, c) => {
-      const I = S ? S[c] : [];
-      return p[c] = I.reduce(
-        (u, x) => {
-          const N = x.bounded ? x.xBounds : this.scales.x[c].domain(), w = x.getInterval(N[0]), L = x.getInterval(N[1]);
-          return u.minY = Math.min(u.minY, isNaN(w.left) ? u.minY : w.left, isNaN(L.left) ? u.minY : L.left), u.maxY = Math.max(u.maxY, isNaN(w.right) ? u.maxY : w.right, isNaN(L.right) ? u.maxY : L.right), u;
+    const H = t.reduce((p, c) => {
+      const W = x ? x[c] : [];
+      return p[c] = W.reduce(
+        (u, b) => {
+          const N = b.bounded ? b.xBounds : this.scales.x[c].domain(), z = b.getInterval(N[0]), L = b.getInterval(N[1]);
+          return u.minY = Math.min(u.minY, isNaN(z.left) ? u.minY : z.left, isNaN(L.left) ? u.minY : L.left), u.maxY = Math.max(u.maxY, isNaN(z.right) ? u.maxY : z.right, isNaN(L.right) ? u.maxY : L.right), u;
         },
         { minY: 1 / 0, maxY: -1 / 0 }
       ), r = Math.min(r, p[c].minY), g = Math.max(g, p[c].maxY), p;
@@ -221,28 +221,28 @@ class ci {
         c = y().range([this.chartSizes.chartHeight, 0]).domain(f.keys ?? []).padding(0.5);
       else {
         c = e.scale === "log" ? K() : B();
-        const u = M[p], x = R[p];
-        let N = e.lowerValue ? Number(e.lowerValue) : i.sharedY ? r : Math.min(u.minY, x.minY), w = e.upperValue ? Number(e.upperValue) : i.sharedY ? g : Math.max(u.maxY, x.maxY);
+        const u = E[p], b = H[p];
+        let N = e.lowerValue ? Number(e.lowerValue) : i.sharedY ? r : Math.min(u.minY, b.minY), z = e.upperValue ? Number(e.upperValue) : i.sharedY ? g : Math.max(u.maxY, b.maxY);
         if (typeof e.symmetricRange < "u") {
-          const H = e.symmetricRange;
-          if (H >= N && H <= w) {
-            const j = Math.max(H - N, w - H);
-            N = H - j, w = H + j;
+          const _ = e.symmetricRange;
+          if (_ >= N && _ <= z) {
+            const j = Math.max(_ - N, z - _);
+            N = _ - j, z = _ + j;
           }
         }
-        const L = [this.chartSizes.chartHeight, 0], _ = c.copy().domain([N, w]).range([this.chartSizes.chartHeight - P.BOTTOM, P.TOP]);
-        c.domain([_.invert(this.chartSizes.chartHeight), _.invert(0)]).range(L).nice();
+        const L = [this.chartSizes.chartHeight, 0], R = c.copy().domain([N, z]).range([this.chartSizes.chartHeight - P.BOTTOM, P.TOP]);
+        c.domain([R.invert(this.chartSizes.chartHeight), R.invert(0)]).range(L).nice();
       }
-      const I = this.scales.y[p];
-      m[p] = c, E = E || tt(I, c);
-    }), C && (this.scales.x = l), E && (this.scales.y = m);
+      const W = this.scales.y[p];
+      m[p] = c, M = M || tt(W, c);
+    }), C && (this.scales.x = l), M && (this.scales.y = m);
   }
   updateCaptionsSize(t, i, s, e) {
     const o = new Tt("600 14px Manrope");
     function f(n) {
       return Math.max(...n.map((r) => o.getTextWidth(r)));
     }
-    let T = 0, S = 0, d = [], z = [], W = 0, h = 0;
+    let T = 0, x = 0, d = [], I = [], w = 0, h = 0;
     if (i.scale === "discrete") {
       const n = k(
         t,
@@ -255,7 +255,7 @@ class ci {
       );
       T = n.xTail, d = n.axisCaptionsWidthByRows;
     } else
-      W = 20;
+      w = 20;
     if (s.scale === "discrete") {
       const n = k(
         t,
@@ -266,19 +266,19 @@ class ci {
         "horizontal",
         this.scales.y
       );
-      S = n.yTail, z = n.axisCaptionsWidthByColumns;
+      x = n.yTail, I = n.axisCaptionsWidthByColumns;
     } else
       Object.values(this.scales.y).forEach((n) => {
-        const { ticks: r, format: g } = St(n, e);
+        const { ticks: r, format: g } = xt(n, e);
         h = Math.max(h, f(r.map(g)));
       });
     this.captionsSizes = {
-      xAxisCaptionsWidth: i.hiddenLabels ? 0 : it(W, i),
+      xAxisCaptionsWidth: i.hiddenLabels ? 0 : it(w, i),
       yAxisCaptionsWidth: s.hiddenLabels ? 0 : it(h, s),
       bottomAxisCaptionsWidthByRows: d,
-      leftAxisCaptionsWidthByColumns: z,
+      leftAxisCaptionsWidthByColumns: I,
       bottomCaptionsTail: T,
-      leftCaptionsTail: S
+      leftCaptionsTail: x
     };
   }
   createMainTitle(t, i) {
@@ -329,7 +329,7 @@ class ci {
     const o = [], f = { width: 0, height: 0, left: 0, top: 0 }, T = Math.min(
       Math.max(this.chartSizes.chartHeight, lt),
       ct
-    ), S = Math.max(this.chartSizes.chartHeight, T);
+    ), x = Math.max(this.chartSizes.chartHeight, T);
     if (s.forEach((h) => {
       const n = i[h.value];
       if (n.usedAes.length === 0 || !n.aesMap)
@@ -344,33 +344,33 @@ class ci {
           (m === "dotFill" || m === "lineColor") && (r[l].color = n.aesMap(l, m) ?? et), m === "dotShape" && (r[l].shape = n.aesMap(l, m) ?? "21"), m === "dotSize" && (r[l].size = n.aesMap(l, m) ?? 3);
         });
       });
-      const g = h.label ?? h.value, M = bt().domain(n.values).range(n.values.map((l) => r[l])).unknown(A);
-      o.push({ ...f, id: h.value, type: "dots", title: g, scale: M, values: n.values, labels: n.labels });
+      const g = h.label ?? h.value, E = St().domain(n.values).range(n.values.map((l) => r[l])).unknown(A);
+      o.push({ ...f, id: h.value, type: "dots", title: g, scale: E, values: n.values, labels: n.labels });
     }), e.forEach((h) => {
       if (h.type === "dots" && q(h.aes.dotFill)) {
-        const { domain: n, range: r, columnName: g, type: M = "linear" } = h.aes.dotFill, l = g.label ?? g.value, m = gt(r, n, "linear"), C = (M === "log" ? xt() : B()).domain(n).range([T, 0]), E = ft(C, n);
-        o.push({ ...f, id: "dotFill", type: "continuous", title: l, scale: m, tickPositionScale: C, values: E });
+        const { domain: n, range: r, columnName: g, type: E = "linear" } = h.aes.dotFill, l = g.label ?? g.value, m = gt(r, n, "linear"), C = (E === "log" ? bt() : B()).domain(n).range([T, 0]), M = ft(C, n);
+        o.push({ ...f, id: "dotFill", type: "continuous", title: l, scale: m, tickPositionScale: C, values: M });
       }
       if (h.type === "dots" && q(h.aes.dotSize)) {
-        const { columnName: n, domain: r, range: g } = h.aes.dotSize, M = n.label ?? n.value, l = Nt(r, g), m = l.ticks(3), C = l.tickFormat(3), E = m.reduce((R, p) => (R[String(p)] = C(p), R), {});
-        o.push({ ...f, id: n.value, type: "size", title: M, scale: l, values: m, labels: E });
+        const { columnName: n, domain: r, range: g } = h.aes.dotSize, E = n.label ?? n.value, l = Nt(r, g), m = l.ticks(3), C = l.tickFormat(3), M = m.reduce((H, p) => (H[String(p)] = C(p), H), {});
+        o.push({ ...f, id: n.value, type: "size", title: E, scale: l, values: m, labels: M });
       }
     }), !o.length) {
       this.legend = { width: 0, height: 0, items: [] };
       return;
     }
-    const d = ut(o, S, T), z = d[d.length - 1], W = z.left + z.width + Mt;
+    const d = ut(o, x, T), w = d.reduce((h, n) => Math.max(h, n.left + n.width), 0) + Et;
     this.legend = {
-      width: W,
-      height: S,
+      width: w,
+      height: x,
       items: d
     };
   }
-  render(t, i, s, e, o, f, T, S, d, z, W, h, n, r, g, M, l, m) {
+  render(t, i, s, e, o, f, T, x, d, I, w, h, n, r, g, E, l, m) {
     var u;
-    const { xAxis: C, yAxis: E, size: R, title: p, legend: c } = s;
-    this.updateChartSizes(R), this.updateViewport(o, e, C, E, M, l, T, S), this.createAxisLabels(o, C, E, M, l), this.updateCaptionsSize(o, C, E, z.y), this.createFacetTitles(o, f), this.updateChartDimensions(o, e, C, E), this.updateLegendSize(c, W, n, r), this.createMainTitle(o, p), this.updateMargins(o);
-    const I = /* @__PURE__ */ v.jsx(ht, { dataFrame: t, children: /* @__PURE__ */ v.jsx(
+    const { xAxis: C, yAxis: M, size: H, title: p, legend: c } = s;
+    this.updateChartSizes(H), this.updateViewport(o, e, C, M, E, l, T, x), this.createAxisLabels(o, C, M, E, l), this.updateCaptionsSize(o, C, M, I.y), this.createFacetTitles(o, f), this.updateChartDimensions(o, e, C, M), this.updateLegendSize(c, w, n, r), this.createMainTitle(o, p), this.updateMargins(o);
+    const W = /* @__PURE__ */ v.jsx(ht, { dataFrame: t, children: /* @__PURE__ */ v.jsx(
       Ct,
       {
         settingsId: i,
@@ -381,7 +381,7 @@ class ci {
         chartsDimensions: this.chartsDimensions,
         scales: this.scales,
         groupedDots: T,
-        trendsData: S,
+        trendsData: x,
         legendData: this.legend,
         columnsCount: this.columnsCount,
         margins: this.margins,
@@ -389,14 +389,14 @@ class ci {
         mainTitle: this.mainTitle,
         facetTitles: this.facetTitles,
         captionsSizes: this.captionsSizes,
-        onlyPositive: z,
+        onlyPositive: I,
         layersData: h,
-        aesGetters: Lt(t, W, r, g),
+        aesGetters: Lt(t, w, r, g),
         onTooltipHintSwitch: m,
         discreteAxesLabels: this.discreteAxesLabels
       }
     ) });
-    this.component = I, (u = this.reactRoot) == null || u.render(I);
+    this.component = W, (u = this.reactRoot) == null || u.render(W);
   }
   renderError(t) {
     var i;