@vitessce/scatterplot 2.0.2 → 2.0.3

package/src/ScatterplotOptions.js

@@ -0,0 +1,247 @@
+import React, { useCallback } from 'react';
+import debounce from 'lodash/debounce';
+import Checkbox from '@material-ui/core/Checkbox';
+import Slider from '@material-ui/core/Slider';
+import TableCell from '@material-ui/core/TableCell';
+import TableRow from '@material-ui/core/TableRow';
+import { capitalize } from '@vitessce/utils';
+import {
+  usePlotOptionsStyles, CellColorEncodingOption, OptionsContainer, OptionSelect,
+} from '@vitessce/vit-s';
+import { GLSL_COLORMAPS } from '@vitessce/gl';
+
+export default function ScatterplotOptions(props) {
+  const {
+    children,
+    observationsLabel,
+    cellRadius,
+    setCellRadius,
+    cellRadiusMode,
+    setCellRadiusMode,
+    cellOpacity,
+    setCellOpacity,
+    cellOpacityMode,
+    setCellOpacityMode,
+    cellSetLabelsVisible,
+    setCellSetLabelsVisible,
+    cellSetLabelSize,
+    setCellSetLabelSize,
+    cellSetPolygonsVisible,
+    setCellSetPolygonsVisible,
+    cellColorEncoding,
+    setCellColorEncoding,
+    geneExpressionColormap,
+    setGeneExpressionColormap,
+    geneExpressionColormapRange,
+    setGeneExpressionColormapRange,
+  } = props;
+
+  const observationsLabelNice = capitalize(observationsLabel);
+
+  const classes = usePlotOptionsStyles();
+
+  function handleCellRadiusModeChange(event) {
+    setCellRadiusMode(event.target.value);
+  }
+
+  function handleCellOpacityModeChange(event) {
+    setCellOpacityMode(event.target.value);
+  }
+
+  function handleRadiusChange(event, value) {
+    setCellRadius(value);
+  }
+
+  function handleOpacityChange(event, value) {
+    setCellOpacity(value);
+  }
+
+  function handleLabelVisibilityChange(event) {
+    setCellSetLabelsVisible(event.target.checked);
+  }
+
+  function handleLabelSizeChange(event, value) {
+    setCellSetLabelSize(value);
+  }
+
+  function handlePolygonVisibilityChange(event) {
+    setCellSetPolygonsVisible(event.target.checked);
+  }
+
+  function handleGeneExpressionColormapChange(event) {
+    setGeneExpressionColormap(event.target.value);
+  }
+
+  function handleColormapRangeChange(event, value) {
+    setGeneExpressionColormapRange(value);
+  }
+  const handleColormapRangeChangeDebounced = useCallback(
+    debounce(handleColormapRangeChange, 5, { trailing: true }),
+    [handleColormapRangeChange],
+  );
+
+  return (
+    <OptionsContainer>
+      {children}
+      <CellColorEncodingOption
+        observationsLabel={observationsLabel}
+        cellColorEncoding={cellColorEncoding}
+        setCellColorEncoding={setCellColorEncoding}
+      />
+      <TableRow>
+        <TableCell className={classes.labelCell}>
+          {observationsLabelNice} Set Labels Visible
+        </TableCell>
+        <TableCell className={classes.inputCell}>
+          <Checkbox
+            className={classes.checkbox}
+            checked={cellSetLabelsVisible}
+            onChange={handleLabelVisibilityChange}
+            name="scatterplot-option-cell-set-labels"
+            color="default"
+          />
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell className={classes.labelCell}>
+          {observationsLabelNice} Set Label Size
+        </TableCell>
+        <TableCell className={classes.inputCell}>
+          <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}
+          />
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell className={classes.labelCell}>
+          {observationsLabelNice} Set Polygons Visible
+        </TableCell>
+        <TableCell className={classes.inputCell}>
+          <Checkbox
+            className={classes.checkbox}
+            checked={cellSetPolygonsVisible}
+            onChange={handlePolygonVisibilityChange}
+            name="scatterplot-option-cell-set-polygons"
+            color="default"
+          />
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell className={classes.labelCell} htmlFor="cell-radius-mode-select">
+          {observationsLabelNice} Radius Mode
+        </TableCell>
+        <TableCell className={classes.inputCell}>
+          <OptionSelect
+            className={classes.select}
+            value={cellRadiusMode}
+            onChange={handleCellRadiusModeChange}
+            inputProps={{
+              id: 'cell-radius-mode-select',
+            }}
+          >
+            <option value="auto">Auto</option>
+            <option value="manual">Manual</option>
+          </OptionSelect>
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell className={classes.labelCell}>
+          {observationsLabelNice} Radius
+        </TableCell>
+        <TableCell className={classes.inputCell}>
+          <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}
+          />
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell className={classes.labelCell} htmlFor="cell-opacity-mode-select">
+          {observationsLabelNice} Opacity Mode
+        </TableCell>
+        <TableCell className={classes.inputCell}>
+          <OptionSelect
+            className={classes.select}
+            value={cellOpacityMode}
+            onChange={handleCellOpacityModeChange}
+            inputProps={{
+              id: 'cell-opacity-mode-select',
+            }}
+          >
+            <option value="auto">Auto</option>
+            <option value="manual">Manual</option>
+          </OptionSelect>
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell className={classes.labelCell}>
+          {observationsLabelNice} Opacity
+        </TableCell>
+        <TableCell className={classes.inputCell}>
+          <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}
+          />
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell className={classes.labelCell} htmlFor="gene-expression-colormap-select">
+          Gene Expression Colormap
+        </TableCell>
+        <TableCell className={classes.inputCell}>
+          <OptionSelect
+            className={classes.select}
+            value={geneExpressionColormap}
+            onChange={handleGeneExpressionColormapChange}
+            inputProps={{
+              id: 'gene-expression-colormap-select',
+            }}
+          >
+            {GLSL_COLORMAPS.map(cmap => (
+              <option key={cmap} value={cmap}>{cmap}</option>
+            ))}
+          </OptionSelect>
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell className={classes.labelCell}>
+          Gene Expression Colormap Range
+        </TableCell>
+        <TableCell className={classes.inputCell}>
+          <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}
+          />
+        </TableCell>
+      </TableRow>
+    </OptionsContainer>
+  );
+}

package/src/ScatterplotTooltipSubscriber.js

@@ -0,0 +1,38 @@
+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 ? (
+      <Tooltip2D
+        x={x}
+        y={y}
+        parentUuid={parentUuid}
+        sourceUuid={sourceUuid}
+        parentWidth={width}
+        parentHeight={height}
+      >
+        <TooltipContent info={cellInfo} />
+      </Tooltip2D>
+    ) : null)
+  );
+}

package/src/index.js

@@ -0,0 +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 {
+  getPointSizeDevicePixels,
+  getPointOpacity,
+  getOnHoverCallback,
+  createQuadTree,
+  AbstractSpatialOrScatterplot,
+} from './shared-spatial-scatterplot/index';

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

@@ -0,0 +1,274 @@
+import React, { PureComponent } from 'react';
+import { deck, DEFAULT_GL_OPTIONS } from '@vitessce/gl';
+import ToolMenu from './ToolMenu';
+import { getCursor, getCursorWithTool } from './cursor';
+
+/**
+ * Abstract class component intended to be inherited by
+ * the Spatial and Scatterplot class components.
+ * Contains a common constructor, common DeckGL callbacks,
+ * and common render function.
+ */
+export default class AbstractSpatialOrScatterplot extends PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      gl: null,
+      tool: null,
+    };
+
+    this.viewport = null;
+
+    this.onViewStateChange = this.onViewStateChange.bind(this);
+    this.onInitializeViewInfo = this.onInitializeViewInfo.bind(this);
+    this.onWebGLInitialized = this.onWebGLInitialized.bind(this);
+    this.onToolChange = this.onToolChange.bind(this);
+    this.onHover = this.onHover.bind(this);
+  }
+
+  /**
+   * Called by DeckGL upon a viewState change,
+   * for example zoom or pan interaction.
+   * Emit the new viewState to the `setViewState`
+   * handler prop.
+   * @param {object} params
+   * @param {object} params.viewState The next deck.gl viewState.
+   */
+  onViewStateChange({ viewState: nextViewState }) {
+    const {
+      setViewState, viewState, layers, spatialAxisFixed,
+    } = this.props;
+    const use3d = layers?.some(l => l.use3d);
+    setViewState({
+      ...nextViewState,
+      // If the axis is fixed, just use the current target in state i.e don't change target.
+      target: spatialAxisFixed && use3d ? viewState.target : nextViewState.target,
+    });
+  }
+
+  /**
+   * Called by DeckGL upon viewport
+   * initialization.
+   * @param {object} viewState
+   * @param {object} viewState.viewport
+   */
+  onInitializeViewInfo({ viewport }) {
+    this.viewport = viewport;
+  }
+
+  /**
+   * Called by DeckGL upon initialization,
+   * helps to understand when to pass layers
+   * to the DeckGL component.
+   * @param {object} gl The WebGL context object.
+   */
+  onWebGLInitialized(gl) {
+    this.setState({ gl });
+  }
+
+  /**
+   * Called by the ToolMenu buttons.
+   * Emits the new tool value to the
+   * `onToolChange` prop.
+   * @param {string} tool Name of tool.
+   */
+  onToolChange(tool) {
+    const { onToolChange: onToolChangeProp } = this.props;
+    this.setState({ tool });
+    if (onToolChangeProp) {
+      onToolChangeProp(tool);
+    }
+  }
+
+  /**
+   * Create the DeckGL layers.
+   * @returns {object[]} Array of
+   * DeckGL layer objects.
+   * Intended to be overriden by descendants.
+   */
+  // eslint-disable-next-line class-methods-use-this
+  getLayers() {
+    return [];
+  }
+
+  // eslint-disable-next-line consistent-return
+  onHover(info) {
+    const {
+      coordinate, sourceLayer: layer, tile,
+    } = info;
+    const {
+      setCellHighlight, cellHighlight, setComponentHover, layers,
+    } = this.props;
+    const hasBitmask = (layers || []).some(l => l.type === 'bitmask');
+    if (!setCellHighlight || !tile) {
+      return null;
+    }
+    if (!layer || !coordinate) {
+      if (cellHighlight && hasBitmask) {
+        setCellHighlight(null);
+      }
+      return null;
+    }
+    const {
+      content,
+      bbox,
+      index: { z },
+    } = tile;
+    if (!content) {
+      if (cellHighlight && hasBitmask) {
+        setCellHighlight(null);
+      }
+      return null;
+    }
+    const { data, width, height } = content;
+    const {
+      left, right, top, bottom,
+    } = bbox;
+    const bounds = [
+      left,
+      data.height < layer.tileSize ? height : bottom,
+      data.width < layer.tileSize ? width : right,
+      top,
+    ];
+    if (!data) {
+      if (cellHighlight && hasBitmask) {
+        setCellHighlight(null);
+      }
+      return null;
+    }
+    // Tiled layer needs a custom layerZoomScale.
+    if (layer.id.includes('bitmask')) {
+      // The zoomed out layer needs to use the fixed zoom at which it is rendered.
+      const layerZoomScale = Math.max(
+        1,
+        2 ** Math.round(-z),
+      );
+      const dataCoords = [
+        Math.floor((coordinate[0] - bounds[0]) / layerZoomScale),
+        Math.floor((coordinate[1] - bounds[3]) / layerZoomScale),
+      ];
+      const coords = dataCoords[1] * width + dataCoords[0];
+      const hoverData = data.map(d => d[coords]);
+      const cellId = hoverData.find(i => i > 0);
+      if (cellId !== Number(cellHighlight)) {
+        if (setComponentHover) {
+          setComponentHover();
+        }
+        // eslint-disable-next-line no-unused-expressions
+        setCellHighlight(cellId ? String(cellId) : null);
+      }
+    }
+  }
+
+  /**
+   * Emits a function to project from the
+   * cell ID space to the scatterplot or
+   * spatial coordinate space, via the
+   * `updateViewInfo` prop.
+   */
+  viewInfoDidUpdate(obsIndex, obsLocations, makeGetObsCoords) {
+    const { updateViewInfo, uuid } = this.props;
+    const { viewport } = this;
+    if (updateViewInfo && viewport) {
+      updateViewInfo({
+        uuid,
+        project: (obsId) => {
+          try {
+            if (obsIndex && obsLocations) {
+              const getObsCoords = makeGetObsCoords(obsLocations);
+              const obsIdx = obsIndex.indexOf(obsId);
+              const obsCoord = getObsCoords(obsIdx);
+              return viewport.project(obsCoord);
+            }
+            return [null, null];
+          } catch (e) {
+            return [null, null];
+          }
+        },
+      });
+    }
+  }
+
+  /**
+   * Intended to be overridden by descendants.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  componentDidUpdate() {
+
+  }
+
+  /**
+   * Intended to be overridden by descendants.
+   * @returns {boolean} Whether or not any layers are 3D.
+   */
+  // eslint-disable-next-line class-methods-use-this
+  use3d() {
+    return false;
+  }
+
+  /**
+   * A common render function for both Spatial
+   * and Scatterplot components.
+   */
+  render() {
+    const {
+      deckRef, viewState, uuid, hideTools,
+    } = this.props;
+    const { gl, tool } = this.state;
+    const layers = this.getLayers();
+    const use3d = this.use3d();
+
+    const showCellSelectionTools = this.obsSegmentationsData !== null;
+    const showPanTool = layers.length > 0;
+    // For large datasets or ray casting, the visual quality takes only a small
+    // hit in exchange for much better performance by setting this to false:
+    // https://deck.gl/docs/api-reference/core/deck#usedevicepixels
+    const useDevicePixels = (!use3d
+      && (
+        this.obsSegmentationsData?.shape?.[0] < 100000
+        || this.obsLocationsData?.shape?.[1] < 100000
+      )
+    );
+
+    return (
+      <>
+        <ToolMenu
+          activeTool={tool}
+          setActiveTool={this.onToolChange}
+          visibleTools={{
+            pan: showPanTool && !hideTools,
+            selectRectangle: showCellSelectionTools && !hideTools,
+            selectLasso: showCellSelectionTools && !hideTools,
+          }}
+        />
+        <deck.DeckGL
+          id={`deckgl-overlay-${uuid}`}
+          ref={deckRef}
+          views={[
+            use3d
+              ? new deck.OrbitView({ id: 'orbit', controller: true, orbitAxis: 'Y' })
+              : new deck.OrthographicView({
+                id: 'ortho',
+              }),
+          ]} // id is a fix for https://github.com/uber/deck.gl/issues/3259
+          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}
+        >
+          {this.onInitializeViewInfo}
+        </deck.DeckGL>
+      </>
+    );
+  }
+}

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

@@ -0,0 +1,105 @@
+import React from 'react';
+import clsx from 'clsx';
+import { SELECTION_TYPE } from '@vitessce/gl';
+import { PointerIconSVG, SelectRectangleIconSVG, SelectLassoIconSVG } from '@vitessce/icons';
+import { makeStyles } from '@material-ui/core';
+
+const useStyles = makeStyles(() => ({
+  tool: {
+    position: 'absolute',
+    display: 'inline',
+    zIndex: '1000',
+    opacity: '.65',
+    color: 'black',
+    '&:hover': {
+      opacity: '.90',
+    },
+  },
+  iconButton: {
+    // btn btn-outline-secondary mr-2 icon
+    padding: '0',
+    height: '2em',
+    width: '2em',
+    backgroundColor: 'white',
+
+    display: 'inline-block',
+    fontWeight: '400',
+    textAlign: 'center',
+    verticalAlign: 'middle',
+    cursor: 'pointer',
+    userSelect: 'none',
+    border: '1px solid #6c757d',
+    fontSize: '16px',
+    lineHeight: '1.5',
+    borderRadius: '4px',
+    transition: 'color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out',
+    color: '#6c757d',
+
+    marginRight: '8px',
+
+    '& > svg': {
+      verticalAlign: 'middle',
+    },
+  },
+  iconButtonActive: {
+    // active
+    color: '#fff',
+    backgroundColor: '#6c757d',
+    borderColor: '#6c757d',
+    boxShadow: '0 0 0 3px rgba(108, 117, 125, 0.5)',
+  },
+}));
+
+export function IconButton(props) {
+  const {
+    alt, onClick, isActive, children,
+  } = props;
+  const classes = useStyles();
+  return (
+    <button
+      className={clsx(classes.iconButton, { [classes.iconButtonActive]: isActive })}
+      onClick={onClick}
+      type="button"
+      title={alt}
+    >
+      {children}
+    </button>
+  );
+}
+
+export default function ToolMenu(props) {
+  const {
+    setActiveTool,
+    activeTool,
+    visibleTools = { pan: true, selectRectangle: true, selectLasso: true },
+  } = props;
+  const classes = useStyles();
+  return (
+    <div className={classes.tool}>
+      {visibleTools.pan && (
+      <IconButton
+        alt="pointer tool"
+        onClick={() => setActiveTool(null)}
+        isActive={activeTool === null}
+      ><PointerIconSVG />
+      </IconButton>
+      )}
+      {visibleTools.selectRectangle ? (
+        <IconButton
+          alt="select rectangle"
+          onClick={() => setActiveTool(SELECTION_TYPE.RECTANGLE)}
+          isActive={activeTool === SELECTION_TYPE.RECTANGLE}
+        ><SelectRectangleIconSVG />
+        </IconButton>
+      ) : null}
+      {visibleTools.selectLasso ? (
+        <IconButton
+          alt="select lasso"
+          onClick={() => setActiveTool(SELECTION_TYPE.POLYGON)}
+          isActive={activeTool === SELECTION_TYPE.POLYGON}
+        ><SelectLassoIconSVG />
+        </IconButton>
+      ) : null}
+    </div>
+  );
+}

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

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