From 4f3a5dcc4314873f6f3a85ee3c017af7a17c9b72 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Mon, 28 Jul 2025 18:44:57 +1000 Subject: [PATCH] tidy(ui): remove unused progress related logic and components --- .../ImageViewer/GenerationProgressPanel.tsx | 15 ---- .../components/ImageViewer/ProgressImage.tsx | 82 ------------------- .../ImageViewer/ProgressIndicator.tsx | 38 --------- .../ui/layouts/canvas-tab-auto-layout.tsx | 3 - .../ui/layouts/generate-tab-auto-layout.tsx | 3 - .../web/src/features/ui/layouts/shared.ts | 1 - .../ui/layouts/upscaling-tab-auto-layout.tsx | 3 - .../ui/layouts/workflows-tab-auto-layout.tsx | 3 - .../src/services/events/setEventListeners.tsx | 23 +----- .../web/src/services/events/stores.ts | 7 -- 10 files changed, 2 insertions(+), 176 deletions(-) delete mode 100644 invokeai/frontend/web/src/features/gallery/components/ImageViewer/GenerationProgressPanel.tsx delete mode 100644 invokeai/frontend/web/src/features/gallery/components/ImageViewer/ProgressImage.tsx delete mode 100644 invokeai/frontend/web/src/features/gallery/components/ImageViewer/ProgressIndicator.tsx diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/GenerationProgressPanel.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/GenerationProgressPanel.tsx deleted file mode 100644 index 4343c47d6e..0000000000 --- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/GenerationProgressPanel.tsx +++ /dev/null @@ -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 ( - - - - - ); -}); -GenerationProgressPanel.displayName = 'GenerationProgressPanel'; diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ProgressImage.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ProgressImage.tsx deleted file mode 100644 index a09f1fbe6d..0000000000 --- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ProgressImage.tsx +++ /dev/null @@ -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( - () => ({ - imageRendering: shouldAntialiasProgressImage ? 'auto' : 'pixelated', - }), - [shouldAntialiasProgressImage] - ); - - if (!isGenerationInProgress) { - return ( - - - - ); - } - - if (!progressImage) { - return ( - - - Waiting for Image - - - ); - } - - return ( - - - - ); -}); - -ProgressImage.displayName = 'ProgressImage'; diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ProgressIndicator.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ProgressIndicator.tsx deleted file mode 100644 index baca33b0e3..0000000000 --- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ProgressIndicator.tsx +++ /dev/null @@ -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 ( - - - - ); -}); -ProgressIndicator.displayName = 'ProgressMessage'; diff --git a/invokeai/frontend/web/src/features/ui/layouts/canvas-tab-auto-layout.tsx b/invokeai/frontend/web/src/features/ui/layouts/canvas-tab-auto-layout.tsx index cc4b8c4b7b..3df5a34a2a 100644 --- a/invokeai/frontend/web/src/features/ui/layouts/canvas-tab-auto-layout.tsx +++ b/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) => { diff --git a/invokeai/frontend/web/src/features/ui/layouts/generate-tab-auto-layout.tsx b/invokeai/frontend/web/src/features/ui/layouts/generate-tab-auto-layout.tsx index 5e433038a6..a99693608d 100644 --- a/invokeai/frontend/web/src/features/ui/layouts/generate-tab-auto-layout.tsx +++ b/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) => { diff --git a/invokeai/frontend/web/src/features/ui/layouts/shared.ts b/invokeai/frontend/web/src/features/ui/layouts/shared.ts index 1d469948b5..efb17037ee 100644 --- a/invokeai/frontend/web/src/features/ui/layouts/shared.ts +++ b/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'; diff --git a/invokeai/frontend/web/src/features/ui/layouts/upscaling-tab-auto-layout.tsx b/invokeai/frontend/web/src/features/ui/layouts/upscaling-tab-auto-layout.tsx index 005abdea30..91a35b183a 100644 --- a/invokeai/frontend/web/src/features/ui/layouts/upscaling-tab-auto-layout.tsx +++ b/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) => { diff --git a/invokeai/frontend/web/src/features/ui/layouts/workflows-tab-auto-layout.tsx b/invokeai/frontend/web/src/features/ui/layouts/workflows-tab-auto-layout.tsx index 808b01fee2..3a17be7f63 100644 --- a/invokeai/frontend/web/src/features/ui/layouts/workflows-tab-auto-layout.tsx +++ b/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) => { diff --git a/invokeai/frontend/web/src/services/events/setEventListeners.tsx b/invokeai/frontend/web/src/services/events/setEventListeners.tsx index c9fe2e9cb1..7e683a159a 100644 --- a/invokeai/frontend/web/src/services/events/setEventListeners.tsx +++ b/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; diff --git a/invokeai/frontend/web/src/services/events/stores.ts b/invokeai/frontend/web/src/services/events/stores.ts index 6cf124d1cb..6d9b89c88a 100644 --- a/invokeai/frontend/web/src/services/events/stores.ts +++ b/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>({}); export const $isConnected = atom(false); export const $lastProgressEvent = atom(null); -export const $lastWorkflowsProgressEvent = atom(null); -export const $lastWorkflowsProgressImage = atom(null); -export const $lastUpscalingProgressEvent = atom(null); -export const $lastUpscalingProgressImage = atom(null); - -export const $lastProgressImage = computed($lastProgressEvent, (val) => val?.image ?? null); export const $lastProgressMessage = computed($lastProgressEvent, (val) => { if (!val) { return null;