@gemx-dev/heatmap-react 3.5.32 → 3.5.34

package/dist/esm/index.js

@@ -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: {
@@ -187,17 +189,77 @@ const useRegisterHeatmap = (clickmap) => {
     }, [clickmap]);
 };
 
-const useClickedElement = ({ heatmapInfo, getRect }) => {
+const isElementInViewport = (elementRect, visualRef, scale) => {
+    const visualRect = visualRef.current?.getBoundingClientRect();
+    if (!visualRect)
+        return false;
+    // Absolute position of element so visual container (not scaled)
+    const elementTopRaw = elementRect.top - visualRect.top;
+    const elementBottomRaw = elementTopRaw + elementRect.height;
+    // Apply scale because wrapper is scaled
+    const elementTop = elementTopRaw * scale;
+    const elementBottom = elementBottomRaw * scale;
+    const scrollTop = visualRef.current?.scrollTop || 0;
+    const viewportHeight = visualRect.height;
+    const viewportTop = scrollTop;
+    const viewportBottom = scrollTop + viewportHeight;
+    return elementTop >= viewportTop && elementBottom <= viewportBottom;
+};
+const calculateElementRank = (selectedElement, sortedElements) => {
+    if (!sortedElements)
+        return 0;
+    return sortedElements.findIndex((e) => e.hash === selectedElement) + 1;
+};
+const buildElementInfo = (selectedElement, info, rect, rank) => {
+    const baseInfo = {
+        hash: selectedElement,
+        clicks: info.totalclicks ?? 0,
+        rank,
+        selector: info.selector ?? '',
+    };
+    if (rect) {
+        return { ...baseInfo, ...rect };
+    }
+    return {
+        ...baseInfo,
+        left: 0,
+        top: 0,
+        width: 0,
+        height: 0,
+    };
+};
+const scrollToElementIfNeeded = (visualRef, wrapperRef, rect, scale) => {
+    if (!visualRef.current || !wrapperRef.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, wrapperRef, getRect }) => {
+    const heatmapInfo = useHeatmapDataStore((state) => state.dataInfo);
     const selectedElement = useHeatmapInteractionStore((state) => state.selectedElement);
+    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];
@@ -206,34 +268,22 @@ const useClickedElement = ({ heatmapInfo, getRect }) => {
             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 ?? '',
-            });
+        const rank = calculateElementRank(selectedElement, heatmapInfo.sortedElements);
+        const elementInfo = buildElementInfo(selectedElement, info, rect, rank);
+        if (rect) {
             setShowMissingElement(false);
+            scrollToElementIfNeeded(visualRef, wrapperRef, rect, scale);
             setShouldShowCallout(true);
+            requestAnimationFrame(() => {
+                setClickedElement(elementInfo);
+            });
         }
         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,
-            });
+            setClickedElement(elementInfo);
             setShowMissingElement(true);
             setShouldShowCallout(false);
         }
-    }, [selectedElement, heatmapInfo, getRect]);
+    }, [selectedElement, heatmapInfo, getRect, visualRef, wrapperRef, scale]);
     return { clickedElement, showMissingElement, shouldShowCallout, setShouldShowCallout };
 };
 
@@ -281,8 +331,10 @@ function calculateRankPosition(rect, widthScale) {
     };
 }
 
-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 +344,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 +352,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 +368,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,10 +380,12 @@ 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 widthScale = useHeatmapVizStore((state) => state.scale);
+    const heatmapInfo = useHeatmapDataStore((state) => state.dataInfo);
     const handleMouseMove = useCallback(debounce((event) => {
         if (!iframeRef.current?.contentDocument || !heatmapInfo?.elementMapInfo) {
             setHoveredElement(null);
@@ -422,6 +477,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 +672,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,45 +790,44 @@ 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,
@@ -853,13 +917,16 @@ const SECONDARY_CLICKED_ELEMENT_ID = 'secondaryClickedElementID';
 const HOVERED_ELEMENT_ID = 'hoveredElement';
 const SECONDARY_HOVERED_ELEMENT_ID = 'secondaryhoveredElementID';
 
-const ElementCallout = ({ element, target, totalClicks, isSecondary, isRecordingView, isCompareMode, deviceType, heatmapType, language, widthScale, parentRef, }) => {
+const ElementCallout = (props) => {
+    const { element, target, isSecondary, language, wrapperRef } = props;
+    const heatmapInfo = useHeatmapDataStore((state) => state.dataInfo);
     const calloutRef = useRef(null);
     const [position, setPosition] = useState({
         top: 0,
         left: 0,
         placement: 'top',
     });
+    const totalClicks = heatmapInfo?.totalClicks ?? 1;
     const percentage = formatPercentage(((element.clicks ?? 0) / totalClicks) * 100, 2);
     useEffect(() => {
         const targetElement = document.querySelector(target);
@@ -918,163 +985,20 @@ const ElementCallout = ({ element, target, totalClicks, isSecondary, isRecording
         };
         window.addEventListener('scroll', handleUpdate, true);
         window.addEventListener('resize', handleUpdate);
-        parentRef?.current?.addEventListener('scroll', handleUpdate);
+        wrapperRef?.current?.addEventListener('scroll', handleUpdate);
         return () => {
             window.removeEventListener('scroll', handleUpdate, true);
             window.removeEventListener('resize', handleUpdate);
-            parentRef?.current?.removeEventListener('scroll', handleUpdate);
+            wrapperRef?.current?.removeEventListener('scroll', handleUpdate);
         };
-    }, [target, parentRef]);
+    }, [target, wrapperRef]);
     const calloutContent = (jsxs("div", { ref: calloutRef, className: `clarity-callout clarity-callout--${position.placement} ${isSecondary ? 'clarity-callout--secondary' : ''}`, 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);
+        }, "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, "%)"] })] })] }) })] }));
+    return createPortal(calloutContent, document.getElementById('gx-hm-viz-container'));
 };
 
 const RankBadge = ({ index, elementRect, widthScale, clickOnElement, }) => {
@@ -1082,7 +1006,8 @@ const RankBadge = ({ index, elementRect, widthScale, clickOnElement, }) => {
     return (jsx("div", { className: "rankBadge", style: style, onClick: clickOnElement, "data-testid": "elementRank", children: index }));
 };
 
-const ClickedElementOverlay = ({ element, shouldShowCallout, isSecondary, targetId, totalClicks = 1, isRecordingView, isCompareMode, deviceType, heatmapType, widthScale, }) => {
+const ClickedElementOverlay = ({ element, shouldShowCallout, isSecondary, targetId, }) => {
+    const widthScale = useHeatmapVizStore((state) => state.scale);
     if (!element || (element.width === 0 && element.height === 0))
         return null;
     return (jsxs(Fragment$1, { children: [jsx("div", { className: "heatmapElement", id: targetId, style: {
@@ -1090,10 +1015,14 @@ const ClickedElementOverlay = ({ element, shouldShowCallout, isSecondary, target
                     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 }))] }));
+                } }), jsx(RankBadge, { index: element.rank, elementRect: element, widthScale: widthScale }), shouldShowCallout && (jsx(ElementCallout, { element: element, target: `#${targetId}`, isSecondary: isSecondary }))] }));
 };
 
-const DefaultRankBadges = ({ elements, getRect, widthScale, hidden }) => {
+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) => {
@@ -1104,19 +1033,25 @@ const DefaultRankBadges = ({ elements, getRect, widthScale, hidden }) => {
         }) }));
 };
 
-const HoveredElementOverlay = ({ element, onClick, isSecondary, targetId, totalClicks = 1, }) => {
+const HoveredElementOverlay = ({ element, onClick, isSecondary, targetId, }) => {
     if (!element)
         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;
     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,
+                    top,
+                    left,
+                    width,
+                    height,
                     cursor: 'pointer',
                 } }), jsx(RankBadge, { index: element.rank, elementRect: element, widthScale: 1, clickOnElement: onClick })] }));
 };
 
-const MissingElementMessage = ({ widthScale }) => {
+const MissingElementMessage = () => {
+    const widthScale = useHeatmapVizStore((state) => state.scale);
     return (jsx("div", { className: "missingElement", style: {
             position: 'absolute',
             top: '50%',
@@ -1136,25 +1071,21 @@ const MissingElementMessage = ({ widthScale }) => {
 
 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,
+        iframeRef,
+        visualRef,
+        wrapperRef,
         getRect,
     });
-    console.log(`🚀 🐥 ~ HeatmapElements ~ clickedElement:`, clickedElement);
     const { hoveredElement, handleMouseMove, handleMouseLeave, handleClick } = useHoveredElement({
         iframeRef,
-        heatmapInfo,
         getRect,
-        widthScale,
     });
     const resetAll = () => {
         // setShouldShowCallout(false);
@@ -1167,12 +1098,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: "heatmapElements gx-hm-elements", style: { ...iframeDimensions, height }, children: [jsx(DefaultRankBadges, { getRect: getRect, hidden: areDefaultRanksHidden }), jsx(ClickedElementOverlay, { element: clickedElement, shouldShowCallout: shouldShowCallout, isSecondary: isSecondary, targetId: isSecondary ? SECONDARY_CLICKED_ELEMENT_ID : CLICKED_ELEMENT_ID, ...rest }), showMissingElement && jsx(MissingElementMessage, {}), jsx(HoveredElementOverlay, { element: hoveredElement, onClick: handleClick, isSecondary: isSecondary, targetId: isSecondary ? SECONDARY_HOVERED_ELEMENT_ID : HOVERED_ELEMENT_ID }), hoveredElement?.hash !== clickedElement?.hash && hoveredElement && (jsx(ElementCallout, { element: hoveredElement, target: `#${props.isSecondary ? SECONDARY_HOVERED_ELEMENT_ID : HOVERED_ELEMENT_ID}`, isSecondary: props.isSecondary, wrapperRef: props.wrapperRef }))] }));
 };
 
-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 +1122,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 +1163,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 +1184,7 @@ const VizDomRenderer = ({ mode = 'heatmap' }) => {
     useHeatmapVizCanvas({ type: config?.heatmapType });
     const cleanUp = () => {
         setIframeHeight(0);
+        setSelectedElement(null);
     };
     useEffect(() => {
         return cleanUp;
@@ -1264,17 +1202,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 = () => {
@@ -1296,7 +1234,14 @@ const ContentMetricBar = () => {
 
 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 +1289,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}`,
         };
     }
@@ -1367,4 +1313,4 @@ var ErrorType;
     ErrorType["DataError"] = "DataError";
 })(ErrorType || (ErrorType = {}));
 
-export { GraphView, HeatmapLayout, IHeatmapType, useHeatmapDataStore };
+export { GraphView, HeatmapLayout, IHeatmapType, useHeatmapDataStore, useHeatmapInteractionStore };