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.

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;

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',
   });