@haniffalab/cherita-react 1.3.0-dev.2025-06-06.f1eddad0 → 1.3.1

package/dist/cjs/context/SettingsContext.js

@@ -7,41 +7,45 @@ exports.SettingsDispatchContext = exports.SettingsContext = void 0;
 exports.SettingsProvider = SettingsProvider;
 exports.useSettings = useSettings;
 exports.useSettingsDispatch = useSettingsDispatch;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _constants = require("../constants/constants");
+var _Resolver = require("../utils/Resolver");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["buster", "timestamp"];
 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; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 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); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return 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,
+  // { name: "obs_name", omit: ["obs_item"], bins: {} }
   selectedVar: null,
+  // { name: "var_name", isSet: false } or { name: "var_set_name", isSet: true, vars: [{ name: "var1" }, { name: "var2" }] }
   selectedObsm: null,
-  selectedMultiObs: [],
+  // "obsm_name" (e.g. "X_umap")
   selectedMultiVar: [],
-  colorEncoding: null,
+  // [{ name: "var_name", isSet: false }, { name: "var_set_name", isSet: true, vars: [{ name: "var1" }, { name: "var2" }] }]
   labelObs: [],
+  // [ "obs_name1", "obs_name2" ]
   vars: [],
+  // [{ name: "var_name", isSet: false }, { name: "var_set_name", isSet: true, vars: [{ name: "var1" }, { name: "var2" }] }]
+  colorEncoding: null,
   sliceBy: {
     obs: false,
     polygons: false
   },
   polygons: {},
   controls: {
-    colorScale: "Viridis",
-    valueRange: [0, 1],
+    colorScale: 'Viridis',
     range: [0, 1],
+    // normalized
     colorAxis: {
       dmin: 0,
       dmax: 1,
@@ -69,12 +73,26 @@ const initialSettings = {
   pseudospatial: {
     maskSet: null,
     maskValues: null,
-    categoricalMode: _constants.PSEUDOSPATIAL_CATEGORICAL_MODES.ACROSS.value
+    categoricalMode: _constants.PSEUDOSPATIAL_CATEGORICAL_MODES.ACROSS.value,
+    refImg: {
+      visible: false,
+      opacity: 1
+    }
+  },
+  // dataset resolved values
+  data: {
+    // store resolved obs and vars from selectedObs, selectedVar, selectedMultiVar, vars, labelObs
+    // keys to be removed when not in any selection
+    obs: {},
+    vars: {},
+    // store maskSets and values
+    pseudospatial: {}
   }
 };
 
 // validate on initialization and reducer
 const validateSettings = settings => {
+  var _settings$selectedObs;
   // make sure selectedVar is in vars
   if (settings.selectedVar) {
     const inVars = _lodash.default.some(settings.vars, v => v.name === settings.selectedVar.name);
@@ -85,7 +103,7 @@ const validateSettings = settings => {
 
   // make sure selectedMultiVar are in vars
   if (settings.selectedMultiVar) {
-    const notInVars = _lodash.default.differenceBy(settings.selectedMultiVar, settings.vars, "name");
+    const notInVars = _lodash.default.differenceBy(settings.selectedMultiVar, settings.vars, 'name');
     if (notInVars.length) {
       settings.vars = [...settings.vars, ...notInVars];
     }
@@ -107,6 +125,21 @@ const validateSettings = settings => {
       settings.colorEncoding = null;
     }
   }
+
+  // pseudospatial
+  if (!settings.pseudospatial.maskSet && settings.pseudospatial.maskValues) {
+    settings.pseudospatial.maskValues = null;
+  }
+
+  // Keep only obs in use (selectedObs, labelObs) in data.obs
+  const obsNames = _lodash.default.uniq(_lodash.default.compact([(_settings$selectedObs = settings.selectedObs) === null || _settings$selectedObs === void 0 ? void 0 : _settings$selectedObs.name, ...settings.labelObs]));
+  const intersectionObs = _lodash.default.intersection(_lodash.default.keys(settings.data.obs), obsNames);
+  settings.data.obs = _lodash.default.pick(settings.data.obs, intersectionObs);
+
+  // Keep only vars in use (settings.vars) in data.vars
+  const varNames = _lodash.default.flatMap(settings.vars, v => v.isSet ? _lodash.default.map(v.vars, vv => vv.name) : v.name);
+  const intersectionVars = _lodash.default.intersection(_lodash.default.keys(settings.data.vars), varNames);
+  settings.data.vars = _lodash.default.pick(settings.data.vars, intersectionVars);
   return settings;
 };
 const initializer = _ref => {
@@ -115,9 +148,12 @@ const initializer = _ref => {
     defaultSettings,
     localSettings
   } = _ref;
-  const mergedSettings = canOverrideSettings ? _lodash.default.assign({}, initialSettings, defaultSettings, localSettings) : _lodash.default.assign({}, initialSettings, defaultSettings);
+  const mergedSettings = canOverrideSettings ? _lodash.default.defaultsDeep({}, localSettings, defaultSettings, initialSettings) : _lodash.default.defaultsDeep({}, defaultSettings, initialSettings);
   return validateSettings(mergedSettings);
 };
+const validate = settings => {
+  return settings ? validateSettings(settings) : null;
+};
 function SettingsProvider(_ref2) {
   let {
     dataset_url,
@@ -128,30 +164,59 @@ function SettingsProvider(_ref2) {
   const DATASET_STORAGE_KEY = "".concat(_constants.LOCAL_STORAGE_KEY, "-").concat(dataset_url);
   // Use localStorage directly instead of useLocalStorage due to unnecessary re-renders
   // https://github.com/uidotdev/usehooks/issues/157
-  const localSettings = JSON.parse(localStorage.getItem(DATASET_STORAGE_KEY)) || {};
-  const [settings, dispatch] = (0, _react.useReducer)(settingsReducer, {
+  let _ref3 = JSON.parse(localStorage.getItem(DATASET_STORAGE_KEY)) || {},
+    {
+      buster,
+      timestamp
+    } = _ref3,
+    localSettings = _objectWithoutProperties(_ref3, _excluded);
+
+  // If the buster is not set or does not match the current package version,
+  // reset localSettings to avoid stale data
+  if (!buster || buster !== "1.3.1") {
+    localSettings = {};
+  }
+  const initSettings = (0, _react.useRef)(initializer({
     canOverrideSettings,
     defaultSettings,
     localSettings
-  }, initializer);
+  }));
+  const resolvedSettings = (0, _Resolver.useResolver)(initSettings.current);
+  const [settings, dispatch] = (0, _react.useReducer)(settingsReducer, resolvedSettings, validate);
+  (0, _react.useEffect)(() => {
+    // If resolvedSettings is null, do not update settings
+    if (resolvedSettings) {
+      const validatedSettings = validateSettings(resolvedSettings);
+      console.log('Initial settings:', validatedSettings);
+      dispatch({
+        type: 'init',
+        settings: validatedSettings
+      });
+    }
+  }, [resolvedSettings]);
   (0, _react.useEffect)(() => {
-    if (canOverrideSettings) {
+    if (canOverrideSettings && settings) {
       try {
-        localStorage.setItem(DATASET_STORAGE_KEY, JSON.stringify(settings));
+        localStorage.setItem(DATASET_STORAGE_KEY, JSON.stringify(_objectSpread({
+          buster: "1.3.1" || '0.0.0',
+          timestamp: Date.now()
+        }, _lodash.default.omit(settings, 'data'))));
       } catch (err) {
-        if (err.code === 22 || err.code === 1014 || err.name === "QuotaExceededError" || err.name === "NS_ERROR_DOM_QUOTA_REACHED") {
-          console.err("Browser storage quota exceeded");
+        if (err.code === 22 || err.code === 1014 || err.name === 'QuotaExceededError' || err.name === 'NS_ERROR_DOM_QUOTA_REACHED') {
+          console.err('Browser storage quota exceeded');
         } else {
           console.err(err);
         }
       }
     }
   }, [DATASET_STORAGE_KEY, canOverrideSettings, settings]);
-  return /*#__PURE__*/_react.default.createElement(SettingsContext.Provider, {
-    value: settings
-  }, /*#__PURE__*/_react.default.createElement(SettingsDispatchContext.Provider, {
-    value: dispatch
-  }, children));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SettingsContext.Provider, {
+    value: settings,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SettingsDispatchContext.Provider, {
+      value: dispatch,
+      children: settings && children
+    })
+  });
 }
 function useSettings() {
   return (0, _react.useContext)(SettingsContext);
@@ -159,13 +224,70 @@ function useSettings() {
 function useSettingsDispatch() {
   return (0, _react.useContext)(SettingsDispatchContext);
 }
+const OBS_DATA_KEYS = ['name', 'type',
+// categorical and numerical
+'codes', 'codesMap', 'values', 'n_values', 'value_counts',
+// numerical
+'bins', 'min', 'max', 'mean', 'median', 'n_unique'];
+const splitObs = obs => {
+  if (!obs) return {
+    settings: null,
+    data: {}
+  };
+  const settings = _lodash.default.pick(obs, ['name', 'omit', 'bins']);
+  const data = obs ? {
+    [obs.name]: _lodash.default.pick(obs, OBS_DATA_KEYS)
+  } : {};
+  return {
+    settings,
+    data
+  };
+};
+const splitVar = v => {
+  if (!v) return {
+    settings: null,
+    data: {}
+  };
+  let settings, data;
+  if (v.isSet) {
+    settings = _objectSpread(_objectSpread({}, _lodash.default.pick(v, ['name', 'isSet'])), {}, {
+      vars: _lodash.default.map(v.vars, vv => ({
+        name: vv.name
+      }))
+    });
+    data = _lodash.default.fromPairs(_lodash.default.map(v.vars, vv => [vv.name, _lodash.default.pick(vv, ['name', 'index', 'matrix_index'])]));
+  } else {
+    settings = _lodash.default.pick(v, ['name', 'isSet']);
+    data = {
+      [v.name]: _lodash.default.pick(v, ['name', 'index', 'matrix_index'])
+    };
+  }
+  return {
+    settings,
+    data
+  };
+};
 function settingsReducer(settings, action) {
   switch (action.type) {
-    case "select.obs":
+    case 'init':
+      {
+        return action.settings;
+      }
+    case 'select.obs':
       {
         var _action$obs;
-        return _objectSpread(_objectSpread({}, settings), {}, {
-          selectedObs: action.obs,
+        const {
+          settings: obsSettings,
+          data: obsData
+        } = splitObs(action.obs);
+        return _objectSpread(_objectSpread(_objectSpread({}, settings), action.obs ? {
+          selectedObs: obsSettings,
+          data: _objectSpread(_objectSpread({}, settings.data), {}, {
+            obs: _objectSpread(_objectSpread({}, settings.data.obs), obsData)
+          })
+        } : {
+          selectedObs: null
+        }), {}, {
           controls: _objectSpread(_objectSpread({}, settings.controls), {}, {
             range: ((_action$obs = action.obs) === null || _action$obs === void 0 ? void 0 : _action$obs.type) === _constants.OBS_TYPES.CATEGORICAL ? [0, 1] : settings.controls.range
           }),
@@ -175,36 +297,50 @@ function settingsReducer(settings, action) {
           })
         });
       }
-    case "select.obsm":
+    case 'select.obsm':
       {
         return _objectSpread(_objectSpread({}, settings), {}, {
           selectedObsm: action.obsm
         });
       }
-    case "select.var":
+    case 'select.var':
       {
+        const {
+          settings: varSettings,
+          data: varData
+        } = splitVar(action.var);
         return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
-          selectedVar: action.var
+          selectedVar: varSettings,
+          data: _objectSpread(_objectSpread({}, settings.data), {}, {
+            vars: _objectSpread(_objectSpread({}, settings.data.vars), varData)
+          })
         }));
       }
-    case "select.multivar":
+    case 'select.multivar':
       {
         const inMultiVar = settings.selectedMultiVar.some(v => v.name === action.var.name);
         if (inMultiVar) {
           return validateSettings(_objectSpread({}, settings));
         } else {
+          const {
+            settings: varSettings,
+            data: varData
+          } = splitVar(action.var);
           return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
-            selectedMultiVar: [...settings.selectedMultiVar, action.var]
+            selectedMultiVar: [...settings.selectedMultiVar, varSettings],
+            data: _objectSpread(_objectSpread({}, settings.data), {}, {
+              vars: _objectSpread(_objectSpread({}, settings.data.vars), varData)
+            })
           }));
         }
       }
-    case "deselect.multivar":
+    case 'deselect.multivar':
       {
         return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
           selectedMultiVar: settings.selectedMultiVar.filter(v => v !== action.var.name)
         }));
       }
-    case "toggle.multivar":
+    case 'toggle.multivar':
       {
         const inMultiVar = settings.selectedMultiVar.some(v => v.name === action.var.name);
         if (inMultiVar) {
@@ -212,18 +348,25 @@ function settingsReducer(settings, action) {
             selectedMultiVar: settings.selectedMultiVar.filter(v => v.name !== action.var.name)
           }));
         } else {
+          const {
+            settings: varSettings,
+            data: varData
+          } = splitVar(action.var);
           return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
-            selectedMultiVar: [...settings.selectedMultiVar, action.var]
+            selectedMultiVar: [...settings.selectedMultiVar, varSettings],
+            data: _objectSpread(_objectSpread({}, settings.data), {}, {
+              vars: _objectSpread(_objectSpread({}, settings.data.vars), varData)
+            })
           }));
         }
       }
-    case "set.colorEncoding":
+    case 'set.colorEncoding':
       {
         return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
           colorEncoding: action.value
         }));
       }
-    case "reset.vars":
+    case 'reset.vars':
       {
         return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
           vars: [],
@@ -231,29 +374,36 @@ function settingsReducer(settings, action) {
           selectedMultiVar: []
         }));
       }
-    case "reset.multiVar":
+    case 'reset.multiVar':
       {
         return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
           selectedMultiVar: []
         }));
       }
-    case "reset.var":
+    case 'reset.var':
       {
         return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
           selectedVar: null
         }));
       }
-    case "add.var":
+    case 'add.var':
       {
         if (settings.vars.find(v => v.name === action.var.name)) {
           return settings;
         } else {
+          const {
+            settings: varSettings,
+            data: varData
+          } = splitVar(action.var);
           return _objectSpread(_objectSpread({}, settings), {}, {
-            vars: [...settings.vars, action.var]
+            vars: [...settings.vars, varSettings],
+            data: _objectSpread(_objectSpread({}, settings.data), {}, {
+              vars: _objectSpread(_objectSpread({}, settings.data.vars), varData)
+            })
           });
         }
       }
-    case "remove.var":
+    case 'remove.var':
       {
         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;
@@ -264,7 +414,7 @@ function settingsReducer(settings, action) {
           selectedMultiVar: selectedMultiVar
         }));
       }
-    case "add.varSet.var":
+    case 'add.varSet.var':
       {
         const varSet = settings.vars.find(s => s.isSet && s.name === action.varSet.name);
         if (!varSet) {
@@ -274,7 +424,11 @@ function settingsReducer(settings, action) {
           return settings;
         } else {
           var _settings$selectedVar2;
-          const varSetVars = [...varSet.vars, action.var];
+          const {
+            settings: varSettings,
+            data: varData
+          } = splitVar(action.var);
+          const varSetVars = [...varSet.vars, varSettings];
           const vars = settings.vars.map(v => {
             if (v.name === varSet.name) {
               return _objectSpread(_objectSpread({}, v), {}, {
@@ -299,11 +453,14 @@ function settingsReducer(settings, action) {
           return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
             vars: vars,
             selectedVar: selectedVar,
-            selectedMultiVar: selectedMultiVar
+            selectedMultiVar: selectedMultiVar,
+            data: _objectSpread(_objectSpread({}, settings.data), {}, {
+              vars: _objectSpread(_objectSpread({}, settings.data.vars), varData)
+            })
           }));
         }
       }
-    case "remove.varSet.var":
+    case 'remove.varSet.var':
       {
         const varSet = settings.vars.find(s => s.isSet && s.name === action.varSet.name);
         if (!varSet) {
@@ -355,7 +512,7 @@ function settingsReducer(settings, action) {
           }
         }
       }
-    case "set.controls.colorScale":
+    case 'set.controls.colorScale':
       {
         return _objectSpread(_objectSpread({}, settings), {}, {
           controls: _objectSpread(_objectSpread({}, settings.controls), {}, {
@@ -363,15 +520,7 @@ function settingsReducer(settings, action) {
           })
         });
       }
-    case "set.controls.valueRange":
-      {
-        return _objectSpread(_objectSpread({}, settings), {}, {
-          controls: _objectSpread(_objectSpread({}, settings.controls), {}, {
-            valueRange: action.valueRange
-          })
-        });
-      }
-    case "set.controls.range":
+    case 'set.controls.range':
       {
         return _objectSpread(_objectSpread({}, settings), {}, {
           controls: _objectSpread(_objectSpread({}, settings.controls), {}, {
@@ -379,7 +528,7 @@ function settingsReducer(settings, action) {
           })
         });
       }
-    case "set.controls.colorAxis":
+    case 'set.controls.colorAxis':
       {
         return _objectSpread(_objectSpread({}, settings), {}, {
           controls: _objectSpread(_objectSpread({}, settings.controls), {}, {
@@ -387,7 +536,7 @@ function settingsReducer(settings, action) {
           })
         });
       }
-    case "set.controls.colorAxis.crange":
+    case 'set.controls.colorAxis.crange':
       {
         return _objectSpread(_objectSpread({}, settings), {}, {
           controls: _objectSpread(_objectSpread({}, settings.controls), {}, {
@@ -398,7 +547,7 @@ function settingsReducer(settings, action) {
           })
         });
       }
-    case "set.controls.colorAxis.cmin":
+    case 'set.controls.colorAxis.cmin':
       {
         return _objectSpread(_objectSpread({}, settings), {}, {
           controls: _objectSpread(_objectSpread({}, settings.controls), {}, {
@@ -408,7 +557,7 @@ function settingsReducer(settings, action) {
           })
         });
       }
-    case "set.controls.colorAxis.cmax":
+    case 'set.controls.colorAxis.cmax':
       {
         return _objectSpread(_objectSpread({}, settings), {}, {
           controls: _objectSpread(_objectSpread({}, settings.controls), {}, {
@@ -418,7 +567,7 @@ function settingsReducer(settings, action) {
           })
         });
       }
-    case "set.controls.scale":
+    case 'set.controls.scale':
       {
         return _objectSpread(_objectSpread({}, settings), {}, {
           controls: _objectSpread(_objectSpread({}, settings.controls), {}, {
@@ -428,7 +577,7 @@ function settingsReducer(settings, action) {
           })
         });
       }
-    case "set.controls.meanOnlyExpressed":
+    case 'set.controls.meanOnlyExpressed':
       {
         return _objectSpread(_objectSpread({}, settings), {}, {
           controls: _objectSpread(_objectSpread({}, settings.controls), {}, {
@@ -436,7 +585,7 @@ function settingsReducer(settings, action) {
           })
         });
       }
-    case "set.controls.expressionCutoff":
+    case 'set.controls.expressionCutoff':
       {
         return _objectSpread(_objectSpread({}, settings), {}, {
           controls: _objectSpread(_objectSpread({}, settings.controls), {}, {
@@ -444,24 +593,31 @@ function settingsReducer(settings, action) {
           })
         });
       }
-    case "toggle.slice.obs":
+    case 'toggle.slice.obs':
       {
-        if (_lodash.default.isEqual(settings.selectedObs, action.obs)) {
+        if (settings.selectedObs && settings.selectedObs.name === action.obs.name) {
           return _objectSpread(_objectSpread({}, settings), {}, {
             sliceBy: _objectSpread(_objectSpread({}, settings.sliceBy), {}, {
               obs: !settings.sliceBy.obs
             })
           });
         } else {
+          const {
+            settings: obsSettings,
+            data: obsData
+          } = splitObs(action.obs);
           return _objectSpread(_objectSpread({}, settings), {}, {
-            selectedObs: action.obs,
+            selectedObs: obsSettings,
+            data: _objectSpread(_objectSpread({}, settings.data), {}, {
+              obs: _objectSpread(_objectSpread({}, settings.data.obs), obsData)
+            }),
             sliceBy: _objectSpread(_objectSpread({}, settings.sliceBy), {}, {
               obs: true
             })
           });
         }
       }
-    case "toggle.slice.polygons":
+    case 'toggle.slice.polygons':
       {
         return _objectSpread(_objectSpread({}, settings), {}, {
           sliceBy: _objectSpread(_objectSpread({}, settings.sliceBy), {}, {
@@ -469,7 +625,7 @@ function settingsReducer(settings, action) {
           })
         });
       }
-    case "disable.slice.polygons":
+    case 'disable.slice.polygons':
       {
         return _objectSpread(_objectSpread({}, settings), {}, {
           sliceBy: _objectSpread(_objectSpread({}, settings.sliceBy), {}, {
@@ -477,29 +633,36 @@ function settingsReducer(settings, action) {
           })
         });
       }
-    case "add.label.obs":
+    case 'add.label.obs':
       {
-        if (settings.labelObs.find(i => _lodash.default.isEqual(i, action.obs))) {
+        if (_lodash.default.includes(settings.labelObs, action.obs.name)) {
           return settings;
         } else {
+          const {
+            settings: obsSettings,
+            data: obsData
+          } = splitObs(action.obs);
           return _objectSpread(_objectSpread({}, settings), {}, {
-            labelObs: [...settings.labelObs, action.obs]
+            labelObs: [...settings.labelObs, obsSettings.name],
+            data: _objectSpread(_objectSpread({}, settings.data), {}, {
+              obs: _objectSpread(_objectSpread({}, settings.data.obs), obsData)
+            })
           });
         }
       }
-    case "remove.label.obs":
+    case 'remove.label.obs':
       {
-        return _objectSpread(_objectSpread({}, settings), {}, {
-          labelObs: settings.labelObs.filter(a => a.name !== action.obsName)
-        });
+        return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
+          labelObs: settings.labelObs.filter(a => a !== action.obsName)
+        }));
       }
-    case "reset.label.obs":
+    case 'reset.label.obs':
       {
-        return _objectSpread(_objectSpread({}, settings), {}, {
+        return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
           labelObs: []
-        });
+        }));
       }
-    case "set.varSort":
+    case 'set.varSort':
       {
         return _objectSpread(_objectSpread({}, settings), {}, {
           varSort: _objectSpread(_objectSpread({}, settings.varSort), {}, {
@@ -510,7 +673,7 @@ function settingsReducer(settings, action) {
           })
         });
       }
-    case "set.varSort.sort":
+    case 'set.varSort.sort':
       {
         return _objectSpread(_objectSpread({}, settings), {}, {
           varSort: _objectSpread(_objectSpread({}, settings.varSort), {}, {
@@ -520,7 +683,7 @@ function settingsReducer(settings, action) {
           })
         });
       }
-    case "set.varSort.sortOrder":
+    case 'set.varSort.sortOrder':
       {
         return _objectSpread(_objectSpread({}, settings), {}, {
           varSort: _objectSpread(_objectSpread({}, settings.varSort), {}, {
@@ -530,7 +693,7 @@ function settingsReducer(settings, action) {
           })
         });
       }
-    case "set.polygons":
+    case 'set.polygons':
       {
         return _objectSpread(_objectSpread({}, settings), {}, {
           polygons: _objectSpread(_objectSpread({}, settings.polygons), {}, {
@@ -538,7 +701,7 @@ function settingsReducer(settings, action) {
           })
         });
       }
-    case "set.pseudospatial.maskSet":
+    case 'set.pseudospatial.maskSet':
       {
         return _objectSpread(_objectSpread({}, settings), {}, {
           pseudospatial: _objectSpread(_objectSpread({}, settings.pseudospatial), {}, {
@@ -546,7 +709,7 @@ function settingsReducer(settings, action) {
           })
         });
       }
-    case "set.pseudospatial.maskValues":
+    case 'set.pseudospatial.maskValues':
       {
         return _objectSpread(_objectSpread({}, settings), {}, {
           pseudospatial: _objectSpread(_objectSpread({}, settings.pseudospatial), {}, {
@@ -554,7 +717,7 @@ function settingsReducer(settings, action) {
           })
         });
       }
-    case "set.pseudospatial.categoricalMode":
+    case 'set.pseudospatial.categoricalMode':
       {
         return _objectSpread(_objectSpread({}, settings), {}, {
           pseudospatial: _objectSpread(_objectSpread({}, settings.pseudospatial), {}, {
@@ -562,9 +725,29 @@ function settingsReducer(settings, action) {
           })
         });
       }
+    case 'toggle.pseudospatial.refImg.visible':
+      {
+        return _objectSpread(_objectSpread({}, settings), {}, {
+          pseudospatial: _objectSpread(_objectSpread({}, settings.pseudospatial), {}, {
+            refImg: _objectSpread(_objectSpread({}, settings.pseudospatial.refImg), {}, {
+              visible: !settings.pseudospatial.refImg.visible
+            })
+          })
+        });
+      }
+    case 'set.pseudospatial.refImg.opacity':
+      {
+        return _objectSpread(_objectSpread({}, settings), {}, {
+          pseudospatial: _objectSpread(_objectSpread({}, settings.pseudospatial), {}, {
+            refImg: _objectSpread(_objectSpread({}, settings.pseudospatial.refImg), {}, {
+              opacity: action.opacity
+            })
+          })
+        });
+      }
     default:
       {
-        throw Error("Unknown action: " + action.type);
+        throw Error('Unknown action: ' + action.type);
       }
   }
 }