Frontend Refactor 🏃

frontend/src/components/Navagation/navbar.js

@@ -221,11 +221,11 @@ 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-grab shadow-lg
+                    className={` text-white text-md flex flex-col 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`}  break-all -z-20`} draggable>
 
-                    <span className=" absolute text-4xl opacity-70 left-[39.15%] z-10">{`${this.state.emoji[index] === null ? "" : this.state.emoji[index]}`}</span>    
-                    <span className={` text-base flex-1 font-bold z-20  ${this.state.open ? "" : "hidden"}`}>{`${item.name}`}</span>
+                    <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>
 
                 </li >      
 

frontend/src/components/Nodes/Custom.js

@@ -17,17 +17,19 @@ export default class CustomNodeIframe extends React.Component {
         width : 540,
         height : 600,
         size : false,
-        iframe : 0
+        iframe : 0,
+        initial_pos : 0,
+        initial_size : 0, 
       }
  
     }
 
     handelSelected = () => {
-      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})
+      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})
     }
 
     handelSizeState = () => {
-        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})
+        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})
       }
 
     isFetchable = async (host) => {
@@ -47,24 +49,34 @@ export default class CustomNodeIframe extends React.Component {
     }
 
     onRefresh(){
-      if(!this.isFetchable) this.onNodeClick(this.state.data.label)
+      if(!this.isFetchable) 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})
+        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})
       }
     }
 
     handelOnChange(evt, type){
-      this.setState({id : this.state.id, reachable : this.state.reachable, selected : this.state.selected, data : this.state.data, width :  type === "width" ? parseInt(evt.target.value) : this.state.width, height : type === "height" ? parseInt(evt.target.value) : this.state.height, size : this.state.size, iframe : this.state.iframe})
+      this.setState({id : this.state.id, reachable : this.state.reachable, selected : this.state.selected, data : this.state.data, width :  type === "width" ? parseInt(evt.target.value) : this.state.width, height : type === "height" ? parseInt(evt.target.value) : this.state.height, size : this.state.size, iframe : this.state.iframe, initial_pos : this.state.initial_pos, initial_size : this.state.initial_size})
         type === "width" ? this.myRef.current.style.width = `${parseInt(evt.target.value)}px` : this.myRef.current.style.height = `${parseInt(evt.target.value)}px` 
     }
 
     handelSize(evt, increment, change){
       if (evt === "increment") {
-        this.setState({id : this.state.id, reachable : this.state.reachable, selected : this.state.selected, data : this.state.data, width :  change === "width" ? this.state.width + increment : this.state.width, height : change === "height" ? this.state.height + increment : this.state.height, size : this.state.size, iframe : this.state.iframe})
+        this.setState({id : this.state.id, reachable : this.state.reachable, selected : this.state.selected, data : this.state.data, width :  change === "width" ? this.state.width + increment : this.state.width, height : change === "height" ? this.state.height + increment : this.state.height, size : this.state.size, iframe : this.state.iframe, initial_pos : this.state.initial_pos, initial_size : this.state.initial_size})
         change === "width" ? this.myRef.current.style.width = `${this.state.width + increment}px` : this.myRef.current.style.height = `${this.state.height + increment}px` 
       }
 
     }
+    
+    // (Experimental) resize nodes by dragging
+    // initial = (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 :  e.clientY, initial_size : this.myRef.current.offsetHeight })
+    // }
+
+    // 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`
+    // }
 
     Counter(focus, size){
       return (<div className="custom-number-input h-10 w-32 dark:text-white text-black ">
@@ -81,7 +93,7 @@ export default class CustomNodeIframe extends React.Component {
     }
         
     render(){
-      if (!this.state.reachable) this.onNodeClick(this.state.data.label) 
+      if (!this.state.reachable) this.onNodeClick(this.state.id) 
       return (<>
                 <>
                   <div className=" flex w-full h-10 top-0 cursor-pointer" onClick={this.handelEvent}>
@@ -91,7 +103,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.data.label)}><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.id)}><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">
@@ -102,8 +114,8 @@ export default class CustomNodeIframe extends React.Component {
                   
                   </div>               
                 
-                  <div className={`relative w-[540px] h-[600px] overflow-hidden m-0 p-0 shadow-2xl`} ref={this.myRef}>
-                    <div className={`absolute h-full w-full ${this.state.data.colour} border-1shadow-2xl shadow-black rounded-xl -z-20`}></div>
+                  <div id="draggable" className={`relative w-[540px] h-[600px] overflow-hidden m-0 p-0 shadow-2xl`} ref={this.myRef}>
+                    <div className={`absolute h-full w-full ${this.state.data.colour} border-1 shadow-2xl rounded-xl -z-20`}></div>
                     <iframe 
                         id="iframe" 
                         key={this.state.iframe}
@@ -113,6 +125,12 @@ export default class CustomNodeIframe extends React.Component {
                         className=" -z-10 container h-full p-2 flex-grow space-iframe overflow-scroll " 
                         sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>
                   </div>
+                  {// (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)}}
+                       ></div> */}
                 </>
         </>)
     }

frontend/src/components/ReactFlow/ReactFlowEnv.js

@@ -38,11 +38,13 @@ 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 onDrop = useCallback(
       (event) => {
         event.preventDefault();
-  
+        console.log(event.dataTransfer.getData('application/reactflow'))
         const reactFlowBounds = reactFlowWrapper.current.getBoundingClientRect();
         const type = event.dataTransfer.getData('application/reactflow');
         const item  = JSON.parse(event.dataTransfer.getData('application/item'));
@@ -60,7 +62,8 @@ export default function ReactEnviorment() {
           id: `${item.name}-${nodes.length}`,
           type,
           position,
-          data: { label: `${item.name}`, host : `${item.host}`, colour : `${colour}`, delete : deleteNodeContains },
+          dragHandle : `#draggable`,
+          data: { label: `${item.name}`, host : `${item.host}`, colour : `${colour}`, delete : deleteNode },
         };
         setNodes((nds) => nds.concat(newNode));
       },
@@ -75,7 +78,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={deleteNodeContains} onDragOver={onDragOver} onDrop={onDrop} onInit={setReactFlowInstance}  fitView>
+              <ReactFlow nodes={nodes} edges={edges} nodeTypes={types} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} 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

@@ -583,6 +583,10 @@ video {
   }
 }
 
+.fixed {
+  position: fixed;
+}
+
 .absolute {
   position: absolute;
 }
@@ -628,6 +632,22 @@ video {
   right: 1.25rem;
 }
 
+.left-\[50\%\] {
+  left: 50%;
+}
+
+.right-\[50\%\] {
+  right: 50%;
+}
+
+.right-\[45\%\] {
+  right: 45%;
+}
+
+.right-\[39\.1\%\] {
+  right: 39.1%;
+}
+
 .-z-20 {
   z-index: -20;
 }
@@ -648,6 +668,26 @@ video {
   z-index: 50;
 }
 
+.-z-0 {
+  z-index: 0;
+}
+
+.z-30 {
+  z-index: 30;
+}
+
+.-z-40 {
+  z-index: -40;
+}
+
+.z-\[100\] {
+  z-index: 100;
+}
+
+.z-\[\] {
+  z-index: ;
+}
+
 .float-left {
   float: left;
 }
@@ -660,6 +700,21 @@ video {
   margin: 0px;
 }
 
+.my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.my-5 {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .mt-4 {
   margin-top: 1rem;
 }
@@ -684,6 +739,46 @@ video {
   margin-top: -0.75rem;
 }
 
+.-mr-6 {
+  margin-right: -1.5rem;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.mb-10 {
+  margin-bottom: 2.5rem;
+}
+
+.mr-10 {
+  margin-right: 2.5rem;
+}
+
+.ml-10 {
+  margin-left: 2.5rem;
+}
+
+.ml-60 {
+  margin-left: 15rem;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.-mb-2 {
+  margin-bottom: -0.5rem;
+}
+
+.-mt-2 {
+  margin-top: -0.5rem;
+}
+
 .block {
   display: block;
 }
@@ -696,6 +791,10 @@ video {
   display: inline-flex;
 }
 
+.table {
+  display: table;
+}
+
 .hidden {
   display: none;
 }
@@ -760,6 +859,10 @@ video {
   width: 100vw;
 }
 
+.max-w-full {
+  max-width: 100%;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -782,15 +885,27 @@ video {
   cursor: pointer;
 }
 
+.cursor-ns-resize {
+  cursor: ns-resize;
+}
+
 .select-none {
   -webkit-user-select: none;
           user-select: none;
 }
 
+.resize {
+  resize: both;
+}
+
 .flex-row {
   flex-direction: row;
 }
 
+.flex-col {
+  flex-direction: column;
+}
+
 .items-center {
   align-items: center;
 }
@@ -937,6 +1052,11 @@ video {
   background-color: rgb(254 169 89 / var(--tw-bg-opacity));
 }
 
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
 .bg-gradient-to-bl {
   background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
 }
@@ -1025,12 +1145,6 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.from-Entrepreneurial-Lies-Gray {
-  --tw-gradient-from: #8693AB;
-  --tw-gradient-to: rgb(134 147 171 / 0);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
 .via-purple-500 {
   --tw-gradient-to: rgb(168 85 247 / 0);
   --tw-gradient-stops: var(--tw-gradient-from), #a855f7, var(--tw-gradient-to);
@@ -1123,10 +1237,6 @@ video {
   --tw-gradient-to: #1565C0;
 }
 
-.to-Entrepreneurial-Lies-Gray {
-  --tw-gradient-to: #8693AB;
-}
-
 .p-5 {
   padding: 1.25rem;
 }
@@ -1172,6 +1282,16 @@ video {
   padding-right: 1.5rem;
 }
 
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.px-9 {
+  padding-left: 2.25rem;
+  padding-right: 2.25rem;
+}
+
 .pt-8 {
   padding-top: 2rem;
 }
@@ -1204,6 +1324,10 @@ video {
   padding-top: 0.5rem;
 }
 
+.pl-10 {
+  padding-left: 2.5rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -1237,6 +1361,11 @@ video {
   line-height: 2rem;
 }
 
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -1245,6 +1374,14 @@ video {
   font-weight: 600;
 }
 
+.font-extrabold {
+  font-weight: 800;
+}
+
+.leading-tight {
+  line-height: 1.25;
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1255,6 +1392,11 @@ video {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
+.text-blue-50 {
+  --tw-text-opacity: 1;
+  color: rgb(239 246 255 / var(--tw-text-opacity));
+}
+
 .underline {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
@@ -1264,6 +1406,10 @@ video {
   opacity: 0.7;
 }
 
+.opacity-60 {
+  opacity: 0.6;
+}
+
 .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);
@@ -1288,11 +1434,6 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.shadow-black {
-  --tw-shadow-color: #000;
-  --tw-shadow: var(--tw-shadow-colored);
-}
-
 .outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -1419,10 +1560,6 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.dark .dark\:to-Entrepreneurial-Lies-Gray {
-  --tw-gradient-to: #8693AB;
-}
-
 .dark .dark\:to-Entrepreneurial-Lies-White {
   --tw-gradient-to: #BDD4E7;
 }
@@ -1433,17 +1570,51 @@ video {
 }
 
 @media (min-width: 640px) {
+  .sm\:left-\[38\.5\%\] {
+    left: 38.5%;
+  }
+
+  .sm\:left-\[50\%\] {
+    left: 50%;
+  }
+
+  .sm\:left-\[70\%\] {
+    left: 70%;
+  }
+
+  .sm\:right-\[\%\] {
+    right: %;
+  }
+
   .sm\:w-60 {
     width: 15rem;
   }
 
+  .sm\:pl-5 {
+    padding-left: 1.25rem;
+  }
+
   .sm\:text-sm {
     font-size: 0.875rem;
     line-height: 1.25rem;
   }
 }
 
+@media (min-width: 768px) {
+  .md\:left-\[39\.15\%\] {
+    left: 39.15%;
+  }
+
+  .md\:right-\[\%\] {
+    right: %;
+  }
+}
+
 @media (min-width: 1024px) {
+  .lg\:left-\[40\%\] {
+    left: 40%;
+  }
+
   .lg\:w-72 {
     width: 18rem;
   }