@gemx-dev/heatmap-react 3.5.23 → 3.5.24

package/src/components/Test.tsx

@@ -1,1106 +0,0 @@
-import React, { Component, RefObject, useCallback, useEffect, useRef, useState } from 'react';
-
-// ===== Type Definitions =====
-
-interface IHeatmapConfig {
-  attentionMapInfo?: any[];
-  height?: number;
-  width?: number;
-}
-
-interface ImpressionData {
-  documentHeight?: number;
-  device?: string;
-  url?: string;
-  sessionId?: string;
-  userId?: string;
-  pageNum?: string;
-  timestamp?: number;
-  duration?: number;
-  playbackTokenA?: string;
-  playbackTokenB?: string;
-}
-
-interface TimelineItem {
-  key: string;
-  pageNum?: string;
-  impressionData?: ImpressionData;
-  isDead?: boolean;
-  isMissing?: boolean;
-  failedToFetch?: boolean;
-}
-
-interface MergedPayload {
-  events: any[];
-}
-
-interface ActiveDuration {
-  startTime: number;
-  duration: number;
-  active: boolean;
-}
-
-enum PanelContent {
-  Sessions = 'Sessions',
-  Timeline = 'Timeline',
-  Area = 'Area',
-  Click = 'Click',
-  Scroll = 'Scroll',
-  Attention = 'Attention',
-}
-
-enum ErrorType {
-  NoResults = 'NoResults',
-  NoClicks = 'NoClicks',
-  NoScroll = 'NoScroll',
-  ServerError = 'ServerError',
-  DataError = 'DataError',
-}
-
-interface Visualizer {
-  merge: (data: any[]) => MergedPayload;
-}
-
-interface HeatmapVisualizer {
-  attention: (data: any[]) => any;
-}
-
-// ===== Utility Functions =====
-
-const hideInteractionElements = (iframe: HTMLIFrameElement | null, shouldHide: boolean): void => {
-  const canvas = iframe?.contentWindow?.document?.getElementById('clarity-interaction-canvas');
-  const pointer = iframe?.contentWindow?.document?.getElementById('clarity-pointer');
-  const clicks = iframe?.contentWindow?.document?.getElementsByClassName('clarity-click');
-
-  if (shouldHide) {
-    if (canvas) canvas.style.display = 'none';
-    if (pointer) pointer.style.display = 'none';
-    if (clicks) {
-      for (let i = 0; i < clicks.length; i++) {
-        (clicks[i] as HTMLElement).style.display = 'none';
-      }
-    }
-  } else {
-    if (canvas) canvas.style.display = '';
-    if (pointer) pointer.style.display = '';
-    if (clicks) {
-      for (let i = 0; i < clicks.length; i++) {
-        (clicks[i] as HTMLElement).style.display = '';
-      }
-    }
-  }
-};
-
-const clearHeatmapCanvas = (iframe: HTMLIFrameElement | null, heatmapVisualizer?: any): void => {
-  const canvas = iframe?.contentWindow?.document?.getElementById('clarity-heatmap-canvas');
-  const areaMap = iframe?.contentWindow?.document?.getElementById('clarity-area-map');
-
-  if ((canvas || areaMap) && heatmapVisualizer) {
-    heatmapVisualizer.clearmap();
-  }
-
-  if (canvas?.parentNode) {
-    canvas.parentNode.removeChild(canvas);
-  }
-};
-
-// ===== Heatmap Renderer Component =====
-
-interface HeatmapPoint {
-  x: number;
-  y: number;
-  value: number;
-  timestamp?: number;
-}
-
-interface ClickData {
-  x: number;
-  y: number;
-  count: number;
-  elementPath?: string;
-}
-
-interface ScrollData {
-  depth: number;
-  percentage: number;
-  users: number;
-}
-
-interface AreaData {
-  selector: string;
-  clicks: number;
-  elementBounds: DOMRect;
-}
-
-interface HeatmapRendererProps {
-  projectId: string;
-  isVisible: boolean;
-  panelContent: PanelContent;
-  widthScale: number;
-  height: number;
-  iframeHeight: number;
-  heatmapConfig?: IHeatmapConfig;
-  selectedElement?: any;
-  heatmapLoading: boolean;
-  showNoHeatmapModal: boolean;
-  deviceType?: string;
-  recordingUrl?: string;
-  iframeRef: RefObject<HTMLIFrameElement | null>;
-  heatmapWrapperRef: RefObject<HTMLDivElement | null>;
-  parentRef: RefObject<HTMLDivElement>;
-  heatmapSidebarRef?: RefObject<HTMLDivElement>;
-  selectElement: (element: any) => void;
-  setIframeHeight: (height: number) => void;
-  setElementToShow: (element: string) => void;
-  heatmapVisualizer: HeatmapVisualizer;
-  areaMapEditKey: string;
-  attentionAggregatedData?: any;
-  setPanelContent: (content: PanelContent) => void;
-}
-
-const HeatmapRenderer: React.FC<HeatmapRendererProps> = (props) => {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const [heatmapReady, setHeatmapReady] = useState(false);
-  const [clickPoints, setClickPoints] = useState<ClickData[]>([]);
-  const [scrollData, setScrollData] = useState<ScrollData[]>([]);
-  const [areaData, setAreaData] = useState<AreaData[]>([]);
-
-  // Initialize canvas for heatmap rendering
-  useEffect(() => {
-    if (!props.isVisible || !canvasRef.current) return;
-
-    const canvas = canvasRef.current;
-    const ctx = canvas.getContext('2d');
-
-    if (!ctx) return;
-
-    // Set canvas dimensions
-    canvas.width = props.iframeRef.current?.contentWindow?.innerWidth || 1920;
-    canvas.height = props.iframeHeight;
-
-    setHeatmapReady(true);
-  }, [props.isVisible, props.iframeHeight]);
-
-  // Render click heatmap
-  const renderClickHeatmap = useCallback(() => {
-    if (!canvasRef.current || !props.heatmapConfig) return;
-
-    const canvas = canvasRef.current;
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return;
-
-    // Clear canvas
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-    // Draw each click point
-    clickPoints.forEach((click) => {
-      const gradient = ctx.createRadialGradient(click.x, click.y, 0, click.x, click.y, 40);
-
-      // Color intensity based on click count
-      const intensity = Math.min(click.count / 10, 1);
-      gradient.addColorStop(0, `rgba(255, 0, 0, ${intensity * 0.8})`);
-      gradient.addColorStop(0.5, `rgba(255, 165, 0, ${intensity * 0.4})`);
-      gradient.addColorStop(1, 'rgba(255, 255, 0, 0)');
-
-      ctx.fillStyle = gradient;
-      ctx.fillRect(click.x - 40, click.y - 40, 80, 80);
-    });
-  }, [clickPoints, props.heatmapConfig]);
-
-  // Render scroll heatmap
-  const renderScrollHeatmap = useCallback(() => {
-    if (!canvasRef.current || !props.heatmapConfig) return;
-
-    const canvas = canvasRef.current;
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return;
-
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-    // Draw scroll depth gradient
-    scrollData.forEach((scroll, index) => {
-      const y = (scroll.depth / 100) * canvas.height;
-      const nextY =
-        index < scrollData.length - 1
-          ? (scrollData[index + 1].depth / 100) * canvas.height
-          : canvas.height;
-
-      const gradient = ctx.createLinearGradient(0, y, 0, nextY);
-
-      // Color based on engagement
-      const intensity = scroll.percentage / 100;
-      const red = Math.floor(255 * (1 - intensity));
-      const green = Math.floor(255 * intensity);
-
-      gradient.addColorStop(0, `rgba(${red}, ${green}, 0, 0.3)`);
-      gradient.addColorStop(1, `rgba(${red}, ${green}, 0, 0.3)`);
-
-      ctx.fillStyle = gradient;
-      ctx.fillRect(0, y, canvas.width, nextY - y);
-    });
-  }, [scrollData, props.heatmapConfig]);
-
-  // Render attention heatmap
-  const renderAttentionHeatmap = useCallback(() => {
-    if (!canvasRef.current || !props.attentionAggregatedData) return;
-
-    const canvas = canvasRef.current;
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return;
-
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-    // Use heatmap.js style rendering
-    const heatmapPoints = props.attentionAggregatedData.points || [];
-
-    heatmapPoints.forEach((point: HeatmapPoint) => {
-      const gradient = ctx.createRadialGradient(point.x, point.y, 0, point.x, point.y, 60);
-
-      const intensity = Math.min(point.value / 100, 1);
-
-      // Heat gradient: blue (low) -> green -> yellow -> red (high)
-      if (intensity < 0.25) {
-        gradient.addColorStop(0, `rgba(0, 0, 255, ${intensity * 4 * 0.6})`);
-        gradient.addColorStop(1, 'rgba(0, 0, 255, 0)');
-      } else if (intensity < 0.5) {
-        gradient.addColorStop(0, `rgba(0, 255, 0, ${(intensity - 0.25) * 4 * 0.6})`);
-        gradient.addColorStop(1, 'rgba(0, 255, 0, 0)');
-      } else if (intensity < 0.75) {
-        gradient.addColorStop(0, `rgba(255, 255, 0, ${(intensity - 0.5) * 4 * 0.6})`);
-        gradient.addColorStop(1, 'rgba(255, 255, 0, 0)');
-      } else {
-        gradient.addColorStop(0, `rgba(255, 0, 0, ${(intensity - 0.75) * 4 * 0.6})`);
-        gradient.addColorStop(1, 'rgba(255, 0, 0, 0)');
-      }
-
-      ctx.fillStyle = gradient;
-      ctx.fillRect(point.x - 60, point.y - 60, 120, 120);
-    });
-  }, [props.attentionAggregatedData]);
-
-  // Render area map (clickable regions)
-  const renderAreaMap = useCallback(() => {
-    if (!props.iframeRef.current?.contentDocument) return;
-
-    const doc = props.iframeRef.current.contentDocument;
-
-    // Remove existing area overlays
-    const existingOverlays = doc.querySelectorAll('.clarity-area-overlay');
-    existingOverlays.forEach((el) => el.remove());
-
-    // Create overlay for each area
-    areaData.forEach((area) => {
-      const overlay = doc.createElement('div');
-      overlay.className = 'clarity-area-overlay';
-      overlay.style.cssText = `
-        position: absolute;
-        left: ${area.elementBounds.left}px;
-        top: ${area.elementBounds.top}px;
-        width: ${area.elementBounds.width}px;
-        height: ${area.elementBounds.height}px;
-        background: rgba(0, 123, 255, 0.2);
-        border: 2px solid rgba(0, 123, 255, 0.6);
-        pointer-events: auto;
-        cursor: pointer;
-        z-index: 10000;
-      `;
-
-      // Add click count badge
-      const badge = doc.createElement('div');
-      badge.className = 'clarity-area-badge';
-      badge.textContent = area.clicks.toString();
-      badge.style.cssText = `
-        position: absolute;
-        top: -10px;
-        right: -10px;
-        background: #007bff;
-        color: white;
-        border-radius: 50%;
-        width: 24px;
-        height: 24px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 12px;
-        font-weight: bold;
-      `;
-      overlay.appendChild(badge);
-
-      overlay.addEventListener('click', () => {
-        props.selectElement(area);
-        props.setElementToShow(area.selector);
-      });
-
-      doc.body.appendChild(overlay);
-    });
-  }, [areaData, props]);
-
-  // Process heatmap data based on panel content
-  useEffect(() => {
-    if (!props.heatmapConfig || props.heatmapLoading) return;
-
-    switch (props.panelContent) {
-      case PanelContent.Click:
-        // Extract click data from heatmapConfig
-        const clicks = (props.heatmapConfig as any).clicks || [];
-        setClickPoints(clicks);
-        break;
-
-      case PanelContent.Scroll:
-        // Extract scroll data
-        const scrolls = (props.heatmapConfig as any).scrollDepth || [];
-        setScrollData(scrolls);
-        break;
-
-      case PanelContent.Area:
-        // Extract area data
-        const areas = (props.heatmapConfig as any).areas || [];
-        setAreaData(areas);
-        break;
-
-      case PanelContent.Attention:
-        // Attention data is already processed via attentionAggregatedData
-        break;
-    }
-  }, [props.heatmapConfig, props.panelContent, props.heatmapLoading]);
-
-  // Render appropriate heatmap based on panel content
-  useEffect(() => {
-    if (!heatmapReady || props.heatmapLoading || props.showNoHeatmapModal) return;
-
-    switch (props.panelContent) {
-      case PanelContent.Click:
-        renderClickHeatmap();
-        break;
-
-      case PanelContent.Scroll:
-        renderScrollHeatmap();
-        break;
-
-      case PanelContent.Attention:
-        renderAttentionHeatmap();
-        break;
-
-      case PanelContent.Area:
-        renderAreaMap();
-        break;
-    }
-  }, [
-    heatmapReady,
-    props.panelContent,
-    props.heatmapLoading,
-    props.showNoHeatmapModal,
-    renderClickHeatmap,
-    renderScrollHeatmap,
-    renderAttentionHeatmap,
-    renderAreaMap,
-  ]);
-
-  // Handle element selection
-  const handleCanvasClick = (e: React.MouseEvent<HTMLCanvasElement>) => {
-    if (!canvasRef.current) return;
-
-    const rect = canvasRef.current.getBoundingClientRect();
-    const x = e.clientX - rect.left;
-    const y = e.clientY - rect.top;
-
-    // Find clicked element in heatmap data
-    const clickedPoint = clickPoints.find(
-      (point) => Math.sqrt(Math.pow(point.x - x, 2) + Math.pow(point.y - y, 2)) < 40,
-    );
-
-    if (clickedPoint) {
-      props.selectElement(clickedPoint);
-    }
-  };
-
-  if (!props.isVisible) return null;
-
-  return (
-    <div className="heatmap-renderer">
-      {props.heatmapLoading && (
-        <div className="heatmap-loading">
-          <div className="spinner">Loading heatmap...</div>
-        </div>
-      )}
-
-      {props.showNoHeatmapModal && (
-        <div className="no-heatmap-modal">
-          <div className="modal-content">
-            <h3>No Data Available</h3>
-            <p>There is no {props.panelContent.toLowerCase()} data for this page.</p>
-          </div>
-        </div>
-      )}
-
-      {props.panelContent !== PanelContent.Area && (
-        <canvas
-          ref={canvasRef}
-          className="clarity-heatmap-canvas"
-          id="clarity-heatmap-canvas"
-          onClick={handleCanvasClick}
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            pointerEvents: 'auto',
-            zIndex: 9999,
-          }}
-        />
-      )}
-
-      {props.selectedElement && (
-        <div className="heatmap-element-info">
-          <h4>Selected Element</h4>
-          <p>Clicks: {props.selectedElement.count || props.selectedElement.clicks}</p>
-          {props.selectedElement.elementPath && <p>Path: {props.selectedElement.elementPath}</p>}
-        </div>
-      )}
-    </div>
-  );
-};
-
-// ===== Snapshot Player Component =====
-
-interface SnapshotPlayerProps {
-  isVisible: boolean;
-  mergedPayload: MergedPayload | null;
-  time: number;
-  videoAreaRef: RefObject<HTMLDivElement>;
-  deviceType?: string;
-  refOverride: RefObject<HTMLIFrameElement | null>;
-  impressionHeight?: number;
-  panelContent: PanelContent;
-  width: number;
-  height: number;
-  iframeStyles: React.CSSProperties;
-  elementToShow: string;
-  snapshotStyleClassName?: string;
-  heatmapConfig?: IHeatmapConfig;
-  loadingCallback?: (loading: boolean) => void;
-  snapshotResizeCallback: (width: number, height: number) => void;
-  visualizer: HeatmapVisualizer;
-  areaMapEditKey: string;
-  snapshotLoading?: (loading: boolean) => void;
-  isDead?: boolean;
-}
-
-const SnapshotPlayer: React.FC<SnapshotPlayerProps> = (props) => {
-  const [snapshotHtml, setSnapshotHtml] = useState('');
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    if (!props.mergedPayload) return;
-
-    // Render snapshot from merged payload
-    const html = renderSnapshotFromPayload(props.mergedPayload, props.time);
-    setSnapshotHtml(html);
-    setIsLoading(false);
-    props.snapshotLoading?.(false);
-  }, [props.mergedPayload, props.time]);
-
-  const renderSnapshotFromPayload = (payload: MergedPayload, time: number): string => {
-    // Find the snapshot at the given time
-    // This would use the visualizer to render the DOM state
-    return '<html><body><p>Snapshot rendered here</p></body></html>';
-  };
-
-  useEffect(() => {
-    if (!props.refOverride.current) return;
-
-    const iframe = props.refOverride.current;
-    const doc = iframe.contentDocument;
-
-    if (doc && snapshotHtml) {
-      doc.open();
-      doc.write(snapshotHtml);
-      doc.close();
-
-      // Measure dimensions
-      setTimeout(() => {
-        const width = doc.documentElement.scrollWidth;
-        const height = doc.documentElement.scrollHeight;
-        props.snapshotResizeCallback(width, height);
-      }, 100);
-    }
-  }, [snapshotHtml, props.refOverride]);
-
-  // Highlight element if needed
-  useEffect(() => {
-    if (!props.elementToShow || !props.refOverride.current) return;
-
-    const doc = props.refOverride.current.contentDocument;
-    if (!doc) return;
-
-    const element = doc.querySelector(props.elementToShow);
-    if (element) {
-      element.classList.add('clarity-highlighted');
-      element.scrollIntoView({ behavior: 'smooth', block: 'center' });
-    }
-
-    return () => {
-      if (element) {
-        element.classList.remove('clarity-highlighted');
-      }
-    };
-  }, [props.elementToShow, props.refOverride]);
-
-  return (
-    <iframe
-      ref={props.refOverride}
-      className={`clarity-snapshot ${props.snapshotStyleClassName || ''}`}
-      style={{
-        width: props.width,
-        height: props.height,
-        border: 'none',
-        ...props.iframeStyles,
-      }}
-      title="Session Recording"
-    />
-  );
-};
-
-// ===== Main Component Props =====
-
-interface HeatmapWrapperProps {
-  projectId: string;
-  isVisible: boolean;
-  panelContent: PanelContent;
-  heatmapConfig?: IHeatmapConfig;
-  impressionHeight?: number;
-  deviceType?: string;
-  url?: string;
-  heatmapLoading?: boolean;
-  heatmapErrorType?: ErrorType;
-  videoAreaRef: RefObject<HTMLDivElement>;
-  parentRef: RefObject<HTMLDivElement>;
-  heatmapSidebarRef?: RefObject<HTMLDivElement>;
-  visualizer: Visualizer;
-  heatmapVisualizer: HeatmapVisualizer;
-  areaMapEditKey: string;
-  snapshotStyleClassName?: string;
-  mergedPayload: MergedPayload | null;
-  time: number;
-  loadingCallback?: (loading: boolean) => void;
-  setPanelContent: (content: PanelContent) => void;
-  snapshotLoading?: (loading: boolean) => void;
-  isDead?: boolean;
-}
-
-// ===== Heatmap Wrapper Component =====
-
-const HeatmapWrapper: React.FC<HeatmapWrapperProps> = (props) => {
-  const resizeObserverRef = useRef<ResizeObserver>(null);
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-
-  // State for dimensions and scaling
-  const [containerWidth, setContainerWidth] = useState(1);
-  const [containerHeight, setContainerHeight] = useState(1);
-  const [scaleRatio, setScaleRatio] = useState(1);
-  const [widthScale, setWidthScale] = useState(1);
-  const [heightScale, setHeightScale] = useState(1);
-  const [finalScale, setFinalScale] = useState(1);
-
-  // State for iframe dimensions
-  const [iframeWidth, setIframeWidth] = useState(0);
-  const [iframeHeight, setIframeHeight] = useState(0);
-  const [contentWidth, setContentWidth] = useState(0);
-  const [contentHeight, setContentHeight] = useState(0);
-  const [actualHeight, setActualHeight] = useState(0);
-
-  // Other state
-  const [selectedElement, setSelectedElement] = useState<any>();
-  const [elementToShow, setElementToShow] = useState('');
-  const [showNoHeatmapModal, setShowNoHeatmapModal] = useState(false);
-  const [attentionData, setAttentionData] = useState<any>();
-
-  const isHeatmapView =
-    props.panelContent === PanelContent.Attention ||
-    props.panelContent === PanelContent.Click ||
-    props.panelContent === PanelContent.Area;
-
-  // Update container dimensions
-  const updateDimensions = useCallback(() => {
-    const parent = wrapperRef.current?.parentElement?.parentElement;
-    if (parent) {
-      const width = parent.clientWidth;
-      const height = parent.clientHeight;
-
-      if (iframeWidth !== width) setIframeWidth(width);
-      if (iframeHeight !== height) setIframeHeight(height);
-    }
-  }, [iframeWidth, iframeHeight]);
-
-  // Setup resize listener
-  useEffect(() => {
-    updateDimensions();
-    window.addEventListener('resize', updateDimensions);
-    return () => window.removeEventListener('resize', updateDimensions);
-  }, [updateDimensions]);
-
-  // Handle attention data
-  useEffect(() => {
-    if (
-      props.panelContent === PanelContent.Attention &&
-      props.heatmapConfig?.attentionMapInfo &&
-      props.heatmapConfig.attentionMapInfo.length > 0
-    ) {
-      setAttentionData(props.heatmapVisualizer.attention(props.heatmapConfig.attentionMapInfo));
-    }
-  }, [props.heatmapConfig, props.panelContent, props.heatmapVisualizer]);
-
-  // Setup ResizeObserver for iframe content
-  useEffect(() => {
-    if (typeof window.ResizeObserver !== 'undefined') {
-      resizeObserverRef.current = new ResizeObserver((entries) => {
-        for (const entry of entries) {
-          if (entry.contentRect) {
-            // Update height logic here
-          }
-        }
-      });
-    }
-
-    const iframeBody = iframeRef.current?.contentDocument?.body;
-    if (resizeObserverRef.current && iframeBody) {
-      resizeObserverRef.current.observe(iframeBody);
-      return () => {
-        if (iframeBody) {
-          resizeObserverRef.current?.unobserve(iframeBody);
-        }
-      };
-    }
-  }, [finalScale]);
-
-  // Update actual height from heatmap data
-  useEffect(() => {
-    if (props.heatmapConfig?.height) {
-      setActualHeight(props.heatmapConfig.height);
-    }
-  }, [props.heatmapConfig?.width, props.heatmapConfig?.height]);
-
-  // Calculate scales based on dimensions
-  useEffect(() => {
-    if (iframeWidth > 0 && contentWidth > 0) {
-      setWidthScale(Math.min(iframeWidth / contentWidth, 1));
-      setScaleRatio(Math.min((iframeWidth - 20) / contentWidth, 1));
-    }
-  }, [contentWidth, iframeWidth]);
-
-  useEffect(() => {
-    if (iframeHeight > 0 && contentHeight > 0) {
-      setHeightScale(Math.min((iframeHeight - 20) / contentHeight, 1));
-    }
-  }, [iframeHeight, contentHeight]);
-
-  useEffect(() => {
-    if (scaleRatio > 0 && heightScale > 0) {
-      setFinalScale(Math.min(Math.min(scaleRatio, heightScale), 1));
-    }
-  }, [scaleRatio, heightScale]);
-
-  // Handle heatmap visibility and error states
-  useEffect(() => {
-    if (isHeatmapView) {
-      if (props.impressionHeight && props.videoAreaRef.current) {
-        props.videoAreaRef.current.style.height = `${props.impressionHeight * widthScale}px`;
-      }
-
-      if (props.heatmapLoading || props.heatmapConfig) {
-        if (props.heatmapErrorType === ErrorType.NoResults) {
-          setShowNoHeatmapModal(true);
-        } else if (
-          props.panelContent === PanelContent.Click ||
-          props.panelContent === PanelContent.Area
-        ) {
-          if (props.heatmapErrorType === ErrorType.NoClicks) {
-            setShowNoHeatmapModal(true);
-          } else {
-            setShowNoHeatmapModal(false);
-            if (props.parentRef.current) {
-              props.parentRef.current.style.overflow = '';
-            }
-          }
-        } else if (props.panelContent === PanelContent.Scroll) {
-          if (props.heatmapErrorType === ErrorType.NoScroll) {
-            setShowNoHeatmapModal(true);
-          } else {
-            setShowNoHeatmapModal(false);
-            if (props.parentRef.current) {
-              props.parentRef.current.style.overflow = '';
-            }
-          }
-        }
-      } else {
-        if (props.parentRef.current) {
-          props.parentRef.current.style.overflow = 'hidden';
-        }
-        if (props.heatmapErrorType === ErrorType.NoResults) {
-          setShowNoHeatmapModal(true);
-        }
-      }
-    } else {
-      setShowNoHeatmapModal(false);
-      if (props.videoAreaRef.current?.style) {
-        props.videoAreaRef.current.style.height = '';
-      }
-    }
-  }, [
-    isHeatmapView,
-    widthScale,
-    props.impressionHeight,
-    props.heatmapConfig,
-    props.heatmapErrorType,
-    props.panelContent,
-    props.heatmapLoading,
-  ]);
-
-  const handleSnapshotResize = useCallback(
-    (width: number, height: number) => {
-      if (width !== contentWidth) setContentWidth(width);
-      if (height !== contentHeight) setContentHeight(height);
-    },
-    [contentWidth, contentHeight],
-  );
-
-  return (
-    <div
-      className={isHeatmapView ? 'heatmap-wrapper' : 'session-wrapper'}
-      style={
-        isHeatmapView
-          ? {
-              width: contentWidth,
-              height: props.impressionHeight,
-              transform: `scale(${widthScale})`,
-              transformOrigin: 'center',
-            }
-          : {
-              height: contentHeight * finalScale,
-              maxWidth: contentWidth * finalScale,
-            }
-      }
-      ref={wrapperRef}
-    >
-      {/* Cover overlay for certain views */}
-      {(props.panelContent === PanelContent.Sessions ||
-        props.panelContent === PanelContent.Timeline) && <div className="cover" />}
-
-      <HeatmapRenderer
-        projectId={props.projectId}
-        isVisible={isHeatmapView}
-        panelContent={props.panelContent}
-        widthScale={widthScale}
-        height={iframeHeight / widthScale}
-        iframeHeight={actualHeight}
-        heatmapConfig={props.heatmapConfig}
-        selectedElement={selectedElement}
-        heatmapLoading={!!props.heatmapLoading}
-        showNoHeatmapModal={showNoHeatmapModal}
-        deviceType={props.deviceType}
-        recordingUrl={props.url}
-        iframeRef={iframeRef}
-        heatmapWrapperRef={wrapperRef}
-        parentRef={props.parentRef}
-        heatmapSidebarRef={props.heatmapSidebarRef}
-        selectElement={setSelectedElement}
-        setIframeHeight={setActualHeight}
-        setElementToShow={setElementToShow}
-        heatmapVisualizer={props.heatmapVisualizer}
-        areaMapEditKey={props.areaMapEditKey}
-        attentionAggregatedData={attentionData}
-        setPanelContent={props.setPanelContent}
-      />
-
-      <SnapshotPlayer
-        isVisible={props.isVisible}
-        mergedPayload={props.mergedPayload}
-        time={props.time}
-        videoAreaRef={props.videoAreaRef}
-        deviceType={props.deviceType}
-        refOverride={iframeRef}
-        impressionHeight={props.impressionHeight}
-        panelContent={props.panelContent}
-        width={contentWidth}
-        height={isHeatmapView ? iframeHeight / widthScale : contentHeight}
-        iframeStyles={
-          isHeatmapView
-            ? {}
-            : {
-                transform: `scale(${finalScale})`,
-                transformOrigin: '0 0',
-              }
-        }
-        elementToShow={elementToShow}
-        snapshotStyleClassName={
-          showNoHeatmapModal ? 'deadSessionSnapshot' : props.snapshotStyleClassName
-        }
-        heatmapConfig={props.heatmapConfig}
-        loadingCallback={props.loadingCallback}
-        snapshotResizeCallback={handleSnapshotResize}
-        visualizer={props.heatmapVisualizer}
-        areaMapEditKey={props.areaMapEditKey}
-        snapshotLoading={props.snapshotLoading}
-        isDead={props.isDead}
-      />
-    </div>
-  );
-};
-
-// ===== Impression Player Component (Class Component) =====
-
-interface ImpressionPlayerProps {
-  loading: boolean;
-  projectId: string;
-  isVisible: boolean;
-  data?: any[];
-  pageUrl?: string;
-  timestamp?: number;
-  visualizer: Visualizer;
-  heatmapVisualizer: HeatmapVisualizer;
-  time: number;
-  parentRef: RefObject<HTMLDivElement>;
-  videoAreaRef: RefObject<HTMLDivElement>;
-  impressionData?: ImpressionData;
-  panelContent: PanelContent;
-  heatmapInfo?: IHeatmapConfig;
-  heatmapLoading?: boolean;
-  heatmapError?: any;
-  heatmapErrorType?: ErrorType;
-  snapshotStyleClassName?: string;
-  heatmapSidebarRef?: RefObject<HTMLDivElement>;
-  deviceType?: string;
-  url?: string;
-  sessionId: string;
-  userId: string;
-  pageNum: string;
-  areaMapEditKey?: string;
-  skipInactivity?: boolean;
-  isPlaying?: boolean;
-  timeChange: (time: number) => void;
-  loadingCallback?: (loading: boolean) => void;
-  latencyTrackerStart?: () => void;
-  latencyTrackerEnd?: () => void;
-  timelineInfo?: { timeline: TimelineItem[] };
-  setFailedToFetchImpression?: (pageNum: number) => void;
-  error?: any;
-  errorType?: ErrorType;
-  isLive?: boolean;
-  setPanelContent: (content: PanelContent) => void;
-  isDead?: boolean;
-  classRef?: RefObject<ImpressionPlayer>;
-}
-
-interface ImpressionPlayerState {
-  mergedPayload: MergedPayload | null;
-  activeDurations: ActiveDuration[];
-  snapshotRendered: boolean;
-}
-
-class ImpressionPlayer extends Component<ImpressionPlayerProps, ImpressionPlayerState> {
-  private componentName = 'ImpressionPlayer';
-  private goToEnd = false;
-  private timeLineUpdateCb?: () => void;
-
-  constructor(props: ImpressionPlayerProps) {
-    super(props);
-
-    this.state = {
-      mergedPayload: null,
-      activeDurations: [],
-      snapshotRendered: false,
-    };
-
-    if (props.classRef) {
-      (props.classRef as any).current = this;
-    }
-  }
-
-  componentDidMount(): void {
-    this.process();
-  }
-
-  componentDidUpdate(prevProps: ImpressionPlayerProps, prevState: ImpressionPlayerState): void {
-    this.process(prevProps.data);
-    this.goToActiveTime();
-
-    if (prevProps.loading || !this.props.loading || this.props.isLive) {
-      this.setSnapshotLoading(true);
-    }
-
-    if (prevState.activeDurations !== this.state.activeDurations && this.timeLineUpdateCb) {
-      this.timeLineUpdateCb();
-      this.timeLineUpdateCb = undefined;
-    }
-
-    if (
-      prevState.snapshotRendered !== this.state.snapshotRendered ||
-      prevState.mergedPayload?.events?.length !== this.state.mergedPayload?.events?.length
-    ) {
-      this.props.loadingCallback?.(!this.state.snapshotRendered || !this.isProcessed());
-    }
-
-    if (this.props.error) {
-      this.handleImpressionFetchError();
-    }
-  }
-
-  private process = (prevData?: any[]): void => {
-    if (
-      this.props.data &&
-      (!this.state.mergedPayload ||
-        (Array.isArray(prevData) && this.props.data.length !== prevData?.length))
-    ) {
-      this.props.latencyTrackerStart?.();
-
-      let data = this.props.data;
-      // Filter logic if needed based on pageUrl and timestamp
-
-      const merged = this.props.visualizer.merge(data);
-
-      this.setState({
-        mergedPayload: merged,
-        activeDurations: this.calculateActiveDurations(merged.events),
-      });
-
-      this.props.latencyTrackerEnd?.();
-    }
-  };
-
-  private calculateActiveDurations = (events: any[]): ActiveDuration[] => {
-    // Implementation to calculate active durations from events
-    return [];
-  };
-
-  private isProcessed = (): boolean => {
-    return !!(
-      this.state.mergedPayload &&
-      this.state.mergedPayload.events &&
-      this.state.mergedPayload.events.length > 0
-    );
-  };
-
-  private handleImpressionFetchError = (): void => {
-    if (!this.props.timelineInfo) return;
-
-    this.props.loadingCallback?.(false);
-
-    const currentPage = this.props.timelineInfo.timeline[parseInt(this.props.pageNum)];
-
-    if (currentPage && !currentPage.failedToFetch && this.props.impressionData) {
-      this.props.setFailedToFetchImpression?.(parseInt(this.props.pageNum));
-
-      const newTime =
-        this.props.time +
-        Math.max(
-          0.8 * this.props.impressionData.duration!,
-          this.props.impressionData.duration! - 3000,
-        );
-
-      this.props.timeChange(newTime);
-    }
-  };
-
-  private getNextActiveTime = (currentTime: number, callback?: () => void): number => {
-    if (this.state.activeDurations && this.state.activeDurations.length > 0) {
-      for (let i = 0; i < this.state.activeDurations.length; i++) {
-        if (currentTime < this.state.activeDurations[i].startTime) {
-          if (this.state.activeDurations[i].active) {
-            return this.state.activeDurations[i].startTime;
-          } else if (i < this.state.activeDurations.length - 1) {
-            return this.state.activeDurations[i + 1].startTime;
-          } else {
-            return this.state.activeDurations[i].startTime + this.state.activeDurations[i].duration;
-          }
-        }
-      }
-      this.timeLineUpdateCb = callback;
-    }
-    return currentTime;
-  };
-
-  private goToActiveTime = (): void => {
-    if (this.props.skipInactivity && !this.props.isLive) {
-      let index = 0;
-      let found = false;
-
-      while (index < this.state.activeDurations.length) {
-        if (this.props.time < this.state.activeDurations[index].startTime) {
-          found = true;
-          break;
-        }
-        index++;
-      }
-
-      if (this.state.activeDurations && this.state.activeDurations.length > 0) {
-        if (index > 0 && found && !this.state.activeDurations[index - 1].active) {
-          this.goToEnd = false;
-          this.props.timeChange(this.state.activeDurations[index].startTime);
-        } else if (
-          index !== this.state.activeDurations.length ||
-          this.state.activeDurations[index - 1].active ||
-          this.goToEnd
-        ) {
-          if (this.goToEnd) {
-            this.goToEnd = false;
-          }
-        } else {
-          this.goToEnd = true;
-          this.props.timeChange(
-            this.state.activeDurations[index - 1].startTime +
-              this.state.activeDurations[index - 1].duration,
-          );
-        }
-      }
-    }
-  };
-
-  private setSnapshotLoading = (loading: boolean): void => {
-    this.setState({
-      snapshotRendered: !loading,
-    });
-  };
-
-  render() {
-    if (!this.isProcessed()) {
-      if (this.props.error) {
-        return <div className="error-message">Error loading impression</div>;
-      }
-      return <div className="loadingCentered">Loading...</div>;
-    }
-
-    return (
-      <>
-        {!this.state.snapshotRendered && <div className="loadingCentered">Loading snapshot...</div>}
-        <HeatmapWrapper
-          projectId={this.props.projectId}
-          isVisible={this.props.isVisible}
-          loadingCallback={this.props.loadingCallback}
-          mergedPayload={this.state.mergedPayload}
-          time={this.props.time}
-          parentRef={this.props.parentRef}
-          videoAreaRef={this.props.videoAreaRef}
-          impressionHeight={this.props.impressionData?.documentHeight}
-          panelContent={this.props.panelContent}
-          heatmapConfig={this.props.heatmapInfo}
-          heatmapLoading={this.props.heatmapLoading}
-          heatmapErrorType={this.props.heatmapErrorType}
-          snapshotStyleClassName={this.props.snapshotStyleClassName}
-          heatmapSidebarRef={this.props.heatmapSidebarRef}
-          deviceType={this.props.impressionData?.device}
-          url={this.props.impressionData?.url}
-          visualizer={this.props.visualizer}
-          heatmapVisualizer={this.props.heatmapVisualizer}
-          areaMapEditKey={`${this.props.projectId}${this.props.sessionId}${this.props.userId}${this.props.pageNum}${this.props.impressionData?.url}`}
-          snapshotLoading={this.setSnapshotLoading}
-          setPanelContent={this.props.setPanelContent}
-          isDead={this.props.isDead}
-        />
-      </>
-    );
-  }
-}
-
-export default ImpressionPlayer;