From 32672cfeda4f47ae523042d2b79a790b8e54c254 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Thu, 21 Sep 2023 00:15:39 +1000 Subject: [PATCH] ui: misc small fixes (#4600) * feat(ui): tweak queue UI components * fix(ui): manually dispatch queue status query on queue item status change RTK Query occasionally aborts the query that occurs when the tag is invalidated, especially if multples of them fire in rapid succession. This resulted in the queue status and progress bar sometimes not reseting when the queue finishes its last item. Manually dispatch the query now to get around this. Eventually should probably move this to a socket so we don't need to keep responding to socket with HTTP requests. Just send ti directly via socket * chore(ui): remove errant console.logs * fix(ui): do not accumulate node outputs in outputs area * fix(ui): fix merge issue --------- Co-authored-by: Kent Keirsey <31807370+hipsterusername@users.noreply.github.com> --- .../listeners/controlNetImageProcessed.ts | 1 - .../socketio/socketInvocationComplete.ts | 1 - .../socketio/socketQueueItemStatusChanged.ts | 14 +++++++++----- .../web/src/features/nodes/store/nodesSlice.ts | 2 +- .../components/QueueList/QueueItemComponent.tsx | 12 ++++++++---- .../components/QueueList/QueueItemDetail.tsx | 15 ++++++++++++--- .../components/QueueList/QueueListHeader.tsx | 8 ++++---- .../subpanels/AddModelsPanel/SimpleAddModels.tsx | 1 - 8 files changed, 34 insertions(+), 20 deletions(-) diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlNetImageProcessed.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlNetImageProcessed.ts index 185ada39e8..814614da10 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlNetImageProcessed.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlNetImageProcessed.ts @@ -65,7 +65,6 @@ export const addControlNetImageProcessedListener = () => { ); const enqueueResult = await req.unwrap(); req.reset(); - console.log(enqueueResult.queue_item.session_id); log.debug( { enqueueResult: parseify(enqueueResult) }, t('queue.graphQueued') diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts index e2c97100af..b6d8acc82e 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts @@ -76,7 +76,6 @@ export const addInvocationCompleteEventListener = () => { categories: IMAGE_CATEGORIES, }, (draft) => { - console.log(draft); imagesAdapter.addOne(draft, imageDTO); } ) diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketQueueItemStatusChanged.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketQueueItemStatusChanged.ts index 241e1da92c..b0377e950b 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketQueueItemStatusChanged.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketQueueItemStatusChanged.ts @@ -9,7 +9,7 @@ import { startAppListening } from '../..'; export const addSocketQueueItemStatusChangedEventListener = () => { startAppListening({ actionCreator: socketQueueItemStatusChanged, - effect: (action, { dispatch }) => { + effect: async (action, { dispatch }) => { const log = logger('socketio'); const { queue_item_id: item_id, @@ -24,9 +24,6 @@ export const addSocketQueueItemStatusChangedEventListener = () => { dispatch( queueApi.util.updateQueryData('listQueueItems', undefined, (draft) => { - if (!draft) { - console.log('no draft!'); - } queueItemsAdapter.updateOne(draft, { id: item_id, changes: action.payload.data, @@ -38,12 +35,19 @@ export const addSocketQueueItemStatusChangedEventListener = () => { queueApi.util.invalidateTags([ 'CurrentSessionQueueItem', 'NextSessionQueueItem', - 'SessionQueueStatus', { type: 'SessionQueueItem', id: item_id }, { type: 'SessionQueueItemDTO', id: item_id }, { type: 'BatchStatus', id: queue_batch_id }, ]) ); + + const req = dispatch( + queueApi.endpoints.getQueueStatus.initiate(undefined, { + forceRefetch: true, + }) + ); + await req.unwrap(); + req.unsubscribe(); }, }); }; diff --git a/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts b/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts index 07dd8ad4ec..325ab1ff16 100644 --- a/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts +++ b/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts @@ -871,7 +871,7 @@ const nodesSlice = createSlice({ nes.error = null; nes.progress = null; nes.progressImage = null; - // do not reset nes.outputs, this allows a user to inspect the output of a node across batches + nes.outputs = []; }); } }); 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 637e6e20c2..7f4fd9bc9b 100644 --- a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx +++ b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx @@ -59,16 +59,22 @@ const QueueItemComponent = ({ index, item, context }: InnerItemProps) => { return `${seconds}s`; }, [item]); + const isCanceled = useMemo( + () => ['canceled', 'completed', 'failed'].includes(item.status), + [item.status] + ); + return ( { } /> 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 e0474a16de..7ce9733aae 100644 --- a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx +++ b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx @@ -31,7 +31,7 @@ const QueueItemComponent = ({ queueItemDTO }: Props) => { const statusAndTiming = useMemo(() => { if (!queueItem) { - return ''; + return t('common.loading'); } if (!queueItem.completed_at || !queueItem.started_at) { return t(`queue.${queueItem.status}`); @@ -62,6 +62,7 @@ const QueueItemComponent = ({ queueItemDTO }: Props) => { justifyContent="space-between" alignItems="center" borderRadius="base" + h={20} > @@ -136,9 +137,17 @@ type QueueItemDataProps = { label: string; data: ReactNode }; const QueueItemData = ({ label, data }: QueueItemDataProps) => { return ( - + { > # - + status - + time - + batch - + batch field values diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/SimpleAddModels.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/SimpleAddModels.tsx index a72e24f1b6..b2845f0e85 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/SimpleAddModels.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/SimpleAddModels.tsx @@ -58,7 +58,6 @@ export default function SimpleAddModels() { }) .catch((error) => { if (error) { - console.log(error); dispatch( addToast( makeToast({