@haniffalab/cherita-react 1.0.0 → 1.1.0-dev.2025-04-01.1c91bb8b

package/dist/{components → cjs/components}/var-list/VarItem.js

@@ -20,9 +20,10 @@ var _VirtualizedList = require("../../utils/VirtualizedList");
 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 VarHistogram({
-  item
-}) {
+function VarHistogram(_ref) {
+  let {
+    item
+  } = _ref;
   const ENDPOINT = "var/histograms";
   const dataset = (0, _DatasetContext.useDataset)();
   const {
@@ -80,9 +81,10 @@ function VarDiseaseInfoItem(item) {
     }
   })))));
 }
-function VarDiseaseInfo({
-  data
-}) {
+function VarDiseaseInfo(_ref2) {
+  let {
+    data
+  } = _ref2;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, null, /*#__PURE__*/_react.default.createElement(_VirtualizedList.VirtualizedList, {
     getDataAtIndex: index => data[index],
     count: data.length,
@@ -91,15 +93,16 @@ function VarDiseaseInfo({
     ItemComponent: VarDiseaseInfoItem
   })));
 }
-function SingleSelectionItem({
-  item,
-  isActive,
-  selectVar,
-  removeVar,
-  isDiseaseGene = false,
-  showSetColorEncoding = true,
-  showRemove = true
-}) {
+function SingleSelectionItem(_ref3) {
+  let {
+    item,
+    isActive,
+    selectVar,
+    removeVar,
+    isDiseaseGene = false,
+    showSetColorEncoding = true,
+    showRemove = true
+  } = _ref3;
   const ENDPOINT = "disease/gene";
   const [openInfo, setOpenInfo] = (0, _react.useState)(false);
   const dataset = (0, _DatasetContext.useDataset)();
@@ -116,7 +119,7 @@ function SingleSelectionItem({
     refetchOnMount: false,
     enabled: !!dataset.diseaseDatasets.length
   });
-  const hasDiseaseInfo = !isPending && !serverError && !!fetchedData.length;
+  const hasDiseaseInfo = !isPending && !serverError && !!fetchedData?.length;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: `d-flex justify-content-between ${hasDiseaseInfo ? "cursor-pointer" : ""}`,
     onClick: () => {
@@ -160,11 +163,12 @@ function SingleSelectionItem({
     data: fetchedData
   }))));
 }
-function MultipleSelectionItem({
-  item,
-  isActive,
-  toggleVar
-}) {
+function MultipleSelectionItem(_ref4) {
+  let {
+    item,
+    isActive,
+    toggleVar
+  } = _ref4;
   const isNotInData = item.matrix_index === -1;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "d-flex"
@@ -180,13 +184,14 @@ function MultipleSelectionItem({
     title: isNotInData ? "Not present in data" : item.name
   }, item.name))));
 }
-function VarItem({
-  item,
-  active,
-  setVarButtons,
-  mode = _constants.SELECTION_MODES.SINGLE,
-  isDiseaseGene = false
-}) {
+function VarItem(_ref5) {
+  let {
+    item,
+    active,
+    setVarButtons,
+    mode = _constants.SELECTION_MODES.SINGLE,
+    isDiseaseGene = false
+  } = _ref5;
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const selectVar = () => {
@@ -197,13 +202,17 @@ function VarItem({
       });
       dispatch({
         type: "set.colorEncoding",
-        value: "var"
+        value: _constants.COLOR_ENCODINGS.VAR
       });
     } else if (mode === _constants.SELECTION_MODES.MULTIPLE) {
       dispatch({
         type: "select.multivar",
         var: item
       });
+      dispatch({
+        type: "set.colorEncoding",
+        value: _constants.COLOR_ENCODINGS.VAR
+      });
     }
   };
   const removeVar = () => {

package/dist/{components → cjs/components}/var-list/VarList.js

@@ -5,20 +5,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.VarNamesList = VarNamesList;
 var _react = _interopRequireWildcard(require("react"));
-var _iconsMaterial = require("@mui/icons-material");
+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 _VarItem = require("./VarItem");
-var _VarListToolbar = require("./VarListToolbar");
-var _VarSet = require("./VarSet");
+var _ButtonGroup = _interopRequireDefault(require("react-bootstrap/ButtonGroup"));
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
+var _VarItem = require("./VarItem");
+var _VarListToolbar = require("./VarListToolbar");
+var _VarSet = require("./VarSet");
 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; }
-const useVarMean = (varKeys, enabled = false) => {
+const useVarMean = function (varKeys) {
+  let enabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   const ENDPOINT = "matrix/mean";
   const dataset = (0, _DatasetContext.useDataset)();
   const [params, setParams] = (0, _react.useState)({
@@ -47,11 +50,17 @@ const useVarMean = (varKeys, enabled = false) => {
   });
 };
 
+// ensure nulls are lowest values
+const sortMeans = (i, means) => {
+  return means[i.name] || _lodash.default.min(_lodash.default.values(means)) - 1;
+};
+
 // @TODO: display where disease data comes from
 // add to disease dataset metadata
-function DiseaseVarList({
-  makeListItem
-}) {
+function DiseaseVarList(_ref) {
+  let {
+    makeListItem
+  } = _ref;
   const ENDPOINT = "disease/genes";
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
@@ -80,12 +89,12 @@ function DiseaseVarList({
       setDiseaseVars(diseaseData.fetchedData);
     }
   }, [diseaseData.fetchedData, diseaseData.isPending, diseaseData.serverError]);
-  const varMeans = useVarMean(diseaseVars, diseaseVars && dataset.varSort.disease.sort === _constants.VAR_SORT.MATRIX);
+  const varMeans = useVarMean(diseaseVars, !!diseaseVars?.length && dataset.varSort.disease.sort === _constants.VAR_SORT.MATRIX);
   (0, _react.useEffect)(() => {
     if (dataset.varSort.disease.sort === _constants.VAR_SORT.MATRIX) {
       if (!varMeans.isPending && !varMeans.serverError) {
         setSortedDiseaseVars(_lodash.default.orderBy(diseaseVars, o => {
-          return varMeans.fetchedData[o.name];
+          return sortMeans(o, varMeans.fetchedData);
         }, dataset.varSort.disease.sortOrder));
       }
     } else if (dataset.varSort.disease.sort === _constants.VAR_SORT.NAME) {
@@ -103,25 +112,35 @@ function DiseaseVarList({
   }, /*#__PURE__*/_react.default.createElement("h5", null, "Disease genes")), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
     variant: "light"
   }, "No disease genes found.")) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "d-flex justify-content-between mt-3"
-  }, /*#__PURE__*/_react.default.createElement("h5", null, "Disease genes"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
-    variant: "link",
+    className: "d-flex justify-content-between my-2"
+  }, /*#__PURE__*/_react.default.createElement("h5", null, "Disease genes"), /*#__PURE__*/_react.default.createElement(_ButtonGroup.default, {
+    "aria-label": "Feature options",
+    size: "sm"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    variant: "info",
     onClick: () => {
       dispatch({
         type: "reset.disease"
       });
     }
-  }, "clear")), /*#__PURE__*/_react.default.createElement("p", null, dataset.selectedDisease?.name), /*#__PURE__*/_react.default.createElement(_VarListToolbar.VarListToolbar, {
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faTimes,
+    className: "me-1"
+  }), "Clear"))), /*#__PURE__*/_react.default.createElement("p", null, dataset.selectedDisease?.name), /*#__PURE__*/_react.default.createElement(_VarListToolbar.VarListToolbar, {
     varType: "disease"
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "position-relative"
-  }, isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, null, diseaseVarList)))));
+  }, isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, {
+    variant: "flush",
+    className: "cherita-list"
+  }, diseaseVarList)))));
 }
-function VarNamesList({
-  mode = _constants.SELECTION_MODES.SINGLE,
-  displayName = "genes",
-  showDiseaseVarList = true
-}) {
+function VarNamesList(_ref2) {
+  let {
+    mode = _constants.SELECTION_MODES.SINGLE,
+    displayName = "genes",
+    showDiseaseVarList = true
+  } = _ref2;
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const [varButtons, setVarButtons] = (0, _react.useState)(mode === _constants.SELECTION_MODES.SINGLE ? dataset.selectedVar ? _lodash.default.unionWith([dataset.selectedVar], dataset.varSets, _lodash.default.isEqual) : [...dataset.varSets] : [...dataset.selectedMultiVar, ...dataset.varSets]);
@@ -181,9 +200,9 @@ function VarNamesList({
   // @TODO: deferr sortedVarButtons ?
   (0, _react.useEffect)(() => {
     if (dataset.varSort.var.sort === _constants.VAR_SORT.MATRIX) {
-      if (!varMeans.isPending && !varMeans.serverError) {
+      if (!varMeans.isPending && !varMeans.serverError && varMeans.fetchedData) {
         setSortedVarButtons(_lodash.default.orderBy(varButtons, o => {
-          return varMeans.fetchedData[o.name];
+          return sortMeans(o, varMeans.fetchedData);
         }, dataset.varSort.var.sortOrder));
       }
     } else if (dataset.varSort.var.sort === _constants.VAR_SORT.NAME) {
@@ -192,7 +211,8 @@ function VarNamesList({
       setSortedVarButtons(varButtons);
     }
   }, [dataset.varSort.var.sort, dataset.varSort.var.sortOrder, varButtons, varMeans.isPending, varMeans.serverError, varMeans.fetchedData]);
-  const makeListItem = (item, isDiseaseGene = false) => {
+  const makeListItem = function (item) {
+    let isDiseaseGene = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     return /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, {
       key: item.matrix_index
     }, /*#__PURE__*/_react.default.createElement(_VarItem.VarItem, {
@@ -237,10 +257,12 @@ function VarNamesList({
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "overflow-auto mt-3"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "d-flex justify-content-between"
-  }, /*#__PURE__*/_react.default.createElement("h5", null, _lodash.default.capitalize(displayName)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
-    variant: "light",
-    className: "p-1",
+    className: "d-flex justify-content-between mb-2"
+  }, /*#__PURE__*/_react.default.createElement("h5", null, _lodash.default.capitalize(displayName)), /*#__PURE__*/_react.default.createElement(_ButtonGroup.default, {
+    "aria-label": "Feature options",
+    size: "sm"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    variant: "info",
     onClick: () => {
       dispatch({
         type: "add.varSet",
@@ -251,8 +273,8 @@ function VarNamesList({
         }
       });
     }
-  }, /*#__PURE__*/_react.default.createElement(_iconsMaterial.Add, null), "New set"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
-    variant: "link",
+  }, "New set"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    variant: "info",
     onClick: () => {
       setVarButtons([]);
       dispatch({
@@ -262,11 +284,17 @@ function VarNamesList({
         type: "reset.varSets"
       });
     }
-  }, "clear"))), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !varList.length ? /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faTimes,
+    className: "me-1"
+  }), "Clear"))), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !varList.length ? /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
     variant: "light"
   }, "Search for a feature.") : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_VarListToolbar.VarListToolbar, null), /*#__PURE__*/_react.default.createElement("div", {
     className: "position-relative"
-  }, isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, null, varList)))), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showDiseaseVarList && /*#__PURE__*/_react.default.createElement(DiseaseVarList, {
+  }, isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, {
+    variant: "flush",
+    className: "cherita-list"
+  }, varList)))), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showDiseaseVarList && /*#__PURE__*/_react.default.createElement(DiseaseVarList, {
     makeListItem: makeListItem
   }))));
 }

package/dist/{components → cjs/components}/var-list/VarListToolbar.js

@@ -7,16 +7,16 @@ exports.VarListToolbar = VarListToolbar;
 var _react = _interopRequireWildcard(require("react"));
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 var _reactFontawesome = require("@fortawesome/react-fontawesome");
-var _material = require("@mui/material");
 var _reactBootstrap = require("react-bootstrap");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
 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; }
 // @TODO: set option for "var" and "disease"
-function VarListToolbar({
-  varType = "var"
-}) {
+function VarListToolbar(_ref) {
+  let {
+    varType = "var"
+  } = _ref;
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const [sort, setSort] = (0, _react.useState)(dataset.varSort.var.sort);
@@ -42,13 +42,15 @@ function VarListToolbar({
       });
     }
   };
-  return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Navbar, {
-    className: "var-list-toolbar"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup.Text, null, "Sort by:"), /*#__PURE__*/_react.default.createElement(_material.ToggleButtonGroup, {
-    "aria-label": "Sort feature by",
-    size: "small",
-    className: "mh-100"
-  }, /*#__PURE__*/_react.default.createElement(_material.ToggleButton, {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex justify-content-end align-items-center mb-2"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ToggleButtonGroup, {
+    name: "sortfeatures",
+    "aria-label": "Sort features by",
+    size: "sm",
+    type: "radio"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ToggleButton, {
+    id: _constants.VAR_SORT.NAME,
     value: _constants.VAR_SORT.NAME,
     "aria-label": "alphabetical",
     title: "Sort alphabetically",
@@ -60,7 +62,8 @@ function VarListToolbar({
     icon: _freeSolidSvgIcons.faArrowDownAZ
   }) : /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
     icon: _freeSolidSvgIcons.faArrowUpZA
-  })), /*#__PURE__*/_react.default.createElement(_material.ToggleButton, {
+  })), /*#__PURE__*/_react.default.createElement(_reactBootstrap.ToggleButton, {
+    id: _constants.VAR_SORT.MATRIX,
     value: _constants.VAR_SORT.MATRIX,
     "aria-label": "matrix value",
     title: "Sort by matrix value",
@@ -72,7 +75,8 @@ function VarListToolbar({
     icon: _freeSolidSvgIcons.faArrowDown19
   }) : /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
     icon: _freeSolidSvgIcons.faArrowUp91
-  })), /*#__PURE__*/_react.default.createElement(_material.ToggleButton, {
+  })), /*#__PURE__*/_react.default.createElement(_reactBootstrap.ToggleButton, {
+    id: "none",
     value: "none",
     "aria-label": "none",
     title: "No sorting",
@@ -86,5 +90,5 @@ function VarListToolbar({
     }
   }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
     icon: _freeSolidSvgIcons.faXmark
-  })))));
+  }))));
 }

package/dist/{components → cjs/components}/var-list/VarSet.js

@@ -10,10 +10,10 @@ var _reactFontawesome = require("@fortawesome/react-fontawesome");
 var _iconsMaterial = require("@mui/icons-material");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
-var _VarItem = require("./VarItem");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
 var _SearchBar = require("../search-bar/SearchBar");
+var _VarItem = require("./VarItem");
 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; }
@@ -26,14 +26,15 @@ const addVarToSet = (dispatch, set, v) => {
     var: v
   });
 };
-function SingleSelectionSet({
-  set,
-  isActive,
-  selectSet,
-  removeSet,
-  removeSetVar,
-  showSearchBar = true
-}) {
+function SingleSelectionSet(_ref) {
+  let {
+    set,
+    isActive,
+    selectSet,
+    removeSet,
+    removeSetVar,
+    showSearchBar = true
+  } = _ref;
   const [openSet, setOpenSet] = (0, _react.useState)(false);
   const varList = set.vars.length ? _lodash.default.map(set.vars, v => {
     return /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, {
@@ -96,14 +97,16 @@ function SingleSelectionSet({
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "mx-2"
   }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, {
-    variant: "flush"
+    variant: "flush",
+    className: "cherita-list"
   }, varList)))));
 }
-function MultipleSelectionSet({
-  set,
-  isActive,
-  toggleSet
-}) {
+function MultipleSelectionSet(_ref2) {
+  let {
+    set,
+    isActive,
+    toggleSet
+  } = _ref2;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "d-flex"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -117,11 +120,12 @@ function MultipleSelectionSet({
     title: set.name
   }, set.name))));
 }
-function VarSet({
-  set,
-  active,
-  mode = _constants.SELECTION_MODES.SINGLE
-}) {
+function VarSet(_ref3) {
+  let {
+    set,
+    active,
+    mode = _constants.SELECTION_MODES.SINGLE
+  } = _ref3;
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const selectSet = () => {

package/dist/{components → cjs/components}/violin/Violin.js

@@ -18,9 +18,10 @@ 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; }
-function Violin({
-  mode = _constants.VIOLIN_MODES.MULTIKEY
-}) {
+function Violin(_ref) {
+  let {
+    mode = _constants.VIOLIN_MODES.MULTIKEY
+  } = _ref;
   const ENDPOINT = "violin";
   const dataset = (0, _DatasetContext.useDataset)();
   const {

package/dist/{constants → cjs/constants}/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VIOLIN_MODES = exports.VIOLINPLOT_SCALES = exports.VAR_SORT_ORDER = exports.VAR_SORT = exports.UNSELECTED_POLYGON_FILLCOLOR = exports.SELECTION_MODES = exports.SELECTED_POLYGON_FILLCOLOR = exports.PSEUDOSPATIAL_PLOT_TYPES = exports.PSEUDOSPATIAL_CATEGORICAL_MODES = exports.OBS_TYPES = exports.MATRIXPLOT_SCALES = exports.LOCAL_STORAGE_KEY = exports.DOTPLOT_SCALES = exports.COLOR_ENCODINGS = void 0;
+exports.VIOLIN_MODES = exports.VIOLINPLOT_SCALES = exports.VAR_SORT_ORDER = exports.VAR_SORT = exports.UNSELECTED_POLYGON_FILLCOLOR = exports.SELECTION_MODES = exports.SELECTED_POLYGON_FILLCOLOR = exports.PSEUDOSPATIAL_PLOT_TYPES = exports.PSEUDOSPATIAL_CATEGORICAL_MODES = exports.OBS_TYPES = exports.MATRIXPLOT_SCALES = exports.LOCAL_STORAGE_KEY = exports.DOTPLOT_SCALES = exports.DEFAULT_OBS_GROUP = exports.COLOR_ENCODINGS = void 0;
 const LOCAL_STORAGE_KEY = exports.LOCAL_STORAGE_KEY = "CHERITA";
 const COLOR_ENCODINGS = exports.COLOR_ENCODINGS = {
   VAR: "var",
@@ -87,4 +87,8 @@ const PSEUDOSPATIAL_CATEGORICAL_MODES = exports.PSEUDOSPATIAL_CATEGORICAL_MODES
     value: "within",
     name: "% within section"
   }
-};
+};
+
+// `default` cols to be shown out of accordion, at top of obslist
+// default values from cellxgene schema
+const DEFAULT_OBS_GROUP = exports.DEFAULT_OBS_GROUP = ["assay", "cell_type", "development_stage", "disease", "donor_id", "organism", "self_reported_ethnicity", "sex", "suspension_type", "tissue", "tissue_type"];

package/dist/{context → cjs/context}/DatasetContext.js

@@ -44,10 +44,11 @@ const persistOptions = {
     storage: window.localStorage
   }),
   dehydrateOptions: {
-    shouldDehydrateQuery: ({
-      queryKey,
-      state
-    }) => {
+    shouldDehydrateQuery: _ref => {
+      let {
+        queryKey,
+        state
+      } = _ref;
       if (state.status === "success") {
         return persistKeys.includes(queryKey?.[0]);
       }
@@ -100,8 +101,7 @@ const initialDataset = {
       sortOrder: _constants.VAR_SORT_ORDER.ASC
     }
   },
-  obsCols: null,
-  // @TODO: implement specifying groups/categories for dropdowns
+  obsGroups: null,
   imageUrl: null,
   pseudospatial: {
     maskSet: null,
@@ -116,11 +116,12 @@ const initializer = initialState => {
   const localValues = _lodash.default.pick(localObj, keys);
   return _lodash.default.assign(initialState, localValues);
 };
-function DatasetProvider({
-  dataset_url,
-  children,
-  ...dataset_params
-}) {
+function DatasetProvider(_ref2) {
+  let {
+    dataset_url,
+    children,
+    ...dataset_params
+  } = _ref2;
   const [dataset, dispatch] = (0, _react.useReducer)(datasetReducer, _lodash.default.assign(initializer({
     url: dataset_url,
     ...initialDataset

package/dist/{context → cjs/context}/FilterContext.js

@@ -19,9 +19,10 @@ const initialFilterData = {
   slicedLength: null,
   isSliced: false
 };
-function FilterProvider({
-  children
-}) {
+function FilterProvider(_ref) {
+  let {
+    children
+  } = _ref;
   const [filteredData, dispatch] = (0, _react.useReducer)(filterReducer, {
     ...initialFilterData
   });

package/dist/{context → cjs/context}/ZarrDataContext.js

@@ -11,9 +11,10 @@ var _zarrData = require("../utils/zarrData");
 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; }
 const ZarrDataContext = /*#__PURE__*/(0, _react.createContext)(null);
-function ZarrDataProvider({
-  children
-}) {
+function ZarrDataProvider(_ref) {
+  let {
+    children
+  } = _ref;
   const obsmData = (0, _zarrData.useObsmData)();
   const obsData = (0, _zarrData.useObsData)();
   const xData = (0, _zarrData.useXData)();

package/dist/{helpers → cjs/helpers}/color-helper.js

@@ -42,17 +42,18 @@ const rgbToHex = color => {
 exports.rgbToHex = rgbToHex;
 const useColor = () => {
   const dataset = (0, _DatasetContext.useDataset)();
-  const getColor = (0, _react.useCallback)(({
-    value,
-    categorical = false,
-    grayOut = false,
-    grayParams: {
-      alpha = 0.75,
-      gray = 0.95
-    } = {},
-    colorEncoding = dataset.colorEncoding,
-    colorscale = null
-  }) => {
+  const getColor = (0, _react.useCallback)(_ref => {
+    let {
+      value,
+      categorical = false,
+      grayOut = false,
+      grayParams: {
+        alpha = 0.75,
+        gray = 0.95
+      } = {},
+      colorEncoding = dataset.colorEncoding,
+      colorscale = null
+    } = _ref;
     const colormap = colorscale || _colorscales.COLORSCALES[categorical ? "Accent" : dataset.controls.colorScale];
     if (colorEncoding) {
       if (grayOut) {

package/dist/{helpers → cjs/helpers}/map-helper.js

@@ -8,13 +8,14 @@ var _core = require("@deck.gl/core");
 var _lodash = _interopRequireDefault(require("lodash"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 class MapHelper {
-  fitBounds(coords, {
-    width = 400,
-    height = 600
-  } = {
-    width: 400,
-    height: 600
-  }) {
+  fitBounds(coords) {
+    let {
+      width = 400,
+      height = 600
+    } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+      width: 400,
+      height: 600
+    };
     let view = new _core.WebMercatorViewport({
       width: width,
       height: height,