@haniffalab/cherita-react 0.2.1-dev.2025-02-25.bc0e99e8 → 0.2.1-dev.2025-03-06.b4baf3a1

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

@@ -28,46 +28,46 @@ function FullPage({
   varMode = _constants.SELECTION_MODES.SINGLE,
   ...props
 }) {
-  const targetRef = (0, _react.useRef)();
+  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);
   const [showControls, setShowControls] = (0, _react.useState)(false);
-  const [dimensions, setDimensions] = (0, _react.useState)({
-    width: 0,
-    height: 0
-  });
-  (0, _react.useLayoutEffect)(() => {
-    function updateDimensions() {
-      if (targetRef.current) {
+  (0, _react.useEffect)(() => {
+    const updateDimensions = () => {
+      if (appRef.current) {
         // Get the distance from the top of the page to the target element
-        const rect = targetRef.current.getBoundingClientRect();
+        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
-        setDimensions({
-          width: targetRef.current.offsetWidth,
+        setAppDimensions({
+          width: appRef.current.offsetWidth,
           height: availableHeight
         });
       }
-    }
+    };
     window.addEventListener("resize", updateDimensions);
     updateDimensions(); // Initial update
     return () => window.removeEventListener("resize", updateDimensions);
   }, []);
   return /*#__PURE__*/_react.default.createElement("div", {
-    ref: targetRef,
+    ref: appRef,
     className: "cherita-app",
     style: {
-      height: dimensions.height
+      height: appDimensions.height
     }
   }, /*#__PURE__*/_react.default.createElement(_DatasetContext.DatasetProvider, props, /*#__PURE__*/_react.default.createElement("div", {
     className: "row g-0"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "cherita-app-obs"
+    className: "cherita-app-obs modern-scrollbars border-end h-100"
   }, /*#__PURE__*/_react.default.createElement(_ObsList.ObsColsList, null)), /*#__PURE__*/_react.default.createElement("div", {
     className: "cherita-app-plot"
   }, /*#__PURE__*/_react.default.createElement("div", {

package/dist/components/full-page/FullPagePseudospatial.js

@@ -37,8 +37,9 @@ function FullPage({
   const [showControls, setShowControls] = (0, _react.useState)(false);
   const [showPseudospatialControls, setShowPseudospatialControls] = (0, _react.useState)(false);
   const [showModal, setShowModal] = (0, _react.useState)(false);
-  (0, _react.useLayoutEffect)(() => {
-    function updateDimensions() {
+  const [pseudospatialPlotType, setpseudospatialPlotType] = (0, _react.useState)(null);
+  (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();
@@ -53,29 +54,11 @@ function FullPage({
           height: availableHeight
         });
       }
-    }
-
-    // Initial calculation
-    updateDimensions();
-
-    // Event listener for resize
-    window.addEventListener("resize", updateDimensions);
-
-    // Handle dimension recalculation when accordion expands/collapses
-    const accordionItems = document.querySelectorAll(".accordion-item");
-    accordionItems.forEach(item => {
-      item.addEventListener("transitionend", updateDimensions);
-    });
-
-    // Clean up event listeners
-    return () => {
-      window.removeEventListener("resize", updateDimensions);
-      accordionItems.forEach(item => {
-        item.removeEventListener("transitionend", updateDimensions);
-      });
     };
-  }, []); // Dependency array to run only on mount/unmount
-
+    window.addEventListener("resize", updateDimensions);
+    updateDimensions(); // Initial update
+    return () => window.removeEventListener("resize", updateDimensions);
+  }, []);
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: appRef,
     className: "cherita-app",
@@ -123,29 +106,16 @@ function FullPage({
     variant: "link",
     onClick: () => setShowModal(true)
   }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faChartSimple
-  })), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
-    variant: "link",
-    onClick: () => setShowModal(true)
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faChartLine
-  })), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
-    variant: "link",
-    onClick: () => setShowModal(true)
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faChartPie
-  })), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
-    variant: "link",
-    onClick: () => setShowModal(true)
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faChartArea
+    icon: _freeSolidSvgIcons.faArrowUpRightFromSquare
   }))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Card.Body, {
     className: "d-flex flex-column p-0"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "sidebar-pseudospatial"
   }, /*#__PURE__*/_react.default.createElement(_Pseudospatial.Pseudospatial, {
     className: "sidebar-pseudospatial",
-    setShowPseudospatialControls: setShowPseudospatialControls
+    plotType: pseudospatialPlotType,
+    setPlotType: setpseudospatialPlotType,
+    setShowControls: setShowPseudospatialControls
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "sidebar-features modern-scrollbars"
   }, /*#__PURE__*/_react.default.createElement(_SearchBar.SearchBar, {
@@ -159,7 +129,12 @@ function FullPage({
     centered: true
   }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Header, {
     closeButton: true
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Title, null, "My Modal")), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Body, null, /*#__PURE__*/_react.default.createElement(_Pseudospatial.Pseudospatial, null))), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasObs, {
+  }), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Body, null, /*#__PURE__*/_react.default.createElement(_Pseudospatial.Pseudospatial, {
+    plotType: pseudospatialPlotType,
+    setPlotType: setpseudospatialPlotType,
+    setShowControls: setShowPseudospatialControls,
+    height: 500
+  }))), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasObs, {
     show: showObs,
     handleClose: () => setShowObs(false)
   }), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasVars, {
@@ -172,7 +147,8 @@ function FullPage({
   }), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasControls, {
     show: showPseudospatialControls,
     handleClose: () => setShowPseudospatialControls(false),
-    Controls: _PseudospatialToolbar.PseudospatialToolbar
+    Controls: _PseudospatialToolbar.PseudospatialToolbar,
+    plotType: pseudospatialPlotType
   }), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasObsm, {
     show: showObsm,
     handleClose: () => setShowObsm(false)

package/dist/components/offcanvas/index.js

@@ -61,12 +61,13 @@ function OffcanvasVars({
 function OffcanvasControls({
   show,
   handleClose,
-  Controls
+  Controls,
+  ...props
 }) {
   return /*#__PURE__*/_react.default.createElement(_Offcanvas.default, {
     show: show,
     onHide: handleClose
   }, /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Header, {
     closeButton: true
-  }, /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Title, null, "Controls")), /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Body, null, /*#__PURE__*/_react.default.createElement(Controls, null)));
+  }, /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Title, null, "Controls")), /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Body, null, /*#__PURE__*/_react.default.createElement(Controls, props)));
 }

package/dist/components/pseudospatial/Pseudospatial.js

@@ -79,7 +79,10 @@ function usePseudospatialData(plotType) {
 function Pseudospatial({
   showLegend = true,
   sharedScaleRange = false,
-  setShowPseudospatialControls
+  height = 200,
+  setShowControls,
+  plotType,
+  setPlotType
 }) {
   const dataset = (0, _DatasetContext.useDataset)();
   const [data, setData] = (0, _react.useState)([]);
@@ -88,7 +91,9 @@ function Pseudospatial({
     getColor
   } = (0, _colorHelper.useColor)();
   const colorscale = (0, _react.useRef)(dataset.controls.colorScale);
-  const plotType = dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? _constants.PSEUDOSPATIAL_PLOT_TYPES.GENE : dataset.selectedObs?.type === _constants.OBS_TYPES.CATEGORICAL || dataset.selectedObs?.type === _constants.OBS_TYPES.BOOLEAN ? _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL : dataset.selectedObs?.type === _constants.OBS_TYPES.CONTINUOUS ? _constants.PSEUDOSPATIAL_PLOT_TYPES.CONTINUOUS : _constants.PSEUDOSPATIAL_PLOT_TYPES.MASKS;
+  (0, _react.useEffect)(() => {
+    setPlotType(dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? _constants.PSEUDOSPATIAL_PLOT_TYPES.GENE : dataset.selectedObs?.type === _constants.OBS_TYPES.CATEGORICAL || dataset.selectedObs?.type === _constants.OBS_TYPES.BOOLEAN ? _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL : dataset.selectedObs?.type === _constants.OBS_TYPES.CONTINUOUS ? _constants.PSEUDOSPATIAL_PLOT_TYPES.CONTINUOUS : _constants.PSEUDOSPATIAL_PLOT_TYPES.MASKS);
+  }, [dataset.colorEncoding, dataset.selectedObs?.type, setPlotType]);
   const updateColorscale = (0, _react.useCallback)(colorscale => {
     setLayout(l => {
       return {
@@ -187,7 +192,7 @@ function Pseudospatial({
       layout: {
         ...layout,
         autosize: true,
-        height: "200"
+        height: height
       },
       useResizeHandler: true,
       className: "cherita-pseudospatial-plot",
@@ -203,7 +208,7 @@ function Pseudospatial({
             ascent: 512,
             descent: 0
           },
-          click: () => setShowPseudospatialControls(prev => !prev)
+          click: () => setShowControls(prev => !prev)
         }]
       }
     }), hasSelections && showLegend && /*#__PURE__*/_react.default.createElement(_Legend.Legend, {

package/dist/components/pseudospatial/PseudospatialToolbar.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PseudospatialToolbar = PseudospatialToolbar;
-exports.PseudospatialToolbarLite = PseudospatialToolbarLite;
 var _react = _interopRequireWildcard(require("react"));
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 var _reactFontawesome = require("@fortawesome/react-fontawesome");
@@ -129,20 +128,4 @@ function PseudospatialToolbar({
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "cherita-pseudospatial-toolbar"
   }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(MaskSet, null)), /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonGroup, null, plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL && /*#__PURE__*/_react.default.createElement(CategoricalMode, null)));
-}
-
-// @TODO: add colormap, colorbar slider
-function PseudospatialToolbarLite({
-  plotType
-}) {
-  return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Toggle, {
-    variant: "success",
-    id: "dropdown-basic"
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faChevronDown
-  })), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, null, /*#__PURE__*/_react.default.createElement(MaskSet, null), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
-    href: "#/action-2"
-  }, "Another action"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
-    href: "#/action-3"
-  }, "Something else")));
 }

package/dist/components/scatterplot/Scatterplot.js

@@ -212,7 +212,7 @@ function Scatterplot({
       value: (data.values[index] - min) / (max - min),
       categorical: isCategorical,
       grayOut: grayOut
-    });
+    }) || [0, 0, 0, 100];
   }, [data.values, obsIndices, getColor, isCategorical, max, min]);
 
   // @TODO: add support for pseudospatial hover to reflect in radius

package/dist/context/DatasetContext.js

@@ -23,17 +23,22 @@ const DatasetDispatchContext = exports.DatasetDispatchContext = /*#__PURE__*/(0,
 const queryClient = new _reactQuery.QueryClient({
   defaultOptions: {
     queries: {
-      gcTime: 1000 * 60 * 60 * 24 * 7 // store for a week
+      gcTime: 1000 * 60 * 15,
+      // garbage collect after 15min of inactive
+      staleTime: 1000 * 60 * 60,
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+      refetchOnWindowFocus: false
     }
   },
   queryCache: new _reactQuery.QueryCache({
-    onError: (error, query) => {
-      console.error(error, query);
+    onError: error => {
+      console.error(error);
     }
   })
 });
 // Type of queries to store responses
-const persistKeys = ["obs/cols", "var/names", "obsm/keys", "var/histograms", "obs/bins", "obs/distribution"];
+const persistKeys = ["obs/cols", "var/names", "obsm/keys", "obs/bins", "obs/distribution"];
 const persistOptions = {
   persister: (0, _querySyncStoragePersister.createSyncStoragePersister)({
     storage: window.localStorage
@@ -129,9 +134,9 @@ function DatasetProvider({
       }));
     } catch (err) {
       if (err.code === 22 || err.code === 1014 || err.name === "QuotaExceededError" || err.name === "NS_ERROR_DOM_QUOTA_REACHED") {
-        console.log("Browser storage quota exceeded");
+        console.err("Browser storage quota exceeded");
       } else {
-        console.log(err);
+        console.err(err);
       }
     }
   }, [dataset]);

package/dist/helpers/map-helper.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MapHelper = void 0;
 var _core = require("@deck.gl/core");
+var _lodash = _interopRequireDefault(require("lodash"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 class MapHelper {
   fitBounds(coords, {
     width = 400,
@@ -20,18 +22,21 @@ class MapHelper {
       latitude: 0,
       zoom: 12
     });
-    let latMin = Infinity;
-    let latMax = -Infinity;
-    let lonMin = Infinity;
-    let lonMax = -Infinity;
-    const RECT_LON_INDEX = 0;
-    const RECT_LAT_INDEX = 1;
-    coords.forEach(function (coord) {
-      if (coord[RECT_LAT_INDEX] < latMin) latMin = coord[RECT_LAT_INDEX];
-      if (coord[RECT_LAT_INDEX] > latMax) latMax = coord[RECT_LAT_INDEX];
-      if (coord[RECT_LON_INDEX] < lonMin) lonMin = coord[RECT_LON_INDEX];
-      if (coord[RECT_LON_INDEX] > lonMax) lonMax = coord[RECT_LON_INDEX];
-    });
+    let latMin;
+    let latMax;
+    let lonMin;
+    let lonMax;
+    if (coords) {
+      latMin = _lodash.default.minBy(coords, c => c[1])[1];
+      latMax = _lodash.default.maxBy(coords, c => c[1])[1];
+      lonMin = _lodash.default.minBy(coords, c => c[0])[0];
+      lonMax = _lodash.default.maxBy(coords, c => c[0])[0];
+    } else {
+      latMin = 0;
+      latMax = 1;
+      lonMin = 0;
+      lonMax = 1;
+    }
     const bounds = [[lonMin, latMin], [lonMax, latMax]];
     const {
       longitude,
@@ -39,10 +44,10 @@ class MapHelper {
       zoom
     } = view.fitBounds(bounds, {
       padding: {
-        top: 50,
-        bottom: 70,
-        left: 50,
-        right: 50
+        top: height * 0.05,
+        bottom: height * 0.075,
+        left: width * 0.05,
+        right: width * 0.05
       }
     });
     return {

package/dist/helpers/zarr-helper.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useZarr = exports.useMultipleZarr = exports.ZarrHelper = exports.GET_OPTIONS = void 0;
 var _react = require("react");
+var _reactQuery = require("@tanstack/react-query");
 var _zarr = require("zarr");
 const GET_OPTIONS = exports.GET_OPTIONS = {
   concurrencyLimit: 10,
@@ -13,7 +14,7 @@ const GET_OPTIONS = exports.GET_OPTIONS = {
     progress,
     queueSize
   }) => {
-    console.log(`${progress / queueSize * 100}% complete.`);
+    console.debug(`${progress / queueSize * 100}% complete.`);
   } // callback executed after each request
 };
 class ZarrHelper {
@@ -34,36 +35,40 @@ const fetchDataFromZarr = async (url, path, s, opts) => {
     const result = await z.get(s, opts);
     return result.data;
   } catch (error) {
-    throw new Error(error.message);
+    if (error instanceof _zarr.ArrayNotFoundError || error instanceof _zarr.GroupNotFoundError) {
+      error.status = 404;
+    }
+    throw error;
   }
 };
 const useZarr = ({
   url,
   path
-}, s = null, opts = {}) => {
+}, s = null, options = GET_OPTIONS, opts = {}) => {
   const {
     enabled = true
   } = opts;
-  const [data, setData] = (0, _react.useState)(null);
-  const [isPending, setIsPending] = (0, _react.useState)(true);
-  const [serverError, setServerError] = (0, _react.useState)(null);
-  (0, _react.useEffect)(() => {
-    if (enabled) {
-      setIsPending(true);
-      setServerError(null);
-      fetchDataFromZarr(url, path, s, opts).then(data => {
-        setData(data);
-      }).catch(error => {
-        setServerError(error.message);
-      }).finally(() => {
-        setIsPending(false);
-      });
-    } else {
-      setIsPending(false);
-      setData(null);
-      setServerError(null);
-    }
-  }, [enabled, opts, path, s, url]);
+  const {
+    data = null,
+    isPending = false,
+    error: serverError = null
+  } = (0, _reactQuery.useQuery)({
+    queryKey: ["zarr", url, path, s],
+    queryFn: () => {
+      if (enabled) {
+        return fetchDataFromZarr(url, path, s, options);
+      } else {
+        return;
+      }
+    },
+    retry: (failureCount, {
+      error
+    }) => {
+      if ([400, 401, 403, 404, 422].includes(error?.status)) return false;
+      return failureCount < 3;
+    },
+    ...opts
+  });
   return {
     data,
     isPending,
@@ -71,48 +76,49 @@ const useZarr = ({
   };
 };
 exports.useZarr = useZarr;
-const fetchDataFromZarrs = async (inputs, opts) => {
-  try {
-    const results = await Promise.all(inputs.map(input => fetchDataFromZarr(input.url, input.path, input.s, opts)));
-    return results;
-  } catch (error) {
-    throw new Error(error.message);
-  }
-};
 const aggregateData = (inputs, data) => {
   const dataObject = {};
-  data.forEach((result, index) => {
-    const key = inputs[index].key;
-    dataObject[key] = result;
+  inputs.forEach((input, index) => {
+    const key = input.key;
+    dataObject[key] = data?.[index];
   });
   return dataObject;
 };
-
-// @TODO: return response of successfully fetched data when error occurs
-const useMultipleZarr = (inputs, opts = {}, agg = aggregateData) => {
+const useMultipleZarr = (inputs, options = GET_OPTIONS, opts = {}, agg = aggregateData) => {
   const {
     enabled = true
   } = opts;
-  const [data, setData] = (0, _react.useState)(null);
-  const [isPending, setIsPending] = (0, _react.useState)(true);
-  const [serverError, setServerError] = (0, _react.useState)(null);
-  (0, _react.useEffect)(() => {
-    if (enabled) {
-      setIsPending(true);
-      setServerError(null);
-      fetchDataFromZarrs(inputs, opts).then(data => {
-        setData(agg(inputs, data));
-      }).catch(error => {
-        setServerError(error.message);
-      }).finally(() => {
-        setIsPending(false);
-      });
-    } else {
-      setData(null);
-      setIsPending(false);
-      setServerError(null);
-    }
-  }, [agg, enabled, inputs, opts]);
+  const combine = (0, _react.useCallback)(results => {
+    return {
+      data: agg(inputs, results.map(result => result.data)),
+      isPending: results.some(result => result.isPending),
+      serverError: results.find(result => result.error)
+    };
+  }, [agg, inputs]);
+  const {
+    data = null,
+    isPending = false,
+    serverError = null
+  } = (0, _reactQuery.useQueries)({
+    queries: inputs.map(input => ({
+      queryKey: ["zarr", input.url, input.path, input.s],
+      queryFn: () => {
+        if (enabled) {
+          return fetchDataFromZarr(input.url, input.path, input.s, options);
+        } else {
+          return;
+        }
+      },
+      retry: (failureCount, {
+        error
+      }) => {
+        if ([400, 401, 403, 404, 422].includes(error?.status)) return false;
+        return failureCount < 3;
+      },
+      ...opts
+    })),
+    combine
+  });
   return {
     data,
     isPending,

package/dist/utils/requests.js

@@ -45,7 +45,7 @@ const useFetch = (endpoint, params, opts = {
   } = opts;
   const {
     data: fetchedData = null,
-    isLoading: isPending = false,
+    isPending = false,
     error: serverError = null
   } = (0, _reactQuery.useQuery)({
     queryKey: [endpoint, params],
@@ -83,7 +83,7 @@ const useDebouncedFetch = (endpoint, params, delay = 500, opts = {
   const debouncedParams = (0, _usehooks.useDebounce)(params, delay);
   const {
     data: fetchedData = null,
-    isLoading: isPending = false,
+    isPending = false,
     error: serverError = null
   } = (0, _reactQuery.useQuery)({
     queryKey: [endpoint, debouncedParams],

package/dist/utils/zarrData.js

@@ -23,7 +23,9 @@ const useObsmData = (obsm = null) => {
       path: "obsm/" + obsm
     });
   }, [dataset.url, obsm]);
-  return (0, _zarrHelper.useZarr)(obsmParams, null, _zarrHelper.GET_OPTIONS);
+  return (0, _zarrHelper.useZarr)(obsmParams, null, _zarrHelper.GET_OPTIONS, {
+    enabled: !!obsm
+  });
 };
 exports.useObsmData = useObsmData;
 const meanData = (_i, data) => {
@@ -55,7 +57,9 @@ const useXData = (agg = meanData) => {
       };
     }));
   }, [dataset.url, dataset.selectedVar]);
-  return (0, _zarrHelper.useMultipleZarr)(xParams, _zarrHelper.GET_OPTIONS, agg);
+  return (0, _zarrHelper.useMultipleZarr)(xParams, _zarrHelper.GET_OPTIONS, {
+    enabled: !!xParams.length
+  }, agg);
 };
 exports.useXData = useXData;
 const useObsData = (obs = null) => {
@@ -71,7 +75,9 @@ const useObsData = (obs = null) => {
       path: "obs/" + obs?.name + (obs?.type === _constants.OBS_TYPES.CATEGORICAL ? "/codes" : "")
     });
   }, [dataset.url, obs]);
-  return (0, _zarrHelper.useZarr)(obsParams, null, _zarrHelper.GET_OPTIONS);
+  return (0, _zarrHelper.useZarr)(obsParams, null, _zarrHelper.GET_OPTIONS, {
+    enabled: !!obs
+  });
 };
 exports.useObsData = useObsData;
 const useLabelObsData = () => {
@@ -92,6 +98,8 @@ const useLabelObsData = () => {
       };
     }));
   }, [dataset.labelObs, dataset.url]);
-  return (0, _zarrHelper.useMultipleZarr)(labelObsParams, _zarrHelper.GET_OPTIONS);
+  return (0, _zarrHelper.useMultipleZarr)(labelObsParams, _zarrHelper.GET_OPTIONS, {
+    enabled: !!labelObsParams.length
+  });
 };
 exports.useLabelObsData = useLabelObsData;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "0.2.1-dev.2025-02-25.bc0e99e8",
+  "version": "0.2.1-dev.2025-03-06.b4baf3a1",
   "author": "",
   "license": "",
   "main": "dist/index.js",
@@ -22,14 +22,14 @@
     "@mui/x-charts": "^7.7.1",
     "@nebula.gl/editor": "^1.0.4",
     "@nebula.gl/layers": "^1.0.4",
-    "@tanstack/query-sync-storage-persister": "^4.36.1",
-    "@tanstack/react-query": "^4.36.1",
-    "@tanstack/react-query-persist-client": "^4.36.1",
+    "@tanstack/query-sync-storage-persister": "5.66",
+    "@tanstack/react-query": "5.66",
+    "@tanstack/react-query-persist-client": "5.66",
     "@tanstack/react-virtual": "^3.7.0",
     "@turf/turf": "^7.0.0",
     "@uidotdev/usehooks": "^2.4.1",
     "bootstrap": "^5.3.3",
-    "deck.gl": "^8.9.36",
+    "deck.gl": "8.8.27",
     "jquery": "^3.7.1",
     "nebula.gl": "^1.0.4",
     "numbro": "^2.5.0",
@@ -45,22 +45,22 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
-    "babel-jest": "^29.7.0",
     "@babel/cli": "^7.22.5",
     "@babel/core": "^7.22.5",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-env": "^7.22.5",
     "@babel/preset-react": "^7.22.5",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "babel-jest": "^29.7.0",
     "cpx": "^1.5.0",
     "eslint": "^8.42.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-import": "^2.29.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "eslint-plugin-import": "^2.29.1",
     "prettier": "^3.3.3",
     "sass": "1.77.6",
     "stylelint": "^16.10.0",
@@ -107,5 +107,5 @@
     "url": "https://github.com/haniffalab/cherita-react/issues"
   },
   "homepage": "https://github.com/haniffalab/cherita-react#readme",
-  "prereleaseSha": "bc0e99e8133390d6bacade0b91bdfee68d97ffcc"
+  "prereleaseSha": "b4baf3a1ea64f986ea5205c4ad0755a0ff933a4c"
 }

package/dist/components/pseudospatial/PseudospatialControls.js

@@ -1,11 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.PseudospatialControls = PseudospatialControls;
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function PseudospatialControls() {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
-}