@vitessce/scatterplot 2.0.3 → 3.0.1

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

@@ -0,0 +1,218 @@
+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.js';
+import { getCursor, getCursorWithTool } from './cursor.js';
+/**
+ * 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);
+        this.recenter = this.recenter.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.
+     * 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.
+     */
+    // 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,
+                        selectLasso: showCellSelectionTools && !hideTools,
+                    }, 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({
+                                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-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-tsc/shared-spatial-scatterplot/ToolMenu.js

@@ -0,0 +1,83 @@
+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, SelectLassoIconSVG } from '@vitessce/icons';
+import { makeStyles } from '@material-ui/core';
+import { CenterFocusStrong } from '@material-ui/icons';
+const useStyles = makeStyles(() => ({
+    toolButton: {
+        display: 'inline-flex',
+        '&:active': {
+            opacity: '.65',
+            extend: 'iconClicked',
+        },
+    },
+    tool: {
+        position: 'absolute',
+        display: 'inline',
+        zIndex: '1000',
+        opacity: '.65',
+        color: 'black',
+        '&:hover': {
+            opacity: '.90',
+        },
+    },
+    iconClicked: {
+        // Styles for the clicked state
+        boxShadow: 'none',
+        transform: 'scale(0.98)', // make the button slightly smaller
+    },
+    toolIcon: {
+        // 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',
+            color: 'black',
+        },
+        '&:active': {
+            extend: 'iconClicked',
+        },
+    },
+    toolActive: {
+        // active
+        color: '#fff',
+        backgroundColor: '#6c757d',
+        borderColor: '#6c757d',
+        boxShadow: '0 0 0 3px rgba(108, 117, 125, 0.5)',
+    },
+}));
+export function IconTool(props) {
+    const { alt, onClick, isActive, children, } = props;
+    const classes = useStyles();
+    return (_jsx("button", { className: clsx(classes.toolIcon, { [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.toolIcon, classes.toolButton), onClick: onClick, type: "button", title: alt, children: children }));
+}
+export default function ToolMenu(props) {
+    const { setActiveTool, activeTool, visibleTools = { pan: true, selectLasso: true }, recenterOnClick = () => { }, } = props;
+    const classes = useStyles();
+    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 { describe, it, expect, afterEach } from 'vitest';
+import '@testing-library/jest-dom';
+import { cleanup, render } from '@testing-library/react';
+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/cursor.js

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

package/dist-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-tsc/shared-spatial-scatterplot/dynamic-opacity.js

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

package/dist-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-tsc/shared-spatial-scatterplot/dynamic-opacity.test.js

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

package/dist-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.js

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

package/dist-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":""}