@haniffalab/cherita-react 1.3.0-dev.2025-06-04.bee6fd81 → 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/context/SettingsContext.js

@@ -19,6 +19,11 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 const SettingsContext = exports.SettingsContext = /*#__PURE__*/(0, _react.createContext)(null);
 const SettingsDispatchContext = exports.SettingsDispatchContext = /*#__PURE__*/(0, _react.createContext)(null);
+
+// @TODO: consider splitting constant values and dataset-resolved values
+// e.g. store only obs name in selectedObs, and resolved obs data (counts, values, etc.) elsewhere
+// e.g. store only var name in selectedVar, and resolved var data (index, matrix_index) elsewhere
+// would simplify passing and validating defaultSettings and localSettings
 const initialSettings = {
   selectedObs: null,
   selectedVar: null,
@@ -67,13 +72,51 @@ const initialSettings = {
     categoricalMode: _constants.PSEUDOSPATIAL_CATEGORICAL_MODES.ACROSS.value
   }
 };
+
+// validate on initialization and reducer
+const validateSettings = settings => {
+  // make sure selectedVar is in vars
+  if (settings.selectedVar) {
+    const inVars = _lodash.default.some(settings.vars, v => v.name === settings.selectedVar.name);
+    if (!inVars) {
+      settings.vars = [...settings.vars, settings.selectedVar];
+    }
+  }
+
+  // make sure selectedMultiVar are in vars
+  if (settings.selectedMultiVar) {
+    const notInVars = _lodash.default.differenceBy(settings.selectedMultiVar, settings.vars, "name");
+    if (notInVars.length) {
+      settings.vars = [...settings.vars, ...notInVars];
+    }
+  }
+
+  // make sure there's a selectedVar if colorEncoding is VAR
+  if (settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR) {
+    if (!settings.selectedVar) {
+      settings.colorEncoding = null;
+    } else if (settings.selectedVar.isSet && !settings.selectedVar.vars.length) {
+      settings.selectedVar = null;
+      settings.colorEncoding = null;
+    }
+  }
+
+  // make sure there's a selectedObs if colorEncoding is OBS
+  if (settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS) {
+    if (!settings.selectedObs) {
+      settings.colorEncoding = null;
+    }
+  }
+  return settings;
+};
 const initializer = _ref => {
   let {
     canOverrideSettings,
     defaultSettings,
     localSettings
   } = _ref;
-  return canOverrideSettings ? _lodash.default.assign({}, initialSettings, defaultSettings, localSettings) : _lodash.default.assign({}, initialSettings, defaultSettings);
+  const mergedSettings = canOverrideSettings ? _lodash.default.assign({}, initialSettings, defaultSettings, localSettings) : _lodash.default.assign({}, initialSettings, defaultSettings);
+  return validateSettings(mergedSettings);
 };
 function SettingsProvider(_ref2) {
   let {
@@ -140,77 +183,65 @@ function settingsReducer(settings, action) {
       }
     case "select.var":
       {
-        if (settings.vars.find(v => _lodash.default.isEqual(v, action.var))) {
-          return _objectSpread(_objectSpread({}, settings), {}, {
-            selectedVar: action.var
-          });
-        } else {
-          return _objectSpread(_objectSpread({}, settings), {}, {
-            selectedVar: action.var,
-            vars: [...settings.vars, action.var]
-          });
-        }
+        return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
+          selectedVar: action.var
+        }));
       }
     case "select.multivar":
       {
-        const vars = settings.vars.find(v => _lodash.default.isEqual(v, action.var)) ? settings.vars : [...settings.vars, action.var];
-        if (settings.selectedMultiVar.find(v => _lodash.default.isEqual(v, action.var))) {
-          return _objectSpread(_objectSpread({}, settings), {}, {
-            vars: vars
-          });
+        const inMultiVar = settings.selectedMultiVar.some(v => v.name === action.var.name);
+        if (inMultiVar) {
+          return validateSettings(_objectSpread({}, settings));
         } else {
-          return _objectSpread(_objectSpread({}, settings), {}, {
-            selectedMultiVar: [...settings.selectedMultiVar, action.var],
-            vars: vars
-          });
+          return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
+            selectedMultiVar: [...settings.selectedMultiVar, action.var]
+          }));
         }
       }
     case "deselect.multivar":
       {
-        return _objectSpread(_objectSpread({}, settings), {}, {
+        return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
           selectedMultiVar: settings.selectedMultiVar.filter(v => v !== action.var.name)
-        });
+        }));
       }
     case "toggle.multivar":
       {
         const inMultiVar = settings.selectedMultiVar.some(v => v.name === action.var.name);
         if (inMultiVar) {
-          return _objectSpread(_objectSpread({}, settings), {}, {
+          return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
             selectedMultiVar: settings.selectedMultiVar.filter(v => v.name !== action.var.name)
-          });
+          }));
         } else {
-          return _objectSpread(_objectSpread({}, settings), {}, {
+          return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
             selectedMultiVar: [...settings.selectedMultiVar, action.var]
-          });
+          }));
         }
       }
     case "set.colorEncoding":
       {
-        return _objectSpread(_objectSpread({}, settings), {}, {
+        return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
           colorEncoding: action.value
-        });
+        }));
       }
     case "reset.vars":
       {
-        return _objectSpread(_objectSpread({}, settings), {}, {
+        return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
           vars: [],
           selectedVar: null,
           selectedMultiVar: []
-        });
+        }));
       }
     case "reset.multiVar":
       {
-        return _objectSpread(_objectSpread({}, settings), {}, {
-          selectedMultiVar: [],
-          colorEncoding: settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? null : settings.colorEncoding
-        });
+        return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
+          selectedMultiVar: []
+        }));
       }
     case "reset.var":
       {
-        return _objectSpread(_objectSpread({}, settings), {}, {
-          selectedVar: null,
-          colorEncoding: settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? null : settings.colorEncoding
-        });
+        return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
+          selectedVar: null
+        }));
       }
     case "add.var":
       {
@@ -227,11 +258,11 @@ function settingsReducer(settings, action) {
         var _settings$selectedVar;
         const selectedVar = ((_settings$selectedVar = settings.selectedVar) === null || _settings$selectedVar === void 0 ? void 0 : _settings$selectedVar.name) === action.var.name ? null : settings.selectedVar;
         const selectedMultiVar = settings.selectedMultiVar.filter(v => v.name !== action.var.name);
-        return _objectSpread(_objectSpread({}, settings), {}, {
+        return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
           vars: settings.vars.filter(a => a.name !== action.var.name),
           selectedVar: selectedVar,
           selectedMultiVar: selectedMultiVar
-        });
+        }));
       }
     case "add.varSet.var":
       {
@@ -265,11 +296,11 @@ function settingsReducer(settings, action) {
               return v;
             }
           });
-          return _objectSpread(_objectSpread({}, settings), {}, {
+          return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
             vars: vars,
             selectedVar: selectedVar,
             selectedMultiVar: selectedMultiVar
-          });
+          }));
         }
       }
     case "remove.varSet.var":
@@ -296,11 +327,11 @@ function settingsReducer(settings, action) {
             var _settings$selectedVar3;
             const selectedVar = ((_settings$selectedVar3 = settings.selectedVar) === null || _settings$selectedVar3 === void 0 ? void 0 : _settings$selectedVar3.name) === action.varSet.name ? null : settings.selectedVar;
             const selectedMultiVar = settings.selectedMultiVar.filter(v => v.name !== action.varSet.name);
-            return _objectSpread(_objectSpread({}, settings), {}, {
+            return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
               vars: vars,
               selectedVar: selectedVar,
               selectedMultiVar: selectedMultiVar
-            });
+            }));
           } else {
             var _settings$selectedVar4;
             // Update selected if varSet is selected
@@ -316,11 +347,11 @@ function settingsReducer(settings, action) {
                 return v;
               }
             });
-            return _objectSpread(_objectSpread({}, settings), {}, {
+            return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
               vars: vars,
               selectedVar: selectedVar,
               selectedMultiVar: selectedMultiVar
-            });
+            }));
           }
         }
       }

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/context/SettingsContext.js

@@ -8,6 +8,11 @@ import _ from "lodash";
 import { COLOR_ENCODINGS, DOTPLOT_SCALES, LOCAL_STORAGE_KEY, MATRIXPLOT_SCALES, OBS_TYPES, PSEUDOSPATIAL_CATEGORICAL_MODES, VAR_SORT, VAR_SORT_ORDER, VIOLINPLOT_SCALES } from "../constants/constants";
 export const SettingsContext = /*#__PURE__*/createContext(null);
 export const SettingsDispatchContext = /*#__PURE__*/createContext(null);
+
+// @TODO: consider splitting constant values and dataset-resolved values
+// e.g. store only obs name in selectedObs, and resolved obs data (counts, values, etc.) elsewhere
+// e.g. store only var name in selectedVar, and resolved var data (index, matrix_index) elsewhere
+// would simplify passing and validating defaultSettings and localSettings
 const initialSettings = {
   selectedObs: null,
   selectedVar: null,
@@ -56,13 +61,51 @@ const initialSettings = {
     categoricalMode: PSEUDOSPATIAL_CATEGORICAL_MODES.ACROSS.value
   }
 };
+
+// validate on initialization and reducer
+const validateSettings = settings => {
+  // make sure selectedVar is in vars
+  if (settings.selectedVar) {
+    const inVars = _.some(settings.vars, v => v.name === settings.selectedVar.name);
+    if (!inVars) {
+      settings.vars = [...settings.vars, settings.selectedVar];
+    }
+  }
+
+  // make sure selectedMultiVar are in vars
+  if (settings.selectedMultiVar) {
+    const notInVars = _.differenceBy(settings.selectedMultiVar, settings.vars, "name");
+    if (notInVars.length) {
+      settings.vars = [...settings.vars, ...notInVars];
+    }
+  }
+
+  // make sure there's a selectedVar if colorEncoding is VAR
+  if (settings.colorEncoding === COLOR_ENCODINGS.VAR) {
+    if (!settings.selectedVar) {
+      settings.colorEncoding = null;
+    } else if (settings.selectedVar.isSet && !settings.selectedVar.vars.length) {
+      settings.selectedVar = null;
+      settings.colorEncoding = null;
+    }
+  }
+
+  // make sure there's a selectedObs if colorEncoding is OBS
+  if (settings.colorEncoding === COLOR_ENCODINGS.OBS) {
+    if (!settings.selectedObs) {
+      settings.colorEncoding = null;
+    }
+  }
+  return settings;
+};
 const initializer = _ref => {
   let {
     canOverrideSettings,
     defaultSettings,
     localSettings
   } = _ref;
-  return canOverrideSettings ? _.assign({}, initialSettings, defaultSettings, localSettings) : _.assign({}, initialSettings, defaultSettings);
+  const mergedSettings = canOverrideSettings ? _.assign({}, initialSettings, defaultSettings, localSettings) : _.assign({}, initialSettings, defaultSettings);
+  return validateSettings(mergedSettings);
 };
 export function SettingsProvider(_ref2) {
   let {
@@ -129,77 +172,65 @@ function settingsReducer(settings, action) {
       }
     case "select.var":
       {
-        if (settings.vars.find(v => _.isEqual(v, action.var))) {
-          return _objectSpread(_objectSpread({}, settings), {}, {
-            selectedVar: action.var
-          });
-        } else {
-          return _objectSpread(_objectSpread({}, settings), {}, {
-            selectedVar: action.var,
-            vars: [...settings.vars, action.var]
-          });
-        }
+        return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
+          selectedVar: action.var
+        }));
       }
     case "select.multivar":
       {
-        const vars = settings.vars.find(v => _.isEqual(v, action.var)) ? settings.vars : [...settings.vars, action.var];
-        if (settings.selectedMultiVar.find(v => _.isEqual(v, action.var))) {
-          return _objectSpread(_objectSpread({}, settings), {}, {
-            vars: vars
-          });
+        const inMultiVar = settings.selectedMultiVar.some(v => v.name === action.var.name);
+        if (inMultiVar) {
+          return validateSettings(_objectSpread({}, settings));
         } else {
-          return _objectSpread(_objectSpread({}, settings), {}, {
-            selectedMultiVar: [...settings.selectedMultiVar, action.var],
-            vars: vars
-          });
+          return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
+            selectedMultiVar: [...settings.selectedMultiVar, action.var]
+          }));
         }
       }
     case "deselect.multivar":
       {
-        return _objectSpread(_objectSpread({}, settings), {}, {
+        return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
           selectedMultiVar: settings.selectedMultiVar.filter(v => v !== action.var.name)
-        });
+        }));
       }
     case "toggle.multivar":
       {
         const inMultiVar = settings.selectedMultiVar.some(v => v.name === action.var.name);
         if (inMultiVar) {
-          return _objectSpread(_objectSpread({}, settings), {}, {
+          return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
             selectedMultiVar: settings.selectedMultiVar.filter(v => v.name !== action.var.name)
-          });
+          }));
         } else {
-          return _objectSpread(_objectSpread({}, settings), {}, {
+          return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
             selectedMultiVar: [...settings.selectedMultiVar, action.var]
-          });
+          }));
         }
       }
     case "set.colorEncoding":
       {
-        return _objectSpread(_objectSpread({}, settings), {}, {
+        return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
           colorEncoding: action.value
-        });
+        }));
       }
     case "reset.vars":
       {
-        return _objectSpread(_objectSpread({}, settings), {}, {
+        return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
           vars: [],
           selectedVar: null,
           selectedMultiVar: []
-        });
+        }));
       }
     case "reset.multiVar":
       {
-        return _objectSpread(_objectSpread({}, settings), {}, {
-          selectedMultiVar: [],
-          colorEncoding: settings.colorEncoding === COLOR_ENCODINGS.VAR ? null : settings.colorEncoding
-        });
+        return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
+          selectedMultiVar: []
+        }));
       }
     case "reset.var":
       {
-        return _objectSpread(_objectSpread({}, settings), {}, {
-          selectedVar: null,
-          colorEncoding: settings.colorEncoding === COLOR_ENCODINGS.VAR ? null : settings.colorEncoding
-        });
+        return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
+          selectedVar: null
+        }));
       }
     case "add.var":
       {
@@ -216,11 +247,11 @@ function settingsReducer(settings, action) {
         var _settings$selectedVar;
         const selectedVar = ((_settings$selectedVar = settings.selectedVar) === null || _settings$selectedVar === void 0 ? void 0 : _settings$selectedVar.name) === action.var.name ? null : settings.selectedVar;
         const selectedMultiVar = settings.selectedMultiVar.filter(v => v.name !== action.var.name);
-        return _objectSpread(_objectSpread({}, settings), {}, {
+        return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
           vars: settings.vars.filter(a => a.name !== action.var.name),
           selectedVar: selectedVar,
           selectedMultiVar: selectedMultiVar
-        });
+        }));
       }
     case "add.varSet.var":
       {
@@ -254,11 +285,11 @@ function settingsReducer(settings, action) {
               return v;
             }
           });
-          return _objectSpread(_objectSpread({}, settings), {}, {
+          return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
             vars: vars,
             selectedVar: selectedVar,
             selectedMultiVar: selectedMultiVar
-          });
+          }));
         }
       }
     case "remove.varSet.var":
@@ -285,11 +316,11 @@ function settingsReducer(settings, action) {
             var _settings$selectedVar3;
             const selectedVar = ((_settings$selectedVar3 = settings.selectedVar) === null || _settings$selectedVar3 === void 0 ? void 0 : _settings$selectedVar3.name) === action.varSet.name ? null : settings.selectedVar;
             const selectedMultiVar = settings.selectedMultiVar.filter(v => v.name !== action.varSet.name);
-            return _objectSpread(_objectSpread({}, settings), {}, {
+            return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
               vars: vars,
               selectedVar: selectedVar,
               selectedMultiVar: selectedMultiVar
-            });
+            }));
           } else {
             var _settings$selectedVar4;
             // Update selected if varSet is selected
@@ -305,11 +336,11 @@ function settingsReducer(settings, action) {
                 return v;
               }
             });
-            return _objectSpread(_objectSpread({}, settings), {}, {
+            return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
               vars: vars,
               selectedVar: selectedVar,
               selectedMultiVar: selectedMultiVar
-            });
+            }));
           }
         }
       }

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.bee6fd81",
+  "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": "bee6fd816597b2a731ce2565b16db2d9fa63bb06"
+  "prereleaseSha": "6573608f6ab26442b5badaea1be8d5dff17b1344"
 }