Floating panel re-render fix

frontend/src/app/App.tsx

@@ -4,78 +4,15 @@ import Console from 'features/system/components/Console';
 import { keepGUIAlive } from './utils';
 import InvokeTabs from 'features/tabs/components/InvokeTabs';
 import ImageUploader from 'common/components/ImageUploader';
-import { RootState, useAppSelector } from 'app/store';
 
-import FloatingGalleryButton from 'features/tabs/components/FloatingGalleryButton';
-import FloatingOptionsPanelButtons from 'features/tabs/components/FloatingOptionsPanelButtons';
-import { createSelector } from '@reduxjs/toolkit';
-import { GalleryState } from 'features/gallery/store/gallerySlice';
-import { OptionsState } from 'features/options/store/optionsSlice';
-import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
-import { SystemState } from 'features/system/store/systemSlice';
-import _ from 'lodash';
-import { Model } from './invokeai';
 import useToastWatcher from 'features/system/hooks/useToastWatcher';
 
+import FloatingOptionsPanelButtons from 'features/tabs/components/FloatingOptionsPanelButtons';
+import FloatingGalleryButton from 'features/tabs/components/FloatingGalleryButton';
+
 keepGUIAlive();
 
-const appSelector = createSelector(
-  [
-    (state: RootState) => state.gallery,
-    (state: RootState) => state.options,
-    (state: RootState) => state.system,
-    activeTabNameSelector,
-  ],
-  (
-    gallery: GalleryState,
-    options: OptionsState,
-    system: SystemState,
-    activeTabName
-  ) => {
-    const { shouldShowGallery, shouldHoldGalleryOpen, shouldPinGallery } =
-      gallery;
-    const {
-      shouldShowOptionsPanel,
-      shouldHoldOptionsPanelOpen,
-      shouldPinOptionsPanel,
-    } = options;
-
-    const modelStatusText = _.reduce(
-      system.model_list,
-      (acc: string, cur: Model, key: string) => {
-        if (cur.status === 'active') acc = key;
-        return acc;
-      },
-      ''
-    );
-
-    const shouldShowGalleryButton =
-      !(shouldShowGallery || (shouldHoldGalleryOpen && !shouldPinGallery)) &&
-      ['txt2img', 'img2img', 'unifiedCanvas'].includes(activeTabName);
-
-    const shouldShowOptionsPanelButton =
-      !(
-        shouldShowOptionsPanel ||
-        (shouldHoldOptionsPanelOpen && !shouldPinOptionsPanel)
-      ) && ['txt2img', 'img2img', 'unifiedCanvas'].includes(activeTabName);
-
-    return {
-      modelStatusText,
-      shouldShowGalleryButton,
-      shouldShowOptionsPanelButton,
-    };
-  },
-  {
-    memoizeOptions: {
-      resultEqualityCheck: _.isEqual,
-    },
-  }
-);
-
 const App = () => {
-  const { shouldShowGalleryButton, shouldShowOptionsPanelButton } =
-    useAppSelector(appSelector);
-
   useToastWatcher();
 
   return (
@@ -89,9 +26,9 @@ const App = () => {
         <div className="app-console">
           <Console />
         </div>
-        {shouldShowGalleryButton && <FloatingGalleryButton />}
-        {shouldShowOptionsPanelButton && <FloatingOptionsPanelButtons />}
       </ImageUploader>
+      <FloatingOptionsPanelButtons />
+      <FloatingGalleryButton />
     </div>
   );
 };

frontend/src/features/tabs/components/FloatingGalleryButton.tsx

@@ -1,13 +1,41 @@
 import { MdPhotoLibrary } from 'react-icons/md';
 import { RootState, useAppDispatch, useAppSelector } from 'app/store';
 import IAIIconButton from 'common/components/IAIIconButton';
-import { setShouldShowGallery } from 'features/gallery/store/gallerySlice';
+import {
+  GalleryState,
+  setShouldShowGallery,
+} from 'features/gallery/store/gallerySlice';
 import { setDoesCanvasNeedScaling } from 'features/canvas/store/canvasSlice';
+import { createSelector } from '@reduxjs/toolkit';
+import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
+import _ from 'lodash';
+
+const floatingGallerySelcetor = createSelector(
+  [(state: RootState) => state.gallery, activeTabNameSelector],
+  (gallery: GalleryState, activeTabName) => {
+    const { shouldShowGallery, shouldHoldGalleryOpen, shouldPinGallery } =
+      gallery;
+
+    const shouldShowGalleryButton =
+      !(shouldShowGallery || (shouldHoldGalleryOpen && !shouldPinGallery)) &&
+      ['txt2img', 'img2img', 'unifiedCanvas'].includes(activeTabName);
+
+    return {
+      shouldPinGallery,
+      shouldShowGalleryButton,
+    };
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: _.isEqual,
+    },
+  }
+);
 
 const FloatingGalleryButton = () => {
   const dispatch = useAppDispatch();
-  const shouldPinGallery = useAppSelector(
-    (state: RootState) => state.gallery.shouldPinGallery
+  const { shouldShowGalleryButton, shouldPinGallery } = useAppSelector(
+    floatingGallerySelcetor
   );
 
   const handleShowGallery = () => {
@@ -17,7 +45,7 @@ const FloatingGalleryButton = () => {
     }
   };
 
-  return (
+  return shouldShowGalleryButton ? (
     <IAIIconButton
       tooltip="Show Gallery (G)"
       tooltipProps={{ placement: 'top' }}
@@ -27,7 +55,7 @@ const FloatingGalleryButton = () => {
     >
       <MdPhotoLibrary />
     </IAIIconButton>
-  );
+  ) : null;
 };
 
 export default FloatingGalleryButton;

frontend/src/features/tabs/components/FloatingOptionsPanelButtons.tsx

@@ -10,16 +10,28 @@ import InvokeButton from 'features/options/components/ProcessButtons/InvokeButto
 import _ from 'lodash';
 import { setDoesCanvasNeedScaling } from 'features/canvas/store/canvasSlice';
 import { FaSlidersH } from 'react-icons/fa';
+import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
 
-const canInvokeSelector = createSelector(
-  (state: RootState) => state.options,
+const floatingOptionsSelector = createSelector(
+  [(state: RootState) => state.options, activeTabNameSelector],
+  (options: OptionsState, activeTabName) => {
+    const {
+      shouldPinOptionsPanel,
+      shouldShowOptionsPanel,
+      shouldHoldOptionsPanelOpen,
+    } = options;
+
+    const shouldShowOptionsPanelButton =
+      !(
+        shouldShowOptionsPanel ||
+        (shouldHoldOptionsPanelOpen && !shouldPinOptionsPanel)
+      ) && ['txt2img', 'img2img', 'unifiedCanvas'].includes(activeTabName);
 
-  (options: OptionsState) => {
-    const { shouldPinOptionsPanel, shouldShowOptionsPanel } = options;
     return {
       shouldPinOptionsPanel,
       shouldShowProcessButtons:
         !shouldPinOptionsPanel || !shouldShowOptionsPanel,
+      shouldShowOptionsPanelButton,
     };
   },
   { memoizeOptions: { resultEqualityCheck: _.isEqual } }
@@ -27,8 +39,11 @@ const canInvokeSelector = createSelector(
 
 const FloatingOptionsPanelButtons = () => {
   const dispatch = useAppDispatch();
-  const { shouldShowProcessButtons, shouldPinOptionsPanel } =
-    useAppSelector(canInvokeSelector);
+  const {
+    shouldShowOptionsPanelButton,
+    shouldShowProcessButtons,
+    shouldPinOptionsPanel,
+  } = useAppSelector(floatingOptionsSelector);
 
   const handleShowOptionsPanel = () => {
     dispatch(setShouldShowOptionsPanel(true));
@@ -37,7 +52,7 @@ const FloatingOptionsPanelButtons = () => {
     }
   };
 
-  return (
+  return shouldShowOptionsPanelButton ? (
     <div className="show-hide-button-options">
       <IAIIconButton
         tooltip="Show Options Panel (O)"
@@ -54,7 +69,7 @@ const FloatingOptionsPanelButtons = () => {
         </>
       )}
     </div>
-  );
+  ) : null;
 };
 
 export default FloatingOptionsPanelButtons;