feat(ui): update invoke button tooltip for batching

- Split up logic to determine reason why the user cannot invoke for each tab. - Fix issue where the workflows tab would show reasons related to canvas/upscale tab. The tooltip now only shows information relevant to the current tab. - Add calculation for batch size to the queue count prediction. - Use a constant for the enqueue mutation's fixed cache key, instead of a string. Just some typo protection.
2026-02-13 01:05:09 -05:00 · 2024-11-19 10:49:06 -06:00
parent cead2c4445
commit ea8787c8ff
14 changed files with 548 additions and 254 deletions
--- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStateApiModule.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStateApiModule.ts
@@ -51,7 +51,7 @@ import type { Graph } from 'features/nodes/util/graph/generation/Graph';
 import { atom, computed } from 'nanostores';
 import type { Logger } from 'roarr';
 import { getImageDTO } from 'services/api/endpoints/images';
-import { queueApi } from 'services/api/endpoints/queue';
+import { enqueueMutationFixedCacheKeyOptions, queueApi } from 'services/api/endpoints/queue';
 import type { BatchConfig, ImageDTO, S } from 'services/api/types';
 import { QueueError } from 'services/events/errors';
 import type { Param0 } from 'tsafe';
@@ -402,7 +402,7 @@ export class CanvasStateApiModule extends CanvasModuleBase {
        queueApi.endpoints.enqueueBatch.initiate(batch, {
          // Use the same cache key for all enqueueBatch requests, so that all consumers of this query get the same status
          // updates.
-          fixedCacheKey: 'enqueueBatch',
+          ...enqueueMutationFixedCacheKeyOptions,
          // We do not need RTK to track this request in the store
          track: false,
        })
--- a/invokeai/frontend/web/src/features/queue/components/InvokeButtonTooltip/InvokeButtonTooltip.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/InvokeButtonTooltip/InvokeButtonTooltip.tsx
@@ -0,0 +1,310 @@
+import type { TooltipProps } from '@invoke-ai/ui-library';
+import { Divider, Flex, ListItem, Text, Tooltip, UnorderedList } from '@invoke-ai/ui-library';
+import { useStore } from '@nanostores/react';
+import { $true } from 'app/store/nanostores/util';
+import { useAppSelector } from 'app/store/storeHooks';
+import { useCanvasManagerSafe } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
+import { selectSendToCanvas } from 'features/controlLayers/store/canvasSettingsSlice';
+import { selectIterations } from 'features/controlLayers/store/paramsSlice';
+import { selectDynamicPromptsIsLoading } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
+import { selectAutoAddBoardId } from 'features/gallery/store/gallerySelectors';
+import { $templates } from 'features/nodes/store/nodesSlice';
+import type { Reason } from 'features/queue/store/readiness';
+import {
+  buildSelectIsReadyToEnqueueCanvasTab,
+  buildSelectIsReadyToEnqueueUpscaleTab,
+  buildSelectIsReadyToEnqueueWorkflowsTab,
+  buildSelectReasonsWhyCannotEnqueueCanvasTab,
+  buildSelectReasonsWhyCannotEnqueueUpscaleTab,
+  buildSelectReasonsWhyCannotEnqueueWorkflowsTab,
+  selectPromptsCount,
+  selectWorkflowsBatchSize,
+} from 'features/queue/store/readiness';
+import { selectActiveTab } from 'features/ui/store/uiSelectors';
+import type { PropsWithChildren } from 'react';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { enqueueMutationFixedCacheKeyOptions, useEnqueueBatchMutation } from 'services/api/endpoints/queue';
+import { useBoardName } from 'services/api/hooks/useBoardName';
+import { $isConnected } from 'services/events/stores';
+
+type Props = TooltipProps & {
+  prepend?: boolean;
+};
+
+export const InvokeButtonTooltip = ({ prepend, children, ...rest }: PropsWithChildren<Props>) => {
+  return (
+    <Tooltip label={<TooltipContent prepend={prepend} />} maxW={512} {...rest}>
+      {children}
+    </Tooltip>
+  );
+};
+
+const TooltipContent = memo(({ prepend = false }: { prepend?: boolean }) => {
+  const activeTab = useAppSelector(selectActiveTab);
+
+  if (activeTab === 'canvas') {
+    return <CanvasTabTooltipContent prepend={prepend} />;
+  }
+
+  if (activeTab === 'workflows') {
+    return <WorkflowsTabTooltipContent prepend={prepend} />;
+  }
+
+  if (activeTab === 'upscaling') {
+    return <UpscaleTabTooltipContent prepend={prepend} />;
+  }
+
+  return null;
+});
+TooltipContent.displayName = 'TooltipContent';
+
+const CanvasTabTooltipContent = memo(({ prepend = false }: { prepend?: boolean }) => {
+  const isConnected = useStore($isConnected);
+  const canvasManager = useCanvasManagerSafe();
+  const canvasIsFiltering = useStore(canvasManager?.stateApi.$isFiltering ?? $true);
+  const canvasIsTransforming = useStore(canvasManager?.stateApi.$isTransforming ?? $true);
+  const canvasIsRasterizing = useStore(canvasManager?.stateApi.$isRasterizing ?? $true);
+  const canvasIsSelectingObject = useStore(canvasManager?.stateApi.$isSegmenting ?? $true);
+  const canvasIsCompositing = useStore(canvasManager?.compositor.$isBusy ?? $true);
+
+  const selectIsReady = useMemo(
+    () =>
+      buildSelectIsReadyToEnqueueCanvasTab({
+        isConnected,
+        canvasIsFiltering,
+        canvasIsTransforming,
+        canvasIsRasterizing,
+        canvasIsSelectingObject,
+        canvasIsCompositing,
+      }),
+    [
+      isConnected,
+      canvasIsCompositing,
+      canvasIsFiltering,
+      canvasIsRasterizing,
+      canvasIsSelectingObject,
+      canvasIsTransforming,
+    ]
+  );
+
+  const selectReasons = useMemo(
+    () =>
+      buildSelectReasonsWhyCannotEnqueueCanvasTab({
+        isConnected,
+        canvasIsFiltering,
+        canvasIsTransforming,
+        canvasIsRasterizing,
+        canvasIsSelectingObject,
+        canvasIsCompositing,
+      }),
+    [
+      isConnected,
+      canvasIsCompositing,
+      canvasIsFiltering,
+      canvasIsRasterizing,
+      canvasIsSelectingObject,
+      canvasIsTransforming,
+    ]
+  );
+
+  const isReady = useAppSelector(selectIsReady);
+  const reasons = useAppSelector(selectReasons);
+
+  return (
+    <Flex flexDir="column" gap={1}>
+      <IsReadyText isReady={isReady} prepend={prepend} />
+      <QueueCountPredictionCanvasOrUpscaleTab />
+      {reasons.length > 0 && (
+        <>
+          <StyledDivider />
+          <ReasonsList reasons={reasons} />
+        </>
+      )}
+      <StyledDivider />
+      <AddingToText />
+    </Flex>
+  );
+});
+CanvasTabTooltipContent.displayName = 'CanvasTabTooltipContent';
+
+const UpscaleTabTooltipContent = memo(({ prepend = false }: { prepend?: boolean }) => {
+  const isConnected = useStore($isConnected);
+
+  const selectIsReady = useMemo(() => buildSelectIsReadyToEnqueueUpscaleTab({ isConnected }), [isConnected]);
+  const selectReasons = useMemo(() => buildSelectReasonsWhyCannotEnqueueUpscaleTab({ isConnected }), [isConnected]);
+
+  const isReady = useAppSelector(selectIsReady);
+  const reasons = useAppSelector(selectReasons);
+
+  return (
+    <Flex flexDir="column" gap={1}>
+      <IsReadyText isReady={isReady} prepend={prepend} />
+      <QueueCountPredictionCanvasOrUpscaleTab />
+      {reasons.length > 0 && (
+        <>
+          <StyledDivider />
+          <ReasonsList reasons={reasons} />
+        </>
+      )}
+      <StyledDivider />
+      <AddingToText />
+    </Flex>
+  );
+});
+UpscaleTabTooltipContent.displayName = 'UpscaleTabTooltipContent';
+
+const WorkflowsTabTooltipContent = memo(({ prepend = false }: { prepend?: boolean }) => {
+  const isConnected = useStore($isConnected);
+  const templates = useStore($templates);
+
+  const selectIsReady = useMemo(
+    () => buildSelectIsReadyToEnqueueWorkflowsTab({ isConnected, templates }),
+    [isConnected, templates]
+  );
+  const selectReasons = useMemo(
+    () => buildSelectReasonsWhyCannotEnqueueWorkflowsTab({ isConnected, templates }),
+    [isConnected, templates]
+  );
+
+  const isReady = useAppSelector(selectIsReady);
+  const reasons = useAppSelector(selectReasons);
+
+  return (
+    <Flex flexDir="column" gap={1}>
+      <IsReadyText isReady={isReady} prepend={prepend} />
+      <QueueCountPredictionWorkflowsTab />
+      {reasons.length > 0 && (
+        <>
+          <StyledDivider />
+          <ReasonsList reasons={reasons} />
+        </>
+      )}
+      <StyledDivider />
+      <AddingToText />
+    </Flex>
+  );
+});
+WorkflowsTabTooltipContent.displayName = 'WorkflowsTabTooltipContent';
+
+const QueueCountPredictionCanvasOrUpscaleTab = memo(() => {
+  const { t } = useTranslation();
+  const promptsCount = useAppSelector(selectPromptsCount);
+  const iterationsCount = useAppSelector(selectIterations);
+
+  const text = useMemo(() => {
+    const generationCount = Math.min(promptsCount * iterationsCount, 10000);
+    const prompts = t('queue.prompts', { count: promptsCount });
+    const iterations = t('queue.iterations', { count: iterationsCount });
+    const generations = t('queue.generations', { count: generationCount });
+    return `${promptsCount} ${prompts} \u00d7 ${iterationsCount} ${iterations} -> ${generationCount} ${generations}`.toLowerCase();
+  }, [iterationsCount, promptsCount, t]);
+
+  return <Text>{text}</Text>;
+});
+QueueCountPredictionCanvasOrUpscaleTab.displayName = 'QueueCountPredictionCanvasOrUpscaleTab';
+
+const QueueCountPredictionWorkflowsTab = memo(() => {
+  const { t } = useTranslation();
+  const batchSize = useAppSelector(selectWorkflowsBatchSize);
+  const iterationsCount = useAppSelector(selectIterations);
+
+  const text = useMemo(() => {
+    const generationCount = Math.min(batchSize * iterationsCount, 10000);
+    const iterations = t('queue.iterations', { count: iterationsCount });
+    const generations = t('queue.generations', { count: generationCount });
+    return `${batchSize} ${t('queue.batchSize')} \u00d7 ${iterationsCount} ${iterations} -> ${generationCount} ${generations}`.toLowerCase();
+  }, [batchSize, iterationsCount, t]);
+
+  return <Text>{text}</Text>;
+});
+QueueCountPredictionWorkflowsTab.displayName = 'QueueCountPredictionWorkflowsTab';
+
+const IsReadyText = memo(({ isReady, prepend }: { isReady: boolean; prepend: boolean }) => {
+  const { t } = useTranslation();
+  const isLoadingDynamicPrompts = useAppSelector(selectDynamicPromptsIsLoading);
+  const [_, enqueueMutation] = useEnqueueBatchMutation(enqueueMutationFixedCacheKeyOptions);
+
+  const text = useMemo(() => {
+    if (enqueueMutation.isLoading) {
+      return t('queue.enqueueing');
+    }
+    if (isLoadingDynamicPrompts) {
+      return t('dynamicPrompts.loading');
+    }
+    if (isReady) {
+      if (prepend) {
+        return t('queue.queueFront');
+      }
+      return t('queue.queueBack');
+    }
+    return t('queue.notReady');
+  }, [enqueueMutation.isLoading, isLoadingDynamicPrompts, isReady, prepend, t]);
+
+  return <Text fontWeight="semibold">{text}</Text>;
+});
+IsReadyText.displayName = 'IsReadyText';
+
+const ReasonsList = memo(({ reasons }: { reasons: Reason[] }) => {
+  return (
+    <UnorderedList>
+      {reasons.map((reason, i) => (
+        <ReasonListItem key={`${reason.content}.${i}`} reason={reason} />
+      ))}
+    </UnorderedList>
+  );
+});
+ReasonsList.displayName = 'ReasonsList';
+
+const ReasonListItem = memo(({ reason }: { reason: Reason }) => {
+  return (
+    <ListItem>
+      <span>
+        {reason.prefix && (
+          <Text as="span" fontWeight="semibold">
+            {reason.prefix}:{' '}
+          </Text>
+        )}
+        <Text as="span">{reason.content}</Text>
+      </span>
+    </ListItem>
+  );
+});
+ReasonListItem.displayName = 'ReasonListItem';
+
+const StyledDivider = memo(() => <Divider opacity={0.2} borderColor="base.900" />);
+StyledDivider.displayName = 'StyledDivider';
+
+const AddingToText = memo(() => {
+  const { t } = useTranslation();
+  const sendToCanvas = useAppSelector(selectSendToCanvas);
+  const autoAddBoardId = useAppSelector(selectAutoAddBoardId);
+  const autoAddBoardName = useBoardName(autoAddBoardId);
+
+  const addingTo = useMemo(() => {
+    if (sendToCanvas) {
+      return t('controlLayers.stagingOnCanvas');
+    }
+    return t('parameters.invoke.addingImagesTo');
+  }, [sendToCanvas, t]);
+
+  const destination = useMemo(() => {
+    if (sendToCanvas) {
+      return t('queue.canvas');
+    }
+    if (autoAddBoardName) {
+      return autoAddBoardName;
+    }
+    return t('boards.uncategorized');
+  }, [autoAddBoardName, sendToCanvas, t]);
+
+  return (
+    <Text fontStyle="oblique 10deg">
+      {addingTo}{' '}
+      <Text as="span" fontWeight="semibold">
+        {destination}
+      </Text>
+    </Text>
+  );
+});
+AddingToText.displayName = 'AddingToText';
--- a/invokeai/frontend/web/src/features/queue/components/InvokeQueueBackButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/InvokeQueueBackButton.tsx
@@ -6,7 +6,7 @@ import { useInvoke } from 'features/queue/hooks/useInvoke';
 import { memo } from 'react';
 import { PiLightningFill, PiSparkleFill } from 'react-icons/pi';

-import { QueueButtonTooltip } from './QueueButtonTooltip';
+import { InvokeButtonTooltip } from './InvokeButtonTooltip/InvokeButtonTooltip';

 const invoke = 'Invoke';

@@ -18,7 +18,7 @@ export const InvokeButton = memo(() => {
  return (
    <Flex pos="relative" w="200px">
      <QueueIterationsNumberInput />
-      <QueueButtonTooltip prepend={shift}>
+      <InvokeButtonTooltip prepend={shift}>
        <Button
          onClick={shift ? queue.queueFront : queue.queueBack}
          isLoading={queue.isLoading || isLoadingDynamicPrompts}
@@ -36,7 +36,7 @@ export const InvokeButton = memo(() => {
          <span>{invoke}</span>
          <Spacer />
        </Button>
-      </QueueButtonTooltip>
+      </InvokeButtonTooltip>
    </Flex>
  );
 });
--- a/invokeai/frontend/web/src/features/queue/components/QueueButtonTooltip.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueButtonTooltip.tsx
@@ -1,123 +0,0 @@
-import type { TooltipProps } from '@invoke-ai/ui-library';
-import { Divider, Flex, ListItem, Text, Tooltip, UnorderedList } from '@invoke-ai/ui-library';
-import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/store/storeHooks';
-import { useIsReadyToEnqueue } from 'common/hooks/useIsReadyToEnqueue';
-import { selectSendToCanvas } from 'features/controlLayers/store/canvasSettingsSlice';
-import { selectIterations, selectParamsSlice } from 'features/controlLayers/store/paramsSlice';
-import {
-  selectDynamicPromptsIsLoading,
-  selectDynamicPromptsSlice,
-} from 'features/dynamicPrompts/store/dynamicPromptsSlice';
-import { getShouldProcessPrompt } from 'features/dynamicPrompts/util/getShouldProcessPrompt';
-import { selectAutoAddBoardId } from 'features/gallery/store/gallerySelectors';
-import type { PropsWithChildren } from 'react';
-import { memo, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useEnqueueBatchMutation } from 'services/api/endpoints/queue';
-import { useBoardName } from 'services/api/hooks/useBoardName';
-
-const selectPromptsCount = createSelector(selectParamsSlice, selectDynamicPromptsSlice, (params, dynamicPrompts) =>
-  getShouldProcessPrompt(params.positivePrompt) ? dynamicPrompts.prompts.length : 1
-);
-
-type Props = TooltipProps & {
-  prepend?: boolean;
-};
-
-export const QueueButtonTooltip = ({ prepend, children, ...rest }: PropsWithChildren<Props>) => {
-  return (
-    <Tooltip label={<TooltipContent prepend={prepend} />} maxW={512} {...rest}>
-      {children}
-    </Tooltip>
-  );
-};
-
-const TooltipContent = memo(({ prepend = false }: { prepend?: boolean }) => {
-  const { t } = useTranslation();
-  const { isReady, reasons } = useIsReadyToEnqueue();
-  const sendToCanvas = useAppSelector(selectSendToCanvas);
-  const isLoadingDynamicPrompts = useAppSelector(selectDynamicPromptsIsLoading);
-  const promptsCount = useAppSelector(selectPromptsCount);
-  const iterationsCount = useAppSelector(selectIterations);
-  const autoAddBoardId = useAppSelector(selectAutoAddBoardId);
-  const autoAddBoardName = useBoardName(autoAddBoardId);
-  const [_, { isLoading }] = useEnqueueBatchMutation({
-    fixedCacheKey: 'enqueueBatch',
-  });
-  const queueCountPredictionLabel = useMemo(() => {
-    const generationCount = Math.min(promptsCount * iterationsCount, 10000);
-    const prompts = t('queue.prompts', { count: promptsCount });
-    const iterations = t('queue.iterations', { count: iterationsCount });
-    const generations = t('queue.generations', { count: generationCount });
-    return `${promptsCount} ${prompts} \u00d7 ${iterationsCount} ${iterations} -> ${generationCount} ${generations}`.toLowerCase();
-  }, [iterationsCount, promptsCount, t]);
-
-  const label = useMemo(() => {
-    if (isLoading) {
-      return t('queue.enqueueing');
-    }
-    if (isLoadingDynamicPrompts) {
-      return t('dynamicPrompts.loading');
-    }
-    if (isReady) {
-      if (prepend) {
-        return t('queue.queueFront');
-      }
-      return t('queue.queueBack');
-    }
-    return t('queue.notReady');
-  }, [isLoading, isLoadingDynamicPrompts, isReady, prepend, t]);
-
-  const addingTo = useMemo(() => {
-    if (sendToCanvas) {
-      return t('controlLayers.stagingOnCanvas');
-    }
-    return t('parameters.invoke.addingImagesTo');
-  }, [sendToCanvas, t]);
-
-  const destination = useMemo(() => {
-    if (sendToCanvas) {
-      return t('queue.canvas');
-    }
-    if (autoAddBoardName) {
-      return autoAddBoardName;
-    }
-    return t('boards.uncategorized');
-  }, [autoAddBoardName, sendToCanvas, t]);
-
-  return (
-    <Flex flexDir="column" gap={1}>
-      <Text fontWeight="semibold">{label}</Text>
-      <Text>{queueCountPredictionLabel}</Text>
-      {reasons.length > 0 && (
-        <>
-          <Divider opacity={0.2} borderColor="base.900" />
-          <UnorderedList>
-            {reasons.map((reason, i) => (
-              <ListItem key={`${reason.content}.${i}`}>
-                <span>
-                  {reason.prefix && (
-                    <Text as="span" fontWeight="semibold">
-                      {reason.prefix}:{' '}
-                    </Text>
-                  )}
-                  <Text as="span">{reason.content}</Text>
-                </span>
-              </ListItem>
-            ))}
-          </UnorderedList>
-        </>
-      )}
-      <Divider opacity={0.2} borderColor="base.900" />
-      <Text fontStyle="oblique 10deg">
-        {addingTo}{' '}
-        <Text as="span" fontWeight="semibold">
-          {destination}
-        </Text>
-      </Text>
-    </Flex>
-  );
-});
-
-TooltipContent.displayName = 'QueueButtonTooltipContent';
--- a/invokeai/frontend/web/src/features/queue/hooks/useInvoke.ts
+++ b/invokeai/frontend/web/src/features/queue/hooks/useInvoke.ts
@@ -1,17 +1,63 @@
+import { useStore } from '@nanostores/react';
 import { enqueueRequested } from 'app/store/actions';
+import { $true } from 'app/store/nanostores/util';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { useIsReadyToEnqueue } from 'common/hooks/useIsReadyToEnqueue';
+import { useCanvasManagerSafe } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
+import { $templates } from 'features/nodes/store/nodesSlice';
+import {
+  buildSelectIsReadyToEnqueueCanvasTab,
+  buildSelectIsReadyToEnqueueUpscaleTab,
+  buildSelectIsReadyToEnqueueWorkflowsTab,
+} from 'features/queue/store/readiness';
 import { selectActiveTab } from 'features/ui/store/uiSelectors';
-import { useCallback } from 'react';
-import { useEnqueueBatchMutation } from 'services/api/endpoints/queue';
+import { useCallback, useMemo } from 'react';
+import { enqueueMutationFixedCacheKeyOptions, useEnqueueBatchMutation } from 'services/api/endpoints/queue';
+import { $isConnected } from 'services/events/stores';

 export const useInvoke = () => {
  const dispatch = useAppDispatch();
  const tabName = useAppSelector(selectActiveTab);
-  const { isReady } = useIsReadyToEnqueue();
-  const [_, { isLoading }] = useEnqueueBatchMutation({
-    fixedCacheKey: 'enqueueBatch',
-  });
+  const isConnected = useStore($isConnected);
+  const canvasManager = useCanvasManagerSafe();
+  const canvasIsFiltering = useStore(canvasManager?.stateApi.$isFiltering ?? $true);
+  const canvasIsTransforming = useStore(canvasManager?.stateApi.$isTransforming ?? $true);
+  const canvasIsRasterizing = useStore(canvasManager?.stateApi.$isRasterizing ?? $true);
+  const canvasIsSelectingObject = useStore(canvasManager?.stateApi.$isSegmenting ?? $true);
+  const canvasIsCompositing = useStore(canvasManager?.compositor.$isBusy ?? $true);
+  const templates = useStore($templates);
+
+  const selectIsReady = useMemo(() => {
+    if (tabName === 'canvas') {
+      return buildSelectIsReadyToEnqueueCanvasTab({
+        isConnected,
+        canvasIsFiltering,
+        canvasIsTransforming,
+        canvasIsRasterizing,
+        canvasIsSelectingObject,
+        canvasIsCompositing,
+      });
+    }
+    if (tabName === 'upscaling') {
+      return buildSelectIsReadyToEnqueueUpscaleTab({ isConnected });
+    }
+    if (tabName === 'workflows') {
+      return buildSelectIsReadyToEnqueueWorkflowsTab({ isConnected, templates });
+    }
+    return () => false;
+  }, [
+    tabName,
+    isConnected,
+    canvasIsFiltering,
+    canvasIsTransforming,
+    canvasIsRasterizing,
+    canvasIsSelectingObject,
+    canvasIsCompositing,
+    templates,
+  ]);
+
+  const isReady = useAppSelector(selectIsReady);
+
+  const [_, { isLoading }] = useEnqueueBatchMutation(enqueueMutationFixedCacheKeyOptions);
  const queueBack = useCallback(() => {
    if (!isReady) {
      return;
--- a/invokeai/frontend/web/src/features/queue/hooks/useIsQueueMutationInProgress.ts
+++ b/invokeai/frontend/web/src/features/queue/hooks/useIsQueueMutationInProgress.ts
@@ -1,4 +1,5 @@
 import {
+  enqueueMutationFixedCacheKeyOptions,
  useCancelQueueItemMutation,
  // useCancelByBatchIdsMutation,
  useClearQueueMutation,
@@ -9,9 +10,9 @@ import {
 } from 'services/api/endpoints/queue';

 export const useIsQueueMutationInProgress = () => {
-  const [_triggerEnqueueBatch, { isLoading: isLoadingEnqueueBatch }] = useEnqueueBatchMutation({
-    fixedCacheKey: 'enqueueBatch',
-  });
+  const [_triggerEnqueueBatch, { isLoading: isLoadingEnqueueBatch }] = useEnqueueBatchMutation(
+    enqueueMutationFixedCacheKeyOptions
+  );
  const [_triggerResumeProcessor, { isLoading: isLoadingResumeProcessor }] = useResumeProcessorMutation({
    fixedCacheKey: 'resumeProcessor',
  });
--- a/invokeai/frontend/web/src/features/queue/store/readiness.ts
+++ b/invokeai/frontend/web/src/features/queue/store/readiness.ts
@@ -0,0 +1,518 @@
+import { createSelector } from '@reduxjs/toolkit';
+import type { AppConfig } from 'app/types/invokeai';
+import type { ParamsState } from 'features/controlLayers/store/paramsSlice';
+import { selectParamsSlice } from 'features/controlLayers/store/paramsSlice';
+import { selectCanvasSlice } from 'features/controlLayers/store/selectors';
+import type { CanvasState } from 'features/controlLayers/store/types';
+import type { DynamicPromptsState } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
+import { selectDynamicPromptsSlice } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
+import { getShouldProcessPrompt } from 'features/dynamicPrompts/util/getShouldProcessPrompt';
+import { selectNodesSlice } from 'features/nodes/store/selectors';
+import type { NodesState, Templates } from 'features/nodes/store/types';
+import type { WorkflowSettingsState } from 'features/nodes/store/workflowSettingsSlice';
+import { selectWorkflowSettingsSlice } from 'features/nodes/store/workflowSettingsSlice';
+import { isImageFieldCollectionInputInstance, isImageFieldCollectionInputTemplate } from 'features/nodes/types/field';
+import { isInvocationNode } from 'features/nodes/types/invocation';
+import type { UpscaleState } from 'features/parameters/store/upscaleSlice';
+import { selectUpscaleSlice } from 'features/parameters/store/upscaleSlice';
+import { selectConfigSlice } from 'features/system/store/configSlice';
+import i18n from 'i18next';
+import { forEach, upperFirst } from 'lodash-es';
+import { getConnectedEdges } from 'reactflow';
+
+/**
+ * This file contains selectors and utilities for determining the app is ready to enqueue generations. The handling
+ * differs for each tab (canvas, upscaling, workflows).
+ *
+ * For example, the canvas tab needs to check the status of the canvas manager before enqueuing, while the workflows
+ * tab needs to check the status of the nodes and their connections.
+ */
+
+const LAYER_TYPE_TO_TKEY = {
+  reference_image: 'controlLayers.referenceImage',
+  inpaint_mask: 'controlLayers.inpaintMask',
+  regional_guidance: 'controlLayers.regionalGuidance',
+  raster_layer: 'controlLayers.rasterLayer',
+  control_layer: 'controlLayers.controlLayer',
+} as const;
+
+export type Reason = { prefix?: string; content: string };
+
+const disconnectedReason = (t: typeof i18n.t) => ({ content: t('parameters.invoke.systemDisconnected') });
+
+const getReasonsWhyCannotEnqueueWorkflowsTab = (arg: {
+  isConnected: boolean;
+  nodes: NodesState;
+  workflowSettings: WorkflowSettingsState;
+  templates: Templates;
+}): Reason[] => {
+  const { isConnected, nodes, workflowSettings, templates } = arg;
+  const reasons: Reason[] = [];
+
+  if (!isConnected) {
+    reasons.push(disconnectedReason(i18n.t));
+  }
+
+  if (workflowSettings.shouldValidateGraph) {
+    if (!nodes.nodes.length) {
+      reasons.push({ content: i18n.t('parameters.invoke.noNodesInGraph') });
+    }
+
+    nodes.nodes.forEach((node) => {
+      if (!isInvocationNode(node)) {
+        return;
+      }
+
+      const nodeTemplate = templates[node.data.type];
+
+      if (!nodeTemplate) {
+        // Node type not found
+        reasons.push({ content: i18n.t('parameters.invoke.missingNodeTemplate') });
+        return;
+      }
+
+      const connectedEdges = getConnectedEdges([node], nodes.edges);
+
+      forEach(node.data.inputs, (field) => {
+        const fieldTemplate = nodeTemplate.inputs[field.name];
+        const hasConnection = connectedEdges.some(
+          (edge) => edge.target === node.id && edge.targetHandle === field.name
+        );
+
+        if (!fieldTemplate) {
+          reasons.push({ content: i18n.t('parameters.invoke.missingFieldTemplate') });
+          return;
+        }
+
+        const baseTKeyOptions = {
+          nodeLabel: node.data.label || nodeTemplate.title,
+          fieldLabel: field.label || fieldTemplate.title,
+        };
+
+        if (fieldTemplate.required && field.value === undefined && !hasConnection) {
+          reasons.push({ content: i18n.t('parameters.invoke.missingInputForField', baseTKeyOptions) });
+          return;
+        } else if (
+          field.value &&
+          isImageFieldCollectionInputInstance(field) &&
+          isImageFieldCollectionInputTemplate(fieldTemplate)
+        ) {
+          // Image collections may have min or max items to validate
+          // TODO(psyche): generalize this to other collection types
+          if (fieldTemplate.minItems !== undefined && fieldTemplate.minItems > 0 && field.value.length === 0) {
+            reasons.push({ content: i18n.t('parameters.invoke.collectionEmpty', baseTKeyOptions) });
+            return;
+          }
+          if (fieldTemplate.minItems !== undefined && field.value.length < fieldTemplate.minItems) {
+            reasons.push({
+              content: i18n.t('parameters.invoke.collectionTooFewItems', {
+                ...baseTKeyOptions,
+                size: field.value.length,
+                minItems: fieldTemplate.minItems,
+              }),
+            });
+            return;
+          }
+          if (fieldTemplate.maxItems !== undefined && field.value.length > fieldTemplate.maxItems) {
+            reasons.push({
+              content: i18n.t('parameters.invoke.collectionTooManyItems', {
+                ...baseTKeyOptions,
+                size: field.value.length,
+                maxItems: fieldTemplate.maxItems,
+              }),
+            });
+            return;
+          }
+        }
+      });
+    });
+  }
+
+  return reasons;
+};
+
+const getReasonsWhyCannotEnqueueUpscaleTab = (arg: {
+  isConnected: boolean;
+  upscale: UpscaleState;
+  config: AppConfig;
+  params: ParamsState;
+}) => {
+  const { isConnected, upscale, config, params } = arg;
+  const reasons: Reason[] = [];
+
+  if (!isConnected) {
+    reasons.push(disconnectedReason(i18n.t));
+  }
+
+  if (!upscale.upscaleInitialImage) {
+    reasons.push({ content: i18n.t('upscaling.missingUpscaleInitialImage') });
+  } else if (config.maxUpscaleDimension) {
+    const { width, height } = upscale.upscaleInitialImage;
+    const { scale } = upscale;
+
+    const maxPixels = config.maxUpscaleDimension ** 2;
+    const upscaledPixels = width * scale * height * scale;
+
+    if (upscaledPixels > maxPixels) {
+      reasons.push({ content: i18n.t('upscaling.exceedsMaxSize') });
+    }
+  }
+  const model = params.model;
+  if (model && !['sd-1', 'sdxl'].includes(model.base)) {
+    // When we are using an upsupported model, do not add the other warnings
+    reasons.push({ content: i18n.t('upscaling.incompatibleBaseModel') });
+  } else {
+    // Using a compatible model, add all warnings
+    if (!model) {
+      reasons.push({ content: i18n.t('parameters.invoke.noModelSelected') });
+    }
+    if (!upscale.upscaleModel) {
+      reasons.push({ content: i18n.t('upscaling.missingUpscaleModel') });
+    }
+    if (!upscale.tileControlnetModel) {
+      reasons.push({ content: i18n.t('upscaling.missingTileControlNetModel') });
+    }
+  }
+
+  return reasons;
+};
+
+const getReasonsWhyCannotEnqueueCanvasTab = (arg: {
+  isConnected: boolean;
+  canvas: CanvasState;
+  params: ParamsState;
+  dynamicPrompts: DynamicPromptsState;
+  canvasIsFiltering: boolean;
+  canvasIsTransforming: boolean;
+  canvasIsRasterizing: boolean;
+  canvasIsCompositing: boolean;
+  canvasIsSelectingObject: boolean;
+}) => {
+  const {
+    isConnected,
+    canvas,
+    params,
+    dynamicPrompts,
+    canvasIsFiltering,
+    canvasIsTransforming,
+    canvasIsRasterizing,
+    canvasIsCompositing,
+    canvasIsSelectingObject,
+  } = arg;
+  const { model, positivePrompt } = params;
+  const reasons: Reason[] = [];
+
+  if (!isConnected) {
+    reasons.push(disconnectedReason(i18n.t));
+  }
+
+  if (canvasIsFiltering) {
+    reasons.push({ content: i18n.t('parameters.invoke.canvasIsFiltering') });
+  }
+  if (canvasIsTransforming) {
+    reasons.push({ content: i18n.t('parameters.invoke.canvasIsTransforming') });
+  }
+  if (canvasIsRasterizing) {
+    reasons.push({ content: i18n.t('parameters.invoke.canvasIsRasterizing') });
+  }
+  if (canvasIsCompositing) {
+    reasons.push({ content: i18n.t('parameters.invoke.canvasIsCompositing') });
+  }
+  if (canvasIsSelectingObject) {
+    reasons.push({ content: i18n.t('parameters.invoke.canvasIsSelectingObject') });
+  }
+
+  if (dynamicPrompts.prompts.length === 0 && getShouldProcessPrompt(positivePrompt)) {
+    reasons.push({ content: i18n.t('parameters.invoke.noPrompts') });
+  }
+
+  if (!model) {
+    reasons.push({ content: i18n.t('parameters.invoke.noModelSelected') });
+  }
+
+  if (model?.base === 'flux') {
+    const { bbox } = canvas;
+
+    if (!params.t5EncoderModel) {
+      reasons.push({ content: i18n.t('parameters.invoke.noT5EncoderModelSelected') });
+    }
+    if (!params.clipEmbedModel) {
+      reasons.push({ content: i18n.t('parameters.invoke.noCLIPEmbedModelSelected') });
+    }
+    if (!params.fluxVAE) {
+      reasons.push({ content: i18n.t('parameters.invoke.noFLUXVAEModelSelected') });
+    }
+    if (bbox.scaleMethod === 'none') {
+      if (bbox.rect.width % 16 !== 0) {
+        reasons.push({
+          content: i18n.t('parameters.invoke.fluxModelIncompatibleBboxWidth', { width: bbox.rect.width }),
+        });
+      }
+      if (bbox.rect.height % 16 !== 0) {
+        reasons.push({
+          content: i18n.t('parameters.invoke.fluxModelIncompatibleBboxHeight', { height: bbox.rect.height }),
+        });
+      }
+    } else {
+      if (bbox.scaledSize.width % 16 !== 0) {
+        reasons.push({
+          content: i18n.t('parameters.invoke.fluxModelIncompatibleScaledBboxWidth', {
+            width: bbox.scaledSize.width,
+          }),
+        });
+      }
+      if (bbox.scaledSize.height % 16 !== 0) {
+        reasons.push({
+          content: i18n.t('parameters.invoke.fluxModelIncompatibleScaledBboxHeight', {
+            height: bbox.scaledSize.height,
+          }),
+        });
+      }
+    }
+  }
+
+  canvas.controlLayers.entities
+    .filter((controlLayer) => controlLayer.isEnabled)
+    .forEach((controlLayer, i) => {
+      const layerLiteral = i18n.t('controlLayers.layer_one');
+      const layerNumber = i + 1;
+      const layerType = i18n.t(LAYER_TYPE_TO_TKEY['control_layer']);
+      const prefix = `${layerLiteral} #${layerNumber} (${layerType})`;
+      const problems: string[] = [];
+      // Must have model
+      if (!controlLayer.controlAdapter.model) {
+        problems.push(i18n.t('parameters.invoke.layer.controlAdapterNoModelSelected'));
+      }
+      // Model base must match
+      if (controlLayer.controlAdapter.model?.base !== model?.base) {
+        problems.push(i18n.t('parameters.invoke.layer.controlAdapterIncompatibleBaseModel'));
+      }
+      if (problems.length) {
+        const content = upperFirst(problems.join(', '));
+        reasons.push({ prefix, content });
+      }
+    });
+
+  canvas.referenceImages.entities
+    .filter((entity) => entity.isEnabled)
+    .forEach((entity, i) => {
+      const layerLiteral = i18n.t('controlLayers.layer_one');
+      const layerNumber = i + 1;
+      const layerType = i18n.t(LAYER_TYPE_TO_TKEY[entity.type]);
+      const prefix = `${layerLiteral} #${layerNumber} (${layerType})`;
+      const problems: string[] = [];
+
+      // Must have model
+      if (!entity.ipAdapter.model) {
+        problems.push(i18n.t('parameters.invoke.layer.ipAdapterNoModelSelected'));
+      }
+      // Model base must match
+      if (entity.ipAdapter.model?.base !== model?.base) {
+        problems.push(i18n.t('parameters.invoke.layer.ipAdapterIncompatibleBaseModel'));
+      }
+      // Must have an image
+      if (!entity.ipAdapter.image) {
+        problems.push(i18n.t('parameters.invoke.layer.ipAdapterNoImageSelected'));
+      }
+
+      if (problems.length) {
+        const content = upperFirst(problems.join(', '));
+        reasons.push({ prefix, content });
+      }
+    });
+
+  canvas.regionalGuidance.entities
+    .filter((entity) => entity.isEnabled)
+    .forEach((entity, i) => {
+      const layerLiteral = i18n.t('controlLayers.layer_one');
+      const layerNumber = i + 1;
+      const layerType = i18n.t(LAYER_TYPE_TO_TKEY[entity.type]);
+      const prefix = `${layerLiteral} #${layerNumber} (${layerType})`;
+      const problems: string[] = [];
+      // Must have a region
+      if (entity.objects.length === 0) {
+        problems.push(i18n.t('parameters.invoke.layer.rgNoRegion'));
+      }
+      // Must have at least 1 prompt or IP Adapter
+      if (entity.positivePrompt === null && entity.negativePrompt === null && entity.referenceImages.length === 0) {
+        problems.push(i18n.t('parameters.invoke.layer.rgNoPromptsOrIPAdapters'));
+      }
+      entity.referenceImages.forEach(({ ipAdapter }) => {
+        // Must have model
+        if (!ipAdapter.model) {
+          problems.push(i18n.t('parameters.invoke.layer.ipAdapterNoModelSelected'));
+        }
+        // Model base must match
+        if (ipAdapter.model?.base !== model?.base) {
+          problems.push(i18n.t('parameters.invoke.layer.ipAdapterIncompatibleBaseModel'));
+        }
+        // Must have an image
+        if (!ipAdapter.image) {
+          problems.push(i18n.t('parameters.invoke.layer.ipAdapterNoImageSelected'));
+        }
+      });
+
+      if (problems.length) {
+        const content = upperFirst(problems.join(', '));
+        reasons.push({ prefix, content });
+      }
+    });
+
+  canvas.rasterLayers.entities
+    .filter((entity) => entity.isEnabled)
+    .forEach((entity, i) => {
+      const layerLiteral = i18n.t('controlLayers.layer_one');
+      const layerNumber = i + 1;
+      const layerType = i18n.t(LAYER_TYPE_TO_TKEY[entity.type]);
+      const prefix = `${layerLiteral} #${layerNumber} (${layerType})`;
+      const problems: string[] = [];
+
+      if (problems.length) {
+        const content = upperFirst(problems.join(', '));
+        reasons.push({ prefix, content });
+      }
+    });
+
+  return reasons;
+};
+
+export const buildSelectReasonsWhyCannotEnqueueCanvasTab = (arg: {
+  isConnected: boolean;
+  canvasIsFiltering: boolean;
+  canvasIsTransforming: boolean;
+  canvasIsRasterizing: boolean;
+  canvasIsCompositing: boolean;
+  canvasIsSelectingObject: boolean;
+}) => {
+  const {
+    isConnected,
+    canvasIsFiltering,
+    canvasIsTransforming,
+    canvasIsRasterizing,
+    canvasIsCompositing,
+    canvasIsSelectingObject,
+  } = arg;
+
+  return createSelector(
+    selectCanvasSlice,
+    selectParamsSlice,
+    selectDynamicPromptsSlice,
+    (canvas, params, dynamicPrompts) =>
+      getReasonsWhyCannotEnqueueCanvasTab({
+        isConnected,
+        canvas,
+        params,
+        dynamicPrompts,
+        canvasIsFiltering,
+        canvasIsTransforming,
+        canvasIsRasterizing,
+        canvasIsCompositing,
+        canvasIsSelectingObject,
+      })
+  );
+};
+
+export const buildSelectIsReadyToEnqueueCanvasTab = (arg: {
+  isConnected: boolean;
+  canvasIsFiltering: boolean;
+  canvasIsTransforming: boolean;
+  canvasIsRasterizing: boolean;
+  canvasIsCompositing: boolean;
+  canvasIsSelectingObject: boolean;
+}) => {
+  const {
+    isConnected,
+    canvasIsFiltering,
+    canvasIsTransforming,
+    canvasIsRasterizing,
+    canvasIsCompositing,
+    canvasIsSelectingObject,
+  } = arg;
+
+  return createSelector(
+    selectCanvasSlice,
+    selectParamsSlice,
+    selectDynamicPromptsSlice,
+    (canvas, params, dynamicPrompts) =>
+      getReasonsWhyCannotEnqueueCanvasTab({
+        isConnected,
+        canvas,
+        params,
+        dynamicPrompts,
+        canvasIsFiltering,
+        canvasIsTransforming,
+        canvasIsRasterizing,
+        canvasIsCompositing,
+        canvasIsSelectingObject,
+      }).length === 0
+  );
+};
+
+export const buildSelectReasonsWhyCannotEnqueueUpscaleTab = (arg: { isConnected: boolean }) => {
+  const { isConnected } = arg;
+  return createSelector(selectUpscaleSlice, selectConfigSlice, selectParamsSlice, (upscale, config, params) =>
+    getReasonsWhyCannotEnqueueUpscaleTab({ isConnected, upscale, config, params })
+  );
+};
+
+export const buildSelectIsReadyToEnqueueUpscaleTab = (arg: { isConnected: boolean }) => {
+  const { isConnected } = arg;
+
+  return createSelector(
+    selectUpscaleSlice,
+    selectConfigSlice,
+    selectParamsSlice,
+    (upscale, config, params) =>
+      getReasonsWhyCannotEnqueueUpscaleTab({ isConnected, upscale, config, params }).length === 0
+  );
+};
+
+export const buildSelectReasonsWhyCannotEnqueueWorkflowsTab = (arg: { isConnected: boolean; templates: Templates }) => {
+  const { isConnected, templates } = arg;
+
+  return createSelector(selectNodesSlice, selectWorkflowSettingsSlice, (nodes, workflowSettings) =>
+    getReasonsWhyCannotEnqueueWorkflowsTab({
+      isConnected,
+      nodes,
+      workflowSettings,
+      templates,
+    })
+  );
+};
+
+export const buildSelectIsReadyToEnqueueWorkflowsTab = (arg: { isConnected: boolean; templates: Templates }) => {
+  const { isConnected, templates } = arg;
+
+  return createSelector(
+    selectNodesSlice,
+    selectWorkflowSettingsSlice,
+    (nodes, workflowSettings) =>
+      getReasonsWhyCannotEnqueueWorkflowsTab({
+        isConnected,
+        nodes,
+        workflowSettings,
+        templates,
+      }).length === 0
+  );
+};
+
+export const selectPromptsCount = createSelector(
+  selectParamsSlice,
+  selectDynamicPromptsSlice,
+  (params, dynamicPrompts) => (getShouldProcessPrompt(params.positivePrompt) ? dynamicPrompts.prompts.length : 1)
+);
+
+export const selectWorkflowsBatchSize = createSelector(selectNodesSlice, ({ nodes }) =>
+  // The batch size is the product of all batch nodes' collection sizes
+  nodes.filter(isInvocationNode).reduce((batchSize, node) => {
+    if (!isImageFieldCollectionInputInstance(node.data.inputs.images)) {
+      return batchSize;
+    }
+    // If the batch size is not set, default to 1
+    batchSize = batchSize || 1;
+    // Multiply the batch size by the number of images in the batch
+    batchSize = batchSize * (node.data.inputs.images.value?.length ?? 0);
+
+    return batchSize;
+  }, 0)
+);
--- a/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
@@ -4,7 +4,7 @@ import { ToolChooser } from 'features/controlLayers/components/Tool/ToolChooser'
 import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { useClearQueue } from 'features/queue/components/ClearQueueConfirmationAlertDialog';
-import { QueueButtonTooltip } from 'features/queue/components/QueueButtonTooltip';
+import { InvokeButtonTooltip } from 'features/queue/components/InvokeButtonTooltip/InvokeButtonTooltip';
 import { useCancelCurrentQueueItem } from 'features/queue/hooks/useCancelCurrentQueueItem';
 import { useInvoke } from 'features/queue/hooks/useInvoke';
 import type { UsePanelReturn } from 'features/ui/hooks/usePanel';
@@ -62,7 +62,7 @@ const FloatingSidePanelButtons = (props: Props) => {
            flexGrow={1}
          />
        </Tooltip>
-        <QueueButtonTooltip prepend={shift} placement="end">
+        <InvokeButtonTooltip prepend={shift} placement="end">
          <IconButton
            aria-label={t('queue.queueBack')}
            onClick={shift ? queue.queueFront : queue.queueBack}
@@ -72,7 +72,7 @@ const FloatingSidePanelButtons = (props: Props) => {
            colorScheme="invokeYellow"
            flexGrow={1}
          />
-        </QueueButtonTooltip>
+        </InvokeButtonTooltip>
        <Tooltip label={t('queue.cancelTooltip')} placement="end">
          <IconButton
            isDisabled={cancelCurrent.isDisabled}