@haniffalab/cherita-react 0.2.0-dev.2024-12-16.f02cfae4 → 0.2.0-dev.2024-12-16.67617f27

package/dist/components/dotplot/Dotplot.js

@@ -9,6 +9,7 @@ var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _reactPlotly = _interopRequireDefault(require("react-plotly.js"));
 var _DatasetContext = require("../../context/DatasetContext");
+var _FilterContext = require("../../context/FilterContext");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -18,6 +19,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function Dotplot() {
   const ENDPOINT = "dotplot";
   const dataset = (0, _DatasetContext.useDataset)();
+  const filteredData = (0, _FilterContext.useFilteredData)();
+  const isSliced = dataset.sliceBy.obs || dataset.sliceBy.polygons;
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const colorscale = (0, _react.useRef)(dataset.controls.colorScale);
   const [data, setData] = (0, _react.useState)([]);
@@ -31,6 +34,7 @@ function Dotplot() {
       name: i.name,
       indices: i.vars.map(v => v.index)
     } : i.index),
+    obsIndices: isSliced ? [...(filteredData.obsIndices || [])] : null,
     standardScale: dataset.controls.standardScale,
     meanOnlyExpressed: dataset.controls.meanOnlyExpressed,
     expressionCutoff: dataset.controls.expressionCutoff,
@@ -54,13 +58,14 @@ function Dotplot() {
           name: i.name,
           indices: i.vars.map(v => v.index)
         } : i.index),
+        obsIndices: isSliced ? [...(filteredData.obsIndices || [])] : null,
         standardScale: dataset.controls.standardScale,
         meanOnlyExpressed: dataset.controls.meanOnlyExpressed,
         expressionCutoff: dataset.controls.expressionCutoff,
         varNamesCol: dataset.varNamesCol
       };
     });
-  }, [dataset.url, dataset.selectedObs, dataset.selectedMultiVar, dataset.controls.standardScale, dataset.controls.meanOnlyExpressed, dataset.controls.expressionCutoff, dataset.varNamesCol]);
+  }, [dataset.url, dataset.selectedObs, dataset.selectedMultiVar, dataset.controls.standardScale, dataset.controls.meanOnlyExpressed, dataset.controls.expressionCutoff, dataset.varNamesCol, isSliced, filteredData.obsIndices]);
   const updateColorscale = (0, _react.useCallback)(colorscale => {
     setLayout(l => {
       return {

package/dist/components/full-page/FullPage.js

@@ -4,12 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FullPage = FullPage;
+exports.FullPagePlots = FullPagePlots;
 exports.FullPagePseudospatial = FullPagePseudospatial;
 exports.FullPageScatterplot = FullPageScatterplot;
 var _react = _interopRequireWildcard(require("react"));
 var _reactBootstrap = require("react-bootstrap");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
+var _Dotplot = require("../dotplot/Dotplot");
+var _Heatmap = require("../heatmap/Heatmap");
+var _Matrixplot = require("../matrixplot/Matrixplot");
 var _ObsList = require("../obs-list/ObsList");
 var _offcanvas = require("../offcanvas");
 var _Pseudospatial = require("../pseudospatial/Pseudospatial");
@@ -17,12 +21,14 @@ var _Scatterplot = require("../scatterplot/Scatterplot");
 var _ScatterplotControls = require("../scatterplot/ScatterplotControls");
 var _SearchBar = require("../search-bar/SearchBar");
 var _VarList = require("../var-list/VarList");
+var _Violin = require("../violin/Violin");
 var _jsxRuntime = require("react/jsx-runtime");
 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 FullPage(_ref) {
   let {
     children,
+    varMode = _constants.SELECTION_MODES.SINGLE,
     ...props
   } = _ref;
   const targetRef = (0, _react.useRef)();
@@ -111,7 +117,7 @@ function FullPage(_ref) {
                 searchDiseases: true,
                 searchVar: true
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VarList.VarNamesList, {
-                mode: _constants.SELECTION_MODES.SINGLE
+                mode: varMode
               })]
             })
           })
@@ -174,4 +180,28 @@ function FullPagePseudospatial(props) {
       })
     })
   });
+}
+function FullPagePlots(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FullPage, {
+    ...props,
+    varMode: _constants.SELECTION_MODES.MULTIPLE,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "container-fluid w-100 h-100 d-flex flex-column overflow-y-auto",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "row flex-grow-1",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Heatmap.Heatmap, {})
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "row flex-grow-1",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Matrixplot.Matrixplot, {})
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "row flex-grow-1",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dotplot.Dotplot, {})
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "row flex-grow-1",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Violin.Violin, {
+          mode: _constants.VIOLIN_MODES.GROUPBY
+        })
+      })]
+    })
+  });
 }

package/dist/components/heatmap/Heatmap.js

@@ -9,6 +9,7 @@ var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _reactPlotly = _interopRequireDefault(require("react-plotly.js"));
 var _DatasetContext = require("../../context/DatasetContext");
+var _FilterContext = require("../../context/FilterContext");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -18,6 +19,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function Heatmap() {
   const ENDPOINT = "heatmap";
   const dataset = (0, _DatasetContext.useDataset)();
+  const filteredData = (0, _FilterContext.useFilteredData)();
+  const isSliced = dataset.sliceBy.obs || dataset.sliceBy.polygons;
   const colorscale = (0, _react.useRef)(dataset.controls.colorScale);
   const [data, setData] = (0, _react.useState)([]);
   const [layout, setLayout] = (0, _react.useState)({});
@@ -30,6 +33,7 @@ function Heatmap() {
       name: i.name,
       indices: i.vars.map(v => v.index)
     } : i.index),
+    obsIndices: isSliced ? [...(filteredData.obsIndices || [])] : null,
     varNamesCol: dataset.varNamesCol
   });
   (0, _react.useEffect)(() => {
@@ -48,10 +52,11 @@ function Heatmap() {
           name: i.name,
           indices: i.vars.map(v => v.index)
         } : i.index),
+        obsIndices: isSliced ? [...(filteredData.obsIndices || [])] : null,
         varNamesCol: dataset.varNamesCol
       };
     });
-  }, [dataset.selectedMultiVar, dataset.selectedObs, dataset.url, dataset.varNamesCol]);
+  }, [dataset.selectedMultiVar, dataset.selectedObs, dataset.url, dataset.varNamesCol, filteredData.obsIndices, isSliced]);
   const updateColorscale = (0, _react.useCallback)(colorscale => {
     setLayout(l => {
       return {

package/dist/components/matrixplot/Matrixplot.js

@@ -9,6 +9,7 @@ var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _reactPlotly = _interopRequireDefault(require("react-plotly.js"));
 var _DatasetContext = require("../../context/DatasetContext");
+var _FilterContext = require("../../context/FilterContext");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -18,6 +19,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function Matrixplot() {
   const ENDPOINT = "matrixplot";
   const dataset = (0, _DatasetContext.useDataset)();
+  const filteredData = (0, _FilterContext.useFilteredData)();
+  const isSliced = dataset.sliceBy.obs || dataset.sliceBy.polygons;
   const colorscale = (0, _react.useRef)(dataset.controls.colorScale);
   const [data, setData] = (0, _react.useState)([]);
   const [layout, setLayout] = (0, _react.useState)({});
@@ -30,6 +33,7 @@ function Matrixplot() {
       name: i.name,
       indices: i.vars.map(v => v.index)
     } : i.index),
+    obsIndices: isSliced ? [...(filteredData.obsIndices || [])] : null,
     standardScale: dataset.controls.standardScale,
     varNamesCol: dataset.varNamesCol
   });
@@ -49,11 +53,12 @@ function Matrixplot() {
           name: i.name,
           indices: i.vars.map(v => v.index)
         } : i.index),
+        obsIndices: isSliced ? [...(filteredData.obsIndices || [])] : null,
         standardScale: dataset.controls.standardScale,
         varNamesCol: dataset.varNamesCol
       };
     });
-  }, [dataset.controls.standardScale, dataset.selectedMultiVar, dataset.selectedObs, dataset.url, dataset.varNamesCol]);
+  }, [dataset.controls.standardScale, dataset.selectedMultiVar, dataset.selectedObs, dataset.url, dataset.varNamesCol, filteredData.obsIndices, isSliced]);
   const updateColorscale = (0, _react.useCallback)(colorscale => {
     setLayout(l => {
       return {

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

@@ -11,8 +11,11 @@ var _xCharts = require("@mui/x-charts");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _ObsToolbar = require("./ObsToolbar");
+var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
+var _FilterContext = require("../../context/FilterContext");
 var _colorHelper = require("../../helpers/color-helper");
+var _Histogram = require("../../utils/Histogram");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
 var _string = require("../../utils/string");
@@ -22,8 +25,7 @@ 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) {
-  let nBins = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : N_BINS;
+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;
@@ -40,21 +42,42 @@ function binContinuous(data) {
     bins: bins
   };
 }
-function binDiscrete(data) {
-  let nBins = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : N_BINS;
-  const binSize = _lodash.default.round(data.n_values * (1 / nBins));
-  const bins = {
-    nBins: nBins,
-    binSize: binSize
-  };
-  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 ? " ]" : " )"}`;
 }
+const useObsHistogram = obs => {
+  const ENDPOINT = "obs/histograms";
+  const dataset = (0, _DatasetContext.useDataset)();
+  const filteredData = (0, _FilterContext.useFilteredData)();
+  const isSliced = dataset.sliceBy.obs || dataset.sliceBy.polygons;
+  const [params, setParams] = (0, _react.useState)({
+    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,
+    obsIndices: isSliced ? [...(filteredData.obsIndices || [])] : null
+  });
+  (0, _react.useEffect)(() => {
+    setParams(p => {
+      return {
+        ...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,
+        obsIndices: isSliced ? [...(filteredData.obsIndices || [])] : null
+      };
+    });
+  }, [dataset.selectedVar?.index, dataset.selectedVar?.isSet, dataset.selectedVar?.name, dataset.selectedVar?.vars, filteredData.obsIndices, isSliced, obs]);
+  return (0, _requests.useFetch)(ENDPOINT, params, {
+    enabled: !!dataset.selectedVar && dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR,
+    refetchOnMount: false
+  });
+};
 function CategoricalItem(_ref) {
   let {
     value,
@@ -66,12 +89,18 @@ function CategoricalItem(_ref) {
     min,
     max,
     onChange,
+    histogramData = {
+      data: null,
+      isPending: false,
+      altColor: false
+    },
     showColor = true
   } = _ref;
   const {
     getColor
   } = (0, _colorHelper.useColor)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
+    className: "obs-item",
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "d-flex align-items-center",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -85,7 +114,11 @@ function CategoricalItem(_ref) {
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "d-flex align-items-center",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Histogram.Histogram, {
+          data: histogramData.data,
+          isPending: histogramData.isPending,
+          altColor: histogramData.altColor
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "pl-1 m-0",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
             title: `${(0, _string.formatNumerical)(pct, _string.FORMATS.EXPONENTIAL)}%`,
@@ -115,7 +148,7 @@ function CategoricalItem(_ref) {
               })]
             })
           })
-        }), showColor && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        }), showColor ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "pl-1",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
             xmlns: "http://www.w3.org/2000/svg",
@@ -139,7 +172,7 @@ function CategoricalItem(_ref) {
               })})`
             })
           })
-        })]
+        }) : null]
       })]
     })
   }, value);
@@ -160,6 +193,8 @@ function CategoricalObs(_ref2) {
   const totalCounts = _lodash.default.sum(_lodash.default.values(obs.value_counts));
   const min = _lodash.default.min(_lodash.default.values(obs.codes));
   const max = _lodash.default.max(_lodash.default.values(obs.codes));
+  const isSliced = dataset.sliceBy.obs || dataset.sliceBy.polygons;
+  const obsHistograms = useObsHistogram(obs);
   (0, _react.useEffect)(() => {
     if (dataset.selectedObs?.name === obs.name) {
       const selectedObsData = _lodash.default.omit(dataset.selectedObs, ["omit"]);
@@ -178,16 +213,25 @@ function CategoricalObs(_ref2) {
       }
     }
   }, [dataset.selectedObs, dispatch, obs, obs.name, updateObs]);
-  const getDataAtIndex = index => {
+  const getDataAtIndex = (0, _react.useCallback)(index => {
     return {
       value: obs.values[index],
       code: obs.codes[obs.values[index]],
       value_counts: obs.value_counts[obs.values[index]],
       pct: obs.value_counts[obs.values[index]] / totalCounts * 100,
       isOmitted: _lodash.default.includes(obs.omit, obs.codes[obs.values[index]]),
-      label: obs.values[index]
+      label: obs.values[index],
+      histogramData: dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? {
+        data: obsHistograms.fetchedData?.[obs.values[index]],
+        isPending: obsHistograms.isPending,
+        altColor: isSliced
+      } : {
+        data: null,
+        isPending: false
+      }
     };
-  };
+  }, [dataset.colorEncoding, isSliced, obs.codes, obs.omit, obs.value_counts, obs.values, obsHistograms.fetchedData, obsHistograms.isPending, totalCounts]);
+  showColor &= dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.ListGroup, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ObsToolbar.ObsToolbar, {
@@ -312,7 +356,7 @@ function ContinuousObs(_ref4) {
   const ENDPOINT = "obs/bins";
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
-  const binnedObs = binContinuous(obs);
+  const binnedObs = binContinuous(obs, _lodash.default.min([N_BINS, obs.n_unique]));
   const params = {
     url: dataset.url,
     obsCol: binnedObs.name,

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

@@ -25,6 +25,9 @@ function ObsColsList(_ref) {
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const [obsCols, setObsCols] = (0, _react.useState)(null);
   const [active, setActive] = (0, _react.useState)(dataset.selectedObs?.name);
+  const [expandedItems, setExpandedItems] = (0, _react.useState)(active ? {
+    [active]: true
+  } : {});
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url
   });
@@ -79,6 +82,18 @@ function ObsColsList(_ref) {
       };
     });
   };
+  const handleAccordionToggle = itemName => {
+    _lodash.default.delay(
+    // to avoid contents of accordion disappearing while closing
+    () => {
+      setExpandedItems(prev => {
+        return {
+          ...prev,
+          [itemName]: !prev[itemName]
+        };
+      });
+    }, expandedItems[itemName] ? 250 : 0);
+  };
   const toggleAll = item => {
     const omit = item.omit.length ? [] : _lodash.default.map(item.values, v => item.codes[v]);
     setObsCols(o => {
@@ -168,9 +183,10 @@ function ObsColsList(_ref) {
       eventKey: item.name,
       className: active === item.name && dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && "cherita-accordion-active",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Accordion.Header, {
+        onClick: () => handleAccordionToggle(item.name),
         children: item.name
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Accordion.Body, {
-        children: item.type === _constants.OBS_TYPES.CATEGORICAL || item.type === _constants.OBS_TYPES.BOOLEAN ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ObsItem.CategoricalObs, {
+        children: expandedItems[item.name] && (item.type === _constants.OBS_TYPES.CATEGORICAL || item.type === _constants.OBS_TYPES.BOOLEAN ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ObsItem.CategoricalObs, {
           obs: item,
           updateObs: updateObs,
           toggleAll: () => toggleAll(item),
@@ -187,7 +203,7 @@ function ObsColsList(_ref) {
           toggleLabel: () => toggleLabel(item),
           toggleSlice: () => toggleSlice(item),
           toggleColor: () => toggleColor(item)
-        }, item.name)
+        }, item.name))
       })]
     }, item.name);
   });
@@ -198,7 +214,7 @@ function ObsColsList(_ref) {
         className: "list-group overflow-auto h-100",
         children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Accordion, {
           flush: true,
-          defaultActiveKey: active,
+          defaultActiveKey: [active],
           alwaysOpen: true,
           children: obsList
         })]

package/dist/components/pseudospatial/Pseudospatial.js

@@ -12,6 +12,7 @@ var _reactPlotly = _interopRequireDefault(require("react-plotly.js"));
 var _PseudospatialToolbar = require("./PseudospatialToolbar");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
+var _FilterContext = require("../../context/FilterContext");
 var _colorHelper = require("../../helpers/color-helper");
 var _ImageViewer = require("../../utils/ImageViewer");
 var _Legend = require("../../utils/Legend");
@@ -24,16 +25,19 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function usePseudospatialData(plotType) {
   const ENDPOINT = "pseudospatial";
   const dataset = (0, _DatasetContext.useDataset)();
+  const filteredData = (0, _FilterContext.useFilteredData)();
+  const isSliced = dataset.sliceBy.obs || dataset.sliceBy.polygons;
   const baseParams = (0, _react.useMemo)(() => {
     return {
       url: dataset.url,
       maskSet: dataset.pseudospatial.maskSet,
       maskValues: dataset.pseudospatial.maskValues,
+      obsIndices: isSliced ? [...(filteredData.obsIndices || [])] : null,
       varNamesCol: dataset.varNamesCol,
       showColorbar: false,
       format: "json"
     };
-  }, [dataset.url, dataset.pseudospatial.maskSet, dataset.pseudospatial.maskValues, dataset.varNamesCol]);
+  }, [dataset.url, dataset.pseudospatial.maskSet, dataset.pseudospatial.maskValues, dataset.varNamesCol, isSliced, filteredData.obsIndices]);
   const getPlotParams = (0, _react.useCallback)(() => {
     if (plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.GENE) {
       return {

package/dist/components/pseudospatial/PseudospatialToolbar.js

@@ -59,7 +59,9 @@ function MaskSet() {
     fetchedData,
     isPending,
     serverError
-  } = (0, _requests.useFetch)(ENDPOINT, params);
+  } = (0, _requests.useFetch)(ENDPOINT, params, {
+    refetchOnMount: false
+  });
   (0, _react.useEffect)(() => {
     if (!isPending && !serverError) {
       setMaskSets(fetchedData);

package/dist/components/scatterplot/Scatterplot.js

@@ -11,16 +11,15 @@ var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 var _reactFontawesome = require("@fortawesome/react-fontawesome");
 var _editModes = require("@nebula.gl/edit-modes");
 var _layers2 = require("@nebula.gl/layers");
-var _turf = require("@turf/turf");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _SpatialControls = require("./SpatialControls");
 var _Toolbox = require("./Toolbox");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
-var _FilterContext = require("../../context/FilterContext");
 var _colorHelper = require("../../helpers/color-helper");
 var _mapHelper = require("../../helpers/map-helper");
+var _Filter = require("../../utils/Filter");
 var _Legend = require("../../utils/Legend");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _string = require("../../utils/string");
@@ -38,14 +37,12 @@ const INITIAL_VIEW_STATE = {
   pitch: 0,
   bearing: 0
 };
-const EPSILON = 1e-6;
 function Scatterplot(_ref) {
   let {
     radius = 30
   } = _ref;
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
-  const filterDispatch = (0, _FilterContext.useFilteredDataDispatch)();
   const {
     getColor
   } = (0, _colorHelper.useColor)();
@@ -72,6 +69,12 @@ function Scatterplot(_ref) {
   const labelObsData = (0, _zarrData.useLabelObsData)();
   // @TODO: assert length of obsmData, xData, obsData is equal
 
+  const {
+    filteredIndices,
+    valueMin,
+    valueMax,
+    slicedLength
+  } = (0, _Filter.useFilter)(data, features);
   (0, _react.useEffect)(() => {
     if (!obsmData.isPending && !obsmData.serverError) {
       setIsRendering(true);
@@ -187,101 +190,6 @@ function Scatterplot(_ref) {
       return false;
     }
   }, [dataset.colorEncoding, dataset.selectedObs?.type]);
-  const isInBins = (v, binEdges, indices) => {
-    const lastEdge = _lodash.default.last(binEdges);
-    const allButLastEdges = _lodash.default.initial(binEdges);
-    // add epsilon to last edge to include the last value
-    const modifiedBinEdges = [...allButLastEdges, [lastEdge[0], lastEdge[1] + EPSILON]];
-    const binIndices = _lodash.default.difference(_lodash.default.range(binEdges.length), indices);
-    const ranges = _lodash.default.at(modifiedBinEdges, binIndices);
-    return _lodash.default.some(ranges, range => _lodash.default.inRange(v, ...range));
-  };
-  const isInSlice = (0, _react.useCallback)((index, values, positions) => {
-    let inSlice = true;
-    if (isCategorical && values) {
-      inSlice &= !_lodash.default.includes(dataset.selectedObs?.omit, values[index]);
-    } else if ((dataset.sliceBy.obs || dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && dataset.selectedObs?.type === _constants.OBS_TYPES.CONTINUOUS) && !!dataset.selectedObs?.omit.length && values) {
-      if (dataset.selectedObs.type === _constants.OBS_TYPES.CATEGORICAL) {
-        inSlice &= !_lodash.default.includes(dataset.selectedObs.omit, values[index]);
-      } else if (dataset.selectedObs.type === _constants.OBS_TYPES.CONTINUOUS) {
-        if (isNaN(values[index])) {
-          inSlice &= !_lodash.default.includes(dataset.selectedObs.omit, -1);
-        } else {
-          inSlice &= isInBins(values[index], dataset.selectedObs.bins.binEdges, _lodash.default.without(dataset.selectedObs.omit, -1));
-        }
-      }
-    }
-    if (dataset.sliceBy.polygons && positions) {
-      inSlice &= _lodash.default.some(features?.features, (_f, i) => {
-        return (0, _turf.booleanPointInPolygon)((0, _turf.point)([positions[index][0], positions[index][1]]), features.features[i]);
-      });
-    }
-    return inSlice;
-  }, [dataset.colorEncoding, dataset.selectedObs?.bins?.binEdges, dataset.selectedObs?.omit, dataset.selectedObs?.type, dataset.sliceBy.obs, dataset.sliceBy.polygons, features.features, isCategorical]);
-
-  // @TODO: abstract filtering out of this component, maybe in FilterContext ?
-  const {
-    filteredIndices,
-    valueMin,
-    valueMax,
-    slicedLength
-  } = (0, _react.useMemo)(() => {
-    if (dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR) {
-      const {
-        filtered,
-        filteredIndices
-      } = _lodash.default.reduce(data.values, (acc, v, i) => {
-        if (isInSlice(i, data.sliceValues, data.positions)) {
-          acc.filtered.push(v);
-          acc.filteredIndices.add(i);
-        }
-        return acc;
-      }, {
-        filtered: [],
-        filteredIndices: new Set()
-      });
-      return {
-        filteredIndices: filteredIndices,
-        valueMin: _lodash.default.min(filtered),
-        valueMax: _lodash.default.max(filtered),
-        slicedLength: filtered.length
-      };
-    } else if (dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS) {
-      const isContinuous = dataset.selectedObs?.type === _constants.OBS_TYPES.CONTINUOUS;
-      const {
-        filtered,
-        filteredIndices
-      } = _lodash.default.reduce(data.values, (acc, v, i) => {
-        if (isInSlice(i, data.values, data.positions)) {
-          acc.filtered.push(v);
-          acc.filteredIndices.add(i);
-        }
-        return acc;
-      }, {
-        filtered: [],
-        filteredIndices: new Set()
-      });
-      return {
-        filteredIndices: filteredIndices,
-        valueMin: _lodash.default.min(isContinuous ? filtered : data.values),
-        valueMax: _lodash.default.max(isContinuous ? filtered : data.values),
-        slicedLength: filtered.length
-      };
-    } else {
-      return {
-        filteredIndices: null,
-        valueMin: _lodash.default.min(data.values),
-        valueMax: _lodash.default.max(data.values),
-        slicedLength: data.values.length
-      };
-    }
-  }, [data.positions, data.sliceValues, data.values, dataset.colorEncoding, dataset.selectedObs?.type, isInSlice]);
-  (0, _react.useEffect)(() => {
-    filterDispatch({
-      type: "set.obs.indices",
-      indices: dataset.sliceBy.obs || dataset.sliceBy.polygons ? filteredIndices : null
-    });
-  }, [dataset.sliceBy.obs, dataset.sliceBy.polygons, filterDispatch, filteredIndices]);
   (0, _react.useEffect)(() => {
     dispatch({
       type: "set.controls.valueRange",