@vitessce/scatterplot 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/EmptyMessage.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+export default function EmptyMessage(props) {
+    const { visible, message, } = props;
+    return visible ? (_jsx("div", { children: message })) : null;
+}

package/dist/Scatterplot.js

@@ -0,0 +1,304 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable no-param-reassign */
+import React, { forwardRef } from 'react';
+import { forceSimulation } from 'd3-force';
+import { deck, getSelectionLayers, ScaledExpressionExtension, SelectionExtension, } from '@vitessce/gl';
+import { getDefaultColor } from '@vitessce/utils';
+import { AbstractSpatialOrScatterplot, createQuadTree, forceCollideRects, getOnHoverCallback, } from './shared-spatial-scatterplot';
+const CELLS_LAYER_ID = 'scatterplot';
+const LABEL_FONT_FAMILY = "-apple-system, 'Helvetica Neue', Arial, sans-serif";
+const NUM_FORCE_SIMULATION_TICKS = 100;
+const LABEL_UPDATE_ZOOM_DELTA = 0.25;
+// Default getter function props.
+const makeDefaultGetCellColors = (cellColors, obsIndex, theme) => (object, { index }) => {
+    const [r, g, b, a] = (cellColors && obsIndex && cellColors.get(obsIndex[index]))
+        || getDefaultColor(theme);
+    return [r, g, b, 255 * (a || 1)];
+};
+const makeDefaultGetObsCoords = obsEmbedding => i => ([
+    obsEmbedding.data[0][i],
+    obsEmbedding.data[1][i],
+    0,
+]);
+const makeFlippedGetObsCoords = obsEmbedding => i => ([
+    obsEmbedding.data[0][i],
+    -obsEmbedding.data[1][i],
+    0,
+]);
+const getPosition = (object, { index, data, target }) => {
+    target[0] = data.src.obsEmbedding.data[0][index];
+    target[1] = -data.src.obsEmbedding.data[1][index];
+    target[2] = 0;
+    return target;
+};
+/**
+ * React component which renders a scatterplot from cell data.
+ * @param {object} props
+ * @param {string} props.uuid A unique identifier for this component.
+ * @param {string} props.theme The current vitessce theme.
+ * @param {object} props.viewState The deck.gl view state.
+ * @param {function} props.setViewState Function to call to update the deck.gl view state.
+ * @param {object} props.cells
+ * @param {string} props.mapping The name of the coordinate mapping field,
+ * for each cell, for example "PCA" or "t-SNE".
+ * @param {Map} props.cellColors Mapping of cell IDs to colors.
+ * @param {array} props.cellSelection Array of selected cell IDs.
+ * @param {array} props.cellFilter Array of filtered cell IDs. By default, null.
+ * @param {number} props.cellRadius The value for `radiusScale` to pass
+ * to the deck.gl cells ScatterplotLayer.
+ * @param {number} props.cellOpacity The value for `opacity` to pass
+ * to the deck.gl cells ScatterplotLayer.
+ * @param {function} props.getCellCoords Getter function for cell coordinates
+ * (used by the selection layer).
+ * @param {function} props.getCellPosition Getter function for cell [x, y, z] position.
+ * @param {function} props.getCellColor Getter function for cell color as [r, g, b] array.
+ * @param {function} props.getExpressionValue Getter function for cell expression value.
+ * @param {function} props.getCellIsSelected Getter function for cell layer isSelected.
+ * @param {function} props.setCellSelection
+ * @param {function} props.setCellHighlight
+ * @param {function} props.updateViewInfo
+ * @param {function} props.onToolChange Callback for tool changes
+ * (lasso/pan/rectangle selection tools).
+ * @param {function} props.onCellClick Getter function for cell layer onClick.
+ */
+class Scatterplot extends AbstractSpatialOrScatterplot {
+    constructor(props) {
+        super(props);
+        // To avoid storing large arrays/objects
+        // in React state, this component
+        // uses instance variables.
+        // All instance variables used in this class:
+        this.cellsQuadTree = null;
+        this.cellsLayer = null;
+        this.cellsData = null;
+        this.cellSetsForceSimulation = forceCollideRects();
+        this.cellSetsLabelPrevZoom = null;
+        this.cellSetsLayers = [];
+        // Initialize data and layers.
+        this.onUpdateCellsData();
+        this.onUpdateCellsLayer();
+        this.onUpdateCellSetsLayers();
+    }
+    createCellsLayer() {
+        const { obsEmbeddingIndex: obsIndex, theme, cellRadius = 1.0, cellOpacity = 1.0, 
+        // cellFilter,
+        cellSelection, setCellHighlight, setComponentHover, getCellIsSelected, cellColors, getCellColor = makeDefaultGetCellColors(cellColors, obsIndex, theme), getExpressionValue, onCellClick, geneExpressionColormap, geneExpressionColormapRange = [0.0, 1.0], cellColorEncoding, } = this.props;
+        return new deck.ScatterplotLayer({
+            id: CELLS_LAYER_ID,
+            // Note that the reference for the object passed to the data prop should not change,
+            // otherwise DeckGL will need to do a full re-render every time .createCellsLayer is called,
+            // which can be very often to handle cellOpacity and cellRadius updates for dynamic opacity.
+            data: this.cellsData,
+            coordinateSystem: deck.COORDINATE_SYSTEM.CARTESIAN,
+            visible: true,
+            pickable: true,
+            autoHighlight: true,
+            filled: true,
+            stroked: true,
+            backgroundColor: (theme === 'dark' ? [0, 0, 0] : [241, 241, 241]),
+            getCellIsSelected,
+            opacity: cellOpacity,
+            radiusScale: cellRadius,
+            radiusMinPixels: 1,
+            radiusMaxPixels: 30,
+            // Our radius pixel setters measure in pixels.
+            radiusUnits: 'pixels',
+            lineWidthUnits: 'pixels',
+            getPosition,
+            getFillColor: getCellColor,
+            getLineColor: getCellColor,
+            getRadius: 1,
+            getExpressionValue,
+            getLineWidth: 0,
+            extensions: [
+                new ScaledExpressionExtension(),
+                new SelectionExtension({ instanced: true }),
+            ],
+            colorScaleLo: geneExpressionColormapRange[0],
+            colorScaleHi: geneExpressionColormapRange[1],
+            isExpressionMode: (cellColorEncoding === 'geneSelection'),
+            colormap: geneExpressionColormap,
+            onClick: (info) => {
+                if (onCellClick) {
+                    onCellClick(info);
+                }
+            },
+            onHover: getOnHoverCallback(obsIndex, setCellHighlight, setComponentHover),
+            updateTriggers: {
+                getExpressionValue,
+                getFillColor: [cellColorEncoding, cellSelection, cellColors],
+                getLineColor: [cellColorEncoding, cellSelection, cellColors],
+                getCellIsSelected,
+            },
+        });
+    }
+    createCellSetsLayers() {
+        const { theme, cellSetPolygons, viewState, cellSetPolygonsVisible, cellSetLabelsVisible, cellSetLabelSize, } = this.props;
+        const result = [];
+        if (cellSetPolygonsVisible) {
+            result.push(new deck.PolygonLayer({
+                id: 'cell-sets-polygon-layer',
+                data: cellSetPolygons,
+                stroked: true,
+                filled: false,
+                wireframe: true,
+                lineWidthMaxPixels: 1,
+                getPolygon: d => d.hull,
+                getLineColor: d => d.color,
+                getLineWidth: 1,
+            }));
+        }
+        if (cellSetLabelsVisible) {
+            const { zoom } = viewState;
+            const nodes = cellSetPolygons.map(p => ({
+                x: p.centroid[0],
+                y: p.centroid[1],
+                label: p.name,
+            }));
+            const collisionForce = this.cellSetsForceSimulation
+                .size(d => ([
+                cellSetLabelSize * 1 / (2 ** zoom) * 4 * d.label.length,
+                cellSetLabelSize * 1 / (2 ** zoom) * 1.5,
+            ]));
+            forceSimulation()
+                .nodes(nodes)
+                .force('collision', collisionForce)
+                .tick(NUM_FORCE_SIMULATION_TICKS);
+            result.push(new deck.TextLayer({
+                id: 'cell-sets-text-layer',
+                data: nodes,
+                getPosition: d => ([d.x, d.y]),
+                getText: d => d.label,
+                getColor: (theme === 'dark' ? [255, 255, 255] : [0, 0, 0]),
+                getSize: cellSetLabelSize,
+                getAngle: 0,
+                getTextAnchor: 'middle',
+                getAlignmentBaseline: 'center',
+                fontFamily: LABEL_FONT_FAMILY,
+                fontWeight: 'normal',
+            }));
+        }
+        return result;
+    }
+    createSelectionLayers() {
+        const { obsEmbeddingIndex: obsIndex, obsEmbedding, viewState, setCellSelection, } = this.props;
+        const { tool } = this.state;
+        const { cellsQuadTree } = this;
+        const flipYTooltip = true;
+        const getCellCoords = makeDefaultGetObsCoords(obsEmbedding);
+        return getSelectionLayers(tool, viewState.zoom, CELLS_LAYER_ID, getCellCoords, obsIndex, setCellSelection, cellsQuadTree, flipYTooltip);
+    }
+    getLayers() {
+        const { cellsLayer, cellSetsLayers, } = this;
+        return [
+            cellsLayer,
+            ...cellSetsLayers,
+            ...this.createSelectionLayers(),
+        ];
+    }
+    onUpdateCellsData() {
+        const { obsEmbedding } = this.props;
+        if (obsEmbedding) {
+            const getCellCoords = makeDefaultGetObsCoords(obsEmbedding);
+            this.cellsQuadTree = createQuadTree(obsEmbedding, getCellCoords);
+            this.cellsData = {
+                src: {
+                    obsEmbedding,
+                },
+                length: obsEmbedding.shape[1],
+            };
+        }
+    }
+    onUpdateCellsLayer() {
+        const { obsEmbeddingIndex, obsEmbedding } = this.props;
+        if (obsEmbeddingIndex && obsEmbedding) {
+            this.cellsLayer = this.createCellsLayer();
+        }
+        else {
+            this.cellsLayer = null;
+        }
+    }
+    onUpdateCellSetsLayers(onlyViewStateChange) {
+        // Because the label sizes for the force simulation depend on the zoom level,
+        // we _could_ run the simulation every time the zoom level changes.
+        // However, this has a performance impact in firefox.
+        if (onlyViewStateChange) {
+            const { viewState, cellSetLabelsVisible } = this.props;
+            const { zoom } = viewState;
+            const { cellSetsLabelPrevZoom } = this;
+            // Instead, we can just check if the zoom level has changed
+            // by some relatively large delta, to be more conservative
+            // about re-running the force simulation.
+            if (cellSetLabelsVisible
+                && (cellSetsLabelPrevZoom === null
+                    || Math.abs(cellSetsLabelPrevZoom - zoom) > LABEL_UPDATE_ZOOM_DELTA)) {
+                this.cellSetsLayers = this.createCellSetsLayers();
+                this.cellSetsLabelPrevZoom = zoom;
+            }
+        }
+        else {
+            // Otherwise, something more substantial than just
+            // the viewState has changed, such as the label array
+            // itself, so we always want to update the layer
+            // in this case.
+            this.cellSetsLayers = this.createCellSetsLayers();
+        }
+    }
+    viewInfoDidUpdate() {
+        const { obsEmbeddingIndex, obsEmbedding, } = this.props;
+        super.viewInfoDidUpdate(obsEmbeddingIndex, obsEmbedding, makeFlippedGetObsCoords);
+    }
+    /**
+     * Here, asynchronously check whether props have
+     * updated which require re-computing memoized variables,
+     * followed by a re-render.
+     * This function does not follow React conventions or paradigms,
+     * it is only implemented this way to try to squeeze out
+     * performance.
+     * @param {object} prevProps The previous props to diff against.
+     */
+    componentDidUpdate(prevProps) {
+        this.viewInfoDidUpdate();
+        const shallowDiff = propName => (prevProps[propName] !== this.props[propName]);
+        let forceUpdate = false;
+        if (['obsEmbedding'].some(shallowDiff)) {
+            // Cells data changed.
+            this.onUpdateCellsData();
+            forceUpdate = true;
+        }
+        if ([
+            'obsEmbeddingIndex', 'obsEmbedding', 'cellFilter', 'cellSelection', 'cellColors',
+            'cellRadius', 'cellOpacity', 'cellRadiusMode', 'geneExpressionColormap',
+            'geneExpressionColormapRange', 'geneSelection', 'cellColorEncoding',
+        ].some(shallowDiff)) {
+            // Cells layer props changed.
+            this.onUpdateCellsLayer();
+            forceUpdate = true;
+        }
+        if ([
+            'cellSetPolygons', 'cellSetPolygonsVisible',
+            'cellSetLabelsVisible', 'cellSetLabelSize',
+        ].some(shallowDiff)) {
+            // Cell sets layer props changed.
+            this.onUpdateCellSetsLayers(false);
+            forceUpdate = true;
+        }
+        if (shallowDiff('viewState')) {
+            // The viewState prop has changed (due to zoom or pan).
+            this.onUpdateCellSetsLayers(true);
+            forceUpdate = true;
+        }
+        if (forceUpdate) {
+            this.forceUpdate();
+        }
+    }
+}
+/**
+ * Need this wrapper function here,
+ * since we want to pass a forwardRef
+ * so that outer components can
+ * access the grandchild DeckGL ref,
+ * but we are using a class component.
+ */
+const ScatterplotWrapper = forwardRef((props, deckRef) => (_jsx(Scatterplot, { ...props, deckRef: deckRef })));
+export default ScatterplotWrapper;

package/dist/ScatterplotOptions.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback } from 'react';
+import debounce from 'lodash/debounce';
+import Checkbox from '@material-ui/core/Checkbox';
+import Slider from '@material-ui/core/Slider';
+import TableCell from '@material-ui/core/TableCell';
+import TableRow from '@material-ui/core/TableRow';
+import { capitalize } from '@vitessce/utils';
+import { usePlotOptionsStyles, CellColorEncodingOption, OptionsContainer, OptionSelect, } from '@vitessce/vit-s';
+import { GLSL_COLORMAPS } from '@vitessce/gl';
+export default function ScatterplotOptions(props) {
+    const { children, observationsLabel, cellRadius, setCellRadius, cellRadiusMode, setCellRadiusMode, cellOpacity, setCellOpacity, cellOpacityMode, setCellOpacityMode, cellSetLabelsVisible, setCellSetLabelsVisible, cellSetLabelSize, setCellSetLabelSize, cellSetPolygonsVisible, setCellSetPolygonsVisible, cellColorEncoding, setCellColorEncoding, geneExpressionColormap, setGeneExpressionColormap, geneExpressionColormapRange, setGeneExpressionColormapRange, } = props;
+    const observationsLabelNice = capitalize(observationsLabel);
+    const classes = usePlotOptionsStyles();
+    function handleCellRadiusModeChange(event) {
+        setCellRadiusMode(event.target.value);
+    }
+    function handleCellOpacityModeChange(event) {
+        setCellOpacityMode(event.target.value);
+    }
+    function handleRadiusChange(event, value) {
+        setCellRadius(value);
+    }
+    function handleOpacityChange(event, value) {
+        setCellOpacity(value);
+    }
+    function handleLabelVisibilityChange(event) {
+        setCellSetLabelsVisible(event.target.checked);
+    }
+    function handleLabelSizeChange(event, value) {
+        setCellSetLabelSize(value);
+    }
+    function handlePolygonVisibilityChange(event) {
+        setCellSetPolygonsVisible(event.target.checked);
+    }
+    function handleGeneExpressionColormapChange(event) {
+        setGeneExpressionColormap(event.target.value);
+    }
+    function handleColormapRangeChange(event, value) {
+        setGeneExpressionColormapRange(value);
+    }
+    const handleColormapRangeChangeDebounced = useCallback(debounce(handleColormapRangeChange, 5, { trailing: true }), [handleColormapRangeChange]);
+    return (_jsxs(OptionsContainer, { children: [children, _jsx(CellColorEncodingOption, { observationsLabel: observationsLabel, cellColorEncoding: cellColorEncoding, setCellColorEncoding: setCellColorEncoding }), _jsxs(TableRow, { children: [_jsxs(TableCell, { className: classes.labelCell, children: [observationsLabelNice, " Set Labels Visible"] }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(Checkbox, { className: classes.checkbox, checked: cellSetLabelsVisible, onChange: handleLabelVisibilityChange, name: "scatterplot-option-cell-set-labels", color: "default" }) })] }), _jsxs(TableRow, { children: [_jsxs(TableCell, { className: classes.labelCell, children: [observationsLabelNice, " Set Label Size"] }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(Slider, { disabled: !cellSetLabelsVisible, classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: cellSetLabelSize, onChange: handleLabelSizeChange, "aria-labelledby": "cell-set-label-size-slider", valueLabelDisplay: "auto", step: 1, min: 8, max: 36 }) })] }), _jsxs(TableRow, { children: [_jsxs(TableCell, { className: classes.labelCell, children: [observationsLabelNice, " Set Polygons Visible"] }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(Checkbox, { className: classes.checkbox, checked: cellSetPolygonsVisible, onChange: handlePolygonVisibilityChange, name: "scatterplot-option-cell-set-polygons", color: "default" }) })] }), _jsxs(TableRow, { children: [_jsxs(TableCell, { className: classes.labelCell, htmlFor: "cell-radius-mode-select", children: [observationsLabelNice, " Radius Mode"] }), _jsx(TableCell, { className: classes.inputCell, children: _jsxs(OptionSelect, { className: classes.select, value: cellRadiusMode, onChange: handleCellRadiusModeChange, inputProps: {
+                                id: 'cell-radius-mode-select',
+                            }, children: [_jsx("option", { value: "auto", children: "Auto" }), _jsx("option", { value: "manual", children: "Manual" })] }) })] }), _jsxs(TableRow, { children: [_jsxs(TableCell, { className: classes.labelCell, children: [observationsLabelNice, " Radius"] }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(Slider, { disabled: cellRadiusMode !== 'manual', classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: cellRadius, onChange: handleRadiusChange, "aria-labelledby": "cell-radius-slider", valueLabelDisplay: "auto", step: 0.01, min: 0.01, max: 10 }) })] }), _jsxs(TableRow, { children: [_jsxs(TableCell, { className: classes.labelCell, htmlFor: "cell-opacity-mode-select", children: [observationsLabelNice, " Opacity Mode"] }), _jsx(TableCell, { className: classes.inputCell, children: _jsxs(OptionSelect, { className: classes.select, value: cellOpacityMode, onChange: handleCellOpacityModeChange, inputProps: {
+                                id: 'cell-opacity-mode-select',
+                            }, children: [_jsx("option", { value: "auto", children: "Auto" }), _jsx("option", { value: "manual", children: "Manual" })] }) })] }), _jsxs(TableRow, { children: [_jsxs(TableCell, { className: classes.labelCell, children: [observationsLabelNice, " Opacity"] }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(Slider, { disabled: cellOpacityMode !== 'manual', classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: cellOpacity, onChange: handleOpacityChange, "aria-labelledby": "cell-opacity-slider", valueLabelDisplay: "auto", step: 0.05, min: 0.0, max: 1.0 }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, htmlFor: "gene-expression-colormap-select", children: "Gene Expression Colormap" }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(OptionSelect, { className: classes.select, value: geneExpressionColormap, onChange: handleGeneExpressionColormapChange, inputProps: {
+                                id: 'gene-expression-colormap-select',
+                            }, children: GLSL_COLORMAPS.map(cmap => (_jsx("option", { value: cmap, children: cmap }, cmap))) }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, children: "Gene Expression Colormap Range" }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(Slider, { classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: geneExpressionColormapRange, onChange: handleColormapRangeChangeDebounced, "aria-labelledby": "gene-expression-colormap-range-slider", valueLabelDisplay: "auto", step: 0.005, min: 0.0, max: 1.0 }) })] })] }));
+}

package/dist/ScatterplotTooltipSubscriber.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Tooltip2D, TooltipContent } from '@vitessce/tooltip';
+import { useComponentHover, useComponentViewInfo } from '@vitessce/vit-s';
+export default function ScatterplotTooltipSubscriber(props) {
+    const { parentUuid, obsHighlight, width, height, getObsInfo, } = props;
+    const sourceUuid = useComponentHover();
+    const viewInfo = useComponentViewInfo(parentUuid);
+    const [cellInfo, x, y] = (obsHighlight && getObsInfo ? ([
+        getObsInfo(obsHighlight),
+        ...(viewInfo && viewInfo.project ? viewInfo.project(obsHighlight) : [null, null]),
+    ]) : ([null, null, null]));
+    return ((cellInfo ? (_jsx(Tooltip2D, { x: x, y: y, parentUuid: parentUuid, sourceUuid: sourceUuid, parentWidth: width, parentHeight: height, children: _jsx(TooltipContent, { info: cellInfo }) })) : null));
+}

package/dist/index.js

@@ -0,0 +1,5 @@
+export { default as Scatterplot } from './Scatterplot';
+export { default as ScatterplotOptions } from './ScatterplotOptions';
+export { default as ScatterplotTooltipSubscriber } from './ScatterplotTooltipSubscriber';
+export { default as EmptyMessage } from './EmptyMessage';
+export { getPointSizeDevicePixels, getPointOpacity, getOnHoverCallback, createQuadTree, AbstractSpatialOrScatterplot, } from './shared-spatial-scatterplot/index';

package/dist/shared-spatial-scatterplot/AbstractSpatialOrScatterplot.js

@@ -0,0 +1,213 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { PureComponent } from 'react';
+import { deck, DEFAULT_GL_OPTIONS } from '@vitessce/gl';
+import ToolMenu from './ToolMenu';
+import { getCursor, getCursorWithTool } from './cursor';
+/**
+ * Abstract class component intended to be inherited by
+ * the Spatial and Scatterplot class components.
+ * Contains a common constructor, common DeckGL callbacks,
+ * and common render function.
+ */
+export default class AbstractSpatialOrScatterplot extends PureComponent {
+    constructor(props) {
+        super(props);
+        this.state = {
+            gl: null,
+            tool: null,
+        };
+        this.viewport = null;
+        this.onViewStateChange = this.onViewStateChange.bind(this);
+        this.onInitializeViewInfo = this.onInitializeViewInfo.bind(this);
+        this.onWebGLInitialized = this.onWebGLInitialized.bind(this);
+        this.onToolChange = this.onToolChange.bind(this);
+        this.onHover = this.onHover.bind(this);
+    }
+    /**
+     * Called by DeckGL upon a viewState change,
+     * for example zoom or pan interaction.
+     * Emit the new viewState to the `setViewState`
+     * handler prop.
+     * @param {object} params
+     * @param {object} params.viewState The next deck.gl viewState.
+     */
+    onViewStateChange({ viewState: nextViewState }) {
+        const { setViewState, viewState, layers, spatialAxisFixed, } = this.props;
+        const use3d = layers?.some(l => l.use3d);
+        setViewState({
+            ...nextViewState,
+            // If the axis is fixed, just use the current target in state i.e don't change target.
+            target: spatialAxisFixed && use3d ? viewState.target : nextViewState.target,
+        });
+    }
+    /**
+     * Called by DeckGL upon viewport
+     * initialization.
+     * @param {object} viewState
+     * @param {object} viewState.viewport
+     */
+    onInitializeViewInfo({ viewport }) {
+        this.viewport = viewport;
+    }
+    /**
+     * Called by DeckGL upon initialization,
+     * helps to understand when to pass layers
+     * to the DeckGL component.
+     * @param {object} gl The WebGL context object.
+     */
+    onWebGLInitialized(gl) {
+        this.setState({ gl });
+    }
+    /**
+     * Called by the ToolMenu buttons.
+     * Emits the new tool value to the
+     * `onToolChange` prop.
+     * @param {string} tool Name of tool.
+     */
+    onToolChange(tool) {
+        const { onToolChange: onToolChangeProp } = this.props;
+        this.setState({ tool });
+        if (onToolChangeProp) {
+            onToolChangeProp(tool);
+        }
+    }
+    /**
+     * Create the DeckGL layers.
+     * @returns {object[]} Array of
+     * DeckGL layer objects.
+     * Intended to be overriden by descendants.
+     */
+    // eslint-disable-next-line class-methods-use-this
+    getLayers() {
+        return [];
+    }
+    // eslint-disable-next-line consistent-return
+    onHover(info) {
+        const { coordinate, sourceLayer: layer, tile, } = info;
+        const { setCellHighlight, cellHighlight, setComponentHover, layers, } = this.props;
+        const hasBitmask = (layers || []).some(l => l.type === 'bitmask');
+        if (!setCellHighlight || !tile) {
+            return null;
+        }
+        if (!layer || !coordinate) {
+            if (cellHighlight && hasBitmask) {
+                setCellHighlight(null);
+            }
+            return null;
+        }
+        const { content, bbox, z } = tile;
+        if (!content) {
+            if (cellHighlight && hasBitmask) {
+                setCellHighlight(null);
+            }
+            return null;
+        }
+        const { data, width, height } = content;
+        const { left, right, top, bottom, } = bbox;
+        const bounds = [
+            left,
+            data.height < layer.tileSize ? height : bottom,
+            data.width < layer.tileSize ? width : right,
+            top,
+        ];
+        if (!data) {
+            if (cellHighlight && hasBitmask) {
+                setCellHighlight(null);
+            }
+            return null;
+        }
+        // Tiled layer needs a custom layerZoomScale.
+        if (layer.id.includes('bitmask')) {
+            // The zoomed out layer needs to use the fixed zoom at which it is rendered.
+            const layerZoomScale = Math.max(1, 2 ** Math.round(-z));
+            const dataCoords = [
+                Math.floor((coordinate[0] - bounds[0]) / layerZoomScale),
+                Math.floor((coordinate[1] - bounds[3]) / layerZoomScale),
+            ];
+            const coords = dataCoords[1] * width + dataCoords[0];
+            const hoverData = data.map(d => d[coords]);
+            const cellId = hoverData.find(i => i > 0);
+            if (cellId !== Number(cellHighlight)) {
+                if (setComponentHover) {
+                    setComponentHover();
+                }
+                // eslint-disable-next-line no-unused-expressions
+                setCellHighlight(cellId ? String(cellId) : null);
+            }
+        }
+    }
+    /**
+     * Emits a function to project from the
+     * cell ID space to the scatterplot or
+     * spatial coordinate space, via the
+     * `updateViewInfo` prop.
+     */
+    viewInfoDidUpdate(obsIndex, obsLocations, makeGetObsCoords) {
+        const { updateViewInfo, uuid } = this.props;
+        const { viewport } = this;
+        if (updateViewInfo && viewport) {
+            updateViewInfo({
+                uuid,
+                project: (obsId) => {
+                    try {
+                        if (obsIndex && obsLocations) {
+                            const getObsCoords = makeGetObsCoords(obsLocations);
+                            const obsIdx = obsIndex.indexOf(obsId);
+                            const obsCoord = getObsCoords(obsIdx);
+                            return viewport.project(obsCoord);
+                        }
+                        return [null, null];
+                    }
+                    catch (e) {
+                        return [null, null];
+                    }
+                },
+            });
+        }
+    }
+    /**
+     * Intended to be overridden by descendants.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    componentDidUpdate() {
+    }
+    /**
+     * Intended to be overridden by descendants.
+     * @returns {boolean} Whether or not any layers are 3D.
+     */
+    // eslint-disable-next-line class-methods-use-this
+    use3d() {
+        return false;
+    }
+    /**
+     * A common render function for both Spatial
+     * and Scatterplot components.
+     */
+    render() {
+        const { deckRef, viewState, uuid, hideTools, } = this.props;
+        const { gl, tool } = this.state;
+        const layers = this.getLayers();
+        const use3d = this.use3d();
+        const showCellSelectionTools = this.obsSegmentationsData !== null;
+        const showPanTool = layers.length > 0;
+        // For large datasets or ray casting, the visual quality takes only a small
+        // hit in exchange for much better performance by setting this to false:
+        // https://deck.gl/docs/api-reference/core/deck#usedevicepixels
+        const useDevicePixels = (!use3d
+            && (this.obsSegmentationsData?.shape?.[0] < 100000
+                || this.obsLocationsData?.shape?.[1] < 100000));
+        return (_jsxs(_Fragment, { children: [_jsx(ToolMenu, { activeTool: tool, setActiveTool: this.onToolChange, visibleTools: {
+                        pan: showPanTool && !hideTools,
+                        selectRectangle: showCellSelectionTools && !hideTools,
+                        selectLasso: showCellSelectionTools && !hideTools,
+                    } }), _jsx(deck.DeckGL, { id: `deckgl-overlay-${uuid}`, ref: deckRef, views: [
+                        use3d
+                            ? new deck.OrbitView({ id: 'orbit', controller: true, orbitAxis: 'Y' })
+                            : new deck.OrthographicView({
+                                id: 'ortho',
+                            }),
+                    ], layers: gl && viewState.target.slice(0, 2).every(i => typeof i === 'number')
+                        ? layers
+                        : [], glOptions: DEFAULT_GL_OPTIONS, onWebGLInitialized: this.onWebGLInitialized, onViewStateChange: this.onViewStateChange, viewState: viewState, useDevicePixels: useDevicePixels, controller: tool ? { dragPan: false } : true, getCursor: tool ? getCursorWithTool : getCursor, onHover: this.onHover, children: this.onInitializeViewInfo })] }));
+    }
+}

package/dist/shared-spatial-scatterplot/ToolMenu.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import clsx from 'clsx';
+import { SELECTION_TYPE } from '@vitessce/gl';
+import { PointerIconSVG, SelectRectangleIconSVG, SelectLassoIconSVG } from '@vitessce/icons';
+import { makeStyles } from '@material-ui/core';
+const useStyles = makeStyles(() => ({
+    tool: {
+        position: 'absolute',
+        display: 'inline',
+        zIndex: '1000',
+        opacity: '.65',
+        color: 'black',
+        '&:hover': {
+            opacity: '.90',
+        },
+    },
+    iconButton: {
+        // btn btn-outline-secondary mr-2 icon
+        padding: '0',
+        height: '2em',
+        width: '2em',
+        backgroundColor: 'white',
+        display: 'inline-block',
+        fontWeight: '400',
+        textAlign: 'center',
+        verticalAlign: 'middle',
+        cursor: 'pointer',
+        userSelect: 'none',
+        border: '1px solid #6c757d',
+        fontSize: '1rem',
+        lineHeight: '1.5',
+        borderRadius: '0.25rem',
+        transition: 'color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out',
+        color: '#6c757d',
+        marginRight: '0.5rem',
+        '& > svg': {
+            verticalAlign: 'middle',
+        },
+    },
+    iconButtonActive: {
+        // active
+        color: '#fff',
+        backgroundColor: '#6c757d',
+        borderColor: '#6c757d',
+        boxShadow: '0 0 0 0.2rem rgba(108, 117, 125, 0.5)',
+    },
+}));
+export function IconButton(props) {
+    const { alt, onClick, isActive, children, } = props;
+    const classes = useStyles();
+    return (_jsx("button", { className: clsx(classes.iconButton, { [classes.iconButtonActive]: isActive }), onClick: onClick, type: "button", title: alt, children: children }));
+}
+export default function ToolMenu(props) {
+    const { setActiveTool, activeTool, visibleTools = { pan: true, selectRectangle: true, selectLasso: true }, } = props;
+    const classes = useStyles();
+    return (_jsxs("div", { className: classes.tool, children: [visibleTools.pan && (_jsx(IconButton, { alt: "pointer tool", onClick: () => setActiveTool(null), isActive: activeTool === null, children: _jsx(PointerIconSVG, {}) })), visibleTools.selectRectangle ? (_jsx(IconButton, { alt: "select rectangle", onClick: () => setActiveTool(SELECTION_TYPE.RECTANGLE), isActive: activeTool === SELECTION_TYPE.RECTANGLE, children: _jsx(SelectRectangleIconSVG, {}) })) : null, visibleTools.selectLasso ? (_jsx(IconButton, { alt: "select lasso", onClick: () => setActiveTool(SELECTION_TYPE.POLYGON), isActive: activeTool === SELECTION_TYPE.POLYGON, children: _jsx(SelectLassoIconSVG, {}) })) : null] }));
+}

package/dist/shared-spatial-scatterplot/ToolMenu.test.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import '@testing-library/jest-dom';
+import { cleanup, render } from '@testing-library/react';
+import { afterEach, expect } from 'vitest';
+import { IconButton } from './ToolMenu';
+afterEach(() => {
+    cleanup();
+});
+describe('ToolMenu.js', () => {
+    describe('<IconButton />', () => {
+        it('renders with title attribute', () => {
+            const { container } = render(_jsx(IconButton, { isActive: true, alt: "Lasso" }));
+            expect(container.querySelectorAll('[title="Lasso"]').length).toEqual(1);
+        });
+    });
+});

package/dist/shared-spatial-scatterplot/cursor.js

@@ -0,0 +1,22 @@
+export const getCursorWithTool = () => 'crosshair';
+export const getCursor = interactionState => (interactionState.isDragging
+    ? 'grabbing' : 'default');
+export function getOnHoverCallback(obsIndex, setObsHighlight, setComponentHover) {
+    return (info) => {
+        // Notify the parent component that its child component is
+        // the "hover source".
+        if (setComponentHover) {
+            setComponentHover();
+        }
+        if (info.index) {
+            const obsId = obsIndex[info.index];
+            if (setObsHighlight) {
+                setObsHighlight(obsId);
+            }
+        }
+        else if (setObsHighlight) {
+            // Clear the currently-hovered cell info by passing null.
+            setObsHighlight(null);
+        }
+    };
+}

package/dist/shared-spatial-scatterplot/dynamic-opacity.js

@@ -0,0 +1,47 @@
+import { deck } from '@vitessce/gl';
+import clamp from 'lodash/clamp';
+// Reference: https://observablehq.com/@rreusser/selecting-the-right-opacity-for-2d-point-clouds
+// Reference: https://observablehq.com/@bmschmidt/dot-density-election-maps-with-webgl
+export function getPointSizeDevicePixels(devicePixelRatio, zoom, xRange, yRange, width, height) {
+    // Size of a point, in units of the diagonal axis.
+    const pointSize = 0.0005;
+    // Point size maximum, in screen pixels.
+    const pointScreenSizeMax = 10;
+    // Point size minimum, in screen pixels.
+    const pointScreenSizeMin = 1 / devicePixelRatio;
+    const scaleFactor = 2 ** zoom;
+    const xAxisRange = 2.0 / ((xRange * scaleFactor) / width);
+    const yAxisRange = 2.0 / ((yRange * scaleFactor) / height);
+    // The diagonal screen size as a fraction of the current diagonal axis range,
+    // then converted to device pixels.
+    const diagonalScreenSize = Math.sqrt((width ** 2) + (height ** 2));
+    const diagonalAxisRange = Math.sqrt((xAxisRange ** 2) + (yAxisRange ** 2));
+    const diagonalFraction = pointSize / diagonalAxisRange;
+    const deviceSize = diagonalFraction * diagonalScreenSize;
+    const pointSizeDevicePixels = clamp(deviceSize, pointScreenSizeMin, pointScreenSizeMax);
+    return pointSizeDevicePixels;
+}
+// Reference: https://observablehq.com/@rreusser/selecting-the-right-opacity-for-2d-point-clouds
+export function getPointOpacity(zoom, xRange, yRange, width, height, numCells, avgFillDensity) {
+    const N = numCells;
+    const [minX, minY, maxX, maxY] = new deck.OrthographicView({ zoom }).makeViewport({
+        height,
+        width,
+        viewState: { zoom, target: [0, 0, 0] },
+    }).getBounds();
+    const X = maxY - minY;
+    const Y = maxX - minX;
+    const X0 = xRange;
+    const Y0 = yRange;
+    const W = width;
+    const H = height;
+    let rho = avgFillDensity;
+    if (!rho) {
+        rho = Math.min(1, 1 / (10 ** (Math.log10(N) - 3)));
+    }
+    // p in the calculation is the pixel length/width of a given point, which for us is 1
+    // so it does not factor into our calculation here.
+    const alpha = ((rho * W * H) / N) * (Y0 / Y) * (X0 / X);
+    const pointOpacity = clamp(alpha, 1.01 / 255, 1.0);
+    return pointOpacity;
+}

package/dist/shared-spatial-scatterplot/dynamic-opacity.test.js

@@ -0,0 +1,28 @@
+import { getPointSizeDevicePixels, getPointOpacity } from './dynamic-opacity';
+describe('dynamic-opacity.js', () => {
+    describe('getPointSizeDevicePixels', () => {
+        it('calculates point size', () => {
+            const devicePixelRatio = 2.0;
+            const zoom = null;
+            const xRange = 20;
+            const yRange = 18;
+            const width = 1000;
+            const height = 650;
+            const pointSize = getPointSizeDevicePixels(devicePixelRatio, zoom, xRange, yRange, width, height);
+            expect(pointSize).toBeCloseTo(0.5);
+        });
+    });
+    describe('getPointOpacity', () => {
+        it('calculates point opacity', () => {
+            const zoom = null;
+            const width = 1000;
+            const height = 650;
+            const xRange = 20;
+            const yRange = 18;
+            const numCells = 500000;
+            const avgFillDensity = undefined;
+            const pointOpacity = getPointOpacity(zoom, xRange, yRange, width, height, numCells, avgFillDensity);
+            expect(pointOpacity).toBeCloseTo(0.005);
+        });
+    });
+});

package/dist/shared-spatial-scatterplot/force-collide-rects.js

@@ -0,0 +1,169 @@
+/* eslint-disable no-plusplus */
+/* eslint-disable no-param-reassign */
+import { quadtree } from 'd3-quadtree';
+/**
+ * Returns a closure that returns a constant value.
+ */
+function constant(v) {
+    return (() => v);
+}
+/**
+ * Adds a tiny bit of randomness to a number.
+ */
+function jiggle(v) {
+    return v + (Math.random() - 0.5) * 1e-6;
+}
+/**
+ * A force function to be used with d3.forceSimulation.
+ * This has been adapted for use here, with comments explaining each part.
+ * Reference: https://bl.ocks.org/cmgiven/547658968d365bcc324f3e62e175709b
+ */
+export function forceCollideRects() {
+    // D3 implements things with function prototypes rather than classes.
+    // Pretend these variables are the "instance members" of a class.
+    // Note that this function actually returns the internal force() function,
+    // but that the force() function is a closure with access to these instance members.
+    let nodes;
+    let masses;
+    let strength = 1;
+    let iterations = 1;
+    let sizes;
+    let size = constant([0, 0]);
+    // Given a node, return the center point along the x-axis.
+    function xCenter(d) {
+        return d.x + d.vx + sizes[d.index][0] / 2;
+    }
+    // Given a node, return the center point along the y-axis.
+    function yCenter(d) {
+        return d.y + d.vy + sizes[d.index][1] / 2;
+    }
+    // Given a quadtree node, initialize its .size property.
+    function prepare(quad) {
+        if (quad.data) {
+            // This is a leaf node, so we set quad.size to the node's size.
+            // (No need to compute the max of internal nodes,
+            // since leaf nodes do not have any internal nodes).
+            quad.size = sizes[quad.data.index];
+        }
+        else {
+            quad.size = [0, 0];
+            // Internal nodes of the quadtree are represented
+            // as four-element arrays in left-to-right, top-to-bottom order.
+            // Here, we are setting quad.size to [maxWidth, maxHeight]
+            // among the internal nodes of this current `quad` node.
+            for (let i = 0; i < 4; i++) {
+                if (quad[i] && quad[i].size) {
+                    quad.size[0] = Math.max(quad.size[0], quad[i].size[0]);
+                    quad.size[1] = Math.max(quad.size[1], quad[i].size[1]);
+                }
+            }
+        }
+    }
+    function force() {
+        let node;
+        let nodeSize;
+        let nodeMass;
+        let xi;
+        let yi;
+        // Create a quadtree based on node center points.
+        // Initialize each quadtree node's .size property by calling
+        // the prepare() function on each quadtree node.
+        const tree = quadtree(nodes, xCenter, yCenter).visitAfter(prepare);
+        // Update the .vx and .vy properties of both `node` and `data`
+        // (the current node pair).
+        function apply(quad, x0, y0, x1, y1) {
+            // `quad` is a quadtree node.
+            const { data } = quad;
+            const xSize = (nodeSize[0] + quad.size[0]) / 2;
+            const ySize = (nodeSize[1] + quad.size[1]) / 2;
+            if (data && data.index > node.index) {
+                // This is a leaf node because `data` is defined.
+                // `x` is the difference in x centers between `node` and `data`.
+                // `y` is the difference in y centers between `node` and `data`.
+                let x = jiggle(xi - xCenter(data));
+                let y = jiggle(yi - yCenter(data));
+                const xd = Math.abs(x) - xSize;
+                const yd = Math.abs(y) - ySize;
+                // If `xd` and `yd` is less than zero,
+                // then there is an overlap between the two nodes.
+                if (xd < 0 && yd < 0) {
+                    const l = Math.sqrt(x * x + y * y);
+                    const m = masses[data.index] / (nodeMass + masses[data.index]);
+                    // We move the nodes either in the x or y direction.
+                    // Nodes are moved proportionally to:
+                    // their distance apart (`l`), their amount of overlap (`xd` or `yd`), their masses (`m`),
+                    // and the strength parameter (`strength`).
+                    if (Math.abs(xd) < Math.abs(yd)) {
+                        node.vx -= (x *= xd / l * strength) * m;
+                        data.vx += x * (1 - m);
+                    }
+                    else {
+                        node.vy -= (y *= yd / l * strength) * m;
+                        data.vy += y * (1 - m);
+                    }
+                }
+                // When the quadtree.visit callback returns _true_ for a node,
+                // then the node's children will _not_ be visited.
+                return x0 > xi + xSize || x1 < xi - xSize || y0 > yi + ySize || y1 < yi - ySize;
+            }
+            return false;
+        }
+        function iterate() {
+            // On every iteration, use the `apply` function to visit every node
+            // which has an index greater than the current node's index,
+            // (visiting every node pair).
+            for (let j = 0; j < nodes.length; j++) {
+                node = nodes[j];
+                nodeSize = sizes[j];
+                nodeMass = masses[j];
+                xi = xCenter(node);
+                yi = yCenter(node);
+                tree.visit(apply);
+            }
+        }
+        // Do the specified number of iterations.
+        for (let i = 0; i < iterations; i++) {
+            iterate();
+        }
+    }
+    // The "constructor".
+    // Takes a list of nodes as input.
+    force.initialize = (v) => {
+        nodes = v;
+        // Get the size [w, h] of each node using the size getter function.
+        sizes = nodes.map(size);
+        // Get the mass of each node,
+        // which is the sum of its horizontal and vertical edge lengths.
+        masses = sizes.map(d => d[0] + d[1]);
+    };
+    // Set the number of iterations.
+    // If no value is provided as a parameter, this acts as a getter function.
+    force.iterations = (...v) => {
+        if (v.length) {
+            iterations = +v[0];
+            return force;
+        }
+        return iterations;
+    };
+    // Set the strength value.
+    // If no value is provided as a parameter, this acts as a getter function.
+    force.strength = (...v) => {
+        if (v.length) {
+            strength = +v[0];
+            return force;
+        }
+        return strength;
+    };
+    // Set the size function.
+    // The size function takes a node as a parameter and returns its size.
+    // If no size function is provided as a parameter, this acts as a getter function.
+    force.size = (...v) => {
+        if (v.length) {
+            size = (typeof v[0] === 'function' ? v[0] : constant(v[0]));
+            return force;
+        }
+        return size;
+    };
+    // Returns the force closure.
+    return force;
+}

package/dist/shared-spatial-scatterplot/force-collide-rects.test.js

@@ -0,0 +1,58 @@
+import { forceSimulation } from 'd3-force';
+import { forceCollideRects } from './force-collide-rects';
+describe('force-collide-rects.js', () => {
+    describe('forceCollideRects', () => {
+        it('can be initialized with a size function', () => {
+            const collisionForce = forceCollideRects()
+                .size(d => ([d.width, d.height]));
+            const size = collisionForce.size();
+            const [w, h] = size({ width: 2, height: 3 });
+            expect(w).toEqual(2);
+            expect(h).toEqual(3);
+        });
+        it('cannot prevent a collision of rects after few iterations', () => {
+            const collisionForce = forceCollideRects()
+                .size(d => ([d.width, d.height]));
+            const nodes = [
+                {
+                    label: 'A', width: 100, height: 100, x: 2, y: 2,
+                },
+                {
+                    label: 'B', width: 100, height: 100, x: 3, y: 3,
+                },
+                {
+                    label: 'C', width: 100, height: 100, x: 3, y: 2,
+                },
+            ];
+            forceSimulation()
+                .nodes(nodes)
+                .force('collision', collisionForce)
+                .tick(2);
+            const collisionAB = (Math.abs(nodes[0].x - nodes[1].x) < 100
+                && Math.abs(nodes[0].y - nodes[1].y) < 100);
+            expect(collisionAB).toEqual(true);
+        });
+        it('can prevent a collision of rects after many iterations', () => {
+            const collisionForce = forceCollideRects()
+                .size(d => ([d.width, d.height]));
+            const nodes = [
+                {
+                    label: 'A', width: 100, height: 100, x: 2, y: 2,
+                },
+                {
+                    label: 'B', width: 100, height: 100, x: 3, y: 3,
+                },
+                {
+                    label: 'C', width: 100, height: 100, x: 3, y: 2,
+                },
+            ];
+            forceSimulation()
+                .nodes(nodes)
+                .force('collision', collisionForce)
+                .tick(50);
+            const collisionAB = (Math.abs(nodes[0].x - nodes[1].x) < 100
+                && Math.abs(nodes[0].y - nodes[1].y) < 100);
+            expect(collisionAB).toEqual(false);
+        });
+    });
+});

package/dist/shared-spatial-scatterplot/index.js

@@ -0,0 +1,5 @@
+export { default as AbstractSpatialOrScatterplot } from './AbstractSpatialOrScatterplot';
+export { createQuadTree } from './quadtree';
+export { forceCollideRects } from './force-collide-rects';
+export { getOnHoverCallback } from './cursor';
+export { getPointSizeDevicePixels, getPointOpacity, } from './dynamic-opacity';

package/dist/shared-spatial-scatterplot/quadtree.js

@@ -0,0 +1,26 @@
+import { quadtree } from 'd3-quadtree';
+import range from 'lodash/range';
+/**
+ * Create a d3-quadtree object for cells data points.
+ * @param {array} cellsEntries Array of [cellId, cell] tuples,
+ * resulting from running Object.entries on the cells object.
+ * @param {function} getCellCoords Given a cell object, return the
+ * spatial/scatterplot coordinates [x, y].
+ * @returns {object} Quadtree instance.
+ */
+export function createQuadTree(obsEmbedding, getCellCoords) {
+    // Use the cellsEntries variable since it is already
+    // an array, converted by Object.entries().
+    // Only use cellsEntries in quadtree calculation if there is
+    // centroid data in the cells (i.e not just ids).
+    // eslint-disable-next-line no-unused-vars
+    if (!obsEmbedding) {
+        // Abort if the cells data is not yet available.
+        return null;
+    }
+    const tree = quadtree()
+        .x(i => getCellCoords(i)[0])
+        .y(i => getCellCoords(i)[1])
+        .addAll(range(obsEmbedding.shape[1]));
+    return tree;
+}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@vitessce/scatterplot",
+  "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/gl": "2.0.0-beta.0",
+    "@vitessce/icons": "2.0.0-beta.0",
+    "@vitessce/tooltip": "2.0.0-beta.0",
+    "@vitessce/utils": "2.0.0-beta.0",
+    "@vitessce/vit-s": "2.0.0-beta.0",
+    "clsx": "^1.1.1",
+    "d3-force": "^2.1.1",
+    "d3-quadtree": "^1.0.7",
+    "lodash": "^4.17.21"
+  },
+  "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 ."
+  }
+}