@haniffalab/cherita-react 2.0.0 → 2.1.0

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Toolbox = Toolbox;
 var _reactBootstrap = require("react-bootstrap");
+var _DatasetContext = require("../../context/DatasetContext");
 var _string = require("../../utils/string");
 var _ObsmList = require("../obsm-list/ObsmList");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -15,6 +16,9 @@ function Toolbox(_ref) {
     slicedLength,
     setHasObsm
   } = _ref;
+  const {
+    obsLabel
+  } = (0, _DatasetContext.useDataset)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "cherita-toolbox",
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.ButtonGroup, {
@@ -24,7 +28,7 @@ function Toolbox(_ref) {
         placement: "top",
         overlay: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Tooltip, {
           id: "tooltip-dropped-mode",
-          children: ["You have selected ", (0, _string.formatNumerical)(slicedLength), " out of", ' ', (0, _string.formatNumerical)(obsLength), " cells"]
+          children: ["You have selected ", (0, _string.formatNumerical)(slicedLength), " out of", ' ', (0, _string.formatNumerical)(obsLength), " ", obsLabel.plural]
         }),
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Button, {
           size: "sm",
@@ -33,13 +37,13 @@ function Toolbox(_ref) {
             cursor: 'default'
           },
           "aria-disabled": "true",
-          children: [(0, _string.formatNumerical)(slicedLength), " of ", (0, _string.formatNumerical)(obsLength), ' ', "cells"]
+          children: [(0, _string.formatNumerical)(slicedLength), " of ", (0, _string.formatNumerical)(obsLength), ' ', obsLabel.plural]
         })
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.OverlayTrigger, {
         placement: "top",
         overlay: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Tooltip, {
           id: "tooltip-dropped-mode",
-          children: ["You are viewing ", (0, _string.formatNumerical)(obsLength), " cells"]
+          children: ["You are viewing ", (0, _string.formatNumerical)(obsLength), " ", obsLabel.plural]
         }),
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Button, {
           size: "sm",
@@ -48,7 +52,7 @@ function Toolbox(_ref) {
             cursor: 'default'
           },
           "aria-disabled": "true",
-          children: [(0, _string.formatNumerical)(obsLength), " cells"]
+          children: [(0, _string.formatNumerical)(obsLength), " ", obsLabel.plural]
         })
       }))]
     })

package/dist/cjs/components/search-bar/SearchBar.js

@@ -18,6 +18,7 @@ var _Tab = _interopRequireDefault(require("react-bootstrap/Tab"));
 var _SearchInfo = require("./SearchInfo");
 var _SearchResults = require("./SearchResults");
 var _constants = require("../../constants/constants");
+var _DatasetContext = require("../../context/DatasetContext");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -25,27 +26,39 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-const select = (dispatch, item) => {
-  dispatch({
-    type: 'select.var',
-    var: item
-  });
-  dispatch({
-    type: 'select.multivar',
-    var: item
-  });
-  dispatch({
-    type: 'set.colorEncoding',
-    value: _constants.COLOR_ENCODINGS.VAR
-  });
-};
-const debounceSelect = _lodash.default.debounce(select, 500);
-function onVarSelect(dispatch, item) {
-  dispatch({
-    type: 'add.var',
-    var: item
-  });
-  debounceSelect(dispatch, item);
+function useVarSelect() {
+  const pendingVars = (0, _react.useRef)(new Map());
+  const debouncedSelect = (0, _react.useMemo)(() => _lodash.default.debounce(dispatch => {
+    const vars = [...pendingVars.current.values()];
+    pendingVars.current.clear();
+    dispatch({
+      type: 'select.multivar.batch',
+      vars: vars
+    });
+    const lastItem = vars[vars.length - 1];
+    if (lastItem) {
+      dispatch({
+        type: 'select.var',
+        var: lastItem
+      });
+      dispatch({
+        type: 'set.colorEncoding',
+        value: _constants.COLOR_ENCODINGS.VAR
+      });
+    }
+  }, 500), []);
+  const onVarSelect = (0, _react.useCallback)((dispatch, item) => {
+    dispatch({
+      type: 'add.var',
+      var: item
+    });
+    pendingVars.current.set(item.name, item);
+    debouncedSelect(dispatch);
+  }, [debouncedSelect]);
+  return {
+    onVarSelect,
+    debouncedSelect
+  };
 }
 function addVarSet(dispatch, _ref) {
   let {
@@ -73,7 +86,7 @@ function SearchModal(_ref2) {
     text,
     setText,
     displayText,
-    handleSelect = onVarSelect,
+    handleVarSelect,
     searchVar,
     searchDiseases,
     searchObs
@@ -93,6 +106,7 @@ function SearchModal(_ref2) {
   const [varResultsLength, setVarResultsLength] = (0, _react.useState)(null);
   const [diseaseResultsLength, setDiseaseResultsLength] = (0, _react.useState)(null);
   const [obsResultsLength, setObsResultsLength] = (0, _react.useState)(null);
+  const dataset = (0, _DatasetContext.useDataset)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Modal, {
     show: show,
     onHide: handleClose,
@@ -168,7 +182,7 @@ function SearchModal(_ref2) {
                     children: [searchVar && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Nav.default.Item, {
                       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Nav.default.Link, {
                         eventKey: FEATURE_TYPE.VAR,
-                        children: ["Genes", ' ', !!varResultsLength && "(".concat(varResultsLength, ")")]
+                        children: [_lodash.default.capitalize(dataset.varLabel.plural), ' ', !!varResultsLength && "(".concat(varResultsLength, ")")]
                       })
                     }), searchDiseases && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Nav.default.Item, {
                       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Nav.default.Link, {
@@ -178,7 +192,7 @@ function SearchModal(_ref2) {
                     }), searchObs && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Nav.default.Item, {
                       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Nav.default.Link, {
                         eventKey: FEATURE_TYPE.OBS,
-                        children: ["Genes", ' ', !!obsResultsLength && "(".concat(obsResultsLength, ")")]
+                        children: [_lodash.default.capitalize(dataset.obsLabel.plural), ' ', !!obsResultsLength && "(".concat(obsResultsLength, ")")]
                       })
                     })]
                   })
@@ -190,7 +204,7 @@ function SearchModal(_ref2) {
                       eventKey: FEATURE_TYPE.VAR,
                       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchResults.VarSearchResults, {
                         text: text,
-                        handleSelect: handleSelect,
+                        handleSelect: handleVarSelect,
                         selectedResult: selectedResult.var,
                         setSelectedResult: item => setSelectedResult(prev => {
                           return _objectSpread(_objectSpread({}, prev), {}, {
@@ -215,7 +229,6 @@ function SearchModal(_ref2) {
                       eventKey: FEATURE_TYPE.OBS,
                       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchResults.ObsSearchResults, {
                         text: text,
-                        handleSelect: handleSelect,
                         selectedResult: selectedResult.obs,
                         setSelectedResult: item => setSelectedResult(prev => {
                           return _objectSpread(_objectSpread({}, prev), {}, {
@@ -238,7 +251,7 @@ function SearchModal(_ref2) {
               if (tab === FEATURE_TYPE.DISEASE) {
                 return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchInfo.DiseaseInfo, {
                   disease: selectedResult.disease,
-                  handleSelect: handleSelect,
+                  handleSelect: handleVarSelect,
                   addVarSet: addVarSet
                 });
               } else if (tab === FEATURE_TYPE.OBS) {
@@ -267,8 +280,13 @@ function SearchBar(_ref3) {
     searchObs = false
   } = _ref3;
   const [text, setText] = (0, _react.useState)('');
-  const displayText = [...(searchVar ? ['features'] : []), ...(searchDiseases ? ['diseases'] : [])].join(' and ');
+  const dataset = (0, _DatasetContext.useDataset)();
+  const displayText = [...(searchVar ? [dataset.varLabel.plural] : []), ...(searchDiseases ? ['diseases'] : []), ...(searchObs ? [dataset.obsLabel.plural] : [])].join(' and ');
   const [showModal, setShowModal] = (0, _react.useState)(false);
+  const {
+    onVarSelect,
+    debouncedSelect
+  } = useVarSelect();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form, {
       onSubmit: e => {
@@ -294,7 +312,11 @@ function SearchBar(_ref3) {
       searchVar: searchVar,
       searchDiseases: searchDiseases,
       searchObs: searchObs,
-      handleClose: () => setShowModal(false)
+      handleVarSelect: onVarSelect,
+      handleClose: () => {
+        debouncedSelect.flush();
+        setShowModal(false);
+      }
     })]
   });
 }

package/dist/cjs/components/search-bar/SearchInfo.js

@@ -184,8 +184,8 @@ function DiseaseInfo(_ref2) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h5", {
       children: disease.disease_name
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("h6", {
-      children: "Implicated genes"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("h6", {
+      children: ["Implicated ", dataset.varLabel.plural]
     }), isPending ? /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
       children: "Loading..."
     }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {

package/dist/cjs/components/search-bar/SearchResults.js

@@ -11,6 +11,7 @@ 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 _DatasetContext = require("../../context/DatasetContext");
 var _SettingsContext = require("../../context/SettingsContext");
 var _search = require("../../utils/search");
 var _VirtualizedList = require("../../utils/VirtualizedList");
@@ -98,9 +99,10 @@ function SearchResultsBase(_ref) {
   });
 }
 function VarSearchResults(props) {
+  const dataset = (0, _DatasetContext.useDataset)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(SearchResultsBase, _objectSpread(_objectSpread({}, props), {}, {
     searchHook: _search.useVarSearch,
-    emptyLabel: "Search features",
+    emptyLabel: "Search for ".concat(dataset.varLabel.plural),
     itemRenderer: _ref2 => {
       var _item$index, _item$index2;
       let {
@@ -138,17 +140,18 @@ function VarSearchResults(props) {
   }));
 }
 function ObsSearchResults(props) {
+  const dataset = (0, _DatasetContext.useDataset)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(SearchResultsBase, _objectSpread(_objectSpread({}, props), {}, {
     searchHook: _search.useObsSearch,
-    emptyLabel: "Search observations",
+    emptyLabel: "Search for ".concat(dataset.obsLabel.plural),
     itemRenderer: _ref3 => {
       let {
         item,
         dispatch,
-        handleClose,
         selectedResult,
         setSelectedResult,
-        isStale
+        isStale,
+        handleClose
       } = _ref3;
       const onObsSelect = (dispatch, item, closeModal) => {
         dispatch({
@@ -172,7 +175,7 @@ function ObsSearchResults(props) {
               variant: "outline-secondary",
               title: "Add to list",
               disabled: isStale,
-              onClick: () => onObsSelect(dispatch, item, props.handleClose),
+              onClick: () => onObsSelect(dispatch, item, handleClose),
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
                 icon: _freeSolidSvgIcons.faPlus
               })
@@ -186,7 +189,7 @@ function ObsSearchResults(props) {
 function DiseasesSearchResults(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(SearchResultsBase, _objectSpread(_objectSpread({}, props), {}, {
     searchHook: _search.useDiseaseSearch,
-    emptyLabel: "Search diseases",
+    emptyLabel: "Search for diseases",
     overscan: 250,
     estimateSize: () => 32,
     itemRenderer: _ref4 => {

package/dist/cjs/components/toolbar/Toolbar.js

@@ -3,81 +3,26 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Toolbar = exports.PlotlyToolbar = exports.PlotlyModebarControls = void 0;
+exports.PlotlyToolbar = exports.PlotlyModebarControls = void 0;
 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 _DatasetContext = require("../../context/DatasetContext");
 var _usePlotVisibility = _interopRequireDefault(require("../../utils/usePlotVisibility"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Toolbar = _ref => {
-  let {
-    setShowCategories,
-    setShowSearch,
-    setShowControls,
-    Fullscreen
-  } = _ref;
-  const {
-    showCategoriesBtn,
-    showSearchBtn
-  } = (0, _usePlotVisibility.default)(isFullscreen);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Navbar, {
-    expand: "md",
-    bg: "primary",
-    variant: "dark",
-    className: "cherita-navbar",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Container, {
-      fluid: true,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Navbar.Toggle, {
-        "aria-controls": "navbarScroll"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Navbar.Collapse, {
-        id: "navbarScroll",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Nav, {
-          navbarScroll: true,
-          children: [showCategoriesBtn && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Nav.Item, {
-            className: "me-2",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Nav.Link, {
-              onClick: () => setShowCategories(true),
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-                icon: _freeSolidSvgIcons.faList,
-                className: "me-2"
-              }), "Explore Categories"]
-            })
-          }), showSearchBtn && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Nav.Item, {
-            className: "me-2",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Nav.Link, {
-              onClick: () => setShowSearch(true),
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-                icon: _freeSolidSvgIcons.faSearch,
-                className: "me-2"
-              }), "Search Genes"]
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Nav.Item, {
-            className: "me-2",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Nav.Link, {
-              onClick: () => setShowControls(true),
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-                icon: _freeSolidSvgIcons.faSliders,
-                className: "me-2"
-              }), "Controls"]
-            })
-          }), ' ']
-        })
-      })]
-    })
-  });
-};
-exports.Toolbar = Toolbar;
-const PlotlyToolbar = _ref2 => {
+const PlotlyToolbar = _ref => {
   let {
     setShowCategories,
     setShowSearch,
     isFullscreen
-  } = _ref2;
+  } = _ref;
   const {
     showCategoriesBtn,
     showSearchBtn
   } = (0, _usePlotVisibility.default)(isFullscreen);
+  const dataset = (0, _DatasetContext.useDataset)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.ButtonGroup, {
     children: [showCategoriesBtn && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Button, {
       variant: "primary",
@@ -90,19 +35,19 @@ const PlotlyToolbar = _ref2 => {
     }), showSearchBtn && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Button, {
       variant: "primary",
       onClick: () => setShowSearch(true),
-      title: "Search Genes",
+      title: "Search ".concat(dataset.varLabel.plural),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
         icon: _freeSolidSvgIcons.faSearch,
         className: "me-1"
-      }), "Genes"]
+      }), _lodash.default.capitalize(dataset.varLabel.plural)]
     })]
   });
 };
 exports.PlotlyToolbar = PlotlyToolbar;
-const PlotlyModebarControls = _ref3 => {
+const PlotlyModebarControls = _ref2 => {
   let {
     onClick
-  } = _ref3;
+  } = _ref2;
   return {
     name: 'Controls',
     icon: {

package/dist/cjs/components/var-list/VarItem.js

@@ -156,7 +156,7 @@ function SelectionItem(_ref3) {
           className: "ms-auto d-flex align-items-center gap-1",
           children: [hasDiseaseInfo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.MoreVert, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(VarHistogram, {
             item: item
-          }), showSetColorEncoding && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Button, {
+          }), showSetColorEncoding && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
             type: "button",
             variant: isActive ? 'primary' : isNotInData ? 'outline-secondary' : 'outline-primary',
             className: "m-0 p-0 px-1",
@@ -166,11 +166,9 @@ function SelectionItem(_ref3) {
             },
             disabled: isNotInData,
             title: isNotInData ? 'Not present in data' : isMultiple ? isActive ? 'Remove from plot' : 'Add to plot' : 'Set as color encoding',
-            children: [!isMultiple && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-              icon: _freeSolidSvgIcons.faDroplet
-            }), isMultiple && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-              icon: _freeSolidSvgIcons.faCheck
-            })]
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+              icon: isMultiple ? _freeSolidSvgIcons.faCheck : _freeSolidSvgIcons.faDroplet
+            })
           }, item.matrix_index), showRemove && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
             type: "button",
             className: "m-0 p-0 px-1",

package/dist/cjs/components/var-list/VarList.js

@@ -68,25 +68,33 @@ const sortMeans = (i, means) => {
 };
 exports.sortMeans = sortMeans;
 function VarNamesList(_ref) {
+  var _selectedVar$matrix_i;
   let {
-    mode = _constants.SELECTION_MODES.SINGLE,
-    displayName = 'genes'
+    mode = _constants.SELECTION_MODES.SINGLE
   } = _ref;
   const settings = (0, _SettingsContext.useSettings)();
   const dispatch = (0, _SettingsContext.useSettingsDispatch)();
+  const dataset = (0, _DatasetContext.useDataset)();
   const selectedVar = (0, _Resolver.useSelectedVar)();
   const selectedMultiVar = (0, _Resolver.useSelectedMultiVar)();
   const settingsVars = (0, _Resolver.useSettingsVars)();
-  const [active, setActive] = (0, _react.useState)(mode === _constants.SELECTION_MODES.SINGLE ? (selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.matrix_index) || (selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.name) : selectedMultiVar.map(i => i.matrix_index || i.name));
+  const [active, setActive] = (0, _react.useState)(mode === _constants.SELECTION_MODES.SINGLE ? (_selectedVar$matrix_i = selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.matrix_index) !== null && _selectedVar$matrix_i !== void 0 ? _selectedVar$matrix_i : selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.name : selectedMultiVar.map(i => {
+    var _i$matrix_index;
+    return (_i$matrix_index = i.matrix_index) !== null && _i$matrix_index !== void 0 ? _i$matrix_index : i.name;
+  }));
   const [sortedVars, setSortedVars] = (0, _react.useState)([]);
   (0, _react.useEffect)(() => {
     if (mode === _constants.SELECTION_MODES.SINGLE) {
-      setActive((selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.matrix_index) || (selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.name));
+      var _selectedVar$matrix_i2;
+      setActive((_selectedVar$matrix_i2 = selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.matrix_index) !== null && _selectedVar$matrix_i2 !== void 0 ? _selectedVar$matrix_i2 : selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.name);
     }
   }, [mode, selectedVar]);
   (0, _react.useEffect)(() => {
     if (mode === _constants.SELECTION_MODES.MULTIPLE) {
-      setActive(selectedMultiVar.map(i => i.matrix_index || i.name));
+      setActive(selectedMultiVar.map(i => {
+        var _i$matrix_index2;
+        return (_i$matrix_index2 = i.matrix_index) !== null && _i$matrix_index2 !== void 0 ? _i$matrix_index2 : i.name;
+      }));
     }
   }, [mode, selectedMultiVar]);
   const varMeans = useVarMean(settingsVars, settings.varSort.var.sort === _constants.VAR_SORT.MATRIX);
@@ -154,9 +162,9 @@ function VarNamesList(_ref) {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "d-flex justify-content-between mb-2",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h5", {
-        children: _lodash.default.capitalize(displayName)
+        children: _lodash.default.capitalize(dataset.varLabel.plural)
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ButtonGroup.default, {
-        "aria-label": "Feature options",
+        "aria-label": "Options",
         size: "sm",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
           variant: "info",
@@ -185,9 +193,9 @@ function VarNamesList(_ref) {
         })]
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-      children: !varList.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
+      children: !varList.length ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Alert, {
         variant: "light",
-        children: "Search for a feature."
+        children: ["Search for ", dataset.varLabel.plural]
       }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_VarListToolbar.VarListToolbar, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "overflow-auto flex-grow-1 modern-scrollbars",

package/dist/cjs/components/var-list/VarListToolbar.js

@@ -45,7 +45,7 @@ function VarListToolbar(_ref) {
     className: "d-flex justify-content-end align-items-center mb-2",
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.ToggleButtonGroup, {
       name: "sortfeatures",
-      "aria-label": "Sort features by",
+      "aria-label": "Sort by",
       size: "sm",
       type: "radio",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ToggleButton, {

package/dist/cjs/components/var-list/VarSet.js

@@ -11,6 +11,7 @@ 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 _SettingsContext = require("../../context/SettingsContext");
 var _SearchBar = require("../search-bar/SearchBar");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -32,6 +33,7 @@ function SelectionSet(_ref) {
     removeSetVar,
     isMultiple = false
   } = _ref;
+  const dataset = (0, _DatasetContext.useDataset)();
   const [openSet, setOpenSet] = (0, _react.useState)(false);
   const [showModal, setShowModal] = (0, _react.useState)(false);
   const [searchText, setSearchText] = (0, _react.useState)('');
@@ -44,9 +46,9 @@ function SelectionSet(_ref) {
       })
     }, v.name);
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "text-muted",
-      children: "No features in this set"
+      children: ["No ", dataset.varLabel.plural, " in this set"]
     })
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -65,8 +67,8 @@ function SelectionSet(_ref) {
           className: "d-flex align-items-center gap-1",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.OverlayTrigger, {
             placement: "top",
-            overlay: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Tooltip, {
-              children: "This set represents the mean value of its features"
+            overlay: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Tooltip, {
+              children: ["This set represents the mean value of its", ' ', dataset.varLabel.plural]
             }),
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
               icon: _freeSolidSvgIcons.faCircleInfo
@@ -137,7 +139,7 @@ function SelectionSet(_ref) {
       handleClose: () => setShowModal(false),
       text: searchText,
       setText: setSearchText,
-      displayText: 'features',
+      displayText: dataset.varLabel.plural,
       handleSelect: (d, i) => {
         addVarToSet(d, set, i);
       },

package/dist/cjs/components/violin/Violin.js

@@ -34,7 +34,6 @@ function Violin(_ref) {
     setShowCategories,
     setShowSearch,
     setShowControls,
-    plotType,
     setPlotType,
     isFullscreen = false
   } = _ref;
@@ -175,7 +174,7 @@ function Violin(_ref) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PlotAlert.PlotAlert, {
       variant: "info",
       heading: "Set up your violin plot",
-      plotType: plotType,
+      plotType: _constants.PLOT_TYPES.VIOLINPLOT,
       setPlotType: setPlotType,
       children: [mode === _constants.VIOLIN_MODES.MULTIKEY && /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
         className: "p-0 m-0",
@@ -183,8 +182,8 @@ function Violin(_ref) {
           variant: "link",
           className: "border-0 p-0 align-baseline",
           onClick: setShowSearch,
-          children: "features"
-        }) : 'features', ' ', "to display their expression distributions across all observations."]
+          children: dataset.varLabel.plural
+        }) : dataset.varLabel.plural, ' ', "to display their ", dataset.valueLabel, " distributions across all", ' ', dataset.obsLabel.plural, "."]
       }), mode === _constants.VIOLIN_MODES.GROUPBY && /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
         className: "p-0 m-0",
         children: ["Select a", ' ', showCategoriesBtn ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
@@ -196,15 +195,15 @@ function Violin(_ref) {
           variant: "link",
           className: "border-0 p-0 align-baseline",
           onClick: setShowSearch,
-          children: "feature"
-        }) : 'feature', ' ', "to view its distribution within each group."]
+          children: dataset.varLabel.singular
+        }) : dataset.varLabel.singular, ' ', "to view its distribution within each group."]
       })]
     });
   } else {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PlotAlert.PlotAlert, {
       variant: "danger",
       heading: "Error displaying the violin plot",
-      plotType: plotType,
+      plotType: _constants.PLOT_TYPES.VIOLINPLOT,
       setPlotType: setPlotType,
       children: serverError.message || 'An unexpected error occurred while generating the plot.'
     });

package/dist/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.PLOT_TYPES = exports.PLOTLY_MODEBAR_BUTTONS = exports.OBS_TYPES = exports.MATRIXPLOT_SCALES = exports.LOCAL_STORAGE_KEY = exports.DOTPLOT_SCALES = exports.DEFAULT_OBS_GROUP = exports.DEFAULT_OBSM_KEYS = exports.COLOR_ENCODINGS = exports.BREAKPOINTS = 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.PLOT_TYPES = exports.PLOTLY_MODEBAR_BUTTONS = exports.OBS_TYPES = exports.MATRIXPLOT_SCALES = exports.LOCAL_STORAGE_KEY = exports.GRAY_MIX = exports.GRAY_ALPHA = exports.GRAY = exports.DOTPLOT_SCALES = exports.DEFAULT_OBS_GROUP = exports.DEFAULT_OBSM_KEYS = exports.COLOR_ENCODINGS = exports.BREAKPOINTS = void 0;
 const LOCAL_STORAGE_KEY = exports.LOCAL_STORAGE_KEY = 'CHERITA';
 const PLOT_TYPES = exports.PLOT_TYPES = {
   SCATTERPLOT: 'scatterplot',
@@ -99,11 +99,14 @@ const PSEUDOSPATIAL_CATEGORICAL_MODES = exports.PSEUDOSPATIAL_CATEGORICAL_MODES
 // `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'];
-const PLOTLY_MODEBAR_BUTTONS = exports.PLOTLY_MODEBAR_BUTTONS = ['toImage', 'zoom2d', 'pan2d', 'zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetScale2d'];
+const PLOTLY_MODEBAR_BUTTONS = exports.PLOTLY_MODEBAR_BUTTONS = ['toImage', 'zoom2d', 'pan2d', 'zoomIn2d', 'zoomOut2d', 'autoScale2d'];
 const BREAKPOINTS = exports.BREAKPOINTS = {
   LG: '(max-width: 991.98px)',
   XL: '(max-width: 1199.98px)'
 };
 
 // In order of priority
-const DEFAULT_OBSM_KEYS = exports.DEFAULT_OBSM_KEYS = ['x_umap', 'x_tsne', 'x_scvi', 'x_pca'];
+const DEFAULT_OBSM_KEYS = exports.DEFAULT_OBSM_KEYS = ['x_umap', 'x_tsne', 'x_scvi', 'x_pca'];
+const GRAY = exports.GRAY = [214, 212, 212];
+const GRAY_MIX = exports.GRAY_MIX = 0.95;
+const GRAY_ALPHA = exports.GRAY_ALPHA = 0.75;

package/dist/cjs/context/DatasetContext.js

@@ -60,7 +60,7 @@ const persistOptions = {
       return false;
     }
   },
-  buster: "2.0.0" || '0.0.0'
+  buster: "2.1.0" || '0.0.0'
   // @TODO: add maxAge and api version numbers as buster
 };
 const initialDataset = {
@@ -81,7 +81,16 @@ const initialDataset = {
     dataUrl: null,
     // for additional data in a remote .parquet file
     dataFilterCols: null // map of obs cols to filter data in .parquet file
-  }
+  },
+  obsLabel: {
+    singular: 'cell',
+    plural: 'cells'
+  },
+  varLabel: {
+    singular: 'gene',
+    plural: 'genes'
+  },
+  valueLabel: 'expression'
 };
 function DatasetProvider(_ref2) {
   let {