@haniffalab/cherita-react 0.2.0-dev.2024-09-26.775b9a06 → 0.2.0-dev.2024-09-26.d9293c4c

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

@@ -5,10 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.VarNamesList = VarNamesList;
 var _react = _interopRequireWildcard(require("react"));
-var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
-var _reactFontawesome = require("@fortawesome/react-fontawesome");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
+var _VarItem = require("./VarItem");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -23,7 +22,7 @@ function VarNamesList(_ref) {
   } = _ref;
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
-  const [varButtons, setVarButtons] = (0, _react.useState)(mode === _constants.SELECTION_MODES.SINGLE ? [dataset.selectedVar] : dataset.selectedMultiVar);
+  const [varButtons, setVarButtons] = (0, _react.useState)(mode === _constants.SELECTION_MODES.SINGLE ? dataset.selectedVar ? [dataset.selectedVar] : [] : dataset.selectedMultiVar);
   const [active, setActive] = (0, _react.useState)(mode === _constants.SELECTION_MODES.SINGLE ? (_dataset$selectedVar = dataset.selectedVar) === null || _dataset$selectedVar === void 0 ? void 0 : _dataset$selectedVar.matrix_index : dataset.selectedMultiVar.map(i => i.matrix_index));
   (0, _react.useEffect)(() => {
     if (mode === _constants.SELECTION_MODES.SINGLE) {
@@ -50,167 +49,70 @@ function VarNamesList(_ref) {
       setActive(dataset.selectedMultiVar.map(i => i.matrix_index));
     }
   }, [mode, dataset.selectedMultiVar]);
-  const selectVar = (0, _react.useCallback)(item => {
-    if (mode === _constants.SELECTION_MODES.SINGLE) {
-      dispatch({
-        type: "select.var",
-        var: item
-      });
-      dispatch({
-        type: "set.colorEncoding",
-        value: "var"
-      });
-    } else if (mode === _constants.SELECTION_MODES.MULTIPLE) {
-      dispatch({
-        type: "select.multivar",
-        var: item
-      });
-    }
-  }, [dispatch, mode]);
-  const removeVar = (0, _react.useCallback)(v => {
-    setVarButtons(b => {
-      return b.filter(i => i.name !== v.name);
-    });
-    if (mode === _constants.SELECTION_MODES.SINGLE) {
-      if (active === v.matrix_index) {
-        dispatch({
-          type: "deselect.var"
-        });
-      }
-    } else if (mode === _constants.SELECTION_MODES.MULTIPLE) {
-      if (active.includes(v.matrix_index)) {
-        dispatch({
-          type: "deselect.multivar",
-          var: v
-        });
-      }
-    }
-  }, [active, dispatch, mode]);
-  const makeList = (0, _react.useCallback)(vars => {
-    return vars.map(item => {
-      if (item && mode === _constants.SELECTION_MODES.SINGLE) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "d-flex gap-1",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "flex-grow-1",
-              children: item.name
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-                icon: _freeSolidSvgIcons.faCircleInfo
-              })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
-                type: "button",
-                variant: dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR && active === item.matrix_index ? "primary" : "outline-primary",
-                className: "m-0 p-0 px-1",
-                onClick: () => {
-                  selectVar(item);
-                },
-                disabled: item.matrix_index === -1,
-                title: item.matrix_index === -1 ? "Not present in data" : "Set as color encoding",
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-                  icon: _freeSolidSvgIcons.faDroplet
-                })
-              }, item.matrix_index)
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
-                type: "button",
-                className: "m-0 p-0 px-1",
-                variant: "outline-secondary",
-                title: "Remove from list",
-                onClick: () => removeVar(item),
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-                  icon: _freeSolidSvgIcons.faTrash
-                })
-              })
-            })]
-          })
-        }, item.name);
-      } else if (mode === _constants.SELECTION_MODES.MULTIPLE) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "d-flex",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "flex-grow-1",
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
-                type: "button",
-                variant: item.matrix_index !== -1 && _lodash.default.includes(active, item.matrix_index) ? "primary" : "outline-primary",
-                className: "m-0 p-0 px-1",
-                onClick: () => {
-                  if (active.includes(item.matrix_index)) {
-                    dispatch({
-                      type: "deselect.multivar",
-                      var: item
-                    });
-                  } else {
-                    selectVar(item);
-                  }
-                },
-                disabled: item.matrix_index === -1,
-                title: item.matrix_index === -1 ? "Not present in data" : "",
-                children: item.name
-              }, item.matrix_index)
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-              children: [" ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-                icon: _freeSolidSvgIcons.faPlus
-              })]
-            })]
-          })
-        }, item.name);
-      } else {
-        return null;
-      }
-    });
-  }, [active, dataset.colorEncoding, dispatch, mode, removeVar, selectVar]);
-  const varList = (0, _react.useMemo)(() => {
-    return makeList(varButtons);
-  }, [makeList, varButtons]);
-  const diseaseVarList = (0, _react.useMemo)(() => {
-    return makeList(dataset.selectedDisease.genes);
-  }, [makeList, dataset.selectedDisease.genes]);
+  const makeListItem = function (item) {
+    let isDiseaseGene = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VarItem.VarItem, {
+        item: item,
+        active: active,
+        setVarButtons: setVarButtons,
+        mode: mode,
+        isDiseaseGene: isDiseaseGene
+      })
+    }, item.matrix_index);
+  };
+  const varList = _lodash.default.map(varButtons, item => {
+    return makeListItem(item);
+  });
+  const diseaseVarList = _lodash.default.map(dataset.selectedDisease.genes, item => {
+    return makeListItem(item, true);
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "position-relative",
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "overflow-auto mt-2",
+      className: "overflow-auto mt-3",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "d-flex justify-content-between",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h5", {
+          children: _lodash.default.capitalize(displayName)
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+          variant: "link",
+          onClick: () => {
+            setVarButtons([]);
+            dispatch({
+              type: mode === _constants.SELECTION_MODES.SINGLE ? "reset.var" : "reset.multiVar"
+            });
+          },
+          children: "clear"
+        })]
+      }), !varList.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
+        variant: "light",
+        children: "Search for a feature."
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup, {
+        children: varList
+      }), ((_dataset$selectedDise = dataset.selectedDisease) === null || _dataset$selectedDise === void 0 ? void 0 : _dataset$selectedDise.id) && (!((_dataset$selectedDise2 = dataset.selectedDisease) !== null && _dataset$selectedDise2 !== void 0 && (_dataset$selectedDise2 = _dataset$selectedDise2.genes) !== null && _dataset$selectedDise2 !== void 0 && _dataset$selectedDise2.length) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
+        variant: "light",
+        children: "No disease genes found."
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "d-flex justify-content-between",
+          className: "d-flex justify-content-between mt-3",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h5", {
-            children: _lodash.default.capitalize(displayName)
+            children: "Disease genes"
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
             variant: "link",
             onClick: () => {
-              setVarButtons([]);
               dispatch({
-                type: mode === _constants.SELECTION_MODES.SINGLE ? "reset.var" : "reset.multiVar"
+                type: "reset.disease"
               });
             },
             children: "clear"
           })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: (_dataset$selectedDise3 = dataset.selectedDisease) === null || _dataset$selectedDise3 === void 0 ? void 0 : _dataset$selectedDise3.name
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup, {
-          children: varList
+          children: diseaseVarList
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        children: ((_dataset$selectedDise = dataset.selectedDisease) === null || _dataset$selectedDise === void 0 ? void 0 : _dataset$selectedDise.id) && ((_dataset$selectedDise2 = dataset.selectedDisease) === null || _dataset$selectedDise2 === void 0 || (_dataset$selectedDise2 = _dataset$selectedDise2.genes) === null || _dataset$selectedDise2 === void 0 ? void 0 : _dataset$selectedDise2.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "d-flex justify-content-between",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h5", {
-              children: "Disease genes"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
-              variant: "link",
-              onClick: () => {
-                dispatch({
-                  type: "reset.disease"
-                });
-              },
-              children: "clear"
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-            children: (_dataset$selectedDise3 = dataset.selectedDisease) === null || _dataset$selectedDise3 === void 0 ? void 0 : _dataset$selectedDise3.name
-          }), diseaseVarList]
-        })
-      })]
+      }))]
     })
   });
 }

package/dist/components/violin/Violin.js

@@ -7,6 +7,7 @@ exports.Violin = Violin;
 var _react = _interopRequireWildcard(require("react"));
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 var _reactFontawesome = require("@fortawesome/react-fontawesome");
+var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _reactPlotly = _interopRequireDefault(require("react-plotly.js"));
 var _constants = require("../../constants/constants");
@@ -18,6 +19,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; }
 function Violin(_ref) {
+  var _dataset$selectedObs, _dataset$selectedObs2, _dataset$selectedObs3;
   let {
     mode = _constants.VIOLIN_MODES.MULTIKEY
   } = _ref;
@@ -26,11 +28,21 @@ function Violin(_ref) {
   const [data, setData] = (0, _react.useState)([]);
   const [layout, setLayout] = (0, _react.useState)({});
   const [hasSelections, setHasSelections] = (0, _react.useState)(false);
-  const [params, setParams] = (0, _react.useState)({
+  const [params, setParams] = (0, _react.useState)(mode === _constants.VIOLIN_MODES.MULTIKEY ? {
     url: dataset.url,
     keys: [],
     scale: dataset.controls.standardScale,
     varNamesCol: dataset.varNamesCol
+  } : {
+    url: dataset.url,
+    keys: dataset.selectedVar.index,
+    selectedObs: dataset.selectedObs,
+    obsValues: !((_dataset$selectedObs = dataset.selectedObs) !== null && _dataset$selectedObs !== void 0 && _dataset$selectedObs.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_dataset$selectedObs2 = dataset.selectedObs) === null || _dataset$selectedObs2 === void 0 ? void 0 : _dataset$selectedObs2.codes), (_dataset$selectedObs3 = dataset.selectedObs) === null || _dataset$selectedObs3 === void 0 ? void 0 : _dataset$selectedObs3.omit).map(c => {
+      var _dataset$selectedObs4;
+      return (_dataset$selectedObs4 = dataset.selectedObs) === null || _dataset$selectedObs4 === void 0 ? void 0 : _dataset$selectedObs4.codesMap[c];
+    }),
+    scale: dataset.controls.standardScale,
+    varNamesCol: dataset.varNamesCol
   });
   // @TODO: set default scale
 
@@ -57,11 +69,16 @@ function Violin(_ref) {
         setHasSelections(false);
       }
       setParams(p => {
+        var _dataset$selectedObs5, _dataset$selectedObs6, _dataset$selectedObs7;
         return {
           ...p,
           url: dataset.url,
           keys: dataset.selectedVar.index,
           selectedObs: dataset.selectedObs,
+          obsValues: !((_dataset$selectedObs5 = dataset.selectedObs) !== null && _dataset$selectedObs5 !== void 0 && _dataset$selectedObs5.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_dataset$selectedObs6 = dataset.selectedObs) === null || _dataset$selectedObs6 === void 0 ? void 0 : _dataset$selectedObs6.codes), (_dataset$selectedObs7 = dataset.selectedObs) === null || _dataset$selectedObs7 === void 0 ? void 0 : _dataset$selectedObs7.omit).map(c => {
+            var _dataset$selectedObs8;
+            return (_dataset$selectedObs8 = dataset.selectedObs) === null || _dataset$selectedObs8 === void 0 ? void 0 : _dataset$selectedObs8.codesMap[c];
+          }),
           scale: dataset.controls.standardScale,
           varNamesCol: dataset.varNamesCol
         };

package/dist/constants/constants.js

@@ -12,7 +12,8 @@ const COLOR_ENCODINGS = exports.COLOR_ENCODINGS = {
 const OBS_TYPES = exports.OBS_TYPES = {
   CATEGORICAL: "categorical",
   DISCRETE: "discrete",
-  CONTINUOUS: "continuous"
+  CONTINUOUS: "continuous",
+  BOOLEAN: "boolean"
 };
 const SELECTED_POLYGON_FILLCOLOR = exports.SELECTED_POLYGON_FILLCOLOR = [107, 170, 209, 255 / 2];
 const UNSELECTED_POLYGON_FILLCOLOR = exports.UNSELECTED_POLYGON_FILLCOLOR = [167, 191, 211, 255 / 3];

package/dist/context/DatasetContext.js

@@ -12,6 +12,7 @@ var _querySyncStoragePersister = require("@tanstack/query-sync-storage-persister
 var _reactQuery = require("@tanstack/react-query");
 var _reactQueryPersistClient = require("@tanstack/react-query-persist-client");
 var _lodash = _interopRequireDefault(require("lodash"));
+var _FilterContext = require("./FilterContext");
 var _constants = require("../constants/constants");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -32,7 +33,7 @@ const queryClient = new _reactQuery.QueryClient({
   })
 });
 // Type of queries to store responses
-const persistKeys = ["obs/cols", "var/names", "obsm/keys"];
+const persistKeys = ["obs/cols", "var/names", "obsm/keys", "var/histograms", "obs/bins", "obs/distribution"];
 const persistOptions = {
   persister: (0, _querySyncStoragePersister.createSyncStoragePersister)({
     storage: window.localStorage
@@ -123,7 +124,9 @@ function DatasetProvider(_ref2) {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactQueryPersistClient.PersistQueryClientProvider, {
         client: queryClient,
         persistOptions: persistOptions,
-        children: children
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilterContext.FilterProvider, {
+          children: children
+        })
       })
     })
   });
@@ -145,6 +148,11 @@ function datasetReducer(dataset, action) {
           controls: {
             ...dataset.controls,
             range: ((_action$obs = action.obs) === null || _action$obs === void 0 ? void 0 : _action$obs.type) === _constants.OBS_TYPES.CATEGORICAL ? [0, 1] : dataset.controls.range
+          },
+          colorEncoding: dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && !action.obs ? null : dataset.colorEncoding,
+          sliceBy: {
+            ...dataset.sliceBy,
+            obs: action.obs ? dataset.sliceBy.obs : false
           }
         };
       }

package/dist/context/FilterContext.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FilterProvider = FilterProvider;
+exports.FilteredDataDispatchContext = exports.FilteredDataContext = void 0;
+exports.useFilteredData = useFilteredData;
+exports.useFilteredDataDispatch = useFilteredDataDispatch;
+var _react = _interopRequireWildcard(require("react"));
+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 FilteredDataContext = exports.FilteredDataContext = /*#__PURE__*/(0, _react.createContext)(null);
+const FilteredDataDispatchContext = exports.FilteredDataDispatchContext = /*#__PURE__*/(0, _react.createContext)(null);
+const initialFilterData = {
+  obsIndices: [],
+  varIndices: []
+};
+function FilterProvider(_ref) {
+  let {
+    children
+  } = _ref;
+  const [filteredData, dispatch] = (0, _react.useReducer)(filterReducer, {
+    ...initialFilterData
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FilteredDataContext.Provider, {
+    value: filteredData,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(FilteredDataDispatchContext.Provider, {
+      value: dispatch,
+      children: children
+    })
+  });
+}
+function useFilteredData() {
+  return (0, _react.useContext)(FilteredDataContext);
+}
+function useFilteredDataDispatch() {
+  return (0, _react.useContext)(FilteredDataDispatchContext);
+}
+function filterReducer(filteredData, action) {
+  switch (action.type) {
+    case "set.obs.indices":
+      {
+        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: []
+        };
+      }
+    default:
+      {
+        throw Error("Unknown action: " + action.type);
+      }
+  }
+}

package/dist/helpers/map-helper.js

@@ -7,28 +7,33 @@ exports.MapHelper = void 0;
 var _core = require("@deck.gl/core");
 class MapHelper {
   fitBounds(coords) {
+    let {
+      width = 400,
+      height = 600
+    } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+      width: 400,
+      height: 600
+    };
     let view = new _core.WebMercatorViewport({
-      width: 600,
-      height: 400,
-      longitude: -122.45,
-      latitude: 37.78,
-      zoom: 12,
-      pitch: 30,
-      bearing: 15
+      width: width,
+      height: height,
+      longitude: 0,
+      latitude: 0,
+      zoom: 12
     });
-    let latMin = 90;
-    let latMax = -90;
-    let lonMin = 180;
-    let lonMax = -180;
+    let latMin = Infinity;
+    let latMax = -Infinity;
+    let lonMin = Infinity;
+    let lonMax = -Infinity;
+    const RECT_LON_INDEX = 0;
+    const RECT_LAT_INDEX = 1;
     coords.forEach(function (coord) {
-      const RECT_LAT_INDEX = "0";
-      const RECT_LON_INDEX = "1";
       if (coord[RECT_LAT_INDEX] < latMin) latMin = coord[RECT_LAT_INDEX];
       if (coord[RECT_LAT_INDEX] > latMax) latMax = coord[RECT_LAT_INDEX];
       if (coord[RECT_LON_INDEX] < lonMin) lonMin = coord[RECT_LON_INDEX];
       if (coord[RECT_LON_INDEX] > lonMax) lonMax = coord[RECT_LON_INDEX];
     });
-    const bounds = [[lonMin, latMax], [lonMax, latMin]];
+    const bounds = [[lonMin, latMin], [lonMax, latMax]];
     const {
       longitude,
       latitude,
@@ -36,7 +41,7 @@ class MapHelper {
     } = view.fitBounds(bounds, {
       padding: {
         top: 50,
-        bottom: 50,
+        bottom: 70,
         left: 50,
         right: 50
       }

package/dist/index.js

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "DotplotControls", {
     return _DotplotControls.DotplotControls;
   }
 });
+Object.defineProperty(exports, "FilterProvider", {
+  enumerable: true,
+  get: function () {
+    return _FilterContext.FilterProvider;
+  }
+});
 Object.defineProperty(exports, "Heatmap", {
   enumerable: true,
   get: function () {
@@ -158,4 +164,5 @@ var _ViolinControls = require("./components/violin/ViolinControls");
 var _constants = require("./constants/constants");
 var _colorscales = require("./constants/colorscales");
 var _DatasetContext = require("./context/DatasetContext");
+var _FilterContext = require("./context/FilterContext");
 var _Offcanvas = require("./components/Offcanvas");

package/dist/utils/VirtualizedList.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VirtualizedList = VirtualizedList;
+var _react = _interopRequireWildcard(require("react"));
+var _reactVirtual = require("@tanstack/react-virtual");
+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 VirtualizedList(_ref) {
+  var _virtualItems$0$start, _virtualItems$;
+  let {
+    getDataAtIndex,
+    count,
+    ItemComponent,
+    estimateSize = 44,
+    overscan = 25,
+    maxHeight = "80vh",
+    ...props
+  } = _ref;
+  const [parentNode, setParentNode] = (0, _react.useState)(null);
+  const itemVirtualizer = (0, _reactVirtual.useVirtualizer)({
+    count: count,
+    getScrollElement: () => parentNode,
+    estimateSize: () => estimateSize,
+    overscan: overscan
+  });
+  const refCallback = (0, _react.useCallback)(node => {
+    setParentNode(node);
+  }, []);
+  const virtualItems = itemVirtualizer.getVirtualItems();
+  (0, _react.useEffect)(() => {
+    itemVirtualizer.measure();
+  }, [itemVirtualizer, parentNode === null || parentNode === void 0 ? void 0 : parentNode.clientHeight]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: refCallback,
+    style: {
+      overflowY: "auto",
+      maxHeight: maxHeight
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        height: "".concat(itemVirtualizer.getTotalSize(), "px"),
+        width: "100%",
+        position: "relative",
+        willChange: "transform"
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          transform: "translateY(".concat((_virtualItems$0$start = (_virtualItems$ = virtualItems[0]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.start) !== null && _virtualItems$0$start !== void 0 ? _virtualItems$0$start : 0, "px)")
+        },
+        children: virtualItems.map(virtualItem => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          "data-index": virtualItem.index,
+          ref: itemVirtualizer.measureElement,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemComponent, {
+            ...getDataAtIndex(virtualItem.index),
+            ...props
+          })
+        }, virtualItem.key))
+      })
+    })
+  });
+}

package/dist/utils/requests.js

@@ -40,7 +40,7 @@ async function fetchData(endpoint, params) {
   return await response.json();
 }
 const useFetch = function (endpoint, params) {
-  let opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+  let opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   let apiUrl = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
   const {
     enabled = true
@@ -72,7 +72,7 @@ const useFetch = function (endpoint, params) {
 exports.useFetch = useFetch;
 const useDebouncedFetch = function (endpoint, params) {
   let delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 500;
-  let opts = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+  let opts = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
   let apiUrl = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
   const {
     enabled = true

package/dist/utils/string.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.prettyNumerical = prettyNumerical;
+function prettyNumerical(n) {
+  let precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 3;
+  if (n === 0) {
+    return "0";
+  } else if (n < 1 / 10 ** precision) {
+    return n.toExponential(precision);
+  } else {
+    return n.toLocaleString(undefined, {
+      maximumFractionDigits: precision
+    });
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "0.2.0-dev.2024-09-26.775b9a06",
+  "version": "0.2.0-dev.2024-09-26.d9293c4c",
   "author": "",
   "license": "",
   "main": "dist/index.js",
@@ -16,6 +16,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@mui/icons-material": "^5.15.20",
     "@mui/material": "^5.15.19",
+    "@mui/x-charts": "^7.7.1",
     "@nebula.gl/editor": "^1.0.4",
     "@nebula.gl/layers": "^1.0.4",
     "@tanstack/query-sync-storage-persister": "^4.36.1",
@@ -84,5 +85,5 @@
     "url": "https://github.com/haniffalab/cherita-react/issues"
   },
   "homepage": "https://github.com/haniffalab/cherita-react#readme",
-  "prereleaseSha": "775b9a06d3c2ea887c69919e42fe5e7ba672dd23"
+  "prereleaseSha": "d9293c4c3c66bc0c5d0c5012ccc39c0913e7bb93"
 }