@gemx-dev/heatmap-react 3.5.21 → 3.5.23

package/src/components/VizDom/ReplayControls.tsx

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,87 @@
+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

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

package/src/components/VizElement/ClickedElementOverlay.tsx

@@ -0,0 +1,65 @@
+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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,337 @@
+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);
+};