@vitessce/scatterplot-embedding 3.0.0 → 3.1.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { E } from "./index-50142996.js";
+import { E } from "./index-d8ac68c1.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{jpeg-da9c788c.js → jpeg-07b73b88.js}

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

package/dist/{lerc-86149bd3.js → lerc-8b917065.js}

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

package/dist/{lzw-91ba018e.js → lzw-ad66c72b.js}

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

package/dist/{packbits-45ead78a.js → packbits-8c472a15.js}

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

package/dist/{raw-09626c2a.js → raw-58aad486.js}

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

package/dist/{webimage-d82eb077.js → webimage-adebb0c3.js}

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

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

@@ -1 +1 @@
-{"version":3,"file":"EmbeddingScatterplotSubscriber.d.ts","sourceRoot":"","sources":["../src/EmbeddingScatterplotSubscriber.js"],"names":[],"mappings":"AAkCA;;;;;;;;;;;;GAYG;AACH;IAVyB,IAAI,EAAlB,MAAM;IACQ,KAAK,EAAnB,MAAM;IACQ,kBAAkB,EAAhC,MAAM;IAEU,mBAAmB;IAErB,KAAK,EAAnB,MAAM;IACQ,kBAAkB,EAAhC,MAAM;gBA4VhB"}
+{"version":3,"file":"EmbeddingScatterplotSubscriber.d.ts","sourceRoot":"","sources":["../src/EmbeddingScatterplotSubscriber.js"],"names":[],"mappings":"AAmCA;;;;;;;;;;;;GAYG;AACH;IAVyB,IAAI,EAAlB,MAAM;IACQ,KAAK,EAAnB,MAAM;IACQ,kBAAkB,EAAhC,MAAM;IAEU,mBAAmB;IAErB,KAAK,EAAnB,MAAM;IACQ,kBAAkB,EAAhC,MAAM;gBA0WhB"}

package/dist-tsc/EmbeddingScatterplotSubscriber.js

@@ -3,7 +3,7 @@ import React, { useState, useEffect, useCallback, useMemo, } from 'react';
 import { extent } from 'd3-array';
 import { isEqual } from 'lodash-es';
 import plur from 'plur';
-import { TitleInfo, useReady, useUrls, useDeckCanvasSize, useUint8FeatureSelection, useExpressionValueGetter, useGetObsInfo, useObsEmbeddingData, useObsSetsData, useFeatureSelection, useObsFeatureMatrixIndices, useFeatureLabelsData, useMultiObsLabels, useCoordination, useLoaders, useSetComponentHover, useSetComponentViewInfo, } from '@vitessce/vit-s';
+import { TitleInfo, useReady, useUrls, useDeckCanvasSize, useUint8FeatureSelection, useExpressionValueGetter, useGetObsInfo, useObsEmbeddingData, useObsSetsData, useFeatureSelection, useObsFeatureMatrixIndices, useFeatureLabelsData, useMultiObsLabels, useCoordination, useLoaders, useSetComponentHover, useSetComponentViewInfo, useInitialCoordination, } from '@vitessce/vit-s';
 import { setObsSelection, mergeObsSets, getCellSetPolygons } from '@vitessce/sets-utils';
 import { getCellColors, commaNumber } from '@vitessce/utils';
 import { Scatterplot, ScatterplotTooltipSubscriber, ScatterplotOptions, getPointSizeDevicePixels, getPointOpacity, } from '@vitessce/scatterplot';
@@ -31,19 +31,19 @@ export function EmbeddingScatterplotSubscriber(props) {
     const setComponentViewInfo = useSetComponentViewInfo(uuid);
     // Get "props" from the coordination space.
     const [{ dataset, obsType, featureType, featureValueType, embeddingZoom: zoom, embeddingTargetX: targetX, embeddingTargetY: targetY, embeddingTargetZ: targetZ, embeddingType: mapping, obsFilter: cellFilter, obsHighlight: cellHighlight, featureSelection: geneSelection, obsSetSelection: cellSetSelection, obsSetColor: cellSetColor, obsColorEncoding: cellColorEncoding, additionalObsSets: additionalCellSets, embeddingObsSetPolygonsVisible: cellSetPolygonsVisible, embeddingObsSetLabelsVisible: cellSetLabelsVisible, embeddingObsSetLabelSize: cellSetLabelSize, embeddingObsRadius: cellRadiusFixed, embeddingObsRadiusMode: cellRadiusMode, embeddingObsOpacity: cellOpacityFixed, embeddingObsOpacityMode: cellOpacityMode, featureValueColormap: geneExpressionColormap, featureValueColormapRange: geneExpressionColormapRange, tooltipsVisible, }, { setEmbeddingZoom: setZoom, setEmbeddingTargetX: setTargetX, setEmbeddingTargetY: setTargetY, setEmbeddingTargetZ: setTargetZ, setObsFilter: setCellFilter, setObsSetSelection: setCellSetSelection, setObsHighlight: setCellHighlight, setObsSetColor: setCellSetColor, setObsColorEncoding: setCellColorEncoding, setAdditionalObsSets: setAdditionalCellSets, setEmbeddingObsSetPolygonsVisible: setCellSetPolygonsVisible, setEmbeddingObsSetLabelsVisible: setCellSetLabelsVisible, setEmbeddingObsSetLabelSize: setCellSetLabelSize, setEmbeddingObsRadius: setCellRadiusFixed, setEmbeddingObsRadiusMode: setCellRadiusMode, setEmbeddingObsOpacity: setCellOpacityFixed, setEmbeddingObsOpacityMode: setCellOpacityMode, setFeatureValueColormap: setGeneExpressionColormap, setFeatureValueColormapRange: setGeneExpressionColormapRange, setTooltipsVisible, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.SCATTERPLOT], coordinationScopes);
+    const { embeddingZoom: initialZoom, embeddingTargetX: initialTargetX, embeddingTargetY: initialTargetY, } = useInitialCoordination(COMPONENT_COORDINATION_TYPES[ViewType.SCATTERPLOT], coordinationScopes);
     const observationsLabel = observationsLabelOverride || obsType;
-    const [urls, addUrl] = useUrls(loaders, dataset);
     const [width, height, deckRef] = useDeckCanvasSize();
     const title = titleOverride || `Scatterplot (${mapping})`;
-    const [obsLabelsTypes, obsLabelsData] = useMultiObsLabels(coordinationScopes, obsType, loaders, dataset, addUrl);
+    const [obsLabelsTypes, obsLabelsData] = useMultiObsLabels(coordinationScopes, obsType, loaders, dataset);
     // Get data from loaders using the data hooks.
-    const [{ obsIndex: obsEmbeddingIndex, obsEmbedding }, obsEmbeddingStatus] = useObsEmbeddingData(loaders, dataset, addUrl, true, {}, {}, { obsType, embeddingType: mapping });
+    const [{ obsIndex: obsEmbeddingIndex, obsEmbedding }, obsEmbeddingStatus, obsEmbeddingUrls,] = useObsEmbeddingData(loaders, dataset, true, {}, {}, { obsType, embeddingType: mapping });
     const cellsCount = obsEmbeddingIndex?.length || 0;
-    const [{ obsSets: cellSets, obsSetsMembership }, obsSetsStatus] = useObsSetsData(loaders, dataset, addUrl, false, { setObsSetSelection: setCellSetSelection, setObsSetColor: setCellSetColor }, { obsSetSelection: cellSetSelection, obsSetColor: cellSetColor }, { obsType });
+    const [{ obsSets: cellSets, obsSetsMembership }, obsSetsStatus, obsSetsUrls] = useObsSetsData(loaders, dataset, false, { setObsSetSelection: setCellSetSelection, setObsSetColor: setCellSetColor }, { obsSetSelection: cellSetSelection, obsSetColor: cellSetColor }, { obsType });
     // eslint-disable-next-line no-unused-vars
     const [expressionData, loadedFeatureSelection, featureSelectionStatus] = useFeatureSelection(loaders, dataset, false, geneSelection, { obsType, featureType, featureValueType });
-    const [{ obsIndex: matrixObsIndex }, matrixIndicesStatus] = useObsFeatureMatrixIndices(loaders, dataset, addUrl, false, { obsType, featureType, featureValueType });
-    const [{ featureLabelsMap }, featureLabelsStatus] = useFeatureLabelsData(loaders, dataset, addUrl, false, {}, {}, { featureType });
+    const [{ obsIndex: matrixObsIndex }, matrixIndicesStatus, matrixIndicesUrls,] = useObsFeatureMatrixIndices(loaders, dataset, false, { obsType, featureType, featureValueType });
+    const [{ featureLabelsMap }, featureLabelsStatus, featureLabelsUrls] = useFeatureLabelsData(loaders, dataset, false, {}, {}, { featureType });
     const isReady = useReady([
         obsEmbeddingStatus,
         obsSetsStatus,
@@ -51,6 +51,12 @@ export function EmbeddingScatterplotSubscriber(props) {
         featureLabelsStatus,
         matrixIndicesStatus,
     ]);
+    const urls = useUrls([
+        obsEmbeddingUrls,
+        obsSetsUrls,
+        matrixIndicesUrls,
+        featureLabelsUrls,
+    ]);
     const [dynamicCellRadius, setDynamicCellRadius] = useState(cellRadiusFixed);
     const [dynamicCellOpacity, setDynamicCellOpacity] = useState(cellOpacityFixed);
     const [originalViewState, setOriginalViewState] = useState(null);
@@ -109,39 +115,36 @@ export function EmbeddingScatterplotSubscriber(props) {
     // compute the cell radius scale based on the
     // extents of the cell coordinates on the x/y axes.
     useEffect(() => {
-        // We do not really need isReady here, since the above useMemo that
-        // computes xRange and yRange will only run after obsEmbedding has loaded anyway.
-        // However, we include it here to ensure this effect waits as long as possible to run;
-        // For some reason, otherwise, in some cases this effect will run before the react-grid-layout
-        // initialization animation has finished,
-        // prior to `height` and `width` reaching their ultimate values, resulting in
-        // an initial viewState for that small view size, which looks bad.
-        if (xRange && yRange && isReady) {
+        if (xRange && yRange) {
             const pointSizeDevicePixels = getPointSizeDevicePixels(window.devicePixelRatio, zoom, xRange, yRange, width, height);
             setDynamicCellRadius(pointSizeDevicePixels);
             const nextCellOpacityScale = getPointOpacity(zoom, xRange, yRange, width, height, numCells, averageFillDensity);
             setDynamicCellOpacity(nextCellOpacityScale);
-            if (typeof targetX !== 'number' || typeof targetY !== 'number') {
+            if (typeof initialTargetX !== 'number' || typeof initialTargetY !== 'number') {
                 // The view config did not define an initial viewState so
                 // we calculate one based on the data and set it.
                 const newTargetX = xExtent[0] + xRange / 2;
                 const newTargetY = yExtent[0] + yRange / 2;
                 const newZoom = Math.log2(Math.min(width / xRange, height / yRange));
-                setTargetX(newTargetX);
-                // Graphics rendering has the y-axis going south so we need to multiply by negative one.
-                setTargetY(-newTargetY);
-                setZoom(newZoom);
+                const notYetInitialized = (typeof targetX !== 'number' || typeof targetY !== 'number');
+                const stillDefaultInitialized = (targetX === newTargetX && targetY === -newTargetY);
+                if (notYetInitialized || stillDefaultInitialized) {
+                    setTargetX(newTargetX);
+                    // Graphics rendering has the y-axis going south so we need to multiply by negative one.
+                    setTargetY(-newTargetY);
+                    setZoom(newZoom);
+                }
                 setOriginalViewState({ target: [newTargetX, -newTargetY, 0], zoom: newZoom });
             }
             else if (!originalViewState) {
                 // originalViewState has not yet been set and
                 // the view config defined an initial viewState.
-                setOriginalViewState({ target: [targetX, targetY, 0], zoom });
+                setOriginalViewState({ target: [initialTargetX, initialTargetY, 0], zoom: initialZoom });
             }
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [xRange, yRange, isReady, xExtent, yExtent, numCells,
-        width, height, zoom, averageFillDensity]);
+    }, [xRange, yRange, xExtent, yExtent, numCells,
+        width, height, initialZoom, zoom, initialTargetX, initialTargetY, averageFillDensity]);
     const getObsInfo = useGetObsInfo(observationsLabel, obsLabelsTypes, obsLabelsData, obsSetsMembership);
     const cellSelectionSet = useMemo(() => new Set(cellSelection), [cellSelection]);
     const getCellIsSelected = useCallback((object, { index }) => ((cellSelectionSet || new Set([])).has(obsEmbeddingIndex[index]) ? 1.0 : 0.0), [cellSelectionSet, obsEmbeddingIndex]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/scatterplot-embedding",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -20,24 +20,24 @@
     "d3-array": "^2.4.0",
     "lodash-es": "^4.17.21",
     "plur": "^5.1.0",
-    "@vitessce/constants-internal": "3.0.0",
-    "@vitessce/legend": "3.0.0",
-    "@vitessce/scatterplot": "3.0.0",
-    "@vitessce/sets-utils": "3.0.0",
-    "@vitessce/utils": "3.0.0",
-    "@vitessce/vit-s": "3.0.0"
+    "@vitessce/constants-internal": "3.1.0",
+    "@vitessce/legend": "3.1.0",
+    "@vitessce/scatterplot": "3.1.0",
+    "@vitessce/sets-utils": "3.1.0",
+    "@vitessce/utils": "3.1.0",
+    "@vitessce/vit-s": "3.1.0"
   },
   "devDependencies": {
     "react": "^18.0.0",
     "vite": "^4.3.0",
-    "vitest": "^0.23.4"
+    "vitest": "^0.32.2"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "scripts": {
     "bundle": "pnpm exec vite build -c ../../../scripts/vite.config.js",
-    "test": "pnpm exec vitest --run -r ../../../ --dir ."
+    "test": "pnpm exec vitest --run"
   },
   "module": "dist/index.js",
   "exports": {

package/src/EmbeddingScatterplotSubscriber.js

@@ -21,6 +21,7 @@ import {
   useLoaders,
   useSetComponentHover,
   useSetComponentViewInfo,
+  useInitialCoordination,
 } from '@vitessce/vit-s';
 import { setObsSelection, mergeObsSets, getCellSetPolygons } from '@vitessce/sets-utils';
 import { getCellColors, commaNumber } from '@vitessce/utils';
@@ -112,25 +113,34 @@ export function EmbeddingScatterplotSubscriber(props) {
     setTooltipsVisible,
   }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.SCATTERPLOT], coordinationScopes);
 
+  const {
+    embeddingZoom: initialZoom,
+    embeddingTargetX: initialTargetX,
+    embeddingTargetY: initialTargetY,
+  } = useInitialCoordination(
+    COMPONENT_COORDINATION_TYPES[ViewType.SCATTERPLOT], coordinationScopes,
+  );
+
   const observationsLabel = observationsLabelOverride || obsType;
 
-  const [urls, addUrl] = useUrls(loaders, dataset);
   const [width, height, deckRef] = useDeckCanvasSize();
 
   const title = titleOverride || `Scatterplot (${mapping})`;
 
   const [obsLabelsTypes, obsLabelsData] = useMultiObsLabels(
-    coordinationScopes, obsType, loaders, dataset, addUrl,
+    coordinationScopes, obsType, loaders, dataset,
   );
 
   // Get data from loaders using the data hooks.
-  const [{ obsIndex: obsEmbeddingIndex, obsEmbedding }, obsEmbeddingStatus] = useObsEmbeddingData(
-    loaders, dataset, addUrl, true, {}, {},
+  const [
+    { obsIndex: obsEmbeddingIndex, obsEmbedding }, obsEmbeddingStatus, obsEmbeddingUrls,
+  ] = useObsEmbeddingData(
+    loaders, dataset, true, {}, {},
     { obsType, embeddingType: mapping },
   );
   const cellsCount = obsEmbeddingIndex?.length || 0;
-  const [{ obsSets: cellSets, obsSetsMembership }, obsSetsStatus] = useObsSetsData(
-    loaders, dataset, addUrl, false,
+  const [{ obsSets: cellSets, obsSetsMembership }, obsSetsStatus, obsSetsUrls] = useObsSetsData(
+    loaders, dataset, false,
     { setObsSetSelection: setCellSetSelection, setObsSetColor: setCellSetColor },
     { obsSetSelection: cellSetSelection, obsSetColor: cellSetColor },
     { obsType },
@@ -140,12 +150,14 @@ export function EmbeddingScatterplotSubscriber(props) {
     loaders, dataset, false, geneSelection,
     { obsType, featureType, featureValueType },
   );
-  const [{ obsIndex: matrixObsIndex }, matrixIndicesStatus] = useObsFeatureMatrixIndices(
-    loaders, dataset, addUrl, false,
+  const [
+    { obsIndex: matrixObsIndex }, matrixIndicesStatus, matrixIndicesUrls,
+  ] = useObsFeatureMatrixIndices(
+    loaders, dataset, false,
     { obsType, featureType, featureValueType },
   );
-  const [{ featureLabelsMap }, featureLabelsStatus] = useFeatureLabelsData(
-    loaders, dataset, addUrl, false, {}, {},
+  const [{ featureLabelsMap }, featureLabelsStatus, featureLabelsUrls] = useFeatureLabelsData(
+    loaders, dataset, false, {}, {},
     { featureType },
   );
 
@@ -156,6 +168,12 @@ export function EmbeddingScatterplotSubscriber(props) {
     featureLabelsStatus,
     matrixIndicesStatus,
   ]);
+  const urls = useUrls([
+    obsEmbeddingUrls,
+    obsSetsUrls,
+    matrixIndicesUrls,
+    featureLabelsUrls,
+  ]);
 
   const [dynamicCellRadius, setDynamicCellRadius] = useState(cellRadiusFixed);
   const [dynamicCellOpacity, setDynamicCellOpacity] = useState(cellOpacityFixed);
@@ -230,14 +248,7 @@ export function EmbeddingScatterplotSubscriber(props) {
   // compute the cell radius scale based on the
   // extents of the cell coordinates on the x/y axes.
   useEffect(() => {
-    // We do not really need isReady here, since the above useMemo that
-    // computes xRange and yRange will only run after obsEmbedding has loaded anyway.
-    // However, we include it here to ensure this effect waits as long as possible to run;
-    // For some reason, otherwise, in some cases this effect will run before the react-grid-layout
-    // initialization animation has finished,
-    // prior to `height` and `width` reaching their ultimate values, resulting in
-    // an initial viewState for that small view size, which looks bad.
-    if (xRange && yRange && isReady) {
+    if (xRange && yRange) {
       const pointSizeDevicePixels = getPointSizeDevicePixels(
         window.devicePixelRatio, zoom, xRange, yRange, width, height,
       );
@@ -248,26 +259,30 @@ export function EmbeddingScatterplotSubscriber(props) {
       );
       setDynamicCellOpacity(nextCellOpacityScale);
 
-      if (typeof targetX !== 'number' || typeof targetY !== 'number') {
+      if (typeof initialTargetX !== 'number' || typeof initialTargetY !== 'number') {
         // The view config did not define an initial viewState so
         // we calculate one based on the data and set it.
         const newTargetX = xExtent[0] + xRange / 2;
         const newTargetY = yExtent[0] + yRange / 2;
         const newZoom = Math.log2(Math.min(width / xRange, height / yRange));
-        setTargetX(newTargetX);
-        // Graphics rendering has the y-axis going south so we need to multiply by negative one.
-        setTargetY(-newTargetY);
-        setZoom(newZoom);
+        const notYetInitialized = (typeof targetX !== 'number' || typeof targetY !== 'number');
+        const stillDefaultInitialized = (targetX === newTargetX && targetY === -newTargetY);
+        if (notYetInitialized || stillDefaultInitialized) {
+          setTargetX(newTargetX);
+          // Graphics rendering has the y-axis going south so we need to multiply by negative one.
+          setTargetY(-newTargetY);
+          setZoom(newZoom);
+        }
         setOriginalViewState({ target: [newTargetX, -newTargetY, 0], zoom: newZoom });
       } else if (!originalViewState) {
         // originalViewState has not yet been set and
         // the view config defined an initial viewState.
-        setOriginalViewState({ target: [targetX, targetY, 0], zoom });
+        setOriginalViewState({ target: [initialTargetX, initialTargetY, 0], zoom: initialZoom });
       }
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [xRange, yRange, isReady, xExtent, yExtent, numCells,
-    width, height, zoom, averageFillDensity]);
+  }, [xRange, yRange, xExtent, yExtent, numCells,
+    width, height, initialZoom, zoom, initialTargetX, initialTargetY, averageFillDensity]);
 
   const getObsInfo = useGetObsInfo(
     observationsLabel, obsLabelsTypes, obsLabelsData, obsSetsMembership,