@gemx-dev/heatmap-react 3.5.26 → 3.5.28

package/dist/esm/index.mjs

@@ -1,10 +1,8 @@
 "use client"
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useNodesState, ReactFlow, Controls, Background } from '@xyflow/react';
-import { useEffect, useMemo, useState, useCallback, useRef, Fragment as Fragment$1 } from 'react';
+import { useEffect, useMemo, useCallback } 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 }) => {
@@ -38,20 +36,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;
@@ -91,1172 +92,6 @@ 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);
@@ -1279,7 +114,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;