@vitessce/scatterplot 3.5.8 → 3.5.10

package/dist/index.js

@@ -1,4 +1,4 @@
-import { A, E, S, a, b, f, e, d, c } from "./index-6f1ecd35.js";
+import { A, E, S, a, b, f, e, d, c } from "./index-d522aebb.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{jpeg-6a951bc6.js → jpeg-59437681.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-6f1ecd35.js";
+import { B as BaseDecoder } from "./index-d522aebb.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{lerc-36211a81.js → lerc-124acb2f.js}

@@ -1,5 +1,5 @@
 import { i as inflate_1 } from "./pako.esm-68f84e2a.js";
-import { g as getDefaultExportFromCjs, B as BaseDecoder } from "./index-6f1ecd35.js";
+import { g as getDefaultExportFromCjs, B as BaseDecoder } from "./index-d522aebb.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{lzw-cdee9c4e.js → lzw-723527e2.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-6f1ecd35.js";
+import { B as BaseDecoder } from "./index-d522aebb.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{packbits-7bc2030b.js → packbits-74a934fa.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-6f1ecd35.js";
+import { B as BaseDecoder } from "./index-d522aebb.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{raw-8e26cce5.js → raw-8fb6d135.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-6f1ecd35.js";
+import { B as BaseDecoder } from "./index-d522aebb.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{webimage-d457d41a.js → webimage-cdc82395.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-6f1ecd35.js";
+import { B as BaseDecoder } from "./index-d522aebb.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist-tsc/Scatterplot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Scatterplot.d.ts","sourceRoot":"","sources":["../src/Scatterplot.js"],"names":[],"mappings":";AA+hBA;;;;;;GAMG;AACH,sCAKG"}
+{"version":3,"file":"Scatterplot.d.ts","sourceRoot":"","sources":["../src/Scatterplot.js"],"names":[],"mappings":";AA+jBA;;;;;;GAMG;AACH,sCAKG"}

package/dist-tsc/Scatterplot.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React, { forwardRef } from 'react';
 import { forceSimulation } from 'd3-force';
 import { isEqual } from 'lodash-es';
-import { deck, getSelectionLayer, ScaledExpressionExtension, SelectionExtension, } from '@vitessce/gl';
+import { deck, getSelectionLayer, ScaledExpressionExtension, SelectionExtension, ContourLayerWithText, } from '@vitessce/gl';
 import { getDefaultColor } from '@vitessce/utils';
 import { AbstractSpatialOrScatterplot, createQuadTree, forceCollideRects, getOnHoverCallback, } from './shared-spatial-scatterplot/index.js';
 const CELLS_LAYER_ID = 'scatterplot';
@@ -108,7 +108,11 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
     // - Array of per-selected-sampleSet layers (filter to sampleSet members)
     // - Array of per-sampleSet, per-obsSet layers (filter to sampleSet and obsSet members)
     createContourLayers() {
-        const { theme, obsSetColor, sampleSetColor, contourColorEncoding, contourThresholds, contoursFilled, contourColor: contourColorProp, } = this.props;
+        const { theme, obsSetColor, sampleSetColor, contourColorEncoding, contourThresholds, contoursFilled, contourColor: contourColorProp, circleInfo, cellSetLabelsVisible, cellSetLabelSize, featureSelection, } = this.props;
+        const circlePointSet = new Set();
+        const [getWeight, aggregation] = Array.isArray(featureSelection) && featureSelection.length > 0
+            ? ([contourGetWeight, 'MEAN'])
+            : ([1, 'COUNT']);
         const layers = Array.from(this.stratifiedData.entries())
             .flatMap(([obsSetKey, sampleSetMap]) => Array.from(sampleSetMap.entries())
             .map(([sampleSetKey, arrs]) => {
@@ -127,30 +131,34 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
                 contourColor = (sampleSetColor?.find(d => isEqual(sampleSetKey, d.path))?.color
                     || contourColor);
             }
-            return new deck.ContourLayer({
+            const contours = contourThresholds.map((threshold, i) => ({
+                i,
+                threshold: (contoursFilled ? [threshold, threshold[i + 1] || Infinity] : threshold),
+                // TODO: should the opacity steps be uniform? Should align with human perception.
+                // TODO: support usage of static colors.
+                color: [
+                    // r, g, b
+                    ...contourColor,
+                    // a
+                    (contoursFilled
+                        ? ((i + 0.5) / contourThresholds.length * 255)
+                        : ((i + 1) / (contourThresholds.length)) * 255),
+                ],
+                strokeWidth: 2,
+                // We need to specify a greater z-index so that the contour layers
+                // will render on top of the point layer.
+                zIndex: POINT_LAYER_Z_INDEX + 1 + i,
+            }));
+            return new ContourLayerWithText({
                 id: `contour-${JSON.stringify(obsSetKey)}-${JSON.stringify(sampleSetKey)}`,
                 coordinateSystem: deck.COORDINATE_SYSTEM.CARTESIAN,
                 data: deckData,
-                getWeight: contourGetWeight,
+                getWeight,
                 getPosition: contourGetPosition,
-                contours: contourThresholds.map((threshold, i) => ({
-                    threshold: (contoursFilled ? [threshold, threshold[i + 1] || Infinity] : threshold),
-                    // TODO: should the opacity steps be uniform? Should align with human perception.
-                    // TODO: support usage of static colors.
-                    color: [
-                        // r, g, b
-                        ...contourColor,
-                        // a
-                        (contoursFilled
-                            ? ((i + 0.5) / contourThresholds.length * 255)
-                            : ((i + 1) / (contourThresholds.length)) * 255),
-                    ],
-                    strokeWidth: 2,
-                    // We need to specify a greater z-index so that the contour layers
-                    // will render on top of the point layer.
-                    zIndex: POINT_LAYER_Z_INDEX + 1 + i,
-                })),
-                aggregation: 'MEAN',
+                obsSetPath: obsSetKey,
+                sampleSetPath: sampleSetKey,
+                contours,
+                aggregation,
                 gpuAggregation: true,
                 visible: true,
                 pickable: false,
@@ -158,6 +166,14 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
                 filled: contoursFilled,
                 cellSize: 0.25,
                 zOffset: 0.005,
+                // Info for text/line rendering
+                circleInfo,
+                circlePointSet,
+                obsSetLabelsVisible: cellSetLabelsVisible,
+                obsSetLabelSize: cellSetLabelSize,
+                updateTriggers: {
+                    getWeight: [getWeight],
+                },
             });
         }));
         return layers;
@@ -349,11 +365,16 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
         }
     }
     onUpdateCellSetsLayers(onlyViewStateChange) {
-        // Because the label sizes for the force simulation depend on the zoom level,
-        // we _could_ run the simulation every time the zoom level changes.
-        // However, this has a performance impact in firefox.
-        if (onlyViewStateChange) {
-            const { viewState, cellSetLabelsVisible } = this.props;
+        const { viewState, cellSetLabelsVisible, embeddingContoursVisible } = this.props;
+        if (embeddingContoursVisible) {
+            // If rendering contours, we do not want to render text labels using this method,
+            // as the ContourLayerWithText implements its own text labeling internally.
+            this.cellSetsLayers = [];
+        }
+        else if (onlyViewStateChange) {
+            // Because the label sizes for the force simulation depend on the zoom level,
+            // we _could_ run the simulation every time the zoom level changes.
+            // However, this has a performance impact in firefox.
             const { zoom } = viewState;
             const { cellSetsLabelPrevZoom } = this;
             // Instead, we can just check if the zoom level has changed
@@ -412,7 +433,11 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
             this.onUpdateCellsLayer();
             forceUpdate = true;
         }
-        if (['stratifiedData', 'contourColorEncoding', 'contoursFilled', 'contourThresholds', 'embeddingContoursVisible'].some(shallowDiff)) {
+        if ([
+            'stratifiedData', 'contourColorEncoding', 'contoursFilled',
+            'contourThresholds', 'embeddingContoursVisible',
+            'cellSetLabelsVisible', 'cellSetLabelSize',
+        ].some(shallowDiff)) {
             // Cells data changed.
             this.onUpdateContourLayers();
             forceUpdate = true;
@@ -420,6 +445,7 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
         if ([
             'cellSetPolygons', 'cellSetPolygonsVisible',
             'cellSetLabelsVisible', 'cellSetLabelSize',
+            'embeddingContoursVisible',
         ].some(shallowDiff)) {
             // Cell sets layer props changed.
             this.onUpdateCellSetsLayers(false);

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,uIAuBC"}
+{"version":3,"file":"dynamic-opacity.d.ts","sourceRoot":"","sources":["../../src/shared-spatial-scatterplot/dynamic-opacity.js"],"names":[],"mappings":"AAKA,mIA0BC;AAGD,uIA6BC"}

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

@@ -24,11 +24,20 @@ export function getPointSizeDevicePixels(devicePixelRatio, zoom, xRange, yRange,
 // Reference: https://observablehq.com/@rreusser/selecting-the-right-opacity-for-2d-point-clouds
 export function getPointOpacity(zoom, xRange, yRange, width, height, numCells, avgFillDensity) {
     const N = numCells;
-    const [minX, minY, maxX, maxY] = new deck.OrthographicView({ zoom }).makeViewport({
-        height,
-        width,
-        viewState: { zoom, target: [0, 0, 0] },
-    }).getBounds();
+    let minX;
+    let minY;
+    let maxX;
+    let maxY;
+    try {
+        [minX, minY, maxX, maxY] = new deck.OrthographicView({ zoom }).makeViewport({
+            height,
+            width,
+            viewState: { zoom, target: [0, 0, 0] },
+        }).getBounds();
+    }
+    catch {
+        return 1.0;
+    }
     const X = maxY - minY;
     const Y = maxX - minX;
     const X0 = xRange;

package/package.json

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

package/src/Scatterplot.js

@@ -4,6 +4,7 @@ import { forceSimulation } from 'd3-force';
 import { isEqual } from 'lodash-es';
 import {
   deck, getSelectionLayer, ScaledExpressionExtension, SelectionExtension,
+  ContourLayerWithText,
 } from '@vitessce/gl';
 import { getDefaultColor } from '@vitessce/utils';
 import {
@@ -130,8 +131,17 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
       contourThresholds,
       contoursFilled,
       contourColor: contourColorProp,
+      circleInfo,
+      cellSetLabelsVisible,
+      cellSetLabelSize,
+      featureSelection,
     } = this.props;
 
+    const circlePointSet = new Set();
+    const [getWeight, aggregation] = Array.isArray(featureSelection) && featureSelection.length > 0
+      ? ([contourGetWeight, 'MEAN'])
+      : ([1, 'COUNT']);
+
     const layers = Array.from(this.stratifiedData.entries())
       .flatMap(([obsSetKey, sampleSetMap]) => Array.from(sampleSetMap.entries())
         .map(([sampleSetKey, arrs]) => {
@@ -155,30 +165,35 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
               || contourColor
             );
           }
-          return new deck.ContourLayer({
+          const contours = contourThresholds.map((threshold, i) => ({
+            i,
+            threshold: (contoursFilled ? [threshold, threshold[i + 1] || Infinity] : threshold),
+            // TODO: should the opacity steps be uniform? Should align with human perception.
+            // TODO: support usage of static colors.
+            color: [
+              // r, g, b
+              ...contourColor,
+              // a
+              (contoursFilled
+                ? ((i + 0.5) / contourThresholds.length * 255)
+                : ((i + 1) / (contourThresholds.length)) * 255),
+            ],
+            strokeWidth: 2,
+            // We need to specify a greater z-index so that the contour layers
+            // will render on top of the point layer.
+            zIndex: POINT_LAYER_Z_INDEX + 1 + i,
+          }));
+
+          return new ContourLayerWithText({
             id: `contour-${JSON.stringify(obsSetKey)}-${JSON.stringify(sampleSetKey)}`,
             coordinateSystem: deck.COORDINATE_SYSTEM.CARTESIAN,
             data: deckData,
-            getWeight: contourGetWeight,
+            getWeight,
             getPosition: contourGetPosition,
-            contours: contourThresholds.map((threshold, i) => ({
-              threshold: (contoursFilled ? [threshold, threshold[i + 1] || Infinity] : threshold),
-              // TODO: should the opacity steps be uniform? Should align with human perception.
-              // TODO: support usage of static colors.
-              color: [
-                // r, g, b
-                ...contourColor,
-                // a
-                (contoursFilled
-                  ? ((i + 0.5) / contourThresholds.length * 255)
-                  : ((i + 1) / (contourThresholds.length)) * 255),
-              ],
-              strokeWidth: 2,
-              // We need to specify a greater z-index so that the contour layers
-              // will render on top of the point layer.
-              zIndex: POINT_LAYER_Z_INDEX + 1 + i,
-            })),
-            aggregation: 'MEAN',
+            obsSetPath: obsSetKey,
+            sampleSetPath: sampleSetKey,
+            contours,
+            aggregation,
             gpuAggregation: true,
             visible: true,
             pickable: false,
@@ -186,6 +201,14 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
             filled: contoursFilled,
             cellSize: 0.25,
             zOffset: 0.005,
+            // Info for text/line rendering
+            circleInfo,
+            circlePointSet,
+            obsSetLabelsVisible: cellSetLabelsVisible,
+            obsSetLabelSize: cellSetLabelSize,
+            updateTriggers: {
+              getWeight: [getWeight],
+            },
           });
         }));
     return layers;
@@ -429,30 +452,34 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
   }
 
   onUpdateCellSetsLayers(onlyViewStateChange) {
-    // Because the label sizes for the force simulation depend on the zoom level,
-    // we _could_ run the simulation every time the zoom level changes.
-    // However, this has a performance impact in firefox.
-    if (onlyViewStateChange) {
-      const { viewState, cellSetLabelsVisible } = this.props;
+    const { viewState, cellSetLabelsVisible, embeddingContoursVisible } = this.props;
+    if (embeddingContoursVisible) {
+      // If rendering contours, we do not want to render text labels using this method,
+      // as the ContourLayerWithText implements its own text labeling internally.
+      this.cellSetsLayers = [];
+    } else if (onlyViewStateChange) {
+      // Because the label sizes for the force simulation depend on the zoom level,
+      // we _could_ run the simulation every time the zoom level changes.
+      // However, this has a performance impact in firefox.
       const { zoom } = viewState;
       const { cellSetsLabelPrevZoom } = this;
       // Instead, we can just check if the zoom level has changed
       // by some relatively large delta, to be more conservative
       // about re-running the force simulation.
       if (cellSetLabelsVisible
-        && (
-          cellSetsLabelPrevZoom === null
-          || Math.abs(cellSetsLabelPrevZoom - zoom) > LABEL_UPDATE_ZOOM_DELTA
-        )
+      && (
+        cellSetsLabelPrevZoom === null
+        || Math.abs(cellSetsLabelPrevZoom - zoom) > LABEL_UPDATE_ZOOM_DELTA
+      )
       ) {
         this.cellSetsLayers = this.createCellSetsLayers();
         this.cellSetsLabelPrevZoom = zoom;
       }
     } else {
-      // Otherwise, something more substantial than just
-      // the viewState has changed, such as the label array
-      // itself, so we always want to update the layer
-      // in this case.
+    // Otherwise, something more substantial than just
+    // the viewState has changed, such as the label array
+    // itself, so we always want to update the layer
+    // in this case.
       this.cellSetsLayers = this.createCellSetsLayers();
     }
   }
@@ -507,7 +534,11 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
       forceUpdate = true;
     }
 
-    if (['stratifiedData', 'contourColorEncoding', 'contoursFilled', 'contourThresholds', 'embeddingContoursVisible'].some(shallowDiff)) {
+    if ([
+      'stratifiedData', 'contourColorEncoding', 'contoursFilled',
+      'contourThresholds', 'embeddingContoursVisible',
+      'cellSetLabelsVisible', 'cellSetLabelSize',
+    ].some(shallowDiff)) {
       // Cells data changed.
       this.onUpdateContourLayers();
       forceUpdate = true;
@@ -516,6 +547,7 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
     if ([
       'cellSetPolygons', 'cellSetPolygonsVisible',
       'cellSetLabelsVisible', 'cellSetLabelSize',
+      'embeddingContoursVisible',
     ].some(shallowDiff)) {
       // Cell sets layer props changed.
       this.onUpdateCellSetsLayers(false);

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

@@ -34,11 +34,17 @@ export function getPointSizeDevicePixels(devicePixelRatio, zoom, xRange, yRange,
 // Reference: https://observablehq.com/@rreusser/selecting-the-right-opacity-for-2d-point-clouds
 export function getPointOpacity(zoom, xRange, yRange, width, height, numCells, avgFillDensity) {
   const N = numCells;
-  const [minX, minY, maxX, maxY] = new deck.OrthographicView({ zoom }).makeViewport({
-    height,
-    width,
-    viewState: { zoom, target: [0, 0, 0] },
-  }).getBounds();
+  let minX; let minY; let maxX; let
+    maxY;
+  try {
+    [minX, minY, maxX, maxY] = new deck.OrthographicView({ zoom }).makeViewport({
+      height,
+      width,
+      viewState: { zoom, target: [0, 0, 0] },
+    }).getBounds();
+  } catch {
+    return 1.0;
+  }
   const X = maxY - minY;
   const Y = maxX - minX;
   const X0 = xRange;