@hema-to/regl-scatterplot 1.14.1 → 1.16.0-hemato.0

package/dist/types.d.ts

@@ -10,14 +10,13 @@ type Value = 'value' | 'value2' | 'valueB' | 'valueW' | 'w';
 type DataEncoding = Category | Value;
 type PointDataEncoding = DataEncoding | 'inherit' | 'segment';
 
-type KeyAction = 'lasso' | 'rotate' | 'merge';
+type KeyAction = 'lasso' | 'rotate' | 'merge' | 'intersect' | 'remove';
 type KeyMap = Record<'alt' | 'cmd' | 'ctrl' | 'meta' | 'shift', KeyAction>;
 
 type MouseMode = 'panZoom' | 'lasso' | 'rotate';
 
 type PointScaleMode = 'constant' | 'asinh' | 'linear';
 
-// biome-ignore lint/style/useNamingConvention: ZWData are three words, z, w, and data
 type ZWDataType = 'continuous' | 'categorical';
 
 // biome-ignore lint/suspicious/noExplicitAny: Untyped external library
@@ -96,14 +95,12 @@ interface BaseAnnotation {
   lineWidth?: number;
 }
 
-// biome-ignore lint/style/useNamingConvention: HLine stands for HorizontalLine
 interface AnnotationHLine extends BaseAnnotation {
   y: number;
   x1?: number;
   x2?: number;
 }
 
-// biome-ignore lint/style/useNamingConvention: HLine stands for VerticalLine
 interface AnnotationVLine extends BaseAnnotation {
   x: number;
   y1?: number;
@@ -156,13 +153,13 @@ interface BaseOptions {
   aspectRatio: number;
   annotationLineColor: Color;
   annotationLineWidth: number;
-  // biome-ignore lint/style/useNamingConvention: HVLine stands for HorizontalVerticalLine
   annotationHVLineLimit: number;
   // Nullifiable
   backgroundImage: null | import('regl').Texture2D | string;
   colorBy: null | DataEncoding;
   sizeBy: null | DataEncoding;
   opacityBy: null | DataEncoding;
+  pointOrder: null | number[] | Int32Array | Uint32Array;
   xScale: null | Scale;
   yScale: null | Scale;
   pointScaleMode: PointScaleMode;
@@ -171,7 +168,6 @@ interface BaseOptions {
   pixelAligned: boolean;
 }
 
-// biome-ignore lint/style/useNamingConvention: KDBush is a library name
 export interface CreateKDBushOptions {
   node: number;
   useWorker: boolean;
@@ -295,7 +291,10 @@ export type Events = import('pub-sub-es').Event<
     { coordinates: number[] }
   > &
   import('pub-sub-es').Event<'pointOver' | 'pointOut', number> &
-  import('pub-sub-es').Event<'select' | 'focus', { points: number[] }> &
+  import('pub-sub-es').Event<
+    'select' | 'focus',
+    { points: number[]; lassoMode: LassoOptions['mode'] }
+  > &
   import('pub-sub-es').Event<'points', { points: number[][] }> &
   import('pub-sub-es').Event<'transitionEnd', import('regl').Regl> &
   import('pub-sub-es').Event<

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hema-to/regl-scatterplot",
-  "version": "1.14.1+1.0.1",
+  "version": "1.16.0-hemato.0",
   "description": "A WebGL-Powered Scalable Interactive Scatter Plot Library",
   "author": "Fritz Lekschas",
   "keywords": [
@@ -39,10 +39,10 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@flekschas/utils": "^0.32.2",
+    "@flekschas/utils": "^0.33.0",
     "dom-2d-camera": "^2.2.6",
-    "earcut": "^3.0.1",
-    "gl-matrix": "~3.4.3",
+    "earcut": "^3.0.2",
+    "gl-matrix": "~3.4.4",
     "pub-sub-es": "~3.0.0",
     "regl": "~2.1.1",
     "regl-line": "~1.1.1"
@@ -52,49 +52,49 @@
     "regl": "~2.1.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.0",
-    "@babel/plugin-transform-regenerator": "^7.25.9",
+    "@babel/core": "^7.28.6",
+    "@babel/plugin-transform-regenerator": "^7.28.6",
     "@babel/polyfill": "^7.12.1",
-    "@babel/preset-env": "^7.26.0",
-    "@biomejs/biome": "^1.9.4",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^28.0.1",
+    "@babel/preset-env": "^7.28.6",
+    "@biomejs/biome": "^2.3.11",
+    "@rollup/plugin-babel": "^6.1.0",
+    "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-json": "^6.0.0",
-    "@rollup/plugin-node-resolve": "^15.3.0",
-    "@rollup/plugin-terser": "^0.4.3",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^1.0.0",
     "@tweakpane/core": "^2.0.5",
-    "@types/d3-scale": "^4.0.6",
-    "@types/node": "^22.9.3",
-    "@vitest/browser": "^3.0.9",
-    "@vitest/coverage-v8": "^3.0.9",
-    "apache-arrow": "^18.0.0",
-    "browser-env": "^3.3.0",
+    "@types/d3-scale": "^4.0.9",
+    "@types/node": "^25.0.8",
+    "@vitest/browser": "^4.0.17",
+    "@vitest/browser-playwright": "^4.0.17",
+    "@vitest/coverage-v8": "^4.0.17",
+    "apache-arrow": "^21.1.0",
     "d3-axis": "^3.0.0",
     "d3-random": "^3.0.1",
     "d3-scale": "^4.0.2",
     "d3-selection": "^3.0.0",
     "esm": "^3.2.25",
-    "gh-pages": "^6.2.0",
+    "gh-pages": "^6.3.0",
     "merge": "^2.1.1",
-    "playwright": "^1.49.0",
-    "rollup": "^4.27.4",
+    "playwright": "^1.57.0",
+    "rollup": "^4.55.1",
     "rollup-plugin-filesize": "^10.0.0",
     "tweakpane": "^4.0.5",
-    "typescript": "~5.7.2",
-    "vite": "^6.2.3",
+    "typescript": "~5.9.3",
+    "vite": "^7.3.1",
     "vite-plugin-virtual-html-template": "^1.1.0",
-    "vitest": "^3.0.9"
+    "vitest": "^4.0.17"
   },
   "engines": {
     "npm": ">=7.0.0",
     "node": ">=20.0.0"
   },
-  "homepage": "https://github.com/flekschas/regl-scatterplot",
+  "homepage": "https://github.com/hema-to/regl-scatterplot",
   "repository": {
     "type": "git",
-    "url": "git://github.com/flekschas/regl-scatterplot.git"
+    "url": "git+https://github.com/hema-to/regl-scatterplot.git"
   },
   "bugs": {
-    "url": "https://github.com/flekschas/regl-scatterplot/issues"
+    "url": "https://github.com/hema-to/regl-scatterplot/issues"
   }
 }

package/src/constants.js

@@ -112,6 +112,7 @@ export const DEFAULT_POINT_SIZE = 6;
 export const DEFAULT_POINT_SIZE_SELECTED = 2;
 export const DEFAULT_POINT_OUTLINE_WIDTH = 2;
 export const DEFAULT_SIZE_BY = null;
+export const DEFAULT_POINT_ORDER = null;
 export const DEFAULT_POINT_CONNECTION_SIZE = 2;
 export const DEFAULT_POINT_CONNECTION_SIZE_ACTIVE = 2;
 export const DEFAULT_POINT_CONNECTION_SIZE_BY = null;

package/src/index.js

@@ -11,21 +11,9 @@ import earcut from 'earcut';
 import { mat4, vec4 } from 'gl-matrix';
 import createPubSub from 'pub-sub-es';
 import createLine from 'regl-line';
-
-import createKdbush from './kdbush.js';
-import createLassoManager from './lasso-manager/index.js';
-import createRenderer from './renderer.js';
-
+import { version } from '../package.json';
 import BG_FS from './bg.fs';
 import BG_VS from './bg.vs';
-import POINT_SIMPLE_FS from './point-simple.fs';
-import POINT_UPDATE_FS from './point-update.fs';
-import POINT_UPDATE_VS from './point-update.vs';
-import POINT_FS from './point.fs';
-import createVertexShader from './point.vs';
-
-import createSplineCurve from './spline-curve.js';
-
 import {
   AUTO,
   CATEGORICAL,
@@ -88,6 +76,7 @@ import {
   DEFAULT_POINT_CONNECTION_SIZE,
   DEFAULT_POINT_CONNECTION_SIZE_ACTIVE,
   DEFAULT_POINT_CONNECTION_SIZE_BY,
+  DEFAULT_POINT_ORDER,
   DEFAULT_POINT_OUTLINE_WIDTH,
   DEFAULT_POINT_SCALE_MODE,
   DEFAULT_POINT_SIZE,
@@ -107,35 +96,43 @@ import {
   ERROR_IS_DRAWING,
   ERROR_POINTS_NOT_DRAWN,
   FLOAT_BYTES,
-  KEYS,
-  KEY_ACTIONS,
   KEY_ACTION_INTERSECT,
   KEY_ACTION_LASSO,
   KEY_ACTION_MERGE,
   KEY_ACTION_REMOVE,
   KEY_ACTION_ROTATE,
+  KEY_ACTIONS,
   KEY_ALT,
   KEY_CMD,
   KEY_CTRL,
   KEY_META,
   KEY_SHIFT,
+  KEYS,
   LASSO_BRUSH_MIN_MIN_DIST,
   LASSO_CLEAR_EVENTS,
   LASSO_CLEAR_ON_DESELECT,
   LASSO_CLEAR_ON_END,
   LONG_CLICK_TIME,
   MIN_POINT_SIZE,
-  MOUSE_MODES,
   MOUSE_MODE_LASSO,
   MOUSE_MODE_PANZOOM,
   MOUSE_MODE_ROTATE,
+  MOUSE_MODES,
   SINGLE_CLICK_DELAY,
   SKIP_DEPRECATION_VALUE_TRANSLATION,
   VALUE_ZW_DATA_TYPES,
   W_NAMES,
   Z_NAMES,
 } from './constants.js';
-
+import createKdbush, { kdbushFrom } from './kdbush.js';
+import createLassoManager from './lasso-manager/index.js';
+import POINT_FS from './point.fs';
+import createVertexShader from './point.vs';
+import POINT_SIMPLE_FS from './point-simple.fs';
+import POINT_UPDATE_FS from './point-update.fs';
+import POINT_UPDATE_VS from './point-update.vs';
+import createRenderer from './renderer.js';
+import createSplineCurve from './spline-curve.js';
 import {
   checkReglExtensions as checkSupport,
   clip,
@@ -150,7 +147,7 @@ import {
   isHorizontalLine,
   isMultipleColors,
   isPointInPolygon,
-  isPolygon,
+  isPolygonAnnotation,
   isPositiveNumber,
   isRect,
   isSameRgbas,
@@ -158,16 +155,16 @@ import {
   isString,
   isValidBBox,
   isVerticalLine,
+  isVertices,
   limit,
   max,
   min,
   rgbBrightness,
   toArrayOrientedPoints,
   toRgba,
+  verticesToPolygon,
 } from './utils.js';
 
-import { version } from '../package.json';
-
 const deprecations = {
   showRecticle: {
     replacement: 'showReticle',
@@ -320,6 +317,7 @@ const createScatterplot = (
     opacityInactiveMax = DEFAULT_OPACITY_INACTIVE_MAX,
     opacityInactiveScale = DEFAULT_OPACITY_INACTIVE_SCALE,
     sizeBy = DEFAULT_SIZE_BY,
+    pointOrder = DEFAULT_POINT_ORDER,
     pointScaleMode = DEFAULT_POINT_SCALE_MODE,
     height = DEFAULT_HEIGHT,
     width = DEFAULT_WIDTH,
@@ -395,9 +393,7 @@ const createScatterplot = (
   let pointConnections;
   let pointConnectionMap;
   let computingPointConnectionCurves;
-  // biome-ignore lint/style/useNamingConvention: HLine stands for HorizontalLine
   let reticleHLine;
-  // biome-ignore lint/style/useNamingConvention: VLine stands for VerticalLine
   let reticleVLine;
   let computedPointSizeMouseDetection;
   let lassoInitiatorTimeout;
@@ -530,6 +526,8 @@ const createScatterplot = (
   let normalPointsIndexBuffer; // Buffer holding the indices pointing to the correct texel
   let selectedPointsIndexBuffer; // Used for pointing to the selected texels
   let hoveredPointIndexBuffer; // Used for pointing to the hovered texels
+  let pointOrderIndices = null; // Validated ordered point indices (Int32Array or null)
+  let pointOrderIndex = null; // Float32Array of tex coords in pointOrder sequence
 
   let cameraZoomTargetStart; // Stores the start (i.e., current) camera target for zooming
   let cameraZoomTargetEnd; // Stores the end camera target for zooming
@@ -552,9 +550,7 @@ const createScatterplot = (
   let isAnnotationsDrawn = false;
   let isMouseOverCanvasChecked = false;
 
-  // biome-ignore lint/style/useNamingConvention: ZDate is not one word
   let valueZDataType = CATEGORICAL;
-  // biome-ignore lint/style/useNamingConvention: WDate is not one word
   let valueWDataType = CATEGORICAL;
 
   /** @type{number|undefined} */
@@ -628,9 +624,7 @@ const createScatterplot = (
     return points;
   };
 
-  // biome-ignore lint/style/useNamingConvention: BBox stands for BoundingBox
   const getPointsInBBox = (x0, y0, x1, y1) => {
-    // biome-ignore lint/style/useNamingConvention: BBox stands for BoundingBox
     const pointsInBBox = spatialIndex.range(x0, y0, x1, y1);
     if (isPointsFiltered) {
       return pointsInBBox.filter((i) => filteredPointsSet.has(i));
@@ -645,7 +639,6 @@ const createScatterplot = (
     const pointSizeNdc = getPointSizeNdc(4);
 
     // Get all points within a close range
-    // biome-ignore lint/style/useNamingConvention: BBox stands for BoundingBox
     const pointsInBBox = getPointsInBBox(
       xNdc - pointSizeNdc,
       yNdc - pointSizeNdc,
@@ -683,7 +676,6 @@ const createScatterplot = (
     }
 
     // ...to efficiently preselect potentially selected points
-    // biome-ignore lint/style/useNamingConvention: BBox stands for BoundingBox
     const pointsInBBox = getPointsInBBox(...bBox);
     // next we test each point in the bounding box if it is in the polygon too
     const pointsInPolygon = [];
@@ -788,6 +780,40 @@ const createScatterplot = (
     }
   };
 
+  /**
+   * Convert vertices from data space to GL space
+   * @param {Array<[number, number]>} vertices - Vertices in data space
+   * @returns {number[] | null} Flat array of GL coordinates or null if scales not defined
+   */
+  const verticesFromDataToGl = (vertices) => {
+    // Check if xScale/yScale are defined
+    if (!(xScale && yScale)) {
+      // biome-ignore lint/suspicious/noConsole: User warning for missing configuration
+      console.warn(
+        'xScale and yScale must be defined for programmatic lasso selection',
+      );
+      return null;
+    }
+
+    const verticesGl = [];
+    for (const [x, y] of vertices) {
+      // Step 1: Data space → normalized [0, 1]
+      const xNorm = (x - xDomainStart) / xDomainSize;
+      const yNorm = (y - yDomainStart) / yDomainSize;
+
+      // Step 2: Normalized [0, 1] → NDC [-1, 1]
+      const xNdc = xNorm * 2 - 1;
+      const yNdc = yNorm * 2 - 1;
+
+      // Step 3: NDC → GL space (camera transform)
+      const [xGl, yGl] = getScatterGlPos(xNdc, yNdc);
+
+      verticesGl.push(xGl, yGl);
+    }
+
+    return verticesGl;
+  };
+
   /**
    * Select and highlight a set of points
    * @param {number | number[]} pointIdxs
@@ -885,12 +911,53 @@ const createScatterplot = (
     setPointConnectionColorState(selectedPoints, 1);
 
     if (!preventEvent) {
-      pubSub.publish('select', { points: selectedPoints });
+      pubSub.publish('select', { points: selectedPoints, lassoMode });
     }
 
     draw = true;
   };
 
+  /**
+   * Lasso a certain area and select contained points
+   * @param {[number, number][]} vertices - Lasso vertices in either data space (default) or GL space
+   * @param {import('./types').ScatterplotMethodOptions['lasso']}
+   */
+  const lassoSelect = (
+    vertices,
+    { merge = false, remove = false, isGl = false } = {},
+  ) => {
+    if (!isVertices(vertices)) {
+      throw new Error(
+        'Lasso selection requires at least 3 vertices as [x, y] coordinate pairs',
+      );
+    }
+
+    const closedPolygon = verticesToPolygon(vertices);
+
+    let polygonGl;
+    let polygonGlFlat;
+
+    if (isGl) {
+      polygonGl = closedPolygon;
+      polygonGlFlat = closedPolygon.flat();
+    } else {
+      polygonGlFlat = verticesFromDataToGl(closedPolygon);
+
+      if (!polygonGlFlat) {
+        throw new Error(
+          'xScale and yScale must be defined to convert lasso vertices from data space to GL space',
+        );
+      }
+
+      polygonGl = [];
+      for (let i = 0; i < polygonGlFlat.length; i += 2) {
+        polygonGl.push([polygonGlFlat[i], polygonGlFlat[i + 1]]);
+      }
+    }
+
+    lassoEnd(polygonGl, polygonGlFlat, { merge, remove });
+  };
+
   /**
    * @param {number} point
    * @param {import('./types').ScatterplotMethodOptions['hover']} options
@@ -1567,6 +1634,44 @@ const createScatterplot = (
   const setSizeBy = (type) => {
     sizeBy = getEncodingType(type, DEFAULT_SIZE_BY);
   };
+  const setPointOrder = (newPointOrder) => {
+    if (newPointOrder === null || newPointOrder === undefined) {
+      pointOrder = null;
+    } else if (Array.isArray(newPointOrder) || ArrayBuffer.isView(newPointOrder)) {
+      pointOrder = newPointOrder;
+    } else {
+      return;
+    }
+
+    if (isPointsDrawn) {
+      computePointOrderIndex();
+      if (isPointsFiltered) {
+        // Re-apply filter respecting the new point order
+        const filteredPointsBuffer = [];
+        if (pointOrderIndices !== null) {
+          for (let i = 0; i < pointOrderIndices.length; i++) {
+            if (filteredPointsSet.has(pointOrderIndices[i])) {
+              filteredPointsBuffer.push.apply(
+                filteredPointsBuffer,
+                indexToStateTexCoord(pointOrderIndices[i]),
+              );
+            }
+          }
+        } else {
+          const sortedFiltered = insertionSort([...filteredPointsSet]);
+          for (const idx of sortedFiltered) {
+            filteredPointsBuffer.push.apply(
+              filteredPointsBuffer,
+              indexToStateTexCoord(idx),
+            );
+          }
+        }
+        normalPointsIndexBuffer.subdata(filteredPointsBuffer);
+      } else {
+        normalPointsIndexBuffer.subdata(getEffectivePointIndex(numPoints));
+      }
+    }
+  };
   const setPointConnectionColorBy = (type) => {
     pointConnectionColorBy = getEncodingType(
       type,
@@ -1740,10 +1845,8 @@ const createScatterplot = (
       blend: {
         enable: !disableAlphaBlending,
         func: {
-          // biome-ignore lint/style/useNamingConvention: Regl specific
           srcRGB: 'src alpha',
           srcAlpha: 'one',
-          // biome-ignore lint/style/useNamingConvention: Regl specific
           dstRGB: 'one minus src alpha',
           dstAlpha: 'one minus src alpha',
         },
@@ -1884,10 +1987,8 @@ const createScatterplot = (
     blend: {
       enable: true,
       func: {
-        // biome-ignore lint/style/useNamingConvention: Regl specific
         srcRGB: 'src alpha',
         srcAlpha: 'one',
-        // biome-ignore lint/style/useNamingConvention: Regl specific
         dstRGB: 'one minus src alpha',
         dstAlpha: 'one minus src alpha',
       },
@@ -1965,6 +2066,51 @@ const createScatterplot = (
     return index;
   };
 
+  const computePointOrderIndex = () => {
+    if (pointOrder === null) {
+      pointOrderIndices = null;
+      pointOrderIndex = null;
+      return;
+    }
+
+    const includedSet = new Set();
+    const orderedIndices = [];
+
+    for (let i = 0; i < pointOrder.length; i++) {
+      const idx = pointOrder[i];
+      if (
+        Number.isFinite(idx) &&
+        idx >= 0 &&
+        idx < numPoints &&
+        !includedSet.has(idx)
+      ) {
+        orderedIndices.push(idx);
+        includedSet.add(idx);
+      }
+    }
+
+    // Append any missing indices in sequential order
+    for (let i = 0; i < numPoints; i++) {
+      if (!includedSet.has(i)) {
+        orderedIndices.push(i);
+      }
+    }
+
+    pointOrderIndices = orderedIndices;
+
+    pointOrderIndex = new Float32Array(orderedIndices.length * 2);
+    let j = 0;
+    for (let i = 0; i < orderedIndices.length; i++) {
+      const texCoord = indexToStateTexCoord(orderedIndices[i]);
+      pointOrderIndex[j] = texCoord[0];
+      pointOrderIndex[j + 1] = texCoord[1];
+      j += 2;
+    }
+  };
+
+  const getEffectivePointIndex = (count) =>
+    pointOrderIndex !== null ? pointOrderIndex : createPointIndex(count);
+
   const createStateTexture = (newPoints, dataTypes = {}) => {
     const numNewPoints = newPoints.length;
     stateTexRes = Math.max(2, Math.ceil(Math.sqrt(numNewPoints)));
@@ -2056,9 +2202,18 @@ const createScatterplot = (
       const preventFilterReset =
         options?.preventFilterReset && newPoints.length === numPoints;
 
+      const prevNumPoints = numPoints;
       numPoints = newPoints.length;
       numPointsInView = numPoints;
 
+      // Reset pointOrder when re-drawing with different-length data
+      // (ordering becomes meaningless). Skip on first draw (prevNumPoints === 0).
+      if (prevNumPoints > 0 && numPoints !== prevNumPoints) {
+        pointOrder = null;
+        pointOrderIndices = null;
+        pointOrderIndex = null;
+      }
+
       if (stateTex) {
         stateTex.destroy();
       }
@@ -2068,10 +2223,11 @@ const createScatterplot = (
       });
 
       if (!preventFilterReset) {
+        computePointOrderIndex();
         normalPointsIndexBuffer({
           usage: 'static',
           type: 'float',
-          data: createPointIndex(numPoints),
+          data: getEffectivePointIndex(numPoints),
         });
       }
 
@@ -2312,7 +2468,7 @@ const createScatterplot = (
   const unfilter = ({ preventEvent = false } = {}) => {
     isPointsFiltered = false;
     filteredPointsSet.clear();
-    normalPointsIndexBuffer.subdata(createPointIndex(numPoints));
+    normalPointsIndexBuffer.subdata(getEffectivePointIndex(numPoints));
 
     return new Promise((resolve) => {
       const finish = () => {
@@ -2371,9 +2527,20 @@ const createScatterplot = (
       }
     }
 
-    const sortedFilteredPoints = insertionSort([...filteredPoints]);
+    let orderedFilteredPoints;
+    if (pointOrderIndices !== null) {
+      // Maintain the custom point order within the filtered set
+      orderedFilteredPoints = [];
+      for (let i = 0; i < pointOrderIndices.length; i++) {
+        if (filteredPointsSet.has(pointOrderIndices[i])) {
+          orderedFilteredPoints.push(pointOrderIndices[i]);
+        }
+      }
+    } else {
+      orderedFilteredPoints = insertionSort([...filteredPoints]);
+    }
 
-    for (const pointIdx of sortedFilteredPoints) {
+    for (const pointIdx of orderedFilteredPoints) {
       filteredPointsBuffer.push.apply(
         filteredPointsBuffer,
         indexToStateTexCoord(pointIdx),
@@ -2760,7 +2927,7 @@ const createScatterplot = (
           continue;
         }
 
-        if (isPolygon(annotation)) {
+        if (isPolygonAnnotation(annotation)) {
           newPoints.push(annotation.vertices.flatMap(identity));
           addColorAndWidth(annotation);
         }
@@ -2801,7 +2968,6 @@ const createScatterplot = (
    * @param {number[]} pointIdxs - A list of point indices
    * @returns {import('./types').Rect} The bounding box
    */
-  // biome-ignore lint/style/useNamingConvention: BBox stands for BoundingBox
   const getBBoxOfPoints = (pointIdxs) => {
     let xMin = Number.POSITIVE_INFINITY;
     let xMax = Number.NEGATIVE_INFINITY;
@@ -2838,7 +3004,6 @@ const createScatterplot = (
       // Vertical field of view
       // The Arc Tangent is based on the original camera position. Otherwise
       // we would have to do `Math.atan(1 / camera.view[5])`
-      // biome-ignore lint/style/useNamingConvention: FOV stands for field of view
       const vFOV = 2 * Math.atan(1);
 
       const aspectRatio = viewAspectRatio / dataAspectRatio;
@@ -3238,7 +3403,6 @@ const createScatterplot = (
     reticleVLine.setStyle({ color: reticleColor });
   };
 
-  // biome-ignore lint/style/useNamingConvention: XScale are two words
   const setXScale = (newXScale) => {
     if (!newXScale) {
       return;
@@ -3251,7 +3415,6 @@ const createScatterplot = (
     updateScales();
   };
 
-  // biome-ignore lint/style/useNamingConvention: YScale are two words
   const setYScale = (newYScale) => {
     if (!newYScale) {
       return;
@@ -3425,7 +3588,6 @@ const createScatterplot = (
     annotationLineWidth = +newAnnotationLineWidth;
   };
 
-  // biome-ignore lint/style/useNamingConvention: HVLine stands for horizontal vertical line
   const setAnnotationHVLineLimit = (newAnnotationHVLineLimit) => {
     annotationHVLineLimit = +newAnnotationHVLineLimit;
   };
@@ -3502,6 +3664,10 @@ const createScatterplot = (
       return sizeBy;
     }
 
+    if (property === 'pointOrder') {
+      return pointOrder !== null ? [...pointOrder] : null;
+    }
+
     if (property === 'deselectOnDblClick') {
       return deselectOnDblClick;
     }
@@ -3888,6 +4054,10 @@ const createScatterplot = (
       setSizeBy(properties.sizeBy);
     }
 
+    if (properties.pointOrder !== undefined) {
+      setPointOrder(properties.pointOrder);
+    }
+
     if (properties.opacity !== undefined) {
       setOpacity(properties.opacity);
     }
@@ -4587,6 +4757,9 @@ const createScatterplot = (
   init();
 
   return {
+    attachSpatialIndex: (buffer) => {
+      spatialIndex = kdbushFrom(buffer);
+    },
     /**
      * Get whether the browser supports all necessary WebGL features
      * @return {boolean} If `true` the browser supports all necessary WebGL features
@@ -4610,6 +4783,7 @@ const createScatterplot = (
     get,
     getScreenPosition,
     hover,
+    lassoSelect,
     redraw,
     refresh: renderer.refresh,
     reset: withDraw(reset),