@haniffalab/cherita-react 0.1.12-dev.2023-12-05.b3b4991a → 0.1.12-dev.2023-12-19.599c72fc

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 (14) hide show
  1. package/dist/components/dotplot/Dotplot.js +54 -50
  2. package/dist/components/heatmap/Heatmap.js +39 -38
  3. package/dist/components/matrixplot/Matrixplot.js +41 -39
  4. package/dist/components/obs-list/ObsList.js +35 -16
  5. package/dist/components/obsm-list/ObsmList.js +84 -0
  6. package/dist/components/scatterplot/Scatterplot.js +34 -72
  7. package/dist/components/scatterplot/Toolbox.js +78 -45
  8. package/dist/components/var-list/VarList.js +26 -7
  9. package/dist/components/violin/Violin.js +56 -59
  10. package/dist/constants/constants.js +1 -3
  11. package/dist/context/DatasetContext.js +40 -10
  12. package/dist/index.js +7 -0
  13. package/dist/utils/requests.js +50 -2
  14. package/package.json +6 -2
package/dist/components/scatterplot/Scatterplot.js CHANGED
@@ -14,9 +14,9 @@ var _chromaJs = _interopRequireDefault(require("chroma-js"));
14
14
  var _react2 = _interopRequireDefault(require("@deck.gl/react"));
15
15
  var _layers = require("@deck.gl/layers");
16
16
  var _DatasetContext = require("../../context/DatasetContext");
17
- var _constants = require("../../constants/constants");
18
17
  var _map = require("../../helpers/map");
19
18
  var _zarr = require("../../helpers/zarr");
19
+ var _Button = _interopRequireDefault(require("react-bootstrap/Button"));
20
20
  var _layers2 = require("@nebula.gl/layers");
21
21
  var _editModes = require("@nebula.gl/edit-modes");
22
22
  var _editor = require("@nebula.gl/editor");
@@ -35,69 +35,46 @@ window.deck.log.level = 1;
35
35
  function ScatterplotControls() {
36
36
  var dataset = (0, _DatasetContext.useDataset)();
37
37
  var dispatch = (0, _DatasetContext.useDatasetDispatch)();
38
- var _useState = (0, _react.useState)(dataset.embedding),
39
- _useState2 = _slicedToArray(_useState, 2),
40
- active = _useState2[0],
41
- setActive = _useState2[1];
42
- (0, _react.useEffect)(function () {
43
- setActive(dataset.embedding);
44
- }, [dataset.embedding]);
45
- var colormapList = _constants.EMBEDDINGS.map(function (item) {
46
- return /*#__PURE__*/_react.React.createElement(_Dropdown.default.Item, {
47
- key: item,
48
- active: active === item,
49
- onClick: function onClick() {
50
- setActive(item);
51
- dispatch({
52
- type: "embeddingSelected",
53
- embedding: item
54
- });
55
- }
56
- }, item);
57
- });
58
- return /*#__PURE__*/_react.React.createElement(_Dropdown.default, null, /*#__PURE__*/_react.React.createElement(_Dropdown.default.Toggle, {
59
- id: "dropdownEmbedding",
60
- variant: "light"
61
- }, dataset.embedding), /*#__PURE__*/_react.React.createElement(_Dropdown.default.Menu, null, colormapList));
38
+ return /*#__PURE__*/_react.React.createElement(_react.React.Fragment, null);
62
39
  }
63
40
  function Scatterplot(_ref) {
64
41
  var _ref$radius = _ref.radius,
65
42
  radius = _ref$radius === void 0 ? 30 : _ref$radius;
66
43
  var dataset = (0, _DatasetContext.useDataset)();
67
- var _useState3 = (0, _react.useState)({
44
+ var _useState = (0, _react.useState)({
68
45
  type: "FeatureCollection",
69
46
  features: []
70
47
  }),
71
- _useState4 = _slicedToArray(_useState3, 2),
72
- features = _useState4[0],
73
- setFeatures = _useState4[1];
74
- var _useState5 = (0, _react.useState)(function () {
75
- return _editModes.DrawPolygonByDraggingMode;
48
+ _useState2 = _slicedToArray(_useState, 2),
49
+ features = _useState2[0],
50
+ setFeatures = _useState2[1];
51
+ var _useState3 = (0, _react.useState)(function () {
52
+ return _editModes.ViewMode;
76
53
  }),
54
+ _useState4 = _slicedToArray(_useState3, 2),
55
+ mode = _useState4[0],
56
+ setMode = _useState4[1];
57
+ var _useState5 = (0, _react.useState)({}),
77
58
  _useState6 = _slicedToArray(_useState5, 2),
78
- mode = _useState6[0],
79
- setMode = _useState6[1];
80
- var _useState7 = (0, _react.useState)({}),
59
+ modeConfig = _useState6[0],
60
+ setModeConfig = _useState6[1];
61
+ var _useState7 = (0, _react.useState)([]),
81
62
  _useState8 = _slicedToArray(_useState7, 2),
82
- modeConfig = _useState8[0],
83
- setModeConfig = _useState8[1];
63
+ selectedFeatureIndexes = _useState8[0],
64
+ setSelectedFeatureIndexes = _useState8[1];
84
65
  var _useState9 = (0, _react.useState)([]),
85
66
  _useState10 = _slicedToArray(_useState9, 2),
86
- selectedFeatureIndexes = _useState10[0],
87
- setSelectedFeatureIndexes = _useState10[1];
67
+ data = _useState10[0],
68
+ setData = _useState10[1];
88
69
  var _useState11 = (0, _react.useState)([]),
89
70
  _useState12 = _slicedToArray(_useState11, 2),
90
- data = _useState12[0],
91
- setData = _useState12[1];
71
+ position = _useState12[0],
72
+ setPosition = _useState12[1];
92
73
  var _useState13 = (0, _react.useState)([]),
93
74
  _useState14 = _slicedToArray(_useState13, 2),
94
- position = _useState14[0],
95
- setPosition = _useState14[1];
96
- var _useState15 = (0, _react.useState)([]),
97
- _useState16 = _slicedToArray(_useState15, 2),
98
- values = _useState16[0],
99
- setValues = _useState16[1];
100
- var _useState17 = (0, _react.useState)({
75
+ values = _useState14[0],
76
+ setValues = _useState14[1];
77
+ var _useState15 = (0, _react.useState)({
101
78
  longitude: 0,
102
79
  latitude: 0,
103
80
  zoom: 0,
@@ -105,9 +82,9 @@ function Scatterplot(_ref) {
105
82
  pitch: 0,
106
83
  bearing: 0
107
84
  }),
108
- _useState18 = _slicedToArray(_useState17, 2),
109
- viewport = _useState18[0],
110
- setViewport = _useState18[1];
85
+ _useState16 = _slicedToArray(_useState15, 2),
86
+ viewport = _useState16[0],
87
+ setViewport = _useState16[1];
111
88
  (0, _react.useEffect)(function () {
112
89
  setData(function (prevState, props) {
113
90
  var colorScale = _chromaJs.default.scale(["yellow", "008ae5"]).domain([_lodash.default.min(values), _lodash.default.max(values)]);
@@ -123,7 +100,7 @@ function Scatterplot(_ref) {
123
100
  });
124
101
  }, [position, values]);
125
102
  (0, _react.useEffect)(function () {
126
- if (dataset.embedding) {
103
+ if (dataset.selectedObsm) {
127
104
  var helper = new _map.MapHelper();
128
105
  var zarrHelper = new _zarr.ZarrHelper();
129
106
  var fetchObsm = /*#__PURE__*/function () {
@@ -133,7 +110,7 @@ function Scatterplot(_ref) {
133
110
  while (1) switch (_context.prev = _context.next) {
134
111
  case 0:
135
112
  _context.next = 2;
136
- return zarrHelper.open(dataset.url, "obsm/" + dataset.embedding);
113
+ return zarrHelper.open(dataset.url, "obsm/" + dataset.selectedObsm);
137
114
  case 2:
138
115
  z = _context.sent;
139
116
  _context.next = 5;
@@ -164,7 +141,7 @@ function Scatterplot(_ref) {
164
141
  }();
165
142
  fetchObsm().catch(console.error);
166
143
  }
167
- }, [dataset.url, dataset.embedding]);
144
+ }, [dataset.url, dataset.selectedObsm]);
168
145
  (0, _react.useEffect)(function () {
169
146
  if (dataset.selectedVar) {
170
147
  var zarrHelper = new _zarr.ZarrHelper();
@@ -232,27 +209,12 @@ function Scatterplot(_ref) {
232
209
  initialViewState: viewport,
233
210
  controller: true,
234
211
  onClick: onLayerClick
235
- }), /*#__PURE__*/_react.React.createElement(_editor.Toolbox, {
236
- mode: mode,
237
- onSetMode: function onSetMode(m) {
238
- setModeConfig(null);
239
- setMode(m);
240
- },
241
- modeConfig: modeConfig,
242
- onSetModeConfig: setModeConfig,
243
- geoJson: features,
244
- onSetGeoJson: setFeatures,
245
- onImport: setFeatures
246
212
  }), /*#__PURE__*/_react.React.createElement(_Toolbox.Toolbox2, {
247
213
  mode: mode,
248
- onSetMode: function onSetMode(m) {
249
- setModeConfig(null);
250
- setMode(m);
251
- },
214
+ setMode: setMode,
252
215
  modeConfig: modeConfig,
253
- onSetModeConfig: setModeConfig,
254
- geoJson: features,
255
- onSetGeoJson: setFeatures,
256
- onImport: setFeatures
216
+ setModeConfig: setModeConfig,
217
+ features: mode,
218
+ setFeatures: setFeatures
257
219
  })));
258
220
  }
package/dist/components/scatterplot/Toolbox.js CHANGED
@@ -7,62 +7,95 @@ exports.Toolbox2 = Toolbox2;
7
7
  require("bootstrap/dist/css/bootstrap.min.css");
8
8
  var _Dropdown = _interopRequireDefault(require("react-bootstrap/Dropdown"));
9
9
  var _react = require("react");
10
- var _lodash = _interopRequireDefault(require("lodash"));
11
- var _chromaJs = _interopRequireDefault(require("chroma-js"));
12
- var _react2 = _interopRequireDefault(require("@deck.gl/react"));
13
- var _layers = require("@deck.gl/layers");
14
10
  var _DatasetContext = require("../../context/DatasetContext");
15
- var _constants = require("../../constants/constants");
16
- var _map = require("../../helpers/map");
17
- var _zarr = require("../../helpers/zarr");
18
- var _layers2 = require("@nebula.gl/layers");
11
+ var _layers = require("@nebula.gl/layers");
19
12
  var _editModes = require("@nebula.gl/edit-modes");
20
- var _editor = require("@nebula.gl/editor");
21
13
  var _Button = _interopRequireDefault(require("react-bootstrap/Button"));
22
14
  var _DropdownButton = _interopRequireDefault(require("react-bootstrap/DropdownButton"));
23
15
  var _ButtonGroup = _interopRequireDefault(require("react-bootstrap/ButtonGroup"));
24
16
  var _reactFontawesome = require("@fortawesome/react-fontawesome");
25
17
  var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
26
18
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
27
- function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
28
- function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
29
- function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
30
- function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
31
- function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
32
- function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
33
- window.deck.log.level = 1;
34
- function Toolbox2() {
35
- var dataset = (0, _DatasetContext.useDataset)();
36
- var dispatch = (0, _DatasetContext.useDatasetDispatch)();
37
- var _useState = (0, _react.useState)(dataset.embedding),
38
- _useState2 = _slicedToArray(_useState, 2),
39
- active = _useState2[0],
40
- setActive = _useState2[1];
41
- (0, _react.useEffect)(function () {
42
- setActive(dataset.embedding);
43
- }, [dataset.embedding]);
19
+ function Toolbox2(_ref) {
20
+ var mode = _ref.mode,
21
+ setMode = _ref.setMode,
22
+ features = _ref.features,
23
+ setFeatures = _ref.setFeatures;
24
+ var onSelect = function onSelect(eventKey, event) {
25
+ console.log(eventKey); // selected event will trigger
26
+ switch (eventKey) {
27
+ case "DrawPolygonMode":
28
+ setMode(function () {
29
+ return _editModes.DrawPolygonMode;
30
+ });
31
+ break;
32
+ case "DrawLineStringMode":
33
+ setMode(function () {
34
+ return _editModes.DrawLineStringMode;
35
+ });
36
+ break;
37
+ case "DrawPolygonByDraggingMode":
38
+ setMode(function () {
39
+ return _editModes.DrawPolygonByDraggingMode;
40
+ });
41
+ break;
42
+ case "DrawRectangleMode":
43
+ setMode(function () {
44
+ return _editModes.DrawRectangleMode;
45
+ });
46
+ break;
47
+ case "ModifyMode":
48
+ setMode(function () {
49
+ return _editModes.ModifyMode;
50
+ });
51
+ break;
52
+ default:
53
+ setMode(function () {
54
+ return _editModes.ViewMode;
55
+ });
56
+ }
57
+ };
58
+ var deleteFeatures = function deleteFeatures(eventKey, event) {
59
+ console.log(eventKey); // selected event will trigger
60
+ setFeatures({
61
+ type: "FeatureCollection",
62
+ features: []
63
+ });
64
+ };
65
+ var undo = function undo(eventKey, event) {
66
+ console.log(features); // selected event will trigger
67
+ // setFeatures({
68
+ // type: "FeatureCollection",
69
+ // features: [],
70
+ // });
71
+ };
72
+
44
73
  return /*#__PURE__*/_react.React.createElement("div", {
45
74
  className: "cherita-toolbox"
46
- }, /*#__PURE__*/_react.React.createElement(_Dropdown.default, null, /*#__PURE__*/_react.React.createElement(_Dropdown.default.Toggle, {
47
- variant: "success",
48
- id: "dropdown-basic"
49
- }, "Dropdown Button"), /*#__PURE__*/_react.React.createElement(_Dropdown.default.Menu, null, /*#__PURE__*/_react.React.createElement(_Dropdown.default.Item, {
50
- href: "#/action-1"
51
- }, "Action"), /*#__PURE__*/_react.React.createElement(_Dropdown.default.Item, {
52
- href: "#/action-2"
53
- }, "Another action"), /*#__PURE__*/_react.React.createElement(_Dropdown.default.Item, {
54
- href: "#/action-3"
55
- }, "Something else"))), /*#__PURE__*/_react.React.createElement(_ButtonGroup.default, null, /*#__PURE__*/_react.React.createElement(_Button.default, null, /*#__PURE__*/_react.React.createElement(_reactFontawesome.FontAwesomeIcon, {
56
- icon: _freeSolidSvgIcons.faArrowPointer
57
- }), " Mode"), /*#__PURE__*/_react.React.createElement(_Button.default, null, "2"), /*#__PURE__*/_react.React.createElement(_DropdownButton.default, {
75
+ }, /*#__PURE__*/_react.React.createElement(_ButtonGroup.default, null, /*#__PURE__*/_react.React.createElement(_DropdownButton.default, {
58
76
  as: _ButtonGroup.default,
59
- title: "test" + /*#__PURE__*/_react.React.createElement(_reactFontawesome.FontAwesomeIcon, {
77
+ title: /*#__PURE__*/_react.React.createElement(_react.React.Fragment, null, /*#__PURE__*/_react.React.createElement(_reactFontawesome.FontAwesomeIcon, {
60
78
  icon: _freeSolidSvgIcons.faArrowPointer
61
- }),
62
- id: "bg-nested-dropdown"
79
+ }), " Mode"),
80
+ id: "bg-nested-dropdown",
81
+ onSelect: onSelect
63
82
  }, /*#__PURE__*/_react.React.createElement(_Dropdown.default.Item, {
64
- eventKey: "1"
65
- }, "Dropdown link"), /*#__PURE__*/_react.React.createElement(_Dropdown.default.Item, {
66
- eventKey: "2"
67
- }, "Dropdown link"))));
83
+ eventKey: "DrawPolygonMode"
84
+ }, "DrawPolygonMode"), /*#__PURE__*/_react.React.createElement(_Dropdown.default.Item, {
85
+ eventKey: "DrawLineStringMode"
86
+ }, "DrawLineStringMode"), /*#__PURE__*/_react.React.createElement(_Dropdown.default.Item, {
87
+ eventKey: "DrawPolygonByDraggingMode"
88
+ }, "DrawPolygonByDraggingMode"), /*#__PURE__*/_react.React.createElement(_Dropdown.default.Item, {
89
+ eventKey: "DrawRectangleMode"
90
+ }, "DrawRectangleMode"), /*#__PURE__*/_react.React.createElement(_Dropdown.default.Item, {
91
+ eventKey: "ModifyMode"
92
+ }, "ModifyMode"), /*#__PURE__*/_react.React.createElement(_Dropdown.default.Item, {
93
+ eventKey: "ViewMode"
94
+ }, "ViewMode")), /*#__PURE__*/_react.React.createElement(_Button.default, {
95
+ variant: "primary",
96
+ onClick: deleteFeatures
97
+ }, "Delete"), /*#__PURE__*/_react.React.createElement(_Button.default, {
98
+ variant: "primary",
99
+ onClick: undo
100
+ }, "Undo")));
68
101
  }
package/dist/components/var-list/VarList.js CHANGED
@@ -12,6 +12,11 @@ var _DatasetContext = require("../../context/DatasetContext");
12
12
  var _constants = require("../../constants/constants");
13
13
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
14
14
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
15
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
16
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
17
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
18
+ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
19
+ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
15
20
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
16
21
  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
17
22
  function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -21,6 +26,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
21
26
  function VarNamesList(_ref) {
22
27
  var _ref$mode = _ref.mode,
23
28
  mode = _ref$mode === void 0 ? _constants.SELECTION_MODES.SINGLE : _ref$mode;
29
+ var ENDPOINT = "var/names";
24
30
  var dataset = (0, _DatasetContext.useDataset)();
25
31
  var dispatch = (0, _DatasetContext.useDatasetDispatch)();
26
32
  var _useState = (0, _react.useState)([]),
@@ -31,17 +37,30 @@ function VarNamesList(_ref) {
31
37
  _useState4 = _slicedToArray(_useState3, 2),
32
38
  active = _useState4[0],
33
39
  setActive = _useState4[1];
34
- (0, _react.useEffect)(function () {
35
- (0, _requests.fetchData)("var/names", {
40
+ var _useState5 = (0, _react.useState)({
36
41
  url: dataset.url
37
- }).then(function (data) {
38
- setVarNames(data);
39
- }).catch(function (response) {
40
- response.json().then(function (json) {
41
- console.log(json.message);
42
+ }),
43
+ _useState6 = _slicedToArray(_useState5, 2),
44
+ params = _useState6[0],
45
+ setParams = _useState6[1];
46
+ (0, _react.useEffect)(function () {
47
+ setParams(function (p) {
48
+ return _objectSpread(_objectSpread({}, p), {}, {
49
+ url: dataset.url
42
50
  });
43
51
  });
44
52
  }, [dataset.url]);
53
+ var _useFetch = (0, _requests.useFetch)(ENDPOINT, params, {
54
+ refetchOnMount: false
55
+ }),
56
+ fetchedData = _useFetch.fetchedData,
57
+ isPending = _useFetch.isPending,
58
+ serverError = _useFetch.serverError;
59
+ (0, _react.useEffect)(function () {
60
+ if (!isPending && !serverError) {
61
+ setVarNames(fetchedData);
62
+ }
63
+ }, [fetchedData, isPending, serverError]);
45
64
  (0, _react.useEffect)(function () {
46
65
  if (mode === _constants.SELECTION_MODES.SINGLE && dataset.selectedVar) {
47
66
  setActive(dataset.selectedVar.matrix_index);
package/dist/components/violin/Violin.js CHANGED
@@ -10,7 +10,6 @@ require("bootstrap/dist/css/bootstrap.min.css");
10
10
  var _Dropdown = _interopRequireDefault(require("react-bootstrap/Dropdown"));
11
11
  var _react = _interopRequireWildcard(require("react"));
12
12
  var _reactPlotly = _interopRequireDefault(require("react-plotly.js"));
13
- var _lodash = _interopRequireDefault(require("lodash"));
14
13
  var _DatasetContext = require("../../context/DatasetContext");
15
14
  var _constants = require("../../constants/constants");
16
15
  var _reactBootstrap = require("react-bootstrap");
@@ -18,6 +17,11 @@ var _requests = require("../../utils/requests");
18
17
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
19
18
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
20
19
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
20
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
21
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
22
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
23
+ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
24
+ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
21
25
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
22
26
  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
23
27
  function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -58,6 +62,7 @@ function ViolinControls() {
58
62
  function Violin(_ref) {
59
63
  var _ref$mode = _ref.mode,
60
64
  mode = _ref$mode === void 0 ? _constants.VIOLIN_MODES.MULTIKEY : _ref$mode;
65
+ var ENDPOINT = "violin";
61
66
  var dataset = (0, _DatasetContext.useDataset)();
62
67
  var _useState3 = (0, _react.useState)([]),
63
68
  _useState4 = _slicedToArray(_useState3, 2),
@@ -71,68 +76,60 @@ function Violin(_ref) {
71
76
  _useState8 = _slicedToArray(_useState7, 2),
72
77
  hasSelections = _useState8[0],
73
78
  setHasSelections = _useState8[1];
79
+ var _useState9 = (0, _react.useState)({
80
+ url: dataset.url,
81
+ keys: [],
82
+ scale: dataset.controls.standardScale
83
+ }),
84
+ _useState10 = _slicedToArray(_useState9, 2),
85
+ params = _useState10[0],
86
+ setParams = _useState10[1];
74
87
  // @TODO: set default scale
75
88
 
76
- var update = (0, _react.useMemo)(function () {
77
- var func = function func(abortController) {
78
- if (mode === _constants.VIOLIN_MODES.MULTIKEY) {
79
- if (dataset.selectedMultiVar.length) {
80
- setHasSelections(true);
81
- (0, _requests.fetchData)("violin", {
82
- url: dataset.url,
83
- keys: dataset.selectedMultiVar.map(function (i) {
84
- return i.name;
85
- }),
86
- scale: dataset.controls.standardScale
87
- }, abortController.signal).then(function (data) {
88
- setData(data.data);
89
- setLayout(data.layout);
90
- }).catch(function (response) {
91
- if (response.name !== "AbortError") {
92
- response.json().then(function (json) {
93
- console.log(json.message);
94
- });
95
- }
96
- });
97
- } else {
98
- setHasSelections(false);
99
- }
100
- } else if (mode === _constants.VIOLIN_MODES.GROUPBY) {
101
- if (dataset.selectedObs && dataset.selectedVar) {
102
- setHasSelections(true);
103
- (0, _requests.fetchData)("violin", {
104
- url: dataset.url,
105
- keys: dataset.selectedVar.name,
106
- selectedObs: dataset.selectedObs,
107
- scale: dataset.controls.standardScale
108
- }).then(function (data) {
109
- setData(data.data);
110
- setLayout(data.layout);
111
- }).catch(function (response) {
112
- if (response.name !== "AbortError") {
113
- response.json().then(function (json) {
114
- console.log(json.message);
115
- });
116
- }
117
- });
118
- } else {
119
- setHasSelections(false);
120
- }
89
+ (0, _react.useEffect)(function () {
90
+ if (mode === _constants.VIOLIN_MODES.MULTIKEY) {
91
+ if (dataset.selectedMultiVar.length) {
92
+ setHasSelections(true);
93
+ } else {
94
+ setHasSelections(false);
95
+ }
96
+ setParams(function (p) {
97
+ return _objectSpread(_objectSpread({}, p), {}, {
98
+ url: dataset.url,
99
+ keys: dataset.selectedMultiVar.map(function (i) {
100
+ return i.name;
101
+ }),
102
+ scale: dataset.controls.standardScale
103
+ });
104
+ });
105
+ } else if (mode === _constants.VIOLIN_MODES.GROUPBY) {
106
+ if (dataset.selectedObs && dataset.selectedVar) {
107
+ setHasSelections(true);
108
+ } else {
109
+ setHasSelections(false);
121
110
  }
122
- };
123
- // delay invoking the fetch function to avoid firing requests
124
- // while dependencies might still be getting updated by the user
125
- return _lodash.default.debounce(func, 500);
126
- }, [mode, dataset.url, dataset.selectedObs, dataset.selectedVar, dataset.selectedMultiVar, dataset.controls.standardScale]);
111
+ setParams(function (p) {
112
+ return _objectSpread(_objectSpread({}, p), {}, {
113
+ url: dataset.url,
114
+ keys: dataset.selectedVar.name,
115
+ selectedObs: dataset.selectedObs,
116
+ scale: dataset.controls.standardScale
117
+ });
118
+ });
119
+ }
120
+ }, [dataset.controls.standardScale, dataset.selectedMultiVar, dataset.selectedObs, dataset.selectedVar, dataset.url, mode]);
121
+ var _useDebouncedFetch = (0, _requests.useDebouncedFetch)(ENDPOINT, params, 500, {
122
+ enabled: mode === _constants.VIOLIN_MODES.MULTIKEY && !!params.keys || mode === _constants.VIOLIN_MODES.GROUPBY && !!params.keys.length && !!params.selectedObs
123
+ }),
124
+ fetchedData = _useDebouncedFetch.fetchedData,
125
+ isPending = _useDebouncedFetch.isPending,
126
+ serverError = _useDebouncedFetch.serverError;
127
127
  (0, _react.useEffect)(function () {
128
- // create an abort controller to pass into each fetch function
129
- // to abort previous incompleted requests when a new request is fired
130
- var abortController = new AbortController();
131
- update(abortController);
132
- return function () {
133
- abortController.abort();
134
- };
135
- }, [update]);
128
+ if (hasSelections && !isPending && !serverError) {
129
+ setData(fetchedData.data);
130
+ setLayout(fetchedData.layout);
131
+ }
132
+ }, [fetchedData, hasSelections, isPending, serverError]);
136
133
  if (hasSelections) {
137
134
  return /*#__PURE__*/_react.default.createElement("div", {
138
135
  className: "cherita-violin"
package/dist/constants/constants.js CHANGED
@@ -3,11 +3,9 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.VIOLIN_MODES = exports.VIOLINPLOT_STANDARDSCALES = exports.SELECTION_MODES = exports.PLOTLY_COLORSCALES = exports.MATRIXPLOT_STANDARDSCALES = exports.EMBEDDINGS = exports.DOTPLOT_STANDARDSCALES = void 0;
6
+ exports.VIOLIN_MODES = exports.VIOLINPLOT_STANDARDSCALES = exports.SELECTION_MODES = exports.PLOTLY_COLORSCALES = exports.MATRIXPLOT_STANDARDSCALES = exports.DOTPLOT_STANDARDSCALES = void 0;
7
7
  var PLOTLY_COLORSCALES = ["Blackbody", "Bluered", "Blues", "Cividis", "Earth", "Electric", "Greens", "Greys", "Hot", "Jet", "Picnic", "Portland", "Rainbow", "RdBu", "Reds", "Viridis", "YlGnBu", "YlOrRd"];
8
8
  exports.PLOTLY_COLORSCALES = PLOTLY_COLORSCALES;
9
- var EMBEDDINGS = ["X_umap", "X_tsne"];
10
- exports.EMBEDDINGS = EMBEDDINGS;
11
9
  var SELECTION_MODES = {
12
10
  SINGLE: "single",
13
11
  MULTIPLE: "multiple"
package/dist/context/DatasetContext.js CHANGED
@@ -9,6 +9,9 @@ exports.DatasetProvider = DatasetProvider;
9
9
  exports.useDataset = useDataset;
10
10
  exports.useDatasetDispatch = useDatasetDispatch;
11
11
  var _react = _interopRequireWildcard(require("react"));
12
+ var _reactQuery = require("@tanstack/react-query");
13
+ var _reactQueryPersistClient = require("@tanstack/react-query-persist-client");
14
+ var _querySyncStoragePersister = require("@tanstack/query-sync-storage-persister");
12
15
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
13
16
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
14
17
  function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
@@ -30,12 +33,36 @@ var DatasetContext = /*#__PURE__*/(0, _react.createContext)(null);
30
33
  exports.DatasetContext = DatasetContext;
31
34
  var DatasetDispatchContext = /*#__PURE__*/(0, _react.createContext)(null);
32
35
  exports.DatasetDispatchContext = DatasetDispatchContext;
33
- function DatasetProvider(_ref) {
34
- var dataset_url = _ref.dataset_url,
35
- children = _ref.children;
36
+ var queryClient = new _reactQuery.QueryClient({
37
+ defaultOptions: {
38
+ queries: {
39
+ gcTime: 1000 * 60 * 60 * 24
40
+ }
41
+ }
42
+ });
43
+ var persistKeys = ["obs/cols", "var/names", "obsm/keys"];
44
+ var persistOptions = {
45
+ persister: (0, _querySyncStoragePersister.createSyncStoragePersister)({
46
+ storage: window.localStorage
47
+ }),
48
+ dehydrateOptions: {
49
+ shouldDehydrateQuery: function shouldDehydrateQuery(_ref) {
50
+ var queryKey = _ref.queryKey,
51
+ state = _ref.state;
52
+ if (state.status === "success") {
53
+ return persistKeys.includes(queryKey === null || queryKey === void 0 ? void 0 : queryKey[0]);
54
+ }
55
+ return false;
56
+ }
57
+ }
58
+ };
59
+ function DatasetProvider(_ref2) {
60
+ var dataset_url = _ref2.dataset_url,
61
+ children = _ref2.children;
36
62
  var _useReducer = (0, _react.useReducer)(datasetReducer, {
37
63
  url: dataset_url,
38
64
  selectedObs: null,
65
+ selectedObsm: null,
39
66
  selectedVar: null,
40
67
  selectedMultiObs: [],
41
68
  selectedMultiVar: [],
@@ -59,7 +86,10 @@ function DatasetProvider(_ref) {
59
86
  value: dataset
60
87
  }, /*#__PURE__*/_react.default.createElement(DatasetDispatchContext.Provider, {
61
88
  value: dispatch
62
- }, children));
89
+ }, /*#__PURE__*/_react.default.createElement(_reactQueryPersistClient.PersistQueryClientProvider, {
90
+ client: queryClient,
91
+ persistOptions: persistOptions
92
+ }, children)));
63
93
  }
64
94
  function useDataset() {
65
95
  return (0, _react.useContext)(DatasetContext);
@@ -79,6 +109,12 @@ function datasetReducer(dataset, action) {
79
109
  selectedObs: action.obs
80
110
  });
81
111
  }
112
+ case "obsmSelected":
113
+ {
114
+ return _objectSpread(_objectSpread({}, dataset), {}, {
115
+ selectedObsm: action.obsm
116
+ });
117
+ }
82
118
  case "varSelected":
83
119
  {
84
120
  return _objectSpread(_objectSpread({}, dataset), {}, {
@@ -99,12 +135,6 @@ function datasetReducer(dataset, action) {
99
135
  })
100
136
  });
101
137
  }
102
- case "embeddingSelected":
103
- {
104
- return _objectSpread(_objectSpread({}, dataset), {}, {
105
- embedding: action.embedding
106
- });
107
- }
108
138
  case "set.controls.colorScale":
109
139
  {
110
140
  return _objectSpread(_objectSpread({}, dataset), {}, {
package/dist/index.js CHANGED
@@ -51,6 +51,12 @@ Object.defineProperty(exports, "ObsColsList", {
51
51
  return _ObsList.ObsColsList;
52
52
  }
53
53
  });
54
+ Object.defineProperty(exports, "ObsmKeysList", {
55
+ enumerable: true,
56
+ get: function get() {
57
+ return _ObsmList.ObsmKeysList;
58
+ }
59
+ });
54
60
  Object.defineProperty(exports, "PLOTLY_COLORSCALES", {
55
61
  enumerable: true,
56
62
  get: function get() {
@@ -100,6 +106,7 @@ Object.defineProperty(exports, "ViolinControls", {
100
106
  }
101
107
  });
102
108
  var _ObsList = require("./components/obs-list/ObsList");
109
+ var _ObsmList = require("./components/obsm-list/ObsmList");
103
110
  var _VarList = require("./components/var-list/VarList");
104
111
  var _Heatmap = require("./components/heatmap/Heatmap");
105
112
  var _Dotplot = require("./components/dotplot/Dotplot");