@haniffalab/cherita-react 1.2.0 → 1.3.0-dev.2025-05-29.ee7e9b72

package/dist/cjs/components/pseudospatial/Pseudospatial.js

@@ -14,18 +14,25 @@ var _reactPlotly = _interopRequireDefault(require("react-plotly.js"));
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
 var _FilterContext = require("../../context/FilterContext");
+var _SettingsContext = require("../../context/SettingsContext");
 var _colorHelper = require("../../helpers/color-helper");
 var _ImageViewer = require("../../utils/ImageViewer");
 var _Legend = require("../../utils/Legend");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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); }
 _fontawesomeSvgCore.library.add(_freeSolidSvgIcons.faSliders);
 function usePseudospatialData(plotType) {
+  var _settings$selectedVar5, _settings$selectedVar6, _settings$selectedVar7, _settings$selectedVar8;
   const ENDPOINT = "pseudospatial";
   const dataset = (0, _DatasetContext.useDataset)();
+  const settings = (0, _SettingsContext.useSettings)();
   const {
     obsIndices,
     isSliced
@@ -33,50 +40,59 @@ function usePseudospatialData(plotType) {
   const baseParams = (0, _react.useMemo)(() => {
     return {
       url: dataset.url,
-      maskSet: dataset.pseudospatial.maskSet,
-      maskValues: dataset.pseudospatial.maskValues,
+      maskSet: settings.pseudospatial.maskSet,
+      maskValues: settings.pseudospatial.maskValues,
       obsIndices: isSliced ? [...(obsIndices || [])] : null,
       varNamesCol: dataset.varNamesCol,
       showColorbar: false,
       format: "json"
     };
-  }, [dataset.url, dataset.pseudospatial.maskSet, dataset.pseudospatial.maskValues, dataset.varNamesCol, isSliced, obsIndices]);
+  }, [dataset.url, settings.pseudospatial.maskSet, settings.pseudospatial.maskValues, dataset.varNamesCol, isSliced, obsIndices]);
   const getPlotParams = (0, _react.useCallback)(() => {
     if (plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.GENE) {
-      return {
-        varKey: dataset.selectedVar?.isSet ? {
-          name: dataset.selectedVar?.name,
-          indices: dataset.selectedVar?.vars.map(v => v.index)
-        } : dataset.selectedVar?.index,
-        ...(dataset.sliceBy.obs ? {
-          obsCol: dataset.selectedObs,
-          obsValues: !dataset.selectedObs?.omit.length ? null : _lodash.default.difference(_lodash.default.values(dataset.selectedObs?.codes), dataset.selectedObs?.omit).map(c => dataset.selectedObs?.codesMap[c])
-        } : {})
-      };
+      var _settings$selectedVar, _settings$selectedVar2, _settings$selectedVar3, _settings$selectedVar4, _settings$selectedObs, _settings$selectedObs2, _settings$selectedObs3;
+      return _objectSpread({
+        varKey: (_settings$selectedVar = settings.selectedVar) !== null && _settings$selectedVar !== void 0 && _settings$selectedVar.isSet ? {
+          name: (_settings$selectedVar2 = settings.selectedVar) === null || _settings$selectedVar2 === void 0 ? void 0 : _settings$selectedVar2.name,
+          indices: (_settings$selectedVar3 = settings.selectedVar) === null || _settings$selectedVar3 === void 0 ? void 0 : _settings$selectedVar3.vars.map(v => v.index)
+        } : (_settings$selectedVar4 = settings.selectedVar) === null || _settings$selectedVar4 === void 0 ? void 0 : _settings$selectedVar4.index
+      }, settings.sliceBy.obs ? {
+        obsCol: settings.selectedObs,
+        obsValues: !((_settings$selectedObs = settings.selectedObs) !== null && _settings$selectedObs !== void 0 && _settings$selectedObs.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_settings$selectedObs2 = settings.selectedObs) === null || _settings$selectedObs2 === void 0 ? void 0 : _settings$selectedObs2.codes), (_settings$selectedObs3 = settings.selectedObs) === null || _settings$selectedObs3 === void 0 ? void 0 : _settings$selectedObs3.omit).map(c => {
+          var _settings$selectedObs4;
+          return (_settings$selectedObs4 = settings.selectedObs) === null || _settings$selectedObs4 === void 0 ? void 0 : _settings$selectedObs4.codesMap[c];
+        })
+      } : {});
     } else if (plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL) {
+      var _settings$selectedObs5, _settings$selectedObs6, _settings$selectedObs7;
       return {
-        obsCol: dataset.selectedObs,
-        obsValues: !dataset.selectedObs?.omit.length ? null : _lodash.default.difference(_lodash.default.values(dataset.selectedObs?.codes), dataset.selectedObs?.omit).map(c => dataset.selectedObs?.codesMap[c]),
-        mode: dataset.pseudospatial.categoricalMode
+        obsCol: settings.selectedObs,
+        obsValues: !((_settings$selectedObs5 = settings.selectedObs) !== null && _settings$selectedObs5 !== void 0 && _settings$selectedObs5.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_settings$selectedObs6 = settings.selectedObs) === null || _settings$selectedObs6 === void 0 ? void 0 : _settings$selectedObs6.codes), (_settings$selectedObs7 = settings.selectedObs) === null || _settings$selectedObs7 === void 0 ? void 0 : _settings$selectedObs7.omit).map(c => {
+          var _settings$selectedObs8;
+          return (_settings$selectedObs8 = settings.selectedObs) === null || _settings$selectedObs8 === void 0 ? void 0 : _settings$selectedObs8.codesMap[c];
+        }),
+        mode: settings.pseudospatial.categoricalMode
       };
     } else if (plotType === "continuous") {
+      var _settings$selectedObs9, _settings$selectedObs0, _settings$selectedObs1;
       return {
-        obsCol: dataset.selectedObs,
-        obsValues: !dataset.selectedObs?.omit.length ? null : _lodash.default.difference(_lodash.default.values(dataset.selectedObs?.codes), dataset.selectedObs?.omit).map(c => dataset.selectedObs?.codesMap[c])
+        obsCol: settings.selectedObs,
+        obsValues: !((_settings$selectedObs9 = settings.selectedObs) !== null && _settings$selectedObs9 !== void 0 && _settings$selectedObs9.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_settings$selectedObs0 = settings.selectedObs) === null || _settings$selectedObs0 === void 0 ? void 0 : _settings$selectedObs0.codes), (_settings$selectedObs1 = settings.selectedObs) === null || _settings$selectedObs1 === void 0 ? void 0 : _settings$selectedObs1.omit).map(c => {
+          var _settings$selectedObs10;
+          return (_settings$selectedObs10 = settings.selectedObs) === null || _settings$selectedObs10 === void 0 ? void 0 : _settings$selectedObs10.codesMap[c];
+        })
       };
     }
-  }, [dataset.pseudospatial.categoricalMode, dataset.selectedObs, dataset.selectedVar?.index, dataset.selectedVar?.isSet, dataset.selectedVar?.name, dataset.selectedVar?.vars, dataset.sliceBy.obs, plotType]);
+  }, [settings.pseudospatial.categoricalMode, settings.selectedObs, (_settings$selectedVar5 = settings.selectedVar) === null || _settings$selectedVar5 === void 0 ? void 0 : _settings$selectedVar5.index, (_settings$selectedVar6 = settings.selectedVar) === null || _settings$selectedVar6 === void 0 ? void 0 : _settings$selectedVar6.isSet, (_settings$selectedVar7 = settings.selectedVar) === null || _settings$selectedVar7 === void 0 ? void 0 : _settings$selectedVar7.name, (_settings$selectedVar8 = settings.selectedVar) === null || _settings$selectedVar8 === void 0 ? void 0 : _settings$selectedVar8.vars, settings.sliceBy.obs, plotType]);
   const params = (0, _react.useMemo)(() => {
-    return {
-      ...baseParams,
-      ...getPlotParams()
-    };
+    return _objectSpread(_objectSpread({}, baseParams), getPlotParams());
   }, [baseParams, getPlotParams]);
   return (0, _requests.useDebouncedFetch)(ENDPOINT + "/" + plotType, params, 500, {
-    enabled: !!plotType && !!dataset.pseudospatial.maskSet
+    enabled: !!plotType && !!settings.pseudospatial.maskSet
   });
 }
 function Pseudospatial(_ref) {
+  var _settings$selectedObs14, _layout$coloraxis3, _layout$coloraxis4;
   let {
     showLegend = true,
     sharedScaleRange = false,
@@ -85,29 +101,29 @@ function Pseudospatial(_ref) {
     plotType,
     setPlotType
   } = _ref;
-  const dataset = (0, _DatasetContext.useDataset)();
+  const settings = (0, _SettingsContext.useSettings)();
   const [data, setData] = (0, _react.useState)([]);
   const [layout, setLayout] = (0, _react.useState)({});
   const {
     getColor
   } = (0, _colorHelper.useColor)();
-  const colorscale = (0, _react.useRef)(dataset.controls.colorScale);
+  const colorscale = (0, _react.useRef)(settings.controls.colorScale);
   (0, _react.useEffect)(() => {
-    setPlotType(dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? _constants.PSEUDOSPATIAL_PLOT_TYPES.GENE : dataset.selectedObs?.type === _constants.OBS_TYPES.CATEGORICAL || dataset.selectedObs?.type === _constants.OBS_TYPES.BOOLEAN ? _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL : dataset.selectedObs?.type === _constants.OBS_TYPES.CONTINUOUS ? _constants.PSEUDOSPATIAL_PLOT_TYPES.CONTINUOUS : _constants.PSEUDOSPATIAL_PLOT_TYPES.MASKS);
-  }, [dataset.colorEncoding, dataset.selectedObs?.type, setPlotType]);
+    var _settings$selectedObs11, _settings$selectedObs12, _settings$selectedObs13;
+    setPlotType(settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? _constants.PSEUDOSPATIAL_PLOT_TYPES.GENE : ((_settings$selectedObs11 = settings.selectedObs) === null || _settings$selectedObs11 === void 0 ? void 0 : _settings$selectedObs11.type) === _constants.OBS_TYPES.CATEGORICAL || ((_settings$selectedObs12 = settings.selectedObs) === null || _settings$selectedObs12 === void 0 ? void 0 : _settings$selectedObs12.type) === _constants.OBS_TYPES.BOOLEAN ? _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL : ((_settings$selectedObs13 = settings.selectedObs) === null || _settings$selectedObs13 === void 0 ? void 0 : _settings$selectedObs13.type) === _constants.OBS_TYPES.CONTINUOUS ? _constants.PSEUDOSPATIAL_PLOT_TYPES.CONTINUOUS : _constants.PSEUDOSPATIAL_PLOT_TYPES.MASKS);
+  }, [settings.colorEncoding, (_settings$selectedObs14 = settings.selectedObs) === null || _settings$selectedObs14 === void 0 ? void 0 : _settings$selectedObs14.type, setPlotType]);
   const updateColorscale = (0, _react.useCallback)(colorscale => {
     setLayout(l => {
-      return {
-        ...l,
-        coloraxis: {
-          ...l.coloraxis,
+      return _objectSpread(_objectSpread({}, l), {}, {
+        coloraxis: _objectSpread(_objectSpread({}, l.coloraxis), {}, {
           colorscale: colorscale
-        }
-      };
+        })
+      });
     });
     setData(d => {
-      const min = layout?.coloraxis?.cmin;
-      const max = layout?.coloraxis?.cmax;
+      var _layout$coloraxis, _layout$coloraxis2;
+      const min = layout === null || layout === void 0 || (_layout$coloraxis = layout.coloraxis) === null || _layout$coloraxis === void 0 ? void 0 : _layout$coloraxis.cmin;
+      const max = layout === null || layout === void 0 || (_layout$coloraxis2 = layout.coloraxis) === null || _layout$coloraxis2 === void 0 ? void 0 : _layout$coloraxis2.cmax;
       return _lodash.default.map(d, trace => {
         const v = trace.meta.value;
         if (v === null) {
@@ -116,17 +132,15 @@ function Pseudospatial(_ref) {
         const color = (0, _colorHelper.rgbToHex)(getColor({
           value: (v - min) / (max - min)
         }));
-        return {
-          ...trace,
+        return _objectSpread(_objectSpread({}, trace), {}, {
           fillcolor: color,
-          line: {
-            ...trace.line,
+          line: _objectSpread(_objectSpread({}, trace.line), {}, {
             color: color
-          }
-        };
+          })
+        });
       });
     });
-  }, [getColor, layout?.coloraxis?.cmax, layout?.coloraxis?.cmin]);
+  }, [getColor, layout === null || layout === void 0 || (_layout$coloraxis3 = layout.coloraxis) === null || _layout$coloraxis3 === void 0 ? void 0 : _layout$coloraxis3.cmax, layout === null || layout === void 0 || (_layout$coloraxis4 = layout.coloraxis) === null || _layout$coloraxis4 === void 0 ? void 0 : _layout$coloraxis4.cmin]);
   const {
     fetchedData,
     isPending,
@@ -140,17 +154,17 @@ function Pseudospatial(_ref) {
     }
   }, [fetchedData, isPending, serverError, sharedScaleRange, updateColorscale]);
   (0, _react.useEffect)(() => {
-    colorscale.current = dataset.controls.colorScale;
+    colorscale.current = settings.controls.colorScale;
     updateColorscale(colorscale.current);
-  }, [dataset.controls.colorScale, updateColorscale]);
+  }, [settings.controls.colorScale, updateColorscale]);
   (0, _react.useEffect)(() => {
     if (sharedScaleRange) {
       const {
         min,
         max
       } = {
-        min: dataset.controls.range[0] * (dataset.controls.valueRange[1] - dataset.controls.valueRange[0]) + dataset.controls.valueRange[0],
-        max: dataset.controls.range[1] * (dataset.controls.valueRange[1] - dataset.controls.valueRange[0]) + dataset.controls.valueRange[0]
+        min: settings.controls.range[0] * (settings.controls.valueRange[1] - settings.controls.valueRange[0]) + settings.controls.valueRange[0],
+        max: settings.controls.range[1] * (settings.controls.valueRange[1] - settings.controls.valueRange[0]) + settings.controls.valueRange[0]
       };
       setData(d => {
         return _lodash.default.map(d, trace => {
@@ -161,40 +175,36 @@ function Pseudospatial(_ref) {
           const color = (0, _colorHelper.rgbToHex)(getColor({
             value: (v - min) / (max - min)
           }));
-          return {
-            ...trace,
+          return _objectSpread(_objectSpread({}, trace), {}, {
             fillcolor: color,
-            line: {
-              ...trace.line,
+            line: _objectSpread(_objectSpread({}, trace.line), {}, {
               color: color
-            }
-          };
+            })
+          });
         });
       });
       setLayout(l => {
-        return {
-          ...l,
-          coloraxis: {
-            ...l.coloraxis,
+        return _objectSpread(_objectSpread({}, l), {}, {
+          coloraxis: _objectSpread(_objectSpread({}, l.coloraxis), {}, {
             cmin: min,
             cmax: max
-          }
-        };
+          })
+        });
       });
     }
-  }, [dataset.controls.range, dataset.controls.valueMax, dataset.controls.valueMin, dataset.controls.valueRange, getColor, sharedScaleRange]);
-  const hasSelections = !!plotType && !!dataset.pseudospatial.maskSet;
+  }, [settings.controls.range, settings.controls.valueMax, settings.controls.valueMin, settings.controls.valueRange, getColor, sharedScaleRange]);
+  const hasSelections = !!plotType && !!settings.pseudospatial.maskSet;
   const faSlidersPath = _freeSolidSvgIcons.faSliders.icon[4];
   if (!serverError) {
+    var _layout$coloraxis5, _layout$coloraxis6;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "cherita-pseudospatial"
     }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, hasSelections && isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), hasSelections && /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
       data: data,
-      layout: {
-        ...layout,
+      layout: _objectSpread(_objectSpread({}, layout), {}, {
         autosize: true,
         height: height
-      },
+      }),
       useResizeHandler: true,
       className: "cherita-pseudospatial-plot",
       config: {
@@ -213,8 +223,8 @@ function Pseudospatial(_ref) {
         }]
       }
     }), hasSelections && showLegend && /*#__PURE__*/_react.default.createElement(_Legend.Legend, {
-      min: layout?.coloraxis?.cmin,
-      max: layout?.coloraxis?.cmax,
+      min: layout === null || layout === void 0 || (_layout$coloraxis5 = layout.coloraxis) === null || _layout$coloraxis5 === void 0 ? void 0 : _layout$coloraxis5.cmin,
+      max: layout === null || layout === void 0 || (_layout$coloraxis6 = layout.coloraxis) === null || _layout$coloraxis6 === void 0 ? void 0 : _layout$coloraxis6.cmax,
       addText: plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.GENE ? " - Mean expression" : plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL ? " - %" : plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.CONTINUOUS ? " - Mean value" : ""
     })));
   } else {

package/dist/cjs/components/pseudospatial/PseudospatialToolbar.js

@@ -5,22 +5,25 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PseudospatialToolbar = PseudospatialToolbar;
 var _react = _interopRequireWildcard(require("react"));
-var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
-var _reactFontawesome = require("@fortawesome/react-fontawesome");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
+var _SettingsContext = require("../../context/SettingsContext");
 var _requests = require("../../utils/requests");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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 CategoricalMode() {
-  const dataset = (0, _DatasetContext.useDataset)();
-  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  const settings = (0, _SettingsContext.useSettings)();
+  const dispatch = (0, _SettingsContext.useSettingsDispatch)();
   const modeList = _lodash.default.map(_constants.PSEUDOSPATIAL_CATEGORICAL_MODES, (m, key) => /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
     key: key,
-    active: dataset.pseudospatial.categoricalMode === m,
+    active: settings.pseudospatial.categoricalMode === m,
     onClick: () => {
       dispatch({
         type: "set.pseudospatial.categoricalMode",
@@ -29,26 +32,27 @@ function CategoricalMode() {
     }
   }, _lodash.default.capitalize(m.name)));
   const mode = _lodash.default.find(_constants.PSEUDOSPATIAL_CATEGORICAL_MODES, {
-    value: dataset.pseudospatial.categoricalMode
+    value: settings.pseudospatial.categoricalMode
   });
   return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Toggle, {
     variant: "light"
   }, _lodash.default.capitalize(mode.name)), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, null, modeList));
 }
 function MaskSet() {
+  var _settings$pseudospati5, _settings$pseudospati6, _maskSets$settings$ps2, _settings$pseudospati7, _settings$pseudospati8, _maskSets$settings$ps3, _settings$pseudospati9;
   const ENDPOINT = "masks";
   const dataset = (0, _DatasetContext.useDataset)();
-  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  const settings = (0, _SettingsContext.useSettings)();
+  const dispatch = (0, _SettingsContext.useSettingsDispatch)();
   const [maskSets, setMaskSets] = (0, _react.useState)(null);
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url
   });
   (0, _react.useEffect)(() => {
     setParams(p => {
-      return {
-        ...p,
+      return _objectSpread(_objectSpread({}, p), {}, {
         url: dataset.url
-      };
+      });
     });
   }, [dataset.url]);
   const {
@@ -65,7 +69,7 @@ function MaskSet() {
   }, [fetchedData, isPending, serverError]);
   const maskSetList = _lodash.default.map(maskSets, (ms, key) => /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
     key: key,
-    active: dataset.pseudospatial.maskSet === key,
+    active: settings.pseudospatial.maskSet === key,
     onClick: () => {
       dispatch({
         type: "set.pseudospatial.maskSet",
@@ -74,9 +78,10 @@ function MaskSet() {
     }
   }, _lodash.default.capitalize(key)));
   const handleMaskChange = mask => {
-    let newMasks = dataset.pseudospatial.maskValues || maskSets?.[dataset.pseudospatial?.maskSet];
+    var _settings$pseudospati, _settings$pseudospati2;
+    let newMasks = settings.pseudospatial.maskValues || (maskSets === null || maskSets === void 0 ? void 0 : maskSets[(_settings$pseudospati = settings.pseudospatial) === null || _settings$pseudospati === void 0 ? void 0 : _settings$pseudospati.maskSet]);
     newMasks = newMasks.includes(mask) ? newMasks.filter(m => m !== mask) : [...newMasks, mask];
-    if (!_lodash.default.difference(maskSets?.[dataset.pseudospatial?.maskSet], newMasks).length) {
+    if (!_lodash.default.difference(maskSets === null || maskSets === void 0 ? void 0 : maskSets[(_settings$pseudospati2 = settings.pseudospatial) === null || _settings$pseudospati2 === void 0 ? void 0 : _settings$pseudospati2.maskSet], newMasks).length) {
       newMasks = null;
     }
     dispatch({
@@ -85,7 +90,8 @@ function MaskSet() {
     });
   };
   const toggleMasks = () => {
-    if (!dataset.pseudospatial.maskValues || dataset.pseudospatial.maskValues?.length === maskSets?.[dataset.pseudospatial?.maskSet]?.length) {
+    var _settings$pseudospati3, _maskSets$settings$ps, _settings$pseudospati4;
+    if (!settings.pseudospatial.maskValues || ((_settings$pseudospati3 = settings.pseudospatial.maskValues) === null || _settings$pseudospati3 === void 0 ? void 0 : _settings$pseudospati3.length) === (maskSets === null || maskSets === void 0 || (_maskSets$settings$ps = maskSets[(_settings$pseudospati4 = settings.pseudospatial) === null || _settings$pseudospati4 === void 0 ? void 0 : _settings$pseudospati4.maskSet]) === null || _maskSets$settings$ps === void 0 ? void 0 : _maskSets$settings$ps.length)) {
       dispatch({
         type: "set.pseudospatial.maskValues",
         maskValues: []
@@ -97,19 +103,19 @@ function MaskSet() {
       });
     }
   };
-  const masksList = _lodash.default.map(maskSets?.[dataset.pseudospatial?.maskSet], mask => /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.ItemText, {
+  const masksList = _lodash.default.map(maskSets === null || maskSets === void 0 ? void 0 : maskSets[(_settings$pseudospati5 = settings.pseudospatial) === null || _settings$pseudospati5 === void 0 ? void 0 : _settings$pseudospati5.maskSet], mask => /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.ItemText, {
     key: mask
   }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Check, {
     type: "checkbox",
     label: mask,
-    checked: !dataset.pseudospatial.maskValues || dataset.pseudospatial.maskValues.includes(mask),
+    checked: !settings.pseudospatial.maskValues || settings.pseudospatial.maskValues.includes(mask),
     onChange: () => handleMaskChange(mask)
   })));
-  const nMasks = dataset.pseudospatial.maskValues ? dataset.pseudospatial.maskValues?.length : maskSets?.[dataset.pseudospatial?.maskSet]?.length || "No";
-  const toggleAllChecked = !dataset.pseudospatial.maskValues || dataset.pseudospatial.maskValues?.length === maskSets?.[dataset.pseudospatial?.maskSet]?.length;
+  const nMasks = settings.pseudospatial.maskValues ? (_settings$pseudospati6 = settings.pseudospatial.maskValues) === null || _settings$pseudospati6 === void 0 ? void 0 : _settings$pseudospati6.length : (maskSets === null || maskSets === void 0 || (_maskSets$settings$ps2 = maskSets[(_settings$pseudospati7 = settings.pseudospatial) === null || _settings$pseudospati7 === void 0 ? void 0 : _settings$pseudospati7.maskSet]) === null || _maskSets$settings$ps2 === void 0 ? void 0 : _maskSets$settings$ps2.length) || "No";
+  const toggleAllChecked = !settings.pseudospatial.maskValues || ((_settings$pseudospati8 = settings.pseudospatial.maskValues) === null || _settings$pseudospati8 === void 0 ? void 0 : _settings$pseudospati8.length) === (maskSets === null || maskSets === void 0 || (_maskSets$settings$ps3 = maskSets[(_settings$pseudospati9 = settings.pseudospatial) === null || _settings$pseudospati9 === void 0 ? void 0 : _settings$pseudospati9.maskSet]) === null || _maskSets$settings$ps3 === void 0 ? void 0 : _maskSets$settings$ps3.length);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Toggle, {
     variant: "light"
-  }, _lodash.default.capitalize(dataset.pseudospatial.maskSet || "Select a mask set")), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Header, null, "Mask set"), maskSetList)), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Toggle, {
+  }, _lodash.default.capitalize(settings.pseudospatial.maskSet || "Select a mask set")), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Header, null, "Mask set"), maskSetList)), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Toggle, {
     variant: "light"
   }, nMasks, " masks selected"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Header, null, "Masks"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.ItemText, {
     key: "toggle-all"