@haniffalab/cherita-react 0.2.0-dev.2024-09-26.775b9a06 → 0.2.0-dev.2024-09-26.1ea62883

package/dist/components/scatterplot/Scatterplot.js

@@ -19,10 +19,12 @@ var _SpatialControls = require("./SpatialControls");
 var _Toolbox = require("./Toolbox");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
+var _FilterContext = require("../../context/FilterContext");
 var _colorHelper = require("../../helpers/color-helper");
 var _mapHelper = require("../../helpers/map-helper");
 var _zarrHelper = require("../../helpers/zarr-helper");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
+var _string = require("../../utils/string");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -36,16 +38,27 @@ const INITIAL_VIEW_STATE = {
   pitch: 0,
   bearing: 0
 };
+const EPSILON = 1e-6;
+const meanData = (_i, data) => {
+  return _lodash.default.zipWith(...data, function () {
+    for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {
+      values[_key] = arguments[_key];
+    }
+    return _lodash.default.mean(values);
+  });
+};
 function Scatterplot(_ref) {
-  var _dataset$selectedObs, _dataset$selectedObs2, _dataset$selectedObs6, _dataset$selectedObs8, _dataset$selectedObs10, _features$features2, _obsmData$serverError, _xData$serverError, _obsData$serverError, _labelObsData$serverE, _obsmData$data;
+  var _dataset$selectedVar, _dataset$selectedVar2, _dataset$selectedVar3, _dataset$selectedObs, _dataset$selectedObs2, _dataset$selectedObs7, _dataset$selectedObs11, _dataset$selectedObs12, _dataset$selectedObs13, _dataset$selectedObs15, _features$features2, _obsmData$serverError, _xData$serverError, _obsData$serverError, _labelObsData$serverE, _obsmData$data;
   let {
     radius = 30
   } = _ref;
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  const filterDispatch = (0, _FilterContext.useFilteredDataDispatch)();
   const {
     getColor
   } = (0, _colorHelper.useColor)();
+  const deckRef = (0, _react.useRef)(null);
   const [viewState, setViewState] = (0, _react.useState)(INITIAL_VIEW_STATE);
   const [isRendering, setIsRendering] = (0, _react.useState)(true);
   const [data, setData] = (0, _react.useState)({
@@ -66,23 +79,24 @@ function Scatterplot(_ref) {
     url: dataset.url,
     path: "obsm/" + dataset.selectedObsm
   });
-  const [xParams, setXParams] = (0, _react.useState)({
+  const [xParams, setXParams] = (0, _react.useState)(!dataset.selectedVar ? [] : !((_dataset$selectedVar = dataset.selectedVar) !== null && _dataset$selectedVar !== void 0 && _dataset$selectedVar.isSet) ? [{
     url: dataset.url,
-    path: "X"
-  });
+    path: "X",
+    s: [null, (_dataset$selectedVar2 = dataset.selectedVar) === null || _dataset$selectedVar2 === void 0 ? void 0 : _dataset$selectedVar2.matrix_index]
+  }] : _lodash.default.map((_dataset$selectedVar3 = dataset.selectedVar) === null || _dataset$selectedVar3 === void 0 ? void 0 : _dataset$selectedVar3.vars, v => {
+    return {
+      url: dataset.url,
+      path: "X",
+      s: [null, v.matrix_index]
+    };
+  }));
   const [obsParams, setObsParams] = (0, _react.useState)({
     url: dataset.url,
-    path: "obs/" + ((_dataset$selectedObs = dataset.selectedObs) === null || _dataset$selectedObs === void 0 ? void 0 : _dataset$selectedObs.name) + (((_dataset$selectedObs2 = dataset.selectedObs) === null || _dataset$selectedObs2 === void 0 ? void 0 : _dataset$selectedObs2.type) === _constants.OBS_TYPES.CONTINUOUS ? "" : "/codes")
+    path: "obs/" + ((_dataset$selectedObs = dataset.selectedObs) === null || _dataset$selectedObs === void 0 ? void 0 : _dataset$selectedObs.name) + (((_dataset$selectedObs2 = dataset.selectedObs) === null || _dataset$selectedObs2 === void 0 ? void 0 : _dataset$selectedObs2.type) === _constants.OBS_TYPES.CATEGORICAL ? "/codes" : "")
   });
   const [labelObsParams, setLabelObsParams] = (0, _react.useState)([]);
-
-  // needs to be wrapped in useMemo as it is an array an could cause an infinite loop otherwise
-  const xSelection = (0, _react.useMemo)(() => {
-    var _dataset$selectedVar;
-    return [null, (_dataset$selectedVar = dataset.selectedVar) === null || _dataset$selectedVar === void 0 ? void 0 : _dataset$selectedVar.matrix_index];
-  }, [dataset.selectedVar]);
   const obsmData = (0, _zarrHelper.useZarr)(obsmParams, null, _zarrHelper.GET_OPTIONS);
-  const xData = (0, _zarrHelper.useZarr)(xParams, xSelection, _zarrHelper.GET_OPTIONS);
+  const xData = (0, _zarrHelper.useMultipleZarr)(xParams, _zarrHelper.GET_OPTIONS, meanData);
   const obsData = (0, _zarrHelper.useZarr)(obsParams, null, _zarrHelper.GET_OPTIONS);
   const labelObsData = (0, _zarrHelper.useMultipleZarr)(labelObsParams, _zarrHelper.GET_OPTIONS);
   (0, _react.useEffect)(() => {
@@ -94,20 +108,25 @@ function Scatterplot(_ref) {
     });
   }, [dataset.selectedObsm]);
   (0, _react.useEffect)(() => {
-    setXParams(p => {
-      var _dataset$selectedVar2;
+    var _dataset$selectedVar4, _dataset$selectedVar5, _dataset$selectedVar6;
+    setXParams(!dataset.selectedVar ? [] : !((_dataset$selectedVar4 = dataset.selectedVar) !== null && _dataset$selectedVar4 !== void 0 && _dataset$selectedVar4.isSet) ? [{
+      url: dataset.url,
+      path: "X",
+      s: [null, (_dataset$selectedVar5 = dataset.selectedVar) === null || _dataset$selectedVar5 === void 0 ? void 0 : _dataset$selectedVar5.matrix_index]
+    }] : _lodash.default.map((_dataset$selectedVar6 = dataset.selectedVar) === null || _dataset$selectedVar6 === void 0 ? void 0 : _dataset$selectedVar6.vars, v => {
       return {
-        ...p,
-        s: [null, (_dataset$selectedVar2 = dataset.selectedVar) === null || _dataset$selectedVar2 === void 0 ? void 0 : _dataset$selectedVar2.matrix_index]
+        url: dataset.url,
+        path: "X",
+        s: [null, v.matrix_index]
       };
-    });
-  }, [dataset.selectedVar]);
+    }));
+  }, [dataset.selectedVar, dataset.url]);
   (0, _react.useEffect)(() => {
     setObsParams(p => {
       var _dataset$selectedObs3, _dataset$selectedObs4;
       return {
         ...p,
-        path: "obs/" + ((_dataset$selectedObs3 = dataset.selectedObs) === null || _dataset$selectedObs3 === void 0 ? void 0 : _dataset$selectedObs3.name) + (((_dataset$selectedObs4 = dataset.selectedObs) === null || _dataset$selectedObs4 === void 0 ? void 0 : _dataset$selectedObs4.type) === _constants.OBS_TYPES.CONTINUOUS ? "" : "/codes")
+        path: "obs/" + ((_dataset$selectedObs3 = dataset.selectedObs) === null || _dataset$selectedObs3 === void 0 ? void 0 : _dataset$selectedObs3.name) + (((_dataset$selectedObs4 = dataset.selectedObs) === null || _dataset$selectedObs4 === void 0 ? void 0 : _dataset$selectedObs4.type) === _constants.OBS_TYPES.CATEGORICAL ? "/codes" : "")
       };
     });
   }, [dataset.selectedObs]);
@@ -115,7 +134,7 @@ function Scatterplot(_ref) {
     setLabelObsParams(_lodash.default.map(dataset.labelObs, obs => {
       return {
         url: dataset.url,
-        path: "obs/" + obs.name + (obs.type === _constants.OBS_TYPES.CONTINUOUS ? "" : "/codes"),
+        path: "obs/" + obs.name + (obs.type === _constants.OBS_TYPES.CATEGORICAL ? "/codes" : ""),
         key: obs.name
       };
     }));
@@ -127,12 +146,6 @@ function Scatterplot(_ref) {
         url: dataset.url
       };
     });
-    setXParams(p => {
-      return {
-        ...p,
-        url: dataset.url
-      };
-    });
     setObsParams(p => {
       return {
         ...p,
@@ -145,6 +158,7 @@ function Scatterplot(_ref) {
 
   (0, _react.useEffect)(() => {
     if (!obsmData.isPending && !obsmData.serverError) {
+      var _deckRef$current, _deckRef$current2;
       setIsRendering(true);
       setData(d => {
         return {
@@ -157,7 +171,10 @@ function Scatterplot(_ref) {
         latitude,
         longitude,
         zoom
-      } = mapHelper.fitBounds(obsmData.data);
+      } = mapHelper.fitBounds(obsmData.data, {
+        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
+      });
       setViewState(v => {
         return {
           ...v,
@@ -176,12 +193,16 @@ function Scatterplot(_ref) {
       });
     }
   }, [dataset.selectedObsm, obsmData.data, obsmData.isPending, obsmData.serverError]);
-  const bounds = (0, _react.useMemo)(() => {
+  const getBounds = (0, _react.useCallback)(() => {
+    var _deckRef$current3, _deckRef$current4;
     const {
       latitude,
       longitude,
       zoom
-    } = new _mapHelper.MapHelper().fitBounds(data.positions);
+    } = new _mapHelper.MapHelper().fitBounds(data.positions, {
+      width: deckRef === null || deckRef === void 0 || (_deckRef$current3 = deckRef.current) === null || _deckRef$current3 === void 0 || (_deckRef$current3 = _deckRef$current3.deck) === null || _deckRef$current3 === void 0 ? void 0 : _deckRef$current3.width,
+      height: deckRef === null || deckRef === void 0 || (_deckRef$current4 = deckRef.current) === null || _deckRef$current4 === void 0 || (_deckRef$current4 = _deckRef$current4.deck) === null || _deckRef$current4 === void 0 ? void 0 : _deckRef$current4.height
+    });
     return {
       latitude,
       longitude,
@@ -247,17 +268,37 @@ function Scatterplot(_ref) {
   }, [dataset.colorEncoding, obsData.data, obsData.isPending, obsData.serverError, dataset.sliceBy.obs]);
   const isCategorical = (0, _react.useMemo)(() => {
     if (dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS) {
-      var _dataset$selectedObs5;
-      return ((_dataset$selectedObs5 = dataset.selectedObs) === null || _dataset$selectedObs5 === void 0 ? void 0 : _dataset$selectedObs5.type) === _constants.OBS_TYPES.CATEGORICAL;
+      var _dataset$selectedObs5, _dataset$selectedObs6;
+      return ((_dataset$selectedObs5 = dataset.selectedObs) === null || _dataset$selectedObs5 === void 0 ? void 0 : _dataset$selectedObs5.type) === _constants.OBS_TYPES.CATEGORICAL || ((_dataset$selectedObs6 = dataset.selectedObs) === null || _dataset$selectedObs6 === void 0 ? void 0 : _dataset$selectedObs6.type) === _constants.OBS_TYPES.BOOLEAN;
     } else {
       return false;
     }
-  }, [dataset.colorEncoding, (_dataset$selectedObs6 = dataset.selectedObs) === null || _dataset$selectedObs6 === void 0 ? void 0 : _dataset$selectedObs6.type]);
+  }, [dataset.colorEncoding, (_dataset$selectedObs7 = dataset.selectedObs) === null || _dataset$selectedObs7 === void 0 ? void 0 : _dataset$selectedObs7.type]);
+  const isInBins = (v, binEdges, indices) => {
+    const lastEdge = _lodash.default.last(binEdges);
+    const allButLastEdges = _lodash.default.initial(binEdges);
+    // add epsilon to last edge to include the last value
+    const modifiedBinEdges = [...allButLastEdges, [lastEdge[0], lastEdge[1] + EPSILON]];
+    const binIndices = _lodash.default.difference(_lodash.default.range(binEdges.length), indices);
+    const ranges = _lodash.default.at(modifiedBinEdges, binIndices);
+    return _lodash.default.some(ranges, range => _lodash.default.inRange(v, ...range));
+  };
   const isInSlice = (0, _react.useCallback)((index, values, positions) => {
+    var _dataset$selectedObs9, _dataset$selectedObs10;
     let inSlice = true;
-    if ((dataset.sliceBy.obs || isCategorical) && values) {
-      var _dataset$selectedObs7;
-      inSlice &= !_lodash.default.includes((_dataset$selectedObs7 = dataset.selectedObs) === null || _dataset$selectedObs7 === void 0 ? void 0 : _dataset$selectedObs7.omit, values[index]);
+    if (isCategorical && values) {
+      var _dataset$selectedObs8;
+      inSlice &= !_lodash.default.includes((_dataset$selectedObs8 = dataset.selectedObs) === null || _dataset$selectedObs8 === void 0 ? void 0 : _dataset$selectedObs8.omit, values[index]);
+    } else if ((dataset.sliceBy.obs || dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && ((_dataset$selectedObs9 = dataset.selectedObs) === null || _dataset$selectedObs9 === void 0 ? void 0 : _dataset$selectedObs9.type) === _constants.OBS_TYPES.CONTINUOUS) && !!((_dataset$selectedObs10 = dataset.selectedObs) !== null && _dataset$selectedObs10 !== void 0 && _dataset$selectedObs10.omit.length) && values) {
+      if (dataset.selectedObs.type === _constants.OBS_TYPES.CATEGORICAL) {
+        inSlice &= !_lodash.default.includes(dataset.selectedObs.omit, values[index]);
+      } else if (dataset.selectedObs.type === _constants.OBS_TYPES.CONTINUOUS) {
+        if (Number.isNaN(values[index])) {
+          inSlice &= !_lodash.default.includes(dataset.selectedObs.omit, -1);
+        } else {
+          inSlice &= isInBins(values[index], dataset.selectedObs.bins.binEdges, _lodash.default.without(dataset.selectedObs.omit, -1));
+        }
+      }
     }
     if (dataset.sliceBy.polygons && positions) {
       inSlice &= _lodash.default.some(features === null || features === void 0 ? void 0 : features.features, (_f, i) => {
@@ -265,7 +306,7 @@ function Scatterplot(_ref) {
       });
     }
     return inSlice;
-  }, [(_dataset$selectedObs8 = dataset.selectedObs) === null || _dataset$selectedObs8 === void 0 ? void 0 : _dataset$selectedObs8.omit, dataset.sliceBy.obs, dataset.sliceBy.polygons, features.features, isCategorical]);
+  }, [dataset.colorEncoding, (_dataset$selectedObs11 = dataset.selectedObs) === null || _dataset$selectedObs11 === void 0 || (_dataset$selectedObs11 = _dataset$selectedObs11.bins) === null || _dataset$selectedObs11 === void 0 ? void 0 : _dataset$selectedObs11.binEdges, (_dataset$selectedObs12 = dataset.selectedObs) === null || _dataset$selectedObs12 === void 0 ? void 0 : _dataset$selectedObs12.omit, (_dataset$selectedObs13 = dataset.selectedObs) === null || _dataset$selectedObs13 === void 0 ? void 0 : _dataset$selectedObs13.type, dataset.sliceBy.obs, dataset.sliceBy.polygons, features.features, isCategorical]);
   const {
     filteredIndices,
     valueMin,
@@ -293,8 +334,8 @@ function Scatterplot(_ref) {
         slicedLength: filtered.length
       };
     } else if (dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS) {
-      var _dataset$selectedObs9;
-      const isContinuous = ((_dataset$selectedObs9 = dataset.selectedObs) === null || _dataset$selectedObs9 === void 0 ? void 0 : _dataset$selectedObs9.type) === _constants.OBS_TYPES.CONTINUOUS;
+      var _dataset$selectedObs14;
+      const isContinuous = ((_dataset$selectedObs14 = dataset.selectedObs) === null || _dataset$selectedObs14 === void 0 ? void 0 : _dataset$selectedObs14.type) === _constants.OBS_TYPES.CONTINUOUS;
       const {
         filtered,
         filteredIndices
@@ -322,7 +363,13 @@ function Scatterplot(_ref) {
         slicedLength: data.values.length
       };
     }
-  }, [data.positions, data.sliceValues, data.values, dataset.colorEncoding, (_dataset$selectedObs10 = dataset.selectedObs) === null || _dataset$selectedObs10 === void 0 ? void 0 : _dataset$selectedObs10.type, isInSlice]);
+  }, [data.positions, data.sliceValues, data.values, dataset.colorEncoding, (_dataset$selectedObs15 = dataset.selectedObs) === null || _dataset$selectedObs15 === void 0 ? void 0 : _dataset$selectedObs15.type, isInSlice]);
+  (0, _react.useEffect)(() => {
+    filterDispatch({
+      type: "set.obs.indices",
+      indices: dataset.sliceBy.obs || dataset.sliceBy.polygons ? filteredIndices : null
+    });
+  }, [dataset.sliceBy.obs, dataset.sliceBy.polygons, filterDispatch, filteredIndices]);
   (0, _react.useEffect)(() => {
     dispatch({
       type: "set.controls.valueRange",
@@ -408,20 +455,40 @@ function Scatterplot(_ref) {
     }
     setSelectedFeatureIndexes(f => info.object ? info.layer.id === "cherita-layer-draw" ? [info.index] : f : []);
   }
+  const getLabel = function (o, v) {
+    let isVar = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    if (isVar || o.type === _constants.OBS_TYPES.CONTINUOUS) {
+      return "".concat(o.name, ": ").concat((0, _string.prettyNumerical)(parseFloat(v)));
+    } else {
+      return "".concat(o.name, ": ").concat(o.codesMap[v]);
+    }
+  };
   const getTooltip = _ref4 => {
     let {
       object,
       index
     } = _ref4;
-    return object && dataset.labelObs.length && {
-      text: _lodash.default.map(labelObsData, (v, k) => {
+    if (!object) return;
+    const text = [];
+    if (dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && dataset.selectedObs && !_lodash.default.some(dataset.labelObs, {
+      name: dataset.selectedObs.name
+    })) {
+      var _obsData$data;
+      text.push(getLabel(dataset.selectedObs, (_obsData$data = obsData.data) === null || _obsData$data === void 0 ? void 0 : _obsData$data[index]));
+    }
+    if (dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR && dataset.selectedVar) {
+      var _xData$data;
+      text.push(getLabel(dataset.selectedVar, (_xData$data = xData.data) === null || _xData$data === void 0 ? void 0 : _xData$data[index], true));
+    }
+    if (dataset.labelObs.length) {
+      text.push(..._lodash.default.map(labelObsData.data, (v, k) => {
         const labelObs = _lodash.default.find(dataset.labelObs, o => o.name === k);
-        if (labelObs.type === _constants.OBS_TYPES.CONTINUOUS) {
-          return "".concat(k, ": ").concat(parseFloat(v === null || v === void 0 ? void 0 : v[index]).toLocaleString());
-        } else {
-          return "".concat(k, ": ").concat(labelObs.codesMap[v === null || v === void 0 ? void 0 : v[index]]);
-        }
-      }).join("\n")
+        return getLabel(labelObs, v[index]);
+      }));
+    }
+    if (!text.length) return;
+    return {
+      text: text.length ? _lodash.default.compact(text).join("\n") : null
     };
   };
   const isPending = (isRendering || xData.isPending || obsmData.isPending) && !obsmData.isPending;
@@ -448,14 +515,15 @@ function Scatterplot(_ref) {
           isDragging
         } = _ref5;
         return mode !== _editModes.ViewMode ? "crosshair" : isDragging ? "grabbing" : "grab";
-      }
+      },
+      ref: deckRef
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpatialControls.SpatialControls, {
       mode: mode,
       setMode: setMode,
       features: features,
       setFeatures: setFeatures,
       selectedFeatureIndexes: selectedFeatureIndexes,
-      resetBounds: () => setViewState(bounds),
+      resetBounds: () => setViewState(getBounds()),
       increaseZoom: () => setViewState(v => ({
         ...v,
         zoom: v.zoom + 1
@@ -464,20 +532,20 @@ function Scatterplot(_ref) {
         ...v,
         zoom: v.zoom - 1
       }))
-    }), error && !isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "cherita-alert",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Alert, {
-        variant: "danger",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-          icon: _freeSolidSvgIcons.faTriangleExclamation
-        }), "Error loading data"]
-      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "cherita-spatial-footer",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbox.Toolbox, {
-        mode: dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? dataset.selectedVar.name : dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS ? dataset.selectedObs.name : null,
-        obsLength: parseInt((_obsmData$data = obsmData.data) === null || _obsmData$data === void 0 ? void 0 : _obsmData$data.length),
-        slicedLength: parseInt(slicedLength)
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "cherita-toolbox-footer",
+        children: [error && !isPending && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Alert, {
+          variant: "danger",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+            icon: _freeSolidSvgIcons.faTriangleExclamation
+          }), "\xA0Error loading data"]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbox.Toolbox, {
+          mode: dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? dataset.selectedVar.name : dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS ? dataset.selectedObs.name : null,
+          obsLength: parseInt((_obsmData$data = obsmData.data) === null || _obsmData$data === void 0 ? void 0 : _obsmData$data.length),
+          slicedLength: parseInt(slicedLength)
+        })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Legend.Legend, {
         isCategorical: isCategorical,
         min: min,

package/dist/components/scatterplot/Toolbox.js

@@ -9,6 +9,7 @@ var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 var _reactFontawesome = require("@fortawesome/react-fontawesome");
 var _Button = _interopRequireDefault(require("react-bootstrap/Button"));
 var _ButtonGroup = _interopRequireDefault(require("react-bootstrap/ButtonGroup"));
+var _string = require("../../utils/string");
 var _ObsmList = require("../obsm-list/ObsmList");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -28,10 +29,10 @@ function Toolbox(_ref) {
         }), " ", mode]
       }), (mode || !Number.isNaN(obsLength)) && (mode !== null && !Number.isNaN(slicedLength) && slicedLength !== obsLength ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
         size: "sm",
-        children: [slicedLength.toLocaleString(), " out of", " ", obsLength.toLocaleString(), " cells"]
+        children: [(0, _string.prettyNumerical)(slicedLength), " out of", " ", (0, _string.prettyNumerical)(obsLength), " cells"]
       }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
         size: "sm",
-        children: [obsLength.toLocaleString(), " cells"]
+        children: [(0, _string.prettyNumerical)(obsLength), " cells"]
       }))]
     })
   });

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

@@ -12,10 +12,25 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function onVarSelect(dispatch, item) {
+  dispatch({
+    type: "select.var",
+    var: item
+  });
+  dispatch({
+    type: "select.multivar",
+    var: item
+  });
+  dispatch({
+    type: "set.colorEncoding",
+    value: "var"
+  });
+}
 function SearchBar(_ref) {
   let {
     searchVar = true,
-    searchDiseases = false
+    searchDiseases = false,
+    handleSelect = onVarSelect
   } = _ref;
   const [showSuggestions, setShowSuggestions] = (0, _react.useState)(false);
   const [text, setText] = (0, _react.useState)("");
@@ -62,7 +77,8 @@ function SearchBar(_ref) {
             },
             children: [searchVar && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchResults.VarSearchResults, {
               text: text,
-              setShowSuggestions: setShowSuggestions
+              setShowSuggestions: setShowSuggestions,
+              handleSelect: handleSelect
             }), searchVar && searchDiseases && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Divider, {}), searchDiseases && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchResults.DiseasesSearchResults, {
               text: text,
               setShowSuggestions: setShowSuggestions

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

@@ -17,17 +17,18 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function VarSearchResults(_ref) {
   let {
     text,
-    setShowSuggestions
+    setShowSuggestions,
+    handleSelect
   } = _ref;
   const [suggestions, setSuggestions] = (0, _react.useState)([]);
+  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const {
     setParams,
     data: {
       fetchedData = [],
       isPending,
       serverError
-    },
-    onSelect
+    }
   } = (0, _search.useVarSearch)();
   const deferredData = (0, _react.useDeferredValue)(suggestions);
   const isStale = deferredData !== fetchedData;
@@ -62,7 +63,7 @@ function VarSearchResults(_ref) {
         as: "button",
         disabled: isStale,
         onClick: () => {
-          onSelect(item);
+          handleSelect(dispatch, item);
           _lodash.default.delay(() => {
             setShowSuggestions(false);
           }, 150);
@@ -70,7 +71,7 @@ function VarSearchResults(_ref) {
         children: item.name
       }, item.name);
     });
-  }, [deferredData, isStale, onSelect, setShowSuggestions]);
+  }, [deferredData, dispatch, handleSelect, isStale, setShowSuggestions]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Header, {
       children: "Features"
@@ -102,7 +103,6 @@ function DiseasesSearchResults(_ref2) {
       serverError
     }
   } = (0, _search.useDiseaseSearch)();
-  (0, _search.useGetDisease)();
   const deferredData = (0, _react.useDeferredValue)(suggestions);
   const isStale = deferredData !== fetchedData;
   const updateParams = (0, _react.useMemo)(() => {
@@ -137,8 +137,8 @@ function DiseasesSearchResults(_ref2) {
         onClick: () => {
           dispatch({
             type: "select.disease",
-            id: item === null || item === void 0 ? void 0 : item.disease_id,
-            name: item === null || item === void 0 ? void 0 : item.disease_name
+            id: item.disease_id,
+            name: item.disease_name
           });
           _lodash.default.delay(() => {
             setShowSuggestions(false);