File input docs improvements (#1926)

* File input docs improvements * PR suggestion * remove comment * Pr suggs * slightly better formatting
chaiNNer-org · Jul 8, 2023 · 5aa2060 · 5aa2060
1 parent 1c72d75
commit 5aa2060
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 55 deletions.
diff --git a/backend/src/packages/chaiNNer_standard/image/io/load_image.py b/backend/src/packages/chaiNNer_standard/image/io/load_image.py
@@ -120,8 +120,7 @@ def _for_ext(ext: str | Iterable[str], decoder: _Decoder) -> _Decoder:
     icon="BsFillImageFill",
     inputs=[
         ImageFileInput(primary_input=True).with_docs(
-            "Select the path of an image file.",
-            f"Supports the following image formats: {', '.join(valid_formats)}",
+            "Select the path of an image file."
         )
     ],
     outputs=[

diff --git a/src/renderer/components/NodeDocumentation/NodeDocs.tsx b/src/renderer/components/NodeDocumentation/NodeDocs.tsx
@@ -15,7 +15,7 @@ import {
 import { memo } from 'react';
 import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
 import { useContext } from 'use-context-selector';
-import { NodeSchema } from '../../../common/common-types';
+import { Input, NodeSchema, Output } from '../../../common/common-types';
 import { FunctionDefinition } from '../../../common/types/function';
 import { prettyPrintType } from '../../../common/types/pretty';
 import { withoutNull } from '../../../common/types/util';
@@ -30,61 +30,99 @@ import { NodeExample } from './NodeExample';
 import { SchemaLink } from './SchemaLink';
 
 interface InputOutputItemProps {
-    label: string;
-    description?: string | null;
+    item: Input | Output;
     type: Type;
-    optional: boolean;
-    hasHandle?: boolean;
 }
-const InputOutputItem = memo(
-    ({ label, description, type, optional, hasHandle = true }: InputOutputItemProps) => {
-        if (optional) {
-            // eslint-disable-next-line no-param-reassign
-            type = withoutNull(type);
-        }
 
-        const handleColors = getTypeAccentColors(type);
+const InputOutputItem = memo(({ type, item }: InputOutputItemProps) => {
+    const isOptional = 'optional' in item && item.optional;
+    if (isOptional) {
+        // eslint-disable-next-line no-param-reassign
+        type = withoutNull(type);
+    }
 
-        return (
-            <ListItem my={2}>
-                <HStack>
+    const handleColors = getTypeAccentColors(type);
+
+    const isFileInput = item.kind === 'file';
+    const supportedFileTypes = isFileInput ? item.filetypes : [];
+    const isPrimaryInput = isFileInput && item.primaryInput;
+
+    return (
+        <ListItem my={2}>
+            <HStack mb={1}>
+                <Text
+                    fontWeight="bold"
+                    userSelect="text"
+                >
+                    {item.label}
+                </Text>
+                {isOptional && (
+                    <TypeTag
+                        isOptional
+                        fontSize="small"
+                        height="auto"
+                        mt="-0.2rem"
+                        verticalAlign="middle"
+                    >
+                        optional
+                    </TypeTag>
+                )}
+                {item.hasHandle &&
+                    handleColors.map((color) => (
+                        <Box
+                            bgColor={color}
+                            borderRadius="100%"
+                            h="0.5rem"
+                            key={color}
+                            w="0.5rem"
+                        />
+                    ))}
+            </HStack>
+
+            {item.description && (
+                <ReactMarkdown components={docsMarkdown}>{item.description}</ReactMarkdown>
+            )}
+
+            <VStack
+                alignItems="start"
+                mb={1}
+                w="full"
+            >
+                {isFileInput && supportedFileTypes.length > 0 && (
                     <Text
-                        fontWeight="bold"
+                        fontSize="md"
                         userSelect="text"
                     >
-                        {label}
-                    </Text>
-                    {optional && (
-                        <TypeTag
-                            isOptional
-                            fontSize="small"
-                            height="auto"
-                            mt="-0.2rem"
-                            verticalAlign="middle"
-                        >
-                            optional
-                        </TypeTag>
-                    )}
-                    {hasHandle &&
-                        handleColors.map((color) => (
-                            <Box
-                                bgColor={color}
-                                borderRadius="100%"
-                                h="0.5rem"
-                                key={color}
-                                w="0.5rem"
-                            />
+                        Supported file types:
+                        {supportedFileTypes.map((fileType) => (
+                            <TypeTag
+                                fontSize="small"
+                                height="auto"
+                                mt="-0.2rem"
+                                verticalAlign="middle"
+                            >
+                                {fileType}
+                            </TypeTag>
                         ))}
-                </HStack>
+                    </Text>
+                )}
 
-                {description && (
-                    <ReactMarkdown components={docsMarkdown}>{description}</ReactMarkdown>
+                {isFileInput && isPrimaryInput && (
+                    <Text
+                        fontSize="md"
+                        userSelect="text"
+                    >
+                        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.
+                    </Text>
                 )}
+
                 <Code userSelect="text">{prettyPrintType(type)}</Code>
-            </ListItem>
-        );
-    }
-);
+            </VStack>
+        </ListItem>
+    );
+});
 
 interface NodeInfoProps {
     schema: NodeSchema;
@@ -148,11 +186,8 @@ const SingleNodeInfo = memo(({ schema, accentColor, functionDefinition }: NodeIn
                         {inputs.map((input) => {
                             return (
                                 <InputOutputItem
-                                    description={input.description}
-                                    hasHandle={input.hasHandle}
+                                    item={input}
                                     key={input.id}
-                                    label={input.label}
-                                    optional={input.optional}
                                     type={
                                         functionDefinition?.inputDefaults.get(input.id) ??
                                         NeverType.instance
@@ -184,10 +219,8 @@ const SingleNodeInfo = memo(({ schema, accentColor, functionDefinition }: NodeIn
                         {outputs.map((output) => {
                             return (
                                 <InputOutputItem
-                                    description={output.description}
+                                    item={output}
                                     key={output.id}
-                                    label={output.label}
-                                    optional={false}
                                     type={
                                         functionDefinition?.outputDefaults.get(output.id) ??
                                         NeverType.instance

diff --git a/src/renderer/components/NodeDocumentation/docsMarkdown.tsx b/src/renderer/components/NodeDocumentation/docsMarkdown.tsx
@@ -12,7 +12,7 @@ const getDocsMarkdownComponents = (interactive: boolean): Components => {
         p: ({ children }) => {
             return (
                 <Text
-                    my={2}
+                    mb={1}
                     userSelect="text"
                 >
                     {children}