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

package/dist/esm/context/SettingsContext.js

@@ -1,36 +1,41 @@
+const _excluded = ["buster", "timestamp"];
 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); }
-import React, { createContext, useContext, useEffect, useReducer } from "react";
-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";
+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; }
+import { createContext, useContext, useEffect, useReducer, useRef } from 'react';
+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';
+import { useResolver } from '../utils/Resolver';
+import { jsx as _jsx } from "react/jsx-runtime";
 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,
+  // { 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,
@@ -58,12 +63,26 @@ const initialSettings = {
   pseudospatial: {
     maskSet: null,
     maskValues: null,
-    categoricalMode: PSEUDOSPATIAL_CATEGORICAL_MODES.ACROSS.value
+    categoricalMode: 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 = _.some(settings.vars, v => v.name === settings.selectedVar.name);
@@ -74,7 +93,7 @@ const validateSettings = settings => {
 
   // make sure selectedMultiVar are in vars
   if (settings.selectedMultiVar) {
-    const notInVars = _.differenceBy(settings.selectedMultiVar, settings.vars, "name");
+    const notInVars = _.differenceBy(settings.selectedMultiVar, settings.vars, 'name');
     if (notInVars.length) {
       settings.vars = [...settings.vars, ...notInVars];
     }
@@ -96,6 +115,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 = _.uniq(_.compact([(_settings$selectedObs = settings.selectedObs) === null || _settings$selectedObs === void 0 ? void 0 : _settings$selectedObs.name, ...settings.labelObs]));
+  const intersectionObs = _.intersection(_.keys(settings.data.obs), obsNames);
+  settings.data.obs = _.pick(settings.data.obs, intersectionObs);
+
+  // Keep only vars in use (settings.vars) in data.vars
+  const varNames = _.flatMap(settings.vars, v => v.isSet ? _.map(v.vars, vv => vv.name) : v.name);
+  const intersectionVars = _.intersection(_.keys(settings.data.vars), varNames);
+  settings.data.vars = _.pick(settings.data.vars, intersectionVars);
   return settings;
 };
 const initializer = _ref => {
@@ -104,9 +138,12 @@ const initializer = _ref => {
     defaultSettings,
     localSettings
   } = _ref;
-  const mergedSettings = canOverrideSettings ? _.assign({}, initialSettings, defaultSettings, localSettings) : _.assign({}, initialSettings, defaultSettings);
+  const mergedSettings = canOverrideSettings ? _.defaultsDeep({}, localSettings, defaultSettings, initialSettings) : _.defaultsDeep({}, defaultSettings, initialSettings);
   return validateSettings(mergedSettings);
 };
+const validate = settings => {
+  return settings ? validateSettings(settings) : null;
+};
 export function SettingsProvider(_ref2) {
   let {
     dataset_url,
@@ -117,30 +154,59 @@ export function SettingsProvider(_ref2) {
   const DATASET_STORAGE_KEY = "".concat(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] = 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-dev.2025-10-29.6de4119f") {
+    localSettings = {};
+  }
+  const initSettings = useRef(initializer({
     canOverrideSettings,
     defaultSettings,
     localSettings
-  }, initializer);
+  }));
+  const resolvedSettings = useResolver(initSettings.current);
+  const [settings, dispatch] = useReducer(settingsReducer, resolvedSettings, validate);
+  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]);
   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-dev.2025-10-29.6de4119f" || '0.0.0',
+          timestamp: Date.now()
+        }, _.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.createElement(SettingsContext.Provider, {
-    value: settings
-  }, /*#__PURE__*/React.createElement(SettingsDispatchContext.Provider, {
-    value: dispatch
-  }, children));
+  return /*#__PURE__*/_jsx(SettingsContext.Provider, {
+    value: settings,
+    children: /*#__PURE__*/_jsx(SettingsDispatchContext.Provider, {
+      value: dispatch,
+      children: settings && children
+    })
+  });
 }
 export function useSettings() {
   return useContext(SettingsContext);
@@ -148,13 +214,70 @@ export function useSettings() {
 export function useSettingsDispatch() {
   return 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 = _.pick(obs, ['name', 'omit', 'bins']);
+  const data = obs ? {
+    [obs.name]: _.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({}, _.pick(v, ['name', 'isSet'])), {}, {
+      vars: _.map(v.vars, vv => ({
+        name: vv.name
+      }))
+    });
+    data = _.fromPairs(_.map(v.vars, vv => [vv.name, _.pick(vv, ['name', 'index', 'matrix_index'])]));
+  } else {
+    settings = _.pick(v, ['name', 'isSet']);
+    data = {
+      [v.name]: _.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) === OBS_TYPES.CATEGORICAL ? [0, 1] : settings.controls.range
           }),
@@ -164,36 +287,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) {
@@ -201,18 +338,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: [],
@@ -220,29 +364,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;
@@ -253,7 +404,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) {
@@ -263,7 +414,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), {}, {
@@ -288,11 +443,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) {
@@ -344,7 +502,7 @@ function settingsReducer(settings, action) {
           }
         }
       }
-    case "set.controls.colorScale":
+    case 'set.controls.colorScale':
       {
         return _objectSpread(_objectSpread({}, settings), {}, {
           controls: _objectSpread(_objectSpread({}, settings.controls), {}, {
@@ -352,15 +510,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), {}, {
@@ -368,7 +518,7 @@ function settingsReducer(settings, action) {
           })
         });
       }
-    case "set.controls.colorAxis":
+    case 'set.controls.colorAxis':
       {
         return _objectSpread(_objectSpread({}, settings), {}, {
           controls: _objectSpread(_objectSpread({}, settings.controls), {}, {
@@ -376,7 +526,7 @@ function settingsReducer(settings, action) {
           })
         });
       }
-    case "set.controls.colorAxis.crange":
+    case 'set.controls.colorAxis.crange':
       {
         return _objectSpread(_objectSpread({}, settings), {}, {
           controls: _objectSpread(_objectSpread({}, settings.controls), {}, {
@@ -387,7 +537,7 @@ function settingsReducer(settings, action) {
           })
         });
       }
-    case "set.controls.colorAxis.cmin":
+    case 'set.controls.colorAxis.cmin':
       {
         return _objectSpread(_objectSpread({}, settings), {}, {
           controls: _objectSpread(_objectSpread({}, settings.controls), {}, {
@@ -397,7 +547,7 @@ function settingsReducer(settings, action) {
           })
         });
       }
-    case "set.controls.colorAxis.cmax":
+    case 'set.controls.colorAxis.cmax':
       {
         return _objectSpread(_objectSpread({}, settings), {}, {
           controls: _objectSpread(_objectSpread({}, settings.controls), {}, {
@@ -407,7 +557,7 @@ function settingsReducer(settings, action) {
           })
         });
       }
-    case "set.controls.scale":
+    case 'set.controls.scale':
       {
         return _objectSpread(_objectSpread({}, settings), {}, {
           controls: _objectSpread(_objectSpread({}, settings.controls), {}, {
@@ -417,7 +567,7 @@ function settingsReducer(settings, action) {
           })
         });
       }
-    case "set.controls.meanOnlyExpressed":
+    case 'set.controls.meanOnlyExpressed':
       {
         return _objectSpread(_objectSpread({}, settings), {}, {
           controls: _objectSpread(_objectSpread({}, settings.controls), {}, {
@@ -425,7 +575,7 @@ function settingsReducer(settings, action) {
           })
         });
       }
-    case "set.controls.expressionCutoff":
+    case 'set.controls.expressionCutoff':
       {
         return _objectSpread(_objectSpread({}, settings), {}, {
           controls: _objectSpread(_objectSpread({}, settings.controls), {}, {
@@ -433,24 +583,31 @@ function settingsReducer(settings, action) {
           })
         });
       }
-    case "toggle.slice.obs":
+    case 'toggle.slice.obs':
       {
-        if (_.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), {}, {
@@ -458,7 +615,7 @@ function settingsReducer(settings, action) {
           })
         });
       }
-    case "disable.slice.polygons":
+    case 'disable.slice.polygons':
       {
         return _objectSpread(_objectSpread({}, settings), {}, {
           sliceBy: _objectSpread(_objectSpread({}, settings.sliceBy), {}, {
@@ -466,29 +623,36 @@ function settingsReducer(settings, action) {
           })
         });
       }
-    case "add.label.obs":
+    case 'add.label.obs':
       {
-        if (settings.labelObs.find(i => _.isEqual(i, action.obs))) {
+        if (_.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), {}, {
@@ -499,7 +663,7 @@ function settingsReducer(settings, action) {
           })
         });
       }
-    case "set.varSort.sort":
+    case 'set.varSort.sort':
       {
         return _objectSpread(_objectSpread({}, settings), {}, {
           varSort: _objectSpread(_objectSpread({}, settings.varSort), {}, {
@@ -509,7 +673,7 @@ function settingsReducer(settings, action) {
           })
         });
       }
-    case "set.varSort.sortOrder":
+    case 'set.varSort.sortOrder':
       {
         return _objectSpread(_objectSpread({}, settings), {}, {
           varSort: _objectSpread(_objectSpread({}, settings.varSort), {}, {
@@ -519,7 +683,7 @@ function settingsReducer(settings, action) {
           })
         });
       }
-    case "set.polygons":
+    case 'set.polygons':
       {
         return _objectSpread(_objectSpread({}, settings), {}, {
           polygons: _objectSpread(_objectSpread({}, settings.polygons), {}, {
@@ -527,7 +691,7 @@ function settingsReducer(settings, action) {
           })
         });
       }
-    case "set.pseudospatial.maskSet":
+    case 'set.pseudospatial.maskSet':
       {
         return _objectSpread(_objectSpread({}, settings), {}, {
           pseudospatial: _objectSpread(_objectSpread({}, settings.pseudospatial), {}, {
@@ -535,7 +699,7 @@ function settingsReducer(settings, action) {
           })
         });
       }
-    case "set.pseudospatial.maskValues":
+    case 'set.pseudospatial.maskValues':
       {
         return _objectSpread(_objectSpread({}, settings), {}, {
           pseudospatial: _objectSpread(_objectSpread({}, settings.pseudospatial), {}, {
@@ -543,7 +707,7 @@ function settingsReducer(settings, action) {
           })
         });
       }
-    case "set.pseudospatial.categoricalMode":
+    case 'set.pseudospatial.categoricalMode':
       {
         return _objectSpread(_objectSpread({}, settings), {}, {
           pseudospatial: _objectSpread(_objectSpread({}, settings.pseudospatial), {}, {
@@ -551,9 +715,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);
       }
   }
 }