@gemx-dev/heatmap-react 3.5.31 → 3.5.32

package/dist/esm/index.js

@@ -4,6 +4,7 @@ import { useNodesState, ReactFlow, Controls, Background } from '@xyflow/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 }) => {
@@ -48,7 +49,7 @@ const HEATMAP_IFRAME = {
 const HEATMAP_CONFIG = {
     padding: 8,
     borderWidth: 1,
-    borderColor: 'red',
+    borderColor: '#E3E3E3',
 };
 const HEATMAP_STYLE = {
     viz: {
@@ -96,25 +97,38 @@ const useHeatmapDataStore = create()((set, get) => {
             width: 1440,
             heatmapType: IHeatmapType.Click,
         },
-        iframeHeight: 0,
-        state: {
-            hideSidebar: false,
-        },
+        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 useHeatmapInteractionStore = create()((set, get) => {
+    return {
+        state: {
+            hideSidebar: false,
+        },
+        setState: (state) => set({ state }),
+        selectedElement: null,
+        setSelectedElement: (selectedElement) => set({ selectedElement }),
+        hoveredElement: null,
+        setHoveredElement: (hoveredElement) => set({ hoveredElement }),
     };
 });
 
 const useHeatmapVizStore = create()((set, get) => {
     return {
+        scale: 1,
         vizRef: undefined,
+        iframeHeight: 0,
+        setScale: (scale) => set({ scale }),
         setVizRef: (vizRef) => set({ vizRef }),
+        setIframeHeight: (iframeHeight) => set({ iframeHeight }),
     };
 });
 
@@ -138,18 +152,27 @@ const useRegisterControl = (control) => {
     registerControl('VizLoading', control.VizLoading);
 };
 
-const useRegisterData = (data) => {
+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 useRegisterHeatmap = (clickmap) => {
@@ -164,11 +187,13 @@ const useRegisterHeatmap = (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);
@@ -212,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)
@@ -245,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;
@@ -259,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)
@@ -304,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);
@@ -314,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;
@@ -326,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);
         }
@@ -336,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');
@@ -589,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(() => {
@@ -628,7 +646,6 @@ const useIframeHeight = (props) => {
         }
     }, [iframeRef, setIframeHeight]);
     useEffect(() => {
-        console.log(`🚀 🐥 ~ useIframeHeight ~ contentWidth:`, contentWidth);
         if (contentWidth > 0) {
             const timeoutId = setTimeout(() => {
                 updateIframeHeight();
@@ -695,8 +712,9 @@ 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['padding'] * 2;
@@ -843,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;
@@ -859,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,
@@ -900,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
+        calculatePosition();
         const handleUpdate = () => {
             requestAnimationFrame(calculatePosition);
         };
@@ -915,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;
@@ -1064,21 +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 jsx(Fragment, {});
-    // return createPortal(calloutContent, portalContainer);
+    return createPortal(calloutContent, document.body);
 };
 
 const RankBadge = ({ index, elementRect, widthScale, clickOnElement, }) => {
@@ -1139,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,
@@ -1255,7 +1231,7 @@ const ReplayControls = () => {
 
 const VizDomRenderer = ({ mode = 'heatmap' }) => {
     const config = useHeatmapDataStore((state) => state.config);
-    const setIframeHeight = useHeatmapDataStore((state) => state.setIframeHeight);
+    const setIframeHeight = useHeatmapVizStore((state) => state.setIframeHeight);
     const wrapperRef = useRef(null);
     const visualRef = useRef(null);
     const { iframeRef } = useHeatmapVizRender(mode);
@@ -1281,23 +1257,24 @@ const VizDomRenderer = ({ mode = 'heatmap' }) => {
             position: 'relative',
             justifyContent: 'center',
             flex: 1,
-            paddingBottom: HEATMAP_STYLE['viz']['paddingBottom'],
-            background: HEATMAP_STYLE['viz']['background'],
+            // 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['padding']}px` : 'auto',
+                    height: scaledHeight > 0 ? `${scaledHeight + HEATMAP_CONFIG['padding'] * 2}px` : 'auto',
                     padding: HEATMAP_STYLE['wrapper']['padding'],
-                    borderRadius: '8px',
+                    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',
                         paddingBlockEnd: '0',
-                    }, children: [jsx(VizElements, { width: contentWidth, height: iframeHeight, widthScale: scale, iframeRef: iframeRef, wrapperRef: wrapperRef }), jsx("iframe", { ref: iframeRef, ...HEATMAP_IFRAME, width: contentWidth, height: iframeHeight, scrolling: "no" })] }) }), mode === 'replay' && jsx(ReplayControls, {})] }));
+                    }, children: [jsx(VizElements, { 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 = () => {
@@ -1319,12 +1296,12 @@ const ContentMetricBar = () => {
 
 const ContentToolbar = () => {
     const controls = useHeatmapControlStore((state) => state.controls);
-    return (jsx("div", { id: "gx-hm-content-toolbar", style: { position: 'absolute', bottom: 0, left: 0, right: 0, padding: '8px' }, children: controls.Toolbar ?? null }));
+    return (jsx("div", { id: "gx-hm-content-toolbar", style: { position: 'absolute', bottom: 0, left: '8px', right: '24px', padding: '8px' }, children: controls.Toolbar ?? null }));
 };
 
 const LeftSidebar = () => {
     const controls = useHeatmapControlStore((state) => state.controls);
-    const isHideSidebar = useHeatmapDataStore((state) => state.state.hideSidebar);
+    const isHideSidebar = useHeatmapInteractionStore((state) => state.state.hideSidebar);
     const config = useHeatmapDataStore((state) => state.config);
     const sidebarWidth = config?.sidebarWidth || DEFAULT_SIDEBAR_WIDTH;
     if (isHideSidebar) {
@@ -1355,9 +1332,9 @@ const WrapperLayout = () => {
     return (jsxs(BoxStack, { id: "gx-hm-layout", flexDirection: "column", flex: "1", children: [jsx(ContentTopBar, {}), jsx(WrapperPreview, {})] }));
 };
 
-const HeatmapLayout = ({ data, clickmap, controls }) => {
+const HeatmapLayout = ({ data, clickmap, controls, dataInfo, }) => {
     useRegisterControl(controls);
-    useRegisterData(data);
+    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: {