up button support in gallery navigation

invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx

@@ -46,6 +46,7 @@ const CurrentImagePreview = () => {
     handleLoadMoreImages,
     areMoreImagesAvailable,
     isFetching,
+    handleTopImage
   } = useNextPrevImage();
 
   useHotkeys(
@@ -76,6 +77,14 @@ const CurrentImagePreview = () => {
     ]
   );
 
+  useHotkeys(
+    'up',
+    () => {
+      handleTopImage();
+    },
+    [handleTopImage]
+  );
+
   const { currentData: imageDTO } = useGetImageDTOQuery(imageName ?? skipToken);
 
   const draggableData = useMemo<TypesafeDraggableData | undefined>(() => {

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

@@ -136,7 +136,7 @@ const GalleryImage = (props: HoverableImageProps) => {
   }
 
   return (
-    <Box w="full" h="full" data-testid={`image-${imageDTO.image_name}`}>
+    <Box w="full" h="full" className='gallerygrid-image' data-testid={`image-${imageDTO.image_name}`}>
       <Flex
         ref={imageContainerRef}
         userSelect="none"

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

@@ -142,7 +142,7 @@ const GalleryImageGrid = () => {
   if (isSuccess && currentData) {
     return (
       <>
-        <Box ref={rootRef} data-overlayscrollbars="" h="100%">
+        <Box ref={rootRef} data-overlayscrollbars="" h="100%" id='gallery-grid'>
           <VirtuosoGrid
             style={virtuosoStyles}
             data={currentData.ids}

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

@@ -46,6 +46,7 @@ export const nextPrevImageButtonsSelector = createMemoizedSelector(
     const lastSelectedImage =
       state.gallery.selection[state.gallery.selection.length - 1];
     
+
     const isFetching = status === 'pending';
 
     if (!data || !lastSelectedImage || totalsData?.total === 0) {
@@ -68,11 +69,20 @@ export const nextPrevImageButtonsSelector = createMemoizedSelector(
     const currentImageIndex = images.findIndex(
       (i) => i.image_name === lastSelectedImage.image_name
     );
+    const widthOfGalleryImage = Object.values(document.getElementsByClassName("gallerygrid-image"))[0]?.clientWidth
+    const widthOfGalleryGrid = document.getElementById("gallery-grid")?.clientWidth
+
+    
+    const imagesPerRow = Math.floor((widthOfGalleryGrid ?? 0) / (widthOfGalleryImage ?? 1))
+    
+
     const nextImageIndex = clamp(currentImageIndex + 1, 0, images.length - 1);
     const prevImageIndex = clamp(currentImageIndex - 1, 0, images.length - 1);
+    const topImageIndex = clamp(currentImageIndex - imagesPerRow,0, images.length - 1)
 
     const nextImageId = images[nextImageIndex]?.image_name;
     const prevImageId = images[prevImageIndex]?.image_name;
+    const topImageId = images[topImageIndex]?.image_name
 
     const nextImage = nextImageId
       ? imagesSelectors.selectById(data, nextImageId)
@@ -80,6 +90,9 @@ export const nextPrevImageButtonsSelector = createMemoizedSelector(
     const prevImage = prevImageId
       ? imagesSelectors.selectById(data, prevImageId)
       : undefined;
+    const topImage = topImageId  
+      ? selectors.selectById(data, topImageId)
+      : undefined;
 
     const imagesLength = images.length;
 
@@ -93,6 +106,8 @@ export const nextPrevImageButtonsSelector = createMemoizedSelector(
       nextImageIndex,
       prevImageIndex,
       queryArgs,
+      topImageIndex,
+      topImage
     };
   }
 );
@@ -110,6 +125,8 @@ export const useNextPrevImage = () => {
     queryArgs,
     loadedImagesCount,
     currentImageIndex,
+    topImageIndex,
+    topImage
   } = useAppSelector(nextPrevImageButtonsSelector);
 
   const handlePrevImage = useCallback(() => {
@@ -152,6 +169,27 @@ export const useNextPrevImage = () => {
     }
   }, [dispatch, nextImage, nextImageIndex]);
 
+  const handleTopImage = useCallback(() => {
+    topImage && dispatch(imageSelected(topImage));
+    const range = $useNextPrevImageState.get().virtuosoRangeRef?.current;
+    const virtuoso = $useNextPrevImageState.get().virtuosoRef?.current;
+
+    if (!range || !virtuoso) {
+      return;
+    }
+
+    if (
+      topImageIndex !== undefined &&
+      (topImageIndex < range.startIndex || topImageIndex > range.endIndex)
+    ) {
+      virtuoso.scrollToIndex({
+        index: topImageIndex,
+        behavior: 'smooth',
+        align: getScrollToIndexAlign(topImageIndex, range),
+      });
+    }
+  },[dispatch, topImage, topImageIndex])
+
   const [listImages] = useLazyListImagesQuery();
 
   const handleLoadMoreImages = useCallback(() => {
@@ -170,5 +208,6 @@ export const useNextPrevImage = () => {
     areMoreImagesAvailable,
     handleLoadMoreImages,
     isFetching,
+    handleTopImage
   };
 };