@gravity-ui/querieskit 1.5.1 → 1.6.0

package/build/esm/components/QueryGraph/QueryGraph.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useImperativeHandle","useMemo","useRef","useState","BezierMultipointConnection","ECanDrag","GraphState","GraphCanvas","useGraph","useGraphEvent","MagnifierMinus","MagnifierPlus","SquareDashed","Button","Icon","Loader","Text","Tooltip","useThemeValue","cn","createQueryGraphConnections","getQueryGraphNodeSize","validateQueryGraph","i18n","QueryGraphCanvasBlock","QueryGraphPopup","getQueryGraphNodeIconSvgs","useQueryGraphLayout","jsx","_jsx","jsxs","_jsxs","block","FIT_PADDING","ZOOM_STEP","renderEmptyBlock","Fragment","QueryGraph","_ref","nodes","edges","loading","errorContent","className","_ref$autoCenter","autoCenter","_ref$active","active","_ref$largeGraphThresh","largeGraphThreshold","renderNodePopup","onNodeClick","onError","_useState","_useState2","_slicedToArray","showLargeGraph","setShowLargeGraph","nodesRef","edgesRef","current","structureKey","concat","map","_ref2","id","kind","join","_ref3","source","target","validationError","undefined","nextError","Error","shouldConfirm","length","State","children","size","color","message","count","view","onClick","QueryGraphWithLayout","_ref4","_useState3","_useState4","popup","setPopup","rootRef","layoutBlocks","node","_objectSpread","layoutConnections","edge","sourceBlockId","targetBlockId","_useQueryGraphLayout","blocks","connections","result","resolvedStructureKey","isInitialLoading","error","graphBlocks","flatMap","position","_getQueryGraphNodeIco","iconSvg","fallbackIconSvg","iconColorToken","fallbackIconColorToken","is","name","selected","anchors","meta","graphConnections","QueryGraphRenderer","ref","forwardRef","QueryGraphRendererComponent","_ref5","forwardedRef","attachedRef","centeredRef","previousActiveRef","previousStructureRef","_useState5","_useState6","attached","setAttached","_useState7","_useState8","hoveredNodeId","setHoveredNodeId","themeValue","_useGraph","settings","connection","canDrag","NONE","canDragCamera","canZoomCamera","canCreateNewConnections","useBezierConnections","bezierConnectionDirection","showConnectionArrows","useBlocksAnchors","blockComponents","graph","api","setEntities","start","stop","_useState9","cameraService","getCameraState","scale","_useState0","setScale","_graph$cameraService$","scaleMin","scaleMax","_ref6","nextScale","_ref7","_state$meta","state","_ref8","_state$meta2","background","getComputedStyle","getPropertyValue","trim","colors","getGraphColors","updateGraphColors","canvas","belowLayerBackground","layerBackground","border","dots","visibleConnections","Boolean","changed","becameActive","frame","requestAnimationFrame","zoomToViewPort","padding","cancelAnimationFrame","handleClick","_ref9","_state$meta3","sourceEvent","mouseEvent","rect","getBoundingClientRect","left","Math","min","max","clientX","width","top","clientY","height","nodeId","selectedNode","find","defaultContent","popupContent","click","renderBlock","onStateChanged","_ref0","ATTACHED","content","placement","pin","disabled","changeZoom","data","style","delta","camera","zoom","_ref1"],"sources":["QueryGraph.tsx"],"sourcesContent":["import React, {useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';\nimport {\n    BezierMultipointConnection,\n    ECanDrag,\n    GraphState,\n    type TMultipointConnection,\n} from '@gravity-ui/graph';\nimport {GraphCanvas, useGraph, useGraphEvent} from '@gravity-ui/graph/react';\nimport {MagnifierMinus, MagnifierPlus, SquareDashed} from '@gravity-ui/icons';\nimport {Button, Icon, Loader, Text, Tooltip, useThemeValue} from '@gravity-ui/uikit';\nimport cn from 'bem-cn-lite';\n\nimport type {QueryGraphNode, QueryGraphProps} from '../../types/queryGraph';\nimport {\n    createQueryGraphConnections,\n    getQueryGraphNodeSize,\n    validateQueryGraph,\n} from './helpers/layout';\nimport i18n from './i18n';\nimport {type QueryGraphBlock, QueryGraphCanvasBlock} from './internal/QueryGraphCanvasBlock';\nimport {QueryGraphPopup} from './internal/QueryGraphPopup';\nimport {getQueryGraphNodeIconSvgs} from './internal/queryGraphIcons';\nimport {useQueryGraphLayout} from './internal/useQueryGraphLayout';\n\nimport './QueryGraph.scss';\n\nconst block = cn('qp-query-graph');\nconst FIT_PADDING = 120;\nconst ZOOM_STEP = 0.08;\nconst renderEmptyBlock = () => <React.Fragment />;\n\ntype PopupState = {nodeId: string; left: number; top: number};\n\nexport function QueryGraph({\n    nodes,\n    edges,\n    loading,\n    errorContent,\n    className,\n    autoCenter = true,\n    active = true,\n    largeGraphThreshold = 250,\n    renderNodePopup,\n    onNodeClick,\n    onError,\n}: QueryGraphProps) {\n    const [showLargeGraph, setShowLargeGraph] = useState(false);\n    const nodesRef = useRef(nodes);\n    const edgesRef = useRef(edges);\n    nodesRef.current = nodes;\n    edgesRef.current = edges;\n\n    const structureKey = useMemo(\n        () =>\n            `${nodes.map(({id, kind}) => `${id}:${kind}`).join('|')}::${edges\n                .map(({id, source, target}) => `${id}:${source}:${target}`)\n                .join('|')}`,\n        [edges, nodes],\n    );\n\n    const validationError = useMemo(() => {\n        try {\n            validateQueryGraph(nodesRef.current, edgesRef.current);\n            return undefined;\n        } catch (nextError) {\n            return nextError instanceof Error\n                ? nextError\n                : new Error('Unable to build query graph');\n        }\n        // Only graph structure affects validation.\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [structureKey]);\n    useEffect(() => {\n        if (validationError) onError?.(validationError);\n    }, [onError, validationError]);\n\n    const shouldConfirm = largeGraphThreshold !== false && nodes.length > largeGraphThreshold;\n    if (loading)\n        return (\n            <State className={className}>\n                <Loader size=\"m\" />\n            </State>\n        );\n    if (errorContent)\n        return (\n            <State className={className}>\n                <Text color=\"danger\">{errorContent}</Text>\n            </State>\n        );\n    if (validationError)\n        return (\n            <State className={className}>\n                <Text color=\"danger\">{validationError.message}</Text>\n            </State>\n        );\n    if (!nodes.length)\n        return (\n            <State className={className}>\n                <Text color=\"secondary\">{i18n('context_empty')}</Text>\n            </State>\n        );\n    if (shouldConfirm && !showLargeGraph) {\n        return (\n            <State className={className}>\n                <div className={block('large-graph')}>\n                    <Text>{i18n('context_large-graph', {count: nodes.length})}</Text>\n                    <Button view=\"action\" onClick={() => setShowLargeGraph(true)}>\n                        {i18n('action_show-graph')}\n                    </Button>\n                </div>\n            </State>\n        );\n    }\n\n    return (\n        <QueryGraphWithLayout\n            nodes={nodes}\n            edges={edges}\n            structureKey={structureKey}\n            autoCenter={autoCenter}\n            active={active}\n            renderNodePopup={renderNodePopup}\n            onNodeClick={onNodeClick}\n            onError={onError}\n            className={className}\n        />\n    );\n}\n\ntype QueryGraphWithLayoutProps = Pick<\n    QueryGraphProps,\n    | 'nodes'\n    | 'edges'\n    | 'autoCenter'\n    | 'active'\n    | 'renderNodePopup'\n    | 'onNodeClick'\n    | 'onError'\n    | 'className'\n> & {structureKey: string};\n\nfunction QueryGraphWithLayout({\n    nodes,\n    edges,\n    structureKey,\n    autoCenter,\n    active,\n    renderNodePopup,\n    onNodeClick,\n    onError,\n    className,\n}: QueryGraphWithLayoutProps) {\n    const [popup, setPopup] = useState<PopupState>();\n    const rootRef = useRef<HTMLDivElement>(null);\n    const nodesRef = useRef(nodes);\n    const edgesRef = useRef(edges);\n    nodesRef.current = nodes;\n    edgesRef.current = edges;\n\n    const layoutBlocks = useMemo(\n        () =>\n            nodesRef.current.map((node) => ({\n                id: node.id,\n                ...getQueryGraphNodeSize(node),\n            })),\n        // Node status and presentation do not affect layout.\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [structureKey],\n    );\n    const layoutConnections = useMemo(\n        () =>\n            edgesRef.current.map((edge) => ({\n                id: edge.id,\n                sourceBlockId: edge.source,\n                targetBlockId: edge.target,\n            })),\n        // Only graph structure affects layout.\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [structureKey],\n    );\n    const {result, resolvedStructureKey, isInitialLoading, error} = useQueryGraphLayout({\n        structureKey,\n        blocks: layoutBlocks,\n        connections: layoutConnections,\n        onError,\n    });\n\n    const graphBlocks = useMemo<QueryGraphBlock[]>(\n        () =>\n            nodes.flatMap((node) => {\n                const position = result?.blocks[node.id];\n                if (!position) return [];\n                const {iconSvg, fallbackIconSvg, iconColorToken, fallbackIconColorToken} =\n                    getQueryGraphNodeIconSvgs(node);\n                return [\n                    {\n                        id: node.id,\n                        is: 'query-node',\n                        name: node.name,\n                        selected: false,\n                        anchors: [],\n                        meta: {\n                            node,\n                            iconSvg,\n                            fallbackIconSvg,\n                            iconColorToken,\n                            fallbackIconColorToken,\n                        },\n                        ...getQueryGraphNodeSize(node),\n                        ...position,\n                    },\n                ];\n            }),\n        [nodes, result],\n    );\n    const graphConnections = useMemo<TMultipointConnection[]>(\n        () => createQueryGraphConnections(edges, result?.edges),\n        [edges, result],\n    );\n\n    if (error)\n        return (\n            <State className={className}>\n                <Text color=\"danger\">{error.message}</Text>\n            </State>\n        );\n    if (isInitialLoading || !result || !resolvedStructureKey)\n        return (\n            <State className={className}>\n                <Loader size=\"m\" />\n            </State>\n        );\n\n    return (\n        // The renderer is declared below to keep the public component and its states together.\n        // eslint-disable-next-line @typescript-eslint/no-use-before-define\n        <QueryGraphRenderer\n            ref={rootRef}\n            blocks={graphBlocks}\n            connections={graphConnections}\n            nodes={nodes}\n            structureKey={resolvedStructureKey}\n            autoCenter={autoCenter}\n            active={active}\n            popup={popup}\n            setPopup={setPopup}\n            renderNodePopup={renderNodePopup}\n            onNodeClick={onNodeClick}\n            className={className}\n        />\n    );\n}\n\ntype RendererProps = Pick<\n    QueryGraphProps,\n    'autoCenter' | 'active' | 'renderNodePopup' | 'onNodeClick' | 'className'\n> & {\n    blocks: QueryGraphBlock[];\n    connections: TMultipointConnection[];\n    nodes: QueryGraphNode[];\n    structureKey: string;\n    popup?: PopupState;\n    setPopup: React.Dispatch<React.SetStateAction<PopupState | undefined>>;\n};\n\nconst QueryGraphRenderer = React.forwardRef<HTMLDivElement, RendererProps>(\n    function QueryGraphRendererComponent(\n        {\n            blocks,\n            connections,\n            nodes,\n            structureKey,\n            autoCenter,\n            active,\n            popup,\n            setPopup,\n            renderNodePopup,\n            onNodeClick,\n            className,\n        },\n        forwardedRef,\n    ) {\n        const rootRef = useRef<HTMLDivElement | null>(null);\n        useImperativeHandle(forwardedRef, () => rootRef.current as HTMLDivElement);\n        const attachedRef = useRef(false);\n        const centeredRef = useRef(false);\n        const previousActiveRef = useRef(false);\n        const previousStructureRef = useRef(structureKey);\n        const [attached, setAttached] = useState(false);\n        const [hoveredNodeId, setHoveredNodeId] = useState<string>();\n        const themeValue = useThemeValue();\n        const {graph, api, setEntities, start, stop} = useGraph({\n            name: 'query-graph',\n            settings: {\n                connection: BezierMultipointConnection,\n                canDrag: ECanDrag.NONE,\n                canDragCamera: true,\n                canZoomCamera: true,\n                canCreateNewConnections: false,\n                useBezierConnections: true,\n                bezierConnectionDirection: 'horizontal',\n                showConnectionArrows: true,\n                useBlocksAnchors: false,\n                blockComponents: {'query-node': QueryGraphCanvasBlock},\n            },\n        });\n        const [scale, setScale] = useState(graph.cameraService.getCameraState().scale);\n        const {scaleMin, scaleMax} = graph.cameraService.getCameraState();\n        useGraphEvent(graph, 'camera-change', ({scale: nextScale}) => setScale(nextScale));\n        useGraphEvent(graph, 'mouseenter', ({target}) => {\n            const state = (target as {state?: QueryGraphBlock} | undefined)?.state;\n            if (state?.meta?.node) setHoveredNodeId(state.meta.node.id);\n        });\n        useGraphEvent(graph, 'mouseleave', ({target}) => {\n            const state = (target as {state?: QueryGraphBlock} | undefined)?.state;\n            if (state?.meta?.node) setHoveredNodeId(undefined);\n        });\n\n        useEffect(() => {\n            if (!rootRef.current) return;\n\n            const background = getComputedStyle(rootRef.current)\n                .getPropertyValue('--g-color-base-background')\n                .trim();\n            const connection = getComputedStyle(rootRef.current)\n                .getPropertyValue('--g-color-line-generic-accent')\n                .trim();\n            if (!background || !connection) return;\n\n            const colors = api.getGraphColors();\n            api.updateGraphColors({\n                ...colors,\n                canvas: {\n                    ...colors.canvas,\n                    belowLayerBackground: background,\n                    layerBackground: background,\n                    border: background,\n                    dots: background,\n                },\n                connection: {\n                    ...colors.connection,\n                    background: connection,\n                },\n            });\n        }, [api, themeValue]);\n\n        const visibleConnections = useMemo(\n            () =>\n                connections.map((connection) => ({\n                    ...connection,\n                    selected: Boolean(\n                        hoveredNodeId &&\n                        (connection.sourceBlockId === hoveredNodeId ||\n                            connection.targetBlockId === hoveredNodeId),\n                    ),\n                })),\n            [connections, hoveredNodeId],\n        );\n        useEffect(\n            () => setEntities({blocks, connections: visibleConnections}),\n            [blocks, setEntities, visibleConnections],\n        );\n        useEffect(() => {\n            if (!attachedRef.current) return;\n            if (active) start();\n            else stop();\n        }, [active, start, stop]);\n        useEffect(() => {\n            const changed = previousStructureRef.current !== structureKey;\n            const becameActive = active && !previousActiveRef.current;\n            let frame: number | undefined;\n            if (\n                attached &&\n                active &&\n                (!centeredRef.current || becameActive || (autoCenter && changed))\n            ) {\n                frame = requestAnimationFrame(() => {\n                    api.zoomToViewPort({padding: FIT_PADDING});\n                    centeredRef.current = true;\n                });\n            }\n            previousActiveRef.current = Boolean(active);\n            previousStructureRef.current = structureKey;\n            setPopup(undefined);\n            return () => {\n                if (frame !== undefined) cancelAnimationFrame(frame);\n            };\n        }, [active, api, attached, autoCenter, setPopup, structureKey]);\n\n        const handleClick: NonNullable<React.ComponentProps<typeof GraphCanvas>['click']> = ({\n            target,\n            sourceEvent,\n        }) => {\n            const state = (target as {state?: QueryGraphBlock; isBlock?: boolean} | undefined)\n                ?.state;\n            if (!state?.meta?.node || !rootRef.current) {\n                setPopup(undefined);\n                return;\n            }\n            const mouseEvent = sourceEvent as MouseEvent;\n            const rect = rootRef.current.getBoundingClientRect();\n            const left = Math.min(\n                Math.max(16, mouseEvent.clientX - rect.left + 12),\n                rect.width - 456,\n            );\n            const top = Math.min(\n                Math.max(16, mouseEvent.clientY - rect.top + 12),\n                rect.height - 240,\n            );\n            setPopup({\n                nodeId: state.meta.node.id,\n                left: Math.max(16, left),\n                top: Math.max(16, top),\n            });\n            onNodeClick?.(state.meta.node, mouseEvent);\n        };\n\n        const selectedNode = popup ? nodes.find((node) => node.id === popup.nodeId) : undefined;\n        const defaultContent = selectedNode ? <QueryGraphPopup node={selectedNode} /> : null;\n        let popupContent: React.ReactNode = null;\n        if (selectedNode) {\n            popupContent = renderNodePopup\n                ? renderNodePopup({node: selectedNode, defaultContent})\n                : defaultContent;\n        }\n\n        return (\n            <div ref={rootRef} className={block(null, className)}>\n                <GraphCanvas\n                    graph={graph}\n                    className={block('canvas')}\n                    click={handleClick}\n                    renderBlock={renderEmptyBlock}\n                    onStateChanged={({state}) => {\n                        if (state === GraphState.ATTACHED) {\n                            if (active) start();\n                            attachedRef.current = true;\n                            setAttached(true);\n                        }\n                    }}\n                />\n                <div className={block('toolbox')}>\n                    <Tooltip content={i18n('action_zoom-in')} placement=\"right\">\n                        <Button\n                            view=\"raised\"\n                            pin=\"round-brick\"\n                            aria-label={i18n('action_zoom-in')}\n                            disabled={scale >= scaleMax}\n                            onClick={() => changeZoom(graph, ZOOM_STEP)}\n                        >\n                            <Icon data={MagnifierPlus} />\n                        </Button>\n                    </Tooltip>\n                    <Tooltip content={i18n('action_fit')} placement=\"right\">\n                        <Button\n                            view=\"raised\"\n                            pin=\"brick-brick\"\n                            aria-label={i18n('action_fit')}\n                            onClick={() => api.zoomToViewPort({padding: FIT_PADDING})}\n                        >\n                            <Icon data={SquareDashed} />\n                        </Button>\n                    </Tooltip>\n                    <Tooltip content={i18n('action_zoom-out')} placement=\"right\">\n                        <Button\n                            view=\"raised\"\n                            pin=\"brick-round\"\n                            aria-label={i18n('action_zoom-out')}\n                            disabled={scale <= scaleMin}\n                            onClick={() => changeZoom(graph, -ZOOM_STEP)}\n                        >\n                            <Icon data={MagnifierMinus} />\n                        </Button>\n                    </Tooltip>\n                </div>\n                {popup && popupContent !== null && (\n                    <div className={block('popup')} style={{left: popup.left, top: popup.top}}>\n                        {popupContent}\n                    </div>\n                )}\n            </div>\n        );\n    },\n);\n\nfunction changeZoom(graph: ReturnType<typeof useGraph>['graph'], delta: number) {\n    const camera = graph.cameraService;\n    const state = camera.getCameraState();\n    const nextScale = Math.min(state.scaleMax, Math.max(state.scaleMin, state.scale + delta));\n    camera.zoom(state.width / 2, state.height / 2, nextScale);\n}\n\nfunction State({className, children}: {className?: string; children: React.ReactNode}) {\n    return (\n        <div className={block(null, className)}>\n            <div className={block('state')}>{children}</div>\n        </div>\n    );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAK,IAAGC,SAAS,EAAEC,mBAAmB,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAO,OAAO;AACtF,SACIC,0BAA0B,EAC1BC,QAAQ,EACRC,UAAU,QAEP,mBAAmB;AAC1B,SAAQC,WAAW,EAAEC,QAAQ,EAAEC,aAAa,QAAO,yBAAyB;AAC5E,SAAQC,cAAc,EAAEC,aAAa,EAAEC,YAAY,QAAO,mBAAmB;AAC7E,SAAQC,MAAM,EAAEC,IAAI,EAAEC,MAAM,EAAEC,IAAI,EAAEC,OAAO,EAAEC,aAAa,QAAO,mBAAmB;AACpF,OAAOC,EAAE,MAAM,aAAa;AAG5B,SACIC,2BAA2B,EAC3BC,qBAAqB,EACrBC,kBAAkB;AAEtB,OAAOC,IAAI;AACX,SAA8BC,qBAAqB;AACnD,SAAQC,eAAe;AACvB,SAAQC,yBAAyB;AACjC,SAAQC,mBAAmB;AAE3B;AAA2B,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE3B,IAAMC,KAAK,GAAGb,EAAE,CAAC,gBAAgB,CAAC;AAClC,IAAMc,WAAW,GAAG,GAAG;AACvB,IAAMC,SAAS,GAAG,IAAI;AACtB,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAA;EAAA,oBAASN,IAAA,CAAC/B,KAAK,CAACsC,QAAQ,IAAE,CAAC;AAAA;AAIjD,OAAO,SAASC,UAAUA,CAAAC,IAAA,EAYN;EAAA,IAXhBC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IACPC,YAAY,GAAAJ,IAAA,CAAZI,YAAY;IACZC,SAAS,GAAAL,IAAA,CAATK,SAAS;IAAAC,eAAA,GAAAN,IAAA,CACTO,UAAU;IAAVA,UAAU,GAAAD,eAAA,cAAG,IAAI,GAAAA,eAAA;IAAAE,WAAA,GAAAR,IAAA,CACjBS,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,IAAI,GAAAA,WAAA;IAAAE,qBAAA,GAAAV,IAAA,CACbW,mBAAmB;IAAnBA,mBAAmB,GAAAD,qBAAA,cAAG,GAAG,GAAAA,qBAAA;IACzBE,eAAe,GAAAZ,IAAA,CAAfY,eAAe;IACfC,WAAW,GAAAb,IAAA,CAAXa,WAAW;IACXC,OAAO,GAAAd,IAAA,CAAPc,OAAO;EAEP,IAAAC,SAAA,GAA4ClD,QAAQ,CAAC,KAAK,CAAC;IAAAmD,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAApDG,cAAc,GAAAF,UAAA;IAAEG,iBAAiB,GAAAH,UAAA;EACxC,IAAMI,QAAQ,GAAGxD,MAAM,CAACqC,KAAK,CAAC;EAC9B,IAAMoB,QAAQ,GAAGzD,MAAM,CAACsC,KAAK,CAAC;EAC9BkB,QAAQ,CAACE,OAAO,GAAGrB,KAAK;EACxBoB,QAAQ,CAACC,OAAO,GAAGpB,KAAK;EAExB,IAAMqB,YAAY,GAAG5D,OAAO,CACxB;IAAA,UAAA6D,MAAA,CACOvB,KAAK,CAACwB,GAAG,CAAC,UAAAC,KAAA;MAAA,IAAEC,EAAE,GAAAD,KAAA,CAAFC,EAAE;QAAEC,IAAI,GAAAF,KAAA,CAAJE,IAAI;MAAA,UAAAJ,MAAA,CAASG,EAAE,OAAAH,MAAA,CAAII,IAAI;IAAA,CAAE,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC,QAAAL,MAAA,CAAKtB,KAAK,CAC5DuB,GAAG,CAAC,UAAAK,KAAA;MAAA,IAAEH,EAAE,GAAAG,KAAA,CAAFH,EAAE;QAAEI,MAAM,GAAAD,KAAA,CAANC,MAAM;QAAEC,MAAM,GAAAF,KAAA,CAANE,MAAM;MAAA,UAAAR,MAAA,CAASG,EAAE,OAAAH,MAAA,CAAIO,MAAM,OAAAP,MAAA,CAAIQ,MAAM;IAAA,CAAE,CAAC,CAC1DH,IAAI,CAAC,GAAG,CAAC;EAAA,CAAE,EACpB,CAAC3B,KAAK,EAAED,KAAK,CACjB,CAAC;EAED,IAAMgC,eAAe,GAAGtE,OAAO,CAAC,YAAM;IAClC,IAAI;MACAqB,kBAAkB,CAACoC,QAAQ,CAACE,OAAO,EAAED,QAAQ,CAACC,OAAO,CAAC;MACtD,OAAOY,SAAS;IACpB,CAAC,CAAC,OAAOC,SAAS,EAAE;MAChB,OAAOA,SAAS,YAAYC,KAAK,GAC3BD,SAAS,GACT,IAAIC,KAAK,CAAC,6BAA6B,CAAC;IAClD;IACA;IACA;EACJ,CAAC,EAAE,CAACb,YAAY,CAAC,CAAC;EAClB9D,SAAS,CAAC,YAAM;IACZ,IAAIwE,eAAe,EAAEnB,OAAO,aAAPA,OAAO,eAAPA,OAAO,CAAGmB,eAAe,CAAC;EACnD,CAAC,EAAE,CAACnB,OAAO,EAAEmB,eAAe,CAAC,CAAC;EAE9B,IAAMI,aAAa,GAAG1B,mBAAmB,KAAK,KAAK,IAAIV,KAAK,CAACqC,MAAM,GAAG3B,mBAAmB;EACzF,IAAIR,OAAO,EACP,oBACIZ,IAAA,CAACgD,KAAK;IAAClC,SAAS,EAAEA,SAAU;IAAAmC,QAAA,eACxBjD,IAAA,CAACd,MAAM;MAACgE,IAAI,EAAC;IAAG,CAAE;EAAC,CAChB,CAAC;EAEhB,IAAIrC,YAAY,EACZ,oBACIb,IAAA,CAACgD,KAAK;IAAClC,SAAS,EAAEA,SAAU;IAAAmC,QAAA,eACxBjD,IAAA,CAACb,IAAI;MAACgE,KAAK,EAAC,QAAQ;MAAAF,QAAA,EAAEpC;IAAY,CAAO;EAAC,CACvC,CAAC;EAEhB,IAAI6B,eAAe,EACf,oBACI1C,IAAA,CAACgD,KAAK;IAAClC,SAAS,EAAEA,SAAU;IAAAmC,QAAA,eACxBjD,IAAA,CAACb,IAAI;MAACgE,KAAK,EAAC,QAAQ;MAAAF,QAAA,EAAEP,eAAe,CAACU;IAAO,CAAO;EAAC,CAClD,CAAC;EAEhB,IAAI,CAAC1C,KAAK,CAACqC,MAAM,EACb,oBACI/C,IAAA,CAACgD,KAAK;IAAClC,SAAS,EAAEA,SAAU;IAAAmC,QAAA,eACxBjD,IAAA,CAACb,IAAI;MAACgE,KAAK,EAAC,WAAW;MAAAF,QAAA,EAAEvD,IAAI,CAAC,eAAe;IAAC,CAAO;EAAC,CACnD,CAAC;EAEhB,IAAIoD,aAAa,IAAI,CAACnB,cAAc,EAAE;IAClC,oBACI3B,IAAA,CAACgD,KAAK;MAAClC,SAAS,EAAEA,SAAU;MAAAmC,QAAA,eACxB/C,KAAA;QAAKY,SAAS,EAAEX,KAAK,CAAC,aAAa,CAAE;QAAA8C,QAAA,gBACjCjD,IAAA,CAACb,IAAI;UAAA8D,QAAA,EAAEvD,IAAI,CAAC,qBAAqB,EAAE;YAAC2D,KAAK,EAAE3C,KAAK,CAACqC;UAAM,CAAC;QAAC,CAAO,CAAC,eACjE/C,IAAA,CAAChB,MAAM;UAACsE,IAAI,EAAC,QAAQ;UAACC,OAAO,EAAE,SAATA,OAAOA,CAAA;YAAA,OAAQ3B,iBAAiB,CAAC,IAAI,CAAC;UAAA,CAAC;UAAAqB,QAAA,EACxDvD,IAAI,CAAC,mBAAmB;QAAC,CACtB,CAAC;MAAA,CACR;IAAC,CACH,CAAC;EAEhB;EAEA,oBACIM,IAAA,CAACwD,oBAAoB;IACjB9C,KAAK,EAAEA,KAAM;IACbC,KAAK,EAAEA,KAAM;IACbqB,YAAY,EAAEA,YAAa;IAC3BhB,UAAU,EAAEA,UAAW;IACvBE,MAAM,EAAEA,MAAO;IACfG,eAAe,EAAEA,eAAgB;IACjCC,WAAW,EAAEA,WAAY;IACzBC,OAAO,EAAEA,OAAQ;IACjBT,SAAS,EAAEA;EAAU,CACxB,CAAC;AAEV;AAcA,SAAS0C,oBAAoBA,CAAAC,KAAA,EAUC;EAAA,IAT1B/C,KAAK,GAAA+C,KAAA,CAAL/C,KAAK;IACLC,KAAK,GAAA8C,KAAA,CAAL9C,KAAK;IACLqB,YAAY,GAAAyB,KAAA,CAAZzB,YAAY;IACZhB,UAAU,GAAAyC,KAAA,CAAVzC,UAAU;IACVE,MAAM,GAAAuC,KAAA,CAANvC,MAAM;IACNG,eAAe,GAAAoC,KAAA,CAAfpC,eAAe;IACfC,WAAW,GAAAmC,KAAA,CAAXnC,WAAW;IACXC,OAAO,GAAAkC,KAAA,CAAPlC,OAAO;IACPT,SAAS,GAAA2C,KAAA,CAAT3C,SAAS;EAET,IAAA4C,UAAA,GAA0BpF,QAAQ,CAAa,CAAC;IAAAqF,UAAA,GAAAjC,cAAA,CAAAgC,UAAA;IAAzCE,KAAK,GAAAD,UAAA;IAAEE,QAAQ,GAAAF,UAAA;EACtB,IAAMG,OAAO,GAAGzF,MAAM,CAAiB,IAAI,CAAC;EAC5C,IAAMwD,QAAQ,GAAGxD,MAAM,CAACqC,KAAK,CAAC;EAC9B,IAAMoB,QAAQ,GAAGzD,MAAM,CAACsC,KAAK,CAAC;EAC9BkB,QAAQ,CAACE,OAAO,GAAGrB,KAAK;EACxBoB,QAAQ,CAACC,OAAO,GAAGpB,KAAK;EAExB,IAAMoD,YAAY,GAAG3F,OAAO,CACxB;IAAA,OACIyD,QAAQ,CAACE,OAAO,CAACG,GAAG,CAAC,UAAC8B,IAAI;MAAA,OAAAC,aAAA;QACtB7B,EAAE,EAAE4B,IAAI,CAAC5B;MAAE,GACR5C,qBAAqB,CAACwE,IAAI,CAAC;IAAA,CAChC,CAAC;EAAA;EACP;EACA;EACA,CAAChC,YAAY,CACjB,CAAC;EACD,IAAMkC,iBAAiB,GAAG9F,OAAO,CAC7B;IAAA,OACI0D,QAAQ,CAACC,OAAO,CAACG,GAAG,CAAC,UAACiC,IAAI;MAAA,OAAM;QAC5B/B,EAAE,EAAE+B,IAAI,CAAC/B,EAAE;QACXgC,aAAa,EAAED,IAAI,CAAC3B,MAAM;QAC1B6B,aAAa,EAAEF,IAAI,CAAC1B;MACxB,CAAC;IAAA,CAAC,CAAC;EAAA;EACP;EACA;EACA,CAACT,YAAY,CACjB,CAAC;EACD,IAAAsC,oBAAA,GAAgExE,mBAAmB,CAAC;MAChFkC,YAAY,EAAZA,YAAY;MACZuC,MAAM,EAAER,YAAY;MACpBS,WAAW,EAAEN,iBAAiB;MAC9B3C,OAAO,EAAPA;IACJ,CAAC,CAAC;IALKkD,MAAM,GAAAH,oBAAA,CAANG,MAAM;IAAEC,oBAAoB,GAAAJ,oBAAA,CAApBI,oBAAoB;IAAEC,gBAAgB,GAAAL,oBAAA,CAAhBK,gBAAgB;IAAEC,KAAK,GAAAN,oBAAA,CAALM,KAAK;EAO5D,IAAMC,WAAW,GAAGzG,OAAO,CACvB;IAAA,OACIsC,KAAK,CAACoE,OAAO,CAAC,UAACd,IAAI,EAAK;MACpB,IAAMe,QAAQ,GAAGN,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEF,MAAM,CAACP,IAAI,CAAC5B,EAAE,CAAC;MACxC,IAAI,CAAC2C,QAAQ,EAAE,OAAO,EAAE;MACxB,IAAAC,qBAAA,GACInF,yBAAyB,CAACmE,IAAI,CAAC;QAD5BiB,OAAO,GAAAD,qBAAA,CAAPC,OAAO;QAAEC,eAAe,GAAAF,qBAAA,CAAfE,eAAe;QAAEC,cAAc,GAAAH,qBAAA,CAAdG,cAAc;QAAEC,sBAAsB,GAAAJ,qBAAA,CAAtBI,sBAAsB;MAEvE,OAAO,CAAAnB,aAAA,CAAAA,aAAA;QAEC7B,EAAE,EAAE4B,IAAI,CAAC5B,EAAE;QACXiD,EAAE,EAAE,YAAY;QAChBC,IAAI,EAAEtB,IAAI,CAACsB,IAAI;QACfC,QAAQ,EAAE,KAAK;QACfC,OAAO,EAAE,EAAE;QACXC,IAAI,EAAE;UACFzB,IAAI,EAAJA,IAAI;UACJiB,OAAO,EAAPA,OAAO;UACPC,eAAe,EAAfA,eAAe;UACfC,cAAc,EAAdA,cAAc;UACdC,sBAAsB,EAAtBA;QACJ;MAAC,GACE5F,qBAAqB,CAACwE,IAAI,CAAC,GAC3Be,QAAQ,EAElB;IACL,CAAC,CAAC;EAAA,GACN,CAACrE,KAAK,EAAE+D,MAAM,CAClB,CAAC;EACD,IAAMiB,gBAAgB,GAAGtH,OAAO,CAC5B;IAAA,OAAMmB,2BAA2B,CAACoB,KAAK,EAAE8D,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAE9D,KAAK,CAAC;EAAA,GACvD,CAACA,KAAK,EAAE8D,MAAM,CAClB,CAAC;EAED,IAAIG,KAAK,EACL,oBACI5E,IAAA,CAACgD,KAAK;IAAClC,SAAS,EAAEA,SAAU;IAAAmC,QAAA,eACxBjD,IAAA,CAACb,IAAI;MAACgE,KAAK,EAAC,QAAQ;MAAAF,QAAA,EAAE2B,KAAK,CAACxB;IAAO,CAAO;EAAC,CACxC,CAAC;EAEhB,IAAIuB,gBAAgB,IAAI,CAACF,MAAM,IAAI,CAACC,oBAAoB,EACpD,oBACI1E,IAAA,CAACgD,KAAK;IAAClC,SAAS,EAAEA,SAAU;IAAAmC,QAAA,eACxBjD,IAAA,CAACd,MAAM;MAACgE,IAAI,EAAC;IAAG,CAAE;EAAC,CAChB,CAAC;EAGhB;IAAA;IACI;IACA;IACAlD,IAAA,CAAC2F,kBAAkB;MACfC,GAAG,EAAE9B,OAAQ;MACbS,MAAM,EAAEM,WAAY;MACpBL,WAAW,EAAEkB,gBAAiB;MAC9BhF,KAAK,EAAEA,KAAM;MACbsB,YAAY,EAAE0C,oBAAqB;MACnC1D,UAAU,EAAEA,UAAW;MACvBE,MAAM,EAAEA,MAAO;MACf0C,KAAK,EAAEA,KAAM;MACbC,QAAQ,EAAEA,QAAS;MACnBxC,eAAe,EAAEA,eAAgB;MACjCC,WAAW,EAAEA,WAAY;MACzBR,SAAS,EAAEA;IAAU,CACxB;EAAC;AAEV;AAcA,IAAM6E,kBAAkB,gBAAG1H,KAAK,CAAC4H,UAAU,CACvC,SAASC,2BAA2BA,CAAAC,KAAA,EAchCC,YAAY,EACd;EAAA,IAbMzB,MAAM,GAAAwB,KAAA,CAANxB,MAAM;IACNC,WAAW,GAAAuB,KAAA,CAAXvB,WAAW;IACX9D,KAAK,GAAAqF,KAAA,CAALrF,KAAK;IACLsB,YAAY,GAAA+D,KAAA,CAAZ/D,YAAY;IACZhB,UAAU,GAAA+E,KAAA,CAAV/E,UAAU;IACVE,MAAM,GAAA6E,KAAA,CAAN7E,MAAM;IACN0C,KAAK,GAAAmC,KAAA,CAALnC,KAAK;IACLC,QAAQ,GAAAkC,KAAA,CAARlC,QAAQ;IACRxC,eAAe,GAAA0E,KAAA,CAAf1E,eAAe;IACfC,WAAW,GAAAyE,KAAA,CAAXzE,WAAW;IACXR,SAAS,GAAAiF,KAAA,CAATjF,SAAS;EAIb,IAAMgD,OAAO,GAAGzF,MAAM,CAAwB,IAAI,CAAC;EACnDF,mBAAmB,CAAC6H,YAAY,EAAE;IAAA,OAAMlC,OAAO,CAAC/B,OAAO;EAAA,CAAkB,CAAC;EAC1E,IAAMkE,WAAW,GAAG5H,MAAM,CAAC,KAAK,CAAC;EACjC,IAAM6H,WAAW,GAAG7H,MAAM,CAAC,KAAK,CAAC;EACjC,IAAM8H,iBAAiB,GAAG9H,MAAM,CAAC,KAAK,CAAC;EACvC,IAAM+H,oBAAoB,GAAG/H,MAAM,CAAC2D,YAAY,CAAC;EACjD,IAAAqE,UAAA,GAAgC/H,QAAQ,CAAC,KAAK,CAAC;IAAAgI,UAAA,GAAA5E,cAAA,CAAA2E,UAAA;IAAxCE,QAAQ,GAAAD,UAAA;IAAEE,WAAW,GAAAF,UAAA;EAC5B,IAAAG,UAAA,GAA0CnI,QAAQ,CAAS,CAAC;IAAAoI,UAAA,GAAAhF,cAAA,CAAA+E,UAAA;IAArDE,aAAa,GAAAD,UAAA;IAAEE,gBAAgB,GAAAF,UAAA;EACtC,IAAMG,UAAU,GAAGxH,aAAa,CAAC,CAAC;EAClC,IAAAyH,SAAA,GAA+CnI,QAAQ,CAAC;MACpD2G,IAAI,EAAE,aAAa;MACnByB,QAAQ,EAAE;QACNC,UAAU,EAAEzI,0BAA0B;QACtC0I,OAAO,EAAEzI,QAAQ,CAAC0I,IAAI;QACtBC,aAAa,EAAE,IAAI;QACnBC,aAAa,EAAE,IAAI;QACnBC,uBAAuB,EAAE,KAAK;QAC9BC,oBAAoB,EAAE,IAAI;QAC1BC,yBAAyB,EAAE,YAAY;QACvCC,oBAAoB,EAAE,IAAI;QAC1BC,gBAAgB,EAAE,KAAK;QACvBC,eAAe,EAAE;UAAC,YAAY,EAAE/H;QAAqB;MACzD;IACJ,CAAC,CAAC;IAdKgI,KAAK,GAAAb,SAAA,CAALa,KAAK;IAAEC,GAAG,GAAAd,SAAA,CAAHc,GAAG;IAAEC,WAAW,GAAAf,SAAA,CAAXe,WAAW;IAAEC,KAAK,GAAAhB,SAAA,CAALgB,KAAK;IAAEC,IAAI,GAAAjB,SAAA,CAAJiB,IAAI;EAe3C,IAAAC,UAAA,GAA0B1J,QAAQ,CAACqJ,KAAK,CAACM,aAAa,CAACC,cAAc,CAAC,CAAC,CAACC,KAAK,CAAC;IAAAC,UAAA,GAAA1G,cAAA,CAAAsG,UAAA;IAAvEG,KAAK,GAAAC,UAAA;IAAEC,QAAQ,GAAAD,UAAA;EACtB,IAAAE,qBAAA,GAA6BX,KAAK,CAACM,aAAa,CAACC,cAAc,CAAC,CAAC;IAA1DK,QAAQ,GAAAD,qBAAA,CAARC,QAAQ;IAAEC,QAAQ,GAAAF,qBAAA,CAARE,QAAQ;EACzB5J,aAAa,CAAC+I,KAAK,EAAE,eAAe,EAAE,UAAAc,KAAA;IAAA,IAASC,SAAS,GAAAD,KAAA,CAAhBN,KAAK;IAAA,OAAiBE,QAAQ,CAACK,SAAS,CAAC;EAAA,EAAC;EAClF9J,aAAa,CAAC+I,KAAK,EAAE,YAAY,EAAE,UAAAgB,KAAA,EAAc;IAAA,IAAAC,WAAA;IAAA,IAAZnG,MAAM,GAAAkG,KAAA,CAANlG,MAAM;IACvC,IAAMoG,KAAK,GAAIpG,MAAM,aAANA,MAAM,uBAANA,MAAM,CAA4CoG,KAAK;IACtE,IAAIA,KAAK,aAALA,KAAK,gBAAAD,WAAA,GAALC,KAAK,CAAEpD,IAAI,cAAAmD,WAAA,eAAXA,WAAA,CAAa5E,IAAI,EAAE4C,gBAAgB,CAACiC,KAAK,CAACpD,IAAI,CAACzB,IAAI,CAAC5B,EAAE,CAAC;EAC/D,CAAC,CAAC;EACFxD,aAAa,CAAC+I,KAAK,EAAE,YAAY,EAAE,UAAAmB,KAAA,EAAc;IAAA,IAAAC,YAAA;IAAA,IAAZtG,MAAM,GAAAqG,KAAA,CAANrG,MAAM;IACvC,IAAMoG,KAAK,GAAIpG,MAAM,aAANA,MAAM,uBAANA,MAAM,CAA4CoG,KAAK;IACtE,IAAIA,KAAK,aAALA,KAAK,gBAAAE,YAAA,GAALF,KAAK,CAAEpD,IAAI,cAAAsD,YAAA,eAAXA,YAAA,CAAa/E,IAAI,EAAE4C,gBAAgB,CAACjE,SAAS,CAAC;EACtD,CAAC,CAAC;EAEFzE,SAAS,CAAC,YAAM;IACZ,IAAI,CAAC4F,OAAO,CAAC/B,OAAO,EAAE;IAEtB,IAAMiH,UAAU,GAAGC,gBAAgB,CAACnF,OAAO,CAAC/B,OAAO,CAAC,CAC/CmH,gBAAgB,CAAC,2BAA2B,CAAC,CAC7CC,IAAI,CAAC,CAAC;IACX,IAAMnC,UAAU,GAAGiC,gBAAgB,CAACnF,OAAO,CAAC/B,OAAO,CAAC,CAC/CmH,gBAAgB,CAAC,+BAA+B,CAAC,CACjDC,IAAI,CAAC,CAAC;IACX,IAAI,CAACH,UAAU,IAAI,CAAChC,UAAU,EAAE;IAEhC,IAAMoC,MAAM,GAAGxB,GAAG,CAACyB,cAAc,CAAC,CAAC;IACnCzB,GAAG,CAAC0B,iBAAiB,CAAArF,aAAA,CAAAA,aAAA,KACdmF,MAAM;MACTG,MAAM,EAAAtF,aAAA,CAAAA,aAAA,KACCmF,MAAM,CAACG,MAAM;QAChBC,oBAAoB,EAAER,UAAU;QAChCS,eAAe,EAAET,UAAU;QAC3BU,MAAM,EAAEV,UAAU;QAClBW,IAAI,EAAEX;MAAU,EACnB;MACDhC,UAAU,EAAA/C,aAAA,CAAAA,aAAA,KACHmF,MAAM,CAACpC,UAAU;QACpBgC,UAAU,EAAEhC;MAAU;IACzB,EACJ,CAAC;EACN,CAAC,EAAE,CAACY,GAAG,EAAEf,UAAU,CAAC,CAAC;EAErB,IAAM+C,kBAAkB,GAAGxL,OAAO,CAC9B;IAAA,OACIoG,WAAW,CAACtC,GAAG,CAAC,UAAC8E,UAAU;MAAA,OAAA/C,aAAA,CAAAA,aAAA,KACpB+C,UAAU;QACbzB,QAAQ,EAAEsE,OAAO,CACblD,aAAa,KACZK,UAAU,CAAC5C,aAAa,KAAKuC,aAAa,IACvCK,UAAU,CAAC3C,aAAa,KAAKsC,aAAa,CAClD;MAAC;IAAA,CACH,CAAC;EAAA,GACP,CAACnC,WAAW,EAAEmC,aAAa,CAC/B,CAAC;EACDzI,SAAS,CACL;IAAA,OAAM2J,WAAW,CAAC;MAACtD,MAAM,EAANA,MAAM;MAAEC,WAAW,EAAEoF;IAAkB,CAAC,CAAC;EAAA,GAC5D,CAACrF,MAAM,EAAEsD,WAAW,EAAE+B,kBAAkB,CAC5C,CAAC;EACD1L,SAAS,CAAC,YAAM;IACZ,IAAI,CAAC+H,WAAW,CAAClE,OAAO,EAAE;IAC1B,IAAIb,MAAM,EAAE4G,KAAK,CAAC,CAAC,CAAC,KACfC,IAAI,CAAC,CAAC;EACf,CAAC,EAAE,CAAC7G,MAAM,EAAE4G,KAAK,EAAEC,IAAI,CAAC,CAAC;EACzB7J,SAAS,CAAC,YAAM;IACZ,IAAM4L,OAAO,GAAG1D,oBAAoB,CAACrE,OAAO,KAAKC,YAAY;IAC7D,IAAM+H,YAAY,GAAG7I,MAAM,IAAI,CAACiF,iBAAiB,CAACpE,OAAO;IACzD,IAAIiI,KAAyB;IAC7B,IACIzD,QAAQ,IACRrF,MAAM,KACL,CAACgF,WAAW,CAACnE,OAAO,IAAIgI,YAAY,IAAK/I,UAAU,IAAI8I,OAAQ,CAAC,EACnE;MACEE,KAAK,GAAGC,qBAAqB,CAAC,YAAM;QAChCrC,GAAG,CAACsC,cAAc,CAAC;UAACC,OAAO,EAAE/J;QAAW,CAAC,CAAC;QAC1C8F,WAAW,CAACnE,OAAO,GAAG,IAAI;MAC9B,CAAC,CAAC;IACN;IACAoE,iBAAiB,CAACpE,OAAO,GAAG8H,OAAO,CAAC3I,MAAM,CAAC;IAC3CkF,oBAAoB,CAACrE,OAAO,GAAGC,YAAY;IAC3C6B,QAAQ,CAAClB,SAAS,CAAC;IACnB,OAAO,YAAM;MACT,IAAIqH,KAAK,KAAKrH,SAAS,EAAEyH,oBAAoB,CAACJ,KAAK,CAAC;IACxD,CAAC;EACL,CAAC,EAAE,CAAC9I,MAAM,EAAE0G,GAAG,EAAErB,QAAQ,EAAEvF,UAAU,EAAE6C,QAAQ,EAAE7B,YAAY,CAAC,CAAC;EAE/D,IAAMqI,WAA2E,GAAG,SAA9EA,WAA2EA,CAAAC,KAAA,EAG3E;IAAA,IAAAC,YAAA;IAAA,IAFF9H,MAAM,GAAA6H,KAAA,CAAN7H,MAAM;MACN+H,WAAW,GAAAF,KAAA,CAAXE,WAAW;IAEX,IAAM3B,KAAK,GAAIpG,MAAM,aAANA,MAAM,uBAANA,MAAM,CACfoG,KAAK;IACX,IAAI,EAACA,KAAK,aAALA,KAAK,gBAAA0B,YAAA,GAAL1B,KAAK,CAAEpD,IAAI,cAAA8E,YAAA,eAAXA,YAAA,CAAavG,IAAI,KAAI,CAACF,OAAO,CAAC/B,OAAO,EAAE;MACxC8B,QAAQ,CAAClB,SAAS,CAAC;MACnB;IACJ;IACA,IAAM8H,UAAU,GAAGD,WAAyB;IAC5C,IAAME,IAAI,GAAG5G,OAAO,CAAC/B,OAAO,CAAC4I,qBAAqB,CAAC,CAAC;IACpD,IAAMC,IAAI,GAAGC,IAAI,CAACC,GAAG,CACjBD,IAAI,CAACE,GAAG,CAAC,EAAE,EAAEN,UAAU,CAACO,OAAO,GAAGN,IAAI,CAACE,IAAI,GAAG,EAAE,CAAC,EACjDF,IAAI,CAACO,KAAK,GAAG,GACjB,CAAC;IACD,IAAMC,GAAG,GAAGL,IAAI,CAACC,GAAG,CAChBD,IAAI,CAACE,GAAG,CAAC,EAAE,EAAEN,UAAU,CAACU,OAAO,GAAGT,IAAI,CAACQ,GAAG,GAAG,EAAE,CAAC,EAChDR,IAAI,CAACU,MAAM,GAAG,GAClB,CAAC;IACDvH,QAAQ,CAAC;MACLwH,MAAM,EAAExC,KAAK,CAACpD,IAAI,CAACzB,IAAI,CAAC5B,EAAE;MAC1BwI,IAAI,EAAEC,IAAI,CAACE,GAAG,CAAC,EAAE,EAAEH,IAAI,CAAC;MACxBM,GAAG,EAAEL,IAAI,CAACE,GAAG,CAAC,EAAE,EAAEG,GAAG;IACzB,CAAC,CAAC;IACF5J,WAAW,aAAXA,WAAW,eAAXA,WAAW,CAAGuH,KAAK,CAACpD,IAAI,CAACzB,IAAI,EAAEyG,UAAU,CAAC;EAC9C,CAAC;EAED,IAAMa,YAAY,GAAG1H,KAAK,GAAGlD,KAAK,CAAC6K,IAAI,CAAC,UAACvH,IAAI;IAAA,OAAKA,IAAI,CAAC5B,EAAE,KAAKwB,KAAK,CAACyH,MAAM;EAAA,EAAC,GAAG1I,SAAS;EACvF,IAAM6I,cAAc,GAAGF,YAAY,gBAAGtL,IAAA,CAACJ,eAAe;IAACoE,IAAI,EAAEsH;EAAa,CAAE,CAAC,GAAG,IAAI;EACpF,IAAIG,YAA6B,GAAG,IAAI;EACxC,IAAIH,YAAY,EAAE;IACdG,YAAY,GAAGpK,eAAe,GACxBA,eAAe,CAAC;MAAC2C,IAAI,EAAEsH,YAAY;MAAEE,cAAc,EAAdA;IAAc,CAAC,CAAC,GACrDA,cAAc;EACxB;EAEA,oBACItL,KAAA;IAAK0F,GAAG,EAAE9B,OAAQ;IAAChD,SAAS,EAAEX,KAAK,CAAC,IAAI,EAAEW,SAAS,CAAE;IAAAmC,QAAA,gBACjDjD,IAAA,CAACtB,WAAW;MACRiJ,KAAK,EAAEA,KAAM;MACb7G,SAAS,EAAEX,KAAK,CAAC,QAAQ,CAAE;MAC3BuL,KAAK,EAAErB,WAAY;MACnBsB,WAAW,EAAErL,gBAAiB;MAC9BsL,cAAc,EAAE,SAAhBA,cAAcA,CAAAC,KAAA,EAAe;QAAA,IAAXhD,KAAK,GAAAgD,KAAA,CAALhD,KAAK;QACnB,IAAIA,KAAK,KAAKpK,UAAU,CAACqN,QAAQ,EAAE;UAC/B,IAAI5K,MAAM,EAAE4G,KAAK,CAAC,CAAC;UACnB7B,WAAW,CAAClE,OAAO,GAAG,IAAI;UAC1ByE,WAAW,CAAC,IAAI,CAAC;QACrB;MACJ;IAAE,CACL,CAAC,eACFtG,KAAA;MAAKY,SAAS,EAAEX,KAAK,CAAC,SAAS,CAAE;MAAA8C,QAAA,gBAC7BjD,IAAA,CAACZ,OAAO;QAAC2M,OAAO,EAAErM,IAAI,CAAC,gBAAgB,CAAE;QAACsM,SAAS,EAAC,OAAO;QAAA/I,QAAA,eACvDjD,IAAA,CAAChB,MAAM;UACHsE,IAAI,EAAC,QAAQ;UACb2I,GAAG,EAAC,aAAa;UACjB,cAAYvM,IAAI,CAAC,gBAAgB,CAAE;UACnCwM,QAAQ,EAAE/D,KAAK,IAAIK,QAAS;UAC5BjF,OAAO,EAAE,SAATA,OAAOA,CAAA;YAAA,OAAQ4I,UAAU,CAACxE,KAAK,EAAEtH,SAAS,CAAC;UAAA,CAAC;UAAA4C,QAAA,eAE5CjD,IAAA,CAACf,IAAI;YAACmN,IAAI,EAAEtN;UAAc,CAAE;QAAC,CACzB;MAAC,CACJ,CAAC,eACVkB,IAAA,CAACZ,OAAO;QAAC2M,OAAO,EAAErM,IAAI,CAAC,YAAY,CAAE;QAACsM,SAAS,EAAC,OAAO;QAAA/I,QAAA,eACnDjD,IAAA,CAAChB,MAAM;UACHsE,IAAI,EAAC,QAAQ;UACb2I,GAAG,EAAC,aAAa;UACjB,cAAYvM,IAAI,CAAC,YAAY,CAAE;UAC/B6D,OAAO,EAAE,SAATA,OAAOA,CAAA;YAAA,OAAQqE,GAAG,CAACsC,cAAc,CAAC;cAACC,OAAO,EAAE/J;YAAW,CAAC,CAAC;UAAA,CAAC;UAAA6C,QAAA,eAE1DjD,IAAA,CAACf,IAAI;YAACmN,IAAI,EAAErN;UAAa,CAAE;QAAC,CACxB;MAAC,CACJ,CAAC,eACViB,IAAA,CAACZ,OAAO;QAAC2M,OAAO,EAAErM,IAAI,CAAC,iBAAiB,CAAE;QAACsM,SAAS,EAAC,OAAO;QAAA/I,QAAA,eACxDjD,IAAA,CAAChB,MAAM;UACHsE,IAAI,EAAC,QAAQ;UACb2I,GAAG,EAAC,aAAa;UACjB,cAAYvM,IAAI,CAAC,iBAAiB,CAAE;UACpCwM,QAAQ,EAAE/D,KAAK,IAAII,QAAS;UAC5BhF,OAAO,EAAE,SAATA,OAAOA,CAAA;YAAA,OAAQ4I,UAAU,CAACxE,KAAK,EAAE,CAACtH,SAAS,CAAC;UAAA,CAAC;UAAA4C,QAAA,eAE7CjD,IAAA,CAACf,IAAI;YAACmN,IAAI,EAAEvN;UAAe,CAAE;QAAC,CAC1B;MAAC,CACJ,CAAC;IAAA,CACT,CAAC,EACL+E,KAAK,IAAI6H,YAAY,KAAK,IAAI,iBAC3BzL,IAAA;MAAKc,SAAS,EAAEX,KAAK,CAAC,OAAO,CAAE;MAACkM,KAAK,EAAE;QAACzB,IAAI,EAAEhH,KAAK,CAACgH,IAAI;QAAEM,GAAG,EAAEtH,KAAK,CAACsH;MAAG,CAAE;MAAAjI,QAAA,EACrEwI;IAAY,CACZ,CACR;EAAA,CACA,CAAC;AAEd,CACJ,CAAC;AAED,SAASU,UAAUA,CAACxE,KAA2C,EAAE2E,KAAa,EAAE;EAC5E,IAAMC,MAAM,GAAG5E,KAAK,CAACM,aAAa;EAClC,IAAMY,KAAK,GAAG0D,MAAM,CAACrE,cAAc,CAAC,CAAC;EACrC,IAAMQ,SAAS,GAAGmC,IAAI,CAACC,GAAG,CAACjC,KAAK,CAACL,QAAQ,EAAEqC,IAAI,CAACE,GAAG,CAAClC,KAAK,CAACN,QAAQ,EAAEM,KAAK,CAACV,KAAK,GAAGmE,KAAK,CAAC,CAAC;EACzFC,MAAM,CAACC,IAAI,CAAC3D,KAAK,CAACoC,KAAK,GAAG,CAAC,EAAEpC,KAAK,CAACuC,MAAM,GAAG,CAAC,EAAE1C,SAAS,CAAC;AAC7D;AAEA,SAAS1F,KAAKA,CAAAyJ,KAAA,EAAyE;EAAA,IAAvE3L,SAAS,GAAA2L,KAAA,CAAT3L,SAAS;IAAEmC,QAAQ,GAAAwJ,KAAA,CAARxJ,QAAQ;EAC/B,oBACIjD,IAAA;IAAKc,SAAS,EAAEX,KAAK,CAAC,IAAI,EAAEW,SAAS,CAAE;IAAAmC,QAAA,eACnCjD,IAAA;MAAKc,SAAS,EAAEX,KAAK,CAAC,OAAO,CAAE;MAAA8C,QAAA,EAAEA;IAAQ,CAAM;EAAC,CAC/C,CAAC;AAEd","ignoreList":[]}

package/build/esm/components/QueryGraph/QueryGraph.scss

@@ -0,0 +1,81 @@
+.qp-query-graph {
+    position: relative;
+    min-height: 360px;
+    height: 100%;
+    overflow: hidden;
+    background: var(--g-color-base-background);
+
+    &__canvas {
+        width: 100%;
+        height: 100%;
+        min-height: 360px;
+    }
+
+    &__toolbox {
+        position: absolute;
+        z-index: 4;
+        top: var(--g-spacing-4);
+        left: var(--g-spacing-4);
+        display: flex;
+        width: 28px;
+        flex-direction: column;
+    }
+
+    &__popup {
+        position: absolute;
+        z-index: 5;
+        width: min(440px, calc(100% - var(--g-spacing-8)));
+        max-height: calc(100% - var(--g-spacing-8));
+        overflow: auto;
+        padding: var(--g-spacing-4);
+        border: 1px solid var(--g-color-line-generic);
+        border-radius: var(--g-border-radius-l);
+        box-shadow: 0 4px 24px var(--g-color-sfx-shadow);
+        background: var(--g-color-base-float);
+    }
+
+    &__popup-content,
+    &__jobs,
+    &__schemas,
+    &__details {
+        display: flex;
+        flex-direction: column;
+        gap: var(--g-spacing-3);
+    }
+
+    &__popup-title {
+        display: flex;
+        align-items: center;
+        gap: var(--g-spacing-2);
+
+        > div {
+            display: flex;
+            min-width: 0;
+            flex-direction: column;
+        }
+    }
+
+    &__detail-row {
+        display: flex;
+        justify-content: space-between;
+        gap: var(--g-spacing-3);
+    }
+
+    &__state {
+        height: 100%;
+        min-height: 360px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: var(--g-spacing-6);
+        text-align: center;
+    }
+
+    &__large-graph {
+        display: flex;
+        max-width: 480px;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--g-spacing-4);
+    }
+}

package/build/esm/components/QueryGraph/QueryGraph.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import type { QueryGraphEdge, QueryGraphNode } from '../../types/queryGraph';
+import { QueryGraph } from './QueryGraph';
+export declare const demoNodes: QueryGraphNode[];
+export declare const demoEdges: QueryGraphEdge[];
+declare const meta: Meta<typeof QueryGraph>;
+export default meta;
+type Story = StoryObj<typeof QueryGraph>;
+export declare const Default: Story;
+export declare const Statuses: Story;
+export declare const OperationTypes: Story;
+export declare const CustomIcon: Story;
+export declare const UpdatingProgress: Story;
+export declare const LargeGraph: Story;
+export declare const LargeGraphThreshold: Story;
+export declare const InvalidGraph: Story;

package/build/esm/components/QueryGraph/QueryGraph.stories.js

@@ -0,0 +1,331 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import "core-js/modules/es.array.from.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.iterator.constructor.js";
+import "core-js/modules/es.iterator.map.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.string.iterator.js";
+import "core-js/modules/web.timers.js";
+import React, { useEffect, useState } from 'react';
+import { QueryGraph } from "./QueryGraph";
+import { largeGraphEdges, largeGraphNodes } from "./story/largeGraphData";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var demoNodes = [{
+  id: 'source',
+  kind: 'input',
+  name: 'orders',
+  label: 'warehouse.orders'
+}, {
+  id: 'read',
+  kind: 'operation',
+  name: 'Read',
+  operationType: 'read',
+  status: 'completed',
+  progress: {
+    total: 12,
+    completed: 12
+  }
+}, {
+  id: 'map',
+  kind: 'operation',
+  name: 'Map',
+  operationType: 'map',
+  status: 'running',
+  progress: {
+    total: 100,
+    completed: 68,
+    running: 8,
+    pending: 24
+  },
+  popup: {
+    stages: [{
+      name: 'Preparing',
+      duration: 1300
+    }, {
+      name: 'Executing',
+      duration: 8400
+    }],
+    details: [{
+      name: 'Columns',
+      value: ['id', 'price', 'created_at']
+    }, {
+      name: 'Settings',
+      children: [{
+        name: 'Workers',
+        value: 8
+      }]
+    }],
+    jobs: {
+      total: 100,
+      completed: 68,
+      running: 8,
+      pending: 24
+    },
+    inputs: [{
+      name: 'orders',
+      columns: [{
+        name: 'id',
+        type: 'Uint64'
+      }, {
+        name: 'price',
+        type: 'Double'
+      }]
+    }],
+    outputs: [{
+      name: 'mapped',
+      columns: [{
+        name: 'total',
+        type: 'Double'
+      }]
+    }]
+  }
+}, {
+  id: 'reduce',
+  kind: 'operation',
+  name: 'Reduce',
+  operationType: 'reduce',
+  status: 'waiting',
+  progress: {
+    total: 20
+  }
+}, {
+  id: 'sink',
+  kind: 'output',
+  name: 'result',
+  label: 'warehouse.result'
+}];
+export var demoEdges = [{
+  id: 'source-read',
+  source: 'source',
+  target: 'read'
+}, {
+  id: 'read-map',
+  source: 'read',
+  target: 'map'
+}, {
+  id: 'map-reduce',
+  source: 'map',
+  target: 'reduce'
+}, {
+  id: 'reduce-sink',
+  source: 'reduce',
+  target: 'sink'
+}];
+var meta = {
+  title: 'Components/QueryGraph',
+  component: QueryGraph,
+  tags: ['autodocs'],
+  args: {
+    nodes: demoNodes,
+    edges: demoEdges
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_jsx(QueryGraph, _objectSpread(_objectSpread({}, args), {}, {
+      className: "query-graph-story"
+    }));
+  },
+  decorators: [function (Story) {
+    return /*#__PURE__*/_jsx("div", {
+      style: {
+        height: 600
+      },
+      children: /*#__PURE__*/_jsx(Story, {})
+    });
+  }]
+};
+export default meta;
+export var Default = {};
+export var Statuses = {
+  args: {
+    nodes: [{
+      id: 'not-started',
+      kind: 'operation',
+      name: 'Map',
+      status: 'not-started'
+    }, {
+      id: 'waiting',
+      kind: 'operation',
+      name: 'Map',
+      status: 'waiting'
+    }, {
+      id: 'running',
+      kind: 'operation',
+      name: 'Map',
+      status: 'running'
+    }, {
+      id: 'completed',
+      kind: 'operation',
+      name: 'Map',
+      status: 'completed'
+    }, {
+      id: 'failed',
+      kind: 'operation',
+      name: 'Map',
+      status: 'failed'
+    }, {
+      id: 'aborted',
+      kind: 'operation',
+      name: 'Map',
+      status: 'aborted'
+    }].map(function (node, index) {
+      return _objectSpread(_objectSpread({}, node), {}, {
+        progress: {
+          total: index === 5 ? 23 : 2684677
+        }
+      });
+    }),
+    edges: [],
+    largeGraphThreshold: false
+  }
+};
+export var OperationTypes = {
+  args: {
+    nodes: ['read', 'map', 'reduce', 'map-reduce', 'merge', 'sort', 'erase', 'commit', 'operation'].map(function (operationType) {
+      return {
+        id: operationType,
+        kind: 'operation',
+        name: operationType,
+        label: operationType === 'map-reduce' ? 'A very long reusable MapReduce operation label' : operationType,
+        operationType: operationType,
+        status: 'not-started'
+      };
+    }),
+    edges: [{
+      id: 'read-map',
+      source: 'read',
+      target: 'map'
+    }, {
+      id: 'map-reduce',
+      source: 'map',
+      target: 'reduce'
+    }, {
+      id: 'map-reduce-merge',
+      source: 'map-reduce',
+      target: 'merge'
+    }, {
+      id: 'merge-sort',
+      source: 'merge',
+      target: 'sort'
+    }, {
+      id: 'erase-commit',
+      source: 'erase',
+      target: 'commit'
+    }, {
+      id: 'commit-operation',
+      source: 'commit',
+      target: 'operation'
+    }],
+    largeGraphThreshold: false
+  }
+};
+export var CustomIcon = {
+  args: {
+    nodes: [{
+      id: 'custom',
+      kind: 'operation',
+      name: 'Custom operation',
+      status: 'not-started',
+      icon: /*#__PURE__*/_jsx("svg", {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 16 16",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/_jsx("path", {
+          fill: "currentColor",
+          d: "M8 1 15 8 8 15 1 8z"
+        })
+      })
+    }],
+    edges: [],
+    largeGraphThreshold: false
+  }
+};
+function UpdatingProgressStory(props) {
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    completed = _useState2[0],
+    setCompleted = _useState2[1];
+  useEffect(function () {
+    var timer = window.setInterval(function () {
+      return setCompleted(function (value) {
+        return (value + 5) % 105;
+      });
+    }, 500);
+    return function () {
+      return window.clearInterval(timer);
+    };
+  }, []);
+  return /*#__PURE__*/_jsx(QueryGraph, _objectSpread(_objectSpread({}, props), {}, {
+    nodes: props.nodes.map(function (node) {
+      return node.id === 'progress' ? _objectSpread(_objectSpread({}, node), {}, {
+        progress: {
+          total: 100,
+          completed: completed,
+          fraction: completed / 100
+        }
+      }) : node;
+    })
+  }));
+}
+export var UpdatingProgress = {
+  args: {
+    nodes: [{
+      id: 'progress',
+      kind: 'operation',
+      name: 'Map',
+      operationType: 'map',
+      status: 'running',
+      progress: {
+        total: 100,
+        completed: 0
+      }
+    }],
+    edges: [],
+    largeGraphThreshold: false
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_jsx(UpdatingProgressStory, _objectSpread({}, args));
+  }
+};
+export var LargeGraph = {
+  args: {
+    nodes: largeGraphNodes,
+    edges: largeGraphEdges,
+    largeGraphThreshold: false
+  }
+};
+export var LargeGraphThreshold = {
+  args: {
+    nodes: Array.from({
+      length: 701
+    }, function (_, index) {
+      return {
+        id: "node-".concat(index),
+        kind: 'operation',
+        name: "Operation ".concat(index),
+        status: index % 3 ? 'completed' : 'running'
+      };
+    }),
+    edges: Array.from({
+      length: 700
+    }, function (_, index) {
+      return {
+        id: "edge-".concat(index),
+        source: "node-".concat(index),
+        target: "node-".concat(index + 1)
+      };
+    })
+  }
+};
+export var InvalidGraph = {
+  args: {
+    nodes: demoNodes,
+    edges: [{
+      id: 'bad',
+      source: 'source',
+      target: 'missing'
+    }]
+  }
+};
+// #sourceMappingURL=QueryGraph.stories.js.map

package/build/esm/components/QueryGraph/QueryGraph.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useState","QueryGraph","largeGraphEdges","largeGraphNodes","jsx","_jsx","demoNodes","id","kind","name","label","operationType","status","progress","total","completed","running","pending","popup","stages","duration","details","value","children","jobs","inputs","columns","type","outputs","demoEdges","source","target","meta","title","component","tags","args","nodes","edges","render","_objectSpread","className","decorators","Story","style","height","Default","Statuses","map","node","index","largeGraphThreshold","OperationTypes","CustomIcon","icon","width","viewBox","xmlns","fill","d","UpdatingProgressStory","props","_useState","_useState2","_slicedToArray","setCompleted","timer","window","setInterval","clearInterval","fraction","UpdatingProgress","LargeGraph","LargeGraphThreshold","Array","from","length","_","concat","InvalidGraph"],"sources":["QueryGraph.stories.tsx"],"sourcesContent":["import React, {useEffect, useState} from 'react';\nimport type {Meta, StoryObj} from '@storybook/react';\n\nimport type {QueryGraphEdge, QueryGraphNode} from '../../types/queryGraph';\nimport {QueryGraph} from './QueryGraph';\nimport {largeGraphEdges, largeGraphNodes} from './story/largeGraphData';\n\nexport const demoNodes: QueryGraphNode[] = [\n    {id: 'source', kind: 'input', name: 'orders', label: 'warehouse.orders'},\n    {\n        id: 'read',\n        kind: 'operation',\n        name: 'Read',\n        operationType: 'read',\n        status: 'completed',\n        progress: {total: 12, completed: 12},\n    },\n    {\n        id: 'map',\n        kind: 'operation',\n        name: 'Map',\n        operationType: 'map',\n        status: 'running',\n        progress: {total: 100, completed: 68, running: 8, pending: 24},\n        popup: {\n            stages: [\n                {name: 'Preparing', duration: 1300},\n                {name: 'Executing', duration: 8400},\n            ],\n            details: [\n                {name: 'Columns', value: ['id', 'price', 'created_at']},\n                {name: 'Settings', children: [{name: 'Workers', value: 8}]},\n            ],\n            jobs: {total: 100, completed: 68, running: 8, pending: 24},\n            inputs: [\n                {\n                    name: 'orders',\n                    columns: [\n                        {name: 'id', type: 'Uint64'},\n                        {name: 'price', type: 'Double'},\n                    ],\n                },\n            ],\n            outputs: [{name: 'mapped', columns: [{name: 'total', type: 'Double'}]}],\n        },\n    },\n    {\n        id: 'reduce',\n        kind: 'operation',\n        name: 'Reduce',\n        operationType: 'reduce',\n        status: 'waiting',\n        progress: {total: 20},\n    },\n    {id: 'sink', kind: 'output', name: 'result', label: 'warehouse.result'},\n];\n\nexport const demoEdges: QueryGraphEdge[] = [\n    {id: 'source-read', source: 'source', target: 'read'},\n    {id: 'read-map', source: 'read', target: 'map'},\n    {id: 'map-reduce', source: 'map', target: 'reduce'},\n    {id: 'reduce-sink', source: 'reduce', target: 'sink'},\n];\n\nconst meta: Meta<typeof QueryGraph> = {\n    title: 'Components/QueryGraph',\n    component: QueryGraph,\n    tags: ['autodocs'],\n    args: {nodes: demoNodes, edges: demoEdges},\n    render: (args) => <QueryGraph {...args} className=\"query-graph-story\" />,\n    decorators: [\n        (Story) => (\n            <div style={{height: 600}}>\n                <Story />\n            </div>\n        ),\n    ],\n};\n\nexport default meta;\ntype Story = StoryObj<typeof QueryGraph>;\n\nexport const Default: Story = {};\n\nexport const Statuses: Story = {\n    args: {\n        nodes: [\n            {id: 'not-started', kind: 'operation', name: 'Map', status: 'not-started'},\n            {id: 'waiting', kind: 'operation', name: 'Map', status: 'waiting'},\n            {id: 'running', kind: 'operation', name: 'Map', status: 'running'},\n            {id: 'completed', kind: 'operation', name: 'Map', status: 'completed'},\n            {id: 'failed', kind: 'operation', name: 'Map', status: 'failed'},\n            {id: 'aborted', kind: 'operation', name: 'Map', status: 'aborted'},\n        ].map((node, index) => ({\n            ...node,\n            progress: {total: index === 5 ? 23 : 2_684_677},\n        })) as QueryGraphNode[],\n        edges: [],\n        largeGraphThreshold: false,\n    },\n};\n\nexport const OperationTypes: Story = {\n    args: {\n        nodes: (\n            [\n                'read',\n                'map',\n                'reduce',\n                'map-reduce',\n                'merge',\n                'sort',\n                'erase',\n                'commit',\n                'operation',\n            ] as const\n        ).map((operationType) => ({\n            id: operationType,\n            kind: 'operation' as const,\n            name: operationType,\n            label:\n                operationType === 'map-reduce'\n                    ? 'A very long reusable MapReduce operation label'\n                    : operationType,\n            operationType,\n            status: 'not-started' as const,\n        })),\n        edges: [\n            {id: 'read-map', source: 'read', target: 'map'},\n            {id: 'map-reduce', source: 'map', target: 'reduce'},\n            {id: 'map-reduce-merge', source: 'map-reduce', target: 'merge'},\n            {id: 'merge-sort', source: 'merge', target: 'sort'},\n            {id: 'erase-commit', source: 'erase', target: 'commit'},\n            {id: 'commit-operation', source: 'commit', target: 'operation'},\n        ],\n        largeGraphThreshold: false,\n    },\n};\n\nexport const CustomIcon: Story = {\n    args: {\n        nodes: [\n            {\n                id: 'custom',\n                kind: 'operation',\n                name: 'Custom operation',\n                status: 'not-started',\n                icon: (\n                    <svg\n                        width=\"16\"\n                        height=\"16\"\n                        viewBox=\"0 0 16 16\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                    >\n                        <path fill=\"currentColor\" d=\"M8 1 15 8 8 15 1 8z\" />\n                    </svg>\n                ),\n            },\n        ],\n        edges: [],\n        largeGraphThreshold: false,\n    },\n};\n\nfunction UpdatingProgressStory(props: React.ComponentProps<typeof QueryGraph>) {\n    const [completed, setCompleted] = useState(0);\n    useEffect(() => {\n        const timer = window.setInterval(() => setCompleted((value) => (value + 5) % 105), 500);\n        return () => window.clearInterval(timer);\n    }, []);\n    return (\n        <QueryGraph\n            {...props}\n            nodes={props.nodes.map((node) =>\n                node.id === 'progress'\n                    ? {...node, progress: {total: 100, completed, fraction: completed / 100}}\n                    : node,\n            )}\n        />\n    );\n}\n\nexport const UpdatingProgress: Story = {\n    args: {\n        nodes: [\n            {\n                id: 'progress',\n                kind: 'operation',\n                name: 'Map',\n                operationType: 'map',\n                status: 'running',\n                progress: {total: 100, completed: 0},\n            },\n        ],\n        edges: [],\n        largeGraphThreshold: false,\n    },\n    render: (args) => <UpdatingProgressStory {...args} />,\n};\n\nexport const LargeGraph: Story = {\n    args: {\n        nodes: largeGraphNodes,\n        edges: largeGraphEdges,\n        largeGraphThreshold: false,\n    },\n};\n\nexport const LargeGraphThreshold: Story = {\n    args: {\n        nodes: Array.from({length: 701}, (_, index) => ({\n            id: `node-${index}`,\n            kind: 'operation' as const,\n            name: `Operation ${index}`,\n            status: index % 3 ? ('completed' as const) : ('running' as const),\n        })),\n        edges: Array.from({length: 700}, (_, index) => ({\n            id: `edge-${index}`,\n            source: `node-${index}`,\n            target: `node-${index + 1}`,\n        })),\n    },\n};\n\nexport const InvalidGraph: Story = {\n    args: {nodes: demoNodes, edges: [{id: 'bad', source: 'source', target: 'missing'}]},\n};\n"],"mappings":"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","ignoreList":[]}

package/build/esm/components/QueryGraph/helpers/layout.d.ts

@@ -0,0 +1,9 @@
+import type { TMultipointConnection } from '@gravity-ui/graph';
+import type { QueryGraphEdge, QueryGraphNode } from '../../../types/queryGraph';
+export declare function getQueryGraphNodeSize(node: QueryGraphNode): {
+    width: number;
+    height: number;
+};
+export declare function validateQueryGraph(nodes: QueryGraphNode[], edges: QueryGraphEdge[]): void;
+export declare function createQueryGraphConnections(edges: QueryGraphEdge[], routes?: Record<string | number | symbol, Pick<TMultipointConnection, 'points' | 'labels'>>): TMultipointConnection[];
+export declare function getQueryGraphProgress(node: QueryGraphNode): number;