@haniffalab/cherita-react 0.2.0-dev.2024-02-12.9498443 → 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,47 +14,22 @@ var _constants = require("../../constants/constants");
|
|
|
15
14
|
var _reactBootstrap = require("react-bootstrap");
|
|
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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
21
|
-
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
22
|
-
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
23
|
-
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
24
|
-
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; }
|
|
25
|
-
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; }
|
|
26
|
-
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; }
|
|
27
|
-
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
28
|
-
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); }
|
|
29
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
30
|
-
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."); }
|
|
31
|
-
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); }
|
|
32
|
-
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; }
|
|
33
|
-
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; } }
|
|
34
|
-
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; }
|
|
35
19
|
function VarSearchBar(_ref) {
|
|
36
|
-
|
|
37
|
-
varNames =
|
|
38
|
-
onSelect
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
showSuggestions = _useState4[0],
|
|
46
|
-
setShowSuggestions = _useState4[1];
|
|
47
|
-
var _useState5 = (0, _react.useState)(""),
|
|
48
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
49
|
-
text = _useState6[0],
|
|
50
|
-
setText = _useState6[1];
|
|
51
|
-
var getSuggestions = (0, _react.useMemo)(function () {
|
|
52
|
-
var filter = function filter(text) {
|
|
20
|
+
let {
|
|
21
|
+
varNames = [],
|
|
22
|
+
onSelect
|
|
23
|
+
} = _ref;
|
|
24
|
+
const [suggestions, setSuggestions] = (0, _react.useState)([]);
|
|
25
|
+
const [showSuggestions, setShowSuggestions] = (0, _react.useState)(false);
|
|
26
|
+
const [text, setText] = (0, _react.useState)("");
|
|
27
|
+
const getSuggestions = (0, _react.useMemo)(() => {
|
|
28
|
+
const filter = text => {
|
|
53
29
|
if (text.length > 0) {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
});
|
|
58
|
-
setSuggestions(_filter);
|
|
30
|
+
const regex = new RegExp("^".concat(text), "i");
|
|
31
|
+
const filter = varNames.sort().filter(v => regex.test(v.name));
|
|
32
|
+
setSuggestions(filter);
|
|
59
33
|
setShowSuggestions(true);
|
|
60
34
|
} else {
|
|
61
35
|
setShowSuggestions(false);
|
|
@@ -63,35 +37,33 @@ function VarSearchBar(_ref) {
|
|
|
63
37
|
};
|
|
64
38
|
return _lodash.default.debounce(filter, 300);
|
|
65
39
|
}, [varNames]);
|
|
66
|
-
(0, _react.useEffect)(
|
|
40
|
+
(0, _react.useEffect)(() => {
|
|
67
41
|
getSuggestions(text);
|
|
68
42
|
}, [getSuggestions, text]);
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
}, item.name);
|
|
77
|
-
});
|
|
43
|
+
const suggestionsList = suggestions.map(item => /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
|
|
44
|
+
key: item.name,
|
|
45
|
+
as: "button",
|
|
46
|
+
onClick: () => {
|
|
47
|
+
onSelect(item);
|
|
48
|
+
}
|
|
49
|
+
}, item.name));
|
|
78
50
|
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form, {
|
|
79
|
-
onSubmit:
|
|
51
|
+
onSubmit: e => {
|
|
80
52
|
e.preventDefault();
|
|
81
53
|
}
|
|
82
54
|
}, /*#__PURE__*/_react.default.createElement(_reactBootstrap.FormGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Label, null, "Feature:"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Control, {
|
|
83
|
-
onFocus:
|
|
55
|
+
onFocus: () => {
|
|
84
56
|
setShowSuggestions(text.length > 0);
|
|
85
57
|
},
|
|
86
|
-
onBlur:
|
|
87
|
-
_lodash.default.delay(
|
|
58
|
+
onBlur: () => {
|
|
59
|
+
_lodash.default.delay(() => {
|
|
88
60
|
setShowSuggestions(false);
|
|
89
61
|
}, 150);
|
|
90
62
|
},
|
|
91
63
|
type: "text",
|
|
92
64
|
placeholder: "Search for a feature",
|
|
93
65
|
value: text,
|
|
94
|
-
onChange:
|
|
66
|
+
onChange: e => {
|
|
95
67
|
setText(e.target.value);
|
|
96
68
|
}
|
|
97
69
|
}), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, {
|
|
@@ -104,47 +76,35 @@ function VarSearchBar(_ref) {
|
|
|
104
76
|
}, suggestionsList))));
|
|
105
77
|
}
|
|
106
78
|
function VarNamesList(_ref2) {
|
|
107
|
-
|
|
108
|
-
mode =
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
var _useState13 = (0, _react.useState)(mode === _constants.SELECTION_MODES.SINGLE ? dataset.selectVar : dataset.selectedMultiVar),
|
|
125
|
-
_useState14 = _slicedToArray(_useState13, 2),
|
|
126
|
-
active = _useState14[0],
|
|
127
|
-
setActive = _useState14[1];
|
|
128
|
-
var _useState15 = (0, _react.useState)({
|
|
129
|
-
url: dataset.url
|
|
130
|
-
}),
|
|
131
|
-
_useState16 = _slicedToArray(_useState15, 2),
|
|
132
|
-
params = _useState16[0],
|
|
133
|
-
setParams = _useState16[1];
|
|
134
|
-
(0, _react.useEffect)(function () {
|
|
135
|
-
setParams(function (p) {
|
|
136
|
-
return _objectSpread(_objectSpread({}, p), {}, {
|
|
79
|
+
let {
|
|
80
|
+
mode = _constants.SELECTION_MODES.SINGLE
|
|
81
|
+
} = _ref2;
|
|
82
|
+
const ENDPOINT = "var/names";
|
|
83
|
+
const dataset = (0, _DatasetContext.useDataset)();
|
|
84
|
+
const dispatch = (0, _DatasetContext.useDatasetDispatch)();
|
|
85
|
+
const [varNames, setVarNames] = (0, _react.useState)([]);
|
|
86
|
+
const [updatedVarNames, setUpdatedVarNames] = (0, _react.useState)(false);
|
|
87
|
+
const [varButtons, setVarButtons] = (0, _react.useState)(mode ? mode === _constants.SELECTION_MODES.SINGLE ? [dataset.selectVar] : dataset.selectedMultiVar : []);
|
|
88
|
+
const [active, setActive] = (0, _react.useState)(mode === _constants.SELECTION_MODES.SINGLE ? dataset.selectVar : dataset.selectedMultiVar);
|
|
89
|
+
const [params, setParams] = (0, _react.useState)({
|
|
90
|
+
url: dataset.url
|
|
91
|
+
});
|
|
92
|
+
(0, _react.useEffect)(() => {
|
|
93
|
+
setParams(p => {
|
|
94
|
+
return {
|
|
95
|
+
...p,
|
|
137
96
|
url: dataset.url
|
|
138
|
-
}
|
|
97
|
+
};
|
|
139
98
|
});
|
|
140
99
|
}, [dataset.url]);
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
100
|
+
const {
|
|
101
|
+
fetchedData,
|
|
102
|
+
isPending,
|
|
103
|
+
serverError
|
|
104
|
+
} = (0, _requests.useFetch)(ENDPOINT, params, {
|
|
105
|
+
refetchOnMount: false
|
|
106
|
+
});
|
|
107
|
+
const validateSelection = (0, _react.useCallback)((selectedVar, mode) => {
|
|
148
108
|
if (updatedVarNames) {
|
|
149
109
|
if (mode === _constants.SELECTION_MODES.SINGLE) {
|
|
150
110
|
if (selectedVar && !_lodash.default.some(varNames, selectedVar)) {
|
|
@@ -155,9 +115,7 @@ function VarNamesList(_ref2) {
|
|
|
155
115
|
});
|
|
156
116
|
}
|
|
157
117
|
} else {
|
|
158
|
-
if (selectedVar.length && !_lodash.default.every(selectedVar,
|
|
159
|
-
return _lodash.default.some(varNames, v);
|
|
160
|
-
})) {
|
|
118
|
+
if (selectedVar.length && !_lodash.default.every(selectedVar, v => _lodash.default.some(varNames, v))) {
|
|
161
119
|
setActive([]);
|
|
162
120
|
dispatch({
|
|
163
121
|
type: "multiVarReset",
|
|
@@ -167,34 +125,30 @@ function VarNamesList(_ref2) {
|
|
|
167
125
|
}
|
|
168
126
|
}
|
|
169
127
|
}, [dispatch, varNames, updatedVarNames]);
|
|
170
|
-
(0, _react.useEffect)(
|
|
128
|
+
(0, _react.useEffect)(() => {
|
|
171
129
|
if (!isPending && !serverError) {
|
|
172
130
|
setVarNames(fetchedData);
|
|
173
131
|
setUpdatedVarNames(true);
|
|
174
132
|
}
|
|
175
133
|
}, [fetchedData, isPending, serverError]);
|
|
176
|
-
(0, _react.useEffect)(
|
|
134
|
+
(0, _react.useEffect)(() => {
|
|
177
135
|
if (mode === _constants.SELECTION_MODES.SINGLE && dataset.selectedVar) {
|
|
178
136
|
validateSelection(dataset.selectVar, mode);
|
|
179
137
|
setActive(dataset.selectedVar.matrix_index);
|
|
180
138
|
}
|
|
181
139
|
}, [mode, dataset.selectedVar, dataset.selectVar, validateSelection]);
|
|
182
|
-
(0, _react.useEffect)(
|
|
140
|
+
(0, _react.useEffect)(() => {
|
|
183
141
|
if (mode === _constants.SELECTION_MODES.MULTIPLE) {
|
|
184
142
|
validateSelection(dataset.selectedMultiVar, mode);
|
|
185
|
-
setActive(dataset.selectedMultiVar.map(
|
|
186
|
-
return i.matrix_index;
|
|
187
|
-
}));
|
|
143
|
+
setActive(dataset.selectedMultiVar.map(i => i.matrix_index));
|
|
188
144
|
}
|
|
189
145
|
}, [mode, dataset.selectedMultiVar, validateSelection]);
|
|
190
|
-
|
|
191
|
-
setVarButtons(
|
|
192
|
-
if (varButtons[0] && varButtons.find(
|
|
193
|
-
return v.matrix_index === item.matrix_index;
|
|
194
|
-
})) {
|
|
146
|
+
const selectVar = item => {
|
|
147
|
+
setVarButtons(() => {
|
|
148
|
+
if (varButtons[0] && varButtons.find(v => v.matrix_index === item.matrix_index)) {
|
|
195
149
|
return varButtons;
|
|
196
150
|
} else {
|
|
197
|
-
return [
|
|
151
|
+
return [...varButtons, item];
|
|
198
152
|
}
|
|
199
153
|
});
|
|
200
154
|
if (mode === _constants.SELECTION_MODES.SINGLE) {
|
|
@@ -209,15 +163,15 @@ function VarNamesList(_ref2) {
|
|
|
209
163
|
});
|
|
210
164
|
}
|
|
211
165
|
};
|
|
212
|
-
|
|
213
|
-
return varButtons.map(
|
|
166
|
+
const varList = (0, _react.useMemo)(() => {
|
|
167
|
+
return varButtons.map(item => {
|
|
214
168
|
if (item && mode === _constants.SELECTION_MODES.SINGLE) {
|
|
215
169
|
return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
|
|
216
170
|
type: "button",
|
|
217
171
|
key: item.matrix_index,
|
|
218
172
|
variant: "outline-primary",
|
|
219
173
|
className: "".concat(active === item.matrix_index && "active", " m-1"),
|
|
220
|
-
onClick:
|
|
174
|
+
onClick: () => {
|
|
221
175
|
dispatch({
|
|
222
176
|
type: "varSelected",
|
|
223
177
|
var: item
|
|
@@ -230,7 +184,7 @@ function VarNamesList(_ref2) {
|
|
|
230
184
|
key: item.matrix_index,
|
|
231
185
|
variant: "outline-primary",
|
|
232
186
|
className: "".concat(active.includes(item.matrix_index) && "active", " m-1"),
|
|
233
|
-
onClick:
|
|
187
|
+
onClick: () => {
|
|
234
188
|
if (active.includes(item.matrix_index)) {
|
|
235
189
|
dispatch({
|
|
236
190
|
type: "multiVarDeselected",
|
|
@@ -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,92 +14,62 @@ var _reactBootstrap = require("react-bootstrap");
|
|
|
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 ViolinControls() {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
activeStandardScale = _useState2[0],
|
|
37
|
-
setActiveStandardScale = _useState2[1];
|
|
38
|
-
(0, _react.useEffect)(function () {
|
|
20
|
+
const dataset = (0, _DatasetContext.useDataset)();
|
|
21
|
+
const dispatch = (0, _DatasetContext.useDatasetDispatch)();
|
|
22
|
+
const [activeStandardScale, setActiveStandardScale] = (0, _react.useState)(dataset.controls.standardScale);
|
|
23
|
+
(0, _react.useEffect)(() => {
|
|
39
24
|
if (dataset.controls.standardScale) {
|
|
40
|
-
setActiveStandardScale(_constants.VIOLINPLOT_STANDARDSCALES.find(
|
|
41
|
-
return obs.value === dataset.controls.standardScale;
|
|
42
|
-
}).name);
|
|
25
|
+
setActiveStandardScale(_constants.VIOLINPLOT_STANDARDSCALES.find(obs => obs.value === dataset.controls.standardScale).name);
|
|
43
26
|
}
|
|
44
27
|
}, [dataset.controls.standardScale]);
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
}, item.name);
|
|
56
|
-
});
|
|
28
|
+
const standardScaleList = _constants.VIOLINPLOT_STANDARDSCALES.map(item => /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
|
|
29
|
+
key: item.value,
|
|
30
|
+
active: activeStandardScale === item.value,
|
|
31
|
+
onClick: () => {
|
|
32
|
+
dispatch({
|
|
33
|
+
type: "set.controls.standardScale",
|
|
34
|
+
standardScale: item.value
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
}, item.name));
|
|
57
38
|
return /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonToolbar, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup.Text, null, "Standard scale"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Toggle, {
|
|
58
39
|
id: "dropdownStandardScale",
|
|
59
40
|
variant: "light"
|
|
60
41
|
}, activeStandardScale), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, null, standardScaleList)))));
|
|
61
42
|
}
|
|
62
43
|
function Violin(_ref) {
|
|
63
|
-
|
|
64
|
-
mode =
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
77
|
-
hasSelections = _useState8[0],
|
|
78
|
-
setHasSelections = _useState8[1];
|
|
79
|
-
var _useState9 = (0, _react.useState)({
|
|
80
|
-
url: dataset.url,
|
|
81
|
-
keys: [],
|
|
82
|
-
scale: dataset.controls.standardScale
|
|
83
|
-
}),
|
|
84
|
-
_useState10 = _slicedToArray(_useState9, 2),
|
|
85
|
-
params = _useState10[0],
|
|
86
|
-
setParams = _useState10[1];
|
|
44
|
+
let {
|
|
45
|
+
mode = _constants.VIOLIN_MODES.MULTIKEY
|
|
46
|
+
} = _ref;
|
|
47
|
+
const ENDPOINT = "violin";
|
|
48
|
+
const dataset = (0, _DatasetContext.useDataset)();
|
|
49
|
+
const [data, setData] = (0, _react.useState)([]);
|
|
50
|
+
const [layout, setLayout] = (0, _react.useState)({});
|
|
51
|
+
const [hasSelections, setHasSelections] = (0, _react.useState)(false);
|
|
52
|
+
const [params, setParams] = (0, _react.useState)({
|
|
53
|
+
url: dataset.url,
|
|
54
|
+
keys: [],
|
|
55
|
+
scale: dataset.controls.standardScale
|
|
56
|
+
});
|
|
87
57
|
// @TODO: set default scale
|
|
88
58
|
|
|
89
|
-
(0, _react.useEffect)(
|
|
59
|
+
(0, _react.useEffect)(() => {
|
|
90
60
|
if (mode === _constants.VIOLIN_MODES.MULTIKEY) {
|
|
91
61
|
if (dataset.selectedMultiVar.length) {
|
|
92
62
|
setHasSelections(true);
|
|
93
63
|
} else {
|
|
94
64
|
setHasSelections(false);
|
|
95
65
|
}
|
|
96
|
-
setParams(
|
|
97
|
-
return
|
|
66
|
+
setParams(p => {
|
|
67
|
+
return {
|
|
68
|
+
...p,
|
|
98
69
|
url: dataset.url,
|
|
99
|
-
keys: dataset.selectedMultiVar.map(
|
|
100
|
-
return i.name;
|
|
101
|
-
}),
|
|
70
|
+
keys: dataset.selectedMultiVar.map(i => i.name),
|
|
102
71
|
scale: dataset.controls.standardScale
|
|
103
|
-
}
|
|
72
|
+
};
|
|
104
73
|
});
|
|
105
74
|
} else if (mode === _constants.VIOLIN_MODES.GROUPBY) {
|
|
106
75
|
if (dataset.selectedObs && dataset.selectedVar) {
|
|
@@ -108,23 +77,25 @@ function Violin(_ref) {
|
|
|
108
77
|
} else {
|
|
109
78
|
setHasSelections(false);
|
|
110
79
|
}
|
|
111
|
-
setParams(
|
|
112
|
-
return
|
|
80
|
+
setParams(p => {
|
|
81
|
+
return {
|
|
82
|
+
...p,
|
|
113
83
|
url: dataset.url,
|
|
114
84
|
keys: dataset.selectedVar.name,
|
|
115
85
|
selectedObs: dataset.selectedObs,
|
|
116
86
|
scale: dataset.controls.standardScale
|
|
117
|
-
}
|
|
87
|
+
};
|
|
118
88
|
});
|
|
119
89
|
}
|
|
120
90
|
}, [dataset.controls.standardScale, dataset.selectedMultiVar, dataset.selectedObs, dataset.selectedVar, dataset.url, mode]);
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
91
|
+
const {
|
|
92
|
+
fetchedData,
|
|
93
|
+
isPending,
|
|
94
|
+
serverError
|
|
95
|
+
} = (0, _requests.useDebouncedFetch)(ENDPOINT, params, 500, {
|
|
96
|
+
enabled: mode === _constants.VIOLIN_MODES.MULTIKEY && !!params.keys || mode === _constants.VIOLIN_MODES.GROUPBY && !!params.keys.length && !!params.selectedObs
|
|
97
|
+
});
|
|
98
|
+
(0, _react.useEffect)(() => {
|
|
128
99
|
if (hasSelections && !isPending && !serverError) {
|
|
129
100
|
setData(fetchedData.data);
|
|
130
101
|
setLayout(fetchedData.layout);
|
|
@@ -4,11 +4,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.VIOLIN_MODES = exports.VIOLINPLOT_STANDARDSCALES = exports.SELECTION_MODES = exports.PLOTLY_COLORSCALES = exports.MATRIXPLOT_STANDARDSCALES = exports.LOCAL_STORAGE_KEY = exports.DOTPLOT_STANDARDSCALES = exports.CHROMA_COLORSCALES = void 0;
|
|
7
|
-
|
|
8
|
-
exports.
|
|
9
|
-
|
|
10
|
-
exports.PLOTLY_COLORSCALES = PLOTLY_COLORSCALES;
|
|
11
|
-
var CHROMA_COLORSCALES = {
|
|
7
|
+
const LOCAL_STORAGE_KEY = exports.LOCAL_STORAGE_KEY = "CHERITA";
|
|
8
|
+
const PLOTLY_COLORSCALES = exports.PLOTLY_COLORSCALES = ["Blackbody", "Bluered", "Blues", "Cividis", "Earth", "Electric", "Greens", "Greys", "Hot", "Jet", "Picnic", "Portland", "Rainbow", "RdBu", "Reds", "Viridis", "YlGnBu", "YlOrRd"];
|
|
9
|
+
const CHROMA_COLORSCALES = exports.CHROMA_COLORSCALES = {
|
|
12
10
|
OrRd: ["#fff7ec", "#fee8c8", "#fdd49e", "#fdbb84", "#fc8d59", "#ef6548", "#d7301f", "#b30000", "#7f0000"],
|
|
13
11
|
PuBu: ["#fff7fb", "#ece7f2", "#d0d1e6", "#a6bddb", "#74a9cf", "#3690c0", "#0570b0", "#045a8d", "#023858"],
|
|
14
12
|
BuPu: ["#f7fcfd", "#e0ecf4", "#bfd3e6", "#9ebcda", "#8c96c6", "#8c6bb1", "#88419d", "#810f7c", "#4d004b"],
|
|
@@ -50,18 +48,15 @@ var CHROMA_COLORSCALES = {
|
|
|
50
48
|
Pastel2: ["#b3e2cd", "#fdcdac", "#cbd5e8", "#f4cae4", "#e6f5c9", "#fff2ae", "#f1e2cc", "#cccccc"],
|
|
51
49
|
Pastel1: ["#fbb4ae", "#b3cde3", "#ccebc5", "#decbe4", "#fed9a6", "#ffffcc", "#e5d8bd", "#fddaec", "#f2f2f2"]
|
|
52
50
|
};
|
|
53
|
-
exports.
|
|
54
|
-
var SELECTION_MODES = {
|
|
51
|
+
const SELECTION_MODES = exports.SELECTION_MODES = {
|
|
55
52
|
SINGLE: "single",
|
|
56
53
|
MULTIPLE: "multiple"
|
|
57
54
|
};
|
|
58
|
-
exports.
|
|
59
|
-
var VIOLIN_MODES = {
|
|
55
|
+
const VIOLIN_MODES = exports.VIOLIN_MODES = {
|
|
60
56
|
MULTIKEY: "multikey",
|
|
61
57
|
GROUPBY: "groupby"
|
|
62
58
|
};
|
|
63
|
-
exports.
|
|
64
|
-
var MATRIXPLOT_STANDARDSCALES = [{
|
|
59
|
+
const MATRIXPLOT_STANDARDSCALES = exports.MATRIXPLOT_STANDARDSCALES = [{
|
|
65
60
|
value: null,
|
|
66
61
|
name: "None"
|
|
67
62
|
}, {
|
|
@@ -71,8 +66,7 @@ var MATRIXPLOT_STANDARDSCALES = [{
|
|
|
71
66
|
value: "var",
|
|
72
67
|
name: "Var"
|
|
73
68
|
}];
|
|
74
|
-
exports.
|
|
75
|
-
var DOTPLOT_STANDARDSCALES = [{
|
|
69
|
+
const DOTPLOT_STANDARDSCALES = exports.DOTPLOT_STANDARDSCALES = [{
|
|
76
70
|
value: null,
|
|
77
71
|
name: "None"
|
|
78
72
|
}, {
|
|
@@ -82,12 +76,10 @@ var DOTPLOT_STANDARDSCALES = [{
|
|
|
82
76
|
value: "var",
|
|
83
77
|
name: "Var"
|
|
84
78
|
}];
|
|
85
|
-
exports.
|
|
86
|
-
var VIOLINPLOT_STANDARDSCALES = [{
|
|
79
|
+
const VIOLINPLOT_STANDARDSCALES = exports.VIOLINPLOT_STANDARDSCALES = [{
|
|
87
80
|
value: "width",
|
|
88
81
|
name: "Width"
|
|
89
82
|
}, {
|
|
90
83
|
value: "count",
|
|
91
84
|
name: "Count"
|
|
92
|
-
}];
|
|
93
|
-
exports.VIOLINPLOT_STANDARDSCALES = VIOLINPLOT_STANDARDSCALES;
|
|
85
|
+
}];
|