List logic implemented at the nodes

space_flow/src/CustomNodes/BooleanNode/index.tsx

@@ -1,7 +1,7 @@
 import { Bars3CenterLeftIcon, TrashIcon } from "@heroicons/react/24/outline";
 import { Input } from "@mui/material";
 import { Handle, Position } from "reactflow";
-import { nodeColors } from "../../utils";
+import { isValidConnection, nodeColors } from "../../utils";
 import ToggleComponent from "../../components/toggleComponent";
 import { useEffect, useState } from "react";
 
@@ -32,11 +32,7 @@ export default function BooleanNode({ data }) {
         type="target"
         position={Position.Right}
         id={data.name}
-        isValidConnection={({ sourceHandle, targetHandle }) =>
+        isValidConnection={(connection) => isValidConnection(data,connection)}
-          targetHandle === sourceHandle ||
-          data.types[targetHandle] === sourceHandle ||
-          sourceHandle === "str"
-        }
         className="-mr-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
         style={{ borderLeftColor: nodeColors[data.type] }}
       ></Handle>

space_flow/src/CustomNodes/ChatInputNode/index.tsx

@@ -1,6 +1,6 @@
 import { ChatBubbleBottomCenterTextIcon } from "@heroicons/react/24/outline";
 import Input from "../../components/inputComponent";
-import { snakeToNormalCase } from "../../utils";
+import { isValidConnection, snakeToNormalCase } from "../../utils";
 import { Handle, Position } from "reactflow";
 import Tooltip from "../../components/TooltipComponent";
 
@@ -11,8 +11,8 @@ export default function ChatInputNode({ data }) {
       <Handle
         type="target"
         position={Position.Right}
-        id={data.name}
+        id='str'
-        isValidConnection={({sourceHandle, targetHandle}) => (targetHandle === sourceHandle || data.types[targetHandle] === sourceHandle || sourceHandle === 'str')}
+        isValidConnection={(connection) => isValidConnection(data,connection)}
         className="-mr-1 bg-transparent border-solid border-l-8 border-l-blue-600 border-y-transparent border-y-8 border-r-0 rounded-none"
       ></Handle>
       </Tooltip>

space_flow/src/CustomNodes/ChatOutputNode/index.tsx

@@ -1,7 +1,7 @@
 import { ChatBubbleBottomCenterTextIcon } from "@heroicons/react/24/outline";
 import { Handle, Position } from "reactflow";
 import Input from "../../components/inputComponent";
-import { snakeToNormalCase } from "../../utils";
+import { isValidConnection, snakeToNormalCase } from "../../utils";
 import Tooltip from "../../components/TooltipComponent";
 
 export default function ChatOutputNode({ data }) {
@@ -10,13 +10,9 @@ export default function ChatOutputNode({ data }) {
       <Tooltip title="Message: str">
         <Handle
           type="source"
-          isValidConnection={({ sourceHandle, targetHandle }) =>
+          isValidConnection={(connection) => isValidConnection(data,connection)}
-            targetHandle === sourceHandle ||
-            data.types[targetHandle] === sourceHandle ||
-            sourceHandle === "str"
-          }
           position={Position.Left}
-          id="str"
+          id={"str|output|"+data.id}
           className="ml-1 bg-transparent border-solid border-l-8 border-l-white border-y-transparent border-y-8 border-r-0 rounded-none"
         ></Handle>
       </Tooltip>

space_flow/src/CustomNodes/GenericNode/index.tsx

@@ -6,8 +6,9 @@ import {
 import { Handle, Position } from "reactflow";
 import Dropdown from "../../components/dropdownComponent";
 import Input from "../../components/inputComponent";
-import { nodeColors, nodeIcons, snakeToNormalCase } from "../../utils";
+import { isValidConnection, nodeColors, nodeIcons, snakeToNormalCase } from "../../utils";
 import Tooltip from "../../components/TooltipComponent";
+import { useEffect } from "react";
 
 export default function GenericNode({ data }) {
   const Icon = nodeIcons[data.type];
@@ -36,12 +37,8 @@ export default function GenericNode({ data }) {
               <Handle
                 type="source"
                 position={Position.Left}
-                id={data.node.template[t].type}
+                id={data.node.template[t].type + "|" + t + "|" + data.id}
-                isValidConnection={({ sourceHandle, targetHandle }) =>
+                isValidConnection={(connection) => isValidConnection(data,connection)}
-                  targetHandle === sourceHandle ||
-                  data.types[targetHandle] === sourceHandle ||
-                  sourceHandle === "str"
-                }
                 className="ml-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
                 style={{
                   borderLeftColor: (nodeColors[(data.types[data.node.template[t].type] ?? data.node.template[t].type)]) ?? "gray",
@@ -58,11 +55,7 @@ export default function GenericNode({ data }) {
           type="target"
           position={Position.Right}
           id={data.name}
-          isValidConnection={({ sourceHandle, targetHandle }) =>
+          isValidConnection={(connection) => isValidConnection(data,connection)}
-            targetHandle === sourceHandle ||
-            data.types[targetHandle] === sourceHandle ||
-            sourceHandle === "str"
-          }
           className="-mr-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
           style={{ borderLeftColor: nodeColors[data.type] }}
         ></Handle>

space_flow/src/CustomNodes/InputNode/index.tsx

@@ -1,6 +1,6 @@
 import { Bars3CenterLeftIcon, TrashIcon } from "@heroicons/react/24/outline";
 import Input from "../../components/inputComponent";
-import { nodeColors, nodeIcons, snakeToNormalCase } from "../../utils";
+import { isValidConnection, nodeColors, nodeIcons, snakeToNormalCase } from "../../utils";
 import { Handle, Position } from "reactflow";
 import { useEffect } from "react";
 
@@ -34,7 +34,7 @@ export default function InputNode({ data }) {
         type="target"
         position={Position.Right}
         id={data.name}
-        isValidConnection={({sourceHandle, targetHandle}) => (targetHandle === sourceHandle || data.types[targetHandle] === sourceHandle || sourceHandle === 'str')}
+        isValidConnection={(connection) => isValidConnection(data,connection)}
         className="-mr-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
         style={{borderLeftColor: nodeColors[data.type]}}
       ></Handle>

space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -71,7 +71,6 @@ export default function ExtraSidebar() {
                   onDragStart(event, {
                     type: 'elements',
                     name: 'str',
-                    types: types
                   })
                 }
               >

space_flow/src/pages/FlowPage/index.tsx

@@ -74,7 +74,7 @@ export default function FlowPage() {
         id: newId,
         type: data.name === 'str' ? 'inputNode' : (data.name === 'chatInput' ? 'chatInputNode' : (data.name === 'chatOutput' ? 'chatOutputNode' : (data.name === 'bool' ? 'booleanNode' : 'genericNode'))),
         position,
-        data: { ...data, input: '', enabled: false, instance: reactFlowInstance, onDelete: () => {setNodes(reactFlowInstance.getNodes().filter((n)=>n.id !== newId))} },
+        data: { ...data, id: newId, input: '', enabled: false, reactFlowInstance, onDelete: () => {setNodes(reactFlowInstance.getNodes().filter((n)=>n.id !== newId))} },
       };
       setNodes((nds) => nds.concat(newNode));
     },

space_flow/src/utils.ts

@@ -1,11 +1,19 @@
-import { RocketLaunchIcon, LinkIcon, CpuChipIcon, LightBulbIcon, CommandLineIcon, WrenchScrewdriverIcon, ComputerDesktopIcon } from "@heroicons/react/24/outline";
+import {
+  RocketLaunchIcon,
+  LinkIcon,
+  CpuChipIcon,
+  LightBulbIcon,
+  CommandLineIcon,
+  WrenchScrewdriverIcon,
+  ComputerDesktopIcon,
+} from "@heroicons/react/24/outline";
 import { Edge, Node } from "reactflow";
 
 export function classNames(...classes) {
   return classes.filter(Boolean).join(" ");
-  }
+}
 
-  export const textColors = {
+export const textColors = {
   white: "text-white",
   red: "text-red-700",
   orange: "text-orange-700",
@@ -26,9 +34,9 @@ export function classNames(...classes) {
   rose: "text-rose-700",
   black: "text-black-700",
   gray: "text-gray-700",
-  };
+};
 
-  export const borderLColors = {
+export const borderLColors = {
   white: "border-l-white",
   red: "border-l-red-500",
   orange: "border-l-orange-500",
@@ -49,9 +57,9 @@ export function classNames(...classes) {
   rose: "border-l-rose-500",
   black: "border-l-black-500",
   gray: "border-l-gray-500",
-  };
+};
 
-  /* export const nodeColors = {
+/* export const nodeColors = {
     prompt: "#35ADAE",
     model: "#4266BE",
     chain: "#6344BE",
@@ -60,7 +68,7 @@ export function classNames(...classes) {
     memory: "#FF3434",
   } */
 
-  /* export const nodeColors = {
+/* export const nodeColors = {
     prompt: "#36D635",
     model: "#4266BE",
     chain: "#903BBE",
@@ -69,7 +77,7 @@ export function classNames(...classes) {
     memory: "#FFFF33",
   } */
 
-  /* export const nodeColors = {
+/* export const nodeColors = {
     prompt: "#36D635",
     model: "#35ADAE",
     chain: "#903BBE",
@@ -78,7 +86,7 @@ export function classNames(...classes) {
     memory: "#FFDC35",
   } */
 
-  /* export const nodeColors = {
+/* export const nodeColors = {
     prompt: "#36D635",
     model: "#35ADAE",
     chain: "#903BBE",
@@ -87,17 +95,17 @@ export function classNames(...classes) {
     memory: "#FF9135",
   } */
 
-  export const nodeColors = {
+export const nodeColors = {
   prompts: "#7C7C7C",
   llms: "#35ADAE",
   chains: "#FFDC35",
   agents: "#903BBE",
   tools: "#FF3434",
   memories: "#FF9135",
-    elements: "#6344BE"
+  elements: "#6344BE",
-  }
+};
 
-  export const nodeNames = {
+export const nodeNames = {
   prompts: "Prompts",
   llms: "LLMs",
   chains: "Chains",
@@ -105,20 +113,19 @@ export function classNames(...classes) {
   tools: "Tools",
   memories: "Memories",
   elements: "Elements",
-  }
+};
 
-
+export const nodeIcons = {
-  export const nodeIcons = {
   agents: RocketLaunchIcon,
   chains: LinkIcon,
   memories: CpuChipIcon,
   llms: LightBulbIcon,
   prompts: CommandLineIcon,
   tools: WrenchScrewdriverIcon,
-    elements: ComputerDesktopIcon
+  elements: ComputerDesktopIcon,
-  }
+};
 
-  export const bgColors = {
+export const bgColors = {
   white: "bg-white",
   red: "bg-red-100",
   orange: "bg-orange-100",
@@ -139,9 +146,9 @@ export function classNames(...classes) {
   rose: "bg-rose-100",
   black: "bg-black-100",
   gray: "bg-gray-100",
-  };
+};
 
-  export const bgColorsHover = {
+export const bgColorsHover = {
   white: "hover:bg-white",
   black: "hover:bg-black-50",
   gray: "hover:bg-gray-50",
@@ -162,9 +169,9 @@ export function classNames(...classes) {
   fuchsia: "hover:bg-fuchsia-50",
   pink: "hover:bg-pink-50",
   rose: "hover:bg-rose-50",
-  };
+};
 
-  export const textColorsHex = {
+export const textColorsHex = {
   red: "rgb(185 28 28)",
   orange: "rgb(194 65 12)",
   amber: "rgb(180 83 9)",
@@ -182,9 +189,9 @@ export function classNames(...classes) {
   fuchsia: "rgb(162 28 175)",
   pink: "rgb(190 24 93)",
   rose: "rgb(190 18 60)",
-  };
+};
 
-  export const bgColorsHex = {
+export const bgColorsHex = {
   red: "rgb(254 226 226)",
   orange: "rgb(255 237 213)",
   amber: "rgb(254 243 199)",
@@ -202,18 +209,18 @@ export function classNames(...classes) {
   fuchsia: "rgb(250 232 255)",
   pink: "rgb(252 231 243)",
   rose: "rgb(255 228 230)",
-  };
+};
 
-  export const taskTypeMap: { [key: string]: string } = {
+export const taskTypeMap: { [key: string]: string } = {
   MULTICLASS_CLASSIFICATION: "Multiclass Classification",
-  };
+};
 
-  const charWidths = {
+const charWidths = {
   " ": 0.2,
   "!": 0.2,
   '"': 0.3,
   "#": 0.5,
-    "$": 0.5,
+  $: 0.5,
   "%": 0.5,
   "&": 0.5,
   "(": 0.2,
@@ -235,22 +242,22 @@ export function classNames(...classes) {
   "\\": 0.5,
   "]": 0.2,
   "^": 0.5,
-    "_": 0.2,
+  _: 0.2,
   "`": 0.5,
   "{": 0.2,
   "|": 0.2,
   "}": 0.2,
   "~": 0.5,
-  };
+};
 
-  for (let i = 65; i <= 90; i++) {
+for (let i = 65; i <= 90; i++) {
   charWidths[String.fromCharCode(i)] = 0.6;
-  }
+}
-  for (let i = 97; i <= 122; i++) {
+for (let i = 97; i <= 122; i++) {
   charWidths[String.fromCharCode(i)] = 0.5;
-  }
+}
 
-  export function measureTextWidth(text: string, fontSize) {
+export function measureTextWidth(text: string, fontSize) {
   let wordWidth = 0;
   for (let j = 0; j < text.length; j++) {
     let char = text[j];
@@ -258,9 +265,9 @@ export function classNames(...classes) {
     wordWidth += charWidth * fontSize;
   }
   return wordWidth;
-  }
+}
 
-  export function measureTextHeight(text: string, width, fontSize) {
+export function measureTextHeight(text: string, width, fontSize) {
   const charHeight = fontSize;
   const lineHeight = charHeight * 1.5;
   const words = text.split(" ");
@@ -278,36 +285,77 @@ export function classNames(...classes) {
   }
   totalHeight += lineHeight;
   return totalHeight;
+}
+
+export function toCamelCase(str: string) {
+  return str
+    .split(" ")
+    .map((word, index) =>
+      index === 0
+        ? word.toLowerCase()
+        : word[0].toUpperCase() + word.slice(1).toLowerCase()
+    )
+    .join("");
+}
+export function toFirstUpperCase(str: string) {
+  return str
+    .split(" ")
+    .map((word, index) => word[0].toUpperCase() + word.slice(1).toLowerCase())
+    .join("");
+}
+
+export function snakeToNormalCase(str: string) {
+  return str
+    .split("_")
+    .map((word, index) => {
+      if (index === 0) {
+        return word[0].toUpperCase() + word.slice(1).toLowerCase();
       }
+      return word.toLowerCase();
+    })
+    .join(" ");
+}
 
-  export function toCamelCase(str: string){
+export function roundNumber(x, decimals) {
-    return str
+  return Math.round(x * Math.pow(10, decimals)) / Math.pow(10, decimals);
-      .split(' ')
+}
-      .map((word, index) => (index === 0 ? word.toLowerCase() : word[0].toUpperCase() + word.slice(1).toLowerCase()))
-      .join('');
-  };
-  export function toFirstUpperCase(str: string){
-    return str
-      .split(' ')
-      .map((word, index) => (word[0].toUpperCase() + word.slice(1).toLowerCase()))
-      .join('');
-  };
 
-  export function snakeToNormalCase(str: string){
+export function getConnectedNodes(edge: Edge, nodes: Array<Node>): Array<Node> {
-    return str
-      .split('_')
-      .map((word, index) => {if(index === 0){return word[0].toUpperCase() + word.slice(1).toLowerCase()} return word.toLowerCase()})
-      .join(' ');
-  };
-  
-  export function roundNumber(x, decimals){
-    return Math.round(x * Math.pow(10, decimals))/Math.pow(10, decimals)
-  }
-  
-
-  export function getConnectedNodes(edge:Edge,nodes:Array<Node>):Array<Node>{
   const sourceId = edge.source;
   const targetId = edge.target;
-    const connectedNodes = nodes.filter(node=>node.id===sourceId||node.id===targetId)
+  const connectedNodes = nodes.filter(
-    return connectedNodes
+    (node) => node.id === sourceId || node.id === targetId
+  );
+  return connectedNodes;
+}
+
+export function isValidConnection(
+  data,
+  { source, target, sourceHandle, targetHandle }
+) {
+  if (
+    targetHandle === sourceHandle.split("|")[0] ||
+    sourceHandle.split("|")[0] === "str" ||
+    data.types[targetHandle] === sourceHandle.split("|")[0]
+  ) {
+    let sourceNode = data.reactFlowInstance.getNode(source).data.node;
+    if (!sourceNode) {
+      if (
+        !data.reactFlowInstance
+          .getEdges()
+          .find((e) => e.sourceHandle === sourceHandle)
+      ) {
+        return true;
       }
+    } else if (
+      (!sourceNode.template[sourceHandle.split("|")[1]].list &&
+        !data.reactFlowInstance
+          .getEdges()
+          .find((e) => e.sourceHandle === sourceHandle)) ||
+      sourceNode.template[sourceHandle.split("|")[1]].list
+    ) {
+      return true;
+    }
+  }
+  return false;
+}