@haniffalab/cherita-react 0.2.0-dev.2025-01-17.f9a0f419 → 0.2.0-dev.2025-01-28.7a60aa67

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.
Files changed (43) hide show
  1. package/README.md +5 -0
  2. package/dist/components/dotplot/Dotplot.js +19 -26
  3. package/dist/components/dotplot/DotplotControls.js +106 -147
  4. package/dist/components/full-page/FullPage.js +99 -153
  5. package/dist/components/heatmap/Heatmap.js +19 -26
  6. package/dist/components/heatmap/HeatmapControls.js +7 -13
  7. package/dist/components/matrixplot/Matrixplot.js +19 -26
  8. package/dist/components/matrixplot/MatrixplotControls.js +14 -35
  9. package/dist/components/obs-list/ObsItem.js +182 -239
  10. package/dist/components/obs-list/ObsList.js +40 -49
  11. package/dist/components/obs-list/ObsToolbar.js +44 -55
  12. package/dist/components/obsm-list/ObsmList.js +15 -23
  13. package/dist/components/offcanvas/index.js +45 -75
  14. package/dist/components/pseudospatial/Pseudospatial.js +26 -34
  15. package/dist/components/pseudospatial/PseudospatialControls.js +1 -2
  16. package/dist/components/pseudospatial/PseudospatialToolbar.js +37 -65
  17. package/dist/components/scatterplot/Scatterplot.js +74 -89
  18. package/dist/components/scatterplot/ScatterplotControls.js +28 -39
  19. package/dist/components/scatterplot/SpatialControls.js +94 -117
  20. package/dist/components/scatterplot/Toolbox.js +16 -24
  21. package/dist/components/search-bar/SearchBar.js +45 -54
  22. package/dist/components/search-bar/SearchResults.js +36 -49
  23. package/dist/components/var-list/VarItem.js +114 -161
  24. package/dist/components/var-list/VarList.js +83 -127
  25. package/dist/components/var-list/VarListToolbar.js +48 -59
  26. package/dist/components/var-list/VarSet.js +95 -120
  27. package/dist/components/violin/Violin.js +31 -46
  28. package/dist/components/violin/ViolinControls.js +8 -22
  29. package/dist/context/DatasetContext.js +17 -27
  30. package/dist/context/FilterContext.js +8 -12
  31. package/dist/context/ZarrDataContext.js +6 -9
  32. package/dist/helpers/color-helper.js +11 -12
  33. package/dist/helpers/map-helper.js +7 -8
  34. package/dist/helpers/zarr-helper.js +9 -15
  35. package/dist/utils/Histogram.js +34 -41
  36. package/dist/utils/ImageViewer.js +9 -14
  37. package/dist/utils/Legend.js +30 -40
  38. package/dist/utils/LoadingIndicators.js +16 -19
  39. package/dist/utils/VirtualizedList.js +32 -39
  40. package/dist/utils/requests.js +15 -25
  41. package/dist/utils/string.js +4 -9
  42. package/dist/utils/zarrData.js +2 -8
  43. package/package.json +40 -34
package/README.md CHANGED
@@ -1,3 +1,8 @@
1
+ [![build](https://github.com/haniffalab/cherita-react/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/haniffalab/cherita-react/actions/workflows/npm-publish.yml)
2
+ [![build-dev](https://github.com/haniffalab/cherita-react/actions/workflows/npm-publish-dev.yml/badge.svg)](https://github.com/haniffalab/cherita-react/actions/workflows/npm-publish-dev.yml)
3
+ [![npm](https://img.shields.io/npm/v/@haniffalab/cherita-react)](https://www.npmjs.com/package/@haniffalab/cherita-react)
4
+ [![codecov](https://codecov.io/gh/haniffalab/cherita-react/graph/badge.svg?token=8RLSQP1FFB)](https://codecov.io/gh/haniffalab/cherita-react)
5
+
1
6
  # Cherita
2
7
 
3
8
  ## Development
@@ -12,7 +12,6 @@ var _DatasetContext = require("../../context/DatasetContext");
12
12
  var _FilterContext = require("../../context/FilterContext");
13
13
  var _LoadingIndicators = require("../../utils/LoadingIndicators");
14
14
  var _requests = require("../../utils/requests");
15
- var _jsxRuntime = require("react/jsx-runtime");
16
15
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
17
16
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
18
17
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -120,32 +119,26 @@ function Dotplot() {
120
119
  }, [dataset.controls.colorAxis.cmin, dataset.controls.colorAxis.cmax]);
121
120
  if (!serverError) {
122
121
  if (hasSelections) {
123
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
124
- className: "cherita-dotplot position-relative",
125
- children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactPlotly.default, {
126
- data: data,
127
- layout: layout,
128
- useResizeHandler: true,
129
- style: {
130
- maxWidth: "100%",
131
- maxHeight: "100%"
132
- }
133
- })]
134
- });
122
+ return /*#__PURE__*/_react.default.createElement("div", {
123
+ className: "cherita-dotplot position-relative"
124
+ }, isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
125
+ data: data,
126
+ layout: layout,
127
+ useResizeHandler: true,
128
+ style: {
129
+ maxWidth: "100%",
130
+ maxHeight: "100%"
131
+ }
132
+ }));
135
133
  }
136
- return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
137
- className: "cherita-dotplot",
138
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
139
- variant: "light",
140
- children: "Select features and a category"
141
- })
142
- });
134
+ return /*#__PURE__*/_react.default.createElement("div", {
135
+ className: "cherita-dotplot"
136
+ }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
137
+ variant: "light"
138
+ }, "Select features and a category"));
143
139
  } else {
144
- return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
145
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
146
- variant: "danger",
147
- children: serverError.message
148
- })
149
- });
140
+ return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
141
+ variant: "danger"
142
+ }, serverError.message));
150
143
  }
151
144
  }
@@ -11,7 +11,6 @@ var _Dropdown = _interopRequireDefault(require("react-bootstrap/Dropdown"));
11
11
  var _colorscales = require("../../constants/colorscales");
12
12
  var _constants = require("../../constants/constants");
13
13
  var _DatasetContext = require("../../context/DatasetContext");
14
- var _jsxRuntime = require("react/jsx-runtime");
15
14
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
16
15
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
17
16
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -35,17 +34,18 @@ function DotplotControls() {
35
34
  expressionCutoff: dataset.controls.expressionCutoff
36
35
  }));
37
36
  }, [dataset.controls.colorAxis.cmin, dataset.controls.colorAxis.cmax, dataset.controls.expressionCutoff]);
38
- const colorScaleList = _lodash.default.keys(_colorscales.COLORSCALES).map(key => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
37
+ const colorScaleList = _lodash.default.keys(_colorscales.COLORSCALES).map(key => /*#__PURE__*/_react.default.createElement(_Dropdown.default.Item, {
38
+ key: key,
39
39
  active: dataset.controls.colorScale === key,
40
40
  onClick: () => {
41
41
  dispatch({
42
42
  type: "set.controls.colorScale",
43
43
  colorScale: key
44
44
  });
45
- },
46
- children: key
45
+ }
47
46
  }, key));
48
- const standardScaleList = _lodash.default.values(_constants.DOTPLOT_SCALES).map(scale => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
47
+ const standardScaleList = _lodash.default.values(_constants.DOTPLOT_SCALES).map(scale => /*#__PURE__*/_react.default.createElement(_Dropdown.default.Item, {
48
+ key: scale.value,
49
49
  active: dataset.controls.scale.dotplot === scale,
50
50
  onClick: () => {
51
51
  dispatch({
@@ -53,146 +53,105 @@ function DotplotControls() {
53
53
  plot: "dotplot",
54
54
  scale: scale
55
55
  });
56
- },
57
- children: scale.name
58
- }, scale.value));
59
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.ButtonToolbar, {
60
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ButtonGroup, {
61
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dropdown.default, {
62
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Toggle, {
63
- id: "dropdownColorscale",
64
- variant: "light",
65
- children: dataset.controls.colorScale
66
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Menu, {
67
- children: colorScaleList
68
- })]
69
- })
70
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ButtonGroup, {
71
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.InputGroup, {
72
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.InputGroup.Text, {
73
- children: "Standard scale"
74
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dropdown.default, {
75
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Toggle, {
76
- id: "dropdownStandardScale",
77
- variant: "light",
78
- children: dataset.controls.scale.dotplot.name
79
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Menu, {
80
- children: standardScaleList
81
- })]
82
- })]
83
- })
84
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ButtonGroup, {
85
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ToggleButton, {
86
- id: "toggleMeanOnlyExpressed",
87
- type: "checkbox",
88
- variant: "outline-primary",
89
- checked: dataset.controls.meanOnlyExpressed,
90
- onChange: () => {
91
- dispatch({
92
- type: "set.controls.meanOnlyExpressed",
93
- meanOnlyExpressed: !dataset.controls.meanOnlyExpressed
94
- });
95
- },
96
- children: "Average only above cutoff"
97
- })
98
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form, {
99
- onSubmit: e => {
100
- e.preventDefault();
101
- dispatch({
102
- type: "set.controls.expressionCutoff",
103
- expressionCutoff: parseFloat(controls.expressionCutoff)
104
- });
105
- },
106
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.InputGroup, {
107
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.InputGroup.Text, {
108
- children: "Expression Cutoff"
109
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Control, {
110
- size: "sm",
111
- type: "number",
112
- step: "0.1",
113
- min: 0.0,
114
- value: controls.expressionCutoff,
115
- onChange: e => {
116
- setControls({
117
- ...controls,
118
- expressionCutoff: e.target.value
119
- });
120
- }
121
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
122
- type: "submit",
123
- variant: "outline-primary",
124
- children: "Apply"
125
- })]
126
- })
127
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form, {
128
- onSubmit: e => {
129
- e.preventDefault();
130
- dispatch({
131
- type: "set.controls.colorAxis.crange",
132
- cmin: controls.colorAxis.cmin,
133
- cmax: controls.colorAxis.cmax
134
- });
135
- },
136
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.InputGroup, {
137
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.InputGroup.Text, {
138
- children: "Colorscale"
139
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.InputGroup.Text, {
140
- children: "min"
141
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Control, {
142
- name: "scaleMin",
143
- size: "sm",
144
- type: "number",
145
- value: controls.colorAxis.cmin,
146
- step: 0.1,
147
- min: Math.min(dataset.controls.colorAxis.dmin, 0.0),
148
- max: dataset.controls.colorAxis.dmax,
149
- onChange: e => {
150
- setControls({
151
- ...controls,
152
- colorAxis: {
153
- ...controls.colorAxis,
154
- cmin: e.target.value
155
- }
156
- });
157
- }
158
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.InputGroup.Text, {
159
- children: "max"
160
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Control, {
161
- name: "scaleMax",
162
- size: "sm",
163
- type: "number",
164
- value: controls.colorAxis.cmax,
165
- step: 0.1,
166
- min: controls.colorAxis.cmin,
167
- max: dataset.controls.colorAxis.dmax,
168
- onChange: e => {
169
- if (parseFloat(e.target.value) > dataset.controls.colorAxis.dmax) {
170
- e.target.value = dataset.controls.colorAxis.dmax.toFixed(1);
171
- }
172
- setControls({
173
- ...controls,
174
- colorAxis: {
175
- ...controls.colorAxis,
176
- cmax: e.target.value
177
- }
178
- });
179
- }
180
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
181
- type: "submit",
182
- variant: "outline-primary",
183
- children: "Apply"
184
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
185
- variant: "outline-primary",
186
- onClick: () => {
187
- dispatch({
188
- type: "set.controls.colorAxis.crange",
189
- cmin: dataset.controls.colorAxis.dmin,
190
- cmax: dataset.controls.colorAxis.dmax
191
- });
192
- },
193
- children: "Autoscale"
194
- })]
195
- })
196
- })]
197
- });
56
+ }
57
+ }, scale.name));
58
+ return /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonToolbar, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_Dropdown.default, null, /*#__PURE__*/_react.default.createElement(_Dropdown.default.Toggle, {
59
+ id: "dropdownColorscale",
60
+ variant: "light"
61
+ }, dataset.controls.colorScale), /*#__PURE__*/_react.default.createElement(_Dropdown.default.Menu, null, colorScaleList))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup.Text, null, "Standard scale"), /*#__PURE__*/_react.default.createElement(_Dropdown.default, null, /*#__PURE__*/_react.default.createElement(_Dropdown.default.Toggle, {
62
+ id: "dropdownStandardScale",
63
+ variant: "light"
64
+ }, dataset.controls.scale.dotplot.name), /*#__PURE__*/_react.default.createElement(_Dropdown.default.Menu, null, standardScaleList)))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ToggleButton, {
65
+ id: "toggleMeanOnlyExpressed",
66
+ type: "checkbox",
67
+ variant: "outline-primary",
68
+ checked: dataset.controls.meanOnlyExpressed,
69
+ onChange: () => {
70
+ dispatch({
71
+ type: "set.controls.meanOnlyExpressed",
72
+ meanOnlyExpressed: !dataset.controls.meanOnlyExpressed
73
+ });
74
+ }
75
+ }, "Average only above cutoff")), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form, {
76
+ onSubmit: e => {
77
+ e.preventDefault();
78
+ dispatch({
79
+ type: "set.controls.expressionCutoff",
80
+ expressionCutoff: parseFloat(controls.expressionCutoff)
81
+ });
82
+ }
83
+ }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup.Text, null, "Expression Cutoff"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Control, {
84
+ size: "sm",
85
+ type: "number",
86
+ step: "0.1",
87
+ min: 0.0,
88
+ value: controls.expressionCutoff,
89
+ onChange: e => {
90
+ setControls({
91
+ ...controls,
92
+ expressionCutoff: e.target.value
93
+ });
94
+ }
95
+ }), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
96
+ type: "submit",
97
+ variant: "outline-primary"
98
+ }, "Apply"))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form, {
99
+ onSubmit: e => {
100
+ e.preventDefault();
101
+ dispatch({
102
+ type: "set.controls.colorAxis.crange",
103
+ cmin: controls.colorAxis.cmin,
104
+ cmax: controls.colorAxis.cmax
105
+ });
106
+ }
107
+ }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup.Text, null, "Colorscale"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup.Text, null, "min"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Control, {
108
+ name: "scaleMin",
109
+ size: "sm",
110
+ type: "number",
111
+ value: controls.colorAxis.cmin,
112
+ step: 0.1,
113
+ min: Math.min(dataset.controls.colorAxis.dmin, 0.0),
114
+ max: dataset.controls.colorAxis.dmax,
115
+ onChange: e => {
116
+ setControls({
117
+ ...controls,
118
+ colorAxis: {
119
+ ...controls.colorAxis,
120
+ cmin: e.target.value
121
+ }
122
+ });
123
+ }
124
+ }), /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup.Text, null, "max"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Control, {
125
+ name: "scaleMax",
126
+ size: "sm",
127
+ type: "number",
128
+ value: controls.colorAxis.cmax,
129
+ step: 0.1,
130
+ min: controls.colorAxis.cmin,
131
+ max: dataset.controls.colorAxis.dmax,
132
+ onChange: e => {
133
+ if (parseFloat(e.target.value) > dataset.controls.colorAxis.dmax) {
134
+ e.target.value = dataset.controls.colorAxis.dmax.toFixed(1);
135
+ }
136
+ setControls({
137
+ ...controls,
138
+ colorAxis: {
139
+ ...controls.colorAxis,
140
+ cmax: e.target.value
141
+ }
142
+ });
143
+ }
144
+ }), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
145
+ type: "submit",
146
+ variant: "outline-primary"
147
+ }, "Apply"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
148
+ variant: "outline-primary",
149
+ onClick: () => {
150
+ dispatch({
151
+ type: "set.controls.colorAxis.crange",
152
+ cmin: dataset.controls.colorAxis.dmin,
153
+ cmax: dataset.controls.colorAxis.dmax
154
+ });
155
+ }
156
+ }, "Autoscale"))));
198
157
  }