@gemx-dev/heatmap-react 3.5.13 → 3.5.16

package/dist/esm/index.mjs

@@ -1,9 +1,10 @@
 "use client"
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useNodesState, ReactFlow, Controls, Background } from '@xyflow/react';
-import { useEffect, useMemo, useRef, useCallback, useState } from 'react';
-import { Visualizer } from '@gemx-dev/clarity-visualize';
+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 }) => {
@@ -37,6 +38,21 @@ 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 BoxStack = ({ children, ...props }) => {
     const id = props.id;
     const flexDirection = props.flexDirection;
@@ -96,6 +112,231 @@ const HEATMAP_STYLE = {
     },
 };
 
+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)
@@ -120,19 +361,6 @@ const recreateIframe = (iframeRef, config) => {
     return newIframe;
 };
 
-const useHeatmapDataStore = create()((set, get) => ({
-    data: undefined,
-    config: undefined,
-    iframeHeight: 0,
-    state: {
-        hideSidebar: false,
-    },
-    setData: (data) => set({ data }),
-    setState: (state) => set({ state: { ...get().state, ...state } }),
-    setConfig: (config) => set({ config: { ...get().config, ...config } }),
-    setIframeHeight: (iframeHeight) => set({ iframeHeight }),
-}));
-
 function isMobileDevice(userAgent) {
     if (!userAgent)
         return false;
@@ -143,6 +371,7 @@ 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) => {
@@ -161,13 +390,14 @@ const useHeatmapRender = () => {
             locale: 'en-us',
         });
         return visualizer;
-    }, [setConfig]);
+    }, []);
     // Process and render heatmap HTML
     const renderHeatmap = useCallback(async (payloads) => {
         if (!payloads || payloads.length === 0)
             return;
-        let visualizer = visualizerRef.current || new Visualizer();
+        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
@@ -185,6 +415,7 @@ const useHeatmapRender = () => {
         // Render static HTML
         if (visualizer && iframe?.contentWindow) {
             await visualizer.html(payloads, iframe.contentWindow);
+            visualizerRef.current = visualizer;
         }
     }, [initializeVisualizer]);
     useEffect(() => {
@@ -195,8 +426,15 @@ const useHeatmapRender = () => {
             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,
     };
 };
 
@@ -318,6 +556,7 @@ const useReplayRender = () => {
     return {
         iframeRef,
         isPlaying: isPlayingRef.current,
+        clarityVisualizer: visualizerRef.current,
         play,
         pause,
     };
@@ -530,8 +769,386 @@ const useHeatmapScale = (props) => {
     };
 };
 
-const VizElements = ({ width, height }) => {
-    return (jsx("div", { className: "gx-hm-elements", style: { width, height }, children: jsx("div", { className: "gx-hm-element" }) }));
+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 = () => {
@@ -597,7 +1214,7 @@ const VizDomRenderer = ({ mode = 'heatmap' }) => {
                         height: iframeHeight,
                         transform: `scale(${scale})`,
                         transformOrigin: 'top center',
-                    }, children: [jsx(VizElements, { width: contentWidth, height: iframeHeight }), jsx("iframe", { 
+                    }, 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, {})] }));
 };
@@ -636,15 +1253,33 @@ 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, sidebar }) => {
-    return (jsxs(BoxStack, { id: "gx-hm-layout", flexDirection: "column", flex: "1", children: [jsx(ContentHeader, { children: header }), jsx(WrapperPreview, { children: sidebar })] }));
+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 = ({ header, sidebar }) => {
+const HeatmapLayout = ({ data, clickmap, header, toolbar, sidebar, }) => {
+    const setData = useHeatmapDataStore((state) => state.setData);
+    const setClickmap = useHeatmapDataStore((state) => state.setClickmap);
+    const handleSetClickmap = useCallback((clickmap) => {
+        if (!clickmap)
+            return;
+        setClickmap(clickmap);
+    }, [clickmap]);
+    const handleSetData = useCallback((data) => {
+        if (!data)
+            return;
+        setData(data);
+    }, [data]);
+    useEffect(() => {
+        handleSetData(data);
+    }, [data]);
+    useEffect(() => {
+        handleSetClickmap(clickmap);
+    }, [clickmap]);
     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, sidebar: sidebar }) }) }) }));
+                }, children: jsx(WrapperLayout, { header: header, toolbar: toolbar, sidebar: sidebar }) }) }) }));
 };
 
 var PanelContent;