@haniffalab/cherita-react 1.4.1 → 1.4.2

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

@@ -7,16 +7,21 @@ exports.OffcanvasControls = OffcanvasControls;
 exports.OffcanvasObs = OffcanvasObs;
 exports.OffcanvasObsm = OffcanvasObsm;
 exports.OffcanvasVars = OffcanvasVars;
-var _react = _interopRequireDefault(require("react"));
 var _Offcanvas = _interopRequireDefault(require("react-bootstrap/Offcanvas"));
 var _constants = require("../../constants/constants");
 var _ObsList = require("../obs-list/ObsList");
 var _ObsmList = require("../obsm-list/ObsmList");
 var _SearchBar = require("../search-bar/SearchBar");
 var _VarList = require("../var-list/VarList");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["show", "handleClose"],
   _excluded2 = ["show", "handleClose", "Controls"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 function OffcanvasObs(_ref) {
@@ -25,27 +30,38 @@ function OffcanvasObs(_ref) {
       handleClose
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_Offcanvas.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Offcanvas.default, {
     show: show,
     onHide: handleClose,
-    scroll: true
-  }, /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Header, {
-    closeButton: true
-  }, /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Title, null, "Categories")), /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Body, {
-    className: "p-0"
-  }, /*#__PURE__*/_react.default.createElement(_ObsList.ObsColsList, props)));
+    scroll: true,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Header, {
+      closeButton: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Title, {
+        children: "Categories"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Body, {
+      className: "p-0",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ObsList.ObsColsList, _objectSpread({}, props))
+    })]
+  });
 }
 function OffcanvasObsm(_ref2) {
   let {
     show,
     handleClose
   } = _ref2;
-  return /*#__PURE__*/_react.default.createElement(_Offcanvas.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Offcanvas.default, {
     show: show,
-    onHide: handleClose
-  }, /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Header, {
-    closeButton: true
-  }, /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Title, null, "Embedding space")), /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Body, null, /*#__PURE__*/_react.default.createElement(_ObsmList.ObsmKeysList, null)));
+    onHide: handleClose,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Header, {
+      closeButton: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Title, {
+        children: "Embedding space"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Body, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ObsmList.ObsmKeysList, {})
+    })]
+  });
 }
 function OffcanvasVars(_ref3) {
   let {
@@ -53,21 +69,29 @@ function OffcanvasVars(_ref3) {
     handleClose,
     mode = _constants.SELECTION_MODES.MULTIPLE
   } = _ref3;
-  return /*#__PURE__*/_react.default.createElement(_Offcanvas.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Offcanvas.default, {
     show: show,
     onHide: handleClose,
-    className: "offcanvas-vars"
-  }, /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Header, {
-    closeButton: true
-  }, /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Title, null, "Features")), /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Body, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "sidebar-features"
-  }, /*#__PURE__*/_react.default.createElement(_SearchBar.SearchBar, {
-    searchDiseases: true
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "sidebar-features-list"
-  }, /*#__PURE__*/_react.default.createElement(_VarList.VarNamesList, {
-    mode: mode
-  })))));
+    className: "offcanvas-vars",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Header, {
+      closeButton: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Title, {
+        children: "Features"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Body, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "sidebar-features",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchBar.SearchBar, {
+          searchDiseases: true
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "sidebar-features-list",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VarList.VarNamesList, {
+            mode: mode
+          })
+        })]
+      })
+    })]
+  });
 }
 function OffcanvasControls(_ref4) {
   let {
@@ -76,10 +100,16 @@ function OffcanvasControls(_ref4) {
       Controls
     } = _ref4,
     props = _objectWithoutProperties(_ref4, _excluded2);
-  return /*#__PURE__*/_react.default.createElement(_Offcanvas.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Offcanvas.default, {
     show: show,
-    onHide: handleClose
-  }, /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Header, {
-    closeButton: true
-  }, /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Title, null, "Controls")), /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Body, null, /*#__PURE__*/_react.default.createElement(Controls, props)));
+    onHide: handleClose,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Header, {
+      closeButton: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Title, {
+        children: "Controls"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Body, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Controls, _objectSpread({}, props))
+    })]
+  });
 }

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

@@ -5,8 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Pseudospatial = Pseudospatial;
 exports.PseudospatialImage = PseudospatialImage;
-var _react = _interopRequireWildcard(require("react"));
-var _fontawesomeSvgCore = require("@fortawesome/fontawesome-svg-core");
+var _react = require("react");
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
@@ -20,23 +19,24 @@ var _ImageViewer = require("../../utils/ImageViewer");
 var _Legend = require("../../utils/Legend");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
+var _Resolver = require("../../utils/Resolver");
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-_fontawesomeSvgCore.library.add(_freeSolidSvgIcons.faSliders);
 function usePseudospatialData(plotType) {
-  var _settings$selectedVar5, _settings$selectedVar6, _settings$selectedVar7, _settings$selectedVar8;
-  const ENDPOINT = "pseudospatial";
+  const ENDPOINT = 'pseudospatial';
   const dataset = (0, _DatasetContext.useDataset)();
   const settings = (0, _SettingsContext.useSettings)();
   const {
     obsIndices,
     isSliced
   } = (0, _FilterContext.useFilteredData)();
+  const selectedVar = (0, _Resolver.useSelectedVar)();
+  const selectedObs = (0, _Resolver.useSelectedObs)();
   const baseParams = (0, _react.useMemo)(() => {
     return {
       url: dataset.url,
@@ -45,54 +45,42 @@ function usePseudospatialData(plotType) {
       obsIndices: isSliced ? [...(obsIndices || [])] : null,
       varNamesCol: dataset.varNamesCol,
       showColorbar: false,
-      format: "json"
+      format: 'json'
     };
   }, [dataset.url, settings.pseudospatial.maskSet, settings.pseudospatial.maskValues, dataset.varNamesCol, isSliced, obsIndices]);
   const getPlotParams = (0, _react.useCallback)(() => {
     if (plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.GENE) {
-      var _settings$selectedVar, _settings$selectedVar2, _settings$selectedVar3, _settings$selectedVar4, _settings$selectedObs, _settings$selectedObs2, _settings$selectedObs3;
       return _objectSpread({
-        varKey: (_settings$selectedVar = settings.selectedVar) !== null && _settings$selectedVar !== void 0 && _settings$selectedVar.isSet ? {
-          name: (_settings$selectedVar2 = settings.selectedVar) === null || _settings$selectedVar2 === void 0 ? void 0 : _settings$selectedVar2.name,
-          indices: (_settings$selectedVar3 = settings.selectedVar) === null || _settings$selectedVar3 === void 0 ? void 0 : _settings$selectedVar3.vars.map(v => v.index)
-        } : (_settings$selectedVar4 = settings.selectedVar) === null || _settings$selectedVar4 === void 0 ? void 0 : _settings$selectedVar4.index
+        varKey: selectedVar !== null && selectedVar !== void 0 && selectedVar.isSet ? {
+          name: selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.name,
+          indices: selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.vars.map(v => v.index)
+        } : selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.index
       }, settings.sliceBy.obs ? {
-        obsCol: settings.selectedObs,
-        obsValues: !((_settings$selectedObs = settings.selectedObs) !== null && _settings$selectedObs !== void 0 && _settings$selectedObs.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_settings$selectedObs2 = settings.selectedObs) === null || _settings$selectedObs2 === void 0 ? void 0 : _settings$selectedObs2.codes), (_settings$selectedObs3 = settings.selectedObs) === null || _settings$selectedObs3 === void 0 ? void 0 : _settings$selectedObs3.omit).map(c => {
-          var _settings$selectedObs4;
-          return (_settings$selectedObs4 = settings.selectedObs) === null || _settings$selectedObs4 === void 0 ? void 0 : _settings$selectedObs4.codesMap[c];
-        })
+        obsCol: selectedObs,
+        obsValues: !(selectedObs !== null && selectedObs !== void 0 && selectedObs.omit.length) ? null : _lodash.default.difference(selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.values, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.omit)
       } : {});
     } else if (plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL) {
-      var _settings$selectedObs5, _settings$selectedObs6, _settings$selectedObs7;
       return {
-        obsCol: settings.selectedObs,
-        obsValues: !((_settings$selectedObs5 = settings.selectedObs) !== null && _settings$selectedObs5 !== void 0 && _settings$selectedObs5.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_settings$selectedObs6 = settings.selectedObs) === null || _settings$selectedObs6 === void 0 ? void 0 : _settings$selectedObs6.codes), (_settings$selectedObs7 = settings.selectedObs) === null || _settings$selectedObs7 === void 0 ? void 0 : _settings$selectedObs7.omit).map(c => {
-          var _settings$selectedObs8;
-          return (_settings$selectedObs8 = settings.selectedObs) === null || _settings$selectedObs8 === void 0 ? void 0 : _settings$selectedObs8.codesMap[c];
-        }),
+        obsCol: selectedObs,
+        obsValues: !(selectedObs !== null && selectedObs !== void 0 && selectedObs.omit.length) ? null : _lodash.default.difference(selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.values, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.omit),
         mode: settings.pseudospatial.categoricalMode
       };
-    } else if (plotType === "continuous") {
-      var _settings$selectedObs9, _settings$selectedObs0, _settings$selectedObs1;
+    } else if (plotType === 'continuous') {
       return {
-        obsCol: settings.selectedObs,
-        obsValues: !((_settings$selectedObs9 = settings.selectedObs) !== null && _settings$selectedObs9 !== void 0 && _settings$selectedObs9.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_settings$selectedObs0 = settings.selectedObs) === null || _settings$selectedObs0 === void 0 ? void 0 : _settings$selectedObs0.codes), (_settings$selectedObs1 = settings.selectedObs) === null || _settings$selectedObs1 === void 0 ? void 0 : _settings$selectedObs1.omit).map(c => {
-          var _settings$selectedObs10;
-          return (_settings$selectedObs10 = settings.selectedObs) === null || _settings$selectedObs10 === void 0 ? void 0 : _settings$selectedObs10.codesMap[c];
-        })
+        obsCol: selectedObs,
+        obsValues: !(selectedObs !== null && selectedObs !== void 0 && selectedObs.omit.length) ? null : _lodash.default.difference(selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.values, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.omit)
       };
     }
-  }, [settings.pseudospatial.categoricalMode, settings.selectedObs, (_settings$selectedVar5 = settings.selectedVar) === null || _settings$selectedVar5 === void 0 ? void 0 : _settings$selectedVar5.index, (_settings$selectedVar6 = settings.selectedVar) === null || _settings$selectedVar6 === void 0 ? void 0 : _settings$selectedVar6.isSet, (_settings$selectedVar7 = settings.selectedVar) === null || _settings$selectedVar7 === void 0 ? void 0 : _settings$selectedVar7.name, (_settings$selectedVar8 = settings.selectedVar) === null || _settings$selectedVar8 === void 0 ? void 0 : _settings$selectedVar8.vars, settings.sliceBy.obs, plotType]);
+  }, [settings.pseudospatial.categoricalMode, selectedObs, selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.index, selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.isSet, selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.name, selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.vars, settings.sliceBy.obs, plotType]);
   const params = (0, _react.useMemo)(() => {
     return _objectSpread(_objectSpread({}, baseParams), getPlotParams());
   }, [baseParams, getPlotParams]);
-  return (0, _requests.useDebouncedFetch)(ENDPOINT + "/" + plotType, params, 500, {
+  return (0, _requests.useDebouncedFetch)(ENDPOINT + '/' + plotType, params, 500, {
     enabled: !!plotType && !!settings.pseudospatial.maskSet
   });
 }
 function Pseudospatial(_ref) {
-  var _settings$selectedObs14, _layout$coloraxis3, _layout$coloraxis4;
+  var _layout$coloraxis3, _layout$coloraxis4, _settings$pseudospati2;
   let {
     showLegend = true,
     sharedScaleRange = false,
@@ -101,17 +89,33 @@ function Pseudospatial(_ref) {
     plotType,
     setPlotType
   } = _ref;
+  const {
+    imageUrl
+  } = (0, _DatasetContext.useDataset)();
   const settings = (0, _SettingsContext.useSettings)();
+  const dispatch = (0, _SettingsContext.useSettingsDispatch)();
   const [data, setData] = (0, _react.useState)([]);
   const [layout, setLayout] = (0, _react.useState)({});
   const {
     getColor
   } = (0, _colorHelper.useColor)();
   const colorscale = (0, _react.useRef)(settings.controls.colorScale);
+  const {
+    valueMin,
+    valueMax
+  } = (0, _FilterContext.useFilteredData)();
+  const selectedObs = (0, _Resolver.useSelectedObs)();
   (0, _react.useEffect)(() => {
-    var _settings$selectedObs11, _settings$selectedObs12, _settings$selectedObs13;
-    setPlotType(settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? _constants.PSEUDOSPATIAL_PLOT_TYPES.GENE : ((_settings$selectedObs11 = settings.selectedObs) === null || _settings$selectedObs11 === void 0 ? void 0 : _settings$selectedObs11.type) === _constants.OBS_TYPES.CATEGORICAL || ((_settings$selectedObs12 = settings.selectedObs) === null || _settings$selectedObs12 === void 0 ? void 0 : _settings$selectedObs12.type) === _constants.OBS_TYPES.BOOLEAN ? _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL : ((_settings$selectedObs13 = settings.selectedObs) === null || _settings$selectedObs13 === void 0 ? void 0 : _settings$selectedObs13.type) === _constants.OBS_TYPES.CONTINUOUS ? _constants.PSEUDOSPATIAL_PLOT_TYPES.CONTINUOUS : _constants.PSEUDOSPATIAL_PLOT_TYPES.MASKS);
-  }, [settings.colorEncoding, (_settings$selectedObs14 = settings.selectedObs) === null || _settings$selectedObs14 === void 0 ? void 0 : _settings$selectedObs14.type, setPlotType]);
+    if (_lodash.default.keys(settings.data.pseudospatial).length && !settings.pseudospatial.maskSet) {
+      dispatch({
+        type: 'set.pseudospatial.maskSet',
+        maskSet: _lodash.default.keys(settings.data.pseudospatial)[0]
+      });
+    }
+  }, [dispatch, settings.data.pseudospatial, settings.pseudospatial.maskSet]);
+  (0, _react.useEffect)(() => {
+    setPlotType(settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? _constants.PSEUDOSPATIAL_PLOT_TYPES.GENE : (selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type) === _constants.OBS_TYPES.CATEGORICAL || (selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type) === _constants.OBS_TYPES.BOOLEAN ? _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL : (selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type) === _constants.OBS_TYPES.CONTINUOUS ? _constants.PSEUDOSPATIAL_PLOT_TYPES.CONTINUOUS : _constants.PSEUDOSPATIAL_PLOT_TYPES.MASKS);
+  }, [settings.colorEncoding, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type, setPlotType]);
   const updateColorscale = (0, _react.useCallback)(colorscale => {
     setLayout(l => {
       return _objectSpread(_objectSpread({}, l), {}, {
@@ -163,8 +167,8 @@ function Pseudospatial(_ref) {
         min,
         max
       } = {
-        min: settings.controls.range[0] * (settings.controls.valueRange[1] - settings.controls.valueRange[0]) + settings.controls.valueRange[0],
-        max: settings.controls.range[1] * (settings.controls.valueRange[1] - settings.controls.valueRange[0]) + settings.controls.valueRange[0]
+        min: settings.controls.range[0] * (valueMax - valueMin) + valueMin,
+        max: settings.controls.range[1] * (valueMax - valueMin) + valueMin
       };
       setData(d => {
         return _lodash.default.map(d, trace => {
@@ -192,45 +196,97 @@ function Pseudospatial(_ref) {
         });
       });
     }
-  }, [settings.controls.range, settings.controls.valueMax, settings.controls.valueMin, settings.controls.valueRange, getColor, sharedScaleRange]);
+  }, [settings.controls.range, settings.controls.valueMax, settings.controls.valueMin, getColor, sharedScaleRange, valueMax, valueMin]);
   const hasSelections = !!plotType && !!settings.pseudospatial.maskSet;
-  const faSlidersPath = _freeSolidSvgIcons.faSliders.icon[4];
-  if (!serverError) {
+  const images = (0, _react.useMemo)(() => {
+    if (imageUrl) {
+      return [_objectSpread({
+        source: imageUrl,
+        xref: 'paper',
+        yref: 'paper',
+        x: 0.5,
+        y: 0.5,
+        sizex: 1,
+        sizey: 1,
+        sizing: 'contain',
+        layer: 'above',
+        xanchor: 'center',
+        yanchor: 'middle',
+        name: 'Reference Image'
+      }, settings.pseudospatial.refImg)];
+    }
+    return [];
+  }, [imageUrl, settings.pseudospatial.refImg]);
+  const modeBarButtons = (0, _react.useMemo)(() => {
+    var _settings$pseudospati;
+    const isRefImgVisible = (_settings$pseudospati = settings.pseudospatial) === null || _settings$pseudospati === void 0 || (_settings$pseudospati = _settings$pseudospati.refImg) === null || _settings$pseudospati === void 0 ? void 0 : _settings$pseudospati.visible;
+    return [{
+      name: 'Open plot controls',
+      icon: {
+        width: 512,
+        height: 512,
+        path: _freeSolidSvgIcons.faSliders.icon[4]
+      },
+      click: () => setShowControls(prev => !prev)
+    }, ...(imageUrl ? [{
+      name: isRefImgVisible ? 'Hide reference image' : 'Show reference image',
+      icon: {
+        width: 600,
+        height: 512,
+        path: _freeSolidSvgIcons.faEye.icon[4]
+      },
+      click: () => dispatch({
+        type: 'toggle.pseudospatial.refImg.visible'
+      })
+    }] : [])];
+  }, [dispatch, imageUrl, setShowControls, (_settings$pseudospati2 = settings.pseudospatial) === null || _settings$pseudospati2 === void 0 || (_settings$pseudospati2 = _settings$pseudospati2.refImg) === null || _settings$pseudospati2 === void 0 ? void 0 : _settings$pseudospati2.visible]);
+  if (!_lodash.default.keys(settings.data.pseudospatial).length) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
+        variant: "warning",
+        children: "No pseudospatial data"
+      })
+    });
+  } else if (!serverError) {
     var _layout$coloraxis5, _layout$coloraxis6;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "cherita-pseudospatial"
-    }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, hasSelections && isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), hasSelections && /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
-      data: data,
-      layout: _objectSpread(_objectSpread({}, 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.default.createElement(_Legend.Legend, {
-      min: layout === null || layout === void 0 || (_layout$coloraxis5 = layout.coloraxis) === null || _layout$coloraxis5 === void 0 ? void 0 : _layout$coloraxis5.cmin,
-      max: layout === null || layout === void 0 || (_layout$coloraxis6 = layout.coloraxis) === null || _layout$coloraxis6 === void 0 ? void 0 : _layout$coloraxis6.cmax,
-      addText: plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.GENE ? " - Mean expression" : plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL ? " - %" : plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.CONTINUOUS ? " - Mean value" : ""
-    })));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "cherita-pseudospatial",
+      children: /*#__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: _objectSpread(_objectSpread({}, layout), {}, {
+            autosize: true,
+            height: height,
+            margin: {
+              l: 0,
+              r: 0,
+              t: 0,
+              b: 0,
+              pad: 0
+            },
+            images: images
+          }),
+          useResizeHandler: true,
+          className: "cherita-pseudospatial-plot",
+          config: {
+            displaylogo: false,
+            displayModeBar: true,
+            modeBarButtonsToAdd: modeBarButtons
+          }
+        }), hasSelections && showLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Legend.Legend, {
+          min: layout === null || layout === void 0 || (_layout$coloraxis5 = layout.coloraxis) === null || _layout$coloraxis5 === void 0 ? void 0 : _layout$coloraxis5.cmin,
+          max: layout === null || layout === void 0 || (_layout$coloraxis6 = layout.coloraxis) === null || _layout$coloraxis6 === void 0 ? void 0 : _layout$coloraxis6.cmax,
+          addText: plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.GENE ? ' - Mean expression' : plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL ? ' - %' : plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.CONTINUOUS ? ' - Mean value' : ''
+        })]
+      })
+    });
   } else {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
-      variant: "danger"
-    }, serverError.message));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
+        variant: "danger",
+        children: serverError.message
+      })
+    });
   }
 }
 
@@ -238,11 +294,11 @@ function Pseudospatial(_ref) {
 function PseudospatialImage() {
   const dataset = (0, _DatasetContext.useDataset)();
   if (dataset.imageUrl) {
-    return /*#__PURE__*/_react.default.createElement(_ImageViewer.ImageViewer, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageViewer.ImageViewer, {
       src: dataset.imageUrl,
       alt: "Pseudospatial reference image"
     });
   } else {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
   }
 }