@haniffalab/cherita-react 1.3.0 → 1.4.0-dev.2025-06-09.7cd38232

package/dist/esm/context/DatasetContext.js

@@ -49,8 +49,9 @@ const persistOptions = {
       }
       return false;
     }
-  }
-  // @TODO: add maxAge and buster (app and api version numbers as busters)
+  },
+  buster: "1.4.0-dev.2025-06-09.7cd38232" || "0.0.0"
+  // @TODO: add maxAge and api version numbers as buster
 };
 const initialDataset = {
   url: null,
@@ -59,7 +60,8 @@ const initialDataset = {
   obsGroups: null,
   imageUrl: null,
   defaultSettings: {},
-  canOverrideSettings: true
+  canOverrideSettings: true,
+  useUnsColors: false
 };
 export function DatasetProvider(_ref2) {
   let {

package/dist/esm/context/SettingsContext.js

@@ -8,6 +8,11 @@ import _ from "lodash";
 import { COLOR_ENCODINGS, DOTPLOT_SCALES, LOCAL_STORAGE_KEY, MATRIXPLOT_SCALES, OBS_TYPES, PSEUDOSPATIAL_CATEGORICAL_MODES, VAR_SORT, VAR_SORT_ORDER, VIOLINPLOT_SCALES } from "../constants/constants";
 export const SettingsContext = /*#__PURE__*/createContext(null);
 export const SettingsDispatchContext = /*#__PURE__*/createContext(null);
+
+// @TODO: consider splitting constant values and dataset-resolved values
+// e.g. store only obs name in selectedObs, and resolved obs data (counts, values, etc.) elsewhere
+// e.g. store only var name in selectedVar, and resolved var data (index, matrix_index) elsewhere
+// would simplify passing and validating defaultSettings and localSettings
 const initialSettings = {
   selectedObs: null,
   selectedVar: null,
@@ -56,13 +61,51 @@ const initialSettings = {
     categoricalMode: PSEUDOSPATIAL_CATEGORICAL_MODES.ACROSS.value
   }
 };
+
+// validate on initialization and reducer
+const validateSettings = settings => {
+  // make sure selectedVar is in vars
+  if (settings.selectedVar) {
+    const inVars = _.some(settings.vars, v => v.name === settings.selectedVar.name);
+    if (!inVars) {
+      settings.vars = [...settings.vars, settings.selectedVar];
+    }
+  }
+
+  // make sure selectedMultiVar are in vars
+  if (settings.selectedMultiVar) {
+    const notInVars = _.differenceBy(settings.selectedMultiVar, settings.vars, "name");
+    if (notInVars.length) {
+      settings.vars = [...settings.vars, ...notInVars];
+    }
+  }
+
+  // make sure there's a selectedVar if colorEncoding is VAR
+  if (settings.colorEncoding === COLOR_ENCODINGS.VAR) {
+    if (!settings.selectedVar) {
+      settings.colorEncoding = null;
+    } else if (settings.selectedVar.isSet && !settings.selectedVar.vars.length) {
+      settings.selectedVar = null;
+      settings.colorEncoding = null;
+    }
+  }
+
+  // make sure there's a selectedObs if colorEncoding is OBS
+  if (settings.colorEncoding === COLOR_ENCODINGS.OBS) {
+    if (!settings.selectedObs) {
+      settings.colorEncoding = null;
+    }
+  }
+  return settings;
+};
 const initializer = _ref => {
   let {
     canOverrideSettings,
     defaultSettings,
     localSettings
   } = _ref;
-  return canOverrideSettings ? _.assign({}, initialSettings, defaultSettings, localSettings) : _.assign({}, initialSettings, defaultSettings);
+  const mergedSettings = canOverrideSettings ? _.assign({}, initialSettings, defaultSettings, localSettings) : _.assign({}, initialSettings, defaultSettings);
+  return validateSettings(mergedSettings);
 };
 export function SettingsProvider(_ref2) {
   let {
@@ -129,77 +172,65 @@ function settingsReducer(settings, action) {
       }
     case "select.var":
       {
-        if (settings.vars.find(v => _.isEqual(v, action.var))) {
-          return _objectSpread(_objectSpread({}, settings), {}, {
-            selectedVar: action.var
-          });
-        } else {
-          return _objectSpread(_objectSpread({}, settings), {}, {
-            selectedVar: action.var,
-            vars: [...settings.vars, action.var]
-          });
-        }
+        return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
+          selectedVar: action.var
+        }));
       }
     case "select.multivar":
       {
-        const vars = settings.vars.find(v => _.isEqual(v, action.var)) ? settings.vars : [...settings.vars, action.var];
-        if (settings.selectedMultiVar.find(v => _.isEqual(v, action.var))) {
-          return _objectSpread(_objectSpread({}, settings), {}, {
-            vars: vars
-          });
+        const inMultiVar = settings.selectedMultiVar.some(v => v.name === action.var.name);
+        if (inMultiVar) {
+          return validateSettings(_objectSpread({}, settings));
         } else {
-          return _objectSpread(_objectSpread({}, settings), {}, {
-            selectedMultiVar: [...settings.selectedMultiVar, action.var],
-            vars: vars
-          });
+          return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
+            selectedMultiVar: [...settings.selectedMultiVar, action.var]
+          }));
         }
       }
     case "deselect.multivar":
       {
-        return _objectSpread(_objectSpread({}, settings), {}, {
+        return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
           selectedMultiVar: settings.selectedMultiVar.filter(v => v !== action.var.name)
-        });
+        }));
       }
     case "toggle.multivar":
       {
         const inMultiVar = settings.selectedMultiVar.some(v => v.name === action.var.name);
         if (inMultiVar) {
-          return _objectSpread(_objectSpread({}, settings), {}, {
+          return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
             selectedMultiVar: settings.selectedMultiVar.filter(v => v.name !== action.var.name)
-          });
+          }));
         } else {
-          return _objectSpread(_objectSpread({}, settings), {}, {
+          return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
             selectedMultiVar: [...settings.selectedMultiVar, action.var]
-          });
+          }));
         }
       }
     case "set.colorEncoding":
       {
-        return _objectSpread(_objectSpread({}, settings), {}, {
+        return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
           colorEncoding: action.value
-        });
+        }));
       }
     case "reset.vars":
       {
-        return _objectSpread(_objectSpread({}, settings), {}, {
+        return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
           vars: [],
           selectedVar: null,
           selectedMultiVar: []
-        });
+        }));
       }
     case "reset.multiVar":
       {
-        return _objectSpread(_objectSpread({}, settings), {}, {
-          selectedMultiVar: [],
-          colorEncoding: settings.colorEncoding === COLOR_ENCODINGS.VAR ? null : settings.colorEncoding
-        });
+        return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
+          selectedMultiVar: []
+        }));
       }
     case "reset.var":
       {
-        return _objectSpread(_objectSpread({}, settings), {}, {
-          selectedVar: null,
-          colorEncoding: settings.colorEncoding === COLOR_ENCODINGS.VAR ? null : settings.colorEncoding
-        });
+        return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
+          selectedVar: null
+        }));
       }
     case "add.var":
       {
@@ -216,11 +247,11 @@ function settingsReducer(settings, action) {
         var _settings$selectedVar;
         const selectedVar = ((_settings$selectedVar = settings.selectedVar) === null || _settings$selectedVar === void 0 ? void 0 : _settings$selectedVar.name) === action.var.name ? null : settings.selectedVar;
         const selectedMultiVar = settings.selectedMultiVar.filter(v => v.name !== action.var.name);
-        return _objectSpread(_objectSpread({}, settings), {}, {
+        return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
           vars: settings.vars.filter(a => a.name !== action.var.name),
           selectedVar: selectedVar,
           selectedMultiVar: selectedMultiVar
-        });
+        }));
       }
     case "add.varSet.var":
       {
@@ -254,11 +285,11 @@ function settingsReducer(settings, action) {
               return v;
             }
           });
-          return _objectSpread(_objectSpread({}, settings), {}, {
+          return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
             vars: vars,
             selectedVar: selectedVar,
             selectedMultiVar: selectedMultiVar
-          });
+          }));
         }
       }
     case "remove.varSet.var":
@@ -285,11 +316,11 @@ function settingsReducer(settings, action) {
             var _settings$selectedVar3;
             const selectedVar = ((_settings$selectedVar3 = settings.selectedVar) === null || _settings$selectedVar3 === void 0 ? void 0 : _settings$selectedVar3.name) === action.varSet.name ? null : settings.selectedVar;
             const selectedMultiVar = settings.selectedMultiVar.filter(v => v.name !== action.varSet.name);
-            return _objectSpread(_objectSpread({}, settings), {}, {
+            return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
               vars: vars,
               selectedVar: selectedVar,
               selectedMultiVar: selectedMultiVar
-            });
+            }));
           } else {
             var _settings$selectedVar4;
             // Update selected if varSet is selected
@@ -305,11 +336,11 @@ function settingsReducer(settings, action) {
                 return v;
               }
             });
-            return _objectSpread(_objectSpread({}, settings), {}, {
+            return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
               vars: vars,
               selectedVar: selectedVar,
               selectedMultiVar: selectedMultiVar
-            });
+            }));
           }
         }
       }

package/dist/esm/helpers/map-helper.js

@@ -47,7 +47,8 @@ export class MapHelper {
     return {
       longitude,
       latitude,
-      zoom
+      zoom,
+      bounds
     };
   }
 }

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 { SELECTION_MODES, VIOLIN_MODES } from "./constants/constants";
+export { PLOT_TYPES, 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",
+  "version": "1.4.0-dev.2025-06-09.7cd38232",
   "author": "Haniffa Lab",
   "license": "MIT",
   "keywords": [
@@ -68,6 +68,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "babel-jest": "^29.7.0",
+    "babel-plugin-transform-define": "^2.1.4",
     "cpx": "^1.5.0",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^8.10.0",
@@ -90,7 +91,8 @@
     "build:babel": "npm run build:esm && npm run build:cjs",
     "build:scss": "sass --load-path=node_modules src/scss/cherita-bootstrap.scss dist/css/cherita.css",
     "copy:scss": "cpx 'src/scss/**/*' 'scss'",
-    "build": "npm run build:babel && npm run build:scss && npm run copy:scss",
+    "copy:assets": "cpx 'src/assets/**/*' 'dist/assets'",
+    "build": "npm run build:babel && npm run build:scss && npm run copy:scss && npm run copy:assets",
     "test": "jest --watchAll",
     "test:ci": "jest --coverage --ci --no-watch",
     "lint:scss": "stylelint 'src/**/*.scss' --fix",
@@ -125,5 +127,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": "7cd382328af1f50698b9685b997517b3dcbe991a"
+}

package/scss/cherita.scss

@@ -58,7 +58,6 @@ $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,5 +1,6 @@
 .cherita-app {
   position: relative;
+  width: 100%;
 }
 
 .cherita-app {
@@ -50,6 +51,21 @@
     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;
@@ -108,6 +124,58 @@
   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,30 +1,35 @@
 .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;
+    @extend .bg-primary;
+    @extend .mx-1;
+    border-radius: 5px;
+    padding: 4px !important;
 
     .modebar-btn {
-      fill: white !important; /* Ensures white icons */
-      color: white !important; /* Ensures text/icons are visible */
+      display: inline-flex;
+      justify-content: center;
       position: relative;
-      font-size: 16px;
-      padding: 4px;
+      font-size: 1.25rem;
+      padding: 0.25rem;
       height: auto;
       cursor: pointer;
       line-height: normal;
 
       svg {
         position: relative;
-        top: auto;
-        bottom: auto;
-        left: auto;
-        right: auto;
+        top: 1px;
+
+        path {
+          fill: white !important;
+          color: white !important;
+        }
       }
     }
   }
 }
+
+.js-plotly-plot .plotly .modebar--hover > :not(.watermark) {
+  opacity: 0.5;
+  transition: opacity 0.3s;
+}

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

@@ -1,157 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FullPage = FullPage;
-exports.FullPagePseudospatial = FullPagePseudospatial;
-var _react = _interopRequireWildcard(require("react"));
-var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
-var _reactFontawesome = require("@fortawesome/react-fontawesome");
-var _reactBootstrap = require("react-bootstrap");
-var _constants = require("../../constants/constants");
-var _DatasetContext = require("../../context/DatasetContext");
-var _ObsList = require("../obs-list/ObsList");
-var _offcanvas = require("../offcanvas");
-var _Pseudospatial = require("../pseudospatial/Pseudospatial");
-var _PseudospatialToolbar = require("../pseudospatial/PseudospatialToolbar");
-var _Scatterplot = require("../scatterplot/Scatterplot");
-var _ScatterplotControls = require("../scatterplot/ScatterplotControls");
-var _SearchBar = require("../search-bar/SearchBar");
-var _VarList = require("../var-list/VarList");
-const _excluded = ["children", "varMode", "searchDiseases"];
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-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; }
-function FullPage(_ref) {
-  let {
-      children,
-      varMode = _constants.SELECTION_MODES.SINGLE,
-      searchDiseases = false
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  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 [showPseudospatialControls, setShowPseudospatialControls] = (0, _react.useState)(false);
-  const [showModal, setShowModal] = (0, _react.useState)(false);
-  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();
-        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.default.createElement("div", {
-    ref: appRef,
-    className: "cherita-app",
-    style: {
-      height: appDimensions.height
-    }
-  }, /*#__PURE__*/_react.default.createElement(_DatasetContext.DatasetProvider, props, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Container, {
-    fluid: true,
-    className: "d-flex g-0",
-    style: {
-      height: appDimensions.height
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "cherita-app-obs modern-scrollbars border-end h-100"
-  }, /*#__PURE__*/_react.default.createElement(_ObsList.ObsColsList, props)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "cherita-app-canvas flex-grow-1"
-  }, children({
-    setShowObs,
-    setShowVars
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "cherita-app-sidebar p-3"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Card, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Card.Header, {
-    className: "d-flex justify-content-evenly align-items-center"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
-    variant: "link",
-    onClick: () => setShowModal(true)
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    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",
-    plotType: pseudospatialPlotType,
-    setPlotType: setpseudospatialPlotType,
-    setShowControls: setShowPseudospatialControls
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "sidebar-features modern-scrollbars"
-  }, /*#__PURE__*/_react.default.createElement(_SearchBar.SearchBar, {
-    searchDiseases: searchDiseases,
-    searchVar: true
-  }), /*#__PURE__*/_react.default.createElement(_VarList.VarNamesList, {
-    mode: varMode
-  })))))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal, {
-    show: showModal,
-    onHide: () => setShowModal(false),
-    centered: true
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Header, {
-    closeButton: true
-  }), /*#__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, {
-    show: showVars,
-    handleClose: () => setShowVars(false),
-    mode: varMode
-  }), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasControls, {
-    show: showControls,
-    handleClose: () => setShowControls(false),
-    Controls: _ScatterplotControls.ScatterplotControls
-  }), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasControls, {
-    show: showPseudospatialControls,
-    handleClose: () => setShowPseudospatialControls(false),
-    Controls: _PseudospatialToolbar.PseudospatialToolbar,
-    plotType: pseudospatialPlotType
-  }), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasObsm, {
-    show: showObsm,
-    handleClose: () => setShowObsm(false)
-  }))));
-}
-function FullPagePseudospatial(props) {
-  return /*#__PURE__*/_react.default.createElement(FullPage, _extends({}, props, {
-    varMode: _constants.SELECTION_MODES.SINGLE
-  }), _ref2 => {
-    let {
-      setShowObs,
-      setShowVars
-    } = _ref2;
-    return /*#__PURE__*/_react.default.createElement(_Scatterplot.Scatterplot, {
-      setShowObs: setShowObs,
-      setShowVars: setShowVars,
-      isFullscreen: true
-    });
-  });
-}