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

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

@@ -16,6 +16,7 @@ var _reactBootstrap = require("react-bootstrap");
 var _SpatialControls = require("./SpatialControls");
 var _Toolbox = require("./Toolbox");
 var _constants = require("../../constants/constants");
+var _DatasetContext = require("../../context/DatasetContext");
 var _FilterContext = require("../../context/FilterContext");
 var _SettingsContext = require("../../context/SettingsContext");
 var _ZarrDataContext = require("../../context/ZarrDataContext");
@@ -42,13 +43,16 @@ const INITIAL_VIEW_STATE = {
   bearing: 0
 };
 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
+  } = (0, _DatasetContext.useDataset)();
   const settings = (0, _SettingsContext.useSettings)();
   const {
     obsIndices,
@@ -63,12 +67,13 @@ function Scatterplot(_ref) {
   const deckRef = (0, _react.useRef)(null);
   const [viewState, setViewState] = (0, _react.useState)(INITIAL_VIEW_STATE);
   const [isRendering, setIsRendering] = (0, _react.useState)(true);
+  const [radiusScale, setRadiusScale] = (0, _react.useState)(radius || 1);
+  const [isPending, setIsPending] = (0, _react.useState)(false);
   const [data, setData] = (0, _react.useState)({
-    ids: [],
     positions: [],
-    values: [],
-    sliceValues: []
+    values: []
   });
+  const [coordsError, setCoordsError] = (0, _react.useState)(null);
 
   // EditableGeoJsonLayer
   const [mode, setMode] = (0, _react.useState)(() => _editModes.ViewMode);
@@ -85,24 +90,62 @@ function Scatterplot(_ref) {
   const labelObsData = (0, _zarrData.useLabelObsData)();
   // @TODO: assert length of obsmData, xData, obsData is equal
 
+  const getRadiusScale = (0, _react.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]);
   (0, _react.useEffect)(() => {
-    if (!obsmData.isPending && !obsmData.serverError) {
-      var _deckRef$current, _deckRef$current2;
-      setIsRendering(true);
+    if (obsmData.isPending || settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR && xData.isPending || settings.colorEncoding === _constants.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 === _constants.COLOR_ENCODINGS.VAR) {
+          values = !xData.serverError ? xData.data : values;
+        } else if (settings.colorEncoding === _constants.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]);
+  (0, _react.useEffect)(() => {
+    if (data.positions && !!data.positions.length) {
+      var _deckRef$current, _deckRef$current2;
       const mapHelper = new _mapHelper.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,
@@ -110,15 +153,8 @@ 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 = (0, _react.useCallback)(() => {
     var _deckRef$current3, _deckRef$current4;
     const {
@@ -135,65 +171,47 @@ function Scatterplot(_ref) {
       zoom
     };
   }, [data.positions]);
-  (0, _react.useEffect)(() => {
-    if (settings.colorEncoding === _constants.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]);
-  (0, _react.useEffect)(() => {
-    if (settings.colorEncoding === _constants.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 === _constants.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 = (0, _react.useCallback)(i => i, []);
+  const identitySortedIndexMap = (0, _react.useMemo)(() => ({
+    get: key => key
+  }), []);
+  const {
+    sortedData,
+    getOriginalIndex,
+    sortedIndexMap
+  } = (0, _react.useMemo)(() => {
+    var _settings$selectedObs;
+    if ((settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR || settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS && ((_settings$selectedObs = settings.selectedObs) === null || _settings$selectedObs === void 0 ? void 0 : _settings$selectedObs.type) === _constants.OBS_TYPES.CONTINUOUS) && data.positions && data.values && data.positions.length === data.values.length) {
+      const sortedIndices = _lodash.default.map(data.values, (_v, i) => i).sort((a, b) => data.values[a] - data.values[b]);
+      const sortedIndexMap = new Map(_lodash.default.map(sortedIndices, (originalIndex, sortedIndex) => [originalIndex, sortedIndex]));
+      return {
+        sortedData: _lodash.default.mapValues(data, (v, _k) => {
+          return v ? _lodash.default.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 = (0, _react.useMemo)(() => {
+    return obsIndices ? new Set(Array.from(obsIndices, i => sortedIndexMap.get(i))) : obsIndices;
+  }, [obsIndices, sortedIndexMap]);
   const isCategorical = (0, _react.useMemo)(() => {
     if (settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS) {
-      var _settings$selectedObs, _settings$selectedObs2;
-      return ((_settings$selectedObs = settings.selectedObs) === null || _settings$selectedObs === void 0 ? void 0 : _settings$selectedObs.type) === _constants.OBS_TYPES.CATEGORICAL || ((_settings$selectedObs2 = settings.selectedObs) === null || _settings$selectedObs2 === void 0 ? void 0 : _settings$selectedObs2.type) === _constants.OBS_TYPES.BOOLEAN;
+      var _settings$selectedObs3, _settings$selectedObs4;
+      return ((_settings$selectedObs3 = settings.selectedObs) === null || _settings$selectedObs3 === void 0 ? void 0 : _settings$selectedObs3.type) === _constants.OBS_TYPES.CATEGORICAL || ((_settings$selectedObs4 = settings.selectedObs) === null || _settings$selectedObs4 === void 0 ? void 0 : _settings$selectedObs4.type) === _constants.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]);
   (0, _react.useEffect)(() => {
     dispatch({
       type: "set.controls.valueRange",
@@ -208,31 +226,34 @@ function Scatterplot(_ref) {
     max: settings.controls.range[1] * (valueMax - valueMin) + valueMin
   };
   const getFillColor = (0, _react.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 === _constants.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 = (0, _react.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 = (0, _react.useMemo)(() => {
     return [new _layers.ScatterplotLayer({
       id: "cherita-layer-scatterplot",
       pickable: true,
-      data: data.positions,
-      radiusScale: radius,
+      data: sortedData.positions,
+      radiusScale: radiusScale,
       radiusMinPixels: 1,
       getPosition: d => d,
       getFillColor: getFillColor,
@@ -275,7 +296,7 @@ function Scatterplot(_ref) {
         }
       }
     })];
-  }, [data.positions, features, getFillColor, getRadius, mode, radius, selectedFeatureIndexes]);
+  }, [sortedData.positions, features, getFillColor, getRadius, mode, radiusScale, selectedFeatureIndexes]);
   const layers = (0, _react.useDeferredValue)(mode === _editModes.ViewMode ? memoizedLayers.reverse() : memoizedLayers); // draw scatterplot on top of polygons when in ViewMode
 
   (0, _react.useEffect)(() => {
@@ -318,21 +339,21 @@ function Scatterplot(_ref) {
     if (settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS && settings.selectedObs && !_lodash.default.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 === _constants.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(..._lodash.default.map(labelObsData.data, (v, k) => {
         const labelObs = _lodash.default.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 ? _lodash.default.compact(text).join("\n") : null,
       className: grayOut ? "tooltip-grayout" : "deck-tooltip",
@@ -345,8 +366,7 @@ 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 === _constants.COLOR_ENCODINGS.VAR && ((_xData$serverError = xData.serverError) === null || _xData$serverError === void 0 ? void 0 : _xData$serverError.length) || settings.colorEncoding === _constants.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 === _constants.COLOR_ENCODINGS.VAR && ((_xData$serverError = xData.serverError) === null || _xData$serverError === void 0 ? void 0 : _xData$serverError.length) || settings.colorEncoding === _constants.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.default.createElement("div", {
     className: "cherita-container-scatterplot"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -393,13 +413,13 @@ function Scatterplot(_ref) {
     className: "cherita-spatial-footer"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "cherita-toolbox-footer"
-  }, error && !isPending && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
+  }, !!error && !isRendering && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
     variant: "danger"
   }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
     icon: _freeSolidSvgIcons.faTriangleExclamation
   }), "\xA0Error loading data"), /*#__PURE__*/_react.default.createElement(_Toolbox.Toolbox, {
-    mode: settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? (_settings$selectedVar = settings.selectedVar) === null || _settings$selectedVar === void 0 ? void 0 : _settings$selectedVar.name : settings.colorEncoding === _constants.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 === _constants.COLOR_ENCODINGS.VAR ? (_settings$selectedVar = settings.selectedVar) === null || _settings$selectedVar === void 0 ? void 0 : _settings$selectedVar.name : settings.colorEncoding === _constants.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.default.createElement(_Legend.Legend, {
     isCategorical: isCategorical,

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

@@ -14,9 +14,9 @@ var _reactBootstrap = require("react-bootstrap");
 var _Button = _interopRequireDefault(require("react-bootstrap/Button"));
 var _ButtonGroup = _interopRequireDefault(require("react-bootstrap/ButtonGroup"));
 var _Dropdown = _interopRequireDefault(require("react-bootstrap/Dropdown"));
-var _DatasetContext = require("../../context/DatasetContext");
 var _offcanvas = require("../offcanvas");
 var _ScatterplotControls = require("./ScatterplotControls");
+var _constants = require("../../constants/constants");
 var _SettingsContext = require("../../context/SettingsContext");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -40,8 +40,8 @@ function SpatialControls(_ref) {
   const [showControls, setShowControls] = (0, _react.useState)(false);
   const handleCloseControls = () => setShowControls(false);
   const handleShowControls = () => setShowControls(true);
-  const LgBreakpoint = (0, _useMediaQuery.default)("(max-width: 991.98px)");
-  const XlBreakpoint = (0, _useMediaQuery.default)("(max-width: 1199.98px)");
+  const LgBreakpoint = (0, _useMediaQuery.default)(_constants.BREAKPOINTS.LG);
+  const XlBreakpoint = (0, _useMediaQuery.default)(_constants.BREAKPOINTS.XL);
   const showObsBtn = isFullscreen ? LgBreakpoint : true;
   const showVarsBtn = isFullscreen ? XlBreakpoint : true;
   const onSelect = (eventKey, event) => {

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

@@ -15,6 +15,7 @@ var _DatasetContext = require("../../context/DatasetContext");
 var _SettingsContext = require("../../context/SettingsContext");
 var _requests = require("../../utils/requests");
 var _VarItem = require("../var-list/VarItem");
+var _VarList = require("../var-list/VarList");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 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; }
@@ -52,39 +53,6 @@ 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 = (0, _DatasetContext.useDataset)();
-  const [params, setParams] = (0, _react.useState)({
-    url: dataset.url,
-    varKeys: _lodash.default.map(varKeys, v => v.isSet ? {
-      name: v.name,
-      indices: v.vars.map(v => v.index)
-    } : v.index),
-    // obsIndices:
-    varNamesCol: dataset.varNamesCol
-  });
-  (0, _react.useEffect)(() => {
-    setParams(p => {
-      return _objectSpread(_objectSpread({}, p), {}, {
-        varKeys: _lodash.default.map(varKeys, v => v.isSet ? {
-          name: v.name,
-          indices: v.vars.map(v => v.index)
-        } : v.index)
-      });
-    });
-  }, [varKeys]);
-  return (0, _requests.useFetch)(ENDPOINT, params, {
-    enabled: enabled,
-    refetchOnMount: false
-  });
-};
-
-// ensure nulls are lowest values
-const sortMeans = (i, means) => {
-  return means[i.name] || _lodash.default.min(_lodash.default.values(means)) - 1;
-};
 function DiseaseInfo(_ref2) {
   let {
     disease,
@@ -119,12 +87,12 @@ function DiseaseInfo(_ref2) {
       setDiseaseVars(diseaseData.fetchedData);
     }
   }, [diseaseData.fetchedData, diseaseData.isPending, diseaseData.serverError]);
-  const varMeans = useVarMean(diseaseVars, !!(diseaseVars !== null && diseaseVars !== void 0 && diseaseVars.length) && settings.varSort.disease.sort === _constants.VAR_SORT.MATRIX);
+  const varMeans = (0, _VarList.useVarMean)(diseaseVars, !!(diseaseVars !== null && diseaseVars !== void 0 && diseaseVars.length) && settings.varSort.disease.sort === _constants.VAR_SORT.MATRIX);
   (0, _react.useEffect)(() => {
     if (settings.varSort.disease.sort === _constants.VAR_SORT.MATRIX) {
       if (!varMeans.isPending && !varMeans.serverError) {
         setSortedDiseaseVars(_lodash.default.orderBy(diseaseVars, o => {
-          return sortMeans(o, varMeans.fetchedData);
+          return (0, _VarList.sortMeans)(o, varMeans.fetchedData);
         }, settings.varSort.disease.sortOrder));
       }
     } else if (settings.varSort.disease.sort === _constants.VAR_SORT.NAME) {

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

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VarPlotlyToolbar = exports.Toolbar = exports.ObsPlotlyToolbar = exports.ControlsPlotlyToolbar = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+var _reactFontawesome = require("@fortawesome/react-fontawesome");
+var _reactBootstrap = require("react-bootstrap");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Toolbar = _ref => {
+  let {
+    showObsBtn = true,
+    showVarsBtn = true,
+    showCtrlsBtn = true,
+    setShowObs,
+    setShowVars,
+    setShowControls
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Navbar, {
+    expand: "md",
+    bg: "primary",
+    variant: "dark",
+    className: "cherita-navbar"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Container, {
+    fluid: true
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Navbar.Toggle, {
+    "aria-controls": "navbarScroll"
+  }), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Navbar.Collapse, {
+    id: "navbarScroll"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav, {
+    navbarScroll: true
+  }, showObsBtn && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Item, {
+    className: "me-2"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Link, {
+    onClick: () => setShowObs(true)
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faList,
+    className: "me-2"
+  }), "Explore Categories")), showVarsBtn && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Item, {
+    className: "me-2"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Link, {
+    onClick: () => setShowVars(true)
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faSearch,
+    className: "me-2"
+  }), "Search Genes")), showCtrlsBtn && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Item, {
+    className: "me-2"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Link, {
+    onClick: () => setShowControls(true)
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faSliders,
+    className: "me-2"
+  }), "Controls"))))));
+};
+exports.Toolbar = Toolbar;
+const ObsPlotlyToolbar = _ref2 => {
+  let {
+    onClick
+  } = _ref2;
+  return {
+    name: "Categories",
+    icon: {
+      width: 512,
+      height: 512,
+      path: _freeSolidSvgIcons.faList.icon[4]
+    },
+    click: onClick
+  };
+};
+exports.ObsPlotlyToolbar = ObsPlotlyToolbar;
+const VarPlotlyToolbar = _ref3 => {
+  let {
+    onClick
+  } = _ref3;
+  return {
+    name: "Features",
+    icon: {
+      width: 512,
+      height: 512,
+      path: _freeSolidSvgIcons.faSearch.icon[4]
+    },
+    click: onClick
+  };
+};
+exports.VarPlotlyToolbar = VarPlotlyToolbar;
+const ControlsPlotlyToolbar = _ref4 => {
+  let {
+    onClick
+  } = _ref4;
+  return {
+    name: "Controls",
+    icon: {
+      width: 512,
+      height: 512,
+      path: _freeSolidSvgIcons.faSliders.icon[4]
+    },
+    click: onClick
+  };
+};
+exports.ControlsPlotlyToolbar = ControlsPlotlyToolbar;

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.VarNamesList = VarNamesList;
+exports.useVarMean = exports.sortMeans = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 var _reactFontawesome = require("@fortawesome/react-fontawesome");
@@ -15,6 +16,7 @@ var _VarListToolbar = require("./VarListToolbar");
 var _VarSet = require("./VarSet");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
+var _FilterContext = require("../../context/FilterContext");
 var _SettingsContext = require("../../context/SettingsContext");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
@@ -29,13 +31,16 @@ const useVarMean = function (varKeys) {
   let enabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   const ENDPOINT = "matrix/mean";
   const dataset = (0, _DatasetContext.useDataset)();
+  const {
+    obsIndices
+  } = (0, _FilterContext.useFilteredData)();
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url,
     varKeys: _lodash.default.map(varKeys, v => v.isSet ? {
       name: v.name,
       indices: v.vars.map(v => v.index)
     } : v.index),
-    // obsIndices:
+    obsIndices: obsIndices,
     varNamesCol: dataset.varNamesCol
   });
   (0, _react.useEffect)(() => {
@@ -44,10 +49,11 @@ const useVarMean = function (varKeys) {
         varKeys: _lodash.default.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 (0, _requests.useFetch)(ENDPOINT, params, {
     enabled: enabled,
     refetchOnMount: false
@@ -55,9 +61,11 @@ const useVarMean = function (varKeys) {
 };
 
 // ensure nulls are lowest values
+exports.useVarMean = useVarMean;
 const sortMeans = (i, means) => {
   return means[i.name] || _lodash.default.min(_lodash.default.values(means)) - 1;
 };
+exports.sortMeans = sortMeans;
 function VarNamesList(_ref) {
   var _settings$selectedVar, _settings$selectedVar2;
   let {