github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): skip optimistic updates for gallery when using search term

Browse Source
This commit is contained in:
psychedelicious
2025-07-05 19:20:04 +10:00
parent 6bd004d868
commit 61a35f1396
10 changed files with 63 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
invokeai/frontend/web/src/features/deleteImageModal/store/state.ts
View File

@@ -11,7 +11,7 @@ import {
import { selectCanvasSlice } from 'features/controlLayers/store/selectors';
import type { CanvasState, RefImagesState } from 'features/controlLayers/store/types';
import type { ImageUsage } from 'features/deleteImageModal/store/types';
import { selectListImageNamesQueryArgs } from 'features/gallery/store/gallerySelectors';
import { selectGetImageNamesQueryArgs } from 'features/gallery/store/gallerySelectors';
import { imageSelected } from 'features/gallery/store/gallerySlice';
import { fieldImageCollectionValueChanged, fieldImageValueChanged } from 'features/nodes/store/nodesSlice';
import { selectNodesSlice } from 'features/nodes/store/selectors';
@@ -80,7 +80,7 @@ const handleDeletions = async (image_names: string[], store: AppStore) => {
try {
const { dispatch, getState } = store;
const state = getState();
const { data } = imagesApi.endpoints.getImageNames.select(selectListImageNamesQueryArgs(state))(state);
const { data } = imagesApi.endpoints.getImageNames.select(selectGetImageNamesQueryArgs(state))(state);
const index = data?.image_names.findIndex((name) => name === image_names[0]);
const { deleted_images } = await dispatch(
imagesApi.endpoints.deleteImages.initiate({ image_names }, { track: false })

4
invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
View File

@@ -16,7 +16,7 @@ import { useImageContextMenu } from 'features/gallery/components/ImageContextMen
import { GalleryImageHoverIcons } from 'features/gallery/components/ImageGrid/GalleryImageHoverIcons';
import { getGalleryImageDataTestId } from 'features/gallery/components/ImageGrid/getGalleryImageDataTestId';
import {
selectListImageNamesQueryArgs,
selectGetImageNamesQueryArgs,
selectSelectedBoardId,
selectSelection,
} from 'features/gallery/store/gallerySelectors';
@@ -93,7 +93,7 @@ const buildOnClick =
(imageName: string, dispatch: AppDispatch, getState: AppGetState) => (e: MouseEvent<HTMLDivElement>) => {
const { shiftKey, ctrlKey, metaKey, altKey } = e;
const state = getState();
const queryArgs = selectListImageNamesQueryArgs(state);
const queryArgs = selectGetImageNamesQueryArgs(state);
const imageNames = imagesApi.endpoints.getImageNames.select(queryArgs)(state).data?.image_names ?? [];
// If we don't have the image names cached, we can't perform selection operations

4
invokeai/frontend/web/src/features/gallery/components/NewGallery.tsx
View File

@@ -3,7 +3,7 @@ import { createSelector } from '@reduxjs/toolkit';
import { logger } from 'app/logging/logger';
import { useAppSelector, useAppStore } from 'app/store/storeHooks';
import { useRangeBasedImageFetching } from 'features/gallery/hooks/useRangeBasedImageFetching';
import type { selectListImageNamesQueryArgs } from 'features/gallery/store/gallerySelectors';
import type { selectGetImageNamesQueryArgs } from 'features/gallery/store/gallerySelectors';
import {
selectGalleryImageMinimumWidth,
selectImageToCompare,
@@ -32,7 +32,7 @@ import { useGalleryImageNames } from './use-gallery-image-names';
const log = logger('gallery');
type ListImageNamesQueryArgs = ReturnType<typeof selectListImageNamesQueryArgs>;
type ListImageNamesQueryArgs = ReturnType<typeof selectGetImageNamesQueryArgs>;
type GridContext = {
queryArgs: ListImageNamesQueryArgs;

4
invokeai/frontend/web/src/features/gallery/components/use-gallery-image-names.ts
View File

@@ -1,6 +1,6 @@
import { EMPTY_ARRAY } from 'app/store/constants';
import { useAppSelector } from 'app/store/storeHooks';
import { selectListImageNamesQueryArgs } from 'features/gallery/store/gallerySelectors';
import { selectGetImageNamesQueryArgs } from 'features/gallery/store/gallerySelectors';
import { useGetImageNamesQuery } from 'services/api/endpoints/images';
import { useDebounce } from 'use-debounce';
@@ -14,7 +14,7 @@ const getImageNamesQueryOptions = {
} satisfies Parameters<typeof useGetImageNamesQuery>[1];
export const useGalleryImageNames = () => {
const _queryArgs = useAppSelector(selectListImageNamesQueryArgs);
const _queryArgs = useAppSelector(selectGetImageNamesQueryArgs);
const [queryArgs] = useDebounce(_queryArgs, 300);
const { imageNames, isLoading, isFetching } = useGetImageNamesQuery(queryArgs, getImageNamesQueryOptions);
return { imageNames, isLoading, isFetching, queryArgs };

6
invokeai/frontend/web/src/features/gallery/store/gallerySelectors.ts
View File

@@ -2,7 +2,7 @@ import { createSelector } from '@reduxjs/toolkit';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { selectGallerySlice } from 'features/gallery/store/gallerySlice';
import { ASSETS_CATEGORIES, IMAGE_CATEGORIES } from 'features/gallery/store/types';
import type { ListBoardsArgs } from 'services/api/types';
import type { GetImageNamesArgs, ListBoardsArgs } from 'services/api/types';
export const selectFirstSelectedImage = createSelector(selectGallerySlice, (gallery) => gallery.selection.at(0));
export const selectLastSelectedImage = createSelector(selectGallerySlice, (gallery) => gallery.selection.at(-1));
@@ -27,7 +27,7 @@ const selectGallerySearchTerm = createSelector(selectGallerySlice, (gallery) =>
const selectGalleryOrderDir = createSelector(selectGallerySlice, (gallery) => gallery.orderDir);
const selectGalleryStarredFirst = createSelector(selectGallerySlice, (gallery) => gallery.starredFirst);
export const selectListImageNamesQueryArgs = createMemoizedSelector(
export const selectGetImageNamesQueryArgs = createMemoizedSelector(
[
selectSelectedBoardId,
selectGalleryQueryCategories,
@@ -35,7 +35,7 @@ export const selectListImageNamesQueryArgs = createMemoizedSelector(
selectGalleryOrderDir,
selectGalleryStarredFirst,
],
(board_id, categories, search_term, order_dir, starred_first) => ({
(board_id, categories, search_term, order_dir, starred_first): GetImageNamesArgs => ({
board_id,
categories,
search_term,