@haniffalab/cherita-react 1.0.0 → 1.1.0

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

@@ -0,0 +1,141 @@
+import React, { useEffect, useState } from "react";
+import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import _ from "lodash";
+import { Alert, OverlayTrigger, Tooltip } from "react-bootstrap";
+import Plot from "react-plotly.js";
+import { VIOLIN_MODES } from "../../constants/constants";
+import { useDataset } from "../../context/DatasetContext";
+import { useFilteredData } from "../../context/FilterContext";
+import { LoadingSpinner } from "../../utils/LoadingIndicators";
+import { useDebouncedFetch } from "../../utils/requests";
+export function Violin(_ref) {
+  let {
+    mode = VIOLIN_MODES.MULTIKEY
+  } = _ref;
+  const ENDPOINT = "violin";
+  const dataset = useDataset();
+  const {
+    obsIndices,
+    isSliced
+  } = useFilteredData();
+  const [data, setData] = useState([]);
+  const [layout, setLayout] = useState({});
+  const [hasSelections, setHasSelections] = useState(false);
+  const [params, setParams] = useState({
+    url: dataset.url,
+    mode: mode,
+    scale: dataset.controls.scale.violinplot.value,
+    varNamesCol: dataset.varNamesCol,
+    ...{
+      [VIOLIN_MODES.MULTIKEY]: {
+        varKeys: dataset.selectedMultiVar.map(i => i.isSet ? {
+          name: i.name,
+          indices: i.vars.map(v => v.index)
+        } : i.index),
+        obsKeys: [] // @TODO: implement
+      },
+      [VIOLIN_MODES.GROUPBY]: {
+        varKey: dataset.selectedVar?.isSet ? {
+          name: dataset.selectedVar?.name,
+          indices: dataset.selectedVar?.vars.map(v => v.index)
+        } : dataset.selectedVar?.index,
+        obsCol: dataset.selectedObs,
+        obsValues: !dataset.selectedObs?.omit.length ? null : _.difference(_.values(dataset.selectedObs?.codes), dataset.selectedObs?.omit).map(c => dataset.selectedObs?.codesMap[c]),
+        obsIndices: isSliced ? [...(obsIndices || [])] : null
+      }
+    }[mode]
+  });
+  // @TODO: set default scale
+
+  useEffect(() => {
+    if (mode === VIOLIN_MODES.MULTIKEY) {
+      if (dataset.selectedMultiVar.length) {
+        setHasSelections(true);
+      } else {
+        setHasSelections(false);
+      }
+      setParams(p => {
+        return {
+          ...p,
+          url: dataset.url,
+          mode: mode,
+          varKeys: dataset.selectedMultiVar.map(i => i.isSet ? {
+            name: i.name,
+            indices: i.vars.map(v => v.index)
+          } : i.index),
+          scale: dataset.controls.scale.violinplot.value,
+          varNamesCol: dataset.varNamesCol
+        };
+      });
+    } else if (mode === VIOLIN_MODES.GROUPBY) {
+      if (dataset.selectedObs && dataset.selectedVar) {
+        setHasSelections(true);
+      } else {
+        setHasSelections(false);
+      }
+      setParams(p => {
+        return {
+          ...p,
+          url: dataset.url,
+          mode: mode,
+          varKey: dataset.selectedVar?.isSet ? {
+            name: dataset.selectedVar?.name,
+            indices: dataset.selectedVar?.vars.map(v => v.index)
+          } : dataset.selectedVar?.index,
+          obsCol: dataset.selectedObs,
+          obsValues: !dataset.selectedObs?.omit.length ? null : _.difference(_.values(dataset.selectedObs?.codes), dataset.selectedObs?.omit).map(c => dataset.selectedObs?.codesMap[c]),
+          obsIndices: isSliced ? [...(obsIndices || [])] : null,
+          scale: dataset.controls.scale.violinplot.value,
+          varNamesCol: dataset.varNamesCol
+        };
+      });
+    }
+  }, [dataset.controls.scale.violinplot.value, dataset.selectedMultiVar, dataset.selectedObs, dataset.selectedVar, dataset.url, dataset.varNamesCol, obsIndices, isSliced, mode]);
+  const {
+    fetchedData,
+    isPending,
+    serverError
+  } = useDebouncedFetch(ENDPOINT, params, 500, {
+    enabled: mode === VIOLIN_MODES.MULTIKEY && (!!params.varKeys.length || !!params.obsKeys.length) || mode === VIOLIN_MODES.GROUPBY && !!params.varKey && !!params.obsCol
+  });
+  useEffect(() => {
+    if (hasSelections && !isPending && !serverError) {
+      setData(fetchedData.data);
+      setLayout(fetchedData.layout);
+    }
+  }, [fetchedData, hasSelections, isPending, serverError]);
+  if (!serverError) {
+    if (hasSelections) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "cherita-violin position-relative"
+      }, isPending && /*#__PURE__*/React.createElement(LoadingSpinner, null), /*#__PURE__*/React.createElement(Plot, {
+        data: data,
+        layout: layout,
+        useResizeHandler: true,
+        style: {
+          maxWidth: "100%",
+          maxHeight: "100%"
+        }
+      }), fetchedData?.resampled && /*#__PURE__*/React.createElement(Alert, {
+        variant: "warning"
+      }, /*#__PURE__*/React.createElement("b", null, "Warning:"), " For performance reasons this plot was generated with resampled data. It will not be exactly the same as one produced with the entire dataset. \xA0", /*#__PURE__*/React.createElement(OverlayTrigger, {
+        placement: "top",
+        overlay: /*#__PURE__*/React.createElement(Tooltip, null, "Resampled to 100K values following a Monte Carlo style approach to help ensure resampled data is a good representation of the original dataset's distribution.")
+      }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+        icon: faCircleInfo
+      }))));
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: "cherita-violin"
+    }, mode === VIOLIN_MODES.MULTIKEY && /*#__PURE__*/React.createElement(Alert, {
+      variant: "light"
+    }, "Select features"), mode === VIOLIN_MODES.GROUPBY && /*#__PURE__*/React.createElement(Alert, {
+      variant: "light"
+    }, "Select categories and a feature"));
+  } else {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Alert, {
+      variant: "danger"
+    }, serverError.message));
+  }
+}

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,88 @@
+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"
+  }
+};
+
+// `default` cols to be shown out of accordion, at top of obslist
+// default values from cellxgene schema
+export const DEFAULT_OBS_GROUP = ["assay", "cell_type", "development_stage", "disease", "donor_id", "organism", "self_reported_ethnicity", "sex", "suspension_type", "tissue", "tissue_type"];