#6228 [enhancement]: Outline error nodes in red

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputField.tsx

@@ -3,7 +3,8 @@ import FieldResetToDefaultValueButton from 'features/nodes/components/flow/nodes
 import { useConnectionState } from 'features/nodes/hooks/useConnectionState';
 import { useFieldInputTemplate } from 'features/nodes/hooks/useFieldInputTemplate';
 import { useFieldIsInvalid } from 'features/nodes/hooks/useFieldIsInvalid';
-import { memo, useCallback, useState } from 'react';
+import { memo, useCallback, useEffect, useState } from 'react';
+import { useReactFlow } from 'reactflow';
 
 import EditableFieldTitle from './EditableFieldTitle';
 import FieldHandle from './FieldHandle';
@@ -17,6 +18,7 @@ interface Props {
 }
 
 const InputField = ({ nodeId, fieldName }: Props) => {
+  const { setNodes } = useReactFlow();
   const fieldTemplate = useFieldInputTemplate(nodeId, fieldName);
   const [isHovered, setIsHovered] = useState(false);
   const isInvalid = useFieldIsInvalid(nodeId, fieldName);
@@ -32,6 +34,30 @@ const InputField = ({ nodeId, fieldName }: Props) => {
     setIsHovered(false);
   }, []);
 
+  useEffect(() => {
+    setNodes((nodes) =>
+      nodes.map((node) => {
+        if (node.id === nodeId) {
+          const fieldErrors = {
+            ...node.data.fieldErrors,
+            [fieldName]: isInvalid,
+          };
+
+          const isErrorNode = Object.values(fieldErrors).some((error) => error);
+          return {
+            ...node,
+            data: {
+              ...node.data,
+              fieldErrors,
+              isErrorNode,
+            },
+          };
+        }
+        return node;
+      })
+    );
+  }, [isInvalid, nodeId, fieldName, setNodes]);
+
   if (fieldTemplate.input === 'connection' || isConnected) {
     return (
       <InputFieldWrapper shouldDim={shouldDim}>

invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx

@@ -4,6 +4,7 @@ import { useAppDispatch, useAppSelector, useAppStore } from 'app/store/storeHook
 import NodeSelectionOverlay from 'common/components/NodeSelectionOverlay';
 import { useExecutionState } from 'features/nodes/hooks/useExecutionState';
 import { useMouseOverNode } from 'features/nodes/hooks/useMouseOverNode';
+import { useNode } from 'features/nodes/hooks/useNode';
 import { nodesChanged } from 'features/nodes/store/nodesSlice';
 import { selectNodes } from 'features/nodes/store/selectors';
 import { selectNodeOpacity } from 'features/nodes/store/workflowSettingsSlice';
@@ -21,11 +22,14 @@ type NodeWrapperProps = PropsWithChildren & {
 
 const NodeWrapper = (props: NodeWrapperProps) => {
   const { nodeId, width, children, selected } = props;
+  const node = useNode(nodeId);
   const store = useAppStore();
   const { isMouseOverNode, handleMouseOut, handleMouseOver } = useMouseOverNode(nodeId);
 
   const executionState = useExecutionState(nodeId);
   const isInProgress = executionState?.status === zNodeStatus.enum.IN_PROGRESS;
+  const isFailed = executionState?.status === zNodeStatus.enum.FAILED;
+  const isErrorNode = node.data?.isErrorNode || isFailed;
 
   const [nodeInProgress, shadowsXl, shadowsBase] = useToken('shadows', [
     'nodeInProgress',
@@ -71,6 +75,7 @@ const NodeWrapper = (props: NodeWrapperProps) => {
       transitionDuration="0.1s"
       cursor="grab"
       opacity={opacity}
+      boxShadow={isErrorNode ? '0 0 10px 6px #7F3A41' : undefined}
     >
       <Box
         position="absolute"

invokeai/frontend/web/src/features/nodes/types/invocation.ts

@@ -34,6 +34,8 @@ export const zInvocationNodeData = z.object({
   isOpen: z.boolean(),
   isIntermediate: z.boolean(),
   useCache: z.boolean(),
+  isErrorNode: z.boolean().default(false),
+  fieldErrors: z.record(z.boolean()).default({}),
 });
 
 export const zNotesNodeData = z.object({
@@ -56,7 +58,7 @@ export type InvocationNodeData = z.infer<typeof zInvocationNodeData>;
 type CurrentImageNodeData = z.infer<typeof zCurrentImageNodeData>;
 type AnyNodeData = z.infer<typeof zAnyNodeData>;
 
-export type InvocationNode = Node<InvocationNodeData, 'invocation'>;
+export type InvocationNode = Node<InvocationNodeData & { isErrorNode?: boolean }, 'invocation'>;
 export type NotesNode = Node<NotesNodeData, 'notes'>;
 export type CurrentImageNode = Node<CurrentImageNodeData, 'current_image'>;
 export type AnyNode = Node<AnyNodeData>;

invokeai/frontend/web/src/features/nodes/util/node/buildInvocationNode.ts

@@ -40,6 +40,8 @@ export const buildInvocationNode = (position: XYPosition, template: InvocationTe
       useCache: template.useCache,
       nodePack: template.nodePack,
       inputs,
+      isErrorNode: false,
+      fieldErrors: {},
     },
   };
 

invokeai/frontend/web/src/features/nodes/util/workflow/graphToWorkflow.ts

@@ -87,6 +87,8 @@ export const graphToWorkflow = (graph: NonNullableGraph, autoLayout = true): Wor
         useCache: node.use_cache ?? true,
         nodePack: template.nodePack,
         inputs,
+        isErrorNode: false,
+        fieldErrors: {},
       },
     });
   });

invokeai/frontend/web/src/features/nodes/util/workflow/validateWorkflow.test.ts

@@ -42,6 +42,8 @@ describe('validateWorkflow', () => {
               },
             },
           },
+          isErrorNode: false,
+          fieldErrors: {},
         },
         position: { x: 394.62314170481613, y: -424.6962537790139 },
       },
@@ -74,6 +76,8 @@ describe('validateWorkflow', () => {
             height: { name: 'height', label: '', value: 512 },
             resample_mode: { name: 'resample_mode', label: '', value: 'bicubic' },
           },
+          isErrorNode: false,
+          fieldErrors: {},
         },
         position: { x: -46.428806920557236, y: -479.6641524207518 },
       },