@haniffalab/cherita-react 1.2.0-dev.2025-04-28.623a001f → 1.2.0-dev.2025-04-30.0a204a1c

package/dist/cjs/components/full-page/FullPage.js

@@ -73,34 +73,14 @@ function FullPage(_ref) {
     style: {
       height: appDimensions.height
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Navbar, {
-    expand: "sm",
-    bg: "primary",
-    className: "cherita-navbar"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "container-fluid"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Navbar.Toggle, {
-    "aria-controls": "navbarScroll"
-  }), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Navbar.Collapse, {
-    id: "navbarScroll"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav, {
-    className: "me-auto my-0",
-    navbarScroll: true
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Item, {
-    className: "d-block d-lg-none"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Link, {
-    onClick: () => setShowObs(true)
-  }, "Observations")), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Item, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Link, {
-    onClick: () => setShowVars(true)
-  }, "Features"))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav, {
-    className: "d-flex"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Item, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Link, {
-    onClick: () => setShowControls(true)
-  }, "Controls")))))), /*#__PURE__*/_react.default.createElement("div", {
     className: "cherita-app-obs modern-scrollbars border-end h-100"
   }, /*#__PURE__*/_react.default.createElement(_ObsList.ObsColsList, props)), /*#__PURE__*/_react.default.createElement("div", {
     className: "cherita-app-canvas flex-grow-1"
-  }, children), /*#__PURE__*/_react.default.createElement("div", {
+  }, children({
+    setShowObs,
+    setShowVars
+  })), /*#__PURE__*/_react.default.createElement("div", {
     className: "cherita-app-sidebar p-3"
   }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Card, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Card.Body, {
     className: "d-flex flex-column p-0"
@@ -122,7 +102,8 @@ function FullPage(_ref) {
     handleClose: () => setShowObs(false)
   }), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasVars, {
     show: showVars,
-    handleClose: () => setShowVars(false)
+    handleClose: () => setShowVars(false),
+    mode: varMode
   }), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasControls, {
     show: showControls,
     handleClose: () => setShowControls(false),
@@ -133,7 +114,19 @@ function FullPage(_ref) {
   }))));
 }
 function FullPageScatterplot(props) {
-  return /*#__PURE__*/_react.default.createElement(FullPage, props, /*#__PURE__*/_react.default.createElement(_Scatterplot.Scatterplot, null));
+  return /*#__PURE__*/_react.default.createElement(FullPage, _extends({}, props, {
+    varMode: _constants.SELECTION_MODES.SINGLE
+  }), _ref2 => {
+    let {
+      setShowObs,
+      setShowVars
+    } = _ref2;
+    return /*#__PURE__*/_react.default.createElement(_Scatterplot.Scatterplot, {
+      setShowObs: setShowObs,
+      setShowVars: setShowVars,
+      isFullscreen: true
+    });
+  });
 }
 function FullPagePlots(props) {
   return /*#__PURE__*/_react.default.createElement(FullPage, _extends({}, props, {

package/dist/cjs/components/full-page/FullPagePseudospatial.js

@@ -21,6 +21,7 @@ var _SearchBar = require("../search-bar/SearchBar");
 var _VarList = require("../var-list/VarList");
 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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function FullPage(_ref) {
   let {
     children,
@@ -73,34 +74,14 @@ function FullPage(_ref) {
     style: {
       height: appDimensions.height
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Navbar, {
-    expand: "sm",
-    bg: "primary",
-    className: "cherita-navbar"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "container-fluid"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Navbar.Toggle, {
-    "aria-controls": "navbarScroll"
-  }), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Navbar.Collapse, {
-    id: "navbarScroll"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav, {
-    className: "me-auto my-0",
-    navbarScroll: true
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Item, {
-    className: "d-block d-lg-none"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Link, {
-    onClick: () => setShowObs(true)
-  }, "Observations")), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Item, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Link, {
-    onClick: () => setShowVars(true)
-  }, "Features"))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav, {
-    className: "d-flex"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Item, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Link, {
-    onClick: () => setShowControls(true)
-  }, "Controls")))))), /*#__PURE__*/_react.default.createElement("div", {
     className: "cherita-app-obs modern-scrollbars border-end h-100"
   }, /*#__PURE__*/_react.default.createElement(_ObsList.ObsColsList, props)), /*#__PURE__*/_react.default.createElement("div", {
     className: "cherita-app-canvas flex-grow-1"
-  }, children), /*#__PURE__*/_react.default.createElement("div", {
+  }, children({
+    setShowObs,
+    setShowVars
+  })), /*#__PURE__*/_react.default.createElement("div", {
     className: "cherita-app-sidebar p-3"
   }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Card, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Card.Header, {
     className: "d-flex justify-content-evenly align-items-center"
@@ -141,7 +122,8 @@ function FullPage(_ref) {
     handleClose: () => setShowObs(false)
   }), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasVars, {
     show: showVars,
-    handleClose: () => setShowVars(false)
+    handleClose: () => setShowVars(false),
+    mode: varMode
   }), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasControls, {
     show: showControls,
     handleClose: () => setShowControls(false),
@@ -157,5 +139,17 @@ function FullPage(_ref) {
   }))));
 }
 function FullPagePseudospatial(props) {
-  return /*#__PURE__*/_react.default.createElement(FullPage, props, /*#__PURE__*/_react.default.createElement(_Scatterplot.Scatterplot, null));
+  return /*#__PURE__*/_react.default.createElement(FullPage, _extends({}, props, {
+    varMode: _constants.SELECTION_MODES.SINGLE
+  }), _ref2 => {
+    let {
+      setShowObs,
+      setShowVars
+    } = _ref2;
+    return /*#__PURE__*/_react.default.createElement(_Scatterplot.Scatterplot, {
+      setShowObs: setShowObs,
+      setShowVars: setShowVars,
+      isFullscreen: true
+    });
+  });
 }

package/dist/cjs/components/offcanvas/index.js

@@ -24,8 +24,7 @@ function OffcanvasObs(_ref) {
   return /*#__PURE__*/_react.default.createElement(_Offcanvas.default, {
     show: show,
     onHide: handleClose,
-    scroll: true,
-    backdrop: false
+    scroll: true
   }, /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Header, {
     closeButton: true
   }, /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Title, null, "Categories")), /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Body, {

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

@@ -39,7 +39,10 @@ const INITIAL_VIEW_STATE = {
 };
 function Scatterplot(_ref) {
   let {
-    radius = 30
+    radius = 30,
+    setShowObs,
+    setShowVars,
+    isFullscreen = false
   } = _ref;
   const dataset = (0, _DatasetContext.useDataset)();
   const {
@@ -382,7 +385,10 @@ function Scatterplot(_ref) {
     decreaseZoom: () => setViewState(v => ({
       ...v,
       zoom: v.zoom - 1
-    }))
+    })),
+    setShowObs: setShowObs,
+    setShowVars: setShowVars,
+    isFullscreen: isFullscreen
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "cherita-spatial-footer"
   }, /*#__PURE__*/_react.default.createElement("div", {

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

@@ -8,7 +8,9 @@ var _react = _interopRequireWildcard(require("react"));
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 var _reactFontawesome = require("@fortawesome/react-fontawesome");
 var _iconsMaterial = require("@mui/icons-material");
+var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
 var _editModes = require("@nebula.gl/edit-modes");
+var _reactBootstrap = require("react-bootstrap");
 var _Button = _interopRequireDefault(require("react-bootstrap/Button"));
 var _ButtonGroup = _interopRequireDefault(require("react-bootstrap/ButtonGroup"));
 var _Dropdown = _interopRequireDefault(require("react-bootstrap/Dropdown"));
@@ -27,13 +29,20 @@ function SpatialControls(_ref) {
     selectedFeatureIndexes,
     resetBounds,
     increaseZoom,
-    decreaseZoom
+    decreaseZoom,
+    setShowObs,
+    setShowVars,
+    isFullscreen
   } = _ref;
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const [showControls, setShowControls] = (0, _react.useState)(false);
   const handleCloseControls = () => setShowControls(false);
   const handleShowControls = () => setShowControls(true);
+  const LgBreakpoint = (0, _useMediaQuery.default)("(max-width: 991.98px)");
+  const XlBreakpoint = (0, _useMediaQuery.default)("(max-width: 1199.98px)");
+  const showObsBtn = isFullscreen ? LgBreakpoint : true;
+  const showVarsBtn = isFullscreen ? XlBreakpoint : true;
   const onSelect = (eventKey, event) => {
     switch (eventKey) {
       case "DrawPolygonMode":
@@ -85,10 +94,37 @@ function SpatialControls(_ref) {
   })));
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "cherita-spatial-controls"
-  }, /*#__PURE__*/_react.default.createElement(_ButtonGroup.default, {
+  }, (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, {
@@ -98,24 +134,13 @@ function SpatialControls(_ref) {
     title: "Decrease zoom"
   }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
     icon: _freeSolidSvgIcons.faMinus
-  })), /*#__PURE__*/_react.default.createElement(_Button.default, {
+  })), /*#__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(_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",
-    active: mode === _editModes.ViewMode
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faHand
   })), /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
     as: _ButtonGroup.default,
     className: "caret-off",
@@ -141,7 +166,11 @@ function SpatialControls(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
     icon: _freeSolidSvgIcons.faTrash,
     className: "nav-icon"
-  }), "Delete polygons"))), !!features?.features?.length && polygonControls), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasControls, {
+  }), "Delete polygons"))), !!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

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

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 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");
@@ -19,22 +17,7 @@ function Toolbox(_ref) {
   } = _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, {
+  }, /*#__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"

package/dist/cjs/components/search-bar/SearchResults.js

@@ -10,6 +10,7 @@ var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _DatasetContext = require("../../context/DatasetContext");
 var _search = require("../../utils/search");
+var _VirtualizedList = require("../../utils/VirtualizedList");
 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; }
@@ -56,24 +57,28 @@ function VarSearchResults(_ref) {
       setShowSuggestions(true);
     }
   }, [fetchedData, isPending, serverError, setShowSuggestions]);
-  const suggestionsList = (0, _react.useMemo)(() => {
-    return deferredData?.map(item => {
-      return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
-        key: item.name,
-        as: "button",
-        disabled: isStale,
-        onClick: () => {
-          handleSelect(dispatch, item);
-          _lodash.default.delay(() => {
-            setShowSuggestions(false);
-          }, 150);
-        }
-      }, item.name);
-    });
-  }, [deferredData, dispatch, handleSelect, isStale, setShowSuggestions]);
+  const getDataAtIndex = index => deferredData[index];
+  const ItemComponent = item => /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
+    key: item.name,
+    as: "button",
+    disabled: isStale,
+    onClick: () => {
+      handleSelect(dispatch, item);
+      _lodash.default.delay(() => {
+        setShowSuggestions(false);
+      }, 150);
+    }
+  }, item.name);
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Header, null, "Features"), /*#__PURE__*/_react.default.createElement("div", {
     className: "search-results"
-  }, deferredData?.length ? suggestionsList : /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
+  }, deferredData?.length ? /*#__PURE__*/_react.default.createElement(_VirtualizedList.VirtualizedList, {
+    getDataAtIndex: getDataAtIndex,
+    count: deferredData.length,
+    ItemComponent: ItemComponent,
+    overscan: 500,
+    estimateSize: 32,
+    maxHeight: "25vh"
+  }) : /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
     key: "empty",
     as: "button",
     disabled: true
@@ -120,28 +125,32 @@ function DiseasesSearchResults(_ref2) {
       setShowSuggestions(true);
     }
   }, [fetchedData, isPending, serverError, setShowSuggestions]);
-  const suggestionsList = (0, _react.useMemo)(() => {
-    return deferredData?.map(item => {
-      return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
-        key: item.id,
-        as: "button",
-        disabled: isStale,
-        onClick: () => {
-          dispatch({
-            type: "select.disease",
-            id: item.disease_id,
-            name: item.disease_name
-          });
-          _lodash.default.delay(() => {
-            setShowSuggestions(false);
-          }, 150);
-        }
-      }, item.disease_name);
-    });
-  }, [deferredData, dispatch, isStale, setShowSuggestions]);
+  const getDataAtIndex = index => deferredData[index];
+  const ItemComponent = item => /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
+    key: item.name,
+    as: "button",
+    disabled: isStale,
+    onClick: () => {
+      dispatch({
+        type: "select.disease",
+        id: item.disease_id,
+        name: item.disease_name
+      });
+      _lodash.default.delay(() => {
+        setShowSuggestions(false);
+      }, 150);
+    }
+  }, item.disease_name);
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Header, null, "Diseases"), /*#__PURE__*/_react.default.createElement("div", {
     className: "search-results"
-  }, deferredData?.length ? suggestionsList : /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
+  }, deferredData?.length ? /*#__PURE__*/_react.default.createElement(_VirtualizedList.VirtualizedList, {
+    getDataAtIndex: getDataAtIndex,
+    count: deferredData.length,
+    ItemComponent: ItemComponent,
+    overscan: 250,
+    estimateSize: 32,
+    maxHeight: "25vh"
+  }) : /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
     key: "empty",
     as: "button",
     disabled: true

package/dist/cjs/utils/Legend.js

@@ -5,11 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Legend = Legend;
 var _react = _interopRequireWildcard(require("react"));
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+var _reactFontawesome = require("@fortawesome/react-fontawesome");
 var _lodash = _interopRequireDefault(require("lodash"));
-var _string = require("./string");
 var _constants = require("../constants/constants");
 var _DatasetContext = require("../context/DatasetContext");
 var _colorHelper = require("../helpers/color-helper");
+var _string = require("./string");
 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; }
@@ -48,20 +50,24 @@ function Legend(_ref) {
       className: "gradient"
     }, /*#__PURE__*/_react.default.createElement("p", {
       className: "small m-0 p-0"
-    }, (dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? dataset.selectedVar?.name : dataset.selectedObs?.name) + addText), spanList, /*#__PURE__*/_react.default.createElement("span", {
+    }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+      icon: _freeSolidSvgIcons.faDroplet,
+      className: "me-1"
+    }), (dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? dataset.selectedVar?.name : dataset.selectedObs?.name) + addText), spanList, /*#__PURE__*/_react.default.createElement("span", {
       className: "domain-min"
     }, (0, _string.formatNumerical)(min, _string.FORMATS.EXPONENTIAL)), /*#__PURE__*/_react.default.createElement("span", {
       className: "domain-med"
     }, (0, _string.formatNumerical)((min + max) * 0.5, _string.FORMATS.EXPONENTIAL)), /*#__PURE__*/_react.default.createElement("span", {
       className: "domain-max"
     }, (0, _string.formatNumerical)(max, _string.FORMATS.EXPONENTIAL))));
-  } else {
+  } else if (dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && dataset.selectedObs) {
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "cherita-legend"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "gradient"
+      className: "cherita-legend categorical"
     }, /*#__PURE__*/_react.default.createElement("p", {
-      className: "small m-0 p-0"
-    }, dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && dataset.selectedObs ? dataset.selectedObs.name : "")));
+      className: "legend-text text-end m-0 p-0"
+    }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+      icon: _freeSolidSvgIcons.faDroplet,
+      className: "me-2"
+    }), dataset.selectedObs.name));
   }
 }

package/dist/css/cherita.css

@@ -12027,12 +12027,11 @@ textarea.form-control-lg {
   left: 1rem;
   width: 3rem;
 }
-
-@media (max-width: 1199.98px) {
-  .cherita-spatial-controls {
-    top: 5rem;
-  }
+.cherita-spatial-controls .btn {
+  padding-left: 0;
+  padding-right: 0;
 }
+
 .modern-scrollbars::-webkit-scrollbar {
   width: 20px;
 }
@@ -12111,15 +12110,13 @@ textarea.form-control-lg {
 .cherita-spatial-footer {
   position: absolute;
   z-index: 10;
-  bottom: 1rem;
+  bottom: 0;
   display: flex;
   justify-content: space-between;
-  align-items: flex-end;
+  align-items: end;
   flex-wrap: wrap;
   width: 100%;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-bottom: 1rem;
+  padding: 1rem;
   pointer-events: none;
 }
 .cherita-spatial-footer > * {
@@ -12142,8 +12139,41 @@ textarea.form-control-lg {
 .cherita-legend {
   order: 2;
   width: 12rem;
+  color: #333;
+}
+
+.cherita-legend.categorical {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-left: 1rem;
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  pointer-events: auto;
+}
+.cherita-legend.categorical .legend-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+  display: inline-block;
 }
 
+@media (max-width: 600px) {
+  .cherita-spatial-footer {
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  .cherita-legend {
+    flex-direction: column;
+    align-items: center;
+    margin-top: 1rem;
+    padding: 0;
+  }
+}
 .cherita-accordion-active .accordion-button {
   background-color: #cce3ed;
 }
@@ -12370,10 +12400,6 @@ textarea.form-control-lg {
   left: 1rem;
 }
 
-.search-results {
-  max-height: 25vh;
-  overflow-y: scroll;
-}
 .search-results .dropdown-item {
   white-space: normal;
   overflow-wrap: break-word;