@gemx-dev/heatmap-react 3.5.62 → 3.5.64

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;
@@ -207,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 }),
     };
 });
@@ -328,9 +324,23 @@ const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
 
 const useHeatmapSettingStore = create()(subscribeWithSelector((set) => {
     return {
+        isRendering: new Map([[DEFAULT_VIEW_ID, false]]),
         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]]),
+        setIsRendering: (isRendering, viewId = DEFAULT_VIEW_ID) => set((prev) => {
+            const newIsRendering = new Map(prev.isRendering);
+            newIsRendering.set(viewId, isRendering);
+            return { isRendering: newIsRendering };
+        }),
+        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);
@@ -341,41 +351,73 @@ const useHeatmapSettingStore = create()(subscribeWithSelector((set) => {
             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({
+            isRendering: new Map([[DEFAULT_VIEW_ID, false]]),
             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]]),
         }),
     };
 }));
@@ -466,7 +508,7 @@ const useHeatmapVizStore = create()(subscribeWithSelector((set) => {
     };
 }));
 
-const useHeatmapAreaClickStore = create()(subscribeWithSelector((set) => ({
+const useHeatmapVizClickAreaStore = create()(subscribeWithSelector((set) => ({
     selectedArea: new Map([[DEFAULT_VIEW_ID, null]]),
     hoveredArea: new Map([[DEFAULT_VIEW_ID, null]]),
     areas: new Map([[DEFAULT_VIEW_ID, []]]),
@@ -595,7 +637,7 @@ const useHeatmapAreaClickStore = create()(subscribeWithSelector((set) => ({
 const DEFAULT_STATE$1 = {
     hideSidebar: false,
 };
-const useHeatmapClickStore = create()(subscribeWithSelector((set) => {
+const useHeatmapVizClickStore = create()(subscribeWithSelector((set) => {
     return {
         state: new Map([[DEFAULT_VIEW_ID, DEFAULT_STATE$1]]),
         selectedElement: new Map([[DEFAULT_VIEW_ID, null]]),
@@ -651,7 +693,7 @@ const useHeatmapClickStore = create()(subscribeWithSelector((set) => {
     };
 }));
 
-const useHeatmapHoverStore = create()(subscribeWithSelector((set) => {
+const useHeatmapVizHoverStore = create()(subscribeWithSelector((set, get) => {
     return {
         hoveredElement: new Map([[DEFAULT_VIEW_ID, null]]),
         setHoveredElement: (hoveredElement, viewId = DEFAULT_VIEW_ID) => set((prev) => {
@@ -659,6 +701,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);
@@ -675,7 +718,7 @@ const useHeatmapHoverStore = create()(subscribeWithSelector((set) => {
     };
 }));
 
-const useHeatmapVizScrollmapStore = create()(subscribeWithSelector((set) => {
+const useHeatmapVizScrollStore = create()(subscribeWithSelector((set) => {
     return {
         zones: new Map([[DEFAULT_VIEW_ID, []]]),
         hoveredZone: new Map([[DEFAULT_VIEW_ID, null]]),
@@ -925,39 +968,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);
@@ -1042,27 +1052,8 @@ function extractActionRefs(useStore) {
     return refs;
 }
 
-// ===========================
-// Hook
-// ===========================
-/**
- * Hook to access heatmap area click state and actions with optional selector
- *
- * @example
- * ```tsx
- * // Get everything
- * const { areas, selectedArea, addArea } = useHeatmapAreaClick();
- *
- * // Get only what you need (no unnecessary re-renders)
- * const addArea = useHeatmapAreaClick(s => s.addArea);
- * const { addArea, removeArea } = useHeatmapAreaClick(s => ({
- *   addArea: s.addArea,
- *   removeArea: s.removeArea,
- * }));
- * ```
- */
 const useHeatmapAreaClick = createViewContextHook({
-    useStore: useHeatmapAreaClickStore,
+    useStore: useHeatmapVizClickAreaStore,
     getState: (store, viewId) => ({
         selectedArea: store.selectedArea.get(viewId) ?? null,
         hoveredArea: store.hoveredArea.get(viewId) ?? null,
@@ -1103,7 +1094,7 @@ const DEFAULT_STATE = { hideSidebar: false };
  * ```
  */
 const useHeatmapClick = createViewContextHook({
-    useStore: useHeatmapClickStore,
+    useStore: useHeatmapVizClickStore,
     getState: (store, viewId) => ({
         state: store.state.get(viewId) ?? DEFAULT_STATE,
         selectedElement: store.selectedElement.get(viewId) ?? null,
@@ -1153,51 +1144,19 @@ 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,
+    useStore: useHeatmapVizHoverStore,
     getState: (store, viewId) => ({
         hoveredElement: store.hoveredElement.get(viewId) ?? null,
     }),
     getActions: (store, viewId) => ({
         setHoveredElement: (el) => store.setHoveredElement(el, viewId),
+        isHoveredElement: (hash) => store.isHoveredElement(hash, viewId),
     }),
 });
 
-// ===========================
-// Hook
-// ===========================
-/**
- * Hook to access heatmap scroll state and actions with optional selector
- *
- * @example
- * ```tsx
- * // Get everything
- * const { zones, hoveredZone, setZones } = useHeatmapScroll();
- *
- * // Get only what you need (no unnecessary re-renders)
- * const setZones = useHeatmapScroll(s => s.setZones);
- * const zones = useHeatmapScroll(s => s.zones);
- * ```
- */
 const useHeatmapScroll = createViewContextHook({
-    useStore: useHeatmapVizScrollmapStore,
+    useStore: useHeatmapVizScrollStore,
     getState: (store, viewId) => ({
         zones: store.zones.get(viewId) ?? [],
         hoveredZone: store.hoveredZone.get(viewId) ?? null,
@@ -1210,56 +1169,29 @@ const useHeatmapScroll = createViewContextHook({
     }),
 });
 
-/**
- * Hook to access heatmap setting state and actions with optional selector
- *
- * @example
- * ```tsx
- * // Get everything
- * const { rankedBy, clickType, setRankedBy } = useHeatmapSetting();
- *
- * // Get only what you need (no unnecessary re-renders)
- * const rankedBy = useHeatmapSetting(s => s.rankedBy);
- * const { setRankedBy, setClickType } = useHeatmapSetting(s => ({
- *   setRankedBy: s.setRankedBy,
- *   setClickType: s.setClickType,
- * }));
- * ```
- */
 const useHeatmapSetting = createViewContextHook({
     useStore: useHeatmapSettingStore,
     getState: (store, viewId) => ({
+        isRendering: !!store.isRendering.get(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),
+        setIsRendering: (isRendering) => store.setIsRendering(isRendering, viewId),
         clearView: (viewId) => store.clearView(viewId),
     }),
 });
 
-// ===========================
-// 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 useHeatmapViz = createViewContextHook({
     useStore: useHeatmapVizStore,
     getState: (store, viewId) => ({
@@ -1320,34 +1252,38 @@ const useHeatmapVizRect = createViewContextHook({
  */
 const useHeatmapCopyView = () => {
     const copyDataView = useHeatmapDataStore((state) => state.copyView);
+    const copySettingView = useHeatmapSettingStore((state) => state.copyView);
     const copyVizView = useHeatmapVizStore((state) => state.copyView);
     const copyVizRectView = useHeatmapVizRectStore((state) => state.copyView);
-    const copyInteractionView = useHeatmapClickStore((state) => state.copyView);
-    const copyHoverView = useHeatmapHoverStore((state) => state.copyView);
-    const copyVizScrollmapView = useHeatmapVizScrollmapStore((state) => state.copyView);
-    const copyAreaClickView = useHeatmapAreaClickStore((state) => state.copyView);
+    const copyVizClickView = useHeatmapVizClickStore((state) => state.copyView);
+    const copyVizHoverView = useHeatmapVizHoverStore((state) => state.copyView);
+    const copyVizAreaClickView = useHeatmapVizClickAreaStore((state) => state.copyView);
+    const copyVizScrollView = useHeatmapVizScrollStore((state) => state.copyView);
     const clearDataView = useHeatmapDataStore((state) => state.clearView);
+    const clearSettingView = useHeatmapSettingStore((state) => state.clearView);
     const clearVizView = useHeatmapVizStore((state) => state.clearView);
     const clearVizRectView = useHeatmapVizRectStore((state) => state.clearView);
-    const clearInteractionView = useHeatmapClickStore((state) => state.clearView);
-    const clearHoverView = useHeatmapHoverStore((state) => state.clearView);
-    const clearVizScrollmapView = useHeatmapVizScrollmapStore((state) => state.clearView);
-    const clearAreaClickView = useHeatmapAreaClickStore((state) => state.clearView);
+    const clearVizClickView = useHeatmapVizClickStore((state) => state.clearView);
+    const clearVizHoverView = useHeatmapVizHoverStore((state) => state.clearView);
+    const clearVizScrollView = useHeatmapVizScrollStore((state) => state.clearView);
+    const clearVizAreaClickView = useHeatmapVizClickAreaStore((state) => state.clearView);
     const resetDataAll = useHeatmapDataStore((state) => state.resetAll);
+    const resetSettingAll = useHeatmapSettingStore((state) => state.resetAll);
     const resetVizAll = useHeatmapVizStore((state) => state.resetAll);
     const resetVizRectAll = useHeatmapVizRectStore((state) => state.resetAll);
-    const resetInteractionAll = useHeatmapClickStore((state) => state.resetAll);
-    const resetHoverAll = useHeatmapHoverStore((state) => state.resetAll);
-    const resetVizScrollmapAll = useHeatmapVizScrollmapStore((state) => state.resetAll);
-    const resetAreaClickAll = useHeatmapAreaClickStore((state) => state.resetAll);
+    const resetVizClickAll = useHeatmapVizClickStore((state) => state.resetAll);
+    const resetVizHoverAll = useHeatmapVizHoverStore((state) => state.resetAll);
+    const resetVizScrollViewAll = useHeatmapVizScrollStore((state) => state.resetAll);
+    const resetVizClickAreaAll = useHeatmapVizClickAreaStore((state) => state.resetAll);
     const copyView = (fromViewId, toViewId) => {
         copyDataView(fromViewId, toViewId);
+        copySettingView(fromViewId, toViewId);
         copyVizView(fromViewId, toViewId);
         copyVizRectView(fromViewId, toViewId);
-        copyInteractionView(fromViewId, toViewId);
-        copyHoverView(fromViewId, toViewId);
-        copyVizScrollmapView(fromViewId, toViewId);
-        copyAreaClickView(fromViewId, toViewId);
+        copyVizClickView(fromViewId, toViewId);
+        copyVizHoverView(fromViewId, toViewId);
+        copyVizScrollView(fromViewId, toViewId);
+        copyVizAreaClickView(fromViewId, toViewId);
     };
     const copyViewToMultiple = (fromViewId, toViewIds) => {
         toViewIds.forEach((toViewId) => {
@@ -1356,12 +1292,13 @@ const useHeatmapCopyView = () => {
     };
     const clearView = (viewId) => {
         clearDataView(viewId);
+        clearSettingView(viewId);
         clearVizView(viewId);
         clearVizRectView(viewId);
-        clearInteractionView(viewId);
-        clearHoverView(viewId);
-        clearVizScrollmapView(viewId);
-        clearAreaClickView(viewId);
+        clearVizClickView(viewId);
+        clearVizHoverView(viewId);
+        clearVizScrollView(viewId);
+        clearVizAreaClickView(viewId);
     };
     const clearMultipleViews = (viewIds) => {
         viewIds.forEach((viewId) => {
@@ -1370,12 +1307,13 @@ const useHeatmapCopyView = () => {
     };
     const resetAll = () => {
         resetDataAll();
+        resetSettingAll();
         resetVizAll();
         resetVizRectAll();
-        resetInteractionAll();
-        resetHoverAll();
-        resetVizScrollmapAll();
-        resetAreaClickAll();
+        resetVizClickAll();
+        resetVizHoverAll();
+        resetVizScrollViewAll();
+        resetVizClickAreaAll();
     };
     return {
         copyView,
@@ -1386,8 +1324,59 @@ 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 = useHeatmapSetting((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 setIsRendering = useHeatmapSetting((s) => s.setIsRendering);
     const setData = useHeatmapData((s) => s.setData);
     const setDataInfo = useHeatmapData((s) => s.setDataInfo);
     const isRegistered = useRef(false);
@@ -1480,12 +1469,9 @@ function isElementRectInViewport(elementRect, visualRect, scale) {
         return false;
     // Element position relative to the document (or container's content)
     const elementTop = elementRect.top * scale;
-    console.log(`🚀 🐥 ~ isElementRectInViewport ~ scale:`, scale);
-    console.log(`🚀 🐥 ~ isElementRectInViewport ~ elementRect.top:`, elementRect.top);
     const elementBottom = (elementRect.top + elementRect.height) * scale;
     // Current scroll position
     const scrollTop = (visualRect?.scrollTop || 0) - 8;
-    console.log(`🚀 🐥 ~ isElementRectInViewport ~ visualRect?.scrollTop:`, visualRect?.scrollTop);
     const viewportHeight = visualRect.height;
     // Visible viewport range in the scrollable content
     const viewportTop = scrollTop;
@@ -4449,8 +4435,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();
@@ -4606,7 +4592,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) => {
@@ -4737,6 +4723,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);
@@ -4776,6 +4763,8 @@ const useHoveredElement = ({ iframeRef, getRect }) => {
             reset();
             return;
         }
+        if (isHoveredElement(hash))
+            return;
         const selector = dataInfo?.clickMapMetrics?.[hash];
         const rect = getRect({ hash, selector });
         const elementInfo = buildElementInfo(hash, rect, dataInfo);
@@ -4785,7 +4774,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)
@@ -6297,7 +6286,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);
@@ -6391,6 +6380,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);
@@ -6409,7 +6399,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);
@@ -6619,7 +6609,7 @@ const useContainerDimensions = (props) => {
 };
 
 const useContentDimensions = ({ iframeRef }) => {
-    const contentWidth = useHeatmapConfigStore((state) => state.width);
+    const contentWidth = useHeatmapWidthByDevice();
     useEffect(() => {
         if (!contentWidth)
             return;
@@ -6858,7 +6848,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);
@@ -7188,14 +7178,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 = () => {
@@ -8057,7 +8048,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;
@@ -8208,7 +8199,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)
@@ -8290,7 +8281,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 = {
@@ -8313,8 +8304,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;
@@ -8329,9 +8320,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: {
@@ -8391,8 +8382,8 @@ const ScrollZoneTooltip = ({ zone, position, currentScrollPercent, scrollmap, })
 
 const HoverZones = ({ iframeRef, wrapperRef, position, currentScrollPercent }) => {
     const { scrollmap } = useHeatmapData();
-    // const hoveredZone = useHeatmapVizScrollmapStore((state) => state.hoveredZone);
-    // const setHoveredZone = useHeatmapVizScrollmapStore((state) => state.setHoveredZone);
+    // const hoveredZone = useHeatmapVizScrollStore((state) => state.hoveredZone);
+    // const setHoveredZone = useHeatmapVizScrollStore((state) => state.setHoveredZone);
     const { zones, isReady, maxUsers } = useScrollmapZones({
         iframeRef,
         wrapperRef,
@@ -8480,7 +8471,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)
@@ -8556,10 +8547,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: {
@@ -8574,8 +8565,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',
@@ -8609,7 +8600,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);
@@ -8622,7 +8614,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 = () => {
@@ -8658,7 +8650,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);
@@ -8688,8 +8680,8 @@ VizLiveHeatmap.displayName = 'VizLiveHeatmap';
 
 const ContentVizByMode = () => {
     const mode = useHeatmapConfigStore((state) => state.mode);
-    const isRendering = useHeatmapConfigStore((state) => state.isRendering);
     const controls = useHeatmapControlStore((state) => state.controls);
+    const isRendering = useHeatmapSetting((state) => state.isRendering);
     if (isRendering)
         return controls.VizLoading ?? null;
     switch (mode) {
@@ -8748,4 +8740,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, IClickRankType, 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, useHeatmapSetting, 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 };