@haniffalab/cherita-react 1.3.0-dev.2025-06-04.6573608f → 1.3.0-dev.2025-06-06.0b38976b
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/assets/images/plots/dotplot.svg +152 -0
- package/dist/assets/images/plots/heatmap.svg +193 -0
- package/dist/assets/images/plots/matrixplot.svg +275 -0
- package/dist/assets/images/plots/scatterplot.svg +198 -0
- package/dist/assets/images/plots/violin.svg +50 -0
- package/dist/cjs/components/scatterplot/Scatterplot.js +77 -91
- package/dist/esm/components/scatterplot/Scatterplot.js +77 -91
- package/package.json +4 -3
|
@@ -0,0 +1,198 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
2
|
+
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
|
3
|
+
|
|
4
|
+
<svg
|
|
5
|
+
version="1.1"
|
|
6
|
+
id="svg1"
|
|
7
|
+
width="299.52322"
|
|
8
|
+
height="282.82245"
|
|
9
|
+
viewBox="0 0 299.52322 282.82245"
|
|
10
|
+
sodipodi:docname="umap.svg"
|
|
11
|
+
inkscape:version="1.4 (1:1.4+202410161351+e7c3feb100)"
|
|
12
|
+
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
|
13
|
+
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
|
14
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
15
|
+
xmlns:svg="http://www.w3.org/2000/svg">
|
|
16
|
+
<defs
|
|
17
|
+
id="defs1" />
|
|
18
|
+
<sodipodi:namedview
|
|
19
|
+
id="namedview1"
|
|
20
|
+
pagecolor="#ffffff"
|
|
21
|
+
bordercolor="#000000"
|
|
22
|
+
borderopacity="0.25"
|
|
23
|
+
inkscape:showpageshadow="2"
|
|
24
|
+
inkscape:pageopacity="0.0"
|
|
25
|
+
inkscape:pagecheckerboard="0"
|
|
26
|
+
inkscape:deskcolor="#d1d1d1"
|
|
27
|
+
inkscape:zoom="0.51375727"
|
|
28
|
+
inkscape:cx="883.68579"
|
|
29
|
+
inkscape:cy="221.89467"
|
|
30
|
+
inkscape:window-width="1854"
|
|
31
|
+
inkscape:window-height="1011"
|
|
32
|
+
inkscape:window-x="0"
|
|
33
|
+
inkscape:window-y="0"
|
|
34
|
+
inkscape:window-maximized="1"
|
|
35
|
+
inkscape:current-layer="g1" />
|
|
36
|
+
<g
|
|
37
|
+
inkscape:groupmode="layer"
|
|
38
|
+
inkscape:label="Image"
|
|
39
|
+
id="g1"
|
|
40
|
+
transform="translate(-61.989251,-346.50722)">
|
|
41
|
+
<circle
|
|
42
|
+
style="opacity:0.994362;fill:#000000;fill-opacity:1;stroke:#070707;stroke-width:0.663"
|
|
43
|
+
id="path1"
|
|
44
|
+
cx="151.91397"
|
|
45
|
+
cy="358.70969"
|
|
46
|
+
r="11.870968" />
|
|
47
|
+
<circle
|
|
48
|
+
style="opacity:0.994362;fill:#000000;fill-opacity:1;stroke:#070707;stroke-width:0.663"
|
|
49
|
+
id="path1-3"
|
|
50
|
+
cx="100.01968"
|
|
51
|
+
cy="380.43903"
|
|
52
|
+
r="11.870968" />
|
|
53
|
+
<circle
|
|
54
|
+
style="opacity:0.994362;fill:#000000;fill-opacity:1;stroke:#070707;stroke-width:0.663"
|
|
55
|
+
id="path1-1"
|
|
56
|
+
cx="122.81537"
|
|
57
|
+
cy="406.75085"
|
|
58
|
+
r="11.870968" />
|
|
59
|
+
<circle
|
|
60
|
+
style="opacity:0.994362;fill:#000000;fill-opacity:1;stroke:#070707;stroke-width:0.663"
|
|
61
|
+
id="path1-36"
|
|
62
|
+
cx="157.06268"
|
|
63
|
+
cy="398.81537"
|
|
64
|
+
r="11.870968" />
|
|
65
|
+
<circle
|
|
66
|
+
style="opacity:0.994362;fill:#000000;fill-opacity:1;stroke:#070707;stroke-width:0.663"
|
|
67
|
+
id="path1-18"
|
|
68
|
+
cx="80.761612"
|
|
69
|
+
cy="421.50354"
|
|
70
|
+
r="11.870968" />
|
|
71
|
+
<circle
|
|
72
|
+
style="opacity:0.994362;fill:#000000;fill-opacity:1;stroke:#070707;stroke-width:0.663"
|
|
73
|
+
id="path1-2"
|
|
74
|
+
cx="108.28849"
|
|
75
|
+
cy="444.78311"
|
|
76
|
+
r="11.870968" />
|
|
77
|
+
<circle
|
|
78
|
+
style="opacity:0.994362;fill:#000000;fill-opacity:1;stroke:#070707;stroke-width:0.663"
|
|
79
|
+
id="path1-22"
|
|
80
|
+
cx="142.9229"
|
|
81
|
+
cy="445.9874"
|
|
82
|
+
r="11.870968" />
|
|
83
|
+
<circle
|
|
84
|
+
style="opacity:0.994362;fill:#000000;fill-opacity:1;stroke:#070707;stroke-width:0.663"
|
|
85
|
+
id="path1-6"
|
|
86
|
+
cx="74.191719"
|
|
87
|
+
cy="466.75085"
|
|
88
|
+
r="11.870968" />
|
|
89
|
+
<circle
|
|
90
|
+
style="opacity:0.994362;fill:#000000;fill-opacity:1;stroke:#070707;stroke-width:0.663"
|
|
91
|
+
id="path1-19"
|
|
92
|
+
cx="110.5143"
|
|
93
|
+
cy="487.65405"
|
|
94
|
+
r="11.870968" />
|
|
95
|
+
<circle
|
|
96
|
+
style="opacity:0.994362;fill:#000000;fill-opacity:1;stroke:#070707;stroke-width:0.663"
|
|
97
|
+
id="path1-5"
|
|
98
|
+
cx="147.77235"
|
|
99
|
+
cy="484.92288"
|
|
100
|
+
r="11.870968" />
|
|
101
|
+
<circle
|
|
102
|
+
style="opacity:0.994362;fill:#000000;fill-opacity:1;stroke:#070707;stroke-width:0.663"
|
|
103
|
+
id="path1-0"
|
|
104
|
+
cx="126.1487"
|
|
105
|
+
cy="521.36377"
|
|
106
|
+
r="11.870968" />
|
|
107
|
+
<circle
|
|
108
|
+
style="opacity:0.994362;fill:#000000;fill-opacity:1;stroke:#070707;stroke-width:0.663"
|
|
109
|
+
id="path1-61"
|
|
110
|
+
cx="294.42828"
|
|
111
|
+
cy="370.49277"
|
|
112
|
+
r="11.870968" />
|
|
113
|
+
<circle
|
|
114
|
+
style="opacity:0.994362;fill:#000000;fill-opacity:1;stroke:#070707;stroke-width:0.663"
|
|
115
|
+
id="path1-65"
|
|
116
|
+
cx="260.76163"
|
|
117
|
+
cy="401.9444"
|
|
118
|
+
r="11.870968" />
|
|
119
|
+
<circle
|
|
120
|
+
style="opacity:0.994362;fill:#000000;fill-opacity:1;stroke:#070707;stroke-width:0.663"
|
|
121
|
+
id="path1-4"
|
|
122
|
+
cx="297.76163"
|
|
123
|
+
cy="419.99814"
|
|
124
|
+
r="11.870968" />
|
|
125
|
+
<circle
|
|
126
|
+
style="opacity:0.994362;fill:#000000;fill-opacity:1;stroke:#070707;stroke-width:0.663"
|
|
127
|
+
id="path1-7"
|
|
128
|
+
cx="329.98743"
|
|
129
|
+
cy="394.70782"
|
|
130
|
+
r="11.870968" />
|
|
131
|
+
<circle
|
|
132
|
+
style="opacity:0.994362;fill:#000000;fill-opacity:1;stroke:#070707;stroke-width:0.663"
|
|
133
|
+
id="path1-78"
|
|
134
|
+
cx="349.31"
|
|
135
|
+
cy="436.11642"
|
|
136
|
+
r="11.870968" />
|
|
137
|
+
<circle
|
|
138
|
+
style="opacity:0.994362;fill:#000000;fill-opacity:1;stroke:#070707;stroke-width:0.663"
|
|
139
|
+
id="path1-31"
|
|
140
|
+
cx="314.79388"
|
|
141
|
+
cy="462.32074"
|
|
142
|
+
r="11.870968" />
|
|
143
|
+
<circle
|
|
144
|
+
style="opacity:0.994362;fill:#000000;fill-opacity:1;stroke:#070707;stroke-width:0.663"
|
|
145
|
+
id="path1-68"
|
|
146
|
+
cx="293.4928"
|
|
147
|
+
cy="495.1702"
|
|
148
|
+
r="11.870968" />
|
|
149
|
+
<circle
|
|
150
|
+
style="opacity:0.994362;fill:#000000;fill-opacity:1;stroke:#070707;stroke-width:0.663"
|
|
151
|
+
id="path1-49"
|
|
152
|
+
cx="267.01968"
|
|
153
|
+
cy="452.15945"
|
|
154
|
+
r="11.870968" />
|
|
155
|
+
<circle
|
|
156
|
+
style="opacity:0.994362;fill:#000000;fill-opacity:1;stroke:#070707;stroke-width:0.663"
|
|
157
|
+
id="path1-71"
|
|
158
|
+
cx="216.14873"
|
|
159
|
+
cy="530.72931"
|
|
160
|
+
r="11.870968" />
|
|
161
|
+
<circle
|
|
162
|
+
style="opacity:0.994362;fill:#000000;fill-opacity:1;stroke:#070707;stroke-width:0.663"
|
|
163
|
+
id="path1-26"
|
|
164
|
+
cx="252.67558"
|
|
165
|
+
cy="538.61108"
|
|
166
|
+
r="11.870968" />
|
|
167
|
+
<circle
|
|
168
|
+
style="opacity:0.994362;fill:#000000;fill-opacity:1;stroke:#070707;stroke-width:0.663"
|
|
169
|
+
id="path1-59"
|
|
170
|
+
cx="258.267"
|
|
171
|
+
cy="579.61108"
|
|
172
|
+
r="11.870968" />
|
|
173
|
+
<circle
|
|
174
|
+
style="opacity:0.994362;fill:#000000;fill-opacity:1;stroke:#070707;stroke-width:0.663"
|
|
175
|
+
id="path1-17"
|
|
176
|
+
cx="220.66486"
|
|
177
|
+
cy="574.41748"
|
|
178
|
+
r="11.870968" />
|
|
179
|
+
<circle
|
|
180
|
+
style="opacity:0.994362;fill:#000000;fill-opacity:1;stroke:#070707;stroke-width:0.663"
|
|
181
|
+
id="path1-9"
|
|
182
|
+
cx="184.00893"
|
|
183
|
+
cy="559.96588"
|
|
184
|
+
r="11.870968" />
|
|
185
|
+
<circle
|
|
186
|
+
style="opacity:0.994362;fill:#000000;fill-opacity:1;stroke:#070707;stroke-width:0.663"
|
|
187
|
+
id="path1-365"
|
|
188
|
+
cx="185.79387"
|
|
189
|
+
cy="598.26697"
|
|
190
|
+
r="11.870968" />
|
|
191
|
+
<circle
|
|
192
|
+
style="opacity:0.994362;fill:#000000;fill-opacity:1;stroke:#070707;stroke-width:0.663"
|
|
193
|
+
id="path1-8"
|
|
194
|
+
cx="224.85838"
|
|
195
|
+
cy="617.1272"
|
|
196
|
+
r="11.870968" />
|
|
197
|
+
</g>
|
|
198
|
+
</svg>
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
2
|
+
<svg
|
|
3
|
+
viewBox="0 0 36.994598 39.994202"
|
|
4
|
+
x="0px"
|
|
5
|
+
y="0px"
|
|
6
|
+
version="1.1"
|
|
7
|
+
id="svg4"
|
|
8
|
+
sodipodi:docname="violin.svg"
|
|
9
|
+
inkscape:version="1.4 (1:1.4+202410161351+e7c3feb100)"
|
|
10
|
+
width="36.994598"
|
|
11
|
+
height="39.994202"
|
|
12
|
+
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
|
13
|
+
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
|
14
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
15
|
+
xmlns:svg="http://www.w3.org/2000/svg">
|
|
16
|
+
<defs
|
|
17
|
+
id="defs4" />
|
|
18
|
+
<sodipodi:namedview
|
|
19
|
+
id="namedview4"
|
|
20
|
+
pagecolor="#ffffff"
|
|
21
|
+
bordercolor="#000000"
|
|
22
|
+
borderopacity="0.25"
|
|
23
|
+
inkscape:showpageshadow="2"
|
|
24
|
+
inkscape:pageopacity="0.0"
|
|
25
|
+
inkscape:pagecheckerboard="0"
|
|
26
|
+
inkscape:deskcolor="#d1d1d1"
|
|
27
|
+
inkscape:zoom="5.757143"
|
|
28
|
+
inkscape:cx="17.369727"
|
|
29
|
+
inkscape:cy="35.781637"
|
|
30
|
+
inkscape:window-width="1854"
|
|
31
|
+
inkscape:window-height="1011"
|
|
32
|
+
inkscape:window-x="0"
|
|
33
|
+
inkscape:window-y="0"
|
|
34
|
+
inkscape:window-maximized="1"
|
|
35
|
+
inkscape:current-layer="svg4" />
|
|
36
|
+
<g
|
|
37
|
+
class="secondary"
|
|
38
|
+
id="g2"
|
|
39
|
+
transform="translate(-12.0029,-8.0029)">
|
|
40
|
+
<path
|
|
41
|
+
d="M 19.9971,24.5 A 6.3078,6.3078 0 0 0 18.5732,20.8389 7.1479,7.1479 0 0 1 16.9971,16.5 V 16.0029 H 16.0029 V 16.5 a 7.1479,7.1479 0 0 1 -1.5761,4.3389 6.3078,6.3078 0 0 0 -1.4239,3.6611 12.4967,12.4967 0 0 1 -0.4853,3.38 13.5076,13.5076 0 0 0 -0.5147,3.62 6.3078,6.3078 0 0 0 1.4239,3.6611 7.1479,7.1479 0 0 1 1.5761,4.3389 19.2486,19.2486 0 0 0 0.5664,4.7246 13.6883,13.6883 0 0 1 0.4336,3.2754 v 0.4971 h 0.9942 V 47.5 A 13.6883,13.6883 0 0 1 17.4307,44.2246 19.2486,19.2486 0 0 0 17.9971,39.5 7.1479,7.1479 0 0 1 19.5732,35.1611 6.3078,6.3078 0 0 0 20.9971,31.5 13.5076,13.5076 0 0 0 20.4824,27.88 12.4967,12.4967 0 0 1 19.9971,24.5 Z"
|
|
42
|
+
id="path1" />
|
|
43
|
+
<path
|
|
44
|
+
d="M 34.6436,12.6963 C 32.8506,11.5537 30.9971,10.3711 30.9971,8.5 V 8.0029 H 30.0029 V 8.5 c 0,1.8711 -1.8535,3.0537 -3.6465,4.1963 -1.7246,1.1006 -3.3535,2.1387 -3.3535,3.8037 0,1.6152 1.2188,2.7031 2.3975,3.7549 1.2793,1.1426 2.6025,2.3242 2.6025,4.2451 a 18.1508,18.1508 0 0 1 -0.542,4.5068 14.5,14.5 0 0 0 -0.458,3.4932 6.038,6.038 0 0 0 1.6,3.7979 5.179,5.179 0 0 1 1.4,3.2021 v 0.4971 h 0.9942 V 39.5 a 5.179,5.179 0 0 1 1.4,-3.2021 6.038,6.038 0 0 0 1.6,-3.7979 14.5,14.5 0 0 0 -0.458,-3.4932 18.1508,18.1508 0 0 1 -0.542,-4.5068 c 0,-1.9209 1.3232,-3.1025 2.6025,-4.2451 1.1787,-1.0518 2.3975,-2.14 2.3975,-3.7549 0,-1.665 -1.6289,-2.7031 -3.3535,-3.8037 z"
|
|
45
|
+
id="path3" />
|
|
46
|
+
<path
|
|
47
|
+
d="M 47.3975,35.7021 A 5.179,5.179 0 0 1 45.9975,32.5 14.5,14.5 0 0 0 45.5395,29.0068 18.1508,18.1508 0 0 1 44.9975,24.5 V 24.0029 H 44.0033 V 24.5 a 18.1508,18.1508 0 0 1 -0.542,4.5068 14.5,14.5 0 0 0 -0.458,3.4932 5.179,5.179 0 0 1 -1.4,3.2021 6.038,6.038 0 0 0 -1.6,3.7979 c 0,1.582 0.9717,2.667 1.9121,3.7158 1.0264,1.1455 2.0879,2.3311 2.0879,4.2842 v 0.4971 h 0.9942 V 47.5 c 0,-1.9531 1.0615,-3.1387 2.0879,-4.2842 0.94,-1.0488 1.9121,-2.1338 1.9121,-3.7158 a 6.038,6.038 0 0 0 -1.6,-3.7979 z"
|
|
48
|
+
id="path2" />
|
|
49
|
+
</g>
|
|
50
|
+
</svg>
|
|
@@ -42,7 +42,7 @@ const INITIAL_VIEW_STATE = {
|
|
|
42
42
|
bearing: 0
|
|
43
43
|
};
|
|
44
44
|
function Scatterplot(_ref) {
|
|
45
|
-
var _settings$
|
|
45
|
+
var _settings$selectedObs2, _settings$selectedObs5, _features$features2, _obsmData$serverError, _xData$serverError, _obsData$serverError, _labelObsData$serverE, _settings$selectedVar, _settings$selectedObs6, _data$positions;
|
|
46
46
|
let {
|
|
47
47
|
radius = null,
|
|
48
48
|
setShowObs,
|
|
@@ -63,13 +63,12 @@ function Scatterplot(_ref) {
|
|
|
63
63
|
const deckRef = (0, _react.useRef)(null);
|
|
64
64
|
const [viewState, setViewState] = (0, _react.useState)(INITIAL_VIEW_STATE);
|
|
65
65
|
const [isRendering, setIsRendering] = (0, _react.useState)(true);
|
|
66
|
+
const [radiusScale, setRadiusScale] = (0, _react.useState)(radius || 1);
|
|
67
|
+
const [isPending, setIsPending] = (0, _react.useState)(false);
|
|
66
68
|
const [data, setData] = (0, _react.useState)({
|
|
67
|
-
ids: [],
|
|
68
69
|
positions: [],
|
|
69
|
-
values: []
|
|
70
|
-
sliceValues: []
|
|
70
|
+
values: []
|
|
71
71
|
});
|
|
72
|
-
const [radiusScale, setRadiusScale] = (0, _react.useState)(radius || 1);
|
|
73
72
|
|
|
74
73
|
// EditableGeoJsonLayer
|
|
75
74
|
const [mode, setMode] = (0, _react.useState)(() => _editModes.ViewMode);
|
|
@@ -96,21 +95,34 @@ function Scatterplot(_ref) {
|
|
|
96
95
|
return rs;
|
|
97
96
|
}, [radius]);
|
|
98
97
|
(0, _react.useEffect)(() => {
|
|
99
|
-
if (
|
|
100
|
-
|
|
101
|
-
|
|
98
|
+
if (obsmData.isPending || settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR && xData.isPending || settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS && obsData.isPending) {
|
|
99
|
+
setIsPending(true);
|
|
100
|
+
} else {
|
|
101
|
+
setIsPending(false);
|
|
102
102
|
setData(d => {
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
103
|
+
let values = d.values;
|
|
104
|
+
if (settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR) {
|
|
105
|
+
values = !xData.serverError ? xData.data : values;
|
|
106
|
+
} else if (settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS) {
|
|
107
|
+
values = !obsData.serverError ? obsData.data : values;
|
|
108
|
+
}
|
|
109
|
+
return {
|
|
110
|
+
positions: !obsmData.serverError ? obsmData.data : d.positions,
|
|
111
|
+
values: values
|
|
112
|
+
};
|
|
106
113
|
});
|
|
114
|
+
}
|
|
115
|
+
}, [obsData.data, obsData.isPending, obsData.serverError, obsmData.data, obsmData.isPending, obsmData.serverError, settings.colorEncoding, xData.data, xData.isPending, xData.serverError]);
|
|
116
|
+
(0, _react.useEffect)(() => {
|
|
117
|
+
if (data.positions && !!data.positions.length) {
|
|
118
|
+
var _deckRef$current, _deckRef$current2;
|
|
107
119
|
const mapHelper = new _mapHelper.MapHelper();
|
|
108
120
|
const {
|
|
109
121
|
latitude,
|
|
110
122
|
longitude,
|
|
111
123
|
zoom,
|
|
112
124
|
bounds
|
|
113
|
-
} = mapHelper.fitBounds(
|
|
125
|
+
} = mapHelper.fitBounds(data.positions, {
|
|
114
126
|
width: deckRef === null || deckRef === void 0 || (_deckRef$current = deckRef.current) === null || _deckRef$current === void 0 || (_deckRef$current = _deckRef$current.deck) === null || _deckRef$current === void 0 ? void 0 : _deckRef$current.width,
|
|
115
127
|
height: deckRef === null || deckRef === void 0 || (_deckRef$current2 = deckRef.current) === null || _deckRef$current2 === void 0 || (_deckRef$current2 = _deckRef$current2.deck) === null || _deckRef$current2 === void 0 ? void 0 : _deckRef$current2.height
|
|
116
128
|
});
|
|
@@ -122,15 +134,8 @@ function Scatterplot(_ref) {
|
|
|
122
134
|
zoom: zoom
|
|
123
135
|
});
|
|
124
136
|
});
|
|
125
|
-
} else if (!obsmData.isPending && obsmData.serverError) {
|
|
126
|
-
setIsRendering(true);
|
|
127
|
-
setData(d => {
|
|
128
|
-
return _objectSpread(_objectSpread({}, d), {}, {
|
|
129
|
-
positions: []
|
|
130
|
-
});
|
|
131
|
-
});
|
|
132
137
|
}
|
|
133
|
-
}, [settings.selectedObsm, getRadiusScale, obsmData.data, obsmData.isPending, obsmData.serverError]);
|
|
138
|
+
}, [settings.selectedObsm, getRadiusScale, obsmData.data, obsmData.isPending, obsmData.serverError, data.positions]);
|
|
134
139
|
const getBounds = (0, _react.useCallback)(() => {
|
|
135
140
|
var _deckRef$current3, _deckRef$current4;
|
|
136
141
|
const {
|
|
@@ -147,65 +152,47 @@ function Scatterplot(_ref) {
|
|
|
147
152
|
zoom
|
|
148
153
|
};
|
|
149
154
|
}, [data.positions]);
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
if (!obsData.isPending && !obsData.serverError) {
|
|
173
|
-
setData(d => {
|
|
174
|
-
return _objectSpread(_objectSpread({}, d), {}, {
|
|
175
|
-
values: obsData.data
|
|
176
|
-
});
|
|
177
|
-
});
|
|
178
|
-
} else if (!obsData.isPending && obsData.serverError) {
|
|
179
|
-
setData(d => {
|
|
180
|
-
return _objectSpread(_objectSpread({}, d), {}, {
|
|
181
|
-
values: []
|
|
182
|
-
});
|
|
183
|
-
});
|
|
184
|
-
}
|
|
185
|
-
} else if (settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR && settings.sliceBy.obs) {
|
|
186
|
-
if (!obsData.isPending && !obsData.serverError) {
|
|
187
|
-
setData(d => {
|
|
188
|
-
return _objectSpread(_objectSpread({}, d), {}, {
|
|
189
|
-
sliceValues: obsData.data
|
|
190
|
-
});
|
|
191
|
-
});
|
|
192
|
-
} else if (!obsData.isPending && obsData.serverError) {
|
|
193
|
-
setData(d => {
|
|
194
|
-
return _objectSpread(_objectSpread({}, d), {}, {
|
|
195
|
-
sliceValues: []
|
|
196
|
-
});
|
|
197
|
-
});
|
|
198
|
-
}
|
|
155
|
+
|
|
156
|
+
// Make stable references for getOriginalIndex and sortedIndexMap
|
|
157
|
+
const identityGetOriginalIndex = (0, _react.useCallback)(i => i, []);
|
|
158
|
+
const identitySortedIndexMap = (0, _react.useMemo)(() => ({
|
|
159
|
+
get: key => key
|
|
160
|
+
}), []);
|
|
161
|
+
const {
|
|
162
|
+
sortedData,
|
|
163
|
+
getOriginalIndex,
|
|
164
|
+
sortedIndexMap
|
|
165
|
+
} = (0, _react.useMemo)(() => {
|
|
166
|
+
var _settings$selectedObs;
|
|
167
|
+
if ((settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR || settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS && ((_settings$selectedObs = settings.selectedObs) === null || _settings$selectedObs === void 0 ? void 0 : _settings$selectedObs.type) === _constants.OBS_TYPES.CONTINUOUS) && data.positions && data.values && data.positions.length === data.values.length) {
|
|
168
|
+
const sortedIndices = _lodash.default.map(data.values, (_v, i) => i).sort((a, b) => data.values[a] - data.values[b]);
|
|
169
|
+
const sortedIndexMap = new Map(_lodash.default.map(sortedIndices, (originalIndex, sortedIndex) => [originalIndex, sortedIndex]));
|
|
170
|
+
return {
|
|
171
|
+
sortedData: _lodash.default.mapValues(data, (v, _k) => {
|
|
172
|
+
return v ? _lodash.default.at(v, sortedIndices) : v;
|
|
173
|
+
}),
|
|
174
|
+
getOriginalIndex: i => sortedIndices[i],
|
|
175
|
+
sortedIndexMap: sortedIndexMap
|
|
176
|
+
};
|
|
199
177
|
}
|
|
200
|
-
|
|
178
|
+
return {
|
|
179
|
+
sortedData: data,
|
|
180
|
+
getOriginalIndex: identityGetOriginalIndex,
|
|
181
|
+
// return original index
|
|
182
|
+
sortedIndexMap: identitySortedIndexMap // return original index
|
|
183
|
+
};
|
|
184
|
+
}, [data, identityGetOriginalIndex, identitySortedIndexMap, settings.colorEncoding, (_settings$selectedObs2 = settings.selectedObs) === null || _settings$selectedObs2 === void 0 ? void 0 : _settings$selectedObs2.type]);
|
|
185
|
+
const sortedObsIndices = (0, _react.useMemo)(() => {
|
|
186
|
+
return obsIndices ? new Set(Array.from(obsIndices, i => sortedIndexMap.get(i))) : obsIndices;
|
|
187
|
+
}, [obsIndices, sortedIndexMap]);
|
|
201
188
|
const isCategorical = (0, _react.useMemo)(() => {
|
|
202
189
|
if (settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS) {
|
|
203
|
-
var _settings$
|
|
204
|
-
return ((_settings$
|
|
190
|
+
var _settings$selectedObs3, _settings$selectedObs4;
|
|
191
|
+
return ((_settings$selectedObs3 = settings.selectedObs) === null || _settings$selectedObs3 === void 0 ? void 0 : _settings$selectedObs3.type) === _constants.OBS_TYPES.CATEGORICAL || ((_settings$selectedObs4 = settings.selectedObs) === null || _settings$selectedObs4 === void 0 ? void 0 : _settings$selectedObs4.type) === _constants.OBS_TYPES.BOOLEAN;
|
|
205
192
|
} else {
|
|
206
193
|
return false;
|
|
207
194
|
}
|
|
208
|
-
}, [settings.colorEncoding, (_settings$
|
|
195
|
+
}, [settings.colorEncoding, (_settings$selectedObs5 = settings.selectedObs) === null || _settings$selectedObs5 === void 0 ? void 0 : _settings$selectedObs5.type]);
|
|
209
196
|
(0, _react.useEffect)(() => {
|
|
210
197
|
dispatch({
|
|
211
198
|
type: "set.controls.valueRange",
|
|
@@ -223,27 +210,27 @@ function Scatterplot(_ref) {
|
|
|
223
210
|
let {
|
|
224
211
|
index
|
|
225
212
|
} = _ref2;
|
|
226
|
-
const grayOut =
|
|
213
|
+
const grayOut = isPending || sortedObsIndices && !sortedObsIndices.has(index);
|
|
227
214
|
return getColor({
|
|
228
|
-
value: (
|
|
215
|
+
value: (sortedData.values[index] - min) / (max - min),
|
|
229
216
|
categorical: isCategorical,
|
|
230
217
|
grayOut: grayOut
|
|
231
218
|
}) || [0, 0, 0, 100];
|
|
232
|
-
}, [
|
|
219
|
+
}, [isPending, sortedObsIndices, getColor, sortedData.values, min, max, isCategorical]);
|
|
233
220
|
|
|
234
221
|
// @TODO: add support for pseudospatial hover to reflect in radius
|
|
235
222
|
const getRadius = (0, _react.useCallback)((_d, _ref3) => {
|
|
236
223
|
let {
|
|
237
224
|
index
|
|
238
225
|
} = _ref3;
|
|
239
|
-
const grayOut =
|
|
226
|
+
const grayOut = sortedObsIndices && !sortedObsIndices.has(index);
|
|
240
227
|
return grayOut ? 1 : 3;
|
|
241
|
-
}, [
|
|
228
|
+
}, [sortedObsIndices]);
|
|
242
229
|
const memoizedLayers = (0, _react.useMemo)(() => {
|
|
243
230
|
return [new _layers.ScatterplotLayer({
|
|
244
231
|
id: "cherita-layer-scatterplot",
|
|
245
232
|
pickable: true,
|
|
246
|
-
data:
|
|
233
|
+
data: sortedData.positions,
|
|
247
234
|
radiusScale: radiusScale,
|
|
248
235
|
radiusMinPixels: 1,
|
|
249
236
|
getPosition: d => d,
|
|
@@ -287,7 +274,7 @@ function Scatterplot(_ref) {
|
|
|
287
274
|
}
|
|
288
275
|
}
|
|
289
276
|
})];
|
|
290
|
-
}, [
|
|
277
|
+
}, [sortedData.positions, features, getFillColor, getRadius, mode, radiusScale, selectedFeatureIndexes]);
|
|
291
278
|
const layers = (0, _react.useDeferredValue)(mode === _editModes.ViewMode ? memoizedLayers.reverse() : memoizedLayers); // draw scatterplot on top of polygons when in ViewMode
|
|
292
279
|
|
|
293
280
|
(0, _react.useEffect)(() => {
|
|
@@ -330,21 +317,21 @@ function Scatterplot(_ref) {
|
|
|
330
317
|
if (settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS && settings.selectedObs && !_lodash.default.some(settings.labelObs, {
|
|
331
318
|
name: settings.selectedObs.name
|
|
332
319
|
})) {
|
|
333
|
-
var
|
|
334
|
-
text.push(getLabel(settings.selectedObs, (
|
|
320
|
+
var _data$values;
|
|
321
|
+
text.push(getLabel(settings.selectedObs, (_data$values = data.values) === null || _data$values === void 0 ? void 0 : _data$values[getOriginalIndex(index)]));
|
|
335
322
|
}
|
|
336
323
|
if (settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR && settings.selectedVar) {
|
|
337
|
-
var
|
|
338
|
-
text.push(getLabel(settings.selectedVar, (
|
|
324
|
+
var _data$values2;
|
|
325
|
+
text.push(getLabel(settings.selectedVar, (_data$values2 = data.values) === null || _data$values2 === void 0 ? void 0 : _data$values2[getOriginalIndex(index)], true));
|
|
339
326
|
}
|
|
340
327
|
if (settings.labelObs.length) {
|
|
341
328
|
text.push(..._lodash.default.map(labelObsData.data, (v, k) => {
|
|
342
329
|
const labelObs = _lodash.default.find(settings.labelObs, o => o.name === k);
|
|
343
|
-
return getLabel(labelObs, v[index]);
|
|
330
|
+
return getLabel(labelObs, v[getOriginalIndex(index)]);
|
|
344
331
|
}));
|
|
345
332
|
}
|
|
346
333
|
if (!text.length) return;
|
|
347
|
-
const grayOut =
|
|
334
|
+
const grayOut = sortedObsIndices && !sortedObsIndices.has(index);
|
|
348
335
|
return {
|
|
349
336
|
text: text.length ? _lodash.default.compact(text).join("\n") : null,
|
|
350
337
|
className: grayOut ? "tooltip-grayout" : "deck-tooltip",
|
|
@@ -357,8 +344,7 @@ function Scatterplot(_ref) {
|
|
|
357
344
|
}
|
|
358
345
|
};
|
|
359
346
|
};
|
|
360
|
-
const
|
|
361
|
-
const error = settings.selectedObsm && ((_obsmData$serverError = obsmData.serverError) === null || _obsmData$serverError === void 0 ? void 0 : _obsmData$serverError.length) || settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR && ((_xData$serverError = xData.serverError) === null || _xData$serverError === void 0 ? void 0 : _xData$serverError.length) || settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS && ((_obsData$serverError = obsData.serverError) === null || _obsData$serverError === void 0 ? void 0 : _obsData$serverError.length) || settings.labelObs.lengh && ((_labelObsData$serverE = labelObsData.serverError) === null || _labelObsData$serverE === void 0 ? void 0 : _labelObsData$serverE.length);
|
|
347
|
+
const error = settings.selectedObsm && ((_obsmData$serverError = obsmData.serverError) === null || _obsmData$serverError === void 0 ? void 0 : _obsmData$serverError.length) || settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR && ((_xData$serverError = xData.serverError) === null || _xData$serverError === void 0 ? void 0 : _xData$serverError.length) || settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS && ((_obsData$serverError = obsData.serverError) === null || _obsData$serverError === void 0 ? void 0 : _obsData$serverError.length) || settings.labelObs.length && ((_labelObsData$serverE = labelObsData.serverError) === null || _labelObsData$serverE === void 0 ? void 0 : _labelObsData$serverE.length);
|
|
362
348
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
363
349
|
className: "cherita-container-scatterplot"
|
|
364
350
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -405,13 +391,13 @@ function Scatterplot(_ref) {
|
|
|
405
391
|
className: "cherita-spatial-footer"
|
|
406
392
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
407
393
|
className: "cherita-toolbox-footer"
|
|
408
|
-
}, error && !
|
|
394
|
+
}, !!error && !isRendering && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
|
|
409
395
|
variant: "danger"
|
|
410
396
|
}, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
|
|
411
397
|
icon: _freeSolidSvgIcons.faTriangleExclamation
|
|
412
398
|
}), "\xA0Error loading data"), /*#__PURE__*/_react.default.createElement(_Toolbox.Toolbox, {
|
|
413
|
-
mode: settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? (_settings$selectedVar = settings.selectedVar) === null || _settings$selectedVar === void 0 ? void 0 : _settings$selectedVar.name : settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS ? (_settings$
|
|
414
|
-
obsLength: parseInt((
|
|
399
|
+
mode: settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? (_settings$selectedVar = settings.selectedVar) === null || _settings$selectedVar === void 0 ? void 0 : _settings$selectedVar.name : settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS ? (_settings$selectedObs6 = settings.selectedObs) === null || _settings$selectedObs6 === void 0 ? void 0 : _settings$selectedObs6.name : null,
|
|
400
|
+
obsLength: parseInt((_data$positions = data.positions) === null || _data$positions === void 0 ? void 0 : _data$positions.length),
|
|
415
401
|
slicedLength: parseInt(slicedLength)
|
|
416
402
|
})), /*#__PURE__*/_react.default.createElement(_Legend.Legend, {
|
|
417
403
|
isCategorical: isCategorical,
|