@haniffalab/cherita-react 0.2.0-dev.2024-12-16.f6e39628 → 0.2.0-dev.2024-12-16.f02cfae4

package/dist/index.js

@@ -39,6 +39,18 @@ Object.defineProperty(exports, "FullPage", {
     return _FullPage.FullPage;
   }
 });
+Object.defineProperty(exports, "FullPagePseudospatial", {
+  enumerable: true,
+  get: function () {
+    return _FullPage.FullPagePseudospatial;
+  }
+});
+Object.defineProperty(exports, "FullPageScatterplot", {
+  enumerable: true,
+  get: function () {
+    return _FullPage.FullPageScatterplot;
+  }
+});
 Object.defineProperty(exports, "Heatmap", {
   enumerable: true,
   get: function () {
@@ -99,6 +111,12 @@ Object.defineProperty(exports, "OffcanvasVars", {
     return _offcanvas.OffcanvasVars;
   }
 });
+Object.defineProperty(exports, "Pseudospatial", {
+  enumerable: true,
+  get: function () {
+    return _Pseudospatial.Pseudospatial;
+  }
+});
 Object.defineProperty(exports, "SELECTION_MODES", {
   enumerable: true,
   get: function () {
@@ -161,6 +179,7 @@ var _Matrixplot = require("./components/matrixplot/Matrixplot");
 var _MatrixplotControls = require("./components/matrixplot/MatrixplotControls");
 var _Violin = require("./components/violin/Violin");
 var _ViolinControls = require("./components/violin/ViolinControls");
+var _Pseudospatial = require("./components/pseudospatial/Pseudospatial");
 var _constants = require("./constants/constants");
 var _colorscales = require("./constants/colorscales");
 var _DatasetContext = require("./context/DatasetContext");

package/dist/utils/ImageViewer.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageViewer = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactBootstrap = require("react-bootstrap");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const ImageViewer = _ref => {
+  let {
+    src,
+    alt,
+    className = "img-fluid"
+  } = _ref;
+  const [error, setError] = (0, _react.useState)(false);
+  const handleError = () => {
+    console.error("Error loading image from src:", src);
+    setError(true);
+  };
+  if (!error) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      src: src,
+      alt: alt,
+      className: className,
+      loading: "lazy",
+      onError: handleError
+    });
+  } else {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
+        variant: "danger",
+        children: "Failed to load image"
+      })
+    });
+  }
+};
+exports.ImageViewer = ImageViewer;

package/dist/{components/scatterplot → utils}/Legend.js

@@ -6,17 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.Legend = Legend;
 var _react = require("react");
 var _lodash = _interopRequireDefault(require("lodash"));
-var _constants = require("../../constants/constants");
-var _DatasetContext = require("../../context/DatasetContext");
-var _colorHelper = require("../../helpers/color-helper");
-var _string = require("../../utils/string");
+var _string = require("./string");
+var _constants = require("../constants/constants");
+var _DatasetContext = require("../context/DatasetContext");
+var _colorHelper = require("../helpers/color-helper");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function Legend(_ref) {
   let {
     isCategorical = false,
     min = 0,
-    max = 1
+    max = 1,
+    colorscale = null
   } = _ref;
   const dataset = (0, _DatasetContext.useDataset)();
   const {
@@ -24,7 +25,11 @@ function Legend(_ref) {
   } = (0, _colorHelper.useColor)();
   const spanList = (0, _react.useMemo)(() => {
     return _lodash.default.range(100).map(i => {
-      var color = (0, _colorHelper.rgbToHex)(getColor(i / 100, isCategorical));
+      var color = (0, _colorHelper.rgbToHex)(getColor({
+        value: i / 100,
+        categorical: isCategorical,
+        colorscale: colorscale
+      }));
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "grad-step",
         style: {
@@ -32,7 +37,7 @@ function Legend(_ref) {
         }
       }, i);
     });
-  }, [getColor, isCategorical]);
+  }, [colorscale, getColor, isCategorical]);
   if (dataset.colorEncoding && !isCategorical) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "cherita-legend",

package/dist/utils/requests.js

@@ -7,7 +7,9 @@ exports.fetchData = fetchData;
 exports.useFetch = exports.useDebouncedFetch = void 0;
 var _reactQuery = require("@tanstack/react-query");
 var _usehooks = require("@uidotdev/usehooks");
+var _lodash = _interopRequireDefault(require("lodash"));
 var _errors = require("./errors");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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;
@@ -46,9 +48,9 @@ const useFetch = function (endpoint, params) {
     enabled = true
   } = opts;
   const {
-    data: fetchedData,
-    isLoading: isPending,
-    error: serverError
+    data: fetchedData = null,
+    isLoading: isPending = false,
+    error: serverError = null
   } = (0, _reactQuery.useQuery)({
     queryKey: [endpoint, params],
     queryFn: _ref => {
@@ -79,9 +81,9 @@ const useDebouncedFetch = function (endpoint, params) {
   } = opts;
   const debouncedParams = (0, _usehooks.useDebounce)(params, delay);
   const {
-    data: fetchedData,
-    isLoading: isPending,
-    error: serverError
+    data: fetchedData = null,
+    isLoading: isPending = false,
+    error: serverError = null
   } = (0, _reactQuery.useQuery)({
     queryKey: [endpoint, debouncedParams],
     queryFn: _ref2 => {

package/dist/utils/string.js

@@ -39,10 +39,10 @@ function formatAbbreviation(n) {
 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 (isNaN(n)) {
-    return "NaN";
-  } else if (n === 0) {
+  if (n === 0) {
     return "0";
+  } else if (!n || n === undefined || isNaN(n)) {
+    return "NaN";
   }
   switch (format) {
     case FORMATS.EXPONENTIAL:

package/dist/utils/zarrData.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useXData = exports.useObsmData = exports.useObsData = exports.useLabelObsData = void 0;
+var _react = require("react");
+var _lodash = _interopRequireDefault(require("lodash"));
+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 dataset = (0, _DatasetContext.useDataset)();
+  const [obsmParams, setObsmParams] = (0, _react.useState)({
+    url: dataset.url,
+    path: "obsm/" + dataset.selectedObsm
+  });
+  (0, _react.useEffect)(() => {
+    setObsmParams({
+      url: dataset.url,
+      path: "obsm/" + dataset.selectedObsm
+    });
+  }, [dataset.url, dataset.selectedObsm]);
+  return (0, _zarrHelper.useZarr)(obsmParams, null, _zarrHelper.GET_OPTIONS);
+};
+exports.useObsmData = useObsmData;
+const meanData = (_i, data) => {
+  return _lodash.default.zipWith(...data, function () {
+    for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {
+      values[_key] = arguments[_key];
+    }
+    return _lodash.default.mean(values);
+  });
+};
+const useXData = function () {
+  let agg = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : meanData;
+  const dataset = (0, _DatasetContext.useDataset)();
+  const [xParams, setXParams] = (0, _react.useState)(!dataset.selectedVar ? [] : !dataset.selectedVar?.isSet ? [{
+    url: dataset.url,
+    path: "X",
+    s: [null, dataset.selectedVar?.matrix_index]
+  }] : _lodash.default.map(dataset.selectedVar?.vars, v => {
+    return {
+      url: dataset.url,
+      path: "X",
+      s: [null, v.matrix_index]
+    };
+  }));
+  (0, _react.useEffect)(() => {
+    setXParams(!dataset.selectedVar ? [] : !dataset.selectedVar?.isSet ? [{
+      url: dataset.url,
+      path: "X",
+      s: [null, dataset.selectedVar?.matrix_index]
+    }] : _lodash.default.map(dataset.selectedVar?.vars, v => {
+      return {
+        url: dataset.url,
+        path: "X",
+        s: [null, v.matrix_index]
+      };
+    }));
+  }, [dataset.url, dataset.selectedVar]);
+  return (0, _zarrHelper.useMultipleZarr)(xParams, _zarrHelper.GET_OPTIONS, agg);
+};
+exports.useXData = useXData;
+const useObsData = () => {
+  const dataset = (0, _DatasetContext.useDataset)();
+  const [obsParams, setObsParams] = (0, _react.useState)({
+    url: dataset.url,
+    path: "obs/" + dataset.selectedObs?.name + (dataset.selectedObs?.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" : "")
+    });
+  }, [dataset.url, dataset.selectedObs]);
+  return (0, _zarrHelper.useZarr)(obsParams, null, _zarrHelper.GET_OPTIONS);
+};
+exports.useObsData = useObsData;
+const useLabelObsData = () => {
+  const dataset = (0, _DatasetContext.useDataset)();
+  const [labelObsParams, setLabelObsParams] = (0, _react.useState)(_lodash.default.map(dataset.labelObs, obs => {
+    return {
+      url: dataset.url,
+      path: "obs/" + obs.name + (obs.type === _constants.OBS_TYPES.CATEGORICAL ? "/codes" : ""),
+      key: obs.name
+    };
+  }));
+  (0, _react.useEffect)(() => {
+    setLabelObsParams(_lodash.default.map(dataset.labelObs, obs => {
+      return {
+        url: dataset.url,
+        path: "obs/" + obs.name + (obs.type === _constants.OBS_TYPES.CATEGORICAL ? "/codes" : ""),
+        key: obs.name
+      };
+    }));
+  }, [dataset.labelObs, dataset.url]);
+  return (0, _zarrHelper.useMultipleZarr)(labelObsParams, _zarrHelper.GET_OPTIONS);
+};
+exports.useLabelObsData = useLabelObsData;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "0.2.0-dev.2024-12-16.f6e39628",
+  "version": "0.2.0-dev.2024-12-16.f02cfae4",
   "author": "",
   "license": "",
   "main": "dist/index.js",
@@ -101,5 +101,5 @@
     "url": "https://github.com/haniffalab/cherita-react/issues"
   },
   "homepage": "https://github.com/haniffalab/cherita-react#readme",
-  "prereleaseSha": "f6e396285b478f157db2dd9d8bdd8adbaa262d4c"
+  "prereleaseSha": "f02cfae47749a5aeba88d12aefa8cee0367f9ddc"
 }

package/scss/cherita.scss

@@ -308,3 +308,42 @@
 .caret-off .dropdown-toggle::after {
   display: none;
 }
+
+.cherita-pseudospatial {
+  width: 100%;
+}
+
+.cherita-pseudospatial-plot {
+  width: 100%;
+  height: 100%;
+}
+
+.cherita-pseudospatial-toolbar {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Add a bottom border to the last item in the Accordion */
+.accordion-flush .accordion-item:last-child {
+  border-bottom: 1px solid #dee2e6; /* Adjust the color and width as needed */
+}
+
+.var-disease-info-collapse {
+  max-height: 40vh;
+  overflow-y: auto;
+}
+
+.cherita-scatterplot #deckgl-wrapper {
+  z-index: 1 !important;
+}
+
+.tooltip-grayout {
+  color: #a0a7b4 !important;
+  background-color: #3a424b !important;
+  opacity: 0.8;
+  z-index: 100 !important;
+}
+
+.deck-tooltip {
+  z-index: 100 !important;
+}