tidy(ui): remove unused progress related logic and components

invokeai/frontend/web/src/features/gallery/components/ImageViewer/GenerationProgressPanel.tsx

@@ -1,15 +0,0 @@
-import { Flex } from '@invoke-ai/ui-library';
-import { ProgressImage } from 'features/gallery/components/ImageViewer/ProgressImage';
-import { memo } from 'react';
-
-import { ProgressIndicator } from './ProgressIndicator';
-
-export const GenerationProgressPanel = memo(() => {
-  return (
-    <Flex position="relative" flexDir="column" w="full" h="full" overflow="hidden">
-      <ProgressImage />
-      <ProgressIndicator position="absolute" top={6} right={6} size={8} />
-    </Flex>
-  );
-});
-GenerationProgressPanel.displayName = 'GenerationProgressPanel';

invokeai/frontend/web/src/features/gallery/components/ImageViewer/ProgressImage.tsx

@@ -1,82 +0,0 @@
-import type { SystemStyleObject } from '@invoke-ai/ui-library';
-import { Badge, Flex, Image } from '@invoke-ai/ui-library';
-import { useStore } from '@nanostores/react';
-import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/store/storeHooks';
-import { IAINoContentFallback } from 'common/components/IAIImageFallback';
-import { selectSystemSlice } from 'features/system/store/systemSlice';
-import { memo, useMemo } from 'react';
-import { PiPulseBold } from 'react-icons/pi';
-import { useIsGenerationInProgress } from 'services/api/endpoints/queue';
-import { $lastProgressImage } from 'services/events/stores';
-
-const selectShouldAntialiasProgressImage = createSelector(
-  selectSystemSlice,
-  (system) => system.shouldAntialiasProgressImage
-);
-
-export const ProgressImage = memo(() => {
-  const isGenerationInProgress = useIsGenerationInProgress();
-  const progressImage = useStore($lastProgressImage);
-  const shouldAntialiasProgressImage = useAppSelector(selectShouldAntialiasProgressImage);
-
-  const sx = useMemo<SystemStyleObject>(
-    () => ({
-      imageRendering: shouldAntialiasProgressImage ? 'auto' : 'pixelated',
-    }),
-    [shouldAntialiasProgressImage]
-  );
-
-  if (!isGenerationInProgress) {
-    return (
-      <Flex width="full" height="full" alignItems="center" justifyContent="center">
-        <IAINoContentFallback icon={PiPulseBold} label="No Generation in Progress" />
-      </Flex>
-    );
-  }
-
-  if (!progressImage) {
-    return (
-      <Flex width="full" height="full" position="relative" minW={0} minH={0}>
-        <Badge
-          position="absolute"
-          top={2}
-          left={2}
-          color="base.300"
-          borderColor="base.700"
-          borderWidth={1}
-          bg="base.900"
-          opacity="0.8"
-          fontSize="sm"
-          fontWeight="semibold"
-          zIndex="docked"
-          pointerEvents="none"
-          borderRadius="base"
-        >
-          Waiting for Image
-        </Badge>
-      </Flex>
-    );
-  }
-
-  return (
-    <Flex width="full" height="full" alignItems="center" justifyContent="center" minW={0} minH={0}>
-      <Image
-        src={progressImage.dataURL}
-        width={progressImage.width}
-        height={progressImage.height}
-        draggable={false}
-        data-testid="progress-image"
-        objectFit="contain"
-        maxWidth="full"
-        maxHeight="full"
-        borderRadius="base"
-        sx={sx}
-        minH={0}
-        minW={0}
-      />
-    </Flex>
-  );
-});
-
-ProgressImage.displayName = 'ProgressImage';

invokeai/frontend/web/src/features/gallery/components/ImageViewer/ProgressIndicator.tsx

@@ -1,38 +0,0 @@
-import type { CircularProgressProps, SystemStyleObject } from '@invoke-ai/ui-library';
-import { CircularProgress, Tooltip } from '@invoke-ai/ui-library';
-import { useStore } from '@nanostores/react';
-import { memo } from 'react';
-import { useIsGenerationInProgress } from 'services/api/endpoints/queue';
-import { $lastProgressEvent, formatProgressMessage } from 'services/events/stores';
-
-const circleStyles: SystemStyleObject = {
-  circle: {
-    transitionProperty: 'none',
-    transitionDuration: '0s',
-  },
-};
-
-export const ProgressIndicator = memo((props: CircularProgressProps) => {
-  const isGenerationInProgress = useIsGenerationInProgress();
-  const lastProgressEvent = useStore($lastProgressEvent);
-  if (!isGenerationInProgress) {
-    return null;
-  }
-  if (!lastProgressEvent) {
-    return null;
-  }
-  return (
-    <Tooltip label={formatProgressMessage(lastProgressEvent)}>
-      <CircularProgress
-        size="14px"
-        color="invokeBlue.500"
-        thickness={14}
-        isIndeterminate={!lastProgressEvent || lastProgressEvent.percentage === null}
-        value={lastProgressEvent?.percentage ? lastProgressEvent.percentage * 100 : undefined}
-        sx={circleStyles}
-        {...props}
-      />
-    </Tooltip>
-  );
-});
-ProgressIndicator.displayName = 'ProgressMessage';

invokeai/frontend/web/src/features/ui/layouts/canvas-tab-auto-layout.tsx

@@ -3,7 +3,6 @@ import { DockviewReact, GridviewReact, LayoutPriority, Orientation } from 'dockv
 import { CanvasLayersPanel } from 'features/controlLayers/components/CanvasLayersPanelContent';
 import { BoardsPanel } from 'features/gallery/components/BoardsListPanelContent';
 import { GalleryPanel } from 'features/gallery/components/Gallery';
-import { GenerationProgressPanel } from 'features/gallery/components/ImageViewer/GenerationProgressPanel';
 import { ImageViewerPanel } from 'features/gallery/components/ImageViewer/ImageViewerPanel';
 import { FloatingCanvasLeftPanelButtons } from 'features/ui/components/FloatingLeftPanelButtons';
 import { FloatingRightPanelButtons } from 'features/ui/components/FloatingRightPanelButtons';
@@ -42,7 +41,6 @@ import {
   LEFT_PANEL_ID,
   LEFT_PANEL_MIN_SIZE_PX,
   MAIN_PANEL_ID,
-  PROGRESS_PANEL_ID,
   RIGHT_PANEL_ID,
   RIGHT_PANEL_MIN_SIZE_PX,
   SETTINGS_PANEL_ID,
@@ -60,7 +58,6 @@ const mainPanelComponents: AutoLayoutDockviewComponents = {
   [LAUNCHPAD_PANEL_ID]: withPanelContainer(CanvasLaunchpadPanel),
   [WORKSPACE_PANEL_ID]: withPanelContainer(CanvasWorkspacePanel),
   [VIEWER_PANEL_ID]: withPanelContainer(ImageViewerPanel),
-  [PROGRESS_PANEL_ID]: withPanelContainer(GenerationProgressPanel),
 };
 
 const initializeCenterPanelLayout = (tab: TabName, api: DockviewApi) => {

invokeai/frontend/web/src/features/ui/layouts/generate-tab-auto-layout.tsx

@@ -2,7 +2,6 @@ import type { DockviewApi, GridviewApi, IDockviewReactProps, IGridviewReactProps
 import { DockviewReact, GridviewReact, LayoutPriority, Orientation } from 'dockview';
 import { BoardsPanel } from 'features/gallery/components/BoardsListPanelContent';
 import { GalleryPanel } from 'features/gallery/components/Gallery';
-import { GenerationProgressPanel } from 'features/gallery/components/ImageViewer/GenerationProgressPanel';
 import { ImageViewerPanel } from 'features/gallery/components/ImageViewer/ImageViewerPanel';
 import { FloatingLeftPanelButtons } from 'features/ui/components/FloatingLeftPanelButtons';
 import { FloatingRightPanelButtons } from 'features/ui/components/FloatingRightPanelButtons';
@@ -38,7 +37,6 @@ import {
   LEFT_PANEL_ID,
   LEFT_PANEL_MIN_SIZE_PX,
   MAIN_PANEL_ID,
-  PROGRESS_PANEL_ID,
   RIGHT_PANEL_ID,
   RIGHT_PANEL_MIN_SIZE_PX,
   SETTINGS_PANEL_ID,
@@ -54,7 +52,6 @@ const tabComponents = {
 const mainPanelComponents: AutoLayoutDockviewComponents = {
   [LAUNCHPAD_PANEL_ID]: withPanelContainer(GenerateLaunchpadPanel),
   [VIEWER_PANEL_ID]: withPanelContainer(ImageViewerPanel),
-  [PROGRESS_PANEL_ID]: withPanelContainer(GenerationProgressPanel),
 };
 
 const initializeMainPanelLayout = (tab: TabName, api: DockviewApi) => {

invokeai/frontend/web/src/features/ui/layouts/shared.ts

@@ -5,7 +5,6 @@ export const RIGHT_PANEL_ID = 'right';
 export const LAUNCHPAD_PANEL_ID = 'launchpad';
 export const WORKSPACE_PANEL_ID = 'workspace';
 export const VIEWER_PANEL_ID = 'viewer';
-export const PROGRESS_PANEL_ID = 'progress';
 
 export const BOARDS_PANEL_ID = 'boards';
 export const GALLERY_PANEL_ID = 'gallery';

invokeai/frontend/web/src/features/ui/layouts/upscaling-tab-auto-layout.tsx

@@ -2,7 +2,6 @@ import type { DockviewApi, GridviewApi, IDockviewReactProps, IGridviewReactProps
 import { DockviewReact, GridviewReact, LayoutPriority, Orientation } from 'dockview';
 import { BoardsPanel } from 'features/gallery/components/BoardsListPanelContent';
 import { GalleryPanel } from 'features/gallery/components/Gallery';
-import { GenerationProgressPanel } from 'features/gallery/components/ImageViewer/GenerationProgressPanel';
 import { ImageViewerPanel } from 'features/gallery/components/ImageViewer/ImageViewerPanel';
 import { FloatingLeftPanelButtons } from 'features/ui/components/FloatingLeftPanelButtons';
 import { FloatingRightPanelButtons } from 'features/ui/components/FloatingRightPanelButtons';
@@ -36,7 +35,6 @@ import {
   LEFT_PANEL_ID,
   LEFT_PANEL_MIN_SIZE_PX,
   MAIN_PANEL_ID,
-  PROGRESS_PANEL_ID,
   RIGHT_PANEL_ID,
   RIGHT_PANEL_MIN_SIZE_PX,
   SETTINGS_PANEL_ID,
@@ -54,7 +52,6 @@ const tabComponents = {
 const mainPanelComponents: AutoLayoutDockviewComponents = {
   [LAUNCHPAD_PANEL_ID]: withPanelContainer(UpscalingLaunchpadPanel),
   [VIEWER_PANEL_ID]: withPanelContainer(ImageViewerPanel),
-  [PROGRESS_PANEL_ID]: withPanelContainer(GenerationProgressPanel),
 };
 
 const initializeMainPanelLayout = (tab: TabName, api: DockviewApi) => {

invokeai/frontend/web/src/features/ui/layouts/workflows-tab-auto-layout.tsx

@@ -2,7 +2,6 @@ import type { DockviewApi, GridviewApi, IDockviewReactProps, IGridviewReactProps
 import { DockviewReact, GridviewReact, LayoutPriority, Orientation } from 'dockview';
 import { BoardsPanel } from 'features/gallery/components/BoardsListPanelContent';
 import { GalleryPanel } from 'features/gallery/components/Gallery';
-import { GenerationProgressPanel } from 'features/gallery/components/ImageViewer/GenerationProgressPanel';
 import { ImageViewerPanel } from 'features/gallery/components/ImageViewer/ImageViewerPanel';
 import NodeEditor from 'features/nodes/components/NodeEditor';
 import WorkflowsTabLeftPanel from 'features/nodes/components/sidePanel/WorkflowsTabLeftPanel';
@@ -38,7 +37,6 @@ import {
   LEFT_PANEL_ID,
   LEFT_PANEL_MIN_SIZE_PX,
   MAIN_PANEL_ID,
-  PROGRESS_PANEL_ID,
   RIGHT_PANEL_ID,
   RIGHT_PANEL_MIN_SIZE_PX,
   SETTINGS_PANEL_ID,
@@ -57,7 +55,6 @@ const mainPanelComponents: AutoLayoutDockviewComponents = {
   [LAUNCHPAD_PANEL_ID]: withPanelContainer(WorkflowsLaunchpadPanel),
   [WORKSPACE_PANEL_ID]: withPanelContainer(NodeEditor),
   [VIEWER_PANEL_ID]: withPanelContainer(ImageViewerPanel),
-  [PROGRESS_PANEL_ID]: withPanelContainer(GenerationProgressPanel),
 };
 
 const initializeMainPanelLayout = (tab: TabName, api: DockviewApi) => {

invokeai/frontend/web/src/services/events/setEventListeners.tsx

@@ -31,13 +31,7 @@ import type { ClientToServerEvents, ServerToClientEvents } from 'services/events
 import type { Socket } from 'socket.io-client';
 import type { JsonObject } from 'type-fest';
 
-import {
-  $lastProgressEvent,
-  $lastUpscalingProgressEvent,
-  $lastUpscalingProgressImage,
-  $lastWorkflowsProgressEvent,
-  $lastWorkflowsProgressImage,
-} from './stores';
+import { $lastProgressEvent } from './stores';
 
 const log = logger('events');
 
@@ -108,7 +102,7 @@ export const setEventListeners = ({ socket, store, setIsConnected }: SetEventLis
       log.trace({ data } as JsonObject, `Received event for already-finished queue item ${data.item_id}`);
       return;
     }
-    const { invocation_source_id, invocation, session_id, image, origin, percentage, message } = data;
+    const { invocation_source_id, invocation, image, origin, percentage, message } = data;
 
     let _message = 'Invocation progress';
     if (message) {
@@ -123,20 +117,7 @@ export const setEventListeners = ({ socket, store, setIsConnected }: SetEventLis
 
     $lastProgressEvent.set(data);
 
-    if (origin === 'upscaling') {
-      $lastUpscalingProgressEvent.set(data);
-      if (image) {
-        $lastUpscalingProgressImage.set({ sessionId: session_id, image });
-      }
-    }
-
     if (origin === 'workflows') {
-      $lastWorkflowsProgressEvent.set(data);
-
-      if (image) {
-        $lastWorkflowsProgressImage.set({ sessionId: session_id, image });
-      }
-
       const nes = deepClone($nodeExecutionStates.get()[invocation_source_id]);
       if (nes) {
         nes.status = zNodeStatus.enum.IN_PROGRESS;

invokeai/frontend/web/src/services/events/stores.ts

@@ -1,5 +1,4 @@
 import { round } from 'es-toolkit/compat';
-import type { EphemeralProgressImage } from 'features/controlLayers/store/types';
 import { atom, computed, map } from 'nanostores';
 import type { S } from 'services/api/types';
 import type { AppSocket } from 'services/events/types';
@@ -10,12 +9,6 @@ export const $socketOptions = map<Partial<ManagerOptions & SocketOptions>>({});
 export const $isConnected = atom<boolean>(false);
 export const $lastProgressEvent = atom<S['InvocationProgressEvent'] | null>(null);
 
-export const $lastWorkflowsProgressEvent = atom<S['InvocationProgressEvent'] | null>(null);
-export const $lastWorkflowsProgressImage = atom<EphemeralProgressImage | null>(null);
-export const $lastUpscalingProgressEvent = atom<S['InvocationProgressEvent'] | null>(null);
-export const $lastUpscalingProgressImage = atom<EphemeralProgressImage | null>(null);
-
-export const $lastProgressImage = computed($lastProgressEvent, (val) => val?.image ?? null);
 export const $lastProgressMessage = computed($lastProgressEvent, (val) => {
   if (!val) {
     return null;