tidy(ui): clearer component names for control adapters

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable i18next/no-literal-string */
 import { Flex } from '@invoke-ai/ui-library';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
-import { CAEntityList } from 'features/controlLayers/components/ControlAdapter/CAEntityList';
+import { ControlAdapterList } from 'features/controlLayers/components/ControlAdapter/ControlAdapterList';
 import { IM } from 'features/controlLayers/components/InpaintMask/IM';
 import { IPAEntityList } from 'features/controlLayers/components/IPAdapter/IPAEntityList';
 import { LayerEntityList } from 'features/controlLayers/components/Layer/LayerEntityList';
@@ -14,7 +14,7 @@ export const CanvasEntityList = memo(() => {
       <Flex flexDir="column" gap={2} data-testid="control-layers-layer-list">
         <IM />
         <RGEntityList />
-        <CAEntityList />
+        <ControlAdapterList />
         <IPAEntityList />
         <LayerEntityList />
       </Flex>

invokeai/frontend/web/src/features/controlLayers/components/ControlAdapter/ControlAdapter.tsx

@@ -4,9 +4,9 @@ import { CanvasEntityDeleteButton } from 'features/controlLayers/components/comm
 import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle';
 import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader';
 import { CanvasEntityTitle } from 'features/controlLayers/components/common/CanvasEntityTitle';
-import { CAActionsMenu } from 'features/controlLayers/components/ControlAdapter/CAActionsMenu';
-import { CAOpacityAndFilter } from 'features/controlLayers/components/ControlAdapter/CAOpacityAndFilter';
-import { CASettings } from 'features/controlLayers/components/ControlAdapter/CASettings';
+import { ControlAdapterActionsMenu } from 'features/controlLayers/components/ControlAdapter/ControlAdapterActionsMenu';
+import { ControlAdapterOpacityAndFilter } from 'features/controlLayers/components/ControlAdapter/ControlAdapterOpacityAndFilter';
+import { ControlAdapterSettings } from 'features/controlLayers/components/ControlAdapter/ControlAdapterSettings';
 import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
 import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
 import { memo, useMemo } from 'react';
@@ -15,7 +15,7 @@ type Props = {
   id: string;
 };
 
-export const CA = memo(({ id }: Props) => {
+export const ControlAdapter = memo(({ id }: Props) => {
   const entityIdentifier = useMemo<CanvasEntityIdentifier>(() => ({ id, type: 'control_adapter' }), [id]);
   const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: true });
 
@@ -26,14 +26,14 @@ export const CA = memo(({ id }: Props) => {
           <CanvasEntityEnabledToggle />
           <CanvasEntityTitle />
           <Spacer />
-          <CAOpacityAndFilter />
-          <CAActionsMenu />
+          <ControlAdapterOpacityAndFilter />
+          <ControlAdapterActionsMenu />
           <CanvasEntityDeleteButton />
         </CanvasEntityHeader>
-        {isOpen && <CASettings />}
+        {isOpen && <ControlAdapterSettings />}
       </CanvasEntityContainer>
     </EntityIdentifierContext.Provider>
   );
 });
 
-CA.displayName = 'CA';
+ControlAdapter.displayName = 'ControlAdapter';

invokeai/frontend/web/src/features/controlLayers/components/ControlAdapter/ControlAdapterActionsMenu.tsx

@@ -3,7 +3,7 @@ import { CanvasEntityActionMenuItems } from 'features/controlLayers/components/c
 import { CanvasEntityMenuButton } from 'features/controlLayers/components/common/CanvasEntityMenuButton';
 import { memo } from 'react';
 
-export const CAActionsMenu = memo(() => {
+export const ControlAdapterActionsMenu = memo(() => {
   return (
     <Menu>
       <CanvasEntityMenuButton />
@@ -14,4 +14,4 @@ export const CAActionsMenu = memo(() => {
   );
 });
 
-CAActionsMenu.displayName = 'CAActionsMenu';
+ControlAdapterActionsMenu.displayName = 'ControlAdapterActionsMenu';

invokeai/frontend/web/src/features/controlLayers/components/ControlAdapter/ControlAdapterControlModeSelect.tsx

@@ -12,7 +12,7 @@ type Props = {
   onChange: (controlMode: ControlModeV2) => void;
 };
 
-export const CAControlModeSelect = memo(({ controlMode, onChange }: Props) => {
+export const ControlAdapterControlModeSelect = memo(({ controlMode, onChange }: Props) => {
   const { t } = useTranslation();
   const CONTROL_MODE_DATA = useMemo(
     () => [
@@ -57,4 +57,4 @@ export const CAControlModeSelect = memo(({ controlMode, onChange }: Props) => {
   );
 });
 
-CAControlModeSelect.displayName = 'CAControlModeSelect';
+ControlAdapterControlModeSelect.displayName = 'ControlAdapterControlModeSelect';

invokeai/frontend/web/src/features/controlLayers/components/ControlAdapter/ControlAdapterImagePreview.tsx

@@ -28,7 +28,7 @@ type Props = {
   onErrorLoadingProcessedImage: () => void;
 };
 
-export const CAImagePreview = memo(
+export const ControlAdapterImagePreview = memo(
   ({
     controlAdapter,
     onChangeImage,
@@ -226,4 +226,4 @@ export const CAImagePreview = memo(
   }
 );
 
-CAImagePreview.displayName = 'CAImagePreview';
+ControlAdapterImagePreview.displayName = 'ControlAdapterImagePreview';

invokeai/frontend/web/src/features/controlLayers/components/ControlAdapter/ControlAdapterList.tsx

@@ -1,7 +1,7 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import { CanvasEntityGroupTitle } from 'features/controlLayers/components/common/CanvasEntityGroupTitle';
-import { CA } from 'features/controlLayers/components/ControlAdapter/CA';
+import { ControlAdapter } from 'features/controlLayers/components/ControlAdapter/ControlAdapter';
 import { mapId } from 'features/controlLayers/konva/util';
 import { selectCanvasV2Slice } from 'features/controlLayers/store/canvasV2Slice';
 import { memo } from 'react';
@@ -11,7 +11,7 @@ const selectEntityIds = createMemoizedSelector(selectCanvasV2Slice, (canvasV2) =
   return canvasV2.controlAdapters.entities.map(mapId).reverse();
 });
 
-export const CAEntityList = memo(() => {
+export const ControlAdapterList = memo(() => {
   const { t } = useTranslation();
   const isSelected = useAppSelector((s) => Boolean(s.canvasV2.selectedEntityIdentifier?.type === 'control_adapter'));
   const caIds = useAppSelector(selectEntityIds);
@@ -28,11 +28,11 @@ export const CAEntityList = memo(() => {
           isSelected={isSelected}
         />
         {caIds.map((id) => (
-          <CA key={id} id={id} />
+          <ControlAdapter key={id} id={id} />
         ))}
       </>
     );
   }
 });
 
-CAEntityList.displayName = 'CAEntityList';
+ControlAdapterList.displayName = 'ControlAdapterList';

invokeai/frontend/web/src/features/controlLayers/components/ControlAdapter/ControlAdapterModel.tsx

@@ -11,7 +11,7 @@ type Props = {
   onChange: (modelConfig: ControlNetModelConfig | T2IAdapterModelConfig) => void;
 };
 
-export const CAModelCombobox = memo(({ modelKey, onChange: onChangeModel }: Props) => {
+export const ControlAdapterModel = memo(({ modelKey, onChange: onChangeModel }: Props) => {
   const { t } = useTranslation();
   const currentBaseModel = useAppSelector((s) => s.canvasV2.params.model?.base);
   const [modelConfigs, { isLoading }] = useControlNetAndT2IAdapterModels();
@@ -60,4 +60,4 @@ export const CAModelCombobox = memo(({ modelKey, onChange: onChangeModel }: Prop
   );
 });
 
-CAModelCombobox.displayName = 'CAModelCombobox';
+ControlAdapterModel.displayName = 'ControlAdapterModel';

invokeai/frontend/web/src/features/controlLayers/components/ControlAdapter/ControlAdapterOpacityAndFilter.tsx

@@ -25,7 +25,7 @@ import { PiDropHalfFill } from 'react-icons/pi';
 const marks = [0, 25, 50, 75, 100];
 const formatPct = (v: number | string) => `${v} %`;
 
-export const CAOpacityAndFilter = memo(() => {
+export const ControlAdapterOpacityAndFilter = memo(() => {
   const { id } = useEntityIdentifierContext();
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
@@ -96,4 +96,4 @@ export const CAOpacityAndFilter = memo(() => {
   );
 });
 
-CAOpacityAndFilter.displayName = 'CAOpacityAndFilter';
+ControlAdapterOpacityAndFilter.displayName = 'ControlAdapterOpacityAndFilter';

invokeai/frontend/web/src/features/controlLayers/components/ControlAdapter/ControlAdapterProcessorConfig.tsx

@@ -17,7 +17,7 @@ type Props = {
   onChange: (config: ProcessorConfig | null) => void;
 };
 
-export const CAProcessorConfig = memo(({ config, onChange }: Props) => {
+export const ControlAdapterProcessorConfig = memo(({ config, onChange }: Props) => {
   if (!config) {
     return null;
   }
@@ -81,4 +81,4 @@ export const CAProcessorConfig = memo(({ config, onChange }: Props) => {
   }
 });
 
-CAProcessorConfig.displayName = 'CAProcessorConfig';
+ControlAdapterProcessorConfig.displayName = 'ControlAdapterProcessorConfig';

invokeai/frontend/web/src/features/controlLayers/components/ControlAdapter/ControlAdapterProcessorTypeSelect.tsx

@@ -22,7 +22,7 @@ const selectDisabledProcessors = createMemoizedSelector(
   (config) => config.sd.disabledControlNetProcessors
 );
 
-export const CAProcessorTypeSelect = memo(({ config, onChange }: Props) => {
+export const ControlAdapterProcessorTypeSelect = memo(({ config, onChange }: Props) => {
   const { t } = useTranslation();
   const disabledProcessors = useAppSelector(selectDisabledProcessors);
   const options = useMemo(() => {
@@ -67,4 +67,4 @@ export const CAProcessorTypeSelect = memo(({ config, onChange }: Props) => {
   );
 });
 
-CAProcessorTypeSelect.displayName = 'CAProcessorTypeSelect';
+ControlAdapterProcessorTypeSelect.displayName = 'ControlAdapterProcessorTypeSelect';

invokeai/frontend/web/src/features/controlLayers/components/ControlAdapter/ControlAdapterSettings.tsx

@@ -3,11 +3,11 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { BeginEndStepPct } from 'features/controlLayers/components/common/BeginEndStepPct';
 import { CanvasEntitySettings } from 'features/controlLayers/components/common/CanvasEntitySettings';
 import { Weight } from 'features/controlLayers/components/common/Weight';
-import { CAControlModeSelect } from 'features/controlLayers/components/ControlAdapter/CAControlModeSelect';
-import { CAImagePreview } from 'features/controlLayers/components/ControlAdapter/CAImagePreview';
-import { CAModelCombobox } from 'features/controlLayers/components/ControlAdapter/CAModelCombobox';
-import { CAProcessorConfig } from 'features/controlLayers/components/ControlAdapter/CAProcessorConfig';
-import { CAProcessorTypeSelect } from 'features/controlLayers/components/ControlAdapter/CAProcessorTypeSelect';
+import { ControlAdapterControlModeSelect } from 'features/controlLayers/components/ControlAdapter/ControlAdapterControlModeSelect';
+import { ControlAdapterImagePreview } from 'features/controlLayers/components/ControlAdapter/ControlAdapterImagePreview';
+import { ControlAdapterModel } from 'features/controlLayers/components/ControlAdapter/ControlAdapterModel';
+import { ControlAdapterProcessorConfig } from 'features/controlLayers/components/ControlAdapter/ControlAdapterProcessorConfig';
+import { ControlAdapterProcessorTypeSelect } from 'features/controlLayers/components/ControlAdapter/ControlAdapterProcessorTypeSelect';
 import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
 import {
   caBeginEndStepPctChanged,
@@ -32,7 +32,7 @@ import type {
   T2IAdapterModelConfig,
 } from 'services/api/types';
 
-export const CASettings = memo(() => {
+export const ControlAdapterSettings = memo(() => {
   const { id } = useEntityIdentifierContext();
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
@@ -98,7 +98,7 @@ export const CASettings = memo(() => {
       <Flex flexDir="column" gap={3} position="relative" w="full">
         <Flex gap={3} alignItems="center" w="full">
           <Box minW={0} w="full" transitionProperty="common" transitionDuration="0.1s">
-            <CAModelCombobox modelKey={controlAdapter.model?.key ?? null} onChange={onChangeModel} />
+            <ControlAdapterModel modelKey={controlAdapter.model?.key ?? null} onChange={onChangeModel} />
           </Box>
 
           <IconButton
@@ -121,13 +121,13 @@ export const CASettings = memo(() => {
         <Flex gap={3} w="full">
           <Flex flexDir="column" gap={3} w="full" h="full">
             {controlAdapter.adapterType === 'controlnet' && (
-              <CAControlModeSelect controlMode={controlAdapter.controlMode} onChange={onChangeControlMode} />
+              <ControlAdapterControlModeSelect controlMode={controlAdapter.controlMode} onChange={onChangeControlMode} />
             )}
             <Weight weight={controlAdapter.weight} onChange={onChangeWeight} />
             <BeginEndStepPct beginEndStepPct={controlAdapter.beginEndStepPct} onChange={onChangeBeginEndStepPct} />
           </Flex>
           <Flex alignItems="center" justifyContent="center" h={36} w={36} aspectRatio="1/1">
-            <CAImagePreview
+            <ControlAdapterImagePreview
               controlAdapter={controlAdapter}
               onChangeImage={onChangeImage}
               droppableData={droppableData}
@@ -141,8 +141,8 @@ export const CASettings = memo(() => {
           <>
             <Divider />
             <Flex flexDir="column" gap={3} w="full">
-              <CAProcessorTypeSelect config={controlAdapter.processorConfig} onChange={onChangeProcessorConfig} />
-              <CAProcessorConfig config={controlAdapter.processorConfig} onChange={onChangeProcessorConfig} />
+              <ControlAdapterProcessorTypeSelect config={controlAdapter.processorConfig} onChange={onChangeProcessorConfig} />
+              <ControlAdapterProcessorConfig config={controlAdapter.processorConfig} onChange={onChangeProcessorConfig} />
             </Flex>
           </>
         )}
@@ -151,4 +151,4 @@ export const CASettings = memo(() => {
   );
 });
 
-CASettings.displayName = 'CASettings';
+ControlAdapterSettings.displayName = 'ControlAdapterSettings';