@gemx-dev/heatmap-react 3.5.92-dev.20 → 3.5.92-dev.21

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;;CAmBvB,CAAC"}
+{"version":3,"file":"useClickmap.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-canvas/useClickmap.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW;;CAiBvB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"useScrollmap.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-canvas/useScrollmap.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,YAAY;;CAiCxB,CAAC"}
+{"version":3,"file":"useScrollmap.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-canvas/useScrollmap.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,YAAY;;CAmDxB,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":"AAOA,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;CACnD;AAED,UAAU,mBAAmB;IAC3B,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,mBA4B3D,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;CACnD;AAED,UAAU,mBAAmB;IAC3B,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,mBA4B3D,CAAC"}

package/dist/esm/index.js

@@ -3528,10 +3528,8 @@ const useClickmap = () => {
         if (!vizRef || !clickmap || clickmap.length === 0 || !isDomLoaded)
             return;
         try {
-            requestIdleCallback(() => {
-                vizRef?.clearmap?.();
-                vizRef?.clickmap?.(clickmap);
-            }, { timeout: 300 });
+            vizRef?.clearmap?.();
+            requestIdleCallback(() => vizRef?.clickmap?.(clickmap), { timeout: 300 });
         }
         catch (error) {
             console.error(`🚀 🐥 ~ useClickmap ~ error:`, error);
@@ -3545,31 +3543,47 @@ const useScrollmap = () => {
     const scrollType = useHeatmapSettingContext((s) => s.scrollType);
     const scrollmap = useHeatmapDataContext((s) => s.scrollmap);
     const isDomLoaded = useHeatmapVizContext((s) => s.isDomLoaded);
-    useMemo(() => {
-        switch (scrollType) {
-            case EScrollType.Depth:
-                return scrollmap;
-            case EScrollType.Attention:
-                return scrollmap;
-            case EScrollType.Revenue:
-                return scrollmap;
-            default:
-                return scrollmap;
+    const renderScrollmap = useCallback(() => {
+        if (!vizRef || !scrollmap || scrollmap.length === 0 || !isDomLoaded)
+            return;
+        try {
+            requestIdleCallback(() => vizRef?.scrollmap?.(scrollmap), { timeout: 300 });
         }
-    }, [scrollmap, scrollType]);
-    const start = useCallback(() => {
+        catch (error) {
+            console.error(`🚀 🐥 ~ useScrollmap ~ renderScrollmap:`, error);
+        }
+    }, [vizRef, scrollmap, isDomLoaded]);
+    const renderScrollBucket = useCallback(() => {
         if (!vizRef || !scrollmap || scrollmap.length === 0 || !isDomLoaded)
             return;
+        const bucketData = scrollmap.map((point) => ({
+            position: point.scrollReachY,
+            value: point.cumulativeSum,
+            percent: point.percUsers,
+        }));
         try {
-            requestIdleCallback(() => {
-                vizRef?.clearmap?.();
-                vizRef?.scrollmap?.(scrollmap);
-            }, { timeout: 300 });
+            requestIdleCallback(() => vizRef?.scrollBucket?.(bucketData), { timeout: 300 });
         }
         catch (error) {
-            logger$3.error(`🚀 🐥 ~ useScrollmap ~ error:`, error);
+            console.error(`🚀 🐥 ~ useScrollmap ~ renderScrollBucket:`, error);
         }
     }, [vizRef, scrollmap, isDomLoaded]);
+    const start = useCallback(() => {
+        vizRef?.clearmap?.();
+        if (!vizRef || !scrollmap || scrollmap.length === 0 || !isDomLoaded)
+            return;
+        switch (scrollType) {
+            case EScrollType.Attention:
+            case EScrollType.Revenue: {
+                renderScrollBucket();
+                break;
+            }
+            case EScrollType.Depth:
+            default:
+                renderScrollmap();
+                break;
+        }
+    }, [vizRef, scrollmap, isDomLoaded, scrollType, renderScrollmap, renderScrollBucket]);
     return { start };
 };
 
@@ -4299,14 +4313,25 @@ function handleHeightChange(s) {
     s.throttleTimeout = setTimeout(() => {
         s.throttleTimeout = null;
         const currentHeight = getActualHeight(s);
-        if (currentHeight === s.lastHeight)
+        if (currentHeight === s.lastHeight) {
+            // Height returned to known state — cancel any stale pending debounce
+            // to prevent it from firing with an outdated height and corrupting lastHeight.
+            if (s.debounceTimeout) {
+                clearTimeout(s.debounceTimeout);
+                s.debounceTimeout = null;
+            }
             return;
+        }
         s.logger.log(`Height changed: ${s.lastHeight}px -> ${currentHeight}px`);
         if (s.debounceTimeout)
             clearTimeout(s.debounceTimeout);
         s.debounceTimeout = setTimeout(() => {
             s.debounceTimeout = null;
-            processHeightChange(s, currentHeight);
+            // Re-read height at dispatch time to avoid using a stale closure value.
+            const finalHeight = getActualHeight(s);
+            if (finalHeight !== s.lastHeight) {
+                processHeightChange(s, finalHeight);
+            }
         }, s.debounceMs);
     }, s.throttleMs);
 }
@@ -4316,16 +4341,16 @@ function observe(s) {
         return;
     }
     s.observerCleanup?.();
-    s.lastHeight = s.iframe.contentDocument.documentElement.scrollHeight;
+    s.lastHeight = getActualHeight(s);
     s.logger.log('Initial height:', s.lastHeight);
     s.observerCleanup = setup(s.iframe.contentDocument, () => handleHeightChange(s));
 }
-function start$5(s, cfg) {
+function start$5(s, iframe, cfg) {
     if (s.running) {
         s.logger.warn('Observer is already running. Call stop() first.');
         return;
     }
-    s.iframe = cfg.iframe;
+    s.iframe = iframe;
     s.config = cfg;
     s.throttleMs = cfg.throttleMs ?? 25;
     s.debounceMs = cfg.debounceMs ?? 500;
@@ -4382,7 +4407,7 @@ function createHeightObserver() {
         running: false,
     };
     return {
-        start: (cfg) => start$5(s, cfg),
+        start: (iframe, cfg) => start$5(s, iframe, cfg),
         stop: () => stop$5(s),
         observe: () => observe(s),
         clear: () => clear(s),
@@ -5426,6 +5451,20 @@ async function process(s) {
         perf$3.endSession();
         s.logger.groupEnd();
         s.logger.log('Process completed:', result);
+        s.heightObserver.stop();
+        s.heightObserver.start(s.iframe, {
+            iframe: s.iframe,
+            debug: s.config.debug,
+            throttleMs: 25,
+            debounceMs: 500,
+            onHeightChange: (result) => {
+                s.config?.onSuccess?.(result);
+                dispatchDimensionsEvent(result);
+            },
+            onError: (error) => {
+                s.config?.onError?.(error);
+            },
+        });
         s.config.onSuccess?.(result);
         dispatchDimensionsEvent(result);
     }
@@ -5783,7 +5822,7 @@ const htmlCache = {
 
 const CANVAS_ID = 'clarity-heatmap-canvas';
 const ATTENTION_HUES = [240, 210, 180, 150, 120, 90, 60, 30, 0];
-const CANVAS_MAX_HEIGHT = 65535;
+const CANVAS_MAX_HEIGHT$1 = 65535;
 const Z_INDEX = 2147483647;
 const DEFAULT_IFRAME_ID = 'clarity-snapshot-heatmap-iframe';
 const SECONDARY_IFRAME_ID = 'clarity-snapshot-heatmap-iframe-secondary';
@@ -5848,7 +5887,7 @@ class AttentionMapRenderer {
         const body = doc.body;
         const de = doc.documentElement;
         const contentHeight = Math.max(body.scrollHeight, body.offsetHeight, de.clientHeight, de.scrollHeight, de.offsetHeight);
-        canvas.height = Math.min(contentHeight, CANVAS_MAX_HEIGHT);
+        canvas.height = Math.min(contentHeight, CANVAS_MAX_HEIGHT$1);
         canvas.style.top = '0px';
         if (canvas.width <= 0 || canvas.height <= 0 || !this.attentionMapData)
             return;
@@ -5870,7 +5909,7 @@ class AttentionMapRenderer {
         const body = doc.body;
         const de = doc.documentElement;
         const contentHeight = Math.max(body.scrollHeight, body.offsetHeight, de.clientHeight, de.scrollHeight, de.offsetHeight);
-        canvas.height = Math.min(contentHeight, CANVAS_MAX_HEIGHT);
+        canvas.height = Math.min(contentHeight, CANVAS_MAX_HEIGHT$1);
         canvas.style.top = '0px';
         let iframeEl = document.getElementById(this.heatmapIframeId);
         if (!iframeEl) {
@@ -5886,9 +5925,9 @@ class AttentionMapRenderer {
             for (const point of this.attentionMapData) {
                 const timePercent = Math.floor((100 * point.cumulativeTime) / maxCumulativeTime);
                 const colorIndex = timePercent <= 5 ? 0 : Math.min(Math.ceil(timePercent / 10), 8);
-                if (point.scrollPos / 100 <= 1) {
+                if (point.scrollReachY / 100 <= 1) {
                     point.colorIndex = colorIndex;
-                    colorStops[point.scrollPos] = colorIndex;
+                    colorStops[point.scrollReachY] = colorIndex;
                 }
             }
             // Smooth the top portion based on the fold/viewport ratio
@@ -5919,7 +5958,7 @@ class AttentionMapRenderer {
     buildAggregatedData = (doc, contentHeight, iframeEl) => {
         const elementCache = new Map();
         this.attentionMapData = Array.from({ length: 100 }, (_, i) => ({
-            scrollPos: i,
+            scrollReachY: i,
             cumulativeTime: 0,
             colorIndex: 0,
         }));
@@ -5989,6 +6028,128 @@ class AttentionMapRenderer {
     };
 }
 
+const CANVAS_MAX_HEIGHT = 65535;
+const REDRAW_INTERVAL = 30;
+class ScrollBucketRenderer {
+    heatmap;
+    lastData = null;
+    dimensionsListener = null;
+    redrawTimeout = null;
+    constructor(heatmap) {
+        this.heatmap = heatmap;
+        this.attachDimensionsListener();
+    }
+    redraw = () => {
+        if (!this.lastData)
+            return;
+        if (this.redrawTimeout)
+            clearTimeout(this.redrawTimeout);
+        this.redrawTimeout = setTimeout(() => this.draw(this.lastData), REDRAW_INTERVAL);
+    };
+    attachDimensionsListener = () => {
+        this.dimensionsListener = () => this.redraw();
+        window.addEventListener('iframe-dimensions-applied', this.dimensionsListener);
+    };
+    detachDimensionsListener = () => {
+        if (this.dimensionsListener) {
+            window.removeEventListener('iframe-dimensions-applied', this.dimensionsListener);
+            this.dimensionsListener = null;
+        }
+        if (this.redrawTimeout) {
+            clearTimeout(this.redrawTimeout);
+            this.redrawTimeout = null;
+        }
+    };
+    reset = () => {
+        // no-op: canvas state is managed by the shared heatmap instance
+    };
+    clear = () => {
+        this.lastData = null;
+        this.detachDimensionsListener();
+    };
+    /**
+     * Render discrete color bands for scrollRevenue / scrollAttention data.
+     * Uses the shared heatmap canvas (same as HeatmapHelper.scroll()) to avoid
+     * duplicate portal canvas management.
+     * Stores data so the canvas can be redrawn when iframe height changes.
+     */
+    renderBucket = async (data) => {
+        if (!this.heatmap)
+            return;
+        this.attachDimensionsListener();
+        this.lastData = data;
+        await this.heatmap.waitForDialogs();
+        this.draw(data);
+    };
+    draw = (data) => {
+        if (!this.heatmap)
+            return;
+        const canvas = this.heatmap.overlay();
+        if (!canvas)
+            return;
+        const context = canvas.getContext('2d');
+        const doc = this.heatmap.state.window.document;
+        const body = doc.body;
+        const de = doc.documentElement;
+        const height = Math.max(body.scrollHeight, body.offsetHeight, de.clientHeight, de.scrollHeight, de.offsetHeight);
+        // Same canvas setup as HeatmapHelper.scroll(): full content height, top=0
+        canvas.height = Math.min(height, CANVAS_MAX_HEIGHT);
+        canvas.style.top = '0px';
+        if (canvas.width <= 0 || canvas.height <= 0)
+            return;
+        const buckets = this.mapToBuckets(data);
+        if (buckets.length === 0)
+            return;
+        const maxPercent = Math.max(...buckets.map((b) => b.percent));
+        if (maxPercent <= 0)
+            return;
+        const gradient = context.createLinearGradient(0, 0, 0, canvas.height);
+        for (const bucket of buckets) {
+            const stopMid = (bucket.startY + bucket.endY) / 2 / 100;
+            // Same hue direction as HeatmapHelper.scroll() (MaxHue = 240):
+            // high percent → hue 0 (red/hot), low percent → hue 240 (blue/cold)
+            const hue = (1 - bucket.percent / maxPercent) * 240;
+            const color = `hsla(${Math.round(hue)}, 100%, 50%, 0.6)`;
+            gradient.addColorStop(stopMid, color);
+        }
+        context.fillStyle = gradient;
+        context.fillRect(0, 0, canvas.width, canvas.height);
+    };
+    /**
+     * Convert flat position markers → structured buckets with startY/endY.
+     *
+     * Input positions: [0, 5, 10, 15, ..., 95]
+     *   position=0  → { startY: 0,  endY: 5  }  (special start marker)
+     *   position=10 → { startY: 5,  endY: 10 }
+     *   position=15 → { startY: 10, endY: 15 }
+     */
+    mapToBuckets = (data) => {
+        const sorted = [...data].sort((a, b) => a.position - b.position);
+        const buckets = [];
+        for (let i = 0; i < sorted.length; i++) {
+            const current = sorted[i];
+            let startY;
+            let endY;
+            if (current.position === 0) {
+                // position=0 is the start marker → range 0 to next position
+                const next = sorted[i + 1];
+                if (!next)
+                    continue;
+                startY = 0;
+                endY = next.position;
+            }
+            else {
+                // Each non-zero position is the END of its bucket; start = previous position
+                const prev = sorted[i - 1];
+                startY = prev ? prev.position : 0;
+                endY = current.position;
+            }
+            buckets.push({ startY, endY, value: current.value, percent: current.percent });
+        }
+        return buckets;
+    };
+}
+
 var Event;
 (function (Event) {
     /* Data */
@@ -6301,15 +6462,23 @@ const renderLoop = async (ctx, options) => {
 
 class GXVisualizer extends Visualizer {
     attentionMap;
+    scrollBucketMap;
     originalClearmap;
     originalSetup;
+    originalScrollmap;
+    originalClickmap;
     constructor() {
         super();
         this.attentionMap = new AttentionMapRenderer(null);
+        this.scrollBucketMap = new ScrollBucketRenderer(null);
         this.originalSetup = this.setup;
         this.originalClearmap = this.clearmap;
+        this.originalScrollmap = this.scrollmap;
+        this.originalClickmap = this.clickmap;
         this.clearmap = this.clearmapOverride;
         this.setup = this.setupOverride;
+        this.scrollmap = this.scrollmapOverride;
+        this.clickmap = this.clickmapOverride;
     }
     htmlRender = async (props) => {
         const { decoded, target, portalCanvasId, useproxy, logerror } = props;
@@ -6354,12 +6523,27 @@ class GXVisualizer extends Visualizer {
         this.clearmapOverride();
         this.attentionMap.attention(attentionData, avgFold, this, isSecondary);
     };
+    /**
+     * Render discrete color bands for scrollRevenue / scrollAttention data.
+     * @param data - Array of bucket inputs with position markers (0, 5, 10, ..., 95) and percent values
+     */
+    scrollBucket = async (data) => {
+        this.clearmapOverride();
+        await this.scrollBucketMap.renderBucket(data);
+    };
+    scrollmapOverride = (data, averageFold, addMarkers) => {
+        this.clearmapOverride();
+        this.originalScrollmap(data, averageFold, addMarkers);
+    };
+    clickmapOverride = (activity) => {
+        this.clearmapOverride();
+        this.originalClickmap(activity);
+    };
     buildHtmlByCached = async (cached, options) => {
         const { target, useproxy, portalCanvasId } = options;
         if (!cached || !target)
             throw new Error('Failed to render HTML cached');
         const doc = target.document;
-        target.window;
         try {
             await this.setup(target, { version: cached.version, useproxy, portalCanvasId });
             doc.open();
@@ -6408,14 +6592,19 @@ class GXVisualizer extends Visualizer {
         await renderLoop(ctx, options);
     };
     setupOverride = async (target, options) => {
-        this.attentionMap?.clear();
+        // Mirror original Visualizer.setup(): only reset (remove listeners/state), not clear canvas.
+        // The canvas lives in the old window's DOM which will be replaced by originalSetup's reset().
+        this.attentionMap?.reset();
+        this.scrollBucketMap?.reset();
         await this.originalSetup(target, options);
         this.attentionMap = new AttentionMapRenderer(this.state);
+        this.scrollBucketMap = new ScrollBucketRenderer(this.heatmap);
         return this;
     };
     clearmapOverride = () => {
         this.originalClearmap();
         this.attentionMap?.clear();
+        this.scrollBucketMap?.clear();
     };
 }
 
@@ -6739,136 +6928,6 @@ const useContainerDimensions = (props) => {
     return { containerWidth, containerHeight };
 };
 
-const useObserveIframeHeight = (props) => {
-    const iframeHeight = useHeatmapVizRectContext((s) => s.iframeHeight);
-    const setIframeHeight = useHeatmapVizRectContext((s) => s.setIframeHeight);
-    const isDomLoaded = useHeatmapVizContext((s) => s.isDomLoaded);
-    const wrapperHeight = useHeatmapVizRectContext((s) => s.wrapperHeight);
-    const { iframeRef } = props;
-    const resizeObserverRef = useRef(null);
-    const mutationObserverRef = useRef(null);
-    const debounceTimerRef = useRef(null);
-    const lastHeightRef = useRef(0);
-    const animationFrameRef = useRef(null);
-    const updateIframeHeight = useCallback(() => {
-        const iframe = iframeRef.current;
-        if (!iframe)
-            return;
-        try {
-            const iframeDocument = iframe.contentDocument;
-            const iframeBody = iframeDocument?.body;
-            const iframeDocumentElement = iframeDocument?.documentElement;
-            if (!iframeBody || !iframeDocumentElement)
-                return;
-            // iframe.style.height = 'auto'; // TODO: check if this is needed
-            requestAnimationFrame(() => {
-                iframe.style.height = `${wrapperHeight}px`;
-                const bodyHeight = Math.max(iframeBody.scrollHeight, iframeBody.offsetHeight, iframeBody.clientHeight);
-                const documentHeight = Math.max(iframeDocumentElement.scrollHeight, iframeDocumentElement.offsetHeight, iframeDocumentElement.clientHeight);
-                const actualHeight = Math.max(bodyHeight, documentHeight);
-                if (actualHeight > 0) {
-                    lastHeightRef.current = actualHeight;
-                    // iframe.height = `${actualHeight}px`;
-                    iframe.style.height = `${actualHeight}px`;
-                    setIframeHeight(actualHeight);
-                }
-            });
-        }
-        catch (error) {
-            console.warn('Cannot measure iframe content:', error);
-        }
-    }, [iframeRef, wrapperHeight]);
-    useCallback(() => {
-        // Cancel pending updates
-        if (debounceTimerRef.current) {
-            clearTimeout(debounceTimerRef.current);
-        }
-        if (animationFrameRef.current) {
-            cancelAnimationFrame(animationFrameRef.current);
-        }
-        debounceTimerRef.current = setTimeout(() => {
-            animationFrameRef.current = requestAnimationFrame(() => {
-                updateIframeHeight();
-            });
-        }, 50);
-    }, [updateIframeHeight]);
-    // Immediate update không debounce (cho ResizeObserver)
-    const immediateUpdate = useCallback(() => {
-        if (animationFrameRef.current) {
-            cancelAnimationFrame(animationFrameRef.current);
-        }
-        animationFrameRef.current = requestAnimationFrame(() => {
-            updateIframeHeight();
-        });
-    }, [updateIframeHeight]);
-    useEffect(() => {
-        const iframe = iframeRef.current;
-        if (!iframe || !iframeHeight || !isDomLoaded)
-            return;
-        const setupObservers = () => {
-            try {
-                const iframeDocument = iframe.contentDocument;
-                const iframeBody = iframeDocument?.body;
-                if (!iframeBody)
-                    return;
-                // Cleanup existing observers
-                if (resizeObserverRef.current) {
-                    resizeObserverRef.current.disconnect();
-                }
-                if (mutationObserverRef.current) {
-                    mutationObserverRef.current.disconnect();
-                }
-                if (typeof window.ResizeObserver !== 'undefined') {
-                    resizeObserverRef.current = new ResizeObserver(immediateUpdate);
-                    resizeObserverRef.current.observe(iframeBody);
-                    const iframeDocumentElement = iframeDocument?.documentElement;
-                    if (iframeDocumentElement) {
-                        resizeObserverRef.current.observe(iframeDocumentElement);
-                    }
-                }
-                if (typeof window.MutationObserver !== 'undefined') {
-                    mutationObserverRef.current = new MutationObserver(immediateUpdate);
-                    mutationObserverRef.current.observe(iframeBody, {
-                        childList: true,
-                        subtree: true,
-                        attributes: true,
-                        attributeFilter: ['style', 'class'],
-                        characterData: false,
-                    });
-                }
-                updateIframeHeight();
-            }
-            catch (error) {
-                console.warn('Cannot access iframe content:', error);
-            }
-        };
-        if (iframe.contentDocument?.readyState === 'complete') {
-            setupObservers();
-        }
-        else {
-            iframe.addEventListener('load', setupObservers, { once: true });
-        }
-        return () => {
-            // Cleanup observers
-            if (resizeObserverRef.current) {
-                resizeObserverRef.current.disconnect();
-            }
-            if (mutationObserverRef.current) {
-                mutationObserverRef.current.disconnect();
-            }
-            // Cleanup timers
-            if (debounceTimerRef.current) {
-                clearTimeout(debounceTimerRef.current);
-            }
-            if (animationFrameRef.current) {
-                cancelAnimationFrame(animationFrameRef.current);
-            }
-            iframe.removeEventListener('load', setupObservers);
-        };
-    }, [iframeRef, iframeHeight, isDomLoaded]);
-    return {};
-};
-
 const useScaleCalculation = (props) => {
     const widthScale = useHeatmapVizContext((s) => s.widthScale);
     const zoomRatio = useHeatmapVizContext((s) => s.zoomRatio);
@@ -6948,7 +7007,7 @@ const useHeatmapScale = (props) => {
     // 2. Get content dimensions from config
     const viewport = useHeatmapViewportByDevice();
     // 3. Observe iframe height (now reacts to width changes)
-    useObserveIframeHeight({ iframeRef });
+    // useObserveIframeHeight({ iframeRef });
     // 4. Calculate scale
     const { widthScale } = useScaleCalculation({ containerWidth, containerHeight, iframeHeight });
     // 5. Setup scroll sync