@gemx-dev/heatmap-react 3.5.71 → 3.5.72

package/dist/esm/index.js

@@ -86,7 +86,7 @@ const HEATMAP_CONFIG = {
     borderWidth: 1,
     borderWidthIframe: 2,
     borderColor: '#E3E3E3',
-    heightToolbar: 60, // height of the toolbar
+    heightToolbar: 0, // height of the toolbar
 };
 const HEATMAP_STYLE = {
     viz: {
@@ -286,9 +286,9 @@ const useHeatmapControlStore = create()((set, get) => {
         controls: {
             Sidebar: undefined,
             SidebarActivator: undefined,
-            Toolbar: null,
-            MetricBar: null,
-            VizLoading: null,
+            Toolbar: undefined,
+            MetricBar: undefined,
+            VizLoading: undefined,
             TopBar: undefined,
             ElementCallout: undefined,
         },
@@ -416,6 +416,8 @@ const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
 const useHeatmapSettingStore = create()(subscribeWithSelector((set) => {
     return {
         isRendering: new Map([[DEFAULT_VIEW_ID, false]]),
+        isLoadingDom: new Map([[DEFAULT_VIEW_ID, false]]),
+        isLoadingCanvas: new Map([[DEFAULT_VIEW_ID, false]]),
         rankedBy: new Map([[DEFAULT_VIEW_ID, EClickRankType.MostClicks]]),
         deviceType: new Map([[DEFAULT_VIEW_ID, EDeviceType.Desktop]]),
         clickType: new Map([[DEFAULT_VIEW_ID, EClickType.All]]),
@@ -432,6 +434,16 @@ const useHeatmapSettingStore = create()(subscribeWithSelector((set) => {
             newDeviceType.set(viewId, deviceType);
             return { deviceType: newDeviceType };
         }),
+        setIsLoadingDom: (isLoadingDom, viewId = DEFAULT_VIEW_ID) => set((prev) => {
+            const newIsLoadingDom = new Map(prev.isLoadingDom);
+            newIsLoadingDom.set(viewId, isLoadingDom);
+            return { isLoadingDom: newIsLoadingDom };
+        }),
+        setIsLoadingCanvas: (isLoadingCanvas, viewId = DEFAULT_VIEW_ID) => set((prev) => {
+            const newIsLoadingCanvas = new Map(prev.isLoadingCanvas);
+            newIsLoadingCanvas.set(viewId, isLoadingCanvas);
+            return { isLoadingCanvas: newIsLoadingCanvas };
+        }),
         setRankedBy: (rankedBy, viewId = DEFAULT_VIEW_ID) => set((prev) => {
             const newRankedBy = new Map(prev.rankedBy);
             newRankedBy.set(viewId, rankedBy);
@@ -458,6 +470,8 @@ const useHeatmapSettingStore = create()(subscribeWithSelector((set) => {
             return { heatmapType: newHeatmapType };
         }),
         copyView: (fromViewId, toViewId) => set((prev) => {
+            const newIsLoadingDom = new Map(prev.isLoadingDom);
+            const newIsLoadingCanvas = new Map(prev.isLoadingCanvas);
             const newRankedBy = new Map(prev.rankedBy);
             const newDeviceType = new Map(prev.deviceType);
             const newClickType = new Map(prev.clickType);
@@ -470,8 +484,12 @@ const useHeatmapSettingStore = create()(subscribeWithSelector((set) => {
             newClickMode.set(toViewId, prev.clickMode.get(fromViewId));
             newScrollType.set(toViewId, prev.scrollType.get(fromViewId));
             newHeatmapType.set(toViewId, prev.heatmapType.get(fromViewId));
+            newIsLoadingDom.set(toViewId, prev.isLoadingDom.get(fromViewId) ?? false);
+            newIsLoadingCanvas.set(toViewId, prev.isLoadingCanvas.get(fromViewId) ?? false);
             return {
                 rankedBy: newRankedBy,
+                isLoadingDom: newIsLoadingDom,
+                isLoadingCanvas: newIsLoadingCanvas,
                 deviceType: newDeviceType,
                 clickType: newClickType,
                 clickMode: newClickMode,
@@ -481,12 +499,16 @@ const useHeatmapSettingStore = create()(subscribeWithSelector((set) => {
         }),
         clearView: (viewId) => set((prev) => {
             const newRankedBy = new Map(prev.rankedBy);
+            const newIsLoadingDom = new Map(prev.isLoadingDom);
+            const newIsLoadingCanvas = new Map(prev.isLoadingCanvas);
             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);
+            newIsLoadingDom.delete(viewId);
+            newIsLoadingCanvas.delete(viewId);
             newDeviceType.delete(viewId);
             newClickType.delete(viewId);
             newClickMode.delete(viewId);
@@ -494,6 +516,8 @@ const useHeatmapSettingStore = create()(subscribeWithSelector((set) => {
             newHeatmapType.delete(viewId);
             return {
                 rankedBy: newRankedBy,
+                isLoadingDom: newIsLoadingDom,
+                isLoadingCanvas: newIsLoadingCanvas,
                 deviceType: newDeviceType,
                 clickType: newClickType,
                 clickMode: newClickMode,
@@ -503,6 +527,8 @@ const useHeatmapSettingStore = create()(subscribeWithSelector((set) => {
         }),
         resetAll: () => set({
             isRendering: new Map([[DEFAULT_VIEW_ID, false]]),
+            isLoadingDom: new Map([[DEFAULT_VIEW_ID, false]]),
+            isLoadingCanvas: new Map([[DEFAULT_VIEW_ID, false]]),
             rankedBy: new Map([[DEFAULT_VIEW_ID, EClickRankType.MostClicks]]),
             deviceType: new Map([[DEFAULT_VIEW_ID, EDeviceType.Desktop]]),
             clickType: new Map([[DEFAULT_VIEW_ID, EClickType.All]]),
@@ -1059,7 +1085,7 @@ const useHeatmapVizRectStore = create()(subscribeWithSelector((set) => {
     };
 }));
 
-const useHeatmapAreaClick = createViewContextHook({
+const useHeatmapAreaClickContext = createViewContextHook({
     useStore: useHeatmapVizClickAreaStore,
     getState: (store, viewId) => ({
         selectedArea: store.selectedArea.get(viewId) ?? null,
@@ -1093,14 +1119,14 @@ const DEFAULT_STATE = { hideSidebar: false };
  * @example
  * ```tsx
  * // Get everything
- * const { state, selectedElement, setSelectedElement } = useHeatmapClick();
+ * const { state, selectedElement, setSelectedElement } = useHeatmapClickContext();
  *
  * // Get only what you need (no unnecessary re-renders)
- * const setSelectedElement = useHeatmapClick(s => s.setSelectedElement);
- * const selectedElement = useHeatmapClick(s => s.selectedElement);
+ * const setSelectedElement = useHeatmapClickContext(s => s.setSelectedElement);
+ * const selectedElement = useHeatmapClickContext(s => s.selectedElement);
  * ```
  */
-const useHeatmapClick = createViewContextHook({
+const useHeatmapClickContext = createViewContextHook({
     useStore: useHeatmapVizClickStore,
     getState: (store, viewId) => ({
         state: store.state.get(viewId) ?? DEFAULT_STATE,
@@ -1120,17 +1146,17 @@ const useHeatmapClick = createViewContextHook({
  * @example
  * ```tsx
  * // Get everything
- * const { data, clickmap, setData } = useHeatmapData();
+ * const { data, clickmap, setData } = useHeatmapDataContext();
  *
  * // Get only what you need (no unnecessary re-renders)
- * const data = useHeatmapData(s => s.data);
- * const { setData, setClickmap } = useHeatmapData(s => ({
+ * const data = useHeatmapDataContext(s => s.data);
+ * const { setData, setClickmap } = useHeatmapDataContext(s => ({
  *   setData: s.setData,
  *   setClickmap: s.setClickmap,
  * }));
  * ```
  */
-const useHeatmapData = createViewContextHook({
+const useHeatmapDataContext = createViewContextHook({
     useStore: useHeatmapDataStore,
     getState: (store, viewId) => ({
         data: store.data.get(viewId),
@@ -1151,7 +1177,7 @@ const useHeatmapData = createViewContextHook({
     }),
 });
 
-const useHeatmapHover = createViewContextHook({
+const useHeatmapHoverContext = createViewContextHook({
     useStore: useHeatmapVizHoverStore,
     getState: (store, viewId) => ({
         hoveredElement: store.hoveredElement.get(viewId) ?? null,
@@ -1162,7 +1188,7 @@ const useHeatmapHover = createViewContextHook({
     }),
 });
 
-const useHeatmapScroll = createViewContextHook({
+const useHeatmapScrollContext = createViewContextHook({
     useStore: useHeatmapVizScrollStore,
     getState: (store, viewId) => ({
         zones: store.zones.get(viewId) ?? [],
@@ -1176,12 +1202,14 @@ const useHeatmapScroll = createViewContextHook({
     }),
 });
 
-const useHeatmapSetting = createViewContextHook({
+const useHeatmapSettingContext = createViewContextHook({
     useStore: useHeatmapSettingStore,
     getState: (store, viewId) => ({
         isRendering: !!store.isRendering.get(viewId),
+        isLoadingDom: !!store.isLoadingDom.get(viewId),
+        isLoadingCanvas: !!store.isLoadingCanvas.get(viewId),
         rankedBy: store.rankedBy.get(viewId),
-        deviceType: store.deviceType.get(viewId),
+        deviceType: store.deviceType.get(viewId) ?? EDeviceType.Desktop,
         clickType: store.clickType.get(viewId),
         clickMode: store.clickMode.get(viewId),
         scrollType: store.scrollType.get(viewId),
@@ -1195,11 +1223,13 @@ const useHeatmapSetting = createViewContextHook({
         setScrollType: (scrollType) => store.setScrollType(scrollType, viewId),
         setHeatmapType: (heatmapType) => store.setHeatmapType(heatmapType, viewId),
         setIsRendering: (isRendering) => store.setIsRendering(isRendering, viewId),
+        setIsLoadingDom: (isLoadingDom) => store.setIsLoadingDom(isLoadingDom, viewId),
+        setIsLoadingCanvas: (isLoadingCanvas) => store.setIsLoadingCanvas(isLoadingCanvas, viewId),
         clearView: (viewId) => store.clearView(viewId),
     }),
 });
 
-const useHeatmapViz = createViewContextHook({
+const useHeatmapVizContext = createViewContextHook({
     useStore: useHeatmapVizStore,
     getState: (store, viewId) => ({
         isRenderViz: store.isRenderViz.get(viewId) ?? false,
@@ -1219,26 +1249,7 @@ const useHeatmapViz = createViewContextHook({
     }),
 });
 
-// ===========================
-// Hook
-// ===========================
-/**
- * Hook to access heatmap viz rect (dimensions & visualizer ref) state and actions
- *
- * @example
- * ```tsx
- * // Get everything
- * const { iframeHeight, setIframeHeight, setVizRef } = useHeatmapVizRect();
- *
- * // Get only what you need (no unnecessary re-renders)
- * const iframeHeight = useHeatmapVizRect(s => s.iframeHeight);
- * const { setIframeHeight, setVizRef } = useHeatmapVizRect(s => ({
- *   setIframeHeight: s.setIframeHeight,
- *   setVizRef: s.setVizRef,
- * }));
- * ```
- */
-const useHeatmapVizRect = createViewContextHook({
+const useHeatmapVizRectContext = createViewContextHook({
     useStore: useHeatmapVizRectStore,
     getState: (store, viewId) => ({
         vizRef: store.vizRef.get(viewId) ?? null,
@@ -1332,7 +1343,7 @@ const useHeatmapCopyView = () => {
 };
 
 const useHeatmapWidthByDevice = () => {
-    const deviceType = useHeatmapSetting((state) => state.deviceType);
+    const deviceType = useHeatmapSettingContext((state) => state.deviceType);
     const width = useMemo(() => calcWidthByDeviceType(deviceType), [deviceType]);
     return width;
     function calcWidthByDeviceType(deviceType) {
@@ -1349,19 +1360,26 @@ const useHeatmapWidthByDevice = () => {
     }
 };
 
-const useRegisterConfig = () => {
+const useRegisterConfig = ({ isLoading, isLoadingCanvas, }) => {
     const mode = useHeatmapConfigStore((state) => state.mode);
-    const deviceType = useHeatmapSetting((state) => state.deviceType);
+    const deviceType = useHeatmapSettingContext((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);
+    const setIsRendering = useHeatmapSettingContext((state) => state.setIsRendering);
+    const setIsLoadingDom = useHeatmapSettingContext((state) => state.setIsLoadingDom);
+    const setIsLoadingCanvas = useHeatmapSettingContext((state) => state.setIsLoadingCanvas);
     useEffect(() => {
         setIsRendering(true);
         setTimeout(() => {
             setIsRendering(false);
-        }, 1000);
+        }, 100);
     }, [mode, deviceType, sidebarWidth]); // eslint-disable-line react-hooks/exhaustive-deps
+    useEffect(() => {
+        setIsRendering(!!isLoading);
+        setIsLoadingDom(!!isLoading);
+    }, [isLoading, setIsLoadingDom, setIsRendering]);
+    useEffect(() => {
+        setIsLoadingCanvas(!!isLoadingCanvas);
+    }, [isLoadingCanvas, setIsLoadingCanvas]);
 };
 
 const useRegisterControl = (control) => {
@@ -1383,9 +1401,9 @@ const useRegisterControl = (control) => {
 };
 
 const useRegisterData = (data, dataInfo) => {
-    const setIsRendering = useHeatmapSetting((s) => s.setIsRendering);
-    const setData = useHeatmapData((s) => s.setData);
-    const setDataInfo = useHeatmapData((s) => s.setDataInfo);
+    const setIsRendering = useHeatmapSettingContext((s) => s.setIsRendering);
+    const setData = useHeatmapDataContext((s) => s.setData);
+    const setDataInfo = useHeatmapDataContext((s) => s.setDataInfo);
     const isRegistered = useRef(false);
     useEffect(() => {
         if (isRegistered.current)
@@ -1402,9 +1420,9 @@ const useRegisterData = (data, dataInfo) => {
 };
 
 const useRegisterHeatmap = ({ clickmap, scrollmap, clickAreas }) => {
-    const setClickmap = useHeatmapData((s) => s.setClickmap);
-    const setScrollmap = useHeatmapData((s) => s.setScrollmap);
-    const setClickAreas = useHeatmapData((s) => s.setClickAreas);
+    const setClickmap = useHeatmapDataContext((s) => s.setClickmap);
+    const setScrollmap = useHeatmapDataContext((s) => s.setScrollmap);
+    const setClickAreas = useHeatmapDataContext((s) => s.setClickAreas);
     const isRegistered = useRef(false);
     useEffect(() => {
         if (isRegistered.current)
@@ -4012,11 +4030,11 @@ function removeConflictingAreas(conflicts, removeArea) {
     });
 }
 function useAreaCreation(options = {}) {
-    const dataInfo = useHeatmapData((s) => s.dataInfo);
-    const areas = useHeatmapAreaClick((s) => s.areas);
-    const addArea = useHeatmapAreaClick((s) => s.addArea);
-    const removeArea = useHeatmapAreaClick((s) => s.removeArea);
-    const removeClickArea = useHeatmapData((s) => s.removeClickArea);
+    const dataInfo = useHeatmapDataContext((s) => s.dataInfo);
+    const areas = useHeatmapAreaClickContext((s) => s.areas);
+    const addArea = useHeatmapAreaClickContext((s) => s.addArea);
+    const removeArea = useHeatmapAreaClickContext((s) => s.removeArea);
+    const removeClickArea = useHeatmapDataContext((s) => s.removeClickArea);
     const { customShadowRoot, onAreaCreated } = options;
     const onAreaCreatedElement = useCallback((element) => {
         if (!dataInfo)
@@ -4055,7 +4073,7 @@ function useAreaCreation(options = {}) {
 }
 
 function useAreaEditMode({ iframeRef, onAreaCreatedElement, enabled = false, }) {
-    const isEditingMode = useHeatmapAreaClick((s) => s.isEditingMode);
+    const isEditingMode = useHeatmapAreaClickContext((s) => s.isEditingMode);
     const hoveredElementRef = useRef(null);
     const onAreaCreatedElementRef = useRef(onAreaCreatedElement);
     const [hoveredElement, setHoveredElement] = useState(null);
@@ -4125,8 +4143,8 @@ function useAreaEditMode({ iframeRef, onAreaCreatedElement, enabled = false, })
 }
 
 const useAreaFilterVisible = (props) => {
-    const areas = useHeatmapAreaClick((s) => s.areas);
-    const setAreas = useHeatmapAreaClick((s) => s.setAreas);
+    const areas = useHeatmapAreaClickContext((s) => s.areas);
+    const setAreas = useHeatmapAreaClickContext((s) => s.setAreas);
     const { iframeRef, enableOverlapResolution } = props;
     const iframeDocument = iframeRef.current?.contentDocument;
     const visibleAreas = useMemo(() => {
@@ -4145,11 +4163,11 @@ const useAreaFilterVisible = (props) => {
 };
 
 function useAreaHydration(options) {
-    const dataInfo = useHeatmapData((s) => s.dataInfo);
-    const clickAreas = useHeatmapData((s) => s.clickAreas);
-    const vizRef = useHeatmapVizRect((s) => s.vizRef);
-    const areas = useHeatmapAreaClick((s) => s.areas);
-    const setAreas = useHeatmapAreaClick((s) => s.setAreas);
+    const dataInfo = useHeatmapDataContext((s) => s.dataInfo);
+    const clickAreas = useHeatmapDataContext((s) => s.clickAreas);
+    const vizRef = useHeatmapVizRectContext((s) => s.vizRef);
+    const areas = useHeatmapAreaClickContext((s) => s.areas);
+    const setAreas = useHeatmapAreaClickContext((s) => s.setAreas);
     const { shadowRoot, enabled = true } = options;
     const [isInitializing, setIsInitializing] = useState(false);
     const hydratePersistedAreas = useCallback(() => {
@@ -4189,9 +4207,9 @@ function useAreaHydration(options) {
 }
 
 function useAreaInteraction({ onAreaClick }) {
-    const isEditingMode = useHeatmapAreaClick((s) => s.isEditingMode);
-    const setHoveredArea = useHeatmapAreaClick((s) => s.setHoveredArea);
-    const setSelectedArea = useHeatmapAreaClick((s) => s.setSelectedArea);
+    const isEditingMode = useHeatmapAreaClickContext((s) => s.isEditingMode);
+    const setHoveredArea = useHeatmapAreaClickContext((s) => s.setHoveredArea);
+    const setSelectedArea = useHeatmapAreaClickContext((s) => s.setSelectedArea);
     const handleAreaMouseEnter = useCallback((area) => {
         if (isEditingMode)
             return;
@@ -4218,7 +4236,7 @@ function useAreaInteraction({ onAreaClick }) {
 }
 
 function useAreaPositionsUpdater(options) {
-    const areas = useHeatmapAreaClick((s) => s.areas);
+    const areas = useHeatmapAreaClickContext((s) => s.areas);
     const { iframeRef, visualRef, enabled = true } = options;
     const iframeDocument = iframeRef.current?.contentDocument;
     const updateAreaPositions = useCallback(() => {
@@ -4266,8 +4284,8 @@ function useAreaPositionsUpdater(options) {
 }
 
 function useAreaRectSync(options) {
-    const vizRef = useHeatmapVizRect((s) => s.vizRef);
-    const areas = useHeatmapAreaClick((s) => s.areas);
+    const vizRef = useHeatmapVizRectContext((s) => s.vizRef);
+    const areas = useHeatmapAreaClickContext((s) => s.areas);
     const { iframeDocument, shadowRoot, enabled = true } = options;
     useEffect(() => {
         if (!enabled || !iframeDocument || areas.length === 0) {
@@ -4348,11 +4366,11 @@ function useAreaRendererContainer(iframeDocument, customShadowRoot) {
 }
 
 const useAreaTopAutoDetect = (props) => {
-    const dataInfo = useHeatmapData((s) => s.dataInfo);
-    const clickAreas = useHeatmapData((s) => s.clickAreas);
-    const vizRef = useHeatmapVizRect((s) => s.vizRef);
-    const areas = useHeatmapAreaClick((s) => s.areas);
-    const addArea = useHeatmapAreaClick((s) => s.addArea);
+    const dataInfo = useHeatmapDataContext((s) => s.dataInfo);
+    const clickAreas = useHeatmapDataContext((s) => s.clickAreas);
+    const vizRef = useHeatmapVizRectContext((s) => s.vizRef);
+    const areas = useHeatmapAreaClickContext((s) => s.areas);
+    const addArea = useHeatmapAreaClickContext((s) => s.addArea);
     const { autoCreateTopN, shadowRoot, disabled = false } = props;
     const [isInitializing, setIsInitializing] = useState(disabled);
     useEffect(() => {
@@ -4391,8 +4409,8 @@ const useAreaTopAutoDetect = (props) => {
 };
 
 const useAreaClickmap = () => {
-    const vizRef = useHeatmapVizRect((s) => s.vizRef);
-    const clickmap = useHeatmapData((s) => s.clickmap);
+    const vizRef = useHeatmapVizRectContext((s) => s.vizRef);
+    const clickmap = useHeatmapDataContext((s) => s.clickmap);
     const start = useCallback(() => {
         if (!vizRef || !clickmap || clickmap.length === 0)
             return;
@@ -4407,9 +4425,9 @@ const useAreaClickmap = () => {
 };
 
 const useClickmap = () => {
-    const vizRef = useHeatmapVizRect((s) => s.vizRef);
-    const clickmap = useHeatmapData((s) => s.clickmap);
-    const isRenderViz = useHeatmapViz((s) => s.isRenderViz);
+    const vizRef = useHeatmapVizRectContext((s) => s.vizRef);
+    const clickmap = useHeatmapDataContext((s) => s.clickmap);
+    const isRenderViz = useHeatmapVizContext((s) => s.isRenderViz);
     const start = useCallback(() => {
         if (!vizRef || !clickmap || clickmap.length === 0 || !isRenderViz)
             return;
@@ -4425,8 +4443,8 @@ const useClickmap = () => {
 };
 
 const useScrollmap = () => {
-    const vizRef = useHeatmapVizRect((s) => s.vizRef);
-    const scrollmap = useHeatmapData((s) => s.scrollmap);
+    const vizRef = useHeatmapVizRectContext((s) => s.vizRef);
+    const scrollmap = useHeatmapDataContext((s) => s.scrollmap);
     const start = useCallback(() => {
         if (!vizRef || !scrollmap || scrollmap.length === 0)
             return;
@@ -4442,8 +4460,8 @@ const useScrollmap = () => {
 };
 
 const useHeatmapCanvas = () => {
-    const heatmapType = useHeatmapSetting((state) => state.heatmapType);
-    const clickMode = useHeatmapSetting((state) => state.clickMode);
+    const heatmapType = useHeatmapSettingContext((state) => state.heatmapType);
+    const clickMode = useHeatmapSettingContext((state) => state.clickMode);
     const { start: startClickmap } = useClickmap();
     const { start: startAreaClickmap } = useAreaClickmap();
     const { start: startScrollmap } = useScrollmap();
@@ -4496,11 +4514,11 @@ const scrollToElementIfNeeded = (visualRef, rect, scale, onScrollComplete) => {
     });
 };
 const useClickedElement = ({ visualRef, getRect }) => {
-    const selectedElement = useHeatmapClick((s) => s.selectedElement);
-    const shouldShowCallout = useHeatmapClick((s) => s.shouldShowCallout);
-    const setShouldShowCallout = useHeatmapClick((s) => s.setShouldShowCallout);
-    const widthScale = useHeatmapViz((s) => s.widthScale);
-    const dataInfo = useHeatmapData((s) => s.dataInfo);
+    const selectedElement = useHeatmapClickContext((s) => s.selectedElement);
+    const shouldShowCallout = useHeatmapClickContext((s) => s.shouldShowCallout);
+    const setShouldShowCallout = useHeatmapClickContext((s) => s.setShouldShowCallout);
+    const widthScale = useHeatmapVizContext((s) => s.widthScale);
+    const dataInfo = useHeatmapDataContext((s) => s.dataInfo);
     const [clickedElement, setClickedElement] = useState(null);
     const [showMissingElement, setShowMissingElement] = useState(false);
     const reset = () => {
@@ -4544,10 +4562,10 @@ const useClickedElement = ({ visualRef, getRect }) => {
 };
 
 const useElementCalloutVisible = ({ visualRef, getRect, positionMode }) => {
-    const selectedElement = useHeatmapClick((s) => s.selectedElement);
-    const setShouldShowCallout = useHeatmapClick((s) => s.setShouldShowCallout);
-    const widthScale = useHeatmapViz((s) => s.widthScale);
-    const dataInfo = useHeatmapData((s) => s.dataInfo);
+    const selectedElement = useHeatmapClickContext((s) => s.selectedElement);
+    const setShouldShowCallout = useHeatmapClickContext((s) => s.setShouldShowCallout);
+    const widthScale = useHeatmapVizContext((s) => s.widthScale);
+    const dataInfo = useHeatmapDataContext((s) => s.dataInfo);
     useEffect(() => {
         const isAbsolute = positionMode === 'absolute';
         if (isAbsolute)
@@ -4580,8 +4598,8 @@ const useElementCalloutVisible = ({ visualRef, getRect, positionMode }) => {
 };
 
 const useHeatmapEffects = ({ isVisible }) => {
-    // const selectedElement = useHeatmapClick((s) => s.selectedElement);
-    // const setShouldShowCallout = useHeatmapClick((s) => s.setShouldShowCallout);
+    // const selectedElement = useHeatmapClickContext((s) => s.selectedElement);
+    // const setShouldShowCallout = useHeatmapClickContext((s) => s.setShouldShowCallout);
     const resetAll = () => {
         // setShouldShowCallout(false);
     };
@@ -4600,8 +4618,8 @@ const useHeatmapEffects = ({ isVisible }) => {
 
 const useHeatmapElementPosition = ({ iframeRef, wrapperRef, visualizer }) => {
     const heatmapWidth = useHeatmapWidthByDevice();
-    const iframeHeight = useHeatmapVizRect((s) => s.iframeHeight);
-    const widthScale = useHeatmapViz((s) => s.widthScale);
+    const iframeHeight = useHeatmapVizRectContext((s) => s.iframeHeight);
+    const widthScale = useHeatmapVizContext((s) => s.widthScale);
     const getRect = useCallback((element) => {
         const hash = element?.hash;
         if (!iframeRef.current?.contentDocument || !hash || !visualizer)
@@ -4729,11 +4747,11 @@ 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);
+    const setHoveredElement = useHeatmapHoverContext((s) => s.setHoveredElement);
+    const isHoveredElement = useHeatmapHoverContext((s) => s.isHoveredElement);
+    const setSelectedElement = useHeatmapClickContext((s) => s.setSelectedElement);
+    const widthScale = useHeatmapVizContext((s) => s.widthScale);
+    const dataInfo = useHeatmapDataContext((s) => s.dataInfo);
     const reset = useCallback(() => {
         setHoveredElement(null);
     }, [setHoveredElement]);
@@ -6289,10 +6307,10 @@ function enableNavigationBlocking() {
 }
 
 function useVizLiveRender() {
-    const setIframeHeight = useHeatmapVizRect((s) => s.setIframeHeight);
-    const wrapperHeight = useHeatmapVizRect((s) => s.wrapperHeight);
-    const wrapperWidth = useHeatmapVizRect((s) => s.wrapperWidth);
-    const setIsRenderViz = useHeatmapViz((s) => s.setIsRenderViz);
+    const setIframeHeight = useHeatmapVizRectContext((s) => s.setIframeHeight);
+    const wrapperHeight = useHeatmapVizRectContext((s) => s.wrapperHeight);
+    const wrapperWidth = useHeatmapVizRectContext((s) => s.wrapperWidth);
+    const setIsRenderViz = useHeatmapVizContext((s) => s.setIsRenderViz);
     const contentWidth = useHeatmapWidthByDevice();
     const htmlContent = useHeatmapLiveStore((state) => state.htmlContent);
     const targetUrl = useHeatmapLiveStore((state) => state.targetUrl);
@@ -6388,11 +6406,11 @@ 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);
-    const setIframeHeight = useHeatmapVizRect((s) => s.setIframeHeight);
-    const setIsRenderViz = useHeatmapViz((s) => s.setIsRenderViz);
+    const data = useHeatmapDataContext((s) => s.data);
+    const vizRef = useHeatmapVizRectContext((s) => s.vizRef);
+    const setVizRef = useHeatmapVizRectContext((s) => s.setVizRef);
+    const setIframeHeight = useHeatmapVizRectContext((s) => s.setIframeHeight);
+    const setIsRenderViz = useHeatmapVizContext((s) => s.setIsRenderViz);
     const iframeRef = useRef(null);
     const renderHeatmap = useCallback(async (payloads) => {
         if (!payloads || payloads.length === 0)
@@ -6456,9 +6474,9 @@ function sortEvents(a, b) {
 }
 
 const useReplayRender = () => {
-    const setIframeHeight = useHeatmapVizRect((s) => s.setIframeHeight);
-    const setIsRenderViz = useHeatmapViz((s) => s.setIsRenderViz);
-    const { data } = useHeatmapData();
+    const data = useHeatmapDataContext((s) => s.data);
+    const setIsRenderViz = useHeatmapVizContext((s) => s.setIsRenderViz);
+    const setIframeHeight = useHeatmapVizRectContext((s) => s.setIframeHeight);
     const visualizerRef = useRef(null);
     const iframeRef = useRef(null);
     const eventsRef = useRef([]);
@@ -6630,10 +6648,10 @@ const useContentDimensions = ({ iframeRef }) => {
 };
 
 const useObserveIframeHeight = (props) => {
-    const iframeHeight = useHeatmapVizRect((s) => s.iframeHeight);
-    const setIframeHeight = useHeatmapVizRect((s) => s.setIframeHeight);
-    const isRenderViz = useHeatmapViz((s) => s.isRenderViz);
-    const wrapperHeight = useHeatmapVizRect((s) => s.wrapperHeight);
+    const iframeHeight = useHeatmapVizRectContext((s) => s.iframeHeight);
+    const setIframeHeight = useHeatmapVizRectContext((s) => s.setIframeHeight);
+    const isRenderViz = useHeatmapVizContext((s) => s.isRenderViz);
+    const wrapperHeight = useHeatmapVizRectContext((s) => s.wrapperHeight);
     const { iframeRef } = props;
     const resizeObserverRef = useRef(null);
     const mutationObserverRef = useRef(null);
@@ -6760,14 +6778,14 @@ const useObserveIframeHeight = (props) => {
 };
 
 const useScaleCalculation = (props) => {
-    const widthScale = useHeatmapViz((s) => s.widthScale);
-    const zoomRatio = useHeatmapViz((s) => s.zoomRatio);
-    const isScaledToFit = useHeatmapViz((s) => s.isScaledToFit);
-    const minZoomRatio = useHeatmapViz((s) => s.minZoomRatio);
-    const maxZoomRatio = useHeatmapViz((s) => s.maxZoomRatio);
-    const setScale = useHeatmapViz((s) => s.setScale);
-    const setIsScaledToFit = useHeatmapViz((s) => s.setIsScaledToFit);
-    const setMinZoomRatio = useHeatmapViz((s) => s.setMinZoomRatio);
+    const widthScale = useHeatmapVizContext((s) => s.widthScale);
+    const zoomRatio = useHeatmapVizContext((s) => s.zoomRatio);
+    const isScaledToFit = useHeatmapVizContext((s) => s.isScaledToFit);
+    const minZoomRatio = useHeatmapVizContext((s) => s.minZoomRatio);
+    const maxZoomRatio = useHeatmapVizContext((s) => s.maxZoomRatio);
+    const setScale = useHeatmapVizContext((s) => s.setScale);
+    const setIsScaledToFit = useHeatmapVizContext((s) => s.setIsScaledToFit);
+    const setMinZoomRatio = useHeatmapVizContext((s) => s.setMinZoomRatio);
     const { containerWidth, containerHeight, contentWidth, contentHeight } = props;
     const calculateScaleResult = useCallback(() => {
         if (containerWidth > 0 && contentWidth > 0 && containerHeight > 0 && contentHeight > 0) {
@@ -6830,7 +6848,7 @@ const useScrollSync = ({ widthScale, iframeRef }) => {
 };
 
 const useHeatmapScale = (props) => {
-    const iframeHeight = useHeatmapVizRect((s) => s.iframeHeight);
+    const iframeHeight = useHeatmapVizRectContext((s) => s.iframeHeight);
     const { wrapperRef, iframeRef } = props;
     // 1. Observe container dimensions
     const { containerWidth, containerHeight } = useContainerDimensions({ wrapperRef });
@@ -6858,9 +6876,9 @@ const useHeatmapScale = (props) => {
 const useIframeHeight = (props) => {
     const { iframeRef } = props;
     const iframeWidth = useHeatmapWidthByDevice();
-    const wrapperHeight = useHeatmapVizRect((s) => s.wrapperHeight);
-    const setIframeHeight = useHeatmapVizRect((s) => s.setIframeHeight);
-    const isRenderViz = useHeatmapViz((s) => s.isRenderViz);
+    const wrapperHeight = useHeatmapVizRectContext((s) => s.wrapperHeight);
+    const setIframeHeight = useHeatmapVizRectContext((s) => s.setIframeHeight);
+    const isRenderViz = useHeatmapVizContext((s) => s.isRenderViz);
     useIframeHeightProcessor({
         iframeRef: iframeRef,
         iframeWidth: iframeWidth,
@@ -6881,8 +6899,8 @@ const useIframeHeight = (props) => {
 };
 
 const useWrapperRefHeight = (props) => {
-    const setWrapperHeight = useHeatmapVizRect((s) => s.setWrapperHeight);
-    const setWrapperWidth = useHeatmapVizRect((s) => s.setWrapperWidth);
+    const setWrapperHeight = useHeatmapVizRectContext((s) => s.setWrapperHeight);
+    const setWrapperWidth = useHeatmapVizRectContext((s) => s.setWrapperWidth);
     const { isActive, wrapperRef } = props;
     const resizeObserverRef = useRef(null);
     const mutationObserverRef = useRef(null);
@@ -6954,7 +6972,7 @@ const useWrapperRefHeight = (props) => {
 };
 
 const useZonePositions = (_options) => {
-    const iframeHeight = useHeatmapVizRect((s) => s.iframeHeight);
+    const iframeHeight = useHeatmapVizRectContext((s) => s.iframeHeight);
     const getZonePosition = useCallback((zone) => {
         if (!iframeHeight) {
             return null;
@@ -6978,10 +6996,10 @@ const SCROLL_GRADIENT_COLORS = [
 ];
 const useScrollmapZones = (options) => {
     const { mode = 'basic', enabled = true, iframeRef, wrapperRef } = options;
+    const scrollmap = useHeatmapDataContext((s) => s.scrollmap);
+    const dataInfo = useHeatmapDataContext((s) => s.dataInfo);
     const [isReady, setIsReady] = useState(false);
     const [zones, setZones] = useState([]);
-    const { scrollmap } = useHeatmapData();
-    const { dataInfo } = useHeatmapData();
     const { getZonePosition } = useZonePositions();
     const scrollMapInfo = dataInfo?.scrollMapInfo;
     const maxUsers = useMemo(() => {
@@ -7128,25 +7146,24 @@ const BoxStack = forwardRef(({ children, ...props }, ref) => {
 BoxStack.displayName = 'BoxStack';
 
 const ContentMetricBar = () => {
-    const controls = useHeatmapControlStore((state) => state.controls);
+    const CompMetricBar = useHeatmapControlStore((state) => state.controls.MetricBar);
     const borderBottom = `${HEATMAP_CONFIG.borderWidth}px solid ${HEATMAP_CONFIG.borderColor}`;
     return (jsx(BoxStack, { id: "gx-hm-content-metric-bar", flexDirection: "row", alignItems: "center", overflow: "auto", zIndex: 1, backgroundColor: "white", style: {
             borderBottom,
-        }, children: controls.MetricBar ?? null }));
+        }, children: CompMetricBar && jsx(CompMetricBar, {}) }));
 };
 ContentMetricBar.displayName = 'ContentMetricBar';
 
 const ContentSidebar = () => {
-    const controls = useHeatmapControlStore((state) => state.controls);
-    const state = useHeatmapClick((s) => s.state);
+    const CompSidebar = useHeatmapControlStore((state) => state.controls.Sidebar);
+    const state = useHeatmapClickContext((s) => s.state);
     const isHideSidebar = state.hideSidebar;
     const sidebarWidth = useHeatmapConfigStore((state) => state.sidebarWidth);
     const mode = useHeatmapConfigStore((state) => state.mode);
-    const SidebarComponent = controls.Sidebar ?? null;
     const isCompareMode = mode === 'compare';
     if (isCompareMode)
         return null;
-    if (!SidebarComponent)
+    if (!CompSidebar)
         return null;
     return (jsx("div", { className: "gx-hm-sidebar", style: {
             height: '100%',
@@ -7163,7 +7180,7 @@ const ContentSidebar = () => {
                 height: '100%',
                 width: `calc(${sidebarWidth}px + ${HEATMAP_CONFIG.borderWidth}px)`,
                 borderRight: `${HEATMAP_CONFIG.borderWidth}px solid ${HEATMAP_CONFIG.borderColor}`,
-            }, children: jsx(SidebarComponent, {}) }) }));
+            }, children: jsx(CompSidebar, {}) }) }));
 };
 
 const PopoverSidebar = () => {
@@ -7171,7 +7188,7 @@ const PopoverSidebar = () => {
     const CompSidebar = useHeatmapControlStore((state) => state.controls.Sidebar);
     const CompSidebarActivator = useHeatmapControlStore((state) => state.controls.SidebarActivator);
     const sidebarWidth = useHeatmapConfigStore((state) => state.sidebarWidth);
-    const state = useHeatmapClick((s) => s.state);
+    const state = useHeatmapClickContext((s) => s.state);
     const [isPopoverOpen, setIsPopoverOpen] = useState(false);
     const isCompareMode = mode === 'compare';
     const isHideSidebar = state.hideSidebar;
@@ -7199,15 +7216,10 @@ const PopoverSidebar = () => {
 };
 
 const ContentToolbar = () => {
-    const controls = useHeatmapControlStore((state) => state.controls);
-    return (jsx("div", { id: "gx-hm-content-toolbar", style: {
-            position: 'absolute',
-            bottom: 0,
-            left: '8px',
-            right: '24px',
-            padding: '8px',
-            paddingBlock: '16px',
-        }, children: controls.Toolbar ?? null }));
+    const CompToolbar = useHeatmapControlStore((state) => state.controls.Toolbar);
+    return (jsx(BoxStack, { id: "gx-hm-content-toolbar", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "48px", style: {
+            borderTop: `${HEATMAP_CONFIG.borderWidth}px solid ${HEATMAP_CONFIG.borderColor}`,
+        }, children: CompToolbar && jsx(CompToolbar, {}) }));
 };
 
 const VizContainer = ({ children, isActive = false }) => {
@@ -7761,7 +7773,7 @@ const AreaEditHighlight = ({ element, shadowRoot, onClick }) => {
 AreaEditHighlight.displayName = 'AreaEditHighlight';
 
 const AreaEditHighlightPortal = ({ shadowContainer, iframeRef, customShadowRoot, onAreaCreated, }) => {
-    const isEditingMode = useHeatmapAreaClick((s) => s.isEditingMode);
+    const isEditingMode = useHeatmapAreaClickContext((s) => s.isEditingMode);
     const { onAreaCreatedElement } = useAreaCreation({ customShadowRoot, onAreaCreated });
     const { hoveredElement } = useAreaEditMode({ iframeRef, enabled: true, onAreaCreatedElement });
     if (!isEditingMode || !hoveredElement)
@@ -7876,7 +7888,7 @@ const AreaOverlay = memo(AreaOverlayComponent, (prevProps, nextProps) => {
 });
 
 const SelectedAreaOverlay = () => {
-    const selectedArea = useHeatmapAreaClick((s) => s.selectedArea);
+    const selectedArea = useHeatmapAreaClickContext((s) => s.selectedArea);
     if (!selectedArea)
         return null;
     return (jsx(Fragment$1, { children: jsx("style", { children: `
@@ -7887,13 +7899,13 @@ const SelectedAreaOverlay = () => {
 };
 
 const AreasPortal = ({ shadowContainer, onAreaClick }) => {
-    const areas = useHeatmapAreaClick((s) => s.areas);
+    const areas = useHeatmapAreaClickContext((s) => s.areas);
     return createPortal(jsxs(Fragment$1, { children: [areas.map((area) => (jsx(AreaOverlay, { area: area, onAreaClick: onAreaClick }, area.id))), jsx(SelectedAreaOverlay, {})] }), shadowContainer);
 };
 
 const AutoScrollHandler = ({ visualRef }) => {
-    const widthScale = useHeatmapViz((s) => s.widthScale);
-    const selectedArea = useHeatmapAreaClick((s) => s.selectedArea);
+    const widthScale = useHeatmapVizContext((s) => s.widthScale);
+    const selectedArea = useHeatmapAreaClickContext((s) => s.selectedArea);
     useEffect(() => {
         if (!selectedArea)
             return;
@@ -7907,7 +7919,7 @@ const AutoScrollHandler = ({ visualRef }) => {
 };
 
 const PortalAreaRenderer = ({ iframeRef, visualRef, shadowRoot, onAreaCreated, onAreaClick, }) => {
-    const isRenderViz = useHeatmapViz((s) => s.isRenderViz);
+    const isRenderViz = useHeatmapVizContext((s) => s.isRenderViz);
     const iframeDocument = iframeRef.current?.contentDocument || undefined;
     const { shadowContainer, isReady } = useAreaRendererContainer(iframeDocument, shadowRoot);
     useAreaRectSync({ iframeDocument, shadowRoot, enabled: isReady && isRenderViz });
@@ -7918,9 +7930,9 @@ const PortalAreaRenderer = ({ iframeRef, visualRef, shadowRoot, onAreaCreated, o
 };
 
 const VizAreaClick = ({ iframeRef, visualRef, shadowRoot, autoCreateTopN = 10, enableOverlapResolution = true, onAreaClick, }) => {
-    const clickAreas = useHeatmapData((s) => s.clickAreas);
-    const resetView = useHeatmapAreaClick((s) => s.resetView);
-    const isRenderViz = useHeatmapViz((s) => s.isRenderViz);
+    const clickAreas = useHeatmapDataContext((s) => s.clickAreas);
+    const resetView = useHeatmapAreaClickContext((s) => s.resetView);
+    const isRenderViz = useHeatmapVizContext((s) => s.isRenderViz);
     useAreaTopAutoDetect({ autoCreateTopN, shadowRoot, disabled: !!clickAreas?.length });
     useAreaFilterVisible({ iframeRef, enableOverlapResolution });
     useAreaHydration({ shadowRoot });
@@ -7936,7 +7948,7 @@ const VizAreaClick = ({ iframeRef, visualRef, shadowRoot, autoCreateTopN = 10, e
 VizAreaClick.displayName = 'VizAreaClick';
 
 const RankBadgeComponent = ({ index, hash, elementRect, widthScale, show = true, clickOnElement, }) => {
-    const clickedHash = useHeatmapClick((s) => s.selectedElement?.hash);
+    const clickedHash = useHeatmapClickContext((s) => s.selectedElement?.hash);
     const isShow = !!show && clickedHash !== hash;
     if (!isShow || !ELM_CALLOUT_CONFIG.SHOW_RANK_BADGE)
         return null;
@@ -7948,8 +7960,8 @@ const RankBadge = memo(RankBadgeComponent);
 
 const NUMBER_OF_TOP_ELEMENTS = 10;
 const DefaultRankBadgesComponent = ({ getRect, hidden }) => {
-    const dataInfo = useHeatmapData((s) => s.dataInfo);
-    const widthScale = useHeatmapViz((s) => s.widthScale);
+    const dataInfo = useHeatmapDataContext((s) => s.dataInfo);
+    const widthScale = useHeatmapVizContext((s) => s.widthScale);
     const elements = dataInfo?.sortedElements?.slice(0, NUMBER_OF_TOP_ELEMENTS) ?? [];
     if (hidden || elements.length === 0)
         return null;
@@ -7971,7 +7983,7 @@ const DEFAULT_POSITION = {
 };
 const ElementCallout = (props) => {
     const viewId = useViewIdContext();
-    const widthScale = useHeatmapViz((s) => s.widthScale);
+    const widthScale = useHeatmapVizContext((s) => s.widthScale);
     const CompElementCallout = useHeatmapControlStore((state) => state.controls.ElementCallout);
     const calloutRef = useRef(null);
     const element = props.element;
@@ -8003,7 +8015,7 @@ const ElementCallout = (props) => {
     }
 };
 const useAnchorPosition = (calloutRef, props) => {
-    const widthScale = useHeatmapViz((s) => s.widthScale);
+    const widthScale = useHeatmapVizContext((s) => s.widthScale);
     const { target, visualRef, alignment, element, positionMode } = props;
     const [position, setPosition] = useState(DEFAULT_POSITION);
     const isAbsolute = positionMode === 'absolute';
@@ -8058,7 +8070,7 @@ const useAnchorPosition = (calloutRef, props) => {
 };
 
 const ElementMissing = ({ show = true, visualRef }) => {
-    const widthScale = useHeatmapViz((s) => s.widthScale);
+    const widthScale = useHeatmapVizContext((s) => s.widthScale);
     const missingElementRef = useRef(null);
     const wrapperWidth = useHeatmapWidthByDevice();
     const [scrollPosition, setScrollPosition] = useState({ scrollTop: 0, scrollLeft: 0 });
@@ -8173,7 +8185,7 @@ const BackdropCanvas = ({ activeElement, viewportWidth, viewportHeight, borderWi
 
 const ElementCalloutOverlay = (props) => {
     const { element, containerRef } = props;
-    const widthScale = useHeatmapViz((s) => s.widthScale);
+    const widthScale = useHeatmapVizContext((s) => s.widthScale);
     const CompElementCallout = useHeatmapControlStore((state) => state.controls.ElementCallout);
     const calloutRef = useRef(null);
     const [position, setPosition] = useState({
@@ -8212,8 +8224,8 @@ ElementCalloutOverlay.displayName = 'ElementCalloutOverlay';
 
 const ElementOverlayComponent = (props) => {
     const { type, element, onClick, elementId, hideOutline } = props;
-    const widthScale = useHeatmapViz((s) => s.widthScale);
-    const viewportHeight = useHeatmapVizRect((s) => s.iframeHeight);
+    const widthScale = useHeatmapVizContext((s) => s.widthScale);
+    const viewportHeight = useHeatmapVizRectContext((s) => s.iframeHeight);
     const viewportWidth = useHeatmapWidthByDevice();
     const overlayStyle = useMemo(() => {
         const isInvalid = !element || (element.width === 0 && element.height === 0);
@@ -8254,8 +8266,8 @@ const ElementCalloutClicked = memo(ElementCalloutClickedComponent);
 
 const HoveredElementOverlayComponent = ({ onClick }) => {
     const viewId = useViewIdContext();
-    const hoveredElement = useHeatmapHover((s) => s.hoveredElement);
-    const clickedElement = useHeatmapClick((s) => s.selectedElement);
+    const hoveredElement = useHeatmapHoverContext((s) => s.hoveredElement);
+    const clickedElement = useHeatmapClickContext((s) => s.selectedElement);
     const handleClick = (event) => {
         if (onClick) {
             onClick(event, hoveredElement?.hash ?? '');
@@ -8272,7 +8284,7 @@ const HoveredElementOverlay = memo(HoveredElementOverlayComponent);
 const IS_SHOW_CALLOUT = false;
 const ElementCalloutHoveredComponent = (props) => {
     const viewId = useViewIdContext();
-    useHeatmapHover((s) => s.hoveredElement);
+    useHeatmapHoverContext((s) => s.hoveredElement);
     getHoveredElementId(viewId, props.isSecondary);
     const isShowCallout = IS_SHOW_CALLOUT  ;
     return (jsxs(Fragment, { children: [jsx(HoveredElementOverlay, { onClick: props.onClick }), isShowCallout ] }));
@@ -8281,7 +8293,7 @@ const ElementCalloutHovered = memo(ElementCalloutHoveredComponent);
 
 const HeatmapElements = (props) => {
     const viewId = useViewIdContext();
-    const iframeHeight = useHeatmapVizRect((s) => s.iframeHeight);
+    const iframeHeight = useHeatmapVizRectContext((s) => s.iframeHeight);
     const elementCalloutRef = useRef(null);
     const { iframeDimensions, positionMode } = props;
     const { visualRef, iframeRef, wrapperRef, visualizer } = props;
@@ -8297,8 +8309,8 @@ const HeatmapElements = (props) => {
 
 const VizElements = ({ iframeRef, visualRef, wrapperRef }) => {
     const contentWidth = useHeatmapWidthByDevice();
-    const dataInfo = useHeatmapData((s) => s.dataInfo);
-    const vizRef = useHeatmapVizRect((s) => s.vizRef);
+    const dataInfo = useHeatmapDataContext((s) => s.dataInfo);
+    const vizRef = useHeatmapVizRectContext((s) => s.vizRef);
     const visualizer = {
         get: (hash) => {
             if (!vizRef)
@@ -8319,8 +8331,8 @@ const VizElements = ({ iframeRef, visualRef, wrapperRef }) => {
 };
 
 const VizClickmap = ({ iframeRef, visualRef, wrapperRef }) => {
-    const clickMode = useHeatmapSetting((state) => state.clickMode);
-    const heatmapType = useHeatmapSetting((state) => state.heatmapType);
+    const clickMode = useHeatmapSettingContext((state) => state.clickMode);
+    const heatmapType = useHeatmapSettingContext((state) => state.heatmapType);
     const isClickType = heatmapType === EHeatmapType.Click;
     if (!isClickType)
         return null;
@@ -8335,8 +8347,8 @@ const VizClickmap = ({ iframeRef, visualRef, wrapperRef }) => {
 };
 
 const ScrollMapMinimap = ({ zones, maxUsers }) => {
-    const scrollType = useHeatmapSetting((s) => s.scrollType);
-    const showMinimap = useHeatmapScroll((s) => s.showMinimap);
+    const scrollType = useHeatmapSettingContext((s) => s.scrollType);
+    const showMinimap = useHeatmapScrollContext((s) => s.showMinimap);
     const isScrollType = [EScrollType.Attention].includes(scrollType ?? EScrollType.Depth);
     if (!showMinimap || !isScrollType)
         return null;
@@ -8396,7 +8408,7 @@ const ScrollZoneTooltip = ({ zone, position, currentScrollPercent, scrollmap, })
 };
 
 const HoverZones = ({ iframeRef, wrapperRef, position, currentScrollPercent }) => {
-    const { scrollmap } = useHeatmapData();
+    const scrollmap = useHeatmapDataContext((s) => s.scrollmap);
     // const hoveredZone = useHeatmapVizScrollStore((state) => state.hoveredZone);
     // const setHoveredZone = useHeatmapVizScrollStore((state) => state.setHoveredZone);
     const { zones, isReady, maxUsers } = useScrollmapZones({
@@ -8411,8 +8423,8 @@ const HoverZones = ({ iframeRef, wrapperRef, position, currentScrollPercent }) =
 };
 
 const ScrollMapOverlay = ({ wrapperRef, iframeRef }) => {
-    const widthScale = useHeatmapViz((s) => s.widthScale);
-    const iframeHeight = useHeatmapVizRect((s) => s.iframeHeight);
+    const widthScale = useHeatmapVizContext((s) => s.widthScale);
+    const iframeHeight = useHeatmapVizRectContext((s) => s.iframeHeight);
     const overlayRef = useRef(null);
     const [position, setPosition] = useState();
     const [currentScrollPercent, setCurrentScrollPercent] = useState(0);
@@ -8449,7 +8461,7 @@ const ScrollMapOverlay = ({ wrapperRef, iframeRef }) => {
 };
 
 const AverageFoldLine = ({ iframeRef, wrapperRef }) => {
-    const { dataInfo } = useHeatmapData();
+    const dataInfo = useHeatmapDataContext((s) => s.dataInfo);
     const { getZonePosition } = useZonePositions();
     const averageFold = dataInfo?.averageFold || 50;
     const position = getZonePosition({
@@ -8486,8 +8498,8 @@ const AverageFoldLine = ({ iframeRef, wrapperRef }) => {
 };
 
 const ScrollmapMarker = ({ iframeRef, wrapperRef }) => {
-    const scrollType = useHeatmapSetting((s) => s.scrollType);
-    const { scrollmap } = useHeatmapData();
+    const scrollmap = useHeatmapDataContext((s) => s.scrollmap);
+    const scrollType = useHeatmapSettingContext((s) => s.scrollType);
     const { getZonePosition } = useZonePositions();
     if (!scrollmap || scrollmap.length === 0)
         return null;
@@ -8562,8 +8574,8 @@ const ScrollmapMarker = ({ iframeRef, wrapperRef }) => {
 
 const SCROLL_TYPES = [EHeatmapType.Scroll];
 const VizScrollMap = ({ iframeRef, wrapperRef }) => {
-    const heatmapType = useHeatmapSetting((s) => s.heatmapType);
-    const iframeHeight = useHeatmapVizRect((s) => s.iframeHeight);
+    const heatmapType = useHeatmapSettingContext((s) => s.heatmapType);
+    const iframeHeight = useHeatmapVizRectContext((s) => s.iframeHeight);
     // useRenderCount('VizScrollMap');
     const isHeatmapScroll = SCROLL_TYPES.includes(heatmapType ?? EHeatmapType.Click);
     if (!iframeHeight || !isHeatmapScroll)
@@ -8579,12 +8591,29 @@ const VizScrollMap = ({ iframeRef, wrapperRef }) => {
         }, children: [jsx(ScrollmapMarker, { iframeRef: iframeRef, wrapperRef: wrapperRef }), jsx(AverageFoldLine, { iframeRef: iframeRef, wrapperRef: wrapperRef }), jsx(ScrollMapOverlay, { wrapperRef: wrapperRef, iframeRef: iframeRef })] }));
 };
 
+const VizLoadingCanvas = () => {
+    const isLoadingCanvas = useHeatmapSettingContext((state) => state.isLoadingCanvas);
+    const CompLoading = useHeatmapControlStore((s) => s.controls.VizLoading);
+    const wrapperHeight = useHeatmapVizRectContext((s) => s.wrapperHeight);
+    if (!isLoadingCanvas)
+        return null;
+    return (jsx("div", { className: "gx-hm-loading", style: {
+            background: '#000000B2',
+        }, children: jsx(BoxStack, { position: "absolute", height: wrapperHeight, flexDirection: "row", justifyContent: "center", alignItems: "center", style: {
+                width: '100%',
+                top: 0,
+                left: 0,
+            }, children: jsx("div", { style: { height: 'fit-content' }, children: CompLoading && jsx(CompLoading, { type: "transparent" }) }) }) }));
+};
+
 const WrapperVisual = ({ children, visualRef, wrapperRef, scaledHeight, iframeHeight, onScroll, }) => {
-    const widthScale = useHeatmapViz((s) => s.widthScale);
+    const isLoadingCanvas = useHeatmapSettingContext((state) => state.isLoadingCanvas);
+    const widthScale = useHeatmapVizContext((s) => s.widthScale);
     const contentWidth = useHeatmapWidthByDevice();
     const contentHeight = calcContentHeight();
     return (jsx("div", { ref: visualRef, className: "gx-hm-visual", onScroll: onScroll, style: {
-            overflow: 'hidden scroll',
+            overflowX: 'hidden',
+            overflowY: iframeHeight > 0 && !isLoadingCanvas ? 'scroll' : 'hidden',
             display: 'flex',
             position: 'relative',
             justifyContent: 'center',
@@ -8596,6 +8625,7 @@ const WrapperVisual = ({ children, visualRef, wrapperRef, scaledHeight, iframeHe
                 display: 'flex',
                 justifyContent: 'center',
                 alignItems: 'flex-start',
+                position: 'relative',
                 height: contentHeight,
                 padding: HEATMAP_STYLE['wrapper']['padding'],
                 paddingBottom: HEATMAP_STYLE['viz']['paddingBottom'],
@@ -8617,8 +8647,8 @@ const WrapperVisual = ({ children, visualRef, wrapperRef, scaledHeight, iframeHe
 const VizDomRenderer = ({ mode = 'heatmap' }) => {
     const viewId = useViewIdContext();
     const contentWidth = useHeatmapWidthByDevice();
-    const iframeHeight = useHeatmapVizRect((s) => s.iframeHeight);
-    const wrapperHeight = useHeatmapVizRect((s) => s.wrapperHeight);
+    const iframeHeight = useHeatmapVizRectContext((s) => s.iframeHeight);
+    const wrapperHeight = useHeatmapVizRectContext((s) => s.wrapperHeight);
     const wrapperRef = useRef(null);
     const visualRef = useRef(null);
     const { iframeRef } = useHeatmapRenderByMode(mode);
@@ -8629,23 +8659,30 @@ 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, id: `clarity-iframe-${viewId}`, 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(VizLoadingCanvas, {}), jsx(VizScrollMap, { iframeRef: iframeRef, wrapperRef: visualRef })] }));
 };
 
 const VizLoading = () => {
-    return (jsxs("div", { className: "gx-hm-loading", children: [jsx("div", { className: "gx-hm-loading--spinner" }), jsx("p", { className: "gx-hm-loading--text", children: "Loading visualization..." })] }));
+    const CompLoading = useHeatmapControlStore((s) => s.controls.VizLoading);
+    return (jsx("div", { className: "gx-hm-loading", style: {
+            // width: `calc(100% - ${contentWidth * widthScale}px)`,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            background: 'rgba(255, 255, 255, 0.75)',
+        }, children: CompLoading && jsx(CompLoading, { type: "default" }) }));
 };
 
 const VizDomHeatmap = () => {
-    const iframeHeight = useHeatmapVizRect((s) => s.iframeHeight);
-    const setIframeHeight = useHeatmapVizRect((s) => s.setIframeHeight);
-    const setVizRef = useHeatmapVizRect((s) => s.setVizRef);
-    const setIsRenderViz = useHeatmapViz((s) => s.setIsRenderViz);
-    const setSelectedElement = useHeatmapClick((s) => s.setSelectedElement);
-    const setHoveredElement = useHeatmapHover((s) => s.setHoveredElement);
-    // const setSelectedArea = useHeatmapAreaClick((s) => s.setSelectedArea);
-    // const setHoveredArea = useHeatmapAreaClick((s) => s.setHoveredArea);
-    // const setAreas = useHeatmapAreaClick((s) => s.setAreas);
+    const iframeHeight = useHeatmapVizRectContext((s) => s.iframeHeight);
+    const setIframeHeight = useHeatmapVizRectContext((s) => s.setIframeHeight);
+    const setVizRef = useHeatmapVizRectContext((s) => s.setVizRef);
+    const setIsRenderViz = useHeatmapVizContext((s) => s.setIsRenderViz);
+    const setSelectedElement = useHeatmapClickContext((s) => s.setSelectedElement);
+    const setHoveredElement = useHeatmapHoverContext((s) => s.setHoveredElement);
+    // const setSelectedArea = useHeatmapAreaClickContext((s) => s.setSelectedArea);
+    // const setHoveredArea = useHeatmapAreaClickContext((s) => s.setHoveredArea);
+    // const setAreas = useHeatmapAreaClickContext((s) => s.setAreas);
     useRenderCount('VizDomHeatmap');
     const cleanUp = () => {
         setVizRef(null);
@@ -8666,8 +8703,8 @@ VizDomHeatmap.displayName = 'VizDomHeatmap';
 
 const VizLiveRenderer = () => {
     const contentWidth = useHeatmapWidthByDevice();
-    const iframeHeight = useHeatmapVizRect((s) => s.iframeHeight);
-    const wrapperHeight = useHeatmapVizRect((s) => s.wrapperHeight);
+    const iframeHeight = useHeatmapVizRectContext((s) => s.iframeHeight);
+    const wrapperHeight = useHeatmapVizRectContext((s) => s.wrapperHeight);
     const visualRef = useRef(null);
     const wrapperRef = useRef(null);
     const { iframeRef } = useVizLiveRender();
@@ -8680,25 +8717,28 @@ const VizLiveRenderer = () => {
 };
 
 const VizLiveHeatmap = () => {
-    const iframeHeight = useHeatmapVizRect((s) => s.iframeHeight);
-    const wrapperHeight = useHeatmapVizRect((s) => s.wrapperHeight);
+    const iframeHeight = useHeatmapVizRectContext((s) => s.iframeHeight);
+    const wrapperHeight = useHeatmapVizRectContext((s) => s.wrapperHeight);
     useHeatmapLiveStore((state) => state.reset);
+    const CompVizLoading = useHeatmapControlStore((state) => state.controls.VizLoading);
     // TODO: Remove this after testing
     useEffect(() => {
         return () => {
             // reset();
         };
     }, []);
-    return (jsxs(VizContainer, { isActive: true, children: [jsx(VizLiveRenderer, {}), (!iframeHeight || !wrapperHeight) && jsx(VizLoading, {})] }));
+    return (jsxs(VizContainer, { isActive: true, children: [jsx(VizLiveRenderer, {}), ((!iframeHeight || !wrapperHeight) && CompVizLoading && jsx(CompVizLoading, { type: "transparent" })) || null] }));
 };
 VizLiveHeatmap.displayName = 'VizLiveHeatmap';
 
 const ContentVizByMode = () => {
     const mode = useHeatmapConfigStore((state) => state.mode);
-    const controls = useHeatmapControlStore((state) => state.controls);
-    const isRendering = useHeatmapSetting((state) => state.isRendering);
-    if (isRendering)
-        return controls.VizLoading ?? null;
+    const CompVizLoading = useHeatmapControlStore((state) => state.controls.VizLoading);
+    const isRendering = useHeatmapSettingContext((state) => state.isRendering);
+    const isLoadingDom = useHeatmapSettingContext((state) => state.isLoadingDom);
+    if (isRendering || isLoadingDom) {
+        return (CompVizLoading && jsx(CompVizLoading, { type: "default" })) || null;
+    }
     switch (mode) {
         case 'live':
             return jsx(VizLiveHeatmap, {});
@@ -8711,22 +8751,21 @@ const ContentVizByMode = () => {
 ContentVizByMode.displayName = 'ContentVizByMode';
 
 const HeatmapPreview = () => {
-    return (jsxs(BoxStack, { id: "gx-hm-container", flexDirection: "row", overflow: "hidden", flex: "1", position: "relative", children: [jsx(ContentSidebar, {}), jsxs(BoxStack, { flexDirection: "column", flex: "1", children: [jsx(ContentMetricBar, {}), jsx(ContentVizByMode, {}), jsx(ContentToolbar, {})] })] }));
+    return (jsxs(BoxStack, { id: "gx-hm-container", flexDirection: "row", overflow: "hidden", flex: "1", position: "relative", children: [jsx(ContentSidebar, {}), jsxs(BoxStack, { flexDirection: "column", flex: "1", children: [jsx(ContentMetricBar, {}), jsx(BoxStack, { flexDirection: "column", flex: "1", children: jsx(ContentVizByMode, {}) }), jsx(ContentToolbar, {})] })] }));
 };
 
 const ContentTopBar = () => {
-    const controls = useHeatmapControlStore((state) => state.controls);
-    const TopBar = controls.TopBar;
+    const CompTopBar = useHeatmapControlStore((state) => state.controls.TopBar);
     return (jsx(BoxStack, { id: "gx-hm-content-header", flexDirection: "row", alignItems: "center", overflow: "auto", zIndex: 1, backgroundColor: "white", style: {
             borderBottom: `${HEATMAP_CONFIG.borderWidth}px solid ${HEATMAP_CONFIG.borderColor}`,
-        }, children: TopBar && jsx(TopBar, {}) }));
+        }, children: CompTopBar && jsx(CompTopBar, {}) }));
 };
 
-const HeatmapLayout = ({ data, clickmap, clickAreas, scrollmap, controls, dataInfo, }) => {
+const HeatmapLayout = ({ data, clickmap, clickAreas, scrollmap, controls, dataInfo, isLoading, isLoadingCanvas, }) => {
     useRegisterControl(controls);
     useRegisterData(data, dataInfo);
     useRegisterHeatmap({ clickmap, scrollmap, clickAreas });
-    useRegisterConfig();
+    useRegisterConfig({ isLoading, isLoadingCanvas });
     // performanceLogger.configure({
     //   enabled: true,
     //   logToConsole: false,
@@ -8755,4 +8794,4 @@ const HeatmapLayout = ({ data, clickmap, clickAreas, scrollmap, controls, dataIn
     }
 };
 
-export { BACKDROP_CONFIG, DEFAULT_SIDEBAR_WIDTH, DEFAULT_VIEW_ID, DEFAULT_ZOOM_RATIO, EClickMode, EClickRankType, EClickType, EDeviceType, EHeatmapType, ELM_CALLOUT_CONFIG, EScrollType, GraphView, HEATMAP_CONFIG, HEATMAP_IFRAME, HEATMAP_STYLE, HeatmapLayout, ViewIdContext, Z_INDEX, compareViewPerformance, convertViewportToIframeCoords, createStorePerformanceTracker, createViewContextHook, 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 };
+export { BACKDROP_CONFIG, DEFAULT_SIDEBAR_WIDTH, DEFAULT_VIEW_ID, DEFAULT_ZOOM_RATIO, EClickMode, EClickRankType, EClickType, EDeviceType, EHeatmapType, ELM_CALLOUT_CONFIG, EScrollType, GraphView, HEATMAP_CONFIG, HEATMAP_IFRAME, HEATMAP_STYLE, HeatmapLayout, ViewIdContext, Z_INDEX, compareViewPerformance, convertViewportToIframeCoords, createStorePerformanceTracker, createViewContextHook, downloadPerformanceReport, getCompareViewId, getMetricsByViewId, getPerformanceReportJSON, getScrollGradientColor, performanceLogger, printPerformanceSummary, scrollToElementIfNeeded, sendPerformanceReport, serializeAreas, trackStoreAction, useAreaCreation, useAreaEditMode, useAreaFilterVisible, useAreaHydration, useAreaInteraction, useAreaPositionsUpdater, useAreaRectSync, useAreaRendererContainer, useAreaTopAutoDetect, useClickedElement, useDebounceCallback, useElementCalloutVisible, useHeatmapAreaClickContext, useHeatmapCanvas, useHeatmapClickContext, useHeatmapCompareStore, useHeatmapConfigStore, useHeatmapCopyView, useHeatmapDataContext, useHeatmapEffects, useHeatmapElementPosition, useHeatmapHoverContext, useHeatmapLiveStore, useHeatmapRenderByMode, useHeatmapScale, useHeatmapScrollContext, useHeatmapSettingContext, useHeatmapVizContext, useHeatmapVizRectContext, useHeatmapWidthByDevice, useHoveredElement, useIframeHeight, useIframeHeightProcessor, useMeasureFunction, useRegisterConfig, useRegisterControl, useRegisterData, useRegisterHeatmap, useRenderCount, useScrollmapZones, useTrackHookCall, useViewIdContext, useVizLiveRender, useWhyDidYouUpdate, useWrapperRefHeight, useZonePositions, withPerformanceTracking };