@gemx-dev/heatmap-react 3.5.5 → 3.5.7

package/dist/esm/index.js

@@ -0,0 +1,668 @@
+"use client"
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useNodesState, ReactFlow, Controls, Background } from '@xyflow/react';
+import { useEffect, useMemo, useRef, useCallback, useState } from 'react';
+import { Visualizer } from '@gemx-dev/clarity-visualize';
+import { create } from 'zustand';
+
+const initialNodes = { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } };
+const GraphView = ({ children, width, height }) => {
+    const [nodes, setNodes, onNodesChange] = useNodesState([
+        {
+            ...initialNodes,
+            width: width,
+            height: height,
+        },
+    ]);
+    const CustomNode = () => {
+        return jsx(Fragment, { children: children });
+    };
+    const nodeTypes = {
+        default: CustomNode,
+    };
+    useEffect(() => {
+        if (!width)
+            return;
+        setNodes((prev) => {
+            const node = prev.find((node) => node.id === '1');
+            const newNode = {
+                ...node,
+                measured: { height: height, width: width },
+                height: height,
+                width: width,
+            };
+            return [newNode];
+        });
+    }, [width, height, setNodes]);
+    return (jsxs(ReactFlow, { nodes: nodes, nodeTypes: nodeTypes, onNodesChange: onNodesChange, debug: true, minZoom: 0.5, maxZoom: 2, fitView: true, children: [jsx(Controls, {}), jsx(Background, {})] }));
+};
+
+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 ContentHeader = ({ children }) => {
+    return (jsx(BoxStack, { id: "gx-hm-content-header", flexDirection: "row", alignItems: "center", overflow: "auto", children: children }));
+};
+
+const HEATMAP_IFRAME = {
+    id: 'clarity-iframe',
+    title: 'Clarity Session Replay',
+    sandbox: 'allow-same-origin allow-scripts',
+    scrolling: 'no',
+    height: '100%',
+};
+
+const HEATMAP_CONFIG = {
+    paddingBlock: 0,
+};
+const HEATMAP_STYLE = {
+    wrapper: {
+        padding: `${HEATMAP_CONFIG.paddingBlock}px 0`,
+    },
+};
+
+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;
+};
+
+const useHeatmapDataStore = create()((set, get) => ({
+    data: undefined,
+    config: undefined,
+    iframeHeight: 0,
+    state: {
+        hideSidebar: false,
+    },
+    setData: (data) => set({ data }),
+    setState: (state) => set({ state: { ...get().state, ...state } }),
+    setConfig: (config) => set({ config: { ...get().config, ...config } }),
+    setIframeHeight: (iframeHeight) => set({ iframeHeight }),
+}));
+
+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 visualizerRef = useRef(null);
+    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;
+    }, [setConfig]);
+    // Process and render heatmap HTML
+    const renderHeatmap = useCallback(async (payloads) => {
+        if (!payloads || payloads.length === 0)
+            return;
+        let visualizer = visualizerRef.current || new Visualizer();
+        const iframe = recreateIframe(iframeRef, config);
+        // 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);
+        }
+    }, [initializeVisualizer]);
+    useEffect(() => {
+        if (!data || data.length === 0)
+            return;
+        renderHeatmap(data);
+        return () => {
+            visualizerRef.current = null;
+        };
+    }, [config, data, renderHeatmap]);
+    return {
+        iframeRef,
+    };
+};
+
+function sortEvents(a, b) {
+    return a.time - b.time;
+}
+
+const useReplayRender = () => {
+    const data = useHeatmapDataStore((state) => state.data);
+    const setConfig = useHeatmapDataStore((state) => state.setConfig);
+    const visualizerRef = useRef(null);
+    const iframeRef = useRef(null);
+    const eventsRef = useRef([]);
+    const animationFrameRef = useRef(null);
+    const isPlayingRef = useRef(false);
+    // Initialize visualizer for replay
+    const initializeVisualizer = useCallback((envelope, userAgent) => {
+        const iframe = iframeRef.current;
+        if (!iframe?.contentWindow)
+            return null;
+        // Clear previous events
+        eventsRef.current = [];
+        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;
+    }, [setConfig]);
+    // Animation loop for replay
+    const replayLoop = useCallback(() => {
+        if (!isPlayingRef.current)
+            return;
+        const events = eventsRef.current;
+        const visualizer = visualizerRef.current;
+        if (!visualizer || events.length === 0) {
+            animationFrameRef.current = requestAnimationFrame(replayLoop);
+            return;
+        }
+        const event = events[0];
+        const end = event.time + 16; // 60FPS => 16ms per frame
+        let index = 0;
+        // Get events within current frame
+        while (events[index] && events[index].time < end) {
+            index++;
+        }
+        // Render events for this frame
+        if (index > 0) {
+            visualizer.render(events.splice(0, index));
+        }
+        animationFrameRef.current = requestAnimationFrame(replayLoop);
+    }, []);
+    // Start replay
+    const startReplay = useCallback(async (payloads) => {
+        if (!payloads || payloads.length === 0)
+            return;
+        let visualizer = visualizerRef.current;
+        for (const decoded of payloads) {
+            // Initialize on first sequence
+            if (decoded.envelope.sequence === 1) {
+                const userAgent = decoded.dimension?.[0]?.data[0]?.[0] || '';
+                visualizer = initializeVisualizer(decoded.envelope, userAgent);
+                if (!visualizer)
+                    return;
+                visualizerRef.current = visualizer;
+            }
+            if (!visualizer)
+                continue;
+            // Merge events and DOM
+            const merged = visualizer.merge([decoded]);
+            eventsRef.current = eventsRef.current.concat(merged.events).sort(sortEvents);
+            visualizer.dom(merged.dom);
+        }
+        // Render HTML
+        if (visualizer && iframeRef.current?.contentWindow) {
+            await visualizer.html(payloads, iframeRef.current.contentWindow);
+        }
+        // Auto-start replay
+        isPlayingRef.current = true;
+        animationFrameRef.current = requestAnimationFrame(replayLoop);
+    }, [initializeVisualizer, replayLoop]);
+    // Play control
+    const play = useCallback(() => {
+        if (!isPlayingRef.current) {
+            isPlayingRef.current = true;
+            animationFrameRef.current = requestAnimationFrame(replayLoop);
+        }
+    }, [replayLoop]);
+    // Pause control
+    const pause = useCallback(() => {
+        isPlayingRef.current = false;
+        if (animationFrameRef.current) {
+            cancelAnimationFrame(animationFrameRef.current);
+            animationFrameRef.current = null;
+        }
+    }, []);
+    // Main effect: Start replay when data changes
+    useEffect(() => {
+        if (!data || data.length === 0)
+            return;
+        startReplay(data);
+        // Cleanup
+        return () => {
+            isPlayingRef.current = false;
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+                animationFrameRef.current = null;
+            }
+            eventsRef.current = [];
+            visualizerRef.current = null;
+        };
+    }, [data, startReplay]);
+    return {
+        iframeRef,
+        isPlaying: isPlayingRef.current,
+        play,
+        pause,
+    };
+};
+
+const useHeatmapVizRender = (mode) => {
+    const heatmapResult = useMemo(() => {
+        switch (mode) {
+            case 'heatmap':
+                return useHeatmapRender;
+            case 'replay':
+                return useReplayRender;
+        }
+    }, [mode]);
+    return heatmapResult();
+};
+
+const useContainerDimensions = (props) => {
+    const { wrapperRef } = props;
+    const [containerWidth, setContainerWidth] = useState(0);
+    const [containerHeight, setContainerHeight] = useState(0);
+    const resizeObserverRef = useRef(null);
+    const updateDimensions = useCallback(() => {
+        const scrollContainer = wrapperRef.current?.parentElement?.parentElement;
+        if (scrollContainer) {
+            setContainerWidth(scrollContainer.clientWidth);
+            setContainerHeight(scrollContainer.clientHeight);
+        }
+    }, [wrapperRef]);
+    useEffect(() => {
+        const scrollContainer = wrapperRef.current?.parentElement?.parentElement;
+        if (!scrollContainer || typeof window.ResizeObserver === 'undefined') {
+            return;
+        }
+        resizeObserverRef.current = new ResizeObserver(updateDimensions);
+        resizeObserverRef.current.observe(scrollContainer);
+        updateDimensions();
+        return () => {
+            if (resizeObserverRef.current && scrollContainer) {
+                resizeObserverRef.current.unobserve(scrollContainer);
+            }
+        };
+    }, [wrapperRef, updateDimensions]);
+    return { containerWidth, containerHeight };
+};
+
+const useContentDimensions = (props) => {
+    const { iframeRef, config } = props;
+    const [contentWidth, setContentWidth] = useState(0);
+    useEffect(() => {
+        if (config?.width) {
+            if (iframeRef.current) {
+                iframeRef.current.width = `${config.width}px`;
+            }
+            setContentWidth(config.width);
+        }
+    }, [config?.width, iframeRef]);
+    return { contentWidth };
+};
+
+// Hook 3: Iframe Height Observer
+const useIframeHeight = (props) => {
+    const { iframeRef, contentWidth } = props;
+    const iframeHeight = useHeatmapDataStore((state) => state.iframeHeight);
+    const setIframeHeight = useHeatmapDataStore((state) => state.setIframeHeight);
+    const resizeObserverRef = useRef(null);
+    const mutationObserverRef = useRef(null);
+    const updateIframeHeight = useCallback(() => {
+        const iframe = iframeRef.current;
+        if (!iframe)
+            return;
+        try {
+            const iframeDocument = iframe.contentDocument;
+            const iframeBody = iframeDocument?.body;
+            if (!iframeBody)
+                return;
+            const bodyHeight = Math.max(iframeBody.scrollHeight, iframeBody.offsetHeight, iframeBody.clientHeight);
+            if (bodyHeight > 0) {
+                iframe.height = `${bodyHeight}px`;
+                setIframeHeight(bodyHeight);
+            }
+        }
+        catch (error) {
+            console.warn('Cannot measure iframe content:', error);
+        }
+    }, [iframeRef, setIframeHeight]);
+    // Trigger height update when content width changes
+    useEffect(() => {
+        if (contentWidth > 0) {
+            // Delay to allow iframe content to reflow after width change
+            const timeoutId = setTimeout(() => {
+                updateIframeHeight();
+            }, 100);
+            return () => clearTimeout(timeoutId);
+        }
+    }, [contentWidth, updateIframeHeight]);
+    useEffect(() => {
+        const iframe = iframeRef.current;
+        if (!iframe)
+            return;
+        const setupObservers = () => {
+            try {
+                const iframeDocument = iframe.contentDocument;
+                const iframeBody = iframeDocument?.body;
+                if (!iframeBody)
+                    return;
+                // Cleanup existing observers
+                if (resizeObserverRef.current) {
+                    resizeObserverRef.current.disconnect();
+                }
+                if (mutationObserverRef.current) {
+                    mutationObserverRef.current.disconnect();
+                }
+                // ResizeObserver for size changes
+                if (typeof window.ResizeObserver !== 'undefined') {
+                    resizeObserverRef.current = new ResizeObserver(updateIframeHeight);
+                    resizeObserverRef.current.observe(iframeBody);
+                }
+                // MutationObserver for DOM changes
+                if (typeof window.MutationObserver !== 'undefined') {
+                    mutationObserverRef.current = new MutationObserver(updateIframeHeight);
+                    mutationObserverRef.current.observe(iframeBody, {
+                        childList: true,
+                        subtree: true,
+                        attributes: true,
+                        characterData: true,
+                    });
+                }
+                // Initial measurement
+                updateIframeHeight();
+            }
+            catch (error) {
+                console.warn('Cannot access iframe content:', error);
+            }
+        };
+        if (iframe.contentDocument?.readyState === 'complete') {
+            setupObservers();
+        }
+        else {
+            iframe.addEventListener('load', setupObservers, { once: true });
+        }
+        return () => {
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.disconnect();
+            }
+            if (mutationObserverRef.current) {
+                mutationObserverRef.current.disconnect();
+            }
+            iframe.removeEventListener('load', setupObservers);
+        };
+    }, [iframeRef, updateIframeHeight]);
+    return { iframeHeight };
+};
+
+const useScaleCalculation = (props) => {
+    const { containerWidth, contentWidth } = props;
+    const [scale, setScale] = useState(1);
+    useEffect(() => {
+        if (containerWidth > 0 && contentWidth > 0) {
+            const availableWidth = containerWidth - HEATMAP_CONFIG['paddingBlock'] * 2;
+            const calculatedScale = Math.min(availableWidth / contentWidth);
+            setScale(calculatedScale);
+        }
+    }, [containerWidth, contentWidth]);
+    return { scale };
+};
+
+const useScrollSync = (props) => {
+    const { iframeRef, scale } = props;
+    const handleScroll = useCallback((scrollTop) => {
+        const iframe = iframeRef.current;
+        if (!iframe || scale <= 0)
+            return;
+        try {
+            const iframeWindow = iframe.contentWindow;
+            const iframeDocument = iframe.contentDocument;
+            if (iframeWindow && iframeDocument) {
+                const iframeScrollTop = scrollTop / scale;
+                iframe.style.top = `${iframeScrollTop}px`;
+            }
+        }
+        catch (error) {
+            console.warn('Cannot sync scroll to iframe:', error);
+        }
+    }, [iframeRef, scale]);
+    return { handleScroll };
+};
+
+const useHeatmapScale = (props) => {
+    const { wrapperRef, iframeRef, config } = props;
+    // 1. Observe container dimensions
+    const { containerWidth, containerHeight } = useContainerDimensions({ wrapperRef });
+    // 2. Get content dimensions from config
+    const { contentWidth } = useContentDimensions({ iframeRef, config });
+    // 3. Observe iframe height (now reacts to width changes)
+    const { iframeHeight } = useIframeHeight({ iframeRef, contentWidth });
+    // 4. Calculate scale
+    const { scale } = useScaleCalculation({ containerWidth, contentWidth });
+    // 5. Setup scroll sync
+    const { handleScroll } = useScrollSync({ iframeRef, scale });
+    return {
+        containerWidth,
+        containerHeight,
+        contentWidth,
+        iframeHeight,
+        scale,
+        scaledWidth: contentWidth * scale,
+        scaledHeight: iframeHeight * scale,
+        handleScroll,
+    };
+};
+
+const VizElements = ({ width, height }) => {
+    return (jsx("div", { className: "gx-hm-elements", style: { width, height }, children: jsx("div", { className: "gx-hm-element" }) }));
+};
+
+const ReplayControls = () => {
+    const replayResult = useReplayRender();
+    return (jsxs("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,
+        }, children: [jsx("button", { onClick: replayResult.play, style: {
+                    padding: '8px 16px',
+                    backgroundColor: '#4CAF50',
+                    color: 'white',
+                    border: 'none',
+                    borderRadius: 4,
+                    cursor: 'pointer',
+                }, children: "Play" }), jsx("button", { onClick: replayResult.pause, style: {
+                    padding: '8px 16px',
+                    backgroundColor: '#f44336',
+                    color: 'white',
+                    border: 'none',
+                    borderRadius: 4,
+                    cursor: 'pointer',
+                }, children: "Pause" })] }));
+};
+
+const VizDomRenderer = ({ mode = 'heatmap' }) => {
+    const config = useHeatmapDataStore((state) => state.config);
+    const wrapperRef = useRef(null);
+    const visualRef = useRef(null);
+    const { iframeRef } = useHeatmapVizRender(mode);
+    const { contentWidth, iframeHeight, scale, scaledHeight, handleScroll } = useHeatmapScale({
+        wrapperRef,
+        iframeRef,
+        config,
+    });
+    const onScroll = (e) => {
+        const scrollTop = e.currentTarget.scrollTop;
+        handleScroll(scrollTop);
+    };
+    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',
+        }, 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',
+                    padding: HEATMAP_STYLE['wrapper']['padding'],
+                }, 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 }), jsx("iframe", { 
+                            // key={iframeKey}
+                            ref: iframeRef, ...HEATMAP_IFRAME, width: contentWidth, height: iframeHeight, scrolling: "no" })] }) }), mode === 'replay' && jsx(ReplayControls, {})] }));
+};
+
+const VizDomContainer = () => {
+    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 isHideSidebar = useHeatmapDataStore((state) => state.state.hideSidebar);
+    if (isHideSidebar) {
+        return null;
+    }
+    return (jsx("div", { className: "gx-hm-sidebar", style: {
+            height: '100%',
+            display: 'flex',
+            ...(isHideSidebar
+                ? {
+                    width: '0',
+                    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 }) }));
+};
+
+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 WrapperLayout = ({ header, sidebar }) => {
+    return (jsxs(BoxStack, { id: "gx-hm-layout", flexDirection: "column", flex: "1", children: [jsx(ContentHeader, { children: header }), jsx(WrapperPreview, { children: sidebar })] }));
+};
+
+const HeatmapLayout = ({ header, sidebar }) => {
+    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: {
+                    minHeight: '100%',
+                    display: 'flex',
+                }, children: jsx(WrapperLayout, { header: header, sidebar: sidebar }) }) }) }));
+};
+
+var PanelContent;
+(function (PanelContent) {
+    PanelContent["Sessions"] = "Sessions";
+    PanelContent["Timeline"] = "Timeline";
+    PanelContent["Area"] = "Area";
+    PanelContent["Click"] = "Click";
+    PanelContent["Scroll"] = "Scroll";
+    PanelContent["Attention"] = "Attention";
+})(PanelContent || (PanelContent = {}));
+var ErrorType;
+(function (ErrorType) {
+    ErrorType["NoResults"] = "NoResults";
+    ErrorType["NoClicks"] = "NoClicks";
+    ErrorType["NoScroll"] = "NoScroll";
+    ErrorType["ServerError"] = "ServerError";
+    ErrorType["DataError"] = "DataError";
+})(ErrorType || (ErrorType = {}));
+
+export { GraphView, HeatmapLayout, useHeatmapDataStore };