sag_components 2.0.0-beta67 → 2.0.0-beta69

package/dist/index.d.ts

@@ -1220,7 +1220,8 @@ declare function PerformanceAnalyticsLegend(props: any): react_jsx_runtime.JSX.E
 
 declare function BrushChart(props: any): react_jsx_runtime.JSX.Element;
 
-declare function InsightsCarousel({ children, onClose, title, icon, titleColor, iconColor, navColor, }: {
+declare function InsightsCarousel({ className, children, onClose, title, icon, titleColor, iconColor, navColor, }: {
+    className: any;
     children: any;
     onClose: any;
     title?: string;

package/dist/index.esm.js

@@ -30430,6 +30430,8 @@ const BubbleChart = _ref => {
     backgroundColor = 'white',
     showAxis = false
   } = _ref;
+  const [curosrMouse, setCurosrMouse] = useState("default");
+
   // Calculate the medians and domain for raw X, Y, and Z values
   const {
     xMedian,
@@ -30514,6 +30516,7 @@ const BubbleChart = _ref => {
   // Refs for the chart container
   const containerRef = useRef(null);
   const scatterChartRef = useRef(null);
+  const scatterFullChartRef = useRef(null);
 
   // Set up initial domain
   useEffect(() => {
@@ -30686,9 +30689,9 @@ const BubbleChart = _ref => {
       e.preventDefault();
     }
   }, [viewDomain]); // Add viewDomain as dependency to capture current value
-
   // Handle mouse move for dragging
   const handleMouseMove = useCallback(e => {
+    /* cursor feedback */
     if (!isDragging) return;
     const dx = e.clientX - dragStart.x;
     const dy = e.clientY - dragStart.y;
@@ -30797,6 +30800,7 @@ const BubbleChart = _ref => {
 
   // Handle mouse wheel
   const handleWheel = useCallback(e => {
+    if (!e.ctrlKey) return; // Only zoom with Ctrl key
     e.preventDefault();
     if (e.deltaY < 0) {
       handleZoomIn();
@@ -30885,7 +30889,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$1.createElement(BubbleChartContainer, {
     width: width,
@@ -30910,6 +30918,9 @@ const BubbleChart = _ref => {
     height: "100%",
     "data-testid": "responsive-container"
   }, /*#__PURE__*/React$1.createElement(ScatterChart, {
+    ref: scatterFullChartRef,
+    onMouseMove: handleChartMouseMove,
+    cursor: curosrMouse,
     margin: {
       top: 60,
       right: 190,
@@ -32286,10 +32297,8 @@ const VisibleCardsContainer = styled.div`
 
   .prev-card,
   .next-card {
-    background: #d3d3d3;
-    > * {
-      opacity: 0.5;
-    }
+    background: #E7E7E7;
+    opacity: 0.9;
   }
 
   .prev-card {
@@ -32312,9 +32321,9 @@ const VisibleCardsContainer = styled.div`
 `;
 const Card = styled.div`
   position: absolute;
-  width: 60%;
+  width: 56%;
+  min-width: 600px;
   height: 100%;
-  max-width: 755px;
   background: #ffffff;
   border-radius: 16px;
   padding: 20px 50px;
@@ -32399,6 +32408,7 @@ const Dot = styled.button`
 
 const InsightsCarousel = _ref => {
   let {
+    className,
     children,
     onClose,
     title = "Insights:",
@@ -32425,7 +32435,9 @@ const InsightsCarousel = _ref => {
   };
   const prevIndex = (currentIndex - 1 + totalChildren) % totalChildren;
   const nextIndex = (currentIndex + 1) % totalChildren;
-  return /*#__PURE__*/React$1.createElement(Overlay, null, /*#__PURE__*/React$1.createElement(ModalContent, null, /*#__PURE__*/React$1.createElement(Header, null, /*#__PURE__*/React$1.createElement(Title, {
+  return /*#__PURE__*/React$1.createElement(Overlay, {
+    className: className
+  }, /*#__PURE__*/React$1.createElement(ModalContent, null, /*#__PURE__*/React$1.createElement(Header, null, /*#__PURE__*/React$1.createElement(Title, {
     $titleColor: titleColor
   }, /*#__PURE__*/React$1.cloneElement(icon, {
     fill: iconColor