fix: canvas not working on queue

Add `batch_id` to outbound events. This necessitates adding it to both `InvocationContext` and `InvocationQueueItem`. This allows the canvas to receive images.

When the user enqueues a batch on the canvas, it is expected that all images from that batch are directed to the canvas.

The simplest, most flexible solution is to add the `batch_id` to the invocation context-y stuff. Then everything knows what batch it came from, and we can have the canvas pick up images associated with its list of canvas `batch_id`s.

invokeai/frontend/web/src/features/canvas/components/IAICanvasIntermediateImage.tsx

@@ -11,12 +11,12 @@ const selector = createSelector(
   ({ system, canvas }) => {
     const { denoiseProgress } = system;
     const { boundingBox } = canvas.layerState.stagingArea;
-    const { sessionIds } = canvas;
+    const { batchIds } = canvas;
 
     return {
       boundingBox,
       progressImage:
-        denoiseProgress && sessionIds.includes(denoiseProgress.session_id)
+        denoiseProgress && batchIds.includes(denoiseProgress.batch_id)
           ? denoiseProgress.progress_image
           : undefined,
     };

invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts

@@ -85,7 +85,6 @@ export const initialCanvasState: CanvasState = {
   stageDimensions: { width: 0, height: 0 },
   stageScale: 1,
   tool: 'brush',
-  sessionIds: [],
   batchIds: [],
 };
 
@@ -302,11 +301,7 @@ export const canvasSlice = createSlice({
     canvasBatchIdAdded: (state, action: PayloadAction<string>) => {
       state.batchIds.push(action.payload);
     },
-    canvasSessionIdAdded: (state, action: PayloadAction<string>) => {
-      state.sessionIds.push(action.payload);
-    },
-    canvasBatchesAndSessionsReset: (state) => {
-      state.sessionIds = [];
+    canvasBatchIdsReset: (state) => {
       state.batchIds = [];
     },
     stagingAreaInitialized: (
@@ -879,8 +874,7 @@ export const {
   setShouldAntialias,
   canvasResized,
   canvasBatchIdAdded,
-  canvasSessionIdAdded,
-  canvasBatchesAndSessionsReset,
+  canvasBatchIdsReset,
 } = canvasSlice.actions;
 
 export default canvasSlice.reducer;

invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts

@@ -166,7 +166,6 @@ export interface CanvasState {
   tool: CanvasTool;
   generationMode?: GenerationMode;
   batchIds: string[];
-  sessionIds: string[];
 }
 
 export type GenerationMode = 'txt2img' | 'img2img' | 'inpaint' | 'outpaint';

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

@@ -113,6 +113,7 @@ export const systemSlice = createSlice({
         order,
         progress_image,
         graph_execution_state_id: session_id,
+        queue_batch_id: batch_id,
       } = action.payload.data;
 
       state.denoiseProgress = {
@@ -122,6 +123,7 @@ export const systemSlice = createSlice({
         percentage: calculateStepPercentage(step, total_steps, order),
         progress_image,
         session_id,
+        batch_id,
       };
 
       state.status = 'PROCESSING';

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

@@ -12,6 +12,7 @@ export type SystemStatus =
 
 export type DenoiseProgress = {
   session_id: string;
+  batch_id: string;
   progress_image: ProgressImage | null | undefined;
   step: number;
   total_steps: number;