@biohub/scatterplot 0.1.4

package/dist/scatterplot.js

@@ -0,0 +1,985 @@
+import { jsxs as k, jsx as G } from "react/jsx-runtime";
+import { useState as I, useCallback as Z, useRef as x, useEffect as M, useLayoutEffect as ze, useMemo as q } from "react";
+function De() {
+  const [e, t] = I(
+    /* @__PURE__ */ new Set()
+  ), r = Z((s) => {
+    t(s === null ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([s]));
+  }, []), n = Z((s) => {
+    t(new Set(s));
+  }, []), i = Z(() => {
+    t(/* @__PURE__ */ new Set());
+  }, []), c = Z(
+    (s) => e.has(s),
+    [e]
+  );
+  return {
+    selectedIndices: e,
+    handlePointClick: r,
+    setSelection: n,
+    clearSelection: i,
+    isSelected: c
+  };
+}
+const fe = {
+  zoom: 1,
+  pan: { x: 0, y: 0 }
+}, Me = 1, Ie = 2, Oe = 4;
+function Ue(e, t, r) {
+  let n = 0;
+  return e && (n |= Me), t && (n |= Ie), r && (n |= Oe), n;
+}
+function de(e, t, r, n) {
+  const i = new Uint8Array(e), c = t !== void 0 && t.size > 0;
+  for (let s = 0; s < e; s++) {
+    const a = c ? t.has(s) : !0, u = r?.has(s) ?? !1, d = n !== void 0 ? n.has(s) : c && !a && !u;
+    i[s] = Ue(a, d, u);
+  }
+  return i;
+}
+const ge = "#3498db", ke = [52, 152, 219], he = 255;
+function ae(e, t, r) {
+  const n = e.createShader(t);
+  return n ? (e.shaderSource(n, r), e.compileShader(n), e.getShaderParameter(n, e.COMPILE_STATUS) ? n : (console.error("Shader compile error:", e.getShaderInfoLog(n)), e.deleteShader(n), null)) : (console.error("Failed to create WebGL shader"), null);
+}
+function Ye(e, t, r) {
+  const n = e.createProgram();
+  return n ? (e.attachShader(n, t), e.attachShader(n, r), e.linkProgram(n), e.getProgramParameter(n, e.LINK_STATUS) ? n : (console.error("Program link error:", e.getProgramInfoLog(n)), e.deleteProgram(n), null)) : (console.error("Failed to create WebGL program"), null);
+}
+function me(e) {
+  if (!e || !/^#?[0-9A-Fa-f]{3,6}$/.test(e))
+    return console.warn(
+      `Invalid hex color: "${e}", using fallback (${ge})`
+    ), ke;
+  const t = e.replace("#", ""), r = t.length === 3 ? t.split("").map((a) => a + a).join("") : t, n = parseInt(r, 16), i = n >> 16 & 255, c = n >> 8 & 255, s = n & 255;
+  return [i, c, s];
+}
+function Ne(e, t = he) {
+  const [r, n, i] = me(e);
+  return [r, n, i, t];
+}
+function He(e, t = ge) {
+  const r = new Float32Array(e.length * 2), n = new Uint8Array(e.length * 4);
+  for (let i = 0; i < e.length; i++) {
+    const c = e[i];
+    r[i * 2] = c.x, r[i * 2 + 1] = c.y;
+    const [s, a, u, d] = Ne(c.color || t, he);
+    n[i * 4] = s, n[i * 4 + 1] = a, n[i * 4 + 2] = u, n[i * 4 + 3] = d;
+  }
+  return { positions: r, colors: n };
+}
+function Ge({
+  canvas: e,
+  width: t,
+  height: r,
+  onCameraChange: n,
+  enabled: i = !0
+}) {
+  const c = x(!1);
+  return M(() => {
+    if (!e || !i) return;
+    const s = (a) => {
+      a.preventDefault();
+      const u = e.getBoundingClientRect(), d = a.clientX - u.left, S = a.clientY - u.top, m = d / t * 2 - 1, v = -(S / r * 2 - 1), p = a.deltaY < 0 ? 1.1 : 1 / 1.1;
+      n((f) => {
+        const A = f.zoom, _ = f.pan, L = A * p, h = (m - _.x) / A, g = (v - _.y) / A, B = m - h * L, F = v - g * L;
+        return {
+          zoom: L,
+          pan: { x: B, y: F }
+        };
+      });
+    };
+    return e.addEventListener("wheel", s, { passive: !1 }), () => e.removeEventListener("wheel", s);
+  }, [e, t, r, n, i]), M(() => {
+    if (!e || !i) return;
+    let s = !1, a = !1, u = { x: 0, y: 0 };
+    const d = (p) => {
+      s = !0, a = !1, c.current = !1, u = { x: p.clientX, y: p.clientY };
+    }, S = (p) => {
+      if (!s) return;
+      const f = p.clientX - u.x, A = p.clientY - u.y;
+      (Math.abs(f) > 2 || Math.abs(A) > 2) && (a = !0);
+      const _ = f / t * 2, L = -(A / r) * 2;
+      n((h) => ({
+        zoom: h.zoom,
+        pan: {
+          x: h.pan.x + _,
+          y: h.pan.y + L
+        }
+      })), u = { x: p.clientX, y: p.clientY };
+    }, m = () => {
+      a && (c.current = !0), s = !1, a = !1;
+    }, v = (p) => {
+      (p.buttons & 1) === 1 ? (s = !0, u = { x: p.clientX, y: p.clientY }) : s = !1;
+    };
+    return e.addEventListener("mousedown", d), e.addEventListener("mousemove", S), e.addEventListener("mouseup", m), e.addEventListener("mouseenter", v), () => {
+      e.removeEventListener("mousedown", d), e.removeEventListener("mousemove", S), e.removeEventListener("mouseup", m), e.removeEventListener("mouseenter", v);
+    };
+  }, [e, t, r, n, i]), { justFinishedPanningRef: c };
+}
+function Xe(e) {
+  const [t, r] = I({ width: 0, height: 0 }), n = x(null);
+  return M(() => {
+    const i = e.current;
+    if (!i) return;
+    const c = new ResizeObserver((u) => {
+      const d = u[0];
+      if (!d) return;
+      const { width: S, height: m } = d.contentRect;
+      n.current && cancelAnimationFrame(n.current), n.current = requestAnimationFrame(() => {
+        r({ width: S, height: m }), n.current = null;
+      });
+    });
+    c.observe(i);
+    const { clientWidth: s, clientHeight: a } = i;
+    return s > 0 && a > 0 && r({ width: s, height: a }), () => {
+      n.current && cancelAnimationFrame(n.current), c.disconnect();
+    };
+  }, [e]), t;
+}
+function le(e) {
+  const t = x(e);
+  return t.current = e, t;
+}
+const $e = 10;
+function We(e) {
+  const {
+    canvas: t,
+    enabled: r,
+    onLassoComplete: n,
+    onLassoUpdate: i,
+    minDisplacement: c = $e
+  } = e, [s, a] = I([]), [u, d] = I(!1), S = le(n), m = le(i), v = x(!1);
+  return M(() => {
+    if (!r || !t)
+      return;
+    let p = !1, f = [], A = null;
+    const _ = (g) => {
+      if (g.button !== 0) return;
+      const F = g.currentTarget.getBoundingClientRect(), C = g.clientX - F.left, P = g.clientY - F.top, T = [[C, P]];
+      A = [C, P], f = T, p = !0, d(!0), a(T);
+    }, L = (g) => {
+      if (!p || v.current) return;
+      v.current = !0, requestAnimationFrame(() => {
+        v.current = !1;
+      });
+      const F = g.currentTarget.getBoundingClientRect(), C = g.clientX - F.left, P = g.clientY - F.top, T = [...f, [C, P]];
+      f = T, a(T), m.current && m.current(T);
+    }, h = () => {
+      if (!p) return;
+      p = !1, d(!1);
+      let g = 0;
+      if (A && f.length > 0) {
+        const F = f[f.length - 1], C = F[0] - A[0], P = F[1] - A[1];
+        g = Math.sqrt(C * C + P * P);
+      }
+      const B = g >= c;
+      S.current(B ? f : []), f = [], A = null, a([]);
+    };
+    return t.addEventListener("mousedown", _), t.addEventListener("mousemove", L), t.addEventListener("mouseup", h), t.addEventListener("mouseleave", h), () => {
+      t.removeEventListener("mousedown", _), t.removeEventListener("mousemove", L), t.removeEventListener("mouseup", h), t.removeEventListener("mouseleave", h);
+    };
+  }, [r, t, c, S, m]), {
+    lassoPath: s,
+    isDrawing: u
+  };
+}
+const je = `#version 300 es
+precision mediump float;
+
+uniform float u_opacity;
+uniform float u_backgroundOpacity;
+uniform float u_highlightBrightness;
+
+in vec4 v_color;
+in float v_isSelected;
+in float v_isBackground;
+in float v_isHighlight;
+
+out vec4 fragColor;
+
+// Constants for circular point rendering
+const vec2 CENTER = vec2(0.5, 0.5);
+const float RADIUS = 0.5;
+
+
+void main() {
+  // gl_PointCoord gives us the pixel coordinate within the point (0,0 to 1,1)
+  // Calculate distance from center
+  float dist = length(gl_PointCoord - CENTER);
+
+  // Discard pixels outside the circle (hard edge, no AA)
+  // This approach avoids depth buffer artifacts when points overlap
+  if (dist > RADIUS) {
+    discard;
+  }
+
+  // Apply flag-based visual changes
+  vec3 finalColor = v_color.rgb;
+  float finalAlpha = v_color.a * u_opacity;
+
+  // Background points: reduce opacity (de-emphasize when something else is selected)
+  if (v_isBackground > 0.5) {
+    finalAlpha *= u_backgroundOpacity;
+  }
+
+  // Highlighted points: brighten color (temporary during lasso drawing)
+  if (v_isHighlight > 0.5) {
+    finalColor = min(v_color.rgb * u_highlightBrightness, vec3(1.0));
+  }
+
+  // Output premultiplied alpha to avoid edge halos with transparency
+  // Requires blendFunc(ONE, ONE_MINUS_SRC_ALPHA) in WebGL setup
+  fragColor = vec4(finalColor * finalAlpha, finalAlpha);
+}
+`, Ze = `#version 300 es
+precision mediump float;
+
+in vec2 a_position;
+in vec4 a_color;
+in uint a_flag;
+uniform mat3 u_matrix;
+uniform float u_pointSize;
+uniform float u_highlightSizeScale;
+uniform float u_unselectedSizeScale;
+
+out vec4 v_color;
+out float v_isSelected;
+out float v_isBackground;
+out float v_isHighlight;
+
+// Flag constants (must match JavaScript constants)
+const uint FLAG_SELECTED = 1u;
+const uint FLAG_BACKGROUND = 2u;
+const uint FLAG_HIGHLIGHT = 4u;
+
+// Z-depth constants for layering (WebGL clip space: -1 near, +1 far)
+const float Z_BACKGROUND = 0.99;  // Background points (farthest back)
+const float Z_NORMAL = 0.0;       // Normal points (middle layer)
+const float Z_TOP = -1.0;         // Selected/highlighted points (front)
+
+void main() {
+  // Apply transformation matrix to position
+  vec3 transformedPosition = u_matrix * vec3(a_position, 1.0);
+
+  // Decode flags using bitwise operations (WebGL 2.0 feature)
+  bool isSelected = (a_flag & FLAG_SELECTED) != 0u;
+  bool isBackground = (a_flag & FLAG_BACKGROUND) != 0u;
+  bool isHighlight = (a_flag & FLAG_HIGHLIGHT) != 0u;
+
+  // Calculate z-depth based on flags (determines render order)
+  float z = isBackground ? Z_BACKGROUND : ((isSelected || isHighlight) ? Z_TOP : Z_NORMAL);
+
+  // Adjust point size based on flags
+  float pointSize = u_pointSize;
+  if (isHighlight) {
+    pointSize *= u_highlightSizeScale;
+  } else if (!isSelected) {
+    pointSize *= u_unselectedSizeScale;
+  }
+
+  gl_Position = vec4(transformedPosition.xy, z, 1.0);
+  gl_PointSize = pointSize;
+
+  // Pass color and flags to fragment shader
+  // Convert bools to floats for varying variables
+  v_color = a_color;
+  v_isSelected = isSelected ? 1.0 : 0.0;
+  v_isBackground = isBackground ? 1.0 : 0.0;
+  v_isHighlight = isHighlight ? 1.0 : 0.0;
+}
+`, Ke = "--scatterplot", Ve = ["lasso", "debug"];
+function qe(e) {
+  return e.replace(/[A-Z]/g, (t) => `-${t.toLowerCase()}`);
+}
+function Je(e) {
+  const t = {};
+  for (const r of Ve) {
+    const n = e[r];
+    for (const [i, c] of Object.entries(n))
+      t[`${Ke}-${r}-${qe(i)}`] = String(c);
+  }
+  return t;
+}
+const pe = {
+  canvas: {
+    background: "#ffffff",
+    dataPadding: 20
+  },
+  points: {
+    defaultColor: "#3498db",
+    size: 5,
+    opacity: 1,
+    backgroundOpacity: 0.5,
+    highlightBrightness: 1.4,
+    highlightSizeScale: 1.3,
+    unselectedSizeScale: 0.2
+  },
+  lasso: {
+    fill: "rgba(59, 130, 246, 0.1)",
+    stroke: "rgb(59, 130, 246)",
+    strokeWidth: 2,
+    strokeDasharray: "5,5"
+  },
+  debug: {
+    background: "rgba(0, 0, 0, 0.8)",
+    color: "#00ff00",
+    fontFamily: "monospace",
+    fontSize: "12px"
+  }
+};
+function Se(e, t = pe) {
+  return {
+    canvas: { ...t.canvas, ...e.canvas },
+    points: { ...t.points, ...e.points },
+    lasso: { ...t.lasso, ...e.lasso },
+    debug: { ...t.debug, ...e.debug }
+  };
+}
+const Qe = pe, pt = Se({
+  canvas: {
+    background: "#1a1a2e"
+  },
+  points: {
+    defaultColor: "#5dade2",
+    backgroundOpacity: 0.4,
+    highlightBrightness: 1.5
+  },
+  lasso: {
+    fill: "rgba(93, 173, 226, 0.15)",
+    stroke: "rgb(93, 173, 226)"
+  },
+  debug: {
+    background: "rgba(0, 0, 0, 0.9)"
+  }
+}), St = Se({
+  canvas: {
+    background: "#000000"
+  },
+  points: {
+    defaultColor: "#ffffff",
+    size: 6,
+    backgroundOpacity: 0.3,
+    highlightBrightness: 1.6,
+    highlightSizeScale: 1.5
+  },
+  lasso: {
+    fill: "rgba(255, 255, 0, 0.2)",
+    stroke: "#ffff00",
+    strokeWidth: 3,
+    strokeDasharray: "none"
+  },
+  debug: {
+    background: "#000000",
+    color: "#ffffff",
+    fontSize: "14px"
+  }
+}), ne = Qe;
+function et(e, t) {
+  if (t === 0)
+    return { xMin: 0, xMax: 1, yMin: 0, yMax: 1 };
+  if (e.length < t * 2)
+    throw new Error(
+      `positions buffer too small: expected at least ${t * 2} elements for ${t} points, got ${e.length}`
+    );
+  let r = e[0], n = e[0], i = e[1], c = e[1];
+  for (let s = 0; s < t; s++) {
+    const a = e[s * 2], u = e[s * 2 + 1];
+    a < r && (r = a), a > n && (n = a), u < i && (i = u), u > c && (c = u);
+  }
+  return { xMin: r, xMax: n, yMin: i, yMax: c };
+}
+function _e(e, t, r, n) {
+  const i = t - e, c = n - r, s = Math.max(i, c) || 1, a = 0.5 - i / s / 2, u = 0.5 - c / s / 2;
+  return { scale: s, xOffset: a, yOffset: u };
+}
+function Ae(e, t, r, n) {
+  const i = e / t, c = Math.min(e, t), a = 1 - 2 * (c > 0 ? n / c : 0);
+  let u = r * a, d = r * a;
+  return i > 1 ? u = r * a / i : i < 1 && (d = r * a * i), { scaleX: u, scaleY: d };
+}
+function tt(e, t, r, n, i, c) {
+  const s = new Float32Array(t * 2), { scale: a, xOffset: u, yOffset: d } = _e(
+    r,
+    n,
+    i,
+    c
+  );
+  for (let S = 0; S < t; S++) {
+    const m = e[S * 2], v = e[S * 2 + 1], p = (m - r) / a, f = (v - i) / a, A = p + u, _ = f + d;
+    s[S * 2] = -1 + 2 * A, s[S * 2 + 1] = -1 + 2 * _;
+  }
+  return s;
+}
+function ve(e, t, r, n, i, c, s, a, u, d, S, m, v) {
+  const p = (e - r) / i, f = (t - n) / i, A = p + c, _ = f + s, L = -1 + 2 * A, h = -1 + 2 * _, g = L * a + d, B = h * u + S, F = (g + 1) * m / 2, C = (1 - B) * v / 2;
+  return { screenX: F, screenY: C };
+}
+function nt(e, t, r) {
+  if (r.length < 3) return !1;
+  let n = !1;
+  for (let i = 0, c = r.length - 1; i < r.length; c = i++) {
+    const s = r[i][0], a = r[i][1], u = r[c][0], d = r[c][1];
+    a > t != d > t && e < (u - s) * (t - a) / (d - a) + s && (n = !n);
+  }
+  return n;
+}
+const rt = 10;
+function Le(e, t, r, n, i) {
+  const { scale: c, xOffset: s, yOffset: a } = _e(
+    n.xMin,
+    n.xMax,
+    n.yMin,
+    n.yMax
+  ), { scaleX: u, scaleY: d } = Ae(
+    e,
+    t,
+    r,
+    i
+  );
+  return { scale: c, xOffset: s, yOffset: a, scaleX: u, scaleY: d };
+}
+function ot(e, t, r, n, i, c, s, a = rt, u, d = ne.canvas.dataPadding) {
+  if (n === 0) return null;
+  const { zoom: S, pan: m } = s, { scale: v, xOffset: p, yOffset: f, scaleX: A, scaleY: _ } = Le(
+    i,
+    c,
+    S,
+    u,
+    d
+  );
+  let L = null, h = a;
+  for (let g = 0; g < n; g++) {
+    const B = r[g * 2], F = r[g * 2 + 1], { screenX: C, screenY: P } = ve(
+      B,
+      F,
+      u.xMin,
+      u.yMin,
+      v,
+      p,
+      f,
+      A,
+      _,
+      m.x,
+      m.y,
+      i,
+      c
+    ), T = C - e, R = P - t, O = Math.sqrt(T * T + R * R);
+    O < h && (h = O, L = g);
+  }
+  return L;
+}
+function ue(e, t, r, n, i, c, s, a = ne.canvas.dataPadding) {
+  if (e.length < 3) return /* @__PURE__ */ new Set();
+  const { zoom: u, pan: d } = c, { scale: S, xOffset: m, yOffset: v, scaleX: p, scaleY: f } = Le(
+    n,
+    i,
+    u,
+    s,
+    a
+  ), A = /* @__PURE__ */ new Set();
+  for (let _ = 0; _ < r; _++) {
+    const L = t[_ * 2], h = t[_ * 2 + 1], { screenX: g, screenY: B } = ve(
+      L,
+      h,
+      s.xMin,
+      s.yMin,
+      S,
+      m,
+      v,
+      p,
+      f,
+      d.x,
+      d.y,
+      n,
+      i
+    );
+    nt(g, B, e) && A.add(_);
+  }
+  return A;
+}
+function it(e, t) {
+  return new Float32Array([e, 0, 0, 0, t, 0, 0, 0, 1]);
+}
+function st(e, t) {
+  return new Float32Array([1, 0, 0, 0, 1, 0, e, t, 1]);
+}
+function ct(e, t) {
+  return new Float32Array([
+    e[0] * t[0] + e[3] * t[1] + e[6] * t[2],
+    e[1] * t[0] + e[4] * t[1] + e[7] * t[2],
+    e[2] * t[0] + e[5] * t[1] + e[8] * t[2],
+    e[0] * t[3] + e[3] * t[4] + e[6] * t[5],
+    e[1] * t[3] + e[4] * t[4] + e[7] * t[5],
+    e[2] * t[3] + e[5] * t[4] + e[8] * t[5],
+    e[0] * t[6] + e[3] * t[7] + e[6] * t[8],
+    e[1] * t[6] + e[4] * t[7] + e[7] * t[8],
+    e[2] * t[6] + e[5] * t[7] + e[8] * t[8]
+  ]);
+}
+function at({ count: e, camera: t, lassoMetrics: r }) {
+  const { zoom: n, pan: i } = t;
+  return /* @__PURE__ */ k("div", { className: "scatterplot-debug-panel", children: [
+    /* @__PURE__ */ G("div", { className: "scatterplot-debug-panel-title", children: "Debug Info" }),
+    /* @__PURE__ */ k("div", { children: [
+      "Points: ",
+      e.toLocaleString()
+    ] }),
+    /* @__PURE__ */ k("div", { children: [
+      "Zoom: ",
+      n.toFixed(3),
+      "x"
+    ] }),
+    /* @__PURE__ */ k("div", { children: [
+      "Pan: (",
+      i.x.toFixed(3),
+      ", ",
+      i.y.toFixed(3),
+      ")"
+    ] }),
+    r && /* @__PURE__ */ k(
+      "div",
+      {
+        style: {
+          marginTop: "5px",
+          borderTop: "1px solid #444",
+          paddingTop: "5px"
+        },
+        children: [
+          /* @__PURE__ */ k("div", { children: [
+            "Last lasso: ",
+            r.timeMs.toFixed(1),
+            "ms"
+          ] }),
+          /* @__PURE__ */ k("div", { children: [
+            "Selected: ",
+            r.selectedCount.toLocaleString()
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function lt({
+  lassoPath: e,
+  width: t,
+  height: r,
+  isDrawing: n
+}) {
+  if (!n || e.length < 2)
+    return null;
+  const i = e.map(([c, s]) => `${c},${s}`).join(" ");
+  return /* @__PURE__ */ G(
+    "svg",
+    {
+      "aria-hidden": "true",
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: t,
+        height: r,
+        pointerEvents: "none",
+        // Prevents blocking canvas mouse events (critical for lasso drawing)
+        zIndex: 10
+      },
+      children: /* @__PURE__ */ G("polygon", { className: "scatterplot-lasso-polygon", points: i })
+    }
+  );
+}
+const ut = 800, ft = 600;
+function dt({
+  width: e,
+  height: t,
+  positions: r,
+  colors: n,
+  debug: i = !1,
+  pixelRatio: c = window.devicePixelRatio || 1,
+  flags: s,
+  onPointClick: a,
+  lassoEnabled: u = !1,
+  onLassoComplete: d,
+  onLassoUpdate: S,
+  camera: m,
+  onCameraChange: v,
+  panZoomEnabled: p = !0,
+  theme: f = ne,
+  className: A
+}) {
+  const _ = x(null), L = Xe(_), h = e ?? (L.width > 0 ? L.width : ut), g = t ?? (L.height > 0 ? L.height : ft), B = x(null), [F, C] = I(null);
+  ze(() => {
+    C(B.current);
+  }, []);
+  const [P, T] = I(void 0), R = r.length / 2, O = x(null), X = x(null), y = x(-1), z = x(-1), Y = x(-1), K = x(null), J = x(null), re = x(null), oe = x(
+    null
+  ), ie = x(
+    null
+  ), se = x(
+    null
+  ), ce = x(
+    null
+  ), $ = x(null), W = x(null), V = x(null), j = q(() => et(r, R), [r, R]), Ee = q(() => Je(f), [f]), D = q(() => {
+    const [o, l, b] = me(f.canvas.background);
+    return [o / 255, l / 255, b / 255, 1];
+  }, [f.canvas.background]), [xe, Re] = I(fe), Q = m !== void 0, N = Q ? m : xe, ye = Z(
+    (o) => {
+      v && v(o), Q || Re(o);
+    },
+    [v, Q]
+  ), { justFinishedPanningRef: ee } = Ge({
+    canvas: F,
+    width: h,
+    height: g,
+    onCameraChange: ye,
+    enabled: p
+  }), { lassoPath: Be, isDrawing: Fe } = We({
+    canvas: F,
+    enabled: u,
+    onLassoComplete: (o) => {
+      if (d) {
+        const l = i ? performance.now() : 0, b = ue(
+          o,
+          r,
+          R,
+          h,
+          g,
+          N,
+          j,
+          f.canvas.dataPadding
+        );
+        i && T({
+          timeMs: performance.now() - l,
+          selectedCount: b.size
+        }), d(b);
+      }
+    },
+    onLassoUpdate: (o) => {
+      if (S) {
+        const l = ue(
+          o,
+          r,
+          R,
+          h,
+          g,
+          N,
+          j,
+          f.canvas.dataPadding
+        );
+        S(l);
+      }
+    }
+  });
+  return M(() => {
+    const o = B.current;
+    if (!o || !a || u) return;
+    const l = (b) => {
+      if (ee.current) {
+        ee.current = !1;
+        return;
+      }
+      const w = o.getBoundingClientRect(), E = b.clientX - w.left, H = b.clientY - w.top, U = ot(
+        E,
+        H,
+        r,
+        R,
+        h,
+        g,
+        N,
+        f.points.size,
+        // Use point size as max distance threshold
+        j,
+        // Pass pre-computed bounds for performance
+        f.canvas.dataPadding
+      );
+      a(U);
+    };
+    return o.addEventListener("click", l), () => o.removeEventListener("click", l);
+  }, [
+    r,
+    R,
+    h,
+    g,
+    N,
+    f.points.size,
+    a,
+    j,
+    f.canvas.dataPadding,
+    u,
+    ee
+  ]), M(() => {
+    const o = B.current;
+    if (!o) return;
+    const l = o.getContext("webgl2", {
+      preserveDrawingBuffer: !0,
+      antialias: !1
+    });
+    if (!l) {
+      console.error("WebGL 2 not supported");
+      return;
+    }
+    O.current = l;
+    const b = ae(
+      l,
+      l.VERTEX_SHADER,
+      Ze
+    ), w = ae(
+      l,
+      l.FRAGMENT_SHADER,
+      je
+    );
+    if (!b || !w) return;
+    const E = Ye(l, b, w);
+    if (!E) return;
+    if (X.current = E, y.current = l.getAttribLocation(E, "a_position"), z.current = l.getAttribLocation(E, "a_color"), Y.current = l.getAttribLocation(E, "a_flag"), K.current = l.getUniformLocation(E, "u_matrix"), J.current = l.getUniformLocation(
+      E,
+      "u_pointSize"
+    ), re.current = l.getUniformLocation(E, "u_opacity"), oe.current = l.getUniformLocation(
+      E,
+      "u_backgroundOpacity"
+    ), ie.current = l.getUniformLocation(
+      E,
+      "u_highlightBrightness"
+    ), se.current = l.getUniformLocation(
+      E,
+      "u_highlightSizeScale"
+    ), ce.current = l.getUniformLocation(
+      E,
+      "u_unselectedSizeScale"
+    ), y.current === -1) {
+      console.error("Failed to get attribute location for a_position");
+      return;
+    }
+    if (z.current === -1) {
+      console.error("Failed to get attribute location for a_color");
+      return;
+    }
+    if (Y.current === -1) {
+      console.error("Failed to get attribute location for a_flag");
+      return;
+    }
+    if (!K.current) {
+      console.error("Failed to get uniform location for u_matrix");
+      return;
+    }
+    if (!J.current) {
+      console.error("Failed to get uniform location for u_pointSize");
+      return;
+    }
+    const H = l.createBuffer(), U = l.createBuffer(), te = l.createBuffer();
+    return $.current = H, W.current = U, V.current = te, l.enable(l.BLEND), l.blendFunc(l.ONE, l.ONE_MINUS_SRC_ALPHA), l.enable(l.DEPTH_TEST), l.depthFunc(l.LESS), () => {
+      b && l.deleteShader(b), w && l.deleteShader(w), X.current && (l.deleteProgram(X.current), X.current = null), $.current && (l.deleteBuffer($.current), $.current = null), W.current && (l.deleteBuffer(W.current), W.current = null), V.current && (l.deleteBuffer(V.current), V.current = null);
+    };
+  }, []), M(() => {
+    const o = O.current, l = $.current;
+    if (!o || !l || R === 0) return;
+    const { xMin: b, xMax: w, yMin: E, yMax: H } = j, U = tt(
+      r,
+      R,
+      b,
+      w,
+      E,
+      H
+    );
+    o.bindBuffer(o.ARRAY_BUFFER, l), o.bufferData(o.ARRAY_BUFFER, U, o.STATIC_DRAW), o.enableVertexAttribArray(y.current), o.vertexAttribPointer(
+      y.current,
+      2,
+      o.FLOAT,
+      !1,
+      0,
+      0
+    );
+  }, [r, R, j]), M(() => {
+    const o = O.current, l = W.current;
+    !o || !l || R === 0 || (o.bindBuffer(o.ARRAY_BUFFER, l), o.bufferData(o.ARRAY_BUFFER, n, o.STATIC_DRAW), o.enableVertexAttribArray(z.current), o.vertexAttribPointer(
+      z.current,
+      4,
+      o.UNSIGNED_BYTE,
+      !0,
+      0,
+      0
+    ));
+  }, [n, R]), M(() => {
+    const o = O.current, l = X.current, b = $.current, w = W.current, E = V.current, { zoom: H, pan: U } = N;
+    if (!o || !l) return;
+    if (R === 0) {
+      o.clearColor(D[0], D[1], D[2], D[3]), o.clear(o.COLOR_BUFFER_BIT);
+      return;
+    }
+    if (o.useProgram(l), E) {
+      const we = s ?? de(R);
+      o.bindBuffer(o.ARRAY_BUFFER, E), o.bufferData(o.ARRAY_BUFFER, we, o.DYNAMIC_DRAW), o.enableVertexAttribArray(Y.current), o.vertexAttribIPointer(
+        Y.current,
+        1,
+        o.UNSIGNED_BYTE,
+        0,
+        0
+      );
+    }
+    const { scaleX: te, scaleY: be } = Ae(
+      h,
+      g,
+      H,
+      f.canvas.dataPadding
+    ), Ce = it(te, be), Pe = st(U.x, U.y), Te = ct(Pe, Ce);
+    o.uniformMatrix3fv(K.current, !1, Te), o.uniform1f(J.current, f.points.size * c), o.uniform1f(re.current, f.points.opacity), o.uniform1f(
+      oe.current,
+      f.points.backgroundOpacity
+    ), o.uniform1f(
+      ie.current,
+      f.points.highlightBrightness
+    ), o.uniform1f(
+      se.current,
+      f.points.highlightSizeScale
+    ), o.uniform1f(
+      ce.current,
+      f.points.unselectedSizeScale
+    ), b && (o.bindBuffer(o.ARRAY_BUFFER, b), o.enableVertexAttribArray(y.current), o.vertexAttribPointer(
+      y.current,
+      2,
+      o.FLOAT,
+      !1,
+      0,
+      0
+    )), w && (o.bindBuffer(o.ARRAY_BUFFER, w), o.enableVertexAttribArray(z.current), o.vertexAttribPointer(
+      z.current,
+      4,
+      o.UNSIGNED_BYTE,
+      !0,
+      0,
+      0
+    )), E && (o.bindBuffer(o.ARRAY_BUFFER, E), o.enableVertexAttribArray(Y.current), o.vertexAttribIPointer(
+      Y.current,
+      1,
+      o.UNSIGNED_BYTE,
+      0,
+      0
+    )), o.viewport(0, 0, h * c, g * c), o.clearColor(D[0], D[1], D[2], D[3]), o.clear(o.COLOR_BUFFER_BIT | o.DEPTH_BUFFER_BIT), o.drawArrays(o.POINTS, 0, R);
+  }, [
+    r,
+    n,
+    s,
+    N,
+    f,
+    c,
+    R,
+    h,
+    g,
+    D
+  ]), /* @__PURE__ */ k(
+    "div",
+    {
+      ref: _,
+      className: A,
+      style: {
+        position: "relative",
+        lineHeight: 0,
+        width: e ? `${e}px` : "100%",
+        height: t ? `${t}px` : "100%",
+        ...Ee
+      },
+      children: [
+        /* @__PURE__ */ G(
+          "canvas",
+          {
+            ref: B,
+            width: h * c,
+            height: g * c,
+            style: {
+              width: `${h}px`,
+              height: `${g}px`,
+              ...i ? { border: "1px dashed #c00" } : {}
+            }
+          }
+        ),
+        u && /* @__PURE__ */ G(
+          lt,
+          {
+            lassoPath: Be,
+            width: h,
+            height: g,
+            isDrawing: Fe
+          }
+        ),
+        i && /* @__PURE__ */ G(at, { count: R, camera: N, lassoMetrics: P })
+      ]
+    }
+  );
+}
+const gt = 1e6;
+function _t({
+  points: e,
+  width: t,
+  height: r,
+  initialCamera: n = fe,
+  theme: i,
+  pixelRatio: c,
+  enableLasso: s = !0,
+  enablePanZoom: a = !0,
+  debug: u = !1,
+  onSelectionChange: d,
+  lassoRealtimeThreshold: S = gt,
+  controlled: m
+}) {
+  const [v, p] = I(n), f = m?.camera !== void 0, A = f && m?.camera ? m.camera : v, { selectedIndices: _, handlePointClick: L, setSelection: h } = De(), [g, B] = I(
+    /* @__PURE__ */ new Set()
+  ), { positions: F, colors: C } = q(() => He(e), [e]), P = Z(
+    (y) => {
+      m?.onCameraChange && m.onCameraChange(y), f || p(y);
+    },
+    [m?.onCameraChange, f]
+  ), T = q(
+    () => de(
+      e.length,
+      _.size > 0 ? _ : void 0,
+      g.size > 0 ? g : void 0
+    ),
+    [e.length, _, g]
+  );
+  return /* @__PURE__ */ G(
+    dt,
+    {
+      width: t,
+      height: r,
+      positions: F,
+      colors: C,
+      flags: T,
+      camera: A,
+      onCameraChange: P,
+      onPointClick: (y) => {
+        L(y), d && d(y !== null ? /* @__PURE__ */ new Set([y]) : /* @__PURE__ */ new Set());
+      },
+      panZoomEnabled: a,
+      lassoEnabled: s,
+      onLassoComplete: (y) => {
+        B(/* @__PURE__ */ new Set()), h(y), d && d(y);
+      },
+      onLassoUpdate: (y) => {
+        e.length >= S || B((z) => z.size === y.size && [...z].every((K) => y.has(K)) ? z : y);
+      },
+      theme: i,
+      pixelRatio: c,
+      debug: u
+    }
+  );
+}
+export {
+  fe as DEFAULT_CAMERA,
+  _t as Scatterplot,
+  dt as ScatterplotGL,
+  et as calculateBounds,
+  de as createFlagBuffer,
+  Se as createTheme,
+  pt as darkTheme,
+  ve as dataPointToScreen,
+  ne as defaultTheme,
+  ot as findClosestPointRaw,
+  ue as findPointsInLassoRaw,
+  Ne as hexToRgba,
+  St as highContrastTheme,
+  Qe as lightTheme,
+  tt as normalizePositionsIsotropic,
+  He as pointsToBuffers,
+  Xe as useContainerSize,
+  De as useSelection
+};
+//# sourceMappingURL=scatterplot.js.map