fix(ui): Layers tab counter only includes active entities

Empty and disabled layers are skipped.

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

@@ -5,7 +5,7 @@ import { useScopeOnFocus } from 'common/hooks/interactionScopes';
 import { CanvasPanelContent } from 'features/controlLayers/components/CanvasPanelContent';
 import { CanvasSendToToggle } from 'features/controlLayers/components/CanvasSendToToggle';
 import { selectSendToCanvas } from 'features/controlLayers/store/canvasSettingsSlice';
-import { selectEntityCount } from 'features/controlLayers/store/selectors';
+import { selectEntityCountActive } from 'features/controlLayers/store/selectors';
 import GalleryPanelContent from 'features/gallery/components/GalleryPanelContent';
 import { memo, useCallback, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -38,7 +38,7 @@ CanvasRightPanelContent.displayName = 'CanvasRightPanelContent';
 
 const PanelTabs = memo(({ setTab }: { setTab: (val: number) => void }) => {
   const { t } = useTranslation();
-  const entityCount = useAppSelector(selectEntityCount);
+  const activeEntityCount = useAppSelector(selectEntityCountActive);
   const sendToCanvas = useAppSelector(selectSendToCanvas);
   const tabTimeout = useRef<number | null>(null);
   const dndCtx = useDndContext();
@@ -66,11 +66,11 @@ const PanelTabs = memo(({ setTab }: { setTab: (val: number) => void }) => {
   }, []);
 
   const layersTabLabel = useMemo(() => {
-    if (entityCount === 0) {
+    if (activeEntityCount === 0) {
       return t('controlLayers.layer_other');
     }
-    return `${t('controlLayers.layer_other')} (${entityCount})`;
-  }, [entityCount, t]);
+    return `${t('controlLayers.layer_other')} (${activeEntityCount})`;
+  }, [activeEntityCount, t]);
 
   return (
     <>

invokeai/frontend/web/src/features/controlLayers/store/selectors.ts

@@ -27,9 +27,9 @@ export const selectCanvasSlice = (state: RootState) => state.canvas.present;
  * - Control layers
  * - Inpaint masks
  *
- * It does not check for validity of the entities.
+ * All entities are counted, regardless of their state.
  */
-export const selectEntityCount = createSelector(selectCanvasSlice, (canvas) => {
+export const selectEntityCountAll = createSelector(selectCanvasSlice, (canvas) => {
   return (
     canvas.regions.entities.length +
     canvas.ipAdapters.entities.length +
@@ -39,10 +39,63 @@ export const selectEntityCount = createSelector(selectCanvasSlice, (canvas) => {
   );
 });
 
+const selectActiveRasterLayerEntities = createSelector(selectCanvasSlice, (canvas) =>
+  canvas.rasterLayers.entities.filter((e) => e.isEnabled && e.objects.length > 0)
+);
+
+const selectActiveControlLayerEntities = createSelector(selectCanvasSlice, (canvas) =>
+  canvas.controlLayers.entities.filter((e) => e.isEnabled && e.objects.length > 0)
+);
+
+const selectActiveInpaintMaskEntities = createSelector(selectCanvasSlice, (canvas) =>
+  canvas.inpaintMasks.entities.filter((e) => e.isEnabled && e.objects.length > 0)
+);
+
+const selectActiveRegionalGuidanceEntities = createSelector(selectCanvasSlice, (canvas) =>
+  canvas.regions.entities.filter((e) => e.isEnabled && e.objects.length > 0)
+);
+
+const selectActiveIPAdapterEntities = createSelector(selectCanvasSlice, (canvas) =>
+  canvas.ipAdapters.entities.filter((e) => e.isEnabled)
+);
+
+/**
+ * Selects the total _active_ canvas entity count:
+ * - Regions
+ * - IP adapters
+ * - Raster layers
+ * - Control layers
+ * - Inpaint masks
+ *
+ * Active entities are those that are enabled and have at least one object.
+ */
+export const selectEntityCountActive = createSelector(
+  selectActiveRasterLayerEntities,
+  selectActiveControlLayerEntities,
+  selectActiveInpaintMaskEntities,
+  selectActiveRegionalGuidanceEntities,
+  selectActiveIPAdapterEntities,
+  (
+    activeRasterLayerEntities,
+    activeControlLayerEntities,
+    activeInpaintMaskEntities,
+    activeRegionalGuidanceEntities,
+    activeIPAdapterEntities
+  ) => {
+    return (
+      activeRasterLayerEntities.length +
+      activeControlLayerEntities.length +
+      activeInpaintMaskEntities.length +
+      activeRegionalGuidanceEntities.length +
+      activeIPAdapterEntities.length
+    );
+  }
+);
+
 /**
  * Selects if the canvas has any entities.
  */
-export const selectHasEntities = createSelector(selectEntityCount, (count) => count > 0);
+export const selectHasEntities = createSelector(selectEntityCountAll, (count) => count > 0);
 
 /**
  * Selects the optimal dimension for the canvas based on the currently-model