@haniffalab/cherita-react 1.3.0-dev.2025-06-04.0123fe8a → 1.3.0-dev.2025-06-04.6573608f

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

@@ -44,7 +44,7 @@ const INITIAL_VIEW_STATE = {
 function Scatterplot(_ref) {
   var _settings$selectedObs3, _features$features2, _obsmData$serverError, _xData$serverError, _obsData$serverError, _labelObsData$serverE, _settings$selectedVar, _settings$selectedObs4, _obsmData$data;
   let {
-    radius = 30,
+    radius = null,
     setShowObs,
     setShowVars,
     isFullscreen = false
@@ -69,6 +69,7 @@ function Scatterplot(_ref) {
     values: [],
     sliceValues: []
   });
+  const [radiusScale, setRadiusScale] = (0, _react.useState)(radius || 1);
 
   // EditableGeoJsonLayer
   const [mode, setMode] = (0, _react.useState)(() => _editModes.ViewMode);
@@ -85,6 +86,15 @@ 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;
@@ -98,11 +108,13 @@ function Scatterplot(_ref) {
       const {
         latitude,
         longitude,
-        zoom
+        zoom,
+        bounds
       } = 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
       });
+      setRadiusScale(getRadiusScale(bounds));
       setViewState(v => {
         return _objectSpread(_objectSpread({}, v), {}, {
           longitude: longitude,
@@ -118,7 +130,7 @@ function Scatterplot(_ref) {
         });
       });
     }
-  }, [settings.selectedObsm, obsmData.data, obsmData.isPending, obsmData.serverError]);
+  }, [settings.selectedObsm, getRadiusScale, obsmData.data, obsmData.isPending, obsmData.serverError]);
   const getBounds = (0, _react.useCallback)(() => {
     var _deckRef$current3, _deckRef$current4;
     const {
@@ -232,7 +244,7 @@ function Scatterplot(_ref) {
       id: "cherita-layer-scatterplot",
       pickable: true,
       data: data.positions,
-      radiusScale: radius,
+      radiusScale: radiusScale,
       radiusMinPixels: 1,
       getPosition: d => d,
       getFillColor: getFillColor,
@@ -275,7 +287,7 @@ function Scatterplot(_ref) {
         }
       }
     })];
-  }, [data.positions, features, getFillColor, getRadius, mode, radius, selectedFeatureIndexes]);
+  }, [data.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)(() => {

package/dist/cjs/helpers/map-helper.js

@@ -54,7 +54,8 @@ class MapHelper {
     return {
       longitude,
       latitude,
-      zoom
+      zoom,
+      bounds
     };
   }
 }

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

@@ -36,7 +36,7 @@ const INITIAL_VIEW_STATE = {
 export function Scatterplot(_ref) {
   var _settings$selectedObs3, _features$features2, _obsmData$serverError, _xData$serverError, _obsData$serverError, _labelObsData$serverE, _settings$selectedVar, _settings$selectedObs4, _obsmData$data;
   let {
-    radius = 30,
+    radius = null,
     setShowObs,
     setShowVars,
     isFullscreen = false
@@ -61,6 +61,7 @@ export function Scatterplot(_ref) {
     values: [],
     sliceValues: []
   });
+  const [radiusScale, setRadiusScale] = useState(radius || 1);
 
   // EditableGeoJsonLayer
   const [mode, setMode] = useState(() => ViewMode);
@@ -77,6 +78,15 @@ export function Scatterplot(_ref) {
   const labelObsData = useLabelObsData();
   // @TODO: assert length of obsmData, xData, obsData is equal
 
+  const getRadiusScale = useCallback(bounds => {
+    if (!!radius) return radius;
+    // From 28 degrees ~= 30km -> 30m radius
+    const lonDim = bounds[1][0] - bounds[0][0];
+    const latDim = bounds[1][1] - bounds[0][1];
+    const minDim = Math.min(lonDim, latDim);
+    const rs = 0.01 / minDim * 111111;
+    return rs;
+  }, [radius]);
   useEffect(() => {
     if (!obsmData.isPending && !obsmData.serverError) {
       var _deckRef$current, _deckRef$current2;
@@ -90,11 +100,13 @@ export function Scatterplot(_ref) {
       const {
         latitude,
         longitude,
-        zoom
+        zoom,
+        bounds
       } = 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
       });
+      setRadiusScale(getRadiusScale(bounds));
       setViewState(v => {
         return _objectSpread(_objectSpread({}, v), {}, {
           longitude: longitude,
@@ -110,7 +122,7 @@ export function Scatterplot(_ref) {
         });
       });
     }
-  }, [settings.selectedObsm, obsmData.data, obsmData.isPending, obsmData.serverError]);
+  }, [settings.selectedObsm, getRadiusScale, obsmData.data, obsmData.isPending, obsmData.serverError]);
   const getBounds = useCallback(() => {
     var _deckRef$current3, _deckRef$current4;
     const {
@@ -224,7 +236,7 @@ export function Scatterplot(_ref) {
       id: "cherita-layer-scatterplot",
       pickable: true,
       data: data.positions,
-      radiusScale: radius,
+      radiusScale: radiusScale,
       radiusMinPixels: 1,
       getPosition: d => d,
       getFillColor: getFillColor,
@@ -267,7 +279,7 @@ export function Scatterplot(_ref) {
         }
       }
     })];
-  }, [data.positions, features, getFillColor, getRadius, mode, radius, selectedFeatureIndexes]);
+  }, [data.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(() => {

package/dist/esm/helpers/map-helper.js

@@ -47,7 +47,8 @@ export class MapHelper {
     return {
       longitude,
       latitude,
-      zoom
+      zoom,
+      bounds
     };
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "1.3.0-dev.2025-06-04.0123fe8a",
+  "version": "1.3.0-dev.2025-06-04.6573608f",
   "author": "Haniffa Lab",
   "license": "MIT",
   "keywords": [
@@ -126,5 +126,5 @@
     "url": "https://github.com/haniffalab/cherita-react/issues"
   },
   "homepage": "https://github.com/haniffalab/cherita-react#readme",
-  "prereleaseSha": "0123fe8ae9b9e8cac1b41bc7c5f201a4bbec8214"
+  "prereleaseSha": "6573608f6ab26442b5badaea1be8d5dff17b1344"
 }