@haniffalab/cherita-react 1.0.0 → 1.1.0

package/dist/esm/components/pseudospatial/Pseudospatial.js

@@ -0,0 +1,228 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faSliders } from "@fortawesome/free-solid-svg-icons";
+import _ from "lodash";
+import { Alert } from "react-bootstrap";
+import Plot from "react-plotly.js";
+import { COLOR_ENCODINGS, OBS_TYPES, PSEUDOSPATIAL_PLOT_TYPES as PLOT_TYPES } from "../../constants/constants";
+import { useDataset } from "../../context/DatasetContext";
+import { useFilteredData } from "../../context/FilterContext";
+import { rgbToHex, useColor } from "../../helpers/color-helper";
+import { ImageViewer } from "../../utils/ImageViewer";
+import { Legend } from "../../utils/Legend";
+import { LoadingSpinner } from "../../utils/LoadingIndicators";
+import { useDebouncedFetch } from "../../utils/requests";
+library.add(faSliders);
+function usePseudospatialData(plotType) {
+  const ENDPOINT = "pseudospatial";
+  const dataset = useDataset();
+  const {
+    obsIndices,
+    isSliced
+  } = useFilteredData();
+  const baseParams = useMemo(() => {
+    return {
+      url: dataset.url,
+      maskSet: dataset.pseudospatial.maskSet,
+      maskValues: dataset.pseudospatial.maskValues,
+      obsIndices: isSliced ? [...(obsIndices || [])] : null,
+      varNamesCol: dataset.varNamesCol,
+      showColorbar: false,
+      format: "json"
+    };
+  }, [dataset.url, dataset.pseudospatial.maskSet, dataset.pseudospatial.maskValues, dataset.varNamesCol, isSliced, obsIndices]);
+  const getPlotParams = useCallback(() => {
+    if (plotType === PLOT_TYPES.GENE) {
+      return {
+        varKey: dataset.selectedVar?.isSet ? {
+          name: dataset.selectedVar?.name,
+          indices: dataset.selectedVar?.vars.map(v => v.index)
+        } : dataset.selectedVar?.index,
+        ...(dataset.sliceBy.obs ? {
+          obsCol: dataset.selectedObs,
+          obsValues: !dataset.selectedObs?.omit.length ? null : _.difference(_.values(dataset.selectedObs?.codes), dataset.selectedObs?.omit).map(c => dataset.selectedObs?.codesMap[c])
+        } : {})
+      };
+    } else if (plotType === PLOT_TYPES.CATEGORICAL) {
+      return {
+        obsCol: dataset.selectedObs,
+        obsValues: !dataset.selectedObs?.omit.length ? null : _.difference(_.values(dataset.selectedObs?.codes), dataset.selectedObs?.omit).map(c => dataset.selectedObs?.codesMap[c]),
+        mode: dataset.pseudospatial.categoricalMode
+      };
+    } else if (plotType === "continuous") {
+      return {
+        obsCol: dataset.selectedObs,
+        obsValues: !dataset.selectedObs?.omit.length ? null : _.difference(_.values(dataset.selectedObs?.codes), dataset.selectedObs?.omit).map(c => dataset.selectedObs?.codesMap[c])
+      };
+    }
+  }, [dataset.pseudospatial.categoricalMode, dataset.selectedObs, dataset.selectedVar?.index, dataset.selectedVar?.isSet, dataset.selectedVar?.name, dataset.selectedVar?.vars, dataset.sliceBy.obs, plotType]);
+  const params = useMemo(() => {
+    return {
+      ...baseParams,
+      ...getPlotParams()
+    };
+  }, [baseParams, getPlotParams]);
+  return useDebouncedFetch(ENDPOINT + "/" + plotType, params, 500, {
+    enabled: !!plotType && !!dataset.pseudospatial.maskSet
+  });
+}
+export function Pseudospatial(_ref) {
+  let {
+    showLegend = true,
+    sharedScaleRange = false,
+    height = 200,
+    setShowControls,
+    plotType,
+    setPlotType
+  } = _ref;
+  const dataset = useDataset();
+  const [data, setData] = useState([]);
+  const [layout, setLayout] = useState({});
+  const {
+    getColor
+  } = useColor();
+  const colorscale = useRef(dataset.controls.colorScale);
+  useEffect(() => {
+    setPlotType(dataset.colorEncoding === COLOR_ENCODINGS.VAR ? PLOT_TYPES.GENE : dataset.selectedObs?.type === OBS_TYPES.CATEGORICAL || dataset.selectedObs?.type === OBS_TYPES.BOOLEAN ? PLOT_TYPES.CATEGORICAL : dataset.selectedObs?.type === OBS_TYPES.CONTINUOUS ? PLOT_TYPES.CONTINUOUS : PLOT_TYPES.MASKS);
+  }, [dataset.colorEncoding, dataset.selectedObs?.type, setPlotType]);
+  const updateColorscale = useCallback(colorscale => {
+    setLayout(l => {
+      return {
+        ...l,
+        coloraxis: {
+          ...l.coloraxis,
+          colorscale: colorscale
+        }
+      };
+    });
+    setData(d => {
+      const min = layout?.coloraxis?.cmin;
+      const max = layout?.coloraxis?.cmax;
+      return _.map(d, trace => {
+        const v = trace.meta.value;
+        if (v === null) {
+          return trace;
+        }
+        const color = rgbToHex(getColor({
+          value: (v - min) / (max - min)
+        }));
+        return {
+          ...trace,
+          fillcolor: color,
+          line: {
+            ...trace.line,
+            color: color
+          }
+        };
+      });
+    });
+  }, [getColor, layout?.coloraxis?.cmax, layout?.coloraxis?.cmin]);
+  const {
+    fetchedData,
+    isPending,
+    serverError
+  } = usePseudospatialData(plotType);
+  useEffect(() => {
+    if (!isPending && !serverError && fetchedData) {
+      setData(fetchedData.data);
+      setLayout(fetchedData.layout);
+      updateColorscale(colorscale.current);
+    }
+  }, [fetchedData, isPending, serverError, sharedScaleRange, updateColorscale]);
+  useEffect(() => {
+    colorscale.current = dataset.controls.colorScale;
+    updateColorscale(colorscale.current);
+  }, [dataset.controls.colorScale, updateColorscale]);
+  useEffect(() => {
+    if (sharedScaleRange) {
+      const {
+        min,
+        max
+      } = {
+        min: dataset.controls.range[0] * (dataset.controls.valueRange[1] - dataset.controls.valueRange[0]) + dataset.controls.valueRange[0],
+        max: dataset.controls.range[1] * (dataset.controls.valueRange[1] - dataset.controls.valueRange[0]) + dataset.controls.valueRange[0]
+      };
+      setData(d => {
+        return _.map(d, trace => {
+          const v = trace.meta.value;
+          if (v === null) {
+            return trace;
+          }
+          const color = rgbToHex(getColor({
+            value: (v - min) / (max - min)
+          }));
+          return {
+            ...trace,
+            fillcolor: color,
+            line: {
+              ...trace.line,
+              color: color
+            }
+          };
+        });
+      });
+      setLayout(l => {
+        return {
+          ...l,
+          coloraxis: {
+            ...l.coloraxis,
+            cmin: min,
+            cmax: max
+          }
+        };
+      });
+    }
+  }, [dataset.controls.range, dataset.controls.valueMax, dataset.controls.valueMin, dataset.controls.valueRange, getColor, sharedScaleRange]);
+  const hasSelections = !!plotType && !!dataset.pseudospatial.maskSet;
+  const faSlidersPath = faSliders.icon[4];
+  if (!serverError) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "cherita-pseudospatial"
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, hasSelections && isPending && /*#__PURE__*/React.createElement(LoadingSpinner, null), hasSelections && /*#__PURE__*/React.createElement(Plot, {
+      data: data,
+      layout: {
+        ...layout,
+        autosize: true,
+        height: height
+      },
+      useResizeHandler: true,
+      className: "cherita-pseudospatial-plot",
+      config: {
+        displaylogo: false,
+        displayModeBar: true,
+        modeBarButtonsToAdd: [{
+          name: "Open plot controls",
+          icon: {
+            width: 512,
+            height: 512,
+            path: faSlidersPath,
+            ascent: 512,
+            descent: 0
+          },
+          click: () => setShowControls(prev => !prev)
+        }]
+      }
+    }), hasSelections && showLegend && /*#__PURE__*/React.createElement(Legend, {
+      min: layout?.coloraxis?.cmin,
+      max: layout?.coloraxis?.cmax,
+      addText: plotType === PLOT_TYPES.GENE ? " - Mean expression" : plotType === PLOT_TYPES.CATEGORICAL ? " - %" : plotType === PLOT_TYPES.CONTINUOUS ? " - Mean value" : ""
+    })));
+  } else {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Alert, {
+      variant: "danger"
+    }, serverError.message));
+  }
+}
+
+// @TODO: explore making it a minimap
+export function PseudospatialImage() {
+  const dataset = useDataset();
+  if (dataset.imageUrl) {
+    return /*#__PURE__*/React.createElement(ImageViewer, {
+      src: dataset.imageUrl,
+      alt: "Pseudospatial reference image"
+    });
+  } else {
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }
+}

package/dist/esm/components/pseudospatial/PseudospatialToolbar.js

@@ -0,0 +1,123 @@
+import React, { useEffect, useState } from "react";
+import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import _ from "lodash";
+import { ButtonGroup, Dropdown, Form } from "react-bootstrap";
+import { PSEUDOSPATIAL_CATEGORICAL_MODES as MODES, PSEUDOSPATIAL_PLOT_TYPES as PLOT_TYPES } from "../../constants/constants";
+import { useDataset, useDatasetDispatch } from "../../context/DatasetContext";
+import { useFetch } from "../../utils/requests";
+function CategoricalMode() {
+  const dataset = useDataset();
+  const dispatch = useDatasetDispatch();
+  const modeList = _.map(MODES, (m, key) => /*#__PURE__*/React.createElement(Dropdown.Item, {
+    key: key,
+    active: dataset.pseudospatial.categoricalMode === m,
+    onClick: () => {
+      dispatch({
+        type: "set.pseudospatial.categoricalMode",
+        categoricalMode: m.value
+      });
+    }
+  }, _.capitalize(m.name)));
+  const mode = _.find(MODES, {
+    value: dataset.pseudospatial.categoricalMode
+  });
+  return /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.Toggle, {
+    variant: "light"
+  }, _.capitalize(mode.name)), /*#__PURE__*/React.createElement(Dropdown.Menu, null, modeList));
+}
+function MaskSet() {
+  const ENDPOINT = "masks";
+  const dataset = useDataset();
+  const dispatch = useDatasetDispatch();
+  const [maskSets, setMaskSets] = useState(null);
+  const [params, setParams] = useState({
+    url: dataset.url
+  });
+  useEffect(() => {
+    setParams(p => {
+      return {
+        ...p,
+        url: dataset.url
+      };
+    });
+  }, [dataset.url]);
+  const {
+    fetchedData,
+    isPending,
+    serverError
+  } = useFetch(ENDPOINT, params, {
+    refetchOnMount: false
+  });
+  useEffect(() => {
+    if (!isPending && !serverError) {
+      setMaskSets(fetchedData);
+    }
+  }, [fetchedData, isPending, serverError]);
+  const maskSetList = _.map(maskSets, (ms, key) => /*#__PURE__*/React.createElement(Dropdown.Item, {
+    key: key,
+    active: dataset.pseudospatial.maskSet === key,
+    onClick: () => {
+      dispatch({
+        type: "set.pseudospatial.maskSet",
+        maskSet: key
+      });
+    }
+  }, _.capitalize(key)));
+  const handleMaskChange = mask => {
+    let newMasks = dataset.pseudospatial.maskValues || maskSets?.[dataset.pseudospatial?.maskSet];
+    newMasks = newMasks.includes(mask) ? newMasks.filter(m => m !== mask) : [...newMasks, mask];
+    if (!_.difference(maskSets?.[dataset.pseudospatial?.maskSet], newMasks).length) {
+      newMasks = null;
+    }
+    dispatch({
+      type: "set.pseudospatial.maskValues",
+      maskValues: newMasks
+    });
+  };
+  const toggleMasks = () => {
+    if (!dataset.pseudospatial.maskValues || dataset.pseudospatial.maskValues?.length === maskSets?.[dataset.pseudospatial?.maskSet]?.length) {
+      dispatch({
+        type: "set.pseudospatial.maskValues",
+        maskValues: []
+      });
+    } else {
+      dispatch({
+        type: "set.pseudospatial.maskValues",
+        maskValues: null
+      });
+    }
+  };
+  const masksList = _.map(maskSets?.[dataset.pseudospatial?.maskSet], mask => /*#__PURE__*/React.createElement(Dropdown.ItemText, {
+    key: mask
+  }, /*#__PURE__*/React.createElement(Form.Check, {
+    type: "checkbox",
+    label: mask,
+    checked: !dataset.pseudospatial.maskValues || dataset.pseudospatial.maskValues.includes(mask),
+    onChange: () => handleMaskChange(mask)
+  })));
+  const nMasks = dataset.pseudospatial.maskValues ? dataset.pseudospatial.maskValues?.length : maskSets?.[dataset.pseudospatial?.maskSet]?.length || "No";
+  const toggleAllChecked = !dataset.pseudospatial.maskValues || dataset.pseudospatial.maskValues?.length === maskSets?.[dataset.pseudospatial?.maskSet]?.length;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.Toggle, {
+    variant: "light"
+  }, _.capitalize(dataset.pseudospatial.maskSet || "Select a mask set")), /*#__PURE__*/React.createElement(Dropdown.Menu, null, /*#__PURE__*/React.createElement(Dropdown.Header, null, "Mask set"), maskSetList)), /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.Toggle, {
+    variant: "light"
+  }, nMasks, " masks selected"), /*#__PURE__*/React.createElement(Dropdown.Menu, null, /*#__PURE__*/React.createElement(Dropdown.Header, null, "Masks"), /*#__PURE__*/React.createElement(Dropdown.ItemText, {
+    key: "toggle-all"
+  }, /*#__PURE__*/React.createElement(Form.Check, {
+    type: "checkbox",
+    label: "Toggle all",
+    checked: toggleAllChecked,
+    onChange: toggleMasks
+  })), masksList)));
+}
+
+// @TODO: add colormap, colorbar slider
+export function PseudospatialToolbar(_ref) {
+  let {
+    plotType
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "cherita-pseudospatial-toolbar"
+  }, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(MaskSet, null)), /*#__PURE__*/React.createElement(ButtonGroup, null, plotType === PLOT_TYPES.CATEGORICAL && /*#__PURE__*/React.createElement(CategoricalMode, null)));
+}