@vitessce/scatterplot 3.4.6 → 3.4.7
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-dff55086.js → deflate-a9048cdd.js} +1 -1
- package/dist/{index-1a99a44a.js → index-eee2d28f.js} +5292 -2037
- package/dist/index.js +1 -1
- package/dist/{jpeg-472bcdf1.js → jpeg-7c226d63.js} +1 -1
- package/dist/{lerc-56848472.js → lerc-0384b6ad.js} +1 -1
- package/dist/{lzw-5f7284c3.js → lzw-d2cff9a8.js} +1 -1
- package/dist/{packbits-fcb8ce02.js → packbits-43302cb2.js} +1 -1
- package/dist/{raw-1772c7d9.js → raw-3ece8be3.js} +1 -1
- package/dist/{webimage-f7836afc.js → webimage-4065dcff.js} +1 -1
- package/dist-tsc/Scatterplot.d.ts.map +1 -1
- package/dist-tsc/Scatterplot.js +125 -5
- package/dist-tsc/ScatterplotOptions.d.ts.map +1 -1
- package/dist-tsc/ScatterplotOptions.js +29 -2
- package/dist-tsc/shared-spatial-scatterplot/AbstractSpatialOrScatterplot.d.ts.map +1 -1
- package/package.json +7 -7
- package/src/Scatterplot.js +151 -4
- package/src/ScatterplotOptions.js +149 -0
|
@@ -34,6 +34,20 @@ export default function ScatterplotOptions(props) {
|
|
|
34
34
|
setGeneExpressionColormap,
|
|
35
35
|
geneExpressionColormapRange,
|
|
36
36
|
setGeneExpressionColormapRange,
|
|
37
|
+
|
|
38
|
+
embeddingPointsVisible,
|
|
39
|
+
setEmbeddingPointsVisible,
|
|
40
|
+
embeddingContoursVisible,
|
|
41
|
+
setEmbeddingContoursVisible,
|
|
42
|
+
embeddingContoursFilled,
|
|
43
|
+
setEmbeddingContoursFilled,
|
|
44
|
+
|
|
45
|
+
contourPercentiles,
|
|
46
|
+
setContourPercentiles,
|
|
47
|
+
defaultContourPercentiles,
|
|
48
|
+
|
|
49
|
+
contourColorEncoding,
|
|
50
|
+
setContourColorEncoding,
|
|
37
51
|
} = props;
|
|
38
52
|
|
|
39
53
|
const scatterplotOptionsId = useId();
|
|
@@ -46,6 +60,10 @@ export default function ScatterplotOptions(props) {
|
|
|
46
60
|
setCellRadiusMode(event.target.value);
|
|
47
61
|
}
|
|
48
62
|
|
|
63
|
+
function handleContourColorEncodingChange(event) {
|
|
64
|
+
setContourColorEncoding(event.target.value);
|
|
65
|
+
}
|
|
66
|
+
|
|
49
67
|
function handleCellOpacityModeChange(event) {
|
|
50
68
|
setCellOpacityMode(event.target.value);
|
|
51
69
|
}
|
|
@@ -74,6 +92,18 @@ export default function ScatterplotOptions(props) {
|
|
|
74
92
|
setCellSetPolygonsVisible(event.target.checked);
|
|
75
93
|
}
|
|
76
94
|
|
|
95
|
+
function handlePointsVisibilityChange(event) {
|
|
96
|
+
setEmbeddingPointsVisible(event.target.checked);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
function handleContoursVisibilityChange(event) {
|
|
100
|
+
setEmbeddingContoursVisible(event.target.checked);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
function handleContoursFilledChange(event) {
|
|
104
|
+
setEmbeddingContoursFilled(event.target.checked);
|
|
105
|
+
}
|
|
106
|
+
|
|
77
107
|
function handleGeneExpressionColormapChange(event) {
|
|
78
108
|
setGeneExpressionColormap(event.target.value);
|
|
79
109
|
}
|
|
@@ -86,6 +116,14 @@ export default function ScatterplotOptions(props) {
|
|
|
86
116
|
[handleColormapRangeChange],
|
|
87
117
|
);
|
|
88
118
|
|
|
119
|
+
function handlePercentilesChange(event, values) {
|
|
120
|
+
setContourPercentiles(values);
|
|
121
|
+
}
|
|
122
|
+
const handlePercentilesChangeDebounced = useCallback(
|
|
123
|
+
debounce(handlePercentilesChange, 5, { trailing: true }),
|
|
124
|
+
[handlePercentilesChange],
|
|
125
|
+
);
|
|
126
|
+
|
|
89
127
|
return (
|
|
90
128
|
<OptionsContainer>
|
|
91
129
|
{children}
|
|
@@ -326,6 +364,117 @@ export default function ScatterplotOptions(props) {
|
|
|
326
364
|
/>
|
|
327
365
|
</TableCell>
|
|
328
366
|
</TableRow>
|
|
367
|
+
<TableRow>
|
|
368
|
+
<TableCell className={classes.labelCell} variant="head" scope="row">
|
|
369
|
+
<label
|
|
370
|
+
htmlFor={`scatterplot-points-visible-${scatterplotOptionsId}`}
|
|
371
|
+
>
|
|
372
|
+
Points Visible
|
|
373
|
+
</label>
|
|
374
|
+
</TableCell>
|
|
375
|
+
<TableCell className={classes.inputCell} variant="body">
|
|
376
|
+
<Checkbox
|
|
377
|
+
className={classes.checkbox}
|
|
378
|
+
checked={embeddingPointsVisible}
|
|
379
|
+
onChange={handlePointsVisibilityChange}
|
|
380
|
+
name="scatterplot-option-point-visibility"
|
|
381
|
+
color="default"
|
|
382
|
+
inputProps={{
|
|
383
|
+
'aria-label': 'Show or hide scatterplot points',
|
|
384
|
+
id: `scatterplot-points-visible-${scatterplotOptionsId}`,
|
|
385
|
+
}}
|
|
386
|
+
/>
|
|
387
|
+
</TableCell>
|
|
388
|
+
</TableRow>
|
|
389
|
+
<TableRow>
|
|
390
|
+
<TableCell className={classes.labelCell} variant="head" scope="row">
|
|
391
|
+
<label
|
|
392
|
+
htmlFor={`scatterplot-contours-visible-${scatterplotOptionsId}`}
|
|
393
|
+
>
|
|
394
|
+
Contours Visible
|
|
395
|
+
</label>
|
|
396
|
+
</TableCell>
|
|
397
|
+
<TableCell className={classes.inputCell} variant="body">
|
|
398
|
+
<Checkbox
|
|
399
|
+
className={classes.checkbox}
|
|
400
|
+
checked={embeddingContoursVisible}
|
|
401
|
+
onChange={handleContoursVisibilityChange}
|
|
402
|
+
name="scatterplot-option-contour-visibility"
|
|
403
|
+
color="default"
|
|
404
|
+
inputProps={{
|
|
405
|
+
'aria-label': 'Show or hide contours',
|
|
406
|
+
id: `scatterplot-contours-visible-${scatterplotOptionsId}`,
|
|
407
|
+
}}
|
|
408
|
+
/>
|
|
409
|
+
</TableCell>
|
|
410
|
+
</TableRow>
|
|
411
|
+
<TableRow>
|
|
412
|
+
<TableCell className={classes.labelCell} variant="head" scope="row">
|
|
413
|
+
<label
|
|
414
|
+
htmlFor={`scatterplot-contours-filled-${scatterplotOptionsId}`}
|
|
415
|
+
>
|
|
416
|
+
Contours Filled
|
|
417
|
+
</label>
|
|
418
|
+
</TableCell>
|
|
419
|
+
<TableCell className={classes.inputCell} variant="body">
|
|
420
|
+
<Checkbox
|
|
421
|
+
className={classes.checkbox}
|
|
422
|
+
checked={embeddingContoursFilled}
|
|
423
|
+
onChange={handleContoursFilledChange}
|
|
424
|
+
name="scatterplot-option-contour-filled"
|
|
425
|
+
color="default"
|
|
426
|
+
inputProps={{
|
|
427
|
+
'aria-label': 'Filled or stroked contours',
|
|
428
|
+
id: `scatterplot-contours-filled-${scatterplotOptionsId}`,
|
|
429
|
+
}}
|
|
430
|
+
/>
|
|
431
|
+
</TableCell>
|
|
432
|
+
</TableRow>
|
|
433
|
+
<TableRow>
|
|
434
|
+
<TableCell className={classes.labelCell} variant="head" scope="row">
|
|
435
|
+
<label
|
|
436
|
+
htmlFor={`scatterplot-contour-color-encoding-${scatterplotOptionsId}`}
|
|
437
|
+
>
|
|
438
|
+
Contour Color Encoding
|
|
439
|
+
</label>
|
|
440
|
+
</TableCell>
|
|
441
|
+
<TableCell className={classes.inputCell} variant="body">
|
|
442
|
+
<OptionSelect
|
|
443
|
+
className={classes.select}
|
|
444
|
+
value={contourColorEncoding}
|
|
445
|
+
onChange={handleContourColorEncodingChange}
|
|
446
|
+
inputProps={{
|
|
447
|
+
id: `scatterplot-contour-color-encoding-${scatterplotOptionsId}`,
|
|
448
|
+
}}
|
|
449
|
+
>
|
|
450
|
+
<option value="sampleSetSelection">Sample Sets</option>
|
|
451
|
+
<option value="cellSetSelection">{observationsLabelNice} Sets</option>
|
|
452
|
+
<option value="staticColor">Static Color</option>
|
|
453
|
+
</OptionSelect>
|
|
454
|
+
</TableCell>
|
|
455
|
+
</TableRow>
|
|
456
|
+
<TableRow>
|
|
457
|
+
<TableCell className={classes.labelCell} variant="head" scope="row">
|
|
458
|
+
<label
|
|
459
|
+
htmlFor={`scatterplot-contour-percentiles-${scatterplotOptionsId}`}
|
|
460
|
+
>
|
|
461
|
+
Contour Percentiles
|
|
462
|
+
</label>
|
|
463
|
+
</TableCell>
|
|
464
|
+
<TableCell className={classes.inputCell} variant="body">
|
|
465
|
+
<Slider
|
|
466
|
+
classes={{ root: classes.slider, valueLabel: classes.sliderValueLabel }}
|
|
467
|
+
value={contourPercentiles || defaultContourPercentiles}
|
|
468
|
+
onChange={handlePercentilesChangeDebounced}
|
|
469
|
+
aria-label="Scatterplot sliders for contour percentile thresholds"
|
|
470
|
+
id={`scatterplot-contour-percentiles-${scatterplotOptionsId}`}
|
|
471
|
+
valueLabelDisplay="auto"
|
|
472
|
+
step={0.005}
|
|
473
|
+
min={0.009}
|
|
474
|
+
max={0.999}
|
|
475
|
+
/>
|
|
476
|
+
</TableCell>
|
|
477
|
+
</TableRow>
|
|
329
478
|
</OptionsContainer>
|
|
330
479
|
);
|
|
331
480
|
}
|