@vitessce/scatterplot-gating 3.8.0 → 3.8.1

package/dist/{deflate-B6pWJWB8.js → deflate-BKZQ1leu.js}

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

package/dist/{index-B4FTJe_L.js → index-BtZNxZ-h.js}

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 var _a2, _b;
 import * as React from "react";
 import React__default, { useLayoutEffect, useEffect, cloneElement, createElement, forwardRef, useState, useRef, useMemo, useImperativeHandle, useContext, createContext, isValidElement, Children, PureComponent, useCallback } from "react";
-import { usePlotOptionsStyles, OptionsContainer, CellColorEncodingOption, OptionSelect, useVitessceContainer, useComponentHover, useComponentViewInfo, useLoaders, useCoordinationScopes, useSetComponentHover, useSetComponentViewInfo, useCoordination, useDeckCanvasSize, useObsSetsData, useFeatureSelection, useObsFeatureMatrixIndices, useReady, useUrls, useUint8FeatureSelection, useExpressionValueGetter, TitleInfo } from "@vitessce/vit-s";
+import { usePlotOptionsStyles, OptionsContainer, CellColorEncodingOption, OptionSelect, useVitessceContainer, useComponentHover, useComponentViewInfo, useLoaders, useCoordinationScopes, useSetComponentHover, useSetComponentViewInfo, useCoordination, useInitialCoordination, useDeckCanvasSize, useObsSetsData, useFeatureSelection, useObsFeatureMatrixIndices, useReady, useUrls, useUint8FeatureSelection, useExpressionValueGetter, TitleInfo } from "@vitessce/vit-s";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default from "react-dom";
 function _mergeNamespaces(n2, m2) {
@@ -9492,7 +9492,7 @@ const ViewType$1 = {
   SCATTERPLOT: "scatterplot",
   SPATIAL: "spatial",
   SPATIAL_BETA: "spatialBeta",
-  SPATIAL_ACCELERATED: "spatialAccelerated",
+  // SPATIAL_ACCELERATED: 'spatialAccelerated',
   HEATMAP: "heatmap",
   LAYER_CONTROLLER: "layerController",
   LAYER_CONTROLLER_BETA: "layerControllerBeta",
@@ -123129,22 +123129,22 @@ function addDecoder(cases, importFn) {
   }
   cases.forEach((c2) => registry$1.set(c2, importFn));
 }
-addDecoder([void 0, 1], () => import("./raw-BFCCI-Mm.js").then((m2) => m2.default));
-addDecoder(5, () => import("./lzw-DiaKhPZe.js").then((m2) => m2.default));
+addDecoder([void 0, 1], () => import("./raw-CPZ15kc6.js").then((m2) => m2.default));
+addDecoder(5, () => import("./lzw-UI7yv_i_.js").then((m2) => m2.default));
 addDecoder(6, () => {
   throw new Error("old style JPEG compression is not supported.");
 });
-addDecoder(7, () => import("./jpeg-G-ewKEbP.js").then((m2) => m2.default));
-addDecoder([8, 32946], () => import("./deflate-B6pWJWB8.js").then((m2) => m2.default));
-addDecoder(32773, () => import("./packbits-CT7DC7Iq.js").then((m2) => m2.default));
+addDecoder(7, () => import("./jpeg-DVC1608-.js").then((m2) => m2.default));
+addDecoder([8, 32946], () => import("./deflate-BKZQ1leu.js").then((m2) => m2.default));
+addDecoder(32773, () => import("./packbits-9luiYC71.js").then((m2) => m2.default));
 addDecoder(
   34887,
-  () => import("./lerc-CoSyfsZl.js").then(async (m2) => {
+  () => import("./lerc-DNyzMqIs.js").then(async (m2) => {
     await m2.zstd.init();
     return m2;
   }).then((m2) => m2.default)
 );
-addDecoder(50001, () => import("./webimage-BtSqKc33.js").then((m2) => m2.default));
+addDecoder(50001, () => import("./webimage-D6ZE7-4c.js").then((m2) => m2.default));
 function decodeRowAcc(row, stride) {
   let length2 = row.length - stride;
   let offset2 = 0;
@@ -158139,13 +158139,13 @@ function IconButton(props) {
 function ToolMenu(props) {
   const pointerIconAltText = "Pointer tool";
   const lassoIconAltText = "Select lasso";
-  const { setActiveTool, activeTool, visibleTools = { pan: true, selectLasso: true }, recenterOnClick = () => {
+  const { setActiveTool, activeTool, visibleTools = { pan: true, selectLasso: true, recenter: true }, recenterOnClick = () => {
   } } = props;
   const { classes } = useStyles$2();
   const onRecenterButtonCLick = () => {
     recenterOnClick();
   };
-  return jsxRuntimeExports.jsxs("div", { className: classes.tool, children: [visibleTools.pan && jsxRuntimeExports.jsx(IconTool, { alt: pointerIconAltText, onClick: () => setActiveTool(null), isActive: activeTool === null, children: jsxRuntimeExports.jsx(SvgNearMe, {}) }), visibleTools.selectLasso ? jsxRuntimeExports.jsx(IconTool, { alt: lassoIconAltText, onClick: () => setActiveTool(distEs6Exports$2.SELECTION_TYPE.POLYGON), isActive: activeTool === distEs6Exports$2.SELECTION_TYPE.POLYGON, children: jsxRuntimeExports.jsx(SvgSelectionLasso, {}) }) : null, jsxRuntimeExports.jsx(IconButton, { alt: "click to recenter", onClick: () => onRecenterButtonCLick(), "aria-label": "Recenter scatterplot view", children: jsxRuntimeExports.jsx(CenterFocusStrong, {}) })] });
+  return jsxRuntimeExports.jsxs("div", { className: classes.tool, children: [visibleTools.pan && jsxRuntimeExports.jsx(IconTool, { alt: pointerIconAltText, onClick: () => setActiveTool(null), isActive: activeTool === null, children: jsxRuntimeExports.jsx(SvgNearMe, {}) }), visibleTools.selectLasso ? jsxRuntimeExports.jsx(IconTool, { alt: lassoIconAltText, onClick: () => setActiveTool(distEs6Exports$2.SELECTION_TYPE.POLYGON), isActive: activeTool === distEs6Exports$2.SELECTION_TYPE.POLYGON, children: jsxRuntimeExports.jsx(SvgSelectionLasso, {}) }) : null, visibleTools.recenter ? jsxRuntimeExports.jsx(IconButton, { alt: "click to recenter", onClick: () => onRecenterButtonCLick(), "aria-label": "Recenter scatterplot view", children: jsxRuntimeExports.jsx(CenterFocusStrong, {}) }) : null] });
 }
 const getCursorWithTool = () => "crosshair";
 const getCursor = (interactionState) => interactionState.isDragging ? "grabbing" : "default";
@@ -158380,7 +158380,7 @@ class AbstractSpatialOrScatterplot extends PureComponent {
    */
   render() {
     var _a3, _b2, _c, _d;
-    const { deckRef, viewState, uuid, hideTools, orbitAxis } = this.props;
+    const { deckRef, viewState, uuid, hideTools, hideRecenter, orbitAxis } = this.props;
     const { gl, tool } = this.state;
     const layers = this.getLayers();
     const use3d = this.use3d();
@@ -158389,7 +158389,8 @@ class AbstractSpatialOrScatterplot extends PureComponent {
     const useDevicePixels = !use3d && (((_b2 = (_a3 = this.obsSegmentationsData) == null ? void 0 : _a3.shape) == null ? void 0 : _b2[0]) < 1e5 || ((_d = (_c = this.obsLocationsData) == null ? void 0 : _c.shape) == null ? void 0 : _d[1]) < 1e5);
     return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(ToolMenu, { activeTool: tool, setActiveTool: this.onToolChange, visibleTools: {
       pan: showPanTool && !hideTools,
-      selectLasso: showCellSelectionTools && !hideTools
+      selectLasso: showCellSelectionTools && !hideTools,
+      recenter: !hideRecenter
     }, recenterOnClick: this.recenter }), jsxRuntimeExports.jsx(DeckGL, { id: `deckgl-overlay-${uuid}`, ref: deckRef, views: [
       use3d ? new OrbitView({ id: "orbit", controller: true, orbitAxis }) : new OrthographicView({
         id: "ortho"
@@ -159341,21 +159342,14 @@ function GatingScatterplotOptions(props) {
     transformOptions
   } = props;
   const gatingScatterplotOptionsId = $bdb11010cef70236$export$f680877a34711e37();
+  const gatingScatterplotGeneXId = $bdb11010cef70236$export$f680877a34711e37();
+  const gatingScatterplotGeneYId = $bdb11010cef70236$export$f680877a34711e37();
   const { classes } = usePlotOptionsStyles();
-  const handleGeneSelectChange = (event) => {
-    const { options } = event.target;
-    const newValues = [];
-    for (let i2 = 0, l2 = options.length; i2 < l2; i2 += 1) {
-      if (options[i2].selected) {
-        newValues.push(options[i2].value);
-      }
-    }
-    if (newValues.length === 1 && gatingFeatureSelectionX && !gatingFeatureSelectionY && newValues[0] !== gatingFeatureSelectionX) {
-      setGatingFeatureSelectionY(newValues[0]);
-    } else if (newValues.length <= 2) {
-      setGatingFeatureSelectionX(newValues[0]);
-      setGatingFeatureSelectionY(newValues[1]);
-    }
+  const handleSelectionX = (event) => {
+    setGatingFeatureSelectionX(event.target.value === "" ? null : event.target.value);
+  };
+  const handleSelectionY = (event) => {
+    setGatingFeatureSelectionY(event.target.value === "" ? null : event.target.value);
   };
   const handleTransformChange = (event) => {
     setGatingFeatureValueTransform(event.target.value === "" ? null : event.target.value);
@@ -159374,20 +159368,40 @@ function GatingScatterplotOptions(props) {
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(TableRow, null, /* @__PURE__ */ React__default.createElement(TableCell, { className: classes.labelCell, variant: "head", scope: "row" }, /* @__PURE__ */ React__default.createElement(
     "label",
     {
-      htmlFor: `scatterplot-gating-gene-select-${gatingScatterplotOptionsId}`
+      htmlFor: `scatterplot-gating-gene-select-${gatingScatterplotGeneXId}`
+    },
+    capitalize$2(featureType),
+    " along X"
+  )), /* @__PURE__ */ React__default.createElement(TableCell, { className: classes.inputCell, variant: "body" }, /* @__PURE__ */ React__default.createElement(
+    OptionSelect,
+    {
+      className: classes.select,
+      value: gatingFeatureSelectionX ?? "",
+      onChange: handleSelectionX,
+      inputProps: {
+        id: `scatterplot-gating-gene-select-${gatingScatterplotGeneXId}`
+      }
+    },
+    /* @__PURE__ */ React__default.createElement("option", { value: "" }, "None"),
+    geneSelectOptions.map((name2) => /* @__PURE__ */ React__default.createElement("option", { key: name2, value: name2 }, name2))
+  ))), /* @__PURE__ */ React__default.createElement(TableRow, null, /* @__PURE__ */ React__default.createElement(TableCell, { className: classes.labelCell, variant: "head", scope: "row" }, /* @__PURE__ */ React__default.createElement(
+    "label",
+    {
+      htmlFor: `scatterplot-gating-gene-select-${gatingScatterplotGeneYId}`
     },
-    capitalize$2(pluralize(featureType, geneSelectOptions == null ? void 0 : geneSelectOptions.length))
+    capitalize$2(featureType),
+    " along Y"
   )), /* @__PURE__ */ React__default.createElement(TableCell, { className: classes.inputCell, variant: "body" }, /* @__PURE__ */ React__default.createElement(
     OptionSelect,
     {
-      multiple: true,
       className: classes.select,
-      value: [gatingFeatureSelectionX, gatingFeatureSelectionY].filter((v) => v),
-      onChange: handleGeneSelectChange,
+      value: gatingFeatureSelectionY ?? "",
+      onChange: handleSelectionY,
       inputProps: {
-        id: `scatterplot-gating-gene-select-${gatingScatterplotOptionsId}`
+        id: `scatterplot-gating-gene-select-${gatingScatterplotGeneYId}`
       }
     },
+    /* @__PURE__ */ React__default.createElement("option", { value: "" }, "None"),
     geneSelectOptions.map((name2) => /* @__PURE__ */ React__default.createElement("option", { key: name2, value: name2 }, name2))
   ))), /* @__PURE__ */ React__default.createElement(TableRow, null, /* @__PURE__ */ React__default.createElement(TableCell, { className: classes.labelCell, variant: "head", scope: "row" }, /* @__PURE__ */ React__default.createElement(
     "label",
@@ -159419,7 +159433,7 @@ function GatingScatterplotOptions(props) {
       type: "number",
       onChange: handleTransformCoefficientChange,
       value: gatingFeatureValueTransformCoefficient,
-      slotProps: { input: { shrink: true } },
+      slotProps: { inputLabel: { shrink: true } },
       id: `scatterplot-gating-transform-coefficient-${gatingScatterplotOptionsId}`
     }
   ))));
@@ -159499,6 +159513,14 @@ function GatingSubscriber(props) {
     COMPONENT_COORDINATION_TYPES[ViewType$1.GATING],
     coordinationScopes
   );
+  const {
+    embeddingZoom: initialZoom,
+    embeddingTargetX: initialTargetX,
+    embeddingTargetY: initialTargetY
+  } = useInitialCoordination(
+    COMPONENT_COORDINATION_TYPES[ViewType$1.GATING],
+    coordinationScopes
+  );
   const [width2, height2, deckRef] = useDeckCanvasSize();
   const title = useMemo(() => {
     if (titleOverride) {
@@ -159622,6 +159644,7 @@ function GatingSubscriber(props) {
   ]);
   const [dynamicCellRadius, setDynamicCellRadius] = useState(cellRadiusFixed);
   const [dynamicCellOpacity, setDynamicCellOpacity] = useState(cellOpacityFixed);
+  const [originalViewState, setOriginalViewState] = useState(null);
   const mergedCellSets = useMemo(() => mergeObsSets(
     cellSets,
     additionalCellSets
@@ -159722,13 +159745,20 @@ function GatingSubscriber(props) {
         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(width2 / xRange, height2 / 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: [initialTargetX, initialTargetY, 0], zoom: initialZoom });
       }
     }
   }, [
@@ -159740,6 +159770,8 @@ function GatingSubscriber(props) {
     width2,
     height2,
     zoom,
+    initialTargetX,
+    initialTargetY,
     averageFillDensity
   ]);
   const cellSelectionSet = useMemo(() => new Set(cellSelection), [cellSelection]);
@@ -159773,6 +159805,12 @@ function GatingSubscriber(props) {
     gatingFeatureSelectionY,
     obsType
   ]);
+  const setViewState = ({ zoom: newZoom, target }) => {
+    setZoom(newZoom);
+    setTargetX(target[0]);
+    setTargetY(target[1]);
+    setTargetZ(target[2] || 0);
+  };
   return /* @__PURE__ */ React__default.createElement(
     TitleInfo,
     {
@@ -159848,13 +159886,10 @@ function GatingSubscriber(props) {
         uuid,
         theme,
         hideTools: !(gatingFeatureSelectionX && gatingFeatureSelectionY),
+        hideRecenter: !(gatingFeatureSelectionX && gatingFeatureSelectionY),
         viewState: { zoom, target: [targetX, targetY, targetZ] },
-        setViewState: ({ zoom: newZoom, target }) => {
-          setZoom(newZoom);
-          setTargetX(target[0]);
-          setTargetY(target[1]);
-          setTargetZ(target[2] || 0);
-        },
+        setViewState,
+        originalViewState,
         obsEmbeddingIndex: obsIndex,
         obsEmbedding: obsXY,
         cellFilter,
@@ -159878,7 +159913,8 @@ function GatingSubscriber(props) {
         },
         updateViewInfo: setComponentViewInfo,
         getExpressionValue,
-        getCellIsSelected
+        getCellIsSelected,
+        embeddingPointsVisible: true
       }
     ),
     !disableTooltip && /* @__PURE__ */ React__default.createElement(

package/dist/index.js

@@ -1,4 +1,4 @@
-import { G } from "./index-B4FTJe_L.js";
+import { G } from "./index-BtZNxZ-h.js";
 export {
   G as GatingSubscriber
 };

package/dist/{jpeg-G-ewKEbP.js → jpeg-DVC1608-.js}

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

package/dist/{lerc-CoSyfsZl.js → lerc-DNyzMqIs.js}

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

package/dist/{lzw-DiaKhPZe.js → lzw-UI7yv_i_.js}

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

package/dist/{packbits-CT7DC7Iq.js → packbits-9luiYC71.js}

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

package/dist/{raw-BFCCI-Mm.js → raw-CPZ15kc6.js}

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

package/dist/{webimage-BtSqKc33.js → webimage-D6ZE7-4c.js}

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

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

@@ -1 +1 @@
-{"version":3,"file":"GatingScatterplotOptions.d.ts","sourceRoot":"","sources":["../src/GatingScatterplotOptions.js"],"names":[],"mappings":"AAMA,0EAoIC"}
+{"version":3,"file":"GatingScatterplotOptions.d.ts","sourceRoot":"","sources":["../src/GatingScatterplotOptions.js"],"names":[],"mappings":"AAMA,0EAwJC"}

package/dist-tsc/GatingScatterplotOptions.js

@@ -1,32 +1,21 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
 import { useId } from 'react-aria';
 import { TableCell, TableRow, TextField } from '@vitessce/styles';
 import { usePlotOptionsStyles, OptionSelect } from '@vitessce/vit-s';
-import { capitalize, pluralize as plur } from '@vitessce/utils';
+import { capitalize } from '@vitessce/utils';
 export default function GatingScatterplotOptions(props) {
     const { featureType, gatingFeatureSelectionX, setGatingFeatureSelectionX, gatingFeatureSelectionY, setGatingFeatureSelectionY, gatingFeatureValueTransform, setGatingFeatureValueTransform, gatingFeatureValueTransformCoefficient, setGatingFeatureValueTransformCoefficient, geneSelectOptions, transformOptions, } = props;
     const gatingScatterplotOptionsId = useId();
+    const gatingScatterplotGeneXId = useId();
+    const gatingScatterplotGeneYId = useId();
     const { classes } = usePlotOptionsStyles();
     // Handlers for custom option field changes.
-    const handleGeneSelectChange = (event) => {
-        const { options } = event.target;
-        const newValues = [];
-        for (let i = 0, l = options.length; i < l; i += 1) {
-            if (options[i].selected) {
-                newValues.push(options[i].value);
-            }
-        }
-        if (newValues.length === 1
-            && gatingFeatureSelectionX
-            && !gatingFeatureSelectionY
-            && newValues[0] !== gatingFeatureSelectionX) {
-            setGatingFeatureSelectionY(newValues[0]);
-        }
-        else if (newValues.length <= 2) {
-            setGatingFeatureSelectionX(newValues[0]);
-            setGatingFeatureSelectionY(newValues[1]);
-        }
+    const handleSelectionX = (event) => {
+        setGatingFeatureSelectionX(event.target.value === '' ? null : event.target.value);
+    };
+    const handleSelectionY = (event) => {
+        setGatingFeatureSelectionY(event.target.value === '' ? null : event.target.value);
     };
     const handleTransformChange = (event) => {
         setGatingFeatureValueTransform(event.target.value === '' ? null : event.target.value);
@@ -45,9 +34,11 @@ export default function GatingScatterplotOptions(props) {
             }
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `scatterplot-gating-gene-select-${gatingScatterplotOptionsId}`, children: capitalize(plur(featureType, geneSelectOptions?.length)) }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(OptionSelect, { multiple: true, className: classes.select, value: [gatingFeatureSelectionX, gatingFeatureSelectionY].filter(v => v), onChange: handleGeneSelectChange, inputProps: {
-                                id: `scatterplot-gating-gene-select-${gatingScatterplotOptionsId}`,
-                            }, children: geneSelectOptions.map(name => (_jsx("option", { value: name, children: name }, name))) }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `scatterplot-gating-transform-select-${gatingScatterplotOptionsId}`, children: "Transform" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(OptionSelect, { className: classes.select, value: gatingFeatureValueTransform === null ? '' : gatingFeatureValueTransform, onChange: handleTransformChange, inputProps: {
+    return (_jsxs(_Fragment, { children: [_jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsxs("label", { htmlFor: `scatterplot-gating-gene-select-${gatingScatterplotGeneXId}`, children: [capitalize(featureType), " along X"] }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsxs(OptionSelect, { className: classes.select, value: gatingFeatureSelectionX ?? '', onChange: handleSelectionX, inputProps: {
+                                id: `scatterplot-gating-gene-select-${gatingScatterplotGeneXId}`,
+                            }, children: [_jsx("option", { value: "", children: "None" }), geneSelectOptions.map(name => (_jsx("option", { value: name, children: name }, name)))] }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsxs("label", { htmlFor: `scatterplot-gating-gene-select-${gatingScatterplotGeneYId}`, children: [capitalize(featureType), " along Y"] }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsxs(OptionSelect, { className: classes.select, value: gatingFeatureSelectionY ?? '', onChange: handleSelectionY, inputProps: {
+                                id: `scatterplot-gating-gene-select-${gatingScatterplotGeneYId}`,
+                            }, children: [_jsx("option", { value: "", children: "None" }), geneSelectOptions.map(name => (_jsx("option", { value: name, children: name }, name)))] }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `scatterplot-gating-transform-select-${gatingScatterplotOptionsId}`, children: "Transform" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(OptionSelect, { className: classes.select, value: gatingFeatureValueTransform === null ? '' : gatingFeatureValueTransform, onChange: handleTransformChange, inputProps: {
                                 id: `scatterplot-gating-transform-select-${gatingScatterplotOptionsId}`,
-                            }, children: transformOptions.map(opt => (_jsx("option", { value: opt.value === null ? '' : opt.value, children: opt.name }, opt.name))) }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `scatterplot-gating-transform-coefficient-${gatingScatterplotOptionsId}`, children: "Transform Coefficient" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(TextField, { label: "Transform Coefficient", type: "number", onChange: handleTransformCoefficientChange, value: gatingFeatureValueTransformCoefficient, slotProps: { input: { shrink: true } }, id: `scatterplot-gating-transform-coefficient-${gatingScatterplotOptionsId}` }) })] })] }));
+                            }, children: transformOptions.map(opt => (_jsx("option", { value: opt.value === null ? '' : opt.value, children: opt.name }, opt.name))) }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `scatterplot-gating-transform-coefficient-${gatingScatterplotOptionsId}`, children: "Transform Coefficient" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(TextField, { label: "Transform Coefficient", type: "number", onChange: handleTransformCoefficientChange, value: gatingFeatureValueTransformCoefficient, slotProps: { inputLabel: { shrink: true } }, id: `scatterplot-gating-transform-coefficient-${gatingScatterplotOptionsId}` }) })] })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"GatingSubscriber.d.ts","sourceRoot":"","sources":["../src/GatingSubscriber.js"],"names":[],"mappings":"AAoCA;;;;;;;;;;;;KAYK;AACL,wCAVK;IAAsB,IAAI,EAAlB,MAAM;IACQ,KAAK,EAAnB,MAAM;IACQ,kBAAkB,EAAhC,MAAM;IAES,cAAc,EAA7B,OAAO;IACS,mBAAmB;IAErB,kBAAkB,EAAhC,MAAM;CAEhB,eAobF"}
+{"version":3,"file":"GatingSubscriber.d.ts","sourceRoot":"","sources":["../src/GatingSubscriber.js"],"names":[],"mappings":"AAqCA;;;;;;;;;;;;KAYK;AACL,wCAVK;IAAsB,IAAI,EAAlB,MAAM;IACQ,KAAK,EAAnB,MAAM;IACQ,kBAAkB,EAAhC,MAAM;IAES,cAAc,EAA7B,OAAO;IACS,mBAAmB;IAErB,kBAAkB,EAAhC,MAAM;CAEhB,eA6cF"}

package/dist-tsc/GatingSubscriber.js

@@ -3,7 +3,7 @@ import React, { useState, useEffect, useCallback, useMemo, } from 'react';
 import { extent } from 'd3-array';
 import { isEqual } from 'lodash-es';
 import { pluralize as plur, capitalize, commaNumber, getValueTransformFunction, VALUE_TRANSFORM_OPTIONS, } from '@vitessce/utils';
-import { TitleInfo, useDeckCanvasSize, useReady, useUrls, useUint8FeatureSelection, useExpressionValueGetter, useObsSetsData, useFeatureSelection, useObsFeatureMatrixIndices, useCoordination, useLoaders, useSetComponentHover, useSetComponentViewInfo, useCoordinationScopes, } from '@vitessce/vit-s';
+import { TitleInfo, useDeckCanvasSize, useReady, useUrls, useUint8FeatureSelection, useExpressionValueGetter, useObsSetsData, useFeatureSelection, useObsFeatureMatrixIndices, useCoordination, useInitialCoordination, useLoaders, useSetComponentHover, useSetComponentViewInfo, useCoordinationScopes, } from '@vitessce/vit-s';
 import { getCellSetPolygons, mergeObsSets, setObsSelection, getCellColors, } from '@vitessce/sets-utils';
 import { Scatterplot, ScatterplotTooltipSubscriber, ScatterplotOptions, getPointSizeDevicePixels, getPointOpacity, EmptyMessage, } from '@vitessce/scatterplot';
 import { ViewType, COMPONENT_COORDINATION_TYPES, ViewHelpMapping } from '@vitessce/constants-internal';
@@ -31,6 +31,7 @@ export function GatingSubscriber(props) {
     const setComponentViewInfo = useSetComponentViewInfo(uuid);
     // Get "props" from the coordination space.
     const [{ dataset, obsType, featureType, featureValueType, embeddingZoom: zoom, embeddingTargetX: targetX, embeddingTargetY: targetY, embeddingTargetZ: targetZ, obsFilter: cellFilter, obsHighlight: cellHighlight, 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, featureSelection: gatingFeatureSelectionColor, featureValueTransform, featureValueTransformCoefficient, gatingFeatureSelectionX, gatingFeatureSelectionY, }, { 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, setFeatureValueTransform, setFeatureValueTransformCoefficient, setGatingFeatureSelectionX, setGatingFeatureSelectionY, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.GATING], coordinationScopes);
+    const { embeddingZoom: initialZoom, embeddingTargetX: initialTargetX, embeddingTargetY: initialTargetY, } = useInitialCoordination(COMPONENT_COORDINATION_TYPES[ViewType.GATING], coordinationScopes);
     const [width, height, deckRef] = useDeckCanvasSize();
     const title = useMemo(() => {
         if (titleOverride) {
@@ -105,6 +106,7 @@ export function GatingSubscriber(props) {
     ]);
     const [dynamicCellRadius, setDynamicCellRadius] = useState(cellRadiusFixed);
     const [dynamicCellOpacity, setDynamicCellOpacity] = useState(cellOpacityFixed);
+    const [originalViewState, setOriginalViewState] = useState(null);
     const mergedCellSets = useMemo(() => mergeObsSets(cellSets, additionalCellSets), [cellSets, additionalCellSets]);
     const setCellSelectionProp = useCallback((v) => {
         setObsSelection(v, additionalCellSets, cellSetColor, setCellSetSelection, setAdditionalCellSets, setCellSetColor, setCellColorEncoding);
@@ -165,19 +167,29 @@ export function GatingSubscriber(props) {
             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') {
                 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: [initialTargetX, initialTargetY, 0], zoom: initialZoom });
             }
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [xRange, yRange, xExtent, yExtent, numCells,
-        width, height, zoom, averageFillDensity]);
+        width, height, zoom, initialTargetX, initialTargetY, averageFillDensity]);
     const cellSelectionSet = useMemo(() => new Set(cellSelection), [cellSelection]);
     const getCellIsSelected = useCallback((object, { index }) => ((cellSelectionSet || new Set([])).has(obsIndex[index]) ? 1.0 : 0.0), [cellSelectionSet, obsIndex]);
     const cellRadius = (cellRadiusMode === 'manual' ? cellRadiusFixed : dynamicCellRadius);
@@ -204,17 +216,18 @@ export function GatingSubscriber(props) {
     }, [obsXY, obsIndex, featureValueTransform,
         gatingFeatureSelectionX, gatingFeatureSelectionY, obsType,
     ]);
+    const setViewState = ({ zoom: newZoom, target }) => {
+        setZoom(newZoom);
+        setTargetX(target[0]);
+        setTargetY(target[1]);
+        setTargetZ(target[2] || 0);
+    };
     return (_jsxs(TitleInfo, { title: title, info: `${commaNumber(cellsCount)} ${plur(obsType, cellsCount)}`, closeButtonVisible: closeButtonVisible, downloadButtonVisible: downloadButtonVisible, removeGridComponent: removeGridComponent, urls: urls, theme: theme, isReady: isReady, helpText: helpText, errors: errors, options: (_jsx(ScatterplotOptions, { observationsLabel: obsType, cellRadius: cellRadiusFixed, setCellRadius: setCellRadiusFixed, cellRadiusMode: cellRadiusMode, setCellRadiusMode: setCellRadiusMode, cellOpacity: cellOpacityFixed, setCellOpacity: setCellOpacityFixed, cellOpacityMode: cellOpacityMode, setCellOpacityMode: setCellOpacityMode, cellSetLabelsVisible: cellSetLabelsVisible, setCellSetLabelsVisible: setCellSetLabelsVisible, cellSetLabelSize: cellSetLabelSize, setCellSetLabelSize: setCellSetLabelSize, cellSetPolygonsVisible: cellSetPolygonsVisible, setCellSetPolygonsVisible: setCellSetPolygonsVisible, cellColorEncoding: cellColorEncoding, setCellColorEncoding: setCellColorEncoding, geneExpressionColormap: geneExpressionColormap, setGeneExpressionColormap: setGeneExpressionColormap, geneExpressionColormapRange: geneExpressionColormapRange, setGeneExpressionColormapRange: setGeneExpressionColormapRange, children: _jsx(GatingScatterplotOptions, { featureType: featureType, gatingFeatureSelectionX: gatingFeatureSelectionX, setGatingFeatureSelectionX: setGatingFeatureSelectionX, gatingFeatureSelectionY: gatingFeatureSelectionY, setGatingFeatureSelectionY: setGatingFeatureSelectionY, gatingFeatureValueTransform: featureValueTransform, setGatingFeatureValueTransform: (newValue) => {
                     setFeatureValueTransform(newValue);
                     setTargetX(null);
                     setTargetY(null);
                     setZoom(null);
-                }, gatingFeatureValueTransformCoefficient: featureValueTransformCoefficient, setGatingFeatureValueTransformCoefficient: setFeatureValueTransformCoefficient, geneSelectOptions: featureIndex, transformOptions: VALUE_TRANSFORM_OPTIONS }) })), children: [_jsx(EmptyMessage, { visible: !(gatingFeatureSelectionX && gatingFeatureSelectionY), message: `Select two ${plur(featureType, 2)} in the plot settings.` }), _jsx(Scatterplot, { ref: deckRef, uuid: uuid, theme: theme, hideTools: !(gatingFeatureSelectionX && gatingFeatureSelectionY), viewState: { zoom, target: [targetX, targetY, targetZ] }, setViewState: ({ zoom: newZoom, target }) => {
-                    setZoom(newZoom);
-                    setTargetX(target[0]);
-                    setTargetY(target[1]);
-                    setTargetZ(target[2] || 0);
-                }, obsEmbeddingIndex: obsIndex, obsEmbedding: obsXY, cellFilter: cellFilter, cellSelection: cellSelection, cellHighlight: cellHighlight, cellColors: cellColors, cellSetPolygons: cellSetPolygons, cellSetLabelSize: cellSetLabelSize, cellSetLabelsVisible: cellSetLabelsVisible, cellSetPolygonsVisible: cellSetPolygonsVisible, setCellFilter: setCellFilter, setCellSelection: setCellSelectionProp, setCellHighlight: setCellHighlight, cellRadius: cellRadius, cellOpacity: cellOpacity, cellColorEncoding: cellColorEncoding, geneExpressionColormap: geneExpressionColormap, geneExpressionColormapRange: geneExpressionColormapRange, setComponentHover: () => {
+                }, gatingFeatureValueTransformCoefficient: featureValueTransformCoefficient, setGatingFeatureValueTransformCoefficient: setFeatureValueTransformCoefficient, geneSelectOptions: featureIndex, transformOptions: VALUE_TRANSFORM_OPTIONS }) })), children: [_jsx(EmptyMessage, { visible: !(gatingFeatureSelectionX && gatingFeatureSelectionY), message: `Select two ${plur(featureType, 2)} in the plot settings.` }), _jsx(Scatterplot, { ref: deckRef, uuid: uuid, theme: theme, hideTools: !(gatingFeatureSelectionX && gatingFeatureSelectionY), hideRecenter: !(gatingFeatureSelectionX && gatingFeatureSelectionY), viewState: { zoom, target: [targetX, targetY, targetZ] }, setViewState: setViewState, originalViewState: originalViewState, obsEmbeddingIndex: obsIndex, obsEmbedding: obsXY, cellFilter: cellFilter, cellSelection: cellSelection, cellHighlight: cellHighlight, cellColors: cellColors, cellSetPolygons: cellSetPolygons, cellSetLabelSize: cellSetLabelSize, cellSetLabelsVisible: cellSetLabelsVisible, cellSetPolygonsVisible: cellSetPolygonsVisible, setCellFilter: setCellFilter, setCellSelection: setCellSelectionProp, setCellHighlight: setCellHighlight, cellRadius: cellRadius, cellOpacity: cellOpacity, cellColorEncoding: cellColorEncoding, geneExpressionColormap: geneExpressionColormap, geneExpressionColormapRange: geneExpressionColormapRange, setComponentHover: () => {
                     setComponentHover(uuid);
-                }, updateViewInfo: setComponentViewInfo, getExpressionValue: getExpressionValue, getCellIsSelected: getCellIsSelected }), !disableTooltip && (_jsx(ScatterplotTooltipSubscriber, { parentUuid: uuid, obsHighlight: cellHighlight, width: width, height: height, getObsInfo: getObsInfo }))] }));
+                }, updateViewInfo: setComponentViewInfo, getExpressionValue: getExpressionValue, getCellIsSelected: getCellIsSelected, embeddingPointsVisible: true }), !disableTooltip && (_jsx(ScatterplotTooltipSubscriber, { parentUuid: uuid, obsHighlight: cellHighlight, width: width, height: height, getObsInfo: getObsInfo }))] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/scatterplot-gating",
-  "version": "3.8.0",
+  "version": "3.8.1",
   "author": "HIDIVE Lab at HMS",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -19,12 +19,12 @@
     "d3-array": "^2.4.0",
     "lodash-es": "^4.17.21",
     "react-aria": "^3.28.0",
-    "@vitessce/styles": "3.8.0",
-    "@vitessce/constants-internal": "3.8.0",
-    "@vitessce/scatterplot": "3.8.0",
-    "@vitessce/sets-utils": "3.8.0",
-    "@vitessce/utils": "3.8.0",
-    "@vitessce/vit-s": "3.8.0"
+    "@vitessce/styles": "3.8.1",
+    "@vitessce/constants-internal": "3.8.1",
+    "@vitessce/scatterplot": "3.8.1",
+    "@vitessce/sets-utils": "3.8.1",
+    "@vitessce/utils": "3.8.1",
+    "@vitessce/vit-s": "3.8.1"
   },
   "devDependencies": {
     "react": "18.3.1",

package/src/GatingScatterplotOptions.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { useId } from 'react-aria';
 import { TableCell, TableRow, TextField } from '@vitessce/styles';
 import { usePlotOptionsStyles, OptionSelect } from '@vitessce/vit-s';
-import { capitalize, pluralize as plur } from '@vitessce/utils';
+import { capitalize } from '@vitessce/utils';
 
 export default function GatingScatterplotOptions(props) {
   const {
@@ -20,28 +20,18 @@ export default function GatingScatterplotOptions(props) {
   } = props;
 
   const gatingScatterplotOptionsId = useId();
+  const gatingScatterplotGeneXId = useId();
+  const gatingScatterplotGeneYId = useId();
 
   const { classes } = usePlotOptionsStyles();
 
   // Handlers for custom option field changes.
-  const handleGeneSelectChange = (event) => {
-    const { options } = event.target;
-    const newValues = [];
-    for (let i = 0, l = options.length; i < l; i += 1) {
-      if (options[i].selected) {
-        newValues.push(options[i].value);
-      }
-    }
+  const handleSelectionX = (event) => {
+    setGatingFeatureSelectionX(event.target.value === '' ? null : event.target.value);
+  };
 
-    if (newValues.length === 1
-          && gatingFeatureSelectionX
-          && !gatingFeatureSelectionY
-          && newValues[0] !== gatingFeatureSelectionX) {
-      setGatingFeatureSelectionY(newValues[0]);
-    } else if (newValues.length <= 2) {
-      setGatingFeatureSelectionX(newValues[0]);
-      setGatingFeatureSelectionY(newValues[1]);
-    }
+  const handleSelectionY = (event) => {
+    setGatingFeatureSelectionY(event.target.value === '' ? null : event.target.value);
   };
 
   const handleTransformChange = (event) => {
@@ -67,21 +57,51 @@ export default function GatingScatterplotOptions(props) {
       <TableRow>
         <TableCell className={classes.labelCell} variant="head" scope="row">
           <label
-            htmlFor={`scatterplot-gating-gene-select-${gatingScatterplotOptionsId}`}
+            htmlFor={`scatterplot-gating-gene-select-${gatingScatterplotGeneXId}`}
+          >
+            {capitalize(featureType)} along X
+          </label>
+        </TableCell>
+        <TableCell className={classes.inputCell} variant="body">
+          <OptionSelect
+            className={classes.select}
+            value={gatingFeatureSelectionX ?? ''}
+            onChange={handleSelectionX}
+            inputProps={{
+              id: `scatterplot-gating-gene-select-${gatingScatterplotGeneXId}`,
+            }}
+          >
+            <option value="">
+              None
+            </option>
+            {geneSelectOptions.map(name => (
+              <option key={name} value={name}>
+                {name}
+              </option>
+            ))}
+          </OptionSelect>
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell className={classes.labelCell} variant="head" scope="row">
+          <label
+            htmlFor={`scatterplot-gating-gene-select-${gatingScatterplotGeneYId}`}
           >
-            {capitalize(plur(featureType, geneSelectOptions?.length))}
+            {capitalize(featureType)} along Y
           </label>
         </TableCell>
         <TableCell className={classes.inputCell} variant="body">
           <OptionSelect
-            multiple
             className={classes.select}
-            value={[gatingFeatureSelectionX, gatingFeatureSelectionY].filter(v => v)}
-            onChange={handleGeneSelectChange}
+            value={gatingFeatureSelectionY ?? ''}
+            onChange={handleSelectionY}
             inputProps={{
-              id: `scatterplot-gating-gene-select-${gatingScatterplotOptionsId}`,
+              id: `scatterplot-gating-gene-select-${gatingScatterplotGeneYId}`,
             }}
           >
+            <option value="">
+              None
+            </option>
             {geneSelectOptions.map(name => (
               <option key={name} value={name}>
                 {name}
@@ -129,7 +149,7 @@ export default function GatingScatterplotOptions(props) {
             type="number"
             onChange={handleTransformCoefficientChange}
             value={gatingFeatureValueTransformCoefficient}
-            slotProps={{ input: { shrink: true } }}
+            slotProps={{ inputLabel: { shrink: true } }}
             id={`scatterplot-gating-transform-coefficient-${gatingScatterplotOptionsId}`}
           />
         </TableCell>

package/src/GatingSubscriber.js

@@ -17,6 +17,7 @@ import {
   useFeatureSelection,
   useObsFeatureMatrixIndices,
   useCoordination,
+  useInitialCoordination,
   useLoaders,
   useSetComponentHover,
   useSetComponentViewInfo,
@@ -126,6 +127,14 @@ export function GatingSubscriber(props) {
     coordinationScopes,
   );
 
+  const {
+    embeddingZoom: initialZoom,
+    embeddingTargetX: initialTargetX,
+    embeddingTargetY: initialTargetY,
+  } = useInitialCoordination(
+    COMPONENT_COORDINATION_TYPES[ViewType.GATING], coordinationScopes,
+  );
+
   const [width, height, deckRef] = useDeckCanvasSize();
 
   const title = useMemo(() => {
@@ -244,6 +253,8 @@ export function GatingSubscriber(props) {
   const [dynamicCellRadius, setDynamicCellRadius] = useState(cellRadiusFixed);
   const [dynamicCellOpacity, setDynamicCellOpacity] = useState(cellOpacityFixed);
 
+  const [originalViewState, setOriginalViewState] = useState(null);
+
   const mergedCellSets = useMemo(() => mergeObsSets(
     cellSets, additionalCellSets,
   ), [cellSets, additionalCellSets]);
@@ -323,19 +334,28 @@ export function GatingSubscriber(props) {
       );
       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);
-        // 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: [initialTargetX, initialTargetY, 0], zoom: initialZoom });
       }
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [xRange, yRange, xExtent, yExtent, numCells,
-    width, height, zoom, averageFillDensity]);
+    width, height, zoom, initialTargetX, initialTargetY, averageFillDensity]);
 
   const cellSelectionSet = useMemo(() => new Set(cellSelection), [cellSelection]);
   const getCellIsSelected = useCallback((object, { index }) => (
@@ -372,6 +392,13 @@ export function GatingSubscriber(props) {
     gatingFeatureSelectionX, gatingFeatureSelectionY, obsType,
   ]);
 
+  const setViewState = ({ zoom: newZoom, target }) => {
+    setZoom(newZoom);
+    setTargetX(target[0]);
+    setTargetY(target[1]);
+    setTargetZ(target[2] || 0);
+  };
+
   return (
     <TitleInfo
       title={title}
@@ -438,13 +465,10 @@ export function GatingSubscriber(props) {
         uuid={uuid}
         theme={theme}
         hideTools={!(gatingFeatureSelectionX && gatingFeatureSelectionY)}
+        hideRecenter={!(gatingFeatureSelectionX && gatingFeatureSelectionY)}
         viewState={{ zoom, target: [targetX, targetY, targetZ] }}
-        setViewState={({ zoom: newZoom, target }) => {
-          setZoom(newZoom);
-          setTargetX(target[0]);
-          setTargetY(target[1]);
-          setTargetZ(target[2] || 0);
-        }}
+        setViewState={setViewState}
+        originalViewState={originalViewState}
         obsEmbeddingIndex={obsIndex}
         obsEmbedding={obsXY}
         cellFilter={cellFilter}
@@ -470,6 +494,8 @@ export function GatingSubscriber(props) {
         getExpressionValue={getExpressionValue}
         getCellIsSelected={getCellIsSelected}
 
+        embeddingPointsVisible
+
       />
       {!disableTooltip && (
       <ScatterplotTooltipSubscriber