@vitessce/scatterplot 2.0.3 → 3.0.0

package/dist-tsc/Scatterplot.js

@@ -0,0 +1,314 @@
+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/index.js';
+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 selection tools).
+ * @param {function} props.onCellClick Getter function for cell layer onClick.
+ * @param {object} props.originalViewState A viewState object to pass to
+ * setViewState upon clicking the recenter button.
+ */
+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',
+            'getExpressionValue',
+        ].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();
+        }
+    }
+    recenter() {
+        const { originalViewState, setViewState } = this.props;
+        if (Array.isArray(originalViewState?.target) && typeof originalViewState?.zoom === 'number') {
+            setViewState(originalViewState);
+        }
+    }
+}
+/**
+ * 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 })));
+ScatterplotWrapper.displayName = 'ScatterplotWrapper';
+export default ScatterplotWrapper;

package/dist-tsc/ScatterplotOptions.d.ts

@@ -0,0 +1,2 @@
+export default function ScatterplotOptions(props: any): JSX.Element;
+//# sourceMappingURL=ScatterplotOptions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScatterplotOptions.d.ts","sourceRoot":"","sources":["../src/ScatterplotOptions.js"],"names":[],"mappings":"AASA,oEAmQC"}

package/dist-tsc/ScatterplotOptions.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback } from 'react';
+import { debounce } from 'lodash-es';
+import { Checkbox, Slider, TableCell, TableRow } from '@material-ui/core';
+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, tooltipsVisible, setTooltipsVisible, 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 handleTooltipsVisibilityChange(event) {
+        setTooltipsVisible(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: [_jsx(TableCell, { className: classes.labelCell, children: "Tooltips Visible" }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(Checkbox, { className: classes.checkbox, 
+                            /**
+                             * We have to use "checked" here, not "value".
+                             * The checkbox state is not persisting with value.
+                             * For reference, https://v4.mui.com/api/checkbox/
+                             */
+                            checked: tooltipsVisible, onChange: handleTooltipsVisibilityChange, name: "scatterplot-option-toltip-visibility", 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-tsc/ScatterplotTooltipSubscriber.d.ts

@@ -0,0 +1,2 @@
+export default function ScatterplotTooltipSubscriber(props: any): JSX.Element | null;
+//# sourceMappingURL=ScatterplotTooltipSubscriber.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScatterplotTooltipSubscriber.d.ts","sourceRoot":"","sources":["../src/ScatterplotTooltipSubscriber.js"],"names":[],"mappings":"AAIA,qFAiCC"}

package/dist-tsc/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-tsc/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Scatterplot } from "./Scatterplot.js";
+export { default as ScatterplotOptions } from "./ScatterplotOptions.js";
+export { default as ScatterplotTooltipSubscriber } from "./ScatterplotTooltipSubscriber.js";
+export { default as EmptyMessage } from "./EmptyMessage.js";
+export { getPointSizeDevicePixels, getPointOpacity, getOnHoverCallback, createQuadTree, AbstractSpatialOrScatterplot } from "./shared-spatial-scatterplot/index.js";
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist-tsc/index.js

@@ -1,5 +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';
+export { default as Scatterplot } from './Scatterplot.js';
+export { default as ScatterplotOptions } from './ScatterplotOptions.js';
+export { default as ScatterplotTooltipSubscriber } from './ScatterplotTooltipSubscriber.js';
+export { default as EmptyMessage } from './EmptyMessage.js';
+export { getPointSizeDevicePixels, getPointOpacity, getOnHoverCallback, createQuadTree, AbstractSpatialOrScatterplot, } from './shared-spatial-scatterplot/index.js';

package/dist-tsc/shared-spatial-scatterplot/AbstractSpatialOrScatterplot.d.ts

@@ -0,0 +1,82 @@
+/**
+ * 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 {
+    constructor(props: any);
+    state: {
+        gl: null;
+        tool: null;
+    };
+    viewport: object | null;
+    /**
+     * 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 }: {
+        viewState: object;
+    }): void;
+    /**
+     * Called by DeckGL upon viewport
+     * initialization.
+     * @param {object} viewState
+     * @param {object} viewState.viewport
+     */
+    onInitializeViewInfo({ viewport }: {
+        viewport: object;
+    }): void;
+    /**
+     * 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: object): void;
+    /**
+     * Called by the ToolMenu buttons.
+     * Emits the new tool value to the
+     * `onToolChange` prop.
+     * @param {string} tool Name of tool.
+     */
+    onToolChange(tool: string): void;
+    onHover(info: any): null | undefined;
+    /** Intended to be overridden by descendants.
+     * Resets the view type to its original position.
+    */
+    recenter(): void;
+    /**
+     * Create the DeckGL layers.
+     * @returns {object[]} Array of
+     * DeckGL layer objects.
+     * Intended to be overriden by descendants.
+     */
+    getLayers(): object[];
+    /**
+     * Emits a function to project from the
+     * cell ID space to the scatterplot or
+     * spatial coordinate space, via the
+     * `updateViewInfo` prop.
+     */
+    viewInfoDidUpdate(obsIndex: any, obsLocations: any, makeGetObsCoords: any): void;
+    /**
+     * Intended to be overridden by descendants.
+     */
+    componentDidUpdate(): void;
+    /**
+     * Intended to be overridden by descendants.
+     * @returns {boolean} Whether or not any layers are 3D.
+     */
+    use3d(): boolean;
+    /**
+     * A common render function for both Spatial
+     * and Scatterplot components.
+     */
+    render(): JSX.Element;
+}
+//# sourceMappingURL=AbstractSpatialOrScatterplot.d.ts.map

package/dist-tsc/shared-spatial-scatterplot/AbstractSpatialOrScatterplot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AbstractSpatialOrScatterplot.d.ts","sourceRoot":"","sources":["../../src/shared-spatial-scatterplot/AbstractSpatialOrScatterplot.js"],"names":[],"mappings":"AAKA;;;;;GAKG;AACH;IACE,wBAeC;IAZC;;;MAGC;IAED,wBAAoB;IAStB;;;;;;;OAOG;IACH;QAF0B,SAAS,EAAxB,MAAM;aAYhB;IAED;;;;;OAKG;IACH;QAF6B,QAAQ,EAA1B,MAAM;aAIhB;IAED;;;;;OAKG;IACH,uBAFW,MAAM,QAIhB;IAED;;;;;OAKG;IACH,mBAFW,MAAM,QAQhB;IAcD,qCAkEC;IAuCD;;MAEE;IAEF,iBAAa;IAzHb;;;;;OAKG;IAEH,aALa,MAAM,EAAE,CAOpB;IAuED;;;;;OAKG;IACH,iFAqBC;IAED;;OAEG;IAEH,2BAEC;IAQD;;;OAGG;IAEH,SAHa,OAAO,CAKnB;IAED;;;OAGG;IACH,sBA2DC;CACF"}