fix(ui): fix middleware order for multi-node graphs

invokeai/frontend/web/src/app/store.ts

@@ -53,6 +53,7 @@ const systemBlacklist = [
   'openModel',
   'cancelOptions.cancelAfter',
   'isCancelScheduled',
+  'sessionId',
 ].map((blacklistItem) => `system.${blacklistItem}`);
 
 const galleryBlacklist = [

invokeai/frontend/web/src/features/system/store/systemSlice.ts

@@ -18,7 +18,7 @@ import { isImageOutput } from 'services/types/guards';
 import { ProgressImage } from 'services/events/types';
 import { initialImageSelected } from 'features/parameters/store/generationSlice';
 import { makeToast } from '../hooks/useToastWatcher';
-import { sessionCanceled } from 'services/thunks/session';
+import { sessionCanceled, sessionInvoked } from 'services/thunks/session';
 
 export type LogLevel = 'info' | 'warning' | 'error';
 
@@ -384,6 +384,7 @@ export const systemSlice = createSlice({
       state.isProcessing = true;
       state.isCancelable = true;
       state.currentStatusHasSteps = false;
+      state.currentStatus = i18n.t('common.statusGenerating');
     });
 
     /**
@@ -408,6 +409,7 @@ export const systemSlice = createSlice({
       state.currentStep = 0;
       state.totalSteps = 0;
       state.progressImage = null;
+      state.currentStatus = i18n.t('common.statusProcessingComplete');
 
       // TODO: handle logging for other invocation types
       if (isImageOutput(data.result)) {
@@ -446,6 +448,14 @@ export const systemSlice = createSlice({
       });
     });
 
+    /**
+     * Session Invoked - PENDING
+     */
+
+    builder.addCase(sessionInvoked.pending, (state) => {
+      state.currentStatus = i18n.t('common.statusPreparing');
+    });
+
     /**
      * Session Canceled
      */

invokeai/frontend/web/src/services/events/middleware.ts

@@ -106,6 +106,30 @@ export const socketMiddleware = () => {
 
       // Everything else only happens once we have created a session
       if (isFulfilledSessionCreatedAction(action)) {
+        const oldSessionId = getState().system.sessionId;
+
+        if (oldSessionId) {
+          // Unsubscribe when invocations complete
+          socket.emit('unsubscribe', {
+            session: oldSessionId,
+          });
+
+          dispatch(
+            socketUnsubscribed({
+              sessionId: oldSessionId,
+              timestamp: getTimestamp(),
+            })
+          );
+
+          // Remove listeners for these events; we need to set them up fresh whenever we subscribe
+          [
+            'invocation_started',
+            'generator_progress',
+            'invocation_error',
+            'invocation_complete',
+          ].forEach((event) => socket.removeAllListeners(event));
+        }
+
         const sessionId = action.payload.id;
 
         // After a session is created, we immediately subscribe to events and then invoke the session
@@ -137,27 +161,11 @@ export const socketMiddleware = () => {
 
           const { cancelType, isCancelScheduled } = getState().system;
 
+          // Handle scheduled cancelation
           if (cancelType === 'scheduled' && isCancelScheduled) {
             dispatch(sessionCanceled({ sessionId }));
           }
 
-          // Unsubscribe when invocations complete
-          socket.emit('unsubscribe', {
-            session: sessionId,
-          });
-
-          dispatch(
-            socketUnsubscribed({ sessionId, timestamp: getTimestamp() })
-          );
-
-          // Remove listeners for these events; we need to set them up fresh whenever we subscribe
-          [
-            'invocation_started',
-            'generator_progress',
-            'invocation_error',
-            'invocation_complete',
-          ].forEach((event) => socket.removeAllListeners(event));
-
           dispatch(invocationComplete({ data, timestamp: getTimestamp() }));
         });