From 2e0cebb571128ddcffc4ba7fb38c63d025adf696 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 23 Jul 2024 10:19:40 +1000
Subject: [PATCH] fix(ui): bug where viewer would disappear on upscaling tab

---
 .../gallery/components/ImageViewer/ViewerToolbar.tsx   | 10 ++++++++--
 .../src/features/ui/components/tabs/UpscalingTab.tsx   |  4 +---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToolbar.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToolbar.tsx
index e610ca0077..dfc131c87c 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToolbar.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToolbar.tsx
@@ -9,7 +9,13 @@ import CurrentImageButtons from './CurrentImageButtons';
 import { ViewerToggleMenu } from './ViewerToggleMenu';
 
 export const ViewerToolbar = memo(() => {
-  const tab = useAppSelector(activeTabNameSelector);
+  const showToggle = useAppSelector((s) => {
+    const tab = activeTabNameSelector(s);
+    if (tab === 'upscaling' || tab === 'workflows') {
+      return false;
+    }
+    return true;
+  });
   return (
     <Flex w="full" gap={2}>
       <Flex flex={1} justifyContent="center">
@@ -23,7 +29,7 @@ export const ViewerToolbar = memo(() => {
       </Flex>
       <Flex flex={1} justifyContent="center">
         <Flex gap={2} marginInlineStart="auto">
-          {tab !== 'workflows' && <ViewerToggleMenu />}
+          {showToggle && <ViewerToggleMenu />}
         </Flex>
       </Flex>
     </Flex>
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/UpscalingTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/UpscalingTab.tsx
index 8d4c916c2a..e2da68ceb7 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/UpscalingTab.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/UpscalingTab.tsx
@@ -1,13 +1,11 @@
 import { Box } from '@invoke-ai/ui-library';
 import { ImageViewer } from 'features/gallery/components/ImageViewer/ImageViewer';
-import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { memo } from 'react';
 
 const UpscalingTab = () => {
-  const imageViewer = useImageViewer();
   return (
     <Box layerStyle="first" position="relative" w="full" h="full" p={2} borderRadius="base">
-      {imageViewer.isOpen && <ImageViewer />}
+      <ImageViewer />
     </Box>
   );
 };