@haniffalab/cherita-react 1.2.0-dev.2025-05-21.31931945 → 1.2.0-dev.2025-05-21.e57ef5f2
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/cjs/components/dotplot/Dotplot.js +26 -19
- package/dist/cjs/components/dotplot/DotplotControls.js +17 -19
- package/dist/cjs/components/full-page/FullPage.js +9 -7
- package/dist/cjs/components/full-page/FullPagePseudospatial.js +9 -7
- package/dist/cjs/components/heatmap/Heatmap.js +22 -13
- package/dist/cjs/components/matrixplot/Matrixplot.js +22 -13
- package/dist/cjs/components/obs-list/ObsItem.js +37 -29
- package/dist/cjs/components/obs-list/ObsList.js +47 -44
- package/dist/cjs/components/obsm-list/ObsmList.js +9 -6
- package/dist/cjs/components/offcanvas/index.js +13 -9
- package/dist/cjs/components/pseudospatial/Pseudospatial.js +61 -53
- package/dist/cjs/components/pseudospatial/PseudospatialToolbar.js +17 -11
- package/dist/cjs/components/scatterplot/Scatterplot.js +52 -52
- package/dist/cjs/components/scatterplot/ScatterplotControls.js +3 -3
- package/dist/cjs/components/scatterplot/SpatialControls.js +4 -4
- package/dist/cjs/components/search-bar/SearchBar.js +12 -10
- package/dist/cjs/components/search-bar/SearchInfo.js +14 -13
- package/dist/cjs/components/search-bar/SearchResults.js +16 -14
- package/dist/cjs/components/var-list/VarItem.js +37 -120
- package/dist/cjs/components/var-list/VarList.js +16 -13
- package/dist/cjs/components/var-list/VarListToolbar.js +1 -2
- package/dist/cjs/components/var-list/VarSet.js +17 -29
- package/dist/cjs/components/violin/Violin.js +44 -35
- package/dist/cjs/context/DatasetContext.js +17 -11
- package/dist/cjs/context/FilterContext.js +9 -8
- package/dist/cjs/context/SettingsContext.js +169 -237
- package/dist/cjs/context/ZarrDataContext.js +1 -2
- package/dist/cjs/helpers/color-helper.js +3 -3
- package/dist/cjs/helpers/zarr-helper.js +15 -12
- package/dist/cjs/utils/Filter.js +13 -9
- package/dist/cjs/utils/Histogram.js +4 -3
- package/dist/cjs/utils/ImageViewer.js +1 -2
- package/dist/cjs/utils/Legend.js +3 -3
- package/dist/cjs/utils/LoadingIndicators.js +1 -1
- package/dist/cjs/utils/VirtualizedList.js +16 -13
- package/dist/cjs/utils/errors.js +20 -22
- package/dist/cjs/utils/requests.js +13 -10
- package/dist/cjs/utils/zarrData.js +12 -8
- package/dist/css/cherita.css +24 -10
- package/dist/css/cherita.css.map +1 -1
- package/dist/esm/components/dotplot/Dotplot.js +25 -17
- package/dist/esm/components/dotplot/DotplotControls.js +16 -17
- package/dist/esm/components/full-page/FullPage.js +8 -5
- package/dist/esm/components/full-page/FullPagePseudospatial.js +8 -5
- package/dist/esm/components/heatmap/Heatmap.js +21 -11
- package/dist/esm/components/matrixplot/Matrixplot.js +21 -11
- package/dist/esm/components/obs-list/ObsItem.js +36 -27
- package/dist/esm/components/obs-list/ObsList.js +46 -42
- package/dist/esm/components/obsm-list/ObsmList.js +8 -4
- package/dist/esm/components/offcanvas/index.js +13 -9
- package/dist/esm/components/pseudospatial/Pseudospatial.js +60 -51
- package/dist/esm/components/pseudospatial/PseudospatialToolbar.js +16 -9
- package/dist/esm/components/scatterplot/Scatterplot.js +51 -50
- package/dist/esm/components/scatterplot/ScatterplotControls.js +2 -1
- package/dist/esm/components/scatterplot/SpatialControls.js +3 -2
- package/dist/esm/components/search-bar/SearchBar.js +11 -8
- package/dist/esm/components/search-bar/SearchInfo.js +13 -11
- package/dist/esm/components/search-bar/SearchResults.js +15 -12
- package/dist/esm/components/var-list/VarItem.js +36 -117
- package/dist/esm/components/var-list/VarList.js +15 -11
- package/dist/esm/components/var-list/VarSet.js +17 -28
- package/dist/esm/components/violin/Violin.js +43 -33
- package/dist/esm/context/DatasetContext.js +16 -9
- package/dist/esm/context/FilterContext.js +8 -6
- package/dist/esm/context/SettingsContext.js +168 -235
- package/dist/esm/helpers/color-helper.js +3 -3
- package/dist/esm/helpers/zarr-helper.js +15 -12
- package/dist/esm/utils/Filter.js +13 -9
- package/dist/esm/utils/Histogram.js +4 -3
- package/dist/esm/utils/Legend.js +2 -1
- package/dist/esm/utils/LoadingIndicators.js +1 -1
- package/dist/esm/utils/VirtualizedList.js +15 -11
- package/dist/esm/utils/errors.js +20 -22
- package/dist/esm/utils/requests.js +13 -10
- package/dist/esm/utils/zarrData.js +12 -8
- package/package.json +4 -2
- package/scss/cherita.scss +5 -0
- package/scss/components/layouts.scss +4 -0
- package/scss/components/lists.scss +4 -5
|
@@ -22,8 +22,12 @@ var _SettingsContext = require("../../context/SettingsContext");
|
|
|
22
22
|
var _LoadingIndicators = require("../../utils/LoadingIndicators");
|
|
23
23
|
var _requests = require("../../utils/requests");
|
|
24
24
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
25
|
-
function
|
|
26
|
-
function
|
|
25
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
26
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
27
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
28
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
29
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
30
|
+
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
27
31
|
const ObsAccordionToggle = _ref => {
|
|
28
32
|
let {
|
|
29
33
|
children,
|
|
@@ -38,7 +42,7 @@ const ObsAccordionToggle = _ref => {
|
|
|
38
42
|
handleAccordionToggle(eventKey, isCurrentEventKey);
|
|
39
43
|
});
|
|
40
44
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
41
|
-
className:
|
|
45
|
+
className: "obs-accordion-header ".concat(isCurrentEventKey ? "active" : ""),
|
|
42
46
|
onClick: decoratedOnClick
|
|
43
47
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
44
48
|
className: "obs-accordion-header-chevron"
|
|
@@ -49,6 +53,7 @@ const ObsAccordionToggle = _ref => {
|
|
|
49
53
|
}, children));
|
|
50
54
|
};
|
|
51
55
|
function ObsColsList(_ref2) {
|
|
56
|
+
var _settings$selectedObs;
|
|
52
57
|
let {
|
|
53
58
|
showColor = true,
|
|
54
59
|
enableObsGroups = true
|
|
@@ -59,20 +64,21 @@ function ObsColsList(_ref2) {
|
|
|
59
64
|
const dispatch = (0, _SettingsContext.useSettingsDispatch)();
|
|
60
65
|
const [enableGroups, setEnableGroups] = (0, _react.useState)(enableObsGroups);
|
|
61
66
|
const [obsCols, setObsCols] = (0, _react.useState)(null);
|
|
62
|
-
const [active, setActive] = (0, _react.useState)([...[settings.selectedObs
|
|
67
|
+
const [active, setActive] = (0, _react.useState)([...[(_settings$selectedObs = settings.selectedObs) === null || _settings$selectedObs === void 0 ? void 0 : _settings$selectedObs.name]]);
|
|
63
68
|
const [params, setParams] = (0, _react.useState)({
|
|
64
69
|
url: dataset.url
|
|
65
70
|
});
|
|
66
|
-
const obsGroups = (0, _react.useMemo)(() =>
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
71
|
+
const obsGroups = (0, _react.useMemo)(() => {
|
|
72
|
+
var _dataset$obsGroups;
|
|
73
|
+
return _objectSpread({
|
|
74
|
+
default: _lodash.default.union(_constants.DEFAULT_OBS_GROUP, (_dataset$obsGroups = dataset.obsGroups) === null || _dataset$obsGroups === void 0 ? void 0 : _dataset$obsGroups.default)
|
|
75
|
+
}, _lodash.default.omit(dataset.obsGroups, "default"));
|
|
76
|
+
}, [dataset.obsGroups]);
|
|
70
77
|
(0, _react.useEffect)(() => {
|
|
71
78
|
setParams(p => {
|
|
72
|
-
return {
|
|
73
|
-
...p,
|
|
79
|
+
return _objectSpread(_objectSpread({}, p), {}, {
|
|
74
80
|
url: dataset.url
|
|
75
|
-
};
|
|
81
|
+
});
|
|
76
82
|
});
|
|
77
83
|
}, [dataset.url]);
|
|
78
84
|
const {
|
|
@@ -93,7 +99,7 @@ function ObsColsList(_ref2) {
|
|
|
93
99
|
});
|
|
94
100
|
if (!!filteredData.length && !groupFiltered.length) {
|
|
95
101
|
setEnableGroups(false);
|
|
96
|
-
console.warn(
|
|
102
|
+
console.warn("No obs found in obsGroups ".concat(JSON.stringify(obsGroups), ", disabling obsGroups"));
|
|
97
103
|
} else {
|
|
98
104
|
filteredData = groupFiltered;
|
|
99
105
|
}
|
|
@@ -104,17 +110,17 @@ function ObsColsList(_ref2) {
|
|
|
104
110
|
return d.type !== _constants.OBS_TYPES.DISCRETE;
|
|
105
111
|
});
|
|
106
112
|
setObsCols(_lodash.default.keyBy(_lodash.default.map(filteredData, d => {
|
|
107
|
-
return {
|
|
108
|
-
...d,
|
|
113
|
+
return _objectSpread(_objectSpread({}, d), {}, {
|
|
109
114
|
codesMap: _lodash.default.invert(d.codes),
|
|
110
115
|
omit: []
|
|
111
|
-
};
|
|
116
|
+
});
|
|
112
117
|
}), "name"));
|
|
113
118
|
}
|
|
114
119
|
}, [fetchedData, isPending, obsGroups, serverError, enableGroups]);
|
|
115
120
|
(0, _react.useEffect)(() => {
|
|
116
121
|
if (obsCols) {
|
|
117
|
-
|
|
122
|
+
var _settings$selectedObs2;
|
|
123
|
+
if (!obsCols[(_settings$selectedObs2 = settings.selectedObs) === null || _settings$selectedObs2 === void 0 ? void 0 : _settings$selectedObs2.name]) {
|
|
118
124
|
setActive([]);
|
|
119
125
|
dispatch({
|
|
120
126
|
type: "select.obs",
|
|
@@ -131,23 +137,21 @@ function ObsColsList(_ref2) {
|
|
|
131
137
|
}
|
|
132
138
|
};
|
|
133
139
|
const toggleAll = item => {
|
|
140
|
+
var _settings$selectedObs3;
|
|
134
141
|
const omit = item.omit.length ? [] : _lodash.default.map(item.values, v => item.codes[v]);
|
|
135
142
|
setObsCols(o => {
|
|
136
|
-
return {
|
|
137
|
-
|
|
138
|
-
[item.name]: {
|
|
139
|
-
...item,
|
|
143
|
+
return _objectSpread(_objectSpread({}, o), {}, {
|
|
144
|
+
[item.name]: _objectSpread(_objectSpread({}, item), {}, {
|
|
140
145
|
omit: omit
|
|
141
|
-
}
|
|
142
|
-
};
|
|
146
|
+
})
|
|
147
|
+
});
|
|
143
148
|
});
|
|
144
|
-
if (settings.selectedObs
|
|
149
|
+
if (((_settings$selectedObs3 = settings.selectedObs) === null || _settings$selectedObs3 === void 0 ? void 0 : _settings$selectedObs3.name) === item.name) {
|
|
145
150
|
dispatch({
|
|
146
151
|
type: "select.obs",
|
|
147
|
-
obs: {
|
|
148
|
-
...item,
|
|
152
|
+
obs: _objectSpread(_objectSpread({}, item), {}, {
|
|
149
153
|
omit: omit
|
|
150
|
-
}
|
|
154
|
+
})
|
|
151
155
|
});
|
|
152
156
|
}
|
|
153
157
|
};
|
|
@@ -186,6 +190,7 @@ function ObsColsList(_ref2) {
|
|
|
186
190
|
});
|
|
187
191
|
};
|
|
188
192
|
const toggleObs = (item, value) => {
|
|
193
|
+
var _settings$selectedObs4;
|
|
189
194
|
let omit;
|
|
190
195
|
if (_lodash.default.includes(item.omit, item.codes[value])) {
|
|
191
196
|
omit = item.omit.filter(i => i !== item.codes[value]);
|
|
@@ -193,25 +198,23 @@ function ObsColsList(_ref2) {
|
|
|
193
198
|
omit = [...item.omit, item.codes[value]];
|
|
194
199
|
}
|
|
195
200
|
setObsCols(o => {
|
|
196
|
-
return {
|
|
197
|
-
|
|
198
|
-
[item.name]: {
|
|
199
|
-
...item,
|
|
201
|
+
return _objectSpread(_objectSpread({}, o), {}, {
|
|
202
|
+
[item.name]: _objectSpread(_objectSpread({}, item), {}, {
|
|
200
203
|
omit: omit
|
|
201
|
-
}
|
|
202
|
-
};
|
|
204
|
+
})
|
|
205
|
+
});
|
|
203
206
|
});
|
|
204
|
-
if (settings.selectedObs
|
|
207
|
+
if (((_settings$selectedObs4 = settings.selectedObs) === null || _settings$selectedObs4 === void 0 ? void 0 : _settings$selectedObs4.name) === item.name) {
|
|
205
208
|
dispatch({
|
|
206
209
|
type: "select.obs",
|
|
207
|
-
obs: {
|
|
208
|
-
...item,
|
|
210
|
+
obs: _objectSpread(_objectSpread({}, item), {}, {
|
|
209
211
|
omit: omit
|
|
210
|
-
}
|
|
212
|
+
})
|
|
211
213
|
});
|
|
212
214
|
}
|
|
213
215
|
};
|
|
214
216
|
const obsItem = item => {
|
|
217
|
+
var _settings$selectedObs5, _settings$selectedObs6;
|
|
215
218
|
if (!item) {
|
|
216
219
|
return null;
|
|
217
220
|
}
|
|
@@ -219,8 +222,8 @@ function ObsColsList(_ref2) {
|
|
|
219
222
|
return null;
|
|
220
223
|
}
|
|
221
224
|
const inLabelObs = _lodash.default.some(settings.labelObs, i => i.name === item.name);
|
|
222
|
-
const inSliceObs = settings.sliceBy.obs && settings.selectedObs
|
|
223
|
-
const isColorEncoding = settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS && settings.selectedObs
|
|
225
|
+
const inSliceObs = settings.sliceBy.obs && ((_settings$selectedObs5 = settings.selectedObs) === null || _settings$selectedObs5 === void 0 ? void 0 : _settings$selectedObs5.name) === item.name;
|
|
226
|
+
const isColorEncoding = settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS && ((_settings$selectedObs6 = settings.selectedObs) === null || _settings$selectedObs6 === void 0 ? void 0 : _settings$selectedObs6.name) === item.name;
|
|
224
227
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
225
228
|
className: "accordion-item",
|
|
226
229
|
key: item.name
|
|
@@ -228,21 +231,21 @@ function ObsColsList(_ref2) {
|
|
|
228
231
|
eventKey: item.name,
|
|
229
232
|
handleAccordionToggle: handleAccordionToggle
|
|
230
233
|
}, /*#__PURE__*/_react.default.createElement("div", null, item.name), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", {
|
|
231
|
-
className:
|
|
234
|
+
className: "mx-1 cursor-pointer ".concat(inLabelObs ? "active-icon" : "text-muted opacity-50"),
|
|
232
235
|
onClick: event => {
|
|
233
236
|
event.stopPropagation();
|
|
234
237
|
toggleLabel(item);
|
|
235
238
|
},
|
|
236
239
|
title: "Add to tooltip"
|
|
237
240
|
}, /*#__PURE__*/_react.default.createElement(_Comment.default, null)), /*#__PURE__*/_react.default.createElement("span", {
|
|
238
|
-
className:
|
|
241
|
+
className: "mx-1 cursor-pointer ".concat(inSliceObs ? "active-icon" : "text-muted opacity-50"),
|
|
239
242
|
onClick: event => {
|
|
240
243
|
event.stopPropagation();
|
|
241
244
|
toggleSlice(item);
|
|
242
245
|
},
|
|
243
246
|
title: "Filter applied"
|
|
244
247
|
}, /*#__PURE__*/_react.default.createElement(_JoinInner.default, null)), /*#__PURE__*/_react.default.createElement("span", {
|
|
245
|
-
className:
|
|
248
|
+
className: "mx-1 cursor-pointer ".concat(isColorEncoding ? "active-icon" : "text-muted opacity-50"),
|
|
246
249
|
onClick: event => {
|
|
247
250
|
event.stopPropagation();
|
|
248
251
|
toggleColor(item);
|
|
@@ -272,9 +275,9 @@ function ObsColsList(_ref2) {
|
|
|
272
275
|
})))));
|
|
273
276
|
};
|
|
274
277
|
const groupList = _lodash.default.map(_lodash.default.keys(obsGroups), group => {
|
|
275
|
-
const key =
|
|
278
|
+
const key = "group-".concat(group);
|
|
276
279
|
const groupItems = _lodash.default.compact(_lodash.default.map(_lodash.default.sortBy(obsGroups[group], o => _lodash.default.lowerCase(o.name)), item => {
|
|
277
|
-
return obsItem(obsCols
|
|
280
|
+
return obsItem(obsCols === null || obsCols === void 0 ? void 0 : obsCols[item]);
|
|
278
281
|
}));
|
|
279
282
|
if (group === "default") {
|
|
280
283
|
return groupItems;
|
|
@@ -291,7 +294,7 @@ function ObsColsList(_ref2) {
|
|
|
291
294
|
}
|
|
292
295
|
});
|
|
293
296
|
const obsList = enableGroups ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, groupList) : _lodash.default.map(_lodash.default.sortBy(obsCols, o => _lodash.default.lowerCase(o.name)), item => obsItem(item));
|
|
294
|
-
const defaultActiveGroup = enableGroups ?
|
|
297
|
+
const defaultActiveGroup = enableGroups ? "group-".concat(_lodash.default.findKey(obsGroups, g => g.includes(active === null || active === void 0 ? void 0 : active[0]))) : null;
|
|
295
298
|
if (!serverError) {
|
|
296
299
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
297
300
|
className: "position-relative h-100"
|
|
@@ -10,8 +10,12 @@ var _DatasetContext = require("../../context/DatasetContext");
|
|
|
10
10
|
var _SettingsContext = require("../../context/SettingsContext");
|
|
11
11
|
var _requests = require("../../utils/requests");
|
|
12
12
|
var _Skeleton = require("../../utils/Skeleton");
|
|
13
|
-
function
|
|
14
|
-
function
|
|
13
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
14
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
15
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
16
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
17
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
18
|
+
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
15
19
|
function ObsmKeysList() {
|
|
16
20
|
const ENDPOINT = "obsm/keys";
|
|
17
21
|
const dataset = (0, _DatasetContext.useDataset)();
|
|
@@ -24,10 +28,9 @@ function ObsmKeysList() {
|
|
|
24
28
|
});
|
|
25
29
|
(0, _react.useEffect)(() => {
|
|
26
30
|
setParams(p => {
|
|
27
|
-
return {
|
|
28
|
-
...p,
|
|
31
|
+
return _objectSpread(_objectSpread({}, p), {}, {
|
|
29
32
|
url: dataset.url
|
|
30
|
-
};
|
|
33
|
+
});
|
|
31
34
|
});
|
|
32
35
|
}, [dataset.url]);
|
|
33
36
|
const {
|
|
@@ -50,7 +53,7 @@ function ObsmKeysList() {
|
|
|
50
53
|
const obsmList = obsmKeysList.map(item => {
|
|
51
54
|
return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
|
|
52
55
|
key: item,
|
|
53
|
-
className:
|
|
56
|
+
className: "custom ".concat(active === item && "active"),
|
|
54
57
|
onClick: () => {
|
|
55
58
|
dispatch({
|
|
56
59
|
type: "select.obsm",
|
|
@@ -14,13 +14,17 @@ var _ObsList = require("../obs-list/ObsList");
|
|
|
14
14
|
var _ObsmList = require("../obsm-list/ObsmList");
|
|
15
15
|
var _SearchBar = require("../search-bar/SearchBar");
|
|
16
16
|
var _VarList = require("../var-list/VarList");
|
|
17
|
+
const _excluded = ["show", "handleClose"],
|
|
18
|
+
_excluded2 = ["show", "handleClose", "Controls"];
|
|
17
19
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
20
|
+
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
21
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
18
22
|
function OffcanvasObs(_ref) {
|
|
19
23
|
let {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
+
show,
|
|
25
|
+
handleClose
|
|
26
|
+
} = _ref,
|
|
27
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
24
28
|
return /*#__PURE__*/_react.default.createElement(_Offcanvas.default, {
|
|
25
29
|
show: show,
|
|
26
30
|
onHide: handleClose,
|
|
@@ -62,11 +66,11 @@ function OffcanvasVars(_ref3) {
|
|
|
62
66
|
}
|
|
63
67
|
function OffcanvasControls(_ref4) {
|
|
64
68
|
let {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
69
|
+
show,
|
|
70
|
+
handleClose,
|
|
71
|
+
Controls
|
|
72
|
+
} = _ref4,
|
|
73
|
+
props = _objectWithoutProperties(_ref4, _excluded2);
|
|
70
74
|
return /*#__PURE__*/_react.default.createElement(_Offcanvas.default, {
|
|
71
75
|
show: show,
|
|
72
76
|
onHide: handleClose
|
|
@@ -21,10 +21,15 @@ var _Legend = require("../../utils/Legend");
|
|
|
21
21
|
var _LoadingIndicators = require("../../utils/LoadingIndicators");
|
|
22
22
|
var _requests = require("../../utils/requests");
|
|
23
23
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
24
|
-
function
|
|
25
|
-
function
|
|
24
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
25
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
26
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
27
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
28
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
29
|
+
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
26
30
|
_fontawesomeSvgCore.library.add(_freeSolidSvgIcons.faSliders);
|
|
27
31
|
function usePseudospatialData(plotType) {
|
|
32
|
+
var _settings$selectedVar5, _settings$selectedVar6, _settings$selectedVar7, _settings$selectedVar8;
|
|
28
33
|
const ENDPOINT = "pseudospatial";
|
|
29
34
|
const dataset = (0, _DatasetContext.useDataset)();
|
|
30
35
|
const settings = (0, _SettingsContext.useSettings)();
|
|
@@ -45,40 +50,49 @@ function usePseudospatialData(plotType) {
|
|
|
45
50
|
}, [dataset.url, settings.pseudospatial.maskSet, settings.pseudospatial.maskValues, dataset.varNamesCol, isSliced, obsIndices]);
|
|
46
51
|
const getPlotParams = (0, _react.useCallback)(() => {
|
|
47
52
|
if (plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.GENE) {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
53
|
+
var _settings$selectedVar, _settings$selectedVar2, _settings$selectedVar3, _settings$selectedVar4, _settings$selectedObs, _settings$selectedObs2, _settings$selectedObs3;
|
|
54
|
+
return _objectSpread({
|
|
55
|
+
varKey: (_settings$selectedVar = settings.selectedVar) !== null && _settings$selectedVar !== void 0 && _settings$selectedVar.isSet ? {
|
|
56
|
+
name: (_settings$selectedVar2 = settings.selectedVar) === null || _settings$selectedVar2 === void 0 ? void 0 : _settings$selectedVar2.name,
|
|
57
|
+
indices: (_settings$selectedVar3 = settings.selectedVar) === null || _settings$selectedVar3 === void 0 ? void 0 : _settings$selectedVar3.vars.map(v => v.index)
|
|
58
|
+
} : (_settings$selectedVar4 = settings.selectedVar) === null || _settings$selectedVar4 === void 0 ? void 0 : _settings$selectedVar4.index
|
|
59
|
+
}, settings.sliceBy.obs ? {
|
|
60
|
+
obsCol: settings.selectedObs,
|
|
61
|
+
obsValues: !((_settings$selectedObs = settings.selectedObs) !== null && _settings$selectedObs !== void 0 && _settings$selectedObs.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_settings$selectedObs2 = settings.selectedObs) === null || _settings$selectedObs2 === void 0 ? void 0 : _settings$selectedObs2.codes), (_settings$selectedObs3 = settings.selectedObs) === null || _settings$selectedObs3 === void 0 ? void 0 : _settings$selectedObs3.omit).map(c => {
|
|
62
|
+
var _settings$selectedObs4;
|
|
63
|
+
return (_settings$selectedObs4 = settings.selectedObs) === null || _settings$selectedObs4 === void 0 ? void 0 : _settings$selectedObs4.codesMap[c];
|
|
64
|
+
})
|
|
65
|
+
} : {});
|
|
58
66
|
} else if (plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL) {
|
|
67
|
+
var _settings$selectedObs5, _settings$selectedObs6, _settings$selectedObs7;
|
|
59
68
|
return {
|
|
60
69
|
obsCol: settings.selectedObs,
|
|
61
|
-
obsValues: !settings.selectedObs
|
|
70
|
+
obsValues: !((_settings$selectedObs5 = settings.selectedObs) !== null && _settings$selectedObs5 !== void 0 && _settings$selectedObs5.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_settings$selectedObs6 = settings.selectedObs) === null || _settings$selectedObs6 === void 0 ? void 0 : _settings$selectedObs6.codes), (_settings$selectedObs7 = settings.selectedObs) === null || _settings$selectedObs7 === void 0 ? void 0 : _settings$selectedObs7.omit).map(c => {
|
|
71
|
+
var _settings$selectedObs8;
|
|
72
|
+
return (_settings$selectedObs8 = settings.selectedObs) === null || _settings$selectedObs8 === void 0 ? void 0 : _settings$selectedObs8.codesMap[c];
|
|
73
|
+
}),
|
|
62
74
|
mode: settings.pseudospatial.categoricalMode
|
|
63
75
|
};
|
|
64
76
|
} else if (plotType === "continuous") {
|
|
77
|
+
var _settings$selectedObs9, _settings$selectedObs0, _settings$selectedObs1;
|
|
65
78
|
return {
|
|
66
79
|
obsCol: settings.selectedObs,
|
|
67
|
-
obsValues: !settings.selectedObs
|
|
80
|
+
obsValues: !((_settings$selectedObs9 = settings.selectedObs) !== null && _settings$selectedObs9 !== void 0 && _settings$selectedObs9.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_settings$selectedObs0 = settings.selectedObs) === null || _settings$selectedObs0 === void 0 ? void 0 : _settings$selectedObs0.codes), (_settings$selectedObs1 = settings.selectedObs) === null || _settings$selectedObs1 === void 0 ? void 0 : _settings$selectedObs1.omit).map(c => {
|
|
81
|
+
var _settings$selectedObs10;
|
|
82
|
+
return (_settings$selectedObs10 = settings.selectedObs) === null || _settings$selectedObs10 === void 0 ? void 0 : _settings$selectedObs10.codesMap[c];
|
|
83
|
+
})
|
|
68
84
|
};
|
|
69
85
|
}
|
|
70
|
-
}, [settings.pseudospatial.categoricalMode, settings.selectedObs, settings.selectedVar
|
|
86
|
+
}, [settings.pseudospatial.categoricalMode, settings.selectedObs, (_settings$selectedVar5 = settings.selectedVar) === null || _settings$selectedVar5 === void 0 ? void 0 : _settings$selectedVar5.index, (_settings$selectedVar6 = settings.selectedVar) === null || _settings$selectedVar6 === void 0 ? void 0 : _settings$selectedVar6.isSet, (_settings$selectedVar7 = settings.selectedVar) === null || _settings$selectedVar7 === void 0 ? void 0 : _settings$selectedVar7.name, (_settings$selectedVar8 = settings.selectedVar) === null || _settings$selectedVar8 === void 0 ? void 0 : _settings$selectedVar8.vars, settings.sliceBy.obs, plotType]);
|
|
71
87
|
const params = (0, _react.useMemo)(() => {
|
|
72
|
-
return {
|
|
73
|
-
...baseParams,
|
|
74
|
-
...getPlotParams()
|
|
75
|
-
};
|
|
88
|
+
return _objectSpread(_objectSpread({}, baseParams), getPlotParams());
|
|
76
89
|
}, [baseParams, getPlotParams]);
|
|
77
90
|
return (0, _requests.useDebouncedFetch)(ENDPOINT + "/" + plotType, params, 500, {
|
|
78
91
|
enabled: !!plotType && !!settings.pseudospatial.maskSet
|
|
79
92
|
});
|
|
80
93
|
}
|
|
81
94
|
function Pseudospatial(_ref) {
|
|
95
|
+
var _settings$selectedObs14, _layout$coloraxis3, _layout$coloraxis4;
|
|
82
96
|
let {
|
|
83
97
|
showLegend = true,
|
|
84
98
|
sharedScaleRange = false,
|
|
@@ -95,21 +109,21 @@ function Pseudospatial(_ref) {
|
|
|
95
109
|
} = (0, _colorHelper.useColor)();
|
|
96
110
|
const colorscale = (0, _react.useRef)(settings.controls.colorScale);
|
|
97
111
|
(0, _react.useEffect)(() => {
|
|
98
|
-
|
|
99
|
-
|
|
112
|
+
var _settings$selectedObs11, _settings$selectedObs12, _settings$selectedObs13;
|
|
113
|
+
setPlotType(settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? _constants.PSEUDOSPATIAL_PLOT_TYPES.GENE : ((_settings$selectedObs11 = settings.selectedObs) === null || _settings$selectedObs11 === void 0 ? void 0 : _settings$selectedObs11.type) === _constants.OBS_TYPES.CATEGORICAL || ((_settings$selectedObs12 = settings.selectedObs) === null || _settings$selectedObs12 === void 0 ? void 0 : _settings$selectedObs12.type) === _constants.OBS_TYPES.BOOLEAN ? _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL : ((_settings$selectedObs13 = settings.selectedObs) === null || _settings$selectedObs13 === void 0 ? void 0 : _settings$selectedObs13.type) === _constants.OBS_TYPES.CONTINUOUS ? _constants.PSEUDOSPATIAL_PLOT_TYPES.CONTINUOUS : _constants.PSEUDOSPATIAL_PLOT_TYPES.MASKS);
|
|
114
|
+
}, [settings.colorEncoding, (_settings$selectedObs14 = settings.selectedObs) === null || _settings$selectedObs14 === void 0 ? void 0 : _settings$selectedObs14.type, setPlotType]);
|
|
100
115
|
const updateColorscale = (0, _react.useCallback)(colorscale => {
|
|
101
116
|
setLayout(l => {
|
|
102
|
-
return {
|
|
103
|
-
|
|
104
|
-
coloraxis: {
|
|
105
|
-
...l.coloraxis,
|
|
117
|
+
return _objectSpread(_objectSpread({}, l), {}, {
|
|
118
|
+
coloraxis: _objectSpread(_objectSpread({}, l.coloraxis), {}, {
|
|
106
119
|
colorscale: colorscale
|
|
107
|
-
}
|
|
108
|
-
};
|
|
120
|
+
})
|
|
121
|
+
});
|
|
109
122
|
});
|
|
110
123
|
setData(d => {
|
|
111
|
-
|
|
112
|
-
const
|
|
124
|
+
var _layout$coloraxis, _layout$coloraxis2;
|
|
125
|
+
const min = layout === null || layout === void 0 || (_layout$coloraxis = layout.coloraxis) === null || _layout$coloraxis === void 0 ? void 0 : _layout$coloraxis.cmin;
|
|
126
|
+
const max = layout === null || layout === void 0 || (_layout$coloraxis2 = layout.coloraxis) === null || _layout$coloraxis2 === void 0 ? void 0 : _layout$coloraxis2.cmax;
|
|
113
127
|
return _lodash.default.map(d, trace => {
|
|
114
128
|
const v = trace.meta.value;
|
|
115
129
|
if (v === null) {
|
|
@@ -118,17 +132,15 @@ function Pseudospatial(_ref) {
|
|
|
118
132
|
const color = (0, _colorHelper.rgbToHex)(getColor({
|
|
119
133
|
value: (v - min) / (max - min)
|
|
120
134
|
}));
|
|
121
|
-
return {
|
|
122
|
-
...trace,
|
|
135
|
+
return _objectSpread(_objectSpread({}, trace), {}, {
|
|
123
136
|
fillcolor: color,
|
|
124
|
-
line: {
|
|
125
|
-
...trace.line,
|
|
137
|
+
line: _objectSpread(_objectSpread({}, trace.line), {}, {
|
|
126
138
|
color: color
|
|
127
|
-
}
|
|
128
|
-
};
|
|
139
|
+
})
|
|
140
|
+
});
|
|
129
141
|
});
|
|
130
142
|
});
|
|
131
|
-
}, [getColor, layout
|
|
143
|
+
}, [getColor, layout === null || layout === void 0 || (_layout$coloraxis3 = layout.coloraxis) === null || _layout$coloraxis3 === void 0 ? void 0 : _layout$coloraxis3.cmax, layout === null || layout === void 0 || (_layout$coloraxis4 = layout.coloraxis) === null || _layout$coloraxis4 === void 0 ? void 0 : _layout$coloraxis4.cmin]);
|
|
132
144
|
const {
|
|
133
145
|
fetchedData,
|
|
134
146
|
isPending,
|
|
@@ -163,40 +175,36 @@ function Pseudospatial(_ref) {
|
|
|
163
175
|
const color = (0, _colorHelper.rgbToHex)(getColor({
|
|
164
176
|
value: (v - min) / (max - min)
|
|
165
177
|
}));
|
|
166
|
-
return {
|
|
167
|
-
...trace,
|
|
178
|
+
return _objectSpread(_objectSpread({}, trace), {}, {
|
|
168
179
|
fillcolor: color,
|
|
169
|
-
line: {
|
|
170
|
-
...trace.line,
|
|
180
|
+
line: _objectSpread(_objectSpread({}, trace.line), {}, {
|
|
171
181
|
color: color
|
|
172
|
-
}
|
|
173
|
-
};
|
|
182
|
+
})
|
|
183
|
+
});
|
|
174
184
|
});
|
|
175
185
|
});
|
|
176
186
|
setLayout(l => {
|
|
177
|
-
return {
|
|
178
|
-
|
|
179
|
-
coloraxis: {
|
|
180
|
-
...l.coloraxis,
|
|
187
|
+
return _objectSpread(_objectSpread({}, l), {}, {
|
|
188
|
+
coloraxis: _objectSpread(_objectSpread({}, l.coloraxis), {}, {
|
|
181
189
|
cmin: min,
|
|
182
190
|
cmax: max
|
|
183
|
-
}
|
|
184
|
-
};
|
|
191
|
+
})
|
|
192
|
+
});
|
|
185
193
|
});
|
|
186
194
|
}
|
|
187
195
|
}, [settings.controls.range, settings.controls.valueMax, settings.controls.valueMin, settings.controls.valueRange, getColor, sharedScaleRange]);
|
|
188
196
|
const hasSelections = !!plotType && !!settings.pseudospatial.maskSet;
|
|
189
197
|
const faSlidersPath = _freeSolidSvgIcons.faSliders.icon[4];
|
|
190
198
|
if (!serverError) {
|
|
199
|
+
var _layout$coloraxis5, _layout$coloraxis6;
|
|
191
200
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
192
201
|
className: "cherita-pseudospatial"
|
|
193
202
|
}, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, hasSelections && isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), hasSelections && /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
|
|
194
203
|
data: data,
|
|
195
|
-
layout: {
|
|
196
|
-
...layout,
|
|
204
|
+
layout: _objectSpread(_objectSpread({}, layout), {}, {
|
|
197
205
|
autosize: true,
|
|
198
206
|
height: height
|
|
199
|
-
},
|
|
207
|
+
}),
|
|
200
208
|
useResizeHandler: true,
|
|
201
209
|
className: "cherita-pseudospatial-plot",
|
|
202
210
|
config: {
|
|
@@ -215,8 +223,8 @@ function Pseudospatial(_ref) {
|
|
|
215
223
|
}]
|
|
216
224
|
}
|
|
217
225
|
}), hasSelections && showLegend && /*#__PURE__*/_react.default.createElement(_Legend.Legend, {
|
|
218
|
-
min: layout
|
|
219
|
-
max: layout
|
|
226
|
+
min: layout === null || layout === void 0 || (_layout$coloraxis5 = layout.coloraxis) === null || _layout$coloraxis5 === void 0 ? void 0 : _layout$coloraxis5.cmin,
|
|
227
|
+
max: layout === null || layout === void 0 || (_layout$coloraxis6 = layout.coloraxis) === null || _layout$coloraxis6 === void 0 ? void 0 : _layout$coloraxis6.cmax,
|
|
220
228
|
addText: plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.GENE ? " - Mean expression" : plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL ? " - %" : plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.CONTINUOUS ? " - Mean value" : ""
|
|
221
229
|
})));
|
|
222
230
|
} else {
|
|
@@ -12,8 +12,12 @@ var _DatasetContext = require("../../context/DatasetContext");
|
|
|
12
12
|
var _SettingsContext = require("../../context/SettingsContext");
|
|
13
13
|
var _requests = require("../../utils/requests");
|
|
14
14
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
15
|
-
function
|
|
16
|
-
function
|
|
15
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
16
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
17
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
18
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
19
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
20
|
+
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
17
21
|
function CategoricalMode() {
|
|
18
22
|
const settings = (0, _SettingsContext.useSettings)();
|
|
19
23
|
const dispatch = (0, _SettingsContext.useSettingsDispatch)();
|
|
@@ -35,6 +39,7 @@ function CategoricalMode() {
|
|
|
35
39
|
}, _lodash.default.capitalize(mode.name)), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, null, modeList));
|
|
36
40
|
}
|
|
37
41
|
function MaskSet() {
|
|
42
|
+
var _settings$pseudospati5, _settings$pseudospati6, _maskSets$settings$ps2, _settings$pseudospati7, _settings$pseudospati8, _maskSets$settings$ps3, _settings$pseudospati9;
|
|
38
43
|
const ENDPOINT = "masks";
|
|
39
44
|
const dataset = (0, _DatasetContext.useDataset)();
|
|
40
45
|
const settings = (0, _SettingsContext.useSettings)();
|
|
@@ -45,10 +50,9 @@ function MaskSet() {
|
|
|
45
50
|
});
|
|
46
51
|
(0, _react.useEffect)(() => {
|
|
47
52
|
setParams(p => {
|
|
48
|
-
return {
|
|
49
|
-
...p,
|
|
53
|
+
return _objectSpread(_objectSpread({}, p), {}, {
|
|
50
54
|
url: dataset.url
|
|
51
|
-
};
|
|
55
|
+
});
|
|
52
56
|
});
|
|
53
57
|
}, [dataset.url]);
|
|
54
58
|
const {
|
|
@@ -74,9 +78,10 @@ function MaskSet() {
|
|
|
74
78
|
}
|
|
75
79
|
}, _lodash.default.capitalize(key)));
|
|
76
80
|
const handleMaskChange = mask => {
|
|
77
|
-
|
|
81
|
+
var _settings$pseudospati, _settings$pseudospati2;
|
|
82
|
+
let newMasks = settings.pseudospatial.maskValues || (maskSets === null || maskSets === void 0 ? void 0 : maskSets[(_settings$pseudospati = settings.pseudospatial) === null || _settings$pseudospati === void 0 ? void 0 : _settings$pseudospati.maskSet]);
|
|
78
83
|
newMasks = newMasks.includes(mask) ? newMasks.filter(m => m !== mask) : [...newMasks, mask];
|
|
79
|
-
if (!_lodash.default.difference(maskSets
|
|
84
|
+
if (!_lodash.default.difference(maskSets === null || maskSets === void 0 ? void 0 : maskSets[(_settings$pseudospati2 = settings.pseudospatial) === null || _settings$pseudospati2 === void 0 ? void 0 : _settings$pseudospati2.maskSet], newMasks).length) {
|
|
80
85
|
newMasks = null;
|
|
81
86
|
}
|
|
82
87
|
dispatch({
|
|
@@ -85,7 +90,8 @@ function MaskSet() {
|
|
|
85
90
|
});
|
|
86
91
|
};
|
|
87
92
|
const toggleMasks = () => {
|
|
88
|
-
|
|
93
|
+
var _settings$pseudospati3, _maskSets$settings$ps, _settings$pseudospati4;
|
|
94
|
+
if (!settings.pseudospatial.maskValues || ((_settings$pseudospati3 = settings.pseudospatial.maskValues) === null || _settings$pseudospati3 === void 0 ? void 0 : _settings$pseudospati3.length) === (maskSets === null || maskSets === void 0 || (_maskSets$settings$ps = maskSets[(_settings$pseudospati4 = settings.pseudospatial) === null || _settings$pseudospati4 === void 0 ? void 0 : _settings$pseudospati4.maskSet]) === null || _maskSets$settings$ps === void 0 ? void 0 : _maskSets$settings$ps.length)) {
|
|
89
95
|
dispatch({
|
|
90
96
|
type: "set.pseudospatial.maskValues",
|
|
91
97
|
maskValues: []
|
|
@@ -97,7 +103,7 @@ function MaskSet() {
|
|
|
97
103
|
});
|
|
98
104
|
}
|
|
99
105
|
};
|
|
100
|
-
const masksList = _lodash.default.map(maskSets
|
|
106
|
+
const masksList = _lodash.default.map(maskSets === null || maskSets === void 0 ? void 0 : maskSets[(_settings$pseudospati5 = settings.pseudospatial) === null || _settings$pseudospati5 === void 0 ? void 0 : _settings$pseudospati5.maskSet], mask => /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.ItemText, {
|
|
101
107
|
key: mask
|
|
102
108
|
}, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Check, {
|
|
103
109
|
type: "checkbox",
|
|
@@ -105,8 +111,8 @@ function MaskSet() {
|
|
|
105
111
|
checked: !settings.pseudospatial.maskValues || settings.pseudospatial.maskValues.includes(mask),
|
|
106
112
|
onChange: () => handleMaskChange(mask)
|
|
107
113
|
})));
|
|
108
|
-
const nMasks = settings.pseudospatial.maskValues ? settings.pseudospatial.maskValues
|
|
109
|
-
const toggleAllChecked = !settings.pseudospatial.maskValues || settings.pseudospatial.maskValues
|
|
114
|
+
const nMasks = settings.pseudospatial.maskValues ? (_settings$pseudospati6 = settings.pseudospatial.maskValues) === null || _settings$pseudospati6 === void 0 ? void 0 : _settings$pseudospati6.length : (maskSets === null || maskSets === void 0 || (_maskSets$settings$ps2 = maskSets[(_settings$pseudospati7 = settings.pseudospatial) === null || _settings$pseudospati7 === void 0 ? void 0 : _settings$pseudospati7.maskSet]) === null || _maskSets$settings$ps2 === void 0 ? void 0 : _maskSets$settings$ps2.length) || "No";
|
|
115
|
+
const toggleAllChecked = !settings.pseudospatial.maskValues || ((_settings$pseudospati8 = settings.pseudospatial.maskValues) === null || _settings$pseudospati8 === void 0 ? void 0 : _settings$pseudospati8.length) === (maskSets === null || maskSets === void 0 || (_maskSets$settings$ps3 = maskSets[(_settings$pseudospati9 = settings.pseudospatial) === null || _settings$pseudospati9 === void 0 ? void 0 : _settings$pseudospati9.maskSet]) === null || _maskSets$settings$ps3 === void 0 ? void 0 : _maskSets$settings$ps3.length);
|
|
110
116
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Toggle, {
|
|
111
117
|
variant: "light"
|
|
112
118
|
}, _lodash.default.capitalize(settings.pseudospatial.maskSet || "Select a mask set")), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Header, null, "Mask set"), maskSetList)), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Toggle, {
|