@haniffalab/cherita-react 0.2.1-dev.2025-02-07.85514aee → 0.2.1-dev.2025-02-19.e6d8aac6

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.FullPage = FullPage;
 exports.FullPagePlots = FullPagePlots;
-exports.FullPagePseudospatial = FullPagePseudospatial;
 exports.FullPageScatterplot = FullPageScatterplot;
 var _react = _interopRequireWildcard(require("react"));
 var _reactBootstrap = require("react-bootstrap");
@@ -16,7 +15,6 @@ var _Heatmap = require("../heatmap/Heatmap");
 var _Matrixplot = require("../matrixplot/Matrixplot");
 var _ObsList = require("../obs-list/ObsList");
 var _offcanvas = require("../offcanvas");
-var _Pseudospatial = require("../pseudospatial/Pseudospatial");
 var _Scatterplot = require("../scatterplot/Scatterplot");
 var _ScatterplotControls = require("../scatterplot/ScatterplotControls");
 var _SearchBar = require("../search-bar/SearchBar");
@@ -126,27 +124,6 @@ function FullPage({
 function FullPageScatterplot(props) {
   return /*#__PURE__*/_react.default.createElement(FullPage, props, /*#__PURE__*/_react.default.createElement(_Scatterplot.Scatterplot, null));
 }
-function FullPagePseudospatial(props) {
-  return /*#__PURE__*/_react.default.createElement(FullPage, props, /*#__PURE__*/_react.default.createElement("div", {
-    className: "container-fluid h-100"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "row"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-12 col-lg-7"
-  }, /*#__PURE__*/_react.default.createElement(_Scatterplot.Scatterplot, null)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-12 col-lg-5"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "container-fluid h-100 d-flex align-itemms-center justify-content-center"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "row w-100 py-3"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-12"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "p-2"
-  }, /*#__PURE__*/_react.default.createElement(_Pseudospatial.Pseudospatial, null))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-12"
-  }, /*#__PURE__*/_react.default.createElement(_Pseudospatial.PseudospatialImage, null))))))));
-}
 function FullPagePlots(props) {
   return /*#__PURE__*/_react.default.createElement(FullPage, _extends({}, props, {
     varMode: _constants.SELECTION_MODES.MULTIPLE

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

@@ -0,0 +1,214 @@
+"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 _AccordionButton = require("react-bootstrap/AccordionButton");
+var _AccordionContext = _interopRequireDefault(require("react-bootstrap/AccordionContext"));
+var _ButtonGroup = _interopRequireDefault(require("react-bootstrap/ButtonGroup"));
+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");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function FullPage({
+  children,
+  varMode = _constants.SELECTION_MODES.SINGLE,
+  ...props
+}) {
+  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);
+  (0, _react.useLayoutEffect)(() => {
+    function 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
+        });
+      }
+    }
+
+    // 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
+
+  const [open, setOpen] = (0, _react.useState)(false);
+  const [isCollapsed, setIsCollapsed] = (0, _react.useState)(false);
+  function ObsAccordionToggle({
+    title,
+    eventKey,
+    buttons
+  }) {
+    const {
+      activeEventKey
+    } = (0, _react.useContext)(_AccordionContext.default);
+    // console.log("activeEventKey:", activeEventKey);
+
+    const decoratedOnClick = (0, _AccordionButton.useAccordionButton)(eventKey, () => {
+      console.log("Clicked accordion:", eventKey);
+    });
+    const isCurrentEventKey = Array.isArray(activeEventKey) ? activeEventKey.includes(eventKey) : activeEventKey === eventKey;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "accordion-header",
+      onClick: decoratedOnClick
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: `accordion-header-wrapper d-flex align-items-center ${isCurrentEventKey ? "" : "collapsed"}`
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "accordion-title flex-grow-1"
+    }, title), /*#__PURE__*/_react.default.createElement("div", {
+      className: "accordion-buttons ms-auto"
+    }, /*#__PURE__*/_react.default.createElement(_ButtonGroup.default, null, buttons))));
+  }
+  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(_reactBootstrap.Navbar, {
+    expand: "sm",
+    bg: "primary",
+    className: "cherita-navbar"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "container-fluid"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Navbar.Toggle, {
+    "aria-controls": "navbarScroll"
+  }), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Navbar.Collapse, {
+    id: "navbarScroll"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav, {
+    className: "me-auto my-0",
+    navbarScroll: true
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Item, {
+    className: "d-block d-lg-none"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Link, {
+    onClick: () => setShowObs(true)
+  }, "Observations")), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Item, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Link, {
+    onClick: () => setShowVars(true)
+  }, "Features"))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav, {
+    className: "d-flex"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Item, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Link, {
+    onClick: () => setShowControls(true)
+  }, "Controls")))))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "cherita-app-obs modern-scrollbars border-end h-100"
+  }, /*#__PURE__*/_react.default.createElement(_ObsList.ObsColsList, null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "cherita-app-canvas flex-grow-1"
+  }, children), /*#__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.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
+  }))), /*#__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
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sidebar-features modern-scrollbars"
+  }, /*#__PURE__*/_react.default.createElement(_SearchBar.SearchBar, {
+    searchDiseases: true,
+    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.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, {
+    show: showObs,
+    handleClose: () => setShowObs(false)
+  }), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasVars, {
+    show: showVars,
+    handleClose: () => setShowVars(false)
+  }), /*#__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
+  }), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasObsm, {
+    show: showObsm,
+    handleClose: () => setShowObsm(false)
+  }))));
+}
+function FullPagePseudospatial(props) {
+  return /*#__PURE__*/_react.default.createElement(FullPage, props, /*#__PURE__*/_react.default.createElement(_Scatterplot.Scatterplot, null));
+}

package/dist/components/obs-list/ObsItem.js

@@ -10,7 +10,6 @@ var _material = require("@mui/material");
 var _xCharts = require("@mui/x-charts");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
-var _ObsToolbar = require("./ObsToolbar");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
 var _FilterContext = require("../../context/FilterContext");
@@ -20,6 +19,7 @@ var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
 var _string = require("../../utils/string");
 var _VirtualizedList = require("../../utils/VirtualizedList");
+var _ObsToolbar = require("./ObsToolbar");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -103,7 +103,7 @@ function CategoricalItem({
     key: value,
     className: "obs-item"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "d-flex align-items-center"
+    className: "d-flex align-items-start"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "flex-grow-1"
   }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Check, {
@@ -223,7 +223,9 @@ function CategoricalObs({
     };
   }, [dataset.colorEncoding, isSliced, obs.codes, obs.omit, obs.value_counts, obs.values, obsHistograms.fetchedData, obsHistograms.isPending, totalCounts]);
   showColor &= dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS;
-  return /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, null, /*#__PURE__*/_react.default.createElement(_ObsToolbar.ObsToolbar, {
+  return /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, {
+    variant: "flush"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, null, /*#__PURE__*/_react.default.createElement(_ObsToolbar.ObsToolbar, {
     item: obs,
     onToggleAllObs: toggleAll,
     onToggleLabel: toggleLabel,
@@ -368,7 +370,9 @@ function ContinuousObs({
       label: isNaN(obs.values[index]) ? "NaN" : getContinuousLabel(obs.codes[obs.values[index]], obs.bins.binEdges)
     };
   };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingLinear, null), !serverError && updatedObs && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, null, /*#__PURE__*/_react.default.createElement(_ObsToolbar.ObsToolbar, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingLinear, null), !serverError && updatedObs && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, {
+    variant: "flush"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, null, /*#__PURE__*/_react.default.createElement(_ObsToolbar.ObsToolbar, {
     item: obs,
     onToggleAllObs: toggleAll,
     onToggleLabel: toggleLabel,

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

@@ -5,13 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ObsColsList = ObsColsList;
 var _react = _interopRequireWildcard(require("react"));
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+var _reactFontawesome = require("@fortawesome/react-fontawesome");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
-var _ObsItem = require("./ObsItem");
+var _Accordion = _interopRequireDefault(require("react-bootstrap/Accordion"));
+var _AccordionButton = require("react-bootstrap/AccordionButton");
+var _AccordionContext = _interopRequireDefault(require("react-bootstrap/AccordionContext"));
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
+var _ObsItem = require("./ObsItem");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -173,17 +178,42 @@ function ObsColsList({
       });
     }
   };
-  const obsList = _lodash.default.map(obsCols, item => {
+  function ObsAccordionToggle({
+    children,
+    eventKey
+  }) {
+    const {
+      activeEventKey
+    } = (0, _react.useContext)(_AccordionContext.default);
+    // console.log("activeEventKey:", activeEventKey);
+
+    const decoratedOnClick = (0, _AccordionButton.useAccordionButton)(eventKey, () => {
+      console.log("Clicked accordion:", eventKey);
+      handleAccordionToggle(eventKey);
+    });
+    const isCurrentEventKey = Array.isArray(activeEventKey) ? activeEventKey.includes(eventKey) : activeEventKey === eventKey;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: `obs-accordion-header ${isCurrentEventKey ? "active" : ""}`,
+      onClick: decoratedOnClick
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "obs-accordion-header-chevron"
+    }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+      icon: isCurrentEventKey ? _freeSolidSvgIcons.faChevronDown : _freeSolidSvgIcons.faChevronRight
+    })), /*#__PURE__*/_react.default.createElement("span", {
+      className: "obs-accordion-header-title"
+    }, children));
+  }
+  const obsList = _lodash.default.map(obsCols, (item, index) => {
     if (item.type === _constants.OBS_TYPES.DISCRETE) {
       return null;
     }
-    return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Accordion.Item, {
-      key: item.name,
-      eventKey: item.name,
-      className: active === item.name && dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && "cherita-accordion-active"
-    }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Accordion.Header, {
-      onClick: () => handleAccordionToggle(item.name)
-    }, item.name), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Accordion.Body, null, expandedItems[item.name] && (item.type === _constants.OBS_TYPES.CATEGORICAL || item.type === _constants.OBS_TYPES.BOOLEAN ? /*#__PURE__*/_react.default.createElement(_ObsItem.CategoricalObs, {
+    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(ObsAccordionToggle, {
+      eventKey: item.name
+    }, item.name), /*#__PURE__*/_react.default.createElement(_Accordion.default.Collapse, {
+      eventKey: item.name
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "obs-accordion-body"
+    }, expandedItems[item.name] && (item.type === _constants.OBS_TYPES.CATEGORICAL || item.type === _constants.OBS_TYPES.BOOLEAN ? /*#__PURE__*/_react.default.createElement(_ObsItem.CategoricalObs, {
       key: item.name,
       obs: item,
       updateObs: updateObs,
@@ -202,18 +232,15 @@ function ObsColsList({
       toggleLabel: () => toggleLabel(item),
       toggleSlice: () => toggleSlice(item),
       toggleColor: () => toggleColor(item)
-    }))));
+    })))));
   });
   if (!serverError) {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "position-relative h-100"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "list-group overflow-auto h-100"
-    }, isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Accordion, {
+    return /*#__PURE__*/_react.default.createElement("div", null, isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement(_Accordion.default, {
       flush: true,
       defaultActiveKey: [active],
-      alwaysOpen: true
-    }, obsList)));
+      alwaysOpen: true,
+      className: "obs-accordion"
+    }, obsList));
   } else {
     return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
       variant: "danger"

package/dist/components/obs-list/ObsToolbar.js

@@ -29,7 +29,7 @@ function ObsToolbar({
   const inSliceObs = dataset.sliceBy.obs && dataset.selectedObs?.name === item.name;
   const isColorEncoding = dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && dataset.selectedObs?.name === item.name;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "d-flex"
+    className: "d-flex align-items-center"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "flex-grow-1"
   }, showToggleAllObs && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Check, {
@@ -45,14 +45,14 @@ function ObsToolbar({
     onClick: onToggleLabel,
     title: "Add to tooltip"
   }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faFont
+    icon: _freeSolidSvgIcons.faListOl
   })), showSlice && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
     variant: inSliceObs ? "primary" : "outline-primary",
     size: "sm",
     onClick: onToggleSlice,
     title: "Slice to selected"
   }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faEye
+    icon: _freeSolidSvgIcons.faScissors
   })), showColor && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
     variant: isColorEncoding ? "primary" : "outline-primary",
     size: "sm",

package/dist/components/pseudospatial/Pseudospatial.js

@@ -6,10 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.Pseudospatial = Pseudospatial;
 exports.PseudospatialImage = PseudospatialImage;
 var _react = _interopRequireWildcard(require("react"));
+var _fontawesomeSvgCore = require("@fortawesome/fontawesome-svg-core");
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _reactPlotly = _interopRequireDefault(require("react-plotly.js"));
-var _PseudospatialToolbar = require("./PseudospatialToolbar");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
 var _FilterContext = require("../../context/FilterContext");
@@ -21,6 +22,7 @@ var _requests = require("../../utils/requests");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+_fontawesomeSvgCore.library.add(_freeSolidSvgIcons.faSliders);
 function usePseudospatialData(plotType) {
   const ENDPOINT = "pseudospatial";
   const dataset = (0, _DatasetContext.useDataset)();
@@ -76,7 +78,8 @@ function usePseudospatialData(plotType) {
 }
 function Pseudospatial({
   showLegend = true,
-  sharedScaleRange = false
+  sharedScaleRange = false,
+  setShowPseudospatialControls
 }) {
   const dataset = (0, _DatasetContext.useDataset)();
   const [data, setData] = (0, _react.useState)([]);
@@ -175,18 +178,33 @@ function Pseudospatial({
     }
   }, [dataset.controls.range, dataset.controls.valueMax, dataset.controls.valueMin, dataset.controls.valueRange, getColor, sharedScaleRange]);
   const hasSelections = !!plotType && !!dataset.pseudospatial.maskSet;
+  const faSlidersPath = _freeSolidSvgIcons.faSliders.icon[4];
   if (!serverError) {
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "cherita-pseudospatial position-relative"
-    }, /*#__PURE__*/_react.default.createElement(_PseudospatialToolbar.PseudospatialToolbar, {
-      plotType: plotType
-    }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, hasSelections && isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), hasSelections && /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
+      className: "cherita-pseudospatial"
+    }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, hasSelections && isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), hasSelections && /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
       data: data,
-      layout: layout,
+      layout: {
+        ...layout,
+        autosize: true,
+        height: "200"
+      },
       useResizeHandler: true,
       className: "cherita-pseudospatial-plot",
       config: {
-        displaylogo: false
+        displaylogo: false,
+        displayModeBar: true,
+        modeBarButtonsToAdd: [{
+          name: "Open plot controls",
+          icon: {
+            width: 512,
+            height: 512,
+            path: faSlidersPath,
+            ascent: 512,
+            descent: 0
+          },
+          click: () => setShowPseudospatialControls(prev => !prev)
+        }]
       }
     }), hasSelections && showLegend && /*#__PURE__*/_react.default.createElement(_Legend.Legend, {
       min: layout?.coloraxis?.cmin,

package/dist/components/pseudospatial/PseudospatialToolbar.js

@@ -4,7 +4,10 @@ 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");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _constants = require("../../constants/constants");
@@ -126,4 +129,20 @@ 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")));
 }