@vitessce/scatterplot 3.8.8 → 3.8.10

package/dist/{deflate-B59Iec3_.js → deflate-BUOOeR_H.js}

@@ -1,5 +1,5 @@
 import { i as inflate_1 } from "./pako.esm-SxljTded.js";
-import { B as BaseDecoder } from "./index-B9HtnmvK.js";
+import { B as BaseDecoder } from "./index-BgH5JCMh.js";
 class DeflateDecoder extends BaseDecoder {
   decodeBlock(buffer) {
     return inflate_1(new Uint8Array(buffer)).buffer;

package/dist/{index-B9HtnmvK.js → index-BgH5JCMh.js}

@@ -105941,22 +105941,22 @@ function addDecoder(cases, importFn) {
   }
   cases.forEach((c2) => registry$1.set(c2, importFn));
 }
-addDecoder([void 0, 1], () => import("./raw-DAqPf4b8.js").then((m2) => m2.default));
-addDecoder(5, () => import("./lzw-DdQkXqbQ.js").then((m2) => m2.default));
+addDecoder([void 0, 1], () => import("./raw-ChRkwMzK.js").then((m2) => m2.default));
+addDecoder(5, () => import("./lzw-CgToJLS_.js").then((m2) => m2.default));
 addDecoder(6, () => {
   throw new Error("old style JPEG compression is not supported.");
 });
-addDecoder(7, () => import("./jpeg-BRLf1BFV.js").then((m2) => m2.default));
-addDecoder([8, 32946], () => import("./deflate-B59Iec3_.js").then((m2) => m2.default));
-addDecoder(32773, () => import("./packbits-D7iShEMY.js").then((m2) => m2.default));
+addDecoder(7, () => import("./jpeg-DOj-mktM.js").then((m2) => m2.default));
+addDecoder([8, 32946], () => import("./deflate-BUOOeR_H.js").then((m2) => m2.default));
+addDecoder(32773, () => import("./packbits-Co4VqP5m.js").then((m2) => m2.default));
 addDecoder(
   34887,
-  () => import("./lerc-Bm1LBCBR.js").then(async (m2) => {
+  () => import("./lerc-DJ1FEjnQ.js").then(async (m2) => {
     await m2.zstd.init();
     return m2;
   }).then((m2) => m2.default)
 );
-addDecoder(50001, () => import("./webimage-DVQqsXwn.js").then((m2) => m2.default));
+addDecoder(50001, () => import("./webimage-Mf5GLiYz.js").then((m2) => m2.default));
 function decodeRowAcc(row, stride) {
   let length2 = row.length - stride;
   let offset2 = 0;
@@ -138285,8 +138285,18 @@ function forceCollideRects() {
   };
   return force;
 }
-function getPointSizeDevicePixels(devicePixelRatio, zoom, xRange, yRange, width2, height2) {
-  const pointSize = 5e-4;
+const BASE_POINT_SIZE = 5;
+const LARGE_DATASET_CELL_COUNT = 1e4;
+const SMALL_DATASET_CELL_COUNT = 100;
+function getInitialPointSize(numCells = LARGE_DATASET_CELL_COUNT) {
+  return BASE_POINT_SIZE / clamp$4(
+    numCells,
+    SMALL_DATASET_CELL_COUNT,
+    LARGE_DATASET_CELL_COUNT
+  );
+}
+function getPointSizeDevicePixels(devicePixelRatio, zoom, xRange, yRange, width2, height2, numCells) {
+  const pointSize = getInitialPointSize(numCells);
   const pointScreenSizeMax = 10;
   const pointScreenSizeMin = 1 / devicePixelRatio;
   const scaleFactor = 2 ** zoom;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { A, E, S, a, b, f, e, d, c } from "./index-B9HtnmvK.js";
+import { A, E, S, a, b, f, e, d, c } from "./index-BgH5JCMh.js";
 export {
   A as AbstractSpatialOrScatterplot,
   E as EmptyMessage,

package/dist/{jpeg-BRLf1BFV.js → jpeg-DOj-mktM.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-B9HtnmvK.js";
+import { B as BaseDecoder } from "./index-BgH5JCMh.js";
 const dctZigZag = new Int32Array([
   0,
   1,

package/dist/{lerc-Bm1LBCBR.js → lerc-DJ1FEjnQ.js}

@@ -1,5 +1,5 @@
 import { i as inflate_1 } from "./pako.esm-SxljTded.js";
-import { g as getDefaultExportFromCjs, B as BaseDecoder } from "./index-B9HtnmvK.js";
+import { g as getDefaultExportFromCjs, B as BaseDecoder } from "./index-BgH5JCMh.js";
 const LercParameters = {
   AddCompression: 1
 };

package/dist/{lzw-DdQkXqbQ.js → lzw-CgToJLS_.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-B9HtnmvK.js";
+import { B as BaseDecoder } from "./index-BgH5JCMh.js";
 const MIN_BITS = 9;
 const CLEAR_CODE = 256;
 const EOI_CODE = 257;

package/dist/{packbits-D7iShEMY.js → packbits-Co4VqP5m.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-B9HtnmvK.js";
+import { B as BaseDecoder } from "./index-BgH5JCMh.js";
 class PackbitsDecoder extends BaseDecoder {
   decodeBlock(buffer) {
     const dataView = new DataView(buffer);

package/dist/{raw-DAqPf4b8.js → raw-ChRkwMzK.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-B9HtnmvK.js";
+import { B as BaseDecoder } from "./index-BgH5JCMh.js";
 class RawDecoder extends BaseDecoder {
   decodeBlock(buffer) {
     return buffer;

package/dist/{webimage-DVQqsXwn.js → webimage-Mf5GLiYz.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-B9HtnmvK.js";
+import { B as BaseDecoder } from "./index-BgH5JCMh.js";
 class WebImageDecoder extends BaseDecoder {
   constructor() {
     super();

package/dist-tsc/shared-spatial-scatterplot/dynamic-opacity.d.ts

@@ -1,3 +1,45 @@
-export function getPointSizeDevicePixels(devicePixelRatio: any, zoom: any, xRange: any, yRange: any, width: any, height: any): any;
-export function getPointOpacity(zoom: any, xRange: any, yRange: any, width: any, height: any, numCells: any, avgFillDensity: any): any;
+/**
+ * Calculates initial point size based on dataset size.
+ * The point size decreases as the number of cells increases to avoid overplotting.
+ * The maximum point size is 0.05, for small datasets.
+ * The minimum point size is 0.0005, for large datasets.
+ * @param {number} numCells
+ * @returns {number} Initial point size.
+ */
+export function getInitialPointSize(numCells?: number): number;
+/**
+ * Calculates point size in device pixels based on dataset size and view parameters.
+ * Reference: https://observablehq.com/@rreusser/selecting-the-right-opacity-for-2d-point-clouds
+ * Reference: https://observablehq.com/@bmschmidt/dot-density-election-maps-with-webgl
+ *
+ * @param {number} devicePixelRatio The device pixel ratio.
+ * @param {number} zoom The current zoom level.
+ * @param {number} xRange The range of the x-axis.
+ * @param {number} yRange The range of the y-axis.
+ * @param {number} width The width of the viewport.
+ * @param {number} height The height of the viewport.
+ * @param {number} numCells The number of cells in the dataset.
+ * @returns {number} Point size in device pixels.
+ *
+ */
+export function getPointSizeDevicePixels(devicePixelRatio: number, zoom: number, xRange: number, yRange: number, width: number, height: number, numCells: number): number;
+/**
+ * Calculates point opacity based on dataset size and view parameters.
+ * Reference: https://observablehq.com/@rreusser/selecting-the-right-opacity-for-2d-point-clouds
+ *
+ * @param {*} zoom The current zoom level.
+ * @param {number} zoom The current zoom level.
+ * @param {number} xRange The range of the x-axis.
+ * @param {number} yRange The range of the y-axis.
+ * @param {number} width The width of the viewport.
+ * @param {number} height The height of the viewport.
+ * @param {number} numCells The number of cells in the dataset.
+ * @param {number} avgFillDensity Optional average fill density to use instead of calculating one.
+ * @returns {number} The calculated point opacity.
+ */
+export function getPointOpacity(zoom: any, xRange: number, yRange: number, width: number, height: number, numCells: number, avgFillDensity: number): number;
+export const LARGE_DATASET_CELL_COUNT: 10000;
+export const SMALL_DATASET_CELL_COUNT: 100;
+export const LARGE_DATASET_POINT_SIZE: number;
+export const SMALL_DATASET_POINT_SIZE: number;
 //# sourceMappingURL=dynamic-opacity.d.ts.map

package/dist-tsc/shared-spatial-scatterplot/dynamic-opacity.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-opacity.d.ts","sourceRoot":"","sources":["../../src/shared-spatial-scatterplot/dynamic-opacity.js"],"names":[],"mappings":"AAKA,mIA0BC;AAGD,uIA6BC"}
+{"version":3,"file":"dynamic-opacity.d.ts","sourceRoot":"","sources":["../../src/shared-spatial-scatterplot/dynamic-opacity.js"],"names":[],"mappings":"AAYA;;;;;;;GAOG;AACH,+CAHW,MAAM,GACJ,MAAM,CAQlB;AAED;;;;;;;;;;;;;;GAcG;AACH,2DAVW,MAAM,QACN,MAAM,UACN,MAAM,UACN,MAAM,SACN,MAAM,UACN,MAAM,YACN,MAAM,GACJ,MAAM,CAgClB;AAED;;;;;;;;;;;;;GAaG;AACH,sCAVW,GAAC,UAED,MAAM,UACN,MAAM,SACN,MAAM,UACN,MAAM,YACN,MAAM,kBACN,MAAM,GACJ,MAAM,CA+BlB;AAhHD,6CAA8C;AAC9C,2CAA4C;AAE5C,8CAAmF;AACnF,8CAAmF"}

package/dist-tsc/shared-spatial-scatterplot/dynamic-opacity.js

@@ -1,10 +1,39 @@
 import { deck } from '@vitessce/gl';
 import { clamp } from 'lodash-es';
-// Reference: https://observablehq.com/@rreusser/selecting-the-right-opacity-for-2d-point-clouds
-// Reference: https://observablehq.com/@bmschmidt/dot-density-election-maps-with-webgl
-export function getPointSizeDevicePixels(devicePixelRatio, zoom, xRange, yRange, width, height) {
-    // Size of a point, in units of the diagonal axis.
-    const pointSize = 0.0005;
+const BASE_POINT_SIZE = 5;
+export const LARGE_DATASET_CELL_COUNT = 10000;
+export const SMALL_DATASET_CELL_COUNT = 100;
+export const LARGE_DATASET_POINT_SIZE = BASE_POINT_SIZE / LARGE_DATASET_CELL_COUNT;
+export const SMALL_DATASET_POINT_SIZE = BASE_POINT_SIZE / SMALL_DATASET_CELL_COUNT;
+/**
+ * Calculates initial point size based on dataset size.
+ * The point size decreases as the number of cells increases to avoid overplotting.
+ * The maximum point size is 0.05, for small datasets.
+ * The minimum point size is 0.0005, for large datasets.
+ * @param {number} numCells
+ * @returns {number} Initial point size.
+ */
+export function getInitialPointSize(numCells = LARGE_DATASET_CELL_COUNT) {
+    return BASE_POINT_SIZE / clamp(numCells, SMALL_DATASET_CELL_COUNT, LARGE_DATASET_CELL_COUNT);
+}
+/**
+ * Calculates point size in device pixels based on dataset size and view parameters.
+ * Reference: https://observablehq.com/@rreusser/selecting-the-right-opacity-for-2d-point-clouds
+ * Reference: https://observablehq.com/@bmschmidt/dot-density-election-maps-with-webgl
+ *
+ * @param {number} devicePixelRatio The device pixel ratio.
+ * @param {number} zoom The current zoom level.
+ * @param {number} xRange The range of the x-axis.
+ * @param {number} yRange The range of the y-axis.
+ * @param {number} width The width of the viewport.
+ * @param {number} height The height of the viewport.
+ * @param {number} numCells The number of cells in the dataset.
+ * @returns {number} Point size in device pixels.
+ *
+ */
+export function getPointSizeDevicePixels(devicePixelRatio, zoom, xRange, yRange, width, height, numCells) {
+    // Smaller datasets get larger point sizes
+    const pointSize = getInitialPointSize(numCells);
     // Point size maximum, in screen pixels.
     const pointScreenSizeMax = 10;
     // Point size minimum, in screen pixels.
@@ -21,7 +50,20 @@ export function getPointSizeDevicePixels(devicePixelRatio, zoom, xRange, yRange,
     const pointSizeDevicePixels = clamp(deviceSize, pointScreenSizeMin, pointScreenSizeMax);
     return pointSizeDevicePixels;
 }
-// Reference: https://observablehq.com/@rreusser/selecting-the-right-opacity-for-2d-point-clouds
+/**
+ * Calculates point opacity based on dataset size and view parameters.
+ * Reference: https://observablehq.com/@rreusser/selecting-the-right-opacity-for-2d-point-clouds
+ *
+ * @param {*} zoom The current zoom level.
+ * @param {number} zoom The current zoom level.
+ * @param {number} xRange The range of the x-axis.
+ * @param {number} yRange The range of the y-axis.
+ * @param {number} width The width of the viewport.
+ * @param {number} height The height of the viewport.
+ * @param {number} numCells The number of cells in the dataset.
+ * @param {number} avgFillDensity Optional average fill density to use instead of calculating one.
+ * @returns {number} The calculated point opacity.
+ */
 export function getPointOpacity(zoom, xRange, yRange, width, height, numCells, avgFillDensity) {
     const N = numCells;
     let minX;

package/dist-tsc/shared-spatial-scatterplot/dynamic-opacity.test.js

@@ -1,6 +1,29 @@
 import { describe, it, expect } from 'vitest';
-import { getPointSizeDevicePixels, getPointOpacity } from './dynamic-opacity.js';
+import { getPointSizeDevicePixels, getPointOpacity, getInitialPointSize, LARGE_DATASET_CELL_COUNT, SMALL_DATASET_CELL_COUNT, LARGE_DATASET_POINT_SIZE, SMALL_DATASET_POINT_SIZE } from './dynamic-opacity.js';
 describe('dynamic-opacity.js', () => {
+    describe('getInitialPointSize', () => {
+        it('returns large point size for small datasets', () => {
+            const numCells = SMALL_DATASET_CELL_COUNT;
+            const pointSize = getInitialPointSize(numCells);
+            expect(pointSize).toBe(SMALL_DATASET_POINT_SIZE);
+        });
+        it('returns small point size for large datasets', () => {
+            const numCells = LARGE_DATASET_CELL_COUNT;
+            const pointSize = getInitialPointSize(numCells);
+            expect(pointSize).toBe(LARGE_DATASET_POINT_SIZE);
+        });
+        it('returns intermediate point size for medium datasets', () => {
+            const numCells = (SMALL_DATASET_CELL_COUNT + LARGE_DATASET_CELL_COUNT) / 2;
+            const pointSize = getInitialPointSize(numCells);
+            expect(pointSize).toBeLessThan(SMALL_DATASET_POINT_SIZE);
+            expect(pointSize).toBeGreaterThan(LARGE_DATASET_POINT_SIZE);
+        });
+        it('handles missing numCells by using default large dataset size', () => {
+            const numCells = undefined;
+            const pointSize = getInitialPointSize(numCells);
+            expect(pointSize).toBe(LARGE_DATASET_POINT_SIZE);
+        });
+    });
     describe('getPointSizeDevicePixels', () => {
         it('calculates point size', () => {
             const devicePixelRatio = 2.0;
@@ -9,7 +32,8 @@ describe('dynamic-opacity.js', () => {
             const yRange = 18;
             const width = 1000;
             const height = 650;
-            const pointSize = getPointSizeDevicePixels(devicePixelRatio, zoom, xRange, yRange, width, height);
+            const numCells = 50000;
+            const pointSize = getPointSizeDevicePixels(devicePixelRatio, zoom, xRange, yRange, width, height, numCells);
             expect(pointSize).toBeCloseTo(0.5);
         });
     });
@@ -17,7 +41,7 @@ describe('dynamic-opacity.js', () => {
         it('calculates point opacity', () => {
             const zoom = null;
             const width = 1000;
-            const height = 650;
+            const height = 1000;
             const xRange = 20;
             const yRange = 18;
             const numCells = 500000;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/scatterplot",
-  "version": "3.8.8",
+  "version": "3.8.10",
   "author": "HIDIVE Lab at HMS",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -21,13 +21,13 @@
     "d3-quadtree": "^1.0.7",
     "lodash-es": "^4.17.21",
     "react-aria": "^3.28.0",
-    "@vitessce/styles": "3.8.8",
-    "@vitessce/constants-internal": "3.8.8",
-    "@vitessce/gl": "3.8.8",
-    "@vitessce/icons": "3.8.8",
-    "@vitessce/tooltip": "3.8.8",
-    "@vitessce/utils": "3.8.8",
-    "@vitessce/vit-s": "3.8.8"
+    "@vitessce/styles": "3.8.10",
+    "@vitessce/constants-internal": "3.8.10",
+    "@vitessce/gl": "3.8.10",
+    "@vitessce/icons": "3.8.10",
+    "@vitessce/tooltip": "3.8.10",
+    "@vitessce/utils": "3.8.10",
+    "@vitessce/vit-s": "3.8.10"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",

package/src/shared-spatial-scatterplot/dynamic-opacity.js

@@ -1,11 +1,52 @@
 import { deck } from '@vitessce/gl';
 import { clamp } from 'lodash-es';
 
-// Reference: https://observablehq.com/@rreusser/selecting-the-right-opacity-for-2d-point-clouds
-// Reference: https://observablehq.com/@bmschmidt/dot-density-election-maps-with-webgl
-export function getPointSizeDevicePixels(devicePixelRatio, zoom, xRange, yRange, width, height) {
-  // Size of a point, in units of the diagonal axis.
-  const pointSize = 0.0005;
+
+const BASE_POINT_SIZE = 5;
+export const LARGE_DATASET_CELL_COUNT = 10000;
+export const SMALL_DATASET_CELL_COUNT = 100;
+
+export const LARGE_DATASET_POINT_SIZE = BASE_POINT_SIZE / LARGE_DATASET_CELL_COUNT;
+export const SMALL_DATASET_POINT_SIZE = BASE_POINT_SIZE / SMALL_DATASET_CELL_COUNT;
+
+
+/**
+ * Calculates initial point size based on dataset size.
+ * The point size decreases as the number of cells increases to avoid overplotting.
+ * The maximum point size is 0.05, for small datasets.
+ * The minimum point size is 0.0005, for large datasets.
+ * @param {number} numCells
+ * @returns {number} Initial point size.
+ */
+export function getInitialPointSize(numCells = LARGE_DATASET_CELL_COUNT) {
+  return BASE_POINT_SIZE / clamp(
+    numCells,
+    SMALL_DATASET_CELL_COUNT,
+    LARGE_DATASET_CELL_COUNT,
+  );
+}
+
+/**
+ * Calculates point size in device pixels based on dataset size and view parameters.
+ * Reference: https://observablehq.com/@rreusser/selecting-the-right-opacity-for-2d-point-clouds
+ * Reference: https://observablehq.com/@bmschmidt/dot-density-election-maps-with-webgl
+ *
+ * @param {number} devicePixelRatio The device pixel ratio.
+ * @param {number} zoom The current zoom level.
+ * @param {number} xRange The range of the x-axis.
+ * @param {number} yRange The range of the y-axis.
+ * @param {number} width The width of the viewport.
+ * @param {number} height The height of the viewport.
+ * @param {number} numCells The number of cells in the dataset.
+ * @returns {number} Point size in device pixels.
+ *
+ */
+export function getPointSizeDevicePixels(
+  devicePixelRatio, zoom, xRange, yRange, width, height, numCells,
+) {
+  // Smaller datasets get larger point sizes
+  const pointSize = getInitialPointSize(numCells);
+
   // Point size maximum, in screen pixels.
   const pointScreenSizeMax = 10;
 
@@ -31,7 +72,20 @@ export function getPointSizeDevicePixels(devicePixelRatio, zoom, xRange, yRange,
   return pointSizeDevicePixels;
 }
 
-// Reference: https://observablehq.com/@rreusser/selecting-the-right-opacity-for-2d-point-clouds
+/**
+ * Calculates point opacity based on dataset size and view parameters.
+ * Reference: https://observablehq.com/@rreusser/selecting-the-right-opacity-for-2d-point-clouds
+ *
+ * @param {*} zoom The current zoom level.
+ * @param {number} zoom The current zoom level.
+ * @param {number} xRange The range of the x-axis.
+ * @param {number} yRange The range of the y-axis.
+ * @param {number} width The width of the viewport.
+ * @param {number} height The height of the viewport.
+ * @param {number} numCells The number of cells in the dataset.
+ * @param {number} avgFillDensity Optional average fill density to use instead of calculating one.
+ * @returns {number} The calculated point opacity.
+ */
 export function getPointOpacity(zoom, xRange, yRange, width, height, numCells, avgFillDensity) {
   const N = numCells;
   let minX; let minY; let maxX; let

package/src/shared-spatial-scatterplot/dynamic-opacity.test.js

@@ -1,7 +1,35 @@
 import { describe, it, expect } from 'vitest';
-import { getPointSizeDevicePixels, getPointOpacity } from './dynamic-opacity.js';
+import { getPointSizeDevicePixels, getPointOpacity, getInitialPointSize,
+  LARGE_DATASET_CELL_COUNT, SMALL_DATASET_CELL_COUNT,
+  LARGE_DATASET_POINT_SIZE, SMALL_DATASET_POINT_SIZE } from './dynamic-opacity.js';
 
 describe('dynamic-opacity.js', () => {
+  describe('getInitialPointSize', () => {
+    it('returns large point size for small datasets', () => {
+      const numCells = SMALL_DATASET_CELL_COUNT;
+      const pointSize = getInitialPointSize(numCells);
+      expect(pointSize).toBe(SMALL_DATASET_POINT_SIZE);
+    });
+
+    it('returns small point size for large datasets', () => {
+      const numCells = LARGE_DATASET_CELL_COUNT;
+      const pointSize = getInitialPointSize(numCells);
+      expect(pointSize).toBe(LARGE_DATASET_POINT_SIZE);
+    });
+
+    it('returns intermediate point size for medium datasets', () => {
+      const numCells = (SMALL_DATASET_CELL_COUNT + LARGE_DATASET_CELL_COUNT) / 2;
+      const pointSize = getInitialPointSize(numCells);
+      expect(pointSize).toBeLessThan(SMALL_DATASET_POINT_SIZE);
+      expect(pointSize).toBeGreaterThan(LARGE_DATASET_POINT_SIZE);
+    });
+
+    it('handles missing numCells by using default large dataset size', () => {
+      const numCells = undefined;
+      const pointSize = getInitialPointSize(numCells);
+      expect(pointSize).toBe(LARGE_DATASET_POINT_SIZE);
+    });
+  });
   describe('getPointSizeDevicePixels', () => {
     it('calculates point size', () => {
       const devicePixelRatio = 2.0;
@@ -10,8 +38,9 @@ describe('dynamic-opacity.js', () => {
       const yRange = 18;
       const width = 1000;
       const height = 650;
+      const numCells = 50000;
       const pointSize = getPointSizeDevicePixels(
-        devicePixelRatio, zoom, xRange, yRange, width, height,
+        devicePixelRatio, zoom, xRange, yRange, width, height, numCells,
       );
       expect(pointSize).toBeCloseTo(0.5);
     });
@@ -20,7 +49,7 @@ describe('dynamic-opacity.js', () => {
     it('calculates point opacity', () => {
       const zoom = null;
       const width = 1000;
-      const height = 650;
+      const height = 1000;
       const xRange = 20;
       const yRange = 18;
       const numCells = 500000;