Colored compatibility hints when dragging wires

Ironclad · Oct 31, 2023 · 77a63bc · 77a63bc
1 parent 89ba4d9
commit 77a63bc
Show file tree

Hide file tree

Showing 20 changed files with 160 additions and 21 deletions.
diff --git a/packages/app/src/components/LoopControllerNodePorts.tsx b/packages/app/src/components/LoopControllerNodePorts.tsx
@@ -10,14 +10,14 @@ import { type FC, type MouseEvent } from 'react';
 import { useNodeIO } from '../hooks/useGetNodeIO.js';
 import { useStableCallback } from '../hooks/useStableCallback.js';
 import { Port } from './Port.js';
-import { type WireDef } from './WireLayer';
 import { useDependsOnPlugins } from '../hooks/useDependsOnPlugins';
+import { type DraggingWireDef } from '../state/graphBuilder';
 
 export type NodePortsProps = {
   node: ChartNode;
   connections: NodeConnection[];
   zoomedOut?: boolean;
-  draggingWire: WireDef | undefined;
+  draggingWire: DraggingWireDef | undefined;
   closestPortToDraggingWire: { nodeId: NodeId; portId: PortId } | undefined;
   onWireStartDrag?: (
     event: MouseEvent<HTMLElement>,
@@ -115,6 +115,7 @@ export const LoopControllerNodePorts: FC<NodePortsProps> = ({
                   closest={
                     closestPortToDraggingWire?.nodeId === node.id && closestPortToDraggingWire.portId === input.id
                   }
+                  draggingDataType={draggingWire?.dataType}
                   definition={input}
                   onMouseDown={handlePortMouseDown}
                   onMouseUp={handlePortMouseUp}
@@ -141,6 +142,7 @@ export const LoopControllerNodePorts: FC<NodePortsProps> = ({
                     closestPortToDraggingWire?.nodeId === node.id && closestPortToDraggingWire.portId === output.id
                   }
                   definition={output}
+                  draggingDataType={draggingWire?.dataType}
                   onMouseDown={handlePortMouseDown}
                   onMouseUp={handlePortMouseUp}
                   onMouseOver={onPortMouseOver}
@@ -174,6 +176,7 @@ export const LoopControllerNodePorts: FC<NodePortsProps> = ({
                       closestPortToDraggingWire?.nodeId === node.id && closestPortToDraggingWire.portId === input.id
                     }
                     definition={input}
+                    draggingDataType={draggingWire?.dataType}
                     onMouseDown={handlePortMouseDown}
                     onMouseUp={handlePortMouseUp}
                     onMouseOver={onPortMouseOver}
@@ -203,6 +206,7 @@ export const LoopControllerNodePorts: FC<NodePortsProps> = ({
                       closestPortToDraggingWire?.nodeId === node.id && closestPortToDraggingWire.portId === output.id
                     }
                     definition={output}
+                    draggingDataType={draggingWire?.dataType}
                     onMouseDown={handlePortMouseDown}
                     onMouseUp={handlePortMouseUp}
                     onMouseOver={onPortMouseOver}

diff --git a/packages/app/src/components/NodePorts.tsx b/packages/app/src/components/NodePorts.tsx
@@ -12,16 +12,15 @@ import { useNodeIO } from '../hooks/useGetNodeIO.js';
 import { useStableCallback } from '../hooks/useStableCallback.js';
 import { Port } from './Port.js';
 import { ErrorBoundary } from 'react-error-boundary';
-import { type WireDef } from './WireLayer';
 import { useDependsOnPlugins } from '../hooks/useDependsOnPlugins';
 import { LoopControllerNodePorts } from './LoopControllerNodePorts';
+import { type DraggingWireDef } from '../state/graphBuilder';
 
 export type NodePortsProps = {
   node: ChartNode;
   connections: NodeConnection[];
   zoomedOut?: boolean;
-  draggingWire: WireDef | undefined;
-  draggingDataType?: DataType;
+  draggingWire: DraggingWireDef | undefined;
   closestPortToDraggingWire: { nodeId: NodeId; portId: PortId } | undefined;
   onWireStartDrag?: (
     event: MouseEvent<HTMLElement>,
@@ -58,7 +57,6 @@ export const NodePorts: FC<NodePortsProps> = ({
   node,
   connections,
   draggingWire,
-  draggingDataType,
   closestPortToDraggingWire,
   onWireStartDrag,
   onWireEndDrag,
@@ -97,7 +95,7 @@ export const NodePorts: FC<NodePortsProps> = ({
               canDragTo={draggingWire ? !draggingWire.startPortIsInput : false}
               closest={closestPortToDraggingWire?.nodeId === node.id && closestPortToDraggingWire.portId === input.id}
               definition={input}
-              draggingDataType={draggingDataType}
+              draggingDataType={draggingWire?.dataType}
               onMouseDown={handlePortMouseDown}
               onMouseUp={handlePortMouseUp}
               onMouseOver={onPortMouseOver}
@@ -121,7 +119,7 @@ export const NodePorts: FC<NodePortsProps> = ({
               canDragTo={draggingWire ? draggingWire.startPortIsInput : false}
               closest={closestPortToDraggingWire?.nodeId === node.id && closestPortToDraggingWire.portId === output.id}
               definition={output}
-              draggingDataType={draggingDataType}
+              draggingDataType={draggingWire?.dataType}
               onMouseDown={handlePortMouseDown}
               onMouseUp={handlePortMouseUp}
               onMouseOver={onPortMouseOver}

diff --git a/packages/app/src/components/Port.tsx b/packages/app/src/components/Port.tsx
@@ -4,8 +4,10 @@ import {
   type PortId,
   type NodeOutputDefinition,
   type DataType,
+  isDataTypeAccepted,
+  canBeCoercedAny,
 } from '@ironclad/rivet-core';
-import { type FC, useRef, type MouseEvent, memo } from 'react';
+import { type FC, useRef, type MouseEvent, memo, useMemo } from 'react';
 import clsx from 'clsx';
 import { useStableCallback } from '../hooks/useStableCallback';
 
@@ -18,7 +20,7 @@ export const Port: FC<{
   canDragTo: boolean;
   closest: boolean;
   definition: NodeInputDefinition | NodeOutputDefinition;
-  draggingDataType?: DataType;
+  draggingDataType?: DataType | Readonly<DataType[]>;
   onMouseDown?: (event: MouseEvent<HTMLDivElement>, port: PortId, isInput: boolean) => void;
   onMouseUp?: (event: MouseEvent<HTMLDivElement>, port: PortId) => void;
   onMouseOver?: (
@@ -67,13 +69,34 @@ export const Port: FC<{
       onMouseOut?.(event, nodeId, input, id, definition);
     });
 
+    const accepted = useMemo(() => {
+      if (!draggingDataType || !input) {
+        return '';
+      }
+
+      if (isDataTypeAccepted(draggingDataType, definition.dataType)) {
+        return 'compatible';
+      }
+
+      // We almost always coerce so default it to true for now...
+      if ((definition as NodeInputDefinition).coerced ?? true) {
+        return canBeCoercedAny(draggingDataType, definition.dataType) ? 'coerced' : 'incompatible';
+      }
+
+      return 'incompatible';
+    }, [draggingDataType, definition.dataType, (definition as NodeInputDefinition).coerced, input]);
+
     return (
       <div
         key={id}
-        className={clsx('port', {
-          connected,
-          closest,
-        })}
+        className={clsx(
+          'port',
+          {
+            connected,
+            closest,
+          },
+          accepted,
+        )}
       >
         <div
           ref={ref}

diff --git a/packages/app/src/components/nodeStyles.ts b/packages/app/src/components/nodeStyles.ts
@@ -298,6 +298,18 @@ export const nodeStyles = css`
     border: 2px solid var(--primary-dark);
   }
 
+  .port.compatible .port-circle {
+    border: 2px solid var(--success);
+  }
+
+  .port.coerced .port-circle {
+    border: 2px solid var(--warning);
+  }
+
+  .port.incompatible .port-circle {
+    border: 2px solid var(--error);
+  }
+
   .port.connected .port-label {
     color: var(--primary-text);
   }

diff --git a/packages/app/src/hooks/useDraggingWire.ts b/packages/app/src/hooks/useDraggingWire.ts
@@ -42,17 +42,23 @@ export const useDraggingWire = (onConnectionsChanged: (connections: NodeConnecti
           newConnections.splice(existingConnectionIndex, 1);
           onConnectionsChanged(newConnections);
 
-          setDraggingWire({
-            startNodeId: connections[existingConnectionIndex]!.outputNodeId,
-            startPortId: connections[existingConnectionIndex]!.outputId,
+          const { outputId, outputNodeId } = connections[existingConnectionIndex]!;
+
+          const def = ioByNode[outputNodeId]!.outputDefinitions.find((o) => o.id === outputId)!;
 
+          setDraggingWire({
+            startNodeId: outputNodeId,
+            startPortId: outputId,
             startPortIsInput: false,
+            dataType: def.dataType,
           });
           return;
         }
         return;
       }
-      setDraggingWire({ startNodeId, startPortId, startPortIsInput: isInput });
+
+      const def = ioByNode[startNodeId]!.outputDefinitions.find((o) => o.id === startPortId)!;
+      setDraggingWire({ startNodeId, startPortId, startPortIsInput: isInput, dataType: def.dataType });
     },
     [connections, onConnectionsChanged, setDraggingWire],
   );

diff --git a/packages/app/src/state/graphBuilder.ts b/packages/app/src/state/graphBuilder.ts
@@ -6,6 +6,7 @@ import {
   NodeImpl,
   type NodeInputDefinition,
   type PortId,
+  type DataType,
 } from '@ironclad/rivet-core';
 import { recoilPersist } from 'recoil-persist';
 import { type WireDef } from '../components/WireLayer.js';
@@ -51,7 +52,9 @@ export const sidebarOpenState = atom<boolean>({
   default: true,
 });
 
-export const draggingWireState = atom<WireDef | undefined>({
+export type DraggingWireDef = WireDef & { readonly dataType: DataType | Readonly<DataType[]> };
+
+export const draggingWireState = atom<DraggingWireDef | undefined>({
   key: 'draggingWire',
   default: undefined,
 });

diff --git a/packages/core/src/model/NodeBase.ts b/packages/core/src/model/NodeBase.ts
@@ -110,6 +110,9 @@ export type NodeInputDefinition = {
 
   /** User-facing description of the port. */
   description?: string;
+
+  /** Will the input value attempt to be coerced into the desired type? */
+  coerced?: boolean;
 };
 
 /** Represents an output definition of a node. */

diff --git a/packages/core/src/model/nodes/AudioNode.ts b/packages/core/src/model/nodes/AudioNode.ts
@@ -45,6 +45,7 @@ export class AudioNodeImpl extends NodeImpl<AudioNode> {
         id: 'data' as PortId,
         title: 'Data',
         dataType: 'string',
+        coerced: false,
       });
     }
 

diff --git a/packages/core/src/model/nodes/ExtractJsonNode.ts b/packages/core/src/model/nodes/ExtractJsonNode.ts
@@ -40,6 +40,7 @@ export class ExtractJsonNodeImpl extends NodeImpl<ExtractJsonNode> {
         title: 'Input',
         dataType: 'string',
         required: true,
+        coerced: false,
       },
     ];
   }

diff --git a/packages/core/src/model/nodes/ExtractObjectPathNode.ts b/packages/core/src/model/nodes/ExtractObjectPathNode.ts
@@ -58,6 +58,7 @@ export class ExtractObjectPathNodeImpl extends NodeImpl<ExtractObjectPathNode> {
         title: 'Path',
         dataType: 'string',
         required: true,
+        coerced: false,
       });
     }
 

diff --git a/packages/core/src/model/nodes/ExtractRegexNode.ts b/packages/core/src/model/nodes/ExtractRegexNode.ts
@@ -51,6 +51,7 @@ export class ExtractRegexNodeImpl extends NodeImpl<ExtractRegexNode> {
         title: 'Input',
         dataType: 'string',
         required: true,
+        coerced: false,
       },
     ];
 
@@ -60,6 +61,7 @@ export class ExtractRegexNodeImpl extends NodeImpl<ExtractRegexNode> {
         title: 'Regex',
         dataType: 'string',
         required: false,
+        coerced: false,
       });
     }
 

diff --git a/packages/core/src/model/nodes/ExtractYamlNode.ts b/packages/core/src/model/nodes/ExtractYamlNode.ts
@@ -54,6 +54,7 @@ export class ExtractYamlNodeImpl extends NodeImpl<ExtractYamlNode> {
         title: 'Input',
         dataType: 'string',
         required: true,
+        coerced: false,
       },
     ];
 

diff --git a/packages/core/src/model/nodes/ImageNode.ts b/packages/core/src/model/nodes/ImageNode.ts
@@ -50,6 +50,7 @@ export class ImageNodeImpl extends NodeImpl<ImageNode> {
         id: 'data' as PortId,
         title: 'Data',
         dataType: 'string',
+        coerced: false,
       });
     }
 

diff --git a/packages/core/src/model/nodes/PopNode.ts b/packages/core/src/model/nodes/PopNode.ts
@@ -42,6 +42,7 @@ export class PopNodeImpl extends NodeImpl<PopNode> {
         dataType: 'any[]',
         id: 'array' as PortId,
         title: 'Array',
+        coerced: false,
       },
     ];
   }

diff --git a/packages/core/src/model/nodes/ReadDirectoryNode.ts b/packages/core/src/model/nodes/ReadDirectoryNode.ts
@@ -69,6 +69,7 @@ export class ReadDirectoryNodeImpl extends NodeImpl<ReadDirectoryNode> {
         title: 'Path',
         dataType: 'string',
         required: true,
+        coerced: false,
       });
     }
 
@@ -78,6 +79,7 @@ export class ReadDirectoryNodeImpl extends NodeImpl<ReadDirectoryNode> {
         title: 'Recursive',
         dataType: 'boolean',
         required: true,
+        coerced: false,
       });
     }
 
@@ -87,6 +89,7 @@ export class ReadDirectoryNodeImpl extends NodeImpl<ReadDirectoryNode> {
         title: 'Include Directories',
         dataType: 'boolean',
         required: true,
+        coerced: false,
       });
     }
 
@@ -96,6 +99,7 @@ export class ReadDirectoryNodeImpl extends NodeImpl<ReadDirectoryNode> {
         title: 'Filter Globs',
         dataType: 'string[]',
         required: true,
+        coerced: false,
       });
     }
 
@@ -105,6 +109,7 @@ export class ReadDirectoryNodeImpl extends NodeImpl<ReadDirectoryNode> {
         title: 'Relative',
         dataType: 'boolean',
         required: true,
+        coerced: false,
       });
     }
 

diff --git a/packages/core/src/model/nodes/ReadFileNode.ts b/packages/core/src/model/nodes/ReadFileNode.ts
@@ -45,6 +45,7 @@ export class ReadFileNodeImpl extends NodeImpl<ReadFileNode> {
         id: 'path' as PortId,
         title: 'Path',
         dataType: 'string',
+        coerced: false,
       });
     }
 

diff --git a/packages/core/src/plugins/anthropic/nodes/ChatAnthropicNode.ts b/packages/core/src/plugins/anthropic/nodes/ChatAnthropicNode.ts
@@ -288,8 +288,6 @@ export const ChatAnthropicNodeImpl: PluginNodeImpl<ChatAnthropicNode> = {
         : undefined
       : data.stop;
 
-    const functions = expectTypeOptional(inputs['functions' as PortId], 'gpt-function[]');
-
     const { messages } = getChatAnthropicNodeMessages(inputs);
 
     let prompt = messages.reduce((acc, message) => {

diff --git a/packages/core/src/utils/coerceType.ts b/packages/core/src/utils/coerceType.ts
@@ -283,3 +283,43 @@ function coerceToObject(value: DataValue | undefined): object | undefined {
 
   return value.value; // Whatever, consider anything an object
 }
+
+export function canBeCoercedAny(from: DataType | Readonly<DataType[]>, to: DataType | Readonly<DataType[]>) {
+  for (const fromType of Array.isArray(from) ? from : [from]) {
+    for (const toType of Array.isArray(to) ? to : [to]) {
+      if (canBeCoerced(fromType, toType)) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
+// TODO hard to keep in sync with coerceType
+export function canBeCoerced(from: DataType, to: DataType) {
+  if (to === 'any' || from === 'any') {
+    return true;
+  }
+
+  if (isArrayDataType(to) && isArrayDataType(from)) {
+    return canBeCoerced(getScalarTypeOf(from), getScalarTypeOf(to));
+  }
+
+  if (isArrayDataType(to) && !isArrayDataType(from)) {
+    return canBeCoerced(from, getScalarTypeOf(to));
+  }
+
+  if (isArrayDataType(from) && !isArrayDataType(to)) {
+    return to === 'string' || to === 'object';
+  }
+
+  if (to === 'gpt-function') {
+    return from === 'object';
+  }
+
+  if (to === 'audio' || to === 'binary' || to === 'image') {
+    return false;
+  }
+
+  return true;
+}