@haniffalab/cherita-react 1.2.0 → 1.3.0-dev.2025-05-28.9afc380f

package/dist/esm/utils/Filter.js

@@ -2,8 +2,8 @@ import { useEffect, useCallback, useMemo } from "react";
 import { booleanPointInPolygon, point } from "@turf/turf";
 import _ from "lodash";
 import { COLOR_ENCODINGS, OBS_TYPES } from "../constants/constants";
-import { useDataset } from "../context/DatasetContext";
 import { useFilteredDataDispatch } from "../context/FilterContext";
+import { useSettings } from "../context/SettingsContext";
 const EPSILON = 1e-6;
 const isInBins = (v, binEdges, indices) => {
   const lastEdge = _.last(binEdges);
@@ -15,7 +15,7 @@ const isInBins = (v, binEdges, indices) => {
   return _.some(ranges, range => _.inRange(v, ...range));
 };
 const isInPolygons = (polygons, positions, index) => {
-  if (!polygons?.length || !positions?.length) {
+  if (!(polygons !== null && polygons !== void 0 && polygons.length) || !(positions !== null && positions !== void 0 && positions.length)) {
     return false;
   }
   return _.some(polygons, (_f, i) => {
@@ -23,13 +23,14 @@ const isInPolygons = (polygons, positions, index) => {
   });
 };
 const isInValues = (omit, value) => {
-  if (!omit?.length) {
+  if (!(omit !== null && omit !== void 0 && omit.length)) {
     return true;
   }
   return !_.includes(omit, value);
 };
 export const useFilter = data => {
-  const dataset = useDataset();
+  var _settings$selectedObs, _settings$selectedObs2, _settings$selectedObs3, _settings$selectedObs4, _settings$selectedObs7, _settings$selectedObs8;
+  const settings = useSettings();
   const filterDataDispatch = useFilteredDataDispatch();
   const {
     obsmData,
@@ -38,31 +39,33 @@ export const useFilter = data => {
     isPending,
     serverError
   } = data;
-  const isCategorical = dataset.selectedObs?.type === OBS_TYPES.CATEGORICAL || dataset.selectedObs?.type === OBS_TYPES.BOOLEAN;
-  const isContinuous = dataset.selectedObs?.type === OBS_TYPES.CONTINUOUS;
-  const sliceByObs = dataset.colorEncoding === COLOR_ENCODINGS.OBS && !!dataset.selectedObs?.omit.length || dataset.sliceBy.obs;
+  const isCategorical = ((_settings$selectedObs = settings.selectedObs) === null || _settings$selectedObs === void 0 ? void 0 : _settings$selectedObs.type) === OBS_TYPES.CATEGORICAL || ((_settings$selectedObs2 = settings.selectedObs) === null || _settings$selectedObs2 === void 0 ? void 0 : _settings$selectedObs2.type) === OBS_TYPES.BOOLEAN;
+  const isContinuous = ((_settings$selectedObs3 = settings.selectedObs) === null || _settings$selectedObs3 === void 0 ? void 0 : _settings$selectedObs3.type) === OBS_TYPES.CONTINUOUS;
+  const sliceByObs = settings.colorEncoding === COLOR_ENCODINGS.OBS && !!((_settings$selectedObs4 = settings.selectedObs) !== null && _settings$selectedObs4 !== void 0 && _settings$selectedObs4.omit.length) || settings.sliceBy.obs;
   const isInObsSlice = useCallback((index, values) => {
     let inSlice = true;
     if (values && sliceByObs) {
       if (isCategorical) {
-        inSlice &= isInValues(dataset.selectedObs?.omit, values[index]);
+        var _settings$selectedObs5;
+        inSlice &= isInValues((_settings$selectedObs5 = settings.selectedObs) === null || _settings$selectedObs5 === void 0 ? void 0 : _settings$selectedObs5.omit, values[index]);
       } else if (isContinuous) {
         if (isNaN(values[index])) {
-          inSlice &= isInValues(dataset.selectedObs?.omit, -1);
+          var _settings$selectedObs6;
+          inSlice &= isInValues((_settings$selectedObs6 = settings.selectedObs) === null || _settings$selectedObs6 === void 0 ? void 0 : _settings$selectedObs6.omit, -1);
         } else {
-          inSlice &= isInBins(values[index], dataset.selectedObs.bins.binEdges, _.without(dataset.selectedObs.omit, -1));
+          inSlice &= isInBins(values[index], settings.selectedObs.bins.binEdges, _.without(settings.selectedObs.omit, -1));
         }
       }
     }
     return inSlice;
-  }, [dataset.selectedObs?.bins?.binEdges, dataset.selectedObs?.omit, isCategorical, isContinuous, sliceByObs]);
+  }, [(_settings$selectedObs7 = settings.selectedObs) === null || _settings$selectedObs7 === void 0 || (_settings$selectedObs7 = _settings$selectedObs7.bins) === null || _settings$selectedObs7 === void 0 ? void 0 : _settings$selectedObs7.binEdges, (_settings$selectedObs8 = settings.selectedObs) === null || _settings$selectedObs8 === void 0 ? void 0 : _settings$selectedObs8.omit, isCategorical, isContinuous, sliceByObs]);
   const isInPolygonsSlice = useCallback((index, positions) => {
     let inSlice = true;
-    if (dataset.sliceBy.polygons && positions) {
-      inSlice &= isInPolygons(dataset.polygons[dataset.selectedObsm], positions, index);
+    if (settings.sliceBy.polygons && positions) {
+      inSlice &= isInPolygons(settings.polygons[settings.selectedObsm], positions, index);
     }
     return inSlice;
-  }, [dataset.polygons, dataset.selectedObsm, dataset.sliceBy.polygons]);
+  }, [settings.polygons, settings.selectedObsm, settings.sliceBy.polygons]);
   const isInSlice = useCallback((index, values, positions) => {
     return isInObsSlice(index, values) && isInPolygonsSlice(index, positions);
   }, [isInObsSlice, isInPolygonsSlice]);
@@ -80,7 +83,7 @@ export const useFilter = data => {
         slicedLength: null
       };
     }
-    if (dataset.colorEncoding === COLOR_ENCODINGS.VAR) {
+    if (settings.colorEncoding === COLOR_ENCODINGS.VAR) {
       const {
         filtered,
         filteredIndices
@@ -100,7 +103,7 @@ export const useFilter = data => {
         valueMax: _.max(filtered),
         slicedLength: filtered.length
       };
-    } else if (dataset.colorEncoding === COLOR_ENCODINGS.OBS) {
+    } else if (settings.colorEncoding === COLOR_ENCODINGS.OBS) {
       const {
         filtered,
         filteredIndices
@@ -121,16 +124,17 @@ export const useFilter = data => {
         slicedLength: filtered.length
       };
     } else {
+      var _obsData$data;
       return {
         filteredIndices: null,
         valueMin: _.min(obsData.data),
         valueMax: _.max(obsData.data),
-        slicedLength: obsData.data?.length
+        slicedLength: (_obsData$data = obsData.data) === null || _obsData$data === void 0 ? void 0 : _obsData$data.length
       };
     }
-  }, [dataset.colorEncoding, isContinuous, isInSlice, isPending, obsData.data, obsmData.data, serverError, xData.data]);
-  const isSliced = sliceByObs || dataset.sliceBy.polygons;
-  // const isSliced = dataset.sliceBy.obs || dataset.sliceBy.polygons;
+  }, [settings.colorEncoding, isContinuous, isInSlice, isPending, obsData.data, obsmData.data, serverError, xData.data]);
+  const isSliced = sliceByObs || settings.sliceBy.polygons;
+  // const isSliced = settings.sliceBy.obs || settings.sliceBy.polygons;
 
   useEffect(() => {
     if (!isPending && !serverError) {
@@ -143,5 +147,5 @@ export const useFilter = data => {
         isSliced: isSliced
       });
     }
-  }, [dataset.sliceBy.obs, dataset.sliceBy.polygons, filterDataDispatch, filteredIndices, isPending, isSliced, serverError, slicedLength, valueMax, valueMin]);
+  }, [settings.sliceBy.obs, settings.sliceBy.polygons, filterDataDispatch, filteredIndices, isPending, isSliced, serverError, slicedLength, valueMax, valueMin]);
 };

package/dist/esm/utils/Histogram.js

@@ -4,6 +4,7 @@ import _ from "lodash";
 import { LoadingLinear } from "./LoadingIndicators";
 import { formatNumerical, FORMATS } from "./string";
 export function Histogram(_ref) {
+  var _data$bin_edges;
   let {
     data,
     isPending,
@@ -29,11 +30,11 @@ export function Histogram(_ref) {
       let {
         dataIndex
       } = _ref2;
-      return `${formatNumerical(data.hist[dataIndex])}`;
+      return "".concat(formatNumerical(data.hist[dataIndex]));
     },
     xAxis: {
-      data: _.range(data.bin_edges?.length) || null,
-      valueFormatter: v => `Bin [${formatNumerical(data.bin_edges[v][0], FORMATS.EXPONENTIAL)}, ${formatNumerical(data.bin_edges[v][1], FORMATS.EXPONENTIAL)}${v === data.bin_edges.length - 1 ? "]" : ")"}`
+      data: _.range((_data$bin_edges = data.bin_edges) === null || _data$bin_edges === void 0 ? void 0 : _data$bin_edges.length) || null,
+      valueFormatter: v => "Bin [".concat(formatNumerical(data.bin_edges[v][0], FORMATS.EXPONENTIAL), ", ").concat(formatNumerical(data.bin_edges[v][1], FORMATS.EXPONENTIAL)).concat(v === data.bin_edges.length - 1 ? "]" : ")")
     },
     slotProps: {
       popper: {

package/dist/esm/utils/Legend.js

@@ -1,8 +1,10 @@
 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 { useSettings } from "../context/SettingsContext";
 import { rgbToHex, useColor } from "../helpers/color-helper";
 export function Legend(_ref) {
   let {
@@ -12,7 +14,7 @@ export function Legend(_ref) {
     colorscale = null,
     addText = ""
   } = _ref;
-  const dataset = useDataset();
+  const settings = useSettings();
   const {
     getColor
   } = useColor();
@@ -32,27 +34,32 @@ export function Legend(_ref) {
       });
     });
   }, [colorscale, getColor, isCategorical]);
-  if (dataset.colorEncoding && !isCategorical) {
+  if (settings.colorEncoding && !isCategorical) {
+    var _settings$selectedVar, _settings$selectedObs;
     return /*#__PURE__*/React.createElement("div", {
       className: "cherita-legend"
     }, /*#__PURE__*/React.createElement("div", {
       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"
+    }), (settings.colorEncoding === COLOR_ENCODINGS.VAR ? (_settings$selectedVar = settings.selectedVar) === null || _settings$selectedVar === void 0 ? void 0 : _settings$selectedVar.name : (_settings$selectedObs = settings.selectedObs) === null || _settings$selectedObs === void 0 ? void 0 : _settings$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 (settings.colorEncoding === COLOR_ENCODINGS.OBS && settings.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"
+    }), settings.selectedObs.name));
   }
 }

package/dist/esm/utils/LoadingIndicators.js

@@ -9,7 +9,7 @@ export const LoadingSpinner = _ref => {
     className: "loading-spinner"
   }, /*#__PURE__*/React.createElement(CircularProgress, {
     disableShrink: disableShrink
-  }), text?.length && /*#__PURE__*/React.createElement("span", {
+  }), (text === null || text === void 0 ? void 0 : text.length) && /*#__PURE__*/React.createElement("span", {
     className: "visually-hidden"
   }, text));
 };

package/dist/esm/utils/VirtualizedList.js

@@ -1,16 +1,20 @@
+const _excluded = ["getDataAtIndex", "count", "ItemComponent", "estimateSize", "overscan", "maxHeight"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+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, { useCallback, useEffect, useState } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 export function VirtualizedList(_ref) {
+  var _virtualItems$0$start, _virtualItems$;
   let {
-    getDataAtIndex,
-    count,
-    ItemComponent,
-    estimateSize = 45,
-    overscan = 25,
-    maxHeight = "65vh",
-    ...props
-  } = _ref;
+      getDataAtIndex,
+      count,
+      ItemComponent,
+      estimateSize = 45,
+      overscan = 25,
+      maxHeight = "65vh"
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   const [parentNode, setParentNode] = useState(null);
   const itemVirtualizer = useVirtualizer({
     count: count,
@@ -24,7 +28,7 @@ export function VirtualizedList(_ref) {
   const virtualItems = itemVirtualizer.getVirtualItems();
   useEffect(() => {
     itemVirtualizer.measure();
-  }, [itemVirtualizer, parentNode?.clientHeight, getDataAtIndex]);
+  }, [itemVirtualizer, parentNode === null || parentNode === void 0 ? void 0 : parentNode.clientHeight, getDataAtIndex]);
   return /*#__PURE__*/React.createElement("div", {
     ref: refCallback,
     style: {
@@ -34,7 +38,7 @@ export function VirtualizedList(_ref) {
     className: "modern-scrollbars"
   }, /*#__PURE__*/React.createElement("div", {
     style: {
-      height: `${itemVirtualizer.getTotalSize()}px`,
+      height: "".concat(itemVirtualizer.getTotalSize(), "px"),
       width: "100%",
       position: "relative",
       willChange: "transform"
@@ -45,7 +49,7 @@ export function VirtualizedList(_ref) {
       top: 0,
       left: 0,
       width: "100%",
-      transform: `translateY(${virtualItems[0]?.start ?? 0}px)`
+      transform: "translateY(".concat((_virtualItems$0$start = (_virtualItems$ = virtualItems[0]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.start) !== null && _virtualItems$0$start !== void 0 ? _virtualItems$0$start : 0, "px)")
     }
   }, virtualItems.map(virtualItem => /*#__PURE__*/React.createElement("div", {
     key: virtualItem.key,

package/dist/esm/utils/errors.js

@@ -1,3 +1,8 @@
+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); }
 export const parseError = err => {
   if (err === DOMException.TIMEOUT_ERR) {
     return {
@@ -5,42 +10,35 @@ export const parseError = err => {
       name: err
     };
   }
-  switch (err?.name) {
+  switch (err === null || err === void 0 ? void 0 : err.name) {
     case "TypeError":
-      return {
-        ...err,
+      return _objectSpread(_objectSpread({}, err), {}, {
         message: "Failed to fetch data from server"
-      };
+      });
     case "ReadZarrError":
-      return {
-        ...err,
+      return _objectSpread(_objectSpread({}, err), {}, {
         message: "Failed to read AnnData-Zarr"
-      };
+      });
     case "InvalidObs":
-      return {
-        ...err,
+      return _objectSpread(_objectSpread({}, err), {}, {
         message: "Observation not found in dataset"
-      };
+      });
     case "InvalidVar":
-      return {
-        ...err,
+      return _objectSpread(_objectSpread({}, err), {}, {
         message: "Feature not found in dataset"
-      };
+      });
     case "InvalidKey":
-      return {
-        ...err,
+      return _objectSpread(_objectSpread({}, err), {}, {
         message: "Key not found in datset"
-      };
+      });
     case "BadRequest":
-      return {
-        ...err,
+      return _objectSpread(_objectSpread({}, err), {}, {
         message: "Invalid request to server"
-      };
+      });
     case "InternalServerError":
-      return {
-        ...err,
+      return _objectSpread(_objectSpread({}, err), {}, {
         message: "Server error"
-      };
+      });
     default:
       return err;
   }

package/dist/esm/utils/requests.js

@@ -1,3 +1,8 @@
+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); }
 import { useQuery } from "@tanstack/react-query";
 import { useDebounce } from "@uidotdev/usehooks";
 import { parseError } from "./errors";
@@ -42,7 +47,7 @@ export const useFetch = function (endpoint, params) {
     data: fetchedData = null,
     isLoading: isPending = false,
     error: serverError = null
-  } = useQuery({
+  } = useQuery(_objectSpread({
     queryKey: [endpoint, params],
     queryFn: _ref => {
       let {
@@ -54,11 +59,10 @@ export const useFetch = function (endpoint, params) {
       let {
         error
       } = _ref2;
-      if ([400, 401, 403, 404, 422].includes(error?.status)) return false;
+      if ([400, 401, 403, 404, 422].includes(error === null || error === void 0 ? void 0 : error.status)) return false;
       return failureCount < 3;
-    },
-    ...opts
-  });
+    }
+  }, opts));
   return {
     fetchedData,
     isPending,
@@ -77,7 +81,7 @@ export const useDebouncedFetch = function (endpoint, params) {
     data: fetchedData = null,
     isLoading: isPending = false,
     error: serverError = null
-  } = useQuery({
+  } = useQuery(_objectSpread({
     queryKey: [endpoint, debouncedParams],
     queryFn: _ref3 => {
       let {
@@ -89,11 +93,10 @@ export const useDebouncedFetch = function (endpoint, params) {
       let {
         error
       } = _ref4;
-      if ([400, 401, 403, 404, 422].includes(error?.status)) return false;
+      if ([400, 401, 403, 404, 422].includes(error === null || error === void 0 ? void 0 : error.status)) return false;
       return failureCount < 3;
-    },
-    ...opts
-  });
+    }
+  }, opts));
   return {
     fetchedData,
     isPending,

package/dist/esm/utils/zarrData.js

@@ -1,23 +1,23 @@
-import { useEffect, useState } from "react";
+import { useMemo } from "react";
 import _ from "lodash";
+import { slice } from "zarr";
 import { OBS_TYPES } from "../constants/constants";
 import { useDataset } from "../context/DatasetContext";
+import { useSettings } from "../context/SettingsContext";
 import { GET_OPTIONS, useZarr, useMultipleZarr } from "../helpers/zarr-helper";
+
+// @TODO: support specifying slice to load from context
 export const useObsmData = function () {
   let obsm = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   const dataset = useDataset();
-  obsm = obsm || dataset.selectedObsm;
-  const [obsmParams, setObsmParams] = useState({
+  const settings = useSettings();
+  obsm = obsm || settings.selectedObsm;
+  const obsmParams = useMemo(() => ({
     url: dataset.url,
-    path: "obsm/" + obsm
-  });
-  useEffect(() => {
-    setObsmParams({
-      url: dataset.url,
-      path: "obsm/" + obsm
-    });
-  }, [dataset.url, obsm]);
-  return useZarr(obsmParams, null, GET_OPTIONS, {
+    path: "obsm/" + obsm,
+    s: [null, slice(null, 2)] // load only [:, :2]
+  }), [dataset.url, obsm]);
+  return useZarr(obsmParams, GET_OPTIONS, {
     enabled: !!obsm
   });
 };
@@ -32,70 +32,52 @@ const meanData = (_i, data) => {
 export const useXData = function () {
   let agg = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : meanData;
   const dataset = useDataset();
-  const [xParams, setXParams] = useState(!dataset.selectedVar ? [] : !dataset.selectedVar?.isSet ? [{
-    url: dataset.url,
-    path: "X",
-    s: [null, dataset.selectedVar?.matrix_index]
-  }] : _.map(dataset.selectedVar?.vars, v => {
-    return {
+  const settings = useSettings();
+  const xParams = useMemo(() => {
+    var _settings$selectedVar, _settings$selectedVar2, _settings$selectedVar3;
+    return !settings.selectedVar ? [] : !((_settings$selectedVar = settings.selectedVar) !== null && _settings$selectedVar !== void 0 && _settings$selectedVar.isSet) ? [{
       url: dataset.url,
       path: "X",
-      s: [null, v.matrix_index]
-    };
-  }));
-  useEffect(() => {
-    setXParams(!dataset.selectedVar ? [] : !dataset.selectedVar?.isSet ? [{
-      url: dataset.url,
-      path: "X",
-      s: [null, dataset.selectedVar?.matrix_index]
-    }] : _.map(dataset.selectedVar?.vars, v => {
+      s: [null, (_settings$selectedVar2 = settings.selectedVar) === null || _settings$selectedVar2 === void 0 ? void 0 : _settings$selectedVar2.matrix_index]
+    }] : _.map((_settings$selectedVar3 = settings.selectedVar) === null || _settings$selectedVar3 === void 0 ? void 0 : _settings$selectedVar3.vars, v => {
       return {
         url: dataset.url,
         path: "X",
         s: [null, v.matrix_index]
       };
-    }));
-  }, [dataset.url, dataset.selectedVar]);
+    });
+  }, [dataset.url, settings.selectedVar]);
   return useMultipleZarr(xParams, GET_OPTIONS, {
     enabled: !!xParams.length
   }, agg);
 };
 export const useObsData = function () {
+  var _obs3, _obs4;
   let obs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   const dataset = useDataset();
-  obs = obs || dataset.selectedObs;
-  const [obsParams, setObsParams] = useState({
-    url: dataset.url,
-    path: "obs/" + obs?.name + (obs?.type === OBS_TYPES.CATEGORICAL ? "/codes" : "")
-  });
-  useEffect(() => {
-    setObsParams({
+  const settings = useSettings();
+  obs = obs || settings.selectedObs;
+  const obsParams = useMemo(() => {
+    var _obs, _obs2;
+    return {
       url: dataset.url,
-      path: "obs/" + obs?.name + (obs?.type === OBS_TYPES.CATEGORICAL ? "/codes" : "")
-    });
-  }, [dataset.url, obs]);
-  return useZarr(obsParams, null, GET_OPTIONS, {
+      path: "obs/" + ((_obs = obs) === null || _obs === void 0 ? void 0 : _obs.name) + (((_obs2 = obs) === null || _obs2 === void 0 ? void 0 : _obs2.type) === OBS_TYPES.CATEGORICAL ? "/codes" : "")
+    };
+  }, [dataset.url, (_obs3 = obs) === null || _obs3 === void 0 ? void 0 : _obs3.name, (_obs4 = obs) === null || _obs4 === void 0 ? void 0 : _obs4.type]);
+  return useZarr(obsParams, GET_OPTIONS, {
     enabled: !!obs
   });
 };
 export const useLabelObsData = () => {
   const dataset = useDataset();
-  const [labelObsParams, setLabelObsParams] = useState(_.map(dataset.labelObs, obs => {
+  const settings = useSettings();
+  const labelObsParams = useMemo(() => _.map(settings.labelObs, obs => {
     return {
       url: dataset.url,
       path: "obs/" + obs.name + (obs.type === OBS_TYPES.CATEGORICAL ? "/codes" : ""),
       key: obs.name
     };
-  }));
-  useEffect(() => {
-    setLabelObsParams(_.map(dataset.labelObs, obs => {
-      return {
-        url: dataset.url,
-        path: "obs/" + obs.name + (obs.type === OBS_TYPES.CATEGORICAL ? "/codes" : ""),
-        key: obs.name
-      };
-    }));
-  }, [dataset.labelObs, dataset.url]);
+  }), [dataset.url, settings.labelObs]);
   return useMultipleZarr(labelObsParams, GET_OPTIONS, {
     enabled: !!labelObsParams.length
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "1.2.0",
+  "version": "1.3.0-dev.2025-05-28.9afc380f",
   "author": "Haniffa Lab",
   "license": "MIT",
   "keywords": [
@@ -77,6 +77,8 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "prettier": "^3.5.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "sass": "1.77.6",
     "stylelint": "^16.10.0",
     "stylelint-config-prettier": "^9.0.5",
@@ -123,5 +125,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": "9afc380fef6e4b57764414ea202fada84a34456f"
+}

package/scss/cherita.scss

@@ -14,7 +14,7 @@ $prefix: "bs-" !default;
   height: 100%;
   width: 100%;
   display: flex;
-  z-index: 1;
+  z-index: 2;
   opacity: 0.75;
   position: absolute;
   justify-content: center;
@@ -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 {
@@ -248,6 +281,11 @@ $gauge-padding: 0.15rem;
   font-size: 0.85rem !important;
 }
 
+.feature-disease-info-list {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
 .feature-disease-info {
   font-weight: 300;
   padding-left: 0 !important;
@@ -352,9 +390,6 @@ $gauge-padding: 0.15rem;
 }
 
 .search-results {
-  max-height: 25vh;
-  overflow-y: scroll;
-
   .dropdown-item {
     white-space: normal;
     overflow-wrap: break-word;
@@ -365,3 +400,9 @@ $gauge-padding: 0.15rem;
   margin-right: 0.4rem;
   width: 1rem;
 }
+
+.ellipsis-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}