feat, fix: canvas v2 followups 1

invokeai/frontend/web/.eslintrc.js

@@ -16,6 +16,14 @@ module.exports = {
     'no-promise-executor-return': 'error',
     // https://eslint.org/docs/latest/rules/require-await
     'require-await': 'error',
+    'no-restricted-properties': [
+      'error',
+      {
+        object: 'crypto',
+        property: 'randomUUID',
+        message: 'Use of crypto.randomUUID is not allowed as it is not available in all browsers.',
+      },
+    ],
   },
   overrides: [
     /**

invokeai/frontend/web/public/locales/en.json

@@ -1656,6 +1656,7 @@
         "storeNotInitialized": "Store is not initialized"
     },
     "controlLayers": {
+        "autoPreviewFilter": "Auto Preview",
         "bookmark": "Bookmark for Quick Switch",
         "fitBboxToLayers": "Fit Bbox To Layers",
         "removeBookmark": "Remove Bookmark",

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts

@@ -9,6 +9,7 @@ import { addBatchEnqueuedListener } from 'app/store/middleware/listenerMiddlewar
 import { addDeleteBoardAndImagesFulfilledListener } from 'app/store/middleware/listenerMiddleware/listeners/boardAndImagesDeleted';
 import { addBoardIdSelectedListener } from 'app/store/middleware/listenerMiddleware/listeners/boardIdSelected';
 import { addBulkDownloadListeners } from 'app/store/middleware/listenerMiddleware/listeners/bulkDownload';
+import { addCancellationsListeners } from 'app/store/middleware/listenerMiddleware/listeners/cancellationsListeners';
 import { addEnqueueRequestedLinear } from 'app/store/middleware/listenerMiddleware/listeners/enqueueRequestedLinear';
 import { addEnqueueRequestedNodes } from 'app/store/middleware/listenerMiddleware/listeners/enqueueRequestedNodes';
 import { addGalleryImageClickedListener } from 'app/store/middleware/listenerMiddleware/listeners/galleryImageClicked';
@@ -119,3 +120,5 @@ addDynamicPromptsListener(startAppListening);
 
 addSetDefaultSettingsListener(startAppListening);
 // addControlAdapterPreprocessor(startAppListening);
+
+addCancellationsListeners(startAppListening);

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/addCommitStagingAreaImageListener.ts

@@ -12,7 +12,6 @@ import { imageDTOToImageObject } from 'features/controlLayers/store/types';
 import { toast } from 'features/toast/toast';
 import { t } from 'i18next';
 import { queueApi } from 'services/api/endpoints/queue';
-import { $lastCanvasProgressEvent } from 'services/events/setEventListeners';
 import { assert } from 'tsafe';
 
 const log = logger('canvas');
@@ -33,8 +32,6 @@ export const addStagingListeners = (startAppListening: AppStartListening) => {
         const { canceled } = await req.unwrap();
         req.reset();
 
-        $lastCanvasProgressEvent.set(null);
-
         if (canceled > 0) {
           log.debug(`Canceled ${canceled} canvas batches`);
           toast({

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/cancellationsListeners.ts

@@ -0,0 +1,137 @@
+import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
+import { $lastCanvasProgressEvent } from 'features/controlLayers/store/canvasSlice';
+import { queueApi } from 'services/api/endpoints/queue';
+
+/**
+ * To prevent a race condition where a progress event arrives after a successful cancellation, we need to keep track of
+ * cancellations:
+ * - In the route handlers above, we track and update the cancellations object
+ * - When the user queues a, we should reset the cancellations, also handled int he route handlers above
+ * - When we get a progress event, we should check if the event is cancelled before setting the event
+ *
+ * We have a few ways that cancellations are effected, so we need to track them all:
+ * - by queue item id (in this case, we will compare the session_id and not the item_id)
+ * - by batch id
+ * - by destination
+ * - by clearing the queue
+ */
+type Cancellations = {
+  sessionIds: Set<string>;
+  batchIds: Set<string>;
+  destinations: Set<string>;
+  clearQueue: boolean;
+};
+
+const resetCancellations = (): void => {
+  cancellations.clearQueue = false;
+  cancellations.sessionIds.clear();
+  cancellations.batchIds.clear();
+  cancellations.destinations.clear();
+};
+
+const cancellations: Cancellations = {
+  sessionIds: new Set(),
+  batchIds: new Set(),
+  destinations: new Set(),
+  clearQueue: false,
+} as Readonly<Cancellations>;
+
+/**
+ * Checks if an item is cancelled, used to prevent race conditions with event handling.
+ *
+ * To use this, provide the session_id, batch_id and destination from the event payload.
+ */
+export const getIsCancelled = (item: {
+  session_id: string;
+  batch_id: string;
+  destination?: string | null;
+}): boolean => {
+  if (cancellations.clearQueue) {
+    return true;
+  }
+  if (cancellations.sessionIds.has(item.session_id)) {
+    return true;
+  }
+  if (cancellations.batchIds.has(item.batch_id)) {
+    return true;
+  }
+  if (item.destination && cancellations.destinations.has(item.destination)) {
+    return true;
+  }
+  return false;
+};
+
+export const addCancellationsListeners = (startAppListening: AppStartListening) => {
+  // When we get a cancellation, we may need to clear the last progress event - next few listeners handle those cases.
+  // Maybe we could use the `getIsCancelled` util here, but I think that could introduce _another_ race condition...
+  startAppListening({
+    matcher: queueApi.endpoints.enqueueBatch.matchFulfilled,
+    effect: () => {
+      resetCancellations();
+    },
+  });
+
+  startAppListening({
+    matcher: queueApi.endpoints.cancelByBatchDestination.matchFulfilled,
+    effect: (action) => {
+      cancellations.destinations.add(action.meta.arg.originalArgs.destination);
+
+      const event = $lastCanvasProgressEvent.get();
+      if (!event) {
+        return;
+      }
+      const { session_id, batch_id, destination } = event;
+      if (getIsCancelled({ session_id, batch_id, destination })) {
+        $lastCanvasProgressEvent.set(null);
+      }
+    },
+  });
+
+  startAppListening({
+    matcher: queueApi.endpoints.cancelQueueItem.matchFulfilled,
+    effect: (action) => {
+      cancellations.sessionIds.add(action.payload.session_id);
+
+      const event = $lastCanvasProgressEvent.get();
+      if (!event) {
+        return;
+      }
+      const { session_id, batch_id, destination } = event;
+      if (getIsCancelled({ session_id, batch_id, destination })) {
+        $lastCanvasProgressEvent.set(null);
+      }
+    },
+  });
+
+  startAppListening({
+    matcher: queueApi.endpoints.cancelByBatchIds.matchFulfilled,
+    effect: (action) => {
+      for (const batch_id of action.meta.arg.originalArgs.batch_ids) {
+        cancellations.batchIds.add(batch_id);
+      }
+      const event = $lastCanvasProgressEvent.get();
+      if (!event) {
+        return;
+      }
+      const { session_id, batch_id, destination } = event;
+      if (getIsCancelled({ session_id, batch_id, destination })) {
+        $lastCanvasProgressEvent.set(null);
+      }
+    },
+  });
+
+  startAppListening({
+    matcher: queueApi.endpoints.clearQueue.matchFulfilled,
+    effect: () => {
+      cancellations.clearQueue = true;
+      const event = $lastCanvasProgressEvent.get();
+      if (!event) {
+        return;
+      }
+      const { session_id, batch_id, destination } = event;
+      if (getIsCancelled({ session_id, batch_id, destination })) {
+        $lastCanvasProgressEvent.set(null);
+      }
+    },
+  });
+};

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDropped.ts

@@ -1,6 +1,7 @@
 import { createAction } from '@reduxjs/toolkit';
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
+import { selectDefaultControlAdapter } from 'features/controlLayers/hooks/addLayerHooks';
 import {
   controlLayerAdded,
   ipaImageChanged,
@@ -103,11 +104,14 @@ export const addImageDroppedListener = (startAppListening: AppStartListening) =>
         activeData.payloadType === 'IMAGE_DTO' &&
         activeData.payload.imageDTO
       ) {
+        const state = getState();
         const imageObject = imageDTOToImageObject(activeData.payload.imageDTO);
-        const { x, y } = selectCanvasSlice(getState()).bbox.rect;
+        const { x, y } = selectCanvasSlice(state).bbox.rect;
+        const defaultControlAdapter = selectDefaultControlAdapter(state);
         const overrides: Partial<CanvasControlLayerState> = {
           objects: [imageObject],
           position: { x, y },
+          controlAdapter: defaultControlAdapter,
         };
         dispatch(controlLayerAdded({ overrides, isSelected: true }));
         return;

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUploaded.ts

@@ -2,6 +2,7 @@ import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
 import { ipaImageChanged, rgIPAdapterImageChanged } from 'features/controlLayers/store/canvasSlice';
 import { selectListBoardsQueryArgs } from 'features/gallery/store/gallerySelectors';
+import { boardIdSelected, galleryViewChanged } from 'features/gallery/store/gallerySlice';
 import { fieldImageValueChanged } from 'features/nodes/store/nodesSlice';
 import { upscaleInitialImageChanged } from 'features/parameters/store/upscaleSlice';
 import { toast } from 'features/toast/toast';
@@ -44,6 +45,8 @@ export const addImageUploadedFulfilledListener = (startAppListening: AppStartLis
         if (!autoAddBoardId || autoAddBoardId === 'none') {
           const title = postUploadAction.title || DEFAULT_UPLOADED_TOAST.title;
           toast({ ...DEFAULT_UPLOADED_TOAST, title });
+          dispatch(boardIdSelected({ boardId: 'none' }));
+          dispatch(galleryViewChanged('assets'));
         } else {
           // Add this image to the board
           dispatch(
@@ -67,6 +70,8 @@ export const addImageUploadedFulfilledListener = (startAppListening: AppStartLis
             ...DEFAULT_UPLOADED_TOAST,
             description,
           });
+          dispatch(boardIdSelected({ boardId: autoAddBoardId }));
+          dispatch(galleryViewChanged('assets'));
         }
         return;
       }

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

@@ -1,34 +1,22 @@
 import { Button, ButtonGroup, Flex } from '@invoke-ai/ui-library';
-import { useAppDispatch } from 'app/store/storeHooks';
 import {
-  controlLayerAdded,
-  inpaintMaskAdded,
-  ipaAdded,
-  rasterLayerAdded,
-  rgAdded,
-} from 'features/controlLayers/store/canvasSlice';
-import { memo, useCallback } from 'react';
+  useAddControlLayer,
+  useAddInpaintMask,
+  useAddIPAdapter,
+  useAddRasterLayer,
+  useAddRegionalGuidance,
+} from 'features/controlLayers/hooks/addLayerHooks';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiPlusBold } from 'react-icons/pi';
 
 export const CanvasAddEntityButtons = memo(() => {
   const { t } = useTranslation();
-  const dispatch = useAppDispatch();
-  const addInpaintMask = useCallback(() => {
-    dispatch(inpaintMaskAdded({ isSelected: true }));
-  }, [dispatch]);
-  const addRegionalGuidance = useCallback(() => {
-    dispatch(rgAdded({ isSelected: true }));
-  }, [dispatch]);
-  const addRasterLayer = useCallback(() => {
-    dispatch(rasterLayerAdded({ isSelected: true }));
-  }, [dispatch]);
-  const addControlLayer = useCallback(() => {
-    dispatch(controlLayerAdded({ isSelected: true }));
-  }, [dispatch]);
-  const addIPAdapter = useCallback(() => {
-    dispatch(ipaAdded({ isSelected: true }));
-  }, [dispatch]);
+  const addInpaintMask = useAddInpaintMask();
+  const addRegionalGuidance = useAddRegionalGuidance();
+  const addRasterLayer = useAddRasterLayer();
+  const addControlLayer = useAddControlLayer();
+  const addIPAdapter = useAddIPAdapter();
 
   return (
     <Flex flexDir="column" w="full" h="full" alignItems="center">

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListGlobalActionBarAddLayerMenu.tsx

@@ -1,37 +1,22 @@
 import { IconButton, Menu, MenuButton, MenuItem, MenuList } from '@invoke-ai/ui-library';
-import { useAppDispatch } from 'app/store/storeHooks';
-import { useDefaultIPAdapter } from 'features/controlLayers/hooks/useLayerControlAdapter';
 import {
-  controlLayerAdded,
-  inpaintMaskAdded,
-  ipaAdded,
-  rasterLayerAdded,
-  rgAdded,
-} from 'features/controlLayers/store/canvasSlice';
-import { memo, useCallback } from 'react';
+  useAddControlLayer,
+  useAddInpaintMask,
+  useAddIPAdapter,
+  useAddRasterLayer,
+  useAddRegionalGuidance,
+} from 'features/controlLayers/hooks/addLayerHooks';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiPlusBold } from 'react-icons/pi';
 
 export const EntityListGlobalActionBarAddLayerMenu = memo(() => {
   const { t } = useTranslation();
-  const dispatch = useAppDispatch();
-  const defaultIPAdapter = useDefaultIPAdapter();
-  const addInpaintMask = useCallback(() => {
-    dispatch(inpaintMaskAdded({ isSelected: true }));
-  }, [dispatch]);
-  const addRegionalGuidance = useCallback(() => {
-    dispatch(rgAdded({ isSelected: true }));
-  }, [dispatch]);
-  const addRasterLayer = useCallback(() => {
-    dispatch(rasterLayerAdded({ isSelected: true }));
-  }, [dispatch]);
-  const addControlLayer = useCallback(() => {
-    dispatch(controlLayerAdded({ isSelected: true }));
-  }, [dispatch]);
-  const addIPAdapter = useCallback(() => {
-    const overrides = { ipAdapter: defaultIPAdapter };
-    dispatch(ipaAdded({ isSelected: true, overrides }));
-  }, [defaultIPAdapter, dispatch]);
+  const addInpaintMask = useAddInpaintMask();
+  const addRegionalGuidance = useAddRegionalGuidance();
+  const addRasterLayer = useAddRasterLayer();
+  const addControlLayer = useAddControlLayer();
+  const addIPAdapter = useAddIPAdapter();
 
   return (
     <Menu>

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFilterButton.tsx

@@ -1,31 +1,16 @@
 import { IconButton } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
-import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
-import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
-import { selectIsStaging } from 'features/controlLayers/store/canvasSessionSlice';
+import { useEntityFilter } from 'features/controlLayers/hooks/useEntityFilter';
 import { selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors';
 import { isFilterableEntityIdentifier } from 'features/controlLayers/store/types';
-import { memo, useCallback } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiShootingStarBold } from 'react-icons/pi';
 
 export const EntityListSelectedEntityActionBarFilterButton = memo(() => {
   const { t } = useTranslation();
   const selectedEntityIdentifier = useAppSelector(selectSelectedEntityIdentifier);
-  const canvasManager = useCanvasManager();
-  const isStaging = useAppSelector(selectIsStaging);
-  const isBusy = useCanvasIsBusy();
-
-  const onClick = useCallback(() => {
-    if (!selectedEntityIdentifier) {
-      return;
-    }
-    if (!isFilterableEntityIdentifier(selectedEntityIdentifier)) {
-      return;
-    }
-
-    canvasManager.filter.startFilter(selectedEntityIdentifier);
-  }, [canvasManager, selectedEntityIdentifier]);
+  const filter = useEntityFilter(selectedEntityIdentifier);
 
   if (!selectedEntityIdentifier) {
     return null;
@@ -37,8 +22,8 @@ export const EntityListSelectedEntityActionBarFilterButton = memo(() => {
 
   return (
     <IconButton
-      onClick={onClick}
-      isDisabled={isBusy || isStaging}
+      onClick={filter.start}
+      isDisabled={filter.isDisabled}
       size="sm"
       variant="link"
       alignSelf="stretch"