fix(ui): single or collection field rendering

Fixes an issue where fields like control weight on ControlNet nodes and image on IP Adapter nodes didn't render.

These are "single or collection" fields. They accept a single input object, or collection. They are supposed to render the UI input for a single object.

In a7a71ca a performance optimisation for a hot code-path inadvertently broke this.

The determination of which UI component to render for a given field was done using a type guard function for the field's template. Previously, this used a zod schema to parse the template. This is very slow, especially when the template was not the expected type.

The optimization changed the type guards to check the field name (aka its type, integer, image, etc) and cardinality directly, without any zod parsing.

It's much faster, but subtly changed the behaviour because it was a bit stricter. For some fields, it rejected "single or collection" cardinalities when it should have accepted them.

When these fields - like the aforementioned Control Weight and Image - were being rendered, none of the type guards passed and they rendered nothing.

The fix here updates the type guard functions to support multiple cardinalities. So now, when we go to render a "single or collection" field, we will render the "single" input component as it should be.

Author: psychedelicious

Diff for: invokeai/frontend/web/src/features/nodes/types/field.ts

@@ -331,14 +331,25 @@ const buildInstanceTypeGuard = <T extends z.ZodTypeAny>(schema: T) => {
   return (val: unknown): val is z.infer<T> => schema.safeParse(val).success;
 };
 
+/**
+ * Builds a type guard for a specific field input template type.
+ *
+ * The output type guards are primarily used for determining which input component to render for fields in the
+ * <InputFieldRenderer/> component.
+ *
+ * @param name The name of the field type.
+ * @param cardinalities The allowed cardinalities for the field type. If omitted, all cardinalities are allowed.
+ *
+ *  @returns A type guard for the specified field type.
+ */
 const buildTemplateTypeGuard =
-  <T extends FieldInputTemplate>(name: string, cardinality?: 'SINGLE' | 'COLLECTION' | 'SINGLE_OR_COLLECTION') =>
+  <T extends FieldInputTemplate>(name: string, cardinalities?: FieldType['cardinality'][]) =>
   (template: FieldInputTemplate): template is T => {
     if (template.type.name !== name) {
       return false;
     }
-    if (cardinality) {
-      return template.type.cardinality === cardinality;
+    if (cardinalities) {
+      return cardinalities.includes(template.type.cardinality);
     }
     return true;
   };
@@ -366,7 +377,10 @@ export type IntegerFieldValue = z.infer<typeof zIntegerFieldValue>;
 export type IntegerFieldInputInstance = z.infer<typeof zIntegerFieldInputInstance>;
 export type IntegerFieldInputTemplate = z.infer<typeof zIntegerFieldInputTemplate>;
 export const isIntegerFieldInputInstance = buildInstanceTypeGuard(zIntegerFieldInputInstance);
-export const isIntegerFieldInputTemplate = buildTemplateTypeGuard<IntegerFieldInputTemplate>('IntegerField', 'SINGLE');
+export const isIntegerFieldInputTemplate = buildTemplateTypeGuard<IntegerFieldInputTemplate>('IntegerField', [
+  'SINGLE',
+  'SINGLE_OR_COLLECTION',
+]);
 // #endregion
 
 // #region IntegerField Collection
@@ -406,7 +420,7 @@ export type IntegerFieldCollectionInputTemplate = z.infer<typeof zIntegerFieldCo
 export const isIntegerFieldCollectionInputInstance = buildInstanceTypeGuard(zIntegerFieldCollectionInputInstance);
 export const isIntegerFieldCollectionInputTemplate = buildTemplateTypeGuard<IntegerFieldCollectionInputTemplate>(
   'IntegerField',
-  'COLLECTION'
+  ['COLLECTION']
 );
 // #endregion
 
@@ -432,7 +446,10 @@ export type FloatFieldValue = z.infer<typeof zFloatFieldValue>;
 export type FloatFieldInputInstance = z.infer<typeof zFloatFieldInputInstance>;
 export type FloatFieldInputTemplate = z.infer<typeof zFloatFieldInputTemplate>;
 export const isFloatFieldInputInstance = buildInstanceTypeGuard(zFloatFieldInputInstance);
-export const isFloatFieldInputTemplate = buildTemplateTypeGuard<FloatFieldInputTemplate>('FloatField', 'SINGLE');
+export const isFloatFieldInputTemplate = buildTemplateTypeGuard<FloatFieldInputTemplate>('FloatField', [
+  'SINGLE',
+  'SINGLE_OR_COLLECTION',
+]);
 // #endregion
 
 // #region FloatField Collection
@@ -471,7 +488,7 @@ export type FloatFieldCollectionInputTemplate = z.infer<typeof zFloatFieldCollec
 export const isFloatFieldCollectionInputInstance = buildInstanceTypeGuard(zFloatFieldCollectionInputInstance);
 export const isFloatFieldCollectionInputTemplate = buildTemplateTypeGuard<FloatFieldCollectionInputTemplate>(
   'FloatField',
-  'COLLECTION'
+  ['COLLECTION']
 );
 // #endregion
 
@@ -504,7 +521,10 @@ export type StringFieldValue = z.infer<typeof zStringFieldValue>;
 export type StringFieldInputInstance = z.infer<typeof zStringFieldInputInstance>;
 export type StringFieldInputTemplate = z.infer<typeof zStringFieldInputTemplate>;
 export const isStringFieldInputInstance = buildInstanceTypeGuard(zStringFieldInputInstance);
-export const isStringFieldInputTemplate = buildTemplateTypeGuard<StringFieldInputTemplate>('StringField', 'SINGLE');
+export const isStringFieldInputTemplate = buildTemplateTypeGuard<StringFieldInputTemplate>('StringField', [
+  'SINGLE',
+  'SINGLE_OR_COLLECTION',
+]);
 // #endregion
 
 // #region StringField Collection
@@ -550,7 +570,7 @@ export type StringFieldCollectionInputTemplate = z.infer<typeof zStringFieldColl
 export const isStringFieldCollectionInputInstance = buildInstanceTypeGuard(zStringFieldCollectionInputInstance);
 export const isStringFieldCollectionInputTemplate = buildTemplateTypeGuard<StringFieldCollectionInputTemplate>(
   'StringField',
-  'COLLECTION'
+  ['COLLECTION']
 );
 // #endregion
 
@@ -613,7 +633,10 @@ export type ImageFieldValue = z.infer<typeof zImageFieldValue>;
 export type ImageFieldInputInstance = z.infer<typeof zImageFieldInputInstance>;
 export type ImageFieldInputTemplate = z.infer<typeof zImageFieldInputTemplate>;
 export const isImageFieldInputInstance = buildInstanceTypeGuard(zImageFieldInputInstance);
-export const isImageFieldInputTemplate = buildTemplateTypeGuard<ImageFieldInputTemplate>('ImageField', 'SINGLE');
+export const isImageFieldInputTemplate = buildTemplateTypeGuard<ImageFieldInputTemplate>('ImageField', [
+  'SINGLE',
+  'SINGLE_OR_COLLECTION',
+]);
 // #endregion
 
 // #region ImageField Collection
@@ -648,7 +671,7 @@ export type ImageFieldCollectionInputTemplate = z.infer<typeof zImageFieldCollec
 export const isImageFieldCollectionInputInstance = buildInstanceTypeGuard(zImageFieldCollectionInputInstance);
 export const isImageFieldCollectionInputTemplate = buildTemplateTypeGuard<ImageFieldCollectionInputTemplate>(
   'ImageField',
-  'COLLECTION'
+  ['COLLECTION']
 );
 // #endregion