@vitessce/scatterplot 2.0.3-beta.0 → 2.0.3

package/dist/Scatterplot.js

@@ -1,304 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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/shared-spatial-scatterplot/AbstractSpatialOrScatterplot.js

@@ -1,213 +0,0 @@
-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, index: { 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

@@ -1,58 +0,0 @@
-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: '16px',
-        lineHeight: '1.5',
-        borderRadius: '4px',
-        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: '8px',
-        '& > svg': {
-            verticalAlign: 'middle',
-        },
-    },
-    iconButtonActive: {
-        // active
-        color: '#fff',
-        backgroundColor: '#6c757d',
-        borderColor: '#6c757d',
-        boxShadow: '0 0 0 3px 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

@@ -1,16 +0,0 @@
-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);
-        });
-    });
-});