@luxonis/depthai-pipeline-lib 1.12.0 → 1.13.0

package/dist/panda.css

@@ -1297,12 +1297,16 @@
     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;
+}
+
+  .d_flex {
+    display: flex;
 }
 
   .w_auto {
@@ -1321,14 +1325,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);
 }
@@ -1345,6 +1357,10 @@
     background-color: var(--colors-light-gray);
 }
 
+  .ai_center {
+    align-items: center;
+}
+
   .right_xs {
     right: var(--spacing-xs);
 }

package/dist/src/components/Node.js

@@ -1,19 +1,31 @@
 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 { css } from '../styled-system/css/css.mjs';
+import { MIN_NODE_WIDTH } from './PipelineCanvas.js';
 const NodeHandles = (props) => {
     const { handles, type } = props;
-    return (_jsx(Flex, { full: true, direction: "column", align: type === 'input' ? 'start' : 'end', 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: blocking
+                                ? 'dark.error!'
+                                : 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));
@@ -29,6 +41,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 +63,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 +88,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

@@ -7,5 +7,7 @@ export type PipelineCanvasProps = FlexProps & {
     pipelineState: PipelineState[] | null;
     action?: React.ReactNode;
 };
+export declare const MIN_NODE_WIDTH = 376;
+export declare const MIN_NODE_HEIGHT = 150;
 export declare const updateNodesOnPipelineStateChange: (nodes: ParsedNode[], pipelineState: PipelineState[]) => ParsedNode[];
 export declare const PipelineCanvas: React.FC<PipelineCanvasProps>;

package/dist/src/components/PipelineCanvas.js

@@ -3,39 +3,37 @@ 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 { topoSort } from '../services/utils.js';
 import { PipelineNode } from './Node.js';
+export const MIN_NODE_WIDTH = 376;
+export const MIN_NODE_HEIGHT = 150;
 const getLayoutedElements = (nodes, edges) => {
     const graph = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
-    graph.setGraph({ rankdir: 'LR', ranksep: 80, nodesep: 40 });
-    const childNodes = nodes.filter((node) => node.type !== 'group');
+    graph.setGraph({ rankdir: 'LR' });
     for (const edge of edges) {
         graph.setEdge(edge.source, edge.target);
     }
-    for (const node of childNodes) {
+    for (const node of nodes) {
         graph.setNode(node.id, {
-            width: node.measured?.width ?? 300,
-            height: node.measured?.height ?? 150,
+            ...node,
+            width: MIN_NODE_WIDTH,
+            height: MIN_NODE_HEIGHT,
         });
     }
     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,
-                },
-            };
+            const position = graph.node(node.id);
+            const x = position.x - MIN_NODE_WIDTH / 2;
+            const y = position.y - MIN_NODE_HEIGHT / 2;
+            return { ...node, position: { x, y } };
         }),
         edges,
     };
 };
 const adjustNodes = (nodes, edges) => {
     const PADDING = 16;
+    const HEADER_HEIGHT = 24;
     // Build a tree: find all group nodes and their depth
     const groupNodes = nodes.filter((node) => node.type === 'group');
     const childNodes = nodes.filter((node) => node.type !== 'group');
@@ -49,12 +47,11 @@ const adjustNodes = (nodes, edges) => {
     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,
+            width: Math.min(node.measured?.width ?? MIN_NODE_WIDTH),
+            height: Math.min(node.measured?.height ?? MIN_NODE_HEIGHT),
         };
     }
     const updatedNodes = {};
@@ -64,14 +61,20 @@ const adjustNodes = (nodes, edges) => {
     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 };
+            resolvedSizes[group.id] = {
+                width: MIN_NODE_WIDTH,
+                height: MIN_NODE_HEIGHT,
+            };
             continue;
         }
         const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
-        g.setGraph({ rankdir: 'LR', ranksep: 60, nodesep: 20 });
+        g.setGraph({ rankdir: 'LR' });
         for (const child of children) {
             // Use resolved size (important for nested groups!)
-            const size = resolvedSizes[child.id] ?? { width: 300, height: 150 };
+            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) &&
@@ -84,39 +87,37 @@ const adjustNodes = (nodes, edges) => {
         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: 300, height: 150 };
+            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);
-            // 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
+        // Now positions are correct, apply them
         for (const child of children) {
             const pos = g.node(child.id);
-            const size = resolvedSizes[child.id] ?? { width: 300, height: 150 };
+            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,
+                    y: pos.y - size.height / 2 - minY + PADDING + HEADER_HEIGHT,
                 },
             };
         }
         const groupW = maxX - minX + PADDING * 2;
-        const groupH = maxY - minY + 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] = {
@@ -128,10 +129,13 @@ const adjustNodes = (nodes, edges) => {
     }
     // 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 });
+    graph.setGraph({ rankdir: 'LR' });
     const rootNodes = nodes.filter((n) => !n.parentId);
     for (const node of rootNodes) {
-        const size = resolvedSizes[node.id] ?? { width: 300, height: 150 };
+        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) &&
@@ -144,7 +148,10 @@ const adjustNodes = (nodes, edges) => {
         const pos = graph.node(node.id);
         if (!pos)
             continue;
-        const size = resolvedSizes[node.id] ?? { width: 300, height: 150 };
+        const size = resolvedSizes[node.id] ?? {
+            width: MIN_NODE_WIDTH,
+            height: MIN_NODE_HEIGHT,
+        };
         updatedNodes[node.id] = {
             ...updatedNodes[node.id],
             position: {
@@ -153,33 +160,13 @@ const adjustNodes = (nodes, edges) => {
             },
         };
     }
-    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());
+        // Inputs and outputs
         const inputHandles = node.data.handles.input;
         const outputHandles = node.data.handles.output;
         const newInputHandles = [];
@@ -189,6 +176,7 @@ export const updateNodesOnPipelineStateChange = (nodes, pipelineState) => {
             if (inputState) {
                 obj.maxQueueSize = inputState.numQueued;
                 obj.fps = inputState.timing.fps;
+                obj.dotColor = inputState.dotColor;
             }
             newInputHandles.push(obj);
         }
@@ -199,9 +187,14 @@ export const updateNodesOnPipelineStateChange = (nodes, pipelineState) => {
             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: {
@@ -210,12 +203,16 @@ export const updateNodesOnPipelineStateChange = (nodes, pipelineState) => {
                     input: newInputHandles,
                     output: newOutputHandles,
                 },
+                extras: {
+                    gpstTimings: gpst,
+                    stateInfo: state,
+                },
             },
         });
     }
     return parsedNodes;
 };
-const PipelineCanvasBody = ({ pipeline, pipelineState, action, ...flexProps }) => {
+const PipelineCanvasBody = ({ pipeline, pipelineState: pipelineStateParsed, action, ...flexProps }) => {
     const { fitView, setViewport, getViewport } = useReactFlow();
     const autoArrangeRef = React.useRef(true);
     const widthSelector = (state) => state.width;
@@ -223,6 +220,7 @@ const PipelineCanvasBody = ({ pipeline, pipelineState, action, ...flexProps }) =
     const reactFlowWidth = useStore(widthSelector);
     const reactFlowHeight = useStore(heightSelector);
     const [shouldFitAndResize, setShouldFitAndResize] = React.useState(false);
+    const pipelineState = React.useMemo(() => pipelineStateParsed, [pipelineStateParsed]);
     // biome-ignore lint/correctness/useExhaustiveDependencies: Intended
     React.useEffect(() => {
         void fitView();
@@ -235,12 +233,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 +264,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();

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,6 +47,8 @@ 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";

package/dist/src/services/pipeline.js

@@ -40,6 +40,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

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

@@ -0,0 +1,2 @@
+import { ParsedNode } from './pipeline';
+export declare const topoSort: (nodes: ParsedNode[]) => ParsedNode[];

package/dist/src/services/utils.js

@@ -0,0 +1,21 @@
+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;
+};

package/package.json

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