feat(ui): styling when nodes have error

Author: psychedelicious

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

@@ -15,6 +15,8 @@ import { memo } from 'react';
 import { InputFieldEditModeNodes } from './fields/InputFieldEditModeNodes';
 import InvocationNodeFooter from './InvocationNodeFooter';
 import InvocationNodeHeader from './InvocationNodeHeader';
+import { useInvocationNodeContext } from './context';
+import { useAppSelector } from 'app/store/storeHooks';
 
 type Props = {
   nodeId: string;
@@ -37,7 +39,9 @@ const sx: SystemStyleObject = {
 };
 
 const InvocationNode = ({ nodeId, isOpen }: Props) => {
+  const ctx = useInvocationNodeContext();
   const withFooter = useWithFooter();
+  const needsUpdate = useAppSelector(ctx.selectNodeNeedsUpdate);
 
   return (
     <>

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

@@ -3,7 +3,7 @@ import { Flex } from '@invoke-ai/ui-library';
 import NodeCollapseButton from 'features/nodes/components/flow/nodes/common/NodeCollapseButton';
 import NodeTitle from 'features/nodes/components/flow/nodes/common/NodeTitle';
 import InvocationNodeClassificationIcon from 'features/nodes/components/flow/nodes/Invocation/InvocationNodeClassificationIcon';
-import { useNodeIsInvalid } from 'features/nodes/hooks/useNodeIsInvalid';
+import { useNodeHasErrors } from 'features/nodes/hooks/useNodeIsInvalid';
 import { memo } from 'react';
 
 import InvocationNodeCollapsedHandles from './InvocationNodeCollapsedHandles';
@@ -16,26 +16,23 @@ type Props = {
 };
 
 const sx: SystemStyleObject = {
+  bg: 'var(--header-bg-color)',
   borderTopRadius: 'base',
   alignItems: 'center',
   justifyContent: 'space-between',
   h: 8,
   textAlign: 'center',
-  color: 'base.200',
   borderBottomRadius: 'base',
   '&[data-is-open="true"]': {
     borderBottomRadius: 0,
   },
-  '&[data-is-invalid="true"]': {
-    color: 'error.300',
-  },
 };
 
 const InvocationNodeHeader = ({ nodeId, isOpen }: Props) => {
-  const isInvalid = useNodeIsInvalid();
+  const isInvalid = useNodeHasErrors();
 
   return (
-    <Flex layerStyle="nodeHeader" sx={sx} data-is-open={isOpen} data-is-invalid={isInvalid}>
+    <Flex sx={sx} data-is-open={isOpen} data-is-invalid={isInvalid}>
       <NodeCollapseButton nodeId={nodeId} isOpen={isOpen} />
       <InvocationNodeClassificationIcon nodeId={nodeId} />
       <NodeTitle nodeId={nodeId} />

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

@@ -14,11 +14,9 @@ interface Props {
 }
 
 export const InvocationNodeInfoIcon = memo(({ nodeId }: Props) => {
-  const needsUpdate = useNodeNeedsUpdate();
-
   return (
     <Tooltip label={<TooltipContent nodeId={nodeId} />} placement="top" shouldWrapChildren>
-      <Icon as={PiInfoBold} display="block" boxSize={4} w={8} color={needsUpdate ? 'error.400' : 'base.400'} />
+      <Icon as={PiInfoBold} display="block" boxSize={4} w={8} />
     </Tooltip>
   );
 });

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

@@ -26,9 +26,10 @@ const InvocationNodeUnknownFallback = ({ nodeId, isOpen, label, type }: Props) =
         h={8}
         fontWeight="semibold"
         fontSize="sm"
+        bg="error.700"
       >
         <NodeCollapseButton nodeId={nodeId} isOpen={isOpen} />
-        <Text w="full" textAlign="center" pe={8} color="error.300">
+        <Text w="full" textAlign="center" pe={8}>
           {label ? `${label} (${type})` : type}
         </Text>
       </Flex>

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

@@ -10,6 +10,7 @@ import type { InvocationNodeData } from 'features/nodes/types/invocation';
 import { memo, useMemo } from 'react';
 
 import InvocationNodeUnknownFallback from './InvocationNodeUnknownFallback';
+import { InvocationNodeContextProvider } from './context';
 
 const InvocationNodeWrapper = (props: NodeProps<Node<InvocationNodeData>>) => {
   const { data, selected } = props;
@@ -28,16 +29,20 @@ const InvocationNodeWrapper = (props: NodeProps<Node<InvocationNodeData>>) => {
 
   if (!hasTemplate) {
     return (
-      <NodeWrapper nodeId={nodeId} selected={selected}>
-        <InvocationNodeUnknownFallback nodeId={nodeId} isOpen={isOpen} label={label} type={type} />
-      </NodeWrapper>
+      <InvocationNodeContextProvider nodeId={nodeId}>
+        <NodeWrapper nodeId={nodeId} selected={selected} isMissingTemplate>
+          <InvocationNodeUnknownFallback nodeId={nodeId} isOpen={isOpen} label={label} type={type} />
+        </NodeWrapper>
+      </InvocationNodeContextProvider>
     );
   }
 
   return (
-    <NodeWrapper nodeId={nodeId} selected={selected}>
-      <InvocationNode nodeId={nodeId} isOpen={isOpen} />
-    </NodeWrapper>
+    <InvocationNodeContextProvider nodeId={nodeId}>
+      <NodeWrapper nodeId={nodeId} selected={selected}>
+        <InvocationNode nodeId={nodeId} isOpen={isOpen} />
+      </NodeWrapper>
+    </InvocationNodeContextProvider>
   );
 };
 

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

@@ -5,6 +5,7 @@ import type { RootState } from 'app/store/store';
 import { $templates } from 'features/nodes/store/nodesSlice';
 import { selectEdges, selectNodes } from 'features/nodes/store/selectors';
 import type { InvocationNode, InvocationTemplate } from 'features/nodes/types/invocation';
+import { getNeedsUpdate } from 'features/nodes/util/node/nodeUpdate';
 import type { PropsWithChildren } from 'react';
 import { createContext, memo, useContext, useMemo } from 'react';
 
@@ -42,21 +43,18 @@ type InvocationNodeContextValue = {
   ) => Selector<RootState, InvocationTemplate['outputs'][string]>;
 
   buildSelectIsInputFieldConnected: (fieldName: string) => Selector<RootState, boolean>;
+  selectNodeNeedsUpdate: Selector<RootState, boolean>;
 };
 
 const InvocationNodeContext = createContext<InvocationNodeContextValue | null>(null);
 
-const getSelectorFromCache = <T,>(
-  cache: Map<string, Selector<RootState, T>>,
-  key: string,
-  fallback: () => Selector<RootState, T>
-): Selector<RootState, T> => {
+const getSelectorFromCache = <T extends Selector>(cache: Map<string, Selector>, key: string, fallback: () => T): T => {
   let selector = cache.get(key);
   if (!selector) {
     selector = fallback();
     cache.set(key, selector);
   }
-  return selector;
+  return selector as T;
 };
 
 export const InvocationNodeContextProvider = memo(({ nodeId, children }: PropsWithChildren<{ nodeId: string }>) => {
@@ -183,6 +181,15 @@ export const InvocationNodeContextProvider = memo(({ nodeId, children }: PropsWi
         })
       );
 
+    const selectNodeNeedsUpdate = getSelectorFromCache(cache, 'selectNodeNeedsUpdate', () =>
+      createSelector([selectNodeDataSafe, selectNodeTemplateSafe], (data, template) => {
+        if (!data || !template) {
+          return false; // If there's no data or template, no update is possible
+        }
+        return getNeedsUpdate(data, template);
+      })
+    );
+
     return {
       nodeId,
 
@@ -207,6 +214,7 @@ export const InvocationNodeContextProvider = memo(({ nodeId, children }: PropsWi
       buildSelectOutputFieldTemplateOrThrow,
 
       buildSelectIsInputFieldConnected,
+      selectNodeNeedsUpdate,
     } satisfies InvocationNodeContextValue;
   }, [nodeId, templates]);
 

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

@@ -69,8 +69,8 @@ const Fallback = memo(
 
     return (
       <InputFieldWrapper>
-        <Flex w="full" px={1} py={1} justifyContent="center">
-          <Text fontWeight="semibold" color="error.300" whiteSpace="pre" textAlign="center">
+        <Flex w="full" px={1} py={1}>
+          <Text fontWeight="semibold" color="error.300" whiteSpace="pre">
             {label}
           </Text>
         </Flex>

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

@@ -1,7 +1,10 @@
 import type { ChakraProps, SystemStyleObject } from '@invoke-ai/ui-library';
 import { Box, useGlobalMenuClose } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
-import { InvocationNodeContextProvider } from 'features/nodes/components/flow/nodes/Invocation/context';
+import {
+  InvocationNodeContextProvider,
+  useInvocationNodeContext,
+} from 'features/nodes/components/flow/nodes/Invocation/context';
 import { useIsWorkflowEditorLocked } from 'features/nodes/hooks/useIsWorkflowEditorLocked';
 import { useMouseOverFormField, useMouseOverNode } from 'features/nodes/hooks/useMouseOverNode';
 import { useNodeExecutionState } from 'features/nodes/hooks/useNodeExecutionState';
@@ -16,6 +19,7 @@ type NodeWrapperProps = PropsWithChildren & {
   nodeId: string;
   selected: boolean;
   width?: ChakraProps['w'];
+  isMissingTemplate?: boolean;
 };
 
 // Certain CSS transitions are disabled as a performance optimization - they can cause massive slowdowns in large
@@ -27,6 +31,19 @@ const containerSx: SystemStyleObject = {
   borderRadius: 'base',
   transitionProperty: 'none',
   cursor: 'grab',
+  '--border-color': 'var(--invoke-colors-base-500)',
+  '--border-color-selected': 'var(--invoke-colors-blue-300)',
+  '--header-bg-color': 'var(--invoke-colors-base-900)',
+  '&[data-status="warning"]': {
+    '--border-color': 'var(--invoke-colors-warning-500)',
+    '--border-color-selected': 'var(--invoke-colors-warning-500)',
+    '--header-bg-color': 'var(--invoke-colors-warning-700)',
+  },
+  '&[data-status="error"]': {
+    '--border-color': 'var(--invoke-colors-error-500)',
+    '--border-color-selected': 'var(--invoke-colors-error-500)',
+    '--header-bg-color': 'var(--invoke-colors-error-700)',
+  },
   // The action buttons are hidden by default and shown on hover
   '& .node-selection-overlay': {
     display: 'block',
@@ -38,7 +55,7 @@ const containerSx: SystemStyleObject = {
     borderRadius: 'base',
     transitionProperty: 'none',
     pointerEvents: 'none',
-    shadow: '0 0 0 1px var(--invoke-colors-base-500)',
+    shadow: '0 0 0 1px var(--border-color)',
   },
   '&[data-is-mouse-over-node="true"] .node-selection-overlay': {
     display: 'block',
@@ -50,16 +67,16 @@ const containerSx: SystemStyleObject = {
   _hover: {
     '& .node-selection-overlay': {
       display: 'block',
-      shadow: '0 0 0 1px var(--invoke-colors-blue-300)',
+      shadow: '0 0 0 1px var(--border-color-selected)',
     },
     '&[data-is-selected="true"] .node-selection-overlay': {
       display: 'block',
-      shadow: '0 0 0 2px var(--invoke-colors-blue-300)',
+      shadow: '0 0 0 2px var(--border-color-selected)',
     },
   },
   '&[data-is-selected="true"] .node-selection-overlay': {
     display: 'block',
-    shadow: '0 0 0 2px var(--invoke-colors-blue-300)',
+    shadow: '0 0 0 2px var(--border-color-selected)',
   },
   '&[data-is-editor-locked="true"]': {
     '& *': {
@@ -100,7 +117,9 @@ const inProgressSx: SystemStyleObject = {
 };
 
 const NodeWrapper = (props: NodeWrapperProps) => {
-  const { nodeId, width, children, selected } = props;
+  const { nodeId, width, children, isMissingTemplate, selected } = props;
+  const ctx = useInvocationNodeContext();
+  const needsUpdate = useAppSelector(ctx.selectNodeNeedsUpdate);
   const mouseOverNode = useMouseOverNode(nodeId);
   const mouseOverFormField = useMouseOverFormField(nodeId);
   const zoomToNode = useZoomToNode(nodeId);
@@ -138,26 +157,25 @@ const NodeWrapper = (props: NodeWrapperProps) => {
   );
 
   return (
-    <InvocationNodeContextProvider nodeId={nodeId}>
-      <Box
-        onClick={globalMenu.onCloseGlobal}
-        onDoubleClick={onDoubleClick}
-        onMouseOver={mouseOverNode.handleMouseOver}
-        onMouseOut={mouseOverNode.handleMouseOut}
-        className={DRAG_HANDLE_CLASSNAME}
-        sx={containerSx}
-        width={width || NODE_WIDTH}
-        opacity={opacity}
-        data-is-editor-locked={isLocked}
-        data-is-selected={selected}
-        data-is-mouse-over-form-field={mouseOverFormField.isMouseOverFormField}
-      >
-        <Box sx={shadowsSx} />
-        <Box sx={inProgressSx} data-is-in-progress={isInProgress} />
-        {children}
-        <Box className="node-selection-overlay" />
-      </Box>
-    </InvocationNodeContextProvider>
+    <Box
+      onClick={globalMenu.onCloseGlobal}
+      onDoubleClick={onDoubleClick}
+      onMouseOver={mouseOverNode.handleMouseOver}
+      onMouseOut={mouseOverNode.handleMouseOut}
+      className={DRAG_HANDLE_CLASSNAME}
+      sx={containerSx}
+      width={width || NODE_WIDTH}
+      opacity={opacity}
+      data-is-editor-locked={isLocked}
+      data-is-selected={selected}
+      data-is-mouse-over-form-field={mouseOverFormField.isMouseOverFormField}
+      data-status={isMissingTemplate ? 'error' : needsUpdate ? 'warning' : undefined}
+    >
+      <Box sx={shadowsSx} />
+      <Box sx={inProgressSx} data-is-in-progress={isInProgress} />
+      {children}
+      <Box className="node-selection-overlay" />
+    </Box>
   );
 };
 

invokeai/frontend/web/src/features/nodes/hooks/useNodeIsInvalid.ts

@@ -2,8 +2,8 @@ import { useStore } from '@nanostores/react';
 import { useInvocationNodeContext } from 'features/nodes/components/flow/nodes/Invocation/context';
 import { $nodeErrors } from 'features/nodes/store/util/fieldValidators';
 
-export const useNodeIsInvalid = () => {
+export const useNodeHasErrors = () => {
   const ctx = useInvocationNodeContext();
-  const hasErrors = useStore($nodeErrors, { keys: [ctx.nodeId] })[ctx.nodeId];
-  return hasErrors;
+  const errors = useStore($nodeErrors, { keys: [ctx.nodeId] })[ctx.nodeId];
+  return errors ? errors.length > 0 : false;
 };