@gemx-dev/heatmap-react 3.5.44 → 3.5.46

package/dist/umd/stores/index.d.ts

@@ -4,5 +4,4 @@ export * from './data';
 export * from './interaction';
 export * from './viz';
 export * from './mode-live';
-export * from './mode-single';
 //# sourceMappingURL=index.d.ts.map

package/dist/umd/stores/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stores/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AAEtB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stores/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AAEtB,cAAc,aAAa,CAAC"}

package/dist/umd/stores/interaction.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interaction.d.ts","sourceRoot":"","sources":["../../src/stores/interaction.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,MAAM,WAAW,aAAa;IAC5B,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,kBAAkB,EAAE,CAAC,eAAe,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7D,cAAc,EAAE,WAAW,GAAG,IAAI,CAAC;IACnC,iBAAiB,EAAE,CAAC,cAAc,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAChE,iBAAiB,EAAE,OAAO,CAAC;IAC3B,oBAAoB,EAAE,CAAC,iBAAiB,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5D;AAED,eAAO,MAAM,0BAA0B,uFAarC,CAAC"}
+{"version":3,"file":"interaction.d.ts","sourceRoot":"","sources":["../../src/stores/interaction.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,MAAM,WAAW,aAAa;IAC5B,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,kBAAkB,EAAE,CAAC,eAAe,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7D,cAAc,EAAE,WAAW,GAAG,IAAI,CAAC;IACnC,iBAAiB,EAAE,CAAC,cAAc,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAEhE,iBAAiB,EAAE,OAAO,CAAC;IAC3B,oBAAoB,EAAE,CAAC,iBAAiB,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5D;AAED,eAAO,MAAM,0BAA0B,uFAarC,CAAC"}

package/dist/umd/stores/mode-live.d.ts

@@ -1,13 +1,9 @@
-import { DecodedPayload } from '../types';
 interface IHeatmapLiveStoreState {
-    payloads: DecodedPayload[];
     htmlContent: string;
     iframeHeight: number;
     wrapperHeight: number;
 }
 interface IHeatmapLiveStoreActions {
-    setPayloads: (payloads: DecodedPayload[]) => void;
-    addPayload: (payload: DecodedPayload) => void;
     reset: () => void;
     setHtmlContent: (htmlContent: string) => void;
     setWrapperHeight: (wrapperHeight: number) => void;

package/dist/umd/stores/mode-live.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mode-live.d.ts","sourceRoot":"","sources":["../../src/stores/mode-live.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;CACvB;AACD,UAAU,wBAAwB;IAChC,WAAW,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IAClD,UAAU,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9C,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,cAAc,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,gBAAgB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,eAAe,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,UAAU,iBAAkB,SAAQ,sBAAsB,EAAE,wBAAwB;CAAG;AASvF,eAAO,MAAM,mBAAmB,gFAU9B,CAAC"}
+{"version":3,"file":"mode-live.d.ts","sourceRoot":"","sources":["../../src/stores/mode-live.ts"],"names":[],"mappings":"AAEA,UAAU,sBAAsB;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;CACvB;AACD,UAAU,wBAAwB;IAChC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,cAAc,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,gBAAgB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,eAAe,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,UAAU,iBAAkB,SAAQ,sBAAsB,EAAE,wBAAwB;CAAG;AAQvF,eAAO,MAAM,mBAAmB,gFAQ9B,CAAC"}

package/dist/umd/stores/viz.d.ts

@@ -1,8 +1,12 @@
 export interface IHeatmapVizStore {
     isRenderViz: boolean;
     setIsRenderViz: (isRenderViz: boolean) => void;
+    vizRef: any;
+    setVizRef: (vizRef: any) => void;
     scale: number;
     setScale: (scale: number) => void;
+    iframeHeight: number;
+    setIframeHeight: (iframeHeight: number) => void;
 }
 export declare const useHeatmapVizStore: import("zustand").UseBoundStore<import("zustand").StoreApi<IHeatmapVizStore>>;
 //# sourceMappingURL=viz.d.ts.map

package/dist/umd/stores/viz.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"viz.d.ts","sourceRoot":"","sources":["../../src/stores/viz.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,kBAAkB,+EAO7B,CAAC"}
+{"version":3,"file":"viz.d.ts","sourceRoot":"","sources":["../../src/stores/viz.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,MAAM,EAAE,GAAG,CAAC;IACZ,SAAS,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,eAAO,MAAM,kBAAkB,+EAW7B,CAAC"}

package/dist/umd/types/index.d.ts

@@ -2,5 +2,5 @@ export * from './elm-callout';
 export * from './clarity';
 export * from './heatmap';
 export * from './viz-element';
-export * from './iframe-helper';
+export * from './viewport-fixer';
 //# sourceMappingURL=index.d.ts.map

package/dist/umd/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAE9B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAE9B,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAE9B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAE9B,cAAc,kBAAkB,CAAC"}

package/dist/umd/types/viewport-fixer.d.ts

@@ -0,0 +1,31 @@
+export interface ViewportConfig {
+    targetWidth: number;
+    targetHeight: number;
+    iframe: HTMLIFrameElement;
+    onSuccess?: (data: {
+        height: number;
+    }) => void;
+    onError?: (error: Error) => void;
+}
+export interface IframeHeightMessage {
+    type: 'IFRAME_HEIGHT_CALCULATED';
+    height: number;
+    width: number;
+}
+export interface DimensionsDetail {
+    width: number;
+    height: number;
+}
+export interface DebugInfo {
+    iframe: number;
+    body: number;
+    remaining: number;
+}
+declare global {
+    interface Window {
+        __viewportConfig?: ViewportConfig;
+        viewportFixer?: any;
+        debugViewportUnits?: () => DebugInfo | null;
+    }
+}
+//# sourceMappingURL=viewport-fixer.d.ts.map

package/dist/umd/types/viewport-fixer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewport-fixer.d.ts","sourceRoot":"","sources":["../../src/types/viewport-fixer.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,0BAA0B,CAAC;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,gBAAgB,CAAC,EAAE,cAAc,CAAC;QAClC,aAAa,CAAC,EAAE,GAAG,CAAC;QACpB,kBAAkB,CAAC,EAAE,MAAM,SAAS,GAAG,IAAI,CAAC;KAC7C;CACF"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gemx-dev/heatmap-react",
   "author": "gemx-dev",
-  "version": "3.5.44",
+  "version": "3.5.46",
   "license": "MIT",
   "sideEffects": [
     "*.css"
@@ -60,7 +60,8 @@
     "name": "HeatmapReact"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
   },
   "main": "dist/umd/index.js",
   "types": "dist/esm/index.d.ts",
@@ -68,22 +69,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/ContentMetricBar.tsx

@@ -0,0 +1,23 @@
+import { HEATMAP_CONFIG } from '../../configs';
+import { useHeatmapControlStore } from '../../stores';
+import { BoxStack } from '../../ui';
+
+export const ContentMetricBar: React.FC = () => {
+  const controls = useHeatmapControlStore((state) => state.controls);
+
+  return (
+    <BoxStack
+      id="gx-hm-content-metric-bar"
+      flexDirection="row"
+      alignItems="center"
+      overflow="auto"
+      zIndex={1}
+      backgroundColor="white"
+      style={{
+        borderBottom: `${HEATMAP_CONFIG.borderWidth}px solid ${HEATMAP_CONFIG.borderColor}`,
+      }}
+    >
+      {controls.MetricBar ?? null}
+    </BoxStack>
+  );
+};

package/src/components/Layout/ContentToolbar.tsx

@@ -0,0 +1,22 @@
+import { useHeatmapControlStore } from '../../stores';
+
+export const ContentToolbar: React.FC = () => {
+  const controls = useHeatmapControlStore((state) => state.controls);
+
+  return (
+    <div
+      id="gx-hm-content-toolbar"
+      style={{
+        zIndex: 2,
+        position: 'absolute',
+        bottom: 0,
+        left: '8px',
+        right: '24px',
+        padding: '8px',
+        paddingBlock: '16px',
+      }}
+    >
+      {controls.Toolbar ?? null}
+    </div>
+  );
+};

package/src/components/Layout/ContentTopBar.tsx

@@ -0,0 +1,24 @@
+import { HEATMAP_CONFIG } from '../../configs';
+import { useHeatmapControlStore } from '../../stores';
+import { BoxStack } from '../../ui';
+
+export const ContentTopBar: React.FC = () => {
+  const controls = useHeatmapControlStore((state) => state.controls);
+  const TopBar = controls.TopBar;
+
+  return (
+    <BoxStack
+      id="gx-hm-content-header"
+      flexDirection="row"
+      alignItems="center"
+      overflow="auto"
+      zIndex={1}
+      backgroundColor="white"
+      style={{
+        borderBottom: `${HEATMAP_CONFIG.borderWidth}px solid ${HEATMAP_CONFIG.borderColor}`,
+      }}
+    >
+      {TopBar && <TopBar />}
+    </BoxStack>
+  );
+};

package/src/components/Layout/ContentVizByMode.tsx

@@ -0,0 +1,14 @@
+import { useHeatmapConfigStore } from '../../stores';
+import { VizDomHeatmap } from '../VizDom';
+import { VizLiveHeatmap } from '../VizLive';
+
+export const ContentVizByMode: React.FC = () => {
+  const mode = useHeatmapConfigStore((state) => state.mode);
+
+  switch (mode) {
+    case 'live':
+      return <VizLiveHeatmap />;
+    default:
+      return <VizDomHeatmap />;
+  }
+};

package/src/components/Layout/HeatmapLayout.tsx

@@ -0,0 +1,60 @@
+import { HEATMAP_CONFIG } from '../../configs';
+import {
+  useRegisterConfig,
+  useRegisterControl,
+  useRegisterData,
+  useRegisterHeatmap,
+} from '../../hooks';
+import { ClickMapPoint, DecodedPayload, IHeatmapInfo, ScrollMapPoint } from '../../types';
+import { IHeatmapControl } from '../../types/control';
+import { BoxStack, BoxStackProps } from '../../ui';
+import { WrapperLayout } from './WrapperLayout';
+
+interface HeatmapLayoutProps {
+  data?: DecodedPayload[];
+  clickmap?: ClickMapPoint[];
+  scrollmap?: ScrollMapPoint[];
+  dataInfo?: IHeatmapInfo;
+  controls: IHeatmapControl;
+}
+export const HeatmapLayout: React.FC<HeatmapLayoutProps> = ({
+  data,
+  clickmap,
+  scrollmap,
+  controls,
+  dataInfo,
+}) => {
+  useRegisterControl(controls);
+  useRegisterData(data, dataInfo);
+  useRegisterHeatmap({ clickmap, scrollmap });
+  useRegisterConfig();
+
+  return (
+    <BoxStack
+      id="gx-hm-project"
+      flexDirection="column"
+      flex="1"
+      height="100%"
+      style={getVariableStyle()}
+    >
+      <BoxStack id="gx-hm-project-content" flexDirection="column" flex="1">
+        <div
+          style={{
+            minHeight: '100%',
+            display: 'flex',
+          }}
+        >
+          <WrapperLayout />
+        </div>
+      </BoxStack>
+    </BoxStack>
+  );
+
+  function getVariableStyle(): BoxStackProps['style'] {
+    return {
+      '--gx-hm-border-width': `${HEATMAP_CONFIG.borderWidth}px`,
+      '--gx-hm-border-width-iframe': `${HEATMAP_CONFIG.borderWidthIframe}px`,
+      '--gx-hm-border-color': `${HEATMAP_CONFIG.borderColor}`,
+    } as React.CSSProperties;
+  }
+};

package/src/components/Layout/LeftSidebar.tsx

@@ -0,0 +1,44 @@
+import { HEATMAP_CONFIG } from '../../configs';
+import {
+  useHeatmapConfigStore,
+  useHeatmapControlStore,
+  useHeatmapInteractionStore,
+} from '../../stores';
+
+export const LeftSidebar: React.FC = () => {
+  const controls = useHeatmapControlStore((state) => state.controls);
+  const isHideSidebar = useHeatmapInteractionStore((state) => state.state.hideSidebar);
+  const sidebarWidth = useHeatmapConfigStore((state) => state.sidebarWidth);
+
+  if (isHideSidebar) {
+    return null;
+  }
+  return (
+    <div
+      className="gx-hm-sidebar"
+      style={{
+        height: '100%',
+        display: 'flex',
+        zIndex: 1,
+        ...(isHideSidebar
+          ? {
+              width: '0',
+              transform: 'translateX(-100%)',
+              visibility: 'hidden',
+            }
+          : { width: `${sidebarWidth}px + ${HEATMAP_CONFIG.borderWidth}px` }),
+      }}
+    >
+      <div
+        className="gx-hm-sidebar-wrapper"
+        style={{
+          height: '100%',
+          width: `calc(${sidebarWidth}px + ${HEATMAP_CONFIG.borderWidth}px)`,
+          borderRight: `${HEATMAP_CONFIG.borderWidth}px solid ${HEATMAP_CONFIG.borderColor}`,
+        }}
+      >
+        {controls.Sidebar ?? null}
+      </div>
+    </div>
+  );
+};

package/src/components/Layout/WrapperLayout.tsx

@@ -0,0 +1,12 @@
+import { BoxStack } from '../../ui';
+import { ContentTopBar } from './ContentTopBar';
+import { WrapperPreview } from './WrapperPreview';
+
+export const WrapperLayout: React.FC = () => {
+  return (
+    <BoxStack id="gx-hm-layout" flexDirection="column" flex="1">
+      <ContentTopBar />
+      <WrapperPreview />
+    </BoxStack>
+  );
+};

package/src/components/Layout/WrapperPreview.tsx

@@ -0,0 +1,24 @@
+import { BoxStack } from '../../ui';
+import { ContentMetricBar } from './ContentMetricBar';
+import { ContentToolbar } from './ContentToolbar';
+import { ContentVizByMode } from './ContentVizByMode';
+import { LeftSidebar } from './LeftSidebar';
+
+export const WrapperPreview: React.FC = () => {
+  return (
+    <BoxStack
+      id="gx-hm-container"
+      flexDirection="row"
+      overflow="hidden"
+      flex="1"
+      position="relative"
+    >
+      <LeftSidebar />
+      <BoxStack flexDirection="column" flex="1">
+        <ContentMetricBar />
+        <ContentVizByMode />
+        <ContentToolbar />
+      </BoxStack>
+    </BoxStack>
+  );
+};

package/src/components/Layout/index.ts

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

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

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

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

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

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