@haniffalab/cherita-react 1.4.1 → 1.4.2-dev.2025-10-29.e8bbb191
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
|
@@ -0,0 +1,201 @@
|
|
|
1
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
2
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
3
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
4
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
5
|
+
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
6
|
+
import { useState, useEffect, useMemo } from 'react';
|
|
7
|
+
import _ from 'lodash';
|
|
8
|
+
import { useFetch } from './requests';
|
|
9
|
+
import { PSEUDOSPATIAL_CATEGORICAL_MODES } from '../constants/constants';
|
|
10
|
+
import { useDataset } from '../context/DatasetContext';
|
|
11
|
+
import { useSettings } from '../context/SettingsContext';
|
|
12
|
+
const cleanSettings = settings => {
|
|
13
|
+
var _settings$data$pseudo;
|
|
14
|
+
// Remove obs and vars from settings that are not in data
|
|
15
|
+
|
|
16
|
+
const selectedObs = settings.selectedObs && settings.data.obs[settings.selectedObs.name] ? settings.selectedObs : null;
|
|
17
|
+
const labelObs = _.filter(settings.labelObs, obsName => settings.data.obs[obsName]);
|
|
18
|
+
const selectedVar = settings.selectedVar && (settings.selectedVar.isSet ? _.every(settings.selectedVar.vars, vv => settings.data.vars[vv.name]) : settings.data.vars[settings.selectedVar.name]) ? settings.selectedVar : null;
|
|
19
|
+
const selectedMultiVar = _.filter(settings.selectedMultiVar, v => {
|
|
20
|
+
if (v.isSet) {
|
|
21
|
+
return _.every(v.vars, vv => settings.data.vars[vv.name]);
|
|
22
|
+
} else {
|
|
23
|
+
return settings.data.vars[v.name];
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
const vars = _.filter(settings.vars, v => {
|
|
27
|
+
if (v.isSet) {
|
|
28
|
+
return _.every(v.vars, vv => settings.data.vars[vv.name]);
|
|
29
|
+
} else {
|
|
30
|
+
return settings.data.vars[v.name];
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
let pseudospatial = settings.pseudospatial;
|
|
34
|
+
if (!_.keys(settings.data.pseudospatial).length) {
|
|
35
|
+
pseudospatial = {
|
|
36
|
+
maskSet: null,
|
|
37
|
+
maskValues: null,
|
|
38
|
+
categoricalMode: PSEUDOSPATIAL_CATEGORICAL_MODES.ACROSS.value
|
|
39
|
+
};
|
|
40
|
+
}
|
|
41
|
+
if (pseudospatial.maskSet && !_.includes(_.keys(settings.data.pseudospatial), pseudospatial.maskSet)) {
|
|
42
|
+
pseudospatial = _objectSpread(_objectSpread({}, pseudospatial), {}, {
|
|
43
|
+
maskSet: null
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
if (pseudospatial.maskValues && !!_.difference(pseudospatial.maskValues, ((_settings$data$pseudo = settings.data.pseudospatial) === null || _settings$data$pseudo === void 0 ? void 0 : _settings$data$pseudo[pseudospatial.maskSet]) || []).length) {
|
|
47
|
+
pseudospatial = _objectSpread(_objectSpread({}, pseudospatial), {}, {
|
|
48
|
+
maskValues: null
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
return _objectSpread(_objectSpread({}, settings), {}, {
|
|
52
|
+
selectedObs: selectedObs,
|
|
53
|
+
labelObs: labelObs,
|
|
54
|
+
selectedVar: selectedVar,
|
|
55
|
+
selectedMultiVar: selectedMultiVar,
|
|
56
|
+
vars: vars,
|
|
57
|
+
pseudospatial: pseudospatial
|
|
58
|
+
});
|
|
59
|
+
};
|
|
60
|
+
export const useResolver = initSettings => {
|
|
61
|
+
const dataset = useDataset();
|
|
62
|
+
const {
|
|
63
|
+
isPseudospatial = false
|
|
64
|
+
} = dataset;
|
|
65
|
+
const [isPending, setisPending] = useState(true);
|
|
66
|
+
const [resolvedSettings, setResolvedSettings] = useState(null);
|
|
67
|
+
|
|
68
|
+
// obs
|
|
69
|
+
// all obs should be in initSettings.selectedObs and initSettings.labelObs
|
|
70
|
+
const initObs = _.uniqBy(_.compact([initSettings.selectedObs, ..._.map(initSettings.labelObs, o => ({
|
|
71
|
+
name: o
|
|
72
|
+
}))]), 'name');
|
|
73
|
+
const initObsNames = _.map(initObs, o => o.name);
|
|
74
|
+
const [obsParams] = useState({
|
|
75
|
+
url: dataset.url,
|
|
76
|
+
cols: initObsNames,
|
|
77
|
+
obsParams: _.fromPairs(_.map(initObs, o => [o.name, {
|
|
78
|
+
bins: o.bins || {}
|
|
79
|
+
}]))
|
|
80
|
+
});
|
|
81
|
+
const {
|
|
82
|
+
fetchedData: obsData,
|
|
83
|
+
isPending: obsDataPending,
|
|
84
|
+
serverError: obsDataError
|
|
85
|
+
} = useFetch('obs/cols', obsParams, {
|
|
86
|
+
enabled: !!initObsNames.length
|
|
87
|
+
});
|
|
88
|
+
|
|
89
|
+
// vars
|
|
90
|
+
// all vars should be in initSettings.vars from validation
|
|
91
|
+
const initVars = initSettings.vars;
|
|
92
|
+
const initVarsNames = _.flatMap(initVars, v => v.isSet ? _.map(v.vars, vv => vv.name) : v.name);
|
|
93
|
+
const [varParams] = useState({
|
|
94
|
+
url: dataset.url,
|
|
95
|
+
col: dataset.varNamesCol,
|
|
96
|
+
names: initVarsNames
|
|
97
|
+
});
|
|
98
|
+
const {
|
|
99
|
+
fetchedData: varData,
|
|
100
|
+
isPending: varDataPending,
|
|
101
|
+
serverError: varDataError
|
|
102
|
+
} = useFetch('var/cols/names', varParams, {
|
|
103
|
+
enabled: !!varParams.names.length
|
|
104
|
+
});
|
|
105
|
+
|
|
106
|
+
// pseudospatial
|
|
107
|
+
const [pseudospatialParams] = useState({
|
|
108
|
+
url: dataset.url
|
|
109
|
+
});
|
|
110
|
+
const pseudospatialEnabled = isPseudospatial;
|
|
111
|
+
const {
|
|
112
|
+
fetchedData: pseudospatialData,
|
|
113
|
+
isPending: pseudospatialDataPending,
|
|
114
|
+
serverError: pseudospatialDataError
|
|
115
|
+
} = useFetch('masks', pseudospatialParams, {
|
|
116
|
+
enabled: pseudospatialEnabled,
|
|
117
|
+
retry: false
|
|
118
|
+
});
|
|
119
|
+
|
|
120
|
+
// Use isPending to help set initial state to true
|
|
121
|
+
useEffect(() => {
|
|
122
|
+
setisPending(obsDataPending || varDataPending || pseudospatialDataPending);
|
|
123
|
+
}, [obsDataPending, pseudospatialDataPending, varDataPending]);
|
|
124
|
+
|
|
125
|
+
// Use isPending along with other pending states
|
|
126
|
+
// to ensure they've all converged after state updates
|
|
127
|
+
useEffect(() => {
|
|
128
|
+
if (isPending || obsDataPending || varDataPending || pseudospatialDataPending) {
|
|
129
|
+
return;
|
|
130
|
+
}
|
|
131
|
+
if (obsDataError) {
|
|
132
|
+
console.error('Error fetching obs data:', obsDataError);
|
|
133
|
+
}
|
|
134
|
+
if (varDataError) {
|
|
135
|
+
console.error('Error fetching var data:', varDataError);
|
|
136
|
+
}
|
|
137
|
+
if (pseudospatialDataError) {
|
|
138
|
+
console.error('Error fetching pseudospatial masks data:', pseudospatialDataError);
|
|
139
|
+
}
|
|
140
|
+
const data = {
|
|
141
|
+
obs: obsData ? _.fromPairs(_.map(obsData, o => [o.name, o])) : {},
|
|
142
|
+
vars: varData ? _.fromPairs(_.map(varData, v => [v.name, v])) : {},
|
|
143
|
+
pseudospatial: pseudospatialData || {}
|
|
144
|
+
};
|
|
145
|
+
const cleanedSettings = cleanSettings(_objectSpread(_objectSpread({}, initSettings), {}, {
|
|
146
|
+
data: data
|
|
147
|
+
}));
|
|
148
|
+
setResolvedSettings(cleanedSettings);
|
|
149
|
+
}, [initSettings, isPending, obsData, obsDataError, obsDataPending, pseudospatialData, pseudospatialDataError, pseudospatialDataPending, pseudospatialEnabled, varData, varDataError, varDataPending]);
|
|
150
|
+
return resolvedSettings;
|
|
151
|
+
};
|
|
152
|
+
export const useSelectedObs = () => {
|
|
153
|
+
const settings = useSettings();
|
|
154
|
+
return useMemo(() => {
|
|
155
|
+
return settings.selectedObs ? _objectSpread(_objectSpread({}, settings.selectedObs), settings.data.obs[settings.selectedObs.name]) : null;
|
|
156
|
+
}, [settings.data.obs, settings.selectedObs]);
|
|
157
|
+
};
|
|
158
|
+
export const useSelectedVar = () => {
|
|
159
|
+
const settings = useSettings();
|
|
160
|
+
return useMemo(() => {
|
|
161
|
+
if (settings.selectedVar) {
|
|
162
|
+
if (settings.selectedVar.isSet) {
|
|
163
|
+
return _objectSpread(_objectSpread({}, settings.selectedVar), {}, {
|
|
164
|
+
vars: settings.selectedVar.vars.map(v => _objectSpread({}, settings.data.vars[v.name]))
|
|
165
|
+
});
|
|
166
|
+
} else {
|
|
167
|
+
return _objectSpread(_objectSpread({}, settings.selectedVar), settings.data.vars[settings.selectedVar.name]);
|
|
168
|
+
}
|
|
169
|
+
} else {
|
|
170
|
+
return null;
|
|
171
|
+
}
|
|
172
|
+
}, [settings.data.vars, settings.selectedVar]);
|
|
173
|
+
};
|
|
174
|
+
export const useSelectedMultiVar = () => {
|
|
175
|
+
const settings = useSettings();
|
|
176
|
+
return useMemo(() => {
|
|
177
|
+
return _.map(settings.selectedMultiVar, v => {
|
|
178
|
+
if (v.isSet) {
|
|
179
|
+
return _objectSpread(_objectSpread({}, v), {}, {
|
|
180
|
+
vars: v.vars.map(vv => _objectSpread({}, settings.data.vars[vv.name]))
|
|
181
|
+
});
|
|
182
|
+
} else {
|
|
183
|
+
return _objectSpread(_objectSpread({}, v), settings.data.vars[v.name]);
|
|
184
|
+
}
|
|
185
|
+
});
|
|
186
|
+
}, [settings.data.vars, settings.selectedMultiVar]);
|
|
187
|
+
};
|
|
188
|
+
export const useSettingsVars = () => {
|
|
189
|
+
const settings = useSettings();
|
|
190
|
+
return useMemo(() => {
|
|
191
|
+
return _.map(settings.vars, v => {
|
|
192
|
+
if (v.isSet) {
|
|
193
|
+
return _objectSpread(_objectSpread({}, v), {}, {
|
|
194
|
+
vars: v.vars.map(vv => _objectSpread({}, settings.data.vars[vv.name]))
|
|
195
|
+
});
|
|
196
|
+
} else {
|
|
197
|
+
return _objectSpread(_objectSpread({}, v), settings.data.vars[v.name]);
|
|
198
|
+
}
|
|
199
|
+
});
|
|
200
|
+
}, [settings.data.vars, settings.vars]);
|
|
201
|
+
};
|
|
@@ -1,13 +1,14 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
1
|
+
import { Button, Placeholder } from 'react-bootstrap';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
export const ObsmKeysListBtn = () => {
|
|
4
|
-
return /*#__PURE__*/
|
|
4
|
+
return /*#__PURE__*/_jsx(Placeholder, {
|
|
5
5
|
as: Button,
|
|
6
|
-
animation: "glow"
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
6
|
+
animation: "glow",
|
|
7
|
+
children: /*#__PURE__*/_jsx(Placeholder, {
|
|
8
|
+
xs: 6,
|
|
9
|
+
style: {
|
|
10
|
+
width: '40px'
|
|
11
|
+
}
|
|
12
|
+
})
|
|
13
|
+
});
|
|
13
14
|
};
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
const _excluded = ["className"];
|
|
2
|
+
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; }
|
|
3
|
+
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; }
|
|
4
|
+
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; }
|
|
5
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
6
|
+
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); }
|
|
7
|
+
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
8
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
9
|
+
import { styled, Tooltip, tooltipClasses } from '@mui/material';
|
|
10
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
|
+
export const StyledTooltip = styled(_ref => {
|
|
12
|
+
let {
|
|
13
|
+
className
|
|
14
|
+
} = _ref,
|
|
15
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
16
|
+
return /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({}, props), {}, {
|
|
17
|
+
classes: {
|
|
18
|
+
popper: className
|
|
19
|
+
}
|
|
20
|
+
}));
|
|
21
|
+
})(_ref2 => {
|
|
22
|
+
let {
|
|
23
|
+
theme
|
|
24
|
+
} = _ref2;
|
|
25
|
+
return {
|
|
26
|
+
["& .".concat(tooltipClasses.tooltip)]: {
|
|
27
|
+
backgroundColor: '#000',
|
|
28
|
+
color: '#fff',
|
|
29
|
+
maxWidth: 220,
|
|
30
|
+
fontSize: 13,
|
|
31
|
+
borderRadius: 4,
|
|
32
|
+
padding: theme.spacing(0.5, 1),
|
|
33
|
+
whiteSpace: 'pre-line',
|
|
34
|
+
textAlign: 'center',
|
|
35
|
+
boxShadow: '0 0.25rem 0.75rem rgba(0, 0, 0, 0.1)'
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
});
|
|
@@ -1,9 +1,14 @@
|
|
|
1
1
|
const _excluded = ["getDataAtIndex", "count", "ItemComponent", "estimateSize", "overscan", "maxHeight"];
|
|
2
|
-
function
|
|
2
|
+
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; }
|
|
3
|
+
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; }
|
|
4
|
+
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; }
|
|
5
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
6
|
+
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); }
|
|
3
7
|
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
4
8
|
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
5
|
-
import
|
|
6
|
-
import { useVirtualizer } from
|
|
9
|
+
import { useCallback, useEffect, useState } from 'react';
|
|
10
|
+
import { useVirtualizer } from '@tanstack/react-virtual';
|
|
11
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
12
|
export function VirtualizedList(_ref) {
|
|
8
13
|
var _virtualItems$0$start, _virtualItems$;
|
|
9
14
|
let {
|
|
@@ -12,7 +17,7 @@ export function VirtualizedList(_ref) {
|
|
|
12
17
|
ItemComponent,
|
|
13
18
|
estimateSize = () => 45,
|
|
14
19
|
overscan = 25,
|
|
15
|
-
maxHeight =
|
|
20
|
+
maxHeight = '65vh'
|
|
16
21
|
} = _ref,
|
|
17
22
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
18
23
|
const [parentNode, setParentNode] = useState(null);
|
|
@@ -29,31 +34,34 @@ export function VirtualizedList(_ref) {
|
|
|
29
34
|
useEffect(() => {
|
|
30
35
|
itemVirtualizer.measure();
|
|
31
36
|
}, [itemVirtualizer, parentNode === null || parentNode === void 0 ? void 0 : parentNode.clientHeight, getDataAtIndex]);
|
|
32
|
-
return /*#__PURE__*/
|
|
37
|
+
return /*#__PURE__*/_jsx("div", {
|
|
33
38
|
ref: refCallback,
|
|
34
39
|
style: {
|
|
35
|
-
overflowY:
|
|
40
|
+
overflowY: 'auto',
|
|
36
41
|
maxHeight: maxHeight
|
|
37
42
|
},
|
|
38
|
-
className: "modern-scrollbars"
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
43
|
+
className: "modern-scrollbars",
|
|
44
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
45
|
+
style: {
|
|
46
|
+
height: "".concat(itemVirtualizer.getTotalSize(), "px"),
|
|
47
|
+
width: '100%',
|
|
48
|
+
position: 'relative',
|
|
49
|
+
willChange: 'transform'
|
|
50
|
+
},
|
|
51
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
52
|
+
style: {
|
|
53
|
+
position: 'absolute',
|
|
54
|
+
top: 0,
|
|
55
|
+
left: 0,
|
|
56
|
+
width: '100%',
|
|
57
|
+
transform: "translateY(".concat((_virtualItems$0$start = (_virtualItems$ = virtualItems[0]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.start) !== null && _virtualItems$0$start !== void 0 ? _virtualItems$0$start : 0, "px)")
|
|
58
|
+
},
|
|
59
|
+
children: virtualItems.map(virtualItem => /*#__PURE__*/_jsx("div", {
|
|
60
|
+
"data-index": virtualItem.index,
|
|
61
|
+
ref: itemVirtualizer.measureElement,
|
|
62
|
+
children: /*#__PURE__*/_jsx(ItemComponent, _objectSpread(_objectSpread({}, getDataAtIndex(virtualItem.index)), props))
|
|
63
|
+
}, virtualItem.key))
|
|
64
|
+
})
|
|
65
|
+
})
|
|
66
|
+
});
|
|
59
67
|
}
|
package/dist/esm/utils/errors.js
CHANGED
|
@@ -6,38 +6,38 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
|
|
|
6
6
|
export const parseError = err => {
|
|
7
7
|
if (err === DOMException.TIMEOUT_ERR) {
|
|
8
8
|
return {
|
|
9
|
-
message:
|
|
9
|
+
message: 'Timeout error',
|
|
10
10
|
name: err
|
|
11
11
|
};
|
|
12
12
|
}
|
|
13
13
|
switch (err === null || err === void 0 ? void 0 : err.name) {
|
|
14
|
-
case
|
|
14
|
+
case 'TypeError':
|
|
15
15
|
return _objectSpread(_objectSpread({}, err), {}, {
|
|
16
|
-
message:
|
|
16
|
+
message: 'Failed to fetch data from server'
|
|
17
17
|
});
|
|
18
|
-
case
|
|
18
|
+
case 'ReadZarrError':
|
|
19
19
|
return _objectSpread(_objectSpread({}, err), {}, {
|
|
20
|
-
message:
|
|
20
|
+
message: 'Failed to read AnnData-Zarr'
|
|
21
21
|
});
|
|
22
|
-
case
|
|
22
|
+
case 'InvalidObs':
|
|
23
23
|
return _objectSpread(_objectSpread({}, err), {}, {
|
|
24
|
-
message:
|
|
24
|
+
message: 'Observation not found in dataset'
|
|
25
25
|
});
|
|
26
|
-
case
|
|
26
|
+
case 'InvalidVar':
|
|
27
27
|
return _objectSpread(_objectSpread({}, err), {}, {
|
|
28
|
-
message:
|
|
28
|
+
message: 'Feature not found in dataset'
|
|
29
29
|
});
|
|
30
|
-
case
|
|
30
|
+
case 'InvalidKey':
|
|
31
31
|
return _objectSpread(_objectSpread({}, err), {}, {
|
|
32
|
-
message:
|
|
32
|
+
message: 'Key not found in dataset'
|
|
33
33
|
});
|
|
34
|
-
case
|
|
34
|
+
case 'BadRequest':
|
|
35
35
|
return _objectSpread(_objectSpread({}, err), {}, {
|
|
36
|
-
message:
|
|
36
|
+
message: 'Invalid request to server'
|
|
37
37
|
});
|
|
38
|
-
case
|
|
38
|
+
case 'InternalServerError':
|
|
39
39
|
return _objectSpread(_objectSpread({}, err), {}, {
|
|
40
|
-
message:
|
|
40
|
+
message: 'Server error'
|
|
41
41
|
});
|
|
42
42
|
default:
|
|
43
43
|
return err;
|
|
@@ -3,9 +3,9 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
3
3
|
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
4
4
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
5
5
|
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
6
|
-
import { useQuery } from
|
|
7
|
-
import { useDebounce } from
|
|
8
|
-
import { parseError } from
|
|
6
|
+
import { useQuery } from '@tanstack/react-query';
|
|
7
|
+
import { useDebounce } from '@uidotdev/usehooks';
|
|
8
|
+
import { parseError } from './errors';
|
|
9
9
|
export async function fetchData(endpoint, params) {
|
|
10
10
|
let signal = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
|
|
11
11
|
let ms = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 300000;
|
|
@@ -15,13 +15,13 @@ export async function fetchData(endpoint, params) {
|
|
|
15
15
|
const timeout = setTimeout(() => {
|
|
16
16
|
controller.abort(DOMException.TIMEOUT_ERR);
|
|
17
17
|
}, ms || 300000);
|
|
18
|
-
if (signal) signal.addEventListener(
|
|
18
|
+
if (signal) signal.addEventListener('abort', () => controller.abort());
|
|
19
19
|
const response = await fetch(new URL(endpoint, apiUrl), {
|
|
20
|
-
method:
|
|
21
|
-
mode:
|
|
20
|
+
method: 'POST',
|
|
21
|
+
mode: 'cors',
|
|
22
22
|
headers: {
|
|
23
|
-
|
|
24
|
-
Accept:
|
|
23
|
+
'Content-Type': 'application/json',
|
|
24
|
+
Accept: 'application/json'
|
|
25
25
|
},
|
|
26
26
|
body: JSON.stringify(params),
|
|
27
27
|
signal: controller.signal
|
|
@@ -37,12 +37,17 @@ export async function fetchData(endpoint, params) {
|
|
|
37
37
|
}
|
|
38
38
|
return await response.json();
|
|
39
39
|
}
|
|
40
|
+
|
|
41
|
+
// @TODO: update to match isLoading
|
|
40
42
|
export const useFetch = function (endpoint, params) {
|
|
41
43
|
let opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
|
|
42
44
|
refetchOnMount: false,
|
|
43
45
|
refetchOnWindowFocus: false
|
|
44
46
|
};
|
|
45
47
|
let apiUrl = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
|
|
48
|
+
const {
|
|
49
|
+
retry = null
|
|
50
|
+
} = opts;
|
|
46
51
|
const {
|
|
47
52
|
data: fetchedData = null,
|
|
48
53
|
isLoading: isPending = false,
|
|
@@ -55,13 +60,13 @@ export const useFetch = function (endpoint, params) {
|
|
|
55
60
|
} = _ref;
|
|
56
61
|
return fetchData(endpoint, params, signal, apiUrl);
|
|
57
62
|
},
|
|
58
|
-
retry: (failureCount, _ref2) => {
|
|
63
|
+
retry: retry || ((failureCount, _ref2) => {
|
|
59
64
|
let {
|
|
60
65
|
error
|
|
61
66
|
} = _ref2;
|
|
62
67
|
if ([400, 401, 403, 404, 422].includes(error === null || error === void 0 ? void 0 : error.status)) return false;
|
|
63
68
|
return failureCount < 3;
|
|
64
|
-
}
|
|
69
|
+
})
|
|
65
70
|
}, opts));
|
|
66
71
|
return {
|
|
67
72
|
fetchedData,
|
|
@@ -76,12 +81,17 @@ export const useDebouncedFetch = function (endpoint, params) {
|
|
|
76
81
|
refetchOnWindowFocus: false
|
|
77
82
|
};
|
|
78
83
|
let apiUrl = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
|
|
84
|
+
// Optional isEnabled function to determine if enabled based on debouncedParams instead of params
|
|
85
|
+
const {
|
|
86
|
+
enabled = true,
|
|
87
|
+
isEnabled = () => true
|
|
88
|
+
} = opts;
|
|
79
89
|
const debouncedParams = useDebounce(params, delay);
|
|
80
90
|
const {
|
|
81
91
|
data: fetchedData = null,
|
|
82
92
|
isLoading: isPending = false,
|
|
83
93
|
error: serverError = null
|
|
84
|
-
} = useQuery(_objectSpread({
|
|
94
|
+
} = useQuery(_objectSpread(_objectSpread({
|
|
85
95
|
queryKey: [endpoint, debouncedParams],
|
|
86
96
|
queryFn: _ref3 => {
|
|
87
97
|
let {
|
|
@@ -96,7 +106,9 @@ export const useDebouncedFetch = function (endpoint, params) {
|
|
|
96
106
|
if ([400, 401, 403, 404, 422].includes(error === null || error === void 0 ? void 0 : error.status)) return false;
|
|
97
107
|
return failureCount < 3;
|
|
98
108
|
}
|
|
99
|
-
}, opts)
|
|
109
|
+
}, opts), {}, {
|
|
110
|
+
enabled: enabled && isEnabled(debouncedParams)
|
|
111
|
+
}));
|
|
100
112
|
return {
|
|
101
113
|
fetchedData,
|
|
102
114
|
isPending,
|
package/dist/esm/utils/search.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { useState } from
|
|
2
|
-
import { useFetch } from
|
|
3
|
-
import { useDataset } from
|
|
1
|
+
import { useState } from 'react';
|
|
2
|
+
import { useFetch } from './requests';
|
|
3
|
+
import { useDataset } from '../context/DatasetContext';
|
|
4
4
|
export const useDiseaseSearch = () => {
|
|
5
|
-
const ENDPOINT =
|
|
5
|
+
const ENDPOINT = 'diseases';
|
|
6
6
|
const dataset = useDataset();
|
|
7
7
|
const [params, setParams] = useState({
|
|
8
8
|
url: dataset.url,
|
|
9
9
|
diseaseDatasets: dataset.diseaseDatasets,
|
|
10
|
-
text:
|
|
10
|
+
text: ''
|
|
11
11
|
});
|
|
12
12
|
const data = useFetch(ENDPOINT, params, {
|
|
13
13
|
enabled: !!params.text.length,
|
|
@@ -20,12 +20,12 @@ export const useDiseaseSearch = () => {
|
|
|
20
20
|
};
|
|
21
21
|
};
|
|
22
22
|
export const useVarSearch = () => {
|
|
23
|
-
const ENDPOINT =
|
|
23
|
+
const ENDPOINT = 'var/names';
|
|
24
24
|
const dataset = useDataset();
|
|
25
25
|
const [params, setParams] = useState({
|
|
26
26
|
url: dataset.url,
|
|
27
27
|
col: dataset.varNamesCol,
|
|
28
|
-
text:
|
|
28
|
+
text: ''
|
|
29
29
|
});
|
|
30
30
|
const data = useFetch(ENDPOINT, params, {
|
|
31
31
|
enabled: !!params.text.length,
|
package/dist/esm/utils/string.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import numbro from
|
|
1
|
+
import numbro from 'numbro';
|
|
2
2
|
export const FORMATS = {
|
|
3
|
-
EXPONENTIAL:
|
|
4
|
-
ABBREVIATION:
|
|
5
|
-
THOUSAND:
|
|
3
|
+
EXPONENTIAL: 'exponential',
|
|
4
|
+
ABBREVIATION: 'abbreviation',
|
|
5
|
+
THOUSAND: 'thousand'
|
|
6
6
|
};
|
|
7
7
|
function formatThousand(n) {
|
|
8
8
|
let precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 3;
|
|
@@ -32,9 +32,9 @@ export function formatNumerical(n) {
|
|
|
32
32
|
let format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : FORMATS.THOUSAND;
|
|
33
33
|
let precision = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 3;
|
|
34
34
|
if (n === 0) {
|
|
35
|
-
return
|
|
35
|
+
return '0';
|
|
36
36
|
} else if (!n || n === undefined || isNaN(n)) {
|
|
37
|
-
return
|
|
37
|
+
return 'NaN';
|
|
38
38
|
}
|
|
39
39
|
switch (format) {
|
|
40
40
|
case FORMATS.EXPONENTIAL:
|
|
@@ -55,5 +55,5 @@ export function formatNumerical(n) {
|
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
57
|
export function formatString(s) {
|
|
58
|
-
return s.trim().replace(/_/g,
|
|
58
|
+
return s.trim().replace(/_/g, ' ');
|
|
59
59
|
}
|