@haniffalab/cherita-react 0.2.0-dev.2024-12-16.f02cfae4 → 0.2.0-dev.2024-12-16.6be54149

package/dist/components/scatterplot/Scatterplot.js

@@ -11,7 +11,6 @@ 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");
@@ -19,6 +18,7 @@ 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 _Legend = require("../../utils/Legend");
@@ -38,14 +38,18 @@ 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 {
+    obsIndices,
+    valueMin,
+    valueMax,
+    slicedLength
+  } = (0, _FilterContext.useFilteredData)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
-  const filterDispatch = (0, _FilterContext.useFilteredDataDispatch)();
   const {
     getColor
   } = (0, _colorHelper.useColor)();
@@ -63,12 +67,14 @@ 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
 
@@ -187,101 +193,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",
@@ -299,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",
@@ -373,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
@@ -393,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
@@ -410,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

@@ -9,16 +9,13 @@ var _react = _interopRequireWildcard(require("react"));
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 var _reactFontawesome = require("@fortawesome/react-fontawesome");
 var _iconsMaterial = require("@mui/icons-material");
-var _xCharts = require("@mui/x-charts");
-var _colorPalettes = require("@mui/x-charts/colorPalettes");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
 var _FilterContext = require("../../context/FilterContext");
-var _LoadingIndicators = require("../../utils/LoadingIndicators");
+var _Histogram = require("../../utils/Histogram");
 var _requests = require("../../utils/requests");
-var _string = require("../../utils/string");
 var _VirtualizedList = require("../../utils/VirtualizedList");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -30,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 && Array.from(filteredData.obsIndices || [])
+    obsIndices: isSliced ? [...(obsIndices || [])] : null
   });
   (0, _react.useEffect)(() => {
     setParams(p => {
       return {
         ...p,
-        obsIndices: isSliced && Array.from(filteredData.obsIndices || [])
+        obsIndices: isSliced ? [...(obsIndices || [])] : null
       };
     });
-  }, [filteredData.obsIndices, isSliced]);
+  }, [obsIndices, isSliced]);
   const {
     fetchedData,
     isPending,
@@ -52,39 +53,10 @@ function VarHistogram(_ref) {
   } = (0, _requests.useDebouncedFetch)(ENDPOINT, params, {
     refetchOnMount: false
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "feature-histogram-container",
-    children: isPending ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingLinear, {}) : !serverError && fetchedData ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "feature-histogram m-1",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xCharts.SparkLineChart, {
-        plotType: "bar",
-        data: fetchedData.log10,
-        margin: {
-          top: 0,
-          right: 0,
-          bottom: 0,
-          left: 0
-        },
-        colors: isSliced ? _colorPalettes.mangoFusionPalette : _colorPalettes.blueberryTwilightPalette,
-        showHighlight: true,
-        showTooltip: true,
-        valueFormatter: (v, _ref2) => {
-          let {
-            dataIndex
-          } = _ref2;
-          return `${(0, _string.formatNumerical)(fetchedData.hist[dataIndex])}`;
-        },
-        xAxis: {
-          data: _lodash.default.range(fetchedData.bin_edges?.length) || null,
-          valueFormatter: v => `Bin [${(0, _string.formatNumerical)(fetchedData.bin_edges[v][0], _string.FORMATS.EXPONENTIAL)}, ${(0, _string.formatNumerical)(fetchedData.bin_edges[v][1], _string.FORMATS.EXPONENTIAL)}${v === fetchedData.bin_edges.length - 1 ? "]" : ")"}`
-        },
-        slotProps: {
-          popper: {
-            className: "feature-histogram-tooltip"
-          }
-        }
-      })
-    }) : null
+  return !serverError && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Histogram.Histogram, {
+    data: fetchedData,
+    isPending: isPending,
+    altColor: isSliced
   });
 }
 function VarDiseaseInfoItem(item) {
@@ -134,10 +106,10 @@ function VarDiseaseInfoItem(item) {
     })
   }, item.disease_name);
 }
-function VarDiseaseInfo(_ref3) {
+function VarDiseaseInfo(_ref2) {
   let {
     data
-  } = _ref3;
+  } = _ref2;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualizedList.VirtualizedList, {
@@ -150,7 +122,7 @@ function VarDiseaseInfo(_ref3) {
     })
   });
 }
-function SingleSelectionItem(_ref4) {
+function SingleSelectionItem(_ref3) {
   let {
     item,
     isActive,
@@ -159,7 +131,7 @@ function SingleSelectionItem(_ref4) {
     isDiseaseGene = false,
     showSetColorEncoding = true,
     showRemove = true
-  } = _ref4;
+  } = _ref3;
   const ENDPOINT = "disease/gene";
   const [openInfo, setOpenInfo] = (0, _react.useState)(false);
   const dataset = (0, _DatasetContext.useDataset)();
@@ -172,7 +144,9 @@ function SingleSelectionItem(_ref4) {
     fetchedData,
     isPending,
     serverError
-  } = (0, _requests.useFetch)(ENDPOINT, params);
+  } = (0, _requests.useFetch)(ENDPOINT, params, {
+    refetchOnMount: false
+  });
   const hasDiseaseInfo = !isPending && !serverError && !!fetchedData.length;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -227,12 +201,12 @@ function SingleSelectionItem(_ref4) {
     })]
   });
 }
-function MultipleSelectionItem(_ref5) {
+function MultipleSelectionItem(_ref4) {
   let {
     item,
     isActive,
     toggleVar
-  } = _ref5;
+  } = _ref4;
   const isNotInData = item.matrix_index === -1;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -252,14 +226,14 @@ function MultipleSelectionItem(_ref5) {
     })
   });
 }
-function VarItem(_ref6) {
+function VarItem(_ref5) {
   let {
     item,
     active,
     setVarButtons,
     mode = _constants.SELECTION_MODES.SINGLE,
     isDiseaseGene = false
-  } = _ref6;
+  } = _ref5;
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const selectVar = () => {

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)(() => {
@@ -44,7 +45,8 @@ const useVarMean = function (varKeys) {
     });
   }, [varKeys]);
   return (0, _requests.useFetch)(ENDPOINT, params, {
-    enabled: enabled
+    enabled: enabled,
+    refetchOnMount: false
   });
 };
 
@@ -74,7 +76,8 @@ function DiseaseVarList(_ref) {
     });
   }, [dataset.selectedDisease]);
   const diseaseData = (0, _requests.useFetch)(ENDPOINT, params, {
-    enabled: !!params.diseaseId
+    enabled: !!params.diseaseId,
+    refetchOnMount: false
   });
   (0, _react.useEffect)(() => {
     if (!diseaseData.isPending && !diseaseData.serverError) {

package/dist/components/violin/Violin.js

@@ -12,6 +12,7 @@ var _reactBootstrap = require("react-bootstrap");
 var _reactPlotly = _interopRequireDefault(require("react-plotly.js"));
 var _constants = require("../../constants/constants");
 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");
@@ -24,6 +25,10 @@ function Violin(_ref) {
   } = _ref;
   const ENDPOINT = "violin";
   const dataset = (0, _DatasetContext.useDataset)();
+  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);
@@ -46,7 +51,8 @@ function Violin(_ref) {
           indices: dataset.selectedVar?.vars.map(v => v.index)
         } : 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])
+        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 ? [...(obsIndices || [])] : null
       }
     }[mode]
   });
@@ -89,12 +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 ? [...(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, 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

@@ -11964,6 +11964,10 @@ textarea.form-control-lg {
   background-color: #cce3ed;
 }
 
+.obs-item {
+  box-sizing: border-box;
+}
+
 .obs-value-list-check {
   padding-right: 1rem;
   word-break: auto-phrase;
@@ -12094,6 +12098,7 @@ textarea.form-control-lg {
 
 .cherita-app-plot {
   position: relative;
+  max-height: 100%;
 }
 
 .cherita-app-obs {