From 0951aecb134ef0e9f8ab631e28ac34090607bd38 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 15 Jul 2024 18:49:33 +1000
Subject: [PATCH] fix(ui): entity display list

---
 .../components/CanvasEntityList.tsx           | 61 ++++++-------------
 .../ControlAdapter/CAEntityList.tsx           | 31 ++++++++++
 .../components/ControlLayersPanelContent.tsx  |  6 --
 .../components/IPAdapter/IPAEntityList.tsx    | 31 ++++++++++
 .../components/Layer/LayerEntityList.tsx      | 31 ++++++++++
 .../RegionalGuidance/RGEntityList.tsx         | 31 ++++++++++
 6 files changed, 143 insertions(+), 48 deletions(-)
 create mode 100644 invokeai/frontend/web/src/features/controlLayers/components/ControlAdapter/CAEntityList.tsx
 create mode 100644 invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAEntityList.tsx
 create mode 100644 invokeai/frontend/web/src/features/controlLayers/components/Layer/LayerEntityList.tsx
 create mode 100644 invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RGEntityList.tsx

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList.tsx
index 5df4b0a4c7..d9d0255d14 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList.tsx
@@ -1,53 +1,30 @@
 /* eslint-disable i18next/no-literal-string */
 import { Flex } from '@invoke-ai/ui-library';
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
-import { IAINoContentFallback } from 'common/components/IAIImageFallback';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
-import { CA } from 'features/controlLayers/components/ControlAdapter/CA';
-import { IPA } from 'features/controlLayers/components/IPAdapter/IPA';
-import { Layer } from 'features/controlLayers/components/Layer/Layer';
-import { RG } from 'features/controlLayers/components/RegionalGuidance/RG';
-import { mapId } from 'features/controlLayers/konva/util';
-import { selectCanvasV2Slice } from 'features/controlLayers/store/canvasV2Slice';
+import { CAEntityList } from 'features/controlLayers/components/ControlAdapter/CAEntityList';
+import { InitialImage } from 'features/controlLayers/components/InitialImage/InitialImage';
+import { IM } from 'features/controlLayers/components/InpaintMask/IM';
+import { IPAEntityList } from 'features/controlLayers/components/IPAdapter/IPAEntityList';
+import { LayerEntityList } from 'features/controlLayers/components/Layer/LayerEntityList';
+import { RGEntityList } from 'features/controlLayers/components/RegionalGuidance/RGEntityList';
 import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-const selectEntityIds = createMemoizedSelector(selectCanvasV2Slice, (canvasV2) => {
-  const rgIds = canvasV2.regions.entities.map(mapId).reverse();
-  const caIds = canvasV2.controlAdapters.entities.map(mapId).reverse();
-  const ipaIds = canvasV2.ipAdapters.entities.map(mapId).reverse();
-  const layerIds = canvasV2.layers.entities.map(mapId).reverse();
-  const entityCount = rgIds.length + caIds.length + ipaIds.length + layerIds.length;
-  return { rgIds, caIds, ipaIds, layerIds, entityCount };
-});
 
 export const CanvasEntityList = memo(() => {
-  const { t } = useTranslation();
-  const { rgIds, caIds, ipaIds, layerIds, entityCount } = useAppSelector(selectEntityIds);
+  const isCanvasSessionActive = useAppSelector((s) => s.canvasV2.session.isActive);
 
-  if (entityCount > 0) {
-    return (
-      <ScrollableContent>
-        <Flex flexDir="column" gap={2} data-testid="control-layers-layer-list">
-          {rgIds.map((id) => (
-            <RG key={id} id={id} />
-          ))}
-          {caIds.map((id) => (
-            <CA key={id} id={id} />
-          ))}
-          {ipaIds.map((id) => (
-            <IPA key={id} id={id} />
-          ))}
-          {layerIds.map((id) => (
-            <Layer key={id} id={id} />
-          ))}
-        </Flex>
-      </ScrollableContent>
-    );
-  }
-
-  return <IAINoContentFallback icon={null} label={t('controlLayers.noLayersAdded')} />;
+  return (
+    <ScrollableContent>
+      <Flex flexDir="column" gap={2} data-testid="control-layers-layer-list">
+        {isCanvasSessionActive && <IM />}
+        <RGEntityList />
+        <CAEntityList />
+        <IPAEntityList />
+        <LayerEntityList />
+        {!isCanvasSessionActive && <InitialImage />}
+      </Flex>
+    </ScrollableContent>
+  );
 });
 
 CanvasEntityList.displayName = 'CanvasEntityList';
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlAdapter/CAEntityList.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlAdapter/CAEntityList.tsx
new file mode 100644
index 0000000000..e18fa5e166
--- /dev/null
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlAdapter/CAEntityList.tsx
@@ -0,0 +1,31 @@
+/* eslint-disable i18next/no-literal-string */
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
+import { useAppSelector } from 'app/store/storeHooks';
+import { CA } from 'features/controlLayers/components/ControlAdapter/CA';
+import { mapId } from 'features/controlLayers/konva/util';
+import { selectCanvasV2Slice } from 'features/controlLayers/store/canvasV2Slice';
+import { memo } from 'react';
+
+const selectEntityIds = createMemoizedSelector(selectCanvasV2Slice, (canvasV2) => {
+  return canvasV2.controlAdapters.entities.map(mapId).reverse();
+});
+
+export const CAEntityList = memo(() => {
+  const caIds = useAppSelector(selectEntityIds);
+
+  if (caIds.length === 0) {
+    return null;
+  }
+
+  if (caIds.length > 0) {
+    return (
+      <>
+        {caIds.map((id) => (
+          <CA key={id} id={id} />
+        ))}
+      </>
+    );
+  }
+});
+
+CAEntityList.displayName = 'CAEntityList';
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersPanelContent.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersPanelContent.tsx
index 94e706b68a..f9f7c07811 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersPanelContent.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersPanelContent.tsx
@@ -1,24 +1,18 @@
 /* eslint-disable i18next/no-literal-string */
 import { Flex } from '@invoke-ai/ui-library';
-import { useAppSelector } from 'app/store/storeHooks';
 import { AddLayerButton } from 'features/controlLayers/components/AddLayerButton';
 import { CanvasEntityList } from 'features/controlLayers/components/CanvasEntityList';
 import { DeleteAllLayersButton } from 'features/controlLayers/components/DeleteAllLayersButton';
-import { InitialImage } from 'features/controlLayers/components/InitialImage/InitialImage';
-import { IM } from 'features/controlLayers/components/InpaintMask/IM';
 import { memo } from 'react';
 
 export const ControlLayersPanelContent = memo(() => {
-  const isCanvasSessionActive = useAppSelector((s) => s.canvasV2.session.isActive);
   return (
     <Flex flexDir="column" gap={2} w="full" h="full">
       <Flex justifyContent="space-around">
         <AddLayerButton />
         <DeleteAllLayersButton />
       </Flex>
-      {isCanvasSessionActive && <IM />}
       <CanvasEntityList />
-      {!isCanvasSessionActive && <InitialImage />}
     </Flex>
   );
 });
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAEntityList.tsx b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAEntityList.tsx
new file mode 100644
index 0000000000..d70847cf39
--- /dev/null
+++ b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAEntityList.tsx
@@ -0,0 +1,31 @@
+/* eslint-disable i18next/no-literal-string */
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
+import { useAppSelector } from 'app/store/storeHooks';
+import { IPA } from 'features/controlLayers/components/IPAdapter/IPA';
+import { mapId } from 'features/controlLayers/konva/util';
+import { selectCanvasV2Slice } from 'features/controlLayers/store/canvasV2Slice';
+import { memo } from 'react';
+
+const selectEntityIds = createMemoizedSelector(selectCanvasV2Slice, (canvasV2) => {
+  return canvasV2.ipAdapters.entities.map(mapId).reverse();
+});
+
+export const IPAEntityList = memo(() => {
+  const ipaIds = useAppSelector(selectEntityIds);
+
+  if (ipaIds.length === 0) {
+    return null;
+  }
+
+  if (ipaIds.length > 0) {
+    return (
+      <>
+        {ipaIds.map((id) => (
+          <IPA key={id} id={id} />
+        ))}
+      </>
+    );
+  }
+});
+
+IPAEntityList.displayName = 'IPAEntityList';
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Layer/LayerEntityList.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Layer/LayerEntityList.tsx
new file mode 100644
index 0000000000..89ab0d7aa1
--- /dev/null
+++ b/invokeai/frontend/web/src/features/controlLayers/components/Layer/LayerEntityList.tsx
@@ -0,0 +1,31 @@
+/* eslint-disable i18next/no-literal-string */
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
+import { useAppSelector } from 'app/store/storeHooks';
+import { Layer } from 'features/controlLayers/components/Layer/Layer';
+import { mapId } from 'features/controlLayers/konva/util';
+import { selectCanvasV2Slice } from 'features/controlLayers/store/canvasV2Slice';
+import { memo } from 'react';
+
+const selectEntityIds = createMemoizedSelector(selectCanvasV2Slice, (canvasV2) => {
+  return canvasV2.layers.entities.map(mapId).reverse();
+});
+
+export const LayerEntityList = memo(() => {
+  const layerIds = useAppSelector(selectEntityIds);
+
+  if (layerIds.length === 0) {
+    return null;
+  }
+
+  if (layerIds.length > 0) {
+    return (
+      <>
+        {layerIds.map((id) => (
+          <Layer key={id} id={id} />
+        ))}
+      </>
+    );
+  }
+});
+
+LayerEntityList.displayName = 'LayerEntityList';
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RGEntityList.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RGEntityList.tsx
new file mode 100644
index 0000000000..1e9a68a321
--- /dev/null
+++ b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RGEntityList.tsx
@@ -0,0 +1,31 @@
+/* eslint-disable i18next/no-literal-string */
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
+import { useAppSelector } from 'app/store/storeHooks';
+import { RG } from 'features/controlLayers/components/RegionalGuidance/RG';
+import { mapId } from 'features/controlLayers/konva/util';
+import { selectCanvasV2Slice } from 'features/controlLayers/store/canvasV2Slice';
+import { memo } from 'react';
+
+const selectEntityIds = createMemoizedSelector(selectCanvasV2Slice, (canvasV2) => {
+  return canvasV2.regions.entities.map(mapId).reverse();
+});
+
+export const RGEntityList = memo(() => {
+  const rgIds = useAppSelector(selectEntityIds);
+
+  if (rgIds.length === 0) {
+    return null;
+  }
+
+  if (rgIds.length > 0) {
+    return (
+      <>
+        {rgIds.map((id) => (
+          <RG key={id} id={id} />
+        ))}
+      </>
+    );
+  }
+});
+
+RGEntityList.displayName = 'RGEntityList';