@haniffalab/cherita-react 1.0.0-dev.2025-03-13.bda9e1a6 → 1.0.0-dev.2025-03-24.e68f9e22

package/dist/esm/context/FilterContext.js

@@ -0,0 +1,48 @@
+import React, { useReducer, createContext, useContext } from "react";
+export const FilteredDataContext = /*#__PURE__*/createContext(null);
+export const FilteredDataDispatchContext = /*#__PURE__*/createContext(null);
+const initialFilterData = {
+  obsIndices: null,
+  valueMin: null,
+  valueMax: null,
+  slicedLength: null,
+  isSliced: false
+};
+export function FilterProvider(_ref) {
+  let {
+    children
+  } = _ref;
+  const [filteredData, dispatch] = useReducer(filterReducer, {
+    ...initialFilterData
+  });
+  return /*#__PURE__*/React.createElement(FilteredDataContext.Provider, {
+    value: filteredData
+  }, /*#__PURE__*/React.createElement(FilteredDataDispatchContext.Provider, {
+    value: dispatch
+  }, children));
+}
+export function useFilteredData() {
+  return useContext(FilteredDataContext);
+}
+export function useFilteredDataDispatch() {
+  return useContext(FilteredDataDispatchContext);
+}
+function filterReducer(filteredData, action) {
+  switch (action.type) {
+    case "set.obs.indices":
+      {
+        return {
+          ...filteredData,
+          obsIndices: action.indices,
+          valueMin: action.valueMin,
+          valueMax: action.valueMax,
+          slicedLength: action.slicedLength,
+          isSliced: action.isSliced
+        };
+      }
+    default:
+      {
+        throw Error("Unknown action: " + action.type);
+      }
+  }
+}

package/dist/esm/context/ZarrDataContext.js

@@ -0,0 +1,26 @@
+import React, { createContext, useContext } from "react";
+import { useFilter } from "../utils/Filter";
+import { useObsData, useObsmData, useXData } from "../utils/zarrData";
+const ZarrDataContext = /*#__PURE__*/createContext(null);
+export function ZarrDataProvider(_ref) {
+  let {
+    children
+  } = _ref;
+  const obsmData = useObsmData();
+  const obsData = useObsData();
+  const xData = useXData();
+  const data = {
+    obsmData: obsmData,
+    obsData: obsData,
+    xData: xData,
+    isPending: obsmData.isPending || obsData.isPending || xData.isPending,
+    serverError: obsmData.serverError || obsData.serverError || xData.serverError
+  };
+  useFilter(data);
+  return /*#__PURE__*/React.createElement(ZarrDataContext.Provider, {
+    value: data
+  }, children);
+}
+export function useZarrData() {
+  return useContext(ZarrDataContext);
+}

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

@@ -0,0 +1,66 @@
+import { useCallback } from "react";
+import { COLORSCALES } from "../constants/colorscales";
+import { useDataset } from "../context/DatasetContext";
+const GRAY = [214, 212, 212];
+const parseHexColor = color => {
+  const r = parseInt(color?.substring(1, 3), 16);
+  const g = parseInt(color?.substring(3, 5), 16);
+  const b = parseInt(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 || 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);
+};
+export const rgbToHex = color => {
+  const [r, g, b] = color || [0, 0, 0, 0];
+  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+};
+export const useColor = () => {
+  const dataset = useDataset();
+  const getColor = useCallback(_ref => {
+    let {
+      value,
+      categorical = false,
+      grayOut = false,
+      grayParams: {
+        alpha = 0.75,
+        gray = 0.95
+      } = {},
+      colorEncoding = dataset.colorEncoding,
+      colorscale = null
+    } = _ref;
+    const colormap = colorscale || 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.controls.colorScale]);
+  return {
+    getColor
+  };
+};

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,129 @@
+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 {
+    enabled = true
+  } = opts;
+  const {
+    data = null,
+    isPending = false,
+    error: serverError = null
+  } = useQuery({
+    queryKey: ["zarr", url, path, s],
+    queryFn: () => {
+      if (enabled) {
+        return fetchDataFromZarr(url, path, s, options);
+      } else {
+        return;
+      }
+    },
+    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 {
+    enabled = true
+  } = opts;
+  const combine = useCallback(results => {
+    return {
+      data: agg(inputs, results.map(result => result.data)),
+      isPending: results.some(result => result.isPending),
+      serverError: results.find(result => result.error)
+    };
+  }, [agg, inputs]);
+  const {
+    data = null,
+    isPending = false,
+    serverError = null
+  } = useQueries({
+    queries: inputs.map(input => ({
+      queryKey: ["zarr", input.url, input.path, input.s],
+      queryFn: () => {
+        if (enabled) {
+          return fetchDataFromZarr(input.url, input.path, input.s, options);
+        } else {
+          return;
+        }
+      },
+      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));
+};