@gemx-dev/heatmap-react 3.5.92-dev.12 → 3.5.92-dev.14

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

@@ -1,6 +1,5 @@
-interface IUseHeatmapRenderResult {
+export interface IUseHeatmapRenderResult {
     iframeRef: React.RefObject<HTMLIFrameElement | null>;
 }
 export declare const useHeatmapRender: () => IUseHeatmapRenderResult;
-export {};
 //# sourceMappingURL=useHeatmapRender.d.ts.map

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":"AAiCA,UAAU,uBAAuB;IAC/B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CACtD;AAcD,eAAO,MAAM,gBAAgB,QAAO,uBAoFnC,CAAC"}
+{"version":3,"file":"useHeatmapRender.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-render/useHeatmapRender.ts"],"names":[],"mappings":"AAqBA,MAAM,WAAW,uBAAuB;IACtC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CACtD;AAYD,eAAO,MAAM,gBAAgB,QAAO,uBAsGnC,CAAC"}

package/dist/esm/index.js

@@ -4148,7 +4148,7 @@ function flush() {
     window.__gemxPerf = getReport();
 }
 // ── Global singleton export ───────────────────────────────────────────────────
-const perf = {
+const perf$1 = {
     startSession,
     endSession,
     mark: globalMark,
@@ -4158,6 +4158,39 @@ const perf = {
     enable: enableGlobal,
     disable: disableGlobal,
 };
+// ── createPerfTimer factory ───────────────────────────────────────────────────
+function createPerfTimer(config) {
+    let cfg = typeof config === 'string' ? { prefix: config, enabled: true } : { enabled: true, ...config };
+    function log(icon, label, extra) {
+        if (!cfg.enabled)
+            return;
+        const suffix = extra ? ` — ${extra}` : '';
+        console.log(`[${cfg.prefix}] ${icon} ${label}${suffix}`);
+    }
+    return {
+        configure(next) {
+            cfg = { ...cfg, ...next };
+        },
+        mark(label) {
+            const t = globalMark(`[${cfg.prefix}] ${label}`);
+            log('⏱', label);
+            return t;
+        },
+        measure(label, from) {
+            globalMeasure(`[${cfg.prefix}] ${label}`, from);
+            const ms = (performance.now() - from).toFixed(1);
+            log('✅', label, `${ms}ms`);
+        },
+        async wrap(label, fn) {
+            const t = globalMark(`[${cfg.prefix}] ${label}`);
+            log('⏱', label);
+            const result = await fn();
+            const duration = globalMeasure(`[${cfg.prefix}] ${label}`, t);
+            log('✅', label, `${duration.toFixed(1)}ms`);
+            return result;
+        },
+    };
+}
 
 /**
  * DOM observation setup — ResizeObserver + MutationObserver.
@@ -5351,52 +5384,52 @@ function configure(debug) {
 }
 async function run$1(ctx, activeGlobal, shopFix) {
     // ── Phase 1: beforeProcess ────────────────────────────────────────────────
-    const t1 = perf.mark('phase1.beforeProcess');
+    const t1 = perf$1.mark('phase1.beforeProcess');
     for (const fix of activeGlobal) {
         if (fix.beforeProcess) {
             logger.log(`[beforeProcess] ${fix.name}`);
-            const t = perf.mark(`phase1.${fix.name}.beforeProcess`);
+            const t = perf$1.mark(`phase1.${fix.name}.beforeProcess`);
             await fix.beforeProcess(ctx);
-            perf.measure(`phase1.${fix.name}.beforeProcess`, t);
+            perf$1.measure(`phase1.${fix.name}.beforeProcess`, t);
         }
     }
     if (shopFix?.beforeProcess) {
         logger.log('[beforeProcess] shop');
-        const t = perf.mark('phase1.shop.beforeProcess');
+        const t = perf$1.mark('phase1.shop.beforeProcess');
         await shopFix.beforeProcess(ctx);
-        perf.measure('phase1.shop.beforeProcess', t);
+        perf$1.measure('phase1.shop.beforeProcess', t);
     }
-    perf.measure('phase1.beforeProcess', t1);
+    perf$1.measure('phase1.beforeProcess', t1);
     // ── Phase 2: process ──────────────────────────────────────────────────────
-    const t2 = perf.mark('phase2.process');
+    const t2 = perf$1.mark('phase2.process');
     for (const fix of activeGlobal) {
         if (fix.process) {
             logger.log(`[process] ${fix.name}`);
-            const t = perf.mark(`phase2.${fix.name}.process`);
+            const t = perf$1.mark(`phase2.${fix.name}.process`);
             await fix.process(ctx);
-            perf.measure(`phase2.${fix.name}.process`, t);
+            perf$1.measure(`phase2.${fix.name}.process`, t);
         }
     }
-    perf.measure('phase2.process', t2);
+    perf$1.measure('phase2.process', t2);
     // ── Phase 3: afterProcess ─────────────────────────────────────────────────
-    const t3 = perf.mark('phase3.afterProcess');
+    const t3 = perf$1.mark('phase3.afterProcess');
     if (shopFix?.afterProcess) {
         logger.log('[afterProcess] shop');
-        const t = perf.mark('phase3.shop.afterProcess');
+        const t = perf$1.mark('phase3.shop.afterProcess');
         await shopFix.afterProcess(ctx);
-        perf.measure('phase3.shop.afterProcess', t);
+        perf$1.measure('phase3.shop.afterProcess', t);
     }
     for (const fix of activeGlobal) {
         if (fix.afterProcess) {
             logger.log(`[afterProcess] ${fix.name}`);
-            const t = perf.mark(`phase3.${fix.name}.afterProcess`);
+            const t = perf$1.mark(`phase3.${fix.name}.afterProcess`);
             await fix.afterProcess(ctx);
-            perf.measure(`phase3.${fix.name}.afterProcess`, t);
+            perf$1.measure(`phase3.${fix.name}.afterProcess`, t);
         }
     }
-    perf.measure('phase3.afterProcess', t3);
+    perf$1.measure('phase3.afterProcess', t3);
     // ── Phase 4: getDimensions ────────────────────────────────────────────────
-    const t4 = perf.mark('phase4.getDimensions');
+    const t4 = perf$1.mark('phase4.getDimensions');
     return new Promise((resolve) => {
         requestAnimationFrame(() => {
             let dimensions = null;
@@ -5421,7 +5454,7 @@ async function run$1(ctx, activeGlobal, shopFix) {
                 dimensions = { height: getFinalHeight(ctx.doc, ctx.win), width: getFinalWidth(ctx.doc) };
             }
             logger.log('Final dimensions:', dimensions);
-            perf.measure('phase4.getDimensions', t4);
+            perf$1.measure('phase4.getDimensions', t4);
             resolve(dimensions);
         });
     });
@@ -5549,14 +5582,14 @@ async function run(s) {
     const activeGlobal = getActiveFixes(ctx);
     if (activeGlobal.length > 0)
         s.logger.log(`Active global fixes: ${activeGlobal.map((f) => f.name).join(', ')}`);
-    const tRun = perf.mark('viewport.run');
+    const tRun = perf$1.mark('viewport.run');
     try {
         const result = await run$1(ctx, activeGlobal, s.shopFix);
-        perf.measure('viewport.run', tRun);
+        perf$1.measure('viewport.run', tRun);
         return result;
     }
     catch (err) {
-        perf.measure('viewport.run', tRun);
+        perf$1.measure('viewport.run', tRun);
         s.logger.error('Critical error:', err);
         return { height: s.doc.body?.scrollHeight || 1000, width: s.doc.body?.scrollWidth || 1000 };
     }
@@ -5606,22 +5639,22 @@ async function process(s) {
         return;
     }
     const sessionId = `render-${Date.now()}`;
-    perf.startSession(sessionId);
-    const t0 = perf.mark('orchestrator.process');
+    perf$1.startSession(sessionId);
+    const t0 = perf$1.mark('orchestrator.process');
     try {
         s.logger.log('Processing viewport units...');
         s.viewportReplacer.start(s.iframe, s.config);
         s.navigationBlocker.start(s.iframe, { debug: s.config.debug });
         const result = await s.viewportReplacer.run();
-        perf.measure('orchestrator.process', t0);
-        perf.endSession();
+        perf$1.measure('orchestrator.process', t0);
+        perf$1.endSession();
         s.logger.log('Process completed:', result);
         s.config.onSuccess?.(result);
         dispatchDimensionsEvent(result);
     }
     catch (error) {
-        perf.measure('orchestrator.process', t0);
-        perf.endSession();
+        perf$1.measure('orchestrator.process', t0);
+        perf$1.endSession();
         s.logger.error('Failed to process:', error);
         s.config.onError?.(error);
     }
@@ -6083,20 +6116,15 @@ class GXVisualizer extends Visualizer {
     constructor() {
         super();
         this.attentionMap = new AttentionMapRenderer(null);
-        // Save references to base implementations before overriding
         this.originalSetup = this.setup;
         this.originalClearmap = this.clearmap;
         this.clearmap = this.clearmapOverride;
         this.setup = this.setupOverride;
     }
     setupOverride = async (target, options) => {
-        // Clear existing custom renderers before re-initializing (null-safe)
         this.attentionMap?.clear();
-        // Initialize base Visualizer (sets this.state, this.heatmap, this.layout, etc.)
         await this.originalSetup(target, options);
-        // Re-create custom renderers with the newly initialized PlaybackState
-        const state = this.state;
-        this.attentionMap = new AttentionMapRenderer(state);
+        this.attentionMap = new AttentionMapRenderer(this.state);
         return this;
     };
     clearmapOverride = () => {
@@ -6115,17 +6143,7 @@ class GXVisualizer extends Visualizer {
     };
 }
 
-// ── Performance timing ────────────────────────────────────────────────────────
-function mark(label) {
-    const t = performance.now();
-    console.log(`[Render] ⏱ ${label}`);
-    return t;
-}
-function measure(label, startMs) {
-    const ms = (performance.now() - startMs).toFixed(1);
-    console.log(`[Render] ✅ ${label} — ${ms}ms`);
-}
-// ── Hook ──────────────────────────────────────────────────────────────────────
+const perf = createPerfTimer('Render');
 const useHeatmapRender = () => {
     const viewId = useViewIdContext();
     const data = useHeatmapDataContext((s) => s.data);
@@ -6141,36 +6159,41 @@ const useHeatmapRender = () => {
     const iframeRef = useRef(null);
     const helperRef = useRef(null);
     const abortRef = useRef(null);
+    const pendingDataRef = useRef(null);
+    const wrapperHeightRef = useRef(wrapperHeight);
+    wrapperHeightRef.current = wrapperHeight;
+    const contentWidthRef = useRef(contentWidth);
+    contentWidthRef.current = contentWidth;
     const renderHeatmap = useCallback(async (payloads) => {
-        if (contentWidth === 0 || wrapperHeight === 0)
+        if (contentWidthRef.current === 0 || wrapperHeightRef.current === 0) {
+            pendingDataRef.current = payloads;
             return;
+        }
+        pendingDataRef.current = null;
         if (!payloads || payloads.length === 0)
             return;
-        // Cancel any in-flight render before starting a new one
+        const iframe = iframeRef.current;
+        if (!iframe?.contentWindow)
+            return;
         abortRef.current?.abort();
         const abort = new AbortController();
         abortRef.current = abort;
-        const t0 = mark('renderHeatmap start');
+        const t0 = perf.mark('renderHeatmap start');
         const visualizer = vizRef ?? new GXVisualizer();
         if (!vizRef)
             setVizRef(visualizer);
         visualizer.configure({ excludeClassNames });
         setIsRenderedViz(false);
-        const iframe = iframeRef.current;
-        if (!iframe?.contentWindow)
-            return;
-        const tHtml = mark('visualizer.html start');
-        await visualizer.html(payloads, iframe.contentWindow, viewId);
-        measure('visualizer.html', tHtml);
-        // Bail out if data changed or component unmounted while we were awaiting
+        await perf.wrap('visualizer.html', () => visualizer.html(payloads, iframe.contentWindow, viewId));
         if (abort.signal.aborted)
             return;
+        const size = { width: contentWidthRef.current, height: wrapperHeightRef.current };
         startIframe({
             helperRef,
             iframe,
             shopId,
             deviceType,
-            size: { width: contentWidth, height: wrapperHeight },
+            size,
             t0,
             onSuccess: (height) => {
                 if (abort.signal.aborted)
@@ -6180,27 +6203,33 @@ const useHeatmapRender = () => {
                 setIsRenderedViz(true);
             },
         });
-    }, [wrapperHeight, contentWidth, deviceType]);
+    }, [deviceType]);
     useEffect(() => {
         if (!data || data.length === 0)
             return;
         const decoded = decodeArrayClarity(data);
         renderHeatmap(decoded);
-        return () => {
-            setVizRef(null);
-        };
-    }, [data, renderHeatmap, setVizRef]);
-    // Abort render + stop helper when the component unmounts
+        return () => { };
+    }, [data, renderHeatmap]);
+    // Retry pending render when dimensions become available
+    useEffect(() => {
+        if (contentWidth === 0 || wrapperHeight === 0)
+            return;
+        if (!pendingDataRef.current)
+            return;
+        const pending = pendingDataRef.current;
+        pendingDataRef.current = null;
+        renderHeatmap(pending);
+    }, [contentWidth, wrapperHeight, renderHeatmap]);
     useEffect(() => {
         return () => {
+            setVizRef(null);
             abortRef.current?.abort();
             helperRef.current?.stop();
             helperRef.current = null;
         };
-    }, []);
-    return {
-        iframeRef,
-    };
+    }, [setVizRef]);
+    return { iframeRef };
 };
 // ── Helpers ───────────────────────────────────────────────────────────────────
 function startIframe({ helperRef, iframe, shopId, deviceType = EDeviceType.Desktop, size, t0, onSuccess, }) {
@@ -6209,7 +6238,7 @@ function startIframe({ helperRef, iframe, shopId, deviceType = EDeviceType.Deskt
     if (docHeight === 0)
         return;
     helperRef.current?.stop();
-    const tHelper = mark('IframeHelper.start');
+    const tHelper = perf.mark('IframeHelper.start');
     const helper = createIframeHelper();
     helperRef.current = helper;
     helper.start({
@@ -6220,8 +6249,8 @@ function startIframe({ helperRef, iframe, shopId, deviceType = EDeviceType.Deskt
         debug: true,
         shopId,
         onSuccess: (data) => {
-            measure('IframeHelper processing', tHelper);
-            measure('Total render', t0);
+            perf.measure('IframeHelper processing', tHelper);
+            perf.measure('Total render', t0);
             iframe.style.height = `${data.height}px`;
             onSuccess(data.height);
         },