@gemx-dev/heatmap-react 3.5.21 → 3.5.23

package/src/components/VizElement/temp/ClarityVisualizer.ts

@@ -0,0 +1,764 @@
+// ============================================================================
+// Type Definitions
+// ============================================================================
+
+interface ViewNode {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  visible: boolean;
+  hash?: string;
+  hashAlpha?: string;
+  hashBeta?: string;
+  renderNodeId?: number;
+  isWebView?: boolean;
+  selectorAlpha?: string;
+  selectorBeta?: string;
+}
+
+interface WebViewInfo {
+  renderNodeId: number;
+  visualizer: any;
+  div: HTMLDivElement;
+  scale: number;
+  top: number;
+  left: number;
+  visible: boolean;
+  orderInFrame?: number;
+}
+
+interface ViewHierarchy {
+  root: ViewNode;
+  timestamp?: number;
+  visibleFragments?: string[];
+}
+
+interface Frame {
+  viewHierarchy: ViewHierarchy;
+  screenWidth: number;
+  screenHeight: number;
+  density: number;
+  keyboardHeight?: number;
+  systemBackgroundColor?: number | null;
+}
+
+interface ClarityVisualizerState {
+  div?: HTMLElement;
+  window?: Window;
+  options?: {
+    version?: string;
+    platform?: number;
+    mute?: boolean;
+    canvas?: boolean;
+    keyframes?: boolean;
+    canvasId?: string;
+    heatmap?: boolean;
+    logError?: (error: any) => void;
+    fetchAssets?: (assets: any) => Promise<any>;
+    clickmapScrolledCallback?: () => void;
+  };
+}
+
+interface NodeLayout {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  isNative?: boolean;
+  htmlElement?: HTMLElement;
+  selector?: string;
+}
+
+interface ElementWithHash {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+  hash: string;
+}
+
+interface ResizeEvent {
+  event: number;
+  time: number;
+  webViewRenderNodeId: number;
+  data: {
+    width: number;
+    height: number;
+  };
+}
+
+interface MutationEvent {
+  isKeyFrame: boolean;
+  serializedFrame: string;
+}
+
+// ============================================================================
+// ClarityVisualizer Class Implementation
+// ============================================================================
+
+export class ClarityVisualizer {
+  // State properties
+  public state: ClarityVisualizerState | null = null;
+  public webViews: { [key: number]: WebViewInfo } = {};
+  public lastFrame: Frame | null = null;
+  public hashMapAlpha: { [key: string]: ViewNode } = {};
+  public hashMapBeta: { [key: string]: ViewNode } = {};
+
+  private lastWidth: number | null = null;
+  private lastHeight: number | null = null;
+
+  // Canvas/rendering wrapper (simplified - you'll need actual implementation)
+  private ckWrapper: any = null;
+  public heatmap: any = null;
+
+  // ============================================================================
+  // Constructor
+  // ============================================================================
+
+  constructor(state?: ClarityVisualizerState) {
+    if (state) {
+      this.setState(state);
+    }
+  }
+
+  // ============================================================================
+  // State Management
+  // ============================================================================
+
+  public getState(): ClarityVisualizerState | null {
+    return this.state;
+  }
+
+  public setState(state: ClarityVisualizerState): void {
+    this.state = state;
+  }
+
+  // ============================================================================
+  // Initialization
+  // ============================================================================
+
+  public async init(div: HTMLElement, canvasId?: string, heatmap?: boolean): Promise<void> {
+    this.webViews = {};
+    this.lastFrame = null;
+
+    // Initialize state
+    this.state = {
+      div,
+      options: {
+        ...this.state?.options,
+        canvasId,
+        heatmap,
+      },
+    };
+
+    // Create overlay canvas if not in heatmap mode
+    if (!heatmap) {
+      const canvas = this.overlay(div, canvasId);
+      // TODO: Initialize canvas wrapper
+      // await this.ckWrapper?.setBaseCanvas(canvas);
+    }
+  }
+
+  public reset(): void {
+    this.hashMapAlpha = {};
+    this.hashMapBeta = {};
+    this.lastFrame = null;
+    this.webViews = {};
+
+    if (this.state?.div) {
+      this.state.div.innerHTML = '';
+    }
+
+    // Reset canvas wrapper
+    this.ckWrapper?.reset();
+  }
+
+  // ============================================================================
+  // Node Retrieval - Core Methods
+  // ============================================================================
+
+  /**
+   * Get node layout by hash - matches fr.get() implementation
+   */
+  public get(
+    hash: string,
+    checkViewport: boolean = false,
+    scrollIntoView: boolean = false,
+  ): NodeLayout | null {
+    // Check hashMapBeta first (primary)
+    if (hash in this.hashMapBeta && this.hashMapBeta[hash].visible) {
+      const node = this.hashMapBeta[hash];
+      return {
+        x: node.x,
+        y: node.y,
+        width: node.width,
+        height: node.height,
+        isNative: true,
+        selector: node.selectorBeta,
+      };
+    }
+
+    // Check hashMapAlpha (fallback)
+    if (hash in this.hashMapAlpha && this.hashMapAlpha[hash].visible) {
+      const node = this.hashMapAlpha[hash];
+      return {
+        x: node.x,
+        y: node.y,
+        width: node.width,
+        height: node.height,
+        isNative: true,
+        selector: node.selectorAlpha,
+      };
+    }
+
+    // Check WebViews
+    const visibleWebViews = Object.values(this.webViews).filter((wv) => wv.visible);
+
+    for (const webView of visibleWebViews) {
+      const element = webView.visualizer?.get?.(hash);
+
+      if (element) {
+        // Check if element is in viewport if required
+        if (checkViewport && !this.isElementInViewport(element, webView.div)) {
+          continue;
+        }
+
+        // Scroll element into view if requested
+        if (scrollIntoView && element) {
+          this.scrollElementIntoView(element, webView);
+        }
+
+        const layout = this.getNodeLayout(webView, element);
+        if (layout) {
+          return {
+            ...layout,
+            isNative: false,
+            htmlElement: element,
+          };
+        }
+      }
+    }
+
+    return null;
+  }
+
+  /**
+   * Get all elements at given coordinates - matches fr.getViews() implementation
+   */
+  public getViews(x: number, y: number, useAlpha: boolean): ElementWithHash[] {
+    if (!this.lastFrame) return [];
+
+    const root = this.lastFrame.viewHierarchy.root;
+    const elements: ElementWithHash[] = [];
+
+    // Traverse view hierarchy for native elements
+    this.traverseViewHierarchy(this.lastFrame.viewHierarchy, (node: ViewNode) => {
+      if (
+        x > node.x &&
+        x < node.x + node.width &&
+        y > node.y &&
+        y < node.y + node.height &&
+        node.visible &&
+        this.intersectRect(node, root)
+      ) {
+        const hash = useAlpha ? node.hashAlpha : node.hashBeta;
+        if (hash) {
+          elements.push({
+            left: node.x,
+            top: node.y,
+            width: node.width,
+            height: node.height,
+            hash,
+          });
+        }
+      }
+    });
+
+    // Check WebView elements
+    const hashAttribute = useAlpha ? 'data-clarity-hashalpha' : 'data-clarity-hashbeta';
+    const processedHashes: { [key: string]: boolean } = {};
+
+    const checkWebViewElements = (
+      doc: Document | ShadowRoot | null,
+      clientX: number,
+      clientY: number,
+      webView: WebViewInfo,
+    ) => {
+      if (!doc) return;
+
+      const elementsAtPoint = doc.elementsFromPoint?.(clientX, clientY);
+      if (!elementsAtPoint) return;
+
+      // Reverse to get top-most elements first
+      elementsAtPoint.reverse();
+
+      for (const element of elementsAtPoint) {
+        const hash = element.getAttribute(hashAttribute);
+
+        if (hash && !processedHashes[hash]) {
+          processedHashes[hash] = true;
+
+          const layout = this.getNodeLayout(webView, element as HTMLElement);
+          if (layout) {
+            elements.push({
+              top: layout.y,
+              left: layout.x,
+              width: layout.width,
+              height: layout.height,
+              hash,
+            });
+          }
+
+          // Check shadow root
+          const shadowRoot = (element as HTMLElement).shadowRoot;
+          if (shadowRoot) {
+            checkWebViewElements(shadowRoot, clientX, clientY, webView);
+          }
+        }
+      }
+    };
+
+    // Process all visible webviews
+    for (const webView of Object.values(this.webViews)) {
+      if (webView.visible && webView.visualizer?.state?.window?.document) {
+        const doc = webView.visualizer.state.window.document;
+        const localX = x / webView.scale - webView.left;
+        const localY = y / webView.scale - webView.top;
+
+        checkWebViewElements(doc, Math.round(localX), Math.round(localY), webView);
+      }
+    }
+
+    return elements;
+  }
+
+  /**
+   * Get node layout from HTML element
+   */
+  public getNodeLayout(webView: WebViewInfo, element: HTMLElement): NodeLayout | null {
+    if (typeof element.getBoundingClientRect !== 'function') {
+      return null;
+    }
+
+    const rect = element.getBoundingClientRect();
+    const scrollLeft =
+      'pageXOffset' in window ? window.pageXOffset : document.documentElement.scrollLeft;
+    const scrollTop =
+      'pageYOffset' in window ? window.pageYOffset : document.documentElement.scrollTop;
+
+    if (rect && (rect.height !== 0 || rect.width !== 0)) {
+      return {
+        x:
+          (Math.floor(rect.left + scrollLeft) + webView.left - webView.div.scrollLeft) *
+          webView.scale,
+        y: (Math.floor(rect.top + scrollTop) + webView.top - webView.div.scrollTop) * webView.scale,
+        width: Math.floor(rect.width) * webView.scale,
+        height: Math.floor(rect.height) * webView.scale,
+      };
+    }
+
+    return null;
+  }
+
+  // ============================================================================
+  // Frame Processing
+  // ============================================================================
+
+  /**
+   * Process mutation event and update frame
+   */
+  public async mutation(event: MutationEvent): Promise<void> {
+    try {
+      // Parse frame
+      if (event.isKeyFrame) {
+        this.lastFrame = JSON.parse(event.serializedFrame);
+      } else {
+        // Apply incremental update (you'll need to implement merge logic)
+        if (this.lastFrame) {
+          this.applyFrameUpdate(this.lastFrame, JSON.parse(event.serializedFrame));
+        }
+      }
+
+      // Update hash maps
+      this.updateHashMaps();
+
+      // Handle resize if dimensions changed
+      if (this.lastFrame) {
+        if (
+          this.lastFrame.screenWidth !== this.lastWidth ||
+          this.lastFrame.screenHeight !== this.lastHeight
+        ) {
+          await this.resize({
+            event: 11,
+            time: 0,
+            webViewRenderNodeId: -2,
+            data: {
+              width: this.lastFrame.screenWidth,
+              height: this.lastFrame.screenHeight,
+            },
+          });
+        }
+
+        // Update WebViews
+        await this.updateWebViews();
+
+        // Draw frame
+        // await this.ckWrapper?.drawFrame(this.lastFrame);
+
+        // Draw keyboard if present
+        const keyboardHeight = this.lastFrame.keyboardHeight ?? 0;
+        this.drawKeyboard(keyboardHeight / this.lastFrame.screenHeight);
+
+        // Set background color
+        this.setSystemBackgroundColor(this.lastFrame.systemBackgroundColor ?? null);
+      }
+    } catch (error) {
+      this.state?.options?.logError?.(error);
+    }
+  }
+
+  /**
+   * Update hash maps from current frame
+   */
+  public updateHashMaps(): void {
+    this.hashMapAlpha = {};
+    this.hashMapBeta = {};
+
+    if (!this.lastFrame) return;
+
+    this.traverseViewHierarchy(this.lastFrame.viewHierarchy, (node: ViewNode) => {
+      if (node.visible) {
+        if (node.hashAlpha) {
+          this.hashMapAlpha[node.hashAlpha] = node;
+        }
+        if (node.hashBeta) {
+          this.hashMapBeta[node.hashBeta] = node;
+        }
+      }
+    });
+  }
+
+  /**
+   * Handle resize event
+   */
+  public async resize(event: ResizeEvent): Promise<void> {
+    const canvas = document.getElementById('clarity-android-canvas') as HTMLCanvasElement;
+
+    if (canvas) {
+      canvas.width = event.data.width;
+      canvas.height = event.data.height;
+      this.lastWidth = event.data.width;
+      this.lastHeight = event.data.height;
+
+      // await this.ckWrapper?.setBaseCanvas(canvas);
+    }
+  }
+
+  // ============================================================================
+  // WebView Management
+  // ============================================================================
+
+  public getWebViewWindows(): Window[] {
+    return Object.keys(this.webViews)
+      .map(Number)
+      .map((id) => this.webViews[id].visualizer?.state?.window)
+      .filter(Boolean);
+  }
+
+  public webViewDivs(): HTMLDivElement[] {
+    return Object.keys(this.webViews)
+      .map(Number)
+      .map((id) => this.webViews[id].div);
+  }
+
+  private async updateWebViews(): Promise<void> {
+    if (!this.lastFrame) return;
+
+    const webViewNodes = this.getWebViewNodes(this.lastFrame.viewHierarchy);
+    this.createWebViewDivs(webViewNodes);
+    this.hideWebViewDivs(webViewNodes);
+
+    // Update WebView positions and visibility
+    for (const node of webViewNodes) {
+      if (this.webViews[node.renderNodeId!]) {
+        const webView = this.webViews[node.renderNodeId!];
+        webView.visible = node.visible;
+
+        if (webView.div) {
+          webView.div.style.visibility = node.visible ? 'visible' : 'hidden';
+          webView.div.style.position = 'absolute';
+          webView.div.style.top = `${node.y}px`;
+          webView.div.style.left = `${node.x}px`;
+          webView.div.style.width = `${node.width}px`;
+          webView.div.style.height = `${node.height}px`;
+        }
+      }
+    }
+  }
+
+  private createWebViewDivs(nodes: ViewNode[]): void {
+    for (const node of nodes) {
+      if (node.renderNodeId && !this.webViews[node.renderNodeId]) {
+        const div = document.createElement('div');
+        div.id = `clarity-webview-div-${node.renderNodeId}`;
+        div.style.visibility = 'hidden';
+
+        this.state?.div?.appendChild(div);
+
+        this.webViews[node.renderNodeId] = {
+          renderNodeId: node.renderNodeId,
+          visualizer: null,
+          div,
+          scale: 1,
+          top: 0,
+          left: 0,
+          visible: false,
+        };
+      }
+    }
+  }
+
+  private hideWebViewDivs(visibleNodes: ViewNode[]): void {
+    const visibleIds = new Set(visibleNodes.map((n) => n.renderNodeId).filter(Boolean));
+
+    for (const id of Object.keys(this.webViews).map(Number)) {
+      if (!visibleIds.has(id)) {
+        this.webViews[id].div.style.visibility = 'hidden';
+        this.webViews[id].visible = false;
+      }
+    }
+  }
+
+  // ============================================================================
+  // Callback Setup
+  // ============================================================================
+
+  public setAndroidClickmapScrolledCallback(callback: () => void): void {
+    if (this.state?.options) {
+      this.state.options.clickmapScrolledCallback = callback;
+    }
+  }
+
+  // ============================================================================
+  // Asset Management
+  // ============================================================================
+
+  public async preloadImpressionAssets(frames: Frame[]): Promise<void> {
+    // TODO: Implement asset preloading logic
+    console.log('Preloading assets for', frames.length, 'frames');
+  }
+
+  // ============================================================================
+  // Helper Methods
+  // ============================================================================
+
+  private traverseViewHierarchy(
+    hierarchy: ViewHierarchy,
+    callback: (node: ViewNode) => void,
+  ): void {
+    const traverse = (node: ViewNode) => {
+      callback(node);
+      // If node has children, traverse them (you'll need to add children property)
+      // For now, just call on root
+    };
+
+    traverse(hierarchy.root);
+  }
+
+  private getWebViewNodes(hierarchy: ViewHierarchy): ViewNode[] {
+    const webViewNodes: ViewNode[] = [];
+
+    this.traverseViewHierarchy(hierarchy, (node) => {
+      if (node.isWebView) {
+        webViewNodes.push(node);
+      }
+    });
+
+    return webViewNodes;
+  }
+
+  private intersectRect(rect1: ViewNode, rect2: ViewNode): boolean {
+    return !(
+      rect2.x > rect1.x + rect1.width ||
+      rect2.x + rect2.width < rect1.x ||
+      rect2.y > rect1.y + rect1.height ||
+      rect2.y + rect2.height < rect1.y
+    );
+  }
+
+  private isElementInViewport(element: HTMLElement, container: HTMLDivElement): boolean {
+    const rect = element.getBoundingClientRect();
+
+    return this.intersectRect(
+      {
+        x: rect.left,
+        y: rect.top,
+        width: rect.width,
+        height: rect.height,
+        visible: true,
+      },
+      {
+        x: container.scrollLeft,
+        y: container.scrollTop,
+        width: container.clientWidth,
+        height: container.clientHeight,
+        visible: true,
+      },
+    );
+  }
+
+  private scrollElementIntoView(element: HTMLElement, webView: WebViewInfo): void {
+    element.style.scrollMarginBlock = '100px';
+    element.style.scrollMarginInline = '50px';
+
+    // Add scroll listener to redraw heatmap
+    const onScroll = () => {
+      setTimeout(() => {
+        this.heatmap?.redraw?.(null);
+      }, 200);
+    };
+
+    // Add scroll listeners to all parent elements
+    let parent: Node | null = element;
+    while (parent) {
+      parent =
+        parent.parentNode ||
+        (parent.nodeType === Node.DOCUMENT_FRAGMENT_NODE ? (parent as any).host : null);
+
+      if (parent) {
+        (parent as Element).addEventListener?.('scroll', onScroll, {
+          capture: true,
+          once: false,
+          passive: true,
+        });
+      }
+    }
+
+    element.scrollIntoView({
+      behavior: 'smooth',
+      block: 'start',
+      inline: 'nearest',
+    });
+  }
+
+  private overlay(div: HTMLElement, canvasId?: string): HTMLCanvasElement {
+    const id = `clarity-android-canvas${canvasId ? `-${canvasId}` : ''}`;
+    let canvas = document.getElementById(id) as HTMLCanvasElement;
+
+    if (canvas?.parentNode) {
+      canvas.parentNode.removeChild(canvas);
+    }
+
+    canvas = document.createElement('canvas');
+    canvas.id = id;
+    canvas.width = div.offsetWidth;
+    canvas.height = div.offsetHeight;
+    canvas.style.position = 'absolute';
+    canvas.style.top = '0';
+    canvas.style.left = '0';
+
+    div.prepend(canvas);
+
+    return canvas;
+  }
+
+  private drawKeyboard(heightRatio: number): void {
+    if (!this.state?.div) return;
+
+    const doc = document;
+    let keyboardLayer = doc.getElementById('clarity-keyboard-layer');
+
+    if (heightRatio > 0 && !keyboardLayer) {
+      keyboardLayer = this.createKeyboardLayer(doc, heightRatio);
+      this.state.div.appendChild(keyboardLayer);
+    } else if (heightRatio <= 0 && keyboardLayer) {
+      keyboardLayer.remove();
+    }
+  }
+
+  private createKeyboardLayer(doc: Document, heightRatio: number): HTMLDivElement {
+    const layer = doc.createElement('div');
+    layer.id = 'clarity-keyboard-layer';
+
+    const style = doc.createElement('style');
+    style.textContent = this.getKeyboardLayerStyle(heightRatio);
+    layer.appendChild(style);
+    layer.setAttribute('title', 'Keyboard Event');
+
+    return layer;
+  }
+
+  private getKeyboardLayerStyle(heightRatio: number): string {
+    return `
+      @keyframes fade-in {
+        0% { bottom: -100% }
+        100% { bottom: 0 }
+      }
+
+      #clarity-keyboard-layer {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        z-index: 2147483647;
+        width: 100%;
+        height: ${100 * heightRatio}%;
+        background-repeat: no-repeat;
+        background-color: #EDEBE9;
+        background-size: 100% 100%;
+        background-position: center center;
+        animation: fade-in 0.5s ease-in-out;
+      }
+    `;
+  }
+
+  private setSystemBackgroundColor(color: number | null): void {
+    if (!this.state?.div) return;
+
+    if (color !== null) {
+      const rgba = this.colorIntToRgba(color);
+      this.state.div.style.backgroundColor = `rgba(${rgba[0]}, ${rgba[1]}, ${rgba[2]}, ${rgba[3]})`;
+    } else {
+      this.state.div.style.backgroundColor = '';
+    }
+  }
+
+  private colorIntToRgba(color: number): [number, number, number, number] {
+    return [
+      (color >> 16) & 0xff, // R
+      (color >> 8) & 0xff, // G
+      color & 0xff, // B
+      ((color >> 24) & 0xff) / 255, // A
+    ];
+  }
+
+  private applyFrameUpdate(baseFrame: Frame, update: Partial<Frame>): void {
+    // TODO: Implement incremental frame update logic
+    // This should merge the update into the base frame
+    Object.assign(baseFrame, update);
+  }
+
+  public getWebViewRenderNodeIdsFromKeyFrame(event: MutationEvent): Set<number> {
+    const ids = new Set<number>();
+
+    if (!event.isKeyFrame) return ids;
+
+    try {
+      const frame = JSON.parse(event.serializedFrame);
+
+      if (frame?.viewHierarchy?.root) {
+        this.traverseViewHierarchy(frame.viewHierarchy, (node) => {
+          if (node.isWebView && node.renderNodeId) {
+            ids.add(node.renderNodeId);
+          }
+        });
+      }
+    } catch (error) {
+      console.error('Failed to parse keyframe:', error);
+    }
+
+    return ids;
+  }
+}
+
+export default ClarityVisualizer;