fix(ui): do not error in node/field selectors are used outside field …

…gate components
invoke-ai · Feb 7, 2025 · 5174e02 · 5174e02
1 parent 23449f8
commit 5174e02
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 8 deletions.
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldInstanceExists.ts b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldInstanceExists.ts
@@ -1,13 +1,16 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
-import { selectInvocationNode, selectNodesSlice } from 'features/nodes/store/selectors';
+import { selectInvocationNodeSafe, selectNodesSlice } from 'features/nodes/store/selectors';
 import { useMemo } from 'react';
 
 export const useInputFieldInstanceExists = (nodeId: string, fieldName: string) => {
   const selector = useMemo(
     () =>
       createSelector(selectNodesSlice, (nodesSlice) => {
-        const node = selectInvocationNode(nodesSlice, nodeId);
+        const node = selectInvocationNodeSafe(nodesSlice, nodeId);
+        if (!node) {
+          return false;
+        }
         const instance = node.data.inputs[fieldName];
         return Boolean(instance);
       }),

diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldName.ts b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldName.ts
@@ -2,7 +2,7 @@ import { useStore } from '@nanostores/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
 import { $templates } from 'features/nodes/store/nodesSlice';
-import { selectInvocationNode, selectNodesSlice } from 'features/nodes/store/selectors';
+import { selectInvocationNodeSafe, selectNodesSlice } from 'features/nodes/store/selectors';
 import { useMemo } from 'react';
 
 export const useInputFieldName = (nodeId: string, fieldName: string) => {
@@ -11,7 +11,10 @@ export const useInputFieldName = (nodeId: string, fieldName: string) => {
   const selector = useMemo(
     () =>
       createSelector(selectNodesSlice, (nodesSlice) => {
-        const node = selectInvocationNode(nodesSlice, nodeId);
+        const node = selectInvocationNodeSafe(nodesSlice, nodeId);
+        if (!node) {
+          return fieldName;
+        }
         const instance = node.data.inputs[fieldName];
         const nodeTemplate = templates[node.data.type];
         const fieldTemplate = nodeTemplate?.inputs[fieldName];

diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldTemplateExists.ts b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldTemplateExists.ts
@@ -2,7 +2,7 @@ import { useStore } from '@nanostores/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
 import { $templates } from 'features/nodes/store/nodesSlice';
-import { selectInvocationNode, selectNodesSlice } from 'features/nodes/store/selectors';
+import { selectInvocationNodeSafe, selectNodesSlice } from 'features/nodes/store/selectors';
 import { useMemo } from 'react';
 
 export const useInputFieldTemplateExists = (nodeId: string, fieldName: string) => {
@@ -11,7 +11,10 @@ export const useInputFieldTemplateExists = (nodeId: string, fieldName: string) =
   const selector = useMemo(
     () =>
       createSelector(selectNodesSlice, (nodesSlice) => {
-        const node = selectInvocationNode(nodesSlice, nodeId);
+        const node = selectInvocationNodeSafe(nodesSlice, nodeId);
+        if (!node) {
+          return false;
+        }
         const nodeTemplate = templates[node.data.type];
         const fieldTemplate = nodeTemplate?.inputs[fieldName];
         return Boolean(fieldTemplate);

diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useOutputFieldTemplateExists.ts b/invokeai/frontend/web/src/features/nodes/hooks/useOutputFieldTemplateExists.ts
@@ -2,7 +2,7 @@ import { useStore } from '@nanostores/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
 import { $templates } from 'features/nodes/store/nodesSlice';
-import { selectInvocationNode, selectNodesSlice } from 'features/nodes/store/selectors';
+import { selectInvocationNodeSafe, selectNodesSlice } from 'features/nodes/store/selectors';
 import { useMemo } from 'react';
 
 export const useOutputFieldTemplateExists = (nodeId: string, fieldName: string) => {
@@ -11,7 +11,10 @@ export const useOutputFieldTemplateExists = (nodeId: string, fieldName: string)
   const selector = useMemo(
     () =>
       createSelector(selectNodesSlice, (nodesSlice) => {
-        const node = selectInvocationNode(nodesSlice, nodeId);
+        const node = selectInvocationNodeSafe(nodesSlice, nodeId);
+        if (!node) {
+          return false;
+        }
         const nodeTemplate = templates[node.data.type];
         const fieldTemplate = nodeTemplate?.outputs[fieldName];
         return Boolean(fieldTemplate);

diff --git a/invokeai/frontend/web/src/features/nodes/store/selectors.ts b/invokeai/frontend/web/src/features/nodes/store/selectors.ts
@@ -19,6 +19,14 @@ export const selectInvocationNode = (nodesSlice: NodesState, nodeId: string): In
   return node;
 };
 
+export const selectInvocationNodeSafe = (nodesSlice: NodesState, nodeId: string): InvocationNode | undefined => {
+  const node = nodesSlice.nodes.find((node) => node.id === nodeId);
+  if (!isInvocationNode(node)) {
+    return undefined;
+  }
+  return node;
+};
+
 export const selectInvocationNodeType = (nodesSlice: NodesState, nodeId: string): string => {
   const node = selectInvocationNode(nodesSlice, nodeId);
   return node.data.type;