@haniffalab/cherita-react 1.4.1 → 1.4.2-dev.2025-10-29.81a6b906
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 +100 -74
- 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 +258 -210
- package/dist/cjs/components/obs-list/ObsList.js +161 -133
- package/dist/cjs/components/obs-list/ObsToolbar.js +2 -3
- package/dist/cjs/components/obsm-list/ObsmList.js +53 -38
- package/dist/cjs/components/offcanvas/index.js +61 -31
- 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 +127 -99
- 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 +168 -121
- 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 +115 -88
- package/dist/cjs/components/var-list/VarList.js +85 -69
- 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 -107
- package/dist/cjs/components/violin/ViolinControls.js +8 -5
- package/dist/cjs/constants/colorscales.js +19 -19
- package/dist/cjs/constants/constants.js +47 -47
- package/dist/cjs/context/DatasetContext.js +24 -16
- package/dist/cjs/context/FilterContext.js +11 -9
- package/dist/cjs/context/SettingsContext.js +255 -89
- 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 +34 -27
- 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 +64 -42
- 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 +120 -93
- 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 +273 -222
- package/dist/esm/components/obs-list/ObsList.js +176 -147
- package/dist/esm/components/obs-list/ObsToolbar.js +3 -3
- package/dist/esm/components/obsm-list/ObsmList.js +60 -44
- package/dist/esm/components/offcanvas/index.js +67 -37
- 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 +148 -119
- 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 +180 -132
- 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 +126 -98
- package/dist/esm/components/var-list/VarList.js +99 -82
- 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 -118
- package/dist/esm/components/violin/ViolinControls.js +10 -6
- package/dist/esm/constants/colorscales.js +19 -19
- package/dist/esm/constants/constants.js +47 -47
- package/dist/esm/context/DatasetContext.js +31 -22
- package/dist/esm/context/FilterContext.js +11 -8
- package/dist/esm/context/SettingsContext.js +257 -90
- 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 +35 -27
- 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 -9
- package/scss/cherita-bootstrap.scss +2 -2
- package/scss/cherita.scss +43 -17
- package/scss/components/accordions.scss +4 -1
- package/scss/components/layouts.scss +15 -33
- package/scss/components/lists.scss +8 -4
- 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,107 +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
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
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);
|
|
284
302
|
};
|
|
285
303
|
const groupList = _lodash.default.map(_lodash.default.keys(obsGroups), group => {
|
|
286
304
|
const key = "group-".concat(group);
|
|
287
305
|
const groupItems = _lodash.default.compact(_lodash.default.map(_lodash.default.sortBy(obsGroups[group], o => _lodash.default.lowerCase(o.name)), item => {
|
|
288
306
|
return obsItem(obsCols === null || obsCols === void 0 ? void 0 : obsCols[item]);
|
|
289
307
|
}));
|
|
290
|
-
if (group ===
|
|
308
|
+
if (group === 'default') {
|
|
291
309
|
return groupItems;
|
|
292
310
|
} else {
|
|
293
|
-
return /*#__PURE__*/
|
|
294
|
-
key: key,
|
|
311
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Accordion.default.Item, {
|
|
295
312
|
eventKey: key,
|
|
296
|
-
className: "obs-group-accordion-item"
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
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);
|
|
302
322
|
}
|
|
303
323
|
});
|
|
304
|
-
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));
|
|
305
327
|
const defaultActiveGroup = enableGroups ? "group-".concat(_lodash.default.findKey(obsGroups, g => g.includes(active === null || active === void 0 ? void 0 : active[0]))) : null;
|
|
306
328
|
if (!serverError) {
|
|
307
|
-
return /*#__PURE__*/
|
|
308
|
-
className: "position-relative h-100"
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
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
|
+
});
|
|
317
342
|
} else {
|
|
318
|
-
return /*#__PURE__*/
|
|
319
|
-
|
|
320
|
-
|
|
343
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
344
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
|
|
345
|
+
variant: "danger",
|
|
346
|
+
children: serverError.message
|
|
347
|
+
})
|
|
348
|
+
});
|
|
321
349
|
}
|
|
322
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,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.ObsmKeysList = ObsmKeysList;
|
|
7
|
-
var _react =
|
|
7
|
+
var _react = require("react");
|
|
8
8
|
var _lodash = _interopRequireDefault(require("lodash"));
|
|
9
9
|
var _reactBootstrap = require("react-bootstrap");
|
|
10
10
|
var _constants = require("../../constants/constants");
|
|
@@ -12,15 +12,18 @@ var _DatasetContext = require("../../context/DatasetContext");
|
|
|
12
12
|
var _SettingsContext = require("../../context/SettingsContext");
|
|
13
13
|
var _requests = require("../../utils/requests");
|
|
14
14
|
var _Skeleton = require("../../utils/Skeleton");
|
|
15
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
16
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
16
|
-
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); }
|
|
17
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; }
|
|
18
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; }
|
|
19
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; }
|
|
20
20
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
21
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); }
|
|
22
|
-
function ObsmKeysList() {
|
|
23
|
-
|
|
22
|
+
function ObsmKeysList(_ref) {
|
|
23
|
+
let {
|
|
24
|
+
setHasObsm
|
|
25
|
+
} = _ref;
|
|
26
|
+
const ENDPOINT = 'obsm/keys';
|
|
24
27
|
const dataset = (0, _DatasetContext.useDataset)();
|
|
25
28
|
const settings = (0, _SettingsContext.useSettings)();
|
|
26
29
|
const dispatch = (0, _SettingsContext.useSettingsDispatch)();
|
|
@@ -44,28 +47,33 @@ function ObsmKeysList() {
|
|
|
44
47
|
refetchOnMount: false
|
|
45
48
|
});
|
|
46
49
|
(0, _react.useEffect)(() => {
|
|
47
|
-
if (!isPending && !serverError
|
|
48
|
-
|
|
50
|
+
if (!isPending && !serverError) {
|
|
51
|
+
if (!fetchedData || !fetchedData.length) {
|
|
52
|
+
setHasObsm(false);
|
|
53
|
+
} else {
|
|
54
|
+
setHasObsm(true);
|
|
55
|
+
setObsmKeysList(fetchedData);
|
|
49
56
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
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
|
+
}
|
|
63
71
|
}
|
|
64
72
|
if (settings.selectedObsm) {
|
|
65
73
|
// If selected obsm is not in keys list, reset to null
|
|
66
|
-
if (!_lodash.default.includes(fetchedData, settings.selectedObsm)) {
|
|
74
|
+
if (!_lodash.default.includes(fetchedData || [], settings.selectedObsm)) {
|
|
67
75
|
dispatch({
|
|
68
|
-
type:
|
|
76
|
+
type: 'select.obsm',
|
|
69
77
|
obsm: null
|
|
70
78
|
});
|
|
71
79
|
} else {
|
|
@@ -73,40 +81,47 @@ function ObsmKeysList() {
|
|
|
73
81
|
}
|
|
74
82
|
}
|
|
75
83
|
}
|
|
76
|
-
}, [dispatch, fetchedData, isPending, serverError, settings.selectedObsm]);
|
|
84
|
+
}, [dispatch, fetchedData, isPending, serverError, setHasObsm, settings.selectedObsm]);
|
|
77
85
|
const obsmList = obsmKeysList.map(item => {
|
|
78
|
-
return /*#__PURE__*/
|
|
79
|
-
|
|
80
|
-
className: "custom ".concat(active === item && "active"),
|
|
86
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
|
|
87
|
+
className: "custom ".concat(active === item && 'active'),
|
|
81
88
|
onClick: () => {
|
|
82
89
|
dispatch({
|
|
83
|
-
type:
|
|
90
|
+
type: 'select.obsm',
|
|
84
91
|
obsm: item
|
|
85
92
|
});
|
|
86
|
-
}
|
|
93
|
+
},
|
|
94
|
+
children: item
|
|
87
95
|
}, item);
|
|
88
96
|
});
|
|
89
97
|
if (!serverError) {
|
|
90
98
|
if (isPending) {
|
|
91
|
-
return /*#__PURE__*/
|
|
99
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.ObsmKeysListBtn, {});
|
|
92
100
|
}
|
|
93
|
-
return /*#__PURE__*/
|
|
101
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.DropdownButton, {
|
|
94
102
|
as: _reactBootstrap.ButtonGroup,
|
|
95
|
-
title: settings.selectedObsm ||
|
|
96
|
-
variant: settings.selectedObsm ?
|
|
103
|
+
title: settings.selectedObsm || 'Select an embedding',
|
|
104
|
+
variant: settings.selectedObsm ? 'primary' : 'warning',
|
|
97
105
|
id: "bg-nested-dropdown",
|
|
98
|
-
size: "sm"
|
|
99
|
-
|
|
106
|
+
size: "sm",
|
|
107
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Header, {
|
|
108
|
+
children: "Embeddings"
|
|
109
|
+
}), obsmList]
|
|
110
|
+
});
|
|
100
111
|
} else {
|
|
101
|
-
return /*#__PURE__*/
|
|
112
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.OverlayTrigger, {
|
|
102
113
|
placement: "top",
|
|
103
114
|
delay: {
|
|
104
115
|
show: 100,
|
|
105
116
|
hide: 200
|
|
106
117
|
},
|
|
107
|
-
overlay: /*#__PURE__*/
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
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
|
+
});
|
|
111
126
|
}
|
|
112
127
|
}
|