@gemx-dev/heatmap-react 3.5.47 → 3.5.49

package/dist/esm/index.mjs

@@ -1,7 +1,7 @@
 "use client"
 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 { useEffect, createContext, useContext, 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';
@@ -71,11 +71,11 @@ const useHeatmapControlStore = create()((set, get) => {
     return {
         controls: {
             Sidebar: null,
-            TopBar: null,
             Toolbar: null,
             MetricBar: null,
             VizLoading: null,
-            ElementCallout: null,
+            TopBar: undefined,
+            ElementCallout: undefined,
         },
         registerControl: (key, control) => {
             set({
@@ -117,6 +117,7 @@ const useHeatmapConfigStore = create()((set, get) => {
         heatmapType: IHeatmapType.Scroll,
         clickType: IClickType.Total,
         scrollType: IScrollType.Depth,
+        isRendering: true,
         setMode: (mode) => set({ mode }),
         resetMode: () => set({ mode: 'single' }),
         setWidth: (width) => set({ width }),
@@ -124,21 +125,57 @@ const useHeatmapConfigStore = create()((set, get) => {
         setHeatmapType: (heatmapType) => set({ heatmapType }),
         setClickType: (clickType) => set({ clickType }),
         setScrollType: (scrollType) => set({ scrollType }),
+        setIsRendering: (isRendering) => set({ isRendering }),
     };
 });
 
+const DEFAULT_VIEW_ID$2 = 'default';
 const useHeatmapDataStore = create()((set, get) => {
     return {
-        data: undefined,
-        clickmap: undefined,
-        dataInfo: undefined,
-        scrollmap: undefined,
-        isRendering: true,
-        setIsRendering: (isRendering) => set({ isRendering }),
-        setDataInfo: (dataInfo) => set({ dataInfo }),
-        setData: (data) => set({ data }),
-        setClickmap: (clickmap) => set({ clickmap }),
-        setScrollmap: (scrollmap) => set({ scrollmap }),
+        data: { [DEFAULT_VIEW_ID$2]: undefined },
+        clickmap: { [DEFAULT_VIEW_ID$2]: undefined },
+        dataInfo: { [DEFAULT_VIEW_ID$2]: undefined },
+        scrollmap: { [DEFAULT_VIEW_ID$2]: undefined },
+        setDataInfo: (dataInfo, viewId = DEFAULT_VIEW_ID$2) => set((state) => ({
+            dataInfo: { ...state.dataInfo, [viewId]: dataInfo },
+        })),
+        setData: (data, viewId = DEFAULT_VIEW_ID$2) => set((state) => ({
+            data: { ...state.data, [viewId]: data },
+        })),
+        setClickmap: (clickmap, viewId = DEFAULT_VIEW_ID$2) => set((state) => ({
+            clickmap: { ...state.clickmap, [viewId]: clickmap },
+        })),
+        setScrollmap: (scrollmap, viewId = DEFAULT_VIEW_ID$2) => set((state) => ({
+            scrollmap: { ...state.scrollmap, [viewId]: scrollmap },
+        })),
+        copyView: (fromViewId, toViewId) => set((state) => ({
+            data: { ...state.data, [toViewId]: state.data[fromViewId] },
+            clickmap: { ...state.clickmap, [toViewId]: state.clickmap[fromViewId] },
+            dataInfo: { ...state.dataInfo, [toViewId]: state.dataInfo[fromViewId] },
+            scrollmap: { ...state.scrollmap, [toViewId]: state.scrollmap[fromViewId] },
+        })),
+        clearView: (viewId) => set((state) => {
+            const newData = { ...state.data };
+            const newClickmap = { ...state.clickmap };
+            const newDataInfo = { ...state.dataInfo };
+            const newScrollmap = { ...state.scrollmap };
+            delete newData[viewId];
+            delete newClickmap[viewId];
+            delete newDataInfo[viewId];
+            delete newScrollmap[viewId];
+            return {
+                data: newData,
+                clickmap: newClickmap,
+                dataInfo: newDataInfo,
+                scrollmap: newScrollmap,
+            };
+        }),
+        resetAll: () => set({
+            data: { [DEFAULT_VIEW_ID$2]: undefined },
+            clickmap: { [DEFAULT_VIEW_ID$2]: undefined },
+            dataInfo: { [DEFAULT_VIEW_ID$2]: undefined },
+            scrollmap: { [DEFAULT_VIEW_ID$2]: undefined },
+        }),
     };
 });
 
@@ -157,12 +194,62 @@ const useHeatmapInteractionStore = create()((set, get) => {
     };
 });
 
+const DEFAULT_VIEW_ID$1 = 'default';
 const useHeatmapVizStore = create()((set, get) => {
     return {
-        isRenderViz: false,
-        setIsRenderViz: (isRenderViz) => set({ isRenderViz }),
-        scale: 1,
-        setScale: (scale) => set({ scale }),
+        isRenderViz: { [DEFAULT_VIEW_ID$1]: false },
+        zoomRatio: { [DEFAULT_VIEW_ID$1]: 100 },
+        minZoomRatio: { [DEFAULT_VIEW_ID$1]: 10 },
+        scale: { [DEFAULT_VIEW_ID$1]: 1 },
+        isScaledToFit: { [DEFAULT_VIEW_ID$1]: false },
+        setIsRenderViz: (isRenderViz, viewId = DEFAULT_VIEW_ID$1) => set((state) => ({
+            isRenderViz: { ...state.isRenderViz, [viewId]: isRenderViz },
+        })),
+        setZoomRatio: (zoomRatio, viewId = DEFAULT_VIEW_ID$1) => set((state) => ({
+            zoomRatio: { ...state.zoomRatio, [viewId]: zoomRatio },
+        })),
+        setMinZoomRatio: (minZoomRatio, viewId = DEFAULT_VIEW_ID$1) => set((state) => ({
+            minZoomRatio: { ...state.minZoomRatio, [viewId]: minZoomRatio },
+        })),
+        setScale: (scale, viewId = DEFAULT_VIEW_ID$1) => set((state) => ({
+            scale: { ...state.scale, [viewId]: scale },
+        })),
+        setIsScaledToFit: (isScaledToFit, viewId = DEFAULT_VIEW_ID$1) => set((state) => ({
+            isScaledToFit: { ...state.isScaledToFit, [viewId]: isScaledToFit },
+        })),
+        copyView: (fromViewId, toViewId) => set((state) => ({
+            isRenderViz: { ...state.isRenderViz, [toViewId]: state.isRenderViz[fromViewId] ?? false },
+            zoomRatio: { ...state.zoomRatio, [toViewId]: state.zoomRatio[fromViewId] ?? 100 },
+            minZoomRatio: { ...state.minZoomRatio, [toViewId]: state.minZoomRatio[fromViewId] ?? 10 },
+            scale: { ...state.scale, [toViewId]: state.scale[fromViewId] ?? 1 },
+            isScaledToFit: { ...state.isScaledToFit, [toViewId]: state.isScaledToFit[fromViewId] ?? false },
+        })),
+        clearView: (viewId) => set((state) => {
+            const newIsRenderViz = { ...state.isRenderViz };
+            const newZoomRatio = { ...state.zoomRatio };
+            const newMinZoomRatio = { ...state.minZoomRatio };
+            const newScale = { ...state.scale };
+            const newIsScaledToFit = { ...state.isScaledToFit };
+            delete newIsRenderViz[viewId];
+            delete newZoomRatio[viewId];
+            delete newMinZoomRatio[viewId];
+            delete newScale[viewId];
+            delete newIsScaledToFit[viewId];
+            return {
+                isRenderViz: newIsRenderViz,
+                zoomRatio: newZoomRatio,
+                minZoomRatio: newMinZoomRatio,
+                scale: newScale,
+                isScaledToFit: newIsScaledToFit,
+            };
+        }),
+        resetAll: () => set({
+            isRenderViz: { [DEFAULT_VIEW_ID$1]: false },
+            zoomRatio: { [DEFAULT_VIEW_ID$1]: 100 },
+            minZoomRatio: { [DEFAULT_VIEW_ID$1]: 10 },
+            scale: { [DEFAULT_VIEW_ID$1]: 1 },
+            isScaledToFit: { [DEFAULT_VIEW_ID$1]: false },
+        }),
     };
 });
 
@@ -180,8 +267,6 @@ const useHeatmapVizScrollmapStore = create()((set, get) => {
 const initialState = {
     payloads: [],
     htmlContent: '',
-    wrapperHeight: 0,
-    iframeHeight: 0,
 };
 const useHeatmapLiveStore = create()((set, get) => {
     return {
@@ -190,17 +275,179 @@ const useHeatmapLiveStore = create()((set, get) => {
         setPayloads: (payloads) => set({ payloads }),
         addPayload: (payload) => set((state) => ({ payloads: [...state.payloads, payload] })),
         setHtmlContent: (htmlContent) => set({ htmlContent }),
-        setWrapperHeight: (wrapperHeight) => set({ wrapperHeight }),
-        setIframeHeight: (iframeHeight) => set({ iframeHeight }),
     };
 });
 
+const DEFAULT_VIEW_ID = 'default';
 const useHeatmapSingleStore = create()((set, get) => {
     return {
-        vizRef: null,
-        iframeHeight: 0,
-        setVizRef: (vizRef) => set({ vizRef }),
-        setIframeHeight: (iframeHeight) => set({ iframeHeight }),
+        vizRef: { [DEFAULT_VIEW_ID]: null },
+        iframeHeight: { [DEFAULT_VIEW_ID]: 0 },
+        wrapperHeight: { [DEFAULT_VIEW_ID]: 0 },
+        setVizRef: (vizRef, viewId = DEFAULT_VIEW_ID) => set((state) => ({
+            vizRef: { ...state.vizRef, [viewId]: vizRef },
+        })),
+        setIframeHeight: (iframeHeight, viewId = DEFAULT_VIEW_ID) => {
+            set((state) => ({
+                iframeHeight: { ...state.iframeHeight, [viewId]: iframeHeight },
+            }));
+        },
+        setWrapperHeight: (wrapperHeight, viewId = DEFAULT_VIEW_ID) => {
+            set((state) => ({
+                wrapperHeight: { ...state.wrapperHeight, [viewId]: wrapperHeight },
+            }));
+        },
+        copyView: (fromViewId, toViewId) => set((state) => ({
+            // Don't copy vizRef - each view needs its own visualizer instance
+            iframeHeight: { ...state.iframeHeight, [toViewId]: state.iframeHeight[fromViewId] ?? 0 },
+            wrapperHeight: { ...state.wrapperHeight, [toViewId]: state.wrapperHeight[fromViewId] ?? 0 },
+        })),
+        clearView: (viewId) => set((state) => {
+            const newVizRef = { ...state.vizRef };
+            const newIframeHeight = { ...state.iframeHeight };
+            const newWrapperHeight = { ...state.wrapperHeight };
+            delete newVizRef[viewId];
+            delete newIframeHeight[viewId];
+            delete newWrapperHeight[viewId];
+            return {
+                vizRef: newVizRef,
+                iframeHeight: newIframeHeight,
+                wrapperHeight: newWrapperHeight,
+            };
+        }),
+        resetAll: () => set({
+            vizRef: { [DEFAULT_VIEW_ID]: null },
+            iframeHeight: { [DEFAULT_VIEW_ID]: 0 },
+            wrapperHeight: { [DEFAULT_VIEW_ID]: 0 },
+        }),
+    };
+});
+
+const createDefaultView = (id, label, options) => ({
+    id,
+    label,
+    heatmapType: options?.heatmapType ?? IHeatmapType.Scroll,
+    clickType: options?.clickType ?? IClickType.Total,
+    scrollType: options?.scrollType ?? IScrollType.Depth,
+    data: options?.data,
+    clickmap: undefined,
+    scrollmap: undefined,
+    dataInfo: undefined,
+    vizRef: null,
+    iframeHeight: 0,
+    zoomRatio: 100,
+    scale: 1,
+    isScaledToFit: false,
+    isRendering: true,
+    isRenderViz: false,
+});
+const useHeatmapCompareStore = create()((set, get) => {
+    return {
+        views: new Map(),
+        viewOrder: [],
+        layout: 'grid-2',
+        syncSettings: {
+            zoomRatio: false,
+            scrolling: false,
+            heatmapType: false,
+        },
+        viewIdCounter: 0,
+        addView: (options) => {
+            const state = get();
+            const viewId = `view-${state.viewIdCounter}`;
+            const label = options?.label ?? `Version ${state.viewOrder.length + 1}`;
+            const newView = createDefaultView(viewId, label, options);
+            const newViews = new Map(state.views);
+            newViews.set(viewId, newView);
+            set({
+                views: newViews,
+                viewOrder: [...state.viewOrder, viewId],
+                viewIdCounter: state.viewIdCounter + 1,
+            });
+            return viewId;
+        },
+        removeView: (viewId) => {
+            const state = get();
+            const newViews = new Map(state.views);
+            newViews.delete(viewId);
+            set({
+                views: newViews,
+                viewOrder: state.viewOrder.filter((id) => id !== viewId),
+            });
+        },
+        updateView: (viewId, updates) => {
+            const state = get();
+            const view = state.views.get(viewId);
+            if (!view)
+                return;
+            const newViews = new Map(state.views);
+            newViews.set(viewId, { ...view, ...updates });
+            set({ views: newViews });
+            // Handle syncing
+            const { syncSettings } = state;
+            if (syncSettings.zoomRatio && 'zoomRatio' in updates && updates.zoomRatio !== undefined) {
+                get().syncProperty('zoomRatio', updates.zoomRatio);
+            }
+            if (syncSettings.heatmapType &&
+                'heatmapType' in updates &&
+                updates.heatmapType !== undefined) {
+                get().syncProperty('heatmapType', updates.heatmapType);
+            }
+        },
+        getView: (viewId) => {
+            return get().views.get(viewId);
+        },
+        setLayout: (layout) => {
+            set({ layout });
+        },
+        setSyncSettings: (settings) => {
+            set({ syncSettings: { ...get().syncSettings, ...settings } });
+        },
+        initializeCompare: (count, options) => {
+            const viewIds = [];
+            const newViews = new Map();
+            for (let i = 0; i < count; i++) {
+                const viewId = `view-${i}`;
+                const label = options?.label ?? String.fromCharCode(65 + i); // A, B, C, D
+                newViews.set(viewId, createDefaultView(viewId, `Version ${label}`, options));
+                viewIds.push(viewId);
+            }
+            const layoutMap = {
+                2: 'grid-2',
+                3: 'grid-3',
+                4: 'grid-4',
+            };
+            set({
+                views: newViews,
+                viewOrder: viewIds,
+                layout: layoutMap[count],
+                viewIdCounter: count,
+            });
+        },
+        resetCompare: () => {
+            set({
+                views: new Map(),
+                viewOrder: [],
+                layout: 'grid-2',
+                viewIdCounter: 0,
+                syncSettings: {
+                    zoomRatio: false,
+                    scrolling: false,
+                    heatmapType: false,
+                },
+            });
+        },
+        syncProperty: (property, value) => {
+            const state = get();
+            const newViews = new Map(state.views);
+            state.viewOrder.forEach((viewId) => {
+                const view = newViews.get(viewId);
+                if (view) {
+                    newViews.set(viewId, { ...view, [property]: value });
+                }
+            });
+            set({ views: newViews });
+        },
     };
 });
 
@@ -209,7 +456,7 @@ const useRegisterConfig = () => {
     const width = useHeatmapConfigStore((state) => state.width);
     const sidebarWidth = useHeatmapConfigStore((state) => state.sidebarWidth);
     const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
-    const setIsRendering = useHeatmapDataStore((state) => state.setIsRendering);
+    const setIsRendering = useHeatmapConfigStore((state) => state.setIsRendering);
     useEffect(() => {
         setIsRendering(true);
         setTimeout(() => {
@@ -228,10 +475,54 @@ const useRegisterControl = (control) => {
     registerControl('ElementCallout', control.ElementCallout);
 };
 
-const useRegisterData = (data, dataInfo) => {
+/**
+ * Context to provide viewId to components
+ * Used in compare mode to isolate data between views
+ */
+const ViewIdContext = createContext(undefined);
+/**
+ * Hook to get current viewId
+ * Returns 'default' if not in a ViewIdContext (single mode)
+ */
+const useViewId = () => {
+    const viewId = useContext(ViewIdContext);
+    return viewId || 'default';
+};
+/**
+ * Hook to check if currently in compare mode
+ */
+const useIsCompareMode = () => {
+    const viewId = useContext(ViewIdContext);
+    return viewId !== undefined && viewId !== 'default';
+};
+
+const useHeatmapData = (props) => {
+    const viewId = props?.viewId || useViewId();
+    const data = useHeatmapDataStore((state) => state.data[viewId]);
+    const clickmap = useHeatmapDataStore((state) => state.clickmap[viewId]);
+    const scrollmap = useHeatmapDataStore((state) => state.scrollmap[viewId]);
+    const dataInfo = useHeatmapDataStore((state) => state.dataInfo[viewId]);
     const setData = useHeatmapDataStore((state) => state.setData);
-    const setIsRendering = useHeatmapDataStore((state) => state.setIsRendering);
+    const setClickmap = useHeatmapDataStore((state) => state.setClickmap);
+    const setScrollmap = useHeatmapDataStore((state) => state.setScrollmap);
     const setDataInfo = useHeatmapDataStore((state) => state.setDataInfo);
+    return {
+        // Data
+        data,
+        clickmap,
+        scrollmap,
+        dataInfo,
+        // Setters (auto-inject viewId)
+        setData: (newData) => setData(newData, viewId),
+        setClickmap: (newClickmap) => setClickmap(newClickmap, viewId),
+        setScrollmap: (newScrollmap) => setScrollmap(newScrollmap, viewId),
+        setDataInfo: (newDataInfo) => setDataInfo(newDataInfo, viewId),
+    };
+};
+
+const useRegisterData = (data, dataInfo) => {
+    const setIsRendering = useHeatmapConfigStore((state) => state.setIsRendering);
+    const { setData, setDataInfo } = useHeatmapData();
     const handleSetData = useCallback((data) => {
         if (!data)
             return;
@@ -252,8 +543,7 @@ const useRegisterData = (data, dataInfo) => {
 };
 
 const useRegisterHeatmap = ({ clickmap, scrollmap }) => {
-    const setClickmap = useHeatmapDataStore((state) => state.setClickmap);
-    const setScrollmap = useHeatmapDataStore((state) => state.setScrollmap);
+    const { setClickmap, setScrollmap } = useHeatmapData();
     const handleSetClickmap = useCallback((clickmap) => {
         if (!clickmap)
             return;
@@ -1127,6 +1417,48 @@ function initIframeHelperFixer(config) {
     return fixer;
 }
 
+const useHeatmapViz = (props) => {
+    const viewId = props?.viewId || useViewId();
+    // Viz store
+    const isRenderViz = useHeatmapVizStore((state) => state.isRenderViz[viewId] ?? false);
+    const zoomRatio = useHeatmapVizStore((state) => state.zoomRatio[viewId] ?? 100);
+    const minZoomRatio = useHeatmapVizStore((state) => state.minZoomRatio[viewId] ?? 10);
+    const widthScale = useHeatmapVizStore((state) => state.scale[viewId] ?? 1);
+    const isScaledToFit = useHeatmapVizStore((state) => state.isScaledToFit[viewId] ?? false);
+    const setIsRenderViz = useHeatmapVizStore((state) => state.setIsRenderViz);
+    const setZoomRatio = useHeatmapVizStore((state) => state.setZoomRatio);
+    const setMinZoomRatio = useHeatmapVizStore((state) => state.setMinZoomRatio);
+    const setScale = useHeatmapVizStore((state) => state.setScale);
+    const setIsScaledToFit = useHeatmapVizStore((state) => state.setIsScaledToFit);
+    // Single store
+    const vizRef = useHeatmapSingleStore((state) => state.vizRef[viewId] ?? null);
+    const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight[viewId] ?? 0);
+    const wrapperHeight = useHeatmapSingleStore((state) => state.wrapperHeight[viewId] ?? 0);
+    const setVizRef = useHeatmapSingleStore((state) => state.setVizRef);
+    const setIframeHeight = useHeatmapSingleStore((state) => state.setIframeHeight);
+    const setWrapperHeight = useHeatmapSingleStore((state) => state.setWrapperHeight);
+    return {
+        // State
+        isRenderViz,
+        zoomRatio,
+        minZoomRatio,
+        widthScale,
+        isScaledToFit,
+        vizRef,
+        iframeHeight,
+        wrapperHeight,
+        // Setters (auto-inject viewId)
+        setIsRenderViz: (value) => setIsRenderViz(value, viewId),
+        setZoomRatio: (value) => setZoomRatio(value, viewId),
+        setMinZoomRatio: (value) => setMinZoomRatio(value, viewId),
+        setScale: (value) => setScale(value, viewId),
+        setIsScaledToFit: (value) => setIsScaledToFit(value, viewId),
+        setVizRef: (value) => setVizRef(value, viewId),
+        setIframeHeight: (value) => setIframeHeight(value, viewId),
+        setWrapperHeight: (value) => setWrapperHeight(value, viewId),
+    };
+};
+
 const scrollToElementIfNeeded = (visualRef, rect, scale) => {
     if (!visualRef.current)
         return;
@@ -1145,11 +1477,11 @@ const scrollToElementIfNeeded = (visualRef, rect, scale) => {
     });
 };
 const useClickedElement = ({ visualRef, getRect }) => {
-    const heatmapInfo = useHeatmapDataStore((state) => state.dataInfo);
     const selectedElement = useHeatmapInteractionStore((state) => state.selectedElement);
     const shouldShowCallout = useHeatmapInteractionStore((state) => state.shouldShowCallout);
     const setShouldShowCallout = useHeatmapInteractionStore((state) => state.setShouldShowCallout);
-    const scale = useHeatmapVizStore((state) => state.scale);
+    const { widthScale } = useHeatmapViz();
+    const { dataInfo } = useHeatmapData();
     const [clickedElement, setClickedElement] = useState(null);
     const [showMissingElement, setShowMissingElement] = useState(false);
     const reset = () => {
@@ -1158,11 +1490,11 @@ const useClickedElement = ({ visualRef, getRect }) => {
         setShouldShowCallout(false);
     };
     useEffect(() => {
-        if (!selectedElement || !heatmapInfo?.elementMapInfo) {
+        if (!selectedElement || !dataInfo?.elementMapInfo) {
             reset();
             return;
         }
-        const info = heatmapInfo.elementMapInfo[selectedElement];
+        const info = dataInfo.elementMapInfo[selectedElement];
         if (!info) {
             setClickedElement(null);
             return;
@@ -1170,7 +1502,7 @@ const useClickedElement = ({ visualRef, getRect }) => {
         const hash = selectedElement;
         const selector = info.selector;
         const rect = getRect({ hash: selectedElement, selector });
-        const elementInfo = buildElementInfo(hash, rect, heatmapInfo);
+        const elementInfo = buildElementInfo(hash, rect, dataInfo);
         if (!rect) {
             setClickedElement(elementInfo);
             setShowMissingElement(true);
@@ -1178,29 +1510,29 @@ const useClickedElement = ({ visualRef, getRect }) => {
             return;
         }
         setShowMissingElement(false);
-        scrollToElementIfNeeded(visualRef, rect, scale);
+        scrollToElementIfNeeded(visualRef, rect, widthScale);
         setShouldShowCallout(true);
         requestAnimationFrame(() => {
             setClickedElement(elementInfo);
         });
-    }, [selectedElement, heatmapInfo, getRect, visualRef, scale]);
+    }, [selectedElement, dataInfo, getRect, visualRef, widthScale]);
     return { clickedElement, showMissingElement, shouldShowCallout, setShouldShowCallout };
 };
 
 const useElementCalloutVisible = ({ visualRef, getRect }) => {
-    const scale = useHeatmapVizStore((state) => state.scale);
     const selectedElement = useHeatmapInteractionStore((state) => state.selectedElement);
-    const heatmapInfo = useHeatmapDataStore((state) => state.dataInfo);
     const setShouldShowCallout = useHeatmapInteractionStore((state) => state.setShouldShowCallout);
+    const { widthScale } = useHeatmapViz();
+    const { dataInfo } = useHeatmapData();
     useEffect(() => {
         if (!selectedElement)
             return;
         const elementIsInViewportFn = () => {
-            const elementInfo = heatmapInfo?.elementMapInfo?.[selectedElement];
+            const elementInfo = dataInfo?.elementMapInfo?.[selectedElement];
             if (!elementInfo)
                 return;
             const rect = getRect({ hash: selectedElement, selector: elementInfo.selector });
-            const isInViewport = isElementInViewport(rect, visualRef, scale);
+            const isInViewport = isElementInViewport(rect, visualRef, widthScale);
             setShouldShowCallout(isInViewport);
         };
         elementIsInViewportFn();
@@ -1215,7 +1547,7 @@ const useElementCalloutVisible = ({ visualRef, getRect }) => {
             window.removeEventListener('resize', handleUpdate);
             visualRef?.current?.removeEventListener('scroll', handleUpdate);
         };
-    }, [selectedElement, visualRef, getRect, scale, heatmapInfo, setShouldShowCallout]);
+    }, [selectedElement, visualRef, getRect, widthScale, dataInfo, setShouldShowCallout]);
     return {};
 };
 
@@ -1238,9 +1570,8 @@ const useHeatmapEffects = ({ isVisible, isElementSidebarOpen, setShouldShowCallo
 };
 
 const useHeatmapElementPosition = ({ iframeRef, wrapperRef, visualizer }) => {
-    const widthScale = useHeatmapVizStore((state) => state.scale);
-    const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
     const heatmapWidth = useHeatmapConfigStore((state) => state.width);
+    const { iframeHeight, widthScale } = useHeatmapViz();
     return useCallback((element) => {
         const hash = element?.hash;
         if (!iframeRef.current?.contentDocument || !hash || !visualizer)
@@ -1394,8 +1725,8 @@ const useHoveredElement = ({ iframeRef, getRect }) => {
     const hoveredElement = useHeatmapInteractionStore((state) => state.hoveredElement);
     const setHoveredElement = useHeatmapInteractionStore((state) => state.setHoveredElement);
     const onSelect = useHeatmapInteractionStore((state) => state.setSelectedElement);
-    const widthScale = useHeatmapVizStore((state) => state.scale);
-    const heatmapInfo = useHeatmapDataStore((state) => state.dataInfo);
+    const { widthScale } = useHeatmapViz();
+    const { dataInfo } = useHeatmapData();
     const reset = useCallback(() => {
         setHoveredElement(null);
     }, [setHoveredElement]);
@@ -1403,7 +1734,7 @@ const useHoveredElement = ({ iframeRef, getRect }) => {
         reset();
     }, [reset]);
     const getHashFromEvent = useCallback((event) => {
-        if (!heatmapInfo || !isIframeReady(iframeRef, heatmapInfo)) {
+        if (!dataInfo || !isIframeReady(iframeRef, dataInfo)) {
             reset();
             return;
         }
@@ -1411,8 +1742,8 @@ const useHoveredElement = ({ iframeRef, getRect }) => {
         const doc = iframe.contentDocument;
         const iframeRect = iframe.getBoundingClientRect();
         const { x, y } = convertViewportToIframeCoords(event.clientX, event.clientY, iframeRect, widthScale);
-        const targetElement = findTargetElement(doc, x, y, heatmapInfo);
-        if (!targetElement || !isValidElement(targetElement, heatmapInfo)) {
+        const targetElement = findTargetElement(doc, x, y, dataInfo);
+        if (!targetElement || !isValidElement(targetElement, dataInfo)) {
             reset();
             return;
         }
@@ -1421,9 +1752,9 @@ const useHoveredElement = ({ iframeRef, getRect }) => {
             return hash;
         reset();
         return;
-    }, [heatmapInfo, iframeRef, getRect, widthScale, reset]);
+    }, [dataInfo, iframeRef, getRect, widthScale, reset]);
     const handleMouseMove = useCallback(debounce((event) => {
-        if (!heatmapInfo) {
+        if (!dataInfo) {
             reset();
             return;
         }
@@ -1432,15 +1763,15 @@ const useHoveredElement = ({ iframeRef, getRect }) => {
             reset();
             return;
         }
-        const selector = heatmapInfo?.elementMapInfo?.[hash];
+        const selector = dataInfo?.elementMapInfo?.[hash];
         const rect = getRect({ hash, selector });
-        const elementInfo = buildElementInfo(hash, rect, heatmapInfo);
+        const elementInfo = buildElementInfo(hash, rect, dataInfo);
         if (!elementInfo) {
             reset();
             return;
         }
         setHoveredElement(elementInfo);
-    }, 16), [heatmapInfo, getRect, reset, getHashFromEvent]);
+    }, 16), [dataInfo, getRect, reset, getHashFromEvent]);
     const handleClick = useCallback(() => {
         if (!hoveredElement?.hash)
             return;
@@ -1556,11 +1887,9 @@ function useVizLiveIframeMsg(options = {}) {
 }
 
 function useVizLiveRender() {
-    const wrapperHeight = useHeatmapLiveStore((state) => state.wrapperHeight);
-    const setIframeHeight = useHeatmapLiveStore((state) => state.setIframeHeight);
+    const { setIframeHeight, wrapperHeight, setIsRenderViz } = useHeatmapViz();
     const contentWidth = useHeatmapConfigStore((state) => state.width);
     const htmlContent = useHeatmapLiveStore((state) => state.htmlContent);
-    const setIsRenderViz = useHeatmapVizStore((state) => state.setIsRenderViz);
     const { iframeRef, isReady } = useVizLiveIframeMsg();
     useEffect(() => {
         if (!htmlContent || !iframeRef.current)
@@ -1605,16 +1934,14 @@ function reset(iframe, rect, onSuccess) {
     fixer.enableNavigationBlocking();
 }
 
-let visualizer = new Visualizer();
 const useHeatmapRender = () => {
-    const data = useHeatmapDataStore((state) => state.data);
-    const setVizRef = useHeatmapSingleStore((state) => state.setVizRef);
-    const setIsRenderViz = useHeatmapVizStore((state) => state.setIsRenderViz);
-    const setIframeHeight = useHeatmapSingleStore((state) => state.setIframeHeight);
+    const { data } = useHeatmapData();
+    const { vizRef, setVizRef, setIsRenderViz, setIframeHeight } = useHeatmapViz();
     const iframeRef = useRef(null);
     const renderHeatmap = useCallback(async (payloads) => {
         if (!payloads || payloads.length === 0)
             return;
+        const visualizer = vizRef || new Visualizer();
         setIsRenderViz(false);
         const iframe = iframeRef.current;
         if (!iframe?.contentWindow)
@@ -1665,8 +1992,8 @@ function sortEvents(a, b) {
 }
 
 const useReplayRender = () => {
-    const data = useHeatmapDataStore((state) => state.data);
     const setWidth = useHeatmapConfigStore((state) => state.setWidth);
+    const { data } = useHeatmapData();
     const visualizerRef = useRef(null);
     const iframeRef = useRef(null);
     const eventsRef = useRef([]);
@@ -1837,8 +2164,7 @@ const useContentDimensions = ({ iframeRef, }) => {
 };
 
 const useObserveIframeHeight = (props) => {
-    const { iframeRef, setIframeHeight } = props;
-    const isRenderViz = useHeatmapVizStore((state) => state.isRenderViz);
+    const { iframeRef, setIframeHeight, isRenderViz } = props;
     const resizeObserverRef = useRef(null);
     const mutationObserverRef = useRef(null);
     const debounceTimerRef = useRef(null);
@@ -1963,21 +2289,51 @@ const useObserveIframeHeight = (props) => {
 };
 
 const useScaleCalculation = (props) => {
-    const scale = useHeatmapVizStore((state) => state.scale);
-    const setScale = useHeatmapVizStore((state) => state.setScale);
-    const { containerWidth, contentWidth } = props;
-    useEffect(() => {
-        if (containerWidth > 0 && contentWidth > 0) {
+    const { widthScale, zoomRatio, isScaledToFit, minZoomRatio } = useHeatmapViz();
+    const { setScale, setIsScaledToFit, setMinZoomRatio } = useHeatmapViz();
+    const { containerWidth, containerHeight, contentWidth, contentHeight } = props;
+    const calculateScaleResult = useCallback(() => {
+        if (containerWidth > 0 && contentWidth > 0 && containerHeight > 0 && contentHeight > 0) {
+            // 1. Calculate widthScale (base scale from width)
             const availableWidth = containerWidth - HEATMAP_CONFIG['padding'] * 2;
-            const calculatedScale = Math.min(availableWidth / contentWidth, 1);
-            setScale(calculatedScale);
-        }
-    }, [containerWidth, contentWidth]);
-    return { scale };
+            const widthScale = Math.min(availableWidth / contentWidth, 1);
+            // 2. Calculate available height
+            const toolbarHeight = HEATMAP_CONFIG['heightToolbar'] ;
+            const paddingTotal = HEATMAP_CONFIG['padding'] * 2;
+            const availableHeight = containerHeight - toolbarHeight - paddingTotal; // 10px buffer to avoid scroll bar
+            // 3. Calculate minZoomRatio (zoom ratio minimum to fit iframe in container)
+            const roundedMinZoomRatio = (availableHeight / (contentHeight * widthScale)) * 100;
+            // Limit minZoomRatio to a reasonable range (10-100)
+            const finalMinZoomRatio = Math.max(10, Math.min(roundedMinZoomRatio, 100));
+            // 4. Apply zoom ratio (cannot be less than minZoomRatio)
+            const clampedZoomRatio = Math.max(zoomRatio, finalMinZoomRatio);
+            const zoomMultiplier = clampedZoomRatio / 100;
+            // 5. Calculate finalScale
+            const finalScale = widthScale * zoomMultiplier;
+            // 6. Check if it is currently fitted
+            const isCurrentlyFitted = zoomRatio <= finalMinZoomRatio;
+            // 7. Update store
+            setScale(finalScale);
+            setIsScaledToFit(isCurrentlyFitted);
+            setMinZoomRatio(finalMinZoomRatio);
+        }
+    }, [
+        containerWidth,
+        containerHeight,
+        contentWidth,
+        contentHeight,
+        zoomRatio,
+        setScale,
+        setIsScaledToFit,
+        setMinZoomRatio,
+    ]);
+    useEffect(() => {
+        calculateScaleResult();
+    }, [calculateScaleResult]);
+    return { widthScale, isScaledToFit, minZoomRatio };
 };
 
-const useScrollSync = ({ iframeRef }) => {
-    const widthScale = useHeatmapVizStore((state) => state.scale);
+const useScrollSync = ({ widthScale, iframeRef, }) => {
     const handleScroll = useCallback((scrollTop) => {
         const iframe = iframeRef.current;
         if (!iframe || widthScale <= 0)
@@ -1998,19 +2354,24 @@ const useScrollSync = ({ iframeRef }) => {
 };
 
 const useHeatmapScale = (props) => {
-    const { wrapperRef, iframeRef, iframeHeight, setIframeHeight } = props;
+    const { wrapperRef, iframeRef, iframeHeight, setIframeHeight, isRenderViz } = 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)
-    useObserveIframeHeight({ iframeRef, setIframeHeight });
+    useObserveIframeHeight({ iframeRef, setIframeHeight, isRenderViz });
     // 4. Calculate scale
-    const { scale } = useScaleCalculation({ containerWidth, contentWidth });
+    const { widthScale } = useScaleCalculation({
+        containerWidth,
+        containerHeight,
+        contentWidth,
+        contentHeight: iframeHeight,
+    });
     // 5. Setup scroll sync
-    const { handleScroll } = useScrollSync({ iframeRef });
-    const scaledHeight = iframeHeight * scale;
-    const scaledWidth = contentWidth * scale;
+    const { handleScroll } = useScrollSync({ widthScale, iframeRef });
+    const scaledHeight = iframeHeight * widthScale;
+    const scaledWidth = contentWidth * widthScale;
     return {
         containerWidth,
         containerHeight,
@@ -2021,10 +2382,10 @@ const useHeatmapScale = (props) => {
 };
 
 const useWrapperRefHeight = (props) => {
-    const { isActive, wrapperRef, setWrapperHeight } = props;
-    const isRenderViz = useHeatmapVizStore((state) => state.isRenderViz);
+    const { isActive, wrapperRef } = props;
     const resizeObserverRef = useRef(null);
     const mutationObserverRef = useRef(null);
+    const { isRenderViz, setWrapperHeight } = useHeatmapViz();
     const updateWrapperHeight = useCallback(() => {
         const wrapper = wrapperRef.current;
         if (!wrapper)
@@ -2032,13 +2393,13 @@ const useWrapperRefHeight = (props) => {
         try {
             const wrapperHeight = wrapper.offsetHeight;
             if (wrapperHeight > 0) {
-                setWrapperHeight?.(wrapperHeight);
+                setWrapperHeight(wrapperHeight);
             }
         }
         catch (error) {
             console.warn('Cannot measure iframe content:', error);
         }
-    }, [wrapperRef, setWrapperHeight]);
+    }, [wrapperRef]);
     useEffect(() => {
         const wrapper = wrapperRef.current;
         if (!wrapper || !isRenderViz)
@@ -2090,7 +2451,7 @@ const useWrapperRefHeight = (props) => {
 };
 
 const useZonePositions = (options) => {
-    const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
+    const { iframeHeight } = useHeatmapViz();
     const getZonePosition = useCallback((zone) => {
         if (!iframeHeight) {
             return null;
@@ -2116,12 +2477,13 @@ const useScrollmapZones = (options) => {
     const { mode = 'basic', enabled = true, iframeRef, wrapperRef } = options;
     const [isReady, setIsReady] = useState(false);
     const [zones, setZones] = useState([]);
-    const scrollmap = useHeatmapDataStore((state) => state.scrollmap);
-    const scrollMapInfo = useHeatmapDataStore((state) => state.dataInfo?.scrollMapInfo);
+    const { scrollmap } = useHeatmapData();
+    const { dataInfo } = useHeatmapData();
     const { getZonePosition } = useZonePositions();
+    const scrollMapInfo = dataInfo?.scrollMapInfo;
     const maxUsers = useMemo(() => {
         if (!scrollmap || scrollmap.length === 0)
-            return 100;
+            return 0;
         return Math.max(...scrollmap.map((d) => d.percUsers));
     }, [scrollmap]);
     const createZones = useCallback((data) => {
@@ -2218,6 +2580,185 @@ const getScrollGradientColor = (normalized) => {
     return `rgb(${r}, ${g}, ${b})`;
 };
 
+const CompareViewContext = createContext(null);
+/**
+ * Hook to safely access compare view context (returns null if not in compare mode)
+ */
+const useCompareViewContextSafe = () => {
+    return useContext(CompareViewContext);
+};
+
+/**
+ * Hook that returns data from compare view context if in compare mode,
+ * otherwise returns data from global store
+ */
+const useCompareAwareData = () => {
+    const compareContext = useCompareViewContextSafe();
+    // Global store values
+    const globalData = useHeatmapDataStore((state) => state.data);
+    const globalClickmap = useHeatmapDataStore((state) => state.clickmap);
+    const globalScrollmap = useHeatmapDataStore((state) => state.scrollmap);
+    const globalDataInfo = useHeatmapDataStore((state) => state.dataInfo);
+    // If in compare mode, use view context
+    if (compareContext) {
+        return {
+            data: compareContext.view.data,
+            clickmap: compareContext.view.clickmap,
+            scrollmap: compareContext.view.scrollmap,
+            dataInfo: compareContext.view.dataInfo,
+        };
+    }
+    // Otherwise use global store
+    return {
+        data: globalData,
+        clickmap: globalClickmap,
+        scrollmap: globalScrollmap,
+        dataInfo: globalDataInfo,
+    };
+};
+/**
+ * Hook that returns setters for data
+ * In compare mode, updates the view context
+ * In single/live mode, updates the global store
+ */
+const useCompareAwareDataSetters = () => {
+    const compareContext = useCompareViewContextSafe();
+    const setDataGlobal = useHeatmapDataStore((state) => state.setData);
+    const setClickmapGlobal = useHeatmapDataStore((state) => state.setClickmap);
+    const setScrollmapGlobal = useHeatmapDataStore((state) => state.setScrollmap);
+    const setDataInfoGlobal = useHeatmapDataStore((state) => state.setDataInfo);
+    if (compareContext) {
+        return {
+            setData: (data) => compareContext.updateView({ data }),
+            setClickmap: (clickmap) => compareContext.updateView({ clickmap }),
+            setScrollmap: (scrollmap) => compareContext.updateView({ scrollmap }),
+            setDataInfo: (dataInfo) => compareContext.updateView({ dataInfo }),
+        };
+    }
+    return {
+        setData: setDataGlobal,
+        setClickmap: setClickmapGlobal,
+        setScrollmap: setScrollmapGlobal,
+        setDataInfo: setDataInfoGlobal,
+    };
+};
+
+/**
+ * Hook that returns config from compare view context if in compare mode,
+ * otherwise returns config from global store
+ */
+const useCompareAwareConfig = () => {
+    const compareContext = useCompareViewContextSafe();
+    // Global store values
+    const globalHeatmapType = useHeatmapConfigStore((state) => state.heatmapType);
+    const globalClickType = useHeatmapConfigStore((state) => state.clickType);
+    const globalScrollType = useHeatmapConfigStore((state) => state.scrollType);
+    // If in compare mode, use view context
+    if (compareContext) {
+        return {
+            heatmapType: compareContext.view.heatmapType,
+            clickType: compareContext.view.clickType,
+            scrollType: compareContext.view.scrollType,
+        };
+    }
+    // Otherwise use global store
+    return {
+        heatmapType: globalHeatmapType,
+        clickType: globalClickType,
+        scrollType: globalScrollType,
+    };
+};
+/**
+ * Hook that returns config setters
+ * In compare mode, updates the view context
+ * In single/live mode, updates the global store
+ */
+const useCompareAwareConfigSetters = () => {
+    const compareContext = useCompareViewContextSafe();
+    const setHeatmapTypeGlobal = useHeatmapConfigStore((state) => state.setHeatmapType);
+    const setClickTypeGlobal = useHeatmapConfigStore((state) => state.setClickType);
+    const setScrollTypeGlobal = useHeatmapConfigStore((state) => state.setScrollType);
+    if (compareContext) {
+        return {
+            setHeatmapType: (heatmapType) => compareContext.updateView({ heatmapType }),
+            setClickType: (clickType) => compareContext.updateView({ clickType }),
+            setScrollType: (scrollType) => compareContext.updateView({ scrollType }),
+        };
+    }
+    return {
+        setHeatmapType: setHeatmapTypeGlobal,
+        setClickType: setClickTypeGlobal,
+        setScrollType: setScrollTypeGlobal,
+    };
+};
+
+/**
+ * Hook that returns viz state from compare view context if in compare mode,
+ * otherwise returns viz state from global store
+ */
+const useCompareAwareViz = () => {
+    const compareContext = useCompareViewContextSafe();
+    // Global store values
+    const globalZoomRatio = useHeatmapVizStore((state) => state.zoomRatio);
+    const globalScale = useHeatmapVizStore((state) => state.scale);
+    const globalIsScaledToFit = useHeatmapVizStore((state) => state.isScaledToFit);
+    const globalIsRenderViz = useHeatmapVizStore((state) => state.isRenderViz);
+    const globalIframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
+    const globalVizRef = useHeatmapSingleStore((state) => state.vizRef);
+    // If in compare mode, use view context
+    if (compareContext) {
+        return {
+            zoomRatio: compareContext.view.zoomRatio,
+            scale: compareContext.view.scale,
+            isScaledToFit: compareContext.view.isScaledToFit,
+            isRenderViz: compareContext.view.isRenderViz,
+            iframeHeight: compareContext.view.iframeHeight,
+            vizRef: compareContext.view.vizRef,
+        };
+    }
+    // Otherwise use global store
+    return {
+        zoomRatio: globalZoomRatio,
+        scale: globalScale,
+        isScaledToFit: globalIsScaledToFit,
+        isRenderViz: globalIsRenderViz,
+        iframeHeight: globalIframeHeight,
+        vizRef: globalVizRef,
+    };
+};
+/**
+ * Hook that returns viz setters
+ * In compare mode, updates the view context
+ * In single/live mode, updates the global store
+ */
+const useCompareAwareVizSetters = () => {
+    const compareContext = useCompareViewContextSafe();
+    const setZoomRatioGlobal = useHeatmapVizStore((state) => state.setZoomRatio);
+    const setScaleGlobal = useHeatmapVizStore((state) => state.setScale);
+    const setIsScaledToFitGlobal = useHeatmapVizStore((state) => state.setIsScaledToFit);
+    const setIsRenderVizGlobal = useHeatmapVizStore((state) => state.setIsRenderViz);
+    const setIframeHeightGlobal = useHeatmapSingleStore((state) => state.setIframeHeight);
+    const setVizRefGlobal = useHeatmapSingleStore((state) => state.setVizRef);
+    if (compareContext) {
+        return {
+            setZoomRatio: (zoomRatio) => compareContext.updateView({ zoomRatio }),
+            setScale: (scale) => compareContext.updateView({ scale }),
+            setIsScaledToFit: (isScaledToFit) => compareContext.updateView({ isScaledToFit }),
+            setIsRenderViz: (isRenderViz) => compareContext.updateView({ isRenderViz }),
+            setIframeHeight: (iframeHeight) => compareContext.updateView({ iframeHeight }),
+            setVizRef: (vizRef) => compareContext.updateView({ vizRef }),
+        };
+    }
+    return {
+        setZoomRatio: setZoomRatioGlobal,
+        setScale: setScaleGlobal,
+        setIsScaledToFit: setIsScaledToFitGlobal,
+        setIsRenderViz: setIsRenderVizGlobal,
+        setIframeHeight: setIframeHeightGlobal,
+        setVizRef: setVizRefGlobal,
+    };
+};
+
 const BoxStack = forwardRef(({ children, ...props }, ref) => {
     const id = props.id;
     const flexDirection = props.flexDirection;
@@ -2263,7 +2804,12 @@ const BoxStack = forwardRef(({ children, ...props }, ref) => {
 
 const ContentTopBar = () => {
     const controls = useHeatmapControlStore((state) => state.controls);
+    useHeatmapConfigStore((state) => state.mode);
     const TopBar = controls.TopBar;
+    // In compare mode, hide individual top bars since we have a global header
+    // if (mode === 'compare') {
+    //   return null;
+    // }
     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: TopBar && jsx(TopBar, {}) }));
@@ -2279,7 +2825,6 @@ const ContentMetricBar = () => {
 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',
@@ -2289,12 +2834,11 @@ const ContentToolbar = () => {
         }, children: controls.Toolbar ?? null }));
 };
 
-const VizContainer = ({ children, setWrapperHeight }) => {
+const VizContainer = ({ children, isActive = false }) => {
     const wrapperRef = useRef(null);
     useWrapperRefHeight({
-        isActive: !!setWrapperHeight,
+        isActive,
         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',
@@ -2303,8 +2847,8 @@ const VizContainer = ({ children, setWrapperHeight }) => {
 
 const useClickmap = () => {
     const [isInitialized, setIsInitialized] = useState(false);
-    const clickmap = useHeatmapDataStore((state) => state.clickmap);
-    const vizRef = useHeatmapSingleStore((state) => state.vizRef);
+    const { clickmap } = useHeatmapData();
+    const { vizRef } = useHeatmapViz();
     const start = useCallback(() => {
         if (isInitialized)
             return;
@@ -2323,8 +2867,8 @@ const useClickmap = () => {
 };
 
 const useScrollmap = () => {
-    const vizRef = useHeatmapSingleStore((state) => state.vizRef);
-    const scrollmap = useHeatmapDataStore((state) => state.scrollmap);
+    const { vizRef } = useHeatmapViz();
+    const { scrollmap } = useHeatmapData();
     const start = useCallback(() => {
         // if (isInitialized) return;
         if (!vizRef || !scrollmap || scrollmap.length === 0)
@@ -2369,9 +2913,9 @@ const RankBadge = ({ index, elementRect, widthScale, clickOnElement, }) => {
 
 const NUMBER_OF_TOP_ELEMENTS = 10;
 const DefaultRankBadges = ({ getRect, hidden }) => {
-    const heatmapInfo = useHeatmapDataStore((state) => state.dataInfo);
-    const widthScale = useHeatmapVizStore((state) => state.scale);
-    const elements = heatmapInfo?.sortedElements?.slice(0, NUMBER_OF_TOP_ELEMENTS) ?? [];
+    const { dataInfo } = useHeatmapData();
+    const { widthScale } = useHeatmapViz();
+    const elements = dataInfo?.sortedElements?.slice(0, NUMBER_OF_TOP_ELEMENTS) ?? [];
     if (hidden || elements.length === 0)
         return null;
     return (jsx(Fragment, { children: elements.map((element, index) => {
@@ -2428,9 +2972,9 @@ const ElementCallout = (props) => {
 };
 
 const ElementMissing = ({ show = true }) => {
+    const { widthScale } = useHeatmapViz();
     if (!show)
         return null;
-    const widthScale = useHeatmapVizStore((state) => state.scale);
     return (jsx("div", { className: "missingElement", style: {
             position: 'fixed',
             top: '50%',
@@ -2459,7 +3003,7 @@ const TARGET_ID_BY_TYPE = {
     },
 };
 const ElementOverlay = ({ type, element, onClick, isSecondary }) => {
-    const widthScale = useHeatmapVizStore((state) => state.scale);
+    const { widthScale } = useHeatmapViz();
     if (!element || (element.width === 0 && element.height === 0))
         return null;
     // Iframe has border, so we need to add it to the top position
@@ -2482,7 +3026,7 @@ const ELEMENT_CALLOUT = {
     alignment: 'left',
 };
 const HeatmapElements = (props) => {
-    const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
+    const { iframeHeight } = useHeatmapViz();
     const { iframeRef, wrapperRef, visualRef, visualizer, iframeDimensions, isElementSidebarOpen, isVisible = true, areDefaultRanksHidden, isSecondary, } = props;
     const getRect = useHeatmapElementPosition({
         iframeRef,
@@ -2519,9 +3063,9 @@ const HeatmapElements = (props) => {
 };
 
 const VizElements = ({ iframeRef, visualRef, wrapperRef }) => {
-    const heatmapInfo = useHeatmapDataStore((state) => state.dataInfo);
     const contentWidth = useHeatmapConfigStore((state) => state.width);
-    const vizRef = useHeatmapSingleStore((state) => state.vizRef);
+    const { dataInfo } = useHeatmapData();
+    const { vizRef } = useHeatmapViz();
     const visualizer = {
         get: (hash) => {
             if (vizRef) {
@@ -2543,7 +3087,7 @@ const VizElements = ({ iframeRef, visualRef, wrapperRef }) => {
     };
     if (!iframeRef.current)
         return null;
-    return (jsx(HeatmapElements, { visualizer: visualizer, visualRef: visualRef, iframeRef: iframeRef, wrapperRef: wrapperRef, heatmapInfo: heatmapInfo, isVisible: true, iframeDimensions: {
+    return (jsx(HeatmapElements, { visualizer: visualizer, visualRef: visualRef, iframeRef: iframeRef, wrapperRef: wrapperRef, heatmapInfo: dataInfo, isVisible: true, iframeDimensions: {
             width: contentWidth,
             position: 'absolute',
             top: 0,
@@ -2553,8 +3097,9 @@ const VizElements = ({ iframeRef, visualRef, wrapperRef }) => {
 };
 
 const AverageFoldLine = ({ iframeRef, wrapperRef }) => {
-    const averageFold = useHeatmapDataStore((state) => state.dataInfo?.averageFold || 50);
+    const { dataInfo } = useHeatmapData();
     const { getZonePosition } = useZonePositions();
+    const averageFold = dataInfo?.averageFold || 50;
     const position = getZonePosition({
         startY: averageFold,
         endY: averageFold,
@@ -2589,8 +3134,8 @@ const AverageFoldLine = ({ iframeRef, wrapperRef }) => {
 };
 
 const ScrollmapMarker = ({ iframeRef, wrapperRef }) => {
-    const scrollmap = useHeatmapDataStore((state) => state.scrollmap);
     const scrollType = useHeatmapConfigStore((state) => state.scrollType);
+    const { scrollmap } = useHeatmapData();
     const { getZonePosition } = useZonePositions();
     if (!scrollmap || scrollmap.length === 0)
         return null;
@@ -2770,7 +3315,7 @@ const MetricsTooltipContent = ({ zone }) => {
 const MetricRow = ({ label, value }) => (jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [jsxs("span", { style: { color: '#605E5C' }, children: [label, ":"] }), jsx("span", { style: { fontWeight: 600 }, children: value })] }));
 
 const HoverZones = ({ iframeRef, wrapperRef, position, currentScrollPercent, }) => {
-    const scrollmap = useHeatmapDataStore((state) => state.scrollmap);
+    const { scrollmap } = useHeatmapData();
     // const hoveredZone = useHeatmapVizScrollmapStore((state) => state.hoveredZone);
     // const setHoveredZone = useHeatmapVizScrollmapStore((state) => state.setHoveredZone);
     const { zones, isReady, maxUsers } = useScrollmapZones({
@@ -2788,8 +3333,7 @@ const ScrollMapOverlay = ({ wrapperRef, iframeRef }) => {
     const overlayRef = useRef(null);
     const [position, setPosition] = useState();
     const [currentScrollPercent, setCurrentScrollPercent] = useState(0);
-    const widthScale = useHeatmapVizStore((state) => state.scale);
-    const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
+    const { widthScale, iframeHeight } = useHeatmapViz();
     const handleMouseMove = (event) => {
         if (!iframeRef.current || !wrapperRef.current)
             return;
@@ -2824,8 +3368,8 @@ const ScrollMapOverlay = ({ wrapperRef, iframeRef }) => {
 
 const SCROLL_TYPES = [IHeatmapType.Scroll];
 const VizScrollMap = ({ iframeRef, wrapperRef }) => {
-    const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
     const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
+    const { iframeHeight } = useHeatmapViz();
     const isHeatmapScroll = SCROLL_TYPES.includes(heatmapType);
     if (!iframeHeight || !isHeatmapScroll)
         return null;
@@ -2841,12 +3385,12 @@ const VizScrollMap = ({ iframeRef, wrapperRef }) => {
 
 const WrapperVisual = ({ children, visualRef, wrapperRef, scaledHeight, iframeHeight, onScroll, }) => {
     const contentWidth = useHeatmapConfigStore((state) => state.width);
-    const widthScale = useHeatmapVizStore((state) => state.scale);
+    const { widthScale } = useHeatmapViz();
     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',
+            overflow: 'hidden scroll',
             display: 'flex',
             position: 'relative',
             justifyContent: 'center',
@@ -2874,9 +3418,8 @@ const WrapperVisual = ({ children, visualRef, wrapperRef, scaledHeight, iframeHe
 const VizDomRenderer = ({ mode = 'heatmap' }) => {
     const width = useHeatmapConfigStore((state) => state.width);
     const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
-    const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
-    const setIframeHeight = useHeatmapSingleStore((state) => state.setIframeHeight);
     const setSelectedElement = useHeatmapInteractionStore((state) => state.setSelectedElement);
+    const { iframeHeight, setIframeHeight, isRenderViz } = useHeatmapViz();
     const wrapperRef = useRef(null);
     const visualRef = useRef(null);
     const { iframeRef } = useHeatmapVizRender(mode);
@@ -2885,6 +3428,7 @@ const VizDomRenderer = ({ mode = 'heatmap' }) => {
         iframeRef,
         visualRef,
         iframeHeight,
+        isRenderViz,
     });
     const contentWidth = width ?? 0;
     const onScroll = (e) => {
@@ -2908,12 +3452,13 @@ const VizLoading = () => {
 
 const VizDomHeatmap = () => {
     const controls = useHeatmapControlStore((state) => state.controls);
-    const isRendering = useHeatmapDataStore((state) => state.isRendering);
-    const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
-    const setIframeHeight = useHeatmapSingleStore((state) => state.setIframeHeight);
-    const setVizRef = useHeatmapSingleStore((state) => state.setVizRef);
+    const { isRendering } = useHeatmapData();
+    console.log(`🚀 🐥 ~ VizDomHeatmap ~ isRendering:`, isRendering);
+    const { iframeHeight, setIframeHeight, setVizRef } = useHeatmapViz();
+    const viewId = useViewId();
     useEffect(() => {
         return () => {
+            console.log(`🚀 🐥 ~ useEffect ~ return:`, viewId, iframeHeight);
             setVizRef(null);
             setIframeHeight(0);
         };
@@ -2925,8 +3470,7 @@ const VizDomHeatmap = () => {
 
 const VizLiveRenderer = () => {
     const contentWidth = useHeatmapConfigStore((state) => state.width);
-    const iframeHeight = useHeatmapLiveStore((state) => state.iframeHeight);
-    const setIframeHeight = useHeatmapLiveStore((state) => state.setIframeHeight);
+    const { isRenderViz, iframeHeight, setIframeHeight } = useHeatmapViz();
     const visualRef = useRef(null);
     const wrapperRef = useRef(null);
     const { iframeRef } = useVizLiveRender();
@@ -2935,6 +3479,7 @@ const VizLiveRenderer = () => {
         iframeRef,
         visualRef,
         iframeHeight,
+        isRenderViz,
         setIframeHeight,
     });
     const onScroll = (e) => {
@@ -2948,19 +3493,17 @@ const VizLiveRenderer = () => {
 
 const VizLiveHeatmap = () => {
     const controls = useHeatmapControlStore((state) => state.controls);
-    const isRendering = useHeatmapDataStore((state) => state.isRendering);
-    const iframeHeight = useHeatmapLiveStore((state) => state.iframeHeight);
-    const wrapperHeight = useHeatmapLiveStore((state) => state.wrapperHeight);
-    const setWrapperHeight = useHeatmapLiveStore((state) => state.setWrapperHeight);
+    const isRendering = useHeatmapConfigStore((state) => state.isRendering);
+    const { iframeHeight, wrapperHeight } = useHeatmapViz();
     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, {})] }));
+    return (jsxs(VizContainer, { isActive: true, children: [jsx(VizLiveRenderer, {}), (!iframeHeight || !wrapperHeight) && jsx(VizLoading, {})] }));
 };
 
 const ContentVizByMode = () => {
@@ -2968,6 +3511,8 @@ const ContentVizByMode = () => {
     switch (mode) {
         case 'live':
             return jsx(VizLiveHeatmap, {});
+        // case 'compare':
+        //   return <VizCompareHeatmap />;
         default:
             return jsx(VizDomHeatmap, {});
     }
@@ -2977,6 +3522,45 @@ const LeftSidebar = () => {
     const controls = useHeatmapControlStore((state) => state.controls);
     const isHideSidebar = useHeatmapInteractionStore((state) => state.state.hideSidebar);
     const sidebarWidth = useHeatmapConfigStore((state) => state.sidebarWidth);
+    const mode = useHeatmapConfigStore((state) => state.mode);
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+    // In compare mode, render as popover
+    if (mode === 'compare') {
+        return (jsxs("div", { style: { position: 'relative', zIndex: 10 }, children: [jsx("button", { onClick: () => setIsPopoverOpen(!isPopoverOpen), style: {
+                        position: 'absolute',
+                        top: '8px',
+                        left: '8px',
+                        padding: '8px 16px',
+                        backgroundColor: '#fff',
+                        border: '1px solid #c9cccf',
+                        borderRadius: '8px',
+                        cursor: 'pointer',
+                        fontSize: '14px',
+                        fontWeight: 500,
+                        zIndex: 11,
+                        boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)',
+                    }, children: "Click data" }), isPopoverOpen && (jsxs(Fragment, { children: [jsx("div", { onClick: () => setIsPopoverOpen(false), style: {
+                                position: 'fixed',
+                                top: 0,
+                                left: 0,
+                                right: 0,
+                                bottom: 0,
+                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                zIndex: 12,
+                            } }), jsx("div", { className: "gx-hm-sidebar-popover", style: {
+                                position: 'fixed',
+                                top: 0,
+                                left: 0,
+                                height: '100vh',
+                                width: `calc(${sidebarWidth}px + ${HEATMAP_CONFIG.borderWidth}px)`,
+                                backgroundColor: '#fff',
+                                borderRight: `${HEATMAP_CONFIG.borderWidth}px solid ${HEATMAP_CONFIG.borderColor}`,
+                                zIndex: 13,
+                                boxShadow: '4px 0 12px rgba(0, 0, 0, 0.15)',
+                                overflow: 'auto',
+                            }, children: controls.Sidebar ?? null })] }))] }));
+    }
+    // Normal sidebar rendering for single mode
     if (isHideSidebar) {
         return null;
     }
@@ -3024,4 +3608,4 @@ const HeatmapLayout = ({ data, clickmap, scrollmap, controls, dataInfo, }) => {
     }
 };
 
-export { GraphView, HeatmapLayout, IClickType, IHeatmapType, IScrollType, useHeatmapConfigStore, useHeatmapDataStore, useHeatmapInteractionStore, useHeatmapLiveStore, useHeatmapVizStore };
+export { GraphView, HeatmapLayout, IClickType, IHeatmapType, IScrollType, ViewIdContext, convertViewportToIframeCoords, getScrollGradientColor, useClickedElement, useCompareAwareConfig, useCompareAwareConfigSetters, useCompareAwareData, useCompareAwareDataSetters, useCompareAwareViz, useCompareAwareVizSetters, useElementCalloutVisible, useHeatmapCompareStore, useHeatmapConfigStore, useHeatmapData, useHeatmapDataStore, useHeatmapEffects, useHeatmapElementPosition, useHeatmapInteractionStore, useHeatmapLiveStore, useHeatmapScale, useHeatmapSingleStore, useHeatmapViz, useHeatmapVizRender, useHeatmapVizStore, useHoveredElement, useIsCompareMode, useRegisterConfig, useRegisterControl, useRegisterData, useRegisterHeatmap, useScrollmapZones, useViewId, useVizLiveRender, useWrapperRefHeight, useZonePositions };