refactor(ui): update components & logic to use new unified slice (again)

invokeai/frontend/web/src/features/queue/components/QueueIterationsNumberInput.tsx

@@ -1,7 +1,7 @@
 import { CompositeNumberInput } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
-import { setIterations } from 'features/canvas/store/canvasSlice';
+import { setIterations } from 'features/controlLayers/store/canvasV2Slice';
 import { memo, useCallback } from 'react';
 
 export const QueueIterationsNumberInput = memo(() => {

invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerCFGScale.tsx

@@ -1,7 +1,7 @@
 import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
-import { setRefinerCFGScale } from 'features/sdxl/store/sdxlSlice';
+import { setRefinerCFGScale } from 'features/controlLayers/store/canvasV2Slice';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 

invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect.tsx

@@ -1,22 +1,19 @@
 import { Box, Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { useModelCombobox } from 'common/hooks/useModelCombobox';
+import { refinerModelChanged } from 'features/controlLayers/store/canvasV2Slice';
 import { zModelIdentifierField } from 'features/nodes/types/common';
-import { refinerModelChanged, selectSdxlSlice } from 'features/sdxl/store/sdxlSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useRefinerModels } from 'services/api/hooks/modelsByType';
 import type { MainModelConfig } from 'services/api/types';
 
-const selectModel = createMemoizedSelector(selectSdxlSlice, (sdxl) => sdxl.refinerModel);
-
 const optionsFilter = (model: MainModelConfig) => model.base === 'sdxl-refiner';
 
 const ParamSDXLRefinerModelSelect = () => {
   const dispatch = useAppDispatch();
-  const model = useAppSelector(selectModel);
+  const model = useAppSelector((s) => s.canvasV2.params.refinerModel);
   const { t } = useTranslation();
   const [modelConfigs, { isLoading }] = useRefinerModels();
   const _onChange = useCallback(

invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerNegativeAestheticScore.tsx

@@ -1,7 +1,7 @@
 import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
-import { setRefinerNegativeAestheticScore } from 'features/sdxl/store/sdxlSlice';
+import { setRefinerNegativeAestheticScore } from 'features/controlLayers/store/canvasV2Slice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 

invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerPositiveAestheticScore.tsx

@@ -1,7 +1,7 @@
 import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
-import { setRefinerPositiveAestheticScore } from 'features/sdxl/store/sdxlSlice';
+import { setRefinerPositiveAestheticScore } from 'features/controlLayers/store/canvasV2Slice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 

invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerScheduler.tsx

@@ -2,9 +2,9 @@ import type { ComboboxOnChange } from '@invoke-ai/ui-library';
 import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
+import { setRefinerScheduler } from 'features/controlLayers/store/canvasV2Slice';
 import { SCHEDULER_OPTIONS } from 'features/parameters/types/constants';
 import { isParameterScheduler } from 'features/parameters/types/parameterSchemas';
-import { setRefinerScheduler } from 'features/sdxl/store/sdxlSlice';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 

invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerStart.tsx

@@ -1,7 +1,7 @@
 import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
-import { setRefinerStart } from 'features/sdxl/store/sdxlSlice';
+import { setRefinerStart } from 'features/controlLayers/store/canvasV2Slice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 

invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerSteps.tsx

@@ -1,7 +1,7 @@
 import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
-import { setRefinerSteps } from 'features/sdxl/store/sdxlSlice';
+import { setRefinerSteps } from 'features/controlLayers/store/canvasV2Slice';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 

invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx

@@ -3,6 +3,7 @@ import { Flex, FormControlGroup, StandaloneAccordion } from '@invoke-ai/ui-libra
 import { skipToken } from '@reduxjs/toolkit/query';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
+import { selectCanvasV2Slice } from 'features/controlLayers/store/canvasV2Slice';
 import ParamCFGRescaleMultiplier from 'features/parameters/components/Advanced/ParamCFGRescaleMultiplier';
 import ParamClipSkip from 'features/parameters/components/Advanced/ParamClipSkip';
 import ParamSeamlessXAxis from 'features/parameters/components/Seamless/ParamSeamlessXAxis';
@@ -12,7 +13,6 @@ import { ParamSeedRandomize } from 'features/parameters/components/Seed/ParamSee
 import { ParamSeedShuffle } from 'features/parameters/components/Seed/ParamSeedShuffle';
 import ParamVAEModelSelect from 'features/parameters/components/VAEModel/ParamVAEModelSelect';
 import ParamVAEPrecision from 'features/parameters/components/VAEModel/ParamVAEPrecision';
-import { selectGenerationSlice } from 'features/canvas/store/canvasSlice';
 import { useStandaloneAccordionToggle } from 'features/settingsAccordions/hooks/useStandaloneAccordionToggle';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { memo, useMemo } from 'react';
@@ -34,24 +34,24 @@ export const AdvancedSettingsAccordion = memo(() => {
 
   const selectBadges = useMemo(
     () =>
-      createMemoizedSelector(selectGenerationSlice, (generation) => {
+      createMemoizedSelector(selectCanvasV2Slice, ({ params }) => {
         const badges: (string | number)[] = [];
         if (vaeConfig) {
           let vaeBadge = vaeConfig.name;
-          if (generation.vaePrecision === 'fp16') {
+          if (params.vaePrecision === 'fp16') {
-            vaeBadge += ` ${generation.vaePrecision}`;
+            vaeBadge += ` ${params.vaePrecision}`;
           }
           badges.push(vaeBadge);
-        } else if (generation.vaePrecision === 'fp16') {
+        } else if (params.vaePrecision === 'fp16') {
-          badges.push(`VAE ${generation.vaePrecision}`);
+          badges.push(`VAE ${params.vaePrecision}`);
         }
-        if (generation.clipSkip) {
+        if (params.clipSkip) {
-          badges.push(`Skip ${generation.clipSkip}`);
+          badges.push(`Skip ${params.clipSkip}`);
         }
-        if (generation.cfgRescaleMultiplier) {
+        if (params.cfgRescaleMultiplier) {
-          badges.push(`Rescale ${generation.cfgRescaleMultiplier}`);
+          badges.push(`Rescale ${params.cfgRescaleMultiplier}`);
         }
-        if (generation.seamlessXAxis || generation.seamlessYAxis) {
+        if (params.seamlessXAxis || params.seamlessYAxis) {
           badges.push('seamless');
         }
         if (activeTabName === 'upscaling' && !generation.shouldRandomizeSeed) {

invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion.tsx

@@ -12,41 +12,36 @@ import ParamImageToImageStrength from 'features/parameters/components/Canvas/Par
 import { ParamSeedNumberInput } from 'features/parameters/components/Seed/ParamSeedNumberInput';
 import { ParamSeedRandomize } from 'features/parameters/components/Seed/ParamSeedRandomize';
 import { ParamSeedShuffle } from 'features/parameters/components/Seed/ParamSeedShuffle';
-import { selectGenerationSlice } from 'features/canvas/store/canvasSlice';
 import { useExpanderToggle } from 'features/settingsAccordions/hooks/useExpanderToggle';
 import { useStandaloneAccordionToggle } from 'features/settingsAccordions/hooks/useStandaloneAccordionToggle';
-import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { ImageSizeLinear } from './ImageSizeLinear';
 
-const selector = createMemoizedSelector(
+const selector = createMemoizedSelector([selectHrfSlice, selectCanvasV2Slice], (hrf, canvasV2) => {
-  [selectGenerationSlice, selectHrfSlice, selectCanvasV2Slice, activeTabNameSelector],
+  const { shouldRandomizeSeed, model } = canvasV2.params;
-  (generation, hrf, canvasV2, activeTabName) => {
+  const { hrfEnabled } = hrf;
-    const { shouldRandomizeSeed, model } = generation;
+  const badges: string[] = [];
-    const { hrfEnabled } = hrf;
+  const isSDXL = model?.base === 'sdxl';
-    const badges: string[] = [];
-    const isSDXL = model?.base === 'sdxl';
 
-    const { aspectRatio, width, height } = canvasV2.document;
+  const { aspectRatio, width, height } = canvasV2.document;
-    badges.push(`${width}×${height}`);
+  badges.push(`${width}×${height}`);
-    badges.push(aspectRatio.id);
+  badges.push(aspectRatio.id);
 
-    if (aspectRatio.isLocked) {
+  if (aspectRatio.isLocked) {
-      badges.push('locked');
+    badges.push('locked');
-    }
-
-    if (!shouldRandomizeSeed) {
-      badges.push('Manual Seed');
-    }
-
-    if (hrfEnabled && !isSDXL) {
-      badges.push('HiRes Fix');
-    }
-    return { badges, activeTabName, isSDXL };
   }
-);
+
+  if (!shouldRandomizeSeed) {
+    badges.push('Manual Seed');
+  }
+
+  if (hrfEnabled && !isSDXL) {
+    badges.push('HiRes Fix');
+  }
+  return { badges, isSDXL };
+});
 
 const scalingLabelProps: FormLabelProps = {
   minW: '4.5rem',
@@ -54,7 +49,7 @@ const scalingLabelProps: FormLabelProps = {
 
 export const ImageSettingsAccordion = memo(() => {
   const { t } = useTranslation();
-  const { badges, activeTabName, isSDXL } = useAppSelector(selector);
+  const { badges, isSDXL } = useAppSelector(selector);
   const { isOpen: isOpenAccordion, onToggle: onToggleAccordion } = useStandaloneAccordionToggle({
     id: 'image-settings',
     defaultIsOpen: true,
@@ -83,16 +78,12 @@ export const ImageSettingsAccordion = memo(() => {
               <ParamSeedShuffle />
               <ParamSeedRandomize />
             </Flex>
-            {activeTabName === 'generation' && !isSDXL && <HrfSettings />}
+            {!isSDXL && <HrfSettings />}
-            {activeTabName === 'canvas' && (
+            <ParamScaleBeforeProcessing />
-              <>
+            <FormControlGroup formLabelProps={scalingLabelProps}>
-                <ParamScaleBeforeProcessing />
+              <ParamScaledWidth />
-                <FormControlGroup formLabelProps={scalingLabelProps}>
+              <ParamScaledHeight />
-                  <ParamScaledWidth />
+            </FormControlGroup>
-                  <ParamScaledHeight />
-                </FormControlGroup>
-              </>
-            )}
           </Flex>
         </Expander>
       </Flex>

invokeai/frontend/web/src/features/settingsAccordions/components/RefinerSettingsAccordion/RefinerSettingsAccordion.tsx

@@ -2,6 +2,7 @@ import type { FormLabelProps } from '@invoke-ai/ui-library';
 import { Flex, FormControlGroup, StandaloneAccordion, Text } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
+import { selectCanvasV2Slice } from 'features/controlLayers/store/canvasV2Slice';
 import ParamSDXLRefinerCFGScale from 'features/sdxl/components/SDXLRefiner/ParamSDXLRefinerCFGScale';
 import ParamSDXLRefinerModelSelect from 'features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect';
 import ParamSDXLRefinerNegativeAestheticScore from 'features/sdxl/components/SDXLRefiner/ParamSDXLRefinerNegativeAestheticScore';
@@ -9,7 +10,6 @@ import ParamSDXLRefinerPositiveAestheticScore from 'features/sdxl/components/SDX
 import ParamSDXLRefinerScheduler from 'features/sdxl/components/SDXLRefiner/ParamSDXLRefinerScheduler';
 import ParamSDXLRefinerStart from 'features/sdxl/components/SDXLRefiner/ParamSDXLRefinerStart';
 import ParamSDXLRefinerSteps from 'features/sdxl/components/SDXLRefiner/ParamSDXLRefinerSteps';
-import { selectSdxlSlice } from 'features/sdxl/store/sdxlSlice';
 import { useStandaloneAccordionToggle } from 'features/settingsAccordions/hooks/useStandaloneAccordionToggle';
 import { isNil } from 'lodash-es';
 import { memo } from 'react';
@@ -24,7 +24,9 @@ const stepsScaleLabelProps: FormLabelProps = {
   minW: '5rem',
 };
 
-const selectBadges = createMemoizedSelector(selectSdxlSlice, (sdxl) => (sdxl.refinerModel ? ['Enabled'] : undefined));
+const selectBadges = createMemoizedSelector(selectCanvasV2Slice, ({ params }) =>
+  params.refinerModel ? ['Enabled'] : undefined
+);
 
 export const RefinerSettingsAccordion: React.FC = memo(() => {
   const { t } = useTranslation();