@haniffalab/cherita-react 1.0.0-dev.2025-03-13.73606a74 → 1.0.0-dev.2025-03-13.274a553c

package/dist/esm/utils/VirtualizedList.js

@@ -0,0 +1,55 @@
+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); }
+import React, { useCallback, useEffect, useState } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+export function VirtualizedList(_ref) {
+  let {
+    getDataAtIndex,
+    count,
+    ItemComponent,
+    estimateSize = 45,
+    overscan = 25,
+    maxHeight = "80vh",
+    ...props
+  } = _ref;
+  const [parentNode, setParentNode] = useState(null);
+  const itemVirtualizer = useVirtualizer({
+    count: count,
+    getScrollElement: () => parentNode,
+    estimateSize: () => estimateSize,
+    overscan: overscan
+  });
+  const refCallback = useCallback(node => {
+    setParentNode(node);
+  }, []);
+  const virtualItems = itemVirtualizer.getVirtualItems();
+  useEffect(() => {
+    itemVirtualizer.measure();
+  }, [itemVirtualizer, parentNode?.clientHeight, getDataAtIndex]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: refCallback,
+    style: {
+      overflowY: "auto",
+      maxHeight: maxHeight
+    },
+    className: "modern-scrollbars"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: `${itemVirtualizer.getTotalSize()}px`,
+      width: "100%",
+      position: "relative",
+      willChange: "transform"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      transform: `translateY(${virtualItems[0]?.start ?? 0}px)`
+    }
+  }, virtualItems.map(virtualItem => /*#__PURE__*/React.createElement("div", {
+    key: virtualItem.key,
+    "data-index": virtualItem.index,
+    ref: itemVirtualizer.measureElement
+  }, /*#__PURE__*/React.createElement(ItemComponent, _extends({}, getDataAtIndex(virtualItem.index), props)))))));
+}

package/dist/esm/utils/errors.js

@@ -0,0 +1,47 @@
+export const parseError = err => {
+  if (err === DOMException.TIMEOUT_ERR) {
+    return {
+      message: "Timeout error",
+      name: err
+    };
+  }
+  switch (err?.name) {
+    case "TypeError":
+      return {
+        ...err,
+        message: "Failed to fetch data from server"
+      };
+    case "ReadZarrError":
+      return {
+        ...err,
+        message: "Failed to read AnnData-Zarr"
+      };
+    case "InvalidObs":
+      return {
+        ...err,
+        message: "Observation not found in dataset"
+      };
+    case "InvalidVar":
+      return {
+        ...err,
+        message: "Feature not found in dataset"
+      };
+    case "InvalidKey":
+      return {
+        ...err,
+        message: "Key not found in datset"
+      };
+    case "BadRequest":
+      return {
+        ...err,
+        message: "Invalid request to server"
+      };
+    case "InternalServerError":
+      return {
+        ...err,
+        message: "Server error"
+      };
+    default:
+      return err;
+  }
+};

package/dist/esm/utils/requests.js

@@ -0,0 +1,116 @@
+import { useQuery } from "@tanstack/react-query";
+import { useDebounce } from "@uidotdev/usehooks";
+import { parseError } from "./errors";
+export async function fetchData(endpoint, params) {
+  let signal = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+  let ms = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 300000;
+  let apiUrl = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
+  apiUrl = apiUrl || process.env.REACT_APP_API_URL;
+  const controller = new AbortController();
+  const timeout = setTimeout(() => {
+    controller.abort(DOMException.TIMEOUT_ERR);
+  }, ms || 300000);
+  if (signal) signal.addEventListener("abort", () => controller.abort());
+  const response = await fetch(new URL(endpoint, apiUrl), {
+    method: "POST",
+    mode: "cors",
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json"
+    },
+    body: JSON.stringify(params),
+    signal: controller.signal
+  }).catch(err => {
+    // Manual check as fetch returns an AbortError regardless of the reason set to the signal
+    if (controller.signal.aborted && controller.signal.reason === DOMException.TIMEOUT_ERR) {
+      throw DOMException.TIMEOUT_ERR;
+    }
+    throw err;
+  }).finally(() => clearTimeout(timeout));
+  if (!response.ok) {
+    throw await response.json();
+  }
+  return await response.json();
+}
+export const useFetch = function (endpoint, params) {
+  let opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
+    refetchOnMount: false,
+    refetchOnWindowFocus: false
+  };
+  let apiUrl = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+  const {
+    enabled = true
+  } = opts;
+  const {
+    data: fetchedData = null,
+    isPending = false,
+    error: serverError = null
+  } = useQuery({
+    queryKey: [endpoint, params],
+    queryFn: _ref => {
+      let {
+        signal
+      } = _ref;
+      if (enabled) {
+        return fetchData(endpoint, params, signal, apiUrl);
+      } else {
+        return;
+      }
+    },
+    retry: (failureCount, _ref2) => {
+      let {
+        error
+      } = _ref2;
+      if ([400, 401, 403, 404, 422].includes(error?.status)) return false;
+      return failureCount < 3;
+    },
+    ...opts
+  });
+  return {
+    fetchedData,
+    isPending,
+    serverError: parseError(serverError)
+  };
+};
+export const useDebouncedFetch = function (endpoint, params) {
+  let delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 500;
+  let opts = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {
+    refetchOnMount: false,
+    refetchOnWindowFocus: false
+  };
+  let apiUrl = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
+  const {
+    enabled = true
+  } = opts;
+  const debouncedParams = useDebounce(params, delay);
+  const {
+    data: fetchedData = null,
+    isPending = false,
+    error: serverError = null
+  } = useQuery({
+    queryKey: [endpoint, debouncedParams],
+    queryFn: _ref3 => {
+      let {
+        signal
+      } = _ref3;
+      if (enabled) {
+        return fetchData(endpoint, debouncedParams, signal, apiUrl);
+      } else {
+        return;
+      }
+    },
+    retry: (failureCount, _ref4) => {
+      let {
+        error
+      } = _ref4;
+      if ([400, 401, 403, 404, 422].includes(error?.status)) return false;
+      return failureCount < 3;
+    },
+    ...opts
+  });
+  return {
+    fetchedData,
+    isPending,
+    serverError: parseError(serverError)
+  };
+};

package/dist/esm/utils/search.js

@@ -0,0 +1,39 @@
+import { useState } from "react";
+import { useFetch } from "./requests";
+import { useDataset } from "../context/DatasetContext";
+export const useDiseaseSearch = () => {
+  const ENDPOINT = "diseases";
+  const dataset = useDataset();
+  const [params, setParams] = useState({
+    url: dataset.url,
+    diseaseDatasets: dataset.diseaseDatasets,
+    text: ""
+  });
+  const data = useFetch(ENDPOINT, params, {
+    enabled: !!params.text.length,
+    refetchOnMount: true
+  });
+  return {
+    params,
+    setParams,
+    data
+  };
+};
+export const useVarSearch = () => {
+  const ENDPOINT = "var/names";
+  const dataset = useDataset();
+  const [params, setParams] = useState({
+    url: dataset.url,
+    col: dataset.varNamesCol,
+    text: ""
+  });
+  const data = useFetch(ENDPOINT, params, {
+    enabled: !!params.text.length,
+    refetchOnMount: true
+  });
+  return {
+    params,
+    setParams,
+    data
+  };
+};

package/dist/esm/utils/string.js

@@ -0,0 +1,59 @@
+import numbro from "numbro";
+export const FORMATS = {
+  EXPONENTIAL: "exponential",
+  ABBREVIATION: "abbreviation",
+  THOUSAND: "thousand"
+};
+function formatThousand(n) {
+  let precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 3;
+  return numbro(n).format({
+    thousandSeparated: true,
+    mantissa: precision,
+    trimMantissa: true
+  });
+}
+function formatExponential(n) {
+  let precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 3;
+  return numbro(n).format({
+    exponential: true,
+    mantissa: precision,
+    trimMantissa: true
+  });
+}
+function formatAbbreviation(n) {
+  let precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 3;
+  return numbro(n).format({
+    average: true,
+    mantissa: precision,
+    trimMantissa: true
+  }).toUpperCase();
+}
+export function formatNumerical(n) {
+  let format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : FORMATS.THOUSAND;
+  let precision = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 3;
+  if (n === 0) {
+    return "0";
+  } else if (!n || n === undefined || isNaN(n)) {
+    return "NaN";
+  }
+  switch (format) {
+    case FORMATS.EXPONENTIAL:
+      if (n < 1 / 10 ** precision || n >= 1e6) {
+        return formatExponential(n, precision);
+      } else {
+        return formatThousand(n, precision);
+      }
+    case FORMATS.ABBREVIATION:
+      if (n >= 1e6) {
+        return formatAbbreviation(n, precision);
+      } else {
+        return formatThousand(n, precision);
+      }
+    case FORMATS.THOUSAND:
+    default:
+      return formatThousand(n, precision);
+  }
+}
+export function formatString(s) {
+  return s.trim().replace(/_/g, " ");
+}

package/dist/esm/utils/zarrData.js

@@ -0,0 +1,102 @@
+import { useEffect, useState } from "react";
+import _ from "lodash";
+import { OBS_TYPES } from "../constants/constants";
+import { useDataset } from "../context/DatasetContext";
+import { GET_OPTIONS, useZarr, useMultipleZarr } from "../helpers/zarr-helper";
+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({
+    url: dataset.url,
+    path: "obsm/" + obsm
+  });
+  useEffect(() => {
+    setObsmParams({
+      url: dataset.url,
+      path: "obsm/" + obsm
+    });
+  }, [dataset.url, obsm]);
+  return useZarr(obsmParams, null, GET_OPTIONS, {
+    enabled: !!obsm
+  });
+};
+const meanData = (_i, data) => {
+  return _.zipWith(...data, function () {
+    for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {
+      values[_key] = arguments[_key];
+    }
+    return _.mean(values);
+  });
+};
+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 {
+      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 => {
+      return {
+        url: dataset.url,
+        path: "X",
+        s: [null, v.matrix_index]
+      };
+    }));
+  }, [dataset.url, dataset.selectedVar]);
+  return useMultipleZarr(xParams, GET_OPTIONS, {
+    enabled: !!xParams.length
+  }, agg);
+};
+export const useObsData = function () {
+  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({
+      url: dataset.url,
+      path: "obs/" + obs?.name + (obs?.type === OBS_TYPES.CATEGORICAL ? "/codes" : "")
+    });
+  }, [dataset.url, obs]);
+  return useZarr(obsParams, null, GET_OPTIONS, {
+    enabled: !!obs
+  });
+};
+export const useLabelObsData = () => {
+  const dataset = useDataset();
+  const [labelObsParams, setLabelObsParams] = useState(_.map(dataset.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]);
+  return useMultipleZarr(labelObsParams, GET_OPTIONS, {
+    enabled: !!labelObsParams.length
+  });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "1.0.0-dev.2025-03-13.73606a74",
+  "version": "1.0.0-dev.2025-03-13.274a553c",
   "author": "Haniffa Lab",
   "license": "MIT",
   "keywords": [
@@ -8,14 +8,23 @@
     "bioinformatics",
     "visualization"
   ],
-  "main": "dist/index.js",
-  "module": "dist/index.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
   "style": "dist/css/cherita.css",
   "sass": "scss/cherita.scss",
   "files": [
     "dist",
     "scss"
   ],
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./scss/cherita": "./scss/cherita.scss",
+    "./scss/*.scss": "./scss/*.scss",
+    "./dist/*.css": "./dist/css/*.css"
+  },
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
@@ -74,7 +83,9 @@
     "stylelint-config-standard-scss": "^13.1.0"
   },
   "scripts": {
-    "build:babel": "babel src/lib --out-dir dist --copy-files",
+    "build:esm": "babel src/lib --out-dir dist/esm --copy-files --env-name esm",
+    "build:cjs": "babel src/lib --out-dir dist/cjs --copy-files --env-name cjs",
+    "build:babel": "npm run build:esm && npm run build:cjs",
     "build:scss": "sass --load-path=node_modules src/scss/cherita-bootstrap.scss dist/css/cherita.css",
     "copy:scss": "cpx 'src/scss/**/*' 'scss'",
     "build": "npm run build:babel && npm run build:scss && npm run copy:scss",
@@ -113,5 +124,5 @@
     "url": "https://github.com/haniffalab/cherita-react/issues"
   },
   "homepage": "https://github.com/haniffalab/cherita-react#readme",
-  "prereleaseSha": "73606a7409fece00f1bd8d288cb7f23f27331bdb"
+  "prereleaseSha": "274a553cad08168d96337c2e89917876a601a108"
 }

package/scss/cherita.scss

@@ -394,3 +394,13 @@ $gauge-padding: 0.15rem;
   margin: 10px;
   position: relative;
 }
+
+.search-results {
+  max-height: 25vh;
+  overflow-y: scroll;
+
+  .dropdown-item {
+    white-space: normal;
+    overflow-wrap: break-word;
+  }
+}

package/scss/components/layouts.scss

@@ -60,6 +60,7 @@
   .sidebar-features {
     padding: 10px;
     margin-bottom: 10px;
+    height: 100%;
     overflow-y: auto;
   }