@haniffalab/cherita-react 0.2.1 → 1.0.0-dev.2025-03-07.aedc1788

package/dist/utils/zarrData.js

@@ -10,19 +10,22 @@ var _constants = require("../constants/constants");
 var _DatasetContext = require("../context/DatasetContext");
 var _zarrHelper = require("../helpers/zarr-helper");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const useObsmData = () => {
+const useObsmData = (obsm = null) => {
   const dataset = (0, _DatasetContext.useDataset)();
+  obsm = obsm || dataset.selectedObsm;
   const [obsmParams, setObsmParams] = (0, _react.useState)({
     url: dataset.url,
-    path: "obsm/" + dataset.selectedObsm
+    path: "obsm/" + obsm
   });
   (0, _react.useEffect)(() => {
     setObsmParams({
       url: dataset.url,
-      path: "obsm/" + dataset.selectedObsm
+      path: "obsm/" + obsm
     });
-  }, [dataset.url, dataset.selectedObsm]);
-  return (0, _zarrHelper.useZarr)(obsmParams, null, _zarrHelper.GET_OPTIONS);
+  }, [dataset.url, obsm]);
+  return (0, _zarrHelper.useZarr)(obsmParams, null, _zarrHelper.GET_OPTIONS, {
+    enabled: !!obsm
+  });
 };
 exports.useObsmData = useObsmData;
 const meanData = (_i, data) => {
@@ -54,22 +57,27 @@ 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 = () => {
+const useObsData = (obs = null) => {
   const dataset = (0, _DatasetContext.useDataset)();
+  obs = obs || dataset.selectedObs;
   const [obsParams, setObsParams] = (0, _react.useState)({
     url: dataset.url,
-    path: "obs/" + dataset.selectedObs?.name + (dataset.selectedObs?.type === _constants.OBS_TYPES.CATEGORICAL ? "/codes" : "")
+    path: "obs/" + obs?.name + (obs?.type === _constants.OBS_TYPES.CATEGORICAL ? "/codes" : "")
   });
   (0, _react.useEffect)(() => {
     setObsParams({
       url: dataset.url,
-      path: "obs/" + dataset.selectedObs?.name + (dataset.selectedObs?.type === _constants.OBS_TYPES.CATEGORICAL ? "/codes" : "")
+      path: "obs/" + obs?.name + (obs?.type === _constants.OBS_TYPES.CATEGORICAL ? "/codes" : "")
     });
-  }, [dataset.url, dataset.selectedObs]);
-  return (0, _zarrHelper.useZarr)(obsParams, null, _zarrHelper.GET_OPTIONS);
+  }, [dataset.url, obs]);
+  return (0, _zarrHelper.useZarr)(obsParams, null, _zarrHelper.GET_OPTIONS, {
+    enabled: !!obs
+  });
 };
 exports.useObsData = useObsData;
 const useLabelObsData = () => {
@@ -90,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,8 +1,13 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "0.2.1",
-  "author": "",
-  "license": "",
+  "version": "1.0.0-dev.2025-03-07.aedc1788",
+  "author": "Haniffa Lab",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "bioinformatics",
+    "visualization"
+  ],
   "main": "dist/index.js",
   "module": "dist/index.js",
   "style": "dist/css/cherita.css",
@@ -22,15 +27,15 @@
     "@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.0",
-    "deck.gl": "^8.9.19",
-    "jquery": "^3.7.0",
+    "bootstrap": "^5.3.3",
+    "deck.gl": "8.8.27",
+    "jquery": "^3.7.1",
     "nebula.gl": "^1.0.4",
     "numbro": "^2.5.0",
     "plotly.js": "^2.23.2",
@@ -45,24 +50,24 @@
     "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.79.5",
+    "sass": "1.77.6",
     "stylelint": "^16.10.0",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-standard-scss": "^13.1.0"
@@ -70,14 +75,15 @@
   "scripts": {
     "build:babel": "babel src/lib --out-dir dist --copy-files",
     "build:scss": "sass --load-path=node_modules src/scss/cherita-bootstrap.scss dist/css/cherita.css",
-    "copy:scss": "cpx src/scss/**/* scss",
+    "copy:scss": "cpx 'src/scss/**/*' 'scss'",
     "build": "npm run build:babel && npm run build:scss && npm run copy:scss",
     "test": "jest --watchAll",
     "test:ci": "jest --coverage --ci --no-watch",
     "lint:scss": "stylelint 'src/**/*.scss' --fix",
     "lint:js": "eslint 'src/**/*.js' --fix",
     "lint": "npm run lint:scss && npm run lint:js",
-    "start-demo": "npm run dev --prefix sites/demo"
+    "start-demo": "npm run dev --prefix sites/demo",
+    "reinstall": "rm -rf node_modules package-lock.json && npm install"
   },
   "eslintConfig": {
     "extends": [
@@ -97,7 +103,7 @@
       "last 1 safari version"
     ]
   },
-  "description": "",
+  "description": "React component library designed for data visualisation and analysis of single-cell and spatial multi-omics data.",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/haniffalab/cherita-react.git"
@@ -105,5 +111,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": "aedc178896f6254f95f7a5588a15636eb7b7f27a"
+}

package/scss/cherita.scss

@@ -1,3 +1,8 @@
+@import "components/layouts";
+@import "components/plots";
+@import "components/scrollbars";
+@import "components/plotly";
+
 .loading-spinner {
   @extend .bg-light;
 
@@ -24,25 +29,6 @@
   overflow: hidden;
 }
 
-.cherita-navbar {
-  @extend .mx-1;
-  @extend .my-2;
-  @extend .d-block;
-  @extend .d-xl-none;
-
-  position: absolute;
-  z-index: 11;
-  top: 0;
-  left: 0;
-  right: 0;
-  border-radius: 0.25rem;
-}
-
-.cherita-container .cherita-navbar-item > .dropdown-menu {
-  height: var(--dropdown-height);
-  overflow: hidden scroll;
-}
-
 /* Scrollbar styling */
 
 /* Works on Firefox */
@@ -79,14 +65,6 @@
   height: 100%;
 }
 
-.cherita-spatial-controls {
-  position: absolute;
-  z-index: 10;
-  top: 1rem;
-  left: 1rem;
-  width: 3rem;
-}
-
 .cherita-spatial-footer {
   position: absolute;
   z-index: 10;
@@ -208,12 +186,30 @@
 .value-count-badge {
   color: #000000 !important;
   background-color: #dedede !important;
+  font-weight: lighter;
 }
 
+.filtered-value-count-badge {
+  color: #ffffff !important;
+  // background-color: $alt-color !important;
+  font-weight: normal;
+}
+
+$gauge-padding: 0.15rem;
+
 .value-pct-gauge-container {
+  position: relative;
   width: 1.5rem;
   height: 1.5rem;
-  padding: 0.2rem;
+  padding: $gauge-padding;
+}
+
+.pct-gauge {
+  position: absolute !important;
+  top: $gauge-padding;
+  left: $gauge-padding;
+  width: calc(100% - $gauge-padding * 2) !important;
+  height: calc(100% - $gauge-padding * 2) !important;
 }
 
 .feature-histogram-container {
@@ -258,12 +254,6 @@
   margin: 0;
 }
 
-.cherita-app {
-  @extend .container-fluid;
-
-  position: relative;
-}
-
 .cherita-app-plot {
   @extend .col;
   @extend .col-12;
@@ -275,19 +265,6 @@
   max-height: 100%;
 }
 
-.cherita-app-obs {
-  @extend .col;
-  @extend .d-none;
-  @extend .d-lg-block;
-  @extend .col-lg-4;
-  @extend .col-xl-3;
-  @extend .col-xxl-3;
-
-  border-right: 5px solid #f5f5f5;
-  overflow-y: scroll;
-  height: 100%;
-}
-
 .cherita-app-var {
   @extend .p-3;
   @extend .col;
@@ -352,3 +329,68 @@
 .deck-tooltip {
   z-index: 100 !important;
 }
+
+.pseudospatial-reference-img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain; /* Keeps the image inside its allocated space */
+}
+
+.cherita-pseudospatial-controls {
+  position: absolute;
+  z-index: 10;
+  bottom: 1rem;
+  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;
+  }
+
+  &.active {
+    @extend .btn-primary;
+    @extend .text-light;
+  }
+  &:hover {
+    background-color: var(--geeks-btn-hover-bg);
+    border-color: var(--geeks-btn-hover-border-color);
+  }
+}
+
+.obs-accordion-body {
+  @extend .card;
+
+  margin: 10px;
+  position: relative;
+}

package/scss/components/layouts.scss

@@ -0,0 +1,101 @@
+.cherita-app {
+  position: relative;
+}
+
+.cherita-app .cherita-navbar {
+  @extend .m-3;
+  @extend .d-block;
+  @extend .d-xl-none;
+
+  position: absolute;
+  z-index: 11;
+  top: 0;
+  left: 0;
+  right: 0;
+  border-radius: 0.25rem;
+  @media (min-width: 992px) and (max-width: 1199px) {
+    margin-left: calc(33.33333333% + 1rem) !important;
+  }
+}
+
+.cherita-app-canvas {
+  position: relative;
+}
+
+.cherita-app-obs {
+  @extend .col;
+  @extend .d-none;
+  @extend .d-lg-block;
+  @extend .col-lg-4;
+  @extend .col-xl-3;
+  @extend .col-xxl-3;
+
+  overflow-y: scroll;
+}
+
+.cherita-app-sidebar {
+  @extend .d-none;
+  @extend .d-xl-flex;
+
+  width: 20%;
+  position: relative;
+
+  .card {
+    width: 100%;
+  }
+
+  .card-body {
+    overflow-y: hidden;
+  }
+
+  .sidebar-pseudospatial {
+    padding: 10px;
+    border-bottom: 1px solid #dee2e6;
+
+    .cherita-legend {
+      margin: 0 auto;
+    }
+  }
+
+  .sidebar-features {
+    padding: 10px;
+    margin-bottom: 10px;
+    overflow-y: auto;
+  }
+
+  .accordion-header-wrapper {
+    cursor: pointer;
+    padding: var(--geeks-accordion-btn-padding-y)
+      var(--geeks-accordion-btn-padding-x);
+    color: var(--geeks-accordion-btn-color);
+    background-color: var(--geeks-accordion-btn-bg);
+    border: 0;
+    border-radius: 0;
+    transition: var(--geeks-accordion-transition);
+    display: flex;
+    align-items: center;
+    width: 100%;
+
+    &:after {
+      content: "";
+      flex-shrink: 0;
+      width: var(--geeks-accordion-btn-icon-width);
+      height: var(--geeks-accordion-btn-icon-width);
+      margin-left: 8px;
+      background-image: var(--geeks-accordion-btn-icon);
+      background-repeat: no-repeat;
+      background-size: var(--geeks-accordion-btn-icon-width);
+      transition: var(--geeks-accordion-btn-icon-transition);
+    }
+  }
+
+  .accordion-header-wrapper:not(.collapsed) {
+    color: var(--geeks-accordion-active-color);
+    background-color: var(--geeks-accordion-active-bg);
+
+    &:after {
+      background-image: var(--geeks-accordion-btn-active-icon);
+      transform: var(--geeks-accordion-btn-icon-transform);
+    }
+  }
+}

package/scss/components/plotly.scss

@@ -0,0 +1,30 @@
+.js-plotly-plot .plotly .modebar {
+  border-radius: 5px;
+  background-color: rgba(0, 0, 0, 0.6);
+  padding: 0 4px !important;
+
+  .modebar-group {
+    margin: 0 !important;
+    padding: 0 !important;
+    background-color: transparent !important;
+
+    .modebar-btn {
+      fill: white !important; /* Ensures white icons */
+      color: white !important; /* Ensures text/icons are visible */
+      position: relative;
+      font-size: 16px;
+      padding: 4px;
+      height: auto;
+      cursor: pointer;
+      line-height: normal;
+
+      svg {
+        position: relative;
+        top: auto;
+        bottom: auto;
+        left: auto;
+        right: auto;
+      }
+    }
+  }
+}

package/scss/components/plots.scss

@@ -0,0 +1,13 @@
+.cherita-spatial-controls {
+  position: absolute;
+  z-index: 10;
+  top: 1rem;
+  left: 1rem;
+  width: 3rem;
+}
+
+@media (max-width: 1199.98px) {
+  .cherita-spatial-controls {
+    top: 5rem;
+  }
+}

package/scss/components/scrollbars.scss

@@ -0,0 +1,18 @@
+.modern-scrollbars::-webkit-scrollbar {
+  width: 20px;
+}
+
+.modern-scrollbars::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+.modern-scrollbars::-webkit-scrollbar-thumb {
+  background-color: #d6dee1;
+  border-radius: 20px;
+  border: 6px solid transparent;
+  background-clip: content-box;
+}
+
+.modern-scrollbars::-webkit-scrollbar-thumb:hover {
+  background-color: #a8bbbf;
+}

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);
-}