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

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

@@ -67,7 +67,7 @@ function FullPage({
   }, /*#__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/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.d6a782a3",
   "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": "d6a782a3798d41af33364f925ba2669d99f6fe3a"
 }