@gemx-dev/heatmap-react 3.5.23 → 3.5.24

package/dist/umd/components/VizElement/VizElementRank.d.ts

@@ -1,75 +0,0 @@
-import React from 'react';
-import './HeatmapElements.css';
-export declare enum HeatmapType {
-    Sessions = 0,
-    Timeline = 1,
-    Click = 2,
-    Scroll = 3,
-    Area = 4,
-    Attention = 5
-}
-export declare enum DeviceType {
-    Desktop = "desktop",
-    Mobile = "mobile",
-    Tablet = "tablet"
-}
-interface ElementRect {
-    hash: string;
-    top: number;
-    left: number;
-    width: number;
-    height: number;
-}
-interface AndroidNode extends ElementRect {
-    x: number;
-    y: number;
-}
-interface ElementMapInfo {
-    totalclicks: number;
-    selector?: string;
-    hash: string;
-}
-interface SortedElement {
-    hash?: string;
-    selector?: string;
-}
-interface HeatmapInfo {
-    sortedElements?: SortedElement[];
-    elementMapInfo?: Record<string, ElementMapInfo>;
-    totalClicks?: number;
-}
-interface ClarityVisualizer {
-    getAndroidNode: (hash: string, flag1: boolean, flag2: boolean) => AndroidNode | null;
-    getAndroidElements: (x: number, y: number, flag: boolean) => AndroidNode[];
-    setAndroidClickmapScrolledCallback: (callback: () => void) => void;
-}
-interface DivDimensions {
-    width?: number;
-    height?: number;
-}
-export interface HeatmapElementsProps {
-    widthScale: number;
-    divDimensions: DivDimensions;
-    transform: string;
-    heatmapInfo?: HeatmapInfo;
-    selectedElement?: string;
-    selectedFrameElements?: SortedElement[];
-    clarityVisualizer: ClarityVisualizer;
-    heatmapWrapperRef: React.RefObject<HTMLDivElement>;
-    parentRef: React.RefObject<HTMLElement>;
-    isVisible: boolean;
-    isElementSidebarOpen: boolean;
-    showScreenElementsOnly: boolean;
-    areDefaultRanksHidden: boolean;
-    showMissingElementMessage: boolean;
-    isRecordingView: boolean;
-    isCompareMode: boolean;
-    isSecondary?: boolean;
-    selectElement: (hash: string) => void;
-    deviceType: DeviceType;
-    enableAdvancedSelection?: boolean;
-    enableMobileOptimization?: boolean;
-}
-export declare const HeatmapElements: React.FC<HeatmapElementsProps>;
-export {};
-//# sourceMappingURL=VizElementRank.d.ts.map

package/dist/umd/components/VizElement/VizElementRank.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"VizElementRank.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/VizElementRank.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,uBAAuB,CAAC;AAM/B,oBAAY,WAAW;IACrB,QAAQ,IAAI;IACZ,QAAQ,IAAI;IACZ,KAAK,IAAI;IACT,MAAM,IAAI;IACV,IAAI,IAAI;IACR,SAAS,IAAI;CACd;AAED,oBAAY,UAAU;IACpB,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,MAAM,WAAW;CAClB;AAED,UAAU,WAAW;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AASD,UAAU,WAAY,SAAQ,WAAW;IACvC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,UAAU,cAAc;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,UAAU,aAAa;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,WAAW;IACnB,cAAc,CAAC,EAAE,aAAa,EAAE,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,iBAAiB;IACzB,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,KAAK,WAAW,GAAG,IAAI,CAAC;IACrF,kBAAkB,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,KAAK,WAAW,EAAE,CAAC;IAC3E,kCAAkC,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CACpE;AAED,UAAU,aAAa;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAMD,MAAM,WAAW,oBAAoB;IAEnC,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,aAAa,CAAC;IAC7B,SAAS,EAAE,MAAM,CAAC;IAGlB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,qBAAqB,CAAC,EAAE,aAAa,EAAE,CAAC;IACxC,iBAAiB,EAAE,iBAAiB,CAAC;IAGrC,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACnD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAGxC,SAAS,EAAE,OAAO,CAAC;IACnB,oBAAoB,EAAE,OAAO,CAAC;IAC9B,sBAAsB,EAAE,OAAO,CAAC;IAChC,qBAAqB,EAAE,OAAO,CAAC;IAC/B,yBAAyB,EAAE,OAAO,CAAC;IACnC,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IAGtB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAGtC,UAAU,EAAE,UAAU,CAAC;IAGvB,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAMD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA+c1D,CAAC"}

package/src/components/GraphView.tsx

@@ -1,58 +0,0 @@
-import type { Node } from '@xyflow/react';
-
-import { Background, Controls, ReactFlow, useNodesState } from '@xyflow/react';
-import React, { useEffect } from 'react';
-
-const initialNodes: Node = { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } };
-
-interface GraphViewProps {
-  children: React.ReactNode;
-  width: number;
-  height: number;
-}
-
-export const GraphView: React.FC<GraphViewProps> = ({ children, width, height }) => {
-  const [nodes, setNodes, onNodesChange] = useNodesState<Node>([
-    {
-      ...initialNodes,
-      width: width,
-      height: height,
-    },
-  ]);
-
-  const CustomNode = () => {
-    return <>{children}</>;
-  };
-  const nodeTypes = {
-    default: CustomNode,
-  };
-
-  useEffect(() => {
-    if (!width) return;
-
-    setNodes((prev) => {
-      const node = prev.find((node) => node.id === '1') as Node;
-      const newNode: Node = {
-        ...node,
-        measured: { height: height, width: width },
-        height: height,
-        width: width,
-      };
-      return [newNode];
-    });
-  }, [width, height, setNodes]);
-  return (
-    <ReactFlow
-      nodes={nodes}
-      nodeTypes={nodeTypes}
-      onNodesChange={onNodesChange}
-      debug={true}
-      minZoom={0.5}
-      maxZoom={2}
-      fitView
-    >
-      <Controls />
-      <Background />
-    </ReactFlow>
-  );
-};

package/src/components/Layout/ContentHeader.tsx

@@ -1,15 +0,0 @@
-import { BoxStack } from '../../ui';
-
-export const ContentHeader: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  return (
-    <BoxStack
-      id="gx-hm-content-header"
-      flexDirection="row"
-      alignItems="center"
-      overflow="auto"
-      // style={{ borderBottom: '1px solid #ddd' }}
-    >
-      {children}
-    </BoxStack>
-  );
-};

package/src/components/Layout/HeatmapLayout.tsx

@@ -1,63 +0,0 @@
-import { useCallback, useEffect } from 'react';
-import { useHeatmapDataStore } from '../../stores';
-import { ClickMapPoint, DecodedPayload } from '../../types';
-import { BoxStack } from '../../ui';
-import { WrapperLayout } from './WrapperLayout';
-
-interface HeatmapLayoutProps {
-  data?: DecodedPayload[];
-  clickmap?: ClickMapPoint[];
-  header: React.ReactNode;
-  sidebar: React.ReactNode;
-  toolbar: React.ReactNode;
-}
-export const HeatmapLayout: React.FC<HeatmapLayoutProps> = ({
-  data,
-  clickmap,
-  header,
-  toolbar,
-  sidebar,
-}) => {
-  const setData = useHeatmapDataStore((state) => state.setData);
-  const setClickmap = useHeatmapDataStore((state) => state.setClickmap);
-
-  const handleSetClickmap = useCallback(
-    (clickmap?: ClickMapPoint[]) => {
-      if (!clickmap) return;
-
-      setClickmap(clickmap);
-    },
-    [clickmap],
-  );
-  const handleSetData = useCallback(
-    (data?: DecodedPayload[]) => {
-      if (!data) return;
-
-      setData(data);
-    },
-    [data],
-  );
-
-  useEffect(() => {
-    handleSetData(data);
-  }, [data]);
-
-  useEffect(() => {
-    handleSetClickmap(clickmap);
-  }, [clickmap]);
-
-  return (
-    <BoxStack id="gx-hm-project" flexDirection="column" flex="1" height="100%">
-      <BoxStack id="gx-hm-project-content" flexDirection="column" flex="1">
-        <div
-          style={{
-            minHeight: '100%',
-            display: 'flex',
-          }}
-        >
-          <WrapperLayout header={header} toolbar={toolbar} sidebar={sidebar} />
-        </div>
-      </BoxStack>
-    </BoxStack>
-  );
-};

package/src/components/Layout/LeftSidebar.tsx

@@ -1,32 +0,0 @@
-import { useHeatmapDataStore } from '../../stores';
-
-const SIDEBAR_WIDTH = 280;
-export const LeftSidebar: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const isHideSidebar = useHeatmapDataStore((state) => state.state.hideSidebar);
-  if (isHideSidebar) {
-    return null;
-  }
-  return (
-    <div
-      className="gx-hm-sidebar"
-      style={{
-        height: '100%',
-        display: 'flex',
-        ...(isHideSidebar
-          ? {
-              width: '0',
-              transform: 'translateX(-100%)',
-              visibility: 'hidden',
-            }
-          : { width: `${SIDEBAR_WIDTH}px` }),
-      }}
-    >
-      <div
-        className="gx-hm-sidebar-wrapper"
-        style={{ height: '100%', width: `${SIDEBAR_WIDTH}px` }}
-      >
-        {children}
-      </div>
-    </div>
-  );
-};

package/src/components/Layout/WrapperLayout.tsx

@@ -1,18 +0,0 @@
-import { BoxStack } from '../../ui';
-import { ContentHeader } from './ContentHeader';
-import { WrapperPreview } from './WrapperPreview';
-
-interface WrapperLayoutProps {
-  header: React.ReactNode;
-  toolbar: React.ReactNode;
-  sidebar: React.ReactNode;
-}
-export const WrapperLayout: React.FC<WrapperLayoutProps> = ({ header, toolbar, sidebar }) => {
-  return (
-    <BoxStack id="gx-hm-layout" flexDirection="column" flex="1">
-      <ContentHeader>{header}</ContentHeader>
-      <ContentHeader>{toolbar}</ContentHeader>
-      <WrapperPreview>{sidebar}</WrapperPreview>
-    </BoxStack>
-  );
-};

package/src/components/Layout/WrapperPreview.tsx

@@ -1,14 +0,0 @@
-import { VizDomContainer } from '../VizDom';
-import { LeftSidebar } from './LeftSidebar';
-
-export const WrapperPreview: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  return (
-    <div
-      className="gx-hm-container"
-      style={{ display: 'flex', overflowY: 'hidden', flex: '1', position: 'relative' }}
-    >
-      <LeftSidebar>{children}</LeftSidebar>
-      <VizDomContainer />
-    </div>
-  );
-};

package/src/components/Layout/index.ts

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