@vitessce/scatterplot-gating 2.0.2 → 2.0.3

package/dist/raw.7e14c8c2.mjs

@@ -0,0 +1,12 @@
+import { B as BaseDecoder } from "./index.2b98eb03.mjs";
+import "react";
+import "@vitessce/vit-s";
+import "react-dom";
+class RawDecoder extends BaseDecoder {
+  decodeBlock(buffer) {
+    return buffer;
+  }
+}
+export {
+  RawDecoder as default
+};

package/dist/webimage.ed12ec5b.mjs

@@ -0,0 +1,32 @@
+import { B as BaseDecoder } from "./index.2b98eb03.mjs";
+import "react";
+import "@vitessce/vit-s";
+import "react-dom";
+class WebImageDecoder extends BaseDecoder {
+  constructor() {
+    super();
+    if (typeof createImageBitmap === "undefined") {
+      throw new Error("Cannot decode WebImage as `createImageBitmap` is not available");
+    } else if (typeof document === "undefined" && typeof OffscreenCanvas === "undefined") {
+      throw new Error("Cannot decode WebImage as neither `document` nor `OffscreenCanvas` is not available");
+    }
+  }
+  async decode(fileDirectory, buffer) {
+    const blob = new Blob([buffer]);
+    const imageBitmap = await createImageBitmap(blob);
+    let canvas;
+    if (typeof document !== "undefined") {
+      canvas = document.createElement("canvas");
+      canvas.width = imageBitmap.width;
+      canvas.height = imageBitmap.height;
+    } else {
+      canvas = new OffscreenCanvas(imageBitmap.width, imageBitmap.height);
+    }
+    const ctx = canvas.getContext("2d");
+    ctx.drawImage(imageBitmap, 0, 0);
+    return ctx.getImageData(0, 0, imageBitmap.width, imageBitmap.height).data.buffer;
+  }
+}
+export {
+  WebImageDecoder as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/scatterplot-gating",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -8,20 +8,21 @@
     "url": "git+https://github.com/vitessce/vitessce.git"
   },
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "dist/index.mjs",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "dependencies": {
     "@material-ui/core": "~4.12.3",
     "d3-array": "^2.4.0",
     "lodash": "^4.17.21",
     "plur": "^5.1.0",
-    "@vitessce/constants-internal": "2.0.2",
-    "@vitessce/scatterplot": "2.0.2",
-    "@vitessce/sets-utils": "2.0.2",
-    "@vitessce/utils": "2.0.2",
-    "@vitessce/vit-s": "2.0.2"
+    "@vitessce/constants-internal": "2.0.3",
+    "@vitessce/scatterplot": "2.0.3",
+    "@vitessce/sets-utils": "2.0.3",
+    "@vitessce/utils": "2.0.3",
+    "@vitessce/vit-s": "2.0.3"
   },
   "devDependencies": {
     "react": "^18.0.0",
@@ -32,8 +33,7 @@
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "scripts": {
-    "start": "tsc --watch",
-    "build": "tsc",
+    "bundle": "pnpm exec vite build -c ../../../scripts/vite.config.js",
     "test": "pnpm exec vitest --run -r ../../../ --dir ."
   }
 }

package/src/GatingScatterplotOptions.js

@@ -0,0 +1,130 @@
+import React from 'react';
+import plur from 'plur';
+import TableCell from '@material-ui/core/TableCell';
+import TableRow from '@material-ui/core/TableRow';
+import TextField from '@material-ui/core/TextField';
+import { usePlotOptionsStyles, OptionSelect } from '@vitessce/vit-s';
+import { capitalize } from '@vitessce/utils';
+
+export default function GatingScatterplotOptions(props) {
+  const {
+    featureType,
+    gatingFeatureSelectionX,
+    setGatingFeatureSelectionX,
+    gatingFeatureSelectionY,
+    setGatingFeatureSelectionY,
+    gatingFeatureValueTransform,
+    setGatingFeatureValueTransform,
+    gatingFeatureValueTransformCoefficient,
+    setGatingFeatureValueTransformCoefficient,
+    geneSelectOptions,
+    transformOptions,
+  } = props;
+
+  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 handleTransformChange = (event) => {
+    setGatingFeatureValueTransform(event.target.value === '' ? null : event.target.value);
+  };
+
+  // Feels a little hacky, but I think this is the best way to handle
+  // the limitations of the v4 material-ui number input.
+  const handleTransformCoefficientChange = (event) => {
+    const { value } = event.target;
+    if (!value) {
+      setGatingFeatureValueTransformCoefficient(value);
+    } else {
+      const newCoefficient = Number(value);
+      if (!Number.isNaN(newCoefficient) && newCoefficient >= 0) {
+        setGatingFeatureValueTransformCoefficient(value);
+      }
+    }
+  };
+
+  return (
+    <>
+      <TableRow key="gene-option-row">
+        <TableCell className={classes.labelCell}>
+          {capitalize(plur(featureType, geneSelectOptions?.length))}
+        </TableCell>
+        <TableCell className={classes.inputCell}>
+          <OptionSelect
+            key="gating-gene-select"
+            multiple
+            className={classes.select}
+            value={[gatingFeatureSelectionX, gatingFeatureSelectionY].filter(v => v)}
+            onChange={handleGeneSelectChange}
+            inputProps={{
+              id: 'scatterplot-gene-select',
+            }}
+          >
+            {geneSelectOptions.map(name => (
+              <option key={name} value={name}>
+                {name}
+              </option>
+            ))}
+          </OptionSelect>
+        </TableCell>
+      </TableRow>
+      <TableRow key="transform-option-row">
+        <TableCell className={classes.labelCell}>
+          Transform
+        </TableCell>
+        <TableCell className={classes.inputCell}>
+          <OptionSelect
+            key="gating-transform-select"
+            className={classes.select}
+            value={gatingFeatureValueTransform === null ? '' : gatingFeatureValueTransform}
+            onChange={handleTransformChange}
+            inputProps={{
+              id: 'scatterplot-transform-select',
+            }}
+          >
+            {transformOptions.map(opt => (
+              <option key={opt.name} value={opt.value === null ? '' : opt.value}>
+                {opt.name}
+              </option>
+            ))}
+          </OptionSelect>
+        </TableCell>
+      </TableRow>
+      <TableRow key="transform-coefficient-option-row">
+        <TableCell className={classes.labelCell}>
+          Transform Coefficient
+        </TableCell>
+        <TableCell className={classes.inputCell}>
+          <TextField
+            label="Number"
+            type="number"
+            onChange={handleTransformCoefficientChange}
+            value={gatingFeatureValueTransformCoefficient}
+            InputLabelProps={{
+              shrink: true,
+            }}
+          />
+        </TableCell>
+      </TableRow>
+    </>
+  );
+}

package/src/GatingSubscriber.js

@@ -0,0 +1,460 @@
+import React, {
+  useState, useEffect, useCallback, useMemo,
+} from 'react';
+import plur from 'plur';
+import { extent } from 'd3-array';
+import isEqual from 'lodash/isEqual';
+import {
+  capitalize, commaNumber,
+  getCellColors,
+  getValueTransformFunction, VALUE_TRANSFORM_OPTIONS,
+} from '@vitessce/utils';
+import {
+  TitleInfo,
+  useDeckCanvasSize, useReady, useUrls, useExpressionValueGetter,
+  useObsSetsData,
+  useFeatureSelection,
+  useObsFeatureMatrixIndices,
+  useCoordination,
+  useLoaders,
+  useSetComponentHover,
+  useSetComponentViewInfo,
+  registerPluginViewType,
+} from '@vitessce/vit-s';
+import { getCellSetPolygons, mergeObsSets, setObsSelection } from '@vitessce/sets-utils';
+import {
+  Scatterplot, ScatterplotTooltipSubscriber, ScatterplotOptions,
+  getPointSizeDevicePixels,
+  getPointOpacity,
+  EmptyMessage,
+} from '@vitessce/scatterplot';
+import { ViewType, COMPONENT_COORDINATION_TYPES } from '@vitessce/constants-internal';
+import GatingScatterplotOptions from './GatingScatterplotOptions';
+
+/**
+   * A subscriber component for the gating scatterplot.
+   * @param {object} props
+   * @param {number} props.uuid The unique identifier for this component.
+   * @param {string} props.theme The current theme name.
+   * @param {object} props.coordinationScopes The mapping from coordination types to coordination
+   * scopes.
+   * @param {boolean} props.disableTooltip Should the tooltip be disabled?
+   * @param {function} props.removeGridComponent The callback function to pass to TitleInfo,
+   * to call when the component has been removed from the grid.
+   * @param {number} props.averageFillDensity Override the average fill density calculation
+   * when using dynamic opacity mode.
+   */
+export function GatingSubscriber(props) {
+  const {
+    uuid,
+    coordinationScopes,
+    removeGridComponent,
+    theme,
+    disableTooltip = false,
+    title: titleOverride,
+    // Average fill density for dynamic opacity calculation.
+    averageFillDensity,
+  } = props;
+
+  const loaders = useLoaders();
+  const setComponentHover = useSetComponentHover();
+  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 [urls, addUrl] = useUrls(loaders, dataset);
+  const [width, height, deckRef] = useDeckCanvasSize();
+
+  const title = useMemo(() => {
+    if (titleOverride) {
+      return titleOverride;
+    }
+    if (!(gatingFeatureSelectionX && gatingFeatureSelectionY)) {
+      return 'Gating';
+    }
+    return `Gating (${gatingFeatureSelectionX} vs ${gatingFeatureSelectionY})`;
+  }, [titleOverride, gatingFeatureSelectionX, gatingFeatureSelectionY]);
+
+  const featureSelectionX = useMemo(() => (
+    gatingFeatureSelectionX ? [gatingFeatureSelectionX] : null
+  ), [gatingFeatureSelectionX]);
+  const featureSelectionY = useMemo(() => (
+    gatingFeatureSelectionY ? [gatingFeatureSelectionY] : null
+  ), [gatingFeatureSelectionY]);
+
+  // Get data from loaders using the data hooks.
+  const [{ obsSets: cellSets }, obsSetsStatus] = useObsSetsData(
+    loaders, dataset, addUrl, false,
+    { setObsSetSelection: setCellSetSelection, setObsSetColor: setCellSetColor },
+    { obsSetSelection: cellSetSelection, obsSetColor: cellSetColor },
+    { obsType },
+  );
+  // eslint-disable-next-line no-unused-vars
+  const [expressionDataColor, loadedColor, featureSelectionColorStatus] = useFeatureSelection(
+    loaders, dataset, false, gatingFeatureSelectionColor,
+    { obsType, featureType, featureValueType },
+  );
+  // eslint-disable-next-line no-unused-vars
+  const [expressionDataX, loadedX, featureSelectionXStatus] = useFeatureSelection(
+    loaders, dataset, false, featureSelectionX,
+    { obsType, featureType, featureValueType },
+  );
+  // eslint-disable-next-line no-unused-vars
+  const [expressionDataY, loadedY, featureSelectionYStatus] = useFeatureSelection(
+    loaders, dataset, false, featureSelectionY,
+    { obsType, featureType, featureValueType },
+  );
+  const [{ obsIndex, featureIndex }, matrixIndicesStatus] = useObsFeatureMatrixIndices(
+    loaders, dataset, addUrl, false,
+    { obsType, featureType, featureValueType },
+  );
+  const cellsCount = obsIndex?.length || 0;
+
+  const isReady = useReady([
+    obsSetsStatus,
+    featureSelectionColorStatus,
+    featureSelectionXStatus,
+    featureSelectionYStatus,
+    matrixIndicesStatus,
+  ]);
+
+  // Generate a new cells object with a mapping added for the user selected genes.
+  const obsXY = useMemo(() => {
+    if (!(cellsCount && expressionDataX?.[0] && expressionDataY?.[0]
+      && featureSelectionX && featureSelectionY
+    )) {
+      return null;
+    }
+
+    // Get transform coefficient for log and arcsinh
+    let coefficient = 1;
+    const parsedTransformCoefficient = Number(featureValueTransformCoefficient);
+    if (!Number.isNaN(parsedTransformCoefficient) && parsedTransformCoefficient > 0) {
+      coefficient = parsedTransformCoefficient;
+    }
+
+    // Set transform function
+    const transformFunction = getValueTransformFunction(
+      featureValueTransform,
+      coefficient,
+    );
+
+    const obsX = new Float32Array(cellsCount);
+    const obsY = new Float32Array(cellsCount);
+    for (let i = 0; i < cellsCount; i += 1) {
+      obsX[i] = transformFunction(expressionDataX[0][i]);
+      obsY[i] = transformFunction(expressionDataY[0][i]);
+    }
+    return {
+      data: [obsX, obsY],
+      shape: [2, cellsCount],
+    };
+  }, [cellsCount, expressionDataX, expressionDataY,
+    featureValueTransform, featureValueTransformCoefficient,
+    featureSelectionX, featureSelectionY,
+  ]);
+
+  const [dynamicCellRadius, setDynamicCellRadius] = useState(cellRadiusFixed);
+  const [dynamicCellOpacity, setDynamicCellOpacity] = useState(cellOpacityFixed);
+
+  const mergedCellSets = useMemo(() => mergeObsSets(
+    cellSets, additionalCellSets,
+  ), [cellSets, additionalCellSets]);
+
+  const setCellSelectionProp = useCallback((v) => {
+    setObsSelection(
+      v, additionalCellSets, cellSetColor,
+      setCellSetSelection, setAdditionalCellSets, setCellSetColor,
+      setCellColorEncoding,
+    );
+  }, [additionalCellSets, cellSetColor, setCellColorEncoding,
+    setAdditionalCellSets, setCellSetColor, setCellSetSelection]);
+
+  const cellColors = useMemo(() => getCellColors({
+    cellColorEncoding,
+    expressionData: expressionDataColor && expressionDataColor[0],
+    geneSelection: gatingFeatureSelectionColor,
+    cellSets: mergedCellSets,
+    cellSetSelection,
+    cellSetColor,
+    obsIndex,
+    theme,
+  }), [cellColorEncoding, gatingFeatureSelectionColor, mergedCellSets, theme,
+    cellSetSelection, cellSetColor, expressionDataColor, obsIndex]);
+
+  // cellSetPolygonCache is an array of tuples like [(key0, val0), (key1, val1), ...],
+  // where the keys are cellSetSelection arrays.
+  const [cellSetPolygonCache, setCellSetPolygonCache] = useState([]);
+  const cacheHas = (cache, key) => cache.findIndex(el => isEqual(el[0], key)) !== -1;
+  const cacheGet = (cache, key) => cache.find(el => isEqual(el[0], key))?.[1];
+  const cellSetPolygons = useMemo(() => {
+    if ((cellSetLabelsVisible || cellSetPolygonsVisible)
+      && !cacheHas(cellSetPolygonCache, cellSetSelection)
+      && mergedCellSets?.tree?.length
+      && obsXY
+      && obsIndex
+      && cellSetColor?.length) {
+      const newCellSetPolygons = getCellSetPolygons({
+        obsIndex,
+        obsEmbedding: obsXY,
+        cellSets: mergedCellSets,
+        cellSetSelection,
+        cellSetColor,
+        theme,
+      });
+      setCellSetPolygonCache(cache => [...cache, [cellSetSelection, newCellSetPolygons]]);
+      return newCellSetPolygons;
+    }
+    return cacheGet(cellSetPolygonCache, cellSetSelection) || [];
+  }, [cellSetPolygonsVisible, cellSetPolygonCache, cellSetLabelsVisible, theme,
+    obsIndex, obsXY, mergedCellSets, cellSetSelection, cellSetColor]);
+
+
+  const cellSelection = useMemo(() => Array.from(cellColors.keys()), [cellColors]);
+
+  const [xRange, yRange, xExtent, yExtent, numCells] = useMemo(() => {
+    if (obsXY && obsXY.data && obsXY.shape) {
+      const cellCount = obsXY.shape[1];
+      const xE = extent(obsXY.data[0]);
+      const yE = extent(obsXY.data[1]);
+      const xR = xE[1] - xE[0];
+      const yR = yE[1] - yE[0];
+      return [xR, yR, xE, yE, cellCount];
+    }
+    return [null, null, null, null, null];
+  }, [obsXY]);
+
+  // After cells have loaded or changed,
+  // compute the cell radius scale based on the
+  // extents of the cell coordinates on the x/y axes.
+  useEffect(() => {
+    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') {
+        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);
+      }
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [xRange, yRange, xExtent, yExtent, numCells,
+    width, height, zoom, 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);
+  const cellOpacity = (cellOpacityMode === 'manual' ? cellOpacityFixed : dynamicCellOpacity);
+
+  // Set up a getter function for gene expression values, to be used
+  // by the DeckGL layer to obtain values for instanced attributes.
+  const getExpressionValue = useExpressionValueGetter({
+    instanceObsIndex: obsIndex,
+    matrixObsIndex: obsIndex,
+    expressionData: expressionDataColor,
+  });
+
+  // Puts the mapping values in the cell info tooltip.
+  const getObsInfo = useCallback((obsId) => {
+    const selectedTransformName = VALUE_TRANSFORM_OPTIONS.find(
+      o => o.value === featureValueTransform,
+    )?.name;
+    const genePrefix = featureValueTransform ? `${selectedTransformName} ` : '';
+    const obsIdx = obsIndex?.indexOf(obsId);
+    const obsInfo = { [`${capitalize(obsType)} ID`]: obsId };
+    if (gatingFeatureSelectionX && gatingFeatureSelectionY) {
+      obsInfo[genePrefix + gatingFeatureSelectionX] = obsXY.data[0][obsIdx];
+      obsInfo[genePrefix + gatingFeatureSelectionY] = obsXY.data[1][obsIdx];
+    }
+    return obsInfo;
+  }, [obsXY, obsIndex, featureValueTransform,
+    gatingFeatureSelectionX, gatingFeatureSelectionY, obsType,
+  ]);
+
+  return (
+    <TitleInfo
+      title={title}
+      info={`${commaNumber(cellsCount)} ${plur(obsType, cellsCount)}`}
+      removeGridComponent={removeGridComponent}
+      urls={urls}
+      theme={theme}
+      isReady={isReady}
+      options={(
+        <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}
+        >
+          <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}
+          />
+        </ScatterplotOptions>
+      )}
+    >
+      <EmptyMessage
+        visible={!(gatingFeatureSelectionX && gatingFeatureSelectionY)}
+        message={`Select two ${plur(featureType, 2)} in the plot settings.`}
+      />
+      <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={() => {
+          setComponentHover(uuid);
+        }}
+        updateViewInfo={setComponentViewInfo}
+        getExpressionValue={getExpressionValue}
+        getCellIsSelected={getCellIsSelected}
+
+      />
+      {!disableTooltip && (
+      <ScatterplotTooltipSubscriber
+        parentUuid={uuid}
+        obsHighlight={cellHighlight}
+        width={width}
+        height={height}
+        getObsInfo={getObsInfo}
+      />
+      )}
+    </TitleInfo>
+  );
+}
+
+export function register() {
+  registerPluginViewType(
+    ViewType.GATING,
+    GatingSubscriber,
+    COMPONENT_COORDINATION_TYPES[ViewType.GATING],
+  );
+}

package/src/index.js

@@ -0,0 +1 @@
+export { GatingSubscriber, register } from './GatingSubscriber';