diff --git a/src/renderer/components/NodeDocumentation/NodeDocs.tsx b/src/renderer/components/NodeDocumentation/NodeDocs.tsx index 16a40889b..4d8eb1612 100644 --- a/src/renderer/components/NodeDocumentation/NodeDocs.tsx +++ b/src/renderer/components/NodeDocumentation/NodeDocs.tsx @@ -81,151 +81,173 @@ const getTextLength = (input: TextInput): string => { interface InputOutputItemProps { schema: NodeSchema; - item: Input | Output; + type: Type; + condition?: Condition; +} +interface InputItemProps extends InputOutputItemProps { + schema: NodeSchema; + kind: 'input'; + item: Input; + type: Type; + condition?: Condition; +} +interface OutputItemProps extends InputOutputItemProps { + schema: NodeSchema; + kind: 'output'; + item: Output; type: Type; condition?: Condition; } -const InputOutputItem = memo(({ type, item, condition, schema }: InputOutputItemProps) => { - const isOptional = 'optional' in item && item.optional; - if (isOptional) { - // eslint-disable-next-line no-param-reassign - type = withoutNull(type); - } +const InputOutputItem = memo( + ({ type, kind, item, condition, schema }: InputItemProps | OutputItemProps) => { + const isOptional = 'optional' in item && item.optional; + if (isOptional) { + // eslint-disable-next-line no-param-reassign + type = withoutNull(type); + } - const handleColors = getTypeAccentColors(type); + const isIterated = + kind === 'input' + ? schema.iteratorInputs.some((i) => i.inputs.includes(item.id)) + : schema.iteratorOutputs.some((i) => i.outputs.includes(item.id)); - const isFileInput = item.kind === 'file'; - const supportedFileTypes = isFileInput ? item.filetypes : []; - const isPrimaryInput = isFileInput && item.primaryInput; + const handleColors = getTypeAccentColors(type); - const isTextInput = item.kind === 'text'; - const isDropdownInput = item.kind === 'dropdown'; + const isFileInput = item.kind === 'file'; + const supportedFileTypes = isFileInput ? item.filetypes : []; + const isPrimaryInput = isFileInput && item.primaryInput; - return ( - - - - - {item.label} - - {isOptional && ( - - optional - - )} - {item.hasHandle && - handleColors.map((color) => ( - - ))} - - - {item.description && ( - - {item.description} - - )} - - {isFileInput && supportedFileTypes.length > 0 && ( - - Supported file types: - {supportedFileTypes.map((fileType) => ( - - {fileType} - - ))} - - )} + const isTextInput = item.kind === 'text'; + const isDropdownInput = item.kind === 'dropdown'; - {isFileInput && isPrimaryInput && ( + return ( + + + - This input is the primary input for its supported file types. This means - that you can drag and drop supported files into chaiNNer, and it will - create a node with this input filled in automatically. + {item.label} - )} - - {condition && !isTautology(condition) && ( - - )} + {isOptional && ( + + optional + + )} + {item.hasHandle && + handleColors.map((color) => ( + + ))} + {isIterated && (Sequenced)} + + + {item.description && ( + + {item.description} + + )} - {isTextInput && !((item.minLength ?? 0) === 0 && item.maxLength == null) && ( - - {getTextLength(item)} - - )} + {isFileInput && supportedFileTypes.length > 0 && ( + + Supported file types: + {supportedFileTypes.map((fileType) => ( + + {fileType} + + ))} + + )} - {isDropdownInput && ( - + {isFileInput && isPrimaryInput && ( - Options: + This input is the primary input for its supported file types. This + means that you can drag and drop supported files into chaiNNer, and + it will create a node with this input filled in automatically. - - - )} + )} + + {condition && !isTautology(condition) && ( + + )} + + {isTextInput && + !((item.minLength ?? 0) === 0 && item.maxLength == null) && ( + + {getTextLength(item)} + + )} - {!isDropdownInput && ( - + {isDropdownInput && ( - Type: + + Options: + + - - - )} - - - - ); -}); + )} + + {!isDropdownInput && ( + + + Type: + + + + )} + + + + ); + } +); interface NodeInfoProps { schema: NodeSchema; @@ -292,6 +314,7 @@ const SingleNodeInfo = memo(({ schema, accentColor, functionDefinition }: NodeIn condition={getInputCondition(schema, input.id)} item={input} key={input.id} + kind="input" schema={schema} type={ functionDefinition?.inputDefaults.get(input.id) ?? @@ -326,6 +349,7 @@ const SingleNodeInfo = memo(({ schema, accentColor, functionDefinition }: NodeIn