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>

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')

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

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();
     },
   });
 };

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 = [];
         });
       }
     });

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 (
     <Flex
       flexDir="column"
-      borderRadius="base"
       aria-selected={isOpen}
       fontSize="sm"
+      borderRadius="base"
       justifyContent="center"
       sx={sx}
     >
       <Flex
+        minH={9}
         alignItems="center"
         gap={4}
         p={1.5}
@@ -128,10 +134,8 @@ const QueueItemComponent = ({ index, item, context }: InnerItemProps) => {
           <ButtonGroup size="xs" variant="ghost">
             <IAIIconButton
               onClick={handleCancelQueueItem}
+              isDisabled={isCanceled}
               isLoading={isLoading}
-              isDisabled={['canceled', 'completed', 'failed'].includes(
-                item.status
-              )}
               aria-label={t('queue.cancelItem')}
               icon={<FaTimes />}
             />

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}
       >
         <QueueItemData label={t('queue.status')} data={statusAndTiming} />
         <QueueItemData label={t('queue.item')} data={item_id} />
@@ -136,9 +137,17 @@ type QueueItemDataProps = { label: string; data: ReactNode };
 
 const QueueItemData = ({ label, data }: QueueItemDataProps) => {
   return (
-    <Flex flexDir="column" p={1} gap={1} overflow="hidden">
+    <Flex
+      flexDir="column"
+      justifyContent="flex-start"
+      p={1}
+      gap={1}
+      overflow="hidden"
+      h="full"
+      w="full"
+    >
       <Heading
-        size="sm"
+        size="md"
         overflow="hidden"
         textOverflow="ellipsis"
         whiteSpace="nowrap"

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

@@ -21,16 +21,16 @@ const QueueListHeader = () => {
       >
         <Text variant="subtext">#</Text>
       </Flex>
-      <Flex w={COLUMN_WIDTHS.statusBadge} alignItems="center">
+      <Flex ps={0.5} w={COLUMN_WIDTHS.statusBadge} alignItems="center">
         <Text variant="subtext">status</Text>
       </Flex>
-      <Flex w={COLUMN_WIDTHS.time} alignItems="center">
+      <Flex ps={0.5} w={COLUMN_WIDTHS.time} alignItems="center">
         <Text variant="subtext">time</Text>
       </Flex>
-      <Flex w={COLUMN_WIDTHS.batchId} alignItems="center">
+      <Flex ps={0.5} w={COLUMN_WIDTHS.batchId} alignItems="center">
         <Text variant="subtext">batch</Text>
       </Flex>
-      <Flex alignItems="center" w={COLUMN_WIDTHS.fieldValues}>
+      <Flex ps={0.5} w={COLUMN_WIDTHS.fieldValues} alignItems="center">
         <Text variant="subtext">batch field values</Text>
       </Flex>
     </Flex>

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({