@haniffalab/cherita-react 0.2.0-dev.2024-05-21.ca7d726c → 0.2.0-dev.2024-09-26.f9979478

package/dist/components/scatterplot/Scatterplot.js

@@ -4,51 +4,30 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Scatterplot = Scatterplot;
-exports.ScatterplotControls = ScatterplotControls;
 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");
+var _react2 = require("@deck.gl/react");
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+var _reactFontawesome = require("@fortawesome/react-fontawesome");
 var _editModes = require("@nebula.gl/edit-modes");
-var _Dropdown = _interopRequireDefault(require("react-bootstrap/Dropdown"));
-var _Toolbox = require("./Toolbox");
+var _layers2 = require("@nebula.gl/layers");
+var _turf = require("@turf/turf");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _reactBootstrap = require("react-bootstrap");
 var _Legend = require("./Legend");
+var _SpatialControls = require("./SpatialControls");
+var _Toolbox = require("./Toolbox");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
+var _colorHelper = require("../../helpers/color-helper");
 var _mapHelper = require("../../helpers/map-helper");
 var _zarrHelper = require("../../helpers/zarr-helper");
-var _colorHelper = require("../../helpers/color-helper");
-var _LoadingSpinner = require("../../utils/LoadingSpinner");
+var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 window.deck.log.level = 1;
-function ScatterplotControls() {
-  const dataset = (0, _DatasetContext.useDataset)();
-  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
-  const colormapList = _constants.PLOTLY_COLORSCALES.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
-    active: dataset.controls.colorScale === item,
-    onClick: () => {
-      dispatch({
-        type: "set.controls.colorScale",
-        colorScale: item
-      });
-    },
-    children: item
-  }, item));
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dropdown.default, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Toggle, {
-      id: "dropdownColorscale",
-      variant: "light",
-      children: dataset.controls.colorScale
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Menu, {
-      children: colormapList
-    })]
-  });
-}
 const INITIAL_VIEW_STATE = {
   longitude: 0,
   latitude: 0,
@@ -57,31 +36,32 @@ const INITIAL_VIEW_STATE = {
   pitch: 0,
   bearing: 0
 };
-const DEFAULT_DATA_POINT = {
-  value: null,
-  position: null,
-  color: null
-};
 function Scatterplot(_ref) {
-  var _dataset$selectedObs;
+  var _dataset$selectedObs, _dataset$selectedObs2, _dataset$selectedObs6, _dataset$selectedObs8, _dataset$selectedObs10, _features$features2, _obsmData$serverError, _xData$serverError, _obsData$serverError, _labelObsData$serverE, _obsmData$data;
   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 [isRendering, setIsRendering] = (0, _react.useState)(true);
+  const [data, setData] = (0, _react.useState)({
+    ids: [],
+    positions: [],
+    values: [],
+    sliceValues: []
+  });
+
+  // EditableGeoJsonLayer
+  const [mode, setMode] = (0, _react.useState)(() => _editModes.ViewMode);
   const [features, setFeatures] = (0, _react.useState)({
     type: "FeatureCollection",
     features: []
   });
-  const [mode, setMode] = (0, _react.useState)(() => _editModes.ViewMode);
   const [selectedFeatureIndexes, setSelectedFeatureIndexes] = (0, _react.useState)([]);
-  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
@@ -92,8 +72,9 @@ function Scatterplot(_ref) {
   });
   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"
+    path: "obs/" + ((_dataset$selectedObs = dataset.selectedObs) === null || _dataset$selectedObs === void 0 ? void 0 : _dataset$selectedObs.name) + (((_dataset$selectedObs2 = dataset.selectedObs) === null || _dataset$selectedObs2 === void 0 ? void 0 : _dataset$selectedObs2.type) === _constants.OBS_TYPES.CONTINUOUS ? "" : "/codes")
   });
+  const [labelObsParams, setLabelObsParams] = (0, _react.useState)([]);
 
   // needs to be wrapped in useMemo as it is an array an could cause an infinite loop otherwise
   const xSelection = (0, _react.useMemo)(() => {
@@ -103,6 +84,7 @@ function Scatterplot(_ref) {
   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);
+  const labelObsData = (0, _zarrHelper.useMultipleZarr)(labelObsParams, _zarrHelper.GET_OPTIONS);
   (0, _react.useEffect)(() => {
     setObsmParams(p => {
       return {
@@ -122,13 +104,22 @@ function Scatterplot(_ref) {
   }, [dataset.selectedVar]);
   (0, _react.useEffect)(() => {
     setObsParams(p => {
-      var _dataset$selectedObs2;
+      var _dataset$selectedObs3, _dataset$selectedObs4;
       return {
         ...p,
-        path: "obs/" + ((_dataset$selectedObs2 = dataset.selectedObs) === null || _dataset$selectedObs2 === void 0 ? void 0 : _dataset$selectedObs2.name) + "/codes"
+        path: "obs/" + ((_dataset$selectedObs3 = dataset.selectedObs) === null || _dataset$selectedObs3 === void 0 ? void 0 : _dataset$selectedObs3.name) + (((_dataset$selectedObs4 = dataset.selectedObs) === null || _dataset$selectedObs4 === void 0 ? void 0 : _dataset$selectedObs4.type) === _constants.OBS_TYPES.CONTINUOUS ? "" : "/codes")
       };
     });
   }, [dataset.selectedObs]);
+  (0, _react.useEffect)(() => {
+    setLabelObsParams(_lodash.default.map(dataset.labelObs, obs => {
+      return {
+        url: dataset.url,
+        path: "obs/" + obs.name + (obs.type === _constants.OBS_TYPES.CONTINUOUS ? "" : "/codes"),
+        key: obs.name
+      };
+    }));
+  }, [dataset.labelObs, dataset.url]);
   (0, _react.useEffect)(() => {
     setObsmParams(p => {
       return {
@@ -154,12 +145,12 @@ function Scatterplot(_ref) {
 
   (0, _react.useEffect)(() => {
     if (!obsmData.isPending && !obsmData.serverError) {
+      setIsRendering(true);
       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);
-        });
+        return {
+          ...d,
+          positions: obsmData.data
+        };
       });
       const mapHelper = new _mapHelper.MapHelper();
       const {
@@ -176,129 +167,322 @@ function Scatterplot(_ref) {
         };
       });
     } else if (!obsmData.isPending && obsmData.serverError) {
+      setIsRendering(true);
       setData(d => {
-        return _lodash.default.map(d, e => {
-          return _lodash.default.defaults({
-            position: null
-          }, e, DEFAULT_DATA_POINT);
-        });
+        return {
+          ...d,
+          positions: []
+        };
       });
     }
   }, [dataset.selectedObsm, obsmData.data, obsmData.isPending, obsmData.serverError]);
+  const bounds = (0, _react.useMemo)(() => {
+    const {
+      latitude,
+      longitude,
+      zoom
+    } = new _mapHelper.MapHelper().fitBounds(data.positions);
+    return {
+      latitude,
+      longitude,
+      zoom
+    };
+  }, [data.positions]);
   (0, _react.useEffect)(() => {
-    if (dataset.colorEncoding === "var") {
+    if (dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR) {
+      setIsRendering(true);
       if (!xData.isPending && !xData.serverError) {
-        const s = getScale(xData.data);
-        setScale(() => s);
+        // @TODO: add condition to check obs slicing
         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);
-          });
+          return {
+            ...d,
+            values: xData.data
+          };
         });
       } 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);
-          });
+          return {
+            ...d,
+            values: []
+          };
         });
       }
     }
-  }, [dataset.colorEncoding, xData.data, xData.isPending, xData.serverError, getScale, getColor]);
+  }, [dataset.colorEncoding, xData.data, xData.isPending, xData.serverError, getColor]);
   (0, _react.useEffect)(() => {
-    if (dataset.colorEncoding === "obs") {
+    if (dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS) {
+      setIsRendering(true);
       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);
-          });
+          return {
+            ...d,
+            values: obsData.data
+          };
         });
       } 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);
-          });
+          return {
+            ...d,
+            values: []
+          };
         });
       }
+    } else if (dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR && dataset.sliceBy.obs) {
+      if (!obsData.isPending && !obsData.serverError) {
+        setData(d => {
+          return {
+            ...d,
+            sliceValues: obsData.data
+          };
+        });
+      } else if (!obsData.isPending && obsData.serverError) {
+        setData(d => {
+          return {
+            ...d,
+            sliceValues: []
+          };
+        });
+      }
+    }
+  }, [dataset.colorEncoding, obsData.data, obsData.isPending, obsData.serverError, dataset.sliceBy.obs]);
+  const isCategorical = (0, _react.useMemo)(() => {
+    if (dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS) {
+      var _dataset$selectedObs5;
+      return ((_dataset$selectedObs5 = dataset.selectedObs) === null || _dataset$selectedObs5 === void 0 ? void 0 : _dataset$selectedObs5.type) === _constants.OBS_TYPES.CATEGORICAL;
+    } else {
+      return false;
+    }
+  }, [dataset.colorEncoding, (_dataset$selectedObs6 = dataset.selectedObs) === null || _dataset$selectedObs6 === void 0 ? void 0 : _dataset$selectedObs6.type]);
+  const isInSlice = (0, _react.useCallback)((index, values, positions) => {
+    let inSlice = true;
+    if ((dataset.sliceBy.obs || isCategorical) && values) {
+      var _dataset$selectedObs7;
+      inSlice &= !_lodash.default.includes((_dataset$selectedObs7 = dataset.selectedObs) === null || _dataset$selectedObs7 === void 0 ? void 0 : _dataset$selectedObs7.omit, values[index]);
+    }
+    if (dataset.sliceBy.polygons && positions) {
+      inSlice &= _lodash.default.some(features === null || features === void 0 ? void 0 : features.features, (_f, i) => {
+        return (0, _turf.booleanPointInPolygon)((0, _turf.point)([positions[index][0], positions[index][1]]), features.features[i]);
+      });
+    }
+    return inSlice;
+  }, [(_dataset$selectedObs8 = dataset.selectedObs) === null || _dataset$selectedObs8 === void 0 ? void 0 : _dataset$selectedObs8.omit, dataset.sliceBy.obs, dataset.sliceBy.polygons, features.features, isCategorical]);
+  const {
+    filteredIndices,
+    valueMin,
+    valueMax,
+    slicedLength
+  } = (0, _react.useMemo)(() => {
+    if (dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR) {
+      const {
+        filtered,
+        filteredIndices
+      } = _lodash.default.reduce(data.values, (acc, v, i) => {
+        if (isInSlice(i, data.sliceValues, data.positions)) {
+          acc.filtered.push(v);
+          acc.filteredIndices.add(i);
+        }
+        return acc;
+      }, {
+        filtered: [],
+        filteredIndices: new Set()
+      });
+      return {
+        filteredIndices: filteredIndices,
+        valueMin: _lodash.default.min(filtered),
+        valueMax: _lodash.default.max(filtered),
+        slicedLength: filtered.length
+      };
+    } else if (dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS) {
+      var _dataset$selectedObs9;
+      const isContinuous = ((_dataset$selectedObs9 = dataset.selectedObs) === null || _dataset$selectedObs9 === void 0 ? void 0 : _dataset$selectedObs9.type) === _constants.OBS_TYPES.CONTINUOUS;
+      const {
+        filtered,
+        filteredIndices
+      } = _lodash.default.reduce(data.values, (acc, v, i) => {
+        if (isInSlice(i, data.values, data.positions)) {
+          acc.filtered.push(v);
+          acc.filteredIndices.add(i);
+        }
+        return acc;
+      }, {
+        filtered: [],
+        filteredIndices: new Set()
+      });
+      return {
+        filteredIndices: filteredIndices,
+        valueMin: _lodash.default.min(isContinuous ? filtered : data.values),
+        valueMax: _lodash.default.max(isContinuous ? filtered : data.values),
+        slicedLength: filtered.length
+      };
+    } else {
+      return {
+        filteredIndices: null,
+        valueMin: _lodash.default.min(data.values),
+        valueMax: _lodash.default.max(data.values),
+        slicedLength: data.values.length
+      };
     }
-  }, [dataset.colorEncoding, obsData.data, obsData.isPending, obsData.serverError, getScale, getColor]);
-  const layers = (0, _react.useMemo)(() => {
+  }, [data.positions, data.sliceValues, data.values, dataset.colorEncoding, (_dataset$selectedObs10 = dataset.selectedObs) === null || _dataset$selectedObs10 === void 0 ? void 0 : _dataset$selectedObs10.type, isInSlice]);
+  (0, _react.useEffect)(() => {
+    dispatch({
+      type: "set.controls.valueRange",
+      valueRange: [valueMin, valueMax]
+    });
+  }, [dispatch, valueMax, valueMin]);
+  const {
+    min,
+    max
+  } = {
+    min: dataset.controls.range[0] * (valueMax - valueMin) + valueMin,
+    max: dataset.controls.range[1] * (valueMax - valueMin) + valueMin
+  };
+  const getFillColor = (0, _react.useCallback)((_d, _ref2) => {
+    let {
+      index
+    } = _ref2;
+    const grayOut = filteredIndices && !filteredIndices.has(index);
+    return getColor((data.values[index] - min) / (max - min), isCategorical, grayOut);
+  }, [data.values, filteredIndices, getColor, isCategorical, max, min]);
+  const memoizedLayers = (0, _react.useMemo)(() => {
     return [new _layers.ScatterplotLayer({
       id: "cherita-layer-scatterplot",
-      data: data,
+      pickable: true,
+      data: data.positions,
       radiusScale: radius,
       radiusMinPixels: 1,
-      getPosition: d => d.position,
-      getFillColor: d => d.color,
-      getRadius: 1
+      getPosition: d => d,
+      getFillColor: getFillColor,
+      getRadius: 1,
+      updateTriggers: {
+        getFillColor: getFillColor
+      }
     }), new _layers2.EditableGeoJsonLayer({
       id: "cherita-layer-draw",
       data: features,
       mode: mode,
       selectedFeatureIndexes,
-      onEdit: _ref2 => {
+      onEdit: _ref3 => {
         let {
           updatedData,
           editType,
           editContext
-        } = _ref2;
+        } = _ref3;
         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
+          } = editContext;
           updatedSelectedFeatureIndexes = [...selectedFeatureIndexes, ...featureIndexes];
         }
-        setSelectedFeatureIndexes(updatedSelectedFeatureIndexes); //now update your state
+        setSelectedFeatureIndexes(updatedSelectedFeatureIndexes);
+      },
+      // getFillColor: POLYGON_FILLCOLOR,
+      _subLayerProps: {
+        geojson: {
+          getFillColor: feature => {
+            if (selectedFeatureIndexes.some(i => features.features[i] === feature)) {
+              return _constants.SELECTED_POLYGON_FILLCOLOR;
+            } else {
+              return _constants.UNSELECTED_POLYGON_FILLCOLOR;
+            }
+          }
+        }
       }
     })];
-  }, [data, features, mode, radius, selectedFeatureIndexes]);
+  }, [data.positions, features, getFillColor, mode, radius, 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"
+      });
+    }
+  }, [dispatch, features === null || features === void 0 || (_features$features2 = features.features) === null || _features$features2 === void 0 ? void 0 : _features$features2.length]);
   function onLayerClick(info) {
     if (mode !== _editModes.ViewMode) {
       // don't change selection while editing
       return;
     }
-    setSelectedFeatureIndexes(info.object ? [info.index] : []);
+    setSelectedFeatureIndexes(f => info.object ? info.layer.id === "cherita-layer-draw" ? [info.index] : f : []);
   }
-
-  // @TODO: add error message
+  const getTooltip = _ref4 => {
+    let {
+      object,
+      index
+    } = _ref4;
+    return object && dataset.labelObs.length && {
+      text: _lodash.default.map(labelObsData, (v, k) => {
+        const labelObs = _lodash.default.find(dataset.labelObs, o => o.name === k);
+        if (labelObs.type === _constants.OBS_TYPES.CONTINUOUS) {
+          return "".concat(k, ": ").concat(parseFloat(v === null || v === void 0 ? void 0 : v[index]).toLocaleString());
+        } else {
+          return "".concat(k, ": ").concat(labelObs.codesMap[v === null || v === void 0 ? void 0 : v[index]]);
+        }
+      }).join("\n")
+    };
+  };
+  const isPending = (isRendering || xData.isPending || obsmData.isPending) && !obsmData.isPending;
+  const error = dataset.selectedObsm && ((_obsmData$serverError = obsmData.serverError) === null || _obsmData$serverError === void 0 ? void 0 : _obsmData$serverError.length) || dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR && ((_xData$serverError = xData.serverError) === null || _xData$serverError === void 0 ? void 0 : _xData$serverError.length) || dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && ((_obsData$serverError = obsData.serverError) === null || _obsData$serverError === void 0 ? void 0 : _obsData$serverError.length) || dataset.labelObs.lengh && ((_labelObsData$serverE = labelObsData.serverError) === null || _labelObsData$serverE === void 0 ? void 0 : _labelObsData$serverE.length);
   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, {
+    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: true,
+      controller: {
+        doubleClickZoom: mode === _editModes.ViewMode
+      },
       layers: layers,
-      onClick: onLayerClick
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbox.Toolbox, {
+      onClick: onLayerClick,
+      getTooltip: getTooltip,
+      onAfterRender: () => {
+        setIsRendering(false);
+      },
+      useDevicePixels: false,
+      getCursor: _ref5 => {
+        let {
+          isDragging
+        } = _ref5;
+        return mode !== _editModes.ViewMode ? "crosshair" : isDragging ? "grabbing" : "grab";
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpatialControls.SpatialControls, {
       mode: mode,
       setMode: setMode,
-      features: mode,
-      setFeatures: setFeatures
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Legend.Legend, {
-      scale: scale
+      features: features,
+      setFeatures: setFeatures,
+      selectedFeatureIndexes: selectedFeatureIndexes,
+      resetBounds: () => setViewState(bounds),
+      increaseZoom: () => setViewState(v => ({
+        ...v,
+        zoom: v.zoom + 1
+      })),
+      decreaseZoom: () => setViewState(v => ({
+        ...v,
+        zoom: v.zoom - 1
+      }))
+    }), error && !isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "cherita-alert",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Alert, {
+        variant: "danger",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+          icon: _freeSolidSvgIcons.faTriangleExclamation
+        }), "Error loading data"]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "cherita-spatial-footer",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbox.Toolbox, {
+        mode: dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? dataset.selectedVar.name : dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS ? dataset.selectedObs.name : null,
+        obsLength: parseInt((_obsmData$data = obsmData.data) === null || _obsmData$data === void 0 ? void 0 : _obsmData$data.length),
+        slicedLength: parseInt(slicedLength)
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Legend.Legend, {
+        isCategorical: isCategorical,
+        min: min,
+        max: max
+      })]
     })]
   });
 }

package/dist/components/scatterplot/ScatterplotControls.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScatterplotControls = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _reactBootstrap = require("react-bootstrap");
+var _colorscales = require("../../constants/colorscales");
+var _constants = require("../../constants/constants");
+var _DatasetContext = require("../../context/DatasetContext");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const ScatterplotControls = () => {
+  var _dataset$selectedObs;
+  const dataset = (0, _DatasetContext.useDataset)();
+  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  const [sliderValue, setSliderValue] = _react.default.useState(dataset.controls.range || [0, 1]);
+  const isCategorical = dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS ? ((_dataset$selectedObs = dataset.selectedObs) === null || _dataset$selectedObs === void 0 ? void 0 : _dataset$selectedObs.type) === _constants.OBS_TYPES.CATEGORICAL : false;
+  const colormapList = _lodash.default.keys(_colorscales.COLORSCALES).map(key => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
+    active: dataset.controls.colorScale === key,
+    onClick: () => {
+      dispatch({
+        type: "set.controls.colorScale",
+        colorScale: key
+      });
+    },
+    children: key
+  }, key));
+  const valueLabelFormat = value => {
+    return (value * (dataset.controls.valueRange[1] - dataset.controls.valueRange[0]) + dataset.controls.valueRange[0]).toFixed(2);
+  };
+  const marks = [{
+    value: 0,
+    label: valueLabelFormat(0)
+  }, {
+    value: 1,
+    label: valueLabelFormat(1)
+  }];
+  const updateSlider = (_e, value) => {
+    setSliderValue(value);
+  };
+  const updateRange = (_e, value) => {
+    setSliderValue(value);
+    dispatch({
+      type: "set.controls.range",
+      range: sliderValue
+    });
+  };
+  (0, _react.useEffect)(() => {
+    setSliderValue(dataset.controls.range);
+  }, [dataset.controls.range]);
+  const rangeSlider = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    className: "w-100",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+      id: "colorscale-range",
+      gutterBottom: true,
+      children: "Colorscale range"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Slider, {
+      "aria-labelledby": "colorscale-range",
+      min: 0,
+      max: 1,
+      step: 0.001,
+      value: sliderValue,
+      onChange: updateSlider,
+      onChangeCommitted: updateRange,
+      valueLabelDisplay: "auto",
+      getAriaValueText: valueLabelFormat,
+      valueLabelFormat: valueLabelFormat,
+      marks: marks,
+      disabled: isCategorical
+    })]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Dropdown, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Toggle, {
+        id: "dropdownColorscale",
+        variant: "light",
+        children: dataset.controls.colorScale
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Menu, {
+        children: colormapList
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "m-4",
+      children: rangeSlider
+    })]
+  });
+};
+exports.ScatterplotControls = ScatterplotControls;