@milaboratories/miplots4 1.0.135 → 1.0.137

package/dist/scatterplot-umap/ChartRenderer.js

@@ -1,6 +1,6 @@
 var _ = Object.defineProperty;
 var k = (y, t, e) => t in y ? _(y, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : y[t] = e;
-var c = (y, t, e) => k(y, typeof t != "symbol" ? t + "" : t, e);
+var h = (y, t, e) => k(y, typeof t != "symbol" ? t + "" : t, e);
 import { j as b } from "../node_modules/react/jsx-runtime.js";
 import K from "../node_modules/@d3fc/d3fc-chart/src/cartesian.js";
 import "../node_modules/@d3fc/d3fc-webgl/src/scale/scaleMapper.js";
@@ -12,13 +12,13 @@ import $ from "../node_modules/d3-zoom/src/zoom.js";
 import "../node_modules/d3-zoom/src/transform.js";
 import { createRoot as Q } from "../node_modules/react-dom/client.js";
 import { Error as J } from "../common/Error.js";
-import { BLACK as R, DEFAULT_HEIGHT as w, DEFAULT_WIDTH as D, TITLE_LINE_HEIGHT as Z, TITLE_MARGIN as tt } from "../constants.js";
+import { BLACK as G, DEFAULT_HEIGHT as w, DEFAULT_WIDTH as D, TITLE_LINE_HEIGHT as Z, TITLE_MARGIN as tt } from "../constants.js";
 import { splitTextByWidth as et } from "../utils/splitTextByWidth.js";
-import { MIN_MARGIN as L, DEFAULT_DOT_AES as G } from "../scatterplot/constants.js";
+import { MIN_MARGIN as C, DEFAULT_DOT_AES as F } from "../scatterplot/constants.js";
 import { createAesGetter as H } from "../scatterplot/utils/createAesGetter.js";
 import { getTicksAndFormat as it } from "../scatterplot/utils/getTicksAndFormat.js";
 import { createLabelPositioner as st } from "../scatterplot/utils/getVisibleLabels.js";
-import { isContinuousAes as A } from "../types/common.js";
+import { isContinuousAes as R } from "../types/common.js";
 import "../types/discrete.js";
 import "../types/scatterplot.js";
 import "../types/heatmap.js";
@@ -27,56 +27,57 @@ import "../types/histogram.js";
 import "../types/bubble.js";
 import { getContinuousColorScale as ot } from "../utils/getContinuousColorScale.js";
 import { getContinuousLegendTicks as at } from "../utils/getContinuousLegendTicks.js";
-import { TextMeasurer as F } from "../utils/TextMeasurer/TextMeasurer.js";
+import { TextMeasurer as A } from "../utils/TextMeasurer/TextMeasurer.js";
 import { SVGLayer as nt } from "./components/SVGLayer.js";
 import { PADDINGS as W, TITLE_LINE as I, LEGEND_OFFSET as rt } from "./constants.js";
 import lt from "../node_modules/@d3fc/d3fc-pointer/src/pointer.js";
 import ht from "../node_modules/kdbush/index.js";
 import { DataFrameProvider as ct } from "../common/useDataFrame.js";
-import { arrangeLegendParts as dt } from "../utils/arrangeLegendParts.js";
+import { DataFrame as dt } from "../DataFrame.js";
+import { arrangeLegendParts as mt } from "../utils/arrangeLegendParts.js";
 import { stringToNumberRgba as M, getColorWithFakeOpacity as P, GET_BLACK as O } from "./colors.js";
-import T from "../node_modules/d3-scale/src/linear.js";
+import L from "../node_modules/d3-scale/src/linear.js";
 import V from "../node_modules/d3-scale/src/log.js";
 import N from "../node_modules/d3-selection/src/select.js";
-import mt from "../node_modules/d3-scale/src/ordinal.js";
-import pt from "../node_modules/d3-scale/src/symlog.js";
-import { sqrt as gt } from "../node_modules/d3-scale/src/pow.js";
-import ut from "../node_modules/d3-polygon/src/contains.js";
+import pt from "../node_modules/d3-scale/src/ordinal.js";
+import gt from "../node_modules/d3-scale/src/symlog.js";
+import { sqrt as ut } from "../node_modules/d3-scale/src/pow.js";
+import ft from "../node_modules/d3-polygon/src/contains.js";
 function B(y) {
   return y / 2.35 * (y / 2.35) * 64;
 }
 function E(y, t, e) {
-  return e.length === 0 ? !0 : e.some((i) => i.closed && i.points.length > 2 && ut(i.points, [y, t]));
+  return e.length === 0 ? !0 : e.some((i) => i.closed && i.points.length > 2 && ft(i.points, [y, t]));
 }
 function U(y, t, e) {
-  const i = e.find((o) => o.type === "dots"), r = e.find((o) => o.type === "curve");
+  const i = e.find((o) => o.type === "dots"), l = e.find((o) => o.type === "curve");
   return {
-    dotFill: H(y, t, (i == null ? void 0 : i.aes.dotFill) ?? G.color, "dotFill"),
-    dotSize: H(y, t, (i == null ? void 0 : i.aes.dotSize) ?? G.size, "dotSize"),
-    lineType: H(y, t, (r == null ? void 0 : r.aes.lineShape) ?? "solid", "lineShape")
+    dotFill: H(y, t, (i == null ? void 0 : i.aes.dotFill) ?? F.color, "dotFill"),
+    dotSize: H(y, t, (i == null ? void 0 : i.aes.dotSize) ?? F.size, "dotSize"),
+    lineType: H(y, t, (l == null ? void 0 : l.aes.lineShape) ?? "solid", "lineShape")
   };
 }
-class oe {
+class ne {
   constructor() {
-    c(this, "reactRoot", null);
-    c(this, "parentNode", null);
-    c(this, "rootNode", null);
-    c(this, "canvasNode", null);
-    c(this, "svgLayerElement", null);
-    c(this, "svgLayerComponent", /* @__PURE__ */ b.jsx(b.Fragment, {}));
-    c(this, "aesGetters", {
+    h(this, "reactRoot", null);
+    h(this, "parentNode", null);
+    h(this, "rootNode", null);
+    h(this, "canvasNode", null);
+    h(this, "svgLayerElement", null);
+    h(this, "svgLayerComponent", /* @__PURE__ */ b.jsx(b.Fragment, {}));
+    h(this, "aesGetters", {
       dotSize: () => 2,
-      dotFill: () => R,
+      dotFill: () => G,
       lineType: () => "solid"
     });
-    c(this, "tools", null);
-    c(this, "margins", {
-      top: L,
-      bottom: L,
-      left: L,
-      right: L
+    h(this, "tools", null);
+    h(this, "margins", {
+      top: C,
+      bottom: C,
+      left: C,
+      right: C
     });
-    c(this, "chartSizes", {
+    h(this, "chartSizes", {
       chartWidth: D,
       // width of single chart
       chartHeight: w,
@@ -86,33 +87,34 @@ class oe {
       totalHeight: w
       // width of all charts in charts height, plus bottom axis, plus top title
     });
-    c(this, "scales", {
-      x: T().domain([0, 10]).range([0, D]),
-      y: T().domain([0, 10]).range([w, 0]),
-      xOriginal: T().domain([0, 10]).range([0, D]),
-      yOriginal: T().domain([0, 10]).range([w, 0])
+    h(this, "scales", {
+      x: L().domain([0, 10]).range([0, D]),
+      y: L().domain([0, 10]).range([w, 0]),
+      xOriginal: L().domain([0, 10]).range([0, D]),
+      yOriginal: L().domain([0, 10]).range([w, 0])
     });
-    c(this, "polygons", []);
-    c(this, "onPolygonUpdateOutside", () => {
+    h(this, "polygons", []);
+    h(this, "onPolygonUpdateOutside", () => {
     });
-    c(this, "onTooltipHintSwitch", () => {
+    h(this, "onTooltipHintSwitch", () => {
     });
-    c(this, "onLassoControlsStateUpdate", () => {
+    h(this, "onLassoControlsStateUpdate", () => {
     });
-    c(this, "zoomTransform", null);
-    c(this, "zoomStateKey", "");
-    c(this, "selectedDot", null);
-    c(this, "captionsSizes", {
+    h(this, "zoomTransform", null);
+    h(this, "zoomStateKey", "");
+    h(this, "selectedDot", null);
+    h(this, "captionsSizes", {
       xAxisCaptionsWidth: 30,
       yAxisCaptionsWidth: 100
     });
-    c(this, "mainTitle", []);
+    h(this, "mainTitle", []);
     // can be multiline
-    c(this, "legend", { width: 0, height: 0, items: [] });
-    c(this, "notCalculatedProps", {});
-    c(this, "allDots", []);
-    c(this, "visibleLabels", []);
-    c(this, "onPolygonUpdate", (t) => {
+    h(this, "legend", { width: 0, height: 0, items: [] });
+    h(this, "notCalculatedProps", {});
+    h(this, "allDots", []);
+    h(this, "visibleLabels", []);
+    h(this, "dataFrame", new dt("", {}));
+    h(this, "onPolygonUpdate", (t) => {
       this.polygons = t, this.updateByLasso();
       const e = this.allDots.filter((i) => E(i.x, i.y, this.polygons)).map((i) => i.idx);
       this.onPolygonUpdateOutside(e, t);
@@ -132,33 +134,33 @@ class oe {
     (t.width !== this.chartSizes.chartWidth || t.height !== this.chartSizes.chartHeight) && (this.chartSizes.chartWidth = t.width, this.chartSizes.chartHeight = t.height, this.scales.x.range([0, this.chartSizes.chartWidth]), this.scales.y.range([this.chartSizes.chartHeight, 0]));
   }
   updateViewport(t, e, i) {
-    const r = t.scale === "log" ? V() : T();
-    let { minX: o, minY: l, maxX: m, maxY: u } = i;
-    if (t.lowerValue !== void 0 && (o = Math.max(o, t.lowerValue)), t.upperValue !== void 0 && (m = Math.min(m, t.upperValue)), e.lowerValue !== void 0 && (l = Math.max(l, e.lowerValue)), e.upperValue !== void 0 && (u = Math.min(u, e.upperValue)), t.symmetricRange !== void 0) {
-      const a = t.symmetricRange;
-      if (a >= o && a <= m) {
-        const f = Math.max(a - o, m - a);
-        o = a - f, m = a + f;
+    const l = t.scale === "log" ? V() : L();
+    let { minX: o, minY: c, maxX: m, maxY: u } = i;
+    if (t.lowerValue !== void 0 && (o = Math.max(o, t.lowerValue)), t.upperValue !== void 0 && (m = Math.min(m, t.upperValue)), e.lowerValue !== void 0 && (c = Math.max(c, e.lowerValue)), e.upperValue !== void 0 && (u = Math.min(u, e.upperValue)), t.symmetricRange !== void 0) {
+      const n = t.symmetricRange;
+      if (n >= o && n <= m) {
+        const f = Math.max(n - o, m - n);
+        o = n - f, m = n + f;
       }
     }
     if (typeof e.symmetricRange < "u") {
-      const a = e.symmetricRange;
-      if (a >= l && a <= u) {
-        const f = Math.max(a - l, u - a);
-        l = a - f, u = a + f;
+      const n = e.symmetricRange;
+      if (n >= c && n <= u) {
+        const f = Math.max(n - c, u - n);
+        c = n - f, u = n + f;
       }
     }
-    const S = [0, this.chartSizes.chartWidth], x = r.copy().domain([o, m]).range([W.LEFT, this.chartSizes.chartWidth - W.RIGHT]);
-    r.domain([x.invert(0), x.invert(this.chartSizes.chartWidth)]).range(S).nice(), this.scales.x = r, this.scales.xOriginal = r.copy();
-    const d = e.scale === "log" ? V() : T(), h = [this.chartSizes.chartHeight, 0], g = d.copy().domain([l, u]).range([this.chartSizes.chartHeight - W.BOTTOM, W.TOP]);
-    d.domain([g.invert(this.chartSizes.chartHeight), g.invert(0)]).range(h).nice(), this.scales.y = d, this.scales.yOriginal = d.copy();
+    const S = [0, this.chartSizes.chartWidth], x = l.copy().domain([o, m]).range([W.LEFT, this.chartSizes.chartWidth - W.RIGHT]);
+    l.domain([x.invert(0), x.invert(this.chartSizes.chartWidth)]).range(S).nice(), this.scales.x = l, this.scales.xOriginal = l.copy();
+    const d = e.scale === "log" ? V() : L(), r = [this.chartSizes.chartHeight, 0], g = d.copy().domain([c, u]).range([this.chartSizes.chartHeight - W.BOTTOM, W.TOP]);
+    d.domain([g.invert(this.chartSizes.chartHeight), g.invert(0)]).range(r).nice(), this.scales.y = d, this.scales.yOriginal = d.copy();
   }
   updateCaptionsSize() {
-    const t = new F("600 14px Arial");
-    function e(l) {
-      return Math.max(...l.map((m) => t.getTextWidth(m)));
+    const t = new A("600 14px Arial");
+    function e(c) {
+      return Math.max(...c.map((m) => t.getTextWidth(m)));
     }
-    const { ticks: i, format: r } = it(this.scales.y, !1), o = e(i.map(r));
+    const { ticks: i, format: l } = it(this.scales.y, !1), o = e(i.map(l));
     this.captionsSizes = {
       xAxisCaptionsWidth: 20,
       yAxisCaptionsWidth: o
@@ -174,90 +176,90 @@ class oe {
   updateMargins() {
     const t = Z * this.mainTitle.length, e = t > 0 ? t + tt * 2 : 0;
     this.margins = {
-      top: Math.max(e, L),
-      bottom: L + this.captionsSizes.xAxisCaptionsWidth + I,
-      left: L + this.captionsSizes.yAxisCaptionsWidth + I,
-      right: this.legend.width + L
+      top: Math.max(e, C),
+      bottom: C + this.captionsSizes.xAxisCaptionsWidth + I,
+      left: C + this.captionsSizes.yAxisCaptionsWidth + I,
+      right: this.legend.width + C
     }, this.chartSizes.totalWidth = this.margins.left + this.chartSizes.chartWidth + this.margins.right, this.chartSizes.totalHeight = this.margins.top + Math.max(this.chartSizes.chartHeight, this.legend.height) + this.margins.bottom, N(this.canvasNode).style("width", this.chartSizes.chartWidth + "px").style("height", this.chartSizes.chartHeight + "px").style("top", this.margins.top + "px").style("left", this.margins.left + "px");
   }
-  updateLegendSize(t, e, i, r) {
+  updateLegendSize(t, e, i, l) {
     if (!t.show) {
       this.legend = { width: 0, height: 0, items: [] };
       return;
     }
-    const o = [], l = { width: 0, height: 0, left: 0, top: 0 };
+    const o = [], c = { width: 0, height: 0, left: 0, top: 0 };
     if (i.forEach((d) => {
-      const h = e[d.value];
-      if (h.usedAes.length === 0 || !h.aesMap)
+      const r = e[d.value];
+      if (r.usedAes.length === 0 || !r.aesMap)
         return;
       const g = {};
-      h.values.forEach((p) => {
-        g[p] || (g[p] = { ...G }), h.usedAes.forEach((v) => {
-          v === "dotFill" && (g[p].color = h.aesMap(p, v) ?? R), v === "dotSize" && (g[p].size = Number(h.aesMap(p, v) ?? 3));
+      r.values.forEach((p) => {
+        g[p] || (g[p] = { ...F }), r.usedAes.forEach((s) => {
+          s === "dotFill" && (g[p].color = r.aesMap(p, s) ?? G), s === "dotSize" && (g[p].size = Number(r.aesMap(p, s) ?? 3));
         });
       });
-      const a = d.label ?? d.value, f = mt().domain(h.values).range(h.values.map((p) => g[p]));
-      o.push({ ...l, id: d.value, type: "dots", title: a, scale: f, values: h.values, labels: h.labels });
-    }), r.forEach((d) => {
-      if (d.type === "dots" && A(d.aes.dotFill)) {
-        const { domain: h, range: g, columnName: a, type: f = "linear" } = d.aes.dotFill, p = a.label ?? a.value, v = ot(g, h, "linear"), s = (f === "log" ? pt() : T()).domain(h).range([this.chartSizes.chartHeight, 0]), n = at(s, h);
-        o.push({ ...l, id: "dotFill", type: "continuous", title: p, scale: v, tickPositionScale: s, values: n });
+      const n = d.label ?? d.value, f = pt().domain(r.values).range(r.values.map((p) => g[p]));
+      o.push({ ...c, id: d.value, type: "dots", title: n, scale: f, values: r.values, labels: r.labels });
+    }), l.forEach((d) => {
+      if (d.type === "dots" && R(d.aes.dotFill)) {
+        const { domain: r, range: g, columnName: n, type: f = "linear" } = d.aes.dotFill, p = n.label ?? n.value, s = ot(g, r, "linear"), a = (f === "log" ? gt() : L()).domain(r).range([this.chartSizes.chartHeight, 0]), v = at(a, r);
+        o.push({ ...c, id: "dotFill", type: "continuous", title: p, scale: s, tickPositionScale: a, values: v });
       }
-      if (d.type === "dots" && A(d.aes.dotSize)) {
-        const { columnName: h, domain: g, range: a } = d.aes.dotSize, f = h.label ?? h.value, p = gt(g, a), v = p.ticks(3), s = p.tickFormat(3), n = v.reduce((C, z) => (C[String(z)] = s(z), C), {});
-        o.push({ ...l, id: h.value, type: "size", title: f, scale: p, values: v, labels: n });
+      if (d.type === "dots" && R(d.aes.dotSize)) {
+        const { columnName: r, domain: g, range: n } = d.aes.dotSize, f = r.label ?? r.value, p = ut(g, n), s = p.ticks(3), a = p.tickFormat(3), v = s.reduce((z, T) => (z[String(T)] = a(T), z), {});
+        o.push({ ...c, id: r.value, type: "size", title: f, scale: p, values: s, labels: v });
       }
     }), !o.length) {
       this.legend = { width: 0, height: 0, items: [] };
       return;
     }
-    const m = dt(o, this.chartSizes.chartHeight), u = m[m.length - 1], S = u.left + u.width + rt, x = this.chartSizes.chartHeight;
+    const m = mt(o, this.chartSizes.chartHeight), u = m[m.length - 1], S = u.left + u.width + rt, x = this.chartSizes.chartHeight;
     this.legend = {
       width: S,
       height: x,
       items: m
     };
   }
-  initSettings(t, e, i, r, o, l, m) {
-    const { xAxis: u, yAxis: S, size: x, title: d, legend: h } = i;
-    this.updateChartSizes(x), this.updateViewport(u, S, r), this.updateCaptionsSize(), this.updateLegendSize(h, o, m, l), this.createMainTitle(d), this.updateMargins(), this.aesGetters = U(t, o, l);
-    const g = Y().data(e).value((s) => {
-      const n = M(this.aesGetters.dotFill(s.idx));
-      return n[3] = !s.dimmed && E(s.x, s.y, this.polygons) ? 1 : 0.4, P(n, n);
-    }), a = X().equals((s, n) => s === n).size((s) => B(this.aesGetters.dotSize(s.idx))).crossValue((s) => s.x).mainValue((s) => s.y).decorate((s) => g(s)), f = $().scaleExtent([0.1, 1e3]).filter((s) => s.type === "wheel" || s.metaKey || s.ctrlKey).on("start", () => {
+  initSettings(t, e, i, l, o, c) {
+    const { xAxis: m, yAxis: u, size: S, title: x, legend: d } = e;
+    this.updateChartSizes(S), this.updateViewport(m, u, i), this.updateCaptionsSize(), this.updateLegendSize(d, l, c, o), this.createMainTitle(x), this.updateMargins(), this.aesGetters = U(this.dataFrame, l, o);
+    const r = Y().data(t).value((s) => {
+      const a = M(this.aesGetters.dotFill(s.idx));
+      return a[3] = !s.dimmed && E(s.x, s.y, this.polygons) ? 1 : 0.4, P(a, a);
+    }), g = X().equals((s, a) => s === a).size((s) => B(this.aesGetters.dotSize(s.idx))).crossValue((s) => s.x).mainValue((s) => s.y).decorate((s) => r(s)), n = $().scaleExtent([0.1, 1e3]).filter((s) => s.type === "wheel" || s.metaKey || s.ctrlKey).on("start", () => {
       this.selectedDot = null;
     }).on("zoom", (s) => {
-      const n = s.transform, C = n.rescaleX(this.scales.xOriginal), z = n.rescaleY(this.scales.yOriginal);
-      this.scales.x.domain(C.domain()), this.scales.y.domain(z.domain()), this.zoomTransform = n, this.zoomStateKey = `${n.x}_${n.y}_${n.k}`, this.updateLabelsPosition(this.visibleLabels), this.renderSvgLayer(t), this.renderWebglLayer();
+      const a = s.transform, v = a.rescaleX(this.scales.xOriginal), z = a.rescaleY(this.scales.yOriginal);
+      this.scales.x.domain(v.domain()), this.scales.y.domain(z.domain()), this.zoomTransform = a, this.zoomStateKey = `${a.x}_${a.y}_${a.k}`, this.updateLabelsPosition(this.visibleLabels), this.renderSvgLayer(), this.renderWebglLayer();
     }).on("end", () => {
-      this.visibleLabels = this.computeLabels(this.allDots), this.renderSvgLayer(t);
-    }), p = lt().on("point", ([s]) => {
+      this.visibleLabels = this.computeLabels(this.allDots), this.renderSvgLayer();
+    }), f = lt().on("point", ([s]) => {
       var z;
-      let n;
-      s && (n = this.getClosestDot(s.x, s.y));
-      const C = this.selectedDot && !n || !this.selectedDot && n || ((z = this.selectedDot) == null ? void 0 : z.idx) !== (n == null ? void 0 : n.idx);
-      this.selectedDot = n ?? null, C && this.renderSvgLayer(t);
-    }), v = K({
+      let a;
+      s && (a = this.getClosestDot(s.x, s.y));
+      const v = this.selectedDot && !a || !this.selectedDot && a || ((z = this.selectedDot) == null ? void 0 : z.idx) !== (a == null ? void 0 : a.idx);
+      this.selectedDot = a ?? null, v && this.renderSvgLayer();
+    }), p = K({
       xScale: this.scales.x,
       yScale: this.scales.y
     }).xAxisHeight(() => "0").yAxisWidth(() => "0").svgPlotArea(j()).webglPlotArea(
       // only render the point series on the WebGL layer
-      q().series([a]).mapping((s) => s)
+      q().series([g]).mapping((s) => s)
     ).decorate((s) => {
-      const n = s.enter();
-      n && !this.svgLayerElement && (n.style("grid-template-columns", "0 auto 1fr auto 0"), n.style("grid-template-rows", "0 auto 1fr auto 0"), this.svgLayerElement = n.select(".svg-plot-area.plot-area svg").node()), n.select(".svg-plot-area.plot-area").attr("class", "svg-plot-area plot-area miplots-scatterplot-plot-area").call(f).call(p);
+      const a = s.enter();
+      a && !this.svgLayerElement && (a.style("grid-template-columns", "0 auto 1fr auto 0"), a.style("grid-template-rows", "0 auto 1fr auto 0"), this.svgLayerElement = a.select(".svg-plot-area.plot-area svg").node()), a.select(".svg-plot-area.plot-area").attr("class", "svg-plot-area plot-area miplots-scatterplot-plot-area").call(n).call(f);
     });
     this.tools = {
-      webglChart: v,
-      zoom: f,
-      fillColor: g,
-      pointSeries: a
-    }, N(this.canvasNode).datum(e).style("position", "absolute").style("width", this.chartSizes.chartWidth + "px").style("height", this.chartSizes.chartHeight + "px").style("top", this.margins.top + "px").style("left", this.margins.left + "px");
+      webglChart: p,
+      zoom: n,
+      fillColor: r,
+      pointSeries: g
+    }, N(this.canvasNode).datum(t).style("position", "absolute").style("width", this.chartSizes.chartWidth + "px").style("height", this.chartSizes.chartHeight + "px").style("top", this.margins.top + "px").style("left", this.margins.left + "px");
   }
-  updateAes(t, e, i) {
-    this.tools !== null && (this.aesGetters = U(t, e, i), this.tools.fillColor.value((r) => {
-      const o = this.aesGetters.dotFill ?? O, l = M(o(r.idx));
-      return l[3] = !r.dimmed && E(r.x, r.y, this.polygons) ? 1 : 0.4, P(l, l);
+  updateAes(t, e) {
+    this.tools !== null && (this.aesGetters = U(this.dataFrame, t, e), this.tools.fillColor.value((i) => {
+      const l = this.aesGetters.dotFill ?? O, o = M(l(i.idx));
+      return o[3] = !i.dimmed && E(i.x, i.y, this.polygons) ? 1 : 0.4, P(o, o);
     }));
   }
   updatePointSize() {
@@ -266,8 +268,8 @@ class oe {
   updateByLasso() {
     var t;
     this.tools !== null && ((t = this.tools) == null || t.fillColor.value((e) => {
-      const i = this.aesGetters.dotFill ?? O, r = M(i(e.idx));
-      return r[3] = !e.dimmed && E(e.x, e.y, this.polygons) ? 1 : 0.4, P(r, r);
+      const i = this.aesGetters.dotFill ?? O, l = M(i(e.idx));
+      return l[3] = !e.dimmed && E(e.x, e.y, this.polygons) ? 1 : 0.4, P(l, l);
     }), this.renderWebglLayer());
   }
   createQuadtree(t) {
@@ -277,51 +279,50 @@ class oe {
     return e.finish();
   }
   getClosestDot(t, e) {
-    var a, f;
-    const i = (a = this.tools) == null ? void 0 : a.qt;
+    var n, f;
+    const i = (n = this.tools) == null ? void 0 : n.qt;
     if (!i) return null;
-    const r = this.allDots, o = this.scales.x.invert(t), l = this.scales.y.invert(e), m = 1 / (((f = this.zoomTransform) == null ? void 0 : f.k) || 1), u = o - m, S = o + m, x = l - m, d = l + m, h = i.range(u, x, S, d), g = h.reduce((p, v) => {
-      const s = r[v], n = this.scales.x(s.x) - t, C = this.scales.y(s.y) - e, z = Math.hypot(n, C);
-      return (p === null || z < p.distance) && (p.index = v, p.distance = z), p;
+    const l = this.allDots, o = this.scales.x.invert(t), c = this.scales.y.invert(e), m = 1 / (((f = this.zoomTransform) == null ? void 0 : f.k) || 1), u = o - m, S = o + m, x = c - m, d = c + m, r = i.range(u, x, S, d), g = r.reduce((p, s) => {
+      const a = l[s], v = this.scales.x(a.x) - t, z = this.scales.y(a.y) - e, T = Math.hypot(v, z);
+      return (p === null || T < p.distance) && (p.index = s, p.distance = T), p;
     }, {
       index: -1,
       distance: 1 / 0
     });
-    return h.length === 0 || g.index === -1 ? null : r[g.index];
+    return r.length === 0 || g.index === -1 ? null : l[g.index];
   }
   updateDots(t) {
     this.tools !== null && (N(this.canvasNode).datum(t), this.tools.fillColor.data(t), this.tools.qt = this.createQuadtree(t), this.allDots = t);
   }
-  render(t, e, i, r, o, l, m, u, S, x, d, h, g) {
-    if (this.tools === null)
+  render(t, e, i, l, o, c, m, u, S, x, d, r, g) {
+    if (this.dataFrame = t, this.tools === null)
       this.initSettings(
-        t,
         o,
         i,
-        l,
+        c,
         S,
         u,
         x
       );
     else {
-      const { title: a, legend: f, size: p } = i;
-      this.updateChartSizes(p), this.updateLegendSize(f, S, x, u), this.createMainTitle(a), this.updateMargins(), this.updateAes(t, S, u);
+      const { title: n, legend: f, size: p } = i;
+      this.updateChartSizes(p), this.updateLegendSize(f, S, x, u), this.createMainTitle(n), this.updateMargins(), this.updateAes(S, u);
     }
-    this.onPolygonUpdateOutside = d, this.onTooltipHintSwitch = h, this.onLassoControlsStateUpdate = g, this.allDots !== o && (this.updateDots(o), this.visibleLabels = this.computeLabels(o)), this.notCalculatedProps = {
+    this.onPolygonUpdateOutside = d, this.onTooltipHintSwitch = r, this.onLassoControlsStateUpdate = g, this.allDots !== o && (this.updateDots(o), this.visibleLabels = this.computeLabels(o)), this.notCalculatedProps = {
       settingsId: e,
       chartSettings: i,
-      keyColumn: r,
+      keyColumn: l,
       dotsByGrouping: m,
       layers: u
-    }, this.renderWebglLayer(), this.renderSvgLayer(t);
+    }, this.renderWebglLayer(), this.renderSvgLayer();
   }
   renderWebglLayer() {
     var t, e;
     (t = this.tools) != null && t.webglChart && N(this.canvasNode).call((e = this.tools) == null ? void 0 : e.webglChart);
   }
-  renderSvgLayer(t) {
-    var i;
-    const e = {
+  renderSvgLayer() {
+    var e;
+    const t = {
       settingsId: this.notCalculatedProps.settingsId,
       chartSettings: this.notCalculatedProps.chartSettings,
       keyColumn: this.notCalculatedProps.keyColumn,
@@ -343,32 +344,32 @@ class oe {
       onTooltipHintSwitch: this.onTooltipHintSwitch,
       onLassoControlsStateUpdate: this.onLassoControlsStateUpdate
     };
-    this.svgLayerComponent = /* @__PURE__ */ b.jsx(ct, { dataFrame: t, children: /* @__PURE__ */ b.jsx(nt, { ...e }) }), (i = this.reactRoot) == null || i.render(this.svgLayerComponent);
+    this.svgLayerComponent = /* @__PURE__ */ b.jsx(ct, { dataFrame: this.dataFrame, children: /* @__PURE__ */ b.jsx(nt, { ...t }) }), (e = this.reactRoot) == null || e.render(this.svgLayerComponent);
   }
   renderError(t) {
     var e;
     (e = this.reactRoot) == null || e.render(/* @__PURE__ */ b.jsx(J, { message: t }));
   }
   computeLabels(t) {
-    const e = new F("16px Manrope"), i = st(this.chartSizes.chartWidth, this.chartSizes.chartHeight), r = [];
+    const e = new A("16px Manrope"), i = st(this.chartSizes.chartWidth, this.chartSizes.chartHeight), l = [];
     for (let o = 0; o < t.length; o++) {
-      const l = t[o];
-      if (l.label == null)
+      const c = t[o];
+      if (c.label == null)
         continue;
-      const m = String(l.label), u = e.getTextMetrics(m), S = this.scales.x(l.x), x = this.scales.y(l.y), d = u.width, h = u.actualBoundingBoxAscent + u.actualBoundingBoxDescent, g = 10, a = i(S, x, d, h, g);
-      a && r.push({
+      const m = String(c.label), u = e.getTextMetrics(m), S = this.scales.x(c.x), x = this.scales.y(c.y), d = u.width, r = u.actualBoundingBoxAscent + u.actualBoundingBoxDescent, g = 10, n = i(S, x, d, r, g);
+      n && l.push({
         x: S,
         y: x,
-        dot: l,
+        dot: c,
         name: m,
         width: d,
-        height: h,
+        height: r,
         padding: g,
-        xPosition: a[0],
-        yPosition: a[1]
+        xPosition: n[0],
+        yPosition: n[1]
       });
     }
-    return r;
+    return l;
   }
   updateLabelsPosition(t) {
     for (let e = 0; e < t.length; e++) {
@@ -378,6 +379,6 @@ class oe {
   }
 }
 export {
-  oe as default
+  ne as default
 };
 //# sourceMappingURL=ChartRenderer.js.map