@gemx-dev/heatmap-react 3.5.27 → 3.5.29

package/dist/esm/index.js

@@ -1,8 +1,10 @@
 "use client"
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useNodesState, ReactFlow, Controls, Background } from '@xyflow/react';
-import { useEffect, useMemo, useCallback } from 'react';
+import { useEffect, useMemo, useState, useCallback, useRef, Fragment as Fragment$1 } from 'react';
 import { create } from 'zustand';
+import { Visualizer } from '@gemx-dev/clarity-visualize';
+import { createPortal } from 'react-dom';
 
 const initialNodes = { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } };
 const GraphView = ({ children, width, height }) => {
@@ -36,20 +38,23 @@ const GraphView = ({ children, width, height }) => {
     return (jsxs(ReactFlow, { nodes: nodes, nodeTypes: nodeTypes, onNodesChange: onNodesChange, debug: true, minZoom: 0.5, maxZoom: 2, fitView: true, children: [jsx(Controls, {}), jsx(Background, {})] }));
 };
 
-const useHeatmapDataStore = create()((set, get) => ({
-    data: undefined,
-    clickmap: undefined,
-    config: undefined,
-    iframeHeight: 0,
-    state: {
-        hideSidebar: false,
-    },
-    setData: (data) => set({ data }),
-    setClickmap: (clickmap) => set({ clickmap }),
-    setState: (state) => set({ state: { ...get().state, ...state } }),
-    setConfig: (config) => set({ config: { ...get().config, ...config } }),
-    setIframeHeight: (iframeHeight) => set({ iframeHeight }),
-}));
+const useHeatmapDataStore = create()((set, get) => {
+    return {
+        data: undefined,
+        clickmap: undefined,
+        config: undefined,
+        iframeHeight: 0,
+        state: {
+            hideSidebar: false,
+        },
+        setData: (data) => set({ data }),
+        setClickmap: (clickmap) => set({ clickmap }),
+        setState: (state) => set({ state: { ...get().state, ...state } }),
+        setConfig: (value) => set({ config: { ...get().config, ...value } }),
+        setConfigBy: (key, value) => set({ config: { ...get().config, [key]: value } }),
+        setIframeHeight: (iframeHeight) => set({ iframeHeight }),
+    };
+});
 
 const BoxStack = ({ children, ...props }) => {
     const id = props.id;
@@ -89,6 +94,1172 @@ const BoxStack = ({ children, ...props }) => {
     return (jsx("div", { id: id, style: styleProps, children: children }));
 };
 
+const ContentHeader = ({ children }) => {
+    return (jsx(BoxStack, { id: "gx-hm-content-header", flexDirection: "row", alignItems: "center", overflow: "auto", children: children }));
+};
+
+const HEATMAP_IFRAME = {
+    id: 'clarity-iframe',
+    title: 'Clarity Session Replay',
+    sandbox: 'allow-same-origin allow-scripts',
+    scrolling: 'no',
+    height: '100%',
+};
+
+const HEATMAP_CONFIG = {
+    paddingBlock: 0,
+};
+const HEATMAP_STYLE = {
+    wrapper: {
+        padding: `${HEATMAP_CONFIG.paddingBlock}px 0`,
+    },
+};
+
+const useClickedElement = ({ selectedElement, heatmapInfo, getRect }) => {
+    const [clickedElement, setClickedElement] = useState(null);
+    const [showMissingElement, setShowMissingElement] = useState(false);
+    const [shouldShowCallout, setShouldShowCallout] = useState(false);
+    useEffect(() => {
+        if (!selectedElement || !heatmapInfo?.elementMapInfo) {
+            setClickedElement(null);
+            setShowMissingElement(false);
+            setShouldShowCallout(false);
+            return;
+        }
+        const info = heatmapInfo.elementMapInfo[selectedElement];
+        if (!info) {
+            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,
+            });
+            setShowMissingElement(true);
+            setShouldShowCallout(false);
+        }
+    }, [selectedElement, heatmapInfo, getRect]);
+    return { clickedElement, showMissingElement, shouldShowCallout, setShouldShowCallout };
+};
+
+const useHeatmapEffects = ({ isVisible, isElementSidebarOpen, selectedElement, setShouldShowCallout, resetAll, }) => {
+    // Reset khi ẩn
+    useEffect(() => {
+        if (!isVisible)
+            resetAll();
+    }, [isVisible, resetAll]);
+    // Ẩn callout khi sidebar mở
+    useEffect(() => {
+        if (isElementSidebarOpen && selectedElement) {
+            setShouldShowCallout(false);
+        }
+        else if (!isElementSidebarOpen && selectedElement) {
+            setShouldShowCallout(true);
+        }
+    }, [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 getSimpleSelector(selector) {
+    const parts = selector.split(' > ');
+    return parts[parts.length - 1] || selector;
+}
+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, iframeHeight, widthScale, projectId, }) => {
+    return useCallback((element) => {
+        const hash = element?.hash;
+        if (!iframeRef.current?.contentDocument || !hash || !visualizer)
+            return null;
+        let domElement = null;
+        try {
+            domElement = visualizer.get(hash);
+        }
+        catch (error) {
+            console.error('Visualizer error:', { projectId, hash, error });
+            return null;
+        }
+        if (!domElement)
+            return null;
+        const layout = getElementLayout(domElement);
+        if (!layout)
+            return null;
+        const parentEl = parentRef.current;
+        if (!parentEl)
+            return null;
+        const scrollOffset = parentEl.scrollTop / widthScale;
+        const adjustedTop = layout.top + scrollOffset;
+        const outOfBounds = adjustedTop < 0 ||
+            adjustedTop > (iframeHeight || Infinity) ||
+            layout.left < 0 ||
+            (typeof heatmapWidth === 'number' && layout.left > heatmapWidth);
+        if (outOfBounds)
+            return null;
+        return {
+            left: layout.left,
+            top: adjustedTop,
+            width: Math.min(layout.width, heatmapWidth || layout.width),
+            height: layout.height,
+        };
+    }, [iframeRef, parentRef, visualizer, heatmapWidth, iframeHeight, widthScale, projectId]);
+};
+
+const debounce = (fn, delay) => {
+    let timeout;
+    return (...args) => {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => fn(...args), delay);
+    };
+};
+const useHoveredElement = ({ iframeRef, heatmapInfo, widthScale, getRect, onSelect, }) => {
+    const [hoveredElement, setHoveredElement] = useState(null);
+    const handleMouseMove = useCallback(debounce((event) => {
+        if (!iframeRef.current?.contentDocument || !heatmapInfo?.elementMapInfo) {
+            setHoveredElement(null);
+            return;
+        }
+        const iframe = iframeRef.current;
+        const iframeRect = iframe.getBoundingClientRect();
+        let x = event.clientX - iframeRect.left;
+        console.log(`🚀 🐥 ~ useHoveredElement ~ iframeRect.left:`, iframeRect.left);
+        console.log(`🚀 🐥 ~ useHoveredElement ~ event.clientX:`, event.clientX);
+        let y = event.clientY - iframeRect.top;
+        if (widthScale !== 1) {
+            x /= widthScale;
+            y /= widthScale;
+        }
+        const doc = iframe.contentDocument;
+        if (!doc) {
+            setHoveredElement(null);
+            return;
+        }
+        let targetElement = null;
+        // Best: dùng caretPositionFromPoint nếu có (Chrome, Safari)
+        targetElement = getElementAtPoint(doc, x, y);
+        if (!targetElement) {
+            targetElement = doc.elementFromPoint(x, y);
+        }
+        if (!targetElement) {
+            setHoveredElement(null);
+            return;
+        }
+        // Lấy hash từ nhiều attribute khả dĩ
+        const hash = targetElement.getAttribute('data-clarity-hash') ||
+            targetElement.getAttribute('data-clarity-hashalpha') ||
+            targetElement.getAttribute('data-clarity-hashbeta');
+        if (!hash || !heatmapInfo.elementMapInfo[hash]) {
+            setHoveredElement(null);
+            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);
+        }
+    }, 16), // ~60fps
+    [iframeRef, heatmapInfo, getRect]);
+    const handleMouseLeave = useCallback(() => {
+        setHoveredElement(null);
+    }, []);
+    const handleClick = useCallback(() => {
+        if (hoveredElement?.hash && onSelect) {
+            onSelect(hoveredElement.hash);
+        }
+    }, [hoveredElement, onSelect]);
+    return {
+        hoveredElement,
+        handleMouseMove,
+        handleMouseLeave,
+        handleClick,
+    };
+};
+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;
+};
+
+const recreateIframe = (iframeRef, config) => {
+    const container = iframeRef.current?.parentElement;
+    if (!container)
+        return;
+    const oldIframe = iframeRef.current;
+    if (!oldIframe?.contentDocument?.body.innerHTML) {
+        return oldIframe;
+    }
+    if (oldIframe && oldIframe.parentElement) {
+        oldIframe.parentElement.removeChild(oldIframe);
+    }
+    const newIframe = document.createElement('iframe');
+    newIframe.id = HEATMAP_IFRAME.id;
+    newIframe.title = HEATMAP_IFRAME.title;
+    newIframe.sandbox = HEATMAP_IFRAME.sandbox;
+    newIframe.scrolling = HEATMAP_IFRAME.scrolling;
+    newIframe.width = config?.width ? `${config.width}px` : '100%';
+    // Append to container
+    container.appendChild(newIframe);
+    // Update ref
+    iframeRef.current = newIframe;
+    return newIframe;
+};
+
+function isMobileDevice(userAgent) {
+    if (!userAgent)
+        return false;
+    return /android|webos|iphone|ipad|ipod|blackberry|windows phone|opera mini|iemobile|mobile|silk|fennec|bada|tizen|symbian|nokia|palmsource|meego|sailfish|kindle|playbook|bb10|rim/i.test(userAgent);
+}
+
+const useHeatmapRender = () => {
+    const data = useHeatmapDataStore((state) => state.data);
+    const config = useHeatmapDataStore((state) => state.config);
+    const setConfig = useHeatmapDataStore((state) => state.setConfig);
+    const clickmap = useHeatmapDataStore((state) => state.clickmap);
+    const visualizerRef = useRef(null);
+    const iframeRef = useRef(null);
+    const initializeVisualizer = useCallback((envelope, userAgent) => {
+        const iframe = iframeRef.current;
+        if (!iframe?.contentWindow)
+            return null;
+        const visualizer = new Visualizer();
+        const mobile = isMobileDevice(userAgent);
+        visualizer.setup(iframe.contentWindow, {
+            version: envelope.version,
+            onresize: (width) => {
+                setConfig({ width });
+            },
+            mobile,
+            vNext: true,
+            locale: 'en-us',
+        });
+        return visualizer;
+    }, []);
+    // Process and render heatmap HTML
+    const renderHeatmap = useCallback(async (payloads) => {
+        if (!payloads || payloads.length === 0)
+            return;
+        let visualizer = new Visualizer();
+        const iframe = recreateIframe(iframeRef, config);
+        // const merged = visualizer.merge(payloads);
+        // setIframeHeight(Number(iframeRef.current?.height || 0));
+        // for (const decoded of payloads) {
+        //   // Initialize on first sequence
+        //   if (decoded.envelope.sequence === 1) {
+        //     const userAgent = (decoded.dimension?.[0]?.data[0]?.[0] as string) || '';
+        //     visualizer = initializeVisualizer(decoded.envelope as any, userAgent);
+        //     if (!visualizer) return;
+        //     visualizerRef.current = visualizer;
+        //   }
+        //   if (!visualizer) continue;
+        //   // Merge and process DOM
+        //   const merged = visualizer.merge([decoded]);
+        //   visualizer.dom(merged.dom);
+        // }
+        // Render static HTML
+        if (visualizer && iframe?.contentWindow) {
+            await visualizer.html(payloads, iframe.contentWindow);
+            visualizerRef.current = visualizer;
+        }
+    }, [initializeVisualizer]);
+    useEffect(() => {
+        if (!data || data.length === 0)
+            return;
+        renderHeatmap(data);
+        return () => {
+            visualizerRef.current = null;
+        };
+    }, [config, data, renderHeatmap]);
+    useEffect(() => {
+        if (!visualizerRef.current || !clickmap || clickmap.length === 0)
+            return;
+        visualizerRef.current.clearmap();
+        visualizerRef.current?.clickmap(clickmap);
+    }, [clickmap]);
+    return {
+        iframeRef,
+        clarityVisualizer: visualizerRef.current,
+    };
+};
+
+function sortEvents(a, b) {
+    return a.time - b.time;
+}
+
+const useReplayRender = () => {
+    const data = useHeatmapDataStore((state) => state.data);
+    const setConfig = useHeatmapDataStore((state) => state.setConfig);
+    const visualizerRef = useRef(null);
+    const iframeRef = useRef(null);
+    const eventsRef = useRef([]);
+    const animationFrameRef = useRef(null);
+    const isPlayingRef = useRef(false);
+    // Initialize visualizer for replay
+    const initializeVisualizer = useCallback((envelope, userAgent) => {
+        const iframe = iframeRef.current;
+        if (!iframe?.contentWindow)
+            return null;
+        // Clear previous events
+        eventsRef.current = [];
+        const visualizer = new Visualizer();
+        const mobile = isMobileDevice(userAgent);
+        visualizer.setup(iframe.contentWindow, {
+            version: envelope.version,
+            onresize: (width) => {
+                setConfig({ width });
+            },
+            mobile,
+            vNext: true,
+            locale: 'en-us',
+        });
+        return visualizer;
+    }, [setConfig]);
+    // Animation loop for replay
+    const replayLoop = useCallback(() => {
+        if (!isPlayingRef.current)
+            return;
+        const events = eventsRef.current;
+        const visualizer = visualizerRef.current;
+        if (!visualizer || events.length === 0) {
+            animationFrameRef.current = requestAnimationFrame(replayLoop);
+            return;
+        }
+        const event = events[0];
+        const end = event.time + 16; // 60FPS => 16ms per frame
+        let index = 0;
+        // Get events within current frame
+        while (events[index] && events[index].time < end) {
+            index++;
+        }
+        // Render events for this frame
+        if (index > 0) {
+            visualizer.render(events.splice(0, index));
+        }
+        animationFrameRef.current = requestAnimationFrame(replayLoop);
+    }, []);
+    // Start replay
+    const startReplay = useCallback(async (payloads) => {
+        if (!payloads || payloads.length === 0)
+            return;
+        let visualizer = visualizerRef.current;
+        for (const decoded of payloads) {
+            // Initialize on first sequence
+            if (decoded.envelope.sequence === 1) {
+                const userAgent = decoded.dimension?.[0]?.data[0]?.[0] || '';
+                visualizer = initializeVisualizer(decoded.envelope, userAgent);
+                if (!visualizer)
+                    return;
+                visualizerRef.current = visualizer;
+            }
+            if (!visualizer)
+                continue;
+            // Merge events and DOM
+            const merged = visualizer.merge([decoded]);
+            eventsRef.current = eventsRef.current.concat(merged.events).sort(sortEvents);
+            visualizer.dom(merged.dom);
+        }
+        // Render HTML
+        if (visualizer && iframeRef.current?.contentWindow) {
+            await visualizer.html(payloads, iframeRef.current.contentWindow);
+        }
+        // Auto-start replay
+        isPlayingRef.current = true;
+        animationFrameRef.current = requestAnimationFrame(replayLoop);
+    }, [initializeVisualizer, replayLoop]);
+    // Play control
+    const play = useCallback(() => {
+        if (!isPlayingRef.current) {
+            isPlayingRef.current = true;
+            animationFrameRef.current = requestAnimationFrame(replayLoop);
+        }
+    }, [replayLoop]);
+    // Pause control
+    const pause = useCallback(() => {
+        isPlayingRef.current = false;
+        if (animationFrameRef.current) {
+            cancelAnimationFrame(animationFrameRef.current);
+            animationFrameRef.current = null;
+        }
+    }, []);
+    // Main effect: Start replay when data changes
+    useEffect(() => {
+        if (!data || data.length === 0)
+            return;
+        startReplay(data);
+        // Cleanup
+        return () => {
+            isPlayingRef.current = false;
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+                animationFrameRef.current = null;
+            }
+            eventsRef.current = [];
+            visualizerRef.current = null;
+        };
+    }, [data, startReplay]);
+    return {
+        iframeRef,
+        isPlaying: isPlayingRef.current,
+        clarityVisualizer: visualizerRef.current,
+        play,
+        pause,
+    };
+};
+
+const useHeatmapVizRender = (mode) => {
+    const heatmapResult = useMemo(() => {
+        switch (mode) {
+            case 'heatmap':
+                return useHeatmapRender;
+            case 'replay':
+                return useReplayRender;
+        }
+    }, [mode]);
+    return heatmapResult();
+};
+
+const useContainerDimensions = (props) => {
+    const { wrapperRef } = props;
+    const [containerWidth, setContainerWidth] = useState(0);
+    const [containerHeight, setContainerHeight] = useState(0);
+    const resizeObserverRef = useRef(null);
+    const updateDimensions = useCallback(() => {
+        const scrollContainer = wrapperRef.current?.parentElement?.parentElement;
+        if (scrollContainer) {
+            setContainerWidth(scrollContainer.clientWidth);
+            setContainerHeight(scrollContainer.clientHeight);
+        }
+    }, [wrapperRef]);
+    useEffect(() => {
+        const scrollContainer = wrapperRef.current?.parentElement?.parentElement;
+        if (!scrollContainer || typeof window.ResizeObserver === 'undefined') {
+            return;
+        }
+        resizeObserverRef.current = new ResizeObserver(updateDimensions);
+        resizeObserverRef.current.observe(scrollContainer);
+        updateDimensions();
+        return () => {
+            if (resizeObserverRef.current && scrollContainer) {
+                resizeObserverRef.current.unobserve(scrollContainer);
+            }
+        };
+    }, [wrapperRef, updateDimensions]);
+    return { containerWidth, containerHeight };
+};
+
+const useContentDimensions = (props) => {
+    const { iframeRef, config } = props;
+    const [contentWidth, setContentWidth] = useState(0);
+    useEffect(() => {
+        if (config?.width) {
+            if (iframeRef.current) {
+                iframeRef.current.width = `${config.width}px`;
+            }
+            setContentWidth(config.width);
+        }
+    }, [config?.width, iframeRef]);
+    return { contentWidth };
+};
+
+// Hook 3: Iframe Height Observer
+const useIframeHeight = (props) => {
+    const { iframeRef, contentWidth } = props;
+    const iframeHeight = useHeatmapDataStore((state) => state.iframeHeight);
+    const setIframeHeight = useHeatmapDataStore((state) => state.setIframeHeight);
+    const resizeObserverRef = useRef(null);
+    const mutationObserverRef = useRef(null);
+    const updateIframeHeight = useCallback(() => {
+        const iframe = iframeRef.current;
+        if (!iframe)
+            return;
+        try {
+            const iframeDocument = iframe.contentDocument;
+            const iframeBody = iframeDocument?.body;
+            if (!iframeBody)
+                return;
+            const bodyHeight = Math.max(iframeBody.scrollHeight, iframeBody.offsetHeight, iframeBody.clientHeight);
+            if (bodyHeight > 0) {
+                iframe.height = `${bodyHeight}px`;
+                setIframeHeight(bodyHeight);
+            }
+        }
+        catch (error) {
+            console.warn('Cannot measure iframe content:', error);
+        }
+    }, [iframeRef, setIframeHeight]);
+    // Trigger height update when content width changes
+    useEffect(() => {
+        if (contentWidth > 0) {
+            // Delay to allow iframe content to reflow after width change
+            const timeoutId = setTimeout(() => {
+                updateIframeHeight();
+            }, 100);
+            return () => clearTimeout(timeoutId);
+        }
+    }, [contentWidth, updateIframeHeight]);
+    useEffect(() => {
+        const iframe = iframeRef.current;
+        if (!iframe)
+            return;
+        const setupObservers = () => {
+            try {
+                const iframeDocument = iframe.contentDocument;
+                const iframeBody = iframeDocument?.body;
+                if (!iframeBody)
+                    return;
+                // Cleanup existing observers
+                if (resizeObserverRef.current) {
+                    resizeObserverRef.current.disconnect();
+                }
+                if (mutationObserverRef.current) {
+                    mutationObserverRef.current.disconnect();
+                }
+                // ResizeObserver for size changes
+                if (typeof window.ResizeObserver !== 'undefined') {
+                    resizeObserverRef.current = new ResizeObserver(updateIframeHeight);
+                    resizeObserverRef.current.observe(iframeBody);
+                }
+                // MutationObserver for DOM changes
+                if (typeof window.MutationObserver !== 'undefined') {
+                    mutationObserverRef.current = new MutationObserver(updateIframeHeight);
+                    mutationObserverRef.current.observe(iframeBody, {
+                        childList: true,
+                        subtree: true,
+                        attributes: true,
+                        characterData: true,
+                    });
+                }
+                // Initial measurement
+                updateIframeHeight();
+            }
+            catch (error) {
+                console.warn('Cannot access iframe content:', error);
+            }
+        };
+        if (iframe.contentDocument?.readyState === 'complete') {
+            setupObservers();
+        }
+        else {
+            iframe.addEventListener('load', setupObservers, { once: true });
+        }
+        return () => {
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.disconnect();
+            }
+            if (mutationObserverRef.current) {
+                mutationObserverRef.current.disconnect();
+            }
+            iframe.removeEventListener('load', setupObservers);
+        };
+    }, [iframeRef, updateIframeHeight]);
+    return { iframeHeight };
+};
+
+const useScaleCalculation = (props) => {
+    const { containerWidth, contentWidth } = props;
+    const [scale, setScale] = useState(1);
+    useEffect(() => {
+        if (containerWidth > 0 && contentWidth > 0) {
+            const availableWidth = containerWidth - HEATMAP_CONFIG['paddingBlock'] * 2;
+            const calculatedScale = Math.min(availableWidth / contentWidth, 1);
+            setScale(calculatedScale);
+        }
+    }, [containerWidth, contentWidth]);
+    return { scale };
+};
+
+const useScrollSync = (props) => {
+    const { iframeRef, scale } = props;
+    const handleScroll = useCallback((scrollTop) => {
+        const iframe = iframeRef.current;
+        if (!iframe || scale <= 0)
+            return;
+        try {
+            const iframeWindow = iframe.contentWindow;
+            const iframeDocument = iframe.contentDocument;
+            if (iframeWindow && iframeDocument) {
+                const iframeScrollTop = scrollTop / scale;
+                iframe.style.top = `${iframeScrollTop}px`;
+            }
+        }
+        catch (error) {
+            console.warn('Cannot sync scroll to iframe:', error);
+        }
+    }, [iframeRef, scale]);
+    return { handleScroll };
+};
+
+const useHeatmapScale = (props) => {
+    const { wrapperRef, iframeRef, config } = props;
+    // 1. Observe container dimensions
+    const { containerWidth, containerHeight } = useContainerDimensions({ wrapperRef });
+    // 2. Get content dimensions from config
+    const { contentWidth } = useContentDimensions({ iframeRef, config });
+    // 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 });
+    return {
+        containerWidth,
+        containerHeight,
+        contentWidth,
+        iframeHeight,
+        scale,
+        scaledWidth: contentWidth * scale,
+        scaledHeight: iframeHeight * scale,
+        handleScroll,
+    };
+};
+
+const CLICKED_ELEMENT_ID = 'clickedElement';
+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 calloutRef = useRef(null);
+    const [position, setPosition] = useState({
+        top: 0,
+        left: 0,
+        placement: 'top',
+    });
+    const percentage = formatPercentage(((element.clicks ?? 0) / totalClicks) * 100, 2);
+    // Calculate callout position
+    useEffect(() => {
+        const targetElement = document.querySelector(target);
+        const calloutElement = calloutRef.current;
+        if (!targetElement || !calloutElement)
+            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';
+            // Try positions in order: top, bottom, right, left
+            const positions = [
+                // Top
+                {
+                    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,
+                },
+                // Bottom
+                {
+                    placement: 'bottom',
+                    top: targetRect.bottom + padding + arrowSize,
+                    left: targetRect.left + targetRect.width / 2 - calloutRect.width / 2,
+                    valid: targetRect.bottom + calloutRect.height + padding + arrowSize < viewportHeight,
+                },
+                // Right
+                {
+                    placement: 'right',
+                    top: targetRect.top + targetRect.height / 2 - calloutRect.height / 2,
+                    left: targetRect.right + padding + arrowSize,
+                    valid: targetRect.right + calloutRect.width + padding + arrowSize < viewportWidth,
+                },
+                // Left
+                {
+                    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 });
+        };
+        // Initial calculation
+        calculatePosition();
+        // Recalculate on scroll/resize
+        const handleUpdate = () => {
+            requestAnimationFrame(calculatePosition);
+        };
+        window.addEventListener('scroll', handleUpdate, true);
+        window.addEventListener('resize', handleUpdate);
+        parentRef?.current?.addEventListener('scroll', handleUpdate);
+        return () => {
+            window.removeEventListener('scroll', handleUpdate, true);
+            window.removeEventListener('resize', handleUpdate);
+            parentRef?.current?.removeEventListener('scroll', handleUpdate);
+        };
+    }, [target, parentRef]);
+    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" }), jsxs("div", { className: "clarity-callout__content", children: [jsx("div", { className: "clarity-callout__rank", children: element.rank }), 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, "%)"] })] })] }), !isRecordingView && !isCompareMode && (jsxs("button", { className: "clarity-callout__button", "data-clarity-id": "viewRecordingClickedFromHeatmapIframe", "data-element-hash": element.hash, "data-selector": getSimpleSelector(element.selector), "data-device-type": deviceType, "data-heatmap-type": heatmapType, children: [jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: jsx("path", { d: "M5 3L11 8L5 13V3Z", fill: "currentColor" }) }), "View Recording"] }))] }), 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;
+        }
+      ` })] }));
+    // Render to body using Portal
+    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 }));
+};
+
+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)
+        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 }) => {
+    return (jsx("div", { className: "missingElement", style: {
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: `translate(-50%, -50%) scale(${1 / widthScale})`,
+            background: 'rgba(0, 0, 0, 0.8)',
+            color: 'white',
+            padding: '12px 20px',
+            borderRadius: '8px',
+            fontSize: '14px',
+            fontWeight: '500',
+            zIndex: 9999,
+            pointerEvents: 'none',
+            whiteSpace: 'nowrap',
+        }, "aria-live": "assertive", children: "Element not visible on current screen" }));
+};
+
+const HeatmapElements = (props) => {
+    const { iframeRef, parentRef, visualizer, heatmapInfo, widthScale, iframeHeight, iframeDimensions, selectedElement, isElementSidebarOpen, isVisible = true, selectElement, areDefaultRanksHidden, isSecondary, ...rest } = props;
+    const getRect = useHeatmapElementPosition({
+        iframeRef,
+        parentRef,
+        visualizer,
+        heatmapWidth: heatmapInfo?.width,
+        iframeHeight,
+        widthScale,
+        projectId: props.projectId,
+    });
+    const { clickedElement, showMissingElement, shouldShowCallout, setShouldShowCallout } = useClickedElement({
+        selectedElement,
+        heatmapInfo,
+        getRect,
+    });
+    const { hoveredElement, handleMouseMove, handleMouseLeave, handleClick } = useHoveredElement({
+        iframeRef,
+        heatmapInfo,
+        getRect,
+        onSelect: selectElement,
+        widthScale,
+    });
+    const resetAll = () => {
+        // nếu cần reset thêm state ở đây
+        // setShouldShowCallout(false);
+    };
+    useHeatmapEffects({
+        isVisible,
+        isElementSidebarOpen,
+        selectedElement,
+        setShouldShowCallout,
+        resetAll,
+    });
+    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, 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 !== clickedElement && 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 }))] }));
+};
+
+const VizElements = ({ width, height, iframeRef, wrapperRef, widthScale, }) => {
+    useHeatmapDataStore((state) => state.data);
+    const heatmapInfo = {
+        sortedElements: [
+            {
+                hash: '9ebwu6a3',
+                selector: 'Join our email list',
+            },
+            {
+                hash: '350hde5d4',
+                selector: 'Products',
+            },
+        ],
+        elementMapInfo: {
+            '9ebwu6a3': {
+                totalclicks: 4,
+                hash: '9ebwu6a3',
+            },
+            '350hde5d4': {
+                totalclicks: 4,
+                hash: '350hde5d4',
+            },
+        },
+        totalClicks: 8,
+    };
+    const visualizer = {
+        get: (hash) => {
+            const doc = iframeRef.current?.contentDocument;
+            if (!doc)
+                return null;
+            // Find element by hash attribute
+            return doc.querySelector(`[data-clarity-hashalpha="${hash}"]`);
+        },
+    };
+    const [selectedElement, setSelectedElement] = useState(null);
+    if (!iframeRef.current)
+        return null;
+    return (jsx(HeatmapElements, { visualizer: visualizer, iframeRef: iframeRef, parentRef: wrapperRef, iframeHeight: window.innerHeight, widthScale: widthScale, heatmapInfo: heatmapInfo, selectedElement: selectedElement, selectElement: setSelectedElement, isVisible: true, iframeDimensions: {
+            width,
+            height,
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            // pointerEvents: 'none',
+        } }));
+};
+
+const ReplayControls = () => {
+    const replayResult = useReplayRender();
+    return (jsxs("div", { style: {
+            position: 'absolute',
+            bottom: 20,
+            left: '50%',
+            transform: 'translateX(-50%)',
+            display: 'flex',
+            gap: 10,
+            backgroundColor: 'rgba(0, 0, 0, 0.7)',
+            padding: '10px 20px',
+            borderRadius: 8,
+        }, children: [jsx("button", { onClick: replayResult.play, style: {
+                    padding: '8px 16px',
+                    backgroundColor: '#4CAF50',
+                    color: 'white',
+                    border: 'none',
+                    borderRadius: 4,
+                    cursor: 'pointer',
+                }, children: "Play" }), jsx("button", { onClick: replayResult.pause, style: {
+                    padding: '8px 16px',
+                    backgroundColor: '#f44336',
+                    color: 'white',
+                    border: 'none',
+                    borderRadius: 4,
+                    cursor: 'pointer',
+                }, children: "Pause" })] }));
+};
+
+const VizDomRenderer = ({ mode = 'heatmap' }) => {
+    const config = useHeatmapDataStore((state) => state.config);
+    const wrapperRef = useRef(null);
+    const visualRef = useRef(null);
+    const { iframeRef } = useHeatmapVizRender(mode);
+    const { contentWidth, iframeHeight, scale, scaledHeight, handleScroll } = useHeatmapScale({
+        wrapperRef,
+        iframeRef,
+        config,
+    });
+    const onScroll = (e) => {
+        const scrollTop = e.currentTarget.scrollTop;
+        handleScroll(scrollTop);
+    };
+    return (jsxs("div", { ref: visualRef, className: "gx-hm-visual", onScroll: onScroll, style: {
+            overflow: 'hidden auto',
+            display: 'flex',
+            position: 'relative',
+            justifyContent: 'center',
+            flex: 1,
+            backgroundColor: '#fff',
+            // borderRadius: '8px',
+        }, children: [jsx("div", { className: "gx-hm-visual-unscaled", style: {
+                    width: '100%',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'flex-start',
+                    height: scaledHeight > 0 ? `${scaledHeight + HEATMAP_CONFIG['paddingBlock']}px` : 'auto',
+                    padding: HEATMAP_STYLE['wrapper']['padding'],
+                }, children: jsxs("div", { className: "gx-hm-wrapper", ref: wrapperRef, style: {
+                        width: contentWidth,
+                        height: iframeHeight,
+                        transform: `scale(${scale})`,
+                        transformOrigin: 'top center',
+                    }, children: [jsx(VizElements, { width: contentWidth, height: iframeHeight, widthScale: scale, iframeRef: iframeRef, wrapperRef: wrapperRef }), jsx("iframe", { 
+                            // key={iframeKey}
+                            ref: iframeRef, ...HEATMAP_IFRAME, width: contentWidth, height: iframeHeight, scrolling: "no" })] }) }), mode === 'replay' && jsx(ReplayControls, {})] }));
+};
+
+const VizDomContainer = () => {
+    return (jsx(BoxStack, { id: "gx-hm-viz-container", flexDirection: "column", flex: "1 1 auto", overflow: "auto", children: jsx(BoxStack, { id: "gx-hm-content", flexDirection: "column", flex: "1 1 auto", overflow: "hidden", style: {
+                // margin: '0px 16px 0px 12px',
+                // borderRadius: '8px 8px 0 0',
+                // borderRadius: '8px',
+                minWidth: '394px',
+                padding: '12px',
+                background: '#f1f1f1',
+            }, children: jsx(VizDomRenderer, {}) }) }));
+};
+
+const SIDEBAR_WIDTH = 280;
+const LeftSidebar = ({ children }) => {
+    const isHideSidebar = useHeatmapDataStore((state) => state.state.hideSidebar);
+    if (isHideSidebar) {
+        return null;
+    }
+    return (jsx("div", { className: "gx-hm-sidebar", style: {
+            height: '100%',
+            display: 'flex',
+            ...(isHideSidebar
+                ? {
+                    width: '0',
+                    transform: 'translateX(-100%)',
+                    visibility: 'hidden',
+                }
+                : { width: `${SIDEBAR_WIDTH}px` }),
+        }, children: jsx("div", { className: "gx-hm-sidebar-wrapper", style: { height: '100%', width: `${SIDEBAR_WIDTH}px` }, children: children }) }));
+};
+
+const WrapperPreview = ({ children }) => {
+    return (jsxs("div", { className: "gx-hm-container", style: { display: 'flex', overflowY: 'hidden', flex: '1', position: 'relative' }, children: [jsx(LeftSidebar, { children: children }), jsx(VizDomContainer, {})] }));
+};
+
+const WrapperLayout = ({ header, toolbar, sidebar }) => {
+    return (jsxs(BoxStack, { id: "gx-hm-layout", flexDirection: "column", flex: "1", children: [jsx(ContentHeader, { children: header }), jsx(ContentHeader, { children: toolbar }), jsx(WrapperPreview, { children: sidebar })] }));
+};
+
 const HeatmapLayout = ({ data, clickmap, header, toolbar, sidebar, }) => {
     const setData = useHeatmapDataStore((state) => state.setData);
     const setClickmap = useHeatmapDataStore((state) => state.setClickmap);
@@ -111,7 +1282,7 @@ const HeatmapLayout = ({ data, clickmap, header, toolbar, sidebar, }) => {
     return (jsx(BoxStack, { id: "gx-hm-project", flexDirection: "column", flex: "1", height: "100%", children: jsx(BoxStack, { id: "gx-hm-project-content", flexDirection: "column", flex: "1", children: jsx("div", { style: {
                     minHeight: '100%',
                     display: 'flex',
-                } }) }) }));
+                }, children: jsx(WrapperLayout, { header: header, toolbar: toolbar, sidebar: sidebar }) }) }) }));
 };
 
 var PanelContent;