@haniffalab/cherita-react 1.0.0 → 1.1.0

package/LICENSE

@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

package/dist/{components → cjs/components}/full-page/FullPage.js

@@ -23,11 +23,12 @@ var _Violin = require("../violin/Violin");
 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 _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 FullPage({
-  children,
-  varMode = _constants.SELECTION_MODES.SINGLE,
-  ...props
-}) {
+function FullPage(_ref) {
+  let {
+    children,
+    varMode = _constants.SELECTION_MODES.SINGLE,
+    ...props
+  } = _ref;
   const appRef = (0, _react.useRef)();
   const [appDimensions, setAppDimensions] = (0, _react.useState)({
     width: 0,
@@ -37,6 +38,7 @@ function FullPage({
   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) {
@@ -64,14 +66,12 @@ function FullPage({
     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, null)), /*#__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",
@@ -95,18 +95,28 @@ function FullPage({
     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, {
@@ -119,7 +129,7 @@ function FullPage({
   }), /*#__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/{components → cjs/components}/full-page/FullPagePseudospatial.js

@@ -21,11 +21,12 @@ var _SearchBar = require("../search-bar/SearchBar");
 var _VarList = require("../var-list/VarList");
 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
-}) {
+function FullPage(_ref) {
+  let {
+    children,
+    varMode = _constants.SELECTION_MODES.SINGLE,
+    ...props
+  } = _ref;
   const appRef = (0, _react.useRef)();
   const [appDimensions, setAppDimensions] = (0, _react.useState)({
     width: 0,
@@ -96,7 +97,7 @@ function FullPage({
     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", {
+  }, /*#__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"

package/dist/{components → 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; }
@@ -121,30 +121,31 @@ const useFilteredObsData = obs => {
     pct: pct
   };
 };
-function CategoricalItem({
-  value,
-  label,
-  code,
-  stats = {
-    value_counts: null,
-    pct: null
-  },
-  isOmitted,
-  min,
-  max,
-  onChange,
-  histogramData = {
-    data: null,
-    isPending: false,
-    altColor: false
-  },
-  filteredStats = {
-    value_counts: null,
-    pct: null
-  },
-  isSliced,
-  showColor = true
-}) {
+function CategoricalItem(_ref) {
+  let {
+    value,
+    label,
+    code,
+    stats = {
+      value_counts: null,
+      pct: null
+    },
+    isOmitted,
+    min,
+    max,
+    onChange,
+    histogramData = {
+      data: null,
+      isPending: false,
+      altColor: false
+    },
+    filteredStats = {
+      value_counts: null,
+      pct: null
+    },
+    isSliced,
+    showColor = true
+  } = _ref;
   const {
     getColor
   } = (0, _colorHelper.useColor)();
@@ -238,16 +239,17 @@ function CategoricalItem({
     })})`
   }))) : null)));
 }
-function CategoricalObs({
-  obs,
-  updateObs,
-  toggleAll,
-  toggleObs,
-  toggleLabel,
-  toggleSlice,
-  toggleColor,
-  showColor = true
-}) {
+function CategoricalObs(_ref2) {
+  let {
+    obs,
+    updateObs,
+    toggleAll,
+    toggleObs,
+    toggleLabel,
+    toggleSlice,
+    toggleColor,
+    showColor = true
+  } = _ref2;
   const dataset = (0, _DatasetContext.useDataset)();
   const {
     isSliced
@@ -303,13 +305,13 @@ function CategoricalObs({
   }, [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,
@@ -321,9 +323,10 @@ function CategoricalObs({
     showColor: showColor
   }));
 }
-function ObsContinuousStats({
-  obs
-}) {
+function ObsContinuousStats(_ref3) {
+  let {
+    obs
+  } = _ref3;
   const ENDPOINT = "obs/distribution";
   const dataset = (0, _DatasetContext.useDataset)();
   const params = {
@@ -337,31 +340,25 @@ function ObsContinuousStats({
   } = (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,
@@ -378,17 +375,28 @@ function ObsContinuousStats({
         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({
-  obs,
-  updateObs,
-  toggleAll,
-  toggleObs,
-  toggleLabel,
-  toggleSlice,
-  toggleColor
-}) {
+function ContinuousObs(_ref4) {
+  let {
+    obs,
+    updateObs,
+    toggleAll,
+    toggleObs,
+    toggleLabel,
+    toggleSlice,
+    toggleColor
+  } = _ref4;
   const ENDPOINT = "obs/bins";
   const dataset = (0, _DatasetContext.useDataset)();
   const {
@@ -461,8 +469,11 @@ function ContinuousObs({
     };
   };
   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/{components → cjs/components}/obs-list/ObsList.js

@@ -7,33 +7,67 @@ 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; }
-function ObsColsList({
-  showColor = true
-}) {
+// @TODO: integrate ObsAccordionToggle with ObsColsList active, expandedItems, etc. to avoid duplication
+
+const ObsAccordionToggle = _ref => {
+  let {
+    children,
+    eventKey,
+    handleAccordionToggle
+  } = _ref;
+  const {
+    activeEventKey
+  } = (0, _react.useContext)(_AccordionContext.default);
+  const decoratedOnClick = (0, _AccordionButton.useAccordionButton)(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));
+};
+function ObsColsList(_ref2) {
+  let {
+    showColor = true,
+    enableObsGroups = true
+  } = _ref2;
   const ENDPOINT = "obs/cols";
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  const [enableGroups, setEnableGroups] = (0, _react.useState)(enableObsGroups);
   const [obsCols, setObsCols] = (0, _react.useState)(null);
   const [active, setActive] = (0, _react.useState)(dataset.selectedObs?.name);
-  const [expandedItems, setExpandedItems] = (0, _react.useState)(active ? {
-    [active]: true
-  } : {});
+  const [expandedItems, setExpandedItems] = (0, _react.useState)({});
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url
   });
+  const obsGroups = (0, _react.useMemo)(() => ({
+    default: _lodash.default.union(_constants.DEFAULT_OBS_GROUP, dataset.obsGroups?.default),
+    ..._lodash.default.omit(dataset.obsGroups, "default")
+  }), [dataset.obsGroups]);
   (0, _react.useEffect)(() => {
     setParams(p => {
       return {
@@ -50,13 +84,26 @@ function ObsColsList({
     refetchOnMount: false
   });
   (0, _react.useEffect)(() => {
-    if (!isPending && !serverError) {
+    if (!isPending && !serverError && fetchedData) {
       let filteredData = fetchedData;
-      if (dataset.obsCols) {
-        filteredData = _lodash.default.filter(filteredData, d => {
-          return _lodash.default.includes(dataset.obsCols, d.name);
+
+      // filter to only obs within an obsGroup
+      if (enableGroups) {
+        const groupFiltered = _lodash.default.filter(filteredData, d => {
+          return _lodash.default.some(obsGroups, g => _lodash.default.includes(g, d.name));
         });
+        if (!!filteredData.length && !groupFiltered.length) {
+          setEnableGroups(false);
+          console.warn(`No obs found in obsGroups ${JSON.stringify(obsGroups)}, disabling obsGroups`);
+        } else {
+          filteredData = groupFiltered;
+        }
       }
+
+      // filter out discrete obs
+      filteredData = _lodash.default.filter(filteredData, d => {
+        return d.type !== _constants.OBS_TYPES.DISCRETE;
+      });
       setObsCols(_lodash.default.keyBy(_lodash.default.map(filteredData, d => {
         return {
           ...d,
@@ -65,7 +112,19 @@ function ObsColsList({
         };
       }), "name"));
     }
-  }, [dataset.obsCols, fetchedData, isPending, serverError]);
+  }, [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)(() => {
@@ -74,9 +133,13 @@ function ObsColsList({
         setActive(dataset.selectedObs?.name);
       } else {
         setActive(null);
+        dispatch({
+          type: "select.obs",
+          obs: null
+        });
       }
     }
-  }, [dataset.selectedObs, obsCols]);
+  }, [dataset.selectedObs, dispatch, obsCols]);
   const updateObs = updatedObs => {
     setObsCols(o => {
       return {
@@ -149,7 +212,7 @@ function ObsColsList({
     });
     dispatch({
       type: "set.colorEncoding",
-      value: "obs"
+      value: _constants.COLOR_ENCODINGS.OBS
     });
   };
   const toggleObs = (item, value) => {
@@ -178,29 +241,10 @@ function ObsColsList({
       });
     }
   };
-  function ObsAccordionToggle({
-    children,
-    eventKey
-  }) {
-    const {
-      activeEventKey
-    } = (0, _react.useContext)(_AccordionContext.default);
-    const decoratedOnClick = (0, _AccordionButton.useAccordionButton)(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) => {
+  const obsItem = item => {
+    if (!item) {
+      return null;
+    }
     if (item.type === _constants.OBS_TYPES.DISCRETE) {
       return null;
     }
@@ -208,22 +252,33 @@ function ObsColsList({
     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
-    }, /*#__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,
+      eventKey: item.name,
+      handleAccordionToggle: handleAccordionToggle
+    }, /*#__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"
@@ -247,9 +302,37 @@ function ObsColsList({
       toggleSlice: () => toggleSlice(item),
       toggleColor: () => toggleColor(item)
     })))));
+  };
+  const groupList = _lodash.default.map(_lodash.default.keys(obsGroups), group => {
+    const key = `group-${group}`;
+    const groupItems = _lodash.default.compact(_lodash.default.map(_lodash.default.sortBy(obsGroups[group], o => _lodash.default.lowerCase(o.name)), item => {
+      return obsItem(obsCols?.[item]);
+    }));
+    if (group === "default") {
+      return groupItems;
+    } else {
+      return /*#__PURE__*/_react.default.createElement(_Accordion.default.Item, {
+        key: key,
+        eventKey: key,
+        className: "obs-group-accordion-item"
+      }, /*#__PURE__*/_react.default.createElement(_Accordion.default.Header, {
+        className: "obs-group-accordion-header"
+      }, group), /*#__PURE__*/_react.default.createElement(_Accordion.default.Body, {
+        className: "obs-group-accordion-body"
+      }, groupItems));
+    }
   });
+  const obsList = enableGroups ? /*#__PURE__*/_react.default.createElement(_Accordion.default, {
+    className: "obs-group-accordion",
+    flush: true,
+    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), /*#__PURE__*/_react.default.createElement(_Accordion.default, {
+    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,
       defaultActiveKey: [active],
       alwaysOpen: true,