@haniffalab/cherita-react 1.0.0-dev.2025-03-13.73606a74 → 1.0.0-dev.2025-03-13.274a553c

package/dist/esm/components/obs-list/ObsList.js

@@ -0,0 +1,256 @@
+import React, { useContext, useEffect, useState } from "react";
+import { faDroplet, faListOl, faScissors, faChevronDown, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import _ from "lodash";
+import { Alert, Badge } from "react-bootstrap";
+import Accordion from "react-bootstrap/Accordion";
+import { useAccordionButton } from "react-bootstrap/AccordionButton";
+import AccordionContext from "react-bootstrap/AccordionContext";
+import { CategoricalObs, ContinuousObs } from "./ObsItem";
+import { COLOR_ENCODINGS, OBS_TYPES } from "../../constants/constants";
+import { useDataset, useDatasetDispatch } from "../../context/DatasetContext";
+import { LoadingSpinner } from "../../utils/LoadingIndicators";
+import { useFetch } from "../../utils/requests";
+export function ObsColsList(_ref) {
+  let {
+    showColor = true
+  } = _ref;
+  const ENDPOINT = "obs/cols";
+  const dataset = useDataset();
+  const dispatch = useDatasetDispatch();
+  const [obsCols, setObsCols] = useState(null);
+  const [active, setActive] = useState(dataset.selectedObs?.name);
+  const [expandedItems, setExpandedItems] = useState(active ? {
+    [active]: true
+  } : {});
+  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) {
+      let filteredData = fetchedData;
+      if (dataset.obsCols) {
+        filteredData = _.filter(filteredData, d => {
+          return _.includes(dataset.obsCols, d.name);
+        });
+      }
+      setObsCols(_.keyBy(_.map(filteredData, d => {
+        return {
+          ...d,
+          codesMap: _.invert(d.codes),
+          omit: []
+        };
+      }), "name"));
+    }
+  }, [dataset.obsCols, fetchedData, isPending, serverError]);
+
+  // @TODO: fix re-rendering performance issue
+  useEffect(() => {
+    if (obsCols) {
+      if (obsCols[dataset.selectedObs?.name]) {
+        setActive(dataset.selectedObs?.name);
+      } else {
+        setActive(null);
+      }
+    }
+  }, [dataset.selectedObs, obsCols]);
+  const updateObs = updatedObs => {
+    setObsCols(o => {
+      return {
+        ...o,
+        [updatedObs.name]: updatedObs
+      };
+    });
+  };
+  const handleAccordionToggle = itemName => {
+    _.delay(
+    // to avoid contents of accordion disappearing while closing
+    () => {
+      setExpandedItems(prev => {
+        return {
+          ...prev,
+          [itemName]: !prev[itemName]
+        };
+      });
+    }, expandedItems[itemName] ? 250 : 0);
+  };
+  const toggleAll = item => {
+    const omit = item.omit.length ? [] : _.map(item.values, v => item.codes[v]);
+    setObsCols(o => {
+      return {
+        ...o,
+        [item.name]: {
+          ...item,
+          omit: omit
+        }
+      };
+    });
+    if (active === item.name) {
+      dispatch({
+        type: "select.obs",
+        obs: {
+          ...item,
+          omit: omit
+        }
+      });
+    }
+  };
+  const toggleLabel = item => {
+    const inLabelObs = _.some(dataset.labelObs, i => i.name === item.name);
+    if (inLabelObs) {
+      dispatch({
+        type: "remove.label.obs",
+        obsName: item.name
+      });
+    } else {
+      dispatch({
+        type: "add.label.obs",
+        obs: {
+          name: item.name,
+          type: item.type,
+          codesMap: item.codesMap
+        }
+      });
+    }
+  };
+  const toggleSlice = item => {
+    dispatch({
+      type: "toggle.slice.obs",
+      obs: item
+    });
+  };
+  const toggleColor = item => {
+    dispatch({
+      type: "select.obs",
+      obs: item
+    });
+    dispatch({
+      type: "set.colorEncoding",
+      value: "obs"
+    });
+  };
+  const toggleObs = (item, value) => {
+    let omit;
+    if (_.includes(item.omit, item.codes[value])) {
+      omit = item.omit.filter(i => i !== item.codes[value]);
+    } else {
+      omit = [...item.omit, item.codes[value]];
+    }
+    setObsCols(o => {
+      return {
+        ...o,
+        [item.name]: {
+          ...item,
+          omit: omit
+        }
+      };
+    });
+    if (active === item.name) {
+      dispatch({
+        type: "select.obs",
+        obs: {
+          ...item,
+          omit: omit
+        }
+      });
+    }
+  };
+  function ObsAccordionToggle(_ref2) {
+    let {
+      children,
+      eventKey
+    } = _ref2;
+    const {
+      activeEventKey
+    } = useContext(AccordionContext);
+    const decoratedOnClick = useAccordionButton(eventKey, () => {
+      handleAccordionToggle(eventKey);
+    });
+    const isCurrentEventKey = Array.isArray(activeEventKey) ? activeEventKey.includes(eventKey) : activeEventKey === eventKey;
+    return /*#__PURE__*/React.createElement("div", {
+      className: `obs-accordion-header ${isCurrentEventKey ? "active" : ""}`,
+      onClick: decoratedOnClick
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "obs-accordion-header-chevron"
+    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: isCurrentEventKey ? faChevronDown : faChevronRight
+    })), /*#__PURE__*/React.createElement("span", {
+      className: "obs-accordion-header-title"
+    }, children));
+  }
+  const obsList = _.map(obsCols, (item, index) => {
+    if (item.type === OBS_TYPES.DISCRETE) {
+      return null;
+    }
+    const inLabelObs = _.some(dataset.labelObs, i => i.name === item.name);
+    const inSliceObs = dataset.sliceBy.obs && dataset.selectedObs?.name === item.name;
+    const isColorEncoding = dataset.colorEncoding === COLOR_ENCODINGS.OBS && dataset.selectedObs?.name === item.name;
+    return /*#__PURE__*/React.createElement("div", {
+      key: item.name
+    }, /*#__PURE__*/React.createElement(ObsAccordionToggle, {
+      eventKey: item.name
+    }, /*#__PURE__*/React.createElement("div", null, item.name), /*#__PURE__*/React.createElement("div", null, inLabelObs && /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      className: "mx-1",
+      icon: faListOl,
+      title: "In tooltip"
+    }), inSliceObs && /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      className: "mx-1",
+      icon: faScissors,
+      title: "Filter applied"
+    }), isColorEncoding && /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      className: "mx-1",
+      icon: faDroplet,
+      title: "Is color encoding"
+    }))), /*#__PURE__*/React.createElement(Accordion.Collapse, {
+      eventKey: item.name
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "obs-accordion-body"
+    }, expandedItems[item.name] && (item.type === OBS_TYPES.CATEGORICAL || item.type === OBS_TYPES.BOOLEAN ? /*#__PURE__*/React.createElement(CategoricalObs, {
+      key: item.name,
+      obs: item,
+      updateObs: updateObs,
+      toggleAll: () => toggleAll(item),
+      toggleObs: value => toggleObs(item, value),
+      toggleLabel: () => toggleLabel(item),
+      toggleSlice: () => toggleSlice(item),
+      toggleColor: () => toggleColor(item),
+      showColor: showColor
+    }) : /*#__PURE__*/React.createElement(ContinuousObs, {
+      key: item.name,
+      obs: item,
+      updateObs: updateObs,
+      toggleAll: () => toggleAll(item),
+      toggleObs: value => toggleObs(item, value),
+      toggleLabel: () => toggleLabel(item),
+      toggleSlice: () => toggleSlice(item),
+      toggleColor: () => toggleColor(item)
+    })))));
+  });
+  if (!serverError) {
+    return /*#__PURE__*/React.createElement("div", null, isPending && /*#__PURE__*/React.createElement(LoadingSpinner, null), /*#__PURE__*/React.createElement(Accordion, {
+      flush: true,
+      defaultActiveKey: [active],
+      alwaysOpen: true,
+      className: "obs-accordion"
+    }, obsList));
+  } else {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Alert, {
+      variant: "danger"
+    }, serverError.message));
+  }
+}

package/dist/esm/components/obs-list/ObsToolbar.js

@@ -0,0 +1,58 @@
+import React from "react";
+import { faDroplet, faListOl, faScissors } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import _ from "lodash";
+import { Button, ButtonGroup, Form } from "react-bootstrap";
+import { COLOR_ENCODINGS } from "../../constants/constants";
+import { useDataset } from "../../context/DatasetContext";
+export function ObsToolbar(_ref) {
+  let {
+    item,
+    showToggleAllObs = true,
+    showLabel = true,
+    showSlice = true,
+    showColor = true,
+    onToggleAllObs,
+    onToggleLabel,
+    onToggleSlice,
+    onToggleColor
+  } = _ref;
+  const dataset = useDataset();
+  const allToggledOn = !item.omit.length;
+  const inLabelObs = _.some(dataset.labelObs, i => i.name === item.name);
+  const inSliceObs = dataset.sliceBy.obs && dataset.selectedObs?.name === item.name;
+  const isColorEncoding = dataset.colorEncoding === COLOR_ENCODINGS.OBS && dataset.selectedObs?.name === item.name;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "d-flex align-items-center"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex-grow-1"
+  }, showToggleAllObs && /*#__PURE__*/React.createElement(Form.Check, {
+    // prettier-ignore
+    type: "switch",
+    id: "custom-switch",
+    label: "Toggle all",
+    checked: allToggledOn,
+    onChange: onToggleAllObs
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ButtonGroup, null, showLabel && /*#__PURE__*/React.createElement(Button, {
+    variant: inLabelObs ? "primary" : "outline-primary",
+    size: "sm",
+    onClick: onToggleLabel,
+    title: "Add to tooltip"
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faListOl
+  })), showSlice && /*#__PURE__*/React.createElement(Button, {
+    variant: inSliceObs ? "primary" : "outline-primary",
+    size: "sm",
+    onClick: onToggleSlice,
+    title: "Filter to selected"
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faScissors
+  })), showColor && /*#__PURE__*/React.createElement(Button, {
+    variant: isColorEncoding ? "primary" : "outline-primary",
+    size: "sm",
+    onClick: onToggleColor,
+    title: "Set as color encoding"
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faDroplet
+  })))));
+}

package/dist/esm/components/obsm-list/ObsmList.js

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from "react";
+import { Dropdown, Button, DropdownButton, ButtonGroup, OverlayTrigger, Tooltip } from "react-bootstrap";
+import { useDataset, useDatasetDispatch } from "../../context/DatasetContext";
+import { LoadingSpinner } from "../../utils/LoadingIndicators";
+import { useFetch } from "../../utils/requests";
+export function ObsmKeysList() {
+  const ENDPOINT = "obsm/keys";
+  const dataset = useDataset();
+  const dispatch = useDatasetDispatch();
+  const [obsmKeysList, setObsmKeysList] = useState([]);
+  const [active, setActive] = 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) {
+      setObsmKeysList(fetchedData);
+    }
+  }, [fetchedData, isPending, serverError]);
+  useEffect(() => {
+    if (dataset.selectedObsm) {
+      setActive(dataset.selectedObsm);
+    }
+  }, [dataset.selectedObsm]);
+  const obsmList = obsmKeysList.map(item => {
+    return /*#__PURE__*/React.createElement(Dropdown.Item, {
+      key: item,
+      className: `custom ${active === item && "active"}`,
+      onClick: () => {
+        dispatch({
+          type: "select.obsm",
+          obsm: item
+        });
+      }
+    }, item);
+  });
+  if (!serverError) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isPending && /*#__PURE__*/React.createElement(LoadingSpinner, null), /*#__PURE__*/React.createElement(DropdownButton, {
+      as: ButtonGroup,
+      title: dataset.selectedObsm || "Select an embedding",
+      variant: dataset.selectedObsm ? "primary" : "outline-primary",
+      id: "bg-nested-dropdown",
+      size: "sm"
+    }, obsmList));
+  } else {
+    return /*#__PURE__*/React.createElement(OverlayTrigger, {
+      placement: "top",
+      delay: {
+        show: 100,
+        hide: 200
+      },
+      overlay: /*#__PURE__*/React.createElement(Tooltip, null, serverError.message)
+    }, /*#__PURE__*/React.createElement(Button, {
+      variant: "danger"
+    }, "Error"));
+  }
+}

package/dist/esm/components/offcanvas/index.js

@@ -0,0 +1,67 @@
+import React from "react";
+import Offcanvas from "react-bootstrap/Offcanvas";
+import { SELECTION_MODES } from "../../constants/constants";
+import { ObsColsList } from "../obs-list/ObsList";
+import { ObsmKeysList } from "../obsm-list/ObsmList";
+import { SearchBar } from "../search-bar/SearchBar";
+import { VarNamesList } from "../var-list/VarList";
+export function OffcanvasObs(_ref) {
+  let {
+    show,
+    handleClose,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Offcanvas, {
+    show: show,
+    onHide: handleClose,
+    scroll: true,
+    backdrop: false
+  }, /*#__PURE__*/React.createElement(Offcanvas.Header, {
+    closeButton: true
+  }, /*#__PURE__*/React.createElement(Offcanvas.Title, null, "Categories")), /*#__PURE__*/React.createElement(Offcanvas.Body, {
+    className: "p-0"
+  }, /*#__PURE__*/React.createElement(ObsColsList, props)));
+}
+export function OffcanvasObsm(_ref2) {
+  let {
+    show,
+    handleClose
+  } = _ref2;
+  return /*#__PURE__*/React.createElement(Offcanvas, {
+    show: show,
+    onHide: handleClose
+  }, /*#__PURE__*/React.createElement(Offcanvas.Header, {
+    closeButton: true
+  }, /*#__PURE__*/React.createElement(Offcanvas.Title, null, "Embedding space")), /*#__PURE__*/React.createElement(Offcanvas.Body, null, /*#__PURE__*/React.createElement(ObsmKeysList, null)));
+}
+export function OffcanvasVars(_ref3) {
+  let {
+    show,
+    handleClose,
+    mode = SELECTION_MODES.MULTIPLE
+  } = _ref3;
+  return /*#__PURE__*/React.createElement(Offcanvas, {
+    show: show,
+    onHide: handleClose
+  }, /*#__PURE__*/React.createElement(Offcanvas.Header, {
+    closeButton: true
+  }, /*#__PURE__*/React.createElement(Offcanvas.Title, null, "Features")), /*#__PURE__*/React.createElement(Offcanvas.Body, null, /*#__PURE__*/React.createElement(SearchBar, {
+    searchDiseases: true
+  }), /*#__PURE__*/React.createElement(VarNamesList, {
+    mode: mode
+  })));
+}
+export function OffcanvasControls(_ref4) {
+  let {
+    show,
+    handleClose,
+    Controls,
+    ...props
+  } = _ref4;
+  return /*#__PURE__*/React.createElement(Offcanvas, {
+    show: show,
+    onHide: handleClose
+  }, /*#__PURE__*/React.createElement(Offcanvas.Header, {
+    closeButton: true
+  }, /*#__PURE__*/React.createElement(Offcanvas.Title, null, "Controls")), /*#__PURE__*/React.createElement(Offcanvas.Body, null, /*#__PURE__*/React.createElement(Controls, props)));
+}

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