sag_components 2.0.0-beta67 → 2.0.0-beta69

package/dist/index.js

@@ -30440,6 +30440,8 @@ const BubbleChart = _ref => {
     backgroundColor = 'white',
     showAxis = false
   } = _ref;
+  const [curosrMouse, setCurosrMouse] = React$1.useState("default");
+
   // Calculate the medians and domain for raw X, Y, and Z values
   const {
     xMedian,
@@ -30524,6 +30526,7 @@ const BubbleChart = _ref => {
   // Refs for the chart container
   const containerRef = React$1.useRef(null);
   const scatterChartRef = React$1.useRef(null);
+  const scatterFullChartRef = React$1.useRef(null);
 
   // Set up initial domain
   React$1.useEffect(() => {
@@ -30696,9 +30699,9 @@ const BubbleChart = _ref => {
       e.preventDefault();
     }
   }, [viewDomain]); // Add viewDomain as dependency to capture current value
-
   // Handle mouse move for dragging
   const handleMouseMove = React$1.useCallback(e => {
+    /* cursor feedback */
     if (!isDragging) return;
     const dx = e.clientX - dragStart.x;
     const dy = e.clientY - dragStart.y;
@@ -30807,6 +30810,7 @@ const BubbleChart = _ref => {
 
   // Handle mouse wheel
   const handleWheel = React$1.useCallback(e => {
+    if (!e.ctrlKey) return; // Only zoom with Ctrl key
     e.preventDefault();
     if (e.deltaY < 0) {
       handleZoomIn();
@@ -30895,7 +30899,11 @@ const BubbleChart = _ref => {
     const formattedY = formatUnits(yMedian);
     return `${formattedX}, ${formattedY}`;
   }, [xMedian, yMedian]);
-
+  const handleChartMouseMove = e => {
+    if (!scatterFullChartRef.current) return;
+    const temp = isDragging ? 'move' : 'zoom-in';
+    setCurosrMouse(temp);
+  };
   // Render the component
   return /*#__PURE__*/React__default["default"].createElement(BubbleChartContainer, {
     width: width,
@@ -30920,6 +30928,9 @@ const BubbleChart = _ref => {
     height: "100%",
     "data-testid": "responsive-container"
   }, /*#__PURE__*/React__default["default"].createElement(recharts.ScatterChart, {
+    ref: scatterFullChartRef,
+    onMouseMove: handleChartMouseMove,
+    cursor: curosrMouse,
     margin: {
       top: 60,
       right: 190,
@@ -32296,10 +32307,8 @@ const VisibleCardsContainer = styled__default["default"].div`
 
   .prev-card,
   .next-card {
-    background: #d3d3d3;
-    > * {
-      opacity: 0.5;
-    }
+    background: #E7E7E7;
+    opacity: 0.9;
   }
 
   .prev-card {
@@ -32322,9 +32331,9 @@ const VisibleCardsContainer = styled__default["default"].div`
 `;
 const Card = styled__default["default"].div`
   position: absolute;
-  width: 60%;
+  width: 56%;
+  min-width: 600px;
   height: 100%;
-  max-width: 755px;
   background: #ffffff;
   border-radius: 16px;
   padding: 20px 50px;
@@ -32409,6 +32418,7 @@ const Dot = styled__default["default"].button`
 
 const InsightsCarousel = _ref => {
   let {
+    className,
     children,
     onClose,
     title = "Insights:",
@@ -32435,7 +32445,9 @@ const InsightsCarousel = _ref => {
   };
   const prevIndex = (currentIndex - 1 + totalChildren) % totalChildren;
   const nextIndex = (currentIndex + 1) % totalChildren;
-  return /*#__PURE__*/React__default["default"].createElement(Overlay, null, /*#__PURE__*/React__default["default"].createElement(ModalContent, null, /*#__PURE__*/React__default["default"].createElement(Header, null, /*#__PURE__*/React__default["default"].createElement(Title, {
+  return /*#__PURE__*/React__default["default"].createElement(Overlay, {
+    className: className
+  }, /*#__PURE__*/React__default["default"].createElement(ModalContent, null, /*#__PURE__*/React__default["default"].createElement(Header, null, /*#__PURE__*/React__default["default"].createElement(Title, {
     $titleColor: titleColor
   }, /*#__PURE__*/React__default["default"].cloneElement(icon, {
     fill: iconColor