@haniffalab/cherita-react 1.0.0 → 1.1.0

package/dist/esm/context/DatasetContext.js

@@ -0,0 +1,571 @@
+import React, { useEffect, createContext, useContext, useReducer } from "react";
+import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
+import { QueryClient, QueryCache } from "@tanstack/react-query";
+import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
+import _ from "lodash";
+import { FilterProvider } from "./FilterContext";
+import { ZarrDataProvider } from "./ZarrDataContext";
+import { COLOR_ENCODINGS, DOTPLOT_SCALES, LOCAL_STORAGE_KEY, MATRIXPLOT_SCALES, OBS_TYPES, PSEUDOSPATIAL_CATEGORICAL_MODES, VAR_SORT, VAR_SORT_ORDER, VIOLINPLOT_SCALES } from "../constants/constants";
+export const DatasetContext = /*#__PURE__*/createContext(null);
+export const DatasetDispatchContext = /*#__PURE__*/createContext(null);
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      gcTime: 1000 * 60 * 15,
+      // garbage collect after 15min of inactive
+      staleTime: 1000 * 60 * 60,
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+      refetchOnWindowFocus: false
+    }
+  },
+  queryCache: new QueryCache({
+    onError: error => {
+      console.error(error);
+    }
+  })
+});
+// Type of queries to store responses
+const persistKeys = ["obs/cols", "var/names", "obsm/keys", "obs/bins", "obs/distribution"];
+const persistOptions = {
+  persister: createSyncStoragePersister({
+    storage: window.localStorage
+  }),
+  dehydrateOptions: {
+    shouldDehydrateQuery: _ref => {
+      let {
+        queryKey,
+        state
+      } = _ref;
+      if (state.status === "success") {
+        return persistKeys.includes(queryKey?.[0]);
+      }
+      return false;
+    }
+  }
+  // @TODO: add maxAge and buster (app and api version numbers as busters)
+};
+const initialDataset = {
+  varNamesCol: null,
+  selectedObs: null,
+  selectedObsm: null,
+  selectedVar: null,
+  selectedMultiObs: [],
+  selectedMultiVar: [],
+  colorEncoding: null,
+  labelObs: [],
+  varSets: [],
+  sliceBy: {
+    obs: false,
+    polygons: false
+  },
+  controls: {
+    colorScale: "Viridis",
+    valueRange: [0, 1],
+    range: [0, 1],
+    colorAxis: {
+      dmin: 0,
+      dmax: 1,
+      cmin: 0,
+      cmax: 1
+    },
+    scale: {
+      dotplot: DOTPLOT_SCALES.NONE,
+      matrixplot: MATRIXPLOT_SCALES.NONE,
+      violinplot: VIOLINPLOT_SCALES.WIDTH
+    },
+    meanOnlyExpressed: false,
+    expressionCutoff: 0.0
+  },
+  diseaseDatasets: [],
+  selectedDisease: null,
+  varSort: {
+    var: {
+      sort: VAR_SORT.NONE,
+      sortOrder: VAR_SORT_ORDER.ASC
+    },
+    disease: {
+      sort: VAR_SORT.NONE,
+      sortOrder: VAR_SORT_ORDER.ASC
+    }
+  },
+  obsGroups: null,
+  imageUrl: null,
+  pseudospatial: {
+    maskSet: null,
+    maskValues: null,
+    categoricalMode: PSEUDOSPATIAL_CATEGORICAL_MODES.ACROSS.value
+  },
+  polygons: {}
+};
+const initializer = initialState => {
+  const localObj = (JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)) || {})[initialState.url] || {};
+  const keys = _.keys(initialState);
+  const localValues = _.pick(localObj, keys);
+  return _.assign(initialState, localValues);
+};
+export function DatasetProvider(_ref2) {
+  let {
+    dataset_url,
+    children,
+    ...dataset_params
+  } = _ref2;
+  const [dataset, dispatch] = useReducer(datasetReducer, _.assign(initializer({
+    url: dataset_url,
+    ...initialDataset
+  }), dataset_params));
+  useEffect(() => {
+    try {
+      const localObj = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)) || {};
+      localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify({
+        ...localObj,
+        [dataset.url]: dataset
+      }));
+    } catch (err) {
+      if (err.code === 22 || err.code === 1014 || err.name === "QuotaExceededError" || err.name === "NS_ERROR_DOM_QUOTA_REACHED") {
+        console.err("Browser storage quota exceeded");
+      } else {
+        console.err(err);
+      }
+    }
+  }, [dataset]);
+  return /*#__PURE__*/React.createElement(DatasetContext.Provider, {
+    value: dataset
+  }, /*#__PURE__*/React.createElement(DatasetDispatchContext.Provider, {
+    value: dispatch
+  }, /*#__PURE__*/React.createElement(PersistQueryClientProvider, {
+    client: queryClient,
+    persistOptions: persistOptions
+  }, /*#__PURE__*/React.createElement(FilterProvider, null, /*#__PURE__*/React.createElement(ZarrDataProvider, null, children)))));
+}
+export function useDataset() {
+  return useContext(DatasetContext);
+}
+export function useDatasetDispatch() {
+  return useContext(DatasetDispatchContext);
+}
+function datasetReducer(dataset, action) {
+  switch (action.type) {
+    case "select.obs":
+      {
+        return {
+          ...dataset,
+          selectedObs: action.obs,
+          controls: {
+            ...dataset.controls,
+            range: action.obs?.type === OBS_TYPES.CATEGORICAL ? [0, 1] : dataset.controls.range
+          },
+          colorEncoding: dataset.colorEncoding === COLOR_ENCODINGS.OBS && !action.obs ? null : dataset.colorEncoding,
+          sliceBy: {
+            ...dataset.sliceBy,
+            obs: action.obs ? dataset.sliceBy.obs : false
+          }
+        };
+      }
+    case "select.obsm":
+      {
+        return {
+          ...dataset,
+          selectedObsm: action.obsm
+        };
+      }
+    case "select.var":
+      {
+        return {
+          ...dataset,
+          selectedVar: action.var
+        };
+      }
+    case "select.multivar":
+      {
+        if (dataset.selectedMultiVar.find(i => action.var.isSet ? i.name === action.var.name : i.matrix_index === action.var.matrix_index)) {
+          return dataset;
+        } else {
+          return {
+            ...dataset,
+            selectedMultiVar: [...dataset.selectedMultiVar, action.var]
+          };
+        }
+      }
+    case "deselect.multivar":
+      {
+        return {
+          ...dataset,
+          selectedMultiVar: dataset.selectedMultiVar.filter(a => action.var.isSet ? a.name !== action.var.name : a.matrix_index !== action.var.matrix_index)
+        };
+      }
+    case "update.multivar":
+      {
+        return {
+          ...dataset,
+          selelectedMultiVar: dataset.selectedMultiVar.map(i => {
+            if (i.isSet) {
+              return action.vars.find(s => s.name === i.name);
+            }
+            return i;
+          })
+        };
+      }
+    case "set.colorEncoding":
+      {
+        return {
+          ...dataset,
+          colorEncoding: action.value
+        };
+      }
+    case "reset.multiVar":
+      {
+        return {
+          ...dataset,
+          selectedMultiVar: [],
+          colorEncoding: dataset.colorEncoding === COLOR_ENCODINGS.VAR ? null : dataset.colorEncoding
+        };
+      }
+    case "reset.var":
+      {
+        return {
+          ...dataset,
+          selectedVar: null,
+          colorEncoding: dataset.colorEncoding === COLOR_ENCODINGS.VAR ? null : dataset.colorEncoding
+        };
+      }
+    case "add.varSet":
+      {
+        return {
+          ...dataset,
+          varSets: [...dataset.varSets, action.varSet]
+        };
+      }
+    case "remove.varSet":
+      {
+        return {
+          ...dataset,
+          varSets: dataset.varSets.filter(a => a.name !== action.varSet.name)
+        };
+      }
+    case "reset.varSets":
+      {
+        return {
+          ...dataset,
+          varSets: []
+        };
+      }
+    case "add.varSet.var":
+      {
+        const varSet = dataset.varSets.find(s => s.name === action.varSet.name);
+        if (varSet.vars.find(v => _.isEqual(v, action.var))) {
+          return dataset;
+        } else {
+          return {
+            ...dataset,
+            varSets: dataset.varSets.map(s => {
+              if (s.name === varSet.name) {
+                return {
+                  ...s,
+                  vars: [...s.vars, action.var]
+                };
+              } else {
+                return s;
+              }
+            })
+          };
+        }
+      }
+    case "remove.varSet.var":
+      {
+        const varSet = dataset.varSets.find(s => s.name === action.varSet.name);
+        return {
+          ...dataset,
+          varSets: dataset.varSets.map(s => {
+            if (s.name === varSet.name) {
+              return {
+                ...s,
+                vars: s.vars.filter(v => v.name !== action.var.name)
+              };
+            } else {
+              return s;
+            }
+          })
+        };
+      }
+    case "select.disease":
+      {
+        return {
+          ...dataset,
+          selectedDisease: {
+            id: action.id,
+            name: action.name
+          }
+        };
+      }
+    case "reset.disease":
+      {
+        return {
+          ...dataset,
+          selectedDisease: null
+        };
+      }
+    case "set.controls.colorScale":
+      {
+        return {
+          ...dataset,
+          controls: {
+            ...dataset.controls,
+            colorScale: action.colorScale
+          }
+        };
+      }
+    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 {
+          ...dataset,
+          controls: {
+            ...dataset.controls,
+            colorAxis: action.colorAxis
+          }
+        };
+      }
+    case "set.controls.colorAxis.crange":
+      {
+        return {
+          ...dataset,
+          controls: {
+            ...dataset.controls,
+            colorAxis: {
+              ...dataset.controls.colorAxis,
+              cmin: action.cmin,
+              cmax: action.cmax
+            }
+          }
+        };
+      }
+    case "set.controls.colorAxis.cmin":
+      {
+        return {
+          ...dataset,
+          controls: {
+            ...dataset.controls,
+            colorAxis: {
+              ...dataset.controls.colorAxis,
+              cmin: action.cmin
+            }
+          }
+        };
+      }
+    case "set.controls.colorAxis.cmax":
+      {
+        return {
+          ...dataset,
+          controls: {
+            ...dataset.controls,
+            colorAxis: {
+              ...dataset.controls.colorAxis,
+              cmax: action.cmax
+            }
+          }
+        };
+      }
+    case "set.controls.scale":
+      {
+        return {
+          ...dataset,
+          controls: {
+            ...dataset.controls,
+            scale: {
+              ...dataset.controls.scale,
+              [action.plot]: action.scale
+            }
+          }
+        };
+      }
+    case "set.controls.meanOnlyExpressed":
+      {
+        return {
+          ...dataset,
+          controls: {
+            ...dataset.controls,
+            meanOnlyExpressed: action.meanOnlyExpressed
+          }
+        };
+      }
+    case "set.controls.expressionCutoff":
+      {
+        return {
+          ...dataset,
+          controls: {
+            ...dataset.controls,
+            expressionCutoff: action.expressionCutoff
+          }
+        };
+      }
+    case "toggle.slice.obs":
+      {
+        if (_.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 => _.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: []
+        };
+      }
+    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
+            }
+          }
+        };
+      }
+    case "set.polygons":
+      {
+        return {
+          ...dataset,
+          polygons: {
+            ...dataset.polygons,
+            [action.obsm]: action.polygons
+          }
+        };
+      }
+    case "set.pseudospatial.maskSet":
+      {
+        return {
+          ...dataset,
+          pseudospatial: {
+            ...dataset.pseudospatial,
+            maskSet: action.maskSet
+          }
+        };
+      }
+    case "set.pseudospatial.maskValues":
+      {
+        return {
+          ...dataset,
+          pseudospatial: {
+            ...dataset.pseudospatial,
+            maskValues: action.maskValues
+          }
+        };
+      }
+    case "set.pseudospatial.categoricalMode":
+      {
+        return {
+          ...dataset,
+          pseudospatial: {
+            ...dataset.pseudospatial,
+            categoricalMode: action.categoricalMode
+          }
+        };
+      }
+    default:
+      {
+        throw Error("Unknown action: " + action.type);
+      }
+  }
+}

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
+  };
+};