perf(ui): misc ui improvements

invokeai/frontend/web/src/common/hooks/useGlobalHotkeys.ts

@@ -9,7 +9,7 @@ import { useHotkeys } from 'react-hotkeys-hook';
 
 export const useGlobalHotkeys = () => {
   const dispatch = useAppDispatch();
-  const isModelManagerEnabled = useFeatureStatus('modelManager').isFeatureEnabled;
+  const isModelManagerEnabled = useFeatureStatus('modelManager');
   const { queueBack, isDisabled: isDisabledQueueBack, isLoading: isLoadingQueueBack } = useQueueBack();
 
   useHotkeys(

invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx

@@ -32,7 +32,7 @@ const BoardContextMenu = ({ board, board_id, setBoardToDelete, children }: Props
 
   const isSelectedForAutoAdd = useAppSelector(selectIsSelectedForAutoAdd);
   const boardName = useBoardName(board_id);
-  const isBulkDownloadEnabled = useFeatureStatus('bulkDownload').isFeatureEnabled;
+  const isBulkDownloadEnabled = useFeatureStatus('bulkDownload');
 
   const [bulkDownload] = useBulkDownloadImagesMutation();
 

invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx

@@ -54,7 +54,7 @@ const CurrentImageButtons = () => {
   const selection = useAppSelector((s) => s.gallery.selection);
   const shouldDisableToolbarButtons = useAppSelector(selectShouldDisableToolbarButtons);
 
-  const isUpscalingEnabled = useFeatureStatus('upscaling').isFeatureEnabled;
+  const isUpscalingEnabled = useFeatureStatus('upscaling');
   const isQueueMutationInProgress = useIsQueueMutationInProgress();
   const toaster = useAppToaster();
   const { t } = useTranslation();

invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/MultipleSelectionMenuItems.tsx

@@ -20,7 +20,7 @@ const MultipleSelectionMenuItems = () => {
   const selection = useAppSelector((s) => s.gallery.selection);
   const customStarUi = useStore($customStarUI);
 
-  const isBulkDownloadEnabled = useFeatureStatus('bulkDownload').isFeatureEnabled;
+  const isBulkDownloadEnabled = useFeatureStatus('bulkDownload');
 
   const [starImages] = useStarImagesMutation();
   const [unstarImages] = useUnstarImagesMutation();

invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx

@@ -45,7 +45,7 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
   const toaster = useAppToaster();
-  const isCanvasEnabled = useFeatureStatus('unifiedCanvas').isFeatureEnabled;
+  const isCanvasEnabled = useFeatureStatus('unifiedCanvas');
   const customStarUi = useStore($customStarUI);
   const { downloadImage } = useDownloadImage();
 

invokeai/frontend/web/src/features/gallery/hooks/useMultiselect.ts

@@ -18,7 +18,7 @@ export const useMultiselect = (imageDTO?: ImageDTO) => {
     [imageDTO?.image_name]
   );
   const isSelected = useAppSelector(selectIsSelected);
-  const isMultiSelectEnabled = useFeatureStatus('multiselect').isFeatureEnabled;
+  const isMultiSelectEnabled = useFeatureStatus('multiselect');
 
   const handleClick = useCallback(
     (e: MouseEvent<HTMLDivElement>) => {

invokeai/frontend/web/src/features/hrf/components/HrfSettings.tsx

@@ -8,7 +8,7 @@ import ParamHrfStrength from './ParamHrfStrength';
 import ParamHrfToggle from './ParamHrfToggle';
 
 export const HrfSettings = memo(() => {
-  const isHRFFeatureEnabled = useFeatureStatus('hrf').isFeatureEnabled;
+  const isHRFFeatureEnabled = useFeatureStatus('hrf');
   const hrfEnabled = useAppSelector((s) => s.hrf.hrfEnabled);
 
   if (!isHRFFeatureEnabled) {

invokeai/frontend/web/src/features/modelManagerV2/hooks/useStarterModelsToast.tsx

@@ -10,7 +10,7 @@ const TOAST_ID = 'starterModels';
 
 export const useStarterModelsToast = () => {
   const { t } = useTranslation();
-  const isEnabled = useFeatureStatus('starterModels').isFeatureEnabled;
+  const isEnabled = useFeatureStatus('starterModels');
   const [didToast, setDidToast] = useState(false);
   const [mainModels, { data }] = useMainModels();
   const toast = useToast();

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeFooter.tsx

@@ -16,7 +16,7 @@ const props: ChakraProps = { w: 'unset' };
 
 const InvocationNodeFooter = ({ nodeId }: Props) => {
   const hasImageOutput = useHasImageOutput(nodeId);
-  const isCacheEnabled = useFeatureStatus('invocationCache').isFeatureEnabled;
+  const isCacheEnabled = useFeatureStatus('invocationCache');
   return (
     <Flex
       className={DRAG_HANDLE_CLASSNAME}

invokeai/frontend/web/src/features/nodes/hooks/useOutputFieldNames.ts

@@ -1,5 +1,5 @@
-import { createSelector } from '@reduxjs/toolkit';
 import { EMPTY_ARRAY } from 'app/store/constants';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
 import { selectNodeTemplate } from 'features/nodes/store/selectors';
@@ -10,7 +10,7 @@ import { useMemo } from 'react';
 export const useOutputFieldNames = (nodeId: string) => {
   const selector = useMemo(
     () =>
-      createSelector(selectNodesSlice, (nodes) => {
+      createMemoizedSelector(selectNodesSlice, (nodes) => {
         const template = selectNodeTemplate(nodes, nodeId);
         if (!template) {
           return EMPTY_ARRAY;

invokeai/frontend/web/src/features/nodes/hooks/useWithFooter.ts

@@ -5,8 +5,7 @@ import { useHasImageOutput } from './useHasImageOutput';
 
 export const useWithFooter = (nodeId: string) => {
   const hasImageOutput = useHasImageOutput(nodeId);
-  const isCacheEnabled = useFeatureStatus('invocationCache').isFeatureEnabled;
-
+  const isCacheEnabled = useFeatureStatus('invocationCache');
   const withFooter = useMemo(() => hasImageOutput || isCacheEnabled, [hasImageOutput, isCacheEnabled]);
   return withFooter;
 };

invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillColorOptions.tsx

@@ -1,24 +1,18 @@
 import { Box, Flex, FormControl, FormLabel } from '@invoke-ai/ui-library';
-import { createSelector } from '@reduxjs/toolkit';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIColorPicker from 'common/components/IAIColorPicker';
 import { selectGenerationSlice, setInfillColorValue } from 'features/parameters/store/generationSlice';
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useCallback } from 'react';
 import type { RgbaColor } from 'react-colorful';
 import { useTranslation } from 'react-i18next';
 
+const selectInfillColor = createMemoizedSelector(selectGenerationSlice, (generation) => generation.infillColorValue);
+
 const ParamInfillColorOptions = () => {
   const dispatch = useAppDispatch();
 
-  const selector = useMemo(
-    () =>
-      createSelector(selectGenerationSlice, (generation) => ({
-        infillColor: generation.infillColorValue,
-      })),
-    []
-  );
-
-  const { infillColor } = useAppSelector(selector);
+  const infillColor = useAppSelector(selectInfillColor);
 
   const infillMethod = useAppSelector((s) => s.generation.infillMethod);
 

invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillMosaicOptions.tsx

@@ -1,35 +1,23 @@
 import { Box, CompositeNumberInput, CompositeSlider, Flex, FormControl, FormLabel } from '@invoke-ai/ui-library';
-import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIColorPicker from 'common/components/IAIColorPicker';
 import {
-  selectGenerationSlice,
   setInfillMosaicMaxColor,
   setInfillMosaicMinColor,
   setInfillMosaicTileHeight,
   setInfillMosaicTileWidth,
 } from 'features/parameters/store/generationSlice';
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useCallback } from 'react';
 import type { RgbaColor } from 'react-colorful';
 import { useTranslation } from 'react-i18next';
 
 const ParamInfillMosaicTileSize = () => {
   const dispatch = useAppDispatch();
 
-  const selector = useMemo(
-    () =>
-      createSelector(selectGenerationSlice, (generation) => ({
-        infillMosaicTileWidth: generation.infillMosaicTileWidth,
-        infillMosaicTileHeight: generation.infillMosaicTileHeight,
-        infillMosaicMinColor: generation.infillMosaicMinColor,
-        infillMosaicMaxColor: generation.infillMosaicMaxColor,
-      })),
-    []
-  );
-
-  const { infillMosaicTileWidth, infillMosaicTileHeight, infillMosaicMinColor, infillMosaicMaxColor } =
-    useAppSelector(selector);
-
+  const infillMosaicTileWidth = useAppSelector((s) => s.generation.infillMosaicTileWidth);
+  const infillMosaicTileHeight = useAppSelector((s) => s.generation.infillMosaicTileHeight);
+  const infillMosaicMinColor = useAppSelector((s) => s.generation.infillMosaicMinColor);
+  const infillMosaicMaxColor = useAppSelector((s) => s.generation.infillMosaicMaxColor);
   const infillMethod = useAppSelector((s) => s.generation.infillMethod);
 
   const { t } = useTranslation();

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

@@ -27,8 +27,8 @@ export const QueueActionsMenuButton = memo(() => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
   const clearQueueDisclosure = useDisclosure();
-  const isPauseEnabled = useFeatureStatus('pauseQueue').isFeatureEnabled;
-  const isResumeEnabled = useFeatureStatus('resumeQueue').isFeatureEnabled;
+  const isPauseEnabled = useFeatureStatus('pauseQueue');
+  const isResumeEnabled = useFeatureStatus('resumeQueue');
   const { queueSize } = useGetQueueStatusQuery(undefined, {
     selectFromResult: (res) => ({
       queueSize: res.data ? res.data.queue.pending + res.data.queue.in_progress : 0,

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

@@ -9,7 +9,7 @@ import { InvokeQueueBackButton } from './InvokeQueueBackButton';
 import { QueueActionsMenuButton } from './QueueActionsMenuButton';
 
 const QueueControls = () => {
-  const isPrependEnabled = useFeatureStatus('prependQueue').isFeatureEnabled;
+  const isPrependEnabled = useFeatureStatus('prependQueue');
   return (
     <Flex w="full" position="relative" borderRadius="base" gap={2} pt={2} flexDir="column">
       <ButtonGroup size="lg" isAttached={false}>

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

@@ -8,7 +8,7 @@ import QueueStatus from './QueueStatus';
 import QueueTabQueueControls from './QueueTabQueueControls';
 
 const QueueTabContent = () => {
-  const isInvocationCacheEnabled = useFeatureStatus('invocationCache').isFeatureEnabled;
+  const isInvocationCacheEnabled = useFeatureStatus('invocationCache');
 
   return (
     <Flex borderRadius="base" w="full" h="full" flexDir="column" gap={2}>

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

@@ -8,8 +8,8 @@ import PruneQueueButton from './PruneQueueButton';
 import ResumeProcessorButton from './ResumeProcessorButton';
 
 const QueueTabQueueControls = () => {
-  const isPauseEnabled = useFeatureStatus('pauseQueue').isFeatureEnabled;
-  const isResumeEnabled = useFeatureStatus('resumeQueue').isFeatureEnabled;
+  const isPauseEnabled = useFeatureStatus('pauseQueue');
+  const isResumeEnabled = useFeatureStatus('resumeQueue');
   return (
     <Flex layerStyle="first" borderRadius="base" p={2} gap={2}>
       {isPauseEnabled || isResumeEnabled ? (

invokeai/frontend/web/src/features/queue/hooks/useQueueFront.ts

@@ -13,7 +13,7 @@ export const useQueueFront = () => {
   const [_, { isLoading }] = useEnqueueBatchMutation({
     fixedCacheKey: 'enqueueBatch',
   });
-  const prependEnabled = useFeatureStatus('prependQueue').isFeatureEnabled;
+  const prependEnabled = useFeatureStatus('prependQueue');
 
   const isDisabled = useMemo(() => {
     return !isReady || !prependEnabled;

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

@@ -62,7 +62,7 @@ const selector = createMemoizedSelector(selectControlAdaptersSlice, (controlAdap
 export const ControlSettingsAccordion: React.FC = memo(() => {
   const { t } = useTranslation();
   const { controlAdapterIds, badges } = useAppSelector(selector);
-  const isControlNetDisabled = useFeatureStatus('controlNet').isFeatureDisabled;
+  const isControlNetEnabled = useFeatureStatus('controlNet');
   const { isOpen, onToggle } = useStandaloneAccordionToggle({
     id: 'control-settings',
     defaultIsOpen: true,
@@ -71,7 +71,7 @@ export const ControlSettingsAccordion: React.FC = memo(() => {
   const [addIPAdapter, isAddIPAdapterDisabled] = useAddControlAdapter('ip_adapter');
   const [addT2IAdapter, isAddT2IAdapterDisabled] = useAddControlAdapter('t2i_adapter');
 
-  if (isControlNetDisabled) {
+  if (!isControlNetEnabled) {
     return null;
   }
 

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLanguageSelect.tsx

@@ -40,7 +40,7 @@ export const SettingsLanguageSelect = memo(() => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const language = useAppSelector((s) => s.system.language);
-  const isLocalizationEnabled = useFeatureStatus('localization').isFeatureEnabled;
+  const isLocalizationEnabled = useFeatureStatus('localization');
 
   const value = useMemo(() => options.find((o) => o.value === language), [language]);
 

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx

@@ -23,9 +23,9 @@ const SettingsMenu = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   useGlobalMenuClose(onClose);
 
-  const isBugLinkEnabled = useFeatureStatus('bugLink').isFeatureEnabled;
-  const isDiscordLinkEnabled = useFeatureStatus('discordLink').isFeatureEnabled;
-  const isGithubLinkEnabled = useFeatureStatus('githubLink').isFeatureEnabled;
+  const isBugLinkEnabled = useFeatureStatus('bugLink');
+  const isDiscordLinkEnabled = useFeatureStatus('discordLink');
+  const isGithubLinkEnabled = useFeatureStatus('githubLink');
 
   return (
     <Menu isOpen={isOpen} onOpen={onOpen} onClose={onClose}>

invokeai/frontend/web/src/features/system/hooks/useFeatureStatus.ts

@@ -1,32 +1,24 @@
+import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
 import type { AppFeature, SDFeature } from 'app/types/invokeai';
+import { selectConfigSlice } from 'features/system/store/configSlice';
 import type { InvokeTabName } from 'features/ui/store/tabMap';
 import { useMemo } from 'react';
 
 export const useFeatureStatus = (feature: AppFeature | SDFeature | InvokeTabName) => {
-  const disabledTabs = useAppSelector((s) => s.config.disabledTabs);
-
-  const disabledFeatures = useAppSelector((s) => s.config.disabledFeatures);
-
-  const disabledSDFeatures = useAppSelector((s) => s.config.disabledSDFeatures);
-
-  const isFeatureDisabled = useMemo(
+  const selectIsFeatureEnabled = useMemo(
     () =>
-      disabledFeatures.includes(feature as AppFeature) ||
-      disabledSDFeatures.includes(feature as SDFeature) ||
-      disabledTabs.includes(feature as InvokeTabName),
-    [disabledFeatures, disabledSDFeatures, disabledTabs, feature]
+      createSelector(selectConfigSlice, (config) => {
+        return !(
+          config.disabledFeatures.includes(feature as AppFeature) ||
+          config.disabledSDFeatures.includes(feature as SDFeature) ||
+          config.disabledTabs.includes(feature as InvokeTabName)
+        );
+      }),
+    [feature]
   );
 
-  const isFeatureEnabled = useMemo(
-    () =>
-      !(
-        disabledFeatures.includes(feature as AppFeature) ||
-        disabledSDFeatures.includes(feature as SDFeature) ||
-        disabledTabs.includes(feature as InvokeTabName)
-      ),
-    [disabledFeatures, disabledSDFeatures, disabledTabs, feature]
-  );
+  const isFeatureEnabled = useAppSelector(selectIsFeatureEnabled);
 
-  return { isFeatureDisabled, isFeatureEnabled };
+  return isFeatureEnabled;
 };