@vitessce/scatterplot-embedding 2.0.3-beta.0 → 2.0.3

package/dist/raw.779e896c.mjs

@@ -0,0 +1,12 @@
+import { B as BaseDecoder } from "./index.30ffff67.mjs";
+import "react";
+import "@vitessce/vit-s";
+import "react-dom";
+class RawDecoder extends BaseDecoder {
+  decodeBlock(buffer) {
+    return buffer;
+  }
+}
+export {
+  RawDecoder as default
+};

package/dist/webimage.53b96d4c.mjs

@@ -0,0 +1,32 @@
+import { B as BaseDecoder } from "./index.30ffff67.mjs";
+import "react";
+import "@vitessce/vit-s";
+import "react-dom";
+class WebImageDecoder extends BaseDecoder {
+  constructor() {
+    super();
+    if (typeof createImageBitmap === "undefined") {
+      throw new Error("Cannot decode WebImage as `createImageBitmap` is not available");
+    } else if (typeof document === "undefined" && typeof OffscreenCanvas === "undefined") {
+      throw new Error("Cannot decode WebImage as neither `document` nor `OffscreenCanvas` is not available");
+    }
+  }
+  async decode(fileDirectory, buffer) {
+    const blob = new Blob([buffer]);
+    const imageBitmap = await createImageBitmap(blob);
+    let canvas;
+    if (typeof document !== "undefined") {
+      canvas = document.createElement("canvas");
+      canvas.width = imageBitmap.width;
+      canvas.height = imageBitmap.height;
+    } else {
+      canvas = new OffscreenCanvas(imageBitmap.width, imageBitmap.height);
+    }
+    const ctx = canvas.getContext("2d");
+    ctx.drawImage(imageBitmap, 0, 0);
+    return ctx.getImageData(0, 0, imageBitmap.width, imageBitmap.height).data.buffer;
+  }
+}
+export {
+  WebImageDecoder as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/scatterplot-embedding",
-  "version": "2.0.3-beta.0",
+  "version": "2.0.3",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -8,20 +8,21 @@
     "url": "git+https://github.com/vitessce/vitessce.git"
   },
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "dist/index.mjs",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "dependencies": {
     "@material-ui/core": "~4.12.3",
     "d3-array": "^2.4.0",
     "lodash": "^4.17.21",
     "plur": "^5.1.0",
-    "@vitessce/sets-utils": "2.0.3-beta.0",
-    "@vitessce/constants-internal": "2.0.3-beta.0",
-    "@vitessce/scatterplot": "2.0.3-beta.0",
-    "@vitessce/vit-s": "2.0.3-beta.0",
-    "@vitessce/utils": "2.0.3-beta.0"
+    "@vitessce/constants-internal": "2.0.3",
+    "@vitessce/scatterplot": "2.0.3",
+    "@vitessce/sets-utils": "2.0.3",
+    "@vitessce/utils": "2.0.3",
+    "@vitessce/vit-s": "2.0.3"
   },
   "devDependencies": {
     "react": "^18.0.0",
@@ -32,8 +33,7 @@
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "scripts": {
-    "start": "tsc --watch",
-    "build": "tsc",
+    "bundle": "pnpm exec vite build -c ../../../scripts/vite.config.js",
     "test": "pnpm exec vitest --run -r ../../../ --dir ."
   }
 }

package/src/EmbeddingScatterplotOptions.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import TableCell from '@material-ui/core/TableCell';
+import TableRow from '@material-ui/core/TableRow';
+import { usePlotOptionsStyles, OptionSelect } from '@vitessce/vit-s';
+
+export default function EmbeddingScatterplotOptions(props) {
+  const {
+    mappingSelectEnabled,
+    mappings,
+    selectedMapping,
+    setSelectedMapping,
+  } = props;
+
+  const classes = usePlotOptionsStyles();
+
+  // Handlers for custom option field changes.
+  const handleSelectedMappingChange = (event) => {
+    setSelectedMapping(event.target.value);
+  };
+
+  return mappingSelectEnabled
+    ? (
+      <TableRow key="mapping-option-row">
+        <TableCell className={classes.labelCell}>
+          Embedding Type
+        </TableCell>
+        <TableCell className={classes.inputCell}>
+          <OptionSelect
+            key="scatterplot-mapping-select"
+            className={classes.select}
+            value={selectedMapping}
+            onChange={handleSelectedMappingChange}
+            inputProps={{
+              id: 'scatterplot-mapping-select',
+            }}
+          >
+            {mappings.map(name => (
+              <option key={name} value={name}>
+                {name}
+              </option>
+            ))}
+          </OptionSelect>
+        </TableCell>
+      </TableRow>
+    )
+    : null;
+}

package/src/EmbeddingScatterplotSubscriber.js

@@ -0,0 +1,361 @@
+import React, {
+  useState, useEffect, useCallback, useMemo,
+} from 'react';
+import { extent } from 'd3-array';
+import isEqual from 'lodash/isEqual';
+import plur from 'plur';
+import {
+  TitleInfo,
+  registerPluginViewType,
+  useReady, useUrls,
+  useDeckCanvasSize,
+  useExpressionValueGetter, useGetObsInfo,
+  useObsEmbeddingData,
+  useObsSetsData,
+  useFeatureSelection,
+  useObsFeatureMatrixIndices,
+  useMultiObsLabels,
+  useCoordination,
+  useLoaders,
+  useSetComponentHover,
+  useSetComponentViewInfo,
+} from '@vitessce/vit-s';
+import { setObsSelection, mergeObsSets, getCellSetPolygons } from '@vitessce/sets-utils';
+import { getCellColors, commaNumber } from '@vitessce/utils';
+import {
+  Scatterplot, ScatterplotTooltipSubscriber, ScatterplotOptions,
+  getPointSizeDevicePixels,
+  getPointOpacity,
+} from '@vitessce/scatterplot';
+import { ViewType, COMPONENT_COORDINATION_TYPES } from '@vitessce/constants-internal';
+
+/**
+ * A subscriber component for the scatterplot.
+ * @param {object} props
+ * @param {number} props.uuid The unique identifier for this component.
+ * @param {string} props.theme The current theme name.
+ * @param {object} props.coordinationScopes The mapping from coordination types to coordination
+ * scopes.
+ * @param {boolean} props.disableTooltip Should the tooltip be disabled?
+ * @param {function} props.removeGridComponent The callback function to pass to TitleInfo,
+ * to call when the component has been removed from the grid.
+ * @param {string} props.title An override value for the component title.
+ * @param {number} props.averageFillDensity Override the average fill density calculation
+ * when using dynamic opacity mode.
+ */
+export function EmbeddingScatterplotSubscriber(props) {
+  const {
+    uuid,
+    coordinationScopes,
+    removeGridComponent,
+    theme,
+    disableTooltip = false,
+    observationsLabelOverride,
+    title: titleOverride,
+    // Average fill density for dynamic opacity calculation.
+    averageFillDensity,
+  } = props;
+
+  const loaders = useLoaders();
+  const setComponentHover = useSetComponentHover();
+  const setComponentViewInfo = useSetComponentViewInfo(uuid);
+
+  // Get "props" from the coordination space.
+  const [{
+    dataset,
+    obsType,
+    featureType,
+    featureValueType,
+    embeddingZoom: zoom,
+    embeddingTargetX: targetX,
+    embeddingTargetY: targetY,
+    embeddingTargetZ: targetZ,
+    embeddingType: mapping,
+    obsFilter: cellFilter,
+    obsHighlight: cellHighlight,
+    featureSelection: geneSelection,
+    obsSetSelection: cellSetSelection,
+    obsSetColor: cellSetColor,
+    obsColorEncoding: cellColorEncoding,
+    additionalObsSets: additionalCellSets,
+    embeddingObsSetPolygonsVisible: cellSetPolygonsVisible,
+    embeddingObsSetLabelsVisible: cellSetLabelsVisible,
+    embeddingObsSetLabelSize: cellSetLabelSize,
+    embeddingObsRadius: cellRadiusFixed,
+    embeddingObsRadiusMode: cellRadiusMode,
+    embeddingObsOpacity: cellOpacityFixed,
+    embeddingObsOpacityMode: cellOpacityMode,
+    featureValueColormap: geneExpressionColormap,
+    featureValueColormapRange: geneExpressionColormapRange,
+  }, {
+    setEmbeddingZoom: setZoom,
+    setEmbeddingTargetX: setTargetX,
+    setEmbeddingTargetY: setTargetY,
+    setEmbeddingTargetZ: setTargetZ,
+    setObsFilter: setCellFilter,
+    setObsSetSelection: setCellSetSelection,
+    setObsHighlight: setCellHighlight,
+    setObsSetColor: setCellSetColor,
+    setObsColorEncoding: setCellColorEncoding,
+    setAdditionalObsSets: setAdditionalCellSets,
+    setEmbeddingObsSetPolygonsVisible: setCellSetPolygonsVisible,
+    setEmbeddingObsSetLabelsVisible: setCellSetLabelsVisible,
+    setEmbeddingObsSetLabelSize: setCellSetLabelSize,
+    setEmbeddingObsRadius: setCellRadiusFixed,
+    setEmbeddingObsRadiusMode: setCellRadiusMode,
+    setEmbeddingObsOpacity: setCellOpacityFixed,
+    setEmbeddingObsOpacityMode: setCellOpacityMode,
+    setFeatureValueColormap: setGeneExpressionColormap,
+    setFeatureValueColormapRange: setGeneExpressionColormapRange,
+  }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.SCATTERPLOT], coordinationScopes);
+
+  const observationsLabel = observationsLabelOverride || obsType;
+
+  const [urls, addUrl] = useUrls(loaders, dataset);
+  const [width, height, deckRef] = useDeckCanvasSize();
+
+  const title = titleOverride || `Scatterplot (${mapping})`;
+
+  const [obsLabelsTypes, obsLabelsData] = useMultiObsLabels(
+    coordinationScopes, obsType, loaders, dataset, addUrl,
+  );
+
+  // Get data from loaders using the data hooks.
+  const [{ obsIndex: obsEmbeddingIndex, obsEmbedding }, obsEmbeddingStatus] = useObsEmbeddingData(
+    loaders, dataset, addUrl, true, {}, {},
+    { obsType, embeddingType: mapping },
+  );
+  const cellsCount = obsEmbeddingIndex?.length || 0;
+  const [{ obsSets: cellSets, obsSetsMembership }, obsSetsStatus] = useObsSetsData(
+    loaders, dataset, addUrl, false,
+    { setObsSetSelection: setCellSetSelection, setObsSetColor: setCellSetColor },
+    { obsSetSelection: cellSetSelection, obsSetColor: cellSetColor },
+    { obsType },
+  );
+  // eslint-disable-next-line no-unused-vars
+  const [expressionData, loadedFeatureSelection, featureSelectionStatus] = useFeatureSelection(
+    loaders, dataset, false, geneSelection,
+    { obsType, featureType, featureValueType },
+  );
+  const [{ obsIndex: matrixObsIndex }, matrixIndicesStatus] = useObsFeatureMatrixIndices(
+    loaders, dataset, addUrl, false,
+    { obsType, featureType, featureValueType },
+  );
+
+  const isReady = useReady([
+    obsEmbeddingStatus,
+    obsSetsStatus,
+    featureSelectionStatus,
+    matrixIndicesStatus,
+  ]);
+
+  const [dynamicCellRadius, setDynamicCellRadius] = useState(cellRadiusFixed);
+  const [dynamicCellOpacity, setDynamicCellOpacity] = useState(cellOpacityFixed);
+
+  const mergedCellSets = useMemo(() => mergeObsSets(
+    cellSets, additionalCellSets,
+  ), [cellSets, additionalCellSets]);
+
+  const setCellSelectionProp = useCallback((v) => {
+    setObsSelection(
+      v, additionalCellSets, cellSetColor,
+      setCellSetSelection, setAdditionalCellSets, setCellSetColor,
+      setCellColorEncoding,
+    );
+  }, [additionalCellSets, cellSetColor, setCellColorEncoding,
+    setAdditionalCellSets, setCellSetColor, setCellSetSelection]);
+
+  const cellColors = useMemo(() => getCellColors({
+    cellColorEncoding,
+    expressionData: expressionData && expressionData[0],
+    geneSelection,
+    cellSets: mergedCellSets,
+    cellSetSelection,
+    cellSetColor,
+    obsIndex: matrixObsIndex,
+    theme,
+  }), [cellColorEncoding, geneSelection, mergedCellSets, theme,
+    cellSetSelection, cellSetColor, expressionData, matrixObsIndex]);
+
+  // cellSetPolygonCache is an array of tuples like [(key0, val0), (key1, val1), ...],
+  // where the keys are cellSetSelection arrays.
+  const [cellSetPolygonCache, setCellSetPolygonCache] = useState([]);
+  const cacheHas = (cache, key) => cache.findIndex(el => isEqual(el[0], key)) !== -1;
+  const cacheGet = (cache, key) => cache.find(el => isEqual(el[0], key))?.[1];
+  const cellSetPolygons = useMemo(() => {
+    if ((cellSetLabelsVisible || cellSetPolygonsVisible)
+      && !cacheHas(cellSetPolygonCache, cellSetSelection)
+      && mergedCellSets?.tree?.length
+      && obsEmbedding
+      && obsEmbeddingIndex
+      && cellSetColor?.length) {
+      const newCellSetPolygons = getCellSetPolygons({
+        obsIndex: obsEmbeddingIndex,
+        obsEmbedding,
+        cellSets: mergedCellSets,
+        cellSetSelection,
+        cellSetColor,
+        theme,
+      });
+      setCellSetPolygonCache(cache => [...cache, [cellSetSelection, newCellSetPolygons]]);
+      return newCellSetPolygons;
+    }
+    return cacheGet(cellSetPolygonCache, cellSetSelection) || [];
+  }, [cellSetPolygonsVisible, cellSetPolygonCache, cellSetLabelsVisible, theme,
+    obsEmbeddingIndex, obsEmbedding, mergedCellSets, cellSetSelection, cellSetColor]);
+
+
+  const cellSelection = useMemo(() => Array.from(cellColors.keys()), [cellColors]);
+
+  const [xRange, yRange, xExtent, yExtent, numCells] = useMemo(() => {
+    if (obsEmbedding && obsEmbedding.data && obsEmbedding.shape) {
+      const cellCount = obsEmbedding.shape[1];
+      const xE = extent(obsEmbedding.data[0]);
+      const yE = extent(obsEmbedding.data[1]);
+      const xR = xE[1] - xE[0];
+      const yR = yE[1] - yE[0];
+      return [xR, yR, xE, yE, cellCount];
+    }
+    return [null, null, null, null, null];
+  }, [obsEmbedding]);
+
+  // After cells have loaded or changed,
+  // compute the cell radius scale based on the
+  // extents of the cell coordinates on the x/y axes.
+  useEffect(() => {
+    if (xRange && yRange) {
+      const pointSizeDevicePixels = getPointSizeDevicePixels(
+        window.devicePixelRatio, zoom, xRange, yRange, width, height,
+      );
+      setDynamicCellRadius(pointSizeDevicePixels);
+
+      const nextCellOpacityScale = getPointOpacity(
+        zoom, xRange, yRange, width, height, numCells, averageFillDensity,
+      );
+      setDynamicCellOpacity(nextCellOpacityScale);
+
+      if (typeof targetX !== 'number' || typeof targetY !== 'number') {
+        const newTargetX = xExtent[0] + xRange / 2;
+        const newTargetY = yExtent[0] + yRange / 2;
+        const newZoom = Math.log2(Math.min(width / xRange, height / yRange));
+        setTargetX(newTargetX);
+        // Graphics rendering has the y-axis going south so we need to multiply by negative one.
+        setTargetY(-newTargetY);
+        setZoom(newZoom);
+      }
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [xRange, yRange, xExtent, yExtent, numCells,
+    width, height, zoom, averageFillDensity]);
+
+  const getObsInfo = useGetObsInfo(
+    observationsLabel, obsLabelsTypes, obsLabelsData, obsSetsMembership,
+  );
+
+  const cellSelectionSet = useMemo(() => new Set(cellSelection), [cellSelection]);
+  const getCellIsSelected = useCallback((object, { index }) => (
+    (cellSelectionSet || new Set([])).has(obsEmbeddingIndex[index]) ? 1.0 : 0.0
+  ), [cellSelectionSet, obsEmbeddingIndex]);
+
+  const cellRadius = (cellRadiusMode === 'manual' ? cellRadiusFixed : dynamicCellRadius);
+  const cellOpacity = (cellOpacityMode === 'manual' ? cellOpacityFixed : dynamicCellOpacity);
+
+  // Set up a getter function for gene expression values, to be used
+  // by the DeckGL layer to obtain values for instanced attributes.
+  const getExpressionValue = useExpressionValueGetter({
+    instanceObsIndex: obsEmbeddingIndex,
+    matrixObsIndex,
+    expressionData,
+  });
+
+  return (
+    <TitleInfo
+      title={title}
+      info={`${commaNumber(cellsCount)} ${plur(observationsLabel, cellsCount)}`}
+      removeGridComponent={removeGridComponent}
+      urls={urls}
+      theme={theme}
+      isReady={isReady}
+      options={(
+        <ScatterplotOptions
+          observationsLabel={observationsLabel}
+          cellRadius={cellRadiusFixed}
+          setCellRadius={setCellRadiusFixed}
+          cellRadiusMode={cellRadiusMode}
+          setCellRadiusMode={setCellRadiusMode}
+          cellOpacity={cellOpacityFixed}
+          setCellOpacity={setCellOpacityFixed}
+          cellOpacityMode={cellOpacityMode}
+          setCellOpacityMode={setCellOpacityMode}
+          cellSetLabelsVisible={cellSetLabelsVisible}
+          setCellSetLabelsVisible={setCellSetLabelsVisible}
+          cellSetLabelSize={cellSetLabelSize}
+          setCellSetLabelSize={setCellSetLabelSize}
+          cellSetPolygonsVisible={cellSetPolygonsVisible}
+          setCellSetPolygonsVisible={setCellSetPolygonsVisible}
+          cellColorEncoding={cellColorEncoding}
+          setCellColorEncoding={setCellColorEncoding}
+          geneExpressionColormap={geneExpressionColormap}
+          setGeneExpressionColormap={setGeneExpressionColormap}
+          geneExpressionColormapRange={geneExpressionColormapRange}
+          setGeneExpressionColormapRange={setGeneExpressionColormapRange}
+        />
+      )}
+    >
+      <Scatterplot
+        ref={deckRef}
+        uuid={uuid}
+        theme={theme}
+        viewState={{ zoom, target: [targetX, targetY, targetZ] }}
+        setViewState={({ zoom: newZoom, target }) => {
+          setZoom(newZoom);
+          setTargetX(target[0]);
+          setTargetY(target[1]);
+          setTargetZ(target[2] || 0);
+        }}
+        obsEmbeddingIndex={obsEmbeddingIndex}
+        obsEmbedding={obsEmbedding}
+        cellFilter={cellFilter}
+        cellSelection={cellSelection}
+        cellHighlight={cellHighlight}
+        cellColors={cellColors}
+        cellSetPolygons={cellSetPolygons}
+        cellSetLabelSize={cellSetLabelSize}
+        cellSetLabelsVisible={cellSetLabelsVisible}
+        cellSetPolygonsVisible={cellSetPolygonsVisible}
+        setCellFilter={setCellFilter}
+        setCellSelection={setCellSelectionProp}
+        setCellHighlight={setCellHighlight}
+        cellRadius={cellRadius}
+        cellOpacity={cellOpacity}
+        cellColorEncoding={cellColorEncoding}
+        geneExpressionColormap={geneExpressionColormap}
+        geneExpressionColormapRange={geneExpressionColormapRange}
+        setComponentHover={() => {
+          setComponentHover(uuid);
+        }}
+        updateViewInfo={setComponentViewInfo}
+        getExpressionValue={getExpressionValue}
+        getCellIsSelected={getCellIsSelected}
+
+      />
+      {!disableTooltip && (
+      <ScatterplotTooltipSubscriber
+        parentUuid={uuid}
+        obsHighlight={cellHighlight}
+        width={width}
+        height={height}
+        getObsInfo={getObsInfo}
+      />
+      )}
+    </TitleInfo>
+  );
+}
+
+export function register() {
+  registerPluginViewType(
+    ViewType.SCATTERPLOT,
+    EmbeddingScatterplotSubscriber,
+    COMPONENT_COORDINATION_TYPES[ViewType.SCATTERPLOT],
+  );
+}

package/src/index.js

@@ -0,0 +1 @@
+export { EmbeddingScatterplotSubscriber, register } from './EmbeddingScatterplotSubscriber';

package/dist/EmbeddingScatterplotOptions.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import TableCell from '@material-ui/core/TableCell';
-import TableRow from '@material-ui/core/TableRow';
-import { usePlotOptionsStyles, OptionSelect } from '@vitessce/vit-s';
-export default function EmbeddingScatterplotOptions(props) {
-    const { mappingSelectEnabled, mappings, selectedMapping, setSelectedMapping, } = props;
-    const classes = usePlotOptionsStyles();
-    // Handlers for custom option field changes.
-    const handleSelectedMappingChange = (event) => {
-        setSelectedMapping(event.target.value);
-    };
-    return mappingSelectEnabled
-        ? (_jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, children: "Embedding Type" }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(OptionSelect, { className: classes.select, value: selectedMapping, onChange: handleSelectedMappingChange, inputProps: {
-                            id: 'scatterplot-mapping-select',
-                        }, children: mappings.map(name => (_jsx("option", { value: name, children: name }, name))) }, "scatterplot-mapping-select") })] }, "mapping-option-row"))
-        : null;
-}