@haniffalab/cherita-react 0.2.0-dev.2024-05-22.5ce64346 → 0.2.0-dev.2024-09-26.f9979478

package/dist/constants/constants.js

@@ -3,51 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VIOLIN_MODES = exports.VIOLINPLOT_STANDARDSCALES = exports.SELECTION_MODES = exports.PLOTLY_COLORSCALES = exports.MATRIXPLOT_STANDARDSCALES = exports.LOCAL_STORAGE_KEY = exports.DOTPLOT_STANDARDSCALES = exports.CHROMA_COLORSCALES = void 0;
+exports.VIOLIN_MODES = exports.VIOLINPLOT_STANDARDSCALES = exports.UNSELECTED_POLYGON_FILLCOLOR = exports.SELECTION_MODES = exports.SELECTED_POLYGON_FILLCOLOR = exports.OBS_TYPES = exports.MATRIXPLOT_STANDARDSCALES = exports.LOCAL_STORAGE_KEY = exports.DOTPLOT_STANDARDSCALES = exports.COLOR_ENCODINGS = void 0;
 const LOCAL_STORAGE_KEY = exports.LOCAL_STORAGE_KEY = "CHERITA";
-const PLOTLY_COLORSCALES = exports.PLOTLY_COLORSCALES = ["Blackbody", "Bluered", "Blues", "Cividis", "Earth", "Electric", "Greens", "Greys", "Hot", "Jet", "Picnic", "Portland", "Rainbow", "RdBu", "Reds", "Viridis", "YlGnBu", "YlOrRd"];
-const CHROMA_COLORSCALES = exports.CHROMA_COLORSCALES = {
-  OrRd: ["#fff7ec", "#fee8c8", "#fdd49e", "#fdbb84", "#fc8d59", "#ef6548", "#d7301f", "#b30000", "#7f0000"],
-  PuBu: ["#fff7fb", "#ece7f2", "#d0d1e6", "#a6bddb", "#74a9cf", "#3690c0", "#0570b0", "#045a8d", "#023858"],
-  BuPu: ["#f7fcfd", "#e0ecf4", "#bfd3e6", "#9ebcda", "#8c96c6", "#8c6bb1", "#88419d", "#810f7c", "#4d004b"],
-  Oranges: ["#fff5eb", "#fee6ce", "#fdd0a2", "#fdae6b", "#fd8d3c", "#f16913", "#d94801", "#a63603", "#7f2704"],
-  BuGn: ["#f7fcfd", "#e5f5f9", "#ccece6", "#99d8c9", "#66c2a4", "#41ae76", "#238b45", "#006d2c", "#00441b"],
-  YlOrBr: ["#ffffe5", "#fff7bc", "#fee391", "#fec44f", "#fe9929", "#ec7014", "#cc4c02", "#993404", "#662506"],
-  YlGn: ["#ffffe5", "#f7fcb9", "#d9f0a3", "#addd8e", "#78c679", "#41ab5d", "#238443", "#006837", "#004529"],
-  Reds: ["#fff5f0", "#fee0d2", "#fcbba1", "#fc9272", "#fb6a4a", "#ef3b2c", "#cb181d", "#a50f15", "#67000d"],
-  RdPu: ["#fff7f3", "#fde0dd", "#fcc5c0", "#fa9fb5", "#f768a1", "#dd3497", "#ae017e", "#7a0177", "#49006a"],
-  Greens: ["#f7fcf5", "#e5f5e0", "#c7e9c0", "#a1d99b", "#74c476", "#41ab5d", "#238b45", "#006d2c", "#00441b"],
-  YlGnBu: ["#ffffd9", "#edf8b1", "#c7e9b4", "#7fcdbb", "#41b6c4", "#1d91c0", "#225ea8", "#253494", "#081d58"],
-  Purples: ["#fcfbfd", "#efedf5", "#dadaeb", "#bcbddc", "#9e9ac8", "#807dba", "#6a51a3", "#54278f", "#3f007d"],
-  GnBu: ["#f7fcf0", "#e0f3db", "#ccebc5", "#a8ddb5", "#7bccc4", "#4eb3d3", "#2b8cbe", "#0868ac", "#084081"],
-  Greys: ["#ffffff", "#f0f0f0", "#d9d9d9", "#bdbdbd", "#969696", "#737373", "#525252", "#252525", "#000000"],
-  YlOrRd: ["#ffffcc", "#ffeda0", "#fed976", "#feb24c", "#fd8d3c", "#fc4e2a", "#e31a1c", "#bd0026", "#800026"],
-  PuRd: ["#f7f4f9", "#e7e1ef", "#d4b9da", "#c994c7", "#df65b0", "#e7298a", "#ce1256", "#980043", "#67001f"],
-  Blues: ["#f7fbff", "#deebf7", "#c6dbef", "#9ecae1", "#6baed6", "#4292c6", "#2171b5", "#08519c", "#08306b"],
-  PuBuGn: ["#fff7fb", "#ece2f0", "#d0d1e6", "#a6bddb", "#67a9cf", "#3690c0", "#02818a", "#016c59", "#014636"],
-  Viridis: ["#440154", "#482777", "#3f4a8a", "#31678e", "#26838f", "#1f9d8a", "#6cce5a", "#b6de2b", "#fee825"],
-  // diverging
-
-  Spectral: ["#9e0142", "#d53e4f", "#f46d43", "#fdae61", "#fee08b", "#ffffbf", "#e6f598", "#abdda4", "#66c2a5", "#3288bd", "#5e4fa2"],
-  RdYlGn: ["#a50026", "#d73027", "#f46d43", "#fdae61", "#fee08b", "#ffffbf", "#d9ef8b", "#a6d96a", "#66bd63", "#1a9850", "#006837"],
-  RdBu: ["#67001f", "#b2182b", "#d6604d", "#f4a582", "#fddbc7", "#f7f7f7", "#d1e5f0", "#92c5de", "#4393c3", "#2166ac", "#053061"],
-  PiYG: ["#8e0152", "#c51b7d", "#de77ae", "#f1b6da", "#fde0ef", "#f7f7f7", "#e6f5d0", "#b8e186", "#7fbc41", "#4d9221", "#276419"],
-  PRGn: ["#40004b", "#762a83", "#9970ab", "#c2a5cf", "#e7d4e8", "#f7f7f7", "#d9f0d3", "#a6dba0", "#5aae61", "#1b7837", "#00441b"],
-  RdYlBu: ["#a50026", "#d73027", "#f46d43", "#fdae61", "#fee090", "#ffffbf", "#e0f3f8", "#abd9e9", "#74add1", "#4575b4", "#313695"],
-  BrBG: ["#543005", "#8c510a", "#bf812d", "#dfc27d", "#f6e8c3", "#f5f5f5", "#c7eae5", "#80cdc1", "#35978f", "#01665e", "#003c30"],
-  RdGy: ["#67001f", "#b2182b", "#d6604d", "#f4a582", "#fddbc7", "#ffffff", "#e0e0e0", "#bababa", "#878787", "#4d4d4d", "#1a1a1a"],
-  PuOr: ["#7f3b08", "#b35806", "#e08214", "#fdb863", "#fee0b6", "#f7f7f7", "#d8daeb", "#b2abd2", "#8073ac", "#542788", "#2d004b"],
-  // qualitative
-
-  Set2: ["#66c2a5", "#fc8d62", "#8da0cb", "#e78ac3", "#a6d854", "#ffd92f", "#e5c494", "#b3b3b3"],
-  Accent: ["#7fc97f", "#beaed4", "#fdc086", "#ffff99", "#386cb0", "#f0027f", "#bf5b17", "#666666"],
-  Set1: ["#e41a1c", "#377eb8", "#4daf4a", "#984ea3", "#ff7f00", "#ffff33", "#a65628", "#f781bf", "#999999"],
-  Set3: ["#8dd3c7", "#ffffb3", "#bebada", "#fb8072", "#80b1d3", "#fdb462", "#b3de69", "#fccde5", "#d9d9d9", "#bc80bd", "#ccebc5", "#ffed6f"],
-  Dark2: ["#1b9e77", "#d95f02", "#7570b3", "#e7298a", "#66a61e", "#e6ab02", "#a6761d", "#666666"],
-  Paired: ["#a6cee3", "#1f78b4", "#b2df8a", "#33a02c", "#fb9a99", "#e31a1c", "#fdbf6f", "#ff7f00", "#cab2d6", "#6a3d9a", "#ffff99", "#b15928"],
-  Pastel2: ["#b3e2cd", "#fdcdac", "#cbd5e8", "#f4cae4", "#e6f5c9", "#fff2ae", "#f1e2cc", "#cccccc"],
-  Pastel1: ["#fbb4ae", "#b3cde3", "#ccebc5", "#decbe4", "#fed9a6", "#ffffcc", "#e5d8bd", "#fddaec", "#f2f2f2"]
+const COLOR_ENCODINGS = exports.COLOR_ENCODINGS = {
+  VAR: "var",
+  OBS: "obs"
+};
+const OBS_TYPES = exports.OBS_TYPES = {
+  CATEGORICAL: "categorical",
+  DISCRETE: "discrete",
+  CONTINUOUS: "continuous"
 };
+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 = {
   SINGLE: "single",
   MULTIPLE: "multiple"

package/dist/context/DatasetContext.js

@@ -8,15 +8,15 @@ exports.DatasetProvider = DatasetProvider;
 exports.useDataset = useDataset;
 exports.useDatasetDispatch = useDatasetDispatch;
 var _react = _interopRequireWildcard(require("react"));
-var _lodash = _interopRequireDefault(require("lodash"));
+var _querySyncStoragePersister = require("@tanstack/query-sync-storage-persister");
 var _reactQuery = require("@tanstack/react-query");
 var _reactQueryPersistClient = require("@tanstack/react-query-persist-client");
-var _querySyncStoragePersister = require("@tanstack/query-sync-storage-persister");
+var _lodash = _interopRequireDefault(require("lodash"));
 var _constants = require("../constants/constants");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 && Object.prototype.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 _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 DatasetContext = exports.DatasetContext = /*#__PURE__*/(0, _react.createContext)(null);
 const DatasetDispatchContext = exports.DatasetDispatchContext = /*#__PURE__*/(0, _react.createContext)(null);
 const queryClient = new _reactQuery.QueryClient({
@@ -52,7 +52,6 @@ const persistOptions = {
   // @TODO: add maxAge and buster (app and api version numbers as busters)
 };
 const initialDataset = {
-  obs: {},
   varNamesCol: null,
   selectedObs: null,
   selectedObsm: null,
@@ -60,8 +59,15 @@ const initialDataset = {
   selectedMultiObs: [],
   selectedMultiVar: [],
   colorEncoding: null,
+  labelObs: [],
+  sliceBy: {
+    obs: false,
+    polygons: false
+  },
   controls: {
     colorScale: "Viridis",
+    valueRange: [0, 1],
+    range: [0, 1],
     colorAxis: {
       dmin: 0,
       dmax: 1,
@@ -72,9 +78,6 @@ const initialDataset = {
     meanOnlyExpressed: false,
     expressionCutoff: 0.0
   },
-  state: {
-    obs: {}
-  },
   diseaseDatasets: [],
   selectedDisease: {
     id: null,
@@ -100,7 +103,9 @@ function DatasetProvider(_ref2) {
   }), dataset_params));
   (0, _react.useEffect)(() => {
     try {
+      const localObj = JSON.parse(localStorage.getItem(_constants.LOCAL_STORAGE_KEY)) || {};
       localStorage.setItem(_constants.LOCAL_STORAGE_KEY, JSON.stringify({
+        ...localObj,
         [dataset.url]: dataset
       }));
     } catch (err) {
@@ -131,35 +136,33 @@ function useDatasetDispatch() {
 }
 function datasetReducer(dataset, action) {
   switch (action.type) {
-    case "set.obs":
-      {
-        return {
-          ...dataset,
-          obs: action.value
-        };
-      }
-    case "obsSelected":
+    case "select.obs":
       {
+        var _action$obs;
         return {
           ...dataset,
-          selectedObs: action.obs
+          selectedObs: action.obs,
+          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
+          }
         };
       }
-    case "obsmSelected":
+    case "select.obsm":
       {
         return {
           ...dataset,
           selectedObsm: action.obsm
         };
       }
-    case "varSelected":
+    case "select.var":
       {
         return {
           ...dataset,
           selectedVar: action.var
         };
       }
-    case "multiVarSelected":
+    case "select.multivar":
       {
         if (dataset.selectedMultiVar.find(i => _lodash.default.isEqual(i, action.var))) {
           return dataset;
@@ -170,7 +173,15 @@ function datasetReducer(dataset, action) {
           };
         }
       }
-    case "multiVarDeselected":
+    case "deselect.var":
+      {
+        return {
+          ...dataset,
+          selectedVar: null,
+          colorEncoding: dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? null : dataset.colorEncoding
+        };
+      }
+    case "deselect.multivar":
       {
         return {
           ...dataset,
@@ -188,14 +199,16 @@ function datasetReducer(dataset, action) {
       {
         return {
           ...dataset,
-          selectedMultiVar: []
+          selectedMultiVar: [],
+          colorEncoding: dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? null : dataset.colorEncoding
         };
       }
     case "reset.var":
       {
         return {
           ...dataset,
-          selectedVar: null
+          selectedVar: null,
+          colorEncoding: dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? null : dataset.colorEncoding
         };
       }
     case "select.disease":
@@ -240,6 +253,26 @@ function datasetReducer(dataset, action) {
           }
         };
       }
+    case "set.controls.valueRange":
+      {
+        return {
+          ...dataset,
+          controls: {
+            ...dataset.controls,
+            valueRange: action.valueRange
+          }
+        };
+      }
+    case "set.controls.range":
+      {
+        return {
+          ...dataset,
+          controls: {
+            ...dataset.controls,
+            range: action.range
+          }
+        };
+      }
     case "set.controls.colorAxis":
       {
         return {
@@ -320,6 +353,72 @@ function datasetReducer(dataset, action) {
           }
         };
       }
+    case "toggle.slice.obs":
+      {
+        if (_lodash.default.isEqual(dataset.selectedObs, action.obs)) {
+          return {
+            ...dataset,
+            sliceBy: {
+              ...dataset.sliceBy,
+              obs: !dataset.sliceBy.obs
+            }
+          };
+        } else {
+          return {
+            ...dataset,
+            selectedObs: action.obs,
+            sliceBy: {
+              ...dataset.sliceBy,
+              obs: true
+            }
+          };
+        }
+      }
+    case "toggle.slice.polygons":
+      {
+        return {
+          ...dataset,
+          sliceBy: {
+            ...dataset.sliceBy,
+            polygons: !dataset.sliceBy.polygons
+          }
+        };
+      }
+    case "disable.slice.polygons":
+      {
+        return {
+          ...dataset,
+          sliceBy: {
+            ...dataset.sliceBy,
+            polygons: false
+          }
+        };
+      }
+    case "add.label.obs":
+      {
+        if (dataset.labelObs.find(i => _lodash.default.isEqual(i, action.obs))) {
+          return dataset;
+        } else {
+          return {
+            ...dataset,
+            labelObs: [...dataset.labelObs, action.obs]
+          };
+        }
+      }
+    case "remove.label.obs":
+      {
+        return {
+          ...dataset,
+          labelObs: dataset.labelObs.filter(a => a.name !== action.obsName)
+        };
+      }
+    case "reset.label.obs":
+      {
+        return {
+          ...dataset,
+          labelObs: []
+        };
+      }
     default:
       {
         throw Error("Unknown action: " + action.type);

package/dist/helpers/color-helper.js

@@ -3,34 +3,67 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useColor = void 0;
-var _chromaJs = _interopRequireDefault(require("chroma-js"));
-var _lodash = _interopRequireDefault(require("lodash"));
-var _constants = require("../constants/constants");
-var _DatasetContext = require("../context/DatasetContext");
+exports.useColor = exports.rgbToHex = void 0;
 var _react = require("react");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _colorscales = require("../constants/colorscales");
+var _DatasetContext = require("../context/DatasetContext");
+const GRAY = [214, 212, 212];
+const parseHexColor = color => {
+  const r = parseInt(color === null || color === void 0 ? void 0 : color.substring(1, 3), 16);
+  const g = parseInt(color === null || color === void 0 ? void 0 : color.substring(3, 5), 16);
+  const b = parseInt(color === null || color === void 0 ? void 0 : color.substring(5, 7), 16);
+  return [r, g, b];
+};
+const interpolateColor = (color1, color2, factor) => {
+  const [r1, g1, b1] = parseHexColor(color1);
+  const [r2, g2, b2] = parseHexColor(color2);
+  const r = Math.round(r1 + factor * (r2 - r1));
+  const g = Math.round(g1 + factor * (g2 - g1));
+  const b = Math.round(b1 + factor * (b2 - b1));
+  return [r, g, b];
+};
+const computeColor = (colormap, value) => {
+  if (!colormap || Number.isNaN(value)) {
+    return [0, 0, 0, 255];
+  } else if (value <= 0) {
+    return parseHexColor(colormap[0]);
+  } else if (value >= 1) {
+    return parseHexColor(colormap[colormap.length - 1]);
+  }
+  const index1 = Math.floor(value * (colormap.length - 1));
+  const index2 = Math.ceil(value * (colormap.length - 1));
+  const factor = value * (colormap.length - 1) % 1;
+  return interpolateColor(colormap[index1], colormap[index2], factor);
+};
+const rgbToHex = color => {
+  const [r, g, b] = color || [0, 0, 0, 0];
+  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+};
+exports.rgbToHex = rgbToHex;
 const useColor = () => {
-  var _dataset$selectedObs2;
   const dataset = (0, _DatasetContext.useDataset)();
-  const getScale = (0, _react.useCallback)(function () {
-    let values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    const c = _chromaJs.default.scale(_constants.CHROMA_COLORSCALES[dataset.controls.colorScale]).domain(values ? [_lodash.default.min(values), _lodash.default.max(values)] : [0, 1]);
-    return c;
-  }, [dataset.controls.colorScale]);
-  const getColor = (0, _react.useCallback)(function (scale, value) {
-    let colorEncoding = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : dataset.colorEncoding;
-    if (colorEncoding === "var") {
-      return scale(value).rgb();
-    } else if (colorEncoding === "obs") {
-      var _dataset$obs$dataset$, _dataset$selectedObs;
-      return (_dataset$obs$dataset$ = dataset.obs[(_dataset$selectedObs = dataset.selectedObs) === null || _dataset$selectedObs === void 0 ? void 0 : _dataset$selectedObs.name]) === null || _dataset$obs$dataset$ === void 0 || (_dataset$obs$dataset$ = _dataset$obs$dataset$.state) === null || _dataset$obs$dataset$ === void 0 || (_dataset$obs$dataset$ = _dataset$obs$dataset$[value]) === null || _dataset$obs$dataset$ === void 0 ? void 0 : _dataset$obs$dataset$["color"];
+  const getColor = (0, _react.useCallback)(function (value) {
+    let categorical = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    let grayOut = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    let {
+      alpha = 0.75,
+      gray = 0.95
+    } = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+    let colorEncoding = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : dataset.colorEncoding;
+    const colormap = _colorscales.COLORSCALES[categorical ? "Accent" : dataset.controls.colorScale];
+    if (colorEncoding) {
+      if (grayOut) {
+        // Mix color with gray manually instead of chroma.mix to get better performance with deck.gl
+        const rgb = computeColor(colormap, value);
+        return [rgb[0] * (1 - gray) + GRAY[0] * gray, rgb[1] * (1 - gray) + GRAY[1] * gray, rgb[2] * (1 - gray) + GRAY[2] * gray, 255 * alpha];
+      } else {
+        return [...computeColor(colormap, value), 255];
+      }
     } else {
       return null;
     }
-  }, [dataset.colorEncoding, dataset.obs, (_dataset$selectedObs2 = dataset.selectedObs) === null || _dataset$selectedObs2 === void 0 ? void 0 : _dataset$selectedObs2.name]);
+  }, [dataset.colorEncoding, dataset.controls.colorScale]);
   return {
-    getScale,
     getColor
   };
 };

package/dist/helpers/zarr-helper.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useZarr = exports.ZarrHelper = exports.GET_OPTIONS = void 0;
+exports.useZarr = exports.useMultipleZarr = exports.ZarrHelper = exports.GET_OPTIONS = void 0;
 var _react = require("react");
 var _zarr = require("zarr");
 const GET_OPTIONS = exports.GET_OPTIONS = {
@@ -28,6 +28,16 @@ class ZarrHelper {
   }
 }
 exports.ZarrHelper = ZarrHelper;
+const fetchDataFromZarr = async (url, path, s, opts) => {
+  try {
+    const zarrHelper = new ZarrHelper();
+    const z = await zarrHelper.open(url, path);
+    const result = await z.get(s, opts);
+    return result.data;
+  } catch (error) {
+    throw new Error(error.message);
+  }
+};
 const useZarr = function (_ref2) {
   let {
     url,
@@ -39,21 +49,15 @@ const useZarr = function (_ref2) {
   const [isPending, setIsPending] = (0, _react.useState)(true);
   const [serverError, setServerError] = (0, _react.useState)(null);
   (0, _react.useEffect)(() => {
-    const fetchData = async () => {
-      try {
-        setIsPending(true);
-        setServerError(null);
-        const zarrHelper = new ZarrHelper();
-        const z = await zarrHelper.open(url, path);
-        const result = await z.get(s, opts);
-        setData(result.data);
-      } catch (error) {
-        setServerError(error.message);
-      } finally {
-        setIsPending(false);
-      }
-    };
-    fetchData();
+    setIsPending(true);
+    setServerError(null);
+    fetchDataFromZarr(url, path, s, opts).then(data => {
+      setData(data);
+    }).catch(error => {
+      setServerError(error.message);
+    }).finally(() => {
+      setIsPending(false);
+    });
   }, [opts, path, s, url]);
   return {
     data,
@@ -61,4 +65,22 @@ const useZarr = function (_ref2) {
     serverError
   };
 };
-exports.useZarr = useZarr;
+exports.useZarr = useZarr;
+const useMultipleZarr = function (inputs) {
+  let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const [results, setResults] = (0, _react.useState)({});
+  (0, _react.useEffect)(() => {
+    const fetchData = async () => {
+      const results = await Promise.all(inputs.map(input => fetchDataFromZarr(input.url, input.path, input.s, opts)));
+      const dataObject = {};
+      results.forEach((result, index) => {
+        const key = inputs[index].key;
+        dataObject[key] = result;
+      });
+      setResults(dataObject);
+    };
+    fetchData();
+  }, [inputs, opts]);
+  return results;
+};
+exports.useMultipleZarr = useMultipleZarr;

package/dist/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "COLORSCALES", {
+  enumerable: true,
+  get: function () {
+    return _colorscales.COLORSCALES;
+  }
+});
 Object.defineProperty(exports, "DatasetProvider", {
   enumerable: true,
   get: function () {
@@ -18,7 +24,7 @@ Object.defineProperty(exports, "Dotplot", {
 Object.defineProperty(exports, "DotplotControls", {
   enumerable: true,
   get: function () {
-    return _Dotplot.DotplotControls;
+    return _DotplotControls.DotplotControls;
   }
 });
 Object.defineProperty(exports, "Heatmap", {
@@ -30,7 +36,7 @@ Object.defineProperty(exports, "Heatmap", {
 Object.defineProperty(exports, "HeatmapControls", {
   enumerable: true,
   get: function () {
-    return _Heatmap.HeatmapControls;
+    return _HeatmapControls.HeatmapControls;
   }
 });
 Object.defineProperty(exports, "Matrixplot", {
@@ -42,7 +48,7 @@ Object.defineProperty(exports, "Matrixplot", {
 Object.defineProperty(exports, "MatrixplotControls", {
   enumerable: true,
   get: function () {
-    return _Matrixplot.MatrixplotControls;
+    return _MatrixplotControls.MatrixplotControls;
   }
 });
 Object.defineProperty(exports, "ObsColsList", {
@@ -87,12 +93,6 @@ Object.defineProperty(exports, "OffcanvasVars", {
     return _Offcanvas.OffcanvasVars;
   }
 });
-Object.defineProperty(exports, "PLOTLY_COLORSCALES", {
-  enumerable: true,
-  get: function () {
-    return _constants.PLOTLY_COLORSCALES;
-  }
-});
 Object.defineProperty(exports, "SELECTION_MODES", {
   enumerable: true,
   get: function () {
@@ -108,7 +108,7 @@ Object.defineProperty(exports, "Scatterplot", {
 Object.defineProperty(exports, "ScatterplotControls", {
   enumerable: true,
   get: function () {
-    return _Scatterplot.ScatterplotControls;
+    return _ScatterplotControls.ScatterplotControls;
   }
 });
 Object.defineProperty(exports, "SearchBar", {
@@ -138,7 +138,7 @@ Object.defineProperty(exports, "Violin", {
 Object.defineProperty(exports, "ViolinControls", {
   enumerable: true,
   get: function () {
-    return _Violin.ViolinControls;
+    return _ViolinControls.ViolinControls;
   }
 });
 var _ObsList = require("./components/obs-list/ObsList");
@@ -146,10 +146,16 @@ var _ObsmList = require("./components/obsm-list/ObsmList");
 var _VarList = require("./components/var-list/VarList");
 var _SearchBar = require("./components/search-bar/SearchBar");
 var _Heatmap = require("./components/heatmap/Heatmap");
+var _HeatmapControls = require("./components/heatmap/HeatmapControls");
 var _Dotplot = require("./components/dotplot/Dotplot");
+var _DotplotControls = require("./components/dotplot/DotplotControls");
 var _Scatterplot = require("./components/scatterplot/Scatterplot");
+var _ScatterplotControls = require("./components/scatterplot/ScatterplotControls");
 var _Matrixplot = require("./components/matrixplot/Matrixplot");
+var _MatrixplotControls = require("./components/matrixplot/MatrixplotControls");
 var _Violin = require("./components/violin/Violin");
+var _ViolinControls = require("./components/violin/ViolinControls");
 var _constants = require("./constants/constants");
+var _colorscales = require("./constants/colorscales");
 var _DatasetContext = require("./context/DatasetContext");
 var _Offcanvas = require("./components/Offcanvas");

package/dist/utils/LoadingIndicators.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LoadingSpinner = exports.LoadingLinear = void 0;
+var _material = require("@mui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+const LoadingSpinner = _ref => {
+  let {
+    text = null,
+    disableShrink = false
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "loading-spinner",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+      disableShrink: disableShrink
+    }), (text === null || text === void 0 ? void 0 : text.length) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "visually-hidden",
+      children: text
+    })]
+  });
+};
+exports.LoadingSpinner = LoadingSpinner;
+const LoadingLinear = () => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+    sx: {
+      width: "100%"
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.LinearProgress, {})
+  });
+};
+exports.LoadingLinear = LoadingLinear;

package/dist/utils/requests.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.fetchData = fetchData;
 exports.useFetch = exports.useDebouncedFetch = void 0;
-var _usehooks = require("@uidotdev/usehooks");
 var _reactQuery = require("@tanstack/react-query");
+var _usehooks = require("@uidotdev/usehooks");
 var _errors = require("./errors");
 async function fetchData(endpoint, params) {
   let signal = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;

package/dist/utils/search.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useVarSearch = exports.useGetDisease = exports.useDiseaseSearch = void 0;
 var _react = require("react");
-var _DatasetContext = require("../context/DatasetContext");
 var _requests = require("./requests");
+var _DatasetContext = require("../context/DatasetContext");
 const useDiseaseSearch = () => {
   const ENDPOINT = "diseases";
   const dataset = (0, _DatasetContext.useDataset)();
@@ -31,6 +31,7 @@ const useVarSearch = () => {
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url,
+    col: dataset.varNamesCol,
     text: ""
   });
   const data = (0, _requests.useFetch)(ENDPOINT, params, {
@@ -38,11 +39,11 @@ const useVarSearch = () => {
   });
   const onSelect = item => {
     dispatch({
-      type: "varSelected",
+      type: "select.var",
       var: item
     });
     dispatch({
-      type: "multiVarSelected",
+      type: "select.multivar",
       var: item
     });
     dispatch({