feat(ui): handle node versions

- Node versions are now added to node templates
- Node data (including in workflows) include the version of the node
- On loading a workflow, we check to see if the node and template versions match exactly. If not, a warning is logged to console.
- The node info icon (top-right corner of node, which you may click to open the notes editor) now shows the version and mentions any issues.
- Some workflow validation logic has been shifted around and is now executed in a redux listener.

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

@@ -3,6 +3,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import { $flow } from 'features/nodes/store/reactFlowInstance';
 import { contextMenusClosed } from 'features/ui/store/uiSlice';
 import { useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -13,6 +14,7 @@ import {
   OnConnectStart,
   OnEdgesChange,
   OnEdgesDelete,
+  OnInit,
   OnMoveEnd,
   OnNodesChange,
   OnNodesDelete,
@@ -147,6 +149,11 @@ export const Flow = () => {
     dispatch(contextMenusClosed());
   }, [dispatch]);
 
+  const onInit: OnInit = useCallback((flow) => {
+    $flow.set(flow);
+    flow.fitView();
+  }, []);
+
   useHotkeys(['Ctrl+c', 'Meta+c'], (e) => {
     e.preventDefault();
     dispatch(selectionCopied());
@@ -170,6 +177,7 @@ export const Flow = () => {
       edgeTypes={edgeTypes}
       nodes={nodes}
       edges={edges}
+      onInit={onInit}
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
       onEdgesDelete={onEdgesDelete}

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

@@ -12,6 +12,7 @@ import {
   Tooltip,
   useDisclosure,
 } from '@chakra-ui/react';
+import { compare } from 'compare-versions';
 import { useNodeData } from 'features/nodes/hooks/useNodeData';
 import { useNodeLabel } from 'features/nodes/hooks/useNodeLabel';
 import { useNodeTemplate } from 'features/nodes/hooks/useNodeTemplate';
@@ -20,6 +21,7 @@ import { isInvocationNodeData } from 'features/nodes/types/types';
 import { memo, useMemo } from 'react';
 import { FaInfoCircle } from 'react-icons/fa';
 import NotesTextarea from './NotesTextarea';
+import { useDoNodeVersionsMatch } from 'features/nodes/hooks/useDoNodeVersionsMatch';
 
 interface Props {
   nodeId: string;
@@ -29,6 +31,7 @@ const InvocationNodeNotes = ({ nodeId }: Props) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const label = useNodeLabel(nodeId);
   const title = useNodeTemplateTitle(nodeId);
+  const doVersionsMatch = useDoNodeVersionsMatch(nodeId);
 
   return (
     <>
@@ -50,7 +53,11 @@ const InvocationNodeNotes = ({ nodeId }: Props) => {
         >
           <Icon
             as={FaInfoCircle}
-            sx={{ boxSize: 4, w: 8, color: 'base.400' }}
+            sx={{
+              boxSize: 4,
+              w: 8,
+              color: doVersionsMatch ? 'base.400' : 'error.400',
+            }}
           />
         </Flex>
       </Tooltip>
@@ -92,16 +99,59 @@ const TooltipContent = memo(({ nodeId }: { nodeId: string }) => {
     return 'Unknown Node';
   }, [data, nodeTemplate]);
 
+  const versionComponent = useMemo(() => {
+    if (!isInvocationNodeData(data) || !nodeTemplate) {
+      return null;
+    }
+
+    if (!data.version) {
+      return (
+        <Text as="span" sx={{ color: 'error.500' }}>
+          Version unknown
+        </Text>
+      );
+    }
+
+    if (!nodeTemplate.version) {
+      return (
+        <Text as="span" sx={{ color: 'error.500' }}>
+          Version {data.version} (unknown template)
+        </Text>
+      );
+    }
+
+    if (compare(data.version, nodeTemplate.version, '<')) {
+      return (
+        <Text as="span" sx={{ color: 'error.500' }}>
+          Version {data.version} (update node)
+        </Text>
+      );
+    }
+
+    if (compare(data.version, nodeTemplate.version, '>')) {
+      return (
+        <Text as="span" sx={{ color: 'error.500' }}>
+          Version {data.version} (update app)
+        </Text>
+      );
+    }
+
+    return <Text as="span">Version {data.version}</Text>;
+  }, [data, nodeTemplate]);
+
   if (!isInvocationNodeData(data)) {
     return <Text sx={{ fontWeight: 600 }}>Unknown Node</Text>;
   }
 
   return (
     <Flex sx={{ flexDir: 'column' }}>
-      <Text sx={{ fontWeight: 600 }}>{title}</Text>
+      <Text as="span" sx={{ fontWeight: 600 }}>
+        {title}
+      </Text>
       <Text sx={{ opacity: 0.7, fontStyle: 'oblique 5deg' }}>
         {nodeTemplate?.description}
       </Text>
+      {versionComponent}
       {data?.notes && <Text>{data.notes}</Text>}
     </Flex>
   );

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

@@ -138,13 +138,14 @@ export const useBuildNodeData = () => {
         data: {
           id: nodeId,
           type,
-          inputs,
-          outputs,
-          isOpen: true,
+          version: template.version,
           label: '',
           notes: '',
+          isOpen: true,
           embedWorkflow: false,
           isIntermediate: true,
+          inputs,
+          outputs,
         },
       };
 

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

@@ -0,0 +1,33 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { stateSelector } from 'app/store/store';
+import { useAppSelector } from 'app/store/storeHooks';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import { compareVersions } from 'compare-versions';
+import { useMemo } from 'react';
+import { isInvocationNode } from '../types/types';
+
+export const useDoNodeVersionsMatch = (nodeId: string) => {
+  const selector = useMemo(
+    () =>
+      createSelector(
+        stateSelector,
+        ({ nodes }) => {
+          const node = nodes.nodes.find((node) => node.id === nodeId);
+          if (!isInvocationNode(node)) {
+            return false;
+          }
+          const nodeTemplate = nodes.nodeTemplates[node?.data.type ?? ''];
+          if (!nodeTemplate?.version || !node.data?.version) {
+            return false;
+          }
+          return compareVersions(nodeTemplate.version, node.data.version) === 0;
+        },
+        defaultSelectorOptions
+      ),
+    [nodeId]
+  );
+
+  const nodeTemplate = useAppSelector(selector);
+
+  return nodeTemplate;
+};

invokeai/frontend/web/src/features/nodes/hooks/useLoadWorkflowFromFile.tsx

@@ -2,13 +2,13 @@ import { ListItem, Text, UnorderedList } from '@chakra-ui/react';
 import { useLogger } from 'app/logging/useLogger';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { parseify } from 'common/util/serialize';
-import { workflowLoaded } from 'features/nodes/store/nodesSlice';
-import { zValidatedWorkflow } from 'features/nodes/types/types';
+import { zWorkflow } from 'features/nodes/types/types';
 import { addToast } from 'features/system/store/systemSlice';
 import { makeToast } from 'features/system/util/makeToast';
 import { memo, useCallback } from 'react';
 import { ZodError } from 'zod';
 import { fromZodError, fromZodIssue } from 'zod-validation-error';
+import { workflowLoadRequested } from '../store/actions';
 
 export const useLoadWorkflowFromFile = () => {
   const dispatch = useAppDispatch();
@@ -24,7 +24,7 @@ export const useLoadWorkflowFromFile = () => {
 
         try {
           const parsedJSON = JSON.parse(String(rawJSON));
-          const result = zValidatedWorkflow.safeParse(parsedJSON);
+          const result = zWorkflow.safeParse(parsedJSON);
 
           if (!result.success) {
             const { message } = fromZodError(result.error, {
@@ -45,32 +45,8 @@ export const useLoadWorkflowFromFile = () => {
             reader.abort();
             return;
           }
-          dispatch(workflowLoaded(result.data.workflow));
 
-          if (!result.data.warnings.length) {
-            dispatch(
-              addToast(
-                makeToast({
-                  title: 'Workflow Loaded',
-                  status: 'success',
-                })
-              )
-            );
-            reader.abort();
-            return;
-          }
-
-          dispatch(
-            addToast(
-              makeToast({
-                title: 'Workflow Loaded with Warnings',
-                status: 'warning',
-              })
-            )
-          );
-          result.data.warnings.forEach(({ message, ...rest }) => {
-            logger.warn(rest, message);
-          });
+          dispatch(workflowLoadRequested(result.data));
 
           reader.abort();
         } catch {

invokeai/frontend/web/src/features/nodes/store/actions.ts

@@ -1,5 +1,6 @@
 import { createAction, isAnyOf } from '@reduxjs/toolkit';
 import { Graph } from 'services/api/types';
+import { Workflow } from '../types/types';
 
 export const textToImageGraphBuilt = createAction<Graph>(
   'nodes/textToImageGraphBuilt'
@@ -16,3 +17,7 @@ export const isAnyGraphBuilt = isAnyOf(
   canvasGraphBuilt,
   nodesGraphBuilt
 );
+
+export const workflowLoadRequested = createAction<Workflow>(
+  'nodes/workflowLoadRequested'
+);

invokeai/frontend/web/src/features/nodes/store/reactFlowInstance.ts

@@ -0,0 +1,4 @@
+import { atom } from 'nanostores';
+import { ReactFlowInstance } from 'reactflow';
+
+export const $flow = atom<ReactFlowInstance | null>(null);

invokeai/frontend/web/src/features/nodes/types/types.ts

@@ -52,6 +52,10 @@ export type InvocationTemplate = {
    * The type of this node's output
    */
   outputType: string; // TODO: generate a union of output types
+  /**
+   * The invocation's version.
+   */
+  version?: string;
 };
 
 export type FieldUIConfig = {
@@ -962,6 +966,7 @@ export type InvocationSchemaExtra = {
   title: string;
   category?: string;
   tags?: string[];
+  version?: string;
   properties: Omit<
     NonNullable<OpenAPIV3.SchemaObject['properties']> &
       (_InputField | _OutputField),
@@ -1095,6 +1100,29 @@ export const zCoreMetadata = z
 
 export type CoreMetadata = z.infer<typeof zCoreMetadata>;
 
+export const zSemVer = z.string().refine((val) => {
+  const [major, minor, patch] = val.split('.');
+  return (
+    major !== undefined &&
+    Number.isInteger(Number(major)) &&
+    minor !== undefined &&
+    Number.isInteger(Number(minor)) &&
+    patch !== undefined &&
+    Number.isInteger(Number(patch))
+  );
+});
+
+export const zParsedSemver = zSemVer.transform((val) => {
+  const [major, minor, patch] = val.split('.');
+  return {
+    major: Number(major),
+    minor: Number(minor),
+    patch: Number(patch),
+  };
+});
+
+export type SemVer = z.infer<typeof zSemVer>;
+
 export const zInvocationNodeData = z.object({
   id: z.string().trim().min(1),
   // no easy way to build this dynamically, and we don't want to anyways, because this will be used
@@ -1107,6 +1135,7 @@ export const zInvocationNodeData = z.object({
   notes: z.string(),
   embedWorkflow: z.boolean(),
   isIntermediate: z.boolean(),
+  version: zSemVer.optional(),
 });
 
 // Massage this to get better type safety while developing
@@ -1195,20 +1224,6 @@ export const zFieldIdentifier = z.object({
 
 export type FieldIdentifier = z.infer<typeof zFieldIdentifier>;
 
-export const zSemVer = z.string().refine((val) => {
-  const [major, minor, patch] = val.split('.');
-  return (
-    major !== undefined &&
-    minor !== undefined &&
-    patch !== undefined &&
-    Number.isInteger(Number(major)) &&
-    Number.isInteger(Number(minor)) &&
-    Number.isInteger(Number(patch))
-  );
-});
-
-export type SemVer = z.infer<typeof zSemVer>;
-
 export type WorkflowWarning = {
   message: string;
   issues: string[];

invokeai/frontend/web/src/features/nodes/util/parseSchema.ts

@@ -73,6 +73,7 @@ export const parseSchema = (
     const title = schema.title.replace('Invocation', '');
     const tags = schema.tags ?? [];
     const description = schema.description ?? '';
+    const version = schema.version ?? '';
 
     const inputs = reduce(
       schema.properties,
@@ -225,11 +226,12 @@ export const parseSchema = (
     const invocation: InvocationTemplate = {
       title,
       type,
+      version,
       tags,
       description,
+      outputType,
       inputs,
       outputs,
-      outputType,
     };
 
     Object.assign(invocationsAccumulator, { [type]: invocation });

invokeai/frontend/web/src/features/nodes/util/validateWorkflow.ts

@@ -0,0 +1,96 @@
+import { compareVersions } from 'compare-versions';
+import { cloneDeep, keyBy } from 'lodash-es';
+import {
+  InvocationTemplate,
+  Workflow,
+  WorkflowWarning,
+  isWorkflowInvocationNode,
+} from '../types/types';
+import { parseify } from 'common/util/serialize';
+
+export const validateWorkflow = (
+  workflow: Workflow,
+  nodeTemplates: Record<string, InvocationTemplate>
+) => {
+  const clone = cloneDeep(workflow);
+  const { nodes, edges } = clone;
+  const errors: WorkflowWarning[] = [];
+  const invocationNodes = nodes.filter(isWorkflowInvocationNode);
+  const keyedNodes = keyBy(invocationNodes, 'id');
+  nodes.forEach((node) => {
+    if (!isWorkflowInvocationNode(node)) {
+      return;
+    }
+
+    const nodeTemplate = nodeTemplates[node.data.type];
+    if (!nodeTemplate) {
+      errors.push({
+        message: `Node "${node.data.type}" skipped`,
+        issues: [`Node type "${node.data.type}" does not exist`],
+        data: node,
+      });
+      return;
+    }
+
+    if (
+      nodeTemplate.version &&
+      node.data.version &&
+      compareVersions(nodeTemplate.version, node.data.version) !== 0
+    ) {
+      errors.push({
+        message: `Node "${node.data.type}" has mismatched version`,
+        issues: [
+          `Node "${node.data.type}" v${node.data.version} may be incompatible with installed v${nodeTemplate.version}`,
+        ],
+        data: { node, nodeTemplate: parseify(nodeTemplate) },
+      });
+      return;
+    }
+  });
+  edges.forEach((edge, i) => {
+    const sourceNode = keyedNodes[edge.source];
+    const targetNode = keyedNodes[edge.target];
+    const issues: string[] = [];
+    if (!sourceNode) {
+      issues.push(`Output node ${edge.source} does not exist`);
+    } else if (
+      edge.type === 'default' &&
+      !(edge.sourceHandle in sourceNode.data.outputs)
+    ) {
+      issues.push(
+        `Output field "${edge.source}.${edge.sourceHandle}" does not exist`
+      );
+    }
+    if (!targetNode) {
+      issues.push(`Input node ${edge.target} does not exist`);
+    } else if (
+      edge.type === 'default' &&
+      !(edge.targetHandle in targetNode.data.inputs)
+    ) {
+      issues.push(
+        `Input field "${edge.target}.${edge.targetHandle}" does not exist`
+      );
+    }
+    if (!nodeTemplates[sourceNode?.data.type ?? '__UNKNOWN_NODE_TYPE__']) {
+      issues.push(
+        `Source node "${edge.source}" missing template "${sourceNode?.data.type}"`
+      );
+    }
+    if (!nodeTemplates[targetNode?.data.type ?? '__UNKNOWN_NODE_TYPE__']) {
+      issues.push(
+        `Source node "${edge.target}" missing template "${targetNode?.data.type}"`
+      );
+    }
+    if (issues.length) {
+      delete edges[i];
+      const src = edge.type === 'default' ? edge.sourceHandle : edge.source;
+      const tgt = edge.type === 'default' ? edge.targetHandle : edge.target;
+      errors.push({
+        message: `Edge "${src} -> ${tgt}" skipped`,
+        issues,
+        data: edge,
+      });
+    }
+  });
+  return { workflow: clone, errors };
+};