Added node validation to docs examples and make them interactive (#1995)

Co-authored-by: Joey Ballentine <[email protected]>
chaiNNer-org · Jul 27, 2023 · 60cf539 · 60cf539
1 parent b7276c2
commit 60cf539
Showing 1 changed file with 20 additions and 8 deletions.
diff --git a/src/renderer/components/NodeDocumentation/NodeExample.tsx b/src/renderer/components/NodeDocumentation/NodeExample.tsx
@@ -12,6 +12,7 @@ import {
     NodeSchema,
     Size,
 } from '../../../common/common-types';
+import { checkNodeValidity } from '../../../common/nodes/checkNodeValidity';
 import { DisabledStatus } from '../../../common/nodes/disabled';
 import { TypeState } from '../../../common/nodes/TypeState';
 import { EMPTY_ARRAY, EMPTY_MAP, EMPTY_OBJECT, EMPTY_SET } from '../../../common/util';
@@ -54,7 +55,13 @@ interface NodeExampleProps {
     selectedSchema: NodeSchema;
 }
 export const NodeExample = memo(({ accentColor, selectedSchema }: NodeExampleProps) => {
-    const [inputData, setInputData] = useStateForSchema<InputData>(selectedSchema, EMPTY_OBJECT);
+    const { schemata, functionDefinitions } = useContext(BackendContext);
+
+    const defaultInput = useMemo<InputData>(() => {
+        return schemata.getDefaultInput(selectedSchema.schemaId);
+    }, [schemata, selectedSchema]);
+
+    const [inputData, setInputData] = useStateForSchema<InputData>(selectedSchema, defaultInput);
     const setInputValue = useCallback(
         (inputId: InputId, value: InputValue): void => {
             setInputData((prev) => ({ ...prev, [inputId]: value }));
@@ -76,8 +83,6 @@ export const NodeExample = memo(({ accentColor, selectedSchema }: NodeExamplePro
         nodeIdPrefix + selectedSchema.schemaId.slice(-suffixLength).padStart(suffixLength, ' ');
     if (nodeId.length !== 36) throw new Error('Fake node ID must have the length of a real one.');
 
-    const { functionDefinitions } = useContext(BackendContext);
-
     const typeState = useMemo(() => {
         const node: Node<NodeData> = {
             id: nodeId,
@@ -101,11 +106,18 @@ export const NodeExample = memo(({ accentColor, selectedSchema }: NodeExamplePro
         connectedInputs: EMPTY_SET,
     };
 
+    const requiredGenericInputs = new Set(
+        selectedSchema.inputs.filter((i) => !i.optional && i.kind === 'generic').map((i) => i.id)
+    );
+    const validity = checkNodeValidity({
+        schema: selectedSchema,
+        connectedInputs: requiredGenericInputs,
+        inputData,
+        functionInstance: typeInfo.instance,
+    });
+
     return (
-        <Center
-            key={selectedSchema.schemaId}
-            pointerEvents="none"
-        >
+        <Center key={selectedSchema.schemaId}>
             <FakeNodeProvider isFake>
                 <Center
                     bg="var(--node-bg-color)"
@@ -155,7 +167,7 @@ export const NodeExample = memo(({ accentColor, selectedSchema }: NodeExamplePro
                         <NodeFooter
                             animated={false}
                             id={nodeId}
-                            validity={{ isValid: true }}
+                            validity={validity}
                         />
                     </VStack>
                 </Center>