selectors refactored

Attila Cseh · Attila Cseh · commit 373c3b728848 · 2025-10-12T12:45:11.000+02:00
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelSelected.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelSelected.ts
@@ -2,10 +2,7 @@ import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/store';
 import { modelChanged } from 'features/controlLayers/store/actions';
 import { bboxSyncedToOptimalDimension, rgRefImageModelChanged } from 'features/controlLayers/store/canvasSlice';
-import {
-  buildSelectIsStagingBySessionId,
-  selectActiveCanvasStagingAreaSessionId,
-} from 'features/controlLayers/store/canvasStagingAreaSlice';
+import { selectActiveCanvasIsStaging } from 'features/controlLayers/store/canvasStagingAreaSlice';
 import { loraIsEnabledChanged, selectAddedLoRAs } from 'features/controlLayers/store/lorasSlice';
 import { selectActiveTabParams, syncedToOptimalDimension, vaeSelected } from 'features/controlLayers/store/paramsSlice';
 import { refImageModelChanged, selectReferenceImageEntities } from 'features/controlLayers/store/refImagesSlice';
@@ -165,9 +162,7 @@ export const addModelSelectedListener = (startAppListening: AppStartListening) =
       if (modelBase !== params.model?.base) {
         // Sync generate tab settings whenever the model base changes
         dispatch(syncedToOptimalDimension());
-        const sessionId = selectActiveCanvasStagingAreaSessionId(state);
-        const selectIsStaging = buildSelectIsStagingBySessionId(sessionId);
-        const isStaging = selectIsStaging(state);
+        const isStaging = selectActiveCanvasIsStaging(state);
         if (!isStaging) {
           // Canvas tab only syncs if not staging
           dispatch(bboxSyncedToOptimalDimension());
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/setDefaultSettings.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/setDefaultSettings.ts
@@ -1,10 +1,7 @@
 import type { AppStartListening } from 'app/store/store';
 import { isNil } from 'es-toolkit';
 import { bboxHeightChanged, bboxWidthChanged } from 'features/controlLayers/store/canvasSlice';
-import {
-  buildSelectIsStagingBySessionId,
-  selectActiveCanvasStagingAreaSessionId,
-} from 'features/controlLayers/store/canvasStagingAreaSlice';
+import { selectActiveCanvasIsStaging } from 'features/controlLayers/store/canvasStagingAreaSlice';
 import {
   heightChanged,
   selectActiveTabParams,
@@ -120,9 +117,7 @@ export const addSetDefaultSettingsListener = (startAppListening: AppStartListeni
         }
         const setSizeOptions = { updateAspectRatio: true, clamp: true };
 
-        const sessionId = selectActiveCanvasStagingAreaSessionId(state);
-        const selectIsStaging = buildSelectIsStagingBySessionId(sessionId);
-        const isStaging = selectIsStaging(state);
+        const isStaging = selectActiveCanvasIsStaging(state);
 
         const activeTab = selectActiveTab(getState());
         if (activeTab === 'generate') {
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImageImage.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImageImage.tsx
@@ -4,7 +4,7 @@ import { objectEquals } from '@observ33r/object-equals';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { useAppDispatch, useAppSelector, useAppStore } from 'app/store/storeHooks';
 import { UploadImageIconButton } from 'common/hooks/useImageUploadButton';
-import { useCanvasIsStaging } from 'features/controlLayers/hooks/useCanvasIsStaging';
+import { useActiveCanvasIsStaging } from 'features/controlLayers/hooks/useCanvasIsStaging';
 import { bboxSizeOptimized, bboxSizeRecalled } from 'features/controlLayers/store/canvasSlice';
 import { sizeOptimized, sizeRecalled } from 'features/controlLayers/store/paramsSlice';
 import { selectActiveTab } from 'features/controlLayers/store/selectors';
@@ -42,7 +42,7 @@ export const RefImageImage = memo(
     const dispatch = useAppDispatch();
     const isConnected = useStore($isConnected);
     const tab = useAppSelector(selectActiveTab);
-    const isStaging = useCanvasIsStaging();
+    const isStaging = useActiveCanvasIsStaging();
     const imageWithDims = image?.crop?.image ?? image?.original.image ?? null;
     const croppedImageDTOReq = useGetImageDTOQuery(image?.crop?.image?.image_name ?? skipToken);
     const originalImageDTOReq = useGetImageDTOQuery(image?.original.image.image_name ?? skipToken);
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceRefImageImage.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceRefImageImage.tsx
@@ -3,7 +3,7 @@ import { useStore } from '@nanostores/react';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { useAppDispatch, useAppSelector, useAppStore } from 'app/store/storeHooks';
 import { UploadImageIconButton } from 'common/hooks/useImageUploadButton';
-import { useCanvasIsStaging } from 'features/controlLayers/hooks/useCanvasIsStaging';
+import { useActiveCanvasIsStaging } from 'features/controlLayers/hooks/useCanvasIsStaging';
 import { bboxSizeOptimized, bboxSizeRecalled } from 'features/controlLayers/store/canvasSlice';
 import { sizeOptimized, sizeRecalled } from 'features/controlLayers/store/paramsSlice';
 import { selectActiveTab } from 'features/controlLayers/store/selectors';
@@ -32,7 +32,7 @@ export const RegionalGuidanceRefImageImage = memo(({ image, onChangeImage, dndTa
   const dispatch = useAppDispatch();
   const isConnected = useStore($isConnected);
   const tab = useAppSelector(selectActiveTab);
-  const isStaging = useCanvasIsStaging();
+  const isStaging = useActiveCanvasIsStaging();
   const { currentData: imageDTO, isError } = useGetImageDTOQuery(image?.image_name ?? skipToken);
   const handleResetControlImage = useCallback(() => {
     onChangeImage(null);
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/context.tsx b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/context.tsx
@@ -6,9 +6,9 @@ import {
 } from 'features/controlLayers/store/canvasSettingsSlice';
 import { rasterLayerAdded } from 'features/controlLayers/store/canvasSlice';
 import {
-  buildSelectCanvasQueueItemsBySessionId,
   canvasQueueItemDiscarded,
   canvasSessionReset,
+  selectActiveCanvasQueueItems,
   selectActiveCanvasStagingAreaSessionId,
 } from 'features/controlLayers/store/canvasStagingAreaSlice';
 import { selectBboxRect, selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors';
@@ -31,7 +31,6 @@ export const StagingAreaContextProvider = memo(({ children }: PropsWithChildren)
   const store = useAppStore();
   const socket = useStore($socket);
   const sessionId = useAppSelector(selectActiveCanvasStagingAreaSessionId);
-  const selectQueueItems = useMemo(() => buildSelectCanvasQueueItemsBySessionId(sessionId), [sessionId]);
 
   const stagingAreaAppApi = useMemo<StagingAreaAppApi>(() => {
     const _stagingAreaAppApi: StagingAreaAppApi = {
@@ -54,7 +53,7 @@ export const StagingAreaContextProvider = memo(({ children }: PropsWithChildren)
       onItemsChanged: (handler) => {
         let prev: S['SessionQueueItem'][] = [];
         return store.subscribe(() => {
-          const next = selectQueueItems(store.getState());
+          const next = selectActiveCanvasQueueItems(store.getState());
           if (prev !== next) {
             prev = next;
             handler(next);
@@ -99,7 +98,7 @@ export const StagingAreaContextProvider = memo(({ children }: PropsWithChildren)
     };
 
     return _stagingAreaAppApi;
-  }, [sessionId, selectQueueItems, socket, store]);
+  }, [sessionId, socket, store]);
 
   const [stagingAreaApi] = useState(() => new StagingAreaApi());
 
diff --git a/invokeai/frontend/web/src/features/controlLayers/hooks/useCanvasIsStaging.ts b/invokeai/frontend/web/src/features/controlLayers/hooks/useCanvasIsStaging.ts
@@ -1,13 +1,6 @@
 import { useAppSelector } from 'app/store/storeHooks';
-import {
-  buildSelectIsStagingBySessionId,
-  selectActiveCanvasStagingAreaSessionId,
-} from 'features/controlLayers/store/canvasStagingAreaSlice';
-import { useMemo } from 'react';
+import { selectActiveCanvasIsStaging } from 'features/controlLayers/store/canvasStagingAreaSlice';
 
-export const useCanvasIsStaging = () => {
-  const sessionId = useAppSelector(selectActiveCanvasStagingAreaSessionId);
-  const selectIsStagingBySessionIdSelector = useMemo(() => buildSelectIsStagingBySessionId(sessionId), [sessionId]);
-
-  return useAppSelector(selectIsStagingBySessionIdSelector);
+export const useActiveCanvasIsStaging = () => {
+  return useAppSelector(selectActiveCanvasIsStaging);
 };
diff --git a/invokeai/frontend/web/src/features/controlLayers/store/canvasStagingAreaSlice.ts b/invokeai/frontend/web/src/features/controlLayers/store/canvasStagingAreaSlice.ts
@@ -48,48 +48,45 @@ export const isCanvasStagingAreaStateAction = isAnyOf(...Object.values(canvasSta
 
 export const { canvasSessionReset, canvasQueueItemDiscarded } = canvasStagingAreaState.actions;
 
-const findCanvasStagingAreaByCanvasId = (state: RootState, canvasId: string) => {
+export const selectCanvasStagingAreaByCanvasId = (state: RootState, canvasId: string) => {
   const instance = state.canvas.canvases[canvasId];
   assert(instance, 'Canvas does not exist');
   return instance.staging;
 };
-export const selectCanvasStagingAreaByCanvasId = (state: RootState, canvasId: string) =>
-  findCanvasStagingAreaByCanvasId(state, canvasId);
-const selectActiveCanvasStagingArea = (state: RootState) => {
-  const canvasId = selectActiveCanvasId(state);
-  return findCanvasStagingAreaByCanvasId(state, canvasId);
-};
 const selectCanvasStagingAreaBySessionId = (state: RootState, sessionId: string) => {
   const instance = Object.values(state.canvas.canvases).find((canvas) => canvas.staging.canvasSessionId === sessionId);
   assert(instance, 'Canvas does not exist');
   return instance.staging;
 };
-export const selectCanvasStagingAreaSessionId = (state: RootState, canvasId: string) => {
-  const session = selectCanvasStagingAreaByCanvasId(state, canvasId);
-  return session.canvasSessionId;
+const selectActiveCanvasStagingArea = (state: RootState) => {
+  const canvasId = selectActiveCanvasId(state);
+  return selectCanvasStagingAreaByCanvasId(state, canvasId);
 };
 export const selectActiveCanvasStagingAreaSessionId = (state: RootState) => {
   const session = selectActiveCanvasStagingArea(state);
   return session.canvasSessionId;
 };
-const selectCanvasStagingAreaDiscardedItemsBySessionId = (state: RootState, sessionId: string) => {
-  const session = selectCanvasStagingAreaBySessionId(state, sessionId);
-  return session.canvasDiscardedQueueItems;
-};
-export const buildSelectCanvasQueueItemsBySessionId = (sessionId: string) =>
-  createSelector(
-    queueApi.endpoints.listAllQueueItems.select({ destination: sessionId }),
-    (state: RootState) => selectCanvasStagingAreaDiscardedItemsBySessionId(state, sessionId),
-    ({ data }, discardedItems) => {
-      if (!data) {
-        return EMPTY_ARRAY;
-      }
-      return data.filter(
-        ({ status, item_id }) => status !== 'canceled' && status !== 'failed' && !discardedItems?.includes(item_id)
-      );
+const selectCanvasQueueItemsBySessionId = createSelector(
+  (state: RootState, sessionId: string) =>
+    queueApi.endpoints.listAllQueueItems.select({ destination: sessionId })(state),
+  (state: RootState, sessionId: string) => selectCanvasStagingAreaBySessionId(state, sessionId),
+  ({ data }, session) => {
+    if (!data) {
+      return EMPTY_ARRAY;
     }
-  );
-export const buildSelectIsStagingBySessionId = (sessionId: string) =>
-  createSelector(buildSelectCanvasQueueItemsBySessionId(sessionId), (queueItems) => {
-    return queueItems.length > 0;
-  });
+    return data.filter(
+      ({ status, item_id }) =>
+        status !== 'canceled' && status !== 'failed' && !session.canvasDiscardedQueueItems?.includes(item_id)
+    );
+  }
+);
+export const selectActiveCanvasQueueItems = (state: RootState) => {
+  const session = selectActiveCanvasStagingArea(state);
+
+  return selectCanvasQueueItemsBySessionId(state, session.canvasSessionId);
+};
+export const selectActiveCanvasIsStaging = (state: RootState) => {
+  const queueItems = selectActiveCanvasQueueItems(state);
+
+  return queueItems.length > 0;
+};
diff --git a/invokeai/frontend/web/src/features/gallery/hooks/useEditImage.ts b/invokeai/frontend/web/src/features/gallery/hooks/useEditImage.ts
@@ -1,6 +1,6 @@
 import { useAppStore } from 'app/store/storeHooks';
 import { useCanvasManagerSafe } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
-import { useCanvasIsStaging } from 'features/controlLayers/hooks/useCanvasIsStaging';
+import { useActiveCanvasIsStaging } from 'features/controlLayers/hooks/useCanvasIsStaging';
 import { newCanvasFromImage } from 'features/imageActions/actions';
 import { toast } from 'features/toast/toast';
 import { navigationApi } from 'features/ui/layouts/navigation-api';
@@ -14,7 +14,7 @@ export const useEditImage = (imageDTO?: ImageDTO | null) => {
 
   const { getState, dispatch } = useAppStore();
   const canvasManager = useCanvasManagerSafe();
-  const isStaging = useCanvasIsStaging();
+  const isStaging = useActiveCanvasIsStaging();
 
   const isEnabled = useMemo(() => {
     if (!imageDTO) {
diff --git a/invokeai/frontend/web/src/features/gallery/hooks/useRecallAllImageMetadata.ts b/invokeai/frontend/web/src/features/gallery/hooks/useRecallAllImageMetadata.ts
@@ -1,5 +1,5 @@
 import { useAppSelector, useAppStore } from 'app/store/storeHooks';
-import { useCanvasIsStaging } from 'features/controlLayers/hooks/useCanvasIsStaging';
+import { useActiveCanvasIsStaging } from 'features/controlLayers/hooks/useCanvasIsStaging';
 import { selectActiveTab } from 'features/controlLayers/store/selectors';
 import { ImageMetadataHandlers, MetadataUtils } from 'features/metadata/parsing';
 import { useCallback, useMemo } from 'react';
@@ -12,7 +12,7 @@ export const useRecallAll = (imageDTO: ImageDTO) => {
   const store = useAppStore();
   const tab = useAppSelector(selectActiveTab);
   const { metadata, isLoading } = useDebouncedMetadata(imageDTO.image_name);
-  const isStaging = useCanvasIsStaging();
+  const isStaging = useActiveCanvasIsStaging();
   const clearStylePreset = useClearStylePresetWithToast();
 
   const isEnabled = useMemo(() => {
diff --git a/invokeai/frontend/web/src/features/gallery/hooks/useRecallDimensions.ts b/invokeai/frontend/web/src/features/gallery/hooks/useRecallDimensions.ts
@@ -1,5 +1,5 @@
 import { useAppSelector, useAppStore } from 'app/store/storeHooks';
-import { useCanvasIsStaging } from 'features/controlLayers/hooks/useCanvasIsStaging';
+import { useActiveCanvasIsStaging } from 'features/controlLayers/hooks/useCanvasIsStaging';
 import { selectActiveTab } from 'features/controlLayers/store/selectors';
 import { MetadataUtils } from 'features/metadata/parsing';
 import { useCallback, useMemo } from 'react';
@@ -8,7 +8,7 @@ import type { ImageDTO } from 'services/api/types';
 export const useRecallDimensions = (imageDTO: ImageDTO) => {
   const store = useAppStore();
   const tab = useAppSelector(selectActiveTab);
-  const isStaging = useCanvasIsStaging();
+  const isStaging = useActiveCanvasIsStaging();
 
   const isEnabled = useMemo(() => {
     if (tab !== 'canvas' && tab !== 'generate') {
diff --git a/invokeai/frontend/web/src/features/gallery/hooks/useRecallRemix.ts b/invokeai/frontend/web/src/features/gallery/hooks/useRecallRemix.ts
@@ -1,5 +1,5 @@
 import { useAppSelector, useAppStore } from 'app/store/storeHooks';
-import { useCanvasIsStaging } from 'features/controlLayers/hooks/useCanvasIsStaging';
+import { useActiveCanvasIsStaging } from 'features/controlLayers/hooks/useCanvasIsStaging';
 import { selectActiveTab } from 'features/controlLayers/store/selectors';
 import { ImageMetadataHandlers, MetadataUtils } from 'features/metadata/parsing';
 import { useCallback, useMemo } from 'react';
@@ -11,7 +11,7 @@ import { useClearStylePresetWithToast } from './useClearStylePresetWithToast';
 export const useRecallRemix = (imageDTO: ImageDTO) => {
   const store = useAppStore();
   const tab = useAppSelector(selectActiveTab);
-  const isStaging = useCanvasIsStaging();
+  const isStaging = useActiveCanvasIsStaging();
   const clearStylePreset = useClearStylePresetWithToast();
 
   const { metadata, isLoading } = useDebouncedMetadata(imageDTO.image_name);
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/graphBuilderUtils.ts b/invokeai/frontend/web/src/features/nodes/util/graph/graphBuilderUtils.ts
@@ -2,7 +2,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import type { RootState } from 'app/store/store';
 import { getPrefixedId } from 'features/controlLayers/konva/util';
 import { selectSaveAllImagesToGallery } from 'features/controlLayers/store/canvasSettingsSlice';
-import { selectCanvasStagingAreaSessionId } from 'features/controlLayers/store/canvasStagingAreaSlice';
+import { selectCanvasStagingAreaByCanvasId } from 'features/controlLayers/store/canvasStagingAreaSlice';
 import {
   selectActiveTabParams,
   selectImg2imgStrength,
@@ -73,7 +73,9 @@ export const selectCanvasDestination = (state: RootState, canvasId: string) => {
     return 'canvas';
   }
 
-  return selectCanvasStagingAreaSessionId(state, canvasId);
+  const session = selectCanvasStagingAreaByCanvasId(state, canvasId);
+
+  return session.canvasSessionId;
 };
 
 /**
diff --git a/invokeai/frontend/web/src/features/parameters/components/Bbox/BboxAspectRatioSelect.tsx b/invokeai/frontend/web/src/features/parameters/components/Bbox/BboxAspectRatioSelect.tsx
@@ -1,7 +1,7 @@
 import { FormControl, FormLabel, Select } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
-import { useCanvasIsStaging } from 'features/controlLayers/hooks/useCanvasIsStaging';
+import { useActiveCanvasIsStaging } from 'features/controlLayers/hooks/useCanvasIsStaging';
 import { bboxAspectRatioIdChanged } from 'features/controlLayers/store/canvasSlice';
 import {
   selectIsChatGPT4o,
@@ -26,7 +26,7 @@ export const BboxAspectRatioSelect = memo(() => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const id = useAppSelector(selectAspectRatioID);
-  const isStaging = useCanvasIsStaging();
+  const isStaging = useActiveCanvasIsStaging();
   const isImagen3 = useAppSelector(selectIsImagen3);
   const isChatGPT4o = useAppSelector(selectIsChatGPT4o);
   const isImagen4 = useAppSelector(selectIsImagen4);
diff --git a/invokeai/frontend/web/src/features/parameters/components/Bbox/BboxSwapDimensionsButton.tsx b/invokeai/frontend/web/src/features/parameters/components/Bbox/BboxSwapDimensionsButton.tsx
@@ -1,6 +1,6 @@
 import { IconButton } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
-import { useCanvasIsStaging } from 'features/controlLayers/hooks/useCanvasIsStaging';
+import { useActiveCanvasIsStaging } from 'features/controlLayers/hooks/useCanvasIsStaging';
 import { bboxDimensionsSwapped } from 'features/controlLayers/store/canvasSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -9,7 +9,7 @@ import { PiArrowsDownUpBold } from 'react-icons/pi';
 export const BboxSwapDimensionsButton = memo(() => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
-  const isStaging = useCanvasIsStaging();
+  const isStaging = useActiveCanvasIsStaging();
   const onClick = useCallback(() => {
     dispatch(bboxDimensionsSwapped());
   }, [dispatch]);
diff --git a/invokeai/frontend/web/src/features/parameters/components/Bbox/use-is-bbox-size-locked.ts b/invokeai/frontend/web/src/features/parameters/components/Bbox/use-is-bbox-size-locked.ts
@@ -1,9 +1,9 @@
 import { useAppSelector } from 'app/store/storeHooks';
-import { useCanvasIsStaging } from 'features/controlLayers/hooks/useCanvasIsStaging';
+import { useActiveCanvasIsStaging } from 'features/controlLayers/hooks/useCanvasIsStaging';
 import { selectIsApiBaseModel } from 'features/controlLayers/store/paramsSlice';
 
 export const useIsBboxSizeLocked = () => {
-  const isStaging = useCanvasIsStaging();
+  const isStaging = useActiveCanvasIsStaging();
   const isApiModel = useAppSelector(selectIsApiBaseModel);
   return isApiModel || isStaging;
 };
diff --git a/invokeai/frontend/web/src/features/ui/layouts/LaunchpadEditImageButton.tsx b/invokeai/frontend/web/src/features/ui/layouts/LaunchpadEditImageButton.tsx
@@ -1,7 +1,7 @@
 import { Flex, Heading, Icon, Text } from '@invoke-ai/ui-library';
 import { useAppStore } from 'app/store/storeHooks';
 import { useImageUploadButton } from 'common/hooks/useImageUploadButton';
-import { useCanvasIsStaging } from 'features/controlLayers/hooks/useCanvasIsStaging';
+import { useActiveCanvasIsStaging } from 'features/controlLayers/hooks/useCanvasIsStaging';
 import { newCanvasFromImageDndTarget } from 'features/dnd/dnd';
 import { DndDropTarget } from 'features/dnd/DndDropTarget';
 import { newCanvasFromImage } from 'features/imageActions/actions';
@@ -18,7 +18,7 @@ const dndTargetData = newCanvasFromImageDndTarget.getData(NEW_CANVAS_OPTIONS);
 export const LaunchpadEditImageButton = memo((props: { extraAction?: () => void }) => {
   const { t } = useTranslation();
   const { getState, dispatch } = useAppStore();
-  const isStaging = useCanvasIsStaging();
+  const isStaging = useActiveCanvasIsStaging();
 
   const onUpload = useCallback(
     (imageDTO: ImageDTO) => {
diff --git a/invokeai/frontend/web/src/features/ui/layouts/LaunchpadGenerateFromTextButton.tsx b/invokeai/frontend/web/src/features/ui/layouts/LaunchpadGenerateFromTextButton.tsx
@@ -1,6 +1,6 @@
 import { Flex, Heading, Icon, Text } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
-import { useCanvasIsStaging } from 'features/controlLayers/hooks/useCanvasIsStaging';
+import { useActiveCanvasIsStaging } from 'features/controlLayers/hooks/useCanvasIsStaging';
 import { selectActiveTab } from 'features/controlLayers/store/selectors';
 import { LaunchpadButton } from 'features/ui/layouts/LaunchpadButton';
 import { memo, useCallback } from 'react';
@@ -18,7 +18,7 @@ const focusOnPrompt = () => {
 export const LaunchpadGenerateFromTextButton = memo((props: { extraAction?: () => void }) => {
   const { t } = useTranslation();
   const tab = useAppSelector(selectActiveTab);
-  const isStaging = useCanvasIsStaging();
+  const isStaging = useActiveCanvasIsStaging();
 
   const onClick = useCallback(() => {
     focusOnPrompt();
diff --git a/invokeai/frontend/web/src/features/ui/layouts/LaunchpadUseALayoutImageButton.tsx b/invokeai/frontend/web/src/features/ui/layouts/LaunchpadUseALayoutImageButton.tsx
diff --git a/invokeai/frontend/web/src/features/ui/layouts/StagingArea.tsx b/invokeai/frontend/web/src/features/ui/layouts/StagingArea.tsx
