diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useAnyOrDirectInputFieldNames.ts b/invokeai/frontend/web/src/features/nodes/hooks/useAnyOrDirectInputFieldNames.ts index 7972f9eee3..3b7a1b74c1 100644 --- a/invokeai/frontend/web/src/features/nodes/hooks/useAnyOrDirectInputFieldNames.ts +++ b/invokeai/frontend/web/src/features/nodes/hooks/useAnyOrDirectInputFieldNames.ts @@ -1,7 +1,5 @@ -import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; -import { useAppSelector } from 'app/store/storeHooks'; +import { EMPTY_ARRAY } from 'app/store/constants'; import { useNodeTemplate } from 'features/nodes/hooks/useNodeTemplate'; -import { selectNodesSlice } from 'features/nodes/store/nodesSlice'; import { getSortedFilteredFieldNames } from 'features/nodes/util/node/getSortedFilteredFieldNames'; import { TEMPLATE_BUILDER_MAP } from 'features/nodes/util/schema/buildFieldInputTemplate'; import { keys, map } from 'lodash-es'; @@ -9,31 +7,20 @@ import { useMemo } from 'react'; export const useAnyOrDirectInputFieldNames = (nodeId: string): string[] => { const template = useNodeTemplate(nodeId); - const selectConnectedFieldNames = useMemo( - () => - createMemoizedSelector(selectNodesSlice, (nodesSlice) => - nodesSlice.edges - .filter((e) => e.target === nodeId) - .map((e) => e.targetHandle) - .filter(Boolean) - ), - [nodeId] - ); - const connectedFieldNames = useAppSelector(selectConnectedFieldNames); const fieldNames = useMemo(() => { const fields = map(template.inputs).filter((field) => { - if (connectedFieldNames.includes(field.name)) { - return false; - } - return ( (['any', 'direct'].includes(field.input) || field.type.isCollectionOrScalar) && keys(TEMPLATE_BUILDER_MAP).includes(field.type.name) ); }); - return getSortedFilteredFieldNames(fields); - }, [connectedFieldNames, template.inputs]); + const _fieldNames = getSortedFilteredFieldNames(fields); + if (_fieldNames.length === 0) { + return EMPTY_ARRAY; + } + return _fieldNames; + }, [template.inputs]); return fieldNames; }; diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useConnectionInputFieldNames.ts b/invokeai/frontend/web/src/features/nodes/hooks/useConnectionInputFieldNames.ts index 0eeb592c31..d071ac76d2 100644 --- a/invokeai/frontend/web/src/features/nodes/hooks/useConnectionInputFieldNames.ts +++ b/invokeai/frontend/web/src/features/nodes/hooks/useConnectionInputFieldNames.ts @@ -1,7 +1,5 @@ -import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; -import { useAppSelector } from 'app/store/storeHooks'; +import { EMPTY_ARRAY } from 'app/store/constants'; import { useNodeTemplate } from 'features/nodes/hooks/useNodeTemplate'; -import { selectNodesSlice } from 'features/nodes/store/nodesSlice'; import { getSortedFilteredFieldNames } from 'features/nodes/util/node/getSortedFilteredFieldNames'; import { TEMPLATE_BUILDER_MAP } from 'features/nodes/util/schema/buildFieldInputTemplate'; import { keys, map } from 'lodash-es'; @@ -9,31 +7,22 @@ import { useMemo } from 'react'; export const useConnectionInputFieldNames = (nodeId: string): string[] => { const template = useNodeTemplate(nodeId); - const selectConnectedFieldNames = useMemo( - () => - createMemoizedSelector(selectNodesSlice, (nodesSlice) => - nodesSlice.edges - .filter((e) => e.target === nodeId) - .map((e) => e.targetHandle) - .filter(Boolean) - ), - [nodeId] - ); - const connectedFieldNames = useAppSelector(selectConnectedFieldNames); - const fieldNames = useMemo(() => { // get the visible fields - const fields = map(template.inputs).filter((field) => { - if (connectedFieldNames.includes(field.name)) { - return true; - } - return ( + const fields = map(template.inputs).filter( + (field) => (field.input === 'connection' && !field.type.isCollectionOrScalar) || !keys(TEMPLATE_BUILDER_MAP).includes(field.type.name) - ); - }); + ); + + const _fieldNames = getSortedFilteredFieldNames(fields); + + if (_fieldNames.length === 0) { + return EMPTY_ARRAY; + } + + return _fieldNames; + }, [template.inputs]); - return getSortedFilteredFieldNames(fields); - }, [connectedFieldNames, template.inputs]); return fieldNames; };