@haniffalab/cherita-react 0.2.1-dev.2025-03-06.d6a782a3 → 0.2.1-dev.2025-03-06.b4baf3a1

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

@@ -28,41 +28,41 @@ function FullPage({
   varMode = _constants.SELECTION_MODES.SINGLE,
   ...props
 }) {
-  const targetRef = (0, _react.useRef)();
+  const appRef = (0, _react.useRef)();
+  const [appDimensions, setAppDimensions] = (0, _react.useState)({
+    width: 0,
+    height: 0
+  });
   const [showObs, setShowObs] = (0, _react.useState)(false);
   const [showObsm, setShowObsm] = (0, _react.useState)(false);
   const [showVars, setShowVars] = (0, _react.useState)(false);
   const [showControls, setShowControls] = (0, _react.useState)(false);
-  const [dimensions, setDimensions] = (0, _react.useState)({
-    width: 0,
-    height: 0
-  });
-  (0, _react.useLayoutEffect)(() => {
-    function updateDimensions() {
-      if (targetRef.current) {
+  (0, _react.useEffect)(() => {
+    const updateDimensions = () => {
+      if (appRef.current) {
         // Get the distance from the top of the page to the target element
-        const rect = targetRef.current.getBoundingClientRect();
+        const rect = appRef.current.getBoundingClientRect();
         const distanceFromTop = rect.top + window.scrollY;
 
         // Calculate the available height for the Cherita app
         const availableHeight = window.innerHeight - distanceFromTop;
 
         // Update the dimensions to fit the viewport minus the navbar height
-        setDimensions({
-          width: targetRef.current.offsetWidth,
+        setAppDimensions({
+          width: appRef.current.offsetWidth,
           height: availableHeight
         });
       }
-    }
+    };
     window.addEventListener("resize", updateDimensions);
     updateDimensions(); // Initial update
     return () => window.removeEventListener("resize", updateDimensions);
   }, []);
   return /*#__PURE__*/_react.default.createElement("div", {
-    ref: targetRef,
+    ref: appRef,
     className: "cherita-app",
     style: {
-      height: dimensions.height
+      height: appDimensions.height
     }
   }, /*#__PURE__*/_react.default.createElement(_DatasetContext.DatasetProvider, props, /*#__PURE__*/_react.default.createElement("div", {
     className: "row g-0"

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

@@ -37,8 +37,9 @@ function FullPage({
   const [showControls, setShowControls] = (0, _react.useState)(false);
   const [showPseudospatialControls, setShowPseudospatialControls] = (0, _react.useState)(false);
   const [showModal, setShowModal] = (0, _react.useState)(false);
-  (0, _react.useLayoutEffect)(() => {
-    function updateDimensions() {
+  const [pseudospatialPlotType, setpseudospatialPlotType] = (0, _react.useState)(null);
+  (0, _react.useEffect)(() => {
+    const updateDimensions = () => {
       if (appRef.current) {
         // Get the distance from the top of the page to the target element
         const rect = appRef.current.getBoundingClientRect();
@@ -53,29 +54,11 @@ function FullPage({
           height: availableHeight
         });
       }
-    }
-
-    // Initial calculation
-    updateDimensions();
-
-    // Event listener for resize
-    window.addEventListener("resize", updateDimensions);
-
-    // Handle dimension recalculation when accordion expands/collapses
-    const accordionItems = document.querySelectorAll(".accordion-item");
-    accordionItems.forEach(item => {
-      item.addEventListener("transitionend", updateDimensions);
-    });
-
-    // Clean up event listeners
-    return () => {
-      window.removeEventListener("resize", updateDimensions);
-      accordionItems.forEach(item => {
-        item.removeEventListener("transitionend", updateDimensions);
-      });
     };
-  }, []); // Dependency array to run only on mount/unmount
-
+    window.addEventListener("resize", updateDimensions);
+    updateDimensions(); // Initial update
+    return () => window.removeEventListener("resize", updateDimensions);
+  }, []);
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: appRef,
     className: "cherita-app",
@@ -123,29 +106,16 @@ function FullPage({
     variant: "link",
     onClick: () => setShowModal(true)
   }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faChartSimple
-  })), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
-    variant: "link",
-    onClick: () => setShowModal(true)
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faChartLine
-  })), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
-    variant: "link",
-    onClick: () => setShowModal(true)
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faChartPie
-  })), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
-    variant: "link",
-    onClick: () => setShowModal(true)
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faChartArea
+    icon: _freeSolidSvgIcons.faArrowUpRightFromSquare
   }))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Card.Body, {
     className: "d-flex flex-column p-0"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "sidebar-pseudospatial"
   }, /*#__PURE__*/_react.default.createElement(_Pseudospatial.Pseudospatial, {
     className: "sidebar-pseudospatial",
-    setShowPseudospatialControls: setShowPseudospatialControls
+    plotType: pseudospatialPlotType,
+    setPlotType: setpseudospatialPlotType,
+    setShowControls: setShowPseudospatialControls
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "sidebar-features modern-scrollbars"
   }, /*#__PURE__*/_react.default.createElement(_SearchBar.SearchBar, {
@@ -159,7 +129,12 @@ function FullPage({
     centered: true
   }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Header, {
     closeButton: true
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Title, null, "My Modal")), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Body, null, /*#__PURE__*/_react.default.createElement(_Pseudospatial.Pseudospatial, null))), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasObs, {
+  }), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Body, null, /*#__PURE__*/_react.default.createElement(_Pseudospatial.Pseudospatial, {
+    plotType: pseudospatialPlotType,
+    setPlotType: setpseudospatialPlotType,
+    setShowControls: setShowPseudospatialControls,
+    height: 500
+  }))), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasObs, {
     show: showObs,
     handleClose: () => setShowObs(false)
   }), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasVars, {
@@ -172,7 +147,8 @@ function FullPage({
   }), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasControls, {
     show: showPseudospatialControls,
     handleClose: () => setShowPseudospatialControls(false),
-    Controls: _PseudospatialToolbar.PseudospatialToolbar
+    Controls: _PseudospatialToolbar.PseudospatialToolbar,
+    plotType: pseudospatialPlotType
   }), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasObsm, {
     show: showObsm,
     handleClose: () => setShowObsm(false)

package/dist/components/offcanvas/index.js

@@ -61,12 +61,13 @@ function OffcanvasVars({
 function OffcanvasControls({
   show,
   handleClose,
-  Controls
+  Controls,
+  ...props
 }) {
   return /*#__PURE__*/_react.default.createElement(_Offcanvas.default, {
     show: show,
     onHide: handleClose
   }, /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Header, {
     closeButton: true
-  }, /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Title, null, "Controls")), /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Body, null, /*#__PURE__*/_react.default.createElement(Controls, null)));
+  }, /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Title, null, "Controls")), /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Body, null, /*#__PURE__*/_react.default.createElement(Controls, props)));
 }

package/dist/components/pseudospatial/Pseudospatial.js

@@ -79,7 +79,10 @@ function usePseudospatialData(plotType) {
 function Pseudospatial({
   showLegend = true,
   sharedScaleRange = false,
-  setShowPseudospatialControls
+  height = 200,
+  setShowControls,
+  plotType,
+  setPlotType
 }) {
   const dataset = (0, _DatasetContext.useDataset)();
   const [data, setData] = (0, _react.useState)([]);
@@ -88,7 +91,9 @@ function Pseudospatial({
     getColor
   } = (0, _colorHelper.useColor)();
   const colorscale = (0, _react.useRef)(dataset.controls.colorScale);
-  const plotType = dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? _constants.PSEUDOSPATIAL_PLOT_TYPES.GENE : dataset.selectedObs?.type === _constants.OBS_TYPES.CATEGORICAL || dataset.selectedObs?.type === _constants.OBS_TYPES.BOOLEAN ? _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL : dataset.selectedObs?.type === _constants.OBS_TYPES.CONTINUOUS ? _constants.PSEUDOSPATIAL_PLOT_TYPES.CONTINUOUS : _constants.PSEUDOSPATIAL_PLOT_TYPES.MASKS;
+  (0, _react.useEffect)(() => {
+    setPlotType(dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? _constants.PSEUDOSPATIAL_PLOT_TYPES.GENE : dataset.selectedObs?.type === _constants.OBS_TYPES.CATEGORICAL || dataset.selectedObs?.type === _constants.OBS_TYPES.BOOLEAN ? _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL : dataset.selectedObs?.type === _constants.OBS_TYPES.CONTINUOUS ? _constants.PSEUDOSPATIAL_PLOT_TYPES.CONTINUOUS : _constants.PSEUDOSPATIAL_PLOT_TYPES.MASKS);
+  }, [dataset.colorEncoding, dataset.selectedObs?.type, setPlotType]);
   const updateColorscale = (0, _react.useCallback)(colorscale => {
     setLayout(l => {
       return {
@@ -187,7 +192,7 @@ function Pseudospatial({
       layout: {
         ...layout,
         autosize: true,
-        height: "200"
+        height: height
       },
       useResizeHandler: true,
       className: "cherita-pseudospatial-plot",
@@ -203,7 +208,7 @@ function Pseudospatial({
             ascent: 512,
             descent: 0
           },
-          click: () => setShowPseudospatialControls(prev => !prev)
+          click: () => setShowControls(prev => !prev)
         }]
       }
     }), hasSelections && showLegend && /*#__PURE__*/_react.default.createElement(_Legend.Legend, {

package/dist/components/pseudospatial/PseudospatialToolbar.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PseudospatialToolbar = PseudospatialToolbar;
-exports.PseudospatialToolbarLite = PseudospatialToolbarLite;
 var _react = _interopRequireWildcard(require("react"));
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 var _reactFontawesome = require("@fortawesome/react-fontawesome");
@@ -129,20 +128,4 @@ function PseudospatialToolbar({
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "cherita-pseudospatial-toolbar"
   }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(MaskSet, null)), /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonGroup, null, plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL && /*#__PURE__*/_react.default.createElement(CategoricalMode, null)));
-}
-
-// @TODO: add colormap, colorbar slider
-function PseudospatialToolbarLite({
-  plotType
-}) {
-  return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Toggle, {
-    variant: "success",
-    id: "dropdown-basic"
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faChevronDown
-  })), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, null, /*#__PURE__*/_react.default.createElement(MaskSet, null), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
-    href: "#/action-2"
-  }, "Another action"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
-    href: "#/action-3"
-  }, "Something else")));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "0.2.1-dev.2025-03-06.d6a782a3",
+  "version": "0.2.1-dev.2025-03-06.b4baf3a1",
   "author": "",
   "license": "",
   "main": "dist/index.js",
@@ -107,5 +107,5 @@
     "url": "https://github.com/haniffalab/cherita-react/issues"
   },
   "homepage": "https://github.com/haniffalab/cherita-react#readme",
-  "prereleaseSha": "d6a782a3798d41af33364f925ba2669d99f6fe3a"
+  "prereleaseSha": "b4baf3a1ea64f986ea5205c4ad0755a0ff933a4c"
 }

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