@haniffalab/cherita-react 1.0.0-dev.2025-03-27.d22a5d51 → 1.0.0-dev.2025-04-01.e61c9d78

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

@@ -38,6 +38,7 @@ function FullPage(_ref) {
   const [showObsm, setShowObsm] = (0, _react.useState)(false);
   const [showVars, setShowVars] = (0, _react.useState)(false);
   const [showControls, setShowControls] = (0, _react.useState)(false);
+  const [showModal, setShowModal] = (0, _react.useState)(false);
   (0, _react.useEffect)(() => {
     const updateDimensions = () => {
       if (appRef.current) {
@@ -65,14 +66,12 @@ function FullPage(_ref) {
     style: {
       height: appDimensions.height
     }
-  }, /*#__PURE__*/_react.default.createElement(_DatasetContext.DatasetProvider, props, /*#__PURE__*/_react.default.createElement("div", {
-    className: "row g-0"
-  }, /*#__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-plot"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "position-relative"
+  }, /*#__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",
@@ -96,18 +95,28 @@ function FullPage(_ref) {
     className: "d-flex"
   }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Item, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Link, {
     onClick: () => setShowControls(true)
-  }, "Controls"))))))), children), /*#__PURE__*/_react.default.createElement("div", {
-    className: "cherita-app-var"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Card, {
-    className: "cherita-app-features"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Card.Body, null, /*#__PURE__*/_react.default.createElement(_SearchBar.SearchBar, {
+  }, "Controls")))))), /*#__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), /*#__PURE__*/_react.default.createElement("div", {
+    className: "cherita-app-sidebar p-3"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Card, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Card.Body, {
+    className: "d-flex flex-column p-0"
+  }, /*#__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", {
-    className: "col"
-  }, /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasObs, {
+  })))))), /*#__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(_offcanvas.OffcanvasObs, {
     show: showObs,
     handleClose: () => setShowObs(false)
   }), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasVars, {
@@ -120,7 +129,7 @@ function FullPage(_ref) {
   }), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasObsm, {
     show: showObsm,
     handleClose: () => setShowObsm(false)
-  })))));
+  }))));
 }
 function FullPageScatterplot(props) {
   return /*#__PURE__*/_react.default.createElement(FullPage, props, /*#__PURE__*/_react.default.createElement(_Scatterplot.Scatterplot, null));

package/dist/cjs/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");
@@ -21,6 +20,7 @@ var _requests = require("../../utils/requests");
 var _string = require("../../utils/string");
 var _VirtualizedList = require("../../utils/VirtualizedList");
 var _zarrData = require("../../utils/zarrData");
+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; }
@@ -305,13 +305,13 @@ function CategoricalObs(_ref2) {
   }, [dataset.colorEncoding, filteredObsData?.pct, filteredObsData?.value_counts, 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, {
-    variant: "flush"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, null, /*#__PURE__*/_react.default.createElement(_ObsToolbar.ObsToolbar, {
+    variant: "flush",
+    className: "cherita-list"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, {
+    className: "cherita-list-item-unstyled"
+  }, /*#__PURE__*/_react.default.createElement(_ObsToolbar.ObsToolbar, {
     item: obs,
-    onToggleAllObs: toggleAll,
-    onToggleLabel: toggleLabel,
-    onToggleSlice: toggleSlice,
-    onToggleColor: toggleColor
+    onToggleAllObs: toggleAll
   })), /*#__PURE__*/_react.default.createElement(_VirtualizedList.VirtualizedList, {
     getDataAtIndex: getDataAtIndex,
     count: obs.values.length,
@@ -340,31 +340,25 @@ function ObsContinuousStats(_ref3) {
   } = (0, _requests.useFetch)(ENDPOINT, params);
 
   // @TODO: fix width issue when min/max/etc values are too large
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "d-flex justify-content-between mt-3 align-items-center"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Table, {
-    size: "sm",
-    className: "obs-continuous-stats",
-    striped: true
-  }, /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null, "Min"), /*#__PURE__*/_react.default.createElement("td", {
-    className: "text-end"
-  }, (0, _string.formatNumerical)(obs.min, _string.FORMATS.EXPONENTIAL))), /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null, "Max"), /*#__PURE__*/_react.default.createElement("td", {
-    className: "text-end"
-  }, (0, _string.formatNumerical)(obs.max, _string.FORMATS.EXPONENTIAL))))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Table, {
-    size: "sm",
-    className: "obs-continuous-stats",
-    striped: true
-  }, /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null, "Mean"), /*#__PURE__*/_react.default.createElement("td", {
-    className: "text-end"
-  }, (0, _string.formatNumerical)(obs.mean, _string.FORMATS.EXPONENTIAL))), /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null, "Median"), /*#__PURE__*/_react.default.createElement("td", {
-    className: "text-end"
-  }, (0, _string.formatNumerical)(obs.median, _string.FORMATS.EXPONENTIAL))))), isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingLinear, null), !isPending && !serverError && /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, {
+    variant: "flush",
+    className: "cherita-list"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, {
+    className: "obs-item"
+  }, /*#__PURE__*/_react.default.createElement("h5", {
+    className: "mb-2"
+  }, "Statistics"), /*#__PURE__*/_react.default.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-md-7"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "mb-1 small"
+  }, "Distribution of continuous values"), isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingLinear, null), !isPending && !serverError && /*#__PURE__*/_react.default.createElement("div", {
     className: "obs-distribution"
   }, /*#__PURE__*/_react.default.createElement(_xCharts.SparkLineChart, {
     data: fetchedData.kde_values[1],
     showHighlight: true,
-    showTooltip: true // throws Maximum update depth exceeded error. Documented here: https://github.com/mui/mui-x/issues/13450
-    ,
+    showTooltip: true,
     margin: {
       top: 10,
       right: 20,
@@ -381,7 +375,17 @@ function ObsContinuousStats(_ref3) {
         className: "feature-histogram-tooltip"
       }
     }
-  }))));
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-md-5 d-flex flex-column text-end"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex justify-content-between"
+  }, /*#__PURE__*/_react.default.createElement("span", null, "Min"), " ", /*#__PURE__*/_react.default.createElement("span", null, (0, _string.formatNumerical)(obs.min, _string.FORMATS.EXPONENTIAL))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex justify-content-between"
+  }, /*#__PURE__*/_react.default.createElement("span", null, "Max"), " ", /*#__PURE__*/_react.default.createElement("span", null, (0, _string.formatNumerical)(obs.max, _string.FORMATS.EXPONENTIAL))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex justify-content-between"
+  }, /*#__PURE__*/_react.default.createElement("span", null, "Mean"), " ", /*#__PURE__*/_react.default.createElement("span", null, (0, _string.formatNumerical)(obs.mean, _string.FORMATS.EXPONENTIAL))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex justify-content-between"
+  }, /*#__PURE__*/_react.default.createElement("span", null, "Median"), " ", /*#__PURE__*/_react.default.createElement("span", null, (0, _string.formatNumerical)(obs.median, _string.FORMATS.EXPONENTIAL)))))));
 }
 function ContinuousObs(_ref4) {
   let {
@@ -465,8 +469,11 @@ function ContinuousObs(_ref4) {
     };
   };
   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, {
+    variant: "flush",
+    className: "cherita-list"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, {
+    className: "cherita-list-item-unstyled"
+  }, /*#__PURE__*/_react.default.createElement(_ObsToolbar.ObsToolbar, {
     item: obs,
     onToggleAllObs: toggleAll,
     onToggleLabel: toggleLabel,

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

@@ -7,16 +7,19 @@ exports.ObsColsList = ObsColsList;
 var _react = _interopRequireWildcard(require("react"));
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 var _reactFontawesome = require("@fortawesome/react-fontawesome");
+var _Comment = _interopRequireDefault(require("@mui/icons-material/Comment"));
+var _JoinInner = _interopRequireDefault(require("@mui/icons-material/JoinInner"));
+var _WaterDrop = _interopRequireDefault(require("@mui/icons-material/WaterDrop"));
 var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _Accordion = _interopRequireDefault(require("react-bootstrap/Accordion"));
 var _AccordionButton = require("react-bootstrap/AccordionButton");
 var _AccordionContext = _interopRequireDefault(require("react-bootstrap/AccordionContext"));
-var _ObsItem = require("./ObsItem");
 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; }
@@ -81,7 +84,7 @@ function ObsColsList(_ref2) {
     refetchOnMount: false
   });
   (0, _react.useEffect)(() => {
-    if (!isPending && !serverError) {
+    if (!isPending && !serverError && fetchedData) {
       let filteredData = fetchedData;
 
       // filter to only obs within an obsGroup
@@ -110,6 +113,18 @@ function ObsColsList(_ref2) {
       }), "name"));
     }
   }, [fetchedData, isPending, obsGroups, serverError, enableGroups]);
+  (0, _react.useEffect)(() => {
+    if (obsCols && Object.keys(expandedItems).length === 0) {
+      const initialExpanded = Object.keys(obsCols).reduce((acc, key) => {
+        acc[key] = false;
+        return acc;
+      }, {});
+      if (active && obsCols[active]) {
+        initialExpanded[active] = true;
+      }
+      setExpandedItems(initialExpanded);
+    }
+  }, [obsCols, expandedItems, active]);
 
   // @TODO: fix re-rendering performance issue
   (0, _react.useEffect)(() => {
@@ -237,23 +252,33 @@ function ObsColsList(_ref2) {
     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: "accordion-item",
       key: item.name
     }, /*#__PURE__*/_react.default.createElement(ObsAccordionToggle, {
       eventKey: item.name,
       handleAccordionToggle: handleAccordionToggle
-    }, /*#__PURE__*/_react.default.createElement("div", null, item.name), /*#__PURE__*/_react.default.createElement("div", null, inLabelObs && /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-      className: "mx-1",
-      icon: _freeSolidSvgIcons.faListOl,
-      title: "In tooltip"
-    }), inSliceObs && /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-      className: "mx-1",
-      icon: _freeSolidSvgIcons.faScissors,
+    }, /*#__PURE__*/_react.default.createElement("div", null, item.name), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", {
+      className: `mx-1 cursor-pointer ${inLabelObs ? "active-icon" : "text-muted opacity-50"}`,
+      onClick: event => {
+        event.stopPropagation();
+        toggleLabel(item);
+      },
+      title: "Add to tooltip"
+    }, /*#__PURE__*/_react.default.createElement(_Comment.default, null)), /*#__PURE__*/_react.default.createElement("span", {
+      className: `mx-1 cursor-pointer ${inSliceObs ? "active-icon" : "text-muted opacity-50"}`,
+      onClick: event => {
+        event.stopPropagation();
+        toggleSlice(item);
+      },
       title: "Filter applied"
-    }), isColorEncoding && /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-      className: "mx-1",
-      icon: _freeSolidSvgIcons.faDroplet,
+    }, /*#__PURE__*/_react.default.createElement(_JoinInner.default, null)), /*#__PURE__*/_react.default.createElement("span", {
+      className: `mx-1 cursor-pointer ${isColorEncoding ? "active-icon" : "text-muted opacity-50"}`,
+      onClick: event => {
+        event.stopPropagation();
+        toggleColor(item);
+      },
       title: "Is color encoding"
-    }))), /*#__PURE__*/_react.default.createElement(_Accordion.default.Collapse, {
+    }, /*#__PURE__*/_react.default.createElement(_WaterDrop.default, null)))), /*#__PURE__*/_react.default.createElement(_Accordion.default.Collapse, {
       eventKey: item.name
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "obs-accordion-body"
@@ -303,7 +328,9 @@ function ObsColsList(_ref2) {
     alwaysOpen: true
   }, groupList) : _lodash.default.map(_lodash.default.sortBy(obsCols, o => _lodash.default.lowerCase(o.name)), item => obsItem(item));
   if (!serverError) {
-    return /*#__PURE__*/_react.default.createElement("div", null, isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), !isPending && !!obsCols && !_lodash.default.size(obsCols) ? /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "position-relative h-100"
+    }, isPending ? /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null) : !!obsCols && !_lodash.default.size(obsCols) ? /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
       variant: "danger"
     }, "No observations found.") : /*#__PURE__*/_react.default.createElement(_Accordion.default, {
       flush: true,

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

@@ -5,61 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ObsToolbar = ObsToolbar;
 var _react = _interopRequireDefault(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");
-var _DatasetContext = require("../../context/DatasetContext");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function ObsToolbar(_ref) {
   let {
     item,
     showToggleAllObs = true,
-    showLabel = true,
-    showSlice = true,
-    showColor = true,
-    onToggleAllObs,
-    onToggleLabel,
-    onToggleSlice,
-    onToggleColor
+    onToggleAllObs
   } = _ref;
-  const dataset = (0, _DatasetContext.useDataset)();
   const allToggledOn = !item.omit.length;
-  const inLabelObs = _lodash.default.some(dataset.labelObs, i => i.name === item.name);
-  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 align-items-center"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "flex-grow-1"
-  }, showToggleAllObs && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Check, {
-    // prettier-ignore
+  return showToggleAllObs && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Check, {
     type: "switch",
     id: "custom-switch",
     label: "Toggle all",
     checked: allToggledOn,
     onChange: onToggleAllObs
-  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonGroup, null, showLabel && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
-    variant: inLabelObs ? "primary" : "outline-primary",
-    size: "sm",
-    onClick: onToggleLabel,
-    title: "Add to tooltip"
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faListOl
-  })), showSlice && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
-    variant: inSliceObs ? "primary" : "outline-primary",
-    size: "sm",
-    onClick: onToggleSlice,
-    title: "Filter to selected"
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faScissors
-  })), showColor && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
-    variant: isColorEncoding ? "primary" : "outline-primary",
-    size: "sm",
-    onClick: onToggleColor,
-    title: "Set as color encoding"
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faDroplet
-  })))));
+  });
 }

package/dist/cjs/components/obsm-list/ObsmList.js

@@ -7,8 +7,8 @@ exports.ObsmKeysList = ObsmKeysList;
 var _react = _interopRequireWildcard(require("react"));
 var _reactBootstrap = require("react-bootstrap");
 var _DatasetContext = require("../../context/DatasetContext");
-var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
+var _Skeleton = require("../../utils/Skeleton");
 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 ObsmKeysList() {
@@ -58,13 +58,16 @@ function ObsmKeysList() {
     }, item);
   });
   if (!serverError) {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement(_reactBootstrap.DropdownButton, {
+    if (isPending) {
+      return /*#__PURE__*/_react.default.createElement(_Skeleton.ObsmKeysListBtn, null);
+    }
+    return /*#__PURE__*/_react.default.createElement(_reactBootstrap.DropdownButton, {
       as: _reactBootstrap.ButtonGroup,
       title: dataset.selectedObsm || "Select an embedding",
-      variant: dataset.selectedObsm ? "primary" : "outline-primary",
+      variant: dataset.selectedObsm ? "primary" : "warning",
       id: "bg-nested-dropdown",
       size: "sm"
-    }, obsmList));
+    }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Header, null, "Embeddings"), obsmList);
   } else {
     return /*#__PURE__*/_react.default.createElement(_reactBootstrap.OverlayTrigger, {
       placement: "top",

package/dist/cjs/components/scatterplot/Scatterplot.js

@@ -13,8 +13,6 @@ var _editModes = require("@nebula.gl/edit-modes");
 var _layers2 = require("@nebula.gl/layers");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
-var _SpatialControls = require("./SpatialControls");
-var _Toolbox = require("./Toolbox");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
 var _FilterContext = require("../../context/FilterContext");
@@ -25,6 +23,8 @@ var _Legend = require("../../utils/Legend");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _string = require("../../utils/string");
 var _zarrData = require("../../utils/zarrData");
+var _SpatialControls = require("./SpatialControls");
+var _Toolbox = require("./Toolbox");
 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; }

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

@@ -12,10 +12,9 @@ var _editModes = require("@nebula.gl/edit-modes");
 var _Button = _interopRequireDefault(require("react-bootstrap/Button"));
 var _ButtonGroup = _interopRequireDefault(require("react-bootstrap/ButtonGroup"));
 var _Dropdown = _interopRequireDefault(require("react-bootstrap/Dropdown"));
-var _DropdownButton = _interopRequireDefault(require("react-bootstrap/DropdownButton"));
-var _ScatterplotControls = require("./ScatterplotControls");
 var _DatasetContext = require("../../context/DatasetContext");
 var _offcanvas = require("../offcanvas");
+var _ScatterplotControls = require("./ScatterplotControls");
 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; }
@@ -62,13 +61,8 @@ function SpatialControls(_ref) {
       features: []
     });
   };
-  const polygonControls = /*#__PURE__*/_react.default.createElement("div", {
-    className: "mt-2"
-  }, /*#__PURE__*/_react.default.createElement(_ButtonGroup.default, {
-    vertical: true,
-    className: "w-100"
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    variant: dataset.sliceBy.polygons ? "primary" : "outline-primary",
+  const polygonControls = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    active: dataset.sliceBy.polygons,
     title: "Filter data with polygons",
     onClick: () => {
       setMode(() => _editModes.ViewMode);
@@ -77,7 +71,6 @@ function SpatialControls(_ref) {
       });
     }
   }, /*#__PURE__*/_react.default.createElement(_iconsMaterial.JoinInner, null)), /*#__PURE__*/_react.default.createElement(_Button.default, {
-    variant: "outline-primary",
     title: "Delete selected polygons",
     onClick: () => {
       const newFeatures = features.features.filter((_f, i) => !selectedFeatureIndexes.includes(i));
@@ -89,12 +82,12 @@ function SpatialControls(_ref) {
     disabled: !selectedFeatureIndexes.length
   }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
     icon: _freeSolidSvgIcons.faTrash
-  }))));
+  })));
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "cherita-spatial-controls"
   }, /*#__PURE__*/_react.default.createElement(_ButtonGroup.default, {
     vertical: true,
-    className: "w-100"
+    className: "w-100 mb-1"
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: increaseZoom,
     title: "Increase zoom"
@@ -111,37 +104,44 @@ function SpatialControls(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
     icon: _freeSolidSvgIcons.faCrosshairs
   })), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: handleShowControls
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faSliders
+  }))), /*#__PURE__*/_react.default.createElement(_ButtonGroup.default, {
+    vertical: true,
+    className: "w-100"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: () => setMode(() => _editModes.ViewMode),
     title: "Set dragging mode",
-    variant: mode === _editModes.ViewMode ? "primary" : "outline-primary"
+    active: mode === _editModes.ViewMode
   }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
     icon: _freeSolidSvgIcons.faHand
-  })), /*#__PURE__*/_react.default.createElement(_DropdownButton.default, {
+  })), /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
     as: _ButtonGroup.default,
-    title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-      icon: _freeSolidSvgIcons.faDrawPolygon
-    })),
-    drop: "end",
-    id: "bg-vertical-dropdown-1",
     className: "caret-off",
+    drop: "end",
     onSelect: onSelect
-  }, /*#__PURE__*/_react.default.createElement(_Dropdown.default.Header, null, "Selection tools"), /*#__PURE__*/_react.default.createElement(_Dropdown.default.Item, {
-    eventKey: "DrawPolygonMode"
-  }, "Draw a polygon"), /*#__PURE__*/_react.default.createElement(_Dropdown.default.Item, {
+  }, /*#__PURE__*/_react.default.createElement(_Dropdown.default.Toggle, {
+    id: "dropdown-autoclose-outside",
+    className: `caret-off ${mode === _editModes.DrawPolygonByDraggingMode || mode === _editModes.ModifyMode ? "active" : ""}`
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faDrawPolygon
+  })), /*#__PURE__*/_react.default.createElement(_Dropdown.default.Menu, null, /*#__PURE__*/_react.default.createElement(_Dropdown.default.Header, null, "Polygon tools"), /*#__PURE__*/_react.default.createElement(_Dropdown.default.Item, {
     eventKey: "DrawPolygonByDraggingMode"
-  }, "Draw a Polygon by Dragging"), /*#__PURE__*/_react.default.createElement(_Dropdown.default.Item, {
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faDrawPolygon,
+    className: "nav-icon"
+  }), "Draw a polygon"), /*#__PURE__*/_react.default.createElement(_Dropdown.default.Item, {
     eventKey: "ModifyMode"
-  }, "Modify polygons"), /*#__PURE__*/_react.default.createElement(_Dropdown.default.Item, {
-    eventKey: "ViewMode"
-  }, "Viewing mode"), /*#__PURE__*/_react.default.createElement(_Dropdown.default.Item, {
-    onClick: deleteFeatures
   }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faTrash
-  }), " Delete polygons")), /*#__PURE__*/_react.default.createElement(_Button.default, {
-    onClick: handleShowControls
+    icon: _freeSolidSvgIcons.faPen,
+    className: "nav-icon"
+  }), "Modify polygons"), /*#__PURE__*/_react.default.createElement(_Dropdown.default.Item, {
+    onClick: deleteFeatures
   }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faSliders
-  }))), !!features?.features?.length && polygonControls, /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasControls, {
+    icon: _freeSolidSvgIcons.faTrash,
+    className: "nav-icon"
+  }), "Delete polygons"))), !!features?.features?.length && polygonControls), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasControls, {
     show: showControls,
     handleClose: handleCloseControls,
     Controls: _ScatterplotControls.ScatterplotControls

package/dist/cjs/components/scatterplot/Toolbox.js

@@ -7,8 +7,7 @@ exports.Toolbox = Toolbox;
 var _react = _interopRequireDefault(require("react"));
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 var _reactFontawesome = require("@fortawesome/react-fontawesome");
-var _Button = _interopRequireDefault(require("react-bootstrap/Button"));
-var _ButtonGroup = _interopRequireDefault(require("react-bootstrap/ButtonGroup"));
+var _reactBootstrap = require("react-bootstrap");
 var _string = require("../../utils/string");
 var _ObsmList = require("../obsm-list/ObsmList");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -20,13 +19,44 @@ function Toolbox(_ref) {
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "cherita-toolbox"
-  }, /*#__PURE__*/_react.default.createElement(_ButtonGroup.default, null, /*#__PURE__*/_react.default.createElement(_ObsmList.ObsmKeysList, null), /*#__PURE__*/_react.default.createElement(_Button.default, {
-    size: "sm"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_ObsmList.ObsmKeysList, null), mode && /*#__PURE__*/_react.default.createElement(_reactBootstrap.OverlayTrigger, {
+    placement: "top",
+    overlay: /*#__PURE__*/_react.default.createElement(_reactBootstrap.Tooltip, {
+      id: "tooltip-dropped-mode"
+    }, "The color scale is currently set to ", mode)
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    size: "sm",
+    variant: "primary",
+    style: {
+      cursor: "default"
+    },
+    "aria-disabled": "true"
   }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faDroplet
-  }), " ", mode), (mode || !isNaN(obsLength)) && (mode !== null && !isNaN(slicedLength) && slicedLength !== obsLength ? /*#__PURE__*/_react.default.createElement(_Button.default, {
-    size: "sm"
-  }, (0, _string.formatNumerical)(slicedLength), " out of", " ", (0, _string.formatNumerical)(obsLength), " cells") : /*#__PURE__*/_react.default.createElement(_Button.default, {
-    size: "sm"
-  }, (0, _string.formatNumerical)(obsLength), " cells"))));
+    icon: _freeSolidSvgIcons.faDroplet,
+    className: "me-1"
+  }), " ", mode)), (mode || !isNaN(obsLength)) && (mode !== null && !isNaN(slicedLength) && slicedLength !== obsLength ? /*#__PURE__*/_react.default.createElement(_reactBootstrap.OverlayTrigger, {
+    placement: "top",
+    overlay: /*#__PURE__*/_react.default.createElement(_reactBootstrap.Tooltip, {
+      id: "tooltip-dropped-mode"
+    }, "You have selected ", (0, _string.formatNumerical)(slicedLength), " out of", " ", (0, _string.formatNumerical)(obsLength), " cells")
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    size: "sm",
+    variant: "primary",
+    style: {
+      cursor: "default"
+    },
+    "aria-disabled": "true"
+  }, (0, _string.formatNumerical)(slicedLength), " of ", (0, _string.formatNumerical)(obsLength), " ", "cells")) : /*#__PURE__*/_react.default.createElement(_reactBootstrap.OverlayTrigger, {
+    placement: "top",
+    overlay: /*#__PURE__*/_react.default.createElement(_reactBootstrap.Tooltip, {
+      id: "tooltip-dropped-mode"
+    }, "You are viewing ", (0, _string.formatNumerical)(obsLength), " cells")
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    size: "sm",
+    variant: "primary",
+    style: {
+      cursor: "default"
+    },
+    "aria-disabled": "true"
+  }, (0, _string.formatNumerical)(obsLength), " cells")))));
 }