Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): fix deleteboard cache changes

Browse Source
This commit is contained in:
psychedelicious 2023-07-21 14:16:19 +10:00
parent 0e3ca59e49
commit 4da6623700
7 changed files with 99 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
invokeai/frontend/web/src/app/components/ImageDnd/typesafeDnd.tsx
View File

@ -175,9 +175,7 @@ export const isValidDrop = (
const destinationBoard = overData.context.boardId; const destinationBoard = overData.context.boardId;
const isSameBoard = currentBoard === destinationBoard; const isSameBoard = currentBoard === destinationBoard;
const isDestinationValid = !currentBoard const isDestinationValid = !currentBoard ? destinationBoard : true;
? destinationBoard !== 'no_board'
: true;
return !isSameBoard && isDestinationValid; return !isSameBoard && isDestinationValid;
} }

6
invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx
View File

@ -19,12 +19,12 @@ import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAIDroppable from 'common/components/IAIDroppable'; import IAIDroppable from 'common/components/IAIDroppable';
import { boardIdSelected } from 'features/gallery/store/gallerySlice'; import { boardIdSelected } from 'features/gallery/store/gallerySlice';
import { memo, useCallback, useMemo, useState } from 'react'; import { memo, useCallback, useMemo, useState } from 'react';
import { FaFolder } from 'react-icons/fa'; import { FaUser } from 'react-icons/fa';
import { useUpdateBoardMutation } from 'services/api/endpoints/boards'; import { useUpdateBoardMutation } from 'services/api/endpoints/boards';
import { useGetImageDTOQuery } from 'services/api/endpoints/images'; import { useGetImageDTOQuery } from 'services/api/endpoints/images';
import { useBoardTotal } from 'services/api/hooks/useBoardTotal';
import { BoardDTO } from 'services/api/types'; import { BoardDTO } from 'services/api/types';
import BoardContextMenu from '../BoardContextMenu'; import BoardContextMenu from '../BoardContextMenu';
import { useBoardTotal } from 'services/api/hooks/useBoardTotal';
const AUTO_ADD_BADGE_STYLES: ChakraProps['sx'] = { const AUTO_ADD_BADGE_STYLES: ChakraProps['sx'] = {
bg: 'accent.200', bg: 'accent.200',
@ -176,7 +176,7 @@ const GalleryBoard = memo(
> >
<Icon <Icon
boxSize={12} boxSize={12}
as={FaFolder} as={FaUser}
sx={{ sx={{
mt: -3, mt: -3,
opacity: 0.7, opacity: 0.7,

6
invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx
View File

@ -59,9 +59,11 @@ const GalleryBoardName = (props: Props) => {
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
px: 2, px: 2,
bg: 'base.100',
_dark: { bg: 'base.800' },
_hover: { _hover: {
bg: 'base.100', bg: 'base.200',
_dark: { bg: 'base.800' }, _dark: { bg: 'base.700' },
}, },
}} }}
> >

70
invokeai/frontend/web/src/services/api/endpoints/boardImages.ts
View File

@ -1,52 +1,36 @@
import { ImageDTO, OffsetPaginatedResults_ImageDTO_ } from 'services/api/types'; import { api } from '..';
import { ApiFullTagDescription, LIST_TAG, api } from '..';
import { paths } from '../schema';
import { BoardId } from 'features/gallery/store/gallerySlice';
type ListBoardImagesArg =
paths['/api/v1/board_images/{board_id}']['get']['parameters']['path'] &
paths['/api/v1/board_images/{board_id}']['get']['parameters']['query'];
type AddImageToBoardArg =
paths['/api/v1/board_images/']['post']['requestBody']['content']['application/json'];
type RemoveImageFromBoardArg =
paths['/api/v1/board_images/']['delete']['requestBody']['content']['application/json'];
export const boardImagesApi = api.injectEndpoints({ export const boardImagesApi = api.injectEndpoints({
endpoints: (build) => ({ endpoints: (build) => ({
/** /**
* Board Images Queries * Board Images Queries
*/ */
// listBoardImages: build.query<
listBoardImages: build.query< // OffsetPaginatedResults_ImageDTO_,
OffsetPaginatedResults_ImageDTO_, // ListBoardImagesArg
ListBoardImagesArg // >({
>({ // query: ({ board_id, offset, limit }) => ({
query: ({ board_id, offset, limit }) => ({ // url: `board_images/${board_id}`,
url: `board_images/${board_id}`, // method: 'GET',
method: 'GET', // }),
}), // providesTags: (result, error, arg) => {
providesTags: (result, error, arg) => { // // any list of boardimages
// any list of boardimages // const tags: ApiFullTagDescription[] = [
const tags: ApiFullTagDescription[] = [ // { type: 'BoardImage', id: `${arg.board_id}_${LIST_TAG}` },
{ type: 'BoardImage', id: `${arg.board_id}_${LIST_TAG}` }, // ];
]; // if (result) {
// // and individual tags for each boardimage
if (result) { // tags.push(
// and individual tags for each boardimage // ...result.items.map(({ board_id, image_name }) => ({
tags.push( // type: 'BoardImage' as const,
...result.items.map(({ board_id, image_name }) => ({ // id: `${board_id}_${image_name}`,
type: 'BoardImage' as const, // }))
id: `${board_id}_${image_name}`, // );
})) // }
); // return tags;
} // },
// }),
return tags;
},
}),
}), }),
}); });
export const { useListBoardImagesQuery } = boardImagesApi; // export const { useListBoardImagesQuery } = boardImagesApi;

68
invokeai/frontend/web/src/services/api/endpoints/boards.ts
View File

@ -109,10 +109,25 @@ export const boardsApi = api.injectEndpoints({
deleteBoard: build.mutation<DeleteBoardResult, string>({ deleteBoard: build.mutation<DeleteBoardResult, string>({
query: (board_id) => ({ url: `boards/${board_id}`, method: 'DELETE' }), query: (board_id) => ({ url: `boards/${board_id}`, method: 'DELETE' }),
invalidatesTags: (result, error, arg) => [ invalidatesTags: (result, error, board_id) => [
{ type: 'Board', id: arg }, { type: 'Board', id: LIST_TAG },
// invalidate the 'No Board' cache // invalidate the 'No Board' cache
{ type: 'ImageList', id: getListImagesUrl({ board_id: 'none' }) }, {
type: 'ImageList',
id: getListImagesUrl({
board_id: 'none',
categories: IMAGE_CATEGORIES,
}),
},
{
type: 'ImageList',
id: getListImagesUrl({
board_id: 'none',
categories: ASSETS_CATEGORIES,
}),
},
{ type: 'BoardImagesTotal', id: 'none' },
{ type: 'BoardAssetsTotal', id: 'none' },
], ],
async onQueryStarted(board_id, { dispatch, queryFulfilled, getState }) { async onQueryStarted(board_id, { dispatch, queryFulfilled, getState }) {
/** /**
@ -167,17 +182,10 @@ export const boardsApi = api.injectEndpoints({
'listImages', 'listImages',
queryArgs, queryArgs,
(draft) => { (draft) => {
const oldCount = imagesAdapter const oldTotal = draft.total;
.getSelectors()
.selectTotal(draft);
const newState = imagesAdapter.updateMany(draft, updates); const newState = imagesAdapter.updateMany(draft, updates);
const newCount = imagesAdapter const delta = newState.total - oldTotal;
.getSelectors() draft.total = draft.total + delta;
.selectTotal(newState);
draft.total = Math.max(
draft.total - (oldCount - newCount),
0
);
} }
) )
); );
@ -197,9 +205,24 @@ export const boardsApi = api.injectEndpoints({
method: 'DELETE', method: 'DELETE',
params: { include_images: true }, params: { include_images: true },
}), }),
invalidatesTags: (result, error, arg) => [ invalidatesTags: (result, error, board_id) => [
{ type: 'Board', id: arg }, { type: 'Board', id: LIST_TAG },
{ type: 'ImageList', id: getListImagesUrl({ board_id: 'none' }) }, {
type: 'ImageList',
id: getListImagesUrl({
board_id: 'none',
categories: IMAGE_CATEGORIES,
}),
},
{
type: 'ImageList',
id: getListImagesUrl({
board_id: 'none',
categories: ASSETS_CATEGORIES,
}),
},
{ type: 'BoardImagesTotal', id: 'none' },
{ type: 'BoardAssetsTotal', id: 'none' },
], ],
async onQueryStarted(board_id, { dispatch, queryFulfilled, getState }) { async onQueryStarted(board_id, { dispatch, queryFulfilled, getState }) {
/** /**
@ -231,20 +254,13 @@ export const boardsApi = api.injectEndpoints({
'listImages', 'listImages',
queryArgs, queryArgs,
(draft) => { (draft) => {
const oldCount = imagesAdapter const oldTotal = draft.total;
.getSelectors()
.selectTotal(draft);
const newState = imagesAdapter.removeMany( const newState = imagesAdapter.removeMany(
draft, draft,
deleted_images deleted_images
); );
const newCount = imagesAdapter const delta = newState.total - oldTotal;
.getSelectors() draft.total = draft.total + delta;
.selectTotal(newState);
draft.total = Math.max(
draft.total - (oldCount - newCount),
0
);
} }
) )
); );

6
invokeai/frontend/web/src/services/api/endpoints/images.ts
View File

@ -6,6 +6,7 @@ import {
BoardId, BoardId,
IMAGE_CATEGORIES, IMAGE_CATEGORIES,
} from 'features/gallery/store/gallerySlice'; } from 'features/gallery/store/gallerySlice';
import { getCategories } from 'features/gallery/store/util';
import queryString from 'query-string'; import queryString from 'query-string';
import { ApiFullTagDescription, api } from '..'; import { ApiFullTagDescription, api } from '..';
import { components, paths } from '../schema'; import { components, paths } from '../schema';
@ -15,8 +16,7 @@ import {
OffsetPaginatedResults_ImageDTO_, OffsetPaginatedResults_ImageDTO_,
PostUploadAction, PostUploadAction,
} from '../types'; } from '../types';
import { getCacheAction, getIsImageInDateRange } from './util'; import { getIsImageInDateRange } from './util';
import { getCategories } from 'features/gallery/store/util';
export type ListImagesArgs = NonNullable< export type ListImagesArgs = NonNullable<
paths['/api/v1/images/']['get']['parameters']['query'] paths['/api/v1/images/']['get']['parameters']['query']
@ -502,7 +502,6 @@ export const imagesApi = api.injectEndpoints({
}; };
}, },
invalidatesTags: (result, error, { board_id, imageDTO }) => [ invalidatesTags: (result, error, { board_id, imageDTO }) => [
{ type: 'BoardImage' },
{ type: 'Board', id: board_id }, { type: 'Board', id: board_id },
{ type: 'BoardImagesTotal', id: board_id }, { type: 'BoardImagesTotal', id: board_id },
{ type: 'BoardImagesTotal', id: imageDTO.board_id ?? 'none' }, { type: 'BoardImagesTotal', id: imageDTO.board_id ?? 'none' },
@ -636,7 +635,6 @@ export const imagesApi = api.injectEndpoints({
}; };
}, },
invalidatesTags: (result, error, { imageDTO }) => [ invalidatesTags: (result, error, { imageDTO }) => [
{ type: 'BoardImage' },
{ type: 'Board', id: imageDTO.board_id }, { type: 'Board', id: imageDTO.board_id },
{ type: 'BoardImagesTotal', id: imageDTO.board_id }, { type: 'BoardImagesTotal', id: imageDTO.board_id },
{ type: 'BoardImagesTotal', id: 'none' }, { type: 'BoardImagesTotal', id: 'none' },

40
invokeai/frontend/web/src/services/api/endpoints/util.ts
View File

@ -25,27 +25,27 @@ export const getIsImageInDateRange = (
return false; return false;
}; };
/** // /**
* Determines the action we should take when an image may need to be added or updated in a cache. // * Determines the action we should take when an image may need to be added or updated in a cache.
*/ // */
export const getCacheAction = ( // export const getCacheAction = (
data: ImageCache | undefined, // data: ImageCache | undefined,
imageDTO: ImageDTO // imageDTO: ImageDTO
): 'add' | 'update' | 'none' => { // ): 'add' | 'update' | 'none' => {
const isInDateRange = getIsImageInDateRange(data, imageDTO); // const isInDateRange = getIsImageInDateRange(data, imageDTO);
const isCacheFullyPopulated = data && data.total === data.ids.length; // const isCacheFullyPopulated = data && data.total === data.ids.length;
const shouldUpdateCache = // const shouldUpdateCache =
Boolean(isInDateRange) || Boolean(isCacheFullyPopulated); // Boolean(isInDateRange) || Boolean(isCacheFullyPopulated);
const isImageInCache = data && data.ids.includes(imageDTO.image_name); // const isImageInCache = data && data.ids.includes(imageDTO.image_name);
if (shouldUpdateCache && isImageInCache) { // if (shouldUpdateCache && isImageInCache) {
return 'update'; // return 'update';
} // }
if (shouldUpdateCache && !isImageInCache) { // if (shouldUpdateCache && !isImageInCache) {
return 'add'; // return 'add';
} // }
return 'none'; // return 'none';
}; // };