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

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

@@ -38,11 +38,6 @@ function FullPage(_ref) {
       defaultPlotType = _constants.PLOT_TYPES.SCATTERPLOT
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  const appRef = (0, _react.useRef)();
-  const [appDimensions, setAppDimensions] = (0, _react.useState)({
-    width: 0,
-    height: 0
-  });
   const [showObs, setShowObs] = (0, _react.useState)(false);
   const [showObsm, setShowObsm] = (0, _react.useState)(false);
   const [showVars, setShowVars] = (0, _react.useState)(false);
@@ -58,27 +53,6 @@ function FullPage(_ref) {
   const XlBreakpoint = (0, _material.useMediaQuery)(_constants.BREAKPOINTS.XL);
   const showObsBtn = LgBreakpoint;
   const showVarsBtn = XlBreakpoint;
-  (0, _react.useEffect)(() => {
-    const updateDimensions = () => {
-      if (appRef.current) {
-        // Get the distance from the top of the page to the target element
-        const rect = appRef.current.getBoundingClientRect();
-        const distanceFromTop = rect.top + window.scrollY;
-
-        // Calculate the available height for the Cherita app
-        const availableHeight = window.innerHeight - distanceFromTop;
-
-        // Update the dimensions to fit the viewport minus the navbar height
-        setAppDimensions({
-          width: appRef.current.offsetWidth,
-          height: availableHeight
-        });
-      }
-    };
-    window.addEventListener("resize", updateDimensions);
-    updateDimensions();
-    return () => window.removeEventListener("resize", updateDimensions);
-  }, []);
   const {
     plotControls,
     varMode,
@@ -138,29 +112,21 @@ function FullPage(_ref) {
     }
   }, [plotType, showObsBtn, showVarsBtn]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    ref: appRef,
-    className: "cherita-app",
-    style: {
-      height: appDimensions.height
-    }
+    className: "cherita-app"
   }, /*#__PURE__*/_react.default.createElement(_DatasetContext.DatasetProvider, props, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Container, {
     fluid: true,
-    className: "cherita-app-container",
-    style: {
-      height: appDimensions.height
-    }
+    className: "cherita-app-container"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "cherita-app-obs modern-scrollbars border-end h-100"
   }, /*#__PURE__*/_react.default.createElement(_ObsList.ObsColsList, _extends({}, props, {
     showSelectedAsActive: showSelectedAsActive,
-    showHistograms: varMode === _constants.SELECTION_MODES.SINGLE
+    showHistograms: varMode === _constants.SELECTION_MODES.SINGLE,
+    showColor: varMode === _constants.SELECTION_MODES.SINGLE
   }))), /*#__PURE__*/_react.default.createElement("div", {
     className: "cherita-app-canvas"
   }, plot), /*#__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"
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Card, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Card.Body, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "sidebar-plotselector"
   }, /*#__PURE__*/_react.default.createElement(_PlotTypeSelector.PlotTypeSelector, {
     currentType: plotType,
@@ -172,13 +138,15 @@ function FullPage(_ref) {
     setPlotType: setpseudospatialPlotType,
     setShowControls: setShowPseudospatialControls
   })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement("div", {
-    className: "sidebar-features modern-scrollbars"
+    className: "sidebar-features"
   }, /*#__PURE__*/_react.default.createElement(_SearchBar.SearchBar, {
     searchDiseases: searchDiseases,
     searchVar: true
-  }), /*#__PURE__*/_react.default.createElement(_VarList.VarNamesList, {
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sidebar-features-list"
+  }, /*#__PURE__*/_react.default.createElement(_VarList.VarNamesList, {
     mode: varMode
-  })))))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal, {
+  }))))))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal, {
     show: showModal,
     onHide: () => setShowModal(false),
     centered: true

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

@@ -13,11 +13,11 @@ var _violin = _interopRequireDefault(require("../../../assets/images/plots/violi
 var _constants = require("../../constants/constants");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const iconMap = {
-  [_constants.PLOT_TYPES.DOTPLOT]: _dotplot.default,
-  [_constants.PLOT_TYPES.MATRIXPLOT]: _matrixplot.default,
-  [_constants.PLOT_TYPES.VIOLINPLOT]: _violin.default,
   [_constants.PLOT_TYPES.SCATTERPLOT]: _scatterplot.default,
-  [_constants.PLOT_TYPES.HEATMAP]: _heatmap.default
+  [_constants.PLOT_TYPES.MATRIXPLOT]: _matrixplot.default,
+  [_constants.PLOT_TYPES.HEATMAP]: _heatmap.default,
+  [_constants.PLOT_TYPES.DOTPLOT]: _dotplot.default,
+  [_constants.PLOT_TYPES.VIOLINPLOT]: _violin.default
 };
 const plotTypes = Object.entries(iconMap).map(_ref => {
   let [type, icon] = _ref;

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

@@ -173,19 +173,20 @@ function CategoricalItem(_ref2) {
     key: value,
     className: "obs-item"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "d-flex align-items-center"
+    className: "d-flex align-items-center flex-wrap"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "flex-grow-1"
+    className: "flex-grow-1 me-auto mw-100"
   }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Check, {
     className: "obs-value-list-check",
     type: "switch",
+    title: label,
     label: label,
     checked: !isOmitted,
     onChange: () => onChange(value)
   })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "d-flex align-items-center"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "pl-1 m-0 flex-grow-1"
+    className: "d-flex align-items-center ms-auto"
+  }, (!!histogramData.data || histogramData.isPending) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "pl-1 m-0"
   }, /*#__PURE__*/_react.default.createElement(_Histogram.Histogram, {
     data: histogramData.data,
     isPending: histogramData.isPending,
@@ -200,7 +201,7 @@ function CategoricalItem(_ref2) {
     className: "d-flex align-items-center"
   }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Badge, {
     className: "value-count-badge"
-  }, " ", isSliced && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _string.formatNumerical)(parseInt(filteredStats.value_counts)), " ", "out of", " "), (0, _string.formatNumerical)(parseInt(stats.value_counts), _string.FORMATS.EXPONENTIAL)), /*#__PURE__*/_react.default.createElement("div", {
+  }, " ", isSliced && parseInt(filteredStats.value_counts) !== parseInt(stats.value_counts) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _string.formatNumerical)(parseInt(filteredStats.value_counts)), " ", "out of", " "), (0, _string.formatNumerical)(parseInt(stats.value_counts), _string.FORMATS.EXPONENTIAL)), /*#__PURE__*/_react.default.createElement("div", {
     className: "value-pct-gauge-container"
   }, isSliced ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_xCharts.Gauge, {
     className: "pct-gauge filtered-pct-gauge",
@@ -280,6 +281,7 @@ function CategoricalObs(_ref3) {
     enabled: showHistograms
   });
   const filteredObsData = useFilteredObsData(obs);
+  const enabledHistograms = (0, _react.useMemo)(() => showHistograms && settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR, [settings.colorEncoding, showHistograms]);
   const getDataAtIndex = (0, _react.useCallback)(index => {
     var _obsHistograms$fetche;
     return {
@@ -291,7 +293,7 @@ function CategoricalObs(_ref3) {
       },
       isOmitted: _lodash.default.includes(obs.omit, obs.codes[obs.values[index]]),
       label: obs.values[index],
-      histogramData: showHistograms && settings.colorEncoding === _constants.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
@@ -306,7 +308,7 @@ 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 === _constants.COLOR_ENCODINGS.OBS;
   return /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, {
     variant: "flush",
@@ -325,7 +327,11 @@ 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) {
@@ -409,6 +415,10 @@ function ContinuousObs(_ref5) {
     enabled: showHistograms
   });
   const filteredObsData = useFilteredObsData(obs);
+  const enabledHistograms = (0, _react.useMemo)(() => showHistograms && settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR, [settings.colorEncoding, showHistograms]);
+  const getLabel = (0, _react.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 = (0, _react.useCallback)(index => {
     var _obsHistograms$fetche2;
     return {
@@ -419,8 +429,8 @@ function ContinuousObs(_ref5) {
         pct: obs.value_counts[obs.values[index]] / totalCounts * 100
       },
       isOmitted: _lodash.default.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 === _constants.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
@@ -434,7 +444,7 @@ 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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, {
     variant: "flush",
     className: "cherita-list"
@@ -452,7 +462,11 @@ 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.default.createElement(ObsContinuousStats, {
     obs: obs
   }));

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

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

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

@@ -5,11 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ObsmKeysList = ObsmKeysList;
 var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
+var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
 var _SettingsContext = require("../../context/SettingsContext");
 var _requests = require("../../utils/requests");
 var _Skeleton = require("../../utils/Skeleton");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 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; }
@@ -43,13 +46,34 @@ function ObsmKeysList() {
   (0, _react.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
+        _lodash.default.each(_constants.DEFAULT_OBSM_KEYS, k => {
+          const defaultObsm = _lodash.default.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 (!_lodash.default.includes(fetchedData, settings.selectedObsm)) {
+          dispatch({
+            type: "select.obsm",
+            obsm: null
+          });
+        } else {
+          setActive(settings.selectedObsm);
+        }
+      }
     }
-  }, [fetchedData, isPending, serverError]);
-  (0, _react.useEffect)(() => {
-    if (settings.selectedObsm) {
-      setActive(settings.selectedObsm);
-    }
-  }, [settings.selectedObsm]);
+  }, [dispatch, fetchedData, isPending, serverError, settings.selectedObsm]);
   const obsmList = obsmKeysList.map(item => {
     return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
       key: item,

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

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

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

@@ -154,7 +154,7 @@ 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 = (0, _react.useCallback)(() => {
     var _deckRef$current3, _deckRef$current4;
     const {

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

@@ -8,6 +8,7 @@ exports.SearchModal = SearchModal;
 var _react = _interopRequireWildcard(require("react"));
 var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
 var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
+var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _Col = _interopRequireDefault(require("react-bootstrap/Col"));
 var _Container = _interopRequireDefault(require("react-bootstrap/Container"));
@@ -24,7 +25,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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 onVarSelect(dispatch, item) {
+const select = (dispatch, item) => {
   dispatch({
     type: "select.var",
     var: item
@@ -37,6 +38,14 @@ function onVarSelect(dispatch, item) {
     type: "set.colorEncoding",
     value: _constants.COLOR_ENCODINGS.VAR
   });
+};
+const debounceSelect = _lodash.default.debounce(select, 2000);
+function onVarSelect(dispatch, item) {
+  dispatch({
+    type: "add.var",
+    var: item
+  });
+  debounceSelect(dispatch, item);
 }
 function addVarSet(dispatch, _ref) {
   let {

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

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

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

@@ -123,14 +123,17 @@ function SelectionItem(_ref3) {
   });
   const hasDiseaseInfo = !isPending && !serverError && !!(fetchedData !== null && fetchedData !== void 0 && fetchedData.length);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "d-flex justify-content-between ".concat(hasDiseaseInfo ? "cursor-pointer" : ""),
+    className: hasDiseaseInfo ? "cursor-pointer" : "",
     onClick: () => {
       setOpenInfo(o => !o);
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "d-flex justify-content-between align-items-center w-100"
-  }, /*#__PURE__*/_react.default.createElement("div", null, item.name), /*#__PURE__*/_react.default.createElement("div", {
-    className: "d-flex align-items-center gap-1"
+    className: "d-flex align-items-center"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "var-item-name",
+    title: item.name
+  }, item.name), /*#__PURE__*/_react.default.createElement("div", {
+    className: "ms-auto d-flex align-items-center gap-1"
   }, hasDiseaseInfo && /*#__PURE__*/_react.default.createElement(_iconsMaterial.MoreVert, null), /*#__PURE__*/_react.default.createElement(VarHistogram, {
     item: item
   }), showSetColorEncoding && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
@@ -169,6 +172,24 @@ function SelectionItem(_ref3) {
     data: fetchedData
   }))));
 }
+const select = (dispatch, mode, item) => {
+  if (mode === _constants.SELECTION_MODES.SINGLE) {
+    dispatch({
+      type: "select.var",
+      var: item
+    });
+  } else if (mode === _constants.SELECTION_MODES.MULTIPLE) {
+    dispatch({
+      type: "select.multivar",
+      var: item
+    });
+  }
+  dispatch({
+    type: "set.colorEncoding",
+    value: _constants.COLOR_ENCODINGS.VAR
+  });
+};
+const debounceSelect = _lodash.default.debounce(select, 200);
 function VarItem(_ref4) {
   let {
     item,
@@ -177,27 +198,7 @@ function VarItem(_ref4) {
   } = _ref4;
   const settings = (0, _SettingsContext.useSettings)();
   const dispatch = (0, _SettingsContext.useSettingsDispatch)();
-  const selectVar = () => {
-    if (mode === _constants.SELECTION_MODES.SINGLE) {
-      dispatch({
-        type: "select.var",
-        var: item
-      });
-      dispatch({
-        type: "set.colorEncoding",
-        value: _constants.COLOR_ENCODINGS.VAR
-      });
-    } else if (mode === _constants.SELECTION_MODES.MULTIPLE) {
-      dispatch({
-        type: "select.multivar",
-        var: item
-      });
-      dispatch({
-        type: "set.colorEncoding",
-        value: _constants.COLOR_ENCODINGS.VAR
-      });
-    }
-  };
+  const selectVar = () => debounceSelect(dispatch, mode, item);
   const removeVar = () => {
     dispatch({
       type: "remove.var",

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

@@ -142,9 +142,7 @@ function VarNamesList(_ref) {
   };
   const isPending = varMeans.isPending && settings.varSort.var.sort === _constants.VAR_SORT.MATRIX;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "position-relative"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "overflow-auto mt-3"
+    className: "mt-3 d-flex flex-column h-100"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "d-flex justify-content-between mb-2"
   }, /*#__PURE__*/_react.default.createElement("h5", null, _lodash.default.capitalize(displayName)), /*#__PURE__*/_react.default.createElement(_ButtonGroup.default, {
@@ -175,9 +173,9 @@ function VarNamesList(_ref) {
   }), "Clear"))), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !varList.length ? /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
     variant: "light"
   }, "Search for a feature.") : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_VarListToolbar.VarListToolbar, null), /*#__PURE__*/_react.default.createElement("div", {
-    className: "position-relative"
+    className: "overflow-auto flex-grow-1 modern-scrollbars"
   }, isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, {
     variant: "flush",
     className: "cherita-list"
-  }, varList))))));
+  }, varList)))));
 }

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

@@ -143,8 +143,15 @@ function Violin(_ref) {
   if (!serverError) {
     if (hasSelections) {
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: "cherita-plot cherita-violin position-relative"
-      }, isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
+        className: "cherita-plot cherita-violin"
+      }, isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement("div", {
+        className: "d-flex flex-column h-100"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "flex-grow-1 position-relative",
+        style: {
+          minHeight: "0"
+        }
+      }, /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
         data: data,
         layout: layout,
         useResizeHandler: true,
@@ -156,14 +163,17 @@ function Violin(_ref) {
           displaylogo: false,
           modeBarButtons: modeBarButtons
         }
-      }), (fetchedData === null || fetchedData === void 0 ? void 0 : fetchedData.resampled) && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
-        variant: "warning"
+      })), (fetchedData === null || fetchedData === void 0 ? void 0 : fetchedData.resampled) && /*#__PURE__*/_react.default.createElement("div", {
+        className: "flex-shrink-0"
+      }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
+        variant: "warning",
+        className: "mb-1"
       }, /*#__PURE__*/_react.default.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.default.createElement(_reactBootstrap.OverlayTrigger, {
         placement: "top",
         overlay: /*#__PURE__*/_react.default.createElement(_reactBootstrap.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.default.createElement(_reactFontawesome.FontAwesomeIcon, {
         icon: _freeSolidSvgIcons.faCircleInfo
-      }))));
+      }))))));
     }
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "cherita-violin"

package/dist/cjs/constants/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VIOLIN_MODES = exports.VIOLINPLOT_SCALES = exports.VAR_SORT_ORDER = exports.VAR_SORT = exports.UNSELECTED_POLYGON_FILLCOLOR = exports.SELECTION_MODES = exports.SELECTED_POLYGON_FILLCOLOR = exports.PSEUDOSPATIAL_PLOT_TYPES = exports.PSEUDOSPATIAL_CATEGORICAL_MODES = exports.PLOT_TYPES = exports.PLOTLY_MODEBAR_BUTTONS = exports.OBS_TYPES = exports.MATRIXPLOT_SCALES = exports.LOCAL_STORAGE_KEY = exports.DOTPLOT_SCALES = exports.DEFAULT_OBS_GROUP = exports.COLOR_ENCODINGS = exports.BREAKPOINTS = void 0;
+exports.VIOLIN_MODES = exports.VIOLINPLOT_SCALES = exports.VAR_SORT_ORDER = exports.VAR_SORT = exports.UNSELECTED_POLYGON_FILLCOLOR = exports.SELECTION_MODES = exports.SELECTED_POLYGON_FILLCOLOR = exports.PSEUDOSPATIAL_PLOT_TYPES = exports.PSEUDOSPATIAL_CATEGORICAL_MODES = exports.PLOT_TYPES = exports.PLOTLY_MODEBAR_BUTTONS = exports.OBS_TYPES = exports.MATRIXPLOT_SCALES = exports.LOCAL_STORAGE_KEY = exports.DOTPLOT_SCALES = exports.DEFAULT_OBS_GROUP = exports.DEFAULT_OBSM_KEYS = exports.COLOR_ENCODINGS = exports.BREAKPOINTS = void 0;
 const LOCAL_STORAGE_KEY = exports.LOCAL_STORAGE_KEY = "CHERITA";
 const PLOT_TYPES = exports.PLOT_TYPES = {
   SCATTERPLOT: "scatterplot",
@@ -103,4 +103,7 @@ const PLOTLY_MODEBAR_BUTTONS = exports.PLOTLY_MODEBAR_BUTTONS = ["toImage", "zoo
 const BREAKPOINTS = exports.BREAKPOINTS = {
   LG: "(max-width: 991.98px)",
   XL: "(max-width: 1199.98px)"
-};
+};
+
+// In order of priority
+const DEFAULT_OBSM_KEYS = exports.DEFAULT_OBSM_KEYS = ["x_umap", "x_tsne", "x_scvi", "x_pca"];

package/dist/cjs/context/DatasetContext.js

@@ -60,7 +60,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/cjs/context/SettingsContext.js

@@ -10,6 +10,7 @@ exports.useSettingsDispatch = useSettingsDispatch;
 var _react = _interopRequireWildcard(require("react"));
 var _lodash = _interopRequireDefault(require("lodash"));
 var _constants = require("../constants/constants");
+const _excluded = ["buster", "timestamp"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 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; }
@@ -17,6 +18,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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; }
 const SettingsContext = exports.SettingsContext = /*#__PURE__*/(0, _react.createContext)(null);
 const SettingsDispatchContext = exports.SettingsDispatchContext = /*#__PURE__*/(0, _react.createContext)(null);
 
@@ -128,7 +131,18 @@ function SettingsProvider(_ref2) {
   const DATASET_STORAGE_KEY = "".concat(_constants.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] = (0, _react.useReducer)(settingsReducer, {
     canOverrideSettings,
     defaultSettings,
@@ -137,7 +151,10 @@ function SettingsProvider(_ref2) {
   (0, _react.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/cjs/utils/VirtualizedList.js

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