feat(ui): hide values for connected fields

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

@@ -69,7 +69,7 @@ const InputField = ({ nodeId, fieldName }: Props) => {
     );
   }
 
-  if (fieldTemplate.input === 'connection') {
+  if (fieldTemplate.input === 'connection' || isConnected) {
     return (
       <InputFieldWrapper shouldDim={shouldDim}>
         <FormControl isInvalid={isMissingInput} isDisabled={isConnected} px={2}>

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

@@ -1,4 +1,7 @@
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
+import { useAppSelector } from 'app/store/storeHooks';
 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';
@@ -6,14 +9,31 @@ 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(
+    const fields = map(template.inputs).filter((field) => {
-      (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);
-  }, [template]);
+  }, [connectedFieldNames, template.inputs]);
 
   return fieldNames;
 };

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

@@ -1,4 +1,7 @@
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
+import { useAppSelector } from 'app/store/storeHooks';
 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';
@@ -6,15 +9,31 @@ 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(
+    const fields = map(template.inputs).filter((field) => {
-      (field) =>
+      if (connectedFieldNames.includes(field.name)) {
+        return true;
+      }
+      return (
         (field.input === 'connection' && !field.type.isCollectionOrScalar) ||
         !keys(TEMPLATE_BUILDER_MAP).includes(field.type.name)
-    );
+      );
+    });
 
     return getSortedFilteredFieldNames(fields);
-  }, [template]);
+  }, [connectedFieldNames, template.inputs]);
   return fieldNames;
 };