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

package/dist/esm/components/scatterplot/SpatialControls.js

@@ -1,17 +1,18 @@
-import React, { useState } from "react";
-import { faCrosshairs, faDrawPolygon, faHand, faList, faMinus, faPen, faPlus, faSearch, faSliders, faTrash } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { JoinInner } from "@mui/icons-material";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { DrawLineStringMode, DrawPolygonByDraggingMode, DrawPolygonMode, DrawRectangleMode, ModifyMode, ViewMode } from "@nebula.gl/edit-modes";
-import { OverlayTrigger, Tooltip } from "react-bootstrap";
-import Button from "react-bootstrap/Button";
-import ButtonGroup from "react-bootstrap/ButtonGroup";
-import Dropdown from "react-bootstrap/Dropdown";
-import { OffcanvasControls } from "../offcanvas";
-import { ScatterplotControls } from "./ScatterplotControls";
-import { BREAKPOINTS } from "../../constants/constants";
-import { useSettings, useSettingsDispatch } from "../../context/SettingsContext";
+import { useState } from 'react';
+import { faCrosshairs, faDrawPolygon, faHand, faList, faMinus, faPen, faPlus, faSearch, faSliders, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { JoinInner } from '@mui/icons-material';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { DrawLineStringMode, DrawPolygonByDraggingMode, DrawPolygonMode, DrawRectangleMode, ModifyMode, ViewMode } from '@nebula.gl/edit-modes';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+import Button from 'react-bootstrap/Button';
+import ButtonGroup from 'react-bootstrap/ButtonGroup';
+import Dropdown from 'react-bootstrap/Dropdown';
+import { OffcanvasControls } from '../offcanvas';
+import { ScatterplotControls } from './ScatterplotControls';
+import { BREAKPOINTS } from '../../constants/constants';
+import { useSettings, useSettingsDispatch } from '../../context/SettingsContext';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export function SpatialControls(_ref) {
   var _features$features;
   let {
@@ -38,19 +39,19 @@ export function SpatialControls(_ref) {
   const showVarsBtn = isFullscreen ? XlBreakpoint : true;
   const onSelect = (eventKey, event) => {
     switch (eventKey) {
-      case "DrawPolygonMode":
+      case 'DrawPolygonMode':
         setMode(() => DrawPolygonMode);
         break;
-      case "DrawLineStringMode":
+      case 'DrawLineStringMode':
         setMode(() => DrawLineStringMode);
         break;
-      case "DrawPolygonByDraggingMode":
+      case 'DrawPolygonByDraggingMode':
         setMode(() => DrawPolygonByDraggingMode);
         break;
-      case "DrawRectangleMode":
+      case 'DrawRectangleMode':
         setMode(() => DrawRectangleMode);
         break;
-      case "ModifyMode":
+      case 'ModifyMode':
         setMode(() => ModifyMode);
         break;
       default:
@@ -59,113 +60,140 @@ export function SpatialControls(_ref) {
   };
   const deleteFeatures = (_eventKey, _event) => {
     setFeatures({
-      type: "FeatureCollection",
+      type: 'FeatureCollection',
       features: []
     });
   };
-  const polygonControls = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-    active: settings.sliceBy.polygons,
-    title: "Filter data with polygons",
-    onClick: () => {
-      setMode(() => ViewMode);
-      dispatch({
-        type: "toggle.slice.polygons"
-      });
-    }
-  }, /*#__PURE__*/React.createElement(JoinInner, null)), /*#__PURE__*/React.createElement(Button, {
-    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.createElement(FontAwesomeIcon, {
-    icon: faTrash
-  })));
-  return /*#__PURE__*/React.createElement("div", {
-    className: "cherita-spatial-controls"
-  }, (showObsBtn || showVarsBtn) && /*#__PURE__*/React.createElement(ButtonGroup, {
-    vertical: true,
-    className: "w-100 mb-1"
-  }, showObsBtn && /*#__PURE__*/React.createElement(OverlayTrigger, {
-    placement: "right",
-    overlay: /*#__PURE__*/React.createElement(Tooltip, {
-      id: "tooltip-obs"
-    }, "Browse categories")
-  }, /*#__PURE__*/React.createElement(Button, {
-    onClick: () => setShowObs(true)
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faList
-  }))), showVarsBtn && /*#__PURE__*/React.createElement(OverlayTrigger, {
-    placement: "right",
-    overlay: /*#__PURE__*/React.createElement(Tooltip, {
-      id: "tooltip-vars"
-    }, "Search features")
-  }, /*#__PURE__*/React.createElement(Button, {
-    onClick: () => setShowVars(true)
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faSearch
-  })))), /*#__PURE__*/React.createElement(ButtonGroup, {
-    vertical: true,
-    className: "w-100"
-  }, /*#__PURE__*/React.createElement(Button, {
-    onClick: () => setMode(() => ViewMode),
-    title: "Set dragging mode",
-    active: mode === ViewMode
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faHand
-  })), /*#__PURE__*/React.createElement(Button, {
-    onClick: increaseZoom,
-    title: "Increase zoom"
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faPlus
-  })), /*#__PURE__*/React.createElement(Button, {
-    onClick: decreaseZoom,
-    title: "Decrease zoom"
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faMinus
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "border-bottom"
-  }), " ", /*#__PURE__*/React.createElement(Button, {
-    onClick: resetBounds,
-    title: "Reset zoom and center"
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faCrosshairs
-  })), /*#__PURE__*/React.createElement(Dropdown, {
-    as: ButtonGroup,
-    className: "caret-off",
-    drop: "end",
-    onSelect: onSelect
-  }, /*#__PURE__*/React.createElement(Dropdown.Toggle, {
-    id: "dropdown-autoclose-outside",
-    className: "caret-off ".concat(mode === DrawPolygonByDraggingMode || mode === ModifyMode ? "active" : "")
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faDrawPolygon
-  })), /*#__PURE__*/React.createElement(Dropdown.Menu, null, /*#__PURE__*/React.createElement(Dropdown.Header, null, "Polygon tools"), /*#__PURE__*/React.createElement(Dropdown.Item, {
-    eventKey: "DrawPolygonByDraggingMode"
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faDrawPolygon,
-    className: "nav-icon"
-  }), "Draw a polygon"), /*#__PURE__*/React.createElement(Dropdown.Item, {
-    eventKey: "ModifyMode"
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faPen,
-    className: "nav-icon"
-  }), "Modify polygons"), /*#__PURE__*/React.createElement(Dropdown.Item, {
-    onClick: deleteFeatures
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faTrash,
-    className: "nav-icon"
-  }), "Delete polygons"))), !!(features !== null && features !== void 0 && (_features$features = features.features) !== null && _features$features !== void 0 && _features$features.length) && polygonControls, /*#__PURE__*/React.createElement(Button, {
-    onClick: handleShowControls
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faSliders
-  }))), /*#__PURE__*/React.createElement(OffcanvasControls, {
-    show: showControls,
-    handleClose: handleCloseControls,
-    Controls: ScatterplotControls
-  }));
+  const polygonControls = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      active: settings.sliceBy.polygons,
+      title: "Filter data with polygons",
+      onClick: () => {
+        setMode(() => ViewMode);
+        dispatch({
+          type: 'toggle.slice.polygons'
+        });
+      },
+      children: /*#__PURE__*/_jsx(JoinInner, {})
+    }), /*#__PURE__*/_jsx(Button, {
+      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__*/_jsx(FontAwesomeIcon, {
+        icon: faTrash
+      })
+    })]
+  });
+  return /*#__PURE__*/_jsxs("div", {
+    className: "cherita-spatial-controls",
+    children: [(showObsBtn || showVarsBtn) && /*#__PURE__*/_jsxs(ButtonGroup, {
+      vertical: true,
+      className: "w-100 mb-1",
+      children: [showObsBtn && /*#__PURE__*/_jsx(OverlayTrigger, {
+        placement: "right",
+        overlay: /*#__PURE__*/_jsx(Tooltip, {
+          id: "tooltip-obs",
+          children: "Browse categories"
+        }),
+        children: /*#__PURE__*/_jsx(Button, {
+          onClick: () => setShowObs(true),
+          children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+            icon: faList
+          })
+        })
+      }), showVarsBtn && /*#__PURE__*/_jsx(OverlayTrigger, {
+        placement: "right",
+        overlay: /*#__PURE__*/_jsx(Tooltip, {
+          id: "tooltip-vars",
+          children: "Search features"
+        }),
+        children: /*#__PURE__*/_jsx(Button, {
+          onClick: () => setShowVars(true),
+          children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+            icon: faSearch
+          })
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(ButtonGroup, {
+      vertical: true,
+      className: "w-100",
+      children: [/*#__PURE__*/_jsx(Button, {
+        onClick: () => setMode(() => ViewMode),
+        title: "Set dragging mode",
+        active: mode === ViewMode,
+        children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+          icon: faHand
+        })
+      }), /*#__PURE__*/_jsx(Button, {
+        onClick: increaseZoom,
+        title: "Increase zoom",
+        children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+          icon: faPlus
+        })
+      }), /*#__PURE__*/_jsx(Button, {
+        onClick: decreaseZoom,
+        title: "Decrease zoom",
+        children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+          icon: faMinus
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: "border-bottom"
+      }), " ", /*#__PURE__*/_jsx(Button, {
+        onClick: resetBounds,
+        title: "Reset zoom and center",
+        children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+          icon: faCrosshairs
+        })
+      }), /*#__PURE__*/_jsxs(Dropdown, {
+        as: ButtonGroup,
+        className: "caret-off",
+        drop: "end",
+        onSelect: onSelect,
+        children: [/*#__PURE__*/_jsx(Dropdown.Toggle, {
+          id: "dropdown-autoclose-outside",
+          className: "caret-off ".concat(mode === DrawPolygonByDraggingMode || mode === ModifyMode ? 'active' : ''),
+          children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+            icon: faDrawPolygon
+          })
+        }), /*#__PURE__*/_jsxs(Dropdown.Menu, {
+          children: [/*#__PURE__*/_jsx(Dropdown.Header, {
+            children: "Polygon tools"
+          }), /*#__PURE__*/_jsxs(Dropdown.Item, {
+            eventKey: "DrawPolygonByDraggingMode",
+            children: [/*#__PURE__*/_jsx(FontAwesomeIcon, {
+              icon: faDrawPolygon,
+              className: "nav-icon"
+            }), "Draw a polygon"]
+          }), /*#__PURE__*/_jsxs(Dropdown.Item, {
+            eventKey: "ModifyMode",
+            children: [/*#__PURE__*/_jsx(FontAwesomeIcon, {
+              icon: faPen,
+              className: "nav-icon"
+            }), "Modify polygons"]
+          }), /*#__PURE__*/_jsxs(Dropdown.Item, {
+            onClick: deleteFeatures,
+            children: [/*#__PURE__*/_jsx(FontAwesomeIcon, {
+              icon: faTrash,
+              className: "nav-icon"
+            }), "Delete polygons"]
+          })]
+        })]
+      }), !!(features !== null && features !== void 0 && (_features$features = features.features) !== null && _features$features !== void 0 && _features$features.length) && polygonControls, /*#__PURE__*/_jsx(Button, {
+        onClick: handleShowControls,
+        children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+          icon: faSliders
+        })
+      })]
+    }), /*#__PURE__*/_jsx(OffcanvasControls, {
+      show: showControls,
+      handleClose: handleCloseControls,
+      Controls: ScatterplotControls
+    })]
+  });
 }

package/dist/esm/components/scatterplot/Toolbox.js

@@ -1,38 +1,50 @@
-import React from "react";
-import { Button, ButtonGroup, OverlayTrigger, Tooltip } from "react-bootstrap";
-import { formatNumerical } from "../../utils/string";
-import { ObsmKeysList } from "../obsm-list/ObsmList";
+import { Button, ButtonGroup, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import { formatNumerical } from '../../utils/string';
+import { ObsmKeysList } from '../obsm-list/ObsmList';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function Toolbox(_ref) {
   let {
     mode,
     obsLength,
-    slicedLength
+    slicedLength,
+    setHasObsm
   } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "cherita-toolbox"
-  }, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(ObsmKeysList, null), (mode || !isNaN(obsLength)) && (mode !== null && !isNaN(slicedLength) && slicedLength !== obsLength ? /*#__PURE__*/React.createElement(OverlayTrigger, {
-    placement: "top",
-    overlay: /*#__PURE__*/React.createElement(Tooltip, {
-      id: "tooltip-dropped-mode"
-    }, "You have selected ", formatNumerical(slicedLength), " out of", " ", formatNumerical(obsLength), " cells")
-  }, /*#__PURE__*/React.createElement(Button, {
-    size: "sm",
-    variant: "primary",
-    style: {
-      cursor: "default"
-    },
-    "aria-disabled": "true"
-  }, formatNumerical(slicedLength), " of ", formatNumerical(obsLength), " ", "cells")) : /*#__PURE__*/React.createElement(OverlayTrigger, {
-    placement: "top",
-    overlay: /*#__PURE__*/React.createElement(Tooltip, {
-      id: "tooltip-dropped-mode"
-    }, "You are viewing ", formatNumerical(obsLength), " cells")
-  }, /*#__PURE__*/React.createElement(Button, {
-    size: "sm",
-    variant: "primary",
-    style: {
-      cursor: "default"
-    },
-    "aria-disabled": "true"
-  }, formatNumerical(obsLength), " cells")))));
+  return /*#__PURE__*/_jsx("div", {
+    className: "cherita-toolbox",
+    children: /*#__PURE__*/_jsxs(ButtonGroup, {
+      children: [/*#__PURE__*/_jsx(ObsmKeysList, {
+        setHasObsm: setHasObsm
+      }), (mode || !isNaN(obsLength)) && (mode !== null && !isNaN(slicedLength) && slicedLength !== obsLength ? /*#__PURE__*/_jsx(OverlayTrigger, {
+        placement: "top",
+        overlay: /*#__PURE__*/_jsxs(Tooltip, {
+          id: "tooltip-dropped-mode",
+          children: ["You have selected ", formatNumerical(slicedLength), " out of", ' ', formatNumerical(obsLength), " cells"]
+        }),
+        children: /*#__PURE__*/_jsxs(Button, {
+          size: "sm",
+          variant: "primary",
+          style: {
+            cursor: 'default'
+          },
+          "aria-disabled": "true",
+          children: [formatNumerical(slicedLength), " of ", formatNumerical(obsLength), ' ', "cells"]
+        })
+      }) : /*#__PURE__*/_jsx(OverlayTrigger, {
+        placement: "top",
+        overlay: /*#__PURE__*/_jsxs(Tooltip, {
+          id: "tooltip-dropped-mode",
+          children: ["You are viewing ", formatNumerical(obsLength), " cells"]
+        }),
+        children: /*#__PURE__*/_jsxs(Button, {
+          size: "sm",
+          variant: "primary",
+          style: {
+            cursor: 'default'
+          },
+          "aria-disabled": "true",
+          children: [formatNumerical(obsLength), " cells"]
+        })
+      }))]
+    })
+  });
 }