@haniffalab/cherita-react 1.0.0-dev.2025-03-27.d22a5d51 → 1.0.0-dev.2025-04-01.e61c9d78

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

@@ -1,58 +1,17 @@
 import React from "react";
-import { faDroplet, faListOl, faScissors } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import _ from "lodash";
-import { Button, ButtonGroup, Form } from "react-bootstrap";
-import { COLOR_ENCODINGS } from "../../constants/constants";
-import { useDataset } from "../../context/DatasetContext";
+import { Form } from "react-bootstrap";
 export function ObsToolbar(_ref) {
   let {
     item,
     showToggleAllObs = true,
-    showLabel = true,
-    showSlice = true,
-    showColor = true,
-    onToggleAllObs,
-    onToggleLabel,
-    onToggleSlice,
-    onToggleColor
+    onToggleAllObs
   } = _ref;
-  const dataset = useDataset();
   const allToggledOn = !item.omit.length;
-  const inLabelObs = _.some(dataset.labelObs, i => i.name === item.name);
-  const inSliceObs = dataset.sliceBy.obs && dataset.selectedObs?.name === item.name;
-  const isColorEncoding = dataset.colorEncoding === COLOR_ENCODINGS.OBS && dataset.selectedObs?.name === item.name;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "d-flex align-items-center"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex-grow-1"
-  }, showToggleAllObs && /*#__PURE__*/React.createElement(Form.Check, {
-    // prettier-ignore
+  return showToggleAllObs && /*#__PURE__*/React.createElement(Form.Check, {
     type: "switch",
     id: "custom-switch",
     label: "Toggle all",
     checked: allToggledOn,
     onChange: onToggleAllObs
-  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ButtonGroup, null, showLabel && /*#__PURE__*/React.createElement(Button, {
-    variant: inLabelObs ? "primary" : "outline-primary",
-    size: "sm",
-    onClick: onToggleLabel,
-    title: "Add to tooltip"
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faListOl
-  })), showSlice && /*#__PURE__*/React.createElement(Button, {
-    variant: inSliceObs ? "primary" : "outline-primary",
-    size: "sm",
-    onClick: onToggleSlice,
-    title: "Filter to selected"
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faScissors
-  })), showColor && /*#__PURE__*/React.createElement(Button, {
-    variant: isColorEncoding ? "primary" : "outline-primary",
-    size: "sm",
-    onClick: onToggleColor,
-    title: "Set as color encoding"
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faDroplet
-  })))));
+  });
 }

package/dist/esm/components/obsm-list/ObsmList.js

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
-import { Dropdown, Button, DropdownButton, ButtonGroup, OverlayTrigger, Tooltip } from "react-bootstrap";
+import { Button, ButtonGroup, Dropdown, DropdownButton, OverlayTrigger, Tooltip } from "react-bootstrap";
 import { useDataset, useDatasetDispatch } from "../../context/DatasetContext";
-import { LoadingSpinner } from "../../utils/LoadingIndicators";
 import { useFetch } from "../../utils/requests";
+import { ObsmKeysListBtn } from "../../utils/Skeleton";
 export function ObsmKeysList() {
   const ENDPOINT = "obsm/keys";
   const dataset = useDataset();
@@ -50,13 +50,16 @@ export function ObsmKeysList() {
     }, item);
   });
   if (!serverError) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, isPending && /*#__PURE__*/React.createElement(LoadingSpinner, null), /*#__PURE__*/React.createElement(DropdownButton, {
+    if (isPending) {
+      return /*#__PURE__*/React.createElement(ObsmKeysListBtn, null);
+    }
+    return /*#__PURE__*/React.createElement(DropdownButton, {
       as: 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.createElement(Dropdown.Header, null, "Embeddings"), obsmList);
   } else {
     return /*#__PURE__*/React.createElement(OverlayTrigger, {
       placement: "top",

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useMemo, useCallback, useDeferredValue, useRef } from "react";
+import React, { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
 import { ScatterplotLayer } from "@deck.gl/layers";
 import { DeckGL } from "@deck.gl/react";
 import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
@@ -7,8 +7,6 @@ import { ViewMode } from "@nebula.gl/edit-modes";
 import { EditableGeoJsonLayer } from "@nebula.gl/layers";
 import _ from "lodash";
 import { Alert } from "react-bootstrap";
-import { SpatialControls } from "./SpatialControls";
-import { Toolbox } from "./Toolbox";
 import { COLOR_ENCODINGS, OBS_TYPES, SELECTED_POLYGON_FILLCOLOR, UNSELECTED_POLYGON_FILLCOLOR } from "../../constants/constants";
 import { useDataset, useDatasetDispatch } from "../../context/DatasetContext";
 import { useFilteredData } from "../../context/FilterContext";
@@ -19,6 +17,8 @@ import { Legend } from "../../utils/Legend";
 import { LoadingLinear, LoadingSpinner } from "../../utils/LoadingIndicators";
 import { formatNumerical } from "../../utils/string";
 import { useLabelObsData } from "../../utils/zarrData";
+import { SpatialControls } from "./SpatialControls";
+import { Toolbox } from "./Toolbox";
 window.deck.log.level = 1;
 const INITIAL_VIEW_STATE = {
   longitude: 0,

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

@@ -1,15 +1,14 @@
 import React, { useState } from "react";
-import { faPlus, faMinus, faCrosshairs, faHand, faDrawPolygon, faTrash, faSliders } from "@fortawesome/free-solid-svg-icons";
+import { faCrosshairs, faDrawPolygon, faHand, faMinus, faPen, faPlus, faSliders, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { JoinInner } from "@mui/icons-material";
-import { DrawPolygonMode, DrawLineStringMode, DrawPolygonByDraggingMode, DrawRectangleMode, ViewMode, ModifyMode } from "@nebula.gl/edit-modes";
+import { DrawLineStringMode, DrawPolygonByDraggingMode, DrawPolygonMode, DrawRectangleMode, ModifyMode, ViewMode } from "@nebula.gl/edit-modes";
 import Button from "react-bootstrap/Button";
 import ButtonGroup from "react-bootstrap/ButtonGroup";
 import Dropdown from "react-bootstrap/Dropdown";
-import DropdownButton from "react-bootstrap/DropdownButton";
-import { ScatterplotControls } from "./ScatterplotControls";
 import { useDataset, useDatasetDispatch } from "../../context/DatasetContext";
 import { OffcanvasControls } from "../offcanvas";
+import { ScatterplotControls } from "./ScatterplotControls";
 export function SpatialControls(_ref) {
   let {
     mode,
@@ -53,13 +52,8 @@ export function SpatialControls(_ref) {
       features: []
     });
   };
-  const polygonControls = /*#__PURE__*/React.createElement("div", {
-    className: "mt-2"
-  }, /*#__PURE__*/React.createElement(ButtonGroup, {
-    vertical: true,
-    className: "w-100"
-  }, /*#__PURE__*/React.createElement(Button, {
-    variant: dataset.sliceBy.polygons ? "primary" : "outline-primary",
+  const polygonControls = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    active: dataset.sliceBy.polygons,
     title: "Filter data with polygons",
     onClick: () => {
       setMode(() => ViewMode);
@@ -68,7 +62,6 @@ export function SpatialControls(_ref) {
       });
     }
   }, /*#__PURE__*/React.createElement(JoinInner, null)), /*#__PURE__*/React.createElement(Button, {
-    variant: "outline-primary",
     title: "Delete selected polygons",
     onClick: () => {
       const newFeatures = features.features.filter((_f, i) => !selectedFeatureIndexes.includes(i));
@@ -80,12 +73,12 @@ export function SpatialControls(_ref) {
     disabled: !selectedFeatureIndexes.length
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faTrash
-  }))));
+  })));
   return /*#__PURE__*/React.createElement("div", {
     className: "cherita-spatial-controls"
   }, /*#__PURE__*/React.createElement(ButtonGroup, {
     vertical: true,
-    className: "w-100"
+    className: "w-100 mb-1"
   }, /*#__PURE__*/React.createElement(Button, {
     onClick: increaseZoom,
     title: "Increase zoom"
@@ -102,37 +95,44 @@ export function SpatialControls(_ref) {
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faCrosshairs
   })), /*#__PURE__*/React.createElement(Button, {
+    onClick: handleShowControls
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faSliders
+  }))), /*#__PURE__*/React.createElement(ButtonGroup, {
+    vertical: true,
+    className: "w-100"
+  }, /*#__PURE__*/React.createElement(Button, {
     onClick: () => setMode(() => ViewMode),
     title: "Set dragging mode",
-    variant: mode === ViewMode ? "primary" : "outline-primary"
+    active: mode === ViewMode
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faHand
-  })), /*#__PURE__*/React.createElement(DropdownButton, {
+  })), /*#__PURE__*/React.createElement(Dropdown, {
     as: ButtonGroup,
-    title: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      icon: faDrawPolygon
-    })),
-    drop: "end",
-    id: "bg-vertical-dropdown-1",
     className: "caret-off",
+    drop: "end",
     onSelect: onSelect
-  }, /*#__PURE__*/React.createElement(Dropdown.Header, null, "Selection tools"), /*#__PURE__*/React.createElement(Dropdown.Item, {
-    eventKey: "DrawPolygonMode"
-  }, "Draw a polygon"), /*#__PURE__*/React.createElement(Dropdown.Item, {
+  }, /*#__PURE__*/React.createElement(Dropdown.Toggle, {
+    id: "dropdown-autoclose-outside",
+    className: `caret-off ${mode === DrawPolygonByDraggingMode || mode === ModifyMode ? "active" : ""}`
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faDrawPolygon
+  })), /*#__PURE__*/React.createElement(Dropdown.Menu, null, /*#__PURE__*/React.createElement(Dropdown.Header, null, "Polygon tools"), /*#__PURE__*/React.createElement(Dropdown.Item, {
     eventKey: "DrawPolygonByDraggingMode"
-  }, "Draw a Polygon by Dragging"), /*#__PURE__*/React.createElement(Dropdown.Item, {
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faDrawPolygon,
+    className: "nav-icon"
+  }), "Draw a polygon"), /*#__PURE__*/React.createElement(Dropdown.Item, {
     eventKey: "ModifyMode"
-  }, "Modify polygons"), /*#__PURE__*/React.createElement(Dropdown.Item, {
-    eventKey: "ViewMode"
-  }, "Viewing mode"), /*#__PURE__*/React.createElement(Dropdown.Item, {
-    onClick: deleteFeatures
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faTrash
-  }), " Delete polygons")), /*#__PURE__*/React.createElement(Button, {
-    onClick: handleShowControls
+    icon: faPen,
+    className: "nav-icon"
+  }), "Modify polygons"), /*#__PURE__*/React.createElement(Dropdown.Item, {
+    onClick: deleteFeatures
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faSliders
-  }))), !!features?.features?.length && polygonControls, /*#__PURE__*/React.createElement(OffcanvasControls, {
+    icon: faTrash,
+    className: "nav-icon"
+  }), "Delete polygons"))), !!features?.features?.length && polygonControls), /*#__PURE__*/React.createElement(OffcanvasControls, {
     show: showControls,
     handleClose: handleCloseControls,
     Controls: ScatterplotControls

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

@@ -1,8 +1,7 @@
 import React from "react";
 import { faDroplet } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import Button from "react-bootstrap/Button";
-import ButtonGroup from "react-bootstrap/ButtonGroup";
+import { Button, ButtonGroup, OverlayTrigger, Tooltip } from "react-bootstrap";
 import { formatNumerical } from "../../utils/string";
 import { ObsmKeysList } from "../obsm-list/ObsmList";
 export function Toolbox(_ref) {
@@ -13,13 +12,44 @@ export function Toolbox(_ref) {
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
     className: "cherita-toolbox"
-  }, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(ObsmKeysList, null), /*#__PURE__*/React.createElement(Button, {
-    size: "sm"
+  }, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(ObsmKeysList, null), mode && /*#__PURE__*/React.createElement(OverlayTrigger, {
+    placement: "top",
+    overlay: /*#__PURE__*/React.createElement(Tooltip, {
+      id: "tooltip-dropped-mode"
+    }, "The color scale is currently set to ", mode)
+  }, /*#__PURE__*/React.createElement(Button, {
+    size: "sm",
+    variant: "primary",
+    style: {
+      cursor: "default"
+    },
+    "aria-disabled": "true"
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faDroplet
-  }), " ", mode), (mode || !isNaN(obsLength)) && (mode !== null && !isNaN(slicedLength) && slicedLength !== obsLength ? /*#__PURE__*/React.createElement(Button, {
-    size: "sm"
-  }, formatNumerical(slicedLength), " out of", " ", formatNumerical(obsLength), " cells") : /*#__PURE__*/React.createElement(Button, {
-    size: "sm"
-  }, formatNumerical(obsLength), " cells"))));
+    icon: faDroplet,
+    className: "me-1"
+  }), " ", mode)), (mode || !isNaN(obsLength)) && (mode !== null && !isNaN(slicedLength) && slicedLength !== obsLength ? /*#__PURE__*/React.createElement(OverlayTrigger, {
+    placement: "top",
+    overlay: /*#__PURE__*/React.createElement(Tooltip, {
+      id: "tooltip-dropped-mode"
+    }, "You have selected ", formatNumerical(slicedLength), " out of", " ", formatNumerical(obsLength), " cells")
+  }, /*#__PURE__*/React.createElement(Button, {
+    size: "sm",
+    variant: "primary",
+    style: {
+      cursor: "default"
+    },
+    "aria-disabled": "true"
+  }, formatNumerical(slicedLength), " of ", formatNumerical(obsLength), " ", "cells")) : /*#__PURE__*/React.createElement(OverlayTrigger, {
+    placement: "top",
+    overlay: /*#__PURE__*/React.createElement(Tooltip, {
+      id: "tooltip-dropped-mode"
+    }, "You are viewing ", formatNumerical(obsLength), " cells")
+  }, /*#__PURE__*/React.createElement(Button, {
+    size: "sm",
+    variant: "primary",
+    style: {
+      cursor: "default"
+    },
+    "aria-disabled": "true"
+  }, formatNumerical(obsLength), " cells")))));
 }

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

@@ -1,6 +1,7 @@
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
+import SearchIcon from "@mui/icons-material/Search";
 import _ from "lodash";
-import { Form, FormGroup, Dropdown } from "react-bootstrap";
+import { Dropdown, Form, FormGroup, InputGroup } from "react-bootstrap";
 import { DiseasesSearchResults, VarSearchResults } from "./SearchResults";
 function onVarSelect(dispatch, item) {
   dispatch({
@@ -31,11 +32,13 @@ export function SearchBar(_ref) {
       setShowSuggestions(true);
     }
   }, [text]);
+
+  //@TODO: Abstract styles
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Form, {
     onSubmit: e => {
       e.preventDefault();
     }
-  }, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Form.Control, {
+  }, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(InputGroup, null, /*#__PURE__*/React.createElement(Form.Control, {
     ref: inputRef,
     onFocus: () => {
       setShowSuggestions(text.length > 0);
@@ -50,8 +53,21 @@ export function SearchBar(_ref) {
     value: text,
     onChange: e => {
       setText(e.target.value);
+    },
+    style: {
+      paddingLeft: "2.5rem",
+      borderRadius: "5px"
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      left: "10px",
+      top: "50%",
+      transform: "translateY(-50%)",
+      pointerEvents: "none",
+      zIndex: 10
     }
-  }), /*#__PURE__*/React.createElement(Dropdown, {
+  }, /*#__PURE__*/React.createElement(SearchIcon, null))), /*#__PURE__*/React.createElement(Dropdown, {
     show: showSuggestions,
     onMouseDown: e => {
       e.preventDefault();

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

@@ -1,14 +1,16 @@
 import React, { useEffect, useState } from "react";
-import { Add } from "@mui/icons-material";
+import { faTimes } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import _ from "lodash";
-import { ListGroup, Button, Alert } from "react-bootstrap";
-import { VarItem } from "./VarItem";
-import { VarListToolbar } from "./VarListToolbar";
-import { VarSet } from "./VarSet";
+import { Alert, Button, ListGroup } from "react-bootstrap";
+import ButtonGroup from "react-bootstrap/ButtonGroup";
 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";
@@ -101,19 +103,28 @@ function DiseaseVarList(_ref) {
   }, /*#__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 mt-3"
-  }, /*#__PURE__*/React.createElement("h5", null, "Disease genes"), /*#__PURE__*/React.createElement(Button, {
-    variant: "link",
+    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"
       });
     }
-  }, "clear")), /*#__PURE__*/React.createElement("p", null, dataset.selectedDisease?.name), /*#__PURE__*/React.createElement(VarListToolbar, {
+  }, /*#__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, null, diseaseVarList)))));
+  }, isPending && /*#__PURE__*/React.createElement(LoadingSpinner, null), /*#__PURE__*/React.createElement(ListGroup, {
+    variant: "flush",
+    className: "cherita-list"
+  }, diseaseVarList)))));
 }
 export function VarNamesList(_ref2) {
   let {
@@ -237,10 +248,12 @@ export function VarNamesList(_ref2) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "overflow-auto mt-3"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "d-flex justify-content-between"
-  }, /*#__PURE__*/React.createElement("h5", null, _.capitalize(displayName)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
-    variant: "light",
-    className: "p-1",
+    className: "d-flex justify-content-between mb-2"
+  }, /*#__PURE__*/React.createElement("h5", null, _.capitalize(displayName)), /*#__PURE__*/React.createElement(ButtonGroup, {
+    "aria-label": "Feature options",
+    size: "sm"
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "info",
     onClick: () => {
       dispatch({
         type: "add.varSet",
@@ -251,8 +264,8 @@ export function VarNamesList(_ref2) {
         }
       });
     }
-  }, /*#__PURE__*/React.createElement(Add, null), "New set"), /*#__PURE__*/React.createElement(Button, {
-    variant: "link",
+  }, "New set"), /*#__PURE__*/React.createElement(Button, {
+    variant: "info",
     onClick: () => {
       setVarButtons([]);
       dispatch({
@@ -262,11 +275,17 @@ export function VarNamesList(_ref2) {
         type: "reset.varSets"
       });
     }
-  }, "clear"))), /*#__PURE__*/React.createElement(React.Fragment, null, !varList.length ? /*#__PURE__*/React.createElement(Alert, {
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faTimes,
+    className: "me-1"
+  }), "Clear"))), /*#__PURE__*/React.createElement(React.Fragment, null, !varList.length ? /*#__PURE__*/React.createElement(Alert, {
     variant: "light"
   }, "Search for a feature.") : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(VarListToolbar, null), /*#__PURE__*/React.createElement("div", {
     className: "position-relative"
-  }, isPending && /*#__PURE__*/React.createElement(LoadingSpinner, null), /*#__PURE__*/React.createElement(ListGroup, null, varList)))), /*#__PURE__*/React.createElement(React.Fragment, null, showDiseaseVarList && /*#__PURE__*/React.createElement(DiseaseVarList, {
+  }, 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
   }))));
 }

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

@@ -1,8 +1,7 @@
 import React, { useState } from "react";
-import { faArrowDownAZ, faArrowUpZA, faArrowDown19, faArrowUp91, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { faArrowDown19, faArrowDownAZ, faArrowUp91, faArrowUpZA, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { ToggleButton, ToggleButtonGroup } from "@mui/material";
-import { Navbar, InputGroup } from "react-bootstrap";
+import { ToggleButton, ToggleButtonGroup } from "react-bootstrap";
 import { VAR_SORT, VAR_SORT_ORDER } from "../../constants/constants";
 import { useDataset, useDatasetDispatch } from "../../context/DatasetContext";
 
@@ -36,13 +35,15 @@ export function VarListToolbar(_ref) {
       });
     }
   };
-  return /*#__PURE__*/React.createElement(Navbar, {
-    className: "var-list-toolbar"
-  }, /*#__PURE__*/React.createElement(InputGroup, null, /*#__PURE__*/React.createElement(InputGroup.Text, null, "Sort by:"), /*#__PURE__*/React.createElement(ToggleButtonGroup, {
-    "aria-label": "Sort feature by",
-    size: "small",
-    className: "mh-100"
+  return /*#__PURE__*/React.createElement("div", {
+    className: "d-flex justify-content-end align-items-center mb-2"
+  }, /*#__PURE__*/React.createElement(ToggleButtonGroup, {
+    name: "sortfeatures",
+    "aria-label": "Sort features by",
+    size: "sm",
+    type: "radio"
   }, /*#__PURE__*/React.createElement(ToggleButton, {
+    id: VAR_SORT.NAME,
     value: VAR_SORT.NAME,
     "aria-label": "alphabetical",
     title: "Sort alphabetically",
@@ -55,6 +56,7 @@ export function VarListToolbar(_ref) {
   }) : /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faArrowUpZA
   })), /*#__PURE__*/React.createElement(ToggleButton, {
+    id: VAR_SORT.MATRIX,
     value: VAR_SORT.MATRIX,
     "aria-label": "matrix value",
     title: "Sort by matrix value",
@@ -67,6 +69,7 @@ export function VarListToolbar(_ref) {
   }) : /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faArrowUp91
   })), /*#__PURE__*/React.createElement(ToggleButton, {
+    id: "none",
     value: "none",
     "aria-label": "none",
     title: "No sorting",
@@ -80,5 +83,5 @@ export function VarListToolbar(_ref) {
     }
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faXmark
-  })))));
+  }))));
 }

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

@@ -1,13 +1,13 @@
 import React, { useState } from "react";
-import { faDroplet, faTrash, faCircleInfo } from "@fortawesome/free-solid-svg-icons";
+import { faCircleInfo, faDroplet, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { List } from "@mui/icons-material";
 import _ from "lodash";
-import { ListGroup, Button, Collapse, OverlayTrigger, Tooltip } from "react-bootstrap";
-import { SingleSelectionItem } from "./VarItem";
+import { Button, Collapse, ListGroup, OverlayTrigger, Tooltip } from "react-bootstrap";
 import { COLOR_ENCODINGS, SELECTION_MODES } from "../../constants/constants";
 import { useDataset, useDatasetDispatch } from "../../context/DatasetContext";
 import { SearchBar } from "../search-bar/SearchBar";
+import { SingleSelectionItem } from "./VarItem";
 
 // @TODO: add button to score genes and plot
 
@@ -89,7 +89,8 @@ function SingleSelectionSet(_ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: "mx-2"
   }, /*#__PURE__*/React.createElement(ListGroup, {
-    variant: "flush"
+    variant: "flush",
+    className: "cherita-list"
   }, varList)))));
 }
 function MultipleSelectionSet(_ref2) {

package/dist/esm/utils/Skeleton.js

@@ -0,0 +1,12 @@
+import { Button, Placeholder } from "react-bootstrap";
+export const ObsmKeysListBtn = () => {
+  return /*#__PURE__*/React.createElement(Placeholder, {
+    as: Button,
+    animation: "glow"
+  }, /*#__PURE__*/React.createElement(Placeholder, {
+    xs: 6,
+    style: {
+      width: "40px"
+    }
+  }));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "1.0.0-dev.2025-03-27.d22a5d51",
+  "version": "1.0.0-dev.2025-04-01.e61c9d78",
   "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": "d22a5d5188c66113d0efad8743f282a86d2db7b4"
+  "prereleaseSha": "e61c9d78a509eca23cf7cc26b186ab973fc6e20e"
 }