@milaboratories/miplots4 1.0.170 → 1.0.172

package/dist/scatterplot-umap/ChartRenderer.js

@@ -1,61 +1,61 @@
-var k = Object.defineProperty;
-var X = (y, t, e) => t in y ? k(y, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : y[t] = e;
+var B = Object.defineProperty;
+var X = (y, t, e) => t in y ? B(y, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : y[t] = e;
 var h = (y, t, e) => X(y, typeof t != "symbol" ? t + "" : t, e);
 import { j as N } from "../_virtual/jsx-runtime.js";
 import K from "../node_modules/.pnpm/@d3fc_d3fc-chart@5.1.9_d3-array@3.2.4_d3-path@3.1.0_d3-scale-chromatic@3.1.0_d3-scale@4.0.2_d_kyhwsugamw24x7v3obvyiw5jfe/node_modules/@d3fc/d3fc-chart/src/cartesian.js";
-import { seriesWebglPoint as Y, seriesSvgMulti as j, seriesWebglMulti as q } from "@d3fc/d3fc-series";
+import { seriesWebglPoint as Y, seriesSvgMulti as k, seriesWebglMulti as j } from "@d3fc/d3fc-series";
 import $ from "../node_modules/.pnpm/d3-zoom@3.0.0/node_modules/d3-zoom/src/zoom.js";
-import { identity as Q } from "../node_modules/.pnpm/d3-zoom@3.0.0/node_modules/d3-zoom/src/transform.js";
-import { c as Z } from "../_virtual/client.js";
-import { Error as J } from "../common/Error.js";
-import { BLACK as A, DEFAULT_HEIGHT as E, DEFAULT_WIDTH as w, TITLE_LINE_HEIGHT as tt, MIN_LEGEND_GRADIENT_HEIGHT as et, MAX_LEGEND_GRADIENT_HEIGHT as it, MAX_SHOWN_UNIQUE_VALUES_IN_LABELS as st, TITLE_MARGIN as ot } from "../constants.js";
-import { splitTextByWidth as at } from "../utils/splitTextByWidth.js";
-import { MIN_MARGIN as T, DEFAULT_DOT_AES as G } from "../scatterplot/constants.js";
+import { identity as q } from "../node_modules/.pnpm/d3-zoom@3.0.0/node_modules/d3-zoom/src/transform.js";
+import { c as Q } from "../_virtual/client.js";
+import { Error as Z } from "../common/Error.js";
+import { BLACK as F, DEFAULT_HEIGHT as E, DEFAULT_WIDTH as w, TITLE_LINE_HEIGHT as J, MIN_LEGEND_GRADIENT_HEIGHT as tt, MAX_LEGEND_GRADIENT_HEIGHT as et, MAX_SHOWN_UNIQUE_VALUES_IN_LABELS as it, TITLE_MARGIN as st } from "../constants.js";
+import { splitTextByWidth as ot } from "../utils/splitTextByWidth.js";
+import { MIN_MARGIN as v, DEFAULT_DOT_AES as G } from "../scatterplot/constants.js";
 import { createAesGetter as H } from "../scatterplot/utils/createAesGetter.js";
-import { getTicksAndFormat as nt } from "../scatterplot/utils/getTicksAndFormat.js";
-import { createLabelPositioner as rt } from "../scatterplot/utils/getVisibleLabels.js";
-import { isContinuousAes as R } from "../types/common.js";
+import { getTicksAndFormat as at } from "../scatterplot/utils/getTicksAndFormat.js";
+import { createLabelPositioner as nt } from "../scatterplot/utils/getVisibleLabels.js";
+import { isContinuousAes as A } from "../types/common.js";
 import "../types/discrete.js";
 import "../types/scatterplot.js";
 import "../types/heatmap.js";
 import "../types/dendro.js";
 import "../types/histogram.js";
 import "../types/bubble.js";
-import { getContinuousColorScale as lt } from "../utils/getContinuousColorScale.js";
-import { getContinuousLegendTicks as ht } from "../utils/getContinuousLegendTicks.js";
-import { TextMeasurer as _ } from "../utils/TextMeasurer/TextMeasurer.js";
-import { SVGLayer as ct } from "./components/SVGLayer.js";
-import { PADDINGS as D, TITLE_LINE as I, LEGEND_OFFSET as dt } from "./constants.js";
+import { getContinuousColorScale as rt } from "../utils/getContinuousColorScale.js";
+import { getContinuousLegendTicks as lt } from "../utils/getContinuousLegendTicks.js";
+import { TextMeasurer as R } from "../utils/TextMeasurer/TextMeasurer.js";
+import { SVGLayer as ht } from "./components/SVGLayer.js";
+import { PADDINGS as D, TITLE_LINE as I, LEGEND_OFFSET as ct } from "./constants.js";
 import "../node_modules/.pnpm/@d3fc_d3fc-webgl@3.2.1_d3-scale@4.0.2_d3-shape@3.2.0/node_modules/@d3fc/d3fc-webgl/src/scale/scaleMapper.js";
-import mt from "../node_modules/.pnpm/@d3fc_d3fc-webgl@3.2.1_d3-scale@4.0.2_d3-shape@3.2.0/node_modules/@d3fc/d3fc-webgl/src/style/fillColor.js";
-import pt from "../node_modules/.pnpm/@d3fc_d3fc-pointer@3.0.3_d3-dispatch@3.0.1_d3-selection@3.0.0/node_modules/@d3fc/d3fc-pointer/src/pointer.js";
-import gt from "../node_modules/.pnpm/kdbush@4.0.2/node_modules/kdbush/index.js";
-import { DataFrameProvider as ut } from "../common/useDataFrame.js";
-import { DataFrame as ft } from "../DataFrame.js";
-import { arrangeLegendParts as yt } from "../utils/arrangeLegendParts.js";
-import { stringToNumberRgba as W, getColorWithFakeOpacity as P, GET_BLACK as U } from "./colors.js";
-import b from "../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/linear.js";
-import O from "../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/log.js";
-import C from "../node_modules/.pnpm/d3-selection@3.0.0/node_modules/d3-selection/src/select.js";
+import dt from "../node_modules/.pnpm/@d3fc_d3fc-webgl@3.2.1_d3-scale@4.0.2_d3-shape@3.2.0/node_modules/@d3fc/d3fc-webgl/src/style/fillColor.js";
+import mt from "../node_modules/.pnpm/@d3fc_d3fc-pointer@3.0.3_d3-dispatch@3.0.1_d3-selection@3.0.0/node_modules/@d3fc/d3fc-pointer/src/pointer.js";
+import pt from "../node_modules/.pnpm/kdbush@4.0.2/node_modules/kdbush/index.js";
+import { DataFrameProvider as gt } from "../common/useDataFrame.js";
+import { DataFrame as ut } from "../DataFrame.js";
+import { arrangeLegendParts as ft } from "../utils/arrangeLegendParts.js";
+import { stringToNumberRgba as W, getColorWithFakeOpacity as P, GET_BLACK as _ } from "./colors.js";
+import { getSizeLegendItem as yt } from "../utils/getSizeLegendItem.js";
+import C from "../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/linear.js";
+import U from "../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/log.js";
+import b from "../node_modules/.pnpm/d3-selection@3.0.0/node_modules/d3-selection/src/select.js";
 import St 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 { sqrt as zt } from "../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/pow.js";
-import vt from "../node_modules/.pnpm/d3-polygon@3.0.1/node_modules/d3-polygon/src/contains.js";
-function V(y) {
+import zt from "../node_modules/.pnpm/d3-polygon@3.0.1/node_modules/d3-polygon/src/contains.js";
+function O(y) {
   return y / 2.35 * (y / 2.35) * 64;
 }
 function M(y, t, e) {
-  return e.length === 0 ? !0 : e.some((i) => i.closed && i.points.length > 2 && vt(i.points, [y, t]));
+  return e.length === 0 ? !0 : e.some((i) => i.closed && i.points.length > 2 && zt(i.points, [y, t]));
 }
-function B(y, t, e) {
-  const i = e.find((o) => o.type === "dots"), r = e.find((o) => o.type === "curve");
+function V(y, t, e) {
+  const i = e.find((o) => o.type === "dots"), a = 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")
+    lineType: H(y, t, (a == null ? void 0 : a.aes.lineShape) ?? "solid", "lineShape")
   };
 }
-class he {
+class le {
   constructor() {
     h(this, "reactRoot", null);
     h(this, "parentNode", null);
@@ -65,15 +65,15 @@ class he {
     h(this, "svgLayerComponent", /* @__PURE__ */ N.jsx(N.Fragment, {}));
     h(this, "aesGetters", {
       dotSize: () => 2,
-      dotFill: () => A,
+      dotFill: () => F,
       lineType: () => "solid"
     });
     h(this, "tools", null);
     h(this, "margins", {
-      top: T,
-      bottom: T,
-      left: T,
-      right: T
+      top: v,
+      bottom: v,
+      left: v,
+      right: v
     });
     h(this, "chartSizes", {
       chartWidth: w,
@@ -86,10 +86,10 @@ class he {
       // width of all charts in charts height, plus bottom axis, plus top title
     });
     h(this, "scales", {
-      x: b().domain([0, 10]).range([0, w]),
-      y: b().domain([0, 10]).range([E, 0]),
-      xOriginal: b().domain([0, 10]).range([0, w]),
-      yOriginal: b().domain([0, 10]).range([E, 0])
+      x: C().domain([0, 10]).range([0, w]),
+      y: C().domain([0, 10]).range([E, 0]),
+      xOriginal: C().domain([0, 10]).range([0, w]),
+      yOriginal: C().domain([0, 10]).range([E, 0])
     });
     h(this, "polygons", []);
     h(this, "onPolygonUpdateOutside", () => {
@@ -111,7 +111,7 @@ class he {
     h(this, "notCalculatedProps", {});
     h(this, "allDots", []);
     h(this, "visibleLabels", []);
-    h(this, "dataFrame", new ft("", {}));
+    h(this, "dataFrame", new ut("", {}));
     h(this, "onPolygonUpdate", (t) => {
       this.polygons = t, this.updateByLasso();
       const e = this.allDots.filter((i) => M(i.x, i.y, this.polygons)).map((i) => i.idx);
@@ -126,211 +126,208 @@ class he {
     });
   }
   init(t) {
-    this.parentNode === null && (this.parentNode = t, this.rootNode = document.createElement("div"), this.canvasNode = document.createElement("div"), this.parentNode.appendChild(this.rootNode), this.parentNode.appendChild(this.canvasNode), this.reactRoot = Z.createRoot(this.rootNode));
+    this.parentNode === null && (this.parentNode = t, this.rootNode = document.createElement("div"), this.canvasNode = document.createElement("div"), this.parentNode.appendChild(this.rootNode), this.parentNode.appendChild(this.canvasNode), this.reactRoot = Q.createRoot(this.rootNode));
   }
   updateChartSizes(t) {
     (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" ? O() : b();
-    let { minX: o, minY: c, maxX: m, maxY: p } = 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 && (p = Math.min(p, e.upperValue)), t.symmetricRange !== void 0) {
-      const n = t.symmetricRange;
-      if (n >= o && n <= m) {
-        const u = Math.max(n - o, m - n);
-        o = n - u, m = n + u;
+    const a = t.scale === "log" ? U() : C();
+    let { minX: o, minY: d, maxX: m, maxY: p } = 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 && (d = Math.max(d, e.lowerValue)), e.upperValue !== void 0 && (p = Math.min(p, e.upperValue)), t.symmetricRange !== void 0) {
+      const r = t.symmetricRange;
+      if (r >= o && r <= m) {
+        const g = Math.max(r - o, m - r);
+        o = r - g, m = r + g;
       }
     }
     if (typeof e.symmetricRange < "u") {
-      const n = e.symmetricRange;
-      if (n >= c && n <= p) {
-        const u = Math.max(n - c, p - n);
-        c = n - u, p = n + u;
+      const r = e.symmetricRange;
+      if (r >= d && r <= p) {
+        const g = Math.max(r - d, p - r);
+        d = r - g, p = r + g;
       }
     }
-    const f = [0, this.chartSizes.chartWidth], z = r.copy().domain([o, m]).range([D.LEFT, this.chartSizes.chartWidth - D.RIGHT]);
-    r.domain([z.invert(0), z.invert(this.chartSizes.chartWidth)]).range(f).nice(), this.scales.x.domain(r.domain()), this.scales.xOriginal.domain(r.domain());
-    const S = e.scale === "log" ? O() : b(), d = [this.chartSizes.chartHeight, 0], a = S.copy().domain([c, p]).range([this.chartSizes.chartHeight - D.BOTTOM, D.TOP]);
-    S.domain([a.invert(this.chartSizes.chartHeight), a.invert(0)]).range(d).nice(), this.scales.y.domain(S.domain()), this.scales.yOriginal.domain(S.domain());
+    const f = [0, this.chartSizes.chartWidth], x = a.copy().domain([o, m]).range([D.LEFT, this.chartSizes.chartWidth - D.RIGHT]);
+    a.domain([x.invert(0), x.invert(this.chartSizes.chartWidth)]).range(f).nice(), this.scales.x.domain(a.domain()), this.scales.xOriginal.domain(a.domain());
+    const S = e.scale === "log" ? U() : C(), c = [this.chartSizes.chartHeight, 0], n = S.copy().domain([d, p]).range([this.chartSizes.chartHeight - D.BOTTOM, D.TOP]);
+    S.domain([n.invert(this.chartSizes.chartHeight), n.invert(0)]).range(c).nice(), this.scales.y.domain(S.domain()), this.scales.yOriginal.domain(S.domain());
   }
   updateCaptionsSize() {
-    const t = new _("600 14px Arial");
-    function e(c) {
-      return Math.max(...c.map((m) => t.getTextWidth(m)));
+    const t = new R("600 14px Arial");
+    function e(d) {
+      return Math.max(...d.map((m) => t.getTextWidth(m)));
     }
-    const { ticks: i, format: r } = nt(this.scales.y, !1), o = e(i.map(r));
+    const { ticks: i, format: a } = at(this.scales.y, !1), o = e(i.map(a));
     this.captionsSizes = {
       xAxisCaptionsWidth: 20,
       yAxisCaptionsWidth: o
     };
   }
   createMainTitle(t) {
-    this.mainTitle = at(
+    this.mainTitle = ot(
       t.name,
       this.chartSizes.totalWidth - this.margins.left - this.margins.right,
       20
     );
   }
   updateMargins(t, e) {
-    const i = tt * this.mainTitle.length, r = i > 0 ? i + ot * 2 : 0;
+    const i = J * this.mainTitle.length, a = i > 0 ? i + st * 2 : 0;
     this.margins = {
-      top: Math.max(r, T),
-      bottom: T + (t.hiddenLabels ? 0 : this.captionsSizes.xAxisCaptionsWidth) + I,
-      left: T + (e.hiddenLabels ? 0 : this.captionsSizes.yAxisCaptionsWidth) + I,
-      right: this.legend.width + T
-    }, 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, C(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");
+      top: Math.max(a, v),
+      bottom: v + (t.hiddenLabels ? 0 : this.captionsSizes.xAxisCaptionsWidth) + I,
+      left: v + (e.hiddenLabels ? 0 : this.captionsSizes.yAxisCaptionsWidth) + I,
+      right: this.legend.width + v
+    }, 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, b(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, a) {
     if (!t.show) {
       this.legend = { width: 0, height: 0, items: [] };
       return;
     }
-    const o = [], c = { width: 0, height: 0, left: 0, top: 0 }, m = Math.min(
-      Math.max(this.chartSizes.chartHeight, et),
-      it
+    const o = [], d = { width: 0, height: 0, left: 0, top: 0 }, m = Math.min(
+      Math.max(this.chartSizes.chartHeight, tt),
+      et
     ), p = Math.max(this.chartSizes.chartHeight, m);
-    if (i.forEach((d) => {
-      const a = e[d.value];
-      if (a.usedAes.length === 0 || !a.aesMap)
+    if (i.forEach((c) => {
+      const n = e[c.value];
+      if (n.usedAes.length === 0 || !n.aesMap)
         return;
-      if (a.values.length > st) {
-        console.warn(`Too many values for discrete legend (${a.values.length})`);
+      if (n.values.length > it) {
+        console.warn(`Too many values for discrete legend (${n.values.length})`);
         return;
       }
-      const n = {};
-      a.values.forEach((g) => {
-        n[g] || (n[g] = { ...G }), a.usedAes.forEach((s) => {
-          s === "dotFill" && (n[g].color = a.aesMap(g, s) ?? A), s === "dotSize" && (n[g].size = Number(a.aesMap(g, s) ?? 3));
+      const r = {};
+      n.values.forEach((u) => {
+        r[u] || (r[u] = { ...G }), n.usedAes.forEach((s) => {
+          s === "dotFill" && (r[u].color = n.aesMap(u, s) ?? F), s === "dotSize" && (r[u].size = Number(n.aesMap(u, s) ?? 3));
         });
       });
-      const u = d.label ?? d.value, x = St().domain(a.values).range(a.values.map((g) => n[g]));
-      o.push({ ...c, id: d.value, type: "dots", title: u, scale: x, values: a.values, labels: a.labels });
-    }), r.forEach((d) => {
-      if (d.type === "dots" && R(d.aes.dotFill)) {
-        const { domain: a, range: n, columnName: u, type: x = "linear" } = d.aes.dotFill, g = u.label ?? u.value, s = lt(n, a, "linear"), l = (x === "log" ? xt() : b()).domain(a).range([m, 0]), L = ht(l, a);
-        o.push({ ...c, id: "dotFill", type: "continuous", title: g, scale: s, tickPositionScale: l, values: L });
-      }
-      if (d.type === "dots" && R(d.aes.dotSize)) {
-        const { columnName: a, domain: n, range: u } = d.aes.dotSize, x = a.label ?? a.value, g = zt(n, u), s = g.ticks(3), l = g.tickFormat(3), L = s.reduce((v, F) => (v[String(F)] = l(F), v), {});
-        o.push({ ...c, id: a.value, type: "size", title: x, scale: g, values: s, labels: L });
+      const g = c.label ?? c.value, z = St().domain(n.values).range(n.values.map((u) => r[u]));
+      o.push({ ...d, id: c.value, type: "dots", title: g, scale: z, values: n.values, labels: n.labels });
+    }), a.forEach((c) => {
+      if (c.type === "dots" && A(c.aes.dotFill)) {
+        const { domain: n, range: r, columnName: g, type: z = "linear" } = c.aes.dotFill, u = g.label ?? g.value, s = rt(r, n, "linear"), l = (z === "log" ? xt() : C()).domain(n).range([m, 0]), L = lt(l, n);
+        o.push({ ...d, id: "dotFill", type: "continuous", title: u, scale: s, tickPositionScale: l, values: L });
       }
+      c.type === "dots" && A(c.aes.dotSize) && o.push(yt(c.aes.dotSize));
     }), !o.length) {
       this.legend = { width: 0, height: 0, items: [] };
       return;
     }
-    const f = yt(o, p, m), S = f.reduce((d, a) => Math.max(d, a.left + a.width), 0) + dt;
+    const f = ft(o, p, m), S = f.reduce((c, n) => Math.max(c, n.left + n.width), 0) + ct;
     this.legend = {
       width: S,
       height: p,
       items: f
     };
   }
-  initSettings(t, e, i, r, o, c, m) {
-    const { xAxis: p, yAxis: f, size: z, title: S, legend: d } = e;
-    this.updateChartSizes(z), this.updateViewport(p, f, i), this.updateCaptionsSize(), this.updateLegendSize(d, r, c, o), this.createMainTitle(S), this.updateMargins(p, f), this.aesGetters = B(this.dataFrame, r, o);
-    const a = mt().data(t).value((s) => {
+  initSettings(t, e, i, a, o, d, m) {
+    const { xAxis: p, yAxis: f, size: x, title: S, legend: c } = e;
+    this.updateChartSizes(x), this.updateViewport(p, f, i), this.updateCaptionsSize(), this.updateLegendSize(c, a, d, o), this.createMainTitle(S), this.updateMargins(p, f), this.aesGetters = V(this.dataFrame, a, o);
+    const n = dt().data(t).value((s) => {
       const l = W(this.aesGetters.dotFill(s.idx));
       return l[3] = !s.dimmed && M(s.x, s.y, this.polygons) ? 1 : 0.4, P(l, l);
-    }), n = Y().equals((s, l) => s === l).size((s) => V(this.aesGetters.dotSize(s.idx))).crossValue((s) => s.x).mainValue((s) => s.y).decorate((s) => a(s)), u = $().scaleExtent([0.1, 1e3]).filter((s) => s.type === "wheel" || s.metaKey || s.ctrlKey).on("start", () => {
+    }), r = Y().equals((s, l) => s === l).size((s) => O(this.aesGetters.dotSize(s.idx))).crossValue((s) => s.x).mainValue((s) => s.y).decorate((s) => n(s)), g = $().scaleExtent([0.1, 1e3]).filter((s) => s.type === "wheel" || s.metaKey || s.ctrlKey).on("start", () => {
       this.selectedDot = null;
     }).on("zoom", (s) => {
-      const l = s.transform, L = l.rescaleX(this.scales.xOriginal), v = l.rescaleY(this.scales.yOriginal);
-      this.scales.x.domain(L.domain()), this.scales.y.domain(v.domain()), this.zoomTransform = l, this.zoomStateKey = `${l.x}_${l.y}_${l.k}`, this.updateLabelsPosition(this.visibleLabels), this.renderSvgLayer(), this.renderWebglLayer();
+      const l = s.transform, L = l.rescaleX(this.scales.xOriginal), T = l.rescaleY(this.scales.yOriginal);
+      this.scales.x.domain(L.domain()), this.scales.y.domain(T.domain()), this.zoomTransform = l, this.zoomStateKey = `${l.x}_${l.y}_${l.k}`, this.updateLabelsPosition(this.visibleLabels), this.renderSvgLayer(), this.renderWebglLayer();
     }).on("end", () => {
       this.visibleLabels = this.computeLabels(this.allDots), this.renderSvgLayer(), m(!0);
-    }), x = pt().on("point", ([s]) => {
-      var v;
+    }), z = mt().on("point", ([s]) => {
+      var T;
       let l;
       s && (l = this.getClosestDot(s.x, s.y));
-      const L = this.selectedDot && !l || !this.selectedDot && l || ((v = this.selectedDot) == null ? void 0 : v.idx) !== (l == null ? void 0 : l.idx);
+      const L = this.selectedDot && !l || !this.selectedDot && l || ((T = this.selectedDot) == null ? void 0 : T.idx) !== (l == null ? void 0 : l.idx);
       this.selectedDot = l ?? null, L && this.renderSvgLayer();
-    }), g = K({
+    }), u = K({
       xScale: this.scales.x,
       yScale: this.scales.y
-    }).xAxisHeight(() => "0").yAxisWidth(() => "0").svgPlotArea(j()).webglPlotArea(
+    }).xAxisHeight(() => "0").yAxisWidth(() => "0").svgPlotArea(k()).webglPlotArea(
       // only render the point series on the WebGL layer
-      q().series([n]).mapping((s) => s)
+      j().series([r]).mapping((s) => s)
     ).decorate((s) => {
       const l = s.enter();
-      l && !this.svgLayerElement && (l.style("grid-template-columns", "0 auto 1fr auto 0"), l.style("grid-template-rows", "0 auto 1fr auto 0"), this.svgLayerElement = l.select(".svg-plot-area.plot-area svg").node()), l.select(".svg-plot-area.plot-area").attr("class", "svg-plot-area plot-area miplots-scatterplot-plot-area").call(u).call(x);
+      l && !this.svgLayerElement && (l.style("grid-template-columns", "0 auto 1fr auto 0"), l.style("grid-template-rows", "0 auto 1fr auto 0"), this.svgLayerElement = l.select(".svg-plot-area.plot-area svg").node()), l.select(".svg-plot-area.plot-area").attr("class", "svg-plot-area plot-area miplots-scatterplot-plot-area").call(g).call(z);
     });
     this.tools = {
-      webglChart: g,
-      zoom: u,
-      fillColor: a,
-      pointSeries: n
-    }, C(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"), this.onPolygonUpdate(this.polygons);
+      webglChart: u,
+      zoom: g,
+      fillColor: n,
+      pointSeries: r
+    }, b(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"), this.onPolygonUpdate(this.polygons);
   }
   resetZoom(t, e, i) {
-    var r;
-    !((r = this.tools) != null && r.zoom) || !i || (this.updateViewport(t, e, i), C(".miplots-scatterplot-plot-area").call(this.tools.zoom.transform, Q));
+    var a;
+    !((a = this.tools) != null && a.zoom) || !i || (this.updateViewport(t, e, i), b(".miplots-scatterplot-plot-area").call(this.tools.zoom.transform, q));
   }
   updateAes(t, e) {
-    this.tools !== null && (this.aesGetters = B(this.dataFrame, t, e), this.tools.fillColor.value((i) => {
-      const r = this.aesGetters.dotFill ?? U, o = W(r(i.idx));
+    this.tools !== null && (this.aesGetters = V(this.dataFrame, t, e), this.tools.fillColor.value((i) => {
+      const a = this.aesGetters.dotFill ?? _, o = W(a(i.idx));
       return o[3] = !i.dimmed && M(i.x, i.y, this.polygons) ? 1 : 0.4, P(o, o);
     }));
   }
   updatePointSize(t, e) {
-    this.tools !== null && (this.updateAes(t, e), C(this.canvasNode).datum([...this.allDots]), this.tools.pointSeries.size((i) => V(this.aesGetters.dotSize(i.idx))));
+    this.tools !== null && (this.updateAes(t, e), b(this.canvasNode).datum([...this.allDots]), this.tools.pointSeries.size((i) => O(this.aesGetters.dotSize(i.idx))));
   }
   updateByLasso() {
     var t;
     this.tools !== null && ((t = this.tools) == null || t.fillColor.value((e) => {
-      const i = this.aesGetters.dotFill ?? U, r = W(i(e.idx));
-      return r[3] = !e.dimmed && M(e.x, e.y, this.polygons) ? 1 : 0.4, P(r, r);
+      const i = this.aesGetters.dotFill ?? _, a = W(i(e.idx));
+      return a[3] = !e.dimmed && M(e.x, e.y, this.polygons) ? 1 : 0.4, P(a, a);
     }), this.renderWebglLayer());
   }
   createQuadtree(t) {
-    const e = new gt(t.length, 512);
+    const e = new pt(t.length, 512);
     for (let i = 0; i < t.length; i++)
       e.add(t[i].x, t[i].y);
     return e.finish();
   }
   getClosestDot(t, e) {
-    var n, u;
-    const i = (n = this.tools) == null ? void 0 : n.qt;
+    var r, g;
+    const i = (r = this.tools) == null ? void 0 : r.qt;
     if (!i) return null;
-    const r = this.allDots, o = this.scales.x.invert(t), c = this.scales.y.invert(e), m = 1 / (((u = this.zoomTransform) == null ? void 0 : u.k) || 1), p = o - m, f = o + m, z = c - m, S = c + m, d = i.range(p, z, f, S), a = d.reduce((x, g) => {
-      const s = r[g], l = this.scales.x(s.x) - t, L = this.scales.y(s.y) - e, v = Math.hypot(l, L);
-      return (x === null || v < x.distance) && (x.index = g, x.distance = v), x;
+    const a = this.allDots, o = this.scales.x.invert(t), d = this.scales.y.invert(e), m = 1 / (((g = this.zoomTransform) == null ? void 0 : g.k) || 1), p = o - m, f = o + m, x = d - m, S = d + m, c = i.range(p, x, f, S), n = c.reduce((z, u) => {
+      const s = a[u], l = this.scales.x(s.x) - t, L = this.scales.y(s.y) - e, T = Math.hypot(l, L);
+      return (z === null || T < z.distance) && (z.index = u, z.distance = T), z;
     }, {
       index: -1,
       distance: 1 / 0
     });
-    return d.length === 0 || a.index === -1 ? null : r[a.index];
+    return c.length === 0 || n.index === -1 ? null : a[n.index];
   }
   updateDots(t) {
-    this.tools !== null && (C(this.canvasNode).datum(t), this.tools.fillColor.data(t), this.tools.qt = this.createQuadtree(t), this.allDots = t);
+    this.tools !== null && (b(this.canvasNode).datum(t), this.tools.fillColor.data(t), this.tools.qt = this.createQuadtree(t), this.allDots = t);
   }
-  render(t, e, i, r, o, c, m, p, f, z, S, d, a, n) {
+  render(t, e, i, a, o, d, m, p, f, x, S, c, n, r) {
     this.dataFrame = t;
-    const u = i.size.width !== this.chartSizes.chartWidth || i.size.height !== this.chartSizes.chartHeight;
+    const g = i.size.width !== this.chartSizes.chartWidth || i.size.height !== this.chartSizes.chartHeight;
     if (this.tools === null)
       this.initSettings(
         o,
         i,
-        c,
+        d,
         f,
         p,
-        z,
-        n
+        x,
+        r
       );
     else {
-      const { title: x, legend: g, size: s } = i;
-      this.updateChartSizes(s), this.updateLegendSize(g, f, z, p), this.createMainTitle(x), this.updateMargins(i.xAxis, i.yAxis), this.updateAes(f, p);
+      const { title: z, legend: u, size: s } = i;
+      this.updateChartSizes(s), this.updateLegendSize(u, f, x, p), this.createMainTitle(z), this.updateMargins(i.xAxis, i.yAxis), this.updateAes(f, p);
     }
-    this.onPolygonUpdateOutside = S, this.onTooltipHintSwitch = d, this.onLassoControlsStateUpdate = a, this.allDots !== o ? (this.updateDots(o), this.visibleLabels = this.computeLabels(o), this.onPolygonUpdate(this.polygons)) : u && (this.visibleLabels = this.computeLabels(o)), this.notCalculatedProps = {
+    this.onPolygonUpdateOutside = S, this.onTooltipHintSwitch = c, this.onLassoControlsStateUpdate = n, this.allDots !== o ? (this.updateDots(o), this.visibleLabels = this.computeLabels(o), this.onPolygonUpdate(this.polygons)) : g && (this.visibleLabels = this.computeLabels(o)), this.notCalculatedProps = {
       settingsId: e,
       chartSettings: i,
-      keyColumn: r,
+      keyColumn: a,
       dotsByGrouping: m,
       layers: p
     }, this.renderWebglLayer(), this.renderSvgLayer();
   }
   renderWebglLayer() {
     var t, e;
-    (t = this.tools) != null && t.webglChart && C(this.canvasNode).call((e = this.tools) == null ? void 0 : e.webglChart);
+    (t = this.tools) != null && t.webglChart && b(this.canvasNode).call((e = this.tools) == null ? void 0 : e.webglChart);
   }
   renderSvgLayer() {
     var e;
@@ -356,32 +353,32 @@ class he {
       onTooltipHintSwitch: this.onTooltipHintSwitch,
       onLassoControlsStateUpdate: this.onLassoControlsStateUpdate
     };
-    this.svgLayerComponent = /* @__PURE__ */ N.jsx(ut, { dataFrame: this.dataFrame, children: /* @__PURE__ */ N.jsx(ct, { ...t }) }), (e = this.reactRoot) == null || e.render(this.svgLayerComponent);
+    this.svgLayerComponent = /* @__PURE__ */ N.jsx(gt, { dataFrame: this.dataFrame, children: /* @__PURE__ */ N.jsx(ht, { ...t }) }), (e = this.reactRoot) == null || e.render(this.svgLayerComponent);
   }
   renderError(t) {
     var e;
-    (e = this.reactRoot) == null || e.render(/* @__PURE__ */ N.jsx(J, { message: t }));
+    (e = this.reactRoot) == null || e.render(/* @__PURE__ */ N.jsx(Z, { message: t }));
   }
   computeLabels(t) {
-    const e = new _("16px Manrope"), i = rt(this.chartSizes.chartWidth, this.chartSizes.chartHeight), r = [];
+    const e = new R("16px Manrope"), i = nt(this.chartSizes.chartWidth, this.chartSizes.chartHeight), a = [];
     for (let o = 0; o < t.length; o++) {
-      const c = t[o];
-      if (c.label == null)
+      const d = t[o];
+      if (d.label == null)
         continue;
-      const m = String(c.label), p = e.getTextMetrics(m), f = this.scales.x(c.x), z = this.scales.y(c.y), S = p.width, d = p.actualBoundingBoxAscent + p.actualBoundingBoxDescent, a = 10, n = i(f, z, S, d, a);
-      n && r.push({
+      const m = String(d.label), p = e.getTextMetrics(m), f = this.scales.x(d.x), x = this.scales.y(d.y), S = p.width, c = p.actualBoundingBoxAscent + p.actualBoundingBoxDescent, n = 10, r = i(f, x, S, c, n);
+      r && a.push({
         x: f,
-        y: z,
-        dot: c,
+        y: x,
+        dot: d,
         name: m,
         width: S,
-        height: d,
-        padding: a,
-        xPosition: n[0],
-        yPosition: n[1]
+        height: c,
+        padding: n,
+        xPosition: r[0],
+        yPosition: r[1]
       });
     }
-    return r;
+    return a;
   }
   updateLabelsPosition(t) {
     for (let e = 0; e < t.length; e++) {
@@ -391,6 +388,6 @@ class he {
   }
 }
 export {
-  he as default
+  le as default
 };
 //# sourceMappingURL=ChartRenderer.js.map