@haniffalab/cherita-react 1.3.0 → 1.3.1-dev.2025-10-29.def77f5f

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");
@@ -16,6 +16,7 @@ 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");
 var _SettingsContext = require("../../context/SettingsContext");
 var _ZarrDataContext = require("../../context/ZarrDataContext");
@@ -23,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; }
@@ -42,13 +45,18 @@ const INITIAL_VIEW_STATE = {
   bearing: 0
 };
 function Scatterplot(_ref) {
-  var _settings$selectedObs3, _features$features2, _obsmData$serverError, _xData$serverError, _obsData$serverError, _labelObsData$serverE, _settings$selectedVar, _settings$selectedObs4, _obsmData$data;
+  var _features$features2, _obsmData$serverError, _labelObsData$serverE, _settings$selectedVar, _data$positions;
   let {
-    radius = 30,
+    radius = null,
     setShowObs,
     setShowVars,
+    plotType,
+    setPlotType,
     isFullscreen = false
   } = _ref;
+  const {
+    useUnsColors
+  } = (0, _DatasetContext.useDataset)();
   const settings = (0, _SettingsContext.useSettings)();
   const {
     obsIndices,
@@ -63,17 +71,21 @@ function Scatterplot(_ref) {
   const deckRef = (0, _react.useRef)(null);
   const [viewState, setViewState] = (0, _react.useState)(INITIAL_VIEW_STATE);
   const [isRendering, setIsRendering] = (0, _react.useState)(true);
+  const [radiusScale, setRadiusScale] = (0, _react.useState)(radius || 1);
+  const [isPending, setIsPending] = (0, _react.useState)(false);
   const [data, setData] = (0, _react.useState)({
-    ids: [],
     positions: [],
-    values: [],
-    sliceValues: []
+    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)([]);
@@ -85,24 +97,74 @@ function Scatterplot(_ref) {
   const labelObsData = (0, _zarrData.useLabelObsData)();
   // @TODO: assert length of obsmData, xData, obsData is equal
 
+  const getRadiusScale = (0, _react.useCallback)(bounds => {
+    if (!!radius) return radius;
+    // From 28 degrees ~= 30km -> 30m radius
+    const lonDim = bounds[1][0] - bounds[0][0];
+    const latDim = bounds[1][1] - bounds[0][1];
+    const minDim = Math.min(lonDim, latDim);
+    const rs = 0.01 / minDim * 111111;
+    return rs;
+  }, [radius]);
   (0, _react.useEffect)(() => {
-    if (!obsmData.isPending && !obsmData.serverError) {
-      var _deckRef$current, _deckRef$current2;
-      setIsRendering(true);
+    if (obsmData.isPending || settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR && xData.isPending || settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS && obsData.isPending) {
+      setIsPending(true);
+    } else {
+      setIsPending(false);
       setData(d => {
-        return _objectSpread(_objectSpread({}, d), {}, {
-          positions: obsmData.data
-        });
+        let values = d.values;
+        if (settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR) {
+          if (!xData.serverError) {
+            values = xData.data;
+            setDataError(null);
+          } else {
+            values = [];
+            setDataError(xData.serverError);
+          }
+        } else if (settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS) {
+          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');
+            return {
+              positions: [],
+              values: []
+            };
+          }
+          setCoordsError(null);
+          return {
+            positions: obsmData.data,
+            values: values
+          };
+        }
+        return {
+          positions: d.positions,
+          values: values
+        };
       });
+    }
+  }, [obsData.data, obsData.isPending, obsData.serverError, obsmData.data, obsmData.isPending, obsmData.serverError, settings.colorEncoding, xData.data, xData.isPending, xData.serverError]);
+  (0, _react.useEffect)(() => {
+    if (data.positions && !!data.positions.length) {
+      var _deckRef$current, _deckRef$current2;
       const mapHelper = new _mapHelper.MapHelper();
       const {
         latitude,
         longitude,
-        zoom
-      } = mapHelper.fitBounds(obsmData.data, {
+        zoom,
+        bounds
+      } = mapHelper.fitBounds(data.positions, {
         width: deckRef === null || deckRef === void 0 || (_deckRef$current = deckRef.current) === null || _deckRef$current === void 0 || (_deckRef$current = _deckRef$current.deck) === null || _deckRef$current === void 0 ? void 0 : _deckRef$current.width,
         height: deckRef === null || deckRef === void 0 || (_deckRef$current2 = deckRef.current) === null || _deckRef$current2 === void 0 || (_deckRef$current2 = _deckRef$current2.deck) === null || _deckRef$current2 === void 0 ? void 0 : _deckRef$current2.height
       });
+      setRadiusScale(getRadiusScale(bounds));
       setViewState(v => {
         return _objectSpread(_objectSpread({}, v), {}, {
           longitude: longitude,
@@ -110,15 +172,8 @@ function Scatterplot(_ref) {
           zoom: zoom
         });
       });
-    } else if (!obsmData.isPending && obsmData.serverError) {
-      setIsRendering(true);
-      setData(d => {
-        return _objectSpread(_objectSpread({}, d), {}, {
-          positions: []
-        });
-      });
     }
-  }, [settings.selectedObsm, obsmData.data, obsmData.isPending, obsmData.serverError]);
+  }, [getRadiusScale, obsmData.data, obsmData.isPending, obsmData.serverError, data.positions]);
   const getBounds = (0, _react.useCallback)(() => {
     var _deckRef$current3, _deckRef$current4;
     const {
@@ -135,71 +190,45 @@ function Scatterplot(_ref) {
       zoom
     };
   }, [data.positions]);
-  (0, _react.useEffect)(() => {
-    if (settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR) {
-      setIsRendering(true);
-      if (!xData.isPending && !xData.serverError) {
-        // @TODO: add condition to check obs slicing
-        setData(d => {
-          return _objectSpread(_objectSpread({}, d), {}, {
-            values: xData.data
-          });
-        });
-      } else if (!xData.isPending && xData.serverError) {
-        setData(d => {
-          return _objectSpread(_objectSpread({}, d), {}, {
-            values: []
-          });
-        });
-      }
-    }
-  }, [settings.colorEncoding, xData.data, xData.isPending, xData.serverError, getColor]);
-  (0, _react.useEffect)(() => {
-    if (settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS) {
-      setIsRendering(true);
-      if (!obsData.isPending && !obsData.serverError) {
-        setData(d => {
-          return _objectSpread(_objectSpread({}, d), {}, {
-            values: obsData.data
-          });
-        });
-      } else if (!obsData.isPending && obsData.serverError) {
-        setData(d => {
-          return _objectSpread(_objectSpread({}, d), {}, {
-            values: []
-          });
-        });
-      }
-    } else if (settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR && settings.sliceBy.obs) {
-      if (!obsData.isPending && !obsData.serverError) {
-        setData(d => {
-          return _objectSpread(_objectSpread({}, d), {}, {
-            sliceValues: obsData.data
-          });
-        });
-      } else if (!obsData.isPending && obsData.serverError) {
-        setData(d => {
-          return _objectSpread(_objectSpread({}, d), {}, {
-            sliceValues: []
-          });
-        });
-      }
+
+  // Make stable references for getOriginalIndex and sortedIndexMap
+  const identityGetOriginalIndex = (0, _react.useCallback)(i => i, []);
+  const identitySortedIndexMap = (0, _react.useMemo)(() => ({
+    get: key => key
+  }), []);
+  const {
+    sortedData,
+    getOriginalIndex,
+    sortedIndexMap
+  } = (0, _react.useMemo)(() => {
+    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 {
+        sortedData: _lodash.default.mapValues(data, (v, _k) => {
+          return v ? _lodash.default.at(v, sortedIndices) : v;
+        }),
+        getOriginalIndex: i => sortedIndices[i],
+        sortedIndexMap: sortedIndexMap
+      };
     }
-  }, [settings.colorEncoding, obsData.data, obsData.isPending, obsData.serverError, settings.sliceBy.obs]);
+    return {
+      sortedData: data,
+      getOriginalIndex: identityGetOriginalIndex,
+      // return original index
+      sortedIndexMap: identitySortedIndexMap // return original index
+    };
+  }, [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$selectedObs, _settings$selectedObs2;
-      return ((_settings$selectedObs = settings.selectedObs) === null || _settings$selectedObs === void 0 ? void 0 : _settings$selectedObs.type) === _constants.OBS_TYPES.CATEGORICAL || ((_settings$selectedObs2 = settings.selectedObs) === null || _settings$selectedObs2 === void 0 ? void 0 : _settings$selectedObs2.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$selectedObs3 = settings.selectedObs) === null || _settings$selectedObs3 === void 0 ? void 0 : _settings$selectedObs3.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
@@ -211,28 +240,30 @@ function Scatterplot(_ref) {
     let {
       index
     } = _ref2;
-    const grayOut = obsIndices && !obsIndices.has(index);
-    return getColor({
-      value: (data.values[index] - min) / (max - min),
+    const grayOut = isPending || sortedObsIndices && !sortedObsIndices.has(index);
+    return getColor(_objectSpread({
+      value: (sortedData.values[index] - min) / (max - min),
       categorical: isCategorical,
       grayOut: grayOut
-    }) || [0, 0, 0, 100];
-  }, [data.values, obsIndices, getColor, isCategorical, max, min]);
+    }, 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, 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) => {
     let {
       index
     } = _ref3;
-    const grayOut = obsIndices && !obsIndices.has(index);
+    const grayOut = sortedObsIndices && !sortedObsIndices.has(index);
     return grayOut ? 1 : 3;
-  }, [obsIndices]);
+  }, [sortedObsIndices]);
   const memoizedLayers = (0, _react.useMemo)(() => {
     return [new _layers.ScatterplotLayer({
-      id: "cherita-layer-scatterplot",
+      id: 'cherita-layer-scatterplot',
       pickable: true,
-      data: data.positions,
-      radiusScale: radius,
+      data: sortedData.positions,
+      radiusScale: radiusScale,
       radiusMinPixels: 1,
       getPosition: d => d,
       getFillColor: getFillColor,
@@ -242,7 +273,7 @@ function Scatterplot(_ref) {
         getRadius: getRadius
       }
     }), new _layers2.EditableGeoJsonLayer({
-      id: "cherita-layer-draw",
+      id: 'cherita-layer-draw',
       data: features,
       mode: mode,
       selectedFeatureIndexes,
@@ -254,7 +285,7 @@ function Scatterplot(_ref) {
         } = _ref4;
         setFeatures(updatedData);
         let updatedSelectedFeatureIndexes = selectedFeatureIndexes;
-        if (editType === "addFeature") {
+        if (editType === 'addFeature') {
           const {
             featureIndexes
           } = editContext;
@@ -275,20 +306,20 @@ function Scatterplot(_ref) {
         }
       }
     })];
-  }, [data.positions, features, getFillColor, getRadius, mode, radius, selectedFeatureIndexes]);
+  }, [sortedData.positions, features, getFillColor, getRadius, mode, radiusScale, selectedFeatureIndexes]);
   const layers = (0, _react.useDeferredValue)(mode === _editModes.ViewMode ? memoizedLayers.reverse() : memoizedLayers); // draw scatterplot on top of polygons when in ViewMode
 
   (0, _react.useEffect)(() => {
     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) || []
     });
@@ -298,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;
@@ -313,97 +344,114 @@ 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
-    })) {
-      var _obsData$data;
-      text.push(getLabel(settings.selectedObs, (_obsData$data = obsData.data) === null || _obsData$data === void 0 ? void 0 : _obsData$data[index]));
+    if (settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS && selectedObs && !_lodash.default.includes(settings.labelObs, selectedObs.name)) {
+      var _data$values;
+      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 _xData$data;
-      text.push(getLabel(settings.selectedVar, (_xData$data = xData.data) === null || _xData$data === void 0 ? void 0 : _xData$data[index], true));
+      var _data$values2;
+      text.push(getLabel(settings.selectedVar, (_data$values2 = data.values) === null || _data$values2 === void 0 ? void 0 : _data$values2[getOriginalIndex(index)], true));
     }
     if (settings.labelObs.length) {
       text.push(..._lodash.default.map(labelObsData.data, (v, k) => {
-        const labelObs = _lodash.default.find(settings.labelObs, o => o.name === k);
-        return getLabel(labelObs, v[index]);
+        const labelObs = settings.data.obs[k];
+        return getLabel(labelObs, v[getOriginalIndex(index)]);
       }));
     }
     if (!text.length) return;
-    const grayOut = obsIndices && !obsIndices.has(index);
+    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 isPending = (isRendering || xData.isPending || obsmData.isPending) && !obsmData.isPending;
-  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.lengh && ((_labelObsData$serverE = labelObsData.serverError) === null || _labelObsData$serverE === void 0 ? void 0 : _labelObsData$serverE.length);
-  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 && !isPending && /*#__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$selectedObs4 = settings.selectedObs) === null || _settings$selectedObs4 === void 0 ? void 0 : _settings$selectedObs4.name : null,
-    obsLength: parseInt((_obsmData$data = obsmData.data) === null || _obsmData$data === void 0 ? void 0 : _obsmData$data.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
+        })]
+      })]
+    })
+  });
 }