@haniffalab/cherita-react 0.2.0-dev.2024-12-16.f6e39628 → 0.2.0-dev.2024-12-16.ab9c5057

package/dist/App.scss

@@ -0,0 +1,270 @@
+// Theme CSS
+$accordion-button-active-bg: #e7edf0;
+
+@import "bootstrap/scss/bootstrap";
+
+input[type="checkbox"], .cursor-pointer {
+    cursor: pointer;
+}
+
+.loading-spinner {
+    @extend .bg-light;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    z-index: 1;
+    opacity: 75%;
+    position: absolute;
+    justify-content: center;
+    align-items: center;
+}
+
+.cherita-container {
+    margin: 40px auto;
+    background-color: #fff;
+    border-radius: 0.25rem;
+    box-shadow: 0 0.5em 1em 0.3em rgba(10, 10, 10, .15), 0 0 0 1px rgba(10, 10, 10, .02);
+    color: #4a4a4a;
+    max-width: 100%;
+    position: relative;
+    overflow: hidden;
+}
+
+.cherita-navbar {
+    @extend .mx-1;
+    @extend .my-2;
+    position: absolute;
+    z-index: 11;
+    top: 0;
+    left: 0;
+    right: 0;
+    border-radius: 0.25rem;
+}
+
+.cherita-container .cherita-navbar-item>.dropdown-menu {
+    height: var(--dropdown-height);
+    overflow-x: hidden;
+    overflow-y: scroll;
+}
+
+/* Scrollbar styling */
+
+/* Works on Firefox */
+.cherita-container * {
+    scrollbar-width: thin;
+    scrollbar-color: rgb(70, 70, 70) auto;
+}
+
+/* Works on Chrome, Edge, and Safari */
+.cherita-container *::-webkit-scrollbar {
+    width: 7px;
+}
+
+.cherita-container *::-webkit-scrollbar-track {
+    background: #212529;
+}
+
+.cherita-container *::-webkit-scrollbar-thumb {
+    background-color: rgb(70, 70, 70);
+}
+
+/* End scrollbar styling*/
+
+.cherita-container-plot {
+    margin-top: 76px;
+    padding: 20px;
+    position: relative;
+    min-height: 500px;
+}
+
+.cherita-container-scatterplot {
+    position: relative;
+    min-height: 500px;
+    height: 100%;
+}
+
+.cherita-spatial-controls {
+    position: absolute;
+    z-index: 10;
+    top: 1rem;
+    left: 1rem;
+    width: 3rem;
+}
+
+.cherita-spatial-footer {
+    position: absolute;
+    z-index: 10;
+    bottom: 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    flex-wrap: wrap;
+    width: 100%;
+    padding-left: 2rem;
+    padding-right: 2rem;
+    padding-bottom: 1rem;
+    pointer-events: none;
+    > * { 
+        pointer-events: auto;
+    }
+}
+
+.cherita-toolbox-footer {
+    display: flex;
+    flex-direction: column;
+}
+
+.cherita-toolbox-footer .alert {
+    width: fit-content;
+}
+
+.cherita-toolbox {
+    order: 1;
+}
+
+.cherita-legend {
+    order: 2;
+    width: 12rem;
+}
+
+@include media-breakpoint-down(xl) {
+    .cherita-spatial-controls {
+        top: 100px;
+    }
+  }
+
+.cherita-accordion-active .accordion-button {
+    background-color: rgb(204, 227, 237)
+}
+
+.obs-value-list-check {
+    padding-right: 1rem;
+    word-break: auto-phrase;
+    overflow-wrap: anywhere;
+}
+
+.grad-step {
+    display: inline-block;
+    height: 20px;
+    width: 1%;
+}
+.gradient {
+    width: 100%;
+    white-space: nowrap;
+    position: relative;
+    display: inline-block;
+    top: 4px;
+    padding-bottom: 15px;
+}
+
+.gradient .domain-min {
+    position: absolute;
+    left: 0;
+    font-size: 11px;
+    bottom: 3px;
+}
+.gradient .domain-med {
+    position: absolute;
+    right: 25%;
+    left: 25%;
+    text-align: center;
+    font-size: 11px;
+    bottom: 3px;
+}
+.gradient .domain-max {
+    position: absolute;
+    right: 0;
+    font-size: 11px;
+    bottom: 3px;
+}
+
+.cm-string {
+    padding: 0px 4px;
+    display: inline-block;
+    min-width: 13px;
+    min-height: 13px;
+    border-radius: 3px;
+    box-sizing: border-box;
+    position: relative;
+    vertical-align: middle;
+    margin-left: 2px;
+    margin-bottom: 2px;
+    position: relative;
+    top: 1px;
+}
+.cm-small {
+    height: 15px;
+    width: 15px;
+}
+
+.obs-distribution {
+    width: 100%;
+    height: 4rem;
+}
+
+.obs-continuous-stats {
+    font-weight: lighter;
+    margin: 0;
+}
+
+.value-count-badge {
+    color: black !important;
+    background-color: rgb(222, 222, 222) !important;
+}
+
+.value-pct-gauge-container {
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0.2rem;
+}
+
+.feature-histogram-container {
+    height: 1.25rem;
+    width: 5rem;
+    display: flex;
+    align-items: center;
+}
+
+.feature-histogram {
+    @extend .feature-histogram-container;
+    background-color: rgb(222, 222, 222);
+}
+
+.feature-histogram-tooltip .MuiChartsTooltip-markCell,.MuiChartsTooltip-labelCell {
+    display: none;
+}
+
+.feature-histogram-tooltip .MuiChartsTooltip-valueCell {
+    padding: 0.5rem !important;
+}
+
+.feature-histogram-tooltip .MuiChartsTooltip-valueCell > p {
+    font-size: 0.85rem !important;
+}
+
+.feature-histogram-tooltip td > p {
+    font-size: 0.85rem !important;
+}
+
+.feature-disease-info {
+    font-weight: lighter;
+    border-top: 1px solid var(list-group-border-color);
+    border-right: 0;
+    border-left: 0;
+    border-bottom: 0;
+}
+
+.feature-disease-info table {
+    margin: 0;
+}
+
+.var-list-toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 3rem;
+}
+
+.var-list-toolbar .svg-inline--fa {
+    height: 1.2rem;
+}

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

@@ -211,7 +211,7 @@ function ObsContinuousStats(_ref3) {
   const dataset = (0, _DatasetContext.useDataset)();
   const params = {
     url: dataset.url,
-    obs_colname: obs.name
+    obsColname: obs.name
   };
   const {
     fetchedData,
@@ -309,7 +309,7 @@ function ContinuousObs(_ref4) {
   const binnedObs = binContinuous(obs);
   const params = {
     url: dataset.url,
-    obs_col: binnedObs.name,
+    obsCol: binnedObs.name,
     thresholds: binnedObs.bins.thresholds,
     nBins: binnedObs.bins.nBins
   };

package/dist/components/scatterplot/Scatterplot.js

@@ -22,9 +22,9 @@ var _DatasetContext = require("../../context/DatasetContext");
 var _FilterContext = require("../../context/FilterContext");
 var _colorHelper = require("../../helpers/color-helper");
 var _mapHelper = require("../../helpers/map-helper");
-var _zarrHelper = require("../../helpers/zarr-helper");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _string = require("../../utils/string");
+var _zarrData = require("../../utils/zarrData");
 var _jsxRuntime = require("react/jsx-runtime");
 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); }
@@ -39,14 +39,6 @@ const INITIAL_VIEW_STATE = {
   bearing: 0
 };
 const EPSILON = 1e-6;
-const meanData = (_i, data) => {
-  return _lodash.default.zipWith(...data, function () {
-    for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {
-      values[_key] = arguments[_key];
-    }
-    return _lodash.default.mean(values);
-  });
-};
 function Scatterplot(_ref) {
   let {
     radius = 30
@@ -74,83 +66,10 @@ function Scatterplot(_ref) {
     features: []
   });
   const [selectedFeatureIndexes, setSelectedFeatureIndexes] = (0, _react.useState)([]);
-  const [obsmParams, setObsmParams] = (0, _react.useState)({
-    url: dataset.url,
-    path: "obsm/" + dataset.selectedObsm
-  });
-  const [xParams, setXParams] = (0, _react.useState)(!dataset.selectedVar ? [] : !dataset.selectedVar?.isSet ? [{
-    url: dataset.url,
-    path: "X",
-    s: [null, dataset.selectedVar?.matrix_index]
-  }] : _lodash.default.map(dataset.selectedVar?.vars, v => {
-    return {
-      url: dataset.url,
-      path: "X",
-      s: [null, v.matrix_index]
-    };
-  }));
-  const [obsParams, setObsParams] = (0, _react.useState)({
-    url: dataset.url,
-    path: "obs/" + dataset.selectedObs?.name + (dataset.selectedObs?.type === _constants.OBS_TYPES.CATEGORICAL ? "/codes" : "")
-  });
-  const [labelObsParams, setLabelObsParams] = (0, _react.useState)([]);
-  const obsmData = (0, _zarrHelper.useZarr)(obsmParams, null, _zarrHelper.GET_OPTIONS);
-  const xData = (0, _zarrHelper.useMultipleZarr)(xParams, _zarrHelper.GET_OPTIONS, meanData);
-  const obsData = (0, _zarrHelper.useZarr)(obsParams, null, _zarrHelper.GET_OPTIONS);
-  const labelObsData = (0, _zarrHelper.useMultipleZarr)(labelObsParams, _zarrHelper.GET_OPTIONS);
-  (0, _react.useEffect)(() => {
-    setObsmParams(p => {
-      return {
-        ...p,
-        path: "obsm/" + dataset.selectedObsm
-      };
-    });
-  }, [dataset.selectedObsm]);
-  (0, _react.useEffect)(() => {
-    setXParams(!dataset.selectedVar ? [] : !dataset.selectedVar?.isSet ? [{
-      url: dataset.url,
-      path: "X",
-      s: [null, dataset.selectedVar?.matrix_index]
-    }] : _lodash.default.map(dataset.selectedVar?.vars, v => {
-      return {
-        url: dataset.url,
-        path: "X",
-        s: [null, v.matrix_index]
-      };
-    }));
-  }, [dataset.selectedVar, dataset.url]);
-  (0, _react.useEffect)(() => {
-    setObsParams(p => {
-      return {
-        ...p,
-        path: "obs/" + dataset.selectedObs?.name + (dataset.selectedObs?.type === _constants.OBS_TYPES.CATEGORICAL ? "/codes" : "")
-      };
-    });
-  }, [dataset.selectedObs]);
-  (0, _react.useEffect)(() => {
-    setLabelObsParams(_lodash.default.map(dataset.labelObs, obs => {
-      return {
-        url: dataset.url,
-        path: "obs/" + obs.name + (obs.type === _constants.OBS_TYPES.CATEGORICAL ? "/codes" : ""),
-        key: obs.name
-      };
-    }));
-  }, [dataset.labelObs, dataset.url]);
-  (0, _react.useEffect)(() => {
-    setObsmParams(p => {
-      return {
-        ...p,
-        url: dataset.url
-      };
-    });
-    setObsParams(p => {
-      return {
-        ...p,
-        url: dataset.url
-      };
-    });
-  }, [dataset.url]);
-
+  const obsmData = (0, _zarrData.useObsmData)();
+  const xData = (0, _zarrData.useXData)();
+  const obsData = (0, _zarrData.useObsData)();
+  const labelObsData = (0, _zarrData.useLabelObsData)();
   // @TODO: assert length of obsmData, xData, obsData is equal
 
   (0, _react.useEffect)(() => {
@@ -299,6 +218,8 @@ function Scatterplot(_ref) {
     }
     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,

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

@@ -34,14 +34,14 @@ function VarHistogram(_ref) {
   const isSliced = dataset.sliceBy.obs || dataset.sliceBy.polygons;
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url,
-    var_index: item.matrix_index,
-    obs_indices: isSliced && Array.from(filteredData.obsIndices || [])
+    varKey: item.matrix_index,
+    obsIndices: isSliced && Array.from(filteredData.obsIndices || [])
   });
   (0, _react.useEffect)(() => {
     setParams(p => {
       return {
         ...p,
-        obs_indices: isSliced && Array.from(filteredData.obsIndices || [])
+        obsIndices: isSliced && Array.from(filteredData.obsIndices || [])
       };
     });
   }, [filteredData.obsIndices, isSliced]);

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

@@ -9,14 +9,47 @@ var _iconsMaterial = require("@mui/icons-material");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _VarItem = require("./VarItem");
+var _VarListToolbar = require("./VarListToolbar");
 var _VarSet = require("./VarSet");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
+var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
 var _jsxRuntime = require("react/jsx-runtime");
 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; }
+// @TODO: optimize
+const useVarMean = function (varKeys) {
+  let enabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  const ENDPOINT = "matrix/mean";
+  const dataset = (0, _DatasetContext.useDataset)();
+  const [params, setParams] = (0, _react.useState)({
+    url: dataset.url,
+    varKeys: _lodash.default.map(varKeys, v => v.isSet ? {
+      name: v.name,
+      indices: v.vars.map(v => v.index)
+    } : v.index),
+    varNamesCol: dataset.varNamesCol
+  });
+  (0, _react.useEffect)(() => {
+    setParams(p => {
+      return {
+        ...p,
+        varKeys: _lodash.default.map(varKeys, v => v.isSet ? {
+          name: v.name,
+          indices: v.vars.map(v => v.index)
+        } : v.index)
+      };
+    });
+  }, [varKeys]);
+  return (0, _requests.useFetch)(ENDPOINT, params, {
+    enabled: enabled
+  });
+};
+
+// @TODO: display where disease data comes from
+// add to disease dataset metadata
 function DiseaseVarList(_ref) {
   let {
     makeListItem
@@ -25,6 +58,7 @@ function DiseaseVarList(_ref) {
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const [diseaseVars, setDiseaseVars] = (0, _react.useState)([]);
+  const [sortedDiseaseVars, setSortedDiseaseVars] = (0, _react.useState)([]);
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url,
     col: dataset.varNamesCol,
@@ -39,25 +73,43 @@ function DiseaseVarList(_ref) {
       };
     });
   }, [dataset.selectedDisease]);
-  const {
-    fetchedData,
-    isPending,
-    serverError
-  } = (0, _requests.useFetch)(ENDPOINT, params, {
+  const diseaseData = (0, _requests.useFetch)(ENDPOINT, params, {
     enabled: !!params.diseaseId
   });
   (0, _react.useEffect)(() => {
-    if (!isPending && !serverError) {
-      setDiseaseVars(fetchedData);
+    if (!diseaseData.isPending && !diseaseData.serverError) {
+      setDiseaseVars(diseaseData.fetchedData);
+    }
+  }, [diseaseData.fetchedData, diseaseData.isPending, diseaseData.serverError]);
+  const varMeans = useVarMean(diseaseVars, diseaseVars && dataset.varSort.disease.sort === _constants.VAR_SORT.MATRIX);
+  (0, _react.useEffect)(() => {
+    if (dataset.varSort.disease.sort === _constants.VAR_SORT.MATRIX) {
+      if (!varMeans.isPending && !varMeans.serverError) {
+        setSortedDiseaseVars(_lodash.default.orderBy(diseaseVars, o => {
+          return varMeans.fetchedData[o.name];
+        }, dataset.varSort.disease.sortOrder));
+      }
+    } else if (dataset.varSort.disease.sort === _constants.VAR_SORT.NAME) {
+      setSortedDiseaseVars(_lodash.default.orderBy(diseaseVars, "name", dataset.varSort.disease.sortOrder));
+    } else {
+      setSortedDiseaseVars(diseaseVars);
     }
-  }, [fetchedData, isPending, serverError]);
-  const diseaseVarList = _lodash.default.map(diseaseVars, item => {
+  }, [dataset.varSort.disease.sort, dataset.varSort.disease.sortOrder, diseaseVars, varMeans.fetchedData, varMeans.isPending, varMeans.serverError]);
+  const diseaseVarList = _lodash.default.map(sortedDiseaseVars, item => {
     return makeListItem(item, true);
   });
+  const isPending = diseaseData.isPending || varMeans.isPending && dataset.varSort.disease.sort === _constants.VAR_SORT.MATRIX;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: dataset.selectedDisease && (!diseaseVars.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
-      variant: "light",
-      children: "No disease genes found."
+    children: dataset.selectedDisease && (!isPending && !diseaseVars?.length ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "d-flex justify-content-between mt-3",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h5", {
+          children: "Disease genes"
+        })
+      }), /*#__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 mt-3",
@@ -74,8 +126,13 @@ function DiseaseVarList(_ref) {
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
         children: dataset.selectedDisease?.name
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup, {
-        children: diseaseVarList
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VarListToolbar.VarListToolbar, {
+        varType: "disease"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "position-relative",
+        children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup, {
+          children: diseaseVarList
+        })]
       })]
     }))
   });
@@ -90,6 +147,7 @@ function VarNamesList(_ref2) {
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const [varButtons, setVarButtons] = (0, _react.useState)(mode === _constants.SELECTION_MODES.SINGLE ? dataset.selectedVar ? _lodash.default.unionWith([dataset.selectedVar], dataset.varSets, _lodash.default.isEqual) : [...dataset.varSets] : [...dataset.selectedMultiVar, ...dataset.varSets]);
   const [active, setActive] = (0, _react.useState)(mode === _constants.SELECTION_MODES.SINGLE ? dataset.selectedVar?.matrix_index || dataset.selectedVar?.name : dataset.selectedMultiVar.map(i => i.matrix_index || i.name));
+  const [sortedVarButtons, setSortedVarButtons] = (0, _react.useState)([]);
   (0, _react.useEffect)(() => {
     if (mode === _constants.SELECTION_MODES.SINGLE) {
       setVarButtons(v => {
@@ -139,6 +197,22 @@ function VarNamesList(_ref2) {
       });
     }
   }, [mode, dataset.varSets, dataset.selectedVar?.isSet, dataset.selectedVar?.name, dispatch]);
+  const varMeans = useVarMean(varButtons, dataset.varSort.var.sort === _constants.VAR_SORT.MATRIX);
+
+  // @TODO: deferr sortedVarButtons ?
+  (0, _react.useEffect)(() => {
+    if (dataset.varSort.var.sort === _constants.VAR_SORT.MATRIX) {
+      if (!varMeans.isPending && !varMeans.serverError) {
+        setSortedVarButtons(_lodash.default.orderBy(varButtons, o => {
+          return varMeans.fetchedData[o.name];
+        }, dataset.varSort.var.sortOrder));
+      }
+    } else if (dataset.varSort.var.sort === _constants.VAR_SORT.NAME) {
+      setSortedVarButtons(_lodash.default.orderBy(varButtons, "name", dataset.varSort.var.sortOrder));
+    } else {
+      setSortedVarButtons(varButtons);
+    }
+  }, [dataset.varSort.var.sort, dataset.varSort.var.sortOrder, varButtons, varMeans.isPending, varMeans.serverError, varMeans.fetchedData]);
   const makeListItem = function (item) {
     let isDiseaseGene = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
@@ -160,7 +234,7 @@ function VarNamesList(_ref2) {
       })
     }, set.name);
   };
-  const varList = _lodash.default.map(varButtons, item => {
+  const varList = _lodash.default.map(sortedVarButtons, item => {
     if (item.isSet) {
       return makeSetListItem(item);
     } else {
@@ -179,6 +253,7 @@ function VarNamesList(_ref2) {
     }
     return setName;
   };
+  const isPending = varMeans.isPending && dataset.varSort.var.sort === _constants.VAR_SORT.MATRIX;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "position-relative",
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -216,13 +291,22 @@ function VarNamesList(_ref2) {
             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
-      }), showDiseaseVarList && /*#__PURE__*/(0, _jsxRuntime.jsx)(DiseaseVarList, {
-        makeListItem: makeListItem
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: !varList.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
+          variant: "light",
+          children: "Search for a feature."
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_VarListToolbar.VarListToolbar, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "position-relative",
+            children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup, {
+              children: varList
+            })]
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: showDiseaseVarList && /*#__PURE__*/(0, _jsxRuntime.jsx)(DiseaseVarList, {
+          makeListItem: makeListItem
+        })
       })]
     })
   });

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

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VarListToolbar = VarListToolbar;
+var _react = _interopRequireWildcard(require("react"));
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+var _reactFontawesome = require("@fortawesome/react-fontawesome");
+var _material = require("@mui/material");
+var _reactBootstrap = require("react-bootstrap");
+var _constants = require("../../constants/constants");
+var _DatasetContext = require("../../context/DatasetContext");
+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; }
+// @TODO: set option for "var" and "disease"
+function VarListToolbar(_ref) {
+  let {
+    varType = "var"
+  } = _ref;
+  const dataset = (0, _DatasetContext.useDataset)();
+  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  const [sort, setSort] = (0, _react.useState)(dataset.varSort.var.sort);
+  const [nameSortOrder, setNameSortOrder] = (0, _react.useState)(dataset.varSort.var.sortOrder);
+  const [matrixSortOrder, setMatrixSortOrder] = (0, _react.useState)(dataset.varSort.var.sortOrder);
+  const handleSort = (sortValue, sortOrder, setSortOrder) => {
+    if (sort !== sortValue) {
+      setSort(sortValue);
+      dispatch({
+        type: "set.varSort",
+        var: varType,
+        sort: sortValue,
+        sortOrder: sortOrder
+      });
+    } else {
+      const newSortOrder = sortOrder === _constants.VAR_SORT_ORDER.ASC ? _constants.VAR_SORT_ORDER.DESC : _constants.VAR_SORT_ORDER.ASC;
+      setSortOrder(newSortOrder);
+      dispatch({
+        type: "set.varSort",
+        var: varType,
+        sort: sortValue,
+        sortOrder: newSortOrder
+      });
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Navbar, {
+    className: "var-list-toolbar",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.InputGroup, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.InputGroup.Text, {
+        children: "Sort by:"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ToggleButtonGroup, {
+        "aria-label": "Sort feature by",
+        size: "small",
+        className: "mh-100",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ToggleButton, {
+          value: _constants.VAR_SORT.NAME,
+          "aria-label": "alphabetical",
+          title: "Sort alphabetically",
+          selected: sort === _constants.VAR_SORT.NAME,
+          onChange: () => {
+            handleSort(_constants.VAR_SORT.NAME, nameSortOrder, setNameSortOrder);
+          },
+          children: nameSortOrder === _constants.VAR_SORT_ORDER.ASC ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+            icon: _freeSolidSvgIcons.faArrowDownAZ
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+            icon: _freeSolidSvgIcons.faArrowUpZA
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ToggleButton, {
+          value: _constants.VAR_SORT.MATRIX,
+          "aria-label": "matrix value",
+          title: "Sort by matrix value",
+          selected: sort === _constants.VAR_SORT.MATRIX,
+          onChange: () => {
+            handleSort(_constants.VAR_SORT.MATRIX, matrixSortOrder, setMatrixSortOrder);
+          },
+          children: matrixSortOrder === _constants.VAR_SORT_ORDER.ASC ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+            icon: _freeSolidSvgIcons.faArrowDown19
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+            icon: _freeSolidSvgIcons.faArrowUp91
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ToggleButton, {
+          value: "none",
+          "aria-label": "none",
+          title: "No sorting",
+          onClick: () => {
+            setSort(_constants.VAR_SORT.NONE);
+            dispatch({
+              type: "set.varSort.sort",
+              var: varType,
+              sort: _constants.VAR_SORT.NONE
+            });
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+            icon: _freeSolidSvgIcons.faXmark
+          })
+        })]
+      })]
+    })
+  });
+}

package/dist/constants/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VIOLIN_MODES = exports.VIOLINPLOT_SCALES = exports.UNSELECTED_POLYGON_FILLCOLOR = exports.SELECTION_MODES = exports.SELECTED_POLYGON_FILLCOLOR = exports.OBS_TYPES = exports.MATRIXPLOT_SCALES = exports.LOCAL_STORAGE_KEY = exports.DOTPLOT_SCALES = exports.COLOR_ENCODINGS = void 0;
+exports.VIOLIN_MODES = exports.VIOLINPLOT_SCALES = exports.VAR_SORT_ORDER = exports.VAR_SORT = exports.UNSELECTED_POLYGON_FILLCOLOR = exports.SELECTION_MODES = exports.SELECTED_POLYGON_FILLCOLOR = exports.OBS_TYPES = exports.MATRIXPLOT_SCALES = exports.LOCAL_STORAGE_KEY = exports.DOTPLOT_SCALES = exports.COLOR_ENCODINGS = void 0;
 const LOCAL_STORAGE_KEY = exports.LOCAL_STORAGE_KEY = "CHERITA";
 const COLOR_ENCODINGS = exports.COLOR_ENCODINGS = {
   VAR: "var",
@@ -15,6 +15,15 @@ const OBS_TYPES = exports.OBS_TYPES = {
   CONTINUOUS: "continuous",
   BOOLEAN: "boolean"
 };
+const VAR_SORT = exports.VAR_SORT = {
+  NONE: null,
+  NAME: "name",
+  MATRIX: "matrix"
+};
+const VAR_SORT_ORDER = exports.VAR_SORT_ORDER = {
+  ASC: "asc",
+  DESC: "desc"
+};
 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];
 const SELECTION_MODES = exports.SELECTION_MODES = {

package/dist/context/DatasetContext.js

@@ -85,7 +85,17 @@ const initialDataset = {
     expressionCutoff: 0.0
   },
   diseaseDatasets: [],
-  selectedDisease: null
+  selectedDisease: null,
+  varSort: {
+    var: {
+      sort: _constants.VAR_SORT.NONE,
+      sortOrder: _constants.VAR_SORT_ORDER.ASC
+    },
+    disease: {
+      sort: _constants.VAR_SORT.NONE,
+      sortOrder: _constants.VAR_SORT_ORDER.ASC
+    }
+  }
 };
 const initializer = initialState => {
   const localObj = (JSON.parse(localStorage.getItem(_constants.LOCAL_STORAGE_KEY)) || {})[initialState.url] || {};
@@ -478,6 +488,45 @@ function datasetReducer(dataset, action) {
           labelObs: []
         };
       }
+    case "set.varSort":
+      {
+        return {
+          ...dataset,
+          varSort: {
+            ...dataset.varSort,
+            [action.var]: {
+              sort: action.sort,
+              sortOrder: action.sortOrder
+            }
+          }
+        };
+      }
+    case "set.varSort.sort":
+      {
+        return {
+          ...dataset,
+          varSort: {
+            ...dataset.varSort,
+            [action.var]: {
+              ...dataset.varSort[action.var],
+              sort: action.sort
+            }
+          }
+        };
+      }
+    case "set.varSort.sortOrder":
+      {
+        return {
+          ...dataset,
+          varSort: {
+            ...dataset.varSort,
+            [action.var]: {
+              ...dataset.varSort[action.var],
+              sortOrder: action.sortOrder
+            }
+          }
+        };
+      }
     default:
       {
         throw Error("Unknown action: " + action.type);

package/dist/context/FilterContext.js

@@ -15,6 +15,7 @@ const FilteredDataContext = exports.FilteredDataContext = /*#__PURE__*/(0, _reac
 const FilteredDataDispatchContext = exports.FilteredDataDispatchContext = /*#__PURE__*/(0, _react.createContext)(null);
 const initialFilterData = {
   obsIndices: [],
+  // @TODO: split to byObs and byPolygons ?
   varIndices: []
 };
 function FilterProvider(_ref) {

package/dist/utils/requests.js

@@ -7,7 +7,9 @@ exports.fetchData = fetchData;
 exports.useFetch = exports.useDebouncedFetch = void 0;
 var _reactQuery = require("@tanstack/react-query");
 var _usehooks = require("@uidotdev/usehooks");
+var _lodash = _interopRequireDefault(require("lodash"));
 var _errors = require("./errors");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 async function fetchData(endpoint, params) {
   let signal = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
   let ms = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 300000;
@@ -46,9 +48,9 @@ const useFetch = function (endpoint, params) {
     enabled = true
   } = opts;
   const {
-    data: fetchedData,
-    isLoading: isPending,
-    error: serverError
+    data: fetchedData = null,
+    isLoading: isPending = false,
+    error: serverError = null
   } = (0, _reactQuery.useQuery)({
     queryKey: [endpoint, params],
     queryFn: _ref => {
@@ -79,9 +81,9 @@ const useDebouncedFetch = function (endpoint, params) {
   } = opts;
   const debouncedParams = (0, _usehooks.useDebounce)(params, delay);
   const {
-    data: fetchedData,
-    isLoading: isPending,
-    error: serverError
+    data: fetchedData = null,
+    isLoading: isPending = false,
+    error: serverError = null
   } = (0, _reactQuery.useQuery)({
     queryKey: [endpoint, debouncedParams],
     queryFn: _ref2 => {

package/dist/utils/zarrData.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useXData = exports.useObsmData = exports.useObsData = exports.useLabelObsData = void 0;
+var _react = require("react");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _constants = require("../constants/constants");
+var _DatasetContext = require("../context/DatasetContext");
+var _zarrHelper = require("../helpers/zarr-helper");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const useObsmData = () => {
+  const dataset = (0, _DatasetContext.useDataset)();
+  const [obsmParams, setObsmParams] = (0, _react.useState)({
+    url: dataset.url,
+    path: "obsm/" + dataset.selectedObsm
+  });
+  (0, _react.useEffect)(() => {
+    setObsmParams({
+      url: dataset.url,
+      path: "obsm/" + dataset.selectedObsm
+    });
+  }, [dataset.url, dataset.selectedObsm]);
+  return (0, _zarrHelper.useZarr)(obsmParams, null, _zarrHelper.GET_OPTIONS);
+};
+exports.useObsmData = useObsmData;
+const meanData = (_i, data) => {
+  return _lodash.default.zipWith(...data, function () {
+    for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {
+      values[_key] = arguments[_key];
+    }
+    return _lodash.default.mean(values);
+  });
+};
+const useXData = function () {
+  let agg = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : meanData;
+  const dataset = (0, _DatasetContext.useDataset)();
+  const [xParams, setXParams] = (0, _react.useState)(!dataset.selectedVar ? [] : !dataset.selectedVar?.isSet ? [{
+    url: dataset.url,
+    path: "X",
+    s: [null, dataset.selectedVar?.matrix_index]
+  }] : _lodash.default.map(dataset.selectedVar?.vars, v => {
+    return {
+      url: dataset.url,
+      path: "X",
+      s: [null, v.matrix_index]
+    };
+  }));
+  (0, _react.useEffect)(() => {
+    setXParams(!dataset.selectedVar ? [] : !dataset.selectedVar?.isSet ? [{
+      url: dataset.url,
+      path: "X",
+      s: [null, dataset.selectedVar?.matrix_index]
+    }] : _lodash.default.map(dataset.selectedVar?.vars, v => {
+      return {
+        url: dataset.url,
+        path: "X",
+        s: [null, v.matrix_index]
+      };
+    }));
+  }, [dataset.url, dataset.selectedVar]);
+  return (0, _zarrHelper.useMultipleZarr)(xParams, _zarrHelper.GET_OPTIONS, agg);
+};
+exports.useXData = useXData;
+const useObsData = () => {
+  const dataset = (0, _DatasetContext.useDataset)();
+  const [obsParams, setObsParams] = (0, _react.useState)({
+    url: dataset.url,
+    path: "obs/" + dataset.selectedObs?.name + (dataset.selectedObs?.type === _constants.OBS_TYPES.CATEGORICAL ? "/codes" : "")
+  });
+  (0, _react.useEffect)(() => {
+    setObsParams({
+      url: dataset.url,
+      path: "obs/" + dataset.selectedObs?.name + (dataset.selectedObs?.type === _constants.OBS_TYPES.CATEGORICAL ? "/codes" : "")
+    });
+  }, [dataset.url, dataset.selectedObs]);
+  return (0, _zarrHelper.useZarr)(obsParams, null, _zarrHelper.GET_OPTIONS);
+};
+exports.useObsData = useObsData;
+const useLabelObsData = () => {
+  const dataset = (0, _DatasetContext.useDataset)();
+  const [labelObsParams, setLabelObsParams] = (0, _react.useState)(_lodash.default.map(dataset.labelObs, obs => {
+    return {
+      url: dataset.url,
+      path: "obs/" + obs.name + (obs.type === _constants.OBS_TYPES.CATEGORICAL ? "/codes" : ""),
+      key: obs.name
+    };
+  }));
+  (0, _react.useEffect)(() => {
+    setLabelObsParams(_lodash.default.map(dataset.labelObs, obs => {
+      return {
+        url: dataset.url,
+        path: "obs/" + obs.name + (obs.type === _constants.OBS_TYPES.CATEGORICAL ? "/codes" : ""),
+        key: obs.name
+      };
+    }));
+  }, [dataset.labelObs, dataset.url]);
+  return (0, _zarrHelper.useMultipleZarr)(labelObsParams, _zarrHelper.GET_OPTIONS);
+};
+exports.useLabelObsData = useLabelObsData;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "0.2.0-dev.2024-12-16.f6e39628",
+  "version": "0.2.0-dev.2024-12-16.ab9c5057",
   "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": "f6e396285b478f157db2dd9d8bdd8adbaa262d4c"
+  "prereleaseSha": "ab9c5057639276863637b6dd046ba3dcbc3b6804"
 }