@luxonis/depthai-pipeline-lib 1.11.0 → 1.12.0

package/dist/index.css

@@ -1,3 +1,3 @@
-@import url('@xyflow/react/dist/style.css');
-@import url('@luxonis/common-fe-components/styles');
-@import url('./panda.css');
+@import url("@xyflow/react/dist/style.css");
+@import url("@luxonis/common-fe-components/styles");
+@import url("./panda.css");

package/dist/src/components/GroupNode.js

@@ -6,14 +6,14 @@ import { css } from '../styled-system/css/index.mjs';
 export const GroupNode = (props) => {
     const { data: _node } = props;
     return (_jsx(Flex, { direction: "column", className: css({
-            'minWidth': 'container.smaller.xxs',
-            'border': 'base',
-            'rounded': 'common',
+            minWidth: 'container.smaller.xxs',
+            border: 'base',
+            rounded: 'common',
             '&:hover .node-help-icon': {
                 color: 'text.normal',
             },
-            'padding': 0,
-            'borderStyle': 'dashed',
-            'backgroundColor': 'rgba(0,0,0,0.125)',
+            padding: 0,
+            borderStyle: 'dashed',
+            backgroundColor: 'rgba(0,0,0,0.125)',
         }) }));
 };

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

@@ -1,5 +1,5 @@
-import React from 'react';
 import type { NodeProps } from '@xyflow/react';
+import React from 'react';
 import { type ParsedNode } from '../services/pipeline.js';
 export type PipelineNodeProps = NodeProps<ParsedNode>;
 export declare const PipelineNode: React.FC<PipelineNodeProps>;

package/dist/src/components/Node.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Handle, Position } from '@xyflow/react';
+import { Button, Flex, HelpIcon, Label, SubLabel, } from '@luxonis/common-fe-components';
 import { clsx } from '@luxonis/common-fe-components/helpers';
-import { Button, Flex, HelpIcon, Label, SubLabel } from '@luxonis/common-fe-components';
-import { css } from '../styled-system/css/css.mjs';
+import { Handle, Position } from '@xyflow/react';
 import { DOCS_BASE_URL, NodesWithLinks, } from '../services/pipeline.js';
-const NodeHandles = props => {
+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', children: handles.map(({ type: handleType, id, blocking, queueSize, name, maxQueueSize, fps, connected, }) => {
             if (!connected) {
                 return;
             }
@@ -19,7 +19,7 @@ const NodeHandles = props => {
                         }) }), _jsx(NodeHandlesSubLabel, { type: type, name: name, queueSize: queueSize, maxQueueSize: maxQueueSize, fps: fps })] }, id));
         }) }));
 };
-const NodeHandlesSubLabel = props => {
+const NodeHandlesSubLabel = (props) => {
     const { type, name, queueSize, maxQueueSize, fps } = props;
     return (_jsx(SubLabel, { className: css({
             ...(type === 'input' //
@@ -29,17 +29,17 @@ const NodeHandlesSubLabel = props => {
             ? `[${fps ? `${fps.toFixed(1)} | ` : ''}${`${maxQueueSize ?? 0}/${queueSize}`}] ${name}`
             : `${fps ? `[${fps.toFixed(1)}]` : ''} ${name}`, break: "none" }));
 };
-export const PipelineNode = props => {
+export const PipelineNode = (props) => {
     const { data: node } = props;
-    // eslint-disable-next-line no-prototype-builtins
+    // biome-ignore lint/suspicious/noPrototypeBuiltins: Intended
     const link = NodesWithLinks.hasOwnProperty(node.name)
         ? `${DOCS_BASE_URL}/${NodesWithLinks[node.name]}`
         : DOCS_BASE_URL;
     return (_jsxs(Flex, { direction: "column", className: css({
-            'minWidth': 'container.smaller.xxs',
-            'border': 'base',
-            'rounded': 'common',
-            'backgroundColor': 'white',
+            minWidth: 'container.smaller.xxs',
+            border: 'base',
+            rounded: 'common',
+            backgroundColor: 'white',
             '&:hover .node-help-icon': {
                 color: 'text.normal',
             },

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

@@ -1,5 +1,5 @@
-import React from 'react';
 import type { FlexProps } from '@luxonis/common-fe-components';
+import React from 'react';
 import type { ParsedNode, Pipeline } from '../services/pipeline.js';
 import type { PipelineState } from '../services/pipeline-state.js';
 export type PipelineCanvasProps = FlexProps & {

package/dist/src/components/PipelineCanvas.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { Panel, ReactFlow, ReactFlowProvider, useEdgesState, useNodesState, useReactFlow, useStore, } from '@xyflow/react';
-import { Flex, Header } from '@luxonis/common-fe-components';
 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 React from 'react';
 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');
+    const childNodes = nodes.filter((node) => node.type !== 'group');
     for (const edge of edges) {
         graph.setEdge(edge.source, edge.target);
     }
@@ -19,7 +19,7 @@ const getLayoutedElements = (nodes, edges) => {
     }
     Dagre.layout(graph);
     return {
-        nodes: nodes.map(node => {
+        nodes: nodes.map((node) => {
             const pos = graph.node(node.id);
             if (!pos)
                 return node;
@@ -36,44 +36,46 @@ const getLayoutedElements = (nodes, edges) => {
 };
 const adjustNodes = (nodes, edges) => {
     const PADDING = 16;
-    const groupNodes = nodes.filter(node => node.type === 'group');
-    const childNodes = nodes.filter(node => node.type !== 'group');
-    const graph = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
-    graph.setGraph({ rankdir: 'LR', ranksep: 80, nodesep: 40 });
-    for (const edge of edges) {
-        graph.setEdge(edge.source, edge.target);
-    }
+    // 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) {
-        graph.setNode(node.id, {
+        resolvedSizes[node.id] = {
             width: node.measured?.width ?? 300,
             height: node.measured?.height ?? 150,
-        });
-    }
-    Dagre.layout(graph);
-    const positionedChildren = childNodes.map(node => {
-        const pos = graph.node(node.id);
-        return {
-            ...node,
-            position: {
-                x: pos.x - (node.measured?.width ?? 300) / 2,
-                y: pos.y - (node.measured?.height ?? 150) / 2,
-            },
         };
-    });
-    const positionedGroups = groupNodes.map(group => {
-        const children = positionedChildren.filter(n => n.parentId === group.id);
+    }
+    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) {
-            return { ...group, position: { x: 0, y: 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) {
-            g.setNode(child.id, {
-                width: child.measured?.width ?? 300,
-                height: child.measured?.height ?? 150,
-            });
+            // 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));
+        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);
         }
@@ -82,59 +84,102 @@ const adjustNodes = (nodes, edges) => {
         let minY = 9999;
         let maxX = -9999;
         let maxY = -9999;
-        const locallyPositioned = children.map(child => {
+        for (const child of children) {
             const pos = g.node(child.id);
-            const x = pos.x - (child.measured?.width ?? 300) / 2;
-            const y = pos.y - (child.measured?.height ?? 150) / 2;
+            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 + (child.measured?.width ?? 300));
-            maxY = Math.max(maxY, y + (child.measured?.height ?? 150));
-            return { ...child, position: { x, y } };
-        });
-        const relativeChildren = locallyPositioned.map(child => ({
-            ...child,
-            position: {
-                x: child.position.x - minX + PADDING,
-                y: child.position.y - minY + PADDING,
-            },
-        }));
-        const groupW = maxX - minX + PADDING * 2;
-        const groupH = maxY - minY + PADDING * 2;
-        let absMinX = 9999;
-        let absMinY = 9999;
-        for (const child of children) {
-            const pos = graph.node(child.id);
-            absMinX = Math.min(absMinX, pos.x - (child.measured?.width ?? 300) / 2);
-            absMinY = Math.min(absMinY, pos.y - (child.measured?.height ?? 150) / 2);
+            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 },
+            };
         }
-        return {
-            nodes: relativeChildren,
-            group: {
-                ...group,
+        // 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: absMinX - PADDING,
-                    y: absMinY - PADDING,
+                    x: pos.x - size.width / 2 - minX + PADDING,
+                    y: pos.y - size.height / 2 - minY + PADDING,
                 },
-                width: groupW + PADDING,
-                height: groupH,
-                style: { ...group.style, width: groupW + PADDING, height: groupH },
+            };
+        }
+        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 rootChildren = positionedChildren.filter(n => !n.parentId);
-    const groupedChildren = positionedGroups.flatMap(g => g.nodes);
-    const groups = positionedGroups.map(g => g.group);
-    return [
-        ...groups.filter(g => g !== undefined),
-        ...groupedChildren.filter(c => c !== undefined),
-        ...rootChildren,
-    ];
+    }
+    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 nodeState = pipelineState.find((state) => state.id.toString() === node.id.toString());
         const inputHandles = node.data.handles.input;
         const outputHandles = node.data.handles.output;
         const newInputHandles = [];
@@ -178,6 +223,7 @@ const PipelineCanvasBody = ({ pipeline, pipelineState, action, ...flexProps }) =
     const reactFlowWidth = useStore(widthSelector);
     const reactFlowHeight = useStore(heightSelector);
     const [shouldFitAndResize, setShouldFitAndResize] = React.useState(false);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: Intended
     React.useEffect(() => {
         void fitView();
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -200,6 +246,7 @@ const PipelineCanvasBody = ({ pipeline, pipelineState, action, ...flexProps }) =
         setEdges([...layouted.edges]);
         setShouldFitAndResize(true);
     }, [pipeline?.edges, pipeline?.nodes, setEdges, setNodes, pipelineState]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: Intended
     React.useEffect(() => {
         if (pipelineState && nodes.length > 0) {
             const updatedNodes = updateNodesOnPipelineStateChange(nodes, pipelineState);
@@ -217,6 +264,7 @@ const PipelineCanvasBody = ({ pipeline, pipelineState, action, ...flexProps }) =
         await setViewport({ x, y, zoom });
         await fitView({ nodes: nds });
     };
+    // biome-ignore lint/correctness/useExhaustiveDependencies: Intended
     React.useEffect(() => {
         if (!autoArrangeRef.current) {
             return;
@@ -227,6 +275,7 @@ const PipelineCanvasBody = ({ pipeline, pipelineState, action, ...flexProps }) =
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [nodes, edges]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: Intended
     React.useEffect(() => {
         if (shouldFitAndResize) {
             const viewport = getViewport();
@@ -237,4 +286,4 @@ const PipelineCanvasBody = ({ pipeline, pipelineState, action, ...flexProps }) =
     }, [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 }) }))] }));
 };
-export const PipelineCanvas = props => (_jsx(ReactFlowProvider, { children: _jsx(PipelineCanvasBody, { ...props }) }));
+export const PipelineCanvas = (props) => (_jsx(ReactFlowProvider, { children: _jsx(PipelineCanvasBody, { ...props }) }));

package/dist/src/index.d.ts

@@ -1,6 +1,6 @@
-export { parsePipeline } from './services/pipeline.js';
+export type { PipelineCanvasProps } from './components/PipelineCanvas.js';
+export { PipelineCanvas } from './components/PipelineCanvas.js';
 export type { Pipeline, RawPipelinePayload } from './services/pipeline.js';
+export { parsePipeline } from './services/pipeline.js';
+export type { PipelineState, RawPipelineStatePayload, } from './services/pipeline-state.js';
 export { parsePipelineState } from './services/pipeline-state.js';
-export type { PipelineState, RawPipelineStatePayload } from './services/pipeline-state.js';
-export { PipelineCanvas } from './components/PipelineCanvas.js';
-export type { PipelineCanvasProps } from './components/PipelineCanvas.js';

package/dist/src/index.js

@@ -1,3 +1,3 @@
+export { PipelineCanvas } from './components/PipelineCanvas.js';
 export { parsePipeline } from './services/pipeline.js';
 export { parsePipelineState } from './services/pipeline-state.js';
-export { PipelineCanvas } from './components/PipelineCanvas.js';

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

@@ -0,0 +1,78 @@
+import type { Edge } from '@xyflow/react';
+import type { ParsedNode, RawPipelineNodeIO } from './pipeline';
+export type RawPipelineBridge = [number, number];
+export type ParsedHandle = {
+    id: number;
+    name: string;
+    type: 'input' | 'output';
+    blocking: boolean;
+    queueSize: number;
+    connected: boolean;
+    maxQueueSize?: number;
+    fps?: number;
+};
+export declare function parseHandles(handles: RawPipelineNodeIO[]): {
+    input: ParsedHandle[];
+    output: ParsedHandle[];
+};
+export declare function filterNodesHandles(nodes: ParsedNode[], edges: Edge[]): {
+    data: {
+        handles: {
+            input: {
+                connected: boolean;
+                id: number;
+                name: string;
+                type: "input" | "output";
+                blocking: boolean;
+                queueSize: number;
+                maxQueueSize?: number;
+                fps?: number;
+            }[];
+            output: {
+                connected: boolean;
+                id: number;
+                name: string;
+                type: "input" | "output";
+                blocking: boolean;
+                queueSize: number;
+                maxQueueSize?: number;
+                fps?: number;
+            }[];
+        };
+        id: string;
+        parentId?: string;
+        name: string;
+    };
+    id: string;
+    position: import("@xyflow/system").XYPosition;
+    type?: string | undefined;
+    sourcePosition?: import("@xyflow/system").Position;
+    targetPosition?: import("@xyflow/system").Position;
+    hidden?: boolean;
+    selected?: boolean;
+    dragging?: boolean;
+    draggable?: boolean;
+    selectable?: boolean;
+    connectable?: boolean;
+    deletable?: boolean;
+    dragHandle?: string;
+    width?: number;
+    height?: number;
+    initialWidth?: number;
+    initialHeight?: number;
+    parentId?: string;
+    zIndex?: number;
+    extent?: "parent" | import("@xyflow/system").CoordinateExtent;
+    expandParent?: boolean;
+    ariaLabel?: string;
+    origin?: import("@xyflow/system").NodeOrigin;
+    handles?: import("@xyflow/system").NodeHandle[];
+    measured?: {
+        width?: number;
+        height?: number;
+    };
+    style?: import("react").CSSProperties;
+    className?: string;
+    resizing?: boolean;
+    focusable?: boolean;
+}[];

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

@@ -0,0 +1,41 @@
+export function parseHandles(handles) {
+    const parsedHandles = {
+        input: [],
+        output: [],
+    };
+    for (const [_, handle] of handles) {
+        const type = handle.type === 3 ? 'input' : 'output';
+        const parsed = {
+            id: handle.id,
+            name: handle.name,
+            type,
+            blocking: handle.blocking,
+            queueSize: handle.queueSize,
+            connected: true,
+        };
+        parsedHandles[type].push(parsed);
+    }
+    return parsedHandles;
+}
+export function filterNodesHandles(nodes, edges) {
+    const connectedHandleIds = new Set(edges.flatMap((edge) => [
+        `${edge.source}-${edge.sourceHandle}`,
+        `${edge.target}-${edge.targetHandle}`,
+    ]));
+    return nodes.map((node) => ({
+        ...node,
+        data: {
+            ...node.data,
+            handles: {
+                input: node.data.handles.input.map((handle) => ({
+                    ...handle,
+                    connected: connectedHandleIds.has(`${node.id}-${handle.name}`),
+                })),
+                output: node.data.handles.output.map((handle) => ({
+                    ...handle,
+                    connected: connectedHandleIds.has(`${node.id}-${handle.name}`),
+                })),
+            },
+        },
+    }));
+}

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

@@ -1,4 +1,5 @@
 import { type Edge, type Node } from '@xyflow/react';
+import { type ParsedHandle } from './pipeline-handles';
 export type RawPipelineNodeIO = [
     [
         string,
@@ -18,7 +19,6 @@ export type RawPipelineNode = {
     name: string;
     parentId?: number;
 };
-export type RawPipelineBridge = [number, number];
 export type RawPipelineEdge = {
     node1Id: number;
     node1Output: string;
@@ -37,16 +37,6 @@ export type Pipeline = {
     nodes: ParsedNode[];
     edges: Edge[];
 };
-export type ParsedHandle = {
-    id: number;
-    name: string;
-    type: 'input' | 'output';
-    blocking: boolean;
-    queueSize: number;
-    connected: boolean;
-    maxQueueSize?: number;
-    fps?: number;
-};
 export type ParsedNode = Node<{
     id: string;
     parentId?: string;

package/dist/src/services/pipeline.js

@@ -1,74 +1,73 @@
-import { MarkerType } from '@xyflow/react';
-function parseHandles(handles) {
-    const parsedHandles = {
-        input: [],
-        output: [],
-    };
-    for (const [_, handle] of handles) {
-        const type = handle.type === 3 ? 'input' : 'output';
-        const parsed = {
-            id: handle.id,
-            name: handle.name,
-            type,
-            blocking: handle.blocking,
-            queueSize: handle.queueSize,
-            connected: true,
-        };
-        parsedHandles[type].push(parsed);
-    }
-    return parsedHandles;
-}
-function filterNodesHandles(nodes, edges) {
-    const connectedHandleIds = new Set(edges.flatMap(edge => [
-        `${edge.source}-${edge.sourceHandle}`,
-        `${edge.target}-${edge.targetHandle}`,
-    ]));
-    return nodes.map(node => ({
-        ...node,
-        data: {
-            ...node.data,
-            handles: {
-                input: node.data.handles.input.map(handle => ({
-                    ...handle,
-                    connected: connectedHandleIds.has(`${node.id}-${handle.name}`),
-                })),
-                output: node.data.handles.output.map(handle => ({
-                    ...handle,
-                    connected: connectedHandleIds.has(`${node.id}-${handle.name}`),
-                })),
-            },
+import { MarkerType, } from '@xyflow/react';
+import { filterNodesHandles, parseHandles, } from './pipeline-handles';
+function addFakeNode(id) {
+    return [
+        typeof id === 'number' ? id : parseInt(id),
+        {
+            id: typeof id === 'number' ? id : parseInt(id),
+            name: 'Unknown',
+            ioInfo: [
+                [
+                    ['', ''],
+                    {
+                        id: 0,
+                        name: 'unknown',
+                        type: 0,
+                        blocking: false,
+                        queueSize: 0,
+                    },
+                ],
+            ],
         },
-    }));
+    ];
 }
 export function parsePipeline(rawPayload) {
     const { pipeline } = rawPayload;
     // Set all nodes as generic nodes
     const nodes = pipeline.nodes
-        .filter(([_, node]) => pipeline.connections.some(connection => connection.node1Id === node.id || connection.node2Id === node.id))
+        .filter(([_, node]) => pipeline.connections.some((connection) => connection.node1Id === node.id || connection.node2Id === node.id))
         .map(([id, node]) => ({
         type: 'generic',
         id: id.toString(),
         position: { x: 0, y: 0 },
-        parentId: node.parentId?.toString() === '-1' ? undefined : node.parentId?.toString(),
-        extent: node.parentId?.toString() === '-1' ? undefined : 'parent',
+        parentId: node.parentId?.toString() === '-1'
+            ? undefined
+            : node.parentId?.toString(),
+        extent: node.parentId?.toString() === '-1' || node.parentId === undefined
+            ? undefined
+            : 'parent',
         data: {
             id: id.toString(),
             name: node.name,
             handles: parseHandles(node.ioInfo),
         },
     })) ?? [];
+    // Check for parent nodes and if there is children with some parent node that doesn't exist the create it as fake node
+    const parentNodesIdsRaw = [
+        ...new Set(nodes
+            .map((node) => {
+            if (node.parentId !== undefined && node.parentId !== '-1') {
+                return node.parentId;
+            }
+            else {
+                return null;
+            }
+        })
+            .filter((id) => id !== null)),
+    ];
+    const parentNodesArr = parentNodesIdsRaw.map((id) => pipeline.nodes.find(([_, node]) => node.id.toString() === id) ??
+        addFakeNode(id));
     // Set all parent nodes as group nodes
-    const mappedParentNodes = nodes.map(node => node.parentId).filter(id => id !== undefined);
-    const filteredParentNodes = mappedParentNodes.filter(id => id !== '-1');
-    const parentNodes = [...new Set(filteredParentNodes)];
-    const parentNodesArr = parentNodes
-        .map(id => pipeline.nodes.find(([_, node]) => node.id.toString() === id))
-        .filter(node => node !== undefined);
     const formattedParentNodes = parentNodesArr.map(([id, node]) => ({
         type: 'group',
         id: id.toString(),
         position: { x: 0, y: 0 },
-        parentId: node.parentId?.toString() === '-1' ? undefined : node.parentId?.toString(),
+        parentId: node.parentId?.toString() === '-1' || node.parentId === undefined
+            ? undefined
+            : `${node.parentId?.toString()}-parent`,
+        extent: node.parentId?.toString() === '-1' || node.parentId === undefined
+            ? undefined
+            : 'parent',
         data: {
             id: id.toString(),
             name: node.name,
@@ -80,9 +79,10 @@ export function parsePipeline(rawPayload) {
             background: 'rgba(0,0,0,0.125)',
         },
     })) ?? [];
-    const parentNodesIds = parentNodes.map(id => id.toString());
+    // Children nodes
+    const parentNodesIds = parentNodesIdsRaw.map((id) => id.toString());
     const childrenNodes = nodes
-        .map(node => {
+        .map((node) => {
         if (node.parentId && parentNodesIds.includes(node.parentId)) {
             return {
                 ...node,
@@ -101,11 +101,15 @@ export function parsePipeline(rawPayload) {
             return null;
         }
     })
-        .filter(node => node !== null);
+        .filter((node) => node !== null && node !== undefined);
+    // Non-parent and non-child nodes
     const filteredNodes = nodes
-        .filter(node => childrenNodes.find(childNode => childNode.id === node.id) !== undefined ? null : node)
-        .filter(node => node !== null);
-    const newFormattedParentNodes = formattedParentNodes.map(node => ({
+        .filter((node) => childrenNodes.find((childNode) => childNode.id === node.id) !== undefined
+        ? null
+        : node)
+        .filter((node) => node !== null);
+    // After formatting and filtering set the parent nodes ids to match with children parentIds
+    const parentNodes = formattedParentNodes.map((node) => ({
         ...node,
         id: `${node.id}-parent`,
         data: {
@@ -113,14 +117,14 @@ export function parsePipeline(rawPayload) {
             id: `${node.data.id}-parent`,
         },
     }));
-    const edges = pipeline.connections.map(connection => ({
+    const edges = pipeline.connections.map((connection) => ({
         id: `${connection.node1Id}-${connection.node2Id}-${connection.node1Output}-${connection.node2Input}-edge`,
         source: connection.node1Id.toString(),
         target: connection.node2Id.toString(),
         sourceHandle: connection.node1Output,
         targetHandle: connection.node2Input,
     })) ?? [];
-    const bridges = pipeline.bridges?.map(bridge => ({
+    const bridges = pipeline.bridges?.map((bridge) => ({
         id: `${bridge[0]}-${bridge[1]}-bridge`,
         source: bridge[0].toString(),
         target: bridge[1].toString(),
@@ -136,9 +140,12 @@ export function parsePipeline(rawPayload) {
         type: 'step',
     })) ?? [];
     // NOTE: Parent nodes should be rendered before child nodes
-    const groupedNodes = [...newFormattedParentNodes, ...childrenNodes, ...filteredNodes];
+    const groupedNodes = [...parentNodes, ...childrenNodes, ...filteredNodes];
     const nodesWithFilteredHandles = filterNodesHandles(groupedNodes, edges);
-    return { nodes: [...nodesWithFilteredHandles], edges: [...edges, ...bridges] };
+    return {
+        nodes: [...nodesWithFilteredHandles],
+        edges: [...edges, ...bridges],
+    };
 }
 export const DOCS_BASE_URL = `https://docs.luxonis.com/software-v3/depthai/depthai-components/nodes`;
 export const NodesWithLinks = {

package/package.json

@@ -1,64 +1,50 @@
 {
-  "name": "@luxonis/depthai-pipeline-lib",
-  "version": "1.11.0",
-  "type": "module",
-  "license": "UNLICENSED",
-  "main": "./dist/src/index.js",
-  "scripts": {
-    "build": "./build.sh",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "gen:styles": "panda codegen",
-    "prepublishOnly": "npm run build"
-  },
-  "dependencies": {
-    "@dagrejs/dagre": "^1.1.3",
-    "@luxonis/common-fe-components": "1.25.9",
-    "@xyflow/react": "^12.0.4",
-    "postcss-import": "^16.1.0",
-    "postcss-nested": "^6.2.0",
-    "postcss-preset-env": "^10.0.0",
-    "rehype-sanitize": "^6.0.0"
-  },
-  "peerDependencies": {
-    "react": "^18.3.1 || ^19.0.0",
-    "react-dom": "^18.3.1 || ^19.0.0"
-  },
-  "devDependencies": {
-    "@pandacss/dev": "^0.53.0",
-    "@stylistic/eslint-plugin": "^2.6.1",
-    "@types/react": "^18.3.1 || ^19.0.0",
-    "@types/react-dom": "^18.3.1 || ^19.0.0",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
-    "eslint": "^8.56.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-interactive": "^10.8.0",
-    "eslint-plugin-cypress": "^3.3.0",
-    "eslint-plugin-functional": "^6.0.0",
-    "eslint-plugin-github": "^4.10.1",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
-    "postcss": "^8.4.31",
-    "prettier": "^3.2.5",
-    "prettier-eslint": "^16.3.0",
-    "typescript": "^5.2.2"
-  },
-  "overrides": {
-    "@radix-ui/react-alert-dialog": "1.0.5"
-  },
-  "files": [
-    "dist/src/*",
-    "dist/*.css"
-  ],
-  "exports": {
-    ".": "./dist/src/index.js",
-    "./styles": "./dist/index.css"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
+	"name": "@luxonis/depthai-pipeline-lib",
+	"version": "1.12.0",
+	"type": "module",
+	"license": "UNLICENSED",
+	"main": "./dist/src/index.js",
+	"scripts": {
+		"build": "./build.sh",
+		"lint": "biome check .",
+		"lint:fix": "biome check . --write",
+		"gen:styles": "panda codegen",
+		"prepublishOnly": "npm run build"
+	},
+	"dependencies": {
+		"@dagrejs/dagre": "^1.1.3",
+		"@luxonis/common-fe-components": "1.25.9",
+		"@xyflow/react": "^12.0.4",
+		"postcss-import": "^16.1.0",
+		"postcss-nested": "^6.2.0",
+		"postcss-preset-env": "^10.0.0",
+		"rehype-sanitize": "^6.0.0"
+	},
+	"peerDependencies": {
+		"react": "^18.3.1 || ^19.0.0",
+		"react-dom": "^18.3.1 || ^19.0.0"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "2.4.6",
+		"@pandacss/dev": "^0.53.0",
+		"@types/react": "^18.3.1 || ^19.0.0",
+		"@types/react-dom": "^18.3.1 || ^19.0.0",
+		"postcss": "^8.4.31",
+		"prettier": "^3.2.5",
+		"typescript": "^5.2.2"
+	},
+	"overrides": {
+		"@radix-ui/react-alert-dialog": "1.0.5"
+	},
+	"files": [
+		"dist/src/*",
+		"dist/*.css"
+	],
+	"exports": {
+		".": "./dist/src/index.js",
+		"./styles": "./dist/index.css"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
 }