@haniffalab/cherita-react 1.0.0 → 1.1.0-dev.2025-04-01.1c91bb8b

package/dist/esm/helpers/map-helper.js

@@ -0,0 +1,53 @@
+import { WebMercatorViewport } from "@deck.gl/core";
+import _ from "lodash";
+export class MapHelper {
+  fitBounds(coords) {
+    let {
+      width = 400,
+      height = 600
+    } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+      width: 400,
+      height: 600
+    };
+    let view = new WebMercatorViewport({
+      width: width,
+      height: height,
+      longitude: 0,
+      latitude: 0,
+      zoom: 12
+    });
+    let latMin;
+    let latMax;
+    let lonMin;
+    let lonMax;
+    if (coords) {
+      latMin = _.minBy(coords, c => c[1])[1];
+      latMax = _.maxBy(coords, c => c[1])[1];
+      lonMin = _.minBy(coords, c => c[0])[0];
+      lonMax = _.maxBy(coords, c => c[0])[0];
+    } else {
+      latMin = 0;
+      latMax = 1;
+      lonMin = 0;
+      lonMax = 1;
+    }
+    const bounds = [[lonMin, latMin], [lonMax, latMax]];
+    const {
+      longitude,
+      latitude,
+      zoom
+    } = view.fitBounds(bounds, {
+      padding: {
+        top: height * 0.05,
+        bottom: height * 0.075,
+        left: width * 0.05,
+        right: width * 0.05
+      }
+    });
+    return {
+      longitude,
+      latitude,
+      zoom
+    };
+  }
+}

package/dist/esm/helpers/zarr-helper.js

@@ -0,0 +1,111 @@
+import { useCallback } from "react";
+import { useQueries, useQuery } from "@tanstack/react-query";
+import { ArrayNotFoundError, GroupNotFoundError, openArray } from "zarr";
+export const GET_OPTIONS = {
+  concurrencyLimit: 10,
+  // max number of concurrent requests (default 10)
+  progressCallback: _ref => {
+    let {
+      progress,
+      queueSize
+    } = _ref;
+    console.debug(`${progress / queueSize * 100}% complete.`);
+  } // callback executed after each request
+};
+export class ZarrHelper {
+  async open(url, path) {
+    const z = await openArray({
+      store: url,
+      path: path,
+      mode: "r"
+    });
+    return z;
+  }
+}
+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) {
+    if (error instanceof ArrayNotFoundError || error instanceof GroupNotFoundError) {
+      error.status = 404;
+    }
+    throw error;
+  }
+};
+export const useZarr = function (_ref2) {
+  let {
+    url,
+    path
+  } = _ref2;
+  let s = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : GET_OPTIONS;
+  let opts = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  const {
+    data = null,
+    isLoading: isPending = false,
+    error: serverError = null
+  } = useQuery({
+    queryKey: ["zarr", url, path, s],
+    queryFn: () => fetchDataFromZarr(url, path, s, options),
+    retry: (failureCount, _ref3) => {
+      let {
+        error
+      } = _ref3;
+      if ([400, 401, 403, 404, 422].includes(error?.status)) return false;
+      return failureCount < 3;
+    },
+    ...opts
+  });
+  return {
+    data,
+    isPending,
+    serverError
+  };
+};
+const aggregateData = (inputs, data) => {
+  const dataObject = {};
+  inputs.forEach((input, index) => {
+    const key = input.key;
+    dataObject[key] = data?.[index];
+  });
+  return dataObject;
+};
+export const useMultipleZarr = function (inputs) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : GET_OPTIONS;
+  let opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  let agg = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : aggregateData;
+  const combine = useCallback(results => {
+    return {
+      data: agg(inputs, results.map(result => result.data)),
+      isLoading: results.some(result => result.isLoading),
+      serverError: results.find(result => result.error)
+    };
+  }, [agg, inputs]);
+  const {
+    data = null,
+    isLoading: isPending = false,
+    serverError = null
+  } = useQueries({
+    queries: inputs.map(input => ({
+      queryKey: ["zarr", input.url, input.path, input.s],
+      queryFn: () => fetchDataFromZarr(input.url, input.path, input.s, options),
+      retry: (failureCount, _ref4) => {
+        let {
+          error
+        } = _ref4;
+        if ([400, 401, 403, 404, 422].includes(error?.status)) return false;
+        return failureCount < 3;
+      },
+      ...opts
+    })),
+    combine
+  });
+  return {
+    data,
+    isPending,
+    serverError
+  };
+};

package/dist/esm/index.js

@@ -0,0 +1,22 @@
+export { Dotplot } from "./components/dotplot/Dotplot";
+export { DotplotControls } from "./components/dotplot/DotplotControls";
+export { Heatmap } from "./components/heatmap/Heatmap";
+export { HeatmapControls } from "./components/heatmap/HeatmapControls";
+export { Matrixplot } from "./components/matrixplot/Matrixplot";
+export { MatrixplotControls } from "./components/matrixplot/MatrixplotControls";
+export { ObsColsList } from "./components/obs-list/ObsList";
+export { ObsmKeysList } from "./components/obsm-list/ObsmList";
+export { Pseudospatial } from "./components/pseudospatial/Pseudospatial";
+export { Scatterplot } from "./components/scatterplot/Scatterplot";
+export { ScatterplotControls } from "./components/scatterplot/ScatterplotControls";
+export { SearchBar } from "./components/search-bar/SearchBar";
+export { VarNamesList } from "./components/var-list/VarList";
+export { Violin } from "./components/violin/Violin";
+export { ViolinControls } from "./components/violin/ViolinControls";
+export { FullPage, FullPagePlots, FullPageScatterplot } from "./components/full-page/FullPage";
+export { FullPagePseudospatial } from "./components/full-page/FullPagePseudospatial";
+export { OffcanvasControls, OffcanvasObs, OffcanvasObsm, OffcanvasVars } from "./components/offcanvas";
+export { COLORSCALES } from "./constants/colorscales";
+export { SELECTION_MODES, VIOLIN_MODES } from "./constants/constants";
+export { DatasetProvider } from "./context/DatasetContext";
+export { FilterProvider } from "./context/FilterContext";

package/dist/esm/utils/Filter.js

@@ -0,0 +1,147 @@
+import { useEffect, useCallback, useMemo } from "react";
+import { booleanPointInPolygon, point } from "@turf/turf";
+import _ from "lodash";
+import { COLOR_ENCODINGS, OBS_TYPES } from "../constants/constants";
+import { useDataset } from "../context/DatasetContext";
+import { useFilteredDataDispatch } from "../context/FilterContext";
+const EPSILON = 1e-6;
+const isInBins = (v, binEdges, indices) => {
+  const lastEdge = _.last(binEdges);
+  const allButLastEdges = _.initial(binEdges);
+  // add epsilon to last edge to include the last value
+  const modifiedBinEdges = [...allButLastEdges, [lastEdge[0], lastEdge[1] + EPSILON]];
+  const binIndices = _.difference(_.range(binEdges.length), indices);
+  const ranges = _.at(modifiedBinEdges, binIndices);
+  return _.some(ranges, range => _.inRange(v, ...range));
+};
+const isInPolygons = (polygons, positions, index) => {
+  if (!polygons?.length || !positions?.length) {
+    return false;
+  }
+  return _.some(polygons, (_f, i) => {
+    return booleanPointInPolygon(point([positions[index][0], positions[index][1]]), polygons[i]);
+  });
+};
+const isInValues = (omit, value) => {
+  if (!omit?.length) {
+    return true;
+  }
+  return !_.includes(omit, value);
+};
+export const useFilter = data => {
+  const dataset = useDataset();
+  const filterDataDispatch = useFilteredDataDispatch();
+  const {
+    obsmData,
+    xData,
+    obsData,
+    isPending,
+    serverError
+  } = data;
+  const isCategorical = dataset.selectedObs?.type === OBS_TYPES.CATEGORICAL || dataset.selectedObs?.type === OBS_TYPES.BOOLEAN;
+  const isContinuous = dataset.selectedObs?.type === OBS_TYPES.CONTINUOUS;
+  const sliceByObs = dataset.colorEncoding === COLOR_ENCODINGS.OBS && !!dataset.selectedObs?.omit.length || dataset.sliceBy.obs;
+  const isInObsSlice = useCallback((index, values) => {
+    let inSlice = true;
+    if (values && sliceByObs) {
+      if (isCategorical) {
+        inSlice &= isInValues(dataset.selectedObs?.omit, values[index]);
+      } else if (isContinuous) {
+        if (isNaN(values[index])) {
+          inSlice &= isInValues(dataset.selectedObs?.omit, -1);
+        } else {
+          inSlice &= isInBins(values[index], dataset.selectedObs.bins.binEdges, _.without(dataset.selectedObs.omit, -1));
+        }
+      }
+    }
+    return inSlice;
+  }, [dataset.selectedObs?.bins?.binEdges, dataset.selectedObs?.omit, isCategorical, isContinuous, sliceByObs]);
+  const isInPolygonsSlice = useCallback((index, positions) => {
+    let inSlice = true;
+    if (dataset.sliceBy.polygons && positions) {
+      inSlice &= isInPolygons(dataset.polygons[dataset.selectedObsm], positions, index);
+    }
+    return inSlice;
+  }, [dataset.polygons, dataset.selectedObsm, dataset.sliceBy.polygons]);
+  const isInSlice = useCallback((index, values, positions) => {
+    return isInObsSlice(index, values) && isInPolygonsSlice(index, positions);
+  }, [isInObsSlice, isInPolygonsSlice]);
+  const {
+    filteredIndices,
+    valueMin,
+    valueMax,
+    slicedLength
+  } = useMemo(() => {
+    if (isPending || serverError) {
+      return {
+        filteredIndices: null,
+        valueMin: null,
+        valueMax: null,
+        slicedLength: null
+      };
+    }
+    if (dataset.colorEncoding === COLOR_ENCODINGS.VAR) {
+      const {
+        filtered,
+        filteredIndices
+      } = _.reduce(xData.data, (acc, v, i) => {
+        if (isInSlice(i, obsData.data, obsmData.data)) {
+          acc.filtered.push(v);
+          acc.filteredIndices.add(i);
+        }
+        return acc;
+      }, {
+        filtered: [],
+        filteredIndices: new Set()
+      });
+      return {
+        filteredIndices: filteredIndices,
+        valueMin: _.min(filtered),
+        valueMax: _.max(filtered),
+        slicedLength: filtered.length
+      };
+    } else if (dataset.colorEncoding === COLOR_ENCODINGS.OBS) {
+      const {
+        filtered,
+        filteredIndices
+      } = _.reduce(obsData.data, (acc, v, i) => {
+        if (isInSlice(i, obsData.data, obsmData.data)) {
+          acc.filtered.push(v);
+          acc.filteredIndices.add(i);
+        }
+        return acc;
+      }, {
+        filtered: [],
+        filteredIndices: new Set()
+      });
+      return {
+        filteredIndices: filteredIndices,
+        valueMin: _.min(isContinuous ? filtered : obsData.data),
+        valueMax: _.max(isContinuous ? filtered : obsData.data),
+        slicedLength: filtered.length
+      };
+    } else {
+      return {
+        filteredIndices: null,
+        valueMin: _.min(obsData.data),
+        valueMax: _.max(obsData.data),
+        slicedLength: obsData.data?.length
+      };
+    }
+  }, [dataset.colorEncoding, isContinuous, isInSlice, isPending, obsData.data, obsmData.data, serverError, xData.data]);
+  const isSliced = sliceByObs || dataset.sliceBy.polygons;
+  // const isSliced = dataset.sliceBy.obs || dataset.sliceBy.polygons;
+
+  useEffect(() => {
+    if (!isPending && !serverError) {
+      filterDataDispatch({
+        type: "set.obs.indices",
+        indices: isSliced ? filteredIndices : null,
+        valueMin: valueMin,
+        valueMax: valueMax,
+        slicedLength: slicedLength,
+        isSliced: isSliced
+      });
+    }
+  }, [dataset.sliceBy.obs, dataset.sliceBy.polygons, filterDataDispatch, filteredIndices, isPending, isSliced, serverError, slicedLength, valueMax, valueMin]);
+};

package/dist/esm/utils/Histogram.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { SparkLineChart, mangoFusionPalette, blueberryTwilightPalette } from "@mui/x-charts";
+import _ from "lodash";
+import { LoadingLinear } from "./LoadingIndicators";
+import { formatNumerical, FORMATS } from "./string";
+export function Histogram(_ref) {
+  let {
+    data,
+    isPending,
+    altColor = false
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "feature-histogram-container"
+  }, isPending ? /*#__PURE__*/React.createElement(LoadingLinear, null) : data ? /*#__PURE__*/React.createElement("div", {
+    className: "feature-histogram m-1"
+  }, /*#__PURE__*/React.createElement(SparkLineChart, {
+    plotType: "bar",
+    data: data.log10,
+    margin: {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0
+    },
+    colors: altColor ? mangoFusionPalette : blueberryTwilightPalette,
+    showHighlight: true,
+    showTooltip: true,
+    valueFormatter: (v, _ref2) => {
+      let {
+        dataIndex
+      } = _ref2;
+      return `${formatNumerical(data.hist[dataIndex])}`;
+    },
+    xAxis: {
+      data: _.range(data.bin_edges?.length) || null,
+      valueFormatter: v => `Bin [${formatNumerical(data.bin_edges[v][0], FORMATS.EXPONENTIAL)}, ${formatNumerical(data.bin_edges[v][1], FORMATS.EXPONENTIAL)}${v === data.bin_edges.length - 1 ? "]" : ")"}`
+    },
+    slotProps: {
+      popper: {
+        className: "feature-histogram-tooltip"
+      }
+    }
+  })) : null);
+}

package/dist/esm/utils/ImageViewer.js

@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+import { Alert } from "react-bootstrap";
+export const ImageViewer = _ref => {
+  let {
+    src,
+    alt,
+    className = "img-fluid"
+  } = _ref;
+  const [error, setError] = useState(false);
+  const handleError = () => {
+    console.error("Error loading image from src:", src);
+    setError(true);
+  };
+  if (!error) {
+    return /*#__PURE__*/React.createElement("img", {
+      src: src,
+      alt: alt,
+      className: className,
+      loading: "lazy",
+      onError: handleError
+    });
+  } else {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Alert, {
+      variant: "danger"
+    }, "Failed to load image"));
+  }
+};

package/dist/esm/utils/Legend.js

@@ -0,0 +1,58 @@
+import React, { useMemo } from "react";
+import _ from "lodash";
+import { formatNumerical, FORMATS } from "./string";
+import { COLOR_ENCODINGS } from "../constants/constants";
+import { useDataset } from "../context/DatasetContext";
+import { rgbToHex, useColor } from "../helpers/color-helper";
+export function Legend(_ref) {
+  let {
+    isCategorical = false,
+    min = 0,
+    max = 1,
+    colorscale = null,
+    addText = ""
+  } = _ref;
+  const dataset = useDataset();
+  const {
+    getColor
+  } = useColor();
+  const spanList = useMemo(() => {
+    return _.range(100).map(i => {
+      var color = rgbToHex(getColor({
+        value: i / 100,
+        categorical: isCategorical,
+        colorscale: colorscale
+      }));
+      return /*#__PURE__*/React.createElement("span", {
+        key: i,
+        className: "grad-step",
+        style: {
+          backgroundColor: color
+        }
+      });
+    });
+  }, [colorscale, getColor, isCategorical]);
+  if (dataset.colorEncoding && !isCategorical) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "cherita-legend"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "gradient"
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "small m-0 p-0"
+    }, (dataset.colorEncoding === COLOR_ENCODINGS.VAR ? dataset.selectedVar?.name : dataset.selectedObs?.name) + addText), spanList, /*#__PURE__*/React.createElement("span", {
+      className: "domain-min"
+    }, formatNumerical(min, FORMATS.EXPONENTIAL)), /*#__PURE__*/React.createElement("span", {
+      className: "domain-med"
+    }, formatNumerical((min + max) * 0.5, FORMATS.EXPONENTIAL)), /*#__PURE__*/React.createElement("span", {
+      className: "domain-max"
+    }, formatNumerical(max, FORMATS.EXPONENTIAL))));
+  } else {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "cherita-legend"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "gradient"
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "small m-0 p-0"
+    }, dataset.colorEncoding === COLOR_ENCODINGS.OBS && dataset.selectedObs ? dataset.selectedObs.name : "")));
+  }
+}

package/dist/esm/utils/LoadingIndicators.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Box, CircularProgress, LinearProgress } from "@mui/material";
+export const LoadingSpinner = _ref => {
+  let {
+    text = null,
+    disableShrink = false
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "loading-spinner"
+  }, /*#__PURE__*/React.createElement(CircularProgress, {
+    disableShrink: disableShrink
+  }), text?.length && /*#__PURE__*/React.createElement("span", {
+    className: "visually-hidden"
+  }, text));
+};
+export const LoadingLinear = () => {
+  return /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      width: "100%"
+    }
+  }, /*#__PURE__*/React.createElement(LinearProgress, null));
+};

package/dist/esm/utils/Skeleton.js

@@ -0,0 +1,12 @@
+import { Button, Placeholder } from "react-bootstrap";
+export const ObsmKeysListBtn = () => {
+  return /*#__PURE__*/React.createElement(Placeholder, {
+    as: Button,
+    animation: "glow"
+  }, /*#__PURE__*/React.createElement(Placeholder, {
+    xs: 6,
+    style: {
+      width: "40px"
+    }
+  }));
+};

package/dist/esm/utils/VirtualizedList.js

@@ -0,0 +1,55 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useCallback, useEffect, useState } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+export function VirtualizedList(_ref) {
+  let {
+    getDataAtIndex,
+    count,
+    ItemComponent,
+    estimateSize = 45,
+    overscan = 25,
+    maxHeight = "80vh",
+    ...props
+  } = _ref;
+  const [parentNode, setParentNode] = useState(null);
+  const itemVirtualizer = useVirtualizer({
+    count: count,
+    getScrollElement: () => parentNode,
+    estimateSize: () => estimateSize,
+    overscan: overscan
+  });
+  const refCallback = useCallback(node => {
+    setParentNode(node);
+  }, []);
+  const virtualItems = itemVirtualizer.getVirtualItems();
+  useEffect(() => {
+    itemVirtualizer.measure();
+  }, [itemVirtualizer, parentNode?.clientHeight, getDataAtIndex]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: refCallback,
+    style: {
+      overflowY: "auto",
+      maxHeight: maxHeight
+    },
+    className: "modern-scrollbars"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: `${itemVirtualizer.getTotalSize()}px`,
+      width: "100%",
+      position: "relative",
+      willChange: "transform"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      transform: `translateY(${virtualItems[0]?.start ?? 0}px)`
+    }
+  }, virtualItems.map(virtualItem => /*#__PURE__*/React.createElement("div", {
+    key: virtualItem.key,
+    "data-index": virtualItem.index,
+    ref: itemVirtualizer.measureElement
+  }, /*#__PURE__*/React.createElement(ItemComponent, _extends({}, getDataAtIndex(virtualItem.index), props)))))));
+}

package/dist/esm/utils/errors.js

@@ -0,0 +1,47 @@
+export const parseError = err => {
+  if (err === DOMException.TIMEOUT_ERR) {
+    return {
+      message: "Timeout error",
+      name: err
+    };
+  }
+  switch (err?.name) {
+    case "TypeError":
+      return {
+        ...err,
+        message: "Failed to fetch data from server"
+      };
+    case "ReadZarrError":
+      return {
+        ...err,
+        message: "Failed to read AnnData-Zarr"
+      };
+    case "InvalidObs":
+      return {
+        ...err,
+        message: "Observation not found in dataset"
+      };
+    case "InvalidVar":
+      return {
+        ...err,
+        message: "Feature not found in dataset"
+      };
+    case "InvalidKey":
+      return {
+        ...err,
+        message: "Key not found in datset"
+      };
+    case "BadRequest":
+      return {
+        ...err,
+        message: "Invalid request to server"
+      };
+    case "InternalServerError":
+      return {
+        ...err,
+        message: "Server error"
+      };
+    default:
+      return err;
+  }
+};