@vitessce/scatterplot-embedding 3.0.0 → 3.0.1

package/dist/{deflate-42fdcd50.js → deflate-3356a57c.js}

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

package/dist/{index-50142996.js → index-b3472cce.js}

@@ -1,6 +1,6 @@
 import * as React from "react";
 import React__default, { useLayoutEffect, useEffect, cloneElement, createElement, forwardRef, useState, useRef, useMemo, useImperativeHandle, Children, isValidElement, PureComponent, useCallback } from "react";
-import { usePlotOptionsStyles, OptionsContainer, CellColorEncodingOption, OptionSelect, useVitessceContainer, useComponentHover, useComponentViewInfo, useLoaders, useSetComponentHover, useSetComponentViewInfo, useCoordination, useUrls, useDeckCanvasSize, useMultiObsLabels, useObsEmbeddingData, useObsSetsData, useFeatureSelection, useObsFeatureMatrixIndices, useFeatureLabelsData, useReady, useGetObsInfo, useUint8FeatureSelection, useExpressionValueGetter, TitleInfo } from "@vitessce/vit-s";
+import { usePlotOptionsStyles, OptionsContainer, CellColorEncodingOption, OptionSelect, useVitessceContainer, useComponentHover, useComponentViewInfo, useLoaders, useSetComponentHover, useSetComponentViewInfo, useCoordination, useInitialCoordination, useDeckCanvasSize, useMultiObsLabels, useObsEmbeddingData, useObsSetsData, useFeatureSelection, useObsFeatureMatrixIndices, useFeatureLabelsData, useReady, useUrls, useGetObsInfo, useUint8FeatureSelection, useExpressionValueGetter, TitleInfo } from "@vitessce/vit-s";
 import * as ReactDOM from "react-dom";
 function _mergeNamespaces(n2, m2) {
   for (var i2 = 0; i2 < m2.length; i2++) {
@@ -121236,16 +121236,16 @@ function addDecoder(cases, importFn) {
   }
   cases.forEach((c2) => registry$1.set(c2, importFn));
 }
-addDecoder([void 0, 1], () => import("./raw-09626c2a.js").then((m2) => m2.default));
-addDecoder(5, () => import("./lzw-91ba018e.js").then((m2) => m2.default));
+addDecoder([void 0, 1], () => import("./raw-f14877a3.js").then((m2) => m2.default));
+addDecoder(5, () => import("./lzw-abc3998f.js").then((m2) => m2.default));
 addDecoder(6, () => {
   throw new Error("old style JPEG compression is not supported.");
 });
-addDecoder(7, () => import("./jpeg-da9c788c.js").then((m2) => m2.default));
-addDecoder([8, 32946], () => import("./deflate-42fdcd50.js").then((m2) => m2.default));
-addDecoder(32773, () => import("./packbits-45ead78a.js").then((m2) => m2.default));
-addDecoder(34887, () => import("./lerc-86149bd3.js").then((m2) => m2.default));
-addDecoder(50001, () => import("./webimage-d82eb077.js").then((m2) => m2.default));
+addDecoder(7, () => import("./jpeg-b8a2012a.js").then((m2) => m2.default));
+addDecoder([8, 32946], () => import("./deflate-3356a57c.js").then((m2) => m2.default));
+addDecoder(32773, () => import("./packbits-f739d6c6.js").then((m2) => m2.default));
+addDecoder(34887, () => import("./lerc-3fc6f6c4.js").then((m2) => m2.default));
+addDecoder(50001, () => import("./webimage-be9ed9e6.js").then((m2) => m2.default));
 function decodeRowAcc(row, stride) {
   let length2 = row.length - stride;
   let offset5 = 0;
@@ -141929,7 +141929,7 @@ const CenterFocusStrong = createSvgIcon(/* @__PURE__ */ React.createElement("pat
   d: "M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm-7 7H3v4c0 1.1.9 2 2 2h4v-2H5v-4zM5 5h4V3H5c-1.1 0-2 .9-2 2v4h2V5zm14-2h-4v2h4v4h2V5c0-1.1-.9-2-2-2zm0 16h-4v2h4c1.1 0 2-.9 2-2v-4h-2v4z"
 }), "CenterFocusStrong");
 const useStyles$2 = makeStyles(() => ({
-  button: {
+  toolButton: {
     display: "inline-flex",
     "&:active": {
       opacity: ".65",
@@ -141952,7 +141952,7 @@ const useStyles$2 = makeStyles(() => ({
     transform: "scale(0.98)"
     // make the button slightly smaller
   },
-  icon: {
+  toolIcon: {
     // btn btn-outline-secondary mr-2 icon
     padding: "0",
     height: "2em",
@@ -141990,12 +141990,12 @@ const useStyles$2 = makeStyles(() => ({
 function IconTool(props2) {
   const { alt, onClick, isActive, children: children2 } = props2;
   const classes = useStyles$2();
-  return jsxRuntimeExports.jsx("button", { className: clsx(classes.icon, { [classes.toolActive]: isActive }), onClick, type: "button", title: alt, children: children2 });
+  return jsxRuntimeExports.jsx("button", { className: clsx(classes.toolIcon, { [classes.toolActive]: isActive }), onClick, type: "button", title: alt, children: children2 });
 }
 function IconButton2(props2) {
   const { alt, onClick, children: children2 } = props2;
   const classes = useStyles$2();
-  return jsxRuntimeExports.jsx("button", { className: clsx(classes.icon, classes.button), onClick, type: "button", title: alt, children: children2 });
+  return jsxRuntimeExports.jsx("button", { className: clsx(classes.toolIcon, classes.toolButton), onClick, type: "button", title: alt, children: children2 });
 }
 function ToolMenu(props2) {
   const { setActiveTool, activeTool, visibleTools = { pan: true, selectLasso: true }, recenterOnClick = () => {
@@ -144802,31 +144802,39 @@ function EmbeddingScatterplotSubscriber(props2) {
     setFeatureValueColormapRange: setGeneExpressionColormapRange,
     setTooltipsVisible
   }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.SCATTERPLOT], coordinationScopes);
+  const {
+    embeddingZoom: initialZoom,
+    embeddingTargetX: initialTargetX,
+    embeddingTargetY: initialTargetY
+  } = useInitialCoordination(
+    COMPONENT_COORDINATION_TYPES[ViewType$1.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
+    dataset
   );
-  const [{ obsIndex: obsEmbeddingIndex, obsEmbedding }, obsEmbeddingStatus] = useObsEmbeddingData(
+  const [
+    { obsIndex: obsEmbeddingIndex, obsEmbedding },
+    obsEmbeddingStatus,
+    obsEmbeddingUrls
+  ] = useObsEmbeddingData(
     loaders,
     dataset,
-    addUrl,
     true,
     {},
     {},
     { obsType, embeddingType: mapping }
   );
   const cellsCount = (obsEmbeddingIndex == null ? void 0 : obsEmbeddingIndex.length) || 0;
-  const [{ obsSets: cellSets, obsSetsMembership }, obsSetsStatus] = useObsSetsData(
+  const [{ obsSets: cellSets, obsSetsMembership }, obsSetsStatus, obsSetsUrls] = useObsSetsData(
     loaders,
     dataset,
-    addUrl,
     false,
     { setObsSetSelection: setCellSetSelection, setObsSetColor: setCellSetColor },
     { obsSetSelection: cellSetSelection, obsSetColor: cellSetColor },
@@ -144839,17 +144847,19 @@ function EmbeddingScatterplotSubscriber(props2) {
     geneSelection,
     { obsType, featureType, featureValueType }
   );
-  const [{ obsIndex: matrixObsIndex }, matrixIndicesStatus] = useObsFeatureMatrixIndices(
+  const [
+    { obsIndex: matrixObsIndex },
+    matrixIndicesStatus,
+    matrixIndicesUrls
+  ] = useObsFeatureMatrixIndices(
     loaders,
     dataset,
-    addUrl,
     false,
     { obsType, featureType, featureValueType }
   );
-  const [{ featureLabelsMap }, featureLabelsStatus] = useFeatureLabelsData(
+  const [{ featureLabelsMap }, featureLabelsStatus, featureLabelsUrls] = useFeatureLabelsData(
     loaders,
     dataset,
-    addUrl,
     false,
     {},
     {},
@@ -144862,6 +144872,12 @@ function EmbeddingScatterplotSubscriber(props2) {
     featureLabelsStatus,
     matrixIndicesStatus
   ]);
+  const urls = useUrls([
+    obsEmbeddingUrls,
+    obsSetsUrls,
+    matrixIndicesUrls,
+    featureLabelsUrls
+  ]);
   const [dynamicCellRadius, setDynamicCellRadius] = useState(cellRadiusFixed);
   const [dynamicCellOpacity, setDynamicCellOpacity] = useState(cellOpacityFixed);
   const [originalViewState, setOriginalViewState] = useState(null);
@@ -144945,7 +144961,7 @@ function EmbeddingScatterplotSubscriber(props2) {
     return [null, null, null, null, null];
   }, [obsEmbedding]);
   useEffect(() => {
-    if (xRange && yRange && isReady) {
+    if (xRange && yRange) {
       const pointSizeDevicePixels = getPointSizeDevicePixels(
         window.devicePixelRatio,
         zoom,
@@ -144965,28 +144981,34 @@ function EmbeddingScatterplotSubscriber(props2) {
         averageFillDensity
       );
       setDynamicCellOpacity(nextCellOpacityScale);
-      if (typeof targetX !== "number" || typeof targetY !== "number") {
+      if (typeof initialTargetX !== "number" || typeof initialTargetY !== "number") {
         const newTargetX = xExtent[0] + xRange / 2;
         const newTargetY = yExtent[0] + yRange / 2;
         const newZoom = Math.log2(Math.min(width / xRange, height / yRange));
-        setTargetX(newTargetX);
-        setTargetY(-newTargetY);
-        setZoom(newZoom);
+        const notYetInitialized = typeof targetX !== "number" || typeof targetY !== "number";
+        const stillDefaultInitialized = targetX === newTargetX && targetY === -newTargetY;
+        if (notYetInitialized || stillDefaultInitialized) {
+          setTargetX(newTargetX);
+          setTargetY(-newTargetY);
+          setZoom(newZoom);
+        }
         setOriginalViewState({ target: [newTargetX, -newTargetY, 0], zoom: newZoom });
       } else if (!originalViewState) {
-        setOriginalViewState({ target: [targetX, targetY, 0], zoom });
+        setOriginalViewState({ target: [initialTargetX, initialTargetY, 0], zoom: initialZoom });
       }
     }
   }, [
     xRange,
     yRange,
-    isReady,
     xExtent,
     yExtent,
     numCells,
     width,
     height,
+    initialZoom,
     zoom,
+    initialTargetX,
+    initialTargetY,
     averageFillDensity
   ]);
   const getObsInfo = useGetObsInfo(

package/dist/index.js

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

package/dist/{jpeg-da9c788c.js → jpeg-b8a2012a.js}

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

package/dist/{lerc-86149bd3.js → lerc-3fc6f6c4.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-b3472cce.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-50142996.js";
+import { B as BaseDecoder } from "./index-b3472cce.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.0.1",
   "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.0.1",
+    "@vitessce/legend": "3.0.1",
+    "@vitessce/scatterplot": "3.0.1",
+    "@vitessce/sets-utils": "3.0.1",
+    "@vitessce/utils": "3.0.1",
+    "@vitessce/vit-s": "3.0.1"
   },
   "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,