@haniffalab/cherita-react 1.5.0 → 2.0.0

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

@@ -6,16 +6,19 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 import { useState, useEffect } from 'react';
 import { faPlus } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Tooltip from '@mui/material/Tooltip';
 import _ from 'lodash';
 import { Button, ListGroup } from 'react-bootstrap';
 import { VAR_SORT } from '../../constants/constants';
 import { useDataset } from '../../context/DatasetContext';
 import { useSettings, useSettingsDispatch } from '../../context/SettingsContext';
 import { useFetch } from '../../utils/requests';
+import { useNCBIData } from '../../utils/useNCBIData';
 import { VarDiseaseInfo } from '../var-list/VarItem';
 import { sortMeans, useVarMean } from '../var-list/VarList';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export function VarInfo(_ref) {
+  var _ncbiData$reports;
   let {
     varItem
   } = _ref;
@@ -32,6 +35,14 @@ export function VarInfo(_ref) {
       });
     });
   }, [varItem.name]);
+  const {
+    fetchedData: ncbiData,
+    isPending: isNCBIPending,
+    serverError: ncbiError
+  } = useNCBIData({
+    symbol: varItem.name
+  });
+  const geneDescription = ncbiData === null || ncbiData === void 0 || (_ncbiData$reports = ncbiData.reports) === null || _ncbiData$reports === void 0 || (_ncbiData$reports = _ncbiData$reports[0]) === null || _ncbiData$reports === void 0 || (_ncbiData$reports = _ncbiData$reports.gene) === null || _ncbiData$reports === void 0 || (_ncbiData$reports = _ncbiData$reports.summary) === null || _ncbiData$reports === void 0 || (_ncbiData$reports = _ncbiData$reports[0]) === null || _ncbiData$reports === void 0 ? void 0 : _ncbiData$reports.description;
   const {
     fetchedData,
     isPending,
@@ -42,13 +53,42 @@ export function VarInfo(_ref) {
   });
   const hasDiseaseInfo = !isPending && !serverError && !!(fetchedData !== null && fetchedData !== void 0 && fetchedData.length);
   return /*#__PURE__*/_jsxs("div", {
-    children: [/*#__PURE__*/_jsx("h5", {
+    children: [/*#__PURE__*/_jsx("h2", {
       children: varItem.name
+    }), isNCBIPending && /*#__PURE__*/_jsx("p", {
+      className: "text-muted small",
+      children: "Loading gene description\u2026"
+    }), !isNCBIPending && !ncbiError && geneDescription && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("p", {
+        className: "small",
+        children: geneDescription
+      }), /*#__PURE__*/_jsxs("p", {
+        className: "text-muted small",
+        children: ["Data fetched from", ' ', /*#__PURE__*/_jsx("a", {
+          href: "https://www.ncbi.nlm.nih.gov/datasets/docs/v2/api/rest-api/",
+          target: "_blank",
+          rel: "noreferrer",
+          children: "NCBI API"
+        }), ' · ', /*#__PURE__*/_jsx("a", {
+          href: "https://www.ncbi.nlm.nih.gov/gene/?term=".concat(encodeURIComponent(varItem.name)),
+          target: "_blank",
+          rel: "noreferrer",
+          children: "Gene page"
+        })]
+      })]
     }), !!dataset.diseaseDatasets.length && isPending && /*#__PURE__*/_jsx("p", {
       children: "Loading..."
     }), hasDiseaseInfo && /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx("h6", {
-        children: "Associated diseases"
+      children: [/*#__PURE__*/_jsx("h5", {
+        className: "fw-bold mb-2",
+        children: /*#__PURE__*/_jsx(Tooltip, {
+          title: /*#__PURE__*/_jsx(_Fragment, {
+            children: "Reported and inferred diseases associated with this gene, including supporting metadata."
+          }),
+          placement: "left",
+          arrow: true,
+          children: "Associated Diseases"
+        })
       }), /*#__PURE__*/_jsx(VarDiseaseInfo, {
         data: fetchedData
       })]
@@ -104,29 +144,32 @@ export function DiseaseInfo(_ref2) {
     }
   }, [settings.varSort.disease.sort, settings.varSort.disease.sortOrder, diseaseVars, varMeans.fetchedData, varMeans.isPending, varMeans.serverError]);
   const diseaseVarList = _.map(sortedDiseaseVars, v => {
-    return /*#__PURE__*/_jsx(ListGroup.Item, {
-      children: /*#__PURE__*/_jsxs("div", {
-        className: "d-flex justify-content-between align-items-center w-100",
-        children: [v.name, /*#__PURE__*/_jsx("div", {
-          className: "d-flex align-items-center gap-1",
-          children: /*#__PURE__*/_jsx(Button, {
-            type: "button",
-            className: "m-0 p-0 px-1",
-            variant: "outline-secondary",
-            title: "Add to list",
-            onClick: () => {
-              handleSelect(dispatch, {
-                name: v.name,
-                index: v.index,
-                matrix_index: v.matrix_index
-              });
-            },
-            children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
-              icon: faPlus
+    return /*#__PURE__*/_jsx("div", {
+      className: "virtualized-list-wrapper",
+      children: /*#__PURE__*/_jsx(ListGroup.Item, {
+        children: /*#__PURE__*/_jsxs("div", {
+          className: "d-flex justify-content-between align-items-center w-100",
+          children: [v.name, /*#__PURE__*/_jsx("div", {
+            className: "d-flex align-items-center gap-1",
+            children: /*#__PURE__*/_jsx(Button, {
+              type: "button",
+              className: "m-0 p-0 px-1",
+              variant: "outline-secondary",
+              title: "Add to list",
+              onClick: () => {
+                handleSelect(dispatch, {
+                  name: v.name,
+                  index: v.index,
+                  matrix_index: v.matrix_index
+                });
+              },
+              children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+                icon: faPlus
+              })
             })
-          })
-        })]
-      })
+          })]
+        })
+      }, v.gene_id)
     }, v.gene_id);
   });
   const isPending = diseaseData.isPending || varMeans.isPending && settings.varSort.disease.sort === VAR_SORT.MATRIX;

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

@@ -93,7 +93,7 @@ export function VarSearchResults(props) {
     searchHook: useVarSearch,
     emptyLabel: "Search features",
     itemRenderer: _ref2 => {
-      var _item$index;
+      var _item$index, _item$index2;
       let {
         item,
         dispatch,
@@ -102,25 +102,28 @@ export function VarSearchResults(props) {
         setSelectedResult,
         isStale
       } = _ref2;
-      return /*#__PURE__*/_jsx(ListGroup.Item, {
-        onClick: () => setSelectedResult(item),
-        active: (selectedResult === null || selectedResult === void 0 ? void 0 : selectedResult.index) === item.index,
-        children: /*#__PURE__*/_jsxs("div", {
-          className: "d-flex justify-content-between align-items-center w-100",
-          children: [/*#__PURE__*/_jsx("div", {
-            children: item.name
-          }), /*#__PURE__*/_jsx(Button, {
-            type: "button",
-            className: "m-0 p-0 px-1",
-            variant: "outline-secondary",
-            title: "Add to list",
-            disabled: isStale,
-            onClick: () => handleSelect(dispatch, item),
-            children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
-              icon: faPlus
-            })
-          })]
-        })
+      return /*#__PURE__*/_jsx("div", {
+        className: "virtualized-list-wrapper",
+        children: /*#__PURE__*/_jsx(ListGroup.Item, {
+          onClick: () => setSelectedResult(item),
+          active: (selectedResult === null || selectedResult === void 0 ? void 0 : selectedResult.index) === item.index,
+          children: /*#__PURE__*/_jsxs("div", {
+            className: "d-flex justify-content-between align-items-center w-100",
+            children: [/*#__PURE__*/_jsx("div", {
+              children: item.name
+            }), /*#__PURE__*/_jsx(Button, {
+              type: "button",
+              className: "m-0 p-0 px-1",
+              variant: "outline-secondary",
+              title: "Add to list",
+              disabled: isStale,
+              onClick: () => handleSelect(dispatch, item),
+              children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+                icon: faPlus
+              })
+            })]
+          })
+        }, (_item$index2 = item.index) !== null && _item$index2 !== void 0 ? _item$index2 : item.name)
       }, (_item$index = item.index) !== null && _item$index !== void 0 ? _item$index : item.name);
     }
   }));
@@ -145,25 +148,28 @@ export function ObsSearchResults(props) {
         });
         if (closeModal) closeModal();
       };
-      return /*#__PURE__*/_jsx(ListGroup.Item, {
-        onClick: () => setSelectedResult(item),
-        active: (selectedResult === null || selectedResult === void 0 ? void 0 : selectedResult.matrix_index) === item.matrix_index,
-        children: /*#__PURE__*/_jsxs("div", {
-          className: "d-flex justify-content-between align-items-center w-100",
-          children: [/*#__PURE__*/_jsx("div", {
-            children: item.name
-          }), /*#__PURE__*/_jsx(Button, {
-            type: "button",
-            className: "m-0 p-0 px-1",
-            variant: "outline-secondary",
-            title: "Add to list",
-            disabled: isStale,
-            onClick: () => onObsSelect(dispatch, item, props.handleClose),
-            children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
-              icon: faPlus
-            })
-          })]
-        })
+      return /*#__PURE__*/_jsx("div", {
+        className: "virtualized-list-wrapper",
+        children: /*#__PURE__*/_jsx(ListGroup.Item, {
+          onClick: () => setSelectedResult(item),
+          active: (selectedResult === null || selectedResult === void 0 ? void 0 : selectedResult.matrix_index) === item.matrix_index,
+          children: /*#__PURE__*/_jsxs("div", {
+            className: "d-flex justify-content-between align-items-center w-100",
+            children: [/*#__PURE__*/_jsx("div", {
+              children: item.name
+            }), /*#__PURE__*/_jsx(Button, {
+              type: "button",
+              className: "m-0 p-0 px-1",
+              variant: "outline-secondary",
+              title: "Add to list",
+              disabled: isStale,
+              onClick: () => onObsSelect(dispatch, item, props.handleClose),
+              children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+                icon: faPlus
+              })
+            })]
+          })
+        }, item.matrix_index)
       }, item.matrix_index);
     }
   }));
@@ -175,21 +181,24 @@ export function DiseasesSearchResults(props) {
     overscan: 250,
     estimateSize: () => 32,
     itemRenderer: _ref4 => {
-      var _item$id;
+      var _item$id, _item$id2;
       let {
         item,
         setSelectedResult,
         selectedResult
       } = _ref4;
-      return /*#__PURE__*/_jsx(ListGroup.Item, {
-        onClick: () => setSelectedResult(item),
-        active: (selectedResult === null || selectedResult === void 0 ? void 0 : selectedResult.id) === item.id,
-        children: /*#__PURE__*/_jsx("div", {
-          className: "d-flex justify-content-between align-items-center w-100",
+      return /*#__PURE__*/_jsx("div", {
+        className: "virtualized-list-wrapper",
+        children: /*#__PURE__*/_jsx(ListGroup.Item, {
+          onClick: () => setSelectedResult(item),
+          active: (selectedResult === null || selectedResult === void 0 ? void 0 : selectedResult.id) === item.id,
           children: /*#__PURE__*/_jsx("div", {
-            children: item.disease_name
+            className: "d-flex justify-content-between align-items-center w-100",
+            children: /*#__PURE__*/_jsx("div", {
+              children: item.disease_name
+            })
           })
-        })
+        }, (_item$id2 = item.id) !== null && _item$id2 !== void 0 ? _item$id2 : item.name)
       }, (_item$id = item.id) !== null && _item$id !== void 0 ? _item$id : item.name);
     }
   }));

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

@@ -1,16 +1,19 @@
 import { faList, faSearch, faSliders } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Container, Nav, Navbar } from 'react-bootstrap';
+import { Container, Nav, Navbar, Button, ButtonGroup } from 'react-bootstrap';
+import usePlotVisibility from '../../utils/usePlotVisibility';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const Toolbar = _ref => {
   let {
-    showObsBtn = true,
-    showVarsBtn = true,
-    showCtrlsBtn = true,
-    setShowObs,
-    setShowVars,
-    setShowControls
+    setShowCategories,
+    setShowSearch,
+    setShowControls,
+    Fullscreen
   } = _ref;
+  const {
+    showCategoriesBtn,
+    showSearchBtn
+  } = usePlotVisibility(isFullscreen);
   return /*#__PURE__*/_jsx(Navbar, {
     expand: "md",
     bg: "primary",
@@ -24,25 +27,25 @@ export const Toolbar = _ref => {
         id: "navbarScroll",
         children: /*#__PURE__*/_jsxs(Nav, {
           navbarScroll: true,
-          children: [showObsBtn && /*#__PURE__*/_jsx(Nav.Item, {
+          children: [showCategoriesBtn && /*#__PURE__*/_jsx(Nav.Item, {
             className: "me-2",
             children: /*#__PURE__*/_jsxs(Nav.Link, {
-              onClick: () => setShowObs(true),
+              onClick: () => setShowCategories(true),
               children: [/*#__PURE__*/_jsx(FontAwesomeIcon, {
                 icon: faList,
                 className: "me-2"
               }), "Explore Categories"]
             })
-          }), showVarsBtn && /*#__PURE__*/_jsx(Nav.Item, {
+          }), showSearchBtn && /*#__PURE__*/_jsx(Nav.Item, {
             className: "me-2",
             children: /*#__PURE__*/_jsxs(Nav.Link, {
-              onClick: () => setShowVars(true),
+              onClick: () => setShowSearch(true),
               children: [/*#__PURE__*/_jsx(FontAwesomeIcon, {
                 icon: faSearch,
                 className: "me-2"
               }), "Search Genes"]
             })
-          }), showCtrlsBtn && /*#__PURE__*/_jsx(Nav.Item, {
+          }), /*#__PURE__*/_jsx(Nav.Item, {
             className: "me-2",
             children: /*#__PURE__*/_jsxs(Nav.Link, {
               onClick: () => setShowControls(true),
@@ -51,44 +54,46 @@ export const Toolbar = _ref => {
                 className: "me-2"
               }), "Controls"]
             })
-          })]
+          }), ' ']
         })
       })]
     })
   });
 };
-export const ObsPlotlyToolbar = _ref2 => {
+export const PlotlyToolbar = _ref2 => {
   let {
-    onClick
+    setShowCategories,
+    setShowSearch,
+    isFullscreen
   } = _ref2;
-  return {
-    name: 'Categories',
-    icon: {
-      width: 512,
-      height: 512,
-      path: faList.icon[4]
-    },
-    click: onClick
-  };
+  const {
+    showCategoriesBtn,
+    showSearchBtn
+  } = usePlotVisibility(isFullscreen);
+  return /*#__PURE__*/_jsxs(ButtonGroup, {
+    children: [showCategoriesBtn && /*#__PURE__*/_jsxs(Button, {
+      variant: "primary",
+      onClick: () => setShowCategories(true),
+      title: "Explore Categories",
+      children: [/*#__PURE__*/_jsx(FontAwesomeIcon, {
+        icon: faList,
+        className: "me-1"
+      }), "Categories"]
+    }), showSearchBtn && /*#__PURE__*/_jsxs(Button, {
+      variant: "primary",
+      onClick: () => setShowSearch(true),
+      title: "Search Genes",
+      children: [/*#__PURE__*/_jsx(FontAwesomeIcon, {
+        icon: faSearch,
+        className: "me-1"
+      }), "Genes"]
+    })]
+  });
 };
-export const VarPlotlyToolbar = _ref3 => {
+export const PlotlyModebarControls = _ref3 => {
   let {
     onClick
   } = _ref3;
-  return {
-    name: 'Features',
-    icon: {
-      width: 512,
-      height: 512,
-      path: faSearch.icon[4]
-    },
-    click: onClick
-  };
-};
-export const ControlsPlotlyToolbar = _ref4 => {
-  let {
-    onClick
-  } = _ref4;
   return {
     name: 'Controls',
     icon: {

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

@@ -96,21 +96,27 @@ export function VarNamesList(_ref) {
     }
   }, [settings.varSort.var.sort, settings.varSort.var.sortOrder, varMeans.isPending, varMeans.serverError, varMeans.fetchedData, settingsVars]);
   const makeListItem = item => {
-    return /*#__PURE__*/_jsx(ListGroup.Item, {
-      children: /*#__PURE__*/_jsx(VarItem, {
-        item: item,
-        active: active,
-        mode: mode
-      })
+    return /*#__PURE__*/_jsx("div", {
+      className: "virtualized-list-wrapper",
+      children: /*#__PURE__*/_jsx(ListGroup.Item, {
+        children: /*#__PURE__*/_jsx(VarItem, {
+          item: item,
+          active: active,
+          mode: mode
+        })
+      }, item.matrix_index)
     }, item.matrix_index);
   };
   const makeSetListItem = set => {
-    return /*#__PURE__*/_jsx(ListGroup.Item, {
-      children: /*#__PURE__*/_jsx(VarSet, {
-        set: set,
-        active: active,
-        mode: mode
-      })
+    return /*#__PURE__*/_jsx("div", {
+      className: "virtualized-list-wrapper",
+      children: /*#__PURE__*/_jsx(ListGroup.Item, {
+        children: /*#__PURE__*/_jsx(VarSet, {
+          set: set,
+          active: active,
+          mode: mode
+        })
+      }, set.name)
     }, set.name);
   };
   const varList = _.map(sortedVars, item => {

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

@@ -3,10 +3,10 @@ import { faCheck, faChevronDown, faChevronUp, faCircleInfo, faDroplet, faPlus, f
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 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 { useSettings, useSettingsDispatch } from '../../context/SettingsContext';
 import { SearchModal } from '../search-bar/SearchBar';
-import { SelectionItem } from './VarItem';
 
 // @TODO: add button to score genes and plot
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";

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

@@ -17,20 +17,19 @@ import { LoadingSpinner } from '../../utils/LoadingIndicators';
 import { useDebouncedFetch } from '../../utils/requests';
 import { useSelectedMultiVar, useSelectedObs, useSelectedVar } from '../../utils/Resolver';
 import { StyledTooltip } from '../../utils/StyledTooltip';
-import { PlotAlert } from '../full-page/PlotAlert';
-import { ControlsPlotlyToolbar, ObsPlotlyToolbar, VarPlotlyToolbar } from '../toolbar/Toolbar';
+import usePlotVisibility from '../../utils/usePlotVisibility';
+import { PlotAlert } from '../plot/PlotAlert';
+import { PlotlyToolbar, PlotlyModebarControls } from '../toolbar/Toolbar';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export function Violin(_ref) {
   let {
     mode = VIOLIN_MODES.MULTIKEY,
-    showObsBtn = false,
-    showVarsBtn = false,
-    showCtrlsBtn = false,
-    setShowObs,
-    setShowVars,
+    setShowCategories,
+    setShowSearch,
     setShowControls,
     plotType,
-    setPlotType
+    setPlotType,
+    isFullscreen = false
   } = _ref;
   const ENDPOINT = 'violin';
   const dataset = useDataset();
@@ -45,6 +44,10 @@ export function Violin(_ref) {
   const selectedMultiVar = useSelectedMultiVar();
   const selectedVar = useSelectedVar();
   const selectedObs = useSelectedObs();
+  const {
+    showCategoriesBtn,
+    showSearchBtn
+  } = usePlotVisibility(isFullscreen);
   const params = useMemo(() => {
     var _selectedObs$omit;
     return _objectSpread({
@@ -104,19 +107,21 @@ export function Violin(_ref) {
       setLayout({});
     }
   }, [fetchedData, hasSelections, isPending, serverError]);
-  const customModeBarButtons = _.compact([showObsBtn && ObsPlotlyToolbar({
-    onClick: setShowObs
-  }), showVarsBtn && VarPlotlyToolbar({
-    onClick: setShowVars
-  }), showCtrlsBtn && ControlsPlotlyToolbar({
+  const modeBarButtons = [_.compact([PlotlyModebarControls({
     onClick: setShowControls
-  })]);
-  const modeBarButtons = customModeBarButtons.length ? [customModeBarButtons, PLOTLY_MODEBAR_BUTTONS] : [PLOTLY_MODEBAR_BUTTONS];
+  }), ...PLOTLY_MODEBAR_BUTTONS])];
   if (!serverError) {
     if (hasSelections) {
       return /*#__PURE__*/_jsxs("div", {
         className: "cherita-plot cherita-violin",
-        children: [isPending && /*#__PURE__*/_jsx(LoadingSpinner, {}), /*#__PURE__*/_jsxs("div", {
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "plotly-toolbar",
+          children: /*#__PURE__*/_jsx(PlotlyToolbar, {
+            setShowCategories: setShowCategories,
+            setShowSearch: setShowSearch,
+            isFullscreen: isFullscreen
+          })
+        }), isPending && /*#__PURE__*/_jsx(LoadingSpinner, {}), /*#__PURE__*/_jsxs("div", {
           className: "d-flex flex-column h-100",
           children: [/*#__PURE__*/_jsx("div", {
             className: "flex-grow-1 position-relative",
@@ -167,23 +172,23 @@ export function Violin(_ref) {
       setPlotType: setPlotType,
       children: [mode === VIOLIN_MODES.MULTIKEY && /*#__PURE__*/_jsxs("p", {
         className: "p-0 m-0",
-        children: ["Select one or more", ' ', showVarsBtn ? /*#__PURE__*/_jsx(Button, {
+        children: ["Select one or more", ' ', showSearchBtn ? /*#__PURE__*/_jsx(Button, {
           variant: "link",
           className: "border-0 p-0 align-baseline",
-          onClick: setShowVars,
+          onClick: setShowSearch,
           children: "features"
         }) : 'features', ' ', "to display their expression distributions across all observations."]
       }), mode === VIOLIN_MODES.GROUPBY && /*#__PURE__*/_jsxs("p", {
         className: "p-0 m-0",
-        children: ["Select a", ' ', showObsBtn ? /*#__PURE__*/_jsx(Button, {
+        children: ["Select a", ' ', showCategoriesBtn ? /*#__PURE__*/_jsx(Button, {
           variant: "link",
           className: "border-0 p-0 align-baseline",
-          onClick: setShowObs,
+          onClick: setShowCategories,
           children: "category"
-        }) : 'category', ' ', "to group observations, and choose a", ' ', showVarsBtn ? /*#__PURE__*/_jsx(Button, {
+        }) : 'category', ' ', "to group observations, and choose a", ' ', showSearchBtn ? /*#__PURE__*/_jsx(Button, {
           variant: "link",
           className: "border-0 p-0 align-baseline",
-          onClick: setShowVars,
+          onClick: setShowSearch,
           children: "feature"
         }) : 'feature', ' ', "to view its distribution within each group."]
       })]

package/dist/esm/context/DatasetContext.js

@@ -51,7 +51,7 @@ const persistOptions = {
       return false;
     }
   },
-  buster: "1.5.0" || '0.0.0'
+  buster: "2.0.0" || '0.0.0'
   // @TODO: add maxAge and api version numbers as buster
 };
 const initialDataset = {
@@ -64,7 +64,15 @@ const initialDataset = {
   defaultSettings: {},
   canOverrideSettings: true,
   useUnsColors: false,
-  isPseudospatial: false
+  isPseudospatial: false,
+  obsExplorer: {
+    obsCols: [],
+    symbolCol: null,
+    // obs col with gene symbols to query NCBI for additional info in ObsExplorer
+    dataUrl: null,
+    // for additional data in a remote .parquet file
+    dataFilterCols: null // map of obs cols to filter data in .parquet file
+  }
 };
 export function DatasetProvider(_ref2) {
   let {

package/dist/esm/context/SettingsContext.js

@@ -16,7 +16,6 @@ export const SettingsDispatchContext = /*#__PURE__*/createContext(null);
 const initialSettings = {
   selectedObs: null,
   // { name: "obs_name", omit: ["obs_item"], bins: {} }
-  selectedObsIndex: null,
   selectedVar: null,
   // { name: "var_name", isSet: false } or { name: "var_set_name", isSet: true, vars: [{ name: "var1" }, { name: "var2" }] }
   selectedObsm: null,
@@ -49,7 +48,8 @@ const initialSettings = {
       violinplot: VIOLINPLOT_SCALES.WIDTH.value
     },
     meanOnlyExpressed: false,
-    expressionCutoff: 0.0
+    expressionCutoff: 0.0,
+    radiusScale: {}
   },
   varSort: {
     var: {
@@ -70,6 +70,8 @@ const initialSettings = {
       opacity: 1
     }
   },
+  // for obsExplorer
+  selectedObsIndex: null,
   // dataset resolved values
   data: {
     // store resolved obs and vars from selectedObs, selectedVar, selectedMultiVar, vars, labelObs
@@ -164,7 +166,7 @@ export function SettingsProvider(_ref2) {
 
   // If the buster is not set or does not match the current package version,
   // reset localSettings to avoid stale data
-  if (!buster || buster !== "1.5.0") {
+  if (!buster || buster !== "2.0.0") {
     localSettings = {};
   }
   const initSettings = useRef(initializer({
@@ -189,7 +191,7 @@ export function SettingsProvider(_ref2) {
     if (canOverrideSettings && settings) {
       try {
         localStorage.setItem(DATASET_STORAGE_KEY, JSON.stringify(_objectSpread({
-          buster: "1.5.0" || '0.0.0',
+          buster: "2.0.0" || '0.0.0',
           timestamp: Date.now()
         }, _.omit(settings, 'data'))));
       } catch (err) {
@@ -219,7 +221,9 @@ const OBS_DATA_KEYS = ['name', 'type',
 // categorical and numerical
 'codes', 'codesMap', 'values', 'n_values', 'value_counts',
 // numerical
-'bins', 'min', 'max', 'mean', 'median', 'n_unique'];
+'bins', 'min', 'max', 'mean', 'median', 'n_unique',
+// optional custom colors
+'colors'];
 const splitObs = obs => {
   if (!obs) return {
     settings: null,
@@ -590,6 +594,16 @@ function settingsReducer(settings, action) {
           })
         });
       }
+    case 'set.controls.radiusScale':
+      {
+        return _objectSpread(_objectSpread({}, settings), {}, {
+          controls: _objectSpread(_objectSpread({}, settings.controls), {}, {
+            radiusScale: _objectSpread(_objectSpread({}, settings.controls.radiusScale), {}, {
+              [action.obsm]: action.radiusScale
+            })
+          })
+        });
+      }
     case 'toggle.slice.obs':
       {
         if (settings.selectedObs && settings.selectedObs.name === action.obs.name) {