@haniffalab/cherita-react 0.2.0-dev.2025-01-22.f523ac5e → 0.2.0-dev.2025-01-28.4d5ab0a4

package/dist/components/obs-list/ObsToolbar.js

@@ -11,65 +11,54 @@ var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
-var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function ObsToolbar(_ref) {
-  let {
-    item,
-    showToggleAllObs = true,
-    showLabel = true,
-    showSlice = true,
-    showColor = true,
-    onToggleAllObs,
-    onToggleLabel,
-    onToggleSlice,
-    onToggleColor
-  } = _ref;
+function ObsToolbar({
+  item,
+  showToggleAllObs = true,
+  showLabel = true,
+  showSlice = true,
+  showColor = true,
+  onToggleAllObs,
+  onToggleLabel,
+  onToggleSlice,
+  onToggleColor
+}) {
   const dataset = (0, _DatasetContext.useDataset)();
   const allToggledOn = !item.omit.length;
   const inLabelObs = _lodash.default.some(dataset.labelObs, i => i.name === item.name);
   const inSliceObs = dataset.sliceBy.obs && dataset.selectedObs?.name === item.name;
   const isColorEncoding = dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && dataset.selectedObs?.name === item.name;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: "d-flex",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "flex-grow-1",
-      children: showToggleAllObs && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Check, {
-        // prettier-ignore
-        type: "switch",
-        id: "custom-switch",
-        label: "Toggle all",
-        checked: allToggledOn,
-        onChange: onToggleAllObs
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.ButtonGroup, {
-        children: [showLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
-          variant: inLabelObs ? "primary" : "outline-primary",
-          size: "sm",
-          onClick: onToggleLabel,
-          title: "Add to tooltip",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-            icon: _freeSolidSvgIcons.faFont
-          })
-        }), showSlice && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
-          variant: inSliceObs ? "primary" : "outline-primary",
-          size: "sm",
-          onClick: onToggleSlice,
-          title: "Slice to selected",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-            icon: _freeSolidSvgIcons.faEye
-          })
-        }), showColor && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
-          variant: isColorEncoding ? "primary" : "outline-primary",
-          size: "sm",
-          onClick: onToggleColor,
-          title: "Set as color encoding",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-            icon: _freeSolidSvgIcons.faDroplet
-          })
-        })]
-      })
-    })]
-  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex-grow-1"
+  }, showToggleAllObs && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Check, {
+    // prettier-ignore
+    type: "switch",
+    id: "custom-switch",
+    label: "Toggle all",
+    checked: allToggledOn,
+    onChange: onToggleAllObs
+  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonGroup, null, showLabel && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    variant: inLabelObs ? "primary" : "outline-primary",
+    size: "sm",
+    onClick: onToggleLabel,
+    title: "Add to tooltip"
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faFont
+  })), showSlice && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    variant: inSliceObs ? "primary" : "outline-primary",
+    size: "sm",
+    onClick: onToggleSlice,
+    title: "Slice to selected"
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faEye
+  })), showColor && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    variant: isColorEncoding ? "primary" : "outline-primary",
+    size: "sm",
+    onClick: onToggleColor,
+    title: "Set as color encoding"
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faDroplet
+  })))));
 }

package/dist/components/obsm-list/ObsmList.js

@@ -9,7 +9,6 @@ var _reactBootstrap = require("react-bootstrap");
 var _DatasetContext = require("../../context/DatasetContext");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
-var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ObsmKeysList() {
@@ -47,42 +46,35 @@ function ObsmKeysList() {
     }
   }, [dataset.selectedObsm]);
   const obsmList = obsmKeysList.map(item => {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
+    return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
+      key: item,
       className: `custom ${active === item && "active"}`,
       onClick: () => {
         dispatch({
           type: "select.obsm",
           obsm: item
         });
-      },
-      children: item
+      }
     }, item);
   });
   if (!serverError) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.DropdownButton, {
-        as: _reactBootstrap.ButtonGroup,
-        title: dataset.selectedObsm || "Select an embedding",
-        variant: dataset.selectedObsm ? "primary" : "outline-primary",
-        id: "bg-nested-dropdown",
-        size: "sm",
-        children: obsmList
-      })]
-    });
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement(_reactBootstrap.DropdownButton, {
+      as: _reactBootstrap.ButtonGroup,
+      title: dataset.selectedObsm || "Select an embedding",
+      variant: dataset.selectedObsm ? "primary" : "outline-primary",
+      id: "bg-nested-dropdown",
+      size: "sm"
+    }, obsmList));
   } else {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.OverlayTrigger, {
+    return /*#__PURE__*/_react.default.createElement(_reactBootstrap.OverlayTrigger, {
       placement: "top",
       delay: {
         show: 100,
         hide: 200
       },
-      overlay: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Tooltip, {
-        children: serverError.message
-      }),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
-        variant: "danger",
-        children: "Error"
-      })
-    });
+      overlay: /*#__PURE__*/_react.default.createElement(_reactBootstrap.Tooltip, null, serverError.message)
+    }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+      variant: "danger"
+    }, "Error"));
   }
 }

package/dist/components/offcanvas/index.js

@@ -14,89 +14,59 @@ var _ObsList = require("../obs-list/ObsList");
 var _ObsmList = require("../obsm-list/ObsmList");
 var _SearchBar = require("../search-bar/SearchBar");
 var _VarList = require("../var-list/VarList");
-var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function OffcanvasObs(_ref) {
-  let {
-    show,
-    handleClose,
-    ...props
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Offcanvas.default, {
+function OffcanvasObs({
+  show,
+  handleClose,
+  ...props
+}) {
+  return /*#__PURE__*/_react.React.createElement(_Offcanvas.default, {
     show: show,
     onHide: handleClose,
     scroll: true,
-    backdrop: false,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Header, {
-      closeButton: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Title, {
-        children: "Categories"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Body, {
-      className: "p-0",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ObsList.ObsColsList, {
-        ...props
-      })
-    })]
-  });
+    backdrop: false
+  }, /*#__PURE__*/_react.React.createElement(_Offcanvas.default.Header, {
+    closeButton: true
+  }, /*#__PURE__*/_react.React.createElement(_Offcanvas.default.Title, null, "Categories")), /*#__PURE__*/_react.React.createElement(_Offcanvas.default.Body, {
+    className: "p-0"
+  }, /*#__PURE__*/_react.React.createElement(_ObsList.ObsColsList, props)));
 }
-function OffcanvasObsm(_ref2) {
-  let {
-    show,
-    handleClose
-  } = _ref2;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Offcanvas.default, {
+function OffcanvasObsm({
+  show,
+  handleClose
+}) {
+  return /*#__PURE__*/_react.React.createElement(_Offcanvas.default, {
     show: show,
-    onHide: handleClose,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Header, {
-      closeButton: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Title, {
-        children: "Embedding space"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Body, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ObsmList.ObsmKeysList, {})
-    })]
-  });
+    onHide: handleClose
+  }, /*#__PURE__*/_react.React.createElement(_Offcanvas.default.Header, {
+    closeButton: true
+  }, /*#__PURE__*/_react.React.createElement(_Offcanvas.default.Title, null, "Embedding space")), /*#__PURE__*/_react.React.createElement(_Offcanvas.default.Body, null, /*#__PURE__*/_react.React.createElement(_ObsmList.ObsmKeysList, null)));
 }
-function OffcanvasVars(_ref3) {
-  let {
-    show,
-    handleClose,
-    mode = _constants.SELECTION_MODES.MULTIPLE
-  } = _ref3;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Offcanvas.default, {
+function OffcanvasVars({
+  show,
+  handleClose,
+  mode = _constants.SELECTION_MODES.MULTIPLE
+}) {
+  return /*#__PURE__*/_react.React.createElement(_Offcanvas.default, {
     show: show,
-    onHide: handleClose,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Header, {
-      closeButton: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Title, {
-        children: "Features"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Offcanvas.default.Body, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchBar.SearchBar, {
-        searchDiseases: true
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VarList.VarNamesList, {
-        mode: mode
-      })]
-    })]
-  });
+    onHide: handleClose
+  }, /*#__PURE__*/_react.React.createElement(_Offcanvas.default.Header, {
+    closeButton: true
+  }, /*#__PURE__*/_react.React.createElement(_Offcanvas.default.Title, null, "Features")), /*#__PURE__*/_react.React.createElement(_Offcanvas.default.Body, null, /*#__PURE__*/_react.React.createElement(_SearchBar.SearchBar, {
+    searchDiseases: true
+  }), /*#__PURE__*/_react.React.createElement(_VarList.VarNamesList, {
+    mode: mode
+  })));
 }
-function OffcanvasControls(_ref4) {
-  let {
-    show,
-    handleClose,
-    Controls
-  } = _ref4;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Offcanvas.default, {
+function OffcanvasControls({
+  show,
+  handleClose,
+  Controls
+}) {
+  return /*#__PURE__*/_react.React.createElement(_Offcanvas.default, {
     show: show,
-    onHide: handleClose,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Header, {
-      closeButton: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Title, {
-        children: "Controls"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Body, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Controls, {})
-    })]
-  });
+    onHide: handleClose
+  }, /*#__PURE__*/_react.React.createElement(_Offcanvas.default.Header, {
+    closeButton: true
+  }, /*#__PURE__*/_react.React.createElement(_Offcanvas.default.Title, null, "Controls")), /*#__PURE__*/_react.React.createElement(_Offcanvas.default.Body, null, /*#__PURE__*/_react.React.createElement(Controls, null)));
 }

package/dist/components/pseudospatial/Pseudospatial.js

@@ -18,7 +18,6 @@ var _ImageViewer = require("../../utils/ImageViewer");
 var _Legend = require("../../utils/Legend");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
-var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -75,11 +74,10 @@ function usePseudospatialData(plotType) {
     enabled: !!plotType && !!dataset.pseudospatial.maskSet
   });
 }
-function Pseudospatial(_ref) {
-  let {
-    showLegend = true,
-    sharedScaleRange = false
-  } = _ref;
+function Pseudospatial({
+  showLegend = true,
+  sharedScaleRange = false
+}) {
   const dataset = (0, _DatasetContext.useDataset)();
   const [data, setData] = (0, _react.useState)([]);
   const [layout, setLayout] = (0, _react.useState)({});
@@ -178,33 +176,27 @@ function Pseudospatial(_ref) {
   }, [dataset.controls.range, dataset.controls.valueMax, dataset.controls.valueMin, dataset.controls.valueRange, getColor, sharedScaleRange]);
   const hasSelections = !!plotType && !!dataset.pseudospatial.maskSet;
   if (!serverError) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "cherita-pseudospatial position-relative",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PseudospatialToolbar.PseudospatialToolbar, {
-        plotType: plotType
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [hasSelections && isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingSpinner, {}), hasSelections && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactPlotly.default, {
-          data: data,
-          layout: layout,
-          useResizeHandler: true,
-          className: "cherita-pseudospatial-plot",
-          config: {
-            displaylogo: false
-          }
-        }), hasSelections && showLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Legend.Legend, {
-          min: layout?.coloraxis?.cmin,
-          max: layout?.coloraxis?.cmax,
-          addText: plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.GENE ? " - Mean expression" : plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL ? " - %" : plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.CONTINUOUS ? " - Mean value" : ""
-        })]
-      })]
-    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "cherita-pseudospatial position-relative"
+    }, /*#__PURE__*/_react.default.createElement(_PseudospatialToolbar.PseudospatialToolbar, {
+      plotType: plotType
+    }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, hasSelections && isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), hasSelections && /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
+      data: data,
+      layout: layout,
+      useResizeHandler: true,
+      className: "cherita-pseudospatial-plot",
+      config: {
+        displaylogo: false
+      }
+    }), hasSelections && showLegend && /*#__PURE__*/_react.default.createElement(_Legend.Legend, {
+      min: layout?.coloraxis?.cmin,
+      max: layout?.coloraxis?.cmax,
+      addText: plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.GENE ? " - Mean expression" : plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL ? " - %" : plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.CONTINUOUS ? " - Mean value" : ""
+    })));
   } else {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
-        variant: "danger",
-        children: serverError.message
-      })
-    });
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
+      variant: "danger"
+    }, serverError.message));
   }
 }
 
@@ -212,11 +204,11 @@ function Pseudospatial(_ref) {
 function PseudospatialImage() {
   const dataset = (0, _DatasetContext.useDataset)();
   if (dataset.imageUrl) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageViewer.ImageViewer, {
+    return /*#__PURE__*/_react.default.createElement(_ImageViewer.ImageViewer, {
       src: dataset.imageUrl,
       alt: "Pseudospatial reference image"
     });
   } else {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
   }
 }

package/dist/components/pseudospatial/PseudospatialControls.js

@@ -5,8 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PseudospatialControls = PseudospatialControls;
 var _react = _interopRequireDefault(require("react"));
-var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function PseudospatialControls() {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
 }

package/dist/components/pseudospatial/PseudospatialToolbar.js

@@ -10,34 +10,28 @@ var _reactBootstrap = require("react-bootstrap");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
 var _requests = require("../../utils/requests");
-var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function CategoricalMode() {
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
-  const modeList = _lodash.default.map(_constants.PSEUDOSPATIAL_CATEGORICAL_MODES, (m, key) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
+  const modeList = _lodash.default.map(_constants.PSEUDOSPATIAL_CATEGORICAL_MODES, (m, key) => /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
+    key: key,
     active: dataset.pseudospatial.categoricalMode === m,
     onClick: () => {
       dispatch({
         type: "set.pseudospatial.categoricalMode",
         categoricalMode: m.value
       });
-    },
-    children: _lodash.default.capitalize(m.name)
-  }, key));
+    }
+  }, _lodash.default.capitalize(m.name)));
   const mode = _lodash.default.find(_constants.PSEUDOSPATIAL_CATEGORICAL_MODES, {
     value: dataset.pseudospatial.categoricalMode
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Dropdown, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Toggle, {
-      variant: "light",
-      children: _lodash.default.capitalize(mode.name)
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Menu, {
-      children: modeList
-    })]
-  });
+  return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Toggle, {
+    variant: "light"
+  }, _lodash.default.capitalize(mode.name)), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, null, modeList));
 }
 function MaskSet() {
   const ENDPOINT = "masks";
@@ -67,16 +61,16 @@ function MaskSet() {
       setMaskSets(fetchedData);
     }
   }, [fetchedData, isPending, serverError]);
-  const maskSetList = _lodash.default.map(maskSets, (ms, key) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
+  const maskSetList = _lodash.default.map(maskSets, (ms, key) => /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
+    key: key,
     active: dataset.pseudospatial.maskSet === key,
     onClick: () => {
       dispatch({
         type: "set.pseudospatial.maskSet",
         maskSet: key
       });
-    },
-    children: _lodash.default.capitalize(key)
-  }, key));
+    }
+  }, _lodash.default.capitalize(key)));
   const handleMaskChange = mask => {
     let newMasks = dataset.pseudospatial.maskValues || maskSets?.[dataset.pseudospatial?.maskSet];
     newMasks = newMasks.includes(mask) ? newMasks.filter(m => m !== mask) : [...newMasks, mask];
@@ -101,57 +95,35 @@ function MaskSet() {
       });
     }
   };
-  const masksList = _lodash.default.map(maskSets?.[dataset.pseudospatial?.maskSet], mask => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.ItemText, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Check, {
-      type: "checkbox",
-      label: mask,
-      checked: !dataset.pseudospatial.maskValues || dataset.pseudospatial.maskValues.includes(mask),
-      onChange: () => handleMaskChange(mask)
-    })
-  }, mask));
+  const masksList = _lodash.default.map(maskSets?.[dataset.pseudospatial?.maskSet], mask => /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.ItemText, {
+    key: mask
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Check, {
+    type: "checkbox",
+    label: mask,
+    checked: !dataset.pseudospatial.maskValues || dataset.pseudospatial.maskValues.includes(mask),
+    onChange: () => handleMaskChange(mask)
+  })));
   const nMasks = dataset.pseudospatial.maskValues ? dataset.pseudospatial.maskValues?.length : maskSets?.[dataset.pseudospatial?.maskSet]?.length || "No";
   const toggleAllChecked = !dataset.pseudospatial.maskValues || dataset.pseudospatial.maskValues?.length === maskSets?.[dataset.pseudospatial?.maskSet]?.length;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Dropdown, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Toggle, {
-        variant: "light",
-        children: _lodash.default.capitalize(dataset.pseudospatial.maskSet || "Select a mask set")
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Dropdown.Menu, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Header, {
-          children: "Mask set"
-        }), maskSetList]
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Dropdown, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Dropdown.Toggle, {
-        variant: "light",
-        children: [nMasks, " masks selected"]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Dropdown.Menu, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Header, {
-          children: "Masks"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.ItemText, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Check, {
-            type: "checkbox",
-            label: "Toggle all",
-            checked: toggleAllChecked,
-            onChange: toggleMasks
-          })
-        }, "toggle-all"), masksList]
-      })]
-    })]
-  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Toggle, {
+    variant: "light"
+  }, _lodash.default.capitalize(dataset.pseudospatial.maskSet || "Select a mask set")), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Header, null, "Mask set"), maskSetList)), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Toggle, {
+    variant: "light"
+  }, nMasks, " masks selected"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Header, null, "Masks"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.ItemText, {
+    key: "toggle-all"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Check, {
+    type: "checkbox",
+    label: "Toggle all",
+    checked: toggleAllChecked,
+    onChange: toggleMasks
+  })), masksList)));
 }
 
 // @TODO: add colormap, colorbar slider
-function PseudospatialToolbar(_ref) {
-  let {
-    plotType
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: "cherita-pseudospatial-toolbar",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ButtonGroup, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MaskSet, {})
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ButtonGroup, {
-      children: plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL && /*#__PURE__*/(0, _jsxRuntime.jsx)(CategoricalMode, {})
-    })]
-  });
+function PseudospatialToolbar({
+  plotType
+}) {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "cherita-pseudospatial-toolbar"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(MaskSet, null)), /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonGroup, null, plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL && /*#__PURE__*/_react.default.createElement(CategoricalMode, null)));
 }