@vitessce/scatterplot-embedding 4.0.10 → 4.1.1

package/src/EmbeddingScatterplotSubscriber.js

@@ -15,6 +15,7 @@ import {
   useObsSetsData,
   useAnnotationStoryData,
   useAnnotationFrameCoordination,
+  useAnnotationEditingForView,
   useFeatureSelection,
   useObsFeatureMatrixIndices,
   useFeatureLabelsData,
@@ -33,14 +34,19 @@ import {
   setObsSelection, mergeObsSets, getCellSetPolygons, treeToColorIndicesArray,
   colorIndicesFromCodes, getObsIndexMap, stratifyArrays,
 } from '@vitessce/sets-utils';
-import { pluralize as plur, commaNumber, aggregateFeatureArrays } from '@vitessce/utils';
+import {
+  pluralize as plur, commaNumber, aggregateFeatureArrays, getAnnotationFrameCoordinationValues,
+} from '@vitessce/utils';
 import {
   Scatterplot, ScatterplotTooltipSubscriber, ScatterplotOptions,
   getPointSizeDevicePixels,
   getPointOpacity,
+  useAnnotationFrameTransition,
 } from '@vitessce/scatterplot';
 import { Legend } from '@vitessce/legend';
-import { ViewType, COMPONENT_COORDINATION_TYPES, ViewHelpMapping } from '@vitessce/constants-internal';
+import {
+  ViewType, CoordinationType, COMPONENT_COORDINATION_TYPES, ViewHelpMapping,
+} from '@vitessce/constants-internal';
 import { DEFAULT_CONTOUR_PERCENTILES } from './constants.js';
 
 const DEFAULT_FEATURE_AGGREGATION_STRATEGY = 'first';
@@ -48,8 +54,11 @@ const DEFAULT_FEATURE_AGGREGATION_STRATEGY = 'first';
 /**
  * A subscriber component for the scatterplot.
  * @param {object} props
- * @param {number} props.uuid The unique identifier for this component, also used as its
- * view uid for looking up its coordination mapping via `useViewMapping`.
+ * @param {number} props.uuid The unique identifier for this component.
+ * @param {string} props.viewUid The uid of the corresponding view in the view config layout,
+ * used for looking up its coordination mapping via `useViewMapping`.
+ * Optional, defaults to `uuid`. Differs from `uuid` when rendered by a parent
+ * (e.g., the dual scatterplot) that renders multiple child scatterplots for one view.
  * @param {string} props.theme The current theme name.
  * @param {function} props.removeGridComponent The callback function to pass to TitleInfo,
  * to call when the component has been removed from the grid.
@@ -60,6 +69,7 @@ const DEFAULT_FEATURE_AGGREGATION_STRATEGY = 'first';
 export function EmbeddingScatterplotSubscriber(props) {
   const {
     uuid,
+    viewUid: viewUidFromProps,
     closeButtonVisible,
     downloadButtonVisible,
     removeGridComponent,
@@ -73,8 +83,11 @@ export function EmbeddingScatterplotSubscriber(props) {
     sampleSetSelection: sampleSetSelectionFromProps,
     // Circle scale factor:
     circleScaleFactor = 0.8,
+    // Passed down from the ancestor <Vitessce/> or <VitS/> component.
+    areAnnotationsEditable,
   } = props;
 
+  const viewUid = viewUidFromProps ?? uuid;
   const loaders = useLoaders();
   // useViewMapping looks up this view's coordination mapping directly from the
   // view config (by uuid), after accounting for meta-coordination, so there is
@@ -84,14 +97,14 @@ export function EmbeddingScatterplotSubscriber(props) {
   const [
     // eslint-disable-next-line no-unused-vars
     coordinationScopes, _coordinationScopesBy, coordinationValues,
-  ] = useViewMapping(uuid);
+  ] = useViewMapping(viewUid);
   const setComponentHover = useSetComponentHover();
   const setComponentViewInfo = useSetComponentViewInfo(uuid);
 
   // Merge the coordination values that the current annotation frame defines for this view
   // into the coordination space, whenever the frame changes. The story itself is read-only.
   // TODO: handle the rendering of alternative views/layouts (in vit-s?)
-  useAnnotationFrameCoordination(uuid, coordinationScopes, coordinationValues);
+  useAnnotationFrameCoordination(viewUid, coordinationScopes, coordinationValues);
 
   // Get "props" from the coordination space.
   const [{
@@ -122,6 +135,7 @@ export function EmbeddingScatterplotSubscriber(props) {
     featureValueColormap: geneExpressionColormap,
     featureValueColormapRange: geneExpressionColormapRange,
     tooltipsVisible,
+    tooltipObsSetsMode,
     sampleSetSelection: sampleSetSelectionFromCoordination,
     sampleSetColor,
     embeddingPointsVisible,
@@ -137,6 +151,7 @@ export function EmbeddingScatterplotSubscriber(props) {
     annotationSemanticZoom,
     annotationTransitionDuration,
     annotationEditable,
+    annotationFrameIndex,
   }, {
     setEmbeddingZoom: setZoom,
     setEmbeddingTargetX: setTargetX,
@@ -167,7 +182,14 @@ export function EmbeddingScatterplotSubscriber(props) {
     setAnnotationStory,
   }] = useCoordination(
     COMPONENT_COORDINATION_TYPES[ViewType.SCATTERPLOT], coordinationScopes,
-    coordinationValues, uuid,
+    coordinationValues, viewUid,
+  );
+
+  // Props for drawing annotation shapes in this view (while authoring the story
+  // via the annotation controller), and for highlighting the selected shape.
+  const annotationEditingProps = useAnnotationEditingForView(
+    viewUid,
+    Boolean(areAnnotationsEditable && annotationEditable && typeof annotationFrameIndex === 'number'),
   );
 
   const {
@@ -329,6 +351,10 @@ export function EmbeddingScatterplotSubscriber(props) {
   // cached results and cost nothing in that first commit.
   const deferredCellSetSelection = useDeferredValue(cellSetSelection);
   const deferredCellSetColor = useDeferredValue(cellSetColor);
+  // A lasso selection made while coloring by feature values also switches the
+  // encoding to set selection. Defer it with the selection and colors, so the
+  // points do not first show the previous selection's colors for every cell.
+  const deferredCellColorEncoding = useDeferredValue(cellColorEncoding);
   const deferredSampleSetSelection = useDeferredValue(sampleSetSelection);
 
   // Positional rather than keyed by observation ID: at atlas scale an ID-keyed color
@@ -439,6 +465,7 @@ export function EmbeddingScatterplotSubscriber(props) {
 
   const getObsInfo = useGetObsInfo(
     observationsLabel, obsLabelsTypes, obsLabelsData, obsSetsMembership,
+    cellSetSelection, tooltipObsSetsMode,
   );
 
   // With no set selection every observation counts as selected, matching the
@@ -591,6 +618,20 @@ export function EmbeddingScatterplotSubscriber(props) {
     obsSetsColumns,
   ]);
 
+  // Animate the 2D zoom/target when they change due to the current annotation frame.
+  const annotationFrameCoordinationValues = getAnnotationFrameCoordinationValues(
+    annotationStory, annotationFrameIndex, viewUid,
+  );
+  const annotationTransitionProps = useAnnotationFrameTransition(
+    { zoom, targetX, targetY },
+    {
+      zoom: annotationFrameCoordinationValues?.[CoordinationType.EMBEDDING_ZOOM],
+      targetX: annotationFrameCoordinationValues?.[CoordinationType.EMBEDDING_TARGET_X],
+      targetY: annotationFrameCoordinationValues?.[CoordinationType.EMBEDDING_TARGET_Y],
+    },
+    annotationTransitionDuration,
+  );
+
   const setViewState = ({ zoom: newZoom, target }) => {
     setZoom(newZoom);
     setTargetX(target[0]);
@@ -661,7 +702,7 @@ export function EmbeddingScatterplotSubscriber(props) {
         uuid={uuid}
         onSelectionBusy={setIsSelectionPending}
         theme={theme}
-        viewState={{ zoom, target: [targetX, targetY, targetZ] }}
+        viewState={{ zoom, target: [targetX, targetY, targetZ], ...annotationTransitionProps }}
         setViewState={setViewState}
         originalViewState={originalViewState}
         obsEmbeddingIndex={obsEmbeddingIndex}
@@ -678,7 +719,7 @@ export function EmbeddingScatterplotSubscriber(props) {
         setCellHighlight={setCellHighlight}
         cellRadius={cellRadius}
         cellOpacity={cellOpacity}
-        cellColorEncoding={cellColorEncoding}
+        cellColorEncoding={deferredCellColorEncoding}
         geneExpressionColormap={geneExpressionColormap}
         geneExpressionColormapRange={geneExpressionColormapRange}
         setComponentHover={() => {
@@ -711,6 +752,7 @@ export function EmbeddingScatterplotSubscriber(props) {
         annotationSemanticZoom={annotationSemanticZoom}
         annotationTransitionDuration={annotationTransitionDuration}
         annotationEditable={annotationEditable}
+        {...annotationEditingProps}
       />
       {tooltipsVisible && width && height ? (
         <ScatterplotTooltipSubscriber
@@ -728,7 +770,7 @@ export function EmbeddingScatterplotSubscriber(props) {
         theme={theme}
         featureType={featureType}
         featureValueType={featureValueType}
-        obsColorEncoding={cellColorEncoding}
+        obsColorEncoding={deferredCellColorEncoding}
         featureSelection={geneSelection}
         featureLabelsMap={featureLabelsMap}
         featureValueColormap={geneExpressionColormap}

package/src/EmbeddingScatterplotSubscriber.test.jsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { it, expect, vi } from 'vitest';
+import { render, act } from '@testing-library/react';
+import { Scatterplot } from '@vitessce/scatterplot';
+import { EmbeddingScatterplotSubscriber } from './EmbeddingScatterplotSubscriber.js';
+
+const state = vi.hoisted(() => ({
+  values: {}, setters: {}, index: [], embedding: null, sets: null,
+}));
+vi.mock('@vitessce/vit-s', () => ({
+  TitleInfo: ({ children }) => children,
+  useReady: () => true,
+  useUrls: () => [],
+  useDeckCanvasSize: () => [0, 0, null],
+  useUint8FeatureSelection: () => ({}),
+  useExpressionValueGetter: () => () => 0,
+  useGetObsInfo: () => () => ({}),
+  useObsEmbeddingData: () => [{ obsIndex: state.index, obsEmbedding: state.embedding }, 'success', [], null],
+  useObsSetsData: () => [{ obsSets: state.sets }, 'success', [], null],
+  useAnnotationStoryData: () => [{}, 'success', [], null],
+  useAnnotationFrameCoordination: () => {},
+  useAnnotationEditingForView: () => ({}),
+  useFeatureSelection: () => [null, [], 'success', []],
+  useObsFeatureMatrixIndices: () => [{ obsIndex: state.index }, 'success', [], null],
+  useFeatureLabelsData: () => [{}, 'success', [], null],
+  useMultiObsLabels: () => [[], [], [], [], []],
+  useSampleSetsData: () => [{}, 'success', [], null],
+  useSampleEdgesData: () => [{}, 'success', [], null],
+  useCoordination: () => [state.values, state.setters],
+  useLoaders: () => ({}),
+  useSetComponentHover: () => () => {},
+  useSetComponentViewInfo: () => () => {},
+  useInitialCoordination: () => ({ embeddingZoom: 0, embeddingTargetX: 0, embeddingTargetY: 0 }),
+  useExpandedFeatureLabelsMap: () => [null, 'success'],
+  useViewMapping: () => [{}, {}, {}],
+}));
+vi.mock('@vitessce/scatterplot', () => ({
+  Scatterplot: vi.fn(() => null),
+  ScatterplotTooltipSubscriber: () => null,
+  ScatterplotOptions: () => null,
+  getPointSizeDevicePixels: () => 1,
+  getPointOpacity: () => 1,
+  useAnnotationFrameTransition: () => ({}),
+}));
+vi.mock('@vitessce/legend', () => ({ Legend: () => null }));
+
+it('switches from feature value coloring to a lasso selection without showing the previous selection', () => {
+  state.index = Array.from({ length: 1000 }, (_, i) => `cell-${i}`);
+  state.embedding = {
+    shape: [2, state.index.length],
+    data: [
+      Float32Array.from(state.index, (_, i) => i % 32),
+      Float32Array.from(state.index, (_, i) => Math.floor(i / 32)),
+    ],
+  };
+  state.sets = {
+    version: '0.1.3',
+    tree: [{
+      name: 'Types',
+      children: [{ name: 'All', set: state.index.map(id => [id, null]) }],
+    }],
+  };
+  // Coloring by feature values, with a previous set selection still stored.
+  state.values = {
+    dataset: 'A',
+    obsType: 'cell',
+    embeddingType: 'UMAP',
+    embeddingZoom: 0,
+    embeddingTargetX: 0,
+    embeddingTargetY: 0,
+    embeddingPointsVisible: true,
+    embeddingContoursVisible: false,
+    obsSetSelection: [['Types', 'All']],
+    additionalObsSets: null,
+    obsSetColor: [{ path: ['Types', 'All'], color: [0, 0, 255] }],
+    obsColorEncoding: 'geneSelection',
+  };
+  state.setters = Object.fromEntries([
+    'AdditionalObsSets', 'ObsSetSelection', 'ObsSetColor', 'ObsColorEncoding',
+  ].map(name => [`set${name}`, (value) => {
+    state.values = { ...state.values, [name[0].toLowerCase() + name.slice(1)]: value };
+  }]));
+  const props = { uuid: 'umap', theme: 'dark' };
+  const { rerender } = render(<EmbeddingScatterplotSubscriber {...props} />);
+  const initialColorIndices = Scatterplot.mock.lastCall[0].obsColorIndices;
+  const currentSelect = Scatterplot.mock.lastCall[0].setCellSelection;
+  Scatterplot.mockClear();
+
+  act(() => {
+    // The same callback the selection layer calls after its hit test.
+    currentSelect(state.index.slice(0, 600));
+    rerender(<EmbeddingScatterplotSubscriber {...props} />);
+  });
+
+  const lastPlot = Scatterplot.mock.lastCall[0];
+  expect(lastPlot.cellColorEncoding).toEqual('cellSetSelection');
+  expect(lastPlot.obsColorIndices).not.toBe(initialColorIndices);
+  // Set selection coloring is only shown together with the new colors. Showing
+  // it with the previous colors would color every cell by the previous selection.
+  Scatterplot.mock.calls.forEach(([plot]) => {
+    if (plot.cellColorEncoding === 'cellSetSelection') {
+      expect(plot.obsSetSelection).toEqual(state.values.obsSetSelection);
+    }
+  });
+});