@vitessce/scatterplot-gating 2.0.0-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/GatingScatterplotOptions.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 (_jsxs(_Fragment, { children: [_jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, children: capitalize(plur(featureType, geneSelectOptions?.length)) }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(OptionSelect, { multiple: true, className: classes.select, value: [gatingFeatureSelectionX, gatingFeatureSelectionY].filter(v => v), onChange: handleGeneSelectChange, inputProps: {
+                                id: 'scatterplot-gene-select',
+                            }, children: geneSelectOptions.map(name => (_jsx("option", { value: name, children: name }, name))) }, "gating-gene-select") })] }, "gene-option-row"), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, children: "Transform" }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(OptionSelect, { className: classes.select, value: gatingFeatureValueTransform === null ? '' : gatingFeatureValueTransform, onChange: handleTransformChange, inputProps: {
+                                id: 'scatterplot-transform-select',
+                            }, children: transformOptions.map(opt => (_jsx("option", { value: opt.value === null ? '' : opt.value, children: opt.name }, opt.name))) }, "gating-transform-select") })] }, "transform-option-row"), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, children: "Transform Coefficient" }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(TextField, { label: "Number", type: "number", onChange: handleTransformCoefficientChange, value: gatingFeatureValueTransformCoefficient, InputLabelProps: {
+                                shrink: true,
+                            } }) })] }, "transform-coefficient-option-row")] }));
+}

package/dist/GatingSubscriber.js

@@ -0,0 +1,211 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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';
+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 (_jsxs(TitleInfo, { title: title, info: `${commaNumber(cellsCount)} ${plur(obsType, cellsCount)}`, removeGridComponent: removeGridComponent, urls: urls, theme: theme, isReady: isReady, 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: () => {
+                    setComponentHover(uuid);
+                }, updateViewInfo: setComponentViewInfo, getExpressionValue: getExpressionValue, getCellIsSelected: getCellIsSelected }), !disableTooltip && (_jsx(ScatterplotTooltipSubscriber, { parentUuid: uuid, obsHighlight: cellHighlight, width: width, height: height, getObsInfo: getObsInfo }))] }));
+}
+export function register() {
+    registerPluginViewType(ViewType.GATING, GatingSubscriber, COMPONENT_COORDINATION_TYPES[ViewType.GATING]);
+}

package/dist/index.js

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

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@vitessce/scatterplot-gating",
+  "version": "2.0.0-beta.0",
+  "author": "Gehlenborg Lab",
+  "homepage": "http://vitessce.io",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vitessce/vitessce.git"
+  },
+  "license": "MIT",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@material-ui/core": "~4.12.3",
+    "@vitessce/constants-internal": "2.0.0-beta.0",
+    "@vitessce/scatterplot": "2.0.0-beta.0",
+    "@vitessce/sets": "2.0.0-beta.0",
+    "@vitessce/utils": "2.0.0-beta.0",
+    "@vitessce/vit-s": "2.0.0-beta.0",
+    "d3-array": "^2.4.0",
+    "lodash": "^4.17.21",
+    "plur": "^5.1.0"
+  },
+  "devDependencies": {
+    "react": "^18.0.0",
+    "vite": "^3.0.0",
+    "vitest": "^0.23.4"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "scripts": {
+    "start": "tsc --watch",
+    "build": "tsc",
+    "test": "pnpm exec vitest --run -r ../../../ --dir ."
+  }
+}