@gemx-dev/heatmap-react 3.5.29 → 3.5.31

package/dist/esm/index.mjs

@@ -1,10 +1,9 @@
 "use client"
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useNodesState, ReactFlow, Controls, Background } from '@xyflow/react';
-import { useEffect, useMemo, useState, useCallback, useRef, Fragment as Fragment$1 } from 'react';
+import { useEffect, useCallback, useState, useRef, useMemo, Fragment as Fragment$1 } from 'react';
 import { create } from 'zustand';
 import { Visualizer } from '@gemx-dev/clarity-visualize';
-import { createPortal } from 'react-dom';
 
 const initialNodes = { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } };
 const GraphView = ({ children, width, height }) => {
@@ -38,15 +37,71 @@ const GraphView = ({ children, width, height }) => {
     return (jsxs(ReactFlow, { nodes: nodes, nodeTypes: nodeTypes, onNodesChange: onNodesChange, debug: true, minZoom: 0.5, maxZoom: 2, fitView: true, children: [jsx(Controls, {}), jsx(Background, {})] }));
 };
 
+const HEATMAP_IFRAME = {
+    id: 'clarity-iframe',
+    title: 'Clarity Session Replay',
+    sandbox: 'allow-same-origin allow-scripts',
+    scrolling: 'no',
+    height: '100%',
+};
+
+const HEATMAP_CONFIG = {
+    padding: 8,
+    borderWidth: 1,
+    borderColor: 'red',
+};
+const HEATMAP_STYLE = {
+    viz: {
+        background: '#f3f3f3',
+        paddingBottom: `${HEATMAP_CONFIG.padding}px`,
+    },
+    wrapper: {
+        padding: `${HEATMAP_CONFIG.padding}px 0`,
+    },
+};
+const DEFAULT_SIDEBAR_WIDTH = 260;
+
+const useHeatmapControlStore = create()((set, get) => {
+    return {
+        controls: {
+            Sidebar: null,
+            TopBar: null,
+            Toolbar: null,
+            MetricBar: null,
+            VizLoading: null,
+        },
+        registerControl: (key, control) => {
+            set({
+                controls: {
+                    ...get().controls,
+                    [key]: control,
+                },
+            });
+        },
+    };
+});
+
+var IHeatmapType;
+(function (IHeatmapType) {
+    IHeatmapType["Click"] = "click";
+    IHeatmapType["Scroll"] = "scroll";
+})(IHeatmapType || (IHeatmapType = {}));
+
 const useHeatmapDataStore = create()((set, get) => {
     return {
         data: undefined,
         clickmap: undefined,
-        config: undefined,
+        config: {
+            sidebarWidth: DEFAULT_SIDEBAR_WIDTH,
+            width: 1440,
+            heatmapType: IHeatmapType.Click,
+        },
         iframeHeight: 0,
         state: {
             hideSidebar: false,
         },
+        isRendering: true,
+        setIsRendering: (isRendering) => set({ isRendering }),
         setData: (data) => set({ data }),
         setClickmap: (clickmap) => set({ clickmap }),
         setState: (state) => set({ state: { ...get().state, ...state } }),
@@ -56,63 +111,57 @@ const useHeatmapDataStore = create()((set, get) => {
     };
 });
 
-const BoxStack = ({ children, ...props }) => {
-    const id = props.id;
-    const flexDirection = props.flexDirection;
-    const overflow = props.overflow || 'hidden';
-    const position = props.position || 'relative';
-    const flex = props.flex || 'none';
-    const justifyContent = props.justifyContent;
-    const alignItems = props.alignItems;
-    const style = props.style || {};
-    const gap = props.gap || 0;
-    const height = props.height || 'auto';
-    const styleGap = useMemo(() => {
-        switch (flexDirection) {
-            case 'row':
-                return {
-                    columnGap: gap,
-                };
-            case 'column':
-                return {
-                    rowGap: gap,
-                };
-        }
-    }, [gap, flexDirection]);
-    const styleProps = {
-        display: 'flex',
-        flexDirection,
-        overflow,
-        position,
-        flex,
-        justifyContent,
-        alignItems,
-        height,
-        ...styleGap,
-        ...style,
+const useHeatmapVizStore = create()((set, get) => {
+    return {
+        vizRef: undefined,
+        setVizRef: (vizRef) => set({ vizRef }),
     };
-    return (jsx("div", { id: id, style: styleProps, children: children }));
-};
+});
 
-const ContentHeader = ({ children }) => {
-    return (jsx(BoxStack, { id: "gx-hm-content-header", flexDirection: "row", alignItems: "center", overflow: "auto", children: children }));
+const useRegisterConfig = () => {
+    const config = useHeatmapDataStore((state) => state.config);
+    const setIsRendering = useHeatmapDataStore((state) => state.setIsRendering);
+    useEffect(() => {
+        setIsRendering(true);
+        setTimeout(() => {
+            setIsRendering(false);
+        }, 1000);
+    }, [config]);
 };
 
-const HEATMAP_IFRAME = {
-    id: 'clarity-iframe',
-    title: 'Clarity Session Replay',
-    sandbox: 'allow-same-origin allow-scripts',
-    scrolling: 'no',
-    height: '100%',
+const useRegisterControl = (control) => {
+    const registerControl = useHeatmapControlStore((state) => state.registerControl);
+    registerControl('Sidebar', control.Sidebar);
+    registerControl('TopBar', control.TopBar);
+    registerControl('Toolbar', control.Toolbar);
+    registerControl('MetricBar', control.MetricBar);
+    registerControl('VizLoading', control.VizLoading);
 };
 
-const HEATMAP_CONFIG = {
-    paddingBlock: 0,
+const useRegisterData = (data) => {
+    const setData = useHeatmapDataStore((state) => state.setData);
+    const setIsRendering = useHeatmapDataStore((state) => state.setIsRendering);
+    const handleSetData = useCallback((data) => {
+        if (!data)
+            return;
+        setData(data);
+        setIsRendering(false);
+    }, [data]);
+    useEffect(() => {
+        handleSetData(data);
+    }, [data]);
 };
-const HEATMAP_STYLE = {
-    wrapper: {
-        padding: `${HEATMAP_CONFIG.paddingBlock}px 0`,
-    },
+
+const useRegisterHeatmap = (clickmap) => {
+    const setClickmap = useHeatmapDataStore((state) => state.setClickmap);
+    const handleSetClickmap = useCallback((clickmap) => {
+        if (!clickmap)
+            return;
+        setClickmap(clickmap);
+    }, [clickmap]);
+    useEffect(() => {
+        handleSetClickmap(clickmap);
+    }, [clickmap]);
 };
 
 const useClickedElement = ({ selectedElement, heatmapInfo, getRect }) => {
@@ -340,107 +389,40 @@ const getElementAtPoint = (doc, x, y) => {
     return element;
 };
 
-const recreateIframe = (iframeRef, config) => {
-    const container = iframeRef.current?.parentElement;
-    if (!container)
-        return;
-    const oldIframe = iframeRef.current;
-    if (!oldIframe?.contentDocument?.body.innerHTML) {
-        return oldIframe;
-    }
-    if (oldIframe && oldIframe.parentElement) {
-        oldIframe.parentElement.removeChild(oldIframe);
-    }
-    const newIframe = document.createElement('iframe');
-    newIframe.id = HEATMAP_IFRAME.id;
-    newIframe.title = HEATMAP_IFRAME.title;
-    newIframe.sandbox = HEATMAP_IFRAME.sandbox;
-    newIframe.scrolling = HEATMAP_IFRAME.scrolling;
-    newIframe.width = config?.width ? `${config.width}px` : '100%';
-    // Append to container
-    container.appendChild(newIframe);
-    // Update ref
-    iframeRef.current = newIframe;
-    return newIframe;
-};
-
-function isMobileDevice(userAgent) {
-    if (!userAgent)
-        return false;
-    return /android|webos|iphone|ipad|ipod|blackberry|windows phone|opera mini|iemobile|mobile|silk|fennec|bada|tizen|symbian|nokia|palmsource|meego|sailfish|kindle|playbook|bb10|rim/i.test(userAgent);
-}
-
 const useHeatmapRender = () => {
     const data = useHeatmapDataStore((state) => state.data);
     const config = useHeatmapDataStore((state) => state.config);
-    const setConfig = useHeatmapDataStore((state) => state.setConfig);
-    const clickmap = useHeatmapDataStore((state) => state.clickmap);
-    const visualizerRef = useRef(null);
+    const setVizRef = useHeatmapVizStore((state) => state.setVizRef);
     const iframeRef = useRef(null);
-    const initializeVisualizer = useCallback((envelope, userAgent) => {
-        const iframe = iframeRef.current;
-        if (!iframe?.contentWindow)
-            return null;
-        const visualizer = new Visualizer();
-        const mobile = isMobileDevice(userAgent);
-        visualizer.setup(iframe.contentWindow, {
-            version: envelope.version,
-            onresize: (width) => {
-                setConfig({ width });
-            },
-            mobile,
-            vNext: true,
-            locale: 'en-us',
-        });
-        return visualizer;
-    }, []);
-    // Process and render heatmap HTML
     const renderHeatmap = useCallback(async (payloads) => {
         if (!payloads || payloads.length === 0)
             return;
-        let visualizer = new Visualizer();
-        const iframe = recreateIframe(iframeRef, config);
-        // const merged = visualizer.merge(payloads);
-        // setIframeHeight(Number(iframeRef.current?.height || 0));
-        // for (const decoded of payloads) {
-        //   // Initialize on first sequence
-        //   if (decoded.envelope.sequence === 1) {
-        //     const userAgent = (decoded.dimension?.[0]?.data[0]?.[0] as string) || '';
-        //     visualizer = initializeVisualizer(decoded.envelope as any, userAgent);
-        //     if (!visualizer) return;
-        //     visualizerRef.current = visualizer;
-        //   }
-        //   if (!visualizer) continue;
-        //   // Merge and process DOM
-        //   const merged = visualizer.merge([decoded]);
-        //   visualizer.dom(merged.dom);
-        // }
-        // Render static HTML
-        if (visualizer && iframe?.contentWindow) {
-            await visualizer.html(payloads, iframe.contentWindow);
-            visualizerRef.current = visualizer;
-        }
-    }, [initializeVisualizer]);
+        const visualizer = new Visualizer();
+        const iframe = iframeRef.current;
+        if (!iframe?.contentWindow)
+            return;
+        await visualizer.html(payloads, iframe.contentWindow);
+        setVizRef(visualizer);
+    }, []);
     useEffect(() => {
         if (!data || data.length === 0)
             return;
         renderHeatmap(data);
         return () => {
-            visualizerRef.current = null;
+            setVizRef(null);
         };
-    }, [config, data, renderHeatmap]);
-    useEffect(() => {
-        if (!visualizerRef.current || !clickmap || clickmap.length === 0)
-            return;
-        visualizerRef.current.clearmap();
-        visualizerRef.current?.clickmap(clickmap);
-    }, [clickmap]);
+    }, [config, data]);
     return {
         iframeRef,
-        clarityVisualizer: visualizerRef.current,
     };
 };
 
+function isMobileDevice(userAgent) {
+    if (!userAgent)
+        return false;
+    return /android|webos|iphone|ipad|ipod|blackberry|windows phone|opera mini|iemobile|mobile|silk|fennec|bada|tizen|symbian|nokia|palmsource|meego|sailfish|kindle|playbook|bb10|rim/i.test(userAgent);
+}
+
 function sortEvents(a, b) {
     return a.time - b.time;
 }
@@ -559,7 +541,6 @@ const useReplayRender = () => {
     return {
         iframeRef,
         isPlaying: isPlayingRef.current,
-        clarityVisualizer: visualizerRef.current,
         play,
         pause,
     };
@@ -646,16 +627,15 @@ const useIframeHeight = (props) => {
             console.warn('Cannot measure iframe content:', error);
         }
     }, [iframeRef, setIframeHeight]);
-    // Trigger height update when content width changes
     useEffect(() => {
+        console.log(`🚀 🐥 ~ useIframeHeight ~ contentWidth:`, contentWidth);
         if (contentWidth > 0) {
-            // Delay to allow iframe content to reflow after width change
             const timeoutId = setTimeout(() => {
                 updateIframeHeight();
             }, 100);
             return () => clearTimeout(timeoutId);
         }
-    }, [contentWidth, updateIframeHeight]);
+    }, [contentWidth]);
     useEffect(() => {
         const iframe = iframeRef.current;
         if (!iframe)
@@ -719,7 +699,7 @@ const useScaleCalculation = (props) => {
     const [scale, setScale] = useState(1);
     useEffect(() => {
         if (containerWidth > 0 && contentWidth > 0) {
-            const availableWidth = containerWidth - HEATMAP_CONFIG['paddingBlock'] * 2;
+            const availableWidth = containerWidth - HEATMAP_CONFIG['padding'] * 2;
             const calculatedScale = Math.min(availableWidth / contentWidth, 1);
             setScale(calculatedScale);
         }
@@ -772,6 +752,84 @@ const useHeatmapScale = (props) => {
     };
 };
 
+const BoxStack = ({ children, ...props }) => {
+    const id = props.id;
+    const flexDirection = props.flexDirection;
+    const overflow = props.overflow || 'hidden';
+    const position = props.position || 'relative';
+    const flex = props.flex || 'none';
+    const justifyContent = props.justifyContent;
+    const alignItems = props.alignItems;
+    const style = props.style || {};
+    const gap = props.gap || 0;
+    const height = props.height || 'auto';
+    const styleGap = useMemo(() => {
+        switch (flexDirection) {
+            case 'row':
+                return {
+                    columnGap: gap,
+                };
+            case 'column':
+                return {
+                    rowGap: gap,
+                };
+        }
+    }, [gap, flexDirection]);
+    const styleProps = {
+        display: 'flex',
+        flexDirection,
+        overflow,
+        position,
+        flex,
+        justifyContent,
+        alignItems,
+        height,
+        ...styleGap,
+        ...style,
+    };
+    return (jsx("div", { id: id, style: styleProps, children: children }));
+};
+
+const ContentTopBar = () => {
+    const controls = useHeatmapControlStore((state) => state.controls);
+    return (jsx(BoxStack, { id: "gx-hm-content-header", flexDirection: "row", alignItems: "center", overflow: "auto", style: {
+            borderBottom: `${HEATMAP_CONFIG.borderWidth}px solid ${HEATMAP_CONFIG.borderColor}`,
+        }, children: controls.TopBar ?? null }));
+};
+
+const useClickmap = () => {
+    const [isInitialized, setIsInitialized] = useState(false);
+    const clickmap = useHeatmapDataStore((state) => state.clickmap);
+    const vizRef = useHeatmapVizStore((state) => state.vizRef);
+    useEffect(() => {
+        if (isInitialized)
+            return;
+        if (!vizRef || !clickmap || clickmap.length === 0)
+            return;
+        vizRef.clearmap();
+        vizRef?.clickmap(clickmap);
+        setIsInitialized(true);
+    }, [vizRef, clickmap]);
+    return {};
+};
+
+const useScrollmap = () => {
+    useHeatmapDataStore((state) => state.clickmap);
+    return {};
+};
+
+const useHeatmapVizCanvas = ({ type }) => {
+    const heatmapRender = useMemo(() => {
+        switch (type) {
+            case IHeatmapType.Click:
+                return useClickmap;
+            case IHeatmapType.Scroll:
+                return useScrollmap;
+        }
+    }, [type]);
+    return heatmapRender?.();
+};
+
 const CLICKED_ELEMENT_ID = 'clickedElement';
 const SECONDARY_CLICKED_ELEMENT_ID = 'secondaryClickedElementID';
 const HOVERED_ELEMENT_ID = 'hoveredElement';
@@ -843,7 +901,7 @@ const ElementCallout = ({ element, target, totalClicks, isSecondary, isRecording
             setPosition({ top, left, placement });
         };
         // Initial calculation
-        calculatePosition();
+        // calculatePosition();
         // Recalculate on scroll/resize
         const handleUpdate = () => {
             requestAnimationFrame(calculatePosition);
@@ -857,7 +915,7 @@ const ElementCallout = ({ element, target, totalClicks, isSecondary, isRecording
             parentRef?.current?.removeEventListener('scroll', handleUpdate);
         };
     }, [target, parentRef]);
-    const calloutContent = (jsxs("div", { ref: calloutRef, className: `clarity-callout clarity-callout--${position.placement} ${isSecondary ? 'clarity-callout--secondary' : ''}`, style: {
+    (jsxs("div", { ref: calloutRef, className: `clarity-callout clarity-callout--${position.placement} ${isSecondary ? 'clarity-callout--secondary' : ''}`, style: {
             position: 'fixed',
             top: position.top,
             left: position.left,
@@ -1006,8 +1064,21 @@ const ElementCallout = ({ element, target, totalClicks, isSecondary, isRecording
           height: 14px;
         }
       ` })] }));
-    // Render to body using Portal
-    return createPortal(calloutContent, document.body);
+    const [portalContainer, setPortalContainer] = useState(null);
+    useEffect(() => {
+        const container = document.querySelector('#gx-hm-project-portal');
+        if (container instanceof HTMLElement) {
+            setPortalContainer(container);
+        }
+        else {
+            console.warn('Portal container #gx-hm-project-portal not found!');
+        }
+    }, []);
+    if (!portalContainer) {
+        return jsx(Fragment, {});
+    }
+    return jsx(Fragment, {});
+    // return createPortal(calloutContent, portalContainer);
 };
 
 const RankBadge = ({ index, elementRect, widthScale, clickOnElement, }) => {
@@ -1108,7 +1179,6 @@ const HeatmapElements = (props) => {
 };
 
 const VizElements = ({ width, height, iframeRef, wrapperRef, widthScale, }) => {
-    useHeatmapDataStore((state) => state.data);
     const heatmapInfo = {
         sortedElements: [
             {
@@ -1185,6 +1255,7 @@ const ReplayControls = () => {
 
 const VizDomRenderer = ({ mode = 'heatmap' }) => {
     const config = useHeatmapDataStore((state) => state.config);
+    const setIframeHeight = useHeatmapDataStore((state) => state.setIframeHeight);
     const wrapperRef = useRef(null);
     const visualRef = useRef(null);
     const { iframeRef } = useHeatmapVizRender(mode);
@@ -1197,45 +1268,65 @@ const VizDomRenderer = ({ mode = 'heatmap' }) => {
         const scrollTop = e.currentTarget.scrollTop;
         handleScroll(scrollTop);
     };
+    useHeatmapVizCanvas({ type: config?.heatmapType });
+    const cleanUp = () => {
+        setIframeHeight(0);
+    };
+    useEffect(() => {
+        return cleanUp;
+    }, []);
     return (jsxs("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',
+            paddingBottom: HEATMAP_STYLE['viz']['paddingBottom'],
+            background: HEATMAP_STYLE['viz']['background'],
         }, children: [jsx("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',
+                    height: scaledHeight > 0 ? `${scaledHeight + HEATMAP_CONFIG['padding']}px` : 'auto',
                     padding: HEATMAP_STYLE['wrapper']['padding'],
+                    borderRadius: '8px',
                 }, children: jsxs("div", { className: "gx-hm-wrapper", ref: wrapperRef, style: {
                         width: contentWidth,
                         height: iframeHeight,
                         transform: `scale(${scale})`,
                         transformOrigin: 'top center',
-                    }, children: [jsx(VizElements, { width: contentWidth, height: iframeHeight, widthScale: scale, iframeRef: iframeRef, wrapperRef: wrapperRef }), jsx("iframe", { 
-                            // key={iframeKey}
-                            ref: iframeRef, ...HEATMAP_IFRAME, width: contentWidth, height: iframeHeight, scrolling: "no" })] }) }), mode === 'replay' && jsx(ReplayControls, {})] }));
+                        paddingBlockEnd: '0',
+                    }, children: [jsx(VizElements, { width: contentWidth, height: iframeHeight, widthScale: scale, iframeRef: iframeRef, wrapperRef: wrapperRef }), jsx("iframe", { ref: iframeRef, ...HEATMAP_IFRAME, width: contentWidth, height: iframeHeight, scrolling: "no" })] }) }), mode === 'replay' && jsx(ReplayControls, {})] }));
 };
 
 const VizDomContainer = () => {
+    const controls = useHeatmapControlStore((state) => state.controls);
+    const isRendering = useHeatmapDataStore((state) => state.isRendering);
+    if (isRendering)
+        return controls.VizLoading ?? null;
     return (jsx(BoxStack, { id: "gx-hm-viz-container", flexDirection: "column", flex: "1 1 auto", overflow: "auto", children: jsx(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',
             }, children: jsx(VizDomRenderer, {}) }) }));
 };
 
-const SIDEBAR_WIDTH = 280;
-const LeftSidebar = ({ children }) => {
+const ContentMetricBar = () => {
+    const controls = useHeatmapControlStore((state) => state.controls);
+    return (jsx(BoxStack, { id: "gx-hm-content-header", flexDirection: "row", alignItems: "center", overflow: "auto", style: {
+            borderBottom: `${HEATMAP_CONFIG.borderWidth}px solid ${HEATMAP_CONFIG.borderColor}`,
+        }, children: controls.MetricBar ?? null }));
+};
+
+const ContentToolbar = () => {
+    const controls = useHeatmapControlStore((state) => state.controls);
+    return (jsx("div", { id: "gx-hm-content-toolbar", style: { position: 'absolute', bottom: 0, left: 0, right: 0, padding: '8px' }, children: controls.Toolbar ?? null }));
+};
+
+const LeftSidebar = () => {
+    const controls = useHeatmapControlStore((state) => state.controls);
     const isHideSidebar = useHeatmapDataStore((state) => state.state.hideSidebar);
+    const config = useHeatmapDataStore((state) => state.config);
+    const sidebarWidth = config?.sidebarWidth || DEFAULT_SIDEBAR_WIDTH;
     if (isHideSidebar) {
         return null;
     }
@@ -1248,41 +1339,37 @@ const LeftSidebar = ({ children }) => {
                     transform: 'translateX(-100%)',
                     visibility: 'hidden',
                 }
-                : { width: `${SIDEBAR_WIDTH}px` }),
-        }, children: jsx("div", { className: "gx-hm-sidebar-wrapper", style: { height: '100%', width: `${SIDEBAR_WIDTH}px` }, children: children }) }));
+                : { width: `${sidebarWidth}px + ${HEATMAP_CONFIG.borderWidth}px` }),
+        }, children: jsx("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}`,
+            }, children: controls.Sidebar ?? null }) }));
 };
 
-const WrapperPreview = ({ children }) => {
-    return (jsxs("div", { className: "gx-hm-container", style: { display: 'flex', overflowY: 'hidden', flex: '1', position: 'relative' }, children: [jsx(LeftSidebar, { children: children }), jsx(VizDomContainer, {})] }));
+const WrapperPreview = () => {
+    return (jsxs(BoxStack, { id: "gx-hm-container", flexDirection: "row", overflow: "hidden", flex: "1", position: "relative", children: [jsx(LeftSidebar, {}), jsxs(BoxStack, { flexDirection: "column", flex: "1", children: [jsx(ContentMetricBar, {}), jsx(VizDomContainer, {}), jsx(ContentToolbar, {})] })] }));
 };
 
-const WrapperLayout = ({ header, toolbar, sidebar }) => {
-    return (jsxs(BoxStack, { id: "gx-hm-layout", flexDirection: "column", flex: "1", children: [jsx(ContentHeader, { children: header }), jsx(ContentHeader, { children: toolbar }), jsx(WrapperPreview, { children: sidebar })] }));
+const WrapperLayout = () => {
+    return (jsxs(BoxStack, { id: "gx-hm-layout", flexDirection: "column", flex: "1", children: [jsx(ContentTopBar, {}), jsx(WrapperPreview, {})] }));
 };
 
-const HeatmapLayout = ({ data, clickmap, header, toolbar, sidebar, }) => {
-    const setData = useHeatmapDataStore((state) => state.setData);
-    const setClickmap = useHeatmapDataStore((state) => state.setClickmap);
-    const handleSetClickmap = useCallback((clickmap) => {
-        if (!clickmap)
-            return;
-        setClickmap(clickmap);
-    }, [clickmap]);
-    const handleSetData = useCallback((data) => {
-        if (!data)
-            return;
-        setData(data);
-    }, [data]);
-    useEffect(() => {
-        handleSetData(data);
-    }, [data]);
-    useEffect(() => {
-        handleSetClickmap(clickmap);
-    }, [clickmap]);
-    return (jsx(BoxStack, { id: "gx-hm-project", flexDirection: "column", flex: "1", height: "100%", children: jsx(BoxStack, { id: "gx-hm-project-content", flexDirection: "column", flex: "1", children: jsx("div", { style: {
+const HeatmapLayout = ({ data, clickmap, controls }) => {
+    useRegisterControl(controls);
+    useRegisterData(data);
+    useRegisterHeatmap(clickmap);
+    useRegisterConfig();
+    return (jsx(BoxStack, { id: "gx-hm-project", flexDirection: "column", flex: "1", height: "100%", style: getVariableStyle(), children: jsx(BoxStack, { id: "gx-hm-project-content", flexDirection: "column", flex: "1", children: jsx("div", { style: {
                     minHeight: '100%',
                     display: 'flex',
-                }, children: jsx(WrapperLayout, { header: header, toolbar: toolbar, sidebar: sidebar }) }) }) }));
+                }, children: jsx(WrapperLayout, {}) }) }) }));
+    function getVariableStyle() {
+        return {
+            '--gx-hm-border-width': `${HEATMAP_CONFIG.borderWidth}px`,
+            '--gx-hm-border-color': `${HEATMAP_CONFIG.borderColor}`,
+        };
+    }
 };
 
 var PanelContent;
@@ -1303,4 +1390,4 @@ var ErrorType;
     ErrorType["DataError"] = "DataError";
 })(ErrorType || (ErrorType = {}));
 
-export { GraphView, HeatmapLayout, useHeatmapDataStore };
+export { GraphView, HeatmapLayout, IHeatmapType, useHeatmapDataStore };

package/dist/esm/stores/comp.d.ts

@@ -0,0 +1,7 @@
+import { IHeatmapControl } from '../types/control';
+export interface IHeatmapControlStore {
+    controls: IHeatmapControl;
+    registerControl: (key: keyof IHeatmapControl, control: IHeatmapControl[keyof IHeatmapControl]) => void;
+}
+export declare const useHeatmapControlStore: import("zustand").UseBoundStore<import("zustand").StoreApi<IHeatmapControlStore>>;
+//# sourceMappingURL=comp.d.ts.map

package/dist/esm/stores/comp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"comp.d.ts","sourceRoot":"","sources":["../../src/stores/comp.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,eAAe,CAAC;IAC1B,eAAe,EAAE,CACf,GAAG,EAAE,MAAM,eAAe,EAC1B,OAAO,EAAE,eAAe,CAAC,MAAM,eAAe,CAAC,KAC5C,IAAI,CAAC;CACX;AAED,eAAO,MAAM,sBAAsB,mFAkBjC,CAAC"}

package/dist/esm/stores/data.d.ts

@@ -8,6 +8,8 @@ export interface IHeatmapDataStore {
     config?: IHeatmapConfig;
     iframeHeight: number;
     state: IHeatmapState;
+    isRendering: boolean;
+    setIsRendering: (isRendering: boolean) => void;
     setState: (state: IHeatmapState) => void;
     setData: (data: DecodedPayload[]) => void;
     setClickmap: (clickmap: ClickMapPoint[]) => void;

package/dist/esm/stores/data.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../src/stores/data.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAEzE,MAAM,WAAW,aAAa;IAC5B,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;IAC3B,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,OAAO,EAAE,CAAC,IAAI,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IAC1C,WAAW,EAAE,CAAC,QAAQ,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IACjD,SAAS,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC3C,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,cAAc,EAAE,KAAK,EAAE,cAAc,CAAC,MAAM,cAAc,CAAC,KAAK,IAAI,CAAC;IAC9F,eAAe,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,eAAO,MAAM,mBAAmB,gFAgB9B,CAAC"}
+{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../src/stores/data.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,cAAc,EAAgB,MAAM,UAAU,CAAC;AACvF,MAAM,WAAW,aAAa;IAC5B,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;IAC3B,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,aAAa,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,OAAO,EAAE,CAAC,IAAI,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IAC1C,WAAW,EAAE,CAAC,QAAQ,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IACjD,SAAS,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC3C,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,cAAc,EAAE,KAAK,EAAE,cAAc,CAAC,MAAM,cAAc,CAAC,KAAK,IAAI,CAAC;IAC9F,eAAe,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,eAAO,MAAM,mBAAmB,gFAsB9B,CAAC"}

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

@@ -1,2 +1,4 @@
+export * from './comp';
 export * from './data';
+export * from './viz';
 //# sourceMappingURL=index.d.ts.map