@probat/react 0.2.0 → 0.2.1

package/dist/index.mjs

@@ -37,25 +37,23 @@ var HeatmapTracker = class {
       if (!this.config.enabled || !this.config.trackCursor) return;
       if (typeof window === "undefined") return;
       const stored = getStoredExperimentInfo();
-      const proposalId = this.config.proposalId || stored.proposalId;
-      const variantLabel = this.config.variantLabel || stored.variantLabel;
+      const activeProposalId = this.config.proposalId || stored.proposalId;
+      const activeVariantLabel = stored.proposalId === activeProposalId ? stored.variantLabel || this.config.variantLabel : this.config.variantLabel || stored.variantLabel;
       const now2 = Date.now();
       const cursorThrottle = this.config.cursorThrottle ?? 100;
       if (now2 - this.lastCursorTime < cursorThrottle) {
         return;
       }
       this.lastCursorTime = now2;
-      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
+      });
       const pageUrl = window.location.href;
       const siteUrl = window.location.origin;
-      const x = event.clientX;
-      const y = event.clientY;
+      const x = event.pageX;
+      const y = event.pageY;
       const viewportWidth = window.innerWidth;
       const viewportHeight = window.innerHeight;
       const movementEvent = {
@@ -66,8 +64,8 @@ var HeatmapTracker = class {
         viewport_width: viewportWidth,
         viewport_height: viewportHeight,
         session_id: this.sessionId,
-        proposal_id: proposalId,
-        variant_label: variantLabel
+        proposal_id: activeProposalId,
+        variant_label: activeVariantLabel
       };
       this.movements.push(movementEvent);
       const cursorBatchSize = this.config.cursorBatchSize ?? 50;
@@ -81,8 +79,8 @@ var HeatmapTracker = class {
       if (!this.config.enabled) return;
       if (typeof window === "undefined") return;
       const stored = getStoredExperimentInfo();
-      const proposalId = this.config.proposalId || stored.proposalId;
-      const variantLabel = this.config.variantLabel || stored.variantLabel;
+      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;
       if (!target) return;
       if (this.shouldExcludeElement(target)) {
@@ -90,8 +88,8 @@ var HeatmapTracker = class {
       }
       const pageUrl = window.location.href;
       const siteUrl = window.location.origin;
-      const x = event.clientX;
-      const y = event.clientY;
+      const x = event.pageX;
+      const y = event.pageY;
       const viewportWidth = window.innerWidth;
       const viewportHeight = window.innerHeight;
       const elementInfo = this.extractElementInfo(target);
@@ -106,8 +104,8 @@ var HeatmapTracker = class {
         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);
       const batchSize = this.config.batchSize ?? 10;
@@ -257,6 +255,17 @@ var HeatmapTracker = class {
     if (typeof window === "undefined") {
       return;
     }
+    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);
     if (this.config.trackCursor) {
       document.addEventListener("mousemove", this.handleMouseMove, { passive: true });
@@ -265,12 +274,7 @@ var HeatmapTracker = class {
       console.log("[PROBAT Heatmap] Cursor tracking disabled");
     }
     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) {
         const siteUrl = this.clicks[0]?.site_url || window.location.origin;
@@ -324,6 +328,141 @@ var HeatmapTracker = class {
     }
     this.isInitialized = false;
   }
+  /**
+   * Enable visualization mode
+   */
+  /**
+   * Enable visualization mode
+   */
+  async enableVisualization(pageUrl) {
+    console.log("[PROBAT Heatmap] Enabling visualization mode for:", pageUrl);
+    this.stop();
+    this.config.enabled = false;
+    try {
+      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");
+      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
+   */
+  renderHeatmapOverlay(data) {
+    const points = data.points;
+    const trackedWidth = data.viewport_width || 0;
+    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";
+    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;
+      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)`);
+      }
+      canvas.style.width = width + "px";
+      canvas.style.height = height + "px";
+      canvas.width = width * dpr;
+      canvas.height = height * dpr;
+      const ctx = canvas.getContext("2d");
+      if (ctx) {
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        this.renderPoints(ctx, points, offsetX);
+      }
+    };
+    window.addEventListener("resize", resize);
+    setTimeout(resize, 300);
+    setTimeout(resize, 1e3);
+    setTimeout(resize, 3e3);
+  }
+  /**
+   * Draw points on canvas
+   */
+  renderPoints(ctx, points, offsetX) {
+    points.forEach((point) => {
+      const x = point.x + offsetX;
+      const y = point.y;
+      const intensity = point.intensity;
+      const radius = 20 + intensity * 12;
+      const color = this.getHeatmapColor(intensity);
+      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
+   */
+  getHeatmapColor(intensity) {
+    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
+   */
+  rgbToRgba(rgb, opacity) {
+    const match = rgb.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+    if (match) {
+      return `rgba(${match[1]}, ${match[2]}, ${match[3]}, ${opacity})`;
+    }
+    return rgb;
+  }
 };
 var trackerInstance = null;
 function initHeatmapTracking(config) {
@@ -361,13 +500,24 @@ function ProbatProvider({
     const resolvedApiBaseUrl = apiBaseUrl || typeof import.meta !== "undefined" && import.meta.env?.VITE_PROBAT_API || typeof globalThis !== "undefined" && globalThis.process?.env?.NEXT_PUBLIC_PROBAT_API || typeof window !== "undefined" && window.__PROBAT_API || "https://gushi.onrender.com";
     const environment = explicitEnvironment || detectEnvironment();
     const resolvedRepoFullName = explicitRepoFullName || typeof globalThis !== "undefined" && globalThis.process?.env?.NEXT_PUBLIC_PROBAT_REPO || typeof import.meta !== "undefined" && import.meta.env?.VITE_PROBAT_REPO || typeof window !== "undefined" && window.__PROBAT_REPO || void 0;
+    const params = typeof window !== "undefined" ? new URLSearchParams(window.location.search) : null;
+    const isHeatmapMode = params?.get("heatmap") === "true";
+    let urlProposalId;
+    let urlVariantLabel;
+    if (isHeatmapMode && params) {
+      urlProposalId = params.get("proposal_id") || void 0;
+      urlVariantLabel = params.get("variant_label") || void 0;
+      console.log("[PROBAT] Heatmap mode: Overriding variant from URL", { urlProposalId, urlVariantLabel });
+    }
+    const finalProposalId = urlProposalId || proposalId || (!isHeatmapMode ? storedProposalId : void 0);
+    const finalVariantLabel = urlVariantLabel || variantLabel || (!isHeatmapMode ? storedVariantLabel : void 0);
     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]);
   useEffect(() => {
@@ -396,7 +546,7 @@ function ProbatProvider({
     return () => {
       stopHeatmapTracking();
     };
-  }, [contextValue.apiBaseUrl]);
+  }, [contextValue.apiBaseUrl, contextValue.proposalId, contextValue.variantLabel]);
   return /* @__PURE__ */ React4.createElement(ProbatContext.Provider, { value: contextValue }, children);
 }
 function useProbatContext() {
@@ -978,14 +1128,25 @@ function markTrackedVisit(proposalId, label) {
 
 // src/hooks/useExperiment.ts
 function useExperiment(proposalId, options) {
-  const { apiBaseUrl } = useProbatContext();
+  const context = useProbatContext();
+  const { apiBaseUrl } = context;
   const [choice, setChoice] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
   const autoTrackImpression = options?.autoTrackImpression !== false;
   useEffect(() => {
     let alive = true;
-    const cached = readChoice(proposalId);
+    const isHeatmapMode = typeof window !== "undefined" && new URLSearchParams(window.location.search).get("heatmap") === "true";
+    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;
+    }
+    const cached = isHeatmapMode ? null : readChoice(proposalId);
     if (cached) {
       setChoice({ experiment_id: cached.experiment_id, label: cached.label });
       setIsLoading(false);
@@ -998,7 +1159,9 @@ function useExperiment(proposalId, options) {
             proposalId
           );
           if (!alive) return;
-          writeChoice(proposalId, experiment_id, label);
+          if (!isHeatmapMode) {
+            writeChoice(proposalId, experiment_id, label);
+          }
           setChoice({ experiment_id, label });
           setError(null);
         } catch (e) {
@@ -1019,7 +1182,7 @@ function useExperiment(proposalId, options) {
     return () => {
       alive = false;
     };
-  }, [proposalId, apiBaseUrl]);
+  }, [proposalId, apiBaseUrl, context.proposalId, context.variantLabel]);
   useEffect(() => {
     if (!autoTrackImpression || !choice) return;
     const exp = choice.experiment_id;
@@ -1155,14 +1318,23 @@ function withExperiment(Control, options) {
       if (!proposalId) return;
       if (useNewAPI && configLoading) return;
       let alive = true;
-      const cached = readChoice(proposalId);
+      const isHeatmapMode = typeof window !== "undefined" && new URLSearchParams(window.location.search).get("heatmap") === "true";
+      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;
+      }
+      const cached = isHeatmapMode ? null : readChoice(proposalId);
       if (cached) {
         const choiceData = {
           experiment_id: cached.experiment_id,
           label: cached.label
         };
         setChoice(choiceData);
-        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);
@@ -1175,17 +1347,19 @@ function withExperiment(Control, options) {
           try {
             const { experiment_id, label: label2 } = await fetchDecision(apiBaseUrl, proposalId);
             if (!alive) return;
-            writeChoice(proposalId, experiment_id, label2);
-            const choiceData = { experiment_id, label: label2 };
-            setChoice(choiceData);
-            if (typeof window !== "undefined") {
-              try {
-                window.localStorage.setItem("probat_active_proposal_id", proposalId);
-                window.localStorage.setItem("probat_active_variant_label", label2);
-              } catch (e) {
-                console.warn("[PROBAT] Failed to set proposal/variant in localStorage:", e);
+            if (!isHeatmapMode) {
+              writeChoice(proposalId, experiment_id, label2);
+              if (typeof window !== "undefined") {
+                try {
+                  window.localStorage.setItem("probat_active_proposal_id", proposalId);
+                  window.localStorage.setItem("probat_active_variant_label", label2);
+                } catch (e) {
+                  console.warn("[PROBAT] Failed to set proposal/variant in localStorage:", e);
+                }
               }
             }
+            const choiceData = { experiment_id, label: label2 };
+            setChoice(choiceData);
           } catch (e) {
             if (!alive) return;
             const choiceData = {
@@ -1193,7 +1367,7 @@ function withExperiment(Control, options) {
               label: "control"
             };
             setChoice(choiceData);
-            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");
@@ -1207,7 +1381,7 @@ function withExperiment(Control, options) {
       return () => {
         alive = false;
       };
-    }, [proposalId, apiBaseUrl, useNewAPI, configLoading]);
+    }, [proposalId, apiBaseUrl, useNewAPI, configLoading, context.proposalId, context.variantLabel]);
     useEffect(() => {
       if (!proposalId) return;
       const lbl = choice?.label ?? "control";