@gemx-dev/heatmap-react 3.5.30 → 3.5.32

package/dist/esm/index.js

@@ -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, useState, useCallback, useRef, Fragment as Fragment$1 } from 'react';
+import { useEffect, useCallback, useState, useRef, useMemo, 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,88 +38,162 @@ 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 HEATMAP_IFRAME = {
+    id: 'clarity-iframe',
+    title: 'Clarity Session Replay',
+    sandbox: 'allow-same-origin allow-scripts',
+    scrolling: 'no',
+    height: '100%',
+};
+
+const HEATMAP_CONFIG = {
+    padding: 8,
+    borderWidth: 1,
+    borderColor: '#E3E3E3',
+};
+const HEATMAP_STYLE = {
+    viz: {
+        background: '#f3f3f3',
+        paddingBottom: `${HEATMAP_CONFIG.padding}px`,
+    },
+    wrapper: {
+        padding: `${HEATMAP_CONFIG.padding}px 0`,
+    },
+};
+const DEFAULT_SIDEBAR_WIDTH = 260;
+
+const useHeatmapControlStore = create()((set, get) => {
+    return {
+        controls: {
+            Sidebar: null,
+            TopBar: null,
+            Toolbar: null,
+            MetricBar: null,
+            VizLoading: null,
+        },
+        registerControl: (key, control) => {
+            set({
+                controls: {
+                    ...get().controls,
+                    [key]: control,
+                },
+            });
+        },
+    };
+});
+
+var IHeatmapType;
+(function (IHeatmapType) {
+    IHeatmapType["Click"] = "click";
+    IHeatmapType["Scroll"] = "scroll";
+})(IHeatmapType || (IHeatmapType = {}));
+
 const useHeatmapDataStore = create()((set, get) => {
     return {
         data: undefined,
         clickmap: undefined,
-        config: undefined,
-        iframeHeight: 0,
-        state: {
-            hideSidebar: false,
+        config: {
+            sidebarWidth: DEFAULT_SIDEBAR_WIDTH,
+            width: 1440,
+            heatmapType: IHeatmapType.Click,
         },
+        dataInfo: undefined,
+        isRendering: true,
+        setIsRendering: (isRendering) => set({ isRendering }),
+        setDataInfo: (dataInfo) => set({ dataInfo }),
         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;
-    const flexDirection = props.flexDirection;
-    const overflow = props.overflow || 'hidden';
-    const position = props.position || 'relative';
-    const flex = props.flex || 'none';
-    const justifyContent = props.justifyContent;
-    const alignItems = props.alignItems;
-    const style = props.style || {};
-    const gap = props.gap || 0;
-    const height = props.height || 'auto';
-    const styleGap = useMemo(() => {
-        switch (flexDirection) {
-            case 'row':
-                return {
-                    columnGap: gap,
-                };
-            case 'column':
-                return {
-                    rowGap: gap,
-                };
-        }
-    }, [gap, flexDirection]);
-    const styleProps = {
-        display: 'flex',
-        flexDirection,
-        overflow,
-        position,
-        flex,
-        justifyContent,
-        alignItems,
-        height,
-        ...styleGap,
-        ...style,
+const useHeatmapInteractionStore = create()((set, get) => {
+    return {
+        state: {
+            hideSidebar: false,
+        },
+        setState: (state) => set({ state }),
+        selectedElement: null,
+        setSelectedElement: (selectedElement) => set({ selectedElement }),
+        hoveredElement: null,
+        setHoveredElement: (hoveredElement) => set({ hoveredElement }),
     };
-    return (jsx("div", { id: id, style: styleProps, children: children }));
-};
+});
+
+const useHeatmapVizStore = create()((set, get) => {
+    return {
+        scale: 1,
+        vizRef: undefined,
+        iframeHeight: 0,
+        setScale: (scale) => set({ scale }),
+        setVizRef: (vizRef) => set({ vizRef }),
+        setIframeHeight: (iframeHeight) => set({ iframeHeight }),
+    };
+});
 
-const ContentHeader = ({ children }) => {
-    return (jsx(BoxStack, { id: "gx-hm-content-header", flexDirection: "row", alignItems: "center", overflow: "auto", children: children }));
+const useRegisterConfig = () => {
+    const config = useHeatmapDataStore((state) => state.config);
+    const setIsRendering = useHeatmapDataStore((state) => state.setIsRendering);
+    useEffect(() => {
+        setIsRendering(true);
+        setTimeout(() => {
+            setIsRendering(false);
+        }, 1000);
+    }, [config]);
 };
 
-const HEATMAP_IFRAME = {
-    id: 'clarity-iframe',
-    title: 'Clarity Session Replay',
-    sandbox: 'allow-same-origin allow-scripts',
-    scrolling: 'no',
-    height: '100%',
+const useRegisterControl = (control) => {
+    const registerControl = useHeatmapControlStore((state) => state.registerControl);
+    registerControl('Sidebar', control.Sidebar);
+    registerControl('TopBar', control.TopBar);
+    registerControl('Toolbar', control.Toolbar);
+    registerControl('MetricBar', control.MetricBar);
+    registerControl('VizLoading', control.VizLoading);
 };
 
-const HEATMAP_CONFIG = {
-    paddingBlock: 0,
+const useRegisterData = (data, dataInfo) => {
+    const setData = useHeatmapDataStore((state) => state.setData);
+    const setIsRendering = useHeatmapDataStore((state) => state.setIsRendering);
+    const setDataInfo = useHeatmapDataStore((state) => state.setDataInfo);
+    const handleSetData = useCallback((data) => {
+        if (!data)
+            return;
+        setData(data);
+        setIsRendering(false);
+    }, [data]);
+    const handleSetDataInfo = useCallback((dataInfo) => {
+        if (!dataInfo)
+            return;
+        setDataInfo(dataInfo);
+    }, [setDataInfo]);
+    useEffect(() => {
+        handleSetData(data);
+    }, [data]);
+    useEffect(() => {
+        handleSetDataInfo(dataInfo);
+    }, [dataInfo]);
 };
-const HEATMAP_STYLE = {
-    wrapper: {
-        padding: `${HEATMAP_CONFIG.paddingBlock}px 0`,
-    },
+
+const useRegisterHeatmap = (clickmap) => {
+    const setClickmap = useHeatmapDataStore((state) => state.setClickmap);
+    const handleSetClickmap = useCallback((clickmap) => {
+        if (!clickmap)
+            return;
+        setClickmap(clickmap);
+    }, [clickmap]);
+    useEffect(() => {
+        handleSetClickmap(clickmap);
+    }, [clickmap]);
 };
 
-const useClickedElement = ({ selectedElement, heatmapInfo, getRect }) => {
+const useClickedElement = ({ heatmapInfo, getRect }) => {
+    const selectedElement = useHeatmapInteractionStore((state) => state.selectedElement);
     const [clickedElement, setClickedElement] = useState(null);
     const [showMissingElement, setShowMissingElement] = useState(false);
     const [shouldShowCallout, setShouldShowCallout] = useState(false);
     useEffect(() => {
+        console.log(`🚀 🐥 ~ useClickedElement ~ heatmapInfo?.elementMapInfo:`, heatmapInfo?.elementMapInfo);
         if (!selectedElement || !heatmapInfo?.elementMapInfo) {
             setClickedElement(null);
             setShowMissingElement(false);
@@ -162,7 +237,8 @@ const useClickedElement = ({ selectedElement, heatmapInfo, getRect }) => {
     return { clickedElement, showMissingElement, shouldShowCallout, setShouldShowCallout };
 };
 
-const useHeatmapEffects = ({ isVisible, isElementSidebarOpen, selectedElement, setShouldShowCallout, resetAll, }) => {
+const useHeatmapEffects = ({ isVisible, isElementSidebarOpen, setShouldShowCallout, resetAll, }) => {
+    const selectedElement = useHeatmapInteractionStore((state) => state.selectedElement);
     // Reset khi ẩn
     useEffect(() => {
         if (!isVisible)
@@ -195,10 +271,6 @@ function getElementLayout(element) {
 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;
@@ -209,7 +281,8 @@ function calculateRankPosition(rect, widthScale) {
     };
 }
 
-const useHeatmapElementPosition = ({ iframeRef, parentRef, visualizer, heatmapWidth, iframeHeight, widthScale, projectId, }) => {
+const useHeatmapElementPosition = ({ iframeRef, parentRef, visualizer, heatmapWidth, widthScale, projectId, }) => {
+    const iframeHeight = useHeatmapVizStore((state) => state.iframeHeight);
     return useCallback((element) => {
         const hash = element?.hash;
         if (!iframeRef.current?.contentDocument || !hash || !visualizer)
@@ -254,8 +327,10 @@ const debounce = (fn, delay) => {
         timeout = setTimeout(() => fn(...args), delay);
     };
 };
-const useHoveredElement = ({ iframeRef, heatmapInfo, widthScale, getRect, onSelect, }) => {
-    const [hoveredElement, setHoveredElement] = useState(null);
+const useHoveredElement = ({ iframeRef, heatmapInfo, widthScale, getRect }) => {
+    const hoveredElement = useHeatmapInteractionStore((state) => state.hoveredElement);
+    const setHoveredElement = useHeatmapInteractionStore((state) => state.setHoveredElement);
+    const onSelect = useHeatmapInteractionStore((state) => state.setSelectedElement);
     const handleMouseMove = useCallback(debounce((event) => {
         if (!iframeRef.current?.contentDocument || !heatmapInfo?.elementMapInfo) {
             setHoveredElement(null);
@@ -264,8 +339,6 @@ const useHoveredElement = ({ iframeRef, heatmapInfo, widthScale, getRect, onSele
         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;
@@ -276,9 +349,7 @@ const useHoveredElement = ({ iframeRef, heatmapInfo, widthScale, getRect, onSele
             setHoveredElement(null);
             return;
         }
-        let targetElement = null;
-        // Best: dùng caretPositionFromPoint nếu có (Chrome, Safari)
-        targetElement = getElementAtPoint(doc, x, y);
+        let targetElement = getElementAtPoint(doc, x, y) || null;
         if (!targetElement) {
             targetElement = doc.elementFromPoint(x, y);
         }
@@ -286,7 +357,6 @@ const useHoveredElement = ({ iframeRef, heatmapInfo, widthScale, getRect, onSele
             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');
@@ -339,107 +409,40 @@ const getElementAtPoint = (doc, x, y) => {
     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 setVizRef = useHeatmapVizStore((state) => state.setVizRef);
     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]);
+        const visualizer = new Visualizer();
+        const iframe = iframeRef.current;
+        if (!iframe?.contentWindow)
+            return;
+        await visualizer.html(payloads, iframe.contentWindow);
+        setVizRef(visualizer);
+    }, []);
     useEffect(() => {
         if (!data || data.length === 0)
             return;
         renderHeatmap(data);
         return () => {
-            visualizerRef.current = null;
+            setVizRef(null);
         };
-    }, [config, data, renderHeatmap]);
-    useEffect(() => {
-        if (!visualizerRef.current || !clickmap || clickmap.length === 0)
-            return;
-        visualizerRef.current.clearmap();
-        visualizerRef.current?.clickmap(clickmap);
-    }, [clickmap]);
+    }, [config, data]);
     return {
         iframeRef,
-        clarityVisualizer: visualizerRef.current,
     };
 };
 
+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);
+}
+
 function sortEvents(a, b) {
     return a.time - b.time;
 }
@@ -558,7 +561,6 @@ const useReplayRender = () => {
     return {
         iframeRef,
         isPlaying: isPlayingRef.current,
-        clarityVisualizer: visualizerRef.current,
         play,
         pause,
     };
@@ -607,23 +609,21 @@ const useContainerDimensions = (props) => {
 
 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);
-        }
+        if (!config?.width)
+            return;
+        if (!iframeRef.current)
+            return;
+        iframeRef.current.width = `${config.width}px`;
     }, [config?.width, iframeRef]);
-    return { contentWidth };
+    return { contentWidth: config?.width ?? 0 };
 };
 
 // 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 iframeHeight = useHeatmapVizStore((state) => state.iframeHeight);
+    const setIframeHeight = useHeatmapVizStore((state) => state.setIframeHeight);
     const resizeObserverRef = useRef(null);
     const mutationObserverRef = useRef(null);
     const updateIframeHeight = useCallback(() => {
@@ -645,16 +645,14 @@ const useIframeHeight = (props) => {
             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]);
+    }, [contentWidth]);
     useEffect(() => {
         const iframe = iframeRef.current;
         if (!iframe)
@@ -714,11 +712,12 @@ const useIframeHeight = (props) => {
 };
 
 const useScaleCalculation = (props) => {
+    const scale = useHeatmapVizStore((state) => state.scale);
+    const setScale = useHeatmapVizStore((state) => state.setScale);
     const { containerWidth, contentWidth } = props;
-    const [scale, setScale] = useState(1);
     useEffect(() => {
         if (containerWidth > 0 && contentWidth > 0) {
-            const availableWidth = containerWidth - HEATMAP_CONFIG['paddingBlock'] * 2;
+            const availableWidth = containerWidth - HEATMAP_CONFIG['padding'] * 2;
             const calculatedScale = Math.min(availableWidth / contentWidth, 1);
             setScale(calculatedScale);
         }
@@ -771,6 +770,84 @@ const useHeatmapScale = (props) => {
     };
 };
 
+const BoxStack = ({ children, ...props }) => {
+    const id = props.id;
+    const flexDirection = props.flexDirection;
+    const overflow = props.overflow || 'hidden';
+    const position = props.position || 'relative';
+    const flex = props.flex || 'none';
+    const justifyContent = props.justifyContent;
+    const alignItems = props.alignItems;
+    const style = props.style || {};
+    const gap = props.gap || 0;
+    const height = props.height || 'auto';
+    const styleGap = useMemo(() => {
+        switch (flexDirection) {
+            case 'row':
+                return {
+                    columnGap: gap,
+                };
+            case 'column':
+                return {
+                    rowGap: gap,
+                };
+        }
+    }, [gap, flexDirection]);
+    const styleProps = {
+        display: 'flex',
+        flexDirection,
+        overflow,
+        position,
+        flex,
+        justifyContent,
+        alignItems,
+        height,
+        ...styleGap,
+        ...style,
+    };
+    return (jsx("div", { id: id, style: styleProps, children: children }));
+};
+
+const ContentTopBar = () => {
+    const controls = useHeatmapControlStore((state) => state.controls);
+    return (jsx(BoxStack, { id: "gx-hm-content-header", flexDirection: "row", alignItems: "center", overflow: "auto", style: {
+            borderBottom: `${HEATMAP_CONFIG.borderWidth}px solid ${HEATMAP_CONFIG.borderColor}`,
+        }, children: controls.TopBar ?? null }));
+};
+
+const useClickmap = () => {
+    const [isInitialized, setIsInitialized] = useState(false);
+    const clickmap = useHeatmapDataStore((state) => state.clickmap);
+    const vizRef = useHeatmapVizStore((state) => state.vizRef);
+    useEffect(() => {
+        if (isInitialized)
+            return;
+        if (!vizRef || !clickmap || clickmap.length === 0)
+            return;
+        vizRef.clearmap();
+        vizRef?.clickmap(clickmap);
+        setIsInitialized(true);
+    }, [vizRef, clickmap]);
+    return {};
+};
+
+const useScrollmap = () => {
+    useHeatmapDataStore((state) => state.clickmap);
+    return {};
+};
+
+const useHeatmapVizCanvas = ({ type }) => {
+    const heatmapRender = useMemo(() => {
+        switch (type) {
+            case IHeatmapType.Click:
+                return useClickmap;
+            case IHeatmapType.Scroll:
+                return useScrollmap;
+        }
+    }, [type]);
+    return heatmapRender?.();
+};
+
 const CLICKED_ELEMENT_ID = 'clickedElement';
 const SECONDARY_CLICKED_ELEMENT_ID = 'secondaryClickedElementID';
 const HOVERED_ELEMENT_ID = 'hoveredElement';
@@ -784,7 +861,6 @@ const ElementCallout = ({ element, target, totalClicks, isSecondary, isRecording
         placement: 'top',
     });
     const percentage = formatPercentage(((element.clicks ?? 0) / totalClicks) * 100, 2);
-    // Calculate callout position
     useEffect(() => {
         const targetElement = document.querySelector(target);
         const calloutElement = calloutRef.current;
@@ -800,30 +876,25 @@ const ElementCallout = ({ element, target, totalClicks, isSecondary, isRecording
             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,
@@ -841,9 +912,7 @@ const ElementCallout = ({ element, target, totalClicks, isSecondary, isRecording
             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);
         };
@@ -856,12 +925,12 @@ const ElementCallout = ({ element, target, totalClicks, isSecondary, isRecording
             parentRef?.current?.removeEventListener('scroll', handleUpdate);
         };
     }, [target, parentRef]);
-    (jsxs("div", { ref: calloutRef, className: `clarity-callout clarity-callout--${position.placement} ${isSecondary ? 'clarity-callout--secondary' : ''}`, style: {
+    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: `
+        }, "aria-live": "assertive", role: "tooltip", children: [jsx("div", { className: "clarity-callout__arrow" }), jsx("div", { className: "clarity-callout__content", children: jsxs("div", { className: "clarity-callout__stats", children: [jsx("div", { className: "clarity-callout__label", children: "Clicks" }), jsxs("div", { className: "clarity-callout__value", children: [jsx("span", { className: "clarity-callout__count", children: element.clicks?.toLocaleString(language) }), jsxs("span", { className: "clarity-callout__percentage", children: ["(", percentage, "%)"] })] })] }) }), jsx("style", { children: `
         .clarity-callout {
           background: white;
           border-radius: 8px;
@@ -1005,20 +1074,7 @@ const ElementCallout = ({ element, target, totalClicks, isSecondary, isRecording
           height: 14px;
         }
       ` })] }));
-    const [portalContainer, setPortalContainer] = useState(null);
-    useEffect(() => {
-        const container = document.querySelector('#gx-hm-project-portal');
-        if (container instanceof HTMLElement) {
-            setPortalContainer(container);
-        }
-        else {
-            console.warn('Portal container #gx-hm-project-portal not found!');
-        }
-    }, []);
-    if (!portalContainer) {
-        return jsx(Fragment, {});
-    }
-    // return createPortal(calloutContent, portalContainer);
+    return createPortal(calloutContent, document.body);
 };
 
 const RankBadge = ({ index, elementRect, widthScale, clickOnElement, }) => {
@@ -1079,84 +1135,64 @@ const MissingElementMessage = ({ widthScale }) => {
 };
 
 const HeatmapElements = (props) => {
-    const { iframeRef, parentRef, visualizer, heatmapInfo, widthScale, iframeHeight, iframeDimensions, selectedElement, isElementSidebarOpen, isVisible = true, selectElement, areDefaultRanksHidden, isSecondary, ...rest } = props;
+    const height = useHeatmapVizStore((state) => state.iframeHeight);
+    const { heatmapInfo, iframeRef, parentRef, visualizer, widthScale, iframeDimensions, isElementSidebarOpen, isVisible = true, 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,
     });
+    console.log(`🚀 🐥 ~ HeatmapElements ~ clickedElement:`, clickedElement);
     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 }))] }));
+    return (jsxs("div", { onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, className: "heatmapElements gx-hm-elements", style: { ...iframeDimensions, height }, children: [jsx(DefaultRankBadges, { elements: top10, getRect: getRect, widthScale: widthScale, hidden: areDefaultRanksHidden }), jsx(ClickedElementOverlay, { widthScale: widthScale, element: clickedElement, shouldShowCallout: shouldShowCallout, isSecondary: isSecondary, targetId: isSecondary ? SECONDARY_CLICKED_ELEMENT_ID : CLICKED_ELEMENT_ID, ...rest }), showMissingElement && jsx(MissingElementMessage, { widthScale: widthScale }), jsx(HoveredElementOverlay, { element: hoveredElement, onClick: handleClick, isSecondary: isSecondary, targetId: isSecondary ? SECONDARY_HOVERED_ELEMENT_ID : HOVERED_ELEMENT_ID, totalClicks: heatmapInfo?.totalClicks ?? 1 }), hoveredElement?.hash !== clickedElement?.hash && hoveredElement && (jsx(ElementCallout, { element: hoveredElement, target: `#${props.isSecondary ? SECONDARY_HOVERED_ELEMENT_ID : HOVERED_ELEMENT_ID}`, totalClicks: props.heatmapInfo?.totalClicks ?? 1, isSecondary: props.isSecondary, parentRef: props.parentRef }))] }));
 };
 
-const VizElements = ({ width, height, iframeRef, wrapperRef, widthScale, }) => {
-    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 VizElements = ({ width, iframeRef, wrapperRef, widthScale, }) => {
+    const heatmapInfo = useHeatmapDataStore((state) => state.dataInfo);
     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 elmHashAlpha = doc.querySelector(`[data-clarity-hashalpha="${hash}"]`);
+            if (elmHashAlpha) {
+                return elmHashAlpha;
+            }
+            const elmHash = doc.querySelector(`[data-clarity-hash="${hash}"]`);
+            if (elmHash) {
+                return elmHash;
+            }
+            return null;
         },
     };
-    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: {
+    return (jsx(HeatmapElements, { visualizer: visualizer, iframeRef: iframeRef, parentRef: wrapperRef, widthScale: widthScale, heatmapInfo: heatmapInfo, isVisible: true, iframeDimensions: {
             width,
-            height,
             position: 'absolute',
             top: 0,
             left: 0,
@@ -1195,6 +1231,7 @@ const ReplayControls = () => {
 
 const VizDomRenderer = ({ mode = 'heatmap' }) => {
     const config = useHeatmapDataStore((state) => state.config);
+    const setIframeHeight = useHeatmapVizStore((state) => state.setIframeHeight);
     const wrapperRef = useRef(null);
     const visualRef = useRef(null);
     const { iframeRef } = useHeatmapVizRender(mode);
@@ -1207,45 +1244,66 @@ const VizDomRenderer = ({ mode = 'heatmap' }) => {
         const scrollTop = e.currentTarget.scrollTop;
         handleScroll(scrollTop);
     };
+    useHeatmapVizCanvas({ type: config?.heatmapType });
+    const cleanUp = () => {
+        setIframeHeight(0);
+    };
+    useEffect(() => {
+        return cleanUp;
+    }, []);
     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',
+            // paddingBottom: HEATMAP_STYLE['viz']['paddingBottom'],
+            background: '#fff',
         }, 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',
+                    height: scaledHeight > 0 ? `${scaledHeight + HEATMAP_CONFIG['padding'] * 2}px` : 'auto',
                     padding: HEATMAP_STYLE['wrapper']['padding'],
+                    paddingBottom: HEATMAP_STYLE['viz']['paddingBottom'],
+                    background: HEATMAP_STYLE['viz']['background'],
                 }, children: jsxs("div", { className: "gx-hm-wrapper", ref: wrapperRef, style: {
                         width: contentWidth,
                         height: iframeHeight,
                         transform: `scale(${scale})`,
                         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, {})] }));
+                        paddingBlockEnd: '0',
+                    }, children: [jsx(VizElements, { width: contentWidth, widthScale: scale, iframeRef: iframeRef, wrapperRef: wrapperRef }), jsx("iframe", { ref: iframeRef, ...HEATMAP_IFRAME, width: contentWidth, height: iframeHeight, scrolling: "no" })] }) }), mode === 'replay' && jsx(ReplayControls, {})] }));
 };
 
 const VizDomContainer = () => {
+    const controls = useHeatmapControlStore((state) => state.controls);
+    const isRendering = useHeatmapDataStore((state) => state.isRendering);
+    if (isRendering)
+        return controls.VizLoading ?? null;
     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);
+const ContentMetricBar = () => {
+    const controls = useHeatmapControlStore((state) => state.controls);
+    return (jsx(BoxStack, { id: "gx-hm-content-header", flexDirection: "row", alignItems: "center", overflow: "auto", style: {
+            borderBottom: `${HEATMAP_CONFIG.borderWidth}px solid ${HEATMAP_CONFIG.borderColor}`,
+        }, children: controls.MetricBar ?? null }));
+};
+
+const ContentToolbar = () => {
+    const controls = useHeatmapControlStore((state) => state.controls);
+    return (jsx("div", { id: "gx-hm-content-toolbar", style: { position: 'absolute', bottom: 0, left: '8px', right: '24px', padding: '8px' }, children: controls.Toolbar ?? null }));
+};
+
+const LeftSidebar = () => {
+    const controls = useHeatmapControlStore((state) => state.controls);
+    const isHideSidebar = useHeatmapInteractionStore((state) => state.state.hideSidebar);
+    const config = useHeatmapDataStore((state) => state.config);
+    const sidebarWidth = config?.sidebarWidth || DEFAULT_SIDEBAR_WIDTH;
     if (isHideSidebar) {
         return null;
     }
@@ -1258,41 +1316,37 @@ const LeftSidebar = ({ children }) => {
                     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 }) }));
+                : { width: `${sidebarWidth}px + ${HEATMAP_CONFIG.borderWidth}px` }),
+        }, children: jsx("div", { className: "gx-hm-sidebar-wrapper", style: {
+                height: '100%',
+                width: `calc(${sidebarWidth}px + ${HEATMAP_CONFIG.borderWidth}px)`,
+                borderRight: `${HEATMAP_CONFIG.borderWidth}px solid ${HEATMAP_CONFIG.borderColor}`,
+            }, children: controls.Sidebar ?? null }) }));
 };
 
-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 WrapperPreview = () => {
+    return (jsxs(BoxStack, { id: "gx-hm-container", flexDirection: "row", overflow: "hidden", flex: "1", position: "relative", children: [jsx(LeftSidebar, {}), jsxs(BoxStack, { flexDirection: "column", flex: "1", children: [jsx(ContentMetricBar, {}), jsx(VizDomContainer, {}), jsx(ContentToolbar, {})] })] }));
 };
 
-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 WrapperLayout = () => {
+    return (jsxs(BoxStack, { id: "gx-hm-layout", flexDirection: "column", flex: "1", children: [jsx(ContentTopBar, {}), jsx(WrapperPreview, {})] }));
 };
 
-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 (jsxs(Fragment, { children: [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 }) }) }) }), jsx("div", { id: "gx-hm-project-portal" })] }));
+const HeatmapLayout = ({ data, clickmap, controls, dataInfo, }) => {
+    useRegisterControl(controls);
+    useRegisterData(data, dataInfo);
+    useRegisterHeatmap(clickmap);
+    useRegisterConfig();
+    return (jsx(BoxStack, { id: "gx-hm-project", flexDirection: "column", flex: "1", height: "100%", style: getVariableStyle(), children: jsx(BoxStack, { id: "gx-hm-project-content", flexDirection: "column", flex: "1", children: jsx("div", { style: {
+                    minHeight: '100%',
+                    display: 'flex',
+                }, children: jsx(WrapperLayout, {}) }) }) }));
+    function getVariableStyle() {
+        return {
+            '--gx-hm-border-width': `${HEATMAP_CONFIG.borderWidth}px`,
+            '--gx-hm-border-color': `${HEATMAP_CONFIG.borderColor}`,
+        };
+    }
 };
 
 var PanelContent;
@@ -1313,4 +1367,4 @@ var ErrorType;
     ErrorType["DataError"] = "DataError";
 })(ErrorType || (ErrorType = {}));
 
-export { GraphView, HeatmapLayout, useHeatmapDataStore };
+export { GraphView, HeatmapLayout, IHeatmapType, useHeatmapDataStore };