@haniffalab/cherita-react 1.4.1 → 1.4.2-dev.2025-10-29.81a6b906

package/dist/cjs/components/scatterplot/ScatterplotControls.js

@@ -4,21 +4,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ScatterplotControls = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _material = require("@mui/material");
 var _reactBootstrap = require("react-bootstrap");
 var _constants = require("../../constants/constants");
+var _FilterContext = require("../../context/FilterContext");
 var _SettingsContext = require("../../context/SettingsContext");
+var _Resolver = require("../../utils/Resolver");
 var _Controls = require("../controls/Controls");
-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); }
+var _jsxRuntime = require("react/jsx-runtime");
 const ScatterplotControls = () => {
-  var _settings$selectedObs;
   const settings = (0, _SettingsContext.useSettings)();
   const dispatch = (0, _SettingsContext.useSettingsDispatch)();
-  const [sliderValue, setSliderValue] = _react.default.useState(settings.controls.range || [0, 1]);
-  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;
+  const [sliderValue, setSliderValue] = (0, _react.useState)(settings.controls.range || [0, 1]);
+  const {
+    valueMin,
+    valueMax
+  } = (0, _FilterContext.useFilteredData)();
+  const selectedObs = (0, _Resolver.useSelectedObs)();
+  const isCategorical = settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS ? (selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type) === _constants.OBS_TYPES.CATEGORICAL : false;
   const valueLabelFormat = value => {
-    return (value * (settings.controls.valueRange[1] - settings.controls.valueRange[0]) + settings.controls.valueRange[0]).toFixed(2);
+    return (value * (valueMax - valueMin) + valueMin).toFixed(2);
   };
   const marks = [{
     value: 0,
@@ -33,36 +39,44 @@ const ScatterplotControls = () => {
   const updateRange = (_e, value) => {
     setSliderValue(value);
     dispatch({
-      type: "set.controls.range",
+      type: 'set.controls.range',
       range: sliderValue
     });
   };
   (0, _react.useEffect)(() => {
     setSliderValue(settings.controls.range);
   }, [settings.controls.range]);
-  const rangeSlider = /*#__PURE__*/_react.default.createElement(_material.Box, {
-    className: "w-100"
-  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
-    id: "colorscale-range",
-    gutterBottom: true
-  }, "Colorscale range"), /*#__PURE__*/_react.default.createElement("div", {
-    className: "px-4"
-  }, /*#__PURE__*/_react.default.createElement(_material.Slider, {
-    "aria-labelledby": "colorscale-range",
-    min: 0,
-    max: 1,
-    step: 0.001,
-    value: sliderValue,
-    onChange: updateSlider,
-    onChangeCommitted: updateRange,
-    valueLabelDisplay: "auto",
-    getAriaValueText: valueLabelFormat,
-    valueLabelFormat: valueLabelFormat,
-    marks: marks,
-    disabled: isCategorical
-  })));
-  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, {
-    className: "mb-2"
-  }, rangeSlider)));
+  const rangeSlider = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    className: "w-100",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+      id: "colorscale-range",
+      gutterBottom: true,
+      children: "Colorscale range"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "px-4",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Slider, {
+        "aria-labelledby": "colorscale-range",
+        min: 0,
+        max: 1,
+        step: 0.001,
+        value: sliderValue,
+        onChange: updateSlider,
+        onChangeCommitted: updateRange,
+        valueLabelDisplay: "auto",
+        getAriaValueText: valueLabelFormat,
+        valueLabelFormat: valueLabelFormat,
+        marks: marks,
+        disabled: isCategorical
+      })
+    })]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Form, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Controls.ColorscaleSelect, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Group, {
+        className: "mb-2",
+        children: rangeSlider
+      })]
+    })
+  });
 };
 exports.ScatterplotControls = ScatterplotControls;

package/dist/cjs/components/scatterplot/SpatialControls.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SpatialControls = SpatialControls;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 var _reactFontawesome = require("@fortawesome/react-fontawesome");
 var _iconsMaterial = require("@mui/icons-material");
@@ -18,8 +18,8 @@ var _offcanvas = require("../offcanvas");
 var _ScatterplotControls = require("./ScatterplotControls");
 var _constants = require("../../constants/constants");
 var _SettingsContext = require("../../context/SettingsContext");
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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); }
 function SpatialControls(_ref) {
   var _features$features;
   let {
@@ -46,19 +46,19 @@ function SpatialControls(_ref) {
   const showVarsBtn = isFullscreen ? XlBreakpoint : true;
   const onSelect = (eventKey, event) => {
     switch (eventKey) {
-      case "DrawPolygonMode":
+      case 'DrawPolygonMode':
         setMode(() => _editModes.DrawPolygonMode);
         break;
-      case "DrawLineStringMode":
+      case 'DrawLineStringMode':
         setMode(() => _editModes.DrawLineStringMode);
         break;
-      case "DrawPolygonByDraggingMode":
+      case 'DrawPolygonByDraggingMode':
         setMode(() => _editModes.DrawPolygonByDraggingMode);
         break;
-      case "DrawRectangleMode":
+      case 'DrawRectangleMode':
         setMode(() => _editModes.DrawRectangleMode);
         break;
-      case "ModifyMode":
+      case 'ModifyMode':
         setMode(() => _editModes.ModifyMode);
         break;
       default:
@@ -67,113 +67,140 @@ function SpatialControls(_ref) {
   };
   const deleteFeatures = (_eventKey, _event) => {
     setFeatures({
-      type: "FeatureCollection",
+      type: 'FeatureCollection',
       features: []
     });
   };
-  const polygonControls = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    active: settings.sliceBy.polygons,
-    title: "Filter data with polygons",
-    onClick: () => {
-      setMode(() => _editModes.ViewMode);
-      dispatch({
-        type: "toggle.slice.polygons"
-      });
-    }
-  }, /*#__PURE__*/_react.default.createElement(_iconsMaterial.JoinInner, null)), /*#__PURE__*/_react.default.createElement(_Button.default, {
-    title: "Delete selected polygons",
-    onClick: () => {
-      const newFeatures = features.features.filter((_f, i) => !selectedFeatureIndexes.includes(i));
-      setFeatures({
-        type: "FeatureCollection",
-        features: newFeatures
-      });
-    },
-    disabled: !selectedFeatureIndexes.length
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faTrash
-  })));
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "cherita-spatial-controls"
-  }, (showObsBtn || showVarsBtn) && /*#__PURE__*/_react.default.createElement(_ButtonGroup.default, {
-    vertical: true,
-    className: "w-100 mb-1"
-  }, showObsBtn && /*#__PURE__*/_react.default.createElement(_reactBootstrap.OverlayTrigger, {
-    placement: "right",
-    overlay: /*#__PURE__*/_react.default.createElement(_reactBootstrap.Tooltip, {
-      id: "tooltip-obs"
-    }, "Browse categories")
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    onClick: () => setShowObs(true)
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faList
-  }))), showVarsBtn && /*#__PURE__*/_react.default.createElement(_reactBootstrap.OverlayTrigger, {
-    placement: "right",
-    overlay: /*#__PURE__*/_react.default.createElement(_reactBootstrap.Tooltip, {
-      id: "tooltip-vars"
-    }, "Search features")
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    onClick: () => setShowVars(true)
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faSearch
-  })))), /*#__PURE__*/_react.default.createElement(_ButtonGroup.default, {
-    vertical: true,
-    className: "w-100"
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    onClick: () => setMode(() => _editModes.ViewMode),
-    title: "Set dragging mode",
-    active: mode === _editModes.ViewMode
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faHand
-  })), /*#__PURE__*/_react.default.createElement(_Button.default, {
-    onClick: increaseZoom,
-    title: "Increase zoom"
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faPlus
-  })), /*#__PURE__*/_react.default.createElement(_Button.default, {
-    onClick: decreaseZoom,
-    title: "Decrease zoom"
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faMinus
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "border-bottom"
-  }), " ", /*#__PURE__*/_react.default.createElement(_Button.default, {
-    onClick: resetBounds,
-    title: "Reset zoom and center"
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faCrosshairs
-  })), /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
-    as: _ButtonGroup.default,
-    className: "caret-off",
-    drop: "end",
-    onSelect: onSelect
-  }, /*#__PURE__*/_react.default.createElement(_Dropdown.default.Toggle, {
-    id: "dropdown-autoclose-outside",
-    className: "caret-off ".concat(mode === _editModes.DrawPolygonByDraggingMode || mode === _editModes.ModifyMode ? "active" : "")
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faDrawPolygon
-  })), /*#__PURE__*/_react.default.createElement(_Dropdown.default.Menu, null, /*#__PURE__*/_react.default.createElement(_Dropdown.default.Header, null, "Polygon tools"), /*#__PURE__*/_react.default.createElement(_Dropdown.default.Item, {
-    eventKey: "DrawPolygonByDraggingMode"
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faDrawPolygon,
-    className: "nav-icon"
-  }), "Draw a polygon"), /*#__PURE__*/_react.default.createElement(_Dropdown.default.Item, {
-    eventKey: "ModifyMode"
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faPen,
-    className: "nav-icon"
-  }), "Modify polygons"), /*#__PURE__*/_react.default.createElement(_Dropdown.default.Item, {
-    onClick: deleteFeatures
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faTrash,
-    className: "nav-icon"
-  }), "Delete polygons"))), !!(features !== null && features !== void 0 && (_features$features = features.features) !== null && _features$features !== void 0 && _features$features.length) && polygonControls, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    onClick: handleShowControls
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faSliders
-  }))), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasControls, {
-    show: showControls,
-    handleClose: handleCloseControls,
-    Controls: _ScatterplotControls.ScatterplotControls
-  }));
+  const polygonControls = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      active: settings.sliceBy.polygons,
+      title: "Filter data with polygons",
+      onClick: () => {
+        setMode(() => _editModes.ViewMode);
+        dispatch({
+          type: 'toggle.slice.polygons'
+        });
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.JoinInner, {})
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      title: "Delete selected polygons",
+      onClick: () => {
+        const newFeatures = features.features.filter((_f, i) => !selectedFeatureIndexes.includes(i));
+        setFeatures({
+          type: 'FeatureCollection',
+          features: newFeatures
+        });
+      },
+      disabled: !selectedFeatureIndexes.length,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+        icon: _freeSolidSvgIcons.faTrash
+      })
+    })]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "cherita-spatial-controls",
+    children: [(showObsBtn || showVarsBtn) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ButtonGroup.default, {
+      vertical: true,
+      className: "w-100 mb-1",
+      children: [showObsBtn && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.OverlayTrigger, {
+        placement: "right",
+        overlay: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Tooltip, {
+          id: "tooltip-obs",
+          children: "Browse categories"
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          onClick: () => setShowObs(true),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+            icon: _freeSolidSvgIcons.faList
+          })
+        })
+      }), showVarsBtn && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.OverlayTrigger, {
+        placement: "right",
+        overlay: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Tooltip, {
+          id: "tooltip-vars",
+          children: "Search features"
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          onClick: () => setShowVars(true),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+            icon: _freeSolidSvgIcons.faSearch
+          })
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ButtonGroup.default, {
+      vertical: true,
+      className: "w-100",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        onClick: () => setMode(() => _editModes.ViewMode),
+        title: "Set dragging mode",
+        active: mode === _editModes.ViewMode,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+          icon: _freeSolidSvgIcons.faHand
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        onClick: increaseZoom,
+        title: "Increase zoom",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+          icon: _freeSolidSvgIcons.faPlus
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        onClick: decreaseZoom,
+        title: "Decrease zoom",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+          icon: _freeSolidSvgIcons.faMinus
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "border-bottom"
+      }), " ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        onClick: resetBounds,
+        title: "Reset zoom and center",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+          icon: _freeSolidSvgIcons.faCrosshairs
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dropdown.default, {
+        as: _ButtonGroup.default,
+        className: "caret-off",
+        drop: "end",
+        onSelect: onSelect,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Toggle, {
+          id: "dropdown-autoclose-outside",
+          className: "caret-off ".concat(mode === _editModes.DrawPolygonByDraggingMode || mode === _editModes.ModifyMode ? 'active' : ''),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+            icon: _freeSolidSvgIcons.faDrawPolygon
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dropdown.default.Menu, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Header, {
+            children: "Polygon tools"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dropdown.default.Item, {
+            eventKey: "DrawPolygonByDraggingMode",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+              icon: _freeSolidSvgIcons.faDrawPolygon,
+              className: "nav-icon"
+            }), "Draw a polygon"]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dropdown.default.Item, {
+            eventKey: "ModifyMode",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+              icon: _freeSolidSvgIcons.faPen,
+              className: "nav-icon"
+            }), "Modify polygons"]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dropdown.default.Item, {
+            onClick: deleteFeatures,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+              icon: _freeSolidSvgIcons.faTrash,
+              className: "nav-icon"
+            }), "Delete polygons"]
+          })]
+        })]
+      }), !!(features !== null && features !== void 0 && (_features$features = features.features) !== null && _features$features !== void 0 && _features$features.length) && polygonControls, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        onClick: handleShowControls,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+          icon: _freeSolidSvgIcons.faSliders
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_offcanvas.OffcanvasControls, {
+      show: showControls,
+      handleClose: handleCloseControls,
+      Controls: _ScatterplotControls.ScatterplotControls
+    })]
+  });
 }

package/dist/cjs/components/scatterplot/Toolbox.js

@@ -4,42 +4,53 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Toolbox = Toolbox;
-var _react = _interopRequireDefault(require("react"));
 var _reactBootstrap = require("react-bootstrap");
 var _string = require("../../utils/string");
 var _ObsmList = require("../obsm-list/ObsmList");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _jsxRuntime = require("react/jsx-runtime");
 function Toolbox(_ref) {
   let {
     mode,
     obsLength,
-    slicedLength
+    slicedLength,
+    setHasObsm
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "cherita-toolbox"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_ObsmList.ObsmKeysList, null), (mode || !isNaN(obsLength)) && (mode !== null && !isNaN(slicedLength) && slicedLength !== obsLength ? /*#__PURE__*/_react.default.createElement(_reactBootstrap.OverlayTrigger, {
-    placement: "top",
-    overlay: /*#__PURE__*/_react.default.createElement(_reactBootstrap.Tooltip, {
-      id: "tooltip-dropped-mode"
-    }, "You have selected ", (0, _string.formatNumerical)(slicedLength), " out of", " ", (0, _string.formatNumerical)(obsLength), " cells")
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
-    size: "sm",
-    variant: "primary",
-    style: {
-      cursor: "default"
-    },
-    "aria-disabled": "true"
-  }, (0, _string.formatNumerical)(slicedLength), " of ", (0, _string.formatNumerical)(obsLength), " ", "cells")) : /*#__PURE__*/_react.default.createElement(_reactBootstrap.OverlayTrigger, {
-    placement: "top",
-    overlay: /*#__PURE__*/_react.default.createElement(_reactBootstrap.Tooltip, {
-      id: "tooltip-dropped-mode"
-    }, "You are viewing ", (0, _string.formatNumerical)(obsLength), " cells")
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
-    size: "sm",
-    variant: "primary",
-    style: {
-      cursor: "default"
-    },
-    "aria-disabled": "true"
-  }, (0, _string.formatNumerical)(obsLength), " cells")))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "cherita-toolbox",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.ButtonGroup, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ObsmList.ObsmKeysList, {
+        setHasObsm: setHasObsm
+      }), (mode || !isNaN(obsLength)) && (mode !== null && !isNaN(slicedLength) && slicedLength !== obsLength ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.OverlayTrigger, {
+        placement: "top",
+        overlay: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Tooltip, {
+          id: "tooltip-dropped-mode",
+          children: ["You have selected ", (0, _string.formatNumerical)(slicedLength), " out of", ' ', (0, _string.formatNumerical)(obsLength), " cells"]
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Button, {
+          size: "sm",
+          variant: "primary",
+          style: {
+            cursor: 'default'
+          },
+          "aria-disabled": "true",
+          children: [(0, _string.formatNumerical)(slicedLength), " of ", (0, _string.formatNumerical)(obsLength), ' ', "cells"]
+        })
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.OverlayTrigger, {
+        placement: "top",
+        overlay: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Tooltip, {
+          id: "tooltip-dropped-mode",
+          children: ["You are viewing ", (0, _string.formatNumerical)(obsLength), " cells"]
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Button, {
+          size: "sm",
+          variant: "primary",
+          style: {
+            cursor: 'default'
+          },
+          "aria-disabled": "true",
+          children: [(0, _string.formatNumerical)(obsLength), " cells"]
+        })
+      }))]
+    })
+  });
 }