refactoring data passed by the event

space_flow/src/CustomNodes/BooleanNode/index.tsx

@@ -3,17 +3,19 @@ import { Input } from "@mui/material";
 import { Handle, Position } from "reactflow";
 import { isValidConnection, nodeColors } from "../../utils";
 import ToggleComponent from "../../components/toggleComponent";
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
+import { typesContext } from "../../contexts/typesContext";
 
 export default function BooleanNode({ data }) {
   const [enabled, setEnabled] = useState(false);
+  const {types} = useContext(typesContext);
   return (
     <div className="prompt-node relative bg-white rounded-lg solid border flex flex-col justify-center">
       <div className="w-full flex items-center justify-between gap-8 p-4 bg-gray-50 border-b ">
         <div className="flex items-center gap-4 text-lg">
           <CheckCircleIcon
             className="w-10 h-10 p-1 rounded"
-            style={{ color: nodeColors[data.type] }}
+            style={{ color: nodeColors[types[data.type]] }}
           />
           Boolean
         </div>
@@ -26,15 +28,15 @@ export default function BooleanNode({ data }) {
         </button>
       </div>
       <div className="w-full flex justify-center p-5 h-full">
-        <ToggleComponent enabled={enabled} disabled={false} setEnabled={(x) => {setEnabled(x); data.enabled = x}} />
+        <ToggleComponent enabled={enabled} disabled={false} setEnabled={(x) => {setEnabled(x); data.value = x}} />
       </div>
       <Handle
         type="target"
         position={Position.Right}
-        id={data.name}
+        id={data.type}
         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] }}
+        style={{ borderLeftColor: nodeColors[types[data.type]] }}
       ></Handle>
     </div>
   );

space_flow/src/CustomNodes/ChatInputNode/index.tsx

@@ -3,10 +3,13 @@ import InputComponent from "../../components/inputComponent";
 import { isValidConnection, nodeColors, snakeToNormalCase } from "../../utils";
 import { Handle, Position } from "reactflow";
 import Tooltip from "../../components/TooltipComponent";
+import { typesContext } from "../../contexts/typesContext";
+import { useContext } from "react";
 
 export default function ChatInputNode({ data }) {
+  const {types} = useContext(typesContext);
   return (
-    <div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50" style={{color: nodeColors['chat']}}>
+    <div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50" style={{color: nodeColors[types[data.type]]}}>
       <Tooltip title="Prefix: str">
         <Handle
           type="source"
@@ -16,7 +19,7 @@ export default function ChatInputNode({ data }) {
             isValidConnection(data, connection)
           }
           className="ml-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
-          style={{ borderLeftColor: nodeColors['chat'] }}
+          style={{ borderLeftColor: nodeColors[types[data.type]] }}
         ></Handle>
       </Tooltip>
         <Tooltip title={"Message: str"}>
@@ -26,10 +29,10 @@ export default function ChatInputNode({ data }) {
         id={'str|str|'+data.id}
         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['chat']}}
+        style={{borderLeftColor: nodeColors[types[data.type]]}}
       ></Handle>
       </Tooltip>
-      <div className="flex gap-3 text-lg font-medium items-center" style={{color: nodeColors['chat']}}>
+      <div className="flex gap-3 text-lg font-medium items-center" style={{color: nodeColors[types[data.type]]}}>
         <Bars3CenterLeftIcon className="h-8 w-8 mt-1" />
         Input
       </div>

space_flow/src/CustomNodes/ChatOutputNode/index.tsx

@@ -3,10 +3,13 @@ import { Handle, Position } from "reactflow";
 import InputComponent from "../../components/inputComponent";
 import { isValidConnection, nodeColors, snakeToNormalCase } from "../../utils";
 import Tooltip from "../../components/TooltipComponent";
+import { useContext } from "react";
+import { typesContext } from "../../contexts/typesContext";
 
 export default function ChatOutputNode({ data }) {
+  const {types} = useContext(typesContext);
   return (
-    <div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50" style={{color: nodeColors['chat']}}>
+    <div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50" style={{color: nodeColors[types[data.type]]}}>
       <Tooltip title="Message: str">
         <Handle
           type="source"
@@ -18,7 +21,7 @@ export default function ChatOutputNode({ data }) {
         ></Handle>
       </Tooltip>
 
-      <div className="flex gap-3 text-lg font-medium items-center" style={{color: nodeColors['chat']}}>
+      <div className="flex gap-3 text-lg font-medium items-center" style={{color: nodeColors[types[data.type]]}}>
         Output
         <Bars3CenterLeftIcon className="h-8 w-8 mt-1" />
       </div>

space_flow/src/CustomNodes/GenericNode/index.tsx

@@ -8,11 +8,11 @@ import {
 } from "../../utils";
 import ParameterComponent from "./components/parameterComponent";
 import { typesContext } from "../../contexts/typesContext";
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
 
 export default function GenericNode({ data }) {
-  const Icon = nodeIcons[data.type];
   const {types} = useContext(typesContext);
+  const Icon = nodeIcons[types[data.type]];
 
   return (
     <div className="prompt-node relative bg-white w-96 rounded-lg solid border flex flex-col justify-center">
@@ -20,9 +20,9 @@ export default function GenericNode({ data }) {
         <div className="w-full flex items-center truncate gap-4 text-lg">
           <Icon
             className="w-10 h-10 p-1 rounded"
-            style={{ color: nodeColors[data.type] }}
+            style={{ color: nodeColors[types[data.type]] }}
           />
-          <div className="truncate">{data.name}</div>
+          <div className="truncate">{data.type}</div>
         </div>
         <button onClick={data.onDelete}>
           <TrashIcon className="w-6 h-6 hover:text-red-500"></TrashIcon>
@@ -74,10 +74,10 @@ export default function GenericNode({ data }) {
           <div className="px-5 py-2 mt-2 text-center">Output:</div>
           <ParameterComponent
             data={data}
-            color={nodeColors[data.type]}
+            color={nodeColors[types[data.type]]}
-            title={data.name}
+            title={data.type}
             tooltipTitle={"Type: str"}
-            id={data.name + "|" + data.id + data.node.base_classes.map((b) => ("|" + b))}
+            id={data.type + "|" + data.id + data.node.base_classes.map((b) => ("|" + b))}
             type={'str'}
             left={false}
           />

space_flow/src/CustomNodes/InputNode/index.tsx

@@ -7,10 +7,12 @@ import {
   snakeToNormalCase,
 } from "../../utils";
 import { Handle, Position } from "reactflow";
-import { useEffect } from "react";
+import { useContext, useEffect } from "react";
 import Tooltip from "../../components/TooltipComponent";
+import { typesContext } from "../../contexts/typesContext";
 
 export default function InputNode({ data }) {
+  const {types} = useContext(typesContext);
   return (
     <div className="prompt-node relative bg-white w-96 rounded-lg solid border flex flex-col justify-center">
       <Tooltip title="Prefix: str">
@@ -22,7 +24,7 @@ export default function InputNode({ data }) {
             isValidConnection(data, connection)
           }
           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.type] }}
+          style={{ borderLeftColor: nodeColors[types[data.type]] }}
         ></Handle>
       </Tooltip>
 
@@ -30,7 +32,7 @@ export default function InputNode({ data }) {
         <div className="flex items-center gap-4 text-lg">
           <Bars3CenterLeftIcon
             className="w-10 h-10 p-1 rounded"
-            style={{ color: nodeColors[data.type] }}
+            style={{ color: nodeColors[types[data.type]] }}
           />
           String
         </div>
@@ -47,17 +49,17 @@ export default function InputNode({ data }) {
         disabled={false}
           value=""
           onChange={(e) => {
-            data.text = e;
+            data.value = e;
           }}
         />
       </div>
       <Handle
         type="target"
         position={Position.Right}
-        id={data.name}
+        id={data.type}
         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] }}
+        style={{ borderLeftColor: nodeColors[types[data.type]] }}
       ></Handle>
     </div>
   );

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

@@ -17,18 +17,12 @@ export default function ExtraSidebar() {
   useEffect(() => {
     getAll().then((d) => {
       setData(d.data);
-      // console.log(d.data);
-    });
-  }, []);
-
-  useEffect(() => {
-    if(data){
       setTypes(
-        Object.keys(data).reduce(
+        Object.keys(d.data).reduce(
           (acc, curr) => {
-            Object.keys(data[curr]).forEach((c) => {
+            Object.keys(d.data[curr]).forEach((c) => {
               acc[c] = curr;
-              data[curr][c].base_classes?.forEach((b) => {
+              d.data[curr][c].base_classes?.forEach((b) => {
                 acc[b] = curr;
               });
             });
@@ -43,8 +37,8 @@ export default function ExtraSidebar() {
           }
         )
       );
-    }
+    });
-  }, [data, setTypes])
+  }, []);
 
   function onDragStart(event: React.DragEvent<any>, data) {
     event.dataTransfer.effectAllowed = "move";
@@ -67,8 +61,7 @@ export default function ExtraSidebar() {
                   style={{ borderLeftColor: nodeColors[d] }}
                   onDragStart={(event) =>
                     onDragStart(event, {
-                      type: d,
+                      type: t,
-                      name: t,
                       node: data[d][t],
                     })
                   }
@@ -94,8 +87,8 @@ export default function ExtraSidebar() {
               style={{ borderLeftColor: nodeColors["chat"] }}
               onDragStart={(event) =>
                 onDragStart(event, {
-                  type: "chat",
+                  type: "chatInput",
-                  name: "chatInput",
+                  node: {},
                 })
               }
             >
@@ -112,8 +105,8 @@ export default function ExtraSidebar() {
               style={{ borderLeftColor: nodeColors["chat"] }}
               onDragStart={(event) =>
                 onDragStart(event, {
-                  type: "chat",
+                  type: "chatOutput",
-                  name: "chatOutput",
+                  node: {},
                 })
               }
             >
@@ -136,8 +129,8 @@ export default function ExtraSidebar() {
               style={{ borderLeftColor: nodeColors["advanced"] }}
               onDragStart={(event) =>
                 onDragStart(event, {
-                  type: "advanced",
+                  type: "str",
-                  name: "str",
+                  node: {},
                 })
               }
             >
@@ -154,8 +147,8 @@ export default function ExtraSidebar() {
               style={{ borderLeftColor: nodeColors["advanced"] }}
               onDragStart={(event) =>
                 onDragStart(event, {
-                  type: "advanced",
+                  type: "bool",
-                  name: "bool",
+                  node: {},
                 })
               }
             >

space_flow/src/pages/FlowPage/index.tsx

@@ -80,8 +80,8 @@ export default function FlowPage() {
       const reactflowBounds = reactFlowWrapper.current.getBoundingClientRect();
       let data = JSON.parse(event.dataTransfer.getData("json"));
       if (
-        data.name !== "chatInput" ||
+        data.type !== "chatInput" ||
-        (data.name === "chatInput" &&
+        (data.type === "chatInput" &&
           !reactFlowInstance.getNodes().some((n) => n.type === "chatInputNode"))
       ) {
         const position = reactFlowInstance.project({
@@ -89,24 +89,24 @@ export default function FlowPage() {
           y: event.clientY - reactflowBounds.top,
         });
         let newId = getId();
+        
         const newNode = {
           id: newId,
           type:
-            data.name === "str"
+            (data.type === "str"
               ? "inputNode"
-              : data.name === "chatInput"
+              : (data.type === "chatInput"
               ? "chatInputNode"
-              : data.name === "chatOutput"
+              : (data.type === "chatOutput"
               ? "chatOutputNode"
-              : data.name === "bool"
+              : (data.type === "bool"
               ? "booleanNode"
-              : "genericNode",
+              : "genericNode")))),
           position,
           data: {
             ...data,
             id: newId,
-            input: "",
+            value: null,
-            enabled: false,
             reactFlowInstance,
             onDelete: () => {
               setNodes(