@gemx-dev/heatmap-react 3.5.33 → 3.5.35

package/dist/esm/index.mjs

@@ -1,7 +1,7 @@
 "use client"
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useNodesState, ReactFlow, Controls, Background } from '@xyflow/react';
-import { useEffect, useCallback, useState, useRef, useMemo, Fragment as Fragment$1 } from 'react';
+import { useEffect, useCallback, useState, useRef, useMemo, forwardRef, Fragment as Fragment$1 } from 'react';
 import { create } from 'zustand';
 import { Visualizer } from '@gemx-dev/clarity-visualize';
 import { createPortal } from 'react-dom';
@@ -49,7 +49,9 @@ const HEATMAP_IFRAME = {
 const HEATMAP_CONFIG = {
     padding: 8,
     borderWidth: 1,
+    borderWidthIframe: 2,
     borderColor: '#E3E3E3',
+    heightToolbar: 60, // height of the toolbar
 };
 const HEATMAP_STYLE = {
     viz: {
@@ -70,6 +72,7 @@ const useHeatmapControlStore = create()((set, get) => {
             Toolbar: null,
             MetricBar: null,
             VizLoading: null,
+            ElementCallout: null,
         },
         registerControl: (key, control) => {
             set({
@@ -118,6 +121,8 @@ const useHeatmapInteractionStore = create()((set, get) => {
         setSelectedElement: (selectedElement) => set({ selectedElement }),
         hoveredElement: null,
         setHoveredElement: (hoveredElement) => set({ hoveredElement }),
+        shouldShowCallout: false,
+        setShouldShowCallout: (shouldShowCallout) => set({ shouldShowCallout }),
     };
 });
 
@@ -150,6 +155,7 @@ const useRegisterControl = (control) => {
     registerControl('Toolbar', control.Toolbar);
     registerControl('MetricBar', control.MetricBar);
     registerControl('VizLoading', control.VizLoading);
+    registerControl('ElementCallout', control.ElementCallout);
 };
 
 const useRegisterData = (data, dataInfo) => {
@@ -187,17 +193,282 @@ const useRegisterHeatmap = (clickmap) => {
     }, [clickmap]);
 };
 
-const useClickedElement = ({ heatmapInfo, getRect }) => {
+const PADDING = 0;
+const ARROW_SIZE = 8;
+const HORIZONTAL_OFFSET = 0;
+// ============================================================================
+// Viewport & Dimensions
+// ============================================================================
+const getViewportDimensions = () => ({
+    width: window.innerWidth,
+    height: window.innerHeight,
+});
+const getElementDimensions = (targetElm, calloutElm) => ({
+    targetRect: targetElm.getBoundingClientRect(),
+    calloutRect: calloutElm.getBoundingClientRect(),
+});
+// ============================================================================
+// Alignment Order
+// ============================================================================
+const getAlignmentOrder = (alignment) => {
+    switch (alignment) {
+        case 'center':
+            return ['center', 'left', 'right'];
+        case 'left':
+            return ['left', 'center', 'right'];
+        case 'right':
+            return ['right', 'center', 'left'];
+    }
+};
+// ============================================================================
+// Position Calculation
+// ============================================================================
+const calculateLeftPosition = ({ targetRect, calloutRect, hozOffset, align, }) => {
+    switch (align) {
+        case 'left':
+            return targetRect.left + hozOffset;
+        case 'right':
+            return targetRect.right - calloutRect.width - hozOffset;
+        case 'center':
+        default:
+            return targetRect.left + targetRect.width / 2 - calloutRect.width / 2;
+    }
+};
+const calculateVerticalPosition = (targetRect, calloutRect, placement, padding, arrowSize) => {
+    return placement === 'top'
+        ? targetRect.top - calloutRect.height - padding - arrowSize
+        : targetRect.bottom + padding + arrowSize;
+};
+const calculateHorizontalPlacementPosition = (targetRect, calloutRect, placement, padding, arrowSize) => {
+    const top = targetRect.top + targetRect.height / 2 - calloutRect.height / 2;
+    const left = placement === 'right'
+        ? targetRect.right + padding + arrowSize
+        : targetRect.left - calloutRect.width - padding - arrowSize;
+    return { top, left };
+};
+// ============================================================================
+// Validation
+// ============================================================================
+const isLeftPositionValid = (leftPos, calloutWidth, viewportWidth, padding) => {
+    return leftPos >= padding && leftPos + calloutWidth <= viewportWidth - padding;
+};
+const isVerticalPositionValid = (targetRect, calloutRect, placement, viewportHeight, padding, arrowSize) => {
+    return placement === 'top'
+        ? targetRect.top - calloutRect.height - padding - arrowSize > 0
+        : targetRect.bottom + calloutRect.height + padding + arrowSize < viewportHeight;
+};
+const isHorizontalPlacementValid = (targetRect, calloutRect, placement, viewportWidth, padding, arrowSize) => {
+    return placement === 'right'
+        ? targetRect.right + calloutRect.width + padding + arrowSize < viewportWidth
+        : targetRect.left - calloutRect.width - padding - arrowSize > 0;
+};
+// ============================================================================
+// Position Candidates Generation
+// ============================================================================
+const generateVerticalPositionCandidates = (targetRect, calloutRect, viewportHeight, viewportWidth, alignment, hozOffset, padding, arrowSize) => {
+    const candidates = [];
+    const placements = ['top', 'bottom'];
+    placements.forEach((placement) => {
+        const verticalPos = calculateVerticalPosition(targetRect, calloutRect, placement, padding, arrowSize);
+        const verticalValid = isVerticalPositionValid(targetRect, calloutRect, placement, viewportHeight, padding, arrowSize);
+        const alignmentOrder = getAlignmentOrder(alignment);
+        alignmentOrder.forEach((align) => {
+            const horizontalPos = calculateLeftPosition({
+                targetRect,
+                calloutRect,
+                hozOffset,
+                align,
+            });
+            candidates.push({
+                placement,
+                top: verticalPos,
+                left: horizontalPos,
+                horizontalAlign: align,
+                valid: verticalValid &&
+                    isLeftPositionValid(horizontalPos, calloutRect.width, viewportWidth, padding),
+            });
+        });
+    });
+    return candidates;
+};
+const generateHorizontalPositionCandidates = (targetRect, calloutRect, viewportWidth, padding, arrowSize) => {
+    const placements = ['left', 'right'];
+    return placements.map((placement) => {
+        const { top, left } = calculateHorizontalPlacementPosition(targetRect, calloutRect, placement, padding, arrowSize);
+        return {
+            placement,
+            top,
+            left,
+            horizontalAlign: 'center',
+            valid: isHorizontalPlacementValid(targetRect, calloutRect, placement, viewportWidth, padding, arrowSize),
+        };
+    });
+};
+const generateAllPositionCandidates = (rectDimensions, viewport, alignment, hozOffset, padding, arrowSize) => {
+    const { targetRect, calloutRect } = rectDimensions;
+    const verticalCandidates = generateVerticalPositionCandidates(targetRect, calloutRect, viewport.height, viewport.width, alignment, hozOffset, padding, arrowSize);
+    const horizontalCandidates = generateHorizontalPositionCandidates(targetRect, calloutRect, viewport.width, padding, arrowSize);
+    return [...verticalCandidates, ...horizontalCandidates];
+};
+// ============================================================================
+// Position Selection
+// ============================================================================
+const selectBestPosition = (candidates) => {
+    return candidates.find((p) => p.valid) || candidates[0];
+};
+// ============================================================================
+// Viewport Boundary Adjustment
+// ============================================================================
+const constrainToViewport = (position, calloutRect, viewport, padding) => {
+    const left = Math.max(padding, Math.min(position.left, viewport.width - calloutRect.width - padding));
+    const top = Math.max(padding, Math.min(position.top, viewport.height - calloutRect.height - padding));
+    return { top, left };
+};
+// ============================================================================
+// Main Function
+// ============================================================================
+const calcCalloutPosition = ({ targetElm, calloutElm, setPosition, hozOffset = HORIZONTAL_OFFSET, alignment = 'center', }) => {
+    return () => {
+        // 1. Get dimensions
+        const rectDimensions = getElementDimensions(targetElm, calloutElm);
+        const viewport = getViewportDimensions();
+        const padding = PADDING;
+        const arrowSize = ARROW_SIZE;
+        // 2. Generate all position candidates
+        const candidates = generateAllPositionCandidates(rectDimensions, viewport, alignment, hozOffset, padding, arrowSize);
+        // 3. Select best position
+        const bestPosition = selectBestPosition(candidates);
+        // 4. Constrain to viewport
+        const constrainedPosition = constrainToViewport({ top: bestPosition.top, left: bestPosition.left }, rectDimensions.calloutRect, viewport, padding);
+        // 5. Create final position object
+        const finalPosition = {
+            top: constrainedPosition.top,
+            left: constrainedPosition.left,
+            placement: bestPosition.placement,
+            horizontalAlign: bestPosition.horizontalAlign,
+        };
+        setPosition(finalPosition);
+    };
+};
+
+function getElementLayout(element) {
+    if (!element?.getBoundingClientRect)
+        return null;
+    const rect = element.getBoundingClientRect();
+    if (rect.width === 0 && rect.height === 0)
+        return null;
+    return {
+        top: rect.top,
+        left: rect.left,
+        width: rect.width,
+        height: rect.height,
+    };
+}
+const getElementAtPoint = (doc, x, y) => {
+    let el = null;
+    if ('caretPositionFromPoint' in doc) {
+        el = doc.caretPositionFromPoint(x, y)?.offsetNode ?? null;
+    }
+    el = el ?? doc.elementFromPoint(x, y);
+    let element = el;
+    while (element && element.nodeType === Node.TEXT_NODE) {
+        element = element.parentElement;
+    }
+    return element;
+};
+function getElementHash(element) {
+    return (element.getAttribute('data-clarity-hash') ||
+        element.getAttribute('data-clarity-hashalpha') ||
+        element.getAttribute('data-clarity-hashbeta'));
+}
+const getElementRank = (hash, elements) => {
+    if (!elements)
+        return 0;
+    return elements.findIndex((e) => e.hash === hash) + 1;
+};
+const buildElementInfo = (hash, rect, heatmapInfo) => {
+    if (!rect || !heatmapInfo)
+        return null;
+    const info = heatmapInfo.elementMapInfo?.[hash];
+    if (!info)
+        return null;
+    const rank = getElementRank(hash, heatmapInfo.sortedElements);
+    const clicks = info.totalclicks ?? 0;
+    const selector = info.selector ?? '';
+    const baseInfo = {
+        hash,
+        clicks,
+        rank,
+        selector,
+    };
+    return {
+        ...baseInfo,
+        ...rect,
+    };
+};
+
+function calculateRankPosition(rect, widthScale) {
+    const top = rect.top <= 18 ? rect.top + 3 : rect.top - 18;
+    const left = rect.left <= 18 ? rect.left + 3 : rect.left - 18;
+    return {
+        transform: `scale(${1.2 * widthScale})`,
+        top: Number.isNaN(top) ? undefined : top,
+        left: Number.isNaN(left) ? undefined : left,
+    };
+}
+function isElementInViewport(elementRect, visualRef, scale) {
+    if (!elementRect)
+        return false;
+    const visualRect = visualRef.current?.getBoundingClientRect();
+    if (!visualRect)
+        return false;
+    // Element position relative to the document (or container's content)
+    const elementTop = elementRect.top * scale;
+    const elementBottom = (elementRect.top + elementRect.height) * scale;
+    // Current scroll position
+    const scrollTop = visualRef.current?.scrollTop || 0;
+    const viewportHeight = visualRect.height;
+    // Visible viewport range in the scrollable content
+    const viewportTop = scrollTop;
+    const viewportBottom = scrollTop + viewportHeight;
+    // Check if element is within the visible viewport
+    // Element is visible if it overlaps with the viewport
+    return elementBottom > viewportTop && elementTop < viewportBottom;
+}
+
+const scrollToElementIfNeeded = (visualRef, rect, scale) => {
+    if (!visualRef.current)
+        return;
+    const visualRect = visualRef.current.getBoundingClientRect();
+    if (isElementInViewport(rect, visualRef, scale)) {
+        return;
+    }
+    const topRaw = rect.top; // - visualRect.top
+    const topScaled = topRaw * scale;
+    const viewportHeight = visualRect.height;
+    const elementHeightScaled = rect.height * scale;
+    const scrollTop = topScaled - (viewportHeight - elementHeightScaled) / 2;
+    visualRef.current.scrollTo({
+        top: Math.max(0, scrollTop),
+        behavior: 'smooth',
+    });
+};
+const useClickedElement = ({ visualRef, getRect }) => {
+    const heatmapInfo = useHeatmapDataStore((state) => state.dataInfo);
     const selectedElement = useHeatmapInteractionStore((state) => state.selectedElement);
+    const shouldShowCallout = useHeatmapInteractionStore((state) => state.shouldShowCallout);
+    const setShouldShowCallout = useHeatmapInteractionStore((state) => state.setShouldShowCallout);
+    const scale = useHeatmapVizStore((state) => state.scale);
     const [clickedElement, setClickedElement] = useState(null);
     const [showMissingElement, setShowMissingElement] = useState(false);
-    const [shouldShowCallout, setShouldShowCallout] = useState(false);
+    const reset = () => {
+        setClickedElement(null);
+        setShowMissingElement(false);
+        setShouldShowCallout(false);
+    };
     useEffect(() => {
-        console.log(`🚀 🐥 ~ useClickedElement ~ heatmapInfo?.elementMapInfo:`, heatmapInfo?.elementMapInfo);
         if (!selectedElement || !heatmapInfo?.elementMapInfo) {
-            setClickedElement(null);
-            setShowMissingElement(false);
-            setShouldShowCallout(false);
+            reset();
             return;
         }
         const info = heatmapInfo.elementMapInfo[selectedElement];
@@ -205,38 +476,58 @@ const useClickedElement = ({ heatmapInfo, getRect }) => {
             setClickedElement(null);
             return;
         }
-        const rect = getRect({ hash: selectedElement, selector: info.selector });
-        if (rect && heatmapInfo.sortedElements) {
-            const rank = heatmapInfo.sortedElements.findIndex((e) => e.hash === selectedElement) + 1;
-            setClickedElement({
-                ...rect,
-                hash: selectedElement,
-                clicks: info.totalclicks ?? 0,
-                rank,
-                selector: info.selector ?? '',
-            });
-            setShowMissingElement(false);
-            setShouldShowCallout(true);
-        }
-        else {
-            const rank = (heatmapInfo.sortedElements?.findIndex((e) => e.hash === selectedElement) ?? -1) + 1;
-            setClickedElement({
-                hash: selectedElement,
-                clicks: info.totalclicks ?? 0,
-                rank,
-                selector: info.selector ?? '',
-                left: 0,
-                top: 0,
-                width: 0,
-                height: 0,
-            });
+        const hash = selectedElement;
+        const selector = info.selector;
+        const rect = getRect({ hash: selectedElement, selector });
+        const elementInfo = buildElementInfo(hash, rect, heatmapInfo);
+        if (!rect) {
+            setClickedElement(elementInfo);
             setShowMissingElement(true);
             setShouldShowCallout(false);
+            return;
         }
-    }, [selectedElement, heatmapInfo, getRect]);
+        setShowMissingElement(false);
+        scrollToElementIfNeeded(visualRef, rect, scale);
+        setShouldShowCallout(true);
+        requestAnimationFrame(() => {
+            setClickedElement(elementInfo);
+        });
+    }, [selectedElement, heatmapInfo, getRect, visualRef, scale]);
     return { clickedElement, showMissingElement, shouldShowCallout, setShouldShowCallout };
 };
 
+const useElementCalloutVisible = ({ visualRef, getRect }) => {
+    const scale = useHeatmapVizStore((state) => state.scale);
+    const selectedElement = useHeatmapInteractionStore((state) => state.selectedElement);
+    const heatmapInfo = useHeatmapDataStore((state) => state.dataInfo);
+    const setShouldShowCallout = useHeatmapInteractionStore((state) => state.setShouldShowCallout);
+    useEffect(() => {
+        if (!selectedElement)
+            return;
+        const elementIsInViewportFn = () => {
+            const elementInfo = heatmapInfo?.elementMapInfo?.[selectedElement];
+            if (!elementInfo)
+                return;
+            const rect = getRect({ hash: selectedElement, selector: elementInfo.selector });
+            const isInViewport = isElementInViewport(rect, visualRef, scale);
+            setShouldShowCallout(isInViewport);
+        };
+        elementIsInViewportFn();
+        const handleUpdate = () => {
+            requestAnimationFrame(elementIsInViewportFn);
+        };
+        window.addEventListener('scroll', handleUpdate, true);
+        window.addEventListener('resize', handleUpdate);
+        visualRef?.current?.addEventListener('scroll', handleUpdate);
+        return () => {
+            window.removeEventListener('scroll', handleUpdate, true);
+            window.removeEventListener('resize', handleUpdate);
+            visualRef?.current?.removeEventListener('scroll', handleUpdate);
+        };
+    }, [selectedElement, visualRef, getRect, scale, heatmapInfo, setShouldShowCallout]);
+    return {};
+};
+
 const useHeatmapEffects = ({ isVisible, isElementSidebarOpen, setShouldShowCallout, resetAll, }) => {
     const selectedElement = useHeatmapInteractionStore((state) => state.selectedElement);
     // Reset khi ẩn
@@ -255,34 +546,10 @@ const useHeatmapEffects = ({ isVisible, isElementSidebarOpen, setShouldShowCallo
     }, [isElementSidebarOpen, selectedElement, setShouldShowCallout]);
 };
 
-function getElementLayout(element) {
-    if (!element?.getBoundingClientRect)
-        return null;
-    const rect = element.getBoundingClientRect();
-    if (rect.width === 0 && rect.height === 0)
-        return null;
-    return {
-        top: rect.top,
-        left: rect.left,
-        width: rect.width,
-        height: rect.height,
-    };
-}
-function formatPercentage(value, decimals = 2) {
-    return value.toFixed(decimals);
-}
-function calculateRankPosition(rect, widthScale) {
-    const top = rect.top <= 18 ? rect.top + 3 : rect.top - 18;
-    const left = rect.left <= 18 ? rect.left + 3 : rect.left - 18;
-    return {
-        transform: `scale(${1.2 * widthScale})`,
-        top: Number.isNaN(top) ? undefined : top,
-        left: Number.isNaN(left) ? undefined : left,
-    };
-}
-
-const useHeatmapElementPosition = ({ iframeRef, parentRef, visualizer, heatmapWidth, widthScale, projectId, }) => {
+const useHeatmapElementPosition = ({ iframeRef, wrapperRef, visualizer }) => {
+    const widthScale = useHeatmapVizStore((state) => state.scale);
     const iframeHeight = useHeatmapVizStore((state) => state.iframeHeight);
+    const heatmapWidth = useHeatmapDataStore((state) => state.config?.width);
     return useCallback((element) => {
         const hash = element?.hash;
         if (!iframeRef.current?.contentDocument || !hash || !visualizer)
@@ -292,7 +559,7 @@ const useHeatmapElementPosition = ({ iframeRef, parentRef, visualizer, heatmapWi
             domElement = visualizer.get(hash);
         }
         catch (error) {
-            console.error('Visualizer error:', { projectId, hash, error });
+            console.error('Visualizer error:', { hash, error });
             return null;
         }
         if (!domElement)
@@ -300,7 +567,7 @@ const useHeatmapElementPosition = ({ iframeRef, parentRef, visualizer, heatmapWi
         const layout = getElementLayout(domElement);
         if (!layout)
             return null;
-        const parentEl = parentRef.current;
+        const parentEl = wrapperRef.current;
         if (!parentEl)
             return null;
         const scrollOffset = parentEl.scrollTop / widthScale;
@@ -316,8 +583,9 @@ const useHeatmapElementPosition = ({ iframeRef, parentRef, visualizer, heatmapWi
             top: adjustedTop,
             width: Math.min(layout.width, heatmapWidth || layout.width),
             height: layout.height,
+            outOfBounds,
         };
-    }, [iframeRef, parentRef, visualizer, heatmapWidth, iframeHeight, widthScale, projectId]);
+    }, [iframeRef, wrapperRef, visualizer, heatmapWidth, iframeHeight, widthScale]);
 };
 
 const debounce = (fn, delay) => {
@@ -327,68 +595,63 @@ const debounce = (fn, delay) => {
         timeout = setTimeout(() => fn(...args), delay);
     };
 };
-const useHoveredElement = ({ iframeRef, heatmapInfo, widthScale, getRect }) => {
+
+const useHoveredElement = ({ iframeRef, getRect }) => {
     const hoveredElement = useHeatmapInteractionStore((state) => state.hoveredElement);
     const setHoveredElement = useHeatmapInteractionStore((state) => state.setHoveredElement);
     const onSelect = useHeatmapInteractionStore((state) => state.setSelectedElement);
-    const handleMouseMove = useCallback(debounce((event) => {
-        if (!iframeRef.current?.contentDocument || !heatmapInfo?.elementMapInfo) {
-            setHoveredElement(null);
+    const widthScale = useHeatmapVizStore((state) => state.scale);
+    const heatmapInfo = useHeatmapDataStore((state) => state.dataInfo);
+    const reset = useCallback(() => {
+        setHoveredElement(null);
+    }, [setHoveredElement]);
+    const handleMouseLeave = useCallback(() => {
+        reset();
+    }, [reset]);
+    const getHashFromEvent = useCallback((event) => {
+        if (!heatmapInfo || !isIframeReady(iframeRef, heatmapInfo)) {
+            reset();
             return;
         }
         const iframe = iframeRef.current;
-        const iframeRect = iframe.getBoundingClientRect();
-        let x = event.clientX - iframeRect.left;
-        let y = event.clientY - iframeRect.top;
-        if (widthScale !== 1) {
-            x /= widthScale;
-            y /= widthScale;
-        }
         const doc = iframe.contentDocument;
-        if (!doc) {
-            setHoveredElement(null);
+        const iframeRect = iframe.getBoundingClientRect();
+        const { x, y } = convertViewportToIframeCoords(event.clientX, event.clientY, iframeRect, widthScale);
+        const targetElement = findTargetElement(doc, x, y);
+        if (!targetElement || !isValidElement(targetElement, heatmapInfo)) {
+            reset();
             return;
         }
-        let targetElement = getElementAtPoint(doc, x, y) || null;
-        if (!targetElement) {
-            targetElement = doc.elementFromPoint(x, y);
-        }
-        if (!targetElement) {
-            setHoveredElement(null);
+        const hash = getElementHash(targetElement);
+        if (!!hash)
+            return hash;
+        reset();
+        return;
+    }, [heatmapInfo, iframeRef, getRect, widthScale, reset]);
+    const handleMouseMove = useCallback(debounce((event) => {
+        if (!heatmapInfo) {
+            reset();
             return;
         }
-        const hash = targetElement.getAttribute('data-clarity-hash') ||
-            targetElement.getAttribute('data-clarity-hashalpha') ||
-            targetElement.getAttribute('data-clarity-hashbeta');
-        if (!hash || !heatmapInfo.elementMapInfo[hash]) {
-            setHoveredElement(null);
+        const hash = getHashFromEvent(event);
+        if (!hash) {
+            reset();
             return;
         }
-        const info = heatmapInfo.elementMapInfo[hash];
-        const position = getRect({ hash, selector: info.selector });
-        if (position && heatmapInfo.sortedElements) {
-            const rank = heatmapInfo.sortedElements.findIndex((e) => e.hash === hash) + 1;
-            setHoveredElement({
-                ...position,
-                hash,
-                clicks: info.totalclicks ?? 0,
-                rank,
-                selector: info.selector ?? '',
-            });
-        }
-        else {
-            setHoveredElement(null);
+        const selector = heatmapInfo?.elementMapInfo?.[hash];
+        const rect = getRect({ hash, selector });
+        const elementInfo = buildElementInfo(hash, rect, heatmapInfo);
+        if (!elementInfo) {
+            reset();
+            return;
         }
-    }, 16), // ~60fps
-    [iframeRef, heatmapInfo, getRect]);
-    const handleMouseLeave = useCallback(() => {
-        setHoveredElement(null);
-    }, []);
+        setHoveredElement(elementInfo);
+    }, 16), [heatmapInfo, getRect, reset, getHashFromEvent]);
     const handleClick = useCallback(() => {
-        if (hoveredElement?.hash && onSelect) {
-            onSelect(hoveredElement.hash);
-        }
-    }, [hoveredElement, onSelect]);
+        if (!hoveredElement?.hash)
+            return;
+        onSelect(hoveredElement.hash);
+    }, [hoveredElement?.hash]);
     return {
         hoveredElement,
         handleMouseMove,
@@ -396,17 +659,32 @@ const useHoveredElement = ({ iframeRef, heatmapInfo, widthScale, getRect }) => {
         handleClick,
     };
 };
-const getElementAtPoint = (doc, x, y) => {
-    let el = null;
-    if ('caretPositionFromPoint' in doc) {
-        el = doc.caretPositionFromPoint(x, y)?.offsetNode ?? null;
+const convertViewportToIframeCoords = (clientX, clientY, iframeRect, scale) => {
+    let x = clientX - iframeRect.left;
+    let y = clientY - iframeRect.top;
+    if (scale !== 1) {
+        x /= scale;
+        y /= scale;
     }
-    el = el ?? doc.elementFromPoint(x, y);
-    let element = el;
-    while (element && element.nodeType === Node.TEXT_NODE) {
-        element = element.parentElement;
+    return { x, y };
+};
+const findTargetElement = (doc, x, y) => {
+    let targetElement = getElementAtPoint(doc, x, y);
+    if (!targetElement) {
+        targetElement = doc.elementFromPoint(x, y);
     }
-    return element;
+    return targetElement;
+};
+const isIframeReady = (iframeRef, heatmapInfo) => {
+    return !!(iframeRef.current?.contentDocument && heatmapInfo?.elementMapInfo);
+};
+const isValidElement = (element, heatmapInfo) => {
+    if (!element)
+        return false;
+    const hash = getElementHash(element);
+    if (!hash)
+        return false;
+    return !!heatmapInfo?.elementMapInfo?.[hash];
 };
 
 const useHeatmapRender = () => {
@@ -422,6 +700,15 @@ const useHeatmapRender = () => {
         if (!iframe?.contentWindow)
             return;
         await visualizer.html(payloads, iframe.contentWindow);
+        // iframe.contentDocument?.body.querySelectorAll('body>*').forEach((element) => {
+        //   console.log(`🚀 🐥 ~ useHeatmapRender ~ element:`, element);
+        //   const isClosedEcomsendWidget = element.closest('#ecomsend-widget');
+        //   const isEcomsendWidget = element.querySelector('#ecomsend-widget');
+        //   const isRemove = !(isClosedEcomsendWidget || isEcomsendWidget);
+        //   if (isRemove) {
+        //     element.remove();
+        //   }
+        // });
         setVizRef(visualizer);
     }, []);
     useEffect(() => {
@@ -608,15 +895,16 @@ const useContainerDimensions = (props) => {
 };
 
 const useContentDimensions = (props) => {
-    const { iframeRef, config } = props;
+    const contentWidth = useHeatmapDataStore((state) => state.config?.width ?? 0);
+    const { iframeRef } = props;
     useEffect(() => {
-        if (!config?.width)
+        if (!contentWidth)
             return;
         if (!iframeRef.current)
             return;
-        iframeRef.current.width = `${config.width}px`;
-    }, [config?.width, iframeRef]);
-    return { contentWidth: config?.width ?? 0 };
+        iframeRef.current.width = `${contentWidth}px`;
+    }, [contentWidth, iframeRef]);
+    return { contentWidth };
 };
 
 // Hook 3: Iframe Height Observer
@@ -725,52 +1013,51 @@ const useScaleCalculation = (props) => {
     return { scale };
 };
 
-const useScrollSync = (props) => {
-    const { iframeRef, scale } = props;
+const useScrollSync = ({ iframeRef }) => {
+    const widthScale = useHeatmapVizStore((state) => state.scale);
     const handleScroll = useCallback((scrollTop) => {
         const iframe = iframeRef.current;
-        if (!iframe || scale <= 0)
+        if (!iframe || widthScale <= 0)
             return;
         try {
             const iframeWindow = iframe.contentWindow;
             const iframeDocument = iframe.contentDocument;
             if (iframeWindow && iframeDocument) {
-                const iframeScrollTop = scrollTop / scale;
+                const iframeScrollTop = scrollTop / widthScale;
                 iframe.style.top = `${iframeScrollTop}px`;
+                // iframeWindow.scrollTo({ top: iframeScrollTop, behavior: 'smooth' });
             }
         }
         catch (error) {
             console.warn('Cannot sync scroll to iframe:', error);
         }
-    }, [iframeRef, scale]);
+    }, [iframeRef, widthScale]);
     return { handleScroll };
 };
 
 const useHeatmapScale = (props) => {
-    const { wrapperRef, iframeRef, config } = props;
+    const { wrapperRef, iframeRef, visualRef } = props;
     // 1. Observe container dimensions
     const { containerWidth, containerHeight } = useContainerDimensions({ wrapperRef });
     // 2. Get content dimensions from config
-    const { contentWidth } = useContentDimensions({ iframeRef, config });
+    const { contentWidth } = useContentDimensions({ iframeRef });
     // 3. Observe iframe height (now reacts to width changes)
     const { iframeHeight } = useIframeHeight({ iframeRef, contentWidth });
     // 4. Calculate scale
     const { scale } = useScaleCalculation({ containerWidth, contentWidth });
     // 5. Setup scroll sync
-    const { handleScroll } = useScrollSync({ iframeRef, scale });
+    const { handleScroll } = useScrollSync({ iframeRef });
     return {
         containerWidth,
         containerHeight,
-        contentWidth,
         iframeHeight,
-        scale,
         scaledWidth: contentWidth * scale,
         scaledHeight: iframeHeight * scale,
         handleScroll,
     };
 };
 
-const BoxStack = ({ children, ...props }) => {
+const BoxStack = forwardRef(({ children, ...props }, ref) => {
     const id = props.id;
     const flexDirection = props.flexDirection;
     const overflow = props.overflow || 'hidden';
@@ -781,6 +1068,8 @@ const BoxStack = ({ children, ...props }) => {
     const style = props.style || {};
     const gap = props.gap || 0;
     const height = props.height || 'auto';
+    const zIndex = props.zIndex || 0;
+    const backgroundColor = props.backgroundColor || 'transparent';
     const styleGap = useMemo(() => {
         switch (flexDirection) {
             case 'row':
@@ -802,15 +1091,17 @@ const BoxStack = ({ children, ...props }) => {
         justifyContent,
         alignItems,
         height,
+        zIndex,
+        backgroundColor,
         ...styleGap,
         ...style,
     };
-    return (jsx("div", { id: id, style: styleProps, children: children }));
-};
+    return (jsx("div", { id: id, style: styleProps, ref: ref, children: children }));
+});
 
 const ContentTopBar = () => {
     const controls = useHeatmapControlStore((state) => state.controls);
-    return (jsx(BoxStack, { id: "gx-hm-content-header", flexDirection: "row", alignItems: "center", overflow: "auto", style: {
+    return (jsx(BoxStack, { id: "gx-hm-content-header", flexDirection: "row", alignItems: "center", overflow: "auto", zIndex: 1, backgroundColor: "white", style: {
             borderBottom: `${HEATMAP_CONFIG.borderWidth}px solid ${HEATMAP_CONFIG.borderColor}`,
         }, children: controls.TopBar ?? null }));
 };
@@ -848,277 +1139,82 @@ const useHeatmapVizCanvas = ({ type }) => {
     return heatmapRender?.();
 };
 
-const CLICKED_ELEMENT_ID = 'clickedElement';
-const SECONDARY_CLICKED_ELEMENT_ID = 'secondaryClickedElementID';
-const HOVERED_ELEMENT_ID = 'hoveredElement';
-const SECONDARY_HOVERED_ELEMENT_ID = 'secondaryhoveredElementID';
+const CLICKED_ELEMENT_ID = 'gx-hm-clicked-element';
+const SECONDARY_CLICKED_ELEMENT_ID = 'gx-hm-secondary-clicked-element';
+const HOVERED_ELEMENT_ID = 'gx-hm-hovered-element';
+const SECONDARY_HOVERED_ELEMENT_ID = 'gx-hm-secondary-hovered-element';
+
+const RankBadge = ({ index, elementRect, widthScale, clickOnElement, }) => {
+    const style = calculateRankPosition(elementRect, widthScale);
+    return (jsx("div", { className: "gx-hm-rank-badge", style: style, onClick: clickOnElement, children: index }));
+};
+
+const NUMBER_OF_TOP_ELEMENTS = 10;
+const DefaultRankBadges = ({ getRect, hidden }) => {
+    const heatmapInfo = useHeatmapDataStore((state) => state.dataInfo);
+    const widthScale = useHeatmapVizStore((state) => state.scale);
+    const elements = heatmapInfo?.sortedElements?.slice(0, NUMBER_OF_TOP_ELEMENTS) ?? [];
+    if (hidden || elements.length === 0)
+        return null;
+    return (jsx(Fragment, { children: elements.map((element, index) => {
+            const rect = getRect(element);
+            if (!rect)
+                return null;
+            return (jsx(RankBadge, { index: index + 1, elementRect: rect, widthScale: widthScale }, element.hash));
+        }) }));
+};
 
-const ElementCallout = ({ element, target, totalClicks, isSecondary, isRecordingView, isCompareMode, deviceType, heatmapType, language, widthScale, parentRef, }) => {
+const DEFAULT_POSITION = {
+    top: 0,
+    left: 0,
+    placement: 'top',
+    horizontalAlign: 'center',
+};
+const ElementCallout = (props) => {
+    const CompElementCallout = useHeatmapControlStore((state) => state.controls.ElementCallout);
+    const { element, target, visualRef, hozOffset, alignment = 'left' } = props;
     const calloutRef = useRef(null);
-    const [position, setPosition] = useState({
-        top: 0,
-        left: 0,
-        placement: 'top',
-    });
-    const percentage = formatPercentage(((element.clicks ?? 0) / totalClicks) * 100, 2);
+    const [position, setPosition] = useState(DEFAULT_POSITION);
     useEffect(() => {
-        const targetElement = document.querySelector(target);
-        const calloutElement = calloutRef.current;
-        if (!targetElement || !calloutElement)
+        const targetElm = document.querySelector(target);
+        const calloutElm = calloutRef.current;
+        if (!targetElm || !calloutElm)
             return;
-        const calculatePosition = () => {
-            const targetRect = targetElement.getBoundingClientRect();
-            const calloutRect = calloutElement.getBoundingClientRect();
-            const viewportWidth = window.innerWidth;
-            const viewportHeight = window.innerHeight;
-            const padding = 12; // Space between target and callout
-            const arrowSize = 8;
-            let top = 0;
-            let left = 0;
-            let placement = 'top';
-            const positions = [
-                {
-                    placement: 'top',
-                    top: targetRect.top - calloutRect.height - padding - arrowSize,
-                    left: targetRect.left + targetRect.width / 2 - calloutRect.width / 2,
-                    valid: targetRect.top - calloutRect.height - padding - arrowSize > 0,
-                },
-                {
-                    placement: 'bottom',
-                    top: targetRect.bottom + padding + arrowSize,
-                    left: targetRect.left + targetRect.width / 2 - calloutRect.width / 2,
-                    valid: targetRect.bottom + calloutRect.height + padding + arrowSize < viewportHeight,
-                },
-                {
-                    placement: 'right',
-                    top: targetRect.top + targetRect.height / 2 - calloutRect.height / 2,
-                    left: targetRect.right + padding + arrowSize,
-                    valid: targetRect.right + calloutRect.width + padding + arrowSize < viewportWidth,
-                },
-                {
-                    placement: 'left',
-                    top: targetRect.top + targetRect.height / 2 - calloutRect.height / 2,
-                    left: targetRect.left - calloutRect.width - padding - arrowSize,
-                    valid: targetRect.left - calloutRect.width - padding - arrowSize > 0,
-                },
-            ];
-            // Find first valid position
-            const validPosition = positions.find((p) => p.valid) || positions[0];
-            top = validPosition.top;
-            left = validPosition.left;
-            placement = validPosition.placement;
-            // Keep within viewport bounds
-            left = Math.max(padding, Math.min(left, viewportWidth - calloutRect.width - padding));
-            top = Math.max(padding, Math.min(top, viewportHeight - calloutRect.height - padding));
-            setPosition({ top, left, placement });
-        };
-        calculatePosition();
+        const positionFn = calcCalloutPosition({
+            targetElm,
+            calloutElm,
+            setPosition,
+            hozOffset,
+            alignment,
+        });
+        positionFn();
         const handleUpdate = () => {
-            requestAnimationFrame(calculatePosition);
+            requestAnimationFrame(positionFn);
         };
         window.addEventListener('scroll', handleUpdate, true);
         window.addEventListener('resize', handleUpdate);
-        parentRef?.current?.addEventListener('scroll', handleUpdate);
+        visualRef?.current?.addEventListener('scroll', handleUpdate);
         return () => {
             window.removeEventListener('scroll', handleUpdate, true);
             window.removeEventListener('resize', handleUpdate);
-            parentRef?.current?.removeEventListener('scroll', handleUpdate);
+            visualRef?.current?.removeEventListener('scroll', handleUpdate);
         };
-    }, [target, parentRef]);
-    const calloutContent = (jsxs("div", { ref: calloutRef, className: `clarity-callout clarity-callout--${position.placement} ${isSecondary ? 'clarity-callout--secondary' : ''}`, style: {
+    }, [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,
             left: position.left,
             zIndex: 2147483647,
-        }, "aria-live": "assertive", role: "tooltip", children: [jsx("div", { className: "clarity-callout__arrow" }), jsx("div", { className: "clarity-callout__content", children: jsxs("div", { className: "clarity-callout__stats", children: [jsx("div", { className: "clarity-callout__label", children: "Clicks" }), jsxs("div", { className: "clarity-callout__value", children: [jsx("span", { className: "clarity-callout__count", children: element.clicks?.toLocaleString(language) }), jsxs("span", { className: "clarity-callout__percentage", children: ["(", percentage, "%)"] })] })] }) }), jsx("style", { children: `
-        .clarity-callout {
-          background: white;
-          border-radius: 8px;
-          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-          padding: 16px;
-          min-width: 200px;
-          max-width: 280px;
-          animation: clarity-callout-fade-in 0.2s ease-out;
-          pointer-events: auto;
-        }
-
-        @keyframes clarity-callout-fade-in {
-          from {
-            opacity: 0;
-            transform: scale(0.95);
-          }
-          to {
-            opacity: 1;
-            transform: scale(1);
-          }
-        }
-
-        .clarity-callout__arrow {
-          position: absolute;
-          width: 16px;
-          height: 16px;
-          background: white;
-          transform: rotate(45deg);
-        }
-
-        /* Arrow positions */
-        .clarity-callout--top .clarity-callout__arrow {
-          bottom: -8px;
-          left: 50%;
-          margin-left: -8px;
-          box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
-        }
-
-        .clarity-callout--bottom .clarity-callout__arrow {
-          top: -8px;
-          left: 50%;
-          margin-left: -8px;
-          box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.1);
-        }
-
-        .clarity-callout--left .clarity-callout__arrow {
-          right: -8px;
-          top: 50%;
-          margin-top: -8px;
-          box-shadow: 2px -2px 4px rgba(0, 0, 0, 0.1);
-        }
-
-        .clarity-callout--right .clarity-callout__arrow {
-          left: -8px;
-          top: 50%;
-          margin-top: -8px;
-          box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.1);
-        }
-
-        .clarity-callout__content {
-          position: relative;
-          z-index: 1;
-        }
-
-        .clarity-callout__rank {
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          width: 32px;
-          height: 32px;
-          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-          color: white;
-          border-radius: 8px;
-          font-weight: 600;
-          font-size: 16px;
-          margin-bottom: 12px;
-        }
-
-        .clarity-callout--secondary .clarity-callout__rank {
-          background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-        }
-
-        .clarity-callout__stats {
-          margin-bottom: 12px;
-        }
-
-        .clarity-callout__label {
-          font-size: 12px;
-          color: #6b7280;
-          margin-bottom: 4px;
-          font-weight: 500;
-        }
-
-        .clarity-callout__value {
-          display: flex;
-          align-items: baseline;
-          gap: 6px;
-        }
-
-        .clarity-callout__count {
-          font-size: 20px;
-          font-weight: 700;
-          color: #111827;
-        }
-
-        .clarity-callout__percentage {
-          font-size: 14px;
-          color: #6b7280;
-          font-weight: 500;
-        }
-
-        .clarity-callout__button {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          gap: 6px;
-          width: 100%;
-          padding: 8px 12px;
-          background: #667eea;
-          color: white;
-          border: none;
-          border-radius: 6px;
-          font-size: 13px;
-          font-weight: 600;
-          cursor: pointer;
-          transition: all 0.2s;
-        }
-
-        .clarity-callout__button:hover {
-          background: #5568d3;
-          transform: translateY(-1px);
-          box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
-        }
-
-        .clarity-callout__button:active {
-          transform: translateY(0);
-        }
-
-        .clarity-callout__button svg {
-          width: 14px;
-          height: 14px;
-        }
-      ` })] }));
-    return createPortal(calloutContent, document.body);
-};
-
-const RankBadge = ({ index, elementRect, widthScale, clickOnElement, }) => {
-    const style = calculateRankPosition(elementRect, widthScale);
-    return (jsx("div", { className: "rankBadge", style: style, onClick: clickOnElement, "data-testid": "elementRank", children: index }));
+        }, "aria-live": "assertive", role: "tooltip", children: CompElementCallout && jsx(CompElementCallout, { elementHash: element.hash }) }));
+    return createPortal(calloutContent, document.getElementById('gx-hm-viz-container'));
 };
 
-const ClickedElementOverlay = ({ element, shouldShowCallout, isSecondary, targetId, totalClicks = 1, isRecordingView, isCompareMode, deviceType, heatmapType, widthScale, }) => {
-    if (!element || (element.width === 0 && element.height === 0))
-        return null;
-    return (jsxs(Fragment$1, { children: [jsx("div", { className: "heatmapElement", id: targetId, style: {
-                    top: element.top,
-                    left: element.left,
-                    width: element.width,
-                    height: element.height,
-                } }), jsx(RankBadge, { index: element.rank, elementRect: element, widthScale: widthScale }), shouldShowCallout && (jsx(ElementCallout, { element: element, target: `#${targetId}`, totalClicks: totalClicks, isSecondary: isSecondary, isRecordingView: isRecordingView, isCompareMode: isCompareMode, deviceType: deviceType, heatmapType: heatmapType, widthScale: widthScale }))] }));
-};
-
-const DefaultRankBadges = ({ elements, getRect, widthScale, hidden }) => {
-    if (hidden || elements.length === 0)
+const ElementMissing = ({ show = true }) => {
+    if (!show)
         return null;
-    return (jsx(Fragment, { children: elements.map((element, index) => {
-            const rect = getRect(element);
-            if (!rect)
-                return null;
-            return (jsx(RankBadge, { index: index + 1, elementRect: rect, widthScale: widthScale }, element.hash));
-        }) }));
-};
-
-const HoveredElementOverlay = ({ element, onClick, isSecondary, targetId, totalClicks = 1, }) => {
-    if (!element)
-        return null;
-    return (jsxs(Fragment$1, { children: [jsx("div", { onClick: onClick, className: "heatmapElement hovered", id: targetId, style: {
-                    top: element.top,
-                    left: element.left,
-                    width: element.width,
-                    height: element.height,
-                    cursor: 'pointer',
-                } }), jsx(RankBadge, { index: element.rank, elementRect: element, widthScale: 1, clickOnElement: onClick })] }));
-};
-
-const MissingElementMessage = ({ widthScale }) => {
+    const widthScale = useHeatmapVizStore((state) => state.scale);
     return (jsx("div", { className: "missingElement", style: {
-            position: 'absolute',
+            position: 'fixed',
             top: '50%',
             left: '50%',
             transform: `translate(-50%, -50%) scale(${1 / widthScale})`,
@@ -1134,27 +1230,58 @@ const MissingElementMessage = ({ widthScale }) => {
         }, "aria-live": "assertive", children: "Element not visible on current screen" }));
 };
 
+const TARGET_ID_BY_TYPE = {
+    hovered: {
+        default: HOVERED_ELEMENT_ID,
+        secondary: SECONDARY_HOVERED_ELEMENT_ID,
+    },
+    clicked: {
+        default: CLICKED_ELEMENT_ID,
+        secondary: SECONDARY_CLICKED_ELEMENT_ID,
+    },
+};
+const ElementOverlay = ({ type, element, onClick, isSecondary }) => {
+    const widthScale = useHeatmapVizStore((state) => state.scale);
+    if (!element || (element.width === 0 && element.height === 0))
+        return null;
+    // Iframe has border, so we need to add it to the top position
+    const top = element.top + HEATMAP_CONFIG['borderWidthIframe'];
+    const left = element.left + HEATMAP_CONFIG['borderWidthIframe'];
+    const width = element.width;
+    const height = element.height;
+    const targetId = TARGET_ID_BY_TYPE[type][isSecondary ? 'secondary' : 'default'];
+    return (jsxs(Fragment$1, { children: [jsx("div", { onClick: onClick, className: "heatmapElement", id: targetId, style: {
+                    top,
+                    left,
+                    width,
+                    height,
+                    cursor: 'pointer',
+                } }), jsx(RankBadge, { index: element.rank, elementRect: element, widthScale: type === 'hovered' ? 1 : widthScale, clickOnElement: onClick })] }));
+};
+
+const ELEMENT_CALLOUT = {
+    hozOffset: -8,
+    alignment: 'left',
+};
 const HeatmapElements = (props) => {
     const height = useHeatmapVizStore((state) => state.iframeHeight);
-    const { heatmapInfo, iframeRef, parentRef, visualizer, widthScale, iframeDimensions, isElementSidebarOpen, isVisible = true, areDefaultRanksHidden, isSecondary, ...rest } = props;
+    const { iframeRef, wrapperRef, visualRef, visualizer, iframeDimensions, isElementSidebarOpen, isVisible = true, areDefaultRanksHidden, isSecondary, ...rest } = props;
     const getRect = useHeatmapElementPosition({
         iframeRef,
-        parentRef,
+        wrapperRef,
         visualizer,
-        heatmapWidth: heatmapInfo?.width,
-        widthScale,
-        projectId: props.projectId,
     });
     const { clickedElement, showMissingElement, shouldShowCallout, setShouldShowCallout } = useClickedElement({
-        heatmapInfo,
+        visualRef,
         getRect,
     });
-    console.log(`🚀 🐥 ~ HeatmapElements ~ clickedElement:`, clickedElement);
     const { hoveredElement, handleMouseMove, handleMouseLeave, handleClick } = useHoveredElement({
         iframeRef,
-        heatmapInfo,
         getRect,
-        widthScale,
+    });
+    useElementCalloutVisible({
+        visualRef,
+        getRect,
     });
     const resetAll = () => {
         // setShouldShowCallout(false);
@@ -1167,12 +1294,12 @@ const HeatmapElements = (props) => {
     });
     if (!isVisible)
         return null;
-    const top10 = heatmapInfo?.sortedElements?.slice(0, 10) ?? [];
-    return (jsxs("div", { onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, className: "heatmapElements gx-hm-elements", style: { ...iframeDimensions, height }, children: [jsx(DefaultRankBadges, { elements: top10, getRect: getRect, widthScale: widthScale, hidden: areDefaultRanksHidden }), jsx(ClickedElementOverlay, { widthScale: widthScale, element: clickedElement, shouldShowCallout: shouldShowCallout, isSecondary: isSecondary, targetId: isSecondary ? SECONDARY_CLICKED_ELEMENT_ID : CLICKED_ELEMENT_ID, ...rest }), showMissingElement && jsx(MissingElementMessage, { widthScale: widthScale }), jsx(HoveredElementOverlay, { element: hoveredElement, onClick: handleClick, isSecondary: isSecondary, targetId: isSecondary ? SECONDARY_HOVERED_ELEMENT_ID : HOVERED_ELEMENT_ID, totalClicks: heatmapInfo?.totalClicks ?? 1 }), hoveredElement?.hash !== clickedElement?.hash && hoveredElement && (jsx(ElementCallout, { element: hoveredElement, target: `#${props.isSecondary ? SECONDARY_HOVERED_ELEMENT_ID : HOVERED_ELEMENT_ID}`, totalClicks: props.heatmapInfo?.totalClicks ?? 1, isSecondary: props.isSecondary, parentRef: props.parentRef }))] }));
+    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 }))] }));
 };
 
-const VizElements = ({ width, iframeRef, wrapperRef, widthScale, }) => {
+const VizElements = ({ iframeRef, visualRef, wrapperRef }) => {
     const heatmapInfo = useHeatmapDataStore((state) => state.dataInfo);
+    const contentWidth = useHeatmapDataStore((state) => state.config?.width ?? 0);
     const visualizer = {
         get: (hash) => {
             const doc = iframeRef.current?.contentDocument;
@@ -1191,8 +1318,8 @@ const VizElements = ({ width, iframeRef, wrapperRef, widthScale, }) => {
     };
     if (!iframeRef.current)
         return null;
-    return (jsx(HeatmapElements, { visualizer: visualizer, iframeRef: iframeRef, parentRef: wrapperRef, widthScale: widthScale, heatmapInfo: heatmapInfo, isVisible: true, iframeDimensions: {
-            width,
+    return (jsx(HeatmapElements, { visualizer: visualizer, visualRef: visualRef, iframeRef: iframeRef, wrapperRef: wrapperRef, heatmapInfo: heatmapInfo, isVisible: true, iframeDimensions: {
+            width: contentWidth,
             position: 'absolute',
             top: 0,
             left: 0,
@@ -1232,14 +1359,20 @@ const ReplayControls = () => {
 const VizDomRenderer = ({ mode = 'heatmap' }) => {
     const config = useHeatmapDataStore((state) => state.config);
     const setIframeHeight = useHeatmapVizStore((state) => state.setIframeHeight);
+    const widthScale = useHeatmapVizStore((state) => state.scale);
+    const setSelectedElement = useHeatmapInteractionStore((state) => state.setSelectedElement);
     const wrapperRef = useRef(null);
     const visualRef = useRef(null);
     const { iframeRef } = useHeatmapVizRender(mode);
-    const { contentWidth, iframeHeight, scale, scaledHeight, handleScroll } = useHeatmapScale({
+    const { iframeHeight, scaledHeight, handleScroll } = useHeatmapScale({
         wrapperRef,
         iframeRef,
-        config,
+        visualRef,
     });
+    const contentWidth = config?.width ?? 0;
+    const contentHeight = scaledHeight > 0
+        ? `${scaledHeight + HEATMAP_CONFIG['heightToolbar'] + HEATMAP_CONFIG['padding'] * 2}px`
+        : 'auto';
     const onScroll = (e) => {
         const scrollTop = e.currentTarget.scrollTop;
         handleScroll(scrollTop);
@@ -1247,6 +1380,7 @@ const VizDomRenderer = ({ mode = 'heatmap' }) => {
     useHeatmapVizCanvas({ type: config?.heatmapType });
     const cleanUp = () => {
         setIframeHeight(0);
+        setSelectedElement(null);
     };
     useEffect(() => {
         return cleanUp;
@@ -1264,17 +1398,17 @@ const VizDomRenderer = ({ mode = 'heatmap' }) => {
                     display: 'flex',
                     justifyContent: 'center',
                     alignItems: 'flex-start',
-                    height: scaledHeight > 0 ? `${scaledHeight + HEATMAP_CONFIG['padding'] * 2}px` : 'auto',
+                    height: contentHeight,
                     padding: HEATMAP_STYLE['wrapper']['padding'],
                     paddingBottom: HEATMAP_STYLE['viz']['paddingBottom'],
                     background: HEATMAP_STYLE['viz']['background'],
                 }, children: jsxs("div", { className: "gx-hm-wrapper", ref: wrapperRef, style: {
                         width: contentWidth,
                         height: iframeHeight,
-                        transform: `scale(${scale})`,
+                        transform: `scale(${widthScale})`,
                         transformOrigin: 'top center',
                         paddingBlockEnd: '0',
-                    }, children: [jsx(VizElements, { width: contentWidth, widthScale: scale, iframeRef: iframeRef, wrapperRef: wrapperRef }), jsx("iframe", { ref: iframeRef, ...HEATMAP_IFRAME, width: contentWidth, height: iframeHeight, scrolling: "no" })] }) }), mode === 'replay' && jsx(ReplayControls, {})] }));
+                    }, children: [jsx(VizElements, { iframeRef: iframeRef, visualRef: visualRef, wrapperRef: wrapperRef }), jsx("iframe", { ref: iframeRef, ...HEATMAP_IFRAME, width: contentWidth, height: iframeHeight, scrolling: "no" })] }) }), mode === 'replay' && jsx(ReplayControls, {})] }));
 };
 
 const VizDomContainer = () => {
@@ -1289,14 +1423,21 @@ const VizDomContainer = () => {
 
 const ContentMetricBar = () => {
     const controls = useHeatmapControlStore((state) => state.controls);
-    return (jsx(BoxStack, { id: "gx-hm-content-header", flexDirection: "row", alignItems: "center", overflow: "auto", style: {
+    return (jsx(BoxStack, { id: "gx-hm-content-metric-bar", flexDirection: "row", alignItems: "center", overflow: "auto", zIndex: 1, backgroundColor: "white", style: {
             borderBottom: `${HEATMAP_CONFIG.borderWidth}px solid ${HEATMAP_CONFIG.borderColor}`,
         }, children: controls.MetricBar ?? null }));
 };
 
 const ContentToolbar = () => {
     const controls = useHeatmapControlStore((state) => state.controls);
-    return (jsx("div", { id: "gx-hm-content-toolbar", style: { position: 'absolute', bottom: 0, left: '8px', right: '24px', padding: '8px' }, children: controls.Toolbar ?? null }));
+    return (jsx("div", { id: "gx-hm-content-toolbar", style: {
+            position: 'absolute',
+            bottom: 0,
+            left: '8px',
+            right: '24px',
+            padding: '8px',
+            paddingBlock: '16px',
+        }, children: controls.Toolbar ?? null }));
 };
 
 const LeftSidebar = () => {
@@ -1344,6 +1485,7 @@ const HeatmapLayout = ({ data, clickmap, controls, dataInfo, }) => {
     function getVariableStyle() {
         return {
             '--gx-hm-border-width': `${HEATMAP_CONFIG.borderWidth}px`,
+            '--gx-hm-border-width-iframe': `${HEATMAP_CONFIG.borderWidthIframe}px`,
             '--gx-hm-border-color': `${HEATMAP_CONFIG.borderColor}`,
         };
     }