@haniffalab/cherita-react 1.0.0 → 1.1.0

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ObsToolbar = ObsToolbar;
+var _react = _interopRequireDefault(require("react"));
+var _reactBootstrap = require("react-bootstrap");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function ObsToolbar(_ref) {
+  let {
+    item,
+    showToggleAllObs = true,
+    onToggleAllObs
+  } = _ref;
+  const allToggledOn = !item.omit.length;
+  return showToggleAllObs && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Check, {
+    type: "switch",
+    id: "custom-switch",
+    label: "Toggle all",
+    checked: allToggledOn,
+    onChange: onToggleAllObs
+  });
+}

package/dist/{components → cjs/components}/obsm-list/ObsmList.js

@@ -7,8 +7,8 @@ exports.ObsmKeysList = ObsmKeysList;
 var _react = _interopRequireWildcard(require("react"));
 var _reactBootstrap = require("react-bootstrap");
 var _DatasetContext = require("../../context/DatasetContext");
-var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
+var _Skeleton = require("../../utils/Skeleton");
 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() {
@@ -36,7 +36,7 @@ function ObsmKeysList() {
     refetchOnMount: false
   });
   (0, _react.useEffect)(() => {
-    if (!isPending && !serverError) {
+    if (!isPending && !serverError && fetchedData) {
       setObsmKeysList(fetchedData);
     }
   }, [fetchedData, isPending, serverError]);
@@ -58,13 +58,16 @@ function ObsmKeysList() {
     }, item);
   });
   if (!serverError) {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement(_reactBootstrap.DropdownButton, {
+    if (isPending) {
+      return /*#__PURE__*/_react.default.createElement(_Skeleton.ObsmKeysListBtn, null);
+    }
+    return /*#__PURE__*/_react.default.createElement(_reactBootstrap.DropdownButton, {
       as: _reactBootstrap.ButtonGroup,
       title: dataset.selectedObsm || "Select an embedding",
-      variant: dataset.selectedObsm ? "primary" : "outline-primary",
+      variant: dataset.selectedObsm ? "primary" : "warning",
       id: "bg-nested-dropdown",
       size: "sm"
-    }, obsmList));
+    }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Header, null, "Embeddings"), obsmList);
   } else {
     return /*#__PURE__*/_react.default.createElement(_reactBootstrap.OverlayTrigger, {
       placement: "top",

package/dist/{components → cjs/components}/offcanvas/index.js

@@ -15,11 +15,12 @@ var _ObsmList = require("../obsm-list/ObsmList");
 var _SearchBar = require("../search-bar/SearchBar");
 var _VarList = require("../var-list/VarList");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function OffcanvasObs({
-  show,
-  handleClose,
-  ...props
-}) {
+function OffcanvasObs(_ref) {
+  let {
+    show,
+    handleClose,
+    ...props
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement(_Offcanvas.default, {
     show: show,
     onHide: handleClose,
@@ -31,10 +32,11 @@ function OffcanvasObs({
     className: "p-0"
   }, /*#__PURE__*/_react.default.createElement(_ObsList.ObsColsList, props)));
 }
-function OffcanvasObsm({
-  show,
-  handleClose
-}) {
+function OffcanvasObsm(_ref2) {
+  let {
+    show,
+    handleClose
+  } = _ref2;
   return /*#__PURE__*/_react.default.createElement(_Offcanvas.default, {
     show: show,
     onHide: handleClose
@@ -42,11 +44,12 @@ function OffcanvasObsm({
     closeButton: true
   }, /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Title, null, "Embedding space")), /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Body, null, /*#__PURE__*/_react.default.createElement(_ObsmList.ObsmKeysList, null)));
 }
-function OffcanvasVars({
-  show,
-  handleClose,
-  mode = _constants.SELECTION_MODES.MULTIPLE
-}) {
+function OffcanvasVars(_ref3) {
+  let {
+    show,
+    handleClose,
+    mode = _constants.SELECTION_MODES.MULTIPLE
+  } = _ref3;
   return /*#__PURE__*/_react.default.createElement(_Offcanvas.default, {
     show: show,
     onHide: handleClose
@@ -58,12 +61,13 @@ function OffcanvasVars({
     mode: mode
   })));
 }
-function OffcanvasControls({
-  show,
-  handleClose,
-  Controls,
-  ...props
-}) {
+function OffcanvasControls(_ref4) {
+  let {
+    show,
+    handleClose,
+    Controls,
+    ...props
+  } = _ref4;
   return /*#__PURE__*/_react.default.createElement(_Offcanvas.default, {
     show: show,
     onHide: handleClose

package/dist/{components → cjs/components}/pseudospatial/Pseudospatial.js

@@ -76,14 +76,15 @@ function usePseudospatialData(plotType) {
     enabled: !!plotType && !!dataset.pseudospatial.maskSet
   });
 }
-function Pseudospatial({
-  showLegend = true,
-  sharedScaleRange = false,
-  height = 200,
-  setShowControls,
-  plotType,
-  setPlotType
-}) {
+function Pseudospatial(_ref) {
+  let {
+    showLegend = true,
+    sharedScaleRange = false,
+    height = 200,
+    setShowControls,
+    plotType,
+    setPlotType
+  } = _ref;
   const dataset = (0, _DatasetContext.useDataset)();
   const [data, setData] = (0, _react.useState)([]);
   const [layout, setLayout] = (0, _react.useState)({});
@@ -132,7 +133,7 @@ function Pseudospatial({
     serverError
   } = usePseudospatialData(plotType);
   (0, _react.useEffect)(() => {
-    if (!isPending && !serverError) {
+    if (!isPending && !serverError && fetchedData) {
       setData(fetchedData.data);
       setLayout(fetchedData.layout);
       updateColorscale(colorscale.current);

package/dist/{components → cjs/components}/pseudospatial/PseudospatialToolbar.js

@@ -122,9 +122,10 @@ function MaskSet() {
 }
 
 // @TODO: add colormap, colorbar slider
-function PseudospatialToolbar({
-  plotType
-}) {
+function PseudospatialToolbar(_ref) {
+  let {
+    plotType
+  } = _ref;
   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)));

package/dist/{components → cjs/components}/scatterplot/Scatterplot.js

@@ -13,8 +13,6 @@ var _editModes = require("@nebula.gl/edit-modes");
 var _layers2 = require("@nebula.gl/layers");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
-var _SpatialControls = require("./SpatialControls");
-var _Toolbox = require("./Toolbox");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
 var _FilterContext = require("../../context/FilterContext");
@@ -25,6 +23,8 @@ var _Legend = require("../../utils/Legend");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _string = require("../../utils/string");
 var _zarrData = require("../../utils/zarrData");
+var _SpatialControls = require("./SpatialControls");
+var _Toolbox = require("./Toolbox");
 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; }
@@ -37,9 +37,10 @@ const INITIAL_VIEW_STATE = {
   pitch: 0,
   bearing: 0
 };
-function Scatterplot({
-  radius = 30
-}) {
+function Scatterplot(_ref) {
+  let {
+    radius = 30
+  } = _ref;
   const dataset = (0, _DatasetContext.useDataset)();
   const {
     obsIndices,
@@ -204,9 +205,10 @@ function Scatterplot({
     min: dataset.controls.range[0] * (valueMax - valueMin) + valueMin,
     max: dataset.controls.range[1] * (valueMax - valueMin) + valueMin
   };
-  const getFillColor = (0, _react.useCallback)((_d, {
-    index
-  }) => {
+  const getFillColor = (0, _react.useCallback)((_d, _ref2) => {
+    let {
+      index
+    } = _ref2;
     const grayOut = obsIndices && !obsIndices.has(index);
     return getColor({
       value: (data.values[index] - min) / (max - min),
@@ -216,9 +218,10 @@ function Scatterplot({
   }, [data.values, obsIndices, getColor, isCategorical, max, min]);
 
   // @TODO: add support for pseudospatial hover to reflect in radius
-  const getRadius = (0, _react.useCallback)((_d, {
-    index
-  }) => {
+  const getRadius = (0, _react.useCallback)((_d, _ref3) => {
+    let {
+      index
+    } = _ref3;
     const grayOut = obsIndices && !obsIndices.has(index);
     return grayOut ? 1 : 3;
   }, [obsIndices]);
@@ -241,11 +244,12 @@ function Scatterplot({
       data: features,
       mode: mode,
       selectedFeatureIndexes,
-      onEdit: ({
-        updatedData,
-        editType,
-        editContext
-      }) => {
+      onEdit: _ref4 => {
+        let {
+          updatedData,
+          editType,
+          editContext
+        } = _ref4;
         setFeatures(updatedData);
         let updatedSelectedFeatureIndexes = selectedFeatureIndexes;
         if (editType === "addFeature") {
@@ -293,17 +297,19 @@ function Scatterplot({
     }
     setSelectedFeatureIndexes(f => info.object ? info.layer.id === "cherita-layer-draw" ? [info.index] : f : []);
   }
-  const getLabel = (o, v, isVar = false) => {
+  const getLabel = function (o, v) {
+    let isVar = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     if (isVar || o.type === _constants.OBS_TYPES.CONTINUOUS) {
       return `${o.name}: ${(0, _string.formatNumerical)(parseFloat(v))}`;
     } else {
       return `${o.name}: ${o.codesMap[v]}`;
     }
   };
-  const getTooltip = ({
-    object,
-    index
-  }) => {
+  const getTooltip = _ref5 => {
+    let {
+      object,
+      index
+    } = _ref5;
     if (!object || object?.type === "Feature") return;
     const text = [];
     if (dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && dataset.selectedObs && !_lodash.default.some(dataset.labelObs, {
@@ -355,9 +361,12 @@ function Scatterplot({
       setIsRendering(false);
     },
     useDevicePixels: false,
-    getCursor: ({
-      isDragging
-    }) => mode !== _editModes.ViewMode ? "crosshair" : isDragging ? "grabbing" : "grab",
+    getCursor: _ref6 => {
+      let {
+        isDragging
+      } = _ref6;
+      return mode !== _editModes.ViewMode ? "crosshair" : isDragging ? "grabbing" : "grab";
+    },
     ref: deckRef
   }), /*#__PURE__*/_react.default.createElement(_SpatialControls.SpatialControls, {
     mode: mode,

package/dist/{components → cjs/components}/scatterplot/SpatialControls.js

@@ -12,23 +12,23 @@ var _editModes = require("@nebula.gl/edit-modes");
 var _Button = _interopRequireDefault(require("react-bootstrap/Button"));
 var _ButtonGroup = _interopRequireDefault(require("react-bootstrap/ButtonGroup"));
 var _Dropdown = _interopRequireDefault(require("react-bootstrap/Dropdown"));
-var _DropdownButton = _interopRequireDefault(require("react-bootstrap/DropdownButton"));
-var _ScatterplotControls = require("./ScatterplotControls");
 var _DatasetContext = require("../../context/DatasetContext");
 var _offcanvas = require("../offcanvas");
+var _ScatterplotControls = require("./ScatterplotControls");
 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 SpatialControls({
-  mode,
-  setMode,
-  features,
-  setFeatures,
-  selectedFeatureIndexes,
-  resetBounds,
-  increaseZoom,
-  decreaseZoom
-}) {
+function SpatialControls(_ref) {
+  let {
+    mode,
+    setMode,
+    features,
+    setFeatures,
+    selectedFeatureIndexes,
+    resetBounds,
+    increaseZoom,
+    decreaseZoom
+  } = _ref;
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const [showControls, setShowControls] = (0, _react.useState)(false);
@@ -61,13 +61,8 @@ function SpatialControls({
       features: []
     });
   };
-  const polygonControls = /*#__PURE__*/_react.default.createElement("div", {
-    className: "mt-2"
-  }, /*#__PURE__*/_react.default.createElement(_ButtonGroup.default, {
-    vertical: true,
-    className: "w-100"
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    variant: dataset.sliceBy.polygons ? "primary" : "outline-primary",
+  const polygonControls = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    active: dataset.sliceBy.polygons,
     title: "Filter data with polygons",
     onClick: () => {
       setMode(() => _editModes.ViewMode);
@@ -76,7 +71,6 @@ function SpatialControls({
       });
     }
   }, /*#__PURE__*/_react.default.createElement(_iconsMaterial.JoinInner, null)), /*#__PURE__*/_react.default.createElement(_Button.default, {
-    variant: "outline-primary",
     title: "Delete selected polygons",
     onClick: () => {
       const newFeatures = features.features.filter((_f, i) => !selectedFeatureIndexes.includes(i));
@@ -88,12 +82,12 @@ function SpatialControls({
     disabled: !selectedFeatureIndexes.length
   }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
     icon: _freeSolidSvgIcons.faTrash
-  }))));
+  })));
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "cherita-spatial-controls"
   }, /*#__PURE__*/_react.default.createElement(_ButtonGroup.default, {
     vertical: true,
-    className: "w-100"
+    className: "w-100 mb-1"
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: increaseZoom,
     title: "Increase zoom"
@@ -110,37 +104,44 @@ function SpatialControls({
   }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
     icon: _freeSolidSvgIcons.faCrosshairs
   })), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: handleShowControls
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faSliders
+  }))), /*#__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",
-    variant: mode === _editModes.ViewMode ? "primary" : "outline-primary"
+    active: mode === _editModes.ViewMode
   }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
     icon: _freeSolidSvgIcons.faHand
-  })), /*#__PURE__*/_react.default.createElement(_DropdownButton.default, {
+  })), /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
     as: _ButtonGroup.default,
-    title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-      icon: _freeSolidSvgIcons.faDrawPolygon
-    })),
-    drop: "end",
-    id: "bg-vertical-dropdown-1",
     className: "caret-off",
+    drop: "end",
     onSelect: onSelect
-  }, /*#__PURE__*/_react.default.createElement(_Dropdown.default.Header, null, "Selection tools"), /*#__PURE__*/_react.default.createElement(_Dropdown.default.Item, {
-    eventKey: "DrawPolygonMode"
-  }, "Draw a polygon"), /*#__PURE__*/_react.default.createElement(_Dropdown.default.Item, {
+  }, /*#__PURE__*/_react.default.createElement(_Dropdown.default.Toggle, {
+    id: "dropdown-autoclose-outside",
+    className: `caret-off ${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"
-  }, "Draw a Polygon by Dragging"), /*#__PURE__*/_react.default.createElement(_Dropdown.default.Item, {
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faDrawPolygon,
+    className: "nav-icon"
+  }), "Draw a polygon"), /*#__PURE__*/_react.default.createElement(_Dropdown.default.Item, {
     eventKey: "ModifyMode"
-  }, "Modify polygons"), /*#__PURE__*/_react.default.createElement(_Dropdown.default.Item, {
-    eventKey: "ViewMode"
-  }, "Viewing mode"), /*#__PURE__*/_react.default.createElement(_Dropdown.default.Item, {
-    onClick: deleteFeatures
   }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faTrash
-  }), " Delete polygons")), /*#__PURE__*/_react.default.createElement(_Button.default, {
-    onClick: handleShowControls
+    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.faSliders
-  }))), !!features?.features?.length && polygonControls, /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasControls, {
+    icon: _freeSolidSvgIcons.faTrash,
+    className: "nav-icon"
+  }), "Delete polygons"))), !!features?.features?.length && polygonControls), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasControls, {
     show: showControls,
     handleClose: handleCloseControls,
     Controls: _ScatterplotControls.ScatterplotControls

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

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Toolbox = Toolbox;
+var _react = _interopRequireDefault(require("react"));
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+var _reactFontawesome = require("@fortawesome/react-fontawesome");
+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 }; }
+function Toolbox(_ref) {
+  let {
+    mode,
+    obsLength,
+    slicedLength
+  } = _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 && /*#__PURE__*/_react.default.createElement(_reactBootstrap.OverlayTrigger, {
+    placement: "top",
+    overlay: /*#__PURE__*/_react.default.createElement(_reactBootstrap.Tooltip, {
+      id: "tooltip-dropped-mode"
+    }, "The color scale is currently set to ", mode)
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    size: "sm",
+    variant: "primary",
+    style: {
+      cursor: "default"
+    },
+    "aria-disabled": "true"
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faDroplet,
+    className: "me-1"
+  }), " ", mode)), (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")))));
+}

package/dist/{components → cjs/components}/search-bar/SearchBar.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SearchBar = SearchBar;
 var _react = _interopRequireWildcard(require("react"));
+var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
 var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _SearchResults = require("./SearchResults");
@@ -25,11 +26,12 @@ function onVarSelect(dispatch, item) {
     value: "var"
   });
 }
-function SearchBar({
-  searchVar = true,
-  searchDiseases = false,
-  handleSelect = onVarSelect
-}) {
+function SearchBar(_ref) {
+  let {
+    searchVar = true,
+    searchDiseases = false,
+    handleSelect = onVarSelect
+  } = _ref;
   const [showSuggestions, setShowSuggestions] = (0, _react.useState)(false);
   const [text, setText] = (0, _react.useState)("");
   const inputRef = (0, _react.useRef)(null);
@@ -39,11 +41,13 @@ function SearchBar({
       setShowSuggestions(true);
     }
   }, [text]);
+
+  //@TODO: Abstract styles
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form, {
     onSubmit: e => {
       e.preventDefault();
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.FormGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Control, {
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.FormGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Control, {
     ref: inputRef,
     onFocus: () => {
       setShowSuggestions(text.length > 0);
@@ -58,8 +62,21 @@ function SearchBar({
     value: text,
     onChange: e => {
       setText(e.target.value);
+    },
+    style: {
+      paddingLeft: "2.5rem",
+      borderRadius: "5px"
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      position: "absolute",
+      left: "10px",
+      top: "50%",
+      transform: "translateY(-50%)",
+      pointerEvents: "none",
+      zIndex: 10
     }
-  }), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, {
+  }, /*#__PURE__*/_react.default.createElement(_Search.default, null))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, {
     show: showSuggestions,
     onMouseDown: e => {
       e.preventDefault();

package/dist/{components → cjs/components}/search-bar/SearchResults.js

@@ -13,11 +13,12 @@ var _search = require("../../utils/search");
 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 VarSearchResults({
-  text,
-  setShowSuggestions,
-  handleSelect
-}) {
+function VarSearchResults(_ref) {
+  let {
+    text,
+    setShowSuggestions,
+    handleSelect
+  } = _ref;
   const [suggestions, setSuggestions] = (0, _react.useState)([]);
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const {
@@ -71,20 +72,18 @@ function VarSearchResults({
     });
   }, [deferredData, dispatch, handleSelect, isStale, setShowSuggestions]);
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Header, null, "Features"), /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      maxHeight: "25vh",
-      overflowY: "scroll"
-    }
+    className: "search-results"
   }, deferredData?.length ? suggestionsList : /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
     key: "empty",
     as: "button",
     disabled: true
   }, !serverError ? isStale || isPending ? "Loading..." : "No items found" : "Failed to fetch data")));
 }
-function DiseasesSearchResults({
-  text,
-  setShowSuggestions
-}) {
+function DiseasesSearchResults(_ref2) {
+  let {
+    text,
+    setShowSuggestions
+  } = _ref2;
   const [suggestions, setSuggestions] = (0, _react.useState)([]);
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const {
@@ -141,10 +140,7 @@ function DiseasesSearchResults({
     });
   }, [deferredData, dispatch, isStale, setShowSuggestions]);
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Header, null, "Diseases"), /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      maxHeight: "25vh",
-      overflowY: "scroll"
-    }
+    className: "search-results"
   }, deferredData?.length ? suggestionsList : /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
     key: "empty",
     as: "button",