@haniffalab/cherita-react 1.4.1-dev.2025-08-13.6fc43290 → 1.4.1-dev.2025-08-18.6fbf7a74

package/dist/cjs/utils/zarrData.js

@@ -7,6 +7,7 @@ exports.useXData = exports.useObsmData = exports.useObsData = exports.useLabelOb
 var _react = require("react");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _zarr = require("zarr");
+var _Resolver = require("./Resolver");
 var _constants = require("../constants/constants");
 var _DatasetContext = require("../context/DatasetContext");
 var _SettingsContext = require("../context/SettingsContext");
@@ -39,21 +40,18 @@ const meanData = (_i, data) => {
 const useXData = function () {
   let agg = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : meanData;
   const dataset = (0, _DatasetContext.useDataset)();
-  const settings = (0, _SettingsContext.useSettings)();
-  const xParams = (0, _react.useMemo)(() => {
-    var _settings$selectedVar, _settings$selectedVar2, _settings$selectedVar3;
-    return !settings.selectedVar ? [] : !((_settings$selectedVar = settings.selectedVar) !== null && _settings$selectedVar !== void 0 && _settings$selectedVar.isSet) ? [{
+  const selectedVar = (0, _Resolver.useSelectedVar)();
+  const xParams = (0, _react.useMemo)(() => !selectedVar ? [] : !(selectedVar !== null && selectedVar !== void 0 && selectedVar.isSet) ? [{
+    url: dataset.url,
+    path: "X",
+    s: [null, selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.matrix_index]
+  }] : _lodash.default.map(selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.vars, v => {
+    return {
       url: dataset.url,
       path: "X",
-      s: [null, (_settings$selectedVar2 = settings.selectedVar) === null || _settings$selectedVar2 === void 0 ? void 0 : _settings$selectedVar2.matrix_index]
-    }] : _lodash.default.map((_settings$selectedVar3 = settings.selectedVar) === null || _settings$selectedVar3 === void 0 ? void 0 : _settings$selectedVar3.vars, v => {
-      return {
-        url: dataset.url,
-        path: "X",
-        s: [null, v.matrix_index]
-      };
-    });
-  }, [dataset.url, settings.selectedVar]);
+      s: [null, v.matrix_index]
+    };
+  }), [dataset.url, selectedVar]);
   return (0, _zarrHelper.useMultipleZarr)(xParams, _zarrHelper.GET_OPTIONS, {
     enabled: !!xParams.length
   }, agg);
@@ -63,8 +61,8 @@ const useObsData = function () {
   var _obs3, _obs4;
   let obs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   const dataset = (0, _DatasetContext.useDataset)();
-  const settings = (0, _SettingsContext.useSettings)();
-  obs = obs || settings.selectedObs;
+  const selectedObs = (0, _Resolver.useSelectedObs)();
+  obs = obs || selectedObs;
   const obsParams = (0, _react.useMemo)(() => {
     var _obs, _obs2;
     return {
@@ -80,13 +78,14 @@ exports.useObsData = useObsData;
 const useLabelObsData = () => {
   const dataset = (0, _DatasetContext.useDataset)();
   const settings = (0, _SettingsContext.useSettings)();
-  const labelObsParams = (0, _react.useMemo)(() => _lodash.default.map(settings.labelObs, obs => {
+  const labelObsParams = (0, _react.useMemo)(() => _lodash.default.map(settings.labelObs, obsName => {
+    const obs = settings.data.obs[obsName] || null;
     return {
       url: dataset.url,
       path: "obs/" + obs.name + (obs.type === _constants.OBS_TYPES.CATEGORICAL ? "/codes" : ""),
       key: obs.name
     };
-  }), [dataset.url, settings.labelObs]);
+  }), [dataset.url, settings.data.obs, settings.labelObs]);
   return (0, _zarrHelper.useMultipleZarr)(labelObsParams, _zarrHelper.GET_OPTIONS, {
     enabled: !!labelObsParams.length
   });

package/dist/esm/components/dotplot/Dotplot.js

@@ -13,9 +13,9 @@ import { useFilteredData } from "../../context/FilterContext";
 import { useSettings, useSettingsDispatch } from "../../context/SettingsContext";
 import { LoadingSpinner } from "../../utils/LoadingIndicators";
 import { useDebouncedFetch } from "../../utils/requests";
+import { useSelectedMultiVar, useSelectedObs } from "../../utils/Resolver";
 import { ControlsPlotlyToolbar, ObsPlotlyToolbar, VarPlotlyToolbar } from "../toolbar/Toolbar";
 export function Dotplot(_ref) {
-  var _settings$selectedObs, _settings$selectedObs2, _settings$selectedObs3;
   let {
     showObsBtn = false,
     showVarsBtn = false,
@@ -36,14 +36,13 @@ export function Dotplot(_ref) {
   const [data, setData] = useState([]);
   const [layout, setLayout] = useState({});
   const [hasSelections, setHasSelections] = useState(false);
+  const selectedObs = useSelectedObs();
+  const selectedMultiVar = useSelectedMultiVar();
   const [params, setParams] = useState({
     url: dataset.url,
-    obsCol: settings.selectedObs,
-    obsValues: !((_settings$selectedObs = settings.selectedObs) !== null && _settings$selectedObs !== void 0 && _settings$selectedObs.omit.length) ? null : _.difference(_.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];
-    }),
-    varKeys: settings.selectedMultiVar.map(i => i.isSet ? {
+    obsCol: selectedObs,
+    obsValues: !(selectedObs !== null && selectedObs !== void 0 && selectedObs.omit.length) ? null : _.difference(selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.values, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.omit),
+    varKeys: selectedMultiVar.map(i => i.isSet ? {
       name: i.name,
       indices: i.vars.map(v => v.index)
     } : i.index),
@@ -56,21 +55,17 @@ export function Dotplot(_ref) {
   // @TODO: set default scale
 
   useEffect(() => {
-    if (settings.selectedObs && settings.selectedMultiVar.length) {
+    if (selectedObs && selectedMultiVar.length) {
       setHasSelections(true);
     } else {
       setHasSelections(false);
     }
     setParams(p => {
-      var _settings$selectedObs5, _settings$selectedObs6, _settings$selectedObs7;
       return _objectSpread(_objectSpread({}, p), {}, {
         url: dataset.url,
-        obsCol: settings.selectedObs,
-        obsValues: !((_settings$selectedObs5 = settings.selectedObs) !== null && _settings$selectedObs5 !== void 0 && _settings$selectedObs5.omit.length) ? null : _.difference(_.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];
-        }),
-        varKeys: settings.selectedMultiVar.map(i => i.isSet ? {
+        obsCol: selectedObs,
+        obsValues: !(selectedObs !== null && selectedObs !== void 0 && selectedObs.omit.length) ? null : _.difference(selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.values, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.omit),
+        varKeys: selectedMultiVar.map(i => i.isSet ? {
           name: i.name,
           indices: i.vars.map(v => v.index)
         } : i.index),
@@ -81,7 +76,7 @@ export function Dotplot(_ref) {
         varNamesCol: dataset.varNamesCol
       });
     });
-  }, [dataset.url, settings.selectedObs, settings.selectedMultiVar, settings.controls.scale.dotplot, settings.controls.meanOnlyExpressed, settings.controls.expressionCutoff, dataset.varNamesCol, isSliced, obsIndices]);
+  }, [dataset.url, selectedObs, settings.controls.scale.dotplot, settings.controls.meanOnlyExpressed, settings.controls.expressionCutoff, dataset.varNamesCol, isSliced, obsIndices, selectedMultiVar]);
   const updateColorscale = useCallback(colorscale => {
     setLayout(l => {
       return _objectSpread(_objectSpread({}, l), {}, {
@@ -102,6 +97,7 @@ export function Dotplot(_ref) {
     if (hasSelections && !isPending && !serverError) {
       setData(fetchedData.data);
       setLayout(fetchedData.layout);
+      // @TODO: keep colorAxis range from settings
       dispatch({
         type: "set.controls.colorAxis",
         colorAxis: {

package/dist/esm/components/heatmap/Heatmap.js

@@ -13,9 +13,9 @@ import { useFilteredData } from "../../context/FilterContext";
 import { useSettings } from "../../context/SettingsContext";
 import { LoadingSpinner } from "../../utils/LoadingIndicators";
 import { useDebouncedFetch } from "../../utils/requests";
+import { useSelectedMultiVar, useSelectedObs } from "../../utils/Resolver";
 import { ControlsPlotlyToolbar, ObsPlotlyToolbar, VarPlotlyToolbar } from "../toolbar/Toolbar";
 export function Heatmap(_ref) {
-  var _settings$selectedObs, _settings$selectedObs2, _settings$selectedObs3;
   let {
     showObsBtn = false,
     showVarsBtn = false,
@@ -35,14 +35,13 @@ export function Heatmap(_ref) {
   const [data, setData] = useState([]);
   const [layout, setLayout] = useState({});
   const [hasSelections, setHasSelections] = useState(false);
+  const selectedObs = useSelectedObs();
+  const selectedMultiVar = useSelectedMultiVar();
   const [params, setParams] = useState({
     url: dataset.url,
-    obsCol: settings.selectedObs,
-    obsValues: !((_settings$selectedObs = settings.selectedObs) !== null && _settings$selectedObs !== void 0 && _settings$selectedObs.omit.length) ? null : _.difference(_.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];
-    }),
-    varKeys: settings.selectedMultiVar.map(i => i.isSet ? {
+    obsCol: selectedObs,
+    obsValues: !(selectedObs !== null && selectedObs !== void 0 && selectedObs.omit.length) ? null : _.difference(selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.values, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.omit),
+    varKeys: selectedMultiVar.map(i => i.isSet ? {
       name: i.name,
       indices: i.vars.map(v => v.index)
     } : i.index),
@@ -50,21 +49,17 @@ export function Heatmap(_ref) {
     varNamesCol: dataset.varNamesCol
   });
   useEffect(() => {
-    if (settings.selectedObs && settings.selectedMultiVar.length) {
+    if (selectedObs && selectedMultiVar.length) {
       setHasSelections(true);
     } else {
       setHasSelections(false);
     }
     setParams(p => {
-      var _settings$selectedObs5, _settings$selectedObs6, _settings$selectedObs7;
       return _objectSpread(_objectSpread({}, p), {}, {
         url: dataset.url,
-        obsCol: settings.selectedObs,
-        obsValues: !((_settings$selectedObs5 = settings.selectedObs) !== null && _settings$selectedObs5 !== void 0 && _settings$selectedObs5.omit.length) ? null : _.difference(_.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];
-        }),
-        varKeys: settings.selectedMultiVar.map(i => i.isSet ? {
+        obsCol: selectedObs,
+        obsValues: !(selectedObs !== null && selectedObs !== void 0 && selectedObs.omit.length) ? null : _.difference(selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.values, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.omit),
+        varKeys: selectedMultiVar.map(i => i.isSet ? {
           name: i.name,
           indices: i.vars.map(v => v.index)
         } : i.index),
@@ -72,7 +67,7 @@ export function Heatmap(_ref) {
         varNamesCol: dataset.varNamesCol
       });
     });
-  }, [settings.selectedMultiVar, settings.selectedObs, dataset.url, dataset.varNamesCol, obsIndices, isSliced]);
+  }, [selectedMultiVar, selectedObs, dataset.url, dataset.varNamesCol, obsIndices, isSliced]);
   const updateColorscale = useCallback(colorscale => {
     setLayout(l => {
       return _objectSpread(_objectSpread({}, l), {}, {

package/dist/esm/components/matrixplot/Matrixplot.js

@@ -13,9 +13,9 @@ import { useFilteredData } from "../../context/FilterContext";
 import { useSettings } from "../../context/SettingsContext";
 import { LoadingSpinner } from "../../utils/LoadingIndicators";
 import { useDebouncedFetch } from "../../utils/requests";
+import { useSelectedMultiVar, useSelectedObs } from "../../utils/Resolver";
 import { ControlsPlotlyToolbar, ObsPlotlyToolbar, VarPlotlyToolbar } from "../toolbar/Toolbar";
 export function Matrixplot(_ref) {
-  var _settings$selectedObs, _settings$selectedObs2, _settings$selectedObs3;
   let {
     showObsBtn = false,
     showVarsBtn = false,
@@ -35,14 +35,13 @@ export function Matrixplot(_ref) {
   const [data, setData] = useState([]);
   const [layout, setLayout] = useState({});
   const [hasSelections, setHasSelections] = useState(false);
+  const selectedObs = useSelectedObs();
+  const selectedMultiVar = useSelectedMultiVar();
   const [params, setParams] = useState({
     url: dataset.url,
-    obsCol: settings.selectedObs,
-    obsValues: !((_settings$selectedObs = settings.selectedObs) !== null && _settings$selectedObs !== void 0 && _settings$selectedObs.omit.length) ? null : _.difference(_.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];
-    }),
-    varKeys: settings.selectedMultiVar.map(i => i.isSet ? {
+    obsCol: selectedObs,
+    obsValues: !(selectedObs !== null && selectedObs !== void 0 && selectedObs.omit.length) ? null : _.difference(selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.values, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.omit),
+    varKeys: selectedMultiVar.map(i => i.isSet ? {
       name: i.name,
       indices: i.vars.map(v => v.index)
     } : i.index),
@@ -51,21 +50,17 @@ export function Matrixplot(_ref) {
     varNamesCol: dataset.varNamesCol
   });
   useEffect(() => {
-    if (settings.selectedObs && settings.selectedMultiVar.length) {
+    if (selectedObs && selectedMultiVar.length) {
       setHasSelections(true);
     } else {
       setHasSelections(false);
     }
     setParams(p => {
-      var _settings$selectedObs5, _settings$selectedObs6, _settings$selectedObs7;
       return _objectSpread(_objectSpread({}, p), {}, {
         url: dataset.url,
-        obsCol: settings.selectedObs,
-        obsValues: !((_settings$selectedObs5 = settings.selectedObs) !== null && _settings$selectedObs5 !== void 0 && _settings$selectedObs5.omit.length) ? null : _.difference(_.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];
-        }),
-        varKeys: settings.selectedMultiVar.map(i => i.isSet ? {
+        obsCol: selectedObs,
+        obsValues: !(selectedObs !== null && selectedObs !== void 0 && selectedObs.omit.length) ? null : _.difference(selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.values, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.omit),
+        varKeys: selectedMultiVar.map(i => i.isSet ? {
           name: i.name,
           indices: i.vars.map(v => v.index)
         } : i.index),
@@ -74,7 +69,7 @@ export function Matrixplot(_ref) {
         varNamesCol: dataset.varNamesCol
       });
     });
-  }, [settings.controls.scale.matrixplot, settings.selectedMultiVar, settings.selectedObs, dataset.url, dataset.varNamesCol, obsIndices, isSliced]);
+  }, [settings.controls.scale.matrixplot, selectedMultiVar, selectedObs, dataset.url, dataset.varNamesCol, obsIndices, isSliced]);
   const updateColorscale = useCallback(colorscale => {
     setLayout(l => {
       return _objectSpread(_objectSpread({}, l), {}, {

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

@@ -17,6 +17,7 @@ import { useColor } from "../../helpers/color-helper";
 import { Histogram } from "../../utils/Histogram";
 import { LoadingLinear } from "../../utils/LoadingIndicators";
 import { useFetch } from "../../utils/requests";
+import { useSelectedVar } from "../../utils/Resolver";
 import { formatNumerical, FORMATS } from "../../utils/string";
 import { VirtualizedList } from "../../utils/VirtualizedList";
 import { useObsData } from "../../utils/zarrData";
@@ -45,7 +46,6 @@ function getContinuousLabel(code, binEdges) {
   return "[ ".concat(formatNumerical(binEdges[code][0]), ", ").concat(formatNumerical(binEdges[code][1], FORMATS.EXPONENTIAL)).concat(code === binEdges.length - 1 ? " ]" : " )");
 }
 const useObsHistogram = (obs, _ref) => {
-  var _settings$selectedVar, _settings$selectedVar2, _settings$selectedVar3, _settings$selectedVar4, _settings$selectedVar9, _settings$selectedVar0, _settings$selectedVar1, _settings$selectedVar10;
   let {
     enabled = true
   } = _ref;
@@ -56,31 +56,31 @@ const useObsHistogram = (obs, _ref) => {
     obsIndices,
     isSliced
   } = useFilteredData();
+  const selectedVar = useSelectedVar();
   const [params, setParams] = useState({
     url: dataset.url,
     obsCol: _.omit(obs, "omit"),
     // avoid re-rendering when toggling unselected obs
-    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,
+    varKey: selectedVar !== null && selectedVar !== void 0 && selectedVar.isSet ? {
+      name: selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.name,
+      indices: selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.vars.map(v => v.index)
+    } : selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.index,
     obsIndices: isSliced ? [...(obsIndices || [])] : null
   });
   useEffect(() => {
     setParams(p => {
-      var _settings$selectedVar5, _settings$selectedVar6, _settings$selectedVar7, _settings$selectedVar8;
       return _objectSpread(_objectSpread({}, p), {}, {
         obsCol: _.omit(obs, "omit"),
-        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,
+        varKey: selectedVar !== null && selectedVar !== void 0 && selectedVar.isSet ? {
+          name: selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.name,
+          indices: selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.vars.map(v => v.index)
+        } : selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.index,
         obsIndices: isSliced ? [...(obsIndices || [])] : null
       });
     });
-  }, [(_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]);
+  }, [selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.index, selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.isSet, selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.name, selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.vars, obsIndices, isSliced, obs]);
   return useFetch(ENDPOINT, params, {
-    enabled: enabled && !!settings.selectedVar && settings.colorEncoding === COLOR_ENCODINGS.VAR,
+    enabled: enabled && !!selectedVar && settings.colorEncoding === COLOR_ENCODINGS.VAR,
     refetchOnMount: false
   });
 };
@@ -283,7 +283,7 @@ export function CategoricalObs(_ref3) {
         value_counts: obs.value_counts[obs.values[index]],
         pct: obs.value_counts[obs.values[index]] / totalCounts * 100
       },
-      isOmitted: _.includes(obs.omit, obs.codes[obs.values[index]]),
+      isOmitted: _.includes(obs.omit, obs.values[index]),
       label: obs.values[index],
       histogramData: enabledHistograms ? {
         data: (_obsHistograms$fetche = obsHistograms.fetchedData) === null || _obsHistograms$fetche === void 0 ? void 0 : _obsHistograms$fetche[obs.values[index]],
@@ -420,7 +420,7 @@ export function ContinuousObs(_ref5) {
         value_counts: obs.value_counts[obs.values[index]],
         pct: obs.value_counts[obs.values[index]] / totalCounts * 100
       },
-      isOmitted: _.includes(obs.omit, obs.codes[obs.values[index]]),
+      isOmitted: _.includes(obs.omit, obs.values[index]),
       label: getLabel(index),
       histogramData: enabledHistograms ? {
         data: (_obsHistograms$fetche2 = obsHistograms.fetchedData) === null || _obsHistograms$fetche2 === void 0 ? void 0 : _obsHistograms$fetche2[obs.values[index]],

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

@@ -45,7 +45,7 @@ const ObsAccordionToggle = _ref => {
   }, children));
 };
 export function ObsColsList(_ref2) {
-  var _settings$selectedObs;
+  var _settings$selectedObs, _settings$selectedObs3, _settings$selectedObs4;
   let {
     showColor = true,
     enableObsGroups = true,
@@ -104,17 +104,22 @@ export function ObsColsList(_ref2) {
         return d.type !== OBS_TYPES.DISCRETE;
       });
       setObsCols(_.keyBy(_.map(filteredData, d => {
+        var _settings$selectedObs2;
+        if (((_settings$selectedObs2 = settings.selectedObs) === null || _settings$selectedObs2 === void 0 ? void 0 : _settings$selectedObs2.name) === d.name) {
+          return _objectSpread(_objectSpread({}, d), {}, {
+            omit: settings.selectedObs.omit || []
+          });
+        }
         return _objectSpread(_objectSpread({}, d), {}, {
-          codesMap: _.invert(d.codes),
           omit: []
         });
       }), "name"));
     }
-  }, [fetchedData, isPending, obsGroups, serverError, enableGroups]);
+  }, [fetchedData, isPending, obsGroups, serverError, enableGroups, (_settings$selectedObs3 = settings.selectedObs) === null || _settings$selectedObs3 === void 0 ? void 0 : _settings$selectedObs3.name, (_settings$selectedObs4 = settings.selectedObs) === null || _settings$selectedObs4 === void 0 ? void 0 : _settings$selectedObs4.omit]);
   useEffect(() => {
     if (obsCols) {
-      var _settings$selectedObs2;
-      if (!obsCols[(_settings$selectedObs2 = settings.selectedObs) === null || _settings$selectedObs2 === void 0 ? void 0 : _settings$selectedObs2.name]) {
+      var _settings$selectedObs5;
+      if (!obsCols[(_settings$selectedObs5 = settings.selectedObs) === null || _settings$selectedObs5 === void 0 ? void 0 : _settings$selectedObs5.name]) {
         setActive([]);
         dispatch({
           type: "select.obs",
@@ -131,8 +136,8 @@ export function ObsColsList(_ref2) {
     }
   };
   const toggleAll = item => {
-    var _settings$selectedObs3;
-    const omit = item.omit.length ? [] : _.map(item.values, v => item.codes[v]);
+    var _settings$selectedObs6;
+    const omit = item.omit.length ? [] : item.values;
     setObsCols(o => {
       return _objectSpread(_objectSpread({}, o), {}, {
         [item.name]: _objectSpread(_objectSpread({}, item), {}, {
@@ -140,7 +145,7 @@ export function ObsColsList(_ref2) {
         })
       });
     });
-    if (((_settings$selectedObs3 = settings.selectedObs) === null || _settings$selectedObs3 === void 0 ? void 0 : _settings$selectedObs3.name) === item.name) {
+    if (((_settings$selectedObs6 = settings.selectedObs) === null || _settings$selectedObs6 === void 0 ? void 0 : _settings$selectedObs6.name) === item.name) {
       dispatch({
         type: "select.obs",
         obs: _objectSpread(_objectSpread({}, item), {}, {
@@ -150,7 +155,7 @@ export function ObsColsList(_ref2) {
     }
   };
   const toggleLabel = item => {
-    const inLabelObs = _.some(settings.labelObs, i => i.name === item.name);
+    const inLabelObs = _.includes(settings.labelObs, item.name);
     if (inLabelObs) {
       dispatch({
         type: "remove.label.obs",
@@ -159,11 +164,7 @@ export function ObsColsList(_ref2) {
     } else {
       dispatch({
         type: "add.label.obs",
-        obs: {
-          name: item.name,
-          type: item.type,
-          codesMap: item.codesMap
-        }
+        obs: item
       });
     }
   };
@@ -184,12 +185,12 @@ export function ObsColsList(_ref2) {
     });
   };
   const toggleObs = (item, value) => {
-    var _settings$selectedObs4;
+    var _settings$selectedObs7;
     let omit;
-    if (_.includes(item.omit, item.codes[value])) {
-      omit = item.omit.filter(i => i !== item.codes[value]);
+    if (_.includes(item.omit, value)) {
+      omit = item.omit.filter(i => i !== value);
     } else {
-      omit = [...item.omit, item.codes[value]];
+      omit = [...item.omit, value];
     }
     setObsCols(o => {
       return _objectSpread(_objectSpread({}, o), {}, {
@@ -198,7 +199,7 @@ export function ObsColsList(_ref2) {
         })
       });
     });
-    if (((_settings$selectedObs4 = settings.selectedObs) === null || _settings$selectedObs4 === void 0 ? void 0 : _settings$selectedObs4.name) === item.name) {
+    if (((_settings$selectedObs7 = settings.selectedObs) === null || _settings$selectedObs7 === void 0 ? void 0 : _settings$selectedObs7.name) === item.name) {
       dispatch({
         type: "select.obs",
         obs: _objectSpread(_objectSpread({}, item), {}, {
@@ -208,16 +209,16 @@ export function ObsColsList(_ref2) {
     }
   };
   const obsItem = item => {
-    var _settings$selectedObs5, _settings$selectedObs6;
+    var _settings$selectedObs8, _settings$selectedObs9;
     if (!item) {
       return null;
     }
     if (item.type === OBS_TYPES.DISCRETE) {
       return null;
     }
-    const inLabelObs = _.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 = (showSelectedAsActive || settings.colorEncoding === COLOR_ENCODINGS.OBS) && ((_settings$selectedObs6 = settings.selectedObs) === null || _settings$selectedObs6 === void 0 ? void 0 : _settings$selectedObs6.name) === item.name;
+    const inLabelObs = _.includes(settings.labelObs, item.name);
+    const inSliceObs = settings.sliceBy.obs && ((_settings$selectedObs8 = settings.selectedObs) === null || _settings$selectedObs8 === void 0 ? void 0 : _settings$selectedObs8.name) === item.name;
+    const isColorEncoding = (showSelectedAsActive || settings.colorEncoding === COLOR_ENCODINGS.OBS) && ((_settings$selectedObs9 = settings.selectedObs) === null || _settings$selectedObs9 === void 0 ? void 0 : _settings$selectedObs9.name) === item.name;
     return /*#__PURE__*/React.createElement("div", {
       className: "accordion-item",
       key: item.name

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

@@ -18,9 +18,9 @@ import { ImageViewer } from "../../utils/ImageViewer";
 import { Legend } from "../../utils/Legend";
 import { LoadingSpinner } from "../../utils/LoadingIndicators";
 import { useDebouncedFetch } from "../../utils/requests";
+import { useSelectedObs, useSelectedVar } from "../../utils/Resolver";
 library.add(faSliders);
 function usePseudospatialData(plotType) {
-  var _settings$selectedVar5, _settings$selectedVar6, _settings$selectedVar7, _settings$selectedVar8;
   const ENDPOINT = "pseudospatial";
   const dataset = useDataset();
   const settings = useSettings();
@@ -28,6 +28,8 @@ function usePseudospatialData(plotType) {
     obsIndices,
     isSliced
   } = useFilteredData();
+  const selectedVar = useSelectedVar();
+  const selectedObs = useSelectedObs();
   const baseParams = useMemo(() => {
     return {
       url: dataset.url,
@@ -41,40 +43,28 @@ function usePseudospatialData(plotType) {
   }, [dataset.url, settings.pseudospatial.maskSet, settings.pseudospatial.maskValues, dataset.varNamesCol, isSliced, obsIndices]);
   const getPlotParams = useCallback(() => {
     if (plotType === PLOT_TYPES.GENE) {
-      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
+        varKey: selectedVar !== null && selectedVar !== void 0 && selectedVar.isSet ? {
+          name: selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.name,
+          indices: selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.vars.map(v => v.index)
+        } : selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.index
       }, settings.sliceBy.obs ? {
-        obsCol: settings.selectedObs,
-        obsValues: !((_settings$selectedObs = settings.selectedObs) !== null && _settings$selectedObs !== void 0 && _settings$selectedObs.omit.length) ? null : _.difference(_.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];
-        })
+        obsCol: selectedObs,
+        obsValues: !(selectedObs !== null && selectedObs !== void 0 && selectedObs.omit.length) ? null : _.difference(selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.values, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.omit)
       } : {});
     } else if (plotType === PLOT_TYPES.CATEGORICAL) {
-      var _settings$selectedObs5, _settings$selectedObs6, _settings$selectedObs7;
       return {
-        obsCol: settings.selectedObs,
-        obsValues: !((_settings$selectedObs5 = settings.selectedObs) !== null && _settings$selectedObs5 !== void 0 && _settings$selectedObs5.omit.length) ? null : _.difference(_.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];
-        }),
+        obsCol: selectedObs,
+        obsValues: !(selectedObs !== null && selectedObs !== void 0 && selectedObs.omit.length) ? null : _.difference(selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.values, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.omit),
         mode: settings.pseudospatial.categoricalMode
       };
     } else if (plotType === "continuous") {
-      var _settings$selectedObs9, _settings$selectedObs0, _settings$selectedObs1;
       return {
-        obsCol: settings.selectedObs,
-        obsValues: !((_settings$selectedObs9 = settings.selectedObs) !== null && _settings$selectedObs9 !== void 0 && _settings$selectedObs9.omit.length) ? null : _.difference(_.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];
-        })
+        obsCol: selectedObs,
+        obsValues: !(selectedObs !== null && selectedObs !== void 0 && selectedObs.omit.length) ? null : _.difference(selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.values, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.omit)
       };
     }
-  }, [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]);
+  }, [settings.pseudospatial.categoricalMode, selectedObs, selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.index, selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.isSet, selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.name, selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.vars, settings.sliceBy.obs, plotType]);
   const params = useMemo(() => {
     return _objectSpread(_objectSpread({}, baseParams), getPlotParams());
   }, [baseParams, getPlotParams]);
@@ -83,7 +73,7 @@ function usePseudospatialData(plotType) {
   });
 }
 export function Pseudospatial(_ref) {
-  var _settings$selectedObs14, _layout$coloraxis3, _layout$coloraxis4;
+  var _layout$coloraxis3, _layout$coloraxis4;
   let {
     showLegend = true,
     sharedScaleRange = false,
@@ -99,10 +89,14 @@ export function Pseudospatial(_ref) {
     getColor
   } = useColor();
   const colorscale = useRef(settings.controls.colorScale);
+  const {
+    valueMin,
+    valueMax
+  } = useFilteredData();
+  const selectedObs = useSelectedObs();
   useEffect(() => {
-    var _settings$selectedObs11, _settings$selectedObs12, _settings$selectedObs13;
-    setPlotType(settings.colorEncoding === COLOR_ENCODINGS.VAR ? PLOT_TYPES.GENE : ((_settings$selectedObs11 = settings.selectedObs) === null || _settings$selectedObs11 === void 0 ? void 0 : _settings$selectedObs11.type) === OBS_TYPES.CATEGORICAL || ((_settings$selectedObs12 = settings.selectedObs) === null || _settings$selectedObs12 === void 0 ? void 0 : _settings$selectedObs12.type) === OBS_TYPES.BOOLEAN ? PLOT_TYPES.CATEGORICAL : ((_settings$selectedObs13 = settings.selectedObs) === null || _settings$selectedObs13 === void 0 ? void 0 : _settings$selectedObs13.type) === OBS_TYPES.CONTINUOUS ? PLOT_TYPES.CONTINUOUS : PLOT_TYPES.MASKS);
-  }, [settings.colorEncoding, (_settings$selectedObs14 = settings.selectedObs) === null || _settings$selectedObs14 === void 0 ? void 0 : _settings$selectedObs14.type, setPlotType]);
+    setPlotType(settings.colorEncoding === COLOR_ENCODINGS.VAR ? PLOT_TYPES.GENE : (selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type) === OBS_TYPES.CATEGORICAL || (selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type) === OBS_TYPES.BOOLEAN ? PLOT_TYPES.CATEGORICAL : (selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type) === OBS_TYPES.CONTINUOUS ? PLOT_TYPES.CONTINUOUS : PLOT_TYPES.MASKS);
+  }, [settings.colorEncoding, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type, setPlotType]);
   const updateColorscale = useCallback(colorscale => {
     setLayout(l => {
       return _objectSpread(_objectSpread({}, l), {}, {
@@ -154,8 +148,8 @@ export function Pseudospatial(_ref) {
         min,
         max
       } = {
-        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]
+        min: settings.controls.range[0] * (valueMax - valueMin) + valueMin,
+        max: settings.controls.range[1] * (valueMax - valueMin) + valueMin
       };
       setData(d => {
         return _.map(d, trace => {
@@ -183,7 +177,7 @@ export function Pseudospatial(_ref) {
         });
       });
     }
-  }, [settings.controls.range, settings.controls.valueMax, settings.controls.valueMin, settings.controls.valueRange, getColor, sharedScaleRange]);
+  }, [settings.controls.range, settings.controls.valueMax, settings.controls.valueMin, getColor, sharedScaleRange, valueMax, valueMin]);
   const hasSelections = !!plotType && !!settings.pseudospatial.maskSet;
   const faSlidersPath = faSliders.icon[4];
   if (!serverError) {