@vitessce/scatterplot 3.5.11 → 3.6.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-DQ0_jCts.js +10 -0
- package/dist/{index-54d5c6e0.js → index-DSmamA-i.js} +59459 -58439
- package/dist/index.js +1 -4
- package/dist/{jpeg-8d0a6c28.js → jpeg-BcAqYOOy.js} +20 -4
- package/dist/lerc-CI2p3BrU.js +2020 -0
- package/dist/{lzw-7efc2185.js → lzw-BENtgUVF.js} +1 -4
- package/dist/{packbits-4c889da6.js → packbits-DMcknzJJ.js} +1 -4
- package/dist/{pako.esm-68f84e2a.js → pako.esm-SxljTded.js} +33 -1839
- package/dist/{raw-4aa2df23.js → raw-C2rGxUeU.js} +1 -4
- package/dist/{webimage-19762a61.js → webimage-CphzyLUk.js} +1 -4
- package/dist-tsc/ScatterplotOptions.d.ts.map +1 -1
- package/dist-tsc/ScatterplotOptions.js +53 -27
- package/dist-tsc/shared-spatial-scatterplot/AbstractSpatialOrScatterplot.d.ts.map +1 -1
- package/dist-tsc/shared-spatial-scatterplot/AbstractSpatialOrScatterplot.js +1 -1
- package/dist-tsc/shared-spatial-scatterplot/ToolMenu.js +6 -6
- package/dist-tsc/shared-spatial-scatterplot/ToolMenu.test.js +2 -6
- package/package.json +14 -14
- package/src/ScatterplotOptions.js +46 -20
- package/src/shared-spatial-scatterplot/AbstractSpatialOrScatterplot.js +2 -0
- package/src/shared-spatial-scatterplot/ToolMenu.js +6 -6
- package/src/shared-spatial-scatterplot/ToolMenu.test.jsx +2 -7
- package/dist/deflate-f6d73584.js +0 -13
- package/dist/lerc-71eafedf.js +0 -2014
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScatterplotOptions.d.ts","sourceRoot":"","sources":["../src/ScatterplotOptions.js"],"names":[],"mappings":"AAYA,
|
|
1
|
+
{"version":3,"file":"ScatterplotOptions.d.ts","sourceRoot":"","sources":["../src/ScatterplotOptions.js"],"names":[],"mappings":"AAYA,oEAihBC"}
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import React, { useCallback } from 'react';
|
|
3
3
|
import { useId } from 'react-aria';
|
|
4
4
|
import { debounce } from 'lodash-es';
|
|
5
|
-
import { Checkbox, Slider, TableCell, TableRow } from '@
|
|
5
|
+
import { Checkbox, Slider, TableCell, TableRow } from '@vitessce/styles';
|
|
6
6
|
import { capitalize } from '@vitessce/utils';
|
|
7
7
|
import { usePlotOptionsStyles, CellColorEncodingOption, OptionsContainer, OptionSelect, } from '@vitessce/vit-s';
|
|
8
8
|
import { GLSL_COLORMAPS } from '@vitessce/gl';
|
|
@@ -11,7 +11,7 @@ export default function ScatterplotOptions(props) {
|
|
|
11
11
|
const { children, observationsLabel, cellRadius, setCellRadius, cellRadiusMode, setCellRadiusMode, cellOpacity, setCellOpacity, cellOpacityMode, setCellOpacityMode, cellSetLabelsVisible, setCellSetLabelsVisible, tooltipsVisible, setTooltipsVisible, cellSetLabelSize, setCellSetLabelSize, cellSetPolygonsVisible, setCellSetPolygonsVisible, cellColorEncoding, setCellColorEncoding, geneExpressionColormap, setGeneExpressionColormap, geneExpressionColormapRange, setGeneExpressionColormapRange, embeddingPointsVisible, setEmbeddingPointsVisible, embeddingContoursVisible, setEmbeddingContoursVisible, embeddingContoursFilled, setEmbeddingContoursFilled, contourPercentiles, setContourPercentiles, defaultContourPercentiles, contourColorEncoding, setContourColorEncoding, featureAggregationStrategy, setFeatureAggregationStrategy, } = props;
|
|
12
12
|
const scatterplotOptionsId = useId();
|
|
13
13
|
const observationsLabelNice = capitalize(observationsLabel);
|
|
14
|
-
const classes = usePlotOptionsStyles();
|
|
14
|
+
const { classes } = usePlotOptionsStyles();
|
|
15
15
|
function handleCellRadiusModeChange(event) {
|
|
16
16
|
setCellRadiusMode(event.target.value);
|
|
17
17
|
}
|
|
@@ -62,42 +62,68 @@ export default function ScatterplotOptions(props) {
|
|
|
62
62
|
function handleFeatureAggregationStrategyChange(event) {
|
|
63
63
|
setFeatureAggregationStrategy(event.target.value);
|
|
64
64
|
}
|
|
65
|
-
return (_jsxs(OptionsContainer, { children: [children, _jsx(CellColorEncodingOption, { observationsLabel: observationsLabel, cellColorEncoding: cellColorEncoding, setCellColorEncoding: setCellColorEncoding }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsxs("label", { htmlFor: `scatterplot-set-labels-visible-${scatterplotOptionsId}`, children: [observationsLabelNice, " Set Labels Visible"] }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Checkbox, { className: classes.checkbox, checked: cellSetLabelsVisible, onChange: handleLabelVisibilityChange, name: "scatterplot-option-cell-set-labels", color: "default",
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
65
|
+
return (_jsxs(OptionsContainer, { children: [children, _jsx(CellColorEncodingOption, { observationsLabel: observationsLabel, cellColorEncoding: cellColorEncoding, setCellColorEncoding: setCellColorEncoding }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsxs("label", { htmlFor: `scatterplot-set-labels-visible-${scatterplotOptionsId}`, children: [observationsLabelNice, " Set Labels Visible"] }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Checkbox, { className: classes.checkbox, checked: cellSetLabelsVisible, onChange: handleLabelVisibilityChange, name: "scatterplot-option-cell-set-labels", color: "default", slotProps: { input: {
|
|
66
|
+
'aria-label': 'Show or hide set labels',
|
|
67
|
+
id: `scatterplot-set-labels-visible-${scatterplotOptionsId}`,
|
|
68
|
+
} } }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `scatterplot-set-tooltips-visible-${scatterplotOptionsId}`, children: "Tooltips Visible" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Checkbox, { className: classes.checkbox,
|
|
69
69
|
/**
|
|
70
70
|
* We have to use "checked" here, not "value".
|
|
71
71
|
* The checkbox state is not persisting with value.
|
|
72
72
|
* For reference, https://v4.mui.com/api/checkbox/
|
|
73
73
|
*/
|
|
74
|
-
checked: tooltipsVisible, onChange: handleTooltipsVisibilityChange, name: "scatterplot-option-tooltip-visibility", color: "default",
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
} }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsxs("label", { htmlFor: `scatterplot-set-
|
|
74
|
+
checked: tooltipsVisible, onChange: handleTooltipsVisibilityChange, name: "scatterplot-option-tooltip-visibility", color: "default", slotProps: { input: {
|
|
75
|
+
'aria-label': 'Show or hide tooltips',
|
|
76
|
+
id: `scatterplot-set-tooltips-visible-${scatterplotOptionsId}`,
|
|
77
|
+
} } }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsxs("label", { htmlFor: `scatterplot-set-label-size-${scatterplotOptionsId}`, children: [observationsLabelNice, " Set Label Size"] }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Slider, { slotProps: {
|
|
78
|
+
root: { className: classes.slider },
|
|
79
|
+
valueLabel: { className: classes.sliderValueLabel },
|
|
80
|
+
}, disabled: !cellSetLabelsVisible, value: cellSetLabelSize, onChange: handleLabelSizeChange, "aria-label": "Scatterplot label size slider", id: `scatterplot-set-label-size-${scatterplotOptionsId}`, valueLabelDisplay: "auto", step: 1, min: 8, max: 36 }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsxs("label", { htmlFor: `scatterplot-set-polygons-visible-${scatterplotOptionsId}`, children: [observationsLabelNice, " Set Polygons Visible"] }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Checkbox, { className: classes.checkbox, checked: cellSetPolygonsVisible, onChange: handlePolygonVisibilityChange, name: "scatterplot-option-cell-set-polygons", color: "default", slotProps: { input: {
|
|
81
|
+
'aria-label': 'Show or hide polygons',
|
|
82
|
+
id: `scatterplot-set-polygons-visible-${scatterplotOptionsId}`,
|
|
83
|
+
} } }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsxs("label", { htmlFor: `scatterplot-set-radius-mode-select-${scatterplotOptionsId}`, children: [observationsLabelNice, " Radius Mode"] }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsxs(OptionSelect, { className: classes.select, value: cellRadiusMode, onChange: handleCellRadiusModeChange, inputProps: {
|
|
81
84
|
id: `scatterplot-set-radius-mode-select-${scatterplotOptionsId}`,
|
|
82
|
-
}, children: [_jsx("option", { value: "auto", children: "Auto" }), _jsx("option", { value: "manual", children: "Manual" })] }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsxs("label", { htmlFor: `scatterplot-set-radius-size-select-${scatterplotOptionsId}`, children: [observationsLabelNice, " Radius Size"] }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Slider, {
|
|
85
|
+
}, children: [_jsx("option", { value: "auto", children: "Auto" }), _jsx("option", { value: "manual", children: "Manual" })] }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsxs("label", { htmlFor: `scatterplot-set-radius-size-select-${scatterplotOptionsId}`, children: [observationsLabelNice, " Radius Size"] }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Slider, { slotProps: {
|
|
86
|
+
root: { className: classes.slider },
|
|
87
|
+
valueLabel: { className: classes.sliderValueLabel },
|
|
88
|
+
}, disabled: cellRadiusMode !== 'manual', value: cellRadius, onChange: handleRadiusChange, "aria-label": "Scatterplot radius size slider", id: `scatterplot-set-radius-size-select-${scatterplotOptionsId}`, valueLabelDisplay: "auto", step: 0.01, min: 0.01, max: 10 }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsxs("label", { htmlFor: `scatterplot-set-opacity-mode-${scatterplotOptionsId}`, children: [observationsLabelNice, " Opacity Mode"] }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsxs(OptionSelect, { className: classes.select, value: cellOpacityMode, onChange: handleCellOpacityModeChange, inputProps: {
|
|
83
89
|
id: `scatterplot-set-opacity-mode-${scatterplotOptionsId}`,
|
|
84
|
-
}, children: [_jsx("option", { value: "auto", children: "Auto" }), _jsx("option", { value: "manual", children: "Manual" })] }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsxs("label", { htmlFor: `scatterplot-set-opacity-level-${scatterplotOptionsId}`, children: [observationsLabelNice, " Opacity Level"] }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Slider, {
|
|
90
|
+
}, children: [_jsx("option", { value: "auto", children: "Auto" }), _jsx("option", { value: "manual", children: "Manual" })] }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsxs("label", { htmlFor: `scatterplot-set-opacity-level-${scatterplotOptionsId}`, children: [observationsLabelNice, " Opacity Level"] }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Slider, { slotProps: {
|
|
91
|
+
root: { className: classes.slider },
|
|
92
|
+
valueLabel: { className: classes.sliderValueLabel },
|
|
93
|
+
}, disabled: cellOpacityMode !== 'manual', value: cellOpacity, onChange: handleOpacityChange, "aria-label": "Scatterplot opacity level slider", id: `scatterplot-set-opacity-level-${scatterplotOptionsId}`, valueLabelDisplay: "auto", step: 0.05, min: 0.0, max: 1.0 }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `scatterplot-gene-expression-colormap-${scatterplotOptionsId}`, children: "Gene Expression Colormap" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(OptionSelect, { className: classes.select, value: geneExpressionColormap, onChange: handleGeneExpressionColormapChange, inputProps: {
|
|
85
94
|
id: `scatterplot-gene-expression-colormap-${scatterplotOptionsId}`,
|
|
86
|
-
}, children: GLSL_COLORMAPS.map(cmap => (_jsx("option", { value: cmap, children: cmap }, cmap))) }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `scatterplot-gene-expression-colormap-range-${scatterplotOptionsId}`, children: "Gene Expression Colormap Range" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Slider, {
|
|
95
|
+
}, children: GLSL_COLORMAPS.map(cmap => (_jsx("option", { value: cmap, children: cmap }, cmap))) }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `scatterplot-gene-expression-colormap-range-${scatterplotOptionsId}`, children: "Gene Expression Colormap Range" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Slider, { slotProps: {
|
|
96
|
+
root: { className: classes.slider },
|
|
97
|
+
valueLabel: { className: classes.sliderValueLabel },
|
|
98
|
+
}, value: geneExpressionColormapRange, onChange: handleColormapRangeChangeDebounced, getAriaLabel: (index) => {
|
|
87
99
|
const labelPrefix = index === 0 ? 'Low value slider' : 'High value slider';
|
|
88
100
|
return `${labelPrefix} for scatterplot gene expression colormap range`;
|
|
89
|
-
}, id: `scatterplot-gene-expression-colormap-range-${scatterplotOptionsId}`, valueLabelDisplay: "auto", step: 0.005, min: 0.0, max: 1.0 }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `scatterplot-points-visible-${scatterplotOptionsId}`, children: "Points Visible" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Checkbox, { className: classes.checkbox, checked: embeddingPointsVisible, onChange: handlePointsVisibilityChange, name: "scatterplot-option-point-visibility", color: "default",
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
101
|
+
}, id: `scatterplot-gene-expression-colormap-range-${scatterplotOptionsId}`, valueLabelDisplay: "auto", step: 0.005, min: 0.0, max: 1.0 }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `scatterplot-points-visible-${scatterplotOptionsId}`, children: "Points Visible" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Checkbox, { className: classes.checkbox, checked: embeddingPointsVisible, onChange: handlePointsVisibilityChange, name: "scatterplot-option-point-visibility", color: "default", slotProps: { input: {
|
|
102
|
+
'aria-label': 'Show or hide scatterplot points',
|
|
103
|
+
id: `scatterplot-points-visible-${scatterplotOptionsId}`,
|
|
104
|
+
} } }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `scatterplot-contours-visible-${scatterplotOptionsId}`, children: "Contours Visible" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Checkbox, { className: classes.checkbox, checked: embeddingContoursVisible, onChange: handleContoursVisibilityChange, name: "scatterplot-option-contour-visibility", color: "default", slotProps: { input: {
|
|
105
|
+
'aria-label': 'Show or hide contours',
|
|
106
|
+
id: `scatterplot-contours-visible-${scatterplotOptionsId}`,
|
|
107
|
+
} } }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `scatterplot-contours-filled-${scatterplotOptionsId}`, children: "Contours Filled" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Checkbox, { className: classes.checkbox, checked: embeddingContoursFilled, onChange: handleContoursFilledChange, name: "scatterplot-option-contour-filled", color: "default", slotProps: { input: {
|
|
108
|
+
'aria-label': 'Filled or stroked contours',
|
|
109
|
+
id: `scatterplot-contours-filled-${scatterplotOptionsId}`,
|
|
110
|
+
} } }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `scatterplot-contour-color-encoding-${scatterplotOptionsId}`, children: "Contour Color Encoding" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsxs(OptionSelect, { className: classes.select, value: contourColorEncoding, onChange: handleContourColorEncodingChange, inputProps: {
|
|
99
111
|
id: `scatterplot-contour-color-encoding-${scatterplotOptionsId}`,
|
|
100
|
-
}, children: [_jsx("option", { value: "sampleSetSelection", children: "Sample Sets" }), _jsxs("option", { value: "cellSetSelection", children: [observationsLabelNice, " Sets"] }), _jsx("option", { value: "staticColor", children: "Static Color" })] }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `scatterplot-contour-percentiles-${scatterplotOptionsId}`, children: "Contour Percentiles" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Slider, {
|
|
112
|
+
}, children: [_jsx("option", { value: "sampleSetSelection", children: "Sample Sets" }), _jsxs("option", { value: "cellSetSelection", children: [observationsLabelNice, " Sets"] }), _jsx("option", { value: "staticColor", children: "Static Color" })] }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `scatterplot-contour-percentiles-${scatterplotOptionsId}`, children: "Contour Percentiles" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Slider, { slotProps: {
|
|
113
|
+
root: { className: classes.slider },
|
|
114
|
+
valueLabel: { className: classes.sliderValueLabel },
|
|
115
|
+
}, value: contourPercentiles || defaultContourPercentiles, onChange: handlePercentilesChangeDebounced, getAriaLabel: (index) => {
|
|
116
|
+
if (index === 0) {
|
|
117
|
+
return 'Slider for first (of three) contour percentile threshold, corresponding to lightest-opacity contours';
|
|
118
|
+
}
|
|
119
|
+
if (index === 1) {
|
|
120
|
+
return 'Slider for second (of three) contour percentile threshold, corresponding to second-lightest-opacity contours';
|
|
121
|
+
}
|
|
122
|
+
if (index === 2) {
|
|
123
|
+
return 'Slider for third (of three) contour percentile threshold, corresponding to most-opaque contours';
|
|
124
|
+
}
|
|
125
|
+
return 'Scatterplot sliders for contour percentile thresholds';
|
|
126
|
+
}, id: `scatterplot-contour-percentiles-${scatterplotOptionsId}`, valueLabelDisplay: "auto", step: 0.005, min: 0.009, max: 0.999 }) })] }), setFeatureAggregationStrategy ? (_jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `feature-aggregation-strategy-${scatterplotOptionsId}`, children: "Feature Aggregation Strategy" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(OptionSelect, { className: classes.select, value: featureAggregationStrategy ?? 'first', onChange: handleFeatureAggregationStrategyChange, inputProps: {
|
|
101
127
|
id: `feature-aggregation-strategy-${scatterplotOptionsId}`,
|
|
102
128
|
}, children: FEATURE_AGGREGATION_STRATEGIES.map(opt => (_jsx("option", { value: opt, children: capitalize(opt) }, opt))) }) })] })) : null] }));
|
|
103
129
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AbstractSpatialOrScatterplot.d.ts","sourceRoot":"","sources":["../../src/shared-spatial-scatterplot/AbstractSpatialOrScatterplot.js"],"names":[],"mappings":"AAKA;;;;;GAKG;AACH;IACE,wBAeC;IAZC;;;MAGC;IAED,wBAAoB;IAStB;;;;;;;OAOG;IACH,gDAFG;QAAuB,SAAS,EAAxB,MAAM;KAChB,QAWA;IAED;;;;;OAKG;IACH,mCAFG;QAA0B,QAAQ,EAA1B,MAAM;KAChB,QAGA;IAED;;;;;OAKG;IACH,uBAFW,MAAM,QAIhB;IAED;;;;;OAKG;IACH,mBAFW,MAAM,QAQhB;IAgBD,qCAgFC;IAwCD;;MAEE;IAEF,iBAAa;IA1Ib;;;;;OAKG;IAEH,aALa,MAAM,EAAE,CAOpB;IAuFD;;;;;OAKG;IACH,iFAsBC;IAED;;OAEG;IAEH,2BAEC;IAQD;;;OAGG;IAEH,SAHa,OAAO,CAKnB;IAED;;;OAGG;IACH,
|
|
1
|
+
{"version":3,"file":"AbstractSpatialOrScatterplot.d.ts","sourceRoot":"","sources":["../../src/shared-spatial-scatterplot/AbstractSpatialOrScatterplot.js"],"names":[],"mappings":"AAKA;;;;;GAKG;AACH;IACE,wBAeC;IAZC;;;MAGC;IAED,wBAAoB;IAStB;;;;;;;OAOG;IACH,gDAFG;QAAuB,SAAS,EAAxB,MAAM;KAChB,QAWA;IAED;;;;;OAKG;IACH,mCAFG;QAA0B,QAAQ,EAA1B,MAAM;KAChB,QAGA;IAED;;;;;OAKG;IACH,uBAFW,MAAM,QAIhB;IAED;;;;;OAKG;IACH,mBAFW,MAAM,QAQhB;IAgBD,qCAgFC;IAwCD;;MAEE;IAEF,iBAAa;IA1Ib;;;;;OAKG;IAEH,aALa,MAAM,EAAE,CAOpB;IAuFD;;;;;OAKG;IACH,iFAsBC;IAED;;OAEG;IAEH,2BAEC;IAQD;;;OAGG;IAEH,SAHa,OAAO,CAKnB;IAED;;;OAGG;IACH,sBA6DC;CACF"}
|
|
@@ -230,6 +230,6 @@ export default class AbstractSpatialOrScatterplot extends PureComponent {
|
|
|
230
230
|
}),
|
|
231
231
|
], layers: gl && viewState.target.slice(0, 2).every(i => typeof i === 'number')
|
|
232
232
|
? layers
|
|
233
|
-
: [], glOptions: DEFAULT_GL_OPTIONS, onWebGLInitialized: this.onWebGLInitialized, onViewStateChange: this.onViewStateChange, viewState: viewState, useDevicePixels: useDevicePixels, controller: tool ? { dragPan: false } : true, getCursor: tool ? getCursorWithTool : getCursor, onHover: this.onHover, children: this.onInitializeViewInfo })] }));
|
|
233
|
+
: [], glOptions: DEFAULT_GL_OPTIONS, onWebGLInitialized: this.onWebGLInitialized, onViewStateChange: this.onViewStateChange, viewState: viewState, useDevicePixels: useDevicePixels, controller: tool ? { dragPan: false } : true, getCursor: tool ? getCursorWithTool : getCursor, onHover: this.onHover, width: "100%", height: "100%", children: this.onInitializeViewInfo })] }));
|
|
234
234
|
}
|
|
235
235
|
}
|
|
@@ -3,9 +3,8 @@ import React from 'react';
|
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { SELECTION_TYPE } from '@vitessce/gl';
|
|
5
5
|
import { PointerIconSVG, SelectLassoIconSVG } from '@vitessce/icons';
|
|
6
|
-
import { makeStyles } from '@
|
|
7
|
-
|
|
8
|
-
const useStyles = makeStyles(() => ({
|
|
6
|
+
import { makeStyles, CenterFocusStrong } from '@vitessce/styles';
|
|
7
|
+
const useStyles = makeStyles()(() => ({
|
|
9
8
|
toolButton: {
|
|
10
9
|
display: 'inline-flex',
|
|
11
10
|
'&:active': {
|
|
@@ -49,6 +48,7 @@ const useStyles = makeStyles(() => ({
|
|
|
49
48
|
marginRight: '8px',
|
|
50
49
|
'& > svg': {
|
|
51
50
|
verticalAlign: 'middle',
|
|
51
|
+
display: 'inline-block',
|
|
52
52
|
color: 'black',
|
|
53
53
|
},
|
|
54
54
|
'&:active': {
|
|
@@ -65,19 +65,19 @@ const useStyles = makeStyles(() => ({
|
|
|
65
65
|
}));
|
|
66
66
|
export function IconTool(props) {
|
|
67
67
|
const { alt, onClick, isActive, children, } = props;
|
|
68
|
-
const classes = useStyles();
|
|
68
|
+
const { classes } = useStyles();
|
|
69
69
|
return (_jsx("button", { className: clsx(classes.toolIcon, { [classes.toolActive]: isActive }), onClick: onClick, type: "button", title: alt, children: children }));
|
|
70
70
|
}
|
|
71
71
|
export function IconButton(props) {
|
|
72
72
|
const { alt, onClick, children, } = props;
|
|
73
|
-
const classes = useStyles();
|
|
73
|
+
const { classes } = useStyles();
|
|
74
74
|
return (_jsx("button", { className: clsx(classes.toolIcon, classes.toolButton), onClick: onClick, type: "button", title: alt, children: children }));
|
|
75
75
|
}
|
|
76
76
|
export default function ToolMenu(props) {
|
|
77
77
|
const pointerIconAltText = 'Pointer tool';
|
|
78
78
|
const lassoIconAltText = 'Select lasso';
|
|
79
79
|
const { setActiveTool, activeTool, visibleTools = { pan: true, selectLasso: true }, recenterOnClick = () => { }, } = props;
|
|
80
|
-
const classes = useStyles();
|
|
80
|
+
const { classes } = useStyles();
|
|
81
81
|
const onRecenterButtonCLick = () => {
|
|
82
82
|
recenterOnClick();
|
|
83
83
|
};
|
|
@@ -1,12 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { describe, it, expect
|
|
3
|
-
import '@testing-library/
|
|
4
|
-
import { cleanup, render } from '@testing-library/react';
|
|
2
|
+
import { describe, it, expect } from 'vitest';
|
|
3
|
+
import { render } from '@testing-library/react';
|
|
5
4
|
import React from 'react';
|
|
6
5
|
import { IconTool, IconButton } from './ToolMenu.js';
|
|
7
|
-
afterEach(() => {
|
|
8
|
-
cleanup();
|
|
9
|
-
});
|
|
10
6
|
describe('ToolMenu.js', () => {
|
|
11
7
|
describe('<IconTool />', () => {
|
|
12
8
|
it('renders with title attribute', () => {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vitessce/scatterplot",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.6.0",
|
|
4
4
|
"author": "HIDIVE Lab at HMS",
|
|
5
5
|
"homepage": "http://vitessce.io",
|
|
6
6
|
"repository": {
|
|
@@ -16,29 +16,29 @@
|
|
|
16
16
|
"dist-tsc"
|
|
17
17
|
],
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@material-ui/core": "~4.12.3",
|
|
20
|
-
"@material-ui/icons": "~4.11.2",
|
|
21
19
|
"clsx": "^1.1.1",
|
|
22
20
|
"d3-force": "^2.1.1",
|
|
23
21
|
"d3-quadtree": "^1.0.7",
|
|
24
22
|
"lodash-es": "^4.17.21",
|
|
25
23
|
"react-aria": "^3.28.0",
|
|
26
|
-
"@vitessce/
|
|
27
|
-
"@vitessce/
|
|
28
|
-
"@vitessce/
|
|
29
|
-
"@vitessce/
|
|
30
|
-
"@vitessce/
|
|
31
|
-
"@vitessce/
|
|
24
|
+
"@vitessce/styles": "3.6.0",
|
|
25
|
+
"@vitessce/constants-internal": "3.6.0",
|
|
26
|
+
"@vitessce/gl": "3.6.0",
|
|
27
|
+
"@vitessce/icons": "3.6.0",
|
|
28
|
+
"@vitessce/tooltip": "3.6.0",
|
|
29
|
+
"@vitessce/utils": "3.6.0",
|
|
30
|
+
"@vitessce/vit-s": "3.6.0"
|
|
32
31
|
},
|
|
33
32
|
"devDependencies": {
|
|
34
|
-
"@testing-library/jest-dom": "^
|
|
35
|
-
"@testing-library/react": "^
|
|
33
|
+
"@testing-library/jest-dom": "^6.6.3",
|
|
34
|
+
"@testing-library/react": "^16.3.0",
|
|
36
35
|
"react": "^18.0.0",
|
|
37
|
-
"
|
|
38
|
-
"
|
|
36
|
+
"react-dom": "^18.0.0",
|
|
37
|
+
"vite": "^6.3.5",
|
|
38
|
+
"vitest": "^3.1.4"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
|
-
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
|
41
|
+
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
|
42
42
|
},
|
|
43
43
|
"scripts": {
|
|
44
44
|
"bundle": "pnpm exec vite build -c ../../../scripts/vite.config.js",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { useCallback } from 'react';
|
|
2
2
|
import { useId } from 'react-aria';
|
|
3
3
|
import { debounce } from 'lodash-es';
|
|
4
|
-
import { Checkbox, Slider, TableCell, TableRow } from '@
|
|
4
|
+
import { Checkbox, Slider, TableCell, TableRow } from '@vitessce/styles';
|
|
5
5
|
import { capitalize } from '@vitessce/utils';
|
|
6
6
|
import {
|
|
7
7
|
usePlotOptionsStyles, CellColorEncodingOption, OptionsContainer, OptionSelect,
|
|
@@ -59,7 +59,7 @@ export default function ScatterplotOptions(props) {
|
|
|
59
59
|
|
|
60
60
|
const observationsLabelNice = capitalize(observationsLabel);
|
|
61
61
|
|
|
62
|
-
const classes = usePlotOptionsStyles();
|
|
62
|
+
const { classes } = usePlotOptionsStyles();
|
|
63
63
|
|
|
64
64
|
function handleCellRadiusModeChange(event) {
|
|
65
65
|
setCellRadiusMode(event.target.value);
|
|
@@ -156,10 +156,10 @@ export default function ScatterplotOptions(props) {
|
|
|
156
156
|
onChange={handleLabelVisibilityChange}
|
|
157
157
|
name="scatterplot-option-cell-set-labels"
|
|
158
158
|
color="default"
|
|
159
|
-
|
|
159
|
+
slotProps={{ input: {
|
|
160
160
|
'aria-label': 'Show or hide set labels',
|
|
161
161
|
id: `scatterplot-set-labels-visible-${scatterplotOptionsId}`,
|
|
162
|
-
}}
|
|
162
|
+
} }}
|
|
163
163
|
/>
|
|
164
164
|
</TableCell>
|
|
165
165
|
</TableRow>
|
|
@@ -183,10 +183,10 @@ export default function ScatterplotOptions(props) {
|
|
|
183
183
|
onChange={handleTooltipsVisibilityChange}
|
|
184
184
|
name="scatterplot-option-tooltip-visibility"
|
|
185
185
|
color="default"
|
|
186
|
-
|
|
186
|
+
slotProps={{ input: {
|
|
187
187
|
'aria-label': 'Show or hide tooltips',
|
|
188
188
|
id: `scatterplot-set-tooltips-visible-${scatterplotOptionsId}`,
|
|
189
|
-
}}
|
|
189
|
+
} }}
|
|
190
190
|
/>
|
|
191
191
|
</TableCell>
|
|
192
192
|
</TableRow>
|
|
@@ -200,7 +200,10 @@ export default function ScatterplotOptions(props) {
|
|
|
200
200
|
</TableCell>
|
|
201
201
|
<TableCell className={classes.inputCell} variant="body">
|
|
202
202
|
<Slider
|
|
203
|
-
|
|
203
|
+
slotProps={{
|
|
204
|
+
root: { className: classes.slider },
|
|
205
|
+
valueLabel: { className: classes.sliderValueLabel },
|
|
206
|
+
}}
|
|
204
207
|
disabled={!cellSetLabelsVisible}
|
|
205
208
|
value={cellSetLabelSize}
|
|
206
209
|
onChange={handleLabelSizeChange}
|
|
@@ -228,10 +231,10 @@ export default function ScatterplotOptions(props) {
|
|
|
228
231
|
onChange={handlePolygonVisibilityChange}
|
|
229
232
|
name="scatterplot-option-cell-set-polygons"
|
|
230
233
|
color="default"
|
|
231
|
-
|
|
234
|
+
slotProps={{ input: {
|
|
232
235
|
'aria-label': 'Show or hide polygons',
|
|
233
236
|
id: `scatterplot-set-polygons-visible-${scatterplotOptionsId}`,
|
|
234
|
-
}}
|
|
237
|
+
} }}
|
|
235
238
|
/>
|
|
236
239
|
</TableCell>
|
|
237
240
|
</TableRow>
|
|
@@ -267,7 +270,10 @@ export default function ScatterplotOptions(props) {
|
|
|
267
270
|
</TableCell>
|
|
268
271
|
<TableCell className={classes.inputCell} variant="body">
|
|
269
272
|
<Slider
|
|
270
|
-
|
|
273
|
+
slotProps={{
|
|
274
|
+
root: { className: classes.slider },
|
|
275
|
+
valueLabel: { className: classes.sliderValueLabel },
|
|
276
|
+
}}
|
|
271
277
|
disabled={cellRadiusMode !== 'manual'}
|
|
272
278
|
value={cellRadius}
|
|
273
279
|
onChange={handleRadiusChange}
|
|
@@ -312,7 +318,10 @@ export default function ScatterplotOptions(props) {
|
|
|
312
318
|
</TableCell>
|
|
313
319
|
<TableCell className={classes.inputCell} variant="body">
|
|
314
320
|
<Slider
|
|
315
|
-
|
|
321
|
+
slotProps={{
|
|
322
|
+
root: { className: classes.slider },
|
|
323
|
+
valueLabel: { className: classes.sliderValueLabel },
|
|
324
|
+
}}
|
|
316
325
|
disabled={cellOpacityMode !== 'manual'}
|
|
317
326
|
value={cellOpacity}
|
|
318
327
|
onChange={handleOpacityChange}
|
|
@@ -358,7 +367,10 @@ export default function ScatterplotOptions(props) {
|
|
|
358
367
|
</TableCell>
|
|
359
368
|
<TableCell className={classes.inputCell} variant="body">
|
|
360
369
|
<Slider
|
|
361
|
-
|
|
370
|
+
slotProps={{
|
|
371
|
+
root: { className: classes.slider },
|
|
372
|
+
valueLabel: { className: classes.sliderValueLabel },
|
|
373
|
+
}}
|
|
362
374
|
value={geneExpressionColormapRange}
|
|
363
375
|
onChange={handleColormapRangeChangeDebounced}
|
|
364
376
|
getAriaLabel={(index) => {
|
|
@@ -388,10 +400,10 @@ export default function ScatterplotOptions(props) {
|
|
|
388
400
|
onChange={handlePointsVisibilityChange}
|
|
389
401
|
name="scatterplot-option-point-visibility"
|
|
390
402
|
color="default"
|
|
391
|
-
|
|
403
|
+
slotProps={{ input: {
|
|
392
404
|
'aria-label': 'Show or hide scatterplot points',
|
|
393
405
|
id: `scatterplot-points-visible-${scatterplotOptionsId}`,
|
|
394
|
-
}}
|
|
406
|
+
} }}
|
|
395
407
|
/>
|
|
396
408
|
</TableCell>
|
|
397
409
|
</TableRow>
|
|
@@ -410,10 +422,10 @@ export default function ScatterplotOptions(props) {
|
|
|
410
422
|
onChange={handleContoursVisibilityChange}
|
|
411
423
|
name="scatterplot-option-contour-visibility"
|
|
412
424
|
color="default"
|
|
413
|
-
|
|
425
|
+
slotProps={{ input: {
|
|
414
426
|
'aria-label': 'Show or hide contours',
|
|
415
427
|
id: `scatterplot-contours-visible-${scatterplotOptionsId}`,
|
|
416
|
-
}}
|
|
428
|
+
} }}
|
|
417
429
|
/>
|
|
418
430
|
</TableCell>
|
|
419
431
|
</TableRow>
|
|
@@ -432,10 +444,10 @@ export default function ScatterplotOptions(props) {
|
|
|
432
444
|
onChange={handleContoursFilledChange}
|
|
433
445
|
name="scatterplot-option-contour-filled"
|
|
434
446
|
color="default"
|
|
435
|
-
|
|
447
|
+
slotProps={{ input: {
|
|
436
448
|
'aria-label': 'Filled or stroked contours',
|
|
437
449
|
id: `scatterplot-contours-filled-${scatterplotOptionsId}`,
|
|
438
|
-
}}
|
|
450
|
+
} }}
|
|
439
451
|
/>
|
|
440
452
|
</TableCell>
|
|
441
453
|
</TableRow>
|
|
@@ -472,10 +484,24 @@ export default function ScatterplotOptions(props) {
|
|
|
472
484
|
</TableCell>
|
|
473
485
|
<TableCell className={classes.inputCell} variant="body">
|
|
474
486
|
<Slider
|
|
475
|
-
|
|
487
|
+
slotProps={{
|
|
488
|
+
root: { className: classes.slider },
|
|
489
|
+
valueLabel: { className: classes.sliderValueLabel },
|
|
490
|
+
}}
|
|
476
491
|
value={contourPercentiles || defaultContourPercentiles}
|
|
477
492
|
onChange={handlePercentilesChangeDebounced}
|
|
478
|
-
|
|
493
|
+
getAriaLabel={(index) => {
|
|
494
|
+
if (index === 0) {
|
|
495
|
+
return 'Slider for first (of three) contour percentile threshold, corresponding to lightest-opacity contours';
|
|
496
|
+
}
|
|
497
|
+
if (index === 1) {
|
|
498
|
+
return 'Slider for second (of three) contour percentile threshold, corresponding to second-lightest-opacity contours';
|
|
499
|
+
}
|
|
500
|
+
if (index === 2) {
|
|
501
|
+
return 'Slider for third (of three) contour percentile threshold, corresponding to most-opaque contours';
|
|
502
|
+
}
|
|
503
|
+
return 'Scatterplot sliders for contour percentile thresholds';
|
|
504
|
+
}}
|
|
479
505
|
id={`scatterplot-contour-percentiles-${scatterplotOptionsId}`}
|
|
480
506
|
valueLabelDisplay="auto"
|
|
481
507
|
step={0.005}
|
|
@@ -288,6 +288,8 @@ export default class AbstractSpatialOrScatterplot extends PureComponent {
|
|
|
288
288
|
controller={tool ? { dragPan: false } : true}
|
|
289
289
|
getCursor={tool ? getCursorWithTool : getCursor}
|
|
290
290
|
onHover={this.onHover}
|
|
291
|
+
width="100%"
|
|
292
|
+
height="100%"
|
|
291
293
|
>
|
|
292
294
|
{this.onInitializeViewInfo}
|
|
293
295
|
</deck.DeckGL>
|
|
@@ -2,10 +2,9 @@ import React from 'react';
|
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import { SELECTION_TYPE } from '@vitessce/gl';
|
|
4
4
|
import { PointerIconSVG, SelectLassoIconSVG } from '@vitessce/icons';
|
|
5
|
-
import { makeStyles } from '@
|
|
6
|
-
import { CenterFocusStrong } from '@material-ui/icons';
|
|
5
|
+
import { makeStyles, CenterFocusStrong } from '@vitessce/styles';
|
|
7
6
|
|
|
8
|
-
const useStyles = makeStyles(() => ({
|
|
7
|
+
const useStyles = makeStyles()(() => ({
|
|
9
8
|
toolButton: {
|
|
10
9
|
display: 'inline-flex',
|
|
11
10
|
'&:active': {
|
|
@@ -52,6 +51,7 @@ const useStyles = makeStyles(() => ({
|
|
|
52
51
|
|
|
53
52
|
'& > svg': {
|
|
54
53
|
verticalAlign: 'middle',
|
|
54
|
+
display: 'inline-block',
|
|
55
55
|
color: 'black',
|
|
56
56
|
},
|
|
57
57
|
'&:active': {
|
|
@@ -72,7 +72,7 @@ export function IconTool(props) {
|
|
|
72
72
|
const {
|
|
73
73
|
alt, onClick, isActive, children,
|
|
74
74
|
} = props;
|
|
75
|
-
const classes = useStyles();
|
|
75
|
+
const { classes } = useStyles();
|
|
76
76
|
return (
|
|
77
77
|
<button
|
|
78
78
|
className={clsx(classes.toolIcon, { [classes.toolActive]: isActive })}
|
|
@@ -89,7 +89,7 @@ export function IconButton(props) {
|
|
|
89
89
|
const {
|
|
90
90
|
alt, onClick, children,
|
|
91
91
|
} = props;
|
|
92
|
-
const classes = useStyles();
|
|
92
|
+
const { classes } = useStyles();
|
|
93
93
|
return (
|
|
94
94
|
<button
|
|
95
95
|
className={clsx(classes.toolIcon, classes.toolButton)}
|
|
@@ -111,7 +111,7 @@ export default function ToolMenu(props) {
|
|
|
111
111
|
visibleTools = { pan: true, selectLasso: true },
|
|
112
112
|
recenterOnClick = () => {},
|
|
113
113
|
} = props;
|
|
114
|
-
const classes = useStyles();
|
|
114
|
+
const { classes } = useStyles();
|
|
115
115
|
|
|
116
116
|
const onRecenterButtonCLick = () => {
|
|
117
117
|
recenterOnClick();
|
|
@@ -1,14 +1,9 @@
|
|
|
1
|
-
import { describe, it, expect
|
|
2
|
-
import '@testing-library/
|
|
3
|
-
import { cleanup, render } from '@testing-library/react';
|
|
1
|
+
import { describe, it, expect } from 'vitest';
|
|
2
|
+
import { render } from '@testing-library/react';
|
|
4
3
|
import React from 'react';
|
|
5
4
|
|
|
6
5
|
import { IconTool, IconButton } from './ToolMenu.js';
|
|
7
6
|
|
|
8
|
-
afterEach(() => {
|
|
9
|
-
cleanup();
|
|
10
|
-
});
|
|
11
|
-
|
|
12
7
|
describe('ToolMenu.js', () => {
|
|
13
8
|
describe('<IconTool />', () => {
|
|
14
9
|
it('renders with title attribute', () => {
|
package/dist/deflate-f6d73584.js
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { i as inflate_1 } from "./pako.esm-68f84e2a.js";
|
|
2
|
-
import { B as BaseDecoder } from "./index-54d5c6e0.js";
|
|
3
|
-
import "react";
|
|
4
|
-
import "@vitessce/vit-s";
|
|
5
|
-
import "react-dom";
|
|
6
|
-
class DeflateDecoder extends BaseDecoder {
|
|
7
|
-
decodeBlock(buffer) {
|
|
8
|
-
return inflate_1(new Uint8Array(buffer)).buffer;
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
export {
|
|
12
|
-
DeflateDecoder as default
|
|
13
|
-
};
|