refactor(ui): canvas flow (wip)

invokeai/frontend/web/src/app/components/GlobalHookIsolator.tsx

@@ -21,8 +21,11 @@ import i18n from 'i18n';
 import { size } from 'lodash-es';
 import { memo, useEffect } from 'react';
 import { useGetOpenAPISchemaQuery } from 'services/api/endpoints/appInfo';
+import { useGetQueueCountsByDestinationQuery } from 'services/api/endpoints/queue';
 import { useSocketIO } from 'services/events/useSocketIO';
 
+const queueCountArg = { destination: 'canvas' };
+
 /**
  * GlobalHookIsolator is a logical component that runs global hooks in an isolated component, so that they do not
  * cause needless re-renders of any other components.
@@ -41,6 +44,10 @@ export const GlobalHookIsolator = memo(
     useGetOpenAPISchemaQuery();
     useSyncLoggingConfig();
 
+    // Persistent subscription to the queue counts query - canvas relies on this to know if there are pending
+    // and/or in progress canvas sessions.
+    useGetQueueCountsByDestinationQuery(queueCountArg);
+
     useEffect(() => {
       i18n.changeLanguage(language);
     }, [language]);

invokeai/frontend/web/src/features/controlLayers/components/CanvasMainPanelContent.tsx

@@ -28,6 +28,7 @@ import {
 import { selectIsCanvasEmpty, selectIsSessionStarted } from 'features/controlLayers/store/selectors';
 import { memo, useCallback } from 'react';
 import { PiDotsThreeOutlineVerticalFill } from 'react-icons/pi';
+import { assert } from 'tsafe';
 
 import { CanvasAlertsInvocationProgress } from './CanvasAlerts/CanvasAlertsInvocationProgress';
 
@@ -49,10 +50,10 @@ const MenuContent = memo(() => {
 MenuContent.displayName = 'MenuContent';
 
 export const CanvasMainPanelContent = memo(() => {
-  const isSessionStarted = useAppSelector(selectIsSessionStarted);
   const isCanvasEmpty = useAppSelector(selectIsCanvasEmpty);
+  const isSessionStarted = useAppSelector(selectIsSessionStarted);
 
-  if (!isSessionStarted && isCanvasEmpty) {
+  if (!isSessionStarted) {
     return <NoActiveSession />;
   }
 
@@ -60,7 +61,11 @@ export const CanvasMainPanelContent = memo(() => {
     return <SimpleActiveSession />;
   }
 
-  return <CanvasActiveSession />;
+  if (isSessionStarted && !isCanvasEmpty) {
+    return <CanvasActiveSession />;
+  }
+
+  assert(false);
 });
 
 CanvasMainPanelContent.displayName = 'CanvasMainPanelContent';
@@ -103,7 +108,6 @@ const NoActiveSession = memo(() => {
   );
 });
 NoActiveSession.displayName = 'NoActiveSession';
-
 const SimpleActiveSession = memo(() => {
   const isStaging = useAppSelector(selectIsStaging);
   const selectedImage = useAppSelector(selectSelectedImage);
@@ -114,7 +118,7 @@ const SimpleActiveSession = memo(() => {
         Simple Session (staging view) {isStaging && 'STAGING'}
       </Text>
       {selectedImage && <Image src={selectedImage.imageDTO.image_url} />}
-      <Flex gap={2} maxW="full" overflow='scroll'>
+      <Flex gap={2} maxW="full" overflow="scroll">
         {stagedImages.map(({ imageDTO }) => (
           <Image key={imageDTO.image_name} maxW={108} src={imageDTO.thumbnail_url} />
         ))}

invokeai/frontend/web/src/features/nodes/util/graph/generation/buildChatGPT4oGraph.ts

@@ -79,8 +79,8 @@ export const buildChatGPT4oGraph = async (
       aspect_ratio: bbox.aspectRatio.id,
       reference_images,
       use_cache: false,
-      is_intermediate,
-      board,
+      is_intermediate: true,
+      board: undefined,
     });
     g.upsertMetadata({
       positive_prompt: positivePrompt,
@@ -112,8 +112,8 @@ export const buildChatGPT4oGraph = async (
       base_image: { image_name },
       reference_images,
       use_cache: false,
-      is_intermediate,
-      board,
+      is_intermediate: true,
+      board: undefined,
     });
     g.upsertMetadata({
       positive_prompt: positivePrompt,

invokeai/frontend/web/src/features/nodes/util/graph/generation/buildCogView4Graph.ts

@@ -186,9 +186,9 @@ export const buildCogView4Graph = async (
 
   g.updateNode(canvasOutput, {
     id: getPrefixedId(CANVAS_OUTPUT_PREFIX),
-    is_intermediate,
+    is_intermediate: true,
     use_cache: false,
-    board,
+    board: undefined,
   });
 
   g.setMetadataReceivingNode(canvasOutput);

invokeai/frontend/web/src/features/nodes/util/graph/generation/buildFLUXGraph.ts

@@ -345,9 +345,9 @@ export const buildFLUXGraph = async (state: RootState, manager?: CanvasManager |
 
   g.updateNode(canvasOutput, {
     id: getPrefixedId(CANVAS_OUTPUT_PREFIX),
-    is_intermediate,
+    is_intermediate: true,
     use_cache: false,
-    board,
+    board: undefined,
   });
 
   g.setMetadataReceivingNode(canvasOutput);

invokeai/frontend/web/src/features/nodes/util/graph/generation/buildImagen3Graph.ts

@@ -61,8 +61,8 @@ export const buildImagen3Graph = async (
       enhance_prompt: true,
       // When enhance_prompt is true, Imagen3 will return a new image every time, ignoring the seed.
       use_cache: false,
-      is_intermediate,
-      board,
+      is_intermediate: true,
+      board: undefined,
     });
     g.upsertMetadata({
       positive_prompt: positivePrompt,

invokeai/frontend/web/src/features/nodes/util/graph/generation/buildImagen4Graph.ts

@@ -61,8 +61,8 @@ export const buildImagen4Graph = async (
       enhance_prompt: true,
       // When enhance_prompt is true, Imagen4 will return a new image every time, ignoring the seed.
       use_cache: false,
-      is_intermediate,
-      board,
+      is_intermediate: true,
+      board: undefined,
     });
     g.upsertMetadata({
       positive_prompt: positivePrompt,

invokeai/frontend/web/src/features/nodes/util/graph/generation/buildSD1Graph.ts

@@ -317,9 +317,9 @@ export const buildSD1Graph = async (state: RootState, manager?: CanvasManager |
 
   g.updateNode(canvasOutput, {
     id: getPrefixedId(CANVAS_OUTPUT_PREFIX),
-    is_intermediate,
+    is_intermediate: true,
     use_cache: false,
-    board,
+    board: undefined,
   });
 
   g.setMetadataReceivingNode(canvasOutput);

invokeai/frontend/web/src/features/nodes/util/graph/generation/buildSD3Graph.ts

@@ -207,9 +207,9 @@ export const buildSD3Graph = async (state: RootState, manager?: CanvasManager |
 
   g.updateNode(canvasOutput, {
     id: getPrefixedId(CANVAS_OUTPUT_PREFIX),
-    is_intermediate,
+    is_intermediate: true,
     use_cache: false,
-    board,
+    board: undefined,
   });
 
   g.setMetadataReceivingNode(canvasOutput);

invokeai/frontend/web/src/features/nodes/util/graph/generation/buildSDXLGraph.ts

@@ -323,9 +323,9 @@ export const buildSDXLGraph = async (state: RootState, manager?: CanvasManager |
 
   g.updateNode(canvasOutput, {
     id: getPrefixedId(CANVAS_OUTPUT_PREFIX),
-    is_intermediate,
+    is_intermediate: true,
     use_cache: false,
-    board,
+    board: undefined,
   });
 
   g.setMetadataReceivingNode(canvasOutput);