@haniffalab/cherita-react 1.3.0-dev.2025-06-04.d986a94b → 1.3.0

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

@@ -0,0 +1,149 @@
+const _excluded = ["children", "varMode", "searchDiseases"];
+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); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { useEffect, useRef, useState } from "react";
+import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Button, Card, Container, Modal } from "react-bootstrap";
+import { SELECTION_MODES } from "../../constants/constants";
+import { DatasetProvider } from "../../context/DatasetContext";
+import { ObsColsList } from "../obs-list/ObsList";
+import { OffcanvasControls, OffcanvasObs, OffcanvasObsm, OffcanvasVars } from "../offcanvas";
+import { Pseudospatial } from "../pseudospatial/Pseudospatial";
+import { PseudospatialToolbar } from "../pseudospatial/PseudospatialToolbar";
+import { Scatterplot } from "../scatterplot/Scatterplot";
+import { ScatterplotControls } from "../scatterplot/ScatterplotControls";
+import { SearchBar } from "../search-bar/SearchBar";
+import { VarNamesList } from "../var-list/VarList";
+export function FullPage(_ref) {
+  let {
+      children,
+      varMode = SELECTION_MODES.SINGLE,
+      searchDiseases = false
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const appRef = useRef();
+  const [appDimensions, setAppDimensions] = useState({
+    width: 0,
+    height: 0
+  });
+  const [showObs, setShowObs] = useState(false);
+  const [showObsm, setShowObsm] = useState(false);
+  const [showVars, setShowVars] = useState(false);
+  const [showControls, setShowControls] = useState(false);
+  const [showPseudospatialControls, setShowPseudospatialControls] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+  const [pseudospatialPlotType, setpseudospatialPlotType] = useState(null);
+  useEffect(() => {
+    const updateDimensions = () => {
+      if (appRef.current) {
+        // Get the distance from the top of the page to the target element
+        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
+        setAppDimensions({
+          width: appRef.current.offsetWidth,
+          height: availableHeight
+        });
+      }
+    };
+    window.addEventListener("resize", updateDimensions);
+    updateDimensions(); // Initial update
+    return () => window.removeEventListener("resize", updateDimensions);
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: appRef,
+    className: "cherita-app",
+    style: {
+      height: appDimensions.height
+    }
+  }, /*#__PURE__*/React.createElement(DatasetProvider, props, /*#__PURE__*/React.createElement(Container, {
+    fluid: true,
+    className: "d-flex g-0",
+    style: {
+      height: appDimensions.height
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "cherita-app-obs modern-scrollbars border-end h-100"
+  }, /*#__PURE__*/React.createElement(ObsColsList, props)), /*#__PURE__*/React.createElement("div", {
+    className: "cherita-app-canvas flex-grow-1"
+  }, children({
+    setShowObs,
+    setShowVars
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "cherita-app-sidebar p-3"
+  }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(Card.Header, {
+    className: "d-flex justify-content-evenly align-items-center"
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "link",
+    onClick: () => setShowModal(true)
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faArrowUpRightFromSquare
+  }))), /*#__PURE__*/React.createElement(Card.Body, {
+    className: "d-flex flex-column p-0"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sidebar-pseudospatial"
+  }, /*#__PURE__*/React.createElement(Pseudospatial, {
+    className: "sidebar-pseudospatial",
+    plotType: pseudospatialPlotType,
+    setPlotType: setpseudospatialPlotType,
+    setShowControls: setShowPseudospatialControls
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "sidebar-features modern-scrollbars"
+  }, /*#__PURE__*/React.createElement(SearchBar, {
+    searchDiseases: searchDiseases,
+    searchVar: true
+  }), /*#__PURE__*/React.createElement(VarNamesList, {
+    mode: varMode
+  })))))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Modal, {
+    show: showModal,
+    onHide: () => setShowModal(false),
+    centered: true
+  }, /*#__PURE__*/React.createElement(Modal.Header, {
+    closeButton: true
+  }), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement(Pseudospatial, {
+    plotType: pseudospatialPlotType,
+    setPlotType: setpseudospatialPlotType,
+    setShowControls: setShowPseudospatialControls,
+    height: 500
+  }))), /*#__PURE__*/React.createElement(OffcanvasObs, {
+    show: showObs,
+    handleClose: () => setShowObs(false)
+  }), /*#__PURE__*/React.createElement(OffcanvasVars, {
+    show: showVars,
+    handleClose: () => setShowVars(false),
+    mode: varMode
+  }), /*#__PURE__*/React.createElement(OffcanvasControls, {
+    show: showControls,
+    handleClose: () => setShowControls(false),
+    Controls: ScatterplotControls
+  }), /*#__PURE__*/React.createElement(OffcanvasControls, {
+    show: showPseudospatialControls,
+    handleClose: () => setShowPseudospatialControls(false),
+    Controls: PseudospatialToolbar,
+    plotType: pseudospatialPlotType
+  }), /*#__PURE__*/React.createElement(OffcanvasObsm, {
+    show: showObsm,
+    handleClose: () => setShowObsm(false)
+  }))));
+}
+export function FullPagePseudospatial(props) {
+  return /*#__PURE__*/React.createElement(FullPage, _extends({}, props, {
+    varMode: SELECTION_MODES.SINGLE
+  }), _ref2 => {
+    let {
+      setShowObs,
+      setShowVars
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(Scatterplot, {
+      setShowObs: setShowObs,
+      setShowVars: setShowVars,
+      isFullscreen: true
+    });
+  });
+}

package/dist/esm/components/heatmap/Heatmap.js

@@ -5,25 +5,15 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import _ from "lodash";
-import { Alert, Button } from "react-bootstrap";
+import { Alert } from "react-bootstrap";
 import Plot from "react-plotly.js";
-import { PLOTLY_MODEBAR_BUTTONS } from "../../constants/constants";
 import { useDataset } from "../../context/DatasetContext";
 import { useFilteredData } from "../../context/FilterContext";
 import { useSettings } from "../../context/SettingsContext";
 import { LoadingSpinner } from "../../utils/LoadingIndicators";
 import { useDebouncedFetch } from "../../utils/requests";
-import { ControlsPlotlyToolbar, ObsPlotlyToolbar, VarPlotlyToolbar } from "../toolbar/Toolbar";
-export function Heatmap(_ref) {
+export function Heatmap() {
   var _settings$selectedObs, _settings$selectedObs2, _settings$selectedObs3;
-  let {
-    showObsBtn = false,
-    showVarsBtn = false,
-    showCtrlsBtn = false,
-    setShowObs,
-    setShowVars,
-    setShowControls
-  } = _ref;
   const ENDPOINT = "heatmap";
   const dataset = useDataset();
   const settings = useSettings();
@@ -100,29 +90,17 @@ export function Heatmap(_ref) {
     colorscale.current = settings.controls.colorScale;
     updateColorscale(colorscale.current);
   }, [settings.controls.colorScale, updateColorscale]);
-  const customModeBarButtons = _.compact([showObsBtn && ObsPlotlyToolbar({
-    onClick: setShowObs
-  }), showVarsBtn && VarPlotlyToolbar({
-    onClick: setShowVars
-  }), showCtrlsBtn && ControlsPlotlyToolbar({
-    onClick: setShowControls
-  })]);
-  const modeBarButtons = customModeBarButtons.length ? [customModeBarButtons, PLOTLY_MODEBAR_BUTTONS] : [PLOTLY_MODEBAR_BUTTONS];
   if (!serverError) {
     if (hasSelections) {
       return /*#__PURE__*/React.createElement("div", {
-        className: "cherita-plot cherita-heatmap position-relative"
+        className: "cherita-heatmap position-relative"
       }, isPending && /*#__PURE__*/React.createElement(LoadingSpinner, null), /*#__PURE__*/React.createElement(Plot, {
         data: data,
         layout: layout,
         useResizeHandler: true,
         style: {
-          width: "100%",
-          height: "100%"
-        },
-        config: {
-          displaylogo: false,
-          modeBarButtons: modeBarButtons
+          maxWidth: "100%",
+          maxHeight: "100%"
         }
       }));
     }
@@ -130,15 +108,7 @@ export function Heatmap(_ref) {
       className: "cherita-heatmap"
     }, /*#__PURE__*/React.createElement(Alert, {
       variant: "light"
-    }, "Select", " ", showVarsBtn ? /*#__PURE__*/React.createElement(Button, {
-      variant: "link",
-      className: "border-0 p-0 align-baseline",
-      onClick: setShowVars
-    }, "features") : "features", " ", "and a", " ", showObsBtn ? /*#__PURE__*/React.createElement(Button, {
-      variant: "link",
-      className: "border-0 p-0 align-baseline",
-      onClick: setShowObs
-    }, "category") : "category"));
+    }, "Select features and a category"));
   } else {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Alert, {
       variant: "danger"

package/dist/esm/components/matrixplot/Matrixplot.js

@@ -5,25 +5,15 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import _ from "lodash";
-import { Alert, Button } from "react-bootstrap";
+import { Alert } from "react-bootstrap";
 import Plot from "react-plotly.js";
-import { PLOTLY_MODEBAR_BUTTONS } from "../../constants/constants";
 import { useDataset } from "../../context/DatasetContext";
 import { useFilteredData } from "../../context/FilterContext";
 import { useSettings } from "../../context/SettingsContext";
 import { LoadingSpinner } from "../../utils/LoadingIndicators";
 import { useDebouncedFetch } from "../../utils/requests";
-import { ControlsPlotlyToolbar, ObsPlotlyToolbar, VarPlotlyToolbar } from "../toolbar/Toolbar";
-export function Matrixplot(_ref) {
+export function Matrixplot() {
   var _settings$selectedObs, _settings$selectedObs2, _settings$selectedObs3;
-  let {
-    showObsBtn = false,
-    showVarsBtn = false,
-    showCtrlsBtn = false,
-    setShowObs,
-    setShowVars,
-    setShowControls
-  } = _ref;
   const ENDPOINT = "matrixplot";
   const dataset = useDataset();
   const settings = useSettings();
@@ -102,29 +92,17 @@ export function Matrixplot(_ref) {
     colorscale.current = settings.controls.colorScale;
     updateColorscale(colorscale.current);
   }, [settings.controls.colorScale, updateColorscale]);
-  const customModeBarButtons = _.compact([showObsBtn && ObsPlotlyToolbar({
-    onClick: setShowObs
-  }), showVarsBtn && VarPlotlyToolbar({
-    onClick: setShowVars
-  }), showCtrlsBtn && ControlsPlotlyToolbar({
-    onClick: setShowControls
-  })]);
-  const modeBarButtons = customModeBarButtons.length ? [customModeBarButtons, PLOTLY_MODEBAR_BUTTONS] : [PLOTLY_MODEBAR_BUTTONS];
   if (!serverError) {
     if (hasSelections) {
       return /*#__PURE__*/React.createElement("div", {
-        className: "cherita-plot cherita-matrixplot position-relative"
+        className: "cherita-matrixplot position-relative"
       }, isPending && /*#__PURE__*/React.createElement(LoadingSpinner, null), /*#__PURE__*/React.createElement(Plot, {
         data: data,
         layout: layout,
         useResizeHandler: true,
         style: {
-          width: "100%",
-          height: "100%"
-        },
-        config: {
-          displaylogo: false,
-          modeBarButtons: modeBarButtons
+          maxWidth: "100%",
+          maxHeight: "100%"
         }
       }));
     }
@@ -132,15 +110,7 @@ export function Matrixplot(_ref) {
       className: "cherita-matrixplot"
     }, /*#__PURE__*/React.createElement(Alert, {
       variant: "light"
-    }, "Select", " ", showVarsBtn ? /*#__PURE__*/React.createElement(Button, {
-      variant: "link",
-      className: "border-0 p-0 align-baseline",
-      onClick: setShowVars
-    }, "features") : "features", " ", "and a", " ", showObsBtn ? /*#__PURE__*/React.createElement(Button, {
-      variant: "link",
-      className: "border-0 p-0 align-baseline",
-      onClick: setShowObs
-    }, "category") : "category"));
+    }, "Select features and a category"));
   } else {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Alert, {
       variant: "danger"

package/dist/esm/components/obs-list/ObsList.js

@@ -48,8 +48,7 @@ export function ObsColsList(_ref2) {
   var _settings$selectedObs;
   let {
     showColor = true,
-    enableObsGroups = true,
-    showSelectedAsActive = false
+    enableObsGroups = true
   } = _ref2;
   const ENDPOINT = "obs/cols";
   const dataset = useDataset();
@@ -216,7 +215,7 @@ export function ObsColsList(_ref2) {
     }
     const inLabelObs = _.some(settings.labelObs, i => i.name === item.name);
     const inSliceObs = settings.sliceBy.obs && ((_settings$selectedObs5 = settings.selectedObs) === null || _settings$selectedObs5 === void 0 ? void 0 : _settings$selectedObs5.name) === item.name;
-    const isColorEncoding = (showSelectedAsActive || settings.colorEncoding === COLOR_ENCODINGS.OBS) && ((_settings$selectedObs6 = settings.selectedObs) === null || _settings$selectedObs6 === void 0 ? void 0 : _settings$selectedObs6.name) === item.name;
+    const isColorEncoding = settings.colorEncoding === COLOR_ENCODINGS.OBS && ((_settings$selectedObs6 = settings.selectedObs) === null || _settings$selectedObs6 === void 0 ? void 0 : _settings$selectedObs6.name) === item.name;
     return /*#__PURE__*/React.createElement("div", {
       className: "accordion-item",
       key: item.name
@@ -243,7 +242,7 @@ export function ObsColsList(_ref2) {
         event.stopPropagation();
         toggleColor(item);
       },
-      title: showSelectedAsActive ? "Is selected" : "Is color encoding"
+      title: "Is color encoding"
     }, /*#__PURE__*/React.createElement(WaterDropIcon, null)))), /*#__PURE__*/React.createElement(Accordion.Collapse, {
       eventKey: item.name
     }, /*#__PURE__*/React.createElement("div", {

package/dist/esm/components/scatterplot/SpatialControls.js

@@ -8,9 +8,9 @@ import { OverlayTrigger, Tooltip } from "react-bootstrap";
 import Button from "react-bootstrap/Button";
 import ButtonGroup from "react-bootstrap/ButtonGroup";
 import Dropdown from "react-bootstrap/Dropdown";
+import { useDataset } from "../../context/DatasetContext";
 import { OffcanvasControls } from "../offcanvas";
 import { ScatterplotControls } from "./ScatterplotControls";
-import { BREAKPOINTS } from "../../constants/constants";
 import { useSettings, useSettingsDispatch } from "../../context/SettingsContext";
 export function SpatialControls(_ref) {
   var _features$features;
@@ -32,8 +32,8 @@ export function SpatialControls(_ref) {
   const [showControls, setShowControls] = useState(false);
   const handleCloseControls = () => setShowControls(false);
   const handleShowControls = () => setShowControls(true);
-  const LgBreakpoint = useMediaQuery(BREAKPOINTS.LG);
-  const XlBreakpoint = useMediaQuery(BREAKPOINTS.XL);
+  const LgBreakpoint = useMediaQuery("(max-width: 991.98px)");
+  const XlBreakpoint = useMediaQuery("(max-width: 1199.98px)");
   const showObsBtn = isFullscreen ? LgBreakpoint : true;
   const showVarsBtn = isFullscreen ? XlBreakpoint : true;
   const onSelect = (eventKey, event) => {

package/dist/esm/components/violin/Violin.js

@@ -7,25 +7,18 @@ import React, { useEffect, useState } from "react";
 import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import _ from "lodash";
-import { Alert, Button, OverlayTrigger, Tooltip } from "react-bootstrap";
+import { Alert, OverlayTrigger, Tooltip } from "react-bootstrap";
 import Plot from "react-plotly.js";
-import { PLOTLY_MODEBAR_BUTTONS, VIOLIN_MODES } from "../../constants/constants";
+import { VIOLIN_MODES } from "../../constants/constants";
 import { useDataset } from "../../context/DatasetContext";
 import { useFilteredData } from "../../context/FilterContext";
 import { useSettings } from "../../context/SettingsContext";
 import { LoadingSpinner } from "../../utils/LoadingIndicators";
 import { useDebouncedFetch } from "../../utils/requests";
-import { ControlsPlotlyToolbar, ObsPlotlyToolbar, VarPlotlyToolbar } from "../toolbar/Toolbar";
 export function Violin(_ref) {
   var _settings$selectedVar, _settings$selectedVar2, _settings$selectedVar3, _settings$selectedVar4, _settings$selectedObs, _settings$selectedObs2, _settings$selectedObs3;
   let {
-    mode = VIOLIN_MODES.MULTIKEY,
-    showObsBtn = false,
-    showVarsBtn = false,
-    showCtrlsBtn = false,
-    setShowObs,
-    setShowVars,
-    setShowControls
+    mode = VIOLIN_MODES.MULTIKEY
   } = _ref;
   const ENDPOINT = "violin";
   const dataset = useDataset();
@@ -124,29 +117,17 @@ export function Violin(_ref) {
       setLayout(fetchedData.layout);
     }
   }, [fetchedData, hasSelections, isPending, serverError]);
-  const customModeBarButtons = _.compact([showObsBtn && ObsPlotlyToolbar({
-    onClick: setShowObs
-  }), showVarsBtn && VarPlotlyToolbar({
-    onClick: setShowVars
-  }), showCtrlsBtn && ControlsPlotlyToolbar({
-    onClick: setShowControls
-  })]);
-  const modeBarButtons = customModeBarButtons.length ? [customModeBarButtons, PLOTLY_MODEBAR_BUTTONS] : [PLOTLY_MODEBAR_BUTTONS];
   if (!serverError) {
     if (hasSelections) {
       return /*#__PURE__*/React.createElement("div", {
-        className: "cherita-plot cherita-violin position-relative"
+        className: "cherita-violin position-relative"
       }, isPending && /*#__PURE__*/React.createElement(LoadingSpinner, null), /*#__PURE__*/React.createElement(Plot, {
         data: data,
         layout: layout,
         useResizeHandler: true,
         style: {
-          width: "100%",
-          height: "100%"
-        },
-        config: {
-          displaylogo: false,
-          modeBarButtons: modeBarButtons
+          maxWidth: "100%",
+          maxHeight: "100%"
         }
       }), (fetchedData === null || fetchedData === void 0 ? void 0 : fetchedData.resampled) && /*#__PURE__*/React.createElement(Alert, {
         variant: "warning"
@@ -161,21 +142,9 @@ export function Violin(_ref) {
       className: "cherita-violin"
     }, mode === VIOLIN_MODES.MULTIKEY && /*#__PURE__*/React.createElement(Alert, {
       variant: "light"
-    }, "Select", " ", showVarsBtn ? /*#__PURE__*/React.createElement(Button, {
-      variant: "link",
-      className: "border-0 p-0 align-baseline",
-      onClick: setShowVars
-    }, "features") : "features"), mode === VIOLIN_MODES.GROUPBY && /*#__PURE__*/React.createElement(Alert, {
+    }, "Select features"), mode === VIOLIN_MODES.GROUPBY && /*#__PURE__*/React.createElement(Alert, {
       variant: "light"
-    }, "Select", " ", showObsBtn ? /*#__PURE__*/React.createElement(Button, {
-      variant: "link",
-      className: "border-0 p-0 align-baseline",
-      onClick: setShowObs
-    }, "categories") : "categories", " ", "and a", " ", showVarsBtn ? /*#__PURE__*/React.createElement(Button, {
-      variant: "link",
-      className: "border-0 p-0 align-baseline",
-      onClick: setShowVars
-    }, "feature") : "feature"));
+    }, "Select categories and a feature"));
   } else {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Alert, {
       variant: "danger"

package/dist/esm/constants/constants.js

@@ -1,11 +1,4 @@
 export const LOCAL_STORAGE_KEY = "CHERITA";
-export const PLOT_TYPES = {
-  SCATTERPLOT: "scatterplot",
-  DOTPLOT: "dotplot",
-  HEATMAP: "heatmap",
-  MATRIXPLOT: "matrixplot",
-  VIOLINPLOT: "violinplot"
-};
 export const COLOR_ENCODINGS = {
   VAR: "var",
   OBS: "obs"
@@ -92,9 +85,4 @@ export const PSEUDOSPATIAL_CATEGORICAL_MODES = {
 
 // `default` cols to be shown out of accordion, at top of obslist
 // default values from cellxgene schema
-export const DEFAULT_OBS_GROUP = ["assay", "cell_type", "development_stage", "disease", "donor_id", "organism", "self_reported_ethnicity", "sex", "suspension_type", "tissue", "tissue_type"];
-export const PLOTLY_MODEBAR_BUTTONS = ["toImage", "zoom2d", "pan2d", "zoomIn2d", "zoomOut2d", "autoScale2d", "resetScale2d"];
-export const BREAKPOINTS = {
-  LG: "(max-width: 991.98px)",
-  XL: "(max-width: 1199.98px)"
-};
+export const DEFAULT_OBS_GROUP = ["assay", "cell_type", "development_stage", "disease", "donor_id", "organism", "self_reported_ethnicity", "sex", "suspension_type", "tissue", "tissue_type"];

package/dist/esm/index.js

@@ -1,22 +1,22 @@
 export { Dotplot } from "./components/dotplot/Dotplot";
 export { DotplotControls } from "./components/dotplot/DotplotControls";
-export { FullPage } from "./components/full-page/FullPage";
 export { Heatmap } from "./components/heatmap/Heatmap";
 export { HeatmapControls } from "./components/heatmap/HeatmapControls";
 export { Matrixplot } from "./components/matrixplot/Matrixplot";
 export { MatrixplotControls } from "./components/matrixplot/MatrixplotControls";
 export { ObsColsList } from "./components/obs-list/ObsList";
 export { ObsmKeysList } from "./components/obsm-list/ObsmList";
-export { OffcanvasControls, OffcanvasObs, OffcanvasObsm, OffcanvasVars } from "./components/offcanvas";
 export { Pseudospatial } from "./components/pseudospatial/Pseudospatial";
 export { Scatterplot } from "./components/scatterplot/Scatterplot";
 export { ScatterplotControls } from "./components/scatterplot/ScatterplotControls";
 export { SearchBar } from "./components/search-bar/SearchBar";
-export { Toolbar } from "./components/toolbar/Toolbar";
 export { VarNamesList } from "./components/var-list/VarList";
 export { Violin } from "./components/violin/Violin";
 export { ViolinControls } from "./components/violin/ViolinControls";
+export { FullPage, FullPagePlots, FullPageScatterplot } from "./components/full-page/FullPage";
+export { FullPagePseudospatial } from "./components/full-page/FullPagePseudospatial";
+export { OffcanvasControls, OffcanvasObs, OffcanvasObsm, OffcanvasVars } from "./components/offcanvas";
 export { COLORSCALES } from "./constants/colorscales";
-export { PLOT_TYPES, SELECTION_MODES, VIOLIN_MODES } from "./constants/constants";
+export { SELECTION_MODES, VIOLIN_MODES } from "./constants/constants";
 export { DatasetProvider } from "./context/DatasetContext";
 export { FilterProvider } from "./context/FilterContext";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "1.3.0-dev.2025-06-04.d986a94b",
+  "version": "1.3.0",
   "author": "Haniffa Lab",
   "license": "MIT",
   "keywords": [
@@ -125,6 +125,5 @@
   "bugs": {
     "url": "https://github.com/haniffalab/cherita-react/issues"
   },
-  "homepage": "https://github.com/haniffalab/cherita-react#readme",
-  "prereleaseSha": "d986a94bdc972b9311bb9b027e3d08030fc30d79"
-}
+  "homepage": "https://github.com/haniffalab/cherita-react#readme"
+}

package/scss/cherita.scss

@@ -58,6 +58,7 @@ $prefix: "bs-" !default;
 /* End scrollbar styling */
 
 .cherita-container-plot {
+  margin-top: 76px;
   padding: 20px;
   position: relative;
   min-height: 400px;

package/scss/components/layouts.scss

@@ -1,6 +1,5 @@
 .cherita-app {
   position: relative;
-  width: 100%;
 }
 
 .cherita-app {
@@ -51,21 +50,6 @@
     overflow-y: hidden;
   }
 
-  .sidebar-plotselector {
-    padding: 6px;
-    border-bottom: 1px solid #dee2e6;
-
-    .plotselector-icon {
-      padding-bottom: 2px;
-      cursor: pointer;
-
-      .active {
-        opacity: 1;
-        border-bottom: 2px solid #007bff;
-      }
-    }
-  }
-
   .sidebar-pseudospatial {
     padding: 10px;
     border-bottom: 1px solid #dee2e6;
@@ -124,58 +108,6 @@
   border-left: 1px solid #dee2e6;
 }
 
-.cherita-app-canvas {
-  .cherita-plot {
-    height: 100%;
-    min-height: 400px;
-  }
-}
-
-.cherita-app-container {
-  @extend .p-0;
-  display: flex;
-  flex-wrap: nowrap;
-  width: 100%;
-  height: 100%;
-
-  .cherita-app-obs {
-    flex: 0 0 auto;
-    min-width: 350px;
-    max-width: 20%;
-    overflow-y: auto;
-  }
-
-  .cherita-app-canvas {
-    @extend .p-1;
-    flex: 1 1 auto;
-    min-width: 400px;
-    position: relative;
-    max-height: 100%;
-    display: flex;
-    flex-direction: column;
-
-    .cherita-navbar {
-      @extend .m-0;
-      @extend .d-block;
-      position: relative;
-    }
-  }
-
-  .cherita-app-sidebar {
-    flex: 0 0 auto;
-    min-width: 350px;
-    max-width: 20%;
-    position: relative;
-  }
-
-  @media (max-width: 1400px) {
-    .cherita-app-obs,
-    .cherita-app-sidebar {
-      max-width: 25%;
-    }
-  }
-}
-
 .ps-xs-1 {
   padding-left: 0.15rem !important;
-}
+}

package/scss/components/plotly.scss

@@ -1,35 +1,30 @@
 .js-plotly-plot .plotly .modebar {
+  border-radius: 5px;
+  background-color: rgba(0, 0, 0, 0.6);
+  padding: 0 4px !important;
 
   .modebar-group {
-    @extend .bg-primary;
-    @extend .mx-1;
-    border-radius: 5px;
-    padding: 4px !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    background-color: transparent !important;
 
     .modebar-btn {
-      display: inline-flex;
-      justify-content: center;
+      fill: white !important; /* Ensures white icons */
+      color: white !important; /* Ensures text/icons are visible */
       position: relative;
-      font-size: 1.25rem;
-      padding: 0.25rem;
+      font-size: 16px;
+      padding: 4px;
       height: auto;
       cursor: pointer;
       line-height: normal;
 
       svg {
         position: relative;
-        top: 1px;
-
-        path {
-          fill: white !important;
-          color: white !important;
-        }
+        top: auto;
+        bottom: auto;
+        left: auto;
+        right: auto;
       }
     }
   }
 }
-
-.js-plotly-plot .plotly .modebar--hover > :not(.watermark) {
-  opacity: 0.5;
-  transition: opacity 0.3s;
-}