@haniffalab/cherita-react 1.2.0 → 1.3.0-dev.2025-05-28.9afc380f

package/dist/cjs/components/obs-list/ObsItem.js

@@ -14,6 +14,7 @@ var _ObsToolbar = require("./ObsToolbar");
 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 _Histogram = require("../../utils/Histogram");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
@@ -22,32 +23,40 @@ var _string = require("../../utils/string");
 var _VirtualizedList = require("../../utils/VirtualizedList");
 var _zarrData = require("../../utils/zarrData");
 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; }
-const N_BINS = 5;
-function binContinuous(data, nBins) {
-  const binSize = (data.max - data.min) * (1 / nBins);
-  const thresholds = _lodash.default.range(nBins + 1).map(b => {
-    return data.min + binSize * b;
-  });
-  const binEdges = _lodash.default.range(thresholds.length - 1).map(i => [thresholds[i], thresholds[i + 1]]);
-  const bins = {
-    nBins: nBins,
-    binSize: binSize,
-    thresholds: thresholds,
-    binEdges: binEdges
-  };
-  return {
-    ...data,
-    bins: bins
-  };
-}
+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); }
+// const N_BINS = 5;
+
+// function binContinuous(data, nBins) {
+//   const binSize = (data.max - data.min) * (1 / nBins);
+//   const thresholds = _.range(nBins + 1).map((b) => {
+//     return data.min + binSize * b;
+//   });
+//   const binEdges = _.range(thresholds.length - 1).map((i) => [
+//     thresholds[i],
+//     thresholds[i + 1],
+//   ]);
+//   const bins = {
+//     nBins: nBins,
+//     binSize: binSize,
+//     thresholds: thresholds,
+//     binEdges: binEdges,
+//   };
+//   return { ...data, bins: bins };
+// }
+
 function getContinuousLabel(code, binEdges) {
-  return `[ ${(0, _string.formatNumerical)(binEdges[code][0])}, ${(0, _string.formatNumerical)(binEdges[code][1], _string.FORMATS.EXPONENTIAL)}${code === binEdges.length - 1 ? " ]" : " )"}`;
+  return "[ ".concat((0, _string.formatNumerical)(binEdges[code][0]), ", ").concat((0, _string.formatNumerical)(binEdges[code][1], _string.FORMATS.EXPONENTIAL)).concat(code === binEdges.length - 1 ? " ]" : " )");
 }
 const useObsHistogram = obs => {
+  var _settings$selectedVar, _settings$selectedVar2, _settings$selectedVar3, _settings$selectedVar4, _settings$selectedVar9, _settings$selectedVar0, _settings$selectedVar1, _settings$selectedVar10;
   const ENDPOINT = "obs/histograms";
   const dataset = (0, _DatasetContext.useDataset)();
+  const settings = (0, _SettingsContext.useSettings)();
   const {
     obsIndices,
     isSliced
@@ -56,27 +65,27 @@ const useObsHistogram = obs => {
     url: dataset.url,
     obsCol: _lodash.default.omit(obs, "omit"),
     // avoid re-rendering when toggling unselected obs
-    varKey: dataset.selectedVar?.isSet ? {
-      name: dataset.selectedVar?.name,
-      indices: dataset.selectedVar?.vars.map(v => v.index)
-    } : dataset.selectedVar?.index,
+    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,
     obsIndices: isSliced ? [...(obsIndices || [])] : null
   });
   (0, _react.useEffect)(() => {
     setParams(p => {
-      return {
-        ...p,
+      var _settings$selectedVar5, _settings$selectedVar6, _settings$selectedVar7, _settings$selectedVar8;
+      return _objectSpread(_objectSpread({}, p), {}, {
         obsCol: _lodash.default.omit(obs, "omit"),
-        varKey: dataset.selectedVar?.isSet ? {
-          name: dataset.selectedVar?.name,
-          indices: dataset.selectedVar?.vars.map(v => v.index)
-        } : dataset.selectedVar?.index,
+        varKey: (_settings$selectedVar5 = settings.selectedVar) !== null && _settings$selectedVar5 !== void 0 && _settings$selectedVar5.isSet ? {
+          name: (_settings$selectedVar6 = settings.selectedVar) === null || _settings$selectedVar6 === void 0 ? void 0 : _settings$selectedVar6.name,
+          indices: (_settings$selectedVar7 = settings.selectedVar) === null || _settings$selectedVar7 === void 0 ? void 0 : _settings$selectedVar7.vars.map(v => v.index)
+        } : (_settings$selectedVar8 = settings.selectedVar) === null || _settings$selectedVar8 === void 0 ? void 0 : _settings$selectedVar8.index,
         obsIndices: isSliced ? [...(obsIndices || [])] : null
-      };
+      });
     });
-  }, [dataset.selectedVar?.index, dataset.selectedVar?.isSet, dataset.selectedVar?.name, dataset.selectedVar?.vars, obsIndices, isSliced, obs]);
+  }, [(_settings$selectedVar9 = settings.selectedVar) === null || _settings$selectedVar9 === void 0 ? void 0 : _settings$selectedVar9.index, (_settings$selectedVar0 = settings.selectedVar) === null || _settings$selectedVar0 === void 0 ? void 0 : _settings$selectedVar0.isSet, (_settings$selectedVar1 = settings.selectedVar) === null || _settings$selectedVar1 === void 0 ? void 0 : _settings$selectedVar1.name, (_settings$selectedVar10 = settings.selectedVar) === null || _settings$selectedVar10 === void 0 ? void 0 : _settings$selectedVar10.vars, obsIndices, isSliced, obs]);
   return (0, _requests.useFetch)(ENDPOINT, params, {
-    enabled: !!dataset.selectedVar && dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR,
+    enabled: !!settings.selectedVar && settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR,
     refetchOnMount: false
   });
 };
@@ -88,6 +97,7 @@ const getBinIndex = (v, binEdges) => {
   return _lodash.default.findIndex(modifiedBinEdges, range => _lodash.default.inRange(v, ...range));
 };
 const useFilteredObsData = obs => {
+  var _obs$bins2;
   const {
     obsIndices
   } = (0, _FilterContext.useFilteredData)();
@@ -103,19 +113,20 @@ const useFilteredObsData = obs => {
       valueCounts = _lodash.default.countBy(filteredObsValues);
     } else {
       valueCounts = _lodash.default.countBy(filteredObsValues, v => {
-        return getBinIndex(v, obs.bins?.binEdges || [[null, null]]);
+        var _obs$bins;
+        return getBinIndex(v, ((_obs$bins = obs.bins) === null || _obs$bins === void 0 ? void 0 : _obs$bins.binEdges) || [[null, null]]);
       });
     }
     valueCounts = _lodash.default.mapKeys(valueCounts, (_v, i) => {
       return obs.codesMap[i];
     });
-    const totalCounts = obsIndices?.size;
+    const totalCounts = obsIndices === null || obsIndices === void 0 ? void 0 : obsIndices.size;
     const pct = _lodash.default.mapValues(valueCounts, v => v / totalCounts * 100);
     return {
       valueCounts,
       pct
     };
-  }, [isCategorical, obs.bins?.binEdges, obs.codesMap, obsData.data, obsIndices]);
+  }, [isCategorical, (_obs$bins2 = obs.bins) === null || _obs$bins2 === void 0 ? void 0 : _obs$bins2.binEdges, obs.codesMap, obsData.data, obsIndices]);
   return {
     value_counts: valueCounts,
     pct: pct
@@ -175,7 +186,7 @@ function CategoricalItem(_ref) {
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "pl-1 m-0"
   }, /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-    title: isSliced ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Filtered:", " ", (0, _string.formatNumerical)(filteredStats.pct, _string.FORMATS.EXPONENTIAL), "%", /*#__PURE__*/_react.default.createElement("br", null), "Total: ", (0, _string.formatNumerical)(stats.pct, _string.FORMATS.EXPONENTIAL), "%") : `${(0, _string.formatNumerical)(stats.pct, _string.FORMATS.EXPONENTIAL)}%`,
+    title: isSliced ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Filtered:", " ", (0, _string.formatNumerical)(filteredStats.pct, _string.FORMATS.EXPONENTIAL), "%", /*#__PURE__*/_react.default.createElement("br", null), "Total: ", (0, _string.formatNumerical)(stats.pct, _string.FORMATS.EXPONENTIAL), "%") : "".concat((0, _string.formatNumerical)(stats.pct, _string.FORMATS.EXPONENTIAL), "%"),
     placement: "left",
     arrow: true
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -230,7 +241,7 @@ function CategoricalItem(_ref) {
     y: "0",
     width: "10",
     height: "10",
-    fill: `rgb(${getColor({
+    fill: "rgb(".concat(getColor({
       value: (code - min) / (max - min),
       categorical: true,
       grayOut: isOmitted,
@@ -238,7 +249,7 @@ function CategoricalItem(_ref) {
         alpha: 1
       },
       colorEncoding: "obs"
-    })})`
+    }), ")")
   }))) : null))));
 }
 function CategoricalObs(_ref2) {
@@ -248,7 +259,7 @@ function CategoricalObs(_ref2) {
     toggleObs,
     showColor = true
   } = _ref2;
-  const dataset = (0, _DatasetContext.useDataset)();
+  const settings = (0, _SettingsContext.useSettings)();
   const {
     isSliced
   } = (0, _FilterContext.useFilteredData)();
@@ -258,6 +269,7 @@ function CategoricalObs(_ref2) {
   const obsHistograms = useObsHistogram(obs);
   const filteredObsData = useFilteredObsData(obs);
   const getDataAtIndex = (0, _react.useCallback)(index => {
+    var _obsHistograms$fetche;
     return {
       value: obs.values[index],
       code: obs.codes[obs.values[index]],
@@ -267,8 +279,8 @@ function CategoricalObs(_ref2) {
       },
       isOmitted: _lodash.default.includes(obs.omit, obs.codes[obs.values[index]]),
       label: obs.values[index],
-      histogramData: dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? {
-        data: obsHistograms.fetchedData?.[obs.values[index]],
+      histogramData: settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? {
+        data: (_obsHistograms$fetche = obsHistograms.fetchedData) === null || _obsHistograms$fetche === void 0 ? void 0 : _obsHistograms$fetche[obs.values[index]],
         isPending: obsHistograms.isPending,
         altColor: isSliced
       } : {
@@ -276,13 +288,13 @@ function CategoricalObs(_ref2) {
         isPending: false
       },
       filteredStats: {
-        value_counts: filteredObsData?.value_counts[obs.values[index]] || 0,
-        pct: filteredObsData?.pct[obs.values[index]] || 0
+        value_counts: (filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.value_counts[obs.values[index]]) || 0,
+        pct: (filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.pct[obs.values[index]]) || 0
       },
       isSliced: isSliced
     };
-  }, [dataset.colorEncoding, filteredObsData?.pct, filteredObsData?.value_counts, isSliced, obs.codes, obs.omit, obs.value_counts, obs.values, obsHistograms.fetchedData, obsHistograms.isPending, totalCounts]);
-  showColor &= dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS;
+  }, [settings.colorEncoding, filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.pct, filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.value_counts, isSliced, obs.codes, obs.omit, obs.value_counts, obs.values, obsHistograms.fetchedData, obsHistograms.isPending, totalCounts]);
+  showColor &= settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS;
   return /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, {
     variant: "flush",
     className: "cherita-list"
@@ -344,9 +356,9 @@ function ObsContinuousStats(_ref3) {
     },
     xAxis: {
       data: fetchedData.kde_values[0],
-      valueFormatter: v => `${(0, _string.formatNumerical)(v, _string.FORMATS.EXPONENTIAL)}`
+      valueFormatter: v => "".concat((0, _string.formatNumerical)(v, _string.FORMATS.EXPONENTIAL))
     },
-    valueFormatter: v => `${(0, _string.formatNumerical)(v, _string.FORMATS.EXPONENTIAL)}`,
+    valueFormatter: v => "".concat((0, _string.formatNumerical)(v, _string.FORMATS.EXPONENTIAL)),
     slotProps: {
       popper: {
         className: "feature-histogram-tooltip"
@@ -391,8 +403,8 @@ function ContinuousObs(_ref4) {
       isOmitted: _lodash.default.includes(obs.omit, obs.codes[obs.values[index]]),
       label: isNaN(obs.values[index]) ? "NaN" : getContinuousLabel(obs.codes[obs.values[index]], obs.bins.binEdges),
       filteredStats: {
-        value_counts: filteredObsData?.value_counts[obs.values[index]] || 0,
-        pct: filteredObsData?.pct[obs.values[index]] || 0
+        value_counts: (filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.value_counts[obs.values[index]]) || 0,
+        pct: (filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.pct[obs.values[index]]) || 0
       },
       isSliced: isSliced
     };

package/dist/cjs/components/obs-list/ObsList.js

@@ -18,11 +18,16 @@ var _AccordionContext = _interopRequireDefault(require("react-bootstrap/Accordio
 var _ObsItem = require("./ObsItem");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
+var _SettingsContext = require("../../context/SettingsContext");
 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); }
 const ObsAccordionToggle = _ref => {
   let {
     children,
@@ -37,7 +42,7 @@ const ObsAccordionToggle = _ref => {
     handleAccordionToggle(eventKey, isCurrentEventKey);
   });
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: `obs-accordion-header ${isCurrentEventKey ? "active" : ""}`,
+    className: "obs-accordion-header ".concat(isCurrentEventKey ? "active" : ""),
     onClick: decoratedOnClick
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "obs-accordion-header-chevron"
@@ -48,29 +53,32 @@ const ObsAccordionToggle = _ref => {
   }, children));
 };
 function ObsColsList(_ref2) {
+  var _settings$selectedObs;
   let {
     showColor = true,
     enableObsGroups = true
   } = _ref2;
   const ENDPOINT = "obs/cols";
   const dataset = (0, _DatasetContext.useDataset)();
-  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  const settings = (0, _SettingsContext.useSettings)();
+  const dispatch = (0, _SettingsContext.useSettingsDispatch)();
   const [enableGroups, setEnableGroups] = (0, _react.useState)(enableObsGroups);
   const [obsCols, setObsCols] = (0, _react.useState)(null);
-  const [active, setActive] = (0, _react.useState)([...[dataset.selectedObs?.name]]);
+  const [active, setActive] = (0, _react.useState)([...[(_settings$selectedObs = settings.selectedObs) === null || _settings$selectedObs === void 0 ? void 0 : _settings$selectedObs.name]]);
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url
   });
-  const obsGroups = (0, _react.useMemo)(() => ({
-    default: _lodash.default.union(_constants.DEFAULT_OBS_GROUP, dataset.obsGroups?.default),
-    ..._lodash.default.omit(dataset.obsGroups, "default")
-  }), [dataset.obsGroups]);
+  const obsGroups = (0, _react.useMemo)(() => {
+    var _dataset$obsGroups;
+    return _objectSpread({
+      default: _lodash.default.union(_constants.DEFAULT_OBS_GROUP, (_dataset$obsGroups = dataset.obsGroups) === null || _dataset$obsGroups === void 0 ? void 0 : _dataset$obsGroups.default)
+    }, _lodash.default.omit(dataset.obsGroups, "default"));
+  }, [dataset.obsGroups]);
   (0, _react.useEffect)(() => {
     setParams(p => {
-      return {
-        ...p,
+      return _objectSpread(_objectSpread({}, p), {}, {
         url: dataset.url
-      };
+      });
     });
   }, [dataset.url]);
   const {
@@ -91,7 +99,7 @@ function ObsColsList(_ref2) {
         });
         if (!!filteredData.length && !groupFiltered.length) {
           setEnableGroups(false);
-          console.warn(`No obs found in obsGroups ${JSON.stringify(obsGroups)}, disabling obsGroups`);
+          console.warn("No obs found in obsGroups ".concat(JSON.stringify(obsGroups), ", disabling obsGroups"));
         } else {
           filteredData = groupFiltered;
         }
@@ -102,17 +110,17 @@ function ObsColsList(_ref2) {
         return d.type !== _constants.OBS_TYPES.DISCRETE;
       });
       setObsCols(_lodash.default.keyBy(_lodash.default.map(filteredData, d => {
-        return {
-          ...d,
+        return _objectSpread(_objectSpread({}, d), {}, {
           codesMap: _lodash.default.invert(d.codes),
           omit: []
-        };
+        });
       }), "name"));
     }
   }, [fetchedData, isPending, obsGroups, serverError, enableGroups]);
   (0, _react.useEffect)(() => {
     if (obsCols) {
-      if (!obsCols[dataset.selectedObs?.name]) {
+      var _settings$selectedObs2;
+      if (!obsCols[(_settings$selectedObs2 = settings.selectedObs) === null || _settings$selectedObs2 === void 0 ? void 0 : _settings$selectedObs2.name]) {
         setActive([]);
         dispatch({
           type: "select.obs",
@@ -120,7 +128,7 @@ function ObsColsList(_ref2) {
         });
       }
     }
-  }, [dataset.selectedObs, dispatch, obsCols]);
+  }, [settings.selectedObs, dispatch, obsCols]);
   const handleAccordionToggle = (itemName, isCurrentEventKey) => {
     if (isCurrentEventKey) {
       _lodash.default.delay(() => setActive(prev => _lodash.default.without(prev, itemName)), 250);
@@ -129,28 +137,26 @@ function ObsColsList(_ref2) {
     }
   };
   const toggleAll = item => {
+    var _settings$selectedObs3;
     const omit = item.omit.length ? [] : _lodash.default.map(item.values, v => item.codes[v]);
     setObsCols(o => {
-      return {
-        ...o,
-        [item.name]: {
-          ...item,
+      return _objectSpread(_objectSpread({}, o), {}, {
+        [item.name]: _objectSpread(_objectSpread({}, item), {}, {
           omit: omit
-        }
-      };
+        })
+      });
     });
-    if (dataset.selectedObs?.name === item.name) {
+    if (((_settings$selectedObs3 = settings.selectedObs) === null || _settings$selectedObs3 === void 0 ? void 0 : _settings$selectedObs3.name) === item.name) {
       dispatch({
         type: "select.obs",
-        obs: {
-          ...item,
+        obs: _objectSpread(_objectSpread({}, item), {}, {
           omit: omit
-        }
+        })
       });
     }
   };
   const toggleLabel = item => {
-    const inLabelObs = _lodash.default.some(dataset.labelObs, i => i.name === item.name);
+    const inLabelObs = _lodash.default.some(settings.labelObs, i => i.name === item.name);
     if (inLabelObs) {
       dispatch({
         type: "remove.label.obs",
@@ -184,6 +190,7 @@ function ObsColsList(_ref2) {
     });
   };
   const toggleObs = (item, value) => {
+    var _settings$selectedObs4;
     let omit;
     if (_lodash.default.includes(item.omit, item.codes[value])) {
       omit = item.omit.filter(i => i !== item.codes[value]);
@@ -191,34 +198,32 @@ function ObsColsList(_ref2) {
       omit = [...item.omit, item.codes[value]];
     }
     setObsCols(o => {
-      return {
-        ...o,
-        [item.name]: {
-          ...item,
+      return _objectSpread(_objectSpread({}, o), {}, {
+        [item.name]: _objectSpread(_objectSpread({}, item), {}, {
           omit: omit
-        }
-      };
+        })
+      });
     });
-    if (dataset.selectedObs?.name === item.name) {
+    if (((_settings$selectedObs4 = settings.selectedObs) === null || _settings$selectedObs4 === void 0 ? void 0 : _settings$selectedObs4.name) === item.name) {
       dispatch({
         type: "select.obs",
-        obs: {
-          ...item,
+        obs: _objectSpread(_objectSpread({}, item), {}, {
           omit: omit
-        }
+        })
       });
     }
   };
   const obsItem = item => {
+    var _settings$selectedObs5, _settings$selectedObs6;
     if (!item) {
       return null;
     }
     if (item.type === _constants.OBS_TYPES.DISCRETE) {
       return null;
     }
-    const inLabelObs = _lodash.default.some(dataset.labelObs, i => i.name === item.name);
-    const inSliceObs = dataset.sliceBy.obs && dataset.selectedObs?.name === item.name;
-    const isColorEncoding = dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && dataset.selectedObs?.name === item.name;
+    const inLabelObs = _lodash.default.some(settings.labelObs, i => i.name === item.name);
+    const inSliceObs = settings.sliceBy.obs && ((_settings$selectedObs5 = settings.selectedObs) === null || _settings$selectedObs5 === void 0 ? void 0 : _settings$selectedObs5.name) === item.name;
+    const isColorEncoding = settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS && ((_settings$selectedObs6 = settings.selectedObs) === null || _settings$selectedObs6 === void 0 ? void 0 : _settings$selectedObs6.name) === item.name;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "accordion-item",
       key: item.name
@@ -226,21 +231,21 @@ function ObsColsList(_ref2) {
       eventKey: item.name,
       handleAccordionToggle: handleAccordionToggle
     }, /*#__PURE__*/_react.default.createElement("div", null, item.name), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", {
-      className: `mx-1 cursor-pointer ${inLabelObs ? "active-icon" : "text-muted opacity-50"}`,
+      className: "mx-1 cursor-pointer ".concat(inLabelObs ? "active-icon" : "text-muted opacity-50"),
       onClick: event => {
         event.stopPropagation();
         toggleLabel(item);
       },
       title: "Add to tooltip"
     }, /*#__PURE__*/_react.default.createElement(_Comment.default, null)), /*#__PURE__*/_react.default.createElement("span", {
-      className: `mx-1 cursor-pointer ${inSliceObs ? "active-icon" : "text-muted opacity-50"}`,
+      className: "mx-1 cursor-pointer ".concat(inSliceObs ? "active-icon" : "text-muted opacity-50"),
       onClick: event => {
         event.stopPropagation();
         toggleSlice(item);
       },
       title: "Filter applied"
     }, /*#__PURE__*/_react.default.createElement(_JoinInner.default, null)), /*#__PURE__*/_react.default.createElement("span", {
-      className: `mx-1 cursor-pointer ${isColorEncoding ? "active-icon" : "text-muted opacity-50"}`,
+      className: "mx-1 cursor-pointer ".concat(isColorEncoding ? "active-icon" : "text-muted opacity-50"),
       onClick: event => {
         event.stopPropagation();
         toggleColor(item);
@@ -270,9 +275,9 @@ function ObsColsList(_ref2) {
     })))));
   };
   const groupList = _lodash.default.map(_lodash.default.keys(obsGroups), group => {
-    const key = `group-${group}`;
+    const key = "group-".concat(group);
     const groupItems = _lodash.default.compact(_lodash.default.map(_lodash.default.sortBy(obsGroups[group], o => _lodash.default.lowerCase(o.name)), item => {
-      return obsItem(obsCols?.[item]);
+      return obsItem(obsCols === null || obsCols === void 0 ? void 0 : obsCols[item]);
     }));
     if (group === "default") {
       return groupItems;
@@ -289,7 +294,7 @@ function ObsColsList(_ref2) {
     }
   });
   const obsList = enableGroups ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, groupList) : _lodash.default.map(_lodash.default.sortBy(obsCols, o => _lodash.default.lowerCase(o.name)), item => obsItem(item));
-  const defaultActiveGroup = enableGroups ? `group-${_lodash.default.findKey(obsGroups, g => g.includes(active?.[0]))}` : null;
+  const defaultActiveGroup = enableGroups ? "group-".concat(_lodash.default.findKey(obsGroups, g => g.includes(active === null || active === void 0 ? void 0 : active[0]))) : null;
   if (!serverError) {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "position-relative h-100"

package/dist/cjs/components/obsm-list/ObsmList.js

@@ -7,14 +7,20 @@ exports.ObsmKeysList = ObsmKeysList;
 var _react = _interopRequireWildcard(require("react"));
 var _reactBootstrap = require("react-bootstrap");
 var _DatasetContext = require("../../context/DatasetContext");
+var _SettingsContext = require("../../context/SettingsContext");
 var _requests = require("../../utils/requests");
 var _Skeleton = require("../../utils/Skeleton");
-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 ObsmKeysList() {
   const ENDPOINT = "obsm/keys";
   const dataset = (0, _DatasetContext.useDataset)();
-  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  const settings = (0, _SettingsContext.useSettings)();
+  const dispatch = (0, _SettingsContext.useSettingsDispatch)();
   const [obsmKeysList, setObsmKeysList] = (0, _react.useState)([]);
   const [active, setActive] = (0, _react.useState)(null);
   const [params, setParams] = (0, _react.useState)({
@@ -22,10 +28,9 @@ function ObsmKeysList() {
   });
   (0, _react.useEffect)(() => {
     setParams(p => {
-      return {
-        ...p,
+      return _objectSpread(_objectSpread({}, p), {}, {
         url: dataset.url
-      };
+      });
     });
   }, [dataset.url]);
   const {
@@ -41,14 +46,14 @@ function ObsmKeysList() {
     }
   }, [fetchedData, isPending, serverError]);
   (0, _react.useEffect)(() => {
-    if (dataset.selectedObsm) {
-      setActive(dataset.selectedObsm);
+    if (settings.selectedObsm) {
+      setActive(settings.selectedObsm);
     }
-  }, [dataset.selectedObsm]);
+  }, [settings.selectedObsm]);
   const obsmList = obsmKeysList.map(item => {
     return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
       key: item,
-      className: `custom ${active === item && "active"}`,
+      className: "custom ".concat(active === item && "active"),
       onClick: () => {
         dispatch({
           type: "select.obsm",
@@ -63,8 +68,8 @@ function ObsmKeysList() {
     }
     return /*#__PURE__*/_react.default.createElement(_reactBootstrap.DropdownButton, {
       as: _reactBootstrap.ButtonGroup,
-      title: dataset.selectedObsm || "Select an embedding",
-      variant: dataset.selectedObsm ? "primary" : "warning",
+      title: settings.selectedObsm || "Select an embedding",
+      variant: settings.selectedObsm ? "primary" : "warning",
       id: "bg-nested-dropdown",
       size: "sm"
     }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Header, null, "Embeddings"), obsmList);

package/dist/cjs/components/offcanvas/index.js

@@ -14,18 +14,21 @@ var _ObsList = require("../obs-list/ObsList");
 var _ObsmList = require("../obsm-list/ObsmList");
 var _SearchBar = require("../search-bar/SearchBar");
 var _VarList = require("../var-list/VarList");
+const _excluded = ["show", "handleClose"],
+  _excluded2 = ["show", "handleClose", "Controls"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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; }
 function OffcanvasObs(_ref) {
   let {
-    show,
-    handleClose,
-    ...props
-  } = _ref;
+      show,
+      handleClose
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_Offcanvas.default, {
     show: show,
     onHide: handleClose,
-    scroll: true,
-    backdrop: false
+    scroll: true
   }, /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Header, {
     closeButton: true
   }, /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Title, null, "Categories")), /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Body, {
@@ -63,11 +66,11 @@ function OffcanvasVars(_ref3) {
 }
 function OffcanvasControls(_ref4) {
   let {
-    show,
-    handleClose,
-    Controls,
-    ...props
-  } = _ref4;
+      show,
+      handleClose,
+      Controls
+    } = _ref4,
+    props = _objectWithoutProperties(_ref4, _excluded2);
   return /*#__PURE__*/_react.default.createElement(_Offcanvas.default, {
     show: show,
     onHide: handleClose