@luxonis/depthai-pipeline-lib 1.6.0 → 1.7.0

package/dist/src/components/Node.js

@@ -6,16 +6,20 @@ import { css } from '../styled-system/css/css.mjs';
 import { DOCS_BASE_URL, NodesWithLinks, } from '../services/pipeline.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 }) => (_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({
+    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(SubLabel, { className: css({
-                        ...(type === 'input' //
-                            ? { marginLeft: 'xs' }
-                            : { marginRight: 'xs' }),
-                    }), text: type === 'input' ? `[${queueSize}] ${name}` : name, break: "none" })] }, id))) }));
+                    }) }), _jsx(NodeHandlesSubLabel, { type: type, name: name, queueSize: queueSize, maxQueueSize: maxQueueSize, fps: fps })] }, id))) }));
+};
+const NodeHandlesSubLabel = props => {
+    const { type, name, queueSize, maxQueueSize, fps } = props;
+    return (_jsx(SubLabel, { className: css({
+            ...(type === 'input' //
+                ? { marginLeft: 'xs' }
+                : { marginRight: 'xs' }),
+        }), text: `[${fps ? `${fps.toFixed(1)} | ` : ''}${maxQueueSize ? `${maxQueueSize}/${queueSize}` : queueSize}] ${name}`, break: "none" }));
 };
 export const PipelineNode = props => {
     const { data: node } = props;

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

@@ -1,7 +1,10 @@
 import React from 'react';
 import type { FlexProps } from '@luxonis/common-fe-components';
-import type { Pipeline } from '../services/pipeline.js';
+import type { ParsedNode, Pipeline } from '../services/pipeline.js';
+import type { PipelineState } from '../services/pipeline-state.js';
 export type PipelineCanvasProps = FlexProps & {
     pipeline: Pipeline | null;
+    pipelineState?: PipelineState[] | null;
 };
+export declare const updateNodesOnPipelineStateChange: (nodes: ParsedNode[], pipelineState: PipelineState[]) => ParsedNode[];
 export declare const PipelineCanvas: React.FC<PipelineCanvasProps>;

package/dist/src/components/PipelineCanvas.js

@@ -86,7 +86,49 @@ const adjustNodes = (nodes) => {
     });
     return [...positionedGroups, ...positionedNodes];
 };
-const PipelineCanvasBody = ({ pipeline, ...flexProps }) => {
+export const updateNodesOnPipelineStateChange = (nodes, pipelineState) => {
+    const parsedNodes = [];
+    for (const node of nodes) {
+        const nodeState = pipelineState.find(state => state.id.toString() === node.id.toString());
+        const inputHandles = node.data.handles.input;
+        const outputHandles = node.data.handles.output;
+        const newInputHandles = [];
+        for (const inputHandle of inputHandles) {
+            const obj = { ...inputHandle };
+            const inputState = nodeState?.inputs[inputHandle.name];
+            if (inputState) {
+                obj.maxQueueSize = inputState.numQueued;
+                obj.fps = inputState.timing.fps;
+            }
+            newInputHandles.push(obj);
+        }
+        const newOutputHandles = [];
+        for (const outputHandle of outputHandles) {
+            const obj = { ...outputHandle };
+            const outputState = nodeState?.outputs[outputHandle.name];
+            if (outputState) {
+                obj.maxQueueSize = outputState.numQueued;
+                obj.fps = outputState.timing.fps;
+            }
+            newOutputHandles.push(obj);
+        }
+        parsedNodes.push({
+            ...node,
+            data: {
+                ...node.data,
+                handles: {
+                    input: newInputHandles,
+                    output: newOutputHandles,
+                },
+            },
+        });
+    }
+    return parsedNodes;
+};
+const PipelineCanvasBody = ({ pipeline, 
+// eslint-disable-next-line no-warning-comments
+// TODO: Remove optional after pipelineState is implemented in Viewer and Visualizer
+pipelineState = null, ...flexProps }) => {
     const { fitView, setViewport, getViewport } = useReactFlow();
     const autoArrangeRef = React.useRef(true);
     const widthSelector = (state) => state.width;
@@ -95,6 +137,8 @@ const PipelineCanvasBody = ({ pipeline, ...flexProps }) => {
     const reactFlowHeight = useStore(heightSelector);
     const nodesInitialized = useNodesInitialized();
     const [isAutoLayoutingFinished, setIsAutoLayoutingFinished] = React.useState(false);
+    const [isNodesUpdatedWithState, setIsNodesUpdatedWithState] = React.useState(false);
+    const [shouldFitAndResize, setShouldFitAndResize] = React.useState(false);
     React.useEffect(() => {
         void fitView();
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -114,9 +158,19 @@ const PipelineCanvasBody = ({ pipeline, ...flexProps }) => {
             const adjustedNodes = adjustNodes(nodes);
             setNodes([...adjustedNodes]);
             setIsAutoLayoutingFinished(true);
+            setShouldFitAndResize(true);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [nodesInitialized, isAutoLayoutingFinished]);
+    React.useEffect(() => {
+        if (pipelineState && nodes.length > 0 && !isNodesUpdatedWithState) {
+            const updatedNodes = updateNodesOnPipelineStateChange(nodes, pipelineState);
+            setNodes([...updatedNodes]);
+            setIsNodesUpdatedWithState(true);
+            setShouldFitAndResize(true);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [pipelineState, nodes, isNodesUpdatedWithState]);
     const setViewportAndFit = async (x, y, zoom, nds) => {
         await setViewport({ x, y, zoom });
         await fitView({ nodes: nds });
@@ -131,6 +185,14 @@ const PipelineCanvasBody = ({ pipeline, ...flexProps }) => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [nodes, edges]);
+    React.useEffect(() => {
+        if (shouldFitAndResize) {
+            const viewport = getViewport();
+            void setViewportAndFit(viewport.x, viewport.y, viewport.zoom, nodes);
+            setShouldFitAndResize(false);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [shouldFitAndResize]);
     return (_jsxs(Flex, { align: "center", justify: "center", full: true, height: "container.xs", rounded: "common", border: "base", ...flexProps, children: [!pipeline && _jsx(Header, { text: "Loading pipeline..." }), pipeline && (_jsx(ReactFlow, { nodes: nodes, edges: edges, onNodeDragStart: () => (autoArrangeRef.current = false), onNodesChange: onNodesChange, fitView: true, nodeTypes: { generic: PipelineNode }, minZoom: 0.4 }))] }));
 };
 export const PipelineCanvas = props => (_jsx(ReactFlowProvider, { children: _jsx(PipelineCanvasBody, { ...props }) }));

package/dist/src/index.d.ts

@@ -1,4 +1,6 @@
 export { parsePipeline } from './services/pipeline.js';
 export type { Pipeline, RawPipelinePayload } from './services/pipeline.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,2 +1,3 @@
 export { parsePipeline } from './services/pipeline.js';
+export { parsePipelineState } from './services/pipeline-state.js';
 export { PipelineCanvas } from './components/PipelineCanvas.js';

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

@@ -0,0 +1,42 @@
+export type RawPipelineStatePayload = {
+    nodeStates: RawPipelineState[];
+};
+export type IOStates = {
+    [key: string]: {
+        numQueued: number;
+        timing: TimingWithFps;
+    };
+};
+type Timing = {
+    averageMicrosRecent: number;
+    maxMicros: number;
+    maxMicrosRecent: number;
+    medianMicrosRecent: number;
+    minMicros: number;
+    minMicrosRecent: number;
+    stdDevMicrosRecent: number;
+};
+type TimingWithFps = {
+    durationStats: Timing;
+    fps: number;
+};
+export type RawPipelineState = [
+    number,
+    {
+        events: any[];
+        inputStates: IOStates;
+        inputsGetTiming: TimingWithFps;
+        mainLoopTiming: TimingWithFps;
+        otherTimings: object;
+        outputStates: IOStates;
+        outputsSendTiming: TimingWithFps;
+        state: number;
+    }
+];
+export type PipelineState = {
+    id: number;
+    inputs: IOStates;
+    outputs: IOStates;
+};
+export declare function parsePipelineState(rawPayload: RawPipelineStatePayload): PipelineState[];
+export {};

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

@@ -0,0 +1,13 @@
+export function parsePipelineState(rawPayload) {
+    const { nodeStates } = rawPayload;
+    const parsedNodeStates = [];
+    for (const [nodeId, nodeState] of nodeStates) {
+        const currentNode = {
+            id: nodeId,
+            inputs: nodeState.inputStates,
+            outputs: nodeState.outputStates,
+        };
+        parsedNodeStates.push(currentNode);
+    }
+    return parsedNodeStates;
+}

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

@@ -43,6 +43,8 @@ export type ParsedHandle = {
     type: 'input' | 'output';
     blocking: boolean;
     queueSize: number;
+    maxQueueSize?: number;
+    fps?: number;
 };
 export type ParsedNode = Node<{
     id: string;

package/package.json

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