@gemx-dev/heatmap-react 3.5.41 → 3.5.42

package/dist/esm/index.mjs

@@ -61,6 +61,8 @@ const HEATMAP_STYLE = {
     },
     wrapper: {
         padding: `${HEATMAP_CONFIG.padding}px 0`,
+        paddingBlock: `${HEATMAP_CONFIG.padding}px`,
+        paddingInline: `${HEATMAP_CONFIG.padding}px`,
     },
 };
 const DEFAULT_SIDEBAR_WIDTH = 260;
@@ -139,11 +141,7 @@ const useHeatmapVizStore = create()((set, get) => {
         isRenderViz: false,
         setIsRenderViz: (isRenderViz) => set({ isRenderViz }),
         scale: 1,
-        vizRef: null,
-        iframeHeight: 0,
         setScale: (scale) => set({ scale }),
-        setVizRef: (vizRef) => set({ vizRef }),
-        setIframeHeight: (iframeHeight) => set({ iframeHeight }),
     };
 });
 
@@ -165,6 +163,15 @@ const useHeatmapLiveStore = create()((set, get) => {
     };
 });
 
+const useHeatmapSingleStore = create()((set, get) => {
+    return {
+        vizRef: null,
+        iframeHeight: 0,
+        setVizRef: (vizRef) => set({ vizRef }),
+        setIframeHeight: (iframeHeight) => set({ iframeHeight }),
+    };
+});
+
 const useRegisterConfig = () => {
     const mode = useHeatmapConfigStore((state) => state.mode);
     const width = useHeatmapConfigStore((state) => state.width);
@@ -872,7 +879,7 @@ const useHeatmapEffects = ({ isVisible, isElementSidebarOpen, setShouldShowCallo
 
 const useHeatmapElementPosition = ({ iframeRef, wrapperRef, visualizer }) => {
     const widthScale = useHeatmapVizStore((state) => state.scale);
-    const iframeHeight = useHeatmapVizStore((state) => state.iframeHeight);
+    const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
     const heatmapWidth = useHeatmapConfigStore((state) => state.width);
     return useCallback((element) => {
         const hash = element?.hash;
@@ -920,6 +927,179 @@ const debounce = (fn, delay) => {
     };
 };
 
+// ===================== CONSTANTS =====================
+const HEATMAP_ELEMENT_ATTRIBUTE = 'data-clarity-hashalpha'; // Hoặc attribute bạn đang dùng
+// ===================== UTILITY FUNCTIONS =====================
+/**
+ * Lấy bounding box tuyệt đối của element (relative to document)
+ */
+function getBoundingBox(element) {
+    if (typeof element.getBoundingClientRect !== 'function') {
+        return null;
+    }
+    const rect = element.getBoundingClientRect();
+    // Lấy scroll offset (hỗ trợ cả cách cũ và mới)
+    const scrollLeft = 'pageXOffset' in window ? window.pageXOffset : document.documentElement.scrollLeft;
+    const scrollTop = 'pageYOffset' in window ? window.pageYOffset : document.documentElement.scrollTop;
+    // Kiểm tra element có kích thước hợp lệ
+    if (!rect || (rect.height === 0 && rect.width === 0)) {
+        return null;
+    }
+    // Trả về vị trí tuyệt đối
+    return {
+        left: Math.floor(rect.left + scrollLeft),
+        top: Math.floor(rect.top + scrollTop),
+        width: Math.floor(rect.width),
+        height: Math.floor(rect.height),
+    };
+}
+/**
+ * Lấy tất cả elements tại tọa độ (x, y), hỗ trợ Shadow DOM
+ */
+function getElementsAtPoint(documentOrShadowRoot, x, y, filterFunction, visitedShadowRoots = new Set()) {
+    // Lấy tất cả elements tại vị trí
+    const elementsAtPoint = documentOrShadowRoot.elementsFromPoint(x, y);
+    if (!filterFunction) {
+        return elementsAtPoint;
+    }
+    // Tìm element đầu tiên match với filter
+    const matchedElement = elementsAtPoint.find(filterFunction);
+    // Nếu element có Shadow DOM và chưa visit -> đệ quy vào
+    if (matchedElement?.shadowRoot && !visitedShadowRoots.has(matchedElement.shadowRoot)) {
+        visitedShadowRoots.add(matchedElement.shadowRoot);
+        return getElementsAtPoint(matchedElement.shadowRoot, x, y, filterFunction, visitedShadowRoots);
+    }
+    return elementsAtPoint;
+}
+// ===================== MAIN HOOK =====================
+function useHeatmapMouseHandler(props) {
+    const { heatmapWrapperRef, iframeRef, parentRef, heatmapInfo, scaleRatio, onElementHover } = props;
+    const handleMouseMove = useCallback((event) => {
+        // Kiểm tra tất cả refs và data cần thiết
+        if (!heatmapWrapperRef?.current ||
+            !iframeRef?.current ||
+            !iframeRef.current.contentDocument ||
+            !heatmapInfo?.elementMapInfo ||
+            !parentRef?.current) {
+            return;
+        }
+        try {
+            // Tính toán scroll position (đã scale)
+            const scrollTop = parentRef.current.scrollTop / scaleRatio;
+            console.log(`🚀 🐥 ~ useHeatmapMouseHandler ~ scrollTop:`, scrollTop);
+            // Lấy vị trí của heatmap wrapper
+            const wrapperRect = heatmapWrapperRef.current.getBoundingClientRect();
+            // Tính toán tọa độ chuột trong iframe (đã scale)
+            const mouseX = (event.clientX - wrapperRect.left) / scaleRatio;
+            const mouseY = (event.clientY - wrapperRect.top) / scaleRatio - scrollTop;
+            // Tìm elements tại vị trí chuột
+            const elementsAtPoint = getElementsAtPoint(iframeRef.current.contentDocument, Math.round(mouseX), Math.round(mouseY), 
+            // Filter: chỉ lấy elements có heatmap attribute
+            (element) => element.hasAttribute(HEATMAP_ELEMENT_ATTRIBUTE));
+            if (!elementsAtPoint || elementsAtPoint.length === 0) {
+                return;
+            }
+            // Duyệt qua các elements tìm được
+            for (let i = 0; i < elementsAtPoint.length; i++) {
+                const element = elementsAtPoint[i];
+                // Lấy hash/id của element
+                const elementHash = element.getAttribute(HEATMAP_ELEMENT_ATTRIBUTE);
+                // Kiểm tra element có data trong heatmapInfo không
+                if (elementHash && heatmapInfo.elementMapInfo[elementHash]) {
+                    const elementData = heatmapInfo.elementMapInfo[elementHash];
+                    // Lấy bounding box của element
+                    const boundingBox = getBoundingBox(element);
+                    if (boundingBox) {
+                        // Tính rank của element
+                        const rank = Array.isArray(heatmapInfo.sortedElements) && elementData
+                            ? heatmapInfo.sortedElements.indexOf(elementData) + 1
+                            : NaN;
+                        // Callback với thông tin element
+                        onElementHover({
+                            ...boundingBox,
+                            // Giới hạn width không vượt quá width của heatmap
+                            width: Math.min(boundingBox.width, heatmapInfo.width || 0),
+                            // Adjust top position với scroll
+                            top: boundingBox.top + scrollTop,
+                            // Metadata
+                            hash: elementHash,
+                            clicks: elementData.totalclicks,
+                            rank: rank,
+                            selector: elementData.selector || '',
+                        });
+                        // Dừng loop khi tìm thấy element hợp lệ đầu tiên
+                        break;
+                    }
+                }
+            }
+        }
+        catch (error) {
+            console.warn('Error handling mouse move on heatmap:', error);
+        }
+    }, [heatmapWrapperRef, iframeRef, parentRef, heatmapInfo, scaleRatio, onElementHover]);
+    return { handleMouseMove };
+}
+// ===================== EXAMPLE USAGE =====================
+/*
+import { useRef, useState } from 'react';
+
+function HeatmapComponent() {
+  const heatmapWrapperRef = useRef<HTMLDivElement>(null);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const parentRef = useRef<HTMLDivElement>(null);
+
+  const [hoveredElement, setHoveredElement] = useState<HoveredElementInfo | null>(null);
+
+  const heatmapInfo = {
+    width: 1920,
+    elementMapInfo: {
+      'hash123': {
+        totalclicks: 45,
+        selector: 'button.submit'
+      }
+    },
+    sortedElements: [...]
+  };
+
+  const { handleMouseMove } = useHeatmapMouseHandler({
+    heatmapWrapperRef,
+    iframeRef,
+    parentRef,
+    heatmapInfo,
+    scaleRatio: 0.8, // 80% zoom
+    onElementHover: (info) => {
+      setHoveredElement(info);
+      console.log('Hovered element:', info);
+    }
+  });
+
+  return (
+    <div ref={parentRef}>
+      <div
+        ref={heatmapWrapperRef}
+        onMouseMove={handleMouseMove}
+      >
+        <iframe ref={iframeRef} />
+
+        {hoveredElement && (
+          <div className="tooltip" style={{
+            position: 'absolute',
+            left: hoveredElement.left,
+            top: hoveredElement.top
+          }}>
+            Clicks: {hoveredElement.clicks}
+            <br />
+            Rank: #{hoveredElement.rank}
+            <br />
+            Selector: {hoveredElement.selector}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+*/
+
 const useHoveredElement = ({ iframeRef, getRect }) => {
     const hoveredElement = useHeatmapInteractionStore((state) => state.hoveredElement);
     const setHoveredElement = useHeatmapInteractionStore((state) => state.setHoveredElement);
@@ -941,7 +1121,7 @@ const useHoveredElement = ({ iframeRef, getRect }) => {
         const doc = iframe.contentDocument;
         const iframeRect = iframe.getBoundingClientRect();
         const { x, y } = convertViewportToIframeCoords(event.clientX, event.clientY, iframeRect, widthScale);
-        const targetElement = findTargetElement(doc, x, y);
+        const targetElement = findTargetElement(doc, x, y, heatmapInfo);
         if (!targetElement || !isValidElement(targetElement, heatmapInfo)) {
             reset();
             return;
@@ -992,7 +1172,25 @@ const convertViewportToIframeCoords = (clientX, clientY, iframeRect, scale) => {
     }
     return { x, y };
 };
-const findTargetElement = (doc, x, y) => {
+const findTargetElement = (doc, x, y, heatmapInfo) => {
+    const HEATMAP_ELEMENT_ATTRIBUTE = 'data-clarity-hashalpha';
+    const elementsAtPoint = getElementsAtPoint(doc, Math.round(x), Math.round(y), (element) => element.hasAttribute(HEATMAP_ELEMENT_ATTRIBUTE));
+    let dataElement = null;
+    for (let i = 0; i < elementsAtPoint.length; i++) {
+        const element = elementsAtPoint[i];
+        const elementHash = element.getAttribute(HEATMAP_ELEMENT_ATTRIBUTE);
+        if (elementHash && heatmapInfo.elementMapInfo?.[elementHash]) {
+            heatmapInfo.elementMapInfo[elementHash];
+            const boundingBox = getBoundingBox(element);
+            if (boundingBox) {
+                dataElement = element;
+                break;
+            }
+        }
+    }
+    if (!!dataElement) {
+        return dataElement;
+    }
     let targetElement = getElementAtPoint(doc, x, y);
     if (!targetElement) {
         targetElement = doc.elementFromPoint(x, y);
@@ -1016,7 +1214,7 @@ var MessageType;
     MessageType["GX_DOM_TRACKING_PAYLOAD"] = "GX_DOM_TRACKING_PAYLOAD";
     MessageType["CLARITY_READY"] = "CLARITY_READY";
 })(MessageType || (MessageType = {}));
-function useIframeMessage(options = {}) {
+function useVizLiveIframeMsg(options = {}) {
     const { trustedOrigins = [], onMessage } = options;
     const addPayload = useHeatmapLiveStore((state) => state.addPayload);
     const [isReady, setIsReady] = useState(false);
@@ -1066,13 +1264,14 @@ function useIframeMessage(options = {}) {
         isReady,
     };
 }
-function useIframeRender() {
+
+function useVizLiveRender() {
     const wrapperHeight = useHeatmapLiveStore((state) => state.wrapperHeight);
+    const setIframeHeight = useHeatmapLiveStore((state) => state.setIframeHeight);
     const contentWidth = useHeatmapConfigStore((state) => state.width);
-    const setIframeHeight = useHeatmapVizStore((state) => state.setIframeHeight);
     const htmlContent = useHeatmapLiveStore((state) => state.htmlContent);
     const setIsRenderViz = useHeatmapVizStore((state) => state.setIsRenderViz);
-    const { iframeRef, isReady } = useIframeMessage();
+    const { iframeRef, isReady } = useVizLiveIframeMsg();
     useEffect(() => {
         if (!htmlContent || !iframeRef.current)
             return;
@@ -1119,9 +1318,9 @@ function reset$1(iframe, rect, onSuccess) {
 let visualizer = new Visualizer();
 const useHeatmapRender = () => {
     const data = useHeatmapDataStore((state) => state.data);
-    const setVizRef = useHeatmapVizStore((state) => state.setVizRef);
+    const setVizRef = useHeatmapSingleStore((state) => state.setVizRef);
     const setIsRenderViz = useHeatmapVizStore((state) => state.setIsRenderViz);
-    const setIframeHeight = useHeatmapVizStore((state) => state.setIframeHeight);
+    const setIframeHeight = useHeatmapSingleStore((state) => state.setIframeHeight);
     const iframeRef = useRef(null);
     const renderHeatmap = useCallback(async (payloads) => {
         if (!payloads || payloads.length === 0)
@@ -1131,8 +1330,6 @@ const useHeatmapRender = () => {
         if (!iframe?.contentWindow)
             return;
         await visualizer.html(payloads, iframe.contentWindow);
-        const element = visualizer.get('3w0uppvjw');
-        console.log(`🚀 🐥 ~ useHeatmapRender ~ element:`, element);
         reset(iframe, payloads, (height) => {
             height && setIframeHeight(height);
             setIsRenderViz(true);
@@ -1160,8 +1357,8 @@ function reset(iframe, payloads, onSuccess) {
         targetHeight: docHeight,
         iframe: iframe,
         onSuccess: (data) => {
-            onSuccess(data.height);
             iframe.height = `${data.height}px`;
+            onSuccess(data.height);
         },
     });
     viewportFixer.recalculate();
@@ -1350,30 +1547,64 @@ const useContentDimensions = ({ iframeRef, }) => {
     return { contentWidth };
 };
 
-const useIframeHeight = (props) => {
+const useObserveIframeHeight = (props) => {
     const { iframeRef, setIframeHeight } = props;
     const isRenderViz = useHeatmapVizStore((state) => state.isRenderViz);
     const resizeObserverRef = useRef(null);
     const mutationObserverRef = useRef(null);
+    const debounceTimerRef = useRef(null);
+    const lastHeightRef = useRef(0);
+    const animationFrameRef = useRef(null);
     const updateIframeHeight = useCallback(() => {
         const iframe = iframeRef.current;
-        if (!iframe)
+        if (!iframe || !setIframeHeight)
             return;
         try {
             const iframeDocument = iframe.contentDocument;
             const iframeBody = iframeDocument?.body;
-            if (!iframeBody)
+            const iframeDocumentElement = iframeDocument?.documentElement;
+            if (!iframeBody || !iframeDocumentElement)
                 return;
-            const bodyHeight = Math.max(iframeBody.scrollHeight, iframeBody.offsetHeight, iframeBody.clientHeight);
-            if (bodyHeight > 0) {
-                iframe.height = `${bodyHeight}px`;
-                setIframeHeight(bodyHeight);
-            }
+            iframe.style.height = 'auto';
+            requestAnimationFrame(() => {
+                const bodyHeight = Math.max(iframeBody.scrollHeight, iframeBody.offsetHeight, iframeBody.clientHeight);
+                const documentHeight = Math.max(iframeDocumentElement.scrollHeight, iframeDocumentElement.offsetHeight, iframeDocumentElement.clientHeight);
+                const actualHeight = Math.max(bodyHeight, documentHeight);
+                if (actualHeight > 0) {
+                    lastHeightRef.current = actualHeight;
+                    iframe.height = `${actualHeight}px`;
+                    iframe.style.height = `${actualHeight}px`;
+                    setIframeHeight(actualHeight);
+                }
+            });
         }
         catch (error) {
             console.warn('Cannot measure iframe content:', error);
         }
     }, [iframeRef, setIframeHeight]);
+    const debouncedUpdate = useCallback(() => {
+        // Cancel pending updates
+        if (debounceTimerRef.current) {
+            clearTimeout(debounceTimerRef.current);
+        }
+        if (animationFrameRef.current) {
+            cancelAnimationFrame(animationFrameRef.current);
+        }
+        debounceTimerRef.current = setTimeout(() => {
+            animationFrameRef.current = requestAnimationFrame(() => {
+                updateIframeHeight();
+            });
+        }, 50);
+    }, [updateIframeHeight]);
+    // Immediate update không debounce (cho ResizeObserver)
+    const immediateUpdate = useCallback(() => {
+        if (animationFrameRef.current) {
+            cancelAnimationFrame(animationFrameRef.current);
+        }
+        animationFrameRef.current = requestAnimationFrame(() => {
+            updateIframeHeight();
+        });
+    }, [updateIframeHeight]);
     useEffect(() => {
         const iframe = iframeRef.current;
         if (!iframe || !isRenderViz)
@@ -1391,22 +1622,24 @@ const useIframeHeight = (props) => {
                 if (mutationObserverRef.current) {
                     mutationObserverRef.current.disconnect();
                 }
-                // ResizeObserver for size changes
                 if (typeof window.ResizeObserver !== 'undefined') {
-                    resizeObserverRef.current = new ResizeObserver(updateIframeHeight);
+                    resizeObserverRef.current = new ResizeObserver(immediateUpdate);
                     resizeObserverRef.current.observe(iframeBody);
+                    const iframeDocumentElement = iframeDocument?.documentElement;
+                    if (iframeDocumentElement) {
+                        resizeObserverRef.current.observe(iframeDocumentElement);
+                    }
                 }
-                // MutationObserver for DOM changes
                 if (typeof window.MutationObserver !== 'undefined') {
-                    mutationObserverRef.current = new MutationObserver(updateIframeHeight);
+                    mutationObserverRef.current = new MutationObserver(immediateUpdate);
                     mutationObserverRef.current.observe(iframeBody, {
                         childList: true,
                         subtree: true,
                         attributes: true,
-                        characterData: true,
+                        attributeFilter: ['style', 'class'],
+                        characterData: false,
                     });
                 }
-                // Initial measurement
                 updateIframeHeight();
             }
             catch (error) {
@@ -1420,15 +1653,23 @@ const useIframeHeight = (props) => {
             iframe.addEventListener('load', setupObservers, { once: true });
         }
         return () => {
+            // Cleanup observers
             if (resizeObserverRef.current) {
                 resizeObserverRef.current.disconnect();
             }
             if (mutationObserverRef.current) {
                 mutationObserverRef.current.disconnect();
             }
+            // Cleanup timers
+            if (debounceTimerRef.current) {
+                clearTimeout(debounceTimerRef.current);
+            }
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+            }
             iframe.removeEventListener('load', setupObservers);
         };
-    }, [iframeRef, isRenderViz, updateIframeHeight]);
+    }, [iframeRef, isRenderViz, updateIframeHeight, debouncedUpdate, immediateUpdate]);
     return {};
 };
 
@@ -1474,7 +1715,7 @@ const useHeatmapScale = (props) => {
     // 2. Get content dimensions from config
     const { contentWidth } = useContentDimensions({ iframeRef });
     // 3. Observe iframe height (now reacts to width changes)
-    useIframeHeight({ iframeRef, setIframeHeight });
+    useObserveIframeHeight({ iframeRef, setIframeHeight });
     // 4. Calculate scale
     const { scale } = useScaleCalculation({ containerWidth, contentWidth });
     // 5. Setup scroll sync
@@ -1645,37 +1886,159 @@ const VizContainer = ({ children, setWrapperHeight }) => {
 const useClickmap = () => {
     const [isInitialized, setIsInitialized] = useState(false);
     const clickmap = useHeatmapDataStore((state) => state.clickmap);
-    const vizRef = useHeatmapVizStore((state) => state.vizRef);
-    useEffect(() => {
+    const vizRef = useHeatmapSingleStore((state) => state.vizRef);
+    const start = useCallback(() => {
         if (isInitialized)
             return;
         if (!vizRef || !clickmap || clickmap.length === 0)
             return;
-        vizRef.clearmap();
-        const element = vizRef.get('3w0uppvjw');
-        console.log(`🚀 🐥 ~ useClickmap ~ element:`, element);
-        vizRef?.clickmap(clickmap);
-        setIsInitialized(true);
+        try {
+            vizRef?.clearmap?.();
+            vizRef?.clickmap?.(clickmap);
+            setIsInitialized(true);
+        }
+        catch (error) {
+            console.error(`🚀 🐥 ~ useClickmap ~ error:`, error);
+        }
     }, [vizRef, clickmap]);
-    return {};
+    return { start };
 };
 
+const DATA_SCROLLMAP = [
+    {
+        scrollReachY: 5,
+        cumulativeSum: 0,
+        percUsers: 0,
+    },
+    {
+        scrollReachY: 10,
+        cumulativeSum: 0,
+        percUsers: 0,
+    },
+    {
+        scrollReachY: 15,
+        cumulativeSum: 0,
+        percUsers: 0,
+    },
+    {
+        scrollReachY: 20,
+        cumulativeSum: 0,
+        percUsers: 0,
+    },
+    {
+        scrollReachY: 25,
+        cumulativeSum: 0,
+        percUsers: 0,
+    },
+    {
+        scrollReachY: 30,
+        cumulativeSum: 0,
+        percUsers: 0,
+    },
+    {
+        scrollReachY: 35,
+        cumulativeSum: 0,
+        percUsers: 0,
+    },
+    {
+        scrollReachY: 40,
+        cumulativeSum: 0,
+        percUsers: 0,
+    },
+    {
+        scrollReachY: 45,
+        cumulativeSum: 0,
+        percUsers: 0,
+    },
+    {
+        scrollReachY: 50,
+        cumulativeSum: 0,
+        percUsers: 0,
+    },
+    {
+        scrollReachY: 55,
+        cumulativeSum: 0,
+        percUsers: 0,
+    },
+    {
+        scrollReachY: 60,
+        cumulativeSum: 0,
+        percUsers: 0,
+    },
+    {
+        scrollReachY: 65,
+        cumulativeSum: 0,
+        percUsers: 0,
+    },
+    {
+        scrollReachY: 70,
+        cumulativeSum: 0,
+        percUsers: 0,
+    },
+    {
+        scrollReachY: 75,
+        cumulativeSum: 0,
+        percUsers: 0,
+    },
+    {
+        scrollReachY: 80,
+        cumulativeSum: 0,
+        percUsers: 0,
+    },
+    {
+        scrollReachY: 85,
+        cumulativeSum: 0,
+        percUsers: 0,
+    },
+    {
+        scrollReachY: 90,
+        cumulativeSum: 0,
+        percUsers: 0,
+    },
+    {
+        scrollReachY: 95,
+        cumulativeSum: 0,
+        percUsers: 0,
+    },
+    {
+        scrollReachY: 100,
+        cumulativeSum: 0,
+        percUsers: 0,
+    },
+];
 const useScrollmap = () => {
-    useHeatmapDataStore((state) => state.clickmap);
-    return {};
+    const vizRef = useHeatmapSingleStore((state) => state.vizRef);
+    const start = useCallback(() => {
+        // if (isInitialized) return;
+        const scrollmap = DATA_SCROLLMAP;
+        if (!vizRef || !scrollmap || scrollmap.length === 0)
+            return;
+        try {
+            vizRef?.clearmap?.();
+            vizRef?.scrollmap?.(scrollmap);
+            // setIsInitialized(true);
+        }
+        catch (error) {
+            console.error(`🚀 🐥 ~ useScrollmap ~ error:`, error);
+        }
+    }, [vizRef]);
+    return { start };
 };
 
 const useHeatmapVizCanvas = () => {
     const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
-    const heatmapRender = useMemo(() => {
+    const { start: startClickmap } = useClickmap();
+    const { start: startScrollmap } = useScrollmap();
+    useEffect(() => {
         switch (heatmapType) {
             case IHeatmapType.Click:
-                return useClickmap;
+                startClickmap();
+                break;
             case IHeatmapType.Scroll:
-                return useScrollmap;
+                startClickmap();
+                break;
         }
-    }, [heatmapType]);
-    return heatmapRender?.();
+    }, [heatmapType, startClickmap, startScrollmap]);
 };
 
 const CLICKED_ELEMENT_ID = 'gx-hm-clicked-element';
@@ -1738,7 +2101,7 @@ const ElementCallout = (props) => {
             window.removeEventListener('resize', handleUpdate);
             visualRef?.current?.removeEventListener('scroll', handleUpdate);
         };
-    }, [target, visualRef, hozOffset, alignment]);
+    }, [element, target, visualRef, hozOffset, alignment]);
     const calloutContent = (jsx("div", { ref: calloutRef, className: `clarity-callout clarity-callout--${position.placement} clarity-callout--align-${position.horizontalAlign}`, style: {
             position: 'fixed',
             top: position.top,
@@ -1803,7 +2166,8 @@ const ELEMENT_CALLOUT = {
     alignment: 'left',
 };
 const HeatmapElements = (props) => {
-    const height = useHeatmapVizStore((state) => state.iframeHeight);
+    const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
+    const setHoveredElement = useHeatmapInteractionStore((state) => state.setHoveredElement);
     const { iframeRef, wrapperRef, visualRef, visualizer, iframeDimensions, isElementSidebarOpen, isVisible = true, areDefaultRanksHidden, isSecondary, ...rest } = props;
     const getRect = useHeatmapElementPosition({
         iframeRef,
@@ -1818,6 +2182,27 @@ const HeatmapElements = (props) => {
         iframeRef,
         getRect,
     });
+    const heatmapInfo = useHeatmapDataStore((state) => state.dataInfo);
+    useHeatmapMouseHandler({
+        heatmapWrapperRef: wrapperRef,
+        iframeRef,
+        parentRef: visualRef,
+        heatmapInfo: heatmapInfo || {},
+        scaleRatio: 0.8, // 80% zoom
+        onElementHover: (info) => {
+            setHoveredElement({
+                hash: info.hash,
+                clicks: info.clicks,
+                rank: info.rank,
+                selector: info.selector,
+                top: info.top,
+                left: info.left,
+                width: info.width,
+                height: info.height,
+            });
+            console.log(`🚀 🐥 ~ HeatmapElements ~ info:`, info);
+        },
+    });
     useElementCalloutVisible({
         visualRef,
         getRect,
@@ -1833,13 +2218,16 @@ const HeatmapElements = (props) => {
     });
     if (!isVisible)
         return null;
-    return (jsxs("div", { onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, className: "gx-hm-elements", style: { ...iframeDimensions, height }, children: [jsx(ElementMissing, { show: showMissingElement }), jsx(DefaultRankBadges, { getRect: getRect, hidden: areDefaultRanksHidden }), jsx(ElementOverlay, { type: "clicked", element: clickedElement, isSecondary: isSecondary }), jsx(ElementOverlay, { type: "hovered", element: hoveredElement, isSecondary: isSecondary, onClick: handleClick }), hoveredElement?.hash !== clickedElement?.hash && hoveredElement && (jsx(ElementCallout, { element: hoveredElement, target: `#${HOVERED_ELEMENT_ID}`, visualRef: visualRef, ...ELEMENT_CALLOUT })), shouldShowCallout && clickedElement && (jsx(ElementCallout, { element: clickedElement, target: `#${CLICKED_ELEMENT_ID}`, visualRef: visualRef, ...ELEMENT_CALLOUT }))] }));
+    return (jsxs("div", { onMouseMove: (event) => {
+            handleMouseMove(event);
+            // handleMouseMove2(event as any);
+        }, onMouseLeave: handleMouseLeave, className: "gx-hm-elements", style: { ...iframeDimensions, height: `${iframeHeight}px` }, children: [jsx(ElementMissing, { show: showMissingElement }), jsx(DefaultRankBadges, { getRect: getRect, hidden: areDefaultRanksHidden }), jsx(ElementOverlay, { type: "clicked", element: clickedElement, isSecondary: isSecondary }), jsx(ElementOverlay, { type: "hovered", element: hoveredElement, isSecondary: isSecondary, onClick: handleClick }), hoveredElement?.hash !== clickedElement?.hash && hoveredElement && (jsx(ElementCallout, { element: hoveredElement, target: `#${HOVERED_ELEMENT_ID}`, visualRef: visualRef, ...ELEMENT_CALLOUT })), shouldShowCallout && clickedElement && (jsx(ElementCallout, { element: clickedElement, target: `#${CLICKED_ELEMENT_ID}`, visualRef: visualRef, ...ELEMENT_CALLOUT }))] }));
 };
 
 const VizElements = ({ iframeRef, visualRef, wrapperRef }) => {
     const heatmapInfo = useHeatmapDataStore((state) => state.dataInfo);
     const contentWidth = useHeatmapConfigStore((state) => state.width);
-    const vizRef = useHeatmapVizStore((state) => state.vizRef);
+    const vizRef = useHeatmapSingleStore((state) => state.vizRef);
     const visualizer = {
         get: (hash) => {
             if (vizRef) {
@@ -1904,8 +2292,8 @@ const WrapperVisual = ({ children, visualRef, wrapperRef, scaledHeight, iframeHe
 
 const VizDomRenderer = ({ mode = 'heatmap' }) => {
     const width = useHeatmapConfigStore((state) => state.width);
-    const iframeHeight = useHeatmapVizStore((state) => state.iframeHeight);
-    const setIframeHeight = useHeatmapVizStore((state) => state.setIframeHeight);
+    const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
+    const setIframeHeight = useHeatmapSingleStore((state) => state.setIframeHeight);
     const setSelectedElement = useHeatmapInteractionStore((state) => state.setSelectedElement);
     const wrapperRef = useRef(null);
     const visualRef = useRef(null);
@@ -1915,7 +2303,6 @@ const VizDomRenderer = ({ mode = 'heatmap' }) => {
         iframeRef,
         visualRef,
         iframeHeight,
-        setIframeHeight,
     });
     const contentWidth = width ?? 0;
     const onScroll = (e) => {
@@ -1930,7 +2317,7 @@ const VizDomRenderer = ({ mode = 'heatmap' }) => {
     useEffect(() => {
         return cleanUp;
     }, []);
-    return (jsxs(WrapperVisual, { visualRef: visualRef, wrapperRef: wrapperRef, scaledHeight: scaledHeight, onScroll: onScroll, iframeHeight: iframeHeight, children: [jsx(VizElements, { iframeRef: iframeRef, visualRef: visualRef, wrapperRef: wrapperRef }), jsx("iframe", { ref: iframeRef, ...HEATMAP_IFRAME, width: contentWidth, height: iframeHeight, scrolling: "no" })] }));
+    return (jsxs(WrapperVisual, { visualRef: visualRef, wrapperRef: wrapperRef, scaledHeight: scaledHeight, onScroll: onScroll, iframeHeight: iframeHeight, children: [jsx(VizElements, { iframeRef: iframeRef, visualRef: visualRef, wrapperRef: wrapperRef }), jsx("iframe", { ref: iframeRef, ...HEATMAP_IFRAME, width: contentWidth, scrolling: "no" })] }));
 };
 
 const VizLoading = () => {
@@ -1940,12 +2327,12 @@ const VizLoading = () => {
 const VizDomHeatmap = () => {
     const controls = useHeatmapControlStore((state) => state.controls);
     const isRendering = useHeatmapDataStore((state) => state.isRendering);
-    const iframeHeight = useHeatmapVizStore((state) => state.iframeHeight);
-    const setIframeHeight = useHeatmapVizStore((state) => state.setIframeHeight);
-    const setVizRef = useHeatmapVizStore((state) => state.setVizRef);
+    const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
+    const setIframeHeight = useHeatmapSingleStore((state) => state.setIframeHeight);
+    const setVizRef = useHeatmapSingleStore((state) => state.setVizRef);
     useEffect(() => {
         return () => {
-            setVizRef(undefined);
+            setVizRef(null);
             setIframeHeight(0);
         };
     }, []);
@@ -1960,7 +2347,7 @@ const VizLiveRenderer = () => {
     const setIframeHeight = useHeatmapLiveStore((state) => state.setIframeHeight);
     const visualRef = useRef(null);
     const wrapperRef = useRef(null);
-    const { iframeRef } = useIframeRender();
+    const { iframeRef } = useVizLiveRender();
     const { scaledHeight, handleScroll } = useHeatmapScale({
         wrapperRef,
         iframeRef,
@@ -1972,13 +2359,15 @@ const VizLiveRenderer = () => {
         const scrollTop = e.currentTarget.scrollTop;
         handleScroll(scrollTop);
     };
-    return (jsx(WrapperVisual, { visualRef: visualRef, wrapperRef: wrapperRef, scaledHeight: scaledHeight, iframeHeight: iframeHeight, onScroll: onScroll, children: jsx("iframe", { ref: iframeRef, ...HEATMAP_IFRAME, width: contentWidth, height: iframeHeight, scrolling: "no", sandbox: "allow-scripts allow-same-origin" }) }));
+    return (jsx(WrapperVisual, { visualRef: visualRef, wrapperRef: wrapperRef, scaledHeight: scaledHeight, iframeHeight: iframeHeight, onScroll: onScroll, children: jsx("iframe", { ref: iframeRef, ...HEATMAP_IFRAME, width: contentWidth, 
+            // height={iframeHeight}
+            scrolling: "no", sandbox: "allow-scripts allow-same-origin" }) }));
 };
 
 const VizLiveHeatmap = () => {
     const controls = useHeatmapControlStore((state) => state.controls);
     const isRendering = useHeatmapDataStore((state) => state.isRendering);
-    const iframeHeight = useHeatmapVizStore((state) => state.iframeHeight);
+    const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
     const wrapperHeight = useHeatmapLiveStore((state) => state.wrapperHeight);
     const setWrapperHeight = useHeatmapLiveStore((state) => state.setWrapperHeight);
     const reset = useHeatmapLiveStore((state) => state.reset);