@gemx-dev/heatmap-react 3.5.61 → 3.5.63

package/dist/esm/index.mjs

@@ -149,32 +149,15 @@ function useDebounceCallback(callback, delay) {
     }, [delay]);
 }
 
-const useHeatmapControlStore = create()((set, get) => {
-    return {
-        controls: {
-            Sidebar: undefined,
-            SidebarActivator: undefined,
-            Toolbar: null,
-            MetricBar: null,
-            VizLoading: null,
-            TopBar: undefined,
-            ElementCallout: undefined,
-        },
-        registerControl: (key, control) => {
-            set({
-                controls: {
-                    ...get().controls,
-                    [key]: control,
-                },
-            });
-        },
-    };
-});
-
+var IDeviceType;
+(function (IDeviceType) {
+    IDeviceType["Desktop"] = "desktop";
+    IDeviceType["Mobile"] = "mobile";
+    IDeviceType["Tablet"] = "tablet";
+})(IDeviceType || (IDeviceType = {}));
 var IHeatmapType;
 (function (IHeatmapType) {
     IHeatmapType["Click"] = "click";
-    IHeatmapType["ClickArea"] = "click-area";
     IHeatmapType["Scroll"] = "scroll";
 })(IHeatmapType || (IHeatmapType = {}));
 var IClickType;
@@ -186,6 +169,15 @@ var IClickType;
     IClickType["First"] = "first-clicks";
     IClickType["Last"] = "last-clicks";
 })(IClickType || (IClickType = {}));
+var IClickRankType;
+(function (IClickRankType) {
+    IClickRankType["MostClicks"] = "most-clicks";
+    IClickRankType["Revenue"] = "revenue";
+    IClickRankType["AttributionRate"] = "attribution-rate";
+    IClickRankType["ConversionRate"] = "conversion-rate";
+    IClickRankType["RevenuePerClick"] = "revenue-per-click";
+    IClickRankType["RevenuePerSession"] = "revenue-per-session";
+})(IClickRankType || (IClickRankType = {}));
 var IClickMode;
 (function (IClickMode) {
     IClickMode["Default"] = "default";
@@ -198,24 +190,37 @@ var IScrollType;
     IScrollType["Revenue"] = "revenue-scroll";
 })(IScrollType || (IScrollType = {}));
 
+const useHeatmapControlStore = create()((set, get) => {
+    return {
+        controls: {
+            Sidebar: undefined,
+            SidebarActivator: undefined,
+            Toolbar: null,
+            MetricBar: null,
+            VizLoading: null,
+            TopBar: undefined,
+            ElementCallout: undefined,
+        },
+        registerControl: (key, control) => {
+            set({
+                controls: {
+                    ...get().controls,
+                    [key]: control,
+                },
+            });
+        },
+    };
+});
+
 const useHeatmapConfigStore = create()((set) => {
     return {
         mode: 'single',
-        width: 1440,
         sidebarWidth: DEFAULT_SIDEBAR_WIDTH,
-        heatmapType: IHeatmapType.Click,
-        clickType: IClickType.Total,
         clickMode: IClickMode.Default,
-        scrollType: IScrollType.Depth,
         isRendering: true,
         setMode: (mode) => set({ mode }),
         resetMode: () => set({ mode: 'single' }),
-        setWidth: (width) => set({ width }),
         setSidebarWidth: (sidebarWidth) => set({ sidebarWidth }),
-        setHeatmapType: (heatmapType) => set({ heatmapType }),
-        setClickType: (clickType) => set({ clickType }),
-        setClickMode: (clickMode) => set({ clickMode }),
-        setScrollType: (scrollType) => set({ scrollType }),
         setIsRendering: (isRendering) => set({ isRendering }),
     };
 });
@@ -259,6 +264,16 @@ const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
             newScrollmap.set(viewId, scrollmap);
             return { scrollmap: newScrollmap };
         }),
+        setDataInfoByKey: (key, value, viewId = DEFAULT_VIEW_ID) => set((prev) => {
+            const currentHeatmapInfo = prev.dataInfo.get(viewId) || {};
+            const newHeatmapInfo = {
+                ...currentHeatmapInfo,
+                [key]: value,
+            };
+            const newDataInfo = new Map(prev.dataInfo);
+            newDataInfo.set(viewId, newHeatmapInfo);
+            return { dataInfo: newDataInfo };
+        }),
         copyView: (fromViewId, toViewId) => set((prev) => {
             const newData = new Map(prev.data);
             const newClickmap = new Map(prev.clickmap);
@@ -307,6 +322,99 @@ const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
     };
 }));
 
+const useHeatmapSettingStore = create()(subscribeWithSelector((set) => {
+    return {
+        rankedBy: new Map([[DEFAULT_VIEW_ID, IClickRankType.MostClicks]]),
+        deviceType: new Map([[DEFAULT_VIEW_ID, IDeviceType.Desktop]]),
+        clickType: new Map([[DEFAULT_VIEW_ID, IClickType.Total]]),
+        clickMode: new Map([[DEFAULT_VIEW_ID, IClickMode.Default]]),
+        scrollType: new Map([[DEFAULT_VIEW_ID, IScrollType.Depth]]),
+        heatmapType: new Map([[DEFAULT_VIEW_ID, IHeatmapType.Click]]),
+        setDeviceType: (deviceType, viewId = DEFAULT_VIEW_ID) => set((prev) => {
+            const newDeviceType = new Map(prev.deviceType);
+            newDeviceType.set(viewId, deviceType);
+            return { deviceType: newDeviceType };
+        }),
+        setRankedBy: (rankedBy, viewId = DEFAULT_VIEW_ID) => set((prev) => {
+            const newRankedBy = new Map(prev.rankedBy);
+            newRankedBy.set(viewId, rankedBy);
+            return { rankedBy: newRankedBy };
+        }),
+        setClickType: (clickType, viewId = DEFAULT_VIEW_ID) => set((prev) => {
+            const newClickType = new Map(prev.clickType);
+            newClickType.set(viewId, clickType);
+            return { clickType: newClickType };
+        }),
+        setClickMode: (clickMode, viewId = DEFAULT_VIEW_ID) => set((prev) => {
+            const newClickMode = new Map(prev.clickMode);
+            newClickMode.set(viewId, clickMode);
+            return { clickMode: newClickMode };
+        }),
+        setScrollType: (scrollType, viewId = DEFAULT_VIEW_ID) => set((prev) => {
+            const newScrollType = new Map(prev.scrollType);
+            newScrollType.set(viewId, scrollType);
+            return { scrollType: newScrollType };
+        }),
+        setHeatmapType: (heatmapType, viewId = DEFAULT_VIEW_ID) => set((prev) => {
+            const newHeatmapType = new Map(prev.heatmapType);
+            newHeatmapType.set(viewId, heatmapType);
+            return { heatmapType: newHeatmapType };
+        }),
+        copyView: (fromViewId, toViewId) => set((prev) => {
+            const newRankedBy = new Map(prev.rankedBy);
+            const newDeviceType = new Map(prev.deviceType);
+            const newClickType = new Map(prev.clickType);
+            const newClickMode = new Map(prev.clickMode);
+            const newScrollType = new Map(prev.scrollType);
+            const newHeatmapType = new Map(prev.heatmapType);
+            newRankedBy.set(toViewId, prev.rankedBy.get(fromViewId));
+            newDeviceType.set(toViewId, prev.deviceType.get(fromViewId));
+            newClickType.set(toViewId, prev.clickType.get(fromViewId));
+            newClickMode.set(toViewId, prev.clickMode.get(fromViewId));
+            newScrollType.set(toViewId, prev.scrollType.get(fromViewId));
+            newHeatmapType.set(toViewId, prev.heatmapType.get(fromViewId));
+            return {
+                rankedBy: newRankedBy,
+                deviceType: newDeviceType,
+                clickType: newClickType,
+                clickMode: newClickMode,
+                scrollType: newScrollType,
+                heatmapType: newHeatmapType,
+            };
+        }),
+        clearView: (viewId) => set((prev) => {
+            const newRankedBy = new Map(prev.rankedBy);
+            const newDeviceType = new Map(prev.deviceType);
+            const newClickType = new Map(prev.clickType);
+            const newClickMode = new Map(prev.clickMode);
+            const newScrollType = new Map(prev.scrollType);
+            const newHeatmapType = new Map(prev.heatmapType);
+            newRankedBy.delete(viewId);
+            newDeviceType.delete(viewId);
+            newClickType.delete(viewId);
+            newClickMode.delete(viewId);
+            newScrollType.delete(viewId);
+            newHeatmapType.delete(viewId);
+            return {
+                rankedBy: newRankedBy,
+                deviceType: newDeviceType,
+                clickType: newClickType,
+                clickMode: newClickMode,
+                scrollType: newScrollType,
+                heatmapType: newHeatmapType,
+            };
+        }),
+        resetAll: () => set({
+            rankedBy: new Map([[DEFAULT_VIEW_ID, IClickRankType.MostClicks]]),
+            deviceType: new Map([[DEFAULT_VIEW_ID, IDeviceType.Desktop]]),
+            clickType: new Map([[DEFAULT_VIEW_ID, IClickType.Total]]),
+            clickMode: new Map([[DEFAULT_VIEW_ID, IClickMode.Default]]),
+            scrollType: new Map([[DEFAULT_VIEW_ID, IScrollType.Depth]]),
+            heatmapType: new Map([[DEFAULT_VIEW_ID, IHeatmapType.Click]]),
+        }),
+    };
+}));
+
 const useHeatmapVizStore = create()(subscribeWithSelector((set) => {
     return {
         isRenderViz: new Map([[DEFAULT_VIEW_ID, false]]),
@@ -578,7 +686,7 @@ const useHeatmapClickStore = create()(subscribeWithSelector((set) => {
     };
 }));
 
-const useHeatmapHoverStore = create()(subscribeWithSelector((set) => {
+const useHeatmapHoverStore = create()(subscribeWithSelector((set, get) => {
     return {
         hoveredElement: new Map([[DEFAULT_VIEW_ID, null]]),
         setHoveredElement: (hoveredElement, viewId = DEFAULT_VIEW_ID) => set((prev) => {
@@ -586,6 +694,7 @@ const useHeatmapHoverStore = create()(subscribeWithSelector((set) => {
             newHoveredElement.set(viewId, hoveredElement);
             return { hoveredElement: newHoveredElement };
         }),
+        isHoveredElement: (hash, viewId = DEFAULT_VIEW_ID) => get().hoveredElement.get(viewId)?.hash === hash,
         copyView: (fromViewId, toViewId) => set((prev) => {
             const newHoveredElement = new Map(prev.hoveredElement);
             newHoveredElement.set(toViewId, prev.hoveredElement.get(fromViewId) ?? null);
@@ -852,39 +961,6 @@ const useHeatmapVizRectStore = create()(subscribeWithSelector((set) => {
     };
 }));
 
-const useRegisterConfig = () => {
-    const mode = useHeatmapConfigStore((state) => state.mode);
-    const width = useHeatmapConfigStore((state) => state.width);
-    const sidebarWidth = useHeatmapConfigStore((state) => state.sidebarWidth);
-    // const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
-    // const clickMode = useHeatmapConfigStore((state) => state.clickMode);
-    const setIsRendering = useHeatmapConfigStore((state) => state.setIsRendering);
-    useEffect(() => {
-        setIsRendering(true);
-        setTimeout(() => {
-            setIsRendering(false);
-        }, 1000);
-    }, [mode, width, sidebarWidth]); // eslint-disable-line react-hooks/exhaustive-deps
-};
-
-const useRegisterControl = (control) => {
-    const registerControl = useHeatmapControlStore((state) => state.registerControl);
-    const isRegistered = useRef(false);
-    useEffect(() => {
-        if (isRegistered.current)
-            return;
-        registerControl('Sidebar', control.Sidebar);
-        registerControl('SidebarActivator', control.SidebarActivator);
-        registerControl('TopBar', control.TopBar);
-        registerControl('Toolbar', control.Toolbar);
-        registerControl('MetricBar', control.MetricBar);
-        registerControl('VizLoading', control.VizLoading);
-        registerControl('ElementCallout', control.ElementCallout);
-        registerControl('ScrollZoneTooltip', control.ScrollZoneTooltip);
-        isRegistered.current = true;
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
-};
-
 const ViewIdContext = createContext(undefined);
 const useViewIdContext = () => {
     const viewId = useContext(ViewIdContext);
@@ -1043,9 +1119,6 @@ const useHeatmapClick = createViewContextHook({
     }),
 });
 
-// ===========================
-// Hook
-// ===========================
 /**
  * Hook to access heatmap data state and actions with optional selector
  *
@@ -1075,6 +1148,7 @@ const useHeatmapData = createViewContextHook({
         setData: (newData) => store.setData(newData, viewId),
         setClickmap: (newClickmap) => store.setClickmap(newClickmap, viewId),
         setClickAreas: (newClickAreas) => store.setClickAreas(newClickAreas, viewId),
+        setDataInfoByKey: (key, value) => store.setDataInfoByKey(key, value, viewId),
         setScrollmap: (newScrollmap) => store.setScrollmap(newScrollmap, viewId),
         setDataInfo: (newDataInfo) => store.setDataInfo(newDataInfo, viewId),
         removeClickArea: (areaId) => store.removeClickArea(areaId, viewId),
@@ -1082,23 +1156,6 @@ const useHeatmapData = createViewContextHook({
     }),
 });
 
-// ===========================
-// Hook
-// ===========================
-/**
- * Hook to access heatmap hover state and actions with optional selector
- * Separated from useHeatmapClick to prevent unnecessary re-renders
- *
- * @example
- * ```tsx
- * // Get everything
- * const { hoveredElement, setHoveredElement } = useHeatmapHover();
- *
- * // Get only what you need (no unnecessary re-renders)
- * const hoveredElement = useHeatmapHover(s => s.hoveredElement);
- * const setHoveredElement = useHeatmapHover(s => s.setHoveredElement);
- * ```
- */
 const useHeatmapHover = createViewContextHook({
     useStore: useHeatmapHoverStore,
     getState: (store, viewId) => ({
@@ -1106,6 +1163,7 @@ const useHeatmapHover = createViewContextHook({
     }),
     getActions: (store, viewId) => ({
         setHoveredElement: (el) => store.setHoveredElement(el, viewId),
+        isHoveredElement: (hash) => store.isHoveredElement(hash, viewId),
     }),
 });
 
@@ -1139,25 +1197,27 @@ const useHeatmapScroll = createViewContextHook({
     }),
 });
 
-// ===========================
-// Hook
-// ===========================
-/**
- * Hook to access heatmap viz state and actions (zoom, scale, render state)
- *
- * @example
- * ```tsx
- * // Get everything
- * const { zoomRatio, setZoomRatio, isRenderViz } = useHeatmapViz();
- *
- * // Get only what you need (no unnecessary re-renders)
- * const zoomRatio = useHeatmapViz(s => s.zoomRatio);
- * const { setZoomRatio, setScale } = useHeatmapViz(s => ({
- *   setZoomRatio: s.setZoomRatio,
- *   setScale: s.setScale,
- * }));
- * ```
- */
+const useHeatmapSetting = createViewContextHook({
+    useStore: useHeatmapSettingStore,
+    getState: (store, viewId) => ({
+        rankedBy: store.rankedBy.get(viewId),
+        deviceType: store.deviceType.get(viewId),
+        clickType: store.clickType.get(viewId),
+        clickMode: store.clickMode.get(viewId),
+        scrollType: store.scrollType.get(viewId),
+        heatmapType: store.heatmapType.get(viewId),
+    }),
+    getActions: (store, viewId) => ({
+        setRankedBy: (rankedBy) => store.setRankedBy(rankedBy, viewId),
+        setDeviceType: (deviceType) => store.setDeviceType(deviceType, viewId),
+        setClickType: (clickType) => store.setClickType(clickType, viewId),
+        setClickMode: (clickMode) => store.setClickMode(clickMode, viewId),
+        setScrollType: (scrollType) => store.setScrollType(scrollType, viewId),
+        setHeatmapType: (heatmapType) => store.setHeatmapType(heatmapType, viewId),
+        clearView: (viewId) => store.clearView(viewId),
+    }),
+});
+
 const useHeatmapViz = createViewContextHook({
     useStore: useHeatmapVizStore,
     getState: (store, viewId) => ({
@@ -1284,6 +1344,57 @@ const useHeatmapCopyView = () => {
     };
 };
 
+const useHeatmapWidthByDevice = () => {
+    const deviceType = useHeatmapSetting((state) => state.deviceType);
+    const width = useMemo(() => calcWidthByDeviceType(deviceType), [deviceType]);
+    return width;
+    function calcWidthByDeviceType(deviceType) {
+        if (!deviceType)
+            return 1440;
+        switch (deviceType) {
+            case IDeviceType.Desktop:
+                return 1440;
+            case IDeviceType.Tablet:
+                return 768;
+            case IDeviceType.Mobile:
+                return 375;
+        }
+    }
+};
+
+const useRegisterConfig = () => {
+    const mode = useHeatmapConfigStore((state) => state.mode);
+    const deviceType = useHeatmapSetting((state) => state.deviceType);
+    const sidebarWidth = useHeatmapConfigStore((state) => state.sidebarWidth);
+    // const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
+    // const clickMode = useHeatmapConfigStore((state) => state.clickMode);
+    const setIsRendering = useHeatmapConfigStore((state) => state.setIsRendering);
+    useEffect(() => {
+        setIsRendering(true);
+        setTimeout(() => {
+            setIsRendering(false);
+        }, 1000);
+    }, [mode, deviceType, sidebarWidth]); // eslint-disable-line react-hooks/exhaustive-deps
+};
+
+const useRegisterControl = (control) => {
+    const registerControl = useHeatmapControlStore((state) => state.registerControl);
+    const isRegistered = useRef(false);
+    useEffect(() => {
+        if (isRegistered.current)
+            return;
+        registerControl('Sidebar', control.Sidebar);
+        registerControl('SidebarActivator', control.SidebarActivator);
+        registerControl('TopBar', control.TopBar);
+        registerControl('Toolbar', control.Toolbar);
+        registerControl('MetricBar', control.MetricBar);
+        registerControl('VizLoading', control.VizLoading);
+        registerControl('ElementCallout', control.ElementCallout);
+        registerControl('ScrollZoneTooltip', control.ScrollZoneTooltip);
+        isRegistered.current = true;
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+};
+
 const useRegisterData = (data, dataInfo) => {
     const setIsRendering = useHeatmapConfigStore((state) => state.setIsRendering);
     const setData = useHeatmapData((s) => s.setData);
@@ -1631,31 +1742,31 @@ function getElementSelector(element) {
  * @param elementMapInfo - Map of hash to element click info
  * @returns Total clicks for element + all descendants
  */
-function calculateTotalClicksWithChildren(element, elementMapInfo) {
+function calculateTotalClicksWithChildren(element, clickMapMetrics) {
     let totalClicks = 0;
     // Get clicks for the element itself
     const elementHash = getElementHash(element);
     if (elementHash) {
-        const elementInfo = elementMapInfo[elementHash];
-        totalClicks += elementInfo?.totalclicks || 0;
+        const elementInfo = clickMapMetrics[elementHash];
+        totalClicks += elementInfo?.totalClicked.value ?? 0;
     }
     const children = element.querySelectorAll('*');
     children.forEach((child) => {
         const childHash = getElementHash(child);
         if (childHash) {
-            const childInfo = elementMapInfo[childHash];
-            totalClicks += childInfo?.totalclicks || 0;
+            const childInfo = clickMapMetrics[childHash];
+            totalClicks += childInfo?.totalClicked.value ?? 0;
         }
     });
     return totalClicks;
 }
 function buildAreaNode(element, hash, heatmapInfo, shadowRoot, persistedData) {
-    if (!heatmapInfo.elementMapInfo)
+    if (!heatmapInfo.clickMapMetrics)
         return;
     const totalClicks = heatmapInfo.totalClicks || 0;
-    const elementInfo = heatmapInfo.elementMapInfo[hash];
+    const elementInfo = heatmapInfo.clickMapMetrics[hash];
     // Calculate total clicks including all child elements
-    const elementClicks = calculateTotalClicksWithChildren(element, heatmapInfo.elementMapInfo);
+    const elementClicks = calculateTotalClicksWithChildren(element, heatmapInfo.clickMapMetrics);
     const clickDist = calculateClickDistribution(elementClicks, totalClicks);
     const rect = getElementRect(element);
     const color = getColorFromClickDist(clickDist);
@@ -1691,11 +1802,11 @@ function buildAreaNode(element, hash, heatmapInfo, shadowRoot, persistedData) {
     };
     return areaNode;
 }
-function getTopElementsByClicks(elementMapInfo, topN = 10) {
-    const elements = Object.entries(elementMapInfo)
+function getTopElementsByClicks(clickMapMetrics, topN = 10) {
+    const elements = Object.entries(clickMapMetrics)
         .map(([hash, info]) => ({
         hash,
-        totalclicks: info.totalclicks,
+        totalclicks: info.totalClicked.value ?? 0,
         selector: info.selector || '',
     }))
         .sort((a, b) => b.totalclicks - a.totalclicks)
@@ -2233,11 +2344,11 @@ const getElementRank = (hash, elements) => {
 const buildElementInfo = (hash, rect, heatmapInfo) => {
     if (!rect || !heatmapInfo)
         return null;
-    const info = heatmapInfo.elementMapInfo?.[hash];
+    const info = heatmapInfo.clickMapMetrics?.[hash];
     if (!info)
         return null;
     const rank = getElementRank(hash, heatmapInfo.sortedElements);
-    const clicks = info.totalclicks ?? 0;
+    const clicks = info.totalClicked.value ?? 0;
     const selector = info.selector ?? '';
     const baseInfo = {
         hash,
@@ -3870,7 +3981,7 @@ const clearCanvas = (canvas) => {
 };
 
 function validateAreaCreation(dataInfo, hash, areas) {
-    if (!dataInfo?.elementMapInfo || !dataInfo?.totalClicks) {
+    if (!dataInfo?.clickMapMetrics || !dataInfo?.totalClicks) {
         logger$4.warn('Cannot create area: missing heatmap data');
         return false;
     }
@@ -4263,7 +4374,7 @@ const useAreaTopAutoDetect = (props) => {
     useEffect(() => {
         if (isInitializing)
             return;
-        if (!dataInfo?.elementMapInfo || !dataInfo?.totalClicks)
+        if (!dataInfo?.clickMapMetrics || !dataInfo?.totalClicks)
             return;
         if (!autoCreateTopN)
             return;
@@ -4271,7 +4382,7 @@ const useAreaTopAutoDetect = (props) => {
             return;
         if (areas?.length)
             return;
-        const topElements = getTopElementsByClicks(dataInfo.elementMapInfo, autoCreateTopN);
+        const topElements = getTopElementsByClicks(dataInfo.clickMapMetrics, autoCreateTopN);
         const newAreas = [];
         topElements.forEach(({ hash }) => {
             const element = findElementByHash({ hash, vizRef });
@@ -4347,8 +4458,8 @@ const useScrollmap = () => {
 };
 
 const useHeatmapCanvas = () => {
-    const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
-    const clickMode = useHeatmapConfigStore((state) => state.clickMode);
+    const heatmapType = useHeatmapSetting((state) => state.heatmapType);
+    const clickMode = useHeatmapSetting((state) => state.clickMode);
     const { start: startClickmap } = useClickmap();
     const { start: startAreaClickmap } = useAreaClickmap();
     const { start: startScrollmap } = useScrollmap();
@@ -4416,11 +4527,11 @@ const useClickedElement = ({ visualRef, getRect }) => {
     useEffect(() => {
         const hash = selectedElement?.hash;
         // if (hash === clickedElement?.hash) return;
-        if (!selectedElement || !hash || !dataInfo?.elementMapInfo) {
+        if (!selectedElement || !hash || !dataInfo?.clickMapMetrics) {
             reset();
             return;
         }
-        const info = dataInfo.elementMapInfo[hash];
+        const info = dataInfo.clickMapMetrics[hash];
         if (!info) {
             setClickedElement(null);
             return;
@@ -4461,7 +4572,7 @@ const useElementCalloutVisible = ({ visualRef, getRect, positionMode }) => {
         if (!hash)
             return;
         const elementIsInViewportFn = () => {
-            const elementInfo = dataInfo?.elementMapInfo?.[hash];
+            const elementInfo = dataInfo?.clickMapMetrics?.[hash];
             if (!elementInfo)
                 return;
             const rect = getRect({ hash, selector: elementInfo.selector });
@@ -4504,7 +4615,7 @@ const useHeatmapEffects = ({ isVisible }) => {
 };
 
 const useHeatmapElementPosition = ({ iframeRef, wrapperRef, visualizer }) => {
-    const heatmapWidth = useHeatmapConfigStore((state) => state.width);
+    const heatmapWidth = useHeatmapWidthByDevice();
     const iframeHeight = useHeatmapVizRect((s) => s.iframeHeight);
     const widthScale = useHeatmapViz((s) => s.widthScale);
     const getRect = useCallback((element) => {
@@ -4635,6 +4746,7 @@ function getBoundingBox(element) {
 
 const useHoveredElement = ({ iframeRef, getRect }) => {
     const setHoveredElement = useHeatmapHover((s) => s.setHoveredElement);
+    const isHoveredElement = useHeatmapHover((s) => s.isHoveredElement);
     const setSelectedElement = useHeatmapClick((s) => s.setSelectedElement);
     const widthScale = useHeatmapViz((s) => s.widthScale);
     const dataInfo = useHeatmapData((s) => s.dataInfo);
@@ -4674,7 +4786,9 @@ const useHoveredElement = ({ iframeRef, getRect }) => {
             reset();
             return;
         }
-        const selector = dataInfo?.elementMapInfo?.[hash];
+        if (isHoveredElement(hash))
+            return;
+        const selector = dataInfo?.clickMapMetrics?.[hash];
         const rect = getRect({ hash, selector });
         const elementInfo = buildElementInfo(hash, rect, dataInfo);
         if (!elementInfo) {
@@ -4683,7 +4797,7 @@ const useHoveredElement = ({ iframeRef, getRect }) => {
         }
         const mousePosition = getElementMousePosition(event, widthScale);
         setHoveredElement({ ...elementInfo, mousePosition });
-    }, [dataInfo, getRect, reset, widthScale, getHashFromEvent, setHoveredElement]);
+    }, [dataInfo, getRect, reset, widthScale, getHashFromEvent, setHoveredElement, isHoveredElement]);
     const handleMouseMove = useMemo(() => throttleRAF(onHandleMouseMove), [onHandleMouseMove]);
     const handleClick = useCallback((event, hash) => {
         if (!hash)
@@ -4739,7 +4853,7 @@ const findTargetElement = (doc, x, y, heatmapInfo) => {
     for (let i = 0; i < elementsAtPoint.length; i++) {
         const element = elementsAtPoint[i];
         const elementHash = getElementHash(element) ?? '';
-        const isExistElmInfo = heatmapInfo.elementMapInfo?.[elementHash];
+        const isExistElmInfo = heatmapInfo.clickMapMetrics?.[elementHash];
         if (elementHash && isExistElmInfo) {
             const boundingBox = getBoundingBox(element);
             if (boundingBox) {
@@ -4758,7 +4872,7 @@ const findTargetElement = (doc, x, y, heatmapInfo) => {
     return targetElement;
 };
 const isIframeReady = (iframeRef, heatmapInfo) => {
-    return !!(iframeRef.current?.contentDocument && heatmapInfo?.elementMapInfo);
+    return !!(iframeRef.current?.contentDocument && heatmapInfo?.clickMapMetrics);
 };
 const isValidElement = (element, heatmapInfo) => {
     if (!element)
@@ -4766,7 +4880,7 @@ const isValidElement = (element, heatmapInfo) => {
     const hash = getElementHash(element);
     if (!hash)
         return false;
-    return !!heatmapInfo?.elementMapInfo?.[hash];
+    return !!heatmapInfo?.clickMapMetrics?.[hash];
 };
 
 function useIframeHeightProcessor(options) {
@@ -6195,7 +6309,7 @@ function useVizLiveRender() {
     const wrapperHeight = useHeatmapVizRect((s) => s.wrapperHeight);
     const wrapperWidth = useHeatmapVizRect((s) => s.wrapperWidth);
     const setIsRenderViz = useHeatmapViz((s) => s.setIsRenderViz);
-    const contentWidth = useHeatmapConfigStore((state) => state.width);
+    const contentWidth = useHeatmapWidthByDevice();
     const htmlContent = useHeatmapLiveStore((state) => state.htmlContent);
     const targetUrl = useHeatmapLiveStore((state) => state.targetUrl);
     const renderMode = useHeatmapLiveStore((state) => state.renderMode);
@@ -6289,6 +6403,7 @@ function initIframeHelper$1(iframe, rect, onSuccess) {
 }
 
 const useHeatmapRender = () => {
+    const viewId = useViewIdContext();
     const data = useHeatmapData((s) => s.data);
     const vizRef = useHeatmapVizRect((s) => s.vizRef);
     const setVizRef = useHeatmapVizRect((s) => s.setVizRef);
@@ -6307,7 +6422,7 @@ const useHeatmapRender = () => {
         const iframe = iframeRef.current;
         if (!iframe?.contentWindow)
             return;
-        await visualizer.html(payloads, iframe.contentWindow, true);
+        await visualizer.html(payloads, iframe.contentWindow, viewId);
         initIframeHelper(iframe, payloads, (height) => {
             height && setIframeHeight(height);
             setIsRenderViz(true);
@@ -6517,7 +6632,7 @@ const useContainerDimensions = (props) => {
 };
 
 const useContentDimensions = ({ iframeRef }) => {
-    const contentWidth = useHeatmapConfigStore((state) => state.width);
+    const contentWidth = useHeatmapWidthByDevice();
     useEffect(() => {
         if (!contentWidth)
             return;
@@ -6756,7 +6871,7 @@ const useHeatmapScale = (props) => {
 };
 const useIframeHeight = (props) => {
     const { iframeRef } = props;
-    const iframeWidth = useHeatmapConfigStore((state) => state.width);
+    const iframeWidth = useHeatmapWidthByDevice();
     const wrapperHeight = useHeatmapVizRect((s) => s.wrapperHeight);
     const setIframeHeight = useHeatmapVizRect((s) => s.setIframeHeight);
     const isRenderViz = useHeatmapViz((s) => s.isRenderViz);
@@ -7086,14 +7201,15 @@ const PopoverSidebar = () => {
         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: {
+    return (jsxs("div", { children: [!isPopoverOpen && (jsx("div", { style: { ...stylePopover, width: 'auto', height: 'auto' }, children: jsx(CompSidebarActivator, { onClick: () => setIsPopoverOpen(true) }) })), 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) } }) }) }))] }));
+                        display: isPopoverOpen ? 'block' : 'none',
+                    }, children: jsx(CompSidebar, { closeAction: { onClick: () => setIsPopoverOpen(false) } }) }) })] }));
 };
 
 const ContentToolbar = () => {
@@ -7955,7 +8071,7 @@ const useAnchorPosition = (calloutRef, props) => {
 const ElementMissing = ({ show = true, visualRef }) => {
     const widthScale = useHeatmapViz((s) => s.widthScale);
     const missingElementRef = useRef(null);
-    const wrapperWidth = useHeatmapConfigStore((s) => s.width);
+    const wrapperWidth = useHeatmapWidthByDevice();
     const [scrollPosition, setScrollPosition] = useState({ scrollTop: 0, scrollLeft: 0 });
     useEffect(() => {
         const container = visualRef.current;
@@ -8106,7 +8222,7 @@ const ElementOverlayComponent = (props) => {
     const { type, element, onClick, elementId, hideOutline } = props;
     const widthScale = useHeatmapViz((s) => s.widthScale);
     const viewportHeight = useHeatmapVizRect((s) => s.iframeHeight);
-    const viewportWidth = useHeatmapConfigStore((s) => s.width);
+    const viewportWidth = useHeatmapWidthByDevice();
     const overlayStyle = useMemo(() => {
         const isInvalid = !element || (element.width === 0 && element.height === 0);
         if (isInvalid)
@@ -8188,7 +8304,7 @@ const HeatmapElements = (props) => {
 };
 
 const VizElements = ({ iframeRef, visualRef, wrapperRef }) => {
-    const contentWidth = useHeatmapConfigStore((state) => state.width);
+    const contentWidth = useHeatmapWidthByDevice();
     const dataInfo = useHeatmapData((s) => s.dataInfo);
     const vizRef = useHeatmapVizRect((s) => s.vizRef);
     const visualizer = {
@@ -8211,8 +8327,8 @@ const VizElements = ({ iframeRef, visualRef, wrapperRef }) => {
 };
 
 const VizClickmap = ({ iframeRef, visualRef, wrapperRef }) => {
-    const clickMode = useHeatmapConfigStore((state) => state.clickMode);
-    const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
+    const clickMode = useHeatmapSetting((state) => state.clickMode);
+    const heatmapType = useHeatmapSetting((state) => state.heatmapType);
     const isClickType = heatmapType === IHeatmapType.Click;
     if (!isClickType)
         return null;
@@ -8227,9 +8343,9 @@ const VizClickmap = ({ iframeRef, visualRef, wrapperRef }) => {
 };
 
 const ScrollMapMinimap = ({ zones, maxUsers }) => {
-    const scrollType = useHeatmapConfigStore((state) => state.scrollType);
+    const scrollType = useHeatmapSetting((s) => s.scrollType);
     const showMinimap = useHeatmapScroll((s) => s.showMinimap);
-    const isScrollType = [IScrollType.Attention].includes(scrollType);
+    const isScrollType = [IScrollType.Attention].includes(scrollType ?? IScrollType.Depth);
     if (!showMinimap || !isScrollType)
         return null;
     return (jsx("div", { style: {
@@ -8378,7 +8494,7 @@ const AverageFoldLine = ({ iframeRef, wrapperRef }) => {
 };
 
 const ScrollmapMarker = ({ iframeRef, wrapperRef }) => {
-    const scrollType = useHeatmapConfigStore((state) => state.scrollType);
+    const scrollType = useHeatmapSetting((s) => s.scrollType);
     const { scrollmap } = useHeatmapData();
     const { getZonePosition } = useZonePositions();
     if (!scrollmap || scrollmap.length === 0)
@@ -8454,10 +8570,10 @@ const ScrollmapMarker = ({ iframeRef, wrapperRef }) => {
 
 const SCROLL_TYPES = [IHeatmapType.Scroll];
 const VizScrollMap = ({ iframeRef, wrapperRef }) => {
-    const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
+    const heatmapType = useHeatmapSetting((s) => s.heatmapType);
     const iframeHeight = useHeatmapVizRect((s) => s.iframeHeight);
     // useRenderCount('VizScrollMap');
-    const isHeatmapScroll = SCROLL_TYPES.includes(heatmapType);
+    const isHeatmapScroll = SCROLL_TYPES.includes(heatmapType ?? IHeatmapType.Click);
     if (!iframeHeight || !isHeatmapScroll)
         return null;
     return (jsxs("div", { style: {
@@ -8472,8 +8588,8 @@ const VizScrollMap = ({ iframeRef, wrapperRef }) => {
 };
 
 const WrapperVisual = ({ children, visualRef, wrapperRef, scaledHeight, iframeHeight, onScroll, }) => {
-    const contentWidth = useHeatmapConfigStore((state) => state.width);
     const widthScale = useHeatmapViz((s) => s.widthScale);
+    const contentWidth = useHeatmapWidthByDevice();
     const contentHeight = calcContentHeight();
     return (jsx("div", { ref: visualRef, className: "gx-hm-visual", onScroll: onScroll, style: {
             overflow: 'hidden scroll',
@@ -8507,7 +8623,8 @@ const WrapperVisual = ({ children, visualRef, wrapperRef, scaledHeight, iframeHe
 };
 
 const VizDomRenderer = ({ mode = 'heatmap' }) => {
-    const contentWidth = useHeatmapConfigStore((state) => state.width || 0);
+    const viewId = useViewIdContext();
+    const contentWidth = useHeatmapWidthByDevice();
     const iframeHeight = useHeatmapVizRect((s) => s.iframeHeight);
     const wrapperHeight = useHeatmapVizRect((s) => s.wrapperHeight);
     const wrapperRef = useRef(null);
@@ -8520,7 +8637,7 @@ const VizDomRenderer = ({ mode = 'heatmap' }) => {
         const scrollTop = e.currentTarget.scrollTop;
         handleScroll(scrollTop);
     };
-    return (jsxs(WrapperVisual, { visualRef: visualRef, wrapperRef: wrapperRef, scaledHeight: scaledHeight, onScroll: onScroll, iframeHeight: iframeHeight, children: [jsx(VizClickmap, { iframeRef: iframeRef, visualRef: visualRef, wrapperRef: wrapperRef }), jsx("iframe", { ...HEATMAP_IFRAME, ref: iframeRef, width: contentWidth, height: wrapperHeight }), jsx(VizScrollMap, { iframeRef: iframeRef, wrapperRef: visualRef })] }));
+    return (jsxs(WrapperVisual, { visualRef: visualRef, wrapperRef: wrapperRef, scaledHeight: scaledHeight, onScroll: onScroll, iframeHeight: iframeHeight, children: [jsx(VizClickmap, { iframeRef: iframeRef, visualRef: visualRef, wrapperRef: wrapperRef }), jsx("iframe", { ...HEATMAP_IFRAME, id: `clarity-iframe-${viewId}`, ref: iframeRef, width: contentWidth, height: wrapperHeight }), jsx(VizScrollMap, { iframeRef: iframeRef, wrapperRef: visualRef })] }));
 };
 
 const VizLoading = () => {
@@ -8556,7 +8673,7 @@ const VizDomHeatmap = () => {
 VizDomHeatmap.displayName = 'VizDomHeatmap';
 
 const VizLiveRenderer = () => {
-    const contentWidth = useHeatmapConfigStore((state) => state.width);
+    const contentWidth = useHeatmapWidthByDevice();
     const iframeHeight = useHeatmapVizRect((s) => s.iframeHeight);
     const wrapperHeight = useHeatmapVizRect((s) => s.wrapperHeight);
     const visualRef = useRef(null);
@@ -8646,4 +8763,4 @@ const HeatmapLayout = ({ data, clickmap, clickAreas, scrollmap, controls, dataIn
     }
 };
 
-export { BACKDROP_CONFIG, DEFAULT_SIDEBAR_WIDTH, DEFAULT_VIEW_ID, DEFAULT_ZOOM_RATIO, ELM_CALLOUT_CONFIG, GraphView, HEATMAP_CONFIG, HEATMAP_IFRAME, HEATMAP_STYLE, HeatmapLayout, IClickMode, IClickType, IHeatmapType, IScrollType, ViewIdContext, Z_INDEX, compareViewPerformance, convertViewportToIframeCoords, createStorePerformanceTracker, downloadPerformanceReport, getCompareViewId, getMetricsByViewId, getPerformanceReportJSON, getScrollGradientColor, performanceLogger, printPerformanceSummary, scrollToElementIfNeeded, sendPerformanceReport, serializeAreas, trackStoreAction, useAreaCreation, useAreaEditMode, useAreaFilterVisible, useAreaHydration, useAreaInteraction, useAreaPositionsUpdater, useAreaRectSync, useAreaRendererContainer, useAreaTopAutoDetect, useClickedElement, useDebounceCallback, useElementCalloutVisible, useHeatmapAreaClick, useHeatmapCanvas, useHeatmapClick, useHeatmapCompareStore, useHeatmapConfigStore, useHeatmapCopyView, useHeatmapData, useHeatmapEffects, useHeatmapElementPosition, useHeatmapHover, useHeatmapLiveStore, useHeatmapRenderByMode, useHeatmapScale, useHeatmapScroll, useHeatmapViz, useHeatmapVizRect, useHoveredElement, useIframeHeight, useIframeHeightProcessor, useMeasureFunction, useRegisterConfig, useRegisterControl, useRegisterData, useRegisterHeatmap, useRenderCount, useScrollmapZones, useTrackHookCall, useViewIdContext, useVizLiveRender, useWhyDidYouUpdate, useWrapperRefHeight, useZonePositions, withPerformanceTracking };
+export { BACKDROP_CONFIG, DEFAULT_SIDEBAR_WIDTH, DEFAULT_VIEW_ID, DEFAULT_ZOOM_RATIO, ELM_CALLOUT_CONFIG, GraphView, HEATMAP_CONFIG, HEATMAP_IFRAME, HEATMAP_STYLE, HeatmapLayout, IClickMode, IClickRankType, IClickType, IDeviceType, IHeatmapType, IScrollType, ViewIdContext, Z_INDEX, compareViewPerformance, convertViewportToIframeCoords, createStorePerformanceTracker, downloadPerformanceReport, getCompareViewId, getMetricsByViewId, getPerformanceReportJSON, getScrollGradientColor, performanceLogger, printPerformanceSummary, scrollToElementIfNeeded, sendPerformanceReport, serializeAreas, trackStoreAction, useAreaCreation, useAreaEditMode, useAreaFilterVisible, useAreaHydration, useAreaInteraction, useAreaPositionsUpdater, useAreaRectSync, useAreaRendererContainer, useAreaTopAutoDetect, useClickedElement, useDebounceCallback, useElementCalloutVisible, useHeatmapAreaClick, useHeatmapCanvas, useHeatmapClick, useHeatmapCompareStore, useHeatmapConfigStore, useHeatmapCopyView, useHeatmapData, useHeatmapEffects, useHeatmapElementPosition, useHeatmapHover, useHeatmapLiveStore, useHeatmapRenderByMode, useHeatmapScale, useHeatmapScroll, useHeatmapSetting, useHeatmapViz, useHeatmapVizRect, useHeatmapWidthByDevice, useHoveredElement, useIframeHeight, useIframeHeightProcessor, useMeasureFunction, useRegisterConfig, useRegisterControl, useRegisterData, useRegisterHeatmap, useRenderCount, useScrollmapZones, useTrackHookCall, useViewIdContext, useVizLiveRender, useWhyDidYouUpdate, useWrapperRefHeight, useZonePositions, withPerformanceTracking };