@haniffalab/cherita-react 1.3.0-dev.2025-06-05.2b7d4704 → 1.3.0-dev.2025-06-06.9f7ff5ad

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

@@ -42,7 +42,7 @@ 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, _features$features2, _obsmData$serverError, _xData$serverError, _obsData$serverError, _labelObsData$serverE, _settings$selectedVar, _settings$selectedObs6, _data$positions;
   let {
     radius = null,
     setShowObs,
@@ -63,13 +63,12 @@ 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 [radiusScale, setRadiusScale] = (0, _react.useState)(radius || 1);
 
   // EditableGeoJsonLayer
   const [mode, setMode] = (0, _react.useState)(() => _editModes.ViewMode);
@@ -96,21 +95,34 @@ function Scatterplot(_ref) {
     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;
+        }
+        return {
+          positions: !obsmData.serverError ? obsmData.data : 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,
         bounds
-      } = mapHelper.fitBounds(obsmData.data, {
+      } = 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
       });
@@ -122,15 +134,8 @@ function Scatterplot(_ref) {
           zoom: zoom
         });
       });
-    } else if (!obsmData.isPending && obsmData.serverError) {
-      setIsRendering(true);
-      setData(d => {
-        return _objectSpread(_objectSpread({}, d), {}, {
-          positions: []
-        });
-      });
     }
-  }, [settings.selectedObsm, getRadiusScale, 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 {
@@ -147,65 +152,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",
@@ -223,27 +210,27 @@ function Scatterplot(_ref) {
     let {
       index
     } = _ref2;
-    const grayOut = obsIndices && !obsIndices.has(index);
+    const grayOut = isPending || sortedObsIndices && !sortedObsIndices.has(index);
     return getColor({
-      value: (data.values[index] - min) / (max - min),
+      value: (sortedData.values[index] - min) / (max - min),
       categorical: isCategorical,
       grayOut: grayOut
     }) || [0, 0, 0, 100];
-  }, [data.values, obsIndices, getColor, isCategorical, max, min]);
+  }, [isPending, sortedObsIndices, getColor, sortedData.values, min, max, isCategorical]);
 
   // @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,
+      data: sortedData.positions,
       radiusScale: radiusScale,
       radiusMinPixels: 1,
       getPosition: d => d,
@@ -287,7 +274,7 @@ function Scatterplot(_ref) {
         }
       }
     })];
-  }, [data.positions, features, getFillColor, getRadius, mode, radiusScale, 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)(() => {
@@ -330,21 +317,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",
@@ -357,8 +344,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);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "cherita-container-scatterplot"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -405,13 +391,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$selectedObs6 = settings.selectedObs) === null || _settings$selectedObs6 === void 0 ? void 0 : _settings$selectedObs6.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/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/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 {

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

@@ -34,7 +34,7 @@ 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, _features$features2, _obsmData$serverError, _xData$serverError, _obsData$serverError, _labelObsData$serverE, _settings$selectedVar, _settings$selectedObs6, _data$positions;
   let {
     radius = null,
     setShowObs,
@@ -55,13 +55,12 @@ 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 [radiusScale, setRadiusScale] = useState(radius || 1);
 
   // EditableGeoJsonLayer
   const [mode, setMode] = useState(() => ViewMode);
@@ -88,21 +87,34 @@ export function Scatterplot(_ref) {
     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;
+        }
+        return {
+          positions: !obsmData.serverError ? obsmData.data : 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,
         bounds
-      } = mapHelper.fitBounds(obsmData.data, {
+      } = 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
       });
@@ -114,15 +126,8 @@ export function Scatterplot(_ref) {
           zoom: zoom
         });
       });
-    } else if (!obsmData.isPending && obsmData.serverError) {
-      setIsRendering(true);
-      setData(d => {
-        return _objectSpread(_objectSpread({}, d), {}, {
-          positions: []
-        });
-      });
     }
-  }, [settings.selectedObsm, getRadiusScale, 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 {
@@ -139,65 +144,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",
@@ -215,27 +202,27 @@ export function Scatterplot(_ref) {
     let {
       index
     } = _ref2;
-    const grayOut = obsIndices && !obsIndices.has(index);
+    const grayOut = isPending || sortedObsIndices && !sortedObsIndices.has(index);
     return getColor({
-      value: (data.values[index] - min) / (max - min),
+      value: (sortedData.values[index] - min) / (max - min),
       categorical: isCategorical,
       grayOut: grayOut
     }) || [0, 0, 0, 100];
-  }, [data.values, obsIndices, getColor, isCategorical, max, min]);
+  }, [isPending, sortedObsIndices, getColor, sortedData.values, min, max, isCategorical]);
 
   // @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,
+      data: sortedData.positions,
       radiusScale: radiusScale,
       radiusMinPixels: 1,
       getPosition: d => d,
@@ -279,7 +266,7 @@ export function Scatterplot(_ref) {
         }
       }
     })];
-  }, [data.positions, features, getFillColor, getRadius, mode, radiusScale, 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(() => {
@@ -322,21 +309,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",
@@ -349,8 +336,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);
   return /*#__PURE__*/React.createElement("div", {
     className: "cherita-container-scatterplot"
   }, /*#__PURE__*/React.createElement("div", {
@@ -397,13 +383,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$selectedObs6 = settings.selectedObs) === null || _settings$selectedObs6 === void 0 ? void 0 : _settings$selectedObs6.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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "1.3.0-dev.2025-06-05.2b7d4704",
+  "version": "1.3.0-dev.2025-06-06.9f7ff5ad",
   "author": "Haniffa Lab",
   "license": "MIT",
   "keywords": [
@@ -127,5 +127,5 @@
     "url": "https://github.com/haniffalab/cherita-react/issues"
   },
   "homepage": "https://github.com/haniffalab/cherita-react#readme",
-  "prereleaseSha": "2b7d4704cf12e0c0f474797aeb9b6b76384f22c2"
+  "prereleaseSha": "9f7ff5ad72d373bccc11058ca146ba13811cfa70"
 }