@haniffalab/cherita-react 1.0.0-dev.2025-03-13.bda9e1a6 → 1.0.0-dev.2025-03-24.e68f9e22

package/dist/{utils → cjs/utils}/zarrData.js

@@ -10,7 +10,8 @@ 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 = (obsm = null) => {
+const useObsmData = function () {
+  let obsm = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   const dataset = (0, _DatasetContext.useDataset)();
   obsm = obsm || dataset.selectedObsm;
   const [obsmParams, setObsmParams] = (0, _react.useState)({
@@ -29,9 +30,15 @@ const useObsmData = (obsm = null) => {
 };
 exports.useObsmData = useObsmData;
 const meanData = (_i, data) => {
-  return _lodash.default.zipWith(...data, (...values) => _lodash.default.mean(values));
+  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 = (agg = meanData) => {
+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,
@@ -62,7 +69,8 @@ const useXData = (agg = meanData) => {
   }, agg);
 };
 exports.useXData = useXData;
-const useObsData = (obs = null) => {
+const useObsData = function () {
+  let obs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   const dataset = (0, _DatasetContext.useDataset)();
   obs = obs || dataset.selectedObs;
   const [obsParams, setObsParams] = (0, _react.useState)({

package/dist/esm/components/dotplot/Dotplot.js

@@ -0,0 +1,135 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import _ from "lodash";
+import { Alert } from "react-bootstrap";
+import Plot from "react-plotly.js";
+import { useDataset, useDatasetDispatch } from "../../context/DatasetContext";
+import { useFilteredData } from "../../context/FilterContext";
+import { LoadingSpinner } from "../../utils/LoadingIndicators";
+import { useDebouncedFetch } from "../../utils/requests";
+export function Dotplot() {
+  const ENDPOINT = "dotplot";
+  const dataset = useDataset();
+  const {
+    obsIndices,
+    isSliced
+  } = useFilteredData();
+  const dispatch = useDatasetDispatch();
+  const colorscale = useRef(dataset.controls.colorScale);
+  const [data, setData] = useState([]);
+  const [layout, setLayout] = useState({});
+  const [hasSelections, setHasSelections] = useState(false);
+  const [params, setParams] = useState({
+    url: dataset.url,
+    obsCol: dataset.selectedObs,
+    obsValues: !dataset.selectedObs?.omit.length ? null : _.difference(_.values(dataset.selectedObs?.codes), dataset.selectedObs?.omit).map(c => dataset.selectedObs?.codesMap[c]),
+    varKeys: dataset.selectedMultiVar.map(i => i.isSet ? {
+      name: i.name,
+      indices: i.vars.map(v => v.index)
+    } : i.index),
+    obsIndices: isSliced ? [...(obsIndices || [])] : null,
+    standardScale: dataset.controls.standardScale,
+    meanOnlyExpressed: dataset.controls.meanOnlyExpressed,
+    expressionCutoff: dataset.controls.expressionCutoff,
+    varNamesCol: dataset.varNamesCol
+  });
+  // @TODO: set default scale
+
+  useEffect(() => {
+    if (dataset.selectedObs && dataset.selectedMultiVar.length) {
+      setHasSelections(true);
+    } else {
+      setHasSelections(false);
+    }
+    setParams(p => {
+      return {
+        ...p,
+        url: dataset.url,
+        obsCol: dataset.selectedObs,
+        obsValues: !dataset.selectedObs?.omit.length ? null : _.difference(_.values(dataset.selectedObs?.codes), dataset.selectedObs?.omit).map(c => dataset.selectedObs?.codesMap[c]),
+        varKeys: dataset.selectedMultiVar.map(i => i.isSet ? {
+          name: i.name,
+          indices: i.vars.map(v => v.index)
+        } : i.index),
+        obsIndices: isSliced ? [...(obsIndices || [])] : null,
+        standardScale: dataset.controls.standardScale,
+        meanOnlyExpressed: dataset.controls.meanOnlyExpressed,
+        expressionCutoff: dataset.controls.expressionCutoff,
+        varNamesCol: dataset.varNamesCol
+      };
+    });
+  }, [dataset.url, dataset.selectedObs, dataset.selectedMultiVar, dataset.controls.standardScale, dataset.controls.meanOnlyExpressed, dataset.controls.expressionCutoff, dataset.varNamesCol, isSliced, obsIndices]);
+  const updateColorscale = useCallback(colorscale => {
+    setLayout(l => {
+      return {
+        ...l,
+        coloraxis: {
+          ...l.coloraxis,
+          colorscale: colorscale
+        }
+      };
+    });
+  }, []);
+  const {
+    fetchedData,
+    isPending,
+    serverError
+  } = useDebouncedFetch(ENDPOINT, params, 500, {
+    enabled: !!params.obsCol && !!params.varKeys.length
+  });
+  useEffect(() => {
+    if (hasSelections && !isPending && !serverError) {
+      setData(fetchedData.data);
+      setLayout(fetchedData.layout);
+      dispatch({
+        type: "set.controls.colorAxis",
+        colorAxis: {
+          dmin: fetchedData.range.min.toFixed(1),
+          dmax: fetchedData.range.max.toFixed(1),
+          cmin: fetchedData.range.min.toFixed(1),
+          cmax: fetchedData.range.max.toFixed(1)
+        }
+      });
+      updateColorscale(colorscale.current);
+    }
+  }, [fetchedData, isPending, serverError, hasSelections, dispatch, updateColorscale]);
+  useEffect(() => {
+    colorscale.current = dataset.controls.colorScale;
+    updateColorscale(colorscale.current);
+  }, [dataset.controls.colorScale, updateColorscale]);
+  useEffect(() => {
+    setLayout(l => {
+      return {
+        ...l,
+        coloraxis: {
+          ...l.coloraxis,
+          cmin: dataset.controls.colorAxis.cmin,
+          cmax: dataset.controls.colorAxis.cmax
+        }
+      };
+    });
+  }, [dataset.controls.colorAxis.cmin, dataset.controls.colorAxis.cmax]);
+  if (!serverError) {
+    if (hasSelections) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "cherita-dotplot position-relative"
+      }, isPending && /*#__PURE__*/React.createElement(LoadingSpinner, null), /*#__PURE__*/React.createElement(Plot, {
+        data: data,
+        layout: layout,
+        useResizeHandler: true,
+        style: {
+          maxWidth: "100%",
+          maxHeight: "100%"
+        }
+      }));
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: "cherita-dotplot"
+    }, /*#__PURE__*/React.createElement(Alert, {
+      variant: "light"
+    }, "Select features and a category"));
+  } else {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Alert, {
+      variant: "danger"
+    }, serverError.message));
+  }
+}

package/dist/esm/components/dotplot/DotplotControls.js

@@ -0,0 +1,148 @@
+import React, { useEffect, useState } from "react";
+import _ from "lodash";
+import { Button, ButtonGroup, ButtonToolbar, Form, ToggleButton, InputGroup } from "react-bootstrap";
+import Dropdown from "react-bootstrap/Dropdown";
+import { COLORSCALES } from "../../constants/colorscales";
+import { DOTPLOT_SCALES } from "../../constants/constants";
+import { useDataset, useDatasetDispatch } from "../../context/DatasetContext";
+export function DotplotControls() {
+  const dataset = useDataset();
+  const dispatch = useDatasetDispatch();
+  const [controls, setControls] = useState({
+    expressionCutoff: dataset.controls.expressionCutoff,
+    colorAxis: {
+      cmin: dataset.controls.colorAxis.cmin,
+      cmax: dataset.controls.colorAxis.cmax
+    }
+  });
+  useEffect(() => {
+    setControls(c => ({
+      ...c,
+      colorAxis: {
+        cmin: dataset.controls.colorAxis.cmin,
+        cmax: dataset.controls.colorAxis.cmax
+      },
+      expressionCutoff: dataset.controls.expressionCutoff
+    }));
+  }, [dataset.controls.colorAxis.cmin, dataset.controls.colorAxis.cmax, dataset.controls.expressionCutoff]);
+  const colorScaleList = _.keys(COLORSCALES).map(key => /*#__PURE__*/React.createElement(Dropdown.Item, {
+    key: key,
+    active: dataset.controls.colorScale === key,
+    onClick: () => {
+      dispatch({
+        type: "set.controls.colorScale",
+        colorScale: key
+      });
+    }
+  }, key));
+  const standardScaleList = _.values(DOTPLOT_SCALES).map(scale => /*#__PURE__*/React.createElement(Dropdown.Item, {
+    key: scale.value,
+    active: dataset.controls.scale.dotplot === scale,
+    onClick: () => {
+      dispatch({
+        type: "set.controls.scale",
+        plot: "dotplot",
+        scale: scale
+      });
+    }
+  }, scale.name));
+  return /*#__PURE__*/React.createElement(ButtonToolbar, null, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.Toggle, {
+    id: "dropdownColorscale",
+    variant: "light"
+  }, dataset.controls.colorScale), /*#__PURE__*/React.createElement(Dropdown.Menu, null, colorScaleList))), /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(InputGroup, null, /*#__PURE__*/React.createElement(InputGroup.Text, null, "Standard scale"), /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.Toggle, {
+    id: "dropdownStandardScale",
+    variant: "light"
+  }, dataset.controls.scale.dotplot.name), /*#__PURE__*/React.createElement(Dropdown.Menu, null, standardScaleList)))), /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(ToggleButton, {
+    id: "toggleMeanOnlyExpressed",
+    type: "checkbox",
+    variant: "outline-primary",
+    checked: dataset.controls.meanOnlyExpressed,
+    onChange: () => {
+      dispatch({
+        type: "set.controls.meanOnlyExpressed",
+        meanOnlyExpressed: !dataset.controls.meanOnlyExpressed
+      });
+    }
+  }, "Average only above cutoff")), /*#__PURE__*/React.createElement(Form, {
+    onSubmit: e => {
+      e.preventDefault();
+      dispatch({
+        type: "set.controls.expressionCutoff",
+        expressionCutoff: parseFloat(controls.expressionCutoff)
+      });
+    }
+  }, /*#__PURE__*/React.createElement(InputGroup, null, /*#__PURE__*/React.createElement(InputGroup.Text, null, "Expression Cutoff"), /*#__PURE__*/React.createElement(Form.Control, {
+    size: "sm",
+    type: "number",
+    step: "0.1",
+    min: 0.0,
+    value: controls.expressionCutoff,
+    onChange: e => {
+      setControls({
+        ...controls,
+        expressionCutoff: e.target.value
+      });
+    }
+  }), /*#__PURE__*/React.createElement(Button, {
+    type: "submit",
+    variant: "outline-primary"
+  }, "Apply"))), /*#__PURE__*/React.createElement(Form, {
+    onSubmit: e => {
+      e.preventDefault();
+      dispatch({
+        type: "set.controls.colorAxis.crange",
+        cmin: controls.colorAxis.cmin,
+        cmax: controls.colorAxis.cmax
+      });
+    }
+  }, /*#__PURE__*/React.createElement(InputGroup, null, /*#__PURE__*/React.createElement(InputGroup.Text, null, "Colorscale"), /*#__PURE__*/React.createElement(InputGroup.Text, null, "min"), /*#__PURE__*/React.createElement(Form.Control, {
+    name: "scaleMin",
+    size: "sm",
+    type: "number",
+    value: controls.colorAxis.cmin,
+    step: 0.1,
+    min: Math.min(dataset.controls.colorAxis.dmin, 0.0),
+    max: dataset.controls.colorAxis.dmax,
+    onChange: e => {
+      setControls({
+        ...controls,
+        colorAxis: {
+          ...controls.colorAxis,
+          cmin: e.target.value
+        }
+      });
+    }
+  }), /*#__PURE__*/React.createElement(InputGroup.Text, null, "max"), /*#__PURE__*/React.createElement(Form.Control, {
+    name: "scaleMax",
+    size: "sm",
+    type: "number",
+    value: controls.colorAxis.cmax,
+    step: 0.1,
+    min: controls.colorAxis.cmin,
+    max: dataset.controls.colorAxis.dmax,
+    onChange: e => {
+      if (parseFloat(e.target.value) > dataset.controls.colorAxis.dmax) {
+        e.target.value = dataset.controls.colorAxis.dmax.toFixed(1);
+      }
+      setControls({
+        ...controls,
+        colorAxis: {
+          ...controls.colorAxis,
+          cmax: e.target.value
+        }
+      });
+    }
+  }), /*#__PURE__*/React.createElement(Button, {
+    type: "submit",
+    variant: "outline-primary"
+  }, "Apply"), /*#__PURE__*/React.createElement(Button, {
+    variant: "outline-primary",
+    onClick: () => {
+      dispatch({
+        type: "set.controls.colorAxis.crange",
+        cmin: dataset.controls.colorAxis.dmin,
+        cmax: dataset.controls.colorAxis.dmax
+      });
+    }
+  }, "Autoscale"))));
+}

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

@@ -0,0 +1,134 @@
+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); }
+import React, { useEffect, useRef, useState } from "react";
+import { Card, Nav, Navbar } from "react-bootstrap";
+import { SELECTION_MODES, VIOLIN_MODES } from "../../constants/constants";
+import { DatasetProvider } from "../../context/DatasetContext";
+import { Dotplot } from "../dotplot/Dotplot";
+import { Heatmap } from "../heatmap/Heatmap";
+import { Matrixplot } from "../matrixplot/Matrixplot";
+import { ObsColsList } from "../obs-list/ObsList";
+import { OffcanvasControls, OffcanvasObs, OffcanvasObsm, OffcanvasVars } from "../offcanvas";
+import { Scatterplot } from "../scatterplot/Scatterplot";
+import { ScatterplotControls } from "../scatterplot/ScatterplotControls";
+import { SearchBar } from "../search-bar/SearchBar";
+import { VarNamesList } from "../var-list/VarList";
+import { Violin } from "../violin/Violin";
+export function FullPage(_ref) {
+  let {
+    children,
+    varMode = SELECTION_MODES.SINGLE,
+    ...props
+  } = _ref;
+  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);
+  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("div", {
+    className: "row g-0"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "cherita-app-obs modern-scrollbars border-end h-100"
+  }, /*#__PURE__*/React.createElement(ObsColsList, null)), /*#__PURE__*/React.createElement("div", {
+    className: "cherita-app-plot"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "position-relative"
+  }, /*#__PURE__*/React.createElement(Navbar, {
+    expand: "sm",
+    bg: "primary",
+    className: "cherita-navbar"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "container-fluid"
+  }, /*#__PURE__*/React.createElement(Navbar.Toggle, {
+    "aria-controls": "navbarScroll"
+  }), /*#__PURE__*/React.createElement(Navbar.Collapse, {
+    id: "navbarScroll"
+  }, /*#__PURE__*/React.createElement(Nav, {
+    className: "me-auto my-0",
+    navbarScroll: true
+  }, /*#__PURE__*/React.createElement(Nav.Item, {
+    className: "d-block d-lg-none"
+  }, /*#__PURE__*/React.createElement(Nav.Link, {
+    onClick: () => setShowObs(true)
+  }, "Observations")), /*#__PURE__*/React.createElement(Nav.Item, null, /*#__PURE__*/React.createElement(Nav.Link, {
+    onClick: () => setShowVars(true)
+  }, "Features"))), /*#__PURE__*/React.createElement(Nav, {
+    className: "d-flex"
+  }, /*#__PURE__*/React.createElement(Nav.Item, null, /*#__PURE__*/React.createElement(Nav.Link, {
+    onClick: () => setShowControls(true)
+  }, "Controls"))))))), children), /*#__PURE__*/React.createElement("div", {
+    className: "cherita-app-var"
+  }, /*#__PURE__*/React.createElement(Card, {
+    className: "cherita-app-features"
+  }, /*#__PURE__*/React.createElement(Card.Body, null, /*#__PURE__*/React.createElement(SearchBar, {
+    searchDiseases: true,
+    searchVar: true
+  }), /*#__PURE__*/React.createElement(VarNamesList, {
+    mode: varMode
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "col"
+  }, /*#__PURE__*/React.createElement(OffcanvasObs, {
+    show: showObs,
+    handleClose: () => setShowObs(false)
+  }), /*#__PURE__*/React.createElement(OffcanvasVars, {
+    show: showVars,
+    handleClose: () => setShowVars(false)
+  }), /*#__PURE__*/React.createElement(OffcanvasControls, {
+    show: showControls,
+    handleClose: () => setShowControls(false),
+    Controls: ScatterplotControls
+  }), /*#__PURE__*/React.createElement(OffcanvasObsm, {
+    show: showObsm,
+    handleClose: () => setShowObsm(false)
+  })))));
+}
+export function FullPageScatterplot(props) {
+  return /*#__PURE__*/React.createElement(FullPage, props, /*#__PURE__*/React.createElement(Scatterplot, null));
+}
+export function FullPagePlots(props) {
+  return /*#__PURE__*/React.createElement(FullPage, _extends({}, props, {
+    varMode: SELECTION_MODES.MULTIPLE
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "container-fluid w-100 h-100 d-flex flex-column overflow-y-auto"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "row flex-grow-1"
+  }, /*#__PURE__*/React.createElement(Heatmap, null)), /*#__PURE__*/React.createElement("div", {
+    className: "row flex-grow-1"
+  }, /*#__PURE__*/React.createElement(Matrixplot, null)), /*#__PURE__*/React.createElement("div", {
+    className: "row flex-grow-1"
+  }, /*#__PURE__*/React.createElement(Dotplot, null)), /*#__PURE__*/React.createElement("div", {
+    className: "row flex-grow-1"
+  }, /*#__PURE__*/React.createElement(Violin, {
+    mode: VIOLIN_MODES.GROUPBY
+  }))));
+}

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

@@ -0,0 +1,151 @@
+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, Nav, Navbar } 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,
+    ...props
+  } = _ref;
+  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(Navbar, {
+    expand: "sm",
+    bg: "primary",
+    className: "cherita-navbar"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "container-fluid"
+  }, /*#__PURE__*/React.createElement(Navbar.Toggle, {
+    "aria-controls": "navbarScroll"
+  }), /*#__PURE__*/React.createElement(Navbar.Collapse, {
+    id: "navbarScroll"
+  }, /*#__PURE__*/React.createElement(Nav, {
+    className: "me-auto my-0",
+    navbarScroll: true
+  }, /*#__PURE__*/React.createElement(Nav.Item, {
+    className: "d-block d-lg-none"
+  }, /*#__PURE__*/React.createElement(Nav.Link, {
+    onClick: () => setShowObs(true)
+  }, "Observations")), /*#__PURE__*/React.createElement(Nav.Item, null, /*#__PURE__*/React.createElement(Nav.Link, {
+    onClick: () => setShowVars(true)
+  }, "Features"))), /*#__PURE__*/React.createElement(Nav, {
+    className: "d-flex"
+  }, /*#__PURE__*/React.createElement(Nav.Item, null, /*#__PURE__*/React.createElement(Nav.Link, {
+    onClick: () => setShowControls(true)
+  }, "Controls")))))), /*#__PURE__*/React.createElement("div", {
+    className: "cherita-app-obs modern-scrollbars border-end h-100"
+  }, /*#__PURE__*/React.createElement(ObsColsList, null)), /*#__PURE__*/React.createElement("div", {
+    className: "cherita-app-canvas flex-grow-1"
+  }, children), /*#__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: true,
+    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)
+  }), /*#__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, props, /*#__PURE__*/React.createElement(Scatterplot, null));
+}