From a6be44789bdc4c1243a56a244a072f972b537288 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 1 May 2023 10:22:08 +1000
Subject: [PATCH] fix(ui): progress image rerender, checkbox

---
 .../frontend/web/src/app/components/App.tsx   |  3 -
 .../parameters/components/ProgressImage.tsx   | 67 +++++++++++++++
 .../components/ProgressImagePreview.tsx       | 81 +++++--------------
 3 files changed, 88 insertions(+), 63 deletions(-)
 create mode 100644 invokeai/frontend/web/src/features/parameters/components/ProgressImage.tsx

diff --git a/invokeai/frontend/web/src/app/components/App.tsx b/invokeai/frontend/web/src/app/components/App.tsx
index a7487fa323..3aebfa4097 100644
--- a/invokeai/frontend/web/src/app/components/App.tsx
+++ b/invokeai/frontend/web/src/app/components/App.tsx
@@ -28,9 +28,6 @@ import { configChanged } from 'features/system/store/configSlice';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { useLogger } from 'app/logging/useLogger';
 import ProgressImagePreview from 'features/parameters/components/ProgressImagePreview';
-// import { DndContext, DragEndEvent } from '@dnd-kit/core';
-import { floatingProgressImageMoved } from 'features/ui/store/uiSlice';
-// import { restrictToWindowEdges } from '@dnd-kit/modifiers';
 
 const DEFAULT_CONFIG = {};
 
diff --git a/invokeai/frontend/web/src/features/parameters/components/ProgressImage.tsx b/invokeai/frontend/web/src/features/parameters/components/ProgressImage.tsx
new file mode 100644
index 0000000000..869f4dbc63
--- /dev/null
+++ b/invokeai/frontend/web/src/features/parameters/components/ProgressImage.tsx
@@ -0,0 +1,67 @@
+import { Flex, Icon, Image } from '@chakra-ui/react';
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppSelector } from 'app/store/storeHooks';
+import { systemSelector } from 'features/system/store/systemSelectors';
+import { isEqual } from 'lodash-es';
+import { memo } from 'react';
+import { FaImage } from 'react-icons/fa';
+
+const selector = createSelector(
+  [systemSelector],
+  (system) => {
+    const { progressImage } = system;
+
+    return {
+      progressImage,
+    };
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: isEqual,
+    },
+  }
+);
+
+const ProgressImage = () => {
+  const { progressImage } = useAppSelector(selector);
+  return progressImage ? (
+    <Flex
+      sx={{
+        position: 'relative',
+        w: 'full',
+        h: 'full',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Image
+        draggable={false}
+        src={progressImage.dataURL}
+        width={progressImage.width}
+        height={progressImage.height}
+        sx={{
+          position: 'absolute',
+          objectFit: 'contain',
+          maxWidth: '100%',
+          maxHeight: '100%',
+          height: 'auto',
+          borderRadius: 'base',
+          p: 2,
+        }}
+      />
+    </Flex>
+  ) : (
+    <Flex
+      sx={{
+        w: 'full',
+        h: 'full',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Icon color="base.400" boxSize={32} as={FaImage} />
+    </Flex>
+  );
+};
+
+export default memo(ProgressImage);
diff --git a/invokeai/frontend/web/src/features/parameters/components/ProgressImagePreview.tsx b/invokeai/frontend/web/src/features/parameters/components/ProgressImagePreview.tsx
index 28dd6adf4f..9a54e37463 100644
--- a/invokeai/frontend/web/src/features/parameters/components/ProgressImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/ProgressImagePreview.tsx
@@ -1,9 +1,9 @@
-import { Flex, Icon, Image, Text } from '@chakra-ui/react';
+import { Flex, Text } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { systemSelector } from 'features/system/store/systemSelectors';
 import { memo } from 'react';
-import { FaImage, FaStopwatch } from 'react-icons/fa';
+import { FaStopwatch } from 'react-icons/fa';
 import { uiSelector } from 'features/ui/store/uiSelectors';
 import IAIIconButton from 'common/components/IAIIconButton';
 import { CloseIcon } from '@chakra-ui/icons';
@@ -16,11 +16,12 @@ import {
 import { Rnd } from 'react-rnd';
 import { Rect } from 'features/ui/store/uiTypes';
 import { isEqual } from 'lodash';
+import ProgressImage from './ProgressImage';
 
 const selector = createSelector(
   [systemSelector, uiSelector],
   (system, ui) => {
-    const { progressImage, isProcessing } = system;
+    const { isProcessing } = system;
     const {
       floatingProgressImageRect,
       shouldShowProgressImages,
@@ -33,7 +34,6 @@ const selector = createSelector(
         : shouldShowProgressImages;
 
     return {
-      progressImage,
       floatingProgressImageRect,
       showProgressWindow,
     };
@@ -48,13 +48,28 @@ const selector = createSelector(
 const ProgressImagePreview = () => {
   const dispatch = useAppDispatch();
 
-  const { showProgressWindow, progressImage, floatingProgressImageRect } =
+  const { showProgressWindow, floatingProgressImageRect } =
     useAppSelector(selector);
 
   const { t } = useTranslation();
 
   return (
     <>
+      {' '}
+      <IAIIconButton
+        onClick={() =>
+          dispatch(setShouldShowProgressImages(!showProgressWindow))
+        }
+        tooltip={t('ui.showProgressImages')}
+        isChecked={showProgressWindow}
+        sx={{
+          position: 'absolute',
+          bottom: 4,
+          insetInlineStart: 4,
+        }}
+        aria-label={t('ui.showProgressImages')}
+        icon={<FaStopwatch />}
+      />
       {showProgressWindow && (
         <Rnd
           bounds="window"
@@ -141,64 +156,10 @@ const ProgressImagePreview = () => {
                 variant="ghost"
               />
             </Flex>
-            {progressImage ? (
-              <Flex
-                sx={{
-                  position: 'relative',
-                  w: 'full',
-                  h: 'full',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}
-              >
-                <Image
-                  draggable={false}
-                  src={progressImage.dataURL}
-                  width={progressImage.width}
-                  height={progressImage.height}
-                  sx={{
-                    position: 'absolute',
-                    objectFit: 'contain',
-                    maxWidth: '100%',
-                    maxHeight: '100%',
-                    height: 'auto',
-                    borderRadius: 'base',
-                    p: 2,
-                  }}
-                />
-              </Flex>
-            ) : (
-              <Flex
-                sx={{
-                  w: 'full',
-                  h: 'full',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}
-              >
-                <Icon color="base.400" boxSize={32} as={FaImage}></Icon>
-              </Flex>
-            )}
+            <ProgressImage />
           </Flex>
         </Rnd>
       )}
-      <IAIIconButton
-        onClick={() =>
-          dispatch(setShouldShowProgressImages(!showProgressWindow))
-        }
-        tooltip={t('ui.showProgressImages')}
-        sx={{
-          position: 'absolute',
-          bottom: 4,
-          insetInlineStart: 4,
-          background: showProgressWindow ? 'accent.600' : 'base.700',
-          _hover: {
-            background: showProgressWindow ? 'accent.500' : 'base.600',
-          },
-        }}
-        aria-label={t('ui.showProgressImages')}
-        icon={<FaStopwatch />}
-      />
     </>
   );
 };