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

package/dist/raw-424e77e0.js

@@ -0,0 +1,12 @@
+import { B as BaseDecoder } from "./index-6f1cc356.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-93e70904.js

@@ -0,0 +1,32 @@
+import { B as BaseDecoder } from "./index-6f1cc356.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/GatingScatterplotOptions.d.ts

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

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

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

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

@@ -1,9 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
 import plur from 'plur';
-import TableCell from '@material-ui/core/TableCell';
-import TableRow from '@material-ui/core/TableRow';
-import TextField from '@material-ui/core/TextField';
+import { TableCell, TableRow, TextField } from '@material-ui/core';
 import { usePlotOptionsStyles, OptionSelect } from '@vitessce/vit-s';
 import { capitalize } from '@vitessce/utils';
 export default function GatingScatterplotOptions(props) {

package/dist-tsc/GatingSubscriber.d.ts

@@ -0,0 +1,22 @@
+/**
+   * A subscriber component for the gating 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 {number} props.averageFillDensity Override the average fill density calculation
+   * when using dynamic opacity mode.
+   */
+export function GatingSubscriber(props: {
+    uuid: number;
+    theme: string;
+    coordinationScopes: object;
+    disableTooltip: boolean;
+    removeGridComponent: Function;
+    averageFillDensity: number;
+}): JSX.Element;
+//# sourceMappingURL=GatingSubscriber.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GatingSubscriber.d.ts","sourceRoot":"","sources":["../src/GatingSubscriber.js"],"names":[],"mappings":"AAkCA;;;;;;;;;;;;KAYK;AACL;IAV2B,IAAI,EAAlB,MAAM;IACQ,KAAK,EAAnB,MAAM;IACQ,kBAAkB,EAAhC,MAAM;IAES,cAAc,EAA7B,OAAO;IACS,mBAAmB;IAErB,kBAAkB,EAAhC,MAAM;gBAuZlB"}

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

@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useEffect, useCallback, useMemo, } from 'react';
 import plur from 'plur';
 import { extent } from 'd3-array';
-import isEqual from 'lodash/isEqual';
+import { isEqual } from 'lodash-es';
 import { capitalize, commaNumber, getCellColors, getValueTransformFunction, VALUE_TRANSFORM_OPTIONS, } from '@vitessce/utils';
-import { TitleInfo, useDeckCanvasSize, useReady, useUrls, useExpressionValueGetter, useObsSetsData, useFeatureSelection, useObsFeatureMatrixIndices, useCoordination, useLoaders, useSetComponentHover, useSetComponentViewInfo, registerPluginViewType, } from '@vitessce/vit-s';
+import { TitleInfo, useDeckCanvasSize, useReady, useUrls, useUint8FeatureSelection, useExpressionValueGetter, useObsSetsData, useFeatureSelection, useObsFeatureMatrixIndices, useCoordination, useLoaders, useSetComponentHover, useSetComponentViewInfo, } from '@vitessce/vit-s';
 import { getCellSetPolygons, mergeObsSets, setObsSelection } from '@vitessce/sets-utils';
 import { Scatterplot, ScatterplotTooltipSubscriber, ScatterplotOptions, getPointSizeDevicePixels, getPointOpacity, EmptyMessage, } from '@vitessce/scatterplot';
 import { ViewType, COMPONENT_COORDINATION_TYPES } from '@vitessce/constants-internal';
-import GatingScatterplotOptions from './GatingScatterplotOptions';
+import GatingScatterplotOptions from './GatingScatterplotOptions.js';
 /**
    * A subscriber component for the gating scatterplot.
    * @param {object} props
@@ -97,16 +97,13 @@ export function GatingSubscriber(props) {
     }, [additionalCellSets, cellSetColor, setCellColorEncoding,
         setAdditionalCellSets, setCellSetColor, setCellSetSelection]);
     const cellColors = useMemo(() => getCellColors({
-        cellColorEncoding,
-        expressionData: expressionDataColor && expressionDataColor[0],
-        geneSelection: gatingFeatureSelectionColor,
         cellSets: mergedCellSets,
         cellSetSelection,
         cellSetColor,
         obsIndex,
         theme,
-    }), [cellColorEncoding, gatingFeatureSelectionColor, mergedCellSets, theme,
-        cellSetSelection, cellSetColor, expressionDataColor, obsIndex]);
+    }), [mergedCellSets, theme,
+        cellSetSelection, cellSetColor, obsIndex]);
     // cellSetPolygonCache is an array of tuples like [(key0, val0), (key1, val1), ...],
     // where the keys are cellSetSelection arrays.
     const [cellSetPolygonCache, setCellSetPolygonCache] = useState([]);
@@ -171,12 +168,13 @@ export function GatingSubscriber(props) {
     const getCellIsSelected = useCallback((object, { index }) => ((cellSelectionSet || new Set([])).has(obsIndex[index]) ? 1.0 : 0.0), [cellSelectionSet, obsIndex]);
     const cellRadius = (cellRadiusMode === 'manual' ? cellRadiusFixed : dynamicCellRadius);
     const cellOpacity = (cellOpacityMode === 'manual' ? cellOpacityFixed : dynamicCellOpacity);
+    const [uint8ExpressionData] = useUint8FeatureSelection(expressionDataColor);
     // 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: obsIndex,
         matrixObsIndex: obsIndex,
-        expressionData: expressionDataColor,
+        expressionData: uint8ExpressionData,
     });
     // Puts the mapping values in the cell info tooltip.
     const getObsInfo = useCallback((obsId) => {
@@ -206,6 +204,3 @@ export function GatingSubscriber(props) {
                     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.GATING, GatingSubscriber, COMPONENT_COORDINATION_TYPES[ViewType.GATING]);
-}

package/dist-tsc/index.d.ts

@@ -0,0 +1,2 @@
+export { GatingSubscriber } from "./GatingSubscriber.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 { GatingSubscriber } from './GatingSubscriber.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/scatterplot-gating",
-  "version": "2.0.3-beta.0",
+  "version": "3.0.0",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -8,32 +8,41 @@
     "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/constants-internal": "2.0.3-beta.0",
-    "@vitessce/scatterplot": "2.0.3-beta.0",
-    "@vitessce/utils": "2.0.3-beta.0",
-    "@vitessce/sets-utils": "2.0.3-beta.0",
-    "@vitessce/vit-s": "2.0.3-beta.0"
+    "@vitessce/constants-internal": "3.0.0",
+    "@vitessce/sets-utils": "3.0.0",
+    "@vitessce/scatterplot": "3.0.0",
+    "@vitessce/vit-s": "3.0.0",
+    "@vitessce/utils": "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/GatingScatterplotOptions.js

@@ -0,0 +1,128 @@
+import React from 'react';
+import plur from 'plur';
+import { TableCell, TableRow, TextField } from '@material-ui/core';
+import { usePlotOptionsStyles, OptionSelect } from '@vitessce/vit-s';
+import { capitalize } from '@vitessce/utils';
+
+export default function GatingScatterplotOptions(props) {
+  const {
+    featureType,
+    gatingFeatureSelectionX,
+    setGatingFeatureSelectionX,
+    gatingFeatureSelectionY,
+    setGatingFeatureSelectionY,
+    gatingFeatureValueTransform,
+    setGatingFeatureValueTransform,
+    gatingFeatureValueTransformCoefficient,
+    setGatingFeatureValueTransformCoefficient,
+    geneSelectOptions,
+    transformOptions,
+  } = props;
+
+  const classes = usePlotOptionsStyles();
+
+  // Handlers for custom option field changes.
+  const handleGeneSelectChange = (event) => {
+    const { options } = event.target;
+    const newValues = [];
+    for (let i = 0, l = options.length; i < l; i += 1) {
+      if (options[i].selected) {
+        newValues.push(options[i].value);
+      }
+    }
+
+    if (newValues.length === 1
+          && gatingFeatureSelectionX
+          && !gatingFeatureSelectionY
+          && newValues[0] !== gatingFeatureSelectionX) {
+      setGatingFeatureSelectionY(newValues[0]);
+    } else if (newValues.length <= 2) {
+      setGatingFeatureSelectionX(newValues[0]);
+      setGatingFeatureSelectionY(newValues[1]);
+    }
+  };
+
+  const handleTransformChange = (event) => {
+    setGatingFeatureValueTransform(event.target.value === '' ? null : event.target.value);
+  };
+
+  // Feels a little hacky, but I think this is the best way to handle
+  // the limitations of the v4 material-ui number input.
+  const handleTransformCoefficientChange = (event) => {
+    const { value } = event.target;
+    if (!value) {
+      setGatingFeatureValueTransformCoefficient(value);
+    } else {
+      const newCoefficient = Number(value);
+      if (!Number.isNaN(newCoefficient) && newCoefficient >= 0) {
+        setGatingFeatureValueTransformCoefficient(value);
+      }
+    }
+  };
+
+  return (
+    <>
+      <TableRow key="gene-option-row">
+        <TableCell className={classes.labelCell}>
+          {capitalize(plur(featureType, geneSelectOptions?.length))}
+        </TableCell>
+        <TableCell className={classes.inputCell}>
+          <OptionSelect
+            key="gating-gene-select"
+            multiple
+            className={classes.select}
+            value={[gatingFeatureSelectionX, gatingFeatureSelectionY].filter(v => v)}
+            onChange={handleGeneSelectChange}
+            inputProps={{
+              id: 'scatterplot-gene-select',
+            }}
+          >
+            {geneSelectOptions.map(name => (
+              <option key={name} value={name}>
+                {name}
+              </option>
+            ))}
+          </OptionSelect>
+        </TableCell>
+      </TableRow>
+      <TableRow key="transform-option-row">
+        <TableCell className={classes.labelCell}>
+          Transform
+        </TableCell>
+        <TableCell className={classes.inputCell}>
+          <OptionSelect
+            key="gating-transform-select"
+            className={classes.select}
+            value={gatingFeatureValueTransform === null ? '' : gatingFeatureValueTransform}
+            onChange={handleTransformChange}
+            inputProps={{
+              id: 'scatterplot-transform-select',
+            }}
+          >
+            {transformOptions.map(opt => (
+              <option key={opt.name} value={opt.value === null ? '' : opt.value}>
+                {opt.name}
+              </option>
+            ))}
+          </OptionSelect>
+        </TableCell>
+      </TableRow>
+      <TableRow key="transform-coefficient-option-row">
+        <TableCell className={classes.labelCell}>
+          Transform Coefficient
+        </TableCell>
+        <TableCell className={classes.inputCell}>
+          <TextField
+            label="Number"
+            type="number"
+            onChange={handleTransformCoefficientChange}
+            value={gatingFeatureValueTransformCoefficient}
+            InputLabelProps={{
+              shrink: true,
+            }}
+          />
+        </TableCell>
+      </TableRow>
+    </>
+  );
+}