@gemx-dev/heatmap-react 3.5.15 → 3.5.18

package/dist/esm/index.mjs

@@ -1,696 +0,0 @@
-"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 { create } from 'zustand';
-import { Visualizer } from '@gemx-dev/clarity-visualize';
-
-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 useHeatmapDataStore = create()((set, get) => ({
-    data: undefined,
-    clickmap: undefined,
-    config: undefined,
-    iframeHeight: 0,
-    state: {
-        hideSidebar: false,
-    },
-    setData: (data) => set({ data }),
-    setClickmap: (clickmap) => set({ clickmap }),
-    setState: (state) => set({ state: { ...get().state, ...state } }),
-    setConfig: (config) => set({ config: { ...get().config, ...config } }),
-    setIframeHeight: (iframeHeight) => set({ iframeHeight }),
-}));
-
-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;
-};
-
-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 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 = 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);
-            visualizerRef.current = visualizer;
-        }
-    }, [initializeVisualizer]);
-    useEffect(() => {
-        if (!data || data.length === 0)
-            return;
-        renderHeatmap(data);
-        return () => {
-            visualizerRef.current = null;
-        };
-    }, [config, data, renderHeatmap]);
-    useEffect(() => {
-        if (!visualizerRef.current || !clickmap || clickmap.length === 0)
-            return;
-        visualizerRef.current.clearmap();
-        visualizerRef.current?.clickmap(clickmap);
-    }, [clickmap]);
-    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, 1);
-            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, 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 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: {
-                    minHeight: '100%',
-                    display: 'flex',
-                }, children: jsx(WrapperLayout, { header: header, toolbar: toolbar, 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 };