🆕 frontend updates

frontend/Makefile

@@ -0,0 +1,6 @@
+start:
+	npm run start
+
+tailwind:
+	npx tailwindcss -i ./src/css/input.css -o ./src/css/dist/output.css --watch
+	

frontend/src/components/Navagation/navbar.js

@@ -62,18 +62,12 @@ export default class Navbar extends Component{
             hugginFace : /^https?:\/\/*(hf.space)\/*(embed)\/*([a-zA-Z0-9+_-]+)\/*([a-zA-Z0-9+_-]+)\/*([+])?(\/)?$/
         } 
 
-        if (this.state.menu.findIndex(element => {return element.name.toLowerCase() === this.state.name.toLowerCase() || element.host.includes(this.state.host) }) !== -1 ||
+        if (this.state.menu.findIndex(element => {return element.name.toLowerCase() === this.state.name.toLowerCase() || element.host.includes(this.state.text) }) !== -1 ||
             this.state.text.includes(" ") || 
             (!pattern.local.test(this.state.text) &&
             !pattern.share.test(this.state.text) &&
             !pattern.hugginFace.test(this.state.text))){
             
-            console.log(this.state.menu.findIndex(element => {return element.name.toLowerCase() === this.state.name.toLowerCase() || element.host.includes(this.state.host) }) !== -1)
-            console.log(this.state.text.includes(" ") )
-            console.log(this.state.text.includes("") )
-            console.log(!pattern.local.test(this.state.text) &&
-            !pattern.share.test(this.state.text) &&
-            !pattern.hugginFace.test(this.state.text))
                 this.setState({open : this.state.open,
                     menu : this.state.menu,
                     text: '',
@@ -97,7 +91,7 @@ export default class Navbar extends Component{
                                error : false,
                                modal : false  })
 
-            }).catch((err) => this.setState({open : this.state.open,
+            }).catch(() => this.setState({open : this.state.open,
                                           menu : this.state.menu,
                                           text: '',
                                           name : '',
@@ -226,11 +220,14 @@ export default class Navbar extends Component{
         
         return(<>
                 <li key={`${item.name}-${item.port}`} onDragStart={(event) => this.onDragStart(event, 'custom', item, index)} 
-                    className={` text-white text-md flex text-center items-center cursor-pointer shadow-lg
-                                 p-5 px-2 mt-4 ${ this.state.open ? `hover:animate-pulse ${this.state.colour[index] === null ? "" : this.state.colour[index]} ` : `hidden`} rounded-md mt-2 cursor-grabbing`} draggable>
-                    <span className="text-2xl font-medium ">            </span>
-                    <span className={`text-base font-medium flex-1 text-left" ${this.state.open ? "" : "hidden"}`}>{`${this.state.emoji[index] === null ? "" : this.state.emoji[index]} ${item.name}`}</span>    
+                    className={` text-white text-md flex text-center items-center cursor-grab shadow-lg
+                                 p-5 px-2 mt-4 rounded-md ${ this.state.open ? `hover:animate-pulse ${this.state.colour[index] === null ? "" : this.state.colour[index]} ` : `hidden`} `} draggable>
+
+                    <span className="flex-1 text-4xl opacity-70">{`${this.state.emoji[index] === null ? "" : this.state.emoji[index]}`}</span>    
+                    <div className={` absolute text-base font-bold w-[90%] h-full" ${this.state.open ? "" : "hidden"}`}>{`${item.name}`}</div>
+
                 </li >      
+
         </>)
     }
 

frontend/src/components/Nodes/Custom.js

@@ -47,7 +47,7 @@ export default class CustomNodeIframe extends React.Component {
     }
 
     onRefresh(){
-      if(!this.isFetchable) this.onNodeClick(this.state.id)
+      if(!this.isFetchable) this.onNodeClick(this.state.data.label)
       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})
       }
@@ -81,7 +81,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.data.label) 
       return (<>
                 <>
                   <div className=" flex w-full h-10 top-0 cursor-pointer" onClick={this.handelEvent}>
@@ -91,7 +91,7 @@ export default class CustomNodeIframe extends React.Component {
                     <div className={` flex ${this.state.selected ? '' : 'w-0 hidden'}`}>
                       <div title="Adjust Node Size" className="duration-300 cursor-pointer shadow-xl border-2 dark:border-white border-white h-10 w-10 mr-2 -mt-3 bg-Warm-Violet rounded-xl" onClick={this.handelSizeState}><TbResize className="h-full w-full text-white p-1"/></div>
                       <a href={this.state.data.host} target="_blank" rel="noopener noreferrer"><div title="Gradio Host Site" className="duration-300 cursor-pointer shadow-xl border-2 dark:border-white border-white h-10 w-10 mr-2 -mt-3 bg-Warm-Pink rounded-xl"><BiCube className="h-full w-full text-white p-1"/></div></a>
-                      <div title="Delete Node" className="duration-300 cursor-pointer shadow-xl border-2 dark:border-white border-white h-10 w-10 mr-2 -mt-3 bg-Warm-Red rounded-xl" onClick={() => this.onNodeClick(this.state.id)}><BsTrash className="h-full w-full text-white p-1"/></div>
+                      <div title="Delete Node" className="duration-300 cursor-pointer shadow-xl border-2 dark:border-white border-white h-10 w-10 mr-2 -mt-3 bg-Warm-Red rounded-xl" onClick={() => this.onNodeClick(this.state.data.label)}><BsTrash className="h-full w-full text-white p-1"/></div>
                       <div title="Refresh Node" className="duration-300 cursor-pointer shadow-xl border-2 dark:border-white border-white h-10 w-10 mr-2 -mt-3 bg-Warm-Orange rounded-xl" onClick={() => this.onRefresh()}><BiRefresh className="h-full w-full text-white p-1"/></div>
 
                       { this.state.size && <div className="duration-300 flex w-auto h-full  mr-2 -mt-3 space-x-4">

frontend/src/components/ReactFlow/ReactFlowEnv.js

@@ -37,8 +37,8 @@ export default function ReactEnviorment() {
       event.dataTransfer.dropEffect = 'move';
     }, []);
 
-    const deleteNode = (id) =>{setNodes((nds) => nds.filter(n => n.id !== id ))}
     const deleteNodeContains = (id) =>{setNodes((nds) => nds.filter(n => !n.id.includes(`${id}-`) ))}
+    
     const onDrop = useCallback(
       (event) => {
         event.preventDefault();
@@ -60,7 +60,7 @@ export default function ReactEnviorment() {
           id: `${item.name}-${nodes.length}`,
           type,
           position,
-          data: { label: `${item.name}`, host : `${item.host}`, colour : `${colour}`, delete : deleteNode },
+          data: { label: `${item.name}`, host : `${item.host}`, colour : `${colour}`, delete : deleteNodeContains },
         };
         setNodes((nds) => nds.concat(newNode));
       },
@@ -75,7 +75,7 @@ export default function ReactEnviorment() {
           <Navbar onDelete={deleteNodeContains}/>
           <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} edges={edges} nodeTypes={types} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onNodesDelete={deleteNodeContains} 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

@@ -656,10 +656,6 @@ video {
   margin-top: 1rem;
 }
 
-.mt-2 {
-  margin-top: 0.5rem;
-}
-
 .ml-auto {
   margin-left: auto;
 }
@@ -696,6 +692,10 @@ video {
   display: none;
 }
 
+.h-full {
+  height: 100%;
+}
+
 .h-screen {
   height: 100vh;
 }
@@ -712,14 +712,14 @@ video {
   height: auto;
 }
 
-.h-full {
-  height: 100%;
-}
-
 .h-\[600px\] {
   height: 600px;
 }
 
+.w-\[90\%\] {
+  width: 90%;
+}
+
 .w-10 {
   width: 2.5rem;
 }
@@ -770,12 +770,12 @@ video {
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.cursor-pointer {
-  cursor: pointer;
+.cursor-grab {
+  cursor: grab;
 }
 
-.cursor-grabbing {
-  cursor: grabbing;
+.cursor-pointer {
+  cursor: pointer;
 }
 
 .select-none {
@@ -1174,6 +1174,10 @@ video {
   padding-left: 2.25rem;
 }
 
+.pb-3 {
+  padding-bottom: 0.75rem;
+}
+
 .pt-4 {
   padding-top: 1rem;
 }
@@ -1182,14 +1186,6 @@ video {
   padding-top: 0.5rem;
 }
 
-.pb-3 {
-  padding-bottom: 0.75rem;
-}
-
-.text-left {
-  text-align: left;
-}
-
 .text-center {
   text-align: center;
 }
@@ -1223,10 +1219,6 @@ video {
   line-height: 2.5rem;
 }
 
-.font-medium {
-  font-weight: 500;
-}
-
 .font-bold {
   font-weight: 700;
 }
@@ -1250,6 +1242,18 @@ video {
           text-decoration-line: underline;
 }
 
+.opacity-40 {
+  opacity: 0.4;
+}
+
+.opacity-60 {
+  opacity: 0.6;
+}
+
+.opacity-70 {
+  opacity: 0.7;
+}
+
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -1321,14 +1325,6 @@ video {
   color: rgb(148 163 184 / var(--tw-text-opacity));
 }
 
-.placeholder\:text-transparent::-webkit-input-placeholder {
-  color: transparent;
-}
-
-.placeholder\:text-transparent::placeholder {
-  color: transparent;
-}
-
 @-webkit-keyframes pulse {
   50% {
     opacity: .5;

frontend/src/helper/visual.js

@@ -1,5 +1,5 @@
 import '../css/dist/output.css'
-const emote = ['👺','💀','🎉','👾','🤖','🔥','🧠','🌿','🦾','🦊','✨','🏡','🐵','🦄','🀄','🌟','🖥','📟','👋','🧬','📖','🚀','👑','🌈','🌱','🌎']
+const emote = ['👺','🎮', '💀','⚗️', '🎉','👾','🤖', '🍩','✏️', '🎼', '🔥','🧠','🔒','🌿','🦾','🦊','✨','🏡','🐵','🦄','🀄','🌟','🖥','📟','👋','🧬','📖','🚀','👑','🌈','🌱','🌎']
 
 const colour_map = [
      'bg-gradient-to-bl from-Retro-light-blue to-Retro-light-pink',

frontend/tailwind.config.js

@@ -3,7 +3,7 @@ module.exports = {
   content: ["./src/**/*.{html,js}", "./src/*.{html,js}"],
   darkMode : 'class',
   theme: {
-    
+
     extend: {
      
       colors : {

makefile

@@ -1,9 +1,9 @@
 up:
-	docker-compose up -d;
+	docker compose up -d;
 down:
-	docker-compose down;
+	docker compose down;
 restart:
-	docker-compose down && docker-compose up -d --remove-orphans;
+	docker compose down && docker-compose up -d --remove-orphans;
 stop_all:
 	docker-stop $(docker ps -a -q) && docker rm $(docker ps -a -q);
 rm:
@@ -11,6 +11,6 @@ rm:
 wipe:
 	make down && make rm
 build:
-	docker-compose build
+	docker compose build
 environment:
 	docker exec -it backend bash