@haniffalab/cherita-react 1.4.1-dev.2025-10-22.61540191 → 1.4.1-dev.2025-10-23.3179e534

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

@@ -20,6 +20,7 @@ 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 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; }
@@ -240,43 +241,52 @@ function Pseudospatial(_ref) {
     }] : [])];
   }, [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__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_reactBootstrap.Alert, {
-      variant: "warning"
-    }, "No pseudospatial data"));
+    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.createElement("div", {
-      className: "cherita-pseudospatial"
-    }, /*#__PURE__*/React.createElement(React.Fragment, null, hasSelections && isPending && /*#__PURE__*/React.createElement(_LoadingIndicators.LoadingSpinner, null), hasSelections && /*#__PURE__*/React.createElement(_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__*/React.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.createElement(React.Fragment, null, /*#__PURE__*/React.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
+      })
+    });
   }
 }
 
@@ -284,11 +294,11 @@ function Pseudospatial(_ref) {
 function PseudospatialImage() {
   const dataset = (0, _DatasetContext.useDataset)();
   if (dataset.imageUrl) {
-    return /*#__PURE__*/React.createElement(_ImageViewer.ImageViewer, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageViewer.ImageViewer, {
       src: dataset.imageUrl,
       alt: "Pseudospatial reference image"
     });
   } else {
-    return /*#__PURE__*/React.createElement(React.Fragment, null);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
   }
 }

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

@@ -11,26 +11,32 @@ var _reactBootstrap = require("react-bootstrap");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
 var _SettingsContext = require("../../context/SettingsContext");
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function CategoricalMode() {
   const settings = (0, _SettingsContext.useSettings)();
   const dispatch = (0, _SettingsContext.useSettingsDispatch)();
-  const modeList = _lodash.default.map(_constants.PSEUDOSPATIAL_CATEGORICAL_MODES, (m, key) => /*#__PURE__*/React.createElement(_reactBootstrap.Dropdown.Item, {
-    key: key,
+  const modeList = _lodash.default.map(_constants.PSEUDOSPATIAL_CATEGORICAL_MODES, (m, key) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
     active: settings.pseudospatial.categoricalMode === m,
     onClick: () => {
       dispatch({
         type: "set.pseudospatial.categoricalMode",
         categoricalMode: m.value
       });
-    }
-  }, _lodash.default.capitalize(m.name)));
+    },
+    children: _lodash.default.capitalize(m.name)
+  }, key));
   const mode = _lodash.default.find(_constants.PSEUDOSPATIAL_CATEGORICAL_MODES, {
     value: settings.pseudospatial.categoricalMode
   });
-  return /*#__PURE__*/React.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/React.createElement(_reactBootstrap.Dropdown.Toggle, {
-    variant: "light"
-  }, _lodash.default.capitalize(mode.name)), /*#__PURE__*/React.createElement(_reactBootstrap.Dropdown.Menu, null, modeList));
+  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() {
   var _settings$pseudospati5, _settings$pseudospati6, _maskSets$settings$ps2, _settings$pseudospati7, _settings$pseudospati8, _maskSets$settings$ps3, _settings$pseudospati9;
@@ -39,16 +45,16 @@ function MaskSet() {
   const {
     pseudospatial: maskSets
   } = settings.data;
-  const maskSetList = _lodash.default.map(maskSets, (ms, key) => /*#__PURE__*/React.createElement(_reactBootstrap.Dropdown.Item, {
-    key: key,
+  const maskSetList = _lodash.default.map(maskSets, (ms, key) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
     active: settings.pseudospatial.maskSet === key,
     onClick: () => {
       dispatch({
         type: "set.pseudospatial.maskSet",
         maskSet: key
       });
-    }
-  }, _lodash.default.capitalize(key)));
+    },
+    children: _lodash.default.capitalize(key)
+  }, key));
   const handleMaskChange = mask => {
     var _settings$pseudospati, _settings$pseudospati2;
     let newMasks = settings.pseudospatial.maskValues || (maskSets === null || maskSets === void 0 ? void 0 : maskSets[(_settings$pseudospati = settings.pseudospatial) === null || _settings$pseudospati === void 0 ? void 0 : _settings$pseudospati.maskSet]);
@@ -75,28 +81,44 @@ function MaskSet() {
       });
     }
   };
-  const masksList = _lodash.default.map(maskSets === null || maskSets === void 0 ? void 0 : maskSets[(_settings$pseudospati5 = settings.pseudospatial) === null || _settings$pseudospati5 === void 0 ? void 0 : _settings$pseudospati5.maskSet], mask => /*#__PURE__*/React.createElement(_reactBootstrap.Dropdown.ItemText, {
-    key: mask
-  }, /*#__PURE__*/React.createElement(_reactBootstrap.Form.Check, {
-    type: "checkbox",
-    label: mask,
-    checked: !settings.pseudospatial.maskValues || settings.pseudospatial.maskValues.includes(mask),
-    onChange: () => handleMaskChange(mask)
-  })));
+  const masksList = _lodash.default.map(maskSets === null || maskSets === void 0 ? void 0 : maskSets[(_settings$pseudospati5 = settings.pseudospatial) === null || _settings$pseudospati5 === void 0 ? void 0 : _settings$pseudospati5.maskSet], mask => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.ItemText, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Check, {
+      type: "checkbox",
+      label: mask,
+      checked: !settings.pseudospatial.maskValues || settings.pseudospatial.maskValues.includes(mask),
+      onChange: () => handleMaskChange(mask)
+    })
+  }, mask));
   const nMasks = settings.pseudospatial.maskValues ? (_settings$pseudospati6 = settings.pseudospatial.maskValues) === null || _settings$pseudospati6 === void 0 ? void 0 : _settings$pseudospati6.length : (maskSets === null || maskSets === void 0 || (_maskSets$settings$ps2 = maskSets[(_settings$pseudospati7 = settings.pseudospatial) === null || _settings$pseudospati7 === void 0 ? void 0 : _settings$pseudospati7.maskSet]) === null || _maskSets$settings$ps2 === void 0 ? void 0 : _maskSets$settings$ps2.length) || "No";
   const toggleAllChecked = !settings.pseudospatial.maskValues || ((_settings$pseudospati8 = settings.pseudospatial.maskValues) === null || _settings$pseudospati8 === void 0 ? void 0 : _settings$pseudospati8.length) === (maskSets === null || maskSets === void 0 || (_maskSets$settings$ps3 = maskSets[(_settings$pseudospati9 = settings.pseudospatial) === null || _settings$pseudospati9 === void 0 ? void 0 : _settings$pseudospati9.maskSet]) === null || _maskSets$settings$ps3 === void 0 ? void 0 : _maskSets$settings$ps3.length);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/React.createElement(_reactBootstrap.Dropdown.Toggle, {
-    variant: "light"
-  }, _lodash.default.capitalize(settings.pseudospatial.maskSet || "Select a mask set")), /*#__PURE__*/React.createElement(_reactBootstrap.Dropdown.Menu, null, /*#__PURE__*/React.createElement(_reactBootstrap.Dropdown.Header, null, "Mask set"), maskSetList)), /*#__PURE__*/React.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/React.createElement(_reactBootstrap.Dropdown.Toggle, {
-    variant: "light"
-  }, nMasks, " masks selected"), /*#__PURE__*/React.createElement(_reactBootstrap.Dropdown.Menu, null, /*#__PURE__*/React.createElement(_reactBootstrap.Dropdown.Header, null, "Masks"), /*#__PURE__*/React.createElement(_reactBootstrap.Dropdown.ItemText, {
-    key: "toggle-all"
-  }, /*#__PURE__*/React.createElement(_reactBootstrap.Form.Check, {
-    type: "checkbox",
-    label: "Toggle all",
-    checked: toggleAllChecked,
-    onChange: toggleMasks
-  })), masksList)));
+  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(settings.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]
+      })]
+    })]
+  });
 }
 function OpacitySlider(_ref) {
   let {
@@ -104,32 +126,35 @@ function OpacitySlider(_ref) {
     setOpacity
   } = _ref;
   const [sliderValue, setSliderValue] = (0, _react.useState)(opacity);
-  return /*#__PURE__*/React.createElement(_material.Box, {
-    className: "w-100"
-  }, /*#__PURE__*/React.createElement(_material.Typography, {
-    id: "opacity-range",
-    gutterBottom: true
-  }, "Reference image opacity"), /*#__PURE__*/React.createElement("div", {
-    className: "px-4"
-  }, /*#__PURE__*/React.createElement(_material.Slider, {
-    "aria-labelledby": "opacity-range",
-    min: 0,
-    max: 1,
-    step: 0.05,
-    value: sliderValue,
-    onChange: (_e, value) => setSliderValue(value),
-    onChangeCommitted: (_e, value) => setOpacity(value),
-    valueLabelDisplay: "auto",
-    getAriaValueText: value => "".concat(value * 100, "%"),
-    valueLabelFormat: value => "".concat((value * 100).toFixed(0), "%"),
-    marks: [{
-      value: 0,
-      label: "0%"
-    }, {
-      value: 1,
-      label: "100%"
-    }]
-  })));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    className: "w-100",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+      id: "opacity-range",
+      gutterBottom: true,
+      children: "Reference image opacity"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "px-4",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Slider, {
+        "aria-labelledby": "opacity-range",
+        min: 0,
+        max: 1,
+        step: 0.05,
+        value: sliderValue,
+        onChange: (_e, value) => setSliderValue(value),
+        onChangeCommitted: (_e, value) => setOpacity(value),
+        valueLabelDisplay: "auto",
+        getAriaValueText: value => "".concat(value * 100, "%"),
+        valueLabelFormat: value => "".concat((value * 100).toFixed(0), "%"),
+        marks: [{
+          value: 0,
+          label: "0%"
+        }, {
+          value: 1,
+          label: "100%"
+        }]
+      })
+    })]
+  });
 }
 
 // @TODO: add colormap, colorbar slider
@@ -142,15 +167,20 @@ function PseudospatialToolbar(_ref2) {
   } = (0, _DatasetContext.useDataset)();
   const settings = (0, _SettingsContext.useSettings)();
   const dispatch = (0, _SettingsContext.useSettingsDispatch)();
-  return /*#__PURE__*/React.createElement("div", {
-    className: "cherita-pseudospatial-toolbar"
-  }, /*#__PURE__*/React.createElement(_reactBootstrap.ButtonGroup, null, /*#__PURE__*/React.createElement(MaskSet, null)), /*#__PURE__*/React.createElement(_reactBootstrap.ButtonGroup, null, plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL && /*#__PURE__*/React.createElement(CategoricalMode, null)), imageUrl && /*#__PURE__*/React.createElement(OpacitySlider, {
-    opacity: settings.pseudospatial.refImg.opacity,
-    setOpacity: opacity => {
-      dispatch({
-        type: "set.pseudospatial.refImg.opacity",
-        opacity: opacity
-      });
-    }
-  }));
+  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, {})
+    }), imageUrl && /*#__PURE__*/(0, _jsxRuntime.jsx)(OpacitySlider, {
+      opacity: settings.pseudospatial.refImg.opacity,
+      setOpacity: opacity => {
+        dispatch({
+          type: "set.pseudospatial.refImg.opacity",
+          opacity: opacity
+        });
+      }
+    })]
+  });
 }

package/dist/cjs/components/scatterplot/Scatterplot.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Scatterplot = Scatterplot;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _layers = require("@deck.gl/layers");
 var _react2 = require("@deck.gl/react");
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
@@ -13,8 +13,6 @@ var _editModes = require("@nebula.gl/edit-modes");
 var _layers2 = require("@nebula.gl/layers");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
-var _SpatialControls = require("./SpatialControls");
-var _Toolbox = require("./Toolbox");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
 var _FilterContext = require("../../context/FilterContext");
@@ -27,8 +25,11 @@ var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _Resolver = require("../../utils/Resolver");
 var _string = require("../../utils/string");
 var _zarrData = require("../../utils/zarrData");
+var _PlotAlert = require("../full-page/PlotAlert");
+var _SpatialControls = require("./SpatialControls");
+var _Toolbox = require("./Toolbox");
+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; }
@@ -49,6 +50,8 @@ function Scatterplot(_ref) {
     radius = null,
     setShowObs,
     setShowVars,
+    plotType,
+    setPlotType,
     isFullscreen = false
   } = _ref;
   const {
@@ -75,6 +78,7 @@ function Scatterplot(_ref) {
     values: []
   });
   const [coordsError, setCoordsError] = (0, _react.useState)(null);
+  const [hasObsm, setHasObsm] = (0, _react.useState)(true);
   const [dataError, setDataError] = (0, _react.useState)(null);
   const selectedObs = (0, _Resolver.useSelectedObs)();
 
@@ -371,65 +375,83 @@ function Scatterplot(_ref) {
     };
   };
   const error = settings.selectedObsm && ((_obsmData$serverError = obsmData.serverError) === null || _obsmData$serverError === void 0 ? void 0 : _obsmData$serverError.length) || dataError || settings.labelObs.length && ((_labelObsData$serverE = labelObsData.serverError) === null || _labelObsData$serverE === void 0 ? void 0 : _labelObsData$serverE.length) || coordsError;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "cherita-container-scatterplot"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "cherita-scatterplot"
-  }, obsmData.isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, {
-    disableShrink: true
-  }), isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingLinear, null), /*#__PURE__*/_react.default.createElement(_react2.DeckGL, {
-    viewState: viewState,
-    onViewStateChange: e => setViewState(e.viewState),
-    controller: {
-      doubleClickZoom: mode === _editModes.ViewMode
-    },
-    layers: layers,
-    onClick: onLayerClick,
-    getTooltip: getTooltip,
-    onAfterRender: () => {
-      setIsRendering(false);
-    },
-    useDevicePixels: false,
-    getCursor: _ref6 => {
-      let {
-        isDragging
-      } = _ref6;
-      return mode !== _editModes.ViewMode ? "crosshair" : isDragging ? "grabbing" : "grab";
-    },
-    ref: deckRef
-  }), /*#__PURE__*/_react.default.createElement(_SpatialControls.SpatialControls, {
-    mode: mode,
-    setMode: setMode,
-    features: features,
-    setFeatures: setFeatures,
-    selectedFeatureIndexes: selectedFeatureIndexes,
-    resetBounds: () => setViewState(getBounds()),
-    increaseZoom: () => setViewState(v => _objectSpread(_objectSpread({}, v), {}, {
-      zoom: v.zoom + 1
-    })),
-    decreaseZoom: () => setViewState(v => _objectSpread(_objectSpread({}, v), {}, {
-      zoom: v.zoom - 1
-    })),
-    setShowObs: setShowObs,
-    setShowVars: setShowVars,
-    isFullscreen: isFullscreen
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "cherita-spatial-footer"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "cherita-toolbox-footer"
-  }, !!error && !isRendering && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
-    variant: "danger"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert.Heading, null, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faTriangleExclamation
-  }), "\xA0Error loading data"), /*#__PURE__*/_react.default.createElement("p", {
-    className: "mb-0"
-  }, error.message)), /*#__PURE__*/_react.default.createElement(_Toolbox.Toolbox, {
-    mode: settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? (_settings$selectedVar = settings.selectedVar) === null || _settings$selectedVar === void 0 ? void 0 : _settings$selectedVar.name : settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS ? selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.name : null,
-    obsLength: parseInt((_data$positions = data.positions) === null || _data$positions === void 0 ? void 0 : _data$positions.length),
-    slicedLength: parseInt(slicedLength)
-  })), !error && /*#__PURE__*/_react.default.createElement(_Legend.Legend, {
-    isCategorical: isCategorical,
-    min: min,
-    max: max
-  }))));
+  if (!hasObsm) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PlotAlert.PlotAlert, {
+      variant: "info",
+      heading: "Scatterplot unavailable for this dataset",
+      plotType: plotType,
+      setPlotType: setPlotType,
+      children: "This dataset does not include any embeddings, so a scatterplot cannot be displayed. Please choose a different plot type to explore the data."
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "cherita-container-scatterplot",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "cherita-scatterplot",
+      children: [obsmData.isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingSpinner, {
+        disableShrink: true
+      }), isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingLinear, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.DeckGL, {
+        viewState: viewState,
+        onViewStateChange: e => setViewState(e.viewState),
+        controller: {
+          doubleClickZoom: mode === _editModes.ViewMode
+        },
+        layers: layers,
+        onClick: onLayerClick,
+        getTooltip: getTooltip,
+        onAfterRender: () => {
+          setIsRendering(false);
+        },
+        useDevicePixels: false,
+        getCursor: _ref6 => {
+          let {
+            isDragging
+          } = _ref6;
+          return mode !== _editModes.ViewMode ? "crosshair" : isDragging ? "grabbing" : "grab";
+        },
+        ref: deckRef
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpatialControls.SpatialControls, {
+        mode: mode,
+        setMode: setMode,
+        features: features,
+        setFeatures: setFeatures,
+        selectedFeatureIndexes: selectedFeatureIndexes,
+        resetBounds: () => setViewState(getBounds()),
+        increaseZoom: () => setViewState(v => _objectSpread(_objectSpread({}, v), {}, {
+          zoom: v.zoom + 1
+        })),
+        decreaseZoom: () => setViewState(v => _objectSpread(_objectSpread({}, v), {}, {
+          zoom: v.zoom - 1
+        })),
+        setShowObs: setShowObs,
+        setShowVars: setShowVars,
+        isFullscreen: isFullscreen
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "cherita-spatial-footer",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "cherita-toolbox-footer",
+          children: [!!error && !isRendering && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Alert, {
+            variant: "danger",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Alert.Heading, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+                icon: _freeSolidSvgIcons.faTriangleExclamation
+              }), "\xA0Error loading data"]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+              className: "mb-0",
+              children: error.message
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbox.Toolbox, {
+            mode: settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? (_settings$selectedVar = settings.selectedVar) === null || _settings$selectedVar === void 0 ? void 0 : _settings$selectedVar.name : settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS ? selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.name : null,
+            obsLength: parseInt((_data$positions = data.positions) === null || _data$positions === void 0 ? void 0 : _data$positions.length),
+            slicedLength: parseInt(slicedLength),
+            setHasObsm: setHasObsm
+          })]
+        }), !error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Legend.Legend, {
+          isCategorical: isCategorical,
+          min: min,
+          max: max
+        })]
+      })]
+    })
+  });
 }

package/dist/cjs/components/scatterplot/ScatterplotControls.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ScatterplotControls = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _material = require("@mui/material");
 var _reactBootstrap = require("react-bootstrap");
 var _constants = require("../../constants/constants");
@@ -12,11 +12,11 @@ var _FilterContext = require("../../context/FilterContext");
 var _SettingsContext = require("../../context/SettingsContext");
 var _Resolver = require("../../utils/Resolver");
 var _Controls = require("../controls/Controls");
-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); }
+var _jsxRuntime = require("react/jsx-runtime");
 const ScatterplotControls = () => {
   const settings = (0, _SettingsContext.useSettings)();
   const dispatch = (0, _SettingsContext.useSettingsDispatch)();
-  const [sliderValue, setSliderValue] = _react.default.useState(settings.controls.range || [0, 1]);
+  const [sliderValue, setSliderValue] = (0, _react.useState)(settings.controls.range || [0, 1]);
   const {
     valueMin,
     valueMax
@@ -46,29 +46,37 @@ const ScatterplotControls = () => {
   (0, _react.useEffect)(() => {
     setSliderValue(settings.controls.range);
   }, [settings.controls.range]);
-  const rangeSlider = /*#__PURE__*/_react.default.createElement(_material.Box, {
-    className: "w-100"
-  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
-    id: "colorscale-range",
-    gutterBottom: true
-  }, "Colorscale range"), /*#__PURE__*/_react.default.createElement("div", {
-    className: "px-4"
-  }, /*#__PURE__*/_react.default.createElement(_material.Slider, {
-    "aria-labelledby": "colorscale-range",
-    min: 0,
-    max: 1,
-    step: 0.001,
-    value: sliderValue,
-    onChange: updateSlider,
-    onChangeCommitted: updateRange,
-    valueLabelDisplay: "auto",
-    getAriaValueText: valueLabelFormat,
-    valueLabelFormat: valueLabelFormat,
-    marks: marks,
-    disabled: isCategorical
-  })));
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form, null, /*#__PURE__*/_react.default.createElement(_Controls.ColorscaleSelect, null), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Group, {
-    className: "mb-2"
-  }, rangeSlider)));
+  const rangeSlider = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    className: "w-100",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+      id: "colorscale-range",
+      gutterBottom: true,
+      children: "Colorscale range"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "px-4",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Slider, {
+        "aria-labelledby": "colorscale-range",
+        min: 0,
+        max: 1,
+        step: 0.001,
+        value: sliderValue,
+        onChange: updateSlider,
+        onChangeCommitted: updateRange,
+        valueLabelDisplay: "auto",
+        getAriaValueText: valueLabelFormat,
+        valueLabelFormat: valueLabelFormat,
+        marks: marks,
+        disabled: isCategorical
+      })
+    })]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Form, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Controls.ColorscaleSelect, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Group, {
+        className: "mb-2",
+        children: rangeSlider
+      })]
+    })
+  });
 };
 exports.ScatterplotControls = ScatterplotControls;