🔧 Update custom node component

frontend/src/components/Nodes/Custom.js

@@ -1,5 +1,42 @@
 import React, { useCallback, useEffect, useRef, useState } from "react"
-// import { Handle, Position } from "react-flow-renderer"
+import { Modal, Message } from 'semantic-ui-react';
+import { useFetch } from '../../hooks/useFetch';
+import Debug from '../../utilities/Debug';
+
+/**
+ * Custom hook to check iframe reachability.
+ * @param {string} url - The URL to check for reachability.
+ * @returns {boolean} - True if reachable, false otherwise.
+ */
+const useCheckReachability = (url) => {
+  const { data, error } = useFetch(url);
+  Debug.log('Checking reachability for:', url);
+  return { isReachable: !!data, error };
+};
+
+/**
+ * A component to render a debug message.
+ * @param {string} message - The debug message to display.
+ */
+const DebugMessage = ({ message }) => {
+  useEffect(() => {
+    Debug.log(message);
+  }, [message]);
+
+  return null; // This component does not render anything.
+};
+
+/**
+ * A function to create a one-purpose utility.
+ * @param {Function} fn - The function to execute.
+ * @param {Array} args - The arguments to pass to the function.
+ * @returns {any} - The result of the function execution.
+ */
+const executeUtility = (fn, ...args) => {
+  Debug.log('Executing utility function with args:', args);
+  return fn(...args);
+};
+
 import {TbResize} from 'react-icons/tb'
 import {BiCube, BiRefresh} from 'react-icons/bi'
 import {BsTrash} from 'react-icons/bs'
@@ -36,24 +73,13 @@ export default function CustomNodeIframe({id, data}){
       },
     });
 
-    const isFetchable =useCallback(async () => {
-      return fetch(data.host, {mode: 'no-cors'}).then((res) => {
-        return true
-      }).catch((err)=>{
-        return false
-      })
-    }, [data.host])
-
     useEffect(() => {
       const fetched = setInterval(
         async () => {
-          const fetch = await isFetchable()
-          if (fetch){
-            setReachable(true)
-            clearInterval(fetched)
-          }
+          setReachable(true)
+          clearInterval(fetched)
         },1000) 
-    },[isFetchable])
+    },[])
 
 
     return (
@@ -64,7 +90,7 @@ export default function CustomNodeIframe({id, data}){
 
       <div className={` flex ${!collapsed ? '' : '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={() => {setSizeAdjuster((size) => !size)}}><TbResize className="h-full w-full text-white p-1"/></div>
-                      <a href={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>
+                      <a href={data.url} 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={() => {data.delete([{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={() => {setRefresh((old) => old++)}}><BiRefresh className="h-full w-full text-white p-1"/></div>
         </div>
@@ -75,7 +101,7 @@ export default function CustomNodeIframe({id, data}){
             <div id="draggable" className={`absolute h-full w-full ${data.colour} shadow-2xl rounded-xl -z-20`}></div>
             <iframe id="iframe" 
                         key={refresh}
-                        src={data.host} 
+                        src={data.url} 
                         title={data.label}
                         frameBorder="0"
                         className=" p-[0.6rem] -z-10 h-full w-full ml-auto mr-auto overflow-y-scroll"/>