From a0919423f18a61133ff1e0f791a5f0a08798fe5e Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 24 Sep 2024 17:07:36 +1000
Subject: [PATCH] fix(ui): use correct BoardTooltip component w/ thumbnail
 image

---
 .../Boards/BoardsList/BoardTooltip.tsx        | 32 ++++++++-----------
 .../Boards/BoardsList/BoardTotalsTooltip.tsx  | 12 -------
 .../Boards/BoardsList/GalleryBoard.tsx        |  9 +++---
 .../Boards/BoardsList/NoBoardBoard.tsx        | 10 ++----
 4 files changed, 21 insertions(+), 42 deletions(-)
 delete mode 100644 invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardTotalsTooltip.tsx

diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardTooltip.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardTooltip.tsx
index 63ba2991cfc..e3b30666b0e 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardTooltip.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardTooltip.tsx
@@ -1,27 +1,23 @@
 import { Flex, Image, Text } from '@invoke-ai/ui-library';
 import { skipToken } from '@reduxjs/toolkit/query';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useGetBoardAssetsTotalQuery, useGetBoardImagesTotalQuery } from 'services/api/endpoints/boards';
 import { useGetImageDTOQuery } from 'services/api/endpoints/images';
-import type { BoardDTO } from 'services/api/types';
 
 type Props = {
-  board: BoardDTO | null;
+  imageCount: number;
+  assetCount: number;
+  isArchived: boolean;
+  coverImageName?: string | null;
 };
 
-export const BoardTooltip = ({ board }: Props) => {
+export const BoardTooltip = ({ imageCount, assetCount, isArchived, coverImageName }: Props) => {
   const { t } = useTranslation();
-  const { imagesTotal } = useGetBoardImagesTotalQuery(board?.board_id || 'none', {
-    selectFromResult: ({ data }) => {
-      return { imagesTotal: data?.total ?? 0 };
-    },
-  });
-  const { assetsTotal } = useGetBoardAssetsTotalQuery(board?.board_id || 'none', {
-    selectFromResult: ({ data }) => {
-      return { assetsTotal: data?.total ?? 0 };
-    },
-  });
-  const { currentData: coverImage } = useGetImageDTOQuery(board?.cover_image_name ?? skipToken);
+  const { currentData: coverImage } = useGetImageDTOQuery(coverImageName ?? skipToken);
+
+  const totalString = useMemo(() => {
+    return `${t('boards.imagesWithCount', { count: imageCount })}, ${t('boards.assetsWithCount', { count: assetCount })}${isArchived ? ` (${t('boards.archived')})` : ''}`;
+  }, [assetCount, imageCount, isArchived, t]);
 
   return (
     <Flex flexDir="column" alignItems="center" gap={1}>
@@ -34,13 +30,11 @@ export const BoardTooltip = ({ board }: Props) => {
           aspectRatio="1/1"
           borderRadius="base"
           borderBottomRadius="lg"
+          mt={1}
         />
       )}
       <Flex flexDir="column" alignItems="center">
-        <Text noOfLines={1}>
-          {t('boards.imagesWithCount', { count: imagesTotal })}, {t('boards.assetsWithCount', { count: assetsTotal })}
-        </Text>
-        {board?.archived && <Text>({t('boards.archived')})</Text>}
+        <Text noOfLines={1}>{totalString}</Text>
       </Flex>
     </Flex>
   );
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardTotalsTooltip.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardTotalsTooltip.tsx
deleted file mode 100644
index 01d6c226dd1..00000000000
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardTotalsTooltip.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { useTranslation } from 'react-i18next';
-
-type Props = {
-  imageCount: number;
-  assetCount: number;
-  isArchived: boolean;
-};
-
-export const BoardTotalsTooltip = ({ imageCount, assetCount, isArchived }: Props) => {
-  const { t } = useTranslation();
-  return `${t('boards.imagesWithCount', { count: imageCount })}, ${t('boards.assetsWithCount', { count: assetCount })}${isArchived ? ` (${t('boards.archived')})` : ''}`;
-};
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx
index 6f0c4c80d7e..9ae3d923544 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx
@@ -17,7 +17,7 @@ import IAIDroppable from 'common/components/IAIDroppable';
 import type { AddToBoardDropData } from 'features/dnd/types';
 import { AutoAddBadge } from 'features/gallery/components/Boards/AutoAddBadge';
 import BoardContextMenu from 'features/gallery/components/Boards/BoardContextMenu';
-import { BoardTotalsTooltip } from 'features/gallery/components/Boards/BoardsList/BoardTotalsTooltip';
+import { BoardTooltip } from 'features/gallery/components/Boards/BoardsList/BoardTooltip';
 import {
   selectAutoAddBoardId,
   selectAutoAssignBoardOnClick,
@@ -121,13 +121,14 @@ const GalleryBoard = ({ board, isSelected }: GalleryBoardProps) => {
       {(ref) => (
         <Tooltip
           label={
-            <BoardTotalsTooltip
+            <BoardTooltip
               imageCount={board.image_count}
               assetCount={board.asset_count}
-              isArchived={Boolean(board.archived)}
+              isArchived={board.archived}
+              coverImageName={board.cover_image_name}
             />
           }
-          openDelay={1000}
+          openDelay={500}
           placement="left"
           closeOnScroll
         >
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx
index 32cef15838d..61bb03446c3 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx
@@ -4,7 +4,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIDroppable from 'common/components/IAIDroppable';
 import type { RemoveFromBoardDropData } from 'features/dnd/types';
 import { AutoAddBadge } from 'features/gallery/components/Boards/AutoAddBadge';
-import { BoardTotalsTooltip } from 'features/gallery/components/Boards/BoardsList/BoardTotalsTooltip';
+import { BoardTooltip } from 'features/gallery/components/Boards/BoardsList/BoardTooltip';
 import NoBoardBoardContextMenu from 'features/gallery/components/Boards/NoBoardBoardContextMenu';
 import {
   selectAutoAddBoardId,
@@ -58,13 +58,9 @@ const NoBoardBoard = memo(({ isSelected }: Props) => {
       {(ref) => (
         <Tooltip
           label={
-            <BoardTotalsTooltip
-              imageCount={data?.image_count ?? 0}
-              assetCount={data?.asset_count ?? 0}
-              isArchived={false}
-            />
+            <BoardTooltip imageCount={data?.image_count ?? 0} assetCount={data?.asset_count ?? 0} isArchived={false} />
           }
-          openDelay={1000}
+          openDelay={500}
           placement="left"
           closeOnScroll
         >