@vitessce/scatterplot 2.0.3-beta.0 → 3.0.0

package/src/ScatterplotOptions.js

@@ -0,0 +1,269 @@
+import React, { useCallback } from 'react';
+import { debounce } from 'lodash-es';
+import { Checkbox, Slider, TableCell, TableRow } from '@material-ui/core';
+import { capitalize } from '@vitessce/utils';
+import {
+  usePlotOptionsStyles, CellColorEncodingOption, OptionsContainer, OptionSelect,
+} from '@vitessce/vit-s';
+import { GLSL_COLORMAPS } from '@vitessce/gl';
+
+export default function ScatterplotOptions(props) {
+  const {
+    children,
+    observationsLabel,
+    cellRadius,
+    setCellRadius,
+    cellRadiusMode,
+    setCellRadiusMode,
+    cellOpacity,
+    setCellOpacity,
+    cellOpacityMode,
+    setCellOpacityMode,
+    cellSetLabelsVisible,
+    setCellSetLabelsVisible,
+    tooltipsVisible,
+    setTooltipsVisible,
+    cellSetLabelSize,
+    setCellSetLabelSize,
+    cellSetPolygonsVisible,
+    setCellSetPolygonsVisible,
+    cellColorEncoding,
+    setCellColorEncoding,
+    geneExpressionColormap,
+    setGeneExpressionColormap,
+    geneExpressionColormapRange,
+    setGeneExpressionColormapRange,
+  } = props;
+
+  const observationsLabelNice = capitalize(observationsLabel);
+
+  const classes = usePlotOptionsStyles();
+
+  function handleCellRadiusModeChange(event) {
+    setCellRadiusMode(event.target.value);
+  }
+
+  function handleCellOpacityModeChange(event) {
+    setCellOpacityMode(event.target.value);
+  }
+
+  function handleRadiusChange(event, value) {
+    setCellRadius(value);
+  }
+
+  function handleOpacityChange(event, value) {
+    setCellOpacity(value);
+  }
+
+  function handleLabelVisibilityChange(event) {
+    setCellSetLabelsVisible(event.target.checked);
+  }
+
+  function handleTooltipsVisibilityChange(event) {
+    setTooltipsVisible(event.target.checked);
+  }
+
+  function handleLabelSizeChange(event, value) {
+    setCellSetLabelSize(value);
+  }
+
+  function handlePolygonVisibilityChange(event) {
+    setCellSetPolygonsVisible(event.target.checked);
+  }
+
+  function handleGeneExpressionColormapChange(event) {
+    setGeneExpressionColormap(event.target.value);
+  }
+
+  function handleColormapRangeChange(event, value) {
+    setGeneExpressionColormapRange(value);
+  }
+  const handleColormapRangeChangeDebounced = useCallback(
+    debounce(handleColormapRangeChange, 5, { trailing: true }),
+    [handleColormapRangeChange],
+  );
+
+  return (
+    <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}>
+          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
+        </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.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/src/shared-spatial-scatterplot/AbstractSpatialOrScatterplot.js

@@ -0,0 +1,280 @@
+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 (
+      <>
+        <ToolMenu
+          activeTool={tool}
+          setActiveTool={this.onToolChange}
+          visibleTools={{
+            pan: showPanTool && !hideTools,
+            selectLasso: showCellSelectionTools && !hideTools,
+          }}
+          recenterOnClick={this.recenter}
+        />
+        <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>
+      </>
+    );
+  }
+}