@haniffalab/cherita-react 0.2.0-dev.2024-05-09.97c686f2 → 0.2.0-dev.2024-05-21.ca7d726c

package/dist/components/Offcanvas/index.js

@@ -11,6 +11,7 @@ exports.OffcanvasVars = OffcanvasVars;
 var _react = require("react");
 var _Offcanvas = _interopRequireDefault(require("react-bootstrap/Offcanvas"));
 var _cheritaReact = require("@haniffalab/cherita-react");
+var _SearchBar = require("../search-bar/SearchBar");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function OffcanvasObs(_ref) {
@@ -65,10 +66,12 @@ function OffcanvasVars(_ref3) {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Title, {
         children: "Features"
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Body, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_cheritaReact.VarNamesList, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Offcanvas.default.Body, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchBar.SearchBar, {
+        searchDiseases: true
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_cheritaReact.VarNamesList, {
         mode: mode
-      })
+      })]
     })]
   });
 }

package/dist/components/obs-list/ObsList.js

@@ -11,7 +11,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _DatasetContext = require("../../context/DatasetContext");
 var _requests = require("../../utils/requests");
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
-var _colorHelper = require("../../helpers/color-helper");
 var _LoadingSpinner = require("../../utils/LoadingSpinner");
 var _reactBootstrap = require("react-bootstrap");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -59,7 +58,6 @@ function ObsColsList() {
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url
   });
-  const colorHelper = new _colorHelper.ColorHelper();
   (0, _react.useEffect)(() => {
     setParams(p => {
       return {
@@ -133,7 +131,7 @@ function ObsColsList() {
       value: obs
     });
   }, [obs, dispatch]);
-  function categoricalList(item) {
+  const categoricalList = (0, _react.useCallback)(function (item) {
     let active = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Accordion.Item, {
       eventKey: item.name,
@@ -143,19 +141,25 @@ function ObsColsList() {
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Accordion.Body, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup, {
           variant: "flush",
-          children: item.values.map((value, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.ListGroup.Item, {
-            children: [value, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              className: "cm-string cm-color",
-              style: {
-                backgroundColor: "rgb(".concat(obs[item.name]["state"][index]["color"], ")")
-              }
-            })]
+          children: item.values.map((value, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "d-flex justify-content-between",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "text-wrap text-break",
+                children: value
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: "cm-string cm-color",
+                style: {
+                  backgroundColor: "rgb(".concat(obs[item.name]["state"][index]["color"], ")")
+                }
+              })]
+            })
           }, index))
         })
       })]
     }, item.name);
-  }
-  function continuousList(item) {
+  }, [obs]);
+  const continuousList = (0, _react.useCallback)(function (item) {
     let active = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Accordion.Item, {
       eventKey: item.name,
@@ -176,8 +180,8 @@ function ObsColsList() {
         })]
       })]
     }, item.name);
-  }
-  function otherList(item) {
+  }, []);
+  const otherList = (0, _react.useCallback)(function (item) {
     let active = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Accordion.Item, {
       eventKey: item.name,
@@ -188,7 +192,7 @@ function ObsColsList() {
         children: item.type
       })]
     }, item.name);
-  }
+  }, []);
   const obsList = (0, _react.useMemo)(() => obsColsList.map(item => {
     if (item.type === "categorical") {
       return categoricalList(item, active);
@@ -197,7 +201,7 @@ function ObsColsList() {
     } else {
       return otherList(item, active);
     }
-  }), [obsColsList, active]);
+  }), [obsColsList, categoricalList, active, continuousList, otherList]);
   if (!serverError) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "position-relative",
@@ -212,6 +216,10 @@ function ObsColsList() {
                 type: "obsSelected",
                 obs: obsColsList.find(obs => obs.name === key)
               });
+              dispatch({
+                type: "set.colorEncoding",
+                value: "obs"
+              });
             }
           },
           children: obsList

package/dist/components/scatterplot/Legend.js

@@ -4,63 +4,73 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Legend = Legend;
-require("bootstrap/dist/css/bootstrap.min.css");
-var _Dropdown = _interopRequireDefault(require("react-bootstrap/Dropdown"));
 var _react = require("react");
-var _DatasetContext = require("../../context/DatasetContext");
+require("bootstrap/dist/css/bootstrap.min.css");
 var _lodash = _interopRequireDefault(require("lodash"));
-var _colorHelper = require("../../helpers/color-helper");
-var _OverlayTrigger = _interopRequireDefault(require("react-bootstrap/OverlayTrigger"));
-var _layers = require("@nebula.gl/layers");
-var _chromaJs = _interopRequireDefault(require("chroma-js"));
-var _Tooltip = _interopRequireDefault(require("react-bootstrap/Tooltip"));
-var _constants = require("../../constants/constants");
-var _editModes = require("@nebula.gl/edit-modes");
-var _Button = _interopRequireDefault(require("react-bootstrap/Button"));
-var _DropdownButton = _interopRequireDefault(require("react-bootstrap/DropdownButton"));
-var _ButtonGroup = _interopRequireDefault(require("react-bootstrap/ButtonGroup"));
-var _reactFontawesome = require("@fortawesome/react-fontawesome");
-var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+var _DatasetContext = require("../../context/DatasetContext");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function Legend(_ref) {
   let {
-    values
+    scale
   } = _ref;
   const dataset = (0, _DatasetContext.useDataset)();
-  const colorHelper = new _colorHelper.ColorHelper();
-  if (dataset.colorEncoding === "var") {
-    let c = colorHelper.getScale(dataset, values);
-    var dom = c.domain ? c.domain() : [0, 1],
-      dmin = Math.min(dom[0], dom[dom.length - 1]),
-      dmax = Math.max(dom[dom.length - 1], dom[0]);
-    let legendList = [];
-    for (var i = 0; i <= 100; i++) {
-      var color = c(dmin + i / 100 * (dmax - dmin));
-      //console.log(color.hex());
-      legendList.push( /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "grad-step",
-        style: {
-          backgroundColor: color.hex()
-        }
-      }, i));
+  const [legendData, setLegendData] = (0, _react.useState)({
+    dmin: 0,
+    dmax: 1,
+    list: []
+  });
+  (0, _react.useEffect)(() => {
+    if (scale) {
+      const dom = scale.domain ? scale.domain() : [0, 1];
+      const dmin = Math.min(dom[0], dom[dom.length - 1]);
+      const dmax = Math.max(dom[dom.length - 1], dom[0]);
+      const spanList = _lodash.default.range(100).map(i => {
+        var color = scale(dmin + i / 100 * (dmax - dmin)).hex();
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "grad-step",
+          style: {
+            backgroundColor: color
+          }
+        }, i);
+      });
+      setLegendData({
+        dmin: dmin,
+        dmax: dmax,
+        list: spanList
+      });
     }
+  }, [scale]);
+  if (dataset.colorEncoding === "var" && scale) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "cherita-legend",
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "gradient",
-        children: [legendList, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          className: "small m-0 p-0",
+          children: dataset.selectedVar ? dataset.selectedVar.name : ""
+        }), legendData.list, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "domain-min",
-          children: dmin.toString()
+          children: legendData.dmin.toFixed(1)
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "domain-med",
-          children: ((dmin + dmax) * 0.5).toString()
+          children: ((legendData.dmin + legendData.dmax) * 0.5).toFixed(1)
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "domain-max",
-          children: dmax.toString()
+          children: legendData.dmax.toFixed(1)
         })]
       })
     });
+  } else {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "cherita-legend",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "gradient",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          className: "small m-0 p-0",
+          children: dataset.selectedObs ? dataset.selectedObs.name : ""
+        })
+      })
+    });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
 }

package/dist/components/scatterplot/Scatterplot.js

@@ -5,8 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Scatterplot = Scatterplot;
 exports.ScatterplotControls = ScatterplotControls;
-require("bootstrap/dist/css/bootstrap.min.css");
 var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
+require("bootstrap/dist/css/bootstrap.min.css");
 var _react2 = _interopRequireDefault(require("@deck.gl/react"));
 var _layers = require("@deck.gl/layers");
 var _layers2 = require("@nebula.gl/layers");
@@ -19,6 +20,7 @@ var _DatasetContext = require("../../context/DatasetContext");
 var _mapHelper = require("../../helpers/map-helper");
 var _zarrHelper = require("../../helpers/zarr-helper");
 var _colorHelper = require("../../helpers/color-helper");
+var _LoadingSpinner = require("../../utils/LoadingSpinner");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -47,138 +49,232 @@ function ScatterplotControls() {
     })]
   });
 }
+const INITIAL_VIEW_STATE = {
+  longitude: 0,
+  latitude: 0,
+  zoom: 0,
+  maxZoom: 16,
+  pitch: 0,
+  bearing: 0
+};
+const DEFAULT_DATA_POINT = {
+  value: null,
+  position: null,
+  color: null
+};
 function Scatterplot(_ref) {
+  var _dataset$selectedObs;
   let {
     radius = 30
   } = _ref;
   const dataset = (0, _DatasetContext.useDataset)();
-  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  const {
+    getScale,
+    getColor
+  } = (0, _colorHelper.useColor)();
+  const [viewState, setViewState] = (0, _react.useState)(INITIAL_VIEW_STATE);
   const [features, setFeatures] = (0, _react.useState)({
     type: "FeatureCollection",
     features: []
   });
   const [mode, setMode] = (0, _react.useState)(() => _editModes.ViewMode);
   const [selectedFeatureIndexes, setSelectedFeatureIndexes] = (0, _react.useState)([]);
-  let [featureState, setFeatureState] = (0, _react.useState)([]);
-  let [data, setData] = (0, _react.useState)([]);
-  let [position, setPosition] = (0, _react.useState)([]);
-  let [values, setValues] = (0, _react.useState)([]);
-  let [viewport, setViewport] = (0, _react.useState)({
-    longitude: 0,
-    latitude: 0,
-    zoom: 0,
-    maxZoom: 16,
-    pitch: 0,
-    bearing: 0
+  const [featureState, setFeatureState] = (0, _react.useState)([]);
+  const [scale, setScale] = (0, _react.useState)(() => getScale());
+  const [data, setData] = (0, _react.useState)([]);
+  const [obsmParams, setObsmParams] = (0, _react.useState)({
+    url: dataset.url,
+    path: "obsm/" + dataset.selectedObsm
   });
+  const [xParams, setXParams] = (0, _react.useState)({
+    url: dataset.url,
+    path: "X"
+  });
+  const [obsParams, setObsParams] = (0, _react.useState)({
+    url: dataset.url,
+    path: "obs/" + ((_dataset$selectedObs = dataset.selectedObs) === null || _dataset$selectedObs === void 0 ? void 0 : _dataset$selectedObs.name) + "/codes"
+  });
+
+  // needs to be wrapped in useMemo as it is an array an could cause an infinite loop otherwise
+  const xSelection = (0, _react.useMemo)(() => {
+    var _dataset$selectedVar;
+    return [null, (_dataset$selectedVar = dataset.selectedVar) === null || _dataset$selectedVar === void 0 ? void 0 : _dataset$selectedVar.matrix_index];
+  }, [dataset.selectedVar]);
+  const obsmData = (0, _zarrHelper.useZarr)(obsmParams, null, _zarrHelper.GET_OPTIONS);
+  const xData = (0, _zarrHelper.useZarr)(xParams, xSelection, _zarrHelper.GET_OPTIONS);
+  const obsData = (0, _zarrHelper.useZarr)(obsParams, null, _zarrHelper.GET_OPTIONS);
+  (0, _react.useEffect)(() => {
+    setObsmParams(p => {
+      return {
+        ...p,
+        path: "obsm/" + dataset.selectedObsm
+      };
+    });
+  }, [dataset.selectedObsm]);
+  (0, _react.useEffect)(() => {
+    setXParams(p => {
+      var _dataset$selectedVar2;
+      return {
+        ...p,
+        s: [null, (_dataset$selectedVar2 = dataset.selectedVar) === null || _dataset$selectedVar2 === void 0 ? void 0 : _dataset$selectedVar2.matrix_index]
+      };
+    });
+  }, [dataset.selectedVar]);
+  (0, _react.useEffect)(() => {
+    setObsParams(p => {
+      var _dataset$selectedObs2;
+      return {
+        ...p,
+        path: "obs/" + ((_dataset$selectedObs2 = dataset.selectedObs) === null || _dataset$selectedObs2 === void 0 ? void 0 : _dataset$selectedObs2.name) + "/codes"
+      };
+    });
+  }, [dataset.selectedObs]);
+  (0, _react.useEffect)(() => {
+    setObsmParams(p => {
+      return {
+        ...p,
+        url: dataset.url
+      };
+    });
+    setXParams(p => {
+      return {
+        ...p,
+        url: dataset.url
+      };
+    });
+    setObsParams(p => {
+      return {
+        ...p,
+        url: dataset.url
+      };
+    });
+  }, [dataset.url]);
+
+  // @TODO: assert length of obsmData, xData, obsData is equal
+
   (0, _react.useEffect)(() => {
-    setData(function (prevState, props) {
-      const colorHelper = new _colorHelper.ColorHelper();
-      let scale = dataset.colorEncoding === "var" ? colorHelper.getScale(dataset.controls.colorScale, values) : null;
-      var data = position.map(function (e, i) {
-        var _dataset$obs$dataset$, _dataset$selectedObs;
+    if (!obsmData.isPending && !obsmData.serverError) {
+      setData(d => {
+        return _lodash.default.map(obsmData.data, (p, index) => {
+          return _lodash.default.defaults({
+            position: p
+          }, d === null || d === void 0 ? void 0 : d[index], DEFAULT_DATA_POINT);
+        });
+      });
+      const mapHelper = new _mapHelper.MapHelper();
+      const {
+        latitude,
+        longitude,
+        zoom
+      } = mapHelper.fitBounds(obsmData.data);
+      setViewState(v => {
         return {
-          index: i,
-          position: [position[i][0], position[i][1]],
-          value: values[i],
-          color: colorHelper.getColor(dataset.colorEncoding, (_dataset$obs$dataset$ = dataset.obs[(_dataset$selectedObs = dataset.selectedObs) === null || _dataset$selectedObs === void 0 ? void 0 : _dataset$selectedObs.name]) === null || _dataset$obs$dataset$ === void 0 ? void 0 : _dataset$obs$dataset$.state, values[i], scale)
+          ...v,
+          longitude: longitude,
+          latitude: latitude,
+          zoom: zoom
         };
       });
-      return data;
-    });
-  }, [position, values, dataset.controls.colorScale, dataset.colorEncoding, dataset.obs, dataset.selectedObs]);
-  (0, _react.useEffect)(() => {
-    if (dataset.selectedObsm) {
-      const helper = new _mapHelper.MapHelper();
-      const zarrHelper = new _zarrHelper.ZarrHelper();
-      const fetchObsm = async () => {
-        const z = await zarrHelper.open(dataset.url, "obsm/" + dataset.selectedObsm);
-        await z.get(null, _zarrHelper.GET_OPTIONS).then(result => {
-          const {
-            latitude,
-            longitude,
-            zoom
-          } = helper.fitBounds(result.data);
-          setViewport({
-            longitude: latitude,
-            latitude: longitude,
-            zoom: zoom,
-            maxZoom: 16,
-            pitch: 0,
-            bearing: 0
-          });
-          setPosition(result.data);
+    } else if (!obsmData.isPending && obsmData.serverError) {
+      setData(d => {
+        return _lodash.default.map(d, e => {
+          return _lodash.default.defaults({
+            position: null
+          }, e, DEFAULT_DATA_POINT);
         });
-      };
-      fetchObsm().catch(console.error);
+      });
     }
-  }, [dataset.url, dataset.selectedObsm]);
+  }, [dataset.selectedObsm, obsmData.data, obsmData.isPending, obsmData.serverError]);
   (0, _react.useEffect)(() => {
-    if (dataset.selectedVar) {
-      const zarrHelper = new _zarrHelper.ZarrHelper();
-      const fetchData = async () => {
-        const z = await zarrHelper.open(dataset.url, "X");
-        await z.get([null, dataset.selectedVar.matrix_index], _zarrHelper.GET_OPTIONS).then(result => {
-          setValues(result.data);
-          dispatch({
-            type: "set.colorEncoding",
-            value: "var"
+    if (dataset.colorEncoding === "var") {
+      if (!xData.isPending && !xData.serverError) {
+        const s = getScale(xData.data);
+        setScale(() => s);
+        setData(d => {
+          return _lodash.default.map(xData.data, (v, index) => {
+            return _lodash.default.defaults({
+              value: v,
+              color: getColor(s, v)
+            }, d === null || d === void 0 ? void 0 : d[index], DEFAULT_DATA_POINT);
           });
         });
-      };
-      fetchData().catch(console.error);
+      } else if (!xData.isPending && xData.serverError) {
+        const s = getScale();
+        setScale(() => s);
+        setData(d => {
+          return _lodash.default.map(d, e => {
+            return _lodash.default.defaults({
+              value: null,
+              color: null
+            }, e, DEFAULT_DATA_POINT);
+          });
+        });
+      }
     }
-  }, [dataset.url, dataset.selectedVar, dispatch]);
+  }, [dataset.colorEncoding, xData.data, xData.isPending, xData.serverError, getScale, getColor]);
   (0, _react.useEffect)(() => {
-    if (dataset.selectedObs) {
-      const zarrHelper = new _zarrHelper.ZarrHelper();
-      const fetchData = async () => {
-        const z = await zarrHelper.open(dataset.url, "obs/" + dataset.selectedObs.name + "/codes");
-        await z.get().then(result => {
-          setValues(result.data);
-          dispatch({
-            type: "set.colorEncoding",
-            value: "obs"
+    if (dataset.colorEncoding === "obs") {
+      if (!obsData.isPending && !obsData.serverError) {
+        const s = getScale(obsData.data);
+        setScale(() => s);
+        setData(d => {
+          return _lodash.default.map(obsData.data, (v, index) => {
+            return _lodash.default.defaults({
+              value: v,
+              color: getColor(s, v)
+            }, d === null || d === void 0 ? void 0 : d[index], DEFAULT_DATA_POINT);
+          });
+        });
+      } else if (!obsData.isPending && obsData.serverError) {
+        const s = getScale();
+        setScale(() => s);
+        setData(d => {
+          return _lodash.default.map(d, e => {
+            return _lodash.default.defaults({
+              value: null,
+              color: null
+            }, e, DEFAULT_DATA_POINT);
           });
         });
-      };
-      fetchData().catch(console.error);
-    }
-  }, [dataset.url, dataset.selectedObs, dispatch]);
-  const layers = [new _layers.ScatterplotLayer({
-    id: "cherita-layer-scatterplot",
-    data,
-    radiusScale: radius,
-    radiusMinPixels: 1,
-    getPosition: d => d.position,
-    getFillColor: d => d.color,
-    getRadius: 1
-  }), new _layers2.EditableGeoJsonLayer({
-    id: "cherita-layer-draw",
-    data: features,
-    mode,
-    selectedFeatureIndexes,
-    onEdit: _ref2 => {
-      let {
-        updatedData,
-        editType,
-        editContext
-      } = _ref2;
-      setFeatures(updatedData);
-      let updatedSelectedFeatureIndexes = selectedFeatureIndexes;
-      setFeatureState({
-        data: updatedData
-      });
-      if (editType === "addFeature") {
-        // when a drawing is complete, the value of editType becomes addFeature
-        const {
-          featureIndexes
-        } = editContext; //extracting indexes of current features selected
-        updatedSelectedFeatureIndexes = [...selectedFeatureIndexes, ...featureIndexes];
       }
-      setSelectedFeatureIndexes(updatedSelectedFeatureIndexes); //now update your state
     }
-  })];
+  }, [dataset.colorEncoding, obsData.data, obsData.isPending, obsData.serverError, getScale, getColor]);
+  const layers = (0, _react.useMemo)(() => {
+    return [new _layers.ScatterplotLayer({
+      id: "cherita-layer-scatterplot",
+      data: data,
+      radiusScale: radius,
+      radiusMinPixels: 1,
+      getPosition: d => d.position,
+      getFillColor: d => d.color,
+      getRadius: 1
+    }), new _layers2.EditableGeoJsonLayer({
+      id: "cherita-layer-draw",
+      data: features,
+      mode: mode,
+      selectedFeatureIndexes,
+      onEdit: _ref2 => {
+        let {
+          updatedData,
+          editType,
+          editContext
+        } = _ref2;
+        setFeatures(updatedData);
+        let updatedSelectedFeatureIndexes = selectedFeatureIndexes;
+        setFeatureState({
+          data: updatedData
+        });
+        if (editType === "addFeature") {
+          // when a drawing is complete, the value of editType becomes addFeature
+          const {
+            featureIndexes
+          } = editContext; //extracting indexes of current features selected
+          updatedSelectedFeatureIndexes = [...selectedFeatureIndexes, ...featureIndexes];
+        }
+        setSelectedFeatureIndexes(updatedSelectedFeatureIndexes); //now update your state
+      }
+    })];
+  }, [data, features, mode, radius, selectedFeatureIndexes]);
   function onLayerClick(info) {
     if (mode !== _editModes.ViewMode) {
       // don't change selection while editing
@@ -186,22 +282,23 @@ function Scatterplot(_ref) {
     }
     setSelectedFeatureIndexes(info.object ? [info.index] : []);
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "cherita-scatterplot",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.default, {
-        layers: layers,
-        initialViewState: viewport,
-        controller: true,
-        onClick: onLayerClick
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbox.Toolbox, {
-        mode: mode,
-        setMode: setMode,
-        features: mode,
-        setFeatures: setFeatures
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Legend.Legend, {
-        values: values
-      })]
-    })
+
+  // @TODO: add error message
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "cherita-scatterplot",
+    children: [(obsmData.isPending || xData.isPending || obsmData.isPending) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingSpinner.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.default, {
+      viewState: viewState,
+      onViewStateChange: e => setViewState(e.viewState),
+      controller: true,
+      layers: layers,
+      onClick: onLayerClick
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbox.Toolbox, {
+      mode: mode,
+      setMode: setMode,
+      features: mode,
+      setFeatures: setFeatures
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Legend.Legend, {
+      scale: scale
+    })]
   });
 }