@haniffalab/cherita-react 1.0.0-dev.2025-03-13.bda9e1a6 → 1.0.0-dev.2025-03-13.274a553c

package/dist/esm/components/violin/ViolinControls.js

@@ -0,0 +1,24 @@
+import React from "react";
+import _ from "lodash";
+import { Dropdown, ButtonGroup, ButtonToolbar, InputGroup } from "react-bootstrap";
+import { VIOLINPLOT_SCALES } from "../../constants/constants";
+import { useDataset, useDatasetDispatch } from "../../context/DatasetContext";
+export function ViolinControls() {
+  const dataset = useDataset();
+  const dispatch = useDatasetDispatch();
+  const scaleList = _.values(VIOLINPLOT_SCALES).map(scale => /*#__PURE__*/React.createElement(Dropdown.Item, {
+    key: scale.value,
+    active: dataset.controls.scale.violinplot === scale,
+    onClick: () => {
+      dispatch({
+        type: "set.controls.scale",
+        plot: "violinplot",
+        scale: scale
+      });
+    }
+  }, scale.name));
+  return /*#__PURE__*/React.createElement(ButtonToolbar, null, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(InputGroup, null, /*#__PURE__*/React.createElement(InputGroup.Text, null, "Scale"), /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.Toggle, {
+    id: "dropdownStandardScale",
+    variant: "light"
+  }, dataset.controls.scale.violinplot.name), /*#__PURE__*/React.createElement(Dropdown.Menu, null, scaleList)))));
+}

package/dist/esm/constants/colorscales.js

@@ -0,0 +1,22 @@
+// From plotly https://github.com/plotly/plotly.js/blob/5bc25b490702e5ed61265207833dbd58e8ab27f1/src/components/colorscale/scales.js
+export const COLORSCALES = {
+  Greys: ["#000000", "#ffffff"],
+  YlGnBu: ["#081d58", "#253494", "#225ea8", "#1d91c0", "#41b6c4", "#7fcdbb", "#c7e9b4", "#edf8d9", "#ffffd9"],
+  Greens: ["#00441b", "#006d2c", "#238b45", "#41ab5d", "#74c476", "#a1d9a5", "#c7e9c0", "#e5f5e0", "#f7fcf5"],
+  YlOrRd: ["#800026", "#bd0026", "#e31a1c", "#fc4e2a", "#fd8d3c", "#feb24c", "#fed976", "#ffed9f", "#ffffcc"],
+  Bluered: ["#0000ff", "#ff0000"],
+  RdBu: ["#050aac", "#6a89f7", "#bebebe", "#dcaa84", "#e6915a", "#b20a1c"],
+  Reds: ["#dcdcdc", "#f5c39d", "#f5a069", "#b20a1c"],
+  Blues: ["#050aac", "#283cba", "#4664f5", "#5a78f5", "#6a89f7", "#dcdcdc"],
+  Picnic: ["#0000ff", "#3399ff", "#66ccff", "#99ccff", "#ccccff", "#ffffff", "#ffccff", "#ff99ff", "#ff66cc", "#ff6666", "#ff0000"],
+  Rainbow: ["#96005a", "#0000c8", "#0019ff", "#0098ff", "#2cff96", "#97ff00", "#ffe600", "#ff6f00", "#ff0000"],
+  Portland: ["#0c3383", "#0a88ba", "#f2d338", "#f28f38", "#d91e1e"],
+  Jet: ["#000083", "#003caa", "#05ffff", "#ffff00", "#fa0000", "#800000"],
+  Hot: ["#000000", "#e60000", "#ffd200", "#ffffff"],
+  Blackbody: ["#000000", "#e60000", "#e6d200", "#ffffff", "#a0c8ff"],
+  Earth: ["#000082", "#00b4b4", "#28d228", "#e6e632", "#784614", "#ffffff"],
+  Electric: ["#000000", "#1e0064", "#780064", "#a05a00", "#e6c800", "#fffadc"],
+  Viridis: ["#440154", "#48186a", "#472d7b", "#424086", "#3b528b", "#33638d", "#2c728e", "#26828e", "#21918c", "#1fa088", "#28ae80", "#3fbc73", "#5ec962", "#84d44b", "#addc30", "#d8e219", "#fde725"],
+  Cividis: ["#00204c", "#002a66", "#00346e", "#273f6c", "#3c4a6c", "#4c556b", "#5b5f6d", "#686a70", "#757575", "#838178", "#929c78", "#a19676", "#b0a572", "#c0af6d", "#d1ba65", "#e1c75c", "#f3db4f", "#ffe945"],
+  Accent: ["#7fc97f", "#beaed4", "#fdc086", "#ffff99", "#386cb0", "#f0027f", "#bf5b17", "#666666"]
+};

package/dist/esm/constants/constants.js

@@ -0,0 +1,84 @@
+export const LOCAL_STORAGE_KEY = "CHERITA";
+export const COLOR_ENCODINGS = {
+  VAR: "var",
+  OBS: "obs"
+};
+export const OBS_TYPES = {
+  CATEGORICAL: "categorical",
+  DISCRETE: "discrete",
+  CONTINUOUS: "continuous",
+  BOOLEAN: "boolean"
+};
+export const VAR_SORT = {
+  NONE: null,
+  NAME: "name",
+  MATRIX: "matrix"
+};
+export const VAR_SORT_ORDER = {
+  ASC: "asc",
+  DESC: "desc"
+};
+export const SELECTED_POLYGON_FILLCOLOR = [107, 170, 209, 255 / 2];
+export const UNSELECTED_POLYGON_FILLCOLOR = [167, 191, 211, 255 / 3];
+export const SELECTION_MODES = {
+  SINGLE: "single",
+  MULTIPLE: "multiple"
+};
+export const VIOLIN_MODES = {
+  MULTIKEY: "multikey",
+  GROUPBY: "groupby"
+};
+export const MATRIXPLOT_SCALES = {
+  NONE: {
+    value: null,
+    name: "None"
+  },
+  GROUP: {
+    value: "group",
+    name: "Group"
+  },
+  VAR: {
+    value: "var",
+    name: "Var"
+  }
+};
+export const DOTPLOT_SCALES = {
+  NONE: {
+    value: null,
+    name: "None"
+  },
+  GROUP: {
+    value: "group",
+    name: "Group"
+  },
+  VAR: {
+    value: "var",
+    name: "Var"
+  }
+};
+export const VIOLINPLOT_SCALES = {
+  WIDTH: {
+    value: "width",
+    name: "Width"
+  },
+  COUNT: {
+    value: "count",
+    name: "Count"
+  }
+};
+export const PSEUDOSPATIAL_PLOT_TYPES = {
+  GENE: "gene",
+  CATEGORICAL: "categorical",
+  CONTINUOUS: "continuous",
+  MASKS: "masks"
+};
+export const PSEUDOSPATIAL_CATEGORICAL_MODES = {
+  ACROSS: {
+    value: "across",
+    name: "% across sections"
+  },
+  WITHIN: {
+    value: "within",
+    name: "% within section"
+  }
+};

package/dist/esm/context/DatasetContext.js

@@ -0,0 +1,572 @@
+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
+    }
+  },
+  obsCols: null,
+  // @TODO: implement specifying groups/categories for dropdowns
+  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);
+      }
+  }
+}