@haniffalab/cherita-react 2.0.0 → 2.1.0

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

@@ -1,4 +1,5 @@
 import { Button, ButtonGroup, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import { useDataset } from '../../context/DatasetContext';
 import { formatNumerical } from '../../utils/string';
 import { ObsmKeysList } from '../obsm-list/ObsmList';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -9,6 +10,9 @@ export function Toolbox(_ref) {
     slicedLength,
     setHasObsm
   } = _ref;
+  const {
+    obsLabel
+  } = useDataset();
   return /*#__PURE__*/_jsx("div", {
     className: "cherita-toolbox",
     children: /*#__PURE__*/_jsxs(ButtonGroup, {
@@ -18,7 +22,7 @@ export function Toolbox(_ref) {
         placement: "top",
         overlay: /*#__PURE__*/_jsxs(Tooltip, {
           id: "tooltip-dropped-mode",
-          children: ["You have selected ", formatNumerical(slicedLength), " out of", ' ', formatNumerical(obsLength), " cells"]
+          children: ["You have selected ", formatNumerical(slicedLength), " out of", ' ', formatNumerical(obsLength), " ", obsLabel.plural]
         }),
         children: /*#__PURE__*/_jsxs(Button, {
           size: "sm",
@@ -27,13 +31,13 @@ export function Toolbox(_ref) {
             cursor: 'default'
           },
           "aria-disabled": "true",
-          children: [formatNumerical(slicedLength), " of ", formatNumerical(obsLength), ' ', "cells"]
+          children: [formatNumerical(slicedLength), " of ", formatNumerical(obsLength), ' ', obsLabel.plural]
         })
       }) : /*#__PURE__*/_jsx(OverlayTrigger, {
         placement: "top",
         overlay: /*#__PURE__*/_jsxs(Tooltip, {
           id: "tooltip-dropped-mode",
-          children: ["You are viewing ", formatNumerical(obsLength), " cells"]
+          children: ["You are viewing ", formatNumerical(obsLength), " ", obsLabel.plural]
         }),
         children: /*#__PURE__*/_jsxs(Button, {
           size: "sm",
@@ -42,7 +46,7 @@ export function Toolbox(_ref) {
             cursor: 'default'
           },
           "aria-disabled": "true",
-          children: [formatNumerical(obsLength), " cells"]
+          children: [formatNumerical(obsLength), " ", obsLabel.plural]
         })
       }))]
     })

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

@@ -3,7 +3,7 @@ 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); }
-import { useState } from 'react';
+import { useState, useRef, useCallback, useMemo } from 'react';
 import CloseIcon from '@mui/icons-material/Close';
 import SearchIcon from '@mui/icons-material/Search';
 import _ from 'lodash';
@@ -16,28 +16,41 @@ import Tab from 'react-bootstrap/Tab';
 import { DiseaseInfo, VarInfo } from './SearchInfo';
 import { DiseasesSearchResults, ObsSearchResults, VarSearchResults } from './SearchResults';
 import { COLOR_ENCODINGS } from '../../constants/constants';
+import { useDataset } from '../../context/DatasetContext';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const select = (dispatch, item) => {
-  dispatch({
-    type: 'select.var',
-    var: item
-  });
-  dispatch({
-    type: 'select.multivar',
-    var: item
-  });
-  dispatch({
-    type: 'set.colorEncoding',
-    value: COLOR_ENCODINGS.VAR
-  });
-};
-const debounceSelect = _.debounce(select, 500);
-function onVarSelect(dispatch, item) {
-  dispatch({
-    type: 'add.var',
-    var: item
-  });
-  debounceSelect(dispatch, item);
+function useVarSelect() {
+  const pendingVars = useRef(new Map());
+  const debouncedSelect = useMemo(() => _.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: COLOR_ENCODINGS.VAR
+      });
+    }
+  }, 500), []);
+  const onVarSelect = 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 {
@@ -65,7 +78,7 @@ export function SearchModal(_ref2) {
     text,
     setText,
     displayText,
-    handleSelect = onVarSelect,
+    handleVarSelect,
     searchVar,
     searchDiseases,
     searchObs
@@ -85,6 +98,7 @@ export function SearchModal(_ref2) {
   const [varResultsLength, setVarResultsLength] = useState(null);
   const [diseaseResultsLength, setDiseaseResultsLength] = useState(null);
   const [obsResultsLength, setObsResultsLength] = useState(null);
+  const dataset = useDataset();
   return /*#__PURE__*/_jsxs(Modal, {
     show: show,
     onHide: handleClose,
@@ -160,7 +174,7 @@ export function SearchModal(_ref2) {
                     children: [searchVar && /*#__PURE__*/_jsx(Nav.Item, {
                       children: /*#__PURE__*/_jsxs(Nav.Link, {
                         eventKey: FEATURE_TYPE.VAR,
-                        children: ["Genes", ' ', !!varResultsLength && "(".concat(varResultsLength, ")")]
+                        children: [_.capitalize(dataset.varLabel.plural), ' ', !!varResultsLength && "(".concat(varResultsLength, ")")]
                       })
                     }), searchDiseases && /*#__PURE__*/_jsx(Nav.Item, {
                       children: /*#__PURE__*/_jsxs(Nav.Link, {
@@ -170,7 +184,7 @@ export function SearchModal(_ref2) {
                     }), searchObs && /*#__PURE__*/_jsx(Nav.Item, {
                       children: /*#__PURE__*/_jsxs(Nav.Link, {
                         eventKey: FEATURE_TYPE.OBS,
-                        children: ["Genes", ' ', !!obsResultsLength && "(".concat(obsResultsLength, ")")]
+                        children: [_.capitalize(dataset.obsLabel.plural), ' ', !!obsResultsLength && "(".concat(obsResultsLength, ")")]
                       })
                     })]
                   })
@@ -182,7 +196,7 @@ export function SearchModal(_ref2) {
                       eventKey: FEATURE_TYPE.VAR,
                       children: /*#__PURE__*/_jsx(VarSearchResults, {
                         text: text,
-                        handleSelect: handleSelect,
+                        handleSelect: handleVarSelect,
                         selectedResult: selectedResult.var,
                         setSelectedResult: item => setSelectedResult(prev => {
                           return _objectSpread(_objectSpread({}, prev), {}, {
@@ -207,7 +221,6 @@ export function SearchModal(_ref2) {
                       eventKey: FEATURE_TYPE.OBS,
                       children: /*#__PURE__*/_jsx(ObsSearchResults, {
                         text: text,
-                        handleSelect: handleSelect,
                         selectedResult: selectedResult.obs,
                         setSelectedResult: item => setSelectedResult(prev => {
                           return _objectSpread(_objectSpread({}, prev), {}, {
@@ -230,7 +243,7 @@ export function SearchModal(_ref2) {
               if (tab === FEATURE_TYPE.DISEASE) {
                 return /*#__PURE__*/_jsx(DiseaseInfo, {
                   disease: selectedResult.disease,
-                  handleSelect: handleSelect,
+                  handleSelect: handleVarSelect,
                   addVarSet: addVarSet
                 });
               } else if (tab === FEATURE_TYPE.OBS) {
@@ -259,8 +272,13 @@ export function SearchBar(_ref3) {
     searchObs = false
   } = _ref3;
   const [text, setText] = useState('');
-  const displayText = [...(searchVar ? ['features'] : []), ...(searchDiseases ? ['diseases'] : [])].join(' and ');
+  const dataset = useDataset();
+  const displayText = [...(searchVar ? [dataset.varLabel.plural] : []), ...(searchDiseases ? ['diseases'] : []), ...(searchObs ? [dataset.obsLabel.plural] : [])].join(' and ');
   const [showModal, setShowModal] = useState(false);
+  const {
+    onVarSelect,
+    debouncedSelect
+  } = useVarSelect();
   return /*#__PURE__*/_jsxs("div", {
     children: [/*#__PURE__*/_jsx(Form, {
       onSubmit: e => {
@@ -286,7 +304,11 @@ export function SearchBar(_ref3) {
       searchVar: searchVar,
       searchDiseases: searchDiseases,
       searchObs: searchObs,
-      handleClose: () => setShowModal(false)
+      handleVarSelect: onVarSelect,
+      handleClose: () => {
+        debouncedSelect.flush();
+        setShowModal(false);
+      }
     })]
   });
 }

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

@@ -176,8 +176,8 @@ export function DiseaseInfo(_ref2) {
   return /*#__PURE__*/_jsxs("div", {
     children: [/*#__PURE__*/_jsx("h5", {
       children: disease.disease_name
-    }), /*#__PURE__*/_jsx("h6", {
-      children: "Implicated genes"
+    }), /*#__PURE__*/_jsxs("h6", {
+      children: ["Implicated ", dataset.varLabel.plural]
     }), isPending ? /*#__PURE__*/_jsx("p", {
       children: "Loading..."
     }) : /*#__PURE__*/_jsxs(_Fragment, {

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

@@ -8,6 +8,7 @@ import { faPlus } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import _ from 'lodash';
 import { Button, ListGroup } from 'react-bootstrap';
+import { useDataset } from '../../context/DatasetContext';
 import { useSettingsDispatch } from '../../context/SettingsContext';
 import { useDiseaseSearch, useObsSearch, useVarSearch } from '../../utils/search';
 import { VirtualizedList } from '../../utils/VirtualizedList';
@@ -89,9 +90,10 @@ function SearchResultsBase(_ref) {
   });
 }
 export function VarSearchResults(props) {
+  const dataset = useDataset();
   return /*#__PURE__*/_jsx(SearchResultsBase, _objectSpread(_objectSpread({}, props), {}, {
     searchHook: useVarSearch,
-    emptyLabel: "Search features",
+    emptyLabel: "Search for ".concat(dataset.varLabel.plural),
     itemRenderer: _ref2 => {
       var _item$index, _item$index2;
       let {
@@ -129,17 +131,18 @@ export function VarSearchResults(props) {
   }));
 }
 export function ObsSearchResults(props) {
+  const dataset = useDataset();
   return /*#__PURE__*/_jsx(SearchResultsBase, _objectSpread(_objectSpread({}, props), {}, {
     searchHook: 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({
@@ -163,7 +166,7 @@ export 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__*/_jsx(FontAwesomeIcon, {
                 icon: faPlus
               })
@@ -177,7 +180,7 @@ export function ObsSearchResults(props) {
 export function DiseasesSearchResults(props) {
   return /*#__PURE__*/_jsx(SearchResultsBase, _objectSpread(_objectSpread({}, props), {}, {
     searchHook: useDiseaseSearch,
-    emptyLabel: "Search diseases",
+    emptyLabel: "Search for diseases",
     overscan: 250,
     estimateSize: () => 32,
     itemRenderer: _ref4 => {

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

@@ -1,75 +1,21 @@
 import { faList, faSearch, faSliders } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import _ from 'lodash';
 import { Container, Nav, Navbar, Button, ButtonGroup } from 'react-bootstrap';
+import { useDataset } from '../../context/DatasetContext';
 import usePlotVisibility from '../../utils/usePlotVisibility';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const Toolbar = _ref => {
-  let {
-    setShowCategories,
-    setShowSearch,
-    setShowControls,
-    Fullscreen
-  } = _ref;
-  const {
-    showCategoriesBtn,
-    showSearchBtn
-  } = usePlotVisibility(isFullscreen);
-  return /*#__PURE__*/_jsx(Navbar, {
-    expand: "md",
-    bg: "primary",
-    variant: "dark",
-    className: "cherita-navbar",
-    children: /*#__PURE__*/_jsxs(Container, {
-      fluid: true,
-      children: [/*#__PURE__*/_jsx(Navbar.Toggle, {
-        "aria-controls": "navbarScroll"
-      }), /*#__PURE__*/_jsx(Navbar.Collapse, {
-        id: "navbarScroll",
-        children: /*#__PURE__*/_jsxs(Nav, {
-          navbarScroll: true,
-          children: [showCategoriesBtn && /*#__PURE__*/_jsx(Nav.Item, {
-            className: "me-2",
-            children: /*#__PURE__*/_jsxs(Nav.Link, {
-              onClick: () => setShowCategories(true),
-              children: [/*#__PURE__*/_jsx(FontAwesomeIcon, {
-                icon: faList,
-                className: "me-2"
-              }), "Explore Categories"]
-            })
-          }), showSearchBtn && /*#__PURE__*/_jsx(Nav.Item, {
-            className: "me-2",
-            children: /*#__PURE__*/_jsxs(Nav.Link, {
-              onClick: () => setShowSearch(true),
-              children: [/*#__PURE__*/_jsx(FontAwesomeIcon, {
-                icon: faSearch,
-                className: "me-2"
-              }), "Search Genes"]
-            })
-          }), /*#__PURE__*/_jsx(Nav.Item, {
-            className: "me-2",
-            children: /*#__PURE__*/_jsxs(Nav.Link, {
-              onClick: () => setShowControls(true),
-              children: [/*#__PURE__*/_jsx(FontAwesomeIcon, {
-                icon: faSliders,
-                className: "me-2"
-              }), "Controls"]
-            })
-          }), ' ']
-        })
-      })]
-    })
-  });
-};
-export const PlotlyToolbar = _ref2 => {
+export const PlotlyToolbar = _ref => {
   let {
     setShowCategories,
     setShowSearch,
     isFullscreen
-  } = _ref2;
+  } = _ref;
   const {
     showCategoriesBtn,
     showSearchBtn
   } = usePlotVisibility(isFullscreen);
+  const dataset = useDataset();
   return /*#__PURE__*/_jsxs(ButtonGroup, {
     children: [showCategoriesBtn && /*#__PURE__*/_jsxs(Button, {
       variant: "primary",
@@ -82,18 +28,18 @@ export const PlotlyToolbar = _ref2 => {
     }), showSearchBtn && /*#__PURE__*/_jsxs(Button, {
       variant: "primary",
       onClick: () => setShowSearch(true),
-      title: "Search Genes",
+      title: "Search ".concat(dataset.varLabel.plural),
       children: [/*#__PURE__*/_jsx(FontAwesomeIcon, {
         icon: faSearch,
         className: "me-1"
-      }), "Genes"]
+      }), _.capitalize(dataset.varLabel.plural)]
     })]
   });
 };
-export const PlotlyModebarControls = _ref3 => {
+export const PlotlyModebarControls = _ref2 => {
   let {
     onClick
-  } = _ref3;
+  } = _ref2;
   return {
     name: 'Controls',
     icon: {

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

@@ -147,7 +147,7 @@ export function SelectionItem(_ref3) {
           className: "ms-auto d-flex align-items-center gap-1",
           children: [hasDiseaseInfo && /*#__PURE__*/_jsx(MoreVert, {}), /*#__PURE__*/_jsx(VarHistogram, {
             item: item
-          }), showSetColorEncoding && /*#__PURE__*/_jsxs(Button, {
+          }), showSetColorEncoding && /*#__PURE__*/_jsx(Button, {
             type: "button",
             variant: isActive ? 'primary' : isNotInData ? 'outline-secondary' : 'outline-primary',
             className: "m-0 p-0 px-1",
@@ -157,11 +157,9 @@ export 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__*/_jsx(FontAwesomeIcon, {
-              icon: faDroplet
-            }), isMultiple && /*#__PURE__*/_jsx(FontAwesomeIcon, {
-              icon: faCheck
-            })]
+            children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+              icon: isMultiple ? faCheck : faDroplet
+            })
           }, item.matrix_index), showRemove && /*#__PURE__*/_jsx(Button, {
             type: "button",
             className: "m-0 p-0 px-1",

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

@@ -58,25 +58,33 @@ export const sortMeans = (i, means) => {
   return means[i.name] || _.min(_.values(means)) - 1;
 };
 export function VarNamesList(_ref) {
+  var _selectedVar$matrix_i;
   let {
-    mode = SELECTION_MODES.SINGLE,
-    displayName = 'genes'
+    mode = SELECTION_MODES.SINGLE
   } = _ref;
   const settings = useSettings();
   const dispatch = useSettingsDispatch();
+  const dataset = useDataset();
   const selectedVar = useSelectedVar();
   const selectedMultiVar = useSelectedMultiVar();
   const settingsVars = useSettingsVars();
-  const [active, setActive] = useState(mode === 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] = useState(mode === 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] = useState([]);
   useEffect(() => {
     if (mode === 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]);
   useEffect(() => {
     if (mode === 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 === VAR_SORT.MATRIX);
@@ -144,9 +152,9 @@ export function VarNamesList(_ref) {
     children: [/*#__PURE__*/_jsxs("div", {
       className: "d-flex justify-content-between mb-2",
       children: [/*#__PURE__*/_jsx("h5", {
-        children: _.capitalize(displayName)
+        children: _.capitalize(dataset.varLabel.plural)
       }), /*#__PURE__*/_jsxs(ButtonGroup, {
-        "aria-label": "Feature options",
+        "aria-label": "Options",
         size: "sm",
         children: [/*#__PURE__*/_jsx(Button, {
           variant: "info",
@@ -175,9 +183,9 @@ export function VarNamesList(_ref) {
         })]
       })]
     }), /*#__PURE__*/_jsx(_Fragment, {
-      children: !varList.length ? /*#__PURE__*/_jsx(Alert, {
+      children: !varList.length ? /*#__PURE__*/_jsxs(Alert, {
         variant: "light",
-        children: "Search for a feature."
+        children: ["Search for ", dataset.varLabel.plural]
       }) : /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(VarListToolbar, {}), /*#__PURE__*/_jsxs("div", {
           className: "overflow-auto flex-grow-1 modern-scrollbars",

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

@@ -40,7 +40,7 @@ export function VarListToolbar(_ref) {
     className: "d-flex justify-content-end align-items-center mb-2",
     children: /*#__PURE__*/_jsxs(ToggleButtonGroup, {
       name: "sortfeatures",
-      "aria-label": "Sort features by",
+      "aria-label": "Sort by",
       size: "sm",
       type: "radio",
       children: [/*#__PURE__*/_jsx(ToggleButton, {

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

@@ -5,6 +5,7 @@ import _ from 'lodash';
 import { Button, Collapse, ListGroup, OverlayTrigger, Tooltip } from 'react-bootstrap';
 import { SelectionItem } from './VarItem';
 import { COLOR_ENCODINGS, SELECTION_MODES } from '../../constants/constants';
+import { useDataset } from '../../context/DatasetContext';
 import { useSettings, useSettingsDispatch } from '../../context/SettingsContext';
 import { SearchModal } from '../search-bar/SearchBar';
 
@@ -26,6 +27,7 @@ function SelectionSet(_ref) {
     removeSetVar,
     isMultiple = false
   } = _ref;
+  const dataset = useDataset();
   const [openSet, setOpenSet] = useState(false);
   const [showModal, setShowModal] = useState(false);
   const [searchText, setSearchText] = useState('');
@@ -38,9 +40,9 @@ function SelectionSet(_ref) {
       })
     }, v.name);
   }) : /*#__PURE__*/_jsx(ListGroup.Item, {
-    children: /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsxs("div", {
       className: "text-muted",
-      children: "No features in this set"
+      children: ["No ", dataset.varLabel.plural, " in this set"]
     })
   });
   return /*#__PURE__*/_jsxs(_Fragment, {
@@ -59,8 +61,8 @@ function SelectionSet(_ref) {
           className: "d-flex align-items-center gap-1",
           children: [/*#__PURE__*/_jsx(OverlayTrigger, {
             placement: "top",
-            overlay: /*#__PURE__*/_jsx(Tooltip, {
-              children: "This set represents the mean value of its features"
+            overlay: /*#__PURE__*/_jsxs(Tooltip, {
+              children: ["This set represents the mean value of its", ' ', dataset.varLabel.plural]
             }),
             children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
               icon: faCircleInfo
@@ -131,7 +133,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/esm/components/violin/Violin.js

@@ -9,7 +9,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import _ from 'lodash';
 import { Badge, Button } from 'react-bootstrap';
 import Plot from 'react-plotly.js';
-import { PLOTLY_MODEBAR_BUTTONS, VIOLIN_MODES } from '../../constants/constants';
+import { PLOT_TYPES, PLOTLY_MODEBAR_BUTTONS, VIOLIN_MODES } from '../../constants/constants';
 import { useDataset } from '../../context/DatasetContext';
 import { useFilteredData } from '../../context/FilterContext';
 import { useSettings } from '../../context/SettingsContext';
@@ -27,7 +27,6 @@ export function Violin(_ref) {
     setShowCategories,
     setShowSearch,
     setShowControls,
-    plotType,
     setPlotType,
     isFullscreen = false
   } = _ref;
@@ -168,7 +167,7 @@ export function Violin(_ref) {
     return /*#__PURE__*/_jsxs(PlotAlert, {
       variant: "info",
       heading: "Set up your violin plot",
-      plotType: plotType,
+      plotType: PLOT_TYPES.VIOLINPLOT,
       setPlotType: setPlotType,
       children: [mode === VIOLIN_MODES.MULTIKEY && /*#__PURE__*/_jsxs("p", {
         className: "p-0 m-0",
@@ -176,8 +175,8 @@ export 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 === VIOLIN_MODES.GROUPBY && /*#__PURE__*/_jsxs("p", {
         className: "p-0 m-0",
         children: ["Select a", ' ', showCategoriesBtn ? /*#__PURE__*/_jsx(Button, {
@@ -189,15 +188,15 @@ export 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__*/_jsx(PlotAlert, {
       variant: "danger",
       heading: "Error displaying the violin plot",
-      plotType: plotType,
+      plotType: PLOT_TYPES.VIOLINPLOT,
       setPlotType: setPlotType,
       children: serverError.message || 'An unexpected error occurred while generating the plot.'
     });

package/dist/esm/constants/constants.js

@@ -93,11 +93,14 @@ export const PSEUDOSPATIAL_CATEGORICAL_MODES = {
 // `default` cols to be shown out of accordion, at top of obslist
 // default values from cellxgene schema
 export const DEFAULT_OBS_GROUP = ['assay', 'cell_type', 'development_stage', 'disease', 'donor_id', 'organism', 'self_reported_ethnicity', 'sex', 'suspension_type', 'tissue', 'tissue_type'];
-export const PLOTLY_MODEBAR_BUTTONS = ['toImage', 'zoom2d', 'pan2d', 'zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetScale2d'];
+export const PLOTLY_MODEBAR_BUTTONS = ['toImage', 'zoom2d', 'pan2d', 'zoomIn2d', 'zoomOut2d', 'autoScale2d'];
 export const BREAKPOINTS = {
   LG: '(max-width: 991.98px)',
   XL: '(max-width: 1199.98px)'
 };
 
 // In order of priority
-export const DEFAULT_OBSM_KEYS = ['x_umap', 'x_tsne', 'x_scvi', 'x_pca'];
+export const DEFAULT_OBSM_KEYS = ['x_umap', 'x_tsne', 'x_scvi', 'x_pca'];
+export const GRAY = [214, 212, 212];
+export const GRAY_MIX = 0.95;
+export const GRAY_ALPHA = 0.75;

package/dist/esm/context/DatasetContext.js

@@ -51,7 +51,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 = {
@@ -72,7 +72,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'
 };
 export function DatasetProvider(_ref2) {
   let {