@milaboratories/miplots4 1.0.159 → 1.0.161

package/dist/scatterplot-umap/ChartRenderer.js

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