@haniffalab/cherita-react 1.3.0-dev.2025-06-06.f1eddad0 → 1.3.1
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/README.md +1 -1
- package/dist/cjs/components/controls/Controls.js +38 -30
- package/dist/cjs/components/dotplot/Dotplot.js +67 -69
- package/dist/cjs/components/dotplot/DotplotControls.js +103 -83
- package/dist/cjs/components/full-page/FullPage.js +99 -105
- package/dist/cjs/components/full-page/PlotAlert.js +45 -0
- package/dist/cjs/components/full-page/PlotTypeSelector.js +89 -44
- package/dist/cjs/components/heatmap/Heatmap.js +65 -65
- package/dist/cjs/components/heatmap/HeatmapControls.js +6 -3
- package/dist/cjs/components/icons/DotPlotIcon.js +64 -0
- package/dist/cjs/components/icons/HeatmapIcon.js +45 -0
- package/dist/cjs/components/icons/MatrixPlotIcon.1.js +57 -0
- package/dist/cjs/components/icons/MatrixPlotIcon.js +59 -0
- package/dist/cjs/components/icons/ScatterplotIcon.1.js +164 -0
- package/dist/cjs/components/icons/ScatterplotIcon.js +144 -0
- package/dist/cjs/components/icons/ViolinPlotIcon.js +42 -0
- package/dist/cjs/components/matrixplot/Matrixplot.js +65 -66
- package/dist/cjs/components/matrixplot/MatrixplotControls.js +8 -5
- package/dist/cjs/components/obs-list/ObsItem.js +267 -205
- package/dist/cjs/components/obs-list/ObsList.js +161 -129
- package/dist/cjs/components/obs-list/ObsToolbar.js +2 -3
- package/dist/cjs/components/obsm-list/ObsmList.js +67 -28
- package/dist/cjs/components/offcanvas/index.js +62 -27
- package/dist/cjs/components/pseudospatial/Pseudospatial.js +132 -76
- package/dist/cjs/components/pseudospatial/PseudospatialToolbar.js +122 -74
- package/dist/cjs/components/scatterplot/Scatterplot.js +128 -100
- package/dist/cjs/components/scatterplot/ScatterplotControls.js +45 -31
- package/dist/cjs/components/scatterplot/SpatialControls.js +140 -113
- package/dist/cjs/components/scatterplot/Toolbox.js +41 -30
- package/dist/cjs/components/search-bar/SearchBar.js +176 -120
- package/dist/cjs/components/search-bar/SearchInfo.js +76 -50
- package/dist/cjs/components/search-bar/SearchResults.js +93 -71
- package/dist/cjs/components/toolbar/Toolbar.js +46 -37
- package/dist/cjs/components/var-list/VarItem.js +131 -103
- package/dist/cjs/components/var-list/VarList.js +85 -71
- package/dist/cjs/components/var-list/VarListToolbar.js +59 -54
- package/dist/cjs/components/var-list/VarSet.js +126 -108
- package/dist/cjs/components/violin/Violin.js +109 -97
- package/dist/cjs/components/violin/ViolinControls.js +8 -5
- package/dist/cjs/constants/colorscales.js +19 -19
- package/dist/cjs/constants/constants.js +51 -48
- package/dist/cjs/context/DatasetContext.js +26 -17
- package/dist/cjs/context/FilterContext.js +11 -9
- package/dist/cjs/context/SettingsContext.js +271 -88
- package/dist/cjs/context/ZarrDataContext.js +6 -5
- package/dist/cjs/helpers/color-helper.js +2 -2
- package/dist/cjs/helpers/zarr-helper.js +3 -3
- package/dist/cjs/utils/Filter.js +16 -11
- package/dist/cjs/utils/Histogram.js +35 -33
- package/dist/cjs/utils/ImageViewer.js +11 -8
- package/dist/cjs/utils/Legend.js +37 -30
- package/dist/cjs/utils/LoadingIndicators.js +15 -13
- package/dist/cjs/utils/Resolver.js +213 -0
- package/dist/cjs/utils/Skeleton.js +10 -10
- package/dist/cjs/utils/StyledTooltip.js +44 -0
- package/dist/cjs/utils/VirtualizedList.js +36 -29
- package/dist/cjs/utils/errors.js +15 -15
- package/dist/cjs/utils/requests.js +21 -9
- package/dist/cjs/utils/search.js +4 -4
- package/dist/cjs/utils/string.js +6 -6
- package/dist/cjs/utils/zarrData.js +20 -21
- package/dist/css/cherita.css +135 -65
- package/dist/css/cherita.css.map +1 -1
- package/dist/esm/components/controls/Controls.js +43 -35
- package/dist/esm/components/dotplot/Dotplot.js +77 -78
- package/dist/esm/components/dotplot/DotplotControls.js +106 -85
- package/dist/esm/components/full-page/FullPage.js +119 -124
- package/dist/esm/components/full-page/PlotAlert.js +39 -0
- package/dist/esm/components/full-page/PlotTypeSelector.js +90 -45
- package/dist/esm/components/heatmap/Heatmap.js +75 -74
- package/dist/esm/components/heatmap/HeatmapControls.js +8 -4
- package/dist/esm/components/icons/DotPlotIcon.js +58 -0
- package/dist/esm/components/icons/HeatmapIcon.js +39 -0
- package/dist/esm/components/icons/MatrixPlotIcon.1.js +51 -0
- package/dist/esm/components/icons/MatrixPlotIcon.js +53 -0
- package/dist/esm/components/icons/ScatterplotIcon.1.js +158 -0
- package/dist/esm/components/icons/ScatterplotIcon.js +138 -0
- package/dist/esm/components/icons/ViolinPlotIcon.js +36 -0
- package/dist/esm/components/matrixplot/Matrixplot.js +75 -75
- package/dist/esm/components/matrixplot/MatrixplotControls.js +10 -6
- package/dist/esm/components/obs-list/ObsItem.js +282 -217
- package/dist/esm/components/obs-list/ObsList.js +176 -143
- package/dist/esm/components/obs-list/ObsToolbar.js +3 -3
- package/dist/esm/components/obsm-list/ObsmList.js +71 -32
- package/dist/esm/components/offcanvas/index.js +68 -33
- package/dist/esm/components/pseudospatial/Pseudospatial.js +145 -88
- package/dist/esm/components/pseudospatial/PseudospatialToolbar.js +127 -78
- package/dist/esm/components/scatterplot/Scatterplot.js +149 -120
- package/dist/esm/components/scatterplot/ScatterplotControls.js +50 -35
- package/dist/esm/components/scatterplot/SpatialControls.js +153 -125
- package/dist/esm/components/scatterplot/Toolbox.js +44 -32
- package/dist/esm/components/search-bar/SearchBar.js +187 -130
- package/dist/esm/components/search-bar/SearchInfo.js +86 -59
- package/dist/esm/components/search-bar/SearchResults.js +100 -77
- package/dist/esm/components/toolbar/Toolbar.js +49 -39
- package/dist/esm/components/var-list/VarItem.js +142 -113
- package/dist/esm/components/var-list/VarList.js +99 -84
- package/dist/esm/components/var-list/VarListToolbar.js +64 -58
- package/dist/esm/components/var-list/VarSet.js +134 -115
- package/dist/esm/components/violin/Violin.js +121 -108
- package/dist/esm/components/violin/ViolinControls.js +10 -6
- package/dist/esm/constants/colorscales.js +19 -19
- package/dist/esm/constants/constants.js +50 -47
- package/dist/esm/context/DatasetContext.js +33 -23
- package/dist/esm/context/FilterContext.js +11 -8
- package/dist/esm/context/SettingsContext.js +273 -89
- package/dist/esm/context/ZarrDataContext.js +8 -6
- package/dist/esm/helpers/color-helper.js +5 -5
- package/dist/esm/helpers/map-helper.js +2 -2
- package/dist/esm/helpers/zarr-helper.js +6 -6
- package/dist/esm/index.js +22 -22
- package/dist/esm/utils/Filter.js +22 -17
- package/dist/esm/utils/Histogram.js +39 -37
- package/dist/esm/utils/ImageViewer.js +12 -8
- package/dist/esm/utils/Legend.js +44 -36
- package/dist/esm/utils/LoadingIndicators.js +16 -13
- package/dist/esm/utils/Resolver.js +201 -0
- package/dist/esm/utils/Skeleton.js +11 -10
- package/dist/esm/utils/StyledTooltip.js +38 -0
- package/dist/esm/utils/VirtualizedList.js +37 -29
- package/dist/esm/utils/errors.js +15 -15
- package/dist/esm/utils/requests.js +24 -12
- package/dist/esm/utils/search.js +7 -7
- package/dist/esm/utils/string.js +7 -7
- package/dist/esm/utils/zarrData.js +27 -28
- package/package.json +21 -10
- package/scss/cherita-bootstrap.scss +2 -2
- package/scss/cherita.scss +65 -16
- package/scss/components/accordions.scss +15 -2
- package/scss/components/layouts.scss +68 -50
- package/scss/components/lists.scss +16 -5
- package/scss/components/plotly.scss +38 -26
- package/scss/components/plots.scss +14 -1
- package/dist/assets/images/plots/dotplot.svg +0 -152
- package/dist/assets/images/plots/heatmap.svg +0 -193
- package/dist/assets/images/plots/matrixplot.svg +0 -275
- package/dist/assets/images/plots/scatterplot.svg +0 -198
- package/dist/assets/images/plots/violin.svg +0 -50
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.ObsColsList = ObsColsList;
|
|
7
|
-
var _react =
|
|
7
|
+
var _react = require("react");
|
|
8
8
|
var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
|
|
9
9
|
var _reactFontawesome = require("@fortawesome/react-fontawesome");
|
|
10
10
|
var _Comment = _interopRequireDefault(require("@mui/icons-material/Comment"));
|
|
@@ -15,14 +15,14 @@ var _reactBootstrap = require("react-bootstrap");
|
|
|
15
15
|
var _Accordion = _interopRequireDefault(require("react-bootstrap/Accordion"));
|
|
16
16
|
var _AccordionButton = require("react-bootstrap/AccordionButton");
|
|
17
17
|
var _AccordionContext = _interopRequireDefault(require("react-bootstrap/AccordionContext"));
|
|
18
|
-
var _ObsItem = require("./ObsItem");
|
|
19
18
|
var _constants = require("../../constants/constants");
|
|
20
19
|
var _DatasetContext = require("../../context/DatasetContext");
|
|
21
20
|
var _SettingsContext = require("../../context/SettingsContext");
|
|
22
21
|
var _LoadingIndicators = require("../../utils/LoadingIndicators");
|
|
23
22
|
var _requests = require("../../utils/requests");
|
|
23
|
+
var _ObsItem = require("./ObsItem");
|
|
24
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
24
25
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
25
|
-
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
26
26
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
27
27
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
28
28
|
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
@@ -41,48 +41,55 @@ const ObsAccordionToggle = _ref => {
|
|
|
41
41
|
const decoratedOnClick = (0, _AccordionButton.useAccordionButton)(eventKey, () => {
|
|
42
42
|
handleAccordionToggle(eventKey, isCurrentEventKey);
|
|
43
43
|
});
|
|
44
|
-
return /*#__PURE__*/
|
|
45
|
-
className: "obs-accordion-header ".concat(isCurrentEventKey ?
|
|
46
|
-
onClick: decoratedOnClick
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
44
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
45
|
+
className: "obs-accordion-header ".concat(isCurrentEventKey ? 'active' : ''),
|
|
46
|
+
onClick: decoratedOnClick,
|
|
47
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
48
|
+
className: "obs-accordion-header-chevron",
|
|
49
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
|
|
50
|
+
icon: isCurrentEventKey ? _freeSolidSvgIcons.faChevronDown : _freeSolidSvgIcons.faChevronRight
|
|
51
|
+
})
|
|
52
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
53
|
+
className: "obs-accordion-header-span",
|
|
54
|
+
children: children
|
|
55
|
+
})]
|
|
56
|
+
});
|
|
54
57
|
};
|
|
55
58
|
function ObsColsList(_ref2) {
|
|
56
|
-
var _settings$selectedObs;
|
|
59
|
+
var _settings$selectedObs, _settings$selectedObs3, _settings$selectedObs4;
|
|
57
60
|
let {
|
|
58
61
|
showColor = true,
|
|
59
62
|
enableObsGroups = true,
|
|
60
63
|
showSelectedAsActive = false,
|
|
61
64
|
showHistograms = true
|
|
62
65
|
} = _ref2;
|
|
63
|
-
const ENDPOINT =
|
|
66
|
+
const ENDPOINT = 'obs/cols';
|
|
64
67
|
const dataset = (0, _DatasetContext.useDataset)();
|
|
65
68
|
const settings = (0, _SettingsContext.useSettings)();
|
|
66
69
|
const dispatch = (0, _SettingsContext.useSettingsDispatch)();
|
|
67
70
|
const [enableGroups, setEnableGroups] = (0, _react.useState)(enableObsGroups);
|
|
68
71
|
const [obsCols, setObsCols] = (0, _react.useState)(null);
|
|
69
|
-
const [active, setActive] = (0, _react.useState)([...[(_settings$selectedObs = settings.selectedObs) === null || _settings$selectedObs === void 0 ? void 0 : _settings$selectedObs.name]]);
|
|
70
|
-
const [params, setParams] = (0, _react.useState)({
|
|
71
|
-
url: dataset.url
|
|
72
|
-
});
|
|
72
|
+
const [active, setActive] = (0, _react.useState)([...(settings.selectedObs ? [(_settings$selectedObs = settings.selectedObs) === null || _settings$selectedObs === void 0 ? void 0 : _settings$selectedObs.name] : [])]);
|
|
73
73
|
const obsGroups = (0, _react.useMemo)(() => {
|
|
74
74
|
var _dataset$obsGroups;
|
|
75
75
|
return _objectSpread({
|
|
76
76
|
default: _lodash.default.union(_constants.DEFAULT_OBS_GROUP, (_dataset$obsGroups = dataset.obsGroups) === null || _dataset$obsGroups === void 0 ? void 0 : _dataset$obsGroups.default)
|
|
77
|
-
}, _lodash.default.omit(dataset.obsGroups,
|
|
77
|
+
}, _lodash.default.omit(dataset.obsGroups, 'default'));
|
|
78
78
|
}, [dataset.obsGroups]);
|
|
79
|
+
const [params, setParams] = (0, _react.useState)(_objectSpread({
|
|
80
|
+
url: dataset.url
|
|
81
|
+
}, enableGroups ? {
|
|
82
|
+
cols: _lodash.default.flatten(_lodash.default.values(obsGroups))
|
|
83
|
+
} : {}));
|
|
79
84
|
(0, _react.useEffect)(() => {
|
|
80
85
|
setParams(p => {
|
|
81
86
|
return _objectSpread(_objectSpread({}, p), {}, {
|
|
82
87
|
url: dataset.url
|
|
83
|
-
}
|
|
88
|
+
}, enableGroups ? {
|
|
89
|
+
cols: _lodash.default.flatten(_lodash.default.values(obsGroups))
|
|
90
|
+
} : {});
|
|
84
91
|
});
|
|
85
|
-
}, [dataset.url]);
|
|
92
|
+
}, [dataset.url, enableGroups, obsGroups]);
|
|
86
93
|
const {
|
|
87
94
|
fetchedData,
|
|
88
95
|
isPending,
|
|
@@ -112,25 +119,34 @@ function ObsColsList(_ref2) {
|
|
|
112
119
|
return d.type !== _constants.OBS_TYPES.DISCRETE;
|
|
113
120
|
});
|
|
114
121
|
setObsCols(_lodash.default.keyBy(_lodash.default.map(filteredData, d => {
|
|
122
|
+
var _settings$selectedObs2;
|
|
123
|
+
if (((_settings$selectedObs2 = settings.selectedObs) === null || _settings$selectedObs2 === void 0 ? void 0 : _settings$selectedObs2.name) === d.name) {
|
|
124
|
+
return _objectSpread(_objectSpread({}, d), {}, {
|
|
125
|
+
omit: settings.selectedObs.omit || []
|
|
126
|
+
});
|
|
127
|
+
}
|
|
115
128
|
return _objectSpread(_objectSpread({}, d), {}, {
|
|
116
|
-
codesMap: _lodash.default.invert(d.codes),
|
|
117
129
|
omit: []
|
|
118
130
|
});
|
|
119
|
-
}),
|
|
131
|
+
}), 'name'));
|
|
120
132
|
}
|
|
121
|
-
}, [fetchedData, isPending, obsGroups, serverError, enableGroups]);
|
|
133
|
+
}, [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
134
|
(0, _react.useEffect)(() => {
|
|
123
|
-
if (obsCols) {
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
135
|
+
if (obsCols && settings.selectedObs) {
|
|
136
|
+
const {
|
|
137
|
+
name
|
|
138
|
+
} = settings.selectedObs;
|
|
139
|
+
if (!obsCols[name]) {
|
|
127
140
|
dispatch({
|
|
128
|
-
type:
|
|
141
|
+
type: 'select.obs',
|
|
129
142
|
obs: null
|
|
130
143
|
});
|
|
144
|
+
if (active.includes(name)) {
|
|
145
|
+
setActive(prev => _lodash.default.without(prev, name));
|
|
146
|
+
}
|
|
131
147
|
}
|
|
132
148
|
}
|
|
133
|
-
}, [settings.selectedObs, dispatch, obsCols]);
|
|
149
|
+
}, [settings.selectedObs, dispatch, obsCols, active]);
|
|
134
150
|
const handleAccordionToggle = (itemName, isCurrentEventKey) => {
|
|
135
151
|
if (isCurrentEventKey) {
|
|
136
152
|
_lodash.default.delay(() => setActive(prev => _lodash.default.without(prev, itemName)), 250);
|
|
@@ -139,8 +155,8 @@ function ObsColsList(_ref2) {
|
|
|
139
155
|
}
|
|
140
156
|
};
|
|
141
157
|
const toggleAll = item => {
|
|
142
|
-
var _settings$
|
|
143
|
-
const omit = item.omit.length ? [] :
|
|
158
|
+
var _settings$selectedObs5;
|
|
159
|
+
const omit = item.omit.length ? [] : item.values;
|
|
144
160
|
setObsCols(o => {
|
|
145
161
|
return _objectSpread(_objectSpread({}, o), {}, {
|
|
146
162
|
[item.name]: _objectSpread(_objectSpread({}, item), {}, {
|
|
@@ -148,9 +164,9 @@ function ObsColsList(_ref2) {
|
|
|
148
164
|
})
|
|
149
165
|
});
|
|
150
166
|
});
|
|
151
|
-
if (((_settings$
|
|
167
|
+
if (((_settings$selectedObs5 = settings.selectedObs) === null || _settings$selectedObs5 === void 0 ? void 0 : _settings$selectedObs5.name) === item.name) {
|
|
152
168
|
dispatch({
|
|
153
|
-
type:
|
|
169
|
+
type: 'select.obs',
|
|
154
170
|
obs: _objectSpread(_objectSpread({}, item), {}, {
|
|
155
171
|
omit: omit
|
|
156
172
|
})
|
|
@@ -158,46 +174,42 @@ function ObsColsList(_ref2) {
|
|
|
158
174
|
}
|
|
159
175
|
};
|
|
160
176
|
const toggleLabel = item => {
|
|
161
|
-
const inLabelObs = _lodash.default.
|
|
177
|
+
const inLabelObs = _lodash.default.includes(settings.labelObs, item.name);
|
|
162
178
|
if (inLabelObs) {
|
|
163
179
|
dispatch({
|
|
164
|
-
type:
|
|
180
|
+
type: 'remove.label.obs',
|
|
165
181
|
obsName: item.name
|
|
166
182
|
});
|
|
167
183
|
} else {
|
|
168
184
|
dispatch({
|
|
169
|
-
type:
|
|
170
|
-
obs:
|
|
171
|
-
name: item.name,
|
|
172
|
-
type: item.type,
|
|
173
|
-
codesMap: item.codesMap
|
|
174
|
-
}
|
|
185
|
+
type: 'add.label.obs',
|
|
186
|
+
obs: item
|
|
175
187
|
});
|
|
176
188
|
}
|
|
177
189
|
};
|
|
178
190
|
const toggleSlice = item => {
|
|
179
191
|
dispatch({
|
|
180
|
-
type:
|
|
192
|
+
type: 'toggle.slice.obs',
|
|
181
193
|
obs: item
|
|
182
194
|
});
|
|
183
195
|
};
|
|
184
196
|
const toggleColor = item => {
|
|
185
197
|
dispatch({
|
|
186
|
-
type:
|
|
198
|
+
type: 'select.obs',
|
|
187
199
|
obs: item
|
|
188
200
|
});
|
|
189
201
|
dispatch({
|
|
190
|
-
type:
|
|
202
|
+
type: 'set.colorEncoding',
|
|
191
203
|
value: _constants.COLOR_ENCODINGS.OBS
|
|
192
204
|
});
|
|
193
205
|
};
|
|
194
206
|
const toggleObs = (item, value) => {
|
|
195
|
-
var _settings$
|
|
207
|
+
var _settings$selectedObs6;
|
|
196
208
|
let omit;
|
|
197
|
-
if (_lodash.default.includes(item.omit,
|
|
198
|
-
omit = item.omit.filter(i => i !==
|
|
209
|
+
if (_lodash.default.includes(item.omit, value)) {
|
|
210
|
+
omit = item.omit.filter(i => i !== value);
|
|
199
211
|
} else {
|
|
200
|
-
omit = [...item.omit,
|
|
212
|
+
omit = [...item.omit, value];
|
|
201
213
|
}
|
|
202
214
|
setObsCols(o => {
|
|
203
215
|
return _objectSpread(_objectSpread({}, o), {}, {
|
|
@@ -206,9 +218,9 @@ function ObsColsList(_ref2) {
|
|
|
206
218
|
})
|
|
207
219
|
});
|
|
208
220
|
});
|
|
209
|
-
if (((_settings$
|
|
221
|
+
if (((_settings$selectedObs6 = settings.selectedObs) === null || _settings$selectedObs6 === void 0 ? void 0 : _settings$selectedObs6.name) === item.name) {
|
|
210
222
|
dispatch({
|
|
211
|
-
type:
|
|
223
|
+
type: 'select.obs',
|
|
212
224
|
obs: _objectSpread(_objectSpread({}, item), {}, {
|
|
213
225
|
omit: omit
|
|
214
226
|
})
|
|
@@ -216,103 +228,123 @@ function ObsColsList(_ref2) {
|
|
|
216
228
|
}
|
|
217
229
|
};
|
|
218
230
|
const obsItem = item => {
|
|
219
|
-
var _settings$
|
|
231
|
+
var _settings$selectedObs7, _settings$selectedObs8;
|
|
220
232
|
if (!item) {
|
|
221
233
|
return null;
|
|
222
234
|
}
|
|
223
235
|
if (item.type === _constants.OBS_TYPES.DISCRETE) {
|
|
224
236
|
return null;
|
|
225
237
|
}
|
|
226
|
-
const inLabelObs = _lodash.default.
|
|
227
|
-
const inSliceObs = settings.sliceBy.obs && ((_settings$
|
|
228
|
-
const isColorEncoding = (showSelectedAsActive || settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS) && ((_settings$
|
|
229
|
-
return /*#__PURE__*/
|
|
238
|
+
const inLabelObs = _lodash.default.includes(settings.labelObs, item.name);
|
|
239
|
+
const inSliceObs = settings.sliceBy.obs && ((_settings$selectedObs7 = settings.selectedObs) === null || _settings$selectedObs7 === void 0 ? void 0 : _settings$selectedObs7.name) === item.name;
|
|
240
|
+
const isColorEncoding = (showSelectedAsActive || settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS) && ((_settings$selectedObs8 = settings.selectedObs) === null || _settings$selectedObs8 === void 0 ? void 0 : _settings$selectedObs8.name) === item.name;
|
|
241
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
230
242
|
className: "accordion-item",
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
243
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ObsAccordionToggle, {
|
|
244
|
+
eventKey: item.name,
|
|
245
|
+
handleAccordionToggle: handleAccordionToggle,
|
|
246
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
247
|
+
className: "accordion-header-title",
|
|
248
|
+
children: item.name
|
|
249
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
250
|
+
className: "accordion-header-toolbar",
|
|
251
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
252
|
+
className: "mx-1 cursor-pointer ".concat(inLabelObs ? 'active-icon' : 'text-muted opacity-50'),
|
|
253
|
+
onClick: event => {
|
|
254
|
+
event.stopPropagation();
|
|
255
|
+
toggleLabel(item);
|
|
256
|
+
},
|
|
257
|
+
title: "Add to tooltip",
|
|
258
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Comment.default, {})
|
|
259
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
260
|
+
className: "mx-1 cursor-pointer ".concat(inSliceObs ? 'active-icon' : 'text-muted opacity-50'),
|
|
261
|
+
onClick: event => {
|
|
262
|
+
event.stopPropagation();
|
|
263
|
+
toggleSlice(item);
|
|
264
|
+
},
|
|
265
|
+
title: "Filter applied",
|
|
266
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_JoinInner.default, {})
|
|
267
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
268
|
+
className: "mx-1 cursor-pointer ".concat(isColorEncoding ? 'active-icon' : 'text-muted opacity-50'),
|
|
269
|
+
onClick: event => {
|
|
270
|
+
event.stopPropagation();
|
|
271
|
+
toggleColor(item);
|
|
272
|
+
},
|
|
273
|
+
title: showSelectedAsActive ? 'Is selected' : 'Is color encoding',
|
|
274
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_WaterDrop.default, {})
|
|
275
|
+
})]
|
|
276
|
+
})]
|
|
277
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Accordion.default.Collapse, {
|
|
278
|
+
eventKey: item.name,
|
|
279
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
280
|
+
className: "obs-accordion-body",
|
|
281
|
+
children: active.includes(item.name) && (item.type === _constants.OBS_TYPES.CATEGORICAL || item.type === _constants.OBS_TYPES.BOOLEAN ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ObsItem.CategoricalObs, {
|
|
282
|
+
obs: item,
|
|
283
|
+
toggleAll: () => toggleAll(item),
|
|
284
|
+
toggleObs: value => toggleObs(item, value),
|
|
285
|
+
toggleLabel: () => toggleLabel(item),
|
|
286
|
+
toggleSlice: () => toggleSlice(item),
|
|
287
|
+
toggleColor: () => toggleColor(item),
|
|
288
|
+
showColor: showColor && isColorEncoding,
|
|
289
|
+
showHistograms: showHistograms
|
|
290
|
+
}, item.name) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ObsItem.ContinuousObs, {
|
|
291
|
+
obs: item,
|
|
292
|
+
toggleAll: () => toggleAll(item),
|
|
293
|
+
toggleObs: value => toggleObs(item, value),
|
|
294
|
+
toggleLabel: () => toggleLabel(item),
|
|
295
|
+
toggleSlice: () => toggleSlice(item),
|
|
296
|
+
toggleColor: () => toggleColor(item),
|
|
297
|
+
showHistograms: showHistograms
|
|
298
|
+
}, item.name))
|
|
299
|
+
})
|
|
300
|
+
})]
|
|
301
|
+
}, item.name);
|
|
280
302
|
};
|
|
281
303
|
const groupList = _lodash.default.map(_lodash.default.keys(obsGroups), group => {
|
|
282
304
|
const key = "group-".concat(group);
|
|
283
305
|
const groupItems = _lodash.default.compact(_lodash.default.map(_lodash.default.sortBy(obsGroups[group], o => _lodash.default.lowerCase(o.name)), item => {
|
|
284
306
|
return obsItem(obsCols === null || obsCols === void 0 ? void 0 : obsCols[item]);
|
|
285
307
|
}));
|
|
286
|
-
if (group ===
|
|
308
|
+
if (group === 'default') {
|
|
287
309
|
return groupItems;
|
|
288
310
|
} else {
|
|
289
|
-
return /*#__PURE__*/
|
|
290
|
-
key: key,
|
|
311
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Accordion.default.Item, {
|
|
291
312
|
eventKey: key,
|
|
292
|
-
className: "obs-group-accordion-item"
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
313
|
+
className: "obs-group-accordion-item",
|
|
314
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Accordion.default.Header, {
|
|
315
|
+
className: "obs-group-accordion-header",
|
|
316
|
+
children: group
|
|
317
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Accordion.default.Body, {
|
|
318
|
+
className: "obs-group-accordion-body",
|
|
319
|
+
children: groupItems
|
|
320
|
+
})]
|
|
321
|
+
}, key);
|
|
298
322
|
}
|
|
299
323
|
});
|
|
300
|
-
const obsList = enableGroups ? /*#__PURE__*/
|
|
324
|
+
const obsList = enableGroups ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
|
|
325
|
+
children: groupList
|
|
326
|
+
}) : _lodash.default.map(_lodash.default.sortBy(obsCols, o => _lodash.default.lowerCase(o.name)), item => obsItem(item));
|
|
301
327
|
const defaultActiveGroup = enableGroups ? "group-".concat(_lodash.default.findKey(obsGroups, g => g.includes(active === null || active === void 0 ? void 0 : active[0]))) : null;
|
|
302
328
|
if (!serverError) {
|
|
303
|
-
return /*#__PURE__*/
|
|
304
|
-
className: "position-relative h-100"
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
329
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
330
|
+
className: "position-relative h-100",
|
|
331
|
+
children: isPending ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingSpinner, {}) : !!obsCols && !_lodash.default.size(obsCols) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
|
|
332
|
+
variant: "danger",
|
|
333
|
+
children: "No observations found."
|
|
334
|
+
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Accordion.default, {
|
|
335
|
+
flush: true,
|
|
336
|
+
defaultActiveKey: [...active, ...[defaultActiveGroup]],
|
|
337
|
+
alwaysOpen: true,
|
|
338
|
+
className: "obs-accordion",
|
|
339
|
+
children: obsList
|
|
340
|
+
})
|
|
341
|
+
});
|
|
313
342
|
} else {
|
|
314
|
-
return /*#__PURE__*/
|
|
315
|
-
|
|
316
|
-
|
|
343
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
344
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
|
|
345
|
+
variant: "danger",
|
|
346
|
+
children: serverError.message
|
|
347
|
+
})
|
|
348
|
+
});
|
|
317
349
|
}
|
|
318
350
|
}
|
|
@@ -4,9 +4,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.ObsToolbar = ObsToolbar;
|
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
|
8
7
|
var _reactBootstrap = require("react-bootstrap");
|
|
9
|
-
|
|
8
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
9
|
function ObsToolbar(_ref) {
|
|
11
10
|
let {
|
|
12
11
|
item,
|
|
@@ -14,7 +13,7 @@ function ObsToolbar(_ref) {
|
|
|
14
13
|
onToggleAllObs
|
|
15
14
|
} = _ref;
|
|
16
15
|
const allToggledOn = !item.omit.length;
|
|
17
|
-
return showToggleAllObs && /*#__PURE__*/
|
|
16
|
+
return showToggleAllObs && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Check, {
|
|
18
17
|
type: "switch",
|
|
19
18
|
id: "custom-switch",
|
|
20
19
|
label: "Toggle all",
|
|
@@ -4,20 +4,26 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.ObsmKeysList = ObsmKeysList;
|
|
7
|
-
var _react =
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
var _lodash = _interopRequireDefault(require("lodash"));
|
|
8
9
|
var _reactBootstrap = require("react-bootstrap");
|
|
10
|
+
var _constants = require("../../constants/constants");
|
|
9
11
|
var _DatasetContext = require("../../context/DatasetContext");
|
|
10
12
|
var _SettingsContext = require("../../context/SettingsContext");
|
|
11
13
|
var _requests = require("../../utils/requests");
|
|
12
14
|
var _Skeleton = require("../../utils/Skeleton");
|
|
13
|
-
|
|
15
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
16
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
17
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
15
18
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
16
19
|
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
17
20
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
18
21
|
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); }
|
|
19
|
-
function ObsmKeysList() {
|
|
20
|
-
|
|
22
|
+
function ObsmKeysList(_ref) {
|
|
23
|
+
let {
|
|
24
|
+
setHasObsm
|
|
25
|
+
} = _ref;
|
|
26
|
+
const ENDPOINT = 'obsm/keys';
|
|
21
27
|
const dataset = (0, _DatasetContext.useDataset)();
|
|
22
28
|
const settings = (0, _SettingsContext.useSettings)();
|
|
23
29
|
const dispatch = (0, _SettingsContext.useSettingsDispatch)();
|
|
@@ -41,48 +47,81 @@ function ObsmKeysList() {
|
|
|
41
47
|
refetchOnMount: false
|
|
42
48
|
});
|
|
43
49
|
(0, _react.useEffect)(() => {
|
|
44
|
-
if (!isPending && !serverError
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
50
|
+
if (!isPending && !serverError) {
|
|
51
|
+
if (!fetchedData || !fetchedData.length) {
|
|
52
|
+
setHasObsm(false);
|
|
53
|
+
} else {
|
|
54
|
+
setHasObsm(true);
|
|
55
|
+
setObsmKeysList(fetchedData);
|
|
56
|
+
|
|
57
|
+
// Set default obsm if in keys list and not selected
|
|
58
|
+
if (!settings.selectedObsm) {
|
|
59
|
+
// Follow DEFAULT_OBSM_KEYS order
|
|
60
|
+
_lodash.default.each(_constants.DEFAULT_OBSM_KEYS, k => {
|
|
61
|
+
const defaultObsm = _lodash.default.find(fetchedData, item => item.toLowerCase() === k);
|
|
62
|
+
if (defaultObsm) {
|
|
63
|
+
dispatch({
|
|
64
|
+
type: 'select.obsm',
|
|
65
|
+
obsm: defaultObsm
|
|
66
|
+
});
|
|
67
|
+
return false; // break
|
|
68
|
+
}
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
if (settings.selectedObsm) {
|
|
73
|
+
// If selected obsm is not in keys list, reset to null
|
|
74
|
+
if (!_lodash.default.includes(fetchedData || [], settings.selectedObsm)) {
|
|
75
|
+
dispatch({
|
|
76
|
+
type: 'select.obsm',
|
|
77
|
+
obsm: null
|
|
78
|
+
});
|
|
79
|
+
} else {
|
|
80
|
+
setActive(settings.selectedObsm);
|
|
81
|
+
}
|
|
82
|
+
}
|
|
51
83
|
}
|
|
52
|
-
}, [settings.selectedObsm]);
|
|
84
|
+
}, [dispatch, fetchedData, isPending, serverError, setHasObsm, settings.selectedObsm]);
|
|
53
85
|
const obsmList = obsmKeysList.map(item => {
|
|
54
|
-
return /*#__PURE__*/
|
|
55
|
-
|
|
56
|
-
className: "custom ".concat(active === item && "active"),
|
|
86
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
|
|
87
|
+
className: "custom ".concat(active === item && 'active'),
|
|
57
88
|
onClick: () => {
|
|
58
89
|
dispatch({
|
|
59
|
-
type:
|
|
90
|
+
type: 'select.obsm',
|
|
60
91
|
obsm: item
|
|
61
92
|
});
|
|
62
|
-
}
|
|
93
|
+
},
|
|
94
|
+
children: item
|
|
63
95
|
}, item);
|
|
64
96
|
});
|
|
65
97
|
if (!serverError) {
|
|
66
98
|
if (isPending) {
|
|
67
|
-
return /*#__PURE__*/
|
|
99
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.ObsmKeysListBtn, {});
|
|
68
100
|
}
|
|
69
|
-
return /*#__PURE__*/
|
|
101
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.DropdownButton, {
|
|
70
102
|
as: _reactBootstrap.ButtonGroup,
|
|
71
|
-
title: settings.selectedObsm ||
|
|
72
|
-
variant: settings.selectedObsm ?
|
|
103
|
+
title: settings.selectedObsm || 'Select an embedding',
|
|
104
|
+
variant: settings.selectedObsm ? 'primary' : 'warning',
|
|
73
105
|
id: "bg-nested-dropdown",
|
|
74
|
-
size: "sm"
|
|
75
|
-
|
|
106
|
+
size: "sm",
|
|
107
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Header, {
|
|
108
|
+
children: "Embeddings"
|
|
109
|
+
}), obsmList]
|
|
110
|
+
});
|
|
76
111
|
} else {
|
|
77
|
-
return /*#__PURE__*/
|
|
112
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.OverlayTrigger, {
|
|
78
113
|
placement: "top",
|
|
79
114
|
delay: {
|
|
80
115
|
show: 100,
|
|
81
116
|
hide: 200
|
|
82
117
|
},
|
|
83
|
-
overlay: /*#__PURE__*/
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
118
|
+
overlay: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Tooltip, {
|
|
119
|
+
children: serverError.message
|
|
120
|
+
}),
|
|
121
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
|
|
122
|
+
variant: "danger",
|
|
123
|
+
children: "Error"
|
|
124
|
+
})
|
|
125
|
+
});
|
|
87
126
|
}
|
|
88
127
|
}
|