@haniffalab/cherita-react 1.3.0 → 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 +85 -57
- package/dist/cjs/components/dotplot/DotplotControls.js +103 -83
- package/dist/cjs/components/full-page/FullPage.js +167 -114
- package/dist/cjs/components/full-page/PlotAlert.js +45 -0
- package/dist/cjs/components/full-page/PlotTypeSelector.js +102 -0
- package/dist/cjs/components/heatmap/Heatmap.js +83 -53
- 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 +83 -54
- package/dist/cjs/components/matrixplot/MatrixplotControls.js +8 -5
- package/dist/cjs/components/obs-list/ObsItem.js +305 -216
- package/dist/cjs/components/obs-list/ObsList.js +164 -128
- 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 +223 -175
- package/dist/cjs/components/scatterplot/ScatterplotControls.js +45 -31
- package/dist/cjs/components/scatterplot/SpatialControls.js +143 -116
- 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 +79 -85
- package/dist/cjs/components/search-bar/SearchResults.js +93 -71
- package/dist/cjs/components/toolbar/Toolbar.js +111 -0
- package/dist/cjs/components/var-list/VarItem.js +131 -103
- package/dist/cjs/components/var-list/VarList.js +96 -74
- 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 +124 -81
- package/dist/cjs/components/violin/ViolinControls.js +8 -5
- package/dist/cjs/constants/colorscales.js +19 -19
- package/dist/cjs/constants/constants.js +54 -39
- package/dist/cjs/context/DatasetContext.js +27 -17
- package/dist/cjs/context/FilterContext.js +11 -9
- package/dist/cjs/context/SettingsContext.js +339 -125
- package/dist/cjs/context/ZarrDataContext.js +6 -5
- package/dist/cjs/helpers/color-helper.js +2 -2
- package/dist/cjs/helpers/map-helper.js +2 -1
- package/dist/cjs/helpers/zarr-helper.js +3 -3
- package/dist/cjs/index.js +15 -21
- 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 +188 -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 +93 -64
- package/dist/esm/components/dotplot/DotplotControls.js +106 -85
- package/dist/esm/components/full-page/FullPage.js +180 -124
- package/dist/esm/components/full-page/PlotAlert.js +39 -0
- package/dist/esm/components/full-page/PlotTypeSelector.js +95 -0
- package/dist/esm/components/heatmap/Heatmap.js +91 -60
- 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 +91 -61
- package/dist/esm/components/matrixplot/MatrixplotControls.js +10 -6
- package/dist/esm/components/obs-list/ObsItem.js +320 -228
- package/dist/esm/components/obs-list/ObsList.js +179 -142
- 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 +243 -194
- package/dist/esm/components/scatterplot/ScatterplotControls.js +50 -35
- package/dist/esm/components/scatterplot/SpatialControls.js +155 -127
- 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 -91
- package/dist/esm/components/search-bar/SearchResults.js +100 -77
- package/dist/esm/components/toolbar/Toolbar.js +101 -0
- package/dist/esm/components/var-list/VarItem.js +142 -113
- package/dist/esm/components/var-list/VarList.js +108 -88
- 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 +135 -91
- package/dist/esm/components/violin/ViolinControls.js +10 -6
- package/dist/esm/constants/colorscales.js +19 -19
- package/dist/esm/constants/constants.js +53 -38
- package/dist/esm/context/DatasetContext.js +34 -23
- package/dist/esm/context/FilterContext.js +11 -8
- package/dist/esm/context/SettingsContext.js +341 -126
- package/dist/esm/context/ZarrDataContext.js +8 -6
- package/dist/esm/helpers/color-helper.js +5 -5
- package/dist/esm/helpers/map-helper.js +4 -3
- 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 -8
- package/scss/cherita-bootstrap.scss +2 -2
- package/scss/cherita.scss +65 -17
- package/scss/components/accordions.scss +15 -2
- package/scss/components/layouts.scss +116 -30
- package/scss/components/lists.scss +16 -5
- package/scss/components/plotly.scss +40 -23
- package/scss/components/plots.scss +14 -1
- package/dist/cjs/components/full-page/FullPagePseudospatial.js +0 -157
- package/dist/esm/components/full-page/FullPagePseudospatial.js +0 -149
|
@@ -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,46 +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
|
-
enableObsGroups = true
|
|
62
|
+
enableObsGroups = true,
|
|
63
|
+
showSelectedAsActive = false,
|
|
64
|
+
showHistograms = true
|
|
60
65
|
} = _ref2;
|
|
61
|
-
const ENDPOINT =
|
|
66
|
+
const ENDPOINT = 'obs/cols';
|
|
62
67
|
const dataset = (0, _DatasetContext.useDataset)();
|
|
63
68
|
const settings = (0, _SettingsContext.useSettings)();
|
|
64
69
|
const dispatch = (0, _SettingsContext.useSettingsDispatch)();
|
|
65
70
|
const [enableGroups, setEnableGroups] = (0, _react.useState)(enableObsGroups);
|
|
66
71
|
const [obsCols, setObsCols] = (0, _react.useState)(null);
|
|
67
|
-
const [active, setActive] = (0, _react.useState)([...[(_settings$selectedObs = settings.selectedObs) === null || _settings$selectedObs === void 0 ? void 0 : _settings$selectedObs.name]]);
|
|
68
|
-
const [params, setParams] = (0, _react.useState)({
|
|
69
|
-
url: dataset.url
|
|
70
|
-
});
|
|
72
|
+
const [active, setActive] = (0, _react.useState)([...(settings.selectedObs ? [(_settings$selectedObs = settings.selectedObs) === null || _settings$selectedObs === void 0 ? void 0 : _settings$selectedObs.name] : [])]);
|
|
71
73
|
const obsGroups = (0, _react.useMemo)(() => {
|
|
72
74
|
var _dataset$obsGroups;
|
|
73
75
|
return _objectSpread({
|
|
74
76
|
default: _lodash.default.union(_constants.DEFAULT_OBS_GROUP, (_dataset$obsGroups = dataset.obsGroups) === null || _dataset$obsGroups === void 0 ? void 0 : _dataset$obsGroups.default)
|
|
75
|
-
}, _lodash.default.omit(dataset.obsGroups,
|
|
77
|
+
}, _lodash.default.omit(dataset.obsGroups, 'default'));
|
|
76
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
|
+
} : {}));
|
|
77
84
|
(0, _react.useEffect)(() => {
|
|
78
85
|
setParams(p => {
|
|
79
86
|
return _objectSpread(_objectSpread({}, p), {}, {
|
|
80
87
|
url: dataset.url
|
|
81
|
-
}
|
|
88
|
+
}, enableGroups ? {
|
|
89
|
+
cols: _lodash.default.flatten(_lodash.default.values(obsGroups))
|
|
90
|
+
} : {});
|
|
82
91
|
});
|
|
83
|
-
}, [dataset.url]);
|
|
92
|
+
}, [dataset.url, enableGroups, obsGroups]);
|
|
84
93
|
const {
|
|
85
94
|
fetchedData,
|
|
86
95
|
isPending,
|
|
@@ -110,25 +119,34 @@ function ObsColsList(_ref2) {
|
|
|
110
119
|
return d.type !== _constants.OBS_TYPES.DISCRETE;
|
|
111
120
|
});
|
|
112
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
|
+
}
|
|
113
128
|
return _objectSpread(_objectSpread({}, d), {}, {
|
|
114
|
-
codesMap: _lodash.default.invert(d.codes),
|
|
115
129
|
omit: []
|
|
116
130
|
});
|
|
117
|
-
}),
|
|
131
|
+
}), 'name'));
|
|
118
132
|
}
|
|
119
|
-
}, [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]);
|
|
120
134
|
(0, _react.useEffect)(() => {
|
|
121
|
-
if (obsCols) {
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
135
|
+
if (obsCols && settings.selectedObs) {
|
|
136
|
+
const {
|
|
137
|
+
name
|
|
138
|
+
} = settings.selectedObs;
|
|
139
|
+
if (!obsCols[name]) {
|
|
125
140
|
dispatch({
|
|
126
|
-
type:
|
|
141
|
+
type: 'select.obs',
|
|
127
142
|
obs: null
|
|
128
143
|
});
|
|
144
|
+
if (active.includes(name)) {
|
|
145
|
+
setActive(prev => _lodash.default.without(prev, name));
|
|
146
|
+
}
|
|
129
147
|
}
|
|
130
148
|
}
|
|
131
|
-
}, [settings.selectedObs, dispatch, obsCols]);
|
|
149
|
+
}, [settings.selectedObs, dispatch, obsCols, active]);
|
|
132
150
|
const handleAccordionToggle = (itemName, isCurrentEventKey) => {
|
|
133
151
|
if (isCurrentEventKey) {
|
|
134
152
|
_lodash.default.delay(() => setActive(prev => _lodash.default.without(prev, itemName)), 250);
|
|
@@ -137,8 +155,8 @@ function ObsColsList(_ref2) {
|
|
|
137
155
|
}
|
|
138
156
|
};
|
|
139
157
|
const toggleAll = item => {
|
|
140
|
-
var _settings$
|
|
141
|
-
const omit = item.omit.length ? [] :
|
|
158
|
+
var _settings$selectedObs5;
|
|
159
|
+
const omit = item.omit.length ? [] : item.values;
|
|
142
160
|
setObsCols(o => {
|
|
143
161
|
return _objectSpread(_objectSpread({}, o), {}, {
|
|
144
162
|
[item.name]: _objectSpread(_objectSpread({}, item), {}, {
|
|
@@ -146,9 +164,9 @@ function ObsColsList(_ref2) {
|
|
|
146
164
|
})
|
|
147
165
|
});
|
|
148
166
|
});
|
|
149
|
-
if (((_settings$
|
|
167
|
+
if (((_settings$selectedObs5 = settings.selectedObs) === null || _settings$selectedObs5 === void 0 ? void 0 : _settings$selectedObs5.name) === item.name) {
|
|
150
168
|
dispatch({
|
|
151
|
-
type:
|
|
169
|
+
type: 'select.obs',
|
|
152
170
|
obs: _objectSpread(_objectSpread({}, item), {}, {
|
|
153
171
|
omit: omit
|
|
154
172
|
})
|
|
@@ -156,46 +174,42 @@ function ObsColsList(_ref2) {
|
|
|
156
174
|
}
|
|
157
175
|
};
|
|
158
176
|
const toggleLabel = item => {
|
|
159
|
-
const inLabelObs = _lodash.default.
|
|
177
|
+
const inLabelObs = _lodash.default.includes(settings.labelObs, item.name);
|
|
160
178
|
if (inLabelObs) {
|
|
161
179
|
dispatch({
|
|
162
|
-
type:
|
|
180
|
+
type: 'remove.label.obs',
|
|
163
181
|
obsName: item.name
|
|
164
182
|
});
|
|
165
183
|
} else {
|
|
166
184
|
dispatch({
|
|
167
|
-
type:
|
|
168
|
-
obs:
|
|
169
|
-
name: item.name,
|
|
170
|
-
type: item.type,
|
|
171
|
-
codesMap: item.codesMap
|
|
172
|
-
}
|
|
185
|
+
type: 'add.label.obs',
|
|
186
|
+
obs: item
|
|
173
187
|
});
|
|
174
188
|
}
|
|
175
189
|
};
|
|
176
190
|
const toggleSlice = item => {
|
|
177
191
|
dispatch({
|
|
178
|
-
type:
|
|
192
|
+
type: 'toggle.slice.obs',
|
|
179
193
|
obs: item
|
|
180
194
|
});
|
|
181
195
|
};
|
|
182
196
|
const toggleColor = item => {
|
|
183
197
|
dispatch({
|
|
184
|
-
type:
|
|
198
|
+
type: 'select.obs',
|
|
185
199
|
obs: item
|
|
186
200
|
});
|
|
187
201
|
dispatch({
|
|
188
|
-
type:
|
|
202
|
+
type: 'set.colorEncoding',
|
|
189
203
|
value: _constants.COLOR_ENCODINGS.OBS
|
|
190
204
|
});
|
|
191
205
|
};
|
|
192
206
|
const toggleObs = (item, value) => {
|
|
193
|
-
var _settings$
|
|
207
|
+
var _settings$selectedObs6;
|
|
194
208
|
let omit;
|
|
195
|
-
if (_lodash.default.includes(item.omit,
|
|
196
|
-
omit = item.omit.filter(i => i !==
|
|
209
|
+
if (_lodash.default.includes(item.omit, value)) {
|
|
210
|
+
omit = item.omit.filter(i => i !== value);
|
|
197
211
|
} else {
|
|
198
|
-
omit = [...item.omit,
|
|
212
|
+
omit = [...item.omit, value];
|
|
199
213
|
}
|
|
200
214
|
setObsCols(o => {
|
|
201
215
|
return _objectSpread(_objectSpread({}, o), {}, {
|
|
@@ -204,9 +218,9 @@ function ObsColsList(_ref2) {
|
|
|
204
218
|
})
|
|
205
219
|
});
|
|
206
220
|
});
|
|
207
|
-
if (((_settings$
|
|
221
|
+
if (((_settings$selectedObs6 = settings.selectedObs) === null || _settings$selectedObs6 === void 0 ? void 0 : _settings$selectedObs6.name) === item.name) {
|
|
208
222
|
dispatch({
|
|
209
|
-
type:
|
|
223
|
+
type: 'select.obs',
|
|
210
224
|
obs: _objectSpread(_objectSpread({}, item), {}, {
|
|
211
225
|
omit: omit
|
|
212
226
|
})
|
|
@@ -214,101 +228,123 @@ function ObsColsList(_ref2) {
|
|
|
214
228
|
}
|
|
215
229
|
};
|
|
216
230
|
const obsItem = item => {
|
|
217
|
-
var _settings$
|
|
231
|
+
var _settings$selectedObs7, _settings$selectedObs8;
|
|
218
232
|
if (!item) {
|
|
219
233
|
return null;
|
|
220
234
|
}
|
|
221
235
|
if (item.type === _constants.OBS_TYPES.DISCRETE) {
|
|
222
236
|
return null;
|
|
223
237
|
}
|
|
224
|
-
const inLabelObs = _lodash.default.
|
|
225
|
-
const inSliceObs = settings.sliceBy.obs && ((_settings$
|
|
226
|
-
const isColorEncoding = settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS && ((_settings$
|
|
227
|
-
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", {
|
|
228
242
|
className: "accordion-item",
|
|
229
|
-
|
|
230
|
-
|
|
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
|
-
|
|
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);
|
|
276
302
|
};
|
|
277
303
|
const groupList = _lodash.default.map(_lodash.default.keys(obsGroups), group => {
|
|
278
304
|
const key = "group-".concat(group);
|
|
279
305
|
const groupItems = _lodash.default.compact(_lodash.default.map(_lodash.default.sortBy(obsGroups[group], o => _lodash.default.lowerCase(o.name)), item => {
|
|
280
306
|
return obsItem(obsCols === null || obsCols === void 0 ? void 0 : obsCols[item]);
|
|
281
307
|
}));
|
|
282
|
-
if (group ===
|
|
308
|
+
if (group === 'default') {
|
|
283
309
|
return groupItems;
|
|
284
310
|
} else {
|
|
285
|
-
return /*#__PURE__*/
|
|
286
|
-
key: key,
|
|
311
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Accordion.default.Item, {
|
|
287
312
|
eventKey: key,
|
|
288
|
-
className: "obs-group-accordion-item"
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
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);
|
|
294
322
|
}
|
|
295
323
|
});
|
|
296
|
-
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));
|
|
297
327
|
const defaultActiveGroup = enableGroups ? "group-".concat(_lodash.default.findKey(obsGroups, g => g.includes(active === null || active === void 0 ? void 0 : active[0]))) : null;
|
|
298
328
|
if (!serverError) {
|
|
299
|
-
return /*#__PURE__*/
|
|
300
|
-
className: "position-relative h-100"
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
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
|
+
});
|
|
309
342
|
} else {
|
|
310
|
-
return /*#__PURE__*/
|
|
311
|
-
|
|
312
|
-
|
|
343
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
344
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
|
|
345
|
+
variant: "danger",
|
|
346
|
+
children: serverError.message
|
|
347
|
+
})
|
|
348
|
+
});
|
|
313
349
|
}
|
|
314
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
|
}
|