@haniffalab/cherita-react 1.4.0 → 1.4.1-dev.2025-06-30.e26168b5

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

@@ -165,19 +165,20 @@ function CategoricalItem(_ref2) {
     key: value,
     className: "obs-item"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "d-flex align-items-center"
+    className: "d-flex align-items-center flex-wrap"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "flex-grow-1"
+    className: "flex-grow-1 me-auto mw-100"
   }, /*#__PURE__*/React.createElement(Form.Check, {
     className: "obs-value-list-check",
     type: "switch",
+    title: label,
     label: label,
     checked: !isOmitted,
     onChange: () => onChange(value)
   })), /*#__PURE__*/React.createElement("div", {
-    className: "d-flex align-items-center"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "pl-1 m-0 flex-grow-1"
+    className: "d-flex align-items-center ms-auto"
+  }, (!!histogramData.data || histogramData.isPending) && /*#__PURE__*/React.createElement("div", {
+    className: "pl-1 m-0"
   }, /*#__PURE__*/React.createElement(Histogram, {
     data: histogramData.data,
     isPending: histogramData.isPending,
@@ -192,7 +193,7 @@ function CategoricalItem(_ref2) {
     className: "d-flex align-items-center"
   }, /*#__PURE__*/React.createElement(Badge, {
     className: "value-count-badge"
-  }, " ", isSliced && /*#__PURE__*/React.createElement(React.Fragment, null, formatNumerical(parseInt(filteredStats.value_counts)), " ", "out of", " "), formatNumerical(parseInt(stats.value_counts), FORMATS.EXPONENTIAL)), /*#__PURE__*/React.createElement("div", {
+  }, " ", isSliced && parseInt(filteredStats.value_counts) !== parseInt(stats.value_counts) && /*#__PURE__*/React.createElement(React.Fragment, null, formatNumerical(parseInt(filteredStats.value_counts)), " ", "out of", " "), formatNumerical(parseInt(stats.value_counts), FORMATS.EXPONENTIAL)), /*#__PURE__*/React.createElement("div", {
     className: "value-pct-gauge-container"
   }, isSliced ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Gauge, {
     className: "pct-gauge filtered-pct-gauge",
@@ -272,6 +273,7 @@ export function CategoricalObs(_ref3) {
     enabled: showHistograms
   });
   const filteredObsData = useFilteredObsData(obs);
+  const enabledHistograms = useMemo(() => showHistograms && settings.colorEncoding === COLOR_ENCODINGS.VAR, [settings.colorEncoding, showHistograms]);
   const getDataAtIndex = useCallback(index => {
     var _obsHistograms$fetche;
     return {
@@ -283,7 +285,7 @@ export function CategoricalObs(_ref3) {
       },
       isOmitted: _.includes(obs.omit, obs.codes[obs.values[index]]),
       label: obs.values[index],
-      histogramData: showHistograms && settings.colorEncoding === COLOR_ENCODINGS.VAR ? {
+      histogramData: enabledHistograms ? {
         data: (_obsHistograms$fetche = obsHistograms.fetchedData) === null || _obsHistograms$fetche === void 0 ? void 0 : _obsHistograms$fetche[obs.values[index]],
         isPending: obsHistograms.isPending,
         altColor: isSliced
@@ -298,7 +300,7 @@ export function CategoricalObs(_ref3) {
       isSliced: isSliced,
       colors: obs.colors
     };
-  }, [obs.values, obs.codes, obs.value_counts, obs.omit, totalCounts, showHistograms, obs.colors, settings.colorEncoding, obsHistograms.fetchedData, obsHistograms.isPending, isSliced, filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.value_counts, filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.pct]);
+  }, [obs.values, obs.codes, obs.value_counts, obs.omit, obs.colors, totalCounts, enabledHistograms, obsHistograms.fetchedData, obsHistograms.isPending, isSliced, filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.value_counts, filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.pct]);
   showColor &= settings.colorEncoding === COLOR_ENCODINGS.OBS;
   return /*#__PURE__*/React.createElement(ListGroup, {
     variant: "flush",
@@ -317,7 +319,11 @@ export function CategoricalObs(_ref3) {
     max: max,
     onChange: toggleObs,
     showColor: showColor,
-    estimateSize: 42
+    estimateSize: i =>
+    // rough attempt to determine size based on label length
+    // estimate size of 68 pixels if label is long (>=25 chars if enabledHistograms, >=30 if showColor, >=35 otherwise), else 42
+    // TODO: consider isSliced as count badge will be longer ?
+    obs.values[i].length >= (enabledHistograms ? 25 : showColor ? 30 : 35) ? 68 : 42
   }));
 }
 function ObsContinuousStats(_ref4) {
@@ -401,6 +407,10 @@ export function ContinuousObs(_ref5) {
     enabled: showHistograms
   });
   const filteredObsData = useFilteredObsData(obs);
+  const enabledHistograms = useMemo(() => showHistograms && settings.colorEncoding === COLOR_ENCODINGS.VAR, [settings.colorEncoding, showHistograms]);
+  const getLabel = useCallback(index => {
+    return isNaN(obs.values[index]) ? "NaN" : getContinuousLabel(obs.codes[obs.values[index]], obs.bins.binEdges);
+  }, [obs.bins.binEdges, obs.codes, obs.values]);
   const getDataAtIndex = useCallback(index => {
     var _obsHistograms$fetche2;
     return {
@@ -411,8 +421,8 @@ export function ContinuousObs(_ref5) {
         pct: obs.value_counts[obs.values[index]] / totalCounts * 100
       },
       isOmitted: _.includes(obs.omit, obs.codes[obs.values[index]]),
-      label: isNaN(obs.values[index]) ? "NaN" : getContinuousLabel(obs.codes[obs.values[index]], obs.bins.binEdges),
-      histogramData: showHistograms && settings.colorEncoding === COLOR_ENCODINGS.VAR ? {
+      label: getLabel(index),
+      histogramData: enabledHistograms ? {
         data: (_obsHistograms$fetche2 = obsHistograms.fetchedData) === null || _obsHistograms$fetche2 === void 0 ? void 0 : _obsHistograms$fetche2[obs.values[index]],
         isPending: obsHistograms.isPending,
         altColor: isSliced
@@ -426,7 +436,7 @@ export function ContinuousObs(_ref5) {
       },
       isSliced: isSliced
     };
-  }, [filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.pct, filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.value_counts, isSliced, obs.bins.binEdges, obs.codes, obs.omit, obs.value_counts, obs.values, obsHistograms.fetchedData, obsHistograms.isPending, settings.colorEncoding, showHistograms, totalCounts]);
+  }, [enabledHistograms, filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.pct, filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.value_counts, getLabel, isSliced, obs.codes, obs.omit, obs.value_counts, obs.values, obsHistograms.fetchedData, obsHistograms.isPending, totalCounts]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListGroup, {
     variant: "flush",
     className: "cherita-list"
@@ -444,7 +454,11 @@ export function ContinuousObs(_ref5) {
     max: max,
     onChange: toggleObs,
     showColor: false,
-    estimateSize: 42
+    estimateSize: i =>
+    // rough attempt to determine size based on label length
+    // estimate size of 68 pixels if label is long (>=20 chars if enabledHistograms, >=30 otherwise), else 42
+    // TODO: consider isSliced as count badge will be longer ?
+    getLabel(i).length >= (enabledHistograms ? 20 : 30) ? 68 : 42
   })), /*#__PURE__*/React.createElement(ObsContinuousStats, {
     obs: obs
   }));

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

@@ -41,7 +41,7 @@ const ObsAccordionToggle = _ref => {
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: isCurrentEventKey ? faChevronDown : faChevronRight
   })), /*#__PURE__*/React.createElement("span", {
-    className: "obs-accordion-header-title"
+    className: "obs-accordion-header-span"
   }, children));
 };
 export function ObsColsList(_ref2) {
@@ -224,7 +224,11 @@ export function ObsColsList(_ref2) {
     }, /*#__PURE__*/React.createElement(ObsAccordionToggle, {
       eventKey: item.name,
       handleAccordionToggle: handleAccordionToggle
-    }, /*#__PURE__*/React.createElement("div", null, item.name), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "accordion-header-title"
+    }, item.name), /*#__PURE__*/React.createElement("div", {
+      className: "accordion-header-toolbar"
+    }, /*#__PURE__*/React.createElement("span", {
       className: "mx-1 cursor-pointer ".concat(inLabelObs ? "active-icon" : "text-muted opacity-50"),
       onClick: event => {
         event.stopPropagation();

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

@@ -4,7 +4,9 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React, { useEffect, useState } from "react";
+import _ from "lodash";
 import { Button, ButtonGroup, Dropdown, DropdownButton, OverlayTrigger, Tooltip } from "react-bootstrap";
+import { DEFAULT_OBSM_KEYS } from "../../constants/constants";
 import { useDataset } from "../../context/DatasetContext";
 import { useSettings, useSettingsDispatch } from "../../context/SettingsContext";
 import { useFetch } from "../../utils/requests";
@@ -36,13 +38,34 @@ export function ObsmKeysList() {
   useEffect(() => {
     if (!isPending && !serverError && fetchedData) {
       setObsmKeysList(fetchedData);
+
+      // Set default obsm if in keys list and not selected
+      if (!settings.selectedObsm && !!fetchedData.length) {
+        // Follow DEFAULT_OBSM_KEYS order
+        _.each(DEFAULT_OBSM_KEYS, k => {
+          const defaultObsm = _.find(fetchedData, item => item.toLowerCase() === k);
+          if (defaultObsm) {
+            dispatch({
+              type: "select.obsm",
+              obsm: defaultObsm
+            });
+            return false; // break
+          }
+        });
+      }
+      if (settings.selectedObsm) {
+        // If selected obsm is not in keys list, reset to null
+        if (!_.includes(fetchedData, settings.selectedObsm)) {
+          dispatch({
+            type: "select.obsm",
+            obsm: null
+          });
+        } else {
+          setActive(settings.selectedObsm);
+        }
+      }
     }
-  }, [fetchedData, isPending, serverError]);
-  useEffect(() => {
-    if (settings.selectedObsm) {
-      setActive(settings.selectedObsm);
-    }
-  }, [settings.selectedObsm]);
+  }, [dispatch, fetchedData, isPending, serverError, settings.selectedObsm]);
   const obsmList = obsmKeysList.map(item => {
     return /*#__PURE__*/React.createElement(Dropdown.Item, {
       key: item,

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

@@ -45,14 +45,19 @@ export function OffcanvasVars(_ref3) {
   } = _ref3;
   return /*#__PURE__*/React.createElement(Offcanvas, {
     show: show,
-    onHide: handleClose
+    onHide: handleClose,
+    className: "offcanvas-vars"
   }, /*#__PURE__*/React.createElement(Offcanvas.Header, {
     closeButton: true
-  }, /*#__PURE__*/React.createElement(Offcanvas.Title, null, "Features")), /*#__PURE__*/React.createElement(Offcanvas.Body, null, /*#__PURE__*/React.createElement(SearchBar, {
+  }, /*#__PURE__*/React.createElement(Offcanvas.Title, null, "Features")), /*#__PURE__*/React.createElement(Offcanvas.Body, null, /*#__PURE__*/React.createElement("div", {
+    className: "sidebar-features"
+  }, /*#__PURE__*/React.createElement(SearchBar, {
     searchDiseases: true
-  }), /*#__PURE__*/React.createElement(VarNamesList, {
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "sidebar-features-list"
+  }, /*#__PURE__*/React.createElement(VarNamesList, {
     mode: mode
-  })));
+  })))));
 }
 export function OffcanvasControls(_ref4) {
   let {

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

@@ -146,7 +146,7 @@ export function Scatterplot(_ref) {
         });
       });
     }
-  }, [settings.selectedObsm, getRadiusScale, obsmData.data, obsmData.isPending, obsmData.serverError, data.positions]);
+  }, [getRadiusScale, obsmData.data, obsmData.isPending, obsmData.serverError, data.positions]);
   const getBounds = useCallback(() => {
     var _deckRef$current3, _deckRef$current4;
     const {

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

@@ -6,6 +6,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 import React, { useState } from "react";
 import CloseIcon from "@mui/icons-material/Close";
 import SearchIcon from "@mui/icons-material/Search";
+import _ from "lodash";
 import { Button, Form, FormGroup, InputGroup, Modal } from "react-bootstrap";
 import Col from "react-bootstrap/Col";
 import Container from "react-bootstrap/Container";
@@ -15,7 +16,7 @@ import Tab from "react-bootstrap/Tab";
 import { DiseaseInfo, VarInfo } from "./SearchInfo";
 import { DiseasesSearchResults, VarSearchResults } from "./SearchResults";
 import { COLOR_ENCODINGS } from "../../constants/constants";
-function onVarSelect(dispatch, item) {
+const select = (dispatch, item) => {
   dispatch({
     type: "select.var",
     var: item
@@ -28,6 +29,14 @@ function onVarSelect(dispatch, item) {
     type: "set.colorEncoding",
     value: COLOR_ENCODINGS.VAR
   });
+};
+const debounceSelect = _.debounce(select, 2000);
+function onVarSelect(dispatch, item) {
+  dispatch({
+    type: "add.var",
+    var: item
+  });
+  debounceSelect(dispatch, item);
 }
 function addVarSet(dispatch, _ref) {
   let {

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

@@ -89,7 +89,7 @@ export function VarSearchResults(_ref) {
     count: deferredData.length,
     ItemComponent: ItemComponent,
     overscan: 500,
-    estimateSize: 42,
+    estimateSize: () => 42,
     maxHeight: "70vh"
   }) : /*#__PURE__*/React.createElement(ListGroup.Item, {
     key: "empty",
@@ -160,7 +160,7 @@ export function DiseasesSearchResults(_ref2) {
     count: deferredData.length,
     ItemComponent: ItemComponent,
     overscan: 250,
-    estimateSize: 32,
+    estimateSize: () => 32,
     maxHeight: "70vh"
   }) : /*#__PURE__*/React.createElement(ListGroup.Item, {
     key: "empty",

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

@@ -113,14 +113,17 @@ export function SelectionItem(_ref3) {
   });
   const hasDiseaseInfo = !isPending && !serverError && !!(fetchedData !== null && fetchedData !== void 0 && fetchedData.length);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "d-flex justify-content-between ".concat(hasDiseaseInfo ? "cursor-pointer" : ""),
+    className: 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"
+    className: "d-flex align-items-center"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "var-item-name",
+    title: item.name
+  }, item.name), /*#__PURE__*/React.createElement("div", {
+    className: "ms-auto d-flex align-items-center gap-1"
   }, hasDiseaseInfo && /*#__PURE__*/React.createElement(MoreVert, null), /*#__PURE__*/React.createElement(VarHistogram, {
     item: item
   }), showSetColorEncoding && /*#__PURE__*/React.createElement(Button, {
@@ -159,6 +162,24 @@ export function SelectionItem(_ref3) {
     data: fetchedData
   }))));
 }
+const select = (dispatch, mode, item) => {
+  if (mode === SELECTION_MODES.SINGLE) {
+    dispatch({
+      type: "select.var",
+      var: item
+    });
+  } else if (mode === SELECTION_MODES.MULTIPLE) {
+    dispatch({
+      type: "select.multivar",
+      var: item
+    });
+  }
+  dispatch({
+    type: "set.colorEncoding",
+    value: COLOR_ENCODINGS.VAR
+  });
+};
+const debounceSelect = _.debounce(select, 200);
 export function VarItem(_ref4) {
   let {
     item,
@@ -167,27 +188,7 @@ export function VarItem(_ref4) {
   } = _ref4;
   const settings = useSettings();
   const dispatch = useSettingsDispatch();
-  const selectVar = () => {
-    if (mode === SELECTION_MODES.SINGLE) {
-      dispatch({
-        type: "select.var",
-        var: item
-      });
-      dispatch({
-        type: "set.colorEncoding",
-        value: COLOR_ENCODINGS.VAR
-      });
-    } else if (mode === SELECTION_MODES.MULTIPLE) {
-      dispatch({
-        type: "select.multivar",
-        var: item
-      });
-      dispatch({
-        type: "set.colorEncoding",
-        value: COLOR_ENCODINGS.VAR
-      });
-    }
-  };
+  const selectVar = () => debounceSelect(dispatch, mode, item);
   const removeVar = () => {
     dispatch({
       type: "remove.var",

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

@@ -131,9 +131,7 @@ export function VarNamesList(_ref) {
   };
   const isPending = varMeans.isPending && settings.varSort.var.sort === VAR_SORT.MATRIX;
   return /*#__PURE__*/React.createElement("div", {
-    className: "position-relative"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "overflow-auto mt-3"
+    className: "mt-3 d-flex flex-column h-100"
   }, /*#__PURE__*/React.createElement("div", {
     className: "d-flex justify-content-between mb-2"
   }, /*#__PURE__*/React.createElement("h5", null, _.capitalize(displayName)), /*#__PURE__*/React.createElement(ButtonGroup, {
@@ -164,9 +162,9 @@ export function VarNamesList(_ref) {
   }), "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"
+    className: "overflow-auto flex-grow-1 modern-scrollbars"
   }, isPending && /*#__PURE__*/React.createElement(LoadingSpinner, null), /*#__PURE__*/React.createElement(ListGroup, {
     variant: "flush",
     className: "cherita-list"
-  }, varList))))));
+  }, varList)))));
 }

package/dist/esm/components/violin/Violin.js

@@ -135,8 +135,15 @@ export function Violin(_ref) {
   if (!serverError) {
     if (hasSelections) {
       return /*#__PURE__*/React.createElement("div", {
-        className: "cherita-plot cherita-violin position-relative"
-      }, isPending && /*#__PURE__*/React.createElement(LoadingSpinner, null), /*#__PURE__*/React.createElement(Plot, {
+        className: "cherita-plot cherita-violin"
+      }, isPending && /*#__PURE__*/React.createElement(LoadingSpinner, null), /*#__PURE__*/React.createElement("div", {
+        className: "d-flex flex-column h-100"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "flex-grow-1 position-relative",
+        style: {
+          minHeight: "0"
+        }
+      }, /*#__PURE__*/React.createElement(Plot, {
         data: data,
         layout: layout,
         useResizeHandler: true,
@@ -148,14 +155,17 @@ export function Violin(_ref) {
           displaylogo: false,
           modeBarButtons: modeBarButtons
         }
-      }), (fetchedData === null || fetchedData === void 0 ? void 0 : fetchedData.resampled) && /*#__PURE__*/React.createElement(Alert, {
-        variant: "warning"
+      })), (fetchedData === null || fetchedData === void 0 ? void 0 : fetchedData.resampled) && /*#__PURE__*/React.createElement("div", {
+        className: "flex-shrink-0"
+      }, /*#__PURE__*/React.createElement(Alert, {
+        variant: "warning",
+        className: "mb-1"
       }, /*#__PURE__*/React.createElement("b", null, "Warning:"), " For performance reasons this plot was generated with resampled data. It will not be exactly the same as one produced with the entire dataset. \xA0", /*#__PURE__*/React.createElement(OverlayTrigger, {
         placement: "top",
         overlay: /*#__PURE__*/React.createElement(Tooltip, null, "Resampled to 100K values following a Monte Carlo style approach to help ensure resampled data is a good representation of the original dataset's distribution.")
       }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
         icon: faCircleInfo
-      }))));
+      }))))));
     }
     return /*#__PURE__*/React.createElement("div", {
       className: "cherita-violin"

package/dist/esm/constants/constants.js

@@ -97,4 +97,7 @@ export const PLOTLY_MODEBAR_BUTTONS = ["toImage", "zoom2d", "pan2d", "zoomIn2d",
 export const BREAKPOINTS = {
   LG: "(max-width: 991.98px)",
   XL: "(max-width: 1199.98px)"
-};
+};
+
+// In order of priority
+export const DEFAULT_OBSM_KEYS = ["x_umap", "x_tsne", "x_scvi", "x_pca"];

package/dist/esm/context/DatasetContext.js

@@ -50,7 +50,7 @@ const persistOptions = {
       return false;
     }
   },
-  buster: "1.4.0" || "0.0.0"
+  buster: "1.4.1-dev.2025-06-30.e26168b5" || "0.0.0"
   // @TODO: add maxAge and api version numbers as buster
 };
 const initialDataset = {

package/dist/esm/context/SettingsContext.js

@@ -1,8 +1,11 @@
+const _excluded = ["buster", "timestamp"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { createContext, useContext, useEffect, useReducer } from "react";
 import _ from "lodash";
 import { COLOR_ENCODINGS, DOTPLOT_SCALES, LOCAL_STORAGE_KEY, MATRIXPLOT_SCALES, OBS_TYPES, PSEUDOSPATIAL_CATEGORICAL_MODES, VAR_SORT, VAR_SORT_ORDER, VIOLINPLOT_SCALES } from "../constants/constants";
@@ -117,7 +120,18 @@ export function SettingsProvider(_ref2) {
   const DATASET_STORAGE_KEY = "".concat(LOCAL_STORAGE_KEY, "-").concat(dataset_url);
   // Use localStorage directly instead of useLocalStorage due to unnecessary re-renders
   // https://github.com/uidotdev/usehooks/issues/157
-  const localSettings = JSON.parse(localStorage.getItem(DATASET_STORAGE_KEY)) || {};
+  let _ref3 = JSON.parse(localStorage.getItem(DATASET_STORAGE_KEY)) || {},
+    {
+      buster,
+      timestamp
+    } = _ref3,
+    localSettings = _objectWithoutProperties(_ref3, _excluded);
+
+  // If the buster is not set or does not match the current package version,
+  // reset localSettings to avoid stale data
+  if (!buster || buster !== "1.4.1-dev.2025-06-30.e26168b5") {
+    localSettings = {};
+  }
   const [settings, dispatch] = useReducer(settingsReducer, {
     canOverrideSettings,
     defaultSettings,
@@ -126,7 +140,10 @@ export function SettingsProvider(_ref2) {
   useEffect(() => {
     if (canOverrideSettings) {
       try {
-        localStorage.setItem(DATASET_STORAGE_KEY, JSON.stringify(settings));
+        localStorage.setItem(DATASET_STORAGE_KEY, JSON.stringify(_objectSpread({
+          buster: "1.4.1-dev.2025-06-30.e26168b5" || "0.0.0",
+          timestamp: Date.now()
+        }, settings)));
       } catch (err) {
         if (err.code === 22 || err.code === 1014 || err.name === "QuotaExceededError" || err.name === "NS_ERROR_DOM_QUOTA_REACHED") {
           console.err("Browser storage quota exceeded");

package/dist/esm/utils/VirtualizedList.js

@@ -10,7 +10,7 @@ export function VirtualizedList(_ref) {
       getDataAtIndex,
       count,
       ItemComponent,
-      estimateSize = 45,
+      estimateSize = () => 45,
       overscan = 25,
       maxHeight = "65vh"
     } = _ref,
@@ -19,7 +19,7 @@ export function VirtualizedList(_ref) {
   const itemVirtualizer = useVirtualizer({
     count: count,
     getScrollElement: () => parentNode,
-    estimateSize: () => estimateSize,
+    estimateSize: i => estimateSize(i),
     overscan: overscan
   });
   const refCallback = useCallback(node => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "1.4.0",
+  "version": "1.4.1-dev.2025-06-30.e26168b5",
   "author": "Haniffa Lab",
   "license": "MIT",
   "keywords": [
@@ -127,5 +127,6 @@
   "bugs": {
     "url": "https://github.com/haniffalab/cherita-react/issues"
   },
-  "homepage": "https://github.com/haniffalab/cherita-react#readme"
-}
+  "homepage": "https://github.com/haniffalab/cherita-react#readme",
+  "prereleaseSha": "e26168b526ee80a8dfb494c61e68a64112c8dbc1"
+}

package/scss/cherita.scss

@@ -21,6 +21,10 @@ $prefix: "bs-" !default;
   align-items: center;
 }
 
+.cursor-pointer {
+  cursor: pointer;
+}
+
 .cherita-container {
   margin: 40px auto;
   background-color: #fff;
@@ -151,6 +155,13 @@ $prefix: "bs-" !default;
   padding-right: 1rem;
   word-break: auto-phrase;
   overflow-wrap: anywhere;
+
+  .form-check-label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+  }
 }
 
 .grad-step {
@@ -404,4 +415,16 @@ $gauge-padding: 0.15rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+}
+
+.var-item-name {
+  @extend .me-auto;
+  padding-right: 0.5rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+input[type="checkbox"] {
+  cursor: pointer;
 }

package/scss/components/accordions.scss

@@ -19,12 +19,22 @@
     height: 20px;
     margin-right: 10px;
   }
-  .obs-accordion-header-title {
+  .obs-accordion-header-span {
     font-size: 1rem;
     width: 100%;
     display: flex;
     justify-content: space-between;
     align-items: center;
+
+    .accordion-header-title {
+      @extend .text-break;
+      @extend .me-1;
+    }
+
+    .accordion-header-toolbar {
+      @extend .d-flex;
+      @extend .flex-nowrap;
+    }
   }
   .active-icon {
     color: #0c63e4;