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

package/dist/raw-09626c2a.js

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

package/dist/webimage-d82eb077.js

@@ -0,0 +1,32 @@
+import { B as BaseDecoder } from "./index-50142996.js";
+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/dist-tsc/EmbeddingScatterplotOptions.d.ts

@@ -0,0 +1,2 @@
+export default function EmbeddingScatterplotOptions(props: any): JSX.Element | null;
+//# sourceMappingURL=EmbeddingScatterplotOptions.d.ts.map

package/dist-tsc/EmbeddingScatterplotOptions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmbeddingScatterplotOptions.d.ts","sourceRoot":"","sources":["../src/EmbeddingScatterplotOptions.js"],"names":[],"mappings":"AAIA,oFAyCC"}

package/{dist → dist-tsc}/EmbeddingScatterplotOptions.js

@@ -1,7 +1,6 @@
 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 { TableCell, TableRow } from '@material-ui/core';
 import { usePlotOptionsStyles, OptionSelect } from '@vitessce/vit-s';
 export default function EmbeddingScatterplotOptions(props) {
     const { mappingSelectEnabled, mappings, selectedMapping, setSelectedMapping, } = props;

package/dist-tsc/EmbeddingScatterplotSubscriber.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 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 {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: {
+    uuid: number;
+    theme: string;
+    coordinationScopes: object;
+    removeGridComponent: Function;
+    title: string;
+    averageFillDensity: number;
+}): JSX.Element;
+//# sourceMappingURL=EmbeddingScatterplotSubscriber.d.ts.map

package/dist-tsc/EmbeddingScatterplotSubscriber.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmbeddingScatterplotSubscriber.d.ts","sourceRoot":"","sources":["../src/EmbeddingScatterplotSubscriber.js"],"names":[],"mappings":"AAkCA;;;;;;;;;;;;GAYG;AACH;IAVyB,IAAI,EAAlB,MAAM;IACQ,KAAK,EAAnB,MAAM;IACQ,kBAAkB,EAAhC,MAAM;IAEU,mBAAmB;IAErB,KAAK,EAAnB,MAAM;IACQ,kBAAkB,EAAhC,MAAM;gBA4VhB"}

package/{dist → dist-tsc}/EmbeddingScatterplotSubscriber.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useEffect, useCallback, useMemo, } from 'react';
 import { extent } from 'd3-array';
-import isEqual from 'lodash/isEqual';
+import { isEqual } from 'lodash-es';
 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 { TitleInfo, useReady, useUrls, useDeckCanvasSize, useUint8FeatureSelection, useExpressionValueGetter, useGetObsInfo, useObsEmbeddingData, useObsSetsData, useFeatureSelection, useObsFeatureMatrixIndices, useFeatureLabelsData, 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 { Legend } from '@vitessce/legend';
 import { ViewType, COMPONENT_COORDINATION_TYPES } from '@vitessce/constants-internal';
 /**
  * A subscriber component for the scatterplot.
@@ -15,7 +16,6 @@ import { ViewType, COMPONENT_COORDINATION_TYPES } from '@vitessce/constants-inte
  * @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.
@@ -23,14 +23,14 @@ import { ViewType, COMPONENT_COORDINATION_TYPES } from '@vitessce/constants-inte
  * when using dynamic opacity mode.
  */
 export function EmbeddingScatterplotSubscriber(props) {
-    const { uuid, coordinationScopes, removeGridComponent, theme, disableTooltip = false, observationsLabelOverride, title: titleOverride, 
+    const { uuid, coordinationScopes, removeGridComponent, theme, 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 [{ 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, tooltipsVisible, }, { 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, setTooltipsVisible, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.SCATTERPLOT], coordinationScopes);
     const observationsLabel = observationsLabelOverride || obsType;
     const [urls, addUrl] = useUrls(loaders, dataset);
     const [width, height, deckRef] = useDeckCanvasSize();
@@ -43,30 +43,30 @@ export function EmbeddingScatterplotSubscriber(props) {
     // 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 [{ featureLabelsMap }, featureLabelsStatus] = useFeatureLabelsData(loaders, dataset, addUrl, false, {}, {}, { featureType });
     const isReady = useReady([
         obsEmbeddingStatus,
         obsSetsStatus,
         featureSelectionStatus,
+        featureLabelsStatus,
         matrixIndicesStatus,
     ]);
     const [dynamicCellRadius, setDynamicCellRadius] = useState(cellRadiusFixed);
     const [dynamicCellOpacity, setDynamicCellOpacity] = useState(cellOpacityFixed);
+    const [originalViewState, setOriginalViewState] = useState(null);
     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]);
+    }), [mergedCellSets, theme,
+        cellSetSelection, cellSetColor, matrixObsIndex]);
     // cellSetPolygonCache is an array of tuples like [(key0, val0), (key1, val1), ...],
     // where the keys are cellSetSelection arrays.
     const [cellSetPolygonCache, setCellSetPolygonCache] = useState([]);
@@ -109,12 +109,21 @@ export function EmbeddingScatterplotSubscriber(props) {
     // compute the cell radius scale based on the
     // extents of the cell coordinates on the x/y axes.
     useEffect(() => {
-        if (xRange && yRange) {
+        // We do not really need isReady here, since the above useMemo that
+        // computes xRange and yRange will only run after obsEmbedding has loaded anyway.
+        // However, we include it here to ensure this effect waits as long as possible to run;
+        // For some reason, otherwise, in some cases this effect will run before the react-grid-layout
+        // initialization animation has finished,
+        // prior to `height` and `width` reaching their ultimate values, resulting in
+        // an initial viewState for that small view size, which looks bad.
+        if (xRange && yRange && isReady) {
             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') {
+                // The view config did not define an initial viewState so
+                // we calculate one based on the data and set it.
                 const newTargetX = xExtent[0] + xRange / 2;
                 const newTargetY = yExtent[0] + yRange / 2;
                 const newZoom = Math.log2(Math.min(width / xRange, height / yRange));
@@ -122,32 +131,37 @@ export function EmbeddingScatterplotSubscriber(props) {
                 // Graphics rendering has the y-axis going south so we need to multiply by negative one.
                 setTargetY(-newTargetY);
                 setZoom(newZoom);
+                setOriginalViewState({ target: [newTargetX, -newTargetY, 0], zoom: newZoom });
+            }
+            else if (!originalViewState) {
+                // originalViewState has not yet been set and
+                // the view config defined an initial viewState.
+                setOriginalViewState({ target: [targetX, targetY, 0], zoom });
             }
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [xRange, yRange, xExtent, yExtent, numCells,
+    }, [xRange, yRange, isReady, 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);
+    const [uint8ExpressionData, expressionExtents] = useUint8FeatureSelection(expressionData);
     // 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,
+        expressionData: uint8ExpressionData,
     });
-    return (_jsxs(TitleInfo, { title: title, info: `${commaNumber(cellsCount)} ${plur(observationsLabel, cellsCount)}`, removeGridComponent: removeGridComponent, urls: urls, theme: theme, isReady: isReady, options: (_jsx(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 })), children: [_jsx(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: () => {
+    const setViewState = ({ zoom: newZoom, target }) => {
+        setZoom(newZoom);
+        setTargetX(target[0]);
+        setTargetY(target[1]);
+        setTargetZ(target[2] || 0);
+    };
+    return (_jsxs(TitleInfo, { title: title, info: `${commaNumber(cellsCount)} ${plur(observationsLabel, cellsCount)}`, removeGridComponent: removeGridComponent, urls: urls, theme: theme, isReady: isReady, options: (_jsx(ScatterplotOptions, { observationsLabel: observationsLabel, cellRadius: cellRadiusFixed, setCellRadius: setCellRadiusFixed, cellRadiusMode: cellRadiusMode, setCellRadiusMode: setCellRadiusMode, cellOpacity: cellOpacityFixed, setCellOpacity: setCellOpacityFixed, cellOpacityMode: cellOpacityMode, setCellOpacityMode: setCellOpacityMode, cellSetLabelsVisible: cellSetLabelsVisible, setCellSetLabelsVisible: setCellSetLabelsVisible, tooltipsVisible: tooltipsVisible, setTooltipsVisible: setTooltipsVisible, cellSetLabelSize: cellSetLabelSize, setCellSetLabelSize: setCellSetLabelSize, cellSetPolygonsVisible: cellSetPolygonsVisible, setCellSetPolygonsVisible: setCellSetPolygonsVisible, cellColorEncoding: cellColorEncoding, setCellColorEncoding: setCellColorEncoding, geneExpressionColormap: geneExpressionColormap, setGeneExpressionColormap: setGeneExpressionColormap, geneExpressionColormapRange: geneExpressionColormapRange, setGeneExpressionColormapRange: setGeneExpressionColormapRange })), children: [_jsx(Scatterplot, { ref: deckRef, uuid: uuid, theme: theme, viewState: { zoom, target: [targetX, targetY, targetZ] }, setViewState: setViewState, originalViewState: originalViewState, 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 && (_jsx(ScatterplotTooltipSubscriber, { parentUuid: uuid, obsHighlight: cellHighlight, width: width, height: height, getObsInfo: getObsInfo }))] }));
-}
-export function register() {
-    registerPluginViewType(ViewType.SCATTERPLOT, EmbeddingScatterplotSubscriber, COMPONENT_COORDINATION_TYPES[ViewType.SCATTERPLOT]);
+                }, updateViewInfo: setComponentViewInfo, getExpressionValue: getExpressionValue, getCellIsSelected: getCellIsSelected }), tooltipsVisible && (_jsx(ScatterplotTooltipSubscriber, { parentUuid: uuid, obsHighlight: cellHighlight, width: width, height: height, getObsInfo: getObsInfo })), _jsx(Legend, { visible: true, theme: theme, featureType: featureType, featureValueType: featureValueType, obsColorEncoding: cellColorEncoding, featureSelection: geneSelection, featureLabelsMap: featureLabelsMap, featureValueColormap: geneExpressionColormap, featureValueColormapRange: geneExpressionColormapRange, extent: expressionExtents?.[0] })] }));
 }

package/dist-tsc/index.d.ts

@@ -0,0 +1,2 @@
+export { EmbeddingScatterplotSubscriber } from "./EmbeddingScatterplotSubscriber.js";
+//# sourceMappingURL=index.d.ts.map

package/dist-tsc/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.js"],"names":[],"mappings":""}

package/dist-tsc/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/scatterplot-embedding",
-  "version": "2.0.3-beta.0",
+  "version": "3.0.0",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -8,32 +8,42 @@
     "url": "git+https://github.com/vitessce/vitessce.git"
   },
   "license": "MIT",
+  "type": "module",
   "main": "dist/index.js",
   "files": [
-    "dist"
+    "src",
+    "dist",
+    "dist-tsc"
   ],
   "dependencies": {
     "@material-ui/core": "~4.12.3",
     "d3-array": "^2.4.0",
-    "lodash": "^4.17.21",
+    "lodash-es": "^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": "3.0.0",
+    "@vitessce/legend": "3.0.0",
+    "@vitessce/scatterplot": "3.0.0",
+    "@vitessce/sets-utils": "3.0.0",
+    "@vitessce/utils": "3.0.0",
+    "@vitessce/vit-s": "3.0.0"
   },
   "devDependencies": {
     "react": "^18.0.0",
-    "vite": "^3.0.0",
+    "vite": "^4.3.0",
     "vitest": "^0.23.4"
   },
   "peerDependencies": {
     "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 ."
+  },
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist-tsc/index.d.ts",
+      "import": "./dist/index.js"
+    }
   }
 }

package/src/EmbeddingScatterplotOptions.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { TableCell, TableRow } from '@material-ui/core';
+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;
+}