@luxonis/depthai-pipeline-lib 1.8.0 → 1.9.0

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

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

package/dist/src/components/PipelineCanvas.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { ReactFlow, ReactFlowProvider, useEdgesState, useNodesState, useReactFlow, useStore, } from '@xyflow/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 { PipelineNode } from './Node.js';
@@ -125,7 +125,7 @@ export const updateNodesOnPipelineStateChange = (nodes, pipelineState) => {
     }
     return parsedNodes;
 };
-const PipelineCanvasBody = ({ pipeline, pipelineState, ...flexProps }) => {
+const PipelineCanvasBody = ({ pipeline, pipelineState, action, ...flexProps }) => {
     const { fitView, setViewport, getViewport } = useReactFlow();
     const autoArrangeRef = React.useRef(true);
     const widthSelector = (state) => state.width;
@@ -184,6 +184,6 @@ const PipelineCanvasBody = ({ pipeline, pipelineState, ...flexProps }) => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [shouldFitAndResize]);
-    return (_jsxs(Flex, { align: "center", justify: "center", full: true, height: "container.xs", rounded: "common", border: "base", ...flexProps, children: [!pipeline && _jsx(Header, { text: "Loading pipeline..." }), pipeline && (_jsx(ReactFlow, { nodes: nodes, edges: edges, onNodeDragStart: () => (autoArrangeRef.current = false), onNodesChange: onNodesChange, fitView: true, nodeTypes: { generic: PipelineNode }, minZoom: 0.4 }))] }));
+    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 }) }));

package/dist/src/services/pipeline.js

@@ -19,6 +19,7 @@ function parseHandles(handles) {
 }
 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))
         .map(([id, node]) => ({
@@ -33,6 +34,7 @@ export function parsePipeline(rawPayload) {
             handles: parseHandles(node.ioInfo),
         },
     })) ?? [];
+    // 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)];
@@ -55,6 +57,39 @@ export function parsePipeline(rawPayload) {
             background: 'rgba(0,0,0,0.125)',
         },
     })) ?? [];
+    const parentNodesIds = parentNodes.map(id => id.toString());
+    const childrenNodes = nodes
+        .map(node => {
+        if (node.parentId && parentNodesIds.includes(node.parentId)) {
+            return {
+                ...node,
+                parentId: `${node.parentId}-parent`,
+                extent: 'parent',
+            };
+        }
+        else if (parentNodesIds.includes(node.id)) {
+            return {
+                ...node,
+                parentId: `${node.id}-parent`,
+                extent: 'parent',
+            };
+        }
+        else {
+            return null;
+        }
+    })
+        .filter(node => node !== null);
+    const filteredNodes = nodes
+        .filter(node => childrenNodes.find(childNode => childNode.id === node.id) !== undefined ? null : node)
+        .filter(node => node !== null);
+    const newFormattedParentNodes = formattedParentNodes.map(node => ({
+        ...node,
+        id: `${node.id}-parent`,
+        data: {
+            ...node.data,
+            id: `${node.data.id}-parent`,
+        },
+    }));
     const edges = pipeline.connections.map(connection => ({
         id: `${connection.node1Id}-${connection.node2Id}-${connection.node1Output}-${connection.node2Input}-edge`,
         source: connection.node1Id.toString(),
@@ -77,8 +112,8 @@ export function parsePipeline(rawPayload) {
         },
         type: 'step',
     })) ?? [];
-    const groupedNodes = [...formattedParentNodes, ...nodes];
     // NOTE: Parent nodes should be rendered before child nodes
+    const groupedNodes = [...newFormattedParentNodes, ...childrenNodes, ...filteredNodes];
     return { nodes: [...groupedNodes], edges: [...edges, ...bridges] };
 }
 export const DOCS_BASE_URL = `https://docs.luxonis.com/software-v3/depthai/depthai-components/nodes`;

package/package.json

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