@luxonis/depthai-pipeline-lib 1.10.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/panda.css

@@ -1252,18 +1252,6 @@
 
 @layer utilities{
 
-  .w_custom\.handle\.dot\! {
-    width: var(--sizes-custom-handle-dot) !important;
-}
-
-  .h_custom\.handle\.dot\! {
-    height: var(--sizes-custom-handle-dot) !important;
-}
-
-  .bd_none\! {
-    border: var(--borders-none) !important;
-}
-
   .min-w_container\.smaller\.xxs {
     min-width: var(--sizes-container-smaller-xxs);
 }
@@ -1276,6 +1264,30 @@
     border-radius: var(--radii-common);
 }
 
+  .p_0 {
+    padding: var(--spacing-0);
+}
+
+  .bdr_0\%\! {
+    border-radius: 0% !important;
+}
+
+  .bdr_100\%\! {
+    border-radius: 100% !important;
+}
+
+  .w_custom\.handle\.dot\! {
+    width: var(--sizes-custom-handle-dot) !important;
+}
+
+  .h_custom\.handle\.dot\! {
+    height: var(--sizes-custom-handle-dot) !important;
+}
+
+  .bd_none\! {
+    border: var(--borders-none) !important;
+}
+
   .w_full {
     width: var(--sizes-full);
 }
@@ -1301,8 +1313,16 @@
     height: auto;
 }
 
-  .bg-c_dark\.warning\! {
-    background-color: var(--colors-dark-warning) !important;
+  .border-style_dashed {
+    border-style: dashed;
+}
+
+  .bg-c_rgba\(0\,0\,0\,0\.125\) {
+    background-color: rgba(0,0,0,0.125);
+}
+
+  .bg-c_dark\.error\! {
+    background-color: var(--colors-dark-error) !important;
 }
 
   .bg-c_dark\.success\! {

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

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

package/dist/src/components/GroupNode.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Flex } from '@luxonis/common-fe-components';
+import { css } from '../styled-system/css/index.mjs';
+// eslint-disable-next-line no-warning-comments
+// TODO: Add group node
+export const GroupNode = (props) => {
+    const { data: _node } = props;
+    return (_jsx(Flex, { direction: "column", className: css({
+            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)',
+        }) }));
+};

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,39 +1,45 @@
 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 }) => (_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.warning!' : 'dark.success!',
-                        border: 'none!',
-                    }) }), _jsx(NodeHandlesSubLabel, { type: type, name: name, queueSize: queueSize, maxQueueSize: maxQueueSize, fps: fps })] }, id))) }));
+    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;
+            }
+            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!',
+                            border: 'none!',
+                            borderRadius: blocking ? '0% !important' : '100% !important',
+                        }) }), _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' //
                 ? { marginLeft: 'xs' }
                 : { marginRight: 'xs' }),
         }), text: type === 'input'
-            ? `[${fps ? `${fps.toFixed(1)} | ` : ''}${maxQueueSize ? `${maxQueueSize}/${queueSize}` : queueSize}] ${name}`
+            ? `[${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,95 +1,185 @@
 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' });
+    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 nodes) {
+    for (const node of childNodes) {
         graph.setNode(node.id, {
-            ...node,
-            width: node.measured?.width ?? 200,
-            height: node.measured?.height ?? 100,
+            width: node.measured?.width ?? 300,
+            height: node.measured?.height ?? 150,
         });
     }
     Dagre.layout(graph);
     return {
         nodes: nodes.map((node) => {
-            const position = graph.node(node.id);
-            // Shift Dagre anchor (center) to React Flow anchor (top left)
-            const x = position.x - (node.measured?.width ?? 200) / 2;
-            const y = position.y - (node.measured?.height ?? 100) / 2;
-            return { ...node, position: { x, y } };
+            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) => {
+const adjustNodes = (nodes, edges) => {
     const PADDING = 16;
-    const positionedNodes = nodes
-        .filter(node => node.type !== 'group')
-        .map((node) => {
-        const position = node.position;
-        const x = position.x - (node.measured?.width ?? 200) / 2;
-        const y = position.y - (node.measured?.height ?? 100) / 2;
-        return {
-            ...node,
-            position: { x, y },
+    // 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 groupNodes = nodes.filter(node => node.type === 'group');
-    const positionedGroups = groupNodes.map(parent => {
-        const children = positionedNodes.filter(n => n.parentId === parent.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 { ...parent, 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) {
+            // 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;
-        // eslint-disable-next-line github/array-foreach
-        children.forEach(child => {
-            const width = child.measured?.width ?? 200;
-            const height = child.measured?.height ?? 100;
-            minX = Math.min(minX, child.position.x);
-            minY = Math.min(minY, child.position.y);
-            maxX = Math.max(maxX, child.position.x + width);
-            maxY = Math.max(maxY, child.position.y + height);
-        });
-        const parentX = minX - PADDING;
-        const parentY = minY - PADDING;
-        // eslint-disable-next-line github/array-foreach
-        children.forEach(child => {
-            child.position.x -= parentX;
-            child.position.y -= parentY;
-        });
-        return {
-            ...parent,
-            position: { x: parentX, y: parentY },
-            measured: {
-                width: maxX - minX + PADDING * 2,
-                height: maxY - minY + PADDING * 2,
-            },
-            width: maxX - minX + PADDING * 2,
-            height: maxY - minY + PADDING * 2,
-            style: {
-                ...parent.style,
-                width: maxX - minX + PADDING * 2,
-                height: maxY - minY + PADDING * 2,
+        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,
             },
         };
-    });
-    return [...positionedGroups, ...positionedNodes];
+    }
+    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 = [];
@@ -133,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
@@ -144,7 +235,7 @@ const PipelineCanvasBody = ({ pipeline, pipelineState, action, ...flexProps }) =
             return;
         }
         const layouted = getLayoutedElements(pipeline?.nodes ?? [], pipeline?.edges ?? []);
-        const adjustedNodes = adjustNodes([...layouted.nodes]);
+        const adjustedNodes = adjustNodes([...layouted.nodes], [...layouted.edges]);
         if (pipelineState) {
             const updatedNodes = updateNodesOnPipelineStateChange(adjustedNodes, pipelineState);
             setNodes([...updatedNodes]);
@@ -155,10 +246,17 @@ 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);
             setNodes([...updatedNodes]);
+            if (!autoArrangeRef.current) {
+                return;
+            }
+            else {
+                setShouldFitAndResize(true);
+            }
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [pipelineState]);
@@ -166,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;
@@ -176,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();
@@ -186,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,15 +37,6 @@ export type Pipeline = {
     nodes: ParsedNode[];
     edges: Edge[];
 };
-export type ParsedHandle = {
-    id: number;
-    name: string;
-    type: 'input' | 'output';
-    blocking: boolean;
-    queueSize: number;
-    maxQueueSize?: number;
-    fps?: number;
-};
 export type ParsedNode = Node<{
     id: string;
     parentId?: string;

package/dist/src/services/pipeline.js

@@ -1,51 +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,
-        };
-        parsedHandles[type].push(parsed);
-    }
-    return parsedHandles;
+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,
@@ -57,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,
@@ -78,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: {
@@ -90,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(),
@@ -113,8 +140,12 @@ export function parsePipeline(rawPayload) {
         type: 'step',
     })) ?? [];
     // NOTE: Parent nodes should be rendered before child nodes
-    const groupedNodes = [...newFormattedParentNodes, ...childrenNodes, ...filteredNodes];
-    return { nodes: [...groupedNodes], edges: [...edges, ...bridges] };
+    const groupedNodes = [...parentNodes, ...childrenNodes, ...filteredNodes];
+    const nodesWithFilteredHandles = filterNodesHandles(groupedNodes, edges);
+    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,12 +1,13 @@
 {
 	"name": "@luxonis/depthai-pipeline-lib",
-	"version": "1.10.0",
+	"version": "1.12.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",
+		"lint": "biome check .",
+		"lint:fix": "biome check . --write",
 		"gen:styles": "panda codegen",
 		"prepublishOnly": "npm run build"
 	},
@@ -24,27 +25,12 @@
 		"react-dom": "^18.3.1 || ^19.0.0"
 	},
 	"devDependencies": {
+		"@biomejs/biome": "2.4.6",
 		"@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": {