@haniffalab/cherita-react 0.2.0-dev.2025-01-22.f523ac5e → 0.2.0-dev.2025-01-28.7a60aa67

package/dist/components/scatterplot/Scatterplot.js

@@ -25,7 +25,6 @@ var _Legend = require("../../utils/Legend");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _string = require("../../utils/string");
 var _zarrData = require("../../utils/zarrData");
-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; }
@@ -38,10 +37,9 @@ const INITIAL_VIEW_STATE = {
   pitch: 0,
   bearing: 0
 };
-function Scatterplot(_ref) {
-  let {
-    radius = 30
-  } = _ref;
+function Scatterplot({
+  radius = 30
+}) {
   const dataset = (0, _DatasetContext.useDataset)();
   const {
     obsIndices,
@@ -206,10 +204,9 @@ function Scatterplot(_ref) {
     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 getFillColor = (0, _react.useCallback)((_d, {
+    index
+  }) => {
     const grayOut = obsIndices && !obsIndices.has(index);
     return getColor({
       value: (data.values[index] - min) / (max - min),
@@ -219,10 +216,9 @@ function Scatterplot(_ref) {
   }, [data.values, obsIndices, getColor, isCategorical, max, min]);
 
   // @TODO: add support for pseudospatial hover to reflect in radius
-  const getRadius = (0, _react.useCallback)((_d, _ref3) => {
-    let {
-      index
-    } = _ref3;
+  const getRadius = (0, _react.useCallback)((_d, {
+    index
+  }) => {
     const grayOut = obsIndices && !obsIndices.has(index);
     return grayOut ? 1 : 3;
   }, [obsIndices]);
@@ -245,12 +241,11 @@ function Scatterplot(_ref) {
       data: features,
       mode: mode,
       selectedFeatureIndexes,
-      onEdit: _ref4 => {
-        let {
-          updatedData,
-          editType,
-          editContext
-        } = _ref4;
+      onEdit: ({
+        updatedData,
+        editType,
+        editContext
+      }) => {
         setFeatures(updatedData);
         let updatedSelectedFeatureIndexes = selectedFeatureIndexes;
         if (editType === "addFeature") {
@@ -298,19 +293,17 @@ function Scatterplot(_ref) {
     }
     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;
+  const getLabel = (o, v, isVar = false) => {
     if (isVar || o.type === _constants.OBS_TYPES.CONTINUOUS) {
       return `${o.name}: ${(0, _string.formatNumerical)(parseFloat(v))}`;
     } else {
       return `${o.name}: ${o.codesMap[v]}`;
     }
   };
-  const getTooltip = _ref5 => {
-    let {
-      object,
-      index
-    } = _ref5;
+  const getTooltip = ({
+    object,
+    index
+  }) => {
     if (!object || object?.type === "Feature") return;
     const text = [];
     if (dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && dataset.selectedObs && !_lodash.default.some(dataset.labelObs, {
@@ -343,67 +336,59 @@ function Scatterplot(_ref) {
   };
   const isPending = (isRendering || xData.isPending || obsmData.isPending) && !obsmData.isPending;
   const error = dataset.selectedObsm && obsmData.serverError?.length || dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR && xData.serverError?.length || dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && obsData.serverError?.length || dataset.labelObs.lengh && labelObsData.serverError?.length;
-  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 => ({
-          ...v,
-          zoom: v.zoom + 1
-        })),
-        decreaseZoom: () => setViewState(v => ({
-          ...v,
-          zoom: v.zoom - 1
-        }))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "cherita-spatial-footer",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "cherita-toolbox-footer",
-          children: [error && !isPending && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Alert, {
-            variant: "danger",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-              icon: _freeSolidSvgIcons.faTriangleExclamation
-            }), "\xA0Error loading data"]
-          }), /*#__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?.length),
-            slicedLength: parseInt(slicedLength)
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Legend.Legend, {
-          isCategorical: isCategorical,
-          min: min,
-          max: max
-        })]
-      })]
-    })
-  });
+  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: ({
+      isDragging
+    }) => 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 => ({
+      ...v,
+      zoom: v.zoom + 1
+    })),
+    decreaseZoom: () => setViewState(v => ({
+      ...v,
+      zoom: v.zoom - 1
+    }))
+  }), /*#__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: dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? dataset.selectedVar.name : dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS ? dataset.selectedObs.name : null,
+    obsLength: parseInt(obsmData.data?.length),
+    slicedLength: parseInt(slicedLength)
+  })), /*#__PURE__*/_react.default.createElement(_Legend.Legend, {
+    isCategorical: isCategorical,
+    min: min,
+    max: max
+  }))));
 }

package/dist/components/scatterplot/ScatterplotControls.js

@@ -11,7 +11,6 @@ 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; }
@@ -20,15 +19,15 @@ const ScatterplotControls = () => {
   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?.type === _constants.OBS_TYPES.CATEGORICAL : false;
-  const colormapList = _lodash.default.keys(_colorscales.COLORSCALES).map(key => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
+  const colormapList = _lodash.default.keys(_colorscales.COLORSCALES).map(key => /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
+    key: key,
     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);
@@ -53,40 +52,30 @@ const ScatterplotControls = () => {
   (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
-    })]
-  });
+  const rangeSlider = /*#__PURE__*/_react.default.createElement(_material.Box, {
+    className: "w-100"
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    id: "colorscale-range",
+    gutterBottom: true
+  }, "Colorscale range"), /*#__PURE__*/_react.default.createElement(_material.Slider, {
+    "aria-labelledby": "colorscale-range",
+    min: 0,
+    max: 1,
+    step: 0.001,
+    value: sliderValue,
+    onChange: updateSlider,
+    onChangeCommitted: updateRange,
+    valueLabelDisplay: "auto",
+    getAriaValueText: valueLabelFormat,
+    valueLabelFormat: valueLabelFormat,
+    marks: marks,
+    disabled: isCategorical
+  }));
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Toggle, {
+    id: "dropdownColorscale",
+    variant: "light"
+  }, dataset.controls.colorScale), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, null, colormapList)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "m-4"
+  }, rangeSlider));
 };
 exports.ScatterplotControls = ScatterplotControls;

package/dist/components/scatterplot/SpatialControls.js

@@ -16,21 +16,19 @@ var _DropdownButton = _interopRequireDefault(require("react-bootstrap/DropdownBu
 var _ScatterplotControls = require("./ScatterplotControls");
 var _DatasetContext = require("../../context/DatasetContext");
 var _offcanvas = require("../offcanvas");
-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; }
-function SpatialControls(_ref) {
-  let {
-    mode,
-    setMode,
-    features,
-    setFeatures,
-    selectedFeatureIndexes,
-    resetBounds,
-    increaseZoom,
-    decreaseZoom
-  } = _ref;
+function SpatialControls({
+  mode,
+  setMode,
+  features,
+  setFeatures,
+  selectedFeatureIndexes,
+  resetBounds,
+  increaseZoom,
+  decreaseZoom
+}) {
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const [showControls, setShowControls] = (0, _react.useState)(false);
@@ -63,109 +61,88 @@ function SpatialControls(_ref) {
       features: []
     });
   };
-  const polygonControls = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "mt-2",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ButtonGroup.default, {
-      vertical: true,
-      className: "w-100",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-        variant: dataset.sliceBy.polygons ? "primary" : "outline-primary",
-        title: "Filter data with polygons",
-        onClick: () => {
-          setMode(() => _editModes.ViewMode);
-          dispatch({
-            type: "toggle.slice.polygons"
-          });
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.JoinInner, {})
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-        variant: "outline-primary",
-        title: "Delete selected polygons",
-        onClick: () => {
-          const newFeatures = features.features.filter((_f, i) => !selectedFeatureIndexes.includes(i));
-          setFeatures({
-            type: "FeatureCollection",
-            features: newFeatures
-          });
-        },
-        disabled: !selectedFeatureIndexes.length,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-          icon: _freeSolidSvgIcons.faTrash
-        })
-      })]
-    })
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: "cherita-spatial-controls",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ButtonGroup.default, {
-      vertical: true,
-      className: "w-100",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-        onClick: increaseZoom,
-        title: "Increase zoom",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-          icon: _freeSolidSvgIcons.faPlus
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-        onClick: decreaseZoom,
-        title: "Decrease zoom",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-          icon: _freeSolidSvgIcons.faMinus
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-        onClick: resetBounds,
-        title: "Reset zoom and center",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-          icon: _freeSolidSvgIcons.faCrosshairs
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-        onClick: () => setMode(() => _editModes.ViewMode),
-        title: "Set dragging mode",
-        variant: mode === _editModes.ViewMode ? "primary" : "outline-primary",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-          icon: _freeSolidSvgIcons.faHand
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DropdownButton.default, {
-        as: _ButtonGroup.default,
-        title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-            icon: _freeSolidSvgIcons.faDrawPolygon
-          })
-        }),
-        drop: "end",
-        id: "bg-vertical-dropdown-1",
-        className: "caret-off",
-        onSelect: onSelect,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Header, {
-          children: "Selection tools"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
-          eventKey: "DrawPolygonMode",
-          children: "Draw a polygon"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
-          eventKey: "DrawPolygonByDraggingMode",
-          children: "Draw a Polygon by Dragging"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
-          eventKey: "ModifyMode",
-          children: "Modify polygons"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
-          eventKey: "ViewMode",
-          children: "Viewing mode"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dropdown.default.Item, {
-          onClick: deleteFeatures,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-            icon: _freeSolidSvgIcons.faTrash
-          }), " Delete polygons"]
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-        onClick: handleShowControls,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-          icon: _freeSolidSvgIcons.faSliders
-        })
-      })]
-    }), !!features?.features?.length && polygonControls, /*#__PURE__*/(0, _jsxRuntime.jsx)(_offcanvas.OffcanvasControls, {
-      show: showControls,
-      handleClose: handleCloseControls,
-      Controls: _ScatterplotControls.ScatterplotControls
-    })]
-  });
+  const polygonControls = /*#__PURE__*/_react.default.createElement("div", {
+    className: "mt-2"
+  }, /*#__PURE__*/_react.default.createElement(_ButtonGroup.default, {
+    vertical: true,
+    className: "w-100"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: dataset.sliceBy.polygons ? "primary" : "outline-primary",
+    title: "Filter data with polygons",
+    onClick: () => {
+      setMode(() => _editModes.ViewMode);
+      dispatch({
+        type: "toggle.slice.polygons"
+      });
+    }
+  }, /*#__PURE__*/_react.default.createElement(_iconsMaterial.JoinInner, null)), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: "outline-primary",
+    title: "Delete selected polygons",
+    onClick: () => {
+      const newFeatures = features.features.filter((_f, i) => !selectedFeatureIndexes.includes(i));
+      setFeatures({
+        type: "FeatureCollection",
+        features: newFeatures
+      });
+    },
+    disabled: !selectedFeatureIndexes.length
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faTrash
+  }))));
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "cherita-spatial-controls"
+  }, /*#__PURE__*/_react.default.createElement(_ButtonGroup.default, {
+    vertical: true,
+    className: "w-100"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: increaseZoom,
+    title: "Increase zoom"
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faPlus
+  })), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: decreaseZoom,
+    title: "Decrease zoom"
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faMinus
+  })), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: resetBounds,
+    title: "Reset zoom and center"
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faCrosshairs
+  })), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => setMode(() => _editModes.ViewMode),
+    title: "Set dragging mode",
+    variant: mode === _editModes.ViewMode ? "primary" : "outline-primary"
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faHand
+  })), /*#__PURE__*/_react.default.createElement(_DropdownButton.default, {
+    as: _ButtonGroup.default,
+    title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+      icon: _freeSolidSvgIcons.faDrawPolygon
+    })),
+    drop: "end",
+    id: "bg-vertical-dropdown-1",
+    className: "caret-off",
+    onSelect: onSelect
+  }, /*#__PURE__*/_react.default.createElement(_Dropdown.default.Header, null, "Selection tools"), /*#__PURE__*/_react.default.createElement(_Dropdown.default.Item, {
+    eventKey: "DrawPolygonMode"
+  }, "Draw a polygon"), /*#__PURE__*/_react.default.createElement(_Dropdown.default.Item, {
+    eventKey: "DrawPolygonByDraggingMode"
+  }, "Draw a Polygon by Dragging"), /*#__PURE__*/_react.default.createElement(_Dropdown.default.Item, {
+    eventKey: "ModifyMode"
+  }, "Modify polygons"), /*#__PURE__*/_react.default.createElement(_Dropdown.default.Item, {
+    eventKey: "ViewMode"
+  }, "Viewing mode"), /*#__PURE__*/_react.default.createElement(_Dropdown.default.Item, {
+    onClick: deleteFeatures
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faTrash
+  }), " Delete polygons")), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: handleShowControls
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faSliders
+  }))), !!features?.features?.length && polygonControls, /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasControls, {
+    show: showControls,
+    handleClose: handleCloseControls,
+    Controls: _ScatterplotControls.ScatterplotControls
+  }));
 }

package/dist/components/scatterplot/Toolbox.js

@@ -11,29 +11,21 @@ var _Button = _interopRequireDefault(require("react-bootstrap/Button"));
 var _ButtonGroup = _interopRequireDefault(require("react-bootstrap/ButtonGroup"));
 var _string = require("../../utils/string");
 var _ObsmList = require("../obsm-list/ObsmList");
-var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function Toolbox(_ref) {
-  let {
-    mode,
-    obsLength,
-    slicedLength
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "cherita-toolbox",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ButtonGroup.default, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ObsmList.ObsmKeysList, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
-        size: "sm",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-          icon: _freeSolidSvgIcons.faDroplet
-        }), " ", mode]
-      }), (mode || !isNaN(obsLength)) && (mode !== null && !isNaN(slicedLength) && slicedLength !== obsLength ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
-        size: "sm",
-        children: [(0, _string.formatNumerical)(slicedLength), " out of", " ", (0, _string.formatNumerical)(obsLength), " cells"]
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
-        size: "sm",
-        children: [(0, _string.formatNumerical)(obsLength), " cells"]
-      }))]
-    })
-  });
+function Toolbox({
+  mode,
+  obsLength,
+  slicedLength
+}) {
+  return /*#__PURE__*/_react.React.createElement("div", {
+    className: "cherita-toolbox"
+  }, /*#__PURE__*/_react.React.createElement(_ButtonGroup.default, null, /*#__PURE__*/_react.React.createElement(_ObsmList.ObsmKeysList, null), /*#__PURE__*/_react.React.createElement(_Button.default, {
+    size: "sm"
+  }, /*#__PURE__*/_react.React.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faDroplet
+  }), " ", mode), (mode || !isNaN(obsLength)) && (mode !== null && !isNaN(slicedLength) && slicedLength !== obsLength ? /*#__PURE__*/_react.React.createElement(_Button.default, {
+    size: "sm"
+  }, (0, _string.formatNumerical)(slicedLength), " out of", " ", (0, _string.formatNumerical)(obsLength), " cells") : /*#__PURE__*/_react.React.createElement(_Button.default, {
+    size: "sm"
+  }, (0, _string.formatNumerical)(obsLength), " cells"))));
 }