@vitessce/scatterplot-gating 2.0.3 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{deflate.244b5e4d.mjs → deflate-de0bc9c8.js} +2 -2
- package/dist/{index.2b98eb03.mjs → index-6f1cc356.js} +32323 -21223
- package/dist/index.js +7 -0
- package/dist/{jpeg.0c78cd80.mjs → jpeg-a72c0702.js} +1 -1
- package/dist/{lerc.2aba4384.mjs → lerc-27230ebf.js} +76 -5
- package/dist/{lzw.83308f93.mjs → lzw-e71d3b12.js} +1 -1
- package/dist/{packbits.b29c602e.mjs → packbits-5ddf3db9.js} +1 -1
- package/dist/{pako.esm.4b234125.mjs → pako.esm-68f84e2a.js} +97 -15
- package/dist/{raw.7e14c8c2.mjs → raw-424e77e0.js} +1 -1
- package/dist/{webimage.ed12ec5b.mjs → webimage-93e70904.js} +1 -1
- package/dist-tsc/GatingScatterplotOptions.d.ts +2 -0
- package/dist-tsc/GatingScatterplotOptions.d.ts.map +1 -0
- package/dist-tsc/GatingScatterplotOptions.js +54 -0
- package/dist-tsc/GatingSubscriber.d.ts +22 -0
- package/dist-tsc/GatingSubscriber.d.ts.map +1 -0
- package/dist-tsc/GatingSubscriber.js +206 -0
- package/dist-tsc/index.d.ts +2 -0
- package/dist-tsc/index.d.ts.map +1 -0
- package/dist-tsc/index.js +1 -1
- package/package.json +19 -10
- package/src/GatingScatterplotOptions.js +1 -3
- package/src/GatingSubscriber.js +10 -18
- package/src/index.js +1 -1
- package/dist/index.mjs +0 -8
|
@@ -0,0 +1,206 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import React, { useState, useEffect, useCallback, useMemo, } from 'react';
|
|
3
|
+
import plur from 'plur';
|
|
4
|
+
import { extent } from 'd3-array';
|
|
5
|
+
import { isEqual } from 'lodash-es';
|
|
6
|
+
import { capitalize, commaNumber, getCellColors, getValueTransformFunction, VALUE_TRANSFORM_OPTIONS, } from '@vitessce/utils';
|
|
7
|
+
import { TitleInfo, useDeckCanvasSize, useReady, useUrls, useUint8FeatureSelection, useExpressionValueGetter, useObsSetsData, useFeatureSelection, useObsFeatureMatrixIndices, useCoordination, useLoaders, useSetComponentHover, useSetComponentViewInfo, } from '@vitessce/vit-s';
|
|
8
|
+
import { getCellSetPolygons, mergeObsSets, setObsSelection } from '@vitessce/sets-utils';
|
|
9
|
+
import { Scatterplot, ScatterplotTooltipSubscriber, ScatterplotOptions, getPointSizeDevicePixels, getPointOpacity, EmptyMessage, } from '@vitessce/scatterplot';
|
|
10
|
+
import { ViewType, COMPONENT_COORDINATION_TYPES } from '@vitessce/constants-internal';
|
|
11
|
+
import GatingScatterplotOptions from './GatingScatterplotOptions.js';
|
|
12
|
+
/**
|
|
13
|
+
* A subscriber component for the gating scatterplot.
|
|
14
|
+
* @param {object} props
|
|
15
|
+
* @param {number} props.uuid The unique identifier for this component.
|
|
16
|
+
* @param {string} props.theme The current theme name.
|
|
17
|
+
* @param {object} props.coordinationScopes The mapping from coordination types to coordination
|
|
18
|
+
* scopes.
|
|
19
|
+
* @param {boolean} props.disableTooltip Should the tooltip be disabled?
|
|
20
|
+
* @param {function} props.removeGridComponent The callback function to pass to TitleInfo,
|
|
21
|
+
* to call when the component has been removed from the grid.
|
|
22
|
+
* @param {number} props.averageFillDensity Override the average fill density calculation
|
|
23
|
+
* when using dynamic opacity mode.
|
|
24
|
+
*/
|
|
25
|
+
export function GatingSubscriber(props) {
|
|
26
|
+
const { uuid, coordinationScopes, removeGridComponent, theme, disableTooltip = false, title: titleOverride,
|
|
27
|
+
// Average fill density for dynamic opacity calculation.
|
|
28
|
+
averageFillDensity, } = props;
|
|
29
|
+
const loaders = useLoaders();
|
|
30
|
+
const setComponentHover = useSetComponentHover();
|
|
31
|
+
const setComponentViewInfo = useSetComponentViewInfo(uuid);
|
|
32
|
+
// Get "props" from the coordination space.
|
|
33
|
+
const [{ dataset, obsType, featureType, featureValueType, embeddingZoom: zoom, embeddingTargetX: targetX, embeddingTargetY: targetY, embeddingTargetZ: targetZ, obsFilter: cellFilter, obsHighlight: cellHighlight, 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, featureSelection: gatingFeatureSelectionColor, featureValueTransform, featureValueTransformCoefficient, gatingFeatureSelectionX, gatingFeatureSelectionY, }, { 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, setFeatureValueTransform, setFeatureValueTransformCoefficient, setGatingFeatureSelectionX, setGatingFeatureSelectionY, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.GATING], coordinationScopes);
|
|
34
|
+
const [urls, addUrl] = useUrls(loaders, dataset);
|
|
35
|
+
const [width, height, deckRef] = useDeckCanvasSize();
|
|
36
|
+
const title = useMemo(() => {
|
|
37
|
+
if (titleOverride) {
|
|
38
|
+
return titleOverride;
|
|
39
|
+
}
|
|
40
|
+
if (!(gatingFeatureSelectionX && gatingFeatureSelectionY)) {
|
|
41
|
+
return 'Gating';
|
|
42
|
+
}
|
|
43
|
+
return `Gating (${gatingFeatureSelectionX} vs ${gatingFeatureSelectionY})`;
|
|
44
|
+
}, [titleOverride, gatingFeatureSelectionX, gatingFeatureSelectionY]);
|
|
45
|
+
const featureSelectionX = useMemo(() => (gatingFeatureSelectionX ? [gatingFeatureSelectionX] : null), [gatingFeatureSelectionX]);
|
|
46
|
+
const featureSelectionY = useMemo(() => (gatingFeatureSelectionY ? [gatingFeatureSelectionY] : null), [gatingFeatureSelectionY]);
|
|
47
|
+
// Get data from loaders using the data hooks.
|
|
48
|
+
const [{ obsSets: cellSets }, obsSetsStatus] = useObsSetsData(loaders, dataset, addUrl, false, { setObsSetSelection: setCellSetSelection, setObsSetColor: setCellSetColor }, { obsSetSelection: cellSetSelection, obsSetColor: cellSetColor }, { obsType });
|
|
49
|
+
// eslint-disable-next-line no-unused-vars
|
|
50
|
+
const [expressionDataColor, loadedColor, featureSelectionColorStatus] = useFeatureSelection(loaders, dataset, false, gatingFeatureSelectionColor, { obsType, featureType, featureValueType });
|
|
51
|
+
// eslint-disable-next-line no-unused-vars
|
|
52
|
+
const [expressionDataX, loadedX, featureSelectionXStatus] = useFeatureSelection(loaders, dataset, false, featureSelectionX, { obsType, featureType, featureValueType });
|
|
53
|
+
// eslint-disable-next-line no-unused-vars
|
|
54
|
+
const [expressionDataY, loadedY, featureSelectionYStatus] = useFeatureSelection(loaders, dataset, false, featureSelectionY, { obsType, featureType, featureValueType });
|
|
55
|
+
const [{ obsIndex, featureIndex }, matrixIndicesStatus] = useObsFeatureMatrixIndices(loaders, dataset, addUrl, false, { obsType, featureType, featureValueType });
|
|
56
|
+
const cellsCount = obsIndex?.length || 0;
|
|
57
|
+
const isReady = useReady([
|
|
58
|
+
obsSetsStatus,
|
|
59
|
+
featureSelectionColorStatus,
|
|
60
|
+
featureSelectionXStatus,
|
|
61
|
+
featureSelectionYStatus,
|
|
62
|
+
matrixIndicesStatus,
|
|
63
|
+
]);
|
|
64
|
+
// Generate a new cells object with a mapping added for the user selected genes.
|
|
65
|
+
const obsXY = useMemo(() => {
|
|
66
|
+
if (!(cellsCount && expressionDataX?.[0] && expressionDataY?.[0]
|
|
67
|
+
&& featureSelectionX && featureSelectionY)) {
|
|
68
|
+
return null;
|
|
69
|
+
}
|
|
70
|
+
// Get transform coefficient for log and arcsinh
|
|
71
|
+
let coefficient = 1;
|
|
72
|
+
const parsedTransformCoefficient = Number(featureValueTransformCoefficient);
|
|
73
|
+
if (!Number.isNaN(parsedTransformCoefficient) && parsedTransformCoefficient > 0) {
|
|
74
|
+
coefficient = parsedTransformCoefficient;
|
|
75
|
+
}
|
|
76
|
+
// Set transform function
|
|
77
|
+
const transformFunction = getValueTransformFunction(featureValueTransform, coefficient);
|
|
78
|
+
const obsX = new Float32Array(cellsCount);
|
|
79
|
+
const obsY = new Float32Array(cellsCount);
|
|
80
|
+
for (let i = 0; i < cellsCount; i += 1) {
|
|
81
|
+
obsX[i] = transformFunction(expressionDataX[0][i]);
|
|
82
|
+
obsY[i] = transformFunction(expressionDataY[0][i]);
|
|
83
|
+
}
|
|
84
|
+
return {
|
|
85
|
+
data: [obsX, obsY],
|
|
86
|
+
shape: [2, cellsCount],
|
|
87
|
+
};
|
|
88
|
+
}, [cellsCount, expressionDataX, expressionDataY,
|
|
89
|
+
featureValueTransform, featureValueTransformCoefficient,
|
|
90
|
+
featureSelectionX, featureSelectionY,
|
|
91
|
+
]);
|
|
92
|
+
const [dynamicCellRadius, setDynamicCellRadius] = useState(cellRadiusFixed);
|
|
93
|
+
const [dynamicCellOpacity, setDynamicCellOpacity] = useState(cellOpacityFixed);
|
|
94
|
+
const mergedCellSets = useMemo(() => mergeObsSets(cellSets, additionalCellSets), [cellSets, additionalCellSets]);
|
|
95
|
+
const setCellSelectionProp = useCallback((v) => {
|
|
96
|
+
setObsSelection(v, additionalCellSets, cellSetColor, setCellSetSelection, setAdditionalCellSets, setCellSetColor, setCellColorEncoding);
|
|
97
|
+
}, [additionalCellSets, cellSetColor, setCellColorEncoding,
|
|
98
|
+
setAdditionalCellSets, setCellSetColor, setCellSetSelection]);
|
|
99
|
+
const cellColors = useMemo(() => getCellColors({
|
|
100
|
+
cellSets: mergedCellSets,
|
|
101
|
+
cellSetSelection,
|
|
102
|
+
cellSetColor,
|
|
103
|
+
obsIndex,
|
|
104
|
+
theme,
|
|
105
|
+
}), [mergedCellSets, theme,
|
|
106
|
+
cellSetSelection, cellSetColor, obsIndex]);
|
|
107
|
+
// cellSetPolygonCache is an array of tuples like [(key0, val0), (key1, val1), ...],
|
|
108
|
+
// where the keys are cellSetSelection arrays.
|
|
109
|
+
const [cellSetPolygonCache, setCellSetPolygonCache] = useState([]);
|
|
110
|
+
const cacheHas = (cache, key) => cache.findIndex(el => isEqual(el[0], key)) !== -1;
|
|
111
|
+
const cacheGet = (cache, key) => cache.find(el => isEqual(el[0], key))?.[1];
|
|
112
|
+
const cellSetPolygons = useMemo(() => {
|
|
113
|
+
if ((cellSetLabelsVisible || cellSetPolygonsVisible)
|
|
114
|
+
&& !cacheHas(cellSetPolygonCache, cellSetSelection)
|
|
115
|
+
&& mergedCellSets?.tree?.length
|
|
116
|
+
&& obsXY
|
|
117
|
+
&& obsIndex
|
|
118
|
+
&& cellSetColor?.length) {
|
|
119
|
+
const newCellSetPolygons = getCellSetPolygons({
|
|
120
|
+
obsIndex,
|
|
121
|
+
obsEmbedding: obsXY,
|
|
122
|
+
cellSets: mergedCellSets,
|
|
123
|
+
cellSetSelection,
|
|
124
|
+
cellSetColor,
|
|
125
|
+
theme,
|
|
126
|
+
});
|
|
127
|
+
setCellSetPolygonCache(cache => [...cache, [cellSetSelection, newCellSetPolygons]]);
|
|
128
|
+
return newCellSetPolygons;
|
|
129
|
+
}
|
|
130
|
+
return cacheGet(cellSetPolygonCache, cellSetSelection) || [];
|
|
131
|
+
}, [cellSetPolygonsVisible, cellSetPolygonCache, cellSetLabelsVisible, theme,
|
|
132
|
+
obsIndex, obsXY, mergedCellSets, cellSetSelection, cellSetColor]);
|
|
133
|
+
const cellSelection = useMemo(() => Array.from(cellColors.keys()), [cellColors]);
|
|
134
|
+
const [xRange, yRange, xExtent, yExtent, numCells] = useMemo(() => {
|
|
135
|
+
if (obsXY && obsXY.data && obsXY.shape) {
|
|
136
|
+
const cellCount = obsXY.shape[1];
|
|
137
|
+
const xE = extent(obsXY.data[0]);
|
|
138
|
+
const yE = extent(obsXY.data[1]);
|
|
139
|
+
const xR = xE[1] - xE[0];
|
|
140
|
+
const yR = yE[1] - yE[0];
|
|
141
|
+
return [xR, yR, xE, yE, cellCount];
|
|
142
|
+
}
|
|
143
|
+
return [null, null, null, null, null];
|
|
144
|
+
}, [obsXY]);
|
|
145
|
+
// After cells have loaded or changed,
|
|
146
|
+
// compute the cell radius scale based on the
|
|
147
|
+
// extents of the cell coordinates on the x/y axes.
|
|
148
|
+
useEffect(() => {
|
|
149
|
+
if (xRange && yRange) {
|
|
150
|
+
const pointSizeDevicePixels = getPointSizeDevicePixels(window.devicePixelRatio, zoom, xRange, yRange, width, height);
|
|
151
|
+
setDynamicCellRadius(pointSizeDevicePixels);
|
|
152
|
+
const nextCellOpacityScale = getPointOpacity(zoom, xRange, yRange, width, height, numCells, averageFillDensity);
|
|
153
|
+
setDynamicCellOpacity(nextCellOpacityScale);
|
|
154
|
+
if (typeof targetX !== 'number' || typeof targetY !== 'number') {
|
|
155
|
+
const newTargetX = xExtent[0] + xRange / 2;
|
|
156
|
+
const newTargetY = yExtent[0] + yRange / 2;
|
|
157
|
+
const newZoom = Math.log2(Math.min(width / xRange, height / yRange));
|
|
158
|
+
setTargetX(newTargetX);
|
|
159
|
+
// Graphics rendering has the y-axis going south so we need to multiply by negative one.
|
|
160
|
+
setTargetY(-newTargetY);
|
|
161
|
+
setZoom(newZoom);
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
165
|
+
}, [xRange, yRange, xExtent, yExtent, numCells,
|
|
166
|
+
width, height, zoom, averageFillDensity]);
|
|
167
|
+
const cellSelectionSet = useMemo(() => new Set(cellSelection), [cellSelection]);
|
|
168
|
+
const getCellIsSelected = useCallback((object, { index }) => ((cellSelectionSet || new Set([])).has(obsIndex[index]) ? 1.0 : 0.0), [cellSelectionSet, obsIndex]);
|
|
169
|
+
const cellRadius = (cellRadiusMode === 'manual' ? cellRadiusFixed : dynamicCellRadius);
|
|
170
|
+
const cellOpacity = (cellOpacityMode === 'manual' ? cellOpacityFixed : dynamicCellOpacity);
|
|
171
|
+
const [uint8ExpressionData] = useUint8FeatureSelection(expressionDataColor);
|
|
172
|
+
// Set up a getter function for gene expression values, to be used
|
|
173
|
+
// by the DeckGL layer to obtain values for instanced attributes.
|
|
174
|
+
const getExpressionValue = useExpressionValueGetter({
|
|
175
|
+
instanceObsIndex: obsIndex,
|
|
176
|
+
matrixObsIndex: obsIndex,
|
|
177
|
+
expressionData: uint8ExpressionData,
|
|
178
|
+
});
|
|
179
|
+
// Puts the mapping values in the cell info tooltip.
|
|
180
|
+
const getObsInfo = useCallback((obsId) => {
|
|
181
|
+
const selectedTransformName = VALUE_TRANSFORM_OPTIONS.find(o => o.value === featureValueTransform)?.name;
|
|
182
|
+
const genePrefix = featureValueTransform ? `${selectedTransformName} ` : '';
|
|
183
|
+
const obsIdx = obsIndex?.indexOf(obsId);
|
|
184
|
+
const obsInfo = { [`${capitalize(obsType)} ID`]: obsId };
|
|
185
|
+
if (gatingFeatureSelectionX && gatingFeatureSelectionY) {
|
|
186
|
+
obsInfo[genePrefix + gatingFeatureSelectionX] = obsXY.data[0][obsIdx];
|
|
187
|
+
obsInfo[genePrefix + gatingFeatureSelectionY] = obsXY.data[1][obsIdx];
|
|
188
|
+
}
|
|
189
|
+
return obsInfo;
|
|
190
|
+
}, [obsXY, obsIndex, featureValueTransform,
|
|
191
|
+
gatingFeatureSelectionX, gatingFeatureSelectionY, obsType,
|
|
192
|
+
]);
|
|
193
|
+
return (_jsxs(TitleInfo, { title: title, info: `${commaNumber(cellsCount)} ${plur(obsType, cellsCount)}`, removeGridComponent: removeGridComponent, urls: urls, theme: theme, isReady: isReady, options: (_jsx(ScatterplotOptions, { observationsLabel: obsType, 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(GatingScatterplotOptions, { featureType: featureType, gatingFeatureSelectionX: gatingFeatureSelectionX, setGatingFeatureSelectionX: setGatingFeatureSelectionX, gatingFeatureSelectionY: gatingFeatureSelectionY, setGatingFeatureSelectionY: setGatingFeatureSelectionY, gatingFeatureValueTransform: featureValueTransform, setGatingFeatureValueTransform: (newValue) => {
|
|
194
|
+
setFeatureValueTransform(newValue);
|
|
195
|
+
setTargetX(null);
|
|
196
|
+
setTargetY(null);
|
|
197
|
+
setZoom(null);
|
|
198
|
+
}, gatingFeatureValueTransformCoefficient: featureValueTransformCoefficient, setGatingFeatureValueTransformCoefficient: setFeatureValueTransformCoefficient, geneSelectOptions: featureIndex, transformOptions: VALUE_TRANSFORM_OPTIONS }) })), children: [_jsx(EmptyMessage, { visible: !(gatingFeatureSelectionX && gatingFeatureSelectionY), message: `Select two ${plur(featureType, 2)} in the plot settings.` }), _jsx(Scatterplot, { ref: deckRef, uuid: uuid, theme: theme, hideTools: !(gatingFeatureSelectionX && gatingFeatureSelectionY), viewState: { zoom, target: [targetX, targetY, targetZ] }, setViewState: ({ zoom: newZoom, target }) => {
|
|
199
|
+
setZoom(newZoom);
|
|
200
|
+
setTargetX(target[0]);
|
|
201
|
+
setTargetY(target[1]);
|
|
202
|
+
setTargetZ(target[2] || 0);
|
|
203
|
+
}, obsEmbeddingIndex: obsIndex, obsEmbedding: obsXY, 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: () => {
|
|
204
|
+
setComponentHover(uuid);
|
|
205
|
+
}, updateViewInfo: setComponentViewInfo, getExpressionValue: getExpressionValue, getCellIsSelected: getCellIsSelected }), !disableTooltip && (_jsx(ScatterplotTooltipSubscriber, { parentUuid: uuid, obsHighlight: cellHighlight, width: width, height: height, getObsInfo: getObsInfo }))] }));
|
|
206
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.js"],"names":[],"mappings":""}
|
package/dist-tsc/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { GatingSubscriber
|
|
1
|
+
export { GatingSubscriber } from './GatingSubscriber.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vitessce/scatterplot-gating",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0",
|
|
4
4
|
"author": "Gehlenborg Lab",
|
|
5
5
|
"homepage": "http://vitessce.io",
|
|
6
6
|
"repository": {
|
|
@@ -8,25 +8,27 @@
|
|
|
8
8
|
"url": "git+https://github.com/vitessce/vitessce.git"
|
|
9
9
|
},
|
|
10
10
|
"license": "MIT",
|
|
11
|
-
"
|
|
11
|
+
"type": "module",
|
|
12
|
+
"main": "dist/index.js",
|
|
12
13
|
"files": [
|
|
14
|
+
"src",
|
|
13
15
|
"dist",
|
|
14
|
-
"
|
|
16
|
+
"dist-tsc"
|
|
15
17
|
],
|
|
16
18
|
"dependencies": {
|
|
17
19
|
"@material-ui/core": "~4.12.3",
|
|
18
20
|
"d3-array": "^2.4.0",
|
|
19
|
-
"lodash": "^4.17.21",
|
|
21
|
+
"lodash-es": "^4.17.21",
|
|
20
22
|
"plur": "^5.1.0",
|
|
21
|
-
"@vitessce/constants-internal": "
|
|
22
|
-
"@vitessce/
|
|
23
|
-
"@vitessce/
|
|
24
|
-
"@vitessce/
|
|
25
|
-
"@vitessce/
|
|
23
|
+
"@vitessce/constants-internal": "3.0.0",
|
|
24
|
+
"@vitessce/sets-utils": "3.0.0",
|
|
25
|
+
"@vitessce/scatterplot": "3.0.0",
|
|
26
|
+
"@vitessce/vit-s": "3.0.0",
|
|
27
|
+
"@vitessce/utils": "3.0.0"
|
|
26
28
|
},
|
|
27
29
|
"devDependencies": {
|
|
28
30
|
"react": "^18.0.0",
|
|
29
|
-
"vite": "^3.0
|
|
31
|
+
"vite": "^4.3.0",
|
|
30
32
|
"vitest": "^0.23.4"
|
|
31
33
|
},
|
|
32
34
|
"peerDependencies": {
|
|
@@ -35,5 +37,12 @@
|
|
|
35
37
|
"scripts": {
|
|
36
38
|
"bundle": "pnpm exec vite build -c ../../../scripts/vite.config.js",
|
|
37
39
|
"test": "pnpm exec vitest --run -r ../../../ --dir ."
|
|
40
|
+
},
|
|
41
|
+
"module": "dist/index.js",
|
|
42
|
+
"exports": {
|
|
43
|
+
".": {
|
|
44
|
+
"types": "./dist-tsc/index.d.ts",
|
|
45
|
+
"import": "./dist/index.js"
|
|
46
|
+
}
|
|
38
47
|
}
|
|
39
48
|
}
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import plur from 'plur';
|
|
3
|
-
import TableCell from '@material-ui/core
|
|
4
|
-
import TableRow from '@material-ui/core/TableRow';
|
|
5
|
-
import TextField from '@material-ui/core/TextField';
|
|
3
|
+
import { TableCell, TableRow, TextField } from '@material-ui/core';
|
|
6
4
|
import { usePlotOptionsStyles, OptionSelect } from '@vitessce/vit-s';
|
|
7
5
|
import { capitalize } from '@vitessce/utils';
|
|
8
6
|
|
package/src/GatingSubscriber.js
CHANGED
|
@@ -3,7 +3,7 @@ import React, {
|
|
|
3
3
|
} from 'react';
|
|
4
4
|
import plur from 'plur';
|
|
5
5
|
import { extent } from 'd3-array';
|
|
6
|
-
import isEqual from 'lodash
|
|
6
|
+
import { isEqual } from 'lodash-es';
|
|
7
7
|
import {
|
|
8
8
|
capitalize, commaNumber,
|
|
9
9
|
getCellColors,
|
|
@@ -11,7 +11,9 @@ import {
|
|
|
11
11
|
} from '@vitessce/utils';
|
|
12
12
|
import {
|
|
13
13
|
TitleInfo,
|
|
14
|
-
useDeckCanvasSize, useReady, useUrls,
|
|
14
|
+
useDeckCanvasSize, useReady, useUrls,
|
|
15
|
+
useUint8FeatureSelection,
|
|
16
|
+
useExpressionValueGetter,
|
|
15
17
|
useObsSetsData,
|
|
16
18
|
useFeatureSelection,
|
|
17
19
|
useObsFeatureMatrixIndices,
|
|
@@ -19,7 +21,6 @@ import {
|
|
|
19
21
|
useLoaders,
|
|
20
22
|
useSetComponentHover,
|
|
21
23
|
useSetComponentViewInfo,
|
|
22
|
-
registerPluginViewType,
|
|
23
24
|
} from '@vitessce/vit-s';
|
|
24
25
|
import { getCellSetPolygons, mergeObsSets, setObsSelection } from '@vitessce/sets-utils';
|
|
25
26
|
import {
|
|
@@ -29,7 +30,7 @@ import {
|
|
|
29
30
|
EmptyMessage,
|
|
30
31
|
} from '@vitessce/scatterplot';
|
|
31
32
|
import { ViewType, COMPONENT_COORDINATION_TYPES } from '@vitessce/constants-internal';
|
|
32
|
-
import GatingScatterplotOptions from './GatingScatterplotOptions';
|
|
33
|
+
import GatingScatterplotOptions from './GatingScatterplotOptions.js';
|
|
33
34
|
|
|
34
35
|
/**
|
|
35
36
|
* A subscriber component for the gating scatterplot.
|
|
@@ -228,16 +229,13 @@ export function GatingSubscriber(props) {
|
|
|
228
229
|
setAdditionalCellSets, setCellSetColor, setCellSetSelection]);
|
|
229
230
|
|
|
230
231
|
const cellColors = useMemo(() => getCellColors({
|
|
231
|
-
cellColorEncoding,
|
|
232
|
-
expressionData: expressionDataColor && expressionDataColor[0],
|
|
233
|
-
geneSelection: gatingFeatureSelectionColor,
|
|
234
232
|
cellSets: mergedCellSets,
|
|
235
233
|
cellSetSelection,
|
|
236
234
|
cellSetColor,
|
|
237
235
|
obsIndex,
|
|
238
236
|
theme,
|
|
239
|
-
}), [
|
|
240
|
-
cellSetSelection, cellSetColor,
|
|
237
|
+
}), [mergedCellSets, theme,
|
|
238
|
+
cellSetSelection, cellSetColor, obsIndex]);
|
|
241
239
|
|
|
242
240
|
// cellSetPolygonCache is an array of tuples like [(key0, val0), (key1, val1), ...],
|
|
243
241
|
// where the keys are cellSetSelection arrays.
|
|
@@ -318,12 +316,14 @@ export function GatingSubscriber(props) {
|
|
|
318
316
|
const cellRadius = (cellRadiusMode === 'manual' ? cellRadiusFixed : dynamicCellRadius);
|
|
319
317
|
const cellOpacity = (cellOpacityMode === 'manual' ? cellOpacityFixed : dynamicCellOpacity);
|
|
320
318
|
|
|
319
|
+
const [uint8ExpressionData] = useUint8FeatureSelection(expressionDataColor);
|
|
320
|
+
|
|
321
321
|
// Set up a getter function for gene expression values, to be used
|
|
322
322
|
// by the DeckGL layer to obtain values for instanced attributes.
|
|
323
323
|
const getExpressionValue = useExpressionValueGetter({
|
|
324
324
|
instanceObsIndex: obsIndex,
|
|
325
325
|
matrixObsIndex: obsIndex,
|
|
326
|
-
expressionData:
|
|
326
|
+
expressionData: uint8ExpressionData,
|
|
327
327
|
});
|
|
328
328
|
|
|
329
329
|
// Puts the mapping values in the cell info tooltip.
|
|
@@ -450,11 +450,3 @@ export function GatingSubscriber(props) {
|
|
|
450
450
|
</TitleInfo>
|
|
451
451
|
);
|
|
452
452
|
}
|
|
453
|
-
|
|
454
|
-
export function register() {
|
|
455
|
-
registerPluginViewType(
|
|
456
|
-
ViewType.GATING,
|
|
457
|
-
GatingSubscriber,
|
|
458
|
-
COMPONENT_COORDINATION_TYPES[ViewType.GATING],
|
|
459
|
-
);
|
|
460
|
-
}
|
package/src/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { GatingSubscriber
|
|
1
|
+
export { GatingSubscriber } from './GatingSubscriber.js';
|