@haniffalab/cherita-react 1.4.1-dev.2025-08-13.6fc43290 → 1.4.1-dev.2025-08-13.8f63c242
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 +12 -16
- package/dist/cjs/components/heatmap/Heatmap.js +11 -16
- package/dist/cjs/components/matrixplot/Matrixplot.js +11 -16
- package/dist/cjs/components/obs-list/ObsItem.js +14 -14
- package/dist/cjs/components/obs-list/ObsList.js +24 -23
- package/dist/cjs/components/pseudospatial/Pseudospatial.js +25 -31
- package/dist/cjs/components/scatterplot/Scatterplot.js +14 -23
- package/dist/cjs/components/scatterplot/ScatterplotControls.js +9 -3
- package/dist/cjs/components/var-list/VarList.js +16 -14
- package/dist/cjs/components/violin/Violin.js +21 -25
- package/dist/cjs/context/DatasetContext.js +4 -4
- package/dist/cjs/context/SettingsContext.js +175 -40
- package/dist/cjs/utils/Filter.js +15 -10
- package/dist/cjs/utils/Resolver.js +188 -0
- package/dist/cjs/utils/zarrData.js +16 -17
- package/dist/esm/components/dotplot/Dotplot.js +12 -16
- package/dist/esm/components/heatmap/Heatmap.js +11 -16
- package/dist/esm/components/matrixplot/Matrixplot.js +11 -16
- package/dist/esm/components/obs-list/ObsItem.js +14 -14
- package/dist/esm/components/obs-list/ObsList.js +24 -23
- package/dist/esm/components/pseudospatial/Pseudospatial.js +25 -31
- package/dist/esm/components/scatterplot/Scatterplot.js +14 -23
- package/dist/esm/components/scatterplot/ScatterplotControls.js +9 -3
- package/dist/esm/components/var-list/VarList.js +16 -14
- package/dist/esm/components/violin/Violin.js +21 -25
- package/dist/esm/context/DatasetContext.js +4 -4
- package/dist/esm/context/SettingsContext.js +176 -41
- package/dist/esm/utils/Filter.js +15 -10
- package/dist/esm/utils/Resolver.js +176 -0
- package/dist/esm/utils/zarrData.js +16 -17
- package/package.json +2 -2
|
@@ -14,6 +14,7 @@ var _FilterContext = require("../../context/FilterContext");
|
|
|
14
14
|
var _SettingsContext = require("../../context/SettingsContext");
|
|
15
15
|
var _LoadingIndicators = require("../../utils/LoadingIndicators");
|
|
16
16
|
var _requests = require("../../utils/requests");
|
|
17
|
+
var _Resolver = require("../../utils/Resolver");
|
|
17
18
|
var _Toolbar = require("../toolbar/Toolbar");
|
|
18
19
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
19
20
|
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); }
|
|
@@ -23,7 +24,6 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
|
|
|
23
24
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
24
25
|
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); }
|
|
25
26
|
function Dotplot(_ref) {
|
|
26
|
-
var _settings$selectedObs, _settings$selectedObs2, _settings$selectedObs3;
|
|
27
27
|
let {
|
|
28
28
|
showObsBtn = false,
|
|
29
29
|
showVarsBtn = false,
|
|
@@ -44,14 +44,13 @@ function Dotplot(_ref) {
|
|
|
44
44
|
const [data, setData] = (0, _react.useState)([]);
|
|
45
45
|
const [layout, setLayout] = (0, _react.useState)({});
|
|
46
46
|
const [hasSelections, setHasSelections] = (0, _react.useState)(false);
|
|
47
|
+
const selectedObs = (0, _Resolver.useSelectedObs)();
|
|
48
|
+
const selectedMultiVar = (0, _Resolver.useSelectedMultiVar)();
|
|
47
49
|
const [params, setParams] = (0, _react.useState)({
|
|
48
50
|
url: dataset.url,
|
|
49
|
-
obsCol:
|
|
50
|
-
obsValues: !(
|
|
51
|
-
|
|
52
|
-
return (_settings$selectedObs4 = settings.selectedObs) === null || _settings$selectedObs4 === void 0 ? void 0 : _settings$selectedObs4.codesMap[c];
|
|
53
|
-
}),
|
|
54
|
-
varKeys: settings.selectedMultiVar.map(i => i.isSet ? {
|
|
51
|
+
obsCol: selectedObs,
|
|
52
|
+
obsValues: !(selectedObs !== null && selectedObs !== void 0 && selectedObs.omit.length) ? null : _lodash.default.difference(selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.values, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.omit),
|
|
53
|
+
varKeys: selectedMultiVar.map(i => i.isSet ? {
|
|
55
54
|
name: i.name,
|
|
56
55
|
indices: i.vars.map(v => v.index)
|
|
57
56
|
} : i.index),
|
|
@@ -64,21 +63,17 @@ function Dotplot(_ref) {
|
|
|
64
63
|
// @TODO: set default scale
|
|
65
64
|
|
|
66
65
|
(0, _react.useEffect)(() => {
|
|
67
|
-
if (
|
|
66
|
+
if (selectedObs && selectedMultiVar.length) {
|
|
68
67
|
setHasSelections(true);
|
|
69
68
|
} else {
|
|
70
69
|
setHasSelections(false);
|
|
71
70
|
}
|
|
72
71
|
setParams(p => {
|
|
73
|
-
var _settings$selectedObs5, _settings$selectedObs6, _settings$selectedObs7;
|
|
74
72
|
return _objectSpread(_objectSpread({}, p), {}, {
|
|
75
73
|
url: dataset.url,
|
|
76
|
-
obsCol:
|
|
77
|
-
obsValues: !(
|
|
78
|
-
|
|
79
|
-
return (_settings$selectedObs8 = settings.selectedObs) === null || _settings$selectedObs8 === void 0 ? void 0 : _settings$selectedObs8.codesMap[c];
|
|
80
|
-
}),
|
|
81
|
-
varKeys: settings.selectedMultiVar.map(i => i.isSet ? {
|
|
74
|
+
obsCol: selectedObs,
|
|
75
|
+
obsValues: !(selectedObs !== null && selectedObs !== void 0 && selectedObs.omit.length) ? null : _lodash.default.difference(selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.values, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.omit),
|
|
76
|
+
varKeys: selectedMultiVar.map(i => i.isSet ? {
|
|
82
77
|
name: i.name,
|
|
83
78
|
indices: i.vars.map(v => v.index)
|
|
84
79
|
} : i.index),
|
|
@@ -89,7 +84,7 @@ function Dotplot(_ref) {
|
|
|
89
84
|
varNamesCol: dataset.varNamesCol
|
|
90
85
|
});
|
|
91
86
|
});
|
|
92
|
-
}, [dataset.url,
|
|
87
|
+
}, [dataset.url, selectedObs, settings.controls.scale.dotplot, settings.controls.meanOnlyExpressed, settings.controls.expressionCutoff, dataset.varNamesCol, isSliced, obsIndices, selectedMultiVar]);
|
|
93
88
|
const updateColorscale = (0, _react.useCallback)(colorscale => {
|
|
94
89
|
setLayout(l => {
|
|
95
90
|
return _objectSpread(_objectSpread({}, l), {}, {
|
|
@@ -110,6 +105,7 @@ function Dotplot(_ref) {
|
|
|
110
105
|
if (hasSelections && !isPending && !serverError) {
|
|
111
106
|
setData(fetchedData.data);
|
|
112
107
|
setLayout(fetchedData.layout);
|
|
108
|
+
// @TODO: keep colorAxis range from settings
|
|
113
109
|
dispatch({
|
|
114
110
|
type: "set.controls.colorAxis",
|
|
115
111
|
colorAxis: {
|
|
@@ -14,6 +14,7 @@ var _FilterContext = require("../../context/FilterContext");
|
|
|
14
14
|
var _SettingsContext = require("../../context/SettingsContext");
|
|
15
15
|
var _LoadingIndicators = require("../../utils/LoadingIndicators");
|
|
16
16
|
var _requests = require("../../utils/requests");
|
|
17
|
+
var _Resolver = require("../../utils/Resolver");
|
|
17
18
|
var _Toolbar = require("../toolbar/Toolbar");
|
|
18
19
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
19
20
|
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); }
|
|
@@ -23,7 +24,6 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
|
|
|
23
24
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
24
25
|
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); }
|
|
25
26
|
function Heatmap(_ref) {
|
|
26
|
-
var _settings$selectedObs, _settings$selectedObs2, _settings$selectedObs3;
|
|
27
27
|
let {
|
|
28
28
|
showObsBtn = false,
|
|
29
29
|
showVarsBtn = false,
|
|
@@ -43,14 +43,13 @@ function Heatmap(_ref) {
|
|
|
43
43
|
const [data, setData] = (0, _react.useState)([]);
|
|
44
44
|
const [layout, setLayout] = (0, _react.useState)({});
|
|
45
45
|
const [hasSelections, setHasSelections] = (0, _react.useState)(false);
|
|
46
|
+
const selectedObs = (0, _Resolver.useSelectedObs)();
|
|
47
|
+
const selectedMultiVar = (0, _Resolver.useSelectedMultiVar)();
|
|
46
48
|
const [params, setParams] = (0, _react.useState)({
|
|
47
49
|
url: dataset.url,
|
|
48
|
-
obsCol:
|
|
49
|
-
obsValues: !(
|
|
50
|
-
|
|
51
|
-
return (_settings$selectedObs4 = settings.selectedObs) === null || _settings$selectedObs4 === void 0 ? void 0 : _settings$selectedObs4.codesMap[c];
|
|
52
|
-
}),
|
|
53
|
-
varKeys: settings.selectedMultiVar.map(i => i.isSet ? {
|
|
50
|
+
obsCol: selectedObs,
|
|
51
|
+
obsValues: !(selectedObs !== null && selectedObs !== void 0 && selectedObs.omit.length) ? null : _lodash.default.difference(selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.values, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.omit),
|
|
52
|
+
varKeys: selectedMultiVar.map(i => i.isSet ? {
|
|
54
53
|
name: i.name,
|
|
55
54
|
indices: i.vars.map(v => v.index)
|
|
56
55
|
} : i.index),
|
|
@@ -58,21 +57,17 @@ function Heatmap(_ref) {
|
|
|
58
57
|
varNamesCol: dataset.varNamesCol
|
|
59
58
|
});
|
|
60
59
|
(0, _react.useEffect)(() => {
|
|
61
|
-
if (
|
|
60
|
+
if (selectedObs && selectedMultiVar.length) {
|
|
62
61
|
setHasSelections(true);
|
|
63
62
|
} else {
|
|
64
63
|
setHasSelections(false);
|
|
65
64
|
}
|
|
66
65
|
setParams(p => {
|
|
67
|
-
var _settings$selectedObs5, _settings$selectedObs6, _settings$selectedObs7;
|
|
68
66
|
return _objectSpread(_objectSpread({}, p), {}, {
|
|
69
67
|
url: dataset.url,
|
|
70
|
-
obsCol:
|
|
71
|
-
obsValues: !(
|
|
72
|
-
|
|
73
|
-
return (_settings$selectedObs8 = settings.selectedObs) === null || _settings$selectedObs8 === void 0 ? void 0 : _settings$selectedObs8.codesMap[c];
|
|
74
|
-
}),
|
|
75
|
-
varKeys: settings.selectedMultiVar.map(i => i.isSet ? {
|
|
68
|
+
obsCol: selectedObs,
|
|
69
|
+
obsValues: !(selectedObs !== null && selectedObs !== void 0 && selectedObs.omit.length) ? null : _lodash.default.difference(selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.values, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.omit),
|
|
70
|
+
varKeys: selectedMultiVar.map(i => i.isSet ? {
|
|
76
71
|
name: i.name,
|
|
77
72
|
indices: i.vars.map(v => v.index)
|
|
78
73
|
} : i.index),
|
|
@@ -80,7 +75,7 @@ function Heatmap(_ref) {
|
|
|
80
75
|
varNamesCol: dataset.varNamesCol
|
|
81
76
|
});
|
|
82
77
|
});
|
|
83
|
-
}, [
|
|
78
|
+
}, [selectedMultiVar, selectedObs, dataset.url, dataset.varNamesCol, obsIndices, isSliced]);
|
|
84
79
|
const updateColorscale = (0, _react.useCallback)(colorscale => {
|
|
85
80
|
setLayout(l => {
|
|
86
81
|
return _objectSpread(_objectSpread({}, l), {}, {
|
|
@@ -14,6 +14,7 @@ var _FilterContext = require("../../context/FilterContext");
|
|
|
14
14
|
var _SettingsContext = require("../../context/SettingsContext");
|
|
15
15
|
var _LoadingIndicators = require("../../utils/LoadingIndicators");
|
|
16
16
|
var _requests = require("../../utils/requests");
|
|
17
|
+
var _Resolver = require("../../utils/Resolver");
|
|
17
18
|
var _Toolbar = require("../toolbar/Toolbar");
|
|
18
19
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
19
20
|
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); }
|
|
@@ -23,7 +24,6 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
|
|
|
23
24
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
24
25
|
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); }
|
|
25
26
|
function Matrixplot(_ref) {
|
|
26
|
-
var _settings$selectedObs, _settings$selectedObs2, _settings$selectedObs3;
|
|
27
27
|
let {
|
|
28
28
|
showObsBtn = false,
|
|
29
29
|
showVarsBtn = false,
|
|
@@ -43,14 +43,13 @@ function Matrixplot(_ref) {
|
|
|
43
43
|
const [data, setData] = (0, _react.useState)([]);
|
|
44
44
|
const [layout, setLayout] = (0, _react.useState)({});
|
|
45
45
|
const [hasSelections, setHasSelections] = (0, _react.useState)(false);
|
|
46
|
+
const selectedObs = (0, _Resolver.useSelectedObs)();
|
|
47
|
+
const selectedMultiVar = (0, _Resolver.useSelectedMultiVar)();
|
|
46
48
|
const [params, setParams] = (0, _react.useState)({
|
|
47
49
|
url: dataset.url,
|
|
48
|
-
obsCol:
|
|
49
|
-
obsValues: !(
|
|
50
|
-
|
|
51
|
-
return (_settings$selectedObs4 = settings.selectedObs) === null || _settings$selectedObs4 === void 0 ? void 0 : _settings$selectedObs4.codesMap[c];
|
|
52
|
-
}),
|
|
53
|
-
varKeys: settings.selectedMultiVar.map(i => i.isSet ? {
|
|
50
|
+
obsCol: selectedObs,
|
|
51
|
+
obsValues: !(selectedObs !== null && selectedObs !== void 0 && selectedObs.omit.length) ? null : _lodash.default.difference(selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.values, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.omit),
|
|
52
|
+
varKeys: selectedMultiVar.map(i => i.isSet ? {
|
|
54
53
|
name: i.name,
|
|
55
54
|
indices: i.vars.map(v => v.index)
|
|
56
55
|
} : i.index),
|
|
@@ -59,21 +58,17 @@ function Matrixplot(_ref) {
|
|
|
59
58
|
varNamesCol: dataset.varNamesCol
|
|
60
59
|
});
|
|
61
60
|
(0, _react.useEffect)(() => {
|
|
62
|
-
if (
|
|
61
|
+
if (selectedObs && selectedMultiVar.length) {
|
|
63
62
|
setHasSelections(true);
|
|
64
63
|
} else {
|
|
65
64
|
setHasSelections(false);
|
|
66
65
|
}
|
|
67
66
|
setParams(p => {
|
|
68
|
-
var _settings$selectedObs5, _settings$selectedObs6, _settings$selectedObs7;
|
|
69
67
|
return _objectSpread(_objectSpread({}, p), {}, {
|
|
70
68
|
url: dataset.url,
|
|
71
|
-
obsCol:
|
|
72
|
-
obsValues: !(
|
|
73
|
-
|
|
74
|
-
return (_settings$selectedObs8 = settings.selectedObs) === null || _settings$selectedObs8 === void 0 ? void 0 : _settings$selectedObs8.codesMap[c];
|
|
75
|
-
}),
|
|
76
|
-
varKeys: settings.selectedMultiVar.map(i => i.isSet ? {
|
|
69
|
+
obsCol: selectedObs,
|
|
70
|
+
obsValues: !(selectedObs !== null && selectedObs !== void 0 && selectedObs.omit.length) ? null : _lodash.default.difference(selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.values, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.omit),
|
|
71
|
+
varKeys: selectedMultiVar.map(i => i.isSet ? {
|
|
77
72
|
name: i.name,
|
|
78
73
|
indices: i.vars.map(v => v.index)
|
|
79
74
|
} : i.index),
|
|
@@ -82,7 +77,7 @@ function Matrixplot(_ref) {
|
|
|
82
77
|
varNamesCol: dataset.varNamesCol
|
|
83
78
|
});
|
|
84
79
|
});
|
|
85
|
-
}, [settings.controls.scale.matrixplot,
|
|
80
|
+
}, [settings.controls.scale.matrixplot, selectedMultiVar, selectedObs, dataset.url, dataset.varNamesCol, obsIndices, isSliced]);
|
|
86
81
|
const updateColorscale = (0, _react.useCallback)(colorscale => {
|
|
87
82
|
setLayout(l => {
|
|
88
83
|
return _objectSpread(_objectSpread({}, l), {}, {
|
|
@@ -19,6 +19,7 @@ var _colorHelper = require("../../helpers/color-helper");
|
|
|
19
19
|
var _Histogram = require("../../utils/Histogram");
|
|
20
20
|
var _LoadingIndicators = require("../../utils/LoadingIndicators");
|
|
21
21
|
var _requests = require("../../utils/requests");
|
|
22
|
+
var _Resolver = require("../../utils/Resolver");
|
|
22
23
|
var _string = require("../../utils/string");
|
|
23
24
|
var _VirtualizedList = require("../../utils/VirtualizedList");
|
|
24
25
|
var _zarrData = require("../../utils/zarrData");
|
|
@@ -53,7 +54,6 @@ function getContinuousLabel(code, binEdges) {
|
|
|
53
54
|
return "[ ".concat((0, _string.formatNumerical)(binEdges[code][0]), ", ").concat((0, _string.formatNumerical)(binEdges[code][1], _string.FORMATS.EXPONENTIAL)).concat(code === binEdges.length - 1 ? " ]" : " )");
|
|
54
55
|
}
|
|
55
56
|
const useObsHistogram = (obs, _ref) => {
|
|
56
|
-
var _settings$selectedVar, _settings$selectedVar2, _settings$selectedVar3, _settings$selectedVar4, _settings$selectedVar9, _settings$selectedVar0, _settings$selectedVar1, _settings$selectedVar10;
|
|
57
57
|
let {
|
|
58
58
|
enabled = true
|
|
59
59
|
} = _ref;
|
|
@@ -64,31 +64,31 @@ const useObsHistogram = (obs, _ref) => {
|
|
|
64
64
|
obsIndices,
|
|
65
65
|
isSliced
|
|
66
66
|
} = (0, _FilterContext.useFilteredData)();
|
|
67
|
+
const selectedVar = (0, _Resolver.useSelectedVar)();
|
|
67
68
|
const [params, setParams] = (0, _react.useState)({
|
|
68
69
|
url: dataset.url,
|
|
69
70
|
obsCol: _lodash.default.omit(obs, "omit"),
|
|
70
71
|
// avoid re-rendering when toggling unselected obs
|
|
71
|
-
varKey:
|
|
72
|
-
name:
|
|
73
|
-
indices:
|
|
74
|
-
} :
|
|
72
|
+
varKey: selectedVar !== null && selectedVar !== void 0 && selectedVar.isSet ? {
|
|
73
|
+
name: selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.name,
|
|
74
|
+
indices: selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.vars.map(v => v.index)
|
|
75
|
+
} : selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.index,
|
|
75
76
|
obsIndices: isSliced ? [...(obsIndices || [])] : null
|
|
76
77
|
});
|
|
77
78
|
(0, _react.useEffect)(() => {
|
|
78
79
|
setParams(p => {
|
|
79
|
-
var _settings$selectedVar5, _settings$selectedVar6, _settings$selectedVar7, _settings$selectedVar8;
|
|
80
80
|
return _objectSpread(_objectSpread({}, p), {}, {
|
|
81
81
|
obsCol: _lodash.default.omit(obs, "omit"),
|
|
82
|
-
varKey:
|
|
83
|
-
name:
|
|
84
|
-
indices:
|
|
85
|
-
} :
|
|
82
|
+
varKey: selectedVar !== null && selectedVar !== void 0 && selectedVar.isSet ? {
|
|
83
|
+
name: selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.name,
|
|
84
|
+
indices: selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.vars.map(v => v.index)
|
|
85
|
+
} : selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.index,
|
|
86
86
|
obsIndices: isSliced ? [...(obsIndices || [])] : null
|
|
87
87
|
});
|
|
88
88
|
});
|
|
89
|
-
}, [
|
|
89
|
+
}, [selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.index, selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.isSet, selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.name, selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.vars, obsIndices, isSliced, obs]);
|
|
90
90
|
return (0, _requests.useFetch)(ENDPOINT, params, {
|
|
91
|
-
enabled: enabled && !!
|
|
91
|
+
enabled: enabled && !!selectedVar && settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR,
|
|
92
92
|
refetchOnMount: false
|
|
93
93
|
});
|
|
94
94
|
};
|
|
@@ -291,7 +291,7 @@ function CategoricalObs(_ref3) {
|
|
|
291
291
|
value_counts: obs.value_counts[obs.values[index]],
|
|
292
292
|
pct: obs.value_counts[obs.values[index]] / totalCounts * 100
|
|
293
293
|
},
|
|
294
|
-
isOmitted: _lodash.default.includes(obs.omit, obs.
|
|
294
|
+
isOmitted: _lodash.default.includes(obs.omit, obs.values[index]),
|
|
295
295
|
label: obs.values[index],
|
|
296
296
|
histogramData: enabledHistograms ? {
|
|
297
297
|
data: (_obsHistograms$fetche = obsHistograms.fetchedData) === null || _obsHistograms$fetche === void 0 ? void 0 : _obsHistograms$fetche[obs.values[index]],
|
|
@@ -428,7 +428,7 @@ function ContinuousObs(_ref5) {
|
|
|
428
428
|
value_counts: obs.value_counts[obs.values[index]],
|
|
429
429
|
pct: obs.value_counts[obs.values[index]] / totalCounts * 100
|
|
430
430
|
},
|
|
431
|
-
isOmitted: _lodash.default.includes(obs.omit, obs.
|
|
431
|
+
isOmitted: _lodash.default.includes(obs.omit, obs.values[index]),
|
|
432
432
|
label: getLabel(index),
|
|
433
433
|
histogramData: enabledHistograms ? {
|
|
434
434
|
data: (_obsHistograms$fetche2 = obsHistograms.fetchedData) === null || _obsHistograms$fetche2 === void 0 ? void 0 : _obsHistograms$fetche2[obs.values[index]],
|
|
@@ -53,7 +53,7 @@ const ObsAccordionToggle = _ref => {
|
|
|
53
53
|
}, children));
|
|
54
54
|
};
|
|
55
55
|
function ObsColsList(_ref2) {
|
|
56
|
-
var _settings$selectedObs;
|
|
56
|
+
var _settings$selectedObs, _settings$selectedObs3, _settings$selectedObs4;
|
|
57
57
|
let {
|
|
58
58
|
showColor = true,
|
|
59
59
|
enableObsGroups = true,
|
|
@@ -112,17 +112,22 @@ function ObsColsList(_ref2) {
|
|
|
112
112
|
return d.type !== _constants.OBS_TYPES.DISCRETE;
|
|
113
113
|
});
|
|
114
114
|
setObsCols(_lodash.default.keyBy(_lodash.default.map(filteredData, d => {
|
|
115
|
+
var _settings$selectedObs2;
|
|
116
|
+
if (((_settings$selectedObs2 = settings.selectedObs) === null || _settings$selectedObs2 === void 0 ? void 0 : _settings$selectedObs2.name) === d.name) {
|
|
117
|
+
return _objectSpread(_objectSpread({}, d), {}, {
|
|
118
|
+
omit: settings.selectedObs.omit || []
|
|
119
|
+
});
|
|
120
|
+
}
|
|
115
121
|
return _objectSpread(_objectSpread({}, d), {}, {
|
|
116
|
-
codesMap: _lodash.default.invert(d.codes),
|
|
117
122
|
omit: []
|
|
118
123
|
});
|
|
119
124
|
}), "name"));
|
|
120
125
|
}
|
|
121
|
-
}, [fetchedData, isPending, obsGroups, serverError, enableGroups]);
|
|
126
|
+
}, [fetchedData, isPending, obsGroups, serverError, enableGroups, (_settings$selectedObs3 = settings.selectedObs) === null || _settings$selectedObs3 === void 0 ? void 0 : _settings$selectedObs3.name, (_settings$selectedObs4 = settings.selectedObs) === null || _settings$selectedObs4 === void 0 ? void 0 : _settings$selectedObs4.omit]);
|
|
122
127
|
(0, _react.useEffect)(() => {
|
|
123
128
|
if (obsCols) {
|
|
124
|
-
var _settings$
|
|
125
|
-
if (!obsCols[(_settings$
|
|
129
|
+
var _settings$selectedObs5;
|
|
130
|
+
if (!obsCols[(_settings$selectedObs5 = settings.selectedObs) === null || _settings$selectedObs5 === void 0 ? void 0 : _settings$selectedObs5.name]) {
|
|
126
131
|
setActive([]);
|
|
127
132
|
dispatch({
|
|
128
133
|
type: "select.obs",
|
|
@@ -139,8 +144,8 @@ function ObsColsList(_ref2) {
|
|
|
139
144
|
}
|
|
140
145
|
};
|
|
141
146
|
const toggleAll = item => {
|
|
142
|
-
var _settings$
|
|
143
|
-
const omit = item.omit.length ? [] :
|
|
147
|
+
var _settings$selectedObs6;
|
|
148
|
+
const omit = item.omit.length ? [] : item.values;
|
|
144
149
|
setObsCols(o => {
|
|
145
150
|
return _objectSpread(_objectSpread({}, o), {}, {
|
|
146
151
|
[item.name]: _objectSpread(_objectSpread({}, item), {}, {
|
|
@@ -148,7 +153,7 @@ function ObsColsList(_ref2) {
|
|
|
148
153
|
})
|
|
149
154
|
});
|
|
150
155
|
});
|
|
151
|
-
if (((_settings$
|
|
156
|
+
if (((_settings$selectedObs6 = settings.selectedObs) === null || _settings$selectedObs6 === void 0 ? void 0 : _settings$selectedObs6.name) === item.name) {
|
|
152
157
|
dispatch({
|
|
153
158
|
type: "select.obs",
|
|
154
159
|
obs: _objectSpread(_objectSpread({}, item), {}, {
|
|
@@ -158,7 +163,7 @@ function ObsColsList(_ref2) {
|
|
|
158
163
|
}
|
|
159
164
|
};
|
|
160
165
|
const toggleLabel = item => {
|
|
161
|
-
const inLabelObs = _lodash.default.
|
|
166
|
+
const inLabelObs = _lodash.default.includes(settings.labelObs, item.name);
|
|
162
167
|
if (inLabelObs) {
|
|
163
168
|
dispatch({
|
|
164
169
|
type: "remove.label.obs",
|
|
@@ -167,11 +172,7 @@ function ObsColsList(_ref2) {
|
|
|
167
172
|
} else {
|
|
168
173
|
dispatch({
|
|
169
174
|
type: "add.label.obs",
|
|
170
|
-
obs:
|
|
171
|
-
name: item.name,
|
|
172
|
-
type: item.type,
|
|
173
|
-
codesMap: item.codesMap
|
|
174
|
-
}
|
|
175
|
+
obs: item
|
|
175
176
|
});
|
|
176
177
|
}
|
|
177
178
|
};
|
|
@@ -192,12 +193,12 @@ function ObsColsList(_ref2) {
|
|
|
192
193
|
});
|
|
193
194
|
};
|
|
194
195
|
const toggleObs = (item, value) => {
|
|
195
|
-
var _settings$
|
|
196
|
+
var _settings$selectedObs7;
|
|
196
197
|
let omit;
|
|
197
|
-
if (_lodash.default.includes(item.omit,
|
|
198
|
-
omit = item.omit.filter(i => i !==
|
|
198
|
+
if (_lodash.default.includes(item.omit, value)) {
|
|
199
|
+
omit = item.omit.filter(i => i !== value);
|
|
199
200
|
} else {
|
|
200
|
-
omit = [...item.omit,
|
|
201
|
+
omit = [...item.omit, value];
|
|
201
202
|
}
|
|
202
203
|
setObsCols(o => {
|
|
203
204
|
return _objectSpread(_objectSpread({}, o), {}, {
|
|
@@ -206,7 +207,7 @@ function ObsColsList(_ref2) {
|
|
|
206
207
|
})
|
|
207
208
|
});
|
|
208
209
|
});
|
|
209
|
-
if (((_settings$
|
|
210
|
+
if (((_settings$selectedObs7 = settings.selectedObs) === null || _settings$selectedObs7 === void 0 ? void 0 : _settings$selectedObs7.name) === item.name) {
|
|
210
211
|
dispatch({
|
|
211
212
|
type: "select.obs",
|
|
212
213
|
obs: _objectSpread(_objectSpread({}, item), {}, {
|
|
@@ -216,16 +217,16 @@ function ObsColsList(_ref2) {
|
|
|
216
217
|
}
|
|
217
218
|
};
|
|
218
219
|
const obsItem = item => {
|
|
219
|
-
var _settings$
|
|
220
|
+
var _settings$selectedObs8, _settings$selectedObs9;
|
|
220
221
|
if (!item) {
|
|
221
222
|
return null;
|
|
222
223
|
}
|
|
223
224
|
if (item.type === _constants.OBS_TYPES.DISCRETE) {
|
|
224
225
|
return null;
|
|
225
226
|
}
|
|
226
|
-
const inLabelObs = _lodash.default.
|
|
227
|
-
const inSliceObs = settings.sliceBy.obs && ((_settings$
|
|
228
|
-
const isColorEncoding = (showSelectedAsActive || settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS) && ((_settings$
|
|
227
|
+
const inLabelObs = _lodash.default.includes(settings.labelObs, item.name);
|
|
228
|
+
const inSliceObs = settings.sliceBy.obs && ((_settings$selectedObs8 = settings.selectedObs) === null || _settings$selectedObs8 === void 0 ? void 0 : _settings$selectedObs8.name) === item.name;
|
|
229
|
+
const isColorEncoding = (showSelectedAsActive || settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS) && ((_settings$selectedObs9 = settings.selectedObs) === null || _settings$selectedObs9 === void 0 ? void 0 : _settings$selectedObs9.name) === item.name;
|
|
229
230
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
230
231
|
className: "accordion-item",
|
|
231
232
|
key: item.name
|
|
@@ -20,6 +20,7 @@ var _ImageViewer = require("../../utils/ImageViewer");
|
|
|
20
20
|
var _Legend = require("../../utils/Legend");
|
|
21
21
|
var _LoadingIndicators = require("../../utils/LoadingIndicators");
|
|
22
22
|
var _requests = require("../../utils/requests");
|
|
23
|
+
var _Resolver = require("../../utils/Resolver");
|
|
23
24
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
24
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); }
|
|
25
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; }
|
|
@@ -29,7 +30,6 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
|
|
|
29
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); }
|
|
30
31
|
_fontawesomeSvgCore.library.add(_freeSolidSvgIcons.faSliders);
|
|
31
32
|
function usePseudospatialData(plotType) {
|
|
32
|
-
var _settings$selectedVar5, _settings$selectedVar6, _settings$selectedVar7, _settings$selectedVar8;
|
|
33
33
|
const ENDPOINT = "pseudospatial";
|
|
34
34
|
const dataset = (0, _DatasetContext.useDataset)();
|
|
35
35
|
const settings = (0, _SettingsContext.useSettings)();
|
|
@@ -37,6 +37,8 @@ function usePseudospatialData(plotType) {
|
|
|
37
37
|
obsIndices,
|
|
38
38
|
isSliced
|
|
39
39
|
} = (0, _FilterContext.useFilteredData)();
|
|
40
|
+
const selectedVar = (0, _Resolver.useSelectedVar)();
|
|
41
|
+
const selectedObs = (0, _Resolver.useSelectedObs)();
|
|
40
42
|
const baseParams = (0, _react.useMemo)(() => {
|
|
41
43
|
return {
|
|
42
44
|
url: dataset.url,
|
|
@@ -50,40 +52,28 @@ function usePseudospatialData(plotType) {
|
|
|
50
52
|
}, [dataset.url, settings.pseudospatial.maskSet, settings.pseudospatial.maskValues, dataset.varNamesCol, isSliced, obsIndices]);
|
|
51
53
|
const getPlotParams = (0, _react.useCallback)(() => {
|
|
52
54
|
if (plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.GENE) {
|
|
53
|
-
var _settings$selectedVar, _settings$selectedVar2, _settings$selectedVar3, _settings$selectedVar4, _settings$selectedObs, _settings$selectedObs2, _settings$selectedObs3;
|
|
54
55
|
return _objectSpread({
|
|
55
|
-
varKey:
|
|
56
|
-
name:
|
|
57
|
-
indices:
|
|
58
|
-
} :
|
|
56
|
+
varKey: selectedVar !== null && selectedVar !== void 0 && selectedVar.isSet ? {
|
|
57
|
+
name: selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.name,
|
|
58
|
+
indices: selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.vars.map(v => v.index)
|
|
59
|
+
} : selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.index
|
|
59
60
|
}, settings.sliceBy.obs ? {
|
|
60
|
-
obsCol:
|
|
61
|
-
obsValues: !(
|
|
62
|
-
var _settings$selectedObs4;
|
|
63
|
-
return (_settings$selectedObs4 = settings.selectedObs) === null || _settings$selectedObs4 === void 0 ? void 0 : _settings$selectedObs4.codesMap[c];
|
|
64
|
-
})
|
|
61
|
+
obsCol: selectedObs,
|
|
62
|
+
obsValues: !(selectedObs !== null && selectedObs !== void 0 && selectedObs.omit.length) ? null : _lodash.default.difference(selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.values, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.omit)
|
|
65
63
|
} : {});
|
|
66
64
|
} else if (plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL) {
|
|
67
|
-
var _settings$selectedObs5, _settings$selectedObs6, _settings$selectedObs7;
|
|
68
65
|
return {
|
|
69
|
-
obsCol:
|
|
70
|
-
obsValues: !(
|
|
71
|
-
var _settings$selectedObs8;
|
|
72
|
-
return (_settings$selectedObs8 = settings.selectedObs) === null || _settings$selectedObs8 === void 0 ? void 0 : _settings$selectedObs8.codesMap[c];
|
|
73
|
-
}),
|
|
66
|
+
obsCol: selectedObs,
|
|
67
|
+
obsValues: !(selectedObs !== null && selectedObs !== void 0 && selectedObs.omit.length) ? null : _lodash.default.difference(selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.values, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.omit),
|
|
74
68
|
mode: settings.pseudospatial.categoricalMode
|
|
75
69
|
};
|
|
76
70
|
} else if (plotType === "continuous") {
|
|
77
|
-
var _settings$selectedObs9, _settings$selectedObs0, _settings$selectedObs1;
|
|
78
71
|
return {
|
|
79
|
-
obsCol:
|
|
80
|
-
obsValues: !(
|
|
81
|
-
var _settings$selectedObs10;
|
|
82
|
-
return (_settings$selectedObs10 = settings.selectedObs) === null || _settings$selectedObs10 === void 0 ? void 0 : _settings$selectedObs10.codesMap[c];
|
|
83
|
-
})
|
|
72
|
+
obsCol: selectedObs,
|
|
73
|
+
obsValues: !(selectedObs !== null && selectedObs !== void 0 && selectedObs.omit.length) ? null : _lodash.default.difference(selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.values, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.omit)
|
|
84
74
|
};
|
|
85
75
|
}
|
|
86
|
-
}, [settings.pseudospatial.categoricalMode,
|
|
76
|
+
}, [settings.pseudospatial.categoricalMode, selectedObs, selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.index, selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.isSet, selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.name, selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.vars, settings.sliceBy.obs, plotType]);
|
|
87
77
|
const params = (0, _react.useMemo)(() => {
|
|
88
78
|
return _objectSpread(_objectSpread({}, baseParams), getPlotParams());
|
|
89
79
|
}, [baseParams, getPlotParams]);
|
|
@@ -92,7 +82,7 @@ function usePseudospatialData(plotType) {
|
|
|
92
82
|
});
|
|
93
83
|
}
|
|
94
84
|
function Pseudospatial(_ref) {
|
|
95
|
-
var
|
|
85
|
+
var _layout$coloraxis3, _layout$coloraxis4;
|
|
96
86
|
let {
|
|
97
87
|
showLegend = true,
|
|
98
88
|
sharedScaleRange = false,
|
|
@@ -108,10 +98,14 @@ function Pseudospatial(_ref) {
|
|
|
108
98
|
getColor
|
|
109
99
|
} = (0, _colorHelper.useColor)();
|
|
110
100
|
const colorscale = (0, _react.useRef)(settings.controls.colorScale);
|
|
101
|
+
const {
|
|
102
|
+
valueMin,
|
|
103
|
+
valueMax
|
|
104
|
+
} = (0, _FilterContext.useFilteredData)();
|
|
105
|
+
const selectedObs = (0, _Resolver.useSelectedObs)();
|
|
111
106
|
(0, _react.useEffect)(() => {
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
}, [settings.colorEncoding, (_settings$selectedObs14 = settings.selectedObs) === null || _settings$selectedObs14 === void 0 ? void 0 : _settings$selectedObs14.type, setPlotType]);
|
|
107
|
+
setPlotType(settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? _constants.PSEUDOSPATIAL_PLOT_TYPES.GENE : (selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type) === _constants.OBS_TYPES.CATEGORICAL || (selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type) === _constants.OBS_TYPES.BOOLEAN ? _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL : (selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type) === _constants.OBS_TYPES.CONTINUOUS ? _constants.PSEUDOSPATIAL_PLOT_TYPES.CONTINUOUS : _constants.PSEUDOSPATIAL_PLOT_TYPES.MASKS);
|
|
108
|
+
}, [settings.colorEncoding, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type, setPlotType]);
|
|
115
109
|
const updateColorscale = (0, _react.useCallback)(colorscale => {
|
|
116
110
|
setLayout(l => {
|
|
117
111
|
return _objectSpread(_objectSpread({}, l), {}, {
|
|
@@ -163,8 +157,8 @@ function Pseudospatial(_ref) {
|
|
|
163
157
|
min,
|
|
164
158
|
max
|
|
165
159
|
} = {
|
|
166
|
-
min: settings.controls.range[0] * (
|
|
167
|
-
max: settings.controls.range[1] * (
|
|
160
|
+
min: settings.controls.range[0] * (valueMax - valueMin) + valueMin,
|
|
161
|
+
max: settings.controls.range[1] * (valueMax - valueMin) + valueMin
|
|
168
162
|
};
|
|
169
163
|
setData(d => {
|
|
170
164
|
return _lodash.default.map(d, trace => {
|
|
@@ -192,7 +186,7 @@ function Pseudospatial(_ref) {
|
|
|
192
186
|
});
|
|
193
187
|
});
|
|
194
188
|
}
|
|
195
|
-
}, [settings.controls.range, settings.controls.valueMax, settings.controls.valueMin,
|
|
189
|
+
}, [settings.controls.range, settings.controls.valueMax, settings.controls.valueMin, getColor, sharedScaleRange, valueMax, valueMin]);
|
|
196
190
|
const hasSelections = !!plotType && !!settings.pseudospatial.maskSet;
|
|
197
191
|
const faSlidersPath = _freeSolidSvgIcons.faSliders.icon[4];
|
|
198
192
|
if (!serverError) {
|