fix(273): Fix input output execution (#274)

* fix(273): Fix input output execution * Copy type to outputs
tokens-studio · Jun 14, 2024 · 6d14dbc · 6d14dbc
1 parent a2d5a64
commit 6d14dbc
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 29 deletions.
diff --git a/packages/graph-editor/src/components/flow/wrapper/nodeV2.tsx b/packages/graph-editor/src/components/flow/wrapper/nodeV2.tsx
@@ -163,7 +163,7 @@ const getColorPreview = (color: string, showValue = false) => {
 
 
 const getValuePreview = (value, type) => {
-  if (!value) {
+  if (value === undefined) {
     return null;
   }
 
@@ -189,6 +189,9 @@ const getValuePreview = (value, type) => {
     case 'number':
       valuePreview = value.toString();
       break;
+    case 'string':
+      valuePreview = value;
+      break;
     default:
       if (isHexColor(value)) {
         return getColorPreview(value,true);
@@ -259,9 +262,8 @@ const InputHandle = observer(({ port, hideName }: { port: Port, hideName?: boole
     >
       {!hideName && (
         <Box css={{ display: 'grid', justifyContent: 'center', direction: 'row' }}>
-          {inlineValuesValue && <Text css={{ fontSize: '$small', color: '$gray12' }}>{getValuePreview(input.value, input.type) || port.name}</Text>}
-
-          {port.value && <Text css={{ fontSize: '$medium', color: '$gray11' }}>{port.name}</Text>}
+          {inlineValuesValue && <Text css={{ fontSize: '$small', color: '$gray12' }}>{getValuePreview(input.value, input.type) ?? input.name}</Text>}
+          {port.value !== undefined ? <Text css={{ fontSize: '$medium', color: '$gray11' }}>{input.name}</Text> : null}
         </Box>
       )}
       {inlineTypesValue && <InlineTypeLabel port={port} />}

diff --git a/packages/graph-engine/src/nodes/generic/input.ts b/packages/graph-engine/src/nodes/generic/input.ts
@@ -4,9 +4,9 @@
  * @packageDocumentation
  */
 import { INodeDefinition } from "../../programmatic/node.js";
-import { annotatedDynamicInputs, annotatedSingleton } from '../../annotations/index.js';
-import { NodeTypes } from "../../types.js";
 import { Node } from "../../programmatic/node.js";
+import { NodeTypes } from "../../types.js";
+import { annotatedDynamicInputs, annotatedSingleton } from '../../annotations/index.js';
 
 export default class NodeDefinition extends Node {
   static title = "Input";
@@ -23,19 +23,26 @@ export default class NodeDefinition extends Node {
 
   execute(): void | Promise<void> {
     const inputs = this.getAllInputs();
-
-    //Remove all outputs
-    this.clearOutputs();
+    const outputs = this.getAllOutputs();
 
     //Passthrough all
     Object.keys(inputs).forEach((input) => {
       const rawInput = this.getRawInput(input);
 
-      this.addOutput(input, {
-        type: rawInput.type,
-        visible: true,
-      });
-      this.setOutput(input, rawInput.value);
+      if(!(input in outputs)) {
+        this.addOutput(input, {
+          type: rawInput.type,
+          visible: true,
+        });
+      }
+
+      this.setOutput(input, rawInput.value, rawInput.type);
+    });
+
+    Object.keys(outputs).forEach((output) => {
+      if(!(output in inputs)) {
+        delete this.outputs[output];
+      }
     });
   }
 }
diff --git a/packages/graph-engine/src/nodes/generic/output.ts b/packages/graph-engine/src/nodes/generic/output.ts
@@ -3,12 +3,12 @@
  *
  * @packageDocumentation
  */
+import { AnySchema } from "../../schemas/index.js";
+import { INodeDefinition, Node } from "../../programmatic/node.js";
+import { NodeTypes } from "../../types.js";
 import { ToInput } from "../../programmatic/input.js";
 import { ToOutput } from "../../programmatic/output.js";
 import { annotatedDynamicInputs, annotatedSingleton } from '../../annotations/index.js';
-import { NodeTypes } from "../../types.js";
-import { Node, INodeDefinition } from "../../programmatic/node.js";
-import { AnySchema } from "../../schemas/index.js";
 
 
 export default class NodeDefinition<T> extends Node {
@@ -32,18 +32,25 @@ export default class NodeDefinition<T> extends Node {
 
   execute(): void | Promise<void> {
     const inputs = this.getAllInputs();
-
-    //Remove all outputs
-    this.clearOutputs();
+    const outputs = this.getAllOutputs();
 
     //Passthrough all
     Object.keys(inputs).forEach((input) => {
       const rawInput = this.getRawInput(input);
 
-      this.addOutput(input, {
-        type: rawInput.type
-      });
-      this.setOutput(input, rawInput.value);
+      if(!(input in outputs)) {
+          this.addOutput(input, {
+          type: rawInput.type,
+        });
+      }
+
+      this.setOutput(input, rawInput.value, rawInput.type);
+    });
+
+    Object.keys(outputs).forEach((output) => {
+      if(!(output in inputs)) {
+        delete this.outputs[output];
+      }
     });
   }
 }
diff --git a/packages/graph-engine/src/programmatic/node.ts b/packages/graph-engine/src/programmatic/node.ts
@@ -1,12 +1,12 @@
+import { Graph } from '../graph/index.js';
+import { GraphSchema } from "../schemas/index.js";
+import { IDeserializeOpts, SerializedNode } from "../graph/types.js";
 import { Input } from "./input.js";
 import { Output } from "./output.js";
-import { v4 as uuid } from 'uuid';
-import { Graph } from '../graph/index.js';
-import { SerializedNode, IDeserializeOpts } from "../graph/types.js";
+import { action, computed, makeObservable, observable } from "mobx";
 import { annotatedNodeRunning } from "../annotations/index.js";
-import { GraphSchema } from "../schemas/index.js";
+import { v4 as uuid } from 'uuid';
 import getDefaults from "json-schema-defaults";
-import { action, computed, makeObservable, observable } from "mobx";
 import type { NodeRun } from "../types.js";
 
 
@@ -282,6 +282,12 @@ export class Node {
     ) as T;
   };
 
+  getAllOutputs = <T = Record<string, any>>(): T => {
+    return Object.fromEntries(
+      Object.entries(this.outputs).map(([key, value]) => [key, value.value])
+    ) as T;
+  };
+
   /**
    * Handles cleanup for nodes with state.
    * Use the super method to clear the graph reference