feat: Make the active processing node light up

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

@@ -4,13 +4,16 @@ import {
   useColorModeValue,
   useToken,
 } from '@chakra-ui/react';
+import { createSelector } from '@reduxjs/toolkit';
+import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import {
   DRAG_HANDLE_CLASSNAME,
   NODE_WIDTH,
 } from 'features/nodes/types/constants';
+import { NodeStatus } from 'features/nodes/types/types';
 import { contextMenusClosed } from 'features/ui/store/uiSlice';
-import { PropsWithChildren, memo, useCallback } from 'react';
+import { PropsWithChildren, memo, useCallback, useMemo } from 'react';
 
 type NodeWrapperProps = PropsWithChildren & {
   nodeId: string;
@@ -19,7 +22,18 @@ type NodeWrapperProps = PropsWithChildren & {
 };
 
 const NodeWrapper = (props: NodeWrapperProps) => {
-  const { width, children, selected } = props;
+  const { nodeId, width, children, selected } = props;
+
+  const selectNodeExecutionState = useMemo(
+    () =>
+      createSelector(
+        stateSelector,
+        ({ nodes }) => nodes.nodeExecutionStates[nodeId]
+      ),
+    [nodeId]
+  );
+
+  const nodeExecutionState = useAppSelector(selectNodeExecutionState);
 
   const [
     nodeSelectedOutlineLight,
@@ -57,9 +71,24 @@ const NodeWrapper = (props: NodeWrapperProps) => {
         w: width ?? NODE_WIDTH,
         transitionProperty: 'common',
         transitionDuration: '0.1s',
-        shadow: selected ? shadow : undefined,
+        shadow: selected
+          ? nodeExecutionState?.status === NodeStatus.IN_PROGRESS
+            ? undefined
+            : shadow
+          : undefined,
         cursor: 'grab',
         opacity,
+        borderWidth: 2,
+        borderColor:
+          nodeExecutionState?.status === NodeStatus.IN_PROGRESS
+            ? 'warning.300'
+            : 'base.200',
+        _dark: {
+          borderColor:
+            nodeExecutionState?.status === NodeStatus.IN_PROGRESS
+              ? 'warning.500'
+              : 'base.900',
+        },
       }}
     >
       <Box

invokeai/frontend/web/src/theme/theme.ts

@@ -58,12 +58,12 @@ export const theme: ThemeOverride = {
     nodeHeader: {
       bg: 'base.200',
       color: 'base.900',
-      '.chakra-ui-dark &': { bg: 'base.700', color: 'base.100' },
+      '.chakra-ui-dark &': { bg: 'base.900', color: 'base.100' },
     },
     nodeFooter: {
       bg: 'base.200',
       color: 'base.900',
-      '.chakra-ui-dark &': { bg: 'base.700', color: 'base.100' },
+      '.chakra-ui-dark &': { bg: 'base.900', color: 'base.100' },
     },
   },
   styles: {