@gemx-dev/heatmap-react 3.5.23 → 3.5.25

package/src/components/VizDom/ReplayControls.tsx

@@ -1,48 +0,0 @@
-import { useReplayRender } from '../../hooks/viz-render/useReplayRender';
-
-export const ReplayControls: React.FC = () => {
-  const replayResult = useReplayRender();
-
-  return (
-    <div
-      style={{
-        position: 'absolute',
-        bottom: 20,
-        left: '50%',
-        transform: 'translateX(-50%)',
-        display: 'flex',
-        gap: 10,
-        backgroundColor: 'rgba(0, 0, 0, 0.7)',
-        padding: '10px 20px',
-        borderRadius: 8,
-      }}
-    >
-      <button
-        onClick={replayResult.play}
-        style={{
-          padding: '8px 16px',
-          backgroundColor: '#4CAF50',
-          color: 'white',
-          border: 'none',
-          borderRadius: 4,
-          cursor: 'pointer',
-        }}
-      >
-        Play
-      </button>
-      <button
-        onClick={replayResult.pause}
-        style={{
-          padding: '8px 16px',
-          backgroundColor: '#f44336',
-          color: 'white',
-          border: 'none',
-          borderRadius: 4,
-          cursor: 'pointer',
-        }}
-      >
-        Pause
-      </button>
-    </div>
-  );
-};

package/src/components/VizDom/VizDomContainer.tsx

@@ -1,25 +0,0 @@
-import { BoxStack } from '../../ui';
-import { VizDomRenderer } from './VizDomRenderer';
-
-export const VizDomContainer: React.FC = () => {
-  return (
-    <BoxStack id="gx-hm-viz-container" flexDirection="column" flex="1 1 auto" overflow="auto">
-      <BoxStack
-        id="gx-hm-content"
-        flexDirection="column"
-        flex="1 1 auto"
-        overflow="hidden"
-        style={{
-          // margin: '0px 16px 0px 12px',
-          // borderRadius: '8px 8px 0 0',
-          // borderRadius: '8px',
-          minWidth: '394px',
-          padding: '12px',
-          background: '#f1f1f1',
-        }}
-      >
-        <VizDomRenderer />
-      </BoxStack>
-    </BoxStack>
-  );
-};

package/src/components/VizDom/VizDomRenderer.tsx

@@ -1,87 +0,0 @@
-import { useRef } from 'react';
-import { HEATMAP_CONFIG, HEATMAP_IFRAME, HEATMAP_STYLE } from '../../configs';
-import { useHeatmapScale, useHeatmapVizRender } from '../../hooks';
-import { useHeatmapDataStore } from '../../stores';
-import { VizElements } from '../VizElement';
-import { ReplayControls } from './ReplayControls';
-
-interface VizDomRendererProps {
-  mode?: 'heatmap' | 'replay';
-}
-
-export const VizDomRenderer: React.FC<VizDomRendererProps> = ({ mode = 'heatmap' }) => {
-  const config = useHeatmapDataStore((state) => state.config);
-
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const visualRef = useRef<HTMLDivElement>(null);
-
-  const { iframeRef } = useHeatmapVizRender(mode);
-  const { contentWidth, iframeHeight, scale, scaledHeight, handleScroll } = useHeatmapScale({
-    wrapperRef,
-    iframeRef,
-    config,
-  });
-
-  const onScroll = (e: React.UIEvent<HTMLDivElement>) => {
-    const scrollTop = e.currentTarget.scrollTop;
-    handleScroll(scrollTop);
-  };
-
-  return (
-    <div
-      ref={visualRef}
-      className="gx-hm-visual"
-      onScroll={onScroll}
-      style={{
-        overflow: 'hidden auto',
-        display: 'flex',
-        position: 'relative',
-        justifyContent: 'center',
-        flex: 1,
-        backgroundColor: '#fff',
-        // borderRadius: '8px',
-      }}
-    >
-      <div
-        className="gx-hm-visual-unscaled"
-        style={{
-          width: '100%',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'flex-start',
-          height: scaledHeight > 0 ? `${scaledHeight + HEATMAP_CONFIG['paddingBlock']}px` : 'auto',
-          padding: HEATMAP_STYLE['wrapper']['padding'],
-        }}
-      >
-        <div
-          className="gx-hm-wrapper"
-          ref={wrapperRef}
-          style={{
-            width: contentWidth,
-            height: iframeHeight,
-            transform: `scale(${scale})`,
-            transformOrigin: 'top center',
-          }}
-        >
-          <VizElements
-            width={contentWidth}
-            height={iframeHeight}
-            widthScale={scale}
-            iframeRef={iframeRef}
-            wrapperRef={wrapperRef as React.RefObject<HTMLDivElement>}
-          />
-          <iframe
-            // key={iframeKey}
-            ref={iframeRef}
-            {...HEATMAP_IFRAME}
-            width={contentWidth}
-            height={iframeHeight}
-            scrolling="no"
-          />
-        </div>
-      </div>
-
-      {mode === 'replay' && <ReplayControls />}
-    </div>
-  );
-};

package/src/components/VizDom/index.ts

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

package/src/components/VizElement/ClickedElementOverlay.tsx

@@ -1,65 +0,0 @@
-import type { ElementInfo } from '../../types';
-
-import React, { Fragment } from 'react';
-import { ElementCallout } from './ElementCallout';
-import { RankBadge } from './RankBadge';
-
-interface Props {
-  element: ElementInfo | null;
-  shouldShowCallout: boolean;
-  isSecondary?: boolean;
-  targetId: string;
-  totalClicks?: number;
-  isRecordingView?: boolean;
-  isCompareMode?: boolean;
-  deviceType?: string;
-  heatmapType?: string;
-  widthScale: number;
-}
-
-export const ClickedElementOverlay: React.FC<Props> = ({
-  element,
-  shouldShowCallout,
-  isSecondary,
-  targetId,
-  totalClicks = 1,
-  isRecordingView,
-  isCompareMode,
-  deviceType,
-  heatmapType,
-  widthScale,
-}) => {
-  if (!element || (element.width === 0 && element.height === 0)) return null;
-
-  return (
-    <Fragment>
-      {/* Overlay highlight */}
-      <div
-        className="heatmapElement"
-        id={targetId}
-        style={{
-          top: element.top,
-          left: element.left,
-          width: element.width,
-          height: element.height,
-        }}
-      />
-
-      <RankBadge index={element.rank} elementRect={element} widthScale={widthScale} />
-
-      {shouldShowCallout && (
-        <ElementCallout
-          element={element}
-          target={`#${targetId}`}
-          totalClicks={totalClicks}
-          isSecondary={isSecondary}
-          isRecordingView={isRecordingView}
-          isCompareMode={isCompareMode}
-          deviceType={deviceType}
-          heatmapType={heatmapType}
-          widthScale={widthScale}
-        />
-      )}
-    </Fragment>
-  );
-};

package/src/components/VizElement/DefaultRankBadges.tsx

@@ -1,33 +0,0 @@
-import type { ElementRect, HeatmapElement } from '../../types';
-
-import React from 'react';
-import { RankBadge } from './RankBadge';
-
-interface Props {
-  elements: HeatmapElement[];
-  getRect: (el?: HeatmapElement) => ElementRect | null;
-  widthScale: number;
-  hidden?: boolean;
-}
-
-export const DefaultRankBadges: React.FC<Props> = ({ elements, getRect, widthScale, hidden }) => {
-  if (hidden || elements.length === 0) return null;
-
-  return (
-    <>
-      {elements.map((element, index) => {
-        const rect = getRect(element);
-        if (!rect) return null;
-
-        return (
-          <RankBadge
-            key={element.hash}
-            index={index + 1}
-            elementRect={rect}
-            widthScale={widthScale}
-          />
-        );
-      })}
-    </>
-  );
-};

package/src/components/VizElement/ElementCallout.tsx

@@ -1,337 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { formatPercentage, getSimpleSelector } from '../../helpers/viz-elements';
-import { ElementInfo } from '../../types';
-
-interface ElementCalloutProps {
-  element: ElementInfo;
-  target: string;
-  totalClicks: number;
-  isSecondary?: boolean;
-  isRecordingView?: boolean;
-  isCompareMode?: boolean;
-  deviceType?: string;
-  heatmapType?: string;
-  language?: string;
-  widthScale?: number;
-  parentRef?: React.RefObject<HTMLElement>;
-}
-
-type CalloutPosition = 'top' | 'bottom' | 'left' | 'right';
-
-export const ElementCallout: React.FC<ElementCalloutProps> = ({
-  element,
-  target,
-  totalClicks,
-  isSecondary,
-  isRecordingView,
-  isCompareMode,
-  deviceType,
-  heatmapType,
-  language,
-  widthScale,
-  parentRef,
-}) => {
-  const calloutRef = useRef<HTMLDivElement>(null);
-  const [position, setPosition] = useState<{
-    top: number;
-    left: number;
-    placement: CalloutPosition;
-  }>({
-    top: 0,
-    left: 0,
-    placement: 'top',
-  });
-
-  const percentage = formatPercentage(((element.clicks ?? 0) / totalClicks) * 100, 2);
-
-  // Calculate callout position
-  useEffect(() => {
-    const targetElement = document.querySelector(target);
-    const calloutElement = calloutRef.current;
-
-    if (!targetElement || !calloutElement) return;
-
-    const calculatePosition = () => {
-      const targetRect = targetElement.getBoundingClientRect();
-      const calloutRect = calloutElement.getBoundingClientRect();
-      const viewportWidth = window.innerWidth;
-      const viewportHeight = window.innerHeight;
-      const padding = 12; // Space between target and callout
-      const arrowSize = 8;
-
-      let top = 0;
-      let left = 0;
-      let placement: CalloutPosition = 'top';
-
-      // Try positions in order: top, bottom, right, left
-      const positions: Array<{
-        placement: CalloutPosition;
-        top: number;
-        left: number;
-        valid: boolean;
-      }> = [
-        // Top
-        {
-          placement: 'top',
-          top: targetRect.top - calloutRect.height - padding - arrowSize,
-          left: targetRect.left + targetRect.width / 2 - calloutRect.width / 2,
-          valid: targetRect.top - calloutRect.height - padding - arrowSize > 0,
-        },
-        // Bottom
-        {
-          placement: 'bottom',
-          top: targetRect.bottom + padding + arrowSize,
-          left: targetRect.left + targetRect.width / 2 - calloutRect.width / 2,
-          valid: targetRect.bottom + calloutRect.height + padding + arrowSize < viewportHeight,
-        },
-        // Right
-        {
-          placement: 'right',
-          top: targetRect.top + targetRect.height / 2 - calloutRect.height / 2,
-          left: targetRect.right + padding + arrowSize,
-          valid: targetRect.right + calloutRect.width + padding + arrowSize < viewportWidth,
-        },
-        // Left
-        {
-          placement: 'left',
-          top: targetRect.top + targetRect.height / 2 - calloutRect.height / 2,
-          left: targetRect.left - calloutRect.width - padding - arrowSize,
-          valid: targetRect.left - calloutRect.width - padding - arrowSize > 0,
-        },
-      ];
-
-      // Find first valid position
-      const validPosition = positions.find((p) => p.valid) || positions[0];
-
-      top = validPosition.top;
-      left = validPosition.left;
-      placement = validPosition.placement;
-
-      // Keep within viewport bounds
-      left = Math.max(padding, Math.min(left, viewportWidth - calloutRect.width - padding));
-      top = Math.max(padding, Math.min(top, viewportHeight - calloutRect.height - padding));
-
-      setPosition({ top, left, placement });
-    };
-
-    // Initial calculation
-    calculatePosition();
-
-    // Recalculate on scroll/resize
-    const handleUpdate = () => {
-      requestAnimationFrame(calculatePosition);
-    };
-
-    window.addEventListener('scroll', handleUpdate, true);
-    window.addEventListener('resize', handleUpdate);
-    parentRef?.current?.addEventListener('scroll', handleUpdate);
-
-    return () => {
-      window.removeEventListener('scroll', handleUpdate, true);
-      window.removeEventListener('resize', handleUpdate);
-      parentRef?.current?.removeEventListener('scroll', handleUpdate);
-    };
-  }, [target, parentRef]);
-
-  const calloutContent = (
-    <div
-      ref={calloutRef}
-      className={`clarity-callout clarity-callout--${position.placement} ${isSecondary ? 'clarity-callout--secondary' : ''}`}
-      style={{
-        position: 'fixed',
-        top: position.top,
-        left: position.left,
-        zIndex: 2147483647,
-      }}
-      aria-live="assertive"
-      role="tooltip"
-    >
-      {/* Arrow */}
-      <div className="clarity-callout__arrow" />
-
-      {/* Content */}
-      <div className="clarity-callout__content">
-        {/* Rank Badge */}
-        <div className="clarity-callout__rank">{element.rank}</div>
-
-        {/* Stats */}
-        <div className="clarity-callout__stats">
-          <div className="clarity-callout__label">Clicks</div>
-          <div className="clarity-callout__value">
-            <span className="clarity-callout__count">
-              {element.clicks?.toLocaleString(language)}
-            </span>
-            <span className="clarity-callout__percentage">({percentage}%)</span>
-          </div>
-        </div>
-
-        {/* Action Button */}
-        {!isRecordingView && !isCompareMode && (
-          <button
-            className="clarity-callout__button"
-            data-clarity-id="viewRecordingClickedFromHeatmapIframe"
-            data-element-hash={element.hash}
-            data-selector={getSimpleSelector(element.selector)}
-            data-device-type={deviceType}
-            data-heatmap-type={heatmapType}
-          >
-            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-              <path d="M5 3L11 8L5 13V3Z" fill="currentColor" />
-            </svg>
-            View Recording
-          </button>
-        )}
-      </div>
-
-      {/* Inline Styles */}
-      <style>{`
-        .clarity-callout {
-          background: white;
-          border-radius: 8px;
-          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-          padding: 16px;
-          min-width: 200px;
-          max-width: 280px;
-          animation: clarity-callout-fade-in 0.2s ease-out;
-          pointer-events: auto;
-        }
-
-        @keyframes clarity-callout-fade-in {
-          from {
-            opacity: 0;
-            transform: scale(0.95);
-          }
-          to {
-            opacity: 1;
-            transform: scale(1);
-          }
-        }
-
-        .clarity-callout__arrow {
-          position: absolute;
-          width: 16px;
-          height: 16px;
-          background: white;
-          transform: rotate(45deg);
-        }
-
-        /* Arrow positions */
-        .clarity-callout--top .clarity-callout__arrow {
-          bottom: -8px;
-          left: 50%;
-          margin-left: -8px;
-          box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
-        }
-
-        .clarity-callout--bottom .clarity-callout__arrow {
-          top: -8px;
-          left: 50%;
-          margin-left: -8px;
-          box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.1);
-        }
-
-        .clarity-callout--left .clarity-callout__arrow {
-          right: -8px;
-          top: 50%;
-          margin-top: -8px;
-          box-shadow: 2px -2px 4px rgba(0, 0, 0, 0.1);
-        }
-
-        .clarity-callout--right .clarity-callout__arrow {
-          left: -8px;
-          top: 50%;
-          margin-top: -8px;
-          box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.1);
-        }
-
-        .clarity-callout__content {
-          position: relative;
-          z-index: 1;
-        }
-
-        .clarity-callout__rank {
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          width: 32px;
-          height: 32px;
-          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-          color: white;
-          border-radius: 8px;
-          font-weight: 600;
-          font-size: 16px;
-          margin-bottom: 12px;
-        }
-
-        .clarity-callout--secondary .clarity-callout__rank {
-          background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-        }
-
-        .clarity-callout__stats {
-          margin-bottom: 12px;
-        }
-
-        .clarity-callout__label {
-          font-size: 12px;
-          color: #6b7280;
-          margin-bottom: 4px;
-          font-weight: 500;
-        }
-
-        .clarity-callout__value {
-          display: flex;
-          align-items: baseline;
-          gap: 6px;
-        }
-
-        .clarity-callout__count {
-          font-size: 20px;
-          font-weight: 700;
-          color: #111827;
-        }
-
-        .clarity-callout__percentage {
-          font-size: 14px;
-          color: #6b7280;
-          font-weight: 500;
-        }
-
-        .clarity-callout__button {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          gap: 6px;
-          width: 100%;
-          padding: 8px 12px;
-          background: #667eea;
-          color: white;
-          border: none;
-          border-radius: 6px;
-          font-size: 13px;
-          font-weight: 600;
-          cursor: pointer;
-          transition: all 0.2s;
-        }
-
-        .clarity-callout__button:hover {
-          background: #5568d3;
-          transform: translateY(-1px);
-          box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
-        }
-
-        .clarity-callout__button:active {
-          transform: translateY(0);
-        }
-
-        .clarity-callout__button svg {
-          width: 14px;
-          height: 14px;
-        }
-      `}</style>
-    </div>
-  );
-
-  // Render to body using Portal
-  return createPortal(calloutContent, document.body);
-};