feat(ui): more efficient board totals fetching

We only need to show the totals in the tooltip. Tooltips accpet a component for the tooltip label. The component isn't rendered until the tooltip is triggered.

Move the board total fetching into a tooltip component for the boards. Now we only fire these requests when the user mouses over the board

invokeai/frontend/web/public/locales/en.json

@@ -37,7 +37,11 @@
         "selectBoard": "Select a Board",
         "topMessage": "This board contains images used in the following features:",
         "uncategorized": "Uncategorized",
-        "downloadBoard": "Download Board"
+        "downloadBoard": "Download Board",
+        "imagesWithCount_one": "{{count}} image",
+        "imagesWithCount_other": "{{count}} images",
+        "assetsWithCount_one": "{{count}} asset",
+        "assetsWithCount_other": "{{count}} assets"
     },
     "accordions": {
         "generation": {

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardTotalsTooltip.tsx

@@ -0,0 +1,21 @@
+import { useTranslation } from 'react-i18next';
+import { useGetBoardImagesTotalQuery } from 'services/api/endpoints/boards';
+
+type Props = {
+  board_id: string;
+};
+
+export const BoardTotalsTooltip = ({ board_id }: Props) => {
+  const { t } = useTranslation();
+  const { imagesTotal } = useGetBoardImagesTotalQuery(board_id, {
+    selectFromResult: ({ data }) => {
+      return { imagesTotal: data?.total ?? 0 };
+    },
+  });
+  const { assetsTotal } = useGetBoardImagesTotalQuery(board_id, {
+    selectFromResult: ({ data }) => {
+      return { assetsTotal: data?.total ?? 0 };
+    },
+  });
+  return `${t('boards.imagesWithCount', { count: imagesTotal })}, ${t('boards.assetsWithCount', { count: assetsTotal })}`;
+};

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

@@ -8,15 +8,12 @@ import SelectionOverlay from 'common/components/SelectionOverlay';
 import type { AddToBoardDropData } from 'features/dnd/types';
 import AutoAddIcon from 'features/gallery/components/Boards/AutoAddIcon';
 import BoardContextMenu from 'features/gallery/components/Boards/BoardContextMenu';
+import { BoardTotalsTooltip } from 'features/gallery/components/Boards/BoardsList/BoardTotalsTooltip';
 import { autoAddBoardIdChanged, boardIdSelected, selectGallerySlice } from 'features/gallery/store/gallerySlice';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiImagesSquare } from 'react-icons/pi';
-import {
+import { useUpdateBoardMutation } from 'services/api/endpoints/boards';
-  useGetBoardAssetsTotalQuery,
-  useGetBoardImagesTotalQuery,
-  useUpdateBoardMutation,
-} from 'services/api/endpoints/boards';
 import { useGetImageDTOQuery } from 'services/api/endpoints/images';
 import type { BoardDTO } from 'services/api/types';
 
@@ -51,17 +48,6 @@ const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps
     setIsHovered(false);
   }, []);
 
-  const { data: imagesTotal } = useGetBoardImagesTotalQuery(board.board_id);
-  const { data: assetsTotal } = useGetBoardAssetsTotalQuery(board.board_id);
-  const tooltip = useMemo(() => {
-    if (imagesTotal?.total === undefined || assetsTotal?.total === undefined) {
-      return undefined;
-    }
-    return `${imagesTotal.total} image${imagesTotal.total === 1 ? '' : 's'}, ${
-      assetsTotal.total
-    } asset${assetsTotal.total === 1 ? '' : 's'}`;
-  }, [assetsTotal, imagesTotal]);
-
   const { currentData: coverImage } = useGetImageDTOQuery(board.cover_image_name ?? skipToken);
 
   const { board_name, board_id } = board;
@@ -132,7 +118,7 @@ const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps
       >
         <BoardContextMenu board={board} board_id={board_id} setBoardToDelete={setBoardToDelete}>
           {(ref) => (
-            <Tooltip label={tooltip} openDelay={1000}>
+            <Tooltip label={<BoardTotalsTooltip board_id={board.board_id} />} openDelay={1000}>
               <Flex
                 ref={ref}
                 onClick={handleSelectBoard}

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx

@@ -5,11 +5,11 @@ import SelectionOverlay from 'common/components/SelectionOverlay';
 import type { RemoveFromBoardDropData } from 'features/dnd/types';
 import AutoAddIcon from 'features/gallery/components/Boards/AutoAddIcon';
 import BoardContextMenu from 'features/gallery/components/Boards/BoardContextMenu';
+import { BoardTotalsTooltip } from 'features/gallery/components/Boards/BoardsList/BoardTotalsTooltip';
 import { autoAddBoardIdChanged, boardIdSelected } from 'features/gallery/store/gallerySlice';
 import InvokeLogoSVG from 'public/assets/images/invoke-symbol-wht-lrg.svg';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useGetBoardAssetsTotalQuery, useGetBoardImagesTotalQuery } from 'services/api/endpoints/boards';
 import { useBoardName } from 'services/api/hooks/useBoardName';
 
 interface Props {
@@ -29,17 +29,6 @@ const NoBoardBoard = memo(({ isSelected }: Props) => {
   }, [dispatch, autoAssignBoardOnClick]);
   const [isHovered, setIsHovered] = useState(false);
 
-  const { data: imagesTotal } = useGetBoardImagesTotalQuery('none');
-  const { data: assetsTotal } = useGetBoardAssetsTotalQuery('none');
-  const tooltip = useMemo(() => {
-    if (imagesTotal?.total === undefined || assetsTotal?.total === undefined) {
-      return undefined;
-    }
-    return `${imagesTotal.total} image${imagesTotal.total === 1 ? '' : 's'}, ${
-      assetsTotal.total
-    } asset${assetsTotal.total === 1 ? '' : 's'}`;
-  }, [assetsTotal, imagesTotal]);
-
   const handleMouseOver = useCallback(() => {
     setIsHovered(true);
   }, []);
@@ -71,7 +60,7 @@ const NoBoardBoard = memo(({ isSelected }: Props) => {
       >
         <BoardContextMenu board_id="none">
           {(ref) => (
-            <Tooltip label={tooltip} openDelay={1000}>
+            <Tooltip label={<BoardTotalsTooltip board_id="none" />} openDelay={1000}>
               <Flex
                 ref={ref}
                 onClick={handleSelectBoard}

invokeai/frontend/web/src/services/api/hooks/useBoardTotal.ts

@@ -1,18 +0,0 @@
-import { useAppSelector } from 'app/store/storeHooks';
-import type { BoardId } from 'features/gallery/store/types';
-import { useMemo } from 'react';
-import { useGetBoardAssetsTotalQuery, useGetBoardImagesTotalQuery } from 'services/api/endpoints/boards';
-
-export const useBoardTotal = (board_id: BoardId) => {
-  const galleryView = useAppSelector((s) => s.gallery.galleryView);
-
-  const { data: totalImages } = useGetBoardImagesTotalQuery(board_id);
-  const { data: totalAssets } = useGetBoardAssetsTotalQuery(board_id);
-
-  const currentViewTotal = useMemo(
-    () => (galleryView === 'images' ? totalImages?.total : totalAssets?.total),
-    [galleryView, totalAssets, totalImages]
-  );
-
-  return { totalImages, totalAssets, currentViewTotal };
-};