@luxonis/depthai-pipeline-lib 1.13.0 → 1.14.0

package/dist/panda.css

@@ -1252,6 +1252,22 @@
 
 @layer utilities{
 
+  .w_16px {
+    width: 16px;
+}
+
+  .h_16px {
+    height: 16px;
+}
+
+  .d_flex {
+    display: flex;
+}
+
+  .pointer-events_none {
+    pointer-events: none;
+}
+
   .min-w_container\.smaller\.xxs {
     min-width: var(--sizes-container-smaller-xxs);
 }
@@ -1305,10 +1321,6 @@
     height: 20px;
 }
 
-  .d_flex {
-    display: flex;
-}
-
   .w_auto {
     width: auto;
 }
@@ -1317,6 +1329,14 @@
     height: auto;
 }
 
+  .ai_center {
+    align-items: center;
+}
+
+  .jc_center {
+    justify-content: center;
+}
+
   .border-style_dashed {
     border-style: dashed;
 }
@@ -1357,10 +1377,6 @@
     background-color: var(--colors-light-gray);
 }
 
-  .ai_center {
-    align-items: center;
-}
-
   .right_xs {
     right: var(--spacing-xs);
 }

package/dist/src/components/BridgeEdge.d.ts

@@ -0,0 +1,7 @@
+import { type EdgeProps } from '@xyflow/react';
+type BridgeEdgeProps = EdgeProps & {
+    data: any;
+    type: any;
+};
+export declare const BridgeEdge: ({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style, markerStart, markerEnd, interactionWidth, pathOptions, }: BridgeEdgeProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/BridgeEdge.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowRightSideIcon, Icon } from '@luxonis/common-fe-components/icons';
+import { BaseEdge, EdgeLabelRenderer, getSmoothStepPath, } from '@xyflow/react';
+import React from 'react';
+import { css } from '../styled-system/css/css.mjs';
+const bridgeArrowClassName = css({
+    width: '16px',
+    height: '16px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    pointerEvents: 'none',
+});
+export const BridgeEdge = ({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style, markerStart, markerEnd, interactionWidth, pathOptions, }) => {
+    const pathRef = React.useRef(null);
+    const [path, labelX, labelY] = getSmoothStepPath({
+        sourceX,
+        sourceY,
+        targetX,
+        targetY,
+        sourcePosition,
+        targetPosition,
+        borderRadius: pathOptions?.borderRadius,
+        offset: pathOptions?.offset,
+    });
+    const [arrowState, setArrowState] = React.useState({
+        x: labelX,
+        y: labelY,
+        angle: 0,
+    });
+    React.useEffect(() => {
+        const pathElement = pathRef.current;
+        if (!pathElement) {
+            return;
+        }
+        const totalLength = pathElement.getTotalLength();
+        const halfLength = totalLength / 2;
+        const sampleOffset = Math.min(12, totalLength / 4);
+        const startPoint = pathElement.getPointAtLength(Math.max(0, halfLength - sampleOffset));
+        const endPoint = pathElement.getPointAtLength(Math.min(totalLength, halfLength + sampleOffset));
+        const nextArrowState = {
+            x: (startPoint.x + endPoint.x) / 2,
+            y: (startPoint.y + endPoint.y) / 2,
+            angle: Math.atan2(endPoint.y - startPoint.y, endPoint.x - startPoint.x) *
+                (180 / Math.PI),
+        };
+        setArrowState((currentArrowState) => {
+            const didChange = Math.abs(currentArrowState.x - nextArrowState.x) > 0.5 ||
+                Math.abs(currentArrowState.y - nextArrowState.y) > 0.5 ||
+                Math.abs(currentArrowState.angle - nextArrowState.angle) > 0.5;
+            return didChange ? nextArrowState : currentArrowState;
+        });
+    });
+    return (_jsxs(_Fragment, { children: [_jsx("path", { ref: pathRef, d: path, fill: "none", stroke: "transparent" }), _jsx(BaseEdge, { id: id, path: path, style: style, markerStart: markerStart, markerEnd: markerEnd, interactionWidth: interactionWidth }), _jsx(EdgeLabelRenderer, { children: _jsx("div", { className: bridgeArrowClassName, style: {
+                        position: 'absolute',
+                        transform: `translate(-50%, -50%) translate(${arrowState.x}px, ${arrowState.y}px) rotate(${arrowState.angle}deg)`,
+                    }, children: _jsx(Icon, { icon: ArrowRightSideIcon, size: "sm", color: "gray", pointerEvents: "none" }) }) })] }));
+};

package/dist/src/components/Node.js

@@ -2,10 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Badge, Button, Flex, HelpIcon, Label, SubLabel, } from '@luxonis/common-fe-components';
 import { clsx } from '@luxonis/common-fe-components/helpers';
 import { Handle, Position } from '@xyflow/react';
-import { DOCS_BASE_URL, NodesWithLinks, } from '../services/pipeline.js';
 import { formatTiming } from '../services/pipeline-state.js';
+import { DOCS_BASE_URL, MIN_NODE_WIDTH, NodesWithLinks, } from '../services/utils.js';
 import { css } from '../styled-system/css/css.mjs';
-import { MIN_NODE_WIDTH } from './PipelineCanvas.js';
 const NodeHandles = (props) => {
     const { handles, type } = props;
     return (_jsx(Flex, { full: true, direction: "column", align: type === 'input' ? 'start' : 'end', minWidth: "120px", children: handles.map(({ type: handleType, id, blocking, queueSize, name, maxQueueSize, fps, connected, dotColor, }) => {
@@ -15,20 +14,28 @@ const NodeHandles = (props) => {
             return (_jsxs(Flex, { position: "relative", align: "end", direction: handleType === 'input' ? 'row' : 'row-reverse', children: [_jsx(Handle, { type: handleType === 'input' ? 'target' : 'source', position: handleType === 'input' ? Position.Left : Position.Right, id: name, isConnectable: false, className: css({
                             width: 'custom.handle.dot!',
                             height: 'custom.handle.dot!',
-                            backgroundColor: blocking
-                                ? 'dark.error!'
-                                : dotColor === 'gray'
-                                    ? 'dark.gray!'
-                                    : dotColor === 'green'
-                                        ? 'dark.success!'
-                                        : dotColor === 'red'
-                                            ? 'dark.error!'
-                                            : dotColor === 'yellow'
-                                                ? 'dark.warning!'
-                                                : 'dark.success!',
+                            backgroundColor: dotColor === 'gray'
+                                ? 'dark.gray!'
+                                : dotColor === 'green'
+                                    ? 'dark.success!'
+                                    : dotColor === 'red'
+                                        ? 'dark.error!'
+                                        : dotColor === 'yellow'
+                                            ? 'dark.warning!'
+                                            : 'dark.success!',
                             border: 'none!',
                             borderRadius: blocking ? '0% !important' : '100% !important',
-                        }) }), _jsx(NodeHandlesSubLabel, { type: type, name: name, queueSize: queueSize, maxQueueSize: maxQueueSize, fps: fps })] }, id));
+                        }), style: {
+                            background: dotColor === 'gray'
+                                ? 'dark.gray!'
+                                : dotColor === 'green'
+                                    ? 'dark.success!'
+                                    : dotColor === 'red'
+                                        ? 'dark.error!'
+                                        : dotColor === 'yellow'
+                                            ? 'dark.warning!'
+                                            : 'dark.gray!',
+                        } }), _jsx(NodeHandlesSubLabel, { type: type, name: name, queueSize: queueSize, maxQueueSize: maxQueueSize, fps: fps })] }, id));
         }) }));
 };
 const NodeHandlesSubLabel = (props) => {

package/dist/src/components/PipelineCanvas.d.ts

@@ -1,13 +1,11 @@
 import type { FlexProps } from '@luxonis/common-fe-components';
 import React from 'react';
-import type { ParsedNode, Pipeline } from '../services/pipeline.js';
+import type { Pipeline } from '../services/pipeline.js';
 import type { PipelineState } from '../services/pipeline-state.js';
 export type PipelineCanvasProps = FlexProps & {
     pipeline: Pipeline | null;
     pipelineState: PipelineState[] | null;
-    action?: React.ReactNode;
+    header?: React.ReactNode;
+    isDebugging?: boolean;
 };
-export declare const MIN_NODE_WIDTH = 376;
-export declare const MIN_NODE_HEIGHT = 150;
-export declare const updateNodesOnPipelineStateChange: (nodes: ParsedNode[], pipelineState: PipelineState[]) => ParsedNode[];
 export declare const PipelineCanvas: React.FC<PipelineCanvasProps>;

package/dist/src/components/PipelineCanvas.js

@@ -1,218 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Dagre from '@dagrejs/dagre';
-import { Flex, Header } from '@luxonis/common-fe-components';
-import { Panel, ReactFlow, ReactFlowProvider, useEdgesState, useNodesState, useReactFlow, useStore, } from '@xyflow/react';
+import { Button, Flex, Header } from '@luxonis/common-fe-components';
+import { BezierEdge, Panel, ReactFlow, ReactFlowProvider, useEdgesState, useNodesState, useReactFlow, useStore, } from '@xyflow/react';
 import React from 'react';
-import { topoSort } from '../services/utils.js';
+import { adjustNodes, getLayoutedElements, updateNodesOnPipelineStateChange, } from '../services/utils.js';
+import { BridgeEdge } from './BridgeEdge.js';
 import { PipelineNode } from './Node.js';
-export const MIN_NODE_WIDTH = 376;
-export const MIN_NODE_HEIGHT = 150;
-const getLayoutedElements = (nodes, edges) => {
-    const graph = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
-    graph.setGraph({ rankdir: 'LR' });
-    for (const edge of edges) {
-        graph.setEdge(edge.source, edge.target);
-    }
-    for (const node of nodes) {
-        graph.setNode(node.id, {
-            ...node,
-            width: MIN_NODE_WIDTH,
-            height: MIN_NODE_HEIGHT,
-        });
-    }
-    Dagre.layout(graph);
-    return {
-        nodes: nodes.map((node) => {
-            const position = graph.node(node.id);
-            const x = position.x - MIN_NODE_WIDTH / 2;
-            const y = position.y - MIN_NODE_HEIGHT / 2;
-            return { ...node, position: { x, y } };
-        }),
-        edges,
-    };
-};
-const adjustNodes = (nodes, edges) => {
-    const PADDING = 16;
-    const HEADER_HEIGHT = 24;
-    // Build a tree: find all group nodes and their depth
-    const groupNodes = nodes.filter((node) => node.type === 'group');
-    const childNodes = nodes.filter((node) => node.type !== 'group');
-    // Sort groups by depth (deepest first) so children are resolved before parents
-    const getDepth = (nodeId, depth = 0) => {
-        const node = nodes.find((n) => n.id === nodeId);
-        if (!node?.parentId)
-            return depth;
-        return getDepth(node.parentId, depth + 1);
-    };
-    const sortedGroups = [...groupNodes].sort((a, b) => getDepth(b.id) - getDepth(a.id));
-    // Track resolved sizes for groups as we process them
-    const resolvedSizes = {};
-    // Start with all non-group nodes at their measured sizes
-    for (const node of childNodes) {
-        resolvedSizes[node.id] = {
-            width: Math.min(node.measured?.width ?? MIN_NODE_WIDTH),
-            height: Math.min(node.measured?.height ?? MIN_NODE_HEIGHT),
-        };
-    }
-    const updatedNodes = {};
-    for (const node of nodes)
-        updatedNodes[node.id] = { ...node };
-    // Process groups deepest-first
-    for (const group of sortedGroups) {
-        const children = nodes.filter((n) => n.parentId === group.id);
-        if (children.length === 0) {
-            resolvedSizes[group.id] = {
-                width: MIN_NODE_WIDTH,
-                height: MIN_NODE_HEIGHT,
-            };
-            continue;
-        }
-        const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
-        g.setGraph({ rankdir: 'LR' });
-        for (const child of children) {
-            // Use resolved size (important for nested groups!)
-            const size = resolvedSizes[child.id] ?? {
-                width: MIN_NODE_WIDTH,
-                height: MIN_NODE_HEIGHT,
-            };
-            g.setNode(child.id, { width: size.width, height: size.height });
-        }
-        const groupEdges = edges.filter((e) => children.some((c) => c.id === e.source) &&
-            children.some((c) => c.id === e.target));
-        for (const edge of groupEdges) {
-            g.setEdge(edge.source, edge.target);
-        }
-        Dagre.layout(g);
-        let minX = 9999;
-        let minY = 9999;
-        let maxX = -9999;
-        let maxY = -9999;
-        // Replace both child loops with this single pass:
-        for (const child of children) {
-            const pos = g.node(child.id);
-            const size = resolvedSizes[child.id] ?? {
-                width: MIN_NODE_WIDTH,
-                height: MIN_NODE_HEIGHT,
-            };
-            const x = pos.x - size.width / 2;
-            const y = pos.y - size.height / 2;
-            minX = Math.min(minX, x);
-            minY = Math.min(minY, y);
-            maxX = Math.max(maxX, x + size.width);
-            maxY = Math.max(maxY, y + size.height);
-        }
-        // Now positions are correct, apply them
-        for (const child of children) {
-            const pos = g.node(child.id);
-            const size = resolvedSizes[child.id] ?? {
-                width: MIN_NODE_WIDTH,
-                height: MIN_NODE_HEIGHT,
-            };
-            updatedNodes[child.id] = {
-                ...updatedNodes[child.id],
-                position: {
-                    x: pos.x - size.width / 2 - minX + PADDING,
-                    y: pos.y - size.height / 2 - minY + PADDING + HEADER_HEIGHT,
-                },
-            };
-        }
-        const groupW = maxX - minX + PADDING * 2;
-        const groupH = maxY - minY + PADDING * 2 + HEADER_HEIGHT;
-        // Store this group's resolved size for its own parent to use
-        resolvedSizes[group.id] = { width: groupW, height: groupH };
-        updatedNodes[group.id] = {
-            ...updatedNodes[group.id],
-            style: { ...updatedNodes[group.id].style, width: groupW, height: groupH },
-            width: groupW,
-            height: groupH,
-        };
-    }
-    // Now lay out the top-level (root) nodes using Dagre with correct sizes
-    const graph = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
-    graph.setGraph({ rankdir: 'LR' });
-    const rootNodes = nodes.filter((n) => !n.parentId);
-    for (const node of rootNodes) {
-        const size = resolvedSizes[node.id] ?? {
-            width: MIN_NODE_WIDTH,
-            height: MIN_NODE_HEIGHT,
-        };
-        graph.setNode(node.id, { width: size.width, height: size.height });
-    }
-    const rootEdges = edges.filter((e) => rootNodes.some((n) => n.id === e.source) &&
-        rootNodes.some((n) => n.id === e.target));
-    for (const edge of rootEdges) {
-        graph.setEdge(edge.source, edge.target);
-    }
-    Dagre.layout(graph);
-    for (const node of rootNodes) {
-        const pos = graph.node(node.id);
-        if (!pos)
-            continue;
-        const size = resolvedSizes[node.id] ?? {
-            width: MIN_NODE_WIDTH,
-            height: MIN_NODE_HEIGHT,
-        };
-        updatedNodes[node.id] = {
-            ...updatedNodes[node.id],
-            position: {
-                x: pos.x - size.width / 2,
-                y: pos.y - size.height / 2,
-            },
-        };
-    }
-    return topoSort(Object.values(updatedNodes));
-};
-export const updateNodesOnPipelineStateChange = (nodes, pipelineState) => {
-    const parsedNodes = [];
-    for (const node of nodes) {
-        const nodeState = pipelineState.find((state) => state.id.toString() === node.id.toString());
-        // Inputs and outputs
-        const inputHandles = node.data.handles.input;
-        const outputHandles = node.data.handles.output;
-        const newInputHandles = [];
-        for (const inputHandle of inputHandles) {
-            const obj = { ...inputHandle };
-            const inputState = nodeState?.inputs[inputHandle.name];
-            if (inputState) {
-                obj.maxQueueSize = inputState.numQueued;
-                obj.fps = inputState.timing.fps;
-                obj.dotColor = inputState.dotColor;
-            }
-            newInputHandles.push(obj);
-        }
-        const newOutputHandles = [];
-        for (const outputHandle of outputHandles) {
-            const obj = { ...outputHandle };
-            const outputState = nodeState?.outputs[outputHandle.name];
-            if (outputState) {
-                obj.maxQueueSize = outputState.numQueued;
-                obj.fps = outputState.timing.fps;
-                obj.dotColor = outputState.dotColor;
-            }
-            newOutputHandles.push(obj);
-        }
-        // GPST timings
-        const gpst = nodeState?.gpstTimings;
-        // Node state
-        const state = nodeState?.stateInfo;
-        parsedNodes.push({
-            ...node,
-            data: {
-                ...node.data,
-                handles: {
-                    input: newInputHandles,
-                    output: newOutputHandles,
-                },
-                extras: {
-                    gpstTimings: gpst,
-                    stateInfo: state,
-                },
-            },
-        });
-    }
-    return parsedNodes;
-};
-const PipelineCanvasBody = ({ pipeline, pipelineState: pipelineStateParsed, action, ...flexProps }) => {
+import { PipelineLegend } from './PipelineLegend.js';
+const nodeTypes = { generic: PipelineNode };
+const edgeTypes = { generic: BezierEdge, bridge: BridgeEdge };
+const PipelineCanvasBody = ({ pipeline, pipelineState: pipelineStateParsed, header, isDebugging = false, ...flexProps }) => {
     const { fitView, setViewport, getViewport } = useReactFlow();
     const autoArrangeRef = React.useRef(true);
     const widthSelector = (state) => state.width;
@@ -220,6 +16,7 @@ const PipelineCanvasBody = ({ pipeline, pipelineState: pipelineStateParsed, acti
     const reactFlowWidth = useStore(widthSelector);
     const reactFlowHeight = useStore(heightSelector);
     const [shouldFitAndResize, setShouldFitAndResize] = React.useState(false);
+    const [openLegend, setOpenLegend] = React.useState(false);
     const pipelineState = React.useMemo(() => pipelineStateParsed, [pipelineStateParsed]);
     // biome-ignore lint/correctness/useExhaustiveDependencies: Intended
     React.useEffect(() => {
@@ -272,6 +69,6 @@ const PipelineCanvasBody = ({ pipeline, pipelineState: pipelineStateParsed, acti
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [shouldFitAndResize]);
-    return (_jsxs(Flex, { align: "center", justify: "center", full: true, height: "container.xs", rounded: "common", border: "base", ...flexProps, children: [!pipeline && _jsx(Header, { text: "Loading pipeline..." }), pipeline && (_jsx(ReactFlow, { nodes: nodes, edges: edges, onNodeDragStart: () => (autoArrangeRef.current = false), onNodesChange: onNodesChange, fitView: true, nodeTypes: { generic: PipelineNode }, minZoom: 0.4, children: action && _jsx(Panel, { position: "top-right", children: action }) }))] }));
+    return (_jsxs(Flex, { align: "center", justify: "center", full: true, height: "container.xs", rounded: "common", border: "base", ...flexProps, children: [!pipeline && _jsx(Header, { text: "Loading pipeline..." }), pipeline && (_jsxs(ReactFlow, { nodes: nodes, edges: edges, onNodeDragStart: () => (autoArrangeRef.current = false), onNodesChange: onNodesChange, fitView: true, nodeTypes: nodeTypes, edgeTypes: edgeTypes, minZoom: 0.4, children: [header && _jsx(Panel, { position: "top-center", children: header }), _jsx(Panel, { position: "top-right", children: _jsxs(Flex, { gap: "xs", flexDirection: "column", children: [_jsx(Button, { onClick: () => setOpenLegend(!openLegend), label: openLegend ? 'Collapse' : 'Legend' }), openLegend && _jsx(PipelineLegend, { isDebugging: isDebugging })] }) })] }))] }));
 };
 export const PipelineCanvas = (props) => (_jsx(ReactFlowProvider, { children: _jsx(PipelineCanvasBody, { ...props }) }));

package/dist/src/components/PipelineLegend.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type PipelineLegendProps = {
+    isDebugging: boolean;
+};
+export declare const PipelineLegend: React.FC<PipelineLegendProps>;
+export {};

package/dist/src/components/PipelineLegend.js

@@ -0,0 +1,181 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Badge, Flex, Label, SubLabel } from '@luxonis/common-fe-components';
+import React from 'react';
+const debugSections = [
+    {
+        title: 'Nodes',
+        items: [
+            {
+                0: {
+                    id: 'device-node',
+                    label: 'Device Node',
+                    marker: (_jsx(Badge, { label: "D", variant: "active", style: { padding: '0px', paddingInline: '4px' } })),
+                },
+                1: {
+                    id: 'host-node',
+                    label: 'Host Node',
+                    marker: (_jsx(Badge, { label: "H", variant: "cyan", style: { padding: '0px', paddingInline: '4px' } })),
+                },
+            },
+        ],
+    },
+    {
+        title: 'Node States',
+        items: [
+            {
+                0: {
+                    id: 'node-state-idle',
+                    label: 'Idle',
+                    marker: _jsx(SubLabel, { text: "(I)", weight: "medium" }),
+                },
+                1: {
+                    id: 'node-state-getting-inputs',
+                    label: 'Getting inputs',
+                    marker: _jsx(SubLabel, { text: "(G)", weight: "medium" }),
+                },
+            },
+            {
+                0: {
+                    id: 'node-state-processing',
+                    label: 'Processing',
+                    marker: _jsx(SubLabel, { text: "(P)", weight: "medium" }),
+                },
+                1: {
+                    id: 'node-state-sending-outputs',
+                    label: 'Sending outputs',
+                    marker: _jsx(SubLabel, { text: "(S)", weight: "medium" }),
+                },
+            },
+        ],
+    },
+    {
+        title: 'GPST Timings',
+        items: [
+            {
+                0: {
+                    id: 'timing-get',
+                    label: 'Get time',
+                    marker: _jsx(SubLabel, { text: "G", weight: "medium" }),
+                },
+                1: {
+                    id: 'timing-process',
+                    label: 'Process time',
+                    marker: _jsx(SubLabel, { text: "P", weight: "medium" }),
+                },
+            },
+            {
+                0: {
+                    id: 'timing-send',
+                    label: 'Send time',
+                    marker: _jsx(SubLabel, { text: "S", weight: "medium" }),
+                },
+                1: {
+                    id: 'timing-total',
+                    label: 'Total time',
+                    marker: _jsx(SubLabel, { text: "T", weight: "medium" }),
+                },
+            },
+        ],
+    },
+];
+const portStatusSection = [
+    {
+        title: 'Port Status',
+        items: [
+            {
+                0: {
+                    id: 'port-inactive',
+                    label: 'Inactive',
+                    marker: _jsx(LegendDot, { tone: "gray" }),
+                },
+                1: {
+                    id: 'port-ready',
+                    label: 'Ready',
+                    marker: _jsx(LegendDot, { tone: "green" }),
+                },
+            },
+            {
+                0: {
+                    id: 'port-busy',
+                    label: 'Busy',
+                    marker: _jsx(LegendDot, { tone: "yellow" }),
+                },
+                1: {
+                    id: 'port-blocked',
+                    label: 'Blocked',
+                    marker: _jsx(LegendDot, { tone: "red" }),
+                },
+            },
+        ],
+    },
+];
+const sharedSections = [
+    {
+        title: 'Ports',
+        items: [
+            {
+                0: {
+                    id: 'blocking-port',
+                    label: 'Blocking',
+                    marker: _jsx(LegendDot, { tone: "gray", square: true }),
+                },
+                1: {
+                    id: 'non-blocking-port',
+                    label: 'Non-blocking',
+                    marker: _jsx(LegendDot, { tone: "gray" }),
+                },
+            },
+        ],
+    },
+];
+const bridgeSection = {
+    title: 'Bridges',
+    items: [
+        {
+            0: {
+                id: 'bridge-direction',
+                label: 'Direction from source node to target node',
+                marker: _jsx(SubLabel, { text: ">" }),
+            },
+            1: null,
+        },
+    ],
+};
+// NOTE: Colors from hub repo
+// success: '#12B76A',
+// warning: '#DC6803',
+// error: '#F04438',
+// gray: '#667085',
+function LegendDot({ tone, square = false, }) {
+    const color = React.useMemo(() => {
+        switch (tone) {
+            case 'gray':
+                return '#667085';
+            case 'green':
+                return '#12B76A';
+            case 'yellow':
+                return '#DC6803';
+            case 'red':
+                return '#F04438';
+        }
+    }, [tone]);
+    return (_jsx("div", { style: {
+            width: '8px',
+            height: '8px',
+            backgroundColor: color,
+            border: 'none',
+            borderRadius: square ? undefined : '100%',
+        } }));
+}
+function LegendCell({ left, right, }) {
+    return (_jsxs(Flex, { gap: "xs", width: "full", alignItems: "center", children: [_jsxs(Flex, { alignItems: "center", gap: "xs", width: "full", children: [left.marker, _jsx(SubLabel, { text: `${left.label}` })] }), right ? (_jsxs(Flex, { alignItems: "center", gap: "xs", width: "full", children: [right.marker, _jsx(SubLabel, { text: `${right.label}` })] })) : (_jsx(_Fragment, {}))] }));
+}
+function LegendSection({ title, items }) {
+    return (_jsxs(Flex, { direction: "column", gap: "xs", width: "full", children: [_jsx(Label, { text: title, weight: "medium" }), items.map((item) => (_jsx(LegendCell, { left: item[0], right: item[1] }, `${item[0].id}-${item[1]?.id}`)))] }));
+}
+export const PipelineLegend = ({ isDebugging, }) => {
+    const sections = isDebugging
+        ? [...debugSections, ...sharedSections, ...portStatusSection, bridgeSection]
+        : sharedSections;
+    return (_jsxs(Flex, { direction: "column", gap: "xs", width: "full", padding: "sm", rounded: "common", border: "base", backgroundColor: "white", maxWidth: "250px", children: [_jsx(Label, { text: "Legend", color: "black", weight: "medium", align: "center" }), _jsx(Flex, { direction: "column", gap: "xs", width: "full", children: sections.map((section) => (_jsx(LegendSection, { title: section.title, items: section.items }, section.title))) })] }));
+};

package/dist/src/services/pipeline.d.ts

@@ -51,29 +51,3 @@ export type ParsedNode = Node<{
     extras?: NodeExtras;
 }>;
 export declare function parsePipeline(rawPayload: RawPipelinePayload): Pipeline;
-export declare const DOCS_BASE_URL = "https://docs.luxonis.com/software-v3/depthai/depthai-components/nodes";
-export declare const NodesWithLinks: {
-    AprilTag: string;
-    BenchmarkIn: string;
-    BenchmarkOut: string;
-    Camera: string;
-    DetectionNetwork: string;
-    EdgeDetector: string;
-    SpatialDetectionNetwork: string;
-    FeatureTracker: string;
-    ImageAlign: string;
-    ImageManip: string;
-    IMU: string;
-    NeuralNetwork: string;
-    ObjectTracker: string;
-    RGBD: string;
-    Script: string;
-    SpatialLocationCalculator: string;
-    StereoDepth: string;
-    Sync: string;
-    SystemLogger: string;
-    Thermal: string;
-    ToF: string;
-    VideoEncoder: string;
-    Warp: string;
-};

package/dist/src/services/pipeline.js

@@ -1,4 +1,3 @@
-import { MarkerType, } from '@xyflow/react';
 import { filterNodesHandles, parseHandles, } from './pipeline-handles';
 function addFakeNode(id) {
     return [
@@ -128,6 +127,7 @@ export function parsePipeline(rawPayload) {
         target: connection.node2Id.toString(),
         sourceHandle: connection.node1Output,
         targetHandle: connection.node2Input,
+        type: 'generic',
     })) ?? [];
     const bridges = pipeline.bridges?.map((bridge) => ({
         id: `${bridge[0]}-${bridge[1]}-bridge`,
@@ -136,13 +136,7 @@ export function parsePipeline(rawPayload) {
         sourceHandle: 'bottom',
         targetHandle: 'top',
         animated: true,
-        markerStart: {
-            type: MarkerType.ArrowClosed,
-        },
-        markerEnd: {
-            type: MarkerType.ArrowClosed,
-        },
-        type: 'step',
+        type: 'bridge',
     })) ?? [];
     // NOTE: Parent nodes should be rendered before child nodes
     const groupedNodes = [...parentNodes, ...childrenNodes, ...filteredNodes];
@@ -152,29 +146,3 @@ export function parsePipeline(rawPayload) {
         edges: [...edges, ...bridges],
     };
 }
-export const DOCS_BASE_URL = `https://docs.luxonis.com/software-v3/depthai/depthai-components/nodes`;
-export const NodesWithLinks = {
-    AprilTag: 'april_tag',
-    BenchmarkIn: 'benchmark_in',
-    BenchmarkOut: 'benchmark_out',
-    Camera: 'camera',
-    DetectionNetwork: 'detection_network',
-    EdgeDetector: 'edge_detector',
-    SpatialDetectionNetwork: 'spatial_detection_network',
-    FeatureTracker: 'feature_tracker',
-    ImageAlign: 'image_align',
-    ImageManip: 'image_manip',
-    IMU: 'imu',
-    NeuralNetwork: 'neural_network',
-    ObjectTracker: 'object_tracker',
-    RGBD: 'rgbd',
-    Script: 'script',
-    SpatialLocationCalculator: 'spatial_location_calculator',
-    StereoDepth: 'stereo_depth',
-    Sync: 'sync',
-    SystemLogger: 'system_logger',
-    Thermal: 'thermal',
-    ToF: 'tof',
-    VideoEncoder: 'video_encoder',
-    Warp: 'warp',
-};

package/dist/src/services/utils.d.ts

@@ -1,2 +1,38 @@
+import { Edge } from '@xyflow/react';
 import { ParsedNode } from './pipeline';
+import { PipelineState } from './pipeline-state';
 export declare const topoSort: (nodes: ParsedNode[]) => ParsedNode[];
+export declare const DOCS_BASE_URL = "https://docs.luxonis.com/software-v3/depthai/depthai-components/nodes";
+export declare const NodesWithLinks: {
+    AprilTag: string;
+    BenchmarkIn: string;
+    BenchmarkOut: string;
+    Camera: string;
+    DetectionNetwork: string;
+    EdgeDetector: string;
+    SpatialDetectionNetwork: string;
+    FeatureTracker: string;
+    ImageAlign: string;
+    ImageManip: string;
+    IMU: string;
+    NeuralNetwork: string;
+    ObjectTracker: string;
+    RGBD: string;
+    Script: string;
+    SpatialLocationCalculator: string;
+    StereoDepth: string;
+    Sync: string;
+    SystemLogger: string;
+    Thermal: string;
+    ToF: string;
+    VideoEncoder: string;
+    Warp: string;
+};
+export declare const MIN_NODE_WIDTH = 376;
+export declare const MIN_NODE_HEIGHT = 150;
+export declare const getLayoutedElements: (nodes: ParsedNode[], edges: Edge[]) => {
+    nodes: any[];
+    edges: Edge[];
+};
+export declare const adjustNodes: (nodes: ParsedNode[], edges: Edge[]) => ParsedNode[];
+export declare const updateNodesOnPipelineStateChange: (nodes: ParsedNode[], pipelineState: PipelineState[]) => ParsedNode[];

package/dist/src/services/utils.js

@@ -1,3 +1,4 @@
+import Dagre from '@dagrejs/dagre';
 export const topoSort = (nodes) => {
     const nodeMap = new Map(nodes.map((n) => [n.id, n]));
     const result = [];
@@ -19,3 +20,236 @@ export const topoSort = (nodes) => {
     }
     return result;
 };
+export const DOCS_BASE_URL = `https://docs.luxonis.com/software-v3/depthai/depthai-components/nodes`;
+export const NodesWithLinks = {
+    AprilTag: 'april_tag',
+    BenchmarkIn: 'benchmark_in',
+    BenchmarkOut: 'benchmark_out',
+    Camera: 'camera',
+    DetectionNetwork: 'detection_network',
+    EdgeDetector: 'edge_detector',
+    SpatialDetectionNetwork: 'spatial_detection_network',
+    FeatureTracker: 'feature_tracker',
+    ImageAlign: 'image_align',
+    ImageManip: 'image_manip',
+    IMU: 'imu',
+    NeuralNetwork: 'neural_network',
+    ObjectTracker: 'object_tracker',
+    RGBD: 'rgbd',
+    Script: 'script',
+    SpatialLocationCalculator: 'spatial_location_calculator',
+    StereoDepth: 'stereo_depth',
+    Sync: 'sync',
+    SystemLogger: 'system_logger',
+    Thermal: 'thermal',
+    ToF: 'tof',
+    VideoEncoder: 'video_encoder',
+    Warp: 'warp',
+};
+export const MIN_NODE_WIDTH = 376;
+export const MIN_NODE_HEIGHT = 150;
+export const getLayoutedElements = (nodes, edges) => {
+    const graph = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
+    graph.setGraph({ rankdir: 'LR' });
+    for (const edge of edges) {
+        graph.setEdge(edge.source, edge.target);
+    }
+    for (const node of nodes) {
+        graph.setNode(node.id, {
+            ...node,
+            width: MIN_NODE_WIDTH,
+            height: MIN_NODE_HEIGHT,
+        });
+    }
+    Dagre.layout(graph);
+    return {
+        nodes: nodes.map((node) => {
+            const position = graph.node(node.id);
+            const x = position.x - MIN_NODE_WIDTH / 2;
+            const y = position.y - MIN_NODE_HEIGHT / 2;
+            return { ...node, position: { x, y } };
+        }),
+        edges,
+    };
+};
+export const adjustNodes = (nodes, edges) => {
+    const PADDING = 16;
+    const HEADER_HEIGHT = 24;
+    // Build a tree: find all group nodes and their depth
+    const groupNodes = nodes.filter((node) => node.type === 'group');
+    const childNodes = nodes.filter((node) => node.type !== 'group');
+    // Sort groups by depth (deepest first) so children are resolved before parents
+    const getDepth = (nodeId, depth = 0) => {
+        const node = nodes.find((n) => n.id === nodeId);
+        if (!node?.parentId)
+            return depth;
+        return getDepth(node.parentId, depth + 1);
+    };
+    const sortedGroups = [...groupNodes].sort((a, b) => getDepth(b.id) - getDepth(a.id));
+    // Track resolved sizes for groups as we process them
+    const resolvedSizes = {};
+    // Start with all non-group nodes at their measured sizes
+    for (const node of childNodes) {
+        resolvedSizes[node.id] = {
+            width: Math.min(node.measured?.width ?? MIN_NODE_WIDTH),
+            height: Math.min(node.measured?.height ?? MIN_NODE_HEIGHT),
+        };
+    }
+    const updatedNodes = {};
+    for (const node of nodes)
+        updatedNodes[node.id] = { ...node };
+    // Process groups deepest-first
+    for (const group of sortedGroups) {
+        const children = nodes.filter((n) => n.parentId === group.id);
+        if (children.length === 0) {
+            resolvedSizes[group.id] = {
+                width: MIN_NODE_WIDTH,
+                height: MIN_NODE_HEIGHT,
+            };
+            continue;
+        }
+        const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
+        g.setGraph({ rankdir: 'LR' });
+        for (const child of children) {
+            // Use resolved size (important for nested groups!)
+            const size = resolvedSizes[child.id] ?? {
+                width: MIN_NODE_WIDTH,
+                height: MIN_NODE_HEIGHT,
+            };
+            g.setNode(child.id, { width: size.width, height: size.height });
+        }
+        const groupEdges = edges.filter((e) => children.some((c) => c.id === e.source) &&
+            children.some((c) => c.id === e.target));
+        for (const edge of groupEdges) {
+            g.setEdge(edge.source, edge.target);
+        }
+        Dagre.layout(g);
+        let minX = 9999;
+        let minY = 9999;
+        let maxX = -9999;
+        let maxY = -9999;
+        // Replace both child loops with this single pass:
+        for (const child of children) {
+            const pos = g.node(child.id);
+            const size = resolvedSizes[child.id] ?? {
+                width: MIN_NODE_WIDTH,
+                height: MIN_NODE_HEIGHT,
+            };
+            const x = pos.x - size.width / 2;
+            const y = pos.y - size.height / 2;
+            minX = Math.min(minX, x);
+            minY = Math.min(minY, y);
+            maxX = Math.max(maxX, x + size.width);
+            maxY = Math.max(maxY, y + size.height);
+        }
+        // Now positions are correct, apply them
+        for (const child of children) {
+            const pos = g.node(child.id);
+            const size = resolvedSizes[child.id] ?? {
+                width: MIN_NODE_WIDTH,
+                height: MIN_NODE_HEIGHT,
+            };
+            updatedNodes[child.id] = {
+                ...updatedNodes[child.id],
+                position: {
+                    x: pos.x - size.width / 2 - minX + PADDING,
+                    y: pos.y - size.height / 2 - minY + PADDING + HEADER_HEIGHT,
+                },
+            };
+        }
+        const groupW = maxX - minX + PADDING * 2;
+        const groupH = maxY - minY + PADDING * 2 + HEADER_HEIGHT;
+        // Store this group's resolved size for its own parent to use
+        resolvedSizes[group.id] = { width: groupW, height: groupH };
+        updatedNodes[group.id] = {
+            ...updatedNodes[group.id],
+            style: { ...updatedNodes[group.id].style, width: groupW, height: groupH },
+            width: groupW,
+            height: groupH,
+        };
+    }
+    // Now lay out the top-level (root) nodes using Dagre with correct sizes
+    const graph = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
+    graph.setGraph({ rankdir: 'LR' });
+    const rootNodes = nodes.filter((n) => !n.parentId);
+    for (const node of rootNodes) {
+        const size = resolvedSizes[node.id] ?? {
+            width: MIN_NODE_WIDTH,
+            height: MIN_NODE_HEIGHT,
+        };
+        graph.setNode(node.id, { width: size.width, height: size.height });
+    }
+    const rootEdges = edges.filter((e) => rootNodes.some((n) => n.id === e.source) &&
+        rootNodes.some((n) => n.id === e.target));
+    for (const edge of rootEdges) {
+        graph.setEdge(edge.source, edge.target);
+    }
+    Dagre.layout(graph);
+    for (const node of rootNodes) {
+        const pos = graph.node(node.id);
+        if (!pos)
+            continue;
+        const size = resolvedSizes[node.id] ?? {
+            width: MIN_NODE_WIDTH,
+            height: MIN_NODE_HEIGHT,
+        };
+        updatedNodes[node.id] = {
+            ...updatedNodes[node.id],
+            position: {
+                x: pos.x - size.width / 2,
+                y: pos.y - size.height / 2,
+            },
+        };
+    }
+    return topoSort(Object.values(updatedNodes));
+};
+export const updateNodesOnPipelineStateChange = (nodes, pipelineState) => {
+    const parsedNodes = [];
+    for (const node of nodes) {
+        const nodeState = pipelineState.find((state) => state.id.toString() === node.id.toString());
+        // Inputs and outputs
+        const inputHandles = node.data.handles.input;
+        const outputHandles = node.data.handles.output;
+        const newInputHandles = [];
+        for (const inputHandle of inputHandles) {
+            const obj = { ...inputHandle };
+            const inputState = nodeState?.inputs[inputHandle.name];
+            if (inputState) {
+                obj.maxQueueSize = inputState.numQueued;
+                obj.fps = inputState.timing.fps;
+                obj.dotColor = inputState.dotColor;
+            }
+            newInputHandles.push(obj);
+        }
+        const newOutputHandles = [];
+        for (const outputHandle of outputHandles) {
+            const obj = { ...outputHandle };
+            const outputState = nodeState?.outputs[outputHandle.name];
+            if (outputState) {
+                obj.maxQueueSize = outputState.numQueued;
+                obj.fps = outputState.timing.fps;
+                obj.dotColor = outputState.dotColor;
+            }
+            newOutputHandles.push(obj);
+        }
+        // GPST timings
+        const gpst = nodeState?.gpstTimings;
+        // Node state
+        const state = nodeState?.stateInfo;
+        parsedNodes.push({
+            ...node,
+            data: {
+                ...node.data,
+                handles: {
+                    input: newInputHandles,
+                    output: newOutputHandles,
+                },
+                extras: {
+                    gpstTimings: gpst,
+                    stateInfo: state,
+                },
+            },
+        });
+    }
+    return parsedNodes;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@luxonis/depthai-pipeline-lib",
-	"version": "1.13.0",
+	"version": "1.14.0",
 	"type": "module",
 	"license": "UNLICENSED",
 	"main": "./dist/src/index.js",