diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index 306151984a..df4a3778ee 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/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": { 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 new file mode 100644 index 0000000000..f6e301c3d3 --- /dev/null +++ b/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 })}`; +}; 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 f8c4f5ebcf..e5bf56a567 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 @@ -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 { - useGetBoardAssetsTotalQuery, - useGetBoardImagesTotalQuery, - useUpdateBoardMutation, -} from 'services/api/endpoints/boards'; +import { 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 > {(ref) => ( - + } openDelay={1000}> { }, [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) => { > {(ref) => ( - + } openDelay={1000}> { - 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 }; -};