From 2ec8fd3dc73bf10cf51567df5aefa1da3288a162 Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Wed, 23 Aug 2023 19:40:59 +1200
Subject: [PATCH] feat: Make the active processing node light up

---
 .../flow/nodes/common/NodeWrapper.tsx         | 35 +++++++++++++++++--
 invokeai/frontend/web/src/theme/theme.ts      |  4 +--
 2 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx
index 327c01a806..1b48b3b48a 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx
+++ b/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
diff --git a/invokeai/frontend/web/src/theme/theme.ts b/invokeai/frontend/web/src/theme/theme.ts
index 082da1306d..248e9d0a83 100644
--- a/invokeai/frontend/web/src/theme/theme.ts
+++ b/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: {