@haniffalab/cherita-react 1.2.0 → 1.3.0-dev.2025-05-28.9afc380f
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/controls/Controls.js +60 -0
- package/dist/cjs/components/dotplot/Dotplot.js +47 -38
- package/dist/cjs/components/dotplot/DotplotControls.js +77 -114
- package/dist/cjs/components/full-page/FullPage.js +29 -33
- package/dist/cjs/components/full-page/FullPagePseudospatial.js +30 -33
- package/dist/cjs/components/heatmap/Heatmap.js +33 -22
- package/dist/cjs/components/heatmap/HeatmapControls.js +2 -19
- package/dist/cjs/components/matrixplot/Matrixplot.js +35 -24
- package/dist/cjs/components/matrixplot/MatrixplotControls.js +4 -34
- package/dist/cjs/components/obs-list/ObsItem.js +63 -51
- package/dist/cjs/components/obs-list/ObsList.js +53 -48
- package/dist/cjs/components/obsm-list/ObsmList.js +17 -12
- package/dist/cjs/components/offcanvas/index.js +14 -11
- package/dist/cjs/components/pseudospatial/Pseudospatial.js +78 -68
- package/dist/cjs/components/pseudospatial/PseudospatialToolbar.js +27 -21
- package/dist/cjs/components/scatterplot/Scatterplot.js +82 -76
- package/dist/cjs/components/scatterplot/ScatterplotControls.js +18 -31
- package/dist/cjs/components/scatterplot/SpatialControls.js +53 -23
- package/dist/cjs/components/scatterplot/Toolbox.js +1 -18
- package/dist/cjs/components/search-bar/SearchBar.js +156 -59
- package/dist/cjs/components/search-bar/SearchInfo.js +182 -0
- package/dist/cjs/components/search-bar/SearchResults.js +90 -60
- package/dist/cjs/components/var-list/VarItem.js +52 -75
- package/dist/cjs/components/var-list/VarList.js +47 -172
- package/dist/cjs/components/var-list/VarListToolbar.js +7 -8
- package/dist/cjs/components/var-list/VarSet.js +66 -57
- package/dist/cjs/components/violin/Violin.js +54 -43
- package/dist/cjs/components/violin/ViolinControls.js +4 -20
- package/dist/cjs/context/DatasetContext.js +26 -513
- package/dist/cjs/context/FilterContext.js +9 -8
- package/dist/cjs/context/SettingsContext.js +539 -0
- package/dist/cjs/context/ZarrDataContext.js +1 -2
- package/dist/cjs/helpers/color-helper.js +8 -8
- package/dist/cjs/helpers/zarr-helper.js +19 -16
- package/dist/cjs/utils/Filter.js +25 -21
- package/dist/cjs/utils/Histogram.js +4 -3
- package/dist/cjs/utils/ImageViewer.js +1 -2
- package/dist/cjs/utils/Legend.js +18 -12
- 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 +31 -50
- package/dist/css/cherita.css +84 -24
- package/dist/css/cherita.css.map +1 -1
- package/dist/esm/components/controls/Controls.js +51 -0
- package/dist/esm/components/dotplot/Dotplot.js +47 -37
- package/dist/esm/components/dotplot/DotplotControls.js +77 -112
- package/dist/esm/components/full-page/FullPage.js +29 -32
- package/dist/esm/components/full-page/FullPagePseudospatial.js +30 -32
- package/dist/esm/components/heatmap/Heatmap.js +32 -20
- package/dist/esm/components/heatmap/HeatmapControls.js +3 -20
- package/dist/esm/components/matrixplot/Matrixplot.js +34 -22
- package/dist/esm/components/matrixplot/MatrixplotControls.js +5 -35
- package/dist/esm/components/obs-list/ObsItem.js +63 -49
- package/dist/esm/components/obs-list/ObsList.js +53 -47
- package/dist/esm/components/obsm-list/ObsmList.js +17 -11
- package/dist/esm/components/offcanvas/index.js +14 -11
- package/dist/esm/components/pseudospatial/Pseudospatial.js +77 -66
- package/dist/esm/components/pseudospatial/PseudospatialToolbar.js +27 -20
- package/dist/esm/components/scatterplot/Scatterplot.js +81 -74
- package/dist/esm/components/scatterplot/ScatterplotControls.js +18 -29
- package/dist/esm/components/scatterplot/SpatialControls.js +54 -23
- package/dist/esm/components/scatterplot/Toolbox.js +1 -18
- package/dist/esm/components/search-bar/SearchBar.js +156 -59
- package/dist/esm/components/search-bar/SearchInfo.js +173 -0
- package/dist/esm/components/search-bar/SearchResults.js +91 -60
- package/dist/esm/components/var-list/VarItem.js +53 -76
- package/dist/esm/components/var-list/VarList.js +47 -171
- package/dist/esm/components/var-list/VarListToolbar.js +6 -6
- package/dist/esm/components/var-list/VarSet.js +67 -57
- package/dist/esm/components/violin/Violin.js +53 -41
- package/dist/esm/components/violin/ViolinControls.js +5 -21
- package/dist/esm/context/DatasetContext.js +25 -510
- package/dist/esm/context/FilterContext.js +8 -6
- package/dist/esm/context/SettingsContext.js +528 -0
- package/dist/esm/helpers/color-helper.js +8 -8
- package/dist/esm/helpers/zarr-helper.js +19 -16
- package/dist/esm/utils/Filter.js +25 -21
- package/dist/esm/utils/Histogram.js +4 -3
- package/dist/esm/utils/Legend.js +17 -10
- 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 +33 -51
- package/package.json +6 -3
- package/scss/cherita.scss +50 -9
- package/scss/components/layouts.scss +24 -13
- package/scss/components/lists.scss +10 -0
- package/scss/components/plots.scss +3 -5
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
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; }
|
|
2
|
+
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; }
|
|
3
|
+
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; }
|
|
4
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
5
|
+
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); }
|
|
1
6
|
import React, { useEffect, useState } from "react";
|
|
2
7
|
import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
|
|
3
8
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
@@ -7,14 +12,17 @@ import Plot from "react-plotly.js";
|
|
|
7
12
|
import { VIOLIN_MODES } from "../../constants/constants";
|
|
8
13
|
import { useDataset } from "../../context/DatasetContext";
|
|
9
14
|
import { useFilteredData } from "../../context/FilterContext";
|
|
15
|
+
import { useSettings } from "../../context/SettingsContext";
|
|
10
16
|
import { LoadingSpinner } from "../../utils/LoadingIndicators";
|
|
11
17
|
import { useDebouncedFetch } from "../../utils/requests";
|
|
12
18
|
export function Violin(_ref) {
|
|
19
|
+
var _settings$selectedVar, _settings$selectedVar2, _settings$selectedVar3, _settings$selectedVar4, _settings$selectedObs, _settings$selectedObs2, _settings$selectedObs3;
|
|
13
20
|
let {
|
|
14
21
|
mode = VIOLIN_MODES.MULTIKEY
|
|
15
22
|
} = _ref;
|
|
16
23
|
const ENDPOINT = "violin";
|
|
17
24
|
const dataset = useDataset();
|
|
25
|
+
const settings = useSettings();
|
|
18
26
|
const {
|
|
19
27
|
obsIndices,
|
|
20
28
|
isSliced
|
|
@@ -22,76 +30,80 @@ export function Violin(_ref) {
|
|
|
22
30
|
const [data, setData] = useState([]);
|
|
23
31
|
const [layout, setLayout] = useState({});
|
|
24
32
|
const [hasSelections, setHasSelections] = useState(false);
|
|
25
|
-
const [params, setParams] = useState({
|
|
33
|
+
const [params, setParams] = useState(_objectSpread({
|
|
26
34
|
url: dataset.url,
|
|
27
35
|
mode: mode,
|
|
28
|
-
scale:
|
|
29
|
-
varNamesCol: dataset.varNamesCol
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
36
|
+
scale: settings.controls.scale.violinplot,
|
|
37
|
+
varNamesCol: dataset.varNamesCol
|
|
38
|
+
}, {
|
|
39
|
+
[VIOLIN_MODES.MULTIKEY]: {
|
|
40
|
+
varKeys: settings.selectedMultiVar.map(i => i.isSet ? {
|
|
41
|
+
name: i.name,
|
|
42
|
+
indices: i.vars.map(v => v.index)
|
|
43
|
+
} : i.index),
|
|
44
|
+
obsKeys: [] // @TODO: implement
|
|
45
|
+
},
|
|
46
|
+
[VIOLIN_MODES.GROUPBY]: {
|
|
47
|
+
varKey: (_settings$selectedVar = settings.selectedVar) !== null && _settings$selectedVar !== void 0 && _settings$selectedVar.isSet ? {
|
|
48
|
+
name: (_settings$selectedVar2 = settings.selectedVar) === null || _settings$selectedVar2 === void 0 ? void 0 : _settings$selectedVar2.name,
|
|
49
|
+
indices: (_settings$selectedVar3 = settings.selectedVar) === null || _settings$selectedVar3 === void 0 ? void 0 : _settings$selectedVar3.vars.map(v => v.index)
|
|
50
|
+
} : (_settings$selectedVar4 = settings.selectedVar) === null || _settings$selectedVar4 === void 0 ? void 0 : _settings$selectedVar4.index,
|
|
51
|
+
obsCol: settings.selectedObs,
|
|
52
|
+
obsValues: !((_settings$selectedObs = settings.selectedObs) !== null && _settings$selectedObs !== void 0 && _settings$selectedObs.omit.length) ? null : _.difference(_.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 => {
|
|
53
|
+
var _settings$selectedObs4;
|
|
54
|
+
return (_settings$selectedObs4 = settings.selectedObs) === null || _settings$selectedObs4 === void 0 ? void 0 : _settings$selectedObs4.codesMap[c];
|
|
55
|
+
}),
|
|
56
|
+
obsIndices: isSliced ? [...(obsIndices || [])] : null
|
|
57
|
+
}
|
|
58
|
+
}[mode]));
|
|
49
59
|
// @TODO: set default scale
|
|
50
60
|
|
|
51
61
|
useEffect(() => {
|
|
52
62
|
if (mode === VIOLIN_MODES.MULTIKEY) {
|
|
53
|
-
if (
|
|
63
|
+
if (settings.selectedMultiVar.length) {
|
|
54
64
|
setHasSelections(true);
|
|
55
65
|
} else {
|
|
56
66
|
setHasSelections(false);
|
|
57
67
|
}
|
|
58
68
|
setParams(p => {
|
|
59
|
-
return {
|
|
60
|
-
...p,
|
|
69
|
+
return _objectSpread(_objectSpread({}, p), {}, {
|
|
61
70
|
url: dataset.url,
|
|
62
71
|
mode: mode,
|
|
63
|
-
varKeys:
|
|
72
|
+
varKeys: settings.selectedMultiVar.map(i => i.isSet ? {
|
|
64
73
|
name: i.name,
|
|
65
74
|
indices: i.vars.map(v => v.index)
|
|
66
75
|
} : i.index),
|
|
67
|
-
scale:
|
|
76
|
+
scale: settings.controls.scale.violinplot,
|
|
68
77
|
varNamesCol: dataset.varNamesCol
|
|
69
|
-
};
|
|
78
|
+
});
|
|
70
79
|
});
|
|
71
80
|
} else if (mode === VIOLIN_MODES.GROUPBY) {
|
|
72
|
-
if (
|
|
81
|
+
if (settings.selectedObs && settings.selectedVar) {
|
|
73
82
|
setHasSelections(true);
|
|
74
83
|
} else {
|
|
75
84
|
setHasSelections(false);
|
|
76
85
|
}
|
|
77
86
|
setParams(p => {
|
|
78
|
-
|
|
79
|
-
|
|
87
|
+
var _settings$selectedVar5, _settings$selectedVar6, _settings$selectedVar7, _settings$selectedVar8, _settings$selectedObs5, _settings$selectedObs6, _settings$selectedObs7;
|
|
88
|
+
return _objectSpread(_objectSpread({}, p), {}, {
|
|
80
89
|
url: dataset.url,
|
|
81
90
|
mode: mode,
|
|
82
|
-
varKey:
|
|
83
|
-
name:
|
|
84
|
-
indices:
|
|
85
|
-
} :
|
|
86
|
-
obsCol:
|
|
87
|
-
obsValues: !
|
|
91
|
+
varKey: (_settings$selectedVar5 = settings.selectedVar) !== null && _settings$selectedVar5 !== void 0 && _settings$selectedVar5.isSet ? {
|
|
92
|
+
name: (_settings$selectedVar6 = settings.selectedVar) === null || _settings$selectedVar6 === void 0 ? void 0 : _settings$selectedVar6.name,
|
|
93
|
+
indices: (_settings$selectedVar7 = settings.selectedVar) === null || _settings$selectedVar7 === void 0 ? void 0 : _settings$selectedVar7.vars.map(v => v.index)
|
|
94
|
+
} : (_settings$selectedVar8 = settings.selectedVar) === null || _settings$selectedVar8 === void 0 ? void 0 : _settings$selectedVar8.index,
|
|
95
|
+
obsCol: settings.selectedObs,
|
|
96
|
+
obsValues: !((_settings$selectedObs5 = settings.selectedObs) !== null && _settings$selectedObs5 !== void 0 && _settings$selectedObs5.omit.length) ? null : _.difference(_.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 => {
|
|
97
|
+
var _settings$selectedObs8;
|
|
98
|
+
return (_settings$selectedObs8 = settings.selectedObs) === null || _settings$selectedObs8 === void 0 ? void 0 : _settings$selectedObs8.codesMap[c];
|
|
99
|
+
}),
|
|
88
100
|
obsIndices: isSliced ? [...(obsIndices || [])] : null,
|
|
89
|
-
scale:
|
|
101
|
+
scale: settings.controls.scale.violinplot,
|
|
90
102
|
varNamesCol: dataset.varNamesCol
|
|
91
|
-
};
|
|
103
|
+
});
|
|
92
104
|
});
|
|
93
105
|
}
|
|
94
|
-
}, [
|
|
106
|
+
}, [settings.controls.scale.violinplot, settings.selectedMultiVar, settings.selectedObs, settings.selectedVar, dataset.url, dataset.varNamesCol, obsIndices, isSliced, mode]);
|
|
95
107
|
const {
|
|
96
108
|
fetchedData,
|
|
97
109
|
isPending,
|
|
@@ -117,7 +129,7 @@ export function Violin(_ref) {
|
|
|
117
129
|
maxWidth: "100%",
|
|
118
130
|
maxHeight: "100%"
|
|
119
131
|
}
|
|
120
|
-
}), fetchedData
|
|
132
|
+
}), (fetchedData === null || fetchedData === void 0 ? void 0 : fetchedData.resampled) && /*#__PURE__*/React.createElement(Alert, {
|
|
121
133
|
variant: "warning"
|
|
122
134
|
}, /*#__PURE__*/React.createElement("b", null, "Warning:"), " For performance reasons this plot was generated with resampled data. It will not be exactly the same as one produced with the entire dataset. \xA0", /*#__PURE__*/React.createElement(OverlayTrigger, {
|
|
123
135
|
placement: "top",
|
|
@@ -1,24 +1,8 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
import { VIOLINPLOT_SCALES } from "../../constants/constants";
|
|
5
|
-
import { useDataset, useDatasetDispatch } from "../../context/DatasetContext";
|
|
2
|
+
import { Form } from "react-bootstrap";
|
|
3
|
+
import { ScaleSelect } from "../controls/Controls";
|
|
6
4
|
export function ViolinControls() {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
key: scale.value,
|
|
11
|
-
active: dataset.controls.scale.violinplot === scale,
|
|
12
|
-
onClick: () => {
|
|
13
|
-
dispatch({
|
|
14
|
-
type: "set.controls.scale",
|
|
15
|
-
plot: "violinplot",
|
|
16
|
-
scale: scale
|
|
17
|
-
});
|
|
18
|
-
}
|
|
19
|
-
}, scale.name));
|
|
20
|
-
return /*#__PURE__*/React.createElement(ButtonToolbar, null, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(InputGroup, null, /*#__PURE__*/React.createElement(InputGroup.Text, null, "Scale"), /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.Toggle, {
|
|
21
|
-
id: "dropdownStandardScale",
|
|
22
|
-
variant: "light"
|
|
23
|
-
}, dataset.controls.scale.violinplot.name), /*#__PURE__*/React.createElement(Dropdown.Menu, null, scaleList)))));
|
|
5
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(ScaleSelect, {
|
|
6
|
+
plot: "violinplot"
|
|
7
|
+
})));
|
|
24
8
|
}
|