Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#6228 [enhancement]: Outline error nodes in red #7444

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
+43 −2
Open

#6228 [enhancement]: Outline error nodes in red #7444

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
107381a
Add isErrorNode, fieldErrors to zInvocationNodeData
achuthanmukundan00 Dec 14, 2024
a17f5b2
Add dynamic error state tracking for nodes
achuthanmukundan00 Dec 14, 2024
674e306
Add red box shadow to error nodes
achuthanmukundan00 Dec 14, 2024
65abb1a
Update invocation node initializations with new data
achuthanmukundan00 Dec 14, 2024
6c6f794
Merge branch 'main' into 6228-outline-error-nodes-red
achuthanmukundan00 Dec 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 27 additions & 1 deletion ...ai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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);
Expand All @@ -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}>
Expand Down
5 changes: 5 additions & 0 deletions invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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',
Expand Down Expand Up @@ -71,6 +75,7 @@ const NodeWrapper = (props: NodeWrapperProps) => {
transitionDuration="0.1s"
cursor="grab"
opacity={opacity}
boxShadow={isErrorNode ? '0 0 10px 6px #7F3A41' : undefined}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: Instead of a hex code, we can use a CSS variable. For example, 'error.500' resolves to var(--invoke-colors-error-500).

There's also a hook:

const [error500] = useToken('colors', ['error.500']);

At runtime, error500 will be the CSS variable as a string, so you could use it in the shadow:

boxShadow={isErrorNode ? `0 0 10px 6px ${error500}` : undefined}

>
<Box
position="absolute"
Expand Down
4 changes: 3 additions & 1 deletion invokeai/frontend/web/src/features/nodes/types/invocation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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>;
Expand Down
2 changes: 2 additions & 0 deletions invokeai/frontend/web/src/features/nodes/util/node/buildInvocationNode.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@ export const buildInvocationNode = (position: XYPosition, template: InvocationTe
useCache: template.useCache,
nodePack: template.nodePack,
inputs,
isErrorNode: false,
fieldErrors: {},
},
};

Expand Down
2 changes: 2 additions & 0 deletions invokeai/frontend/web/src/features/nodes/util/workflow/graphToWorkflow.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,8 @@ export const graphToWorkflow = (graph: NonNullableGraph, autoLayout = true): Wor
useCache: node.use_cache ?? true,
nodePack: template.nodePack,
inputs,
isErrorNode: false,
fieldErrors: {},
},
});
});
Expand Down
4 changes: 4 additions & 0 deletions invokeai/frontend/web/src/features/nodes/util/workflow/validateWorkflow.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@ describe('validateWorkflow', () => {
},
},
},
isErrorNode: false,
fieldErrors: {},
},
position: { x: 394.62314170481613, y: -424.6962537790139 },
},
Expand Down Expand Up @@ -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 },
},
Expand Down
Loading