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

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

@@ -1,27 +1,38 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import _ from "lodash";
 import { Alert } from "react-bootstrap";
 import Plot from "react-plotly.js";
 import { useDataset } from "../../context/DatasetContext";
 import { useFilteredData } from "../../context/FilterContext";
+import { useSettings } from "../../context/SettingsContext";
 import { LoadingSpinner } from "../../utils/LoadingIndicators";
 import { useDebouncedFetch } from "../../utils/requests";
 export function Heatmap() {
+  var _settings$selectedObs, _settings$selectedObs2, _settings$selectedObs3;
   const ENDPOINT = "heatmap";
   const dataset = useDataset();
+  const settings = useSettings();
   const {
     obsIndices,
     isSliced
   } = useFilteredData();
-  const colorscale = useRef(dataset.controls.colorScale);
+  const colorscale = useRef(settings.controls.colorScale);
   const [data, setData] = useState([]);
   const [layout, setLayout] = useState({});
   const [hasSelections, setHasSelections] = useState(false);
   const [params, setParams] = useState({
     url: dataset.url,
-    obsCol: dataset.selectedObs,
-    obsValues: !dataset.selectedObs?.omit.length ? null : _.difference(_.values(dataset.selectedObs?.codes), dataset.selectedObs?.omit).map(c => dataset.selectedObs?.codesMap[c]),
-    varKeys: dataset.selectedMultiVar.map(i => i.isSet ? {
+    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 ? {
       name: i.name,
       indices: i.vars.map(v => v.index)
     } : i.index),
@@ -29,35 +40,36 @@ export function Heatmap() {
     varNamesCol: dataset.varNamesCol
   });
   useEffect(() => {
-    if (dataset.selectedObs && dataset.selectedMultiVar.length) {
+    if (settings.selectedObs && settings.selectedMultiVar.length) {
       setHasSelections(true);
     } else {
       setHasSelections(false);
     }
     setParams(p => {
-      return {
-        ...p,
+      var _settings$selectedObs5, _settings$selectedObs6, _settings$selectedObs7;
+      return _objectSpread(_objectSpread({}, p), {}, {
         url: dataset.url,
-        obsCol: dataset.selectedObs,
-        obsValues: !dataset.selectedObs?.omit.length ? null : _.difference(_.values(dataset.selectedObs?.codes), dataset.selectedObs?.omit).map(c => dataset.selectedObs?.codesMap[c]),
-        varKeys: dataset.selectedMultiVar.map(i => i.isSet ? {
+        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 ? {
           name: i.name,
           indices: i.vars.map(v => v.index)
         } : i.index),
         obsIndices: isSliced ? [...(obsIndices || [])] : null,
         varNamesCol: dataset.varNamesCol
-      };
+      });
     });
-  }, [dataset.selectedMultiVar, dataset.selectedObs, dataset.url, dataset.varNamesCol, obsIndices, isSliced]);
+  }, [settings.selectedMultiVar, settings.selectedObs, dataset.url, dataset.varNamesCol, obsIndices, isSliced]);
   const updateColorscale = useCallback(colorscale => {
     setLayout(l => {
-      return {
-        ...l,
-        coloraxis: {
-          ...l.coloraxis,
+      return _objectSpread(_objectSpread({}, l), {}, {
+        coloraxis: _objectSpread(_objectSpread({}, l.coloraxis), {}, {
           colorscale: colorscale
-        }
-      };
+        })
+      });
     });
   }, []);
   const {
@@ -75,9 +87,9 @@ export function Heatmap() {
     }
   }, [fetchedData, hasSelections, isPending, serverError, updateColorscale]);
   useEffect(() => {
-    colorscale.current = dataset.controls.colorScale;
+    colorscale.current = settings.controls.colorScale;
     updateColorscale(colorscale.current);
-  }, [dataset.controls.colorScale, updateColorscale]);
+  }, [settings.controls.colorScale, updateColorscale]);
   if (!serverError) {
     if (hasSelections) {
       return /*#__PURE__*/React.createElement("div", {

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

@@ -1,23 +1,6 @@
 import React from "react";
-import _ from "lodash";
-import { Dropdown } from "react-bootstrap";
-import { COLORSCALES } from "../../constants/colorscales";
-import { useDataset, useDatasetDispatch } from "../../context/DatasetContext";
+import { Form } from "react-bootstrap";
+import { ColorscaleSelect } from "../controls/Controls";
 export function HeatmapControls() {
-  const dataset = useDataset();
-  const dispatch = useDatasetDispatch();
-  const colormapList = _.keys(COLORSCALES).map(key => /*#__PURE__*/React.createElement(Dropdown.Item, {
-    key: key,
-    active: dataset.controls.colorScale === key,
-    onClick: () => {
-      dispatch({
-        type: "set.controls.colorScale",
-        colorScale: key
-      });
-    }
-  }, key));
-  return /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.Toggle, {
-    id: "dropdownColorscale",
-    variant: "light"
-  }, dataset.controls.colorScale), /*#__PURE__*/React.createElement(Dropdown.Menu, null, colormapList));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(ColorscaleSelect, null)));
 }

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

@@ -1,65 +1,77 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import _ from "lodash";
 import { Alert } from "react-bootstrap";
 import Plot from "react-plotly.js";
 import { useDataset } from "../../context/DatasetContext";
 import { useFilteredData } from "../../context/FilterContext";
+import { useSettings } from "../../context/SettingsContext";
 import { LoadingSpinner } from "../../utils/LoadingIndicators";
 import { useDebouncedFetch } from "../../utils/requests";
 export function Matrixplot() {
+  var _settings$selectedObs, _settings$selectedObs2, _settings$selectedObs3;
   const ENDPOINT = "matrixplot";
   const dataset = useDataset();
+  const settings = useSettings();
   const {
     obsIndices,
     isSliced
   } = useFilteredData();
-  const colorscale = useRef(dataset.controls.colorScale);
+  const colorscale = useRef(settings.controls.colorScale);
   const [data, setData] = useState([]);
   const [layout, setLayout] = useState({});
   const [hasSelections, setHasSelections] = useState(false);
   const [params, setParams] = useState({
     url: dataset.url,
-    obsCol: dataset.selectedObs,
-    obsValues: !dataset.selectedObs?.omit.length ? null : _.difference(_.values(dataset.selectedObs?.codes), dataset.selectedObs?.omit).map(c => dataset.selectedObs?.codesMap[c]),
-    varKeys: dataset.selectedMultiVar.map(i => i.isSet ? {
+    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 ? {
       name: i.name,
       indices: i.vars.map(v => v.index)
     } : i.index),
     obsIndices: isSliced ? [...(obsIndices || [])] : null,
-    standardScale: dataset.controls.standardScale,
+    standardScale: settings.controls.scale.matrixplot,
     varNamesCol: dataset.varNamesCol
   });
   useEffect(() => {
-    if (dataset.selectedObs && dataset.selectedMultiVar.length) {
+    if (settings.selectedObs && settings.selectedMultiVar.length) {
       setHasSelections(true);
     } else {
       setHasSelections(false);
     }
     setParams(p => {
-      return {
-        ...p,
+      var _settings$selectedObs5, _settings$selectedObs6, _settings$selectedObs7;
+      return _objectSpread(_objectSpread({}, p), {}, {
         url: dataset.url,
-        obsCol: dataset.selectedObs,
-        obsValues: !dataset.selectedObs?.omit.length ? null : _.difference(_.values(dataset.selectedObs?.codes), dataset.selectedObs?.omit).map(c => dataset.selectedObs?.codesMap[c]),
-        varKeys: dataset.selectedMultiVar.map(i => i.isSet ? {
+        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 ? {
           name: i.name,
           indices: i.vars.map(v => v.index)
         } : i.index),
         obsIndices: isSliced ? [...(obsIndices || [])] : null,
-        standardScale: dataset.controls.standardScale,
+        standardScale: settings.controls.scale.matrixplot,
         varNamesCol: dataset.varNamesCol
-      };
+      });
     });
-  }, [dataset.controls.standardScale, dataset.selectedMultiVar, dataset.selectedObs, dataset.url, dataset.varNamesCol, obsIndices, isSliced]);
+  }, [settings.controls.scale.matrixplot, settings.selectedMultiVar, settings.selectedObs, dataset.url, dataset.varNamesCol, obsIndices, isSliced]);
   const updateColorscale = useCallback(colorscale => {
     setLayout(l => {
-      return {
-        ...l,
-        coloraxis: {
-          ...l.coloraxis,
+      return _objectSpread(_objectSpread({}, l), {}, {
+        coloraxis: _objectSpread(_objectSpread({}, l.coloraxis), {}, {
           colorscale: colorscale
-        }
-      };
+        })
+      });
     });
   }, []);
   const {
@@ -77,9 +89,9 @@ export function Matrixplot() {
     }
   }, [fetchedData, hasSelections, isPending, serverError, updateColorscale]);
   useEffect(() => {
-    colorscale.current = dataset.controls.colorScale;
+    colorscale.current = settings.controls.colorScale;
     updateColorscale(colorscale.current);
-  }, [dataset.controls.colorScale, updateColorscale]);
+  }, [settings.controls.colorScale, updateColorscale]);
   if (!serverError) {
     if (hasSelections) {
       return /*#__PURE__*/React.createElement("div", {

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

@@ -1,38 +1,8 @@
 import React from "react";
-import _ from "lodash";
-import { Dropdown, ButtonGroup, ButtonToolbar, InputGroup } from "react-bootstrap";
-import { COLORSCALES } from "../../constants/colorscales";
-import { MATRIXPLOT_SCALES } from "../../constants/constants";
-import { useDataset, useDatasetDispatch } from "../../context/DatasetContext";
+import { Form } from "react-bootstrap";
+import { ColorscaleSelect, ScaleSelect } from "../controls/Controls";
 export function MatrixplotControls() {
-  const dataset = useDataset();
-  const dispatch = useDatasetDispatch();
-  const colorScaleList = _.keys(COLORSCALES).map(key => /*#__PURE__*/React.createElement(Dropdown.Item, {
-    key: key,
-    active: dataset.controls.colorScale === key,
-    onClick: () => {
-      dispatch({
-        type: "set.controls.colorScale",
-        colorScale: key
-      });
-    }
-  }, key));
-  const standardScaleList = _.values(MATRIXPLOT_SCALES).map(scale => /*#__PURE__*/React.createElement(Dropdown.Item, {
-    key: scale.value,
-    active: dataset.controls.scale.matrixplot.name === scale.name,
-    onClick: () => {
-      dispatch({
-        type: "set.controls.scale",
-        plot: "matrixplot",
-        scale: scale
-      });
-    }
-  }, scale.name));
-  return /*#__PURE__*/React.createElement(ButtonToolbar, null, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.Toggle, {
-    id: "dropdownColorscale",
-    variant: "light"
-  }, dataset.controls.colorScale), /*#__PURE__*/React.createElement(Dropdown.Menu, null, colorScaleList))), /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(InputGroup, null, /*#__PURE__*/React.createElement(InputGroup.Text, null, "Standard scale"), /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.Toggle, {
-    id: "dropdownStandardScale",
-    variant: "light"
-  }, dataset.controls.scale.matrixplot.name), /*#__PURE__*/React.createElement(Dropdown.Menu, null, standardScaleList)))));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(ColorscaleSelect, null), /*#__PURE__*/React.createElement(ScaleSelect, {
+    plot: "matrixplot"
+  })));
 }

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

@@ -1,3 +1,8 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { Tooltip } from "@mui/material";
 import { Gauge, SparkLineChart } from "@mui/x-charts";
@@ -7,6 +12,7 @@ import { ObsToolbar } from "./ObsToolbar";
 import { COLOR_ENCODINGS, OBS_TYPES } from "../../constants/constants";
 import { useDataset } from "../../context/DatasetContext";
 import { useFilteredData } from "../../context/FilterContext";
+import { useSettings } from "../../context/SettingsContext";
 import { useColor } from "../../helpers/color-helper";
 import { Histogram } from "../../utils/Histogram";
 import { LoadingLinear } from "../../utils/LoadingIndicators";
@@ -14,30 +20,35 @@ import { useFetch } from "../../utils/requests";
 import { formatNumerical, FORMATS } from "../../utils/string";
 import { VirtualizedList } from "../../utils/VirtualizedList";
 import { useObsData } from "../../utils/zarrData";
-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
-  };
-}
+
+// 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 `[ ${formatNumerical(binEdges[code][0])}, ${formatNumerical(binEdges[code][1], FORMATS.EXPONENTIAL)}${code === binEdges.length - 1 ? " ]" : " )"}`;
+  return "[ ".concat(formatNumerical(binEdges[code][0]), ", ").concat(formatNumerical(binEdges[code][1], 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 = useDataset();
+  const settings = useSettings();
   const {
     obsIndices,
     isSliced
@@ -46,27 +57,27 @@ const useObsHistogram = obs => {
     url: dataset.url,
     obsCol: _.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
   });
   useEffect(() => {
     setParams(p => {
-      return {
-        ...p,
+      var _settings$selectedVar5, _settings$selectedVar6, _settings$selectedVar7, _settings$selectedVar8;
+      return _objectSpread(_objectSpread({}, p), {}, {
         obsCol: _.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 useFetch(ENDPOINT, params, {
-    enabled: !!dataset.selectedVar && dataset.colorEncoding === COLOR_ENCODINGS.VAR,
+    enabled: !!settings.selectedVar && settings.colorEncoding === COLOR_ENCODINGS.VAR,
     refetchOnMount: false
   });
 };
@@ -78,6 +89,7 @@ const getBinIndex = (v, binEdges) => {
   return _.findIndex(modifiedBinEdges, range => _.inRange(v, ...range));
 };
 const useFilteredObsData = obs => {
+  var _obs$bins2;
   const {
     obsIndices
   } = useFilteredData();
@@ -93,19 +105,20 @@ const useFilteredObsData = obs => {
       valueCounts = _.countBy(filteredObsValues);
     } else {
       valueCounts = _.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 = _.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 = _.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
@@ -165,7 +178,7 @@ function CategoricalItem(_ref) {
   })), /*#__PURE__*/React.createElement("div", {
     className: "pl-1 m-0"
   }, /*#__PURE__*/React.createElement(Tooltip, {
-    title: isSliced ? /*#__PURE__*/React.createElement(React.Fragment, null, "Filtered:", " ", formatNumerical(filteredStats.pct, FORMATS.EXPONENTIAL), "%", /*#__PURE__*/React.createElement("br", null), "Total: ", formatNumerical(stats.pct, FORMATS.EXPONENTIAL), "%") : `${formatNumerical(stats.pct, FORMATS.EXPONENTIAL)}%`,
+    title: isSliced ? /*#__PURE__*/React.createElement(React.Fragment, null, "Filtered:", " ", formatNumerical(filteredStats.pct, FORMATS.EXPONENTIAL), "%", /*#__PURE__*/React.createElement("br", null), "Total: ", formatNumerical(stats.pct, FORMATS.EXPONENTIAL), "%") : "".concat(formatNumerical(stats.pct, FORMATS.EXPONENTIAL), "%"),
     placement: "left",
     arrow: true
   }, /*#__PURE__*/React.createElement("div", {
@@ -220,7 +233,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,
@@ -228,7 +241,7 @@ function CategoricalItem(_ref) {
         alpha: 1
       },
       colorEncoding: "obs"
-    })})`
+    }), ")")
   }))) : null))));
 }
 export function CategoricalObs(_ref2) {
@@ -238,7 +251,7 @@ export function CategoricalObs(_ref2) {
     toggleObs,
     showColor = true
   } = _ref2;
-  const dataset = useDataset();
+  const settings = useSettings();
   const {
     isSliced
   } = useFilteredData();
@@ -248,6 +261,7 @@ export function CategoricalObs(_ref2) {
   const obsHistograms = useObsHistogram(obs);
   const filteredObsData = useFilteredObsData(obs);
   const getDataAtIndex = useCallback(index => {
+    var _obsHistograms$fetche;
     return {
       value: obs.values[index],
       code: obs.codes[obs.values[index]],
@@ -257,8 +271,8 @@ export function CategoricalObs(_ref2) {
       },
       isOmitted: _.includes(obs.omit, obs.codes[obs.values[index]]),
       label: obs.values[index],
-      histogramData: dataset.colorEncoding === COLOR_ENCODINGS.VAR ? {
-        data: obsHistograms.fetchedData?.[obs.values[index]],
+      histogramData: settings.colorEncoding === 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
       } : {
@@ -266,13 +280,13 @@ export 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 === 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 === COLOR_ENCODINGS.OBS;
   return /*#__PURE__*/React.createElement(ListGroup, {
     variant: "flush",
     className: "cherita-list"
@@ -334,9 +348,9 @@ function ObsContinuousStats(_ref3) {
     },
     xAxis: {
       data: fetchedData.kde_values[0],
-      valueFormatter: v => `${formatNumerical(v, FORMATS.EXPONENTIAL)}`
+      valueFormatter: v => "".concat(formatNumerical(v, FORMATS.EXPONENTIAL))
     },
-    valueFormatter: v => `${formatNumerical(v, FORMATS.EXPONENTIAL)}`,
+    valueFormatter: v => "".concat(formatNumerical(v, FORMATS.EXPONENTIAL)),
     slotProps: {
       popper: {
         className: "feature-histogram-tooltip"
@@ -381,8 +395,8 @@ export function ContinuousObs(_ref4) {
       isOmitted: _.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
     };