@haniffalab/cherita-react 1.3.0 → 1.4.0-dev.2025-06-09.09fbcbf5

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

@@ -15,6 +15,7 @@ import { Alert } from "react-bootstrap";
 import { SpatialControls } from "./SpatialControls";
 import { Toolbox } from "./Toolbox";
 import { COLOR_ENCODINGS, OBS_TYPES, SELECTED_POLYGON_FILLCOLOR, UNSELECTED_POLYGON_FILLCOLOR } from "../../constants/constants";
+import { useDataset } from "../../context/DatasetContext";
 import { useFilteredData } from "../../context/FilterContext";
 import { useSettings, useSettingsDispatch } from "../../context/SettingsContext";
 import { useZarrData } from "../../context/ZarrDataContext";
@@ -34,13 +35,16 @@ const INITIAL_VIEW_STATE = {
   bearing: 0
 };
 export function Scatterplot(_ref) {
-  var _settings$selectedObs3, _features$features2, _obsmData$serverError, _xData$serverError, _obsData$serverError, _labelObsData$serverE, _settings$selectedVar, _settings$selectedObs4, _obsmData$data;
+  var _settings$selectedObs2, _settings$selectedObs5, _settings$selectedObs8, _features$features2, _obsmData$serverError, _xData$serverError, _obsData$serverError, _labelObsData$serverE, _settings$selectedVar, _settings$selectedObs9, _data$positions;
   let {
-    radius = 30,
+    radius = null,
     setShowObs,
     setShowVars,
     isFullscreen = false
   } = _ref;
+  const {
+    useUnsColors
+  } = useDataset();
   const settings = useSettings();
   const {
     obsIndices,
@@ -55,12 +59,13 @@ export function Scatterplot(_ref) {
   const deckRef = useRef(null);
   const [viewState, setViewState] = useState(INITIAL_VIEW_STATE);
   const [isRendering, setIsRendering] = useState(true);
+  const [radiusScale, setRadiusScale] = useState(radius || 1);
+  const [isPending, setIsPending] = useState(false);
   const [data, setData] = useState({
-    ids: [],
     positions: [],
-    values: [],
-    sliceValues: []
+    values: []
   });
+  const [coordsError, setCoordsError] = useState(null);
 
   // EditableGeoJsonLayer
   const [mode, setMode] = useState(() => ViewMode);
@@ -77,24 +82,62 @@ export function Scatterplot(_ref) {
   const labelObsData = useLabelObsData();
   // @TODO: assert length of obsmData, xData, obsData is equal
 
+  const getRadiusScale = useCallback(bounds => {
+    if (!!radius) return radius;
+    // From 28 degrees ~= 30km -> 30m radius
+    const lonDim = bounds[1][0] - bounds[0][0];
+    const latDim = bounds[1][1] - bounds[0][1];
+    const minDim = Math.min(lonDim, latDim);
+    const rs = 0.01 / minDim * 111111;
+    return rs;
+  }, [radius]);
   useEffect(() => {
-    if (!obsmData.isPending && !obsmData.serverError) {
-      var _deckRef$current, _deckRef$current2;
-      setIsRendering(true);
+    if (obsmData.isPending || settings.colorEncoding === COLOR_ENCODINGS.VAR && xData.isPending || settings.colorEncoding === COLOR_ENCODINGS.OBS && obsData.isPending) {
+      setIsPending(true);
+    } else {
+      setIsPending(false);
       setData(d => {
-        return _objectSpread(_objectSpread({}, d), {}, {
-          positions: obsmData.data
-        });
+        let values = d.values;
+        if (settings.colorEncoding === COLOR_ENCODINGS.VAR) {
+          values = !xData.serverError ? xData.data : values;
+        } else if (settings.colorEncoding === COLOR_ENCODINGS.OBS) {
+          values = !obsData.serverError ? obsData.data : values;
+        }
+        if (!obsmData.serverError && obsmData.data) {
+          if (obsmData.data[0].length !== 2) {
+            setCoordsError("Invalid coordinates. Expected 2D coordinates");
+            return {
+              positions: [],
+              values: []
+            };
+          }
+          setCoordsError(null);
+          return {
+            positions: obsmData.data,
+            values: values
+          };
+        }
+        return {
+          positions: d.positions,
+          values: values
+        };
       });
+    }
+  }, [obsData.data, obsData.isPending, obsData.serverError, obsmData.data, obsmData.isPending, obsmData.serverError, settings.colorEncoding, xData.data, xData.isPending, xData.serverError]);
+  useEffect(() => {
+    if (data.positions && !!data.positions.length) {
+      var _deckRef$current, _deckRef$current2;
       const mapHelper = new MapHelper();
       const {
         latitude,
         longitude,
-        zoom
-      } = mapHelper.fitBounds(obsmData.data, {
+        zoom,
+        bounds
+      } = mapHelper.fitBounds(data.positions, {
         width: deckRef === null || deckRef === void 0 || (_deckRef$current = deckRef.current) === null || _deckRef$current === void 0 || (_deckRef$current = _deckRef$current.deck) === null || _deckRef$current === void 0 ? void 0 : _deckRef$current.width,
         height: deckRef === null || deckRef === void 0 || (_deckRef$current2 = deckRef.current) === null || _deckRef$current2 === void 0 || (_deckRef$current2 = _deckRef$current2.deck) === null || _deckRef$current2 === void 0 ? void 0 : _deckRef$current2.height
       });
+      setRadiusScale(getRadiusScale(bounds));
       setViewState(v => {
         return _objectSpread(_objectSpread({}, v), {}, {
           longitude: longitude,
@@ -102,15 +145,8 @@ export function Scatterplot(_ref) {
           zoom: zoom
         });
       });
-    } else if (!obsmData.isPending && obsmData.serverError) {
-      setIsRendering(true);
-      setData(d => {
-        return _objectSpread(_objectSpread({}, d), {}, {
-          positions: []
-        });
-      });
     }
-  }, [settings.selectedObsm, obsmData.data, obsmData.isPending, obsmData.serverError]);
+  }, [settings.selectedObsm, getRadiusScale, obsmData.data, obsmData.isPending, obsmData.serverError, data.positions]);
   const getBounds = useCallback(() => {
     var _deckRef$current3, _deckRef$current4;
     const {
@@ -127,65 +163,47 @@ export function Scatterplot(_ref) {
       zoom
     };
   }, [data.positions]);
-  useEffect(() => {
-    if (settings.colorEncoding === COLOR_ENCODINGS.VAR) {
-      setIsRendering(true);
-      if (!xData.isPending && !xData.serverError) {
-        // @TODO: add condition to check obs slicing
-        setData(d => {
-          return _objectSpread(_objectSpread({}, d), {}, {
-            values: xData.data
-          });
-        });
-      } else if (!xData.isPending && xData.serverError) {
-        setData(d => {
-          return _objectSpread(_objectSpread({}, d), {}, {
-            values: []
-          });
-        });
-      }
-    }
-  }, [settings.colorEncoding, xData.data, xData.isPending, xData.serverError, getColor]);
-  useEffect(() => {
-    if (settings.colorEncoding === COLOR_ENCODINGS.OBS) {
-      setIsRendering(true);
-      if (!obsData.isPending && !obsData.serverError) {
-        setData(d => {
-          return _objectSpread(_objectSpread({}, d), {}, {
-            values: obsData.data
-          });
-        });
-      } else if (!obsData.isPending && obsData.serverError) {
-        setData(d => {
-          return _objectSpread(_objectSpread({}, d), {}, {
-            values: []
-          });
-        });
-      }
-    } else if (settings.colorEncoding === COLOR_ENCODINGS.VAR && settings.sliceBy.obs) {
-      if (!obsData.isPending && !obsData.serverError) {
-        setData(d => {
-          return _objectSpread(_objectSpread({}, d), {}, {
-            sliceValues: obsData.data
-          });
-        });
-      } else if (!obsData.isPending && obsData.serverError) {
-        setData(d => {
-          return _objectSpread(_objectSpread({}, d), {}, {
-            sliceValues: []
-          });
-        });
-      }
+
+  // Make stable references for getOriginalIndex and sortedIndexMap
+  const identityGetOriginalIndex = useCallback(i => i, []);
+  const identitySortedIndexMap = useMemo(() => ({
+    get: key => key
+  }), []);
+  const {
+    sortedData,
+    getOriginalIndex,
+    sortedIndexMap
+  } = useMemo(() => {
+    var _settings$selectedObs;
+    if ((settings.colorEncoding === COLOR_ENCODINGS.VAR || settings.colorEncoding === COLOR_ENCODINGS.OBS && ((_settings$selectedObs = settings.selectedObs) === null || _settings$selectedObs === void 0 ? void 0 : _settings$selectedObs.type) === OBS_TYPES.CONTINUOUS) && data.positions && data.values && data.positions.length === data.values.length) {
+      const sortedIndices = _.map(data.values, (_v, i) => i).sort((a, b) => data.values[a] - data.values[b]);
+      const sortedIndexMap = new Map(_.map(sortedIndices, (originalIndex, sortedIndex) => [originalIndex, sortedIndex]));
+      return {
+        sortedData: _.mapValues(data, (v, _k) => {
+          return v ? _.at(v, sortedIndices) : v;
+        }),
+        getOriginalIndex: i => sortedIndices[i],
+        sortedIndexMap: sortedIndexMap
+      };
     }
-  }, [settings.colorEncoding, obsData.data, obsData.isPending, obsData.serverError, settings.sliceBy.obs]);
+    return {
+      sortedData: data,
+      getOriginalIndex: identityGetOriginalIndex,
+      // return original index
+      sortedIndexMap: identitySortedIndexMap // return original index
+    };
+  }, [data, identityGetOriginalIndex, identitySortedIndexMap, settings.colorEncoding, (_settings$selectedObs2 = settings.selectedObs) === null || _settings$selectedObs2 === void 0 ? void 0 : _settings$selectedObs2.type]);
+  const sortedObsIndices = useMemo(() => {
+    return obsIndices ? new Set(Array.from(obsIndices, i => sortedIndexMap.get(i))) : obsIndices;
+  }, [obsIndices, sortedIndexMap]);
   const isCategorical = useMemo(() => {
     if (settings.colorEncoding === COLOR_ENCODINGS.OBS) {
-      var _settings$selectedObs, _settings$selectedObs2;
-      return ((_settings$selectedObs = settings.selectedObs) === null || _settings$selectedObs === void 0 ? void 0 : _settings$selectedObs.type) === OBS_TYPES.CATEGORICAL || ((_settings$selectedObs2 = settings.selectedObs) === null || _settings$selectedObs2 === void 0 ? void 0 : _settings$selectedObs2.type) === OBS_TYPES.BOOLEAN;
+      var _settings$selectedObs3, _settings$selectedObs4;
+      return ((_settings$selectedObs3 = settings.selectedObs) === null || _settings$selectedObs3 === void 0 ? void 0 : _settings$selectedObs3.type) === OBS_TYPES.CATEGORICAL || ((_settings$selectedObs4 = settings.selectedObs) === null || _settings$selectedObs4 === void 0 ? void 0 : _settings$selectedObs4.type) === OBS_TYPES.BOOLEAN;
     } else {
       return false;
     }
-  }, [settings.colorEncoding, (_settings$selectedObs3 = settings.selectedObs) === null || _settings$selectedObs3 === void 0 ? void 0 : _settings$selectedObs3.type]);
+  }, [settings.colorEncoding, (_settings$selectedObs5 = settings.selectedObs) === null || _settings$selectedObs5 === void 0 ? void 0 : _settings$selectedObs5.type]);
   useEffect(() => {
     dispatch({
       type: "set.controls.valueRange",
@@ -200,31 +218,34 @@ export function Scatterplot(_ref) {
     max: settings.controls.range[1] * (valueMax - valueMin) + valueMin
   };
   const getFillColor = useCallback((_d, _ref2) => {
+    var _settings$selectedObs6, _settings$selectedObs7;
     let {
       index
     } = _ref2;
-    const grayOut = obsIndices && !obsIndices.has(index);
-    return getColor({
-      value: (data.values[index] - min) / (max - min),
+    const grayOut = isPending || sortedObsIndices && !sortedObsIndices.has(index);
+    return getColor(_objectSpread({
+      value: (sortedData.values[index] - min) / (max - min),
       categorical: isCategorical,
       grayOut: grayOut
-    }) || [0, 0, 0, 100];
-  }, [data.values, obsIndices, getColor, isCategorical, max, min]);
+    }, useUnsColors && settings.colorEncoding === COLOR_ENCODINGS.OBS && (_settings$selectedObs6 = settings.selectedObs) !== null && _settings$selectedObs6 !== void 0 && _settings$selectedObs6.colors ? {
+      colorscale: (_settings$selectedObs7 = settings.selectedObs) === null || _settings$selectedObs7 === void 0 ? void 0 : _settings$selectedObs7.colors
+    } : {})) || [0, 0, 0, 100];
+  }, [isPending, sortedObsIndices, getColor, sortedData.values, min, max, isCategorical, useUnsColors, settings.colorEncoding, (_settings$selectedObs8 = settings.selectedObs) === null || _settings$selectedObs8 === void 0 ? void 0 : _settings$selectedObs8.colors]);
 
   // @TODO: add support for pseudospatial hover to reflect in radius
   const getRadius = useCallback((_d, _ref3) => {
     let {
       index
     } = _ref3;
-    const grayOut = obsIndices && !obsIndices.has(index);
+    const grayOut = sortedObsIndices && !sortedObsIndices.has(index);
     return grayOut ? 1 : 3;
-  }, [obsIndices]);
+  }, [sortedObsIndices]);
   const memoizedLayers = useMemo(() => {
     return [new ScatterplotLayer({
       id: "cherita-layer-scatterplot",
       pickable: true,
-      data: data.positions,
-      radiusScale: radius,
+      data: sortedData.positions,
+      radiusScale: radiusScale,
       radiusMinPixels: 1,
       getPosition: d => d,
       getFillColor: getFillColor,
@@ -267,7 +288,7 @@ export function Scatterplot(_ref) {
         }
       }
     })];
-  }, [data.positions, features, getFillColor, getRadius, mode, radius, selectedFeatureIndexes]);
+  }, [sortedData.positions, features, getFillColor, getRadius, mode, radiusScale, selectedFeatureIndexes]);
   const layers = useDeferredValue(mode === ViewMode ? memoizedLayers.reverse() : memoizedLayers); // draw scatterplot on top of polygons when in ViewMode
 
   useEffect(() => {
@@ -310,21 +331,21 @@ export function Scatterplot(_ref) {
     if (settings.colorEncoding === COLOR_ENCODINGS.OBS && settings.selectedObs && !_.some(settings.labelObs, {
       name: settings.selectedObs.name
     })) {
-      var _obsData$data;
-      text.push(getLabel(settings.selectedObs, (_obsData$data = obsData.data) === null || _obsData$data === void 0 ? void 0 : _obsData$data[index]));
+      var _data$values;
+      text.push(getLabel(settings.selectedObs, (_data$values = data.values) === null || _data$values === void 0 ? void 0 : _data$values[getOriginalIndex(index)]));
     }
     if (settings.colorEncoding === COLOR_ENCODINGS.VAR && settings.selectedVar) {
-      var _xData$data;
-      text.push(getLabel(settings.selectedVar, (_xData$data = xData.data) === null || _xData$data === void 0 ? void 0 : _xData$data[index], true));
+      var _data$values2;
+      text.push(getLabel(settings.selectedVar, (_data$values2 = data.values) === null || _data$values2 === void 0 ? void 0 : _data$values2[getOriginalIndex(index)], true));
     }
     if (settings.labelObs.length) {
       text.push(..._.map(labelObsData.data, (v, k) => {
         const labelObs = _.find(settings.labelObs, o => o.name === k);
-        return getLabel(labelObs, v[index]);
+        return getLabel(labelObs, v[getOriginalIndex(index)]);
       }));
     }
     if (!text.length) return;
-    const grayOut = obsIndices && !obsIndices.has(index);
+    const grayOut = sortedObsIndices && !sortedObsIndices.has(index);
     return {
       text: text.length ? _.compact(text).join("\n") : null,
       className: grayOut ? "tooltip-grayout" : "deck-tooltip",
@@ -337,8 +358,7 @@ export function Scatterplot(_ref) {
       }
     };
   };
-  const isPending = (isRendering || xData.isPending || obsmData.isPending) && !obsmData.isPending;
-  const error = settings.selectedObsm && ((_obsmData$serverError = obsmData.serverError) === null || _obsmData$serverError === void 0 ? void 0 : _obsmData$serverError.length) || settings.colorEncoding === COLOR_ENCODINGS.VAR && ((_xData$serverError = xData.serverError) === null || _xData$serverError === void 0 ? void 0 : _xData$serverError.length) || settings.colorEncoding === COLOR_ENCODINGS.OBS && ((_obsData$serverError = obsData.serverError) === null || _obsData$serverError === void 0 ? void 0 : _obsData$serverError.length) || settings.labelObs.lengh && ((_labelObsData$serverE = labelObsData.serverError) === null || _labelObsData$serverE === void 0 ? void 0 : _labelObsData$serverE.length);
+  const error = settings.selectedObsm && ((_obsmData$serverError = obsmData.serverError) === null || _obsmData$serverError === void 0 ? void 0 : _obsmData$serverError.length) || settings.colorEncoding === COLOR_ENCODINGS.VAR && ((_xData$serverError = xData.serverError) === null || _xData$serverError === void 0 ? void 0 : _xData$serverError.length) || settings.colorEncoding === COLOR_ENCODINGS.OBS && ((_obsData$serverError = obsData.serverError) === null || _obsData$serverError === void 0 ? void 0 : _obsData$serverError.length) || settings.labelObs.length && ((_labelObsData$serverE = labelObsData.serverError) === null || _labelObsData$serverE === void 0 ? void 0 : _labelObsData$serverE.length) || coordsError;
   return /*#__PURE__*/React.createElement("div", {
     className: "cherita-container-scatterplot"
   }, /*#__PURE__*/React.createElement("div", {
@@ -385,13 +405,13 @@ export function Scatterplot(_ref) {
     className: "cherita-spatial-footer"
   }, /*#__PURE__*/React.createElement("div", {
     className: "cherita-toolbox-footer"
-  }, error && !isPending && /*#__PURE__*/React.createElement(Alert, {
+  }, !!error && !isRendering && /*#__PURE__*/React.createElement(Alert, {
     variant: "danger"
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faTriangleExclamation
   }), "\xA0Error loading data"), /*#__PURE__*/React.createElement(Toolbox, {
-    mode: settings.colorEncoding === COLOR_ENCODINGS.VAR ? (_settings$selectedVar = settings.selectedVar) === null || _settings$selectedVar === void 0 ? void 0 : _settings$selectedVar.name : settings.colorEncoding === COLOR_ENCODINGS.OBS ? (_settings$selectedObs4 = settings.selectedObs) === null || _settings$selectedObs4 === void 0 ? void 0 : _settings$selectedObs4.name : null,
-    obsLength: parseInt((_obsmData$data = obsmData.data) === null || _obsmData$data === void 0 ? void 0 : _obsmData$data.length),
+    mode: settings.colorEncoding === COLOR_ENCODINGS.VAR ? (_settings$selectedVar = settings.selectedVar) === null || _settings$selectedVar === void 0 ? void 0 : _settings$selectedVar.name : settings.colorEncoding === COLOR_ENCODINGS.OBS ? (_settings$selectedObs9 = settings.selectedObs) === null || _settings$selectedObs9 === void 0 ? void 0 : _settings$selectedObs9.name : null,
+    obsLength: parseInt((_data$positions = data.positions) === null || _data$positions === void 0 ? void 0 : _data$positions.length),
     slicedLength: parseInt(slicedLength)
   })), /*#__PURE__*/React.createElement(Legend, {
     isCategorical: isCategorical,

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

@@ -8,9 +8,9 @@ import { OverlayTrigger, Tooltip } from "react-bootstrap";
 import Button from "react-bootstrap/Button";
 import ButtonGroup from "react-bootstrap/ButtonGroup";
 import Dropdown from "react-bootstrap/Dropdown";
-import { useDataset } from "../../context/DatasetContext";
 import { OffcanvasControls } from "../offcanvas";
 import { ScatterplotControls } from "./ScatterplotControls";
+import { BREAKPOINTS } from "../../constants/constants";
 import { useSettings, useSettingsDispatch } from "../../context/SettingsContext";
 export function SpatialControls(_ref) {
   var _features$features;
@@ -32,8 +32,8 @@ export function SpatialControls(_ref) {
   const [showControls, setShowControls] = useState(false);
   const handleCloseControls = () => setShowControls(false);
   const handleShowControls = () => setShowControls(true);
-  const LgBreakpoint = useMediaQuery("(max-width: 991.98px)");
-  const XlBreakpoint = useMediaQuery("(max-width: 1199.98px)");
+  const LgBreakpoint = useMediaQuery(BREAKPOINTS.LG);
+  const XlBreakpoint = useMediaQuery(BREAKPOINTS.XL);
   const showObsBtn = isFullscreen ? LgBreakpoint : true;
   const showVarsBtn = isFullscreen ? XlBreakpoint : true;
   const onSelect = (eventKey, event) => {

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

@@ -13,6 +13,7 @@ import { useDataset } from "../../context/DatasetContext";
 import { useSettings, useSettingsDispatch } from "../../context/SettingsContext";
 import { useFetch } from "../../utils/requests";
 import { VarDiseaseInfo } from "../var-list/VarItem";
+import { sortMeans, useVarMean } from "../var-list/VarList";
 export function VarInfo(_ref) {
   let {
     varItem
@@ -43,39 +44,6 @@ export function VarInfo(_ref) {
     data: fetchedData
   })));
 }
-const useVarMean = function (varKeys) {
-  let enabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  const ENDPOINT = "matrix/mean";
-  const dataset = useDataset();
-  const [params, setParams] = useState({
-    url: dataset.url,
-    varKeys: _.map(varKeys, v => v.isSet ? {
-      name: v.name,
-      indices: v.vars.map(v => v.index)
-    } : v.index),
-    // obsIndices:
-    varNamesCol: dataset.varNamesCol
-  });
-  useEffect(() => {
-    setParams(p => {
-      return _objectSpread(_objectSpread({}, p), {}, {
-        varKeys: _.map(varKeys, v => v.isSet ? {
-          name: v.name,
-          indices: v.vars.map(v => v.index)
-        } : v.index)
-      });
-    });
-  }, [varKeys]);
-  return useFetch(ENDPOINT, params, {
-    enabled: enabled,
-    refetchOnMount: false
-  });
-};
-
-// ensure nulls are lowest values
-const sortMeans = (i, means) => {
-  return means[i.name] || _.min(_.values(means)) - 1;
-};
 export function DiseaseInfo(_ref2) {
   let {
     disease,

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

@@ -0,0 +1,91 @@
+import React from "react";
+import { faList, faSearch, faSliders } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Container, Nav, Navbar } from "react-bootstrap";
+export const Toolbar = _ref => {
+  let {
+    showObsBtn = true,
+    showVarsBtn = true,
+    showCtrlsBtn = true,
+    setShowObs,
+    setShowVars,
+    setShowControls
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Navbar, {
+    expand: "md",
+    bg: "primary",
+    variant: "dark",
+    className: "cherita-navbar"
+  }, /*#__PURE__*/React.createElement(Container, {
+    fluid: true
+  }, /*#__PURE__*/React.createElement(Navbar.Toggle, {
+    "aria-controls": "navbarScroll"
+  }), /*#__PURE__*/React.createElement(Navbar.Collapse, {
+    id: "navbarScroll"
+  }, /*#__PURE__*/React.createElement(Nav, {
+    navbarScroll: true
+  }, showObsBtn && /*#__PURE__*/React.createElement(Nav.Item, {
+    className: "me-2"
+  }, /*#__PURE__*/React.createElement(Nav.Link, {
+    onClick: () => setShowObs(true)
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faList,
+    className: "me-2"
+  }), "Explore Categories")), showVarsBtn && /*#__PURE__*/React.createElement(Nav.Item, {
+    className: "me-2"
+  }, /*#__PURE__*/React.createElement(Nav.Link, {
+    onClick: () => setShowVars(true)
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faSearch,
+    className: "me-2"
+  }), "Search Genes")), showCtrlsBtn && /*#__PURE__*/React.createElement(Nav.Item, {
+    className: "me-2"
+  }, /*#__PURE__*/React.createElement(Nav.Link, {
+    onClick: () => setShowControls(true)
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faSliders,
+    className: "me-2"
+  }), "Controls"))))));
+};
+export const ObsPlotlyToolbar = _ref2 => {
+  let {
+    onClick
+  } = _ref2;
+  return {
+    name: "Categories",
+    icon: {
+      width: 512,
+      height: 512,
+      path: faList.icon[4]
+    },
+    click: onClick
+  };
+};
+export const VarPlotlyToolbar = _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: {
+      width: 512,
+      height: 512,
+      path: faSliders.icon[4]
+    },
+    click: onClick
+  };
+};

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

@@ -14,20 +14,24 @@ import { VarListToolbar } from "./VarListToolbar";
 import { VarSet } from "./VarSet";
 import { SELECTION_MODES, VAR_SORT } from "../../constants/constants";
 import { useDataset } from "../../context/DatasetContext";
+import { useFilteredData } from "../../context/FilterContext";
 import { useSettings, useSettingsDispatch } from "../../context/SettingsContext";
 import { LoadingSpinner } from "../../utils/LoadingIndicators";
 import { useFetch } from "../../utils/requests";
-const useVarMean = function (varKeys) {
+export const useVarMean = function (varKeys) {
   let enabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   const ENDPOINT = "matrix/mean";
   const dataset = useDataset();
+  const {
+    obsIndices
+  } = useFilteredData();
   const [params, setParams] = useState({
     url: dataset.url,
     varKeys: _.map(varKeys, v => v.isSet ? {
       name: v.name,
       indices: v.vars.map(v => v.index)
     } : v.index),
-    // obsIndices:
+    obsIndices: obsIndices,
     varNamesCol: dataset.varNamesCol
   });
   useEffect(() => {
@@ -36,10 +40,11 @@ const useVarMean = function (varKeys) {
         varKeys: _.map(varKeys, v => v.isSet ? {
           name: v.name,
           indices: v.vars.map(v => v.index)
-        } : v.index)
+        } : v.index),
+        obsIndices: obsIndices
       });
     });
-  }, [varKeys]);
+  }, [obsIndices, varKeys]);
   return useFetch(ENDPOINT, params, {
     enabled: enabled,
     refetchOnMount: false
@@ -47,7 +52,7 @@ const useVarMean = function (varKeys) {
 };
 
 // ensure nulls are lowest values
-const sortMeans = (i, means) => {
+export const sortMeans = (i, means) => {
   return means[i.name] || _.min(_.values(means)) - 1;
 };
 export function VarNamesList(_ref) {

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

@@ -7,18 +7,25 @@ import React, { useEffect, useState } from "react";
 import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import _ from "lodash";
-import { Alert, OverlayTrigger, Tooltip } from "react-bootstrap";
+import { Alert, Button, OverlayTrigger, Tooltip } from "react-bootstrap";
 import Plot from "react-plotly.js";
-import { VIOLIN_MODES } from "../../constants/constants";
+import { PLOTLY_MODEBAR_BUTTONS, VIOLIN_MODES } from "../../constants/constants";
 import { useDataset } from "../../context/DatasetContext";
 import { useFilteredData } from "../../context/FilterContext";
 import { useSettings } from "../../context/SettingsContext";
 import { LoadingSpinner } from "../../utils/LoadingIndicators";
 import { useDebouncedFetch } from "../../utils/requests";
+import { ControlsPlotlyToolbar, ObsPlotlyToolbar, VarPlotlyToolbar } from "../toolbar/Toolbar";
 export function Violin(_ref) {
   var _settings$selectedVar, _settings$selectedVar2, _settings$selectedVar3, _settings$selectedVar4, _settings$selectedObs, _settings$selectedObs2, _settings$selectedObs3;
   let {
-    mode = VIOLIN_MODES.MULTIKEY
+    mode = VIOLIN_MODES.MULTIKEY,
+    showObsBtn = false,
+    showVarsBtn = false,
+    showCtrlsBtn = false,
+    setShowObs,
+    setShowVars,
+    setShowControls
   } = _ref;
   const ENDPOINT = "violin";
   const dataset = useDataset();
@@ -117,17 +124,29 @@ export function Violin(_ref) {
       setLayout(fetchedData.layout);
     }
   }, [fetchedData, hasSelections, isPending, serverError]);
+  const customModeBarButtons = _.compact([showObsBtn && ObsPlotlyToolbar({
+    onClick: setShowObs
+  }), showVarsBtn && VarPlotlyToolbar({
+    onClick: setShowVars
+  }), showCtrlsBtn && ControlsPlotlyToolbar({
+    onClick: setShowControls
+  })]);
+  const modeBarButtons = customModeBarButtons.length ? [customModeBarButtons, PLOTLY_MODEBAR_BUTTONS] : [PLOTLY_MODEBAR_BUTTONS];
   if (!serverError) {
     if (hasSelections) {
       return /*#__PURE__*/React.createElement("div", {
-        className: "cherita-violin position-relative"
+        className: "cherita-plot cherita-violin position-relative"
       }, isPending && /*#__PURE__*/React.createElement(LoadingSpinner, null), /*#__PURE__*/React.createElement(Plot, {
         data: data,
         layout: layout,
         useResizeHandler: true,
         style: {
-          maxWidth: "100%",
-          maxHeight: "100%"
+          width: "100%",
+          height: "100%"
+        },
+        config: {
+          displaylogo: false,
+          modeBarButtons: modeBarButtons
         }
       }), (fetchedData === null || fetchedData === void 0 ? void 0 : fetchedData.resampled) && /*#__PURE__*/React.createElement(Alert, {
         variant: "warning"
@@ -142,9 +161,21 @@ export function Violin(_ref) {
       className: "cherita-violin"
     }, mode === VIOLIN_MODES.MULTIKEY && /*#__PURE__*/React.createElement(Alert, {
       variant: "light"
-    }, "Select features"), mode === VIOLIN_MODES.GROUPBY && /*#__PURE__*/React.createElement(Alert, {
+    }, "Select", " ", showVarsBtn ? /*#__PURE__*/React.createElement(Button, {
+      variant: "link",
+      className: "border-0 p-0 align-baseline",
+      onClick: setShowVars
+    }, "features") : "features"), mode === VIOLIN_MODES.GROUPBY && /*#__PURE__*/React.createElement(Alert, {
       variant: "light"
-    }, "Select categories and a feature"));
+    }, "Select", " ", showObsBtn ? /*#__PURE__*/React.createElement(Button, {
+      variant: "link",
+      className: "border-0 p-0 align-baseline",
+      onClick: setShowObs
+    }, "categories") : "categories", " ", "and a", " ", showVarsBtn ? /*#__PURE__*/React.createElement(Button, {
+      variant: "link",
+      className: "border-0 p-0 align-baseline",
+      onClick: setShowVars
+    }, "feature") : "feature"));
   } else {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Alert, {
       variant: "danger"

package/dist/esm/constants/constants.js

@@ -1,4 +1,11 @@
 export const LOCAL_STORAGE_KEY = "CHERITA";
+export const PLOT_TYPES = {
+  SCATTERPLOT: "scatterplot",
+  DOTPLOT: "dotplot",
+  HEATMAP: "heatmap",
+  MATRIXPLOT: "matrixplot",
+  VIOLINPLOT: "violinplot"
+};
 export const COLOR_ENCODINGS = {
   VAR: "var",
   OBS: "obs"
@@ -85,4 +92,9 @@ 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 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 BREAKPOINTS = {
+  LG: "(max-width: 991.98px)",
+  XL: "(max-width: 1199.98px)"
+};