@vitessce/scatterplot 2.0.3 → 3.0.1

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/scatterplot",
-  "version": "2.0.3",
+  "version": "3.0.1",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -8,34 +8,46 @@
     "url": "git+https://github.com/vitessce/vitessce.git"
   },
   "license": "MIT",
-  "main": "dist/index.mjs",
+  "type": "module",
+  "main": "dist/index.js",
   "files": [
+    "src",
     "dist",
-    "src"
+    "dist-tsc"
   ],
   "dependencies": {
     "@material-ui/core": "~4.12.3",
+    "@material-ui/icons": "~4.11.2",
     "clsx": "^1.1.1",
     "d3-force": "^2.1.1",
     "d3-quadtree": "^1.0.7",
-    "lodash": "^4.17.21",
-    "@vitessce/constants-internal": "2.0.3",
-    "@vitessce/gl": "2.0.3",
-    "@vitessce/icons": "2.0.3",
-    "@vitessce/tooltip": "2.0.3",
-    "@vitessce/utils": "2.0.3",
-    "@vitessce/vit-s": "2.0.3"
+    "lodash-es": "^4.17.21",
+    "@vitessce/constants-internal": "3.0.1",
+    "@vitessce/icons": "3.0.1",
+    "@vitessce/tooltip": "3.0.1",
+    "@vitessce/utils": "3.0.1",
+    "@vitessce/vit-s": "3.0.1",
+    "@vitessce/gl": "3.0.1"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
     "react": "^18.0.0",
-    "vite": "^3.0.0",
-    "vitest": "^0.23.4"
+    "vite": "^4.3.0",
+    "vitest": "^0.32.2"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "scripts": {
     "bundle": "pnpm exec vite build -c ../../../scripts/vite.config.js",
-    "test": "pnpm exec vitest --run -r ../../../ --dir ."
+    "test": "pnpm exec vitest --run"
+  },
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist-tsc/index.d.ts",
+      "import": "./dist/index.js"
+    }
   }
 }

package/src/Scatterplot.js

@@ -7,7 +7,7 @@ import {
 import { getDefaultColor } from '@vitessce/utils';
 import {
   AbstractSpatialOrScatterplot, createQuadTree, forceCollideRects, getOnHoverCallback,
-} from './shared-spatial-scatterplot';
+} from './shared-spatial-scatterplot/index.js';
 
 const CELLS_LAYER_ID = 'scatterplot';
 const LABEL_FONT_FAMILY = "-apple-system, 'Helvetica Neue', Arial, sans-serif";
@@ -64,8 +64,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) {
@@ -343,6 +345,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();
@@ -366,6 +369,13 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
     }
   }
 
+  recenter() {
+    const { originalViewState, setViewState } = this.props;
+    if (Array.isArray(originalViewState?.target) && typeof originalViewState?.zoom === 'number') {
+      setViewState(originalViewState);
+    }
+  }
+
   // render() is implemented in the abstract parent class.
 }
 
@@ -382,4 +392,5 @@ const ScatterplotWrapper = forwardRef((props, deckRef) => (
     deckRef={deckRef}
   />
 ));
+ScatterplotWrapper.displayName = 'ScatterplotWrapper';
 export default ScatterplotWrapper;

package/src/ScatterplotOptions.js

@@ -1,9 +1,6 @@
 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,
@@ -24,6 +21,8 @@ export default function ScatterplotOptions(props) {
     setCellOpacityMode,
     cellSetLabelsVisible,
     setCellSetLabelsVisible,
+    tooltipsVisible,
+    setTooltipsVisible,
     cellSetLabelSize,
     setCellSetLabelSize,
     cellSetPolygonsVisible,
@@ -60,6 +59,10 @@ export default function ScatterplotOptions(props) {
     setCellSetLabelsVisible(event.target.checked);
   }
 
+  function handleTooltipsVisibilityChange(event) {
+    setTooltipsVisible(event.target.checked);
+  }
+
   function handleLabelSizeChange(event, value) {
     setCellSetLabelSize(value);
   }
@@ -102,6 +105,25 @@ export default function ScatterplotOptions(props) {
           />
         </TableCell>
       </TableRow>
+      <TableRow>
+        <TableCell className={classes.labelCell}>
+          Tooltips Visible
+        </TableCell>
+        <TableCell className={classes.inputCell}>
+          <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"
+          />
+        </TableCell>
+      </TableRow>
       <TableRow>
         <TableCell className={classes.labelCell}>
           {observationsLabelNice} Set Label Size

package/src/index.js

@@ -1,11 +1,11 @@
-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 { 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';
+} from './shared-spatial-scatterplot/index.js';

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

@@ -1,7 +1,7 @@
 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
@@ -19,12 +19,12 @@ export default class AbstractSpatialOrScatterplot extends PureComponent {
     };
 
     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);
   }
 
   /**
@@ -198,6 +198,12 @@ export default class AbstractSpatialOrScatterplot extends PureComponent {
 
   }
 
+  /** 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.
@@ -238,9 +244,9 @@ export default class AbstractSpatialOrScatterplot extends PureComponent {
           setActiveTool={this.onToolChange}
           visibleTools={{
             pan: showPanTool && !hideTools,
-            selectRectangle: showCellSelectionTools && !hideTools,
             selectLasso: showCellSelectionTools && !hideTools,
           }}
+          recenterOnClick={this.recenter}
         />
         <deck.DeckGL
           id={`deckgl-overlay-${uuid}`}

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

@@ -1,10 +1,18 @@
 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(() => ({
+  toolButton: {
+    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
+  },
+  toolIcon: {
     // btn btn-outline-secondary mr-2 icon
     padding: '0',
     height: '2em',
@@ -39,9 +52,14 @@ const useStyles = makeStyles(() => ({
 
     '& > svg': {
       verticalAlign: 'middle',
+      color: 'black',
+    },
+    '&:active': {
+      extend: 'iconClicked',
     },
+
   },
-  iconButtonActive: {
+  toolActive: {
     // active
     color: '#fff',
     backgroundColor: '#6c757d',
@@ -50,14 +68,31 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-export function IconButton(props) {
+export function IconTool(props) {
   const {
     alt, onClick, isActive, children,
   } = props;
   const classes = useStyles();
   return (
     <button
-      className={clsx(classes.iconButton, { [classes.iconButtonActive]: isActive })}
+      className={clsx(classes.toolIcon, { [classes.toolActive]: isActive })}
+      onClick={onClick}
+      type="button"
+      title={alt}
+    >
+      {children}
+    </button>
+  );
+}
+
+export function IconButton(props) {
+  const {
+    alt, onClick, children,
+  } = props;
+  const classes = useStyles();
+  return (
+    <button
+      className={clsx(classes.toolIcon, classes.toolButton)}
       onClick={onClick}
       type="button"
       title={alt}
@@ -71,35 +106,38 @@ export default function ToolMenu(props) {
   const {
     setActiveTool,
     activeTool,
-    visibleTools = { pan: true, selectRectangle: true, selectLasso: true },
+    visibleTools = { pan: true, selectLasso: true },
+    recenterOnClick = () => {},
   } = props;
   const classes = useStyles();
+
+  const onRecenterButtonCLick = () => {
+    recenterOnClick();
+  };
+
   return (
     <div className={classes.tool}>
       {visibleTools.pan && (
-      <IconButton
+      <IconTool
         alt="pointer tool"
         onClick={() => setActiveTool(null)}
         isActive={activeTool === null}
       ><PointerIconSVG />
-      </IconButton>
+      </IconTool>
       )}
-      {visibleTools.selectRectangle ? (
-        <IconButton
-          alt="select rectangle"
-          onClick={() => setActiveTool(SELECTION_TYPE.RECTANGLE)}
-          isActive={activeTool === SELECTION_TYPE.RECTANGLE}
-        ><SelectRectangleIconSVG />
-        </IconButton>
-      ) : null}
       {visibleTools.selectLasso ? (
-        <IconButton
+        <IconTool
           alt="select lasso"
           onClick={() => setActiveTool(SELECTION_TYPE.POLYGON)}
           isActive={activeTool === SELECTION_TYPE.POLYGON}
         ><SelectLassoIconSVG />
-        </IconButton>
+        </IconTool>
       ) : null}
+      <IconButton
+        alt="click to recenter"
+        onClick={() => onRecenterButtonCLick()}
+      ><CenterFocusStrong />
+      </IconButton>
     </div>
   );
 }

package/src/shared-spatial-scatterplot/ToolMenu.test.jsx

@@ -1,18 +1,26 @@
+import { describe, it, expect, afterEach } from 'vitest';
 import '@testing-library/jest-dom';
-import { cleanup, render, screen } from '@testing-library/react'
-import { afterEach, expect } from 'vitest'
+import { cleanup, render } from '@testing-library/react';
+import React from 'react';
 
-import { IconButton } from './ToolMenu';
+import { IconTool, IconButton } from './ToolMenu.js';
 
 afterEach(() => {
-  cleanup()
+  cleanup();
 });
 
 describe('ToolMenu.js', () => {
-  describe('<IconButton />', () => {
+  describe('<IconTool />', () => {
     it('renders with title attribute', () => {
-      const { container } = render(<IconButton isActive alt="Lasso" />);
+      const { container } = render(<IconTool isActive alt="Lasso" />);
       expect(container.querySelectorAll('[title="Lasso"]').length).toEqual(1);
     });
   });
+
+  describe('<IconButton />', () => {
+    it('renders with title attribute', () => {
+      const { container } = render(<IconButton alt="click to recenter" />);
+      expect(container.querySelectorAll('[title="click to recenter"]').length).toEqual(1);
+    });
+  });
 });

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

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

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

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

@@ -1,5 +1,6 @@
+import { describe, it, expect } from 'vitest';
 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', () => {

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

@@ -1,8 +1,8 @@
-export { default as AbstractSpatialOrScatterplot } from './AbstractSpatialOrScatterplot';
-export { createQuadTree } from './quadtree';
-export { forceCollideRects } from './force-collide-rects';
-export { getOnHoverCallback } from './cursor';
+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';
+} from './dynamic-opacity.js';

package/src/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.