@gemx-dev/heatmap-react 3.5.49 → 3.5.51

package/dist/esm/index.mjs

@@ -1,8 +1,9 @@
 "use client"
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useNodesState, ReactFlow, Controls, Background } from '@xyflow/react';
-import { useEffect, createContext, useContext, useCallback, useState, useRef, useMemo, forwardRef, Fragment as Fragment$1 } from 'react';
+import { useEffect, useRef, useCallback, createContext, useContext, useMemo, useState, forwardRef, Fragment as Fragment$1 } from 'react';
 import { create } from 'zustand';
+import { subscribeWithSelector } from 'zustand/middleware';
 import { decode } from '@gemx-dev/clarity-decode';
 import { Visualizer } from '@gemx-dev/clarity-visualize';
 import { createPortal } from 'react-dom';
@@ -67,10 +68,75 @@ const HEATMAP_STYLE = {
 };
 const DEFAULT_SIDEBAR_WIDTH = 260;
 
+/**
+ * Default view ID for single mode
+ */
+const DEFAULT_VIEW_ID = 'default';
+/**
+ * Generate compare view ID
+ * @param index - Zero-based index (0, 1, 2, 3)
+ * @returns View ID string like 'view-0', 'view-1', etc.
+ */
+const getCompareViewId = (index) => `view-${index}`;
+/**
+ * Check if a view ID is a compare view
+ */
+const isCompareViewId = (viewId) => viewId.startsWith('view-');
+/**
+ * Extract index from compare view ID
+ * @param viewId - View ID like 'view-0'
+ * @returns Index number or -1 if invalid
+ */
+const getCompareViewIndex = (viewId) => {
+    if (!isCompareViewId(viewId))
+        return -1;
+    const match = viewId.match(/^view-(\d+)$/);
+    return match ? parseInt(match[1], 10) : -1;
+};
+
+const Z_INDEX = {
+    ELEMENTS: 1000,
+    CALLOUT: 2000,
+    MINIMAP: 3000,
+    SIDEBAR: 4000,
+    SIDEBAR_POPOVER: 4001,
+};
+
+/**
+ * Creates a debounced version of a callback that delays invoking until after
+ * wait milliseconds have elapsed since the last time it was invoked.
+ *
+ * @param callback - The function to debounce
+ * @param delay - The number of milliseconds to delay
+ * @returns A debounced version of the callback
+ *
+ * @example
+ * ```tsx
+ * const handleSearch = useDebounceCallback((query: string) => {
+ *   searchAPI(query);
+ * }, 300);
+ * ```
+ */
+function useDebounceCallback(callback, delay) {
+    const timeoutRef = useRef();
+    const callbackRef = useRef(callback);
+    // Update callback ref when callback changes
+    callbackRef.current = callback;
+    return useCallback((...args) => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = setTimeout(() => {
+            callbackRef.current(...args);
+        }, delay);
+    }, [delay]);
+}
+
 const useHeatmapControlStore = create()((set, get) => {
     return {
         controls: {
-            Sidebar: null,
+            Sidebar: undefined,
+            SidebarActivator: undefined,
             Toolbar: null,
             MetricBar: null,
             VizLoading: null,
@@ -109,12 +175,12 @@ var IScrollType;
     IScrollType["Revenue"] = "revenue-scroll";
 })(IScrollType || (IScrollType = {}));
 
-const useHeatmapConfigStore = create()((set, get) => {
+const useHeatmapConfigStore = create()((set) => {
     return {
         mode: 'single',
         width: 1440,
         sidebarWidth: DEFAULT_SIDEBAR_WIDTH,
-        heatmapType: IHeatmapType.Scroll,
+        heatmapType: IHeatmapType.Click,
         clickType: IClickType.Total,
         scrollType: IScrollType.Depth,
         isRendering: true,
@@ -129,23 +195,22 @@ const useHeatmapConfigStore = create()((set, get) => {
     };
 });
 
-const DEFAULT_VIEW_ID$2 = 'default';
-const useHeatmapDataStore = create()((set, get) => {
+const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
     return {
-        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) => ({
+        data: { [DEFAULT_VIEW_ID]: undefined },
+        clickmap: { [DEFAULT_VIEW_ID]: undefined },
+        dataInfo: { [DEFAULT_VIEW_ID]: undefined },
+        scrollmap: { [DEFAULT_VIEW_ID]: undefined },
+        setDataInfo: (dataInfo, viewId = DEFAULT_VIEW_ID) => set((state) => ({
             dataInfo: { ...state.dataInfo, [viewId]: dataInfo },
         })),
-        setData: (data, viewId = DEFAULT_VIEW_ID$2) => set((state) => ({
+        setData: (data, viewId = DEFAULT_VIEW_ID) => set((state) => ({
             data: { ...state.data, [viewId]: data },
         })),
-        setClickmap: (clickmap, viewId = DEFAULT_VIEW_ID$2) => set((state) => ({
+        setClickmap: (clickmap, viewId = DEFAULT_VIEW_ID) => set((state) => ({
             clickmap: { ...state.clickmap, [viewId]: clickmap },
         })),
-        setScrollmap: (scrollmap, viewId = DEFAULT_VIEW_ID$2) => set((state) => ({
+        setScrollmap: (scrollmap, viewId = DEFAULT_VIEW_ID) => set((state) => ({
             scrollmap: { ...state.scrollmap, [viewId]: scrollmap },
         })),
         copyView: (fromViewId, toViewId) => set((state) => ({
@@ -171,50 +236,98 @@ const useHeatmapDataStore = create()((set, get) => {
             };
         }),
         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 },
+            data: { [DEFAULT_VIEW_ID]: undefined },
+            clickmap: { [DEFAULT_VIEW_ID]: undefined },
+            dataInfo: { [DEFAULT_VIEW_ID]: undefined },
+            scrollmap: { [DEFAULT_VIEW_ID]: undefined },
         }),
     };
-});
+}));
 
-const useHeatmapInteractionStore = create()((set, get) => {
+const DEFAULT_STATE = {
+    hideSidebar: false,
+};
+const useHeatmapInteractionStore = create()(subscribeWithSelector((set) => {
     return {
-        state: {
-            hideSidebar: false,
-        },
-        setState: (state) => set({ state }),
-        selectedElement: null,
-        setSelectedElement: (selectedElement) => set({ selectedElement }),
-        hoveredElement: null,
-        setHoveredElement: (hoveredElement) => set({ hoveredElement }),
-        shouldShowCallout: false,
-        setShouldShowCallout: (shouldShowCallout) => set({ shouldShowCallout }),
+        state: { [DEFAULT_VIEW_ID]: DEFAULT_STATE },
+        selectedElement: { [DEFAULT_VIEW_ID]: null },
+        hoveredElement: { [DEFAULT_VIEW_ID]: null },
+        shouldShowCallout: { [DEFAULT_VIEW_ID]: false },
+        setState: (state, viewId = DEFAULT_VIEW_ID) => set((prev) => ({
+            state: { ...prev.state, [viewId]: state },
+        })),
+        setSelectedElement: (selectedElement, viewId = DEFAULT_VIEW_ID) => set((prev) => ({
+            selectedElement: { ...prev.selectedElement, [viewId]: selectedElement },
+        })),
+        setHoveredElement: (hoveredElement, viewId = DEFAULT_VIEW_ID) => set((prev) => ({
+            hoveredElement: { ...prev.hoveredElement, [viewId]: hoveredElement },
+        })),
+        setShouldShowCallout: (shouldShowCallout, viewId = DEFAULT_VIEW_ID) => set((prev) => ({
+            shouldShowCallout: { ...prev.shouldShowCallout, [viewId]: shouldShowCallout },
+        })),
+        copyView: (fromViewId, toViewId) => set((state) => ({
+            state: {
+                ...state.state,
+                [toViewId]: state.state[fromViewId] ?? DEFAULT_STATE,
+            },
+            selectedElement: {
+                ...state.selectedElement,
+                [toViewId]: state.selectedElement[fromViewId] ?? null,
+            },
+            hoveredElement: {
+                ...state.hoveredElement,
+                [toViewId]: state.hoveredElement[fromViewId] ?? null,
+            },
+            shouldShowCallout: {
+                ...state.shouldShowCallout,
+                [toViewId]: state.shouldShowCallout[fromViewId] ?? false,
+            },
+        })),
+        clearView: (viewId) => set((state) => {
+            const newState = { ...state.state };
+            const newSelectedElement = { ...state.selectedElement };
+            const newHoveredElement = { ...state.hoveredElement };
+            const newShouldShowCallout = { ...state.shouldShowCallout };
+            delete newState[viewId];
+            delete newSelectedElement[viewId];
+            delete newHoveredElement[viewId];
+            delete newShouldShowCallout[viewId];
+            return {
+                state: newState,
+                selectedElement: newSelectedElement,
+                hoveredElement: newHoveredElement,
+                shouldShowCallout: newShouldShowCallout,
+            };
+        }),
+        resetAll: () => set({
+            state: { default: DEFAULT_STATE },
+            selectedElement: { default: null },
+            hoveredElement: { default: null },
+            shouldShowCallout: { default: false },
+        }),
     };
-});
+}));
 
-const DEFAULT_VIEW_ID$1 = 'default';
-const useHeatmapVizStore = create()((set, get) => {
+const useHeatmapVizStore = create()(subscribeWithSelector((set) => {
     return {
-        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: { [DEFAULT_VIEW_ID]: false },
+        zoomRatio: { [DEFAULT_VIEW_ID]: 100 },
+        minZoomRatio: { [DEFAULT_VIEW_ID]: 10 },
+        scale: { [DEFAULT_VIEW_ID]: 1 },
+        isScaledToFit: { [DEFAULT_VIEW_ID]: false },
+        setIsRenderViz: (isRenderViz, viewId = DEFAULT_VIEW_ID) => set((state) => ({
             isRenderViz: { ...state.isRenderViz, [viewId]: isRenderViz },
         })),
-        setZoomRatio: (zoomRatio, viewId = DEFAULT_VIEW_ID$1) => set((state) => ({
+        setZoomRatio: (zoomRatio, viewId = DEFAULT_VIEW_ID) => set((state) => ({
             zoomRatio: { ...state.zoomRatio, [viewId]: zoomRatio },
         })),
-        setMinZoomRatio: (minZoomRatio, viewId = DEFAULT_VIEW_ID$1) => set((state) => ({
+        setMinZoomRatio: (minZoomRatio, viewId = DEFAULT_VIEW_ID) => set((state) => ({
             minZoomRatio: { ...state.minZoomRatio, [viewId]: minZoomRatio },
         })),
-        setScale: (scale, viewId = DEFAULT_VIEW_ID$1) => set((state) => ({
+        setScale: (scale, viewId = DEFAULT_VIEW_ID) => set((state) => ({
             scale: { ...state.scale, [viewId]: scale },
         })),
-        setIsScaledToFit: (isScaledToFit, viewId = DEFAULT_VIEW_ID$1) => set((state) => ({
+        setIsScaledToFit: (isScaledToFit, viewId = DEFAULT_VIEW_ID) => set((state) => ({
             isScaledToFit: { ...state.isScaledToFit, [viewId]: isScaledToFit },
         })),
         copyView: (fromViewId, toViewId) => set((state) => ({
@@ -222,7 +335,10 @@ const useHeatmapVizStore = create()((set, get) => {
             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 },
+            isScaledToFit: {
+                ...state.isScaledToFit,
+                [toViewId]: state.isScaledToFit[fromViewId] ?? false,
+            },
         })),
         clearView: (viewId) => set((state) => {
             const newIsRenderViz = { ...state.isRenderViz };
@@ -244,31 +360,69 @@ const useHeatmapVizStore = create()((set, get) => {
             };
         }),
         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 },
+            isRenderViz: { [DEFAULT_VIEW_ID]: false },
+            zoomRatio: { [DEFAULT_VIEW_ID]: 100 },
+            minZoomRatio: { [DEFAULT_VIEW_ID]: 10 },
+            scale: { [DEFAULT_VIEW_ID]: 1 },
+            isScaledToFit: { [DEFAULT_VIEW_ID]: false },
         }),
     };
-});
+}));
 
-const useHeatmapVizScrollmapStore = create()((set, get) => {
+const useHeatmapVizScrollmapStore = create()(subscribeWithSelector((set) => {
     return {
-        zones: [],
-        hoveredZone: null,
-        showMinimap: true,
-        setZones: (zones) => set({ zones }),
-        setHoveredZone: (hoveredZone) => set({ hoveredZone }),
-        setShowMinimap: (showMinimap) => set({ showMinimap }),
+        zones: { [DEFAULT_VIEW_ID]: [] },
+        hoveredZone: { [DEFAULT_VIEW_ID]: null },
+        showMinimap: { [DEFAULT_VIEW_ID]: true },
+        setZones: (zones, viewId = DEFAULT_VIEW_ID) => set((prev) => ({
+            zones: { ...prev.zones, [viewId]: zones },
+        })),
+        setHoveredZone: (hoveredZone, viewId = DEFAULT_VIEW_ID) => set((prev) => ({
+            hoveredZone: { ...prev.hoveredZone, [viewId]: hoveredZone },
+        })),
+        setShowMinimap: (showMinimap, viewId = DEFAULT_VIEW_ID) => set((prev) => ({
+            showMinimap: { ...prev.showMinimap, [viewId]: showMinimap },
+        })),
+        copyView: (fromViewId, toViewId) => set((state) => ({
+            zones: {
+                ...state.zones,
+                [toViewId]: state.zones[fromViewId] ?? [],
+            },
+            hoveredZone: {
+                ...state.hoveredZone,
+                [toViewId]: state.hoveredZone[fromViewId] ?? null,
+            },
+            showMinimap: {
+                ...state.showMinimap,
+                [toViewId]: state.showMinimap[fromViewId] ?? true,
+            },
+        })),
+        clearView: (viewId) => set((state) => {
+            const newZones = { ...state.zones };
+            const newHoveredZone = { ...state.hoveredZone };
+            const newShowMinimap = { ...state.showMinimap };
+            delete newZones[viewId];
+            delete newHoveredZone[viewId];
+            delete newShowMinimap[viewId];
+            return {
+                zones: newZones,
+                hoveredZone: newHoveredZone,
+                showMinimap: newShowMinimap,
+            };
+        }),
+        resetAll: () => set({
+            zones: { default: [] },
+            hoveredZone: { default: null },
+            showMinimap: { default: true },
+        }),
     };
-});
+}));
 
 const initialState = {
     payloads: [],
     htmlContent: '',
 };
-const useHeatmapLiveStore = create()((set, get) => {
+const useHeatmapLiveStore = create()((set) => {
     return {
         ...initialState,
         reset: () => set(initialState),
@@ -278,12 +432,12 @@ const useHeatmapLiveStore = create()((set, get) => {
     };
 });
 
-const DEFAULT_VIEW_ID = 'default';
-const useHeatmapSingleStore = create()((set, get) => {
+const useHeatmapSingleStore = create()(subscribeWithSelector((set) => {
     return {
         vizRef: { [DEFAULT_VIEW_ID]: null },
         iframeHeight: { [DEFAULT_VIEW_ID]: 0 },
         wrapperHeight: { [DEFAULT_VIEW_ID]: 0 },
+        wrapperWidth: { [DEFAULT_VIEW_ID]: 0 },
         setVizRef: (vizRef, viewId = DEFAULT_VIEW_ID) => set((state) => ({
             vizRef: { ...state.vizRef, [viewId]: vizRef },
         })),
@@ -297,31 +451,43 @@ const useHeatmapSingleStore = create()((set, get) => {
                 wrapperHeight: { ...state.wrapperHeight, [viewId]: wrapperHeight },
             }));
         },
+        setWrapperWidth: (wrapperWidth, viewId = DEFAULT_VIEW_ID) => {
+            set((state) => ({
+                wrapperWidth: { ...state.wrapperWidth, [viewId]: wrapperWidth },
+            }));
+        },
         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 },
+            wrapperHeight: {
+                ...state.wrapperHeight,
+                [toViewId]: state.wrapperHeight[fromViewId] ?? 0,
+            },
         })),
         clearView: (viewId) => set((state) => {
             const newVizRef = { ...state.vizRef };
             const newIframeHeight = { ...state.iframeHeight };
             const newWrapperHeight = { ...state.wrapperHeight };
+            const newWrapperWidth = { ...state.wrapperWidth };
             delete newVizRef[viewId];
             delete newIframeHeight[viewId];
             delete newWrapperHeight[viewId];
+            delete newWrapperWidth[viewId];
             return {
                 vizRef: newVizRef,
                 iframeHeight: newIframeHeight,
                 wrapperHeight: newWrapperHeight,
+                wrapperWidth: newWrapperWidth,
             };
         }),
         resetAll: () => set({
             vizRef: { [DEFAULT_VIEW_ID]: null },
             iframeHeight: { [DEFAULT_VIEW_ID]: 0 },
             wrapperHeight: { [DEFAULT_VIEW_ID]: 0 },
+            wrapperWidth: { [DEFAULT_VIEW_ID]: 0 },
         }),
     };
-});
+}));
 
 const createDefaultView = (id, label, options) => ({
     id,
@@ -468,6 +634,7 @@ const useRegisterConfig = () => {
 const useRegisterControl = (control) => {
     const registerControl = useHeatmapControlStore((state) => state.registerControl);
     registerControl('Sidebar', control.Sidebar);
+    registerControl('SidebarActivator', control.SidebarActivator);
     registerControl('TopBar', control.TopBar);
     registerControl('Toolbar', control.Toolbar);
     registerControl('MetricBar', control.MetricBar);
@@ -482,18 +649,18 @@ const useRegisterControl = (control) => {
 const ViewIdContext = createContext(undefined);
 /**
  * Hook to get current viewId
- * Returns 'default' if not in a ViewIdContext (single mode)
+ * Returns DEFAULT_VIEW_ID if not in a ViewIdContext (single mode)
  */
 const useViewId = () => {
     const viewId = useContext(ViewIdContext);
-    return viewId || 'default';
+    return viewId || DEFAULT_VIEW_ID;
 };
 /**
  * Hook to check if currently in compare mode
  */
 const useIsCompareMode = () => {
     const viewId = useContext(ViewIdContext);
-    return viewId !== undefined && viewId !== 'default';
+    return viewId !== undefined && viewId !== DEFAULT_VIEW_ID;
 };
 
 const useHeatmapData = (props) => {
@@ -506,17 +673,191 @@ const useHeatmapData = (props) => {
     const setClickmap = useHeatmapDataStore((state) => state.setClickmap);
     const setScrollmap = useHeatmapDataStore((state) => state.setScrollmap);
     const setDataInfo = useHeatmapDataStore((state) => state.setDataInfo);
+    const memoizedSetters = useMemo(() => ({
+        setData: (newData) => setData(newData, viewId),
+        setClickmap: (newClickmap) => setClickmap(newClickmap, viewId),
+        setScrollmap: (newScrollmap) => setScrollmap(newScrollmap, viewId),
+        setDataInfo: (newDataInfo) => setDataInfo(newDataInfo, viewId),
+    }), [setData, setClickmap, setScrollmap, setDataInfo, viewId]);
     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),
+        ...memoizedSetters,
+    };
+};
+
+const useHeatmapInteraction = (props) => {
+    const viewId = props?.viewId || useViewId();
+    const state = useHeatmapInteractionStore((store) => store.state[viewId] ?? { hideSidebar: false });
+    const selectedElement = useHeatmapInteractionStore((store) => store.selectedElement[viewId] ?? null);
+    const hoveredElement = useHeatmapInteractionStore((store) => store.hoveredElement[viewId] ?? null);
+    const shouldShowCallout = useHeatmapInteractionStore((store) => store.shouldShowCallout[viewId] ?? false);
+    const setStateStore = useHeatmapInteractionStore((store) => store.setState);
+    const setSelectedElementStore = useHeatmapInteractionStore((store) => store.setSelectedElement);
+    const setHoveredElementStore = useHeatmapInteractionStore((store) => store.setHoveredElement);
+    const setShouldShowCalloutStore = useHeatmapInteractionStore((store) => store.setShouldShowCallout);
+    const memoizedSetters = useMemo(() => ({
+        setState: (newState) => setStateStore(newState, viewId),
+        setSelectedElement: (element) => setSelectedElementStore(element, viewId),
+        setHoveredElement: (element) => setHoveredElementStore(element, viewId),
+        setShouldShowCallout: (value) => setShouldShowCalloutStore(value, viewId),
+    }), [
+        setStateStore,
+        setSelectedElementStore,
+        setHoveredElementStore,
+        setShouldShowCalloutStore,
+        viewId,
+    ]);
+    return {
+        state,
+        selectedElement,
+        hoveredElement,
+        shouldShowCallout,
+        // Setters (auto-inject viewId)
+        ...memoizedSetters,
+    };
+};
+
+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 wrapperWidth = useHeatmapSingleStore((state) => state.wrapperWidth[viewId] ?? 0);
+    const setVizRef = useHeatmapSingleStore((state) => state.setVizRef);
+    const setIframeHeight = useHeatmapSingleStore((state) => state.setIframeHeight);
+    const setWrapperHeight = useHeatmapSingleStore((state) => state.setWrapperHeight);
+    const setWrapperWidth = useHeatmapSingleStore((state) => state.setWrapperWidth);
+    const memoizedSetters = useMemo(() => ({
+        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),
+        setWrapperWidth: (value) => setWrapperWidth(value, viewId),
+    }), [
+        setIsRenderViz,
+        setZoomRatio,
+        setMinZoomRatio,
+        setScale,
+        setIsScaledToFit,
+        setVizRef,
+        setIframeHeight,
+        setWrapperHeight,
+        setWrapperWidth,
+        viewId,
+    ]);
+    return {
+        isRenderViz,
+        zoomRatio,
+        minZoomRatio,
+        widthScale,
+        isScaledToFit,
+        vizRef,
+        iframeHeight,
+        wrapperHeight,
+        wrapperWidth,
+        // Setters (auto-inject viewId)
+        ...memoizedSetters,
+    };
+};
+
+const useHeatmapVizScrollmap = (props) => {
+    const viewId = props?.viewId || useViewId();
+    const zones = useHeatmapVizScrollmapStore((store) => store.zones[viewId] ?? []);
+    const hoveredZone = useHeatmapVizScrollmapStore((store) => store.hoveredZone[viewId] ?? null);
+    const showMinimap = useHeatmapVizScrollmapStore((store) => store.showMinimap[viewId] ?? true);
+    const setZonesStore = useHeatmapVizScrollmapStore((store) => store.setZones);
+    const setHoveredZoneStore = useHeatmapVizScrollmapStore((store) => store.setHoveredZone);
+    const setShowMinimapStore = useHeatmapVizScrollmapStore((store) => store.setShowMinimap);
+    const memoizedSetters = useMemo(() => ({
+        setZones: (newZones) => setZonesStore(newZones, viewId),
+        setHoveredZone: (zone) => setHoveredZoneStore(zone, viewId),
+        setShowMinimap: (value) => setShowMinimapStore(value, viewId),
+    }), [setZonesStore, setHoveredZoneStore, setShowMinimapStore, viewId]);
+    return {
+        zones,
+        hoveredZone,
+        showMinimap,
+        // Setters (auto-inject viewId)
+        ...memoizedSetters,
+    };
+};
+
+/**
+ * Hook to handle copying and clearing view data across all stores
+ */
+const useHeatmapCopyView = () => {
+    const copyDataView = useHeatmapDataStore((state) => state.copyView);
+    const copyVizView = useHeatmapVizStore((state) => state.copyView);
+    const copySingleView = useHeatmapSingleStore((state) => state.copyView);
+    const copyInteractionView = useHeatmapInteractionStore((state) => state.copyView);
+    const copyVizScrollmapView = useHeatmapVizScrollmapStore((state) => state.copyView);
+    const clearDataView = useHeatmapDataStore((state) => state.clearView);
+    const clearVizView = useHeatmapVizStore((state) => state.clearView);
+    const clearSingleView = useHeatmapSingleStore((state) => state.clearView);
+    const clearInteractionView = useHeatmapInteractionStore((state) => state.clearView);
+    const clearVizScrollmapView = useHeatmapVizScrollmapStore((state) => state.clearView);
+    const resetDataAll = useHeatmapDataStore((state) => state.resetAll);
+    const resetVizAll = useHeatmapVizStore((state) => state.resetAll);
+    const resetSingleAll = useHeatmapSingleStore((state) => state.resetAll);
+    const resetInteractionAll = useHeatmapInteractionStore((state) => state.resetAll);
+    const resetVizScrollmapAll = useHeatmapVizScrollmapStore((state) => state.resetAll);
+    const copyView = (fromViewId, toViewId) => {
+        copyDataView(fromViewId, toViewId);
+        copyVizView(fromViewId, toViewId);
+        copySingleView(fromViewId, toViewId);
+        copyInteractionView(fromViewId, toViewId);
+        copyVizScrollmapView(fromViewId, toViewId);
+    };
+    const copyViewToMultiple = (fromViewId, toViewIds) => {
+        toViewIds.forEach((toViewId) => {
+            copyView(fromViewId, toViewId);
+        });
+    };
+    const clearView = (viewId) => {
+        clearDataView(viewId);
+        clearVizView(viewId);
+        clearSingleView(viewId);
+        clearInteractionView(viewId);
+        clearVizScrollmapView(viewId);
+    };
+    const clearMultipleViews = (viewIds) => {
+        viewIds.forEach((viewId) => {
+            clearView(viewId);
+        });
+    };
+    const resetAll = () => {
+        resetDataAll();
+        resetVizAll();
+        resetSingleAll();
+        resetInteractionAll();
+        resetVizScrollmapAll();
+    };
+    return {
+        copyView,
+        copyViewToMultiple,
+        clearView,
+        clearMultipleViews,
+        resetAll,
     };
 };
 
@@ -562,23 +903,146 @@ const useRegisterHeatmap = ({ clickmap, scrollmap }) => {
     }, [scrollmap]);
 };
 
+function findLastSizeOfDom(data) {
+    const listDocs = data
+        .filter((item) => item.doc?.find((doc) => doc.data.width && doc.data.height))
+        .flatMap((item) => item.doc?.flatMap((doc) => doc.data));
+    const lastDoc = listDocs?.[listDocs.length - 1];
+    const docSize = {
+        width: lastDoc?.width,
+        height: lastDoc?.height,
+    };
+    const listResizes = data.filter((item) => !!item.resize).flatMap((item) => item.resize);
+    const lastResizeEvent = listResizes?.[listResizes.length - 1];
+    const resize = {
+        width: lastResizeEvent?.data.width,
+        height: lastResizeEvent?.data.height,
+    };
+    return {
+        doc: docSize,
+        resize: resize,
+        size: {
+            width: resize.width || docSize.width,
+            height: resize.height || docSize.height,
+        },
+    };
+}
+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;
+    return {
+        transform: `scale(${1.2 * widthScale})`,
+        top: Number.isNaN(top) ? undefined : top,
+        left: Number.isNaN(left) ? undefined : left,
+    };
+}
+function isElementInViewport(elementRect, visualRef, scale) {
+    if (!elementRect)
+        return false;
+    const visualRect = visualRef.current?.getBoundingClientRect();
+    if (!visualRect)
+        return false;
+    // Element position relative to the document (or container's content)
+    const elementTop = elementRect.top * scale;
+    const elementBottom = (elementRect.top + elementRect.height) * scale;
+    // Current scroll position
+    const scrollTop = visualRef.current?.scrollTop || 0;
+    const viewportHeight = visualRect.height;
+    // Visible viewport range in the scrollable content
+    const viewportTop = scrollTop;
+    const viewportBottom = scrollTop + viewportHeight;
+    // Check if element is within the visible viewport
+    // Element is visible if it overlaps with the viewport
+    return elementBottom > viewportTop && elementTop < viewportBottom;
+}
+
+function getElementLayout(element) {
+    if (!element?.getBoundingClientRect)
+        return null;
+    const rect = element.getBoundingClientRect();
+    if (rect.width === 0 && rect.height === 0)
+        return null;
+    return {
+        top: rect.top,
+        left: rect.left,
+        width: rect.width,
+        height: rect.height,
+    };
+}
+const getElementAtPoint = (doc, x, y) => {
+    let el = null;
+    if ('caretPositionFromPoint' in doc) {
+        el = doc.caretPositionFromPoint(x, y)?.offsetNode ?? null;
+    }
+    el = el ?? doc.elementFromPoint(x, y);
+    let element = el;
+    while (element && element.nodeType === Node.TEXT_NODE) {
+        element = element.parentElement;
+    }
+    return element;
+};
+function getElementHash(element) {
+    return (element.getAttribute('data-clarity-hash') ||
+        element.getAttribute('data-clarity-hashalpha') ||
+        element.getAttribute('data-clarity-hashbeta'));
+}
+const getElementRank = (hash, elements) => {
+    if (!elements)
+        return 0;
+    return elements.findIndex((e) => e.hash === hash) + 1;
+};
+const buildElementInfo = (hash, rect, heatmapInfo) => {
+    if (!rect || !heatmapInfo)
+        return null;
+    const info = heatmapInfo.elementMapInfo?.[hash];
+    if (!info)
+        return null;
+    const rank = getElementRank(hash, heatmapInfo.sortedElements);
+    const clicks = info.totalclicks ?? 0;
+    const selector = info.selector ?? '';
+    const baseInfo = {
+        hash,
+        clicks,
+        rank,
+        selector,
+    };
+    return {
+        ...baseInfo,
+        ...rect,
+    };
+};
+
 const PADDING = 0;
 const ARROW_SIZE = 8;
 const HORIZONTAL_OFFSET = 0;
-// ============================================================================
-// Viewport & Dimensions
-// ============================================================================
-const getViewportDimensions = () => ({
-    width: window.innerWidth,
-    height: window.innerHeight,
-});
+
+const getViewportDimensions = (containerElm) => {
+    if (containerElm) {
+        const containerRect = containerElm.getBoundingClientRect();
+        return {
+            width: containerRect.width,
+            height: containerRect.height,
+        };
+    }
+    return {
+        width: window.innerWidth,
+        height: window.innerHeight,
+    };
+};
 const getElementDimensions = (targetElm, calloutElm) => ({
     targetRect: targetElm.getBoundingClientRect(),
     calloutRect: calloutElm.getBoundingClientRect(),
 });
-// ============================================================================
-// Alignment Order
-// ============================================================================
+
 const getAlignmentOrder = (alignment) => {
     switch (alignment) {
         case 'center':
@@ -589,9 +1053,6 @@ const getAlignmentOrder = (alignment) => {
             return ['right', 'center', 'left'];
     }
 };
-// ============================================================================
-// Position Calculation
-// ============================================================================
 const calculateLeftPosition = ({ targetRect, calloutRect, hozOffset, align, }) => {
     switch (align) {
         case 'left':
@@ -615,31 +1076,40 @@ const calculateHorizontalPlacementPosition = (targetRect, calloutRect, placement
         : targetRect.left - calloutRect.width - padding - arrowSize;
     return { top, left };
 };
-// ============================================================================
-// Validation
-// ============================================================================
-const isLeftPositionValid = (leftPos, calloutWidth, viewportWidth, padding) => {
+
+const isLeftPositionValid = (leftPos, calloutWidth, viewportWidth, padding, containerRect) => {
+    if (containerRect) {
+        return leftPos >= containerRect.left + padding && leftPos + calloutWidth <= containerRect.right - padding;
+    }
     return leftPos >= padding && leftPos + calloutWidth <= viewportWidth - padding;
 };
-const isVerticalPositionValid = (targetRect, calloutRect, placement, viewportHeight, padding, arrowSize) => {
+const isVerticalPositionValid = (targetRect, calloutRect, placement, viewportHeight, padding, arrowSize, containerRect) => {
+    if (containerRect) {
+        return placement === 'top'
+            ? targetRect.top - calloutRect.height - padding - arrowSize >= containerRect.top
+            : targetRect.bottom + calloutRect.height + padding + arrowSize <= containerRect.bottom;
+    }
     return placement === 'top'
         ? targetRect.top - calloutRect.height - padding - arrowSize > 0
         : targetRect.bottom + calloutRect.height + padding + arrowSize < viewportHeight;
 };
-const isHorizontalPlacementValid = (targetRect, calloutRect, placement, viewportWidth, padding, arrowSize) => {
+const isHorizontalPlacementValid = (targetRect, calloutRect, placement, viewportWidth, padding, arrowSize, containerRect) => {
+    if (containerRect) {
+        return placement === 'right'
+            ? targetRect.right + calloutRect.width + padding + arrowSize <= containerRect.right
+            : targetRect.left - calloutRect.width - padding - arrowSize >= containerRect.left;
+    }
     return placement === 'right'
         ? targetRect.right + calloutRect.width + padding + arrowSize < viewportWidth
         : targetRect.left - calloutRect.width - padding - arrowSize > 0;
 };
-// ============================================================================
-// Position Candidates Generation
-// ============================================================================
-const generateVerticalPositionCandidates = (targetRect, calloutRect, viewportHeight, viewportWidth, alignment, hozOffset, padding, arrowSize) => {
+
+const generateVerticalPositionCandidates = (targetRect, calloutRect, viewportHeight, viewportWidth, alignment, hozOffset, padding, arrowSize, containerRect) => {
     const candidates = [];
     const placements = ['top', 'bottom'];
     placements.forEach((placement) => {
         const verticalPos = calculateVerticalPosition(targetRect, calloutRect, placement, padding, arrowSize);
-        const verticalValid = isVerticalPositionValid(targetRect, calloutRect, placement, viewportHeight, padding, arrowSize);
+        const verticalValid = isVerticalPositionValid(targetRect, calloutRect, placement, viewportHeight, padding, arrowSize, containerRect);
         const alignmentOrder = getAlignmentOrder(alignment);
         alignmentOrder.forEach((align) => {
             const horizontalPos = calculateLeftPosition({
@@ -654,13 +1124,13 @@ const generateVerticalPositionCandidates = (targetRect, calloutRect, viewportHei
                 left: horizontalPos,
                 horizontalAlign: align,
                 valid: verticalValid &&
-                    isLeftPositionValid(horizontalPos, calloutRect.width, viewportWidth, padding),
+                    isLeftPositionValid(horizontalPos, calloutRect.width, viewportWidth, padding, containerRect),
             });
         });
     });
     return candidates;
 };
-const generateHorizontalPositionCandidates = (targetRect, calloutRect, viewportWidth, padding, arrowSize) => {
+const generateHorizontalPositionCandidates = (targetRect, calloutRect, viewportWidth, padding, arrowSize, containerRect) => {
     const placements = ['left', 'right'];
     return placements.map((placement) => {
         const { top, left } = calculateHorizontalPlacementPosition(targetRect, calloutRect, placement, padding, arrowSize);
@@ -669,46 +1139,45 @@ const generateHorizontalPositionCandidates = (targetRect, calloutRect, viewportW
             top,
             left,
             horizontalAlign: 'center',
-            valid: isHorizontalPlacementValid(targetRect, calloutRect, placement, viewportWidth, padding, arrowSize),
+            valid: isHorizontalPlacementValid(targetRect, calloutRect, placement, viewportWidth, padding, arrowSize, containerRect),
         };
     });
 };
-const generateAllPositionCandidates = (rectDimensions, viewport, alignment, hozOffset, padding, arrowSize) => {
+const generateAllPositionCandidates = (rectDimensions, viewport, alignment, hozOffset, padding, arrowSize, containerRect) => {
     const { targetRect, calloutRect } = rectDimensions;
-    const verticalCandidates = generateVerticalPositionCandidates(targetRect, calloutRect, viewport.height, viewport.width, alignment, hozOffset, padding, arrowSize);
-    const horizontalCandidates = generateHorizontalPositionCandidates(targetRect, calloutRect, viewport.width, padding, arrowSize);
+    const verticalCandidates = generateVerticalPositionCandidates(targetRect, calloutRect, viewport.height, viewport.width, alignment, hozOffset, padding, arrowSize, containerRect);
+    const horizontalCandidates = generateHorizontalPositionCandidates(targetRect, calloutRect, viewport.width, padding, arrowSize, containerRect);
     return [...verticalCandidates, ...horizontalCandidates];
 };
-// ============================================================================
-// Position Selection
-// ============================================================================
+
 const selectBestPosition = (candidates) => {
     return candidates.find((p) => p.valid) || candidates[0];
 };
-// ============================================================================
-// Viewport Boundary Adjustment
-// ============================================================================
-const constrainToViewport = (position, calloutRect, viewport, padding) => {
+const constrainToViewport = (position, calloutRect, viewport, padding, containerRect) => {
+    if (containerRect) {
+        const left = Math.max(containerRect.left + padding, Math.min(position.left, containerRect.right - calloutRect.width - padding));
+        const top = Math.max(containerRect.top + padding, Math.min(position.top, containerRect.bottom - calloutRect.height - padding));
+        return { top, left };
+    }
     const left = Math.max(padding, Math.min(position.left, viewport.width - calloutRect.width - padding));
     const top = Math.max(padding, Math.min(position.top, viewport.height - calloutRect.height - padding));
     return { top, left };
 };
-// ============================================================================
-// Main Function
-// ============================================================================
-const calcCalloutPosition = ({ targetElm, calloutElm, setPosition, hozOffset = HORIZONTAL_OFFSET, alignment = 'center', }) => {
+
+const calcCalloutPosition = ({ targetElm, calloutElm, setPosition, hozOffset = HORIZONTAL_OFFSET, alignment = 'center', containerElm, }) => {
     return () => {
         // 1. Get dimensions
         const rectDimensions = getElementDimensions(targetElm, calloutElm);
-        const viewport = getViewportDimensions();
+        const viewport = getViewportDimensions(containerElm);
+        const containerRect = containerElm?.getBoundingClientRect();
         const padding = PADDING;
         const arrowSize = ARROW_SIZE;
         // 2. Generate all position candidates
-        const candidates = generateAllPositionCandidates(rectDimensions, viewport, alignment, hozOffset, padding, arrowSize);
+        const candidates = generateAllPositionCandidates(rectDimensions, viewport, alignment, hozOffset, padding, arrowSize, containerRect);
         // 3. Select best position
         const bestPosition = selectBestPosition(candidates);
         // 4. Constrain to viewport
-        const constrainedPosition = constrainToViewport({ top: bestPosition.top, left: bestPosition.left }, rectDimensions.calloutRect, viewport, padding);
+        const constrainedPosition = constrainToViewport({ top: bestPosition.top, left: bestPosition.left }, rectDimensions.calloutRect, viewport, padding, containerRect);
         // 5. Create final position object
         const finalPosition = {
             top: constrainedPosition.top,
@@ -720,128 +1189,6 @@ const calcCalloutPosition = ({ targetElm, calloutElm, setPosition, hozOffset = H
     };
 };
 
-function getElementLayout(element) {
-    if (!element?.getBoundingClientRect)
-        return null;
-    const rect = element.getBoundingClientRect();
-    if (rect.width === 0 && rect.height === 0)
-        return null;
-    return {
-        top: rect.top,
-        left: rect.left,
-        width: rect.width,
-        height: rect.height,
-    };
-}
-const getElementAtPoint = (doc, x, y) => {
-    let el = null;
-    if ('caretPositionFromPoint' in doc) {
-        el = doc.caretPositionFromPoint(x, y)?.offsetNode ?? null;
-    }
-    el = el ?? doc.elementFromPoint(x, y);
-    let element = el;
-    while (element && element.nodeType === Node.TEXT_NODE) {
-        element = element.parentElement;
-    }
-    return element;
-};
-function getElementHash(element) {
-    return (element.getAttribute('data-clarity-hash') ||
-        element.getAttribute('data-clarity-hashalpha') ||
-        element.getAttribute('data-clarity-hashbeta'));
-}
-const getElementRank = (hash, elements) => {
-    if (!elements)
-        return 0;
-    return elements.findIndex((e) => e.hash === hash) + 1;
-};
-const buildElementInfo = (hash, rect, heatmapInfo) => {
-    if (!rect || !heatmapInfo)
-        return null;
-    const info = heatmapInfo.elementMapInfo?.[hash];
-    if (!info)
-        return null;
-    const rank = getElementRank(hash, heatmapInfo.sortedElements);
-    const clicks = info.totalclicks ?? 0;
-    const selector = info.selector ?? '';
-    const baseInfo = {
-        hash,
-        clicks,
-        rank,
-        selector,
-    };
-    return {
-        ...baseInfo,
-        ...rect,
-    };
-};
-
-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;
-    return {
-        transform: `scale(${1.2 * widthScale})`,
-        top: Number.isNaN(top) ? undefined : top,
-        left: Number.isNaN(left) ? undefined : left,
-    };
-}
-function isElementInViewport(elementRect, visualRef, scale) {
-    if (!elementRect)
-        return false;
-    const visualRect = visualRef.current?.getBoundingClientRect();
-    if (!visualRect)
-        return false;
-    // Element position relative to the document (or container's content)
-    const elementTop = elementRect.top * scale;
-    const elementBottom = (elementRect.top + elementRect.height) * scale;
-    // Current scroll position
-    const scrollTop = visualRef.current?.scrollTop || 0;
-    const viewportHeight = visualRect.height;
-    // Visible viewport range in the scrollable content
-    const viewportTop = scrollTop;
-    const viewportBottom = scrollTop + viewportHeight;
-    // Check if element is within the visible viewport
-    // Element is visible if it overlaps with the viewport
-    return elementBottom > viewportTop && elementTop < viewportBottom;
-}
-
 class IframeNavigationBlockerV2 {
     doc;
     win;
@@ -1139,7 +1486,7 @@ class IframeStyleReplacer {
     doc;
     win;
     config;
-    regex = /([-.\d]+)(vh|svh|lvh|dvh|vw|svw|lvw|dvw)/gi;
+    regex = /([-.\d]+)(vh|svh|lvh|dvh)/gi; //vw|svw|lvw|dvw
     constructor(iframe, config) {
         if (!iframe.contentDocument || !iframe.contentWindow) {
             throw new Error('Iframe document or window not accessible');
@@ -1417,48 +1764,6 @@ 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;
@@ -1477,9 +1782,7 @@ const scrollToElementIfNeeded = (visualRef, rect, scale) => {
     });
 };
 const useClickedElement = ({ visualRef, getRect }) => {
-    const selectedElement = useHeatmapInteractionStore((state) => state.selectedElement);
-    const shouldShowCallout = useHeatmapInteractionStore((state) => state.shouldShowCallout);
-    const setShouldShowCallout = useHeatmapInteractionStore((state) => state.setShouldShowCallout);
+    const { selectedElement, shouldShowCallout, setShouldShowCallout } = useHeatmapInteraction();
     const { widthScale } = useHeatmapViz();
     const { dataInfo } = useHeatmapData();
     const [clickedElement, setClickedElement] = useState(null);
@@ -1490,6 +1793,8 @@ const useClickedElement = ({ visualRef, getRect }) => {
         setShouldShowCallout(false);
     };
     useEffect(() => {
+        if (selectedElement === clickedElement?.hash)
+            return;
         if (!selectedElement || !dataInfo?.elementMapInfo) {
             reset();
             return;
@@ -1515,13 +1820,12 @@ const useClickedElement = ({ visualRef, getRect }) => {
         requestAnimationFrame(() => {
             setClickedElement(elementInfo);
         });
-    }, [selectedElement, dataInfo, getRect, visualRef, widthScale]);
-    return { clickedElement, showMissingElement, shouldShowCallout, setShouldShowCallout };
+    }, [selectedElement, dataInfo, visualRef, widthScale]);
+    return { clickedElement, showMissingElement, shouldShowCallout };
 };
 
 const useElementCalloutVisible = ({ visualRef, getRect }) => {
-    const selectedElement = useHeatmapInteractionStore((state) => state.selectedElement);
-    const setShouldShowCallout = useHeatmapInteractionStore((state) => state.setShouldShowCallout);
+    const { selectedElement, setShouldShowCallout } = useHeatmapInteraction();
     const { widthScale } = useHeatmapViz();
     const { dataInfo } = useHeatmapData();
     useEffect(() => {
@@ -1547,26 +1851,26 @@ const useElementCalloutVisible = ({ visualRef, getRect }) => {
             window.removeEventListener('resize', handleUpdate);
             visualRef?.current?.removeEventListener('scroll', handleUpdate);
         };
-    }, [selectedElement, visualRef, getRect, widthScale, dataInfo, setShouldShowCallout]);
+    }, [selectedElement, visualRef, widthScale, dataInfo]);
     return {};
 };
 
-const useHeatmapEffects = ({ isVisible, isElementSidebarOpen, setShouldShowCallout, resetAll, }) => {
-    const selectedElement = useHeatmapInteractionStore((state) => state.selectedElement);
+const useHeatmapEffects = ({ isVisible }) => {
+    useHeatmapInteraction();
+    const resetAll = () => {
+        // setShouldShowCallout(false);
+    };
     // Reset khi ẩn
     useEffect(() => {
-        if (!isVisible)
-            resetAll();
     }, [isVisible, resetAll]);
     // Ẩn callout khi sidebar mở
-    useEffect(() => {
-        if (isElementSidebarOpen && selectedElement) {
-            setShouldShowCallout(false);
-        }
-        else if (!isElementSidebarOpen && selectedElement) {
-            setShouldShowCallout(true);
-        }
-    }, [isElementSidebarOpen, selectedElement, setShouldShowCallout]);
+    // useEffect(() => {
+    //   if (isElementSidebarOpen && selectedElement) {
+    //     setShouldShowCallout(false);
+    //   } else if (!isElementSidebarOpen && selectedElement) {
+    //     setShouldShowCallout(true);
+    //   }
+    // }, [isElementSidebarOpen, selectedElement]);
 };
 
 const useHeatmapElementPosition = ({ iframeRef, wrapperRef, visualizer }) => {
@@ -1722,9 +2026,7 @@ function HeatmapComponent() {
 */
 
 const useHoveredElement = ({ iframeRef, getRect }) => {
-    const hoveredElement = useHeatmapInteractionStore((state) => state.hoveredElement);
-    const setHoveredElement = useHeatmapInteractionStore((state) => state.setHoveredElement);
-    const onSelect = useHeatmapInteractionStore((state) => state.setSelectedElement);
+    const { hoveredElement, setHoveredElement, setSelectedElement } = useHeatmapInteraction();
     const { widthScale } = useHeatmapViz();
     const { dataInfo } = useHeatmapData();
     const reset = useCallback(() => {
@@ -1739,7 +2041,15 @@ const useHoveredElement = ({ iframeRef, getRect }) => {
             return;
         }
         const iframe = iframeRef.current;
+        if (!iframe) {
+            reset();
+            return;
+        }
         const doc = iframe.contentDocument;
+        if (!doc) {
+            reset();
+            return;
+        }
         const iframeRect = iframe.getBoundingClientRect();
         const { x, y } = convertViewportToIframeCoords(event.clientX, event.clientY, iframeRect, widthScale);
         const targetElement = findTargetElement(doc, x, y, dataInfo);
@@ -1748,11 +2058,12 @@ const useHoveredElement = ({ iframeRef, getRect }) => {
             return;
         }
         const hash = getElementHash(targetElement);
-        if (!!hash)
+        if (hash)
             return hash;
         reset();
         return;
-    }, [dataInfo, iframeRef, getRect, widthScale, reset]);
+    }, [dataInfo, iframeRef, widthScale, reset]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleMouseMove = useCallback(debounce((event) => {
         if (!dataInfo) {
             reset();
@@ -1775,7 +2086,8 @@ const useHoveredElement = ({ iframeRef, getRect }) => {
     const handleClick = useCallback(() => {
         if (!hoveredElement?.hash)
             return;
-        onSelect(hoveredElement.hash);
+        setSelectedElement(hoveredElement.hash);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [hoveredElement?.hash]);
     return {
         hoveredElement,
@@ -1801,7 +2113,6 @@ const findTargetElement = (doc, x, y, heatmapInfo) => {
         const element = elementsAtPoint[i];
         const elementHash = element.getAttribute(HEATMAP_ELEMENT_ATTRIBUTE);
         if (elementHash && heatmapInfo.elementMapInfo?.[elementHash]) {
-            heatmapInfo.elementMapInfo[elementHash];
             const boundingBox = getBoundingBox(element);
             if (boundingBox) {
                 dataElement = element;
@@ -1809,7 +2120,7 @@ const findTargetElement = (doc, x, y, heatmapInfo) => {
             }
         }
     }
-    if (!!dataElement) {
+    if (dataElement) {
         return dataElement;
     }
     let targetElement = getElementAtPoint(doc, x, y);
@@ -1887,7 +2198,7 @@ function useVizLiveIframeMsg(options = {}) {
 }
 
 function useVizLiveRender() {
-    const { setIframeHeight, wrapperHeight, setIsRenderViz } = useHeatmapViz();
+    const { setIframeHeight, wrapperHeight, setIsRenderViz, wrapperWidth } = useHeatmapViz();
     const contentWidth = useHeatmapConfigStore((state) => state.width);
     const htmlContent = useHeatmapLiveStore((state) => state.htmlContent);
     const { iframeRef, isReady } = useVizLiveIframeMsg();
@@ -1905,17 +2216,20 @@ function useVizLiveRender() {
     useEffect(() => {
         if (!isReady)
             return;
+        if (!wrapperHeight)
+            return;
         if (!iframeRef.current)
             return;
+        console.log(`🚀 🐥 ~ useVizLiveRender ~ wrapperHeight:`, wrapperHeight);
         const iframe = iframeRef.current;
         if (!iframe || !htmlContent)
             return;
         setIsRenderViz(false);
-        reset(iframe, { width: contentWidth, height: wrapperHeight }, (height) => {
+        reset(iframe, { width: wrapperWidth, height: wrapperHeight }, (height) => {
             height && setIframeHeight(height);
             setIsRenderViz(true);
         });
-    }, [isReady, contentWidth, wrapperHeight]);
+    }, [isReady, contentWidth, wrapperHeight, wrapperWidth]);
     return {
         iframeRef,
     };
@@ -1936,12 +2250,17 @@ function reset(iframe, rect, onSuccess) {
 
 const useHeatmapRender = () => {
     const { data } = useHeatmapData();
-    const { vizRef, setVizRef, setIsRenderViz, setIframeHeight } = useHeatmapViz();
+    const { vizRef, setVizRef, setIsRenderViz, setIframeHeight, wrapperHeight, wrapperWidth } = useHeatmapViz();
+    console.log(`🚀 🐥 ~ useHeatmapRender ~ wrapperHeight:`, wrapperHeight);
     const iframeRef = useRef(null);
     const renderHeatmap = useCallback(async (payloads) => {
         if (!payloads || payloads.length === 0)
             return;
-        const visualizer = vizRef || new Visualizer();
+        let visualizer = vizRef;
+        if (!visualizer) {
+            visualizer = new Visualizer();
+            setVizRef(visualizer);
+        }
         setIsRenderViz(false);
         const iframe = iframeRef.current;
         if (!iframe?.contentWindow)
@@ -1950,7 +2269,6 @@ const useHeatmapRender = () => {
         initIframe(iframe, payloads, (height) => {
             height && setIframeHeight(height);
             setIsRenderViz(true);
-            setVizRef(visualizer);
         });
     }, []);
     useEffect(() => {
@@ -1965,7 +2283,9 @@ const useHeatmapRender = () => {
         iframeRef,
     };
 };
-function initIframe(iframe, payloads, onSuccess) {
+function initIframe(iframe, 
+// size: { width: number; height: number },
+payloads, onSuccess) {
     const { size } = findLastSizeOfDom(payloads);
     const docWidth = size.width ?? 0;
     const docHeight = size.height ?? 0;
@@ -2164,7 +2484,8 @@ const useContentDimensions = ({ iframeRef, }) => {
 };
 
 const useObserveIframeHeight = (props) => {
-    const { iframeRef, setIframeHeight, isRenderViz } = props;
+    const { iframeRef, isRenderViz } = props;
+    const { setIframeHeight } = useHeatmapViz();
     const resizeObserverRef = useRef(null);
     const mutationObserverRef = useRef(null);
     const debounceTimerRef = useRef(null);
@@ -2172,7 +2493,7 @@ const useObserveIframeHeight = (props) => {
     const animationFrameRef = useRef(null);
     const updateIframeHeight = useCallback(() => {
         const iframe = iframeRef.current;
-        if (!iframe || !setIframeHeight)
+        if (!iframe)
             return;
         try {
             const iframeDocument = iframe.contentDocument;
@@ -2180,7 +2501,7 @@ const useObserveIframeHeight = (props) => {
             const iframeDocumentElement = iframeDocument?.documentElement;
             if (!iframeBody || !iframeDocumentElement)
                 return;
-            iframe.style.height = 'auto';
+            // iframe.style.height = 'auto'; // TODO: check if this is needed
             requestAnimationFrame(() => {
                 const bodyHeight = Math.max(iframeBody.scrollHeight, iframeBody.offsetHeight, iframeBody.clientHeight);
                 const documentHeight = Math.max(iframeDocumentElement.scrollHeight, iframeDocumentElement.offsetHeight, iframeDocumentElement.clientHeight);
@@ -2196,7 +2517,7 @@ const useObserveIframeHeight = (props) => {
         catch (error) {
             console.warn('Cannot measure iframe content:', error);
         }
-    }, [iframeRef, setIframeHeight]);
+    }, [iframeRef]);
     const debouncedUpdate = useCallback(() => {
         // Cancel pending updates
         if (debounceTimerRef.current) {
@@ -2298,7 +2619,7 @@ const useScaleCalculation = (props) => {
             const availableWidth = containerWidth - HEATMAP_CONFIG['padding'] * 2;
             const widthScale = Math.min(availableWidth / contentWidth, 1);
             // 2. Calculate available height
-            const toolbarHeight = HEATMAP_CONFIG['heightToolbar'] ;
+            const toolbarHeight = HEATMAP_CONFIG['heightToolbar'] || 0;
             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)
@@ -2354,13 +2675,13 @@ const useScrollSync = ({ widthScale, iframeRef, }) => {
 };
 
 const useHeatmapScale = (props) => {
-    const { wrapperRef, iframeRef, iframeHeight, setIframeHeight, isRenderViz } = props;
+    const { wrapperRef, iframeRef, iframeHeight, 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, isRenderViz });
+    useObserveIframeHeight({ iframeRef, isRenderViz });
     // 4. Calculate scale
     const { widthScale } = useScaleCalculation({
         containerWidth,
@@ -2385,15 +2706,17 @@ const useWrapperRefHeight = (props) => {
     const { isActive, wrapperRef } = props;
     const resizeObserverRef = useRef(null);
     const mutationObserverRef = useRef(null);
-    const { isRenderViz, setWrapperHeight } = useHeatmapViz();
+    const { setWrapperHeight, setWrapperWidth } = useHeatmapViz();
     const updateWrapperHeight = useCallback(() => {
         const wrapper = wrapperRef.current;
         if (!wrapper)
             return;
         try {
             const wrapperHeight = wrapper.offsetHeight;
+            const wrapperWidth = wrapper.offsetWidth;
             if (wrapperHeight > 0) {
                 setWrapperHeight(wrapperHeight);
+                setWrapperWidth(wrapperWidth);
             }
         }
         catch (error) {
@@ -2402,7 +2725,7 @@ const useWrapperRefHeight = (props) => {
     }, [wrapperRef]);
     useEffect(() => {
         const wrapper = wrapperRef.current;
-        if (!wrapper || !isRenderViz)
+        if (!wrapper)
             return;
         const setupObservers = () => {
             try {
@@ -2432,6 +2755,7 @@ const useWrapperRefHeight = (props) => {
                 updateWrapperHeight();
             }
             catch (error) {
+                console.log(`🚀 🐥 ~ setupObservers ~ error:`, error);
                 console.warn('Cannot access wrapper content:', error);
             }
         };
@@ -2446,11 +2770,11 @@ const useWrapperRefHeight = (props) => {
                 mutationObserverRef.current.disconnect();
             }
         };
-    }, [wrapperRef, isRenderViz, updateWrapperHeight, isActive]);
+    }, [wrapperRef, updateWrapperHeight, isActive]);
     return {};
 };
 
-const useZonePositions = (options) => {
+const useZonePositions = (_options) => {
     const { iframeHeight } = useHeatmapViz();
     const getZonePosition = useCallback((zone) => {
         if (!iframeHeight) {
@@ -2580,184 +2904,509 @@ 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,
+class PerformanceLogger {
+    static instance;
+    metrics = [];
+    sessionId;
+    sessionStartTime;
+    config;
+    constructor() {
+        this.sessionId = `session-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        this.sessionStartTime = Date.now();
+        this.config = {
+            enabled: false,
+            logToConsole: false,
+            logLevel: 'normal',
+            thresholds: {
+                slowRenderMs: 16, // > 16ms = slower than 60fps
+                slowHookMs: 5,
+                excessiveRenderCount: 10,
+            },
         };
     }
-    // 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) {
+    static getInstance() {
+        if (!PerformanceLogger.instance) {
+            PerformanceLogger.instance = new PerformanceLogger();
+        }
+        return PerformanceLogger.instance;
+    }
+    configure(config) {
+        this.config = { ...this.config, ...config };
+        if (this.config.enabled && this.config.logToConsole) {
+            console.log('[Performance Monitor] Enabled', {
+                sessionId: this.sessionId,
+                config: this.config,
+            });
+        }
+    }
+    log(metric) {
+        if (!this.config.enabled)
+            return;
+        this.metrics.push(metric);
+        // Log to console based on level
+        if (this.config.logToConsole) {
+            this.logToConsole(metric);
+        }
+        // Send to external logger if configured
+        if (this.config.externalLogger) {
+            this.config.externalLogger(metric);
+        }
+        // Check thresholds and warn
+        this.checkThresholds(metric);
+    }
+    logToConsole(metric) {
+        const { logLevel } = this.config;
+        if (logLevel === 'minimal') {
+            // Only log warnings
+            return;
+        }
+        const style = this.getConsoleStyle(metric.type);
+        const label = `[${metric.type.toUpperCase()}] ${metric.name}`;
+        if (logLevel === 'verbose') {
+            console.log(`%c${label}`, style, metric);
+        }
+        else {
+            // Normal: Log compact info
+            const info = { name: metric.name };
+            if (metric.duration)
+                info.duration = `${metric.duration.toFixed(2)}ms`;
+            if ('viewId' in metric && metric.viewId)
+                info.viewId = metric.viewId;
+            if ('renderCount' in metric)
+                info.renderCount = metric.renderCount;
+            console.log(`%c${label}`, style, info);
+        }
+    }
+    getConsoleStyle(type) {
+        const styles = {
+            render: 'color: #61dafb; font-weight: bold',
+            hook: 'color: #ffa500; font-weight: bold',
+            store: 'color: #9c27b0; font-weight: bold',
+            function: 'color: #4caf50; font-weight: bold',
+        };
+        return styles[type] || '';
+    }
+    checkThresholds(metric) {
+        const { thresholds } = this.config;
+        // Check slow render
+        if (metric.type === 'render' && metric.duration && metric.duration > thresholds.slowRenderMs) {
+            console.warn(`[Performance] Slow render detected: ${metric.name} took ${metric.duration.toFixed(2)}ms`, metric);
+        }
+        // Check slow hook
+        if (metric.type === 'hook' && metric.duration && metric.duration > thresholds.slowHookMs) {
+            console.warn(`[Performance] Slow hook detected: ${metric.name} took ${metric.duration.toFixed(2)}ms`, metric);
+        }
+        // Check excessive renders
+        if (metric.type === 'render' && 'renderCount' in metric) {
+            const renderMetric = metric;
+            if (renderMetric.renderCount > thresholds.excessiveRenderCount) {
+                console.warn(`[Performance] Excessive renders: ${metric.name} has rendered ${renderMetric.renderCount} times`, metric);
+            }
+        }
+    }
+    generateReport() {
+        const now = Date.now();
+        const duration = now - this.sessionStartTime;
+        // Calculate summary
+        const renderMetrics = this.metrics.filter((m) => m.type === 'render');
+        const hookMetrics = this.metrics.filter((m) => m.type === 'hook');
+        const storeMetrics = this.metrics.filter((m) => m.type === 'store');
+        const totalRenders = renderMetrics.length;
+        const totalHookCalls = hookMetrics.length;
+        const totalStoreUpdates = storeMetrics.length;
+        const renderDurations = renderMetrics
+            .filter((m) => m.duration)
+            .map((m) => m.duration);
+        const averageRenderTime = renderDurations.length > 0
+            ? renderDurations.reduce((a, b) => a + b, 0) / renderDurations.length
+            : 0;
+        // View-specific metrics
+        const viewMetrics = {};
+        this.metrics.forEach((metric) => {
+            const viewId = 'viewId' in metric && metric.viewId ? metric.viewId : DEFAULT_VIEW_ID;
+            if (!viewMetrics[viewId]) {
+                viewMetrics[viewId] = { renders: 0, hookCalls: 0, storeUpdates: 0 };
+            }
+            if (metric.type === 'render')
+                viewMetrics[viewId].renders++;
+            if (metric.type === 'hook')
+                viewMetrics[viewId].hookCalls++;
+            if (metric.type === 'store')
+                viewMetrics[viewId].storeUpdates++;
+        });
+        // Find warnings
+        const renderCounts = new Map();
+        renderMetrics.forEach((m) => {
+            const key = `${m.name}-${'viewId' in m ? m.viewId : DEFAULT_VIEW_ID}`;
+            renderCounts.set(key, (renderCounts.get(key) || 0) + 1);
+        });
+        const excessiveRenders = Array.from(renderCounts.entries())
+            .filter(([, count]) => count > this.config.thresholds.excessiveRenderCount)
+            .map(([key, count]) => {
+            const [component, viewId] = key.split('-');
+            return { component, count, viewId: viewId !== DEFAULT_VIEW_ID ? viewId : undefined };
+        });
+        const slowOperations = this.metrics
+            .filter((m) => m.duration &&
+            ((m.type === 'render' && m.duration > this.config.thresholds.slowRenderMs) ||
+                (m.type === 'hook' && m.duration > this.config.thresholds.slowHookMs)))
+            .map((m) => ({
+            name: m.name,
+            duration: m.duration,
+            type: m.type,
+        }));
         return {
-            setData: (data) => compareContext.updateView({ data }),
-            setClickmap: (clickmap) => compareContext.updateView({ clickmap }),
-            setScrollmap: (scrollmap) => compareContext.updateView({ scrollmap }),
-            setDataInfo: (dataInfo) => compareContext.updateView({ dataInfo }),
+            session: {
+                id: this.sessionId,
+                startTime: this.sessionStartTime,
+                endTime: now,
+                duration,
+            },
+            summary: {
+                totalRenders,
+                totalHookCalls,
+                totalStoreUpdates,
+                averageRenderTime,
+                viewMetrics,
+            },
+            metrics: this.metrics,
+            warnings: {
+                excessiveRenders,
+                slowOperations,
+            },
         };
     }
-    return {
-        setData: setDataGlobal,
-        setClickmap: setClickmapGlobal,
-        setScrollmap: setScrollmapGlobal,
-        setDataInfo: setDataInfoGlobal,
-    };
-};
+    clearMetrics() {
+        this.metrics = [];
+        this.sessionId = `session-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        this.sessionStartTime = Date.now();
+    }
+    getMetrics() {
+        return [...this.metrics];
+    }
+    isEnabled() {
+        return this.config.enabled;
+    }
+}
+const performanceLogger = PerformanceLogger.getInstance();
 
 /**
- * Hook that returns config from compare view context if in compare mode,
- * otherwise returns config from global store
+ * Hook to track render count of a component
+ * @param componentName - Name of the component
+ * @param viewId - Optional viewId for compare mode
  */
-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,
+function useRenderCount(componentName, viewId) {
+    const renderCount = useRef(0);
+    const startTime = useRef(0);
+    // Increment before render
+    renderCount.current += 1;
+    startTime.current = performance.now();
+    useEffect(() => {
+        const duration = performance.now() - startTime.current;
+        const metric = {
+            id: `render-${componentName}-${Date.now()}`,
+            type: 'render',
+            name: componentName,
+            componentName,
+            renderCount: renderCount.current,
+            timestamp: Date.now(),
+            duration,
+            viewId,
         };
-    }
-    // Otherwise use global store
-    return {
-        heatmapType: globalHeatmapType,
-        clickType: globalClickType,
-        scrollType: globalScrollType,
-    };
-};
+        performanceLogger.log(metric);
+    });
+    return renderCount.current;
+}
 /**
- * Hook that returns config setters
- * In compare mode, updates the view context
- * In single/live mode, updates the global store
+ * Hook to detect why a component re-rendered (which props changed)
+ * @param componentName - Name of the component
+ * @param props - Props object to track
+ * @param viewId - Optional viewId
  */
-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,
+function useWhyDidYouUpdate(componentName, props, viewId) {
+    const previousProps = useRef();
+    const renderCount = useRef(0);
+    const startTime = useRef(0);
+    renderCount.current += 1;
+    startTime.current = performance.now();
+    useEffect(() => {
+        if (previousProps.current) {
+            const duration = performance.now() - startTime.current;
+            const allKeys = Object.keys({ ...previousProps.current, ...props });
+            const changedProps = [];
+            allKeys.forEach((key) => {
+                if (previousProps.current[key] !== props[key]) {
+                    changedProps.push(key);
+                }
+            });
+            if (changedProps.length > 0) {
+                const metric = {
+                    id: `render-${componentName}-${Date.now()}`,
+                    type: 'render',
+                    name: componentName,
+                    componentName,
+                    renderCount: renderCount.current,
+                    timestamp: Date.now(),
+                    duration,
+                    viewId,
+                    reason: 'Props changed',
+                    propsChanged: changedProps,
+                    metadata: {
+                        changes: changedProps.reduce((acc, key) => {
+                            acc[key] = {
+                                from: previousProps.current[key],
+                                to: props[key],
+                            };
+                            return acc;
+                        }, {}),
+                    },
+                };
+                performanceLogger.log(metric);
+            }
+        }
+        previousProps.current = props;
+    });
+}
+/**
+ * Hook to measure execution time of a function
+ * @param functionName - Name of the function
+ * @param fn - Function to measure
+ * @param viewId - Optional viewId
+ */
+function useMeasureFunction(functionName, fn, viewId) {
+    const measuredFn = ((...args) => {
+        const startTime = performance.now();
+        const result = fn(...args);
+        const duration = performance.now() - startTime;
+        performanceLogger.log({
+            id: `function-${functionName}-${Date.now()}`,
+            type: 'function',
+            name: functionName,
+            functionName,
+            timestamp: Date.now(),
+            duration,
+            viewId,
+            metadata: {
+                args: args.length,
+            },
+        });
+        return result;
+    });
+    return measuredFn;
+}
+/**
+ * Hook to track when a hook is called
+ * @param hookName - Name of the hook
+ * @param viewId - Optional viewId
+ * @param storeSlice - Optional store slice being accessed
+ */
+function useTrackHookCall(hookName, viewId, storeSlice) {
+    const startTime = useRef(0);
+    startTime.current = performance.now();
+    useEffect(() => {
+        const duration = performance.now() - startTime.current;
+        performanceLogger.log({
+            id: `hook-${hookName}-${Date.now()}`,
+            type: 'hook',
+            name: hookName,
+            hookName,
+            timestamp: Date.now(),
+            duration,
+            viewId,
+            storeSlice,
+        });
+    });
+}
+
+/**
+ * HOC to track component performance
+ * @param Component - Component to wrap
+ * @param options - Tracking options
+ */
+function withPerformanceTracking(Component, options = {}) {
+    const { trackProps = true, componentName, viewIdProp = 'viewId' } = options;
+    const WrappedComponent = (props) => {
+        const name = componentName || Component.displayName || Component.name || 'Unknown';
+        const viewId = viewIdProp in props ? props[viewIdProp] : undefined;
+        if (trackProps) {
+            useWhyDidYouUpdate(name, props, viewId); // eslint-disable-line react-hooks/rules-of-hooks
+        }
+        return jsx(Component, { ...props });
     };
-};
+    WrappedComponent.displayName = `withPerformanceTracking(${componentName || Component.displayName || Component.name})`;
+    return WrappedComponent;
+}
 
 /**
- * Hook that returns viz state from compare view context if in compare mode,
- * otherwise returns viz state from global store
+ * Middleware để track store updates
  */
-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,
+function createStorePerformanceTracker(storeName) {
+    return (config) => (set, get, api) => {
+        const wrappedSet = (partial, replace) => {
+            const startTime = performance.now();
+            const prevState = get();
+            // Call original set
+            set(partial, replace);
+            const duration = performance.now() - startTime;
+            const nextState = get();
+            // Detect which viewIds were affected
+            const affectedViews = new Set();
+            // Check Record<string, any> properties for viewId keys
+            Object.keys(nextState).forEach((key) => {
+                if (typeof prevState[key] === 'object' &&
+                    typeof nextState[key] === 'object' &&
+                    prevState[key] !== nextState[key]) {
+                    // Check if this is a Record<viewId, value> structure
+                    const prevKeys = Object.keys(prevState[key] || {});
+                    const nextKeys = Object.keys(nextState[key] || {});
+                    const allKeys = new Set([...prevKeys, ...nextKeys]);
+                    allKeys.forEach((viewId) => {
+                        if (prevState[key]?.[viewId] !== nextState[key]?.[viewId]) {
+                            affectedViews.add(viewId);
+                        }
+                    });
+                }
+            });
+            const metric = {
+                id: `store-${storeName}-${Date.now()}`,
+                type: 'store',
+                name: `${storeName} update`,
+                storeName,
+                action: typeof partial === 'function' ? 'function update' : 'direct update',
+                timestamp: Date.now(),
+                duration,
+                affectedViews: Array.from(affectedViews),
+                metadata: {
+                    stateKeys: Object.keys(nextState),
+                },
+            };
+            performanceLogger.log(metric);
         };
-    }
-    // Otherwise use global store
-    return {
-        zoomRatio: globalZoomRatio,
-        scale: globalScale,
-        isScaledToFit: globalIsScaledToFit,
-        isRenderViz: globalIsRenderViz,
-        iframeHeight: globalIframeHeight,
-        vizRef: globalVizRef,
+        return config(wrappedSet, get, api);
     };
-};
+}
 /**
- * Hook that returns viz setters
- * In compare mode, updates the view context
- * In single/live mode, updates the global store
+ * Track specific store action
  */
-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 }),
-        };
+function trackStoreAction(storeName, action, viewId, metadata) {
+    const metric = {
+        id: `store-${storeName}-${action}-${Date.now()}`,
+        type: 'store',
+        name: `${storeName}.${action}`,
+        storeName,
+        action,
+        timestamp: Date.now(),
+        viewId,
+        metadata,
+    };
+    performanceLogger.log(metric);
+}
+
+function getPerformanceReportJSON() {
+    const report = performanceLogger.generateReport();
+    return JSON.stringify(report, null, 2);
+}
+function downloadPerformanceReport(filename = 'heatmap-performance-report.json') {
+    const report = performanceLogger.generateReport();
+    const blob = new Blob([JSON.stringify(report, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    link.click();
+    URL.revokeObjectURL(url);
+}
+async function sendPerformanceReport(endpoint) {
+    const report = performanceLogger.generateReport();
+    try {
+        const response = await fetch(endpoint, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(report),
+        });
+        if (!response.ok) {
+            throw new Error(`Failed to send report: ${response.statusText}`);
+        }
+    }
+    catch (error) {
+        console.error('[Performance] Failed to send report:', error);
+        throw error;
+    }
+}
+function printPerformanceSummary() {
+    const report = performanceLogger.generateReport();
+    console.group('📊 Performance Summary');
+    console.log('Session:', report.session);
+    console.log('Total Renders:', report.summary.totalRenders);
+    console.log('Total Hook Calls:', report.summary.totalHookCalls);
+    console.log('Total Store Updates:', report.summary.totalStoreUpdates);
+    console.log('Average Render Time:', `${report.summary.averageRenderTime.toFixed(2)}ms`);
+    console.log('View Metrics:', report.summary.viewMetrics);
+    if (report.warnings.excessiveRenders.length > 0) {
+        console.group('⚠️ Excessive Renders');
+        report.warnings.excessiveRenders.forEach((warning) => {
+            console.warn(`${warning.component}${warning.viewId ? ` (${warning.viewId})` : ''}: ${warning.count} renders`);
+        });
+        console.groupEnd();
+    }
+    if (report.warnings.slowOperations.length > 0) {
+        console.group('🐌 Slow Operations');
+        report.warnings.slowOperations.forEach((warning) => {
+            console.warn(`${warning.name} (${warning.type}): ${warning.duration.toFixed(2)}ms`);
+        });
+        console.groupEnd();
     }
+    console.groupEnd();
+}
+function getMetricsByViewId(viewId) {
+    const allMetrics = performanceLogger.getMetrics();
+    const filteredMetrics = allMetrics.filter((m) => {
+        return 'viewId' in m && m.viewId === viewId;
+    });
+    const report = performanceLogger.generateReport();
     return {
-        setZoomRatio: setZoomRatioGlobal,
-        setScale: setScaleGlobal,
-        setIsScaledToFit: setIsScaledToFitGlobal,
-        setIsRenderViz: setIsRenderVizGlobal,
-        setIframeHeight: setIframeHeightGlobal,
-        setVizRef: setVizRefGlobal,
+        ...report,
+        metrics: filteredMetrics,
+        summary: {
+            ...report.summary,
+            totalRenders: filteredMetrics.filter((m) => m.type === 'render').length,
+            totalHookCalls: filteredMetrics.filter((m) => m.type === 'hook').length,
+            totalStoreUpdates: filteredMetrics.filter((m) => m.type === 'store').length,
+            averageRenderTime: 0, // Recalculate if needed
+            viewMetrics: {
+                [viewId]: report.summary.viewMetrics[viewId] || {
+                    renders: 0,
+                    hookCalls: 0,
+                    storeUpdates: 0,
+                },
+            },
+        },
     };
-};
+}
+function compareViewPerformance(viewId1, viewId2) {
+    const report = performanceLogger.generateReport();
+    const view1Metrics = report.summary.viewMetrics[viewId1] || {
+        renders: 0,
+        hookCalls: 0,
+        storeUpdates: 0,
+    };
+    const view2Metrics = report.summary.viewMetrics[viewId2] || {
+        renders: 0,
+        hookCalls: 0,
+        storeUpdates: 0,
+    };
+    return {
+        view1: view1Metrics,
+        view2: view2Metrics,
+        difference: {
+            renders: view1Metrics.renders - view2Metrics.renders,
+            hookCalls: view1Metrics.hookCalls - view2Metrics.hookCalls,
+            storeUpdates: view1Metrics.storeUpdates - view2Metrics.storeUpdates,
+        },
+    };
+}
 
 const BoxStack = forwardRef(({ children, ...props }, ref) => {
     const id = props.id;
@@ -2770,7 +3419,7 @@ const BoxStack = forwardRef(({ children, ...props }, ref) => {
     const style = props.style || {};
     const gap = props.gap || 0;
     const height = props.height || 'auto';
-    const isZIndexDefined = typeof props.zIndex !== undefined;
+    const isZIndexDefined = typeof props.zIndex !== 'undefined';
     const zIndex = props.zIndex;
     const backgroundColor = props.backgroundColor || 'transparent';
     const styleGap = useMemo(() => {
@@ -2801,6 +3450,7 @@ const BoxStack = forwardRef(({ children, ...props }, ref) => {
     };
     return (jsx("div", { id: id, style: styleProps, ref: ref, children: children }));
 });
+BoxStack.displayName = 'BoxStack';
 
 const ContentTopBar = () => {
     const controls = useHeatmapControlStore((state) => state.controls);
@@ -2817,8 +3467,9 @@ const ContentTopBar = () => {
 
 const ContentMetricBar = () => {
     const controls = useHeatmapControlStore((state) => state.controls);
+    const borderBottom = `${HEATMAP_CONFIG.borderWidth}px solid ${HEATMAP_CONFIG.borderColor}`;
     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}`,
+            borderBottom,
         }, children: controls.MetricBar ?? null }));
 };
 
@@ -2834,30 +3485,88 @@ const ContentToolbar = () => {
         }, children: controls.Toolbar ?? null }));
 };
 
+const ContentSidebar = () => {
+    const controls = useHeatmapControlStore((state) => state.controls);
+    const { state } = useHeatmapInteraction();
+    const isHideSidebar = state.hideSidebar;
+    const sidebarWidth = useHeatmapConfigStore((state) => state.sidebarWidth);
+    const mode = useHeatmapConfigStore((state) => state.mode);
+    const SidebarComponent = controls.Sidebar ?? null;
+    const isCompareMode = mode === 'compare';
+    if (isCompareMode)
+        return null;
+    if (!SidebarComponent)
+        return null;
+    return (jsx("div", { className: "gx-hm-sidebar", style: {
+            height: '100%',
+            display: 'flex',
+            zIndex: 1,
+            ...(isHideSidebar
+                ? {
+                    width: '0',
+                    transform: 'translateX(-100%)',
+                    visibility: 'hidden',
+                }
+                : { width: `${sidebarWidth}px + ${HEATMAP_CONFIG.borderWidth}px` }),
+        }, children: jsx("div", { className: "gx-hm-sidebar-wrapper", style: {
+                height: '100%',
+                width: `calc(${sidebarWidth}px + ${HEATMAP_CONFIG.borderWidth}px)`,
+                borderRight: `${HEATMAP_CONFIG.borderWidth}px solid ${HEATMAP_CONFIG.borderColor}`,
+            }, children: jsx(SidebarComponent, {}) }) }));
+};
+
+const PopoverSidebar = () => {
+    const mode = useHeatmapConfigStore((state) => state.mode);
+    const CompSidebar = useHeatmapControlStore((state) => state.controls.Sidebar);
+    const CompSidebarActivator = useHeatmapControlStore((state) => state.controls.SidebarActivator);
+    const sidebarWidth = useHeatmapConfigStore((state) => state.sidebarWidth);
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+    const { state } = useHeatmapInteraction();
+    const isCompareMode = mode === 'compare';
+    const isHideSidebar = state.hideSidebar;
+    const stylePopover = {
+        position: 'absolute',
+        top: '24px',
+        left: '24px',
+        zIndex: Z_INDEX.SIDEBAR_POPOVER,
+        height: `calc(100% - ${HEATMAP_CONFIG.heightToolbar}px - ${HEATMAP_CONFIG.padding}px - 24px)`,
+        width: `calc(${sidebarWidth}px + ${HEATMAP_CONFIG.borderWidth}px)`,
+    };
+    if (isHideSidebar || !isCompareMode)
+        return null;
+    if (!CompSidebar || !CompSidebarActivator)
+        return null;
+    return (jsxs("div", { children: [!isPopoverOpen && (jsx("div", { style: { ...stylePopover, width: 'auto', height: 'auto' }, children: jsx(CompSidebarActivator, { onClick: () => setIsPopoverOpen(true) }) })), isPopoverOpen && (jsx(Fragment, { children: jsx("div", { className: "gx-hm-sidebar-popover", style: {
+                        ...stylePopover,
+                        backgroundColor: '#fff',
+                        borderRight: `${HEATMAP_CONFIG.borderWidth}px solid ${HEATMAP_CONFIG.borderColor}`,
+                        borderRadius: '8px',
+                        boxShadow: '4px 0 12px rgba(0, 0, 0, 0.15)',
+                        overflow: 'auto',
+                    }, children: jsx(CompSidebar, { closeAction: { onClick: () => setIsPopoverOpen(false) } }) }) }))] }));
+};
+
 const VizContainer = ({ children, isActive = false }) => {
     const wrapperRef = useRef(null);
+    const viewId = useViewId();
     useWrapperRefHeight({
         isActive,
         wrapperRef,
     });
-    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 }) }));
+    return (jsxs(BoxStack, { ref: wrapperRef, id: `gx-hm-viz-container-${viewId}`, 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 }), jsx(PopoverSidebar, {})] }));
 };
 
 const useClickmap = () => {
-    const [isInitialized, setIsInitialized] = useState(false);
-    const { clickmap } = useHeatmapData();
     const { vizRef } = useHeatmapViz();
+    const { clickmap } = useHeatmapData();
     const start = useCallback(() => {
-        if (isInitialized)
-            return;
         if (!vizRef || !clickmap || clickmap.length === 0)
             return;
         try {
             vizRef?.clearmap?.();
             vizRef?.clickmap?.(clickmap);
-            setIsInitialized(true);
         }
         catch (error) {
             console.error(`🚀 🐥 ~ useClickmap ~ error:`, error);
@@ -2885,7 +3594,7 @@ const useScrollmap = () => {
     return { start };
 };
 
-const useHeatmapCanvas = ({ iframeRef, }) => {
+const useHeatmapCanvas = () => {
     const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
     const { start: startClickmap } = useClickmap();
     const { start: startScrollmap } = useScrollmap();
@@ -2901,10 +3610,28 @@ const useHeatmapCanvas = ({ iframeRef, }) => {
     }, [heatmapType, startClickmap, startScrollmap]);
 };
 
-const CLICKED_ELEMENT_ID = 'gx-hm-clicked-element';
-const SECONDARY_CLICKED_ELEMENT_ID = 'gx-hm-secondary-clicked-element';
-const HOVERED_ELEMENT_ID = 'gx-hm-hovered-element';
-const SECONDARY_HOVERED_ELEMENT_ID = 'gx-hm-secondary-hovered-element';
+// Base IDs for elements (without viewId suffix)
+const CLICKED_ELEMENT_ID_BASE = 'gx-hm-clicked-element';
+const SECONDARY_CLICKED_ELEMENT_ID_BASE = 'gx-hm-secondary-clicked-element';
+const HOVERED_ELEMENT_ID_BASE = 'gx-hm-hovered-element';
+const SECONDARY_HOVERED_ELEMENT_ID_BASE = 'gx-hm-secondary-hovered-element';
+/**
+ * Generate unique element ID for a specific view
+ * @param baseId - Base element ID
+ * @param viewId - View ID
+ * @returns Unique element ID (e.g., 'gx-hm-clicked-element-view-0')
+ */
+const getElementId = (baseId, viewId) => {
+    return `${baseId}-${viewId}`;
+};
+const getClickedElementId = (viewId, isSecondary = false) => {
+    const baseId = isSecondary ? SECONDARY_CLICKED_ELEMENT_ID_BASE : CLICKED_ELEMENT_ID_BASE;
+    return getElementId(baseId, viewId);
+};
+const getHoveredElementId = (viewId, isSecondary = false) => {
+    const baseId = isSecondary ? SECONDARY_HOVERED_ELEMENT_ID_BASE : HOVERED_ELEMENT_ID_BASE;
+    return getElementId(baseId, viewId);
+};
 
 const RankBadge = ({ index, elementRect, widthScale, clickOnElement, }) => {
     const style = calculateRankPosition(elementRect, widthScale);
@@ -2934,6 +3661,7 @@ const DEFAULT_POSITION = {
 };
 const ElementCallout = (props) => {
     const CompElementCallout = useHeatmapControlStore((state) => state.controls.ElementCallout);
+    const viewId = useViewId();
     const { element, target, visualRef, hozOffset, alignment = 'left' } = props;
     const calloutRef = useRef(null);
     const [position, setPosition] = useState(DEFAULT_POSITION);
@@ -2948,6 +3676,7 @@ const ElementCallout = (props) => {
             setPosition,
             hozOffset,
             alignment,
+            containerElm: visualRef?.current,
         });
         positionFn();
         const handleUpdate = () => {
@@ -2966,9 +3695,9 @@ const ElementCallout = (props) => {
             position: 'fixed',
             top: position.top,
             left: position.left,
-            zIndex: 2147483647,
+            zIndex: Z_INDEX.CALLOUT,
         }, "aria-live": "assertive", role: "tooltip", children: CompElementCallout && jsx(CompElementCallout, { elementHash: element.hash }) }));
-    return createPortal(calloutContent, document.getElementById('gx-hm-viz-container'));
+    return createPortal(calloutContent, document.getElementById(`gx-hm-viz-container-${viewId}`));
 };
 
 const ElementMissing = ({ show = true }) => {
@@ -2992,17 +3721,8 @@ const ElementMissing = ({ show = true }) => {
         }, "aria-live": "assertive", children: "Element not visible on current screen" }));
 };
 
-const TARGET_ID_BY_TYPE = {
-    hovered: {
-        default: HOVERED_ELEMENT_ID,
-        secondary: SECONDARY_HOVERED_ELEMENT_ID,
-    },
-    clicked: {
-        default: CLICKED_ELEMENT_ID,
-        secondary: SECONDARY_CLICKED_ELEMENT_ID,
-    },
-};
-const ElementOverlay = ({ type, element, onClick, isSecondary }) => {
+const ElementOverlay = ({ type, element, onClick, isSecondary, elementId, }) => {
+    // useRenderCount('ElementOverlay');
     const { widthScale } = useHeatmapViz();
     if (!element || (element.width === 0 && element.height === 0))
         return null;
@@ -3011,8 +3731,7 @@ const ElementOverlay = ({ type, element, onClick, isSecondary }) => {
     const left = element.left + HEATMAP_CONFIG['borderWidthIframe'];
     const width = element.width;
     const height = element.height;
-    const targetId = TARGET_ID_BY_TYPE[type][isSecondary ? 'secondary' : 'default'];
-    return (jsxs(Fragment$1, { children: [jsx("div", { onClick: onClick, className: "heatmapElement", id: targetId, style: {
+    return (jsxs(Fragment$1, { children: [jsx("div", { onClick: onClick, className: "heatmapElement", id: elementId, style: {
                     top,
                     left,
                     width,
@@ -3026,14 +3745,17 @@ const ELEMENT_CALLOUT = {
     alignment: 'left',
 };
 const HeatmapElements = (props) => {
+    const viewId = useViewId();
     const { iframeHeight } = useHeatmapViz();
-    const { iframeRef, wrapperRef, visualRef, visualizer, iframeDimensions, isElementSidebarOpen, isVisible = true, areDefaultRanksHidden, isSecondary, } = props;
+    const clickedElementId = getClickedElementId(viewId, props.isSecondary);
+    const hoveredElementId = getHoveredElementId(viewId, props.isSecondary);
+    const { iframeRef, wrapperRef, visualRef, visualizer, iframeDimensions, isVisible = true, areDefaultRanksHidden, isSecondary, } = props;
     const getRect = useHeatmapElementPosition({
         iframeRef,
         wrapperRef,
         visualizer,
     });
-    const { clickedElement, showMissingElement, shouldShowCallout, setShouldShowCallout } = useClickedElement({
+    const { clickedElement, showMissingElement, shouldShowCallout } = useClickedElement({
         visualRef,
         getRect,
     });
@@ -3041,25 +3763,12 @@ const HeatmapElements = (props) => {
         iframeRef,
         getRect,
     });
-    useElementCalloutVisible({
-        visualRef,
-        getRect,
-    });
-    const resetAll = () => {
-        // setShouldShowCallout(false);
-    };
-    useHeatmapEffects({
-        isVisible,
-        isElementSidebarOpen,
-        setShouldShowCallout,
-        resetAll,
-    });
+    useElementCalloutVisible({ visualRef, getRect });
+    useHeatmapEffects({ isVisible });
+    useRenderCount('HeatmapElements');
     if (!isVisible)
         return null;
-    return (jsxs("div", { onMouseMove: (event) => {
-            handleMouseMove(event);
-            // handleMouseMove2(event as any);
-        }, onMouseLeave: handleMouseLeave, className: "gx-hm-elements", style: { ...iframeDimensions, height: `${iframeHeight}px` }, children: [jsx(ElementMissing, { show: showMissingElement }), jsx(DefaultRankBadges, { getRect: getRect, hidden: areDefaultRanksHidden }), jsx(ElementOverlay, { type: "clicked", element: clickedElement, isSecondary: isSecondary }), jsx(ElementOverlay, { type: "hovered", element: hoveredElement, isSecondary: isSecondary, onClick: handleClick }), hoveredElement?.hash !== clickedElement?.hash && hoveredElement && (jsx(ElementCallout, { element: hoveredElement, target: `#${HOVERED_ELEMENT_ID}`, visualRef: visualRef, ...ELEMENT_CALLOUT })), shouldShowCallout && clickedElement && (jsx(ElementCallout, { element: clickedElement, target: `#${CLICKED_ELEMENT_ID}`, visualRef: visualRef, ...ELEMENT_CALLOUT }))] }));
+    return (jsxs("div", { onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, className: "gx-hm-elements", style: { ...iframeDimensions, height: `${iframeHeight}px` }, children: [jsx(ElementMissing, { show: showMissingElement }), jsx(DefaultRankBadges, { getRect: getRect, hidden: areDefaultRanksHidden }), jsx(ElementOverlay, { type: "clicked", element: clickedElement, isSecondary: isSecondary, elementId: clickedElementId }), jsx(ElementOverlay, { type: "hovered", element: hoveredElement, isSecondary: isSecondary, onClick: handleClick, elementId: hoveredElementId }), hoveredElement?.hash !== clickedElement?.hash && hoveredElement && (jsx(ElementCallout, { element: hoveredElement, target: `#${hoveredElementId}`, visualRef: visualRef, ...ELEMENT_CALLOUT })), shouldShowCallout && clickedElement && (jsx(ElementCallout, { element: clickedElement, target: `#${clickedElementId}`, visualRef: visualRef, ...ELEMENT_CALLOUT }))] }));
 };
 
 const VizElements = ({ iframeRef, visualRef, wrapperRef }) => {
@@ -3068,23 +3777,12 @@ const VizElements = ({ iframeRef, visualRef, wrapperRef }) => {
     const { vizRef } = useHeatmapViz();
     const visualizer = {
         get: (hash) => {
-            if (vizRef) {
-                return vizRef.get(hash);
-            }
-            const doc = iframeRef.current?.contentDocument;
-            if (!doc)
+            if (!vizRef)
                 return null;
-            const elmHashAlpha = doc.querySelector(`[data-clarity-hashalpha="${hash}"]`);
-            if (elmHashAlpha) {
-                return elmHashAlpha;
-            }
-            const elmHash = doc.querySelector(`[data-clarity-hash="${hash}"]`);
-            if (elmHash) {
-                return elmHash;
-            }
-            return null;
+            return vizRef.get(hash);
         },
     };
+    // useRenderCount('VizElements');
     if (!iframeRef.current)
         return null;
     return (jsx(HeatmapElements, { visualizer: visualizer, visualRef: visualRef, iframeRef: iframeRef, wrapperRef: wrapperRef, heatmapInfo: dataInfo, isVisible: true, iframeDimensions: {
@@ -3209,8 +3907,8 @@ const ScrollmapMarker = ({ iframeRef, wrapperRef }) => {
 };
 
 const ScrollMapMinimap = ({ zones, maxUsers }) => {
-    const showMinimap = useHeatmapVizScrollmapStore((state) => state.showMinimap);
     const scrollType = useHeatmapConfigStore((state) => state.scrollType);
+    const { showMinimap } = useHeatmapVizScrollmap();
     const isScrollType = [IScrollType.Attention].includes(scrollType);
     if (!showMinimap || !isScrollType)
         return null;
@@ -3370,6 +4068,7 @@ const SCROLL_TYPES = [IHeatmapType.Scroll];
 const VizScrollMap = ({ iframeRef, wrapperRef }) => {
     const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
     const { iframeHeight } = useHeatmapViz();
+    // useRenderCount('VizScrollMap');
     const isHeatmapScroll = SCROLL_TYPES.includes(heatmapType);
     if (!iframeHeight || !isHeatmapScroll)
         return null;
@@ -3386,9 +4085,7 @@ const VizScrollMap = ({ iframeRef, wrapperRef }) => {
 const WrapperVisual = ({ children, visualRef, wrapperRef, scaledHeight, iframeHeight, onScroll, }) => {
     const contentWidth = useHeatmapConfigStore((state) => state.width);
     const { widthScale } = useHeatmapViz();
-    const contentHeight = scaledHeight > 0
-        ? `${scaledHeight + HEATMAP_CONFIG['heightToolbar'] + HEATMAP_CONFIG['padding'] * 2}px`
-        : 'auto';
+    const contentHeight = calcContentHeight();
     return (jsx("div", { ref: visualRef, className: "gx-hm-visual", onScroll: onScroll, style: {
             overflow: 'hidden scroll',
             display: 'flex',
@@ -3413,15 +4110,20 @@ const WrapperVisual = ({ children, visualRef, wrapperRef, scaledHeight, iframeHe
                     transformOrigin: 'top center',
                     paddingBlockEnd: '0',
                 }, children: children }) }) }));
+    function calcContentHeight() {
+        return scaledHeight > 0
+            ? `${scaledHeight + HEATMAP_CONFIG['heightToolbar'] + HEATMAP_CONFIG['padding'] * 2}px`
+            : 'auto';
+    }
 };
 
 const VizDomRenderer = ({ mode = 'heatmap' }) => {
-    const width = useHeatmapConfigStore((state) => state.width);
+    const contentWidth = useHeatmapConfigStore((state) => state.width || 0);
     const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
-    const setSelectedElement = useHeatmapInteractionStore((state) => state.setSelectedElement);
-    const { iframeHeight, setIframeHeight, isRenderViz } = useHeatmapViz();
     const wrapperRef = useRef(null);
     const visualRef = useRef(null);
+    const { setSelectedElement } = useHeatmapInteraction();
+    const { iframeHeight, setIframeHeight, isRenderViz } = useHeatmapViz();
     const { iframeRef } = useHeatmapVizRender(mode);
     const { scaledHeight, handleScroll } = useHeatmapScale({
         wrapperRef,
@@ -3430,12 +4132,12 @@ const VizDomRenderer = ({ mode = 'heatmap' }) => {
         iframeHeight,
         isRenderViz,
     });
-    const contentWidth = width ?? 0;
+    useHeatmapCanvas();
+    useRenderCount('VizDomRenderer');
     const onScroll = (e) => {
         const scrollTop = e.currentTarget.scrollTop;
         handleScroll(scrollTop);
     };
-    useHeatmapCanvas({ iframeRef: iframeRef });
     const cleanUp = () => {
         setIframeHeight(0);
         setSelectedElement(null);
@@ -3451,21 +4153,15 @@ const VizLoading = () => {
 };
 
 const VizDomHeatmap = () => {
-    const controls = useHeatmapControlStore((state) => state.controls);
-    const { isRendering } = useHeatmapData();
-    console.log(`🚀 🐥 ~ VizDomHeatmap ~ isRendering:`, isRendering);
-    const { iframeHeight, setIframeHeight, setVizRef } = useHeatmapViz();
-    const viewId = useViewId();
+    const { iframeHeight, setIframeHeight } = useHeatmapViz();
+    useRenderCount('VizDomHeatmap');
     useEffect(() => {
         return () => {
-            console.log(`🚀 🐥 ~ useEffect ~ return:`, viewId, iframeHeight);
-            setVizRef(null);
+            console.log('🚀 🐥 ~ useEffect ~ return:');
             setIframeHeight(0);
         };
     }, []);
-    if (isRendering)
-        return controls.VizLoading ?? null;
-    return (jsxs(VizContainer, { children: [jsx(VizDomRenderer, {}), iframeHeight === 0 && jsx(VizLoading, {})] }));
+    return (jsxs(VizContainer, { isActive: true, children: [jsx(VizDomRenderer, {}), iframeHeight === 0 && jsx(VizLoading, {})] }));
 };
 
 const VizLiveRenderer = () => {
@@ -3480,7 +4176,6 @@ const VizLiveRenderer = () => {
         visualRef,
         iframeHeight,
         isRenderViz,
-        setIframeHeight,
     });
     const onScroll = (e) => {
         const scrollTop = e.currentTarget.scrollTop;
@@ -3492,8 +4187,6 @@ const VizLiveRenderer = () => {
 };
 
 const VizLiveHeatmap = () => {
-    const controls = useHeatmapControlStore((state) => state.controls);
-    const isRendering = useHeatmapConfigStore((state) => state.isRendering);
     const { iframeHeight, wrapperHeight } = useHeatmapViz();
     const reset = useHeatmapLiveStore((state) => state.reset);
     useEffect(() => {
@@ -3501,13 +4194,15 @@ const VizLiveHeatmap = () => {
             reset();
         };
     }, []);
-    if (isRendering)
-        return controls.VizLoading ?? null;
     return (jsxs(VizContainer, { isActive: true, children: [jsx(VizLiveRenderer, {}), (!iframeHeight || !wrapperHeight) && jsx(VizLoading, {})] }));
 };
 
 const ContentVizByMode = () => {
     const mode = useHeatmapConfigStore((state) => state.mode);
+    const isRendering = useHeatmapConfigStore((state) => state.isRendering);
+    const controls = useHeatmapControlStore((state) => state.controls);
+    if (isRendering)
+        return controls.VizLoading ?? null;
     switch (mode) {
         case 'live':
             return jsx(VizLiveHeatmap, {});
@@ -3518,75 +4213,12 @@ const ContentVizByMode = () => {
     }
 };
 
-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;
-    }
-    return (jsx("div", { className: "gx-hm-sidebar", style: {
-            height: '100%',
-            display: 'flex',
-            zIndex: 1,
-            ...(isHideSidebar
-                ? {
-                    width: '0',
-                    transform: 'translateX(-100%)',
-                    visibility: 'hidden',
-                }
-                : { width: `${sidebarWidth}px + ${HEATMAP_CONFIG.borderWidth}px` }),
-        }, children: jsx("div", { className: "gx-hm-sidebar-wrapper", style: {
-                height: '100%',
-                width: `calc(${sidebarWidth}px + ${HEATMAP_CONFIG.borderWidth}px)`,
-                borderRight: `${HEATMAP_CONFIG.borderWidth}px solid ${HEATMAP_CONFIG.borderColor}`,
-            }, children: controls.Sidebar ?? null }) }));
-};
-
 const WrapperPreview = () => {
-    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, {})] })] }));
+    return (jsxs(BoxStack, { id: "gx-hm-container", flexDirection: "row", overflow: "hidden", flex: "1", position: "relative", children: [jsx(ContentSidebar, {}), jsxs(BoxStack, { flexDirection: "column", flex: "1", children: [jsx(ContentMetricBar, {}), jsx(ContentVizByMode, {}), jsx(ContentToolbar, {})] })] }));
 };
 
 const WrapperLayout = () => {
+    useRenderCount('WrapperLayout');
     return (jsxs(BoxStack, { id: "gx-hm-layout", flexDirection: "column", flex: "1", children: [jsx(ContentTopBar, {}), jsx(WrapperPreview, {})] }));
 };
 
@@ -3595,6 +4227,19 @@ const HeatmapLayout = ({ data, clickmap, scrollmap, controls, dataInfo, }) => {
     useRegisterData(data, dataInfo);
     useRegisterHeatmap({ clickmap, scrollmap });
     useRegisterConfig();
+    performanceLogger.configure({
+        enabled: true,
+        logToConsole: false,
+        logLevel: 'normal', // 'verbose' | 'normal' | 'minimal'
+        thresholds: {
+            slowRenderMs: 16, // Warn if render > 16ms (60fps)
+            slowHookMs: 5, // Warn if hook > 5ms
+            excessiveRenderCount: 10, // Warn if component renders > 10 times
+        },
+        externalLogger: (metric) => {
+            if (metric.name === 'VizDomRenderer') ;
+        },
+    });
     return (jsx(BoxStack, { id: "gx-hm-project", flexDirection: "column", flex: "1", height: "100%", style: getVariableStyle(), children: jsx(BoxStack, { id: "gx-hm-project-content", flexDirection: "column", flex: "1", children: jsx("div", { style: {
                     minHeight: '100%',
                     display: 'flex',
@@ -3608,4 +4253,4 @@ const HeatmapLayout = ({ data, clickmap, scrollmap, controls, dataInfo, }) => {
     }
 };
 
-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 };
+export { DEFAULT_SIDEBAR_WIDTH, DEFAULT_VIEW_ID, GraphView, HEATMAP_CONFIG, HEATMAP_IFRAME, HEATMAP_STYLE, HeatmapLayout, IClickType, IHeatmapType, IScrollType, ViewIdContext, Z_INDEX, compareViewPerformance, convertViewportToIframeCoords, createStorePerformanceTracker, downloadPerformanceReport, getCompareViewId, getCompareViewIndex, getMetricsByViewId, getPerformanceReportJSON, getScrollGradientColor, isCompareViewId, performanceLogger, printPerformanceSummary, sendPerformanceReport, trackStoreAction, useClickedElement, useDebounceCallback, useElementCalloutVisible, useHeatmapCompareStore, useHeatmapConfigStore, useHeatmapCopyView, useHeatmapData, useHeatmapDataStore, useHeatmapEffects, useHeatmapElementPosition, useHeatmapInteraction, useHeatmapInteractionStore, useHeatmapLiveStore, useHeatmapScale, useHeatmapSingleStore, useHeatmapViz, useHeatmapVizRender, useHeatmapVizScrollmap, useHeatmapVizScrollmapStore, useHeatmapVizStore, useHoveredElement, useIsCompareMode, useMeasureFunction, useRegisterConfig, useRegisterControl, useRegisterData, useRegisterHeatmap, useRenderCount, useScrollmapZones, useTrackHookCall, useViewId, useVizLiveRender, useWhyDidYouUpdate, useWrapperRefHeight, useZonePositions, withPerformanceTracking };