Node Connection

README.md

@@ -112,6 +112,10 @@ stream both [Gradio](https://gradio.app) ( and later [Streamlit](https://streaml
 
 
 ### Frontend 🖥️
+- Node
+    - Append edges together
+        - (In the works) Connection API paramters; Allow people to use Gradio Flow as a module base platform
+
 - Node Menu
     - fixed some bugs from ``+ button`` for catching errors and wrong inputs
     - ``+ button`` now includes hugginface spaces, and gradio share
@@ -128,9 +132,7 @@ stream both [Gradio](https://gradio.app) ( and later [Streamlit](https://streaml
 
 ### In The Works 🚧
 - App Name change
-- Streamlit application within Gradio-Flow
 - Mutiple windows within the react-flow environment 
-- Appending streamlit into gradio-flow
 - Directory tree search that looks for files that contain classes and functions that are registered under the decorators that are in ``backend/src/resources`` allowing you to append all your registered functions with only using the frontend.
 
 

backend/app.py

@@ -72,6 +72,11 @@ def append_port():
     visable.append(current)
     return jsonify({"executed" : True})
 
+@app.route("/api/append/connection", methods=["POST"])
+def append_connection():
+    current = request.json
+    return jsonify({"executed" : True})
+
 @app.route("/api/remove/port" , methods=["POST"])
 def remove_port():
     current = request.json

backend/src/demo/stream.py

@@ -0,0 +1,22 @@
+import streamlit as st
+
+def add_port(type='p2p', mode='input', key="bitconnect", additional_info={}):
+    return {
+        'type' : type,
+        'mode' : mode,
+        'key' : key,
+        'additional': additional_info
+    }
+
+if __name__ == "__main__":
+    st.title("Test Add Handel")
+    with open('./stream.py') as f:
+        st.code(f.read(), "python")
+    with st.expander("Add_Port"):
+        type = st.multiselect("type", ["p2p", 'https', 'local'])
+        mode = st.selectbox("mode", ("input", "output"))
+        key = st.text_input("Key", "")
+        btn_click = st.button("package")
+        
+        if btn_click:
+            st.json(add_port(type, mode, key))

backend/src/resources/module.py

@@ -62,10 +62,10 @@ def InterLauncher(name, interface, listen=2000, **kwargs):
         package and send it to the flaks api
     """
     port= kwargs["port"] if "port" in kwargs else DOCKER_PORT.determinePort() # determine the next open port is no port is listed **kwargs
-    
+    packet = {"port" : port, "host" : f'http://localhost:{port}', "file" : "Not Applicable", "name" : name, "kwargs" : kwargs}
     try:
         # (POST) send the information of the gradio to the flask api
-        requests.post(f"http://{DOCKER_LOCAL_HOST}:{listen}/api/append/port", json={"port" : port, "host" : f'http://localhost:{port}', "file" : "Not Applicable", "name" : name, "kwargs" : kwargs})
+        requests.post(f"http://{DOCKER_LOCAL_HOST}:{listen}/api/append/port", json=packet)
     except Exception as e: 
         # If there is an Exception then notify the user and end the method
         print(f"**{bcolor.BOLD}{bcolor.FAIL}CONNECTION ERROR{bcolor.ENDC}** 🐛The listening api is either not up or you choose the wrong port.🐛 \n {e}")
@@ -93,13 +93,14 @@ def InterLauncher(name, interface, listen=2000, **kwargs):
                      ssl_keyfile_password=kwargs['ssl_keyfile_password'] if "ssl_keyfile_password" in kwargs else None,
                      quiet=kwargs['quiet'] if "quiet" in kwargs else False)
     
-    try:
-        # (POST) stop the interface if user hits ctrl+c 
-        # send the information of the gradio to the flask
-        # api to remove it from the list within the flask api
-        requests.post(f"http://{DOCKER_LOCAL_HOST}:{ listen }/api/remove/port", json={"port" : port, "host" : f'http://localhost:{port}', "file" : 'Not Applicable', "name" : name, "kwargs" : kwargs})
-    except Exception as e:    
-        print(f"**{bcolor.BOLD}{bcolor.FAIL}CONNECTION ERROR{bcolor.ENDC}** 🐛The api either lost connection or was turned off...🐛 \n {e}")
+    if stream_exist(packet=packet, listen=listen):
+        try:
+            # (POST) stop the interface if user hits ctrl+c 
+            # send the information of the gradio to the flask
+            # api to remove it from the list within the flask api
+            requests.post(f"http://{DOCKER_LOCAL_HOST}:{ listen }/api/remove/port", json=packet)
+        except Exception as e:    
+            print(f"**{bcolor.BOLD}{bcolor.FAIL}CONNECTION ERROR{bcolor.ENDC}** 🐛The api either lost connection or was turned off...🐛 \n {e}")
 
 def tabularGradio(funcs, names=[], name="Tabular Temp Name", **kwargs):
     """
@@ -112,12 +113,13 @@ def tabularGradio(funcs, names=[], name="Tabular Temp Name", **kwargs):
         names = [_.__name__ for _ in fn]
         
     port= kwargs["port"] if "port" in kwargs else DOCKER_PORT.determinePort()
-    
+    packet = None
     # send this to the backend api for it to be read by the react frontend
     if 'listen' in kwargs:
+        packet = {"port" : port, "host" : f'http://localhost:{port}', "file" : 'Not Applicable', "name" : name, "kwargs" : kwargs}
         try:
             # (POST) send the information of the gradio to the flask api
-            requests.post(f"http://{DOCKER_LOCAL_HOST}:{ kwargs[ 'listen' ] }/api/append/port", json={"port" : port, "host" : f'http://localhost:{port}', "file" : 'Not Applicable', "name" : name, "kwargs" : kwargs})
+            requests.post(f"http://{DOCKER_LOCAL_HOST}:{ kwargs[ 'listen' ] }/api/append/port", json=packet)
         except Exception as e:
             print(f"**{bcolor.BOLD}{bcolor.FAIL}CONNECTION ERROR{bcolor.ENDC}** 🐛The listening api is either not up or you choose the wrong port.🐛 \n {e}")
             return
@@ -145,9 +147,10 @@ def tabularGradio(funcs, names=[], name="Tabular Temp Name", **kwargs):
                                             quiet=kwargs['quiet'] if "quiet" in kwargs else False)
     
     # Ctrl+C that ends the process and then continue the code which will remove from the api
-    if 'listen' in kwargs:
+    if 'listen' in kwargs and stream_exist(packet=packet,listen=kwargs['listen']):
+        
         try:
-            requests.post(f"http://{DOCKER_LOCAL_HOST}:{ kwargs[ 'listen' ] }/api/remove/port", json={"port" : port, "host" : f'http://localhost:{port}', "file" : 'Not Applicable', "name" : name, "kwargs" : kwargs})
+            requests.post(f"http://{DOCKER_LOCAL_HOST}:{ kwargs[ 'listen' ] }/api/remove/port", json=packet)
         except Exception as e:    
             print(f"**{bcolor.BOLD}{bcolor.FAIL}CONNECTION ERROR{bcolor.ENDC}** 🐛The api either lost connection or was turned off...🐛 \n {e}")
     
@@ -304,9 +307,11 @@ def GradioModule(cls):
                 then when the gradio stops then remove it from the api
             """
             port= kwargs["port"] if "port" in kwargs else DOCKER_PORT.determinePort() 
+            packet = None
             if 'listen' in kwargs:
+                packet = { type : { 'format' : "class", 'stream' : "gradio" }, "port" : port, "host" : f'http://localhost:{port}', "file" : getfile(self.__cls__.__class__), "name" : self.__cls__.__class__.__name__, "kwargs" : kwargs}
                 try:
-                    requests.post(f"http://{DOCKER_LOCAL_HOST}:{ kwargs[ 'listen' ] }/api/append/port", json={"port" : port, "host" : f'http://localhost:{port}', "file" : getfile(self.__cls__.__class__), "name" : self.__cls__.__class__.__name__, "kwargs" : kwargs})
+                    requests.post(f"http://{DOCKER_LOCAL_HOST}:{ kwargs[ 'listen' ] }/api/append/port", json=packet)
                 except Exception:
                     print(f"**{bcolor.BOLD}{bcolor.FAIL}CONNECTION ERROR{bcolor.ENDC}** 🐛The listening api is either not up or you choose the wrong port.🐛")
                     return
@@ -331,14 +336,25 @@ def GradioModule(cls):
                                   ssl_certfile=kwargs['ssl_certfile'] if "ssl_certfile" in kwargs else None,
                                   ssl_keyfile_password=kwargs['ssl_keyfile_password'] if "ssl_keyfile_password" in kwargs else None,
                                   quiet=kwargs['quiet'] if "quiet" in kwargs else False) 
-            if 'listen' in kwargs:
+            if 'listen' in kwargs and stream_exist(packet=packet, listen=kwargs[ 'listen' ]):
                 try:
-                    requests.post(f"http://{DOCKER_LOCAL_HOST}:{ kwargs[ 'listen' ] }/api/remove/port", json={"port" : port, "host" : f'http://localhost:{port}', "file" : getfile(self.__cls__.__class__), "name" : self.__cls__.__class__.__name__, "kwargs" : kwargs})
+                    requests.post(f"http://{DOCKER_LOCAL_HOST}:{ kwargs[ 'listen' ] }/api/remove/port", json=packet)
                 except Exception:
                     print(f"**{bcolor.BOLD}{bcolor.FAIL}CONNECTION ERROR{bcolor.ENDC}** 🐛The api either lost connection or was turned off...🐛")
             return
     return Decorator
 
+def stream_exist(packet, listen):
+    """
+    Given the port is still up this will return if the 
+    json sent in the beginning still exsit with the api
+    """
+    state = requests.get(f"http://{DOCKER_LOCAL_HOST}:{listen}/api/open/ports").json()
+    for mod in state:
+        if packet == mod:
+            return True
+    return False
+
 # console colour changer 
 class bcolor:
     HEADER = '\033[95m'

frontend/src/components/Modal/importer.js

@@ -55,7 +55,7 @@ export default function Import(props){
                             </li>
                         </ul>
                         {subTab === 0 && <Local/>}
-                        {subTab === 1 && <Shared textHandler={props.textHandler} appendHandler={props.appendHandler} handelError={props.handelError} catch={props.catch}/>}
+                        {subTab === 1 && <Shared type="gradio" textHandler={props.textHandler} appendHandler={props.appendHandler} handelError={props.handelError} catch={props.catch}/>}
 
                         {props.catch && <div className='p-5'>
                                         <Message floating negative>
@@ -79,6 +79,12 @@ export default function Import(props){
                                         </div>}
                         </div> 
                     }
+                    { tab === "streamlit" && 
+                    <div className='w-full bg-white'>
+                        <Shared type="streamlit" textHandler={props.textHandler} appendHandler={props.appendHandler} handelError={props.handelError} catch={props.catch}/>
+                    </div>
+                    }
+
                 </Modal>
     </div>)
 }
@@ -99,6 +105,97 @@ function Local(props){
     )
 }
 
+function Stream(props){
+    const [preview, setPreview] = useState("")
+    const [fetchable, setFetch] = useState(false)
+
+    const isFetchable = async (url) => {
+        const pattern = {
+            share : /^https?:\/\/*([0-9]{5})*(-gradio)*(.app)?(\/)?$/,
+            hugginFace : /^https?:\/\/*(hf.space)\/*(embed)\/*([a-zA-Z0-9+_-]+)\/*([a-zA-Z0-9+_-]+)\/*([+])?(\/)?$/
+        } 
+
+        if (!pattern.share.test(url) &&
+            !pattern.hugginFace.test(url)){
+                setFetch(false)
+                return
+            }
+
+        
+        fetch(url, {mode : "no-cors"}).then((re) => {
+            console.log(re)
+            if(re.url.includes("http://localhost:3000")){
+                setFetch(false)    
+            } else { 
+                setFetch(true)
+                props.catch ? props.handelError(false) : props.handelError(props.catch)  
+            }
+            
+          }).catch((err)=>{
+            setFetch(false)
+          })
+          setFetch(false)
+        }
+    
+    return (
+        <div className='w-full shadow-lg' onKeyPress={(e)=>{
+            if (e.key.includes("Enter")) props.appendHandler(props.type)
+        }}>
+            <div className='p-5'>
+            <Message floating>            
+                         <div className={`flex items-center rounded-md bg-light-white mt-6 border-dashed`}>
+                            <label className="relative block w-full p-5 focus:shadow-xl">
+                                <span className={`absolute inset-y-0 left-0 flex items-center pl-8`}>
+                                    <BsSearch className="block float-left cursor-pointer text-gray-500"/>
+                                </span>
+                                <input className={`placeholder:italic placeholder:text-slate-400 text-black dark:text-white block w-full border border-slate-300 border-dashed rounded-md py-2 pl-9 pr-3 focus:shadow-xl focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-sm bg-transparent`}  
+                                    placeholder={`URL`}
+                                    type="text" name="search"
+                                    onChange={(e) => {
+                                        props.textHandler(e, "text")
+                                        setPreview(e.target.value)
+                                         setFetch(isFetchable(e.target.value))
+                                    }}
+                                    />
+                            </label>
+                        </div>   
+                        { fetchable === true && <div className=' w-full'>
+                            <h1 className=' text-xl font-sans font-bold text-center text-black mb-2'> Preview </h1>
+                            <div className='p-3 px-1 w-3/4 h-80 bg-gray-200 mr-auto ml-auto rounded-xl'>
+                                <div className='w-full h-full overflow-hidden relative -ml-[5px]'>
+                                <iframe title='Preview' src={preview} className=' absolute top-0 bottom-0 left-0 -right-[25px] overflow-y-scroll w-full h-full mr-auto ml-auto'/>
+                                </div>
+                            </div>
+                        </div>}
+                        <div className={`flex items-center rounded-md bg-light-white dark:bg-[#1b1c1d] mt-6  border-dashed`}>
+                    <label className="relative block p-5 w-full focus:shadow-xl">
+                        <span className={`absolute inset-y-0 left-0 flex items-center pl-7`}>
+                            <Icon className=" text-gray-500 block float-left cursor-pointer mr-2" name="address card"/>
+                        </span>
+                        <input className={`placeholder:italic placeholder:text-slate-400 text-black dark:text-white block bg-transparent w-full border border-slate-300 border-dashed rounded-md py-2 pl-9 pr-3 focus:shadow-xl focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1  sm:text-sm`} 
+                            placeholder={`Name ( > 20 Characters)` }
+                            type="text" name="search"
+                            autoComplete='off'
+                            onChange={(e) => {
+                                props.textHandler(e, "name")
+                               }}
+                            />
+                    </label>
+                    </div> 
+                    <div className=' right-0 ml-5'>
+                        <button className="relative inline-flex justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm font-sans font-bold text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800"
+                                onClick={()=>{props.appendHandler(props.type)}}>
+                            <span className="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-[#1b1c1d] rounded-md group-hover:bg-opacity-0">
+                                Enter
+                            </span>
+                        </button>
+                    </div>
+                </Message>
+                </div>
+                </div>  
+    )
+}
+
 function Shared(props){
     const [preview, setPreview] = useState("")
     const [fetchable, setFetch] = useState(false)
@@ -133,7 +230,7 @@ function Shared(props){
     
     return (
         <div className='w-full shadow-lg' onKeyPress={(e)=>{
-            if (e.key.includes("Enter")) props.appendHandler()
+            if (e.key.includes("Enter")) props.appendHandler(props.type)
         }}>
             <div className='p-5'>
             <Message floating>            
@@ -178,7 +275,7 @@ function Shared(props){
                     </div> 
                     <div className=' right-0 ml-5'>
                         <button className="relative inline-flex justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm font-sans font-bold text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800"
-                                onClick={()=>{props.appendHandler()}}>
+                                onClick={()=>{props.appendHandler(props.type)}}>
                             <span className="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-[#1b1c1d] rounded-md group-hover:bg-opacity-0">
                                 Enter
                             </span>

frontend/src/components/Navagation/navbar.js

@@ -1,10 +1,13 @@
 import React, { Component } from "react";
-import {BsArrowLeftShort} from 'react-icons/bs';
-import "../../css/dist/output.css"
-import {ReactComponent as ReactLogo} from '../../images/logo.svg'
-import { random_colour, random_emoji } from "../../helper/visual";
 import { Icon } from 'semantic-ui-react'
 import Import from '../Modal/importer'
+import { random_colour, random_emoji } from "../../helper/visual";
+
+import "../../css/dist/output.css"
+
+import {BsArrowLeftShort} from 'react-icons/bs';
+import {ReactComponent as ReactLogo} from '../../images/logo.svg'
+
 export default class Navbar extends Component{
     constructor(props){
         super(props) 
@@ -55,7 +58,7 @@ export default class Navbar extends Component{
     /**
      * Append new node from the user 
      */
-    append_gradio = async () => {
+    appendStreamNode = async (type) => {
         const pattern = {
             local : /^https?:\/\/(localhost)*(:[0-9]+)?(\/)?$/,
             share : /^https?:\/\/*([0-9]{5})*(-gradio)*(.app)?(\/)?$/,
@@ -78,7 +81,7 @@ export default class Navbar extends Component{
             } 
 
         fetch(this.state.text, {method : "GET", mode: 'no-cors'}).then((re) => {
-            fetch("http://localhost:2000/api/append/port", {method: 'POST', mode : 'cors', headers : { 'Content-Type' : 'application/json' }, body: JSON.stringify({file : "", kwargs : {}, name : this.state.name === "" ?`temp_class_${this.temp_host++}` : `${this.state.name}`, port: 0 , host : this.state.text}) }).then(resp => {
+            fetch("http://localhost:2000/api/append/port", {method: 'POST', mode : 'cors', headers : { 'Content-Type' : 'application/json' }, body: JSON.stringify({file : "", kwargs : { type : type }, name : this.state.name === "" ?`temp_class_${this.temp_host++}` : `${this.state.name}`, port: 0 , host : this.state.text}) }).then(resp => {
                 this.setState({'text': "",'name' : "",'error' : false,'modal' : false  })
 
             }).catch(() => this.setState({'text': '', 'name' : '',  'error' : true, }))
@@ -218,7 +221,7 @@ export default class Navbar extends Component{
                 <Import open={this.state.modal} 
                         quitHandeler={this.handelModal}
                         textHandler={this.updateText}
-                        appendHandler={this.append_gradio}
+                        appendHandler={this.appendStreamNode}
                         handelError={this.handelError}
                         catch={this.state.error}/>
                 

frontend/src/components/Nodes/Custom.js

@@ -1,4 +1,5 @@
 import React from "react"
+import { Handle, Position } from "react-flow-renderer"
 import {TbResize} from 'react-icons/tb'
 import {BiCube, BiRefresh} from 'react-icons/bi'
 import {BsTrash, BsArrowDownRightSquare} from 'react-icons/bs'
@@ -20,22 +21,22 @@ export default class CustomNodeIframe extends React.Component {
       this.state = {
         id : id,
         reachable : this.isFetchable(data.host),
-        selected : true,
+        selected : false,
         data : data,
         width : 540,
         height : 600,
-        size : true,
+        size : false,
         iframe : 0,
       }
  
     }
 
     handelSelected = () => {
-      this.setState({'selected' : !this.state.selected})
+      this.setState(prevState => ({'selected' : !prevState.selected, 'size' : false }))
     }
 
     handelSizeState = () => {
-        this.setState({'size' : !this.state.size})
+        this.setState(prevState => ({'size' : !prevState.size}))
       }
 
     isFetchable = async (host) => {
@@ -57,7 +58,7 @@ export default class CustomNodeIframe extends React.Component {
       if(!this.isFetchable(this.state.data.host)){ 
         this.onNodeClick(this.state.id)
       } else{
-        this.setState({'iframe' : this.state.iframe + 1})
+        this.setState(prevState => ({'iframe' : prevState.iframe + 1}))
       }
     }
 
@@ -68,7 +69,7 @@ export default class CustomNodeIframe extends React.Component {
 
     handelSize(evt, increment, change){
       if (evt === "increment") {
-        this.setState({[`${change}`] :  change === "width" ? this.state.width + increment : this.state.height + increment })
+        this.setState(prevState => ({[`${change}`] :  change === "width" ? prevState.width + increment : prevState.height + increment }))
         change === "width" ? this.myRef.current.style.width = `${this.state.width + increment}px` : this.myRef.current.style.height = `${this.state.height + increment}px` 
       }
 
@@ -128,7 +129,7 @@ export default class CustomNodeIframe extends React.Component {
       if (!this.state.reachable) {this.onNodeClick(this.state.id) }
       return (<>
                   <div className=" flex w-full h-10 top-0 cursor-pointer" onClick={this.handelEvent}>
-                  <div title="Collaspse Node" className=" duration-300 cursor-pointer shadow-xl border-2 border-white h-10 w-10 mr-2 -mt-3 bg-Warm-Blue rounded-xl" onClick={this.handelSelected}><CgLayoutGridSmall className="h-full w-full text-white p-1"/></div>
+                  <div title={this.state.selected ? "Collaspse Node" : "Expand Node"} className=" duration-300 cursor-pointer shadow-xl border-2 border-white h-10 w-10 mr-2 -mt-3 bg-Warm-Blue rounded-xl" onClick={this.handelSelected}><CgLayoutGridSmall className="h-full w-full text-white p-1"/></div>
 
     
                     <div className={` flex ${this.state.selected ? '' : 'w-0 hidden'}`}>
@@ -145,7 +146,7 @@ export default class CustomNodeIframe extends React.Component {
                   
                   </div>               
                 
-                  <div id={`draggable`} className={`relative w-[540px] h-[600px] overflow-hidden m-0 p-0 shadow-2xl`} ref={this.myRef}>
+                  <div id={`draggable`} className={`relative overflow-hidden m-0 p-0 shadow-2xl ${this.state.selected ? "w-[540px] h-[600px]" : "hidden"} duration-200`} ref={this.myRef}>
 
                     <div className={`absolute p-5 h-full w-full ${this.state.data.colour} shadow-2xl rounded-xl -z-20`}></div>
                                         <iframe 
@@ -158,6 +159,32 @@ export default class CustomNodeIframe extends React.Component {
                         sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"
                         ></iframe>
                   </div>
+                  
+                  {/*Input*/}
+                  <Handle type="target"
+                          id="input"
+                          position={Position.Left}
+                          style={!this.state.selected ? 
+                                {"paddingRight" : "5px" , "marginTop" : "15px", "height" : "25px", "width" : "25px",  "borderRadius" : "3px", "zIndex" : "10000", "background" : "white", "boxShadow" : "3px 3px #888888"}
+                                :{"paddingRight" : "5px" ,"height" : "25px", "width" : "25px",  "borderRadius" : "3px", "zIndex" : "10000", "background" : "white", "boxShadow" : "3px 3px #888888"}}
+                          />
+                  
+                  {/*Output*/}
+                  <Handle type="source" id="output" position={Position.Right} style={ !this.state.selected ?
+                      {"paddingLeft" : "5px", "marginTop" : "15px" ,"height" : "25px", "width" : "25px",  "borderRadius" : "3px", "zIndex" : "10000", "background" : "white", "boxShadow" : "3px 3px #888888"}
+                      : {"paddingLeft" : "5px", "marginTop" : "0px" ,"height" : "25px", "width" : "25px",  "borderRadius" : "3px", "zIndex" : "10000", "background" : "white", "boxShadow" : "3px 3px #888888"}}/>
+
+                  {
+                    !this.state.selected &&
+                    <div 
+                    id={`draggable`}
+                    className={` w-[340px] h-[140px]  text-white text-md flex flex-col text-center items-center cursor-grab shadow-lg
+                                 p-5 px-2 rounded-md hover:animate-pulse break-all -z-20 ${this.state.data.colour}`}>
+
+                    <div  className="absolute text-6xl opacity-60 z-10 pt-8 ">{this.state.data.emoji}</div>    
+                    <h2 className={`max-w-full font-sans text-blue-50 leading-tight font-bold text-3xl flex-1 z-20 pt-10`} style={{"textShadow" : "0px 1px 2px rgba(0, 0, 0, 0.25)"}} >{this.state.data.label}</h2>
+                    </div >     
+                  }
                   { this.state.size && !navigator.userAgent.match(/firefox|fxios/i)  && <>
                   
                   <div id="remove-ghost" className={`absolute select-none -bottom-0 right-0 w-5 h-5border-2 shadow-2xl rounded-xl z-10 cursor-nwse-resize hover:opacity-50  `}
@@ -172,6 +199,7 @@ export default class CustomNodeIframe extends React.Component {
   
                       </>
                   }
+                
 
         </>)
     }

frontend/src/components/ReactFlow/ReactFlowEnv.js

@@ -3,6 +3,11 @@ import '../../css/dist/output.css'
 import ReactFlow, { Background,
                     applyNodeChanges,
                     ReactFlowProvider,
+                    addEdge,
+                    updateEdge,
+                    applyEdgeChanges,
+                    Controls,
+                    MarkerType
                     } from 'react-flow-renderer';
 import React ,{ useState, useCallback, useRef, useEffect } from 'react';
 import Navbar from '../Navagation/navbar';
@@ -19,6 +24,7 @@ export default function ReactEnviorment() {
 
     const [theme, setTheme] = useState(useThemeDetector)
     const [nodes, setNodes] = useState([]);
+    const [edges, setEdges] = useState([])
     const [reactFlowInstance, setReactFlowInstance] = useState(null);
     const reactFlowWrapper = useRef(null);
     const [tool, setTool] = useState(false)
@@ -42,6 +48,30 @@ export default function ReactEnviorment() {
       [setNodes]
     );
   
+    const onEdgesChange = useCallback(
+      (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
+      [setEdges]
+    );
+
+    const onEdgeUpdate = useCallback(
+      (oldEdge, newConnection) => setEdges((els) => updateEdge(oldEdge, newConnection, els)),
+      []
+    );
+
+    const onConnect = useCallback(
+      (params) => {
+        console.log(params)
+        setEdges((els) => addEdge({...params, animated : true, style : {stroke : "#00FF4A", strokeWidth : "3"}, markerEnd: {type: MarkerType.ArrowClosed, color : "#00FF4A"}}, els))
+        fetch("http://localhost:2000/api/append/connection", {method : "POST", mode : 'cors', headers : { 'Content-Type' : 'application/json' }, body: JSON.stringify({"source": params.source, "target" : params.target})}).then( res => {
+          console.log(res)
+        }).catch(error => {
+          console.log(error)
+        })
+      },
+      [setEdges]
+    );
+
+
   
     const onDragOver = useCallback((event) => {
       event.preventDefault();
@@ -122,12 +152,13 @@ export default function ReactEnviorment() {
           <BsFillEraserFill title="Erase" className={`mt-6 text-black dark:text-white ml-auto mr-auto ${tool ? "visible" : " invisible"} `} onClick={() => onErase()}/>
         </div>
         <div className={`flex h-screen w-screen ${theme ? "dark" : ""} transition-all`}>    
-          <Navbar onDelete={deleteNodeContains} colour={JSON.parse(localStorage.getItem('colour'))} emoji={JSON.parse(localStorage.getItem('emoji'))}/>
           <ReactFlowProvider>
+          <Navbar onDelete={deleteNodeContains} colour={JSON.parse(localStorage.getItem('colour'))} emoji={JSON.parse(localStorage.getItem('emoji'))}/>
             <div className="h-screen w-screen" ref={reactFlowWrapper}>
-              <ReactFlow nodes={nodes} nodeTypes={types} onNodesChange={onNodesChange} onNodesDelete={deleteNode} onDragOver={onDragOver} onDrop={onDrop} onInit={setReactFlowInstance}  fitView>
-              <Background variant='dots' size={1} className=" bg-white dark:bg-neutral-800"/>
-            </ReactFlow>
+              <ReactFlow nodes={nodes} edges={edges} nodeTypes={types} onNodesChange={onNodesChange} onNodesDelete={deleteNode} onEdgesChange={onEdgesChange} onEdgeUpdate={onEdgeUpdate} onConnect={onConnect} onDragOver={onDragOver} onDrop={onDrop} onInit={setReactFlowInstance}  fitView>
+                <Background variant='dots' size={1} className=" bg-white dark:bg-neutral-800"/>
+                <Controls/>
+              </ReactFlow>
             </div>
           </ReactFlowProvider>
         </div>

frontend/src/css/dist/output.css

@@ -557,6 +557,10 @@ video {
   visibility: hidden;
 }
 
+.fixed {
+  position: fixed;
+}
+
 .absolute {
   position: absolute;
 }
@@ -634,6 +638,14 @@ video {
   z-index: 50;
 }
 
+.z-40 {
+  z-index: 40;
+}
+
+.z-30 {
+  z-index: 30;
+}
+
 .float-left {
   float: left;
 }
@@ -694,6 +706,14 @@ video {
   margin-top: 0.25rem;
 }
 
+.mt-auto {
+  margin-top: auto;
+}
+
+.mb-auto {
+  margin-bottom: auto;
+}
+
 .block {
   display: block;
 }
@@ -754,6 +774,22 @@ video {
   height: 41px;
 }
 
+.h-\[200px\] {
+  height: 200px;
+}
+
+.h-\[140px\] {
+  height: 140px;
+}
+
+.h-\[0px\] {
+  height: 0px;
+}
+
+.h-0 {
+  height: 0px;
+}
+
 .w-full {
   width: 100%;
 }
@@ -794,6 +830,10 @@ video {
   width: 540px;
 }
 
+.w-\[340px\] {
+  width: 340px;
+}
+
 .w-5 {
   width: 1.25rem;
 }
@@ -806,6 +846,14 @@ video {
   width: 100vw;
 }
 
+.w-\[0px\] {
+  width: 0px;
+}
+
+.w-7 {
+  width: 1.75rem;
+}
+
 .max-w-full {
   max-width: 100%;
 }
@@ -1125,6 +1173,12 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.from-Peach-Yellow {
+  --tw-gradient-from: #FFEDBC;
+  --tw-gradient-to: rgb(255 237 188 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .from-Deep-Space-Black {
   --tw-gradient-from: #000000;
   --tw-gradient-to: rgb(0 0 0 / 0);
@@ -1143,12 +1197,6 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.from-Peach-Yellow {
-  --tw-gradient-from: #FFEDBC;
-  --tw-gradient-to: rgb(255 237 188 / 0);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
 .via-Vapor-Purple {
   --tw-gradient-to: rgb(148 22 127 / 0);
   --tw-gradient-stops: var(--tw-gradient-from), #94167f, var(--tw-gradient-to);
@@ -1224,6 +1272,10 @@ video {
   --tw-gradient-to: #6E48AA;
 }
 
+.to-Peach-Yellow {
+  --tw-gradient-to: #FFEDBC;
+}
+
 .to-Peach-Red {
   --tw-gradient-to: #ED4264;
 }
@@ -1240,10 +1292,6 @@ video {
   --tw-gradient-to: #3b82f6;
 }
 
-.to-Peach-Yellow {
-  --tw-gradient-to: #FFEDBC;
-}
-
 .p-4 {
   padding: 1rem;
 }
@@ -1352,6 +1400,14 @@ video {
   padding-bottom: 0px;
 }
 
+.pt-10 {
+  padding-top: 2.5rem;
+}
+
+.pt-9 {
+  padding-top: 2.25rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -1395,6 +1451,11 @@ video {
   line-height: 2rem;
 }
 
+.text-6xl {
+  font-size: 3.75rem;
+  line-height: 1;
+}
+
 .font-medium {
   font-weight: 500;
 }
@@ -1507,6 +1568,14 @@ video {
   transition-duration: 500ms;
 }
 
+.duration-100 {
+  transition-duration: 100ms;
+}
+
+.duration-200 {
+  transition-duration: 200ms;
+}
+
 .ease-in {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }