@haniffalab/cherita-react 1.2.0-dev.2025-05-21.e8f5ce54 → 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 +10 -7
- package/dist/cjs/components/var-list/VarList.js +14 -9
- package/dist/cjs/components/var-list/VarListToolbar.js +1 -2
- package/dist/cjs/components/var-list/VarSet.js +1 -2
- 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 +13 -9
- 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 +9 -5
- package/dist/esm/components/var-list/VarList.js +13 -7
- 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
|
@@ -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, { useCallback, useEffect, useRef, useState } from "react";
|
|
2
7
|
import _ from "lodash";
|
|
3
8
|
import { Alert } from "react-bootstrap";
|
|
@@ -8,6 +13,7 @@ import { useSettings } from "../../context/SettingsContext";
|
|
|
8
13
|
import { LoadingSpinner } from "../../utils/LoadingIndicators";
|
|
9
14
|
import { useDebouncedFetch } from "../../utils/requests";
|
|
10
15
|
export function Matrixplot() {
|
|
16
|
+
var _settings$selectedObs, _settings$selectedObs2, _settings$selectedObs3;
|
|
11
17
|
const ENDPOINT = "matrixplot";
|
|
12
18
|
const dataset = useDataset();
|
|
13
19
|
const settings = useSettings();
|
|
@@ -22,7 +28,10 @@ export function Matrixplot() {
|
|
|
22
28
|
const [params, setParams] = useState({
|
|
23
29
|
url: dataset.url,
|
|
24
30
|
obsCol: settings.selectedObs,
|
|
25
|
-
obsValues: !settings.selectedObs
|
|
31
|
+
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 => {
|
|
32
|
+
var _settings$selectedObs4;
|
|
33
|
+
return (_settings$selectedObs4 = settings.selectedObs) === null || _settings$selectedObs4 === void 0 ? void 0 : _settings$selectedObs4.codesMap[c];
|
|
34
|
+
}),
|
|
26
35
|
varKeys: settings.selectedMultiVar.map(i => i.isSet ? {
|
|
27
36
|
name: i.name,
|
|
28
37
|
indices: i.vars.map(v => v.index)
|
|
@@ -38,11 +47,14 @@ export function Matrixplot() {
|
|
|
38
47
|
setHasSelections(false);
|
|
39
48
|
}
|
|
40
49
|
setParams(p => {
|
|
41
|
-
|
|
42
|
-
|
|
50
|
+
var _settings$selectedObs5, _settings$selectedObs6, _settings$selectedObs7;
|
|
51
|
+
return _objectSpread(_objectSpread({}, p), {}, {
|
|
43
52
|
url: dataset.url,
|
|
44
53
|
obsCol: settings.selectedObs,
|
|
45
|
-
obsValues: !settings.selectedObs
|
|
54
|
+
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 => {
|
|
55
|
+
var _settings$selectedObs8;
|
|
56
|
+
return (_settings$selectedObs8 = settings.selectedObs) === null || _settings$selectedObs8 === void 0 ? void 0 : _settings$selectedObs8.codesMap[c];
|
|
57
|
+
}),
|
|
46
58
|
varKeys: settings.selectedMultiVar.map(i => i.isSet ? {
|
|
47
59
|
name: i.name,
|
|
48
60
|
indices: i.vars.map(v => v.index)
|
|
@@ -50,18 +62,16 @@ export function Matrixplot() {
|
|
|
50
62
|
obsIndices: isSliced ? [...(obsIndices || [])] : null,
|
|
51
63
|
standardScale: settings.controls.standardScale,
|
|
52
64
|
varNamesCol: dataset.varNamesCol
|
|
53
|
-
};
|
|
65
|
+
});
|
|
54
66
|
});
|
|
55
67
|
}, [settings.controls.standardScale, settings.selectedMultiVar, settings.selectedObs, dataset.url, dataset.varNamesCol, obsIndices, isSliced]);
|
|
56
68
|
const updateColorscale = useCallback(colorscale => {
|
|
57
69
|
setLayout(l => {
|
|
58
|
-
return {
|
|
59
|
-
|
|
60
|
-
coloraxis: {
|
|
61
|
-
...l.coloraxis,
|
|
70
|
+
return _objectSpread(_objectSpread({}, l), {}, {
|
|
71
|
+
coloraxis: _objectSpread(_objectSpread({}, l.coloraxis), {}, {
|
|
62
72
|
colorscale: colorscale
|
|
63
|
-
}
|
|
64
|
-
};
|
|
73
|
+
})
|
|
74
|
+
});
|
|
65
75
|
});
|
|
66
76
|
}, []);
|
|
67
77
|
const {
|
|
@@ -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, { useCallback, useEffect, useMemo, useState } from "react";
|
|
2
7
|
import { Tooltip } from "@mui/material";
|
|
3
8
|
import { Gauge, SparkLineChart } from "@mui/x-charts";
|
|
@@ -37,9 +42,10 @@ import { useObsData } from "../../utils/zarrData";
|
|
|
37
42
|
// }
|
|
38
43
|
|
|
39
44
|
function getContinuousLabel(code, binEdges) {
|
|
40
|
-
return
|
|
45
|
+
return "[ ".concat(formatNumerical(binEdges[code][0]), ", ").concat(formatNumerical(binEdges[code][1], FORMATS.EXPONENTIAL)).concat(code === binEdges.length - 1 ? " ]" : " )");
|
|
41
46
|
}
|
|
42
47
|
const useObsHistogram = obs => {
|
|
48
|
+
var _settings$selectedVar, _settings$selectedVar2, _settings$selectedVar3, _settings$selectedVar4, _settings$selectedVar9, _settings$selectedVar0, _settings$selectedVar1, _settings$selectedVar10;
|
|
43
49
|
const ENDPOINT = "obs/histograms";
|
|
44
50
|
const dataset = useDataset();
|
|
45
51
|
const settings = useSettings();
|
|
@@ -51,25 +57,25 @@ const useObsHistogram = obs => {
|
|
|
51
57
|
url: dataset.url,
|
|
52
58
|
obsCol: _.omit(obs, "omit"),
|
|
53
59
|
// avoid re-rendering when toggling unselected obs
|
|
54
|
-
varKey: settings.selectedVar
|
|
55
|
-
name: settings.selectedVar
|
|
56
|
-
indices: settings.selectedVar
|
|
57
|
-
} : settings.selectedVar
|
|
60
|
+
varKey: (_settings$selectedVar = settings.selectedVar) !== null && _settings$selectedVar !== void 0 && _settings$selectedVar.isSet ? {
|
|
61
|
+
name: (_settings$selectedVar2 = settings.selectedVar) === null || _settings$selectedVar2 === void 0 ? void 0 : _settings$selectedVar2.name,
|
|
62
|
+
indices: (_settings$selectedVar3 = settings.selectedVar) === null || _settings$selectedVar3 === void 0 ? void 0 : _settings$selectedVar3.vars.map(v => v.index)
|
|
63
|
+
} : (_settings$selectedVar4 = settings.selectedVar) === null || _settings$selectedVar4 === void 0 ? void 0 : _settings$selectedVar4.index,
|
|
58
64
|
obsIndices: isSliced ? [...(obsIndices || [])] : null
|
|
59
65
|
});
|
|
60
66
|
useEffect(() => {
|
|
61
67
|
setParams(p => {
|
|
62
|
-
|
|
63
|
-
|
|
68
|
+
var _settings$selectedVar5, _settings$selectedVar6, _settings$selectedVar7, _settings$selectedVar8;
|
|
69
|
+
return _objectSpread(_objectSpread({}, p), {}, {
|
|
64
70
|
obsCol: _.omit(obs, "omit"),
|
|
65
|
-
varKey: settings.selectedVar
|
|
66
|
-
name: settings.selectedVar
|
|
67
|
-
indices: settings.selectedVar
|
|
68
|
-
} : settings.selectedVar
|
|
71
|
+
varKey: (_settings$selectedVar5 = settings.selectedVar) !== null && _settings$selectedVar5 !== void 0 && _settings$selectedVar5.isSet ? {
|
|
72
|
+
name: (_settings$selectedVar6 = settings.selectedVar) === null || _settings$selectedVar6 === void 0 ? void 0 : _settings$selectedVar6.name,
|
|
73
|
+
indices: (_settings$selectedVar7 = settings.selectedVar) === null || _settings$selectedVar7 === void 0 ? void 0 : _settings$selectedVar7.vars.map(v => v.index)
|
|
74
|
+
} : (_settings$selectedVar8 = settings.selectedVar) === null || _settings$selectedVar8 === void 0 ? void 0 : _settings$selectedVar8.index,
|
|
69
75
|
obsIndices: isSliced ? [...(obsIndices || [])] : null
|
|
70
|
-
};
|
|
76
|
+
});
|
|
71
77
|
});
|
|
72
|
-
}, [settings.selectedVar
|
|
78
|
+
}, [(_settings$selectedVar9 = settings.selectedVar) === null || _settings$selectedVar9 === void 0 ? void 0 : _settings$selectedVar9.index, (_settings$selectedVar0 = settings.selectedVar) === null || _settings$selectedVar0 === void 0 ? void 0 : _settings$selectedVar0.isSet, (_settings$selectedVar1 = settings.selectedVar) === null || _settings$selectedVar1 === void 0 ? void 0 : _settings$selectedVar1.name, (_settings$selectedVar10 = settings.selectedVar) === null || _settings$selectedVar10 === void 0 ? void 0 : _settings$selectedVar10.vars, obsIndices, isSliced, obs]);
|
|
73
79
|
return useFetch(ENDPOINT, params, {
|
|
74
80
|
enabled: !!settings.selectedVar && settings.colorEncoding === COLOR_ENCODINGS.VAR,
|
|
75
81
|
refetchOnMount: false
|
|
@@ -83,6 +89,7 @@ const getBinIndex = (v, binEdges) => {
|
|
|
83
89
|
return _.findIndex(modifiedBinEdges, range => _.inRange(v, ...range));
|
|
84
90
|
};
|
|
85
91
|
const useFilteredObsData = obs => {
|
|
92
|
+
var _obs$bins2;
|
|
86
93
|
const {
|
|
87
94
|
obsIndices
|
|
88
95
|
} = useFilteredData();
|
|
@@ -98,19 +105,20 @@ const useFilteredObsData = obs => {
|
|
|
98
105
|
valueCounts = _.countBy(filteredObsValues);
|
|
99
106
|
} else {
|
|
100
107
|
valueCounts = _.countBy(filteredObsValues, v => {
|
|
101
|
-
|
|
108
|
+
var _obs$bins;
|
|
109
|
+
return getBinIndex(v, ((_obs$bins = obs.bins) === null || _obs$bins === void 0 ? void 0 : _obs$bins.binEdges) || [[null, null]]);
|
|
102
110
|
});
|
|
103
111
|
}
|
|
104
112
|
valueCounts = _.mapKeys(valueCounts, (_v, i) => {
|
|
105
113
|
return obs.codesMap[i];
|
|
106
114
|
});
|
|
107
|
-
const totalCounts = obsIndices
|
|
115
|
+
const totalCounts = obsIndices === null || obsIndices === void 0 ? void 0 : obsIndices.size;
|
|
108
116
|
const pct = _.mapValues(valueCounts, v => v / totalCounts * 100);
|
|
109
117
|
return {
|
|
110
118
|
valueCounts,
|
|
111
119
|
pct
|
|
112
120
|
};
|
|
113
|
-
}, [isCategorical, obs.bins
|
|
121
|
+
}, [isCategorical, (_obs$bins2 = obs.bins) === null || _obs$bins2 === void 0 ? void 0 : _obs$bins2.binEdges, obs.codesMap, obsData.data, obsIndices]);
|
|
114
122
|
return {
|
|
115
123
|
value_counts: valueCounts,
|
|
116
124
|
pct: pct
|
|
@@ -170,7 +178,7 @@ function CategoricalItem(_ref) {
|
|
|
170
178
|
})), /*#__PURE__*/React.createElement("div", {
|
|
171
179
|
className: "pl-1 m-0"
|
|
172
180
|
}, /*#__PURE__*/React.createElement(Tooltip, {
|
|
173
|
-
title: isSliced ? /*#__PURE__*/React.createElement(React.Fragment, null, "Filtered:", " ", formatNumerical(filteredStats.pct, FORMATS.EXPONENTIAL), "%", /*#__PURE__*/React.createElement("br", null), "Total: ", formatNumerical(stats.pct, FORMATS.EXPONENTIAL), "%") :
|
|
181
|
+
title: isSliced ? /*#__PURE__*/React.createElement(React.Fragment, null, "Filtered:", " ", formatNumerical(filteredStats.pct, FORMATS.EXPONENTIAL), "%", /*#__PURE__*/React.createElement("br", null), "Total: ", formatNumerical(stats.pct, FORMATS.EXPONENTIAL), "%") : "".concat(formatNumerical(stats.pct, FORMATS.EXPONENTIAL), "%"),
|
|
174
182
|
placement: "left",
|
|
175
183
|
arrow: true
|
|
176
184
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -225,7 +233,7 @@ function CategoricalItem(_ref) {
|
|
|
225
233
|
y: "0",
|
|
226
234
|
width: "10",
|
|
227
235
|
height: "10",
|
|
228
|
-
fill:
|
|
236
|
+
fill: "rgb(".concat(getColor({
|
|
229
237
|
value: (code - min) / (max - min),
|
|
230
238
|
categorical: true,
|
|
231
239
|
grayOut: isOmitted,
|
|
@@ -233,7 +241,7 @@ function CategoricalItem(_ref) {
|
|
|
233
241
|
alpha: 1
|
|
234
242
|
},
|
|
235
243
|
colorEncoding: "obs"
|
|
236
|
-
})
|
|
244
|
+
}), ")")
|
|
237
245
|
}))) : null))));
|
|
238
246
|
}
|
|
239
247
|
export function CategoricalObs(_ref2) {
|
|
@@ -253,6 +261,7 @@ export function CategoricalObs(_ref2) {
|
|
|
253
261
|
const obsHistograms = useObsHistogram(obs);
|
|
254
262
|
const filteredObsData = useFilteredObsData(obs);
|
|
255
263
|
const getDataAtIndex = useCallback(index => {
|
|
264
|
+
var _obsHistograms$fetche;
|
|
256
265
|
return {
|
|
257
266
|
value: obs.values[index],
|
|
258
267
|
code: obs.codes[obs.values[index]],
|
|
@@ -263,7 +272,7 @@ export function CategoricalObs(_ref2) {
|
|
|
263
272
|
isOmitted: _.includes(obs.omit, obs.codes[obs.values[index]]),
|
|
264
273
|
label: obs.values[index],
|
|
265
274
|
histogramData: settings.colorEncoding === COLOR_ENCODINGS.VAR ? {
|
|
266
|
-
data: obsHistograms.fetchedData
|
|
275
|
+
data: (_obsHistograms$fetche = obsHistograms.fetchedData) === null || _obsHistograms$fetche === void 0 ? void 0 : _obsHistograms$fetche[obs.values[index]],
|
|
267
276
|
isPending: obsHistograms.isPending,
|
|
268
277
|
altColor: isSliced
|
|
269
278
|
} : {
|
|
@@ -271,12 +280,12 @@ export function CategoricalObs(_ref2) {
|
|
|
271
280
|
isPending: false
|
|
272
281
|
},
|
|
273
282
|
filteredStats: {
|
|
274
|
-
value_counts: filteredObsData
|
|
275
|
-
pct: filteredObsData
|
|
283
|
+
value_counts: (filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.value_counts[obs.values[index]]) || 0,
|
|
284
|
+
pct: (filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.pct[obs.values[index]]) || 0
|
|
276
285
|
},
|
|
277
286
|
isSliced: isSliced
|
|
278
287
|
};
|
|
279
|
-
}, [settings.colorEncoding, filteredObsData
|
|
288
|
+
}, [settings.colorEncoding, filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.pct, filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.value_counts, isSliced, obs.codes, obs.omit, obs.value_counts, obs.values, obsHistograms.fetchedData, obsHistograms.isPending, totalCounts]);
|
|
280
289
|
showColor &= settings.colorEncoding === COLOR_ENCODINGS.OBS;
|
|
281
290
|
return /*#__PURE__*/React.createElement(ListGroup, {
|
|
282
291
|
variant: "flush",
|
|
@@ -339,9 +348,9 @@ function ObsContinuousStats(_ref3) {
|
|
|
339
348
|
},
|
|
340
349
|
xAxis: {
|
|
341
350
|
data: fetchedData.kde_values[0],
|
|
342
|
-
valueFormatter: v =>
|
|
351
|
+
valueFormatter: v => "".concat(formatNumerical(v, FORMATS.EXPONENTIAL))
|
|
343
352
|
},
|
|
344
|
-
valueFormatter: v =>
|
|
353
|
+
valueFormatter: v => "".concat(formatNumerical(v, FORMATS.EXPONENTIAL)),
|
|
345
354
|
slotProps: {
|
|
346
355
|
popper: {
|
|
347
356
|
className: "feature-histogram-tooltip"
|
|
@@ -386,8 +395,8 @@ export function ContinuousObs(_ref4) {
|
|
|
386
395
|
isOmitted: _.includes(obs.omit, obs.codes[obs.values[index]]),
|
|
387
396
|
label: isNaN(obs.values[index]) ? "NaN" : getContinuousLabel(obs.codes[obs.values[index]], obs.bins.binEdges),
|
|
388
397
|
filteredStats: {
|
|
389
|
-
value_counts: filteredObsData
|
|
390
|
-
pct: filteredObsData
|
|
398
|
+
value_counts: (filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.value_counts[obs.values[index]]) || 0,
|
|
399
|
+
pct: (filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.pct[obs.values[index]]) || 0
|
|
391
400
|
},
|
|
392
401
|
isSliced: isSliced
|
|
393
402
|
};
|
|
@@ -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, { useContext, useEffect, useMemo, useState } from "react";
|
|
2
7
|
import { faChevronDown, faChevronRight } from "@fortawesome/free-solid-svg-icons";
|
|
3
8
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
@@ -29,7 +34,7 @@ const ObsAccordionToggle = _ref => {
|
|
|
29
34
|
handleAccordionToggle(eventKey, isCurrentEventKey);
|
|
30
35
|
});
|
|
31
36
|
return /*#__PURE__*/React.createElement("div", {
|
|
32
|
-
className:
|
|
37
|
+
className: "obs-accordion-header ".concat(isCurrentEventKey ? "active" : ""),
|
|
33
38
|
onClick: decoratedOnClick
|
|
34
39
|
}, /*#__PURE__*/React.createElement("span", {
|
|
35
40
|
className: "obs-accordion-header-chevron"
|
|
@@ -40,6 +45,7 @@ const ObsAccordionToggle = _ref => {
|
|
|
40
45
|
}, children));
|
|
41
46
|
};
|
|
42
47
|
export function ObsColsList(_ref2) {
|
|
48
|
+
var _settings$selectedObs;
|
|
43
49
|
let {
|
|
44
50
|
showColor = true,
|
|
45
51
|
enableObsGroups = true
|
|
@@ -50,20 +56,21 @@ export function ObsColsList(_ref2) {
|
|
|
50
56
|
const dispatch = useSettingsDispatch();
|
|
51
57
|
const [enableGroups, setEnableGroups] = useState(enableObsGroups);
|
|
52
58
|
const [obsCols, setObsCols] = useState(null);
|
|
53
|
-
const [active, setActive] = useState([...[settings.selectedObs
|
|
59
|
+
const [active, setActive] = useState([...[(_settings$selectedObs = settings.selectedObs) === null || _settings$selectedObs === void 0 ? void 0 : _settings$selectedObs.name]]);
|
|
54
60
|
const [params, setParams] = useState({
|
|
55
61
|
url: dataset.url
|
|
56
62
|
});
|
|
57
|
-
const obsGroups = useMemo(() =>
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
63
|
+
const obsGroups = useMemo(() => {
|
|
64
|
+
var _dataset$obsGroups;
|
|
65
|
+
return _objectSpread({
|
|
66
|
+
default: _.union(DEFAULT_OBS_GROUP, (_dataset$obsGroups = dataset.obsGroups) === null || _dataset$obsGroups === void 0 ? void 0 : _dataset$obsGroups.default)
|
|
67
|
+
}, _.omit(dataset.obsGroups, "default"));
|
|
68
|
+
}, [dataset.obsGroups]);
|
|
61
69
|
useEffect(() => {
|
|
62
70
|
setParams(p => {
|
|
63
|
-
return {
|
|
64
|
-
...p,
|
|
71
|
+
return _objectSpread(_objectSpread({}, p), {}, {
|
|
65
72
|
url: dataset.url
|
|
66
|
-
};
|
|
73
|
+
});
|
|
67
74
|
});
|
|
68
75
|
}, [dataset.url]);
|
|
69
76
|
const {
|
|
@@ -84,7 +91,7 @@ export function ObsColsList(_ref2) {
|
|
|
84
91
|
});
|
|
85
92
|
if (!!filteredData.length && !groupFiltered.length) {
|
|
86
93
|
setEnableGroups(false);
|
|
87
|
-
console.warn(
|
|
94
|
+
console.warn("No obs found in obsGroups ".concat(JSON.stringify(obsGroups), ", disabling obsGroups"));
|
|
88
95
|
} else {
|
|
89
96
|
filteredData = groupFiltered;
|
|
90
97
|
}
|
|
@@ -95,17 +102,17 @@ export function ObsColsList(_ref2) {
|
|
|
95
102
|
return d.type !== OBS_TYPES.DISCRETE;
|
|
96
103
|
});
|
|
97
104
|
setObsCols(_.keyBy(_.map(filteredData, d => {
|
|
98
|
-
return {
|
|
99
|
-
...d,
|
|
105
|
+
return _objectSpread(_objectSpread({}, d), {}, {
|
|
100
106
|
codesMap: _.invert(d.codes),
|
|
101
107
|
omit: []
|
|
102
|
-
};
|
|
108
|
+
});
|
|
103
109
|
}), "name"));
|
|
104
110
|
}
|
|
105
111
|
}, [fetchedData, isPending, obsGroups, serverError, enableGroups]);
|
|
106
112
|
useEffect(() => {
|
|
107
113
|
if (obsCols) {
|
|
108
|
-
|
|
114
|
+
var _settings$selectedObs2;
|
|
115
|
+
if (!obsCols[(_settings$selectedObs2 = settings.selectedObs) === null || _settings$selectedObs2 === void 0 ? void 0 : _settings$selectedObs2.name]) {
|
|
109
116
|
setActive([]);
|
|
110
117
|
dispatch({
|
|
111
118
|
type: "select.obs",
|
|
@@ -122,23 +129,21 @@ export function ObsColsList(_ref2) {
|
|
|
122
129
|
}
|
|
123
130
|
};
|
|
124
131
|
const toggleAll = item => {
|
|
132
|
+
var _settings$selectedObs3;
|
|
125
133
|
const omit = item.omit.length ? [] : _.map(item.values, v => item.codes[v]);
|
|
126
134
|
setObsCols(o => {
|
|
127
|
-
return {
|
|
128
|
-
|
|
129
|
-
[item.name]: {
|
|
130
|
-
...item,
|
|
135
|
+
return _objectSpread(_objectSpread({}, o), {}, {
|
|
136
|
+
[item.name]: _objectSpread(_objectSpread({}, item), {}, {
|
|
131
137
|
omit: omit
|
|
132
|
-
}
|
|
133
|
-
};
|
|
138
|
+
})
|
|
139
|
+
});
|
|
134
140
|
});
|
|
135
|
-
if (settings.selectedObs
|
|
141
|
+
if (((_settings$selectedObs3 = settings.selectedObs) === null || _settings$selectedObs3 === void 0 ? void 0 : _settings$selectedObs3.name) === item.name) {
|
|
136
142
|
dispatch({
|
|
137
143
|
type: "select.obs",
|
|
138
|
-
obs: {
|
|
139
|
-
...item,
|
|
144
|
+
obs: _objectSpread(_objectSpread({}, item), {}, {
|
|
140
145
|
omit: omit
|
|
141
|
-
}
|
|
146
|
+
})
|
|
142
147
|
});
|
|
143
148
|
}
|
|
144
149
|
};
|
|
@@ -177,6 +182,7 @@ export function ObsColsList(_ref2) {
|
|
|
177
182
|
});
|
|
178
183
|
};
|
|
179
184
|
const toggleObs = (item, value) => {
|
|
185
|
+
var _settings$selectedObs4;
|
|
180
186
|
let omit;
|
|
181
187
|
if (_.includes(item.omit, item.codes[value])) {
|
|
182
188
|
omit = item.omit.filter(i => i !== item.codes[value]);
|
|
@@ -184,25 +190,23 @@ export function ObsColsList(_ref2) {
|
|
|
184
190
|
omit = [...item.omit, item.codes[value]];
|
|
185
191
|
}
|
|
186
192
|
setObsCols(o => {
|
|
187
|
-
return {
|
|
188
|
-
|
|
189
|
-
[item.name]: {
|
|
190
|
-
...item,
|
|
193
|
+
return _objectSpread(_objectSpread({}, o), {}, {
|
|
194
|
+
[item.name]: _objectSpread(_objectSpread({}, item), {}, {
|
|
191
195
|
omit: omit
|
|
192
|
-
}
|
|
193
|
-
};
|
|
196
|
+
})
|
|
197
|
+
});
|
|
194
198
|
});
|
|
195
|
-
if (settings.selectedObs
|
|
199
|
+
if (((_settings$selectedObs4 = settings.selectedObs) === null || _settings$selectedObs4 === void 0 ? void 0 : _settings$selectedObs4.name) === item.name) {
|
|
196
200
|
dispatch({
|
|
197
201
|
type: "select.obs",
|
|
198
|
-
obs: {
|
|
199
|
-
...item,
|
|
202
|
+
obs: _objectSpread(_objectSpread({}, item), {}, {
|
|
200
203
|
omit: omit
|
|
201
|
-
}
|
|
204
|
+
})
|
|
202
205
|
});
|
|
203
206
|
}
|
|
204
207
|
};
|
|
205
208
|
const obsItem = item => {
|
|
209
|
+
var _settings$selectedObs5, _settings$selectedObs6;
|
|
206
210
|
if (!item) {
|
|
207
211
|
return null;
|
|
208
212
|
}
|
|
@@ -210,8 +214,8 @@ export function ObsColsList(_ref2) {
|
|
|
210
214
|
return null;
|
|
211
215
|
}
|
|
212
216
|
const inLabelObs = _.some(settings.labelObs, i => i.name === item.name);
|
|
213
|
-
const inSliceObs = settings.sliceBy.obs && settings.selectedObs
|
|
214
|
-
const isColorEncoding = settings.colorEncoding === COLOR_ENCODINGS.OBS && settings.selectedObs
|
|
217
|
+
const inSliceObs = settings.sliceBy.obs && ((_settings$selectedObs5 = settings.selectedObs) === null || _settings$selectedObs5 === void 0 ? void 0 : _settings$selectedObs5.name) === item.name;
|
|
218
|
+
const isColorEncoding = settings.colorEncoding === COLOR_ENCODINGS.OBS && ((_settings$selectedObs6 = settings.selectedObs) === null || _settings$selectedObs6 === void 0 ? void 0 : _settings$selectedObs6.name) === item.name;
|
|
215
219
|
return /*#__PURE__*/React.createElement("div", {
|
|
216
220
|
className: "accordion-item",
|
|
217
221
|
key: item.name
|
|
@@ -219,21 +223,21 @@ export function ObsColsList(_ref2) {
|
|
|
219
223
|
eventKey: item.name,
|
|
220
224
|
handleAccordionToggle: handleAccordionToggle
|
|
221
225
|
}, /*#__PURE__*/React.createElement("div", null, item.name), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
|
|
222
|
-
className:
|
|
226
|
+
className: "mx-1 cursor-pointer ".concat(inLabelObs ? "active-icon" : "text-muted opacity-50"),
|
|
223
227
|
onClick: event => {
|
|
224
228
|
event.stopPropagation();
|
|
225
229
|
toggleLabel(item);
|
|
226
230
|
},
|
|
227
231
|
title: "Add to tooltip"
|
|
228
232
|
}, /*#__PURE__*/React.createElement(CommentIcon, null)), /*#__PURE__*/React.createElement("span", {
|
|
229
|
-
className:
|
|
233
|
+
className: "mx-1 cursor-pointer ".concat(inSliceObs ? "active-icon" : "text-muted opacity-50"),
|
|
230
234
|
onClick: event => {
|
|
231
235
|
event.stopPropagation();
|
|
232
236
|
toggleSlice(item);
|
|
233
237
|
},
|
|
234
238
|
title: "Filter applied"
|
|
235
239
|
}, /*#__PURE__*/React.createElement(JoinInnerIcon, null)), /*#__PURE__*/React.createElement("span", {
|
|
236
|
-
className:
|
|
240
|
+
className: "mx-1 cursor-pointer ".concat(isColorEncoding ? "active-icon" : "text-muted opacity-50"),
|
|
237
241
|
onClick: event => {
|
|
238
242
|
event.stopPropagation();
|
|
239
243
|
toggleColor(item);
|
|
@@ -263,9 +267,9 @@ export function ObsColsList(_ref2) {
|
|
|
263
267
|
})))));
|
|
264
268
|
};
|
|
265
269
|
const groupList = _.map(_.keys(obsGroups), group => {
|
|
266
|
-
const key =
|
|
270
|
+
const key = "group-".concat(group);
|
|
267
271
|
const groupItems = _.compact(_.map(_.sortBy(obsGroups[group], o => _.lowerCase(o.name)), item => {
|
|
268
|
-
return obsItem(obsCols
|
|
272
|
+
return obsItem(obsCols === null || obsCols === void 0 ? void 0 : obsCols[item]);
|
|
269
273
|
}));
|
|
270
274
|
if (group === "default") {
|
|
271
275
|
return groupItems;
|
|
@@ -282,7 +286,7 @@ export function ObsColsList(_ref2) {
|
|
|
282
286
|
}
|
|
283
287
|
});
|
|
284
288
|
const obsList = enableGroups ? /*#__PURE__*/React.createElement(React.Fragment, null, groupList) : _.map(_.sortBy(obsCols, o => _.lowerCase(o.name)), item => obsItem(item));
|
|
285
|
-
const defaultActiveGroup = enableGroups ?
|
|
289
|
+
const defaultActiveGroup = enableGroups ? "group-".concat(_.findKey(obsGroups, g => g.includes(active === null || active === void 0 ? void 0 : active[0]))) : null;
|
|
286
290
|
if (!serverError) {
|
|
287
291
|
return /*#__PURE__*/React.createElement("div", {
|
|
288
292
|
className: "position-relative h-100"
|
|
@@ -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 { Button, ButtonGroup, Dropdown, DropdownButton, OverlayTrigger, Tooltip } from "react-bootstrap";
|
|
3
8
|
import { useDataset } from "../../context/DatasetContext";
|
|
@@ -16,10 +21,9 @@ export function ObsmKeysList() {
|
|
|
16
21
|
});
|
|
17
22
|
useEffect(() => {
|
|
18
23
|
setParams(p => {
|
|
19
|
-
return {
|
|
20
|
-
...p,
|
|
24
|
+
return _objectSpread(_objectSpread({}, p), {}, {
|
|
21
25
|
url: dataset.url
|
|
22
|
-
};
|
|
26
|
+
});
|
|
23
27
|
});
|
|
24
28
|
}, [dataset.url]);
|
|
25
29
|
const {
|
|
@@ -42,7 +46,7 @@ export function ObsmKeysList() {
|
|
|
42
46
|
const obsmList = obsmKeysList.map(item => {
|
|
43
47
|
return /*#__PURE__*/React.createElement(Dropdown.Item, {
|
|
44
48
|
key: item,
|
|
45
|
-
className:
|
|
49
|
+
className: "custom ".concat(active === item && "active"),
|
|
46
50
|
onClick: () => {
|
|
47
51
|
dispatch({
|
|
48
52
|
type: "select.obsm",
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
const _excluded = ["show", "handleClose"],
|
|
2
|
+
_excluded2 = ["show", "handleClose", "Controls"];
|
|
3
|
+
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; }
|
|
4
|
+
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; }
|
|
1
5
|
import React from "react";
|
|
2
6
|
import Offcanvas from "react-bootstrap/Offcanvas";
|
|
3
7
|
import { SELECTION_MODES } from "../../constants/constants";
|
|
@@ -7,10 +11,10 @@ import { SearchBar } from "../search-bar/SearchBar";
|
|
|
7
11
|
import { VarNamesList } from "../var-list/VarList";
|
|
8
12
|
export function OffcanvasObs(_ref) {
|
|
9
13
|
let {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
+
show,
|
|
15
|
+
handleClose
|
|
16
|
+
} = _ref,
|
|
17
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
14
18
|
return /*#__PURE__*/React.createElement(Offcanvas, {
|
|
15
19
|
show: show,
|
|
16
20
|
onHide: handleClose,
|
|
@@ -52,11 +56,11 @@ export function OffcanvasVars(_ref3) {
|
|
|
52
56
|
}
|
|
53
57
|
export function OffcanvasControls(_ref4) {
|
|
54
58
|
let {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
59
|
+
show,
|
|
60
|
+
handleClose,
|
|
61
|
+
Controls
|
|
62
|
+
} = _ref4,
|
|
63
|
+
props = _objectWithoutProperties(_ref4, _excluded2);
|
|
60
64
|
return /*#__PURE__*/React.createElement(Offcanvas, {
|
|
61
65
|
show: show,
|
|
62
66
|
onHide: handleClose
|