@gemx-dev/heatmap-react 3.5.45 → 3.5.46

package/src/hooks/viz-elements/useHeatmapMouseHandler.ts

@@ -0,0 +1,255 @@
+import { useCallback } from 'react';
+import { IHeatmapInfo } from '../../types';
+
+// ===================== TYPES =====================
+interface BoundingBox {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+
+interface ElementData {
+  totalclicks: number;
+  selector: string;
+}
+
+interface HoveredElementInfo extends BoundingBox {
+  hash: string;
+  clicks: number;
+  rank: number;
+  selector: string;
+}
+
+interface UseHeatmapMouseHandlerProps {
+  heatmapWrapperRef: React.RefObject<HTMLElement>;
+  iframeRef: React.RefObject<HTMLIFrameElement>;
+  parentRef: React.RefObject<HTMLDivElement>;
+  heatmapInfo: IHeatmapInfo;
+  scaleRatio: number; // zoom/scale ratio
+  onElementHover: (info: HoveredElementInfo) => void;
+}
+
+// ===================== CONSTANTS =====================
+const HEATMAP_ELEMENT_ATTRIBUTE = 'data-clarity-hashalpha'; // Hoặc attribute bạn đang dùng
+
+// ===================== UTILITY FUNCTIONS =====================
+
+/**
+ * Lấy bounding box tuyệt đối của element (relative to document)
+ */
+export function getBoundingBox(element: HTMLElement): BoundingBox | null {
+  if (typeof element.getBoundingClientRect !== 'function') {
+    return null;
+  }
+
+  const rect = element.getBoundingClientRect();
+
+  // Lấy scroll offset (hỗ trợ cả cách cũ và mới)
+  const scrollLeft =
+    'pageXOffset' in window ? window.pageXOffset : document.documentElement.scrollLeft;
+
+  const scrollTop =
+    'pageYOffset' in window ? window.pageYOffset : document.documentElement.scrollTop;
+
+  // Kiểm tra element có kích thước hợp lệ
+  if (!rect || (rect.height === 0 && rect.width === 0)) {
+    return null;
+  }
+
+  // Trả về vị trí tuyệt đối
+  return {
+    left: Math.floor(rect.left + scrollLeft),
+    top: Math.floor(rect.top + scrollTop),
+    width: Math.floor(rect.width),
+    height: Math.floor(rect.height),
+  };
+}
+
+/**
+ * Lấy tất cả elements tại tọa độ (x, y), hỗ trợ Shadow DOM
+ */
+export function getElementsAtPoint(
+  documentOrShadowRoot: Document | ShadowRoot,
+  x: number,
+  y: number,
+  filterFunction?: (element: Element) => boolean,
+  visitedShadowRoots: Set<ShadowRoot> = new Set(),
+): Element[] {
+  // Lấy tất cả elements tại vị trí
+  const elementsAtPoint = documentOrShadowRoot.elementsFromPoint(x, y);
+
+  if (!filterFunction) {
+    return elementsAtPoint;
+  }
+
+  // Tìm element đầu tiên match với filter
+  const matchedElement = elementsAtPoint.find(filterFunction);
+
+  // Nếu element có Shadow DOM và chưa visit -> đệ quy vào
+  if (matchedElement?.shadowRoot && !visitedShadowRoots.has(matchedElement.shadowRoot)) {
+    visitedShadowRoots.add(matchedElement.shadowRoot);
+
+    return getElementsAtPoint(matchedElement.shadowRoot, x, y, filterFunction, visitedShadowRoots);
+  }
+
+  return elementsAtPoint;
+}
+
+// ===================== MAIN HOOK =====================
+
+export function useHeatmapMouseHandler(props: UseHeatmapMouseHandlerProps) {
+  const { heatmapWrapperRef, iframeRef, parentRef, heatmapInfo, scaleRatio, onElementHover } =
+    props;
+
+  const handleMouseMove = useCallback(
+    (event: MouseEvent) => {
+      // Kiểm tra tất cả refs và data cần thiết
+      if (
+        !heatmapWrapperRef?.current ||
+        !iframeRef?.current ||
+        !iframeRef.current.contentDocument ||
+        !heatmapInfo?.elementMapInfo ||
+        !parentRef?.current
+      ) {
+        return;
+      }
+
+      try {
+        // Tính toán scroll position (đã scale)
+        const scrollTop = parentRef.current.scrollTop / scaleRatio;
+        console.log(`🚀 🐥 ~ useHeatmapMouseHandler ~ scrollTop:`, scrollTop);
+
+        // Lấy vị trí của heatmap wrapper
+        const wrapperRect = heatmapWrapperRef.current.getBoundingClientRect();
+
+        // Tính toán tọa độ chuột trong iframe (đã scale)
+        const mouseX = (event.clientX - wrapperRect.left) / scaleRatio;
+        const mouseY = (event.clientY - wrapperRect.top) / scaleRatio - scrollTop;
+
+        // Tìm elements tại vị trí chuột
+        const elementsAtPoint = getElementsAtPoint(
+          iframeRef.current.contentDocument,
+          Math.round(mouseX),
+          Math.round(mouseY),
+          // Filter: chỉ lấy elements có heatmap attribute
+          (element) => element.hasAttribute(HEATMAP_ELEMENT_ATTRIBUTE),
+        );
+
+        if (!elementsAtPoint || elementsAtPoint.length === 0) {
+          return;
+        }
+
+        // Duyệt qua các elements tìm được
+        for (let i = 0; i < elementsAtPoint.length; i++) {
+          const element = elementsAtPoint[i] as HTMLElement;
+
+          // Lấy hash/id của element
+          const elementHash = element.getAttribute(HEATMAP_ELEMENT_ATTRIBUTE);
+
+          // Kiểm tra element có data trong heatmapInfo không
+          if (elementHash && heatmapInfo.elementMapInfo[elementHash]) {
+            const elementData = heatmapInfo.elementMapInfo[elementHash];
+
+            // Lấy bounding box của element
+            const boundingBox = getBoundingBox(element);
+
+            if (boundingBox) {
+              // Tính rank của element
+              const rank =
+                Array.isArray(heatmapInfo.sortedElements) && elementData
+                  ? heatmapInfo.sortedElements.indexOf(elementData) + 1
+                  : NaN;
+
+              // Callback với thông tin element
+              onElementHover({
+                ...boundingBox,
+
+                // Giới hạn width không vượt quá width của heatmap
+                width: Math.min(boundingBox.width, heatmapInfo.width || 0),
+
+                // Adjust top position với scroll
+                top: boundingBox.top + scrollTop,
+
+                // Metadata
+                hash: elementHash,
+                clicks: elementData.totalclicks,
+                rank: rank,
+                selector: elementData.selector || '',
+              });
+
+              // Dừng loop khi tìm thấy element hợp lệ đầu tiên
+              break;
+            }
+          }
+        }
+      } catch (error) {
+        console.warn('Error handling mouse move on heatmap:', error);
+      }
+    },
+    [heatmapWrapperRef, iframeRef, parentRef, heatmapInfo, scaleRatio, onElementHover],
+  );
+
+  return { handleMouseMove };
+}
+
+// ===================== EXAMPLE USAGE =====================
+/*
+import { useRef, useState } from 'react';
+
+function HeatmapComponent() {
+  const heatmapWrapperRef = useRef<HTMLDivElement>(null);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const parentRef = useRef<HTMLDivElement>(null);
+
+  const [hoveredElement, setHoveredElement] = useState<HoveredElementInfo | null>(null);
+
+  const heatmapInfo = {
+    width: 1920,
+    elementMapInfo: {
+      'hash123': {
+        totalclicks: 45,
+        selector: 'button.submit'
+      }
+    },
+    sortedElements: [...]
+  };
+
+  const { handleMouseMove } = useHeatmapMouseHandler({
+    heatmapWrapperRef,
+    iframeRef,
+    parentRef,
+    heatmapInfo,
+    scaleRatio: 0.8, // 80% zoom
+    onElementHover: (info) => {
+      setHoveredElement(info);
+      console.log('Hovered element:', info);
+    }
+  });
+
+  return (
+    <div ref={parentRef}>
+      <div
+        ref={heatmapWrapperRef}
+        onMouseMove={handleMouseMove}
+      >
+        <iframe ref={iframeRef} />
+
+        {hoveredElement && (
+          <div className="tooltip" style={{
+            position: 'absolute',
+            left: hoveredElement.left,
+            top: hoveredElement.top
+          }}>
+            Clicks: {hoveredElement.clicks}
+            <br />
+            Rank: #{hoveredElement.rank}
+            <br />
+            Selector: {hoveredElement.selector}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+*/

package/src/hooks/viz-elements/useHoveredElement.ts

@@ -0,0 +1,170 @@
+import { useCallback } from 'react';
+import { buildElementInfo, getElementAtPoint, getElementHash } from '../../helpers';
+import { useHeatmapDataStore, useHeatmapInteractionStore, useHeatmapVizStore } from '../../stores';
+import { IHeatmapInfo } from '../../types';
+import { debounce } from '../../utils/debounce';
+import { getBoundingBox, getElementsAtPoint } from './useHeatmapMouseHandler';
+
+interface Params {
+  iframeRef: React.RefObject<HTMLIFrameElement>;
+  getRect: (el?: any) => any;
+}
+export const useHoveredElement = ({ iframeRef, getRect }: Params) => {
+  const hoveredElement = useHeatmapInteractionStore((state) => state.hoveredElement);
+  const setHoveredElement = useHeatmapInteractionStore((state) => state.setHoveredElement);
+  const onSelect = useHeatmapInteractionStore((state) => state.setSelectedElement);
+  const widthScale = useHeatmapVizStore((state) => state.scale);
+  const heatmapInfo = useHeatmapDataStore((state) => state.dataInfo);
+
+  const reset = useCallback(() => {
+    setHoveredElement(null);
+  }, [setHoveredElement]);
+  const handleMouseLeave = useCallback(() => {
+    reset();
+  }, [reset]);
+
+  const getHashFromEvent = useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      if (!heatmapInfo || !isIframeReady(iframeRef, heatmapInfo)) {
+        reset();
+        return;
+      }
+
+      const iframe = iframeRef.current!;
+      const doc = iframe.contentDocument!;
+      const iframeRect = iframe.getBoundingClientRect();
+      const { x, y } = convertViewportToIframeCoords(
+        event.clientX,
+        event.clientY,
+        iframeRect,
+        widthScale,
+      );
+
+      const targetElement = findTargetElement(doc, x, y, heatmapInfo);
+      if (!targetElement || !isValidElement(targetElement, heatmapInfo)) {
+        reset();
+        return;
+      }
+
+      const hash = getElementHash(targetElement);
+      if (!!hash) return hash;
+
+      reset();
+      return;
+    },
+    [heatmapInfo, iframeRef, getRect, widthScale, reset],
+  );
+
+  const handleMouseMove = useCallback(
+    debounce((event: React.MouseEvent<HTMLDivElement>) => {
+      if (!heatmapInfo) {
+        reset();
+        return;
+      }
+
+      const hash = getHashFromEvent(event);
+      if (!hash) {
+        reset();
+        return;
+      }
+
+      const selector = heatmapInfo?.elementMapInfo?.[hash];
+      const rect = getRect({ hash, selector });
+      const elementInfo = buildElementInfo(hash, rect, heatmapInfo);
+      if (!elementInfo) {
+        reset();
+        return;
+      }
+
+      setHoveredElement(elementInfo);
+    }, 16),
+    [heatmapInfo, getRect, reset, getHashFromEvent],
+  );
+
+  const handleClick = useCallback(() => {
+    if (!hoveredElement?.hash) return;
+
+    onSelect(hoveredElement.hash);
+  }, [hoveredElement?.hash]);
+
+  return {
+    hoveredElement,
+    handleMouseMove,
+    handleMouseLeave,
+    handleClick,
+  };
+};
+
+export const convertViewportToIframeCoords = (
+  clientX: number,
+  clientY: number,
+  iframeRect: DOMRect,
+  scale: number,
+): { x: number; y: number } => {
+  let x = clientX - iframeRect.left;
+  let y = clientY - iframeRect.top;
+
+  if (scale !== 1) {
+    x /= scale;
+    y /= scale;
+  }
+
+  return { x, y };
+};
+
+const findTargetElement = (
+  doc: Document,
+  x: number,
+  y: number,
+  heatmapInfo: IHeatmapInfo,
+): HTMLElement | null => {
+  const HEATMAP_ELEMENT_ATTRIBUTE = 'data-clarity-hashalpha';
+  const elementsAtPoint = getElementsAtPoint(
+    doc,
+    Math.round(x),
+    Math.round(y),
+    (element: Element) => element.hasAttribute(HEATMAP_ELEMENT_ATTRIBUTE),
+  );
+
+  let dataElement = null;
+  for (let i = 0; i < elementsAtPoint.length; i++) {
+    const element = elementsAtPoint[i] as HTMLElement;
+    const elementHash = element.getAttribute(HEATMAP_ELEMENT_ATTRIBUTE);
+    if (elementHash && heatmapInfo.elementMapInfo?.[elementHash]) {
+      const elementData = heatmapInfo.elementMapInfo[elementHash];
+      const boundingBox = getBoundingBox(element);
+
+      if (boundingBox) {
+        dataElement = element;
+        break;
+      }
+    }
+  }
+  if (!!dataElement) {
+    return dataElement;
+  }
+
+  let targetElement = getElementAtPoint(doc, x, y);
+
+  if (!targetElement) {
+    targetElement = doc.elementFromPoint(x, y) as HTMLElement | null;
+  }
+
+  return targetElement;
+};
+
+const isIframeReady = (
+  iframeRef: React.RefObject<HTMLIFrameElement>,
+  heatmapInfo?: IHeatmapInfo,
+): boolean => {
+  return !!(iframeRef.current?.contentDocument && heatmapInfo?.elementMapInfo);
+};
+
+const isValidElement = (element: HTMLElement | null, heatmapInfo?: IHeatmapInfo): boolean => {
+  if (!element) return false;
+
+  const hash = getElementHash(element);
+  if (!hash) return false;
+
+  return !!heatmapInfo?.elementMapInfo?.[hash];
+};

package/src/hooks/viz-live/index.ts

@@ -0,0 +1 @@
+export * from './useVizLiveRender';

package/src/hooks/viz-live/useVizLiveIframeMsg.ts

@@ -0,0 +1,88 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { decodePayloads } from '../../helpers';
+import { useHeatmapLiveStore } from '../../stores';
+
+export enum MessageType {
+  GX_DOM_TRACKING_PAYLOAD = 'GX_DOM_TRACKING_PAYLOAD',
+  CLARITY_READY = 'CLARITY_READY',
+}
+
+export interface ClarityMessage {
+  type: MessageType;
+  payload?: any;
+  timestamp?: number;
+}
+
+interface UseIframeMessageOptions {
+  trustedOrigins?: string[];
+  onMessage?: (message: ClarityMessage) => void;
+}
+
+export function useVizLiveIframeMsg(options: UseIframeMessageOptions = {}) {
+  const { trustedOrigins = [], onMessage } = options;
+
+  const addPayload = useHeatmapLiveStore((state) => state.addPayload);
+
+  const [isReady, setIsReady] = useState(false);
+
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  const isValidOrigin = useCallback(
+    (origin: string) => {
+      if (trustedOrigins.length === 0) return true;
+      return trustedOrigins.includes(origin);
+    },
+    [trustedOrigins],
+  );
+
+  const handleMessage = useCallback(
+    (event: MessageEvent<ClarityMessage>) => {
+      if (!isValidOrigin(event.origin)) {
+        console.warn('Message from untrusted origin:', event.origin);
+        return;
+      }
+
+      if (!event.data || typeof event.data !== 'object' || !event.data.type) {
+        return;
+      }
+
+      const message = event.data;
+
+      if (!Object.values(MessageType).includes(message.type)) {
+        return;
+      }
+
+      if (onMessage) {
+        onMessage(message);
+      }
+
+      switch (message.type) {
+        case MessageType.GX_DOM_TRACKING_PAYLOAD:
+          if (message.payload) {
+            const data = decodePayloads(message.payload);
+            if (data) {
+              addPayload(data);
+            }
+          }
+          break;
+
+        case MessageType.CLARITY_READY:
+          setIsReady(true);
+          break;
+      }
+    },
+    [isValidOrigin, onMessage],
+  );
+
+  useEffect(() => {
+    window.addEventListener('message', handleMessage);
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  }, [handleMessage]);
+
+  return {
+    iframeRef,
+    isReady,
+  };
+}

package/src/hooks/viz-live/useVizLiveRender.ts

@@ -0,0 +1,67 @@
+import { useEffect } from 'react';
+import { initIframeHelperFixer } from '../../helpers';
+import { useHeatmapConfigStore, useHeatmapLiveStore, useHeatmapVizStore } from '../../stores';
+import { useVizLiveIframeMsg } from './useVizLiveIframeMsg';
+
+export function useVizLiveRender() {
+  const wrapperHeight = useHeatmapLiveStore((state) => state.wrapperHeight);
+  const setIframeHeight = useHeatmapLiveStore((state) => state.setIframeHeight);
+  const contentWidth = useHeatmapConfigStore((state) => state.width);
+  const htmlContent = useHeatmapLiveStore((state) => state.htmlContent);
+  const setIsRenderViz = useHeatmapVizStore((state) => state.setIsRenderViz);
+
+  const { iframeRef, isReady } = useVizLiveIframeMsg();
+
+  useEffect(() => {
+    if (!htmlContent || !iframeRef.current) return;
+
+    const iframe = iframeRef.current;
+    const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
+
+    if (iframeDoc) {
+      iframeDoc.open();
+      iframeDoc.writeln(htmlContent);
+      iframeDoc.close();
+    }
+  }, [htmlContent]);
+
+  useEffect(() => {
+    if (!isReady) return;
+    if (!iframeRef.current) return;
+
+    const iframe = iframeRef.current;
+    if (!iframe || !htmlContent) return;
+
+    setIsRenderViz(false);
+    reset(iframe, { width: contentWidth, height: wrapperHeight }, (height) => {
+      height && setIframeHeight(height);
+      setIsRenderViz(true);
+    });
+  }, [isReady, contentWidth, wrapperHeight]);
+
+  return {
+    iframeRef,
+  };
+}
+
+function reset(
+  iframe: HTMLIFrameElement,
+  rect: {
+    width: number;
+    height: number;
+  },
+  onSuccess: (height: number) => void,
+) {
+  const fixer = initIframeHelperFixer({
+    targetWidth: rect.width,
+    targetHeight: rect.height,
+    iframe: iframe,
+    onSuccess: (data) => {
+      iframe.height = `${data.height}px`;
+      onSuccess(data.height);
+    },
+  });
+
+  // fixer.recalculate();
+  fixer.enableNavigationBlocking();
+}

package/src/hooks/viz-render/index.ts

@@ -0,0 +1 @@
+export * from './useHeatmapVizRender';

package/src/hooks/viz-render/useHeatmapRender.ts

@@ -0,0 +1,71 @@
+import { Visualizer } from '@gemx-dev/clarity-visualize';
+import { useCallback, useEffect, useRef } from 'react';
+import { findLastSizeOfDom, initIframeHelperFixer } from '../../helpers';
+import { useHeatmapDataStore, useHeatmapSingleStore, useHeatmapVizStore } from '../../stores';
+import { DecodedPayload } from '../../types';
+
+interface IUseHeatmapRenderResult {
+  iframeRef: React.RefObject<HTMLIFrameElement | null>;
+}
+
+let visualizer: Visualizer = new Visualizer();
+export const useHeatmapRender = (): IUseHeatmapRenderResult => {
+  const data = useHeatmapDataStore((state) => state.data);
+  const setVizRef = useHeatmapSingleStore((state) => state.setVizRef);
+  const setIsRenderViz = useHeatmapVizStore((state) => state.setIsRenderViz);
+  const setIframeHeight = useHeatmapSingleStore((state) => state.setIframeHeight);
+
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+
+  const renderHeatmap = useCallback(async (payloads: DecodedPayload[]) => {
+    if (!payloads || payloads.length === 0) return;
+
+    setIsRenderViz(false);
+    const iframe = iframeRef.current;
+    if (!iframe?.contentWindow) return;
+
+    await visualizer.html(payloads, iframe.contentWindow);
+
+    initIframe(iframe, payloads, (height: number) => {
+      height && setIframeHeight(height);
+      setIsRenderViz(true);
+      setVizRef(visualizer);
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!data || data.length === 0) return;
+
+    renderHeatmap(data);
+    return () => {
+      setVizRef(null);
+    };
+  }, [data]);
+
+  return {
+    iframeRef,
+  };
+};
+
+function initIframe(
+  iframe: HTMLIFrameElement,
+  payloads: DecodedPayload[],
+  onSuccess: (height: number) => void,
+) {
+  const { size } = findLastSizeOfDom(payloads);
+
+  const docWidth = size.width ?? 0;
+  const docHeight = size.height ?? 0;
+
+  const fixer = initIframeHelperFixer({
+    targetWidth: docWidth,
+    targetHeight: docHeight,
+    iframe: iframe,
+    onSuccess: (data) => {
+      iframe.height = `${data.height}px`;
+      onSuccess(data.height);
+    },
+  });
+
+  // fixer.recalculate();
+}

package/src/hooks/viz-render/useHeatmapVizRender.ts

@@ -0,0 +1,20 @@
+import { useMemo } from 'react';
+import { useHeatmapRender } from './useHeatmapRender';
+import { useReplayRender } from './useReplayRender';
+
+interface IHeatmapVizRenderResult {
+  iframeRef: React.RefObject<HTMLIFrameElement | null>;
+}
+
+export const useHeatmapVizRender = (mode: 'heatmap' | 'replay'): IHeatmapVizRenderResult => {
+  const heatmapResult = useMemo(() => {
+    switch (mode) {
+      case 'heatmap':
+        return useHeatmapRender;
+      case 'replay':
+        return useReplayRender;
+    }
+  }, [mode]);
+
+  return heatmapResult();
+};