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

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

@@ -3,6 +3,7 @@ import _ from "lodash";
 import { Dropdown } from "react-bootstrap";
 import { useDatasetDispatch } from "../../context/DatasetContext";
 import { useDiseaseSearch, useVarSearch } from "../../utils/search";
+import { VirtualizedList } from "../../utils/VirtualizedList";
 export function VarSearchResults(_ref) {
   let {
     text,
@@ -46,24 +47,28 @@ export function VarSearchResults(_ref) {
       setShowSuggestions(true);
     }
   }, [fetchedData, isPending, serverError, setShowSuggestions]);
-  const suggestionsList = useMemo(() => {
-    return deferredData?.map(item => {
-      return /*#__PURE__*/React.createElement(Dropdown.Item, {
-        key: item.name,
-        as: "button",
-        disabled: isStale,
-        onClick: () => {
-          handleSelect(dispatch, item);
-          _.delay(() => {
-            setShowSuggestions(false);
-          }, 150);
-        }
-      }, item.name);
-    });
-  }, [deferredData, dispatch, handleSelect, isStale, setShowSuggestions]);
+  const getDataAtIndex = index => deferredData[index];
+  const ItemComponent = item => /*#__PURE__*/React.createElement(Dropdown.Item, {
+    key: item.name,
+    as: "button",
+    disabled: isStale,
+    onClick: () => {
+      handleSelect(dispatch, item);
+      _.delay(() => {
+        setShowSuggestions(false);
+      }, 150);
+    }
+  }, item.name);
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Dropdown.Header, null, "Features"), /*#__PURE__*/React.createElement("div", {
     className: "search-results"
-  }, deferredData?.length ? suggestionsList : /*#__PURE__*/React.createElement(Dropdown.Item, {
+  }, deferredData?.length ? /*#__PURE__*/React.createElement(VirtualizedList, {
+    getDataAtIndex: getDataAtIndex,
+    count: deferredData.length,
+    ItemComponent: ItemComponent,
+    overscan: 500,
+    estimateSize: 32,
+    maxHeight: "25vh"
+  }) : /*#__PURE__*/React.createElement(Dropdown.Item, {
     key: "empty",
     as: "button",
     disabled: true
@@ -110,28 +115,32 @@ export function DiseasesSearchResults(_ref2) {
       setShowSuggestions(true);
     }
   }, [fetchedData, isPending, serverError, setShowSuggestions]);
-  const suggestionsList = useMemo(() => {
-    return deferredData?.map(item => {
-      return /*#__PURE__*/React.createElement(Dropdown.Item, {
-        key: item.id,
-        as: "button",
-        disabled: isStale,
-        onClick: () => {
-          dispatch({
-            type: "select.disease",
-            id: item.disease_id,
-            name: item.disease_name
-          });
-          _.delay(() => {
-            setShowSuggestions(false);
-          }, 150);
-        }
-      }, item.disease_name);
-    });
-  }, [deferredData, dispatch, isStale, setShowSuggestions]);
+  const getDataAtIndex = index => deferredData[index];
+  const ItemComponent = item => /*#__PURE__*/React.createElement(Dropdown.Item, {
+    key: item.name,
+    as: "button",
+    disabled: isStale,
+    onClick: () => {
+      dispatch({
+        type: "select.disease",
+        id: item.disease_id,
+        name: item.disease_name
+      });
+      _.delay(() => {
+        setShowSuggestions(false);
+      }, 150);
+    }
+  }, item.disease_name);
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Dropdown.Header, null, "Diseases"), /*#__PURE__*/React.createElement("div", {
     className: "search-results"
-  }, deferredData?.length ? suggestionsList : /*#__PURE__*/React.createElement(Dropdown.Item, {
+  }, deferredData?.length ? /*#__PURE__*/React.createElement(VirtualizedList, {
+    getDataAtIndex: getDataAtIndex,
+    count: deferredData.length,
+    ItemComponent: ItemComponent,
+    overscan: 250,
+    estimateSize: 32,
+    maxHeight: "25vh"
+  }) : /*#__PURE__*/React.createElement(Dropdown.Item, {
     key: "empty",
     as: "button",
     disabled: true

package/dist/esm/utils/Legend.js

@@ -1,9 +1,11 @@
 import React, { useMemo } from "react";
+import { faDroplet } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import _ from "lodash";
-import { formatNumerical, FORMATS } from "./string";
 import { COLOR_ENCODINGS } from "../constants/constants";
 import { useDataset } from "../context/DatasetContext";
 import { rgbToHex, useColor } from "../helpers/color-helper";
+import { formatNumerical, FORMATS } from "./string";
 export function Legend(_ref) {
   let {
     isCategorical = false,
@@ -39,20 +41,24 @@ export function Legend(_ref) {
       className: "gradient"
     }, /*#__PURE__*/React.createElement("p", {
       className: "small m-0 p-0"
-    }, (dataset.colorEncoding === COLOR_ENCODINGS.VAR ? dataset.selectedVar?.name : dataset.selectedObs?.name) + addText), spanList, /*#__PURE__*/React.createElement("span", {
+    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: faDroplet,
+      className: "me-1"
+    }), (dataset.colorEncoding === COLOR_ENCODINGS.VAR ? dataset.selectedVar?.name : dataset.selectedObs?.name) + addText), spanList, /*#__PURE__*/React.createElement("span", {
       className: "domain-min"
     }, formatNumerical(min, FORMATS.EXPONENTIAL)), /*#__PURE__*/React.createElement("span", {
       className: "domain-med"
     }, formatNumerical((min + max) * 0.5, FORMATS.EXPONENTIAL)), /*#__PURE__*/React.createElement("span", {
       className: "domain-max"
     }, formatNumerical(max, FORMATS.EXPONENTIAL))));
-  } else {
+  } else if (dataset.colorEncoding === COLOR_ENCODINGS.OBS && dataset.selectedObs) {
     return /*#__PURE__*/React.createElement("div", {
-      className: "cherita-legend"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "gradient"
+      className: "cherita-legend categorical"
     }, /*#__PURE__*/React.createElement("p", {
-      className: "small m-0 p-0"
-    }, dataset.colorEncoding === COLOR_ENCODINGS.OBS && dataset.selectedObs ? dataset.selectedObs.name : "")));
+      className: "legend-text text-end m-0 p-0"
+    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: faDroplet,
+      className: "me-2"
+    }), dataset.selectedObs.name));
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "1.2.0-dev.2025-04-28.623a001f",
+  "version": "1.2.0-dev.2025-04-30.0a204a1c",
   "author": "Haniffa Lab",
   "license": "MIT",
   "keywords": [
@@ -124,5 +124,5 @@
     "url": "https://github.com/haniffalab/cherita-react/issues"
   },
   "homepage": "https://github.com/haniffalab/cherita-react#readme",
-  "prereleaseSha": "623a001f39d78904c6e7fe4c9c782a0a486a1119"
+  "prereleaseSha": "0a204a1c659c6b7f9438049af143289feccd943b"
 }

package/scss/cherita.scss

@@ -73,15 +73,13 @@ $prefix: "bs-" !default;
 .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;
 
   > * {
@@ -105,6 +103,41 @@ $prefix: "bs-" !default;
 .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;
+  .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 {
@@ -352,9 +385,6 @@ $gauge-padding: 0.15rem;
 }
 
 .search-results {
-  max-height: 25vh;
-  overflow-y: scroll;
-
   .dropdown-item {
     white-space: normal;
     overflow-wrap: break-word;

package/scss/components/layouts.scss

@@ -2,19 +2,21 @@
   position: relative;
 }
 
-.cherita-app .cherita-navbar {
-  @extend .m-3;
-  @extend .d-block;
-  @extend .d-xl-none;
-
-  position: absolute;
-  z-index: 11;
-  top: 0;
-  left: 0;
-  right: 0;
-  border-radius: 0.25rem;
-  @media (min-width: 992px) and (max-width: 1199px) {
-    margin-left: calc(33.33333333% + 1rem) !important;
+.cherita-app {
+  .cherita-navbar {
+    @extend .m-3;
+    @extend .d-block;
+    @extend .d-xl-none;
+
+    position: absolute;
+    z-index: 11;
+    top: 0;
+    left: 0;
+    right: 0;
+    border-radius: 0.25rem;
+    @media (min-width: 992px) and (max-width: 1199px) {
+      margin-left: calc(33.33333333% + 1rem) !important;
+    }
   }
 }
 

package/scss/components/plots.scss

@@ -4,10 +4,8 @@
   top: 1rem;
   left: 1rem;
   width: 3rem;
-}
-
-@media (max-width: 1199.98px) {
-  .cherita-spatial-controls {
-    top: 5rem;
+  .btn {
+    padding-left: 0;
+    padding-right: 0;
   }
 }