@haniffalab/cherita-react 1.0.0 → 1.1.0-dev.2025-04-01.1c91bb8b

package/dist/esm/utils/requests.js

@@ -0,0 +1,102 @@
+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 {
+    data: fetchedData = null,
+    isLoading: isPending = false,
+    error: serverError = null
+  } = useQuery({
+    queryKey: [endpoint, params],
+    queryFn: _ref => {
+      let {
+        signal
+      } = _ref;
+      return fetchData(endpoint, params, signal, apiUrl);
+    },
+    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 debouncedParams = useDebounce(params, delay);
+  const {
+    data: fetchedData = null,
+    isLoading: isPending = false,
+    error: serverError = null
+  } = useQuery({
+    queryKey: [endpoint, debouncedParams],
+    queryFn: _ref3 => {
+      let {
+        signal
+      } = _ref3;
+      return fetchData(endpoint, debouncedParams, signal, apiUrl);
+    },
+    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",
+  "version": "1.1.0-dev.2025-04-01.1c91bb8b",
   "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",
@@ -60,20 +69,23 @@
     "@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": "^8.57.1",
+    "eslint-config-prettier": "^8.10.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-prettier": "^5.2.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "prettier": "^3.3.3",
+    "prettier": "^3.5.3",
     "sass": "1.77.6",
     "stylelint": "^16.10.0",
     "stylelint-config-prettier": "^9.0.5",
     "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",
@@ -111,5 +123,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": "1c91bb8b0c502cfeb08cb10790193163e3814751"
+}

package/scss/cherita.scss

@@ -1,7 +1,12 @@
+// Define $prefix only if it hasn't been set already
+$prefix: "bs-" !default;
+
+@import "components/accordions";
+@import "components/lists";
 @import "components/layouts";
+@import "components/plotly";
 @import "components/plots";
 @import "components/scrollbars";
-@import "components/plotly";
 
 .loading-spinner {
   @extend .bg-light;
@@ -74,8 +79,8 @@
   align-items: flex-end;
   flex-wrap: wrap;
   width: 100%;
-  padding-left: 2rem;
-  padding-right: 2rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
   padding-bottom: 1rem;
   pointer-events: none;
 
@@ -213,7 +218,7 @@ $gauge-padding: 0.15rem;
 }
 
 .feature-histogram-container {
-  height: 1.25rem;
+  height: 1.31rem;
   width: 5rem;
   display: flex;
   align-items: center;
@@ -221,6 +226,7 @@ $gauge-padding: 0.15rem;
 
 .feature-histogram {
   @extend .feature-histogram-container;
+  border-radius: 5px;
 
   background-color: #dedede;
 }
@@ -343,54 +349,17 @@ $gauge-padding: 0.15rem;
   left: 1rem;
 }
 
-/* Styling the obs-accordion-header */
-.obs-accordion {
-  margin-bottom: 10px; /* Space between each accordion */
-}
-
-.obs-accordion-header {
-  @extend .btn;
-  @extend .btn-light-primary !optional;
-  @extend .btn-light;
-  @extend .text-primary;
-
-  display: flex;
-  align-items: center; /* Center the content vertically */
-  margin: 10px 10px 0 10px;
-  padding: 8px 12px; /* Adjust padding for spacing */
-  border-radius: 8px; /* Optional: rounded corners */
-  transition: background-color 0.3s ease; /* Smooth transition for background change */
-  cursor: pointer;
-
-  .obs-accordion-header-chevron {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 20px; /* Fixed width to prevent layout shifts */
-    height: 20px; /* Ensures a consistent square */
-    margin-right: 10px;
-  }
-  .obs-accordion-header-title {
-    font-size: 1rem;
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
+.search-results {
+  max-height: 25vh;
+  overflow-y: scroll;
 
-  &.active {
-    @extend .btn-primary;
-    @extend .text-light;
-  }
-  &:hover {
-    background-color: var(--geeks-btn-hover-bg);
-    border-color: var(--geeks-btn-hover-border-color);
+  .dropdown-item {
+    white-space: normal;
+    overflow-wrap: break-word;
   }
 }
 
-.obs-accordion-body {
-  @extend .card;
-
-  margin: 10px;
-  position: relative;
+.nav-icon {
+  margin-right: 0.4rem;
+  width: 1rem;
 }

package/scss/components/accordions.scss

@@ -0,0 +1,32 @@
+.obs-accordion-header {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  cursor: pointer;
+
+  &.active {
+    color: #0c63e4;
+    background-color: var(--#{$prefix}tertiary-bg);
+    border-bottom: var(--#{$prefix}accordion-border-width) solid
+      var(--#{$prefix}accordion-border-color);
+  }
+
+  .obs-accordion-header-chevron {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 20px;
+    height: 20px;
+    margin-right: 10px;
+  }
+  .obs-accordion-header-title {
+    font-size: 1rem;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .active-icon {
+    color: #0c63e4;
+  }
+}

package/scss/components/layouts.scss

@@ -30,7 +30,7 @@
   @extend .col-xl-3;
   @extend .col-xxl-3;
 
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 
 .cherita-app-sidebar {
@@ -60,6 +60,7 @@
   .sidebar-features {
     padding: 10px;
     margin-bottom: 10px;
+    height: 100%;
     overflow-y: auto;
   }
 

package/scss/components/lists.scss

@@ -0,0 +1,14 @@
+.list-group-flush.cherita-list {
+  .list-group-item.cherita-list-item-unstyled {
+    background-color: transparent;
+  }
+  .list-group-item {
+    border: 0;
+    padding: 0.375rem 0.75rem;
+    margin-bottom: 0.215rem;
+    line-height: 1.5;
+    color: var(--#{$prefix}body-color);
+    background-color: var(--#{$prefix}tertiary-bg);
+    border-radius: var(--#{$prefix}border-radius);
+  }
+}

package/dist/components/obs-list/ObsToolbar.js

@@ -1,64 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ObsToolbar = ObsToolbar;
-var _react = _interopRequireDefault(require("react"));
-var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
-var _reactFontawesome = require("@fortawesome/react-fontawesome");
-var _lodash = _interopRequireDefault(require("lodash"));
-var _reactBootstrap = require("react-bootstrap");
-var _constants = require("../../constants/constants");
-var _DatasetContext = require("../../context/DatasetContext");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function ObsToolbar({
-  item,
-  showToggleAllObs = true,
-  showLabel = true,
-  showSlice = true,
-  showColor = true,
-  onToggleAllObs,
-  onToggleLabel,
-  onToggleSlice,
-  onToggleColor
-}) {
-  const dataset = (0, _DatasetContext.useDataset)();
-  const allToggledOn = !item.omit.length;
-  const inLabelObs = _lodash.default.some(dataset.labelObs, i => i.name === item.name);
-  const inSliceObs = dataset.sliceBy.obs && dataset.selectedObs?.name === item.name;
-  const isColorEncoding = dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && dataset.selectedObs?.name === item.name;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "d-flex align-items-center"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "flex-grow-1"
-  }, showToggleAllObs && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Check, {
-    // prettier-ignore
-    type: "switch",
-    id: "custom-switch",
-    label: "Toggle all",
-    checked: allToggledOn,
-    onChange: onToggleAllObs
-  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonGroup, null, showLabel && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
-    variant: inLabelObs ? "primary" : "outline-primary",
-    size: "sm",
-    onClick: onToggleLabel,
-    title: "Add to tooltip"
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faListOl
-  })), showSlice && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
-    variant: inSliceObs ? "primary" : "outline-primary",
-    size: "sm",
-    onClick: onToggleSlice,
-    title: "Filter to selected"
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faScissors
-  })), showColor && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
-    variant: isColorEncoding ? "primary" : "outline-primary",
-    size: "sm",
-    onClick: onToggleColor,
-    title: "Set as color encoding"
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faDroplet
-  })))));
-}

package/dist/components/scatterplot/Toolbox.js

@@ -1,31 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Toolbox = Toolbox;
-var _react = _interopRequireDefault(require("react"));
-var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
-var _reactFontawesome = require("@fortawesome/react-fontawesome");
-var _Button = _interopRequireDefault(require("react-bootstrap/Button"));
-var _ButtonGroup = _interopRequireDefault(require("react-bootstrap/ButtonGroup"));
-var _string = require("../../utils/string");
-var _ObsmList = require("../obsm-list/ObsmList");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function Toolbox({
-  mode,
-  obsLength,
-  slicedLength
-}) {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "cherita-toolbox"
-  }, /*#__PURE__*/_react.default.createElement(_ButtonGroup.default, null, /*#__PURE__*/_react.default.createElement(_ObsmList.ObsmKeysList, null), /*#__PURE__*/_react.default.createElement(_Button.default, {
-    size: "sm"
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faDroplet
-  }), " ", mode), (mode || !isNaN(obsLength)) && (mode !== null && !isNaN(slicedLength) && slicedLength !== obsLength ? /*#__PURE__*/_react.default.createElement(_Button.default, {
-    size: "sm"
-  }, (0, _string.formatNumerical)(slicedLength), " out of", " ", (0, _string.formatNumerical)(obsLength), " cells") : /*#__PURE__*/_react.default.createElement(_Button.default, {
-    size: "sm"
-  }, (0, _string.formatNumerical)(obsLength), " cells"))));
-}