Save Board 💾

frontend/src/components/Navagation/navbar.js

@@ -8,19 +8,19 @@ import { Message, Header, Modal, Button, Icon } from 'semantic-ui-react'
 export default class Navbar extends Component{
     constructor(props){
         super(props) 
-        this.fetch_classes()
         this.temp_host = 0
         this.deleteNode = props.onDelete
         this.state = {open : true,
             menu : [],
-            colour : [],
+            colour : props.colour,
             text : "",
             name : "",
-            emoji : [],
+            emoji : props.emoji,
             mode : false,
             modal : false,
             error : false
            }
+        this.fetch_classes()
     }
 
 
@@ -79,7 +79,7 @@ export default class Navbar extends Component{
             } 
 
         fetch(this.state.text, {method : "GET", mode: 'no-cors'}).then((re) => {
-            console.log(re)   
+            //console.log(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 => {
                 this.setState({open : this.state.open,
                                menu : this.state.menu,
@@ -99,7 +99,7 @@ export default class Navbar extends Component{
                                           error : true,
                                           modal : this.state.modal }))
           }).catch((err)=>{
-            console.log(err)
+            //console.log(err)
             this.setState({open : this.state.open,
                 menu : this.state.menu,
                 text: '',
@@ -135,7 +135,7 @@ export default class Navbar extends Component{
      */
     onDragStart = (event, nodeType, item, index) => {
         event.dataTransfer.setData('application/reactflow', nodeType);
-        event.dataTransfer.setData('application/colour', this.state.colour[index])
+        event.dataTransfer.setData('application/style', JSON.stringify({colour : this.state.colour[index], emoji : this.state.emoji[index] }))
         event.dataTransfer.setData('application/item',  JSON.stringify(item))
         event.dataTransfer.effectAllowed = 'move';
       };
@@ -161,7 +161,10 @@ export default class Navbar extends Component{
      * @param {*} d integer variable of the diffence between the current menu and new menu updated ment
      */
     hanelTabs = (e, d) => {
-
+        if (e.length === this.state.colour.length){
+            this.setState({open : this.state.open, menu : e, text: this.state.text, name: this.state.name, colour : this.state.colour, emoji : this.state.emoji,  error : this.state.error, modal : this.state.modal })
+            return
+        }
         // if less then 0 we must remove colour's and emoji's
         // get index of the object
         // remove
@@ -178,6 +181,7 @@ export default class Navbar extends Component{
             this.setState({open : this.state.open, menu : e, text: this.state.text, name: this.state.name, colour : c, emoji : j,   error : this.state.error, modal : this.state.modal })
         }else{
             //append new colours
+            
             for(var i =0; i < d; i++){
                     c.push(random_colour(i === 0 ? null : c[i-1]));
                     j.push(random_emoji(i === 0 ? null : c[i-1]));
@@ -187,13 +191,6 @@ export default class Navbar extends Component{
         }
     }
 
-    /**
-     * Append a new colour, and emoji to the colour and emoji list with in the state of the component
-     */
-    appendTabs = () => {
-        this.setState({open : this.state.open, menu : this.state.menu, text: this.state.text, name: this.state.name, colour : [...this.state.colour, random_colour(this.state.colour[this.state.colour.length - 1] )] , emoji : [...this.state.emoji, random_emoji(this.state.emoji[this.state.emoji.length - 1] )],  error : this.state.error, modal : this.state.modal })
-    }
-
     /**
      * handel navagation open and close function
      */
@@ -224,7 +221,7 @@ export default class Navbar extends Component{
                                  p-5 px-2 mt-4 rounded-md ${ this.state.open ? `hover:animate-pulse ${this.state.colour[index] === null ? "" : this.state.colour[index]} ` : `hidden`}  break-all -z-20`} draggable>
 
                     <div className=" absolute -mt-2 text-4xl opacity-60 z-10 ">{`${this.state.emoji[index] === null ? "" : this.state.emoji[index]}`}</div>    
-                    <h4 className={`  max-w-full font-sans text-blue-50 leading-tight font-bold text-xl flex-1 z-20  ${this.state.open ? "" : "hidden"}`} style={{"text-shadow" : "0px 1px 2px rgba(0, 0, 0, 0.25)"}} >{`${item.name}`} </h4>
+                    <h4 className={`  max-w-full font-sans text-blue-50 leading-tight font-bold text-xl flex-1 z-20  ${this.state.open ? "" : "hidden"}`} style={{"textShadow" : "0px 1px 2px rgba(0, 0, 0, 0.25)"}} >{`${item.name}`} </h4>
 
                 </li >      
 
@@ -260,7 +257,7 @@ export default class Navbar extends Component{
                     Append Shared Gradio Hosts 
                 </Header>
                 <Modal.Content>
-                <div className=" text-center select-none">Host other HugginFace Models or Gradio application via shared lin</div>
+                <div className=" text-center select-none">Host other HugginFace Models or Gradio application via shared link</div>
                 <div className={`flex items-center rounded-md bg-light-white mt-6  border-dashed`}>
                 <label className="relative block w-full">
                     <span className={`absolute inset-y-0 left-0 flex items-center pl-3`}>

frontend/src/components/Nodes/Custom.js

@@ -37,7 +37,6 @@ export default class CustomNodeIframe extends React.Component {
       fetch(host, {mode: 'no-cors'}).then((re) => {
         return true
       }).catch((err)=>{
-        alert(`🤪 Something went wrong the url that that was put in is not reachable...\n\n${err}`)
         return false
       })
       return false
@@ -49,8 +48,9 @@ export default class CustomNodeIframe extends React.Component {
     }
 
     onRefresh(){
-      if(!this.isFetchable) this.onNodeClick(this.state.id)
-      else{
+      if(!this.isFetchable(this.state.data.host)){ 
+        this.onNodeClick(this.state.id)
+      } else{
         this.setState({id : this.state.id, reachable : this.state.reachable, selected : this.state.selected, data : this.state.data, width : this.state.width, height : this.state.height, size : this.state.size, iframe : this.state.iframe + 1, initial_pos : this.state.initial_pos, initial_size : this.state.initial_size})
       }
     }
@@ -74,8 +74,9 @@ export default class CustomNodeIframe extends React.Component {
     }
 
     resize = (e) => {
-      this.setState({id : this.state.id, reachable : this.state.reachable, selected : this.state.selected, data : this.state.data, width :  this.state.width, height : this.state.height, size : this.state.size, iframe : this.state.iframe, initial_pos : this.state.initial_pos, initial_size : this.state.initial_size})
-      this.myRef.current.style.height = `${parseInt(this.state.initial_size) + parseInt(e.clientY - this.state.initial_pos)}px`
+      var new_height = parseInt(this.state.initial_size) + parseInt(e.clientY - this.state.initial_pos)
+      this.setState({id : this.state.id, reachable : this.state.reachable, selected : this.state.selected, data : this.state.data, width :  this.state.width, height : new_height, size : this.state.size, iframe : this.state.iframe, initial_pos : this.state.initial_pos, initial_size : this.state.initial_size})
+      this.myRef.current.style.height = `${new_height}px`
     }
 
     Counter(focus, size){
@@ -93,7 +94,7 @@ export default class CustomNodeIframe extends React.Component {
     }
         
     render(){
-      if (!this.state.reachable) this.onNodeClick(this.state.id) 
+      if (!this.state.reachable) {this.onNodeClick(this.state.id) }
       return (<>
                 <>
                   <div className=" flex w-full h-10 top-0 cursor-pointer" onClick={this.handelEvent}>
@@ -128,8 +129,8 @@ export default class CustomNodeIframe extends React.Component {
                   {/* (Experimental) Do not uncomment */}
                    <div className={`absolute bottom-0 w-full h-10 bg-transparent border-1 shadow-2xl rounded-xl z-10 cursor-ns-resize`} 
                        draggable
-                       onDragStart={(e) => { this.initial(e)}}
-                       onDrag={(e) => { this.resize(e)}}
+                       onDragStart={(e) => { this.initial(e) }}
+                       onDrag={(e) => { this.resize(e) }}
                        ></div> 
                 </>
         </>)

frontend/src/components/ReactFlow/ReactFlowEnv.js

@@ -2,10 +2,9 @@ import CustomNodeIframe from "../Nodes/Custom.js";
 import '../../css/dist/output.css'
 import ReactFlow, { Background,
                     applyNodeChanges,
-                    applyEdgeChanges,
                     ReactFlowProvider,
                     } from 'react-flow-renderer';
-import React ,{ useState, useCallback, useRef } from 'react';
+import React ,{ useState, useCallback, useRef, useEffect } from 'react';
 import Navbar from '../Navagation/navbar';
 import { useThemeDetector } from '../../helper/visual'
  
@@ -17,20 +16,31 @@ 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);
 
 
+    useEffect(() => {
+      const restore = () => {
+      const flow = JSON.parse(localStorage.getItem('flowkey'));
+        
+        if(flow){
+          flow.nodes.map((nds) => {
+            nds.data.delete = deleteNode
+          })
+          setNodes(flow.nodes || [])
+
+        }
+      }
+      restore()
+    },[])
+
+
     const onNodesChange = useCallback(
       (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
       [setNodes]
     );
   
-    const onEdgesChange = useCallback(
-      (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
-      [setEdges]
-    );
   
     const onDragOver = useCallback((event) => {
       event.preventDefault();
@@ -40,6 +50,25 @@ export default function ReactEnviorment() {
     const deleteNodeContains = (id) =>{setNodes((nds) => nds.filter(n => !n.id.includes(`${id}-`) ))}
     const deleteNode = (id) =>{setNodes((nds) => nds.filter(n => n.id !== id ))}
     
+    const onSave = useCallback(() => {
+      if (reactFlowInstance) {
+        alert("Saved")
+        const flow = reactFlowInstance.toObject();
+        localStorage.setItem('flowkey', JSON.stringify(flow));
+        var labels = [];
+        var colour = [];
+        var emoji = [];
+          for(let i = 0; i < flow.nodes.length; i++){
+            if (!labels.includes(flow.nodes[i].data.label))
+              colour.push(flow.nodes[i].data.colour)
+              emoji.push(flow.nodes[i].data.emoji)
+              labels.push(flow.nodes[i].data.label)
+          }
+        localStorage.setItem('colour',JSON.stringify(colour))
+        localStorage.setItem('emoji', JSON.stringify(emoji))
+      }
+    }, [reactFlowInstance]);
+
 
     const onDrop = useCallback(
       (event) => {
@@ -49,7 +78,7 @@ export default function ReactEnviorment() {
           const reactFlowBounds = reactFlowWrapper.current.getBoundingClientRect();
           const type = event.dataTransfer.getData('application/reactflow');
           const item  = JSON.parse(event.dataTransfer.getData('application/item'));
-          const colour = event.dataTransfer.getData('application/colour');
+          const style = JSON.parse(event.dataTransfer.getData('application/style'));
           // check if the dropped element is valid
           if (typeof type === 'undefined' || !type) {
             return;
@@ -59,13 +88,15 @@ export default function ReactEnviorment() {
             x: event.clientX - reactFlowBounds.left,
             y: event.clientY - reactFlowBounds.top,
           });
+
           const newNode = {
-            id: `${item.name}-${nodes.length}`,
+            id: `${item.name}-${nodes.length+1}`,
             type,
             position,
             dragHandle : `#draggable`,
-            data: { label: `${item.name}`, host : `${item.host}`, colour : `${colour}`, delete : deleteNode },
+            data: { label: `${item.name}`, host : `${item.host}`, colour : `${style.colour}`, emoji : `${style.emoji}`, delete : deleteNode },
           };
+
           setNodes((nds) => nds.concat(newNode));
       }
       },
@@ -73,14 +104,15 @@ export default function ReactEnviorment() {
 
     return (
       <>          
-        <div className=' absolute top-4 right-5 z-50' onClick={()=> setTheme(!theme)}>
-          <h1 className='text-4xl select-none' >{theme  ? '🌙' : '☀️'}</h1>  
+        <div className=' absolute top-4 right-5 z-50 cursor-default select-none text-4xl ' >
+          <h1 title={theme ? 'Dark Mode' : 'Light Mode'} onClick={() => setTheme(!theme)} >{theme  ? '🌙' : '☀️'}</h1> 
+          <h1 title="Save" className=" pt-5" onClick={() => onSave()}>💾</h1> 
         </div>
         <div className={`flex h-screen w-screen ${theme ? "dark" : ""} transition-all`}>
-          <Navbar onDelete={deleteNodeContains}/>
+          <Navbar onDelete={deleteNodeContains} colour={JSON.parse(localStorage.getItem('colour'))} emoji={JSON.parse(localStorage.getItem('emoji'))}/>
           <ReactFlowProvider>
             <div className="h-screen w-screen" ref={reactFlowWrapper}>
-              <ReactFlow nodes={nodes} edges={edges} nodeTypes={types} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onNodesDelete={deleteNode} onDragOver={onDragOver} onDrop={onDrop} onInit={setReactFlowInstance}  fitView>
+              <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>
             </div>

frontend/src/css/dist/output.css

@@ -790,6 +790,10 @@ video {
   cursor: ns-resize;
 }
 
+.cursor-default {
+  cursor: default;
+}
+
 .select-none {
   -webkit-user-select: none;
           user-select: none;
@@ -1210,6 +1214,10 @@ video {
   padding-top: 0.5rem;
 }
 
+.pt-5 {
+  padding-top: 1.25rem;
+}
+
 .text-center {
   text-align: center;
 }