@luxonis/depthai-pipeline-lib 1.12.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);
 }
@@ -1297,12 +1313,12 @@
     border-top-right-radius: var(--radii-common);
 }
 
-  .w_icon\.sm {
-    width: var(--sizes-icon-sm);
+  .w_20px {
+    width: 20px;
 }
 
-  .h_icon\.sm {
-    height: var(--sizes-icon-sm);
+  .h_20px {
+    height: 20px;
 }
 
   .w_auto {
@@ -1313,6 +1329,14 @@
     height: auto;
 }
 
+  .ai_center {
+    align-items: center;
+}
+
+  .jc_center {
+    justify-content: center;
+}
+
   .border-style_dashed {
     border-style: dashed;
 }
@@ -1321,14 +1345,22 @@
     background-color: rgba(0,0,0,0.125);
 }
 
-  .bg-c_dark\.error\! {
-    background-color: var(--colors-dark-error) !important;
+  .bg-c_dark\.warning\! {
+    background-color: var(--colors-dark-warning) !important;
 }
 
   .bg-c_dark\.success\! {
     background-color: var(--colors-dark-success) !important;
 }
 
+  .bg-c_dark\.error\! {
+    background-color: var(--colors-dark-error) !important;
+}
+
+  .bg-c_dark\.gray\! {
+    background-color: var(--colors-dark-gray) !important;
+}
+
   .ml_xs {
     margin-left: 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

@@ -1,22 +1,41 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Flex, HelpIcon, Label, SubLabel, } from '@luxonis/common-fe-components';
+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';
 const NodeHandles = (props) => {
     const { handles, type } = props;
-    return (_jsx(Flex, { full: true, direction: "column", align: type === 'input' ? 'start' : 'end', children: handles.map(({ type: handleType, id, blocking, queueSize, name, maxQueueSize, fps, connected, }) => {
+    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, }) => {
             if (!connected) {
                 return;
             }
             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!' : '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) => {
@@ -29,6 +48,9 @@ const NodeHandlesSubLabel = (props) => {
             ? `[${fps ? `${fps.toFixed(1)} | ` : ''}${`${maxQueueSize ?? 0}/${queueSize}`}] ${name}`
             : `${fps ? `[${fps.toFixed(1)}]` : ''} ${name}`, break: "none" }));
 };
+const GPSTTimings = (props) => {
+    return (_jsx(Flex, { flexDirection: "column", alignItems: "center", minWidth: "120px", children: Object.entries(props).map(([key, item]) => (_jsxs(Flex, { gap: "xxs", children: [_jsx(Label, { text: `${key}:`, size: "small" }), _jsx(Label, { text: `${formatTiming(item)}ms`, size: "small" })] }, `${key}-${item}-label`))) }));
+};
 export const PipelineNode = (props) => {
     const { data: node } = props;
     // biome-ignore lint/suspicious/noPrototypeBuiltins: Intended
@@ -48,9 +70,22 @@ export const PipelineNode = (props) => {
                     backgroundColor: 'light.gray',
                     roundedTop: 'common',
                 }), children: [_jsx("span", { className: css({
-                            width: 'icon.sm',
-                            height: 'icon.sm',
-                        }) }), _jsx(Label, { text: node.id ? `${node.name} (${node.id})` : node.name, color: "unset" }), _jsx(Button, { variant: "ghost", color: "transparent", icon: HelpIcon, onClick: () => window.open(link, '_blank'), className: clsx('node-help-icon', css({
+                            width: '20px',
+                            height: '20px',
+                            display: 'flex',
+                            alignItems: 'center',
+                        }), children: (node.nodeType === 'device' || node.nodeType === 'host') && (_jsx(Badge, { label: node.nodeType === 'device' ? 'D' : 'H', variant: node.nodeType === 'device' ? 'active' : 'cyan', style: {
+                                padding: '0px',
+                                display: 'flex',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                width: '20px',
+                                height: '20px',
+                            }, tooltip: node.nodeType === 'device' ? 'Device Node' : 'Host Node', cursor: "help" })) }), _jsx(Label, { text: node.id
+                            ? `${node.name} (${node.id}) ${node.extras?.stateInfo ? `(${node.extras.stateInfo.letter})` : ''}`
+                            : node.extras?.stateInfo
+                                ? `${node.name} (${node.extras.stateInfo.letter})`
+                                : node.name, color: "unset" }), _jsx(Button, { variant: "ghost", color: "transparent", icon: HelpIcon, onClick: () => window.open(link, '_blank'), className: clsx('node-help-icon', css({
                             width: 'auto',
                             height: 'auto',
                             right: 'xs',
@@ -60,7 +95,7 @@ export const PipelineNode = (props) => {
                 }), style: {
                     border: 'none',
                     background: 'transparent',
-                } }), _jsxs(Flex, { gap: "sm", paddingY: "xs", children: [_jsx(NodeHandles, { type: "input", handles: node.handles.input }), _jsx(NodeHandles, { type: "output", handles: node.handles.output })] }), _jsx(Handle, { type: "source", position: Position.Bottom, id: "bottom", isConnectable: false, className: css({
+                } }), _jsxs(Flex, { gap: "sm", paddingY: "xs", minWidth: `${MIN_NODE_WIDTH}px`, children: [_jsx(NodeHandles, { type: "input", handles: node.handles.input }), node.extras && node.extras.gpstTimings && (_jsx(GPSTTimings, { ...node.extras.gpstTimings })), _jsx(NodeHandles, { type: "output", handles: node.handles.output })] }), _jsx(Handle, { type: "source", position: Position.Bottom, id: "bottom", isConnectable: false, className: css({
                     width: 'custom.handle.dot!',
                     height: 'custom.handle.dot!',
                 }), style: {

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

@@ -1,11 +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 updateNodesOnPipelineStateChange: (nodes: ParsedNode[], pipelineState: PipelineState[]) => ParsedNode[];
 export declare const PipelineCanvas: React.FC<PipelineCanvasProps>;

package/dist/src/components/PipelineCanvas.js

@@ -1,221 +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 { adjustNodes, getLayoutedElements, updateNodesOnPipelineStateChange, } from '../services/utils.js';
+import { BridgeEdge } from './BridgeEdge.js';
 import { PipelineNode } from './Node.js';
-const getLayoutedElements = (nodes, edges) => {
-    const graph = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
-    graph.setGraph({ rankdir: 'LR', ranksep: 80, nodesep: 40 });
-    const childNodes = nodes.filter((node) => node.type !== 'group');
-    for (const edge of edges) {
-        graph.setEdge(edge.source, edge.target);
-    }
-    for (const node of childNodes) {
-        graph.setNode(node.id, {
-            width: node.measured?.width ?? 300,
-            height: node.measured?.height ?? 150,
-        });
-    }
-    Dagre.layout(graph);
-    return {
-        nodes: nodes.map((node) => {
-            const pos = graph.node(node.id);
-            if (!pos)
-                return node;
-            return {
-                ...node,
-                position: {
-                    x: pos.x - (node.measured?.width ?? 300) / 2,
-                    y: pos.y - (node.measured?.height ?? 150) / 2,
-                },
-            };
-        }),
-        edges,
-    };
-};
-const adjustNodes = (nodes, edges) => {
-    const PADDING = 16;
-    // 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 = {};
-    const resolvedPositions = {};
-    // Start with all non-group nodes at their measured sizes
-    for (const node of childNodes) {
-        resolvedSizes[node.id] = {
-            width: node.measured?.width ?? 300,
-            height: node.measured?.height ?? 150,
-        };
-    }
-    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: 300, height: 150 };
-            continue;
-        }
-        const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
-        g.setGraph({ rankdir: 'LR', ranksep: 60, nodesep: 20 });
-        for (const child of children) {
-            // Use resolved size (important for nested groups!)
-            const size = resolvedSizes[child.id] ?? { width: 300, height: 150 };
-            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;
-        for (const child of children) {
-            const pos = g.node(child.id);
-            const size = resolvedSizes[child.id] ?? { width: 300, height: 150 };
-            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);
-            // Store relative position within parent
-            resolvedPositions[child.id] = {
-                x: x - minX + PADDING, // will be adjusted after minX is finalized
-                y: y - minY + PADDING,
-            };
-            updatedNodes[child.id] = {
-                ...updatedNodes[child.id],
-                position: { x: x - minX + PADDING, y: y - minY + PADDING },
-            };
-        }
-        // Re-pass to fix positions now that minX/minY are known
-        for (const child of children) {
-            const pos = g.node(child.id);
-            const size = resolvedSizes[child.id] ?? { width: 300, height: 150 };
-            updatedNodes[child.id] = {
-                ...updatedNodes[child.id],
-                position: {
-                    x: pos.x - size.width / 2 - minX + PADDING,
-                    y: pos.y - size.height / 2 - minY + PADDING,
-                },
-            };
-        }
-        const groupW = maxX - minX + PADDING * 2;
-        const groupH = maxY - minY + PADDING * 2;
-        // 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', ranksep: 80, nodesep: 40 });
-    const rootNodes = nodes.filter((n) => !n.parentId);
-    for (const node of rootNodes) {
-        const size = resolvedSizes[node.id] ?? { width: 300, height: 150 };
-        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: 300, height: 150 };
-        updatedNodes[node.id] = {
-            ...updatedNodes[node.id],
-            position: {
-                x: pos.x - size.width / 2,
-                y: pos.y - size.height / 2,
-            },
-        };
-    }
-    const topoSort = (nodes) => {
-        const nodeMap = new Map(nodes.map((n) => [n.id, n]));
-        const result = [];
-        const visited = new Set();
-        const visit = (id) => {
-            if (visited.has(id))
-                return;
-            visited.add(id);
-            const node = nodeMap.get(id);
-            if (!node)
-                return;
-            // Visit parent first
-            if (node.parentId)
-                visit(node.parentId);
-            result.push(node);
-        };
-        for (const node of nodes) {
-            visit(node.id);
-        }
-        return result;
-    };
-    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());
-        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;
-            }
-            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;
-            }
-            newOutputHandles.push(obj);
-        }
-        parsedNodes.push({
-            ...node,
-            data: {
-                ...node.data,
-                handles: {
-                    input: newInputHandles,
-                    output: newOutputHandles,
-                },
-            },
-        });
-    }
-    return parsedNodes;
-};
-const PipelineCanvasBody = ({ pipeline, pipelineState, 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;
@@ -223,6 +16,8 @@ const PipelineCanvasBody = ({ pipeline, pipelineState, action, ...flexProps }) =
     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(() => {
         void fitView();
@@ -235,12 +30,13 @@ const PipelineCanvasBody = ({ pipeline, pipelineState, action, ...flexProps }) =
             return;
         }
         const layouted = getLayoutedElements(pipeline?.nodes ?? [], pipeline?.edges ?? []);
-        const adjustedNodes = adjustNodes([...layouted.nodes], [...layouted.edges]);
         if (pipelineState) {
-            const updatedNodes = updateNodesOnPipelineStateChange(adjustedNodes, pipelineState);
-            setNodes([...updatedNodes]);
+            const updatedNodes = updateNodesOnPipelineStateChange([...layouted.nodes], pipelineState);
+            const adjustedNodes = adjustNodes([...updatedNodes], layouted.edges);
+            setNodes([...adjustedNodes]);
         }
         else {
+            const adjustedNodes = adjustNodes([...layouted.nodes], layouted.edges);
             setNodes([...adjustedNodes]);
         }
         setEdges([...layouted.edges]);
@@ -265,17 +61,6 @@ const PipelineCanvasBody = ({ pipeline, pipelineState, action, ...flexProps }) =
         await fitView({ nodes: nds });
     };
     // biome-ignore lint/correctness/useExhaustiveDependencies: Intended
-    React.useEffect(() => {
-        if (!autoArrangeRef.current) {
-            return;
-        }
-        if (nodes.length > 0 && edges.length > 0) {
-            const viewport = getViewport();
-            void setViewportAndFit(viewport.x, viewport.y, viewport.zoom, nodes);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [nodes, edges]);
-    // biome-ignore lint/correctness/useExhaustiveDependencies: Intended
     React.useEffect(() => {
         if (shouldFitAndResize) {
             const viewport = getViewport();
@@ -284,6 +69,6 @@ const PipelineCanvasBody = ({ pipeline, pipelineState, action, ...flexProps }) =
         }
         // 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-handles.d.ts

@@ -1,5 +1,6 @@
 import type { Edge } from '@xyflow/react';
 import type { ParsedNode, RawPipelineNodeIO } from './pipeline';
+import { PipelineStateDotColor } from './pipeline-state';
 export type RawPipelineBridge = [number, number];
 export type ParsedHandle = {
     id: number;
@@ -10,6 +11,7 @@ export type ParsedHandle = {
     connected: boolean;
     maxQueueSize?: number;
     fps?: number;
+    dotColor?: PipelineStateDotColor;
 };
 export declare function parseHandles(handles: RawPipelineNodeIO[]): {
     input: ParsedHandle[];
@@ -27,6 +29,7 @@ export declare function filterNodesHandles(nodes: ParsedNode[], edges: Edge[]):
                 queueSize: number;
                 maxQueueSize?: number;
                 fps?: number;
+                dotColor?: PipelineStateDotColor;
             }[];
             output: {
                 connected: boolean;
@@ -37,11 +40,14 @@ export declare function filterNodesHandles(nodes: ParsedNode[], edges: Edge[]):
                 queueSize: number;
                 maxQueueSize?: number;
                 fps?: number;
+                dotColor?: PipelineStateDotColor;
             }[];
         };
         id: string;
         parentId?: string;
         name: string;
+        nodeType?: "device" | "host";
+        extras?: import("./pipeline-state").NodeExtras;
     };
     id: string;
     position: import("@xyflow/system").XYPosition;

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

@@ -1,10 +1,13 @@
 export type RawPipelineStatePayload = {
     nodeStates: RawPipelineState[];
 };
+type IONodeState = 0 | 1 | 2;
 export type IOStates = {
     [key: string]: {
         numQueued: number;
         timing: TimingWithFps;
+        state?: IONodeState;
+        dotColor?: PipelineStateDotColor;
     };
 };
 type Timing = {
@@ -20,6 +23,8 @@ type TimingWithFps = {
     durationStats: Timing;
     fps: number;
 };
+type NodeStateRaw = 0 | 1 | 2 | 3;
+type NodeState = 'IDLE' | 'GETTING_INPUTS' | 'PROCESSING' | 'SENDING_OUTPUTS';
 export type RawPipelineState = [
     number,
     {
@@ -30,13 +35,31 @@ export type RawPipelineState = [
         otherTimings: object;
         outputStates: IOStates;
         outputsSendTiming: TimingWithFps;
-        state: number;
+        state?: NodeStateRaw;
     }
 ];
+export type PipelineStateDotColor = 'gray' | 'green' | 'yellow' | 'red';
+export type GPSTTimingsType = {
+    G: number;
+    P: number;
+    S: number;
+    T: number;
+};
+export type NodeExtras = {
+    gpstTimings?: GPSTTimingsType;
+    stateInfo?: {
+        state: NodeState;
+        label: string;
+        letter: string;
+    };
+};
 export type PipelineState = {
     id: number;
     inputs: IOStates;
     outputs: IOStates;
-};
+} & NodeExtras;
 export declare function parsePipelineState(rawPayload: RawPipelineStatePayload): PipelineState[];
+export declare function stateToLabel(state: NodeState): string;
+export declare function stateToLetter(state: NodeState): string;
+export declare function formatTiming(time: number): string;
 export {};

package/dist/src/services/pipeline-state.js

@@ -1,13 +1,94 @@
+function nodeStateToDotColor(state) {
+    switch (state) {
+        case 0:
+            return 'green';
+        case 1:
+            return 'yellow';
+        case 2:
+            return 'red';
+        default:
+            return 'gray';
+    }
+}
+function nodeStateToState(state) {
+    switch (state) {
+        case 0:
+            return 'IDLE';
+        case 1:
+            return 'GETTING_INPUTS';
+        case 2:
+            return 'PROCESSING';
+        case 3:
+            return 'SENDING_OUTPUTS';
+    }
+}
+function formatIOStates(values) {
+    let returnObj = {};
+    for (const [key, value] of Object.entries(values)) {
+        returnObj = {
+            ...returnObj,
+            [key]: {
+                ...value,
+                dotColor: value.state ? nodeStateToDotColor(value.state) : 'gray',
+            },
+        };
+    }
+    return returnObj;
+}
 export function parsePipelineState(rawPayload) {
     const { nodeStates } = rawPayload;
     const parsedNodeStates = [];
     for (const [nodeId, nodeState] of nodeStates) {
+        const state = nodeState?.state ? nodeStateToState(nodeState.state) : 'IDLE';
         const currentNode = {
             id: nodeId,
-            inputs: nodeState.inputStates,
-            outputs: nodeState.outputStates,
+            inputs: formatIOStates(nodeState.inputStates),
+            outputs: formatIOStates(nodeState.outputStates),
+            gpstTimings: {
+                G: nodeState.inputsGetTiming.durationStats.averageMicrosRecent,
+                P: nodeState.mainLoopTiming.durationStats.averageMicrosRecent -
+                    nodeState.outputsSendTiming.durationStats.averageMicrosRecent -
+                    nodeState.inputsGetTiming.durationStats.averageMicrosRecent,
+                S: nodeState.outputsSendTiming.durationStats.averageMicrosRecent,
+                T: nodeState.mainLoopTiming.durationStats.averageMicrosRecent,
+            },
+            stateInfo: {
+                state: state,
+                label: stateToLabel(state),
+                letter: stateToLetter(state),
+            },
         };
         parsedNodeStates.push(currentNode);
     }
     return parsedNodeStates;
 }
+export function stateToLabel(state) {
+    switch (state) {
+        case 'IDLE':
+            return 'Idle';
+        case 'GETTING_INPUTS':
+            return 'Getting Inputs';
+        case 'PROCESSING':
+            return 'Processing';
+        case 'SENDING_OUTPUTS':
+            return 'Sending Outputs';
+    }
+}
+export function stateToLetter(state) {
+    switch (state) {
+        case 'IDLE':
+            return 'I';
+        case 'GETTING_INPUTS':
+            return 'G';
+        case 'PROCESSING':
+            return 'P';
+        case 'SENDING_OUTPUTS':
+            return 'S';
+    }
+}
+// NOTE: Time is in microseconds. 1us => 0.001 ms => 1e-6 s
+export function formatTiming(time) {
+    return Math.round(time / 1000)
+        .toString()
+        .padStart(3, '0');
+}

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

@@ -1,5 +1,6 @@
 import { type Edge, type Node } from '@xyflow/react';
 import { type ParsedHandle } from './pipeline-handles';
+import { NodeExtras } from './pipeline-state';
 export type RawPipelineNodeIO = [
     [
         string,
@@ -18,6 +19,7 @@ export type RawPipelineNode = {
     ioInfo: RawPipelineNodeIO[];
     name: string;
     parentId?: number;
+    deviceNode?: boolean;
 };
 export type RawPipelineEdge = {
     node1Id: number;
@@ -45,31 +47,7 @@ export type ParsedNode = Node<{
         input: ParsedHandle[];
         output: ParsedHandle[];
     };
+    nodeType?: 'device' | 'host';
+    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 [
@@ -40,6 +39,11 @@ export function parsePipeline(rawPayload) {
             id: id.toString(),
             name: node.name,
             handles: parseHandles(node.ioInfo),
+            nodeType: node.deviceNode === undefined
+                ? undefined
+                : node.deviceNode
+                    ? 'device'
+                    : 'host',
         },
     })) ?? [];
     // Check for parent nodes and if there is children with some parent node that doesn't exist the create it as fake node
@@ -123,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`,
@@ -131,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];
@@ -147,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

@@ -0,0 +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

@@ -0,0 +1,255 @@
+import Dagre from '@dagrejs/dagre';
+export const topoSort = (nodes) => {
+    const nodeMap = new Map(nodes.map((n) => [n.id, n]));
+    const result = [];
+    const visited = new Set();
+    const visit = (id) => {
+        if (visited.has(id))
+            return;
+        visited.add(id);
+        const node = nodeMap.get(id);
+        if (!node)
+            return;
+        // Visit parent first
+        if (node.parentId)
+            visit(node.parentId);
+        result.push(node);
+    };
+    for (const node of nodes) {
+        visit(node.id);
+    }
+    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.12.0",
+	"version": "1.14.0",
 	"type": "module",
 	"license": "UNLICENSED",
 	"main": "./dist/src/index.js",