@vitessce/scatterplot-embedding 3.5.8 → 3.5.10

package/dist/index.js

@@ -1,4 +1,4 @@
-import { D, E } from "./index-5909753b.js";
+import { D, E } from "./index-a37f30c8.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{jpeg-8c087dbd.js → jpeg-5927a952.js}

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

package/dist/{lerc-6f97422d.js → lerc-7a4fca51.js}

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

package/dist/{lzw-551d533e.js → lzw-ce001eff.js}

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

package/dist/{packbits-da285c36.js → packbits-075c055a.js}

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

package/dist/{raw-44cfcc64.js → raw-b648d255.js}

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

package/dist/{webimage-201fd4a3.js → webimage-dec5407e.js}

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

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

@@ -1 +1 @@
-{"version":3,"file":"DualEmbeddingScatterplotSubscriber.d.ts","sourceRoot":"","sources":["../src/DualEmbeddingScatterplotSubscriber.js"],"names":[],"mappings":"AAQA;;;;;;;;;;;;;;;GAeG;AACH,0DAVG;IAAsB,IAAI,EAAlB,MAAM;IACQ,KAAK,EAAnB,MAAM;IACQ,kBAAkB,EAAhC,MAAM;IAEU,mBAAmB;IAErB,KAAK,EAAnB,MAAM;IACQ,kBAAkB,EAAhC,MAAM;CAEhB,eA4CA"}
+{"version":3,"file":"DualEmbeddingScatterplotSubscriber.d.ts","sourceRoot":"","sources":["../src/DualEmbeddingScatterplotSubscriber.js"],"names":[],"mappings":"AAQA;;;;;;;;;;;;;;;GAeG;AACH,0DAVG;IAAsB,IAAI,EAAlB,MAAM;IACQ,KAAK,EAAnB,MAAM;IACQ,kBAAkB,EAAhC,MAAM;IAEU,mBAAmB;IAErB,KAAK,EAAnB,MAAM;IACQ,kBAAkB,EAAhC,MAAM;CAEhB,eAmDA"}

package/dist-tsc/DualEmbeddingScatterplotSubscriber.js

@@ -23,11 +23,14 @@ export function DualEmbeddingScatterplotSubscriber(props) {
     const { uuid, coordinationScopes, } = props;
     // Get "props" from the coordination space.
     const [{ embeddingType, sampleSetSelection, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.DUAL_SCATTERPLOT], coordinationScopes);
+    const isCaseCtrl = Array.isArray(sampleSetSelection) && sampleSetSelection.length === 2;
     const caseSampleSetSelection = useMemo(() => (sampleSetSelection?.[0]
         ? [sampleSetSelection[0]]
         : null), [sampleSetSelection]);
     const ctrlSampleSetSelection = useMemo(() => (sampleSetSelection?.[1]
         ? [sampleSetSelection[1]]
         : null), [sampleSetSelection]);
-    return (_jsxs("div", { style: { width: '100%', height: '100%', display: 'flex', flexDirection: 'row' }, children: [_jsx("div", { style: { width: '50%', display: 'flex', flexDirection: 'column' }, children: _jsx(EmbeddingScatterplotSubscriber, { ...props, uuid: `${uuid}-case`, title: `Scatterplot (${embeddingType}), ${caseSampleSetSelection?.[0]?.at(-1)}`, sampleSetSelection: caseSampleSetSelection }) }), _jsx("div", { style: { width: '50%', display: 'flex', flexDirection: 'column' }, children: _jsx(EmbeddingScatterplotSubscriber, { ...props, uuid: `${uuid}-ctrl`, title: `Scatterplot (${embeddingType}), ${ctrlSampleSetSelection?.[0]?.at(-1)}`, sampleSetSelection: ctrlSampleSetSelection }) })] }));
+    return (_jsxs("div", { style: { width: '100%', height: '100%', display: 'flex', flexDirection: 'row' }, children: [_jsx("div", { style: { width: isCaseCtrl ? '50%' : '100%', display: 'flex', flexDirection: 'column' }, children: _jsx(EmbeddingScatterplotSubscriber, { ...props, uuid: `${uuid}-case`, title: (isCaseCtrl
+                        ? `Scatterplot (${embeddingType}), ${caseSampleSetSelection?.[0]?.at(-1)}`
+                        : null), sampleSetSelection: caseSampleSetSelection }) }), isCaseCtrl ? (_jsx("div", { style: { width: '50%', display: 'flex', flexDirection: 'column' }, children: _jsx(EmbeddingScatterplotSubscriber, { ...props, uuid: `${uuid}-ctrl`, title: `Scatterplot (${embeddingType}), ${ctrlSampleSetSelection?.[0]?.at(-1)}`, sampleSetSelection: ctrlSampleSetSelection }) })) : null] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"EmbeddingScatterplotSubscriber.d.ts","sourceRoot":"","sources":["../src/EmbeddingScatterplotSubscriber.js"],"names":[],"mappings":"AA0CA;;;;;;;;;;;;GAYG;AACH,sDAVG;IAAsB,IAAI,EAAlB,MAAM;IACQ,KAAK,EAAnB,MAAM;IACQ,kBAAkB,EAAhC,MAAM;IAEU,mBAAmB;IAErB,KAAK,EAAnB,MAAM;IACQ,kBAAkB,EAAhC,MAAM;CAEhB,eAwhBA"}
+{"version":3,"file":"EmbeddingScatterplotSubscriber.d.ts","sourceRoot":"","sources":["../src/EmbeddingScatterplotSubscriber.js"],"names":[],"mappings":"AA2CA;;;;;;;;;;;;GAYG;AACH,sDAVG;IAAsB,IAAI,EAAlB,MAAM;IACQ,KAAK,EAAnB,MAAM;IACQ,kBAAkB,EAAhC,MAAM;IAEU,mBAAmB;IAErB,KAAK,EAAnB,MAAM;IACQ,kBAAkB,EAAhC,MAAM;CAEhB,eAmjBA"}

package/dist-tsc/EmbeddingScatterplotSubscriber.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useEffect, useCallback, useMemo, } from 'react';
 import { extent, quantileSorted } from 'd3-array';
 import { isEqual } from 'lodash-es';
+import { circle } from '@turf/circle';
 import { TitleInfo, useReady, useUrls, useDeckCanvasSize, useUint8FeatureSelection, useExpressionValueGetter, useGetObsInfo, useObsEmbeddingData, useObsSetsData, useFeatureSelection, useObsFeatureMatrixIndices, useFeatureLabelsData, useMultiObsLabels, useSampleSetsData, useSampleEdgesData, useCoordination, useLoaders, useSetComponentHover, useSetComponentViewInfo, useInitialCoordination, useExpandedFeatureLabelsMap, } from '@vitessce/vit-s';
 import { setObsSelection, mergeObsSets, getCellSetPolygons, getCellColors, stratifyArrays, } from '@vitessce/sets-utils';
 import { pluralize as plur, commaNumber } from '@vitessce/utils';
@@ -189,8 +190,31 @@ export function EmbeddingScatterplotSubscriber(props) {
                 .map(t => Math.max(t, 1.0));
             return thresholds;
         }
-        return null;
+        return [1, 10, 100];
     }, [contourPercentiles, sortedWeights]);
+    // Construct a circle polygon using Turf's circle function,
+    // which surrounds all points in the scatterplot,
+    // which we can use to position text labels along.
+    const circleInfo = useMemo(() => {
+        if (!originalViewState || !width || !height) {
+            return null;
+        }
+        const center = [
+            originalViewState.target[0],
+            originalViewState.target[1],
+        ];
+        const scaleFactor = (2 ** originalViewState.zoom);
+        const radius = Math.min(width, height) / 2 / scaleFactor;
+        const numPoints = 96;
+        const options = { steps: numPoints, units: 'degrees' };
+        const circlePolygon = circle(center, radius, options);
+        return {
+            center,
+            radius,
+            polygon: circlePolygon,
+            steps: numPoints,
+        };
+    }, [originalViewState, width, height]);
     // It is possible for the embedding index+data to be out of order
     // with respect to the matrix index+data. Here, we align the embedding
     // data so that the rows are ordered the same as the matrix rows.
@@ -265,7 +289,7 @@ export function EmbeddingScatterplotSubscriber(props) {
                 }, updateViewInfo: setComponentViewInfo, getExpressionValue: getExpressionValue, getCellIsSelected: getCellIsSelected, obsSetSelection: cellSetSelection, sampleSetSelection: sampleSetSelection, 
                 // InternMap data structures where keys are
                 // obsSet -> sampleSet -> arrayKey -> [].
-                stratifiedData: stratifiedData, obsSetColor: cellSetColor, sampleSetColor: sampleSetColor, contourThresholds: contourThresholds, contourColorEncoding: contourColorEncoding, contourColor: contourColor, contoursFilled: embeddingContoursFilled, embeddingPointsVisible: embeddingPointsVisible, embeddingContoursVisible: embeddingContoursVisible }), tooltipsVisible && (_jsx(ScatterplotTooltipSubscriber, { parentUuid: uuid, obsHighlight: cellHighlight, width: width, height: height, getObsInfo: getObsInfo, featureType: featureType, featureLabelsMap: featureLabelsMap })), _jsx(Legend, { visible: true, theme: theme, featureType: featureType, featureValueType: featureValueType, obsColorEncoding: cellColorEncoding, featureSelection: geneSelection, featureLabelsMap: featureLabelsMap, featureValueColormap: geneExpressionColormap, featureValueColormapRange: geneExpressionColormapRange, obsSetSelection: cellSetSelection, extent: expressionExtents?.[0], missing: expressionMissing?.[0], 
+                stratifiedData: stratifiedData, obsSetColor: cellSetColor, sampleSetColor: sampleSetColor, contourThresholds: contourThresholds, contourColorEncoding: contourColorEncoding, contourColor: contourColor, contoursFilled: embeddingContoursFilled, embeddingPointsVisible: embeddingPointsVisible, embeddingContoursVisible: embeddingContoursVisible, circleInfo: circleInfo, featureSelection: geneSelection }), tooltipsVisible && (_jsx(ScatterplotTooltipSubscriber, { parentUuid: uuid, obsHighlight: cellHighlight, width: width, height: height, getObsInfo: getObsInfo, featureType: featureType, featureLabelsMap: featureLabelsMap })), _jsx(Legend, { visible: true, theme: theme, featureType: featureType, featureValueType: featureValueType, obsColorEncoding: cellColorEncoding, featureSelection: geneSelection, featureLabelsMap: featureLabelsMap, featureValueColormap: geneExpressionColormap, featureValueColormapRange: geneExpressionColormapRange, obsSetSelection: cellSetSelection, extent: expressionExtents?.[0], missing: expressionMissing?.[0], 
                 // Contour percentile legend
                 pointsVisible: embeddingPointsVisible, contoursVisible: embeddingContoursVisible, contoursFilled: embeddingContoursFilled, contourPercentiles: contourPercentiles || DEFAULT_CONTOUR_PERCENTILES, contourThresholds: contourThresholds })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/scatterplot-embedding",
-  "version": "3.5.8",
+  "version": "3.5.10",
   "author": "HIDIVE Lab at HMS",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -20,12 +20,13 @@
     "d3-array": "^2.4.0",
     "lodash-es": "^4.17.21",
     "react-aria": "^3.28.0",
-    "@vitessce/constants-internal": "3.5.8",
-    "@vitessce/legend": "3.5.8",
-    "@vitessce/scatterplot": "3.5.8",
-    "@vitessce/sets-utils": "3.5.8",
-    "@vitessce/utils": "3.5.8",
-    "@vitessce/vit-s": "3.5.8"
+    "@turf/circle": "^7.2.0",
+    "@vitessce/constants-internal": "3.5.10",
+    "@vitessce/legend": "3.5.10",
+    "@vitessce/scatterplot": "3.5.10",
+    "@vitessce/sets-utils": "3.5.10",
+    "@vitessce/utils": "3.5.10",
+    "@vitessce/vit-s": "3.5.10"
   },
   "devDependencies": {
     "react": "^18.0.0",

package/src/DualEmbeddingScatterplotSubscriber.js

@@ -34,6 +34,8 @@ export function DualEmbeddingScatterplotSubscriber(props) {
     sampleSetSelection,
   }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.DUAL_SCATTERPLOT], coordinationScopes);
 
+  const isCaseCtrl = Array.isArray(sampleSetSelection) && sampleSetSelection.length === 2;
+
   const caseSampleSetSelection = useMemo(() => (
     sampleSetSelection?.[0]
       ? [sampleSetSelection[0]]
@@ -47,22 +49,27 @@ export function DualEmbeddingScatterplotSubscriber(props) {
 
   return (
     <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'row' }}>
-      <div style={{ width: '50%', display: 'flex', flexDirection: 'column' }}>
+      <div style={{ width: isCaseCtrl ? '50%' : '100%', display: 'flex', flexDirection: 'column' }}>
         <EmbeddingScatterplotSubscriber
           {...props}
           uuid={`${uuid}-case`}
-          title={`Scatterplot (${embeddingType}), ${caseSampleSetSelection?.[0]?.at(-1)}`}
+          title={(isCaseCtrl
+            ? `Scatterplot (${embeddingType}), ${caseSampleSetSelection?.[0]?.at(-1)}`
+            : null
+          )}
           sampleSetSelection={caseSampleSetSelection}
         />
       </div>
-      <div style={{ width: '50%', display: 'flex', flexDirection: 'column' }}>
-        <EmbeddingScatterplotSubscriber
-          {...props}
-          uuid={`${uuid}-ctrl`}
-          title={`Scatterplot (${embeddingType}), ${ctrlSampleSetSelection?.[0]?.at(-1)}`}
-          sampleSetSelection={ctrlSampleSetSelection}
-        />
-      </div>
+      {isCaseCtrl ? (
+        <div style={{ width: '50%', display: 'flex', flexDirection: 'column' }}>
+          <EmbeddingScatterplotSubscriber
+            {...props}
+            uuid={`${uuid}-ctrl`}
+            title={`Scatterplot (${embeddingType}), ${ctrlSampleSetSelection?.[0]?.at(-1)}`}
+            sampleSetSelection={ctrlSampleSetSelection}
+          />
+        </div>
+      ) : null}
     </div>
   );
 }

package/src/EmbeddingScatterplotSubscriber.js

@@ -3,6 +3,7 @@ import React, {
 } from 'react';
 import { extent, quantileSorted } from 'd3-array';
 import { isEqual } from 'lodash-es';
+import { circle } from '@turf/circle';
 import {
   TitleInfo,
   useReady, useUrls,
@@ -379,9 +380,33 @@ export function EmbeddingScatterplotSubscriber(props) {
         .map(t => Math.max(t, 1.0));
       return thresholds;
     }
-    return null;
+    return [1, 10, 100];
   }, [contourPercentiles, sortedWeights]);
 
+  // Construct a circle polygon using Turf's circle function,
+  // which surrounds all points in the scatterplot,
+  // which we can use to position text labels along.
+  const circleInfo = useMemo(() => {
+    if (!originalViewState || !width || !height) {
+      return null;
+    }
+    const center = [
+      originalViewState.target[0],
+      originalViewState.target[1],
+    ];
+    const scaleFactor = (2 ** originalViewState.zoom);
+    const radius = Math.min(width, height) / 2 / scaleFactor;
+    const numPoints = 96;
+    const options = { steps: numPoints, units: 'degrees' };
+    const circlePolygon = circle(center, radius, options);
+    return {
+      center,
+      radius,
+      polygon: circlePolygon,
+      steps: numPoints,
+    };
+  }, [originalViewState, width, height]);
+
   // It is possible for the embedding index+data to be out of order
   // with respect to the matrix index+data. Here, we align the embedding
   // data so that the rows are ordered the same as the matrix rows.
@@ -554,6 +579,9 @@ export function EmbeddingScatterplotSubscriber(props) {
         contoursFilled={embeddingContoursFilled}
         embeddingPointsVisible={embeddingPointsVisible}
         embeddingContoursVisible={embeddingContoursVisible}
+
+        circleInfo={circleInfo}
+        featureSelection={geneSelection}
       />
       {tooltipsVisible && (
       <ScatterplotTooltipSubscriber