@gemx-dev/heatmap-react 3.5.46 → 3.5.47

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/VizContainer.tsx

@@ -1,40 +0,0 @@
-import { useRef } from 'react';
-import { useWrapperRefHeight } from '../../hooks';
-import { BoxStack } from '../../ui';
-
-interface VizContainerProps {
-  children: React.ReactNode;
-  setWrapperHeight?: (height: number) => void;
-}
-
-export const VizContainer: React.FC<VizContainerProps> = ({ children, setWrapperHeight }) => {
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  useWrapperRefHeight({
-    isActive: !!setWrapperHeight,
-    wrapperRef,
-    setWrapperHeight,
-  });
-
-  return (
-    <BoxStack
-      ref={wrapperRef}
-      id="gx-hm-viz-container"
-      flexDirection="column"
-      flex="1 1 auto"
-      overflow="auto"
-      zIndex={1}
-    >
-      <BoxStack
-        id="gx-hm-content"
-        flexDirection="column"
-        flex="1 1 auto"
-        overflow="hidden"
-        style={{
-          minWidth: '394px',
-        }}
-      >
-        {children}
-      </BoxStack>
-    </BoxStack>
-  );
-};

package/src/components/VizDom/VizDomHeatmap.tsx

@@ -1,28 +0,0 @@
-import { useEffect } from 'react';
-import { useHeatmapControlStore, useHeatmapDataStore, useHeatmapSingleStore } from '../../stores';
-import { VizContainer } from './VizContainer';
-import { VizDomRenderer } from './VizDomRenderer';
-import { VizLoading } from './VizLoading';
-
-export const VizDomHeatmap: React.FC = () => {
-  const controls = useHeatmapControlStore((state) => state.controls);
-  const isRendering = useHeatmapDataStore((state) => state.isRendering);
-  const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
-  const setIframeHeight = useHeatmapSingleStore((state) => state.setIframeHeight);
-  const setVizRef = useHeatmapSingleStore((state) => state.setVizRef);
-
-  useEffect(() => {
-    return () => {
-      setVizRef(null);
-      setIframeHeight(0);
-    };
-  }, []);
-
-  if (isRendering) return controls.VizLoading ?? null;
-  return (
-    <VizContainer>
-      <VizDomRenderer />
-      {iframeHeight === 0 && <VizLoading />}
-    </VizContainer>
-  );
-};

package/src/components/VizDom/VizDomRenderer.tsx

@@ -1,82 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { HEATMAP_IFRAME } from '../../configs';
-import { useHeatmapScale, useHeatmapVizRender } from '../../hooks';
-import { useHeatmapCanvas } from '../../hooks/viz-canvas';
-import {
-  useHeatmapConfigStore,
-  useHeatmapInteractionStore,
-  useHeatmapSingleStore,
-} from '../../stores';
-import { IHeatmapType } from '../../types';
-import { VizElements } from '../VizElement';
-import { VizScrollMap } from '../VizScrollmap/VizScrollMap';
-import { WrapperVisual } from './WrapperVisual';
-
-interface VizDomRendererProps {
-  mode?: 'heatmap' | 'replay';
-}
-
-export const VizDomRenderer: React.FC<VizDomRendererProps> = ({ mode = 'heatmap' }) => {
-  const width = useHeatmapConfigStore((state) => state.width);
-  const heatmapType = useHeatmapConfigStore((state) => state.heatmapType);
-  const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
-  const setIframeHeight = useHeatmapSingleStore((state) => state.setIframeHeight);
-  const setSelectedElement = useHeatmapInteractionStore((state) => state.setSelectedElement);
-
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const visualRef = useRef<HTMLDivElement>(null);
-
-  const { iframeRef } = useHeatmapVizRender(mode);
-  const { scaledHeight, handleScroll } = useHeatmapScale({
-    wrapperRef,
-    iframeRef,
-    visualRef,
-    iframeHeight,
-  });
-
-  const contentWidth = width ?? 0;
-
-  const onScroll = (e: React.UIEvent<HTMLDivElement>) => {
-    const scrollTop = e.currentTarget.scrollTop;
-    handleScroll(scrollTop);
-  };
-
-  useHeatmapCanvas({ iframeRef: iframeRef as React.RefObject<HTMLIFrameElement> });
-
-  const cleanUp = () => {
-    setIframeHeight(0);
-    setSelectedElement(null);
-  };
-
-  useEffect(() => {
-    return cleanUp;
-  }, []);
-  return (
-    <WrapperVisual
-      visualRef={visualRef}
-      wrapperRef={wrapperRef}
-      scaledHeight={scaledHeight}
-      onScroll={onScroll}
-      iframeHeight={iframeHeight}
-    >
-      {heatmapType === IHeatmapType.Click && (
-        <VizElements
-          iframeRef={iframeRef}
-          visualRef={visualRef as React.RefObject<HTMLDivElement>}
-          wrapperRef={wrapperRef as React.RefObject<HTMLDivElement>}
-        />
-      )}
-      <iframe
-        ref={iframeRef as React.RefObject<HTMLIFrameElement>}
-        {...HEATMAP_IFRAME}
-        width={contentWidth}
-        scrolling="no"
-      />
-
-      <VizScrollMap
-        iframeRef={iframeRef as React.RefObject<HTMLIFrameElement>}
-        wrapperRef={visualRef as React.RefObject<HTMLDivElement>}
-      />
-    </WrapperVisual>
-  );
-};

package/src/components/VizDom/VizLoading.tsx

@@ -1,8 +0,0 @@
-export const VizLoading: React.FC = () => {
-  return (
-    <div className="gx-hm-loading">
-      <div className="gx-hm-loading--spinner" />
-      <p className="gx-hm-loading--text">Loading visualization...</p>
-    </div>
-  );
-};

package/src/components/VizDom/WrapperVisual.tsx

@@ -1,73 +0,0 @@
-import { HEATMAP_CONFIG, HEATMAP_STYLE } from '../../configs';
-import { useHeatmapConfigStore, useHeatmapVizStore } from '../../stores';
-
-interface WrapperVisualProps {
-  children?: React.ReactNode;
-  visualRef: React.RefObject<HTMLDivElement>;
-  wrapperRef: React.RefObject<HTMLDivElement>;
-  scaledHeight: number;
-  iframeHeight: number;
-  onScroll: (e: React.UIEvent<HTMLDivElement>) => void;
-}
-
-export const WrapperVisual: React.FC<WrapperVisualProps> = ({
-  children,
-  visualRef,
-  wrapperRef,
-  scaledHeight,
-  iframeHeight,
-  onScroll,
-}) => {
-  const contentWidth = useHeatmapConfigStore((state) => state.width);
-  const widthScale = useHeatmapVizStore((state) => state.scale);
-
-  const contentHeight =
-    scaledHeight > 0
-      ? `${scaledHeight + HEATMAP_CONFIG['heightToolbar'] + HEATMAP_CONFIG['padding'] * 2}px`
-      : 'auto';
-
-  return (
-    <div
-      ref={visualRef}
-      className="gx-hm-visual"
-      onScroll={onScroll}
-      style={{
-        overflow: 'hidden auto',
-        display: 'flex',
-        position: 'relative',
-        justifyContent: 'center',
-        flex: 1,
-        // paddingBottom: HEATMAP_STYLE['viz']['paddingBottom'],
-        background: '#fff',
-      }}
-    >
-      <div
-        className="gx-hm-visual-unscaled"
-        style={{
-          width: '100%',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'flex-start',
-          height: contentHeight,
-          padding: HEATMAP_STYLE['wrapper']['padding'],
-          paddingBottom: HEATMAP_STYLE['viz']['paddingBottom'],
-          background: HEATMAP_STYLE['viz']['background'],
-        }}
-      >
-        <div
-          className="gx-hm-wrapper"
-          ref={wrapperRef}
-          style={{
-            width: contentWidth,
-            height: iframeHeight,
-            transform: `scale(${widthScale})`,
-            transformOrigin: 'top center',
-            paddingBlockEnd: '0',
-          }}
-        >
-          {children}
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/components/VizDom/index.ts

@@ -1,5 +0,0 @@
-export * from './VizContainer';
-export * from './VizDomHeatmap';
-export * from './VizLoading';
-
-export * from './WrapperVisual';

package/src/components/VizElement/DefaultRankBadges.tsx

@@ -1,36 +0,0 @@
-import type { ElementRect, HeatmapElement } from '../../types';
-
-import { useHeatmapDataStore, useHeatmapVizStore } from '../../stores';
-import { RankBadge } from './RankBadge';
-
-const NUMBER_OF_TOP_ELEMENTS = 10;
-interface Props {
-  getRect: (el?: HeatmapElement) => ElementRect | null;
-  hidden?: boolean;
-}
-
-export const DefaultRankBadges: React.FC<Props> = ({ getRect, hidden }) => {
-  const heatmapInfo = useHeatmapDataStore((state) => state.dataInfo);
-  const widthScale = useHeatmapVizStore((state) => state.scale);
-
-  const elements = heatmapInfo?.sortedElements?.slice(0, NUMBER_OF_TOP_ELEMENTS) ?? [];
-  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,82 +0,0 @@
-import type { ElementInfo, ICalloutPosition, IHorizontalAlignment } from '../../types';
-
-import { useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { calcCalloutPosition } from '../../helpers';
-import { useHeatmapControlStore } from '../../stores';
-
-const DEFAULT_POSITION: ICalloutPosition = {
-  top: 0,
-  left: 0,
-  placement: 'top',
-  horizontalAlign: 'center',
-};
-
-export interface ElementCalloutProps {
-  element: ElementInfo;
-  target: string;
-  visualRef?: React.RefObject<HTMLDivElement>;
-  hozOffset?: number;
-  alignment?: IHorizontalAlignment;
-}
-
-export const ElementCallout: React.FC<ElementCalloutProps> = (props) => {
-  const CompElementCallout = useHeatmapControlStore((state) => state.controls.ElementCallout);
-
-  const { element, target, visualRef, hozOffset, alignment = 'left' } = props;
-
-  const calloutRef = useRef<HTMLDivElement>(null);
-
-  const [position, setPosition] = useState<ICalloutPosition>(DEFAULT_POSITION);
-
-  useEffect(() => {
-    const targetElm = document.querySelector(target);
-    const calloutElm = calloutRef.current;
-    if (!targetElm || !calloutElm) return;
-
-    const positionFn = calcCalloutPosition({
-      targetElm,
-      calloutElm,
-      setPosition,
-      hozOffset,
-      alignment,
-    });
-
-    positionFn();
-    const handleUpdate = () => {
-      requestAnimationFrame(positionFn);
-    };
-
-    window.addEventListener('scroll', handleUpdate, true);
-    window.addEventListener('resize', handleUpdate);
-    visualRef?.current?.addEventListener('scroll', handleUpdate);
-
-    return () => {
-      window.removeEventListener('scroll', handleUpdate, true);
-      window.removeEventListener('resize', handleUpdate);
-      visualRef?.current?.removeEventListener('scroll', handleUpdate);
-    };
-  }, [element, target, visualRef, hozOffset, alignment]);
-
-  const calloutContent = (
-    <div
-      ref={calloutRef}
-      className={`clarity-callout clarity-callout--${position.placement} clarity-callout--align-${position.horizontalAlign}`}
-      style={{
-        position: 'fixed',
-        top: position.top,
-        left: position.left,
-        zIndex: 2147483647,
-      }}
-      aria-live="assertive"
-      role="tooltip"
-    >
-      {CompElementCallout && <CompElementCallout elementHash={element.hash} />}
-    </div>
-  );
-
-  return createPortal(
-    calloutContent,
-    document.getElementById('gx-hm-viz-container') as Element,
-  ) as React.ReactPortal;
-};

package/src/components/VizElement/ElementMissing.tsx

@@ -1,35 +0,0 @@
-import { useHeatmapVizStore } from '../../stores';
-
-interface Props {
-  show?: boolean;
-}
-
-export const ElementMissing: React.FC<Props> = ({ show = true }) => {
-  if (!show) return null;
-
-  const widthScale = useHeatmapVizStore((state) => state.scale);
-
-  return (
-    <div
-      className="missingElement"
-      style={{
-        position: 'fixed',
-        top: '50%',
-        left: '50%',
-        transform: `translate(-50%, -50%) scale(${1 / widthScale})`,
-        background: 'rgba(0, 0, 0, 0.8)',
-        color: 'white',
-        padding: '12px 20px',
-        borderRadius: '8px',
-        fontSize: '14px',
-        fontWeight: '500',
-        zIndex: 9999,
-        pointerEvents: 'none',
-        whiteSpace: 'nowrap',
-      }}
-      aria-live="assertive"
-    >
-      Element not visible on current screen
-    </div>
-  );
-};

package/src/components/VizElement/ElementOverlay.tsx

@@ -1,66 +0,0 @@
-import type { ElementInfo } from '../../types';
-
-import { Fragment } from 'react';
-import { HEATMAP_CONFIG } from '../../configs/style';
-import {
-  CLICKED_ELEMENT_ID,
-  HOVERED_ELEMENT_ID,
-  SECONDARY_CLICKED_ELEMENT_ID,
-  SECONDARY_HOVERED_ELEMENT_ID,
-} from '../../constants';
-import { useHeatmapVizStore } from '../../stores';
-import { RankBadge } from './RankBadge';
-
-interface Props {
-  type: 'hovered' | 'clicked';
-  element: ElementInfo | null;
-  onClick?: () => void;
-  isSecondary?: boolean;
-}
-
-const TARGET_ID_BY_TYPE = {
-  hovered: {
-    default: HOVERED_ELEMENT_ID,
-    secondary: SECONDARY_HOVERED_ELEMENT_ID,
-  },
-  clicked: {
-    default: CLICKED_ELEMENT_ID,
-    secondary: SECONDARY_CLICKED_ELEMENT_ID,
-  },
-};
-export const ElementOverlay: React.FC<Props> = ({ type, element, onClick, isSecondary }) => {
-  const widthScale = useHeatmapVizStore((state) => state.scale);
-
-  if (!element || (element.width === 0 && element.height === 0)) return null;
-
-  // Iframe has border, so we need to add it to the top position
-  const top = element.top + HEATMAP_CONFIG['borderWidthIframe'];
-  const left = element.left + HEATMAP_CONFIG['borderWidthIframe'];
-  const width = element.width;
-  const height = element.height;
-  const targetId = TARGET_ID_BY_TYPE[type][isSecondary ? 'secondary' : 'default'];
-
-  return (
-    <Fragment>
-      <div
-        onClick={onClick}
-        className="heatmapElement"
-        id={targetId}
-        style={{
-          top,
-          left,
-          width,
-          height,
-          cursor: 'pointer',
-        }}
-      />
-
-      <RankBadge
-        index={element.rank}
-        elementRect={element}
-        widthScale={type === 'hovered' ? 1 : widthScale}
-        clickOnElement={onClick}
-      />
-    </Fragment>
-  );
-};

package/src/components/VizElement/HeatmapElements.tsx

@@ -1,127 +0,0 @@
-import type { IHeatmapInfo, WebVisualizer } from '../../types';
-
-import { CLICKED_ELEMENT_ID, HOVERED_ELEMENT_ID } from '../../constants';
-import {
-  useClickedElement,
-  useElementCalloutVisible,
-  useHeatmapEffects,
-  useHeatmapElementPosition,
-  useHoveredElement,
-} from '../../hooks';
-import { useHeatmapSingleStore } from '../../stores';
-import { DefaultRankBadges } from './DefaultRankBadges';
-import { ElementCallout, ElementCalloutProps } from './ElementCallout';
-import { ElementMissing } from './ElementMissing';
-import { ElementOverlay } from './ElementOverlay';
-
-const ELEMENT_CALLOUT: Pick<ElementCalloutProps, 'hozOffset' | 'alignment'> = {
-  hozOffset: -8,
-  alignment: 'left',
-};
-
-interface HeatmapElementsProps {
-  heatmapInfo?: IHeatmapInfo;
-  isElementSidebarOpen?: boolean;
-  visualizer?: WebVisualizer;
-  isVisible?: boolean;
-  iframeDimensions?: React.CSSProperties;
-  areDefaultRanksHidden?: boolean;
-  isSecondary?: boolean;
-  iframeRef: React.RefObject<HTMLIFrameElement>;
-  wrapperRef: React.RefObject<HTMLElement>;
-  visualRef: React.RefObject<HTMLDivElement>;
-}
-
-export const HeatmapElements: React.FC<HeatmapElementsProps> = (props) => {
-  const iframeHeight = useHeatmapSingleStore((state) => state.iframeHeight);
-
-  const {
-    iframeRef,
-    wrapperRef,
-    visualRef,
-    visualizer,
-    iframeDimensions,
-    isElementSidebarOpen,
-    isVisible = true,
-    areDefaultRanksHidden,
-    isSecondary,
-  } = props;
-
-  const getRect = useHeatmapElementPosition({
-    iframeRef,
-    wrapperRef,
-    visualizer,
-  });
-
-  const { clickedElement, showMissingElement, shouldShowCallout, setShouldShowCallout } =
-    useClickedElement({
-      visualRef,
-      getRect,
-    });
-
-  const { hoveredElement, handleMouseMove, handleMouseLeave, handleClick } = useHoveredElement({
-    iframeRef,
-    getRect,
-  });
-
-  useElementCalloutVisible({
-    visualRef,
-    getRect,
-  });
-
-  const resetAll = () => {
-    // setShouldShowCallout(false);
-  };
-
-  useHeatmapEffects({
-    isVisible,
-    isElementSidebarOpen,
-    setShouldShowCallout,
-    resetAll,
-  });
-
-  if (!isVisible) return null;
-
-  return (
-    <div
-      onMouseMove={(event) => {
-        handleMouseMove(event as any);
-        // handleMouseMove2(event as any);
-      }}
-      onMouseLeave={handleMouseLeave}
-      className="gx-hm-elements"
-      style={{ ...iframeDimensions, height: `${iframeHeight}px` }}
-    >
-      {/* Default & Missing element  */}
-      <ElementMissing show={showMissingElement} />
-      <DefaultRankBadges getRect={getRect} hidden={areDefaultRanksHidden} />
-
-      {/* Clicked & Secondary  */}
-      <ElementOverlay type="clicked" element={clickedElement} isSecondary={isSecondary} />
-      <ElementOverlay
-        type="hovered"
-        element={hoveredElement}
-        isSecondary={isSecondary}
-        onClick={handleClick}
-      />
-
-      {/* Element callout */}
-      {hoveredElement?.hash !== clickedElement?.hash && hoveredElement && (
-        <ElementCallout
-          element={hoveredElement}
-          target={`#${HOVERED_ELEMENT_ID}`}
-          visualRef={visualRef}
-          {...ELEMENT_CALLOUT}
-        />
-      )}
-      {shouldShowCallout && clickedElement && (
-        <ElementCallout
-          element={clickedElement}
-          target={`#${CLICKED_ELEMENT_ID}`}
-          visualRef={visualRef}
-          {...ELEMENT_CALLOUT}
-        />
-      )}
-    </div>
-  );
-};