@haniffalab/cherita-react 0.2.0-dev.2024-12-16.ab9c5057 → 0.2.0-dev.2024-12-16.67617f27

package/dist/components/pseudospatial/Pseudospatial.js

@@ -0,0 +1,219 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Pseudospatial = Pseudospatial;
+exports.PseudospatialImage = PseudospatialImage;
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _reactBootstrap = require("react-bootstrap");
+var _reactPlotly = _interopRequireDefault(require("react-plotly.js"));
+var _PseudospatialToolbar = require("./PseudospatialToolbar");
+var _constants = require("../../constants/constants");
+var _DatasetContext = require("../../context/DatasetContext");
+var _FilterContext = require("../../context/FilterContext");
+var _colorHelper = require("../../helpers/color-helper");
+var _ImageViewer = require("../../utils/ImageViewer");
+var _Legend = require("../../utils/Legend");
+var _LoadingIndicators = require("../../utils/LoadingIndicators");
+var _requests = require("../../utils/requests");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function usePseudospatialData(plotType) {
+  const ENDPOINT = "pseudospatial";
+  const dataset = (0, _DatasetContext.useDataset)();
+  const filteredData = (0, _FilterContext.useFilteredData)();
+  const isSliced = dataset.sliceBy.obs || dataset.sliceBy.polygons;
+  const baseParams = (0, _react.useMemo)(() => {
+    return {
+      url: dataset.url,
+      maskSet: dataset.pseudospatial.maskSet,
+      maskValues: dataset.pseudospatial.maskValues,
+      obsIndices: isSliced ? [...(filteredData.obsIndices || [])] : null,
+      varNamesCol: dataset.varNamesCol,
+      showColorbar: false,
+      format: "json"
+    };
+  }, [dataset.url, dataset.pseudospatial.maskSet, dataset.pseudospatial.maskValues, dataset.varNamesCol, isSliced, filteredData.obsIndices]);
+  const getPlotParams = (0, _react.useCallback)(() => {
+    if (plotType === _constants.PSEUDOSPATIAL_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 : _lodash.default.difference(_lodash.default.values(dataset.selectedObs?.codes), dataset.selectedObs?.omit).map(c => dataset.selectedObs?.codesMap[c])
+        } : {})
+      };
+    } else if (plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL) {
+      return {
+        obsCol: dataset.selectedObs,
+        obsValues: !dataset.selectedObs?.omit.length ? null : _lodash.default.difference(_lodash.default.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 : _lodash.default.difference(_lodash.default.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 = (0, _react.useMemo)(() => {
+    return {
+      ...baseParams,
+      ...getPlotParams()
+    };
+  }, [baseParams, getPlotParams]);
+  return (0, _requests.useDebouncedFetch)(ENDPOINT + "/" + plotType, params, 500, {
+    enabled: !!plotType && !!dataset.pseudospatial.maskSet
+  });
+}
+function Pseudospatial(_ref) {
+  let {
+    showLegend = true,
+    sharedScaleRange = false
+  } = _ref;
+  const dataset = (0, _DatasetContext.useDataset)();
+  const [data, setData] = (0, _react.useState)([]);
+  const [layout, setLayout] = (0, _react.useState)({});
+  const {
+    getColor
+  } = (0, _colorHelper.useColor)();
+  const colorscale = (0, _react.useRef)(dataset.controls.colorScale);
+  const plotType = dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? _constants.PSEUDOSPATIAL_PLOT_TYPES.GENE : dataset.selectedObs?.type === _constants.OBS_TYPES.CATEGORICAL || dataset.selectedObs?.type === _constants.OBS_TYPES.BOOLEAN ? _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL : dataset.selectedObs?.type === _constants.OBS_TYPES.CONTINUOUS ? _constants.PSEUDOSPATIAL_PLOT_TYPES.CONTINUOUS : _constants.PSEUDOSPATIAL_PLOT_TYPES.MASKS;
+  const updateColorscale = (0, _react.useCallback)(colorscale => {
+    setLayout(l => {
+      return {
+        ...l,
+        coloraxis: {
+          ...l.coloraxis,
+          colorscale: colorscale
+        }
+      };
+    });
+    setData(d => {
+      const min = layout?.coloraxis?.cmin;
+      const max = layout?.coloraxis?.cmax;
+      return _lodash.default.map(d, trace => {
+        const v = trace.meta.value;
+        if (v === null) {
+          return trace;
+        }
+        const color = (0, _colorHelper.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);
+  (0, _react.useEffect)(() => {
+    if (!isPending && !serverError) {
+      setData(fetchedData.data);
+      setLayout(fetchedData.layout);
+      updateColorscale(colorscale.current);
+    }
+  }, [fetchedData, isPending, serverError, sharedScaleRange, updateColorscale]);
+  (0, _react.useEffect)(() => {
+    colorscale.current = dataset.controls.colorScale;
+    updateColorscale(colorscale.current);
+  }, [dataset.controls.colorScale, updateColorscale]);
+  (0, _react.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 _lodash.default.map(d, trace => {
+          const v = trace.meta.value;
+          if (v === null) {
+            return trace;
+          }
+          const color = (0, _colorHelper.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;
+  if (!serverError) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "cherita-pseudospatial position-relative",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PseudospatialToolbar.PseudospatialToolbar, {
+        plotType: plotType
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [hasSelections && isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingSpinner, {}), hasSelections && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactPlotly.default, {
+          data: data,
+          layout: layout,
+          useResizeHandler: true,
+          className: "cherita-pseudospatial-plot",
+          config: {
+            displaylogo: false
+          }
+        }), hasSelections && showLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Legend.Legend, {
+          min: layout?.coloraxis?.cmin,
+          max: layout?.coloraxis?.cmax
+        })]
+      })]
+    });
+  } else {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
+        variant: "danger",
+        children: serverError.message
+      })
+    });
+  }
+}
+
+// @TODO: explore making it a minimap
+function PseudospatialImage() {
+  const dataset = (0, _DatasetContext.useDataset)();
+  if (dataset.imageUrl) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageViewer.ImageViewer, {
+      src: dataset.imageUrl,
+      alt: "Pseudospatial reference image"
+    });
+  } else {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+  }
+}

package/dist/components/pseudospatial/PseudospatialControls.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PseudospatialControls = PseudospatialControls;
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function PseudospatialControls() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+}

package/dist/components/pseudospatial/PseudospatialToolbar.js

@@ -0,0 +1,157 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PseudospatialToolbar = PseudospatialToolbar;
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _reactBootstrap = require("react-bootstrap");
+var _constants = require("../../constants/constants");
+var _DatasetContext = require("../../context/DatasetContext");
+var _requests = require("../../utils/requests");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function CategoricalMode() {
+  const dataset = (0, _DatasetContext.useDataset)();
+  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  const modeList = _lodash.default.map(_constants.PSEUDOSPATIAL_CATEGORICAL_MODES, (m, key) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
+    active: dataset.pseudospatial.categoricalMode === m,
+    onClick: () => {
+      dispatch({
+        type: "set.pseudospatial.categoricalMode",
+        categoricalMode: m.value
+      });
+    },
+    children: _lodash.default.capitalize(m.name)
+  }, key));
+  const mode = _lodash.default.find(_constants.PSEUDOSPATIAL_CATEGORICAL_MODES, {
+    value: dataset.pseudospatial.categoricalMode
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Dropdown, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Toggle, {
+      variant: "light",
+      children: _lodash.default.capitalize(mode.name)
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Menu, {
+      children: modeList
+    })]
+  });
+}
+function MaskSet() {
+  const ENDPOINT = "masks";
+  const dataset = (0, _DatasetContext.useDataset)();
+  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  const [maskSets, setMaskSets] = (0, _react.useState)(null);
+  const [params, setParams] = (0, _react.useState)({
+    url: dataset.url
+  });
+  (0, _react.useEffect)(() => {
+    setParams(p => {
+      return {
+        ...p,
+        url: dataset.url
+      };
+    });
+  }, [dataset.url]);
+  const {
+    fetchedData,
+    isPending,
+    serverError
+  } = (0, _requests.useFetch)(ENDPOINT, params, {
+    refetchOnMount: false
+  });
+  (0, _react.useEffect)(() => {
+    if (!isPending && !serverError) {
+      setMaskSets(fetchedData);
+    }
+  }, [fetchedData, isPending, serverError]);
+  const maskSetList = _lodash.default.map(maskSets, (ms, key) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
+    active: dataset.pseudospatial.maskSet === key,
+    onClick: () => {
+      dispatch({
+        type: "set.pseudospatial.maskSet",
+        maskSet: key
+      });
+    },
+    children: _lodash.default.capitalize(key)
+  }, 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 (!_lodash.default.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 = _lodash.default.map(maskSets?.[dataset.pseudospatial?.maskSet], mask => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.ItemText, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Check, {
+      type: "checkbox",
+      label: mask,
+      checked: !dataset.pseudospatial.maskValues || dataset.pseudospatial.maskValues.includes(mask),
+      onChange: () => handleMaskChange(mask)
+    })
+  }, 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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Dropdown, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Toggle, {
+        variant: "light",
+        children: _lodash.default.capitalize(dataset.pseudospatial.maskSet || "Select a mask set")
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Dropdown.Menu, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Header, {
+          children: "Mask set"
+        }), maskSetList]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Dropdown, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Dropdown.Toggle, {
+        variant: "light",
+        children: [nMasks, " masks selected"]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Dropdown.Menu, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Header, {
+          children: "Masks"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.ItemText, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Check, {
+            type: "checkbox",
+            label: "Toggle all",
+            checked: toggleAllChecked,
+            onChange: toggleMasks
+          })
+        }, "toggle-all"), masksList]
+      })]
+    })]
+  });
+}
+
+// @TODO: add colormap, colorbar slider
+function PseudospatialToolbar(_ref) {
+  let {
+    plotType
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "cherita-pseudospatial-toolbar",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ButtonGroup, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MaskSet, {})
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ButtonGroup, {
+      children: plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL && /*#__PURE__*/(0, _jsxRuntime.jsx)(CategoricalMode, {})
+    })]
+  });
+}