Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): show queue item origin in queue list

Browse Source
This commit is contained in:
psychedelicious 2024-07-01 19:28:12 +10:00
parent f283bfd68f
commit 84a4e6ae3f
6 changed files with 37 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
invokeai/frontend/web/public/locales/en.json
View File

@ -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",

7
invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx
View File

@ -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(() => <PiXBold />, []);
return (
@ -69,6 +71,11 @@ const QueueItemComponent = ({ index, item, context }: InnerItemProps) => {
<Flex w={COLUMN_WIDTHS.statusBadge} alignItems="center" flexShrink={0}>
<QueueStatusBadge status={item.status} />
</Flex>
<Flex w={COLUMN_WIDTHS.origin} flexShrink={0}>
<Text overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap" alignItems="center">
{originText}
</Text>
</Flex>
<Flex w={COLUMN_WIDTHS.time} alignItems="center" flexShrink={0}>
{executionTime || '-'}
</Flex>

6
invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx
View File

@ -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}
>
<QueueItemData label={t('queue.status')} data={statusAndTiming} />
<QueueItemData label={t('queue.origin')} data={originText} />
<QueueItemData label={t('queue.item')} data={item_id} />
<QueueItemData label={t('queue.batch')} data={batch_id} />
<QueueItemData label={t('queue.session')} data={session_id} />

3
invokeai/frontend/web/src/features/queue/components/QueueList/QueueListHeader.tsx
View File

@ -22,6 +22,9 @@ const QueueListHeader = () => {
<Flex ps={0.5} w={COLUMN_WIDTHS.statusBadge} alignItems="center">
<Text variant="subtext">{t('queue.status')}</Text>
</Flex>
<Flex ps={0.5} w={COLUMN_WIDTHS.origin} alignItems="center">
<Text variant="subtext">{t('queue.origin')}</Text>
</Flex>
<Flex ps={0.5} w={COLUMN_WIDTHS.time} alignItems="center">
<Text variant="subtext">{t('queue.time')}</Text>
</Flex>

1
invokeai/frontend/web/src/features/queue/components/QueueList/constants.ts
View File

@ -3,6 +3,7 @@ export const COLUMN_WIDTHS = {
statusBadge: '5.7rem',
statusDot: 2,
time: '4rem',
origin: '5rem',
batchId: '5rem',
fieldValues: 'auto',
actions: 'auto',

16
invokeai/frontend/web/src/features/queue/components/QueueList/useOriginText.ts Normal file
View File

@ -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');
};