@probat/react 0.2.0 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@probat/react",
-    "version": "0.2.0",
+    "version": "0.2.1",
     "description": "React library for Probat A/B testing and experimentation",
     "main": "./dist/index.js",
     "module": "./dist/index.mjs",
@@ -23,7 +23,8 @@
         "build": "tsup && npm run postbuild",
         "postbuild": "echo '\"use client\";' | cat - dist/index.mjs > temp && mv temp dist/index.mjs && echo '\"use client\";' | cat - dist/index.js > temp && mv temp dist/index.js",
         "dev": "tsup --watch",
-        "typecheck": "tsc --noEmit"
+        "typecheck": "tsc --noEmit",
+        "prepublishOnly": "npm run build"
     },
     "keywords": [
         "probat",

package/src/context/ProbatContext.tsx

@@ -102,13 +102,33 @@ export function ProbatProvider({
             (typeof window !== "undefined" && (window as any).__PROBAT_REPO) ||
             undefined;
 
+        // Check for URL overrides (used for Live Heatmap visualization)
+        const params = (typeof window !== "undefined") ? new URLSearchParams(window.location.search) : null;
+        const isHeatmapMode = params?.get('heatmap') === 'true';
+
+        let urlProposalId: string | undefined;
+        let urlVariantLabel: string | undefined;
+
+        if (isHeatmapMode && params) {
+            urlProposalId = params.get('proposal_id') || undefined;
+            urlVariantLabel = params.get('variant_label') || undefined;
+            console.log('[PROBAT] Heatmap mode: Overriding variant from URL', { urlProposalId, urlVariantLabel });
+        }
+
+        // Priority Logic:
+        // 1. URL params (if in heatmap mode)
+        // 2. Explicit props passed to Provider
+        // 3. Stored values in localStorage (ONLY if NOT in heatmap mode)
+        const finalProposalId = urlProposalId || proposalId || (!isHeatmapMode ? storedProposalId : undefined);
+        const finalVariantLabel = urlVariantLabel || variantLabel || (!isHeatmapMode ? storedVariantLabel : undefined);
+
         return {
             apiBaseUrl: resolvedApiBaseUrl,
             environment,
             clientKey,
             repoFullName: resolvedRepoFullName,
-            proposalId: proposalId || storedProposalId,
-            variantLabel: variantLabel || storedVariantLabel,
+            proposalId: finalProposalId,
+            variantLabel: finalVariantLabel,
         };
     }, [apiBaseUrl, clientKey, explicitEnvironment, explicitRepoFullName, proposalId, variantLabel, storedProposalId, storedVariantLabel]);
 
@@ -140,7 +160,7 @@ export function ProbatProvider({
         return () => {
             stopHeatmapTracking();
         };
-    }, [contextValue.apiBaseUrl]);
+    }, [contextValue.apiBaseUrl, contextValue.proposalId, contextValue.variantLabel]);
 
     return (
         <ProbatContext.Provider value={contextValue}>

package/src/hoc/itrt-frontend.code-workspace

@@ -1,38 +1,10 @@
 {
-	"folders": [
-		{
-			"path": "../../../../../itrt-frontend"
-		},
-		{
-			"path": "../../../.."
-		},
-		{
-			"path": "../../../../../../onelab_projects/gushi_test_repo"
-		},
-		{
-			"path": "../../../../../../react-jsx-test-repo"
-		},
-		{
-			"path": "../../../../../../testforprobat"
-		},
-		{
-			"path": "../../../../../portfolio"
-		},
-		{
-			"path": "../../../../../portfolio-nextjs"
-		},
-		{
-			"path": "../../../../../react-native-test"
-		},
-		{
-			"path": "../../../../../../tbg_test"
-		},
-		{
-			"path": "../../../../../../probattestforecho"
-		},
-		{
-			"path": "../../../../../zingexample"
-		}
-	],
-	"settings": {}
+    "folders": [
+        {
+            "path": "../../../.."
+        },
+        {
+            "path": "../../../../../itrt-frontend"
+        }
+    ]
 }

package/src/hoc/withExperiment.tsx

@@ -160,7 +160,24 @@ export function withExperiment<P = any>(
             if (useNewAPI && configLoading) return;
 
             let alive = true;
-            const cached = readChoice(proposalId);
+
+            // Detect if we are in heatmap mode
+            const isHeatmapMode = typeof window !== 'undefined' &&
+                new URLSearchParams(window.location.search).get('heatmap') === 'true';
+
+            // HIGH PRIORITY: Check if context is already forcing a specific variant for this proposal
+            // (This happens during Live Heatmap visualization)
+            if (context.proposalId === proposalId && context.variantLabel) {
+                console.log(`[PROBAT HOC] Forced variant from context: ${context.variantLabel}`);
+                setChoice({
+                    experiment_id: `forced_${proposalId}`,
+                    label: context.variantLabel
+                });
+                return;
+            }
+
+            // If we are in heatmap mode, bypass the cache to avoid showing stale variants
+            const cached = isHeatmapMode ? null : readChoice(proposalId);
 
             if (cached) {
                 const choiceData = {
@@ -169,7 +186,7 @@ export function withExperiment<P = any>(
                 };
                 setChoice(choiceData);
                 // Set localStorage for heatmap tracking
-                if (typeof window !== 'undefined') {
+                if (typeof window !== 'undefined' && !isHeatmapMode) {
                     try {
                         window.localStorage.setItem('probat_active_proposal_id', proposalId);
                         window.localStorage.setItem('probat_active_variant_label', cached.label);
@@ -182,18 +199,22 @@ export function withExperiment<P = any>(
                     try {
                         const { experiment_id, label } = await fetchDecision(apiBaseUrl, proposalId);
                         if (!alive) return;
-                        writeChoice(proposalId, experiment_id, label);
-                        const choiceData = { experiment_id, label };
-                        setChoice(choiceData);
-                        // Set localStorage for heatmap tracking (fetchDecision already sets it, but ensure it's set here too)
-                        if (typeof window !== 'undefined') {
-                            try {
-                                window.localStorage.setItem('probat_active_proposal_id', proposalId);
-                                window.localStorage.setItem('probat_active_variant_label', label);
-                            } catch (e) {
-                                console.warn('[PROBAT] Failed to set proposal/variant in localStorage:', e);
+
+                        // Only write to choice cache and localStorage if NOT in heatmap mode
+                        if (!isHeatmapMode) {
+                            writeChoice(proposalId, experiment_id, label);
+                            if (typeof window !== 'undefined') {
+                                try {
+                                    window.localStorage.setItem('probat_active_proposal_id', proposalId);
+                                    window.localStorage.setItem('probat_active_variant_label', label);
+                                } catch (e) {
+                                    console.warn('[PROBAT] Failed to set proposal/variant in localStorage:', e);
+                                }
                             }
                         }
+
+                        const choiceData = { experiment_id, label };
+                        setChoice(choiceData);
                     } catch (e) {
                         if (!alive) return;
                         const choiceData = {
@@ -201,8 +222,8 @@ export function withExperiment<P = any>(
                             label: "control",
                         };
                         setChoice(choiceData);
-                        // Set localStorage for control variant
-                        if (typeof window !== 'undefined') {
+
+                        if (typeof window !== 'undefined' && !isHeatmapMode) {
                             try {
                                 window.localStorage.setItem('probat_active_proposal_id', proposalId);
                                 window.localStorage.setItem('probat_active_variant_label', 'control');
@@ -215,7 +236,7 @@ export function withExperiment<P = any>(
             }
 
             return () => { alive = false; };
-        }, [proposalId, apiBaseUrl, useNewAPI, configLoading]);
+        }, [proposalId, apiBaseUrl, useNewAPI, configLoading, context.proposalId, context.variantLabel]);
 
         // Track visit
         useEffect(() => {

package/src/hooks/useExperiment.ts

@@ -59,7 +59,8 @@ export function useExperiment(
     proposalId: string,
     options?: { autoTrackImpression?: boolean }
 ): UseExperimentReturn {
-    const { apiBaseUrl } = useProbatContext();
+    const context = useProbatContext();
+    const { apiBaseUrl } = context;
     const [choice, setChoice] = useState<{
         experiment_id: string;
         label: string;
@@ -73,7 +74,25 @@ export function useExperiment(
     useEffect(() => {
         let alive = true;
 
-        const cached = readChoice(proposalId);
+        // Detect if we are in heatmap mode
+        const isHeatmapMode = typeof window !== 'undefined' &&
+            new URLSearchParams(window.location.search).get('heatmap') === 'true';
+
+        // HIGH PRIORITY: Check if context is already forcing a specific variant for this proposal
+        // (This happens during Live Heatmap visualization)
+        if (context.proposalId === proposalId && context.variantLabel) {
+            console.log(`[PROBAT] Forced variant from context: ${context.variantLabel}`);
+            setChoice({
+                experiment_id: `forced_${proposalId}`,
+                label: context.variantLabel
+            });
+            setIsLoading(false);
+            return;
+        }
+
+        // If we are in heatmap mode, bypass the cache to avoid showing stale variants
+        const cached = isHeatmapMode ? null : readChoice(proposalId);
+
         if (cached) {
             setChoice({ experiment_id: cached.experiment_id, label: cached.label });
             setIsLoading(false);
@@ -86,7 +105,12 @@ export function useExperiment(
                         proposalId
                     );
                     if (!alive) return;
-                    writeChoice(proposalId, experiment_id, label);
+
+                    // Only write to choice cache if NOT in heatmap mode
+                    if (!isHeatmapMode) {
+                        writeChoice(proposalId, experiment_id, label);
+                    }
+
                     setChoice({ experiment_id, label });
                     setError(null);
                 } catch (e) {
@@ -108,7 +132,7 @@ export function useExperiment(
         return () => {
             alive = false;
         };
-    }, [proposalId, apiBaseUrl]);
+    }, [proposalId, apiBaseUrl, context.proposalId, context.variantLabel]);
 
     // Track impression when variant is determined
     useEffect(() => {

package/src/utils/heatmapTracker.ts

@@ -133,8 +133,12 @@ class HeatmapTracker {
 
 		// Refresh proposal/variant from localStorage at runtime
 		const stored = getStoredExperimentInfo();
-		const proposalId = this.config.proposalId || stored.proposalId;
-		const variantLabel = this.config.variantLabel || stored.variantLabel;
+
+		// If stored info matches current proposal, or we don't have a proposal yet, use stored variant
+		const activeProposalId = this.config.proposalId || stored.proposalId;
+		const activeVariantLabel = (stored.proposalId === activeProposalId)
+			? (stored.variantLabel || this.config.variantLabel)
+			: (this.config.variantLabel || stored.variantLabel);
 
 		// Throttle cursor tracking
 		const now = Date.now();
@@ -145,21 +149,19 @@ class HeatmapTracker {
 		this.lastCursorTime = now;
 
 		// Debug: Log first few movements to verify it's working
-		if (this.movements.length < 3) {
-			console.log('[PROBAT Heatmap] Cursor movement captured:', {
-				x: event.clientX,
-				y: event.clientY,
-				movementsInBatch: this.movements.length + 1
-			});
-		}
+		console.log('[PROBAT Heatmap] Cursor movement captured:', {
+			x: event.pageX,
+			y: event.pageY,
+			movementsInBatch: this.movements.length + 1
+		});
 
 		// Get page information
 		const pageUrl = window.location.href;
 		const siteUrl = window.location.origin;
 
-		// Get cursor coordinates relative to viewport
-		const x = event.clientX;
-		const y = event.clientY;
+		// Get cursor coordinates relative to document (including scroll)
+		const x = event.pageX;
+		const y = event.pageY;
 
 		// Get viewport dimensions
 		const viewportWidth = window.innerWidth;
@@ -174,8 +176,8 @@ class HeatmapTracker {
 			viewport_width: viewportWidth,
 			viewport_height: viewportHeight,
 			session_id: this.sessionId,
-			proposal_id: proposalId,
-			variant_label: variantLabel,
+			proposal_id: activeProposalId,
+			variant_label: activeVariantLabel,
 		};
 
 		// Add to batch
@@ -261,8 +263,12 @@ class HeatmapTracker {
 
 		// Refresh proposal/variant from localStorage at runtime
 		const stored = getStoredExperimentInfo();
-		const proposalId = this.config.proposalId || stored.proposalId;
-		const variantLabel = this.config.variantLabel || stored.variantLabel;
+
+		// Priority: use localStorage variant if it matches the current proposal
+		const activeProposalId = this.config.proposalId || stored.proposalId;
+		const activeVariantLabel = (stored.proposalId === activeProposalId)
+			? (stored.variantLabel || this.config.variantLabel)
+			: (this.config.variantLabel || stored.variantLabel);
 
 		const target = event.target as HTMLElement | null;
 		if (!target) return;
@@ -274,8 +280,9 @@ class HeatmapTracker {
 		const pageUrl = window.location.href;
 		const siteUrl = window.location.origin;
 
-		const x = event.clientX;
-		const y = event.clientY;
+		// Get click coordinates relative to document (including scroll)
+		const x = event.pageX;
+		const y = event.pageY;
 
 		const viewportWidth = window.innerWidth;
 		const viewportHeight = window.innerHeight;
@@ -293,8 +300,8 @@ class HeatmapTracker {
 			element_class: elementInfo.class,
 			element_id: elementInfo.id,
 			session_id: this.sessionId,
-			proposal_id: proposalId,
-			variant_label: variantLabel,
+			proposal_id: activeProposalId,
+			variant_label: activeVariantLabel,
 		};
 
 		this.clicks.push(clickEvent);
@@ -363,6 +370,19 @@ class HeatmapTracker {
 			return;
 		}
 
+		// Check for heatmap visualization mode FIRST
+		const params = new URLSearchParams(window.location.search);
+		if (params.get('heatmap') === 'true') {
+			console.log('[PROBAT Heatmap] Heatmap visualization mode detected');
+			const pageUrl = params.get('page_url');
+			if (pageUrl) {
+				this.config.enabled = false;
+				this.isInitialized = true;
+				this.enableVisualization(pageUrl);
+				return;
+			}
+		}
+
 		document.addEventListener('click', this.handleClick, true);
 
 		// Attach cursor movement listener if enabled
@@ -374,12 +394,7 @@ class HeatmapTracker {
 		}
 
 		this.isInitialized = true;
-		console.log('[PROBAT Heatmap] Tracker initialized', {
-			enabled: this.config.enabled,
-			trackCursor: this.config.trackCursor,
-			cursorThrottle: this.config.cursorThrottle,
-			cursorBatchSize: this.config.cursorBatchSize
-		});
+		console.log('[PROBAT Heatmap] Tracker initialized');
 
 		window.addEventListener('beforeunload', () => {
 			if (this.clicks.length > 0) {
@@ -447,6 +462,178 @@ class HeatmapTracker {
 
 		this.isInitialized = false;
 	}
+
+	/**
+	 * Enable visualization mode
+	 */
+	/**
+	 * Enable visualization mode
+	 */
+	private async enableVisualization(pageUrl: string): Promise<void> {
+		console.log('[PROBAT Heatmap] Enabling visualization mode for:', pageUrl);
+
+		// Stop tracking just in case
+		this.stop();
+		this.config.enabled = false;
+
+		try {
+			// Fetch heatmap data
+			const url = new URL(`${this.config.apiBaseUrl}/api/heatmap/aggregate`);
+			url.searchParams.append('site_url', window.location.origin);
+			url.searchParams.append('page_url', pageUrl);
+			url.searchParams.append('days', '30'); // Default to 30 days
+
+			// Add variant filtering if present in URL
+			const params = new URLSearchParams(window.location.search);
+			const proposalId = params.get('proposal_id');
+			const variantLabel = params.get('variant_label');
+
+			if (proposalId) url.searchParams.append('proposal_id', proposalId);
+			if (variantLabel) url.searchParams.append('variant_label', variantLabel);
+
+			const response = await fetch(url.toString());
+			if (!response.ok) throw new Error('Failed to fetch heatmap data');
+
+			const data = await response.json();
+			if (data && data.points) {
+				console.log(`[PROBAT Heatmap] Found ${data.points.length} points. Rendering...`);
+				this.renderHeatmapOverlay(data);
+			}
+		} catch (error) {
+			console.error('[PROBAT Heatmap] Visualization error:', error);
+		}
+	}
+
+	/**
+	 * Render heatmap overlay on valid points
+	 */
+	private renderHeatmapOverlay(data: any): void {
+		const points = data.points;
+		const trackedWidth = data.viewport_width || 0;
+
+		// Remove existing heatmap if any
+		const existing = document.getElementById('probat-heatmap-overlay');
+		if (existing) existing.remove();
+
+		const canvas = document.createElement('canvas');
+		canvas.id = 'probat-heatmap-overlay';
+		canvas.style.position = 'absolute';
+		canvas.style.top = '0';
+		canvas.style.left = '0';
+		canvas.style.zIndex = '999999';
+		canvas.style.pointerEvents = 'none';
+		canvas.style.display = 'block';
+		canvas.style.margin = '0';
+		canvas.style.padding = '0';
+
+		// Append to html to ensure it's relative to the absolute document top-left (0,0)
+		document.documentElement.appendChild(canvas);
+
+		const resize = () => {
+			const dpr = window.devicePixelRatio || 1;
+			const width = document.documentElement.scrollWidth;
+			const height = document.documentElement.scrollHeight;
+			const currentWidth = window.innerWidth;
+
+			// Horizontal centering adjustment
+			// Formula: current_x = tracked_x + (current_viewport_width - tracked_viewport_width) / 2
+			let offsetX = 0;
+			if (trackedWidth > 0 && trackedWidth !== currentWidth) {
+				offsetX = (currentWidth - trackedWidth) / 2;
+				console.log(`[PROBAT Heatmap] Horizontal adjustment: offset=${offsetX}px (Tracked: ${trackedWidth}px, Current: ${currentWidth}px)`);
+			}
+
+			// Set display size
+			canvas.style.width = width + 'px';
+			canvas.style.height = height + 'px';
+
+			// Set internal resolution scaled by pixel ratio
+			canvas.width = width * dpr;
+			canvas.height = height * dpr;
+
+			const ctx = canvas.getContext('2d');
+			if (ctx) {
+				ctx.setTransform(dpr, 0, 0, dpr, 0, 0); // Clear and set scale in one go
+				this.renderPoints(ctx, points, offsetX);
+			}
+		};
+
+		window.addEventListener('resize', resize);
+		// Call multiple times to catch delayed layout shifts
+		setTimeout(resize, 300);
+		setTimeout(resize, 1000);
+		setTimeout(resize, 3000);
+	}
+
+	/**
+	 * Draw points on canvas
+	 */
+	private renderPoints(ctx: CanvasRenderingContext2D, points: any[], offsetX: number): void {
+		points.forEach(point => {
+			// Apply horizontal offset for centered layouts
+			const x = point.x + offsetX;
+			const y = point.y;
+			const intensity = point.intensity;
+
+			// Scale radius based on intensity
+			const radius = 20 + (intensity * 12);
+			const color = this.getHeatmapColor(intensity);
+
+			// Use radial gradient for a "heat" look
+			const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius);
+			gradient.addColorStop(0, this.rgbToRgba(color, 0.8));
+			gradient.addColorStop(1, this.rgbToRgba(color, 0));
+
+			ctx.beginPath();
+			ctx.arc(x, y, radius, 0, 2 * Math.PI);
+			ctx.fillStyle = gradient;
+			ctx.fill();
+		});
+	}
+
+	/**
+	 * Get heatmap color based on intensity
+	 */
+	private getHeatmapColor(intensity: number): string {
+		const clamped = Math.max(0, Math.min(1, intensity));
+
+		if (clamped < 0.25) {
+			const t = clamped / 0.25;
+			const r = Math.floor(0 + t * 0);
+			const g = Math.floor(0 + t * 255);
+			const b = Math.floor(255 + t * (255 - 255));
+			return `rgb(${r}, ${g}, ${b})`;
+		} else if (clamped < 0.5) {
+			const t = (clamped - 0.25) / 0.25;
+			const r = Math.floor(0 + t * 0);
+			const g = 255;
+			const b = Math.floor(255 + t * (0 - 255));
+			return `rgb(${r}, ${g}, ${b})`;
+		} else if (clamped < 0.75) {
+			const t = (clamped - 0.5) / 0.25;
+			const r = Math.floor(0 + t * 255);
+			const g = 255;
+			const b = 0;
+			return `rgb(${r}, ${g}, ${b})`;
+		} else {
+			const t = (clamped - 0.75) / 0.25;
+			const r = 255;
+			const g = Math.floor(255 + t * (0 - 255));
+			const b = 0;
+			return `rgb(${r}, ${g}, ${b})`;
+		}
+	}
+
+	/**
+	 * Convert RGB to RGBA
+	 */
+	private rgbToRgba(rgb: string, opacity: number): string {
+		const match = rgb.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+		if (match) {
+			return `rgba(${match[1]}, ${match[2]}, ${match[3]}, ${opacity})`;
+		}
+		return rgb;
+	}
 }
 
 let trackerInstance: HeatmapTracker | null = null;