@gemx-dev/heatmap-react 3.5.21 → 3.5.23

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

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

@@ -0,0 +1 @@
+{"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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gemx-dev/heatmap-react",
   "author": "gemx-dev",
-  "version": "3.5.21",
+  "version": "3.5.23",
   "license": "MIT",
   "sideEffects": [
     "*.css"
@@ -67,22 +67,19 @@
     "./package.json": "./package.json",
     ".": {
       "node": {
-        "types": "./dist/esm/index.d.ts",
-        "module": "./dist/esm/index.js",
-        "require": "./dist/umd/index.js",
-        "import": "./dist/esm/index.mjs"
+        "types": "./src/global.d.ts",
+        "module": "./src/index.ts",
+        "require": "./src/index.ts",
+        "import": "./src/index.ts"
       },
-      "browser": {
-        "import": "./dist/esm/index.js",
-        "require": "./dist/umd/index.js"
-      },
-      "default": "./dist/esm/index.js"
+      "default": "./src/index.ts"
     },
-    "./dist/base.css": "./dist/base.css",
-    "./dist/style.css": "./dist/style.css"
+    "./dist/base.css": "./src/styles/base.css",
+    "./dist/style.css": "./src/styles/style.css"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "module": "dist/esm/index.js"
-}
+}

package/src/components/GraphView.tsx

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

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

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

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

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

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

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