@milaboratories/graph-maker 1.1.146 → 1.1.148

package/dist/node_modules/@milaboratories/miplots4/dist/scatterplot-umap/ChartRenderer.js

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