fix(ui): fix memoized selectors

Some had the memoize options twice.

invokeai/frontend/web/src/features/canvas/hooks/useCanvasDragMove.ts

@@ -7,7 +7,6 @@ import {
   setStageCoordinates,
 } from 'features/canvas/store/canvasSlice';
 import { KonvaEventObject } from 'konva/lib/Node';
-import { isEqual } from 'lodash-es';
 import { useCallback } from 'react';
 
 const selector = createMemoizedSelector(
@@ -19,8 +18,7 @@ const selector = createMemoizedSelector(
       isStaging,
       isMovingBoundingBox,
     };
-  },
+  }
-  { memoizeOptions: { resultEqualityCheck: isEqual } }
 );
 
 const useCanvasDrag = () => {

invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseDown.ts

@@ -11,7 +11,6 @@ import getScaledCursorPosition from 'features/canvas/util/getScaledCursorPositio
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import Konva from 'konva';
 import { KonvaEventObject } from 'konva/lib/Node';
-import { isEqual } from 'lodash-es';
 import { MutableRefObject, useCallback } from 'react';
 import useColorPicker from './useColorUnderCursor';
 
@@ -24,8 +23,7 @@ const selector = createMemoizedSelector(
       activeTabName,
       isStaging,
     };
-  },
+  }
-  { memoizeOptions: { resultEqualityCheck: isEqual } }
 );
 
 const useCanvasMouseDown = (stageRef: MutableRefObject<Konva.Stage | null>) => {

invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseMove.ts

@@ -10,7 +10,6 @@ import getScaledCursorPosition from 'features/canvas/util/getScaledCursorPositio
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import Konva from 'konva';
 import { Vector2d } from 'konva/lib/types';
-import { isEqual } from 'lodash-es';
 import { MutableRefObject, useCallback } from 'react';
 import useColorPicker from './useColorUnderCursor';
 
@@ -24,8 +23,7 @@ const selector = createMemoizedSelector(
       activeTabName,
       isStaging,
     };
-  },
+  }
-  { memoizeOptions: { resultEqualityCheck: isEqual } }
 );
 
 const useCanvasMouseMove = (

invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseUp.ts

@@ -11,7 +11,6 @@ import {
 import getScaledCursorPosition from 'features/canvas/util/getScaledCursorPosition';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import Konva from 'konva';
-import { isEqual } from 'lodash-es';
 import { MutableRefObject, useCallback } from 'react';
 
 const selector = createMemoizedSelector(
@@ -24,8 +23,7 @@ const selector = createMemoizedSelector(
       activeTabName,
       isStaging,
     };
-  },
+  }
-  { memoizeOptions: { resultEqualityCheck: isEqual } }
 );
 
 const useCanvasMouseUp = (

invokeai/frontend/web/src/features/canvas/hooks/useCanvasZoom.ts

@@ -12,20 +12,16 @@ import {
 } from 'features/canvas/util/constants';
 import Konva from 'konva';
 import { KonvaEventObject } from 'konva/lib/Node';
-import { clamp, isEqual } from 'lodash-es';
+import { clamp } from 'lodash-es';
 import { MutableRefObject, useCallback } from 'react';
 
-const selector = createMemoizedSelector(
+const selector = createMemoizedSelector([stateSelector], ({ canvas }) => {
-  [stateSelector],
-  ({ canvas }) => {
   const { isMoveStageKeyHeld, stageScale } = canvas;
   return {
     isMoveStageKeyHeld,
     stageScale,
   };
-  },
+});
-  { memoizeOptions: { resultEqualityCheck: isEqual } }
-);
 
 const useCanvasWheel = (stageRef: MutableRefObject<Konva.Stage | null>) => {
   const dispatch = useAppDispatch();

invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, Image } from '@chakra-ui/react';
+import { Box, Flex } from '@chakra-ui/react';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { stateSelector } from 'app/store/store';
@@ -9,6 +9,7 @@ import {
   TypesafeDraggableData,
   TypesafeDroppableData,
 } from 'features/dnd/types';
+import ProgressImage from 'features/gallery/components/CurrentImage/ProgressImage';
 import ImageMetadataViewer from 'features/gallery/components/ImageMetadataViewer/ImageMetadataViewer';
 import NextPrevImageButtons from 'features/gallery/components/NextPrevImageButtons';
 import { useNextPrevImage } from 'features/gallery/hooks/useNextPrevImage';
@@ -28,14 +29,13 @@ export const imagesSelector = createMemoizedSelector(
       shouldHidePreview,
       shouldShowProgressInViewer,
     } = ui;
-    const { denoiseProgress, shouldAntialiasProgressImage } = system;
+    const { denoiseProgress } = system;
     return {
       shouldShowImageDetails,
       shouldHidePreview,
       imageName: lastSelectedImage?.image_name,
-      denoiseProgress,
+      hasDenoiseProgress: Boolean(denoiseProgress),
       shouldShowProgressInViewer,
-      shouldAntialiasProgressImage,
     };
   }
 );
@@ -44,9 +44,8 @@ const CurrentImagePreview = () => {
   const {
     shouldShowImageDetails,
     imageName,
-    denoiseProgress,
+    hasDenoiseProgress,
     shouldShowProgressInViewer,
-    shouldAntialiasProgressImage,
   } = useAppSelector(imagesSelector);
 
   const {
@@ -137,23 +136,8 @@ const CurrentImagePreview = () => {
         position: 'relative',
       }}
     >
-      {denoiseProgress?.progress_image && shouldShowProgressInViewer ? (
+      {hasDenoiseProgress && shouldShowProgressInViewer ? (
-        <Image
+        <ProgressImage />
-          src={denoiseProgress.progress_image.dataURL}
-          width={denoiseProgress.progress_image.width}
-          height={denoiseProgress.progress_image.height}
-          draggable={false}
-          data-testid="progress-image"
-          sx={{
-            objectFit: 'contain',
-            maxWidth: 'full',
-            maxHeight: 'full',
-            height: 'auto',
-            position: 'absolute',
-            borderRadius: 'base',
-            imageRendering: shouldAntialiasProgressImage ? 'auto' : 'pixelated',
-          }}
-        />
       ) : (
         <IAIDndImage
           imageDTO={imageDTO}

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

@@ -0,0 +1,37 @@
+import { Image } from '@chakra-ui/react';
+import { useAppSelector } from 'app/store/storeHooks';
+import { memo } from 'react';
+
+const CurrentImagePreview = () => {
+  const progress_image = useAppSelector(
+    (state) => state.system.denoiseProgress?.progress_image
+  );
+  const shouldAntialiasProgressImage = useAppSelector(
+    (state) => state.system.shouldAntialiasProgressImage
+  );
+
+  if (!progress_image) {
+    return null;
+  }
+
+  return (
+    <Image
+      src={progress_image.dataURL}
+      width={progress_image.width}
+      height={progress_image.height}
+      draggable={false}
+      data-testid="progress-image"
+      sx={{
+        objectFit: 'contain',
+        maxWidth: 'full',
+        maxHeight: 'full',
+        height: 'auto',
+        position: 'absolute',
+        borderRadius: 'base',
+        imageRendering: shouldAntialiasProgressImage ? 'auto' : 'pixelated',
+      }}
+    />
+  );
+};
+
+export default memo(CurrentImagePreview);

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx

@@ -38,7 +38,6 @@ import {
   setShouldShowProgressInViewer,
   setShouldUseSliders,
 } from 'features/ui/store/uiSlice';
-import { isEqual } from 'lodash-es';
 import {
   ChangeEvent,
   ReactElement,
@@ -56,9 +55,7 @@ import SettingsClearIntermediates from './SettingsClearIntermediates';
 import SettingsSchedulers from './SettingsSchedulers';
 import StyledFlex from './StyledFlex';
 
-const selector = createMemoizedSelector(
+const selector = createMemoizedSelector([stateSelector], ({ system, ui }) => {
-  [stateSelector],
-  ({ system, ui }) => {
   const {
     shouldConfirmOnDelete,
     enableImageDebugging,
@@ -89,11 +86,7 @@ const selector = createMemoizedSelector(
     shouldAutoChangeDimensions,
     shouldEnableInformationalPopovers,
   };
-  },
+});
-  {
-    memoizeOptions: { resultEqualityCheck: isEqual },
-  }
-);
 
 type ConfigOptions = {
   shouldShowDeveloperSettings: boolean;

invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx

@@ -23,7 +23,6 @@ import {
 } from 'features/ui/store/uiSelectors';
 import { setActiveTab } from 'features/ui/store/uiSlice';
 import { ResourceKey } from 'i18next';
-import { isEqual } from 'lodash-es';
 import { MouseEvent, ReactNode, memo, useCallback, useMemo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
@@ -96,9 +95,6 @@ const enabledTabsSelector = createMemoizedSelector(
     const { disabledTabs } = config;
     const enabledTabs = tabs.filter((tab) => !disabledTabs.includes(tab.id));
     return enabledTabs;
-  },
-  {
-    memoizeOptions: { resultEqualityCheck: isEqual },
   }
 );