@haniffalab/cherita-react 1.4.1 → 1.4.2

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

@@ -1,41 +1,57 @@
 const _excluded = ["show", "handleClose"],
   _excluded2 = ["show", "handleClose", "Controls"];
+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; }
-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";
+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';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function OffcanvasObs(_ref) {
   let {
       show,
       handleClose
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(Offcanvas, {
+  return /*#__PURE__*/_jsxs(Offcanvas, {
     show: show,
     onHide: handleClose,
-    scroll: true
-  }, /*#__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)));
+    scroll: true,
+    children: [/*#__PURE__*/_jsx(Offcanvas.Header, {
+      closeButton: true,
+      children: /*#__PURE__*/_jsx(Offcanvas.Title, {
+        children: "Categories"
+      })
+    }), /*#__PURE__*/_jsx(Offcanvas.Body, {
+      className: "p-0",
+      children: /*#__PURE__*/_jsx(ObsColsList, _objectSpread({}, props))
+    })]
+  });
 }
 export function OffcanvasObsm(_ref2) {
   let {
     show,
     handleClose
   } = _ref2;
-  return /*#__PURE__*/React.createElement(Offcanvas, {
+  return /*#__PURE__*/_jsxs(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)));
+    onHide: handleClose,
+    children: [/*#__PURE__*/_jsx(Offcanvas.Header, {
+      closeButton: true,
+      children: /*#__PURE__*/_jsx(Offcanvas.Title, {
+        children: "Embedding space"
+      })
+    }), /*#__PURE__*/_jsx(Offcanvas.Body, {
+      children: /*#__PURE__*/_jsx(ObsmKeysList, {})
+    })]
+  });
 }
 export function OffcanvasVars(_ref3) {
   let {
@@ -43,21 +59,29 @@ export function OffcanvasVars(_ref3) {
     handleClose,
     mode = SELECTION_MODES.MULTIPLE
   } = _ref3;
-  return /*#__PURE__*/React.createElement(Offcanvas, {
+  return /*#__PURE__*/_jsxs(Offcanvas, {
     show: show,
     onHide: handleClose,
-    className: "offcanvas-vars"
-  }, /*#__PURE__*/React.createElement(Offcanvas.Header, {
-    closeButton: true
-  }, /*#__PURE__*/React.createElement(Offcanvas.Title, null, "Features")), /*#__PURE__*/React.createElement(Offcanvas.Body, null, /*#__PURE__*/React.createElement("div", {
-    className: "sidebar-features"
-  }, /*#__PURE__*/React.createElement(SearchBar, {
-    searchDiseases: true
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "sidebar-features-list"
-  }, /*#__PURE__*/React.createElement(VarNamesList, {
-    mode: mode
-  })))));
+    className: "offcanvas-vars",
+    children: [/*#__PURE__*/_jsx(Offcanvas.Header, {
+      closeButton: true,
+      children: /*#__PURE__*/_jsx(Offcanvas.Title, {
+        children: "Features"
+      })
+    }), /*#__PURE__*/_jsx(Offcanvas.Body, {
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "sidebar-features",
+        children: [/*#__PURE__*/_jsx(SearchBar, {
+          searchDiseases: true
+        }), /*#__PURE__*/_jsx("div", {
+          className: "sidebar-features-list",
+          children: /*#__PURE__*/_jsx(VarNamesList, {
+            mode: mode
+          })
+        })]
+      })
+    })]
+  });
 }
 export function OffcanvasControls(_ref4) {
   let {
@@ -66,10 +90,16 @@ export function OffcanvasControls(_ref4) {
       Controls
     } = _ref4,
     props = _objectWithoutProperties(_ref4, _excluded2);
-  return /*#__PURE__*/React.createElement(Offcanvas, {
+  return /*#__PURE__*/_jsxs(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)));
+    onHide: handleClose,
+    children: [/*#__PURE__*/_jsx(Offcanvas.Header, {
+      closeButton: true,
+      children: /*#__PURE__*/_jsx(Offcanvas.Title, {
+        children: "Controls"
+      })
+    }), /*#__PURE__*/_jsx(Offcanvas.Body, {
+      children: /*#__PURE__*/_jsx(Controls, _objectSpread({}, props))
+    })]
+  });
 }

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

@@ -3,31 +3,32 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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); }
-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 { useSettings } from "../../context/SettingsContext";
-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);
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { faEye, 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 { useSettings, useSettingsDispatch } from '../../context/SettingsContext';
+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';
+import { useSelectedObs, useSelectedVar } from '../../utils/Resolver';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 function usePseudospatialData(plotType) {
-  var _settings$selectedVar5, _settings$selectedVar6, _settings$selectedVar7, _settings$selectedVar8;
-  const ENDPOINT = "pseudospatial";
+  const ENDPOINT = 'pseudospatial';
   const dataset = useDataset();
   const settings = useSettings();
   const {
     obsIndices,
     isSliced
   } = useFilteredData();
+  const selectedVar = useSelectedVar();
+  const selectedObs = useSelectedObs();
   const baseParams = useMemo(() => {
     return {
       url: dataset.url,
@@ -36,54 +37,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 = useCallback(() => {
     if (plotType === 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 : _.difference(_.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 : _.difference(selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.values, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.omit)
       } : {});
     } else if (plotType === 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 : _.difference(_.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 : _.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 : _.difference(_.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 : _.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 = useMemo(() => {
     return _objectSpread(_objectSpread({}, baseParams), getPlotParams());
   }, [baseParams, getPlotParams]);
-  return useDebouncedFetch(ENDPOINT + "/" + plotType, params, 500, {
+  return useDebouncedFetch(ENDPOINT + '/' + plotType, params, 500, {
     enabled: !!plotType && !!settings.pseudospatial.maskSet
   });
 }
 export function Pseudospatial(_ref) {
-  var _settings$selectedObs14, _layout$coloraxis3, _layout$coloraxis4;
+  var _layout$coloraxis3, _layout$coloraxis4, _settings$pseudospati2;
   let {
     showLegend = true,
     sharedScaleRange = false,
@@ -92,17 +81,33 @@ export function Pseudospatial(_ref) {
     plotType,
     setPlotType
   } = _ref;
+  const {
+    imageUrl
+  } = useDataset();
   const settings = useSettings();
+  const dispatch = useSettingsDispatch();
   const [data, setData] = useState([]);
   const [layout, setLayout] = useState({});
   const {
     getColor
   } = useColor();
   const colorscale = useRef(settings.controls.colorScale);
+  const {
+    valueMin,
+    valueMax
+  } = useFilteredData();
+  const selectedObs = useSelectedObs();
   useEffect(() => {
-    var _settings$selectedObs11, _settings$selectedObs12, _settings$selectedObs13;
-    setPlotType(settings.colorEncoding === COLOR_ENCODINGS.VAR ? PLOT_TYPES.GENE : ((_settings$selectedObs11 = settings.selectedObs) === null || _settings$selectedObs11 === void 0 ? void 0 : _settings$selectedObs11.type) === OBS_TYPES.CATEGORICAL || ((_settings$selectedObs12 = settings.selectedObs) === null || _settings$selectedObs12 === void 0 ? void 0 : _settings$selectedObs12.type) === OBS_TYPES.BOOLEAN ? PLOT_TYPES.CATEGORICAL : ((_settings$selectedObs13 = settings.selectedObs) === null || _settings$selectedObs13 === void 0 ? void 0 : _settings$selectedObs13.type) === OBS_TYPES.CONTINUOUS ? PLOT_TYPES.CONTINUOUS : PLOT_TYPES.MASKS);
-  }, [settings.colorEncoding, (_settings$selectedObs14 = settings.selectedObs) === null || _settings$selectedObs14 === void 0 ? void 0 : _settings$selectedObs14.type, setPlotType]);
+    if (_.keys(settings.data.pseudospatial).length && !settings.pseudospatial.maskSet) {
+      dispatch({
+        type: 'set.pseudospatial.maskSet',
+        maskSet: _.keys(settings.data.pseudospatial)[0]
+      });
+    }
+  }, [dispatch, settings.data.pseudospatial, settings.pseudospatial.maskSet]);
+  useEffect(() => {
+    setPlotType(settings.colorEncoding === COLOR_ENCODINGS.VAR ? PLOT_TYPES.GENE : (selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type) === OBS_TYPES.CATEGORICAL || (selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type) === OBS_TYPES.BOOLEAN ? PLOT_TYPES.CATEGORICAL : (selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type) === OBS_TYPES.CONTINUOUS ? PLOT_TYPES.CONTINUOUS : PLOT_TYPES.MASKS);
+  }, [settings.colorEncoding, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type, setPlotType]);
   const updateColorscale = useCallback(colorscale => {
     setLayout(l => {
       return _objectSpread(_objectSpread({}, l), {}, {
@@ -154,8 +159,8 @@ export 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 _.map(d, trace => {
@@ -183,45 +188,97 @@ export 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 = faSliders.icon[4];
-  if (!serverError) {
+  const images = 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 = 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: faSliders.icon[4]
+      },
+      click: () => setShowControls(prev => !prev)
+    }, ...(imageUrl ? [{
+      name: isRefImgVisible ? 'Hide reference image' : 'Show reference image',
+      icon: {
+        width: 600,
+        height: 512,
+        path: 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 (!_.keys(settings.data.pseudospatial).length) {
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: /*#__PURE__*/_jsx(Alert, {
+        variant: "warning",
+        children: "No pseudospatial data"
+      })
+    });
+  } else if (!serverError) {
     var _layout$coloraxis5, _layout$coloraxis6;
-    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: _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.createElement(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 === PLOT_TYPES.GENE ? " - Mean expression" : plotType === PLOT_TYPES.CATEGORICAL ? " - %" : plotType === PLOT_TYPES.CONTINUOUS ? " - Mean value" : ""
-    })));
+    return /*#__PURE__*/_jsx("div", {
+      className: "cherita-pseudospatial",
+      children: /*#__PURE__*/_jsxs(_Fragment, {
+        children: [hasSelections && isPending && /*#__PURE__*/_jsx(LoadingSpinner, {}), hasSelections && /*#__PURE__*/_jsx(Plot, {
+          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__*/_jsx(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 === 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));
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: /*#__PURE__*/_jsx(Alert, {
+        variant: "danger",
+        children: serverError.message
+      })
+    });
   }
 }
 
@@ -229,11 +286,11 @@ export function Pseudospatial(_ref) {
 export function PseudospatialImage() {
   const dataset = useDataset();
   if (dataset.imageUrl) {
-    return /*#__PURE__*/React.createElement(ImageViewer, {
+    return /*#__PURE__*/_jsx(ImageViewer, {
       src: dataset.imageUrl,
       alt: "Pseudospatial reference image"
     });
   } else {
-    return /*#__PURE__*/React.createElement(React.Fragment, null);
+    return /*#__PURE__*/_jsx(_Fragment, {});
   }
 }