@gemx-dev/heatmap-react 3.5.40 → 3.5.41

package/dist/esm/components/VizElement/VizElements.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VizElements.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/VizElements.tsx"],"names":[],"mappings":"AAIA,UAAU,gBAAgB;IACxB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACrD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAClD,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;CAC7C;AACD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA0ClD,CAAC"}
+{"version":3,"file":"VizElements.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/VizElements.tsx"],"names":[],"mappings":"AAIA,UAAU,gBAAgB;IACxB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACrD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAClD,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;CAC7C;AACD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA+ClD,CAAC"}

package/dist/esm/helpers/viewport-fixer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"viewport-fixer.d.ts","sourceRoot":"","sources":["../../src/helpers/viewport-fixer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAyC,cAAc,EAAE,MAAM,UAAU,CAAC;AAmB5F,qBAAa,kBAAkB;IAC7B,OAAO,CAAC,MAAM,CAAkC;IAChD,OAAO,CAAC,MAAM,CAAiB;gBAEnB,MAAM,EAAE,cAAc;YAOpB,IAAI;YAgBJ,YAAY;IAoB1B,OAAO,CAAC,aAAa;IAMd,WAAW,IAAI,IAAI;CAG3B;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,cAAc,GAAG,kBAAkB,CAU5E;AAED,wBAAgB,kBAAkB,IAAI,SAAS,GAAG,IAAI,CA+BrD"}
+{"version":3,"file":"viewport-fixer.d.ts","sourceRoot":"","sources":["../../src/helpers/viewport-fixer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAyC,cAAc,EAAE,MAAM,UAAU,CAAC;AAmB5F,qBAAa,kBAAkB;IAC7B,OAAO,CAAC,MAAM,CAAkC;IAChD,OAAO,CAAC,MAAM,CAAiB;gBAEnB,MAAM,EAAE,cAAc;YAOpB,IAAI;YAgBJ,YAAY;IAiB1B,OAAO,CAAC,aAAa;IAMd,WAAW,IAAI,IAAI;CAG3B;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,cAAc,GAAG,kBAAkB,CAU5E;AAED,wBAAgB,kBAAkB,IAAI,SAAS,GAAG,IAAI,CA+BrD"}

package/dist/esm/hooks/viz-canvas/useClickmap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useClickmap.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-canvas/useClickmap.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW,UAgBvB,CAAC"}
+{"version":3,"file":"useClickmap.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-canvas/useClickmap.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW,UAkBvB,CAAC"}

package/dist/esm/hooks/viz-live/useIframeMessage.d.ts

@@ -13,15 +13,10 @@ interface UseIframeMessageOptions {
 }
 export declare function useIframeMessage(options?: UseIframeMessageOptions): {
     iframeRef: import("react").RefObject<HTMLIFrameElement>;
-    payloads: import("clarity-decode/types/data").DecodedPayload[];
     isReady: boolean;
-    clearPayloads: () => void;
-    reset: () => void;
 };
 export declare function useIframeRender(): {
     iframeRef: import("react").RefObject<HTMLIFrameElement>;
-    payloads: import("clarity-decode/types/data").DecodedPayload[];
-    isReady: boolean;
 };
 export {};
 //# sourceMappingURL=useIframeMessage.d.ts.map

package/dist/esm/hooks/viz-live/useIframeMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useIframeMessage.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-live/useIframeMessage.ts"],"names":[],"mappings":"AAKA,oBAAY,WAAW;IACrB,uBAAuB,4BAA4B;IACnD,aAAa,kBAAkB;CAChC;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,uBAAuB;IAC/B,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;CAC/C;AAED,wBAAgB,gBAAgB,CAAC,OAAO,GAAE,uBAA4B;;;;;;EA8ErE;AAED,wBAAgB,eAAe;;;;EAsC9B"}
+{"version":3,"file":"useIframeMessage.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-live/useIframeMessage.ts"],"names":[],"mappings":"AAIA,oBAAY,WAAW;IACrB,uBAAuB,4BAA4B;IACnD,aAAa,kBAAkB;CAChC;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,uBAAuB;IAC/B,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;CAC/C;AAED,wBAAgB,gBAAgB,CAAC,OAAO,GAAE,uBAA4B;;;EAmErE;AAED,wBAAgB,eAAe;;EAuC9B"}

package/dist/esm/hooks/viz-render/useHeatmapRender.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useHeatmapRender.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-render/useHeatmapRender.ts"],"names":[],"mappings":"AAMA,UAAU,uBAAuB;IAC/B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CACtD;AAED,eAAO,MAAM,gBAAgB,QAAO,uBAqCnC,CAAC"}
+{"version":3,"file":"useHeatmapRender.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-render/useHeatmapRender.ts"],"names":[],"mappings":"AAMA,UAAU,uBAAuB;IAC/B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CACtD;AAGD,eAAO,MAAM,gBAAgB,QAAO,uBAsCnC,CAAC"}

package/dist/esm/hooks/viz-scale/useHeatmapScale.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useHeatmapScale.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-scale/useHeatmapScale.ts"],"names":[],"mappings":"AAMA,UAAU,kBAAkB;IAC1B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACrD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAClD,YAAY,EAAE,MAAM,CAAC;IAErB,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,UAAU,sBAAsB;IAC9B,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,eAAO,MAAM,eAAe,GAAI,OAAO,kBAAkB,KAAG,sBAyB3D,CAAC"}
+{"version":3,"file":"useHeatmapScale.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-scale/useHeatmapScale.ts"],"names":[],"mappings":"AAMA,UAAU,kBAAkB;IAC1B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACrD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAClD,YAAY,EAAE,MAAM,CAAC;IAErB,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,UAAU,sBAAsB;IAC9B,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,eAAO,MAAM,eAAe,GAAI,OAAO,kBAAkB,KAAG,sBA4B3D,CAAC"}

package/dist/esm/index.d.ts

@@ -1,4 +1,4 @@
 export * from './components';
 export * from './types';
-export { useHeatmapConfigStore, useHeatmapDataStore, useHeatmapInteractionStore, useHeatmapLiveStore, } from './stores';
+export { useHeatmapConfigStore, useHeatmapDataStore, useHeatmapInteractionStore, useHeatmapLiveStore, useHeatmapVizStore, } from './stores';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AAExB,OAAO,EACL,qBAAqB,EACrB,mBAAmB,EACnB,0BAA0B,EAC1B,mBAAmB,GACpB,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AAExB,OAAO,EACL,qBAAqB,EACrB,mBAAmB,EACnB,0BAA0B,EAC1B,mBAAmB,EACnB,kBAAkB,GACnB,MAAM,UAAU,CAAC"}

package/dist/esm/index.js

@@ -139,7 +139,7 @@ const useHeatmapVizStore = create()((set, get) => {
         isRenderViz: false,
         setIsRenderViz: (isRenderViz) => set({ isRenderViz }),
         scale: 1,
-        vizRef: undefined,
+        vizRef: null,
         iframeHeight: 0,
         setScale: (scale) => set({ scale }),
         setVizRef: (vizRef) => set({ vizRef }),
@@ -148,6 +148,7 @@ const useHeatmapVizStore = create()((set, get) => {
 });
 
 const initialState = {
+    payloads: [],
     htmlContent: '',
     wrapperHeight: 0,
     iframeHeight: 0,
@@ -156,6 +157,8 @@ const useHeatmapLiveStore = create()((set, get) => {
     return {
         ...initialState,
         reset: () => set(initialState),
+        setPayloads: (payloads) => set({ payloads }),
+        addPayload: (payload) => set((state) => ({ payloads: [...state.payloads, payload] })),
         setHtmlContent: (htmlContent) => set({ htmlContent }),
         setWrapperHeight: (wrapperHeight) => set({ wrapperHeight }),
         setIframeHeight: (iframeHeight) => set({ iframeHeight }),
@@ -546,12 +549,9 @@ class ViewportUnitsFixer {
         try {
             win.__viewportConfig = this.config;
             const script = doc.createElement('script');
-            console.log(`🚀 🐥 ~ ViewportUnitsFixer ~ injectScript ~ script:`, script);
             const scriptCode = await getScriptInjectCode();
-            console.log(`🚀 🐥 ~ ViewportUnitsFixer ~ injectScript ~ scriptCode:`, scriptCode);
             script.textContent = scriptCode;
             doc.head.appendChild(script);
-            console.log(`🚀 🐥 ~ ViewportUnitsFixer ~ injectScript ~ doc:`, doc);
         }
         catch (error) {
             console.error('[Parent] Failed to inject script', error);
@@ -1018,7 +1018,7 @@ var MessageType;
 })(MessageType || (MessageType = {}));
 function useIframeMessage(options = {}) {
     const { trustedOrigins = [], onMessage } = options;
-    const [payloads, setPayloads] = useState([]);
+    const addPayload = useHeatmapLiveStore((state) => state.addPayload);
     const [isReady, setIsReady] = useState(false);
     const iframeRef = useRef(null);
     const isValidOrigin = useCallback((origin) => {
@@ -1044,9 +1044,9 @@ function useIframeMessage(options = {}) {
         switch (message.type) {
             case MessageType.GX_DOM_TRACKING_PAYLOAD:
                 if (message.payload) {
-                    const decodedPayloads = decodePayloads(message.payload);
-                    if (decodedPayloads) {
-                        setPayloads((prev) => [...prev, decodedPayloads]);
+                    const data = decodePayloads(message.payload);
+                    if (data) {
+                        addPayload(data);
                     }
                 }
                 break;
@@ -1061,19 +1061,9 @@ function useIframeMessage(options = {}) {
             window.removeEventListener('message', handleMessage);
         };
     }, [handleMessage]);
-    const clearPayloads = useCallback(() => {
-        setPayloads([]);
-    }, []);
-    const reset = useCallback(() => {
-        setPayloads([]);
-        setIsReady(false);
-    }, []);
     return {
         iframeRef,
-        payloads,
         isReady,
-        clearPayloads,
-        reset,
     };
 }
 function useIframeRender() {
@@ -1081,7 +1071,8 @@ function useIframeRender() {
     const contentWidth = useHeatmapConfigStore((state) => state.width);
     const setIframeHeight = useHeatmapVizStore((state) => state.setIframeHeight);
     const htmlContent = useHeatmapLiveStore((state) => state.htmlContent);
-    const { iframeRef, payloads, isReady } = useIframeMessage();
+    const setIsRenderViz = useHeatmapVizStore((state) => state.setIsRenderViz);
+    const { iframeRef, isReady } = useIframeMessage();
     useEffect(() => {
         if (!htmlContent || !iframeRef.current)
             return;
@@ -1101,30 +1092,31 @@ function useIframeRender() {
         const iframe = iframeRef.current;
         if (!iframe || !htmlContent)
             return;
+        setIsRenderViz(false);
         reset$1(iframe, { width: contentWidth, height: wrapperHeight }, (height) => {
-            setIframeHeight(height);
+            height && setIframeHeight(height);
+            setIsRenderViz(true);
         });
     }, [isReady, contentWidth, wrapperHeight]);
     return {
         iframeRef,
-        payloads,
-        isReady,
     };
 }
-function reset$1(iframe, payloads, onSuccess) {
+function reset$1(iframe, rect, onSuccess) {
     const viewportFixer = initViewportFixer({
-        targetWidth: payloads.width,
-        targetHeight: payloads.height,
+        targetWidth: rect.width,
+        targetHeight: rect.height,
         iframe: iframe,
         onSuccess: (data) => {
-            onSuccess(data.height);
             iframe.height = `${data.height}px`;
+            onSuccess(data.height);
         },
     });
     viewportFixer.recalculate();
     return iframe;
 }
 
+let visualizer = new Visualizer();
 const useHeatmapRender = () => {
     const data = useHeatmapDataStore((state) => state.data);
     const setVizRef = useHeatmapVizStore((state) => state.setVizRef);
@@ -1135,16 +1127,17 @@ const useHeatmapRender = () => {
         if (!payloads || payloads.length === 0)
             return;
         setIsRenderViz(false);
-        const visualizer = new Visualizer();
         const iframe = iframeRef.current;
         if (!iframe?.contentWindow)
             return;
         await visualizer.html(payloads, iframe.contentWindow);
+        const element = visualizer.get('3w0uppvjw');
+        console.log(`🚀 🐥 ~ useHeatmapRender ~ element:`, element);
         reset(iframe, payloads, (height) => {
             height && setIframeHeight(height);
             setIsRenderViz(true);
+            setVizRef(visualizer);
         });
-        setVizRef(visualizer);
     }, []);
     useEffect(() => {
         if (!data || data.length === 0)
@@ -1486,11 +1479,13 @@ const useHeatmapScale = (props) => {
     const { scale } = useScaleCalculation({ containerWidth, contentWidth });
     // 5. Setup scroll sync
     const { handleScroll } = useScrollSync({ iframeRef });
+    const scaledHeight = iframeHeight * scale;
+    const scaledWidth = contentWidth * scale;
     return {
         containerWidth,
         containerHeight,
-        scaledWidth: contentWidth * scale,
-        scaledHeight: iframeHeight * scale,
+        scaledWidth,
+        scaledHeight,
         handleScroll,
     };
 };
@@ -1657,6 +1652,8 @@ const useClickmap = () => {
         if (!vizRef || !clickmap || clickmap.length === 0)
             return;
         vizRef.clearmap();
+        const element = vizRef.get('3w0uppvjw');
+        console.log(`🚀 🐥 ~ useClickmap ~ element:`, element);
         vizRef?.clickmap(clickmap);
         setIsInitialized(true);
     }, [vizRef, clickmap]);
@@ -1842,8 +1839,12 @@ const HeatmapElements = (props) => {
 const VizElements = ({ iframeRef, visualRef, wrapperRef }) => {
     const heatmapInfo = useHeatmapDataStore((state) => state.dataInfo);
     const contentWidth = useHeatmapConfigStore((state) => state.width);
+    const vizRef = useHeatmapVizStore((state) => state.vizRef);
     const visualizer = {
         get: (hash) => {
+            if (vizRef) {
+                return vizRef.get(hash);
+            }
             const doc = iframeRef.current?.contentDocument;
             if (!doc)
                 return null;
@@ -2052,4 +2053,4 @@ const HeatmapLayout = ({ data, clickmap, controls, dataInfo, }) => {
     }
 };
 
-export { GraphView, HeatmapLayout, IHeatmapType, useHeatmapConfigStore, useHeatmapDataStore, useHeatmapInteractionStore, useHeatmapLiveStore };
+export { GraphView, HeatmapLayout, IHeatmapType, useHeatmapConfigStore, useHeatmapDataStore, useHeatmapInteractionStore, useHeatmapLiveStore, useHeatmapVizStore };

package/dist/esm/index.mjs

@@ -139,7 +139,7 @@ const useHeatmapVizStore = create()((set, get) => {
         isRenderViz: false,
         setIsRenderViz: (isRenderViz) => set({ isRenderViz }),
         scale: 1,
-        vizRef: undefined,
+        vizRef: null,
         iframeHeight: 0,
         setScale: (scale) => set({ scale }),
         setVizRef: (vizRef) => set({ vizRef }),
@@ -148,6 +148,7 @@ const useHeatmapVizStore = create()((set, get) => {
 });
 
 const initialState = {
+    payloads: [],
     htmlContent: '',
     wrapperHeight: 0,
     iframeHeight: 0,
@@ -156,6 +157,8 @@ const useHeatmapLiveStore = create()((set, get) => {
     return {
         ...initialState,
         reset: () => set(initialState),
+        setPayloads: (payloads) => set({ payloads }),
+        addPayload: (payload) => set((state) => ({ payloads: [...state.payloads, payload] })),
         setHtmlContent: (htmlContent) => set({ htmlContent }),
         setWrapperHeight: (wrapperHeight) => set({ wrapperHeight }),
         setIframeHeight: (iframeHeight) => set({ iframeHeight }),
@@ -546,12 +549,9 @@ class ViewportUnitsFixer {
         try {
             win.__viewportConfig = this.config;
             const script = doc.createElement('script');
-            console.log(`🚀 🐥 ~ ViewportUnitsFixer ~ injectScript ~ script:`, script);
             const scriptCode = await getScriptInjectCode();
-            console.log(`🚀 🐥 ~ ViewportUnitsFixer ~ injectScript ~ scriptCode:`, scriptCode);
             script.textContent = scriptCode;
             doc.head.appendChild(script);
-            console.log(`🚀 🐥 ~ ViewportUnitsFixer ~ injectScript ~ doc:`, doc);
         }
         catch (error) {
             console.error('[Parent] Failed to inject script', error);
@@ -1018,7 +1018,7 @@ var MessageType;
 })(MessageType || (MessageType = {}));
 function useIframeMessage(options = {}) {
     const { trustedOrigins = [], onMessage } = options;
-    const [payloads, setPayloads] = useState([]);
+    const addPayload = useHeatmapLiveStore((state) => state.addPayload);
     const [isReady, setIsReady] = useState(false);
     const iframeRef = useRef(null);
     const isValidOrigin = useCallback((origin) => {
@@ -1044,9 +1044,9 @@ function useIframeMessage(options = {}) {
         switch (message.type) {
             case MessageType.GX_DOM_TRACKING_PAYLOAD:
                 if (message.payload) {
-                    const decodedPayloads = decodePayloads(message.payload);
-                    if (decodedPayloads) {
-                        setPayloads((prev) => [...prev, decodedPayloads]);
+                    const data = decodePayloads(message.payload);
+                    if (data) {
+                        addPayload(data);
                     }
                 }
                 break;
@@ -1061,19 +1061,9 @@ function useIframeMessage(options = {}) {
             window.removeEventListener('message', handleMessage);
         };
     }, [handleMessage]);
-    const clearPayloads = useCallback(() => {
-        setPayloads([]);
-    }, []);
-    const reset = useCallback(() => {
-        setPayloads([]);
-        setIsReady(false);
-    }, []);
     return {
         iframeRef,
-        payloads,
         isReady,
-        clearPayloads,
-        reset,
     };
 }
 function useIframeRender() {
@@ -1081,7 +1071,8 @@ function useIframeRender() {
     const contentWidth = useHeatmapConfigStore((state) => state.width);
     const setIframeHeight = useHeatmapVizStore((state) => state.setIframeHeight);
     const htmlContent = useHeatmapLiveStore((state) => state.htmlContent);
-    const { iframeRef, payloads, isReady } = useIframeMessage();
+    const setIsRenderViz = useHeatmapVizStore((state) => state.setIsRenderViz);
+    const { iframeRef, isReady } = useIframeMessage();
     useEffect(() => {
         if (!htmlContent || !iframeRef.current)
             return;
@@ -1101,30 +1092,31 @@ function useIframeRender() {
         const iframe = iframeRef.current;
         if (!iframe || !htmlContent)
             return;
+        setIsRenderViz(false);
         reset$1(iframe, { width: contentWidth, height: wrapperHeight }, (height) => {
-            setIframeHeight(height);
+            height && setIframeHeight(height);
+            setIsRenderViz(true);
         });
     }, [isReady, contentWidth, wrapperHeight]);
     return {
         iframeRef,
-        payloads,
-        isReady,
     };
 }
-function reset$1(iframe, payloads, onSuccess) {
+function reset$1(iframe, rect, onSuccess) {
     const viewportFixer = initViewportFixer({
-        targetWidth: payloads.width,
-        targetHeight: payloads.height,
+        targetWidth: rect.width,
+        targetHeight: rect.height,
         iframe: iframe,
         onSuccess: (data) => {
-            onSuccess(data.height);
             iframe.height = `${data.height}px`;
+            onSuccess(data.height);
         },
     });
     viewportFixer.recalculate();
     return iframe;
 }
 
+let visualizer = new Visualizer();
 const useHeatmapRender = () => {
     const data = useHeatmapDataStore((state) => state.data);
     const setVizRef = useHeatmapVizStore((state) => state.setVizRef);
@@ -1135,16 +1127,17 @@ const useHeatmapRender = () => {
         if (!payloads || payloads.length === 0)
             return;
         setIsRenderViz(false);
-        const visualizer = new Visualizer();
         const iframe = iframeRef.current;
         if (!iframe?.contentWindow)
             return;
         await visualizer.html(payloads, iframe.contentWindow);
+        const element = visualizer.get('3w0uppvjw');
+        console.log(`🚀 🐥 ~ useHeatmapRender ~ element:`, element);
         reset(iframe, payloads, (height) => {
             height && setIframeHeight(height);
             setIsRenderViz(true);
+            setVizRef(visualizer);
         });
-        setVizRef(visualizer);
     }, []);
     useEffect(() => {
         if (!data || data.length === 0)
@@ -1486,11 +1479,13 @@ const useHeatmapScale = (props) => {
     const { scale } = useScaleCalculation({ containerWidth, contentWidth });
     // 5. Setup scroll sync
     const { handleScroll } = useScrollSync({ iframeRef });
+    const scaledHeight = iframeHeight * scale;
+    const scaledWidth = contentWidth * scale;
     return {
         containerWidth,
         containerHeight,
-        scaledWidth: contentWidth * scale,
-        scaledHeight: iframeHeight * scale,
+        scaledWidth,
+        scaledHeight,
         handleScroll,
     };
 };
@@ -1657,6 +1652,8 @@ const useClickmap = () => {
         if (!vizRef || !clickmap || clickmap.length === 0)
             return;
         vizRef.clearmap();
+        const element = vizRef.get('3w0uppvjw');
+        console.log(`🚀 🐥 ~ useClickmap ~ element:`, element);
         vizRef?.clickmap(clickmap);
         setIsInitialized(true);
     }, [vizRef, clickmap]);
@@ -1842,8 +1839,12 @@ const HeatmapElements = (props) => {
 const VizElements = ({ iframeRef, visualRef, wrapperRef }) => {
     const heatmapInfo = useHeatmapDataStore((state) => state.dataInfo);
     const contentWidth = useHeatmapConfigStore((state) => state.width);
+    const vizRef = useHeatmapVizStore((state) => state.vizRef);
     const visualizer = {
         get: (hash) => {
+            if (vizRef) {
+                return vizRef.get(hash);
+            }
             const doc = iframeRef.current?.contentDocument;
             if (!doc)
                 return null;
@@ -2052,4 +2053,4 @@ const HeatmapLayout = ({ data, clickmap, controls, dataInfo, }) => {
     }
 };
 
-export { GraphView, HeatmapLayout, IHeatmapType, useHeatmapConfigStore, useHeatmapDataStore, useHeatmapInteractionStore, useHeatmapLiveStore };
+export { GraphView, HeatmapLayout, IHeatmapType, useHeatmapConfigStore, useHeatmapDataStore, useHeatmapInteractionStore, useHeatmapLiveStore, useHeatmapVizStore };

package/dist/esm/stores/mode-live.d.ts

@@ -1,9 +1,13 @@
+import { DecodedPayload } from '../types';
 interface IHeatmapLiveStoreState {
+    payloads: DecodedPayload[];
     htmlContent: string;
     iframeHeight: number;
     wrapperHeight: number;
 }
 interface IHeatmapLiveStoreActions {
+    setPayloads: (payloads: DecodedPayload[]) => void;
+    addPayload: (payload: DecodedPayload) => void;
     reset: () => void;
     setHtmlContent: (htmlContent: string) => void;
     setWrapperHeight: (wrapperHeight: number) => void;

package/dist/esm/stores/mode-live.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mode-live.d.ts","sourceRoot":"","sources":["../../src/stores/mode-live.ts"],"names":[],"mappings":"AAEA,UAAU,sBAAsB;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;CACvB;AACD,UAAU,wBAAwB;IAChC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,cAAc,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,gBAAgB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,eAAe,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,UAAU,iBAAkB,SAAQ,sBAAsB,EAAE,wBAAwB;CAAG;AAQvF,eAAO,MAAM,mBAAmB,gFAQ9B,CAAC"}
+{"version":3,"file":"mode-live.d.ts","sourceRoot":"","sources":["../../src/stores/mode-live.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;CACvB;AACD,UAAU,wBAAwB;IAChC,WAAW,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IAClD,UAAU,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9C,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,cAAc,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,gBAAgB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,eAAe,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,UAAU,iBAAkB,SAAQ,sBAAsB,EAAE,wBAAwB;CAAG;AASvF,eAAO,MAAM,mBAAmB,gFAU9B,CAAC"}

package/dist/esm/stores/viz.d.ts

@@ -1,8 +1,9 @@
+import { Visualizer } from '@gemx-dev/clarity-visualize';
 export interface IHeatmapVizStore {
     isRenderViz: boolean;
     setIsRenderViz: (isRenderViz: boolean) => void;
-    vizRef: any;
-    setVizRef: (vizRef: any) => void;
+    vizRef: Visualizer | null;
+    setVizRef: (vizRef: Visualizer | null) => void;
     scale: number;
     setScale: (scale: number) => void;
     iframeHeight: number;

package/dist/esm/stores/viz.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"viz.d.ts","sourceRoot":"","sources":["../../src/stores/viz.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,MAAM,EAAE,GAAG,CAAC;IACZ,SAAS,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,eAAO,MAAM,kBAAkB,+EAW7B,CAAC"}
+{"version":3,"file":"viz.d.ts","sourceRoot":"","sources":["../../src/stores/viz.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAGzD,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,MAAM,EAAE,UAAU,GAAG,IAAI,CAAC;IAC1B,SAAS,EAAE,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,eAAO,MAAM,kBAAkB,+EAW7B,CAAC"}

package/dist/umd/components/VizElement/VizElements.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VizElements.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/VizElements.tsx"],"names":[],"mappings":"AAIA,UAAU,gBAAgB;IACxB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACrD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAClD,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;CAC7C;AACD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA0ClD,CAAC"}
+{"version":3,"file":"VizElements.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/VizElements.tsx"],"names":[],"mappings":"AAIA,UAAU,gBAAgB;IACxB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACrD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAClD,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;CAC7C;AACD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA+ClD,CAAC"}

package/dist/umd/helpers/viewport-fixer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"viewport-fixer.d.ts","sourceRoot":"","sources":["../../src/helpers/viewport-fixer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAyC,cAAc,EAAE,MAAM,UAAU,CAAC;AAmB5F,qBAAa,kBAAkB;IAC7B,OAAO,CAAC,MAAM,CAAkC;IAChD,OAAO,CAAC,MAAM,CAAiB;gBAEnB,MAAM,EAAE,cAAc;YAOpB,IAAI;YAgBJ,YAAY;IAoB1B,OAAO,CAAC,aAAa;IAMd,WAAW,IAAI,IAAI;CAG3B;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,cAAc,GAAG,kBAAkB,CAU5E;AAED,wBAAgB,kBAAkB,IAAI,SAAS,GAAG,IAAI,CA+BrD"}
+{"version":3,"file":"viewport-fixer.d.ts","sourceRoot":"","sources":["../../src/helpers/viewport-fixer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAyC,cAAc,EAAE,MAAM,UAAU,CAAC;AAmB5F,qBAAa,kBAAkB;IAC7B,OAAO,CAAC,MAAM,CAAkC;IAChD,OAAO,CAAC,MAAM,CAAiB;gBAEnB,MAAM,EAAE,cAAc;YAOpB,IAAI;YAgBJ,YAAY;IAiB1B,OAAO,CAAC,aAAa;IAMd,WAAW,IAAI,IAAI;CAG3B;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,cAAc,GAAG,kBAAkB,CAU5E;AAED,wBAAgB,kBAAkB,IAAI,SAAS,GAAG,IAAI,CA+BrD"}

package/dist/umd/hooks/viz-canvas/useClickmap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useClickmap.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-canvas/useClickmap.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW,UAgBvB,CAAC"}
+{"version":3,"file":"useClickmap.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-canvas/useClickmap.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW,UAkBvB,CAAC"}

package/dist/umd/hooks/viz-live/useIframeMessage.d.ts

@@ -13,15 +13,10 @@ interface UseIframeMessageOptions {
 }
 export declare function useIframeMessage(options?: UseIframeMessageOptions): {
     iframeRef: import("react").RefObject<HTMLIFrameElement>;
-    payloads: import("clarity-decode/types/data").DecodedPayload[];
     isReady: boolean;
-    clearPayloads: () => void;
-    reset: () => void;
 };
 export declare function useIframeRender(): {
     iframeRef: import("react").RefObject<HTMLIFrameElement>;
-    payloads: import("clarity-decode/types/data").DecodedPayload[];
-    isReady: boolean;
 };
 export {};
 //# sourceMappingURL=useIframeMessage.d.ts.map

package/dist/umd/hooks/viz-live/useIframeMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useIframeMessage.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-live/useIframeMessage.ts"],"names":[],"mappings":"AAKA,oBAAY,WAAW;IACrB,uBAAuB,4BAA4B;IACnD,aAAa,kBAAkB;CAChC;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,uBAAuB;IAC/B,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;CAC/C;AAED,wBAAgB,gBAAgB,CAAC,OAAO,GAAE,uBAA4B;;;;;;EA8ErE;AAED,wBAAgB,eAAe;;;;EAsC9B"}
+{"version":3,"file":"useIframeMessage.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-live/useIframeMessage.ts"],"names":[],"mappings":"AAIA,oBAAY,WAAW;IACrB,uBAAuB,4BAA4B;IACnD,aAAa,kBAAkB;CAChC;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,uBAAuB;IAC/B,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;CAC/C;AAED,wBAAgB,gBAAgB,CAAC,OAAO,GAAE,uBAA4B;;;EAmErE;AAED,wBAAgB,eAAe;;EAuC9B"}

package/dist/umd/hooks/viz-render/useHeatmapRender.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useHeatmapRender.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-render/useHeatmapRender.ts"],"names":[],"mappings":"AAMA,UAAU,uBAAuB;IAC/B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CACtD;AAED,eAAO,MAAM,gBAAgB,QAAO,uBAqCnC,CAAC"}
+{"version":3,"file":"useHeatmapRender.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-render/useHeatmapRender.ts"],"names":[],"mappings":"AAMA,UAAU,uBAAuB;IAC/B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CACtD;AAGD,eAAO,MAAM,gBAAgB,QAAO,uBAsCnC,CAAC"}

package/dist/umd/hooks/viz-scale/useHeatmapScale.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useHeatmapScale.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-scale/useHeatmapScale.ts"],"names":[],"mappings":"AAMA,UAAU,kBAAkB;IAC1B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACrD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAClD,YAAY,EAAE,MAAM,CAAC;IAErB,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,UAAU,sBAAsB;IAC9B,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,eAAO,MAAM,eAAe,GAAI,OAAO,kBAAkB,KAAG,sBAyB3D,CAAC"}
+{"version":3,"file":"useHeatmapScale.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-scale/useHeatmapScale.ts"],"names":[],"mappings":"AAMA,UAAU,kBAAkB;IAC1B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACrD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAClD,YAAY,EAAE,MAAM,CAAC;IAErB,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,UAAU,sBAAsB;IAC9B,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,eAAO,MAAM,eAAe,GAAI,OAAO,kBAAkB,KAAG,sBA4B3D,CAAC"}

package/dist/umd/index.d.ts

@@ -1,4 +1,4 @@
 export * from './components';
 export * from './types';
-export { useHeatmapConfigStore, useHeatmapDataStore, useHeatmapInteractionStore, useHeatmapLiveStore, } from './stores';
+export { useHeatmapConfigStore, useHeatmapDataStore, useHeatmapInteractionStore, useHeatmapLiveStore, useHeatmapVizStore, } from './stores';
 //# sourceMappingURL=index.d.ts.map

package/dist/umd/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AAExB,OAAO,EACL,qBAAqB,EACrB,mBAAmB,EACnB,0BAA0B,EAC1B,mBAAmB,GACpB,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AAExB,OAAO,EACL,qBAAqB,EACrB,mBAAmB,EACnB,0BAA0B,EAC1B,mBAAmB,EACnB,kBAAkB,GACnB,MAAM,UAAU,CAAC"}