@zendesk/retrace/cjs/visualizer/hooks/useSpanExpansion.js

define and capture Product Operation Traces along with computed metrics with an optional friendly React beacon API

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useSpanExpansion = useSpanExpansion;
const react_1 = require("react");
function useSpanExpansion(options = {}) {
    const { initialExpandedSpans = new Set(), persistKey } = options;
    const [expandedSpans, setExpandedSpans] = (0, react_1.useState)(() => {
        if (persistKey && typeof localStorage !== 'undefined') {
            try {
                const stored = localStorage.getItem(`span-expansion-${persistKey}`);
                if (stored) {
                    const parsed = JSON.parse(stored);
                    return new Set(parsed);
                }
                return initialExpandedSpans;
            }
            catch {
                return initialExpandedSpans;
            }
        }
        return initialExpandedSpans;
    });
    const toggleSpanExpansion = (0, react_1.useCallback)((spanId) => {
        setExpandedSpans((prev) => {
            const next = new Set(prev);
            if (next.has(spanId)) {
                next.delete(spanId);
            }
            else {
                next.add(spanId);
            }
            if (persistKey && typeof localStorage !== 'undefined') {
                try {
                    localStorage.setItem(`span-expansion-${persistKey}`, JSON.stringify([...next]));
                }
                catch {
                    // Ignore storage errors
                }
            }
            return next;
        });
    }, [persistKey]);
    const isSpanExpanded = (0, react_1.useCallback)((spanId) => {
        return expandedSpans.has(spanId);
    }, [expandedSpans]);
    const collapseAll = (0, react_1.useCallback)(() => {
        setExpandedSpans(new Set());
        if (persistKey && typeof localStorage !== 'undefined') {
            try {
                localStorage.setItem(`span-expansion-${persistKey}`, JSON.stringify([]));
            }
            catch {
                // Ignore storage errors
            }
        }
    }, [persistKey]);
    const expandAll = (0, react_1.useCallback)((spans) => {
        const allSpanIds = new Set();
        const collectSpanIds = (span) => {
            if (span.children.length > 0) {
                allSpanIds.add(span.span.id);
            }
            span.children.forEach(collectSpanIds);
        };
        spans.forEach(collectSpanIds);
        setExpandedSpans(allSpanIds);
        if (persistKey && typeof localStorage !== 'undefined') {
            try {
                localStorage.setItem(`span-expansion-${persistKey}`, JSON.stringify([...allSpanIds]));
            }
            catch {
                // Ignore storage errors
            }
        }
    }, [persistKey]);
    const getVisibleSpans = (0, react_1.useCallback)((spans) => {
        const visibleSpans = [];
        const addVisibleSpans = (span) => {
            visibleSpans.push(span);
            if (expandedSpans.has(span.span.id)) {
                span.children.forEach(addVisibleSpans);
            }
        };
        spans.forEach(addVisibleSpans);
        return visibleSpans;
    }, [expandedSpans]);
    const expansionState = (0, react_1.useMemo)(() => ({
        expandedSpans,
        toggleSpanExpansion,
        isSpanExpanded,
        collapseAll,
        expandAll,
        getVisibleSpans,
    }), [
        expandedSpans,
        toggleSpanExpansion,
        isSpanExpanded,
        collapseAll,
        expandAll,
        getVisibleSpans,
    ]);
    return expansionState;
}
//# sourceMappingURL=useSpanExpansion.js.map