chore(ui): cleanup (#5084)

## What type of PR is this? (check all applicable)

- [ ] Refactor
- [ ] Feature
- [ ] Bug Fix
- [x] Optimization
- [ ] Documentation Update
- [ ] Community Node Submission

## Description

Bit of a cleanup. 

[chore(ui): delete unused
files](5eaea9dd64)

[feat(ui): add eslint rule
react/jsx-no-bind](3a0ec635c9)

This rule enforces no arrow functions in component props. In practice,
it means all functions passed as component props must be wrapped in
`useCallback()`.

This is a performance optimization to prevent unnecessary rerenders.

The rule is added and all violations have been fixed, whew!

[chore(ui): move useCopyImageToClipboard to
common/hooks/](f2d26a3a3c)

[chore(ui): move MM components & store to
features/](bb52861896)

Somehow they had ended up in `features/ui/tabs` which isn't right

## QA Instructions, Screenshots, Recordings

UI should still work.

It builds successfully, and I tested things out - looks good to me.

invokeai/frontend/web/.eslintrc.js

@@ -24,6 +24,7 @@ module.exports = {
   root: true,
   rules: {
     curly: 'error',
+    'react/jsx-no-bind': ['error', { allowBind: true }],
     'react/jsx-curly-brace-presence': [
       'error',
       { props: 'never', children: 'never' },

invokeai/frontend/web/src/app/store/store.ts

@@ -19,7 +19,7 @@ import sdxlReducer from 'features/sdxl/store/sdxlSlice';
 import configReducer from 'features/system/store/configSlice';
 import systemReducer from 'features/system/store/systemSlice';
 import queueReducer from 'features/queue/store/queueSlice';
-import modelmanagerReducer from 'features/ui/components/tabs/ModelManager/store/modelManagerSlice';
+import modelmanagerReducer from 'features/modelManager/store/modelManagerSlice';
 import hotkeysReducer from 'features/ui/store/hotkeysSlice';
 import uiReducer from 'features/ui/store/uiSlice';
 import dynamicMiddlewares from 'redux-dynamic-middlewares';

invokeai/frontend/web/src/common/components/IAIAlertDialog.tsx

@@ -8,7 +8,14 @@ import {
   forwardRef,
   useDisclosure,
 } from '@chakra-ui/react';
-import { cloneElement, memo, ReactElement, ReactNode, useRef } from 'react';
+import {
+  cloneElement,
+  memo,
+  ReactElement,
+  ReactNode,
+  useCallback,
+  useRef,
+} from 'react';
 import { useTranslation } from 'react-i18next';
 import IAIButton from './IAIButton';
 
@@ -38,15 +45,15 @@ const IAIAlertDialog = forwardRef((props: Props, ref) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const cancelRef = useRef<HTMLButtonElement | null>(null);
 
-  const handleAccept = () => {
+  const handleAccept = useCallback(() => {
     acceptCallback();
     onClose();
-  };
+  }, [acceptCallback, onClose]);
 
-  const handleCancel = () => {
+  const handleCancel = useCallback(() => {
     cancelCallback && cancelCallback();
     onClose();
-  };
+  }, [cancelCallback, onClose]);
 
   return (
     <>

invokeai/frontend/web/src/common/components/IAIErrorLoadingImageFallback.tsx

@@ -1,43 +0,0 @@
-import { Box, Flex, Icon } from '@chakra-ui/react';
-import { memo } from 'react';
-import { FaExclamation } from 'react-icons/fa';
-
-const IAIErrorLoadingImageFallback = () => {
-  return (
-    <Box
-      sx={{
-        position: 'relative',
-        height: 'full',
-        width: 'full',
-        '::before': {
-          content: "''",
-          display: 'block',
-          pt: '100%',
-        },
-      }}
-    >
-      <Flex
-        sx={{
-          position: 'absolute',
-          top: 0,
-          insetInlineStart: 0,
-          height: 'full',
-          width: 'full',
-          alignItems: 'center',
-          justifyContent: 'center',
-          borderRadius: 'base',
-          bg: 'base.100',
-          color: 'base.500',
-          _dark: {
-            color: 'base.700',
-            bg: 'base.850',
-          },
-        }}
-      >
-        <Icon as={FaExclamation} boxSize={16} opacity={0.7} />
-      </Flex>
-    </Box>
-  );
-};
-
-export default memo(IAIErrorLoadingImageFallback);

invokeai/frontend/web/src/common/components/IAIForm.tsx

@@ -1,8 +0,0 @@
-import { chakra } from '@chakra-ui/react';
-
-/**
- * Chakra-enabled <form />
- */
-const IAIForm = chakra.form;
-
-export default IAIForm;

invokeai/frontend/web/src/common/components/IAIForms/IAIFormErrorMessage.tsx

@@ -1,15 +0,0 @@
-import { FormErrorMessage, FormErrorMessageProps } from '@chakra-ui/react';
-import { ReactNode } from 'react';
-
-type IAIFormErrorMessageProps = FormErrorMessageProps & {
-  children: ReactNode | string;
-};
-
-export default function IAIFormErrorMessage(props: IAIFormErrorMessageProps) {
-  const { children, ...rest } = props;
-  return (
-    <FormErrorMessage color="error.400" {...rest}>
-      {children}
-    </FormErrorMessage>
-  );
-}

invokeai/frontend/web/src/common/components/IAIForms/IAIFormHelperText.tsx

@@ -1,15 +0,0 @@
-import { FormHelperText, FormHelperTextProps } from '@chakra-ui/react';
-import { ReactNode } from 'react';
-
-type IAIFormHelperTextProps = FormHelperTextProps & {
-  children: ReactNode | string;
-};
-
-export default function IAIFormHelperText(props: IAIFormHelperTextProps) {
-  const { children, ...rest } = props;
-  return (
-    <FormHelperText margin={0} color="base.400" {...rest}>
-      {children}
-    </FormHelperText>
-  );
-}

invokeai/frontend/web/src/common/components/IAIForms/IAIFormItemWrapper.tsx

@@ -1,25 +0,0 @@
-import { Flex, useColorMode } from '@chakra-ui/react';
-import { ReactElement } from 'react';
-import { mode } from 'theme/util/mode';
-
-export function IAIFormItemWrapper({
-  children,
-}: {
-  children: ReactElement | ReactElement[];
-}) {
-  const { colorMode } = useColorMode();
-  return (
-    <Flex
-      sx={{
-        flexDirection: 'column',
-        padding: 4,
-        rowGap: 4,
-        borderRadius: 'base',
-        width: 'full',
-        bg: mode('base.100', 'base.900')(colorMode),
-      }}
-    >
-      {children}
-    </Flex>
-  );
-}

invokeai/frontend/web/src/common/components/IAIFullCheckbox.tsx

@@ -1,25 +0,0 @@
-import {
-  Checkbox,
-  CheckboxProps,
-  FormControl,
-  FormControlProps,
-  FormLabel,
-} from '@chakra-ui/react';
-import { memo, ReactNode } from 'react';
-
-type IAIFullCheckboxProps = CheckboxProps & {
-  label: string | ReactNode;
-  formControlProps?: FormControlProps;
-};
-
-const IAIFullCheckbox = (props: IAIFullCheckboxProps) => {
-  const { label, formControlProps, ...rest } = props;
-  return (
-    <FormControl {...formControlProps}>
-      <FormLabel>{label}</FormLabel>
-      <Checkbox colorScheme="accent" {...rest} />
-    </FormControl>
-  );
-};
-
-export default memo(IAIFullCheckbox);

invokeai/frontend/web/src/common/components/IAIMantineInput.tsx

@@ -1,6 +1,7 @@
 import { useColorMode } from '@chakra-ui/react';
 import { TextInput, TextInputProps } from '@mantine/core';
 import { useChakraThemeTokens } from 'common/hooks/useChakraThemeTokens';
+import { useCallback } from 'react';
 import { mode } from 'theme/util/mode';
 
 type IAIMantineTextInputProps = TextInputProps;
@@ -20,9 +21,8 @@ export default function IAIMantineTextInput(props: IAIMantineTextInputProps) {
   } = useChakraThemeTokens();
   const { colorMode } = useColorMode();
 
-  return (
+  const stylesFunc = useCallback(
-    <TextInput
+    () => ({
-      styles={() => ({
       input: {
         color: mode(base900, base100)(colorMode),
         backgroundColor: mode(base50, base900)(colorMode),
@@ -35,11 +35,23 @@ export default function IAIMantineTextInput(props: IAIMantineTextInputProps) {
       },
       label: {
         color: mode(base700, base300)(colorMode),
-          fontWeight: 'normal',
+        fontWeight: 'normal' as const,
         marginBottom: 4,
       },
-      })}
+    }),
-      {...rest}
+    [
-    />
+      accent300,
+      accent500,
+      base100,
+      base200,
+      base300,
+      base50,
+      base700,
+      base800,
+      base900,
+      colorMode,
+    ]
   );
+
+  return <TextInput styles={stylesFunc} {...rest} />;
 }

invokeai/frontend/web/src/common/components/IAINumberInput.tsx

@@ -98,20 +98,24 @@ const IAINumberInput = forwardRef((props: Props, ref) => {
     }
   }, [value, valueAsString]);
 
-  const handleOnChange = (v: string) => {
+  const handleOnChange = useCallback(
+    (v: string) => {
       setValueAsString(v);
       // This allows negatives and decimals e.g. '-123', `.5`, `-0.2`, etc.
       if (!v.match(numberStringRegex)) {
         // Cast the value to number. Floor it if it should be an integer.
         onChange(isInteger ? Math.floor(Number(v)) : Number(v));
       }
-  };
+    },
+    [isInteger, onChange]
+  );
 
   /**
    * Clicking the steppers allows the value to go outside bounds; we need to
    * clamp it on blur and floor it if needed.
    */
-  const handleBlur = (e: FocusEvent<HTMLInputElement>) => {
+  const handleBlur = useCallback(
+    (e: FocusEvent<HTMLInputElement>) => {
       const clamped = clamp(
         isInteger ? Math.floor(Number(e.target.value)) : Number(e.target.value),
         min,
@@ -119,7 +123,9 @@ const IAINumberInput = forwardRef((props: Props, ref) => {
       );
       setValueAsString(String(clamped));
       onChange(clamped);
-  };
+    },
+    [isInteger, max, min, onChange]
+  );
 
   const handleKeyDown = useCallback(
     (e: KeyboardEvent<HTMLInputElement>) => {

invokeai/frontend/web/src/common/components/IAISelect.tsx

@@ -6,7 +6,7 @@ import {
   Tooltip,
   TooltipProps,
 } from '@chakra-ui/react';
-import { memo, MouseEvent } from 'react';
+import { memo, MouseEvent, useCallback } from 'react';
 import IAIOption from './IAIOption';
 
 type IAISelectProps = SelectProps & {
@@ -33,15 +33,16 @@ const IAISelect = (props: IAISelectProps) => {
     spaceEvenly,
     ...rest
   } = props;
-  return (
+  const handleClick = useCallback((e: MouseEvent<HTMLDivElement>) => {
-    <FormControl
-      isDisabled={isDisabled}
-      onClick={(e: MouseEvent<HTMLDivElement>) => {
     e.stopPropagation();
     e.nativeEvent.stopImmediatePropagation();
     e.nativeEvent.stopPropagation();
     e.nativeEvent.cancelBubble = true;
-      }}
+  }, []);
+  return (
+    <FormControl
+      isDisabled={isDisabled}
+      onClick={handleClick}
       sx={
         horizontal
           ? {

invokeai/frontend/web/src/common/components/IAISlider.tsx

@@ -186,6 +186,13 @@ const IAISlider = forwardRef((props: IAIFullSliderProps, ref) => {
     [dispatch]
   );
 
+  const handleMouseEnter = useCallback(() => setShowTooltip(true), []);
+  const handleMouseLeave = useCallback(() => setShowTooltip(false), []);
+  const handleStepperClick = useCallback(
+    () => onChange(Number(localInputValue)),
+    [localInputValue, onChange]
+  );
+
   return (
     <FormControl
       ref={ref}
@@ -219,8 +226,8 @@ const IAISlider = forwardRef((props: IAIFullSliderProps, ref) => {
           max={max}
           step={step}
           onChange={handleSliderChange}
-          onMouseEnter={() => setShowTooltip(true)}
+          onMouseEnter={handleMouseEnter}
-          onMouseLeave={() => setShowTooltip(false)}
+          onMouseLeave={handleMouseLeave}
           focusThumbOnChange={false}
           isDisabled={isDisabled}
           {...rest}
@@ -332,12 +339,8 @@ const IAISlider = forwardRef((props: IAIFullSliderProps, ref) => {
               {...sliderNumberInputFieldProps}
             />
             <NumberInputStepper {...sliderNumberInputStepperProps}>
-              <NumberIncrementStepper
+              <NumberIncrementStepper onClick={handleStepperClick} />
-                onClick={() => onChange(Number(localInputValue))}
+              <NumberDecrementStepper onClick={handleStepperClick} />
-              />
-              <NumberDecrementStepper
-                onClick={() => onChange(Number(localInputValue))}
-              />
             </NumberInputStepper>
           </NumberInput>
         )}

invokeai/frontend/web/src/common/components/ImageUploader.tsx

@@ -146,16 +146,15 @@ const ImageUploader = (props: ImageUploaderProps) => {
     };
   }, [inputRef]);
 
-  return (
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
-    <Box
-      {...getRootProps({ style: {} })}
-      onKeyDown={(e: KeyboardEvent) => {
     // Bail out if user hits spacebar - do not open the uploader
     if (e.key === ' ') {
       return;
     }
-      }}
+  }, []);
-    >
+
+  return (
+    <Box {...getRootProps({ style: {} })} onKeyDown={handleKeyDown}>
       <input {...getInputProps()} />
       {children}
       <AnimatePresence>

invokeai/frontend/web/src/common/components/SelectImagePlaceholder.tsx

@@ -1,23 +0,0 @@
-import { Flex, Icon } from '@chakra-ui/react';
-import { memo } from 'react';
-import { FaImage } from 'react-icons/fa';
-
-const SelectImagePlaceholder = () => {
-  return (
-    <Flex
-      sx={{
-        w: 'full',
-        h: 'full',
-        // bg: 'base.800',
-        borderRadius: 'base',
-        alignItems: 'center',
-        justifyContent: 'center',
-        aspectRatio: '1/1',
-      }}
-    >
-      <Icon color="base.400" boxSize={32} as={FaImage}></Icon>
-    </Flex>
-  );
-};
-
-export default memo(SelectImagePlaceholder);

invokeai/frontend/web/src/common/hooks/useResolution.ts

@@ -1,24 +0,0 @@
-import { useBreakpoint } from '@chakra-ui/react';
-
-export default function useResolution():
-  | 'mobile'
-  | 'tablet'
-  | 'desktop'
-  | 'unknown' {
-  const breakpointValue = useBreakpoint();
-
-  const mobileResolutions = ['base', 'sm'];
-  const tabletResolutions = ['md', 'lg'];
-  const desktopResolutions = ['xl', '2xl'];
-
-  if (mobileResolutions.includes(breakpointValue)) {
-    return 'mobile';
-  }
-  if (tabletResolutions.includes(breakpointValue)) {
-    return 'tablet';
-  }
-  if (desktopResolutions.includes(breakpointValue)) {
-    return 'desktop';
-  }
-  return 'unknown';
-}

invokeai/frontend/web/src/common/util/getTimestamp.ts

@@ -1,7 +0,0 @@
-import dateFormat from 'dateformat';
-
-/**
- * Get a `now` timestamp with 1s precision, formatted as ISO datetime.
- */
-export const getTimestamp = () =>
-  dateFormat(new Date(), `yyyy-mm-dd'T'HH:MM:ss:lo`);

invokeai/frontend/web/src/common/util/seedWeightPairs.ts

@@ -1,71 +0,0 @@
-// TODO: Restore variations
-// Support code from v2.3 in here.
-
-// export const stringToSeedWeights = (
-//   string: string
-// ): InvokeAI.SeedWeights | boolean => {
-//   const stringPairs = string.split(',');
-//   const arrPairs = stringPairs.map((p) => p.split(':'));
-//   const pairs = arrPairs.map((p: Array<string>): InvokeAI.SeedWeightPair => {
-//     return { seed: Number(p[0]), weight: Number(p[1]) };
-//   });
-
-//   if (!validateSeedWeights(pairs)) {
-//     return false;
-//   }
-
-//   return pairs;
-// };
-
-// export const validateSeedWeights = (
-//   seedWeights: InvokeAI.SeedWeights | string
-// ): boolean => {
-//   return typeof seedWeights === 'string'
-//     ? Boolean(stringToSeedWeights(seedWeights))
-//     : Boolean(
-//         seedWeights.length &&
-//           !seedWeights.some((pair: InvokeAI.SeedWeightPair) => {
-//             const { seed, weight } = pair;
-//             const isSeedValid = !isNaN(parseInt(seed.toString(), 10));
-//             const isWeightValid =
-//               !isNaN(parseInt(weight.toString(), 10)) &&
-//               weight >= 0 &&
-//               weight <= 1;
-//             return !(isSeedValid && isWeightValid);
-//           })
-//       );
-// };
-
-// export const seedWeightsToString = (
-//   seedWeights: InvokeAI.SeedWeights
-// ): string => {
-//   return seedWeights.reduce((acc, pair, i, arr) => {
-//     const { seed, weight } = pair;
-//     acc += `${seed}:${weight}`;
-//     if (i !== arr.length - 1) {
-//       acc += ',';
-//     }
-//     return acc;
-//   }, '');
-// };
-
-// export const seedWeightsToArray = (
-//   seedWeights: InvokeAI.SeedWeights
-// ): Array<Array<number>> => {
-//   return seedWeights.map((pair: InvokeAI.SeedWeightPair) => [
-//     pair.seed,
-//     pair.weight,
-//   ]);
-// };
-
-// export const stringToSeedWeightsArray = (
-//   string: string
-// ): Array<Array<number>> => {
-//   const stringPairs = string.split(',');
-//   const arrPairs = stringPairs.map((p) => p.split(':'));
-//   return arrPairs.map(
-//     (p: Array<string>): Array<number> => [parseInt(p[0], 10), parseFloat(p[1])]
-//   );
-// };
-
-export default {};

invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx

@@ -5,17 +5,22 @@ import { clearCanvasHistory } from 'features/canvas/store/canvasSlice';
 import { useTranslation } from 'react-i18next';
 import { FaTrash } from 'react-icons/fa';
 import { isStagingSelector } from '../store/canvasSelectors';
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
 
 const ClearCanvasHistoryButtonModal = () => {
   const isStaging = useAppSelector(isStagingSelector);
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
 
+  const acceptCallback = useCallback(
+    () => dispatch(clearCanvasHistory()),
+    [dispatch]
+  );
+
   return (
     <IAIAlertDialog
       title={t('unifiedCanvas.clearCanvasHistory')}
-      acceptCallback={() => dispatch(clearCanvasHistory())}
+      acceptCallback={acceptCallback}
       acceptButtonText={t('unifiedCanvas.clearHistory')}
       triggerComponent={
         <IAIButton size="sm" leftIcon={<FaTrash />} isDisabled={isStaging}>

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx

@@ -20,7 +20,8 @@ import {
 } from 'features/canvas/store/canvasSlice';
 import { rgbaColorToString } from 'features/canvas/util/colorToString';
 import { isEqual } from 'lodash-es';
-import { memo } from 'react';
+import { ChangeEvent, memo, useCallback } from 'react';
+import { RgbaColor } from 'react-colorful';
 
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
@@ -95,18 +96,35 @@ const IAICanvasMaskOptions = () => {
     [isMaskEnabled]
   );
 
-  const handleToggleMaskLayer = () => {
+  const handleToggleMaskLayer = useCallback(() => {
     dispatch(setLayer(layer === 'mask' ? 'base' : 'mask'));
-  };
+  }, [dispatch, layer]);
 
-  const handleClearMask = () => dispatch(clearMask());
+  const handleClearMask = useCallback(() => {
+    dispatch(clearMask());
+  }, [dispatch]);
 
-  const handleToggleEnableMask = () =>
+  const handleToggleEnableMask = useCallback(() => {
     dispatch(setIsMaskEnabled(!isMaskEnabled));
+  }, [dispatch, isMaskEnabled]);
 
-  const handleSaveMask = async () => {
+  const handleSaveMask = useCallback(async () => {
     dispatch(canvasMaskSavedToGallery());
-  };
+  }, [dispatch]);
+
+  const handleChangePreserveMaskedArea = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      dispatch(setShouldPreserveMaskedArea(e.target.checked));
+    },
+    [dispatch]
+  );
+
+  const handleChangeMaskColor = useCallback(
+    (newColor: RgbaColor) => {
+      dispatch(setMaskColor(newColor));
+    },
+    [dispatch]
+  );
 
   return (
     <IAIPopover
@@ -131,15 +149,10 @@ const IAICanvasMaskOptions = () => {
         <IAISimpleCheckbox
           label={t('unifiedCanvas.preserveMaskedArea')}
           isChecked={shouldPreserveMaskedArea}
-          onChange={(e) =>
+          onChange={handleChangePreserveMaskedArea}
-            dispatch(setShouldPreserveMaskedArea(e.target.checked))
-          }
         />
         <Box sx={{ paddingTop: 2, paddingBottom: 2 }}>
-          <IAIColorPicker
+          <IAIColorPicker color={maskColor} onChange={handleChangeMaskColor} />
-            color={maskColor}
-            onChange={(newColor) => dispatch(setMaskColor(newColor))}
-          />
         </Box>
         <IAIButton size="sm" leftIcon={<FaSave />} onClick={handleSaveMask}>
           Save Mask

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton.tsx

@@ -10,6 +10,7 @@ import { redo } from 'features/canvas/store/canvasSlice';
 import { stateSelector } from 'app/store/store';
 import { isEqual } from 'lodash-es';
 import { useTranslation } from 'react-i18next';
+import { useCallback } from 'react';
 
 const canvasRedoSelector = createSelector(
   [stateSelector, activeTabNameSelector],
@@ -34,9 +35,9 @@ export default function IAICanvasRedoButton() {
 
   const { t } = useTranslation();
 
-  const handleRedo = () => {
+  const handleRedo = useCallback(() => {
     dispatch(redo());
-  };
+  }, [dispatch]);
 
   useHotkeys(
     ['meta+shift+z', 'ctrl+shift+z', 'control+y', 'meta+y'],

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx

@@ -18,7 +18,7 @@ import {
 } from 'features/canvas/store/canvasSlice';
 import { isEqual } from 'lodash-es';
 
-import { ChangeEvent, memo } from 'react';
+import { ChangeEvent, memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { FaWrench } from 'react-icons/fa';
@@ -86,8 +86,52 @@ const IAICanvasSettingsButtonPopover = () => {
     [shouldSnapToGrid]
   );
 
-  const handleChangeShouldSnapToGrid = (e: ChangeEvent<HTMLInputElement>) =>
+  const handleChangeShouldSnapToGrid = useCallback(
-    dispatch(setShouldSnapToGrid(e.target.checked));
+    (e: ChangeEvent<HTMLInputElement>) =>
+      dispatch(setShouldSnapToGrid(e.target.checked)),
+    [dispatch]
+  );
+
+  const handleChangeShouldShowIntermediates = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) =>
+      dispatch(setShouldShowIntermediates(e.target.checked)),
+    [dispatch]
+  );
+  const handleChangeShouldShowGrid = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) =>
+      dispatch(setShouldShowGrid(e.target.checked)),
+    [dispatch]
+  );
+  const handleChangeShouldDarkenOutsideBoundingBox = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) =>
+      dispatch(setShouldDarkenOutsideBoundingBox(e.target.checked)),
+    [dispatch]
+  );
+  const handleChangeShouldAutoSave = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) =>
+      dispatch(setShouldAutoSave(e.target.checked)),
+    [dispatch]
+  );
+  const handleChangeShouldCropToBoundingBoxOnSave = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) =>
+      dispatch(setShouldCropToBoundingBoxOnSave(e.target.checked)),
+    [dispatch]
+  );
+  const handleChangeShouldRestrictStrokesToBox = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) =>
+      dispatch(setShouldRestrictStrokesToBox(e.target.checked)),
+    [dispatch]
+  );
+  const handleChangeShouldShowCanvasDebugInfo = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) =>
+      dispatch(setShouldShowCanvasDebugInfo(e.target.checked)),
+    [dispatch]
+  );
+  const handleChangeShouldAntialias = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) =>
+      dispatch(setShouldAntialias(e.target.checked)),
+    [dispatch]
+  );
 
   return (
     <IAIPopover
@@ -104,14 +148,12 @@ const IAICanvasSettingsButtonPopover = () => {
         <IAISimpleCheckbox
           label={t('unifiedCanvas.showIntermediates')}
           isChecked={shouldShowIntermediates}
-          onChange={(e) =>
+          onChange={handleChangeShouldShowIntermediates}
-            dispatch(setShouldShowIntermediates(e.target.checked))
-          }
         />
         <IAISimpleCheckbox
           label={t('unifiedCanvas.showGrid')}
           isChecked={shouldShowGrid}
-          onChange={(e) => dispatch(setShouldShowGrid(e.target.checked))}
+          onChange={handleChangeShouldShowGrid}
         />
         <IAISimpleCheckbox
           label={t('unifiedCanvas.snapToGrid')}
@@ -121,41 +163,33 @@ const IAICanvasSettingsButtonPopover = () => {
         <IAISimpleCheckbox
           label={t('unifiedCanvas.darkenOutsideSelection')}
           isChecked={shouldDarkenOutsideBoundingBox}
-          onChange={(e) =>
+          onChange={handleChangeShouldDarkenOutsideBoundingBox}
-            dispatch(setShouldDarkenOutsideBoundingBox(e.target.checked))
-          }
         />
         <IAISimpleCheckbox
           label={t('unifiedCanvas.autoSaveToGallery')}
           isChecked={shouldAutoSave}
-          onChange={(e) => dispatch(setShouldAutoSave(e.target.checked))}
+          onChange={handleChangeShouldAutoSave}
         />
         <IAISimpleCheckbox
           label={t('unifiedCanvas.saveBoxRegionOnly')}
           isChecked={shouldCropToBoundingBoxOnSave}
-          onChange={(e) =>
+          onChange={handleChangeShouldCropToBoundingBoxOnSave}
-            dispatch(setShouldCropToBoundingBoxOnSave(e.target.checked))
-          }
         />
         <IAISimpleCheckbox
           label={t('unifiedCanvas.limitStrokesToBox')}
           isChecked={shouldRestrictStrokesToBox}
-          onChange={(e) =>
+          onChange={handleChangeShouldRestrictStrokesToBox}
-            dispatch(setShouldRestrictStrokesToBox(e.target.checked))
-          }
         />
         <IAISimpleCheckbox
           label={t('unifiedCanvas.showCanvasDebugInfo')}
           isChecked={shouldShowCanvasDebugInfo}
-          onChange={(e) =>
+          onChange={handleChangeShouldShowCanvasDebugInfo}
-            dispatch(setShouldShowCanvasDebugInfo(e.target.checked))
-          }
         />
 
         <IAISimpleCheckbox
           label={t('unifiedCanvas.antialiasing')}
           isChecked={shouldAntialias}
-          onChange={(e) => dispatch(setShouldAntialias(e.target.checked))}
+          onChange={handleChangeShouldAntialias}
         />
         <ClearCanvasHistoryButtonModal />
       </Flex>

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx

@@ -15,7 +15,8 @@ import {
   setTool,
 } from 'features/canvas/store/canvasSlice';
 import { clamp, isEqual } from 'lodash-es';
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
+import { RgbaColor } from 'react-colorful';
 
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
@@ -172,11 +173,33 @@ const IAICanvasToolChooserOptions = () => {
     [brushColor]
   );
 
-  const handleSelectBrushTool = () => dispatch(setTool('brush'));
+  const handleSelectBrushTool = useCallback(() => {
-  const handleSelectEraserTool = () => dispatch(setTool('eraser'));
+    dispatch(setTool('brush'));
-  const handleSelectColorPickerTool = () => dispatch(setTool('colorPicker'));
+  }, [dispatch]);
-  const handleFillRect = () => dispatch(addFillRect());
+  const handleSelectEraserTool = useCallback(() => {
-  const handleEraseBoundingBox = () => dispatch(addEraseRect());
+    dispatch(setTool('eraser'));
+  }, [dispatch]);
+  const handleSelectColorPickerTool = useCallback(() => {
+    dispatch(setTool('colorPicker'));
+  }, [dispatch]);
+  const handleFillRect = useCallback(() => {
+    dispatch(addFillRect());
+  }, [dispatch]);
+  const handleEraseBoundingBox = useCallback(() => {
+    dispatch(addEraseRect());
+  }, [dispatch]);
+  const handleChangeBrushSize = useCallback(
+    (newSize: number) => {
+      dispatch(setBrushSize(newSize));
+    },
+    [dispatch]
+  );
+  const handleChangeBrushColor = useCallback(
+    (newColor: RgbaColor) => {
+      dispatch(setBrushColor(newColor));
+    },
+    [dispatch]
+  );
 
   return (
     <ButtonGroup isAttached>
@@ -233,7 +256,7 @@ const IAICanvasToolChooserOptions = () => {
               label={t('unifiedCanvas.brushSize')}
               value={brushSize}
               withInput
-              onChange={(newSize) => dispatch(setBrushSize(newSize))}
+              onChange={handleChangeBrushSize}
               sliderNumberInputProps={{ max: 500 }}
             />
           </Flex>
@@ -247,7 +270,7 @@ const IAICanvasToolChooserOptions = () => {
             <IAIColorPicker
               withNumberInput={true}
               color={brushColor}
-              onChange={(newColor) => dispatch(setBrushColor(newColor))}
+              onChange={handleChangeBrushColor}
             />
           </Box>
         </Flex>

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx

@@ -25,9 +25,9 @@ import {
   LAYER_NAMES_DICT,
 } from 'features/canvas/store/canvasTypes';
 import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider';
-import { useCopyImageToClipboard } from 'features/ui/hooks/useCopyImageToClipboard';
+import { useCopyImageToClipboard } from 'common/hooks/useCopyImageToClipboard';
 import { isEqual } from 'lodash-es';
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import {
@@ -151,7 +151,9 @@ const IAICanvasToolbar = () => {
     [canvasBaseLayer]
   );
 
-  const handleSelectMoveTool = () => dispatch(setTool('move'));
+  const handleSelectMoveTool = useCallback(() => {
+    dispatch(setTool('move'));
+  }, [dispatch]);
 
   const handleClickResetCanvasView = useSingleAndDoubleClick(
     () => handleResetCanvasView(false),
@@ -174,36 +176,39 @@ const IAICanvasToolbar = () => {
     );
   };
 
-  const handleResetCanvas = () => {
+  const handleResetCanvas = useCallback(() => {
     dispatch(resetCanvas());
-  };
+  }, [dispatch]);
 
-  const handleMergeVisible = () => {
+  const handleMergeVisible = useCallback(() => {
     dispatch(canvasMerged());
-  };
+  }, [dispatch]);
 
-  const handleSaveToGallery = () => {
+  const handleSaveToGallery = useCallback(() => {
     dispatch(canvasSavedToGallery());
-  };
+  }, [dispatch]);
 
-  const handleCopyImageToClipboard = () => {
+  const handleCopyImageToClipboard = useCallback(() => {
     if (!isClipboardAPIAvailable) {
       return;
     }
     dispatch(canvasCopiedToClipboard());
-  };
+  }, [dispatch, isClipboardAPIAvailable]);
 
-  const handleDownloadAsImage = () => {
+  const handleDownloadAsImage = useCallback(() => {
     dispatch(canvasDownloadedAsImage());
-  };
+  }, [dispatch]);
 
-  const handleChangeLayer = (v: string) => {
+  const handleChangeLayer = useCallback(
+    (v: string) => {
       const newLayer = v as CanvasLayer;
       dispatch(setLayer(newLayer));
       if (newLayer === 'mask' && !isMaskEnabled) {
         dispatch(setIsMaskEnabled(true));
       }
-  };
+    },
+    [dispatch, isMaskEnabled]
+  );
 
   return (
     <Flex

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasUndoButton.tsx

@@ -10,6 +10,7 @@ import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { isEqual } from 'lodash-es';
 import { useTranslation } from 'react-i18next';
 import { stateSelector } from 'app/store/store';
+import { useCallback } from 'react';
 
 const canvasUndoSelector = createSelector(
   [stateSelector, activeTabNameSelector],
@@ -35,9 +36,9 @@ export default function IAICanvasUndoButton() {
 
   const { canUndo, activeTabName } = useAppSelector(canvasUndoSelector);
 
-  const handleUndo = () => {
+  const handleUndo = useCallback(() => {
     dispatch(undo());
-  };
+  }, [dispatch]);
 
   useHotkeys(
     ['meta+z', 'ctrl+z'],

invokeai/frontend/web/src/features/canvas/util/konvaNodeToDataURL.ts

@@ -1,16 +0,0 @@
-import Konva from 'konva';
-import { IRect } from 'konva/lib/types';
-
-/**
- * Converts a Konva node to a dataURL
- * @param node - The Konva node to convert to a dataURL
- * @param boundingBox - The bounding box to crop to
- * @returns A dataURL of the node cropped to the bounding box
- */
-export const konvaNodeToDataURL = (
-  node: Konva.Node,
-  boundingBox: IRect
-): string => {
-  // get a dataURL of the bbox'd region
-  return node.toDataURL(boundingBox);
-};

invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx

@@ -87,6 +87,11 @@ const ChangeBoardModal = () => {
     selectedBoard,
   ]);
 
+  const handleSetSelectedBoard = useCallback(
+    (v: string | null) => setSelectedBoard(v),
+    []
+  );
+
   const cancelRef = useRef<HTMLButtonElement>(null);
 
   return (
@@ -113,7 +118,7 @@ const ChangeBoardModal = () => {
                   isFetching ? t('boards.loading') : t('boards.selectBoard')
                 }
                 disabled={isFetching}
-                onChange={(v) => setSelectedBoard(v)}
+                onChange={handleSetSelectedBoard}
                 value={selectedBoard}
                 data={data}
               />

invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterPreprocessButton.tsx

@@ -1,36 +0,0 @@
-import { useAppDispatch } from 'app/store/storeHooks';
-import IAIButton from 'common/components/IAIButton';
-import { useIsReadyToEnqueue } from 'common/hooks/useIsReadyToEnqueue';
-import { memo, useCallback } from 'react';
-import { useControlAdapterControlImage } from '../hooks/useControlAdapterControlImage';
-import { controlAdapterImageProcessed } from '../store/actions';
-
-type Props = {
-  id: string;
-};
-
-const ControlAdapterPreprocessButton = ({ id }: Props) => {
-  const controlImage = useControlAdapterControlImage(id);
-  const dispatch = useAppDispatch();
-  const isReady = useIsReadyToEnqueue();
-
-  const handleProcess = useCallback(() => {
-    dispatch(
-      controlAdapterImageProcessed({
-        id,
-      })
-    );
-  }, [id, dispatch]);
-
-  return (
-    <IAIButton
-      size="sm"
-      onClick={handleProcess}
-      isDisabled={Boolean(!controlImage) || !isReady}
-    >
-      Preprocess
-    </IAIButton>
-  );
-};
-
-export default memo(ControlAdapterPreprocessButton);

invokeai/frontend/web/src/features/dynamicPrompts/store/selectors.ts

@@ -1 +0,0 @@
-//

invokeai/frontend/web/src/features/embedding/components/ParamEmbeddingPopover.tsx

@@ -14,9 +14,9 @@ import IAIMantineSelectItemWithTooltip from 'common/components/IAIMantineSelectI
 import { MODEL_TYPE_MAP } from 'features/parameters/types/constants';
 import { forEach } from 'lodash-es';
 import { PropsWithChildren, memo, useCallback, useMemo, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useGetTextualInversionModelsQuery } from 'services/api/endpoints/models';
 import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants';
-import { useTranslation } from 'react-i18next';
 
 type Props = PropsWithChildren & {
   onSelect: (v: string) => void;
@@ -78,6 +78,13 @@ const ParamEmbeddingPopover = (props: Props) => {
     [onSelect]
   );
 
+  const filterFunc = useCallback(
+    (value: string, item: SelectItem) =>
+      item.label?.toLowerCase().includes(value.toLowerCase().trim()) ||
+      item.value.toLowerCase().includes(value.toLowerCase().trim()),
+    []
+  );
+
   return (
     <Popover
       initialFocusRef={inputRef}
@@ -127,12 +134,7 @@ const ParamEmbeddingPopover = (props: Props) => {
               itemComponent={IAIMantineSelectItemWithTooltip}
               disabled={data.length === 0}
               onDropdownClose={onClose}
-              filter={(value, item: SelectItem) =>
+              filter={filterFunc}
-                item.label
-                  ?.toLowerCase()
-                  .includes(value.toLowerCase().trim()) ||
-                item.value.toLowerCase().includes(value.toLowerCase().trim())
-              }
               onChange={handleChange}
             />
           )}

invokeai/frontend/web/src/features/gallery/components/Boards/BoardAutoAddSelect.tsx

@@ -60,6 +60,13 @@ const BoardAutoAddSelect = () => {
     [dispatch]
   );
 
+  const filterFunc = useCallback(
+    (value: string, item: SelectItem) =>
+      item.label?.toLowerCase().includes(value.toLowerCase().trim()) ||
+      item.value.toLowerCase().includes(value.toLowerCase().trim()),
+    []
+  );
+
   return (
     <IAIMantineSearchableSelect
       label={t('boards.autoAddBoard')}
@@ -71,10 +78,7 @@ const BoardAutoAddSelect = () => {
       nothingFound={t('boards.noMatching')}
       itemComponent={IAIMantineSelectItemWithTooltip}
       disabled={!hasBoards || autoAssignBoardOnClick}
-      filter={(value, item: SelectItem) =>
+      filter={filterFunc}
-        item.label?.toLowerCase().includes(value.toLowerCase().trim()) ||
-        item.value.toLowerCase().includes(value.toLowerCase().trim())
-      }
       onChange={handleChange}
     />
   );

invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx

@@ -90,14 +90,8 @@ const BoardContextMenu = ({
     e.preventDefault();
   }, []);
 
-  return (
+  const renderMenuFunc = useCallback(
-    <IAIContextMenu<HTMLDivElement>
+    () => (
-      menuProps={{ size: 'sm', isLazy: true }}
-      menuButtonProps={{
-        bg: 'transparent',
-        _hover: { bg: 'transparent' },
-      }}
-      renderMenu={() => (
       <MenuList
         sx={{ visibility: 'visible !important' }}
         motionProps={menuListMotionProps}
@@ -112,10 +106,7 @@ const BoardContextMenu = ({
             {t('boards.menuItemAutoAdd')}
           </MenuItem>
           {isBulkDownloadEnabled && (
-              <MenuItem
+            <MenuItem icon={<FaDownload />} onClickCapture={handleBulkDownload}>
-                icon={<FaDownload />}
-                onClickCapture={handleBulkDownload}
-              >
               {t('boards.downloadBoard')}
             </MenuItem>
           )}
@@ -128,7 +119,29 @@ const BoardContextMenu = ({
           )}
         </MenuGroup>
       </MenuList>
-      )}
+    ),
+    [
+      autoAssignBoardOnClick,
+      board,
+      boardName,
+      handleBulkDownload,
+      handleSetAutoAdd,
+      isAutoAdd,
+      isBulkDownloadEnabled,
+      setBoardToDelete,
+      skipEvent,
+      t,
+    ]
+  );
+
+  return (
+    <IAIContextMenu<HTMLDivElement>
+      menuProps={{ size: 'sm', isLazy: true }}
+      menuButtonProps={{
+        bg: 'transparent',
+        _hover: { bg: 'transparent' },
+      }}
+      renderMenu={renderMenuFunc}
     >
       {children}
     </IAIContextMenu>

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GenericBoard.tsx

@@ -1,108 +0,0 @@
-import { As, Badge, Flex } from '@chakra-ui/react';
-import IAIDroppable from 'common/components/IAIDroppable';
-import { IAINoContentFallback } from 'common/components/IAIImageFallback';
-import { TypesafeDroppableData } from 'features/dnd/types';
-import { BoardId } from 'features/gallery/store/types';
-import { ReactNode, memo } from 'react';
-import BoardContextMenu from '../BoardContextMenu';
-
-type GenericBoardProps = {
-  board_id: BoardId;
-  droppableData?: TypesafeDroppableData;
-  onClick: () => void;
-  isSelected: boolean;
-  icon: As;
-  label: string;
-  dropLabel?: ReactNode;
-  badgeCount?: number;
-};
-
-export const formatBadgeCount = (count: number) =>
-  Intl.NumberFormat('en-US', {
-    notation: 'compact',
-    maximumFractionDigits: 1,
-  }).format(count);
-
-const GenericBoard = (props: GenericBoardProps) => {
-  const {
-    board_id,
-    droppableData,
-    onClick,
-    isSelected,
-    icon,
-    label,
-    badgeCount,
-    dropLabel,
-  } = props;
-
-  return (
-    <BoardContextMenu board_id={board_id}>
-      {(ref) => (
-        <Flex
-          ref={ref}
-          sx={{
-            flexDir: 'column',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            cursor: 'pointer',
-            w: 'full',
-            h: 'full',
-            borderRadius: 'base',
-          }}
-        >
-          <Flex
-            onClick={onClick}
-            sx={{
-              position: 'relative',
-              justifyContent: 'center',
-              alignItems: 'center',
-              borderRadius: 'base',
-              w: 'full',
-              aspectRatio: '1/1',
-              overflow: 'hidden',
-              shadow: isSelected ? 'selected.light' : undefined,
-              _dark: { shadow: isSelected ? 'selected.dark' : undefined },
-              flexShrink: 0,
-            }}
-          >
-            <IAINoContentFallback
-              boxSize={8}
-              icon={icon}
-              sx={{
-                border: '2px solid var(--invokeai-colors-base-200)',
-                _dark: { border: '2px solid var(--invokeai-colors-base-800)' },
-              }}
-            />
-            <Flex
-              sx={{
-                position: 'absolute',
-                insetInlineEnd: 0,
-                top: 0,
-                p: 1,
-              }}
-            >
-              {badgeCount !== undefined && (
-                <Badge variant="solid">{formatBadgeCount(badgeCount)}</Badge>
-              )}
-            </Flex>
-            <IAIDroppable data={droppableData} dropLabel={dropLabel} />
-          </Flex>
-          <Flex
-            sx={{
-              h: 'full',
-              alignItems: 'center',
-              fontWeight: isSelected ? 600 : undefined,
-              fontSize: 'sm',
-              color: isSelected ? 'base.900' : 'base.700',
-              _dark: { color: isSelected ? 'base.50' : 'base.200' },
-            }}
-          >
-            {label}
-          </Flex>
-        </Flex>
-      )}
-    </BoardContextMenu>
-  );
-};
-
-export default memo(GenericBoard);

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/SystemBoardButton.tsx

@@ -1,53 +0,0 @@
-import { createSelector } from '@reduxjs/toolkit';
-import { stateSelector } from 'app/store/store';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import IAIButton from 'common/components/IAIButton';
-import { boardIdSelected } from 'features/gallery/store/gallerySlice';
-import { memo, useCallback, useMemo } from 'react';
-import { useBoardName } from 'services/api/hooks/useBoardName';
-
-type Props = {
-  board_id: 'images' | 'assets' | 'no_board';
-};
-
-const SystemBoardButton = ({ board_id }: Props) => {
-  const dispatch = useAppDispatch();
-
-  const selector = useMemo(
-    () =>
-      createSelector(
-        [stateSelector],
-        ({ gallery }) => {
-          const { selectedBoardId } = gallery;
-          return { isSelected: selectedBoardId === board_id };
-        },
-        defaultSelectorOptions
-      ),
-    [board_id]
-  );
-
-  const { isSelected } = useAppSelector(selector);
-
-  const boardName = useBoardName(board_id);
-
-  const handleClick = useCallback(() => {
-    dispatch(boardIdSelected({ boardId: board_id }));
-  }, [board_id, dispatch]);
-
-  return (
-    <IAIButton
-      onClick={handleClick}
-      size="sm"
-      isChecked={isSelected}
-      sx={{
-        flexGrow: 1,
-        borderRadius: 'base',
-      }}
-    >
-      {boardName}
-    </IAIButton>
-  );
-};
-
-export default memo(SystemBoardButton);

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

@@ -1,22 +0,0 @@
-import { Flex } from '@chakra-ui/react';
-import { memo } from 'react';
-import { FaEyeSlash } from 'react-icons/fa';
-
-const CurrentImageHidden = () => {
-  return (
-    <Flex
-      sx={{
-        w: 'full',
-        h: 'full',
-        alignItems: 'center',
-        justifyContent: 'center',
-        position: 'absolute',
-        color: 'base.400',
-      }}
-    >
-      <FaEyeSlash fontSize="25vh" />
-    </Flex>
-  );
-};
-
-export default memo(CurrentImageHidden);

invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx

@@ -61,6 +61,12 @@ const GallerySettingsPopover = () => {
     [dispatch]
   );
 
+  const handleChangeAutoAssignBoardOnClick = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) =>
+      dispatch(autoAssignBoardOnClickChanged(e.target.checked)),
+    [dispatch]
+  );
+
   return (
     <IAIPopover
       triggerComponent={
@@ -91,9 +97,7 @@ const GallerySettingsPopover = () => {
         <IAISimpleCheckbox
           label={t('gallery.autoAssignBoardOnClick')}
           isChecked={autoAssignBoardOnClick}
-          onChange={(e: ChangeEvent<HTMLInputElement>) =>
+          onChange={handleChangeAutoAssignBoardOnClick}
-            dispatch(autoAssignBoardOnClickChanged(e.target.checked))
-          }
         />
         <BoardAutoAddSelect />
       </Flex>

invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageContextMenu.tsx

@@ -35,14 +35,7 @@ const ImageContextMenu = ({ imageDTO, children }: Props) => {
     e.preventDefault();
   }, []);
 
-  return (
+  const renderMenuFunc = useCallback(() => {
-    <IAIContextMenu<HTMLDivElement>
-      menuProps={{ size: 'sm', isLazy: true }}
-      menuButtonProps={{
-        bg: 'transparent',
-        _hover: { bg: 'transparent' },
-      }}
-      renderMenu={() => {
     if (!imageDTO) {
       return null;
     }
@@ -68,7 +61,16 @@ const ImageContextMenu = ({ imageDTO, children }: Props) => {
         <SingleSelectionMenuItems imageDTO={imageDTO} />
       </MenuList>
     );
+  }, [imageDTO, selectionCount, skipEvent]);
+
+  return (
+    <IAIContextMenu<HTMLDivElement>
+      menuProps={{ size: 'sm', isLazy: true }}
+      menuButtonProps={{
+        bg: 'transparent',
+        _hover: { bg: 'transparent' },
       }}
+      renderMenu={renderMenuFunc}
     >
       {children}
     </IAIContextMenu>

invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx

@@ -13,7 +13,7 @@ import { workflowLoadRequested } from 'features/nodes/store/actions';
 import { useRecallParameters } from 'features/parameters/hooks/useRecallParameters';
 import { initialImageSelected } from 'features/parameters/store/actions';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
-import { useCopyImageToClipboard } from 'features/ui/hooks/useCopyImageToClipboard';
+import { useCopyImageToClipboard } from 'common/hooks/useCopyImageToClipboard';
 import { setActiveTab } from 'features/ui/store/uiSlice';
 import { memo, useCallback } from 'react';
 import { flushSync } from 'react-dom';

invokeai/frontend/web/src/features/gallery/components/ImageFallbackSpinner.tsx

@@ -1,27 +0,0 @@
-import { Flex, Spinner, SpinnerProps } from '@chakra-ui/react';
-import { memo } from 'react';
-
-type ImageFallbackSpinnerProps = SpinnerProps;
-
-const ImageFallbackSpinner = (props: ImageFallbackSpinnerProps) => {
-  const { size = 'xl', ...rest } = props;
-
-  return (
-    <Flex
-      sx={{
-        w: 'full',
-        h: 'full',
-        alignItems: 'center',
-        justifyContent: 'center',
-        position: 'absolute',
-        color: 'base.400',
-        minH: 36,
-        minW: 36,
-      }}
-    >
-      <Spinner size={size} {...rest} />
-    </Flex>
-  );
-};
-
-export default memo(ImageFallbackSpinner);

invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx

@@ -20,6 +20,7 @@ import { useBoardTotal } from 'services/api/hooks/useBoardTotal';
 import GalleryImage from './GalleryImage';
 import ImageGridItemContainer from './ImageGridItemContainer';
 import ImageGridListContainer from './ImageGridListContainer';
+import { EntityId } from '@reduxjs/toolkit';
 
 const overlayScrollbarsConfig: UseOverlayScrollbarsParams = {
   defer: true,
@@ -71,6 +72,13 @@ const GalleryImageGrid = () => {
     });
   }, [areMoreAvailable, listImages, queryArgs, currentData?.ids.length]);
 
+  const itemContentFunc = useCallback(
+    (index: number, imageName: EntityId) => (
+      <GalleryImage key={imageName} imageName={imageName as string} />
+    ),
+    []
+  );
+
   useEffect(() => {
     // Initialize the gallery's custom scrollbar
     const { current: root } = rootRef;
@@ -131,9 +139,7 @@ const GalleryImageGrid = () => {
               List: ImageGridListContainer,
             }}
             scrollerRef={setScroller}
-            itemContent={(index, imageName) => (
+            itemContent={itemContentFunc}
-              <GalleryImage key={imageName} imageName={imageName as string} />
-            )}
           />
         </Box>
         <IAIButton

invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx

@@ -279,7 +279,7 @@ const ImageMetadataActions = (props: Props) => {
                 key={index}
                 label="LoRA"
                 value={`${lora.lora.model_name} - ${lora.weight}`}
-                onClick={() => handleRecallLoRA(lora)}
+                onClick={handleRecallLoRA.bind(null, lora)}
               />
             );
           }
@@ -289,7 +289,7 @@ const ImageMetadataActions = (props: Props) => {
           key={index}
           label="ControlNet"
           value={`${controlnet.control_model?.model_name} - ${controlnet.control_weight}`}
-          onClick={() => handleRecallControlNet(controlnet)}
+          onClick={handleRecallControlNet.bind(null, controlnet)}
         />
       ))}
       {validIPAdapters.map((ipAdapter, index) => (
@@ -297,7 +297,7 @@ const ImageMetadataActions = (props: Props) => {
           key={index}
           label="IP Adapter"
           value={`${ipAdapter.ip_adapter_model?.model_name} - ${ipAdapter.weight}`}
-          onClick={() => handleRecallIPAdapter(ipAdapter)}
+          onClick={handleRecallIPAdapter.bind(null, ipAdapter)}
         />
       ))}
       {validT2IAdapters.map((t2iAdapter, index) => (
@@ -305,7 +305,7 @@ const ImageMetadataActions = (props: Props) => {
           key={index}
           label="T2I Adapter"
           value={`${t2iAdapter.t2i_adapter_model?.model_name} - ${t2iAdapter.weight}`}
-          onClick={() => handleRecallT2IAdapter(t2iAdapter)}
+          onClick={handleRecallT2IAdapter.bind(null, t2iAdapter)}
         />
       ))}
     </>

invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataItem.tsx

@@ -1,6 +1,6 @@
 import { ExternalLinkIcon } from '@chakra-ui/icons';
 import { Flex, IconButton, Link, Text, Tooltip } from '@chakra-ui/react';
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaCopy } from 'react-icons/fa';
 import { IoArrowUndoCircleOutline } from 'react-icons/io5';
@@ -27,6 +27,11 @@ const ImageMetadataItem = ({
 }: MetadataItemProps) => {
   const { t } = useTranslation();
 
+  const handleCopy = useCallback(
+    () => navigator.clipboard.writeText(value.toString()),
+    [value]
+  );
+
   if (!value) {
     return null;
   }
@@ -53,7 +58,7 @@ const ImageMetadataItem = ({
             size="xs"
             variant="ghost"
             fontSize={14}
-            onClick={() => navigator.clipboard.writeText(value.toString())}
+            onClick={handleCopy}
           />
         </Tooltip>
       )}

invokeai/frontend/web/src/features/lora/components/ParamLoraSelect.tsx

@@ -76,6 +76,13 @@ const ParamLoRASelect = () => {
     [dispatch, loraModels?.entities]
   );
 
+  const filterFunc = useCallback(
+    (value: string, item: SelectItem) =>
+      item.label?.toLowerCase().includes(value.toLowerCase().trim()) ||
+      item.value.toLowerCase().includes(value.toLowerCase().trim()),
+    []
+  );
+
   if (loraModels?.ids.length === 0) {
     return (
       <Flex sx={{ justifyContent: 'center', p: 2 }}>
@@ -94,10 +101,7 @@ const ParamLoRASelect = () => {
       nothingFound="No matching LoRAs"
       itemComponent={IAIMantineSelectItemWithTooltip}
       disabled={data.length === 0}
-      filter={(value, item: SelectItem) =>
+      filter={filterFunc}
-        item.label?.toLowerCase().includes(value.toLowerCase().trim()) ||
-        item.value.toLowerCase().includes(value.toLowerCase().trim())
-      }
       onChange={handleChange}
       data-testid="add-lora"
     />

invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx

@@ -1,6 +1,6 @@
 import { ButtonGroup, Flex } from '@chakra-ui/react';
 import IAIButton from 'common/components/IAIButton';
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import AdvancedAddModels from './AdvancedAddModels';
 import SimpleAddModels from './SimpleAddModels';
 
@@ -8,6 +8,11 @@ export default function AddModels() {
   const [addModelMode, setAddModelMode] = useState<'simple' | 'advanced'>(
     'simple'
   );
+  const handleAddModelSimple = useCallback(() => setAddModelMode('simple'), []);
+  const handleAddModelAdvanced = useCallback(
+    () => setAddModelMode('advanced'),
+    []
+  );
   return (
     <Flex
       flexDirection="column"
@@ -20,14 +25,14 @@ export default function AddModels() {
         <IAIButton
           size="sm"
           isChecked={addModelMode == 'simple'}
-          onClick={() => setAddModelMode('simple')}
+          onClick={handleAddModelSimple}
         >
           Simple
         </IAIButton>
         <IAIButton
           size="sm"
           isChecked={addModelMode == 'advanced'}
-          onClick={() => setAddModelMode('advanced')}
+          onClick={handleAddModelAdvanced}
         >
           Advanced
         </IAIButton>

invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx

@@ -6,7 +6,7 @@ import IAIMantineTextInput from 'common/components/IAIMantineInput';
 import IAISimpleCheckbox from 'common/components/IAISimpleCheckbox';
 import { addToast } from 'features/system/store/systemSlice';
 import { makeToast } from 'features/system/util/makeToast';
-import { useState } from 'react';
+import { FocusEventHandler, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAddMainModelsMutation } from 'services/api/endpoints/models';
 import { CheckpointModelConfig } from 'services/api/types';
@@ -83,6 +83,27 @@ export default function AdvancedAddCheckpoint(
       });
   };
 
+  const handleBlurModelLocation: FocusEventHandler<HTMLInputElement> =
+    useCallback(
+      (e) => {
+        if (advancedAddCheckpointForm.values['model_name'] === '') {
+          const modelName = getModelName(e.currentTarget.value);
+          if (modelName) {
+            advancedAddCheckpointForm.setFieldValue(
+              'model_name',
+              modelName as string
+            );
+          }
+        }
+      },
+      [advancedAddCheckpointForm]
+    );
+
+  const handleChangeUseCustomConfig = useCallback(
+    () => setUseCustomConfig((prev) => !prev),
+    []
+  );
+
   return (
     <form
       onSubmit={advancedAddCheckpointForm.onSubmit((v) =>
@@ -104,17 +125,7 @@ export default function AdvancedAddCheckpoint(
           label={t('modelManager.modelLocation')}
           required
           {...advancedAddCheckpointForm.getInputProps('path')}
-          onBlur={(e) => {
+          onBlur={handleBlurModelLocation}
-            if (advancedAddCheckpointForm.values['model_name'] === '') {
-              const modelName = getModelName(e.currentTarget.value);
-              if (modelName) {
-                advancedAddCheckpointForm.setFieldValue(
-                  'model_name',
-                  modelName as string
-                );
-              }
-            }
-          }}
         />
         <IAIMantineTextInput
           label={t('modelManager.description')}
@@ -144,7 +155,7 @@ export default function AdvancedAddCheckpoint(
           )}
           <IAISimpleCheckbox
             isChecked={useCustomConfig}
-            onChange={() => setUseCustomConfig(!useCustomConfig)}
+            onChange={handleChangeUseCustomConfig}
             label={t('modelManager.useCustomConfig')}
           />
           <IAIButton mt={2} type="submit">

invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx

@@ -12,6 +12,7 @@ import { setAdvancedAddScanModel } from '../../store/modelManagerSlice';
 import BaseModelSelect from '../shared/BaseModelSelect';
 import ModelVariantSelect from '../shared/ModelVariantSelect';
 import { getModelName } from './util';
+import { FocusEventHandler, useCallback } from 'react';
 
 type AdvancedAddDiffusersProps = {
   model_path?: string;
@@ -74,6 +75,22 @@ export default function AdvancedAddDiffusers(props: AdvancedAddDiffusersProps) {
       });
   };
 
+  const handleBlurModelLocation: FocusEventHandler<HTMLInputElement> =
+    useCallback(
+      (e) => {
+        if (advancedAddDiffusersForm.values['model_name'] === '') {
+          const modelName = getModelName(e.currentTarget.value, false);
+          if (modelName) {
+            advancedAddDiffusersForm.setFieldValue(
+              'model_name',
+              modelName as string
+            );
+          }
+        }
+      },
+      [advancedAddDiffusersForm]
+    );
+
   return (
     <form
       onSubmit={advancedAddDiffusersForm.onSubmit((v) =>
@@ -96,17 +113,7 @@ export default function AdvancedAddDiffusers(props: AdvancedAddDiffusersProps) {
           label={t('modelManager.modelLocation')}
           placeholder={t('modelManager.modelLocationValidationMsg')}
           {...advancedAddDiffusersForm.getInputProps('path')}
-          onBlur={(e) => {
+          onBlur={handleBlurModelLocation}
-            if (advancedAddDiffusersForm.values['model_name'] === '') {
-              const modelName = getModelName(e.currentTarget.value, false);
-              if (modelName) {
-                advancedAddDiffusersForm.setFieldValue(
-                  'model_name',
-                  modelName as string
-                );
-              }
-            }
-          }}
         />
         <IAIMantineTextInput
           label={t('modelManager.description')}

invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddModels.tsx

@@ -1,7 +1,7 @@
 import { Flex } from '@chakra-ui/react';
 import { SelectItem } from '@mantine/core';
 import IAIMantineSelect from 'common/components/IAIMantineSelect';
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import AdvancedAddCheckpoint from './AdvancedAddCheckpoint';
 import AdvancedAddDiffusers from './AdvancedAddDiffusers';
 import { useTranslation } from 'react-i18next';
@@ -18,6 +18,12 @@ export default function AdvancedAddModels() {
     useState<ManualAddMode>('diffusers');
 
   const { t } = useTranslation();
+  const handleChange = useCallback((v: string | null) => {
+    if (!v) {
+      return;
+    }
+    setAdvancedAddMode(v as ManualAddMode);
+  }, []);
 
   return (
     <Flex flexDirection="column" gap={4} width="100%">
@@ -25,12 +31,7 @@ export default function AdvancedAddModels() {
         label={t('modelManager.modelType')}
         value={advancedAddMode}
         data={advancedAddModeData}
-        onChange={(v) => {
+        onChange={handleChange}
-          if (!v) {
-            return;
-          }
-          setAdvancedAddMode(v as ManualAddMode);
-        }}
       />
 
       <Flex

invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/FoundModelsList.tsx

@@ -92,6 +92,11 @@ export default function FoundModelsList() {
     setNameFilter(e.target.value);
   }, []);
 
+  const handleClickSetAdvanced = useCallback(
+    (model: string) => dispatch(setAdvancedAddScanModel(model)),
+    [dispatch]
+  );
+
   const renderModels = ({
     models,
     showActions = true,
@@ -140,7 +145,7 @@ export default function FoundModelsList() {
                 {t('modelManager.quickAdd')}
               </IAIButton>
               <IAIButton
-                onClick={() => dispatch(setAdvancedAddScanModel(model))}
+                onClick={handleClickSetAdvanced.bind(null, model)}
                 isLoading={isLoading}
               >
                 {t('modelManager.advanced')}

invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx

@@ -4,7 +4,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
 import IAIMantineSelect from 'common/components/IAIMantineSelect';
 import { motion } from 'framer-motion';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { FaTimes } from 'react-icons/fa';
 import { setAdvancedAddScanModel } from '../../store/modelManagerSlice';
 import AdvancedAddCheckpoint from './AdvancedAddCheckpoint';
@@ -35,6 +35,23 @@ export default function ScanAdvancedAddModels() {
 
   const dispatch = useAppDispatch();
 
+  const handleClickSetAdvanced = useCallback(
+    () => dispatch(setAdvancedAddScanModel(null)),
+    [dispatch]
+  );
+
+  const handleChangeAddMode = useCallback((v: string | null) => {
+    if (!v) {
+      return;
+    }
+    setAdvancedAddMode(v as ManualAddMode);
+    if (v === 'checkpoint') {
+      setIsCheckpoint(true);
+    } else {
+      setIsCheckpoint(false);
+    }
+  }, []);
+
   if (!advancedAddScanModel) {
     return null;
   }
@@ -68,7 +85,7 @@ export default function ScanAdvancedAddModels() {
         <IAIIconButton
           icon={<FaTimes />}
           aria-label={t('modelManager.closeAdvanced')}
-          onClick={() => dispatch(setAdvancedAddScanModel(null))}
+          onClick={handleClickSetAdvanced}
           size="sm"
         />
       </Flex>
@@ -76,17 +93,7 @@ export default function ScanAdvancedAddModels() {
         label={t('modelManager.modelType')}
         value={advancedAddMode}
         data={advancedAddModeData}
-        onChange={(v) => {
+        onChange={handleChangeAddMode}
-          if (!v) {
-            return;
-          }
-          setAdvancedAddMode(v as ManualAddMode);
-          if (v === 'checkpoint') {
-            setIsCheckpoint(true);
-          } else {
-            setIsCheckpoint(false);
-          }
-        }}
       />
       {isCheckpoint ? (
         <AdvancedAddCheckpoint

invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx

@@ -42,9 +42,14 @@ function SearchFolderForm() {
     [dispatch]
   );
 
-  const scanAgainHandler = () => {
+  const scanAgainHandler = useCallback(() => {
     refetchFoundModels();
-  };
+  }, [refetchFoundModels]);
+
+  const handleClickClearCheckpointFolder = useCallback(() => {
+    dispatch(setSearchFolder(null));
+    dispatch(setAdvancedAddScanModel(null));
+  }, [dispatch]);
 
   return (
     <form
@@ -123,10 +128,7 @@ function SearchFolderForm() {
             tooltip={t('modelManager.clearCheckpointFolder')}
             icon={<FaTrash />}
             size="sm"
-            onClick={() => {
+            onClick={handleClickClearCheckpointFolder}
-              dispatch(setSearchFolder(null));
-              dispatch(setAdvancedAddScanModel(null));
-            }}
             isDisabled={!searchFolder}
             colorScheme="red"
           />

invokeai/frontend/web/src/features/modelManager/subpanels/ImportModelsPanel.tsx

@@ -1,6 +1,6 @@
 import { ButtonGroup, Flex } from '@chakra-ui/react';
 import IAIButton from 'common/components/IAIButton';
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import AddModels from './AddModelsPanel/AddModels';
 import ScanModels from './AddModelsPanel/ScanModels';
@@ -11,11 +11,14 @@ export default function ImportModelsPanel() {
   const [addModelTab, setAddModelTab] = useState<AddModelTabs>('add');
   const { t } = useTranslation();
 
+  const handleClickAddTab = useCallback(() => setAddModelTab('add'), []);
+  const handleClickScanTab = useCallback(() => setAddModelTab('scan'), []);
+
   return (
     <Flex flexDirection="column" gap={4}>
       <ButtonGroup isAttached>
         <IAIButton
-          onClick={() => setAddModelTab('add')}
+          onClick={handleClickAddTab}
           isChecked={addModelTab == 'add'}
           size="sm"
           width="100%"
@@ -23,7 +26,7 @@ export default function ImportModelsPanel() {
           {t('modelManager.addModel')}
         </IAIButton>
         <IAIButton
-          onClick={() => setAddModelTab('scan')}
+          onClick={handleClickScanTab}
           isChecked={addModelTab == 'scan'}
           size="sm"
           width="100%"

invokeai/frontend/web/src/features/modelManager/subpanels/MergeModelsPanel.tsx

@@ -9,7 +9,7 @@ import IAISlider from 'common/components/IAISlider';
 import { addToast } from 'features/system/store/systemSlice';
 import { makeToast } from 'features/system/util/makeToast';
 import { pickBy } from 'lodash-es';
-import { useMemo, useState } from 'react';
+import { ChangeEvent, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ALL_BASE_MODELS } from 'services/api/constants';
 import {
@@ -94,13 +94,58 @@ export default function MergeModelsPanel() {
     modelsMap[baseModel as keyof typeof modelsMap]
   ).filter((model) => model !== modelOne && model !== modelTwo);
 
-  const handleBaseModelChange = (v: string) => {
+  const handleBaseModelChange = useCallback((v: string) => {
     setBaseModel(v as BaseModelType);
     setModelOne(null);
     setModelTwo(null);
-  };
+  }, []);
 
-  const mergeModelsHandler = () => {
+  const handleChangeModelOne = useCallback((v: string) => {
+    setModelOne(v);
+  }, []);
+  const handleChangeModelTwo = useCallback((v: string) => {
+    setModelTwo(v);
+  }, []);
+  const handleChangeModelThree = useCallback((v: string) => {
+    if (!v) {
+      setModelThree(null);
+      setModelMergeInterp('add_difference');
+    } else {
+      setModelThree(v);
+      setModelMergeInterp('weighted_sum');
+    }
+  }, []);
+  const handleChangeMergedModelName = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => setMergedModelName(e.target.value),
+    []
+  );
+  const handleChangeModelMergeAlpha = useCallback(
+    (v: number) => setModelMergeAlpha(v),
+    []
+  );
+  const handleResetModelMergeAlpha = useCallback(
+    () => setModelMergeAlpha(0.5),
+    []
+  );
+  const handleChangeMergeInterp = useCallback(
+    (v: MergeInterpolationMethods) => setModelMergeInterp(v),
+    []
+  );
+  const handleChangeMergeSaveLocType = useCallback(
+    (v: 'root' | 'custom') => setModelMergeSaveLocType(v),
+    []
+  );
+  const handleChangeMergeCustomSaveLoc = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) =>
+      setModelMergeCustomSaveLoc(e.target.value),
+    []
+  );
+  const handleChangeModelMergeForce = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => setModelMergeForce(e.target.checked),
+    []
+  );
+
+  const mergeModelsHandler = useCallback(() => {
     const models_names: string[] = [];
 
     let modelsToMerge: (string | null)[] = [modelOne, modelTwo, modelThree];
@@ -150,7 +195,21 @@ export default function MergeModelsPanel() {
           );
         }
       });
-  };
+  }, [
+    baseModel,
+    dispatch,
+    mergeModels,
+    mergedModelName,
+    modelMergeAlpha,
+    modelMergeCustomSaveLoc,
+    modelMergeForce,
+    modelMergeInterp,
+    modelMergeSaveLocType,
+    modelOne,
+    modelThree,
+    modelTwo,
+    t,
+  ]);
 
   return (
     <Flex flexDirection="column" rowGap={4}>
@@ -180,7 +239,7 @@ export default function MergeModelsPanel() {
           value={modelOne}
           placeholder={t('modelManager.selectModel')}
           data={modelOneList}
-          onChange={(v) => setModelOne(v)}
+          onChange={handleChangeModelOne}
         />
         <IAIMantineSearchableSelect
           label={t('modelManager.modelTwo')}
@@ -188,7 +247,7 @@ export default function MergeModelsPanel() {
           placeholder={t('modelManager.selectModel')}
           value={modelTwo}
           data={modelTwoList}
-          onChange={(v) => setModelTwo(v)}
+          onChange={handleChangeModelTwo}
         />
         <IAIMantineSearchableSelect
           label={t('modelManager.modelThree')}
@@ -196,22 +255,14 @@ export default function MergeModelsPanel() {
           w="100%"
           placeholder={t('modelManager.selectModel')}
           clearable
-          onChange={(v) => {
+          onChange={handleChangeModelThree}
-            if (!v) {
-              setModelThree(null);
-              setModelMergeInterp('add_difference');
-            } else {
-              setModelThree(v);
-              setModelMergeInterp('weighted_sum');
-            }
-          }}
         />
       </Flex>
 
       <IAIInput
         label={t('modelManager.mergedModelName')}
         value={mergedModelName}
-        onChange={(e) => setMergedModelName(e.target.value)}
+        onChange={handleChangeMergedModelName}
       />
 
       <Flex
@@ -232,10 +283,10 @@ export default function MergeModelsPanel() {
           max={0.99}
           step={0.01}
           value={modelMergeAlpha}
-          onChange={(v) => setModelMergeAlpha(v)}
+          onChange={handleChangeModelMergeAlpha}
           withInput
           withReset
-          handleReset={() => setModelMergeAlpha(0.5)}
+          handleReset={handleResetModelMergeAlpha}
           withSliderMarks
         />
         <Text variant="subtext" fontSize="sm">
@@ -257,10 +308,7 @@ export default function MergeModelsPanel() {
         <Text fontWeight={500} fontSize="sm" variant="subtext">
           {t('modelManager.interpolationType')}
         </Text>
-        <RadioGroup
+        <RadioGroup value={modelMergeInterp} onChange={handleChangeMergeInterp}>
-          value={modelMergeInterp}
-          onChange={(v: MergeInterpolationMethods) => setModelMergeInterp(v)}
-        >
           <Flex columnGap={4}>
             {modelThree === null ? (
               <>
@@ -305,7 +353,7 @@ export default function MergeModelsPanel() {
           </Text>
           <RadioGroup
             value={modelMergeSaveLocType}
-            onChange={(v: 'root' | 'custom') => setModelMergeSaveLocType(v)}
+            onChange={handleChangeMergeSaveLocType}
           >
             <Flex columnGap={4}>
               <Radio value="root">
@@ -323,7 +371,7 @@ export default function MergeModelsPanel() {
           <IAIInput
             label={t('modelManager.mergedModelCustomSaveLocation')}
             value={modelMergeCustomSaveLoc}
-            onChange={(e) => setModelMergeCustomSaveLoc(e.target.value)}
+            onChange={handleChangeMergeCustomSaveLoc}
           />
         )}
       </Flex>
@@ -331,7 +379,7 @@ export default function MergeModelsPanel() {
       <IAISimpleCheckbox
         label={t('modelManager.ignoreMismatch')}
         isChecked={modelMergeForce}
-        onChange={(e) => setModelMergeForce(e.target.checked)}
+        onChange={handleChangeModelMergeForce}
         fontWeight="500"
       />
 

invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx

@@ -59,6 +59,11 @@ export default function CheckpointModelEdit(props: CheckpointModelEditProps) {
     },
   });
 
+  const handleChangeUseCustomConfig = useCallback(
+    () => setUseCustomConfig((prev) => !prev),
+    []
+  );
+
   const editModelFormSubmitHandler = useCallback(
     (values: CheckpointModelConfig) => {
       const responseBody = {
@@ -181,7 +186,7 @@ export default function CheckpointModelEdit(props: CheckpointModelEditProps) {
               )}
               <IAISimpleCheckbox
                 isChecked={useCustomConfig}
-                onChange={() => setUseCustomConfig(!useCustomConfig)}
+                onChange={handleChangeUseCustomConfig}
                 label="Use Custom Config"
               />
             </Flex>

invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelConvert.tsx

@@ -14,7 +14,7 @@ import IAIAlertDialog from 'common/components/IAIAlertDialog';
 import IAIButton from 'common/components/IAIButton';
 import IAIInput from 'common/components/IAIInput';
 import { addToast } from 'features/system/store/systemSlice';
-import { useEffect, useState } from 'react';
+import { ChangeEvent, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useConvertMainModelsMutation } from 'services/api/endpoints/models';
@@ -42,11 +42,21 @@ export default function ModelConvert(props: ModelConvertProps) {
     setSaveLocation('InvokeAIRoot');
   }, [model]);
 
-  const modelConvertCancelHandler = () => {
+  const modelConvertCancelHandler = useCallback(() => {
     setSaveLocation('InvokeAIRoot');
-  };
+  }, []);
 
-  const modelConvertHandler = () => {
+  const handleChangeSaveLocation = useCallback((v: string) => {
+    setSaveLocation(v as SaveLocation);
+  }, []);
+  const handleChangeCustomSaveLocation = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      setCustomSaveLocation(e.target.value);
+    },
+    []
+  );
+
+  const modelConvertHandler = useCallback(() => {
     const queryArg = {
       base_model: model.base_model,
       model_name: model.model_name,
@@ -101,7 +111,15 @@ export default function ModelConvert(props: ModelConvertProps) {
           )
         );
       });
-  };
+  }, [
+    convertModel,
+    customSaveLocation,
+    dispatch,
+    model.base_model,
+    model.model_name,
+    saveLocation,
+    t,
+  ]);
 
   return (
     <IAIAlertDialog
@@ -137,10 +155,7 @@ export default function ModelConvert(props: ModelConvertProps) {
           <Text fontWeight="600">
             {t('modelManager.convertToDiffusersSaveLocation')}
           </Text>
-          <RadioGroup
+          <RadioGroup value={saveLocation} onChange={handleChangeSaveLocation}>
-            value={saveLocation}
-            onChange={(v) => setSaveLocation(v as SaveLocation)}
-          >
             <Flex gap={4}>
               <Radio value="InvokeAIRoot">
                 <Tooltip label="Save converted model in the InvokeAI root folder">
@@ -162,9 +177,7 @@ export default function ModelConvert(props: ModelConvertProps) {
             </Text>
             <IAIInput
               value={customSaveLocation}
-              onChange={(e) => {
+              onChange={handleChangeCustomSaveLocation}
-                setCustomSaveLocation(e.target.value);
-              }}
               width="full"
             />
           </Flex>

invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelList.tsx

@@ -100,7 +100,7 @@ const ModelList = (props: ModelListProps) => {
       <Flex flexDirection="column" gap={4} paddingInlineEnd={4}>
         <ButtonGroup isAttached>
           <IAIButton
-            onClick={() => setModelFormatFilter('all')}
+            onClick={setModelFormatFilter.bind(null, 'all')}
             isChecked={modelFormatFilter === 'all'}
             size="sm"
           >
@@ -108,35 +108,35 @@ const ModelList = (props: ModelListProps) => {
           </IAIButton>
           <IAIButton
             size="sm"
-            onClick={() => setModelFormatFilter('diffusers')}
+            onClick={setModelFormatFilter.bind(null, 'diffusers')}
             isChecked={modelFormatFilter === 'diffusers'}
           >
             {t('modelManager.diffusersModels')}
           </IAIButton>
           <IAIButton
             size="sm"
-            onClick={() => setModelFormatFilter('checkpoint')}
+            onClick={setModelFormatFilter.bind(null, 'checkpoint')}
             isChecked={modelFormatFilter === 'checkpoint'}
           >
             {t('modelManager.checkpointModels')}
           </IAIButton>
           <IAIButton
             size="sm"
-            onClick={() => setModelFormatFilter('onnx')}
+            onClick={setModelFormatFilter.bind(null, 'onnx')}
             isChecked={modelFormatFilter === 'onnx'}
           >
             {t('modelManager.onnxModels')}
           </IAIButton>
           <IAIButton
             size="sm"
-            onClick={() => setModelFormatFilter('olive')}
+            onClick={setModelFormatFilter.bind(null, 'olive')}
             isChecked={modelFormatFilter === 'olive'}
           >
             {t('modelManager.oliveModels')}
           </IAIButton>
           <IAIButton
             size="sm"
-            onClick={() => setModelFormatFilter('lora')}
+            onClick={setModelFormatFilter.bind(null, 'lora')}
             isChecked={modelFormatFilter === 'lora'}
           >
             {t('modelManager.loraModels')}

invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModelsButton.tsx

@@ -4,6 +4,7 @@ import IAIButton from 'common/components/IAIButton';
 import IAIIconButton from 'common/components/IAIIconButton';
 import { addToast } from 'features/system/store/systemSlice';
 import { makeToast } from 'features/system/util/makeToast';
+import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaSync } from 'react-icons/fa';
 import { useSyncModelsMutation } from 'services/api/endpoints/models';
@@ -19,7 +20,7 @@ export default function SyncModelsButton(props: SyncModelsButtonProps) {
 
   const [syncModels, { isLoading }] = useSyncModelsMutation();
 
-  const syncModelsHandler = () => {
+  const syncModelsHandler = useCallback(() => {
     syncModels()
       .unwrap()
       .then((_) => {
@@ -44,7 +45,7 @@ export default function SyncModelsButton(props: SyncModelsButtonProps) {
           );
         }
       });
-  };
+  }, [dispatch, syncModels, t]);
 
   return !iconMode ? (
     <IAIButton

invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx

@@ -1,4 +1,4 @@
-import { useState, PropsWithChildren, memo } from 'react';
+import { useState, PropsWithChildren, memo, useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import { createSelector } from '@reduxjs/toolkit';
 import { Flex, Image, Text } from '@chakra-ui/react';
@@ -59,13 +59,13 @@ export default memo(CurrentImageNode);
 const Wrapper = (props: PropsWithChildren<{ nodeProps: NodeProps }>) => {
   const [isHovering, setIsHovering] = useState(false);
 
-  const handleMouseEnter = () => {
+  const handleMouseEnter = useCallback(() => {
     setIsHovering(true);
-  };
+  }, []);
 
-  const handleMouseLeave = () => {
+  const handleMouseLeave = useCallback(() => {
     setIsHovering(false);
-  };
+  }, []);
 
   return (
     <NodeWrapper

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldContextMenu.tsx

@@ -104,17 +104,8 @@ const FieldContextMenu = ({ nodeId, fieldName, kind, children }: Props) => {
     nodeId,
   ]);
 
-  return (
+  const renderMenuFunc = useCallback(
-    <IAIContextMenu<HTMLDivElement>
+    () =>
-      menuProps={{
-        size: 'sm',
-        isLazy: true,
-      }}
-      menuButtonProps={{
-        bg: 'transparent',
-        _hover: { bg: 'transparent' },
-      }}
-      renderMenu={() =>
       !menuItems.length ? null : (
         <MenuList
           sx={{ visibility: 'visible !important' }}
@@ -127,8 +118,21 @@ const FieldContextMenu = ({ nodeId, fieldName, kind, children }: Props) => {
             {menuItems}
           </MenuGroup>
         </MenuList>
-        )
+      ),
-      }
+    [fieldTemplateTitle, label, menuItems, skipEvent, t]
+  );
+
+  return (
+    <IAIContextMenu<HTMLDivElement>
+      menuProps={{
+        size: 'sm',
+        isLazy: true,
+      }}
+      menuButtonProps={{
+        bg: 'transparent',
+        _hover: { bg: 'transparent' },
+      }}
+      renderMenu={renderMenuFunc}
     >
       {children}
     </IAIContextMenu>

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ClipInputField.tsx

@@ -1,14 +0,0 @@
-import {
-  ClipInputFieldTemplate,
-  ClipInputFieldValue,
-  FieldComponentProps,
-} from 'features/nodes/types/types';
-import { memo } from 'react';
-
-const ClipInputFieldComponent = (
-  _props: FieldComponentProps<ClipInputFieldValue, ClipInputFieldTemplate>
-) => {
-  return null;
-};
-
-export default memo(ClipInputFieldComponent);

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/CollectionInputField.tsx

@@ -1,17 +0,0 @@
-import {
-  CollectionInputFieldTemplate,
-  CollectionInputFieldValue,
-  FieldComponentProps,
-} from 'features/nodes/types/types';
-import { memo } from 'react';
-
-const CollectionInputFieldComponent = (
-  _props: FieldComponentProps<
-    CollectionInputFieldValue,
-    CollectionInputFieldTemplate
-  >
-) => {
-  return null;
-};
-
-export default memo(CollectionInputFieldComponent);

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/CollectionItemInputField.tsx

@@ -1,17 +0,0 @@
-import {
-  CollectionItemInputFieldTemplate,
-  CollectionItemInputFieldValue,
-  FieldComponentProps,
-} from 'features/nodes/types/types';
-import { memo } from 'react';
-
-const CollectionItemInputFieldComponent = (
-  _props: FieldComponentProps<
-    CollectionItemInputFieldValue,
-    CollectionItemInputFieldTemplate
-  >
-) => {
-  return null;
-};
-
-export default memo(CollectionItemInputFieldComponent);

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ConditioningInputField.tsx

@@ -1,17 +0,0 @@
-import {
-  ConditioningInputFieldTemplate,
-  ConditioningInputFieldValue,
-  FieldComponentProps,
-} from 'features/nodes/types/types';
-import { memo } from 'react';
-
-const ConditioningInputFieldComponent = (
-  _props: FieldComponentProps<
-    ConditioningInputFieldValue,
-    ConditioningInputFieldTemplate
-  >
-) => {
-  return null;
-};
-
-export default memo(ConditioningInputFieldComponent);

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ControlInputField.tsx

@@ -1,19 +0,0 @@
-import {
-  ControlInputFieldTemplate,
-  ControlInputFieldValue,
-  ControlPolymorphicInputFieldTemplate,
-  ControlPolymorphicInputFieldValue,
-  FieldComponentProps,
-} from 'features/nodes/types/types';
-import { memo } from 'react';
-
-const ControlInputFieldComponent = (
-  _props: FieldComponentProps<
-    ControlInputFieldValue | ControlPolymorphicInputFieldValue,
-    ControlInputFieldTemplate | ControlPolymorphicInputFieldTemplate
-  >
-) => {
-  return null;
-};
-
-export default memo(ControlInputFieldComponent);

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/DenoiseMaskInputField.tsx

@@ -1,17 +0,0 @@
-import {
-  DenoiseMaskInputFieldTemplate,
-  DenoiseMaskInputFieldValue,
-  FieldComponentProps,
-} from 'features/nodes/types/types';
-import { memo } from 'react';
-
-const DenoiseMaskInputFieldComponent = (
-  _props: FieldComponentProps<
-    DenoiseMaskInputFieldValue,
-    DenoiseMaskInputFieldTemplate
-  >
-) => {
-  return null;
-};
-
-export default memo(DenoiseMaskInputFieldComponent);

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/IPAdapterInputField.tsx

@@ -1,19 +0,0 @@
-import {
-  IPAdapterInputFieldTemplate,
-  IPAdapterInputFieldValue,
-  FieldComponentProps,
-  IPAdapterPolymorphicInputFieldValue,
-  IPAdapterPolymorphicInputFieldTemplate,
-} from 'features/nodes/types/types';
-import { memo } from 'react';
-
-const IPAdapterInputFieldComponent = (
-  _props: FieldComponentProps<
-    IPAdapterInputFieldValue | IPAdapterPolymorphicInputFieldValue,
-    IPAdapterInputFieldTemplate | IPAdapterPolymorphicInputFieldTemplate
-  >
-) => {
-  return null;
-};
-
-export default memo(IPAdapterInputFieldComponent);

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageCollectionInputField.tsx

@@ -1,94 +0,0 @@
-import {
-  ImageCollectionInputFieldTemplate,
-  ImageCollectionInputFieldValue,
-  FieldComponentProps,
-} from 'features/nodes/types/types';
-import { memo } from 'react';
-
-import { Flex } from '@chakra-ui/react';
-import IAIDndImage from 'common/components/IAIDndImage';
-import IAIDropOverlay from 'common/components/IAIDropOverlay';
-import { useDroppableTypesafe } from 'features/dnd/hooks/typesafeHooks';
-import { NodesMultiImageDropData } from 'features/dnd/types';
-import { isValidDrop } from 'features/dnd/util/isValidDrop';
-import { useGetImageDTOQuery } from 'services/api/endpoints/images';
-
-const ImageCollectionInputFieldComponent = (
-  props: FieldComponentProps<
-    ImageCollectionInputFieldValue,
-    ImageCollectionInputFieldTemplate
-  >
-) => {
-  const { nodeId, field } = props;
-
-  // const dispatch = useAppDispatch();
-
-  // const handleDrop = useCallback(
-  //   ({ image_name }: ImageDTO) => {
-  //     dispatch(
-  //       fieldValueChanged({
-  //         nodeId,
-  //         fieldName: field.name,
-  //         value: uniqBy([...(field.value ?? []), { image_name }], 'image_name'),
-  //       })
-  //     );
-  //   },
-  //   [dispatch, field.name, field.value, nodeId]
-  // );
-
-  const droppableData: NodesMultiImageDropData = {
-    id: `node-${nodeId}-${field.name}`,
-    actionType: 'SET_MULTI_NODES_IMAGE',
-    context: { nodeId: nodeId, fieldName: field.name },
-  };
-
-  const {
-    isOver,
-    setNodeRef: setDroppableRef,
-    active,
-  } = useDroppableTypesafe({
-    id: `node_${nodeId}`,
-    data: droppableData,
-  });
-
-  // const handleReset = useCallback(() => {
-  //   dispatch(
-  //     fieldValueChanged({
-  //       nodeId,
-  //       fieldName: field.name,
-  //       value: undefined,
-  //     })
-  //   );
-  // }, [dispatch, field.name, nodeId]);
-
-  return (
-    <Flex
-      ref={setDroppableRef}
-      sx={{
-        w: 'full',
-        h: 'full',
-        alignItems: 'center',
-        justifyContent: 'center',
-        position: 'relative',
-        minH: '10rem',
-      }}
-    >
-      {field.value?.map(({ image_name }) => (
-        <ImageSubField key={image_name} imageName={image_name} />
-      ))}
-      {isValidDrop(droppableData, active) && <IAIDropOverlay isOver={isOver} />}
-    </Flex>
-  );
-};
-
-export default memo(ImageCollectionInputFieldComponent);
-
-type ImageSubFieldProps = { imageName: string };
-
-const ImageSubField = (props: ImageSubFieldProps) => {
-  const { currentData: image } = useGetImageDTOQuery(props.imageName);
-
-  return (
-    <IAIDndImage imageDTO={image} isDropDisabled={true} isDragDisabled={true} />
-  );
-};

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/LatentsInputField.tsx

@@ -1,19 +0,0 @@
-import {
-  LatentsInputFieldTemplate,
-  LatentsInputFieldValue,
-  FieldComponentProps,
-  LatentsPolymorphicInputFieldValue,
-  LatentsPolymorphicInputFieldTemplate,
-} from 'features/nodes/types/types';
-import { memo } from 'react';
-
-const LatentsInputFieldComponent = (
-  _props: FieldComponentProps<
-    LatentsInputFieldValue | LatentsPolymorphicInputFieldValue,
-    LatentsInputFieldTemplate | LatentsPolymorphicInputFieldTemplate
-  >
-) => {
-  return null;
-};
-
-export default memo(LatentsInputFieldComponent);

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/LoRAModelInputField.tsx

@@ -80,6 +80,13 @@ const LoRAModelInputFieldComponent = (
     [dispatch, field.name, nodeId]
   );
 
+  const filterFunc = useCallback(
+    (value: string, item: SelectItem) =>
+      item.label?.toLowerCase().includes(value.toLowerCase().trim()) ||
+      item.value.toLowerCase().includes(value.toLowerCase().trim()),
+    []
+  );
+
   if (loraModels?.ids.length === 0) {
     return (
       <Flex sx={{ justifyContent: 'center', p: 2 }}>
@@ -101,10 +108,7 @@ const LoRAModelInputFieldComponent = (
       nothingFound={t('models.noMatchingLoRAs')}
       itemComponent={IAIMantineSelectItemWithTooltip}
       disabled={data.length === 0}
-      filter={(value, item: SelectItem) =>
+      filter={filterFunc}
-        item.label?.toLowerCase().includes(value.toLowerCase().trim()) ||
-        item.value.toLowerCase().includes(value.toLowerCase().trim())
-      }
       error={!selectedLoRAModel}
       onChange={handleChange}
       sx={{

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/MainModelInputField.tsx

@@ -11,7 +11,7 @@ import {
 import { MODEL_TYPE_MAP } from 'features/parameters/types/constants';
 import { modelIdToMainModelParam } from 'features/parameters/util/modelIdToMainModelParam';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
-import SyncModelsButton from 'features/ui/components/tabs/ModelManager/subpanels/ModelManagerSettingsPanel/SyncModelsButton';
+import SyncModelsButton from 'features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModelsButton';
 import { forEach } from 'lodash-es';
 import { memo, useCallback, useMemo } from 'react';
 import { NON_SDXL_MAIN_MODELS } from 'services/api/constants';

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/NumberInputField.tsx

@@ -19,7 +19,7 @@ import {
   IntegerPolymorphicInputFieldTemplate,
   IntegerPolymorphicInputFieldValue,
 } from 'features/nodes/types/types';
-import { memo, useEffect, useMemo, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 
 const NumberInputFieldComponent = (
   props: FieldComponentProps<
@@ -43,7 +43,8 @@ const NumberInputFieldComponent = (
     [fieldTemplate.type]
   );
 
-  const handleValueChanged = (v: string) => {
+  const handleValueChanged = useCallback(
+    (v: string) => {
       setValueAsString(v);
       // This allows negatives and decimals e.g. '-123', `.5`, `-0.2`, etc.
       if (!v.match(numberStringRegex)) {
@@ -56,7 +57,9 @@ const NumberInputFieldComponent = (
           })
         );
       }
-  };
+    },
+    [dispatch, field.name, isIntegerField, nodeId]
+  );
 
   useEffect(() => {
     if (

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/RefinerModelInputField.tsx

@@ -11,7 +11,7 @@ import {
 import { MODEL_TYPE_MAP } from 'features/parameters/types/constants';
 import { modelIdToMainModelParam } from 'features/parameters/util/modelIdToMainModelParam';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
-import SyncModelsButton from 'features/ui/components/tabs/ModelManager/subpanels/ModelManagerSettingsPanel/SyncModelsButton';
+import SyncModelsButton from 'features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModelsButton';
 import { forEach } from 'lodash-es';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/SDXLMainModelInputField.tsx

@@ -11,7 +11,7 @@ import {
 import { MODEL_TYPE_MAP } from 'features/parameters/types/constants';
 import { modelIdToMainModelParam } from 'features/parameters/util/modelIdToMainModelParam';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
-import SyncModelsButton from 'features/ui/components/tabs/ModelManager/subpanels/ModelManagerSettingsPanel/SyncModelsButton';
+import SyncModelsButton from 'features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModelsButton';
 import { forEach } from 'lodash-es';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/T2IAdapterInputField.tsx

@@ -1,19 +0,0 @@
-import {
-  T2IAdapterInputFieldTemplate,
-  T2IAdapterInputFieldValue,
-  T2IAdapterPolymorphicInputFieldTemplate,
-  T2IAdapterPolymorphicInputFieldValue,
-  FieldComponentProps,
-} from 'features/nodes/types/types';
-import { memo } from 'react';
-
-const T2IAdapterInputFieldComponent = (
-  _props: FieldComponentProps<
-    T2IAdapterInputFieldValue | T2IAdapterPolymorphicInputFieldValue,
-    T2IAdapterInputFieldTemplate | T2IAdapterPolymorphicInputFieldTemplate
-  >
-) => {
-  return null;
-};
-
-export default memo(T2IAdapterInputFieldComponent);

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/UnetInputField.tsx

@@ -1,14 +0,0 @@
-import {
-  UNetInputFieldTemplate,
-  UNetInputFieldValue,
-  FieldComponentProps,
-} from 'features/nodes/types/types';
-import { memo } from 'react';
-
-const UNetInputFieldComponent = (
-  _props: FieldComponentProps<UNetInputFieldValue, UNetInputFieldTemplate>
-) => {
-  return null;
-};
-
-export default memo(UNetInputFieldComponent);

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/VaeInputField.tsx

@@ -1,14 +0,0 @@
-import {
-  VaeInputFieldTemplate,
-  VaeInputFieldValue,
-  FieldComponentProps,
-} from 'features/nodes/types/types';
-import { memo } from 'react';
-
-const VaeInputFieldComponent = (
-  _props: FieldComponentProps<VaeInputFieldValue, VaeInputFieldTemplate>
-) => {
-  return null;
-};
-
-export default memo(VaeInputFieldComponent);

invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeResizer.tsx

@@ -1,27 +0,0 @@
-import { NODE_MIN_WIDTH } from 'features/nodes/types/constants';
-import { memo } from 'react';
-import { NodeResizeControl, NodeResizerProps } from 'reactflow';
-
-// this causes https://github.com/invoke-ai/InvokeAI/issues/4140
-// not using it for now
-
-const NodeResizer = (props: NodeResizerProps) => {
-  const { ...rest } = props;
-  return (
-    <NodeResizeControl
-      style={{
-        position: 'absolute',
-        border: 'none',
-        background: 'transparent',
-        width: 15,
-        height: 15,
-        bottom: 0,
-        right: 0,
-      }}
-      minWidth={NODE_MIN_WIDTH}
-      {...rest}
-    ></NodeResizeControl>
-  );
-};
-
-export default memo(NodeResizer);

invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDetailsTab.tsx

@@ -1,78 +0,0 @@
-import { Box, Flex } from '@chakra-ui/react';
-import { createSelector } from '@reduxjs/toolkit';
-import { stateSelector } from 'app/store/store';
-import { useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { IAINoContentFallback } from 'common/components/IAIImageFallback';
-import { InvocationTemplate, NodeData } from 'features/nodes/types/types';
-import { memo } from 'react';
-import NotesTextarea from '../../flow/nodes/Invocation/NotesTextarea';
-import NodeTitle from '../../flow/nodes/common/NodeTitle';
-import ScrollableContent from '../ScrollableContent';
-import { useTranslation } from 'react-i18next';
-
-const selector = createSelector(
-  stateSelector,
-  ({ nodes }) => {
-    const lastSelectedNodeId =
-      nodes.selectedNodes[nodes.selectedNodes.length - 1];
-
-    const lastSelectedNode = nodes.nodes.find(
-      (node) => node.id === lastSelectedNodeId
-    );
-
-    const lastSelectedNodeTemplate = lastSelectedNode
-      ? nodes.nodeTemplates[lastSelectedNode.data.type]
-      : undefined;
-
-    return {
-      data: lastSelectedNode?.data,
-      template: lastSelectedNodeTemplate,
-    };
-  },
-  defaultSelectorOptions
-);
-
-const InspectorDetailsTab = () => {
-  const { data, template } = useAppSelector(selector);
-  const { t } = useTranslation();
-
-  if (!template || !data) {
-    return (
-      <IAINoContentFallback label={t('nodes.noNodeSelected')} icon={null} />
-    );
-  }
-
-  return <Content data={data} template={template} />;
-};
-
-export default memo(InspectorDetailsTab);
-
-const Content = (props: { data: NodeData; template: InvocationTemplate }) => {
-  const { data } = props;
-
-  return (
-    <Box
-      sx={{
-        position: 'relative',
-        w: 'full',
-        h: 'full',
-      }}
-    >
-      <ScrollableContent>
-        <Flex
-          sx={{
-            flexDir: 'column',
-            position: 'relative',
-            p: 1,
-            gap: 2,
-            w: 'full',
-          }}
-        >
-          <NodeTitle nodeId={data.id} />
-          <NotesTextarea nodeId={data.id} />
-        </Flex>
-      </ScrollableContent>
-    </Box>
-  );
-};

invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowNotesTab.tsx

@@ -1,51 +0,0 @@
-import { Box, Text } from '@chakra-ui/react';
-import { createSelector } from '@reduxjs/toolkit';
-import { stateSelector } from 'app/store/store';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import IAITextarea from 'common/components/IAITextarea';
-import { workflowNotesChanged } from 'features/nodes/store/nodesSlice';
-import { ChangeEvent, memo, useCallback } from 'react';
-
-const selector = createSelector(stateSelector, ({ nodes }) => {
-  const { notes } = nodes.workflow;
-
-  return {
-    notes,
-  };
-});
-
-const WorkflowNotesTab = () => {
-  const { notes } = useAppSelector(selector);
-  const dispatch = useAppDispatch();
-
-  const handleChangeNotes = useCallback(
-    (e: ChangeEvent<HTMLTextAreaElement>) => {
-      dispatch(workflowNotesChanged(e.target.value));
-    },
-    [dispatch]
-  );
-
-  return (
-    <Box sx={{ pos: 'relative', h: 'full' }}>
-      <IAITextarea
-        onChange={handleChangeNotes}
-        value={notes}
-        fontSize="sm"
-        sx={{ h: 'full', resize: 'none' }}
-      />
-      <Box sx={{ pos: 'absolute', bottom: 2, right: 2 }}>
-        <Text
-          sx={{
-            fontSize: 'xs',
-            opacity: 0.5,
-            userSelect: 'none',
-          }}
-        >
-          {notes.length}
-        </Text>
-      </Box>
-    </Box>
-  );
-};
-
-export default memo(WorkflowNotesTab);

invokeai/frontend/web/src/features/nodes/store/util/makeTemplateSelector.ts

@@ -1,11 +0,0 @@
-import { createSelector } from '@reduxjs/toolkit';
-import { stateSelector } from 'app/store/store';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { AnyInvocationType } from 'services/events/types';
-
-export const makeTemplateSelector = (type: AnyInvocationType) =>
-  createSelector(
-    stateSelector,
-    ({ nodes }) => nodes.nodeTemplates[type],
-    defaultSelectorOptions
-  );

invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxCollapse.tsx

@@ -1,21 +0,0 @@
-import { Flex } from '@chakra-ui/react';
-import IAICollapse from 'common/components/IAICollapse';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import ParamBoundingBoxHeight from './ParamBoundingBoxHeight';
-import ParamBoundingBoxWidth from './ParamBoundingBoxWidth';
-
-const ParamBoundingBoxCollapse = () => {
-  const { t } = useTranslation();
-
-  return (
-    <IAICollapse label={t('parameters.boundingBoxHeader')}>
-      <Flex sx={{ gap: 2, flexDirection: 'column' }}>
-        <ParamBoundingBoxWidth />
-        <ParamBoundingBoxHeight />
-      </Flex>
-    </IAICollapse>
-  );
-};
-
-export default memo(ParamBoundingBoxCollapse);

invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx

@@ -6,7 +6,7 @@ import IAISlider from 'common/components/IAISlider';
 import { roundToMultiple } from 'common/util/roundDownToMultiple';
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
 import { setBoundingBoxDimensions } from 'features/canvas/store/canvasSlice';
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
 
 import { useTranslation } from 'react-i18next';
 
@@ -36,7 +36,8 @@ const ParamBoundingBoxWidth = () => {
     ? 1024
     : 512;
 
-  const handleChangeHeight = (v: number) => {
+  const handleChangeHeight = useCallback(
+    (v: number) => {
       dispatch(
         setBoundingBoxDimensions({
           ...boundingBoxDimensions,
@@ -52,9 +53,11 @@ const ParamBoundingBoxWidth = () => {
           })
         );
       }
-  };
+    },
+    [aspectRatio, boundingBoxDimensions, dispatch]
+  );
 
-  const handleResetHeight = () => {
+  const handleResetHeight = useCallback(() => {
     dispatch(
       setBoundingBoxDimensions({
         ...boundingBoxDimensions,
@@ -70,7 +73,7 @@ const ParamBoundingBoxWidth = () => {
         })
       );
     }
-  };
+  }, [aspectRatio, boundingBoxDimensions, dispatch, initial]);
 
   return (
     <IAISlider

invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx

@@ -6,7 +6,7 @@ import IAISlider from 'common/components/IAISlider';
 import { roundToMultiple } from 'common/util/roundDownToMultiple';
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
 import { setBoundingBoxDimensions } from 'features/canvas/store/canvasSlice';
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
 
 import { useTranslation } from 'react-i18next';
 
@@ -36,7 +36,8 @@ const ParamBoundingBoxWidth = () => {
 
   const { t } = useTranslation();
 
-  const handleChangeWidth = (v: number) => {
+  const handleChangeWidth = useCallback(
+    (v: number) => {
       dispatch(
         setBoundingBoxDimensions({
           ...boundingBoxDimensions,
@@ -52,9 +53,11 @@ const ParamBoundingBoxWidth = () => {
           })
         );
       }
-  };
+    },
+    [aspectRatio, boundingBoxDimensions, dispatch]
+  );
 
-  const handleResetWidth = () => {
+  const handleResetWidth = useCallback(() => {
     dispatch(
       setBoundingBoxDimensions({
         ...boundingBoxDimensions,
@@ -70,7 +73,7 @@ const ParamBoundingBoxWidth = () => {
         })
       );
     }
-  };
+  }, [aspectRatio, boundingBoxDimensions, dispatch, initial]);
 
   return (
     <IAISlider

invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceMode.tsx

@@ -6,7 +6,7 @@ import IAIMantineSelect from 'common/components/IAIMantineSelect';
 import { setCanvasCoherenceMode } from 'features/parameters/store/generationSlice';
 import { CanvasCoherenceModeParam } from 'features/parameters/types/parameterSchemas';
 
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const coherenceModeSelectData: IAISelectDataType[] = [
@@ -22,13 +22,16 @@ const ParamCanvasCoherenceMode = () => {
   );
   const { t } = useTranslation();
 
-  const handleCoherenceModeChange = (v: string | null) => {
+  const handleCoherenceModeChange = useCallback(
+    (v: string | null) => {
       if (!v) {
         return;
       }
 
       dispatch(setCanvasCoherenceMode(v as CanvasCoherenceModeParam));
-  };
+    },
+    [dispatch]
+  );
 
   return (
     <IAIInformationalPopover feature="compositingCoherenceMode">

invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceSteps.tsx

@@ -3,7 +3,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIInformationalPopover from 'common/components/IAIInformationalPopover/IAIInformationalPopover';
 import IAISlider from 'common/components/IAISlider';
 import { setCanvasCoherenceSteps } from 'features/parameters/store/generationSlice';
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const ParamCanvasCoherenceSteps = () => {
@@ -13,6 +13,17 @@ const ParamCanvasCoherenceSteps = () => {
   );
   const { t } = useTranslation();
 
+  const handleChange = useCallback(
+    (v: number) => {
+      dispatch(setCanvasCoherenceSteps(v));
+    },
+    [dispatch]
+  );
+
+  const handleReset = useCallback(() => {
+    dispatch(setCanvasCoherenceSteps(20));
+  }, [dispatch]);
+
   return (
     <IAIInformationalPopover feature="compositingCoherenceSteps">
       <IAISlider
@@ -22,15 +33,11 @@ const ParamCanvasCoherenceSteps = () => {
         step={1}
         sliderNumberInputProps={{ max: 999 }}
         value={canvasCoherenceSteps}
-        onChange={(v) => {
+        onChange={handleChange}
-          dispatch(setCanvasCoherenceSteps(v));
-        }}
         withInput
         withSliderMarks
         withReset
-        handleReset={() => {
+        handleReset={handleReset}
-          dispatch(setCanvasCoherenceSteps(20));
-        }}
       />
     </IAIInformationalPopover>
   );

invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceStrength.tsx

@@ -3,7 +3,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIInformationalPopover from 'common/components/IAIInformationalPopover/IAIInformationalPopover';
 import IAISlider from 'common/components/IAISlider';
 import { setCanvasCoherenceStrength } from 'features/parameters/store/generationSlice';
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const ParamCanvasCoherenceStrength = () => {
@@ -13,6 +13,16 @@ const ParamCanvasCoherenceStrength = () => {
   );
   const { t } = useTranslation();
 
+  const handleChange = useCallback(
+    (v: number) => {
+      dispatch(setCanvasCoherenceStrength(v));
+    },
+    [dispatch]
+  );
+  const handleReset = useCallback(() => {
+    dispatch(setCanvasCoherenceStrength(0.3));
+  }, [dispatch]);
+
   return (
     <IAIInformationalPopover feature="compositingStrength">
       <IAISlider
@@ -22,15 +32,11 @@ const ParamCanvasCoherenceStrength = () => {
         step={0.01}
         sliderNumberInputProps={{ max: 999 }}
         value={canvasCoherenceStrength}
-        onChange={(v) => {
+        onChange={handleChange}
-          dispatch(setCanvasCoherenceStrength(v));
-        }}
         withInput
         withSliderMarks
         withReset
-        handleReset={() => {
+        handleReset={handleReset}
-          dispatch(setCanvasCoherenceStrength(0.3));
-        }}
       />
     </IAIInformationalPopover>
   );