feat(ui): canvas/viewer panel tabs show progress

Author: psychedelicious

invokeai/frontend/web/public/locales/en.json

@@ -1962,7 +1962,6 @@
         "recalculateRects": "Recalculate Rects",
         "clipToBbox": "Clip Strokes to Bbox",
         "outputOnlyMaskedRegions": "Output Only Generated Regions",
-        "saveAllImagesToGallery": "Save All Images to Gallery",
         "addLayer": "Add Layer",
         "duplicate": "Duplicate",
         "moveToFront": "Move to Front",
@@ -2332,7 +2331,8 @@
                 "alert": "Preserving Masked Region"
             },
             "saveAllImagesToGallery": {
-                "alert": "Sending images to Gallery, bypassing Canvas"
+                "label": "Send New Generations to Gallery",
+                "alert": "Sending new generations to Gallery, bypassing Canvas"
             },
             "isolatedStagingPreview": "Isolated Staging Preview",
             "isolatedPreview": "Isolated Preview",

invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsSaveAllImagesToGalleryCheckbox.tsx

@@ -16,7 +16,7 @@ export const CanvasSettingsSaveAllImagesToGalleryCheckbox = memo(() => {
   }, [dispatch]);
   return (
     <FormControl w="full">
-      <FormLabel flexGrow={1}>{t('controlLayers.saveAllImagesToGallery')}</FormLabel>
+      <FormLabel flexGrow={1}>{t('controlLayers.settings.saveAllImagesToGallery.label')}</FormLabel>
       <Checkbox isChecked={saveAllImagesToGallery} onChange={onChange} />
     </FormControl>
   );

invokeai/frontend/web/src/features/queue/hooks/useCurrentQueueItemDestination.ts

@@ -0,0 +1,11 @@
+import { useGetCurrentQueueItemQuery } from 'services/api/endpoints/queue';
+
+export const useCurrentQueueItemDestination = () => {
+  const { currentQueueItemDestination } = useGetCurrentQueueItemQuery(undefined, {
+    selectFromResult: ({ data }) => ({
+      currentQueueItemDestination: data?.destination ?? null,
+    }),
+  });
+
+  return currentQueueItemDestination;
+};

invokeai/frontend/web/src/features/queue/hooks/useCurrentQueueItemId.ts

@@ -1,9 +1,9 @@
-import { useGetQueueStatusQuery } from 'services/api/endpoints/queue';
+import { useGetCurrentQueueItemQuery } from 'services/api/endpoints/queue';
 
 export const useCurrentQueueItemId = () => {
-  const { currentQueueItemId } = useGetQueueStatusQuery(undefined, {
+  const { currentQueueItemId } = useGetCurrentQueueItemQuery(undefined, {
     selectFromResult: ({ data }) => ({
-      currentQueueItemId: data?.queue.item_id ?? null,
+      currentQueueItemId: data?.item_id ?? null,
     }),
   });
 

invokeai/frontend/web/src/features/queue/hooks/useInvoke.ts

@@ -2,6 +2,7 @@ import { useStore } from '@nanostores/react';
 import { logger } from 'app/logging/logger';
 import { useAppSelector } from 'app/store/storeHooks';
 import { withResultAsync } from 'common/util/result';
+import { selectSaveAllImagesToGallery } from 'features/controlLayers/store/canvasSettingsSlice';
 import { useIsWorkflowEditorLocked } from 'features/nodes/hooks/useIsWorkflowEditorLocked';
 import { useEnqueueWorkflows } from 'features/queue/hooks/useEnqueueWorkflows';
 import { $isReadyToEnqueue } from 'features/queue/store/readiness';
@@ -15,7 +16,6 @@ import { enqueueMutationFixedCacheKeyOptions, useEnqueueBatchMutation } from 'se
 import { useEnqueueCanvas } from './useEnqueueCanvas';
 import { useEnqueueGenerate } from './useEnqueueGenerate';
 import { useEnqueueUpscaling } from './useEnqueueUpscaling';
-import { selectSaveAllImagesToGallery } from 'features/controlLayers/store/canvasSettingsSlice';
 
 const log = logger('generation');
 
@@ -75,7 +75,7 @@ export const useInvoke = () => {
     } else if (tabName === 'canvas') {
       navigationApi.focusPanel(tabName, WORKSPACE_PANEL_ID);
     }
-  }, [enqueue, tabName]);
+  }, [enqueue, saveAllImagesToGallery, tabName]);
 
   const enqueueFront = useCallback(() => {
     enqueue(true, false);
@@ -90,7 +90,7 @@ export const useInvoke = () => {
     } else if (tabName === 'canvas') {
       navigationApi.focusPanel(tabName, WORKSPACE_PANEL_ID);
     }
-  }, [enqueue, tabName]);
+  }, [enqueue, saveAllImagesToGallery, tabName]);
 
   return { enqueueBack, enqueueFront, isLoading, isDisabled: !isReady || isLocked, enqueue };
 };

invokeai/frontend/web/src/features/ui/layouts/TabWithoutCloseButton.tsx renamed to invokeai/frontend/web/src/features/ui/layouts/DockviewTab.tsx

@@ -7,7 +7,7 @@ import { memo, useCallback, useRef } from 'react';
 import type { PanelParameters } from './auto-layout-context';
 import { useHackOutDvTabDraggable } from './use-hack-out-dv-tab-draggable';
 
-export const TabWithoutCloseButton = memo((props: IDockviewPanelHeaderProps<PanelParameters>) => {
+export const DockviewTab = memo((props: IDockviewPanelHeaderProps<PanelParameters>) => {
   const ref = useRef<HTMLDivElement>(null);
   const setActive = useCallback(() => {
     if (!props.api.isActive) {
@@ -31,4 +31,4 @@ export const TabWithoutCloseButton = memo((props: IDockviewPanelHeaderProps<Pane
     </Flex>
   );
 });
-TabWithoutCloseButton.displayName = 'TabWithoutCloseButton';
+DockviewTab.displayName = 'DockviewTab';

invokeai/frontend/web/src/features/ui/layouts/DockviewTabCanvasViewer.tsx

@@ -0,0 +1,43 @@
+import { Flex, Text } from '@invoke-ai/ui-library';
+import { setFocusedRegion } from 'common/hooks/focus';
+import { useCallbackOnDragEnter } from 'common/hooks/useCallbackOnDragEnter';
+import type { IDockviewPanelHeaderProps } from 'dockview';
+import { useCurrentQueueItemDestination } from 'features/queue/hooks/useCurrentQueueItemDestination';
+import ProgressBar from 'features/system/components/ProgressBar';
+import { memo, useCallback, useRef } from 'react';
+import { useIsGenerationInProgress } from 'services/api/endpoints/queue';
+
+import type { PanelParameters } from './auto-layout-context';
+import { useHackOutDvTabDraggable } from './use-hack-out-dv-tab-draggable';
+
+export const DockviewTabCanvasViewer = memo((props: IDockviewPanelHeaderProps<PanelParameters>) => {
+  const isGenerationInProgress = useIsGenerationInProgress();
+  const currentQueueItemDestination = useCurrentQueueItemDestination();
+
+  const ref = useRef<HTMLDivElement>(null);
+  const setActive = useCallback(() => {
+    if (!props.api.isActive) {
+      props.api.setActive();
+    }
+  }, [props.api]);
+
+  useCallbackOnDragEnter(setActive, ref, 300);
+
+  const onPointerDown = useCallback(() => {
+    setFocusedRegion(props.params.focusRegion);
+  }, [props.params.focusRegion]);
+
+  useHackOutDvTabDraggable(ref);
+
+  return (
+    <Flex ref={ref} position="relative" alignItems="center" h="full" onPointerDown={onPointerDown}>
+      <Text userSelect="none" px={4}>
+        {props.api.title ?? props.api.id}
+      </Text>
+      {currentQueueItemDestination === 'canvas' && isGenerationInProgress && (
+        <ProgressBar position="absolute" bottom={0} left={0} right={0} h={1} borderRadius="none" />
+      )}
+    </Flex>
+  );
+});
+DockviewTabCanvasViewer.displayName = 'DockviewTabCanvasViewer';

invokeai/frontend/web/src/features/ui/layouts/DockviewTabCanvasWorkspace.tsx

@@ -0,0 +1,46 @@
+import { Flex, Text } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
+import { setFocusedRegion } from 'common/hooks/focus';
+import { useCallbackOnDragEnter } from 'common/hooks/useCallbackOnDragEnter';
+import type { IDockviewPanelHeaderProps } from 'dockview';
+import { selectCanvasSessionId } from 'features/controlLayers/store/canvasStagingAreaSlice';
+import { useCurrentQueueItemDestination } from 'features/queue/hooks/useCurrentQueueItemDestination';
+import ProgressBar from 'features/system/components/ProgressBar';
+import { memo, useCallback, useRef } from 'react';
+import { useIsGenerationInProgress } from 'services/api/endpoints/queue';
+
+import type { PanelParameters } from './auto-layout-context';
+import { useHackOutDvTabDraggable } from './use-hack-out-dv-tab-draggable';
+
+export const DockviewTabCanvasWorkspace = memo((props: IDockviewPanelHeaderProps<PanelParameters>) => {
+  const isGenerationInProgress = useIsGenerationInProgress();
+  const canvasSessionId = useAppSelector(selectCanvasSessionId);
+  const currentQueueItemDestination = useCurrentQueueItemDestination();
+
+  const ref = useRef<HTMLDivElement>(null);
+  const setActive = useCallback(() => {
+    if (!props.api.isActive) {
+      props.api.setActive();
+    }
+  }, [props.api]);
+
+  useCallbackOnDragEnter(setActive, ref, 300);
+
+  const onPointerDown = useCallback(() => {
+    setFocusedRegion(props.params.focusRegion);
+  }, [props.params.focusRegion]);
+
+  useHackOutDvTabDraggable(ref);
+
+  return (
+    <Flex ref={ref} position="relative" alignItems="center" h="full" onPointerDown={onPointerDown}>
+      <Text userSelect="none" px={4}>
+        {props.api.title ?? props.api.id}
+      </Text>
+      {currentQueueItemDestination === canvasSessionId && isGenerationInProgress && (
+        <ProgressBar position="absolute" bottom={0} left={0} right={0} h={1} borderRadius="none" />
+      )}
+    </Flex>
+  );
+});
+DockviewTabCanvasWorkspace.displayName = 'DockviewTabCanvasWorkspace';

invokeai/frontend/web/src/features/ui/layouts/TabWithLaunchpadIcon.tsx renamed to invokeai/frontend/web/src/features/ui/layouts/DockviewTabLaunchpad.tsx

@@ -27,7 +27,7 @@ const TAB_ICONS: Record<TabName, IconType> = {
   queue: PiQueueBold,
 };
 
-export const TabWithLaunchpadIcon = memo((props: IDockviewPanelHeaderProps) => {
+export const DockviewTabLaunchpad = memo((props: IDockviewPanelHeaderProps) => {
   const ref = useRef<HTMLDivElement>(null);
   const activeTab = useAppSelector(selectActiveTab);
 
@@ -52,4 +52,4 @@ export const TabWithLaunchpadIcon = memo((props: IDockviewPanelHeaderProps) => {
     </Flex>
   );
 });
-TabWithLaunchpadIcon.displayName = 'TabWithLaunchpadIcon';
+DockviewTabLaunchpad.displayName = 'DockviewTabLaunchpad';

invokeai/frontend/web/src/features/ui/layouts/DockviewTabProgress.tsx

@@ -0,0 +1,41 @@
+import { Flex, Text } from '@invoke-ai/ui-library';
+import { setFocusedRegion } from 'common/hooks/focus';
+import { useCallbackOnDragEnter } from 'common/hooks/useCallbackOnDragEnter';
+import type { IDockviewPanelHeaderProps } from 'dockview';
+import ProgressBar from 'features/system/components/ProgressBar';
+import { memo, useCallback, useRef } from 'react';
+import { useIsGenerationInProgress } from 'services/api/endpoints/queue';
+
+import type { PanelParameters } from './auto-layout-context';
+import { useHackOutDvTabDraggable } from './use-hack-out-dv-tab-draggable';
+
+export const DockviewTabProgress = memo((props: IDockviewPanelHeaderProps<PanelParameters>) => {
+  const isGenerationInProgress = useIsGenerationInProgress();
+
+  const ref = useRef<HTMLDivElement>(null);
+  const setActive = useCallback(() => {
+    if (!props.api.isActive) {
+      props.api.setActive();
+    }
+  }, [props.api]);
+
+  useCallbackOnDragEnter(setActive, ref, 300);
+
+  const onPointerDown = useCallback(() => {
+    setFocusedRegion(props.params.focusRegion);
+  }, [props.params.focusRegion]);
+
+  useHackOutDvTabDraggable(ref);
+
+  return (
+    <Flex ref={ref} position="relative" alignItems="center" h="full" onPointerDown={onPointerDown}>
+      <Text userSelect="none" px={4}>
+        {props.api.title ?? props.api.id}
+      </Text>
+      {isGenerationInProgress && (
+        <ProgressBar position="absolute" bottom={0} left={0} right={0} h={1} borderRadius="none" />
+      )}
+    </Flex>
+  );
+});
+DockviewTabProgress.displayName = 'DockviewTabProgress';