Code Split Inpaint Options

Isolate features to their own components so they dont re-render the other stuff each time.

frontend/src/features/options/AdvancedOptions/Inpainting/ClearBrushHistory.tsx

@@ -0,0 +1,56 @@
+import { useToast } from '@chakra-ui/react';
+import { createSelector } from '@reduxjs/toolkit';
+import React from 'react';
+import {
+  RootState,
+  useAppDispatch,
+  useAppSelector,
+} from '../../../../app/store';
+import IAIButton from '../../../../common/components/IAIButton';
+import {
+  InpaintingState,
+  setClearBrushHistory,
+} from '../../../tabs/Inpainting/inpaintingSlice';
+import _ from 'lodash';
+
+const clearBrushHistorySelector = createSelector(
+  (state: RootState) => state.inpainting,
+  (inpainting: InpaintingState) => {
+    const { pastLines, futureLines } = inpainting;
+    return {
+      pastLines,
+      futureLines,
+    };
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: _.isEqual,
+    },
+  }
+);
+
+export default function ClearBrushHistory() {
+  const dispatch = useAppDispatch();
+  const toast = useToast();
+
+  const { pastLines, futureLines } = useAppSelector(clearBrushHistorySelector);
+
+  const handleClearBrushHistory = () => {
+    dispatch(setClearBrushHistory());
+    toast({
+      title: 'Brush Stroke History Cleared',
+      status: 'success',
+      duration: 2500,
+      isClosable: true,
+    });
+  };
+  return (
+    <IAIButton
+      label="Clear Brush History"
+      onClick={handleClearBrushHistory}
+      tooltip="Clears brush stroke history"
+      disabled={futureLines.length > 0 || pastLines.length > 0 ? false : true}
+      styleClass="inpainting-options-btn"
+    />
+  );
+}

frontend/src/features/options/AdvancedOptions/Inpainting/InpaintReplace.tsx

@@ -0,0 +1,70 @@
+import React, { ChangeEvent } from 'react';
+import {
+  RootState,
+  useAppDispatch,
+  useAppSelector,
+} from '../../../../app/store';
+import IAINumberInput from '../../../../common/components/IAINumberInput';
+import _ from 'lodash';
+import { createSelector } from '@reduxjs/toolkit';
+import {
+  InpaintingState,
+  setInpaintReplace,
+  setShouldUseInpaintReplace,
+} from '../../../tabs/Inpainting/inpaintingSlice';
+import IAISwitch from '../../../../common/components/IAISwitch';
+
+const inpaintReplaceSelector = createSelector(
+  (state: RootState) => state.inpainting,
+  (inpainting: InpaintingState) => {
+    const { inpaintReplace, shouldUseInpaintReplace } = inpainting;
+    return {
+      inpaintReplace,
+      shouldUseInpaintReplace,
+    };
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: _.isEqual,
+    },
+  }
+);
+
+export default function InpaintReplace() {
+  const { inpaintReplace, shouldUseInpaintReplace } = useAppSelector(
+    inpaintReplaceSelector
+  );
+
+  const dispatch = useAppDispatch();
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        padding: '0 1rem 0 0.2rem',
+      }}
+    >
+      <IAINumberInput
+        label="Inpaint Replace"
+        value={inpaintReplace}
+        min={0}
+        max={1.0}
+        step={0.05}
+        width={'auto'}
+        formControlProps={{ style: { paddingRight: '1rem' } }}
+        isInteger={false}
+        isDisabled={!shouldUseInpaintReplace}
+        onChange={(v: number) => {
+          dispatch(setInpaintReplace(v));
+        }}
+      />
+      <IAISwitch
+        isChecked={shouldUseInpaintReplace}
+        onChange={(e: ChangeEvent<HTMLInputElement>) =>
+          dispatch(setShouldUseInpaintReplace(e.target.checked))
+        }
+      />
+    </div>
+  );
+}

frontend/src/features/options/AdvancedOptions/Inpainting/InpaintingSettings.tsx

@@ -1,96 +1,13 @@
-import { useToast } from '@chakra-ui/react';
-import { createSelector } from '@reduxjs/toolkit';
-import React, { ChangeEvent } from 'react';
-import {
-  RootState,
-  useAppDispatch,
-  useAppSelector,
-} from '../../../../app/store';
-import IAIButton from '../../../../common/components/IAIButton';
-import {
-  InpaintingState,
-  setClearBrushHistory,
-  setInpaintReplace,
-  setShouldUseInpaintReplace,
-} from '../../../tabs/Inpainting/inpaintingSlice';
 import BoundingBoxSettings from './BoundingBoxSettings';
-import _ from 'lodash';
+import InpaintReplace from './InpaintReplace';
-import IAINumberInput from '../../../../common/components/IAINumberInput';
+import ClearBrushHistory from './ClearBrushHistory';
-import IAISwitch from '../../../../common/components/IAISwitch';
-
-const inpaintingSelector = createSelector(
-  (state: RootState) => state.inpainting,
-  (inpainting: InpaintingState) => {
-    const { pastLines, futureLines, inpaintReplace, shouldUseInpaintReplace } =
-      inpainting;
-    return {
-      pastLines,
-      futureLines,
-      inpaintReplace,
-      shouldUseInpaintReplace,
-    };
-  },
-  {
-    memoizeOptions: {
-      resultEqualityCheck: _.isEqual,
-    },
-  }
-);
 
 export default function InpaintingSettings() {
-  const dispatch = useAppDispatch();
-  const toast = useToast();
-
-  const { pastLines, futureLines, inpaintReplace, shouldUseInpaintReplace } =
-    useAppSelector(inpaintingSelector);
-
-  const handleClearBrushHistory = () => {
-    dispatch(setClearBrushHistory());
-    toast({
-      title: 'Brush Stroke History Cleared',
-      status: 'success',
-      duration: 2500,
-      isClosable: true,
-    });
-  };
   return (
     <>
-      <div
+      <InpaintReplace />
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          padding: '0 1rem 0 0.2rem',
-        }}
-      >
-        <IAINumberInput
-          label="Inpaint Replace"
-          value={inpaintReplace}
-          min={0}
-          max={1.0}
-          step={0.05}
-          width={'auto'}
-          formControlProps={{ style: { paddingRight: '1rem' } }}
-          isInteger={false}
-          isDisabled={!shouldUseInpaintReplace}
-          onChange={(v: number) => {
-            dispatch(setInpaintReplace(v));
-          }}
-        />
-        <IAISwitch
-          isChecked={shouldUseInpaintReplace}
-          onChange={(e: ChangeEvent<HTMLInputElement>) =>
-            dispatch(setShouldUseInpaintReplace(e.target.checked))
-          }
-        />
-      </div>
       <BoundingBoxSettings />
-      <IAIButton
+      <ClearBrushHistory />
-        label="Clear Brush History"
-        onClick={handleClearBrushHistory}
-        tooltip="Clears brush stroke history"
-        disabled={futureLines.length > 0 || pastLines.length > 0 ? false : true}
-        styleClass="inpainting-options-btn"
-      />
     </>
   );
 }