From 9d042baf48df1dcbf8fb4d4b896c46d73e1320a5 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 30 Apr 2024 12:42:11 +1000
Subject: [PATCH] fix(ui): ip adapter layers always at bottom of list

---
 .../components/RegionalPromptsPanelContent.tsx         | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/invokeai/frontend/web/src/features/regionalPrompts/components/RegionalPromptsPanelContent.tsx b/invokeai/frontend/web/src/features/regionalPrompts/components/RegionalPromptsPanelContent.tsx
index 1a73202986..e975d33056 100644
--- a/invokeai/frontend/web/src/features/regionalPrompts/components/RegionalPromptsPanelContent.tsx
+++ b/invokeai/frontend/web/src/features/regionalPrompts/components/RegionalPromptsPanelContent.tsx
@@ -8,13 +8,15 @@ import { ControlAdapterLayerListItem } from 'features/regionalPrompts/components
 import { DeleteAllLayersButton } from 'features/regionalPrompts/components/DeleteAllLayersButton';
 import { IPAdapterLayerListItem } from 'features/regionalPrompts/components/IPAdapterLayerListItem';
 import { MaskedGuidanceLayerListItem } from 'features/regionalPrompts/components/MaskedGuidanceLayerListItem';
-import { selectRegionalPromptsSlice } from 'features/regionalPrompts/store/regionalPromptsSlice';
+import { isRenderableLayer, selectRegionalPromptsSlice } from 'features/regionalPrompts/store/regionalPromptsSlice';
 import type { Layer } from 'features/regionalPrompts/store/types';
+import { partition } from 'lodash-es';
 import { memo } from 'react';
 
-const selectLayerIdTypePairs = createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) =>
-  regionalPrompts.present.layers.map((l) => ({ id: l.id, type: l.type })).reverse()
-);
+const selectLayerIdTypePairs = createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) => {
+  const [renderableLayers, ipAdapterLayers] = partition(regionalPrompts.present.layers, isRenderableLayer);
+  return [...ipAdapterLayers, ...renderableLayers].map((l) => ({ id: l.id, type: l.type })).reverse();
+});
 
 export const RegionalPromptsPanelContent = memo(() => {
   const layerIdTypePairs = useAppSelector(selectLayerIdTypePairs);