@haniffalab/cherita-react 0.2.0-dev.2024-02-12.4d768f57 → 0.2.0-dev.2024-02-13.c21dcf17
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/components/dotplot/Dotplot.js +104 -129
- package/dist/components/heatmap/Heatmap.js +48 -74
- package/dist/components/matrixplot/Matrixplot.js +59 -87
- package/dist/components/obs-list/ObsList.js +68 -93
- package/dist/components/obsm-list/ObsmList.js +26 -45
- package/dist/components/scatterplot/Legend.js +7 -5
- package/dist/components/scatterplot/Scatterplot.js +103 -198
- package/dist/components/scatterplot/Toolbox.js +14 -24
- package/dist/components/var-list/VarList.js +66 -112
- package/dist/components/violin/Violin.js +48 -77
- package/dist/constants/constants.js +9 -17
- package/dist/context/DatasetContext.js +114 -107
- package/dist/helpers/color.js +18 -21
- package/dist/helpers/map.js +41 -43
- package/dist/helpers/zarr.js +20 -42
- package/dist/index.js +17 -17
- package/dist/utils/LoadingSpinner.js +4 -4
- package/dist/utils/errors.js +22 -21
- package/dist/utils/requests.js +67 -105
- package/package.json +6 -6
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
@@ -15,68 +14,49 @@ var _constants = require("../../constants/constants");
|
|
|
15
14
|
var _requests = require("../../utils/requests");
|
|
16
15
|
var _reactBootstrap = require("react-bootstrap");
|
|
17
16
|
var _LoadingSpinner = require("../../utils/LoadingSpinner");
|
|
18
|
-
function _getRequireWildcardCache(
|
|
19
|
-
function _interopRequireWildcard(
|
|
17
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
18
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
20
19
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
22
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
23
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
24
|
-
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
25
|
-
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
26
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
27
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
28
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
29
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
30
|
-
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
31
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
32
20
|
function DotplotControls() {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
21
|
+
const dataset = (0, _DatasetContext.useDataset)();
|
|
22
|
+
const dispatch = (0, _DatasetContext.useDatasetDispatch)();
|
|
23
|
+
const [controls, setControls] = (0, _react.useState)({
|
|
24
|
+
standardScale: dataset.controls.standardScale,
|
|
25
|
+
expressionCutoff: dataset.controls.expressionCutoff,
|
|
26
|
+
colorAxis: {
|
|
27
|
+
cmin: dataset.controls.colorAxis.cmin,
|
|
28
|
+
cmax: dataset.controls.colorAxis.cmax
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
(0, _react.useEffect)(() => {
|
|
32
|
+
setControls(c => ({
|
|
33
|
+
...c,
|
|
38
34
|
colorAxis: {
|
|
39
35
|
cmin: dataset.controls.colorAxis.cmin,
|
|
40
36
|
cmax: dataset.controls.colorAxis.cmax
|
|
41
37
|
}
|
|
42
|
-
})
|
|
43
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
44
|
-
controls = _useState2[0],
|
|
45
|
-
setControls = _useState2[1];
|
|
46
|
-
(0, _react.useEffect)(function () {
|
|
47
|
-
setControls(function (c) {
|
|
48
|
-
return _objectSpread(_objectSpread({}, c), {}, {
|
|
49
|
-
colorAxis: {
|
|
50
|
-
cmin: dataset.controls.colorAxis.cmin,
|
|
51
|
-
cmax: dataset.controls.colorAxis.cmax
|
|
52
|
-
}
|
|
53
|
-
});
|
|
54
|
-
});
|
|
38
|
+
}));
|
|
55
39
|
}, [dataset.controls.colorAxis.cmin, dataset.controls.colorAxis.cmax]);
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
});
|
|
77
|
-
}
|
|
78
|
-
}, item.name);
|
|
79
|
-
});
|
|
40
|
+
const colorScaleList = _constants.PLOTLY_COLORSCALES.map(item => /*#__PURE__*/_react.default.createElement(_Dropdown.default.Item, {
|
|
41
|
+
key: item,
|
|
42
|
+
active: dataset.controls.colorScale === item,
|
|
43
|
+
onClick: () => {
|
|
44
|
+
dispatch({
|
|
45
|
+
type: "set.controls.colorScale",
|
|
46
|
+
colorScale: item
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
}, item));
|
|
50
|
+
const standardScaleList = _constants.DOTPLOT_STANDARDSCALES.map(item => /*#__PURE__*/_react.default.createElement(_Dropdown.default.Item, {
|
|
51
|
+
key: item.value,
|
|
52
|
+
active: dataset.controls.standardScale === item.value,
|
|
53
|
+
onClick: () => {
|
|
54
|
+
dispatch({
|
|
55
|
+
type: "set.controls.standardScale",
|
|
56
|
+
standardScale: item.value
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
}, item.name));
|
|
80
60
|
return /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonToolbar, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_Dropdown.default, null, /*#__PURE__*/_react.default.createElement(_Dropdown.default.Toggle, {
|
|
81
61
|
id: "dropdownColorscale",
|
|
82
62
|
variant: "light"
|
|
@@ -88,14 +68,14 @@ function DotplotControls() {
|
|
|
88
68
|
type: "checkbox",
|
|
89
69
|
variant: "outline-primary",
|
|
90
70
|
checked: dataset.controls.meanOnlyExpressed,
|
|
91
|
-
onChange:
|
|
71
|
+
onChange: () => {
|
|
92
72
|
dispatch({
|
|
93
73
|
type: "set.controls.meanOnlyExpressed",
|
|
94
74
|
meanOnlyExpressed: !dataset.controls.meanOnlyExpressed
|
|
95
75
|
});
|
|
96
76
|
}
|
|
97
77
|
}, "Average only above cutoff")), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form, {
|
|
98
|
-
onSubmit:
|
|
78
|
+
onSubmit: e => {
|
|
99
79
|
e.preventDefault();
|
|
100
80
|
dispatch({
|
|
101
81
|
type: "set.controls.expressionCutoff",
|
|
@@ -108,16 +88,17 @@ function DotplotControls() {
|
|
|
108
88
|
step: "0.1",
|
|
109
89
|
min: 0.0,
|
|
110
90
|
value: controls.expressionCutoff,
|
|
111
|
-
onChange:
|
|
112
|
-
setControls(
|
|
91
|
+
onChange: e => {
|
|
92
|
+
setControls({
|
|
93
|
+
...controls,
|
|
113
94
|
expressionCutoff: e.target.value
|
|
114
|
-
})
|
|
95
|
+
});
|
|
115
96
|
}
|
|
116
97
|
}), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
|
|
117
98
|
type: "submit",
|
|
118
99
|
variant: "outline-primary"
|
|
119
100
|
}, "Apply"))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form, {
|
|
120
|
-
onSubmit:
|
|
101
|
+
onSubmit: e => {
|
|
121
102
|
e.preventDefault();
|
|
122
103
|
dispatch({
|
|
123
104
|
type: "set.controls.colorAxis.crange",
|
|
@@ -133,12 +114,14 @@ function DotplotControls() {
|
|
|
133
114
|
step: 0.1,
|
|
134
115
|
min: Math.min(dataset.controls.colorAxis.dmin, 0.0),
|
|
135
116
|
max: dataset.controls.colorAxis.dmax,
|
|
136
|
-
onChange:
|
|
137
|
-
setControls(
|
|
138
|
-
|
|
117
|
+
onChange: e => {
|
|
118
|
+
setControls({
|
|
119
|
+
...controls,
|
|
120
|
+
colorAxis: {
|
|
121
|
+
...controls.colorAxis,
|
|
139
122
|
cmin: e.target.value
|
|
140
|
-
}
|
|
141
|
-
})
|
|
123
|
+
}
|
|
124
|
+
});
|
|
142
125
|
}
|
|
143
126
|
}), /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup.Text, null, "max"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Control, {
|
|
144
127
|
name: "scaleMax",
|
|
@@ -148,22 +131,24 @@ function DotplotControls() {
|
|
|
148
131
|
step: 0.1,
|
|
149
132
|
min: controls.colorAxis.cmin,
|
|
150
133
|
max: dataset.controls.colorAxis.dmax,
|
|
151
|
-
onChange:
|
|
134
|
+
onChange: e => {
|
|
152
135
|
if (parseFloat(e.target.value) > dataset.controls.colorAxis.dmax) {
|
|
153
136
|
e.target.value = dataset.controls.colorAxis.dmax.toFixed(1);
|
|
154
137
|
}
|
|
155
|
-
setControls(
|
|
156
|
-
|
|
138
|
+
setControls({
|
|
139
|
+
...controls,
|
|
140
|
+
colorAxis: {
|
|
141
|
+
...controls.colorAxis,
|
|
157
142
|
cmax: e.target.value
|
|
158
|
-
}
|
|
159
|
-
})
|
|
143
|
+
}
|
|
144
|
+
});
|
|
160
145
|
}
|
|
161
146
|
}), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
|
|
162
147
|
type: "submit",
|
|
163
148
|
variant: "outline-primary"
|
|
164
149
|
}, "Apply"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
|
|
165
150
|
variant: "outline-primary",
|
|
166
|
-
onClick:
|
|
151
|
+
onClick: () => {
|
|
167
152
|
dispatch({
|
|
168
153
|
type: "set.controls.colorAxis.crange",
|
|
169
154
|
cmin: dataset.controls.colorAxis.dmin,
|
|
@@ -173,72 +158,60 @@ function DotplotControls() {
|
|
|
173
158
|
}, "Autoscale"))));
|
|
174
159
|
}
|
|
175
160
|
function Dotplot() {
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
setHasSelections = _useState8[1];
|
|
192
|
-
var _useState9 = (0, _react.useState)({
|
|
193
|
-
url: dataset.url,
|
|
194
|
-
selectedObs: dataset.selectedObs,
|
|
195
|
-
selectedMultiVar: dataset.selectedMultiVar.map(function (i) {
|
|
196
|
-
return i.name;
|
|
197
|
-
}),
|
|
198
|
-
standardScale: dataset.controls.standardScale,
|
|
199
|
-
meanOnlyExpressed: dataset.controls.meanOnlyExpressed,
|
|
200
|
-
expressionCutoff: dataset.controls.expressionCutoff
|
|
201
|
-
}),
|
|
202
|
-
_useState10 = _slicedToArray(_useState9, 2),
|
|
203
|
-
params = _useState10[0],
|
|
204
|
-
setParams = _useState10[1];
|
|
161
|
+
const ENDPOINT = "dotplot";
|
|
162
|
+
const dataset = (0, _DatasetContext.useDataset)();
|
|
163
|
+
const dispatch = (0, _DatasetContext.useDatasetDispatch)();
|
|
164
|
+
const colorscale = (0, _react.useRef)(dataset.controls.colorScale);
|
|
165
|
+
const [data, setData] = (0, _react.useState)([]);
|
|
166
|
+
const [layout, setLayout] = (0, _react.useState)({});
|
|
167
|
+
const [hasSelections, setHasSelections] = (0, _react.useState)(false);
|
|
168
|
+
const [params, setParams] = (0, _react.useState)({
|
|
169
|
+
url: dataset.url,
|
|
170
|
+
selectedObs: dataset.selectedObs,
|
|
171
|
+
selectedMultiVar: dataset.selectedMultiVar.map(i => i.name),
|
|
172
|
+
standardScale: dataset.controls.standardScale,
|
|
173
|
+
meanOnlyExpressed: dataset.controls.meanOnlyExpressed,
|
|
174
|
+
expressionCutoff: dataset.controls.expressionCutoff
|
|
175
|
+
});
|
|
205
176
|
// @TODO: set default scale
|
|
206
177
|
|
|
207
|
-
(0, _react.useEffect)(
|
|
178
|
+
(0, _react.useEffect)(() => {
|
|
208
179
|
if (dataset.selectedObs && dataset.selectedMultiVar.length) {
|
|
209
180
|
setHasSelections(true);
|
|
210
181
|
} else {
|
|
211
182
|
setHasSelections(false);
|
|
212
183
|
}
|
|
213
|
-
setParams(
|
|
214
|
-
return
|
|
184
|
+
setParams(p => {
|
|
185
|
+
return {
|
|
186
|
+
...p,
|
|
215
187
|
url: dataset.url,
|
|
216
188
|
selectedObs: dataset.selectedObs,
|
|
217
|
-
selectedMultiVar: dataset.selectedMultiVar.map(
|
|
218
|
-
return i.name;
|
|
219
|
-
}),
|
|
189
|
+
selectedMultiVar: dataset.selectedMultiVar.map(i => i.name),
|
|
220
190
|
standardScale: dataset.controls.standardScale,
|
|
221
191
|
meanOnlyExpressed: dataset.controls.meanOnlyExpressed,
|
|
222
192
|
expressionCutoff: dataset.controls.expressionCutoff
|
|
223
|
-
}
|
|
193
|
+
};
|
|
224
194
|
});
|
|
225
195
|
}, [dataset.url, dataset.selectedObs, dataset.selectedMultiVar, dataset.controls.standardScale, dataset.controls.meanOnlyExpressed, dataset.controls.expressionCutoff]);
|
|
226
|
-
|
|
227
|
-
setLayout(
|
|
228
|
-
return
|
|
229
|
-
|
|
196
|
+
const updateColorscale = (0, _react.useCallback)(colorscale => {
|
|
197
|
+
setLayout(l => {
|
|
198
|
+
return {
|
|
199
|
+
...l,
|
|
200
|
+
coloraxis: {
|
|
201
|
+
...l.coloraxis,
|
|
230
202
|
colorscale: colorscale
|
|
231
|
-
}
|
|
232
|
-
}
|
|
203
|
+
}
|
|
204
|
+
};
|
|
233
205
|
});
|
|
234
206
|
}, []);
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
207
|
+
const {
|
|
208
|
+
fetchedData,
|
|
209
|
+
isPending,
|
|
210
|
+
serverError
|
|
211
|
+
} = (0, _requests.useDebouncedFetch)(ENDPOINT, params, 500, {
|
|
212
|
+
enabled: !!params.selectedObs && !!params.selectedMultiVar.length
|
|
213
|
+
});
|
|
214
|
+
(0, _react.useEffect)(() => {
|
|
242
215
|
if (hasSelections && !isPending && !serverError) {
|
|
243
216
|
setData(fetchedData.data);
|
|
244
217
|
setLayout(fetchedData.layout);
|
|
@@ -254,18 +227,20 @@ function Dotplot() {
|
|
|
254
227
|
updateColorscale(colorscale.current);
|
|
255
228
|
}
|
|
256
229
|
}, [fetchedData, isPending, serverError, hasSelections, dispatch, updateColorscale]);
|
|
257
|
-
(0, _react.useEffect)(
|
|
230
|
+
(0, _react.useEffect)(() => {
|
|
258
231
|
colorscale.current = dataset.controls.colorScale;
|
|
259
232
|
updateColorscale(colorscale.current);
|
|
260
233
|
}, [dataset.controls.colorScale, updateColorscale]);
|
|
261
|
-
(0, _react.useEffect)(
|
|
262
|
-
setLayout(
|
|
263
|
-
return
|
|
264
|
-
|
|
234
|
+
(0, _react.useEffect)(() => {
|
|
235
|
+
setLayout(l => {
|
|
236
|
+
return {
|
|
237
|
+
...l,
|
|
238
|
+
coloraxis: {
|
|
239
|
+
...l.coloraxis,
|
|
265
240
|
cmin: dataset.controls.colorAxis.cmin,
|
|
266
241
|
cmax: dataset.controls.colorAxis.cmax
|
|
267
|
-
}
|
|
268
|
-
}
|
|
242
|
+
}
|
|
243
|
+
};
|
|
269
244
|
});
|
|
270
245
|
}, [dataset.controls.colorAxis.cmin, dataset.controls.colorAxis.cmax]);
|
|
271
246
|
if (!serverError) {
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
@@ -15,104 +14,79 @@ var _constants = require("../../constants/constants");
|
|
|
15
14
|
var _requests = require("../../utils/requests");
|
|
16
15
|
var _LoadingSpinner = require("../../utils/LoadingSpinner");
|
|
17
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
18
|
-
function _getRequireWildcardCache(
|
|
19
|
-
function _interopRequireWildcard(
|
|
20
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
21
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
22
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
23
|
-
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
24
|
-
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
25
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
26
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
27
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
28
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
29
|
-
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
30
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
17
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
18
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
31
19
|
function HeatmapControls() {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}, item);
|
|
45
|
-
});
|
|
20
|
+
const dataset = (0, _DatasetContext.useDataset)();
|
|
21
|
+
const dispatch = (0, _DatasetContext.useDatasetDispatch)();
|
|
22
|
+
const colormapList = _constants.PLOTLY_COLORSCALES.map(item => /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
|
|
23
|
+
key: item,
|
|
24
|
+
active: dataset.controls.colorScale === item,
|
|
25
|
+
onClick: () => {
|
|
26
|
+
dispatch({
|
|
27
|
+
type: "set.controls.colorScale",
|
|
28
|
+
colorScale: item
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
}, item));
|
|
46
32
|
return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Toggle, {
|
|
47
33
|
id: "dropdownColorscale",
|
|
48
34
|
variant: "light"
|
|
49
35
|
}, dataset.controls.colorScale), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, null, colormapList));
|
|
50
36
|
}
|
|
51
37
|
function Heatmap() {
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
65
|
-
hasSelections = _useState6[0],
|
|
66
|
-
setHasSelections = _useState6[1];
|
|
67
|
-
var _useState7 = (0, _react.useState)({
|
|
68
|
-
url: dataset.url,
|
|
69
|
-
selectedObs: dataset.selectedObs,
|
|
70
|
-
selectedMultiVar: dataset.selectedMultiVar.map(function (i) {
|
|
71
|
-
return i.name;
|
|
72
|
-
})
|
|
73
|
-
}),
|
|
74
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
75
|
-
params = _useState8[0],
|
|
76
|
-
setParams = _useState8[1];
|
|
77
|
-
(0, _react.useEffect)(function () {
|
|
38
|
+
const ENDPOINT = "heatmap";
|
|
39
|
+
const dataset = (0, _DatasetContext.useDataset)();
|
|
40
|
+
const colorscale = (0, _react.useRef)(dataset.controls.colorScale);
|
|
41
|
+
const [data, setData] = (0, _react.useState)([]);
|
|
42
|
+
const [layout, setLayout] = (0, _react.useState)({});
|
|
43
|
+
const [hasSelections, setHasSelections] = (0, _react.useState)(false);
|
|
44
|
+
const [params, setParams] = (0, _react.useState)({
|
|
45
|
+
url: dataset.url,
|
|
46
|
+
selectedObs: dataset.selectedObs,
|
|
47
|
+
selectedMultiVar: dataset.selectedMultiVar.map(i => i.name)
|
|
48
|
+
});
|
|
49
|
+
(0, _react.useEffect)(() => {
|
|
78
50
|
if (dataset.selectedObs && dataset.selectedMultiVar.length) {
|
|
79
51
|
setHasSelections(true);
|
|
80
52
|
} else {
|
|
81
53
|
setHasSelections(false);
|
|
82
54
|
}
|
|
83
|
-
setParams(
|
|
84
|
-
return
|
|
55
|
+
setParams(p => {
|
|
56
|
+
return {
|
|
57
|
+
...p,
|
|
85
58
|
url: dataset.url,
|
|
86
59
|
selectedObs: dataset.selectedObs,
|
|
87
|
-
selectedMultiVar: dataset.selectedMultiVar.map(
|
|
88
|
-
|
|
89
|
-
})
|
|
90
|
-
});
|
|
60
|
+
selectedMultiVar: dataset.selectedMultiVar.map(i => i.name)
|
|
61
|
+
};
|
|
91
62
|
});
|
|
92
63
|
}, [dataset.selectedMultiVar, dataset.selectedObs, dataset.url]);
|
|
93
|
-
|
|
94
|
-
setLayout(
|
|
95
|
-
return
|
|
96
|
-
|
|
64
|
+
const updateColorscale = (0, _react.useCallback)(colorscale => {
|
|
65
|
+
setLayout(l => {
|
|
66
|
+
return {
|
|
67
|
+
...l,
|
|
68
|
+
coloraxis: {
|
|
69
|
+
...l.coloraxis,
|
|
97
70
|
colorscale: colorscale
|
|
98
|
-
}
|
|
99
|
-
}
|
|
71
|
+
}
|
|
72
|
+
};
|
|
100
73
|
});
|
|
101
74
|
}, []);
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
75
|
+
const {
|
|
76
|
+
fetchedData,
|
|
77
|
+
isPending,
|
|
78
|
+
serverError
|
|
79
|
+
} = (0, _requests.useDebouncedFetch)(ENDPOINT, params, 500, {
|
|
80
|
+
enabled: !!params.selectedObs && !!params.selectedMultiVar.length
|
|
81
|
+
});
|
|
82
|
+
(0, _react.useEffect)(() => {
|
|
109
83
|
if (hasSelections && !isPending && !serverError) {
|
|
110
84
|
setData(fetchedData.data);
|
|
111
85
|
setLayout(fetchedData.layout);
|
|
112
86
|
updateColorscale(colorscale.current);
|
|
113
87
|
}
|
|
114
88
|
}, [fetchedData, hasSelections, isPending, serverError, updateColorscale]);
|
|
115
|
-
(0, _react.useEffect)(
|
|
89
|
+
(0, _react.useEffect)(() => {
|
|
116
90
|
colorscale.current = dataset.controls.colorScale;
|
|
117
91
|
updateColorscale(colorscale.current);
|
|
118
92
|
}, [dataset.controls.colorScale, updateColorscale]);
|