@gemx-dev/heatmap-react 3.5.62 → 3.5.63

package/dist/esm/index.js

@@ -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 }),
     };
 });
@@ -329,8 +325,16 @@ 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);
@@ -341,41 +345,72 @@ 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({
             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]]),
         }),
     };
 }));
@@ -651,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) => {
@@ -659,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);
@@ -925,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);
@@ -1153,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) => ({
@@ -1177,6 +1163,7 @@ const useHeatmapHover = createViewContextHook({
     }),
     getActions: (store, viewId) => ({
         setHoveredElement: (el) => store.setHoveredElement(el, viewId),
+        isHoveredElement: (hash) => store.isHoveredElement(hash, viewId),
     }),
 });
 
@@ -1210,56 +1197,27 @@ 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) => ({
         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),
     }),
 });
 
-// ===========================
-// 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) => ({
@@ -1386,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);
@@ -4449,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();
@@ -4606,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) => {
@@ -4737,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);
@@ -4776,6 +4786,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 +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)
@@ -6297,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);
@@ -6391,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);
@@ -6409,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);
@@ -6619,7 +6632,7 @@ const useContainerDimensions = (props) => {
 };
 
 const useContentDimensions = ({ iframeRef }) => {
-    const contentWidth = useHeatmapConfigStore((state) => state.width);
+    const contentWidth = useHeatmapWidthByDevice();
     useEffect(() => {
         if (!contentWidth)
             return;
@@ -6858,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);
@@ -7188,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 = () => {
@@ -8057,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;
@@ -8208,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)
@@ -8290,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 = {
@@ -8313,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;
@@ -8329,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: {
@@ -8480,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)
@@ -8556,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: {
@@ -8574,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',
@@ -8609,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);
@@ -8622,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 = () => {
@@ -8658,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);
@@ -8748,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, 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 };