@haniffalab/cherita-react 1.2.0-dev.2025-04-29.181538d6 → 1.2.0-dev.2025-05-16.4367ee63

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

@@ -1,14 +1,18 @@
-import React, { useState, useEffect, useMemo, useDeferredValue } from "react";
+import React, { useDeferredValue, useEffect, useMemo, useState } from "react";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import _ from "lodash";
-import { Dropdown } from "react-bootstrap";
+import { Button, ListGroup } 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,
-    setShowSuggestions,
-    handleSelect
+    handleSelect,
+    selectedResult,
+    setSelectedResult,
+    setResultsLength
   } = _ref;
   const [suggestions, setSuggestions] = useState([]);
   const dispatch = useDatasetDispatch();
@@ -33,51 +37,68 @@ export function VarSearchResults(_ref) {
         });
       } else {
         setSuggestions([]);
-        setShowSuggestions(false);
       }
     };
     return _.debounce(setData, 300);
-  }, [setParams, setShowSuggestions]);
+  }, [setParams]);
   useEffect(() => {
     updateParams(text);
   }, [text, updateParams]);
   useEffect(() => {
     if (!isPending && !serverError) {
       setSuggestions(fetchedData);
-      setShowSuggestions(true);
+      setResultsLength(fetchedData?.length);
     }
-  }, [fetchedData, isPending, serverError, setShowSuggestions]);
+  }, [fetchedData, isPending, serverError, setResultsLength]);
   const getDataAtIndex = index => deferredData[index];
-  const ItemComponent = item => /*#__PURE__*/React.createElement(Dropdown.Item, {
-    key: item.name,
-    as: "button",
+  const ItemComponent = item => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "virtualized-list-wrapper"
+  }, /*#__PURE__*/React.createElement(ListGroup.Item, {
+    key: item,
+    onClick: () => {
+      setSelectedResult(item);
+    },
+    active: selectedResult?.index === item.index
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "d-flex justify-content-between align-items-center w-100"
+  }, /*#__PURE__*/React.createElement("div", null, item.name), /*#__PURE__*/React.createElement("div", {
+    className: "d-flex align-items-center gap-1"
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "button",
+    className: "m-0 p-0 px-1",
+    variant: "outline-secondary",
+    title: "Add to list",
     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", {
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faPlus
+  })))))));
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     className: "search-results"
+  }, /*#__PURE__*/React.createElement(ListGroup, {
+    variant: "flush",
+    className: "cherita-list"
   }, deferredData?.length ? /*#__PURE__*/React.createElement(VirtualizedList, {
     getDataAtIndex: getDataAtIndex,
     count: deferredData.length,
     ItemComponent: ItemComponent,
     overscan: 500,
-    estimateSize: 32,
-    maxHeight: "25vh"
-  }) : /*#__PURE__*/React.createElement(Dropdown.Item, {
+    estimateSize: 42,
+    maxHeight: "70vh"
+  }) : /*#__PURE__*/React.createElement(ListGroup.Item, {
     key: "empty",
     as: "button",
     disabled: true
-  }, !serverError ? isStale || isPending ? "Loading..." : "No items found" : "Failed to fetch data")));
+  }, !text.length ? "Search features" : !serverError ? isStale || isPending ? "Loading..." : "No items found" : "Failed to fetch data"))));
 }
 export function DiseasesSearchResults(_ref2) {
   let {
     text,
-    setShowSuggestions
+    selectedResult,
+    setSelectedResult,
+    setResultsLength
   } = _ref2;
   const [suggestions, setSuggestions] = useState([]);
   const dispatch = useDatasetDispatch();
@@ -112,37 +133,41 @@ export function DiseasesSearchResults(_ref2) {
   useEffect(() => {
     if (!isPending && !serverError) {
       setSuggestions(fetchedData);
-      setShowSuggestions(true);
+      setResultsLength(fetchedData?.length);
     }
-  }, [fetchedData, isPending, serverError, setShowSuggestions]);
+  }, [fetchedData, isPending, serverError, setResultsLength]);
   const getDataAtIndex = index => deferredData[index];
-  const ItemComponent = item => /*#__PURE__*/React.createElement(Dropdown.Item, {
+  const ItemComponent = item => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "virtualized-list-wrapper"
+  }, /*#__PURE__*/React.createElement(ListGroup.Item, {
     key: item.name,
-    as: "button",
-    disabled: isStale,
     onClick: () => {
+      setSelectedResult(item);
       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", {
+    },
+    active: selectedResult?.id === item.id
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "d-flex justify-content-between align-items-center w-100"
+  }, /*#__PURE__*/React.createElement("div", null, item.disease_name)))));
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     className: "search-results"
+  }, /*#__PURE__*/React.createElement(ListGroup, {
+    variant: "flush",
+    className: "cherita-list"
   }, deferredData?.length ? /*#__PURE__*/React.createElement(VirtualizedList, {
     getDataAtIndex: getDataAtIndex,
     count: deferredData.length,
     ItemComponent: ItemComponent,
     overscan: 250,
     estimateSize: 32,
-    maxHeight: "25vh"
-  }) : /*#__PURE__*/React.createElement(Dropdown.Item, {
+    maxHeight: "70vh"
+  }) : /*#__PURE__*/React.createElement(ListGroup.Item, {
     key: "empty",
     as: "button",
     disabled: true
-  }, !serverError ? isStale || isPending ? "Loading..." : "No items found" : "Failed to fetch data")));
+  }, !text.length ? "Search diseases" : !serverError ? isStale || isPending ? "Loading..." : "No items found" : "Failed to fetch data"))));
 }

package/dist/esm/components/var-list/VarItem.js

@@ -8,7 +8,7 @@ import { COLOR_ENCODINGS, SELECTION_MODES } from "../../constants/constants";
 import { useDataset, useDatasetDispatch } from "../../context/DatasetContext";
 import { useFilteredData } from "../../context/FilterContext";
 import { Histogram } from "../../utils/Histogram";
-import { useFetch, useDebouncedFetch } from "../../utils/requests";
+import { useDebouncedFetch, useFetch } from "../../utils/requests";
 import { VirtualizedList } from "../../utils/VirtualizedList";
 function VarHistogram(_ref) {
   let {
@@ -75,7 +75,7 @@ function VarDiseaseInfoItem(item) {
     }
   }))));
 }
-function VarDiseaseInfo(_ref2) {
+export function VarDiseaseInfo(_ref2) {
   let {
     data
   } = _ref2;
@@ -255,4 +255,72 @@ export function VarItem(_ref5) {
   } else {
     return null;
   }
+}
+export function SearchResultItem(_ref6) {
+  let {
+    item,
+    isActive,
+    selectVar,
+    removeVar,
+    isDiseaseGene = false,
+    showSetColorEncoding = true,
+    showRemove = true
+  } = _ref6;
+  const ENDPOINT = "disease/gene";
+  const [openInfo, setOpenInfo] = useState(false);
+  const dataset = useDataset();
+  const params = {
+    geneName: item.name,
+    diseaseDatasets: dataset.diseaseDatasets
+  };
+  const isNotInData = item.matrix_index === -1;
+  const {
+    fetchedData,
+    isPending,
+    serverError
+  } = useFetch(ENDPOINT, params, {
+    refetchOnMount: false,
+    enabled: !!dataset.diseaseDatasets.length
+  });
+  const hasDiseaseInfo = !isPending && !serverError && !!fetchedData?.length;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: `d-flex justify-content-between ${hasDiseaseInfo ? "cursor-pointer" : ""}`,
+    onClick: () => {
+      setOpenInfo(o => !o);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "d-flex justify-content-between align-items-center w-100"
+  }, /*#__PURE__*/React.createElement("div", null, item.name), /*#__PURE__*/React.createElement("div", {
+    className: "d-flex align-items-center gap-1"
+  }, hasDiseaseInfo && /*#__PURE__*/React.createElement(MoreVert, null), showSetColorEncoding && /*#__PURE__*/React.createElement(Button, {
+    type: "button",
+    key: item.matrix_index,
+    variant: isActive ? "primary" : isNotInData ? "outline-secondary" : "outline-primary",
+    className: "m-0 p-0 px-1",
+    onClick: e => {
+      e.stopPropagation();
+      selectVar();
+    },
+    disabled: isNotInData,
+    title: isNotInData ? "Not present in data" : "Set as color encoding"
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faDroplet
+  })), (!isDiseaseGene || !showRemove) && /*#__PURE__*/React.createElement(Button, {
+    type: "button",
+    className: "m-0 p-0 px-1",
+    variant: "outline-secondary",
+    title: "Remove from list",
+    onClick: e => {
+      e.stopPropagation();
+      removeVar();
+    }
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faTrash
+  }))))), hasDiseaseInfo && /*#__PURE__*/React.createElement(Collapse, {
+    in: openInfo
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "mt-2 var-disease-info-collapse"
+  }, /*#__PURE__*/React.createElement(VarDiseaseInfo, {
+    data: fetchedData
+  }))));
 }

package/dist/esm/components/var-list/VarList.js

@@ -4,13 +4,13 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import _ from "lodash";
 import { Alert, Button, ListGroup } from "react-bootstrap";
 import ButtonGroup from "react-bootstrap/ButtonGroup";
+import { VarItem } from "./VarItem";
+import { VarListToolbar } from "./VarListToolbar";
+import { VarSet } from "./VarSet";
 import { SELECTION_MODES, VAR_SORT } from "../../constants/constants";
 import { useDataset, useDatasetDispatch } from "../../context/DatasetContext";
 import { LoadingSpinner } from "../../utils/LoadingIndicators";
 import { useFetch } from "../../utils/requests";
-import { VarItem } from "./VarItem";
-import { VarListToolbar } from "./VarListToolbar";
-import { VarSet } from "./VarSet";
 const useVarMean = function (varKeys) {
   let enabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   const ENDPOINT = "matrix/mean";
@@ -45,93 +45,11 @@ const useVarMean = function (varKeys) {
 const sortMeans = (i, means) => {
   return means[i.name] || _.min(_.values(means)) - 1;
 };
-
-// @TODO: display where disease data comes from
-// add to disease dataset metadata
-function DiseaseVarList(_ref) {
-  let {
-    makeListItem
-  } = _ref;
-  const ENDPOINT = "disease/genes";
-  const dataset = useDataset();
-  const dispatch = useDatasetDispatch();
-  const [diseaseVars, setDiseaseVars] = useState([]);
-  const [sortedDiseaseVars, setSortedDiseaseVars] = useState([]);
-  const [params, setParams] = useState({
-    url: dataset.url,
-    col: dataset.varNamesCol,
-    diseaseId: dataset.selectedDisease?.id,
-    diseaseDatasets: dataset.diseaseDatasets
-  });
-  useEffect(() => {
-    setParams(p => {
-      return {
-        ...p,
-        diseaseId: dataset.selectedDisease?.id
-      };
-    });
-  }, [dataset.selectedDisease]);
-  const diseaseData = useFetch(ENDPOINT, params, {
-    enabled: !!params.diseaseId,
-    refetchOnMount: false
-  });
-  useEffect(() => {
-    if (!diseaseData.isPending && !diseaseData.serverError) {
-      setDiseaseVars(diseaseData.fetchedData);
-    }
-  }, [diseaseData.fetchedData, diseaseData.isPending, diseaseData.serverError]);
-  const varMeans = useVarMean(diseaseVars, !!diseaseVars?.length && dataset.varSort.disease.sort === VAR_SORT.MATRIX);
-  useEffect(() => {
-    if (dataset.varSort.disease.sort === VAR_SORT.MATRIX) {
-      if (!varMeans.isPending && !varMeans.serverError) {
-        setSortedDiseaseVars(_.orderBy(diseaseVars, o => {
-          return sortMeans(o, varMeans.fetchedData);
-        }, dataset.varSort.disease.sortOrder));
-      }
-    } else if (dataset.varSort.disease.sort === VAR_SORT.NAME) {
-      setSortedDiseaseVars(_.orderBy(diseaseVars, "name", dataset.varSort.disease.sortOrder));
-    } else {
-      setSortedDiseaseVars(diseaseVars);
-    }
-  }, [dataset.varSort.disease.sort, dataset.varSort.disease.sortOrder, diseaseVars, varMeans.fetchedData, varMeans.isPending, varMeans.serverError]);
-  const diseaseVarList = _.map(sortedDiseaseVars, item => {
-    return makeListItem(item, true);
-  });
-  const isPending = diseaseData.isPending || varMeans.isPending && dataset.varSort.disease.sort === VAR_SORT.MATRIX;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, dataset.selectedDisease && (!isPending && !diseaseVars?.length ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "d-flex justify-content-between mt-3"
-  }, /*#__PURE__*/React.createElement("h5", null, "Disease genes")), /*#__PURE__*/React.createElement(Alert, {
-    variant: "light"
-  }, "No disease genes found.")) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "d-flex justify-content-between my-2"
-  }, /*#__PURE__*/React.createElement("h5", null, "Disease genes"), /*#__PURE__*/React.createElement(ButtonGroup, {
-    "aria-label": "Feature options",
-    size: "sm"
-  }, /*#__PURE__*/React.createElement(Button, {
-    variant: "info",
-    onClick: () => {
-      dispatch({
-        type: "reset.disease"
-      });
-    }
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faTimes,
-    className: "me-1"
-  }), "Clear"))), /*#__PURE__*/React.createElement("p", null, dataset.selectedDisease?.name), /*#__PURE__*/React.createElement(VarListToolbar, {
-    varType: "disease"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "position-relative"
-  }, isPending && /*#__PURE__*/React.createElement(LoadingSpinner, null), /*#__PURE__*/React.createElement(ListGroup, {
-    variant: "flush",
-    className: "cherita-list"
-  }, diseaseVarList)))));
-}
-export function VarNamesList(_ref2) {
+export function VarNamesList(_ref) {
   let {
     mode = SELECTION_MODES.SINGLE,
-    displayName = "genes",
-    showDiseaseVarList = true
-  } = _ref2;
+    displayName = "genes"
+  } = _ref;
   const dataset = useDataset();
   const dispatch = useDatasetDispatch();
   const [varButtons, setVarButtons] = useState(mode === SELECTION_MODES.SINGLE ? dataset.selectedVar ? _.unionWith([dataset.selectedVar], dataset.varSets, _.isEqual) : [...dataset.varSets] : [...dataset.selectedMultiVar, ...dataset.varSets]);
@@ -285,7 +203,5 @@ export function VarNamesList(_ref2) {
   }, isPending && /*#__PURE__*/React.createElement(LoadingSpinner, null), /*#__PURE__*/React.createElement(ListGroup, {
     variant: "flush",
     className: "cherita-list"
-  }, varList)))), /*#__PURE__*/React.createElement(React.Fragment, null, showDiseaseVarList && /*#__PURE__*/React.createElement(DiseaseVarList, {
-    makeListItem: makeListItem
-  }))));
+  }, varList))))));
 }

package/dist/esm/components/var-list/VarSet.js

@@ -1,13 +1,12 @@
 import React, { useState } from "react";
-import { faCircleInfo, faDroplet, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { faChevronDown, faChevronUp, faCircleInfo, faDroplet, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { List } from "@mui/icons-material";
 import _ from "lodash";
 import { Button, Collapse, ListGroup, OverlayTrigger, Tooltip } from "react-bootstrap";
+import { SingleSelectionItem } from "./VarItem";
 import { COLOR_ENCODINGS, SELECTION_MODES } from "../../constants/constants";
 import { useDataset, useDatasetDispatch } from "../../context/DatasetContext";
-import { SearchBar } from "../search-bar/SearchBar";
-import { SingleSelectionItem } from "./VarItem";
+import { SearchModal } from "../search-bar/SearchBar";
 
 // @TODO: add button to score genes and plot
 
@@ -24,10 +23,11 @@ function SingleSelectionSet(_ref) {
     isActive,
     selectSet,
     removeSet,
-    removeSetVar,
-    showSearchBar = true
+    removeSetVar
   } = _ref;
   const [openSet, setOpenSet] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+  const [searchText, setSearchText] = useState("");
   const varList = set.vars.length ? _.map(set.vars, v => {
     return /*#__PURE__*/React.createElement(ListGroup.Item, {
       key: v.name
@@ -46,16 +46,38 @@ function SingleSelectionSet(_ref) {
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: "d-flex justify-content-between align-items-center w-100"
-  }, /*#__PURE__*/React.createElement("div", null, set.name), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ellipsis-text",
+    title: set.name
+  }, set.name), /*#__PURE__*/React.createElement("div", {
     className: "d-flex align-items-center gap-1"
   }, /*#__PURE__*/React.createElement(OverlayTrigger, {
     placement: "top",
     overlay: /*#__PURE__*/React.createElement(Tooltip, null, "This set represents the mean value of its features")
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faCircleInfo
-  })), /*#__PURE__*/React.createElement(List, null), /*#__PURE__*/React.createElement(Button, {
+  })), /*#__PURE__*/React.createElement(Button, {
+    type: "button",
+    variant: "outline-primary",
+    className: "m-0 p-0 px-1",
+    disabled: !set.vars.length,
+    title: "Open set"
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: openSet ? faChevronUp : faChevronDown
+  })), /*#__PURE__*/React.createElement(Button, {
+    type: "button",
+    variant: "outline-primary",
+    className: "m-0 p-0 px-1",
+    onClick: e => {
+      e.stopPropagation();
+      setShowModal(true);
+    },
+    disabled: !set.vars.length,
+    title: "Add to set"
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faPlus
+  })), /*#__PURE__*/React.createElement(Button, {
     type: "button",
-    key: set.name,
     variant: isActive ? "primary" : "outline-primary",
     className: "m-0 p-0 px-1",
     onClick: e => {
@@ -81,17 +103,21 @@ function SingleSelectionSet(_ref) {
     in: openSet
   }, /*#__PURE__*/React.createElement("div", {
     className: "mt-2"
-  }, showSearchBar &&
-  /*#__PURE__*/
-  // @TODO: fix how results are displayed, should be placed on top of parent components
-  React.createElement(SearchBar, {
-    handleSelect: (d, i) => addVarToSet(d, set, i)
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "mx-2"
   }, /*#__PURE__*/React.createElement(ListGroup, {
     variant: "flush",
-    className: "cherita-list"
-  }, varList)))));
+    className: "cherita-list var-set-list"
+  }, varList))), /*#__PURE__*/React.createElement(SearchModal, {
+    show: showModal,
+    handleClose: () => setShowModal(false),
+    text: searchText,
+    setText: setSearchText,
+    displayText: "features",
+    handleSelect: (d, i) => {
+      addVarToSet(d, set, i);
+    },
+    searchVar: true,
+    searchDiseases: false
+  }));
 }
 function MultipleSelectionSet(_ref2) {
   let {

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-29.181538d6",
+  "version": "1.2.0-dev.2025-05-16.4367ee63",
   "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": "181538d6c7cc4cd43ce73f241e370abcc21ab301"
+  "prereleaseSha": "4367ee63df5209cda070f21e714ac5c6ccaa1e2c"
 }

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 {
@@ -362,3 +395,9 @@ $gauge-padding: 0.15rem;
   margin-right: 0.4rem;
   width: 1rem;
 }
+
+.ellipsis-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

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;
+    }
   }
 }
 
@@ -100,3 +102,8 @@
     }
   }
 }
+
+.search-modal-info {
+  overflow-y: auto;
+  border-left: 1px solid #dee2e6;
+}

package/scss/components/lists.scss

@@ -13,6 +13,10 @@
     color: var(--#{$prefix}body-color);
     background-color: var(--#{$prefix}tertiary-bg);
     border-radius: var(--#{$prefix}border-radius);
+    cursor: pointer;
+  }
+  .list-group-item.active {
+    background-color: var(--#{$prefix}secondary-bg);
   }
 }
 .obs-statistics {
@@ -24,3 +28,10 @@
   background-color: var(--#{$prefix}tertiary-bg);
   border-radius: var(--#{$prefix}border-radius);
 }
+
+.cherita-list.var-set-list {
+  .list-group-item {
+    padding-right: 0;
+    padding-left: 0.35rem;
+  }
+}