@haniffalab/cherita-react 1.4.1 → 1.4.2-dev.2025-10-29.81a6b906

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

@@ -4,79 +4,57 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PseudospatialToolbar = PseudospatialToolbar;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
+var _material = require("@mui/material");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
 var _SettingsContext = require("../../context/SettingsContext");
-var _requests = require("../../utils/requests");
+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); }
 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.default.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",
+        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.default.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Toggle, {
-    variant: "light"
-  }, _lodash.default.capitalize(mode.name)), /*#__PURE__*/_react.default.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;
-  const ENDPOINT = "masks";
-  const dataset = (0, _DatasetContext.useDataset)();
   const settings = (0, _SettingsContext.useSettings)();
   const dispatch = (0, _SettingsContext.useSettingsDispatch)();
-  const [maskSets, setMaskSets] = (0, _react.useState)(null);
-  const [params, setParams] = (0, _react.useState)({
-    url: dataset.url
-  });
-  (0, _react.useEffect)(() => {
-    setParams(p => {
-      return _objectSpread(_objectSpread({}, p), {}, {
-        url: dataset.url
-      });
-    });
-  }, [dataset.url]);
   const {
-    fetchedData,
-    isPending,
-    serverError
-  } = (0, _requests.useFetch)(ENDPOINT, params, {
-    refetchOnMount: false
-  });
-  (0, _react.useEffect)(() => {
-    if (!isPending && !serverError) {
-      setMaskSets(fetchedData);
-    }
-  }, [fetchedData, isPending, serverError]);
-  const maskSetList = _lodash.default.map(maskSets, (ms, key) => /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
-    key: key,
+    pseudospatial: maskSets
+  } = settings.data;
+  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",
+        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]);
@@ -85,7 +63,7 @@ function MaskSet() {
       newMasks = null;
     }
     dispatch({
-      type: "set.pseudospatial.maskValues",
+      type: 'set.pseudospatial.maskValues',
       maskValues: newMasks
     });
   };
@@ -93,46 +71,116 @@ function MaskSet() {
     var _settings$pseudospati3, _maskSets$settings$ps, _settings$pseudospati4;
     if (!settings.pseudospatial.maskValues || ((_settings$pseudospati3 = settings.pseudospatial.maskValues) === null || _settings$pseudospati3 === void 0 ? void 0 : _settings$pseudospati3.length) === (maskSets === null || maskSets === void 0 || (_maskSets$settings$ps = maskSets[(_settings$pseudospati4 = settings.pseudospatial) === null || _settings$pseudospati4 === void 0 ? void 0 : _settings$pseudospati4.maskSet]) === null || _maskSets$settings$ps === void 0 ? void 0 : _maskSets$settings$ps.length)) {
       dispatch({
-        type: "set.pseudospatial.maskValues",
+        type: 'set.pseudospatial.maskValues',
         maskValues: []
       });
     } else {
       dispatch({
-        type: "set.pseudospatial.maskValues",
+        type: 'set.pseudospatial.maskValues',
         maskValues: null
       });
     }
   };
-  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.default.createElement(_reactBootstrap.Dropdown.ItemText, {
-    key: mask
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Check, {
-    type: "checkbox",
-    label: mask,
-    checked: !settings.pseudospatial.maskValues || settings.pseudospatial.maskValues.includes(mask),
-    onChange: () => handleMaskChange(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 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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Toggle, {
-    variant: "light"
-  }, _lodash.default.capitalize(settings.pseudospatial.maskSet || "Select a mask set")), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Header, null, "Mask set"), maskSetList)), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Toggle, {
-    variant: "light"
-  }, nMasks, " masks selected"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Header, null, "Masks"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.ItemText, {
-    key: "toggle-all"
-  }, /*#__PURE__*/_react.default.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 {
+    opacity,
+    setOpacity
+  } = _ref;
+  const [sliderValue, setSliderValue] = (0, _react.useState)(opacity);
+  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
-function PseudospatialToolbar(_ref) {
+function PseudospatialToolbar(_ref2) {
   let {
     plotType
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "cherita-pseudospatial-toolbar"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(MaskSet, null)), /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonGroup, null, plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL && /*#__PURE__*/_react.default.createElement(CategoricalMode, null)));
+  } = _ref2;
+  const {
+    imageUrl
+  } = (0, _DatasetContext.useDataset)();
+  const settings = (0, _SettingsContext.useSettings)();
+  const dispatch = (0, _SettingsContext.useSettingsDispatch)();
+  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");
@@ -24,10 +24,12 @@ var _colorHelper = require("../../helpers/color-helper");
 var _mapHelper = require("../../helpers/map-helper");
 var _Legend = require("../../utils/Legend");
 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 _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; }
@@ -43,11 +45,13 @@ const INITIAL_VIEW_STATE = {
   bearing: 0
 };
 function Scatterplot(_ref) {
-  var _settings$selectedObs2, _settings$selectedObs5, _settings$selectedObs8, _features$features2, _obsmData$serverError, _xData$serverError, _obsData$serverError, _labelObsData$serverE, _settings$selectedVar, _settings$selectedObs9, _data$positions;
+  var _features$features2, _obsmData$serverError, _labelObsData$serverE, _settings$selectedVar, _data$positions;
   let {
     radius = null,
     setShowObs,
     setShowVars,
+    plotType,
+    setPlotType,
     isFullscreen = false
   } = _ref;
   const {
@@ -74,11 +78,14 @@ 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)();
 
   // EditableGeoJsonLayer
   const [mode, setMode] = (0, _react.useState)(() => _editModes.ViewMode);
   const [features, setFeatures] = (0, _react.useState)({
-    type: "FeatureCollection",
+    type: 'FeatureCollection',
     features: settings.polygons[settings.selectedObsm] || []
   });
   const [selectedFeatureIndexes, setSelectedFeatureIndexes] = (0, _react.useState)([]);
@@ -107,13 +114,25 @@ function Scatterplot(_ref) {
       setData(d => {
         let values = d.values;
         if (settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR) {
-          values = !xData.serverError ? xData.data : values;
+          if (!xData.serverError) {
+            values = xData.data;
+            setDataError(null);
+          } else {
+            values = [];
+            setDataError(xData.serverError);
+          }
         } else if (settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS) {
-          values = !obsData.serverError ? obsData.data : values;
+          if (!obsData.serverError) {
+            values = obsData.data;
+            setDataError(null);
+          } else {
+            values = [];
+            setDataError(obsData.serverError);
+          }
         }
         if (!obsmData.serverError && obsmData.data) {
           if (obsmData.data[0].length !== 2) {
-            setCoordsError("Invalid coordinates. Expected 2D coordinates");
+            setCoordsError('Invalid coordinates. Expected 2D coordinates');
             return {
               positions: [],
               values: []
@@ -182,8 +201,7 @@ function Scatterplot(_ref) {
     getOriginalIndex,
     sortedIndexMap
   } = (0, _react.useMemo)(() => {
-    var _settings$selectedObs;
-    if ((settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR || settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS && ((_settings$selectedObs = settings.selectedObs) === null || _settings$selectedObs === void 0 ? void 0 : _settings$selectedObs.type) === _constants.OBS_TYPES.CONTINUOUS) && data.positions && data.values && data.positions.length === data.values.length) {
+    if ((settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR || settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS && (selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type) === _constants.OBS_TYPES.CONTINUOUS) && data.positions && data.values && data.positions.length === data.values.length) {
       const sortedIndices = _lodash.default.map(data.values, (_v, i) => i).sort((a, b) => data.values[a] - data.values[b]);
       const sortedIndexMap = new Map(_lodash.default.map(sortedIndices, (originalIndex, sortedIndex) => [originalIndex, sortedIndex]));
       return {
@@ -200,24 +218,17 @@ function Scatterplot(_ref) {
       // return original index
       sortedIndexMap: identitySortedIndexMap // return original index
     };
-  }, [data, identityGetOriginalIndex, identitySortedIndexMap, settings.colorEncoding, (_settings$selectedObs2 = settings.selectedObs) === null || _settings$selectedObs2 === void 0 ? void 0 : _settings$selectedObs2.type]);
+  }, [data, identityGetOriginalIndex, identitySortedIndexMap, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type, settings.colorEncoding]);
   const sortedObsIndices = (0, _react.useMemo)(() => {
     return obsIndices ? new Set(Array.from(obsIndices, i => sortedIndexMap.get(i))) : obsIndices;
   }, [obsIndices, sortedIndexMap]);
   const isCategorical = (0, _react.useMemo)(() => {
     if (settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS) {
-      var _settings$selectedObs3, _settings$selectedObs4;
-      return ((_settings$selectedObs3 = settings.selectedObs) === null || _settings$selectedObs3 === void 0 ? void 0 : _settings$selectedObs3.type) === _constants.OBS_TYPES.CATEGORICAL || ((_settings$selectedObs4 = settings.selectedObs) === null || _settings$selectedObs4 === void 0 ? void 0 : _settings$selectedObs4.type) === _constants.OBS_TYPES.BOOLEAN;
+      return (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;
     } else {
       return false;
     }
-  }, [settings.colorEncoding, (_settings$selectedObs5 = settings.selectedObs) === null || _settings$selectedObs5 === void 0 ? void 0 : _settings$selectedObs5.type]);
-  (0, _react.useEffect)(() => {
-    dispatch({
-      type: "set.controls.valueRange",
-      valueRange: [valueMin, valueMax]
-    });
-  }, [dispatch, valueMax, valueMin]);
+  }, [settings.colorEncoding, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type]);
   const {
     min,
     max
@@ -226,7 +237,6 @@ function Scatterplot(_ref) {
     max: settings.controls.range[1] * (valueMax - valueMin) + valueMin
   };
   const getFillColor = (0, _react.useCallback)((_d, _ref2) => {
-    var _settings$selectedObs6, _settings$selectedObs7;
     let {
       index
     } = _ref2;
@@ -235,10 +245,10 @@ function Scatterplot(_ref) {
       value: (sortedData.values[index] - min) / (max - min),
       categorical: isCategorical,
       grayOut: grayOut
-    }, useUnsColors && settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS && (_settings$selectedObs6 = settings.selectedObs) !== null && _settings$selectedObs6 !== void 0 && _settings$selectedObs6.colors ? {
-      colorscale: (_settings$selectedObs7 = settings.selectedObs) === null || _settings$selectedObs7 === void 0 ? void 0 : _settings$selectedObs7.colors
+    }, useUnsColors && settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS && selectedObs !== null && selectedObs !== void 0 && selectedObs.colors ? {
+      colorscale: selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.colors
     } : {})) || [0, 0, 0, 100];
-  }, [isPending, sortedObsIndices, getColor, sortedData.values, min, max, isCategorical, useUnsColors, settings.colorEncoding, (_settings$selectedObs8 = settings.selectedObs) === null || _settings$selectedObs8 === void 0 ? void 0 : _settings$selectedObs8.colors]);
+  }, [isPending, sortedObsIndices, getColor, sortedData.values, min, max, isCategorical, useUnsColors, settings.colorEncoding, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.colors]);
 
   // @TODO: add support for pseudospatial hover to reflect in radius
   const getRadius = (0, _react.useCallback)((_d, _ref3) => {
@@ -250,7 +260,7 @@ function Scatterplot(_ref) {
   }, [sortedObsIndices]);
   const memoizedLayers = (0, _react.useMemo)(() => {
     return [new _layers.ScatterplotLayer({
-      id: "cherita-layer-scatterplot",
+      id: 'cherita-layer-scatterplot',
       pickable: true,
       data: sortedData.positions,
       radiusScale: radiusScale,
@@ -263,7 +273,7 @@ function Scatterplot(_ref) {
         getRadius: getRadius
       }
     }), new _layers2.EditableGeoJsonLayer({
-      id: "cherita-layer-draw",
+      id: 'cherita-layer-draw',
       data: features,
       mode: mode,
       selectedFeatureIndexes,
@@ -275,7 +285,7 @@ function Scatterplot(_ref) {
         } = _ref4;
         setFeatures(updatedData);
         let updatedSelectedFeatureIndexes = selectedFeatureIndexes;
-        if (editType === "addFeature") {
+        if (editType === 'addFeature') {
           const {
             featureIndexes
           } = editContext;
@@ -303,13 +313,13 @@ function Scatterplot(_ref) {
     var _features$features;
     if (!(features !== null && features !== void 0 && (_features$features = features.features) !== null && _features$features !== void 0 && _features$features.length)) {
       dispatch({
-        type: "disable.slice.polygons"
+        type: 'disable.slice.polygons'
       });
     }
   }, [dispatch, features === null || features === void 0 || (_features$features2 = features.features) === null || _features$features2 === void 0 ? void 0 : _features$features2.length]);
   (0, _react.useEffect)(() => {
     dispatch({
-      type: "set.polygons",
+      type: 'set.polygons',
       obsm: settings.selectedObsm,
       polygons: (features === null || features === void 0 ? void 0 : features.features) || []
     });
@@ -319,7 +329,7 @@ function Scatterplot(_ref) {
       // don't change selection while editing
       return;
     }
-    setSelectedFeatureIndexes(f => info.object ? info.layer.id === "cherita-layer-draw" ? [info.index] : f : []);
+    setSelectedFeatureIndexes(f => info.object ? info.layer.id === 'cherita-layer-draw' ? [info.index] : f : []);
   }
   const getLabel = function (o, v) {
     let isVar = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
@@ -334,13 +344,11 @@ function Scatterplot(_ref) {
       object,
       index
     } = _ref5;
-    if (!object || (object === null || object === void 0 ? void 0 : object.type) === "Feature") return;
+    if (!object || (object === null || object === void 0 ? void 0 : object.type) === 'Feature') return;
     const text = [];
-    if (settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS && settings.selectedObs && !_lodash.default.some(settings.labelObs, {
-      name: settings.selectedObs.name
-    })) {
+    if (settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS && selectedObs && !_lodash.default.includes(settings.labelObs, selectedObs.name)) {
       var _data$values;
-      text.push(getLabel(settings.selectedObs, (_data$values = data.values) === null || _data$values === void 0 ? void 0 : _data$values[getOriginalIndex(index)]));
+      text.push(getLabel(selectedObs, (_data$values = data.values) === null || _data$values === void 0 ? void 0 : _data$values[getOriginalIndex(index)]));
     }
     if (settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR && settings.selectedVar) {
       var _data$values2;
@@ -348,82 +356,102 @@ function Scatterplot(_ref) {
     }
     if (settings.labelObs.length) {
       text.push(..._lodash.default.map(labelObsData.data, (v, k) => {
-        const labelObs = _lodash.default.find(settings.labelObs, o => o.name === k);
+        const labelObs = settings.data.obs[k];
         return getLabel(labelObs, v[getOriginalIndex(index)]);
       }));
     }
     if (!text.length) return;
     const grayOut = sortedObsIndices && !sortedObsIndices.has(index);
     return {
-      text: text.length ? _lodash.default.compact(text).join("\n") : null,
-      className: grayOut ? "tooltip-grayout" : "deck-tooltip",
+      text: text.length ? _lodash.default.compact(text).join('\n') : null,
+      className: grayOut ? 'tooltip-grayout' : 'deck-tooltip',
       style: !grayOut ? {
-        "border-left": "3px solid ".concat((0, _colorHelper.rgbToHex)(getFillColor(null, {
+        'border-left': "3px solid ".concat((0, _colorHelper.rgbToHex)(getFillColor(null, {
           index
         })))
       } : {
-        "border-left": "none"
+        'border-left': 'none'
       }
     };
   };
-  const error = settings.selectedObsm && ((_obsmData$serverError = obsmData.serverError) === null || _obsmData$serverError === void 0 ? void 0 : _obsmData$serverError.length) || settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR && ((_xData$serverError = xData.serverError) === null || _xData$serverError === void 0 ? void 0 : _xData$serverError.length) || settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS && ((_obsData$serverError = obsData.serverError) === null || _obsData$serverError === void 0 ? void 0 : _obsData$serverError.length) || 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(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faTriangleExclamation
-  }), "\xA0Error loading data"), /*#__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 ? (_settings$selectedObs9 = settings.selectedObs) === null || _settings$selectedObs9 === void 0 ? void 0 : _settings$selectedObs9.name : null,
-    obsLength: parseInt((_data$positions = data.positions) === null || _data$positions === void 0 ? void 0 : _data$positions.length),
-    slicedLength: parseInt(slicedLength)
-  })), /*#__PURE__*/_react.default.createElement(_Legend.Legend, {
-    isCategorical: isCategorical,
-    min: min,
-    max: max
-  }))));
+  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;
+  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
+        })]
+      })]
+    })
+  });
 }