wip change limit based on size of gallery

invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx

@@ -12,6 +12,8 @@ import BoardsList from './Boards/BoardsList/BoardsList';
 import GalleryBoardName from './GalleryBoardName';
 import GallerySettingsPopover from './GallerySettingsPopover';
 import GalleryImageGrid from './ImageGrid/GalleryImageGrid';
+import { GalleryImageGridContainer } from './ImageGrid/GalleryImageGridContainer';
+import { GalleryPagination } from './ImageGrid/GalleryPagination';
 
 const ImageGalleryContent = () => {
   const { t } = useTranslation();
@@ -31,7 +33,7 @@ const ImageGalleryContent = () => {
   }, [dispatch]);
 
   return (
-    <VStack layerStyle="first" flexDirection="column" h="full" w="full" borderRadius="base" p={2}>
+    <Flex layerStyle="first" flexDirection="column" h="full" w="full" borderRadius="base" p={2}>
       {galleryHeader}
       <Box w="full">
         <Flex ref={resizeObserverRef} alignItems="center" justifyContent="space-between" gap={2}>
@@ -73,9 +75,10 @@ const ImageGalleryContent = () => {
             </TabList>
           </Tabs>
         </Flex>
-        <GalleryImageGrid />
+        <GalleryImageGridContainer />
       </Flex>
-    </VStack>
+      <GalleryPagination />
+    </Flex>
   );
 };
 

invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx

@@ -7,7 +7,6 @@ import { selectListImagesQueryArgs } from 'features/gallery/store/gallerySelecto
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiImageBold, PiWarningCircleBold } from 'react-icons/pi';
-import type { ImageDTO } from 'services/api/types';
 
 import GalleryImage from './GalleryImage';
 import { useListImagesQuery } from '../../../../services/api/endpoints/images';
@@ -19,7 +18,8 @@ export const imageItemContainerTestId = 'image-item-container';
 const GalleryImageGrid = () => {
   useGalleryHotkeys();
   const { t } = useTranslation();
-  const galleryImageMinimumWidth = useAppSelector((s) => s.gallery.galleryImageMinimumWidth);
+
+  const { galleryImageMinimumWidth, limit } = useAppSelector((s) => s.gallery);
   const queryArgs = useAppSelector(selectListImagesQueryArgs);
   const { imageDTOs, isLoading, isSuccess, isError } = useListImagesQuery(queryArgs, {
     selectFromResult: ({ data, isLoading, isSuccess, isError }) => ({
@@ -38,7 +38,7 @@ const GalleryImageGrid = () => {
     );
   }
 
-  if (isLoading) {
+  if (isLoading || !limit) {
     return (
       <Flex w="full" h="full" alignItems="center" justifyContent="center">
         <IAINoContentFallback label={t('gallery.loading')} icon={PiImageBold} />
@@ -67,19 +67,9 @@ const GalleryImageGrid = () => {
           ))}
         </Grid>
       </Box>
-      <GalleryPagination />
+      {/* <GalleryPagination /> */}
     </>
   );
 };
 
 export default memo(GalleryImageGrid);
-
-const GalleryImageContainer = memo(({ imageDTO, index }: { imageDTO: ImageDTO; index: number }) => {
-  return (
-    <Box className="item-container" p={1.5} data-testid={imageItemContainerTestId}>
-      <GalleryImage imageDTO={imageDTO} index={index} />
-    </Box>
-  );
-});
-
-GalleryImageContainer.displayName = 'GalleryImageContainer';

invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGridContainer.tsx

@@ -0,0 +1,58 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Box, Flex } from '@invoke-ai/ui-library';
+import GalleryImageGrid from './GalleryImageGrid';
+import { useAppSelector, useAppDispatch } from '../../../../app/store/storeHooks';
+import { limitChanged } from '../../store/gallerySlice';
+
+export const GalleryImageGridContainer = () => {
+  const { galleryImageMinimumWidth, limit } = useAppSelector((s) => s.gallery);
+  const dispatch = useAppDispatch();
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const calculateItemsPerPage = useCallback(() => {
+    const containerWidth = containerRef.current?.clientWidth;
+    const containerHeight = containerRef.current?.clientHeight;
+    console.log({ containerWidth, containerHeight, galleryImageMinimumWidth });
+    if (containerHeight && containerWidth) {
+      const numberHorizontal = Math.floor(containerWidth / galleryImageMinimumWidth);
+      const imageWidth = containerWidth / numberHorizontal;
+      const numberAllowedVertical = Math.floor(containerHeight / imageWidth);
+      console.log({ numberAllowedVertical, numberHorizontal });
+      dispatch(limitChanged(numberAllowedVertical * numberHorizontal));
+    }
+  }, [containerRef, galleryImageMinimumWidth]);
+
+  useEffect(() => {
+    dispatch(limitChanged(undefined));
+    calculateItemsPerPage();
+  }, [galleryImageMinimumWidth]);
+
+  useEffect(() => {
+    if (!containerRef.current) {
+      return;
+    }
+
+    const resizeObserver = new ResizeObserver(() => {
+      console.log('resize');
+      if (!containerRef.current) {
+        return;
+      }
+      dispatch(limitChanged(undefined));
+      calculateItemsPerPage();
+    });
+
+    resizeObserver.observe(containerRef.current);
+    dispatch(limitChanged(undefined));
+    calculateItemsPerPage();
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  return (
+    <Flex flexDir="column" w="full" h="full" overflow="hidden" ref={containerRef}>
+      {limit && <GalleryImageGrid />}
+    </Flex>
+  );
+};

invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryPagination.tsx

@@ -3,12 +3,15 @@ import { useGalleryPagination } from '../../hooks/useGalleryPagination';
 import { PiCaretLeftBold, PiCaretRightBold } from 'react-icons/pi';
 
 export const GalleryPagination = () => {
-  const { goPrev, goNext, isPrevEnabled, isNextEnabled, pageButtons, goToPage, currentPage, rangeDisplay } =
+  const { goPrev, goNext, isPrevEnabled, isNextEnabled, pageButtons, goToPage, currentPage, rangeDisplay, total } =
     useGalleryPagination();
-  console.log({ currentPage, pageButtons });
+
+  if (!total) {
+    return <Flex flexDir="column" alignItems="center" gap="2" height="48px"></Flex>;
+  }
 
   return (
-    <Flex flexDir="column" alignItems="center" gap="2">
+    <Flex flexDir="column" alignItems="center" gap="2" height="48px">
       <Flex gap={2} alignItems="flex-end">
         <IconButton
           size="sm"

invokeai/frontend/web/src/features/gallery/hooks/useGalleryPagination.ts

@@ -4,19 +4,18 @@ import { useGetBoardAssetsTotalQuery, useGetBoardImagesTotalQuery } from "../../
 import { useListImagesQuery } from "../../../services/api/endpoints/images";
 import { selectListImagesQueryArgs } from "../store/gallerySelectors";
 import { offsetChanged } from "../store/gallerySlice";
-import { IMAGE_LIMIT } from "../store/types";
 
 export const useGalleryPagination = () => {
     const dispatch = useAppDispatch();
-    const { offset } = useAppSelector((s) => s.gallery);
+    const { offset, limit } = useAppSelector((s) => s.gallery);
     const queryArgs = useAppSelector(selectListImagesQueryArgs);
 
     const { count, total } = useListImagesQuery(queryArgs, {
         selectFromResult: ({ data }) => ({ count: data?.items.length ?? 0, total: data?.total ?? 0 }),
     });
 
-    const currentPage = useMemo(() => Math.ceil(offset / IMAGE_LIMIT), [offset]);
+    const currentPage = useMemo(() => Math.ceil(offset / (limit || 0)), [offset, limit]);
-    const pages = useMemo(() => Math.ceil(total / IMAGE_LIMIT), [total]);
+    const pages = useMemo(() => Math.ceil(total / (limit || 0)), [total, limit]);
 
     const isNextEnabled = useMemo(() => {
         if (!count) {
@@ -32,26 +31,26 @@ export const useGalleryPagination = () => {
     }, [count, offset]);
 
     const goNext = useCallback(() => {
-        dispatch(offsetChanged(offset + IMAGE_LIMIT));
+        dispatch(offsetChanged(offset + (limit || 0)));
-    }, [dispatch, offset]);
+    }, [dispatch, offset, limit]);
 
     const goPrev = useCallback(() => {
-        dispatch(offsetChanged(Math.max(offset - IMAGE_LIMIT, 0)));
+        dispatch(offsetChanged(Math.max(offset - (limit || 0), 0)));
-    }, [dispatch, offset]);
+    }, [dispatch, offset, limit]);
 
     const goToPage = useCallback(
         (page: number) => {
             const p = Math.max(0, Math.min(page, pages - 1));
-            dispatch(offsetChanged(page * IMAGE_LIMIT));
+            dispatch(offsetChanged(page * (limit || 0)));
         },
-        [dispatch, pages]
+        [dispatch, pages, limit]
     );
     const goToFirst = useCallback(() => {
         dispatch(offsetChanged(0));
     }, [dispatch]);
     const goToLast = useCallback(() => {
-        dispatch(offsetChanged(pages * IMAGE_LIMIT));
+        dispatch(offsetChanged(pages * (limit || 0)));
-    }, [dispatch, pages]);
+    }, [dispatch, pages, limit]);
 
     // calculate the page buttons to display - current page with 3 around it
     const pageButtons = useMemo(() => {
@@ -89,10 +88,10 @@ export const useGalleryPagination = () => {
     const isLastEnabled = useMemo(() => currentPage < pages - 1, [currentPage, pages]);
 
     const rangeDisplay = useMemo(() => {
-        const startItem = currentPage * IMAGE_LIMIT + 1;
+        const startItem = currentPage * (limit || 0) + 1;
-        const endItem = Math.min((currentPage + 1) * IMAGE_LIMIT, total);
+        const endItem = Math.min((currentPage + 1) * (limit || 0), total);
         return `${startItem}-${endItem} of ${total}`;
-    }, [total, currentPage]);
+    }, [total, currentPage, limit]);
 
     const api = useMemo(
         () => ({

invokeai/frontend/web/src/features/gallery/store/gallerySelectors.ts

@@ -1,3 +1,4 @@
+import { SkipToken, 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';
@@ -10,11 +11,11 @@ export const selectLastSelectedImage = createMemoizedSelector(
 
 export const selectListImagesQueryArgs = createMemoizedSelector(
   selectGallerySlice,
-  (gallery): ListImagesArgs => ({
+  (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)
 );

invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts

@@ -19,7 +19,7 @@ const initialGalleryState: GalleryState = {
   selectedBoardId: 'none',
   galleryView: 'images',
   boardSearchText: '',
-  limit: IMAGE_LIMIT,
+  limit: undefined,
   offset: 0,
   isImageViewerOpen: true,
   imageToCompare: null,
@@ -72,7 +72,6 @@ export const gallerySlice = createSlice({
       state.selectedBoardId = action.payload.boardId;
       state.galleryView = 'images';
       state.offset = 0;
-      state.limit = IMAGE_LIMIT;
     },
     autoAddBoardIdChanged: (state, action: PayloadAction<BoardId>) => {
       if (!action.payload) {
@@ -108,6 +107,9 @@ export const gallerySlice = createSlice({
     offsetChanged: (state, action: PayloadAction<number>) => {
       state.offset = action.payload;
     },
+    limitChanged: (state, action: PayloadAction<number | undefined>) => {
+      state.limit = action.payload;
+    },
   },
   extraReducers: (builder) => {
     builder.addMatcher(isAnyBoardDeleted, (state, action) => {
@@ -150,7 +152,8 @@ export const {
   comparedImagesSwapped,
   comparisonFitChanged,
   comparisonModeCycled,
-  offsetChanged
+  offsetChanged,
+  limitChanged
 } = gallerySlice.actions;
 
 const isAnyBoardDeleted = isAnyOf(

invokeai/frontend/web/src/features/gallery/store/types.ts

@@ -2,7 +2,7 @@ import type { ImageCategory, ImageDTO } from 'services/api/types';
 
 export const IMAGE_CATEGORIES: ImageCategory[] = ['general'];
 export const ASSETS_CATEGORIES: ImageCategory[] = ['control', 'mask', 'user', 'other'];
-export const IMAGE_LIMIT = 20;
+export const IMAGE_LIMIT = 15;
 
 export type GalleryView = 'images' | 'assets';
 export type BoardId = 'none' | (string & Record<never, never>);
@@ -19,7 +19,7 @@ export type GalleryState = {
   galleryView: GalleryView;
   boardSearchText: string;
   offset: number;
-  limit: number;
+  limit: number | undefined;
   alwaysShowImageSizeBadge: boolean;
   imageToCompare: ImageDTO | null;
   comparisonMode: ComparisonMode;