@vitessce/scatterplot 2.0.3-beta.0 → 3.0.0

package/dist/raw-66364181.js

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

package/dist/webimage-0fe27785.js

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

package/dist-tsc/EmptyMessage.d.ts

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

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

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

package/dist-tsc/Scatterplot.d.ts

@@ -0,0 +1,10 @@
+export default ScatterplotWrapper;
+/**
+ * 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.
+ */
+declare const ScatterplotWrapper: any;
+//# sourceMappingURL=Scatterplot.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Scatterplot.d.ts","sourceRoot":"","sources":["../src/Scatterplot.js"],"names":[],"mappings":";AA6XA;;;;;;GAMG;AACH,sCAKG"}

package/{dist → dist-tsc}/Scatterplot.js

@@ -4,7 +4,7 @@ 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';
+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;
@@ -58,8 +58,10 @@ const getPosition = (object, { index, data, target }) => {
  * @param {function} props.setCellHighlight
  * @param {function} props.updateViewInfo
  * @param {function} props.onToolChange Callback for tool changes
- * (lasso/pan/rectangle selection tools).
+ * (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) {
@@ -270,6 +272,7 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
             'obsEmbeddingIndex', 'obsEmbedding', 'cellFilter', 'cellSelection', 'cellColors',
             'cellRadius', 'cellOpacity', 'cellRadiusMode', 'geneExpressionColormap',
             'geneExpressionColormapRange', 'geneSelection', 'cellColorEncoding',
+            'getExpressionValue',
         ].some(shallowDiff)) {
             // Cells layer props changed.
             this.onUpdateCellsLayer();
@@ -292,6 +295,12 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
             this.forceUpdate();
         }
     }
+    recenter() {
+        const { originalViewState, setViewState } = this.props;
+        if (Array.isArray(originalViewState?.target) && typeof originalViewState?.zoom === 'number') {
+            setViewState(originalViewState);
+        }
+    }
 }
 /**
  * Need this wrapper function here,
@@ -301,4 +310,5 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
  * 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 → dist-tsc}/ScatterplotOptions.js

@@ -1,15 +1,12 @@
 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 { 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, cellSetLabelSize, setCellSetLabelSize, cellSetPolygonsVisible, setCellSetPolygonsVisible, cellColorEncoding, setCellColorEncoding, geneExpressionColormap, setGeneExpressionColormap, geneExpressionColormapRange, setGeneExpressionColormapRange, } = 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) {
@@ -27,6 +24,9 @@ export default function ScatterplotOptions(props) {
     function handleLabelVisibilityChange(event) {
         setCellSetLabelsVisible(event.target.checked);
     }
+    function handleTooltipsVisibilityChange(event) {
+        setTooltipsVisible(event.target.checked);
+    }
     function handleLabelSizeChange(event, value) {
         setCellSetLabelSize(value);
     }
@@ -40,7 +40,13 @@ export default function ScatterplotOptions(props) {
         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: {
+    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',

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/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

@@ -0,0 +1,5 @@
+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"}

package/{dist → dist-tsc}/shared-spatial-scatterplot/AbstractSpatialOrScatterplot.js

@@ -1,8 +1,8 @@
 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';
+import ToolMenu from './ToolMenu.js';
+import { getCursor, getCursorWithTool } from './cursor.js';
 /**
  * Abstract class component intended to be inherited by
  * the Spatial and Scatterplot class components.
@@ -22,6 +22,7 @@ export default class AbstractSpatialOrScatterplot extends PureComponent {
         this.onWebGLInitialized = this.onWebGLInitialized.bind(this);
         this.onToolChange = this.onToolChange.bind(this);
         this.onHover = this.onHover.bind(this);
+        this.recenter = this.recenter.bind(this);
     }
     /**
      * Called by DeckGL upon a viewState change,
@@ -171,6 +172,11 @@ export default class AbstractSpatialOrScatterplot extends PureComponent {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     componentDidUpdate() {
     }
+    /** Intended to be overridden by descendants.
+     * Resets the view type to its original position.
+    */
+    // eslint-disable-next-line class-methods-use-this
+    recenter() { }
     /**
      * Intended to be overridden by descendants.
      * @returns {boolean} Whether or not any layers are 3D.
@@ -198,9 +204,8 @@ export default class AbstractSpatialOrScatterplot extends PureComponent {
                 || 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: [
+                    }, recenterOnClick: this.recenter }), _jsx(deck.DeckGL, { id: `deckgl-overlay-${uuid}`, ref: deckRef, views: [
                         use3d
                             ? new deck.OrbitView({ id: 'orbit', controller: true, orbitAxis: 'Y' })
                             : new deck.OrthographicView({

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolMenu.d.ts","sourceRoot":"","sources":["../../src/shared-spatial-scatterplot/ToolMenu.js"],"names":[],"mappings":"AAsEA,kDAeC;AAED,oDAeC;AAED,0DAsCC"}

package/{dist → dist-tsc}/shared-spatial-scatterplot/ToolMenu.js

@@ -2,9 +2,17 @@ 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 { PointerIconSVG, SelectLassoIconSVG } from '@vitessce/icons';
 import { makeStyles } from '@material-ui/core';
+import { CenterFocusStrong } from '@material-ui/icons';
 const useStyles = makeStyles(() => ({
+    button: {
+        display: 'inline-flex',
+        '&:active': {
+            opacity: '.65',
+            extend: 'iconClicked',
+        },
+    },
     tool: {
         position: 'absolute',
         display: 'inline',
@@ -15,7 +23,12 @@ const useStyles = makeStyles(() => ({
             opacity: '.90',
         },
     },
-    iconButton: {
+    iconClicked: {
+        // Styles for the clicked state
+        boxShadow: 'none',
+        transform: 'scale(0.98)', // make the button slightly smaller
+    },
+    icon: {
         // btn btn-outline-secondary mr-2 icon
         padding: '0',
         height: '2em',
@@ -36,9 +49,13 @@ const useStyles = makeStyles(() => ({
         marginRight: '8px',
         '& > svg': {
             verticalAlign: 'middle',
+            color: 'black',
+        },
+        '&:active': {
+            extend: 'iconClicked',
         },
     },
-    iconButtonActive: {
+    toolActive: {
         // active
         color: '#fff',
         backgroundColor: '#6c757d',
@@ -46,13 +63,21 @@ const useStyles = makeStyles(() => ({
         boxShadow: '0 0 0 3px rgba(108, 117, 125, 0.5)',
     },
 }));
-export function IconButton(props) {
+export function IconTool(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 }));
+    return (_jsx("button", { className: clsx(classes.icon, { [classes.toolActive]: isActive }), onClick: onClick, type: "button", title: alt, children: children }));
+}
+export function IconButton(props) {
+    const { alt, onClick, children, } = props;
+    const classes = useStyles();
+    return (_jsx("button", { className: clsx(classes.icon, classes.button), 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 { setActiveTool, activeTool, visibleTools = { pan: true, selectLasso: true }, recenterOnClick = () => { }, } = 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] }));
+    const onRecenterButtonCLick = () => {
+        recenterOnClick();
+    };
+    return (_jsxs("div", { className: classes.tool, children: [visibleTools.pan && (_jsx(IconTool, { alt: "pointer tool", onClick: () => setActiveTool(null), isActive: activeTool === null, children: _jsx(PointerIconSVG, {}) })), visibleTools.selectLasso ? (_jsx(IconTool, { alt: "select lasso", onClick: () => setActiveTool(SELECTION_TYPE.POLYGON), isActive: activeTool === SELECTION_TYPE.POLYGON, children: _jsx(SelectLassoIconSVG, {}) })) : null, _jsx(IconButton, { alt: "click to recenter", onClick: () => onRecenterButtonCLick(), children: _jsx(CenterFocusStrong, {}) })] }));
 }

package/dist-tsc/shared-spatial-scatterplot/ToolMenu.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ToolMenu.test.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolMenu.test.d.ts","sourceRoot":"","sources":["../../src/shared-spatial-scatterplot/ToolMenu.test.jsx"],"names":[],"mappings":""}

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

@@ -0,0 +1,23 @@
+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 React from 'react';
+import { IconTool, IconButton } from './ToolMenu.js';
+afterEach(() => {
+    cleanup();
+});
+describe('ToolMenu.js', () => {
+    describe('<IconTool />', () => {
+        it('renders with title attribute', () => {
+            const { container } = render(_jsx(IconTool, { isActive: true, alt: "Lasso" }));
+            expect(container.querySelectorAll('[title="Lasso"]').length).toEqual(1);
+        });
+    });
+    describe('<IconButton />', () => {
+        it('renders with title attribute', () => {
+            const { container } = render(_jsx(IconButton, { alt: "click to recenter" }));
+            expect(container.querySelectorAll('[title="click to recenter"]').length).toEqual(1);
+        });
+    });
+});

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

@@ -0,0 +1,4 @@
+export function getOnHoverCallback(obsIndex: any, setObsHighlight: any, setComponentHover: any): (info: any) => void;
+export function getCursorWithTool(): string;
+export function getCursor(interactionState: any): "default" | "grabbing";
+//# sourceMappingURL=cursor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cursor.d.ts","sourceRoot":"","sources":["../../src/shared-spatial-scatterplot/cursor.js"],"names":[],"mappings":"AAKA,qHAiBC;AAtBM,4CAA2C;AAC3C,yEAEN"}

package/dist-tsc/shared-spatial-scatterplot/dynamic-opacity.d.ts

@@ -0,0 +1,3 @@
+export function getPointSizeDevicePixels(devicePixelRatio: any, zoom: any, xRange: any, yRange: any, width: any, height: any): any;
+export function getPointOpacity(zoom: any, xRange: any, yRange: any, width: any, height: any, numCells: any, avgFillDensity: any): any;
+//# sourceMappingURL=dynamic-opacity.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-opacity.d.ts","sourceRoot":"","sources":["../../src/shared-spatial-scatterplot/dynamic-opacity.js"],"names":[],"mappings":"AAKA,mIA0BC;AAGD,uIAuBC"}

package/{dist → dist-tsc}/shared-spatial-scatterplot/dynamic-opacity.js

@@ -1,5 +1,5 @@
 import { deck } from '@vitessce/gl';
-import clamp from 'lodash/clamp';
+import { clamp } from 'lodash-es';
 // 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) {

package/dist-tsc/shared-spatial-scatterplot/dynamic-opacity.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=dynamic-opacity.test.d.ts.map

package/dist-tsc/shared-spatial-scatterplot/dynamic-opacity.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-opacity.test.d.ts","sourceRoot":"","sources":["../../src/shared-spatial-scatterplot/dynamic-opacity.test.js"],"names":[],"mappings":""}

package/{dist → dist-tsc}/shared-spatial-scatterplot/dynamic-opacity.test.js

@@ -1,4 +1,4 @@
-import { getPointSizeDevicePixels, getPointOpacity } from './dynamic-opacity';
+import { getPointSizeDevicePixels, getPointOpacity } from './dynamic-opacity.js';
 describe('dynamic-opacity.js', () => {
     describe('getPointSizeDevicePixels', () => {
         it('calculates point size', () => {

package/dist-tsc/shared-spatial-scatterplot/force-collide-rects.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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(): {
+    (): void;
+    initialize(v: any): void;
+    iterations(...v: any[]): number | any;
+    strength(...v: any[]): number | any;
+    size(...v: any[]): () => any;
+};
+//# sourceMappingURL=force-collide-rects.d.ts.map

package/dist-tsc/shared-spatial-scatterplot/force-collide-rects.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"force-collide-rects.d.ts","sourceRoot":"","sources":["../../src/shared-spatial-scatterplot/force-collide-rects.js"],"names":[],"mappings":"AAkBA;;;;GAIG;AACH;;;;;;EAqKC"}

package/dist-tsc/shared-spatial-scatterplot/force-collide-rects.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=force-collide-rects.test.d.ts.map

package/dist-tsc/shared-spatial-scatterplot/force-collide-rects.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"force-collide-rects.test.d.ts","sourceRoot":"","sources":["../../src/shared-spatial-scatterplot/force-collide-rects.test.js"],"names":[],"mappings":""}

package/{dist → dist-tsc}/shared-spatial-scatterplot/force-collide-rects.test.js

@@ -1,5 +1,5 @@
 import { forceSimulation } from 'd3-force';
-import { forceCollideRects } from './force-collide-rects';
+import { forceCollideRects } from './force-collide-rects.js';
 describe('force-collide-rects.js', () => {
     describe('forceCollideRects', () => {
         it('can be initialized with a size function', () => {

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

@@ -0,0 +1,6 @@
+export { default as AbstractSpatialOrScatterplot } from "./AbstractSpatialOrScatterplot.js";
+export { createQuadTree } from "./quadtree.js";
+export { forceCollideRects } from "./force-collide-rects.js";
+export { getOnHoverCallback } from "./cursor.js";
+export { getPointSizeDevicePixels, getPointOpacity } from "./dynamic-opacity.js";
+//# sourceMappingURL=index.d.ts.map

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

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

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

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

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

@@ -0,0 +1,10 @@
+/**
+ * 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: any, getCellCoords: Function): object;
+//# sourceMappingURL=quadtree.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"quadtree.d.ts","sourceRoot":"","sources":["../../src/shared-spatial-scatterplot/quadtree.js"],"names":[],"mappings":"AAGA;;;;;;;GAOG;AACH,4EAFa,MAAM,CAiBlB"}

package/{dist → dist-tsc}/shared-spatial-scatterplot/quadtree.js

@@ -1,5 +1,5 @@
 import { quadtree } from 'd3-quadtree';
-import range from 'lodash/range';
+import { range } from 'lodash-es';
 /**
  * Create a d3-quadtree object for cells data points.
  * @param {array} cellsEntries Array of [cellId, cell] tuples,