feat(ui): move invocation templates out of redux

Templates are stored in nanostores. All hooks, selectors, etc are reworked to reference the nanostore.

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

@@ -1,31 +1,19 @@
-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';
+import { useNodeTemplate } from 'features/nodes/hooks/useNodeTemplate';
 import { getSortedFilteredFieldNames } from 'features/nodes/util/node/getSortedFilteredFieldNames';
 import { TEMPLATE_BUILDER_MAP } from 'features/nodes/util/schema/buildFieldInputTemplate';
 import { keys, map } from 'lodash-es';
 import { useMemo } from 'react';
 
 export const useAnyOrDirectInputFieldNames = (nodeId: string): string[] => {
-  const selector = useMemo(
-    () =>
-      createMemoizedSelector(selectNodesSlice, (nodes) => {
-        const template = selectNodeTemplate(nodes, nodeId);
-        if (!template) {
-          return EMPTY_ARRAY;
-        }
-        const fields = map(template.inputs).filter(
-          (field) =>
-            (['any', 'direct'].includes(field.input) || field.type.isCollectionOrScalar) &&
-            keys(TEMPLATE_BUILDER_MAP).includes(field.type.name)
-        );
-        return getSortedFilteredFieldNames(fields);
-      }),
-    [nodeId]
-  );
+  const template = useNodeTemplate(nodeId);
+  const fieldNames = useMemo(() => {
+    const fields = map(template.inputs).filter(
+      (field) =>
+        (['any', 'direct'].includes(field.input) || field.type.isCollectionOrScalar) &&
+        keys(TEMPLATE_BUILDER_MAP).includes(field.type.name)
+    );
+    return getSortedFilteredFieldNames(fields);
+  }, [template]);
 
-  const fieldNames = useAppSelector(selector);
   return fieldNames;
 };

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

@@ -1,34 +1,20 @@
-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';
+import { useNodeTemplate } from 'features/nodes/hooks/useNodeTemplate';
 import { getSortedFilteredFieldNames } from 'features/nodes/util/node/getSortedFilteredFieldNames';
 import { TEMPLATE_BUILDER_MAP } from 'features/nodes/util/schema/buildFieldInputTemplate';
 import { keys, map } from 'lodash-es';
 import { useMemo } from 'react';
 
 export const useConnectionInputFieldNames = (nodeId: string): string[] => {
-  const selector = useMemo(
-    () =>
-      createMemoizedSelector(selectNodesSlice, (nodes) => {
-        const template = selectNodeTemplate(nodes, nodeId);
-        if (!template) {
-          return EMPTY_ARRAY;
-        }
+  const template = useNodeTemplate(nodeId);
+  const fieldNames = useMemo(() => {
+    // get the visible fields
+    const fields = map(template.inputs).filter(
+      (field) =>
+        (field.input === 'connection' && !field.type.isCollectionOrScalar) ||
+        !keys(TEMPLATE_BUILDER_MAP).includes(field.type.name)
+    );
 
-        // get the visible fields
-        const fields = map(template.inputs).filter(
-          (field) =>
-            (field.input === 'connection' && !field.type.isCollectionOrScalar) ||
-            !keys(TEMPLATE_BUILDER_MAP).includes(field.type.name)
-        );
-
-        return getSortedFilteredFieldNames(fields);
-      }),
-    [nodeId]
-  );
-
-  const fieldNames = useAppSelector(selector);
+    return getSortedFilteredFieldNames(fields);
+  }, [template]);
   return fieldNames;
 };

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

@@ -1,20 +1,9 @@
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { useAppSelector } from 'app/store/storeHooks';
-import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
-import { selectFieldInputTemplate } from 'features/nodes/store/selectors';
+import { useNodeTemplate } from 'features/nodes/hooks/useNodeTemplate';
 import type { FieldInputTemplate } from 'features/nodes/types/field';
 import { useMemo } from 'react';
 
 export const useFieldInputTemplate = (nodeId: string, fieldName: string): FieldInputTemplate | null => {
-  const selector = useMemo(
-    () =>
-      createMemoizedSelector(selectNodesSlice, (nodes) => {
-        return selectFieldInputTemplate(nodes, nodeId, fieldName);
-      }),
-    [fieldName, nodeId]
-  );
-
-  const fieldTemplate = useAppSelector(selector);
-
+  const template = useNodeTemplate(nodeId);
+  const fieldTemplate = useMemo(() => template.inputs[fieldName] ?? null, [fieldName, template.inputs]);
   return fieldTemplate;
 };

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

@@ -1,20 +1,9 @@
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { useAppSelector } from 'app/store/storeHooks';
-import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
-import { selectFieldOutputTemplate } from 'features/nodes/store/selectors';
+import { useNodeTemplate } from 'features/nodes/hooks/useNodeTemplate';
 import type { FieldOutputTemplate } from 'features/nodes/types/field';
 import { useMemo } from 'react';
 
 export const useFieldOutputTemplate = (nodeId: string, fieldName: string): FieldOutputTemplate | null => {
-  const selector = useMemo(
-    () =>
-      createMemoizedSelector(selectNodesSlice, (nodes) => {
-        return selectFieldOutputTemplate(nodes, nodeId, fieldName);
-      }),
-    [fieldName, nodeId]
-  );
-
-  const fieldTemplate = useAppSelector(selector);
-
+  const template = useNodeTemplate(nodeId);
+  const fieldTemplate = useMemo(() => template.outputs[fieldName] ?? null, [fieldName, template.outputs]);
   return fieldTemplate;
 };

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

@@ -1,27 +1,36 @@
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
+import { useStore } from '@nanostores/react';
+import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
-import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
-import { selectFieldInputTemplate, selectFieldOutputTemplate } from 'features/nodes/store/selectors';
+import { $templates, selectNodesSlice } from 'features/nodes/store/nodesSlice';
+import { selectInvocationNodeType } from 'features/nodes/store/selectors';
 import type { FieldInputTemplate, FieldOutputTemplate } from 'features/nodes/types/field';
 import { useMemo } from 'react';
+import { assert } from 'tsafe';
 
 export const useFieldTemplate = (
   nodeId: string,
   fieldName: string,
   kind: 'inputs' | 'outputs'
-): FieldInputTemplate | FieldOutputTemplate | null => {
-  const selector = useMemo(
-    () =>
-      createMemoizedSelector(selectNodesSlice, (nodes) => {
-        if (kind === 'inputs') {
-          return selectFieldInputTemplate(nodes, nodeId, fieldName);
-        }
-        return selectFieldOutputTemplate(nodes, nodeId, fieldName);
-      }),
-    [fieldName, kind, nodeId]
+): FieldInputTemplate | FieldOutputTemplate => {
+  const templates = useStore($templates);
+  const selectNodeType = useMemo(
+    () => createSelector(selectNodesSlice, (nodes) => selectInvocationNodeType(nodes, nodeId)),
+    [nodeId]
   );
-
-  const fieldTemplate = useAppSelector(selector);
+  const nodeType = useAppSelector(selectNodeType);
+  const fieldTemplate = useMemo(() => {
+    const template = templates[nodeType];
+    assert(template, `Template for node type ${nodeType} not found`);
+    if (kind === 'inputs') {
+      const fieldTemplate = template.inputs[fieldName];
+      assert(fieldTemplate, `Field template for field ${fieldName} not found`);
+      return fieldTemplate;
+    } else {
+      const fieldTemplate = template.outputs[fieldName];
+      assert(fieldTemplate, `Field template for field ${fieldName} not found`);
+      return fieldTemplate;
+    }
+  }, [fieldName, kind, nodeType, templates]);
 
   return fieldTemplate;
 };

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

@@ -1,22 +1,8 @@
-import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/store/storeHooks';
-import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
-import { selectFieldInputTemplate, selectFieldOutputTemplate } from 'features/nodes/store/selectors';
+import { useFieldTemplate } from 'features/nodes/hooks/useFieldTemplate';
 import { useMemo } from 'react';
 
 export const useFieldTemplateTitle = (nodeId: string, fieldName: string, kind: 'inputs' | 'outputs'): string | null => {
-  const selector = useMemo(
-    () =>
-      createSelector(selectNodesSlice, (nodes) => {
-        if (kind === 'inputs') {
-          return selectFieldInputTemplate(nodes, nodeId, fieldName)?.title ?? null;
-        }
-        return selectFieldOutputTemplate(nodes, nodeId, fieldName)?.title ?? null;
-      }),
-    [fieldName, kind, nodeId]
-  );
-
-  const fieldTemplateTitle = useAppSelector(selector);
-
+  const fieldTemplate = useFieldTemplate(nodeId, fieldName, kind);
+  const fieldTemplateTitle = useMemo(() => fieldTemplate.title, [fieldTemplate]);
   return fieldTemplateTitle;
 };

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

@@ -1,23 +1,9 @@
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { useAppSelector } from 'app/store/storeHooks';
-import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
-import { selectFieldInputTemplate, selectFieldOutputTemplate } from 'features/nodes/store/selectors';
+import { useFieldTemplate } from 'features/nodes/hooks/useFieldTemplate';
 import type { FieldType } from 'features/nodes/types/field';
 import { useMemo } from 'react';
 
-export const useFieldType = (nodeId: string, fieldName: string, kind: 'inputs' | 'outputs'): FieldType | null => {
-  const selector = useMemo(
-    () =>
-      createMemoizedSelector(selectNodesSlice, (nodes) => {
-        if (kind === 'inputs') {
-          return selectFieldInputTemplate(nodes, nodeId, fieldName)?.type ?? null;
-        }
-        return selectFieldOutputTemplate(nodes, nodeId, fieldName)?.type ?? null;
-      }),
-    [fieldName, kind, nodeId]
-  );
-
-  const fieldType = useAppSelector(selector);
-
+export const useFieldType = (nodeId: string, fieldName: string, kind: 'inputs' | 'outputs'): FieldType => {
+  const fieldTemplate = useFieldTemplate(nodeId, fieldName, kind);
+  const fieldType = useMemo(() => fieldTemplate.type, [fieldTemplate]);
   return fieldType;
 };

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

@@ -16,7 +16,7 @@ export const useGetNodesNeedUpdate = () => {
           if (!template) {
             return false;
           }
-          return getNeedsUpdate(node, template);
+          return getNeedsUpdate(node.data, template);
         })
       ),
     [templates]

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

@@ -1,26 +1,20 @@
-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';
+import { useNodeTemplate } from 'features/nodes/hooks/useNodeTemplate';
 import { some } from 'lodash-es';
 import { useMemo } from 'react';
 
 export const useHasImageOutput = (nodeId: string): boolean => {
-  const selector = useMemo(
+  const template = useNodeTemplate(nodeId);
+  const hasImageOutput = useMemo(
     () =>
-      createMemoizedSelector(selectNodesSlice, (nodes) => {
-        const template = selectNodeTemplate(nodes, nodeId);
-        return some(
-          template?.outputs,
-          (output) =>
-            output.type.name === 'ImageField' &&
-            // the image primitive node (node type "image") does not actually save the image, do not show the image-saving checkboxes
-            template?.type !== 'image'
-        );
-      }),
-    [nodeId]
+      some(
+        template?.outputs,
+        (output) =>
+          output.type.name === 'ImageField' &&
+          // the image primitive node (node type "image") does not actually save the image, do not show the image-saving checkboxes
+          template?.type !== 'image'
+      ),
+    [template]
   );
 
-  const hasImageOutput = useAppSelector(selector);
   return hasImageOutput;
 };

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

@@ -1,19 +1,9 @@
-import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/store/storeHooks';
-import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
-import { selectNodeTemplate } from 'features/nodes/store/selectors';
+import { useNodeTemplate } from 'features/nodes/hooks/useNodeTemplate';
 import type { Classification } from 'features/nodes/types/common';
 import { useMemo } from 'react';
 
-export const useNodeClassification = (nodeId: string): Classification | null => {
-  const selector = useMemo(
-    () =>
-      createSelector(selectNodesSlice, (nodes) => {
-        return selectNodeTemplate(nodes, nodeId)?.classification ?? null;
-      }),
-    [nodeId]
-  );
-
-  const title = useAppSelector(selector);
-  return title;
+export const useNodeClassification = (nodeId: string): Classification => {
+  const template = useNodeTemplate(nodeId);
+  const classification = useMemo(() => template.classification, [template]);
+  return classification;
 };

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

@@ -5,7 +5,7 @@ import { selectNodeData } from 'features/nodes/store/selectors';
 import type { InvocationNodeData } from 'features/nodes/types/invocation';
 import { useMemo } from 'react';
 
-export const useNodeData = (nodeId: string): InvocationNodeData | null => {
+export const useNodeData = (nodeId: string): InvocationNodeData => {
   const selector = useMemo(
     () =>
       createMemoizedSelector(selectNodesSlice, (nodes) => {

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

@@ -1,25 +1,11 @@
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { useAppSelector } from 'app/store/storeHooks';
-import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
-import { selectInvocationNode, selectNodeTemplate } from 'features/nodes/store/selectors';
+import { useNodeData } from 'features/nodes/hooks/useNodeData';
+import { useNodeTemplate } from 'features/nodes/hooks/useNodeTemplate';
 import { getNeedsUpdate } from 'features/nodes/util/node/nodeUpdate';
 import { useMemo } from 'react';
 
 export const useNodeNeedsUpdate = (nodeId: string) => {
-  const selector = useMemo(
-    () =>
-      createMemoizedSelector(selectNodesSlice, (nodes) => {
-        const node = selectInvocationNode(nodes, nodeId);
-        const template = selectNodeTemplate(nodes, nodeId);
-        if (!node || !template) {
-          return false;
-        }
-        return getNeedsUpdate(node, template);
-      }),
-    [nodeId]
-  );
-
-  const needsUpdate = useAppSelector(selector);
-
+  const data = useNodeData(nodeId);
+  const template = useNodeTemplate(nodeId);
+  const needsUpdate = useMemo(() => getNeedsUpdate(data, template), [data, template]);
   return needsUpdate;
 };

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

@@ -1,20 +1,23 @@
+import { useStore } from '@nanostores/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
-import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
-import { selectNodeTemplate } from 'features/nodes/store/selectors';
+import { $templates, selectNodesSlice } from 'features/nodes/store/nodesSlice';
+import { selectInvocationNodeType } from 'features/nodes/store/selectors';
 import type { InvocationTemplate } from 'features/nodes/types/invocation';
 import { useMemo } from 'react';
+import { assert } from 'tsafe';
 
-export const useNodeTemplate = (nodeId: string): InvocationTemplate | null => {
-  const selector = useMemo(
-    () =>
-      createSelector(selectNodesSlice, (nodes) => {
-        return selectNodeTemplate(nodes, nodeId);
-      }),
+export const useNodeTemplate = (nodeId: string): InvocationTemplate => {
+  const templates = useStore($templates);
+  const selectNodeType = useMemo(
+    () => createSelector(selectNodesSlice, (nodes) => selectInvocationNodeType(nodes, nodeId)),
     [nodeId]
   );
-
-  const nodeTemplate = useAppSelector(selector);
-
-  return nodeTemplate;
+  const nodeType = useAppSelector(selectNodeType);
+  const template = useMemo(() => {
+    const t = templates[nodeType];
+    assert(t, `Template for node type ${nodeType} not found`);
+    return t;
+  }, [nodeType, templates]);
+  return template;
 };

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

@@ -1,18 +1,8 @@
-import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/store/storeHooks';
-import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
-import { selectNodeTemplate } from 'features/nodes/store/selectors';
+import { useNodeTemplate } from 'features/nodes/hooks/useNodeTemplate';
 import { useMemo } from 'react';
 
 export const useNodeTemplateTitle = (nodeId: string): string | null => {
-  const selector = useMemo(
-    () =>
-      createSelector(selectNodesSlice, (nodes) => {
-        return selectNodeTemplate(nodes, nodeId)?.title ?? null;
-      }),
-    [nodeId]
-  );
-
-  const title = useAppSelector(selector);
+  const template = useNodeTemplate(nodeId);
+  const title = useMemo(() => template.title, [template.title]);
   return title;
 };

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

@@ -1,26 +1,10 @@
-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';
+import { useNodeTemplate } from 'features/nodes/hooks/useNodeTemplate';
 import { getSortedFilteredFieldNames } from 'features/nodes/util/node/getSortedFilteredFieldNames';
 import { map } from 'lodash-es';
 import { useMemo } from 'react';
 
-export const useOutputFieldNames = (nodeId: string) => {
-  const selector = useMemo(
-    () =>
-      createMemoizedSelector(selectNodesSlice, (nodes) => {
-        const template = selectNodeTemplate(nodes, nodeId);
-        if (!template) {
-          return EMPTY_ARRAY;
-        }
-
-        return getSortedFilteredFieldNames(map(template.outputs));
-      }),
-    [nodeId]
-  );
-
-  const fieldNames = useAppSelector(selector);
+export const useOutputFieldNames = (nodeId: string): string[] => {
+  const template = useNodeTemplate(nodeId);
+  const fieldNames = useMemo(() => getSortedFilteredFieldNames(map(template.outputs)), [template.outputs]);
   return fieldNames;
 };