@haniffalab/cherita-react 1.2.0-dev.2025-05-21.e57ef5f2 → 1.2.0-dev.2025-05-21.f93366f0

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 (23) hide show
  1. package/dist/cjs/components/controls/Controls.js +60 -0
  2. package/dist/cjs/components/dotplot/Dotplot.js +3 -3
  3. package/dist/cjs/components/dotplot/DotplotControls.js +47 -82
  4. package/dist/cjs/components/heatmap/HeatmapControls.js +2 -19
  5. package/dist/cjs/components/matrixplot/Matrixplot.js +3 -3
  6. package/dist/cjs/components/matrixplot/MatrixplotControls.js +4 -34
  7. package/dist/cjs/components/scatterplot/ScatterplotControls.js +8 -21
  8. package/dist/cjs/components/violin/Violin.js +4 -4
  9. package/dist/cjs/components/violin/ViolinControls.js +4 -20
  10. package/dist/cjs/context/SettingsContext.js +3 -3
  11. package/dist/cjs/utils/zarrData.js +17 -49
  12. package/dist/esm/components/controls/Controls.js +51 -0
  13. package/dist/esm/components/dotplot/Dotplot.js +3 -3
  14. package/dist/esm/components/dotplot/DotplotControls.js +48 -82
  15. package/dist/esm/components/heatmap/HeatmapControls.js +3 -20
  16. package/dist/esm/components/matrixplot/Matrixplot.js +3 -3
  17. package/dist/esm/components/matrixplot/MatrixplotControls.js +5 -35
  18. package/dist/esm/components/scatterplot/ScatterplotControls.js +9 -21
  19. package/dist/esm/components/violin/Violin.js +4 -4
  20. package/dist/esm/components/violin/ViolinControls.js +5 -21
  21. package/dist/esm/context/SettingsContext.js +3 -3
  22. package/dist/esm/utils/zarrData.js +18 -50
  23. package/package.json +2 -2
package/dist/cjs/components/controls/Controls.js ADDED
@@ -0,0 +1,60 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.ScaleSelect = exports.ColorscaleSelect = void 0;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ var _lodash = _interopRequireDefault(require("lodash"));
9
+ var _reactBootstrap = require("react-bootstrap");
10
+ var _colorscales = require("../../constants/colorscales");
11
+ var _constants = require("../../constants/constants");
12
+ var _SettingsContext = require("../../context/SettingsContext");
13
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
14
+ const ColorscaleSelect = () => {
15
+ const settings = (0, _SettingsContext.useSettings)();
16
+ const dispatch = (0, _SettingsContext.useSettingsDispatch)();
17
+ return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Group, {
18
+ className: "mb-2"
19
+ }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Label, null, "Colorscale"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Select, {
20
+ value: settings.controls.colorScale,
21
+ onChange: e => {
22
+ dispatch({
23
+ type: "set.controls.colorScale",
24
+ colorScale: e.target.value
25
+ });
26
+ }
27
+ }, _lodash.default.keys(_colorscales.COLORSCALES).map(key => /*#__PURE__*/_react.default.createElement("option", {
28
+ key: key,
29
+ value: key
30
+ }, key))));
31
+ };
32
+ exports.ColorscaleSelect = ColorscaleSelect;
33
+ const ScaleSelect = _ref => {
34
+ let {
35
+ plot
36
+ } = _ref;
37
+ const settings = (0, _SettingsContext.useSettings)();
38
+ const dispatch = (0, _SettingsContext.useSettingsDispatch)();
39
+ const SCALES = {
40
+ dotplot: _constants.DOTPLOT_SCALES,
41
+ matrixplot: _constants.MATRIXPLOT_SCALES,
42
+ violinplot: _constants.VIOLINPLOT_SCALES
43
+ };
44
+ return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Group, {
45
+ className: "mb-2"
46
+ }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Label, null, "Standard scale"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Select, {
47
+ value: settings.controls.scale[plot] || "",
48
+ onChange: e => {
49
+ dispatch({
50
+ type: "set.controls.scale",
51
+ plot: plot,
52
+ scale: !e.target.value.length ? null : e.target.value
53
+ });
54
+ }
55
+ }, _lodash.default.values(SCALES[plot]).map(scale => /*#__PURE__*/_react.default.createElement("option", {
56
+ key: scale.value,
57
+ value: scale.value || ""
58
+ }, scale.name))));
59
+ };
60
+ exports.ScaleSelect = ScaleSelect;
package/dist/cjs/components/dotplot/Dotplot.js CHANGED
@@ -46,7 +46,7 @@ function Dotplot() {
46
46
  indices: i.vars.map(v => v.index)
47
47
  } : i.index),
48
48
  obsIndices: isSliced ? [...(obsIndices || [])] : null,
49
- standardScale: settings.controls.standardScale,
49
+ standardScale: settings.controls.scale.dotplot,
50
50
  meanOnlyExpressed: settings.controls.meanOnlyExpressed,
51
51
  expressionCutoff: settings.controls.expressionCutoff,
52
52
  varNamesCol: dataset.varNamesCol
@@ -73,13 +73,13 @@ function Dotplot() {
73
73
  indices: i.vars.map(v => v.index)
74
74
  } : i.index),
75
75
  obsIndices: isSliced ? [...(obsIndices || [])] : null,
76
- standardScale: settings.controls.standardScale,
76
+ standardScale: settings.controls.scale.dotplot,
77
77
  meanOnlyExpressed: settings.controls.meanOnlyExpressed,
78
78
  expressionCutoff: settings.controls.expressionCutoff,
79
79
  varNamesCol: dataset.varNamesCol
80
80
  });
81
81
  });
82
- }, [dataset.url, settings.selectedObs, settings.selectedMultiVar, settings.controls.standardScale, settings.controls.meanOnlyExpressed, settings.controls.expressionCutoff, dataset.varNamesCol, isSliced, obsIndices]);
82
+ }, [dataset.url, settings.selectedObs, settings.selectedMultiVar, settings.controls.scale.dotplot, settings.controls.meanOnlyExpressed, settings.controls.expressionCutoff, dataset.varNamesCol, isSliced, obsIndices]);
83
83
  const updateColorscale = (0, _react.useCallback)(colorscale => {
84
84
  setLayout(l => {
85
85
  return _objectSpread(_objectSpread({}, l), {}, {
package/dist/cjs/components/dotplot/DotplotControls.js CHANGED
@@ -5,13 +5,9 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.DotplotControls = DotplotControls;
7
7
  var _react = _interopRequireWildcard(require("react"));
8
- var _lodash = _interopRequireDefault(require("lodash"));
9
8
  var _reactBootstrap = require("react-bootstrap");
10
- var _Dropdown = _interopRequireDefault(require("react-bootstrap/Dropdown"));
11
- var _colorscales = require("../../constants/colorscales");
12
- var _constants = require("../../constants/constants");
13
9
  var _SettingsContext = require("../../context/SettingsContext");
14
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
10
+ var _Controls = require("../controls/Controls");
15
11
  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); }
16
12
  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; }
17
13
  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; }
@@ -37,76 +33,9 @@ function DotplotControls() {
37
33
  expressionCutoff: settings.controls.expressionCutoff
38
34
  }));
39
35
  }, [settings.controls.colorAxis.cmin, settings.controls.colorAxis.cmax, settings.controls.expressionCutoff]);
40
- const colorScaleList = _lodash.default.keys(_colorscales.COLORSCALES).map(key => /*#__PURE__*/_react.default.createElement(_Dropdown.default.Item, {
41
- key: key,
42
- active: settings.controls.colorScale === key,
43
- onClick: () => {
44
- dispatch({
45
- type: "set.controls.colorScale",
46
- colorScale: key
47
- });
48
- }
49
- }, key));
50
- const standardScaleList = _lodash.default.values(_constants.DOTPLOT_SCALES).map(scale => /*#__PURE__*/_react.default.createElement(_Dropdown.default.Item, {
51
- key: scale.value,
52
- active: settings.controls.scale.dotplot === scale,
53
- onClick: () => {
54
- dispatch({
55
- type: "set.controls.scale",
56
- plot: "dotplot",
57
- scale: scale
58
- });
59
- }
60
- }, scale.name));
61
- 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, {
62
- id: "dropdownColorscale",
63
- variant: "light"
64
- }, settings.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, {
65
- id: "dropdownStandardScale",
66
- variant: "light"
67
- }, settings.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, {
68
- id: "toggleMeanOnlyExpressed",
69
- type: "checkbox",
70
- variant: "outline-primary",
71
- checked: settings.controls.meanOnlyExpressed,
72
- onChange: () => {
73
- dispatch({
74
- type: "set.controls.meanOnlyExpressed",
75
- meanOnlyExpressed: !settings.controls.meanOnlyExpressed
76
- });
77
- }
78
- }, "Average only above cutoff")), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form, {
79
- onSubmit: e => {
80
- e.preventDefault();
81
- dispatch({
82
- type: "set.controls.expressionCutoff",
83
- expressionCutoff: parseFloat(controls.expressionCutoff)
84
- });
85
- }
86
- }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup.Text, null, "Expression Cutoff"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Control, {
87
- size: "sm",
88
- type: "number",
89
- step: "0.1",
90
- min: 0.0,
91
- value: controls.expressionCutoff,
92
- onChange: e => {
93
- setControls(_objectSpread(_objectSpread({}, controls), {}, {
94
- expressionCutoff: e.target.value
95
- }));
96
- }
97
- }), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
98
- type: "submit",
99
- variant: "outline-primary"
100
- }, "Apply"))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form, {
101
- onSubmit: e => {
102
- e.preventDefault();
103
- dispatch({
104
- type: "set.controls.colorAxis.crange",
105
- cmin: controls.colorAxis.cmin,
106
- cmax: controls.colorAxis.cmax
107
- });
108
- }
109
- }, /*#__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, {
36
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form, null, /*#__PURE__*/_react.default.createElement(_Controls.ColorscaleSelect, null), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Group, {
37
+ className: "mb-2"
38
+ }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup.Text, null, "min"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Control, {
110
39
  name: "scaleMin",
111
40
  size: "sm",
112
41
  type: "number",
@@ -140,16 +69,52 @@ function DotplotControls() {
140
69
  }));
141
70
  }
142
71
  }), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
143
- type: "submit",
144
- variant: "outline-primary"
72
+ variant: "outline-primary",
73
+ onClick: () => dispatch({
74
+ type: "set.controls.colorAxis.crange",
75
+ cmin: controls.colorAxis.cmin,
76
+ cmax: controls.colorAxis.cmax
77
+ })
145
78
  }, "Apply"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
146
79
  variant: "outline-primary",
147
- onClick: () => {
80
+ onClick: () => dispatch({
81
+ type: "set.controls.colorAxis.crange",
82
+ cmin: settings.controls.colorAxis.dmin,
83
+ cmax: settings.controls.colorAxis.dmax
84
+ })
85
+ }, "Reset"))), /*#__PURE__*/_react.default.createElement(_Controls.ScaleSelect, {
86
+ plot: "dotplot"
87
+ }), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Group, {
88
+ className: "mb-2"
89
+ }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Label, null, "Expression Cutoff"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Control, {
90
+ size: "sm",
91
+ type: "number",
92
+ step: "0.1",
93
+ min: 0.0,
94
+ value: controls.expressionCutoff,
95
+ onChange: e => {
96
+ setControls(_objectSpread(_objectSpread({}, controls), {}, {
97
+ expressionCutoff: e.target.value
98
+ }));
99
+ }
100
+ }), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
101
+ variant: "outline-primary",
102
+ onClick: () => dispatch({
103
+ type: "set.controls.expressionCutoff",
104
+ expressionCutoff: parseFloat(controls.expressionCutoff)
105
+ })
106
+ }, "Apply"))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Group, {
107
+ className: "mb-2"
108
+ }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Check, {
109
+ type: "switch",
110
+ id: "meanOnlyExpressed",
111
+ label: "Average only above cutoff",
112
+ checked: settings.controls.meanOnlyExpressed,
113
+ onChange: () => {
148
114
  dispatch({
149
- type: "set.controls.colorAxis.crange",
150
- cmin: settings.controls.colorAxis.dmin,
151
- cmax: settings.controls.colorAxis.dmax
115
+ type: "set.controls.meanOnlyExpressed",
116
+ meanOnlyExpressed: !settings.controls.meanOnlyExpressed
152
117
  });
153
118
  }
154
- }, "Autoscale"))));
119
+ }))));
155
120
  }
package/dist/cjs/components/heatmap/HeatmapControls.js CHANGED
@@ -5,26 +5,9 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.HeatmapControls = HeatmapControls;
7
7
  var _react = _interopRequireDefault(require("react"));
8
- var _lodash = _interopRequireDefault(require("lodash"));
9
8
  var _reactBootstrap = require("react-bootstrap");
10
- var _colorscales = require("../../constants/colorscales");
11
- var _SettingsContext = require("../../context/SettingsContext");
9
+ var _Controls = require("../controls/Controls");
12
10
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
13
11
  function HeatmapControls() {
14
- const settings = (0, _SettingsContext.useSettings)();
15
- const dispatch = (0, _SettingsContext.useSettingsDispatch)();
16
- const colormapList = _lodash.default.keys(_colorscales.COLORSCALES).map(key => /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
17
- key: key,
18
- active: settings.controls.colorScale === key,
19
- onClick: () => {
20
- dispatch({
21
- type: "set.controls.colorScale",
22
- colorScale: key
23
- });
24
- }
25
- }, key));
26
- return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Toggle, {
27
- id: "dropdownColorscale",
28
- variant: "light"
29
- }, settings.controls.colorScale), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, null, colormapList));
12
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form, null, /*#__PURE__*/_react.default.createElement(_Controls.ColorscaleSelect, null)));
30
13
  }
package/dist/cjs/components/matrixplot/Matrixplot.js CHANGED
@@ -45,7 +45,7 @@ function Matrixplot() {
45
45
  indices: i.vars.map(v => v.index)
46
46
  } : i.index),
47
47
  obsIndices: isSliced ? [...(obsIndices || [])] : null,
48
- standardScale: settings.controls.standardScale,
48
+ standardScale: settings.controls.scale.matrixplot,
49
49
  varNamesCol: dataset.varNamesCol
50
50
  });
51
51
  (0, _react.useEffect)(() => {
@@ -68,11 +68,11 @@ function Matrixplot() {
68
68
  indices: i.vars.map(v => v.index)
69
69
  } : i.index),
70
70
  obsIndices: isSliced ? [...(obsIndices || [])] : null,
71
- standardScale: settings.controls.standardScale,
71
+ standardScale: settings.controls.scale.matrixplot,
72
72
  varNamesCol: dataset.varNamesCol
73
73
  });
74
74
  });
75
- }, [settings.controls.standardScale, settings.selectedMultiVar, settings.selectedObs, dataset.url, dataset.varNamesCol, obsIndices, isSliced]);
75
+ }, [settings.controls.scale.matrixplot, settings.selectedMultiVar, settings.selectedObs, dataset.url, dataset.varNamesCol, obsIndices, isSliced]);
76
76
  const updateColorscale = (0, _react.useCallback)(colorscale => {
77
77
  setLayout(l => {
78
78
  return _objectSpread(_objectSpread({}, l), {}, {
package/dist/cjs/components/matrixplot/MatrixplotControls.js CHANGED
@@ -5,41 +5,11 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.MatrixplotControls = MatrixplotControls;
7
7
  var _react = _interopRequireDefault(require("react"));
8
- var _lodash = _interopRequireDefault(require("lodash"));
9
8
  var _reactBootstrap = require("react-bootstrap");
10
- var _colorscales = require("../../constants/colorscales");
11
- var _constants = require("../../constants/constants");
12
- var _SettingsContext = require("../../context/SettingsContext");
9
+ var _Controls = require("../controls/Controls");
13
10
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
14
11
  function MatrixplotControls() {
15
- const settings = (0, _SettingsContext.useSettings)();
16
- const dispatch = (0, _SettingsContext.useSettingsDispatch)();
17
- const colorScaleList = _lodash.default.keys(_colorscales.COLORSCALES).map(key => /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
18
- key: key,
19
- active: settings.controls.colorScale === key,
20
- onClick: () => {
21
- dispatch({
22
- type: "set.controls.colorScale",
23
- colorScale: key
24
- });
25
- }
26
- }, key));
27
- const standardScaleList = _lodash.default.values(_constants.MATRIXPLOT_SCALES).map(scale => /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
28
- key: scale.value,
29
- active: settings.controls.scale.matrixplot.name === scale.name,
30
- onClick: () => {
31
- dispatch({
32
- type: "set.controls.scale",
33
- plot: "matrixplot",
34
- scale: scale
35
- });
36
- }
37
- }, scale.name));
38
- return /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonToolbar, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Toggle, {
39
- id: "dropdownColorscale",
40
- variant: "light"
41
- }, settings.controls.colorScale), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.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(_reactBootstrap.Dropdown, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Toggle, {
42
- id: "dropdownStandardScale",
43
- variant: "light"
44
- }, settings.controls.scale.matrixplot.name), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, null, standardScaleList)))));
12
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form, null, /*#__PURE__*/_react.default.createElement(_Controls.ColorscaleSelect, null), /*#__PURE__*/_react.default.createElement(_Controls.ScaleSelect, {
13
+ plot: "matrixplot"
14
+ })));
45
15
  }
package/dist/cjs/components/scatterplot/ScatterplotControls.js CHANGED
@@ -6,12 +6,10 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.ScatterplotControls = void 0;
7
7
  var _react = _interopRequireWildcard(require("react"));
8
8
  var _material = require("@mui/material");
9
- var _lodash = _interopRequireDefault(require("lodash"));
10
9
  var _reactBootstrap = require("react-bootstrap");
11
- var _colorscales = require("../../constants/colorscales");
12
10
  var _constants = require("../../constants/constants");
13
11
  var _SettingsContext = require("../../context/SettingsContext");
14
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
12
+ var _Controls = require("../controls/Controls");
15
13
  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); }
16
14
  const ScatterplotControls = () => {
17
15
  var _settings$selectedObs;
@@ -19,16 +17,6 @@ const ScatterplotControls = () => {
19
17
  const dispatch = (0, _SettingsContext.useSettingsDispatch)();
20
18
  const [sliderValue, setSliderValue] = _react.default.useState(settings.controls.range || [0, 1]);
21
19
  const isCategorical = settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS ? ((_settings$selectedObs = settings.selectedObs) === null || _settings$selectedObs === void 0 ? void 0 : _settings$selectedObs.type) === _constants.OBS_TYPES.CATEGORICAL : false;
22
- const colormapList = _lodash.default.keys(_colorscales.COLORSCALES).map(key => /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
23
- key: key,
24
- active: settings.controls.colorScale === key,
25
- onClick: () => {
26
- dispatch({
27
- type: "set.controls.colorScale",
28
- colorScale: key
29
- });
30
- }
31
- }, key));
32
20
  const valueLabelFormat = value => {
33
21
  return (value * (settings.controls.valueRange[1] - settings.controls.valueRange[0]) + settings.controls.valueRange[0]).toFixed(2);
34
22
  };
@@ -57,7 +45,9 @@ const ScatterplotControls = () => {
57
45
  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
58
46
  id: "colorscale-range",
59
47
  gutterBottom: true
60
- }, "Colorscale range"), /*#__PURE__*/_react.default.createElement(_material.Slider, {
48
+ }, "Colorscale range"), /*#__PURE__*/_react.default.createElement("div", {
49
+ className: "px-4"
50
+ }, /*#__PURE__*/_react.default.createElement(_material.Slider, {
61
51
  "aria-labelledby": "colorscale-range",
62
52
  min: 0,
63
53
  max: 1,
@@ -70,12 +60,9 @@ const ScatterplotControls = () => {
70
60
  valueLabelFormat: valueLabelFormat,
71
61
  marks: marks,
72
62
  disabled: isCategorical
73
- }));
74
- return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Toggle, {
75
- id: "dropdownColorscale",
76
- variant: "light"
77
- }, settings.controls.colorScale), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, null, colormapList)), /*#__PURE__*/_react.default.createElement("div", {
78
- className: "m-4"
79
- }, rangeSlider));
63
+ })));
64
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form, null, /*#__PURE__*/_react.default.createElement(_Controls.ColorscaleSelect, null), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Group, {
65
+ className: "mb-2"
66
+ }, rangeSlider)));
80
67
  };
81
68
  exports.ScatterplotControls = ScatterplotControls;
package/dist/cjs/components/violin/Violin.js CHANGED
@@ -41,7 +41,7 @@ function Violin(_ref) {
41
41
  const [params, setParams] = (0, _react.useState)(_objectSpread({
42
42
  url: dataset.url,
43
43
  mode: mode,
44
- scale: settings.controls.scale.violinplot.value,
44
+ scale: settings.controls.scale.violinplot,
45
45
  varNamesCol: dataset.varNamesCol
46
46
  }, {
47
47
  [_constants.VIOLIN_MODES.MULTIKEY]: {
@@ -81,7 +81,7 @@ function Violin(_ref) {
81
81
  name: i.name,
82
82
  indices: i.vars.map(v => v.index)
83
83
  } : i.index),
84
- scale: settings.controls.scale.violinplot.value,
84
+ scale: settings.controls.scale.violinplot,
85
85
  varNamesCol: dataset.varNamesCol
86
86
  });
87
87
  });
@@ -106,12 +106,12 @@ function Violin(_ref) {
106
106
  return (_settings$selectedObs8 = settings.selectedObs) === null || _settings$selectedObs8 === void 0 ? void 0 : _settings$selectedObs8.codesMap[c];
107
107
  }),
108
108
  obsIndices: isSliced ? [...(obsIndices || [])] : null,
109
- scale: settings.controls.scale.violinplot.value,
109
+ scale: settings.controls.scale.violinplot,
110
110
  varNamesCol: dataset.varNamesCol
111
111
  });
112
112
  });
113
113
  }
114
- }, [settings.controls.scale.violinplot.value, settings.selectedMultiVar, settings.selectedObs, settings.selectedVar, dataset.url, dataset.varNamesCol, obsIndices, isSliced, mode]);
114
+ }, [settings.controls.scale.violinplot, settings.selectedMultiVar, settings.selectedObs, settings.selectedVar, dataset.url, dataset.varNamesCol, obsIndices, isSliced, mode]);
115
115
  const {
116
116
  fetchedData,
117
117
  isPending,
package/dist/cjs/components/violin/ViolinControls.js CHANGED
@@ -5,27 +5,11 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.ViolinControls = ViolinControls;
7
7
  var _react = _interopRequireDefault(require("react"));
8
- var _lodash = _interopRequireDefault(require("lodash"));
9
8
  var _reactBootstrap = require("react-bootstrap");
10
- var _constants = require("../../constants/constants");
11
- var _SettingsContext = require("../../context/SettingsContext");
9
+ var _Controls = require("../controls/Controls");
12
10
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
13
11
  function ViolinControls() {
14
- const settings = (0, _SettingsContext.useSettings)();
15
- const dispatch = (0, _SettingsContext.useSettingsDispatch)();
16
- const scaleList = _lodash.default.values(_constants.VIOLINPLOT_SCALES).map(scale => /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
17
- key: scale.value,
18
- active: settings.controls.scale.violinplot === scale,
19
- onClick: () => {
20
- dispatch({
21
- type: "set.controls.scale",
22
- plot: "violinplot",
23
- scale: scale
24
- });
25
- }
26
- }, scale.name));
27
- return /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonToolbar, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup.Text, null, "Scale"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Toggle, {
28
- id: "dropdownStandardScale",
29
- variant: "light"
30
- }, settings.controls.scale.violinplot.name), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, null, scaleList)))));
12
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form, null, /*#__PURE__*/_react.default.createElement(_Controls.ScaleSelect, {
13
+ plot: "violinplot"
14
+ })));
31
15
  }
package/dist/cjs/context/SettingsContext.js CHANGED
@@ -44,9 +44,9 @@ const initialSettings = {
44
44
  cmax: 1
45
45
  },
46
46
  scale: {
47
- dotplot: _constants.DOTPLOT_SCALES.NONE,
48
- matrixplot: _constants.MATRIXPLOT_SCALES.NONE,
49
- violinplot: _constants.VIOLINPLOT_SCALES.WIDTH
47
+ dotplot: _constants.DOTPLOT_SCALES.NONE.value,
48
+ matrixplot: _constants.MATRIXPLOT_SCALES.NONE.value,
49
+ violinplot: _constants.VIOLINPLOT_SCALES.WIDTH.value
50
50
  },
51
51
  meanOnlyExpressed: false,
52
52
  expressionCutoff: 0.0
package/dist/cjs/utils/zarrData.js CHANGED
@@ -18,18 +18,11 @@ const useObsmData = function () {
18
18
  const dataset = (0, _DatasetContext.useDataset)();
19
19
  const settings = (0, _SettingsContext.useSettings)();
20
20
  obsm = obsm || settings.selectedObsm;
21
- const [obsmParams, setObsmParams] = (0, _react.useState)({
21
+ const obsmParams = (0, _react.useMemo)(() => ({
22
22
  url: dataset.url,
23
23
  path: "obsm/" + obsm,
24
24
  s: [null, (0, _zarr.slice)(null, 2)] // load only [:, :2]
25
- });
26
- (0, _react.useEffect)(() => {
27
- setObsmParams({
28
- url: dataset.url,
29
- path: "obsm/" + obsm,
30
- s: [null, (0, _zarr.slice)(null, 2)]
31
- });
32
- }, [dataset.url, obsm]);
25
+ }), [dataset.url, obsm]);
33
26
  return (0, _zarrHelper.useZarr)(obsmParams, _zarrHelper.GET_OPTIONS, {
34
27
  enabled: !!obsm
35
28
  });
@@ -44,34 +37,22 @@ const meanData = (_i, data) => {
44
37
  });
45
38
  };
46
39
  const useXData = function () {
47
- var _settings$selectedVar, _settings$selectedVar2, _settings$selectedVar3;
48
40
  let agg = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : meanData;
49
41
  const dataset = (0, _DatasetContext.useDataset)();
50
42
  const settings = (0, _SettingsContext.useSettings)();
51
- const [xParams, setXParams] = (0, _react.useState)(!settings.selectedVar ? [] : !((_settings$selectedVar = settings.selectedVar) !== null && _settings$selectedVar !== void 0 && _settings$selectedVar.isSet) ? [{
52
- url: dataset.url,
53
- path: "X",
54
- s: [null, (_settings$selectedVar2 = settings.selectedVar) === null || _settings$selectedVar2 === void 0 ? void 0 : _settings$selectedVar2.matrix_index]
55
- }] : _lodash.default.map((_settings$selectedVar3 = settings.selectedVar) === null || _settings$selectedVar3 === void 0 ? void 0 : _settings$selectedVar3.vars, v => {
56
- return {
43
+ const xParams = (0, _react.useMemo)(() => {
44
+ var _settings$selectedVar, _settings$selectedVar2, _settings$selectedVar3;
45
+ return !settings.selectedVar ? [] : !((_settings$selectedVar = settings.selectedVar) !== null && _settings$selectedVar !== void 0 && _settings$selectedVar.isSet) ? [{
57
46
  url: dataset.url,
58
47
  path: "X",
59
- s: [null, v.matrix_index]
60
- };
61
- }));
62
- (0, _react.useEffect)(() => {
63
- var _settings$selectedVar4, _settings$selectedVar5, _settings$selectedVar6;
64
- setXParams(!settings.selectedVar ? [] : !((_settings$selectedVar4 = settings.selectedVar) !== null && _settings$selectedVar4 !== void 0 && _settings$selectedVar4.isSet) ? [{
65
- url: dataset.url,
66
- path: "X",
67
- s: [null, (_settings$selectedVar5 = settings.selectedVar) === null || _settings$selectedVar5 === void 0 ? void 0 : _settings$selectedVar5.matrix_index]
68
- }] : _lodash.default.map((_settings$selectedVar6 = settings.selectedVar) === null || _settings$selectedVar6 === void 0 ? void 0 : _settings$selectedVar6.vars, v => {
48
+ s: [null, (_settings$selectedVar2 = settings.selectedVar) === null || _settings$selectedVar2 === void 0 ? void 0 : _settings$selectedVar2.matrix_index]
49
+ }] : _lodash.default.map((_settings$selectedVar3 = settings.selectedVar) === null || _settings$selectedVar3 === void 0 ? void 0 : _settings$selectedVar3.vars, v => {
69
50
  return {
70
51
  url: dataset.url,
71
52
  path: "X",
72
53
  s: [null, v.matrix_index]
73
54
  };
74
- }));
55
+ });
75
56
  }, [dataset.url, settings.selectedVar]);
76
57
  return (0, _zarrHelper.useMultipleZarr)(xParams, _zarrHelper.GET_OPTIONS, {
77
58
  enabled: !!xParams.length
@@ -79,22 +60,18 @@ const useXData = function () {
79
60
  };
80
61
  exports.useXData = useXData;
81
62
  const useObsData = function () {
82
- var _obs, _obs2;
63
+ var _obs3, _obs4;
83
64
  let obs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
84
65
  const dataset = (0, _DatasetContext.useDataset)();
85
66
  const settings = (0, _SettingsContext.useSettings)();
86
67
  obs = obs || settings.selectedObs;
87
- const [obsParams, setObsParams] = (0, _react.useState)({
88
- url: dataset.url,
89
- path: "obs/" + ((_obs = obs) === null || _obs === void 0 ? void 0 : _obs.name) + (((_obs2 = obs) === null || _obs2 === void 0 ? void 0 : _obs2.type) === _constants.OBS_TYPES.CATEGORICAL ? "/codes" : "")
90
- });
91
- (0, _react.useEffect)(() => {
92
- var _obs3, _obs4;
93
- setObsParams({
68
+ const obsParams = (0, _react.useMemo)(() => {
69
+ var _obs, _obs2;
70
+ return {
94
71
  url: dataset.url,
95
- path: "obs/" + ((_obs3 = obs) === null || _obs3 === void 0 ? void 0 : _obs3.name) + (((_obs4 = obs) === null || _obs4 === void 0 ? void 0 : _obs4.type) === _constants.OBS_TYPES.CATEGORICAL ? "/codes" : "")
96
- });
97
- }, [dataset.url, obs]);
72
+ path: "obs/" + ((_obs = obs) === null || _obs === void 0 ? void 0 : _obs.name) + (((_obs2 = obs) === null || _obs2 === void 0 ? void 0 : _obs2.type) === _constants.OBS_TYPES.CATEGORICAL ? "/codes" : "")
73
+ };
74
+ }, [dataset.url, (_obs3 = obs) === null || _obs3 === void 0 ? void 0 : _obs3.name, (_obs4 = obs) === null || _obs4 === void 0 ? void 0 : _obs4.type]);
98
75
  return (0, _zarrHelper.useZarr)(obsParams, _zarrHelper.GET_OPTIONS, {
99
76
  enabled: !!obs
100
77
  });
@@ -103,22 +80,13 @@ exports.useObsData = useObsData;
103
80
  const useLabelObsData = () => {
104
81
  const dataset = (0, _DatasetContext.useDataset)();
105
82
  const settings = (0, _SettingsContext.useSettings)();
106
- const [labelObsParams, setLabelObsParams] = (0, _react.useState)(_lodash.default.map(settings.labelObs, obs => {
83
+ const labelObsParams = (0, _react.useMemo)(() => _lodash.default.map(settings.labelObs, obs => {
107
84
  return {
108
85
  url: dataset.url,
109
86
  path: "obs/" + obs.name + (obs.type === _constants.OBS_TYPES.CATEGORICAL ? "/codes" : ""),
110
87
  key: obs.name
111
88
  };
112
- }));
113
- (0, _react.useEffect)(() => {
114
- setLabelObsParams(_lodash.default.map(settings.labelObs, obs => {
115
- return {
116
- url: dataset.url,
117
- path: "obs/" + obs.name + (obs.type === _constants.OBS_TYPES.CATEGORICAL ? "/codes" : ""),
118
- key: obs.name
119
- };
120
- }));
121
- }, [settings.labelObs, dataset.url]);
89
+ }), [dataset.url, settings.labelObs]);
122
90
  return (0, _zarrHelper.useMultipleZarr)(labelObsParams, _zarrHelper.GET_OPTIONS, {
123
91
  enabled: !!labelObsParams.length
124
92
  });
package/dist/esm/components/controls/Controls.js ADDED
@@ -0,0 +1,51 @@
1
+ import React from "react";
2
+ import _ from "lodash";
3
+ import { Form } from "react-bootstrap";
4
+ import { COLORSCALES } from "../../constants/colorscales";
5
+ import { DOTPLOT_SCALES, MATRIXPLOT_SCALES, VIOLINPLOT_SCALES } from "../../constants/constants";
6
+ import { useSettings, useSettingsDispatch } from "../../context/SettingsContext";
7
+ export const ColorscaleSelect = () => {
8
+ const settings = useSettings();
9
+ const dispatch = useSettingsDispatch();
10
+ return /*#__PURE__*/React.createElement(Form.Group, {
11
+ className: "mb-2"
12
+ }, /*#__PURE__*/React.createElement(Form.Label, null, "Colorscale"), /*#__PURE__*/React.createElement(Form.Select, {
13
+ value: settings.controls.colorScale,
14
+ onChange: e => {
15
+ dispatch({
16
+ type: "set.controls.colorScale",
17
+ colorScale: e.target.value
18
+ });
19
+ }
20
+ }, _.keys(COLORSCALES).map(key => /*#__PURE__*/React.createElement("option", {
21
+ key: key,
22
+ value: key
23
+ }, key))));
24
+ };
25
+ export const ScaleSelect = _ref => {
26
+ let {
27
+ plot
28
+ } = _ref;
29
+ const settings = useSettings();
30
+ const dispatch = useSettingsDispatch();
31
+ const SCALES = {
32
+ dotplot: DOTPLOT_SCALES,
33
+ matrixplot: MATRIXPLOT_SCALES,
34
+ violinplot: VIOLINPLOT_SCALES
35
+ };
36
+ return /*#__PURE__*/React.createElement(Form.Group, {
37
+ className: "mb-2"
38
+ }, /*#__PURE__*/React.createElement(Form.Label, null, "Standard scale"), /*#__PURE__*/React.createElement(Form.Select, {
39
+ value: settings.controls.scale[plot] || "",
40
+ onChange: e => {
41
+ dispatch({
42
+ type: "set.controls.scale",
43
+ plot: plot,
44
+ scale: !e.target.value.length ? null : e.target.value
45
+ });
46
+ }
47
+ }, _.values(SCALES[plot]).map(scale => /*#__PURE__*/React.createElement("option", {
48
+ key: scale.value,
49
+ value: scale.value || ""
50
+ }, scale.name))));
51
+ };
package/dist/esm/components/dotplot/Dotplot.js CHANGED
@@ -38,7 +38,7 @@ export function Dotplot() {
38
38
  indices: i.vars.map(v => v.index)
39
39
  } : i.index),
40
40
  obsIndices: isSliced ? [...(obsIndices || [])] : null,
41
- standardScale: settings.controls.standardScale,
41
+ standardScale: settings.controls.scale.dotplot,
42
42
  meanOnlyExpressed: settings.controls.meanOnlyExpressed,
43
43
  expressionCutoff: settings.controls.expressionCutoff,
44
44
  varNamesCol: dataset.varNamesCol
@@ -65,13 +65,13 @@ export function Dotplot() {
65
65
  indices: i.vars.map(v => v.index)
66
66
  } : i.index),
67
67
  obsIndices: isSliced ? [...(obsIndices || [])] : null,
68
- standardScale: settings.controls.standardScale,
68
+ standardScale: settings.controls.scale.dotplot,
69
69
  meanOnlyExpressed: settings.controls.meanOnlyExpressed,
70
70
  expressionCutoff: settings.controls.expressionCutoff,
71
71
  varNamesCol: dataset.varNamesCol
72
72
  });
73
73
  });
74
- }, [dataset.url, settings.selectedObs, settings.selectedMultiVar, settings.controls.standardScale, settings.controls.meanOnlyExpressed, settings.controls.expressionCutoff, dataset.varNamesCol, isSliced, obsIndices]);
74
+ }, [dataset.url, settings.selectedObs, settings.selectedMultiVar, settings.controls.scale.dotplot, settings.controls.meanOnlyExpressed, settings.controls.expressionCutoff, dataset.varNamesCol, isSliced, obsIndices]);
75
75
  const updateColorscale = useCallback(colorscale => {
76
76
  setLayout(l => {
77
77
  return _objectSpread(_objectSpread({}, l), {}, {
package/dist/esm/components/dotplot/DotplotControls.js CHANGED
@@ -4,12 +4,9 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
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
6
  import React, { useEffect, useState } from "react";
7
- import _ from "lodash";
8
- import { Button, ButtonGroup, ButtonToolbar, Form, ToggleButton, InputGroup } from "react-bootstrap";
9
- import Dropdown from "react-bootstrap/Dropdown";
10
- import { COLORSCALES } from "../../constants/colorscales";
11
- import { DOTPLOT_SCALES } from "../../constants/constants";
7
+ import { Button, Form, InputGroup } from "react-bootstrap";
12
8
  import { useSettings, useSettingsDispatch } from "../../context/SettingsContext";
9
+ import { ColorscaleSelect, ScaleSelect } from "../controls/Controls";
13
10
  export function DotplotControls() {
14
11
  const settings = useSettings();
15
12
  const dispatch = useSettingsDispatch();
@@ -29,76 +26,9 @@ export function DotplotControls() {
29
26
  expressionCutoff: settings.controls.expressionCutoff
30
27
  }));
31
28
  }, [settings.controls.colorAxis.cmin, settings.controls.colorAxis.cmax, settings.controls.expressionCutoff]);
32
- const colorScaleList = _.keys(COLORSCALES).map(key => /*#__PURE__*/React.createElement(Dropdown.Item, {
33
- key: key,
34
- active: settings.controls.colorScale === key,
35
- onClick: () => {
36
- dispatch({
37
- type: "set.controls.colorScale",
38
- colorScale: key
39
- });
40
- }
41
- }, key));
42
- const standardScaleList = _.values(DOTPLOT_SCALES).map(scale => /*#__PURE__*/React.createElement(Dropdown.Item, {
43
- key: scale.value,
44
- active: settings.controls.scale.dotplot === scale,
45
- onClick: () => {
46
- dispatch({
47
- type: "set.controls.scale",
48
- plot: "dotplot",
49
- scale: scale
50
- });
51
- }
52
- }, scale.name));
53
- return /*#__PURE__*/React.createElement(ButtonToolbar, null, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.Toggle, {
54
- id: "dropdownColorscale",
55
- variant: "light"
56
- }, settings.controls.colorScale), /*#__PURE__*/React.createElement(Dropdown.Menu, null, colorScaleList))), /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(InputGroup, null, /*#__PURE__*/React.createElement(InputGroup.Text, null, "Standard scale"), /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.Toggle, {
57
- id: "dropdownStandardScale",
58
- variant: "light"
59
- }, settings.controls.scale.dotplot.name), /*#__PURE__*/React.createElement(Dropdown.Menu, null, standardScaleList)))), /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(ToggleButton, {
60
- id: "toggleMeanOnlyExpressed",
61
- type: "checkbox",
62
- variant: "outline-primary",
63
- checked: settings.controls.meanOnlyExpressed,
64
- onChange: () => {
65
- dispatch({
66
- type: "set.controls.meanOnlyExpressed",
67
- meanOnlyExpressed: !settings.controls.meanOnlyExpressed
68
- });
69
- }
70
- }, "Average only above cutoff")), /*#__PURE__*/React.createElement(Form, {
71
- onSubmit: e => {
72
- e.preventDefault();
73
- dispatch({
74
- type: "set.controls.expressionCutoff",
75
- expressionCutoff: parseFloat(controls.expressionCutoff)
76
- });
77
- }
78
- }, /*#__PURE__*/React.createElement(InputGroup, null, /*#__PURE__*/React.createElement(InputGroup.Text, null, "Expression Cutoff"), /*#__PURE__*/React.createElement(Form.Control, {
79
- size: "sm",
80
- type: "number",
81
- step: "0.1",
82
- min: 0.0,
83
- value: controls.expressionCutoff,
84
- onChange: e => {
85
- setControls(_objectSpread(_objectSpread({}, controls), {}, {
86
- expressionCutoff: e.target.value
87
- }));
88
- }
89
- }), /*#__PURE__*/React.createElement(Button, {
90
- type: "submit",
91
- variant: "outline-primary"
92
- }, "Apply"))), /*#__PURE__*/React.createElement(Form, {
93
- onSubmit: e => {
94
- e.preventDefault();
95
- dispatch({
96
- type: "set.controls.colorAxis.crange",
97
- cmin: controls.colorAxis.cmin,
98
- cmax: controls.colorAxis.cmax
99
- });
100
- }
101
- }, /*#__PURE__*/React.createElement(InputGroup, null, /*#__PURE__*/React.createElement(InputGroup.Text, null, "Colorscale"), /*#__PURE__*/React.createElement(InputGroup.Text, null, "min"), /*#__PURE__*/React.createElement(Form.Control, {
29
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(ColorscaleSelect, null), /*#__PURE__*/React.createElement(Form.Group, {
30
+ className: "mb-2"
31
+ }, /*#__PURE__*/React.createElement(InputGroup, null, /*#__PURE__*/React.createElement(InputGroup.Text, null, "min"), /*#__PURE__*/React.createElement(Form.Control, {
102
32
  name: "scaleMin",
103
33
  size: "sm",
104
34
  type: "number",
@@ -132,16 +62,52 @@ export function DotplotControls() {
132
62
  }));
133
63
  }
134
64
  }), /*#__PURE__*/React.createElement(Button, {
135
- type: "submit",
136
- variant: "outline-primary"
65
+ variant: "outline-primary",
66
+ onClick: () => dispatch({
67
+ type: "set.controls.colorAxis.crange",
68
+ cmin: controls.colorAxis.cmin,
69
+ cmax: controls.colorAxis.cmax
70
+ })
137
71
  }, "Apply"), /*#__PURE__*/React.createElement(Button, {
138
72
  variant: "outline-primary",
139
- onClick: () => {
73
+ onClick: () => dispatch({
74
+ type: "set.controls.colorAxis.crange",
75
+ cmin: settings.controls.colorAxis.dmin,
76
+ cmax: settings.controls.colorAxis.dmax
77
+ })
78
+ }, "Reset"))), /*#__PURE__*/React.createElement(ScaleSelect, {
79
+ plot: "dotplot"
80
+ }), /*#__PURE__*/React.createElement(Form.Group, {
81
+ className: "mb-2"
82
+ }, /*#__PURE__*/React.createElement(Form.Label, null, "Expression Cutoff"), /*#__PURE__*/React.createElement(InputGroup, null, /*#__PURE__*/React.createElement(Form.Control, {
83
+ size: "sm",
84
+ type: "number",
85
+ step: "0.1",
86
+ min: 0.0,
87
+ value: controls.expressionCutoff,
88
+ onChange: e => {
89
+ setControls(_objectSpread(_objectSpread({}, controls), {}, {
90
+ expressionCutoff: e.target.value
91
+ }));
92
+ }
93
+ }), /*#__PURE__*/React.createElement(Button, {
94
+ variant: "outline-primary",
95
+ onClick: () => dispatch({
96
+ type: "set.controls.expressionCutoff",
97
+ expressionCutoff: parseFloat(controls.expressionCutoff)
98
+ })
99
+ }, "Apply"))), /*#__PURE__*/React.createElement(Form.Group, {
100
+ className: "mb-2"
101
+ }, /*#__PURE__*/React.createElement(Form.Check, {
102
+ type: "switch",
103
+ id: "meanOnlyExpressed",
104
+ label: "Average only above cutoff",
105
+ checked: settings.controls.meanOnlyExpressed,
106
+ onChange: () => {
140
107
  dispatch({
141
- type: "set.controls.colorAxis.crange",
142
- cmin: settings.controls.colorAxis.dmin,
143
- cmax: settings.controls.colorAxis.dmax
108
+ type: "set.controls.meanOnlyExpressed",
109
+ meanOnlyExpressed: !settings.controls.meanOnlyExpressed
144
110
  });
145
111
  }
146
- }, "Autoscale"))));
112
+ }))));
147
113
  }
package/dist/esm/components/heatmap/HeatmapControls.js CHANGED
@@ -1,23 +1,6 @@
1
1
  import React from "react";
2
- import _ from "lodash";
3
- import { Dropdown } from "react-bootstrap";
4
- import { COLORSCALES } from "../../constants/colorscales";
5
- import { useSettings, useSettingsDispatch } from "../../context/SettingsContext";
2
+ import { Form } from "react-bootstrap";
3
+ import { ColorscaleSelect } from "../controls/Controls";
6
4
  export function HeatmapControls() {
7
- const settings = useSettings();
8
- const dispatch = useSettingsDispatch();
9
- const colormapList = _.keys(COLORSCALES).map(key => /*#__PURE__*/React.createElement(Dropdown.Item, {
10
- key: key,
11
- active: settings.controls.colorScale === key,
12
- onClick: () => {
13
- dispatch({
14
- type: "set.controls.colorScale",
15
- colorScale: key
16
- });
17
- }
18
- }, key));
19
- return /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.Toggle, {
20
- id: "dropdownColorscale",
21
- variant: "light"
22
- }, settings.controls.colorScale), /*#__PURE__*/React.createElement(Dropdown.Menu, null, colormapList));
5
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(ColorscaleSelect, null)));
23
6
  }
package/dist/esm/components/matrixplot/Matrixplot.js CHANGED
@@ -37,7 +37,7 @@ export function Matrixplot() {
37
37
  indices: i.vars.map(v => v.index)
38
38
  } : i.index),
39
39
  obsIndices: isSliced ? [...(obsIndices || [])] : null,
40
- standardScale: settings.controls.standardScale,
40
+ standardScale: settings.controls.scale.matrixplot,
41
41
  varNamesCol: dataset.varNamesCol
42
42
  });
43
43
  useEffect(() => {
@@ -60,11 +60,11 @@ export function Matrixplot() {
60
60
  indices: i.vars.map(v => v.index)
61
61
  } : i.index),
62
62
  obsIndices: isSliced ? [...(obsIndices || [])] : null,
63
- standardScale: settings.controls.standardScale,
63
+ standardScale: settings.controls.scale.matrixplot,
64
64
  varNamesCol: dataset.varNamesCol
65
65
  });
66
66
  });
67
- }, [settings.controls.standardScale, settings.selectedMultiVar, settings.selectedObs, dataset.url, dataset.varNamesCol, obsIndices, isSliced]);
67
+ }, [settings.controls.scale.matrixplot, settings.selectedMultiVar, settings.selectedObs, dataset.url, dataset.varNamesCol, obsIndices, isSliced]);
68
68
  const updateColorscale = useCallback(colorscale => {
69
69
  setLayout(l => {
70
70
  return _objectSpread(_objectSpread({}, l), {}, {
package/dist/esm/components/matrixplot/MatrixplotControls.js CHANGED
@@ -1,38 +1,8 @@
1
1
  import React from "react";
2
- import _ from "lodash";
3
- import { Dropdown, ButtonGroup, ButtonToolbar, InputGroup } from "react-bootstrap";
4
- import { COLORSCALES } from "../../constants/colorscales";
5
- import { MATRIXPLOT_SCALES } from "../../constants/constants";
6
- import { useSettings, useSettingsDispatch } from "../../context/SettingsContext";
2
+ import { Form } from "react-bootstrap";
3
+ import { ColorscaleSelect, ScaleSelect } from "../controls/Controls";
7
4
  export function MatrixplotControls() {
8
- const settings = useSettings();
9
- const dispatch = useSettingsDispatch();
10
- const colorScaleList = _.keys(COLORSCALES).map(key => /*#__PURE__*/React.createElement(Dropdown.Item, {
11
- key: key,
12
- active: settings.controls.colorScale === key,
13
- onClick: () => {
14
- dispatch({
15
- type: "set.controls.colorScale",
16
- colorScale: key
17
- });
18
- }
19
- }, key));
20
- const standardScaleList = _.values(MATRIXPLOT_SCALES).map(scale => /*#__PURE__*/React.createElement(Dropdown.Item, {
21
- key: scale.value,
22
- active: settings.controls.scale.matrixplot.name === scale.name,
23
- onClick: () => {
24
- dispatch({
25
- type: "set.controls.scale",
26
- plot: "matrixplot",
27
- scale: scale
28
- });
29
- }
30
- }, scale.name));
31
- return /*#__PURE__*/React.createElement(ButtonToolbar, null, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.Toggle, {
32
- id: "dropdownColorscale",
33
- variant: "light"
34
- }, settings.controls.colorScale), /*#__PURE__*/React.createElement(Dropdown.Menu, null, colorScaleList))), /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(InputGroup, null, /*#__PURE__*/React.createElement(InputGroup.Text, null, "Standard scale"), /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.Toggle, {
35
- id: "dropdownStandardScale",
36
- variant: "light"
37
- }, settings.controls.scale.matrixplot.name), /*#__PURE__*/React.createElement(Dropdown.Menu, null, standardScaleList)))));
5
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(ColorscaleSelect, null), /*#__PURE__*/React.createElement(ScaleSelect, {
6
+ plot: "matrixplot"
7
+ })));
38
8
  }
package/dist/esm/components/scatterplot/ScatterplotControls.js CHANGED
@@ -1,26 +1,15 @@
1
1
  import React, { useEffect } from "react";
2
2
  import { Box, Slider, Typography } from "@mui/material";
3
- import _ from "lodash";
4
- import { Dropdown } from "react-bootstrap";
5
- import { COLORSCALES } from "../../constants/colorscales";
3
+ import { Form } from "react-bootstrap";
6
4
  import { COLOR_ENCODINGS, OBS_TYPES } from "../../constants/constants";
7
5
  import { useSettings, useSettingsDispatch } from "../../context/SettingsContext";
6
+ import { ColorscaleSelect } from "../controls/Controls";
8
7
  export const ScatterplotControls = () => {
9
8
  var _settings$selectedObs;
10
9
  const settings = useSettings();
11
10
  const dispatch = useSettingsDispatch();
12
11
  const [sliderValue, setSliderValue] = React.useState(settings.controls.range || [0, 1]);
13
12
  const isCategorical = settings.colorEncoding === COLOR_ENCODINGS.OBS ? ((_settings$selectedObs = settings.selectedObs) === null || _settings$selectedObs === void 0 ? void 0 : _settings$selectedObs.type) === OBS_TYPES.CATEGORICAL : false;
14
- const colormapList = _.keys(COLORSCALES).map(key => /*#__PURE__*/React.createElement(Dropdown.Item, {
15
- key: key,
16
- active: settings.controls.colorScale === key,
17
- onClick: () => {
18
- dispatch({
19
- type: "set.controls.colorScale",
20
- colorScale: key
21
- });
22
- }
23
- }, key));
24
13
  const valueLabelFormat = value => {
25
14
  return (value * (settings.controls.valueRange[1] - settings.controls.valueRange[0]) + settings.controls.valueRange[0]).toFixed(2);
26
15
  };
@@ -49,7 +38,9 @@ export const ScatterplotControls = () => {
49
38
  }, /*#__PURE__*/React.createElement(Typography, {
50
39
  id: "colorscale-range",
51
40
  gutterBottom: true
52
- }, "Colorscale range"), /*#__PURE__*/React.createElement(Slider, {
41
+ }, "Colorscale range"), /*#__PURE__*/React.createElement("div", {
42
+ className: "px-4"
43
+ }, /*#__PURE__*/React.createElement(Slider, {
53
44
  "aria-labelledby": "colorscale-range",
54
45
  min: 0,
55
46
  max: 1,
@@ -62,11 +53,8 @@ export const ScatterplotControls = () => {
62
53
  valueLabelFormat: valueLabelFormat,
63
54
  marks: marks,
64
55
  disabled: isCategorical
65
- }));
66
- return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.Toggle, {
67
- id: "dropdownColorscale",
68
- variant: "light"
69
- }, settings.controls.colorScale), /*#__PURE__*/React.createElement(Dropdown.Menu, null, colormapList)), /*#__PURE__*/React.createElement("div", {
70
- className: "m-4"
71
- }, rangeSlider));
56
+ })));
57
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(ColorscaleSelect, null), /*#__PURE__*/React.createElement(Form.Group, {
58
+ className: "mb-2"
59
+ }, rangeSlider)));
72
60
  };
package/dist/esm/components/violin/Violin.js CHANGED
@@ -33,7 +33,7 @@ export function Violin(_ref) {
33
33
  const [params, setParams] = useState(_objectSpread({
34
34
  url: dataset.url,
35
35
  mode: mode,
36
- scale: settings.controls.scale.violinplot.value,
36
+ scale: settings.controls.scale.violinplot,
37
37
  varNamesCol: dataset.varNamesCol
38
38
  }, {
39
39
  [VIOLIN_MODES.MULTIKEY]: {
@@ -73,7 +73,7 @@ export function Violin(_ref) {
73
73
  name: i.name,
74
74
  indices: i.vars.map(v => v.index)
75
75
  } : i.index),
76
- scale: settings.controls.scale.violinplot.value,
76
+ scale: settings.controls.scale.violinplot,
77
77
  varNamesCol: dataset.varNamesCol
78
78
  });
79
79
  });
@@ -98,12 +98,12 @@ export function Violin(_ref) {
98
98
  return (_settings$selectedObs8 = settings.selectedObs) === null || _settings$selectedObs8 === void 0 ? void 0 : _settings$selectedObs8.codesMap[c];
99
99
  }),
100
100
  obsIndices: isSliced ? [...(obsIndices || [])] : null,
101
- scale: settings.controls.scale.violinplot.value,
101
+ scale: settings.controls.scale.violinplot,
102
102
  varNamesCol: dataset.varNamesCol
103
103
  });
104
104
  });
105
105
  }
106
- }, [settings.controls.scale.violinplot.value, settings.selectedMultiVar, settings.selectedObs, settings.selectedVar, dataset.url, dataset.varNamesCol, obsIndices, isSliced, mode]);
106
+ }, [settings.controls.scale.violinplot, settings.selectedMultiVar, settings.selectedObs, settings.selectedVar, dataset.url, dataset.varNamesCol, obsIndices, isSliced, mode]);
107
107
  const {
108
108
  fetchedData,
109
109
  isPending,
package/dist/esm/components/violin/ViolinControls.js CHANGED
@@ -1,24 +1,8 @@
1
1
  import React from "react";
2
- import _ from "lodash";
3
- import { Dropdown, ButtonGroup, ButtonToolbar, InputGroup } from "react-bootstrap";
4
- import { VIOLINPLOT_SCALES } from "../../constants/constants";
5
- import { useSettings, useSettingsDispatch } from "../../context/SettingsContext";
2
+ import { Form } from "react-bootstrap";
3
+ import { ScaleSelect } from "../controls/Controls";
6
4
  export function ViolinControls() {
7
- const settings = useSettings();
8
- const dispatch = useSettingsDispatch();
9
- const scaleList = _.values(VIOLINPLOT_SCALES).map(scale => /*#__PURE__*/React.createElement(Dropdown.Item, {
10
- key: scale.value,
11
- active: settings.controls.scale.violinplot === scale,
12
- onClick: () => {
13
- dispatch({
14
- type: "set.controls.scale",
15
- plot: "violinplot",
16
- scale: scale
17
- });
18
- }
19
- }, scale.name));
20
- return /*#__PURE__*/React.createElement(ButtonToolbar, null, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(InputGroup, null, /*#__PURE__*/React.createElement(InputGroup.Text, null, "Scale"), /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.Toggle, {
21
- id: "dropdownStandardScale",
22
- variant: "light"
23
- }, settings.controls.scale.violinplot.name), /*#__PURE__*/React.createElement(Dropdown.Menu, null, scaleList)))));
5
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(ScaleSelect, {
6
+ plot: "violinplot"
7
+ })));
24
8
  }
package/dist/esm/context/SettingsContext.js CHANGED
@@ -33,9 +33,9 @@ const initialSettings = {
33
33
  cmax: 1
34
34
  },
35
35
  scale: {
36
- dotplot: DOTPLOT_SCALES.NONE,
37
- matrixplot: MATRIXPLOT_SCALES.NONE,
38
- violinplot: VIOLINPLOT_SCALES.WIDTH
36
+ dotplot: DOTPLOT_SCALES.NONE.value,
37
+ matrixplot: MATRIXPLOT_SCALES.NONE.value,
38
+ violinplot: VIOLINPLOT_SCALES.WIDTH.value
39
39
  },
40
40
  meanOnlyExpressed: false,
41
41
  expressionCutoff: 0.0
package/dist/esm/utils/zarrData.js CHANGED
@@ -1,4 +1,4 @@
1
- import { useEffect, useState } from "react";
1
+ import { useMemo } from "react";
2
2
  import _ from "lodash";
3
3
  import { slice } from "zarr";
4
4
  import { OBS_TYPES } from "../constants/constants";
@@ -12,18 +12,11 @@ export const useObsmData = function () {
12
12
  const dataset = useDataset();
13
13
  const settings = useSettings();
14
14
  obsm = obsm || settings.selectedObsm;
15
- const [obsmParams, setObsmParams] = useState({
15
+ const obsmParams = useMemo(() => ({
16
16
  url: dataset.url,
17
17
  path: "obsm/" + obsm,
18
18
  s: [null, slice(null, 2)] // load only [:, :2]
19
- });
20
- useEffect(() => {
21
- setObsmParams({
22
- url: dataset.url,
23
- path: "obsm/" + obsm,
24
- s: [null, slice(null, 2)]
25
- });
26
- }, [dataset.url, obsm]);
19
+ }), [dataset.url, obsm]);
27
20
  return useZarr(obsmParams, GET_OPTIONS, {
28
21
  enabled: !!obsm
29
22
  });
@@ -37,56 +30,40 @@ const meanData = (_i, data) => {
37
30
  });
38
31
  };
39
32
  export const useXData = function () {
40
- var _settings$selectedVar, _settings$selectedVar2, _settings$selectedVar3;
41
33
  let agg = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : meanData;
42
34
  const dataset = useDataset();
43
35
  const settings = useSettings();
44
- const [xParams, setXParams] = useState(!settings.selectedVar ? [] : !((_settings$selectedVar = settings.selectedVar) !== null && _settings$selectedVar !== void 0 && _settings$selectedVar.isSet) ? [{
45
- url: dataset.url,
46
- path: "X",
47
- s: [null, (_settings$selectedVar2 = settings.selectedVar) === null || _settings$selectedVar2 === void 0 ? void 0 : _settings$selectedVar2.matrix_index]
48
- }] : _.map((_settings$selectedVar3 = settings.selectedVar) === null || _settings$selectedVar3 === void 0 ? void 0 : _settings$selectedVar3.vars, v => {
49
- return {
36
+ const xParams = useMemo(() => {
37
+ var _settings$selectedVar, _settings$selectedVar2, _settings$selectedVar3;
38
+ return !settings.selectedVar ? [] : !((_settings$selectedVar = settings.selectedVar) !== null && _settings$selectedVar !== void 0 && _settings$selectedVar.isSet) ? [{
50
39
  url: dataset.url,
51
40
  path: "X",
52
- s: [null, v.matrix_index]
53
- };
54
- }));
55
- useEffect(() => {
56
- var _settings$selectedVar4, _settings$selectedVar5, _settings$selectedVar6;
57
- setXParams(!settings.selectedVar ? [] : !((_settings$selectedVar4 = settings.selectedVar) !== null && _settings$selectedVar4 !== void 0 && _settings$selectedVar4.isSet) ? [{
58
- url: dataset.url,
59
- path: "X",
60
- s: [null, (_settings$selectedVar5 = settings.selectedVar) === null || _settings$selectedVar5 === void 0 ? void 0 : _settings$selectedVar5.matrix_index]
61
- }] : _.map((_settings$selectedVar6 = settings.selectedVar) === null || _settings$selectedVar6 === void 0 ? void 0 : _settings$selectedVar6.vars, v => {
41
+ s: [null, (_settings$selectedVar2 = settings.selectedVar) === null || _settings$selectedVar2 === void 0 ? void 0 : _settings$selectedVar2.matrix_index]
42
+ }] : _.map((_settings$selectedVar3 = settings.selectedVar) === null || _settings$selectedVar3 === void 0 ? void 0 : _settings$selectedVar3.vars, v => {
62
43
  return {
63
44
  url: dataset.url,
64
45
  path: "X",
65
46
  s: [null, v.matrix_index]
66
47
  };
67
- }));
48
+ });
68
49
  }, [dataset.url, settings.selectedVar]);
69
50
  return useMultipleZarr(xParams, GET_OPTIONS, {
70
51
  enabled: !!xParams.length
71
52
  }, agg);
72
53
  };
73
54
  export const useObsData = function () {
74
- var _obs, _obs2;
55
+ var _obs3, _obs4;
75
56
  let obs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
76
57
  const dataset = useDataset();
77
58
  const settings = useSettings();
78
59
  obs = obs || settings.selectedObs;
79
- const [obsParams, setObsParams] = useState({
80
- url: dataset.url,
81
- path: "obs/" + ((_obs = obs) === null || _obs === void 0 ? void 0 : _obs.name) + (((_obs2 = obs) === null || _obs2 === void 0 ? void 0 : _obs2.type) === OBS_TYPES.CATEGORICAL ? "/codes" : "")
82
- });
83
- useEffect(() => {
84
- var _obs3, _obs4;
85
- setObsParams({
60
+ const obsParams = useMemo(() => {
61
+ var _obs, _obs2;
62
+ return {
86
63
  url: dataset.url,
87
- path: "obs/" + ((_obs3 = obs) === null || _obs3 === void 0 ? void 0 : _obs3.name) + (((_obs4 = obs) === null || _obs4 === void 0 ? void 0 : _obs4.type) === OBS_TYPES.CATEGORICAL ? "/codes" : "")
88
- });
89
- }, [dataset.url, obs]);
64
+ path: "obs/" + ((_obs = obs) === null || _obs === void 0 ? void 0 : _obs.name) + (((_obs2 = obs) === null || _obs2 === void 0 ? void 0 : _obs2.type) === OBS_TYPES.CATEGORICAL ? "/codes" : "")
65
+ };
66
+ }, [dataset.url, (_obs3 = obs) === null || _obs3 === void 0 ? void 0 : _obs3.name, (_obs4 = obs) === null || _obs4 === void 0 ? void 0 : _obs4.type]);
90
67
  return useZarr(obsParams, GET_OPTIONS, {
91
68
  enabled: !!obs
92
69
  });
@@ -94,22 +71,13 @@ export const useObsData = function () {
94
71
  export const useLabelObsData = () => {
95
72
  const dataset = useDataset();
96
73
  const settings = useSettings();
97
- const [labelObsParams, setLabelObsParams] = useState(_.map(settings.labelObs, obs => {
74
+ const labelObsParams = useMemo(() => _.map(settings.labelObs, obs => {
98
75
  return {
99
76
  url: dataset.url,
100
77
  path: "obs/" + obs.name + (obs.type === OBS_TYPES.CATEGORICAL ? "/codes" : ""),
101
78
  key: obs.name
102
79
  };
103
- }));
104
- useEffect(() => {
105
- setLabelObsParams(_.map(settings.labelObs, obs => {
106
- return {
107
- url: dataset.url,
108
- path: "obs/" + obs.name + (obs.type === OBS_TYPES.CATEGORICAL ? "/codes" : ""),
109
- key: obs.name
110
- };
111
- }));
112
- }, [settings.labelObs, dataset.url]);
80
+ }), [dataset.url, settings.labelObs]);
113
81
  return useMultipleZarr(labelObsParams, GET_OPTIONS, {
114
82
  enabled: !!labelObsParams.length
115
83
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@haniffalab/cherita-react",
3
- "version": "1.2.0-dev.2025-05-21.e57ef5f2",
3
+ "version": "1.2.0-dev.2025-05-21.f93366f0",
4
4
  "author": "Haniffa Lab",
5
5
  "license": "MIT",
6
6
  "keywords": [
@@ -126,5 +126,5 @@
126
126
  "url": "https://github.com/haniffalab/cherita-react/issues"
127
127
  },
128
128
  "homepage": "https://github.com/haniffalab/cherita-react#readme",
129
- "prereleaseSha": "e57ef5f2c023e4400ae9f7dbcb1495778ba11e29"
129
+ "prereleaseSha": "f93366f0ccfa157ef61ffeeb7bca2c095846d7a4"
130
130
  }