feat(ui): store node templates in separate slice

Flattens the `nodes` slice. May offer minor perf improvements in addition to just being cleaner.

invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx

@@ -74,57 +74,60 @@ const AddNodePopover = () => {
     (state) => state.nodes.connectionStartParams?.handleType
   );
 
-  const selector = createMemoizedSelector([stateSelector], ({ nodes }) => {
-    // If we have a connection in progress, we need to filter the node choices
-    const filteredNodeTemplates = fieldFilter
-      ? filter(nodes.nodeTemplates, (template) => {
-          const handles =
-            handleFilter == 'source' ? template.inputs : template.outputs;
+  const selector = createMemoizedSelector(
+    [stateSelector],
+    ({ nodeTemplates }) => {
+      // If we have a connection in progress, we need to filter the node choices
+      const filteredNodeTemplates = fieldFilter
+        ? filter(nodeTemplates.templates, (template) => {
+            const handles =
+              handleFilter == 'source' ? template.inputs : template.outputs;
 
-          return some(handles, (handle) => {
-            const sourceType =
-              handleFilter == 'source' ? fieldFilter : handle.type;
-            const targetType =
-              handleFilter == 'target' ? fieldFilter : handle.type;
+            return some(handles, (handle) => {
+              const sourceType =
+                handleFilter == 'source' ? fieldFilter : handle.type;
+              const targetType =
+                handleFilter == 'target' ? fieldFilter : handle.type;
 
-            return validateSourceAndTargetTypes(sourceType, targetType);
-          });
-        })
-      : map(nodes.nodeTemplates);
+              return validateSourceAndTargetTypes(sourceType, targetType);
+            });
+          })
+        : map(nodeTemplates.templates);
 
-    const options: InvSelectOption[] = map(
-      filteredNodeTemplates,
-      (template) => {
-        return {
-          label: template.title,
-          value: template.type,
-          description: template.description,
-          tags: template.tags,
-        };
+      const options: InvSelectOption[] = map(
+        filteredNodeTemplates,
+        (template) => {
+          return {
+            label: template.title,
+            value: template.type,
+            description: template.description,
+            tags: template.tags,
+          };
+        }
+      );
+
+      //We only want these nodes if we're not filtered
+      if (fieldFilter === null) {
+        options.push({
+          label: t('nodes.currentImage'),
+          value: 'current_image',
+          description: t('nodes.currentImageDescription'),
+          tags: ['progress'],
+        });
+
+        options.push({
+          label: t('nodes.notes'),
+          value: 'notes',
+          description: t('nodes.notesDescription'),
+          tags: ['notes'],
+        });
       }
-    );
 
-    //We only want these nodes if we're not filtered
-    if (fieldFilter === null) {
-      options.push({
-        label: t('nodes.currentImage'),
-        value: 'current_image',
-        description: t('nodes.currentImageDescription'),
-        tags: ['progress'],
-      });
+      options.sort((a, b) => a.label.localeCompare(b.label));
 
-      options.push({
-        label: t('nodes.notes'),
-        value: 'notes',
-        description: t('nodes.notesDescription'),
-        tags: ['notes'],
-      });
+      return { options };
     }
-
-    options.sort((a, b) => a.label.localeCompare(b.label));
-
-    return { options };
-  });
+  );
 
   const { options } = useAppSelector(selector);
   const isOpen = useAppSelector((state) => state.nodes.isAddNodePopoverOpen);

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

@@ -14,8 +14,8 @@ const InvocationNodeWrapper = (props: NodeProps<InvocationNodeData>) => {
 
   const hasTemplateSelector = useMemo(
     () =>
-      createMemoizedSelector(stateSelector, ({ nodes }) =>
-        Boolean(nodes.nodeTemplates[type])
+      createMemoizedSelector(stateSelector, ({ nodeTemplates }) =>
+        Boolean(nodeTemplates.templates[type])
       ),
     [type]
   );

invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDetailsTab.tsx

@@ -14,28 +14,31 @@ import { useTranslation } from 'react-i18next';
 
 import EditableNodeTitle from './details/EditableNodeTitle';
 
-const selector = createMemoizedSelector(stateSelector, ({ nodes }) => {
-  const lastSelectedNodeId =
-    nodes.selectedNodes[nodes.selectedNodes.length - 1];
+const selector = createMemoizedSelector(
+  stateSelector,
+  ({ nodes, nodeTemplates }) => {
+    const lastSelectedNodeId =
+      nodes.selectedNodes[nodes.selectedNodes.length - 1];
 
-  const lastSelectedNode = nodes.nodes.find(
-    (node) => node.id === lastSelectedNodeId
-  );
+    const lastSelectedNode = nodes.nodes.find(
+      (node) => node.id === lastSelectedNodeId
+    );
 
-  const lastSelectedNodeTemplate = lastSelectedNode
-    ? nodes.nodeTemplates[lastSelectedNode.data.type]
-    : undefined;
+    const lastSelectedNodeTemplate = lastSelectedNode
+      ? nodeTemplates.templates[lastSelectedNode.data.type]
+      : undefined;
 
-  if (!isInvocationNode(lastSelectedNode) || !lastSelectedNodeTemplate) {
-    return;
+    if (!isInvocationNode(lastSelectedNode) || !lastSelectedNodeTemplate) {
+      return;
+    }
+
+    return {
+      nodeId: lastSelectedNode.data.id,
+      nodeVersion: lastSelectedNode.data.version,
+      templateTitle: lastSelectedNodeTemplate.title,
+    };
   }
-
-  return {
-    nodeId: lastSelectedNode.data.id,
-    nodeVersion: lastSelectedNode.data.version,
-    templateTitle: lastSelectedNodeTemplate.title,
-  };
-});
+);
 
 const InspectorDetailsTab = () => {
   const data = useAppSelector(selector);

invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorOutputsTab.tsx

@@ -13,34 +13,37 @@ import type { AnyResult } from 'services/events/types';
 
 import ImageOutputPreview from './outputs/ImageOutputPreview';
 
-const selector = createMemoizedSelector(stateSelector, ({ nodes }) => {
-  const lastSelectedNodeId =
-    nodes.selectedNodes[nodes.selectedNodes.length - 1];
+const selector = createMemoizedSelector(
+  stateSelector,
+  ({ nodes, nodeTemplates }) => {
+    const lastSelectedNodeId =
+      nodes.selectedNodes[nodes.selectedNodes.length - 1];
 
-  const lastSelectedNode = nodes.nodes.find(
-    (node) => node.id === lastSelectedNodeId
-  );
+    const lastSelectedNode = nodes.nodes.find(
+      (node) => node.id === lastSelectedNodeId
+    );
 
-  const lastSelectedNodeTemplate = lastSelectedNode
-    ? nodes.nodeTemplates[lastSelectedNode.data.type]
-    : undefined;
+    const lastSelectedNodeTemplate = lastSelectedNode
+      ? nodeTemplates.templates[lastSelectedNode.data.type]
+      : undefined;
 
-  const nes =
-    nodes.nodeExecutionStates[lastSelectedNodeId ?? '__UNKNOWN_NODE__'];
+    const nes =
+      nodes.nodeExecutionStates[lastSelectedNodeId ?? '__UNKNOWN_NODE__'];
 
-  if (
-    !isInvocationNode(lastSelectedNode) ||
-    !nes ||
-    !lastSelectedNodeTemplate
-  ) {
-    return;
+    if (
+      !isInvocationNode(lastSelectedNode) ||
+      !nes ||
+      !lastSelectedNodeTemplate
+    ) {
+      return;
+    }
+
+    return {
+      outputs: nes.outputs,
+      outputType: lastSelectedNodeTemplate.outputType,
+    };
   }
-
-  return {
-    outputs: nes.outputs,
-    outputType: lastSelectedNodeTemplate.outputType,
-  };
-});
+);
 
 const InspectorOutputsTab = () => {
   const data = useAppSelector(selector);

invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorTemplateTab.tsx

@@ -6,22 +6,25 @@ import DataViewer from 'features/gallery/components/ImageMetadataViewer/DataView
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const selector = createMemoizedSelector(stateSelector, ({ nodes }) => {
-  const lastSelectedNodeId =
-    nodes.selectedNodes[nodes.selectedNodes.length - 1];
+const selector = createMemoizedSelector(
+  stateSelector,
+  ({ nodes, nodeTemplates }) => {
+    const lastSelectedNodeId =
+      nodes.selectedNodes[nodes.selectedNodes.length - 1];
 
-  const lastSelectedNode = nodes.nodes.find(
-    (node) => node.id === lastSelectedNodeId
-  );
+    const lastSelectedNode = nodes.nodes.find(
+      (node) => node.id === lastSelectedNodeId
+    );
 
-  const lastSelectedNodeTemplate = lastSelectedNode
-    ? nodes.nodeTemplates[lastSelectedNode.data.type]
-    : undefined;
+    const lastSelectedNodeTemplate = lastSelectedNode
+      ? nodeTemplates.templates[lastSelectedNode.data.type]
+      : undefined;
 
-  return {
-    template: lastSelectedNodeTemplate,
-  };
-});
+    return {
+      template: lastSelectedNodeTemplate,
+    };
+  }
+);
 
 const NodeTemplateInspector = () => {
   const { template } = useAppSelector(selector);