From 84a4e6ae3f3d5a0f74bbb2b09ab1a0e85cb14376 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Mon, 1 Jul 2024 19:28:12 +1000 Subject: [PATCH] feat(ui): show queue item origin in queue list --- invokeai/frontend/web/public/locales/en.json | 6 +++++- .../components/QueueList/QueueItemComponent.tsx | 7 +++++++ .../components/QueueList/QueueItemDetail.tsx | 6 +++++- .../components/QueueList/QueueListHeader.tsx | 3 +++ .../queue/components/QueueList/constants.ts | 1 + .../queue/components/QueueList/useOriginText.ts | 16 ++++++++++++++++ 6 files changed, 37 insertions(+), 2 deletions(-) create mode 100644 invokeai/frontend/web/src/features/queue/components/QueueList/useOriginText.ts diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index 70568d371d..9b2afeccd3 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -326,6 +326,10 @@ "canceled": "Canceled", "completedIn": "Completed in", "batch": "Batch", + "origin": "Origin", + "originCanvas": "Canvas", + "originWorkflows": "Workflows", + "originOther": "Other", "batchFieldValues": "Batch Field Values", "item": "Item", "session": "Session", @@ -1563,7 +1567,7 @@ "copyToClipboard": "Copy to Clipboard", "cursorPosition": "Cursor Position", "darkenOutsideSelection": "Darken Outside Selection", - "discardAll": "Discard All", + "discardAll": "Discard All & Cancel Pending Generations", "discardCurrent": "Discard Current", "downloadAsImage": "Download As Image", "enableMask": "Enable Mask", diff --git a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx index 3565ebc3d6..f15e724527 100644 --- a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx +++ b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx @@ -1,6 +1,7 @@ import type { ChakraProps, CollapseProps } from '@invoke-ai/ui-library'; import { ButtonGroup, Collapse, Flex, IconButton, Text } from '@invoke-ai/ui-library'; import QueueStatusBadge from 'features/queue/components/common/QueueStatusBadge'; +import { useOriginText } from 'features/queue/components/QueueList/useOriginText'; import { useCancelQueueItem } from 'features/queue/hooks/useCancelQueueItem'; import { getSecondsFromTimestamps } from 'features/queue/util/getSecondsFromTimestamps'; import type { MouseEvent } from 'react'; @@ -50,6 +51,7 @@ const QueueItemComponent = ({ index, item, context }: InnerItemProps) => { }, [item]); const isCanceled = useMemo(() => ['canceled', 'completed', 'failed'].includes(item.status), [item.status]); + const originText = useOriginText(item.origin); const icon = useMemo(() => , []); return ( @@ -69,6 +71,11 @@ const QueueItemComponent = ({ index, item, context }: InnerItemProps) => { + + + {originText} + + {executionTime || '-'} diff --git a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx index d5b1e7dc59..23d304cc84 100644 --- a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx +++ b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx @@ -1,5 +1,6 @@ import { Button, ButtonGroup, Flex, Heading, Spinner, Text } from '@invoke-ai/ui-library'; import DataViewer from 'features/gallery/components/ImageMetadataViewer/DataViewer'; +import { useOriginText } from 'features/queue/components/QueueList/useOriginText'; import { useCancelBatch } from 'features/queue/hooks/useCancelBatch'; import { useCancelQueueItem } from 'features/queue/hooks/useCancelQueueItem'; import { getSecondsFromTimestamps } from 'features/queue/util/getSecondsFromTimestamps'; @@ -16,7 +17,7 @@ type Props = { }; const QueueItemComponent = ({ queueItemDTO }: Props) => { - const { session_id, batch_id, item_id } = queueItemDTO; + const { session_id, batch_id, item_id, origin } = queueItemDTO; const { t } = useTranslation(); const { cancelBatch, isLoading: isLoadingCancelBatch, isCanceled } = useCancelBatch(batch_id); @@ -24,6 +25,8 @@ const QueueItemComponent = ({ queueItemDTO }: Props) => { const { data: queueItem } = useGetQueueItemQuery(item_id); + const originText = useOriginText(origin); + const statusAndTiming = useMemo(() => { if (!queueItem) { return t('common.loading'); @@ -50,6 +53,7 @@ const QueueItemComponent = ({ queueItemDTO }: Props) => { h={20} > + diff --git a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueListHeader.tsx b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueListHeader.tsx index 15be90b748..acfa57d710 100644 --- a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueListHeader.tsx +++ b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueListHeader.tsx @@ -22,6 +22,9 @@ const QueueListHeader = () => { {t('queue.status')} + + {t('queue.origin')} + {t('queue.time')} diff --git a/invokeai/frontend/web/src/features/queue/components/QueueList/constants.ts b/invokeai/frontend/web/src/features/queue/components/QueueList/constants.ts index b44a1daf9c..c4c48d177d 100644 --- a/invokeai/frontend/web/src/features/queue/components/QueueList/constants.ts +++ b/invokeai/frontend/web/src/features/queue/components/QueueList/constants.ts @@ -3,6 +3,7 @@ export const COLUMN_WIDTHS = { statusBadge: '5.7rem', statusDot: 2, time: '4rem', + origin: '5rem', batchId: '5rem', fieldValues: 'auto', actions: 'auto', diff --git a/invokeai/frontend/web/src/features/queue/components/QueueList/useOriginText.ts b/invokeai/frontend/web/src/features/queue/components/QueueList/useOriginText.ts new file mode 100644 index 0000000000..e4f2b34f4b --- /dev/null +++ b/invokeai/frontend/web/src/features/queue/components/QueueList/useOriginText.ts @@ -0,0 +1,16 @@ +import { useTranslation } from 'react-i18next'; +import type { SessionQueueItemDTO } from 'services/api/types'; + +export const useOriginText = (origin: SessionQueueItemDTO['origin']) => { + const { t } = useTranslation(); + + if (origin === 'canvas') { + return t('queue.originCanvas'); + } + + if (origin === 'workflows') { + return t('queue.originWorkflows'); + } + + return t('queue.originOther'); +};