@haniffalab/cherita-react 1.3.0-dev.2025-06-04.6573608f → 1.3.0-dev.2025-06-06.0b38976b

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "1.3.0-dev.2025-06-04.6573608f",
+  "version": "1.3.0-dev.2025-06-06.0b38976b",
   "author": "Haniffa Lab",
   "license": "MIT",
   "keywords": [
@@ -90,7 +90,8 @@
     "build:babel": "npm run build:esm && npm run build:cjs",
     "build:scss": "sass --load-path=node_modules src/scss/cherita-bootstrap.scss dist/css/cherita.css",
     "copy:scss": "cpx 'src/scss/**/*' 'scss'",
-    "build": "npm run build:babel && npm run build:scss && npm run copy:scss",
+    "copy:assets": "cpx 'src/assets/**/*' 'dist/assets'",
+    "build": "npm run build:babel && npm run build:scss && npm run copy:scss && npm run copy:assets",
     "test": "jest --watchAll",
     "test:ci": "jest --coverage --ci --no-watch",
     "lint:scss": "stylelint 'src/**/*.scss' --fix",
@@ -126,5 +127,5 @@
     "url": "https://github.com/haniffalab/cherita-react/issues"
   },
   "homepage": "https://github.com/haniffalab/cherita-react#readme",
-  "prereleaseSha": "6573608f6ab26442b5badaea1be8d5dff17b1344"
+  "prereleaseSha": "0b38976bfa4499c6f24545ed2f278f078633d27b"
 }