diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/galleryImageClicked.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/galleryImageClicked.ts index 9cd4790c0c..a77c260985 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/galleryImageClicked.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/galleryImageClicked.ts @@ -4,7 +4,6 @@ import { selectListImagesQueryArgs } from 'features/gallery/store/gallerySelecto import { imageToCompareChanged, selectionChanged } from 'features/gallery/store/gallerySlice'; import { imagesApi } from 'services/api/endpoints/images'; import type { ImageDTO } from 'services/api/types'; -import { imagesSelectors } from 'services/api/util'; export const galleryImageClicked = createAction<{ imageDTO: ImageDTO; @@ -39,7 +38,7 @@ export const addGalleryImageClickedListener = (startAppListening: AppStartListen return; } - const imageDTOs = queryResult.data.items + const imageDTOs = queryResult.data.items; const selection = state.gallery.selection; if (altKey) { diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts index dd1535536d..f01bbeafae 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts @@ -15,7 +15,7 @@ import { zNodeStatus } from 'features/nodes/types/invocation'; import { CANVAS_OUTPUT } from 'features/nodes/util/graph/constants'; import { boardsApi } from 'services/api/endpoints/boards'; import { imagesApi } from 'services/api/endpoints/images'; -import { imageListDefaultSort, imagesAdapter } from 'services/api/util'; +import { imageListDefaultSort } from 'services/api/util'; import { socketInvocationComplete } from 'services/events/actions'; // These nodes output an image, but do not actually *save* an image, so we don't want to handle the gallery logic on them @@ -65,13 +65,13 @@ export const addInvocationCompleteEventListener = (startAppListening: AppStartLi categories: IMAGE_CATEGORIES, offset: gallery.offset, limit: gallery.limit, - is_intermediate: false + is_intermediate: false, }, (draft) => { const updatedListLength = draft.items.unshift(imageDTO); - draft.items.sort(imageListDefaultSort()) + draft.items.sort(imageListDefaultSort()); if (updatedListLength > IMAGE_LIMIT) { - draft.items.pop() + draft.items.pop(); } draft.total += 1; } diff --git a/invokeai/frontend/web/src/common/components/IAIDndImageIcon.tsx b/invokeai/frontend/web/src/common/components/IAIDndImageIcon.tsx index 10a0f28a84..6435251010 100644 --- a/invokeai/frontend/web/src/common/components/IAIDndImageIcon.tsx +++ b/invokeai/frontend/web/src/common/components/IAIDndImageIcon.tsx @@ -1,6 +1,6 @@ import type { IconButtonProps, SystemStyleObject } from '@invoke-ai/ui-library'; import { IconButton } from '@invoke-ai/ui-library'; -import type { MouseEvent, ReactElement } from 'react'; +import type { MouseEvent } from 'react'; import { memo } from 'react'; const sx: SystemStyleObject = { diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterImagePreview.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterImagePreview.tsx index c46bd90876..b585bd1d57 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterImagePreview.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterImagePreview.tsx @@ -1,4 +1,3 @@ -import type { SystemStyleObject } from '@invoke-ai/ui-library'; import { Box, Flex, Spinner } from '@invoke-ai/ui-library'; import { skipToken } from '@reduxjs/toolkit/query'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/ControlAdapterImagePreview.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/ControlAdapterImagePreview.tsx index e9507aced1..fe9096d72c 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/ControlAdapterImagePreview.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/ControlAdapterImagePreview.tsx @@ -1,4 +1,3 @@ -import type { SystemStyleObject } from '@invoke-ai/ui-library'; import { Box, Flex, Spinner, useShiftModifier } from '@invoke-ai/ui-library'; import { skipToken } from '@reduxjs/toolkit/query'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/IPAdapterImagePreview.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/IPAdapterImagePreview.tsx index b89402b80e..da93ccef09 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/IPAdapterImagePreview.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/IPAdapterImagePreview.tsx @@ -1,4 +1,3 @@ -import type { SystemStyleObject } from '@invoke-ai/ui-library'; import { Flex, useShiftModifier } from '@invoke-ai/ui-library'; import { skipToken } from '@reduxjs/toolkit/query'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/IILayer/InitialImagePreview.tsx b/invokeai/frontend/web/src/features/controlLayers/components/IILayer/InitialImagePreview.tsx index 6c8cb2df8a..ee62dcbcdd 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/IILayer/InitialImagePreview.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/IILayer/InitialImagePreview.tsx @@ -1,4 +1,3 @@ -import type { SystemStyleObject } from '@invoke-ai/ui-library'; import { Flex, useShiftModifier } from '@invoke-ai/ui-library'; import { skipToken } from '@reduxjs/toolkit/query'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx index f0b25d0e6f..0b78a1f29c 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx @@ -19,7 +19,7 @@ const GalleryImageGrid = () => { useGalleryHotkeys(); const { t } = useTranslation(); const queryArgs = useAppSelector(selectListImagesQueryArgs); - const { imageDTOs, isLoading, isSuccess, isError } = useListImagesQuery(queryArgs, { + const { imageDTOs, isLoading, isError } = useListImagesQuery(queryArgs, { selectFromResult: ({ data, isLoading, isSuccess, isError }) => ({ imageDTOs: data?.items ?? EMPTY_ARRAY, isLoading, diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryPagination.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryPagination.tsx index e751a5e5fb..c99be29788 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryPagination.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryPagination.tsx @@ -67,7 +67,7 @@ export const GalleryPagination = () => { isDisabled={!isLastEnabled} /> - {rangeDisplay} Images + {rangeDisplay} ); }; diff --git a/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx b/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx index 726292fd27..400eb38a94 100644 --- a/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx @@ -2,10 +2,10 @@ import type { ChakraProps } from '@invoke-ai/ui-library'; import { Box, Flex, IconButton, Spinner } from '@invoke-ai/ui-library'; import { useGalleryImages } from 'features/gallery/hooks/useGalleryImages'; import { useGalleryNavigation } from 'features/gallery/hooks/useGalleryNavigation'; +import { useGalleryPagination } from 'features/gallery/hooks/useGalleryPagination'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; import { PiCaretDoubleRightBold, PiCaretLeftBold, PiCaretRightBold } from 'react-icons/pi'; -import { useGalleryPagination } from '../hooks/useGalleryPagination'; const nextPrevButtonStyles: ChakraProps['sx'] = { color: 'base.100', diff --git a/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts b/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts index 527d465de5..6dd7065204 100644 --- a/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts +++ b/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts @@ -1,12 +1,12 @@ import { useAppSelector } from 'app/store/storeHooks'; import { isStagingSelector } from 'features/canvas/store/canvasSelectors'; -import { useGalleryPagination } from 'features/gallery/hooks/useGalleryPagination'; import { useGalleryNavigation } from 'features/gallery/hooks/useGalleryNavigation'; +import { useGalleryPagination } from 'features/gallery/hooks/useGalleryPagination'; +import { selectListImagesQueryArgs } from 'features/gallery/store/gallerySelectors'; import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import { useMemo } from 'react'; import { useHotkeys } from 'react-hotkeys-hook'; -import { useListImagesQuery } from '../../../services/api/endpoints/images'; -import { selectListImagesQueryArgs } from '../store/gallerySelectors'; +import { useListImagesQuery } from 'services/api/endpoints/images'; /** * Registers gallery hotkeys. This hook is a singleton. diff --git a/invokeai/frontend/web/src/features/gallery/hooks/useGalleryImages.ts b/invokeai/frontend/web/src/features/gallery/hooks/useGalleryImages.ts index 9d8eb621c0..6e878f9c26 100644 --- a/invokeai/frontend/web/src/features/gallery/hooks/useGalleryImages.ts +++ b/invokeai/frontend/web/src/features/gallery/hooks/useGalleryImages.ts @@ -13,4 +13,3 @@ export const useGalleryImages = () => { queryResult, }; }; - diff --git a/invokeai/frontend/web/src/features/gallery/hooks/useGalleryPagination.ts b/invokeai/frontend/web/src/features/gallery/hooks/useGalleryPagination.ts index 0045afeab6..0d60dacbad 100644 --- a/invokeai/frontend/web/src/features/gallery/hooks/useGalleryPagination.ts +++ b/invokeai/frontend/web/src/features/gallery/hooks/useGalleryPagination.ts @@ -39,10 +39,9 @@ export const useGalleryPagination = (pageButtonsPerSide: number = 2) => { const goToPage = useCallback( (page: number) => { - const p = Math.max(0, Math.min(page, pages - 1)); dispatch(offsetChanged(page * (limit || 0))); }, - [dispatch, pages, limit] + [dispatch, limit] ); const goToFirst = useCallback(() => { dispatch(offsetChanged(0)); diff --git a/invokeai/frontend/web/src/features/gallery/store/gallerySelectors.ts b/invokeai/frontend/web/src/features/gallery/store/gallerySelectors.ts index bd9eb33e1c..517cd22aa7 100644 --- a/invokeai/frontend/web/src/features/gallery/store/gallerySelectors.ts +++ b/invokeai/frontend/web/src/features/gallery/store/gallerySelectors.ts @@ -1,4 +1,5 @@ -import { SkipToken, skipToken } from '@reduxjs/toolkit/query'; +import type { SkipToken } from '@reduxjs/toolkit/query'; +import { skipToken } from '@reduxjs/toolkit/query'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { selectGallerySlice } from 'features/gallery/store/gallerySlice'; import { ASSETS_CATEGORIES, IMAGE_CATEGORIES } from 'features/gallery/store/types'; @@ -11,11 +12,14 @@ export const selectLastSelectedImage = createMemoizedSelector( export const selectListImagesQueryArgs = createMemoizedSelector( selectGallerySlice, - (gallery): ListImagesArgs | SkipToken => (gallery.limit ? { - board_id: gallery.selectedBoardId, - categories: gallery.galleryView === 'images' ? IMAGE_CATEGORIES : ASSETS_CATEGORIES, - offset: gallery.offset, - limit: gallery.limit, - is_intermediate: false, - } : skipToken) + (gallery): ListImagesArgs | SkipToken => + gallery.limit + ? { + board_id: gallery.selectedBoardId, + categories: gallery.galleryView === 'images' ? IMAGE_CATEGORIES : ASSETS_CATEGORIES, + offset: gallery.offset, + limit: gallery.limit, + is_intermediate: false, + } + : skipToken ); diff --git a/invokeai/frontend/web/src/services/api/endpoints/images.ts b/invokeai/frontend/web/src/services/api/endpoints/images.ts index 1c4eaf54e7..1e18d86aec 100644 --- a/invokeai/frontend/web/src/services/api/endpoints/images.ts +++ b/invokeai/frontend/web/src/services/api/endpoints/images.ts @@ -1,4 +1,3 @@ - import { getStore } from 'app/store/nanostores/store'; import type { JSONObject } from 'common/types'; import type { BoardId } from 'features/gallery/store/types'; @@ -13,10 +12,7 @@ import type { ListImagesResponse, PostUploadAction, } from 'services/api/types'; -import { - getCategories, - getListImagesUrl, -} from 'services/api/util'; +import { getCategories, getListImagesUrl } from 'services/api/util'; import type { ApiTagDescription } from '..'; import { api, buildV1Url, LIST_TAG } from '..'; @@ -54,7 +50,7 @@ export const imagesApi = api.injectEndpoints({ // Make the tags the same as the cache key { type: 'ImageList', id: getListImagesUrl({ board_id, categories }) }, 'FetchOnReconnect', - ] + ]; }, }), getIntermediatesCount: build.query({ @@ -102,12 +98,9 @@ export const imagesApi = api.injectEndpoints({ id: boardId, }, ]; - - }, }), - deleteImages: build.mutation({ query: ({ imageDTOs }) => { const image_names = imageDTOs.map((imageDTO) => imageDTO.image_name); @@ -118,17 +111,11 @@ export const imagesApi = api.injectEndpoints({ image_names, }, }; - }, invalidatesTags: (result, error, { imageDTOs }) => { if (imageDTOs[0]) { const categories = getCategories(imageDTOs[0]); - const boardId = imageDTOs[0].board_id ?? "none"; - - console.log(getListImagesUrl({ - board_id: boardId, - categories, - }),) + const boardId = imageDTOs[0].board_id ?? 'none'; return [ { @@ -144,9 +131,7 @@ export const imagesApi = api.injectEndpoints({ }, ]; } - return [] - - + return []; }, }), /** @@ -159,7 +144,6 @@ export const imagesApi = api.injectEndpoints({ body: { is_intermediate }, }), invalidatesTags: (result, error, { imageDTO }) => { - const categories = getCategories(imageDTO); const boardId = imageDTO.board_id ?? undefined; @@ -176,7 +160,7 @@ export const imagesApi = api.injectEndpoints({ id: boardId, }, ]; - } + }, }), /** * Star a list of images. @@ -281,7 +265,6 @@ export const imagesApi = api.injectEndpoints({ }; }, invalidatesTags: (result) => { - if (!result || result.is_intermediate) { // Don't add it to anything return []; @@ -301,7 +284,7 @@ export const imagesApi = api.injectEndpoints({ type: 'Board', id: boardId, }, - ] + ]; }, }), @@ -333,9 +316,7 @@ export const imagesApi = api.injectEndpoints({ method: 'DELETE', params: { include_images: true }, }), - invalidatesTags: () => [ - { type: 'Board', id: LIST_TAG }, - ], + invalidatesTags: () => [{ type: 'Board', id: LIST_TAG }], }), addImageToBoard: build.mutation({ query: ({ board_id, imageDTO }) => { @@ -359,13 +340,13 @@ export const imagesApi = api.injectEndpoints({ { type: 'ImageList', id: getListImagesUrl({ - board_id: imageDTO.board_id ?? "none", + board_id: imageDTO.board_id ?? 'none', categories: getCategories(imageDTO), }), }, { type: 'Board', id: board_id }, - { type: 'Board', id: imageDTO.board_id ?? "none" }, - ] + { type: 'Board', id: imageDTO.board_id ?? 'none' }, + ]; }, }), removeImageFromBoard: build.mutation({ @@ -390,13 +371,13 @@ export const imagesApi = api.injectEndpoints({ { type: 'ImageList', id: getListImagesUrl({ - board_id: "none", + board_id: 'none', categories: getCategories(imageDTO), }), }, - { type: 'Board', id: imageDTO.board_id ?? "none" }, - { type: 'Board', id: "none" }, - ] + { type: 'Board', id: imageDTO.board_id ?? 'none' }, + { type: 'Board', id: 'none' }, + ]; }, }), addImagesToBoard: build.mutation< @@ -415,30 +396,28 @@ export const imagesApi = api.injectEndpoints({ }, }), invalidatesTags: (result, error, { board_id, imageDTOs }) => { - const tags: ApiTagDescription[] = [] - console.log(imageDTOs[0]) + const tags: ApiTagDescription[] = []; if (imageDTOs[0]) { tags.push({ type: 'ImageList', id: getListImagesUrl({ - board_id: imageDTOs[0].board_id ?? "none", + board_id: imageDTOs[0].board_id ?? 'none', categories: getCategories(imageDTOs[0]), }), - }) + }); tags.push({ type: 'ImageList', id: getListImagesUrl({ board_id: board_id, categories: getCategories(imageDTOs[0]), }), - }) - tags.push({ type: "Board", id: imageDTOs[0].board_id ?? "none" }) + }); + tags.push({ type: 'Board', id: imageDTOs[0].board_id ?? 'none' }); } - tags.push({ type: "Board", id: board_id }) + tags.push({ type: 'Board', id: board_id }); return tags; }, - }), removeImagesFromBoard: build.mutation< components['schemas']['RemoveImagesFromBoardResult'], @@ -464,22 +443,22 @@ export const imagesApi = api.injectEndpoints({ board_id: imageDTOs[0].board_id, categories: getCategories(imageDTOs[0]), }), - }) + }); tags.push({ type: 'ImageList', id: getListImagesUrl({ - board_id: "none", + board_id: 'none', categories: getCategories(imageDTOs[0]), }), - }) + }); } result?.removed_image_names.forEach((image_name) => { const board_id = imageDTOs.find((i) => i.image_name === image_name)?.board_id; if (!board_id || touchedBoardIds.includes(board_id)) { - tags.push({ type: 'Board', id: "none" }); - return + tags.push({ type: 'Board', id: 'none' }); + return; } tags.push({ type: 'Board', id: board_id }); diff --git a/invokeai/frontend/web/src/services/api/util.ts b/invokeai/frontend/web/src/services/api/util.ts index aa952f51bc..78cfd58974 100644 --- a/invokeai/frontend/web/src/services/api/util.ts +++ b/invokeai/frontend/web/src/services/api/util.ts @@ -84,9 +84,8 @@ export const imageListDefaultSort = () => { return 1; } return dateComparator(b.created_at, a.created_at); - } - -} + }; +}; // Create selectors for the adapter. export const imagesSelectors = imagesAdapter.getSelectors(undefined, getSelectorsOptions);