@luxonis/depthai-pipeline-lib 1.15.0 → 1.16.1

package/dist/src/components/PipelineCanvas.js

@@ -18,6 +18,20 @@ const PipelineCanvasBody = ({ pipeline, pipelineState: pipelineStateParsed, head
     const [shouldFitAndResize, setShouldFitAndResize] = React.useState(false);
     const [openLegend, setOpenLegend] = React.useState(false);
     const pipelineState = React.useMemo(() => pipelineStateParsed, [pipelineStateParsed]);
+    const layoutSignature = React.useMemo(() => {
+        if (!pipeline) {
+            return '';
+        }
+        const nodeSignature = pipeline.nodes
+            .map((node) => `${node.id}:${node.parentId ?? ''}`)
+            .sort()
+            .join('|');
+        const edgeSignature = pipeline.edges
+            .map((edge) => `${edge.id}:${edge.source}:${edge.target}:${edge.sourceHandle ?? ''}:${edge.targetHandle ?? ''}:${edge.type ?? ''}`)
+            .sort()
+            .join('|');
+        return `${nodeSignature}__${edgeSignature}`;
+    }, [pipeline]);
     // biome-ignore lint/correctness/useExhaustiveDependencies: Intended
     React.useEffect(() => {
         void fitView();
@@ -25,34 +39,22 @@ const PipelineCanvasBody = ({ pipeline, pipelineState: pipelineStateParsed, head
     }, [reactFlowWidth, reactFlowHeight]);
     const [nodes, setNodes, onNodesChange] = useNodesState([]);
     const [edges, setEdges] = useEdgesState([]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: Layout should only rerun when graph structure changes
     React.useEffect(() => {
         if (!autoArrangeRef.current) {
             return;
         }
         const layouted = getLayoutedElements(pipeline?.nodes ?? [], pipeline?.edges ?? []);
-        if (pipelineState) {
-            const updatedNodes = updateNodesOnPipelineStateChange([...layouted.nodes], pipelineState);
-            const adjustedNodes = adjustNodes([...updatedNodes], layouted.edges);
-            setNodes([...adjustedNodes]);
-        }
-        else {
-            const adjustedNodes = adjustNodes([...layouted.nodes], layouted.edges);
-            setNodes([...adjustedNodes]);
-        }
+        const adjustedNodes = adjustNodes([...layouted.nodes], layouted.edges);
+        setNodes([...adjustedNodes]);
         setEdges([...layouted.edges]);
         setShouldFitAndResize(true);
-    }, [pipeline?.edges, pipeline?.nodes, setEdges, setNodes, pipelineState]);
+    }, [layoutSignature, setEdges, setNodes]);
     // 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]);

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

@@ -25,11 +25,14 @@ function nodeStateToState(state) {
 function formatIOStates(values) {
     let returnObj = {};
     for (const [key, value] of Object.entries(values)) {
+        const dotColor = isNaN(Number(value.state))
+            ? 'gray'
+            : nodeStateToDotColor(value.state);
         returnObj = {
             ...returnObj,
             [key]: {
                 ...value,
-                dotColor: value.state ? nodeStateToDotColor(value.state) : 'gray',
+                dotColor: dotColor,
             },
         };
     }
@@ -39,7 +42,10 @@ export function parsePipelineState(rawPayload) {
     const { nodeStates } = rawPayload;
     const parsedNodeStates = [];
     for (const [nodeId, nodeState] of nodeStates) {
-        const state = nodeState?.state ? nodeStateToState(nodeState.state) : 'IDLE';
+        const parsedState = Number(nodeState?.state);
+        const state = isNaN(parsedState)
+            ? 'IDLE'
+            : nodeStateToState(parsedState);
         const currentNode = {
             id: nodeId,
             inputs: formatIOStates(nodeState.inputStates),

package/package.json

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