@milaboratories/miplots4 1.0.124 → 1.0.125

package/dist/scatterplot-umap/ChartRenderer.js

@@ -1,69 +1,72 @@
-var j = Object.defineProperty;
-var K = (c, t, e) => t in c ? j(c, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[t] = e;
-var a = (c, t, e) => K(c, typeof t != "symbol" ? t + "" : t, e);
+var J = Object.defineProperty;
+var Z = (n, t, e) => t in n ? J(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
+var a = (n, t, e) => Z(n, typeof t != "symbol" ? t + "" : t, e);
 import { j as E } from "../node_modules/react/jsx-runtime.js";
-import { Error as $ } from "../common/Error.js";
-import { BLACK as W, DEFAULT_HEIGHT as M, DEFAULT_WIDTH as H, TITLE_LINE_HEIGHT as Q, MAX_SHOWN_UNIQUE_VALUES_IN_LABELS as J, TITLE_MARGIN as Z } from "../constants.js";
-import { splitTextByWidth as tt } from "../discrete/utils/splitTextByWidth.js";
-import { SVGLayer as et } from "./components/SVGLayer.js";
-import { MIN_MARGIN as T, DEFAULT_DOT_AES as R } from "../scatterplot/constants.js";
-import { PADDINGS as w, TITLE_LINE as I, LEGEND_OFFSET as it } from "./constants.js";
+import { Error as tt } from "../common/Error.js";
+import { BLACK as W, DEFAULT_HEIGHT as P, DEFAULT_WIDTH as w, TITLE_LINE_HEIGHT as et, MAX_SHOWN_UNIQUE_VALUES_IN_LABELS as st, TITLE_MARGIN as it } from "../constants.js";
+import { splitTextByWidth as ot } from "../discrete/utils/splitTextByWidth.js";
+import { SVGLayer as at } from "./components/SVGLayer.js";
+import { MIN_MARGIN as C, DEFAULT_DOT_AES as R } from "../scatterplot/constants.js";
+import { PADDINGS as H, TITLE_LINE as V, LEGEND_OFFSET as rt } from "./constants.js";
 import { createAesGetter as D } from "../scatterplot/utils/createAesGetter.js";
-import { getTicksAndFormat as st } from "../scatterplot/utils/getTicksAndFormat.js";
-import { getFilteredLabels as U, updateLabelsBBoxes as ot } from "../scatterplot/utils/getVisibleLabels.js";
-import { isContinuousAes as B } from "../types/common.js";
+import { getTicksAndFormat as lt } from "../scatterplot/utils/getTicksAndFormat.js";
+import { getFilteredLabels as k, updateLabelsBBoxes as nt } from "../scatterplot/utils/getVisibleLabels.js";
+import { isContinuousAes as q } 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 at } from "../utils/getContinuousColorScale.js";
-import { getContinuousLegendTicks as rt } from "../utils/getContinuousLegendTicks.js";
-import { TextMeasurer as lt } from "../utils/TextMeasurer.js";
-import { createRoot as nt } from "../node_modules/react-dom/client.js";
-import ht from "../node_modules/d3-zoom/src/zoom.js";
+import { getContinuousColorScale as ht } from "../utils/getContinuousColorScale.js";
+import { getContinuousLegendTicks as ct } from "../utils/getContinuousLegendTicks.js";
+import { TextMeasurer as dt } from "../utils/TextMeasurer.js";
+import { createRoot as pt } from "../node_modules/react-dom/client.js";
+import mt from "../node_modules/d3-zoom/src/zoom.js";
 import "../node_modules/d3-zoom/src/transform.js";
-import ct from "../node_modules/@d3fc/d3fc-chart/src/cartesian.js";
+import gt from "../node_modules/@d3fc/d3fc-chart/src/cartesian.js";
 import "../node_modules/@d3fc/d3fc-webgl/src/scale/scaleMapper.js";
-import dt from "../node_modules/@d3fc/d3fc-webgl/src/style/fillColor.js";
-import pt from "../node_modules/@d3fc/d3fc-series/src/webgl/point.js";
-import mt from "../node_modules/@d3fc/d3fc-series/src/svg/multi.js";
-import gt from "../node_modules/@d3fc/d3fc-series/src/webgl/multi.js";
-import ut from "../node_modules/@d3fc/d3fc-pointer/src/pointer.js";
-import { arrangeLegendParts as yt } from "../utils/arrangeLegendParts.js";
-import C from "../node_modules/d3-scale/src/linear.js";
-import V from "../node_modules/d3-scale/src/log.js";
+import ut from "../node_modules/@d3fc/d3fc-webgl/src/style/fillColor.js";
+import yt from "../node_modules/@d3fc/d3fc-series/src/webgl/point.js";
+import ft from "../node_modules/@d3fc/d3fc-series/src/svg/multi.js";
+import St from "../node_modules/@d3fc/d3fc-series/src/webgl/multi.js";
+import vt from "../node_modules/@d3fc/d3fc-pointer/src/pointer.js";
+import { arrangeLegendParts as xt } from "../utils/arrangeLegendParts.js";
+import T from "../node_modules/d3-scale/src/linear.js";
+import X from "../node_modules/d3-scale/src/log.js";
 import N from "../node_modules/d3-selection/src/select.js";
-import ft from "../node_modules/d3-scale/src/ordinal.js";
-import St from "../node_modules/d3-scale/src/symlog.js";
-import { sqrt as vt } from "../node_modules/d3-scale/src/pow.js";
+import zt from "../node_modules/d3-scale/src/ordinal.js";
+import Lt from "../node_modules/d3-scale/src/symlog.js";
+import { sqrt as bt } from "../node_modules/d3-scale/src/pow.js";
 import { rgb as G } from "../node_modules/d3-color/src/color.js";
-import P from "../node_modules/d3-polygon/src/contains.js";
-import k from "../node_modules/d3-quadtree/src/quadtree.js";
-function q(c) {
-  return c / 2.35 * (c / 2.35) * 64;
+import Y from "../node_modules/d3-quadtree/src/quadtree.js";
+import Ct from "../node_modules/d3-polygon/src/contains.js";
+function K(n) {
+  return n / 2.35 * (n / 2.35) * 64;
 }
-function F(c, t) {
-  return c + (1 - c) * (1 - t);
+function O(n, t) {
+  return n + (1 - n) * (1 - t);
 }
-function A(c, t) {
+function A(n, t) {
   return [
-    F(c.r / 255, t),
-    F(c.g / 255, t),
-    F(c.b / 255, t),
+    O(n.r / 255, t),
+    O(n.g / 255, t),
+    O(n.b / 255, t),
     1
   ];
 }
-function X(c, t) {
-  const e = t.find((n) => n.type === "dots"), s = t.find((n) => n.type === "curve");
+function M(n, t, e) {
+  return e.length === 0 ? !0 : e.some((i) => i.closed && i.points.length > 2 && Ct(i.points, [n, t]));
+}
+function j(n, t) {
+  const e = t.find((h) => h.type === "dots"), i = t.find((h) => h.type === "curve");
   return {
-    dotFill: D(c, (e == null ? void 0 : e.aes.dotFill) ?? R.color, "dotFill"),
-    dotSize: D(c, (e == null ? void 0 : e.aes.dotSize) ?? R.size, "dotSize"),
-    lineType: D(c, (s == null ? void 0 : s.aes.lineShape) ?? "solid", "lineShape")
+    dotFill: D(n, (e == null ? void 0 : e.aes.dotFill) ?? R.color, "dotFill"),
+    dotSize: D(n, (e == null ? void 0 : e.aes.dotSize) ?? R.size, "dotSize"),
+    lineType: D(n, (i == null ? void 0 : i.aes.lineShape) ?? "solid", "lineShape")
   };
 }
-class le {
+class me {
   constructor() {
     a(this, "reactRoot", null);
     a(this, "parentNode", null);
@@ -78,32 +81,34 @@ class le {
     });
     a(this, "tools", null);
     a(this, "margins", {
-      top: T,
-      bottom: T,
-      left: T,
-      right: T
+      top: C,
+      bottom: C,
+      left: C,
+      right: C
     });
     a(this, "chartSizes", {
-      chartWidth: H,
+      chartWidth: w,
       // width of single chart
-      chartHeight: M,
+      chartHeight: P,
       // height of single chart
-      totalWidth: H,
+      totalWidth: w,
       // width of all charts in charts row, plus left axis, plus legend
-      totalHeight: M
+      totalHeight: P
       // width of all charts in charts height, plus bottom axis, plus top title
     });
     a(this, "scales", {
-      x: C().domain([0, 10]).range([0, H]),
-      y: C().domain([0, 10]).range([M, 0]),
-      xOriginal: C().domain([0, 10]).range([0, H]),
-      yOriginal: C().domain([0, 10]).range([M, 0])
+      x: T().domain([0, 10]).range([0, w]),
+      y: T().domain([0, 10]).range([P, 0]),
+      xOriginal: T().domain([0, 10]).range([0, w]),
+      yOriginal: T().domain([0, 10]).range([P, 0])
     });
-    a(this, "polygon", []);
+    a(this, "polygons", []);
     a(this, "onPolygonUpdateOutside", () => {
     });
     a(this, "onTooltipHintSwitch", () => {
     });
+    a(this, "onLassoControlsStateUpdate", () => {
+    });
     a(this, "zoomStateKey", "");
     a(this, "selectedDot", null);
     a(this, "captionsSizes", {
@@ -117,200 +122,203 @@ class le {
     a(this, "allDots", []);
     a(this, "allPossibleLabels", []);
     a(this, "visibleLabels", []);
-    a(this, "lassoMode", !1);
     a(this, "onPolygonUpdate", (t) => {
-      this.polygon = t, this.updateByLasso();
-      const e = this.allDots.filter((s) => this.polygon.length > 2 && P(this.polygon, [s.x, s.y])).map((s) => s.idx);
-      this.onPolygonUpdateOutside(e);
+      this.polygons = t, this.updateByLasso();
+      const e = this.allDots.filter((i) => M(i.x, i.y, this.polygons)).map((i) => i.idx);
+      this.onPolygonUpdateOutside(e, t);
     });
   }
   clear() {
     var t, e;
     this.parentNode && this.rootNode && this.canvasNode && ((t = this.parentNode) == null || t.removeChild(this.rootNode), (e = this.parentNode) == null || e.removeChild(this.canvasNode), this.parentNode = null, this.rootNode = null, this.canvasNode = null, this.svgLayerElement = null, this.tools = null), setTimeout(() => {
-      var s;
-      (s = this.reactRoot) == null || s.unmount(), this.reactRoot = null;
+      var i;
+      (i = this.reactRoot) == null || i.unmount(), this.reactRoot = null;
     });
   }
   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 = nt(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 = pt(this.rootNode));
   }
   updateChartSizes(t) {
     this.chartSizes.chartWidth = t.width, this.chartSizes.chartHeight = t.height;
   }
-  updateViewport(t, e, s) {
-    const n = t.scale === "log" ? V() : C();
-    let { minX: l, minY: m, maxX: f, maxY: g } = s;
+  updateViewport(t, e, i) {
+    const h = t.scale === "log" ? X() : T();
+    let { minX: l, minY: m, maxX: f, maxY: g } = i;
     if (t.lowerValue !== void 0 && (l = Math.max(l, t.lowerValue)), t.upperValue !== void 0 && (f = Math.min(f, t.upperValue)), e.lowerValue !== void 0 && (m = Math.max(m, e.lowerValue)), e.upperValue !== void 0 && (g = Math.min(g, e.upperValue)), t.symmetricRange !== void 0) {
       const r = t.symmetricRange;
       if (r >= l && r <= f) {
-        const h = Math.max(r - l, f - r);
-        l = r - h, f = r + h;
+        const c = Math.max(r - l, f - r);
+        l = r - c, f = r + c;
       }
     }
     if (typeof e.symmetricRange < "u") {
       const r = e.symmetricRange;
       if (r >= m && r <= g) {
-        const h = Math.max(r - m, g - r);
-        m = r - h, g = r + h;
+        const c = Math.max(r - m, g - r);
+        m = r - c, g = r + c;
       }
     }
-    const v = [0, this.chartSizes.chartWidth], z = n.copy().domain([l, f]).range([w.LEFT, this.chartSizes.chartWidth - w.RIGHT]);
-    n.domain([z.invert(0), z.invert(this.chartSizes.chartWidth)]).range(v).nice(), this.scales.x = n, this.scales.xOriginal = n.copy();
-    const d = e.scale === "log" ? V() : C(), o = [this.chartSizes.chartHeight, 0], y = d.copy().domain([m, g]).range([this.chartSizes.chartHeight - w.BOTTOM, w.TOP]);
+    const x = [0, this.chartSizes.chartWidth], z = h.copy().domain([l, f]).range([H.LEFT, this.chartSizes.chartWidth - H.RIGHT]);
+    h.domain([z.invert(0), z.invert(this.chartSizes.chartWidth)]).range(x).nice(), this.scales.x = h, this.scales.xOriginal = h.copy();
+    const d = e.scale === "log" ? X() : T(), o = [this.chartSizes.chartHeight, 0], y = d.copy().domain([m, g]).range([this.chartSizes.chartHeight - H.BOTTOM, H.TOP]);
     d.domain([y.invert(this.chartSizes.chartHeight), y.invert(0)]).range(o).nice(), this.scales.y = d, this.scales.yOriginal = d.copy();
   }
   updateCaptionsSize(t) {
-    const e = new lt("600 14px Arial");
-    function s(f) {
+    const e = new dt("600 14px Arial");
+    function i(f) {
       return Math.max(...f.map((g) => e.getTextWidth(g)));
     }
-    const { ticks: n, format: l } = st(this.scales.y, t), m = s(n.map(l));
+    const { ticks: h, format: l } = lt(this.scales.y, t), m = i(h.map(l));
     this.captionsSizes = {
       xAxisCaptionsWidth: 20,
       yAxisCaptionsWidth: m
     };
   }
   createMainTitle(t) {
-    this.mainTitle = tt(
+    this.mainTitle = ot(
       t.name,
       this.chartSizes.totalWidth - this.margins.left - this.margins.right,
       20
     );
   }
   updateMargins() {
-    const t = Q * this.mainTitle.length, e = t > 0 ? t + Z * 2 : 0;
+    const t = et * this.mainTitle.length, e = t > 0 ? t + it * 2 : 0;
     this.margins = {
-      top: Math.max(e, T),
-      bottom: T + this.captionsSizes.xAxisCaptionsWidth + I,
-      left: T + this.captionsSizes.yAxisCaptionsWidth + I,
-      right: this.legend.width + T
+      top: Math.max(e, C),
+      bottom: C + this.captionsSizes.xAxisCaptionsWidth + V,
+      left: C + this.captionsSizes.yAxisCaptionsWidth + V,
+      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, s, n) {
+  updateLegendSize(t, e, i, h) {
     if (!t.show) {
       this.legend = { width: 0, height: 0, items: [] };
       return;
     }
     const l = [], m = { width: 0, height: 0, left: 0, top: 0 };
-    if (s.forEach((d) => {
+    if (i.forEach((d) => {
       const o = e[d.value];
       if (o.usedAes.length === 0 || !o.aesMap)
         return;
-      if (o.values.length > J) {
+      if (o.values.length > st) {
         console.warn(`Too many values for discrete legend (${o.values.length})`);
         return;
       }
       const y = {};
       o.values.forEach((u) => {
-        y[u] || (y[u] = { ...R }), o.usedAes.forEach((S) => {
-          var x, i;
-          S === "dotFill" && (y[u].color = ((x = o.aesMap[u]) == null ? void 0 : x[S]) ?? W), S === "dotSize" && (y[u].size = ((i = o.aesMap[u]) == null ? void 0 : i[S]) ?? 3);
+        y[u] || (y[u] = { ...R }), o.usedAes.forEach((v) => {
+          var L, s;
+          v === "dotFill" && (y[u].color = ((L = o.aesMap[u]) == null ? void 0 : L[v]) ?? W), v === "dotSize" && (y[u].size = ((s = o.aesMap[u]) == null ? void 0 : s[v]) ?? 3);
         });
       });
-      const r = d.label ?? d.value, h = ft().domain(o.values).range(o.values.map((u) => y[u]));
-      l.push({ ...m, id: d.value, type: "dots", title: r, scale: h, values: o.values, labels: o.labels });
-    }), n.forEach((d) => {
-      if (d.type === "dots" && B(d.aes.dotFill)) {
-        const { domain: o, range: y, columnName: r, type: h = "linear" } = d.aes.dotFill, u = r.label ?? r.value, S = at(y, o, "linear"), x = (h === "log" ? St() : C()).domain(o).range([this.chartSizes.chartHeight, 0]), i = rt(x, o);
-        l.push({ ...m, id: "dotFill", type: "continuous", title: u, scale: S, tickPositionScale: x, values: i });
+      const r = d.label ?? d.value, c = zt().domain(o.values).range(o.values.map((u) => y[u]));
+      l.push({ ...m, id: d.value, type: "dots", title: r, scale: c, values: o.values, labels: o.labels });
+    }), h.forEach((d) => {
+      if (d.type === "dots" && q(d.aes.dotFill)) {
+        const { domain: o, range: y, columnName: r, type: c = "linear" } = d.aes.dotFill, u = r.label ?? r.value, v = ht(y, o, "linear"), L = (c === "log" ? Lt() : T()).domain(o).range([this.chartSizes.chartHeight, 0]), s = ct(L, o);
+        l.push({ ...m, id: "dotFill", type: "continuous", title: u, scale: v, tickPositionScale: L, values: s });
       }
-      if (d.type === "dots" && B(d.aes.dotSize)) {
-        const { columnName: o, domain: y, range: r } = d.aes.dotSize, h = o.label ?? o.value, u = vt(y, r), S = u.ticks(3), x = u.tickFormat(3), i = S.reduce((p, b) => (p[String(b)] = x(b), p), {});
-        l.push({ ...m, id: o.value, type: "size", title: h, scale: u, values: S, labels: i });
+      if (d.type === "dots" && q(d.aes.dotSize)) {
+        const { columnName: o, domain: y, range: r } = d.aes.dotSize, c = o.label ?? o.value, u = bt(y, r), v = u.ticks(3), L = u.tickFormat(3), s = v.reduce((p, b) => (p[String(b)] = L(b), p), {});
+        l.push({ ...m, id: o.value, type: "size", title: c, scale: u, values: v, labels: s });
       }
     }), !l.length) {
       this.legend = { width: 0, height: 0, items: [] };
       return;
     }
-    const f = yt(l, this.chartSizes.chartHeight), g = f[f.length - 1], v = g.left + g.width + it, z = this.chartSizes.chartHeight;
+    const f = xt(l, this.chartSizes.chartHeight), g = f[f.length - 1], x = g.left + g.width + rt, z = this.chartSizes.chartHeight;
     this.legend = {
-      width: v,
+      width: x,
       height: z,
       items: f
     };
   }
-  initSettings(t, e, s, n, l, m, f) {
-    const { xAxis: g, yAxis: v, size: z, title: d, legend: o } = e;
-    this.updateChartSizes(z), this.updateViewport(g, v, s), this.updateCaptionsSize(n.y), this.updateLegendSize(o, l, f, m), this.createMainTitle(d), this.updateMargins(), this.aesGetters = X(l, m);
-    const y = dt().data(t).value((i) => {
-      const p = G(this.aesGetters.dotFill(i.data)), b = !i.dimmed && (this.polygon.length < 2 || P(this.polygon, [i.x, i.y])) ? 1 : 0.4;
+  initSettings(t, e, i, h, l, m, f) {
+    const { xAxis: g, yAxis: x, size: z, title: d, legend: o } = e;
+    this.updateChartSizes(z), this.updateViewport(g, x, i), this.updateCaptionsSize(h.y), this.updateLegendSize(o, l, f, m), this.createMainTitle(d), this.updateMargins(), this.aesGetters = j(l, m);
+    const y = ut().data(t).value((s) => {
+      const p = G(this.aesGetters.dotFill(s.data)), b = !s.dimmed && M(s.x, s.y, this.polygons) ? 1 : 0.4;
       return A(p, b);
-    }), r = pt().equals((i, p) => i === p).size((i) => q(this.aesGetters.dotSize(i.data))).crossValue((i) => i.x).mainValue((i) => i.y).decorate((i) => y(i)), h = ht().scaleExtent([0.1, 1e3]).filter(() => !this.lassoMode).on("start", () => {
+    }), r = yt().equals((s, p) => s === p).size((s) => K(this.aesGetters.dotSize(s.data))).crossValue((s) => s.x).mainValue((s) => s.y).decorate((s) => y(s)), c = mt().scaleExtent([0.1, 1e3]).filter((s) => s.type === "wheel" || s.metaKey).on("start", () => {
       this.selectedDot = null;
-    }).on("zoom", (i) => {
-      const p = i.transform, b = p.rescaleX(this.scales.xOriginal), L = p.rescaleY(this.scales.yOriginal);
-      this.scales.x.domain(b.domain()), this.scales.y.domain(L.domain()), this.zoomStateKey = `${p.x}_${p.y}_${p.k}`, this.renderSvgLayer(), this.renderWebglLayer();
+    }).on("zoom", (s) => {
+      const p = s.transform, b = p.rescaleX(this.scales.xOriginal), F = p.rescaleY(this.scales.yOriginal);
+      this.scales.x.domain(b.domain()), this.scales.y.domain(F.domain()), this.zoomStateKey = `${p.x}_${p.y}_${p.k}`, this.renderSvgLayer(), this.renderWebglLayer();
     }).on("end", () => {
-      this.allPossibleLabels.forEach((i) => {
-        i.x = this.scales.x(i.dot.x), i.y = this.scales.y(i.dot.y);
-      }), this.visibleLabels = U(this.allPossibleLabels, this.chartSizes.chartWidth, this.chartSizes.chartHeight), this.renderSvgLayer();
-    }), u = k().x((i) => i.x).y((i) => i.y).addAll(t), S = ut().on("point", ([i]) => {
-      var _, O;
-      if (!i) {
+      this.allPossibleLabels.forEach((s) => {
+        s.x = this.scales.x(s.dot.x), s.y = this.scales.y(s.dot.y);
+      }), this.visibleLabels = k(this.allPossibleLabels, this.chartSizes.chartWidth, this.chartSizes.chartHeight), this.renderSvgLayer();
+    }), u = Y().x((s) => this.scales.xOriginal(s.x)).y((s) => this.scales.yOriginal(s.y)).addAll(t), v = vt().on("point", ([s]) => {
+      var U, B;
+      if (!s) {
         this.selectedDot = null, this.renderSvgLayer();
         return;
       }
-      const p = this.scales.x.invert(i.x), b = this.scales.y.invert(i.y), L = (_ = this.tools) == null ? void 0 : _.qt.find(p, b), Y = this.selectedDot && !L || !this.selectedDot && L || ((O = this.selectedDot) == null ? void 0 : O.id) !== (L == null ? void 0 : L.id);
-      this.selectedDot = L ?? null, Y && this.renderSvgLayer();
-    }), x = ct({
+      const p = this.scales.x.invert(s.x), b = this.scales.y.invert(s.y), F = this.scales.xOriginal(p), $ = this.scales.yOriginal(b);
+      let S = (U = this.tools) == null ? void 0 : U.qt.find(F, $);
+      const _ = this.scales.x((S == null ? void 0 : S.x) ?? 0), I = this.scales.y((S == null ? void 0 : S.y) ?? 0);
+      (Math.abs(s.x - _) > 20 || Math.abs(s.y - I) > 20 || Math.sqrt((s.x - _) ** 2 + (s.y - I) ** 2) > 20) && (S = void 0);
+      const Q = this.selectedDot && !S || !this.selectedDot && S || ((B = this.selectedDot) == null ? void 0 : B.id) !== (S == null ? void 0 : S.id);
+      this.selectedDot = S ?? null, Q && this.renderSvgLayer();
+    }), L = gt({
       xScale: this.scales.x,
       yScale: this.scales.y
-    }).xAxisHeight(() => "0").yAxisWidth(() => "0").svgPlotArea(mt()).webglPlotArea(
+    }).xAxisHeight(() => "0").yAxisWidth(() => "0").svgPlotArea(ft()).webglPlotArea(
       // only render the point series on the WebGL layer
-      gt().series([r]).mapping((i) => i)
-    ).decorate((i) => {
-      const p = i.enter();
-      p && !this.svgLayerElement && (p.style("grid-template-columns", "0 auto 1fr auto 0"), p.style("grid-template-rows", "0 auto 1fr auto 0"), this.svgLayerElement = p.select(".svg-plot-area.plot-area svg").node()), p.select(".svg-plot-area.plot-area").call(h).call(S);
+      St().series([r]).mapping((s) => s)
+    ).decorate((s) => {
+      const p = s.enter();
+      p && !this.svgLayerElement && (p.style("grid-template-columns", "0 auto 1fr auto 0"), p.style("grid-template-rows", "0 auto 1fr auto 0"), this.svgLayerElement = p.select(".svg-plot-area.plot-area svg").node()), p.select(".svg-plot-area.plot-area").attr("class", "svg-plot-area plot-area miplots-scatterplot-plot-area").call(c).call(v);
     });
     this.tools = {
-      webglChart: x,
-      zoom: h,
+      webglChart: L,
+      zoom: c,
       qt: u,
       fillColor: y,
       pointSeries: r
     }, 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) {
-    this.tools !== null && (this.aesGetters = X(t, e), this.tools.fillColor.value((s) => {
-      const n = this.aesGetters.dotFill ?? (() => W), l = G(n(s.data)), m = !s.dimmed && (this.polygon.length < 2 || P(this.polygon, [s.x, s.y])) ? 1 : 0.4;
+    this.tools !== null && (this.aesGetters = j(t, e), this.tools.fillColor.value((i) => {
+      const h = this.aesGetters.dotFill ?? (() => W), l = G(h(i.data)), m = !i.dimmed && M(i.x, i.y, this.polygons) ? 1 : 0.4;
       return A(l, m);
     }));
   }
   updatePointSize() {
-    this.tools !== null && (N(this.canvasNode).datum([...this.allDots]), this.tools.pointSeries.size((t) => q(this.aesGetters.dotSize(t.data))));
+    this.tools !== null && (N(this.canvasNode).datum([...this.allDots]), this.tools.pointSeries.size((t) => K(this.aesGetters.dotSize(t.data))));
   }
   updateByLasso() {
     var t;
     this.tools !== null && ((t = this.tools) == null || t.fillColor.value((e) => {
-      const s = this.aesGetters.dotFill ?? (() => W), n = G(s(e.data)), l = !e.dimmed && (this.polygon.length < 2 || P(this.polygon, [e.x, e.y])) ? 1 : 0.4;
-      return A(n, l);
+      const i = this.aesGetters.dotFill ?? (() => W), h = G(i(e.data)), l = !e.dimmed && M(e.x, e.y, this.polygons) ? 1 : 0.4;
+      return A(h, l);
     }), this.renderWebglLayer());
   }
   updateData(t) {
-    this.tools !== null && (N(this.canvasNode).datum(t), this.tools.fillColor.data(t), this.tools.qt = k().x((e) => e.x).y((e) => e.y).addAll(t));
+    this.tools !== null && (N(this.canvasNode).datum(t), this.tools.fillColor.data(t), this.tools.qt = Y().x((e) => e.x).y((e) => e.y).addAll(t));
   }
-  render(t, e, s, n, l, m, f, g, v, z, d, o, y, r) {
-    if (this.lassoMode = y, this.tools === null)
+  render(t, e, i, h, l, m, f, g, x, z, d, o, y, r) {
+    if (this.tools === null)
       this.initSettings(
         l,
         e,
         m,
-        n,
-        v,
+        h,
+        x,
         g,
         z
-      ), this.onPolygonUpdateOutside = o, this.onTooltipHintSwitch = r;
+      ), this.onPolygonUpdateOutside = o, this.onTooltipHintSwitch = y, this.onLassoControlsStateUpdate = r;
     else {
-      const { title: h, legend: u } = e;
-      this.updateLegendSize(u, v, z, g), this.createMainTitle(h), this.updateMargins(), this.updateAes(v, g);
+      const { title: c, legend: u } = e;
+      this.updateLegendSize(u, x, z, g), this.createMainTitle(c), this.updateMargins(), this.updateAes(x, g);
     }
-    this.allDots = l, this.allPossibleLabels = d, this.allPossibleLabels.forEach((h) => {
-      h.x = this.scales.x(h.dot.x), h.y = this.scales.y(h.dot.y);
-    }), this.visibleLabels = U(this.allPossibleLabels, this.chartSizes.chartWidth, this.chartSizes.chartHeight), this.notCalculatedProps = {
+    this.allDots = l, this.allPossibleLabels = d, this.allPossibleLabels.forEach((c) => {
+      c.x = this.scales.x(c.dot.x), c.y = this.scales.y(c.dot.y);
+    }), this.visibleLabels = k(this.allPossibleLabels, this.chartSizes.chartWidth, this.chartSizes.chartHeight), this.notCalculatedProps = {
       settingsId: t,
       chartSettings: e,
-      onlyPositive: n,
-      keyColumn: s,
+      onlyPositive: h,
+      keyColumn: i,
       dotsByGrouping: f,
       layers: g
     }, this.renderWebglLayer(), this.renderSvgLayer();
@@ -321,9 +329,9 @@ class le {
   }
   renderSvgLayer() {
     var e;
-    this.visibleLabels.forEach((s) => {
-      s.x = this.scales.x(s.dot.x), s.y = this.scales.y(s.dot.y);
-    }), ot(this.visibleLabels);
+    this.visibleLabels.forEach((i) => {
+      i.x = this.scales.x(i.dot.x), i.y = this.scales.y(i.dot.y);
+    }), nt(this.visibleLabels);
     const t = {
       settingsId: this.notCalculatedProps.settingsId,
       chartSettings: this.notCalculatedProps.chartSettings,
@@ -342,18 +350,19 @@ class le {
       aesGetters: this.aesGetters,
       legendData: this.legend,
       labels: this.visibleLabels,
+      defaultPolygons: this.polygons,
       onPolygonUpdate: this.onPolygonUpdate,
       onTooltipHintSwitch: this.onTooltipHintSwitch,
-      lassoMode: this.lassoMode
+      onLassoControlsStateUpdate: this.onLassoControlsStateUpdate
     };
-    this.svgLayerComponent = /* @__PURE__ */ E.jsx(et, { ...t }), (e = this.reactRoot) == null || e.render(this.svgLayerComponent);
+    this.svgLayerComponent = /* @__PURE__ */ E.jsx(at, { ...t }), (e = this.reactRoot) == null || e.render(this.svgLayerComponent);
   }
   renderError(t) {
     var e;
-    (e = this.reactRoot) == null || e.render(/* @__PURE__ */ E.jsx($, { message: t }));
+    (e = this.reactRoot) == null || e.render(/* @__PURE__ */ E.jsx(tt, { message: t }));
   }
 }
 export {
-  le as default
+  me as default
 };
 //# sourceMappingURL=ChartRenderer.js.map