@gemx-dev/heatmap-react 3.5.37 → 3.5.39

package/dist/esm/index.js

@@ -3,6 +3,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useNodesState, ReactFlow, Controls, Background } from '@xyflow/react';
 import { useEffect, useCallback, useState, useRef, useMemo, forwardRef, Fragment as Fragment$1 } from 'react';
 import { create } from 'zustand';
+import { decode } from '@gemx-dev/clarity-decode';
 import { Visualizer } from '@gemx-dev/clarity-visualize';
 import { createPortal } from 'react-dom';
 
@@ -91,23 +92,30 @@ var IHeatmapType;
     IHeatmapType["Scroll"] = "scroll";
 })(IHeatmapType || (IHeatmapType = {}));
 
+const useHeatmapConfigStore = create()((set, get) => {
+    return {
+        mode: 'single',
+        width: 1440,
+        sidebarWidth: DEFAULT_SIDEBAR_WIDTH,
+        heatmapType: IHeatmapType.Click,
+        setMode: (mode) => set({ mode }),
+        resetMode: () => set({ mode: 'single' }),
+        setWidth: (width) => set({ width }),
+        setSidebarWidth: (sidebarWidth) => set({ sidebarWidth }),
+        setHeatmapType: (heatmapType) => set({ heatmapType }),
+    };
+});
+
 const useHeatmapDataStore = create()((set, get) => {
     return {
         data: undefined,
         clickmap: undefined,
-        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 }),
-        setConfig: (value) => set({ config: { ...get().config, ...value } }),
-        setConfigBy: (key, value) => set({ config: { ...get().config, [key]: value } }),
     };
 });
 
@@ -139,15 +147,33 @@ const useHeatmapVizStore = create()((set, get) => {
     };
 });
 
+const initialState = {
+    htmlContent: '',
+    wrapperHeight: 0,
+    iframeHeight: 0,
+};
+const useHeatmapLiveStore = create()((set, get) => {
+    return {
+        ...initialState,
+        reset: () => set(initialState),
+        setHtmlContent: (htmlContent) => set({ htmlContent }),
+        setWrapperHeight: (wrapperHeight) => set({ wrapperHeight }),
+        setIframeHeight: (iframeHeight) => set({ iframeHeight }),
+    };
+});
+
 const useRegisterConfig = () => {
-    const config = useHeatmapDataStore((state) => state.config);
+    const mode = useHeatmapConfigStore((state) => state.mode);
+    const width = useHeatmapConfigStore((state) => state.width);
+    const sidebarWidth = useHeatmapConfigStore((state) => state.sidebarWidth);
+    const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
     const setIsRendering = useHeatmapDataStore((state) => state.setIsRendering);
     useEffect(() => {
         setIsRendering(true);
         setTimeout(() => {
             setIsRendering(false);
         }, 1000);
-    }, [config]);
+    }, [mode, width, sidebarWidth, heatmapType]);
 };
 
 const useRegisterControl = (control) => {
@@ -409,6 +435,43 @@ const buildElementInfo = (hash, rect, heatmapInfo) => {
     };
 };
 
+function findLastSizeOfDom(data) {
+    const firstDoc = data.find((item) => item.envelope.sequence === 1)?.doc;
+    const docSorted = firstDoc?.sort(sort);
+    const firstEvent = docSorted?.[0];
+    const docSize = {
+        width: firstEvent?.data.width,
+        height: firstEvent?.data.height,
+    };
+    const newData = JSON.parse(JSON.stringify(data));
+    const reversedData = newData.reverse();
+    const lastResizeEvent = reversedData.find((item) => !!item.resize);
+    const firstEventResize = lastResizeEvent?.resize?.[0];
+    const resize = {
+        width: firstEventResize?.data.width,
+        height: firstEventResize?.data.height,
+    };
+    return {
+        doc: docSize,
+        resize: resize,
+        size: {
+            width: resize.width ?? docSize.width,
+            height: resize.height ?? docSize.height,
+        },
+    };
+}
+function sort(a, b) {
+    return a.time - b.time;
+}
+function decodePayloads(payload) {
+    try {
+        return decode(payload);
+    }
+    catch (error) {
+        return null;
+    }
+}
+
 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;
@@ -438,6 +501,21 @@ function isElementInViewport(elementRect, visualRef, scale) {
     return elementBottom > viewportTop && elementTop < viewportBottom;
 }
 
+const getScriptInjectCode = async () => {
+    const moduleResult = (await Promise.resolve().then(function () { return viewportReplacer; }));
+    const ActualClass = moduleResult.default;
+    const classCode = ActualClass.toString();
+    const classInstantiateCode = ActualClass.name;
+    const scriptCode = `
+    (function() {
+      'use strict';
+      ${classCode}
+      const replacer = new ${classInstantiateCode}();
+      replacer.init();
+    })();
+    `;
+    return scriptCode;
+};
 class ViewportUnitsFixer {
     iframe = null;
     config;
@@ -463,22 +541,21 @@ class ViewportUnitsFixer {
     async injectScript() {
         if (!this.iframe?.contentWindow || !this.iframe.contentDocument)
             return;
-        const win = this.iframe.contentWindow;
         const doc = this.iframe.contentDocument;
-        win.__viewportConfig = this.config;
-        const script = doc.createElement('script');
-        script.textContent = `
-    (function() {
-      'use strict';
-      ${(await Promise.resolve().then(function () { return viewportReplacer; })).default}
-      new ViewportUnitsReplacer()
-    })();
-    `;
-        script.type = 'text/javascript';
-        script.id = 'viewport-replacer';
-        script.onload = () => console.log('[Parent] Viewport replacer module loaded');
-        script.onerror = () => console.error('[Parent] Không load được replacer script');
-        doc.head.appendChild(script);
+        const win = this.iframe.contentWindow;
+        try {
+            win.__viewportConfig = this.config;
+            const script = doc.createElement('script');
+            console.log(`🚀 🐥 ~ ViewportUnitsFixer ~ injectScript ~ script:`, script);
+            const scriptCode = await getScriptInjectCode();
+            console.log(`🚀 🐥 ~ ViewportUnitsFixer ~ injectScript ~ scriptCode:`, scriptCode);
+            script.textContent = scriptCode;
+            doc.head.appendChild(script);
+            console.log(`🚀 🐥 ~ ViewportUnitsFixer ~ injectScript ~ doc:`, doc);
+        }
+        catch (error) {
+            console.error('[Parent] Failed to inject script', error);
+        }
     }
     handleMessage(event) {
         const data = event.data;
@@ -501,15 +578,11 @@ function initViewportFixer(config) {
 }
 
 class ViewportUnitsReplacer {
-    config;
-    regex = /([-.\d]+)(vh|svh|lvh|dvh|vw|svw|lvw|dvw)/gi;
-    constructor() {
-        if (!window.__viewportConfig) {
-            throw new Error('[Iframe] Do not have viewport config');
-        }
-        this.config = window.__viewportConfig;
-        console.log('[Iframe] ViewportUnitsReplacer started with config:', this.config);
-        this.init();
+    regex() {
+        return /([-.\d]+)(vh|svh|lvh|dvh|vw|svw|lvw|dvw)/gi;
+    }
+    config() {
+        return window.__viewportConfig;
     }
     px(value) {
         return `${value.toFixed(2)}px`;
@@ -519,25 +592,25 @@ class ViewportUnitsReplacer {
         if (isNaN(num))
             return value;
         const map = {
-            vh: this.config.targetHeight,
-            svh: this.config.targetHeight,
-            lvh: this.config.targetHeight,
-            dvh: this.config.targetHeight,
-            vw: this.config.targetWidth,
-            svw: this.config.targetWidth,
-            lvw: this.config.targetWidth,
-            dvw: this.config.targetWidth,
+            vh: this.config().targetHeight,
+            svh: this.config().targetHeight,
+            lvh: this.config().targetHeight,
+            dvh: this.config().targetHeight,
+            vw: this.config().targetWidth,
+            svw: this.config().targetWidth,
+            lvw: this.config().targetWidth,
+            dvw: this.config().targetWidth,
         };
         return this.px((num / 100) * (map[unit.toLowerCase()] || 0));
     }
     replaceInText(cssText) {
-        return cssText.replace(this.regex, (_, value, unit) => this.convert(value, unit));
+        return cssText.replace(this.regex(), (_, value, unit) => this.convert(value, unit));
     }
     processInlineStyles() {
         let count = 0;
         document.querySelectorAll('[style]').forEach((el) => {
             const style = el.getAttribute('style');
-            if (style && this.regex.test(style)) {
+            if (style && this.regex().test(style)) {
                 el.setAttribute('style', this.replaceInText(style));
                 count++;
             }
@@ -549,7 +622,7 @@ class ViewportUnitsReplacer {
         let count = 0;
         document.querySelectorAll('style').forEach((tag) => {
             const css = tag.textContent || '';
-            if (this.regex.test(css)) {
+            if (this.regex().test(css)) {
                 tag.textContent = this.replaceInText(css);
                 count++;
             }
@@ -564,7 +637,7 @@ class ViewportUnitsReplacer {
             for (let i = 0; i < style.length; i++) {
                 const prop = style[i];
                 const value = style.getPropertyValue(prop);
-                if (value && this.regex.test(value)) {
+                if (value && this.regex().test(value)) {
                     style.setProperty(prop, this.replaceInText(value), style.getPropertyPriority(prop));
                     count++;
                 }
@@ -612,7 +685,7 @@ class ViewportUnitsReplacer {
             try {
                 const res = await fetch(link.href);
                 let css = await res.text();
-                if (this.regex.test(css)) {
+                if (this.regex().test(css)) {
                     css = this.replaceInText(css);
                     const style = document.createElement('style');
                     style.textContent = css;
@@ -671,6 +744,8 @@ class ViewportUnitsReplacer {
         }
     }
     init() {
+        if (!window.__viewportConfig)
+            return;
         if (document.readyState === 'loading') {
             document.addEventListener('DOMContentLoaded', () => this.run());
         }
@@ -798,7 +873,7 @@ const useHeatmapEffects = ({ isVisible, isElementSidebarOpen, setShouldShowCallo
 const useHeatmapElementPosition = ({ iframeRef, wrapperRef, visualizer }) => {
     const widthScale = useHeatmapVizStore((state) => state.scale);
     const iframeHeight = useHeatmapVizStore((state) => state.iframeHeight);
-    const heatmapWidth = useHeatmapDataStore((state) => state.config?.width);
+    const heatmapWidth = useHeatmapConfigStore((state) => state.width);
     return useCallback((element) => {
         const hash = element?.hash;
         if (!iframeRef.current?.contentDocument || !hash || !visualizer)
@@ -936,9 +1011,122 @@ const isValidElement = (element, heatmapInfo) => {
     return !!heatmapInfo?.elementMapInfo?.[hash];
 };
 
+var MessageType;
+(function (MessageType) {
+    MessageType["GX_DOM_TRACKING_PAYLOAD"] = "GX_DOM_TRACKING_PAYLOAD";
+    MessageType["CLARITY_READY"] = "CLARITY_READY";
+})(MessageType || (MessageType = {}));
+function useIframeMessage(options = {}) {
+    const { trustedOrigins = [], onMessage } = options;
+    const [payloads, setPayloads] = useState([]);
+    const [isReady, setIsReady] = useState(false);
+    const iframeRef = useRef(null);
+    const isValidOrigin = useCallback((origin) => {
+        if (trustedOrigins.length === 0)
+            return true;
+        return trustedOrigins.includes(origin);
+    }, [trustedOrigins]);
+    const handleMessage = useCallback((event) => {
+        if (!isValidOrigin(event.origin)) {
+            console.warn('Message from untrusted origin:', event.origin);
+            return;
+        }
+        if (!event.data || typeof event.data !== 'object' || !event.data.type) {
+            return;
+        }
+        const message = event.data;
+        if (!Object.values(MessageType).includes(message.type)) {
+            return;
+        }
+        if (onMessage) {
+            onMessage(message);
+        }
+        switch (message.type) {
+            case MessageType.GX_DOM_TRACKING_PAYLOAD:
+                if (message.payload) {
+                    const decodedPayloads = decodePayloads(message.payload);
+                    if (decodedPayloads) {
+                        setPayloads((prev) => [...prev, decodedPayloads]);
+                    }
+                }
+                break;
+            case MessageType.CLARITY_READY:
+                setIsReady(true);
+                break;
+        }
+    }, [isValidOrigin, onMessage]);
+    useEffect(() => {
+        window.addEventListener('message', handleMessage);
+        return () => {
+            window.removeEventListener('message', handleMessage);
+        };
+    }, [handleMessage]);
+    const clearPayloads = useCallback(() => {
+        setPayloads([]);
+    }, []);
+    const reset = useCallback(() => {
+        setPayloads([]);
+        setIsReady(false);
+    }, []);
+    return {
+        iframeRef,
+        payloads,
+        isReady,
+        clearPayloads,
+        reset,
+    };
+}
+function useIframeRender() {
+    const wrapperHeight = useHeatmapLiveStore((state) => state.wrapperHeight);
+    const contentWidth = useHeatmapConfigStore((state) => state.width);
+    const setIframeHeight = useHeatmapVizStore((state) => state.setIframeHeight);
+    const htmlContent = useHeatmapLiveStore((state) => state.htmlContent);
+    const { iframeRef, payloads, isReady } = useIframeMessage();
+    useEffect(() => {
+        if (!htmlContent || !iframeRef.current)
+            return;
+        const iframe = iframeRef.current;
+        const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
+        if (iframeDoc) {
+            iframeDoc.open();
+            iframeDoc.writeln(htmlContent);
+            iframeDoc.close();
+        }
+    }, [htmlContent]);
+    useEffect(() => {
+        if (!isReady)
+            return;
+        if (!iframeRef.current)
+            return;
+        const iframe = iframeRef.current;
+        if (!iframe || !htmlContent)
+            return;
+        reset$1(iframe, { width: contentWidth, height: wrapperHeight }, (height) => {
+            setIframeHeight(height);
+        });
+    }, [isReady, contentWidth, wrapperHeight]);
+    return {
+        iframeRef,
+        payloads,
+        isReady,
+    };
+}
+function reset$1(iframe, payloads, onSuccess) {
+    const viewportFixer = initViewportFixer({
+        targetWidth: payloads.width,
+        targetHeight: payloads.height,
+        iframe: iframe,
+        onSuccess: (data) => {
+            onSuccess(data.height);
+            iframe.height = `${data.height}px`;
+        },
+    });
+    viewportFixer.recalculate();
+    return iframe;
+}
+
 const useHeatmapRender = () => {
     const data = useHeatmapDataStore((state) => state.data);
-    const config = useHeatmapDataStore((state) => state.config);
     const setVizRef = useHeatmapVizStore((state) => state.setVizRef);
     const setIsRenderViz = useHeatmapVizStore((state) => state.setIsRenderViz);
     const setIframeHeight = useHeatmapVizStore((state) => state.setIframeHeight);
@@ -965,39 +1153,11 @@ const useHeatmapRender = () => {
         return () => {
             setVizRef(null);
         };
-    }, [config, data]);
+    }, [data]);
     return {
         iframeRef,
     };
 };
-function sort(a, b) {
-    return a.time - b.time;
-}
-function findLastSizeOfDom(data) {
-    const firstDoc = data.find((item) => item.envelope.sequence === 1)?.doc;
-    const docSorted = firstDoc?.sort(sort);
-    const firstEvent = docSorted?.[0];
-    const docSize = {
-        width: firstEvent?.data.width,
-        height: firstEvent?.data.height,
-    };
-    const newData = JSON.parse(JSON.stringify(data));
-    const reversedData = newData.reverse();
-    const lastResizeEvent = reversedData.find((item) => !!item.resize);
-    const firstEventResize = lastResizeEvent?.resize?.[0];
-    const resize = {
-        width: firstEventResize?.data.width,
-        height: firstEventResize?.data.height,
-    };
-    return {
-        doc: docSize,
-        resize: resize,
-        size: {
-            width: resize.width ?? docSize.width,
-            height: resize.height ?? docSize.height,
-        },
-    };
-}
 function reset(iframe, payloads, onSuccess) {
     const { size } = findLastSizeOfDom(payloads);
     const docWidth = size.width ?? 0;
@@ -1027,7 +1187,7 @@ function sortEvents(a, b) {
 
 const useReplayRender = () => {
     const data = useHeatmapDataStore((state) => state.data);
-    const setConfig = useHeatmapDataStore((state) => state.setConfig);
+    const setWidth = useHeatmapConfigStore((state) => state.setWidth);
     const visualizerRef = useRef(null);
     const iframeRef = useRef(null);
     const eventsRef = useRef([]);
@@ -1045,14 +1205,14 @@ const useReplayRender = () => {
         visualizer.setup(iframe.contentWindow, {
             version: envelope.version,
             onresize: (width) => {
-                setConfig({ width });
+                setWidth(width);
             },
             mobile,
             vNext: true,
             locale: 'en-us',
         });
         return visualizer;
-    }, [setConfig]);
+    }, [setWidth]);
     // Animation loop for replay
     const replayLoop = useCallback(() => {
         if (!isPlayingRef.current)
@@ -1186,8 +1346,7 @@ const useContainerDimensions = (props) => {
 };
 
 const useContentDimensions = ({ iframeRef, }) => {
-    const config = useHeatmapDataStore((state) => state.config);
-    const contentWidth = config?.width ?? 0;
+    const contentWidth = useHeatmapConfigStore((state) => state.width);
     useEffect(() => {
         if (!contentWidth)
             return;
@@ -1199,9 +1358,7 @@ const useContentDimensions = ({ iframeRef, }) => {
 };
 
 const useIframeHeight = (props) => {
-    const { iframeRef } = props;
-    const iframeHeight = useHeatmapVizStore((state) => state.iframeHeight);
-    const setIframeHeight = useHeatmapVizStore((state) => state.setIframeHeight);
+    const { iframeRef, setIframeHeight } = props;
     const isRenderViz = useHeatmapVizStore((state) => state.isRenderViz);
     const resizeObserverRef = useRef(null);
     const mutationObserverRef = useRef(null);
@@ -1279,7 +1436,7 @@ const useIframeHeight = (props) => {
             iframe.removeEventListener('load', setupObservers);
         };
     }, [iframeRef, isRenderViz, updateIframeHeight]);
-    return { iframeHeight };
+    return {};
 };
 
 const useScaleCalculation = (props) => {
@@ -1318,14 +1475,13 @@ const useScrollSync = ({ iframeRef }) => {
 };
 
 const useHeatmapScale = (props) => {
-    // const iframeHeight = useHeatmapVizStore((state) => state.iframeHeight);
-    const { wrapperRef, iframeRef, visualRef } = props;
+    const { wrapperRef, iframeRef, iframeHeight, setIframeHeight } = props;
     // 1. Observe container dimensions
     const { containerWidth, containerHeight } = useContainerDimensions({ wrapperRef });
     // 2. Get content dimensions from config
     const { contentWidth } = useContentDimensions({ iframeRef });
     // 3. Observe iframe height (now reacts to width changes)
-    const { iframeHeight } = useIframeHeight({ iframeRef });
+    useIframeHeight({ iframeRef, setIframeHeight });
     // 4. Calculate scale
     const { scale } = useScaleCalculation({ containerWidth, contentWidth });
     // 5. Setup scroll sync
@@ -1333,13 +1489,81 @@ const useHeatmapScale = (props) => {
     return {
         containerWidth,
         containerHeight,
-        iframeHeight,
         scaledWidth: contentWidth * scale,
         scaledHeight: iframeHeight * scale,
         handleScroll,
     };
 };
 
+const useWrapperRefHeight = (props) => {
+    const { isActive, wrapperRef, setWrapperHeight } = props;
+    const isRenderViz = useHeatmapVizStore((state) => state.isRenderViz);
+    const resizeObserverRef = useRef(null);
+    const mutationObserverRef = useRef(null);
+    const updateWrapperHeight = useCallback(() => {
+        const wrapper = wrapperRef.current;
+        if (!wrapper)
+            return;
+        try {
+            const wrapperHeight = wrapper.offsetHeight;
+            if (wrapperHeight > 0) {
+                setWrapperHeight?.(wrapperHeight);
+            }
+        }
+        catch (error) {
+            console.warn('Cannot measure iframe content:', error);
+        }
+    }, [wrapperRef, setWrapperHeight]);
+    useEffect(() => {
+        const wrapper = wrapperRef.current;
+        if (!wrapper || !isRenderViz)
+            return;
+        const setupObservers = () => {
+            try {
+                // Cleanup existing observers
+                if (resizeObserverRef.current) {
+                    resizeObserverRef.current.disconnect();
+                }
+                if (mutationObserverRef.current) {
+                    mutationObserverRef.current.disconnect();
+                }
+                // ResizeObserver for size changes
+                if (typeof window.ResizeObserver !== 'undefined') {
+                    resizeObserverRef.current = new ResizeObserver(updateWrapperHeight);
+                    resizeObserverRef.current.observe(wrapper);
+                }
+                // MutationObserver for DOM changes
+                if (typeof window.MutationObserver !== 'undefined') {
+                    mutationObserverRef.current = new MutationObserver(updateWrapperHeight);
+                    mutationObserverRef.current.observe(wrapper, {
+                        childList: true,
+                        subtree: true,
+                        attributes: true,
+                        characterData: true,
+                    });
+                }
+                // Initial measurement
+                updateWrapperHeight();
+            }
+            catch (error) {
+                console.warn('Cannot access wrapper content:', error);
+            }
+        };
+        if (isActive) {
+            setupObservers();
+        }
+        return () => {
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.disconnect();
+            }
+            if (mutationObserverRef.current) {
+                mutationObserverRef.current.disconnect();
+            }
+        };
+    }, [wrapperRef, isRenderViz, updateWrapperHeight, isActive]);
+    return {};
+};
+
 const BoxStack = forwardRef(({ children, ...props }, ref) => {
     const id = props.id;
     const flexDirection = props.flexDirection;
@@ -1385,9 +1609,42 @@ const BoxStack = forwardRef(({ children, ...props }, ref) => {
 
 const ContentTopBar = () => {
     const controls = useHeatmapControlStore((state) => state.controls);
+    const TopBar = controls.TopBar;
     return (jsx(BoxStack, { id: "gx-hm-content-header", flexDirection: "row", alignItems: "center", overflow: "auto", zIndex: 1, backgroundColor: "white", style: {
             borderBottom: `${HEATMAP_CONFIG.borderWidth}px solid ${HEATMAP_CONFIG.borderColor}`,
-        }, children: controls.TopBar ?? null }));
+        }, children: TopBar && jsx(TopBar, {}) }));
+};
+
+const ContentMetricBar = () => {
+    const controls = useHeatmapControlStore((state) => state.controls);
+    return (jsx(BoxStack, { id: "gx-hm-content-metric-bar", flexDirection: "row", alignItems: "center", overflow: "auto", zIndex: 1, backgroundColor: "white", 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: {
+            zIndex: 2,
+            position: 'absolute',
+            bottom: 0,
+            left: '8px',
+            right: '24px',
+            padding: '8px',
+            paddingBlock: '16px',
+        }, children: controls.Toolbar ?? null }));
+};
+
+const VizContainer = ({ children, setWrapperHeight }) => {
+    const wrapperRef = useRef(null);
+    useWrapperRefHeight({
+        isActive: !!setWrapperHeight,
+        wrapperRef,
+        setWrapperHeight,
+    });
+    return (jsx(BoxStack, { ref: wrapperRef, id: "gx-hm-viz-container", flexDirection: "column", flex: "1 1 auto", overflow: "auto", zIndex: 1, children: jsx(BoxStack, { id: "gx-hm-content", flexDirection: "column", flex: "1 1 auto", overflow: "hidden", style: {
+                minWidth: '394px',
+            }, children: children }) }));
 };
 
 const useClickmap = () => {
@@ -1411,15 +1668,16 @@ const useScrollmap = () => {
     return {};
 };
 
-const useHeatmapVizCanvas = ({ type }) => {
+const useHeatmapVizCanvas = () => {
+    const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
     const heatmapRender = useMemo(() => {
-        switch (type) {
+        switch (heatmapType) {
             case IHeatmapType.Click:
                 return useClickmap;
             case IHeatmapType.Scroll:
                 return useScrollmap;
         }
-    }, [type]);
+    }, [heatmapType]);
     return heatmapRender?.();
 };
 
@@ -1611,57 +1869,59 @@ const VizElements = ({ iframeRef, visualRef, wrapperRef }) => {
         } }));
 };
 
-const ReplayControls = () => {
-    const replayResult = useReplayRender();
-    return (jsxs("div", { style: {
-            position: 'absolute',
-            bottom: 20,
-            left: '50%',
-            transform: 'translateX(-50%)',
+const WrapperVisual = ({ children, visualRef, wrapperRef, scaledHeight, iframeHeight, onScroll, }) => {
+    const contentWidth = useHeatmapConfigStore((state) => state.width);
+    const widthScale = useHeatmapVizStore((state) => state.scale);
+    const contentHeight = scaledHeight > 0
+        ? `${scaledHeight + HEATMAP_CONFIG['heightToolbar'] + HEATMAP_CONFIG['padding'] * 2}px`
+        : 'auto';
+    return (jsx("div", { ref: visualRef, className: "gx-hm-visual", onScroll: onScroll, style: {
+            overflow: 'hidden auto',
             display: 'flex',
-            gap: 10,
-            backgroundColor: 'rgba(0, 0, 0, 0.7)',
-            padding: '10px 20px',
-            borderRadius: 8,
-        }, children: [jsx("button", { onClick: replayResult.play, style: {
-                    padding: '8px 16px',
-                    backgroundColor: '#4CAF50',
-                    color: 'white',
-                    border: 'none',
-                    borderRadius: 4,
-                    cursor: 'pointer',
-                }, children: "Play" }), jsx("button", { onClick: replayResult.pause, style: {
-                    padding: '8px 16px',
-                    backgroundColor: '#f44336',
-                    color: 'white',
-                    border: 'none',
-                    borderRadius: 4,
-                    cursor: 'pointer',
-                }, children: "Pause" })] }));
+            position: 'relative',
+            justifyContent: 'center',
+            flex: 1,
+            // 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: contentHeight,
+                padding: HEATMAP_STYLE['wrapper']['padding'],
+                paddingBottom: HEATMAP_STYLE['viz']['paddingBottom'],
+                background: HEATMAP_STYLE['viz']['background'],
+            }, children: jsx("div", { className: "gx-hm-wrapper", ref: wrapperRef, style: {
+                    width: contentWidth,
+                    height: iframeHeight,
+                    transform: `scale(${widthScale})`,
+                    transformOrigin: 'top center',
+                    paddingBlockEnd: '0',
+                }, children: children }) }) }));
 };
 
 const VizDomRenderer = ({ mode = 'heatmap' }) => {
-    const config = useHeatmapDataStore((state) => state.config);
+    const width = useHeatmapConfigStore((state) => state.width);
+    const iframeHeight = useHeatmapVizStore((state) => state.iframeHeight);
     const setIframeHeight = useHeatmapVizStore((state) => state.setIframeHeight);
-    const widthScale = useHeatmapVizStore((state) => state.scale);
     const setSelectedElement = useHeatmapInteractionStore((state) => state.setSelectedElement);
     const wrapperRef = useRef(null);
     const visualRef = useRef(null);
     const { iframeRef } = useHeatmapVizRender(mode);
-    const { iframeHeight, scaledHeight, handleScroll } = useHeatmapScale({
+    const { scaledHeight, handleScroll } = useHeatmapScale({
         wrapperRef,
         iframeRef,
         visualRef,
+        iframeHeight,
+        setIframeHeight,
     });
-    const contentWidth = config?.width ?? 0;
-    const contentHeight = scaledHeight > 0
-        ? `${scaledHeight + HEATMAP_CONFIG['heightToolbar'] + HEATMAP_CONFIG['padding'] * 2}px`
-        : 'auto';
+    const contentWidth = width ?? 0;
     const onScroll = (e) => {
         const scrollTop = e.currentTarget.scrollTop;
         handleScroll(scrollTop);
     };
-    useHeatmapVizCanvas({ type: config?.heatmapType });
+    useHeatmapVizCanvas();
     const cleanUp = () => {
         setIframeHeight(0);
         setSelectedElement(null);
@@ -1669,68 +1929,82 @@ const VizDomRenderer = ({ mode = 'heatmap' }) => {
     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,
-            // 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: contentHeight,
-                    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(${widthScale})`,
-                        transformOrigin: 'top center',
-                        paddingBlockEnd: '0',
-                    }, children: [jsx(VizElements, { iframeRef: iframeRef, visualRef: visualRef, wrapperRef: wrapperRef }), jsx("iframe", { ref: iframeRef, ...HEATMAP_IFRAME, width: contentWidth, height: iframeHeight, scrolling: "no" })] }) }), mode === 'replay' && jsx(ReplayControls, {})] }));
-};
-
-const VizDomContainer = () => {
+    return (jsxs(WrapperVisual, { visualRef: visualRef, wrapperRef: wrapperRef, scaledHeight: scaledHeight, onScroll: onScroll, iframeHeight: iframeHeight, children: [jsx(VizElements, { iframeRef: iframeRef, visualRef: visualRef, wrapperRef: wrapperRef }), jsx("iframe", { ref: iframeRef, ...HEATMAP_IFRAME, width: contentWidth, height: iframeHeight, scrolling: "no" })] }));
+};
+
+const VizLoading = () => {
+    return (jsxs("div", { className: "gx-hm-loading", children: [jsx("div", { className: "gx-hm-loading--spinner" }), jsx("p", { className: "gx-hm-loading--text", children: "Loading visualization..." })] }));
+};
+
+const VizDomHeatmap = () => {
     const controls = useHeatmapControlStore((state) => state.controls);
     const isRendering = useHeatmapDataStore((state) => state.isRendering);
     const iframeHeight = useHeatmapVizStore((state) => state.iframeHeight);
+    const setIframeHeight = useHeatmapVizStore((state) => state.setIframeHeight);
+    const setVizRef = useHeatmapVizStore((state) => state.setVizRef);
+    useEffect(() => {
+        return () => {
+            setVizRef(undefined);
+            setIframeHeight(0);
+        };
+    }, []);
     if (isRendering)
         return controls.VizLoading ?? null;
-    return (jsx(BoxStack, { id: "gx-hm-viz-container", flexDirection: "column", flex: "1 1 auto", overflow: "auto", zIndex: 1, children: jsxs(BoxStack, { id: "gx-hm-content", flexDirection: "column", flex: "1 1 auto", overflow: "hidden", style: {
-                minWidth: '394px',
-            }, children: [jsx(VizDomRenderer, {}), iframeHeight === 0 && (jsxs("div", { className: "gx-hm-loading", children: [jsx("div", { className: "gx-hm-loading--spinner" }), jsx("p", { className: "gx-hm-loading--text", children: "Loading visualization..." })] }))] }) }));
+    return (jsxs(VizContainer, { children: [jsx(VizDomRenderer, {}), iframeHeight === 0 && jsx(VizLoading, {})] }));
 };
 
-const ContentMetricBar = () => {
-    const controls = useHeatmapControlStore((state) => state.controls);
-    return (jsx(BoxStack, { id: "gx-hm-content-metric-bar", flexDirection: "row", alignItems: "center", overflow: "auto", zIndex: 1, backgroundColor: "white", style: {
-            borderBottom: `${HEATMAP_CONFIG.borderWidth}px solid ${HEATMAP_CONFIG.borderColor}`,
-        }, children: controls.MetricBar ?? null }));
+const VizLiveRenderer = () => {
+    const contentWidth = useHeatmapConfigStore((state) => state.width);
+    const iframeHeight = useHeatmapLiveStore((state) => state.iframeHeight);
+    const setIframeHeight = useHeatmapLiveStore((state) => state.setIframeHeight);
+    const visualRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const { iframeRef } = useIframeRender();
+    const { scaledHeight, handleScroll } = useHeatmapScale({
+        wrapperRef,
+        iframeRef,
+        visualRef,
+        iframeHeight,
+        setIframeHeight,
+    });
+    const onScroll = (e) => {
+        const scrollTop = e.currentTarget.scrollTop;
+        handleScroll(scrollTop);
+    };
+    return (jsx(WrapperVisual, { visualRef: visualRef, wrapperRef: wrapperRef, scaledHeight: scaledHeight, iframeHeight: iframeHeight, onScroll: onScroll, children: jsx("iframe", { ref: iframeRef, ...HEATMAP_IFRAME, width: contentWidth, height: iframeHeight, scrolling: "no", sandbox: "allow-scripts allow-same-origin" }) }));
 };
 
-const ContentToolbar = () => {
+const VizLiveHeatmap = () => {
     const controls = useHeatmapControlStore((state) => state.controls);
-    return (jsx("div", { id: "gx-hm-content-toolbar", style: {
-            zIndex: 2,
-            position: 'absolute',
-            bottom: 0,
-            left: '8px',
-            right: '24px',
-            padding: '8px',
-            paddingBlock: '16px',
-        }, children: controls.Toolbar ?? null }));
+    const isRendering = useHeatmapDataStore((state) => state.isRendering);
+    const iframeHeight = useHeatmapVizStore((state) => state.iframeHeight);
+    const wrapperHeight = useHeatmapLiveStore((state) => state.wrapperHeight);
+    const setWrapperHeight = useHeatmapLiveStore((state) => state.setWrapperHeight);
+    const reset = useHeatmapLiveStore((state) => state.reset);
+    useEffect(() => {
+        return () => {
+            reset();
+        };
+    }, [reset]);
+    if (isRendering)
+        return controls.VizLoading ?? null;
+    return (jsxs(VizContainer, { setWrapperHeight: setWrapperHeight, children: [jsx(VizLiveRenderer, {}), (!iframeHeight || !wrapperHeight) && jsx(VizLoading, {})] }));
+};
+
+const ContentVizByMode = () => {
+    const mode = useHeatmapConfigStore((state) => state.mode);
+    switch (mode) {
+        case 'live':
+            return jsx(VizLiveHeatmap, {});
+        default:
+            return jsx(VizDomHeatmap, {});
+    }
 };
 
 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;
+    const sidebarWidth = useHeatmapConfigStore((state) => state.sidebarWidth);
     if (isHideSidebar) {
         return null;
     }
@@ -1753,7 +2027,7 @@ const LeftSidebar = () => {
 };
 
 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, {})] })] }));
+    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(ContentVizByMode, {}), jsx(ContentToolbar, {})] })] }));
 };
 
 const WrapperLayout = () => {
@@ -1778,22 +2052,4 @@ const HeatmapLayout = ({ data, clickmap, controls, dataInfo, }) => {
     }
 };
 
-var PanelContent;
-(function (PanelContent) {
-    PanelContent["Sessions"] = "Sessions";
-    PanelContent["Timeline"] = "Timeline";
-    PanelContent["Area"] = "Area";
-    PanelContent["Click"] = "Click";
-    PanelContent["Scroll"] = "Scroll";
-    PanelContent["Attention"] = "Attention";
-})(PanelContent || (PanelContent = {}));
-var ErrorType;
-(function (ErrorType) {
-    ErrorType["NoResults"] = "NoResults";
-    ErrorType["NoClicks"] = "NoClicks";
-    ErrorType["NoScroll"] = "NoScroll";
-    ErrorType["ServerError"] = "ServerError";
-    ErrorType["DataError"] = "DataError";
-})(ErrorType || (ErrorType = {}));
-
-export { GraphView, HeatmapLayout, IHeatmapType, useHeatmapDataStore, useHeatmapInteractionStore };
+export { GraphView, HeatmapLayout, IHeatmapType, useHeatmapConfigStore, useHeatmapDataStore, useHeatmapInteractionStore, useHeatmapLiveStore };