@haniffalab/cherita-react 0.2.0-dev.2024-12-16.67617f27 → 0.2.0-dev.2025-01-17.f9a0f419

package/dist/components/dotplot/Dotplot.js

@@ -19,8 +19,10 @@ 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 {
+    obsIndices,
+    isSliced
+  } = (0, _FilterContext.useFilteredData)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const colorscale = (0, _react.useRef)(dataset.controls.colorScale);
   const [data, setData] = (0, _react.useState)([]);
@@ -34,7 +36,7 @@ function Dotplot() {
       name: i.name,
       indices: i.vars.map(v => v.index)
     } : i.index),
-    obsIndices: isSliced ? [...(filteredData.obsIndices || [])] : null,
+    obsIndices: isSliced ? [...(obsIndices || [])] : null,
     standardScale: dataset.controls.standardScale,
     meanOnlyExpressed: dataset.controls.meanOnlyExpressed,
     expressionCutoff: dataset.controls.expressionCutoff,
@@ -58,14 +60,14 @@ function Dotplot() {
           name: i.name,
           indices: i.vars.map(v => v.index)
         } : i.index),
-        obsIndices: isSliced ? [...(filteredData.obsIndices || [])] : null,
+        obsIndices: isSliced ? [...(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, isSliced, filteredData.obsIndices]);
+  }, [dataset.url, dataset.selectedObs, dataset.selectedMultiVar, dataset.controls.standardScale, dataset.controls.meanOnlyExpressed, dataset.controls.expressionCutoff, dataset.varNamesCol, isSliced, obsIndices]);
   const updateColorscale = (0, _react.useCallback)(colorscale => {
     setLayout(l => {
       return {

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

@@ -43,14 +43,27 @@ function FullPage(_ref) {
   (0, _react.useLayoutEffect)(() => {
     function updateDimensions() {
       if (targetRef.current) {
+        // Log the full viewport height
+        console.log("Full viewport height:", window.innerHeight);
+
+        // Get the distance from the top of the page to the target element
+        const rect = targetRef.current.getBoundingClientRect();
+        const distanceFromTop = rect.top + window.scrollY;
+        console.log("Distance from top of the page:", distanceFromTop);
+
+        // Calculate the available height for the Cherita app
+        const availableHeight = window.innerHeight - distanceFromTop;
+        console.log("Available height for Cherita app:", availableHeight);
+
+        // Update the dimensions to fit the viewport minus the navbar height
         setDimensions({
           width: targetRef.current.offsetWidth,
-          height: window.innerHeight - targetRef.current.offsetTop
+          height: availableHeight
         });
       }
     }
     window.addEventListener("resize", updateDimensions);
-    updateDimensions();
+    updateDimensions(); // Initial update
     return () => window.removeEventListener("resize", updateDimensions);
   }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/dist/components/heatmap/Heatmap.js

@@ -19,8 +19,10 @@ 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 {
+    obsIndices,
+    isSliced
+  } = (0, _FilterContext.useFilteredData)();
   const colorscale = (0, _react.useRef)(dataset.controls.colorScale);
   const [data, setData] = (0, _react.useState)([]);
   const [layout, setLayout] = (0, _react.useState)({});
@@ -33,7 +35,7 @@ function Heatmap() {
       name: i.name,
       indices: i.vars.map(v => v.index)
     } : i.index),
-    obsIndices: isSliced ? [...(filteredData.obsIndices || [])] : null,
+    obsIndices: isSliced ? [...(obsIndices || [])] : null,
     varNamesCol: dataset.varNamesCol
   });
   (0, _react.useEffect)(() => {
@@ -52,11 +54,11 @@ function Heatmap() {
           name: i.name,
           indices: i.vars.map(v => v.index)
         } : i.index),
-        obsIndices: isSliced ? [...(filteredData.obsIndices || [])] : null,
+        obsIndices: isSliced ? [...(obsIndices || [])] : null,
         varNamesCol: dataset.varNamesCol
       };
     });
-  }, [dataset.selectedMultiVar, dataset.selectedObs, dataset.url, dataset.varNamesCol, filteredData.obsIndices, isSliced]);
+  }, [dataset.selectedMultiVar, dataset.selectedObs, dataset.url, dataset.varNamesCol, obsIndices, isSliced]);
   const updateColorscale = (0, _react.useCallback)(colorscale => {
     setLayout(l => {
       return {

package/dist/components/matrixplot/Matrixplot.js

@@ -19,8 +19,10 @@ 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 {
+    obsIndices,
+    isSliced
+  } = (0, _FilterContext.useFilteredData)();
   const colorscale = (0, _react.useRef)(dataset.controls.colorScale);
   const [data, setData] = (0, _react.useState)([]);
   const [layout, setLayout] = (0, _react.useState)({});
@@ -33,7 +35,7 @@ function Matrixplot() {
       name: i.name,
       indices: i.vars.map(v => v.index)
     } : i.index),
-    obsIndices: isSliced ? [...(filteredData.obsIndices || [])] : null,
+    obsIndices: isSliced ? [...(obsIndices || [])] : null,
     standardScale: dataset.controls.standardScale,
     varNamesCol: dataset.varNamesCol
   });
@@ -53,12 +55,12 @@ function Matrixplot() {
           name: i.name,
           indices: i.vars.map(v => v.index)
         } : i.index),
-        obsIndices: isSliced ? [...(filteredData.obsIndices || [])] : null,
+        obsIndices: isSliced ? [...(obsIndices || [])] : null,
         standardScale: dataset.controls.standardScale,
         varNamesCol: dataset.varNamesCol
       };
     });
-  }, [dataset.controls.standardScale, dataset.selectedMultiVar, dataset.selectedObs, dataset.url, dataset.varNamesCol, filteredData.obsIndices, isSliced]);
+  }, [dataset.controls.standardScale, dataset.selectedMultiVar, dataset.selectedObs, dataset.url, dataset.varNamesCol, obsIndices, isSliced]);
   const updateColorscale = (0, _react.useCallback)(colorscale => {
     setLayout(l => {
       return {

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

@@ -48,8 +48,10 @@ function getContinuousLabel(code, binEdges) {
 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 {
+    obsIndices,
+    isSliced
+  } = (0, _FilterContext.useFilteredData)();
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url,
     obsCol: _lodash.default.omit(obs, "omit"),
@@ -58,7 +60,7 @@ const useObsHistogram = obs => {
       name: dataset.selectedVar?.name,
       indices: dataset.selectedVar?.vars.map(v => v.index)
     } : dataset.selectedVar?.index,
-    obsIndices: isSliced ? [...(filteredData.obsIndices || [])] : null
+    obsIndices: isSliced ? [...(obsIndices || [])] : null
   });
   (0, _react.useEffect)(() => {
     setParams(p => {
@@ -69,10 +71,10 @@ const useObsHistogram = obs => {
           name: dataset.selectedVar?.name,
           indices: dataset.selectedVar?.vars.map(v => v.index)
         } : dataset.selectedVar?.index,
-        obsIndices: isSliced ? [...(filteredData.obsIndices || [])] : null
+        obsIndices: isSliced ? [...(obsIndices || [])] : null
       };
     });
-  }, [dataset.selectedVar?.index, dataset.selectedVar?.isSet, dataset.selectedVar?.name, dataset.selectedVar?.vars, filteredData.obsIndices, isSliced, obs]);
+  }, [dataset.selectedVar?.index, dataset.selectedVar?.isSet, dataset.selectedVar?.name, dataset.selectedVar?.vars, obsIndices, isSliced, obs]);
   return (0, _requests.useFetch)(ENDPOINT, params, {
     enabled: !!dataset.selectedVar && dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR,
     refetchOnMount: false
@@ -189,11 +191,13 @@ function CategoricalObs(_ref2) {
     showColor = true
   } = _ref2;
   const dataset = (0, _DatasetContext.useDataset)();
+  const {
+    isSliced
+  } = (0, _FilterContext.useFilteredData)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   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) {

package/dist/components/pseudospatial/Pseudospatial.js

@@ -25,19 +25,21 @@ 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 {
+    obsIndices,
+    isSliced
+  } = (0, _FilterContext.useFilteredData)();
   const baseParams = (0, _react.useMemo)(() => {
     return {
       url: dataset.url,
       maskSet: dataset.pseudospatial.maskSet,
       maskValues: dataset.pseudospatial.maskValues,
-      obsIndices: isSliced ? [...(filteredData.obsIndices || [])] : null,
+      obsIndices: isSliced ? [...(obsIndices || [])] : null,
       varNamesCol: dataset.varNamesCol,
       showColorbar: false,
       format: "json"
     };
-  }, [dataset.url, dataset.pseudospatial.maskSet, dataset.pseudospatial.maskValues, dataset.varNamesCol, isSliced, filteredData.obsIndices]);
+  }, [dataset.url, dataset.pseudospatial.maskSet, dataset.pseudospatial.maskValues, dataset.varNamesCol, isSliced, obsIndices]);
   const getPlotParams = (0, _react.useCallback)(() => {
     if (plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.GENE) {
       return {
@@ -191,7 +193,8 @@ function Pseudospatial(_ref) {
           }
         }), hasSelections && showLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Legend.Legend, {
           min: layout?.coloraxis?.cmin,
-          max: layout?.coloraxis?.cmax
+          max: layout?.coloraxis?.cmax,
+          addText: plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.GENE ? " - Mean expression" : plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL ? " - %" : plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.CONTINUOUS ? " - Mean value" : ""
         })]
       })]
     });

package/dist/components/scatterplot/Scatterplot.js

@@ -17,9 +17,10 @@ var _SpatialControls = require("./SpatialControls");
 var _Toolbox = require("./Toolbox");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
+var _FilterContext = require("../../context/FilterContext");
+var _ZarrDataContext = require("../../context/ZarrDataContext");
 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");
@@ -42,6 +43,12 @@ function Scatterplot(_ref) {
     radius = 30
   } = _ref;
   const dataset = (0, _DatasetContext.useDataset)();
+  const {
+    obsIndices,
+    valueMin,
+    valueMax,
+    slicedLength
+  } = (0, _FilterContext.useFilteredData)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const {
     getColor
@@ -60,21 +67,17 @@ function Scatterplot(_ref) {
   const [mode, setMode] = (0, _react.useState)(() => _editModes.ViewMode);
   const [features, setFeatures] = (0, _react.useState)({
     type: "FeatureCollection",
-    features: []
+    features: dataset.polygons[dataset.selectedObsm] || []
   });
   const [selectedFeatureIndexes, setSelectedFeatureIndexes] = (0, _react.useState)([]);
-  const obsmData = (0, _zarrData.useObsmData)();
-  const xData = (0, _zarrData.useXData)();
-  const obsData = (0, _zarrData.useObsData)();
+  const {
+    obsmData,
+    xData,
+    obsData
+  } = (0, _ZarrDataContext.useZarrData)();
   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);
@@ -207,22 +210,22 @@ function Scatterplot(_ref) {
     let {
       index
     } = _ref2;
-    const grayOut = filteredIndices && !filteredIndices.has(index);
+    const grayOut = obsIndices && !obsIndices.has(index);
     return getColor({
       value: (data.values[index] - min) / (max - min),
       categorical: isCategorical,
       grayOut: grayOut
     });
-  }, [data.values, filteredIndices, getColor, isCategorical, max, min]);
+  }, [data.values, obsIndices, getColor, isCategorical, max, min]);
 
   // @TODO: add support for pseudospatial hover to reflect in radius
   const getRadius = (0, _react.useCallback)((_d, _ref3) => {
     let {
       index
     } = _ref3;
-    const grayOut = filteredIndices && !filteredIndices.has(index);
+    const grayOut = obsIndices && !obsIndices.has(index);
     return grayOut ? 1 : 3;
-  }, [filteredIndices]);
+  }, [obsIndices]);
   const memoizedLayers = (0, _react.useMemo)(() => {
     return [new _layers.ScatterplotLayer({
       id: "cherita-layer-scatterplot",
@@ -281,6 +284,13 @@ function Scatterplot(_ref) {
       });
     }
   }, [dispatch, features?.features?.length]);
+  (0, _react.useEffect)(() => {
+    dispatch({
+      type: "set.polygons",
+      obsm: dataset.selectedObsm,
+      polygons: features?.features || []
+    });
+  }, [dataset.selectedObsm, dispatch, features.features]);
   function onLayerClick(info) {
     if (mode !== _editModes.ViewMode) {
       // don't change selection while editing
@@ -301,7 +311,7 @@ function Scatterplot(_ref) {
       object,
       index
     } = _ref5;
-    if (!object) return;
+    if (!object || object?.type === "Feature") return;
     const text = [];
     if (dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && dataset.selectedObs && !_lodash.default.some(dataset.labelObs, {
       name: dataset.selectedObs.name
@@ -318,7 +328,7 @@ function Scatterplot(_ref) {
       }));
     }
     if (!text.length) return;
-    const grayOut = filteredIndices && !filteredIndices.has(index);
+    const grayOut = obsIndices && !obsIndices.has(index);
     return {
       text: text.length ? _lodash.default.compact(text).join("\n") : null,
       className: grayOut ? "tooltip-grayout" : "deck-tooltip",

package/dist/components/var-list/VarItem.js

@@ -27,21 +27,25 @@ function VarHistogram(_ref) {
   } = _ref;
   const ENDPOINT = "var/histograms";
   const dataset = (0, _DatasetContext.useDataset)();
-  const filteredData = (0, _FilterContext.useFilteredData)();
+  const {
+    obsIndices
+  } = (0, _FilterContext.useFilteredData)();
+  // @TODO: consider using Filter's isSliced; would trigger more re-renders/requests
+  // const { obsIndices, isSliced } = useFilteredData();
   const isSliced = dataset.sliceBy.obs || dataset.sliceBy.polygons;
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url,
     varKey: item.matrix_index,
-    obsIndices: isSliced ? [...(filteredData.obsIndices || [])] : null
+    obsIndices: isSliced ? [...(obsIndices || [])] : null
   });
   (0, _react.useEffect)(() => {
     setParams(p => {
       return {
         ...p,
-        obsIndices: isSliced ? [...(filteredData.obsIndices || [])] : null
+        obsIndices: isSliced ? [...(obsIndices || [])] : null
       };
     });
-  }, [filteredData.obsIndices, isSliced]);
+  }, [obsIndices, isSliced]);
   const {
     fetchedData,
     isPending,

package/dist/components/var-list/VarList.js

@@ -30,6 +30,7 @@ const useVarMean = function (varKeys) {
       name: v.name,
       indices: v.vars.map(v => v.index)
     } : v.index),
+    // obsIndices:
     varNamesCol: dataset.varNamesCol
   });
   (0, _react.useEffect)(() => {

package/dist/components/violin/Violin.js

@@ -25,8 +25,10 @@ function Violin(_ref) {
   } = _ref;
   const ENDPOINT = "violin";
   const dataset = (0, _DatasetContext.useDataset)();
-  const filteredData = (0, _FilterContext.useFilteredData)();
-  const isSliced = dataset.sliceBy.obs || dataset.sliceBy.polygons;
+  const {
+    obsIndices,
+    isSliced
+  } = (0, _FilterContext.useFilteredData)();
   const [data, setData] = (0, _react.useState)([]);
   const [layout, setLayout] = (0, _react.useState)({});
   const [hasSelections, setHasSelections] = (0, _react.useState)(false);
@@ -50,7 +52,7 @@ function Violin(_ref) {
         } : dataset.selectedVar?.index,
         obsCol: dataset.selectedObs,
         obsValues: !dataset.selectedObs?.omit.length ? null : _lodash.default.difference(_lodash.default.values(dataset.selectedObs?.codes), dataset.selectedObs?.omit).map(c => dataset.selectedObs?.codesMap[c]),
-        obsIndices: isSliced ? [...(filteredData.obsIndices || [])] : null
+        obsIndices: isSliced ? [...(obsIndices || [])] : null
       }
     }[mode]
   });
@@ -93,13 +95,13 @@ function Violin(_ref) {
           } : dataset.selectedVar?.index,
           obsCol: dataset.selectedObs,
           obsValues: !dataset.selectedObs?.omit.length ? null : _lodash.default.difference(_lodash.default.values(dataset.selectedObs?.codes), dataset.selectedObs?.omit).map(c => dataset.selectedObs?.codesMap[c]),
-          obsIndices: isSliced ? [...(filteredData.obsIndices || [])] : null,
+          obsIndices: isSliced ? [...(obsIndices || [])] : null,
           scale: dataset.controls.scale.violinplot.value,
           varNamesCol: dataset.varNamesCol
         };
       });
     }
-  }, [dataset.controls.scale.violinplot.value, dataset.selectedMultiVar, dataset.selectedObs, dataset.selectedVar, dataset.url, dataset.varNamesCol, filteredData.obsIndices, isSliced, mode]);
+  }, [dataset.controls.scale.violinplot.value, dataset.selectedMultiVar, dataset.selectedObs, dataset.selectedVar, dataset.url, dataset.varNamesCol, obsIndices, isSliced, mode]);
   const {
     fetchedData,
     isPending,

package/dist/context/DatasetContext.js

@@ -13,6 +13,7 @@ var _reactQuery = require("@tanstack/react-query");
 var _reactQueryPersistClient = require("@tanstack/react-query-persist-client");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _FilterContext = require("./FilterContext");
+var _ZarrDataContext = require("./ZarrDataContext");
 var _constants = require("../constants/constants");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -103,7 +104,8 @@ const initialDataset = {
     maskSet: null,
     maskValues: null,
     categoricalMode: _constants.PSEUDOSPATIAL_CATEGORICAL_MODES.ACROSS.value
-  }
+  },
+  polygons: {}
 };
 const initializer = initialState => {
   const localObj = (JSON.parse(localStorage.getItem(_constants.LOCAL_STORAGE_KEY)) || {})[initialState.url] || {};
@@ -144,7 +146,9 @@ function DatasetProvider(_ref2) {
         client: queryClient,
         persistOptions: persistOptions,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilterContext.FilterProvider, {
-          children: children
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZarrDataContext.ZarrDataProvider, {
+            children: children
+          })
         })
       })
     })
@@ -535,6 +539,16 @@ function datasetReducer(dataset, action) {
           }
         };
       }
+    case "set.polygons":
+      {
+        return {
+          ...dataset,
+          polygons: {
+            ...dataset.polygons,
+            [action.obsm]: action.polygons
+          }
+        };
+      }
     case "set.pseudospatial.maskSet":
       {
         return {

package/dist/context/FilterContext.js

@@ -14,9 +14,11 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const FilteredDataContext = exports.FilteredDataContext = /*#__PURE__*/(0, _react.createContext)(null);
 const FilteredDataDispatchContext = exports.FilteredDataDispatchContext = /*#__PURE__*/(0, _react.createContext)(null);
 const initialFilterData = {
-  obsIndices: [],
-  // @TODO: split to byObs and byPolygons ?
-  varIndices: []
+  obsIndices: null,
+  valueMin: null,
+  valueMax: null,
+  slicedLength: null,
+  isSliced: false
 };
 function FilterProvider(_ref) {
   let {
@@ -45,28 +47,11 @@ function filterReducer(filteredData, action) {
       {
         return {
           ...filteredData,
-          obsIndices: action.indices
-        };
-      }
-    case "reset.obs.indices":
-      {
-        return {
-          ...filteredData,
-          obsIndices: []
-        };
-      }
-    case "set.var.indices":
-      {
-        return {
-          ...filteredData,
-          varIndices: action.indices
-        };
-      }
-    case "reset.var.indices":
-      {
-        return {
-          ...filteredData,
-          varIndices: []
+          obsIndices: action.indices,
+          valueMin: action.valueMin,
+          valueMax: action.valueMax,
+          slicedLength: action.slicedLength,
+          isSliced: action.isSliced
         };
       }
     default:

package/dist/context/ZarrDataContext.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ZarrDataProvider = ZarrDataProvider;
+exports.useZarrData = useZarrData;
+var _react = _interopRequireWildcard(require("react"));
+var _Filter = require("../utils/Filter");
+var _zarrData = require("../utils/zarrData");
+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; }
+const ZarrDataContext = /*#__PURE__*/(0, _react.createContext)(null);
+function ZarrDataProvider(_ref) {
+  let {
+    children
+  } = _ref;
+  const obsmData = (0, _zarrData.useObsmData)();
+  const obsData = (0, _zarrData.useObsData)();
+  const xData = (0, _zarrData.useXData)();
+  const data = {
+    obsmData: obsmData,
+    obsData: obsData,
+    xData: xData,
+    isPending: obsmData.isPending || obsData.isPending || xData.isPending,
+    serverError: obsmData.serverError || obsData.serverError || xData.serverError
+  };
+  (0, _Filter.useFilter)(data);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ZarrDataContext.Provider, {
+    value: data,
+    children: children
+  });
+}
+function useZarrData() {
+  return (0, _react.useContext)(ZarrDataContext);
+}

package/dist/css/cherita.css

@@ -11907,12 +11907,12 @@ textarea.form-control-lg {
   margin-top: 76px;
   padding: 20px;
   position: relative;
-  min-height: 500px;
+  min-height: 400px;
 }
 
 .cherita-container-scatterplot {
   position: relative;
-  min-height: 500px;
+  min-height: 400px;
   height: 100%;
 }
 

package/dist/helpers/zarr-helper.js

@@ -45,20 +45,29 @@ const useZarr = function (_ref2) {
   } = _ref2;
   let s = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   let opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  const {
+    enabled = true
+  } = opts;
   const [data, setData] = (0, _react.useState)(null);
   const [isPending, setIsPending] = (0, _react.useState)(true);
   const [serverError, setServerError] = (0, _react.useState)(null);
   (0, _react.useEffect)(() => {
-    setIsPending(true);
-    setServerError(null);
-    fetchDataFromZarr(url, path, s, opts).then(data => {
-      setData(data);
-    }).catch(error => {
-      setServerError(error.message);
-    }).finally(() => {
+    if (enabled) {
+      setIsPending(true);
+      setServerError(null);
+      fetchDataFromZarr(url, path, s, opts).then(data => {
+        setData(data);
+      }).catch(error => {
+        setServerError(error.message);
+      }).finally(() => {
+        setIsPending(false);
+      });
+    } else {
       setIsPending(false);
-    });
-  }, [opts, path, s, url]);
+      setData(null);
+      setServerError(null);
+    }
+  }, [enabled, opts, path, s, url]);
   return {
     data,
     isPending,
@@ -87,20 +96,29 @@ const aggregateData = (inputs, data) => {
 const useMultipleZarr = function (inputs) {
   let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   let agg = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : aggregateData;
+  const {
+    enabled = true
+  } = opts;
   const [data, setData] = (0, _react.useState)(null);
   const [isPending, setIsPending] = (0, _react.useState)(true);
   const [serverError, setServerError] = (0, _react.useState)(null);
   (0, _react.useEffect)(() => {
-    setIsPending(true);
-    setServerError(null);
-    fetchDataFromZarrs(inputs, opts).then(data => {
-      setData(agg(inputs, data));
-    }).catch(error => {
-      setServerError(error.message);
-    }).finally(() => {
+    if (enabled) {
+      setIsPending(true);
+      setServerError(null);
+      fetchDataFromZarrs(inputs, opts).then(data => {
+        setData(agg(inputs, data));
+      }).catch(error => {
+        setServerError(error.message);
+      }).finally(() => {
+        setIsPending(false);
+      });
+    } else {
+      setData(null);
       setIsPending(false);
-    });
-  }, [agg, inputs, opts]);
+      setServerError(null);
+    }
+  }, [agg, enabled, inputs, opts]);
   return {
     data,
     isPending,

package/dist/utils/Filter.js

@@ -12,61 +12,87 @@ var _DatasetContext = require("../context/DatasetContext");
 var _FilterContext = require("../context/FilterContext");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const EPSILON = 1e-6;
-
-// @TODO: polish hook
-const useFilter = (data, features) => {
+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 isInPolygons = (polygons, positions, index) => {
+  if (!polygons?.length || !positions?.length) {
+    return false;
+  }
+  return _lodash.default.some(polygons, (_f, i) => {
+    return (0, _turf.booleanPointInPolygon)((0, _turf.point)([positions[index][0], positions[index][1]]), polygons[i]);
+  });
+};
+const isInValues = (omit, value) => {
+  if (!omit?.length) {
+    return true;
+  }
+  return !_lodash.default.includes(omit, value);
+};
+const useFilter = data => {
   const dataset = (0, _DatasetContext.useDataset)();
   const filterDataDispatch = (0, _FilterContext.useFilteredDataDispatch)();
-  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 isCategorical = (0, _react.useMemo)(() => {
-    if (dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS) {
-      return dataset.selectedObs?.type === _constants.OBS_TYPES.CATEGORICAL || dataset.selectedObs?.type === _constants.OBS_TYPES.BOOLEAN;
-    } else {
-      return false;
-    }
-  }, [dataset.colorEncoding, dataset.selectedObs?.type]);
-  const isInSlice = (0, _react.useCallback)((index, values, positions) => {
+  const {
+    obsmData,
+    xData,
+    obsData,
+    isPending,
+    serverError
+  } = data;
+  const isCategorical = dataset.selectedObs?.type === _constants.OBS_TYPES.CATEGORICAL || dataset.selectedObs?.type === _constants.OBS_TYPES.BOOLEAN;
+  const isContinuous = dataset.selectedObs?.type === _constants.OBS_TYPES.CONTINUOUS;
+  const sliceByObs = dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && !!dataset.selectedObs?.omit.length || dataset.sliceBy.obs;
+  const isInObsSlice = (0, _react.useCallback)((index, values) => {
     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 (values && sliceByObs) {
+      if (isCategorical) {
+        inSlice &= isInValues(dataset.selectedObs?.omit, values[index]);
+      } else if (isContinuous) {
         if (isNaN(values[index])) {
-          inSlice &= !_lodash.default.includes(dataset.selectedObs.omit, -1);
+          inSlice &= isInValues(dataset.selectedObs?.omit, -1);
         } else {
           inSlice &= isInBins(values[index], dataset.selectedObs.bins.binEdges, _lodash.default.without(dataset.selectedObs.omit, -1));
         }
       }
     }
+    return inSlice;
+  }, [dataset.selectedObs?.bins?.binEdges, dataset.selectedObs?.omit, isCategorical, isContinuous, sliceByObs]);
+  const isInPolygonsSlice = (0, _react.useCallback)((index, positions) => {
+    let inSlice = true;
     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]);
-      });
+      inSlice &= isInPolygons(dataset.polygons[dataset.selectedObsm], positions, index);
     }
     return inSlice;
-  }, [dataset.colorEncoding, dataset.selectedObs?.bins?.binEdges, dataset.selectedObs?.omit, dataset.selectedObs?.type, dataset.sliceBy.obs, dataset.sliceBy.polygons, features?.features, isCategorical]);
+  }, [dataset.polygons, dataset.selectedObsm, dataset.sliceBy.polygons]);
+  const isInSlice = (0, _react.useCallback)((index, values, positions) => {
+    return isInObsSlice(index, values) && isInPolygonsSlice(index, positions);
+  }, [isInObsSlice, isInPolygonsSlice]);
   const {
     filteredIndices,
     valueMin,
     valueMax,
     slicedLength
   } = (0, _react.useMemo)(() => {
+    if (isPending || serverError) {
+      return {
+        filteredIndices: null,
+        valueMin: null,
+        valueMax: null,
+        slicedLength: null
+      };
+    }
     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)) {
+      } = _lodash.default.reduce(xData.data, (acc, v, i) => {
+        if (isInSlice(i, obsData.data, obsmData.data)) {
           acc.filtered.push(v);
           acc.filteredIndices.add(i);
         }
@@ -82,12 +108,11 @@ const useFilter = (data, features) => {
         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)) {
+      } = _lodash.default.reduce(obsData.data, (acc, v, i) => {
+        if (isInSlice(i, obsData.data, obsmData.data)) {
           acc.filtered.push(v);
           acc.filteredIndices.add(i);
         }
@@ -98,32 +123,33 @@ const useFilter = (data, features) => {
       });
       return {
         filteredIndices: filteredIndices,
-        valueMin: _lodash.default.min(isContinuous ? filtered : data.values),
-        valueMax: _lodash.default.max(isContinuous ? filtered : data.values),
+        valueMin: _lodash.default.min(isContinuous ? filtered : obsData.data),
+        valueMax: _lodash.default.max(isContinuous ? filtered : obsData.data),
         slicedLength: filtered.length
       };
     } else {
       return {
         filteredIndices: null,
-        valueMin: _lodash.default.min(data.values),
-        valueMax: _lodash.default.max(data.values),
-        slicedLength: data.values.length
+        valueMin: _lodash.default.min(obsData.data),
+        valueMax: _lodash.default.max(obsData.data),
+        slicedLength: obsData.data.length
       };
     }
-  }, [data.positions, data.sliceValues, data.values, dataset.colorEncoding, dataset.selectedObs?.type, isInSlice]);
+  }, [dataset.colorEncoding, isContinuous, isInSlice, isPending, obsData.data, obsmData.data, serverError, xData.data]);
+  const isSliced = sliceByObs || dataset.sliceBy.polygons;
+  // const isSliced = dataset.sliceBy.obs || dataset.sliceBy.polygons;
 
-  // @TODO: consider moving dispatch outside of hook, only return values
   (0, _react.useEffect)(() => {
-    filterDataDispatch({
-      type: "set.obs.indices",
-      indices: dataset.sliceBy.obs || dataset.sliceBy.polygons ? filteredIndices : null
-    });
-  }, [dataset.sliceBy.obs, dataset.sliceBy.polygons, filterDataDispatch, filteredIndices]);
-  return {
-    filteredIndices,
-    valueMin,
-    valueMax,
-    slicedLength
-  };
+    if (!isPending && !serverError) {
+      filterDataDispatch({
+        type: "set.obs.indices",
+        indices: isSliced ? filteredIndices : null,
+        valueMin: valueMin,
+        valueMax: valueMax,
+        slicedLength: slicedLength,
+        isSliced: isSliced
+      });
+    }
+  }, [dataset.sliceBy.obs, dataset.sliceBy.polygons, filterDataDispatch, filteredIndices, isPending, isSliced, serverError, slicedLength, valueMax, valueMin]);
 };
 exports.useFilter = useFilter;

package/dist/utils/Legend.js

@@ -17,7 +17,8 @@ function Legend(_ref) {
     isCategorical = false,
     min = 0,
     max = 1,
-    colorscale = null
+    colorscale = null,
+    addText = ""
   } = _ref;
   const dataset = (0, _DatasetContext.useDataset)();
   const {
@@ -45,7 +46,7 @@ function Legend(_ref) {
         className: "gradient",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
           className: "small m-0 p-0",
-          children: dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? dataset.selectedVar?.name : dataset.selectedObs?.name
+          children: (dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? dataset.selectedVar?.name : dataset.selectedObs?.name) + addText
         }), spanList, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "domain-min",
           children: (0, _string.formatNumerical)(min, _string.FORMATS.EXPONENTIAL)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "0.2.0-dev.2024-12-16.67617f27",
+  "version": "0.2.0-dev.2025-01-17.f9a0f419",
   "author": "",
   "license": "",
   "main": "dist/index.js",
@@ -101,5 +101,5 @@
     "url": "https://github.com/haniffalab/cherita-react/issues"
   },
   "homepage": "https://github.com/haniffalab/cherita-react#readme",
-  "prereleaseSha": "67617f278b24035c633eed30a5b4d0136e3f77bb"
+  "prereleaseSha": "f9a0f419a990cb5fab684b202bf30c53d20f07f1"
 }

package/scss/cherita.scss

@@ -70,12 +70,12 @@
   margin-top: 76px;
   padding: 20px;
   position: relative;
-  min-height: 500px;
+  min-height: 400px;
 }
 
 .cherita-container-scatterplot {
   position: relative;
-  min-height: 500px;
+  min-height: 400px;
   height: 100%;
 }